Delay display of init page

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,7 +2,9 @@
   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.
@@ -11,8 +13,8 @@
   Note: Remove this section if this PR is NOT a breaking 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
@@ -20,8 +22,8 @@
   in the additional information section.
 -->
 
-
 ## Type of change
+
 <!--
   What type of change does your PR introduce to the Home Assistant frontend?
   NOTE: Please, check only 1! box!
@@ -36,6 +38,7 @@
 - [ ] 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.
@@ -46,6 +49,7 @@
 ```
 
 ## Additional information
+
 <!--
   Details are important, and help maintainers processing your PR.
   Please be sure to fill out additional details, if applicable.
@@ -56,6 +60,7 @@
 - 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.

.github/workflows/cast_deployment.yaml

@@ -21,12 +21,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4.0.0
         with:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@v4.0.0
+        uses: actions/setup-node@v3.8.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.1.1
+        uses: actions/checkout@v4.0.0
         with:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@v4.0.0
+        uses: actions/setup-node@v3.8.1
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/ci.yaml

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

.github/workflows/codeql-analysis.yml

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

.github/workflows/demo_deployment.yaml

@@ -22,12 +22,12 @@ jobs:
       url: ${{ steps.deploy.outputs.NETLIFY_LIVE_URL || steps.deploy.outputs.NETLIFY_URL }}
     steps:
       - name: Check out files from GitHub
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4.0.0
         with:
           ref: dev
 
       - name: Setup Node
-        uses: actions/setup-node@v4.0.0
+        uses: actions/setup-node@v3.8.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.1.1
+        uses: actions/checkout@v4.0.0
         with:
           ref: master
 
       - name: Setup Node
-        uses: actions/setup-node@v4.0.0
+        uses: actions/setup-node@v3.8.1
         with:
           node-version-file: ".nvmrc"
           cache: yarn

.github/workflows/design_deployment.yaml

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

.github/workflows/design_preview.yaml

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

.github/workflows/nightly.yaml

@@ -20,7 +20,7 @@ jobs:
       contents: write
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4.0.0
 
       - name: Set up Python ${{ env.PYTHON_VERSION }}
         uses: actions/setup-python@v4
@@ -28,7 +28,7 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Setup Node
-        uses: actions/setup-node@v4.0.0
+        uses: actions/setup-node@v3.8.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.1.3
+        uses: actions/upload-artifact@v3
         with:
           name: wheels
           path: dist/home_assistant_frontend*.whl
           if-no-files-found: error
 
       - name: Upload translations
-        uses: actions/upload-artifact@v3.1.3
+        uses: actions/upload-artifact@v3
         with:
           name: translations
           path: translations.tar.gz

.github/workflows/relative-ci.yaml

@@ -1,25 +0,0 @@
-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/agent-action@v2.1.10
-        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) }}

.github/workflows/release.yaml

@@ -23,7 +23,7 @@ jobs:
       contents: write # Required to upload release assets
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v4.1.1
+        uses: actions/checkout@v4.0.0
 
       - name: Verify version
         uses: home-assistant/actions/helpers/verify-version@master
@@ -34,7 +34,7 @@ jobs:
           python-version: ${{ env.PYTHON_VERSION }}
 
       - name: Setup Node
-        uses: actions/setup-node@v4.0.0
+        uses: actions/setup-node@v3.8.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.10.5
+        uses: home-assistant/wheels@2023.04.0
         with:
           abi: cp311
           tag: musllinux_1_2

.github/workflows/translations.yaml

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

.gitignore

@@ -47,6 +47,3 @@ src/cast/dev_const.ts
 
 # Home Assistant config
 /config/
-
-# Jetbrains
-/.idea/

.nvmrc

@@ -1 +1 @@
-lts/iron
+18

.prettierignore

@@ -1,4 +1,3 @@
 CLA.md
 CODE_OF_CONDUCT.md
 LICENSE.md
-PULL_REQUEST_TEMPLATE.md

.yarnrc.yml

@@ -1,9 +1,11 @@
-compressionLevel: mixed
-
 defaultSemverRangePrefix: ""
 
-enableGlobalCache: false
-
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.0.1.cjs
+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

build-scripts/bundle.cjs

@@ -12,7 +12,11 @@ module.exports.sourceMapURL = () => {
 };
 
 // Files from NPM Packages that should not be imported
-module.exports.ignorePackages = () => [];
+// 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"),
+];
 
 // Files from NPM packages that we should replace with empty file
 module.exports.emptyPackages = ({ latestBuild, isHassioBuild }) =>
@@ -94,7 +98,7 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
       "@babel/preset-env",
       {
         useBuiltIns: latestBuild ? false : "entry",
-        corejs: latestBuild ? false : { version: "3.33", proposals: true },
+        corejs: latestBuild ? false : { version: "3.32", proposals: true },
         bugfixes: true,
         shippedProposals: true,
       },
@@ -145,7 +149,7 @@ module.exports.babelOptions = ({ latestBuild, isProdBuild, isTestBuild }) => ({
   sourceMaps: !isTestBuild,
 });
 
-const nameSuffix = (latestBuild) => (latestBuild ? "-modern" : "-legacy");
+const nameSuffix = (latestBuild) => (latestBuild ? "-latest" : "-es5");
 
 const outputPath = (outputRoot, latestBuild) =>
   path.resolve(outputRoot, latestBuild ? "frontend_latest" : "frontend_es5");
@@ -179,7 +183,7 @@ const publicPath = (latestBuild, root = "") =>
 module.exports.config = {
   app({ isProdBuild, latestBuild, isStatsBuild, isTestBuild, isWDS }) {
     return {
-      name: "frontend" + nameSuffix(latestBuild),
+      name: "app" + nameSuffix(latestBuild),
       entry: {
         service_worker: "./src/entrypoints/service_worker.ts",
         app: "./src/entrypoints/app.ts",

build-scripts/gulp/app.js

@@ -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"])
+    ...(env.isTestBuild() ? [] : ["compress-app"]),
+    gulp.parallel("gen-pages-app-prod", "gen-service-worker-app-prod")
   )
 );

build-scripts/gulp/gather-static.js

@@ -4,7 +4,6 @@ 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);
@@ -63,9 +62,6 @@ 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"));

build-scripts/gulp/locale-data.js

@@ -1,54 +1,51 @@
 import { deleteSync } from "del";
 import { mkdir, readFile, writeFile } from "fs/promises";
 import gulp from "gulp";
-import { join, resolve } from "node:path";
+import path from "path";
 import paths from "../paths.cjs";
 
-const formatjsDir = join(paths.polymer_dir, "node_modules", "@formatjs");
-const outDir = join(paths.build_dir, "locale-data");
+const outDir = path.join(paths.build_dir, "locale-data");
 
-const INTL_POLYFILLS = {
+const INTL_PACKAGES = {
+  "intl-relativetimeformat": "RelativeTimeFormat",
   "intl-datetimeformat": "DateTimeFormat",
+  "intl-numberformat": "NumberFormat",
   "intl-displaynames": "DisplayNames",
   "intl-listformat": "ListFormat",
-  "intl-numberformat": "NumberFormat",
-  "intl-relativetimeformat": "RelativeTimeFormat",
 };
 
-const convertToJSON = async (
-  pkg,
-  lang,
-  subDir = "locale-data",
-  addFunc = "__addLocaleData",
-  skipMissing = true
-) => {
+const convertToJSON = async (pkg, lang) => {
   let localeData;
   try {
     localeData = await readFile(
-      join(formatjsDir, pkg, subDir, `${lang}.js`),
+      path.resolve(
+        paths.polymer_dir,
+        `node_modules/@formatjs/${pkg}/locale-data/${lang}.js`
+      ),
       "utf-8"
     );
   } catch (e) {
     // Ignore if language is missing (i.e. not supported by @formatjs)
-    if (e.code === "ENOENT" && skipMissing) {
-      console.warn(`Skipped missing data for language ${lang} from ${pkg}`);
+    if (e.code === "ENOENT") {
       return;
+    } else {
+      throw e;
     }
-    throw e;
   }
   // Convert to JSON
-  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}`);
-  }
+  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, "");
   // Parse to validate JSON, then stringify to minify
   localeData = JSON.stringify(JSON.parse(localeData));
-  await writeFile(join(outDir, `${pkg}/${lang}.json`), localeData);
+  await writeFile(path.join(outDir, `${pkg}/${lang}.json`), localeData);
 };
 
 gulp.task("clean-locale-data", async () => deleteSync([outDir]));
