change

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

.devcontainer/devcontainer.json

@@ -4,7 +4,7 @@
     "dockerfile": "Dockerfile",
     "context": ".."
   },
-  "appPort": 8123,
+  "appPort": "8124:8123",
   "context": "..",
   "postCreateCommand": "script/bootstrap",
   "extensions": [

.eslintrc.json

@@ -4,8 +4,7 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:wc/recommended",
     "plugin:lit/recommended",
-    "prettier",
-    "prettier/@typescript-eslint"
+    "prettier"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
@@ -29,9 +28,7 @@
     "__BUILD__": false,
     "__VERSION__": false,
     "__STATIC_PATH__": false,
-    "Polymer": true,
-    "webkitSpeechRecognition": false,
-    "ResizeObserver": false
+    "Polymer": true
   },
   "env": {
     "browser": true,
@@ -84,8 +81,29 @@
     "@typescript-eslint/no-unused-vars": 0,
     "@typescript-eslint/explicit-function-return-type": 0,
     "@typescript-eslint/explicit-module-boundary-types": 0,
-    "@typescript-eslint/no-shadow": ["error"]
+    "@typescript-eslint/no-shadow": ["error"],
+    "@typescript-eslint/naming-convention": [
+      0,
+      {
+        "selector": "default",
+        "format": ["camelCase", "snake_case"],
+        "leadingUnderscore": "allow",
+        "trailingUnderscore": "allow"
+      },
+      {
+        "selector": ["variable"],
+        "format": ["camelCase", "snake_case", "UPPER_CASE"],
+        "leadingUnderscore": "allow",
+        "trailingUnderscore": "allow"
+      },
+      {
+        "selector": "typeLike",
+        "format": ["PascalCase"]
+      }
+    ],
+    "lit/attribute-value-entities": 0
   },
   "plugins": ["disable", "import", "lit", "prettier", "@typescript-eslint"],
-  "processor": "disable/disable"
+  "processor": "disable/disable",
+  "ignorePatterns": ["src/resources/lit-virtualizer/*"]
 }

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,121 @@
+name: Report a bug with the UI, Frontend or Lovelace
+description: Report an issue related to the Home Assistant frontend.
+labels: bug
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Make sure you are running the [latest version of Home Assistant][releases] before reporting an issue.
+
+        If you have a feature or enhancement request for the frontend, please [start an discussion][fr] instead of creating an issue.
+
+        **Please not not report issues for custom Lovelace cards.**
+
+        [fr]: https://github.com/home-assistant/frontend/discussions
+        [releases]: https://github.com/home-assistant/home-assistant/releases
+  - type: checkboxes
+    attributes:
+      label: Checklist
+      description: Please verify that you've followed these steps
+      options:
+        - label: I have updated to the latest available Home Assistant version.
+          required: true
+        - label: I have cleared the cache of my browser.
+          required: true
+        - label: I have tried a different browser to see if it is related to my browser.
+          required: true
+  - type: markdown
+    attributes:
+      value: |
+        ## The problem
+  - type: textarea
+    validations:
+      required: true
+    attributes:
+      label: Describe the issue you are experiencing
+      description: Provide a clear and concise description of what the bug is.
+  - type: textarea
+    validations:
+      required: true
+    attributes:
+      label: Describe the behavior you expected
+      description: Describe what you expected to happen or it should look/behave.
+  - type: textarea
+    validations:
+      required: true
+    attributes:
+      label: Steps to reproduce the issue
+      description: |
+        Please tell us exactly how to reproduce your issue.
+        Provide clear and concise step by step instructions and add code snippets if needed.
+      value: |
+        1.
+        2.
+        3.
+        ...
+  - type: markdown
+    attributes:
+      value: |
+        ## Environment
+  - type: input
+    validations:
+      required: true
+    attributes:
+      label: What version of Home Assistant Core has the issue?
+      placeholder: core-
+      description: >
+        Can be found in the Configuration panel -> Info.
+  - type: input
+    attributes:
+      label: What was the last working version of Home Assistant Core?
+      placeholder: core-
+      description: >
+        If known, otherwise leave blank.
+  - type: input
+    attributes:
+      label: In which browser are you experiencing the issue with?
+      placeholder: Google Chrome 88.0.4324.150
+      description: >
+        Provide the full name and don't forget to add the version!
+  - type: input
+    attributes:
+      label: Which operating system are you using to run this browser?
+      placeholder: macOS Big Sur (1.11)
+      description: >
+        Don't forget to add the version!
+  - type: markdown
+    attributes:
+      value: |
+        # Details
+
+  - type: textarea
+    attributes:
+      label: State of relevant entities
+      description: >
+        If your issue is about how an entity is shown in the UI, please add the
+        state and attributes for all situations. You can find this information
+        at Developer Tools -> States.
+      render: txt
+  - type: textarea
+    attributes:
+      label: Problem-relevant frontend configuration
+      description: >
+        An example configuration that caused the problem for you, e.g., the YAML
+        configuration of the used cards. Fill this out even if it seems
+        unimportant to you. Please be sure to remove personal information like
+        passwords, private URLs and other credentials.
+      render: yaml
+  - type: textarea
+    attributes:
+      label: Javascript errors shown in your browser console/inspector
+      description: >
+        If you come across any Javascript or other error logs, e.g., in your
+        browser console/inspector please provide them.
+      render: txt
+  - type: textarea
+    attributes:
+      label: Additional information
+      description: >
+        If you have any additional information for us, use the field below.
+        Please note, you can attach screenshots or screen recordings here, by
+        dragging and dropping files in the field below.

.github/workflows/ci.yaml

@@ -37,9 +37,11 @@ jobs:
       - name: Build resources
         run: ./node_modules/.bin/gulp gen-icons-json build-translations gather-gallery-demos
       - name: Run eslint
-        run: ./node_modules/.bin/eslint '{**/src,src}/**/*.{js,ts,html}' --ignore-path .gitignore
+        run: yarn run lint:eslint
       - name: Run tsc
-        run: ./node_modules/.bin/tsc
+        run: yarn run lint:types
+      - name: Run prettier
+        run: yarn run lint:prettier
   test:
     runs-on: ubuntu-latest
     steps:

.github/workflows/release.yaml

@@ -6,8 +6,7 @@ on:
       - published
 
 env:
-  WHEELS_TAG: 3.7-alpine3.11
-  PYTHON_VERSION: 3.7
+  PYTHON_VERSION: 3.8
   NODE_VERSION: 12.1
 
 jobs:
@@ -64,6 +63,9 @@ jobs:
     strategy:
       matrix:
         arch: ["aarch64", "armhf", "armv7", "amd64", "i386"]
+        tag:
+          - "3.8-alpine3.12"
+          - "3.9-alpine3.13"
     steps:
       - name: Download requirements.txt
         uses: actions/download-artifact@v2
@@ -73,7 +75,7 @@ jobs:
       - name: Build wheels
         uses: home-assistant/wheels@master
         with:
-          tag: ${{ env.WHEELS_TAG }}
+          tag: ${{ matrix.tag }}
           arch: ${{ matrix.arch }}
           wheels-host: ${{ secrets.WHEELS_HOST }}
           wheels-key: ${{ secrets.WHEELS_KEY }}

.github/workflows/translations.yaml

@@ -7,7 +7,7 @@ on:
     branches:
       - dev
     paths:
-      - translations/en.json
+      - src/translations/en.json
 
 env:
   NODE_VERSION: 12

.gitignore

@@ -1,10 +1,17 @@
+.DS_Store
+.reify-cache
+
+# build
 build
 build-translations/*
+hass_frontend/*
+dist
+
+# yarn
+.yarn
+yarn-error.log
 node_modules/*
 npm-debug.log
-.DS_Store
-hass_frontend/*
-.reify-cache
 
 # Python stuff
 *.py[cod]
@@ -14,11 +21,8 @@ hass_frontend/*
 # venv stuff
 pyvenv.cfg
 pip-selfcheck.json
-venv
+venv/*
 .venv
-lib
-bin
-dist
 
 # vscode
 .vscode/*
@@ -31,9 +35,8 @@ src/cast/dev_const.ts
 
 # Secrets
 .lokalise_token
-yarn-error.log
 
-#asdf
+# asdf
 .tool-versions
 
 # Home Assistant config

.mocharc.cjs

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

build-scripts/bundle.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
 const env = require("./env.js");
 const paths = require("./paths.js");
@@ -51,15 +52,16 @@ module.exports.terserOptions = (latestBuild) => ({
 
 module.exports.babelOptions = ({ latestBuild }) => ({
   babelrc: false,
+  compact: false,
   presets: [
     !latestBuild && [
-      require("@babel/preset-env").default,
+      "@babel/preset-env",
       {
         useBuiltIns: "entry",
         corejs: "3.6",
       },
     ],
-    require("@babel/preset-typescript").default,
+    "@babel/preset-typescript",
   ].filter(Boolean),
   plugins: [
     // Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2})
@@ -72,23 +74,12 @@ module.exports.babelOptions = ({ latestBuild }) => ({
     "@babel/plugin-syntax-dynamic-import",
     "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-proposal-nullish-coalescing-operator",
-    [
-      require("@babel/plugin-proposal-decorators").default,
-      { decoratorsBeforeExport: true },
-    ],
-    [
-      require("@babel/plugin-proposal-class-properties").default,
-      { loose: true },
-    ],
+    ["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
+    ["@babel/plugin-proposal-private-methods", { loose: true }],
+    ["@babel/plugin-proposal-class-properties", { loose: true }],
   ].filter(Boolean),
 });
 
-// Are already ES5, cause warnings when babelified.
-module.exports.babelExclude = () => [
-  require.resolve("@mdi/js/mdi.js"),
-  require.resolve("hls.js"),
-];
-
 const outputPath = (outputRoot, latestBuild) =>
   path.resolve(outputRoot, latestBuild ? "frontend_latest" : "frontend_es5");
 

build-scripts/env.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const fs = require("fs");
 const path = require("path");
 const paths = require("./paths.js");

build-scripts/gulp/gather-static.js

@@ -85,6 +85,11 @@ gulp.task("copy-translations-app", async () => {
   copyTranslations(staticDir);
 });
 
+gulp.task("copy-translations-supervisor", async () => {
+  const staticDir = paths.hassio_output_static;
+  copyTranslations(staticDir);
+});
+
 gulp.task("copy-static-app", async () => {
   const staticDir = paths.app_output_static;
   // Basic static files

build-scripts/gulp/hassio.js

@@ -10,6 +10,8 @@ require("./gen-icons-json.js");
 require("./webpack.js");
 require("./compress.js");
 require("./rollup.js");
+require("./gather-static.js");
+require("./translations.js");
 
 gulp.task(
   "develop-hassio",
@@ -20,6 +22,8 @@ gulp.task(
     "clean-hassio",
     "gen-icons-json",
     "gen-index-hassio-dev",
+    "build-supervisor-translations",
+    "copy-translations-supervisor",
     env.useRollup() ? "rollup-watch-hassio" : "webpack-watch-hassio"
   )
 );
@@ -32,6 +36,8 @@ gulp.task(
     },
     "clean-hassio",
     "gen-icons-json",
+    "build-supervisor-translations",
+    "copy-translations-supervisor",
     env.useRollup() ? "rollup-prod-hassio" : "webpack-prod-hassio",
     "gen-index-hassio-prod",
     ...// Don't compress running tests

build-scripts/gulp/translations.js

@@ -266,6 +266,7 @@ gulp.task(taskName, function () {
         TRANSLATION_FRAGMENTS.forEach((fragment) => {
           delete data.ui.panel[fragment];
         });
+        delete data.supervisor;
         return data;
       })
     )
@@ -342,6 +343,62 @@ gulp.task(
   }
 );
 
+gulp.task("build-translation-fragment-supervisor", function () {
+  return gulp
+    .src(fullDir + "/*.json")
+    .pipe(transform((data) => data.supervisor))
+    .pipe(gulp.dest(workDir + "/supervisor"));
+});
+
+gulp.task("build-translation-flatten-supervisor", function () {
+  return gulp
+    .src(workDir + "/supervisor/*.json")
+    .pipe(
+      transform(function (data) {
+        // Polymer.AppLocalizeBehavior requires flattened json
+        return flatten(data);
+      })
+    )
+    .pipe(gulp.dest(outDir));
+});
+
+gulp.task("build-translation-write-metadata", function writeMetadata() {
+  return gulp
+    .src(
+      [
+        path.join(paths.translations_src, "translationMetadata.json"),
+        workDir + "/testMetadata.json",
+        workDir + "/translationFingerprints.json",
+      ],
+      { allowEmpty: true }
+    )
+    .pipe(merge({}))
+    .pipe(
+      transform(function (data) {
+        const newData = {};
+        Object.entries(data).forEach(([key, value]) => {
+          // Filter out translations without native name.
+          if (value.nativeName) {
+            newData[key] = value;
+          } else {
+            console.warn(
+              `Skipping language ${key}. Native name was not translated.`
+            );
+          }
+        });
+        return newData;
+      })
+    )
+    .pipe(
+      transform((data) => ({
+        fragments: TRANSLATION_FRAGMENTS,
+        translations: data,
+      }))
+    )
+    .pipe(rename("translationMetadata.json"))
+    .pipe(gulp.dest(workDir));
+});
+
 gulp.task(
   "build-translations",
   gulp.series(
@@ -353,42 +410,20 @@ gulp.task(
     gulp.parallel(...splitTasks),
     "build-flattened-translations",
     "build-translation-fingerprints",
-    function writeMetadata() {
-      return gulp
-        .src(
-          [
-            path.join(paths.translations_src, "translationMetadata.json"),
-            workDir + "/testMetadata.json",
-            workDir + "/translationFingerprints.json",
-          ],
-          { allowEmpty: true }
-        )
-        .pipe(merge({}))
-        .pipe(
-          transform(function (data) {
-            const newData = {};
-            Object.entries(data).forEach(([key, value]) => {
-              // Filter out translations without native name.
-              if (data[key].nativeName) {
-                newData[key] = data[key];
-              } else {
-                console.warn(
-                  `Skipping language ${key}. Native name was not translated.`
-                );
-              }
-              if (data[key]) newData[key] = value;
-            });
-            return newData;
-          })
-        )
-        .pipe(
-          transform((data) => ({
-            fragments: TRANSLATION_FRAGMENTS,
-            translations: data,
-          }))
-        )
-        .pipe(rename("translationMetadata.json"))
-        .pipe(gulp.dest(workDir));
-    }
+    "build-translation-write-metadata"
+  )
+);
+
+gulp.task(
+  "build-supervisor-translations",
+  gulp.series(
+    "clean-translations",
+    "ensure-translations-build-dir",
+    "build-master-translation",
+    "build-merged-translations",
+    "build-translation-fragment-supervisor",
+    "build-translation-flatten-supervisor",
+    "build-translation-fingerprints",
+    "build-translation-write-metadata"
   )
 );

build-scripts/gulp/webpack.js

@@ -137,7 +137,12 @@ gulp.task("webpack-watch-hassio", () => {
       isProdBuild: false,
       latestBuild: true,
     })
-  ).watch({}, doneHandler());
+  ).watch({ ignored: /build-translations/ }, doneHandler());
+
+  gulp.watch(
+    path.join(paths.translations_src, "en.json"),
+    gulp.series("build-supervisor-translations", "copy-translations-supervisor")
+  );
 });
 
 gulp.task("webpack-prod-hassio", () =>

build-scripts/paths.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
 
 module.exports = {
@@ -34,6 +35,7 @@ module.exports = {
 
   hassio_dir: path.resolve(__dirname, "../hassio"),
   hassio_output_root: path.resolve(__dirname, "../hassio/build"),
+  hassio_output_static: path.resolve(__dirname, "../hassio/build/static"),
   hassio_output_latest: path.resolve(
     __dirname,
     "../hassio/build/frontend_latest"

build-scripts/rollup.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
 
 const commonjs = require("@rollup/plugin-commonjs");
@@ -32,88 +33,77 @@ const createRollupConfig = ({
   publicPath,
   dontHash,
   isWDS,
-}) => {
-  return {
-    /**
-     * @type { import("rollup").InputOptions }
-     */
-    inputOptions: {
-      input: entry,
-      // Some entry points contain no JavaScript. This setting silences a warning about that.
-      // https://rollupjs.org/guide/en/#preserveentrysignatures
-      preserveEntrySignatures: false,
-      plugins: [
-        ignore({
-          files: bundle.emptyPackages({ latestBuild }),
+}) => ({
+  /**
+   * @type { import("rollup").InputOptions }
+   */
+  inputOptions: {
+    input: entry,
+    // Some entry points contain no JavaScript. This setting silences a warning about that.
+    // https://rollupjs.org/guide/en/#preserveentrysignatures
+    preserveEntrySignatures: false,
+    plugins: [
+      ignore({
+        files: bundle.emptyPackages({ latestBuild }),
+      }),
+      resolve({
+        extensions,
+        preferBuiltins: false,
+        browser: true,
+        rootDir: paths.polymer_dir,
+      }),
+      commonjs(),
+      json(),
+      babel({
+        ...bundle.babelOptions({ latestBuild }),
+        extensions,
+        babelHelpers: isWDS ? "inline" : "bundled",
+      }),
+      string({
+        // Import certain extensions as strings
+        include: [path.join(paths.polymer_dir, "node_modules/**/*.css")],
+      }),
+      replace(bundle.definedVars({ isProdBuild, latestBuild, defineOverlay })),
+      !isWDS &&
+        manifest({
+          publicPath,
         }),
-        resolve({
-          extensions,
-          preferBuiltins: false,
-          browser: true,
-          rootDir: paths.polymer_dir,
+      !isWDS && worker(),
+      !isWDS && dontHashPlugin({ dontHash }),
+      !isWDS && isProdBuild && terser(bundle.terserOptions(latestBuild)),
+      !isWDS &&
+        isStatsBuild &&
+        visualizer({
+          // https://github.com/btd/rollup-plugin-visualizer#options
+          open: true,
+          sourcemap: true,
         }),
-        commonjs({
-          namedExports: {
-            "js-yaml": ["safeDump", "safeLoad"],
-          },
-        }),
-        json(),
-        babel({
-          ...bundle.babelOptions({ latestBuild }),
-          extensions,
-          exclude: bundle.babelExclude(),
-          babelHelpers: isWDS ? "inline" : "bundled",
-        }),
-        string({
-          // Import certain extensions as strings
-          include: [path.join(paths.polymer_dir, "node_modules/**/*.css")],
-        }),
-        replace(
-          bundle.definedVars({ isProdBuild, latestBuild, defineOverlay })
-        ),
-        !isWDS &&
-          manifest({
-            publicPath,
-          }),
-        !isWDS && worker(),
-        !isWDS && dontHashPlugin({ dontHash }),
-        !isWDS && isProdBuild && terser(bundle.terserOptions(latestBuild)),
-        !isWDS &&
-          isStatsBuild &&
-          visualizer({
-            // https://github.com/btd/rollup-plugin-visualizer#options
-            open: true,
-            sourcemap: true,
-          }),
-      ].filter(Boolean),
-    },
-    /**
-     * @type { import("rollup").OutputOptions }
-     */
-    outputOptions: {
-      // https://rollupjs.org/guide/en/#outputdir
-      dir: outputPath,
-      // https://rollupjs.org/guide/en/#outputformat
-      format: latestBuild ? "es" : "systemjs",
-      // https://rollupjs.org/guide/en/#outputexternallivebindings
-      externalLiveBindings: false,
-      // https://rollupjs.org/guide/en/#outputentryfilenames
-      // https://rollupjs.org/guide/en/#outputchunkfilenames
-      // https://rollupjs.org/guide/en/#outputassetfilenames
-      entryFileNames:
-        isProdBuild && !isStatsBuild ? "[name]-[hash].js" : "[name].js",
-      chunkFileNames:
-        isProdBuild && !isStatsBuild ? "c.[hash].js" : "[name].js",
-      assetFileNames:
-        isProdBuild && !isStatsBuild ? "a.[hash].js" : "[name].js",
-      // https://rollupjs.org/guide/en/#outputsourcemap
-      sourcemap: isProdBuild ? true : "inline",
-    },
-  };
-};
+    ].filter(Boolean),
+  },
+  /**
+   * @type { import("rollup").OutputOptions }
+   */
+  outputOptions: {
+    // https://rollupjs.org/guide/en/#outputdir
+    dir: outputPath,
+    // https://rollupjs.org/guide/en/#outputformat
+    format: latestBuild ? "es" : "systemjs",
+    // https://rollupjs.org/guide/en/#outputexternallivebindings
+    externalLiveBindings: false,
+    // https://rollupjs.org/guide/en/#outputentryfilenames
+    // https://rollupjs.org/guide/en/#outputchunkfilenames
+    // https://rollupjs.org/guide/en/#outputassetfilenames
+    entryFileNames:
+      isProdBuild && !isStatsBuild ? "[name]-[hash].js" : "[name].js",
+    chunkFileNames: isProdBuild && !isStatsBuild ? "c.[hash].js" : "[name].js",
+    assetFileNames: isProdBuild && !isStatsBuild ? "a.[hash].js" : "[name].js",
+    // https://rollupjs.org/guide/en/#outputsourcemap
+    sourcemap: isProdBuild ? true : "inline",
+  },
+});
 
-const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild, isWDS }) => {
-  return createRollupConfig(
+const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild, isWDS }) =>
+  createRollupConfig(
     bundle.config.app({
       isProdBuild,
       latestBuild,
@@ -121,31 +111,24 @@ const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild, isWDS }) => {
       isWDS,
     })
   );
-};
 
-const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
-  return createRollupConfig(
+const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
+  createRollupConfig(
     bundle.config.demo({
       isProdBuild,
       latestBuild,
       isStatsBuild,
     })
   );
-};
 
-const createCastConfig = ({ isProdBuild, latestBuild }) => {
-  return createRollupConfig(bundle.config.cast({ isProdBuild, latestBuild }));
-};
+const createCastConfig = ({ isProdBuild, latestBuild }) =>
+  createRollupConfig(bundle.config.cast({ isProdBuild, latestBuild }));
 
-const createHassioConfig = ({ isProdBuild, latestBuild }) => {
-  return createRollupConfig(bundle.config.hassio({ isProdBuild, latestBuild }));
-};
+const createHassioConfig = ({ isProdBuild, latestBuild }) =>
+  createRollupConfig(bundle.config.hassio({ isProdBuild, latestBuild }));
 
