Simplify fully closed or fully open check

Bumped version to 20240104.0
Fix thermostat and humidifier card rendering when off (#19281 )
2026-08-23 15:18:07 +00:00 · 2024-01-04 18:32:48 +01:00 · 2024-01-04 17:43:37 +01:00 · 2024-01-04 16:18:16 +01:00 · 2024-01-04 14:24:33 +01:00 · 2024-01-04 13:20:35 +01:00
969 changed files with 41303 additions and 26754 deletions
@@ -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: |
@@ -2,9 +2,7 @@
  You are amazing! Thanks for contributing to our project!
  Please, DO NOT DELETE ANY TEXT from this template! (unless instructed).
 -->
-
 ## Breaking change
-
 <!--
  If your PR contains a breaking change for existing users, it is important
  to tell them what breaks, how to make it work again and why we did this.
@@ -13,8 +11,8 @@
  Note: Remove this section if this PR is NOT a breaking change.
 -->

-## Proposed change

+## Proposed change
 <!--
  Describe the big picture of your changes here to communicate to the
  maintainers why we should accept this pull request. If it fixes a bug
@@ -22,8 +20,8 @@
  in the additional information section.
 -->

-## Type of change

+## Type of change
 <!--
  What type of change does your PR introduce to the Home Assistant frontend?
  NOTE: Please, check only 1! box!
@@ -38,7 +36,6 @@
 - [ ] Code quality improvements to existing code or addition of tests

 ## Example configuration
-
 <!--
  Supplying a configuration snippet, makes it easier for a maintainer to test
  your PR.
@@ -49,7 +46,6 @@
 ```

 ## Additional information
-
 <!--
  Details are important, and help maintainers processing your PR.
  Please be sure to fill out additional details, if applicable.
@@ -60,7 +56,6 @@
 - Link to documentation pull request:

 ## Checklist
-
 <!--
  Put an `x` in the boxes that apply. You can also fill these out after
  creating the PR. If you're unsure about any of them, don't hesitate to ask.
@@ -1,31 +1,45 @@
 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
+  - changed-files:
+      - any-glob-to-any-file:
+          - package.json
+          - renovate.json
+          - yarn.lock
+          - .yarn/**
+          - .yarnrc.yml
+          - .nvmrc

 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/**
@@ -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.0.0
+        uses: actions/checkout@v4.1.1
        with:
          ref: dev

      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        uses: actions/setup-node@v4.0.1
        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.0.0
+        uses: actions/checkout@v4.1.1
        with:
          ref: master

      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        uses: actions/setup-node@v4.0.1
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -24,9 +24,9 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.0.0
+        uses: actions/checkout@v4.1.1
      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        uses: actions/setup-node@v4.0.1
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -55,16 +55,16 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.0.0
+        uses: actions/checkout@v4.1.1
      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        uses: actions/setup-node@v4.0.1
        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:
@@ -73,9 +73,9 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.0.0
+        uses: actions/checkout@v4.1.1
      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        uses: actions/setup-node@v4.0.1
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -85,15 +85,21 @@ jobs:
        run: ./node_modules/.bin/gulp build-app
        env:
          IS_TEST: "true"
+      - name: Upload bundle stats
+        uses: actions/[email protected]
+        with:
+          name: frontend-bundle-stats
+          path: build/stats/*.json
+          if-no-files-found: error
  supervisor:
    name: Build supervisor
    needs: [lint, test]
    runs-on: ubuntu-latest
    steps:
      - name: Check out files from GitHub
-        uses: actions/checkout@v4.0.0
+        uses: actions/checkout@v4.1.1
      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        uses: actions/setup-node@v4.0.1
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -103,3 +109,9 @@ jobs:
        run: ./node_modules/.bin/gulp build-hassio
        env:
          IS_TEST: "true"
+      - name: Upload bundle stats
+        uses: actions/[email protected]
+        with:
+          name: supervisor-bundle-stats
+          path: build/stats/*.json
+          if-no-files-found: error
@@ -23,7 +23,7 @@ jobs:

    steps:
      - name: Checkout repository
-        uses: actions/checkout@v4.0.0
+        uses: actions/checkout@v4.1.1
        with:
          # We must fetch at least the immediate parents so that if this is
          # a pull request then we can checkout the head.
@@ -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
@@ -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.0.0
+        uses: actions/checkout@v4.1.1
        with:
          ref: dev

      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        uses: actions/setup-node@v4.0.1
        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.0.0
+        uses: actions/checkout@v4.1.1
        with:
          ref: master

      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        uses: actions/setup-node@v4.0.1
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -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.0.0
+        uses: actions/checkout@v4.1.1

      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        uses: actions/setup-node@v4.0.1
        with:
          node-version-file: ".nvmrc"
          cache: yarn
@@ -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.0.0
+        uses: actions/checkout@v4.1.1

      - name: Setup Node
-        uses: actions/setup-node@v3.8.1
+        uses: actions/setup-node@v4.0.1
        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: ""
@@ -20,15 +20,15 @@ jobs:
      contents: write
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@v4.0.0
+        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@v3.8.1
+        uses: actions/setup-node@v4.0.1
        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@v3
+        uses: actions/upload-artifact@v3.1.3
        with:
          name: wheels
          path: dist/home_assistant_frontend*.whl
          if-no-files-found: error

      - name: Upload translations
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v3.1.3
        with:
          name: translations
          path: translations.tar.gz
@@ -0,0 +1,25 @@
+name: RelativeCI
+
+on:
+  workflow_run:
+    workflows: [CI]
+    types:
+      - completed
+
+jobs:
+  upload:
+    name: Upload stats
+    if: ${{ github.event.workflow_run.conclusion == 'success' }}
+    strategy:
+      matrix:
+        bundle: [frontend, supervisor]
+        build: [modern, legacy]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Send bundle stats and build information to RelativeCI
+        uses: relative-ci/[email protected]
+        with:
+          key: ${{ secrets[format('RELATIVE_CI_KEY_{0}_{1}', matrix.bundle, matrix.build)] }}
+          token: ${{ github.token }}
+          artifactName: ${{ format('{0}-bundle-stats', matrix.bundle) }}
+          webpackStatsFile: ${{ format('{0}-{1}.json', matrix.bundle, matrix.build) }}
@@ -23,18 +23,18 @@ jobs:
      contents: write # Required to upload release assets
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@v4.0.0
+        uses: actions/checkout@v4.1.1

      - name: Verify version
        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@v3.8.1
+        uses: actions/setup-node@v4.0.1
        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.04.0
+        uses: home-assistant/wheels@2023.10.5
        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
@@ -13,7 +13,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout the repository
-        uses: actions/checkout@v4.0.0
+        uses: actions/checkout@v4.1.1

      - name: Upload Translations
        run: |
@@ -47,3 +47,6 @@ src/cast/dev_const.ts

 # Home Assistant config
 /config/
+
+# Jetbrains
+/.idea/
@@ -1 +1 @@
-18
+lts/iron
@@ -1,3 +1,4 @@
 CLA.md
 CODE_OF_CONDUCT.md
 LICENSE.md
+PULL_REQUEST_TEMPLATE.md
@@ -1,11 +1,9 @@
+compressionLevel: mixed
+
 defaultSemverRangePrefix: ""

+enableGlobalCache: false
+
 nodeLinker: node-modules

-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
-    spec: "@yarnpkg/plugin-typescript"
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
-
-yarnPath: .yarn/releases/yarn-3.6.3.cjs
+yarnPath: .yarn/releases/yarn-4.0.2.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
@@ -12,11 +13,7 @@ module.exports.sourceMapURL = () => {
 };

 // Files from NPM Packages that should not be imported
-// eslint-disable-next-line unused-imports/no-unused-vars
-module.exports.ignorePackages = ({ latestBuild }) => [
-  // Part of yaml.js and only used for !!js functions that we don't use
-  require.resolve("esprima"),
-];
+module.exports.ignorePackages = () => [];

 // Files from NPM packages that we should replace with empty file
 module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
@@ -35,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(
@@ -91,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.32", proposals: true },
+        useBuiltIns: latestBuild ? false : "usage",
+        corejs: latestBuild ? false : dependencies["core-js"],
        bugfixes: true,
        shippedProposals: true,
      },
@@ -116,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 }],
@@ -147,9 +152,21 @@ 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 ? "-latest" : "-es5");
+const nameSuffix = (latestBuild) => (latestBuild ? "-modern" : "-legacy");

 const outputPath = (outputRoot, latestBuild) =>
  path.resolve(outputRoot, latestBuild ? "frontend_latest" : "frontend_es5");
@@ -183,7 +200,7 @@ const publicPath = (latestBuild, root = "") =>
 module.exports.config = {
  app({ isProdBuild, latestBuild, isStatsBuild, isTestBuild, isWDS }) {
    return {
-      name: "app" + nameSuffix(latestBuild),
+      name: "frontend" + nameSuffix(latestBuild),
      entry: {
        service_worker: "./src/entrypoints/service_worker.ts",
        app: "./src/entrypoints/app.ts",
@@ -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"
  )
 );

@@ -45,8 +45,8 @@ gulp.task(
    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
    "copy-static-app",
    env.useRollup() ? "rollup-prod-app" : "webpack-prod-app",
+    gulp.parallel("gen-pages-app-prod", "gen-service-worker-app-prod"),
    // Don't compress running tests
-    ...(env.isTestBuild() ? [] : ["compress-app"]),
-    gulp.parallel("gen-pages-app-prod", "gen-service-worker-app-prod")
+    ...(env.isTestBuild() ? [] : ["compress-app"])
  )
 );
@@ -161,6 +161,10 @@ gulp.task("fetch-lokalise", async function () {
            })
          );
        })
+        .catch((err) => {
+          console.error(err);
+          throw err;
+        })
    )
  );
 });
@@ -4,6 +4,7 @@ import fs from "fs-extra";
 import gulp from "gulp";
 import path from "path";
 import paths from "../paths.cjs";
+import env from "../env.cjs";

 const npmPath = (...parts) =>
  path.resolve(paths.polymer_dir, "node_modules", ...parts);
@@ -62,6 +63,9 @@ function copyPolyfills(staticDir) {
 }

 function copyLoaderJS(staticDir) {
+  if (!env.useRollup()) {
+    return;
+  }
  const staticPath = genStaticPath(staticDir);
  copyFileDir(npmPath("systemjs/dist/s.min.js"), staticPath("js"));
  copyFileDir(npmPath("systemjs/dist/s.min.js.map"), staticPath("js"));
@@ -1,51 +1,54 @@
 import { deleteSync } from "del";
 import { mkdir, readFile, writeFile } from "fs/promises";
 import gulp from "gulp";
-import path from "path";
+import { join, resolve } from "node:path";
 import paths from "../paths.cjs";

-const outDir = path.join(paths.build_dir, "locale-data");
+const formatjsDir = join(paths.polymer_dir, "node_modules", "@formatjs");
+const outDir = join(paths.build_dir, "locale-data");

-const INTL_PACKAGES = {
-  "intl-relativetimeformat": "RelativeTimeFormat",
+const INTL_POLYFILLS = {
  "intl-datetimeformat": "DateTimeFormat",
-  "intl-numberformat": "NumberFormat",
  "intl-displaynames": "DisplayNames",
  "intl-listformat": "ListFormat",
+  "intl-numberformat": "NumberFormat",
+  "intl-relativetimeformat": "RelativeTimeFormat",
 };

-const convertToJSON = async (pkg, lang) => {
+const convertToJSON = async (
+  pkg,
+  lang,
+  subDir = "locale-data",
+  addFunc = "__addLocaleData",
+  skipMissing = true
+) => {
  let localeData;
  try {
    localeData = await readFile(
-      path.resolve(
-        paths.polymer_dir,
-        `node_modules/@formatjs/${pkg}/locale-data/${lang}.js`
-      ),
+      join(formatjsDir, pkg, subDir, `${lang}.js`),
      "utf-8"
    );
  } catch (e) {
    // Ignore if language is missing (i.e. not supported by @formatjs)
-    if (e.code === "ENOENT") {
+    if (e.code === "ENOENT" && skipMissing) {
+      console.warn(`Skipped missing data for language ${lang} from ${pkg}`);
      return;
-    } else {
-      throw e;
    }
+    throw e;
  }
  // Convert to JSON
-  const className = INTL_PACKAGES[pkg];
-  localeData = localeData
-    .replace(
-      new RegExp(
-        `\\/\\*\\s*@generated\\s*\\*\\/\\s*\\/\\/\\s*prettier-ignore\\s*if\\s*\\(Intl\\.${className}\\s*&&\\s*typeof\\s*Intl\\.${className}\\.__addLocaleData\\s*===\\s*'function'\\)\\s*{\\s*Intl\\.${className}\\.__addLocaleData\\(`,
-        "im"
-      ),
-      ""
-    )
-    .replace(/\)\s*}/im, "");
+  const obj = INTL_POLYFILLS[pkg];
+  const dataRegex = new RegExp(
+    `Intl\\.${obj}\\.${addFunc}\\((?<data>.*)\\)`,
+    "s"
+  );
+  localeData = localeData.match(dataRegex)?.groups?.data;
+  if (!localeData) {
+    throw Error(`Failed to extract data for language ${lang} from ${pkg}`);
+  }
  // Parse to validate JSON, then stringify to minify
  localeData = JSON.stringify(JSON.parse(localeData));
-  await writeFile(path.join(outDir, `${pkg}/${lang}.json`), localeData);
+  await writeFile(join(outDir, `${pkg}/${lang}.json`), localeData);
 };

 gulp.task("clean-locale-data", async () => deleteSync([outDir]));
@@ -53,17 +56,27 @@ gulp.task("clean-locale-data", async () => deleteSync([outDir]));
 gulp.task("create-locale-data", async () => {
  const translationMeta = JSON.parse(
    await readFile(
-      path.resolve(paths.translations_src, "translationMetadata.json"),
+      resolve(paths.translations_src, "translationMetadata.json"),
      "utf-8"
    )
  );
  const conversions = [];
-  for (const pkg of Object.keys(INTL_PACKAGES)) {
-    await mkdir(path.join(outDir, pkg), { recursive: true });
+  for (const pkg of Object.keys(INTL_POLYFILLS)) {
+    // eslint-disable-next-line no-await-in-loop
+    await mkdir(join(outDir, pkg), { recursive: true });
    for (const lang of Object.keys(translationMeta)) {
      conversions.push(convertToJSON(pkg, lang));
    }
  }
+  conversions.push(
+    convertToJSON(
+      "intl-datetimeformat",
+      "add-all-tz",
+      ".",
+      "__addTZData",
+      false
+    )
+  );
  await Promise.all(conversions);
 });

@@ -1,12 +1,7 @@
 import { createHash } from "crypto";
 import { deleteSync } from "del";
-import {
-  mkdirSync,
-  readdirSync,
-  readFileSync,
-  renameSync,
-  writeFile,
-} from "fs";
+import { mkdirSync, readdirSync, readFileSync, renameSync } from "fs";
+import { writeFile } from "node:fs/promises";
 import gulp from "gulp";
 import flatmap from "gulp-flatmap";
 import transform from "gulp-json-transform";
@@ -136,27 +131,23 @@ gulp.task("ensure-translations-build-dir", async () => {
  mkdirSync(workDir, { recursive: true });
 });

-gulp.task("create-test-metadata", (cb) => {
-  writeFile(
-    workDir + "/testMetadata.json",
-    JSON.stringify({
-      test: {
-        nativeName: "Test",
-      },
-    }),
-    cb
-  );
-});
+gulp.task("create-test-metadata", () =>
+  env.isProdBuild()
+    ? Promise.resolve()
+    : writeFile(
+        workDir + "/testMetadata.json",
+        JSON.stringify({ test: { nativeName: "Test" } })
+      )
+);

-gulp.task(
-  "create-test-translation",
-  gulp.series("create-test-metadata", () =>
-    gulp
-      .src(path.join(paths.translations_src, "en.json"))
-      .pipe(transform((data, _file) => recursiveEmpty(data)))
-      .pipe(rename("test.json"))
-      .pipe(gulp.dest(workDir))
-  )
+gulp.task("create-test-translation", () =>
+  env.isProdBuild()
+    ? Promise.resolve()
+    : gulp
+        .src(path.join(paths.translations_src, "en.json"))
+        .pipe(transform((data, _file) => recursiveEmpty(data)))
+        .pipe(rename("test.json"))
+        .pipe(gulp.dest(workDir))
 );

 /**
@@ -188,16 +179,11 @@ gulp.task("build-master-translation", () => {

 gulp.task("build-merged-translations", () =>
  gulp
-    .src(
-      [
-        inFrontendDir + "/*.json",
-        "!" + inFrontendDir + "/en.json",
-        workDir + "/test.json",
-      ],
-      {
-        allowEmpty: true,
-      }
-    )
+    .src([
+      inFrontendDir + "/*.json",
+      "!" + inFrontendDir + "/en.json",
+      ...(env.isProdBuild() ? [] : [workDir + "/test.json"]),
+    ])
    .pipe(transform((data, file) => lokaliseTransform(data, data, file)))
    .pipe(
      flatmap((stream, file) => {
@@ -377,14 +363,11 @@ gulp.task("build-translation-flatten-supervisor", () =>

 gulp.task("build-translation-write-metadata", () =>
  gulp
-    .src(
-      [
-        path.join(paths.translations_src, "translationMetadata.json"),
-        workDir + "/testMetadata.json",
-        workDir + "/translationFingerprints.json",
-      ],
-      { allowEmpty: true }
-    )
+    .src([
+      path.join(paths.translations_src, "translationMetadata.json"),
+      ...(env.isProdBuild() ? [] : [workDir + "/testMetadata.json"]),
+      workDir + "/translationFingerprints.json",
+    ])
    .pipe(merge({}))
    .pipe(
      transform((data) => {
@@ -415,7 +398,7 @@ gulp.task("build-translation-write-metadata", () =>
 gulp.task(
  "create-translations",
  gulp.series(
-    ...(env.isProdBuild() ? [] : ["create-test-translation"]),
+    gulp.parallel("create-test-metadata", "create-test-translation"),
    "build-master-translation",
    "build-merged-translations",
    gulp.parallel(...splitTasks),
@@ -443,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",
@@ -1,6 +1,8 @@
 const { existsSync } = require("fs");
 const path = require("path");
 const webpack = require("webpack");
+const { StatsWriterPlugin } = require("webpack-stats-plugin");
+const filterStats = require("@bundle-stats/plugin-webpack-filter").default;
 const TerserPlugin = require("terser-webpack-plugin");
 const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
 const log = require("fancy-log");
@@ -49,8 +51,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: {
@@ -152,6 +154,15 @@ const createWebpackConfig = ({
          )
        ),
      !isProdBuild && new LogStartCompilePlugin(),
+      isProdBuild &&
+        new StatsWriterPlugin({
+          filename: path.relative(
+            outputPath,
+            path.join(paths.build_dir, "stats", `${name}.json`)
+          ),
+          stats: { assets: true, chunks: true, modules: true },
+          transform: (stats) => JSON.stringify(filterStats(stats)),
+        }),
    ].filter(Boolean),
    resolve: {
      extensions: [".ts", ".js", ".json"],
@@ -165,11 +176,14 @@ const createWebpackConfig = ({
        "lit/directives/guard$": "lit/directives/guard.js",
        "lit/directives/cache$": "lit/directives/cache.js",
        "lit/directives/repeat$": "lit/directives/repeat.js",
+        "lit/directives/live$": "lit/directives/live.js",
        "lit/polyfill-support$": "lit/polyfill-support.js",
        "@lit-labs/virtualizer/layouts/grid":
          "@lit-labs/virtualizer/layouts/grid.js",
        "@lit-labs/virtualizer/polyfills/resize-observer-polyfill/ResizeObserver":
          "@lit-labs/virtualizer/polyfills/resize-observer-polyfill/ResizeObserver.js",
+        "@lit-labs/observers/resize-controller":
+          "@lit-labs/observers/resize-controller.js",
      },
    },
    output: {
@@ -177,11 +191,12 @@ 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",
      hashDigestLength: 11, // full length of 64 bit base64url
@@ -1,4 +1,4 @@
 import "../../../src/resources/safari-14-attachshadow-patch";
-import "../../../src/resources/ha-style";
-import "../../../src/resources/roboto";
 import "./layout/hc-connect";
+
+import("../../../src/resources/ha-style");
@@ -3,7 +3,7 @@ import { mdiCast, mdiCastConnected } from "@mdi/js";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-listbox/paper-listbox";
 import { Auth, Connection } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { CastManager } from "../../../../src/cast/cast_manager";
 import {
@@ -22,8 +22,9 @@ import "../../../../src/components/ha-svg-icon";
 import {
  getLegacyLovelaceCollection,
  getLovelaceCollection,
-  LovelaceConfig,
 } from "../../../../src/data/lovelace";
+import { isStrategyDashboard } from "../../../../src/data/lovelace/config/types";
+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";
@@ -38,10 +39,10 @@ class HcCast extends LitElement {

  @state() private askWrite = false;

-  @state() private lovelaceConfig?: LovelaceConfig | null;
+  @state() private lovelaceViews?: LovelaceViewConfig[] | null;

  protected render(): TemplateResult {
-    if (this.lovelaceConfig === undefined) {
+    if (this.lovelaceViews === undefined) {
      return html`<hass-loading-screen no-toolbar></hass-loading-screen>`;
    }

@@ -72,43 +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.lovelaceConfig
-                  ? this.lovelaceConfig.views
-                  : [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`
@@ -136,11 +138,15 @@ class HcCast extends LitElement {
    llColl.refresh().then(
      () => {
        llColl.subscribe((config) => {
-          this.lovelaceConfig = config;
+          if (isStrategyDashboard(config)) {
+            this.lovelaceViews = null;
+          } else {
+            this.lovelaceViews = config.views;
+          }
        });
      },
      async () => {
-        this.lovelaceConfig = null;
+        this.lovelaceViews = null;
      }
    );

@@ -159,9 +165,7 @@ class HcCast extends LitElement {
    toggleAttribute(
      this,
      "hide-icons",
-      this.lovelaceConfig
-        ? !this.lovelaceConfig.views.some((view) => view.icon)
-        : true
+      this.lovelaceViews ? !this.lovelaceViews.some((view) => view.icon) : true
    );
  }

@@ -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%;
+      }
    `;
  }
 }
@@ -1,7 +1,5 @@
-import {
-  LovelaceCardConfig,
-  LovelaceConfig,
-} from "../../../../src/data/lovelace";
+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 = () => {
@@ -1,7 +1,7 @@
 import { html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { mockHistory } from "../../../../demo/src/stubs/history";
-import { LovelaceConfig } from "../../../../src/data/lovelace";
+import { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
 import {
  MockHomeAssistant,
  provideHass,
@@ -1,7 +1,7 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import { LovelaceConfig } from "../../../../src/data/lovelace";
+import { LovelaceConfig } from "../../../../src/data/lovelace/config/types";
 import { Lovelace } from "../../../../src/panels/lovelace/types";
 import "../../../../src/panels/lovelace/views/hui-view";
 import { HomeAssistant } from "../../../../src/types";
@@ -14,7 +14,8 @@ import "./hc-launch-screen";
 class HcLovelace extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

-  @property({ attribute: false }) public lovelaceConfig!: LovelaceConfig;
+  @property({ attribute: false })
+  public lovelaceConfig!: LovelaceConfig;

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

@@ -21,17 +21,27 @@ import {
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { isNavigationClick } from "../../../../src/common/dom/is-navigation-click";
 import {
-  fetchResources,
  getLegacyLovelaceCollection,
  getLovelaceCollection,
+} from "../../../../src/data/lovelace";
+import {
+  isStrategyDashboard,
  LegacyLovelaceConfig,
  LovelaceConfig,
-} from "../../../../src/data/lovelace";
+  LovelaceDashboardStrategyConfig,
+} 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";

+const DEFAULT_CONFIG: LovelaceDashboardStrategyConfig = {
+  strategy: {
+    type: "original-states",
+  },
+};
+
 let resourcesLoaded = false;
@customElement("hc-main")
 export class HcMain extends HassElement {
@@ -91,14 +101,16 @@ export class HcMain extends HassElement {
        .lovelaceConfig=${this._lovelaceConfig}
        .viewPath=${this._lovelacePath}
        .urlPath=${this._urlPath}
-        @config-refresh=${this._generateLovelaceConfig}
+        @config-refresh=${this._generateDefaultLovelaceConfig}
      ></hc-lovelace>
    `;
  }

  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
-    import("../second-load");
+    import("./hc-lovelace");
+    import("../../../../src/resources/ha-style");
+
    window.addEventListener("location-changed", () => {
      const panelPath = `/${this._urlPath || "lovelace"}/`;
      if (location.pathname.startsWith(panelPath)) {
@@ -258,7 +270,6 @@ export class HcMain extends HassElement {
          {
            strategy: {
              type: "energy",
-              options: { show_date_selection: true },
            },
          },
        ],
@@ -281,9 +292,20 @@ export class HcMain extends HassElement {
      // configuration.
      try {
        await llColl.refresh();
-        this._unsubLovelace = llColl.subscribe((lovelaceConfig) =>
-          this._handleNewLovelaceConfig(lovelaceConfig)
-        );
+        this._unsubLovelace = llColl.subscribe(async (rawConfig) => {
+          if (isStrategyDashboard(rawConfig)) {
+            const { generateLovelaceDashboardStrategy } = await import(
+              "../../../../src/panels/lovelace/strategies/get-strategy"
+            );
+            const config = await generateLovelaceDashboardStrategy(
+              rawConfig.strategy,
+              this.hass!
+            );
+            this._handleNewLovelaceConfig(config);
+          } else {
+            this._handleNewLovelaceConfig(rawConfig);
+          }
+        });
      } catch (err: any) {
        if (
          atLeastVersion(this.hass.connection.haVersion, 0, 107) &&
@@ -297,7 +319,7 @@ export class HcMain extends HassElement {
        }
        // Generate a Lovelace config.
        this._unsubLovelace = () => undefined;
-        await this._generateLovelaceConfig();
+        await this._generateDefaultLovelaceConfig();
      }
    }
    if (!resourcesLoaded) {
@@ -306,24 +328,21 @@ export class HcMain extends HassElement {
        ? await fetchResources(this.hass!.connection)
        : (this._lovelaceConfig as LegacyLovelaceConfig).resources;
      if (resources) {
-        loadLovelaceResources(resources, this.hass!.auth.data.hassUrl);
+        loadLovelaceResources(resources, this.hass!);
      }
    }

    this._sendStatus();
  }

-  private async _generateLovelaceConfig() {
+  private async _generateDefaultLovelaceConfig() {
    const { generateLovelaceDashboardStrategy } = await import(
      "../../../../src/panels/lovelace/strategies/get-strategy"
    );
    this._handleNewLovelaceConfig(
      await generateLovelaceDashboardStrategy(
-        {
-          hass: this.hass!,
-          narrow: false,
-        },
-        "original-states"
+        DEFAULT_CONFIG.strategy,
+        this.hass!
      )
    );
  }
@@ -1,3 +0,0 @@
-import "../../../src/resources/ha-style";
-import "../../../src/resources/roboto";
-import "./layout/hc-lovelace";
@@ -8,25 +8,67 @@
      "src": "/static/icons/favicon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
-      "purpose": "maskable any"
+      "purpose": "any"
    },
    {
      "src": "/static/icons/favicon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
-      "purpose": "maskable any"
+      "purpose": "any"
    },
    {
      "src": "/static/icons/favicon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
-      "purpose": "maskable any"
+      "purpose": "any"
    },
    {
      "src": "/static/icons/favicon-1024x1024.png",
      "sizes": "1024x1024",
      "type": "image/png",
-      "purpose": "maskable any"
+      "purpose": "any"
+    },
+    {
+      "src": "/static/icons/maskable_icon-48x48.png",
+      "sizes": "48x48",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/static/icons/maskable_icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/static/icons/maskable_icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/static/icons/maskable_icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/static/icons/maskable_icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/static/icons/maskable_icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/static/icons/maskable_icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
    }
  ],
  "lang": "en-US",
@@ -3,6 +3,15 @@ import { DemoConfig } from "../types";

 export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
  convertEntities({
+    "todo.shopping_list": {
+      entity_id: "todo.shopping_list",
+      state: "2",
+      attributes: {
+        supported_features: 15,
+        friendly_name: "Shopping List",
+        icon: "mdi:cart",
+      },
+    },
    "zone.home": {
      entity_id: "zone.home",
      state: "zoning",
@@ -3,6 +3,15 @@ import { DemoConfig } from "../types";

 export const demoEntitiesJimpower: DemoConfig["entities"] = () =>
  convertEntities({
+    "todo.shopping_list": {
+      entity_id: "todo.shopping_list",
+      state: "2",
+      attributes: {
+        supported_features: 15,
+        friendly_name: "Shopping List",
+        icon: "mdi:cart",
+      },
+    },
    "zone.powertec": {
      entity_id: "zone.powertec",
      state: "zoning",
@@ -4,16 +4,11 @@ export const demoThemeJimpower = () => ({
  "primary-color": "#5294E2",
  "label-badge-red": "var(--accent-color)",
  "paper-tabs-selection-bar-color": "green",
-  "paper-slider-knob-color": "var(--accent-color)",
  "light-primary-color": "var(--accent-color)",
  "primary-background-color": "#383C45",
  "primary-text-color": "#FFFFFF",
  "paper-item-selected_-_background-color": "#434954",
-  "paper-slider-active-color": "var(--accent-color)",
  "secondary-background-color": "#383C45",
-  "paper-slider-container-color":
-    "linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat",
-  "paper-slider-disabled-active-color": "var(--disabled-text-color)",
  "disabled-text-color": "#7F848E",
  "paper-item-icon_-_color": "green",
  "paper-grey-200": "#414A59",
@@ -32,14 +27,10 @@ export const demoThemeJimpower = () => ({
  "switch-unchecked-button-color": "var(--disabled-text-color)",
  "label-badge-border-color": "green",
  "paper-listbox-color": "var(--primary-color)",
-  "paper-slider-disabled-secondary-color": "var(--disabled-text-color)",
  "card-background-color": "#434954",
  "label-badge-text-color": "var(--primary-text-color)",
-  "paper-slider-knob-start-color": "var(--accent-color)",
  "switch-unchecked-track-color": "var(--disabled-text-color)",
  "dark-primary-color": "var(--accent-color)",
-  "paper-slider-secondary-color": "var(--secondary-background-color)",
-  "paper-slider-pin-color": "var(--accent-color)",
  "paper-item-icon-active-color": "#F9C536",
  "accent-color": "#E45E65",
  "table-row-alternative-background-color": "#3E424B",
@@ -3,6 +3,15 @@ import { DemoConfig } from "../types";

 export const demoEntitiesKernehed: DemoConfig["entities"] = () =>
  convertEntities({
+    "todo.shopping_list": {
+      entity_id: "todo.shopping_list",
+      state: "2",
+      attributes: {
+        supported_features: 15,
+        friendly_name: "Shopping List",
+        icon: "mdi:cart",
+      },
+    },
    "zone.anna": {
      entity_id: "zone.anna",
      state: "zoning",
@@ -5,17 +5,12 @@ export const demoThemeKernehed = () => ({
  "primary-color": "#2980b9",
  "label-badge-red": "var(--accent-color)",
  "paper-tabs-selection-bar-color": "green",
-  "paper-slider-knob-color": "var(--accent-color)",
  "primary-text-color": "#FFFFFF",
  "light-primary-color": "var(--accent-color)",
  "primary-background-color": "#222222",
  "sidebar-icon-color": "#777777",
  "paper-item-selected_-_background-color": "#292929",
-  "paper-slider-active-color": "var(--accent-color)",
  "secondary-background-color": "#222222",
-  "paper-slider-container-color":
-    "linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat",
-  "paper-slider-disabled-active-color": "var(--disabled-text-color)",
  "disabled-text-color": "#777777",
  "paper-item-icon_-_color": "green",
  "paper-grey-200": "#222222",
@@ -33,14 +28,10 @@ export const demoThemeKernehed = () => ({
  "switch-unchecked-button-color": "var(--disabled-text-color)",
  "label-badge-border-color": "green",
  "paper-listbox-color": "#777777",
-  "paper-slider-disabled-secondary-color": "var(--disabled-text-color)",
  "card-background-color": "#292929",
  "label-badge-text-color": "var(--primary-text-color)",
-  "paper-slider-knob-start-color": "var(--accent-color)",
  "switch-unchecked-track-color": "var(--disabled-text-color)",
  "dark-primary-color": "var(--accent-color)",
-  "paper-slider-secondary-color": "var(--secondary-background-color)",
-  "paper-slider-pin-color": "var(--accent-color)",
  "paper-item-icon-active-color": "#b58e31",
  "accent-color": "#2980b9",
  "table-row-alternative-background-color": "#292929",
@@ -3,6 +3,15 @@ import { DemoConfig } from "../types";

 export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
  convertEntities({
+    "todo.shopping_list": {
+      entity_id: "todo.shopping_list",
+      state: "2",
+      attributes: {
+        supported_features: 15,
+        friendly_name: "Shopping List",
+        icon: "mdi:cart",
+      },
+    },
    "sensor.pollen_grabo": {
      entity_id: "sensor.pollen_grabo",
      state: "",
@@ -220,7 +220,8 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
          state_filter: ["on"],
        },
        {
-          type: "shopping-list",
+          type: "todo-list",
+          entity: "todo.shopping_list",
        },
        {
          entities: [
@@ -1,6 +1,5 @@
 export const demoThemeTeachingbirds = () => ({
  "paper-card-header-color": "var(--paper-item-icon-color)",
-  "paper-slider-pin-color": "var(--primary-color)",
  "paper-listbox-background-color": "#202020",
  "paper-grey-50": "var(--primary-text-color)",
  "paper-item-icon-color": "#d3d3d3",
@@ -8,8 +7,6 @@ export const demoThemeTeachingbirds = () => ({
  "primary-color": "#389638",
  "light-primary-color": "#6f956f",
  "label-badge-red": "var(--primary-color)",
-  "paper-slider-secondary-color": "var(--light-primary-color)",
-  "paper-slider-knob-color": "var(--primary-color)",
  "paper-listbox-color": "#FFFFFF",
  "paper-toggle-button-checked-bar-color": "var(--light-primary-color)",
  "switch-unchecked-track-color": "var(--primary-text-color)",
@@ -17,9 +14,7 @@ export const demoThemeTeachingbirds = () => ({
  "label-badge-text-color": "var(--text-primary-color)",
  "primary-background-color": "#303030",
  "sidebar-icon-color": "var(--paper-item-icon-color)",
-  "paper-slider-active-color": "#d8bf50",
  "secondary-background-color": "#2b2b2b",
-  "paper-slider-knob-start-color": "var(--primary-color)",
  "paper-item-icon-active-color": "#d8bf50",
  "switch-checked-color": "var(--primary-color)",
  "secondary-text-color": "#389638",
@@ -1,5 +1,5 @@
 import { LocalizeFunc } from "../../../src/common/translations/localize";
-import { LovelaceConfig } from "../../../src/data/lovelace";
+import { LovelaceConfig } from "../../../src/data/lovelace/config/types";
 import { Entity } from "../../../src/fake_data/entity";

 export interface DemoConfig {
@@ -4,7 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import { until } from "lit/directives/until";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-circular-progress";
-import { LovelaceCardConfig } from "../../../src/data/lovelace";
+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 {
@@ -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>
@@ -1,4 +1,4 @@
-import "../../src/resources/ha-style";
-import "../../src/resources/roboto";
 import "../../src/resources/safari-14-attachshadow-patch";
 import "./ha-demo";
+
+import("../../src/resources/ha-style");
@@ -22,7 +22,7 @@ import { mockLovelace } from "./stubs/lovelace";
 import { mockMediaPlayer } from "./stubs/media_player";
 import { mockPersistentNotification } from "./stubs/persistent_notification";
 import { mockRecorder } from "./stubs/recorder";
-import { mockShoppingList } from "./stubs/shopping_list";
+import { mockTodo } from "./stubs/todo";
 import { mockSystemLog } from "./stubs/system_log";
 import { mockTemplate } from "./stubs/template";
 import { mockTranslations } from "./stubs/translations";
@@ -49,7 +49,7 @@ export class HaDemo extends HomeAssistantAppEl {
    mockTranslations(hass);
    mockHistory(hass);
    mockRecorder(hass);
-    mockShoppingList(hass);
+    mockTodo(hass);
    mockSystemLog(hass);
    mockTemplate(hass);
    mockEvents(hass);
@@ -62,10 +62,24 @@
        justify-content: center;
        align-items: center;
      }
+      #ha-launch-screen svg {
+        width: 170px;
+        flex-shrink: 0;
+      }
+      #ha-launch-screen .ha-launch-screen-spacer {
+        flex: 1;
+      }
    </style>
  </head>
  <body>
-    <div id="ha-launch-screen"></div>
+    <div id="ha-launch-screen">
+      <div class="ha-launch-screen-spacer"></div>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 240">
+        <path fill="#18BCF2" d="M240 224.762a15 15 0 0 1-15 15H15a15 15 0 0 1-15-15v-90c0-8.25 4.77-19.769 10.61-25.609l98.78-98.7805c5.83-5.83 15.38-5.83 21.21 0l98.79 98.7895c5.83 5.83 10.61 17.36 10.61 25.61v90-.01Z"/>
+        <path fill="#F2F4F9" d="m107.27 239.762-40.63-40.63c-2.09.72-4.32 1.13-6.64 1.13-11.3 0-20.5-9.2-20.5-20.5s9.2-20.5 20.5-20.5 20.5 9.2 20.5 20.5c0 2.33-.41 4.56-1.13 6.65l31.63 31.63v-115.88c-6.8-3.3395-11.5-10.3195-11.5-18.3895 0-11.3 9.2-20.5 20.5-20.5s20.5 9.2 20.5 20.5c0 8.07-4.7 15.05-11.5 18.3895v81.27l31.46-31.46c-.62-1.96-.96-4.04-.96-6.2 0-11.3 9.2-20.5 20.5-20.5s20.5 9.2 20.5 20.5-9.2 20.5-20.5 20.5c-2.5 0-4.88-.47-7.09-1.29L129 208.892v30.88z"/>
+      </svg>
+      <div id="ha-launch-screen-info-box" class="ha-launch-screen-spacer"></div>
+    </div>
    <ha-demo></ha-demo>
    <%= renderTemplate("../../../src/html/_js_base.html.template") %>
    <%= renderTemplate("../../../src/html/_preload_roboto.html.template") %>
@@ -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;
 };
@@ -1,44 +0,0 @@
-import { ShoppingListItem } from "../../../src/data/shopping-list";
-import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
-
-let items: ShoppingListItem[] = [
-  {
-    id: 12,
-    name: "Milk",
-    complete: false,
-  },
-  {
-    id: 13,
-    name: "Eggs",
-    complete: false,
-  },
-  {
-    id: 14,
-    name: "Oranges",
-    complete: true,
-  },
-];
-
-export const mockShoppingList = (hass: MockHomeAssistant) => {
-  hass.mockWS("shopping_list/items", () => items);
-  hass.mockWS("shopping_list/items/add", (msg) => {
-    const item: ShoppingListItem = {
-      id: new Date().getTime(),
-      complete: false,
-      name: msg.name,
-    };
-    items.push(item);
-    hass.mockEvent("shopping_list_updated");
-    return item;
-  });
-  hass.mockWS("shopping_list/items/update", ({ type, item_id, ...updates }) => {
-    items = items.map((item) =>
-      item.id === item_id ? { ...item, ...updates } : item
-    );
-    hass.mockEvent("shopping_list_updated");
-  });
-  hass.mockWS("shopping_list/items/clear", () => {
-    items = items.filter((item) => !item.complete);
-    hass.mockEvent("shopping_list_updated");
-  });
-};
@@ -0,0 +1,24 @@
+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", () => ({
+    items: [
+      {
+        uid: "12",
+        summary: "Milk",
+        status: TodoItemStatus.NeedsAction,
+      },
+      {
+        uid: "13",
+        summary: "Eggs",
+        status: TodoItemStatus.NeedsAction,
+      },
+      {
+        uid: "14",
+        summary: "Oranges",
+        status: TodoItemStatus.Completed,
+      },
+    ] as TodoItem[],
+  }));
+};
@@ -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
@@ -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",
@@ -1,5 +1,5 @@
-import "../../src/resources/ha-style";
-import "../../src/resources/roboto";
 import "./ha-gallery";

+import("../../src/resources/ha-style");
+
 document.body.appendChild(document.createElement("ha-gallery"));
@@ -1,19 +1,17 @@
-import { mdiHomeAssistant } from "@mdi/js";
-import { css, html, LitElement, TemplateResult } from "lit";
+import { css, html, LitElement, TemplateResult, nothing } from "lit";
 import { customElement } from "lit/decorators";
 import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-chip";
-import "../../../../src/components/ha-chip-set";
+import "../../../../src/components/chips/ha-chip-set";
+import "../../../../src/components/chips/ha-assist-chip";
+import "../../../../src/components/chips/ha-input-chip";
+import "../../../../src/components/chips/ha-filter-chip";
 import "../../../../src/components/ha-svg-icon";
+import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg";

 const chips: {
  icon?: string;
  content?: string;
 }[] = [
-  {},
-  {
-    icon: mdiHomeAssistant,
-  },
  {
    content: "Content",
  },
@@ -29,31 +27,73 @@ export class DemoHaChips extends LitElement {
    return html`
      <ha-card header="ha-chip demo">
        <div class="card-content">
-          ${chips.map(
-            (chip) => html`
-              <ha-chip .hasIcon=${chip.icon !== undefined}>
-                ${chip.icon
-                  ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
-                    </ha-svg-icon>`
-                  : ""}
-                ${chip.content}
-              </ha-chip>
-            `
-          )}
-        </div>
-      </ha-card>
-      <ha-card header="ha-chip-set demo">
-        <div class="card-content">
+          <p>Action chip</p>
          <ha-chip-set>
            ${chips.map(
              (chip) => html`
-                <ha-chip .hasIcon=${chip.icon !== undefined}>
+                <ha-assist-chip .label=${chip.content}>
+                  ${chip.icon
+                    ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
+                      </ha-svg-icon>`
+                    : nothing}
+                </ha-assist-chip>
+              `
+            )}
+            ${chips.map(
+              (chip) => html`
+                <ha-assist-chip .label=${chip.content} selected>
+                  ${chip.icon
+                    ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
+                      </ha-svg-icon>`
+                    : nothing}
+                </ha-assist-chip>
+              `
+            )}
+          </ha-chip-set>
+          <p>Filter chip</p>
+          <ha-chip-set>
+            ${chips.map(
+              (chip) => html`
+                <ha-filter-chip .label=${chip.content}>
+                  ${chip.icon
+                    ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
+                      </ha-svg-icon>`
+                    : nothing}
+                </ha-filter-chip>
+              `
+            )}
+            ${chips.map(
+              (chip) => html`
+                <ha-filter-chip .label=${chip.content} selected>
+                  ${chip.icon
+                    ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
+                      </ha-svg-icon>`
+                    : nothing}
+                </ha-filter-chip>
+              `
+            )}
+          </ha-chip-set>
+          <p>Input chip</p>
+          <ha-chip-set>
+            ${chips.map(
+              (chip) => html`
+                <ha-input-chip .label=${chip.content}>
                  ${chip.icon
                    ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
                      </ha-svg-icon>`
                    : ""}
                  ${chip.content}
-                </ha-chip>
+                </ha-input-chip>
+              `
+            )}
+            ${chips.map(
+              (chip) => html`
+                <ha-input-chip .label=${chip.content} selected>
+                  ${chip.icon
+                    ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
+                      </ha-svg-icon>`
+                    : nothing}
+                </ha-input-chip>
              `
            )}
          </ha-chip-set>
@@ -68,12 +108,10 @@ export class DemoHaChips extends LitElement {
        max-width: 600px;
        margin: 24px auto;
      }
-      ha-chip {
-        margin-bottom: 4px;
-      }
      .card-content {
        display: flex;
        flex-direction: column;
+        align-items: flex-start;
      }
    `;
  }
@@ -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;
+  }
+}
@@ -49,11 +49,11 @@ export class DemoHaCircularSlider extends LitElement {
          <div class="field">
            <p>Current</p>
            <ha-slider
+              labeled
              min="10"
              max="30"
              .value=${this.current}
              @change=${this._currentChanged}
-              pin
            ></ha-slider>
            <p>${this.current} °C</p>
          </div>
@@ -11,6 +11,7 @@ const buttons: {
  min?: number;
  max?: number;
  step?: number;
+  unit?: string;
  class?: string;
 }[] = [
  {
@@ -29,6 +30,11 @@ const buttons: {
    label: "Custom",
    class: "custom",
  },
+  {
+    id: "unit",
+    label: "With unit",
+    unit: "m",
+  },
 ];

@customElement("demo-components-ha-control-number-buttons")
@@ -50,6 +56,7 @@ export class DemoHarControlNumberButtons extends LitElement {
              <pre>Config: ${JSON.stringify(config)}</pre>
              <ha-control-number-buttons
                .value=${this.value}
+                .unit=${config.unit}
                .min=${config.min}
                .max=${config.max}
                .step=${config.step}
@@ -9,6 +9,7 @@ const sliders: {
  id: string;
  label: string;
  mode?: "start" | "end" | "cursor";
+  unit?: string;
  class?: string;
 }[] = [
  {
@@ -31,18 +32,21 @@ const sliders: {
    label: "Slider (start mode) and custom style",
    mode: "start",
    class: "custom",
+    unit: "mm",
  },
  {
    id: "slider-end-custom",
    label: "Slider (end mode) and custom style",
    mode: "end",
    class: "custom",
+    unit: "mm",
  },
  {
    id: "slider-cursor-custom",
    label: "Slider (cursor mode) and custom style",
    mode: "cursor",
    class: "custom",
+    unit: "mm",
  },
 ];

@@ -93,6 +97,7 @@ export class DemoHaBarSlider extends LitElement {
                @value-changed=${this.handleValueChanged}
                @slider-moved=${this.handleSliderMoved}
                aria-labelledby=${id}
+                .unit=${config.unit}
              >
              </ha-control-slider>
            </div>
@@ -114,6 +119,7 @@ export class DemoHaBarSlider extends LitElement {
                  @value-changed=${this.handleValueChanged}
                  @slider-moved=${this.handleSliderMoved}
                  aria-label=${label}
+                  .unit=${config.unit}
                >
                </ha-control-slider>
              `;
@@ -5,9 +5,22 @@ subtitle: Dialogs provide important prompts in a user flow.

 # Material Design 3

-Our dialogs are based on the latest version of Material Design. Specs and guidelines can be found on its [website](https://m3.material.io/components/dialogs/overview).
+Our dialogs are based on the latest version of Material Design. Please note that we have made some well-considered adjustments to these guideliness. Specs and guidelines can be found on its [website](https://m3.material.io/components/dialogs/overview).

-# Highlighted guidelines
+# Guidelines
+
+## Design
+
+- Dialogs have a max width of 560px. Alert and confirmation dialogs got a fixed width of 320px. If you need more width, consider a dedicated page instead.
+- The close X-icon is on the top left, on all screen sizes. Except for alert and confirmation dialogs, they only have buttons and no X-icon. This is different compared to the Material guideliness.
+- Dialogs can't be closed with ESC or clicked outside of the dialog when there is a form that the user needs to fill out. Instead it will animate "no" by a little shake.
+- Extra icon buttons are on the top right, for example help, settings and expand dialog. More than 2 icon buttons, they will be in an overflow menu.
+- The submit button is grouped with a cancel button at the bottom right, on all screen sizes. Fullscreen mobile dialogs have them sticky at the bottom.
+- Keep the labels short, for example `Save`, `Delete`, `Enable`.
+- Dialog with actions must always have a discard button. On desktop a `Cancel` button and X-icon, on mobile only the X-icon.
+- Destructive actions should be a red warning button.
+- Alert or confirmation dialogs only have buttons and no X-icon.
+- Try to avoid three buttons in one dialog. Especially when you leave the dialog task unfinished.

 ## Content

@@ -17,14 +30,6 @@ Our dialogs are based on the latest version of Material Design. Specs and guidel
 - If users become unsure, they read the description. Make sure this explains what will happen.
 - Strive for minimalism.

-## Buttons and X-icon
-
- Keep the labels short, for example `Save`, `Delete`, `Enable`.
- Dialog with actions must always have a discard button. On desktop a `Cancel` button and X-icon, on mobile only the X-icon.
- Destructive actions should be a red warning button.
- Alert or confirmation dialogs only have buttons and no X-icon.
- Try to avoid three buttons in one dialog. Especially when you leave the dialog task unfinished.
-
 ## Example

 ### Confirmation dialog
@@ -57,6 +57,7 @@ const DEVICES = [
    sw_version: null,
    hw_version: null,
    via_device_id: null,
+    serial_number: null,
  },
  {
    area_id: "backyard",
@@ -74,6 +75,7 @@ const DEVICES = [
    sw_version: null,
    hw_version: null,
    via_device_id: null,
+    serial_number: null,
  },
  {
    area_id: null,
@@ -91,6 +93,7 @@ const DEVICES = [
    sw_version: null,
    hw_version: null,
    via_device_id: null,
+    serial_number: null,
  },
 ];

@@ -57,8 +57,8 @@ export class DemoHaHsColorPicker extends LitElement {
          ></ha-hs-color-picker>
          <p>Hue : ${this.value[0]}</p>
          <ha-slider
+            labeled
            step="1"
-            pin
            min="0"
            max="360"
            .value=${this.value[0]}
@@ -67,8 +67,8 @@ export class DemoHaHsColorPicker extends LitElement {
          </ha-slider>
          <p>Saturation : ${this.value[1]}</p>
          <ha-slider
+            labeled
            step="0.01"
-            pin
            min="0"
            max="1"
            .value=${this.value[1]}
@@ -77,8 +77,8 @@ export class DemoHaHsColorPicker extends LitElement {
          </ha-slider>
          <p>Color Brighness : ${this.brightness}</p>
          <ha-slider
+            labeled
            step="1"
-            pin
            min="0"
            max="255"
            .value=${this.brightness}
@@ -53,6 +53,7 @@ const DEVICES = [
    sw_version: null,
    hw_version: null,
    via_device_id: null,
+    serial_number: null,
  },
  {
    area_id: "backyard",
@@ -70,6 +71,7 @@ const DEVICES = [
    sw_version: null,
    hw_version: null,
    via_device_id: null,
+    serial_number: null,
  },
  {
    area_id: null,
@@ -87,6 +89,7 @@ const DEVICES = [
    sw_version: null,
    hw_version: null,
    via_device_id: null,
+    serial_number: null,
  },
 ];

@@ -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,3 +0,0 @@
---
-title: Shopping List Card
---
@@ -35,6 +35,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 +69,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: `
@@ -0,0 +1,3 @@
+---
+title: Todo List Card
+---
@@ -2,25 +2,39 @@ import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, query } from "lit/decorators";
 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";
+
+const ENTITIES = [
+  getEntity("todo", "shopping_list", "2", {
+    friendly_name: "Shopping List",
+    supported_features: 15,
+  }),
+  getEntity("todo", "read_only", "2", {
+    friendly_name: "Read only",
+  }),
+];

 const CONFIGS = [
  {
    heading: "List example",
    config: `
- type: shopping-list
+- type: todo-list
+  entity: todo.shopping_list
    `,
  },
  {
    heading: "List with title example",
    config: `
- type: shopping-list
+- type: todo-list
  title: Shopping List
+  entity: todo.read_only
    `,
  },
 ];

-@customElement("demo-lovelace-shopping-list-card")
-class DemoShoppingListEntity extends LitElement {
+@customElement("demo-lovelace-todo-list-card")
+class DemoTodoListEntity extends LitElement {
  @query("#demos") private _demoRoot!: HTMLElement;

  protected render(): TemplateResult {
@@ -32,18 +46,14 @@ class DemoShoppingListEntity extends LitElement {
    const hass = provideHass(this._demoRoot);
    hass.updateTranslations(null, "en");
    hass.updateTranslations("lovelace", "en");
+    hass.addEntities(ENTITIES);

-    hass.mockAPI("shopping_list", () => [
-      { name: "list", id: 1, complete: false },
-      { name: "all", id: 2, complete: false },
-      { name: "the", id: 3, complete: false },
-      { name: "things", id: 4, complete: true },
-    ]);
+    mockTodo(hass);
  }
 }

 declare global {
  interface HTMLElementTagNameMap {
-    "demo-lovelace-shopping-list-card": DemoShoppingListEntity;
+    "demo-lovelace-todo-list-card": DemoTodoListEntity;
  }
 }
@@ -10,7 +10,6 @@ import { computeStateDisplay } from "../../../../src/common/entity/compute_state
 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 "../../../../src/components/ha-chip";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import { HomeAssistant } from "../../../../src/types";

@@ -213,6 +213,7 @@ const createDeviceRegistryEntries = (
    name: "Tag Reader",
    sw_version: null,
    hw_version: "1.0.0",
+    serial_number: "00_12_4B_00_22_98_88_7F",
    id: "mock-device-id",
    identifiers: [],
    via_device_id: null,
@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import "../../../../src/components/ha-card";
-import { ActionHandlerEvent } from "../../../../src/data/lovelace";
+import { ActionHandlerEvent } from "../../../../src/data/lovelace/action_handler";
 import { actionHandler } from "../../../../src/panels/lovelace/common/directives/action-handler-directive";

@customElement("demo-misc-util-long-press")
@@ -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"],
@@ -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() 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;
+  }
+}
@@ -0,0 +1,3 @@
+---
+title: Lock
+---
@@ -0,0 +1,49 @@
+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("lock", "lock", "locked", {
+    friendly_name: "Lock",
+    device_class: "lock",
+  }),
+  getEntity("lock", "unavailable", "unavailable", {
+    friendly_name: "Unavailable lock",
+  }),
+];
+
+@customElement("demo-more-info-lock")
+class DemoMoreInfoLock extends LitElement {
+  @property() 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-lock": DemoMoreInfoLock;
+  }
+}
@@ -0,0 +1,3 @@
+---
+title: Media Player
+---
@@ -0,0 +1,41 @@
+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 {
+  MockHomeAssistant,
+  provideHass,
+} from "../../../../src/fake_data/provide_hass";
+import "../../components/demo-more-infos";
+import { createMediaPlayerEntities } from "../../data/media_players";
+
+const ENTITIES = createMediaPlayerEntities();
+
+@customElement("demo-more-info-media-player")
+class DemoMoreInfoMediaPlayer extends LitElement {
+  @property() 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-media-player": DemoMoreInfoMediaPlayer;
+  }
+}
@@ -0,0 +1,3 @@
+---
+title: Number
+---
@@ -0,0 +1,78 @@
+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("number", "box1", 0, {
+    friendly_name: "Box1",
+    min: 0,
+    max: 100,
+    step: 1,
+    initial: 0,
+    mode: "box",
+    unit_of_measurement: "items",
+  }),
+  getEntity("number", "slider1", 0, {
+    friendly_name: "Slider1",
+    min: 0,
+    max: 100,
+    step: 1,
+    initial: 0,
+    mode: "slider",
+    unit_of_measurement: "items",
+  }),
+  getEntity("number", "auto1", 0, {
+    friendly_name: "Auto1",
+    min: 0,
+    max: 1000,
+    step: 1,
+    initial: 0,
+    mode: "auto",
+    unit_of_measurement: "items",
+  }),
+  getEntity("number", "auto2", 0, {
+    friendly_name: "Auto2",
+    min: 0,
+    max: 100,
+    step: 1,
+    initial: 0,
+    mode: "auto",
+    unit_of_measurement: "items",
+  }),
+];
+
+@customElement("demo-more-info-number")
+class DemoMoreInfoNumber extends LitElement {
+  @property() 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-number": DemoMoreInfoNumber;
+  }
+}
@@ -0,0 +1,3 @@
+---
+title: Scene
+---
@@ -0,0 +1,49 @@
+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("scene", "romantic_lights", "scening", {
+    entity_id: ["light.bed_light", "light.ceiling_lights"],
+    friendly_name: "Romantic Scene",
+  }),
+  getEntity("scene", "unavailable", "unavailable", {
+    friendly_name: "Romantic Scene",
+  }),
+];
+
+@customElement("demo-more-info-scene")
+class DemoMoreInfoScene extends LitElement {
+  @property() 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-scene": DemoMoreInfoScene;
+  }
+}
@@ -0,0 +1,3 @@
+---
+title: Timer
+---
@@ -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("timer", "timer", "idle", {
+    friendly_name: "Timer",
+    duration: "0:05:00",
+  }),
+];
+
+@customElement("demo-more-info-timer")
+class DemoMoreInfoTimer extends LitElement {
+  @property() 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-timer": DemoMoreInfoTimer;
+  }
+}
@@ -1,12 +1,6 @@
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import "../../../../src/components/ha-card";
-import {
-  UPDATE_SUPPORT_BACKUP,
-  UPDATE_SUPPORT_PROGRESS,
-  UPDATE_SUPPORT_INSTALL,
-  UPDATE_SUPPORT_RELEASE_NOTES,
-} from "../../../../src/data/update";
 import "../../../../src/dialogs/more-info/more-info-content";
 import { getEntity } from "../../../../src/fake_data/entity";
 import {
@@ -15,13 +9,14 @@ import {
 } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-more-infos";
 import { LONG_TEXT } from "../../data/text";
+import { UpdateEntityFeature } from "../../../../src/data/update";

 const base_attributes = {
  title: "Awesome",
  installed_version: "1.2.2",
  latest_version: "1.2.3",
  release_url: "https://home-assistant.io",
-  supported_features: UPDATE_SUPPORT_INSTALL,
+  supported_features: UpdateEntityFeature.INSTALL,
  skipped_version: null,
  in_progress: false,
  release_summary:
@@ -61,7 +56,7 @@ const ENTITIES = [
  getEntity("update", "update7", "on", {
    ...base_attributes,
    supported_features:
-      base_attributes.supported_features + UPDATE_SUPPORT_BACKUP,
+      base_attributes.supported_features + UpdateEntityFeature.BACKUP,
    friendly_name: "With backup support",
  }),
  getEntity("update", "update8", "on", {
@@ -73,21 +68,21 @@ const ENTITIES = [
    ...base_attributes,
    in_progress: 25,
    supported_features:
-      base_attributes.supported_features + UPDATE_SUPPORT_PROGRESS,
+      base_attributes.supported_features + UpdateEntityFeature.PROGRESS,
    friendly_name: "With 25 in_progress",
  }),
  getEntity("update", "update10", "on", {
    ...base_attributes,
    in_progress: 50,
    supported_features:
-      base_attributes.supported_features + UPDATE_SUPPORT_PROGRESS,
+      base_attributes.supported_features + UpdateEntityFeature.PROGRESS,
    friendly_name: "With 50 in_progress",
  }),
  getEntity("update", "update11", "on", {
    ...base_attributes,
    in_progress: 75,
    supported_features:
-      base_attributes.supported_features + UPDATE_SUPPORT_PROGRESS,
+      base_attributes.supported_features + UpdateEntityFeature.PROGRESS,
    friendly_name: "With 75 in_progress",
  }),
  getEntity("update", "update12", "unavailable", {
@@ -114,19 +109,19 @@ const ENTITIES = [
    ...base_attributes,
    friendly_name: "Update with release notes",
    supported_features:
-      base_attributes.supported_features + UPDATE_SUPPORT_RELEASE_NOTES,
+      base_attributes.supported_features + UpdateEntityFeature.RELEASE_NOTES,
  }),
  getEntity("update", "update17", "off", {
    ...base_attributes,
    friendly_name: "Update with release notes error",
    supported_features:
-      base_attributes.supported_features + UPDATE_SUPPORT_RELEASE_NOTES,
+      base_attributes.supported_features + UpdateEntityFeature.RELEASE_NOTES,
  }),
  getEntity("update", "update18", "off", {
    ...base_attributes,
    friendly_name: "Update with release notes loading",
    supported_features:
-      base_attributes.supported_features + UPDATE_SUPPORT_RELEASE_NOTES,
+      base_attributes.supported_features + UpdateEntityFeature.RELEASE_NOTES,
  }),
  getEntity("update", "update19", "on", {
    ...base_attributes,
@@ -142,9 +137,10 @@ const ENTITIES = [
  getEntity("update", "update21", "on", {
    ...base_attributes,
    in_progress: true,
-    friendly_name: "Update with in_progress true and UPDATE_SUPPORT_PROGRESS",
+    friendly_name:
+      "Update with in_progress true and  UpdateEntityFeature.PROGRESS",
    supported_features:
-      base_attributes.supported_features + UPDATE_SUPPORT_PROGRESS,
+      base_attributes.supported_features + UpdateEntityFeature.PROGRESS,
  }),
 ];

@@ -0,0 +1,3 @@
+---
+title: Vacuum
+---
@@ -0,0 +1,50 @@
+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";
+import { VacuumEntityFeature } from "../../../../src/data/vacuum";
+
+const ENTITIES = [
+  getEntity("vacuum", "first_floor_vacuum", "docked", {
+    friendly_name: "First floor vacuum",
+    supported_features:
+      VacuumEntityFeature.START +
+      VacuumEntityFeature.STOP +
+      VacuumEntityFeature.RETURN_HOME,
+  }),
+];
+
+@customElement("demo-more-info-vacuum")
+class DemoMoreInfoVacuum extends LitElement {
+  @property() 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-vacuum": DemoMoreInfoVacuum;
+  }
+}
@@ -49,11 +49,9 @@ export class HassioAddonRepositoryEl extends LitElement {
      return html`
        <div class="content">
          <p class="description">
-            ${this.supervisor.localize(
-              "store.no_results_found",
-              "repository",
-              repo.name
-            )}
+            ${this.supervisor.localize("store.no_results_found", {
+              repository: repo.name,
+            })}
          </p>
        </div>
      `;
@@ -86,15 +84,15 @@ export class HassioAddonRepositoryEl extends LitElement {
                          )
                        : this.supervisor.localize("addon.state.installed")
                      : addon.available
-                      ? this.supervisor.localize("addon.state.not_installed")
-                      : this.supervisor.localize("addon.state.not_available")}
+                        ? this.supervisor.localize("addon.state.not_installed")
+                        : this.supervisor.localize("addon.state.not_available")}
                    .iconClass=${addon.installed
                      ? addon.update_available
                        ? "update"
                        : "installed"
                      : !addon.available
-                      ? "not_available"
-                      : ""}
+                        ? "not_available"
+                        : ""}
                    .iconImage=${atLeastVersion(
                      this.hass.config.version,
                      0,
@@ -108,8 +106,8 @@ export class HassioAddonRepositoryEl extends LitElement {
                        ? "update"
                        : "installed"
                      : !addon.available
-                      ? "unavailable"
-                      : ""}
+                        ? "unavailable"
+                        : ""}
                  ></hassio-card-content>
                </div>
              </ha-card>
@@ -20,7 +20,7 @@ class HassioAddonConfigDashboard extends LitElement {

  protected render(): TemplateResult {
    if (!this.addon) {
-      return html`<ha-circular-progress active></ha-circular-progress>`;
+      return html`<ha-circular-progress indeterminate></ha-circular-progress>`;
    }
    const hasConfiguration =
      (this.addon.options && Object.keys(this.addon.options).length) ||
--- a/Show More
+++ b/Show More