Add buttons on mobile to move sections

Revert "Transform helper to warning for edit view type"
This reverts commit 3abdffda9c.
2026-05-18 15:17:09 +00:00 · 2024-03-01 15:37:23 +01:00 · 2024-03-01 14:57:08 +01:00 · 2024-03-01 14:55:34 +01:00 · 2024-03-01 13:09:21 +01:00 · 2024-03-01 13:09:10 +01:00
1149 changed files with 39956 additions and 24793 deletions
@@ -5,6 +5,7 @@
    "context": ".."
  },
  "appPort": "8124:8123",
+  "postCreateCommand": "sudo apt update && sudo apt upgrade -y && sudo apt install -y libpcap-dev",
  "postStartCommand": "script/bootstrap",
  "containerEnv": {
    "WORKSPACE_DIRECTORY": "${containerWorkspaceFolder}"
@@ -9,7 +9,7 @@ body:

        If you have a feature or enhancement request for the frontend, please [start an discussion][fr] instead of creating an issue.

-        **Please not not report issues for custom cards.**
+        **Please do not report issues for custom cards.**

        [fr]: https://github.com/home-assistant/frontend/discussions
        [releases]: https://github.com/home-assistant/home-assistant/releases
@@ -24,6 +24,7 @@ body:
          required: true
        - label: I have tried a different browser to see if it is related to my browser.
          required: true
+        - label: I have tried reproducing the issue in [safe mode](https://www.home-assistant.io/blog/2023/11/01/release-202311/#restarting-into-safe-mode) to rule out problems with unsupported custom resources.
  - type: markdown
    attributes:
      value: |
@@ -1,31 +1,51 @@
 Build:
-  - build-scripts/**
-  - .browserslistrc
-  - gulpfile.js
+  - changed-files:
+      - any-glob-to-any-file:
+          - build-scripts/**
+          - .browserslistrc
+          - gulpfile.js

 Cast:
-  - cast/src/**
-  - src/cast/**
+  - changed-files:
+      - any-glob-to-any-file:
+          - cast/src/**
+          - src/cast/**

 Demo:
-  - demo/src/**
-  - src/fake_data/**
+  - changed-files:
+      - any-glob-to-any-file:
+          - demo/src/**
+          - src/fake_data/**

 Design:
-  - gallery/src/**
-  - src/fake_data/**
+  - changed-files:
+      - any-glob-to-any-file:
+          - gallery/src/**
+          - src/fake_data/**

 Dependencies:
-  - package.json
-  - renovate.json
-  - yarn.lock
-  - .yarn/**
-  - .yarnrc.yml
-  - .nvmrc
+  - any:
+      - changed-files:
+          # Match when only these files are changed (i.e. don't match PRs that happen to add or remove packages)
+          - any-glob-to-all-files:
+              - package.json
+              - renovate.json
+              - yarn.lock
+              - .yarn/**
+              - .yarnrc.yml
+              - .nvmrc
+      # Dependabot and Renovate branches always match (i.e. compatibility tweaks by members considered minor)
+      - head-branch:
+          - "^renovate/"
+          - "^dependabot/"

 GitHub Actions:
-  - .github/workflows/**
-  - .github/*.yml
+  - changed-files:
+      - any-glob-to-any-file:
+          - .github/workflows/**
+          - .github/*.yml

 Supervisor:
-  - hassio/src/**
+  - changed-files:
+      - any-glob-to-any-file:
+          - hassio/src/**
@@ -26,7 +26,7 @@ jobs:
          ref: dev

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

      - name: Setup Node
-        uses: actions/setup-node@v4.0.0
+        uses: actions/setup-node@v4.0.2
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -26,7 +26,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@v4.1.1
      - name: Setup Node
-        uses: actions/setup-node@v4.0.0
+        uses: actions/setup-node@v4.0.2
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -37,17 +37,20 @@ 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@v3.3.2
+        uses: actions/cache@v4.0.0
        with:
          path: |
            node_modules/.cache/prettier
            node_modules/.cache/eslint
+            node_modules/.cache/typescript
          key: lint-${{ github.sha }}
          restore-keys: lint-
      - name: Run eslint
        run: yarn run lint:eslint --quiet
      - name: Run tsc
        run: yarn run lint:types
+      - name: Run lit-analyzer
+        run: yarn run lint:lit --quiet
      - name: Run prettier
        run: yarn run lint:prettier
  test:
@@ -57,14 +60,14 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@v4.1.1
      - name: Setup Node
-        uses: actions/setup-node@v4.0.0
+        uses: actions/setup-node@v4.0.2
        with:
          node-version-file: ".nvmrc"
          cache: yarn
      - name: Install dependencies
        run: yarn install --immutable
      - name: Build resources
-        run: ./node_modules/.bin/gulp build-translations build-locale-data
+        run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data
      - name: Run Tests
        run: yarn run test
  build:
@@ -75,7 +78,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@v4.1.1
      - name: Setup Node
-        uses: actions/setup-node@v4.0.0
+        uses: actions/setup-node@v4.0.2
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -86,7 +89,7 @@ jobs:
        env:
          IS_TEST: "true"
      - name: Upload bundle stats
-        uses: actions/upload-artifact@v3.1.3
+        uses: actions/upload-artifact@v4.3.1
        with:
          name: frontend-bundle-stats
          path: build/stats/*.json
@@ -99,7 +102,7 @@ jobs:
      - name: Check out files from GitHub
        uses: actions/checkout@v4.1.1
      - name: Setup Node
-        uses: actions/setup-node@v4.0.0
+        uses: actions/setup-node@v4.0.2
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -110,7 +113,7 @@ jobs:
        env:
          IS_TEST: "true"
      - name: Upload bundle stats
-        uses: actions/upload-artifact@v3.1.3
+        uses: actions/upload-artifact@v4.3.1
        with:
          name: supervisor-bundle-stats
          path: build/stats/*.json
@@ -36,14 +36,14 @@ jobs:

      # Initializes the CodeQL tools for scanning.
      - name: Initialize CodeQL
-        uses: github/codeql-action/init@v2
+        uses: github/codeql-action/init@v3
        with:
          languages: ${{ matrix.language }}

      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
      # If this step fails, then you should remove it and run the build manually (see below)
      - name: Autobuild
-        uses: github/codeql-action/autobuild@v2
+        uses: github/codeql-action/autobuild@v3

      # ℹ️ Command-line programs to run using the OS shell.
      # 📚 https://git.io/JvXDl
@@ -57,4 +57,4 @@ jobs:
      #   make release

      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v2
+        uses: github/codeql-action/analyze@v3
@@ -27,7 +27,7 @@ jobs:
          ref: dev

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

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

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

      - name: Setup Node
-        uses: actions/setup-node@v4.0.0
+        uses: actions/setup-node@v4.0.2
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -10,6 +10,6 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Apply labels
-        uses: actions/labeler@v4.3.0
+        uses: actions/labeler@v5.0.0
        with:
          sync-labels: true
@@ -9,9 +9,10 @@ jobs:
  lock:
    runs-on: ubuntu-latest
    steps:
-      - uses: dessant/lock-threads@v4.0.1
+      - uses: dessant/lock-threads@v5.0.1
        with:
          github-token: ${{ github.token }}
+          process-only: "issues, prs"
          issue-lock-inactive-days: "30"
          issue-exclude-created-before: "2020-10-01T00:00:00Z"
          issue-lock-reason: ""
@@ -23,12 +23,12 @@ jobs:
        uses: actions/checkout@v4.1.1

      - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
        with:
          python-version: ${{ env.PYTHON_VERSION }}

      - name: Setup Node
-        uses: actions/setup-node@v4.0.0
+        uses: actions/setup-node@v4.0.2
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -42,7 +42,7 @@ jobs:
          LOKALISE_TOKEN: ${{ secrets.LOKALISE_TOKEN }}

      - name: Bump version
-        run: script/version_bump.cjs nightly
+        run: script/version_bump.js nightly

      - name: Build nightly Python wheels
        run: |
@@ -57,14 +57,14 @@ jobs:
        run: tar -czvf translations.tar.gz translations

      - name: Upload build artifacts
-        uses: actions/upload-artifact@v3.1.3
+        uses: actions/upload-artifact@v4.3.1
        with:
          name: wheels
          path: dist/home_assistant_frontend*.whl
          if-no-files-found: error

      - name: Upload translations
-        uses: actions/upload-artifact@v3.1.3
+        uses: actions/upload-artifact@v4.3.1
        with:
          name: translations
          path: translations.tar.gz
@@ -18,6 +18,6 @@ jobs:
      pull-requests: read
    runs-on: ubuntu-latest
    steps:
-      - uses: release-drafter/release-drafter@v5
+      - uses: release-drafter/release-drafter@v6.0.0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -29,12 +29,12 @@ jobs:
        uses: home-assistant/actions/helpers/verify-version@master

      - name: Set up Python ${{ env.PYTHON_VERSION }}
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
        with:
          python-version: ${{ env.PYTHON_VERSION }}

      - name: Setup Node
-        uses: actions/setup-node@v4.0.0
+        uses: actions/setup-node@v4.0.2
        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@2023.10.5
+        uses: home-assistant/wheels@2024.01.0
        with:
          abi: cp311
          tag: musllinux_1_2
@@ -10,7 +10,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: 90 days stale policy
-        uses: actions/stale@v8.0.0
+        uses: actions/stale@v9.0.0
        with:
          repo-token: ${{ secrets.GITHUB_TOKEN }}
          days-before-stale: 90
@@ -0,0 +1,13 @@
+diff --git a/simple-tooltip.js b/simple-tooltip.js
+index 78a87f6a223925f0e29fbedb268c85a142ec6985..3d686dd6a3d5a93342b4b01408089fc316b408ca 100644
+--- a/simple-tooltip.js
+++ b/simple-tooltip.js
+@@ -195,6 +195,8 @@ class SimpleTooltip extends LitElement {
+         .hidden {
+           position: absolute;
+           left: -10000px;
+          inset-inline-start: -10000px;
+          inset-inline-end: initial;
+           top: auto;
+           width: 1px;
+           height: 1px;
@@ -1,39 +0,0 @@
-diff --git a/modular/sortable.complete.esm.js b/modular/sortable.complete.esm.js
-index 02e9f2d6bebeb430fe6e7c1cc3f9c3c9df051f14..bb8268b0844a1faa4108cc92c0be2a3dbaf23f83 100644
--- a/modular/sortable.complete.esm.js
-+++ b/modular/sortable.complete.esm.js
-@@ -1657,7 +1657,7 @@ Sortable.prototype =
-           target = parent; // store last element
-         }
-         /* jshint boss:true */
-        while (parent = parent.parentNode);
-+        while (parent = parent.parentNode || parent.getRootNode().host);
-       }
- 
-       _unhideGhostForTarget();
-diff --git a/modular/sortable.core.esm.js b/modular/sortable.core.esm.js
-index b04c8b4634f7c6b4ef1aadbb48afe6564306dea9..39a107163c8c336ebd669b5ea8a936af87e1c1e7 100644
--- a/modular/sortable.core.esm.js
-+++ b/modular/sortable.core.esm.js
-@@ -1657,7 +1657,7 @@ Sortable.prototype =
-           target = parent; // store last element
-         }
-         /* jshint boss:true */
-        while (parent = parent.parentNode);
-+        while (parent = parent.parentNode || parent.getRootNode().host);
-       }
- 
-       _unhideGhostForTarget();
-diff --git a/modular/sortable.esm.js b/modular/sortable.esm.js
-index 6ec7ed1bb557e21c2578200161e989c65d23150b..0a05475a22904472fac6c13f524c674da76584b0 100644
--- a/modular/sortable.esm.js
-+++ b/modular/sortable.esm.js
-@@ -1657,7 +1657,7 @@ Sortable.prototype =
-           target = parent; // store last element
-         }
-         /* jshint boss:true */
-        while (parent = parent.parentNode);
-+        while (parent = parent.parentNode || parent.getRootNode().host);
-       }
- 
-       _unhideGhostForTarget();
@@ -0,0 +1,73 @@
+diff --git a/modular/sortable.core.esm.js b/modular/sortable.core.esm.js
+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) {
+           capture();
+-          if (elLastChild && elLastChild.nextSibling) {
+-            // the last draggable element is not the last node
+-            el.insertBefore(dragEl, elLastChild.nextSibling);
+-          } else {
+-            el.appendChild(dragEl);
+          try {
+            if (elLastChild && elLastChild.nextSibling) {
+              // the last draggable element is not the last node
+              el.insertBefore(dragEl, elLastChild.nextSibling);
+            } else {
+              el.appendChild(dragEl);
+            }
+          }
+          catch(err) {
+            return completed(false);
+           }
+           parentEl = el; // actualization
+ 
+@@ -1802,7 +1807,13 @@ Sortable.prototype = /** @lends Sortable.prototype */{
+         targetRect = getRect(target);
+         if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, false) !== false) {
+           capture();
+-          el.insertBefore(dragEl, firstChild);
+          try {
+            el.insertBefore(dragEl, firstChild);
+          }
+          catch(err) {
+            return completed(false);
+          }
+          
+           parentEl = el; // actualization
+ 
+           changed();
+@@ -1849,12 +1860,17 @@ Sortable.prototype = /** @lends Sortable.prototype */{
+           _silent = true;
+           setTimeout(_unsilent, 30);
+           capture();
+-          if (after && !nextSibling) {
+-            el.appendChild(dragEl);
+-          } else {
+-            target.parentNode.insertBefore(dragEl, after ? nextSibling : target);
+-          }
+ 
+          try {
+            if (after && !nextSibling) {
+              el.appendChild(dragEl);
+            } else {
+              target.parentNode.insertBefore(dragEl, after ? nextSibling : target);
+            }
+          }
+          catch(err) {
+            return completed(false);
+          }
+           // Undo chrome's scroll adjustment (has no effect on other browsers)
+           if (scrolledPastTop) {
+             scrollBy(scrolledPastTop, 0, scrollBefore - scrolledPastTop.scrollTop);
@@ -6,4 +6,4 @@ enableGlobalCache: false

 nodeLinker: node-modules

-yarnPath: .yarn/releases/yarn-4.0.1.cjs
+yarnPath: .yarn/releases/yarn-4.1.0.cjs
@@ -0,0 +1,56 @@
+import defineProvider from "@babel/helper-define-polyfill-provider";
+
+// List of polyfill keys with supported browser targets for the functionality
+const PolyfillSupport = {
+  fetch: {
+    android: 42,
+    chrome: 42,
+    edge: 14,
+    firefox: 39,
+    ios: 10.3,
+    opera: 29,
+    opera_mobile: 29,
+    safari: 10.1,
+    samsung: 4.0,
+  },
+  proxy: {
+    android: 49,
+    chrome: 49,
+    edge: 12,
+    firefox: 18,
+    ios: 10.0,
+    opera: 36,
+    opera_mobile: 36,
+    safari: 10.0,
+    samsung: 5.0,
+  },
+};
+
+// Map of global variables and/or instance and static properties to the
+// corresponding polyfill key and actual module to import
+const polyfillMap = {
+  global: {
+    Proxy: { key: "proxy", module: "proxy-polyfill" },
+    fetch: { key: "fetch", module: "unfetch/polyfill" },
+  },
+  instance: {},
+  static: {},
+};
+
+// Create plugin using the same factory as for CoreJS
+export default defineProvider(
+  ({ createMetaResolver, debug, shouldInjectPolyfill }) => {
+    const resolvePolyfill = createMetaResolver(polyfillMap);
+    return {
+      name: "HA Custom",
+      polyfills: PolyfillSupport,
+      usageGlobal(meta, utils) {
+        const polyfill = resolvePolyfill(meta);
+        if (polyfill && shouldInjectPolyfill(polyfill.desc.key)) {
+          debug(polyfill.desc.key);
+          utils.injectGlobalImport(polyfill.desc.module);
+        }
+      },
+    };
+  }
+);
@@ -1,6 +1,7 @@
 const path = require("path");
 const env = require("./env.cjs");
 const paths = require("./paths.cjs");
+const { dependencies } = require("../package.json");

 // GitHub base URL to use for production source maps
 // Nightly builds use the commit SHA, otherwise assumes there is a tag that matches the version
@@ -31,8 +32,6 @@ module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
      require.resolve(
        path.resolve(paths.polymer_dir, "src/resources/compatibility.ts")
      ),
-    // This polyfill is loaded in workers to support ES5, filter it out.
-    latestBuild && require.resolve("proxy-polyfill/src/index.js"),
    // Icons in supervisor conflict with icons in HA so we don't load.
    isHassioBuild &&
      require.resolve(
@@ -87,14 +86,12 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
    setSpreadProperties: true,
  },
  browserslistEnv: latestBuild ? "modern" : "legacy",
-  // Must be unambiguous because some dependencies are CommonJS only
-  sourceType: "unambiguous",
  presets: [
    [
      "@babel/preset-env",
      {
-        useBuiltIns: latestBuild ? false : "entry",
-        corejs: latestBuild ? false : { version: "3.33", proposals: true },
+        useBuiltIns: latestBuild ? false : "usage",
+        corejs: latestBuild ? false : dependencies["core-js"],
        bugfixes: true,
        shippedProposals: true,
      },
@@ -112,27 +109,39 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
        ignoreModuleNotFound: true,
      },
    ],
+    [
+      path.resolve(
+        paths.polymer_dir,
+        "build-scripts/babel-plugins/custom-polyfill-plugin.js"
+      ),
+      { method: "usage-global" },
+    ],
    // Minify template literals for production
    isProdBuild && [
      "template-html-minifier",
      {
        modules: {
-          lit: [
-            "html",
-            { name: "svg", encapsulation: "svg" },
-            { name: "css", encapsulation: "style" },
-          ],
-          "@polymer/polymer/lib/utils/html-tag": ["html"],
+          ...Object.fromEntries(
+            ["lit", "lit-element", "lit-html"].map((m) => [
+              m,
+              [
+                "html",
+                { name: "svg", encapsulation: "svg" },
+                { name: "css", encapsulation: "style" },
+              ],
+            ])
+          ),
+          "@polymer/polymer/lib/utils/html-tag.js": ["html"],
        },
        strictCSS: true,
        htmlMinifier: module.exports.htmlMinifierOptions,
-        failOnError: true, // we can turn this off in case of false positives
+        failOnError: false, // we can turn this off in case of false positives
      },
    ],
    // Import helpers and regenerator from runtime package
    [
      "@babel/plugin-transform-runtime",
-      { version: require("../package.json").dependencies["@babel/runtime"] },
+      { version: dependencies["@babel/runtime"] },
    ],
    // Support  some proposals still in TC39 process
    ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
@@ -143,6 +152,18 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
    /node_modules[\\/]webpack[\\/]buildin/,
  ],
  sourceMaps: !isTestBuild,
+  overrides: [
+    {
+      // Use unambiguous for dependencies so that require() is correctly injected into CommonJS files
+      // Exclusions are needed in some cases where ES modules have no static imports or exports, such as polyfills
+      sourceType: "unambiguous",
+      include: /\/node_modules\//,
+      exclude: [
+        "element-internals-polyfill",
+        "@?lit(?:-labs|-element|-html)?",
+      ].map((p) => new RegExp(`/node_modules/${p}/`)),
+    },
+  ],
 });

 const nameSuffix = (latestBuild) => (latestBuild ? "-modern" : "-legacy");
@@ -30,8 +30,8 @@ gulp.task(
    env.useWDS()
      ? "wds-watch-app"
      : env.useRollup()
-      ? "rollup-watch-app"
-      : "webpack-watch-app"
+        ? "rollup-watch-app"
+        : "webpack-watch-app"
  )
 );