-const createGalleryConfig = ({ isProdBuild, latestBuild }) => {
-  return createRollupConfig(
-    bundle.config.gallery({ isProdBuild, latestBuild })
-  );
-};
+const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
+  createRollupConfig(bundle.config.gallery({ isProdBuild, latestBuild }));
 
 module.exports = {
   createAppConfig,

build-scripts/util.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
 const fs = require("fs");
 

build-scripts/webpack.js

@@ -1,9 +1,10 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const webpack = require("webpack");
 const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
-const ManifestPlugin = require("webpack-manifest-plugin");
+const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
 const paths = require("./paths.js");
-const bundle = require("./bundle");
+const bundle = require("./bundle.js");
 const log = require("fancy-log");
 
 class LogStartCompilePlugin {
@@ -46,7 +47,6 @@ const createWebpackConfig = ({
       rules: [
         {
           test: /\.m?js$|\.ts$/,
-          exclude: bundle.babelExclude(),
           use: {
             loader: "babel-loader",
             options: bundle.babelOptions({ latestBuild }),
@@ -68,7 +68,7 @@ const createWebpackConfig = ({
       ],
     },
     plugins: [
-      new ManifestPlugin({
+      new WebpackManifestPlugin({
         // Only include the JS of entrypoints
         filter: (file) => file.isInitial && !file.name.endsWith(".map"),
       }),
@@ -94,6 +94,7 @@ const createWebpackConfig = ({
               ? path.resolve(context, resource)
               : require.resolve(resource);
           } catch (err) {
+            // eslint-disable-next-line no-console
             console.error(
               "Error in Home Assistant ignore plugin",
               resource,
@@ -114,8 +115,9 @@ const createWebpackConfig = ({
       // We need to change the import of the polyfill for EventTarget, so we replace the polyfill file with our customized one
       new webpack.NormalModuleReplacementPlugin(
         new RegExp(
-          require.resolve(
-            "lit-virtualizer/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js"
+          path.resolve(
+            paths.polymer_dir,
+            "src/resources/lit-virtualizer/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js"
           )
         ),
         path.resolve(paths.polymer_dir, "src/resources/EventTarget-ponyfill.js")
@@ -124,6 +126,11 @@ const createWebpackConfig = ({
     ].filter(Boolean),
     resolve: {
       extensions: [".ts", ".js", ".json"],
+      alias: {
+        "lit/decorators$": "lit/decorators.js",
+        "lit/directive$": "lit/directive.js",
+        "lit/polyfill-support$": "lit/polyfill-support.js",
+      },
     },
     output: {
       filename: ({ chunk }) => {
@@ -144,33 +151,24 @@ const createWebpackConfig = ({
   };
 };
 
-const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
-  return createWebpackConfig(
+const createAppConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
+  createWebpackConfig(
     bundle.config.app({ isProdBuild, latestBuild, isStatsBuild })
   );
-};
 
-const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) => {
-  return createWebpackConfig(
+const createDemoConfig = ({ isProdBuild, latestBuild, isStatsBuild }) =>
+  createWebpackConfig(
     bundle.config.demo({ isProdBuild, latestBuild, isStatsBuild })
   );
-};
 
-const createCastConfig = ({ isProdBuild, latestBuild }) => {
-  return createWebpackConfig(bundle.config.cast({ isProdBuild, latestBuild }));
-};
+const createCastConfig = ({ isProdBuild, latestBuild }) =>
+  createWebpackConfig(bundle.config.cast({ isProdBuild, latestBuild }));
 
-const createHassioConfig = ({ isProdBuild, latestBuild }) => {
-  return createWebpackConfig(
-    bundle.config.hassio({ isProdBuild, latestBuild })
-  );
-};
+const createHassioConfig = ({ isProdBuild, latestBuild }) =>
+  createWebpackConfig(bundle.config.hassio({ isProdBuild, latestBuild }));
 
-const createGalleryConfig = ({ isProdBuild, latestBuild }) => {
-  return createWebpackConfig(
-    bundle.config.gallery({ isProdBuild, latestBuild })
-  );
-};
+const createGalleryConfig = ({ isProdBuild, latestBuild }) =>
+  createWebpackConfig(bundle.config.gallery({ isProdBuild, latestBuild }));
 
 module.exports = {
   createAppConfig,

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

@@ -1,16 +1,9 @@
+import "@material/mwc-button/mwc-button";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-listbox/paper-listbox";
 import { Auth, Connection } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  internalProperty,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { CastManager } from "../../../../src/cast/cast_manager";
 import {
   castSendShowLovelaceView,
@@ -32,7 +25,6 @@ import {
 import "../../../../src/layouts/hass-loading-screen";
 import { generateDefaultViewConfig } from "../../../../src/panels/lovelace/common/generate-lovelace-config";
 import "./hc-layout";
-import "@material/mwc-button/mwc-button";
 
 @customElement("hc-cast")
 class HcCast extends LitElement {
@@ -42,21 +34,19 @@ class HcCast extends LitElement {
 
   @property() public castManager!: CastManager;
 
-  @internalProperty() private askWrite = false;
+  @state() private askWrite = false;
 
-  @internalProperty() private lovelaceConfig?: LovelaceConfig | null;
+  @state() private lovelaceConfig?: LovelaceConfig | null;
 
   protected render(): TemplateResult {
     if (this.lovelaceConfig === undefined) {
-      return html` <hass-loading-screen no-toolbar></hass-loading-screen>> `;
+      return html`<hass-loading-screen no-toolbar></hass-loading-screen>`;
     }
 
     const error =
       this.castManager.castState === "NO_DEVICES_AVAILABLE"
         ? html`
-            <p>
-              There were no suitable Chromecast devices to cast to found.
-            </p>
+            <p>There were no suitable Chromecast devices to cast to found.</p>
           `
         : undefined;
 
@@ -206,7 +196,7 @@ class HcCast extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .center-item {
         display: flex;

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

@@ -11,15 +11,8 @@ import {
   getAuth,
   getAuthOptions,
 } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  TemplateResult,
-  internalProperty,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators";
 import { CastManager, getCastManager } from "../../../../src/cast/cast_manager";
 import { castSendShowDemo } from "../../../../src/cast/receiver_messages";
 import {
@@ -60,19 +53,19 @@ const INTRO = html`
 
 @customElement("hc-connect")
 export class HcConnect extends LitElement {
-  @internalProperty() private loading = false;
+  @state() private loading = false;
 
   // If we had stored credentials but we cannot connect,
   // show a screen asking retry or logout.
-  @internalProperty() private cannotConnect = false;
+  @state() private cannotConnect = false;
 
-  @internalProperty() private error?: string | TemplateResult;
+  @state() private error?: string | TemplateResult;
 
-  @internalProperty() private auth?: Auth;
+  @state() private auth?: Auth;
 
-  @internalProperty() private connection?: Connection;
+  @state() private connection?: Connection;
 
-  @internalProperty() private castManager?: CastManager | null;
+  @state() private castManager?: CastManager | null;
 
   private openDemo = false;
 
@@ -86,9 +79,7 @@ export class HcConnect extends LitElement {
           </div>
           <div class="card-actions">
             <a href="/">
-              <mwc-button>
-                Retry
-              </mwc-button>
+              <mwc-button> Retry </mwc-button>
             </a>
             <div class="spacer"></div>
             <mwc-button @click=${this._handleLogout}>Log out</mwc-button>
@@ -299,7 +290,7 @@ export class HcConnect extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .card-content a {
         color: var(--primary-color);

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

@@ -4,15 +4,8 @@ import {
   getUser,
   HassUser,
 } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-card";
 
 @customElement("hc-layout")
@@ -69,7 +62,7 @@ class HcLayout extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: flex;
@@ -98,8 +91,12 @@ class HcLayout extends LitElement {
         line-height: 32px;
         padding: 24px 16px 16px;
         display: block;
+        margin: 0;
       }
 
+      .hero {
+        border-radius: 4px 4px 0 0;
+      }
       .subtitle {
         font-size: 14px;
         color: var(--secondary-text-color);

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

@@ -1,10 +1,5 @@
-import {
-  customElement,
-  html,
-  internalProperty,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { html, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { mockHistory } from "../../../../demo/src/stubs/history";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
 import {
@@ -21,7 +16,7 @@ import "./hc-lovelace";
 class HcDemo extends HassElement {
   @property({ attribute: false }) public lovelacePath!: string;
 
-  @internalProperty() private _lovelaceConfig?: LovelaceConfig;
+  @state() private _lovelaceConfig?: LovelaceConfig;
 
   protected render(): TemplateResult {
     if (!this._lovelaceConfig) {
@@ -38,10 +33,10 @@ class HcDemo extends HassElement {
 
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
-    this._initialize();
+    this._initializeHass();
   }
 
-  private async _initialize() {
+  private async _initializeHass() {
     const initial: Partial<MockHomeAssistant> = {
       // Override updateHass so that the correct hass lifecycle methods are called
       updateHass: (hassUpdate: Partial<HomeAssistant>) =>

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

@@ -1,12 +1,5 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { HomeAssistant } from "../../../../src/types";
 
 @customElement("hc-launch-screen")
@@ -29,7 +22,7 @@ class HcLaunchScreen extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;

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

@@ -1,12 +1,5 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
 import { Lovelace } from "../../../../src/panels/lovelace/types";
 import "../../../../src/panels/lovelace/views/hui-view";
@@ -35,11 +28,12 @@ class HcLovelace extends LitElement {
     }
     const lovelace: Lovelace = {
       config: this.lovelaceConfig,
+      rawConfig: this.lovelaceConfig,
       editMode: false,
       urlPath: this.urlPath!,
       enableFullEditMode: () => undefined,
       mode: "storage",
-      language: "en",
+      locale: this.hass.locale,
       saveConfig: async () => undefined,
       deleteConfig: async () => undefined,
       setEditMode: () => undefined,
@@ -90,10 +84,11 @@ class HcLovelace extends LitElement {
     return undefined;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         min-height: 100vh;
+        height: 0;
         display: flex;
         flex-direction: column;
         box-sizing: border-box;

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

@@ -3,12 +3,8 @@ import {
   getAuth,
   UnsubscribeFunc,
 } from "home-assistant-js-websocket";
-import {
-  customElement,
-  html,
-  internalProperty,
-  TemplateResult,
-} from "lit-element";
+import { html, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators";
 import { CAST_NS } from "../../../../src/cast/const";
 import {
   ConnectMessage,
@@ -36,13 +32,13 @@ let resourcesLoaded = false;
 
 @customElement("hc-main")
 export class HcMain extends HassElement {
-  @internalProperty() private _showDemo = false;
+  @state() private _showDemo = false;
 
-  @internalProperty() private _lovelaceConfig?: LovelaceConfig;
+  @state() private _lovelaceConfig?: LovelaceConfig;
 
-  @internalProperty() private _lovelacePath: string | number | null = null;
+  @state() private _lovelacePath: string | number | null = null;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
   private _unsubLovelace?: UnsubscribeFunc;
 
@@ -221,11 +217,17 @@ export class HcMain extends HassElement {
   }
 
   private async _generateLovelaceConfig() {
-    const { generateLovelaceConfigFromHass } = await import(
-      "../../../../src/panels/lovelace/common/generate-lovelace-config"
+    const { generateLovelaceDashboardStrategy } = await import(
+      "../../../../src/panels/lovelace/strategies/get-strategy"
     );
     this._handleNewLovelaceConfig(
-      await generateLovelaceConfigFromHass(this.hass!)
+      await generateLovelaceDashboardStrategy(
+        {
+          hass: this.hass!,
+          narrow: false,
+        },
+        "original-states"
+      )
     );
   }
 

demo/src/configs/arsaboo/entities.ts

@@ -246,11 +246,15 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
 
     "light.living_room_lights": {
       entity_id: "light.living_room_lights",
-      state: "off",
+      state: "on",
       attributes: {
         min_mireds: 111,
         max_mireds: 400,
+        brightness: 175,
+        color_temp: 300,
+        supported_color_modes: ["brightness", "color_temp"],
         friendly_name: "Living Room Lights",
+        color_mode: "color_temp",
         supported_features: 55,
       },
     },
@@ -263,13 +267,27 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
     },
     "light.kitchen_lights": {
       entity_id: "light.kitchen_lights",
+      state: "on",
+      attributes: {
+        min_mireds: 111,
+        max_mireds: 400,
+        brightness: 200,
+        rgb_color: [255, 175, 96],
+        supported_color_modes: ["brightness", "color_temp", "rgb"],
+        color_mode: "rgb",
+        friendly_name: "Kitchen Lights",
+        supported_features: 55,
+      },
+    },
+    "light.lifx5": {
+      entity_id: "light.lifx5",
       state: "off",
       attributes: {
-        friendly_name: "Kitchen Lights",
+        supported_color_modes: ["brightness"],
+        friendly_name: "Garage Lights",
         supported_features: 1,
       },
     },
-
     "sensor.plexspy": {
       entity_id: "sensor.plexspy",
       state: "0",
@@ -482,16 +500,6 @@ export const demoEntitiesArsaboo: DemoConfig["entities"] = (localize) =>
         icon: "hademo:history",
       },
     },
-    "light.lifx5": {
-      entity_id: "light.lifx5",
-      state: "on",
-      attributes: {
-        min_mireds: 111,
-        max_mireds: 400,
-        friendly_name: "Garage Lights",
-        supported_features: 55,
-      },
-    },
     "sensor.alok_to_home": {
       entity_id: "sensor.alok_to_home",
       state: "41",

demo/src/configs/teachingbirds/entities.ts

@@ -1114,6 +1114,9 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         min_mireds: 153,
         max_mireds: 500,
         brightness: 63,
+        color_temp: 200,
+        supported_color_modes: ["brightness", "color_temp", "rgb"],
+        color_mode: "color_temp",
         friendly_name: "Upstairs lights",
         supported_features: 63,
         custom_ui_state_card: "state-card-custom-ui",
@@ -1125,6 +1128,7 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
       attributes: {
         friendly_name: "Walk in closet lights",
         supported_features: 41,
+        supported_color_modes: ["brightness", "color_temp"],
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:wall-sconce",
       },
@@ -1136,6 +1140,8 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         brightness: 254,
         friendly_name: "Outdoor lights",
         supported_features: 41,
+        supported_color_modes: ["brightness"],
+        color_mode: "brightness",
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:wall-sconce",
       },
@@ -1148,6 +1154,8 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         max_mireds: 500,
         brightness: 128,
         color_temp: 366,
+        supported_color_modes: ["brightness", "color_temp", "rgb"],
+        color_mode: "color_temp",
         effect_list: ["colorloop"],
         friendly_name: "Downstairs lights",
         supported_features: 63,
@@ -1307,6 +1315,7 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
       attributes: {
         min_mireds: 153,
         max_mireds: 500,
+        supported_color_modes: ["brightness", "color_temp"],
         is_deconz_group: false,
         friendly_name: "Bedside Lamp",
         supported_features: 63,
@@ -1320,6 +1329,7 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
       attributes: {
         min_mireds: 153,
         max_mireds: 500,
+        supported_color_modes: ["brightness", "color_temp"],
         is_deconz_group: false,
         friendly_name: "Floorlamp Reading Light",
         supported_features: 43,
@@ -1335,6 +1345,8 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         max_mireds: 500,
         brightness: 128,
         color_temp: 366,
+        supported_color_modes: ["brightness", "color_temp", "rgb"],
+        color_mode: "color_temp",
         effect_list: ["colorloop"],
         is_deconz_group: false,
         friendly_name: "Hallway window light",
@@ -1349,6 +1361,7 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
       attributes: {
         brightness: 77,
         is_deconz_group: false,
+        supported_color_modes: ["brightness"],
         friendly_name: "Isa Ceiling Light",
         supported_features: 41,
         custom_ui_state_card: "state-card-custom-ui",
@@ -1363,6 +1376,8 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         max_mireds: 500,
         brightness: 150,
         color_temp: 366,
+        supported_color_modes: ["brightness", "color_temp"],
+        color_mode: "color_temp",
         effect_list: ["colorloop"],
         is_deconz_group: false,
         friendly_name: "Floorlamp",
@@ -1377,6 +1392,7 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
       attributes: {
         friendly_name: "Bedroom Ceiling Light",
         supported_features: 41,
+        supported_color_modes: ["brightness"],
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:ceiling-light",
       },
@@ -1387,6 +1403,7 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
       attributes: {
         friendly_name: "Nightlight",
         supported_features: 17,
+        supported_color_modes: ["brightness"],
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:lamp",
       },
@@ -1753,6 +1770,7 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         power_consumption: 2.2,
         friendly_name: "Upstairs Hallway Light",
         supported_features: 33,
+        supported_color_modes: ["brightness"],
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:ceiling-light",
       },
@@ -1768,6 +1786,7 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         power_consumption: 0,
         friendly_name: "Dining Room Light",
         supported_features: 33,
+        supported_color_modes: ["brightness"],
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:ceiling-light",
       },
@@ -1783,6 +1802,7 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         power_consumption: 0,
         friendly_name: "Living room Spotlights",
         supported_features: 33,
+        supported_color_modes: ["brightness"],
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:track-light",
       },
@@ -1799,6 +1819,7 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         power_consumption: 2.5,
         friendly_name: "Passage Lights",
         supported_features: 33,
+        supported_color_modes: ["brightness"],
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:track-light",
       },
@@ -1843,6 +1864,7 @@ export const demoEntitiesTeachingbirds: DemoConfig["entities"] = () =>
         power_consumption: 37.4,
         friendly_name: "Kitchen Lights",
         supported_features: 33,
+        supported_color_modes: ["brightness"],
         custom_ui_state_card: "state-card-custom-ui",
         icon: "mdi:track-light",
       },

demo/src/configs/teachingbirds/lovelace.ts

@@ -440,57 +440,43 @@ export const demoLovelaceTeachingbirds: DemoConfig["lovelace"] = () => ({
           type: "horizontal-stack",
         },
         {
+          type: "grid",
+          columns: 2,
           cards: [
             {
-              cards: [
-                {
-                  graph: "line",
-                  type: "sensor",
-                  entity: "sensor.temperature_bedroom",
-                },
-                {
-                  graph: "line",
-                  type: "sensor",
-                  name: "S's room",
-                  entity: "sensor.temperature_stefan",
-                },
-              ],
-              type: "horizontal-stack",
+              graph: "line",
+              type: "sensor",
+              entity: "sensor.temperature_bedroom",
             },
             {
-              cards: [
-                {
-                  graph: "line",
-                  type: "sensor",
-                  entity: "sensor.temperature_passage",
-                },
-                {
-                  graph: "line",
-                  type: "sensor",
-                  name: "Bathroom",
-                  entity: "sensor.temperature_downstairs_bathroom",
-                },
-              ],
-              type: "horizontal-stack",
+              graph: "line",
+              type: "sensor",
+              name: "S's room",
+              entity: "sensor.temperature_stefan",
             },
             {
-              cards: [
-                {
-                  graph: "line",
-                  type: "sensor",
-                  entity: "sensor.temperature_storage",
-                },
-                {
-                  graph: "line",
-                  type: "sensor",
-                  name: "Refrigerator",
-                  entity: "sensor.refrigerator",
-                },
-              ],
-              type: "horizontal-stack",
+              graph: "line",
+              type: "sensor",
+              entity: "sensor.temperature_passage",
+            },
+            {
+              graph: "line",
+              type: "sensor",
+              name: "Bathroom",
+              entity: "sensor.temperature_downstairs_bathroom",
+            },
+            {
+              graph: "line",
+              type: "sensor",
+              entity: "sensor.temperature_storage",
+            },
+            {
+              graph: "line",
+              type: "sensor",
+              name: "Refrigerator",
+              entity: "sensor.refrigerator",
             },
           ],
-          type: "vertical-stack",
         },
         {
           entities: [

demo/src/custom-cards/card-modder.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import { LitElement } from "lit-element";
+import { LitElement } from "lit";
 import "./card-tools";
 
 class CardModder extends LitElement {

demo/src/custom-cards/card-tools.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import { html, LitElement } from "lit-element";
+import { html, LitElement } from "lit";
 
 if (!window.cardTools) {
   const version = 0.2;

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

@@ -1,12 +1,5 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators";
 import { CastManager } from "../../../src/cast/cast_manager";
 import { castSendShowDemo } from "../../../src/cast/receiver_messages";
 import "../../../src/components/ha-icon";
@@ -20,7 +13,7 @@ import { HomeAssistant } from "../../../src/types";
 class CastDemoRow extends LitElement implements LovelaceRow {
   public hass!: HomeAssistant;
 
-  @internalProperty() private _castManager?: CastManager | null;
+  @state() private _castManager?: CastManager | null;
 
   public setConfig(_config: CastConfig): void {
     // No config possible.
@@ -73,7 +66,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
     this.style.display = this._castManager ? "" : "none";
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: flex;

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

@@ -1,14 +1,7 @@
 import "@material/mwc-button";
-import {
-  css,
-  CSSResult,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { until } from "lit-html/directives/until";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { property, state } from "lit/decorators";
+import { until } from "lit/directives/until";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-circular-progress";
 import { LovelaceCardConfig } from "../../../src/data/lovelace";
@@ -26,7 +19,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass!: MockHomeAssistant;
 
-  @internalProperty() private _switching?: boolean;
+  @state() private _switching?: boolean;
 
   private _hidden = localStorage.hide_demo_card;
 
@@ -113,7 +106,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       css`
         a {

demo/src/ha-demo.ts

@@ -22,9 +22,9 @@ import { mockTemplate } from "./stubs/template";
 import { mockTranslations } from "./stubs/translations";
 
 class HaDemo extends HomeAssistantAppEl {
-  protected async _initialize() {
+  protected async _initializeHass() {
     const initial: Partial<MockHomeAssistant> = {
-      panelUrl: (this as any).panelUrl,
+      panelUrl: (this as any)._panelUrl,
       // Override updateHass so that the correct hass lifecycle methods are called
       updateHass: (hassUpdate: Partial<HomeAssistant>) =>
         this._updateHass(hassUpdate),
@@ -70,7 +70,7 @@ class HaDemo extends HomeAssistantAppEl {
         }
 
         e.preventDefault();
-        navigate(this, href);
+        navigate(href);
       },
       { capture: true }
     );

demo/src/stubs/translations.ts

@@ -3,8 +3,6 @@ import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 export const mockTranslations = (hass: MockHomeAssistant) => {
   hass.mockWS(
     "frontend/get_translations",
-    (/* msg: {language: string, category: string} */) => {
-      return { resources: {} };
-    }
+    (/* msg: {language: string, category: string} */) => ({ resources: {} })
   );
 };

gallery/src/components/demo-card.js

@@ -1,7 +1,7 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { safeLoad } from "js-yaml";
+import { load } from "js-yaml";
 import { createCardElement } from "../../../src/panels/lovelace/create-element/create-card-element";
 
 class DemoCard extends PolymerElement {
@@ -15,6 +15,10 @@ class DemoCard extends PolymerElement {
           margin: 0 0 20px;
           color: var(--primary-color);
         }
+        h2 small {
+          font-size: 0.5em;
+          color: var(--primary-text-color);
+        }
         #card {
           max-width: 400px;
           width: 100vw;
@@ -34,7 +38,12 @@ class DemoCard extends PolymerElement {
           }
         }
       </style>
-      <h2>[[config.heading]]</h2>
+      <h2>
+        [[config.heading]]
+        <template is="dom-if" if="[[_size]]">
+          <small>(size [[_size]])</small>
+        </template>
+      </h2>
       <div class="root">
         <div id="card"></div>
         <template is="dom-if" if="[[showConfig]]">
@@ -55,6 +64,9 @@ class DemoCard extends PolymerElement {
         observer: "_configChanged",
       },
       showConfig: Boolean,
+      _size: {
+        type: Number,
+      },
     };
   }
 
@@ -68,8 +80,19 @@ class DemoCard extends PolymerElement {
       card.removeChild(card.lastChild);
     }
 
-    const el = this._createCardElement(safeLoad(config.config)[0]);
+    const el = this._createCardElement(load(config.config)[0]);
     card.appendChild(el);
+    this._getSize(el);
+  }
+
+  async _getSize(el) {
+    await customElements.whenDefined(el.localName);
+
+    if (!("getCardSize" in el)) {
+      this._size = undefined;
+      return;
+    }
+    this._size = await el.getCardSize();
   }
 
   _createCardElement(cardConfig) {

gallery/src/data/traces/basic_trace.ts

@@ -0,0 +1,349 @@
+import { DemoTrace } from "./types";
+
+export const basicTrace: DemoTrace = {
+  trace: {
+    last_step: "action/2",
+    run_id: "0",
+    state: "stopped",
+    timestamp: {
+      start: "2021-03-25T04:36:51.223693+00:00",
+      finish: "2021-03-25T04:36:51.266132+00:00",
+    },
+    trigger: "state of input_boolean.toggle_1",
+    domain: "automation",
+    item_id: "1615419646544",
+    trace: {
+      "trigger/0": [
+        {
+          path: "trigger/0",
+          timestamp: "2021-03-25T04:36:51.223693+00:00",
+        },
+      ],
+      "condition/0": [
+        {
+          path: "condition/0",
+          timestamp: "2021-03-25T04:36:51.228243+00:00",
+          changed_variables: {
+            trigger: {
+              platform: "state",
+              entity_id: "input_boolean.toggle_1",
+              from_state: {
+                entity_id: "input_boolean.toggle_1",
+                state: "on",
+                attributes: {
+                  editable: true,
+                  friendly_name: "Toggle 1",
+                },
+                last_changed: "2021-03-24T19:03:59.141440+00:00",
+                last_updated: "2021-03-24T19:03:59.141440+00:00",
+                context: {
+                  id: "5d0918eb379214d07554bdab6a08bcff",
+                  parent_id: null,
+                  user_id: null,
+                },
+              },
+              to_state: {
+                entity_id: "input_boolean.toggle_1",
+                state: "off",
+                attributes: {
+                  editable: true,
+                  friendly_name: "Toggle 1",
+                },
+                last_changed: "2021-03-25T04:36:51.220696+00:00",
+                last_updated: "2021-03-25T04:36:51.220696+00:00",
+                context: {
+                  id: "664d6d261450a9ecea6738e97269a149",
+                  parent_id: null,
+                  user_id: "d1b4e89da01445fa8bc98e39fac477ca",
+                },
+              },
+              for: null,
+              attribute: null,
+              description: "state of input_boolean.toggle_1",
+            },
+          },
+          result: {
+            result: true,
+          },
+        },
+      ],
+      "action/0": [
+        {
+          path: "action/0",
+          timestamp: "2021-03-25T04:36:51.243018+00:00",
+          changed_variables: {
+            trigger: {
+              platform: "state",
+              entity_id: "input_boolean.toggle_1",
+              from_state: {
+                entity_id: "input_boolean.toggle_1",
+                state: "on",
+                attributes: {
+                  editable: true,
+                  friendly_name: "Toggle 1",
+                },
+                last_changed: "2021-03-24T19:03:59.141440+00:00",
+                last_updated: "2021-03-24T19:03:59.141440+00:00",
+                context: {
+                  id: "5d0918eb379214d07554bdab6a08bcff",
+                  parent_id: null,
+                  user_id: null,
+                },
+              },
+              to_state: {
+                entity_id: "input_boolean.toggle_1",
+                state: "off",
+                attributes: {
+                  editable: true,
+                  friendly_name: "Toggle 1",
+                },
+                last_changed: "2021-03-25T04:36:51.220696+00:00",
+                last_updated: "2021-03-25T04:36:51.220696+00:00",
+                context: {
+                  id: "664d6d261450a9ecea6738e97269a149",
+                  parent_id: null,
+                  user_id: "d1b4e89da01445fa8bc98e39fac477ca",
+                },
+              },
+              for: null,
+              attribute: null,
+              description: "state of input_boolean.toggle_1",
+            },
+            context: {
+              id: "6cfcae368e7b3686fad6c59e83ae76c9",
+              parent_id: "664d6d261450a9ecea6738e97269a149",
+              user_id: null,
+            },
+          },
+          result: {
+            params: {
+              domain: "input_boolean",
+              service: "toggle",
+              service_data: {},
+              target: {
+                entity_id: ["input_boolean.toggle_4"],
+              },
+            },
+            running_script: false,
+            limit: 10,
+          },
+        },
+      ],
+      "action/1": [
+        {
+          path: "action/1",
+          timestamp: "2021-03-25T04:36:51.252406+00:00",
+          result: {
+            choice: 0,
+          },
+        },
+      ],
+      "action/1/choose/0": [
+        {
+          path: "action/1/choose/0",
+          timestamp: "2021-03-25T04:36:51.254569+00:00",
+          result: {
+            result: true,
+          },
+        },
+      ],
+      "action/1/choose/0/conditions/0": [
+        {
+          path: "action/1/choose/0/conditions/0",
+          timestamp: "2021-03-25T04:36:51.254697+00:00",
+          result: {
+            result: true,
+          },
+        },
+      ],
+      "action/1/choose/0/sequence/0": [
+        {
+          path: "action/1/choose/0/sequence/0",
+          timestamp: "2021-03-25T04:36:51.257360+00:00",
+          result: {
+            params: {
+              domain: "input_boolean",
+              service: "toggle",
+              service_data: {},
+              target: {
+                entity_id: ["input_boolean.toggle_2"],
+              },
+            },
+            running_script: false,
+            limit: 10,
+          },
+        },
+      ],
+      "action/1/choose/0/sequence/1": [
+        {
+          path: "action/1/choose/0/sequence/1",
+          timestamp: "2021-03-25T04:36:51.260658+00:00",
+          result: {
+            params: {
+              domain: "input_boolean",
+              service: "toggle",
+              service_data: {},
+              target: {
+                entity_id: ["input_boolean.toggle_3"],
+              },
+            },
+            running_script: false,
+            limit: 10,
+          },
+        },
+      ],
+      "action/2": [
+        {
+          path: "action/2",
+          timestamp: "2021-03-25T04:36:51.264159+00:00",
+          result: {
+            params: {
+              domain: "input_boolean",
+              service: "toggle",
+              service_data: {},
+              target: {
+                entity_id: ["input_boolean.toggle_4"],
+              },
+            },
+            running_script: false,
+            limit: 10,
+          },
+        },
+      ],
+    },
+
+    config: {
+      id: "1615419646544",
+      alias: "Ensure Party mode",
+      description: "",
+      trigger: [
+        {
+          platform: "state",
+          entity_id: "input_boolean.toggle_1",
+        },
+      ],
+      condition: [
+        {
+          condition: "template",
+          alias: "Test if Paulus is home",
+          value_template: "{{ true }}",
+        },
+      ],
+      action: [
+        {
+          service: "input_boolean.toggle",
+          target: {
+            entity_id: "input_boolean.toggle_4",
+          },
+        },
+        {
+          choose: [
+            {
+              alias: "If toggle 3 is on",
+              conditions: [
+                {
+                  condition: "template",
+                  value_template:
+                    "{{ is_state('input_boolean.toggle_3', 'on') }}",
+                },
+              ],
+              sequence: [
+                {
+                  service: "input_boolean.toggle",
+                  alias: "Toggle 2 while 3 is on",
+                  target: {
+                    entity_id: "input_boolean.toggle_2",
+                  },
+                },
+                {
+                  service: "input_boolean.toggle",
+                  alias: "Toggle 3",
+                  target: {
+                    entity_id: "input_boolean.toggle_3",
+                  },
+                },
+              ],
+            },
+          ],
+          default: [
+            {
+              service: "input_boolean.toggle",
+              alias: "Toggle 2",
+              target: {
+                entity_id: "input_boolean.toggle_2",
+              },
+            },
+          ],
+        },
+        {
+          service: "input_boolean.toggle",
+          target: {
+            entity_id: "input_boolean.toggle_4",
+          },
+        },
+      ],
+      mode: "single",
+    },
+    context: {
+      id: "6cfcae368e7b3686fad6c59e83ae76c9",
+      parent_id: "664d6d261450a9ecea6738e97269a149",
+      user_id: null,
+    },
+    script_execution: "finished",
+  },
+  logbookEntries: [
+    {
+      name: "Ensure Party mode",
+      message: "has been triggered by state of input_boolean.toggle_1",
+      source: "state of input_boolean.toggle_1",
+      entity_id: "automation.toggle_toggles",
+      context_id: "6cfcae368e7b3686fad6c59e83ae76c9",
+      when: "2021-03-25T04:36:51.240832+00:00",
+      domain: "automation",
+    },
+    {
+      when: "2021-03-25T04:36:51.249828+00:00",
+      name: "Toggle 4",
+      state: "on",
+      entity_id: "input_boolean.toggle_4",
+      context_entity_id: "automation.toggle_toggles",
+      context_entity_id_name: "Ensure Party mode",
+      context_event_type: "automation_triggered",
+      context_domain: "automation",
+      context_name: "Ensure Party mode",
+    },
+    {
+      when: "2021-03-25T04:36:51.258947+00:00",
+      name: "Toggle 2",
+      state: "on",
+      entity_id: "input_boolean.toggle_2",
+      context_entity_id: "automation.toggle_toggles",
+      context_entity_id_name: "Ensure Party mode",
+      context_event_type: "automation_triggered",
+      context_domain: "automation",
+      context_name: "Ensure Party mode",
+    },
+    {
+      when: "2021-03-25T04:36:51.261806+00:00",
+      name: "Toggle 3",
+      state: "off",
+      entity_id: "input_boolean.toggle_3",
+      context_entity_id: "automation.toggle_toggles",
+      context_entity_id_name: "Ensure Party mode",
+      context_event_type: "automation_triggered",
+      context_domain: "automation",
+      context_name: "Ensure Party mode",
+    },
+    {
+      when: "2021-03-25T04:36:51.265246+00:00",
+      name: "Toggle 4",
+      state: "off",
+      entity_id: "input_boolean.toggle_4",
+      context_entity_id: "automation.toggle_toggles",
+      context_entity_id_name: "Ensure Party mode",
+      context_event_type: "automation_triggered",
+      context_domain: "automation",
+      context_name: "Ensure Party mode",
+    },
+  ],
+};

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

@@ -0,0 +1,44 @@
+import { LogbookEntry } from "../../../../src/data/logbook";
+import { AutomationTraceExtended } from "../../../../src/data/trace";
+import { DemoTrace } from "./types";
+
+export const mockDemoTrace = (
+  tracePartial: Partial<AutomationTraceExtended>,
+  logbookEntries?: LogbookEntry[]
+): DemoTrace => ({
+  trace: {
+    last_step: "",
+    run_id: "0",
+    state: "stopped",
+    timestamp: {
+      start: "2021-03-25T04:36:51.223693+00:00",
+      finish: "2021-03-25T04:36:51.266132+00:00",
+    },
+    trigger: "mocked trigger",
+    domain: "automation",
+    item_id: "1615419646544",
+    trace: {
+      "trigger/0": [
+        {
+          path: "trigger/0",
+          changed_variables: {
+            trigger: {
+              description: "mocked trigger",
+            },
+          },
+          timestamp: "2021-03-25T04:36:51.223693+00:00",
+        },
+      ],
+    },
+    config: {
+      trigger: [],
+      action: [],
+    },
+    context: {
+      id: "abcd",
+    },
+    script_execution: "finished",
+    ...tracePartial,
+  },
+  logbookEntries: logbookEntries || [],
+});

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

@@ -0,0 +1,214 @@
+import { DemoTrace } from "./types";
+
+export const motionLightTrace: DemoTrace = {
+  trace: {
+    last_step: "action/3",
+    run_id: "1",
+    state: "stopped",
+    timestamp: {
+      start: "2021-03-14T06:07:01.768006+00:00",
+      finish: "2021-03-14T06:07:53.287525+00:00",
+    },
+    trigger: "state of binary_sensor.pauluss_macbook_pro_camera_in_use",
+    domain: "automation",
+    item_id: "1614732497392",
+    trace: {
+      "trigger/0": [
+        {
+          path: "trigger/0",
+          timestamp: "2021-03-25T04:36:51.223693+00:00",
+        },
+      ],
+      "action/0": [
+        {
+          path: "action/0",
+          timestamp: "2021-03-14T06:07:01.771038+00:00",
+          changed_variables: {
+            trigger: {
+              platform: "state",
+              entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+              from_state: {
+                entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+                state: "off",
+                attributes: {
+                  friendly_name: "Paulus’s MacBook Pro Camera In Use",
+                  icon: "mdi:camera-off",
+                },
+                last_changed: "2021-03-14T06:06:29.235325+00:00",
+                last_updated: "2021-03-14T06:06:29.235325+00:00",
+                context: {
+                  id: "ad4864c5ce957c38a07b50378eeb245d",
+                  parent_id: null,
+                  user_id: null,
+                },
+              },
+              to_state: {
+                entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+                state: "on",
+                attributes: {
+                  friendly_name: "Paulus’s MacBook Pro Camera In Use",
+                  icon: "mdi:camera",
+                },
+                last_changed: "2021-03-14T06:07:01.762009+00:00",
+                last_updated: "2021-03-14T06:07:01.762009+00:00",
+                context: {
+                  id: "e22ddfd5f11dc4aad9a52fc10dab613b",
+                  parent_id: null,
+                  user_id: null,
+                },
+              },
+              for: null,
+              attribute: null,
+              description:
+                "state of binary_sensor.pauluss_macbook_pro_camera_in_use",
+            },
+            context: {
+              id: "43b6ee9293a551c5cc14e8eb60af54ba",
+              parent_id: "e22ddfd5f11dc4aad9a52fc10dab613b",
+              user_id: null,
+            },
+          },
+        },
+      ],
+      "action/1": [
+        { path: "action/1", timestamp: "2021-03-14T06:07:01.875316+00:00" },
+      ],
+      "action/2": [
+        {
+          path: "action/2",
+          timestamp: "2021-03-14T06:07:53.195013+00:00",
+          changed_variables: {
+            wait: {
+              remaining: null,
+              trigger: {
+                platform: "state",
+                entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+                from_state: {
+                  entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+                  state: "on",
+                  attributes: {
+                    friendly_name: "Paulus’s MacBook Pro Camera In Use",
+                    icon: "mdi:camera",
+                  },
+                  last_changed: "2021-03-14T06:07:01.762009+00:00",
+                  last_updated: "2021-03-14T06:07:01.762009+00:00",
+                  context: {
+                    id: "e22ddfd5f11dc4aad9a52fc10dab613b",
+                    parent_id: null,
+                    user_id: null,
+                  },
+                },
+                to_state: {
+                  entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+                  state: "off",
+                  attributes: {
+                    friendly_name: "Paulus’s MacBook Pro Camera In Use",
+                    icon: "mdi:camera-off",
+                  },
+                  last_changed: "2021-03-14T06:07:53.186755+00:00",
+                  last_updated: "2021-03-14T06:07:53.186755+00:00",
+                  context: {
+                    id: "b2308cc91d509ea8e0c623331ab178d6",
+                    parent_id: null,
+                    user_id: null,
+                  },
+                },
+                for: null,
+                attribute: null,
+                description:
+                  "state of binary_sensor.pauluss_macbook_pro_camera_in_use",
+              },
+            },
+          },
+        },
+      ],
+      "action/3": [
+        {
+          path: "action/3",
+          timestamp: "2021-03-14T06:07:53.196014+00:00",
+        },
+      ],
+    },
+    config: {
+      mode: "restart",
+      max_exceeded: "silent",
+      trigger: [
+        {
+          platform: "state",
+          entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+          from: "off",
+          to: "on",
+        },
+      ],
+      action: [
+        {
+          service: "light.turn_on",
+          target: {
+            entity_id: "light.elgato_key_light_air",
+          },
+        },
+        {
+          wait_for_trigger: [
+            {
+              platform: "state",
+              entity_id: "binary_sensor.pauluss_macbook_pro_camera_in_use",
+              from: "on",
+              to: "off",
+            },
+          ],
+        },
+        {
+          delay: 0,
+        },
+        {
+          service: "light.turn_off",
+          target: {
+            entity_id: "light.elgato_key_light_air",
+          },
+        },
+      ],
+      id: "1614732497392",
+      alias: "Auto Elgato",
+      description: "",
+    },
+    context: {
+      id: "43b6ee9293a551c5cc14e8eb60af54ba",
+      parent_id: "e22ddfd5f11dc4aad9a52fc10dab613b",
+      user_id: null,
+    },
+    script_execution: "finished",
+  },
+  logbookEntries: [
+    {
+      name: "Auto Elgato",
+      message:
+        "has been triggered by state of binary_sensor.pauluss_macbook_pro_camera_in_use",
+      source: "state of binary_sensor.pauluss_macbook_pro_camera_in_use",
+      entity_id: "automation.auto_elgato",
+      when: "2021-03-14T06:07:01.768492+00:00",
+      domain: "automation",
+    },
+    {
+      when: "2021-03-14T06:07:01.872187+00:00",
+      name: "Elgato Key Light Air",
+      state: "on",
+      entity_id: "light.elgato_key_light_air",
+      context_entity_id: "automation.auto_elgato",
+      context_entity_id_name: "Auto Elgato",
+      context_event_type: "automation_triggered",
+      context_domain: "automation",
+      context_name: "Auto Elgato",
+    },
+    {
+      when: "2021-03-14T06:07:53.284505+00:00",
+      name: "Elgato Key Light Air",
+      state: "off",
+      entity_id: "light.elgato_key_light_air",
+      context_entity_id: "automation.auto_elgato",
+      context_entity_id_name: "Auto Elgato",
+      context_event_type: "automation_triggered",
+      context_domain: "automation",
+      context_name: "Auto Elgato",
+    },
+  ],
+};

gallery/src/data/traces/types.ts

@@ -0,0 +1,7 @@
+import { AutomationTraceExtended } from "../../../../src/data/trace";
+import { LogbookEntry } from "../../../../src/data/logbook";
+
+export interface DemoTrace {
+  trace: AutomationTraceExtended;
+  logbookEntries: LogbookEntry[];
+}

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

@@ -0,0 +1,96 @@
+import { dump } from "js-yaml";
+import { html, css, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../src/components/ha-card";
+import { describeAction } from "../../../src/data/script_i18n";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import { HomeAssistant } from "../../../src/types";
+
+const actions = [
+  { wait_template: "{{ true }}", alias: "Something with an alias" },
+  { delay: "0:05" },
+  { wait_template: "{{ true }}" },
+  {
+    condition: "template",
+    value_template: "{{ true }}",
+  },
+  { event: "happy_event" },
+  {
+    device_id: "abcdefgh",
+    domain: "plex",
+    entity_id: "media_player.kitchen",
+  },
+  { scene: "scene.kitchen_morning" },
+  {
+    wait_for_trigger: [
+      {
+        platform: "state",
+        entity_id: "input_boolean.toggle_1",
+      },
+    ],
+  },
+  {
+    variables: {
+      hello: "world",
+    },
+  },
+  {
+    service: "input_boolean.toggle",
+    target: {
+      entity_id: "input_boolean.toggle_4",
+    },
+  },
+];
+
+@customElement("demo-automation-describe-action")
+export class DemoAutomationDescribeAction extends LitElement {
+  @property({ attribute: false }) hass!: HomeAssistant;
+
+  protected render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+    return html`
+      <ha-card header="Actions">
+        ${actions.map(
+          (conf) => html`
+            <div class="action">
+              <span>${describeAction(this.hass, conf as any)}</span>
+              <pre>${dump(conf)}</pre>
+            </div>
+          `
+        )}
+      </ha-card>
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      .action {
+        padding: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      span {
+        margin-right: 16px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-automation-describe-action": DemoAutomationDescribeAction;
+  }
+}

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

@@ -0,0 +1,60 @@
+import { dump } from "js-yaml";
+import { html, css, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
+import "../../../src/components/ha-card";
+import { describeCondition } from "../../../src/data/automation_i18n";
+
+const conditions = [
+  { condition: "and" },
+  { condition: "not" },
+  { condition: "or" },
+  { condition: "state" },
+  { condition: "numeric_state" },
+  { condition: "sun", after: "sunset" },
+  { condition: "sun", after: "sunrise" },
+  { condition: "zone" },
+  { condition: "time" },
+  { condition: "template" },
+];
+
+@customElement("demo-automation-describe-condition")
+export class DemoAutomationDescribeCondition extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      <ha-card header="Conditions">
+        ${conditions.map(
+          (conf) => html`
+            <div class="condition">
+              <span>${describeCondition(conf as any)}</span>
+              <pre>${dump(conf)}</pre>
+            </div>
+          `
+        )}
+      </ha-card>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      .condition {
+        padding: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      span {
+        margin-right: 16px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-automation-describe-condition": DemoAutomationDescribeCondition;
+  }
+}

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

@@ -0,0 +1,63 @@
+import { dump } from "js-yaml";
+import { html, css, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
+import "../../../src/components/ha-card";
+import { describeTrigger } from "../../../src/data/automation_i18n";
+
+const triggers = [
+  { platform: "state" },
+  { platform: "mqtt" },
+  { platform: "geo_location" },
+  { platform: "homeassistant" },
+  { platform: "numeric_state" },
+  { platform: "sun" },
+  { platform: "time_pattern" },
+  { platform: "webhook" },
+  { platform: "zone" },
+  { platform: "tag" },
+  { platform: "time" },
+  { platform: "template" },
+  { platform: "event" },
+];
+
+@customElement("demo-automation-describe-trigger")
+export class DemoAutomationDescribeTrigger extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      <ha-card header="Triggers">
+        ${triggers.map(
+          (conf) => html`
+            <div class="trigger">
+              <span>${describeTrigger(conf as any)}</span>
+              <pre>${dump(conf)}</pre>
+            </div>
+          `
+        )}
+      </ha-card>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      .trigger {
+        padding: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      span {
+        margin-right: 16px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-automation-describe-trigger": DemoAutomationDescribeTrigger;
+  }
+}

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

@@ -0,0 +1,81 @@
+import { html, css, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../src/components/ha-card";
+import "../../../src/components/trace/hat-script-graph";
+import "../../../src/components/trace/hat-trace-timeline";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import { HomeAssistant } from "../../../src/types";
+import { mockDemoTrace } from "../data/traces/mock-demo-trace";
+import { DemoTrace } from "../data/traces/types";
+
+const traces: DemoTrace[] = [
+  mockDemoTrace({ state: "running" }),
+  mockDemoTrace({ state: "debugged" }),
+  mockDemoTrace({ state: "stopped", script_execution: "failed_conditions" }),
+  mockDemoTrace({ state: "stopped", script_execution: "failed_single" }),
+  mockDemoTrace({ state: "stopped", script_execution: "failed_max_runs" }),
+  mockDemoTrace({ state: "stopped", script_execution: "finished" }),
+  mockDemoTrace({ state: "stopped", script_execution: "aborted" }),
+  mockDemoTrace({
+    state: "stopped",
+    script_execution: "error",
+    error: 'Variable "beer" cannot be None',
+  }),
+  mockDemoTrace({ state: "stopped", script_execution: "cancelled" }),
+];
+
+@customElement("demo-automation-trace-timeline")
+export class DemoAutomationTraceTimeline extends LitElement {
+  @property({ attribute: false }) hass?: HomeAssistant;
+
+  protected render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+    return html`
+      ${traces.map(
+        (trace) => html`
+          <ha-card .header=${trace.trace.config.alias}>
+            <div class="card-content">
+              <hat-trace-timeline
+                .hass=${this.hass}
+                .trace=${trace.trace}
+                .logbookEntries=${trace.logbookEntries}
+              ></hat-trace-timeline>
+              <button @click=${() => console.log(trace)}>Log trace</button>
+            </div>
+          </ha-card>
+        `
+      )}
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px;
+      }
+      .card-content {
+        display: flex;
+      }
+      button {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-automation-trace-timeline": DemoAutomationTraceTimeline;
+  }
+}

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

@@ -0,0 +1,91 @@
+import { html, css, LitElement, TemplateResult } from "lit";
+import "../../../src/components/ha-card";
+import "../../../src/components/trace/hat-script-graph";
+import "../../../src/components/trace/hat-trace-timeline";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import { HomeAssistant } from "../../../src/types";
+import { DemoTrace } from "../data/traces/types";
+import { basicTrace } from "../data/traces/basic_trace";
+import { motionLightTrace } from "../data/traces/motion-light-trace";
+import { customElement, property, state } from "lit/decorators";
+
+const traces: DemoTrace[] = [basicTrace, motionLightTrace];
+
+@customElement("demo-automation-trace")
+export class DemoAutomationTrace extends LitElement {
+  @property({ attribute: false }) hass?: HomeAssistant;
+
+  @state() private _selected = {};
+
+  protected render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+    return html`
+      ${traces.map(
+        (trace, idx) => html`
+          <ha-card .header=${trace.trace.config.alias}>
+            <div class="card-content">
+              <hat-script-graph
+                .trace=${trace.trace}
+                .selected=${this._selected[idx]}
+                @graph-node-selected=${(ev) => {
+                  this._selected = { ...this._selected, [idx]: ev.detail.path };
+                }}
+              ></hat-script-graph>
+              <hat-trace-timeline
+                allowPick
+                .hass=${this.hass}
+                .trace=${trace.trace}
+                .logbookEntries=${trace.logbookEntries}
+                .selectedPath=${this._selected[idx]}
+                @value-changed=${(ev) => {
+                  this._selected = {
+                    ...this._selected,
+                    [idx]: ev.detail.value,
+                  };
+                }}
+              ></hat-trace-timeline>
+              <button @click=${() => console.log(trace)}>Log trace</button>
+            </div>
+          </ha-card>
+        `
+      )}
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px;
+      }
+      .card-content {
+        display: flex;
+      }
+      .card-content > * {
+        margin-right: 16px;
+      }
+      .card-content > *:last-child {
+        margin-right: 0;
+      }
+      button {
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-automation-trace": DemoAutomationTrace;
+  }
+}

gallery/src/demos/demo-hui-alarm-panel-card.ts

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -93,4 +87,8 @@ class DemoAlarmPanelEntity extends LitElement {
   }
 }
 
-customElements.define("demo-hui-alarm-panel-card", DemoAlarmPanelEntity);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-alarm-panel-card": DemoAlarmPanelEntity;
+  }
+}

gallery/src/demos/demo-hui-conditional-card.ts

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -75,4 +69,8 @@ class DemoConditional extends LitElement {
   }
 }
 
-customElements.define("demo-hui-conditional-card", DemoConditional);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-conditional-card": DemoConditional;
+  }
+}

gallery/src/demos/demo-hui-entities-card.ts

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -239,4 +233,8 @@ class DemoEntities extends LitElement {
   }
 }
 
-customElements.define("demo-hui-entities-card", DemoEntities);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-entities-card": DemoEntities;
+  }
+}

gallery/src/demos/demo-hui-entity-button-card.ts

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -91,4 +85,8 @@ class DemoButtonEntity extends LitElement {
   }
 }
 
-customElements.define("demo-hui-entity-button-card", DemoButtonEntity);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-entity-button-card": DemoButtonEntity;
+  }
+}

gallery/src/demos/demo-hui-entity-filter-card.ts

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -132,4 +126,8 @@ class DemoEntityFilter extends LitElement {
   }
 }
 
-customElements.define("demo-hui-entity-filter-card", DemoEntityFilter);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-entity-filter-card": DemoEntityFilter;
+  }
+}

gallery/src/demos/demo-hui-gauge-card.ts

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -129,4 +123,8 @@ class DemoGaugeEntity extends LitElement {
   }
 }
 
-customElements.define("demo-hui-gauge-card", DemoGaugeEntity);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-gauge-card": DemoGaugeEntity;
+  }
+}

gallery/src/demos/demo-hui-glance-card.ts

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -186,7 +180,7 @@ const CONFIGS = [
       name:
     - light.kitchen_lights
     - entity: lock.kitchen_door
-      name: 
+      name:
     - light.ceiling_lights
     `,
   },
@@ -194,7 +188,7 @@ const CONFIGS = [
     heading: "Custom tap action",
     config: `
 - type: glance
-  columns: 4  
+  columns: 4
   entities:
     - entity: lock.kitchen_door
       name: Custom
@@ -232,4 +226,8 @@ class DemoGlanceEntity extends LitElement {
   }
 }
 
-customElements.define("demo-hui-glance-card", DemoGlanceEntity);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-glance-card": DemoGlanceEntity;
+  }
+}

gallery/src/demos/demo-hui-grid-and-stack-card.ts

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { mockHistory } from "../../../demo/src/stubs/history";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
@@ -49,6 +43,110 @@ const ENTITIES = [
 ];
 
 const CONFIGS = [
+  {
+    heading: "Default Grid",
+    config: `
+- type: grid
+  cards:
+    - type: entity
+      entity: light.kitchen_lights
+    - type: entity
+      entity: light.bed_light
+    - type: entity
+      entity: device_tracker.demo_paulus
+    - type: sensor
+      entity: sensor.illumination
+      graph: line
+    - type: entity
+      entity: device_tracker.demo_anne_therese
+    `,
+  },
+  {
+    heading: "Non-square Grid with 2 columns",
+    config: `
+- type: grid
+  columns: 2
+  square: false
+  cards:
+    - type: entity
+      entity: light.kitchen_lights
+    - type: entity
+      entity: light.bed_light
+    - type: entity
+      entity: device_tracker.demo_paulus
+    - type: sensor
+      entity: sensor.illumination
+      graph: line
+    `,
+  },
+  {
+    heading: "Default Grid with title",
+    config: `
+- type: grid
+  title: Kitchen
+  cards:
+    - type: entity
+      entity: light.kitchen_lights
+    - type: entity
+      entity: light.bed_light
+    - type: entity
+      entity: device_tracker.demo_paulus
+    - type: sensor
+      entity: sensor.illumination
+      graph: line
+    - type: entity
+      entity: device_tracker.demo_anne_therese
+    `,
+  },
+  {
+    heading: "Columns 4",
+    config: `
+- type: grid
+  columns: 4
+  cards:
+    - type: entity
+      entity: light.kitchen_lights
+    - type: entity
+      entity: light.bed_light
+    - type: entity
+      entity: device_tracker.demo_paulus
+    - type: sensor
+      entity: sensor.illumination
+      graph: line
+    `,
+  },
+  {
+    heading: "Columns 2",
+    config: `
+- type: grid
+  columns: 2
+  cards:
+    - type: entity
+      entity: light.kitchen_lights
+    - type: entity
+      entity: light.bed_light
+    `,
+  },
+  {
+    heading: "Columns 1",
+    config: `
+- type: grid
+  columns: 1
+  cards:
+  - type: entity
+    entity: light.kitchen_lights
+    `,
+  },
+  {
+    heading: "Size for single card",
+    config: `
+- type: grid
+  cards:
+  - type: entity
+    entity: light.kitchen_lights
+    `,
+  },
+
   {
     heading: "Vertical Stack",
     config: `
@@ -99,45 +197,9 @@ const CONFIGS = [
       entity: light.bed_light
     `,
   },
-  {
-    heading: "Default Grid",
-    config: `
-- type: grid
-  cards:
-    - type: entity
-      entity: light.kitchen_lights
-    - type: entity
-      entity: light.bed_light
-    - type: entity
-      entity: device_tracker.demo_paulus
-    - type: sensor
-      entity: sensor.illumination
-      graph: line
-    - type: entity
-      entity: device_tracker.demo_anne_therese
-    `,
-  },
-  {
-    heading: "Non-square Grid with 2 columns",
-    config: `
-- type: grid
-  columns: 2
-  square: false
-  cards:
-    - type: entity
-      entity: light.kitchen_lights
-    - type: entity
-      entity: light.bed_light
-    - type: entity
-      entity: device_tracker.demo_paulus
-    - type: sensor
-      entity: sensor.illumination
-      graph: line
-    `,
-  },
 ];
 
-@customElement("demo-hui-stack-card")
+@customElement("demo-hui-grid-and-stack-card")
 class DemoStack extends LitElement {
   @query("#demos") private _demoRoot!: HTMLElement;
 
@@ -155,4 +217,8 @@ class DemoStack extends LitElement {
   }
 }
 
-customElements.define("demo-hui-stack-card", DemoStack);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-grid-and-stack-card": DemoStack;
+  }
+}

gallery/src/demos/demo-hui-iframe-card.ts

@@ -1,4 +1,5 @@
-import { customElement, html, LitElement, TemplateResult } from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
 import "../components/demo-cards";
 
 const CONFIGS = [
@@ -42,4 +43,8 @@ class DemoIframe extends LitElement {
   }
 }
 
-customElements.define("demo-hui-iframe-card", DemoIframe);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-iframe-card": DemoIframe;
+  }
+}

gallery/src/demos/demo-hui-light-card.ts

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -85,4 +79,8 @@ class DemoLightEntity extends LitElement {
   }
 }
 
-customElements.define("demo-hui-light-card", DemoLightEntity);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-light-card": DemoLightEntity;
+  }
+}

gallery/src/demos/demo-hui-map-card.ts

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -183,4 +177,8 @@ class DemoMap extends LitElement {
   }
 }
 
-customElements.define("demo-hui-map-card", DemoMap);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-map-card": DemoMap;
+  }
+}

gallery/src/demos/demo-hui-markdown-card.ts

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { mockTemplate } from "../../../demo/src/stubs/template";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -276,4 +270,8 @@ class DemoMarkdown extends LitElement {
   }
 }
 
-customElements.define("demo-hui-markdown-card", DemoMarkdown);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-markdown-card": DemoMarkdown;
+  }
+}

gallery/src/demos/demo-hui-media-control-card.ts

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 import { createMediaPlayerEntities } from "../data/media_players";
@@ -180,4 +174,8 @@ class DemoHuiMediaControlCard extends LitElement {
   }
 }
 
-customElements.define("demo-hui-media-control-card", DemoHuiMediaControlCard);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-media-control-card": DemoHuiMediaControlCard;
+  }
+}

gallery/src/demos/demo-hui-media-player-rows.ts

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 import { createMediaPlayerEntities } from "../data/media_players";
@@ -77,4 +71,8 @@ class DemoHuiMediaPlayerRow extends LitElement {
   }
 }
 
-customElements.define("demo-hui-media-player-row", DemoHuiMediaPlayerRow);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-media-player-row": DemoHuiMediaPlayerRow;
+  }
+}

gallery/src/demos/demo-hui-picture-elements-card.ts

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -147,4 +141,8 @@ class DemoPictureElements extends LitElement {
   }
 }
 
-customElements.define("demo-hui-picture-elements-card", DemoPictureElements);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-picture-elements-card": DemoPictureElements;
+  }
+}

gallery/src/demos/demo-hui-picture-entity-card.ts

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -102,4 +96,8 @@ class DemoPictureEntity extends LitElement {
   }
 }
 
-customElements.define("demo-hui-picture-entity-card", DemoPictureEntity);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-picture-entity-card": DemoPictureEntity;
+  }
+}

gallery/src/demos/demo-hui-picture-glance-card.ts

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -143,4 +137,8 @@ class DemoPictureGlance extends LitElement {
   }
 }
 
-customElements.define("demo-hui-picture-glance-card", DemoPictureGlance);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-picture-glance-card": DemoPictureGlance;
+  }
+}

gallery/src/demos/demo-hui-plant-card.ts

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 import { createPlantEntities } from "../data/plants";
@@ -52,4 +46,8 @@ export class DemoPlantEntity extends LitElement {
   }
 }
 
-customElements.define("demo-hui-plant-card", DemoPlantEntity);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-plant-card": DemoPlantEntity;
+  }
+}

gallery/src/demos/demo-hui-shopping-list-card.ts

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 
@@ -48,4 +42,8 @@ class DemoShoppingListEntity extends LitElement {
   }
 }
 
-customElements.define("demo-hui-shopping-list-card", DemoShoppingListEntity);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-shopping-list-card": DemoShoppingListEntity;
+  }
+}

gallery/src/demos/demo-hui-thermostat-card.ts

@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, query } from "lit/decorators";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -96,4 +90,8 @@ class DemoThermostatEntity extends LitElement {
   }
 }
 
-customElements.define("demo-hui-thermostat-card", DemoThermostatEntity);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-thermostat-card": DemoThermostatEntity;
+  }
+}

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

@@ -0,0 +1,354 @@
+import { html, css, LitElement, TemplateResult } from "lit";
+import "../../../src/components/ha-formfield";
+import "../../../src/components/ha-switch";
+
+import { IntegrationManifest } from "../../../src/data/integration";
+
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import { HomeAssistant } from "../../../src/types";
+import "../../../src/panels/config/integrations/ha-integration-card";
+import "../../../src/panels/config/integrations/ha-ignored-config-entry-card";
+import "../../../src/panels/config/integrations/ha-config-flow-card";
+import type {
+  ConfigEntryExtended,
+  DataEntryFlowProgressExtended,
+} from "../../../src/panels/config/integrations/ha-config-integrations";
+import { DeviceRegistryEntry } from "../../../src/data/device_registry";
+import { EntityRegistryEntry } from "../../../src/data/entity_registry";
+import { classMap } from "lit/directives/class-map";
+import { customElement, property, state } from "lit/decorators";
+
+const createConfigEntry = (
+  title: string,
+  override: Partial<ConfigEntryExtended> = {}
+): ConfigEntryExtended => ({
+  entry_id: title,
+  domain: "esphome",
+  localized_domain_name: "ESPHome",
+  title,
+  source: "zeroconf",
+  state: "loaded",
+  supports_options: false,
+  supports_unload: true,
+  disabled_by: null,
+  pref_disable_new_entities: false,
+  pref_disable_polling: false,
+  reason: null,
+  ...override,
+});
+
+const createManifest = (
+  isCustom: boolean,
+  isCloud: boolean,
+  name = "ESPHome"
+): IntegrationManifest => ({
+  name,
+  domain: "esphome",
+  is_built_in: !isCustom,
+  config_flow: false,
+  documentation: "https://www.home-assistant.io/integrations/esphome/",
+  iot_class: isCloud ? "cloud_polling" : "local_polling",
+});
+
+const loadedEntry = createConfigEntry("Loaded");
+const nameAsDomainEntry = createConfigEntry("ESPHome");
+const longNameEntry = createConfigEntry(
+  "Entry with a super long name that is going to the next line"
+);
+const longNonBreakingNameEntry = createConfigEntry(
+  "EntryWithASuperLongNameThatDoesNotBreak"
+);
+const configPanelEntry = createConfigEntry("Config Panel", {
+  domain: "mqtt",
+  localized_domain_name: "MQTT",
+});
+const optionsFlowEntry = createConfigEntry("Options Flow", {
+  supports_options: true,
+});
+const disabledPollingEntry = createConfigEntry("Disabled Polling", {
+  pref_disable_polling: true,
+});
+const setupErrorEntry = createConfigEntry("Setup Error", {
+  state: "setup_error",
+});
+const migrationErrorEntry = createConfigEntry("Migration Error", {
+  state: "migration_error",
+});
+const setupRetryEntry = createConfigEntry("Setup Retry", {
+  state: "setup_retry",
+});
+const setupRetryReasonEntry = createConfigEntry("Setup Retry", {
+  state: "setup_retry",
+  reason: "connection_error",
+});
+const setupRetryReasonMissingKeyEntry = createConfigEntry("Setup Retry", {
+  state: "setup_retry",
+  reason:
+    "HTTPSConnectionpool: Max retries exceeded with NewConnectionError('<urllib3.connection.HTTPSConnection object at 0x9eedfc10>: Failed to establish a new connection: [Errno 113] Host is unreachable')",
+});
+const failedUnloadEntry = createConfigEntry("Failed Unload", {
+  state: "failed_unload",
+});
+const notLoadedEntry = createConfigEntry("Not Loaded", { state: "not_loaded" });
+const disabledEntry = createConfigEntry("Disabled", {
+  state: "not_loaded",
+  disabled_by: "user",
+});
+const disabledFailedUnloadEntry = createConfigEntry(
+  "Disabled - Failed Unload",
+  {
+    state: "failed_unload",
+    disabled_by: "user",
+  }
+);
+
+const configFlows: DataEntryFlowProgressExtended[] = [
+  {
+    flow_id: "adbb401329d8439ebb78ef29837826a8",
+    handler: "roku",
+    context: {
+      source: "ssdp",
+      unique_id: "YF008D862864",
+      title_placeholders: {
+        name: "Living room Roku",
+      },
+    },
+    step_id: "discovery_confirm",
+    localized_title: "Living room Roku",
+  },
+  {
+    flow_id: "adbb401329d8439ebb78ef29837826a8",
+    handler: "hue",
+    context: {
+      source: "reauth",
+      unique_id: "YF008D862864",
+      title_placeholders: {
+        name: "Living room Roku",
+      },
+    },
+    step_id: "discovery_confirm",
+    localized_title: "Philips Hue",
+  },
+];
+
+const configEntries: Array<{
+  items: ConfigEntryExtended[];
+  is_custom?: boolean;
+  disabled?: boolean;
+  highlight?: string;
+}> = [
+  { items: [loadedEntry] },
+  { items: [configPanelEntry] },
+  { items: [optionsFlowEntry] },
+  { items: [disabledPollingEntry] },
+  { items: [nameAsDomainEntry] },
+  { items: [longNameEntry] },
+  { items: [longNonBreakingNameEntry] },
+  { items: [setupErrorEntry] },
+  { items: [migrationErrorEntry] },
+  { items: [setupRetryEntry] },
+  { items: [setupRetryReasonEntry] },
+  { items: [setupRetryReasonMissingKeyEntry] },
+  { items: [failedUnloadEntry] },
+  { items: [notLoadedEntry] },
+  {
+    items: [
+      loadedEntry,
+      setupErrorEntry,
+      migrationErrorEntry,
+      longNameEntry,
+      longNonBreakingNameEntry,
+      setupRetryEntry,
+      failedUnloadEntry,
+      notLoadedEntry,
+      disabledEntry,
+      nameAsDomainEntry,
+      configPanelEntry,
+      optionsFlowEntry,
+    ],
+  },
+  { disabled: true, items: [disabledEntry] },
+  { disabled: true, items: [disabledFailedUnloadEntry] },
+  {
+    disabled: true,
+    items: [disabledEntry, disabledFailedUnloadEntry],
+  },
+  {
+    items: [loadedEntry, configPanelEntry],
+    highlight: "Loaded",
+  },
+];
+
+const createEntityRegistryEntries = (
+  item: ConfigEntryExtended
+): EntityRegistryEntry[] => [
+  {
+    config_entry_id: item.entry_id,
+    device_id: "mock-device-id",
+    area_id: null,
+    disabled_by: null,
+    entity_id: "binary_sensor.updater",
+    name: null,
+    icon: null,
+    platform: "updater",
+  },
+];
+
+const createDeviceRegistryEntries = (
+  item: ConfigEntryExtended
+): DeviceRegistryEntry[] => [
+  {
+    entry_type: null,
+    config_entries: [item.entry_id],
+    connections: [],
+    manufacturer: "ESPHome",
+    model: "Mock Device",
+    name: "Tag Reader",
+    sw_version: null,
+    id: "mock-device-id",
+    identifiers: [],
+    via_device_id: null,
+    area_id: null,
+    name_by_user: null,
+    disabled_by: null,
+  },
+];
+
+@customElement("demo-integration-card")
+export class DemoIntegrationCard extends LitElement {
+  @property({ attribute: false }) hass?: HomeAssistant;
+
+  @state() isCustomIntegration = false;
+
+  @state() isCloud = false;
+
+  protected render(): TemplateResult {
+    if (!this.hass) {
+      return html``;
+    }
+    return html`
+      <div class="container">
+        <div class="filters">
+          <ha-formfield label="Custom Integration">
+            <ha-switch @change=${this._toggleCustomIntegration}></ha-switch>
+          </ha-formfield>
+          <ha-formfield label="Relies on cloud">
+            <ha-switch @change=${this._toggleCloud}></ha-switch>
+          </ha-formfield>
+        </div>
+
+        <ha-ignored-config-entry-card
+          .hass=${this.hass}
+          .entry=${createConfigEntry("Ignored Entry")}
+          .manifest=${createManifest(this.isCustomIntegration, this.isCloud)}
+        ></ha-ignored-config-entry-card>
+
+        ${configFlows.map(
+          (flow) => html`
+            <ha-config-flow-card
+              .hass=${this.hass}
+              .flow=${flow}
+              .manifest=${createManifest(
+                this.isCustomIntegration,
+                this.isCloud,
+                flow.handler === "roku" ? "Roku" : "Philips Hue"
+              )}
+            ></ha-config-flow-card>
+          `
+        )}
+        ${configEntries.map(
+          (info) => html`
+            <ha-integration-card
+              class=${classMap({
+                highlight: info.highlight !== undefined,
+              })}
+              .hass=${this.hass}
+              domain="esphome"
+              .items=${info.items}
+              .manifest=${createManifest(
+                this.isCustomIntegration,
+                this.isCloud
+              )}
+              .entityRegistryEntries=${createEntityRegistryEntries(
+                info.items[0]
+              )}
+              .deviceRegistryEntries=${createDeviceRegistryEntries(
+                info.items[0]
+              )}
+              ?disabled=${info.disabled}
+              .selectedConfigEntryId=${info.highlight}
+            ></ha-integration-card>
+          `
+        )}
+      </div>
+      <div class="container">
+        <!-- One that is standalone to see how it increases height if height
+           not defined by other cards. -->
+        <ha-integration-card
+          .hass=${this.hass}
+          domain="esphome"
+          .items=${[
+            loadedEntry,
+            setupErrorEntry,
+            migrationErrorEntry,
+            setupRetryEntry,
+            failedUnloadEntry,
+          ]}
+          .manifest=${createManifest(this.isCustomIntegration, this.isCloud)}
+          .entityRegistryEntries=${createEntityRegistryEntries(loadedEntry)}
+          .deviceRegistryEntries=${createDeviceRegistryEntries(loadedEntry)}
+        ></ha-integration-card>
+      </div>
+    `;
+  }
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
+    // Normally this string is loaded from backend
+    hass.addTranslations(
+      {
+        "component.esphome.config.error.connection_error":
+          "Can't connect to ESP. Please make sure your YAML file contains an 'api:' line.",
+      },
+      "en"
+    );
+  }
+
+  private _toggleCustomIntegration() {
+    this.isCustomIntegration = !this.isCustomIntegration;
+  }
+
+  private _toggleCloud() {
+    this.isCloud = !this.isCloud;
+  }
+
+  static get styles() {
+    return css`
+      .container {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+        grid-gap: 16px 16px;
+        padding: 8px 16px 16px;
+        margin-bottom: 64px;
+      }
+
+      .container > * {
+        max-width: 500px;
+      }
+
+      ha-formfield {
+        margin: 8px 0;
+        display: block;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-integration-card": DemoIntegrationCard;
+  }
+}

gallery/src/demos/demo-more-info-light.ts

@@ -1,21 +1,11 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  property,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
 import "../../../src/components/ha-card";
 import {
-  SUPPORT_BRIGHTNESS,
-  SUPPORT_COLOR,
-  SUPPORT_COLOR_TEMP,
+  LightColorModes,
   SUPPORT_EFFECT,
   SUPPORT_FLASH,
   SUPPORT_TRANSITION,
-  SUPPORT_WHITE_VALUE,
 } from "../../../src/data/light";
 import "../../../src/dialogs/more-info/more-info-content";
 import { getEntity } from "../../../src/fake_data/entity";
@@ -32,7 +22,8 @@ const ENTITIES = [
   getEntity("light", "kitchen_light", "on", {
     friendly_name: "Brightness Light",
     brightness: 200,
-    supported_features: SUPPORT_BRIGHTNESS,
+    supported_color_modes: [LightColorModes.BRIGHTNESS],
+    color_mode: LightColorModes.BRIGHTNESS,
   }),
   getEntity("light", "color_temperature_light", "on", {
     friendly_name: "White Color Temperature Light",
@@ -40,20 +31,96 @@ const ENTITIES = [
     color_temp: 75,
     min_mireds: 30,
     max_mireds: 150,
-    supported_features: SUPPORT_BRIGHTNESS + SUPPORT_COLOR_TEMP,
+    supported_color_modes: [
+      LightColorModes.BRIGHTNESS,
+      LightColorModes.COLOR_TEMP,
+    ],
+    color_mode: LightColorModes.COLOR_TEMP,
   }),
-  getEntity("light", "color_effectslight", "on", {
-    friendly_name: "Color Effets Light",
+  getEntity("light", "color_hs_light", "on", {
+    friendly_name: "Color HS Light",
     brightness: 255,
     hs_color: [30, 100],
-    white_value: 36,
-    supported_features:
-      SUPPORT_BRIGHTNESS +
-      SUPPORT_EFFECT +
-      SUPPORT_FLASH +
-      SUPPORT_COLOR +
-      SUPPORT_TRANSITION +
-      SUPPORT_WHITE_VALUE,
+    rgb_color: [30, 100, 255],
+    min_mireds: 30,
+    max_mireds: 150,
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_color_modes: [
+      LightColorModes.BRIGHTNESS,
+      LightColorModes.COLOR_TEMP,
+      LightColorModes.HS,
+    ],
+    color_mode: LightColorModes.HS,
+    effect_list: ["random", "colorloop"],
+  }),
+  getEntity("light", "color_rgb_ct_light", "on", {
+    friendly_name: "Color RGB + CT Light",
+    brightness: 255,
+    color_temp: 75,
+    min_mireds: 30,
+    max_mireds: 150,
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_color_modes: [
+      LightColorModes.BRIGHTNESS,
+      LightColorModes.COLOR_TEMP,
+      LightColorModes.RGB,
+    ],
+    color_mode: LightColorModes.COLOR_TEMP,
+    effect_list: ["random", "colorloop"],
+  }),
+  getEntity("light", "color_RGB_light", "on", {
+    friendly_name: "Color Effets Light",
+    brightness: 255,
+    rgb_color: [30, 100, 255],
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_color_modes: [LightColorModes.BRIGHTNESS, LightColorModes.RGB],
+    color_mode: LightColorModes.RGB,
+    effect_list: ["random", "colorloop"],
+  }),
+  getEntity("light", "color_rgbw_light", "on", {
+    friendly_name: "Color RGBW Light",
+    brightness: 255,
+    rgbw_color: [30, 100, 255, 125],
+    min_mireds: 30,
+    max_mireds: 150,
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_color_modes: [
+      LightColorModes.BRIGHTNESS,
+      LightColorModes.COLOR_TEMP,
+      LightColorModes.RGBW,
+    ],
+    color_mode: LightColorModes.RGBW,
+    effect_list: ["random", "colorloop"],
+  }),
+  getEntity("light", "color_rgbww_light", "on", {
+    friendly_name: "Color RGBWW Light",
+    brightness: 255,
+    rgbww_color: [30, 100, 255, 125, 10],
+    min_mireds: 30,
+    max_mireds: 150,
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_color_modes: [
+      LightColorModes.BRIGHTNESS,
+      LightColorModes.COLOR_TEMP,
+      LightColorModes.RGBWW,
+    ],
+    color_mode: LightColorModes.RGBWW,
+    effect_list: ["random", "colorloop"],
+  }),
+  getEntity("light", "color_xy_light", "on", {
+    friendly_name: "Color XY Light",
+    brightness: 255,
+    xy_color: [30, 100],
+    rgb_color: [30, 100, 255],
+    min_mireds: 30,
+    max_mireds: 150,
+    supported_features: SUPPORT_EFFECT + SUPPORT_FLASH + SUPPORT_TRANSITION,
+    supported_color_modes: [
+      LightColorModes.BRIGHTNESS,
+      LightColorModes.COLOR_TEMP,
+      LightColorModes.XY,
+    ],
+    color_mode: LightColorModes.XY,
     effect_list: ["random", "colorloop"],
   }),
 ];
@@ -81,4 +148,8 @@ class DemoMoreInfoLight extends LitElement {
   }
 }
 
-customElements.define("demo-more-info-light", DemoMoreInfoLight);
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-more-info-light": DemoMoreInfoLight;
+  }
+}

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

@@ -1,5 +1,6 @@
 import "@material/mwc-button";
-import { customElement, html, LitElement, TemplateResult } from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
 import "../../../src/components/ha-card";
 import { ActionHandlerEvent } from "../../../src/data/lovelace";
 import { actionHandler } from "../../../src/panels/lovelace/common/directives/action-handler-directive";

gallery/src/ha-gallery.js

@@ -111,29 +111,9 @@ class HaGallery extends PolymerElement {
                 </template>
               </ha-card>
 
-              <ha-card header="More Info Demos">
-                <div class="card-content intro">
-                  <p>
-                    More info screens show up when an entity is clicked.
-                  </p>
-                </div>
-                <template is="dom-repeat" items="[[_moreInfoDemos]]">
-                  <a href="#[[item]]">
-                    <paper-item>
-                      <paper-item-body>{{ item }}</paper-item-body>
-                      <ha-icon icon="hass:chevron-right"></ha-icon>
-                    </paper-item>
-                  </a>
-                </template>
-              </ha-card>
-
-              <ha-card header="Util Demos">
-                <div class="card-content intro">
-                  <p>
-                    Test pages for our utility functions.
-                  </p>
-                </div>
-                <template is="dom-repeat" items="[[_utilDemos]]">
+              <ha-card header="Other Demos">
+                <div class="card-content intro"></div>
+                <template is="dom-repeat" items="[[_restDemos]]">
                   <a href="#[[item]]">
                     <paper-item>
                       <paper-item-body>{{ item }}</paper-item-body>
@@ -178,13 +158,9 @@ class HaGallery extends PolymerElement {
         type: Array,
         computed: "_computeLovelace(_demos)",
       },
-      _moreInfoDemos: {
+      _restDemos: {
         type: Array,
-        computed: "_computeMoreInfos(_demos)",
-      },
-      _utilDemos: {
-        type: Array,
-        computed: "_computeUtil(_demos)",
+        computed: "_computeRest(_demos)",
       },
     };
   }
@@ -237,12 +213,8 @@ class HaGallery extends PolymerElement {
     return demos.filter((demo) => demo.includes("hui"));
   }
 
-  _computeMoreInfos(demos) {
-    return demos.filter((demo) => demo.includes("more-info"));
-  }
-
-  _computeUtil(demos) {
-    return demos.filter((demo) => demo.includes("util"));
+  _computeRest(demos) {
+    return demos.filter((demo) => !demo.includes("hui"));
   }
 }
 

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

@@ -1,12 +1,6 @@
 import { mdiArrowUpBoldCircle, mdiPuzzle } from "@mdi/js";
-import {
-  css,
-  CSSResultArray,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { navigate } from "../../../src/common/navigate";
@@ -15,6 +9,7 @@ import {
   HassioAddonInfo,
   HassioAddonRepository,
 } from "../../../src/data/hassio/addon";
+import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { HomeAssistant } from "../../../src/types";
 import "../components/hassio-card-content";
 import { filterAndSort } from "../components/hassio-filter-addons";
@@ -23,6 +18,8 @@ import { hassioStyle } from "../resources/hassio-style";
 class HassioAddonRepositoryEl extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public repo!: HassioAddonRepository;
 
   @property({ attribute: false }) public addons!: HassioAddonInfo[];
@@ -44,9 +41,7 @@ class HassioAddonRepositoryEl extends LitElement {
     const repo = this.repo;
     let _addons = this.addons;
     if (!this.hass.userData?.showAdvanced) {
-      _addons = _addons.filter((addon) => {
-        return !addon.advanced;
-      });
+      _addons = _addons.filter((addon) => !addon.advanced);
     }
     const addons = this._getAddons(_addons, this.filter);
 
@@ -54,16 +49,18 @@ class HassioAddonRepositoryEl extends LitElement {
       return html`
         <div class="content">
           <p class="description">
-            No results found in "${repo.name}."
+            ${this.supervisor.localize(
+              "store.no_results_found",
+              "repository",
+              repo.name
+            )}
           </p>
         </div>
       `;
     }
     return html`
       <div class="content">
-        <h1>
-          ${repo.name}
-        </h1>
+        <h1>${repo.name}</h1>
         <div class="card-group">
           ${addons.map(
             (addon) => html`
@@ -83,11 +80,13 @@ class HassioAddonRepositoryEl extends LitElement {
                       : mdiPuzzle}
                     .iconTitle=${addon.installed
                       ? addon.update_available
-                        ? "New version available"
-                        : "Add-on is installed"
+                        ? this.supervisor.localize(
+                            "common.new_version_available"
+                          )
+                        : this.supervisor.localize("addon.installed")
                       : addon.available
-                      ? "Add-on is not installed"
-                      : "Add-on is not available on your system"}
+                      ? this.supervisor.localize("addon.not_installed")
+                      : this.supervisor.localize("addon.not_available")}
                     .iconClass=${addon.installed
                       ? addon.update_available
                         ? "update"
@@ -121,10 +120,10 @@ class HassioAddonRepositoryEl extends LitElement {
   }
 
   private _addonTapped(ev) {
-    navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}`);
+    navigate(`/hassio/addon/${ev.currentTarget.addon.slug}`);
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       hassioStyle,
       css`

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

@@ -4,26 +4,27 @@ import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
 import {
   css,
-  CSSResult,
-  internalProperty,
+  CSSResultGroup,
+  html,
   LitElement,
-  property,
   PropertyValues,
-} from "lit-element";
-import { html, TemplateResult } from "lit-html";
+  TemplateResult,
+} from "lit";
+import { property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";
+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 {
-  fetchHassioAddonsInfo,
   HassioAddonInfo,
   HassioAddonRepository,
   reloadHassioAddons,
 } from "../../../src/data/hassio/addon";
-import { extractApiErrorMessage } from "../../../src/data/hassio/common";
-import { fetchHassioSupervisorInfo } from "../../../src/data/hassio/supervisor";
+import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-tabs-subpage";
 import { HomeAssistant, Route } from "../../../src/types";
@@ -51,58 +52,41 @@ const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
 class HassioAddonStore extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ type: Boolean }) public narrow!: boolean;
 
   @property({ attribute: false }) public route!: Route;
 
-  @property({ attribute: false }) private _addons?: HassioAddonInfo[];
-
-  @property({ attribute: false }) private _repos?: HassioAddonRepository[];
-
-  @internalProperty() private _filter?: string;
+  @state() private _filter?: string;
 
   public async refreshData() {
-    this._repos = undefined;
-    this._addons = undefined;
-    this._filter = undefined;
     await reloadHassioAddons(this.hass);
     await this._loadData();
   }
 
   protected render(): TemplateResult {
-    const repos: TemplateResult[] = [];
+    let repos: TemplateResult[] = [];
 
-    if (this._repos) {
-      for (const repo of this._repos) {
-        const addons = this._addons!.filter(
-          (addon) => addon.repository === repo.slug
-        );
-
-        if (addons.length === 0) {
-          continue;
-        }
-
-        repos.push(html`
-          <hassio-addon-repository
-            .hass=${this.hass}
-            .repo=${repo}
-            .addons=${addons}
-            .filter=${this._filter!}
-          ></hassio-addon-repository>
-        `);
-      }
+    if (this.supervisor.addon.repositories) {
+      repos = this.addonRepositories(
+        this.supervisor.addon.repositories,
+        this.supervisor.addon.addons,
+        this._filter
+      );
     }
 
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
+        .localizeFunc=${this.supervisor.localize}
         .narrow=${this.narrow}
         .route=${this.route}
-        hassio
-        main-page
         .tabs=${supervisorTabs}
+        main-page
+        supervisor
       >
-        <span slot="header">Add-on Store</span>
+        <span slot="header"> ${this.supervisor.localize("panel.store")} </span>
         <ha-button-menu
           corner="BOTTOM_START"
           slot="toolbar-icon"
@@ -112,15 +96,15 @@ class HassioAddonStore extends LitElement {
             <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
           </mwc-icon-button>
           <mwc-list-item>
-            Repositories
+            ${this.supervisor.localize("store.repositories")}
           </mwc-list-item>
           <mwc-list-item>
-            Reload
+            ${this.supervisor.localize("common.reload")}
           </mwc-list-item>
           ${this.hass.userData?.showAdvanced &&
           atLeastVersion(this.hass.config.version, 0, 117)
             ? html`<mwc-list-item>
-                Registries
+                ${this.supervisor.localize("store.registries")}
               </mwc-list-item>`
             : ""}
         </ha-button-menu>
@@ -141,11 +125,9 @@ class HassioAddonStore extends LitElement {
         ${!this.hass.userData?.showAdvanced
           ? html`
               <div class="advanced">
-                Missing add-ons? Enable advanced mode on
                 <a href="/profile" target="_top">
-                  your profile page
+                  ${this.supervisor.localize("store.missing_addons")}
                 </a>
-                .
               </div>
             `
           : ""}
@@ -155,14 +137,45 @@ class HassioAddonStore extends LitElement {
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
+    const repositoryUrl = extractSearchParam("repository_url");
+    navigate("/hassio/store", { replace: true });
+    if (repositoryUrl) {
+      this._manageRepositories(repositoryUrl);
+    }
+
     this.addEventListener("hass-api-called", (ev) => this.apiCalled(ev));
     this._loadData();
   }
 
+  private addonRepositories = memoizeOne(
+    (
+      repositories: HassioAddonRepository[],
+      addons: HassioAddonInfo[],
+      filter?: string
+    ) =>
+      repositories.sort(sortRepos).map((repo) => {
+        const filteredAddons = addons.filter(
+          (addon) => addon.repository === repo.slug
+        );
+
+        return filteredAddons.length !== 0
+          ? html`
+              <hassio-addon-repository
+                .hass=${this.hass}
+                .repo=${repo}
+                .addons=${filteredAddons}
+                .filter=${filter!}
+                .supervisor=${this.supervisor}
+              ></hassio-addon-repository>
+            `
+          : html``;
+      })
+  );
+
   private _handleAction(ev: CustomEvent<ActionDetail>) {
     switch (ev.detail.index) {
       case 0:
-        this._manageRepositories();
+        this._manageRepositoriesClicked();
         break;
       case 1:
         this.refreshData();
@@ -179,37 +192,33 @@ class HassioAddonStore extends LitElement {
     }
   }
 
-  private async _manageRepositories() {
+  private _manageRepositoriesClicked() {
+    this._manageRepositories();
+  }
+
+  private async _manageRepositories(url?: string) {
     showRepositoriesDialog(this, {
-      repos: this._repos!,
-      loadData: () => this._loadData(),
+      supervisor: this.supervisor,
+      url,
     });
   }
 
   private async _manageRegistries() {
-    showRegistriesDialog(this);
+    showRegistriesDialog(this, { supervisor: this.supervisor });
   }
 
   private async _loadData() {
-    try {
-      const [addonsInfo, supervisor] = await Promise.all([
-        fetchHassioAddonsInfo(this.hass),
-        fetchHassioSupervisorInfo(this.hass),
-      ]);
-      fireEvent(this, "supervisor-update", { supervisor });
-      this._repos = addonsInfo.repositories;
-      this._repos.sort(sortRepos);
-      this._addons = addonsInfo.addons;
-    } catch (err) {
-      alert(extractApiErrorMessage(err));
-    }
+    fireEvent(this, "supervisor-collection-refresh", { collection: "addon" });
+    fireEvent(this, "supervisor-collection-refresh", {
+      collection: "supervisor",
+    });
   }
 
   private async _filterChanged(e) {
     this._filter = e.detail.value;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       hassio-addon-repository {
         margin-top: 24px;

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

@@ -4,15 +4,13 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import "web-animations-js/web-animations-next-lite.min";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-card";
@@ -25,6 +23,7 @@ import {
   fetchHassioHardwareAudio,
   HassioHardwareAudioDevice,
 } from "../../../../src/data/hassio/hardware";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
@@ -34,26 +33,32 @@ import { hassioStyle } from "../../resources/hassio-style";
 class HassioAddonAudio extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _inputDevices?: HassioHardwareAudioDevice[];
+  @state() private _inputDevices?: HassioHardwareAudioDevice[];
 
-  @internalProperty() private _outputDevices?: HassioHardwareAudioDevice[];
+  @state() private _outputDevices?: HassioHardwareAudioDevice[];
 
-  @internalProperty() private _selectedInput!: null | string;
+  @state() private _selectedInput!: null | string;
 
-  @internalProperty() private _selectedOutput!: null | string;
+  @state() private _selectedOutput!: null | string;
 
   protected render(): TemplateResult {
     return html`
-      <ha-card header="Audio">
+      <ha-card
+        .header=${this.supervisor.localize("addon.configuration.audio.header")}
+      >
         <div class="card-content">
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
 
           <paper-dropdown-menu
-            label="Input"
+            .label=${this.supervisor.localize(
+              "addon.configuration.audio.input"
+            )}
             @iron-select=${this._setInputDevice}
           >
             <paper-listbox
@@ -62,17 +67,19 @@ class HassioAddonAudio extends LitElement {
               .selected=${this._selectedInput!}
             >
               ${this._inputDevices &&
-              this._inputDevices.map((item) => {
-                return html`
-                  <paper-item device=${item.device || ""}
-                    >${item.name}</paper-item
-                  >
-                `;
-              })}
+              this._inputDevices.map(
+                (item) => html`
+                  <paper-item device=${item.device || ""}>
+                    ${item.name}
+                  </paper-item>
+                `
+              )}
             </paper-listbox>
           </paper-dropdown-menu>
           <paper-dropdown-menu
-            label="Output"
+            .label=${this.supervisor.localize(
+              "addon.configuration.audio.output"
+            )}
             @iron-select=${this._setOutputDevice}
           >
             <paper-listbox
@@ -81,26 +88,26 @@ class HassioAddonAudio extends LitElement {
               .selected=${this._selectedOutput!}
             >
               ${this._outputDevices &&
-              this._outputDevices.map((item) => {
-                return html`
+              this._outputDevices.map(
+                (item) => html`
                   <paper-item device=${item.device || ""}
                     >${item.name}</paper-item
                   >
-                `;
-              })}
+                `
+              )}
             </paper-listbox>
           </paper-dropdown-menu>
         </div>
         <div class="card-actions">
           <ha-progress-button @click=${this._saveSettings}>
-            Save
+            ${this.supervisor.localize("common.save")}
           </ha-progress-button>
         </div>
       </ha-card>
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
@@ -152,7 +159,7 @@ class HassioAddonAudio extends LitElement {
 
     const noDevice: HassioHardwareAudioDevice = {
       device: "default",
-      name: "Default",
+      name: this.supervisor.localize("addon.configuration.audio.default"),
     };
 
     try {
@@ -189,7 +196,7 @@ class HassioAddonAudio extends LitElement {
     try {
       await setHassioAddonOption(this.hass, this.addon.slug, data);
       if (this.addon?.state === "started") {
-        await suggestAddonRestart(this, this.hass, this.addon);
+        await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
     } catch {
       this._error = "Failed to set addon audio device";

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

@@ -1,14 +1,8 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-circular-progress";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
@@ -20,26 +14,28 @@ import "./hassio-addon-network";
 class HassioAddonConfigDashboard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
   protected render(): TemplateResult {
     if (!this.addon) {
       return html`<ha-circular-progress active></ha-circular-progress>`;
     }
-    const hasOptions =
-      this.addon.options && Object.keys(this.addon.options).length;
-    const hasSchema =
-      this.addon.schema && Object.keys(this.addon.schema).length;
+    const hasConfiguration =
+      (this.addon.options && Object.keys(this.addon.options).length) ||
+      (this.addon.schema && Object.keys(this.addon.schema).length);
 
     return html`
       <div class="content">
-        ${hasOptions || hasSchema || this.addon.network || this.addon.audio
+        ${hasConfiguration || this.addon.network || this.addon.audio
           ? html`
-              ${hasOptions || hasSchema
+              ${hasConfiguration
                 ? html`
                     <hassio-addon-config
                       .hass=${this.hass}
                       .addon=${this.addon}
+                      .supervisor=${this.supervisor}
                     ></hassio-addon-config>
                   `
                 : ""}
@@ -48,6 +44,7 @@ class HassioAddonConfigDashboard extends LitElement {
                     <hassio-addon-network
                       .hass=${this.hass}
                       .addon=${this.addon}
+                      .supervisor=${this.supervisor}
                     ></hassio-addon-network>
                   `
                 : ""}
@@ -56,16 +53,17 @@ class HassioAddonConfigDashboard extends LitElement {
                     <hassio-addon-audio
                       .hass=${this.hass}
                       .addon=${this.addon}
+                      .supervisor=${this.supervisor}
                     ></hassio-addon-audio>
                   `
                 : ""}
             `
-          : "This add-on does not expose configuration for you to mess with.... 👋"}
+          : this.supervisor.localize("addon.configuration.no_configuration")}
       </div>
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,

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

@@ -1,84 +1,231 @@
 import "@material/mwc-button";
+import { ActionDetail } from "@material/mwc-list";
+import "@material/mwc-list/mwc-list-item";
+import { mdiDotsVertical } from "@mdi/js";
 import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea";
+import { DEFAULT_SCHEMA, Type } from "js-yaml";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+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-button-menu";
 import "../../../../src/components/ha-card";
+import "../../../../src/components/ha-form/ha-form";
+import type { HaFormSchema } from "../../../../src/components/ha-form/ha-form";
+import "../../../../src/components/ha-formfield";
+import "../../../../src/components/ha-switch";
 import "../../../../src/components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../src/components/ha-yaml-editor";
 import {
   HassioAddonDetails,
   HassioAddonSetOptionParams,
   setHassioAddonOption,
+  validateHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
 import { hassioStyle } from "../../resources/hassio-style";
 
+const SUPPORTED_UI_TYPES = ["string", "select", "boolean", "integer", "float"];
+
+const ADDON_YAML_SCHEMA = DEFAULT_SCHEMA.extend([
+  new Type("!secret", {
+    kind: "scalar",
+    construct: (data) => `!secret ${data}`,
+  }),
+]);
+
 @customElement("hassio-addon-config")
 class HassioAddonConfig extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
-  @internalProperty() private _error?: string;
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public supervisor!: Supervisor;
 
   @property({ type: Boolean }) private _configHasChanged = false;
 
   @property({ type: Boolean }) private _valid = true;
 
-  @query("ha-yaml-editor", true) private _editor!: HaYamlEditor;
+  @state() private _canShowSchema = false;
+
+  @state() private _showOptional = false;
+
+  @state() private _error?: string;
+
+  @state() private _options?: Record<string, unknown>;
+
+  @state() private _yamlMode = false;
+
+  @query("ha-yaml-editor") private _editor?: HaYamlEditor;
+
+  public computeLabel = (entry: HaFormSchema): string =>
+    this.addon.translations[this.hass.language]?.configuration?.[entry.name]
+      ?.name ||
+    this.addon.translations.en?.configuration?.[entry.name].name ||
+    entry.name;
+
+  private _filteredShchema = memoizeOne(
+    (options: Record<string, unknown>, schema: HaFormSchema[]) =>
+      schema.filter((entry) => entry.name in options || entry.required)
+  );
 
   protected render(): TemplateResult {
+    const showForm =
+      !this._yamlMode && this._canShowSchema && this.addon.schema;
+    const hasHiddenOptions =
+      showForm &&
+      JSON.stringify(this.addon.schema) !==
+        JSON.stringify(
+          this._filteredShchema(this.addon.options, this.addon.schema!)
+        );
     return html`
       <h1>${this.addon.name}</h1>
-      <ha-card header="Configuration">
-        <div class="card-content">
-          <ha-yaml-editor
-            @value-changed=${this._configChanged}
-          ></ha-yaml-editor>
-          ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
-          ${this._valid ? "" : html` <div class="errors">Invalid YAML</div> `}
+      <ha-card>
+        <div class="header">
+          <h2>
+            ${this.supervisor.localize("addon.configuration.options.header")}
+          </h2>
+          <div class="card-menu">
+            <ha-button-menu corner="BOTTOM_START" @action=${this._handleAction}>
+              <mwc-icon-button slot="trigger">
+                <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+              </mwc-icon-button>
+              <mwc-list-item .disabled=${!this._canShowSchema}>
+                ${this._yamlMode
+                  ? this.supervisor.localize(
+                      "addon.configuration.options.edit_in_ui"
+                    )
+                  : this.supervisor.localize(
+                      "addon.configuration.options.edit_in_yaml"
+                    )}
+              </mwc-list-item>
+              <mwc-list-item class="warning">
+                ${this.supervisor.localize("common.reset_defaults")}
+              </mwc-list-item>
+            </ha-button-menu>
+          </div>
         </div>
-        <div class="card-actions">
-          <ha-progress-button class="warning" @click=${this._resetTapped}>
-            Reset to defaults
-          </ha-progress-button>
+
+        <div class="card-content">
+          ${showForm
+            ? html`<ha-form
+                .data=${this._options!}
+                @value-changed=${this._configChanged}
+                .computeLabel=${this.computeLabel}
+                .schema=${this._showOptional
+                  ? this.addon.schema!
+                  : this._filteredShchema(
+                      this.addon.options,
+                      this.addon.schema!
+                    )}
+              ></ha-form>`
+            : html` <ha-yaml-editor
+                @value-changed=${this._configChanged}
+                .schema=${ADDON_YAML_SCHEMA}
+              ></ha-yaml-editor>`}
+          ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
+          ${!this._yamlMode ||
+          (this._canShowSchema && this.addon.schema) ||
+          this._valid
+            ? ""
+            : html`
+                <div class="errors">
+                  ${this.supervisor.localize(
+                    "addon.configuration.options.invalid_yaml"
+                  )}
+                </div>
+              `}
+        </div>
+        ${hasHiddenOptions
+          ? html`<ha-formfield
+              class="show-additional"
+              .label=${this.supervisor.localize(
+                "addon.configuration.options.show_unused_optional"
+              )}
+            >
+              <ha-switch
+                @change=${this._toggleOptional}
+                .checked=${this._showOptional}
+              >
+              </ha-switch>
+            </ha-formfield>`
+          : ""}
+        <div class="card-actions right">
           <ha-progress-button
             @click=${this._saveTapped}
             .disabled=${!this._configHasChanged || !this._valid}
           >
-            Save
+            ${this.supervisor.localize("common.save")}
           </ha-progress-button>
         </div>
       </ha-card>
     `;
   }
 
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    this._canShowSchema = !this.addon.schema!.find(
+      // @ts-ignore
+      (entry) => !SUPPORTED_UI_TYPES.includes(entry.type) || entry.multiple
+    );
+    this._yamlMode = !this._canShowSchema;
+  }
+
   protected updated(changedProperties: PropertyValues): void {
-    super.updated(changedProperties);
     if (changedProperties.has("addon")) {
-      this._editor.setValue(this.addon.options);
+      this._options = { ...this.addon.options };
+    }
+    super.updated(changedProperties);
+    if (
+      changedProperties.has("_yamlMode") ||
+      changedProperties.has("_options")
+    ) {
+      if (this._yamlMode) {
+        const editor = this._editor;
+        if (editor) {
+          editor.setValue(this._options!);
+        }
+      }
     }
   }
 
+  private _handleAction(ev: CustomEvent<ActionDetail>) {
+    switch (ev.detail.index) {
+      case 0:
+        this._yamlMode = !this._yamlMode;
+        break;
+      case 1:
+        this._resetTapped(ev);
+        break;
+    }
+  }
+
+  private _toggleOptional() {
+    this._showOptional = !this._showOptional;
+  }
+
   private _configChanged(ev): void {
-    this._configHasChanged = true;
-    this._valid = ev.detail.isValid;
+    if (this.addon.schema && this._canShowSchema && !this._yamlMode) {
+      this._valid = true;
+      this._configHasChanged = true;
+      this._options! = ev.detail.value;
+    } else {
+      this._configHasChanged = true;
+      this._valid = ev.detail.isValid;
+    }
   }
 
   private async _resetTapped(ev: CustomEvent): Promise<void> {
@@ -86,10 +233,10 @@ class HassioAddonConfig extends LitElement {
     button.progress = true;
 
     const confirmed = await showConfirmationDialog(this, {
-      title: this.addon.name,
-      text: "Are you sure you want to reset all your options?",
-      confirmText: "reset options",
-      dismissText: "no",
+      title: this.supervisor.localize("confirm.reset_options.title"),
+      text: this.supervisor.localize("confirm.reset_options.text"),
+      confirmText: this.supervisor.localize("common.reset_options"),
+      dismissText: this.supervisor.localize("common.cancel"),
     });
 
     if (!confirmed) {
@@ -111,48 +258,56 @@ class HassioAddonConfig extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
     } catch (err) {
-      this._error = `Failed to reset addon configuration, ${extractApiErrorMessage(
-        err
-      )}`;
+      this._error = this.supervisor.localize(
+        "addon.common.update_available",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
     button.progress = false;
   }
 
   private async _saveTapped(ev: CustomEvent): Promise<void> {
     const button = ev.currentTarget as any;
+    const eventdata = {
+      success: true,
+      response: undefined,
+      path: "options",
+    };
     button.progress = true;
 
-    let data: HassioAddonSetOptionParams;
     this._error = undefined;
+
     try {
-      data = {
-        options: this._editor.value,
-      };
-    } catch (err) {
-      this._error = err;
-      return;
-    }
-    try {
-      await setHassioAddonOption(this.hass, this.addon.slug, data);
+      const validation = await validateHassioAddonOption(
+        this.hass,
+        this.addon.slug,
+        this._editor?.value
+      );
+      if (!validation.valid) {
+        throw Error(validation.message);
+      }
+      await setHassioAddonOption(this.hass, this.addon.slug, {
+        options: this._yamlMode ? this._editor?.value : this._options,
+      });
+
       this._configHasChanged = false;
-      const eventdata = {
-        success: true,
-        response: undefined,
-        path: "options",
-      };
-      fireEvent(this, "hass-api-called", eventdata);
       if (this.addon?.state === "started") {
-        await suggestAddonRestart(this, this.hass, this.addon);
+        await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
     } catch (err) {
-      this._error = `Failed to save addon configuration, ${extractApiErrorMessage(
-        err
-      )}`;
+      this._error = this.supervisor.localize(
+        "addon.failed_to_save",
+        "error",
+        extractApiErrorMessage(err)
+      );
+      eventdata.success = false;
     }
     button.progress = false;
+    fireEvent(this, "hass-api-called", eventdata);
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
@@ -178,6 +333,36 @@ class HassioAddonConfig extends LitElement {
         .syntaxerror {
           color: var(--error-color);
         }
+        .card-menu {
+          float: right;
+          z-index: 3;
+          --mdc-theme-text-primary-on-background: var(--primary-text-color);
+        }
+        mwc-list-item[disabled] {
+          --mdc-theme-text-primary-on-background: var(--disabled-text-color);
+        }
+        .header {
+          display: flex;
+          justify-content: space-between;
+        }
+        .header h2 {
+          color: var(--ha-card-header-color, --primary-text-color);
+          font-family: var(--ha-card-header-font-family, inherit);
+          font-size: var(--ha-card-header-font-size, 24px);
+          letter-spacing: -0.012em;
+          line-height: 48px;
+          padding: 12px 16px 16px;
+          display: block;
+          margin-block: 0px;
+          font-weight: normal;
+        }
+        .card-actions.right {
+          justify-content: flex-end;
+        }
+
+        .show-additional {
+          padding: 16px;
+        }
       `,
     ];
   }

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

@@ -1,15 +1,13 @@
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-card";
@@ -19,6 +17,7 @@ import {
   setHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
@@ -38,11 +37,13 @@ interface NetworkItemInput extends PaperInputElement {
 class HassioAddonNetwork extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _config?: NetworkItem[];
+  @state() private _config?: NetworkItem[];
 
   public connectedCallback(): void {
     super.connectedCallback();
@@ -55,43 +56,57 @@ class HassioAddonNetwork extends LitElement {
     }
 
     return html`
-      <ha-card header="Network">
+      <ha-card
+        .header=${this.supervisor.localize(
+          "addon.configuration.network.header"
+        )}
+      >
         <div class="card-content">
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
 
           <table>
             <tbody>
               <tr>
-                <th>Container</th>
-                <th>Host</th>
-                <th>Description</th>
+                <th>
+                  ${this.supervisor.localize(
+                    "addon.configuration.network.container"
+                  )}
+                </th>
+                <th>
+                  ${this.supervisor.localize(
+                    "addon.configuration.network.host"
+                  )}
+                </th>
+                <th>${this.supervisor.localize("common.description")}</th>
               </tr>
-              ${this._config!.map((item) => {
-                return html`
+              ${this._config!.map(
+                (item) => html`
                   <tr>
                     <td>${item.container}</td>
                     <td>
                       <paper-input
                         @value-changed=${this._configChanged}
-                        placeholder="disabled"
+                        placeholder="${this.supervisor.localize(
+                          "addon.configuration.network.disabled"
+                        )}"
                         .value=${item.host ? String(item.host) : ""}
                         .container=${item.container}
                         no-label-float
                       ></paper-input>
                     </td>
-                    <td>${item.description}</td>
+                    <td>${this._computeDescription(item)}</td>
                   </tr>
-                `;
-              })}
+                `
+              )}
             </tbody>
           </table>
         </div>
         <div class="card-actions">
           <ha-progress-button class="warning" @click=${this._resetTapped}>
-            Reset to defaults
+            ${this.supervisor.localize("common.reset_defaults")}
           </ha-progress-button>
           <ha-progress-button @click=${this._saveTapped}>
-            Save
+            ${this.supervisor.localize("common.save")}
           </ha-progress-button>
         </div>
       </ha-card>
@@ -105,16 +120,20 @@ class HassioAddonNetwork extends LitElement {
     }
   }
 
+  private _computeDescription = (item: NetworkItem): string =>
+    this.addon.translations[this.hass.language]?.network?.[item.container]
+      ?.description ||
+    this.addon.translations.en?.network?.[item.container]?.description ||
+    item.description;
+
   private _setNetworkConfig(): void {
     const network = this.addon.network || {};
     const description = this.addon.network_description || {};
-    const items: NetworkItem[] = Object.keys(network).map((key) => {
-      return {
-        container: key,
-        host: network[key],
-        description: description[key],
-      };
-    });
+    const items: NetworkItem[] = Object.keys(network).map((key) => ({
+      container: key,
+      host: network[key],
+      description: description[key],
+    }));
     this._config = items.sort((a, b) => (a.container > b.container ? 1 : -1));
   }
 
@@ -147,12 +166,14 @@ class HassioAddonNetwork extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
       if (this.addon?.state === "started") {
-        await suggestAddonRestart(this, this.hass, this.addon);
+        await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
     } catch (err) {
-      this._error = `Failed to set addon network configuration, ${extractApiErrorMessage(
-        err
-      )}`;
+      this._error = this.supervisor.localize(
+        "addon.failed_to_reset",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
 
     button.progress = false;
@@ -181,17 +202,19 @@ class HassioAddonNetwork extends LitElement {
       };
       fireEvent(this, "hass-api-called", eventdata);
       if (this.addon?.state === "started") {
-        await suggestAddonRestart(this, this.hass, this.addon);
+        await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
       }
     } catch (err) {
-      this._error = `Failed to set addon network configuration, ${extractApiErrorMessage(
-        err
-      )}`;
+      this._error = this.supervisor.localize(
+        "addon.failed_to_save",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
     button.progress = false;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,

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

@@ -1,13 +1,5 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import "../../../../src/components/ha-card";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-markdown";
 import {
@@ -19,16 +11,20 @@ import "../../../../src/layouts/hass-loading-screen";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
+import { customElement, property, state } from "lit/decorators";
 
 @customElement("hassio-addon-documentation-tab")
 class HassioAddonDocumentationDashboard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _content?: string;
+  @state() private _content?: string;
 
   public async connectedCallback(): Promise<void> {
     super.connectedCallback();
@@ -53,7 +49,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
@@ -81,9 +77,11 @@ class HassioAddonDocumentationDashboard extends LitElement {
         this.addon!.slug
       );
     } catch (err) {
-      this._error = `Failed to get addon documentation, ${extractApiErrorMessage(
-        err
-      )}`;
+      this._error = this.supervisor.localize(
+        "addon.documentation.get_logs",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
   }
 }

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

@@ -4,21 +4,22 @@ import {
   mdiInformationVariant,
   mdiMathLog,
 } from "@mdi/js";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+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 { navigate } from "../../../src/common/navigate";
+import { extractSearchParam } from "../../../src/common/url/search-params";
 import "../../../src/components/ha-circular-progress";
 import {
   fetchHassioAddonInfo,
+  fetchHassioAddonsInfo,
   HassioAddonDetails,
 } from "../../../src/data/hassio/addon";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
+import { Supervisor } from "../../../src/data/supervisor/supervisor";
+import "../../../src/layouts/hass-error-screen";
+import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-tabs-subpage";
 import type { PageNavigation } from "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
@@ -35,12 +36,16 @@ import "./log/hassio-addon-logs";
 class HassioAddonDashboard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public route!: Route;
 
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
   @property({ type: Boolean }) public narrow!: boolean;
 
+  @state() _error?: string;
+
   private _computeTail = memoizeOne((route: Route) => {
     const dividerPos = route.path.indexOf("/", 1);
     return dividerPos === -1
@@ -55,13 +60,19 @@ class HassioAddonDashboard extends LitElement {
   });
 
   protected render(): TemplateResult {
+    if (this._error) {
+      return html`<hass-error-screen
+        .error=${this._error}
+      ></hass-error-screen>`;
+    }
+
     if (!this.addon) {
-      return html`<ha-circular-progress active></ha-circular-progress>`;
+      return html`<hass-loading-screen></hass-loading-screen>`;
     }
 
     const addonTabs: PageNavigation[] = [
       {
-        name: "Info",
+        translationKey: "addon.panel.info",
         path: `/hassio/addon/${this.addon.slug}/info`,
         iconPath: mdiInformationVariant,
       },
@@ -69,7 +80,7 @@ class HassioAddonDashboard extends LitElement {
 
     if (this.addon.documentation) {
       addonTabs.push({
-        name: "Documentation",
+        translationKey: "addon.panel.documentation",
         path: `/hassio/addon/${this.addon.slug}/documentation`,
         iconPath: mdiFileDocument,
       });
@@ -78,12 +89,12 @@ class HassioAddonDashboard extends LitElement {
     if (this.addon.version) {
       addonTabs.push(
         {
-          name: "Configuration",
+          translationKey: "addon.panel.configuration",
           path: `/hassio/addon/${this.addon.slug}/config`,
           iconPath: mdiCogs,
         },
         {
-          name: "Log",
+          translationKey: "addon.panel.log",
           path: `/hassio/addon/${this.addon.slug}/logs`,
           iconPath: mdiMathLog,
         }
@@ -95,24 +106,26 @@ class HassioAddonDashboard extends LitElement {
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
+        .localizeFunc=${this.supervisor.localize}
         .narrow=${this.narrow}
         .backPath=${this.addon.version ? "/hassio/dashboard" : "/hassio/store"}
         .route=${route}
-        hassio
         .tabs=${addonTabs}
+        supervisor
       >
         <span slot="header">${this.addon.name}</span>
         <hassio-addon-router
           .route=${route}
           .narrow=${this.narrow}
           .hass=${this.hass}
+          .supervisor=${this.supervisor}
           .addon=${this.addon}
         ></hassio-addon-router>
       </hass-tabs-subpage>
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
@@ -152,30 +165,65 @@ class HassioAddonDashboard extends LitElement {
   }
 
   protected async firstUpdated(): Promise<void> {
-    await this._routeDataChanged(this.route);
+    if (this.route.path === "") {
+      const requestedAddon = extractSearchParam("addon");
+      if (requestedAddon) {
+        const addonsInfo = await fetchHassioAddonsInfo(this.hass);
+        const validAddon = addonsInfo.addons.some(
+          (addon) => addon.slug === requestedAddon
+        );
+        if (!validAddon) {
+          this._error = this.supervisor.localize("my.error_addon_not_found");
+        } else {
+          navigate(`/hassio/addon/${requestedAddon}`, { replace: true });
+        }
+      }
+    }
     this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
   }
 
   private async _apiCalled(ev): Promise<void> {
-    const path: string = ev.detail.path;
-
-    if (!path) {
+    if (!ev.detail.success) {
       return;
     }
 
+    const pathSplit: string[] = ev.detail.path?.split("/");
+
+    if (!pathSplit || pathSplit.length === 0) {
+      return;
+    }
+
+    const path: string = pathSplit[pathSplit.length - 1];
+
+    if (["uninstall", "install", "update", "start", "stop"].includes(path)) {
+      fireEvent(this, "supervisor-collection-refresh", {
+        collection: "supervisor",
+      });
+    }
+
     if (path === "uninstall") {
-      history.back();
+      window.history.back();
     } else {
-      await this._routeDataChanged(this.route);
+      await this._routeDataChanged();
     }
   }
 
-  private async _routeDataChanged(routeData: Route): Promise<void> {
-    const addon = routeData.path.split("/")[1];
+  protected updated(changedProperties) {
+    if (changedProperties.has("route") && !this.addon) {
+      this._routeDataChanged();
+    }
+  }
+
+  private async _routeDataChanged(): Promise<void> {
+    const addon = this.route.path.split("/")[1];
+    if (!addon) {
+      return;
+    }
     try {
       const addoninfo = await fetchHassioAddonInfo(this.hass, addon);
       this.addon = addoninfo;
-    } catch {
+    } catch (err) {
+      this._error = `Error fetching addon info: ${extractApiErrorMessage(err)}`;
       this.addon = undefined;
     }
   }

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

@@ -1,5 +1,6 @@
-import { customElement, property } from "lit-element";
+import { customElement, property } from "lit/decorators";
 import { HassioAddonDetails } from "../../../src/data/hassio/addon";
+import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import {
   HassRouterPage,
   RouterOptions,
@@ -17,6 +18,8 @@ class HassioAddonRouter extends HassRouterPage {
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
   protected routerOptions: RouterOptions = {
@@ -41,6 +44,7 @@ class HassioAddonRouter extends HassRouterPage {
   protected updatePageEl(el) {
     el.route = this.routeTail;
     el.hass = this.hass;
+    el.supervisor = this.supervisor;
     el.addon = this.addon;
     el.narrow = this.narrow;
   }

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

@@ -1,14 +1,8 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-circular-progress";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
@@ -20,6 +14,8 @@ class HassioAddonInfoDashboard extends LitElement {
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
   protected render(): TemplateResult {
@@ -32,13 +28,14 @@ class HassioAddonInfoDashboard extends LitElement {
         <hassio-addon-info
           .narrow=${this.narrow}
           .hass=${this.hass}
+          .supervisor=${this.supervisor}
           .addon=${this.addon}
         ></hassio-addon-info>
       </div>
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,

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

@@ -1,14 +1,8 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../../../../src/components/ha-circular-progress";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
@@ -18,6 +12,8 @@ import "./hassio-addon-logs";
 class HassioAddonLogDashboard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon?: HassioAddonDetails;
 
   protected render(): TemplateResult {
@@ -28,13 +24,14 @@ class HassioAddonLogDashboard extends LitElement {
       <div class="content">
         <hassio-addon-logs
           .hass=${this.hass}
+          .supervisor=${this.supervisor}
           .addon=${this.addon}
         ></hassio-addon-logs>
       </div>
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,

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

@@ -1,20 +1,13 @@
 import "@material/mwc-button";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import {
   fetchHassioAddonLogs,
   HassioAddonDetails,
 } from "../../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import "../../components/hassio-ansi-to-html";
@@ -24,11 +17,13 @@ import { hassioStyle } from "../../resources/hassio-style";
 class HassioAddonLogs extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _content?: string;
+  @state() private _content?: string;
 
   public async connectedCallback(): Promise<void> {
     super.connectedCallback();
@@ -48,13 +43,15 @@ class HassioAddonLogs extends LitElement {
             : ""}
         </div>
         <div class="card-actions">
-          <mwc-button @click=${this._refresh}>Refresh</mwc-button>
+          <mwc-button @click=${this._refresh}>
+            ${this.supervisor.localize("common.refresh")}
+          </mwc-button>
         </div>
       </ha-card>
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
@@ -76,7 +73,11 @@ class HassioAddonLogs extends LitElement {
     try {
       this._content = await fetchHassioAddonLogs(this.hass, this.addon.slug);
     } catch (err) {
-      this._error = `Failed to get addon logs, ${extractApiErrorMessage(err)}`;
+      this._error = this.supervisor.localize(
+        "addon.logs.get_logs",
+        "error",
+        extractApiErrorMessage(err)
+      );
     }
   }
 

hassio/src/components/hassio-ansi-to-html.ts

@@ -1,12 +1,5 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 
 interface State {
   bold: boolean;
@@ -25,7 +18,7 @@ class HassioAnsiToHtml extends LitElement {
     return html`${this._parseTextToColoredPre(this.content)}`;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       pre {
         overflow-x: auto;

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

@@ -1,13 +1,6 @@
 import { mdiHelpCircle } from "@mdi/js";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+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";
@@ -44,7 +37,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,13 +49,13 @@ class HassioCardContent extends LitElement {
             ></ha-svg-icon>
           `}
       <div>
-        <div class="title">
-          ${this.title}
-        </div>
+        <div class="title">${this.title}</div>
         <div class="addition">
           ${this.description}
-          ${/* treat as available when undefined */
-          this.available === false ? " (Not available)" : ""}
+          ${
+            /* treat as available when undefined */
+            this.available === false ? " (Not available)" : ""
+          }
           ${this.datetime
             ? html`
                 <ha-relative-time
@@ -77,7 +70,7 @@ class HassioCardContent extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-svg-icon {
         margin-right: 24px;

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

@@ -2,13 +2,8 @@ import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiFolderUpload } from "@mdi/js";
 import "@polymer/iron-input/iron-input";
 import "@polymer/paper-input/paper-input-container";
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+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";
@@ -33,9 +28,9 @@ const MAX_FILE_SIZE = 1 * 1024 * 1024 * 1024; // 1GB
 export class HassioUploadSnapshot extends LitElement {
   public hass!: HomeAssistant;
 
-  @internalProperty() public value: string | null = null;
+  @state() public value: string | null = null;
 
-  @internalProperty() private _uploading = false;
+  @state() private _uploading = false;
 
   public render(): TemplateResult {
     return html`

hassio/src/components/supervisor-formfield-label.ts

@@ -0,0 +1,54 @@
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../src/components/ha-svg-icon";
+
+@customElement("supervisor-formfield-label")
+class SupervisorFormfieldLabel extends LitElement {
+  @property({ type: String }) public label!: string;
+
+  @property({ type: String }) public imageUrl?: string;
+
+  @property({ type: String }) public iconPath?: string;
+
+  @property({ type: String }) public version?: string;
+
+  protected render(): TemplateResult {
+    return html`
+      ${this.imageUrl
+        ? html`<img loading="lazy" .src=${this.imageUrl} class="icon" />`
+        : this.iconPath
+        ? html`<ha-svg-icon .path=${this.iconPath} class="icon"></ha-svg-icon>`
+        : ""}
+      <span class="label">${this.label}</span>
+      ${this.version
+        ? html`<span class="version">(${this.version})</span>`
+        : ""}
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: flex;
+        align-items: center;
+      }
+      .label {
+        margin-right: 4px;
+      }
+      .version {
+        color: var(--secondary-text-color);
+      }
+      .icon {
+        max-height: 22px;
+        max-width: 22px;
+        margin-right: 8px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "supervisor-formfield-label": SupervisorFormfieldLabel;
+  }
+}

hassio/src/components/supervisor-metric.ts

@@ -1,13 +1,6 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import "../../../src/components/ha-bar";
 import "../../../src/components/ha-settings-row";
 import { roundWithOneDecimal } from "../../../src/util/calculate";
@@ -23,13 +16,9 @@ class SupervisorMetric extends LitElement {
   protected render(): TemplateResult {
     const roundedValue = roundWithOneDecimal(this.value);
     return html`<ha-settings-row>
-      <span slot="heading">
-        ${this.description}
-      </span>
-      <div slot="description" title="${this.tooltip ?? ""}">
-        <span class="value">
-          ${roundedValue}%
-        </span>
+      <span slot="heading"> ${this.description} </span>
+      <div slot="description" .title=${this.tooltip ?? ""}>
+        <span class="value"> ${roundedValue} % </span>
         <ha-bar
           class="${classMap({
             "target-warning": roundedValue > 50,
@@ -41,7 +30,7 @@ class SupervisorMetric extends LitElement {
     </ha-settings-row>`;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-settings-row {
         padding: 0;
@@ -73,8 +62,9 @@ class SupervisorMetric extends LitElement {
         );
       }
       .value {
-        width: 42px;
+        width: 48px;
         padding-right: 4px;
+        flex-shrink: 0;
       }
     `;
   }

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

@@ -0,0 +1,450 @@
+import { mdiFolder, mdiHomeAssistant, mdiPuzzle } from "@mdi/js";
+import { PaperInputElement } from "@polymer/paper-input/paper-input";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import { atLeastVersion } from "../../../src/common/config/version";
+import { formatDate } from "../../../src/common/datetime/format_date";
+import { formatDateTime } from "../../../src/common/datetime/format_date_time";
+import { LocalizeFunc } from "../../../src/common/translations/localize";
+import "../../../src/components/ha-checkbox";
+import "../../../src/components/ha-formfield";
+import "../../../src/components/ha-radio";
+import type { HaRadio } from "../../../src/components/ha-radio";
+import {
+  HassioFullSnapshotCreateParams,
+  HassioPartialSnapshotCreateParams,
+  HassioSnapshotDetail,
+} from "../../../src/data/hassio/snapshot";
+import { Supervisor } from "../../../src/data/supervisor/supervisor";
+import { PolymerChangedEvent } from "../../../src/polymer-types";
+import { HomeAssistant } from "../../../src/types";
+import "./supervisor-formfield-label";
+
+interface CheckboxItem {
+  slug: string;
+  checked: boolean;
+  name: string;
+}
+
+interface AddonCheckboxItem extends CheckboxItem {
+  version: string;
+}
+
+const _computeFolders = (folders): CheckboxItem[] => {
+  const list: CheckboxItem[] = [];
+  if (folders.includes("homeassistant")) {
+    list.push({
+      slug: "homeassistant",
+      name: "Home Assistant configuration",
+      checked: false,
+    });
+  }
+  if (folders.includes("ssl")) {
+    list.push({ slug: "ssl", name: "SSL", checked: false });
+  }
+  if (folders.includes("share")) {
+    list.push({ slug: "share", name: "Share", checked: false });
+  }
+  if (folders.includes("media")) {
+    list.push({ slug: "media", name: "Media", checked: false });
+  }
+  if (folders.includes("addons/local")) {
+    list.push({ slug: "addons/local", name: "Local add-ons", checked: false });
+  }
+  return list.sort((a, b) => (a.name > b.name ? 1 : -1));
+};
+
+const _computeAddons = (addons): AddonCheckboxItem[] =>
+  addons
+    .map((addon) => ({
+      slug: addon.slug,
+      name: addon.name,
+      version: addon.version,
+      checked: false,
+    }))
+    .sort((a, b) => (a.name > b.name ? 1 : -1));
+
+@customElement("supervisor-snapshot-content")
+export class SupervisorSnapshotContent extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public localize?: LocalizeFunc;
+
+  @property({ attribute: false }) public supervisor?: Supervisor;
+
+  @property({ attribute: false }) public snapshot?: HassioSnapshotDetail;
+
+  @property() public snapshotType: HassioSnapshotDetail["type"] = "full";
+
+  @property({ attribute: false }) public folders?: CheckboxItem[];
+
+  @property({ attribute: false }) public addons?: AddonCheckboxItem[];
+
+  @property({ type: Boolean }) public homeAssistant = false;
+
+  @property({ type: Boolean }) public snapshotHasPassword = false;
+
+  @property({ type: Boolean }) public onboarding = false;
+
+  @property() public snapshotName = "";
+
+  @property() public snapshotPassword = "";
+
+  @property() public confirmSnapshotPassword = "";
+
+  public willUpdate(changedProps) {
+    super.willUpdate(changedProps);
+    if (!this.hasUpdated) {
+      this.folders = _computeFolders(
+        this.snapshot
+          ? this.snapshot.folders
+          : ["homeassistant", "ssl", "share", "media", "addons/local"]
+      );
+      this.addons = _computeAddons(
+        this.snapshot
+          ? this.snapshot.addons
+          : this.supervisor?.supervisor.addons
+      );
+      this.snapshotType = this.snapshot?.type || "full";
+      this.snapshotName = this.snapshot?.name || "";
+      this.snapshotHasPassword = this.snapshot?.protected || false;
+    }
+  }
+
+  private _localize = (string: string) =>
+    this.supervisor?.localize(`snapshot.${string}`) ||
+    this.localize!(`ui.panel.page-onboarding.restore.${string}`);
+
+  protected render(): TemplateResult {
+    if (!this.onboarding && !this.supervisor) {
+      return html``;
+    }
+    const foldersSection =
+      this.snapshotType === "partial" ? this._getSection("folders") : undefined;
+    const addonsSection =
+      this.snapshotType === "partial" ? this._getSection("addons") : undefined;
+
+    return html`
+      ${this.snapshot
+        ? html`<div class="details">
+            ${this.snapshot.type === "full"
+              ? this._localize("full_snapshot")
+              : this._localize("partial_snapshot")}
+            (${Math.ceil(this.snapshot.size * 10) / 10 + " MB"})<br />
+            ${this.hass
+              ? formatDateTime(new Date(this.snapshot.date), this.hass.locale)
+              : this.snapshot.date}
+          </div>`
+        : html`<paper-input
+            name="snapshotName"
+            .label=${this.supervisor?.localize("snapshot.name") || "Name"}
+            .value=${this.snapshotName}
+            @value-changed=${this._handleTextValueChanged}
+          >
+          </paper-input>`}
+      ${!this.snapshot || this.snapshot.type === "full"
+        ? html`<div class="sub-header">
+              ${!this.snapshot
+                ? this._localize("type")
+                : this._localize("select_type")}
+            </div>
+            <div class="snapshot-types">
+              <ha-formfield .label=${this._localize("full_snapshot")}>
+                <ha-radio
+                  @change=${this._handleRadioValueChanged}
+                  value="full"
+                  name="snapshotType"
+                  .checked=${this.snapshotType === "full"}
+                >
+                </ha-radio>
+              </ha-formfield>
+              <ha-formfield .label=${this._localize("partial_snapshot")}>
+                <ha-radio
+                  @change=${this._handleRadioValueChanged}
+                  value="partial"
+                  name="snapshotType"
+                  .checked=${this.snapshotType === "partial"}
+                >
+                </ha-radio>
+              </ha-formfield>
+            </div>`
+        : ""}
+      ${this.snapshotType === "partial"
+        ? html`<div class="partial-picker">
+            ${this.snapshot && this.snapshot.homeassistant
+              ? html`
+                  <ha-formfield
+                    .label=${html`<supervisor-formfield-label
+                      label="Home Assistant"
+                      .iconPath=${mdiHomeAssistant}
+                      .version=${this.snapshot.homeassistant}
+                    >
+                    </supervisor-formfield-label>`}
+                  >
+                    <ha-checkbox
+                      .checked=${this.homeAssistant}
+                      @click=${() => {
+                        this.homeAssistant = !this.homeAssistant;
+                      }}
+                    >
+                    </ha-checkbox>
+                  </ha-formfield>
+                `
+              : ""}
+            ${foldersSection?.templates.length
+              ? html`
+                  <ha-formfield
+                    .label=${html`<supervisor-formfield-label
+                      .label=${this._localize("folders")}
+                      .iconPath=${mdiFolder}
+                    >
+                    </supervisor-formfield-label>`}
+                  >
+                    <ha-checkbox
+                      @change=${this._toggleSection}
+                      .checked=${foldersSection.checked}
+                      .indeterminate=${foldersSection.indeterminate}
+                      .section=${"folders"}
+                    >
+                    </ha-checkbox>
+                  </ha-formfield>
+                  <div class="section-content">${foldersSection.templates}</div>
+                `
+              : ""}
+            ${addonsSection?.templates.length
+              ? html`
+                  <ha-formfield
+                    .label=${html`<supervisor-formfield-label
+                      .label=${this._localize("addons")}
+                      .iconPath=${mdiPuzzle}
+                    >
+                    </supervisor-formfield-label>`}
+                  >
+                    <ha-checkbox
+                      @change=${this._toggleSection}
+                      .checked=${addonsSection.checked}
+                      .indeterminate=${addonsSection.indeterminate}
+                      .section=${"addons"}
+                    >
+                    </ha-checkbox>
+                  </ha-formfield>
+                  <div class="section-content">${addonsSection.templates}</div>
+                `
+              : ""}
+          </div> `
+        : ""}
+      ${this.snapshotType === "partial" &&
+      (!this.snapshot || this.snapshotHasPassword)
+        ? html`<hr />`
+        : ""}
+      ${!this.snapshot
+        ? html`<ha-formfield
+            class="password"
+            .label=${this._localize("password_protection")}
+          >
+            <ha-checkbox
+              .checked=${this.snapshotHasPassword}
+              @change=${this._toggleHasPassword}
+            >
+            </ha-checkbox>
+          </ha-formfield>`
+        : ""}
+      ${this.snapshotHasPassword
+        ? html`
+            <paper-input
+              .label=${this._localize("password")}
+              type="password"
+              name="snapshotPassword"
+              .value=${this.snapshotPassword}
+              @value-changed=${this._handleTextValueChanged}
+            >
+            </paper-input>
+            ${!this.snapshot
+              ? html` <paper-input
+                  .label=${this.supervisor?.localize("confirm_password")}
+                  type="password"
+                  name="confirmSnapshotPassword"
+                  .value=${this.confirmSnapshotPassword}
+                  @value-changed=${this._handleTextValueChanged}
+                >
+                </paper-input>`
+              : ""}
+          `
+        : ""}
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .partial-picker ha-formfield {
+        display: block;
+      }
+      .partial-picker ha-checkbox {
+        --mdc-checkbox-touch-target-size: 32px;
+      }
+      .partial-picker {
+        display: block;
+        margin: 0px -6px;
+      }
+      supervisor-formfield-label {
+        display: inline-flex;
+        align-items: center;
+      }
+      hr {
+        border-color: var(--divider-color);
+        border-bottom: none;
+        margin: 16px 0;
+      }
+      .details {
+        color: var(--secondary-text-color);
+      }
+      .section-content {
+        display: flex;
+        flex-direction: column;
+        margin-left: 30px;
+      }
+      ha-formfield.password {
+        display: block;
+        margin: 0 -14px -16px;
+      }
+      .snapshot-types {
+        display: flex;
+        margin-left: -13px;
+      }
+      .sub-header {
+        margin-top: 8px;
+      }
+    `;
+  }
+
+  public snapshotDetails():
+    | HassioPartialSnapshotCreateParams
+    | HassioFullSnapshotCreateParams {
+    const data: any = {};
+
+    if (!this.snapshot) {
+      data.name = this.snapshotName || formatDate(new Date(), this.hass.locale);
+    }
+
+    if (this.snapshotHasPassword) {
+      data.password = this.snapshotPassword;
+      if (!this.snapshot) {
+        data.confirm_password = this.confirmSnapshotPassword;
+      }
+    }
+
+    if (this.snapshotType === "full") {
+      return data;
+    }
+
+    const addons = this.addons
+      ?.filter((addon) => addon.checked)
+      .map((addon) => addon.slug);
+    const folders = this.folders
+      ?.filter((folder) => folder.checked)
+      .map((folder) => folder.slug);
+
+    if (addons?.length) {
+      data.addons = addons;
+    }
+    if (folders?.length) {
+      data.folders = folders;
+    }
+    if (this.homeAssistant) {
+      data.homeassistant = this.homeAssistant;
+    }
+
+    return data;
+  }
+
+  private _getSection(section: string) {
+    const templates: TemplateResult[] = [];
+    const addons =
+      section === "addons"
+        ? new Map(
+            this.supervisor?.addon.addons.map((item) => [item.slug, item])
+          )
+        : undefined;
+    let checkedItems = 0;
+    this[section].forEach((item) => {
+      templates.push(html`<ha-formfield
+        .label=${html`<supervisor-formfield-label
+          .label=${item.name}
+          .iconPath=${section === "addons" ? mdiPuzzle : mdiFolder}
+          .imageUrl=${section === "addons" &&
+          !this.onboarding &&
+          atLeastVersion(this.hass.config.version, 0, 105) &&
+          addons?.get(item.slug)?.icon
+            ? `/api/hassio/addons/${item.slug}/icon`
+            : undefined}
+          .version=${item.version}
+        >
+        </supervisor-formfield-label>`}
+      >
+        <ha-checkbox
+          .item=${item}
+          .checked=${item.checked}
+          .section=${section}
+          @change=${this._updateSectionEntry}
+        >
+        </ha-checkbox>
+      </ha-formfield>`);
+
+      if (item.checked) {
+        checkedItems++;
+      }
+    });
+
+    const checked = checkedItems === this[section].length;
+
+    return {
+      templates,
+      checked,
+      indeterminate: !checked && checkedItems !== 0,
+    };
+  }
+
+  private _handleRadioValueChanged(ev: CustomEvent) {
+    const input = ev.currentTarget as HaRadio;
+    this[input.name] = input.value;
+  }
+
+  private _handleTextValueChanged(ev: PolymerChangedEvent<string>) {
+    const input = ev.currentTarget as PaperInputElement;
+    this[input.name!] = ev.detail.value;
+  }
+
+  private _toggleHasPassword(): void {
+    this.snapshotHasPassword = !this.snapshotHasPassword;
+  }
+
+  private _toggleSection(ev): void {
+    const section = ev.currentTarget.section;
+
+    this[section] = (section === "addons" ? this.addons : this.folders)!.map(
+      (item) => ({
+        ...item,
+        checked: ev.currentTarget.checked,
+      })
+    );
+  }
+
+  private _updateSectionEntry(ev): void {
+    const item = ev.currentTarget.item;
+    const section = ev.currentTarget.section;
+    this[section] = this[section].map((entry) =>
+      entry.slug === item.slug
+        ? {
+            ...entry,
+            checked: ev.currentTarget.checked,
+          }
+        : entry
+    );
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "supervisor-snapshot-content": SupervisorSnapshotContent;
+  }
+}

hassio/src/dashboard/hassio-addons.ts

@@ -1,13 +1,6 @@
 import { mdiArrowUpBoldCircle, mdiPuzzle } from "@mdi/js";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+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 { compare } from "../../../src/common/string/compare";
@@ -27,17 +20,15 @@ class HassioAddons extends LitElement {
   protected render(): TemplateResult {
     return html`
       <div class="content">
-        <h1>Add-ons</h1>
+        <h1>${this.supervisor.localize("dashboard.addons")}</h1>
         <div class="card-group">
           ${!this.supervisor.supervisor.addons?.length
             ? html`
                 <ha-card>
                   <div class="card-content">
-                    You don't have any add-ons installed yet. Head over to
                     <button class="link" @click=${this._openStore}>
-                      the add-on store
+                      ${this.supervisor.localize("dashboard.no_addons")}
                     </button>
-                    to get started!
                   </div>
                 </ha-card>
               `
@@ -58,10 +49,16 @@ class HassioAddons extends LitElement {
                             ? mdiArrowUpBoldCircle
                             : mdiPuzzle}
                           .iconTitle=${addon.state !== "started"
-                            ? "Add-on is stopped"
+                            ? this.supervisor.localize(
+                                "dashboard.addon_stopped"
+                              )
                             : addon.update_available!
-                            ? "New version available"
-                            : "Add-on is running"}
+                            ? this.supervisor.localize(
+                                "dashboard.addon_new_version"
+                              )
+                            : this.supervisor.localize(
+                                "dashboard.addon_running"
+                              )}
                           .iconClass=${addon.update_available
                             ? addon.state === "started"
                               ? "update"
@@ -86,7 +83,7 @@ class HassioAddons extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
@@ -99,11 +96,11 @@ class HassioAddons extends LitElement {
   }
 
   private _addonTapped(ev: any): void {
-    navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}/info`);
+    navigate(`/hassio/addon/${ev.currentTarget.addon.slug}/info`);
   }
 
   private _openStore(): void {
-    navigate(this, "/hassio/store");
+    navigate("/hassio/store");
   }
 }
 

hassio/src/dashboard/hassio-dashboard.ts

@@ -1,12 +1,5 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
@@ -29,13 +22,16 @@ class HassioDashboard extends LitElement {
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
+        .localizeFunc=${this.supervisor.localize}
         .narrow=${this.narrow}
-        hassio
-        main-page
         .route=${this.route}
         .tabs=${supervisorTabs}
+        main-page
+        supervisor
       >
-        <span slot="header">Dashboard</span>
+        <span slot="header">
+          ${this.supervisor.localize("panel.dashboard")}
+        </span>
         <div class="content">
           <hassio-update
             .hass=${this.hass}
@@ -50,7 +46,7 @@ class HassioDashboard extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`

hassio/src/dashboard/hassio-update.ts

@@ -1,48 +1,53 @@
 import "@material/mwc-button";
 import { mdiHomeAssistant } from "@mdi/js";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { atLeastVersion } from "../../../src/common/config/version";
+import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-card";
+import "../../../src/components/ha-settings-row";
 import "../../../src/components/ha-svg-icon";
 import {
   extractApiErrorMessage,
   HassioResponse,
-  ignoredStatusCodes,
+  ignoreSupervisorError,
 } from "../../../src/data/hassio/common";
 import { HassioHassOSInfo } from "../../../src/data/hassio/host";
 import {
   HassioHomeAssistantInfo,
   HassioSupervisorInfo,
 } from "../../../src/data/hassio/supervisor";
-import { Supervisor } from "../../../src/data/supervisor/supervisor";
+import { updateCore } from "../../../src/data/supervisor/core";
+import {
+  Supervisor,
+  supervisorApiWsRequest,
+} from "../../../src/data/supervisor/supervisor";
 import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../../src/dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
+import { showDialogSupervisorUpdate } from "../dialogs/update/show-dialog-update";
 import { hassioStyle } from "../resources/hassio-style";
 
+const computeVersion = (key: string, version: string): string =>
+  key === "os" ? version : `${key}-${version}`;
+
 @customElement("hassio-update")
 export class HassioUpdate extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  private _pendingUpdates = memoizeOne((supervisor: Supervisor): number => {
-    return Object.keys(supervisor).filter(
-      (value) => supervisor[value].update_available
-    ).length;
-  });
+  private _pendingUpdates = memoizeOne(
+    (supervisor: Supervisor): number =>
+      Object.keys(supervisor).filter(
+        (value) => supervisor[value].update_available
+      ).length
+  );
 
   protected render(): TemplateResult {
     if (!this.supervisor) {
@@ -57,13 +62,17 @@ export class HassioUpdate extends LitElement {
     return html`
       <div class="content">
         <h1>
-          ${updatesAvailable > 1
-            ? "Updates Available 🎉"
-            : "Update Available 🎉"}
+          ${this.supervisor.localize(
+            "common.update_available",
+            "count",
+            updatesAvailable
+          )}
+          🎉
         </h1>
         <div class="card-group">
           ${this._renderUpdateCard(
             "Home Assistant Core",
+            "core",
             this.supervisor.core,
             "hassio/homeassistant/update",
             `https://${
@@ -72,6 +81,7 @@ export class HassioUpdate extends LitElement {
           )}
           ${this._renderUpdateCard(
             "Supervisor",
+            "supervisor",
             this.supervisor.supervisor,
             "hassio/supervisor/update",
             `https://github.com//home-assistant/hassio/releases/tag/${this.supervisor.supervisor.version_latest}`
@@ -79,6 +89,7 @@ export class HassioUpdate extends LitElement {
           ${this.supervisor.host.features.includes("hassos")
             ? this._renderUpdateCard(
                 "Operating System",
+                "os",
                 this.supervisor.os,
                 "hassio/os/update",
                 `https://github.com//home-assistant/hassos/releases/tag/${this.supervisor.os.version_latest}`
@@ -91,6 +102,7 @@ export class HassioUpdate extends LitElement {
 
   private _renderUpdateCard(
     name: string,
+    key: string,
     object: HassioHomeAssistantInfo | HassioSupervisorInfo | HassioHassOSInfo,
     apiPath: string,
     releaseNotesUrl: string
@@ -104,22 +116,39 @@ export class HassioUpdate extends LitElement {
           <div class="icon">
             <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
           </div>
-          <div class="update-heading">${name} ${object.version_latest}</div>
-          <div class="warning">
-            You are currently running version ${object.version}
-          </div>
+          <div class="update-heading">${name}</div>
+          <ha-settings-row two-line>
+            <span slot="heading">
+              ${this.supervisor.localize("common.version")}
+            </span>
+            <span slot="description">
+              ${computeVersion(key, object.version!)}
+            </span>
+          </ha-settings-row>
+
+          <ha-settings-row two-line>
+            <span slot="heading">
+              ${this.supervisor.localize("common.newest_version")}
+            </span>
+            <span slot="description">
+              ${computeVersion(key, object.version_latest!)}
+            </span>
+          </ha-settings-row>
         </div>
         <div class="card-actions">
           <a href="${releaseNotesUrl}" target="_blank" rel="noreferrer">
-            <mwc-button>Release notes</mwc-button>
+            <mwc-button>
+              ${this.supervisor.localize("common.release_notes")}
+            </mwc-button>
           </a>
           <ha-progress-button
             .apiPath=${apiPath}
             .name=${name}
+            .key=${key}
             .version=${object.version_latest}
             @click=${this._confirmUpdate}
           >
-            Update
+            ${this.supervisor.localize("common.update")}
           </ha-progress-button>
         </div>
       </ha-card>
@@ -128,12 +157,36 @@ export class HassioUpdate extends LitElement {
 
   private async _confirmUpdate(ev): Promise<void> {
     const item = ev.currentTarget;
+    if (item.key === "core") {
+      showDialogSupervisorUpdate(this, {
+        supervisor: this.supervisor,
+        name: "Home Assistant Core",
+        version: this.supervisor.core.version_latest,
+        snapshotParams: {
+          name: `core_${this.supervisor.core.version}`,
+          folders: ["homeassistant"],
+          homeassistant: true,
+        },
+        updateHandler: async () => this._updateCore(),
+      });
+      return;
+    }
     item.progress = true;
     const confirmed = await showConfirmationDialog(this, {
-      title: `Update ${item.name}`,
-      text: `Are you sure you want to update ${item.name} to version ${item.version}?`,
-      confirmText: "update",
-      dismissText: "cancel",
+      title: this.supervisor.localize(
+        "confirm.update.title",
+        "name",
+        item.name
+      ),
+      text: this.supervisor.localize(
+        "confirm.update.text",
+        "name",
+        item.name,
+        "version",
+        computeVersion(item.key, item.version)
+      ),
+      confirmText: this.supervisor.localize("common.update"),
+      dismissText: this.supervisor.localize("common.cancel"),
     });
 
     if (!confirmed) {
@@ -141,13 +194,24 @@ export class HassioUpdate extends LitElement {
       return;
     }
     try {
-      await this.hass.callApi<HassioResponse<void>>("POST", item.apiPath);
+      if (atLeastVersion(this.hass.config.version, 2021, 2, 4)) {
+        await supervisorApiWsRequest(this.hass.connection, {
+          method: "post",
+          endpoint: item.apiPath.replace("hassio", ""),
+          timeout: null,
+        });
+      } else {
+        await this.hass.callApi<HassioResponse<void>>("POST", item.apiPath);
+      }
+      fireEvent(this, "supervisor-collection-refresh", {
+        collection: item.key,
+      });
     } catch (err) {
       // Only show an error if the status code was not expected (user behind proxy)
       // or no status at all(connection terminated)
-      if (err.status_code && !ignoredStatusCodes.has(err.status_code)) {
+      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
         showAlertDialog(this, {
-          title: "Update failed",
+          title: this.supervisor.localize("common.error.update_failed"),
           text: extractApiErrorMessage(err),
         });
       }
@@ -155,7 +219,33 @@ export class HassioUpdate extends LitElement {
     item.progress = false;
   }
 
-  static get styles(): CSSResult[] {
+  private async _updateCore(): Promise<void> {
+    try {
+      await updateCore(this.hass);
+    } catch (err) {
+      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
+        showAlertDialog(this, {
+          title: this.supervisor.localize(
+            "common.failed_to_update_name",
+            "name",
+            "Home Assistant Core"
+          ),
+          text: extractApiErrorMessage(err),
+        });
+        return;
+      }
+    }
+
+    fireEvent(this, "supervisor-collection-refresh", {
+      collection: "core",
+    });
+    fireEvent(this, "supervisor-applying-update", {
+      name: "Home Assistant Core",
+      version: this.supervisor.core.version_latest,
+    });
+  }
+
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
@@ -172,9 +262,6 @@ export class HassioUpdate extends LitElement {
           margin-bottom: 0.5em;
           color: var(--primary-text-color);
         }
-        .warning {
-          color: var(--secondary-text-color);
-        }
         .card-content {
           height: calc(100% - 47px);
           box-sizing: border-box;
@@ -182,13 +269,13 @@ export class HassioUpdate extends LitElement {
         .card-actions {
           text-align: right;
         }
-        .errors {
-          color: var(--error-color);
-          padding: 16px;
-        }
         a {
           text-decoration: none;
         }
+        ha-settings-row {
+          padding: 0;
+          --paper-item-body-two-line-min-height: 32px;
+        }
       `,
     ];
   }

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

@@ -0,0 +1,194 @@
+import { mdiClose } from "@mdi/js";
+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/common/search/search-input";
+import { compare } from "../../../../src/common/string/compare";
+import "../../../../src/components/ha-dialog";
+import "../../../../src/components/ha-expansion-panel";
+import { HassioHardwareInfo } from "../../../../src/data/hassio/hardware";
+import { dump } from "../../../../src/resources/js-yaml-dump";
+import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
+import { HomeAssistant } from "../../../../src/types";
+import { HassioHardwareDialogParams } from "./show-dialog-hassio-hardware";
+
+const _filterDevices = memoizeOne(
+  (showAdvanced: boolean, hardware: HassioHardwareInfo, filter: string) =>
+    hardware.devices
+      .filter(
+        (device) =>
+          (showAdvanced ||
+            ["tty", "gpio", "input"].includes(device.subsystem)) &&
+          (device.by_id?.toLowerCase().includes(filter) ||
+            device.name.toLowerCase().includes(filter) ||
+            device.dev_path.toLocaleLowerCase().includes(filter) ||
+            JSON.stringify(device.attributes)
+              .toLocaleLowerCase()
+              .includes(filter))
+      )
+      .sort((a, b) => compare(a.name, b.name))
+);
+
+@customElement("dialog-hassio-hardware")
+class HassioHardwareDialog extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _dialogParams?: HassioHardwareDialogParams;
+
+  @state() private _filter?: string;
+
+  public showDialog(params: HassioHardwareDialogParams) {
+    this._dialogParams = params;
+  }
+
+  public closeDialog() {
+    this._dialogParams = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render(): TemplateResult {
+    if (!this._dialogParams) {
+      return html``;
+    }
+
+    const devices = _filterDevices(
+      this.hass.userData?.showAdvanced || false,
+      this._dialogParams.hardware,
+      (this._filter || "").toLowerCase()
+    );
+
+    return html`
+      <ha-dialog
+        open
+        scrimClickAction
+        hideActions
+        @closed=${this.closeDialog}
+        .heading=${true}
+      >
+        <div class="header" slot="heading">
+          <h2>
+            ${this._dialogParams.supervisor.localize("dialog.hardware.title")}
+          </h2>
+          <mwc-icon-button dialogAction="close">
+            <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+          </mwc-icon-button>
+          <search-input
+            autofocus
+            no-label-float
+            .filter=${this._filter}
+            @value-changed=${this._handleSearchChange}
+            .label=${this._dialogParams.supervisor.localize(
+              "dialog.hardware.search"
+            )}
+          >
+          </search-input>
+        </div>
+
+        ${devices.map(
+          (device) =>
+            html`<ha-expansion-panel
+              .header=${device.name}
+              .secondary=${device.by_id || undefined}
+              outlined
+            >
+              <div class="device-property">
+                <span>
+                  ${this._dialogParams!.supervisor.localize(
+                    "dialog.hardware.subsystem"
+                  )}:
+                </span>
+                <span>${device.subsystem}</span>
+              </div>
+              <div class="device-property">
+                <span>
+                  ${this._dialogParams!.supervisor.localize(
+                    "dialog.hardware.device_path"
+                  )}:
+                </span>
+                <code>${device.dev_path}</code>
+              </div>
+              ${device.by_id
+                ? html` <div class="device-property">
+                    <span>
+                      ${this._dialogParams!.supervisor.localize(
+                        "dialog.hardware.id"
+                      )}:
+                    </span>
+                    <code>${device.by_id}</code>
+                  </div>`
+                : ""}
+              <div class="attributes">
+                <span>
+                  ${this._dialogParams!.supervisor.localize(
+                    "dialog.hardware.attributes"
+                  )}:
+                </span>
+                <pre>${dump(device.attributes, { indent: 2 })}</pre>
+              </div>
+            </ha-expansion-panel>`
+        )}
+      </ha-dialog>
+    `;
+  }
+
+  private _handleSearchChange(ev: CustomEvent) {
+    this._filter = ev.detail.value;
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      haStyleDialog,
+      css`
+        mwc-icon-button {
+          position: absolute;
+          right: 16px;
+          top: 10px;
+          text-decoration: none;
+          color: var(--primary-text-color);
+        }
+        h2 {
+          margin: 18px 42px 0 18px;
+          color: var(--primary-text-color);
+        }
+
+        ha-expansion-panel {
+          margin: 4px 0;
+        }
+        pre,
+        code {
+          background-color: var(--markdown-code-background-color, none);
+          border-radius: 3px;
+        }
+        pre {
+          padding: 16px;
+          overflow: auto;
+          line-height: 1.45;
+          font-family: var(--code-font-family, monospace);
+        }
+        code {
+          font-size: 85%;
+          padding: 0.2em 0.4em;
+        }
+        search-input {
+          margin: 0 16px;
+          display: block;
+        }
+        .device-property {
+          display: flex;
+          justify-content: space-between;
+        }
+        .attributes {
+          margin-top: 12px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-hassio-hardware": HassioHardwareDialog;
+  }
+}

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

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

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

@@ -1,13 +1,5 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-markdown";
 import { haStyleDialog } from "../../../../src/resources/styles";
@@ -23,7 +15,7 @@ class HassioMarkdownDialog extends LitElement {
 
   @property() public content!: string;
 
-  @internalProperty() private _opened = false;
+  @state() private _opened = false;
 
   public showDialog(params: HassioMarkdownDialogParams) {
     this.title = params.title;
@@ -50,7 +42,7 @@ class HassioMarkdownDialog extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       hassioStyle,

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

@@ -6,19 +6,10 @@ import "@material/mwc-tab";
 import "@material/mwc-tab-bar";
 import { mdiClose } from "@mdi/js";
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { cache } from "lit-html/directives/cache";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { cache } from "lit/directives/cache";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-chips";
 import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-expansion-panel";
@@ -35,6 +26,7 @@ import {
   updateNetworkInterface,
   WifiConfiguration,
 } from "../../../../src/data/hassio/network";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import {
   showAlertDialog,
   showConfirmationDialog,
@@ -47,35 +39,39 @@ import { HassioNetworkDialogParams } from "./show-dialog-network";
 const IP_VERSIONS = ["ipv4", "ipv6"];
 
 @customElement("dialog-hassio-network")
-export class DialogHassioNetwork extends LitElement
+export class DialogHassioNetwork
+  extends LitElement
   implements HassDialog<HassioNetworkDialogParams> {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _accessPoints?: AccessPoints;
+  @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @internalProperty() private _curTabIndex = 0;
+  @state() private _accessPoints?: AccessPoints;
 
-  @internalProperty() private _dirty = false;
+  @state() private _curTabIndex = 0;
 
-  @internalProperty() private _interface?: NetworkInterface;
+  @state() private _dirty = false;
 
-  @internalProperty() private _interfaces!: NetworkInterface[];
+  @state() private _interface?: NetworkInterface;
 
-  @internalProperty() private _params?: HassioNetworkDialogParams;
+  @state() private _interfaces!: NetworkInterface[];
 
-  @internalProperty() private _processing = false;
+  @state() private _params?: HassioNetworkDialogParams;
 
-  @internalProperty() private _scanning = false;
+  @state() private _processing = false;
 
-  @internalProperty() private _wifiConfiguration?: WifiConfiguration;
+  @state() private _scanning = false;
+
+  @state() private _wifiConfiguration?: WifiConfiguration;
 
   public async showDialog(params: HassioNetworkDialogParams): Promise<void> {
     this._params = params;
     this._dirty = false;
     this._curTabIndex = 0;
-    this._interfaces = params.network.interfaces.sort((a, b) => {
-      return a.primary > b.primary ? -1 : 1;
-    });
+    this.supervisor = params.supervisor;
+    this._interfaces = params.supervisor.network.interfaces.sort((a, b) =>
+      a.primary > b.primary ? -1 : 1
+    );
     this._interface = { ...this._interfaces[this._curTabIndex] };
 
     await this.updateComplete;
@@ -104,7 +100,7 @@ export class DialogHassioNetwork extends LitElement
         <div slot="heading">
           <ha-header-bar>
             <span slot="title">
-              Network settings
+              ${this.supervisor.localize("dialog.network.title")}
             </span>
             <mwc-icon-button slot="actionItems" dialogAction="cancel">
               <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
@@ -139,7 +135,13 @@ export class DialogHassioNetwork extends LitElement
           ? html`
               <ha-expansion-panel header="Wi-Fi" outlined>
                 ${this._interface?.wifi?.ssid
-                  ? html`<p>Connected to: ${this._interface?.wifi?.ssid}</p>`
+                  ? html`<p>
+                      ${this.supervisor.localize(
+                        "dialog.network.connected_to",
+                        "ssid",
+                        this._interface?.wifi?.ssid
+                      )}
+                    </p>`
                   : ""}
                 <mwc-button
                   class="scan"
@@ -149,7 +151,7 @@ export class DialogHassioNetwork extends LitElement
                   ${this._scanning
                     ? html`<ha-circular-progress active size="small">
                       </ha-circular-progress>`
-                    : "Scan for accesspoints"}
+                    : this.supervisor.localize("dialog.network.scan_ap")}
                 </mwc-button>
                 ${this._accessPoints &&
                 this._accessPoints.accesspoints &&
@@ -181,7 +183,11 @@ export class DialogHassioNetwork extends LitElement
                 ${this._wifiConfiguration
                   ? html`
                       <div class="radio-row">
-                        <ha-formfield label="open">
+                        <ha-formfield
+                          .label=${this.supervisor.localize(
+                            "dialog.network.open"
+                          )}
+                        >
                           <ha-radio
                             @change=${this._handleRadioValueChangedAp}
                             .ap=${this._wifiConfiguration}
@@ -193,7 +199,11 @@ export class DialogHassioNetwork extends LitElement
                           >
                           </ha-radio>
                         </ha-formfield>
-                        <ha-formfield label="wep">
+                        <ha-formfield
+                          .label=${this.supervisor.localize(
+                            "dialog.network.wep"
+                          )}
+                        >
                           <ha-radio
                             @change=${this._handleRadioValueChangedAp}
                             .ap=${this._wifiConfiguration}
@@ -203,7 +213,11 @@ export class DialogHassioNetwork extends LitElement
                           >
                           </ha-radio>
                         </ha-formfield>
-                        <ha-formfield label="wpa-psk">
+                        <ha-formfield
+                          .label=${this.supervisor.localize(
+                            "dialog.network.wpa"
+                          )}
+                        >
                           <ha-radio
                             @change=${this._handleRadioValueChangedAp}
                             .ap=${this._wifiConfiguration}
@@ -237,18 +251,21 @@ export class DialogHassioNetwork extends LitElement
           : ""}
         ${this._dirty
           ? html`<div class="warning">
-              If you are changing the Wi-Fi, IP or gateway addresses, you might
-              lose the connection!
+              ${this.supervisor.localize("dialog.network.warning")}
             </div>`
           : ""}
       </div>
       <div class="buttons">
-        <mwc-button label="close" @click=${this.closeDialog}> </mwc-button>
+        <mwc-button
+          .label=${this.supervisor.localize("common.cancel")}
+          @click=${this.closeDialog}
+        >
+        </mwc-button>
         <mwc-button @click=${this._updateNetwork} .disabled=${!this._dirty}>
           ${this._processing
             ? html`<ha-circular-progress active size="small">
               </ha-circular-progress>`
-            : "Save"}
+            : this.supervisor.localize("common.save")}
         </mwc-button>
       </div>`;
   }
@@ -285,7 +302,9 @@ export class DialogHassioNetwork extends LitElement
         outlined
       >
         <div class="radio-row">
-          <ha-formfield label="DHCP">
+          <ha-formfield
+            .label=${this.supervisor.localize("dialog.network.dhcp")}
+          >
             <ha-radio
               @change=${this._handleRadioValueChanged}
               .version=${version}
@@ -295,7 +314,9 @@ export class DialogHassioNetwork extends LitElement
             >
             </ha-radio>
           </ha-formfield>
-          <ha-formfield label="Static">
+          <ha-formfield
+            .label=${this.supervisor.localize("dialog.network.static")}
+          >
             <ha-radio
               @change=${this._handleRadioValueChanged}
               .version=${version}
@@ -305,7 +326,10 @@ export class DialogHassioNetwork extends LitElement
             >
             </ha-radio>
           </ha-formfield>
-          <ha-formfield label="Disabled" class="warning">
+          <ha-formfield
+            .label=${this.supervisor.localize("dialog.network.disabled")}
+            class="warning"
+          >
             <ha-radio
               @change=${this._handleRadioValueChanged}
               .version=${version}
@@ -321,7 +345,7 @@ export class DialogHassioNetwork extends LitElement
               <paper-input
                 class="flex-auto"
                 id="address"
-                label="IP address/Netmask"
+                .label=${this.supervisor.localize("dialog.network.ip_netmask")}
                 .version=${version}
                 .value=${this._toString(this._interface![version].address)}
                 @value-changed=${this._handleInputValueChanged}
@@ -330,7 +354,7 @@ export class DialogHassioNetwork extends LitElement
               <paper-input
                 class="flex-auto"
                 id="gateway"
-                label="Gateway address"
+                .label=${this.supervisor.localize("dialog.network.gateway")}
                 .version=${version}
                 .value=${this._interface![version].gateway}
                 @value-changed=${this._handleInputValueChanged}
@@ -339,7 +363,7 @@ export class DialogHassioNetwork extends LitElement
               <paper-input
                 class="flex-auto"
                 id="nameservers"
-                label="DNS servers"
+                .label=${this.supervisor.localize("dialog.network.dns_servers")}
                 .version=${version}
                 .value=${this._toString(this._interface![version].nameservers)}
                 @value-changed=${this._handleInputValueChanged}
@@ -424,7 +448,7 @@ export class DialogHassioNetwork extends LitElement
       );
     } catch (err) {
       showAlertDialog(this, {
-        title: "Failed to change network settings",
+        title: this.supervisor.localize("dialog.network.failed_to_change"),
         text: extractApiErrorMessage(err),
       });
       this._processing = false;
@@ -437,10 +461,9 @@ export class DialogHassioNetwork extends LitElement
   private async _handleTabActivated(ev: CustomEvent): Promise<void> {
     if (this._dirty) {
       const confirm = await showConfirmationDialog(this, {
-        text:
-          "You have unsaved changes, these will get lost if you change tabs, do you want to continue?",
-        confirmText: "yes",
-        dismissText: "no",
+        text: this.supervisor.localize("dialog.network.unsaved"),
+        confirmText: this.supervisor.localize("common.yes"),
+        dismissText: this.supervisor.localize("common.no"),
       });
       if (!confirm) {
         this.requestUpdate("_interface");
@@ -512,7 +535,7 @@ export class DialogHassioNetwork extends LitElement
     this._wifiConfiguration![id] = value;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`

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

@@ -1,9 +1,9 @@
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import { NetworkInfo } from "../../../../src/data/hassio/network";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import "./dialog-hassio-network";
 
 export interface HassioNetworkDialogParams {
-  network: NetworkInfo;
+  supervisor: Supervisor;
   loadData: () => Promise<void>;
 }
 

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

@@ -3,16 +3,8 @@ 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";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+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";
@@ -22,41 +14,45 @@ import {
   fetchHassioDockerRegistries,
   removeHassioDockerRegistry,
 } from "../../../../src/data/hassio/docker";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { showAlertDialog } from "../../../../src/dialogs/generic/show-dialog-box";
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
+import { RegistriesDialogParams } from "./show-dialog-registries";
 
 @customElement("dialog-hassio-registries")
 class HassioRegistriesDialog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property({ attribute: false }) private _registries?: {
     registry: string;
     username: string;
   }[];
 
-  @internalProperty() private _registry?: string;
+  @state() private _registry?: string;
 
-  @internalProperty() private _username?: string;
+  @state() private _username?: string;
 
-  @internalProperty() private _password?: string;
+  @state() private _password?: string;
 
-  @internalProperty() private _opened = false;
+  @state() private _opened = false;
 
-  @internalProperty() private _addingRegistry = false;
+  @state() private _addingRegistry = false;
 
   protected render(): TemplateResult {
     return html`
       <ha-dialog
         .open=${this._opened}
-        @closing=${this.closeDialog}
+        @closed=${this.closeDialog}
         scrimClickAction
         escapeKeyAction
         .heading=${createCloseHeading(
           this.hass,
           this._addingRegistry
-            ? "Add New Docker Registry"
-            : "Manage Docker Registries"
+            ? this.supervisor.localize("dialog.registries.title_add")
+            : this.supervisor.localize("dialog.registries.title_manage")
         )}
       >
         <div class="form">
@@ -66,7 +62,9 @@ class HassioRegistriesDialog extends LitElement {
                   @value-changed=${this._inputChanged}
                   class="flex-auto"
                   name="registry"
-                  label="Registry"
+                  .label=${this.supervisor.localize(
+                    "dialog.registries.registry"
+                  )}
                   required
                   auto-validate
                 ></paper-input>
@@ -74,7 +72,9 @@ class HassioRegistriesDialog extends LitElement {
                   @value-changed=${this._inputChanged}
                   class="flex-auto"
                   name="username"
-                  label="Username"
+                  .label=${this.supervisor.localize(
+                    "dialog.registries.username"
+                  )}
                   required
                   auto-validate
                 ></paper-input>
@@ -82,7 +82,9 @@ class HassioRegistriesDialog extends LitElement {
                   @value-changed=${this._inputChanged}
                   class="flex-auto"
                   name="password"
-                  label="Password"
+                  .label=${this.supervisor.localize(
+                    "dialog.registries.password"
+                  )}
                   type="password"
                   required
                   auto-validate
@@ -94,35 +96,46 @@ class HassioRegistriesDialog extends LitElement {
                   )}
                   @click=${this._addNewRegistry}
                 >
-                  Add registry
+                  ${this.supervisor.localize("dialog.registries.add_registry")}
                 </mwc-button>
               `
             : html`${this._registries?.length
-                  ? this._registries.map((entry) => {
-                      return html`
+                  ? this._registries.map(
+                      (entry) => html`
                         <mwc-list-item class="option" hasMeta twoline>
                           <span>${entry.registry}</span>
                           <span slot="secondary"
-                            >Username: ${entry.username}</span
+                            >${this.supervisor.localize(
+                              "dialog.registries.username"
+                            )}:
+                            ${entry.username}</span
                           >
                           <mwc-icon-button
                             .entry=${entry}
-                            title="Remove"
+                            .title=${this.supervisor.localize(
+                              "dialog.registries.remove"
+                            )}
                             slot="meta"
                             @click=${this._removeRegistry}
                           >
                             <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
                           </mwc-icon-button>
                         </mwc-list-item>
-                      `;
-                    })
+                      `
+                    )
                   : html`
                       <mwc-list-item>
-                        <span>No registries configured</span>
+                        <span
+                          >${this.supervisor.localize(
+                            "dialog.registries.no_registries"
+                          )}</span
+                        >
                       </mwc-list-item>
                     `}
                 <mwc-button @click=${this._addRegistry}>
-                  Add new registry
+                  ${this.supervisor.localize(
+                    "dialog.registries.add_new_registry"
+                  )}
                 </mwc-button> `}
         </div>
       </ha-dialog>
@@ -134,8 +147,9 @@ class HassioRegistriesDialog extends LitElement {
     this[`_${target.name}`] = target.value;
   }
 
-  public async showDialog(_dialogParams: any): Promise<void> {
+  public async showDialog(dialogParams: RegistriesDialogParams): Promise<void> {
     this._opened = true;
+    this.supervisor = dialogParams.supervisor;
     await this._loadRegistries();
     await this.updateComplete;
   }
@@ -178,7 +192,7 @@ class HassioRegistriesDialog extends LitElement {
       this._addingRegistry = false;
     } catch (err) {
       showAlertDialog(this, {
-        title: "Failed to add registry",
+        title: this.supervisor.localize("dialog.registries.failed_to_add"),
         text: extractApiErrorMessage(err),
       });
     }
@@ -192,13 +206,13 @@ class HassioRegistriesDialog extends LitElement {
       await this._loadRegistries();
     } catch (err) {
       showAlertDialog(this, {
-        title: "Failed to remove registry",
+        title: this.supervisor.localize("dialog.registries.failed_to_remove"),
         text: extractApiErrorMessage(err),
       });
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       haStyleDialog,
@@ -230,9 +244,6 @@ class HassioRegistriesDialog extends LitElement {
         mwc-list-item span[slot="secondary"] {
           color: var(--secondary-text-color);
         }
-        ha-paper-dropdown-menu {
-          display: block;
-        }
       `,
     ];
   }

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

@@ -1,10 +1,18 @@
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import "./dialog-hassio-registries";
 
-export const showRegistriesDialog = (element: HTMLElement): void => {
+export interface RegistriesDialogParams {
+  supervisor: Supervisor;
+}
+
+export const showRegistriesDialog = (
+  element: HTMLElement,
+  dialogParams: RegistriesDialogParams
+): void => {
   fireEvent(element, "show-dialog", {
     dialogTag: "dialog-hassio-registries",
     dialogImport: () => import("./dialog-hassio-registries"),
-    dialogParams: {},
+    dialogParams,
   });
 };

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

@@ -5,20 +5,12 @@ import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
+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 "../../../../src/components/ha-circular-progress";
-import "../../../../src/components/ha-dialog";
+import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-svg-icon";
 import {
   fetchHassioAddonsInfo,
@@ -34,27 +26,29 @@ import { HassioRepositoryDialogParams } from "./show-dialog-repositories";
 class HassioRepositoriesDialog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) private _repos: HassioAddonRepository[] = [];
-
-  @property({ attribute: false })
-  private _dialogParams?: HassioRepositoryDialogParams;
-
   @query("#repository_input", true) private _optionInput?: PaperInputElement;
 
-  @internalProperty() private _opened = false;
+  @state() private _repositories?: HassioAddonRepository[];
 
-  @internalProperty() private _prosessing = false;
+  @state() private _dialogParams?: HassioRepositoryDialogParams;
 
-  @internalProperty() private _error?: string;
+  @state() private _opened = false;
 
-  public async showDialog(_dialogParams: any): Promise<void> {
-    this._dialogParams = _dialogParams;
-    this._repos = _dialogParams.repos;
+  @state() private _processing = false;
+
+  @state() private _error?: string;
+
+  public async showDialog(
+    dialogParams: HassioRepositoryDialogParams
+  ): Promise<void> {
+    this._dialogParams = dialogParams;
     this._opened = true;
+    await this._loadData();
     await this.updateComplete;
   }
 
   public closeDialog(): void {
+    this._dialogParams = undefined;
     this._opened = false;
     this._error = "";
   }
@@ -66,20 +60,26 @@ class HassioRepositoriesDialog extends LitElement {
   );
 
   protected render(): TemplateResult {
-    const repositories = this._filteredRepositories(this._repos);
+    if (!this._dialogParams?.supervisor || this._repositories === undefined) {
+      return html``;
+    }
+    const repositories = this._filteredRepositories(this._repositories);
     return html`
       <ha-dialog
         .open=${this._opened}
-        @closing=${this.closeDialog}
+        @closed=${this.closeDialog}
         scrimClickAction
         escapeKeyAction
-        heading="Manage add-on repositories"
+        .heading=${createCloseHeading(
+          this.hass,
+          this._dialogParams!.supervisor.localize("dialog.repositories.title")
+        )}
       >
         ${this._error ? html`<div class="error">${this._error}</div>` : ""}
         <div class="form">
           ${repositories.length
-            ? repositories.map((repo) => {
-                return html`
+            ? repositories.map(
+                (repo) => html`
                   <paper-item class="option">
                     <paper-item-body three-line>
                       <div>${repo.name}</div>
@@ -88,41 +88,47 @@ class HassioRepositoriesDialog extends LitElement {
                     </paper-item-body>
                     <mwc-icon-button
                       .slug=${repo.slug}
-                      title="Remove"
+                      .title=${this._dialogParams!.supervisor.localize(
+                        "dialog.repositories.remove"
+                      )}
                       @click=${this._removeRepository}
                     >
                       <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
                     </mwc-icon-button>
                   </paper-item>
-                `;
-              })
-            : html`
-                <paper-item>
-                  No repositories
-                </paper-item>
-              `}
+                `
+              )
+            : html` <paper-item> No repositories </paper-item> `}
           <div class="layout horizontal bottom">
             <paper-input
               class="flex-auto"
               id="repository_input"
-              label="Add repository"
+              .value=${this._dialogParams!.url || ""}
+              .label=${this._dialogParams!.supervisor.localize(
+                "dialog.repositories.add"
+              )}
               @keydown=${this._handleKeyAdd}
             ></paper-input>
             <mwc-button @click=${this._addRepository}>
-              ${this._prosessing
-                ? html`<ha-circular-progress active></ha-circular-progress>`
-                : "Add"}
+              ${this._processing
+                ? html`<ha-circular-progress
+                    active
+                    size="small"
+                  ></ha-circular-progress>`
+                : this._dialogParams!.supervisor.localize(
+                    "dialog.repositories.add"
+                  )}
             </mwc-button>
           </div>
         </div>
-        <mwc-button slot="primaryAction" @click="${this.closeDialog}">
-          Close
+        <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+          ${this._dialogParams?.supervisor.localize("common.close")}
         </mwc-button>
       </ha-dialog>
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       haStyleDialog,
@@ -144,8 +150,10 @@ class HassioRepositoriesDialog extends LitElement {
         mwc-button {
           margin-left: 8px;
         }
-        ha-paper-dropdown-menu {
+        ha-circular-progress {
           display: block;
+          margin: 32px;
+          text-align: center;
         }
       `,
     ];
@@ -167,61 +175,57 @@ class HassioRepositoriesDialog extends LitElement {
     this._addRepository();
   }
 
+  private async _loadData(): Promise<void> {
+    try {
+      const addonsinfo = await fetchHassioAddonsInfo(this.hass);
+
+      this._repositories = addonsinfo.repositories;
+
+      fireEvent(this, "supervisor-collection-refresh", { collection: "addon" });
+    } catch (err) {
+      this._error = extractApiErrorMessage(err);
+    }
+  }
+
   private async _addRepository() {
     const input = this._optionInput;
     if (!input || !input.value) {
       return;
     }
-    this._prosessing = true;
-    const repositories = this._filteredRepositories(this._repos);
-    const newRepositories = repositories.map((repo) => {
-      return repo.source;
-    });
+    this._processing = true;
+    const repositories = this._filteredRepositories(this._repositories!);
+    const newRepositories = repositories.map((repo) => repo.source);
     newRepositories.push(input.value);
 
     try {
       await setSupervisorOption(this.hass, {
         addons_repositories: newRepositories,
       });
-
-      const addonsInfo = await fetchHassioAddonsInfo(this.hass);
-      this._repos = addonsInfo.repositories;
-
-      await this._dialogParams!.loadData();
+      await this._loadData();
 
       input.value = "";
     } catch (err) {
       this._error = extractApiErrorMessage(err);
     }
-    this._prosessing = false;
+    this._processing = false;
   }
 
   private async _removeRepository(ev: Event) {
     const slug = (ev.currentTarget as any).slug;
-    const repositories = this._filteredRepositories(this._repos);
-    const repository = repositories.find((repo) => {
-      return repo.slug === slug;
-    });
+    const repositories = this._filteredRepositories(this._repositories!);
+    const repository = repositories.find((repo) => repo.slug === slug);
     if (!repository) {
       return;
     }
     const newRepositories = repositories
-      .map((repo) => {
-        return repo.source;
-      })
-      .filter((repo) => {
-        return repo !== repository.source;
-      });
+      .map((repo) => repo.source)
+      .filter((repo) => repo !== repository.source);
 
     try {
       await setSupervisorOption(this.hass, {
         addons_repositories: newRepositories,
       });
-
-      const addonsInfo = await fetchHassioAddonsInfo(this.hass);
-      this._repos = addonsInfo.repositories;
-
-      await this._dialogParams!.loadData();
+      await this._loadData();
     } catch (err) {
       this._error = extractApiErrorMessage(err);
     }

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

@@ -1,10 +1,10 @@
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import { HassioAddonRepository } from "../../../../src/data/hassio/addon";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import "./dialog-hassio-repositories";
 
 export interface HassioRepositoryDialogParams {
-  repos: HassioAddonRepository[];
-  loadData: () => Promise<void>;
+  supervisor: Supervisor;
+  url?: string;
 }
 
 export const showRepositoriesDialog = (