@@ -56,27 +53,17 @@ gulp.task("clean-locale-data", async () => deleteSync([outDir]));
 gulp.task("create-locale-data", async () => {
   const translationMeta = JSON.parse(
     await readFile(
-      resolve(paths.translations_src, "translationMetadata.json"),
+      path.resolve(paths.translations_src, "translationMetadata.json"),
       "utf-8"
     )
   );
   const conversions = [];
-  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 pkg of Object.keys(INTL_PACKAGES)) {
+    await mkdir(path.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);
 });
 

build-scripts/gulp/translations.js

@@ -1,7 +1,12 @@
 import { createHash } from "crypto";
 import { deleteSync } from "del";
-import { mkdirSync, readdirSync, readFileSync, renameSync } from "fs";
-import { writeFile } from "node:fs/promises";
+import {
+  mkdirSync,
+  readdirSync,
+  readFileSync,
+  renameSync,
+  writeFile,
+} from "fs";
 import gulp from "gulp";
 import flatmap from "gulp-flatmap";
 import transform from "gulp-json-transform";
@@ -131,23 +136,27 @@ gulp.task("ensure-translations-build-dir", async () => {
   mkdirSync(workDir, { recursive: true });
 });
 
-gulp.task("create-test-metadata", () =>
-  env.isProdBuild()
-    ? Promise.resolve()
-    : writeFile(
-        workDir + "/testMetadata.json",
-        JSON.stringify({ test: { nativeName: "Test" } })
-      )
-);
+gulp.task("create-test-metadata", (cb) => {
+  writeFile(
+    workDir + "/testMetadata.json",
+    JSON.stringify({
+      test: {
+        nativeName: "Test",
+      },
+    }),
+    cb
+  );
+});
 
