Use autofit when we detect location

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

.eslintrc.json

@@ -1,9 +1,10 @@
 {
   "extends": [
+    "airbnb-base",
     "airbnb-typescript/base",
     "plugin:@typescript-eslint/recommended",
     "plugin:wc/recommended",
-    "plugin:lit/recommended",
+    "plugin:lit/all",
     "prettier"
   ],
   "parser": "@typescript-eslint/parser",
@@ -28,6 +29,7 @@
     "__BUILD__": false,
     "__VERSION__": false,
     "__STATIC_PATH__": false,
+    "__SUPERVISOR__": false,
     "Polymer": true
   },
   "env": {
@@ -109,7 +111,8 @@
       }
     ],
     "unused-imports/no-unused-imports": "error",
-    "lit/attribute-value-entities": "off"
+    "lit/attribute-value-entities": "off",
+    "lit/no-template-map": "off"
   },
   "plugins": ["disable", "unused-imports"],
   "processor": "disable/disable"

.github/workflows/ci.yaml

@@ -12,7 +12,7 @@ on:
 
 env:
   NODE_VERSION: 14
-  NODE_OPTIONS: --max_old_space_size=4096
+  NODE_OPTIONS: --max_old_space_size=6144
 
 jobs:
   lint:
@@ -30,7 +30,7 @@ jobs:
         env:
           CI: true
       - name: Build resources
-        run: ./node_modules/.bin/gulp gen-icons-json build-translations gather-gallery-demos
+        run: ./node_modules/.bin/gulp gen-icons-json build-translations build-locale-data gather-gallery-demos
       - name: Run eslint
         run: yarn run lint:eslint
       - name: Run tsc
@@ -53,8 +53,10 @@ jobs:
         run: yarn install
         env:
           CI: true
-      - name: Run Mocha
+      - name: Build resources
-        run: yarn run mocha
+        run: ./node_modules/.bin/gulp build-translations build-locale-data
+      - name: Run Tests
+        run: yarn run test
   build:
     runs-on: ubuntu-latest
     needs: [lint, test]

.github/workflows/demo.yaml

@@ -7,7 +7,7 @@ on:
 
 env:
   NODE_VERSION: 14
-  NODE_OPTIONS: --max_old_space_size=4096
+  NODE_OPTIONS: --max_old_space_size=6144
 
 jobs:
   deploy:

.github/workflows/release.yaml

@@ -8,7 +8,7 @@ on:
 env:
   PYTHON_VERSION: 3.8
   NODE_VERSION: 14
-  NODE_OPTIONS: --max_old_space_size=4096
+  NODE_OPTIONS: --max_old_space_size=6144
 
 jobs:
   release:

.gitignore

@@ -3,7 +3,6 @@
 
 # build
 build
-build-translations/*
 hass_frontend/*
 dist
 

.mocharc.cjs

@@ -1,4 +0,0 @@
-module.exports = {
-  require: "test-mocha/testconf.js",
-  timeout: 10000,
-};

.prettierignore

@@ -1,5 +1,4 @@
 build
-build-translations/*
 translations/*
 node_modules/*
 hass_frontend/*

.yarn/patches/@material/mwc-icon-button/remove-icon.patch

@@ -0,0 +1,12 @@
+diff --git a/mwc-icon-button-base.js b/mwc-icon-button-base.js
+index 45cdaab93ccc0a6daaaaabc01266dcdc32e46bfd..b3ea5b541597308d85f86ce6c23fd00785fda835 100644
+--- a/mwc-icon-button-base.js
++++ b/mwc-icon-button-base.js
+@@ -63,7 +63,6 @@ export class IconButtonBase extends LitElement {
+         @touchend="${this.handleRippleDeactivate}"
+         @touchcancel="${this.handleRippleDeactivate}"
+     >${this.renderRipple()}
+-    <i class="material-icons">${this.icon}</i>
+     <span
+       ><slot></slot
+     ></span>

.yarnrc.yml

@@ -6,4 +6,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-2.4.2.cjs
+yarnPath: .yarn/releases/yarn-3.0.2.cjs

build-scripts/bundle.js

@@ -35,6 +35,7 @@ module.exports.definedVars = ({ isProdBuild, latestBuild, defineOverlay }) => ({
   __BUILD__: JSON.stringify(latestBuild ? "latest" : "es5"),
   __VERSION__: JSON.stringify(env.version()),
   __DEMO__: false,
+  __SUPERVISOR__: false,
   __BACKWARDS_COMPAT__: false,
   __STATIC_PATH__: "/static/",
   "process.env.NODE_ENV": JSON.stringify(
@@ -82,6 +83,7 @@ module.exports.babelOptions = ({ latestBuild }) => ({
     // Only support the syntax, Webpack will handle it.
     "@babel/plugin-syntax-import-meta",
     "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-syntax-top-level-await",
     "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-proposal-nullish-coalescing-operator",
     ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
@@ -193,6 +195,9 @@ module.exports.config = {
       publicPath: publicPath(latestBuild, paths.hassio_publicPath),
       isProdBuild,
       latestBuild,
+      defineOverlay: {
+        __SUPERVISOR__: true,
+      },
     };
   },
 
@@ -205,6 +210,9 @@ module.exports.config = {
       publicPath: publicPath(latestBuild),
       isProdBuild,
       latestBuild,
+      defineOverlay: {
+        __DEMO__: true,
+      },
     };
   },
 };

build-scripts/gulp/app.js

@@ -5,6 +5,7 @@ const env = require("../env");
 
 require("./clean.js");
 require("./translations.js");
+require("./locale-data.js");
 require("./gen-icons-json.js");
 require("./gather-static.js");
 require("./compress.js");
@@ -26,7 +27,8 @@ gulp.task(
       "gen-icons-json",
       "gen-pages-dev",
       "gen-index-app-dev",
-      "build-translations"
+      "build-translations",
+      "build-locale-data"
     ),
     "copy-static-app",
     env.useWDS()
@@ -44,7 +46,7 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean",
-    gulp.parallel("gen-icons-json", "build-translations"),
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-app",
     env.useRollup() ? "rollup-prod-app" : "webpack-prod-app",
     // Don't compress running tests

build-scripts/gulp/cast.js

@@ -18,7 +18,7 @@ gulp.task(
     },
     "clean-cast",
     "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-json", "build-translations"),
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-cast",
     "gen-index-cast-dev",
     env.useRollup() ? "rollup-dev-server-cast" : "webpack-dev-server-cast"
@@ -33,7 +33,7 @@ gulp.task(
     },
     "clean-cast",
     "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-json", "build-translations"),
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-cast",
     env.useRollup() ? "rollup-prod-cast" : "webpack-prod-cast",
     "gen-index-cast-prod"

build-scripts/gulp/demo.js

@@ -20,7 +20,12 @@ gulp.task(
     },
     "clean-demo",
     "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-json", "gen-index-demo-dev", "build-translations"),
+    gulp.parallel(
+      "gen-icons-json",
+      "gen-index-demo-dev",
+      "build-translations",
+      "build-locale-data"
+    ),
     "copy-static-demo",
     env.useRollup() ? "rollup-dev-server-demo" : "webpack-dev-server-demo"
   )
@@ -35,7 +40,7 @@ gulp.task(
     "clean-demo",
     // Cast needs to be backwards compatible and older HA has no translations
     "translations-enable-merge-backend",
-    gulp.parallel("gen-icons-json", "build-translations"),
+    gulp.parallel("gen-icons-json", "build-translations", "build-locale-data"),
     "copy-static-demo",
     env.useRollup() ? "rollup-prod-demo" : "webpack-prod-demo",
     "gen-index-demo-prod"

build-scripts/gulp/gallery.js

@@ -51,6 +51,7 @@ gulp.task(
     gulp.parallel(
       "gen-icons-json",
       "build-translations",
+      "build-locale-data",
       "gather-gallery-demos"
     ),
     "copy-static-gallery",
@@ -70,6 +71,7 @@ gulp.task(
     gulp.parallel(
       "gen-icons-json",
       "build-translations",
+      "build-locale-data",
       "gather-gallery-demos"
     ),
     "copy-static-gallery",

build-scripts/gulp/gather-static.js

@@ -22,11 +22,18 @@ function copyTranslations(staticDir) {
 
   // Translation output
   fs.copySync(
-    polyPath("build-translations/output"),
+    polyPath("build/translations/output"),
     staticPath("translations")
   );
 }
 
+function copyLocaleData(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+
+  // Locale data output
+  fs.copySync(polyPath("build/locale-data"), staticPath("locale-data"));
+}
+
 function copyMdiIcons(staticDir) {
   const staticPath = genStaticPath(staticDir);
 
@@ -84,6 +91,11 @@ function copyMapPanel(staticDir) {
   );
 }
 
+gulp.task("copy-locale-data", async () => {
+  const staticDir = paths.app_output_static;
+  copyLocaleData(staticDir);
+});
+
 gulp.task("copy-translations-app", async () => {
   const staticDir = paths.app_output_static;
   copyTranslations(staticDir);
@@ -94,6 +106,11 @@ gulp.task("copy-translations-supervisor", async () => {
   copyTranslations(staticDir);
 });
 
+gulp.task("copy-locale-data-supervisor", async () => {
+  const staticDir = paths.hassio_output_static;
+  copyLocaleData(staticDir);
+});
+
 gulp.task("copy-static-app", async () => {
   const staticDir = paths.app_output_static;
   // Basic static files
@@ -103,6 +120,7 @@ gulp.task("copy-static-app", async () => {
   copyPolyfills(staticDir);
   copyFonts(staticDir);
   copyTranslations(staticDir);
+  copyLocaleData(staticDir);
   copyMdiIcons(staticDir);
 
   // Panel assets
@@ -123,6 +141,7 @@ gulp.task("copy-static-demo", async () => {
   copyMapPanel(paths.demo_output_static);
   copyFonts(paths.demo_output_static);
   copyTranslations(paths.demo_output_static);
+  copyLocaleData(paths.demo_output_static);
   copyMdiIcons(paths.demo_output_static);
 });
 
@@ -137,6 +156,7 @@ gulp.task("copy-static-cast", async () => {
   copyMapPanel(paths.cast_output_static);
   copyFonts(paths.cast_output_static);
   copyTranslations(paths.cast_output_static);
+  copyLocaleData(paths.cast_output_static);
   copyMdiIcons(paths.cast_output_static);
 });
 
@@ -152,5 +172,6 @@ gulp.task("copy-static-gallery", async () => {
   copyMapPanel(paths.gallery_output_static);
   copyFonts(paths.gallery_output_static);
   copyTranslations(paths.gallery_output_static);
+  copyLocaleData(paths.gallery_output_static);
   copyMdiIcons(paths.gallery_output_static);
 });

build-scripts/gulp/gen-icons-json.js

@@ -22,17 +22,40 @@ const getMeta = () => {
     const svg = fs.readFileSync(`${ICON_PATH}/${icon.name}.svg`, {
       encoding,
     });
-    return { path: svg.match(/ d="([^"]+)"/)[1], name: icon.name };
+    return {
+      path: svg.match(/ d="([^"]+)"/)[1],
+      name: icon.name,
+      tags: icon.tags,
+      aliases: icon.aliases,
+    };
   });
 };
 
 const addRemovedMeta = (meta) => {
   const file = fs.readFileSync(REMOVED_ICONS_PATH, { encoding });
   const removed = JSON.parse(file);
-  const combinedMeta = [...meta, ...removed];
+  const removedMeta = removed.map((removeIcon) => ({
+    path: removeIcon.path,
+    name: removeIcon.name,
+    tags: [],
+    aliases: [],
+  }));
+  const combinedMeta = [...meta, ...removedMeta];
   return combinedMeta.sort((a, b) => a.name.localeCompare(b.name));
 };
 
+const homeAutomationTag = "Home Automation";
+
+const orderMeta = (meta) => {
+  const homeAutomationMeta = meta.filter((icon) =>
+    icon.tags.includes(homeAutomationTag)
+  );
+  const otherMeta = meta.filter(
+    (icon) => !icon.tags.includes(homeAutomationTag)
+  );
+  return [...homeAutomationMeta, ...otherMeta];
+};
+
 const splitBySize = (meta) => {
   const chunks = [];
   const CHUNK_SIZE = 50000;
@@ -77,8 +100,10 @@ const findDifferentiator = (curString, prevString) => {
 };
 
 gulp.task("gen-icons-json", (done) => {
-  const meta = addRemovedMeta(getMeta());
+  const meta = getMeta();
-  const split = splitBySize(meta);
+
+  const metaAndRemoved = addRemovedMeta(meta);
+  const split = splitBySize(metaAndRemoved);
 
   if (!fs.existsSync(OUTPUT_DIR)) {
     fs.mkdirSync(OUTPUT_DIR, { recursive: true });
@@ -116,5 +141,18 @@ gulp.task("gen-icons-json", (done) => {
     JSON.stringify({ version: package.version, parts })
   );
 
+  fs.writeFileSync(
+    path.resolve(OUTPUT_DIR, "iconList.json"),
+    JSON.stringify(
+      orderMeta(meta).map((icon) => ({
+        name: icon.name,
+        keywords: [
+          ...icon.tags.map((t) => t.toLowerCase().replace(/\s\/\s/g, " ")),
+          ...icon.aliases,
+        ],
+      }))
+    )
+  );
+
   done();
 });

build-scripts/gulp/hassio.js

@@ -1,9 +1,6 @@
 const gulp = require("gulp");
-const fs = require("fs");
-const path = require("path");
 
 const env = require("../env");
-const paths = require("../paths");
 
 require("./clean.js");
 require("./gen-icons-json.js");
@@ -20,10 +17,11 @@ gulp.task(
       process.env.NODE_ENV = "development";
     },
     "clean-hassio",
-    "gen-icons-json",
     "gen-index-hassio-dev",
     "build-supervisor-translations",
     "copy-translations-supervisor",
+    "build-locale-data",
+    "copy-locale-data-supervisor",
     env.useRollup() ? "rollup-watch-hassio" : "webpack-watch-hassio"
   )
 );
@@ -35,9 +33,10 @@ gulp.task(
       process.env.NODE_ENV = "production";
     },
     "clean-hassio",
-    "gen-icons-json",
     "build-supervisor-translations",
     "copy-translations-supervisor",
+    "build-locale-data",
+    "copy-locale-data-supervisor",
     env.useRollup() ? "rollup-prod-hassio" : "webpack-prod-hassio",
     "gen-index-hassio-prod",
     ...// Don't compress running tests

build-scripts/gulp/locale-data.js

@@ -0,0 +1,74 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+const del = require("del");
+const path = require("path");
+const gulp = require("gulp");
+const fs = require("fs");
+const paths = require("../paths");
+
+const outDir = "build/locale-data";
+
+gulp.task("clean-locale-data", () => del([outDir]));
+
+gulp.task("ensure-locale-data-build-dir", (done) => {
+  if (!fs.existsSync(outDir)) {
+    fs.mkdirSync(outDir, { recursive: true });
+  }
+  done();
+});
+
+const modules = {
+  "intl-relativetimeformat": "RelativeTimeFormat",
+  "intl-datetimeformat": "DateTimeFormat",
+  "intl-numberformat": "NumberFormat",
+};
+
+gulp.task("create-locale-data", (done) => {
+  const translationMeta = JSON.parse(
+    fs.readFileSync(
+      path.join(paths.translations_src, "translationMetadata.json")
+    )
+  );
+  Object.entries(modules).forEach(([module, className]) => {
+    Object.keys(translationMeta).forEach((lang) => {
+      try {
+        const localeData = String(
+          fs.readFileSync(
+            require.resolve(`@formatjs/${module}/locale-data/${lang}.js`)
+          )
+        )
+          .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, "");
+        // make sure we have valid JSON
+        JSON.parse(localeData);
+        if (!fs.existsSync(path.join(outDir, module))) {
+          fs.mkdirSync(path.join(outDir, module), { recursive: true });
+        }
+        fs.writeFileSync(
+          path.join(outDir, `${module}/${lang}.json`),
+          localeData
+        );
+      } catch (e) {
+        if (e.code !== "MODULE_NOT_FOUND") {
+          throw e;
+        }
+      }
+    });
+    done();
+  });
+});
+
+gulp.task(
+  "build-locale-data",
+  gulp.series(
+    "clean-locale-data",
+    "ensure-locale-data-build-dir",
+    "create-locale-data"
+  )
+);

build-scripts/gulp/translations.js

@@ -17,7 +17,7 @@ const paths = require("../paths");
 
 const inFrontendDir = "translations/frontend";
 const inBackendDir = "translations/backend";
-const workDir = "build-translations";
+const workDir = "build/translations";
 const fullDir = workDir + "/full";
 const coreDir = workDir + "/core";
 const outDir = workDir + "/output";
@@ -121,7 +121,7 @@ gulp.task("clean-translations", () => del([workDir]));
 
 gulp.task("ensure-translations-build-dir", (done) => {
   if (!fs.existsSync(workDir)) {
-    fs.mkdirSync(workDir);
+    fs.mkdirSync(workDir, { recursive: true });
   }
   done();
 });
@@ -336,6 +336,14 @@ gulp.task("build-translation-fragment-supervisor", () =>
   gulp
     .src(fullDir + "/*.json")
     .pipe(transform((data) => data.supervisor))
+    .pipe(
+      rename((filePath) => {
+        // In dev we create the file with the fake hash in the filename
+        if (!env.isProdBuild()) {
+          filePath.basename += "-dev";
+        }
+      })
+    )
     .pipe(gulp.dest(workDir + "/supervisor"))
 );
 

build-scripts/gulp/webpack.js

@@ -35,26 +35,29 @@ const isWsl =
  *   listenHost?: string
  * }}
  */
-const runDevServer = ({
+const runDevServer = async ({
   compiler,
   contentBase,
   port,
   listenHost = "localhost",
-}) =>
+}) => {
-  new WebpackDevServer(compiler, {
+  const server = new WebpackDevServer(
-    open: true,
+    {
-    watchContentBase: true,
+      open: true,
-    contentBase,
+      host: listenHost,
-  }).listen(port, listenHost, (err) => {
+      port,
-    if (err) {
+      static: {
-      throw err;
+        directory: contentBase,
-    }
+        watch: true,
-    // Server listening
+      },
-    log(
+    },
-      "[webpack-dev-server]",
+    compiler
-      `Project is running at http://localhost:${port}`
+  );
-    );
+
-  });
+  await server.start();
+  // Server listening
+  log("[webpack-dev-server]", `Project is running at http://localhost:${port}`);
+};
 
 const doneHandler = (done) => (err, stats) => {
   if (err) {
@@ -107,13 +110,13 @@ gulp.task("webpack-prod-app", () =>
   )
 );
 
-gulp.task("webpack-dev-server-demo", () => {
+gulp.task("webpack-dev-server-demo", () =>
   runDevServer({
     compiler: webpack(bothBuilds(createDemoConfig, { isProdBuild: false })),
     contentBase: paths.demo_output_root,
     port: 8090,
-  });
+  })
-});
+);
 
 gulp.task("webpack-prod-demo", () =>
   prodBuild(
@@ -123,15 +126,15 @@ gulp.task("webpack-prod-demo", () =>
   )
 );
 
-gulp.task("webpack-dev-server-cast", () => {
+gulp.task("webpack-dev-server-cast", () =>
   runDevServer({
     compiler: webpack(bothBuilds(createCastConfig, { isProdBuild: false })),
     contentBase: paths.cast_output_root,
     port: 8080,
     // Accessible from the network, because that's how Cast hits it.
     listenHost: "0.0.0.0",
-  });
+  })
-});
+);
 
 gulp.task("webpack-prod-cast", () =>
   prodBuild(
@@ -148,7 +151,7 @@ gulp.task("webpack-watch-hassio", () => {
       isProdBuild: false,
       latestBuild: true,
     })
-  ).watch({ ignored: /build-translations/, poll: isWsl }, doneHandler());
+  ).watch({ ignored: /build/, poll: isWsl }, doneHandler());
 
   gulp.watch(
     path.join(paths.translations_src, "en.json"),
@@ -164,14 +167,15 @@ gulp.task("webpack-prod-hassio", () =>
   )
 );
 