@@ -8,7 +8,10 @@ const zopfliOptions = { threshold: 150 };

 const compressDist = (rootDir) =>
  gulp
-    .src([`${rootDir}/**/*.{js,json,css,svg}`])
+    .src([
+      `${rootDir}/**/*.{js,json,css,svg,xml}`,
+      `${rootDir}/{authorize,onboarding}.html`,
+    ])
    .pipe(zopfli(zopfliOptions))
    .pipe(gulp.dest(rootDir));

@@ -161,6 +161,10 @@ gulp.task("fetch-lokalise", async function () {
            })
          );
        })
+        .catch((err) => {
+          console.error(err);
+          throw err;
+        })
    )
  );
 });
@@ -426,6 +426,7 @@ gulp.task(
      "fetch-nightly-translations",
      gulp.series("clean-translations", "ensure-translations-build-dir")
    ),
+    gulp.parallel("create-test-metadata", "create-test-translation"),
    "build-master-translation",
    "build-merged-translations",
    "build-translation-fragment-supervisor",
@@ -115,7 +115,9 @@ gulp.task("webpack-prod-app", () =>

 gulp.task("webpack-dev-server-demo", () =>
  runDevServer({
-    compiler: webpack(bothBuilds(createDemoConfig, { isProdBuild: false })),
+    compiler: webpack(
+      createDemoConfig({ isProdBuild: false, latestBuild: true })
+    ),
    contentBase: paths.demo_output_root,
    port: 8090,
  })
@@ -131,7 +133,9 @@ gulp.task("webpack-prod-demo", () =>

 gulp.task("webpack-dev-server-cast", () =>
  runDevServer({
-    compiler: webpack(bothBuilds(createCastConfig, { isProdBuild: false })),
+    compiler: webpack(
+      createCastConfig({ isProdBuild: false, latestBuild: true })
+    ),
    contentBase: paths.cast_output_root,
    port: 8080,
    // Accessible from the network, because that's how Cast hits it.
@@ -174,8 +178,9 @@ gulp.task("webpack-prod-hassio", () =>

 gulp.task("webpack-dev-server-gallery", () =>
  runDevServer({
-    // We don't use the es5 build, but the dev server will fuck up the publicPath if we don't
-    compiler: webpack(bothBuilds(createGalleryConfig, { isProdBuild: false })),
+    compiler: webpack(
+      createGalleryConfig({ isProdBuild: false, latestBuild: true })
+    ),
    contentBase: paths.gallery_output_root,
    port: 8100,
    listenHost: "0.0.0.0",
@@ -7,6 +7,9 @@ const TerserPlugin = require("terser-webpack-plugin");
 const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
 const log = require("fancy-log");
 const WebpackBar = require("webpackbar");
+const {
+  TransformAsyncModulesPlugin,
+} = require("transform-async-modules-webpack-plugin");
 const paths = require("./paths.cjs");
 const bundle = require("./bundle.cjs");

@@ -51,8 +54,8 @@ const createWebpackConfig = ({
    devtool: isTestBuild
      ? false
      : isProdBuild
-      ? "nosources-source-map"
-      : "eval-cheap-module-source-map",
+        ? "nosources-source-map"
+        : "eval-cheap-module-source-map",
    entry,
    node: false,
    module: {
@@ -142,17 +145,6 @@ const createWebpackConfig = ({
        ),
        path.resolve(paths.polymer_dir, "src/util/empty.js")
      ),
-      // See `src/resources/intl-polyfill-legacy.ts` for explanation
-      !latestBuild &&
-        new webpack.NormalModuleReplacementPlugin(
-          new RegExp(
-            path.resolve(paths.polymer_dir, "src/resources/intl-polyfill.ts")
-          ),
-          path.resolve(
-            paths.polymer_dir,
-            "src/resources/intl-polyfill-legacy.ts"
-          )
-        ),
      !isProdBuild && new LogStartCompilePlugin(),
      isProdBuild &&
        new StatsWriterPlugin({
@@ -163,6 +155,8 @@ const createWebpackConfig = ({
          stats: { assets: true, chunks: true, modules: true },
          transform: (stats) => JSON.stringify(filterStats(stats)),
        }),
+      !latestBuild &&
+        new TransformAsyncModulesPlugin({ browserslistEnv: "legacy" }),
    ].filter(Boolean),
    resolve: {
      extensions: [".ts", ".js", ".json"],
@@ -191,11 +185,11 @@ const createWebpackConfig = ({
      filename: ({ chunk }) =>
        !isProdBuild || isStatsBuild || dontHash.has(chunk.name)
          ? "[name].js"
-          : "[name]-[contenthash].js",
+          : "[name].[contenthash].js",
      chunkFilename:
-        isProdBuild && !isStatsBuild ? "[id]-[contenthash].js" : "[name].js",
+        isProdBuild && !isStatsBuild ? "[name].[contenthash].js" : "[name].js",
      assetModuleFilename:
-        isProdBuild && !isStatsBuild ? "[id]-[contenthash][ext]" : "[id][ext]",
+        isProdBuild && !isStatsBuild ? "[id].[contenthash][ext]" : "[id][ext]",
      crossOriginLoading: "use-credentials",
      hashFunction: "xxhash64",
      hashDigest: "base64url",
@@ -31,11 +31,11 @@ import "./hc-layout";

@customElement("hc-cast")
 class HcCast extends LitElement {
-  @property() public auth!: Auth;
+  @property({ attribute: false }) public auth!: Auth;

-  @property() public connection!: Connection;
+  @property({ attribute: false }) public connection!: Connection;

-  @property() public castManager!: CastManager;
+  @property({ attribute: false }) public castManager!: CastManager;

  @state() private askWrite = false;

@@ -73,44 +73,44 @@ class HcCast extends LitElement {
        ${error
          ? html` <div class="card-content">${error}</div> `
          : !this.castManager.status
-          ? html`
-              <p class="center-item">
-                <mwc-button raised @click=${this._handleLaunch}>
-                  <ha-svg-icon .path=${mdiCast}></ha-svg-icon>
-                  Start Casting
-                </mwc-button>
-              </p>
-            `
-          : html`
-              <div class="section-header">PICK A VIEW</div>
-              <paper-listbox
-                attr-for-selected="data-path"
-                .selected=${this.castManager.status.lovelacePath || ""}
-              >
-                ${(
-                  this.lovelaceViews ?? [
-                    generateDefaultViewConfig({}, {}, {}, {}, () => ""),
-                  ]
-                ).map(
-                  (view, idx) => html`
-                    <paper-icon-item
-                      @click=${this._handlePickView}
-                      data-path=${view.path || idx}
-                    >
-                      ${view.icon
-                        ? html`
-                            <ha-icon
-                              .icon=${view.icon}
-                              slot="item-icon"
-                            ></ha-icon>
-                          `
-                        : ""}
-                      ${view.title || view.path}
-                    </paper-icon-item>
-                  `
-                )}
-              </paper-listbox>
-            `}
+            ? html`
+                <p class="center-item">
+                  <mwc-button raised @click=${this._handleLaunch}>
+                    <ha-svg-icon .path=${mdiCast}></ha-svg-icon>
+                    Start Casting
+                  </mwc-button>
+                </p>
+              `
+            : html`
+                <div class="section-header">PICK A VIEW</div>
+                <paper-listbox
+                  attr-for-selected="data-path"
+                  .selected=${this.castManager.status.lovelacePath || ""}
+                >
+                  ${(
+                    this.lovelaceViews ?? [
+                      generateDefaultViewConfig({}, {}, {}, {}, () => ""),
+                    ]
+                  ).map(
+                    (view, idx) => html`
+                      <paper-icon-item
+                        @click=${this._handlePickView}
+                        data-path=${view.path || idx}
+                      >
+                        ${view.icon
+                          ? html`
+                              <ha-icon
+                                .icon=${view.icon}
+                                slot="item-icon"
+                              ></ha-icon>
+                            `
+                          : ""}
+                        ${view.title || view.path}
+                      </paper-icon-item>
+                    `
+                  )}
+                </paper-listbox>
+              `}
        <div class="card-actions">
          ${this.castManager.status
            ? html`
@@ -241,6 +241,8 @@ class HcCast extends LitElement {

      mwc-button ha-svg-icon {
        margin-right: 8px;
+        margin-inline-end: 8px;
+        margin-inline-start: initial;
        height: 18px;
      }

@@ -1,6 +1,5 @@
 import "@material/mwc-button";
 import { mdiCastConnected, mdiCast } from "@mdi/js";
-import "@polymer/paper-input/paper-input";
 import {
  Auth,
  Connection,
@@ -24,6 +23,7 @@ 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
@@ -33,13 +33,13 @@ const translateErr = (err) =>
  err === ERR_CANNOT_CONNECT
    ? "Unable to connect"
    : err === ERR_HASS_HOST_REQUIRED
-    ? "Please enter a Home Assistant URL."
-    : err === ERR_INVALID_HTTPS_TO_HTTP
-    ? html`
-        Cannot connect to Home Assistant instances over "http://".
-        ${seeFAQ("https")}
-      `
-    : `Unknown error (${err}).`;
+      ? "Please enter a Home Assistant URL."
+      : err === ERR_INVALID_HTTPS_TO_HTTP
+        ? html`
+            Cannot connect to Home Assistant instances over "http://".
+            ${seeFAQ("https")}
+          `
+        : `Unknown error (${err}).`;

 const INTRO = html`
  <p>
@@ -116,13 +116,11 @@ export class HcConnect extends LitElement {
              To get started, enter your Home Assistant URL and click authorize.
              If you want a preview instead, click the show demo button.
            </p>
-            <p>
-              <paper-input
-                label="Home Assistant URL"
-                placeholder="https://abcdefghijklmnop.ui.nabu.casa"
-                @keydown=${this._handleInputKeyDown}
-              ></paper-input>
-            </p>
+            <ha-textfield
+              label="Home Assistant URL"
+              placeholder="https://abcdefghijklmnop.ui.nabu.casa"
+              @keydown=${this._handleInputKeyDown}
+            ></ha-textfield>
            ${this.error ? html` <p class="error">${this.error}</p> ` : ""}
          </div>
          <div class="card-actions">
@@ -196,7 +194,7 @@ export class HcConnect extends LitElement {
  }

  private async _handleConnect() {
-    const inputEl = this.shadowRoot!.querySelector("paper-input")!;
+    const inputEl = this.shadowRoot!.querySelector("ha-textfield")!;
    const value = inputEl.value || "";
    this.error = undefined;

@@ -315,6 +313,10 @@ export class HcConnect extends LitElement {
      .spacer {
        flex: 1;
      }
+
+      ha-textfield {
+        width: 100%;
+      }
    `;
  }
 }
@@ -10,13 +10,13 @@ import "../../../../src/components/ha-card";

@customElement("hc-layout")
 class HcLayout extends LitElement {
-  @property() public subtitle?: string | undefined;
+  @property() public subtitle?: string;

-  @property() public auth?: Auth;
+  @property({ attribute: false }) public auth?: Auth;

-  @property() public connection?: Connection;
+  @property({ attribute: false }) public connection?: Connection;

-  @property() public user?: HassUser;
+  @property({ attribute: false }) public user?: HassUser;

  protected render(): TemplateResult {
    return html`
@@ -12,8 +12,8 @@ class HcLaunchScreen extends LitElement {
    return html`
      <div class="container">
        <img
-          alt="Home Assistant logo on left, Nabu Casa logo on right, and red heart in center"
-          src="https://www.home-assistant.io/images/blog/2018-09-thinking-big/social.png"
+          alt="Nabu Casa logo on left, Home Assistant logo on right, and red heart in center"
+          src="https://cast.home-assistant.io/images/nabu-loves-hass.png"
        />
        <div class="status">
          ${this.hass ? "Connected" : "Not Connected"}
@@ -28,7 +28,6 @@ class HcLaunchScreen extends LitElement {
      :host {
        display: block;
        height: 100vh;
-        padding-top: 64px;
        background-color: white;
        font-size: 24px;
      }
@@ -36,15 +35,13 @@ class HcLaunchScreen extends LitElement {
        display: flex;
        flex-direction: column;
        text-align: center;
+        align-items: center;
+        height: 100%;
+        justify-content: space-evenly;
      }
      img {
-        width: 717px;
-        height: 376px;
-        display: block;
-        margin: 0 auto;
-      }
-      .status {
-        padding-right: 54px;
+        max-width: 80%;
+        object-fit: cover;
      }
    `;
  }
@@ -17,7 +17,7 @@ class HcLovelace extends LitElement {
  @property({ attribute: false })
  public lovelaceConfig!: LovelaceConfig;

-  @property() public viewPath?: string | number;
+  @property() public viewPath?: string | number | null;

  @property() public urlPath: string | null = null;

@@ -93,6 +93,9 @@ class HcLovelace extends LitElement {
  }

  private get _viewIndex() {
+    if (this.viewPath === null) {
+      return 0;
+    }
    const selectedView = this.viewPath;
    const selectedViewInt = parseInt(selectedView as string, 10);
    for (let i = 0; i < this.lovelaceConfig.views.length; i++) {
@@ -51,10 +51,10 @@ export class HcMain extends HassElement {

  @state() private _lovelacePath: string | number | null = null;

-  @state() private _error?: string;
-
  @state() private _urlPath?: string | null;

+  @state() private _error?: string;
+
  private _hassUUID?: string;

  private _unsubLovelace?: UnsubscribeFunc;
@@ -81,7 +81,7 @@ export class HcMain extends HassElement {

    if (
      !this._lovelaceConfig ||
-      this._lovelacePath === null ||
+      this._urlPath === undefined ||
      // Guard against part of HA not being loaded yet.
      !this.hass ||
      !this.hass.states ||
@@ -99,8 +99,8 @@ export class HcMain extends HassElement {
      <hc-lovelace
        .hass=${this.hass}
        .lovelaceConfig=${this._lovelaceConfig}
-        .viewPath=${this._lovelacePath}
        .urlPath=${this._urlPath}
+        .viewPath=${this._lovelacePath}
        @config-refresh=${this._generateDefaultLovelaceConfig}
      ></hc-lovelace>
    `;
@@ -205,7 +205,6 @@ export class HcMain extends HassElement {
          expires_in: 0,
        }),
      });
-      this._hassUUID = msg.hassUUID;
    } catch (err: any) {
      const errorMessage = this._getErrorMessage(err);
      this._error = errorMessage;
@@ -225,6 +224,17 @@ export class HcMain extends HassElement {
      this.hass.connection.close();
    }
    this.initializeHass(auth, connection);
+    if (this._hassUUID !== msg.hassUUID) {
+      this._hassUUID = msg.hassUUID;
+      this._lovelaceConfig = undefined;
+      this._urlPath = undefined;
+      this._lovelacePath = null;
+      if (this._unsubLovelace) {
+        this._unsubLovelace();
+        this._unsubLovelace = undefined;
+      }
+      resourcesLoaded = false;
+    }
    this._error = undefined;
    this._sendStatus();
  }
@@ -233,7 +243,7 @@ export class HcMain extends HassElement {
    this._showDemo = false;
    // We should not get this command before we are connected.
    // Means a client got out of sync. Let's send status to them.
-    if (!this.hass) {
+    if (!this.hass?.connected) {
      this._sendStatus(msg.senderId!);
      this._error = "Cannot show Lovelace because we're not connected.";
      this._sendError(
@@ -260,7 +270,7 @@ export class HcMain extends HassElement {
    }

    this._error = undefined;
-    if (msg.urlPath === "lovelace") {
+    if (msg.urlPath === "lovelace" || msg.urlPath === undefined) {
      msg.urlPath = null;
    }
    this._lovelacePath = msg.viewPath;
@@ -275,7 +285,7 @@ export class HcMain extends HassElement {
        ],
      };
      this._urlPath = "energy";
-      this._lovelacePath = 0;
+      this._lovelacePath = null;
      this._sendStatus();
      return;
    }
@@ -284,6 +294,7 @@ export class HcMain extends HassElement {
      this._lovelaceConfig = undefined;
      if (this._unsubLovelace) {
        this._unsubLovelace();
+        this._unsubLovelace = undefined;
      }
      const llColl = atLeastVersion(this.hass.connection.haVersion, 0, 107)
        ? getLovelaceCollection(this.hass.connection, msg.urlPath)
@@ -39,7 +39,9 @@ export class HADemoCard extends LitElement implements LovelaceCard {
        <div class="picker">
          <div class="label">
            ${this._switching
-              ? html`<ha-circular-progress active></ha-circular-progress>`
+              ? html`<ha-circular-progress
+                  indeterminate
+                ></ha-circular-progress>`
              : until(
                  selectedDemoConfig.then(
                    (conf) => html`
@@ -48,8 +50,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
                        <a target="_blank" href=${conf.authorUrl}>
                          ${this.hass.localize(
                            "ui.panel.page-demo.cards.demo.demo_by",
-                            "name",
-                            conf.authorName
+                            { name: conf.authorName }
                          )}
                        </a>
                      </small>
@@ -17,12 +17,14 @@ import { energyEntities } from "./stubs/entities";
 import { mockEntityRegistry } from "./stubs/entity_registry";
 import { mockEvents } from "./stubs/events";
 import { mockFrontend } from "./stubs/frontend";
+import { mockIcons } from "./stubs/icons";
 import { mockHistory } from "./stubs/history";
 import { mockLovelace } from "./stubs/lovelace";
 import { mockMediaPlayer } from "./stubs/media_player";
 import { mockPersistentNotification } from "./stubs/persistent_notification";
 import { mockRecorder } from "./stubs/recorder";
 import { mockTodo } from "./stubs/todo";
+import { mockSensor } from "./stubs/sensor";
 import { mockSystemLog } from "./stubs/system_log";
 import { mockTemplate } from "./stubs/template";
 import { mockTranslations } from "./stubs/translations";
@@ -50,11 +52,13 @@ export class HaDemo extends HomeAssistantAppEl {
    mockHistory(hass);
    mockRecorder(hass);
    mockTodo(hass);
+    mockSensor(hass);
    mockSystemLog(hass);
    mockTemplate(hass);
    mockEvents(hass);
    mockMediaPlayer(hass);
    mockFrontend(hass);
+    mockIcons(hass);
    mockEnergy(hass);
    mockPersistentNotification(hass);
    mockConfigEntries(hass);
@@ -0,0 +1,33 @@
+import { IconCategory } from "../../../src/data/icons";
+import { ENTITY_COMPONENT_ICONS } from "../../../src/fake_data/entity_component_icons";
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockIcons = (hass: MockHomeAssistant) => {
+  hass.mockWS(
+    "frontend/get_icons",
+    async ({
+      category,
+      integration,
+    }: {
+      category: IconCategory;
+      integration?: string;
+    }) => {
+      if (integration) {
+        try {
+          const response = await fetch(
+            `https://raw.githubusercontent.com/home-assistant/core/dev/homeassistant/components/${integration}/icons.json`
+          ).then((resp) => resp.json());
+          return { resources: { [integration]: response[category] || {} } };
+        } catch {
+          return { resources: {} };
+        }
+      }
+      if (category === "entity_component") {
+        return {
+          resources: ENTITY_COMPONENT_ICONS,
+        };
+      }
+      return { resources: {} };
+    }
+  );
+};
@@ -43,8 +43,8 @@ const generateMeanStatistics = (
      period === "day"
        ? addDays(currentDate, 1)
        : period === "month"
-        ? addMonths(currentDate, 1)
-        : addHours(currentDate, 1);
+          ? addMonths(currentDate, 1)
+          : addHours(currentDate, 1);
  }
  return statistics;
 };
@@ -80,8 +80,8 @@ const generateSumStatistics = (
      period === "day"
        ? addDays(currentDate, 1)
        : period === "month"
-        ? addMonths(currentDate, 1)
-        : addHours(currentDate, 1);
+          ? addMonths(currentDate, 1)
+          : addHours(currentDate, 1);
  }
  return statistics;
 };
@@ -0,0 +1,58 @@
+import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockSensor = (hass: MockHomeAssistant) => {
+  hass.mockWS("sensor/numeric_device_classes", () => [
+    {
+      numeric_device_classes: [
+        "volume_storage",
+        "gas",
+        "data_size",
+        "irradiance",
+        "wind_speed",
+        "volatile_organic_compounds",
+        "volatile_organic_compounds_parts",
+        "voltage",
+        "frequency",
+        "precipitation_intensity",
+        "volume",
+        "precipitation",
+        "battery",
+        "nitrogen_dioxide",
+        "speed",
+        "signal_strength",
+        "pm1",
+        "nitrous_oxide",
+        "atmospheric_pressure",
+        "data_rate",
+        "temperature",
+        "power_factor",
+        "aqi",
+        "current",
+        "volume_flow_rate",
+        "humidity",
+        "duration",
+        "ozone",
+        "distance",
+        "pressure",
+        "pm25",
+        "weight",
+        "energy",
+        "carbon_monoxide",
+        "apparent_power",
+        "illuminance",
+        "energy_storage",
+        "moisture",
+        "power",
+        "water",
+        "carbon_dioxide",
+        "ph",
+        "reactive_power",
+        "monetary",
+        "nitrogen_monoxide",
+        "pm10",
+        "sound_pressure",
+        "sulphur_dioxide",
+      ],
+    },
+  ]);
+};
@@ -21,4 +21,5 @@ export const mockTodo = (hass: MockHomeAssistant) => {
      },
    ] as TodoItem[],
  }));
+  hass.mockWS("todo/item/subscribe", (_msg, _hass) => () => {});
 };
@@ -1,5 +1,5 @@
 import { Button } from "@material/mwc-button";
-import { html, LitElement, css, TemplateResult } from "lit";
+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";
@@ -9,9 +9,9 @@ import "../../../src/components/ha-card";
 class DemoBlackWhiteRow extends LitElement {
  @property() title!: string;

-  @property() value!: any;
+  @property() value?: any;

-  @property() disabled = false;
+  @property({ type: Boolean }) public disabled = false;

  protected render(): TemplateResult {
    return html`
@@ -45,7 +45,9 @@ class DemoBlackWhiteRow extends LitElement {
              </mwc-button>
            </div>
          </ha-card>
-          <pre>${JSON.stringify(this.value, undefined, 2)}</pre>
+          ${this.value
+            ? html`<pre>${JSON.stringify(this.value, undefined, 2)}</pre>`
+            : nothing}
        </div>
      </div>
    `;
@@ -11,11 +11,11 @@ export interface DemoCardConfig {

@customElement("demo-card")
 class DemoCard extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;

-  @property() public config!: DemoCardConfig;
+  @property({ attribute: false }) public config!: DemoCardConfig;

-  @property() public showConfig = false;
+  @property({ type: Boolean }) public showConfig = false;

  @state() private _size?: number;

@@ -10,9 +10,9 @@ import "../ha-demo-options";

@customElement("demo-cards")
 class DemoCards extends LitElement {
-  @property() public configs!: DemoCardConfig[];
+  @property({ attribute: false }) public configs!: DemoCardConfig[];

-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;

  @state() private _showConfig = false;

@@ -8,11 +8,11 @@ import { HomeAssistant } from "../../../src/types";

@customElement("demo-more-info")
 class DemoMoreInfo extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;

  @property() public entityId!: string;

-  @property() public showConfig!: boolean;
+  @property({ type: Boolean }) public showConfig = false;

  render() {
    const state = this._getState(this.entityId, this.hass.states);
@@ -23,7 +23,7 @@ class DemoMoreInfo extends LitElement {
            <state-card-content
              .stateObj=${state}
              .hass=${this.hass}
-              in-dialog
+              inDialog
            ></state-card-content>

            <more-info-content
@@ -1,19 +1,19 @@
 import { LitElement, css, html } from "lit";
-import { customElement, property } from "lit/decorators";
+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 "./demo-more-info";
-import "../ha-demo-options";
 import { HomeAssistant } from "../../../src/types";
+import "../ha-demo-options";
+import "./demo-more-info";

@customElement("demo-more-infos")
 class DemoMoreInfos extends LitElement {
-  @property() public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass!: HomeAssistant;

-  @property() public entities!: [];
+  @property({ type: Array }) public entities!: string[];

-  @property({ attribute: false }) _showConfig: boolean = false;
+  @state() private _showConfig = false;

  render() {
    return html`
@@ -509,7 +509,7 @@ export default {
      away_mode: "on",
      aux_heat: "off",
      unit_of_measurement: "°C",
-      friendly_name: "Hvac",
+      friendly_name: "HVAC",
      supported_features: 3833,
    },
    last_changed: "2018-07-19T10:44:46.200650+00:00",
@@ -17,6 +17,7 @@ export const basicTrace: DemoTrace = {
        {
          path: "trigger/0",
          timestamp: "2021-03-25T04:36:51.223693+00:00",
+          changed_variables: {},
        },
      ],
      "condition/0": [
@@ -17,6 +17,7 @@ export const motionLightTrace: DemoTrace = {
        {
          path: "trigger/0",
          timestamp: "2021-03-25T04:36:51.223693+00:00",
+          changed_variables: {},
        },
      ],
      "action/0": [
@@ -1,14 +1,14 @@
-import { mdiMenu } from "@mdi/js";
 import "@material/mwc-drawer";
 import "@material/mwc-top-app-bar-fixed";
-import { html, css, LitElement, PropertyValues } from "lit";
-import { customElement, property, query } from "lit/decorators";
+import { mdiMenu } from "@mdi/js";
+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";
 import "../../src/components/ha-icon-button";
 import "../../src/managers/notification-manager";
-import { HaExpansionPanel } from "../../src/components/ha-expansion-panel";
 import { haStyle } from "../../src/resources/styles";
 import { PAGES, SIDEBAR } from "../build/import-pages";
-import { dynamicElement } from "../../src/common/dom/dynamic-element-directive";
 import "./components/page-description";

 const GITHUB_DEMO_URL =
@@ -24,7 +24,7 @@ const FAKE_HASS = {

@customElement("ha-gallery")
 class HaGallery extends LitElement {
-  @property() private _page =
+  @state() private _page =
    document.location.hash.substring(1) ||
    `${SIDEBAR[0].category}/${SIDEBAR[0].pages![0]}`;

@@ -80,7 +80,7 @@ const SCHEMAS: { name: string; conditions: ConditionWithShorthand[] }[] = [
 ];

@customElement("demo-automation-editor-condition")
-class DemoHaAutomationEditorCondition extends LitElement {
+export class DemoAutomationEditorCondition extends LitElement {
  @state() private hass!: HomeAssistant;

  @state() private _disabled = false;
@@ -155,6 +155,6 @@ class DemoHaAutomationEditorCondition extends LitElement {

 declare global {
  interface HTMLElementTagNameMap {
-    "demo-ha-automation-editor-condition": DemoHaAutomationEditorCondition;
+    "demo-automation-editor-condition": DemoAutomationEditorCondition;
  }
 }
@@ -126,7 +126,7 @@ const SCHEMAS: { name: string; triggers: Trigger[] }[] = [
 ];

@customElement("demo-automation-editor-trigger")
-class DemoHaAutomationEditorTrigger extends LitElement {
+export class DemoAutomationEditorTrigger extends LitElement {
  @state() private hass!: HomeAssistant;

  @state() private _disabled = false;
@@ -201,6 +201,6 @@ class DemoHaAutomationEditorTrigger extends LitElement {

 declare global {
  interface HTMLElementTagNameMap {
-    "demo-ha-automation-editor-trigger": DemoHaAutomationEditorTrigger;
+    "demo-automation-editor-trigger": DemoAutomationEditorTrigger;
  }
 }
@@ -3,7 +3,6 @@
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property } 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 { HomeAssistant } from "../../../../src/types";
@@ -56,6 +55,7 @@ export class DemoAutomationTraceTimeline extends LitElement {
    super.firstUpdated(changedProps);
    const hass = provideHass(this);
    hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
  }

  static get styles() {
@@ -60,6 +60,7 @@ export class DemoAutomationTrace extends LitElement {
    super.firstUpdated(changedProps);
    const hass = provideHass(this);
    hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
  }

  static get styles() {
@@ -0,0 +1,4 @@
+---
+title: Circular Progress
+subtitle: Can be used to indicate an ongoing task.
+---
@@ -0,0 +1,64 @@
+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 { HomeAssistant } from "../../../../src/types";
+
+@customElement("demo-components-ha-circular-progress")
+export class DemoHaCircularProgress extends LitElement {
+  @property({ attribute: false }) hass!: HomeAssistant;
+
+  protected render(): TemplateResult {
+    return html`<ha-card header="Basic circular progress">
+        <div class="card-content">
+          <ha-circular-progress indeterminate></ha-circular-progress></div
+      ></ha-card>
+      <ha-card header="Different circular progress sizes">
+        <div class="card-content">
+          <ha-circular-progress
+            indeterminate
+            size="tiny"
+          ></ha-circular-progress>
+          <ha-circular-progress
+            indeterminate
+            size="small"
+          ></ha-circular-progress>
+          <ha-circular-progress
+            indeterminate
+            size="medium"
+          ></ha-circular-progress>
+          <ha-circular-progress
+            indeterminate
+            size="large"
+          ></ha-circular-progress></div
+      ></ha-card>
+      <ha-card header="Circular progress with an aria-label">
+        <div class="card-content">
+          <ha-circular-progress
+            indeterminate
+            aria-label="Doing something..."
+          ></ha-circular-progress>
+          <ha-circular-progress
+            indeterminate
+            .ariaLabel=${"Doing something..."}
+          ></ha-circular-progress></div
+      ></ha-card>`;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-components-ha-circular-progress": DemoHaCircularProgress;
+  }
+}
@@ -59,7 +59,7 @@ export class DemoHaBarButton extends LitElement {
              <ha-control-button
                class=${ifDefined(btn.class)}
                label=${ifDefined(btn.label)}
-                disabled=${ifDefined(btn.disabled)}
+                ?disabled=${btn.disabled}
              >
                <ha-svg-icon .path=${btn.icon || mdiLightbulb}></ha-svg-icon>
              </ha-control-button>
@@ -135,7 +135,7 @@ export class DemoHaControlSelect extends LitElement {
                class=${ifDefined(config.class)}
                @value-changed=${this.handleValueChanged}
                aria-labelledby=${id}
-                disabled=${ifDefined(config.disabled)}
+                ?disabled=${config.disabled}
              >
              </ha-control-select>
            </div>
@@ -156,7 +156,7 @@ export class DemoHaControlSelect extends LitElement {
                  class=${ifDefined(config.class)}
                  @value-changed=${this.handleValueChanged}
                  aria-labelledby=${id}
-                  disabled=${ifDefined(config.disabled)}
+                  ?disabled=${config.disabled}
                >
                </ha-control-select>
              `;
@@ -63,8 +63,8 @@ export class DemoHaControlSwitch extends LitElement {
                .pathOn=${mdiLightbulb}
                .pathOff=${mdiLightbulbOff}
                aria-labelledby=${id}
-                disabled=${ifDefined(config.disabled)}
-                reversed=${ifDefined(config.reversed)}
+                ?disabled=${config.disabled}
+                ?reversed=${config.reversed}
              >
              </ha-control-switch>
            </div>
@@ -86,8 +86,8 @@ export class DemoHaControlSwitch extends LitElement {
                  aria-label=${label}
                  .pathOn=${mdiGarageOpen}
                  .pathOff=${mdiGarage}
-                  disabled=${ifDefined(config.disabled)}
-                  reversed=${ifDefined(config.reversed)}
+                  ?disabled=${config.disabled}
+                  ?reversed=${config.reversed}
                >
                </ha-control-switch>
              `;
@@ -3,6 +3,7 @@ import { css, html, LitElement, TemplateResult } 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 { LONG_TEXT } from "../../data/text";
@@ -10,6 +10,7 @@ import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervis
 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 { HomeAssistant } from "../../../../src/types";
@@ -97,22 +98,25 @@ const DEVICES = [
  },
 ];

-const AREAS = [
+const AREAS: AreaRegistryEntry[] = [
  {
    area_id: "backyard",
    name: "Backyard",
+    icon: null,
    picture: null,
    aliases: [],
  },
  {
    area_id: "bedroom",
    name: "Bedroom",
+    icon: "mdi:bed",
    picture: null,
    aliases: [],
  },
  {
    area_id: "livingroom",
    name: "Livingroom",
+    icon: "mdi:sofa",
    picture: null,
    aliases: [],
  },
@@ -9,6 +9,7 @@ import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
 import "../../../../src/components/ha-selector/ha-selector";
 import "../../../../src/components/ha-settings-row";
+import type { AreaRegistryEntry } from "../../../../src/data/area_registry";
 import { BlueprintInput } from "../../../../src/data/blueprint";
 import { showDialog } from "../../../../src/dialogs/make-dialog-manager";
 import { getEntity } from "../../../../src/fake_data/entity";
@@ -93,22 +94,25 @@ const DEVICES = [
  },
 ];

-const AREAS = [
+const AREAS: AreaRegistryEntry[] = [
  {
    area_id: "backyard",
    name: "Backyard",
+    icon: null,
    picture: null,
    aliases: [],
  },
  {
    area_id: "bedroom",
    name: "Bedroom",
+    icon: "mdi:bed",
    picture: null,
    aliases: [],
  },
  {
    area_id: "livingroom",
    name: "Livingroom",
+    icon: "mdi:sofa",
    picture: null,
    aliases: [],
  },
@@ -271,6 +275,14 @@ const SCHEMAS: {
        selector: { color_temp: {} },
      },
      color_rgb: { name: "Color", selector: { color_rgb: {} } },
+      qr_code: {
+        name: "QR Code",
+        selector: { qr_code: { data: "https://home-assistant.io" } },
+      },
+      constant: {
+        name: "Constant",
+        selector: { constant: { value: true, label: "Yes!" } },
+      },
    },
  },
  {
@@ -497,7 +509,7 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
          this.requestUpdate();
        };
        return html`
-          <demo-black-white-row .title=${info.name} .value=${this.data[idx]}>
+          <demo-black-white-row .title=${info.name}>
            ${["light", "dark"].map((slot) =>
              Object.entries(info.input).map(
                ([key, value]) => html`
@@ -530,8 +542,8 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
  }

  static styles = css`
-    ha-selector {
-      width: 60;
+    ha-settings-row {
+      --paper-item-body-two-line-min-height: 0;
    }
    .options {
      max-width: 800px;
@@ -18,7 +18,7 @@ The Home Assistant interface is based on Material Design. It's a design system c

 We want to make it as easy for designers to contribute as it is for developers. There’s a lot a designer can contribute to:

- Meet us at <a href="https://discord.gg/BPBc8rZ9" rel="noopener noreferrer" target="_blank">devs_ux Discord</a>. Feel free to share your designs, user test or strategic ideas.
+- Meet us at <a href="https://www.home-assistant.io/join-chat" rel="noopener noreferrer" target="_blank">devs_ux Discord</a>. Feel free to share your designs, user test or strategic ideas.
 - Start designing with our <a href="https://www.figma.com/community/file/967153512097289521/Home-Assistant-DesignKit" rel="noopener noreferrer" target="_blank">Figma DesignKit</a>.
 - Find the latest UX <a href="https://github.com/home-assistant/frontend/discussions?discussions_q=label%3Aux" rel="noopener noreferrer" target="_blank">discussions</a> and <a href="https://github.com/home-assistant/frontend/labels/ux" rel="noopener noreferrer" target="_blank">issues</a> on GitHub. Everyone can start a new issue or discussion!

@@ -1,19 +1,20 @@
-import { html, css, LitElement } from "lit";
+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 { translationMetadata } from "../../../../src/resources/translations-metadata";
-import { formatDateTimeNumeric } from "../../../../src/common/datetime/format_date_time";
-import { timeOptions } from "../../data/date-options";
-import { demoConfig } from "../../../../src/fake_data/demo_config";
 import {
+  DateFormat,
+  FirstWeekday,
  FrontendLocaleData,
  NumberFormat,
  TimeFormat,
-  DateFormat,
-  FirstWeekday,
  TimeZone,
 } from "../../../../src/data/translation";
+import { demoConfig } from "../../../../src/fake_data/demo_config";
+import { translationMetadata } from "../../../../src/resources/translations-metadata";
+import { timeOptions } from "../../data/date-options";

@customElement("demo-date-time-date-time-numeric")
 export class DemoDateTimeDateTimeNumeric extends LitElement {
@@ -1,19 +1,20 @@
-import { html, css, LitElement } from "lit";
+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 { translationMetadata } from "../../../../src/resources/translations-metadata";
-import { formatDateTimeWithSeconds } from "../../../../src/common/datetime/format_date_time";
-import { timeOptions } from "../../data/date-options";
-import { demoConfig } from "../../../../src/fake_data/demo_config";
 import {
+  DateFormat,
+  FirstWeekday,
  FrontendLocaleData,
  NumberFormat,
  TimeFormat,
-  DateFormat,
-  FirstWeekday,
  TimeZone,
 } from "../../../../src/data/translation";
+import { demoConfig } from "../../../../src/fake_data/demo_config";
+import { translationMetadata } from "../../../../src/resources/translations-metadata";
+import { timeOptions } from "../../data/date-options";

@customElement("demo-date-time-date-time-seconds")
 export class DemoDateTimeDateTimeSeconds extends LitElement {
@@ -1,19 +1,20 @@
-import { html, css, LitElement } from "lit";
+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 { translationMetadata } from "../../../../src/resources/translations-metadata";
-import { formatShortDateTimeWithYear } from "../../../../src/common/datetime/format_date_time";
-import { timeOptions } from "../../data/date-options";
-import { demoConfig } from "../../../../src/fake_data/demo_config";
 import {
+  DateFormat,
+  FirstWeekday,
  FrontendLocaleData,
  NumberFormat,
  TimeFormat,
-  DateFormat,
-  FirstWeekday,
  TimeZone,
 } from "../../../../src/data/translation";
+import { demoConfig } from "../../../../src/fake_data/demo_config";
+import { translationMetadata } from "../../../../src/resources/translations-metadata";
+import { timeOptions } from "../../data/date-options";

@customElement("demo-date-time-date-time-short-year")
 export class DemoDateTimeDateTimeShortYear extends LitElement {
@@ -1,19 +1,20 @@
-import { html, css, LitElement } from "lit";
+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 { translationMetadata } from "../../../../src/resources/translations-metadata";
-import { formatShortDateTime } from "../../../../src/common/datetime/format_date_time";
-import { timeOptions } from "../../data/date-options";
-import { demoConfig } from "../../../../src/fake_data/demo_config";
 import {
+  DateFormat,
+  FirstWeekday,
  FrontendLocaleData,
  NumberFormat,
  TimeFormat,
-  DateFormat,
-  FirstWeekday,
  TimeZone,
 } from "../../../../src/data/translation";
+import { demoConfig } from "../../../../src/fake_data/demo_config";
+import { translationMetadata } from "../../../../src/resources/translations-metadata";
+import { timeOptions } from "../../data/date-options";

@customElement("demo-date-time-date-time-short")
 export class DemoDateTimeDateTimeShort extends LitElement {
@@ -1,19 +1,20 @@
-import { html, css, LitElement } from "lit";
+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 { translationMetadata } from "../../../../src/resources/translations-metadata";
-import { formatDateTime } from "../../../../src/common/datetime/format_date_time";
-import { timeOptions } from "../../data/date-options";
-import { demoConfig } from "../../../../src/fake_data/demo_config";
 import {
+  DateFormat,
+  FirstWeekday,
  FrontendLocaleData,
  NumberFormat,
  TimeFormat,
-  DateFormat,
-  FirstWeekday,
  TimeZone,
 } from "../../../../src/data/translation";
+import { demoConfig } from "../../../../src/fake_data/demo_config";
+import { translationMetadata } from "../../../../src/resources/translations-metadata";
+import { timeOptions } from "../../data/date-options";

@customElement("demo-date-time-date-time")
 export class DemoDateTimeDateTime extends LitElement {
@@ -1,18 +1,20 @@
-import { html, css, LitElement } from "lit";
+import "@material/mwc-list/mwc-list";
+import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
-import "../../../../src/components/ha-card";
-import { translationMetadata } from "../../../../src/resources/translations-metadata";
 import { formatTimeWithSeconds } from "../../../../src/common/datetime/format_time";
-import { timeOptions } from "../../data/date-options";
-import { demoConfig } from "../../../../src/fake_data/demo_config";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-control-select";
 import {
+  DateFormat,
+  FirstWeekday,
  FrontendLocaleData,
  NumberFormat,
  TimeFormat,
-  DateFormat,
-  FirstWeekday,
  TimeZone,
 } from "../../../../src/data/translation";
+import { demoConfig } from "../../../../src/fake_data/demo_config";
+import { translationMetadata } from "../../../../src/resources/translations-metadata";
+import { timeOptions } from "../../data/date-options";

@customElement("demo-date-time-time-seconds")
 export class DemoDateTimeTimeSeconds extends LitElement {
@@ -1,18 +1,20 @@
-import { html, css, LitElement } from "lit";
+import "@material/mwc-list/mwc-list";
+import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
-import "../../../../src/components/ha-card";
-import { translationMetadata } from "../../../../src/resources/translations-metadata";
 import { formatTimeWeekday } from "../../../../src/common/datetime/format_time";
-import { timeOptions } from "../../data/date-options";
-import { demoConfig } from "../../../../src/fake_data/demo_config";
+import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-control-select";
 import {
+  DateFormat,
+  FirstWeekday,
  FrontendLocaleData,
  NumberFormat,
  TimeFormat,
-  DateFormat,
-  FirstWeekday,
  TimeZone,
 } from "../../../../src/data/translation";
+import { demoConfig } from "../../../../src/fake_data/demo_config";
+import { translationMetadata } from "../../../../src/resources/translations-metadata";
+import { timeOptions } from "../../data/date-options";

@customElement("demo-date-time-time-weekday")
 export class DemoDateTimeTimeWeekday extends LitElement {
@@ -1,19 +1,20 @@
-import { html, css, LitElement } from "lit";
+import "@material/mwc-list/mwc-list";
+import { LitElement, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
+import { formatTime } from "../../../../src/common/datetime/format_time";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-control-select";
-import { translationMetadata } from "../../../../src/resources/translations-metadata";
-import { formatTime } from "../../../../src/common/datetime/format_time";
-import { timeOptions } from "../../data/date-options";
-import { demoConfig } from "../../../../src/fake_data/demo_config";
 import {
+  DateFormat,
+  FirstWeekday,
  FrontendLocaleData,
  NumberFormat,
  TimeFormat,
-  DateFormat,
-  FirstWeekday,
  TimeZone,
 } from "../../../../src/data/translation";
+import { demoConfig } from "../../../../src/fake_data/demo_config";
+import { translationMetadata } from "../../../../src/resources/translations-metadata";
+import { timeOptions } from "../../data/date-options";

@customElement("demo-date-time-time")
 export class DemoDateTimeTime extends LitElement {
@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("alarm_control_panel", "alarm", "disarmed", {
@@ -84,6 +85,7 @@ class DemoAlarmPanelEntity extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);
  }
 }

@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("light", "bed_light", "on", {
@@ -146,6 +147,7 @@ class DemoArea extends LitElement {
        entity_id: "binary_sensor.kitchen_door",
      },
    ]);
+    mockIcons(hass);
  }
 }

@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("light", "controller_1", "on", {
@@ -66,6 +67,7 @@ class DemoConditional extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);
  }
 }

@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("light", "bed_light", "on", {
@@ -323,6 +324,7 @@ class DemoEntities extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);
  }
 }

@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("light", "bed_light", "on", {
@@ -82,6 +83,7 @@ class DemoButtonEntity extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);
  }
 }

@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("device_tracker", "demo_paulus", "work", {
@@ -123,6 +124,7 @@ class DemoEntityFilter extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);
  }
 }

@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("sensor", "brightness", "12", {}),
@@ -128,6 +129,7 @@ class DemoGaugeEntity extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);
  }
 }

@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("device_tracker", "demo_paulus", "home", {
@@ -238,6 +239,7 @@ class DemoGlanceEntity extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);
  }
 }

@@ -4,6 +4,7 @@ import { mockHistory } from "../../../../demo/src/stubs/history";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("light", "kitchen_lights", "on", {
@@ -214,6 +215,7 @@ class DemoStack extends LitElement {
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
    mockHistory(hass);
+    mockIcons(hass);
  }
 }

@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("light", "bed_light", "on", {
@@ -76,6 +77,7 @@ class DemoLightEntity extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);
  }
 }

@@ -65,15 +65,23 @@ const CONFIGS = [
    >> ...by using additional greater-than signs right next to each other...
    > > > ...or with spaces between arrows.

-    > **Warning** Hey there
-    > This is a warning with a title
+    > [!NOTE]
+    > This is a GitHub note alert

-    > **Note**
-    > This is a note
+    > [!TIP]
+    > This is a GitHub tip alert

-    > **Note**
-    > This is a multiline note
-    > Lorem ipsum...
+    > [!IMPORTANT]
+    > This is a GitHub important alert
+
+    > [!WARNING]
+    > This is a GitHub warning alert
+
+    > [!CAUTION]
+    > This is a GitHub caution alert
+
+    > [!TIP]
+    > - This is a list entry in GitHub tip alert

    ## Lists

@@ -55,7 +55,7 @@ const CONFIGS = [
 ];

@customElement("demo-lovelace-media-player-row")
-class DemoHuiMediaPlayerRow extends LitElement {
+export class DemoLovelaceMediaPlayerRow extends LitElement {
  @query("#demos") private _demoRoot!: HTMLElement;

  protected render(): TemplateResult {
@@ -73,6 +73,6 @@ class DemoHuiMediaPlayerRow extends LitElement {

 declare global {
  interface HTMLElementTagNameMap {
-    "demo-lovelace-media-player-rows": DemoHuiMediaPlayerRow;
+    "demo-lovelace-media-player-row": DemoLovelaceMediaPlayerRow;
  }
 }
@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("light", "bed_light", "on", {
@@ -138,6 +139,7 @@ class DemoPictureElements extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);
  }
 }

@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("light", "kitchen_lights", "on", {
@@ -93,6 +94,7 @@ class DemoPictureEntity extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);
  }
 }

@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("switch", "decorative_lights", "on", {
@@ -134,6 +135,7 @@ class DemoPictureGlance extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);
  }
 }

@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { createPlantEntities } from "../../data/plants";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const CONFIGS = [
  {
@@ -43,6 +44,7 @@ export class DemoPlantEntity extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(createPlantEntities());
+    mockIcons(hass);
  }
 }

@@ -3,6 +3,7 @@ import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("climate", "ecobee", "auto", {
@@ -35,6 +36,18 @@ const ENTITIES = [
    friendly_name: "Nest",
    supported_features: 43,
  }),
+  getEntity("climate", "sensibo", "fan_only", {
+    current_temperature: null,
+    temperature: null,
+    min_temp: 0,
+    max_temp: 1,
+    target_temp_step: 1,
+    hvac_modes: ["fan_only", "off"],
+    friendly_name: "Sensibo purifier",
+    fan_modes: ["low", "high"],
+    fan_mode: "low",
+    supported_features: 9,
+  }),
  getEntity("climate", "unavailable", "unavailable", {
    supported_features: 43,
  }),
@@ -57,6 +70,23 @@ const CONFIGS = [
  entity: climate.nest
    `,
  },
+  {
+    heading: "Fan only example",
+    config: `
+- type: thermostat
+  entity: climate.sensibo
+  features:
+    - type: climate-hvac-modes
+      hvac_modes:
+        - fan_only
+        - 'off'
+    - type: climate-fan-modes
+      style: icons
+      fan_modes:
+        - low
+        - high
+    `,
+  },
  {
    heading: "Unavailable",
    config: `
@@ -87,6 +117,7 @@ class DemoThermostatEntity extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);
  }
 }

@@ -6,6 +6,7 @@ import { VacuumEntityFeature } from "../../../../src/data/vacuum";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("switch", "tv_outlet", "on", {
@@ -79,6 +80,18 @@ const CONFIGS = [
  color: pink
    `,
  },
+  {
+    heading: "Whole tile tap action",
+    config: `
+- type: tile
+  entity: switch.tv_outlet
+  color: pink
+  tap_action:
+    action: toggle
+  icon_tap_action:
+    action: none
+    `,
+  },
  {
    heading: "Unknown entity",
    config: `
@@ -172,6 +185,7 @@ class DemoTile extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);
  }
 }

@@ -4,6 +4,7 @@ import { provideHass } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-cards";
 import { getEntity } from "../../../../src/fake_data/entity";
 import { mockTodo } from "../../../../demo/src/stubs/todo";
+import { mockIcons } from "../../../../demo/src/stubs/icons";

 const ENTITIES = [
  getEntity("todo", "shopping_list", "2", {
@@ -47,6 +48,7 @@ class DemoTodoListEntity extends LitElement {
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
+    mockIcons(hass);

    mockTodo(hass);
  }
@@ -11,6 +11,7 @@ import "../../../../src/components/data-table/ha-data-table";
 import type { DataTableColumnContainer } from "../../../../src/components/data-table/ha-data-table";
 import "../../../../src/components/entity/state-badge";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
+import { mockIcons } from "../../../../demo/src/stubs/icons";
 import { HomeAssistant } from "../../../../src/types";

 const SENSOR_DEVICE_CLASSES = [
@@ -53,6 +54,7 @@ const SENSOR_DEVICE_CLASSES = [
  "volatile_organic_compounds_parts",
  "voltage",
  "volume",
+  "volume_flow_rate",
  "water",
  "weight",
  "wind_speed",
@@ -290,6 +292,7 @@ const ENTITIES: HassEntity[] = [
  createEntity("water_heater.high_demand", "high_demand"),
  createEntity("water_heater.heat_pump", "heat_pump"),
  createEntity("water_heater.gas", "gas"),
+  createEntity("select.speed", "ridiculous_speed"),
 ];

 function createEntity(
@@ -344,6 +347,7 @@ export class DemoEntityState extends LitElement {
          title: "Icon",
          template: (entry) => html`
            <state-badge
+              .hass=${hass}
              .stateObj=${entry.stateObj}
              .stateColor=${true}
            ></state-badge>
@@ -395,6 +399,16 @@ export class DemoEntityState extends LitElement {
  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    const hass = provideHass(this);
+    mockIcons(hass);
+    hass.updateHass({
+      entities: {
+        "select.speed": {
+          entity_id: "select.speed",
+          translation_key: "speed",
+          platform: "demo",
+        },
+      },
+    });
    hass.updateTranslations(null, "en");
    hass.updateTranslations("config", "en");
  }
@@ -59,3 +59,9 @@ export class DemoUtilLongPress extends LitElement {
    }
  `;
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-misc-util-long-press": DemoUtilLongPress;
+  }
+}
@@ -31,6 +31,21 @@ const ENTITIES = [
    max_temp: 30,
    supported_features: ClimateEntityFeature.TARGET_TEMPERATURE,
  }),
+  getEntity("climate", "fan", "fan_only", {
+    friendly_name: "Basic fan",
+    hvac_modes: ["fan_only", "off"],
+    hvac_mode: "fan_only",
+    fan_modes: ["low", "high"],
+    fan_mode: "low",
+    current_temperature: null,
+    temperature: null,
+    min_temp: 0,
+    max_temp: 1,
+    target_temp_step: 1,
+    supported_features:
+      // eslint-disable-next-line no-bitwise
+      ClimateEntityFeature.TARGET_TEMPERATURE | ClimateEntityFeature.FAN_MODE,
+  }),
  getEntity("climate", "hvac", "auto", {
    friendly_name: "Basic hvac",
    hvac_modes: ["auto", "off"],
@@ -77,7 +92,7 @@ const ENTITIES = [

@customElement("demo-more-info-climate")
 class DemoMoreInfoClimate extends LitElement {
-  @property() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) public hass!: MockHomeAssistant;

  @query("demo-more-infos") private _demoRoot!: HTMLElement;

@@ -141,7 +141,7 @@ const ENTITIES = [

@customElement("demo-more-info-cover")
 class DemoMoreInfoCover extends LitElement {
-  @property() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) public hass!: MockHomeAssistant;

  @query("demo-more-infos") private _demoRoot!: HTMLElement;

@@ -29,7 +29,7 @@ const ENTITIES = [

@customElement("demo-more-info-humidifier")
 class DemoMoreInfoHumidifier extends LitElement {
-  @property() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) public hass!: MockHomeAssistant;

  @query("demo-more-infos") private _demoRoot!: HTMLElement;

@@ -32,7 +32,7 @@ const ENTITIES = [

@customElement("demo-more-info-input-number")
 class DemoMoreInfoInputNumber extends LitElement {
-  @property() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) public hass!: MockHomeAssistant;

  @query("demo-more-infos") private _demoRoot!: HTMLElement;

@@ -0,0 +1,3 @@
+---
+title: Input Text
+---
@@ -0,0 +1,46 @@
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import "../../../../src/components/ha-card";
+import "../../../../src/dialogs/more-info/more-info-content";
+import { getEntity } from "../../../../src/fake_data/entity";
+import {
+  MockHomeAssistant,
+  provideHass,
+} from "../../../../src/fake_data/provide_hass";
+import "../../components/demo-more-infos";
+
+const ENTITIES = [
+  getEntity("input_text", "text", "Inspiration", {
+    friendly_name: "Text",
+    mode: "text",
+  }),
+];
+
+@customElement("demo-more-info-input-text")
+class DemoMoreInfoInputText extends LitElement {
+  @property({ attribute: false }) public hass!: MockHomeAssistant;
+
+  @query("demo-more-infos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`
+      <demo-more-infos
+        .hass=${this.hass}
+        .entities=${ENTITIES.map((ent) => ent.entityId)}
+      ></demo-more-infos>
+    `;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.addEntities(ENTITIES);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-more-info-input-text": DemoMoreInfoInputText;
+  }
+}
@@ -140,7 +140,7 @@ const ENTITIES = [

@customElement("demo-more-info-light")
 class DemoMoreInfoLight extends LitElement {
-  @property() public hass!: MockHomeAssistant;
+  @property({ attribute: false }) public hass!: MockHomeAssistant;

  @query("demo-more-infos") private _demoRoot!: HTMLElement;

--- a/Show More
+++ b/Show More