-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))
+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))
+  )
 );
 
 /**
@@ -179,11 +188,16 @@ gulp.task("build-master-translation", () => {
 
 gulp.task("build-merged-translations", () =>
   gulp
-    .src([
-      inFrontendDir + "/*.json",
-      "!" + inFrontendDir + "/en.json",
-      ...(env.isProdBuild() ? [] : [workDir + "/test.json"]),
-    ])
+    .src(
+      [
+        inFrontendDir + "/*.json",
+        "!" + inFrontendDir + "/en.json",
+        workDir + "/test.json",
+      ],
+      {
+        allowEmpty: true,
+      }
+    )
     .pipe(transform((data, file) => lokaliseTransform(data, data, file)))
     .pipe(
       flatmap((stream, file) => {
@@ -363,11 +377,14 @@ gulp.task("build-translation-flatten-supervisor", () =>
 
 gulp.task("build-translation-write-metadata", () =>
   gulp
-    .src([
-      path.join(paths.translations_src, "translationMetadata.json"),
-      ...(env.isProdBuild() ? [] : [workDir + "/testMetadata.json"]),
-      workDir + "/translationFingerprints.json",
-    ])
+    .src(
+      [
+        path.join(paths.translations_src, "translationMetadata.json"),
+        workDir + "/testMetadata.json",
+        workDir + "/translationFingerprints.json",
+      ],
+      { allowEmpty: true }
+    )
     .pipe(merge({}))
     .pipe(
       transform((data) => {
@@ -398,7 +415,7 @@ gulp.task("build-translation-write-metadata", () =>
 gulp.task(
   "create-translations",
   gulp.series(
-    gulp.parallel("create-test-metadata", "create-test-translation"),
+    ...(env.isProdBuild() ? [] : ["create-test-translation"]),
     "build-master-translation",
     "build-merged-translations",
     gulp.parallel(...splitTasks),

build-scripts/webpack.cjs

@@ -1,8 +1,6 @@
 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");
@@ -154,15 +152,6 @@ 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"],
@@ -176,14 +165,11 @@ 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: {
@@ -196,7 +182,6 @@ const createWebpackConfig = ({
         isProdBuild && !isStatsBuild ? "[id]-[contenthash].js" : "[name].js",
       assetModuleFilename:
         isProdBuild && !isStatsBuild ? "[id]-[contenthash][ext]" : "[id][ext]",
-      crossOriginLoading: "use-credentials",
       hashFunction: "xxhash64",
       hashDigest: "base64url",
       hashDigestLength: 11, // full length of 64 bit base64url

cast/src/launcher/entrypoint.ts

@@ -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");

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

@@ -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 { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { CastManager } from "../../../../src/cast/cast_manager";
 import {
@@ -22,9 +22,8 @@ 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";
@@ -39,10 +38,10 @@ class HcCast extends LitElement {
 
   @state() private askWrite = false;
 
-  @state() private lovelaceViews?: LovelaceViewConfig[] | null;
+  @state() private lovelaceConfig?: LovelaceConfig | null;
 
   protected render(): TemplateResult {
-    if (this.lovelaceViews === undefined) {
+    if (this.lovelaceConfig === undefined) {
       return html`<hass-loading-screen no-toolbar></hass-loading-screen>`;
     }
 
@@ -87,10 +86,9 @@ class HcCast extends LitElement {
                 attr-for-selected="data-path"
                 .selected=${this.castManager.status.lovelacePath || ""}
               >
-                ${(
-                  this.lovelaceViews ?? [
-                    generateDefaultViewConfig({}, {}, {}, {}, () => ""),
-                  ]
+                ${(this.lovelaceConfig
+                  ? this.lovelaceConfig.views
+                  : [generateDefaultViewConfig({}, {}, {}, {}, () => "")]
                 ).map(
                   (view, idx) => html`
                     <paper-icon-item
@@ -138,15 +136,11 @@ class HcCast extends LitElement {
     llColl.refresh().then(
       () => {
         llColl.subscribe((config) => {
-          if (isStrategyDashboard(config)) {
-            this.lovelaceViews = null;
-          } else {
-            this.lovelaceViews = config.views;
-          }
+          this.lovelaceConfig = config;
         });
       },
       async () => {
-        this.lovelaceViews = null;
+        this.lovelaceConfig = null;
       }
     );
 
@@ -165,7 +159,9 @@ class HcCast extends LitElement {
     toggleAttribute(
       this,
       "hide-icons",
-      this.lovelaceViews ? !this.lovelaceViews.some((view) => view.icon) : true
+      this.lovelaceConfig
+        ? !this.lovelaceConfig.views.some((view) => view.icon)
+        : true
     );
   }
 

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

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

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

@@ -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/config/types";
+import { LovelaceConfig } from "../../../../src/data/lovelace";
 import {
   MockHomeAssistant,
   provideHass,

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

@@ -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/config/types";
+import { LovelaceConfig } from "../../../../src/data/lovelace";
 import { Lovelace } from "../../../../src/panels/lovelace/types";
 import "../../../../src/panels/lovelace/views/hui-view";
 import { HomeAssistant } from "../../../../src/types";
@@ -14,8 +14,7 @@ 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;
 

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

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

cast/src/receiver/second-load.ts

@@ -0,0 +1,3 @@
+import "../../../src/resources/ha-style";
+import "../../../src/resources/roboto";
+import "./layout/hc-lovelace";

demo/public/manifest.json

@@ -8,67 +8,25 @@
       "src": "/static/icons/favicon-192x192.png",
       "sizes": "192x192",
       "type": "image/png",
-      "purpose": "any"
+      "purpose": "maskable any"
     },
     {
       "src": "/static/icons/favicon-384x384.png",
       "sizes": "384x384",
       "type": "image/png",
-      "purpose": "any"
+      "purpose": "maskable any"
     },
     {
       "src": "/static/icons/favicon-512x512.png",
       "sizes": "512x512",
       "type": "image/png",
-      "purpose": "any"
+      "purpose": "maskable any"
     },
     {
       "src": "/static/icons/favicon-1024x1024.png",
       "sizes": "1024x1024",
       "type": "image/png",
-      "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"
+      "purpose": "maskable any"
     }
   ],
   "lang": "en-US",

demo/src/configs/arsaboo/entities.ts

@@ -3,15 +3,6 @@ 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",

demo/src/configs/jimpower/entities.ts

@@ -3,15 +3,6 @@ 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",

demo/src/configs/jimpower/theme.ts

@@ -4,11 +4,16 @@ 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",
@@ -27,10 +32,14 @@ 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",

demo/src/configs/kernehed/entities.ts

@@ -3,15 +3,6 @@ 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",

demo/src/configs/kernehed/theme.ts

@@ -5,12 +5,17 @@ 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",
@@ -28,10 +33,14 @@ 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",

demo/src/configs/teachingbirds/entities.ts

@@ -3,15 +3,6 @@ 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: "",

demo/src/configs/teachingbirds/lovelace.ts

@@ -220,8 +220,7 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
           state_filter: ["on"],
         },
         {
-          type: "todo-list",
-          entity: "todo.shopping_list",
+          type: "shopping-list",
         },
         {
           entities: [

demo/src/configs/teachingbirds/theme.ts

@@ -1,5 +1,6 @@
 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",
@@ -7,6 +8,8 @@ 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)",
@@ -14,7 +17,9 @@ 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",

demo/src/configs/types.ts

@@ -1,5 +1,5 @@
 import { LocalizeFunc } from "../../../src/common/translations/localize";
-import { LovelaceConfig } from "../../../src/data/lovelace/config/types";
+import { LovelaceConfig } from "../../../src/data/lovelace";
 import { Entity } from "../../../src/fake_data/entity";
 
 export interface DemoConfig {

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

@@ -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/config/card";
+import { LovelaceCardConfig } from "../../../src/data/lovelace";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import { Lovelace, LovelaceCard } from "../../../src/panels/lovelace/types";
 import {

demo/src/entrypoint.ts

@@ -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");

demo/src/ha-demo.ts

@@ -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 { mockTodo } from "./stubs/todo";
+import { mockShoppingList } from "./stubs/shopping_list";
 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);
-    mockTodo(hass);
+    mockShoppingList(hass);
     mockSystemLog(hass);
     mockTemplate(hass);
     mockEvents(hass);

demo/src/html/index.html.template

@@ -62,24 +62,10 @@
         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 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>
+    <div id="ha-launch-screen"></div>
     <ha-demo></ha-demo>
     <%= renderTemplate("../../../src/html/_js_base.html.template") %>
     <%= renderTemplate("../../../src/html/_preload_roboto.html.template") %>

demo/src/stubs/shopping_list.ts

@@ -0,0 +1,44 @@
+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");
+  });
+};

demo/src/stubs/todo.ts

@@ -1,24 +0,0 @@
-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[],
-  }));
-};

gallery/src/entrypoint.js

@@ -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"));

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

@@ -1,17 +1,19 @@
-import { css, html, LitElement, TemplateResult, nothing } from "lit";
+import { mdiHomeAssistant } from "@mdi/js";
+import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import "../../../../src/components/ha-card";
-import "../../../../src/components/chips/ha-chip-set";
-import "../../../../src/components/chips/ha-assist-chip";
-import "../../../../src/components/chips/ha-input-chip";
-import "../../../../src/components/chips/ha-filter-chip";
+import "../../../../src/components/ha-chip";
+import "../../../../src/components/ha-chip-set";
 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",
   },
@@ -27,73 +29,31 @@ export class DemoHaChips extends LitElement {
     return html`
       <ha-card header="ha-chip demo">
         <div class="card-content">
-          <p>Action chip</p>
+          ${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">
           <ha-chip-set>
             ${chips.map(
               (chip) => html`
-                <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}>
+                <ha-chip .hasIcon=${chip.icon !== undefined}>
                   ${chip.icon
                     ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
                       </ha-svg-icon>`
                     : ""}
                   ${chip.content}
-                </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>
               `
             )}
           </ha-chip-set>
@@ -108,10 +68,12 @@ 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;
       }
     `;
   }

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

@@ -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>

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

@@ -11,7 +11,6 @@ const buttons: {
   min?: number;
   max?: number;
   step?: number;
-  unit?: string;
   class?: string;
 }[] = [
   {
@@ -30,11 +29,6 @@ const buttons: {
     label: "Custom",
     class: "custom",
   },
-  {
-    id: "unit",
-    label: "With unit",
-    unit: "m",
-  },
 ];
 
 @customElement("demo-components-ha-control-number-buttons")
@@ -56,7 +50,6 @@ 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}

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

@@ -9,7 +9,6 @@ const sliders: {
   id: string;
   label: string;
   mode?: "start" | "end" | "cursor";
-  unit?: string;
   class?: string;
 }[] = [
   {
@@ -32,21 +31,18 @@ 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",
   },
 ];
 
@@ -97,7 +93,6 @@ export class DemoHaBarSlider extends LitElement {
                 @value-changed=${this.handleValueChanged}
                 @slider-moved=${this.handleSliderMoved}
                 aria-labelledby=${id}
-                .unit=${config.unit}
               >
               </ha-control-slider>
             </div>
@@ -119,7 +114,6 @@ export class DemoHaBarSlider extends LitElement {
                   @value-changed=${this.handleValueChanged}
                   @slider-moved=${this.handleSliderMoved}
                   aria-label=${label}
-                  .unit=${config.unit}
                 >
                 </ha-control-slider>
               `;

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

@@ -5,22 +5,9 @@ subtitle: Dialogs provide important prompts in a user flow.
 
 # Material Design 3
 
-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).
+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).
 
-# 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.
+# Highlighted guidelines
 
 ## Content
 
@@ -30,6 +17,14 @@ Our dialogs are based on the latest version of Material Design. Please note that
 - 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

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

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

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

@@ -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}

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

@@ -53,7 +53,6 @@ const DEVICES = [
     sw_version: null,
     hw_version: null,
     via_device_id: null,
-    serial_number: null,
   },
   {
     area_id: "backyard",
@@ -71,7 +70,6 @@ const DEVICES = [
     sw_version: null,
     hw_version: null,
     via_device_id: null,
-    serial_number: null,
   },
   {
     area_id: null,
@@ -89,7 +87,6 @@ const DEVICES = [
     sw_version: null,
     hw_version: null,
     via_device_id: null,
-    serial_number: null,
   },
 ];
 

gallery/src/pages/lovelace/shopping-list-card.markdown

@@ -0,0 +1,3 @@
+---
+title: Shopping List Card
+---

gallery/src/pages/lovelace/shopping-list-card.ts

@@ -2,39 +2,25 @@ 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: todo-list
-  entity: todo.shopping_list
+- type: shopping-list
     `,
   },
   {
     heading: "List with title example",
     config: `
-- type: todo-list
+- type: shopping-list
   title: Shopping List
-  entity: todo.read_only
     `,
   },
 ];
 
-@customElement("demo-lovelace-todo-list-card")
-class DemoTodoListEntity extends LitElement {
+@customElement("demo-lovelace-shopping-list-card")
+class DemoShoppingListEntity extends LitElement {
   @query("#demos") private _demoRoot!: HTMLElement;
 
   protected render(): TemplateResult {
@@ -46,14 +32,18 @@ class DemoTodoListEntity extends LitElement {
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");
     hass.updateTranslations("lovelace", "en");
-    hass.addEntities(ENTITIES);
 
-    mockTodo(hass);
+    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 },
+    ]);
   }
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-lovelace-todo-list-card": DemoTodoListEntity;
+    "demo-lovelace-shopping-list-card": DemoShoppingListEntity;
   }
 }

gallery/src/pages/lovelace/todo-list-card.markdown

@@ -1,3 +0,0 @@
----
-title: Todo List Card
----

gallery/src/pages/misc/entity-state.ts

@@ -10,6 +10,7 @@ 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";
 

gallery/src/pages/misc/integration-card.ts

@@ -213,7 +213,6 @@ 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,

gallery/src/pages/misc/util-long-press.ts

@@ -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/action_handler";
+import { ActionHandlerEvent } from "../../../../src/data/lovelace";
 import { actionHandler } from "../../../../src/panels/lovelace/common/directives/action-handler-directive";
 
 @customElement("demo-misc-util-long-press")

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -7,6 +7,7 @@ import {
   mdiDocker,
   mdiExclamationThick,
   mdiFlask,
+  mdiHomeAssistant,
   mdiKey,
   mdiLinkLock,
   mdiNetwork,
@@ -21,7 +22,7 @@ import {
   mdiPound,
   mdiShield,
 } from "@mdi/js";
-import { CSSResultGroup, LitElement, TemplateResult, css, html } from "lit";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
@@ -31,19 +32,19 @@ import { navigate } from "../../../../src/common/navigate";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
-import "../../../../src/components/chips/ha-chip-set";
-import "../../../../src/components/chips/ha-assist-chip";
+import "../../../../src/components/ha-chip";
+import "../../../../src/components/ha-chip-set";
 import "../../../../src/components/ha-markdown";
 import "../../../../src/components/ha-settings-row";
 import "../../../../src/components/ha-svg-icon";
 import "../../../../src/components/ha-switch";
 import {
   AddonCapability,
+  fetchHassioAddonChangelog,
+  fetchHassioAddonInfo,
   HassioAddonDetails,
   HassioAddonSetOptionParams,
   HassioAddonSetSecurityParams,
-  fetchHassioAddonChangelog,
-  fetchHassioAddonInfo,
   installHassioAddon,
   rebuildLocalAddon,
   restartHassioAddon,
@@ -55,9 +56,9 @@ import {
   validateHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
 import {
-  HassioStats,
   extractApiErrorMessage,
   fetchHassioStats,
+  HassioStats,
 } from "../../../../src/data/hassio/common";
 import {
   StoreAddon,
@@ -68,7 +69,6 @@ import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../../../src/dialogs/generic/show-dialog-box";
-import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../../src/types";
 import { bytesToString } from "../../../../src/util/bytes-to-string";
@@ -78,7 +78,6 @@ import { showHassioMarkdownDialog } from "../../dialogs/markdown/show-dialog-has
 import { hassioStyle } from "../../resources/hassio-style";
 import "../../update-available/update-available-card";
 import { addonArchIsSupported, extractChangelog } from "../../util/addon";
-import { capitalizeFirstLetter } from "../../../../src/common/string/capitalize-first-letter";
 
 const STAGE_ICON = {
   stable: mdiCheckCircle,
@@ -235,32 +234,28 @@ class HassioAddonInfo extends LitElement {
 
           <ha-chip-set class="capabilities">
             ${this.addon.stage !== "stable"
-              ? html`
-                  <ha-assist-chip
-                    filled
-                    class=${classMap({
-                      yellow: this.addon.stage === "experimental",
-                      red: this.addon.stage === "deprecated",
-                    })}
-                    @click=${this._showMoreInfo}
-                    id="stage"
-                    .label=${capitalizeFirstLetter(
-                      this.supervisor.localize(
-                        `addon.dashboard.capability.stages.${this.addon.stage}`
-                      )
-                    )}
+              ? html` <ha-chip
+                  hasIcon
+                  class=${classMap({
+                    yellow: this.addon.stage === "experimental",
+                    red: this.addon.stage === "deprecated",
+                  })}
+                  @click=${this._showMoreInfo}
+                  id="stage"
+                >
+                  <ha-svg-icon
+                    slot="icon"
+                    .path=${STAGE_ICON[this.addon.stage]}
                   >
-                    <ha-svg-icon
-                      slot="icon"
-                      .path=${STAGE_ICON[this.addon.stage]}
-                    >
-                    </ha-svg-icon>
-                  </ha-assist-chip>
-                `
+                  </ha-svg-icon>
+                  ${this.supervisor.localize(
+                    `addon.dashboard.capability.stages.${this.addon.stage}`
+                  )}
+                </ha-chip>`
               : ""}
 
-            <ha-assist-chip
-              filled
+            <ha-chip
+              hasIcon
               class=${classMap({
                 green: Number(this.addon.rating) >= 6,
                 yellow: [3, 4, 5].includes(Number(this.addon.rating)),
@@ -268,183 +263,138 @@ class HassioAddonInfo extends LitElement {
               })}
               @click=${this._showMoreInfo}
               id="rating"
-              .label=${capitalizeFirstLetter(
-                this.supervisor.localize(
-                  "addon.dashboard.capability.label.rating"
-                )
-              )}
             >
               <ha-svg-icon slot="icon" .path=${RATING_ICON[this.addon.rating]}>
               </ha-svg-icon>
-            </ha-assist-chip>
+
+              ${this.supervisor.localize(
+                "addon.dashboard.capability.label.rating"
+              )}
+            </ha-chip>
             ${this.addon.host_network
               ? html`
-                  <ha-assist-chip
-                    filled
+                  <ha-chip
+                    hasIcon
                     @click=${this._showMoreInfo}
                     id="host_network"
-                    .label=${capitalizeFirstLetter(
-                      this.supervisor.localize(
-                        "addon.dashboard.capability.label.host"
-                      )
-                    )}
                   >
                     <ha-svg-icon slot="icon" .path=${mdiNetwork}> </ha-svg-icon>
-                  </ha-assist-chip>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.host"
+                    )}
+                  </ha-chip>
                 `
               : ""}
             ${this.addon.full_access
               ? html`
-                  <ha-assist-chip
-                    filled
+                  <ha-chip
+                    hasIcon
                     @click=${this._showMoreInfo}
                     id="full_access"
-                    .label=${capitalizeFirstLetter(
-                      this.supervisor.localize(
-                        "addon.dashboard.capability.label.hardware"
-                      )
-                    )}
                   >
                     <ha-svg-icon slot="icon" .path=${mdiChip}></ha-svg-icon>
-                  </ha-assist-chip>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.hardware"
+                    )}
+                  </ha-chip>
                 `
               : ""}
             ${this.addon.homeassistant_api
               ? html`
-                  <ha-assist-chip
-                    filled
+                  <ha-chip
+                    hasIcon
                     @click=${this._showMoreInfo}
                     id="homeassistant_api"
-                    .label=${capitalizeFirstLetter(
-                      this.supervisor.localize(
-                        "addon.dashboard.capability.label.core"
-                      )
-                    )}
                   >
                     <ha-svg-icon
                       slot="icon"
                       .path=${mdiHomeAssistant}
                     ></ha-svg-icon>
-                  </ha-assist-chip>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.core"
+                    )}
+                  </ha-chip>
                 `
               : ""}
             ${this._computeHassioApi
               ? html`
-                  <ha-assist-chip
-                    filled
-                    @click=${this._showMoreInfo}
-                    id="hassio_api"
-                    .label=${capitalizeFirstLetter(
-                      this.supervisor.localize(
-                        `addon.dashboard.capability.role.${this.addon.hassio_role}`
-                      ) || this.addon.hassio_role
-                    )}
-                  >
+                  <ha-chip hasIcon @click=${this._showMoreInfo} id="hassio_api">
                     <ha-svg-icon
                       slot="icon"
                       .path=${mdiHomeAssistant}
                     ></ha-svg-icon>
-                  </ha-assist-chip>
+                    ${this.supervisor.localize(
+                      `addon.dashboard.capability.role.${this.addon.hassio_role}`
+                    ) || this.addon.hassio_role}
+                  </ha-chip>
                 `
               : ""}
             ${this.addon.docker_api
               ? html`
-                  <ha-assist-chip
-                    filled
-                    @click=${this._showMoreInfo}
-                    id="docker_api"
-                    .label=${capitalizeFirstLetter(
-                      this.supervisor.localize(
-                        "addon.dashboard.capability.label.docker"
-                      )
-                    )}
-                  >
+                  <ha-chip hasIcon @click=${this._showMoreInfo} id="docker_api">
                     <ha-svg-icon slot="icon" .path=${mdiDocker}></ha-svg-icon>
-                  </ha-assist-chip>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.docker"
+                    )}
+                  </ha-chip>
                 `
               : ""}
             ${this.addon.host_pid
               ? html`
-                  <ha-assist-chip
-                    filled
-                    @click=${this._showMoreInfo}
-                    id="host_pid"
-                    .label=${capitalizeFirstLetter(
-                      this.supervisor.localize(
-                        "addon.dashboard.capability.label.host_pid"
-                      )
-                    )}
-                  >
+                  <ha-chip hasIcon @click=${this._showMoreInfo} id="host_pid">
                     <ha-svg-icon slot="icon" .path=${mdiPound}></ha-svg-icon>
-                  </ha-assist-chip>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.host_pid"
+                    )}
+                  </ha-chip>
                 `
               : ""}
             ${this.addon.apparmor !== "default"
               ? html`
-                  <ha-assist-chip
-                    filled
+                  <ha-chip
+                    hasIcon
                     @click=${this._showMoreInfo}
                     class=${this._computeApparmorClassName}
                     id="apparmor"
-                    .label=${capitalizeFirstLetter(
-                      this.supervisor.localize(
-                        "addon.dashboard.capability.label.apparmor"
-                      )
-                    )}
                   >
                     <ha-svg-icon slot="icon" .path=${mdiShield}></ha-svg-icon>
-                  </ha-assist-chip>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.apparmor"
+                    )}
+                  </ha-chip>
                 `
               : ""}
             ${this.addon.auth_api
               ? html`
-                  <ha-assist-chip
-                    filled
-                    @click=${this._showMoreInfo}
-                    id="auth_api"
-                    .label=${capitalizeFirstLetter(
-                      this.supervisor.localize(
-                        "addon.dashboard.capability.label.auth"
-                      )
-                    )}
-                  >
+                  <ha-chip hasIcon @click=${this._showMoreInfo} id="auth_api">
                     <ha-svg-icon slot="icon" .path=${mdiKey}></ha-svg-icon>
-                  </ha-assist-chip>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.auth"
+                    )}
+                  </ha-chip>
                 `
               : ""}
             ${this.addon.ingress
               ? html`
-                  <ha-assist-chip
-                    filled
-                    @click=${this._showMoreInfo}
-                    id="ingress"
-                    .label=${capitalizeFirstLetter(
-                      this.supervisor.localize(
-                        "addon.dashboard.capability.label.ingress"
-                      )
-                    )}
-                  >
+                  <ha-chip hasIcon @click=${this._showMoreInfo} id="ingress">
                     <ha-svg-icon
                       slot="icon"
                       .path=${mdiCursorDefaultClickOutline}
                     ></ha-svg-icon>
-                  </ha-assist-chip>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.ingress"
+                    )}
+                  </ha-chip>
                 `
               : ""}
             ${this.addon.signed
               ? html`
-                  <ha-assist-chip
-                    filled
-                    @click=${this._showMoreInfo}
-                    id="signed"
-                    .label=${capitalizeFirstLetter(
-                      this.supervisor.localize(
-                        "addon.dashboard.capability.label.signed"
-                      )
-                    )}
-                  >
+                  <ha-chip hasIcon @click=${this._showMoreInfo} id="signed">
                     <ha-svg-icon slot="icon" .path=${mdiLinkLock}></ha-svg-icon>
-                  </ha-assist-chip>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.signed"
+                    )}
+                  </ha-chip>
                 `
               : ""}
           </ha-chip-set>
@@ -1235,35 +1185,23 @@ class HassioAddonInfo extends LitElement {
         .description a {
           color: var(--primary-color);
         }
-        ha-assist-chip {
-          --md-sys-color-primary: var(--text-primary-color);
-          --md-sys-color-on-surface: var(--text-primary-color);
-          --ha-assist-chip-filled-container-color: var(--primary-color);
+        ha-chip {
+          text-transform: capitalize;
+          --ha-chip-text-color: var(--text-primary-color);
+          --ha-chip-background-color: var(--primary-color);
         }
 
         .red {
-          --ha-assist-chip-filled-container-color: var(
-            --label-badge-red,
-            #df4c1e
-          );
+          --ha-chip-background-color: var(--label-badge-red, #df4c1e);
         }
         .blue {
-          --ha-assist-chip-filled-container-color: var(
-            --label-badge-blue,
-            #039be5
-          );
+          --ha-chip-background-color: var(--label-badge-blue, #039be5);
         }
         .green {
-          --ha-assist-chip-filled-container-color: var(
-            --label-badge-green,
-            #0da035
-          );
+          --ha-chip-background-color: var(--label-badge-green, #0da035);
         }
         .yellow {
-          --ha-assist-chip-filled-container-color: var(
-            --label-badge-yellow,
-            #f4b400
-          );
+          --ha-chip-background-color: var(--label-badge-yellow, #f4b400);
         }
         .capabilities {
           margin-bottom: 16px;
@@ -1322,6 +1260,9 @@ class HassioAddonInfo extends LitElement {
         }
 
         @media (max-width: 720px) {
+          ha-chip {
+            line-height: 36px;
+          }
           .addon-options {
             max-width: 100%;
           }

hassio/src/backups/hassio-backups.ts

@@ -360,9 +360,11 @@ export class HassioBackups extends LitElement {
     if (this.supervisor!.info.state !== "running") {
       showAlertDialog(this, {
         title: this.supervisor!.localize("backup.could_not_create"),
-        text: this.supervisor!.localize("backup.create_blocked_not_running", {
-          state: this.supervisor!.info.state,
-        }),
+        text: this.supervisor!.localize(
+          "backup.create_blocked_not_running",
+          "state",
+          this.supervisor!.info.state
+        ),
       });
       return;
     }

hassio/src/components/hassio-filter-addons.ts

@@ -1,9 +1,8 @@
 import Fuse from "fuse.js";
-import type { IFuseOptions } from "fuse.js";
 import { StoreAddon } from "../../../src/data/supervisor/store";
 
 export function filterAndSort(addons: StoreAddon[], filter: string) {
-  const options: IFuseOptions<StoreAddon> = {
+  const options: Fuse.IFuseOptions<StoreAddon> = {
     keys: ["name", "description", "slug"],
     isCaseSensitive: false,
     minMatchCharLength: 2,

hassio/src/components/supervisor-backup-content.ts

@@ -1,13 +1,13 @@
-import { mdiFolder, mdiPuzzle } from "@mdi/js";
+import { mdiFolder, mdiHomeAssistant, mdiPuzzle } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
-  CSSResultGroup,
-  LitElement,
-  TemplateResult,
   css,
+  CSSResultGroup,
   html,
+  LitElement,
   nothing,
+  TemplateResult,
 } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { atLeastVersion } from "../../../src/common/config/version";
@@ -24,7 +24,6 @@ import {
   HassioPartialBackupCreateParams,
 } from "../../../src/data/hassio/backup";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
-import { mdiHomeAssistant } from "../../../src/resources/home-assistant-logo-svg";
 import {
   HomeAssistant,
   TranslationDict,

hassio/src/dashboard/hassio-update.ts

@@ -1,4 +1,5 @@
 import "@material/mwc-button";
+import { mdiHomeAssistant } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -12,7 +13,6 @@ import {
   HassioSupervisorInfo,
 } from "../../../src/data/hassio/supervisor";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
-import { mdiHomeAssistant } from "../../../src/resources/home-assistant-logo-svg";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
 import { hassioStyle } from "../resources/hassio-style";

hassio/src/dialogs/backup/dialog-hassio-backup.ts

@@ -31,7 +31,6 @@ import { fileDownload } from "../../../../src/util/file_download";
 import "../../components/supervisor-backup-content";
 import type { SupervisorBackupContent } from "../../components/supervisor-backup-content";
 import { HassioBackupDialogParams } from "./show-dialog-hassio-backup";
-import { BackupOrRestoreKey } from "../../util/translations";
 
 @customElement("dialog-hassio-backup")
 class HassioBackupDialog
@@ -65,13 +64,6 @@ class HassioBackupDialog
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
-  private _localize(key: BackupOrRestoreKey) {
-    return (
-      this._dialogParams!.supervisor?.localize(`backup.${key}`) ||
-      this._dialogParams!.localize!(`ui.panel.page-onboarding.restore.${key}`)
-    );
-  }
-
   protected render() {
     if (!this._dialogParams || !this._backup) {
       return nothing;
@@ -87,7 +79,7 @@ class HassioBackupDialog
           <ha-header-bar>
             <span slot="title">${this._backup.name}</span>
             <ha-icon-button
-              .label=${this._localize("close")}
+              .label=${this.hass?.localize("ui.common.close") || "Close"}
               .path=${mdiClose}
               slot="actionItems"
               dialogAction="cancel"
@@ -95,31 +87,29 @@ class HassioBackupDialog
           </ha-header-bar>
         </div>
         ${this._restoringBackup
-          ? html`<ha-circular-progress active></ha-circular-progress>`
-          : html`
-              <supervisor-backup-content
-                .hass=${this.hass}
-                .supervisor=${this._dialogParams.supervisor}
-                .backup=${this._backup}
-                .onboarding=${this._dialogParams.onboarding || false}
-                .localize=${this._dialogParams.localize}
-                dialogInitialFocus
-              >
-              </supervisor-backup-content>
-            `}
+          ? html` <ha-circular-progress active></ha-circular-progress>`
+          : html`<supervisor-backup-content
+              .hass=${this.hass}
+              .supervisor=${this._dialogParams.supervisor}
+              .backup=${this._backup}
+              .onboarding=${this._dialogParams.onboarding || false}
+              .localize=${this._dialogParams.localize}
+              dialogInitialFocus
+            >
+            </supervisor-backup-content>`}
         ${this._error
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-          : nothing}
+          : ""}
 
         <mwc-button
           .disabled=${this._restoringBackup}
           slot="secondaryAction"
           @click=${this._restoreClicked}
         >
-          ${this._localize("restore")}
+          Restore
         </mwc-button>
 
-        ${!this._dialogParams.onboarding && this._dialogParams.supervisor
+        ${!this._dialogParams.onboarding
           ? html`<ha-button-menu
               fixed
               slot="primaryAction"
@@ -127,24 +117,22 @@ class HassioBackupDialog
               @closed=${stopPropagation}
             >
               <ha-icon-button
-                .label=${this._dialogParams.supervisor.localize(
-                  "backup.more_actions"
-                )}
+                .label=${this.hass!.localize("ui.common.menu") || "Menu"}
                 .path=${mdiDotsVertical}
                 slot="trigger"
               ></ha-icon-button>
               <mwc-list-item
-                >${this._dialogParams.supervisor.localize(
+                >${this._dialogParams.supervisor?.localize(
                   "backup.download_backup"
                 )}</mwc-list-item
               >
               <mwc-list-item class="error"
-                >${this._dialogParams.supervisor.localize(
+                >${this._dialogParams.supervisor?.localize(
                   "backup.delete_backup_title"
                 )}</mwc-list-item
               >
             </ha-button-menu>`
-          : nothing}
+          : ""}
       </ha-dialog>
     `;
   }
@@ -195,22 +183,21 @@ class HassioBackupDialog
   }
 
   private async _partialRestoreClicked(backupDetails) {
-    const supervisor = this._dialogParams?.supervisor;
-    if (supervisor !== undefined && supervisor.info.state !== "running") {
+    if (
+      this._dialogParams?.supervisor !== undefined &&
+      this._dialogParams?.supervisor.info.state !== "running"
+    ) {
       await showAlertDialog(this, {
-        title: supervisor.localize("backup.could_not_restore"),
-        text: supervisor.localize("backup.restore_blocked_not_running", {
-          state: supervisor.info.state,
-        }),
+        title: "Could not restore backup",
+        text: `Restoring a backup is not possible right now because the system is in ${this._dialogParams?.supervisor.info.state} state.`,
       });
       return;
     }
     if (
       !(await showConfirmationDialog(this, {
-        title: this._localize("confirm_restore_partial_backup_title"),
-        text: this._localize("confirm_restore_partial_backup_text"),
-        confirmText: this._localize("restore"),
-        dismissText: this._localize("cancel"),
+        title: "Are you sure you want to restore this partial backup?",
+        confirmText: "restore",
+        dismissText: "cancel",
       }))
     ) {
       return;
@@ -243,22 +230,22 @@ class HassioBackupDialog
   }
 
   private async _fullRestoreClicked(backupDetails) {
-    const supervisor = this._dialogParams?.supervisor;
-    if (supervisor !== undefined && supervisor.info.state !== "running") {
+    if (
+      this._dialogParams?.supervisor !== undefined &&
+      this._dialogParams?.supervisor.info.state !== "running"
+    ) {
       await showAlertDialog(this, {
-        title: supervisor.localize("backup.could_not_restore"),
-        text: supervisor.localize("backup.restore_blocked_not_running", {
-          state: supervisor.info.state,
-        }),
+        title: "Could not restore backup",
+        text: `Restoring a backup is not possible right now because the system is in ${this._dialogParams?.supervisor.info.state} state.`,
       });
       return;
     }
     if (
       !(await showConfirmationDialog(this, {
-        title: this._localize("confirm_restore_full_backup_title"),
-        text: this._localize("confirm_restore_full_backup_text"),
-        confirmText: this._localize("restore"),
-        dismissText: this._localize("cancel"),
+        title:
+          "Are you sure you want to wipe your system and restore this backup?",
+        confirmText: "restore",
+        dismissText: "cancel",
       }))
     ) {
       return;
@@ -292,15 +279,11 @@ class HassioBackupDialog
   }
 
   private async _deleteClicked() {
-    const supervisor = this._dialogParams?.supervisor;
-    if (!supervisor) return;
-
     if (
       !(await showConfirmationDialog(this, {
-        title: supervisor!.localize("backup.confirm_delete_title"),
-        text: supervisor!.localize("backup.confirm_delete_text"),
-        confirmText: supervisor!.localize("backup.delete"),
-        dismissText: supervisor!.localize("backup.cancel"),
+        title: "Are you sure you want to delete this backup?",
+        confirmText: "delete",
+        dismissText: "cancel",
       }))
     ) {
       return;
@@ -318,9 +301,6 @@ class HassioBackupDialog
   }
 
   private async _downloadClicked() {
-    const supervisor = this._dialogParams?.supervisor;
-    if (!supervisor) return;
-
     let signedPath: { path: string };
     try {
       signedPath = await getSignedPath(
@@ -340,10 +320,10 @@ class HassioBackupDialog
 
     if (window.location.href.includes("ui.nabu.casa")) {
       const confirm = await showConfirmationDialog(this, {
-        title: supervisor.localize("backup.remote_download_title"),
-        text: supervisor.localize("backup.remote_download_text"),
-        confirmText: supervisor.localize("backup.download"),
-        dismissText: this._localize("cancel"),
+        title: "Potential slow download",
+        text: "Downloading backups over the Nabu Casa URL will take some time, it is recomended to use your local URL instead, do you want to continue?",
+        confirmText: "continue",
+        dismissText: "cancel",
       });
       if (!confirm) {
         return;

hassio/src/dialogs/backup/dialog-hassio-create-backup.ts

@@ -89,7 +89,8 @@ class HassioCreateBackupDialog extends LitElement {
         ),
         text: this._dialogParams!.supervisor.localize(
           "backup.create_blocked_not_running",
-          { state: this._dialogParams!.supervisor.info.state }
+          "state",
+          this._dialogParams!.supervisor.info.state
         ),
       });
       return;

hassio/src/dialogs/hardware/dialog-hassio-hardware.ts

@@ -1,5 +1,4 @@
 import { mdiClose } from "@mdi/js";
-import { dump } from "js-yaml";
 import { css, CSSResultGroup, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -10,6 +9,7 @@ import "../../../../src/components/ha-expansion-panel";
 import "../../../../src/components/ha-icon-button";
 import "../../../../src/components/search-input";
 import { HassioHardwareInfo } from "../../../../src/data/hassio/hardware";
+import { dump } from "../../../../src/resources/js-yaml-dump";
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { HassioHardwareDialogParams } from "./show-dialog-hassio-hardware";

hassio/src/entrypoint.ts

@@ -1,15 +1,15 @@
 // Compat needs to be first import
 import "../../src/resources/compatibility";
+import { setCancelSyntheticClickEvents } from "@polymer/polymer/lib/utils/settings";
+import "../../src/resources/roboto";
+import "../../src/resources/ha-style";
 import "../../src/resources/safari-14-attachshadow-patch";
 import "./hassio-main";
 
-import("../../src/resources/ha-style");
-import("@polymer/polymer/lib/utils/settings").then(
-  ({ setCancelSyntheticClickEvents }) => setCancelSyntheticClickEvents(false)
-);
+setCancelSyntheticClickEvents(false);
 
 const styleEl = document.createElement("style");
-styleEl.textContent = `
+styleEl.innerHTML = `
 body {
   font-family: Roboto, sans-serif;
   -moz-osx-font-smoothing: grayscale;

hassio/src/util/translations.ts

@@ -1,4 +0,0 @@
-import type { TranslationDict } from "../../../src/types";
-
-export type BackupOrRestoreKey = keyof TranslationDict["supervisor"]["backup"] &
-  keyof TranslationDict["ui"]["panel"]["page-onboarding"]["restore"];

package.json

@@ -25,46 +25,43 @@
   "license": "Apache-2.0",
   "type": "module",
   "dependencies": {
-    "@babel/runtime": "7.23.2",
+    "@babel/runtime": "7.22.15",
     "@braintree/sanitize-url": "6.0.4",
-    "@codemirror/autocomplete": "6.11.0",
-    "@codemirror/commands": "6.3.0",
-    "@codemirror/language": "6.9.2",
+    "@codemirror/autocomplete": "6.9.1",
+    "@codemirror/commands": "6.2.5",
+    "@codemirror/language": "6.9.0",
     "@codemirror/legacy-modes": "6.3.3",
-    "@codemirror/search": "6.5.4",
-    "@codemirror/state": "6.3.1",
-    "@codemirror/view": "6.22.0",
+    "@codemirror/search": "6.5.3",
+    "@codemirror/state": "6.2.1",
+    "@codemirror/view": "6.19.0",
     "@egjs/hammerjs": "2.0.17",
-    "@formatjs/intl-datetimeformat": "6.11.2",
-    "@formatjs/intl-displaynames": "6.6.2",
-    "@formatjs/intl-getcanonicallocales": "2.3.0",
-    "@formatjs/intl-listformat": "7.5.1",
-    "@formatjs/intl-locale": "3.4.1",
-    "@formatjs/intl-numberformat": "8.8.1",
-    "@formatjs/intl-pluralrules": "5.2.8",
-    "@formatjs/intl-relativetimeformat": "11.2.8",
-    "@fullcalendar/core": "6.1.9",
-    "@fullcalendar/daygrid": "6.1.9",
-    "@fullcalendar/interaction": "6.1.9",
-    "@fullcalendar/list": "6.1.9",
-    "@fullcalendar/luxon3": "6.1.9",
-    "@fullcalendar/timegrid": "6.1.9",
+    "@formatjs/intl-datetimeformat": "6.10.2",
+    "@formatjs/intl-displaynames": "6.5.2",
+    "@formatjs/intl-getcanonicallocales": "2.2.1",
+    "@formatjs/intl-listformat": "7.4.2",
+    "@formatjs/intl-locale": "3.3.4",
+    "@formatjs/intl-numberformat": "8.7.2",
+    "@formatjs/intl-pluralrules": "5.2.6",
+    "@formatjs/intl-relativetimeformat": "11.2.6",
+    "@fullcalendar/core": "6.1.8",
+    "@fullcalendar/daygrid": "6.1.8",
+    "@fullcalendar/interaction": "6.1.8",
+    "@fullcalendar/list": "6.1.8",
+    "@fullcalendar/luxon3": "6.1.8",
+    "@fullcalendar/timegrid": "6.1.8",
     "@lezer/highlight": "1.1.6",
     "@lit-labs/context": "0.4.1",
-    "@lit-labs/motion": "1.0.6",
-    "@lit-labs/observers": "2.0.2",
-    "@lit-labs/virtualizer": "2.0.10",
+    "@lit-labs/motion": "1.0.4",
+    "@lit-labs/virtualizer": "2.0.7",
     "@lrnwebcomponents/simple-tooltip": "7.0.18",
     "@material/chips": "=14.0.0-canary.53b3cad2f.0",
     "@material/data-table": "=14.0.0-canary.53b3cad2f.0",
-    "@material/mwc-base": "0.27.0",
     "@material/mwc-button": "0.27.0",
     "@material/mwc-checkbox": "0.27.0",
     "@material/mwc-circular-progress": "0.27.0",
     "@material/mwc-dialog": "0.27.0",
     "@material/mwc-drawer": "0.27.0",
     "@material/mwc-fab": "0.27.0",
-    "@material/mwc-floating-label": "0.27.0",
     "@material/mwc-formfield": "0.27.0",
     "@material/mwc-icon-button": "0.27.0",
     "@material/mwc-linear-progress": "0.27.0",
@@ -73,6 +70,7 @@
     "@material/mwc-radio": "0.27.0",
     "@material/mwc-ripple": "0.27.0",
     "@material/mwc-select": "0.27.0",
+    "@material/mwc-slider": "0.27.0",
     "@material/mwc-switch": "0.27.0",
     "@material/mwc-tab": "0.27.0",
     "@material/mwc-tab-bar": "0.27.0",
@@ -81,21 +79,22 @@
     "@material/mwc-top-app-bar": "0.27.0",
     "@material/mwc-top-app-bar-fixed": "0.27.0",
     "@material/top-app-bar": "=14.0.0-canary.53b3cad2f.0",
-    "@material/web": "=1.0.1",
-    "@mdi/js": "7.3.67",
-    "@mdi/svg": "7.3.67",
+    "@material/web": "=1.0.0-pre.17",
+    "@mdi/js": "7.2.96",
+    "@mdi/svg": "7.2.96",
     "@polymer/iron-flex-layout": "3.0.1",
     "@polymer/iron-input": "3.0.1",
     "@polymer/iron-resizable-behavior": "3.0.1",
     "@polymer/paper-input": "3.2.1",
     "@polymer/paper-item": "3.0.1",
     "@polymer/paper-listbox": "3.0.1",
+    "@polymer/paper-slider": "3.0.1",
     "@polymer/paper-tabs": "3.1.0",
     "@polymer/paper-toast": "3.0.1",
     "@polymer/polymer": "3.5.1",
     "@thomasloven/round-slider": "0.6.0",
-    "@vaadin/combo-box": "24.2.2",
-    "@vaadin/vaadin-themable-mixin": "24.2.2",
+    "@vaadin/combo-box": "24.1.7",
+    "@vaadin/vaadin-themable-mixin": "24.1.7",
     "@vibrant/color": "3.2.1-alpha.1",
     "@vibrant/core": "3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "3.2.1-alpha.1",
@@ -103,30 +102,30 @@
     "@webcomponents/scoped-custom-element-registry": "0.0.9",
     "@webcomponents/webcomponentsjs": "2.8.0",
     "app-datepicker": "5.1.1",
-    "chart.js": "4.4.0",
+    "chart.js": "4.3.3",
     "comlink": "4.4.1",
-    "core-js": "3.33.2",
-    "cropperjs": "1.6.1",
+    "core-js": "3.32.2",
+    "cropperjs": "1.6.0",
     "date-fns": "2.30.0",
     "date-fns-tz": "2.0.0",
     "deep-clone-simple": "1.1.1",
     "deep-freeze": "0.0.1",
-    "fuse.js": "7.0.0",
+    "fuse.js": "6.6.2",
     "google-timezones-json": "1.2.0",
     "hls.js": "1.4.12",
-    "home-assistant-js-websocket": "9.1.0",
+    "home-assistant-js-websocket": "8.2.0",
     "idb-keyval": "6.2.1",
-    "intl-messageformat": "10.5.5",
+    "intl-messageformat": "10.5.2",
     "js-yaml": "4.1.0",
     "leaflet": "1.9.4",
     "leaflet-draw": "1.0.4",
     "lit": "2.8.0",
     "luxon": "3.4.3",
-    "marked": "9.1.6",
+    "marked": "7.0.5",
     "memoize-one": "6.0.0",
     "node-vibrant": "3.2.1-alpha.1",
     "proxy-polyfill": "0.3.2",
-    "punycode": "2.3.1",
+    "punycode": "2.3.0",
     "qr-scanner": "1.4.2",
     "qrcode": "1.5.3",
     "resize-observer-polyfill": "1.5.1",
@@ -138,11 +137,11 @@
     "tinykeys": "2.1.0",
     "tsparticles-engine": "2.12.0",
     "tsparticles-preset-links": "2.12.0",
-    "ua-parser-js": "1.0.37",
+    "ua-parser-js": "1.0.36",
     "unfetch": "5.0.0",
-    "vis-data": "7.1.8",
-    "vis-network": "9.1.9",
-    "vue": "2.7.15",
+    "vis-data": "7.1.7",
+    "vis-network": "9.1.6",
+    "vue": "2.7.14",
     "vue2-daterange-picker": "0.6.8",
     "weekstart": "2.0.0",
     "workbox-cacheable-response": "7.0.0",
@@ -154,61 +153,62 @@
     "xss": "1.0.14"
   },
   "devDependencies": {
-    "@babel/core": "7.23.3",
-    "@babel/plugin-proposal-decorators": "7.23.3",
-    "@babel/plugin-transform-runtime": "7.23.3",
-    "@babel/preset-env": "7.23.3",
-    "@babel/preset-typescript": "7.23.3",
-    "@bundle-stats/plugin-webpack-filter": "4.8.0",
+    "@babel/core": "7.22.20",
+    "@babel/plugin-proposal-decorators": "7.22.15",
+    "@babel/plugin-transform-runtime": "7.22.15",
+    "@babel/preset-env": "7.22.20",
+    "@babel/preset-typescript": "7.22.15",
     "@koa/cors": "4.0.0",
-    "@lokalise/node-api": "12.0.0",
-    "@octokit/auth-oauth-device": "6.0.1",
-    "@octokit/plugin-retry": "6.0.1",
-    "@octokit/rest": "20.0.2",
+    "@lokalise/node-api": "11.0.1",
+    "@octokit/auth-oauth-device": "6.0.0",
+    "@octokit/plugin-retry": "6.0.0",
+    "@octokit/rest": "20.0.1",
     "@open-wc/dev-server-hmr": "0.1.4",
-    "@rollup/plugin-babel": "6.0.4",
-    "@rollup/plugin-commonjs": "25.0.7",
-    "@rollup/plugin-json": "6.0.1",
-    "@rollup/plugin-node-resolve": "15.2.3",
-    "@rollup/plugin-replace": "5.0.5",
-    "@types/babel__plugin-transform-runtime": "7.9.5",
-    "@types/chromecast-caf-receiver": "6.0.12",
-    "@types/chromecast-caf-sender": "1.0.8",
+    "@rollup/plugin-babel": "6.0.3",
+    "@rollup/plugin-commonjs": "25.0.4",
+    "@rollup/plugin-json": "6.0.0",
+    "@rollup/plugin-node-resolve": "15.2.1",
+    "@rollup/plugin-replace": "5.0.2",
+    "@types/babel__plugin-transform-runtime": "7.9.3",
+    "@types/chromecast-caf-receiver": "6.0.10",
+    "@types/chromecast-caf-sender": "1.0.6",
+    "@types/esprima": "4.0.3",
     "@types/glob": "8.1.0",
-    "@types/html-minifier-terser": "7.0.2",
-    "@types/js-yaml": "4.0.9",
-    "@types/leaflet": "1.9.8",
-    "@types/leaflet-draw": "1.0.10",
-    "@types/luxon": "3.3.4",
-    "@types/mocha": "10.0.4",
-    "@types/qrcode": "1.5.5",
-    "@types/serve-handler": "6.1.4",
-    "@types/sortablejs": "1.15.5",
-    "@types/tar": "6.1.9",
-    "@types/ua-parser-js": "0.7.39",
+    "@types/html-minifier-terser": "7.0.0",
+    "@types/js-yaml": "4.0.6",
+    "@types/leaflet": "1.9.4",
+    "@types/leaflet-draw": "1.0.8",
+    "@types/luxon": "3.3.2",
+    "@types/mocha": "10.0.1",
+    "@types/qrcode": "1.5.2",
+    "@types/serve-handler": "6.1.1",
+    "@types/sortablejs": "1.15.2",
+    "@types/tar": "6.1.6",
+    "@types/ua-parser-js": "0.7.37",
     "@types/webspeechapi": "0.0.29",
-    "@typescript-eslint/eslint-plugin": "6.10.0",
-    "@typescript-eslint/parser": "6.10.0",
+    "@typescript-eslint/eslint-plugin": "6.7.0",
+    "@typescript-eslint/parser": "6.7.0",
     "@web/dev-server": "0.1.38",
     "@web/dev-server-rollup": "0.4.1",
     "babel-loader": "9.1.3",
     "babel-plugin-template-html-minifier": "4.1.0",
-    "chai": "4.3.10",
+    "chai": "4.3.8",
     "del": "7.1.0",
-    "eslint": "8.53.0",
+    "eslint": "8.49.0",
     "eslint-config-airbnb-base": "15.0.0",
     "eslint-config-airbnb-typescript": "17.1.0",
     "eslint-config-prettier": "9.0.0",
-    "eslint-import-resolver-webpack": "0.13.8",
+    "eslint-import-resolver-webpack": "0.13.7",
     "eslint-plugin-disable": "2.0.3",
-    "eslint-plugin-import": "2.29.0",
-    "eslint-plugin-lit": "1.10.1",
-    "eslint-plugin-lit-a11y": "4.1.1",
+    "eslint-plugin-import": "2.28.1",
+    "eslint-plugin-lit": "1.9.1",
+    "eslint-plugin-lit-a11y": "3.0.0",
     "eslint-plugin-unused-imports": "3.0.0",
-    "eslint-plugin-wc": "2.0.4",
+    "eslint-plugin-wc": "1.5.0",
+    "esprima": "4.0.1",
     "fancy-log": "2.0.0",
     "fs-extra": "11.1.1",
-    "glob": "10.3.10",
+    "glob": "10.3.4",
     "gulp": "4.0.2",
     "gulp-flatmap": "1.0.2",
     "gulp-json-transform": "0.4.8",
@@ -219,10 +219,10 @@
     "husky": "8.0.3",
     "instant-mocha": "1.5.2",
     "jszip": "3.10.1",
-    "lint-staged": "15.1.0",
-    "lit-analyzer": "2.0.1",
+    "lint-staged": "14.0.1",
+    "lit-analyzer": "2.0.0-pre.3",
     "lodash.template": "4.5.0",
-    "magic-string": "0.30.5",
+    "magic-string": "0.30.3",
     "map-stream": "0.0.7",
     "mocha": "10.2.0",
     "object-hash": "3.0.0",
@@ -234,20 +234,19 @@
     "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-visualizer": "5.9.2",
     "serve-handler": "6.1.5",
-    "sinon": "17.0.1",
+    "sinon": "16.0.0",
     "source-map-url": "0.4.1",
     "systemjs": "6.14.2",
     "tar": "6.2.0",
     "terser-webpack-plugin": "5.3.9",
-    "ts-lit-plugin": "2.0.1",
+    "ts-lit-plugin": "2.0.0-pre.1",
     "typescript": "5.2.2",
     "vinyl-buffer": "1.0.1",
     "vinyl-source-stream": "2.0.0",
-    "webpack": "5.89.0",
+    "webpack": "5.88.2",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "4.15.1",
     "webpack-manifest-plugin": "5.0.0",
-    "webpack-stats-plugin": "1.1.3",
     "webpackbar": "5.0.2",
     "workbox-build": "7.0.0"
   },
@@ -255,11 +254,8 @@
   "resolutions": {
     "@polymer/polymer": "patch:@polymer/polymer@3.5.1#./.yarn/patches/@polymer/polymer/pr-5569.patch",
     "@material/mwc-button@^0.25.3": "^0.27.0",
-    "lit": "2.8.0",
-    "clean-css": "5.3.2",
-    "@lit/reactive-element": "1.6.3",
     "sortablejs@1.15.0": "patch:sortablejs@npm%3A1.15.0#./.yarn/patches/sortablejs-npm-1.15.0-f3a393abcc.patch",
     "leaflet-draw@1.0.4": "patch:leaflet-draw@npm%3A1.0.4#./.yarn/patches/leaflet-draw-npm-1.0.4-0ca0ebcf65.patch"
   },
-  "packageManager": "yarn@4.0.1"
+  "packageManager": "yarn@3.6.3"
 }

public/static/icons/browserconfig.xml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<browserconfig>
-    <msapplication>
-        <tile>
-            <square70x70logo src="/static/icons/tile-win-70x70.png"/>
-            <square150x150logo src="/static/icons/tile-win-150x150.png"/>
-			<wide310x150logo src="/static/icons/tile-win-310x150.png"/>
-			<square310x310logo src="/static/icons/tile-win-310x310.png"/>
-            <TileColor>#18bcf2</TileColor>
-        </tile>
-    </msapplication>
-</browserconfig>

public/static/icons/mask-icon.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="640" height="640" viewBox="0 0 240 240"><path d="M120.001 0c-3.787 0-7.573 1.499-10.444 4.49L12.211 105.905a25.921 25.921 0 0 0-2.098 2.501 35.25 35.25 0 0 0-1.96 2.942c-3.01 5.021-5.285 11.318-6.074 16.898-.03.21-.088.429-.11.636a27.355 27.355 0 0 0-.213 3.317v93.023a14.78 14.78 90 0 0 14.78 14.78h90.92L67.422 198.29a20.2 20.2 90 1 1 12.542-13.06l31.17 32.474V98.726a20.2 20.2 90 1 1 17.734 0v83.44l31.001-32.299a20.2 20.2 90 1 1 12.267 13.357l-43.269 45.082V240h94.9a14.479 14.479 90 0 0 14.478-14.479v-93.314c0-1.059-.069-2.168-.214-3.314-.7-5.73-3.06-12.327-6.183-17.537a35.801 35.801 0 0 0-1.955-2.937 26.271 26.271 0 0 0-2.102-2.506L130.444 4.486C127.573 1.494 123.786-.002 120.001 0"/></svg>
+<svg width="16" height="16" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill-rule="nonzero" fill="#000" d="M9,16 L9,17 L7,17 L7,16 L1,16 L1,9 L-1,9 L8.00163907,0 L13,4.785368 L13,3 L15,3 L15,7.035368 L17,9 L15,9 L15,16 L9,16 Z M9,16 L9,13.5 C9.49775077,13.0022492 10.1813086,12.3186914 11.0506735,11.4493265 C11.1951058,11.4824829 11.3455072,11.5 11.5,11.5 C12.6045695,11.5 13.5,10.6045695 13.5,9.5 C13.5,8.3954305 12.6045695,7.5 11.5,7.5 C10.3954305,7.5 9.5,8.3954305 9.5,9.5 C9.5,9.65449279 9.5175171,9.80489423 9.55067348,9.94932652 L9,10.5 L9,7.73243561 C9.59780137,7.38662619 10,6.74028236 10,6 C10,4.8954305 9.1045695,4 8,4 C6.8954305,4 6,4.8954305 6,6 C6,6.74028236 6.40219863,7.38662619 7,7.73243561 L7,10.5 L6.44932652,9.94932652 C6.4824829,9.80489423 6.5,9.65449279 6.5,9.5 C6.5,8.3954305 5.6045695,7.5 4.5,7.5 C3.3954305,7.5 2.5,8.3954305 2.5,9.5 C2.5,10.6045695 3.3954305,11.5 4.5,11.5 C4.65352068,11.5 4.80300134,11.4827027 4.9465994,11.4499505 C5.81726201,12.3268973 6.50172888,13.0147433 7,13.5134884 L7,16 L9,16 Z M11.5,10 C11.2238576,10 11,9.77614237 11,9.5 C11,9.22385763 11.2238576,9 11.5,9 C11.7761424,9 12,9.22385763 12,9.5 C12,9.77614237 11.7761424,10 11.5,10 Z M4.5,10 C4.22385763,10 4,9.77614237 4,9.5 C4,9.22385763 4.22385763,9 4.5,9 C4.77614237,9 5,9.22385763 5,9.5 C5,9.77614237 4.77614237,10 4.5,10 Z M8,6.5 C7.72385763,6.5 7.5,6.27614237 7.5,6 C7.5,5.72385763 7.72385763,5.5 8,5.5 C8.27614237,5.5 8.5,5.72385763 8.5,6 C8.5,6.27614237 8.27614237,6.5 8,6.5 Z" id="house-small-tree"/></svg>