-gulp.task("webpack-dev-server-gallery", () => {
+gulp.task("webpack-dev-server-gallery", () =>
   runDevServer({
     // We don't use the es5 build, but the dev server will fuck up the publicPath if we don't
     compiler: webpack(bothBuilds(createGalleryConfig, { isProdBuild: false })),
     contentBase: paths.gallery_output_root,
     port: 8100,
-  });
+    listenHost: "0.0.0.0",
-});
+  })
+);
 
 gulp.task("webpack-prod-gallery", () =>
   prodBuild(

build-scripts/webpack.js

@@ -6,6 +6,7 @@ const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
 const paths = require("./paths.js");
 const bundle = require("./bundle.js");
 const log = require("fancy-log");
+const WebpackBar = require("webpackbar");
 
 class LogStartCompilePlugin {
   ignoredFirst = false;
@@ -74,6 +75,7 @@ const createWebpackConfig = ({
       chunkIds: isProdBuild && !isStatsBuild ? "deterministic" : "named",
     },
     plugins: [
+      new WebpackBar({ fancy: !isProdBuild }),
       new WebpackManifestPlugin({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),
@@ -125,6 +127,13 @@ const createWebpackConfig = ({
       alias: {
         "lit/decorators$": "lit/decorators.js",
         "lit/directive$": "lit/directive.js",
+        "lit/directives/until$": "lit/directives/until.js",
+        "lit/directives/class-map$": "lit/directives/class-map.js",
+        "lit/directives/style-map$": "lit/directives/style-map.js",
+        "lit/directives/if-defined$": "lit/directives/if-defined.js",
+        "lit/directives/guard$": "lit/directives/guard.js",
+        "lit/directives/cache$": "lit/directives/cache.js",
+        "lit/directives/repeat$": "lit/directives/repeat.js",
         "lit/polyfill-support$": "lit/polyfill-support.js",
       },
     },
@@ -142,6 +151,9 @@ const createWebpackConfig = ({
       // To silence warning in worker plugin
       globalObject: "self",
     },
+    experiments: {
+      topLevelAwait: true,
+    },
   };
 };
 

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

@@ -1,4 +1,5 @@
 import "@material/mwc-button/mwc-button";
+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";
@@ -17,6 +18,7 @@ import {
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
 import "../../../../src/components/ha-icon";
+import "../../../../src/components/ha-svg-icon";
 import {
   getLegacyLovelaceCollection,
   getLovelaceCollection,
@@ -73,7 +75,7 @@ class HcCast extends LitElement {
           ? html`
               <p class="center-item">
                 <mwc-button raised @click=${this._handleLaunch}>
-                  <ha-icon icon="hass:cast"></ha-icon>
+                  <ha-svg-icon .path=${mdiCast}></ha-svg-icon>
                   Start Casting
                 </mwc-button>
               </p>
@@ -111,7 +113,7 @@ class HcCast extends LitElement {
           ${this.castManager.status
             ? html`
                 <mwc-button @click=${this._handleLaunch}>
-                  <ha-icon icon="hass:cast-connected"></ha-icon>
+                  <ha-svg-icon .path=${mdiCastConnected}></ha-svg-icon>
                   Manage
                 </mwc-button>
               `
@@ -191,7 +193,7 @@ class HcCast extends LitElement {
       }
       this.connection.close();
       location.reload();
-    } catch (err) {
+    } catch (err: any) {
       alert("Unable to log out!");
     }
   }
@@ -233,7 +235,7 @@ class HcCast extends LitElement {
         color: var(--secondary-text-color);
       }
 
-      mwc-button ha-icon {
+      mwc-button ha-svg-icon {
         margin-right: 8px;
         height: 18px;
       }

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

@@ -1,4 +1,5 @@
 import "@material/mwc-button";
+import { mdiCastConnected, mdiCast } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import {
   Auth,
@@ -19,7 +20,7 @@ import {
   loadTokens,
   saveTokens,
 } from "../../../../src/common/auth/token_storage";
-import "../../../../src/components/ha-icon";
+import "../../../../src/components/ha-svg-icon";
 import "../../../../src/layouts/hass-loading-screen";
 import { registerServiceWorker } from "../../../../src/util/register-service-worker";
 import "./hc-layout";
@@ -127,11 +128,11 @@ export class HcConnect extends LitElement {
           <div class="card-actions">
             <mwc-button @click=${this._handleDemo}>
               Show Demo
-              <ha-icon
+              <ha-svg-icon
-                .icon=${this.castManager.castState === "CONNECTED"
+                .path=${this.castManager.castState === "CONNECTED"
-                  ? "hass:cast-connected"
+                  ? mdiCastConnected
-                  : "hass:cast"}
+                  : mdiCast}
-              ></ha-icon>
+              ></ha-svg-icon>
             </mwc-button>
             <div class="spacer"></div>
             <mwc-button @click=${this._handleConnect}>Authorize</mwc-button>
@@ -212,7 +213,7 @@ export class HcConnect extends LitElement {
     let url: URL;
     try {
       url = new URL(value);
-    } catch (err) {
+    } catch (err: any) {
       this.error = "Invalid URL";
       return;
     }
@@ -240,7 +241,7 @@ export class HcConnect extends LitElement {
     try {
       this.loading = true;
       auth = await getAuth(options);
-    } catch (err) {
+    } catch (err: any) {
       if (init === "saved-tokens" && err === ERR_CANNOT_CONNECT) {
         this.cannotConnect = true;
         return;
@@ -259,7 +260,7 @@ export class HcConnect extends LitElement {
 
     try {
       conn = await createConnection({ auth });
-    } catch (err) {
+    } catch (err: any) {
       // In case of saved tokens, silently solve problems.
       if (init === "saved-tokens") {
         if (err === ERR_CANNOT_CONNECT) {
@@ -285,7 +286,7 @@ export class HcConnect extends LitElement {
     try {
       saveTokens(null);
       location.reload();
-    } catch (err) {
+    } catch (err: any) {
       alert("Unable to log out!");
     }
   }
@@ -307,7 +308,7 @@ export class HcConnect extends LitElement {
         color: darkred;
       }
 
-      mwc-button ha-icon {
+      mwc-button ha-svg-icon {
         margin-left: 8px;
       }
 

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

@@ -148,14 +148,14 @@ export class HcMain extends HassElement {
           expires_in: 0,
         }),
       });
-    } catch (err) {
+    } catch (err: any) {
       this._error = this._getErrorMessage(err);
       return;
     }
     let connection;
     try {
       connection = await createConnection({ auth });
-    } catch (err) {
+    } catch (err: any) {
       this._error = this._getErrorMessage(err);
       return;
     }
@@ -193,7 +193,7 @@ export class HcMain extends HassElement {
         this._unsubLovelace = llColl.subscribe((lovelaceConfig) =>
           this._handleNewLovelaceConfig(lovelaceConfig)
         );
-      } catch (err) {
+      } catch (err: any) {
         // eslint-disable-next-line
         console.log("Error fetching Lovelace configuration", err, msg);
         // Generate a Lovelace config.

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

@@ -1,3 +1,4 @@
+import { mdiTelevision } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
 import { CastManager } from "../../../src/cast/cast_manager";
@@ -27,7 +28,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
       return html``;
     }
     return html`
-      <ha-icon icon="hademo:television"></ha-icon>
+      <ha-svg-icon .path=${mdiTelevision}></ha-svg-icon>
       <div class="flex">
         <div class="name">Show Chromecast interface</div>
         <google-cast-launcher></google-cast-launcher>
@@ -72,7 +73,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
         display: flex;
         align-items: center;
       }
-      ha-icon {
+      ha-svg-icon {
         padding: 8px;
         color: var(--paper-item-icon-color);
       }

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

@@ -44,7 +44,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
                     (conf) => html`
                       ${conf.name}
                       <small>
-                        <a target="_blank" href="${conf.authorUrl}">
+                        <a target="_blank" href=${conf.authorUrl}>
                           ${this.hass.localize(
                             "ui.panel.page-demo.cards.demo.demo_by",
                             "name",
@@ -94,7 +94,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
     this._switching = true;
     try {
       await setDemoConfig(this.hass, this.lovelace!, index);
-    } catch (err) {
+    } catch (err: any) {
       alert("Failed to switch config :-(");
     } finally {
       this._switching = false;

demo/src/stubs/area_registry.ts

@@ -0,0 +1,7 @@
+import { AreaRegistryEntry } from "../../../src/data/area_registry";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockAreaRegistry = (
+  hass: MockHomeAssistant,
+  data: AreaRegistryEntry[] = []
+) => hass.mockWS("config/area_registry/list", () => data);

demo/src/stubs/device_registry.ts

@@ -0,0 +1,7 @@
+import { DeviceRegistryEntry } from "../../../src/data/device_registry";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockDeviceRegistry = (
+  hass: MockHomeAssistant,
+  data: DeviceRegistryEntry[] = []
+) => hass.mockWS("config/device_registry/list", () => data);

demo/src/stubs/entity_registry.ts

@@ -0,0 +1,7 @@
+import { EntityRegistryEntry } from "../../../src/data/entity_registry";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockEntityRegistry = (
+  hass: MockHomeAssistant,
+  data: EntityRegistryEntry[] = []
+) => hass.mockWS("config/entity_registry/list", () => data);

demo/src/stubs/hassio_supervisor.ts

@@ -0,0 +1,59 @@
+import { HassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
+import type { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
+
+export const mockHassioSupervisor = (hass: MockHomeAssistant) => {
+  hass.config.components.push("hassio");
+  hass.mockWS("supervisor/api", (msg) => {
+    if (msg.endpoint === "/supervisor/info") {
+      const data: HassioSupervisorInfo = {
+        version: "2021.10.dev0805",
+        version_latest: "2021.10.dev0806",
+        update_available: true,
+        channel: "dev",
+        arch: "aarch64",
+        supported: true,
+        healthy: true,
+        ip_address: "172.30.32.2",
+        wait_boot: 5,
+        timezone: "America/Los_Angeles",
+        logging: "info",
+        debug: false,
+        debug_block: false,
+        diagnostics: true,
+        addons: [
+          {
+            name: "Visual Studio Code",
+            slug: "a0d7b954_vscode",
+            description:
+              "Fully featured VSCode experience, to edit your HA config in the browser, including auto-completion!",
+            state: "started",
+            version: "3.6.2",
+            version_latest: "3.6.2",
+            update_available: false,
+            repository: "a0d7b954",
+            icon: true,
+            logo: true,
+          },
+          {
+            name: "Z-Wave JS",
+            slug: "core_zwave_js",
+            description:
+              "Control a ZWave network with Home Assistant Z-Wave JS",
+            state: "started",
+            version: "0.1.45",
+            version_latest: "0.1.45",
+            update_available: false,
+            repository: "core",
+            icon: true,
+            logo: true,
+          },
+        ] as any,
+        addons_repositories: [
+          "https://github.com/hassio-addons/repository",
+        ] as any,
+      };
+      return data;
+    }
+    return Promise.reject(`${msg.method} ${msg.endpoint} is not implemented`);
+  });
+};

demo/src/stubs/lovelace.ts

@@ -23,9 +23,9 @@ customElements.whenDefined("hui-view").then(() => {
   // eslint-disable-next-line
   const HUIView = customElements.get("hui-view");
   // Patch HUI-VIEW to make the lovelace object available to the demo card
-  const oldCreateCard = HUIView.prototype.createCardElement;
+  const oldCreateCard = HUIView!.prototype.createCardElement;
 
-  HUIView.prototype.createCardElement = function (config) {
+  HUIView!.prototype.createCardElement = function (config) {
     const el = oldCreateCard.call(this, config);
     if (el.tagName === "HA-DEMO-CARD") {
       (el as HADemoCard).lovelace = this.lovelace;

gallery/script/netlify_build_gallery

@@ -0,0 +1,35 @@
+#!/bin/bash
+
+TARGET_LABEL="Needs gallery preview"
+
+if [[ "$NETLIFY" != "true" ]]; then
+  echo "This script can only be run on Netlify"
+  exit 1
+fi
+
+function createStatus() {
+  state="$1"
+  description="$2"
+  target_url="$3"
+  curl -X POST -H "Accept: application/vnd.github.v3+json" -H "Authorization: token $GITHUB_TOKEN" \
+    "https://api.github.com/repos/home-assistant/frontend/statuses/$COMMIT_REF" \
+    -d '{"state": "'"${state}"'", "context": "Netlify/Gallery Preview Build", "description": "'"$description"'", "target_url":  "'"$target_url"'"}'
+}
+
+
+if [[ "${PULL_REQUEST}" == "false" ]]; then
+  gulp build-gallery
+else
+  if [[ "$(curl -sSLf -H "Accept: application/vnd.github.v3+json" -H "Authorization: token $GITHUB_TOKEN" \
+    "https://api.github.com/repos/home-assistant/frontend/pulls/${REVIEW_ID}" | jq '.labels[].name' -r)" =~ "$TARGET_LABEL" ]]; then
+    createStatus "pending" "Building gallery preview" "https://app.netlify.com/sites/home-assistant-gallery/deploys/$BUILD_ID"
+    gulp build-gallery
+    if [ $? -eq 0 ]; then
+      createStatus "success" "Build complete" "$DEPLOY_URL"
+    else
+      createStatus "error" "Build failed" "https://app.netlify.com/sites/home-assistant-gallery/deploys/$BUILD_ID"
+    fi
+  else
+    createStatus "success" "Build was not requested by PR label"
+  fi
+fi

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

@@ -0,0 +1,143 @@
+import { Button } from "@material/mwc-button";
+import { html, LitElement, css, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
+import { fireEvent } from "../../../src/common/dom/fire_event";
+
+@customElement("demo-black-white-row")
+class DemoBlackWhiteRow extends LitElement {
+  @property() title!: string;
+
+  @property() value!: any;
+
+  @property() disabled = false;
+
+  protected render(): TemplateResult {
+    return html`
+      <div class="row">
+        <div class="content light">
+          <ha-card .header=${this.title}>
+            <div class="card-content">
+              <slot name="light"></slot>
+            </div>
+            <div class="card-actions">
+              <mwc-button
+                .disabled=${this.disabled}
+                @click=${this.handleSubmit}
+              >
+                Submit
+              </mwc-button>
+            </div>
+          </ha-card>
+        </div>
+        <div class="content dark">
+          <ha-card .header=${this.title}>
+            <div class="card-content">
+              <slot name="dark"></slot>
+            </div>
+            <div class="card-actions">
+              <mwc-button
+                .disabled=${this.disabled}
+                @click=${this.handleSubmit}
+              >
+                Submit
+              </mwc-button>
+            </div>
+          </ha-card>
+          <pre>${JSON.stringify(this.value, undefined, 2)}</pre>
+        </div>
+      </div>
+    `;
+  }
+
+  firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector(".dark"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: false,
+      },
+      "default",
+      { dark: true }
+    );
+  }
+
+  handleSubmit(ev) {
+    const content = (ev.target as Button).closest(".content")!;
+    fireEvent(this, "submitted" as any, {
+      slot: content.classList.contains("light") ? "light" : "dark",
+    });
+  }
+
+  static styles = css`
+    .row {
+      display: flex;
+    }
+    .content {
+      padding: 50px 0;
+      background-color: var(--primary-background-color);
+    }
+    .light {
+      flex: 1;
+      padding-left: 50px;
+      padding-right: 50px;
+      box-sizing: border-box;
+    }
+    .light ha-card {
+      margin-left: auto;
+    }
+    .dark {
+      display: flex;
+      flex: 1;
+      padding-left: 50px;
+      box-sizing: border-box;
+      flex-wrap: wrap;
+    }
+    ha-card {
+      width: 400px;
+    }
+    pre {
+      width: 300px;
+      margin: 0 16px 0;
+      overflow: auto;
+      color: var(--primary-text-color);
+    }
+    .card-actions {
+      display: flex;
+      flex-direction: row-reverse;
+      border-top: none;
+    }
+    @media only screen and (max-width: 1500px) {
+      .light {
+        flex: initial;
+      }
+    }
+    @media only screen and (max-width: 1000px) {
+      .light,
+      .dark {
+        padding: 16px;
+      }
+      .row,
+      .dark {
+        flex-direction: column;
+      }
+      ha-card {
+        margin: 0 auto;
+        width: 100%;
+        max-width: 400px;
+      }
+      pre {
+        margin: 16px auto;
+      }
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-black-white-row": DemoBlackWhiteRow;
+  }
+}

gallery/src/demos/demo-automation-editor-action.ts

@@ -0,0 +1,91 @@
+/* eslint-disable lit/no-template-arrow */
+import { LitElement, TemplateResult, html } from "lit";
+import { customElement, state } from "lit/decorators";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import type { HomeAssistant } from "../../../src/types";
+import "../components/demo-black-white-row";
+import { mockEntityRegistry } from "../../../demo/src/stubs/entity_registry";
+import { mockDeviceRegistry } from "../../../demo/src/stubs/device_registry";
+import { mockAreaRegistry } from "../../../demo/src/stubs/area_registry";
+import { mockHassioSupervisor } from "../../../demo/src/stubs/hassio_supervisor";
+import "../../../src/panels/config/automation/action/ha-automation-action";
+import { HaChooseAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-choose";
+import { HaDelayAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-delay";
+import { HaDeviceAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-device_id";
+import { HaEventAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-event";
+import { HaRepeatAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-repeat";
+import { HaSceneAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-scene";
+import { HaServiceAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-service";
+import { HaWaitForTriggerAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger";
+import { HaWaitAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-wait_template";
+import { Action } from "../../../src/data/script";
+import { HaConditionAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-condition";
+
+const SCHEMAS: { name: string; actions: Action[] }[] = [
+  { name: "Event", actions: [HaEventAction.defaultConfig] },
+  { name: "Device", actions: [HaDeviceAction.defaultConfig] },
+  { name: "Service", actions: [HaServiceAction.defaultConfig] },
+  { name: "Condition", actions: [HaConditionAction.defaultConfig] },
+  { name: "Delay", actions: [HaDelayAction.defaultConfig] },
+  { name: "Scene", actions: [HaSceneAction.defaultConfig] },
+  { name: "Wait", actions: [HaWaitAction.defaultConfig] },
+  { name: "WaitForTrigger", actions: [HaWaitForTriggerAction.defaultConfig] },
+  { name: "Repeat", actions: [HaRepeatAction.defaultConfig] },
+  { name: "Choose", actions: [HaChooseAction.defaultConfig] },
+  { name: "Variables", actions: [{ variables: { hello: "1" } }] },
+];
+
+@customElement("demo-automation-editor-action")
+class DemoHaAutomationEditorAction extends LitElement {
+  @state() private hass!: HomeAssistant;
+
+  private data: any = SCHEMAS.map((info) => info.actions);
+
+  constructor() {
+    super();
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
+    mockEntityRegistry(hass);
+    mockDeviceRegistry(hass);
+    mockAreaRegistry(hass);
+    mockHassioSupervisor(hass);
+  }
+
+  protected render(): TemplateResult {
+    const valueChanged = (ev) => {
+      const sampleIdx = ev.target.sampleIdx;
+      this.data[sampleIdx] = ev.detail.value;
+      this.requestUpdate();
+    };
+    return html`
+      ${SCHEMAS.map(
+        (info, sampleIdx) => html`
+          <demo-black-white-row
+            .title=${info.name}
+            .value=${this.data[sampleIdx]}
+          >
+            ${["light", "dark"].map(
+              (slot) =>
+                html`
+                  <ha-automation-action
+                    slot=${slot}
+                    .hass=${this.hass}
+                    .actions=${this.data[sampleIdx]}
+                    .sampleIdx=${sampleIdx}
+                    @value-changed=${valueChanged}
+                  ></ha-automation-action>
+                `
+            )}
+          </demo-black-white-row>
+        `
+      )}
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-automation-editor-action": DemoHaAutomationEditorAction;
+  }
+}

gallery/src/demos/demo-automation-editor-condition.ts

@@ -0,0 +1,127 @@
+/* eslint-disable lit/no-template-arrow */
+import { LitElement, TemplateResult, html } from "lit";
+import { customElement, state } from "lit/decorators";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import type { HomeAssistant } from "../../../src/types";
+import "../components/demo-black-white-row";
+import { mockEntityRegistry } from "../../../demo/src/stubs/entity_registry";
+import { mockDeviceRegistry } from "../../../demo/src/stubs/device_registry";
+import { mockAreaRegistry } from "../../../demo/src/stubs/area_registry";
+import { mockHassioSupervisor } from "../../../demo/src/stubs/hassio_supervisor";
+import type { Condition } from "../../../src/data/automation";
+import "../../../src/panels/config/automation/condition/ha-automation-condition";
+import { HaDeviceCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-device";
+import { HaLogicalCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-logical";
+import HaNumericStateCondition from "../../../src/panels/config/automation/condition/types/ha-automation-condition-numeric_state";
+import { HaStateCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-state";
+import { HaSunCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-sun";
+import { HaTemplateCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-template";
+import { HaTimeCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-time";
+import { HaTriggerCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-trigger";
+import { HaZoneCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-zone";
+
+const SCHEMAS: { name: string; conditions: Condition[] }[] = [
+  {
+    name: "State",
+    conditions: [{ condition: "state", ...HaStateCondition.defaultConfig }],
+  },
+  {
+    name: "Numeric State",
+    conditions: [
+      { condition: "numeric_state", ...HaNumericStateCondition.defaultConfig },
+    ],
+  },
+  {
+    name: "Sun",
+    conditions: [{ condition: "sun", ...HaSunCondition.defaultConfig }],
+  },
+  {
+    name: "Zone",
+    conditions: [{ condition: "zone", ...HaZoneCondition.defaultConfig }],
+  },
+  {
+    name: "Time",
+    conditions: [{ condition: "time", ...HaTimeCondition.defaultConfig }],
+  },
+  {
+    name: "Template",
+    conditions: [
+      { condition: "template", ...HaTemplateCondition.defaultConfig },
+    ],
+  },
+  {
+    name: "Device",
+    conditions: [{ condition: "device", ...HaDeviceCondition.defaultConfig }],
+  },
+  {
+    name: "And",
+    conditions: [{ condition: "and", ...HaLogicalCondition.defaultConfig }],
+  },
+  {
+    name: "Or",
+    conditions: [{ condition: "or", ...HaLogicalCondition.defaultConfig }],
+  },
+  {
+    name: "Not",
+    conditions: [{ condition: "not", ...HaLogicalCondition.defaultConfig }],
+  },
+  {
+    name: "Trigger",
+    conditions: [{ condition: "trigger", ...HaTriggerCondition.defaultConfig }],
+  },
+];
+
+@customElement("demo-automation-editor-condition")
+class DemoHaAutomationEditorCondition extends LitElement {
+  @state() private hass!: HomeAssistant;
+
+  private data: any = SCHEMAS.map((info) => info.conditions);
+
+  constructor() {
+    super();
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
+    mockEntityRegistry(hass);
+    mockDeviceRegistry(hass);
+    mockAreaRegistry(hass);
+    mockHassioSupervisor(hass);
+  }
+
+  protected render(): TemplateResult {
+    const valueChanged = (ev) => {
+      const sampleIdx = ev.target.sampleIdx;
+      this.data[sampleIdx] = ev.detail.value;
+      this.requestUpdate();
+    };
+    return html`
+      ${SCHEMAS.map(
+        (info, sampleIdx) => html`
+          <demo-black-white-row
+            .title=${info.name}
+            .value=${this.data[sampleIdx]}
+          >
+            ${["light", "dark"].map(
+              (slot) =>
+                html`
+                  <ha-automation-condition
+                    slot=${slot}
+                    .hass=${this.hass}
+                    .conditions=${this.data[sampleIdx]}
+                    .sampleIdx=${sampleIdx}
+                    @value-changed=${valueChanged}
+                  ></ha-automation-condition>
+                `
+            )}
+          </demo-black-white-row>
+        `
+      )}
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-automation-editor-condition": DemoHaAutomationEditorCondition;
+  }
+}

gallery/src/demos/demo-automation-editor-trigger.ts

@@ -0,0 +1,159 @@
+/* eslint-disable lit/no-template-arrow */
+import { LitElement, TemplateResult, html } from "lit";
+import { customElement, state } from "lit/decorators";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import type { HomeAssistant } from "../../../src/types";
+import "../components/demo-black-white-row";
+import { mockEntityRegistry } from "../../../demo/src/stubs/entity_registry";
+import { mockDeviceRegistry } from "../../../demo/src/stubs/device_registry";
+import { mockAreaRegistry } from "../../../demo/src/stubs/area_registry";
+import { mockHassioSupervisor } from "../../../demo/src/stubs/hassio_supervisor";
+import type { Trigger } from "../../../src/data/automation";
+import { HaGeolocationTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location";
+import { HaEventTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-event";
+import { HaHassTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant";
+import { HaNumericStateTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state";
+import { HaSunTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-sun";
+import { HaTagTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-tag";
+import { HaTemplateTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-template";
+import { HaTimeTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-time";
+import { HaTimePatternTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-time_pattern";
+import { HaWebhookTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-webhook";
+import { HaZoneTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-zone";
+import { HaDeviceTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-device";
+import { HaStateTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-state";
+import { HaMQTTTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt";
+import "../../../src/panels/config/automation/trigger/ha-automation-trigger";
+
+const SCHEMAS: { name: string; triggers: Trigger[] }[] = [
+  {
+    name: "State",
+    triggers: [{ platform: "state", ...HaStateTrigger.defaultConfig }],
+  },
+
+  {
+    name: "MQTT",
+    triggers: [{ platform: "mqtt", ...HaMQTTTrigger.defaultConfig }],
+  },
+
+  {
+    name: "GeoLocation",
+    triggers: [
+      { platform: "geo_location", ...HaGeolocationTrigger.defaultConfig },
+    ],
+  },
+
+  {
+    name: "Home Assistant",
+    triggers: [{ platform: "homeassistant", ...HaHassTrigger.defaultConfig }],
+  },
+
+  {
+    name: "Numeric State",
+    triggers: [
+      { platform: "numeric_state", ...HaNumericStateTrigger.defaultConfig },
+    ],
+  },
+
+  {
+    name: "Sun",
+    triggers: [{ platform: "sun", ...HaSunTrigger.defaultConfig }],
+  },
+
+  {
+    name: "Time Pattern",
+    triggers: [
+      { platform: "time_pattern", ...HaTimePatternTrigger.defaultConfig },
+    ],
+  },
+
+  {
+    name: "Webhook",
+    triggers: [{ platform: "webhook", ...HaWebhookTrigger.defaultConfig }],
+  },
+
+  {
+    name: "Zone",
+    triggers: [{ platform: "zone", ...HaZoneTrigger.defaultConfig }],
+  },
+
+  {
+    name: "Tag",
+    triggers: [{ platform: "tag", ...HaTagTrigger.defaultConfig }],
+  },
+
+  {
+    name: "Time",
+    triggers: [{ platform: "time", ...HaTimeTrigger.defaultConfig }],
+  },
+
+  {
+    name: "Template",
+    triggers: [{ platform: "template", ...HaTemplateTrigger.defaultConfig }],
+  },
+
+  {
+    name: "Event",
+    triggers: [{ platform: "event", ...HaEventTrigger.defaultConfig }],
+  },
+
+  {
+    name: "Device Trigger",
+    triggers: [{ platform: "device", ...HaDeviceTrigger.defaultConfig }],
+  },
+];
+
+@customElement("demo-automation-editor-trigger")
+class DemoHaAutomationEditorTrigger extends LitElement {
+  @state() private hass!: HomeAssistant;
+
+  private data: any = SCHEMAS.map((info) => info.triggers);
+
+  constructor() {
+    super();
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
+    mockEntityRegistry(hass);
+    mockDeviceRegistry(hass);
+    mockAreaRegistry(hass);
+    mockHassioSupervisor(hass);
+  }
+
+  protected render(): TemplateResult {
+    const valueChanged = (ev) => {
+      const sampleIdx = ev.target.sampleIdx;
+      this.data[sampleIdx] = ev.detail.value;
+      this.requestUpdate();
+    };
+    return html`
+      ${SCHEMAS.map(
+        (info, sampleIdx) => html`
+          <demo-black-white-row
+            .title=${info.name}
+            .value=${this.data[sampleIdx]}
+          >
+            ${["light", "dark"].map(
+              (slot) =>
+                html`
+                  <ha-automation-trigger
+                    slot=${slot}
+                    .hass=${this.hass}
+                    .triggers=${this.data[sampleIdx]}
+                    .sampleIdx=${sampleIdx}
+                    @value-changed=${valueChanged}
+                  ></ha-automation-trigger>
+                `
+            )}
+          </demo-black-white-row>
+        `
+      )}
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-automation-editor-trigger": DemoHaAutomationEditorTrigger;
+  }
+}

gallery/src/demos/demo-automation-trace-timeline.ts

@@ -1,3 +1,4 @@
+/* eslint-disable lit/no-template-arrow */
 import { html, css, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../src/components/ha-card";

gallery/src/demos/demo-automation-trace.ts

@@ -1,3 +1,4 @@
+/* eslint-disable lit/no-template-arrow */
 import { html, css, LitElement, TemplateResult } from "lit";
 import "../../../src/components/ha-card";
 import "../../../src/components/trace/hat-script-graph";

gallery/src/demos/demo-ha-alert.ts

@@ -107,19 +107,21 @@ export class DemoHaAlert extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-card header="ha-alert demo">
-        ${alerts.map(
+        <div class="card-content">
-          (alert) => html`
+          ${alerts.map(
-            <ha-alert
+            (alert) => html`
-              .title=${alert.title || ""}
+              <ha-alert
-              .alertType=${alert.type}
+                .title=${alert.title || ""}
-              .dismissable=${alert.dismissable || false}
+                .alertType=${alert.type}
-              .actionText=${alert.action || ""}
+                .dismissable=${alert.dismissable || false}
-              .rtl=${alert.rtl || false}
+                .actionText=${alert.action || ""}
-            >
+                .rtl=${alert.rtl || false}
-              ${alert.description}
+              >
-            </ha-alert>
+                ${alert.description}
-          `
+              </ha-alert>
-        )}
+            `
+          )}
+        </div>
       </ha-card>
     `;
   }
@@ -130,6 +132,10 @@ export class DemoHaAlert extends LitElement {
         max-width: 600px;
         margin: 24px auto;
       }
+      ha-alert {
+        display: block;
+        margin: 24px 0;
+      }
       .condition {
         padding: 16px;
         display: flex;

gallery/src/demos/demo-ha-bar.ts

@@ -0,0 +1,85 @@
+import { html, css, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import "../../../src/components/ha-bar";
+import "../../../src/components/ha-card";
+
+const bars: {
+  min?: number;
+  max?: number;
+  value: number;
+  warning?: number;
+  error?: number;
+}[] = [
+  {
+    value: 33,
+  },
+  {
+    value: 150,
+  },
+  {
+    min: -10,
+    value: 0,
+  },
+  {
+    value: 80,
+  },
+  {
+    value: 200,
+    max: 13,
+  },
+  {
+    value: 4,
+    min: 13,
+  },
+];
+
+@customElement("demo-ha-bar")
+export class DemoHaBar extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      ${bars
+        .map((bar) => ({ min: 0, max: 100, warning: 70, error: 90, ...bar }))
+        .map(
+          (bar) => html`
+            <ha-card>
+              <div class="card-content">
+                <pre>Config: ${JSON.stringify(bar)}</pre>
+                <ha-bar
+                  class=${classMap({
+                    warning: bar.value > bar.warning,
+                    error: bar.value > bar.error,
+                  })}
+                  .min=${bar.min}
+                  .max=${bar.max}
+                  .value=${bar.value}
+                >
+                </ha-bar>
+              </div>
+            </ha-card>
+          `
+        )}
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      .warning {
+        --ha-bar-primary-color: var(--warning-color);
+      }
+      .error {
+        --ha-bar-primary-color: var(--error-color);
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-bar": DemoHaBar;
+  }
+}

gallery/src/demos/demo-ha-chip.ts

@@ -0,0 +1,61 @@
+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/ha-chip";
+import "../../../src/components/ha-svg-icon";
+
+const chips: {
+  icon?: string;
+  content?: string;
+}[] = [
+  {},
+  {
+    icon: mdiHomeAssistant,
+  },
+  {
+    content: "Content",
+  },
+  {
+    icon: mdiHomeAssistant,
+    content: "Content",
+  },
+];
+
+@customElement("demo-ha-chip")
+export class DemoHaChip extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      <ha-card header="ha-chip demo">
+        <div class="card-content">
+          ${chips.map(
+            (chip) => html`
+              <ha-chip .hasIcon=${chip.icon !== undefined}>
+                ${chip.icon
+                  ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
+                    </ha-svg-icon>`
+                  : ""}
+                ${chip.content}
+              </ha-chip>
+            `
+          )}
+        </div>
+      </ha-card>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-chip": DemoHaChip;
+  }
+}

gallery/src/demos/demo-ha-form.ts

@@ -0,0 +1,306 @@
+/* eslint-disable lit/no-template-arrow */
+import "@material/mwc-button";
+import { LitElement, TemplateResult, html } from "lit";
+import { customElement } from "lit/decorators";
+import { computeInitialHaFormData } from "../../../src/components/ha-form/compute-initial-ha-form-data";
+import type { HaFormSchema } from "../../../src/components/ha-form/types";
+import "../../../src/components/ha-form/ha-form";
+import "../components/demo-black-white-row";
+
+const SCHEMAS: {
+  title: string;
+  translations?: Record<string, string>;
+  error?: Record<string, string>;
+  schema: HaFormSchema[];
+  data?: Record<string, any>;
+}[] = [
+  {
+    title: "Authentication",
+    translations: {
+      username: "Username",
+      password: "Password",
+      invalid_login: "Invalid username or password",
+    },
+    error: {
+      base: "invalid_login",
+    },
+    schema: [
+      {
+        type: "string",
+        name: "username",
+        required: true,
+      },
+      {
+        type: "string",
+        name: "password",
+        required: true,
+      },
+    ],
+  },
+
+  {
+    title: "One of each",
+    schema: [
+      {
+        type: "constant",
+        value: "Constant Value",
+        name: "constant",
+        required: true,
+      },
+      {
+        type: "boolean",
+        name: "bool",
+        optional: true,
+        default: false,
+      },
+      {
+        type: "integer",
+        name: "int",
+        optional: true,
+        default: 10,
+      },
+      {
+        type: "float",
+        name: "float",
+        required: true,
+      },
+      {
+        type: "string",
+        name: "string",
+        optional: true,
+        default: "Default",
+      },
+      {
+        type: "select",
+        options: [
+          ["default", "default"],
+          ["other", "other"],
+        ],
+        name: "select",
+        optional: true,
+        default: "default",
+      },
+      {
+        type: "multi_select",
+        options: {
+          default: "Default",
+          other: "Other",
+        },
+        name: "multi",
+        optional: true,
+        default: ["default"],
+      },
+      {
+        type: "positive_time_period_dict",
+        name: "time",
+        required: true,
+      },
+    ],
+  },
+  {
+    title: "Numbers",
+    schema: [
+      {
+        type: "integer",
+        name: "int",
+        required: true,
+      },
+      {
+        type: "integer",
+        name: "int with default",
+        optional: true,
+        default: 10,
+      },
+      {
+        type: "integer",
+        name: "int range required",
+        required: true,
+        default: 5,
+        valueMin: 0,
+        valueMax: 10,
+      },
+      {
+        type: "integer",
+        name: "int range optional",
+        optional: true,
+        valueMin: 0,
+        valueMax: 10,
+      },
+    ],
+  },
+  {
+    title: "select",
+    schema: [
+      {
+        type: "select",
+        options: [
+          ["default", "Default"],
+          ["other", "Other"],
+        ],
+        name: "select",
+        required: true,
+        default: "default",
+      },
+      {
+        type: "select",
+        options: [
+          ["default", "Default"],
+          ["other", "Other"],
+        ],
+        name: "select optional",
+        optional: true,
+      },
+      {
+        type: "select",
+        options: [
+          ["default", "Default"],
+          ["other", "Other"],
+          ["uno", "mas"],
+          ["one", "more"],
+          ["and", "another_one"],
+          ["option", "1000"],
+        ],
+        name: "select many otions",
+        optional: true,
+        default: "default",
+      },
+    ],
+  },
+  {
+    title: "Multi select",
+    schema: [
+      {
+        type: "multi_select",
+        options: {
+          default: "Default",
+          other: "Other",
+        },
+        name: "multi",
+        required: true,
+        default: ["default"],
+      },
+      {
+        type: "multi_select",
+        options: {
+          default: "Default",
+          other: "Other",
+          uno: "mas",
+          one: "more",
+          and: "another_one",
+          option: "1000",
+        },
+        name: "multi many otions",
+        optional: true,
+        default: ["default"],
+      },
+    ],
+  },
+  {
+    title: "Field specific error",
+    data: {
+      new_password: "hello",
+      new_password_2: "bye",
+    },
+    translations: {
+      new_password: "New Password",
+      new_password_2: "Re-type Password",
+      not_match: "The passwords do not match",
+    },
+    error: {
+      new_password_2: "not_match",
+    },
+    schema: [
+      {
+        type: "string",
+        name: "new_password",
+        required: true,
+      },
+      {
+        type: "string",
+        name: "new_password_2",
+        required: true,
+      },
+    ],
+  },
+  {
+    title: "OctoPrint",
+    translations: {
+      username: "Username",
+      host: "Host",
+      port: "Port Number",
+      path: "Application Path",
+      ssl: "Use SSL",
+    },
+    schema: [
+      { type: "string", name: "username", required: true, default: "" },
+      { type: "string", name: "host", required: true, default: "" },
+      {
+        type: "integer",
+        valueMin: 1,
+        valueMax: 65535,
+        name: "port",
+        optional: true,
+        default: 80,
+      },
+      { type: "string", name: "path", optional: true, default: "/" },
+      { type: "boolean", name: "ssl", optional: true, default: false },
+    ],
+  },
+];
+
+@customElement("demo-ha-form")
+class DemoHaForm extends LitElement {
+  private data = SCHEMAS.map(
+    ({ schema, data }) => data || computeInitialHaFormData(schema)
+  );
+
+  private disabled = SCHEMAS.map(() => false);
+
+  protected render(): TemplateResult {
+    return html`
+      ${SCHEMAS.map((info, idx) => {
+        const translations = info.translations || {};
+        return html`
+          <demo-black-white-row
+            .title=${info.title}
+            .value=${this.data[idx]}
+            .disabled=${this.disabled[idx]}
+            @submitted=${() => {
+              this.disabled[idx] = true;
+              this.requestUpdate();
+              setTimeout(() => {
+                this.disabled[idx] = false;
+                this.requestUpdate();
+              }, 2000);
+            }}
+          >
+            ${["light", "dark"].map(
+              (slot) => html`
+                <ha-form
+                  slot=${slot}
+                  .data=${this.data[idx]}
+                  .schema=${info.schema}
+                  .error=${info.error}
+                  .disabled=${this.disabled[idx]}
+                  .computeError=${(error) => translations[error] || error}
+                  .computeLabel=${(schema) =>
+                    translations[schema.name] || schema.name}
+                  @value-changed=${(e) => {
+                    this.data[idx] = e.detail.value;
+                    this.requestUpdate();
+                  }}
+                ></ha-form>
+              `
+            )}
+          </demo-black-white-row>
+        `;
+      })}
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-form": DemoHaForm;
+  }
+}

gallery/src/demos/demo-ha-label-badge.ts

@@ -0,0 +1,122 @@
+import { html, css, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
+import "../../../src/components/ha-label-badge";
+import "../../../src/components/ha-card";
+
+const colors = ["#03a9f4", "#ffa600", "#43a047"];
+
+const badges: {
+  label?: string;
+  description?: string;
+  image?: string;
+}[] = [
+  {
+    label: "label",
+  },
+  {
+    label: "label",
+    description: "Description",
+  },
+  {
+    description: "Description",
+  },
+  {
+    label: "label",
+    description: "Description",
+    image: "/images/living_room.png",
+  },
+  {
+    description: "Description",
+    image: "/images/living_room.png",
+  },
+  {
+    label: "label",
+    image: "/images/living_room.png",
+  },
+  {
+    image: "/images/living_room.png",
+  },
+  {
+    label: "big label",
+  },
+  {
+    label: "big label",
+    description: "Description",
+  },
+  {
+    label: "big label",
+    description: "Description",
+    image: "/images/living_room.png",
+  },
+];
+
+@customElement("demo-ha-label-badge")
+export class DemoHaLabelBadge extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      <ha-card>
+        <div class="card-content">
+          ${badges.map(
+            (badge) => html`
+              <ha-label-badge
+                style="--ha-label-badge-color: ${colors[
+                  Math.floor(Math.random() * colors.length)
+                ]}"
+                .label=${badge.label}
+                .description=${badge.description}
+                .image=${badge.image}
+              >
+              </ha-label-badge>
+            `
+          )}
+        </div>
+      </ha-card>
+      <ha-card>
+        <div class="card-content">
+          ${badges.map(
+            (badge) => html`
+              <div class="badge">
+                <ha-label-badge
+                  style="--ha-label-badge-color: ${colors[
+                    Math.floor(Math.random() * colors.length)
+                  ]}"
+                  .label=${badge.label}
+                  .description=${badge.description}
+                  .image=${badge.image}
+                >
+                </ha-label-badge>
+                <pre>${JSON.stringify(badge, null, 2)}</pre>
+              </div>
+            `
+          )}
+        </div>
+      </ha-card>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      pre {
+        margin-left: 16px;
+        background-color: var(--markdown-code-background-color);
+        padding: 8px;
+      }
+      .badge {
+        display: flex;
+        flex-direction: row;
+        margin-bottom: 16px;
+        align-items: center;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-label-badge": DemoHaLabelBadge;
+  }
+}

gallery/src/demos/demo-ha-selector.ts

@@ -0,0 +1,131 @@
+/* eslint-disable lit/no-template-arrow */
+import "@material/mwc-button";
+import { LitElement, TemplateResult, css, html } from "lit";
+import { customElement, state } from "lit/decorators";
+import "../../../src/components/ha-selector/ha-selector";
+import "../../../src/components/ha-settings-row";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import type { HomeAssistant } from "../../../src/types";
+import "../components/demo-black-white-row";
+import { BlueprintInput } from "../../../src/data/blueprint";
+import { mockEntityRegistry } from "../../../demo/src/stubs/entity_registry";
+import { mockDeviceRegistry } from "../../../demo/src/stubs/device_registry";
+import { mockAreaRegistry } from "../../../demo/src/stubs/area_registry";
+import { mockHassioSupervisor } from "../../../demo/src/stubs/hassio_supervisor";
+
+const SCHEMAS: {
+  name: string;
+  input: Record<string, BlueprintInput | null>;
+}[] = [
+  {
+    name: "One of each",
+    input: {
+      entity: { name: "Entity", selector: { entity: {} } },
+      device: { name: "Device", selector: { device: {} } },
+      addon: { name: "Addon", selector: { addon: {} } },
+      area: { name: "Area", selector: { area: {} } },
+      target: { name: "Target", selector: { target: {} } },
+      number_box: {
+        name: "Number Box",
+        selector: {
+          number: {
+            min: 0,
+            max: 10,
+            mode: "box",
+          },
+        },
+      },
+      number_slider: {
+        name: "Number Slider",
+        selector: {
+          number: {
+            min: 0,
+            max: 10,
+            mode: "slider",
+          },
+        },
+      },
+      boolean: { name: "Boolean", selector: { boolean: {} } },
+      time: { name: "Time", selector: { time: {} } },
+      action: { name: "Action", selector: { action: {} } },
+      text: { name: "Text", selector: { text: { multiline: false } } },
+      text_multiline: {
+        name: "Text multiline",
+        selector: { text: { multiline: true } },
+      },
+      object: { name: "Object", selector: { object: {} } },
+      select: {
+        name: "Select",
+        selector: { select: { options: ["Option 1", "Option 2"] } },
+      },
+    },
+  },
+];
+
+@customElement("demo-ha-selector")
+class DemoHaSelector extends LitElement {
+  @state() private hass!: HomeAssistant;
+
+  private data = SCHEMAS.map(() => ({}));
+
+  constructor() {
+    super();
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
+    mockEntityRegistry(hass);
+    mockDeviceRegistry(hass);
+    mockAreaRegistry(hass);
+    mockHassioSupervisor(hass);
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      ${SCHEMAS.map((info, idx) => {
+        const data = this.data[idx];
+        const valueChanged = (ev) => {
+          this.data[idx] = {
+            ...data,
+            [ev.target.key]: ev.detail.value,
+          };
+          this.requestUpdate();
+        };
+        return html`
+          <demo-black-white-row .title=${info.name} .value=${this.data[idx]}>
+            ${["light", "dark"].map((slot) =>
+              Object.entries(info.input).map(
+                ([key, value]) =>
+                  html`
+                    <ha-settings-row narrow slot=${slot}>
+                      <span slot="heading">${value?.name || key}</span>
+                      <span slot="description">${value?.description}</span>
+                      <ha-selector
+                        .hass=${this.hass}
+                        .selector=${value!.selector}
+                        .key=${key}
+                        .value=${data[key] ?? value!.default}
+                        @value-changed=${valueChanged}
+                      ></ha-selector>
+                    </ha-settings-row>
+                  `
+              )
+            )}
+          </demo-black-white-row>
+        `;
+      })}
+    `;
+  }
+
+  static styles = css`
+    paper-input,
+    ha-selector {
+      width: 60;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-selector": DemoHaSelector;
+  }
+}

gallery/src/demos/demo-integration-card.ts

@@ -187,6 +187,7 @@ const createEntityRegistryEntries = (
     device_id: "mock-device-id",
     area_id: null,
     disabled_by: null,
+    entity_category: null,
     entity_id: "binary_sensor.updater",
     name: null,
     icon: null,
@@ -211,6 +212,7 @@ const createDeviceRegistryEntries = (
     area_id: null,
     name_by_user: null,
     disabled_by: null,
+    configuration_url: null,
   },
 ];
 

gallery/src/demos/demo-util-long-press.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import { html, LitElement, TemplateResult } from "lit";
+import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import "../../../src/components/ha-card";
 import { ActionHandlerEvent } from "../../../src/data/lovelace";
@@ -9,7 +9,6 @@ import { actionHandler } from "../../../src/panels/lovelace/common/directives/ac
 export class DemoUtilLongPress extends LitElement {
   protected render(): TemplateResult {
     return html`
-      ${this.renderStyle()}
       ${[1, 2, 3].map(
         () => html`
           <ha-card>
@@ -41,26 +40,22 @@ export class DemoUtilLongPress extends LitElement {
     area.scrollTop = area.scrollHeight;
   }
 
-  private renderStyle() {
+  static styles = css`
-    return html`
+    ha-card {
-      <style>
+      width: 200px;
-        ha-card {
+      margin: calc(42vh - 140px) auto;
-          width: 200px;
+      padding: 8px;
-          margin: calc(42vh - 140px) auto;
+      text-align: center;
-          padding: 8px;
+    }
-          text-align: center;
+    ha-card:first-of-type {
-        }
+      margin-top: 16px;
-        ha-card:first-of-type {
+    }
-          margin-top: 16px;
+    ha-card:last-of-type {
-        }
+      margin-bottom: 16px;
-        ha-card:last-of-type {
+    }
-          margin-bottom: 16px;
-        }
 
-        textarea {
+    textarea {
-          height: 50px;
+      height: 50px;
-        }
+    }
-      </style>
+  `;
-    `;
-  }
 }

gallery/src/ha-gallery.js

@@ -65,10 +65,11 @@ class HaGallery extends PolymerElement {
         <app-header slot="header" fixed>
           <app-toolbar>
             <ha-icon-button
-              icon="hass:arrow-left"
               on-click="_backTapped"
               class$="[[_computeHeaderButtonClass(_demo)]]"
-            ></ha-icon-button>
+            >
+              <ha-icon icon="hass:arrow-left"></ha-icon>
+            </ha-icon-button>
             <div main-title>
               [[_withDefault(_demo, "Home Assistant Gallery")]]
             </div>

hassio/src/addon-store/hassio-addon-repository.ts

@@ -4,6 +4,7 @@ import { property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { navigate } from "../../../src/common/navigate";
+import { caseInsensitiveStringCompare } from "../../../src/common/string/compare";
 import "../../../src/components/ha-card";
 import {
   HassioAddonInfo,
@@ -32,7 +33,7 @@ class HassioAddonRepositoryEl extends LitElement {
         return filterAndSort(addons, filter);
       }
       return addons.sort((a, b) =>
-        a.name.toUpperCase() < b.name.toUpperCase() ? -1 : 1
+        caseInsensitiveStringCompare(a.name, b.name)
       );
     }
   );

hassio/src/addon-store/hassio-addon-store.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
@@ -18,7 +17,7 @@ import { navigate } from "../../../src/common/navigate";
 import "../../../src/common/search/search-input";
 import { extractSearchParam } from "../../../src/common/url/search-params";
 import "../../../src/components/ha-button-menu";
-import "../../../src/components/ha-svg-icon";
+import "../../../src/components/ha-icon-button";
 import {
   HassioAddonInfo,
   HassioAddonRepository,
@@ -92,9 +91,11 @@ class HassioAddonStore extends LitElement {
           slot="toolbar-icon"
           @action=${this._handleAction}
         >
-          <mwc-icon-button slot="trigger" alt="menu">
+          <ha-icon-button
-            <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+            .label=${this.supervisor.localize("common.menu")}
-          </mwc-icon-button>
+            .path=${mdiDotsVertical}
+            slot="trigger"
+          ></ha-icon-button>
           <mwc-list-item>
             ${this.supervisor.localize("store.repositories")}
           </mwc-list-item>
@@ -113,6 +114,7 @@ class HassioAddonStore extends LitElement {
           : html`
               <div class="search">
                 <search-input
+                  .hass=${this.hass}
                   no-label-float
                   no-underline
                   .filter=${this._filter}

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

@@ -15,12 +15,13 @@ import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
+import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-button-menu";
 import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-form/ha-form";
-import type { HaFormSchema } from "../../../../src/components/ha-form/ha-form";
+import type { HaFormSchema } from "../../../../src/components/ha-form/types";
 import "../../../../src/components/ha-formfield";
+import "../../../../src/components/ha-icon-button";
 import "../../../../src/components/ha-switch";
 import "../../../../src/components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../src/components/ha-yaml-editor";
@@ -77,6 +78,18 @@ class HassioAddonConfig extends LitElement {
     this.addon.translations.en?.configuration?.[entry.name].name ||
     entry.name;
 
+  private _schema = memoizeOne((schema: HaFormSchema[]): HaFormSchema[] =>
+    // @ts-expect-error supervisor does not implement [string, string] for select.options[]
+    schema.map((entry) =>
+      entry.type === "select"
+        ? {
+            ...entry,
+            options: entry.options.map((option) => [option, option]),
+          }
+        : entry
+    )
+  );
+
   private _filteredShchema = memoizeOne(
     (options: Record<string, unknown>, schema: HaFormSchema[]) =>
       schema.filter((entry) => entry.name in options || entry.required)
@@ -100,9 +113,11 @@ class HassioAddonConfig extends LitElement {
           </h2>
           <div class="card-menu">
             <ha-button-menu corner="BOTTOM_START" @action=${this._handleAction}>
-              <mwc-icon-button slot="trigger">
+              <ha-icon-button
-                <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+                .label=${this.hass.localize("common.menu")}
-              </mwc-icon-button>
+                .path=${mdiDotsVertical}
+                slot="trigger"
+              ></ha-icon-button>
               <mwc-list-item .disabled=${!this._canShowSchema}>
                 ${this._yamlMode
                   ? this.supervisor.localize(
@@ -125,12 +140,14 @@ class HassioAddonConfig extends LitElement {
                 .data=${this._options!}
                 @value-changed=${this._configChanged}
                 .computeLabel=${this.computeLabel}
-                .schema=${this._showOptional
+                .schema=${this._schema(
-                  ? this.addon.schema!
+                  this._showOptional
-                  : this._filteredShchema(
+                    ? this.addon.schema!
-                      this.addon.options,
+                    : this._filteredShchema(
-                      this.addon.schema!
+                        this.addon.options,
-                    )}
+                        this.addon.schema!
+                      )
+                )}
               ></ha-form>`
             : html` <ha-yaml-editor
                 @value-changed=${this._configChanged}
@@ -259,7 +276,7 @@ class HassioAddonConfig extends LitElement {
         path: "options",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
+    } catch (err: any) {
       this._error = this.supervisor.localize(
         "addon.common.update_available",
         "error",
@@ -300,7 +317,7 @@ class HassioAddonConfig extends LitElement {
       if (this.addon?.state === "started") {
         await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
-    } catch (err) {
+    } catch (err: any) {
       this._error = this.supervisor.localize(
         "addon.failed_to_save",
         "error",

hassio/src/addon-view/config/hassio-addon-network.ts

@@ -89,9 +89,9 @@ class HassioAddonNetwork extends LitElement {
                     <td>
                       <paper-input
                         @value-changed=${this._configChanged}
-                        placeholder="${this.supervisor.localize(
+                        placeholder=${this.supervisor.localize(
                           "addon.configuration.network.disabled"
-                        )}"
+                        )}
                         .value=${item.host ? String(item.host) : ""}
                         .container=${item.container}
                         no-label-float
@@ -171,7 +171,7 @@ class HassioAddonNetwork extends LitElement {
       if (this.addon?.state === "started") {
         await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
-    } catch (err) {
+    } catch (err: any) {
       this._error = this.supervisor.localize(
         "addon.failed_to_reset",
         "error",
@@ -207,7 +207,7 @@ class HassioAddonNetwork extends LitElement {
       if (this.addon?.state === "started") {
         await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
-    } catch (err) {
+    } catch (err: any) {
       this._error = this.supervisor.localize(
         "addon.failed_to_save",
         "error",

hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts

@@ -79,7 +79,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
         this.hass,
         this.addon!.slug
       );
-    } catch (err) {
+    } catch (err: any) {
       this._error = this.supervisor.localize(
         "addon.documentation.get_logs",
         "error",

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

@@ -222,7 +222,7 @@ class HassioAddonDashboard extends LitElement {
     try {
       const addoninfo = await fetchHassioAddonInfo(this.hass, addon);
       this.addon = addoninfo;
-    } catch (err) {
+    } catch (err: any) {
       this._error = `Error fetching addon info: ${extractApiErrorMessage(err)}`;
       this.addon = undefined;
     }

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

@@ -11,6 +11,12 @@ import {
   mdiHomeAssistant,
   mdiKey,
   mdiNetwork,
+  mdiNumeric1,
+  mdiNumeric2,
+  mdiNumeric3,
+  mdiNumeric4,
+  mdiNumeric5,
+  mdiNumeric6,
   mdiPound,
   mdiShield,
 } from "@mdi/js";
@@ -25,7 +31,7 @@ import "../../../../src/components/buttons/ha-call-api-button";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-label-badge";
+import "../../../../src/components/ha-chip";
 import "../../../../src/components/ha-markdown";
 import "../../../../src/components/ha-settings-row";
 import "../../../../src/components/ha-svg-icon";
@@ -73,6 +79,15 @@ const STAGE_ICON = {
   deprecated: mdiExclamationThick,
 };
 
+const RATING_ICON = {
+  1: mdiNumeric1,
+  2: mdiNumeric2,
+  3: mdiNumeric3,
+  4: mdiNumeric4,
+  5: mdiNumeric5,
+  6: mdiNumeric6,
+};
+
 @customElement("hassio-addon-info")
 class HassioAddonInfo extends LitElement {
   @property({ type: Boolean }) public narrow!: boolean;
@@ -123,18 +138,18 @@ class HassioAddonInfo extends LitElement {
               <div class="card-content">
                 <hassio-card-content
                   .hass=${this.hass}
-                  .title="${this.supervisor.localize(
+                  .title=${this.supervisor.localize(
                     "addon.dashboard.new_update_available",
                     "name",
                     this.addon.name,
                     "version",
                     this.addon.version_latest
-                  )}"
+                  )}
-                  .description="${this.supervisor.localize(
+                  .description=${this.supervisor.localize(
                     "common.running_version",
                     "version",
                     this.addon.version
-                  )}"
+                  )}
                   icon=${mdiArrowUpBoldCircle}
                   iconClass="update"
                 ></hassio-card-content>
@@ -180,24 +195,21 @@ class HassioAddonInfo extends LitElement {
         : ""}
       ${!this.addon.protected
         ? html`
-        <ha-card class="warning">
+            <ha-alert
-          <h1 class="card-header">${this.supervisor.localize(
+              alert-type="error"
-            "addon.dashboard.protection_mode.title"
+              .title=${this.supervisor.localize(
-          )}
+                "addon.dashboard.protection_mode.title"
-          </h1>
+              )}
-          <div class="card-content">
+              .actionText=${this.supervisor.localize(
-          ${this.supervisor.localize("addon.dashboard.protection_mode.content")}
-          </div>
-          <div class="card-actions protection-enable">
-              <mwc-button @click=${this._protectionToggled}>
-              ${this.supervisor.localize(
                 "addon.dashboard.protection_mode.enable"
               )}
-              </mwc-button>
+              @alert-action-clicked=${this._protectionToggled}
-            </div>
+            >
-          </div>
+              ${this.supervisor.localize(
-        </ha-card>
+                "addon.dashboard.protection_mode.content"
-      `
+              )}
+            </ha-alert>
+          `
         : ""}
 
       <ha-card>
@@ -249,12 +261,169 @@ class HassioAddonInfo extends LitElement {
                 >`}
           </div>
 
+          <div class="capabilities">
+            ${this.addon.stage !== "stable"
+              ? 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>
+                  ${this.supervisor.localize(
+                    `addon.dashboard.capability.stages.${this.addon.stage}`
+                  )}
+                </ha-chip>`
+              : ""}
+
+            <ha-chip
+              hasIcon
+              class=${classMap({
+                green: [5, 6].includes(Number(this.addon.rating)),
+                yellow: [3, 4].includes(Number(this.addon.rating)),
+                red: [1, 2].includes(Number(this.addon.rating)),
+              })}
+              @click=${this._showMoreInfo}
+              id="rating"
+            >
+              <ha-svg-icon slot="icon" .path=${RATING_ICON[this.addon.rating]}>
+              </ha-svg-icon>
+
+              ${this.supervisor.localize(
+                "addon.dashboard.capability.label.rating"
+              )}
+            </ha-chip>
+            ${this.addon.host_network
+              ? html`
+                  <ha-chip
+                    hasIcon
+                    @click=${this._showMoreInfo}
+                    id="host_network"
+                  >
+                    <ha-svg-icon slot="icon" .path=${mdiNetwork}> </ha-svg-icon>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.host"
+                    )}
+                  </ha-chip>
+                `
+              : ""}
+            ${this.addon.full_access
+              ? html`
+                  <ha-chip
+                    hasIcon
+                    @click=${this._showMoreInfo}
+                    id="full_access"
+                  >
+                    <ha-svg-icon slot="icon" .path=${mdiChip}></ha-svg-icon>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.hardware"
+                    )}
+                  </ha-chip>
+                `
+              : ""}
+            ${this.addon.homeassistant_api
+              ? html`
+                  <ha-chip
+                    hasIcon
+                    @click=${this._showMoreInfo}
+                    id="homeassistant_api"
+                  >
+                    <ha-svg-icon
+                      slot="icon"
+                      .path=${mdiHomeAssistant}
+                    ></ha-svg-icon>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.core"
+                    )}
+                  </ha-chip>
+                `
+              : ""}
+            ${this._computeHassioApi
+              ? html`
+                  <ha-chip hasIcon @click=${this._showMoreInfo} id="hassio_api">
+                    <ha-svg-icon
+                      slot="icon"
+                      .path=${mdiHomeAssistant}
+                    ></ha-svg-icon>
+                    ${this.supervisor.localize(
+                      `addon.dashboard.capability.role.${this.addon.hassio_role}`
+                    ) || this.addon.hassio_role}
+                  </ha-chip>
+                `
+              : ""}
+            ${this.addon.docker_api
+              ? html`
+                  <ha-chip hasIcon @click=${this._showMoreInfo} id="docker_api">
+                    <ha-svg-icon slot="icon" .path=${mdiDocker}></ha-svg-icon>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.docker"
+                    )}
+                  </ha-chip>
+                `
+              : ""}
+            ${this.addon.host_pid
+              ? html`
+                  <ha-chip hasIcon @click=${this._showMoreInfo} id="host_pid">
+                    <ha-svg-icon slot="icon" .path=${mdiPound}></ha-svg-icon>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.host_pid"
+                    )}
+                  </ha-chip>
+                `
+              : ""}
+            ${this.addon.apparmor !== "default"
+              ? html`
+                  <ha-chip
+                    hasIcon
+                    @click=${this._showMoreInfo}
+                    class=${this._computeApparmorClassName}
+                    id="apparmor"
+                  >
+                    <ha-svg-icon slot="icon" .path=${mdiShield}></ha-svg-icon>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.apparmor"
+                    )}
+                  </ha-chip>
+                `
+              : ""}
+            ${this.addon.auth_api
+              ? html`
+                  <ha-chip hasIcon @click=${this._showMoreInfo} id="auth_api">
+                    <ha-svg-icon slot="icon" .path=${mdiKey}></ha-svg-icon>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.auth"
+                    )}
+                  </ha-chip>
+                `
+              : ""}
+            ${this.addon.ingress
+              ? html`
+                  <ha-chip hasIcon @click=${this._showMoreInfo} id="ingress">
+                    <ha-svg-icon
+                      slot="icon"
+                      .path=${mdiCursorDefaultClickOutline}
+                    ></ha-svg-icon>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.ingress"
+                    )}
+                  </ha-chip>
+                `
+              : ""}
+          </div>
+
           <div class="description light-color">
             ${this.addon.description}.<br />
             ${this.supervisor.localize(
               "addon.dashboard.visit_addon_page",
               "name",
-              html`<a href="${this.addon.url!}" target="_blank" rel="noreferrer"
+              html`<a href=${this.addon.url!} target="_blank" rel="noreferrer"
                 >${this.addon.name}</a
               >`
             )}
@@ -269,178 +438,13 @@ class HassioAddonInfo extends LitElement {
                     />
                   `
                 : ""}
-              <div class="security">
-                ${this.addon.stage !== "stable"
-                  ? html` <ha-label-badge
-                      class=${classMap({
-                        yellow: this.addon.stage === "experimental",
-                        red: this.addon.stage === "deprecated",
-                      })}
-                      @click=${this._showMoreInfo}
-                      id="stage"
-                      .label=${this.supervisor.localize(
-                        "addon.dashboard.capability.label.stage"
-                      )}
-                      description=""
-                    >
-                      <ha-svg-icon
-                        .path=${STAGE_ICON[this.addon.stage]}
-                      ></ha-svg-icon>
-                    </ha-label-badge>`
-                  : ""}
-
-                <ha-label-badge
-                  class=${classMap({
-                    green: [5, 6].includes(Number(this.addon.rating)),
-                    yellow: [3, 4].includes(Number(this.addon.rating)),
-                    red: [1, 2].includes(Number(this.addon.rating)),
-                  })}
-                  @click=${this._showMoreInfo}
-                  id="rating"
-                  .value=${this.addon.rating}
-                  label="rating"
-                  description=""
-                ></ha-label-badge>
-                ${this.addon.host_network
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        id="host_network"
-                        .label=${this.supervisor.localize(
-                          "addon.dashboard.capability.label.host"
-                        )}
-                        description=""
-                      >
-                        <ha-svg-icon .path=${mdiNetwork}></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-                ${this.addon.full_access
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        id="full_access"
-                        .label=${this.supervisor.localize(
-                          "addon.dashboard.capability.label.hardware"
-                        )}
-                        description=""
-                      >
-                        <ha-svg-icon .path=${mdiChip}></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-                ${this.addon.homeassistant_api
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        id="homeassistant_api"
-                        .label=${this.supervisor.localize(
-                          "addon.dashboard.capability.label.hass"
-                        )}
-                        description=""
-                      >
-                        <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-                ${this._computeHassioApi
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        id="hassio_api"
-                        .label=${this.supervisor.localize(
-                          "addon.dashboard.capability.label.hassio"
-                        )}
-                        .description=${this.supervisor.localize(
-                          `addon.dashboard.capability.role.${this.addon.hassio_role}`
-                        ) || this.addon.hassio_role}
-                      >
-                        <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-                ${this.addon.docker_api
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        id="docker_api"
-                        .label=".${this.supervisor.localize(
-                          "addon.dashboard.capability.label.docker"
-                        )}"
-                        description=""
-                      >
-                        <ha-svg-icon .path=${mdiDocker}></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-                ${this.addon.host_pid
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        id="host_pid"
-                        .label=${this.supervisor.localize(
-                          "addon.dashboard.capability.label.host_pid"
-                        )}
-                        description=""
-                      >
-                        <ha-svg-icon .path=${mdiPound}></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-                ${this.addon.apparmor
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        class=${this._computeApparmorClassName}
-                        id="apparmor"
-                        .label=${this.supervisor.localize(
-                          "addon.dashboard.capability.label.apparmor"
-                        )}
-                        description=""
-                      >
-                        <ha-svg-icon .path=${mdiShield}></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-                ${this.addon.auth_api
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        id="auth_api"
-                        .label=${this.supervisor.localize(
-                          "addon.dashboard.capability.label.auth"
-                        )}
-                        description=""
-                      >
-                        <ha-svg-icon .path=${mdiKey}></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-                ${this.addon.ingress
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        id="ingress"
-                        .label=${this.supervisor.localize(
-                          "addon.dashboard.capability.label.ingress"
-                        )}
-                        description=""
-                      >
-                        <ha-svg-icon
-                          .path=${mdiCursorDefaultClickOutline}
-                        ></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-              </div>
-
               ${this.addon.version
                 ? html`
                     <div
-                      class="${classMap({
+                      class=${classMap({
                         "addon-options": true,
                         started: this.addon.state === "started",
-                      })}"
+                      })}
                     >
                       <ha-settings-row ?three-line=${this.narrow}>
                         <span slot="heading">
@@ -796,7 +800,7 @@ class HassioAddonInfo extends LitElement {
         path: "option",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
+    } catch (err: any) {
       this._error = this.supervisor.localize(
         "addon.failed_to_save",
         "error",
@@ -818,7 +822,7 @@ class HassioAddonInfo extends LitElement {
         path: "option",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
+    } catch (err: any) {
       this._error = this.supervisor.localize(
         "addon.failed_to_save",
         "error",
@@ -840,7 +844,7 @@ class HassioAddonInfo extends LitElement {
         path: "option",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
+    } catch (err: any) {
       this._error = this.supervisor.localize(
         "addon.failed_to_save",
         "error",
@@ -862,7 +866,7 @@ class HassioAddonInfo extends LitElement {
         path: "security",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
+    } catch (err: any) {
       this._error = this.supervisor.localize(
         "addon.failed_to_save",
         "error",
@@ -884,7 +888,7 @@ class HassioAddonInfo extends LitElement {
         path: "option",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
+    } catch (err: any) {
       this._error = this.supervisor.localize(
         "addon.failed_to_save",
         "error",
@@ -912,7 +916,7 @@ class HassioAddonInfo extends LitElement {
         title: this.supervisor.localize("addon.dashboard.changelog"),
         content,
       });
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize(
           "addon.dashboard.action_error.get_changelog"
@@ -934,7 +938,7 @@ class HassioAddonInfo extends LitElement {
         path: "install",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize("addon.dashboard.action_error.install"),
         text: extractApiErrorMessage(err),
@@ -955,7 +959,7 @@ class HassioAddonInfo extends LitElement {
         path: "stop",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize("addon.dashboard.action_error.stop"),
         text: extractApiErrorMessage(err),
@@ -976,7 +980,7 @@ class HassioAddonInfo extends LitElement {
         path: "stop",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize("addon.dashboard.action_error.restart"),
         text: extractApiErrorMessage(err),
@@ -1035,7 +1039,7 @@ class HassioAddonInfo extends LitElement {
         button.progress = false;
         return;
       }
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: "Failed to validate addon configuration",
         text: extractApiErrorMessage(err),
@@ -1053,7 +1057,7 @@ class HassioAddonInfo extends LitElement {
         path: "start",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize("addon.dashboard.action_error.start"),
         text: extractApiErrorMessage(err),
@@ -1091,7 +1095,7 @@ class HassioAddonInfo extends LitElement {
         path: "uninstall",
       };
       fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize(
           "addon.dashboard.action_error.uninstall"
@@ -1177,34 +1181,31 @@ class HassioAddonInfo extends LitElement {
         .description a {
           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-label-badge-color: var(--label-badge-red, #df4c1e);
+          --ha-chip-background-color: var(--label-badge-red, #df4c1e);
         }
         .blue {
-          --ha-label-badge-color: var(--label-badge-blue, #039be5);
+          --ha-chip-background-color: var(--label-badge-blue, #039be5);
         }
         .green {
-          --ha-label-badge-color: var(--label-badge-green, #0da035);
+          --ha-chip-background-color: var(--label-badge-green, #0da035);
         }
         .yellow {
-          --ha-label-badge-color: var(--label-badge-yellow, #f4b400);
+          --ha-chip-background-color: var(--label-badge-yellow, #f4b400);
         }
-        .security {
+        .capabilities {
           margin-bottom: 16px;
         }
         .card-actions {
           justify-content: space-between;
           display: flex;
         }
-        .security h3 {
-          margin-bottom: 8px;
-          font-weight: normal;
-        }
-        .security ha-label-badge {
-          cursor: pointer;
-          margin-right: 4px;
-          --ha-label-badge-padding: 8px 0 0 0;
-        }
         .changelog {
           display: contents;
         }
@@ -1244,6 +1245,9 @@ class HassioAddonInfo extends LitElement {
         }
 
         @media (max-width: 720px) {
+          ha-chip {
+            line-height: 36px;
+          }
           .addon-options {
             max-width: 100%;
           }

hassio/src/addon-view/log/hassio-addon-logs.ts

@@ -71,7 +71,7 @@ class HassioAddonLogs extends LitElement {
     this._error = undefined;
     try {
       this._content = await fetchHassioAddonLogs(this.hass, this.addon.slug);
-    } catch (err) {
+    } catch (err: any) {
       this._error = this.supervisor.localize(
         "addon.logs.get_logs",
         "error",

hassio/src/backups/hassio-backups.ts

@@ -14,7 +14,7 @@ import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
-import relativeTime from "../../../src/common/datetime/relative_time";
+import { relativeTime } from "../../../src/common/datetime/relative_time";
 import { HASSDomEvent } from "../../../src/common/dom/fire_event";
 import {
   DataTableColumnContainer,
@@ -23,7 +23,8 @@ import {
 } from "../../../src/components/data-table/ha-data-table";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-fab";
-import { extractApiErrorMessage } from "../../../src/data/hassio/common";
+import "../../../src/components/ha-icon-button";
+import "../../../src/components/ha-svg-icon";
 import {
   fetchHassioBackups,
   friendlyFolderName,
@@ -31,6 +32,7 @@ import {
   reloadHassioBackups,
   removeBackup,
 } from "../../../src/data/hassio/backup";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import {
   showAlertDialog,
@@ -40,9 +42,9 @@ import "../../../src/layouts/hass-tabs-subpage-data-table";
 import type { HaTabsSubpageDataTable } from "../../../src/layouts/hass-tabs-subpage-data-table";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
-import { showHassioCreateBackupDialog } from "../dialogs/backup/show-dialog-hassio-create-backup";
-import { showHassioBackupDialog } from "../dialogs/backup/show-dialog-hassio-backup";
 import { showBackupUploadDialog } from "../dialogs/backup/show-dialog-backup-upload";
+import { showHassioBackupDialog } from "../dialogs/backup/show-dialog-hassio-backup";
+import { showHassioCreateBackupDialog } from "../dialogs/backup/show-dialog-hassio-create-backup";
 import { supervisorTabs } from "../hassio-tabs";
 import { hassioStyle } from "../resources/hassio-style";
 
@@ -133,7 +135,7 @@ export class HassioBackups extends LitElement {
         filterable: true,
         sortable: true,
         template: (entry: string) =>
-          relativeTime(new Date(entry), this.hass.localize),
+          relativeTime(new Date(entry), this.hass.locale),
       },
       secondary: {
         title: "",
@@ -179,9 +181,11 @@ export class HassioBackups extends LitElement {
           slot="toolbar-icon"
           @action=${this._handleAction}
         >
-          <mwc-icon-button slot="trigger" alt="menu">
+          <ha-icon-button
-            <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+            .label=${this.hass.localize("common.menu")}
-          </mwc-icon-button>
+            .path=${mdiDotsVertical}
+            slot="trigger"
+          ></ha-icon-button>
           <mwc-list-item>
             ${this.supervisor?.localize("common.reload")}
           </mwc-list-item>
@@ -216,13 +220,15 @@ export class HassioBackups extends LitElement {
                       </mwc-button>
                     `
                   : html`
-                      <mwc-icon-button
+                      <ha-icon-button
+                        .label=${this.supervisor.localize(
+                          "snapshot.delete_selected"
+                        )}
+                        .path=${mdiDelete}
                         id="delete-btn"
                         class="warning"
                         @click=${this._deleteSelected}
-                      >
+                      ></ha-icon-button>
-                        <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
-                      </mwc-icon-button>
                       <paper-tooltip animation-delay="0" for="delete-btn">
                         ${this.supervisor.localize("backup.delete_selected")}
                       </paper-tooltip>
@@ -294,7 +300,7 @@ export class HassioBackups extends LitElement {
       await Promise.all(
         this._selectedBackups.map((slug) => removeBackup(this.hass, slug))
       );
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize("backup.failed_to_delete"),
         text: extractApiErrorMessage(err),
@@ -368,7 +374,7 @@ export class HassioBackups extends LitElement {
           margin-right: -12px;
         }
         .header-btns > mwc-button,
-        .header-btns > mwc-icon-button {
+        .header-btns > ha-icon-button {
           margin: 8px;
         }
       `,

hassio/src/components/hassio-card-content.ts

@@ -1,7 +1,6 @@
 import { mdiHelpCircle } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
-import "../../../src/components/ha-relative-time";
 import "../../../src/components/ha-svg-icon";
 import { HomeAssistant } from "../../../src/types";
 
@@ -19,8 +18,6 @@ class HassioCardContent extends LitElement {
 
   @property() public topbarClass?: string;
 
-  @property() public datetime?: string;
-
   @property() public iconTitle?: string;
 
   @property() public iconClass?: string;
@@ -37,7 +34,7 @@ class HassioCardContent extends LitElement {
       ${this.iconImage
         ? html`
             <div class="icon_image ${this.iconClass}">
-              <img src="${this.iconImage}" .title=${this.iconTitle} />
+              <img src=${this.iconImage} .title=${this.iconTitle} />
               <div></div>
             </div>
           `
@@ -56,15 +53,6 @@ class HassioCardContent extends LitElement {
             /* treat as available when undefined */
             this.available === false ? " (Not available)" : ""
           }
-          ${this.datetime
-            ? html`
-                <ha-relative-time
-                  .hass=${this.hass}
-                  class="addition"
-                  .datetime=${this.datetime}
-                ></ha-relative-time>
-              `
-            : undefined}
         </div>
       </div>
     `;
@@ -106,9 +94,6 @@ class HassioCardContent extends LitElement {
         height: 2.4em;
         line-height: 1.2em;
       }
-      ha-relative-time {
-        display: block;
-      }
       .icon_image img {
         max-height: 40px;
         max-width: 40px;

hassio/src/components/hassio-upload-backup.ts

@@ -1,4 +1,3 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiFolderUpload } from "@mdi/js";
 import "@polymer/paper-input/paper-input-container";
 import { html, LitElement, TemplateResult } from "lit";
@@ -6,9 +5,8 @@ import { customElement, state } from "lit/decorators";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/ha-circular-progress";
 import "../../../src/components/ha-file-upload";
-import "../../../src/components/ha-svg-icon";
-import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import { HassioBackup, uploadBackup } from "../../../src/data/hassio/backup";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
 import { HomeAssistant } from "../../../src/types";
 
@@ -31,6 +29,7 @@ export class HassioUploadBackup extends LitElement {
   public render(): TemplateResult {
     return html`
       <ha-file-upload
+        .hass=${this.hass}
         .uploading=${this._uploading}
         .icon=${mdiFolderUpload}
         accept="application/x-tar"
@@ -70,7 +69,7 @@ export class HassioUploadBackup extends LitElement {
     try {
       const backup = await uploadBackup(this.hass, file);
       fireEvent(this, "backup-uploaded", { backup: backup.data });
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: "Upload failed",
         text: extractApiErrorMessage(err),

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

@@ -181,9 +181,7 @@ export class SupervisorBackupContent extends LitElement {
                   >
                     <ha-checkbox
                       .checked=${this.homeAssistant}
-                      @click=${() => {
+                      @click=${this.toggleHomeAssistant}
-                        this.homeAssistant = !this.homeAssistant;
-                      }}
                     >
                     </ha-checkbox>
                   </ha-formfield>
@@ -272,6 +270,10 @@ export class SupervisorBackupContent extends LitElement {
     `;
   }
 
+  private toggleHomeAssistant() {
+    this.homeAssistant = !this.homeAssistant;
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       .partial-picker ha-formfield {

hassio/src/components/supervisor-metric.ts

@@ -20,10 +20,10 @@ class SupervisorMetric extends LitElement {
       <div slot="description" .title=${this.tooltip ?? ""}>
         <span class="value"> ${roundedValue} % </span>
         <ha-bar
-          class="${classMap({
+          class=${classMap({
             "target-warning": roundedValue > 50,
             "target-critical": roundedValue > 85,
-          })}"
+          })}
           .value=${this.value}
         ></ha-bar>
       </div>

hassio/src/dashboard/hassio-addons.ts

@@ -3,7 +3,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { navigate } from "../../../src/common/navigate";
-import { stringCompare } from "../../../src/common/string/compare";
+import { caseInsensitiveStringCompare } from "../../../src/common/string/compare";
 import "../../../src/components/ha-card";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../src/resources/styles";
@@ -33,7 +33,7 @@ class HassioAddons extends LitElement {
                 </ha-card>
               `
             : this.supervisor.supervisor.addons
-                .sort((a, b) => stringCompare(a.name, b.name))
+                .sort((a, b) => caseInsensitiveStringCompare(a.name, b.name))
                 .map(
                   (addon) => html`
                     <ha-card .addon=${addon} @click=${this._addonTapped}>

hassio/src/dashboard/hassio-update.ts

@@ -136,7 +136,7 @@ export class HassioUpdate extends LitElement {
           </ha-settings-row>
         </div>
         <div class="card-actions">
-          <a href="${releaseNotesUrl}" target="_blank" rel="noreferrer">
+          <a href=${releaseNotesUrl} target="_blank" rel="noreferrer">
             <mwc-button>
               ${this.supervisor.localize("common.release_notes")}
             </mwc-button>
@@ -206,7 +206,7 @@ export class HassioUpdate extends LitElement {
       fireEvent(this, "supervisor-collection-refresh", {
         collection: item.key,
       });
-    } catch (err) {
+    } catch (err: any) {
       // Only show an error if the status code was not expected (user behind proxy)
       // or no status at all(connection terminated)
       if (this.hass.connection.connected && !ignoreSupervisorError(err)) {

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

@@ -3,6 +3,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-header-bar";
+import "../../../../src/components/ha-icon-button";
 import { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
@@ -52,9 +53,12 @@ export class DialogHassioBackupUpload
         <div slot="heading">
           <ha-header-bar>
             <span slot="title"> Upload backup </span>
-            <mwc-icon-button slot="actionItems" dialogAction="cancel">
+            <ha-icon-button
-              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+              .label=${this.hass.localize("common.close")}
-            </mwc-icon-button>
+              .path=${mdiClose}
+              slot="actionItems"
+              dialogAction="cancel"
+            ></ha-icon-button>
           </ha-header-bar>
         </div>
         <hassio-upload-backup

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

@@ -9,7 +9,7 @@ import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-button-menu";
 import "../../../../src/components/ha-header-bar";
-import "../../../../src/components/ha-svg-icon";
+import "../../../../src/components/ha-icon-button";
 import { getSignedPath } from "../../../../src/data/auth";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import {
@@ -28,6 +28,7 @@ import "../../components/supervisor-backup-content";
 import type { SupervisorBackupContent } from "../../components/supervisor-backup-content";
 import { HassioBackupDialogParams } from "./show-dialog-hassio-backup";
 import { atLeastVersion } from "../../../../src/common/config/version";
+import { stopPropagation } from "../../../../src/common/dom/stop_propagation";
 
 @customElement("dialog-hassio-backup")
 class HassioBackupDialog
@@ -75,9 +76,12 @@ class HassioBackupDialog
         <div slot="heading">
           <ha-header-bar>
             <span slot="title">${this._backup.name}</span>
-            <mwc-icon-button slot="actionItems" dialogAction="cancel">
+            <ha-icon-button
-              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+              .label=${this.hass.localize("common.close")}
-            </mwc-icon-button>
+              .path=${mdiClose}
+              slot="actionItems"
+              dialogAction="cancel"
+            ></ha-icon-button>
           </ha-header-bar>
         </div>
         ${this._restoringBackup
@@ -107,11 +111,13 @@ class HassioBackupDialog
               fixed
               slot="primaryAction"
               @action=${this._handleMenuAction}
-              @closed=${(ev: Event) => ev.stopPropagation()}
+              @closed=${stopPropagation}
             >
-              <mwc-icon-button slot="trigger" alt="menu">
+              <ha-icon-button
-                <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+                .label=${this.hass.localize("common.menu")}
-              </mwc-icon-button>
+                .path=${mdiDotsVertical}
+                slot="trigger"
+              ></ha-icon-button>
               <mwc-list-item>Download Backup</mwc-list-item>
               <mwc-list-item class="error">Delete Backup</mwc-list-item>
             </ha-button-menu>`
@@ -125,9 +131,6 @@ class HassioBackupDialog
       haStyle,
       haStyleDialog,
       css`
-        ha-svg-icon {
-          color: var(--primary-text-color);
-        }
         ha-circular-progress {
           display: block;
           text-align: center;
@@ -138,6 +141,9 @@ class HassioBackupDialog
           flex-shrink: 0;
           display: block;
         }
+        ha-icon-button {
+          color: var(--secondary-text-color);
+        }
       `,
     ];
   }
@@ -311,7 +317,7 @@ class HassioBackupDialog
             : "snapshots"
         }/${this._backup!.slug}/download`
       );
-    } catch (err) {
+    } catch (err: any) {
       await showAlertDialog(this, {
         text: extractApiErrorMessage(err),
       });

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

@@ -127,7 +127,7 @@ class HassioCreateBackupDialog extends LitElement {
 
       this._dialogParams!.onCreate();
       this.closeDialog();
-    } catch (err) {
+    } catch (err: any) {
       this._error = extractApiErrorMessage(err);
     }
     this._creatingBackup = false;

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

@@ -0,0 +1,180 @@
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/ha-circular-progress";
+import "../../../../src/components/ha-markdown";
+import {
+  extractApiErrorMessage,
+  ignoreSupervisorError,
+} from "../../../../src/data/hassio/common";
+import {
+  DatadiskList,
+  listDatadisks,
+  moveDatadisk,
+} from "../../../../src/data/hassio/host";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
+import { showAlertDialog } from "../../../../src/dialogs/generic/show-dialog-box";
+import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
+import { HomeAssistant } from "../../../../src/types";
+import { HassioDatatiskDialogParams } from "./show-dialog-hassio-datadisk";
+
+const calculateMoveTime = memoizeOne((supervisor: Supervisor): number => {
+  const speed = supervisor.host.disk_life_time !== "" ? 30 : 10;
+  const moveTime = (supervisor.host.disk_used * 1000) / 60 / speed;
+  const rebootTime = (supervisor.host.startup_time * 4) / 60;
+  return Math.ceil((moveTime + rebootTime) / 10) * 10;
+});
+
+@customElement("dialog-hassio-datadisk")
+class HassioDatadiskDialog extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private dialogParams?: HassioDatatiskDialogParams;
+
+  @state() private selectedDevice?: string;
+
+  @state() private devices?: DatadiskList["devices"];
+
+  @state() private moving = false;
+
+  public showDialog(params: HassioDatatiskDialogParams) {
+    this.dialogParams = params;
+    listDatadisks(this.hass).then((data) => {
+      this.devices = data.devices;
+    });
+  }
+
+  public closeDialog(): void {
+    this.dialogParams = undefined;
+    this.selectedDevice = undefined;
+    this.devices = undefined;
+    this.moving = false;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render(): TemplateResult {
+    if (!this.dialogParams) {
+      return html``;
+    }
+    return html`
+      <ha-dialog
+        open
+        scrimClickAction
+        escapeKeyAction
+        .heading=${this.moving
+          ? this.dialogParams.supervisor.localize("dialog.datadisk_move.moving")
+          : this.dialogParams.supervisor.localize("dialog.datadisk_move.title")}
+        @closed=${this.closeDialog}
+        ?hideActions=${this.moving}
+      >
+        ${this.moving
+          ? html` <ha-circular-progress alt="Moving" size="large" active>
+              </ha-circular-progress>
+              <p class="progress-text">
+                ${this.dialogParams.supervisor.localize(
+                  "dialog.datadisk_move.moving_desc"
+                )}
+              </p>`
+          : html` ${this.devices?.length
+                ? html`
+                    ${this.dialogParams.supervisor.localize(
+                      "dialog.datadisk_move.description",
+                      {
+                        current_path: this.dialogParams.supervisor.os.data_disk,
+                        time: calculateMoveTime(this.dialogParams.supervisor),
+                      }
+                    )}
+                    <br /><br />
+
+                    <paper-dropdown-menu
+                      .label=${this.dialogParams.supervisor.localize(
+                        "dialog.datadisk_move.select_device"
+                      )}
+                      @value-changed=${this._select_device}
+                    >
+                      <paper-listbox slot="dropdown-content">
+                        ${this.devices.map(
+                          (device) => html`<paper-item>${device}</paper-item>`
+                        )}
+                      </paper-listbox>
+                    </paper-dropdown-menu>
+                  `
+                : this.devices === undefined
+                ? this.dialogParams.supervisor.localize(
+                    "dialog.datadisk_move.loading_devices"
+                  )
+                : this.dialogParams.supervisor.localize(
+                    "dialog.datadisk_move.no_devices"
+                  )}
+
+              <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
+                ${this.dialogParams.supervisor.localize(
+                  "dialog.datadisk_move.cancel"
+                )}
+              </mwc-button>
+
+              <mwc-button
+                .disabled=${!this.selectedDevice}
+                slot="primaryAction"
+                @click=${this._moveDatadisk}
+              >
+                ${this.dialogParams.supervisor.localize(
+                  "dialog.datadisk_move.move"
+                )}
+              </mwc-button>`}
+      </ha-dialog>
+    `;
+  }
+
+  private _select_device(event) {
+    this.selectedDevice = event.detail.value;
+  }
+
+  private async _moveDatadisk() {
+    this.moving = true;
+    try {
+      await moveDatadisk(this.hass, this.selectedDevice!);
+    } catch (err: any) {
+      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
+        showAlertDialog(this, {
+          title: this.dialogParams!.supervisor.localize(
+            "system.host.failed_to_move"
+          ),
+          text: extractApiErrorMessage(err),
+        });
+        this.closeDialog();
+      }
+    }
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      haStyleDialog,
+      css`
+        paper-dropdown-menu {
+          width: 100%;
+        }
+        ha-circular-progress {
+          display: block;
+          margin: 32px;
+          text-align: center;
+        }
+
+        .progress-text {
+          text-align: center;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-hassio-datadisk": HassioDatadiskDialog;
+  }
+}

hassio/src/dialogs/datadisk/show-dialog-hassio-datadisk.ts

@@ -0,0 +1,17 @@
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
+
+export interface HassioDatatiskDialogParams {
+  supervisor: Supervisor;
+}
+
+export const showHassioDatadiskDialog = (
+  element: HTMLElement,
+  dialogParams: HassioDatatiskDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-hassio-datadisk",
+    dialogImport: () => import("./dialog-hassio-datadisk"),
+    dialogParams,
+  });
+};

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

@@ -7,6 +7,7 @@ import "../../../../src/common/search/search-input";
 import { stringCompare } from "../../../../src/common/string/compare";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
+import "../../../../src/components/ha-icon-button";
 import { HassioHardwareInfo } from "../../../../src/data/hassio/hardware";
 import { dump } from "../../../../src/resources/js-yaml-dump";
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
@@ -70,10 +71,13 @@ class HassioHardwareDialog extends LitElement {
           <h2>
             ${this._dialogParams.supervisor.localize("dialog.hardware.title")}
           </h2>
-          <mwc-icon-button dialogAction="close">
+          <ha-icon-button
-            <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+            .label=${this.hass.localize("common.close")}
-          </mwc-icon-button>
+            .path=${mdiClose}
+            dialogAction="close"
+          ></ha-icon-button>
           <search-input
+            .hass=${this.hass}
             autofocus
             no-label-float
             .filter=${this._filter}
@@ -141,7 +145,7 @@ class HassioHardwareDialog extends LitElement {
       haStyle,
       haStyleDialog,
       css`
-        mwc-icon-button {
+        ha-icon-button {
           position: absolute;
           right: 16px;
           top: 10px;

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

@@ -47,11 +47,6 @@ class HassioMarkdownDialog extends LitElement {
       haStyleDialog,
       hassioStyle,
       css`
-        ha-paper-dialog {
-          min-width: 350px;
-          font-size: 14px;
-          border-radius: 2px;
-        }
         app-toolbar {
           margin: 0;
           padding: 0 16px;
@@ -62,19 +57,6 @@ class HassioMarkdownDialog extends LitElement {
           margin-left: 16px;
         }
         @media all and (max-width: 450px), all and (max-height: 500px) {
-          ha-paper-dialog {
-            max-height: 100%;
-          }
-          ha-paper-dialog::before {
-            content: "";
-            position: fixed;
-            z-index: -1;
-            top: 0px;
-            left: 0px;
-            right: 0px;
-            bottom: 0px;
-            background-color: inherit;
-          }
           app-toolbar {
             color: var(--text-primary-color);
             background-color: var(--primary-color);

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

@@ -1,5 +1,4 @@
 import "@material/mwc-button/mwc-button";
-import "@material/mwc-icon-button";
 import "@material/mwc-list/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import "@material/mwc-tab";
@@ -16,9 +15,9 @@ import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
 import "../../../../src/components/ha-formfield";
 import "../../../../src/components/ha-header-bar";
+import "../../../../src/components/ha-icon-button";
 import "../../../../src/components/ha-radio";
 import "../../../../src/components/ha-related-items";
-import "../../../../src/components/ha-svg-icon";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import {
   AccessPoints,
@@ -104,9 +103,12 @@ export class DialogHassioNetwork
             <span slot="title">
               ${this.supervisor.localize("dialog.network.title")}
             </span>
-            <mwc-icon-button slot="actionItems" dialogAction="cancel">
+            <ha-icon-button
-              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+              .label=${this.hass.localize("common.close")}
-            </mwc-icon-button>
+              .path=${mdiClose}
+              slot="actionItems"
+              dialogAction="cancel"
+            ></ha-icon-button>
           </ha-header-bar>
           ${this._interfaces.length > 1
             ? html`<mwc-tab-bar
@@ -287,7 +289,7 @@ export class DialogHassioNetwork
         this.hass,
         this._interface.interface
       );
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: "Failed to scan for accesspoints",
         text: extractApiErrorMessage(err),
@@ -448,7 +450,7 @@ export class DialogHassioNetwork
         this._interface!.interface,
         interfaceOptions
       );
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize("dialog.network.failed_to_change"),
         text: extractApiErrorMessage(err),

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

@@ -1,5 +1,4 @@
 import "@material/mwc-button/mwc-button";
-import "@material/mwc-icon-button/mwc-icon-button";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDelete } from "@mdi/js";
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
@@ -7,7 +6,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-circular-progress";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
-import "../../../../src/components/ha-svg-icon";
+import "../../../../src/components/ha-icon-button";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import {
   addHassioDockerRegistry,
@@ -110,16 +109,15 @@ class HassioRegistriesDialog extends LitElement {
                             )}:
                             ${entry.username}</span
                           >
-                          <mwc-icon-button
+                          <ha-icon-button
                             .entry=${entry}
-                            .title=${this.supervisor.localize(
+                            .label=${this.supervisor.localize(
                               "dialog.registries.remove"
                             )}
+                            .path=${mdiDelete}
                             slot="meta"
                             @click=${this._removeRegistry}
-                          >
+                          ></ha-icon-button>
-                            <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
-                          </mwc-icon-button>
                         </mwc-list-item>
                       `
                     )
@@ -190,7 +188,7 @@ class HassioRegistriesDialog extends LitElement {
       await addHassioDockerRegistry(this.hass, data);
       await this._loadRegistries();
       this._addingRegistry = false;
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize("dialog.registries.failed_to_add"),
         text: extractApiErrorMessage(err),
@@ -204,7 +202,7 @@ class HassioRegistriesDialog extends LitElement {
     try {
       await removeHassioDockerRegistry(this.hass, entry.registry);
       await this._loadRegistries();
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize("dialog.registries.failed_to_remove"),
         text: extractApiErrorMessage(err),
@@ -234,7 +232,7 @@ class HassioRegistriesDialog extends LitElement {
         mwc-button {
           margin-left: 8px;
         }
-        mwc-icon-button {
+        ha-icon-button {
           color: var(--error-color);
           margin: -10px;
         }

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

@@ -1,5 +1,4 @@
 import "@material/mwc-button/mwc-button";
-import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiDelete } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
@@ -9,10 +8,11 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { caseInsensitiveStringCompare } from "../../../../src/common/string/compare";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-circular-progress";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
-import "../../../../src/components/ha-svg-icon";
+import "../../../../src/components/ha-icon-button";
 import {
   fetchHassioAddonsInfo,
   HassioAddonRepository,
@@ -57,7 +57,7 @@ class HassioRepositoriesDialog extends LitElement {
   private _filteredRepositories = memoizeOne((repos: HassioAddonRepository[]) =>
     repos
       .filter((repo) => repo.slug !== "core" && repo.slug !== "local")
-      .sort((a, b) => (a.name < b.name ? -1 : 1))
+      .sort((a, b) => caseInsensitiveStringCompare(a.name, b.name))
   );
 
   protected render(): TemplateResult {
@@ -89,15 +89,14 @@ class HassioRepositoriesDialog extends LitElement {
                       <div secondary>${repo.maintainer}</div>
                       <div secondary>${repo.url}</div>
                     </paper-item-body>
-                    <mwc-icon-button
+                    <ha-icon-button
                       .slug=${repo.slug}
-                      .title=${this._dialogParams!.supervisor.localize(
+                      .label=${this._dialogParams!.supervisor.localize(
                         "dialog.repositories.remove"
                       )}
+                      .path=${mdiDelete}
                       @click=${this._removeRepository}
-                    >
+                    ></ha-icon-button>
-                      <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
-                    </mwc-icon-button>
                   </paper-item>
                 `
               )
@@ -185,7 +184,7 @@ class HassioRepositoriesDialog extends LitElement {
       this._repositories = addonsinfo.repositories;
 
       fireEvent(this, "supervisor-collection-refresh", { collection: "addon" });
-    } catch (err) {
+    } catch (err: any) {
       this._error = extractApiErrorMessage(err);
     }
   }
@@ -207,7 +206,7 @@ class HassioRepositoriesDialog extends LitElement {
       await this._loadData();
 
       input.value = "";
-    } catch (err) {
+    } catch (err: any) {
       this._error = extractApiErrorMessage(err);
     }
     this._processing = false;
@@ -229,7 +228,7 @@ class HassioRepositoriesDialog extends LitElement {
         addons_repositories: newRepositories,
       });
       await this._loadData();
-    } catch (err) {
+    } catch (err: any) {
       this._error = extractApiErrorMessage(err);
     }
   }

hassio/src/dialogs/suggestAddonRestart.ts

@@ -26,7 +26,7 @@ export const suggestAddonRestart = async (
   if (confirmed) {
     try {
       await restartHassioAddon(hass, addon.slug);
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(element, {
         title: supervisor.localize(
           "common.failed_to_restart_name",

hassio/src/dialogs/update/dialog-supervisor-update.ts

@@ -6,7 +6,6 @@ import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-settings-row";
-import "../../../../src/components/ha-svg-icon";
 import "../../../../src/components/ha-switch";
 import {
   extractApiErrorMessage,
@@ -148,7 +147,7 @@ class DialogSupervisorUpdate extends LitElement {
           this.hass,
           this._dialogParams!.backupParams
         );
-      } catch (err) {
+      } catch (err: any) {
         this._error = extractApiErrorMessage(err);
         this._action = null;
         return;
@@ -158,7 +157,7 @@ class DialogSupervisorUpdate extends LitElement {
     this._action = "update";
     try {
       await this._dialogParams!.updateHandler!();
-    } catch (err) {
+    } catch (err: any) {
       if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
         this._error = extractApiErrorMessage(err);
         this._action = null;

hassio/src/hassio-main.ts

@@ -113,12 +113,6 @@ export class HassioMain extends SupervisorBaseElement {
           : this.hass.themes.default_theme);
 
       themeSettings = this.hass.selectedTheme;
-      if (themeSettings?.dark === undefined) {
-        themeSettings = {
-          ...this.hass.selectedTheme,
-          dark: this.hass.themes.darkMode,
-        };
-      }
     } else {
       themeName =
         (this.hass.selectedTheme as unknown as string) ||

hassio/src/hassio-my-redirect.ts

@@ -87,7 +87,7 @@ class HassioMyRedirect extends LitElement {
     let url: string;
     try {
       url = this._createRedirectUrl(redirect);
-    } catch (err) {
+    } catch (err: any) {
       this._error = this.supervisor.localize("my.error");
       return;
     }

hassio/src/ingress-view/hassio-ingress-view.ts

@@ -12,6 +12,7 @@ import { fireEvent } from "../../../src/common/dom/fire_event";
 import { navigate } from "../../../src/common/navigate";
 import { extractSearchParam } from "../../../src/common/url/search-params";
 import { nextRender } from "../../../src/common/util/render-status";
+import "../../../src/components/ha-icon-button";
 import {
   fetchHassioAddonInfo,
   HassioAddonDetails,
@@ -72,12 +73,11 @@ class HassioIngressView extends LitElement {
 
     return html`${this.narrow || this.hass.dockedSidebar === "always_hidden"
       ? html`<div class="header">
-            <mwc-icon-button
+            <ha-icon-button
-              aria-label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
+              .label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
+              .path=${mdiMenu}
               @click=${this._toggleMenu}
-            >
+            ></ha-icon-button>
-              <ha-svg-icon .path=${mdiMenu}></ha-svg-icon>
-            </mwc-icon-button>
             <div class="main-title">${this._addon.name}</div>
           </div>
           ${iframe}`
@@ -91,7 +91,7 @@ class HassioIngressView extends LitElement {
       if (requestedAddon) {
         try {
           addonInfo = await fetchHassioAddonInfo(this.hass, requestedAddon);
-        } catch (err) {
+        } catch (err: any) {
           await showAlertDialog(this, {
             text: extractApiErrorMessage(err),
             title: requestedAddon,
@@ -145,7 +145,7 @@ class HassioIngressView extends LitElement {
 
     try {
       addon = await fetchHassioAddonInfo(this.hass, addonSlug);
-    } catch (err) {
+    } catch (err: any) {
       await showAlertDialog(this, {
         text: "Unable to fetch add-on info to start Ingress",
         title: "Supervisor",
@@ -179,7 +179,7 @@ class HassioIngressView extends LitElement {
 
     try {
       session = await createSessionPromise;
-    } catch (err) {
+    } catch (err: any) {
       await showAlertDialog(this, {
         text: "Unable to create an Ingress session",
         title: addon.name,
@@ -195,7 +195,7 @@ class HassioIngressView extends LitElement {
     this._sessionKeepAlive = window.setInterval(async () => {
       try {
         await validateHassioSession(this.hass, session);
-      } catch (err) {
+      } catch (err: any) {
         session = await createHassioSession(this.hass);
       }
     }, 60000);
@@ -241,7 +241,7 @@ class HassioIngressView extends LitElement {
         flex-grow: 1;
       }
 
-      mwc-icon-button {
+      ha-icon-button {
         pointer-events: auto;
       }
 

hassio/src/system/hassio-core-info.ts

@@ -144,7 +144,7 @@ class HassioCoreInfo extends LitElement {
 
     try {
       await restartCore(this.hass);
-    } catch (err) {
+    } catch (err: any) {
       if (this.hass.connection.connected) {
         showAlertDialog(this, {
           title: this.supervisor.localize(

hassio/src/system/hassio-host-info.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
@@ -10,6 +9,7 @@ import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-card";
+import "../../../src/components/ha-icon-button";
 import "../../../src/components/ha-settings-row";
 import {
   extractApiErrorMessage,
@@ -40,8 +40,9 @@ import {
   roundWithOneDecimal,
 } from "../../../src/util/calculate";
 import "../components/supervisor-metric";
-import { showNetworkDialog } from "../dialogs/network/show-dialog-network";
+import { showHassioDatadiskDialog } from "../dialogs/datadisk/show-dialog-hassio-datadisk";
 import { showHassioHardwareDialog } from "../dialogs/hardware/show-dialog-hassio-hardware";
+import { showNetworkDialog } from "../dialogs/network/show-dialog-network";
 import { hassioStyle } from "../resources/hassio-style";
 
 @customElement("hassio-host-info")
@@ -180,20 +181,40 @@ class HassioHostInfo extends LitElement {
               `
             : ""}
 
-          <ha-button-menu
+          <ha-button-menu corner="BOTTOM_START">
-            corner="BOTTOM_START"
+            <ha-icon-button
-            @action=${this._handleMenuAction}
+              .label=${this.hass.localize("common.menu")}
-          >
+              .path=${mdiDotsVertical}
-            <mwc-icon-button slot="trigger">
+              slot="trigger"
-              <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+            ></ha-icon-button>
-            </mwc-icon-button>
+            <mwc-list-item
-            <mwc-list-item>
+              .action=${"hardware"}
+              @click=${this._handleMenuAction}
+            >
               ${this.supervisor.localize("system.host.hardware")}
             </mwc-list-item>
             ${this.supervisor.host.features.includes("haos")
-              ? html`<mwc-list-item>
+              ? html`
-                  ${this.supervisor.localize("system.host.import_from_usb")}
+                  <mwc-list-item
-                </mwc-list-item>`
+                    .action=${"import_from_usb"}
+                    @click=${this._handleMenuAction}
+                  >
+                    ${this.supervisor.localize("system.host.import_from_usb")}
+                  </mwc-list-item>
+                  ${this.supervisor.host.features.includes("os_agent") &&
+                  atLeastVersion(this.supervisor.host.agent_version, 1, 2, 0)
+                    ? html`
+                        <mwc-list-item
+                          .action=${"move_datadisk"}
+                          @click=${this._handleMenuAction}
+                        >
+                          ${this.supervisor.localize(
+                            "system.host.move_datadisk"
+                          )}
+                        </mwc-list-item>
+                      `
+                    : ""}
+                `
               : ""}
           </ha-button-menu>
         </div>
@@ -216,22 +237,31 @@ class HassioHostInfo extends LitElement {
     return network_info.interfaces.find((a) => a.primary)?.ipv4?.address![0];
   });
 
-  private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
+  private async _handleMenuAction(ev) {
-    switch (ev.detail.index) {
+    switch ((ev.target as any).action) {
-      case 0:
+      case "hardware":
         await this._showHardware();
         break;
-      case 1:
+      case "import_from_usb":
         await this._importFromUSB();
         break;
+      case "move_datadisk":
+        await this._moveDatadisk();
+        break;
     }
   }
 
+  private _moveDatadisk(): void {
+    showHassioDatadiskDialog(this, {
+      supervisor: this.supervisor,
+    });
+  }
+
   private async _showHardware(): Promise<void> {
     let hardware;
     try {
       hardware = await fetchHassioHardwareInfo(this.hass);
-    } catch (err) {
+    } catch (err: any) {
       await showAlertDialog(this, {
         title: this.supervisor.localize(
           "system.host.failed_to_get_hardware_list"
@@ -261,7 +291,7 @@ class HassioHostInfo extends LitElement {
 
     try {
       await rebootHost(this.hass);
-    } catch (err) {
+    } catch (err: any) {
       // Ignore connection errors, these are all expected
       if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
         showAlertDialog(this, {
@@ -291,7 +321,7 @@ class HassioHostInfo extends LitElement {
 
     try {
       await shutdownHost(this.hass);
-    } catch (err) {
+    } catch (err: any) {
       // Ignore connection errors, these are all expected
       if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
         showAlertDialog(this, {
@@ -332,7 +362,7 @@ class HassioHostInfo extends LitElement {
     try {
       await updateOS(this.hass);
       fireEvent(this, "supervisor-collection-refresh", { collection: "os" });
-    } catch (err) {
+    } catch (err: any) {
       if (this.hass.connection.connected) {
         showAlertDialog(this, {
           title: this.supervisor.localize(
@@ -370,7 +400,7 @@ class HassioHostInfo extends LitElement {
         fireEvent(this, "supervisor-collection-refresh", {
           collection: "host",
         });
-      } catch (err) {
+      } catch (err: any) {
         showAlertDialog(this, {
           title: this.supervisor.localize("system.host.failed_to_set_hostname"),
           text: extractApiErrorMessage(err),
@@ -385,7 +415,7 @@ class HassioHostInfo extends LitElement {
       fireEvent(this, "supervisor-collection-refresh", {
         collection: "host",
       });
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize(
           "system.host.failed_to_import_from_usb"

hassio/src/system/hassio-supervisor-info.ts

@@ -31,27 +31,9 @@ import { documentationUrl } from "../../../src/util/documentation-url";
 import "../components/supervisor-metric";
 import { hassioStyle } from "../resources/hassio-style";
 
-const UNSUPPORTED_REASON_URL = {
+const UNSUPPORTED_REASON_URL = {};
-  apparmor: "/more-info/unsupported/apparmor",
-  container: "/more-info/unsupported/container",
-  dbus: "/more-info/unsupported/dbus",
-  docker_configuration: "/more-info/unsupported/docker_configuration",
-  docker_version: "/more-info/unsupported/docker_version",
-  job_conditions: "/more-info/unsupported/job_conditions",
-  lxc: "/more-info/unsupported/lxc",
-  network_manager: "/more-info/unsupported/network_manager",
-  os: "/more-info/unsupported/os",
-  privileged: "/more-info/unsupported/privileged",
-  systemd: "/more-info/unsupported/systemd",
-  content_trust: "/more-info/unsupported/content_trust",
-};
-
 const UNHEALTHY_REASON_URL = {
   privileged: "/more-info/unsupported/privileged",
-  supervisor: "/more-info/unhealthy/supervisor",
-  setup: "/more-info/unhealthy/setup",
-  docker: "/more-info/unhealthy/docker",
-  untrusted: "/more-info/unhealthy/untrusted",
 };
 
 @customElement("hassio-supervisor-info")
@@ -280,7 +262,7 @@ class HassioSupervisorInfo extends LitElement {
       };
       await setSupervisorOption(this.hass, data);
       await this._reloadSupervisor();
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize(
           "system.supervisor.failed_to_set_option"
@@ -298,7 +280,7 @@ class HassioSupervisorInfo extends LitElement {
 
     try {
       await this._reloadSupervisor();
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize("system.supervisor.failed_to_reload"),
         text: extractApiErrorMessage(err),
@@ -341,7 +323,7 @@ class HassioSupervisorInfo extends LitElement {
 
     try {
       await restartSupervisor(this.hass);
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize(
           "common.failed_to_restart_name",
@@ -386,7 +368,7 @@ class HassioSupervisorInfo extends LitElement {
       fireEvent(this, "supervisor-collection-refresh", {
         collection: "supervisor",
       });
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize(
           "common.failed_to_update_name",
@@ -423,20 +405,19 @@ class HassioSupervisorInfo extends LitElement {
           ${this.supervisor.resolution.unsupported.map(
             (reason) => html`
               <li>
-                ${UNSUPPORTED_REASON_URL[reason]
+                <a
-                  ? html`<a
+                  href=${documentationUrl(
-                      href="${documentationUrl(
+                    this.hass,
-                        this.hass,
+                    UNSUPPORTED_REASON_URL[reason] ||
-                        UNSUPPORTED_REASON_URL[reason]
+                      `/more-info/unsupported/${reason}`
-                      )}"
+                  )}
-                      target="_blank"
+                  target="_blank"
-                      rel="noreferrer"
+                  rel="noreferrer"
-                    >
+                >
-                      ${this.supervisor.localize(
+                  ${this.supervisor.localize(
-                        `system.supervisor.unsupported_reason.${reason}`
+                    `system.supervisor.unsupported_reason.${reason}`
-                      ) || reason}
+                  ) || reason}
-                    </a>`
+                </a>
-                  : reason}
               </li>
             `
           )}
@@ -454,20 +435,19 @@ class HassioSupervisorInfo extends LitElement {
           ${this.supervisor.resolution.unhealthy.map(
             (reason) => html`
               <li>
-                ${UNHEALTHY_REASON_URL[reason]
+                <a
-                  ? html`<a
+                  href=${documentationUrl(
-                      href="${documentationUrl(
+                    this.hass,
-                        this.hass,
+                    UNHEALTHY_REASON_URL[reason] ||
-                        UNHEALTHY_REASON_URL[reason]
+                      `/more-info/unhealthy/${reason}`
-                      )}"
+                  )}
-                      target="_blank"
+                  target="_blank"
-                      rel="noreferrer"
+                  rel="noreferrer"
-                    >
+                >
-                      ${this.supervisor.localize(
+                  ${this.supervisor.localize(
-                        `system.supervisor.unhealthy_reason.${reason}`
+                    `system.supervisor.unhealthy_reason.${reason}`
-                      ) || reason}
+                  ) || reason}
-                    </a>`
+                </a>
-                  : reason}
               </li>
             `
           )}
@@ -481,7 +461,7 @@ class HassioSupervisorInfo extends LitElement {
         diagnostics: !this.supervisor.supervisor?.diagnostics,
       };
       await setSupervisorOption(this.hass, data);
-    } catch (err) {
+    } catch (err: any) {
       showAlertDialog(this, {
         title: this.supervisor.localize(
           "system.supervisor.failed_to_set_option"

hassio/src/system/hassio-supervisor-log.ts

@@ -130,7 +130,7 @@ class HassioSupervisorLog extends LitElement {
         this.hass,
         this._selectedLogProvider
       );
-    } catch (err) {
+    } catch (err: any) {
       this._error = this.supervisor.localize(
         "system.log.get_logs",
         "provider",

netlify.toml

@@ -1,3 +1,3 @@
 [build.environment]
   YARN_VERSION = "1.22.11"
-  NODE_OPTIONS = "--max_old_space_size=4096"
+  NODE_OPTIONS = "--max_old_space_size=6144"

package.json

@@ -16,72 +16,68 @@
     "lint:lit": "lit-analyzer \"**/src/**/*.ts\" --format markdown --outFile result.md",
     "lint": "yarn run lint:eslint && yarn run lint:prettier && yarn run lint:types",
     "format": "yarn run format:eslint && yarn run format:prettier",
-    "mocha": "ts-mocha -p test-mocha/tsconfig.test.json \"test-mocha/**/*.ts\"",
+    "test": "instant-mocha --webpack-config ./test/webpack.config.js --require ./test/setup.js \"test/**/*.ts\""
-    "test": "yarn run mocha"
   },
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "dependencies": {
     "@braintree/sanitize-url": "^5.0.2",
-    "@codemirror/commands": "^0.19.2",
+    "@codemirror/commands": "^0.19.5",
-    "@codemirror/gutter": "^0.19.1",
+    "@codemirror/gutter": "^0.19.3",
-    "@codemirror/highlight": "^0.19.2",
+    "@codemirror/highlight": "^0.19.6",
     "@codemirror/history": "^0.19.0",
     "@codemirror/legacy-modes": "^0.19.0",
-    "@codemirror/rectangular-selection": "^0.19.0",
+    "@codemirror/rectangular-selection": "^0.19.1",
-    "@codemirror/search": "^0.19.0",
+    "@codemirror/search": "^0.19.2",
-    "@codemirror/state": "^0.19.1",
+    "@codemirror/state": "^0.19.2",
-    "@codemirror/stream-parser": "^0.19.1",
+    "@codemirror/stream-parser": "^0.19.2",
-    "@codemirror/text": "^0.19.2",
+    "@codemirror/text": "^0.19.4",
-    "@codemirror/view": "^0.19.4",
+    "@codemirror/view": "^0.19.9",
-    "@formatjs/intl-getcanonicallocales": "^1.7.3",
+    "@formatjs/intl-datetimeformat": "^4.2.5",
-    "@formatjs/intl-locale": "^2.4.37",
+    "@formatjs/intl-getcanonicallocales": "^1.8.0",
-    "@formatjs/intl-pluralrules": "^4.1.3",
+    "@formatjs/intl-locale": "^2.4.40",
+    "@formatjs/intl-numberformat": "^7.2.5",
+    "@formatjs/intl-pluralrules": "^4.1.5",
+    "@formatjs/intl-relativetimeformat": "^9.3.2",
+    "@formatjs/intl-utils": "^3.8.4",
     "@fullcalendar/common": "5.9.0",
     "@fullcalendar/core": "5.9.0",
     "@fullcalendar/daygrid": "5.9.0",
     "@fullcalendar/interaction": "5.9.0",
     "@fullcalendar/list": "5.9.0",
     "@lit-labs/virtualizer": "patch:@lit-labs/virtualizer@0.6.0#./.yarn/patches/@lit-labs/virtualizer/0.7.0.patch",
-    "@material/chips": "12.0.0-canary.22d29cbb4.0",
+    "@material/chips": "14.0.0-canary.261f2db59.0",
-    "@material/data-table": "12.0.0-canary.22d29cbb4.0",
+    "@material/data-table": "14.0.0-canary.261f2db59.0",
-    "@material/mwc-button": "0.22.1",
+    "@material/mwc-button": "0.25.3",
-    "@material/mwc-checkbox": "0.22.1",
+    "@material/mwc-checkbox": "0.25.3",
-    "@material/mwc-circular-progress": "0.22.1",
+    "@material/mwc-circular-progress": "0.25.3",
-    "@material/mwc-dialog": "0.22.1",
+    "@material/mwc-dialog": "0.25.3",
-    "@material/mwc-fab": "0.22.1",
+    "@material/mwc-fab": "0.25.3",
-    "@material/mwc-formfield": "0.22.1",
+    "@material/mwc-formfield": "0.25.3",
-    "@material/mwc-icon-button": "0.22.1",
+    "@material/mwc-icon-button": "patch:@material/mwc-icon-button@0.25.3#./.yarn/patches/@material/mwc-icon-button/remove-icon.patch",
-    "@material/mwc-linear-progress": "0.22.1",
+    "@material/mwc-linear-progress": "0.25.3",
-    "@material/mwc-list": "0.22.1",
+    "@material/mwc-list": "0.25.3",
-    "@material/mwc-menu": "0.22.1",
+    "@material/mwc-menu": "0.25.3",
-    "@material/mwc-radio": "0.22.1",
+    "@material/mwc-radio": "0.25.3",
-    "@material/mwc-ripple": "0.22.1",
+    "@material/mwc-ripple": "0.25.3",
-    "@material/mwc-switch": "0.22.1",
+    "@material/mwc-select": "0.25.3",
-    "@material/mwc-tab": "0.22.1",
+    "@material/mwc-slider": "0.25.3",
-    "@material/mwc-tab-bar": "0.22.1",
+    "@material/mwc-switch": "0.25.3",
-    "@material/top-app-bar": "12.0.0-canary.22d29cbb4.0",
+    "@material/mwc-tab": "0.25.3",
-    "@mdi/js": "6.1.95",
+    "@material/mwc-tab-bar": "0.25.3",
-    "@mdi/svg": "6.1.95",
+    "@material/mwc-textfield": "0.25.3",
+    "@material/top-app-bar": "14.0.0-canary.261f2db59.0",
+    "@mdi/js": "6.4.95",
+    "@mdi/svg": "6.4.95",
     "@polymer/app-layout": "^3.1.0",
     "@polymer/iron-flex-layout": "^3.0.1",
     "@polymer/iron-icon": "^3.0.1",
     "@polymer/iron-input": "^3.0.1",
-    "@polymer/iron-overlay-behavior": "^3.0.3",
     "@polymer/iron-resizable-behavior": "^3.0.1",
-    "@polymer/paper-checkbox": "^3.1.0",
-    "@polymer/paper-dialog": "^3.0.1",
-    "@polymer/paper-dialog-behavior": "^3.0.1",
-    "@polymer/paper-dialog-scrollable": "^3.0.1",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@polymer/paper-input": "^3.2.1",
     "@polymer/paper-item": "^3.0.1",
     "@polymer/paper-listbox": "^3.0.1",
-    "@polymer/paper-menu-button": "^3.1.0",
-    "@polymer/paper-progress": "^3.0.1",
-    "@polymer/paper-radio-button": "^3.0.1",
-    "@polymer/paper-radio-group": "^3.0.1",
-    "@polymer/paper-ripple": "^3.0.2",
     "@polymer/paper-slider": "^3.0.1",
     "@polymer/paper-styles": "^3.0.1",
     "@polymer/paper-tabs": "^3.1.0",
@@ -89,8 +85,8 @@
     "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "3.4.1",
     "@thomasloven/round-slider": "0.5.4",
-    "@vaadin/vaadin-combo-box": "^20.0.4",
+    "@vaadin/vaadin-combo-box": "^21.0.2",
-    "@vaadin/vaadin-date-picker": "^20.0.4",
+    "@vaadin/vaadin-date-picker": "^21.0.2",
     "@vibrant/color": "^3.2.1-alpha.1",
     "@vibrant/core": "^3.2.1-alpha.1",
     "@vibrant/quantizer-mmcq": "^3.2.1-alpha.1",
@@ -103,18 +99,17 @@
     "date-fns": "^2.23.0",
     "deep-clone-simple": "^1.1.1",
     "deep-freeze": "^0.0.1",
-    "fecha": "^4.2.0",
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
-    "hls.js": "^1.0.10",
+    "hls.js": "^1.0.11",
     "home-assistant-js-websocket": "^5.11.1",
     "idb-keyval": "^5.1.3",
     "intl-messageformat": "^9.9.1",
     "js-yaml": "^4.1.0",
     "leaflet": "^1.7.1",
     "leaflet-draw": "^1.0.4",
-    "lit": "^2.0.0-rc.3",
+    "lit": "^2.0.2",
-    "lit-vaadin-helpers": "^0.1.3",
+    "lit-vaadin-helpers": "^0.2.1",
     "marked": "^3.0.2",
     "memoize-one": "^5.2.1",
     "node-vibrant": "3.2.1-alpha.1",
@@ -143,17 +138,18 @@
     "xss": "^1.0.9"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.6",
+    "@babel/core": "^7.15.5",
     "@babel/plugin-external-helpers": "^7.14.5",
     "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-proposal-decorators": "^7.14.5",
+    "@babel/plugin-proposal-decorators": "^7.15.4",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.14.5",
-    "@babel/plugin-proposal-object-rest-spread": "^7.14.7",
+    "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
     "@babel/plugin-proposal-optional-chaining": "^7.14.5",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
-    "@babel/preset-env": "^7.14.7",
+    "@babel/plugin-syntax-top-level-await": "^7.14.5",
-    "@babel/preset-typescript": "^7.14.5",
+    "@babel/preset-env": "^7.15.6",
+    "@babel/preset-typescript": "^7.15.0",
     "@koa/cors": "^3.1.0",
     "@open-wc/dev-server-hmr": "^0.0.2",
     "@rollup/plugin-babel": "^5.2.1",
@@ -170,23 +166,24 @@
     "@types/mocha": "^8",
     "@types/sortablejs": "^1",
     "@types/webspeechapi": "^0.0.29",
-    "@typescript-eslint/eslint-plugin": "^4.28.3",
+    "@typescript-eslint/eslint-plugin": "^4.32.0",
-    "@typescript-eslint/parser": "^4.28.3",
+    "@typescript-eslint/parser": "^4.32.0",
     "@web/dev-server": "^0.0.24",
     "@web/dev-server-rollup": "^0.2.11",
     "babel-loader": "^8.2.2",
     "chai": "^4.3.4",
     "del": "^4.0.0",
-    "eslint": "^7.30.0",
+    "eslint": "^7.32.0",
-    "eslint-config-airbnb-typescript": "^12.3.1",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-config-airbnb-typescript": "^14.0.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-webpack": "^0.13.1",
     "eslint-plugin-disable": "^2.0.1",
-    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-lit": "^1.5.1",
+    "eslint-plugin-lit": "^1.6.1",
-    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-unused-imports": "^1.1.2",
+    "eslint-plugin-unused-imports": "^1.1.5",
-    "eslint-plugin-wc": "^1.3.0",
+    "eslint-plugin-wc": "^1.3.2",
     "fancy-log": "^1.3.3",
     "fs-extra": "^7.0.1",
     "gulp": "^4.0.2",
@@ -197,7 +194,8 @@
     "gulp-zopfli-green": "^3.0.1",
     "html-minifier": "^4.0.0",
     "husky": "^1.3.1",
-    "lint-staged": "^11.0.1",
+    "instant-mocha": "^1.3.1",
+    "lint-staged": "^11.1.2",
     "lit-analyzer": "^1.2.1",
     "lodash.template": "^4.5.0",
     "magic-string": "^0.25.7",
@@ -206,7 +204,7 @@
     "mocha": "^8.4.0",
     "object-hash": "^2.0.3",
     "open": "^7.0.4",
-    "prettier": "^2.3.2",
+    "prettier": "^2.4.1",
     "require-dir": "^1.2.0",
     "rollup": "^2.8.2",
     "rollup-plugin-string": "^3.0.0",
@@ -216,26 +214,26 @@
     "sinon": "^11.0.0",
     "source-map-url": "^0.4.0",
     "systemjs": "^6.3.2",
-    "terser-webpack-plugin": "^5.1.4",
+    "terser-webpack-plugin": "^5.2.4",
     "ts-lit-plugin": "^1.2.1",
-    "ts-mocha": "^8.0.0",
+    "typescript": "^4.4.3",
-    "typescript": "^4.3.5",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
-    "webpack": "^5.43.0",
+    "webpack": "^5.55.1",
-    "webpack-cli": "^4.7.2",
+    "webpack-cli": "^4.8.0",
-    "webpack-dev-server": "^3.11.2",
+    "webpack-dev-server": "^4.3.0",
-    "webpack-manifest-plugin": "^3.1.1",
+    "webpack-manifest-plugin": "^4.0.2",
+    "webpackbar": "^5.0.0-3",
     "workbox-build": "^6.1.5"
   },
   "_comment": "Polymer 3.2 contained a bug, fixed in https://github.com/Polymer/polymer/pull/5569, add as patch",
   "resolutions": {
     "@polymer/polymer": "patch:@polymer/polymer@3.4.1#./.yarn/patches/@polymer/polymer/pr-5569.patch",
     "@webcomponents/webcomponentsjs": "^2.2.10",
-    "lit": "^2.0.0-rc.3",
+    "lit": "^2.0.2",
-    "lit-html": "2.0.0-rc.4",
+    "lit-html": "2.0.1",
-    "lit-element": "3.0.0-rc.3",
+    "lit-element": "3.0.1",
-    "@lit/reactive-element": "1.0.0-rc.3"
+    "@lit/reactive-element": "1.0.1"
   },
   "main": "src/home-assistant.js",
   "husky": {

setup.py

@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20210911.0",
+    version="20211028.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/frontend",
     author="The Home Assistant Authors",

src/auth/ha-auth-flow.ts

@@ -1,4 +1,5 @@
 import "@material/mwc-button";
+import { genClientId } from "home-assistant-js-websocket";
 import {
   css,
   CSSResultGroup,
@@ -7,9 +8,12 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import "./ha-password-manager-polyfill";
 import { property, state } from "lit/decorators";
+import "../components/ha-alert";
+import "../components/ha-checkbox";
+import { computeInitialHaFormData } from "../components/ha-form/compute-initial-ha-form-data";
 import "../components/ha-form/ha-form";
+import "../components/ha-formfield";
 import "../components/ha-markdown";
 import { AuthProvider } from "../data/auth";
 import {
@@ -17,6 +21,7 @@ import {
   DataEntryFlowStepForm,
 } from "../data/data_entry_flow";
 import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
+import "./ha-password-manager-polyfill";
 
 type State = "loading" | "error" | "step";
 
@@ -31,12 +36,44 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
 
   @state() private _state: State = "loading";
 
-  @state() private _stepData: any = {};
+  @state() private _stepData?: Record<string, any>;
 
   @state() private _step?: DataEntryFlowStep;
 
   @state() private _errorMessage?: string;
 
+  @state() private _submitting = false;
+
+  @state() private _storeToken = false;
+
+  willUpdate(changedProps: PropertyValues) {
+    super.willUpdate(changedProps);
+
+    if (!changedProps.has("_step")) {
+      return;
+    }
+
+    if (!this._step) {
+      this._stepData = undefined;
+      return;
+    }
+
+    const oldStep = changedProps.get("_step") as HaAuthFlow["_step"];
+
+    if (
+      !oldStep ||
+      this._step.flow_id !== oldStep.flow_id ||
+      (this._step.type === "form" &&
+        oldStep.type === "form" &&
+        this._step.step_id !== oldStep.step_id)
+    ) {
+      this._stepData =
+        this._step.type === "form"
+          ? computeInitialHaFormData(this._step.data_schema)
+          : undefined;
+    }
+  }
+
   protected render() {
     return html`
       <form>${this._renderForm()}</form>
@@ -76,6 +113,24 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
     if (changedProps.has("authProvider")) {
       this._providerChanged(this.authProvider);
     }
+
+    if (!changedProps.has("_step") || this._step?.type !== "form") {
+      return;
+    }
+
+    // 100ms to give all the form elements time to initialize.
+    setTimeout(() => {
+      const form = this.renderRoot.querySelector("ha-form");
+      if (form) {
+        (form as any).focus();
+      }
+    }, 100);
+
+    setTimeout(() => {
+      this.renderRoot.querySelector(
+        "ha-password-manager-polyfill"
+      )!.boundingRect = this.getBoundingClientRect();
+    }, 500);
   }
 
   private _renderForm(): TemplateResult {
@@ -87,27 +142,33 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
         return html`
           ${this._renderStep(this._step)}
           <div class="action">
-            <mwc-button raised @click=${this._handleSubmit}
+            <mwc-button
-              >${this._step.type === "form"
+              raised
-                ? this.localize("ui.panel.page-authorize.form.next")
+              @click=${this._handleSubmit}
-                : this.localize(
+              .disabled=${this._submitting}
-                    "ui.panel.page-authorize.form.start_over"
-                  )}</mwc-button
             >
+              ${this._step.type === "form"
+                ? this.localize("ui.panel.page-authorize.form.next")
+                : this.localize("ui.panel.page-authorize.form.start_over")}
+            </mwc-button>
           </div>
         `;
       case "error":
         return html`
-          <div class="error">
+          <ha-alert alert-type="error">
             ${this.localize(
               "ui.panel.page-authorize.form.error",
               "error",
               this._errorMessage
             )}
-          </div>
+          </ha-alert>
         `;
       case "loading":
-        return html` ${this.localize("ui.panel.page-authorize.form.working")} `;
+        return html`
+          <ha-alert alert-type="info">
+            ${this.localize("ui.panel.page-authorize.form.working")}
+          </ha-alert>
+        `;
       default:
         return html``;
     }
@@ -140,16 +201,35 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
             .data=${this._stepData}
             .schema=${step.data_schema}
             .error=${step.errors}
+            .disabled=${this._submitting}
             .computeLabel=${this._computeLabelCallback(step)}
             .computeError=${this._computeErrorCallback(step)}
             @value-changed=${this._stepDataChanged}
           ></ha-form>
+          ${this.clientId === genClientId() &&
+          !["select_mfa_module", "mfa"].includes(step.step_id)
+            ? html`
+                <ha-formfield
+                  class="store-token"
+                  .label=${this.localize("ui.panel.page-authorize.store_token")}
+                >
+                  <ha-checkbox
+                    .checked=${this._storeToken}
+                    @change=${this._storeTokenChanged}
+                  ></ha-checkbox>
+                </ha-formfield>
+              `
+            : ""}
         `;
       default:
         return html``;
     }
   }
 
+  private _storeTokenChanged(e: CustomEvent<HTMLInputElement>) {
+    this._storeToken = (e.currentTarget as HTMLInputElement).checked;
+  }
+
   private async _providerChanged(newProvider?: AuthProvider) {
     if (this._step && this._step.type === "form") {
       fetch(`/auth/login_flow/${this._step.flow_id}`, {
@@ -189,12 +269,13 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
           return;
         }
 
-        await this._updateStep(data);
+        this._step = data;
+        this._state = "step";
       } else {
         this._state = "error";
         this._errorMessage = data.message;
       }
-    } catch (err) {
+    } catch (err: any) {
       // eslint-disable-next-line no-console
       console.error("Error starting auth flow", err);
       this._state = "error";
@@ -216,43 +297,13 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
     if (this.oauth2State) {
       url += `&state=${encodeURIComponent(this.oauth2State)}`;
     }
+    if (this._storeToken) {
+      url += `&storeToken=true`;
+    }
 
     document.location.assign(url);
   }
 
-  private async _updateStep(step: DataEntryFlowStep) {
-    let stepData: any = null;
-    if (
-      this._step &&
-      (step.flow_id !== this._step.flow_id ||
-        (step.type === "form" &&
-          this._step.type === "form" &&
-          step.step_id !== this._step.step_id))
-    ) {
-      stepData = {};
-    }
-    this._step = step;
-    this._state = "step";
-    if (stepData != null) {
-      this._stepData = stepData;
-    }
-
-    await this.updateComplete;
-    // 100ms to give all the form elements time to initialize.
-    setTimeout(() => {
-      const form = this.renderRoot.querySelector("ha-form");
-      if (form) {
-        (form as any).focus();
-      }
-    }, 100);
-
-    setTimeout(() => {
-      this.renderRoot.querySelector(
-        "ha-password-manager-polyfill"
-      )!.boundingRect = this.getBoundingClientRect();
-    }, 500);
-  }
-
   private _stepDataChanged(ev: CustomEvent) {
     this._stepData = ev.detail.value;
   }
@@ -297,9 +348,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
       this._providerChanged(this.authProvider);
       return;
     }
-    this._state = "loading";
+    this._submitting = true;
-    // To avoid a jumping UI.
-    this.style.setProperty("min-height", `${this.offsetHeight}px`);
 
     const postData = { ...this._stepData, client_id: this.clientId };
 
@@ -316,29 +365,28 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
         this._redirect(newStep.result);
         return;
       }
-      await this._updateStep(newStep);
+      this._step = newStep;
-    } catch (err) {
+      this._state = "step";
+    } catch (err: any) {
       // eslint-disable-next-line no-console
       console.error("Error submitting step", err);
       this._state = "error";
       this._errorMessage = this._unknownError();
     } finally {
-      this.style.setProperty("min-height", "");
+      this._submitting = false;
     }
   }
 
   static get styles(): CSSResultGroup {
     return css`
-      :host {
-        /* So we can set min-height to avoid jumping during loading */
-        display: block;
-      }
       .action {
         margin: 24px 0 8px;
         text-align: center;
       }
-      .error {
+      /* Align with the rest of the form. */
-        color: red;
+      .store-token {
+        margin-top: 10px;
+        margin-left: -16px;
       }
     `;
   }

src/auth/ha-authorize.ts

@@ -76,20 +76,20 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
       ${loggingInWith}
 
       <ha-auth-flow
-        .resources="${this.resources}"
+        .resources=${this.resources}
-        .clientId="${this.clientId}"
+        .clientId=${this.clientId}
-        .redirectUri="${this.redirectUri}"
+        .redirectUri=${this.redirectUri}
-        .oauth2State="${this.oauth2State}"
+        .oauth2State=${this.oauth2State}
-        .authProvider="${this._authProvider}"
+        .authProvider=${this._authProvider}
       ></ha-auth-flow>
 
       ${inactiveProviders.length > 0
         ? html`
             <ha-pick-auth-provider
-              .resources="${this.resources}"
+              .resources=${this.resources}
-              .clientId="${this.clientId}"
+              .clientId=${this.clientId}
-              .authProviders="${inactiveProviders}"
+              .authProviders=${inactiveProviders}
-              @pick-auth-provider="${this._handleAuthProviderPick}"
+              @pick-auth-provider=${this._handleAuthProviderPick}
             ></ha-pick-auth-provider>
           `
         : ""}
@@ -158,7 +158,7 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
 
       this._authProviders = authProviders;
       this._authProvider = authProviders[0];
-    } catch (err) {
+    } catch (err: any) {
       // eslint-disable-next-line
       console.error("Error loading auth providers", err);
     }
@@ -174,6 +174,10 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
         display: block;
         margin-top: 48px;
       }
+      ha-auth-flow {
+        display: block;
+        margin-top: 24px;
+      }
     `;
   }
 }

src/auth/ha-password-manager-polyfill.ts

@@ -1,8 +1,9 @@
+/* eslint-disable lit/prefer-static-styles */
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import { HaFormSchema } from "../components/ha-form/ha-form";
+import type { HaFormSchema } from "../components/ha-form/types";
-import { DataEntryFlowStep } from "../data/data_entry_flow";
+import type { DataEntryFlowStep } from "../data/data_entry_flow";
 
 declare global {
   interface HTMLElementTagNameMap {

src/auth/ha-pick-auth-provider.ts

@@ -1,6 +1,6 @@
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import "../components/ha-icon-next";
@@ -18,14 +18,6 @@ class HaPickAuthProvider extends litLocalizeLiteMixin(LitElement) {
 
   protected render() {
     return html`
-      <style>
-        paper-item {
-          cursor: pointer;
-        }
-        p {
-          margin-top: 0;
-        }
-      </style>
       <p>${this.localize("ui.panel.page-authorize.pick_auth_provider")}:</p>
       ${this.authProviders.map(
         (provider) => html`
@@ -41,5 +33,14 @@ class HaPickAuthProvider extends litLocalizeLiteMixin(LitElement) {
   private _handlePick(ev) {
     fireEvent(this, "pick-auth-provider", ev.currentTarget.auth_provider);
   }
+
+  static styles = css`
+    paper-item {
+      cursor: pointer;
+    }
+    p {
+      margin-top: 0;
+    }
+  `;
 }
 customElements.define("ha-pick-auth-provider", HaPickAuthProvider);

src/common/auth/token_storage.ts

@@ -1,4 +1,5 @@
 import { AuthData } from "home-assistant-js-websocket";
+import { extractSearchParam } from "../url/search-params";
 
 const storage = window.localStorage || {};
 
@@ -30,10 +31,15 @@ export function askWrite() {
 
 export function saveTokens(tokens: AuthData | null) {
   tokenCache.tokens = tokens;
+
+  if (!tokenCache.writeEnabled && extractSearchParam("storeToken") === "true") {
+    tokenCache.writeEnabled = true;
+  }
+
   if (tokenCache.writeEnabled) {
     try {
       storage.hassTokens = JSON.stringify(tokens);
-    } catch (err) {
+    } catch (err: any) {
       // write failed, ignore it. Happens if storage is full or private mode.
     }
   }
@@ -45,7 +51,6 @@ export function enableWrite() {
     saveTokens(tokenCache.tokens);
   }
 }
-
 export function loadTokens() {
   if (tokenCache.tokens === undefined) {
     try {
@@ -58,7 +63,7 @@ export function loadTokens() {
       } else {
         tokenCache.tokens = null;
       }
-    } catch (err) {
+    } catch (err: any) {
       tokenCache.tokens = null;
     }
   }

src/common/config/version.ts

@@ -4,6 +4,10 @@ export const atLeastVersion = (
   minor: number,
   patch?: number
 ): boolean => {
+  if (__DEMO__) {
+    return true;
+  }
+
   const [haMajor, haMinor, haPatch] = version.split(".", 3);
 
   return (

src/common/const.ts

@@ -1,87 +1,146 @@
 /** Constants to be used in the frontend. */
 
+import {
+  mdiAccount,
+  mdiAirFilter,
+  mdiAlert,
+  mdiAngleAcute,
+  mdiAppleSafari,
+  mdiBell,
+  mdiBookmark,
+  mdiBrightness5,
+  mdiBullhorn,
+  mdiCalendar,
+  mdiCalendarClock,
+  mdiCash,
+  mdiClock,
+  mdiCloudUpload,
+  mdiCog,
+  mdiCommentAlert,
+  mdiCounter,
+  mdiCurrentAc,
+  mdiEye,
+  mdiFan,
+  mdiFlash,
+  mdiFlower,
+  mdiFormatListBulleted,
+  mdiFormTextbox,
+  mdiGasCylinder,
+  mdiGauge,
+  mdiGoogleAssistant,
+  mdiGoogleCirclesCommunities,
+  mdiHomeAssistant,
+  mdiHomeAutomation,
+  mdiImageFilterFrames,
+  mdiLightbulb,
+  mdiLightningBolt,
+  mdiMailbox,
+  mdiMapMarkerRadius,
+  mdiMolecule,
+  mdiMoleculeCo,
+  mdiMoleculeCo2,
+  mdiPalette,
+  mdiRayVertex,
+  mdiRemote,
+  mdiRobot,
+  mdiRobotVacuum,
+  mdiScriptText,
+  mdiSineWave,
+  mdiTextToSpeech,
+  mdiThermometer,
+  mdiThermostat,
+  mdiTimerOutline,
+  mdiToggleSwitchOutline,
+  mdiVideo,
+  mdiWaterPercent,
+  mdiWeatherCloudy,
+  mdiWhiteBalanceSunny,
+  mdiWifi,
+} from "@mdi/js";
+
 // Constants should be alphabetically sorted by name.
 // Arrays with values should be alphabetically sorted if order doesn't matter.
 // Each constant should have a description what it is supposed to be used for.
 
 /** Icon to use when no icon specified for domain. */
-export const DEFAULT_DOMAIN_ICON = "hass:bookmark";
+export const DEFAULT_DOMAIN_ICON = mdiBookmark;
 
 /** Icons for each domain */
 export const FIXED_DOMAIN_ICONS = {
-  alert: "hass:alert",
+  alert: mdiAlert,
-  alexa: "hass:amazon-alexa",
+  air_quality: mdiAirFilter,
-  air_quality: "hass:air-filter",
+  automation: mdiRobot,
-  automation: "hass:robot",
+  calendar: mdiCalendar,
-  calendar: "hass:calendar",
+  camera: mdiVideo,
-  camera: "hass:video",
+  climate: mdiThermostat,
-  climate: "hass:thermostat",
+  configurator: mdiCog,
-  configurator: "hass:cog",
+  conversation: mdiTextToSpeech,
-  conversation: "hass:text-to-speech",
+  counter: mdiCounter,
-  counter: "hass:counter",
+  device_tracker: mdiAccount,
-  device_tracker: "hass:account",
+  fan: mdiFan,
-  fan: "hass:fan",
+  google_assistant: mdiGoogleAssistant,
-  google_assistant: "hass:google-assistant",
+  group: mdiGoogleCirclesCommunities,
-  group: "hass:google-circles-communities",
+  homeassistant: mdiHomeAssistant,
-  homeassistant: "hass:home-assistant",
+  homekit: mdiHomeAutomation,
-  homekit: "hass:home-automation",
+  image_processing: mdiImageFilterFrames,
-  image_processing: "hass:image-filter-frames",
+  input_boolean: mdiToggleSwitchOutline,
-  input_boolean: "hass:toggle-switch-outline",
+  input_datetime: mdiCalendarClock,
-  input_datetime: "hass:calendar-clock",
+  input_number: mdiRayVertex,
-  input_number: "hass:ray-vertex",
+  input_select: mdiFormatListBulleted,
-  input_select: "hass:format-list-bulleted",
+  input_text: mdiFormTextbox,
-  input_text: "hass:form-textbox",
+  light: mdiLightbulb,
-  light: "hass:lightbulb",
+  mailbox: mdiMailbox,
-  mailbox: "hass:mailbox",
+  notify: mdiCommentAlert,
-  notify: "hass:comment-alert",
+  number: mdiRayVertex,
-  number: "hass:ray-vertex",
+  persistent_notification: mdiBell,
-  persistent_notification: "hass:bell",
+  person: mdiAccount,
-  person: "hass:account",
+  plant: mdiFlower,
-  plant: "hass:flower",
+  proximity: mdiAppleSafari,
-  proximity: "hass:apple-safari",
+  remote: mdiRemote,
-  remote: "hass:remote",
+  scene: mdiPalette,
-  scene: "hass:palette",
+  script: mdiScriptText,
-  script: "hass:script-text",
+  select: mdiFormatListBulleted,
-  select: "hass:format-list-bulleted",
+  sensor: mdiEye,
-  sensor: "hass:eye",
+  siren: mdiBullhorn,
-  simple_alarm: "hass:bell",
+  simple_alarm: mdiBell,
-  sun: "hass:white-balance-sunny",
+  sun: mdiWhiteBalanceSunny,
-  switch: "hass:flash",
+  switch: mdiFlash,
-  timer: "hass:timer-outline",
+  timer: mdiTimerOutline,
-  updater: "hass:cloud-upload",
+  updater: mdiCloudUpload,
-  vacuum: "hass:robot-vacuum",
+  vacuum: mdiRobotVacuum,
-  water_heater: "hass:thermometer",
+  water_heater: mdiThermometer,
-  weather: "hass:weather-cloudy",
+  weather: mdiWeatherCloudy,
-  zone: "hass:map-marker-radius",
+  zone: mdiMapMarkerRadius,
 };
 
 export const FIXED_DEVICE_CLASS_ICONS = {
-  aqi: "hass:air-filter",
+  aqi: mdiAirFilter,
-  current: "hass:current-ac",
+  // battery: mdiBattery, => not included by design since `sensorIcon()` will dynamically determine the icon
-  carbon_dioxide: "mdi:molecule-co2",
+  carbon_dioxide: mdiMoleculeCo2,
-  carbon_monoxide: "mdi:molecule-co",
+  carbon_monoxide: mdiMoleculeCo,
-  date: "hass:calendar",
+  current: mdiCurrentAc,
-  energy: "hass:lightning-bolt",
+  date: mdiCalendar,
-  gas: "hass:gas-cylinder",
+  energy: mdiLightningBolt,
-  humidity: "hass:water-percent",
+  gas: mdiGasCylinder,
-  illuminance: "hass:brightness-5",
+  humidity: mdiWaterPercent,
-  nitrogen_dioxide: "mdi:molecule",
+  illuminance: mdiBrightness5,
-  nitrogen_monoxide: "mdi:molecule",
+  monetary: mdiCash,
-  nitrous_oxide: "mdi:molecule",
+  nitrogen_dioxide: mdiMolecule,
-  ozone: "mdi:molecule",
+  nitrogen_monoxide: mdiMolecule,
-  temperature: "hass:thermometer",
+  nitrous_oxide: mdiMolecule,
-  monetary: "mdi:cash",
+  ozone: mdiMolecule,
-  pm25: "mdi:molecule",
+  pm1: mdiMolecule,
-  pm1: "mdi:molecule",
+  pm10: mdiMolecule,
-  pm10: "mdi:molecule",
+  pm25: mdiMolecule,
-  pressure: "hass:gauge",
+  power: mdiFlash,
-  power: "hass:flash",
+  power_factor: mdiAngleAcute,
-  power_factor: "hass:angle-acute",
+  pressure: mdiGauge,
-  signal_strength: "hass:wifi",
+  signal_strength: mdiWifi,
-  sulphur_dioxide: "mdi:molecule",
+  sulphur_dioxide: mdiMolecule,
-  timestamp: "hass:clock",
+  temperature: mdiThermometer,
-  volatile_organic_compounds: "mdi:molecule",
+  timestamp: mdiClock,
-  voltage: "hass:sine-wave",
+  volatile_organic_compounds: mdiMolecule,
+  voltage: mdiSineWave,
 };
 
 /** Domains that have a state card. */

src/common/datetime/check_options_support.ts

@@ -1,34 +0,0 @@
-// Check for support of native locale string options
-function checkToLocaleDateStringSupportsOptions() {
-  try {
-    new Date().toLocaleDateString("i");
-  } catch (e) {
-    return e.name === "RangeError";
-  }
-  return false;
-}
-
-function checkToLocaleTimeStringSupportsOptions() {
-  try {
-    new Date().toLocaleTimeString("i");
-  } catch (e) {
-    return e.name === "RangeError";
-  }
-  return false;
-}
-
-function checkToLocaleStringSupportsOptions() {
-  try {
-    new Date().toLocaleString("i");
-  } catch (e) {
-    return e.name === "RangeError";
-  }
-  return false;
-}
-
-export const toLocaleDateStringSupportsOptions =
-  checkToLocaleDateStringSupportsOptions();
-export const toLocaleTimeStringSupportsOptions =
-  checkToLocaleTimeStringSupportsOptions();
-export const toLocaleStringSupportsOptions =
-  checkToLocaleStringSupportsOptions();

src/common/datetime/format_date.ts

@@ -1,13 +1,15 @@
-import { format } from "fecha";
 import memoizeOne from "memoize-one";
 import { FrontendLocaleData } from "../../data/translation";
-import { toLocaleDateStringSupportsOptions } from "./check_options_support";
+import { polyfillsLoaded } from "../translations/localize";
+
+if (__BUILD__ === "latest" && polyfillsLoaded) {
+  await polyfillsLoaded;
+}
 
 // Tuesday, August 10
-export const formatDateWeekday = toLocaleDateStringSupportsOptions
+export const formatDateWeekday = (dateObj: Date, locale: FrontendLocaleData) =>
-  ? (dateObj: Date, locale: FrontendLocaleData) =>
+  formatDateWeekdayMem(locale).format(dateObj);
-      formatDateWeekdayMem(locale).format(dateObj)
+
-  : (dateObj: Date) => format(dateObj, "dddd, MMMM D");
 const formatDateWeekdayMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -18,10 +20,9 @@ const formatDateWeekdayMem = memoizeOne(
 );
 
 // August 10, 2021
-export const formatDate = toLocaleDateStringSupportsOptions
+export const formatDate = (dateObj: Date, locale: FrontendLocaleData) =>
-  ? (dateObj: Date, locale: FrontendLocaleData) =>
+  formatDateMem(locale).format(dateObj);
-      formatDateMem(locale).format(dateObj)
+
-  : (dateObj: Date) => format(dateObj, "MMMM D, YYYY");
 const formatDateMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -32,10 +33,9 @@ const formatDateMem = memoizeOne(
 );
 
 // 10/08/2021
-export const formatDateNumeric = toLocaleDateStringSupportsOptions
+export const formatDateNumeric = (dateObj: Date, locale: FrontendLocaleData) =>
-  ? (dateObj: Date, locale: FrontendLocaleData) =>
+  formatDateNumericMem(locale).format(dateObj);
-      formatDateNumericMem(locale).format(dateObj)
+
-  : (dateObj: Date) => format(dateObj, "M/D/YYYY");
 const formatDateNumericMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -46,10 +46,9 @@ const formatDateNumericMem = memoizeOne(
 );
 
 // Aug 10
-export const formatDateShort = toLocaleDateStringSupportsOptions
+export const formatDateShort = (dateObj: Date, locale: FrontendLocaleData) =>
-  ? (dateObj: Date, locale: FrontendLocaleData) =>
+  formatDateShortMem(locale).format(dateObj);
-      formatDateShortMem(locale).format(dateObj)
+
-  : (dateObj: Date) => format(dateObj, "MMM D");
 const formatDateShortMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -59,10 +58,11 @@ const formatDateShortMem = memoizeOne(
 );
 
 // August 2021
-export const formatDateMonthYear = toLocaleDateStringSupportsOptions
+export const formatDateMonthYear = (
-  ? (dateObj: Date, locale: FrontendLocaleData) =>
+  dateObj: Date,
-      formatDateMonthYearMem(locale).format(dateObj)
+  locale: FrontendLocaleData
-  : (dateObj: Date) => format(dateObj, "MMMM YYYY");
+) => formatDateMonthYearMem(locale).format(dateObj);
+
 const formatDateMonthYearMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -72,10 +72,9 @@ const formatDateMonthYearMem = memoizeOne(
 );
 
 // August
-export const formatDateMonth = toLocaleDateStringSupportsOptions
+export const formatDateMonth = (dateObj: Date, locale: FrontendLocaleData) =>
-  ? (dateObj: Date, locale: FrontendLocaleData) =>
+  formatDateMonthMem(locale).format(dateObj);
-      formatDateMonthMem(locale).format(dateObj)
+
-  : (dateObj: Date) => format(dateObj, "MMMM");
 const formatDateMonthMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -84,10 +83,9 @@ const formatDateMonthMem = memoizeOne(
 );
 
 // 2021
-export const formatDateYear = toLocaleDateStringSupportsOptions
+export const formatDateYear = (dateObj: Date, locale: FrontendLocaleData) =>
-  ? (dateObj: Date, locale: FrontendLocaleData) =>
+  formatDateYearMem(locale).format(dateObj);
-      formatDateYearMem(locale).format(dateObj)
+
-  : (dateObj: Date) => format(dateObj, "YYYY");
 const formatDateYearMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {

src/common/datetime/format_date_time.ts

@@ -1,15 +1,16 @@
-import { format } from "fecha";
 import memoizeOne from "memoize-one";
 import { FrontendLocaleData } from "../../data/translation";
-import { toLocaleStringSupportsOptions } from "./check_options_support";
 import { useAmPm } from "./use_am_pm";
+import { polyfillsLoaded } from "../translations/localize";
+
+if (__BUILD__ === "latest" && polyfillsLoaded) {
+  await polyfillsLoaded;
+}
 
 // August 9, 2021, 8:23 AM
-export const formatDateTime = toLocaleStringSupportsOptions
+export const formatDateTime = (dateObj: Date, locale: FrontendLocaleData) =>
-  ? (dateObj: Date, locale: FrontendLocaleData) =>
+  formatDateTimeMem(locale).format(dateObj);
-      formatDateTimeMem(locale).format(dateObj)
+
-  : (dateObj: Date, locale: FrontendLocaleData) =>
-      format(dateObj, "MMMM D, YYYY, HH:mm" + useAmPm(locale) ? " A" : "");
 const formatDateTimeMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -23,11 +24,11 @@ const formatDateTimeMem = memoizeOne(
 );
 
 // August 9, 2021, 8:23:15 AM
-export const formatDateTimeWithSeconds = toLocaleStringSupportsOptions
+export const formatDateTimeWithSeconds = (
-  ? (dateObj: Date, locale: FrontendLocaleData) =>
+  dateObj: Date,
-      formatDateTimeWithSecondsMem(locale).format(dateObj)
+  locale: FrontendLocaleData
-  : (dateObj: Date, locale: FrontendLocaleData) =>
+) => formatDateTimeWithSecondsMem(locale).format(dateObj);
-      format(dateObj, "MMMM D, YYYY, HH:mm:ss" + useAmPm(locale) ? " A" : "");
+
 const formatDateTimeWithSecondsMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -42,11 +43,11 @@ const formatDateTimeWithSecondsMem = memoizeOne(
 );
 
 // 9/8/2021, 8:23 AM
-export const formatDateTimeNumeric = toLocaleStringSupportsOptions
+export const formatDateTimeNumeric = (
-  ? (dateObj: Date, locale: FrontendLocaleData) =>
+  dateObj: Date,
-      formatDateTimeNumericMem(locale).format(dateObj)
+  locale: FrontendLocaleData
-  : (dateObj: Date, locale: FrontendLocaleData) =>
+) => formatDateTimeNumericMem(locale).format(dateObj);
-      format(dateObj, "M/D/YYYY, HH:mm" + useAmPm(locale) ? " A" : "");
+
 const formatDateTimeNumericMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {

src/common/datetime/format_time.ts

@@ -1,30 +1,31 @@
-import { format } from "fecha";
 import memoizeOne from "memoize-one";
 import { FrontendLocaleData } from "../../data/translation";
-import { toLocaleTimeStringSupportsOptions } from "./check_options_support";
 import { useAmPm } from "./use_am_pm";
+import { polyfillsLoaded } from "../translations/localize";
+
+if (__BUILD__ === "latest" && polyfillsLoaded) {
+  await polyfillsLoaded;
+}
 
 // 9:15 PM || 21:15
-export const formatTime = toLocaleTimeStringSupportsOptions
+export const formatTime = (dateObj: Date, locale: FrontendLocaleData) =>
-  ? (dateObj: Date, locale: FrontendLocaleData) =>
+  formatTimeMem(locale).format(dateObj);
-      formatTimeMem(locale).format(dateObj)
+
-  : (dateObj: Date, locale: FrontendLocaleData) =>
-      format(dateObj, "shortTime" + useAmPm(locale) ? " A" : "");
 const formatTimeMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
-      hour: useAmPm(locale) ? "numeric" : "2-digit",
+      hour: "numeric",
       minute: "2-digit",
       hour12: useAmPm(locale),
     })
 );
 
 // 9:15:24 PM || 21:15:24
-export const formatTimeWithSeconds = toLocaleTimeStringSupportsOptions
+export const formatTimeWithSeconds = (
-  ? (dateObj: Date, locale: FrontendLocaleData) =>
+  dateObj: Date,
-      formatTimeWithSecondsMem(locale).format(dateObj)
+  locale: FrontendLocaleData
-  : (dateObj: Date, locale: FrontendLocaleData) =>
+) => formatTimeWithSecondsMem(locale).format(dateObj);
-      format(dateObj, "mediumTime" + useAmPm(locale) ? " A" : "");
+
 const formatTimeWithSecondsMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
@@ -36,17 +37,15 @@ const formatTimeWithSecondsMem = memoizeOne(
 );
 
 // Tuesday 7:00 PM || Tuesday 19:00
-export const formatTimeWeekday = toLocaleTimeStringSupportsOptions
+export const formatTimeWeekday = (dateObj: Date, locale: FrontendLocaleData) =>
-  ? (dateObj: Date, locale: FrontendLocaleData) =>
+  formatTimeWeekdayMem(locale).format(dateObj);
-      formatTimeWeekdayMem(locale).format(dateObj)
+
-  : (dateObj: Date, locale: FrontendLocaleData) =>
-      format(dateObj, "dddd, HH:mm" + useAmPm(locale) ? " A" : "");
 const formatTimeWeekdayMem = memoizeOne(
   (locale: FrontendLocaleData) =>
     new Intl.DateTimeFormat(locale.language, {
-      weekday: "long",
       hour: useAmPm(locale) ? "numeric" : "2-digit",
       minute: "2-digit",
+      second: "2-digit",
       hour12: useAmPm(locale),
     })
 );

src/common/datetime/relative_time.ts

@@ -1,48 +1,32 @@
-import { LocalizeFunc } from "../translations/localize";
+import { selectUnit } from "@formatjs/intl-utils";
+import memoizeOne from "memoize-one";
+import { FrontendLocaleData } from "../../data/translation";
+import { polyfillsLoaded } from "../translations/localize";
 
-/**
+if (__BUILD__ === "latest" && polyfillsLoaded) {
- * Calculate a string representing a date object as relative time from now.
+  await polyfillsLoaded;
- *
- * Example output: 5 minutes ago, in 3 days.
- */
-const tests = [60, 60, 24, 7];
-const langKey = ["second", "minute", "hour", "day"];
-
-export default function relativeTime(
-  dateObj: Date,
-  localize: LocalizeFunc,
-  options: {
-    compareTime?: Date;
-    includeTense?: boolean;
-  } = {}
-): string {
-  const compareTime = options.compareTime || new Date();
-  let delta = (compareTime.getTime() - dateObj.getTime()) / 1000;
-  const tense = delta >= 0 ? "past" : "future";
-  delta = Math.abs(delta);
-  let roundedDelta = Math.round(delta);
-
-  if (roundedDelta === 0) {
-    return localize("ui.components.relative_time.just_now");
-  }
-
-  let unit = "week";
-
-  for (let i = 0; i < tests.length; i++) {
-    if (roundedDelta < tests[i]) {
-      unit = langKey[i];
-      break;
-    }
-
-    delta /= tests[i];
-    roundedDelta = Math.round(delta);
-  }
-
-  return localize(
-    options.includeTense === false
-      ? `ui.components.relative_time.duration.${unit}`
-      : `ui.components.relative_time.${tense}_duration.${unit}`,
-    "count",
-    roundedDelta
-  );
 }
+
+const formatRelTimeMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    // @ts-expect-error
+    new Intl.RelativeTimeFormat(locale.language, { numeric: "auto" })
+);
+
+export const relativeTime = (
+  from: Date,
+  locale: FrontendLocaleData,
+  to?: Date,
+  includeTense = true
+): string => {
+  const diff = selectUnit(from, to);
+  if (includeTense) {
+    return formatRelTimeMem(locale).format(diff.value, diff.unit);
+  }
+  return Intl.NumberFormat(locale.language, {
+    style: "unit",
+    // @ts-expect-error
+    unit: diff.unit,
+    unitDisplay: "long",
+  }).format(Math.abs(diff.value));
+};

src/common/decorators/local-storage.ts

@@ -74,7 +74,7 @@ class Storage {
     this._storage[storageKey] = value;
     try {
       window.localStorage.setItem(storageKey, JSON.stringify(value));
-    } catch (err) {
+    } catch (err: any) {
       // Safari in private mode doesn't allow localstorage
     }
   }

src/common/dom/apply_themes_on_element.ts

@@ -36,55 +36,62 @@ export const applyThemesOnElement = (
   let cacheKey = selectedTheme;
   let themeRules: Partial<ThemeVars> = {};
 
-  if (themeSettings) {
+  // If there is no explicitly desired dark mode provided, we automatically
-    if (themeSettings.dark) {
+  // use the active one from hass.themes.
-      cacheKey = `${cacheKey}__dark`;
+  if (!themeSettings || themeSettings?.dark === undefined) {
-      themeRules = { ...darkStyles };
+    themeSettings = {
+      ...themeSettings,
+      dark: themes.darkMode,
+    };
+  }
+
+  if (themeSettings.dark) {
+    cacheKey = `${cacheKey}__dark`;
+    themeRules = { ...darkStyles };
+  }
+
+  if (selectedTheme === "default") {
+    // Determine the primary and accent colors from the current settings.
+    // Fallbacks are implicitly the HA default blue and orange or the
+    // derived "darkStyles" values, depending on the light vs dark mode.
+    const primaryColor = themeSettings.primaryColor;
+    const accentColor = themeSettings.accentColor;
+
+    if (themeSettings.dark && primaryColor) {
+      themeRules["app-header-background-color"] = hexBlend(
+        primaryColor,
+        "#121212",
+        8
+      );
     }
 
-    if (selectedTheme === "default") {
+    if (primaryColor) {
-      // Determine the primary and accent colors from the current settings.
+      cacheKey = `${cacheKey}__primary_${primaryColor}`;
-      // Fallbacks are implicitly the HA default blue and orange or the
+      const rgbPrimaryColor = hex2rgb(primaryColor);
-      // derived "darkStyles" values, depending on the light vs dark mode.
+      const labPrimaryColor = rgb2lab(rgbPrimaryColor);
-      const primaryColor = themeSettings.primaryColor;
+      themeRules["primary-color"] = primaryColor;
-      const accentColor = themeSettings.accentColor;
+      const rgbLightPrimaryColor = lab2rgb(labBrighten(labPrimaryColor));
+      themeRules["light-primary-color"] = rgb2hex(rgbLightPrimaryColor);
+      themeRules["dark-primary-color"] = lab2hex(labDarken(labPrimaryColor));
+      themeRules["text-primary-color"] =
+        rgbContrast(rgbPrimaryColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
+      themeRules["text-light-primary-color"] =
+        rgbContrast(rgbLightPrimaryColor, [33, 33, 33]) < 6
+          ? "#fff"
+          : "#212121";
+      themeRules["state-icon-color"] = themeRules["dark-primary-color"];
+    }
+    if (accentColor) {
+      cacheKey = `${cacheKey}__accent_${accentColor}`;
+      themeRules["accent-color"] = accentColor;
+      const rgbAccentColor = hex2rgb(accentColor);
+      themeRules["text-accent-color"] =
+        rgbContrast(rgbAccentColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
+    }
 
-      if (themeSettings.dark && primaryColor) {
+    // Nothing was changed
-        themeRules["app-header-background-color"] = hexBlend(
+    if (element._themes?.cacheKey === cacheKey) {
-          primaryColor,
+      return;
-          "#121212",
-          8
-        );
-      }
-
-      if (primaryColor) {
-        cacheKey = `${cacheKey}__primary_${primaryColor}`;
-        const rgbPrimaryColor = hex2rgb(primaryColor);
-        const labPrimaryColor = rgb2lab(rgbPrimaryColor);
-        themeRules["primary-color"] = primaryColor;
-        const rgbLightPrimaryColor = lab2rgb(labBrighten(labPrimaryColor));
-        themeRules["light-primary-color"] = rgb2hex(rgbLightPrimaryColor);
-        themeRules["dark-primary-color"] = lab2hex(labDarken(labPrimaryColor));
-        themeRules["text-primary-color"] =
-          rgbContrast(rgbPrimaryColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
-        themeRules["text-light-primary-color"] =
-          rgbContrast(rgbLightPrimaryColor, [33, 33, 33]) < 6
-            ? "#fff"
-            : "#212121";
-        themeRules["state-icon-color"] = themeRules["dark-primary-color"];
-      }
-      if (accentColor) {
-        cacheKey = `${cacheKey}__accent_${accentColor}`;
-        themeRules["accent-color"] = accentColor;
-        const rgbAccentColor = hex2rgb(accentColor);
-        themeRules["text-accent-color"] =
-          rgbContrast(rgbAccentColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
-      }
-
-      // Nothing was changed
-      if (element._themes?.cacheKey === cacheKey) {
-        return;
-      }
     }
   }
 
@@ -115,7 +122,7 @@ export const applyThemesOnElement = (
   }
 
   const newTheme =
-    themeRules && cacheKey
+    Object.keys(themeRules).length && cacheKey
       ? PROCESSED_THEMES[cacheKey] || processTheme(cacheKey, themeRules)
       : undefined;
 
@@ -167,7 +174,7 @@ const processTheme = (
       const prefixedRgbKey = `--${rgbKey}`;
       styles[prefixedRgbKey] = rgbValue;
       keys[prefixedRgbKey] = "";
-    } catch (e) {
+    } catch (err: any) {
       continue;
     }
   }