diff --git a/.eslintrc.json b/.eslintrc.json
index b1db8a1786..7294a8b0e5 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -28,9 +28,7 @@
     "__BUILD__": false,
     "__VERSION__": false,
     "__STATIC_PATH__": false,
-    "Polymer": true,
-    "webkitSpeechRecognition": false,
-    "ResizeObserver": false
+    "Polymer": true
   },
   "env": {
     "browser": true,
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index 8653bc9644..c753ac8479 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -6,8 +6,8 @@ on:
       - published
 
 env:
-  WHEELS_TAG: 3.7-alpine3.11
-  PYTHON_VERSION: 3.7
+  WHEELS_TAG: 3.8-alpine3.12
+  PYTHON_VERSION: 3.8
   NODE_VERSION: 12.1
 
 jobs:
diff --git a/.mocharc.cjs b/.mocharc.cjs
new file mode 100644
index 0000000000..c34a155aba
--- /dev/null
+++ b/.mocharc.cjs
@@ -0,0 +1,4 @@
+module.exports = {
+  require: "test-mocha/testconf.js",
+  timeout: 10000,
+};
diff --git a/build-scripts/bundle.js b/build-scripts/bundle.js
index d21b2aea1a..1183a5ce06 100644
--- a/build-scripts/bundle.js
+++ b/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");
@@ -53,13 +54,13 @@ module.exports.babelOptions = ({ latestBuild }) => ({
   babelrc: 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,14 +73,9 @@ 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),
 });
 
diff --git a/build-scripts/env.js b/build-scripts/env.js
index 8b2dea2eb4..bda99cf010 100644
--- a/build-scripts/env.js
+++ b/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");
diff --git a/build-scripts/paths.js b/build-scripts/paths.js
index da9d8db190..d89f5f582a 100644
--- a/build-scripts/paths.js
+++ b/build-scripts/paths.js
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
 
 module.exports = {
diff --git a/build-scripts/rollup.js b/build-scripts/rollup.js
index c5f8972854..7d9cf93046 100644
--- a/build-scripts/rollup.js
+++ b/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,78 @@ 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,
+        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,
         }),
-        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 +112,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,
diff --git a/build-scripts/util.js b/build-scripts/util.js
index 23efdfb229..91dee49ea3 100644
--- a/build-scripts/util.js
+++ b/build-scripts/util.js
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
 const fs = require("fs");
 
diff --git a/build-scripts/webpack.js b/build-scripts/webpack.js
index e39c3d9ea7..d3e50ebd78 100644
--- a/build-scripts/webpack.js
+++ b/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 { 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 {
@@ -94,6 +95,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,
@@ -115,7 +117,7 @@ const createWebpackConfig = ({
       new webpack.NormalModuleReplacementPlugin(
         new RegExp(
           require.resolve(
-            "lit-virtualizer/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js"
+            "@lit-labs/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,
diff --git a/cast/src/launcher/layout/hc-cast.ts b/cast/src/launcher/layout/hc-cast.ts
index c91e38f2af..1f349f6371 100644
--- a/cast/src/launcher/layout/hc-cast.ts
+++ b/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,9 +34,9 @@ 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) {
@@ -204,7 +196,7 @@ class HcCast extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .center-item {
         display: flex;
diff --git a/cast/src/launcher/layout/hc-connect.ts b/cast/src/launcher/layout/hc-connect.ts
index 518c582f2c..dd87cbef64 100644
--- a/cast/src/launcher/layout/hc-connect.ts
+++ b/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;
 
@@ -297,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);
diff --git a/cast/src/launcher/layout/hc-layout.ts b/cast/src/launcher/layout/hc-layout.ts
index 76a3af25ef..0d0e8cdb0d 100644
--- a/cast/src/launcher/layout/hc-layout.ts
+++ b/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;
diff --git a/cast/src/receiver/layout/hc-demo.ts b/cast/src/receiver/layout/hc-demo.ts
index b4ddc41a67..a5822ebe97 100644
--- a/cast/src/receiver/layout/hc-demo.ts
+++ b/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>) =>
diff --git a/cast/src/receiver/layout/hc-launch-screen.ts b/cast/src/receiver/layout/hc-launch-screen.ts
index 603f70f655..a4d6aa5e4e 100644
--- a/cast/src/receiver/layout/hc-launch-screen.ts
+++ b/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;
diff --git a/cast/src/receiver/layout/hc-lovelace.ts b/cast/src/receiver/layout/hc-lovelace.ts
index ba94b42394..1b13e18976 100644
--- a/cast/src/receiver/layout/hc-lovelace.ts
+++ b/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";
@@ -91,7 +84,7 @@ class HcLovelace extends LitElement {
     return undefined;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         min-height: 100vh;
diff --git a/cast/src/receiver/layout/hc-main.ts b/cast/src/receiver/layout/hc-main.ts
index e8623dfa65..bc4a9320ea 100644
--- a/cast/src/receiver/layout/hc-main.ts
+++ b/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;
 
diff --git a/demo/src/configs/teachingbirds/lovelace.ts b/demo/src/configs/teachingbirds/lovelace.ts
index 943231353a..9fbf612023 100644
--- a/demo/src/configs/teachingbirds/lovelace.ts
+++ b/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: [
diff --git a/demo/src/custom-cards/card-modder.js b/demo/src/custom-cards/card-modder.js
index c915a95668..6ada982486 100644
--- a/demo/src/custom-cards/card-modder.js
+++ b/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 {
diff --git a/demo/src/custom-cards/card-tools.js b/demo/src/custom-cards/card-tools.js
index 39cf7598fb..27b37cabeb 100644
--- a/demo/src/custom-cards/card-tools.js
+++ b/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;
diff --git a/demo/src/custom-cards/cast-demo-row.ts b/demo/src/custom-cards/cast-demo-row.ts
index ea0f3033a3..8fbecb4eb5 100644
--- a/demo/src/custom-cards/cast-demo-row.ts
+++ b/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;
diff --git a/demo/src/custom-cards/ha-demo-card.ts b/demo/src/custom-cards/ha-demo-card.ts
index 8da813d7bd..fcd48a90ab 100644
--- a/demo/src/custom-cards/ha-demo-card.ts
+++ b/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 {
diff --git a/demo/src/ha-demo.ts b/demo/src/ha-demo.ts
index 921420e45b..349968e28d 100644
--- a/demo/src/ha-demo.ts
+++ b/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 }
     );
diff --git a/gallery/src/components/demo-card.js b/gallery/src/components/demo-card.js
index c6137fc9ed..4d9ce53899 100644
--- a/gallery/src/components/demo-card.js
+++ b/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 {
@@ -80,7 +80,7 @@ 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);
   }
diff --git a/gallery/src/demos/demo-automation-describe-action.ts b/gallery/src/demos/demo-automation-describe-action.ts
index 642bcfb58c..ea9b13fff5 100644
--- a/gallery/src/demos/demo-automation-describe-action.ts
+++ b/gallery/src/demos/demo-automation-describe-action.ts
@@ -1,12 +1,6 @@
-import { safeDump } from "js-yaml";
-import {
-  customElement,
-  html,
-  css,
-  LitElement,
-  TemplateResult,
-  property,
-} from "lit-element";
+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";
@@ -62,7 +56,7 @@ export class DemoAutomationDescribeAction extends LitElement {
           (conf) => html`
             <div class="action">
               <span>${describeAction(this.hass, conf as any)}</span>
-              <pre>${safeDump(conf)}</pre>
+              <pre>${dump(conf)}</pre>
             </div>
           `
         )}
diff --git a/gallery/src/demos/demo-automation-describe-condition.ts b/gallery/src/demos/demo-automation-describe-condition.ts
index ef57b9a1e5..60f42d78e2 100644
--- a/gallery/src/demos/demo-automation-describe-condition.ts
+++ b/gallery/src/demos/demo-automation-describe-condition.ts
@@ -1,11 +1,6 @@
-import { safeDump } from "js-yaml";
-import {
-  customElement,
-  html,
-  css,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
+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";
 
@@ -31,7 +26,7 @@ export class DemoAutomationDescribeCondition extends LitElement {
           (conf) => html`
             <div class="condition">
               <span>${describeCondition(conf as any)}</span>
-              <pre>${safeDump(conf)}</pre>
+              <pre>${dump(conf)}</pre>
             </div>
           `
         )}
diff --git a/gallery/src/demos/demo-automation-describe-trigger.ts b/gallery/src/demos/demo-automation-describe-trigger.ts
index f870db44d7..8a409386c0 100644
--- a/gallery/src/demos/demo-automation-describe-trigger.ts
+++ b/gallery/src/demos/demo-automation-describe-trigger.ts
@@ -1,11 +1,6 @@
-import { safeDump } from "js-yaml";
-import {
-  customElement,
-  html,
-  css,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
+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";
 
@@ -34,7 +29,7 @@ export class DemoAutomationDescribeTrigger extends LitElement {
           (conf) => html`
             <div class="trigger">
               <span>${describeTrigger(conf as any)}</span>
-              <pre>${safeDump(conf)}</pre>
+              <pre>${dump(conf)}</pre>
             </div>
           `
         )}
diff --git a/gallery/src/demos/demo-automation-trace-timeline.ts b/gallery/src/demos/demo-automation-trace-timeline.ts
index 740c589023..50461fca6d 100644
--- a/gallery/src/demos/demo-automation-trace-timeline.ts
+++ b/gallery/src/demos/demo-automation-trace-timeline.ts
@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  css,
-  LitElement,
-  TemplateResult,
-  property,
-} from "lit-element";
+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";
diff --git a/gallery/src/demos/demo-automation-trace.ts b/gallery/src/demos/demo-automation-trace.ts
index 8187c01630..7b96d81c00 100644
--- a/gallery/src/demos/demo-automation-trace.ts
+++ b/gallery/src/demos/demo-automation-trace.ts
@@ -1,12 +1,4 @@
-import {
-  customElement,
-  html,
-  css,
-  LitElement,
-  TemplateResult,
-  internalProperty,
-  property,
-} from "lit-element";
+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";
@@ -15,6 +7,7 @@ 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];
 
@@ -22,7 +15,7 @@ const traces: DemoTrace[] = [basicTrace, motionLightTrace];
 export class DemoAutomationTrace extends LitElement {
   @property({ attribute: false }) hass?: HomeAssistant;
 
-  @internalProperty() private _selected = {};
+  @state() private _selected = {};
 
   protected render(): TemplateResult {
     if (!this.hass) {
diff --git a/gallery/src/demos/demo-hui-alarm-panel-card.ts b/gallery/src/demos/demo-hui-alarm-panel-card.ts
index 0042b31874..be9a5a22e2 100644
--- a/gallery/src/demos/demo-hui-alarm-panel-card.ts
+++ b/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";
diff --git a/gallery/src/demos/demo-hui-conditional-card.ts b/gallery/src/demos/demo-hui-conditional-card.ts
index 9d91c76f88..5977ee3c09 100644
--- a/gallery/src/demos/demo-hui-conditional-card.ts
+++ b/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";
diff --git a/gallery/src/demos/demo-hui-entities-card.ts b/gallery/src/demos/demo-hui-entities-card.ts
index 8f030ec6cb..c6ed878c0f 100644
--- a/gallery/src/demos/demo-hui-entities-card.ts
+++ b/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";
diff --git a/gallery/src/demos/demo-hui-entity-button-card.ts b/gallery/src/demos/demo-hui-entity-button-card.ts
index 56d7018e36..320eb8f8c1 100644
--- a/gallery/src/demos/demo-hui-entity-button-card.ts
+++ b/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";
diff --git a/gallery/src/demos/demo-hui-entity-filter-card.ts b/gallery/src/demos/demo-hui-entity-filter-card.ts
index 309e43f7dd..3a0162ae7b 100644
--- a/gallery/src/demos/demo-hui-entity-filter-card.ts
+++ b/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";
diff --git a/gallery/src/demos/demo-hui-gauge-card.ts b/gallery/src/demos/demo-hui-gauge-card.ts
index 659955354b..fdcf07188d 100644
--- a/gallery/src/demos/demo-hui-gauge-card.ts
+++ b/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";
diff --git a/gallery/src/demos/demo-hui-glance-card.ts b/gallery/src/demos/demo-hui-glance-card.ts
index 9f407307eb..c078ba5f61 100644
--- a/gallery/src/demos/demo-hui-glance-card.ts
+++ b/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";
diff --git a/gallery/src/demos/demo-hui-grid-and-stack-card.ts b/gallery/src/demos/demo-hui-grid-and-stack-card.ts
index 4891d6626e..6b743b243f 100644
--- a/gallery/src/demos/demo-hui-grid-and-stack-card.ts
+++ b/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";
diff --git a/gallery/src/demos/demo-hui-iframe-card.ts b/gallery/src/demos/demo-hui-iframe-card.ts
index f4497e9428..811d858e44 100644
--- a/gallery/src/demos/demo-hui-iframe-card.ts
+++ b/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 = [
diff --git a/gallery/src/demos/demo-hui-light-card.ts b/gallery/src/demos/demo-hui-light-card.ts
index 26c419f9e5..8cae0ff9d7 100644
--- a/gallery/src/demos/demo-hui-light-card.ts
+++ b/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";
diff --git a/gallery/src/demos/demo-hui-map-card.ts b/gallery/src/demos/demo-hui-map-card.ts
index ccb47deabb..68912a6e77 100644
--- a/gallery/src/demos/demo-hui-map-card.ts
+++ b/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";
diff --git a/gallery/src/demos/demo-hui-markdown-card.ts b/gallery/src/demos/demo-hui-markdown-card.ts
index 94f63f404d..6e34a04c6f 100644
--- a/gallery/src/demos/demo-hui-markdown-card.ts
+++ b/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";
diff --git a/gallery/src/demos/demo-hui-media-control-card.ts b/gallery/src/demos/demo-hui-media-control-card.ts
index 3b032c409e..0b963f36e8 100644
--- a/gallery/src/demos/demo-hui-media-control-card.ts
+++ b/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";
diff --git a/gallery/src/demos/demo-hui-media-player-rows.ts b/gallery/src/demos/demo-hui-media-player-rows.ts
index 500bfca693..988d232e49 100644
--- a/gallery/src/demos/demo-hui-media-player-rows.ts
+++ b/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";
diff --git a/gallery/src/demos/demo-hui-picture-elements-card.ts b/gallery/src/demos/demo-hui-picture-elements-card.ts
index 5ab818911c..c3fcc7d61b 100644
--- a/gallery/src/demos/demo-hui-picture-elements-card.ts
+++ b/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";
diff --git a/gallery/src/demos/demo-hui-picture-entity-card.ts b/gallery/src/demos/demo-hui-picture-entity-card.ts
index 3a1b64f76e..6b8d8418e1 100644
--- a/gallery/src/demos/demo-hui-picture-entity-card.ts
+++ b/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";
diff --git a/gallery/src/demos/demo-hui-picture-glance-card.ts b/gallery/src/demos/demo-hui-picture-glance-card.ts
index f6790efc3d..b82c2a2fa9 100644
--- a/gallery/src/demos/demo-hui-picture-glance-card.ts
+++ b/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";
diff --git a/gallery/src/demos/demo-hui-plant-card.ts b/gallery/src/demos/demo-hui-plant-card.ts
index 9e8aff318e..683d0c6a37 100644
--- a/gallery/src/demos/demo-hui-plant-card.ts
+++ b/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";
diff --git a/gallery/src/demos/demo-hui-shopping-list-card.ts b/gallery/src/demos/demo-hui-shopping-list-card.ts
index 61f9aa9062..034c150abd 100644
--- a/gallery/src/demos/demo-hui-shopping-list-card.ts
+++ b/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";
 
diff --git a/gallery/src/demos/demo-hui-thermostat-card.ts b/gallery/src/demos/demo-hui-thermostat-card.ts
index e6cdaae788..86216da564 100644
--- a/gallery/src/demos/demo-hui-thermostat-card.ts
+++ b/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";
diff --git a/gallery/src/demos/demo-integration-card.ts b/gallery/src/demos/demo-integration-card.ts
index 7fb8607930..1e23303bc4 100644
--- a/gallery/src/demos/demo-integration-card.ts
+++ b/gallery/src/demos/demo-integration-card.ts
@@ -1,12 +1,4 @@
-import {
-  customElement,
-  html,
-  css,
-  internalProperty,
-  LitElement,
-  TemplateResult,
-  property,
-} from "lit-element";
+import { html, css, LitElement, TemplateResult } from "lit";
 import "../../../src/components/ha-formfield";
 import "../../../src/components/ha-switch";
 
@@ -23,7 +15,8 @@ import type {
 } 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-html/directives/class-map";
+import { classMap } from "lit/directives/class-map";
+import { customElement, property, state } from "lit/decorators";
 
 const createConfigEntry = (
   title: string,
@@ -220,9 +213,9 @@ const createDeviceRegistryEntries = (
 export class DemoIntegrationCard extends LitElement {
   @property({ attribute: false }) hass?: HomeAssistant;
 
-  @internalProperty() isCustomIntegration = false;
+  @state() isCustomIntegration = false;
 
-  @internalProperty() isCloud = false;
+  @state() isCloud = false;
 
   protected render(): TemplateResult {
     if (!this.hass) {
diff --git a/gallery/src/demos/demo-more-info-light.ts b/gallery/src/demos/demo-more-info-light.ts
index 399873aa9c..a3107a5df3 100644
--- a/gallery/src/demos/demo-more-info-light.ts
+++ b/gallery/src/demos/demo-more-info-light.ts
@@ -1,12 +1,5 @@
-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 {
   LightColorModes,
diff --git a/gallery/src/demos/demo-util-long-press.ts b/gallery/src/demos/demo-util-long-press.ts
index 9fa774918f..f4fddb45ac 100644
--- a/gallery/src/demos/demo-util-long-press.ts
+++ b/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";
diff --git a/hassio/src/addon-store/hassio-addon-repository.ts b/hassio/src/addon-store/hassio-addon-repository.ts
index 4e33f15e8b..513f053d1c 100644
--- a/hassio/src/addon-store/hassio-addon-repository.ts
+++ b/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";
@@ -126,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`
diff --git a/hassio/src/addon-store/hassio-addon-store.ts b/hassio/src/addon-store/hassio-addon-store.ts
index fd41a504db..a1dbe3237f 100644
--- a/hassio/src/addon-store/hassio-addon-store.ts
+++ b/hassio/src/addon-store/hassio-addon-store.ts
@@ -4,13 +4,13 @@ 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";
@@ -58,7 +58,7 @@ class HassioAddonStore extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
-  @internalProperty() private _filter?: string;
+  @state() private _filter?: string;
 
   public async refreshData() {
     await reloadHassioAddons(this.hass);
@@ -138,7 +138,7 @@ class HassioAddonStore extends LitElement {
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
     const repositoryUrl = extractSearchParam("repository_url");
-    navigate(this, "/hassio/store", true);
+    navigate("/hassio/store", { replace: true });
     if (repositoryUrl) {
       this._manageRepositories(repositoryUrl);
     }
@@ -218,7 +218,7 @@ class HassioAddonStore extends LitElement {
     this._filter = e.detail.value;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       hassio-addon-repository {
         margin-top: 24px;
diff --git a/hassio/src/addon-view/config/hassio-addon-audio.ts b/hassio/src/addon-view/config/hassio-addon-audio.ts
index 79275a39cf..ad6238c429 100644
--- a/hassio/src/addon-view/config/hassio-addon-audio.ts
+++ b/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";
@@ -39,15 +37,15 @@ class HassioAddonAudio extends LitElement {
 
   @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`
@@ -109,7 +107,7 @@ class HassioAddonAudio extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
diff --git a/hassio/src/addon-view/config/hassio-addon-config-tab.ts b/hassio/src/addon-view/config/hassio-addon-config-tab.ts
index b9a5907075..3b3e1961ec 100644
--- a/hassio/src/addon-view/config/hassio-addon-config-tab.ts
+++ b/hassio/src/addon-view/config/hassio-addon-config-tab.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 "../../../../src/components/ha-circular-progress";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
@@ -70,7 +63,7 @@ class HassioAddonConfigDashboard extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
diff --git a/hassio/src/addon-view/config/hassio-addon-config.ts b/hassio/src/addon-view/config/hassio-addon-config.ts
index 56ebbfa5f5..52c3d73930 100644
--- a/hassio/src/addon-view/config/hassio-addon-config.ts
+++ b/hassio/src/addon-view/config/hassio-addon-config.ts
@@ -5,16 +5,13 @@ import { mdiDotsVertical } from "@mdi/js";
 import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
@@ -53,15 +50,15 @@ class HassioAddonConfig extends LitElement {
 
   @property({ type: Boolean }) private _valid = true;
 
-  @internalProperty() private _canShowSchema = false;
+  @state() private _canShowSchema = false;
 
-  @internalProperty() private _showOptional = false;
+  @state() private _showOptional = false;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _options?: Record<string, unknown>;
+  @state() private _options?: Record<string, unknown>;
 
-  @internalProperty() private _yamlMode = false;
+  @state() private _yamlMode = false;
 
   @query("ha-yaml-editor") private _editor?: HaYamlEditor;
 
@@ -262,6 +259,11 @@ class HassioAddonConfig extends LitElement {
 
   private async _saveTapped(ev: CustomEvent): Promise<void> {
     const button = ev.currentTarget as any;
+    const eventdata = {
+      success: true,
+      response: undefined,
+      path: "options",
+    };
     button.progress = true;
 
     this._error = undefined;
@@ -272,26 +274,22 @@ class HassioAddonConfig extends LitElement {
       });
 
       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.supervisor, this.addon);
       }
     } catch (err) {
       this._error = this.supervisor.localize(
-        "addon.configuration.options.failed_to_save",
+        "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,
diff --git a/hassio/src/addon-view/config/hassio-addon-network.ts b/hassio/src/addon-view/config/hassio-addon-network.ts
index 256f81175f..9eb8541bdd 100644
--- a/hassio/src/addon-view/config/hassio-addon-network.ts
+++ b/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";
@@ -43,9 +41,9 @@ class HassioAddonNetwork extends LitElement {
 
   @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();
@@ -216,7 +214,7 @@ class HassioAddonNetwork extends LitElement {
     button.progress = false;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
diff --git a/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts b/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts
index 0cb15c1842..179598f099 100644
--- a/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts
+++ b/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts
@@ -1,14 +1,5 @@
 import "../../../../src/components/ha-card";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-markdown";
 import {
@@ -21,6 +12,7 @@ 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 {
@@ -30,9 +22,9 @@ class HassioAddonDocumentationDashboard extends LitElement {
 
   @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();
@@ -57,7 +49,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
diff --git a/hassio/src/addon-view/hassio-addon-dashboard.ts b/hassio/src/addon-view/hassio-addon-dashboard.ts
index 6287c7907d..47c5fdeac1 100644
--- a/hassio/src/addon-view/hassio-addon-dashboard.ts
+++ b/hassio/src/addon-view/hassio-addon-dashboard.ts
@@ -4,16 +4,8 @@ import {
   mdiInformationVariant,
   mdiMathLog,
 } from "@mdi/js";
-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 memoizeOne from "memoize-one";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import { navigate } from "../../../src/common/navigate";
@@ -52,7 +44,7 @@ class HassioAddonDashboard extends LitElement {
 
   @property({ type: Boolean }) public narrow!: boolean;
 
-  @internalProperty() _error?: string;
+  @state() _error?: string;
 
   private _computeTail = memoizeOne((route: Route) => {
     const dividerPos = route.path.indexOf("/", 1);
@@ -133,7 +125,7 @@ class HassioAddonDashboard extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
@@ -183,7 +175,7 @@ class HassioAddonDashboard extends LitElement {
         if (!validAddon) {
           this._error = this.supervisor.localize("my.error_addon_not_found");
         } else {
-          navigate(this, `/hassio/addon/${requestedAddon}`, true);
+          navigate(`/hassio/addon/${requestedAddon}`, { replace: true });
         }
       }
     }
@@ -191,6 +183,10 @@ class HassioAddonDashboard extends LitElement {
   }
 
   private async _apiCalled(ev): Promise<void> {
+    if (!ev.detail.success) {
+      return;
+    }
+
     const pathSplit: string[] = ev.detail.path?.split("/");
 
     if (!pathSplit || pathSplit.length === 0) {
diff --git a/hassio/src/addon-view/hassio-addon-router.ts b/hassio/src/addon-view/hassio-addon-router.ts
index e2d540527d..fe0bad9c00 100644
--- a/hassio/src/addon-view/hassio-addon-router.ts
+++ b/hassio/src/addon-view/hassio-addon-router.ts
@@ -1,4 +1,4 @@
-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 {
diff --git a/hassio/src/addon-view/info/hassio-addon-info-tab.ts b/hassio/src/addon-view/info/hassio-addon-info-tab.ts
index dffd2a8b66..6b31e546b7 100644
--- a/hassio/src/addon-view/info/hassio-addon-info-tab.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info-tab.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 "../../../../src/components/ha-circular-progress";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
@@ -42,7 +35,7 @@ class HassioAddonInfoDashboard extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts
index 20af66c7ce..0fe37230bb 100644
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info.ts
@@ -14,17 +14,9 @@ import {
   mdiPound,
   mdiShield,
 } from "@mdi/js";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  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, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
@@ -90,9 +82,9 @@ class HassioAddonInfo extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @internalProperty() private _metrics?: HassioStats;
+  @state() private _metrics?: HassioStats;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
   private _addonStoreInfo = memoizeOne(
     (slug: string, storeAddons: StoreAddon[]) =>
@@ -171,16 +163,16 @@ class HassioAddonInfo extends LitElement {
                   : ""}
               </div>
               <div class="card-actions">
-                <mwc-button @click=${this._updateClicked}>
-                  ${this.supervisor.localize("common.update")}
-                </mwc-button>
                 ${this.addon.changelog
                   ? html`
                       <mwc-button @click=${this._openChangelog}>
                         ${this.supervisor.localize("addon.dashboard.changelog")}
                       </mwc-button>
                     `
-                  : ""}
+                  : html`<span></span>`}
+                <mwc-button @click=${this._updateClicked}>
+                  ${this.supervisor.localize("common.update")}
+                </mwc-button>
               </div>
             </ha-card>
           `
@@ -769,7 +761,7 @@ class HassioAddonInfo extends LitElement {
   }
 
   private _openIngress(): void {
-    navigate(this, `/hassio/ingress/${this.addon.slug}`);
+    navigate(`/hassio/ingress/${this.addon.slug}`);
   }
 
   private get _computeShowIngressUI(): boolean {
@@ -1059,7 +1051,7 @@ class HassioAddonInfo extends LitElement {
   }
 
   private _openConfiguration(): void {
-    navigate(this, `/hassio/addon/${this.addon.slug}/config`);
+    navigate(`/hassio/addon/${this.addon.slug}/config`);
   }
 
   private async _uninstallClicked(ev: CustomEvent): Promise<void> {
@@ -1098,7 +1090,7 @@ class HassioAddonInfo extends LitElement {
     button.progress = false;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
diff --git a/hassio/src/addon-view/log/hassio-addon-log-tab.ts b/hassio/src/addon-view/log/hassio-addon-log-tab.ts
index 7b93e38a5b..3690d75c64 100644
--- a/hassio/src/addon-view/log/hassio-addon-log-tab.ts
+++ b/hassio/src/addon-view/log/hassio-addon-log-tab.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 "../../../../src/components/ha-circular-progress";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
@@ -38,7 +31,7 @@ class HassioAddonLogDashboard extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
diff --git a/hassio/src/addon-view/log/hassio-addon-logs.ts b/hassio/src/addon-view/log/hassio-addon-logs.ts
index c380c0b92e..a8ed8f3529 100644
--- a/hassio/src/addon-view/log/hassio-addon-logs.ts
+++ b/hassio/src/addon-view/log/hassio-addon-logs.ts
@@ -1,14 +1,6 @@
 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,
@@ -29,9 +21,9 @@ class HassioAddonLogs extends LitElement {
 
   @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();
@@ -59,7 +51,7 @@ class HassioAddonLogs extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
diff --git a/hassio/src/components/hassio-ansi-to-html.ts b/hassio/src/components/hassio-ansi-to-html.ts
index b957b172b4..416be07388 100644
--- a/hassio/src/components/hassio-ansi-to-html.ts
+++ b/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;
diff --git a/hassio/src/components/hassio-card-content.ts b/hassio/src/components/hassio-card-content.ts
index 03884e6b94..d4b9508009 100644
--- a/hassio/src/components/hassio-card-content.ts
+++ b/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";
@@ -77,7 +70,7 @@ class HassioCardContent extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-svg-icon {
         margin-right: 24px;
diff --git a/hassio/src/components/hassio-upload-snapshot.ts b/hassio/src/components/hassio-upload-snapshot.ts
index 834281d911..5347e9a796 100644
--- a/hassio/src/components/hassio-upload-snapshot.ts
+++ b/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`
diff --git a/hassio/src/components/supervisor-formfield-label.ts b/hassio/src/components/supervisor-formfield-label.ts
new file mode 100644
index 0000000000..e173c0c44c
--- /dev/null
+++ b/hassio/src/components/supervisor-formfield-label.ts
@@ -0,0 +1,55 @@
+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 {
+        cursor: pointer;
+        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;
+  }
+}
diff --git a/hassio/src/components/supervisor-metric.ts b/hassio/src/components/supervisor-metric.ts
index bf6246876c..af31344e44 100644
--- a/hassio/src/components/supervisor-metric.ts
+++ b/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";
@@ -37,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;
@@ -71,6 +64,7 @@ class SupervisorMetric extends LitElement {
       .value {
         width: 48px;
         padding-right: 4px;
+        flex-shrink: 0;
       }
     `;
   }
diff --git a/hassio/src/components/supervisor-snapshot-content.ts b/hassio/src/components/supervisor-snapshot-content.ts
new file mode 100644
index 0000000000..8c87976329
--- /dev/null
+++ b/hassio/src/components/supervisor-snapshot-content.ts
@@ -0,0 +1,418 @@
+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 "../../../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("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({ 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() public snapshotName = "";
+
+  @property() public snapshotPassword = "";
+
+  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;
+    }
+  }
+
+  protected render(): TemplateResult {
+    if (!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.supervisor.localize("snapshot.full_snapshot")
+              : this.supervisor.localize("snapshot.partial_snapshot")}
+            (${Math.ceil(this.snapshot.size * 10) / 10 + " MB"})<br />
+            ${formatDateTime(new Date(this.snapshot.date), this.hass.locale)}
+          </div>`
+        : html`<paper-input
+            name="snapshotName"
+            .label=${this.supervisor.localize("snapshot.name")}
+            .value=${this.snapshotName}
+            @value-changed=${this._handleTextValueChanged}
+          >
+          </paper-input>`}
+      ${!this.snapshot || this.snapshot.type === "full"
+        ? html`<div class="sub-header">
+              ${!this.snapshot
+                ? this.supervisor.localize("snapshot.type")
+                : this.supervisor.localize("snapshot.select_type")}
+            </div>
+            <div class="snapshot-types">
+              <ha-formfield
+                .label=${this.supervisor.localize("snapshot.full_snapshot")}
+              >
+                <ha-radio
+                  @change=${this._handleRadioValueChanged}
+                  value="full"
+                  name="snapshotType"
+                  .checked=${this.snapshotType === "full"}
+                >
+                </ha-radio>
+              </ha-formfield>
+              <ha-formfield
+                .label=${this.supervisor!.localize("snapshot.partial_snapshot")}
+              >
+                <ha-radio
+                  @change=${this._handleRadioValueChanged}
+                  value="partial"
+                  name="snapshotType"
+                  .checked=${this.snapshotType === "partial"}
+                >
+                </ha-radio>
+              </ha-formfield>
+            </div>`
+        : ""}
+      ${this.snapshot && this.snapshotType === "partial"
+        ? html`
+            ${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>
+                `
+              : ""}
+          `
+        : ""}
+      ${this.snapshotType === "partial"
+        ? html`
+            ${foldersSection?.templates.length
+              ? html`
+                  <ha-formfield
+                    .label=${html`<supervisor-formfield-label
+                      .label=${this.supervisor.localize("snapshot.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.supervisor.localize("snapshot.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>
+                `
+              : ""}
+          `
+        : ""}
+      ${!this.snapshot
+        ? html`<ha-formfield
+            .label=${this.supervisor.localize("snapshot.password_protection")}
+          >
+            <ha-checkbox
+              .checked=${this.snapshotHasPassword}
+              @change=${this._toggleHasPassword}
+            >
+            </ha-checkbox
+          ></ha-formfield>`
+        : ""}
+      ${this.snapshotHasPassword
+        ? html`
+            <paper-input
+              .label=${this.supervisor.localize("snapshot.password")}
+              type="password"
+              name="snapshotPassword"
+              .value=${this.snapshotPassword}
+              @value-changed=${this._handleTextValueChanged}
+            >
+            </paper-input>
+          `
+        : ""}
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      ha-checkbox {
+        --mdc-checkbox-touch-target-size: 16px;
+        display: block;
+        margin: 4px 12px 8px 0;
+      }
+      ha-formfield {
+        display: contents;
+      }
+      supervisor-formfield-label {
+        display: inline-flex;
+        align-items: center;
+      }
+      paper-input[type="password"] {
+        display: block;
+        margin: 4px 0 4px 16px;
+      }
+      .details {
+        color: var(--secondary-text-color);
+      }
+      .section-content {
+        display: flex;
+        flex-direction: column;
+        margin-left: 16px;
+      }
+      .security {
+        margin-top: 16px;
+      }
+      .snapshot-types {
+        display: flex;
+      }
+      .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.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" &&
+          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;
+  }
+}
diff --git a/hassio/src/dashboard/hassio-addons.ts b/hassio/src/dashboard/hassio-addons.ts
index 3a578581ab..06abd3e4d5 100644
--- a/hassio/src/dashboard/hassio-addons.ts
+++ b/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";
@@ -90,7 +83,7 @@ class HassioAddons extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
@@ -103,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");
   }
 }
 
diff --git a/hassio/src/dashboard/hassio-dashboard.ts b/hassio/src/dashboard/hassio-dashboard.ts
index 1a4c373eda..6b98c759ce 100644
--- a/hassio/src/dashboard/hassio-dashboard.ts
+++ b/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";
@@ -53,7 +46,7 @@ class HassioDashboard extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/hassio/src/dashboard/hassio-update.ts b/hassio/src/dashboard/hassio-update.ts
index 1a11ee99e4..21836b1c1a 100644
--- a/hassio/src/dashboard/hassio-update.ts
+++ b/hassio/src/dashboard/hassio-update.ts
@@ -1,14 +1,7 @@
 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";
@@ -233,7 +226,7 @@ export class HassioUpdate extends LitElement {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
diff --git a/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts b/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts
index 95177a18f5..b1b2f06226 100644
--- a/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts
+++ b/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,
diff --git a/hassio/src/dialogs/network/dialog-hassio-network.ts b/hassio/src/dialogs/network/dialog-hassio-network.ts
index 04f2710465..36adbabf45 100644
--- a/hassio/src/dialogs/network/dialog-hassio-network.ts
+++ b/hassio/src/dialogs/network/dialog-hassio-network.ts
@@ -6,17 +6,9 @@ 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-circular-progress";
 import "../../../../src/components/ha-dialog";
@@ -54,23 +46,23 @@ export class DialogHassioNetwork
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @internalProperty() private _accessPoints?: AccessPoints;
+  @state() private _accessPoints?: AccessPoints;
 
-  @internalProperty() private _curTabIndex = 0;
+  @state() private _curTabIndex = 0;
 
-  @internalProperty() private _dirty = false;
+  @state() private _dirty = false;
 
-  @internalProperty() private _interface?: NetworkInterface;
+  @state() private _interface?: NetworkInterface;
 
-  @internalProperty() private _interfaces!: NetworkInterface[];
+  @state() private _interfaces!: NetworkInterface[];
 
-  @internalProperty() private _params?: HassioNetworkDialogParams;
+  @state() private _params?: HassioNetworkDialogParams;
 
-  @internalProperty() private _processing = false;
+  @state() private _processing = false;
 
-  @internalProperty() private _scanning = false;
+  @state() private _scanning = false;
 
-  @internalProperty() private _wifiConfiguration?: WifiConfiguration;
+  @state() private _wifiConfiguration?: WifiConfiguration;
 
   public async showDialog(params: HassioNetworkDialogParams): Promise<void> {
     this._params = params;
@@ -543,7 +535,7 @@ export class DialogHassioNetwork
     this._wifiConfiguration![id] = value;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/hassio/src/dialogs/registries/dialog-hassio-registries.ts b/hassio/src/dialogs/registries/dialog-hassio-registries.ts
index 4b77b41436..6cd738119a 100644
--- a/hassio/src/dialogs/registries/dialog-hassio-registries.ts
+++ b/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";
@@ -39,21 +31,21 @@ class HassioRegistriesDialog extends LitElement {
     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(
@@ -220,7 +212,7 @@ class HassioRegistriesDialog extends LitElement {
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       haStyleDialog,
diff --git a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
index 0c91f31055..cbc1e6e40d 100644
--- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
+++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
@@ -5,17 +5,8 @@ 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";
@@ -37,15 +28,15 @@ class HassioRepositoriesDialog extends LitElement {
 
   @query("#repository_input", true) private _optionInput?: PaperInputElement;
 
-  @internalProperty() private _repositories?: HassioAddonRepository[];
+  @state() private _repositories?: HassioAddonRepository[];
 
-  @internalProperty() private _dialogParams?: HassioRepositoryDialogParams;
+  @state() private _dialogParams?: HassioRepositoryDialogParams;
 
-  @internalProperty() private _opened = false;
+  @state() private _opened = false;
 
-  @internalProperty() private _processing = false;
+  @state() private _processing = false;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
   public async showDialog(
     dialogParams: HassioRepositoryDialogParams
@@ -76,7 +67,7 @@ class HassioRepositoriesDialog extends LitElement {
     return html`
       <ha-dialog
         .open=${this._opened}
-        @closing=${this.closeDialog}
+        @closed=${this.closeDialog}
         scrimClickAction
         escapeKeyAction
         .heading=${createCloseHeading(
@@ -137,7 +128,7 @@ class HassioRepositoriesDialog extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       haStyleDialog,
diff --git a/hassio/src/dialogs/snapshot/dialog-hassio-create-snapshot.ts b/hassio/src/dialogs/snapshot/dialog-hassio-create-snapshot.ts
new file mode 100755
index 0000000000..395640401f
--- /dev/null
+++ b/hassio/src/dialogs/snapshot/dialog-hassio-create-snapshot.ts
@@ -0,0 +1,142 @@
+import "@material/mwc-button";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/buttons/ha-progress-button";
+import { createCloseHeading } from "../../../../src/components/ha-dialog";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import {
+  createHassioFullSnapshot,
+  createHassioPartialSnapshot,
+} from "../../../../src/data/hassio/snapshot";
+import { showAlertDialog } from "../../../../src/dialogs/generic/show-dialog-box";
+import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
+import { HomeAssistant } from "../../../../src/types";
+import "../../components/supervisor-snapshot-content";
+import type { SupervisorSnapshotContent } from "../../components/supervisor-snapshot-content";
+import { HassioCreateSnapshotDialogParams } from "./show-dialog-hassio-create-snapshot";
+
+@customElement("dialog-hassio-create-snapshot")
+class HassioCreateSnapshotDialog extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _dialogParams?: HassioCreateSnapshotDialogParams;
+
+  @state() private _error?: string;
+
+  @state() private _creatingSnapshot = false;
+
+  @query("supervisor-snapshot-content")
+  private _snapshotContent!: SupervisorSnapshotContent;
+
+  public showDialog(params: HassioCreateSnapshotDialogParams) {
+    this._dialogParams = params;
+    this._creatingSnapshot = false;
+  }
+
+  public closeDialog() {
+    this._dialogParams = undefined;
+    this._creatingSnapshot = false;
+    this._error = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render(): TemplateResult {
+    if (!this._dialogParams) {
+      return html``;
+    }
+    return html`
+      <ha-dialog
+        open
+        scrimClickAction
+        @closed=${this.closeDialog}
+        .heading=${createCloseHeading(
+          this.hass,
+          this._dialogParams.supervisor.localize("snapshot.create_snapshot")
+        )}
+      >
+        ${this._creatingSnapshot
+          ? html` <ha-circular-progress active></ha-circular-progress>`
+          : html`<supervisor-snapshot-content
+              .hass=${this.hass}
+              .supervisor=${this._dialogParams.supervisor}
+            >
+            </supervisor-snapshot-content>`}
+        ${this._error ? html`<p class="error">Error: ${this._error}</p>` : ""}
+        <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
+          ${this._dialogParams.supervisor.localize("common.close")}
+        </mwc-button>
+        <mwc-button
+          .disabled=${this._creatingSnapshot}
+          slot="primaryAction"
+          @click=${this._createSnapshot}
+        >
+          ${this._dialogParams.supervisor.localize("snapshot.create")}
+        </mwc-button>
+      </ha-dialog>
+    `;
+  }
+
+  private async _createSnapshot(): Promise<void> {
+    if (this._dialogParams!.supervisor.info.state !== "running") {
+      showAlertDialog(this, {
+        title: this._dialogParams!.supervisor.localize(
+          "snapshot.could_not_create"
+        ),
+        text: this._dialogParams!.supervisor.localize(
+          "snapshot.create_blocked_not_running",
+          "state",
+          this._dialogParams!.supervisor.info.state
+        ),
+      });
+      return;
+    }
+    const snapshotDetails = this._snapshotContent.snapshotDetails();
+    this._creatingSnapshot = true;
+
+    this._error = "";
+    if (
+      this._snapshotContent.snapshotHasPassword &&
+      !this._snapshotContent.snapshotPassword.length
+    ) {
+      this._error = this._dialogParams!.supervisor.localize(
+        "snapshot.enter_password"
+      );
+      this._creatingSnapshot = false;
+      return;
+    }
+
+    try {
+      if (this._snapshotContent.snapshotType === "full") {
+        await createHassioFullSnapshot(this.hass, snapshotDetails);
+      } else {
+        await createHassioPartialSnapshot(this.hass, snapshotDetails);
+      }
+
+      this._dialogParams!.onCreate();
+      this.closeDialog();
+    } catch (err) {
+      this._error = extractApiErrorMessage(err);
+    }
+    this._creatingSnapshot = false;
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      haStyleDialog,
+      css`
+        ha-circular-progress {
+          display: block;
+          text-align: center;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-hassio-create-snapshot": HassioCreateSnapshotDialog;
+  }
+}
diff --git a/hassio/src/dialogs/snapshot/dialog-hassio-snapshot-upload.ts b/hassio/src/dialogs/snapshot/dialog-hassio-snapshot-upload.ts
index d4948bd553..d2ffb1f035 100644
--- a/hassio/src/dialogs/snapshot/dialog-hassio-snapshot-upload.ts
+++ b/hassio/src/dialogs/snapshot/dialog-hassio-snapshot-upload.ts
@@ -1,14 +1,6 @@
 import { mdiClose } from "@mdi/js";
-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 { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-header-bar";
 import { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
@@ -23,7 +15,7 @@ export class DialogHassioSnapshotUpload
   implements HassDialog<HassioSnapshotUploadDialogParams> {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _params?: HassioSnapshotUploadDialogParams;
+  @state() private _params?: HassioSnapshotUploadDialogParams;
 
   public async showDialog(
     params: HassioSnapshotUploadDialogParams
@@ -78,7 +70,7 @@ export class DialogHassioSnapshotUpload
     this.closeDialog();
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts b/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts
index b44c9eb6c3..d6ea47f34c 100755
--- a/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts
+++ b/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts
@@ -1,20 +1,12 @@
-import "@material/mwc-button";
-import { mdiClose, mdiDelete, mdiDownload, mdiHistory } from "@mdi/js";
-import "@polymer/paper-checkbox/paper-checkbox";
-import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
-import "@polymer/paper-input/paper-input";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { ActionDetail } from "@material/mwc-list";
+import "@material/mwc-list/mwc-list-item";
+import { mdiDotsVertical } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import "../../../../src/components/ha-header-bar";
+import "../../../../src/components/buttons/ha-progress-button";
+import "../../../../src/components/ha-button-menu";
+import { createCloseHeading } from "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-svg-icon";
 import { getSignedPath } from "../../../../src/data/auth";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
@@ -22,95 +14,46 @@ import {
   fetchHassioSnapshotInfo,
   HassioSnapshotDetail,
 } from "../../../../src/data/hassio/snapshot";
-import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../../../src/dialogs/generic/show-dialog-box";
-import { PolymerChangedEvent } from "../../../../src/polymer-types";
+import { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
+import "../../components/supervisor-snapshot-content";
+import type { SupervisorSnapshotContent } from "../../components/supervisor-snapshot-content";
 import { HassioSnapshotDialogParams } from "./show-dialog-hassio-snapshot";
 
-const _computeFolders = (folders) => {
-  const list: Array<{ slug: string; name: string; checked: boolean }> = [];
-  if (folders.includes("homeassistant")) {
-    list.push({
-      slug: "homeassistant",
-      name: "Home Assistant configuration",
-      checked: true,
-    });
-  }
-  if (folders.includes("ssl")) {
-    list.push({ slug: "ssl", name: "SSL", checked: true });
-  }
-  if (folders.includes("share")) {
-    list.push({ slug: "share", name: "Share", checked: true });
-  }
-  if (folders.includes("addons/local")) {
-    list.push({ slug: "addons/local", name: "Local add-ons", checked: true });
-  }
-  return list;
-};
-
-const _computeAddons = (addons) =>
-  addons.map((addon) => ({
-    slug: addon.slug,
-    name: addon.name,
-    version: addon.version,
-    checked: true,
-  }));
-
-interface AddonItem {
-  slug: string;
-  name: string;
-  version: string;
-  checked: boolean | null | undefined;
-}
-
-interface FolderItem {
-  slug: string;
-  name: string;
-  checked: boolean | null | undefined;
-}
-
 @customElement("dialog-hassio-snapshot")
-class HassioSnapshotDialog extends LitElement {
+class HassioSnapshotDialog
+  extends LitElement
+  implements HassDialog<HassioSnapshotDialogParams> {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public supervisor?: Supervisor;
+  @state() private _error?: string;
 
-  @internalProperty() private _error?: string;
+  @state() private _snapshot?: HassioSnapshotDetail;
 
-  @internalProperty() private _onboarding = false;
+  @state() private _dialogParams?: HassioSnapshotDialogParams;
 
-  @internalProperty() private _snapshot?: HassioSnapshotDetail;
+  @state() private _restoringSnapshot = false;
 
-  @internalProperty() private _folders!: FolderItem[];
-
-  @internalProperty() private _addons!: AddonItem[];
-
-  @internalProperty() private _dialogParams?: HassioSnapshotDialogParams;
-
-  @internalProperty() private _snapshotPassword!: string;
-
-  @internalProperty() private _restoreHass = true;
+  @query("supervisor-snapshot-content")
+  private _snapshotContent!: SupervisorSnapshotContent;
 
   public async showDialog(params: HassioSnapshotDialogParams) {
     this._snapshot = await fetchHassioSnapshotInfo(this.hass, params.slug);
-    this._folders = _computeFolders(
-      this._snapshot?.folders
-    ).sort((a: FolderItem, b: FolderItem) => (a.name > b.name ? 1 : -1));
-    this._addons = _computeAddons(
-      this._snapshot?.addons
-    ).sort((a: AddonItem, b: AddonItem) => (a.name > b.name ? 1 : -1));
-
     this._dialogParams = params;
-    this._onboarding = params.onboarding ?? false;
-    this.supervisor = params.supervisor;
-    if (!this._snapshot.homeassistant) {
-      this._restoreHass = false;
-    }
+    this._restoringSnapshot = false;
+  }
+
+  public closeDialog() {
+    this._snapshot = undefined;
+    this._dialogParams = undefined;
+    this._restoringSnapshot = false;
+    this._error = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
   protected render(): TemplateResult {
@@ -118,202 +61,92 @@ class HassioSnapshotDialog extends LitElement {
       return html``;
     }
     return html`
-      <ha-dialog open @closing=${this._closeDialog} .heading=${true}>
-        <div slot="heading">
-          <ha-header-bar>
-            <span slot="title"> ${this._computeName} </span>
-            <mwc-icon-button slot="actionItems" dialogAction="cancel">
-              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-            </mwc-icon-button>
-          </ha-header-bar>
-        </div>
-        <div class="details">
-          ${this._snapshot.type === "full"
-            ? "Full snapshot"
-            : "Partial snapshot"}
-          (${this._computeSize})<br />
-          ${this._formatDatetime(this._snapshot.date)}
-        </div>
-        ${this._snapshot.homeassistant
-          ? html`<div>Home Assistant:</div>
-              <paper-checkbox
-                .checked=${this._restoreHass}
-                @change="${(ev: Event) => {
-                  this._restoreHass = (ev.target as PaperCheckboxElement).checked!;
-                }}"
-              >
-                Home Assistant ${this._snapshot.homeassistant}
-              </paper-checkbox>`
-          : ""}
-        ${this._folders.length
-          ? html`
-              <div>Folders:</div>
-              <paper-dialog-scrollable class="no-margin-top">
-                ${this._folders.map(
-                  (item) => html`
-                    <paper-checkbox
-                      .checked=${item.checked}
-                      @change="${(ev: Event) =>
-                        this._updateFolders(
-                          item,
-                          (ev.target as PaperCheckboxElement).checked
-                        )}"
-                    >
-                      ${item.name}
-                    </paper-checkbox>
-                  `
-                )}
-              </paper-dialog-scrollable>
-            `
-          : ""}
-        ${this._addons.length
-          ? html`
-              <div>Add-on:</div>
-              <paper-dialog-scrollable class="no-margin-top">
-                ${this._addons.map(
-                  (item) => html`
-                    <paper-checkbox
-                      .checked=${item.checked}
-                      @change="${(ev: Event) =>
-                        this._updateAddons(
-                          item,
-                          (ev.target as PaperCheckboxElement).checked
-                        )}"
-                    >
-                      ${item.name}
-                    </paper-checkbox>
-                  `
-                )}
-              </paper-dialog-scrollable>
-            `
-          : ""}
-        ${this._snapshot.protected
-          ? html`
-              <paper-input
-                autofocus=""
-                label="Password"
-                type="password"
-                @value-changed=${this._passwordInput}
-                .value=${this._snapshotPassword}
-              ></paper-input>
-            `
-          : ""}
-        ${this._error ? html` <p class="error">Error: ${this._error}</p> ` : ""}
+      <ha-dialog
+        open
+        scrimClickAction
+        @closed=${this.closeDialog}
+        .heading=${createCloseHeading(this.hass, this._computeName)}
+      >
+        ${this._restoringSnapshot
+          ? html` <ha-circular-progress active></ha-circular-progress>`
+          : html`<supervisor-snapshot-content
+              .hass=${this.hass}
+              .supervisor=${this._dialogParams.supervisor}
+              .snapshot=${this._snapshot}
+            >
+            </supervisor-snapshot-content>`}
+        ${this._error ? html`<p class="error">Error: ${this._error}</p>` : ""}
 
-        <div class="button-row" slot="primaryAction">
-          <mwc-button @click=${this._partialRestoreClicked}>
-            <ha-svg-icon .path=${mdiHistory} class="icon"></ha-svg-icon>
-            Restore Selected
-          </mwc-button>
-          ${!this._onboarding
-            ? html`
-                <mwc-button @click=${this._deleteClicked}>
-                  <ha-svg-icon .path=${mdiDelete} class="icon warning">
-                  </ha-svg-icon>
-                  <span class="warning">Delete Snapshot</span>
-                </mwc-button>
-              `
-            : ""}
-        </div>
-        <div class="button-row" slot="secondaryAction">
-          ${this._snapshot.type === "full"
-            ? html`
-                <mwc-button @click=${this._fullRestoreClicked}>
-                  <ha-svg-icon .path=${mdiHistory} class="icon"></ha-svg-icon>
-                  Restore Everything
-                </mwc-button>
-              `
-            : ""}
-          ${!this._onboarding
-            ? html`<mwc-button @click=${this._downloadClicked}>
-                <ha-svg-icon .path=${mdiDownload} class="icon"></ha-svg-icon>
-                Download Snapshot
-              </mwc-button>`
-            : ""}
-        </div>
+        <mwc-button
+          .disabled=${this._restoringSnapshot}
+          slot="secondaryAction"
+          @click=${this._restoreClicked}
+        >
+          Restore
+        </mwc-button>
+
+        <ha-button-menu
+          fixed
+          slot="primaryAction"
+          @action=${this._handleMenuAction}
+          @closed=${(ev: Event) => ev.stopPropagation()}
+        >
+          <mwc-icon-button slot="trigger" alt="menu">
+            <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+          </mwc-icon-button>
+          <mwc-list-item>Download Snapshot</mwc-list-item>
+          <mwc-list-item class="error">Delete Snapshot</mwc-list-item>
+        </ha-button-menu>
       </ha-dialog>
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       haStyleDialog,
       css`
-        paper-checkbox {
+        ha-svg-icon {
+          color: var(--primary-text-color);
+        }
+        ha-circular-progress {
           display: block;
-          margin: 4px;
-        }
-        mwc-button ha-svg-icon {
-          margin-right: 4px;
-        }
-        .button-row {
-          display: grid;
-          gap: 8px;
-          margin-right: 8px;
-        }
-        .details {
-          color: var(--secondary-text-color);
-        }
-        .warning,
-        .error {
-          color: var(--error-color);
-        }
-        .buttons li {
-          list-style-type: none;
-        }
-        .buttons .icon {
-          margin-right: 16px;
-        }
-        .no-margin-top {
-          margin-top: 0;
-        }
-        ha-header-bar {
-          --mdc-theme-on-primary: var(--primary-text-color);
-          --mdc-theme-primary: var(--mdc-theme-surface);
-          flex-shrink: 0;
-        }
-        /* overrule the ha-style-dialog max-height on small screens */
-        @media all and (max-width: 450px), all and (max-height: 500px) {
-          ha-header-bar {
-            --mdc-theme-primary: var(--app-header-background-color);
-            --mdc-theme-on-primary: var(--app-header-text-color, white);
-          }
+          text-align: center;
         }
       `,
     ];
   }
 
-  private _updateFolders(item: FolderItem, value: boolean | null | undefined) {
-    this._folders = this._folders.map((folder) => {
-      if (folder.slug === item.slug) {
-        folder.checked = value;
-      }
-      return folder;
-    });
+  private _handleMenuAction(ev: CustomEvent<ActionDetail>) {
+    switch (ev.detail.index) {
+      case 0:
+        this._downloadClicked();
+        break;
+      case 1:
+        this._deleteClicked();
+        break;
+    }
   }
 
-  private _updateAddons(item: AddonItem, value: boolean | null | undefined) {
-    this._addons = this._addons.map((addon) => {
-      if (addon.slug === item.slug) {
-        addon.checked = value;
-      }
-      return addon;
-    });
+  private async _restoreClicked() {
+    const snapshotDetails = this._snapshotContent.snapshotDetails();
+    this._restoringSnapshot = true;
+    if (this._snapshotContent.snapshotType === "full") {
+      await this._fullRestoreClicked(snapshotDetails);
+    } else {
+      await this._partialRestoreClicked(snapshotDetails);
+    }
+    this._restoringSnapshot = false;
   }
 
-  private _passwordInput(ev: PolymerChangedEvent<string>) {
-    this._snapshotPassword = ev.detail.value;
-  }
-
-  private async _partialRestoreClicked() {
+  private async _partialRestoreClicked(snapshotDetails) {
     if (
-      this.supervisor !== undefined &&
-      this.supervisor.info.state !== "running"
+      this._dialogParams?.supervisor !== undefined &&
+      this._dialogParams?.supervisor.info.state !== "running"
     ) {
       await showAlertDialog(this, {
         title: "Could not restore snapshot",
-        text: `Restoring a snapshot is not possible right now because the system is in ${this.supervisor.info.state} state.`,
+        text: `Restoring a snapshot is not possible right now because the system is in ${this._dialogParams?.supervisor.info.state} state.`,
       });
       return;
     }
@@ -327,41 +160,17 @@ class HassioSnapshotDialog extends LitElement {
       return;
     }
 
-    const addons = this._addons
-      .filter((addon) => addon.checked)
-      .map((addon) => addon.slug);
-
-    const folders = this._folders
-      .filter((folder) => folder.checked)
-      .map((folder) => folder.slug);
-
-    const data: {
-      homeassistant: boolean;
-      addons: any;
-      folders: any;
-      password?: string;
-    } = {
-      homeassistant: this._restoreHass,
-      addons,
-      folders,
-    };
-
-    if (this._snapshot!.protected) {
-      data.password = this._snapshotPassword;
-    }
-
-    if (!this._onboarding) {
+    if (!this._dialogParams?.onboarding) {
       this.hass
         .callApi(
           "POST",
 
           `hassio/snapshots/${this._snapshot!.slug}/restore/partial`,
-          data
+          snapshotDetails
         )
         .then(
           () => {
-            alert("Snapshot restored!");
-            this._closeDialog();
+            this.closeDialog();
           },
           (error) => {
             this._error = error.body.message;
@@ -371,20 +180,20 @@ class HassioSnapshotDialog extends LitElement {
       fireEvent(this, "restoring");
       fetch(`/api/hassio/snapshots/${this._snapshot!.slug}/restore/partial`, {
         method: "POST",
-        body: JSON.stringify(data),
+        body: JSON.stringify(snapshotDetails),
       });
-      this._closeDialog();
+      this.closeDialog();
     }
   }
 
-  private async _fullRestoreClicked() {
+  private async _fullRestoreClicked(snapshotDetails) {
     if (
-      this.supervisor !== undefined &&
-      this.supervisor.info.state !== "running"
+      this._dialogParams?.supervisor !== undefined &&
+      this._dialogParams?.supervisor.info.state !== "running"
     ) {
       await showAlertDialog(this, {
         title: "Could not restore snapshot",
-        text: `Restoring a snapshot is not possible right now because the system is in ${this.supervisor.info.state} state.`,
+        text: `Restoring a snapshot is not possible right now because the system is in ${this._dialogParams?.supervisor.info.state} state.`,
       });
       return;
     }
@@ -399,20 +208,16 @@ class HassioSnapshotDialog extends LitElement {
       return;
     }
 
-    const data = this._snapshot!.protected
-      ? { password: this._snapshotPassword }
-      : undefined;
-    if (!this._onboarding) {
+    if (!this._dialogParams?.onboarding) {
       this.hass
         .callApi(
           "POST",
           `hassio/snapshots/${this._snapshot!.slug}/restore/full`,
-          data
+          snapshotDetails
         )
         .then(
           () => {
-            alert("Snapshot restored!");
-            this._closeDialog();
+            this.closeDialog();
           },
           (error) => {
             this._error = error.body.message;
@@ -422,9 +227,9 @@ class HassioSnapshotDialog extends LitElement {
       fireEvent(this, "restoring");
       fetch(`/api/hassio/snapshots/${this._snapshot!.slug}/restore/full`, {
         method: "POST",
-        body: JSON.stringify(data),
+        body: JSON.stringify(snapshotDetails),
       });
-      this._closeDialog();
+      this.closeDialog();
     }
   }
 
@@ -447,7 +252,7 @@ class HassioSnapshotDialog extends LitElement {
           if (this._dialogParams!.onDelete) {
             this._dialogParams!.onDelete();
           }
-          this._closeDialog();
+          this.closeDialog();
         },
         (error) => {
           this._error = error.body.message;
@@ -463,7 +268,9 @@ class HassioSnapshotDialog extends LitElement {
         `/api/hassio/snapshots/${this._snapshot!.slug}/download`
       );
     } catch (err) {
-      alert(`Error: ${extractApiErrorMessage(err)}`);
+      await showAlertDialog(this, {
+        text: extractApiErrorMessage(err),
+      });
       return;
     }
 
@@ -494,29 +301,6 @@ class HassioSnapshotDialog extends LitElement {
       ? this._snapshot.name || this._snapshot.slug
       : "Unnamed snapshot";
   }
-
-  private get _computeSize() {
-    return Math.ceil(this._snapshot!.size * 10) / 10 + " MB";
-  }
-
-  private _formatDatetime(datetime) {
-    return new Date(datetime).toLocaleDateString(navigator.language, {
-      weekday: "long",
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-      hour: "numeric",
-      minute: "2-digit",
-    });
-  }
-
-  private _closeDialog() {
-    this._dialogParams = undefined;
-    this._snapshot = undefined;
-    this._snapshotPassword = "";
-    this._folders = [];
-    this._addons = [];
-  }
 }
 
 declare global {
diff --git a/hassio/src/dialogs/snapshot/show-dialog-hassio-create-snapshot.ts b/hassio/src/dialogs/snapshot/show-dialog-hassio-create-snapshot.ts
new file mode 100644
index 0000000000..353caf31a2
--- /dev/null
+++ b/hassio/src/dialogs/snapshot/show-dialog-hassio-create-snapshot.ts
@@ -0,0 +1,18 @@
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
+
+export interface HassioCreateSnapshotDialogParams {
+  supervisor: Supervisor;
+  onCreate: () => void;
+}
+
+export const showHassioCreateSnapshotDialog = (
+  element: HTMLElement,
+  dialogParams: HassioCreateSnapshotDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-hassio-create-snapshot",
+    dialogImport: () => import("./dialog-hassio-create-snapshot"),
+    dialogParams,
+  });
+};
diff --git a/hassio/src/dialogs/suggestAddonRestart.ts b/hassio/src/dialogs/suggestAddonRestart.ts
index 12b8d383d7..d3bb5b1653 100644
--- a/hassio/src/dialogs/suggestAddonRestart.ts
+++ b/hassio/src/dialogs/suggestAddonRestart.ts
@@ -1,4 +1,4 @@
-import type { LitElement } from "lit-element";
+import type { LitElement } from "lit";
 import {
   HassioAddonDetails,
   restartHassioAddon,
diff --git a/hassio/src/dialogs/update/dialog-supervisor-update.ts b/hassio/src/dialogs/update/dialog-supervisor-update.ts
index 47f509331d..e017c9d2f9 100644
--- a/hassio/src/dialogs/update/dialog-supervisor-update.ts
+++ b/hassio/src/dialogs/update/dialog-supervisor-update.ts
@@ -1,13 +1,6 @@
 import "@material/mwc-button/mwc-button";
-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 { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-dialog";
@@ -27,15 +20,15 @@ import { SupervisorDialogSupervisorUpdateParams } from "./show-dialog-update";
 class DialogSupervisorUpdate extends LitElement {
   public hass!: HomeAssistant;
 
-  @internalProperty() private _opened = false;
+  @state() private _opened = false;
 
-  @internalProperty() private _createSnapshot = true;
+  @state() private _createSnapshot = true;
 
-  @internalProperty() private _action: "snapshot" | "update" | null = null;
+  @state() private _action: "snapshot" | "update" | null = null;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty()
+  @state()
   private _dialogParams?: SupervisorDialogSupervisorUpdateParams;
 
   public async showDialog(
@@ -173,7 +166,7 @@ class DialogSupervisorUpdate extends LitElement {
     this.closeDialog();
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       haStyleDialog,
diff --git a/hassio/src/entrypoint.ts b/hassio/src/entrypoint.ts
index 24d3e45359..48c4a33180 100644
--- a/hassio/src/entrypoint.ts
+++ b/hassio/src/entrypoint.ts
@@ -15,5 +15,11 @@ body {
   padding: 0;
   height: 100vh;
 }
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #111111;
+    color: #e1e1e1;
+  }
+}
 `;
 document.head.appendChild(styleEl);
diff --git a/hassio/src/hassio-main.ts b/hassio/src/hassio-main.ts
index e5b8f89530..280654bf7d 100644
--- a/hassio/src/hassio-main.ts
+++ b/hassio/src/hassio-main.ts
@@ -1,7 +1,11 @@
-import { customElement, html, property, PropertyValues } from "lit-element";
+import { html, PropertyValues } from "lit";
+import { customElement, property } from "lit/decorators";
 import { atLeastVersion } from "../../src/common/config/version";
 import { applyThemesOnElement } from "../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../src/common/dom/fire_event";
+import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
+import { mainWindow } from "../../src/common/dom/get_main_window";
+import { navigate } from "../../src/common/navigate";
 import { HassioPanelInfo } from "../../src/data/hassio/supervisor";
 import { Supervisor } from "../../src/data/supervisor/supervisor";
 import { makeDialogManager } from "../../src/dialogs/make-dialog-manager";
@@ -46,14 +50,23 @@ export class HassioMain extends SupervisorBaseElement {
     // listen on this element for navigation events, so we need to forward them.
 
     // Joakim - April 26, 2021
-    // Due to changes in behavior in Google Chrome, we changed navigate to fire on the top element
-    top.addEventListener("location-changed", (ev) =>
+    // Due to changes in behavior in Google Chrome, we changed navigate to listen on the top element
+    mainWindow.addEventListener("location-changed", (ev) =>
       // @ts-ignore
       fireEvent(this, ev.type, ev.detail, {
         bubbles: false,
       })
     );
 
+    // Paulus - May 17, 2021
+    // Convert the <a> tags to native nav in Home Assistant < 2021.6
+    document.body.addEventListener("click", (ev) => {
+      const href = isNavigationClick(ev);
+      if (href) {
+        navigate(href);
+      }
+    });
+
     // Forward haptic events to parent window.
     window.addEventListener("haptic", (ev) => {
       // @ts-ignore
@@ -90,25 +103,27 @@ export class HassioMain extends SupervisorBaseElement {
 
   private _applyTheme() {
     let themeName: string;
-    let options: Partial<HomeAssistant["selectedTheme"]> | undefined;
+    let themeSettings:
+      | Partial<HomeAssistant["selectedThemeSettings"]>
+      | undefined;
 
     if (atLeastVersion(this.hass.config.version, 0, 114)) {
       themeName =
-        this.hass.selectedTheme?.theme ||
+        this.hass.selectedThemeSettings?.theme ||
         (this.hass.themes.darkMode && this.hass.themes.default_dark_theme
           ? this.hass.themes.default_dark_theme!
           : this.hass.themes.default_theme);
 
-      options = this.hass.selectedTheme;
-      if (themeName === "default" && options?.dark === undefined) {
-        options = {
-          ...this.hass.selectedTheme,
+      themeSettings = this.hass.selectedThemeSettings;
+      if (themeSettings?.dark === undefined) {
+        themeSettings = {
+          ...this.hass.selectedThemeSettings,
           dark: this.hass.themes.darkMode,
         };
       }
     } else {
       themeName =
-        ((this.hass.selectedTheme as unknown) as string) ||
+        ((this.hass.selectedThemeSettings as unknown) as string) ||
         this.hass.themes.default_theme;
     }
 
@@ -116,7 +131,7 @@ export class HassioMain extends SupervisorBaseElement {
       this.parentElement,
       this.hass.themes,
       themeName,
-      options
+      themeSettings
     );
   }
 }
diff --git a/hassio/src/hassio-my-redirect.ts b/hassio/src/hassio-my-redirect.ts
index ff9a40b399..54d0d928ca 100644
--- a/hassio/src/hassio-my-redirect.ts
+++ b/hassio/src/hassio-my-redirect.ts
@@ -1,11 +1,4 @@
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
 import { sanitizeUrl } from "@braintree/sanitize-url";
 import {
   createSearchParam,
@@ -20,6 +13,7 @@ import {
 import { navigate } from "../../src/common/navigate";
 import { HomeAssistant, Route } from "../../src/types";
 import { Supervisor } from "../../src/data/supervisor/supervisor";
+import { customElement, property, state } from "lit/decorators";
 
 const REDIRECTS: Redirects = {
   supervisor: {
@@ -43,6 +37,12 @@ const REDIRECTS: Redirects = {
       addon: "string",
     },
   },
+  supervisor_ingress: {
+    redirect: "/hassio/ingress",
+    params: {
+      addon: "string",
+    },
+  },
   supervisor_add_addon_repository: {
     redirect: "/hassio/store",
     params: {
@@ -59,7 +59,7 @@ class HassioMyRedirect extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
-  @internalProperty() public _error?: TemplateResult | string;
+  @state() public _error?: TemplateResult | string;
 
   connectedCallback() {
     super.connectedCallback();
@@ -89,7 +89,7 @@ class HassioMyRedirect extends LitElement {
       return;
     }
 
-    navigate(this, url, true);
+    navigate(url, { replace: true });
   }
 
   protected render(): TemplateResult {
diff --git a/hassio/src/hassio-panel-router.ts b/hassio/src/hassio-panel-router.ts
index 7207d70c7b..28d9f24519 100644
--- a/hassio/src/hassio-panel-router.ts
+++ b/hassio/src/hassio-panel-router.ts
@@ -1,4 +1,4 @@
-import { customElement, property } from "lit-element";
+import { customElement, property } from "lit/decorators";
 import { Supervisor } from "../../src/data/supervisor/supervisor";
 import {
   HassRouterPage,
diff --git a/hassio/src/hassio-panel.ts b/hassio/src/hassio-panel.ts
index c52339821e..6c6dc54c7c 100644
--- a/hassio/src/hassio-panel.ts
+++ b/hassio/src/hassio-panel.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,
   supervisorCollection,
@@ -46,7 +39,7 @@ class HassioPanel extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         --app-header-background-color: var(--sidebar-background-color);
diff --git a/hassio/src/hassio-router.ts b/hassio/src/hassio-router.ts
index 4e71ca7ca6..082688399e 100644
--- a/hassio/src/hassio-router.ts
+++ b/hassio/src/hassio-router.ts
@@ -1,4 +1,4 @@
-import { customElement, property } from "lit-element";
+import { customElement, property } from "lit/decorators";
 import { HassioPanelInfo } from "../../src/data/hassio/supervisor";
 import { Supervisor } from "../../src/data/supervisor/supervisor";
 import {
@@ -61,11 +61,10 @@ class HassioRouter extends HassRouterPage {
     el.hass = this.hass;
     el.narrow = this.narrow;
     el.route = route;
+    el.supervisor = this.supervisor;
 
     if (el.localName === "hassio-ingress-view") {
       el.ingressPanel = this.panel.config && this.panel.config.ingress;
-    } else {
-      el.supervisor = this.supervisor;
     }
   }
 
diff --git a/hassio/src/ingress-view/hassio-ingress-view.ts b/hassio/src/ingress-view/hassio-ingress-view.ts
index 531673ac2f..710cf3b5e3 100644
--- a/hassio/src/ingress-view/hassio-ingress-view.ts
+++ b/hassio/src/ingress-view/hassio-ingress-view.ts
@@ -1,25 +1,27 @@
 import { mdiMenu } from "@mdi/js";
 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 { navigate } from "../../../src/common/navigate";
+import { extractSearchParam } from "../../../src/common/url/search-params";
+import { nextRender } from "../../../src/common/util/render-status";
 import {
   fetchHassioAddonInfo,
   HassioAddonDetails,
 } from "../../../src/data/hassio/addon";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import {
   createHassioSession,
   validateHassioSession,
 } from "../../../src/data/hassio/ingress";
+import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
 import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-subpage";
@@ -29,11 +31,13 @@ import { HomeAssistant, Route } from "../../../src/types";
 class HassioIngressView extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
   @property() public route!: Route;
 
   @property() public ingressPanel = false;
 
-  @internalProperty() private _addon?: HassioAddonDetails;
+  @state() private _addon?: HassioAddonDetails;
 
   @property({ type: Boolean })
   public narrow = false;
@@ -80,6 +84,36 @@ class HassioIngressView extends LitElement {
       : iframe}`;
   }
 
+  protected async firstUpdated(): Promise<void> {
+    if (this.route.path === "") {
+      const requestedAddon = extractSearchParam("addon");
+      let addonInfo: HassioAddonDetails;
+      if (requestedAddon) {
+        try {
+          addonInfo = await fetchHassioAddonInfo(this.hass, requestedAddon);
+        } catch (err) {
+          await showAlertDialog(this, {
+            text: extractApiErrorMessage(err),
+            title: requestedAddon,
+          });
+          await nextRender();
+          history.back();
+          return;
+        }
+        if (!addonInfo.ingress) {
+          await showAlertDialog(this, {
+            text: this.supervisor.localize("my.error_addon_no_ingress"),
+            title: addonInfo.name,
+          });
+          await nextRender();
+          history.back();
+        } else {
+          navigate(`/hassio/ingress/${addonInfo.slug}`, { replace: true });
+        }
+      }
+    }
+  }
+
   protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
 
@@ -109,6 +143,7 @@ class HassioIngressView extends LitElement {
         text: "Unable to fetch add-on info to start Ingress",
         title: "Supervisor",
       });
+      await nextRender();
       history.back();
       return;
     }
@@ -118,6 +153,7 @@ class HassioIngressView extends LitElement {
         text: "Add-on does not support Ingress",
         title: addon.name,
       });
+      await nextRender();
       history.back();
       return;
     }
@@ -127,7 +163,8 @@ class HassioIngressView extends LitElement {
         text: "Add-on is not running. Please start it first",
         title: addon.name,
       });
-      navigate(this, `/hassio/addon/${addon.slug}/info`, true);
+      await nextRender();
+      navigate(`/hassio/addon/${addon.slug}/info`, { replace: true });
       return;
     }
 
@@ -140,6 +177,7 @@ class HassioIngressView extends LitElement {
         text: "Unable to create an Ingress session",
         title: addon.name,
       });
+      await nextRender();
       history.back();
       return;
     }
@@ -162,7 +200,7 @@ class HassioIngressView extends LitElement {
     fireEvent(this, "hass-toggle-menu");
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       iframe {
         display: block;
diff --git a/hassio/src/resources/hassio-style.ts b/hassio/src/resources/hassio-style.ts
index 99329ee08f..5d52f618da 100644
--- a/hassio/src/resources/hassio-style.ts
+++ b/hassio/src/resources/hassio-style.ts
@@ -1,4 +1,4 @@
-import { css } from "lit-element";
+import { css } from "lit";
 
 export const hassioStyle = css`
   .content {
diff --git a/hassio/src/snapshots/hassio-snapshots.ts b/hassio/src/snapshots/hassio-snapshots.ts
index cf44e561b4..a13f37c9d2 100644
--- a/hassio/src/snapshots/hassio-snapshots.ts
+++ b/hassio/src/snapshots/hassio-snapshots.ts
@@ -1,118 +1,163 @@
 import "@material/mwc-button";
-import "@material/mwc-icon-button";
-import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
+import { ActionDetail } from "@material/mwc-list";
 import "@material/mwc-list/mwc-list-item";
+import { mdiDotsVertical, mdiPlus } from "@mdi/js";
 import {
-  mdiDotsVertical,
-  mdiPackageVariant,
-  mdiPackageVariantClosed,
-} from "@mdi/js";
-import "@polymer/paper-checkbox/paper-checkbox";
-import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
-import "@polymer/paper-input/paper-input";
-import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import "@polymer/paper-radio-button/paper-radio-button";
-import "@polymer/paper-radio-group/paper-radio-group";
-import type { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
-import {
-  css,
-  CSSResultArray,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
-import "../../../src/components/buttons/ha-progress-button";
-import "../../../src/components/ha-button-menu";
-import "../../../src/components/ha-card";
-import "../../../src/components/ha-svg-icon";
-import { extractApiErrorMessage } from "../../../src/data/hassio/common";
+import relativeTime from "../../../src/common/datetime/relative_time";
+import { HASSDomEvent } from "../../../src/common/dom/fire_event";
+import {
+  DataTableColumnContainer,
+  RowClickedEvent,
+} from "../../../src/components/data-table/ha-data-table";
+import "../../../src/components/ha-button-menu";
+import "../../../src/components/ha-fab";
 import {
-  createHassioFullSnapshot,
-  createHassioPartialSnapshot,
   fetchHassioSnapshots,
-  HassioFullSnapshotCreateParams,
-  HassioPartialSnapshotCreateParams,
+  friendlyFolderName,
   HassioSnapshot,
   reloadHassioSnapshots,
 } from "../../../src/data/hassio/snapshot";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
-import "../../../src/layouts/hass-tabs-subpage";
-import { PolymerChangedEvent } from "../../../src/polymer-types";
+import "../../../src/layouts/hass-tabs-subpage-data-table";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
-import "../components/hassio-card-content";
-import "../components/hassio-upload-snapshot";
+import { showHassioCreateSnapshotDialog } from "../dialogs/snapshot/show-dialog-hassio-create-snapshot";
 import { showHassioSnapshotDialog } from "../dialogs/snapshot/show-dialog-hassio-snapshot";
 import { showSnapshotUploadDialog } from "../dialogs/snapshot/show-dialog-snapshot-upload";
 import { supervisorTabs } from "../hassio-tabs";
 import { hassioStyle } from "../resources/hassio-style";
 
-interface CheckboxItem {
-  slug: string;
-  checked: boolean;
-  name?: string;
-}
-
 @customElement("hassio-snapshots")
-class HassioSnapshots extends LitElement {
+export class HassioSnapshots extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ type: Boolean }) public narrow!: boolean;
-
-  @property({ attribute: false }) public route!: Route;
-
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @internalProperty() private _snapshotName = "";
+  @property({ type: Object }) public route!: Route;
 
-  @internalProperty() private _snapshotPassword = "";
+  @property({ type: Boolean }) public narrow!: boolean;
 
-  @internalProperty() private _snapshotHasPassword = false;
+  @property({ type: Boolean }) public isWide!: boolean;
 
-  @internalProperty() private _snapshotType: HassioSnapshot["type"] = "full";
+  private _firstUpdatedCalled = false;
 
-  @internalProperty() private _snapshots?: HassioSnapshot[] = [];
+  @state() private _snapshots?: HassioSnapshot[] = [];
 
-  @internalProperty() private _addonList: CheckboxItem[] = [];
-
-  @internalProperty() private _folderList: CheckboxItem[] = [
-    {
-      slug: "homeassistant",
-      checked: true,
-    },
-    { slug: "ssl", checked: true },
-    { slug: "share", checked: true },
-    { slug: "media", checked: true },
-    { slug: "addons/local", checked: true },
-  ];
-
-  @internalProperty() private _error = "";
+  public connectedCallback(): void {
+    super.connectedCallback();
+    if (this.hass && this._firstUpdatedCalled) {
+      this.refreshData();
+    }
+  }
 
   public async refreshData() {
     await reloadHassioSnapshots(this.hass);
-    await this._updateSnapshots();
+    await this.fetchSnapshots();
   }
 
+  private _computeSnapshotContent = (snapshot: HassioSnapshot): string => {
+    if (snapshot.type === "full") {
+      return this.supervisor.localize("snapshot.full_snapshot");
+    }
+    const content: string[] = [];
+    if (snapshot.content.homeassistant) {
+      content.push("Home Assistant");
+    }
+    if (snapshot.content.folders.length !== 0) {
+      for (const folder of snapshot.content.folders) {
+        content.push(friendlyFolderName[folder] || folder);
+      }
+    }
+
+    if (snapshot.content.addons.length !== 0) {
+      for (const addon of snapshot.content.addons) {
+        content.push(
+          this.supervisor.supervisor.addons.find(
+            (entry) => entry.slug === addon
+          )?.name || addon
+        );
+      }
+    }
+
+    return content.join(", ");
+  };
+
+  protected firstUpdated(changedProperties: PropertyValues): void {
+    super.firstUpdated(changedProperties);
+    if (this.hass && this.isConnected) {
+      this.refreshData();
+    }
+    this._firstUpdatedCalled = true;
+  }
+
+  private _columns = memoizeOne(
+    (narrow: boolean): DataTableColumnContainer => ({
+      name: {
+        title: this.supervisor?.localize("snapshot.name") || "",
+        sortable: true,
+        filterable: true,
+        grows: true,
+        template: (entry: string, snapshot: any) =>
+          html`${entry || snapshot.slug}
+            <div class="secondary">${snapshot.secondary}</div>`,
+      },
+      date: {
+        title: this.supervisor?.localize("snapshot.created") || "",
+        width: "15%",
+        direction: "desc",
+        hidden: narrow,
+        filterable: true,
+        sortable: true,
+        template: (entry: string) =>
+          relativeTime(new Date(entry), this.hass.localize),
+      },
+      secondary: {
+        title: "",
+        hidden: true,
+        filterable: true,
+      },
+    })
+  );
+
+  private _snapshotData = memoizeOne((snapshots: HassioSnapshot[]) =>
+    snapshots.map((snapshot) => ({
+      ...snapshot,
+      secondary: this._computeSnapshotContent(snapshot),
+    }))
+  );
+
   protected render(): TemplateResult {
+    if (!this.supervisor) {
+      return html``;
+    }
     return html`
-      <hass-tabs-subpage
+      <hass-tabs-subpage-data-table
+        .tabs=${supervisorTabs}
         .hass=${this.hass}
         .localizeFunc=${this.supervisor.localize}
+        .searchLabel=${this.supervisor.localize("search")}
+        .noDataText=${this.supervisor.localize("snapshot.no_snapshots")}
         .narrow=${this.narrow}
         .route=${this.route}
-        .tabs=${supervisorTabs}
+        .columns=${this._columns(this.narrow)}
+        .data=${this._snapshotData(this._snapshots || [])}
+        id="slug"
+        @row-click=${this._handleRowClicked}
+        clickable
+        hasFab
         main-page
         supervisor
       >
-        <span slot="header">
-          ${this.supervisor.localize("panel.snapshots")}
-        </span>
         <ha-button-menu
           corner="BOTTOM_START"
           slot="toolbar-icon"
@@ -122,172 +167,27 @@ class HassioSnapshots extends LitElement {
             <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
           </mwc-icon-button>
           <mwc-list-item>
-            ${this.supervisor.localize("common.reload")}
+            ${this.supervisor?.localize("common.reload")}
           </mwc-list-item>
           ${atLeastVersion(this.hass.config.version, 0, 116)
             ? html`<mwc-list-item>
-                ${this.supervisor.localize("snapshot.upload_snapshot")}
+                ${this.supervisor?.localize("snapshot.upload_snapshot")}
               </mwc-list-item>`
             : ""}
         </ha-button-menu>
 
-        <div class="content">
-          <h1>${this.supervisor.localize("snapshot.create_snapshot")}</h1>
-          <p class="description">
-            ${this.supervisor.localize("snapshot.description")}
-          </p>
-          <div class="card-group">
-            <ha-card>
-              <div class="card-content">
-                <paper-input
-                  autofocus
-                  .label=${this.supervisor.localize("snapshot.name")}
-                  name="snapshotName"
-                  .value=${this._snapshotName}
-                  @value-changed=${this._handleTextValueChanged}
-                ></paper-input>
-                ${this.supervisor.localize("snapshot.type")}:
-                <paper-radio-group
-                  name="snapshotType"
-                  type="${this.supervisor.localize("snapshot.type")}"
-                  .selected=${this._snapshotType}
-                  @selected-changed=${this._handleRadioValueChanged}
-                >
-                  <paper-radio-button name="full">
-                    ${this.supervisor.localize("snapshot.full_snapshot")}
-                  </paper-radio-button>
-                  <paper-radio-button name="partial">
-                    ${this.supervisor.localize("snapshot.partial_snapshot")}
-                  </paper-radio-button>
-                </paper-radio-group>
-                ${this._snapshotType === "full"
-                  ? undefined
-                  : html`
-                      ${this.supervisor.localize("snapshot.folders")}:
-                      ${this._folderList.map(
-                        (folder, idx) => html`
-                          <paper-checkbox
-                            .idx=${idx}
-                            .checked=${folder.checked}
-                            @checked-changed=${this._folderChecked}
-                          >
-                            ${this.supervisor.localize(
-                              `snapshot.folder.${folder.slug}`
-                            )}
-                          </paper-checkbox>
-                        `
-                      )}
-                      ${this.supervisor.localize("snapshot.addons")}:
-                      ${this._addonList.map(
-                        (addon, idx) => html`
-                          <paper-checkbox
-                            .idx=${idx}
-                            .checked=${addon.checked}
-                            @checked-changed=${this._addonChecked}
-                          >
-                            ${addon.name}
-                          </paper-checkbox>
-                        `
-                      )}
-                    `}
-                ${this.supervisor.localize("snapshot.security")}:
-                <paper-checkbox
-                  name="snapshotHasPassword"
-                  .checked=${this._snapshotHasPassword}
-                  @checked-changed=${this._handleCheckboxValueChanged}
-                >
-                  ${this.supervisor.localize("snapshot.password_protection")}
-                </paper-checkbox>
-                ${this._snapshotHasPassword
-                  ? html`
-                      <paper-input
-                        .label=${this.supervisor.localize("snapshot.password")}
-                        type="password"
-                        name="snapshotPassword"
-                        .value=${this._snapshotPassword}
-                        @value-changed=${this._handleTextValueChanged}
-                      ></paper-input>
-                    `
-                  : undefined}
-                ${this._error !== ""
-                  ? html` <p class="error">${this._error}</p> `
-                  : undefined}
-              </div>
-              <div class="card-actions">
-                <ha-progress-button
-                  @click=${this._createSnapshot}
-                  .title=${this.supervisor.info.state !== "running"
-                    ? this.supervisor.localize(
-                        "snapshot.create_blocked_not_running",
-                        "state",
-                        this.supervisor.info.state
-                      )
-                    : ""}
-                  .disabled=${this.supervisor.info.state !== "running"}
-                >
-                  ${this.supervisor.localize("snapshot.create")}
-                </ha-progress-button>
-              </div>
-            </ha-card>
-          </div>
-
-          <h1>${this.supervisor.localize("snapshot.available_snapshots")}</h1>
-          <div class="card-group">
-            ${this._snapshots === undefined
-              ? undefined
-              : this._snapshots.length === 0
-              ? html`
-                  <ha-card>
-                    <div class="card-content">
-                      ${this.supervisor.localize("snapshot.no_snapshots")}
-                    </div>
-                  </ha-card>
-                `
-              : this._snapshots.map(
-                  (snapshot) => html`
-                    <ha-card
-                      class="pointer"
-                      .snapshot=${snapshot}
-                      @click=${this._snapshotClicked}
-                    >
-                      <div class="card-content">
-                        <hassio-card-content
-                          .hass=${this.hass}
-                          .title=${snapshot.name || snapshot.slug}
-                          .description=${this._computeDetails(snapshot)}
-                          .datetime=${snapshot.date}
-                          .icon=${snapshot.type === "full"
-                            ? mdiPackageVariantClosed
-                            : mdiPackageVariant}
-                          icon-class="snapshot"
-                        ></hassio-card-content>
-                      </div>
-                    </ha-card>
-                  `
-                )}
-          </div>
-        </div>
-      </hass-tabs-subpage>
+        <ha-fab
+          slot="fab"
+          @click=${this._createSnapshot}
+          .label=${this.supervisor.localize("snapshot.create_snapshot")}
+          extended
+        >
+          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
+        </ha-fab>
+      </hass-tabs-subpage-data-table>
     `;
   }
 
-  protected firstUpdated(changedProps: PropertyValues) {
-    super.firstUpdated(changedProps);
-    this.refreshData();
-  }
-
-  protected updated(changedProps: PropertyValues) {
-    if (changedProps.has("supervisor")) {
-      this._addonList = this.supervisor.supervisor.addons
-        .map((addon) => ({
-          slug: addon.slug,
-          name: addon.name,
-          checked: true,
-        }))
-        .sort((a, b) => (a.name < b.name ? -1 : 1));
-    }
-  }
-
   private _handleAction(ev: CustomEvent<ActionDetail>) {
     switch (ev.detail.index) {
       case 0:
@@ -299,157 +199,52 @@ class HassioSnapshots extends LitElement {
     }
   }
 
-  private _handleTextValueChanged(ev: PolymerChangedEvent<string>) {
-    const input = ev.currentTarget as PaperInputElement;
-    this[`_${input.name}`] = ev.detail.value;
-  }
-
-  private _handleCheckboxValueChanged(ev) {
-    const input = ev.currentTarget as PaperCheckboxElement;
-    this[`_${input.name}`] = input.checked;
-  }
-
-  private _handleRadioValueChanged(ev: PolymerChangedEvent<string>) {
-    const input = ev.currentTarget as PaperRadioGroupElement;
-    this[`_${input.getAttribute("name")}`] = ev.detail.value;
-  }
-
-  private _folderChecked(ev) {
-    const { idx, checked } = ev.currentTarget!;
-    this._folderList = this._folderList.map((folder, curIdx) =>
-      curIdx === idx ? { ...folder, checked } : folder
-    );
-  }
-
-  private _addonChecked(ev) {
-    const { idx, checked } = ev.currentTarget!;
-    this._addonList = this._addonList.map((addon, curIdx) =>
-      curIdx === idx ? { ...addon, checked } : addon
-    );
-  }
-
-  private async _updateSnapshots() {
-    try {
-      this._snapshots = await fetchHassioSnapshots(this.hass);
-      this._snapshots.sort((a, b) => (a.date < b.date ? 1 : -1));
-    } catch (err) {
-      this._error = extractApiErrorMessage(err);
-    }
-  }
-
-  private async _createSnapshot(ev: CustomEvent): Promise<void> {
-    if (this.supervisor.info.state !== "running") {
-      await showAlertDialog(this, {
-        title: this.supervisor.localize("snapshot.could_not_create"),
-        text: this.supervisor.localize(
-          "snapshot.create_blocked_not_running",
-          "state",
-          this.supervisor.info.state
-        ),
-      });
-    }
-    const button = ev.currentTarget as any;
-    button.progress = true;
-
-    this._error = "";
-    if (this._snapshotHasPassword && !this._snapshotPassword.length) {
-      this._error = this.supervisor.localize("snapshot.enter_password");
-      button.progress = false;
-      return;
-    }
-    await this.updateComplete;
-
-    const name =
-      this._snapshotName ||
-      new Date().toLocaleDateString(navigator.language, {
-        weekday: "long",
-        year: "numeric",
-        month: "short",
-        day: "numeric",
-      });
-
-    try {
-      if (this._snapshotType === "full") {
-        const data: HassioFullSnapshotCreateParams = { name };
-        if (this._snapshotHasPassword) {
-          data.password = this._snapshotPassword;
-        }
-        await createHassioFullSnapshot(this.hass, data);
-      } else {
-        const addons = this._addonList
-          .filter((addon) => addon.checked)
-          .map((addon) => addon.slug);
-        const folders = this._folderList
-          .filter((folder) => folder.checked)
-          .map((folder) => folder.slug);
-
-        const data: HassioPartialSnapshotCreateParams = {
-          name,
-          folders,
-          addons,
-        };
-        if (this._snapshotHasPassword) {
-          data.password = this._snapshotPassword;
-        }
-        await createHassioPartialSnapshot(this.hass, data);
-      }
-      this._updateSnapshots();
-    } catch (err) {
-      this._error = extractApiErrorMessage(err);
-    }
-    button.progress = false;
-  }
-
-  private _computeDetails(snapshot: HassioSnapshot) {
-    const type =
-      snapshot.type === "full"
-        ? this.supervisor.localize("snapshot.full_snapshot")
-        : this.supervisor.localize("snapshot.partial_snapshot");
-    return snapshot.protected ? `${type}, password protected` : type;
-  }
-
-  private _snapshotClicked(ev) {
-    showHassioSnapshotDialog(this, {
-      slug: ev.currentTarget!.snapshot.slug,
-      supervisor: this.supervisor,
-      onDelete: () => this._updateSnapshots(),
-    });
-  }
-
   private _showUploadSnapshotDialog() {
     showSnapshotUploadDialog(this, {
       showSnapshot: (slug: string) =>
         showHassioSnapshotDialog(this, {
           slug,
           supervisor: this.supervisor,
-          onDelete: () => this._updateSnapshots(),
+          onDelete: () => this.fetchSnapshots(),
         }),
       reloadSnapshot: () => this.refreshData(),
     });
   }
 
-  static get styles(): CSSResultArray {
-    return [
-      haStyle,
-      hassioStyle,
-      css`
-        paper-radio-group {
-          display: block;
-        }
-        paper-radio-button {
-          padding: 0 0 2px 2px;
-        }
-        paper-radio-button,
-        paper-checkbox,
-        paper-input[type="password"] {
-          display: block;
-          margin: 4px 0 4px 48px;
-        }
-        .pointer {
-          cursor: pointer;
-        }
-      `,
-    ];
+  private async fetchSnapshots() {
+    await reloadHassioSnapshots(this.hass);
+    this._snapshots = await fetchHassioSnapshots(this.hass);
+  }
+
+  private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
+    const slug = ev.detail.id;
+    showHassioSnapshotDialog(this, {
+      slug,
+      supervisor: this.supervisor,
+      onDelete: () => this.fetchSnapshots(),
+    });
+  }
+
+  private _createSnapshot() {
+    if (this.supervisor!.info.state !== "running") {
+      showAlertDialog(this, {
+        title: this.supervisor!.localize("snapshot.could_not_create"),
+        text: this.supervisor!.localize(
+          "snapshot.create_blocked_not_running",
+          "state",
+          this.supervisor!.info.state
+        ),
+      });
+      return;
+    }
+    showHassioCreateSnapshotDialog(this, {
+      supervisor: this.supervisor!,
+      onCreate: () => this.fetchSnapshots(),
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return [haStyle, hassioStyle];
   }
 }
 
diff --git a/hassio/src/supervisor-base-element.ts b/hassio/src/supervisor-base-element.ts
index 2043a8a2ae..9811f36266 100644
--- a/hassio/src/supervisor-base-element.ts
+++ b/hassio/src/supervisor-base-element.ts
@@ -1,10 +1,6 @@
 import { Collection, UnsubscribeFunc } from "home-assistant-js-websocket";
-import {
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-} from "lit-element";
+import { LitElement, PropertyValues } from "lit";
+import { property, state } from "lit/decorators";
 import { atLeastVersion } from "../../src/common/config/version";
 import { computeLocalize } from "../../src/common/translations/localize";
 import { fetchHassioAddonsInfo } from "../../src/data/hassio/addon";
@@ -46,14 +42,11 @@ export class SupervisorBaseElement extends urlSyncMixin(
     localize: () => "",
   };
 
-  @internalProperty() private _unsubs: Record<string, UnsubscribeFunc> = {};
+  @state() private _unsubs: Record<string, UnsubscribeFunc> = {};
 
-  @internalProperty() private _collections: Record<
-    string,
-    Collection<unknown>
-  > = {};
+  @state() private _collections: Record<string, Collection<unknown>> = {};
 
-  @internalProperty() private _language = "en";
+  @state() private _language = "en";
 
   public connectedCallback(): void {
     super.connectedCallback();
diff --git a/hassio/src/system/hassio-core-info.ts b/hassio/src/system/hassio-core-info.ts
index bdb156fe20..e335a1df78 100644
--- a/hassio/src/system/hassio-core-info.ts
+++ b/hassio/src/system/hassio-core-info.ts
@@ -1,15 +1,7 @@
 import "@material/mwc-button";
 import "@material/mwc-list/mwc-list-item";
-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 { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-button-menu";
@@ -39,7 +31,7 @@ class HassioCoreInfo extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @internalProperty() private _metrics?: HassioStats;
+  @state() private _metrics?: HassioStats;
 
   protected render(): TemplateResult | void {
     const metrics = [
@@ -189,7 +181,7 @@ class HassioCoreInfo extends LitElement {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
diff --git a/hassio/src/system/hassio-host-info.ts b/hassio/src/system/hassio-host-info.ts
index db5e4e2f7e..cde6becf58 100644
--- a/hassio/src/system/hassio-host-info.ts
+++ b/hassio/src/system/hassio-host-info.ts
@@ -2,16 +2,9 @@ import "@material/mwc-button";
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
-import { safeDump } from "js-yaml";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { dump } from "js-yaml";
+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";
@@ -240,7 +233,7 @@ class HassioHostInfo extends LitElement {
       const content = await fetchHassioHardwareInfo(this.hass);
       showHassioMarkdownDialog(this, {
         title: this.supervisor.localize("system.host.hardware"),
-        content: `<pre>${safeDump(content, { indent: 2 })}</pre>`,
+        content: `<pre>${dump(content, { indent: 2 })}</pre>`,
       });
     } catch (err) {
       showAlertDialog(this, {
@@ -415,7 +408,7 @@ class HassioHostInfo extends LitElement {
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
diff --git a/hassio/src/system/hassio-supervisor-info.ts b/hassio/src/system/hassio-supervisor-info.ts
index db60abcdc5..62baf5809e 100644
--- a/hassio/src/system/hassio-supervisor-info.ts
+++ b/hassio/src/system/hassio-supervisor-info.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 { atLeastVersion } from "../../../src/common/config/version";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
@@ -67,7 +59,7 @@ class HassioSupervisorInfo extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @internalProperty() private _metrics?: HassioStats;
+  @state() private _metrics?: HassioStats;
 
   protected render(): TemplateResult | void {
     const metrics = [
@@ -504,7 +496,7 @@ class HassioSupervisorInfo extends LitElement {
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
diff --git a/hassio/src/system/hassio-supervisor-log.ts b/hassio/src/system/hassio-supervisor-log.ts
index 29ce5a242a..ac0f3e8cdc 100644
--- a/hassio/src/system/hassio-supervisor-log.ts
+++ b/hassio/src/system/hassio-supervisor-log.ts
@@ -2,16 +2,8 @@ import "@material/mwc-button";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-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/buttons/ha-progress-button";
 import "../../../src/components/ha-card";
 import { extractApiErrorMessage } from "../../../src/data/hassio/common";
@@ -61,11 +53,11 @@ class HassioSupervisorLog extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _selectedLogProvider = "supervisor";
+  @state() private _selectedLogProvider = "supervisor";
 
-  @internalProperty() private _content?: string;
+  @state() private _content?: string;
 
   public async connectedCallback(): Promise<void> {
     super.connectedCallback();
@@ -146,7 +138,7 @@ class HassioSupervisorLog extends LitElement {
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
diff --git a/hassio/src/system/hassio-system.ts b/hassio/src/system/hassio-system.ts
index 5c02662932..22704fcc4a 100644
--- a/hassio/src/system/hassio-system.ts
+++ b/hassio/src/system/hassio-system.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";
@@ -64,7 +57,7 @@ class HassioSystem extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       hassioStyle,
diff --git a/lint-staged.config.js b/lint-staged.config.js
new file mode 100644
index 0000000000..15d6269cbc
--- /dev/null
+++ b/lint-staged.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  "*.ts": () => "tsc -p tsconfig.json",
+  "*.{js,ts}": "eslint --fix",
+  "!(/translations)*.{js,ts,json,css,md,html}": "prettier --write",
+};
diff --git a/package.json b/package.json
index 3a3708fa12..af32469d89 100644
--- a/package.json
+++ b/package.json
@@ -16,13 +16,13 @@
     "lint:lit": "lit-analyzer \"**/src/**/*.ts\" --format markdown --outFile result.md",
     "lint": "yarn run lint:eslint && yarn run lint:prettier && yarn run lint:types",
     "format": "yarn run format:eslint && yarn run format:prettier",
-    "mocha": "node_modules/.bin/ts-mocha -p test-mocha/tsconfig.test.json --opts test-mocha/mocha.opts",
+    "mocha": "ts-mocha -p test-mocha/tsconfig.test.json \"test-mocha/**/*.ts\"",
     "test": "yarn run lint && yarn run mocha"
   },
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@braintree/sanitize-url": "^5.0.0",
+    "@braintree/sanitize-url": "^5.0.1",
     "@codemirror/commands": "^0.18.0",
     "@codemirror/gutter": "^0.18.0",
     "@codemirror/highlight": "^0.18.0",
@@ -34,33 +34,34 @@
     "@codemirror/stream-parser": "^0.18.0",
     "@codemirror/text": "^0.18.0",
     "@codemirror/view": "^0.18.0",
-    "@formatjs/intl-getcanonicallocales": "^1.4.6",
-    "@formatjs/intl-pluralrules": "^3.4.10",
+    "@formatjs/intl-getcanonicallocales": "^1.5.10",
+    "@formatjs/intl-locale": "^2.4.28",
+    "@formatjs/intl-pluralrules": "^4.0.22",
     "@fullcalendar/common": "5.1.0",
     "@fullcalendar/core": "5.1.0",
     "@fullcalendar/daygrid": "5.1.0",
     "@fullcalendar/interaction": "5.1.0",
     "@fullcalendar/list": "5.1.0",
-    "@material/chips": "=9.0.0-canary.1c156d69d.0",
-    "@material/mwc-button": "^0.20.0",
-    "@material/mwc-checkbox": "^0.20.0",
-    "@material/mwc-circular-progress": "^0.20.0",
-    "@material/mwc-dialog": "^0.20.0",
-    "@material/mwc-fab": "^0.20.0",
-    "@material/mwc-formfield": "^0.20.0",
-    "@material/mwc-icon-button": "^0.20.0",
-    "@material/mwc-list": "^0.20.0",
-    "@material/mwc-menu": "^0.20.0",
-    "@material/mwc-radio": "^0.20.0",
-    "@material/mwc-ripple": "^0.20.0",
-    "@material/mwc-switch": "^0.20.0",
-    "@material/mwc-tab": "^0.20.0",
-    "@material/mwc-tab-bar": "^0.20.0",
-    "@material/top-app-bar": "=9.0.0-canary.1c156d69d.0",
+    "@lit-labs/virtualizer": "^0.6.0",
+    "@material/chips": "=12.0.0-canary.1a8d06483.0",
+    "@material/mwc-button": "canary",
+    "@material/mwc-checkbox": "canary",
+    "@material/mwc-circular-progress": "canary",
+    "@material/mwc-dialog": "canary",
+    "@material/mwc-fab": "canary",
+    "@material/mwc-formfield": "canary",
+    "@material/mwc-icon-button": "canary",
+    "@material/mwc-list": "canary",
+    "@material/mwc-menu": "canary",
+    "@material/mwc-radio": "canary",
+    "@material/mwc-ripple": "canary",
+    "@material/mwc-switch": "canary",
+    "@material/mwc-tab": "canary",
+    "@material/mwc-tab-bar": "canary",
+    "@material/top-app-bar": "=12.0.0-canary.1a8d06483.0",
     "@mdi/js": "5.9.55",
     "@mdi/svg": "5.9.55",
     "@polymer/app-layout": "^3.0.2",
-    "@polymer/app-route": "^3.0.2",
     "@polymer/app-storage": "^3.0.2",
     "@polymer/iron-autogrow-textarea": "^3.0.1",
     "@polymer/iron-flex-layout": "^3.0.1",
@@ -98,29 +99,28 @@
     "@vibrant/quantizer-mmcq": "^3.2.1-alpha.1",
     "@vue/web-component-wrapper": "^1.2.0",
     "@webcomponents/webcomponentsjs": "^2.2.7",
-    "chart.js": "~2.8.0",
-    "chartjs-chart-timeline": "^0.3.0",
-    "comlink": "^4.3.0",
+    "chart.js": "^2.9.4",
+    "chartjs-chart-timeline": "^0.4.0",
+    "comlink": "^4.3.1",
     "core-js": "^3.6.5",
-    "cropperjs": "^1.5.7",
+    "cropperjs": "^1.5.11",
     "deep-clone-simple": "^1.1.1",
     "deep-freeze": "^0.0.1",
     "fecha": "^4.2.0",
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
-    "hls.js": "^1.0.1",
-    "home-assistant-js-websocket": "^5.9.0",
-    "idb-keyval": "^3.2.0",
-    "intl-messageformat": "^8.3.9",
-    "js-yaml": "^3.13.1",
-    "leaflet": "^1.4.0",
+    "hls.js": "^1.0.4",
+    "home-assistant-js-websocket": "^5.10.0",
+    "idb-keyval": "^5.0.5",
+    "intl-messageformat": "^9.6.16",
+    "js-yaml": "^4.1.0",
+    "leaflet": "^1.7.1",
     "leaflet-draw": "^1.0.4",
-    "lit-element": "^2.5.0",
-    "lit-html": "^1.4.0",
-    "lit-virtualizer": "^0.4.2",
-    "marked": "2.0.0",
+    "lit": "^2.0.0-rc.2",
+    "lit-vaadin-helpers": "^0.1.3",
+    "marked": "^2.0.5",
     "mdn-polyfills": "^5.16.0",
-    "memoize-one": "^5.0.2",
+    "memoize-one": "^5.2.1",
     "node-vibrant": "3.2.1-alpha.1",
     "proxy-polyfill": "^0.3.1",
     "punycode": "^2.1.1",
@@ -129,13 +129,13 @@
     "resize-observer-polyfill": "^1.5.1",
     "roboto-fontface": "^0.10.0",
     "sortablejs": "^1.10.2",
-    "superstruct": "^0.10.13",
-    "tinykeys": "^1.1.1",
+    "superstruct": "^0.15.2",
+    "tinykeys": "^1.1.3",
     "tsparticles": "^1.19.2",
     "unfetch": "^4.1.0",
-    "vis-data": "^7.1.1",
+    "vis-data": "^7.1.2",
     "vis-network": "^8.5.4",
-    "vue": "^2.6.11",
+    "vue": "^2.6.12",
     "vue2-daterange-picker": "^0.5.1",
     "web-animations-js": "^2.3.2",
     "workbox-cacheable-response": "^6.1.5",
@@ -144,10 +144,10 @@
     "workbox-precaching": "^6.1.5",
     "workbox-routing": "^6.1.5",
     "workbox-strategies": "^6.1.5",
-    "xss": "^1.0.6"
+    "xss": "^1.0.9"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.0",
+    "@babel/core": "^7.14.3",
     "@babel/plugin-external-helpers": "^7.12.13",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-proposal-decorators": "^7.13.15",
@@ -156,7 +156,7 @@
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
-    "@babel/preset-env": "^7.14.0",
+    "@babel/preset-env": "^7.14.2",
     "@babel/preset-typescript": "^7.13.0",
     "@koa/cors": "^3.1.0",
     "@open-wc/dev-server-hmr": "^0.0.2",
@@ -165,16 +165,13 @@
     "@rollup/plugin-json": "^4.0.3",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@types/chai": "^4.1.7",
-    "@types/chromecast-caf-receiver": "^5.0.11",
+    "@types/chromecast-caf-receiver": "5.0.12",
     "@types/chromecast-caf-sender": "^1.0.3",
-    "@types/js-yaml": "^3.12.1",
-    "@types/leaflet": "^1.4.3",
-    "@types/leaflet-draw": "^1.0.1",
-    "@types/marked": "^1.2.2",
-    "@types/memoize-one": "4.1.0",
-    "@types/mocha": "^7.0.2",
-    "@types/resize-observer-browser": "^0.1.3",
+    "@types/js-yaml": "^4.0.1",
+    "@types/leaflet": "^1.7.0",
+    "@types/leaflet-draw": "^1.0.3",
+    "@types/marked": "^2.0.3",
+    "@types/mocha": "^8.2.2",
     "@types/sortablejs": "^1.10.6",
     "@types/webspeechapi": "^0.0.29",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
@@ -182,7 +179,7 @@
     "@web/dev-server": "^0.0.24",
     "@web/dev-server-rollup": "^0.2.11",
     "babel-loader": "^8.1.0",
-    "chai": "^4.2.0",
+    "chai": "^4.3.4",
     "cpx": "^1.5.0",
     "del": "^4.0.0",
     "eslint": "^7.25.0",
@@ -196,7 +193,7 @@
     "eslint-plugin-wc": "^1.3.0",
     "fancy-log": "^1.3.3",
     "fs-extra": "^7.0.1",
-    "gulp": "^4.0.0",
+    "gulp": "^4.0.2",
     "gulp-foreach": "^0.1.0",
     "gulp-json-transform": "^0.4.6",
     "gulp-merge-json": "^1.3.1",
@@ -204,13 +201,13 @@
     "gulp-zopfli-green": "^3.0.1",
     "html-minifier": "^4.0.0",
     "husky": "^1.3.1",
-    "lint-staged": "^8.1.5",
+    "lint-staged": "^10.5.4",
     "lit-analyzer": "^1.2.1",
     "lodash.template": "^4.5.0",
     "magic-string": "^0.25.7",
     "map-stream": "^0.0.7",
     "merge-stream": "^1.0.1",
-    "mocha": "^7.2.0",
+    "mocha": "^8.4.0",
     "object-hash": "^2.0.3",
     "open": "^7.0.4",
     "prettier": "^2.0.4",
@@ -220,13 +217,13 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-terser": "^5.3.0",
     "rollup-plugin-visualizer": "^4.0.4",
-    "serve": "^11.3.0",
-    "sinon": "^7.3.1",
+    "serve": "^11.3.2",
+    "sinon": "^11.0.0",
     "source-map-url": "^0.4.0",
     "systemjs": "^6.3.2",
-    "terser-webpack-plugin": "^5.1.1",
+    "terser-webpack-plugin": "^5.1.2",
     "ts-lit-plugin": "^1.2.1",
-    "ts-mocha": "^7.0.0",
+    "ts-mocha": "^8.0.0",
     "typescript": "^4.2.4",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
@@ -241,8 +238,8 @@
   "resolutions": {
     "@webcomponents/webcomponentsjs": "^2.2.10",
     "@polymer/polymer": "3.1.0",
-    "lit-html": "1.4.0",
-    "lit-element": "2.5.0"
+    "lit-html": "2.0.0-rc.3",
+    "lit-element": "3.0.0-rc.2"
   },
   "main": "src/home-assistant.js",
   "husky": {
@@ -250,17 +247,6 @@
       "pre-commit": "lint-staged"
     }
   },
-  "lint-staged": {
-    "linters": {
-      "*.{js,ts,json,css,md}": [
-        "prettier --write",
-        "git add"
-      ]
-    },
-    "ignore": [
-      "translations/**"
-    ]
-  },
   "prettier": {
     "trailingComma": "es5",
     "arrowParens": "always"
diff --git a/setup.py b/setup.py
index b2cbfd5720..152002c007 100644
--- a/setup.py
+++ b/setup.py
@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20210504.0",
+    version="20210526.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",
diff --git a/src/auth/ha-auth-flow.ts b/src/auth/ha-auth-flow.ts
index 3164b6dafb..85dcf053e9 100644
--- a/src/auth/ha-auth-flow.ts
+++ b/src/auth/ha-auth-flow.ts
@@ -1,14 +1,13 @@
 import "@material/mwc-button";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { property, state } from "lit/decorators";
 import "../components/ha-form/ha-form";
 import "../components/ha-markdown";
 import { AuthProvider } from "../data/auth";
@@ -29,13 +28,13 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
 
   @property() public oauth2State?: string;
 
-  @internalProperty() private _state: State = "loading";
+  @state() private _state: State = "loading";
 
-  @internalProperty() private _stepData: any = {};
+  @state() private _stepData: any = {};
 
-  @internalProperty() private _step?: DataEntryFlowStep;
+  @state() private _step?: DataEntryFlowStep;
 
-  @internalProperty() private _errorMessage?: string;
+  @state() private _errorMessage?: string;
 
   protected render() {
     return html` <form>${this._renderForm()}</form> `;
@@ -313,7 +312,7 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         /* So we can set min-height to avoid jumping during loading */
diff --git a/src/auth/ha-authorize.ts b/src/auth/ha-authorize.ts
index ceabc2b409..9d51431102 100644
--- a/src/auth/ha-authorize.ts
+++ b/src/auth/ha-authorize.ts
@@ -1,12 +1,5 @@
-import {
-  css,
-  CSSResult,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import { property, state } from "lit/decorators";
 import punycode from "punycode";
 import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
 import { extractSearchParamsObject } from "../common/url/search-params";
@@ -32,11 +25,11 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
 
   @property() public oauth2State?: string;
 
-  @internalProperty() private _authProvider?: AuthProvider;
+  @state() private _authProvider?: AuthProvider;
 
-  @internalProperty() private _authProviders?: AuthProvider[];
+  @state() private _authProviders?: AuthProvider[];
 
-  @internalProperty() private _discovery?: DiscoveryInformation;
+  @state() private _discovery?: DiscoveryInformation;
 
   constructor() {
     super();
@@ -189,7 +182,7 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
     this._authProvider = ev.detail;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-pick-auth-provider {
         display: block;
diff --git a/src/auth/ha-pick-auth-provider.ts b/src/auth/ha-pick-auth-provider.ts
index 63e213e6d1..e471cb6908 100644
--- a/src/auth/ha-pick-auth-provider.ts
+++ b/src/auth/ha-pick-auth-provider.ts
@@ -1,6 +1,7 @@
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import { html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import "../components/ha-icon-next";
 import { AuthProvider } from "../data/auth";
diff --git a/src/common/datetime/format_date.ts b/src/common/datetime/format_date.ts
index c7c02d38fe..fa82187a46 100644
--- a/src/common/datetime/format_date.ts
+++ b/src/common/datetime/format_date.ts
@@ -1,21 +1,32 @@
 import { format } from "fecha";
-import { FrontendTranslationData } from "../../data/translation";
+import memoizeOne from "memoize-one";
+import { FrontendLocaleData } from "../../data/translation";
 import { toLocaleDateStringSupportsOptions } from "./check_options_support";
 
+const formatDateMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(locale.language, {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    })
+);
+
 export const formatDate = toLocaleDateStringSupportsOptions
-  ? (dateObj: Date, locales: FrontendTranslationData) =>
-      dateObj.toLocaleDateString(locales.language, {
-        year: "numeric",
-        month: "long",
-        day: "numeric",
-      })
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatDateMem(locale).format(dateObj)
   : (dateObj: Date) => format(dateObj, "longDate");
 
+const formatDateWeekdayMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(locale.language, {
+      weekday: "long",
+      month: "long",
+      day: "numeric",
+    })
+);
+
 export const formatDateWeekday = toLocaleDateStringSupportsOptions
-  ? (dateObj: Date, locales: FrontendTranslationData) =>
-      dateObj.toLocaleDateString(locales.language, {
-        weekday: "long",
-        month: "short",
-        day: "numeric",
-      })
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatDateWeekdayMem(locale).format(dateObj)
   : (dateObj: Date) => format(dateObj, "dddd, MMM D");
diff --git a/src/common/datetime/format_date_time.ts b/src/common/datetime/format_date_time.ts
index d4b76a1da6..850e82b185 100644
--- a/src/common/datetime/format_date_time.ts
+++ b/src/common/datetime/format_date_time.ts
@@ -1,26 +1,42 @@
 import { format } from "fecha";
-import { FrontendTranslationData } from "../../data/translation";
+import memoizeOne from "memoize-one";
+import { FrontendLocaleData } from "../../data/translation";
 import { toLocaleStringSupportsOptions } from "./check_options_support";
+import { useAmPm } from "./use_am_pm";
+
+const formatDateTimeMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(locale.language, {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+      hour12: useAmPm(locale),
+    })
+);
 
 export const formatDateTime = toLocaleStringSupportsOptions
-  ? (dateObj: Date, locales: FrontendTranslationData) =>
-      dateObj.toLocaleString(locales.language, {
-        year: "numeric",
-        month: "long",
-        day: "numeric",
-        hour: "numeric",
-        minute: "2-digit",
-      })
-  : (dateObj: Date) => format(dateObj, "MMMM D, YYYY, HH:mm");
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatDateTimeMem(locale).format(dateObj)
+  : (dateObj: Date, locale: FrontendLocaleData) =>
+      format(dateObj, "MMMM D, YYYY, HH:mm" + useAmPm(locale) ? " A" : "");
+
+const formatDateTimeWithSecondsMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(locale.language, {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: useAmPm(locale),
+    })
+);
 
 export const formatDateTimeWithSeconds = toLocaleStringSupportsOptions
-  ? (dateObj: Date, locales: FrontendTranslationData) =>
-      dateObj.toLocaleString(locales.language, {
-        year: "numeric",
-        month: "long",
-        day: "numeric",
-        hour: "numeric",
-        minute: "2-digit",
-        second: "2-digit",
-      })
-  : (dateObj: Date) => format(dateObj, "MMMM D, YYYY, HH:mm:ss");
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatDateTimeWithSecondsMem(locale).format(dateObj)
+  : (dateObj: Date, locale: FrontendLocaleData) =>
+      format(dateObj, "MMMM D, YYYY, HH:mm:ss" + useAmPm(locale) ? " A" : "");
diff --git a/src/common/datetime/format_time.ts b/src/common/datetime/format_time.ts
index d2068f7638..14bbdf8e53 100644
--- a/src/common/datetime/format_time.ts
+++ b/src/common/datetime/format_time.ts
@@ -1,29 +1,52 @@
 import { format } from "fecha";
-import { FrontendTranslationData } from "../../data/translation";
+import memoizeOne from "memoize-one";
+import { FrontendLocaleData } from "../../data/translation";
 import { toLocaleTimeStringSupportsOptions } from "./check_options_support";
+import { useAmPm } from "./use_am_pm";
+
+const formatTimeMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(locale.language, {
+      hour: "numeric",
+      minute: "2-digit",
+      hour12: useAmPm(locale),
+    })
+);
 
 export const formatTime = toLocaleTimeStringSupportsOptions
-  ? (dateObj: Date, locales: FrontendTranslationData) =>
-      dateObj.toLocaleTimeString(locales.language, {
-        hour: "numeric",
-        minute: "2-digit",
-      })
-  : (dateObj: Date) => format(dateObj, "shortTime");
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatTimeMem(locale).format(dateObj)
+  : (dateObj: Date, locale: FrontendLocaleData) =>
+      format(dateObj, "shortTime" + useAmPm(locale) ? " A" : "");
+
+const formatTimeWithSecondsMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(locale.language, {
+      hour: "numeric",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: useAmPm(locale),
+    })
+);
 
 export const formatTimeWithSeconds = toLocaleTimeStringSupportsOptions
-  ? (dateObj: Date, locales: FrontendTranslationData) =>
-      dateObj.toLocaleTimeString(locales.language, {
-        hour: "numeric",
-        minute: "2-digit",
-        second: "2-digit",
-      })
-  : (dateObj: Date) => format(dateObj, "mediumTime");
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatTimeWithSecondsMem(locale).format(dateObj)
+  : (dateObj: Date, locale: FrontendLocaleData) =>
+      format(dateObj, "mediumTime" + useAmPm(locale) ? " A" : "");
+
+const formatTimeWeekdayMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(locale.language, {
+      weekday: "long",
+      hour: "numeric",
+      minute: "2-digit",
+      hour12: useAmPm(locale),
+    })
+);
 
 export const formatTimeWeekday = toLocaleTimeStringSupportsOptions
-  ? (dateObj: Date, locales: FrontendTranslationData) =>
-      dateObj.toLocaleTimeString(locales.language, {
-        weekday: "long",
-        hour: "numeric",
-        minute: "2-digit",
-      })
-  : (dateObj: Date) => format(dateObj, "dddd, HH:mm");
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatTimeWeekdayMem(locale).format(dateObj)
+  : (dateObj: Date, locale: FrontendLocaleData) =>
+      format(dateObj, "dddd, HH:mm" + useAmPm(locale) ? " A" : "");
diff --git a/src/common/datetime/use_am_pm.ts b/src/common/datetime/use_am_pm.ts
new file mode 100644
index 0000000000..cf5b2c124e
--- /dev/null
+++ b/src/common/datetime/use_am_pm.ts
@@ -0,0 +1,15 @@
+import { FrontendLocaleData, TimeFormat } from "../../data/translation";
+
+export const useAmPm = (locale: FrontendLocaleData): boolean => {
+  if (
+    locale.time_format === TimeFormat.language ||
+    locale.time_format === TimeFormat.system
+  ) {
+    const testLanguage =
+      locale.time_format === TimeFormat.language ? locale.language : undefined;
+    const test = new Date().toLocaleString(testLanguage);
+    return test.includes("AM") || test.includes("PM");
+  }
+
+  return locale.time_format === TimeFormat.am_pm;
+};
diff --git a/src/common/decorators/local-storage.ts b/src/common/decorators/local-storage.ts
index e72c9f0657..8456c5be48 100644
--- a/src/common/decorators/local-storage.ts
+++ b/src/common/decorators/local-storage.ts
@@ -1,5 +1,5 @@
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { PropertyDeclaration, UpdatingElement } from "lit-element";
+import { PropertyDeclaration, ReactiveElement } from "lit";
 import type { ClassElement } from "../../types";
 
 type Callback = (oldValue: any, newValue: any) => void;
@@ -93,7 +93,7 @@ export const LocalStorage = (
 
   storage.addFromStorage(storageKey);
 
-  const subscribe = (el: UpdatingElement): UnsubscribeFunc =>
+  const subscribe = (el: ReactiveElement): UnsubscribeFunc =>
     storage.subscribeChanges(storageKey!, (oldValue) => {
       el.requestUpdate(clsElement.key, oldValue);
     });
@@ -101,7 +101,7 @@ export const LocalStorage = (
   const getValue = (): any =>
     storage.hasKey(storageKey!) ? storage.getValue(storageKey!) : initVal;
 
-  const setValue = (el: UpdatingElement, value: any) => {
+  const setValue = (el: ReactiveElement, value: any) => {
     let oldValue: unknown | undefined;
     if (property) {
       oldValue = getValue();
@@ -117,7 +117,7 @@ export const LocalStorage = (
     placement: "prototype",
     key: clsElement.key,
     descriptor: {
-      set(this: UpdatingElement, value: unknown) {
+      set(this: ReactiveElement, value: unknown) {
         setValue(this, value);
       },
       get() {
@@ -126,7 +126,7 @@ export const LocalStorage = (
       enumerable: true,
       configurable: true,
     },
-    finisher(cls: typeof UpdatingElement) {
+    finisher(cls: typeof ReactiveElement) {
       if (property) {
         const connectedCallback = cls.prototype.connectedCallback;
         const disconnectedCallback = cls.prototype.disconnectedCallback;
diff --git a/src/common/decorators/restore-scroll.ts b/src/common/decorators/restore-scroll.ts
index 059c83966e..e7353e729f 100644
--- a/src/common/decorators/restore-scroll.ts
+++ b/src/common/decorators/restore-scroll.ts
@@ -1,4 +1,4 @@
-import type { LitElement } from "lit-element";
+import type { LitElement } from "lit";
 import type { ClassElement } from "../../types";
 
 export const restoreScroll = (selector: string): any => (
diff --git a/src/common/dom/apply_themes_on_element.ts b/src/common/dom/apply_themes_on_element.ts
index 176068c92b..90143f9bcf 100644
--- a/src/common/dom/apply_themes_on_element.ts
+++ b/src/common/dom/apply_themes_on_element.ts
@@ -1,4 +1,4 @@
-import { Theme } from "../../data/ws-themes";
+import { ThemeVars } from "../../data/ws-themes";
 import { darkStyles, derivedStyles } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import {
@@ -23,62 +23,90 @@ let PROCESSED_THEMES: Record<string, ProcessedTheme> = {};
  * Apply a theme to an element by setting the CSS variables on it.
  *
  * element: Element to apply theme on.
- * themes: HASS Theme information
- * selectedTheme: selected theme.
+ * themes: HASS theme information.
+ * selectedTheme: Selected theme.
+ * themeSettings: Settings such as selected dark mode and colors.
  */
 export const applyThemesOnElement = (
   element,
   themes: HomeAssistant["themes"],
   selectedTheme?: string,
-  themeOptions?: Partial<HomeAssistant["selectedTheme"]>
+  themeSettings?: Partial<HomeAssistant["selectedThemeSettings"]>
 ) => {
   let cacheKey = selectedTheme;
-  let themeRules: Partial<Theme> = {};
+  let themeRules: Partial<ThemeVars> = {};
 
-  if (selectedTheme === "default" && themeOptions) {
-    if (themeOptions.dark) {
+  if (themeSettings) {
+    if (themeSettings.dark) {
       cacheKey = `${cacheKey}__dark`;
-      themeRules = darkStyles;
-      if (themeOptions.primaryColor) {
+      themeRules = { ...darkStyles };
+    }
+
+    if (selectedTheme === "default") {
+      // Determine the primary and accent colors from the current settings.
+      // Fallbacks are implicitly the HA default blue and orange or the
+      // derived "darkStyles" values, depending on the light vs dark mode.
+      const primaryColor = themeSettings.primaryColor;
+      const accentColor = themeSettings.accentColor;
+
+      if (themeSettings.dark && primaryColor) {
         themeRules["app-header-background-color"] = hexBlend(
-          themeOptions.primaryColor,
+          primaryColor,
           "#121212",
           8
         );
       }
-    }
-    if (themeOptions.primaryColor) {
-      cacheKey = `${cacheKey}__primary_${themeOptions.primaryColor}`;
-      const rgbPrimaryColor = hex2rgb(themeOptions.primaryColor);
-      const labPrimaryColor = rgb2lab(rgbPrimaryColor);
-      themeRules["primary-color"] = themeOptions.primaryColor;
-      const rgbLigthPrimaryColor = lab2rgb(labBrighten(labPrimaryColor));
-      themeRules["light-primary-color"] = rgb2hex(rgbLigthPrimaryColor);
-      themeRules["dark-primary-color"] = lab2hex(labDarken(labPrimaryColor));
-      themeRules["text-primary-color"] =
-        rgbContrast(rgbPrimaryColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
-      themeRules["text-light-primary-color"] =
-        rgbContrast(rgbLigthPrimaryColor, [33, 33, 33]) < 6
-          ? "#fff"
-          : "#212121";
-      themeRules["state-icon-color"] = themeRules["dark-primary-color"];
-    }
-    if (themeOptions.accentColor) {
-      cacheKey = `${cacheKey}__accent_${themeOptions.accentColor}`;
-      themeRules["accent-color"] = themeOptions.accentColor;
-      const rgbAccentColor = hex2rgb(themeOptions.accentColor);
-      themeRules["text-accent-color"] =
-        rgbContrast(rgbAccentColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
-    }
 
-    // Nothing was changed
-    if (element._themes?.cacheKey === cacheKey) {
-      return;
+      if (primaryColor) {
+        cacheKey = `${cacheKey}__primary_${primaryColor}`;
+        const rgbPrimaryColor = hex2rgb(primaryColor);
+        const labPrimaryColor = rgb2lab(rgbPrimaryColor);
+        themeRules["primary-color"] = primaryColor;
+        const rgbLightPrimaryColor = lab2rgb(labBrighten(labPrimaryColor));
+        themeRules["light-primary-color"] = rgb2hex(rgbLightPrimaryColor);
+        themeRules["dark-primary-color"] = lab2hex(labDarken(labPrimaryColor));
+        themeRules["text-primary-color"] =
+          rgbContrast(rgbPrimaryColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
+        themeRules["text-light-primary-color"] =
+          rgbContrast(rgbLightPrimaryColor, [33, 33, 33]) < 6
+            ? "#fff"
+            : "#212121";
+        themeRules["state-icon-color"] = themeRules["dark-primary-color"];
+      }
+      if (accentColor) {
+        cacheKey = `${cacheKey}__accent_${accentColor}`;
+        themeRules["accent-color"] = accentColor;
+        const rgbAccentColor = hex2rgb(accentColor);
+        themeRules["text-accent-color"] =
+          rgbContrast(rgbAccentColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
+      }
+
+      // Nothing was changed
+      if (element._themes?.cacheKey === cacheKey) {
+        return;
+      }
     }
   }
 
-  if (selectedTheme && themes.themes[selectedTheme]) {
-    themeRules = themes.themes[selectedTheme];
+  // Custom theme logic (not relevant for default theme, since it would override
+  // the derived calculations from above)
+  if (
+    selectedTheme &&
+    selectedTheme !== "default" &&
+    themes.themes[selectedTheme]
+  ) {
+    // Apply theme vars that are relevant for all modes (but extract the "modes" section first)
+    const { modes, ...baseThemeRules } = themes.themes[selectedTheme];
+    themeRules = { ...themeRules, ...baseThemeRules };
+
+    // Apply theme vars for the specific mode if available
+    if (modes) {
+      if (themeSettings?.dark) {
+        themeRules = { ...themeRules, ...modes.dark };
+      } else {
+        themeRules = { ...themeRules, ...modes.light };
+      }
+    }
   }
 
   if (!element._themes?.keys && !Object.keys(themeRules).length) {
@@ -106,12 +134,12 @@ export const applyThemesOnElement = (
 
 const processTheme = (
   cacheKey: string,
-  theme: Partial<Theme>
+  theme: Partial<ThemeVars>
 ): ProcessedTheme | undefined => {
   if (!theme || !Object.keys(theme).length) {
     return undefined;
   }
-  const combinedTheme: Partial<Theme> = {
+  const combinedTheme: Partial<ThemeVars> = {
     ...derivedStyles,
     ...theme,
   };
diff --git a/src/common/dom/dynamic-element-directive.ts b/src/common/dom/dynamic-element-directive.ts
index e3e48e57af..a1ffb33ff3 100644
--- a/src/common/dom/dynamic-element-directive.ts
+++ b/src/common/dom/dynamic-element-directive.ts
@@ -1,30 +1,46 @@
-import { directive, NodePart, Part } from "lit-html";
+import { noChange } from "lit";
+import {
+  ChildPart,
+  Directive,
+  directive,
+  DirectiveParameters,
+  PartInfo,
+  PartType,
+} from "lit/directive";
 
 export const dynamicElement = directive(
-  (tag: string, properties?: Record<string, any>) => (part: Part): void => {
-    if (!(part instanceof NodePart)) {
-      throw new Error(
-        "dynamicElementDirective can only be used in content bindings"
-      );
+  class extends Directive {
+    private _element?: HTMLElement;
+
+    constructor(partInfo: PartInfo) {
+      super(partInfo);
+      if (partInfo.type !== PartType.CHILD) {
+        throw new Error(
+          "dynamicElementDirective can only be used in content bindings"
+        );
+      }
     }
 
-    let element = part.value as HTMLElement | undefined;
+    update(_part: ChildPart, [tag, properties]: DirectiveParameters<this>) {
+      if (this._element && this._element.localName === tag) {
+        if (properties) {
+          Object.entries(properties).forEach(([key, value]) => {
+            this._element![key] = value;
+          });
+        }
+        return noChange;
+      }
+      return this.render(tag, properties);
+    }
 
-    if (tag === element?.localName) {
+    render(tag: string, properties?: Record<string, any>): HTMLElement {
+      this._element = document.createElement(tag);
       if (properties) {
         Object.entries(properties).forEach(([key, value]) => {
-          element![key] = value;
+          this._element![key] = value;
         });
       }
-      return;
+      return this._element;
     }
-
-    element = document.createElement(tag);
-    if (properties) {
-      Object.entries(properties).forEach(([key, value]) => {
-        element![key] = value;
-      });
-    }
-    part.setValue(element);
   }
 );
diff --git a/src/common/dom/get_main_window.ts b/src/common/dom/get_main_window.ts
new file mode 100644
index 0000000000..5bf9e2687b
--- /dev/null
+++ b/src/common/dom/get_main_window.ts
@@ -0,0 +1,8 @@
+import { MAIN_WINDOW_NAME } from "../../data/main_window";
+
+export const mainWindow =
+  window.name === MAIN_WINDOW_NAME
+    ? window
+    : parent.name === MAIN_WINDOW_NAME
+    ? parent
+    : top;
diff --git a/src/common/dom/speech-recognition.ts b/src/common/dom/speech-recognition.ts
index a3003974fb..6efec5b8a2 100644
--- a/src/common/dom/speech-recognition.ts
+++ b/src/common/dom/speech-recognition.ts
@@ -1,14 +1,7 @@
-/* eslint-disable */
-// @ts-ignore
 export const SpeechRecognition =
-  // @ts-ignore
   window.SpeechRecognition || window.webkitSpeechRecognition;
-// @ts-ignore
 export const SpeechGrammarList =
-  // @ts-ignore
   window.SpeechGrammarList || window.webkitSpeechGrammarList;
-// @ts-ignore
 export const SpeechRecognitionEvent =
-  // @ts-ignore
+  // @ts-expect-error
   window.SpeechRecognitionEvent || window.webkitSpeechRecognitionEvent;
-/* eslint-enable */
diff --git a/src/common/entity/compute_state_display.ts b/src/common/entity/compute_state_display.ts
index d4e77ce4e9..8165f6daf7 100644
--- a/src/common/entity/compute_state_display.ts
+++ b/src/common/entity/compute_state_display.ts
@@ -1,6 +1,6 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
-import { FrontendTranslationData } from "../../data/translation";
+import { FrontendLocaleData } from "../../data/translation";
 import { formatDate } from "../datetime/format_date";
 import { formatDateTime } from "../datetime/format_date_time";
 import { formatTime } from "../datetime/format_time";
@@ -11,7 +11,7 @@ import { computeStateDomain } from "./compute_state_domain";
 export const computeStateDisplay = (
   localize: LocalizeFunc,
   stateObj: HassEntity,
-  locale: FrontendTranslationData,
+  locale: FrontendLocaleData,
   state?: string
 ): string => {
   const compareState = state !== undefined ? state : stateObj.state;
diff --git a/src/common/entity/timer_time_remaining.ts b/src/common/entity/timer_time_remaining.ts
deleted file mode 100644
index 5b2f54654d..0000000000
--- a/src/common/entity/timer_time_remaining.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { HassEntity } from "home-assistant-js-websocket";
-import durationToSeconds from "../datetime/duration_to_seconds";
-
-export const timerTimeRemaining = (
-  stateObj: HassEntity
-): undefined | number => {
-  if (!stateObj.attributes.remaining) {
-    return undefined;
-  }
-  let timeRemaining = durationToSeconds(stateObj.attributes.remaining);
-
-  if (stateObj.state === "active") {
-    const now = new Date().getTime();
-    const madeActive = new Date(stateObj.last_changed).getTime();
-    timeRemaining = Math.max(timeRemaining - (now - madeActive) / 1000, 0);
-  }
-
-  return timeRemaining;
-};
diff --git a/src/common/image/extract_color.ts b/src/common/image/extract_color.ts
index d63ed963d8..f37652ce7b 100644
--- a/src/common/image/extract_color.ts
+++ b/src/common/image/extract_color.ts
@@ -1,7 +1,7 @@
 // We import the minified bundle because the unminified bundle
 // has some quirks that break wds. See #7784 for unminified version.
-import Vibrant from "node-vibrant/dist/vibrant";
 import type { Swatch, Vec3 } from "@vibrant/color";
+import Vibrant from "node-vibrant/dist/vibrant";
 import { getRGBContrastRatio } from "../color/rgb";
 
 const CONTRAST_RATIO = 4.5;
diff --git a/src/common/navigate.ts b/src/common/navigate.ts
index 7bbc589f29..e2e0f26dd0 100644
--- a/src/common/navigate.ts
+++ b/src/common/navigate.ts
@@ -1,35 +1,40 @@
 import { fireEvent } from "./dom/fire_event";
+import { mainWindow } from "./dom/get_main_window";
 
 declare global {
   // for fire event
   interface HASSDomEvents {
-    "location-changed": {
-      replace: boolean;
-    };
+    "location-changed": NavigateOptions;
   }
 }
 
-export const navigate = (_node: any, path: string, replace = false) => {
+export interface NavigateOptions {
+  replace?: boolean;
+}
+
+export const navigate = (path: string, options?: NavigateOptions) => {
+  const replace = options?.replace || false;
+
   if (__DEMO__) {
     if (replace) {
-      top.history.replaceState(
-        top.history.state?.root ? { root: true } : null,
+      mainWindow.history.replaceState(
+        mainWindow.history.state?.root ? { root: true } : null,
         "",
-        `${top.location.pathname}#${path}`
+        `${mainWindow.location.pathname}#${path}`
       );
     } else {
-      top.location.hash = path;
+      mainWindow.location.hash = path;
     }
   } else if (replace) {
-    top.history.replaceState(
-      top.history.state?.root ? { root: true } : null,
+    mainWindow.history.replaceState(
+      mainWindow.history.state?.root ? { root: true } : null,
       "",
       path
     );
   } else {
-    top.history.pushState(null, "", path);
+    mainWindow.history.pushState(null, "", path);
   }
-  fireEvent(top, "location-changed", {
+  fireEvent(mainWindow, "location-changed", {
     replace,
   });
 };
diff --git a/src/common/search/search-input.ts b/src/common/search/search-input.ts
index aff3a1a2a7..bde0c9ab5c 100644
--- a/src/common/search/search-input.ts
+++ b/src/common/search/search-input.ts
@@ -1,15 +1,9 @@
 import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiClose, mdiMagnify } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
-import {
-  css,
-  CSSResult,
-  customElement,
-  LitElement,
-  property,
-} from "lit-element";
-import { html, TemplateResult } from "lit-html";
-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 "../../components/ha-svg-icon";
 import { fireEvent } from "../dom/fire_event";
 
@@ -80,7 +74,7 @@ class SearchInput extends LitElement {
     this._filterChanged("");
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-svg-icon,
       mwc-icon-button {
diff --git a/src/common/string/filter/filter.ts b/src/common/string/filter/filter.ts
index ff42c20393..fc99bc10b8 100644
--- a/src/common/string/filter/filter.ts
+++ b/src/common/string/filter/filter.ts
@@ -92,7 +92,7 @@ function isUpperCaseAtPos(pos: number, word: string, wordLow: string): boolean {
   return word[pos] !== wordLow[pos];
 }
 
-function isPatternInWord(
+export function isPatternInWord(
   patternLow: string,
   patternPos: number,
   patternLen: number,
@@ -121,7 +121,7 @@ enum Arrow {
 }
 
 /**
- * An array representating a fuzzy match.
+ * An array representing a fuzzy match.
  *
  * 0. the score
  * 1. the offset at which matching started
diff --git a/src/common/string/filter/sequence-matching.ts b/src/common/string/filter/sequence-matching.ts
index 77edc39805..d502cec350 100644
--- a/src/common/string/filter/sequence-matching.ts
+++ b/src/common/string/filter/sequence-matching.ts
@@ -5,7 +5,7 @@ import { fuzzyScore } from "./filter";
  *   in that order, allowing for skipping. Ex: "chdr" exists in "chandelier")
  *
  * @param {string} filter - Sequence of letters to check for
- * @param {string} word - Word to check for sequence
+ * @param {ScorableTextItem} item - Item against whose strings will be checked
  *
  * @return {number} Score representing how well the word matches the filter. Return of 0 means no match.
  */
diff --git a/src/common/string/format_number.ts b/src/common/string/format_number.ts
index da8af2798a..2cfa22458b 100644
--- a/src/common/string/format_number.ts
+++ b/src/common/string/format_number.ts
@@ -1,4 +1,4 @@
-import { FrontendTranslationData, NumberFormat } from "../../data/translation";
+import { FrontendLocaleData, NumberFormat } from "../../data/translation";
 
 /**
  * Formats a number based on the user's preference with thousands separator(s) and decimal character for better legibility.
@@ -9,7 +9,7 @@ import { FrontendTranslationData, NumberFormat } from "../../data/translation";
  */
 export const formatNumber = (
   num: string | number,
-  locale?: FrontendTranslationData,
+  locale?: FrontendLocaleData,
   options?: Intl.NumberFormatOptions
 ): string => {
   let format: string | string[] | undefined;
diff --git a/src/common/string/is_date.ts b/src/common/string/is_date.ts
new file mode 100644
index 0000000000..b075efc1e4
--- /dev/null
+++ b/src/common/string/is_date.ts
@@ -0,0 +1,11 @@
+// https://regex101.com/r/kc5C14/2
+const regExpString = "^\\d{4}-(0[1-9]|1[0-2])-([12]\\d|0[1-9]|3[01])";
+
+const regExp = new RegExp(regExpString + "$");
+// 2nd expression without the "end of string" enforced, so it can be used
+// to just verify the start of a string and then based on that result e.g.
+// check for a full timestamp string efficiently.
+const regExpNoStringEnd = new RegExp(regExpString);
+
+export const isDate = (input: string, allowCharsAfterDate = false): boolean =>
+  allowCharsAfterDate ? regExpNoStringEnd.test(input) : regExp.test(input);
diff --git a/src/common/string/is_timestamp.ts b/src/common/string/is_timestamp.ts
new file mode 100644
index 0000000000..e4b7649529
--- /dev/null
+++ b/src/common/string/is_timestamp.ts
@@ -0,0 +1,11 @@
+// https://stackoverflow.com/a/14322189/1947205
+// Changes:
+// 1. Do not allow a plus or minus at the start.
+// 2. Enforce that we have a "T" or a blank after the date portion
+//    to ensure we have a timestamp and not only a date.
+// 3. Disallow dates based on week number.
+// 4. Disallow dates only consisting of a year.
+// https://regex101.com/r/kc5C14/3
+const regexp = /^\d{4}-(0[1-9]|1[0-2])-([12]\d|0[1-9]|3[01])[T| ](((([01]\d|2[0-3])((:?)[0-5]\d)?|24:?00)([.,]\d+(?!:))?)(\8[0-5]\d([.,]\d+)?)?([zZ]|([+-])([01]\d|2[0-3]):?([0-5]\d)?)?)$/;
+
+export const isTimestamp = (input: string): boolean => regexp.test(input);
diff --git a/src/common/structs/handle-errors.ts b/src/common/structs/handle-errors.ts
index 7aa8889045..96c82081c5 100644
--- a/src/common/structs/handle-errors.ts
+++ b/src/common/structs/handle-errors.ts
@@ -27,6 +27,20 @@ export const handleStructError = (
           failure.path.join(".")
         )
       );
+    } else if (failure.type === "union") {
+      continue;
+    } else if (failure.type === "enums") {
+      warnings.push(
+        hass.localize(
+          "ui.errors.config.key_wrong_type",
+          "key",
+          failure.path.join("."),
+          "type_correct",
+          failure.message.replace("Expected ", "").split(", ")[0],
+          "type_wrong",
+          JSON.stringify(failure.value)
+        )
+      );
     } else {
       warnings.push(
         hass.localize(
@@ -34,7 +48,7 @@ export const handleStructError = (
           "key",
           failure.path.join("."),
           "type_correct",
-          failure.type,
+          failure.refinement || failure.type,
           "type_wrong",
           JSON.stringify(failure.value)
         )
diff --git a/src/common/structs/is-entity-id.ts b/src/common/structs/is-entity-id.ts
index c408187e84..8d71f01694 100644
--- a/src/common/structs/is-entity-id.ts
+++ b/src/common/structs/is-entity-id.ts
@@ -1,30 +1,22 @@
-import { struct, StructContext, StructResult } from "superstruct";
+import { refine, string } from "superstruct";
 
-const isEntityId = (value: unknown, context: StructContext): StructResult => {
-  if (typeof value !== "string") {
-    return [context.fail({ type: "string" })];
-  }
+const isEntityId = (value: string): boolean => {
   if (!value.includes(".")) {
-    return [
-      context.fail({
-        type: "Entity ID should be in the format 'domain.entity'",
-      }),
-    ];
+    return false;
   }
   return true;
 };
 
-export const EntityId = struct("entity-id", isEntityId);
+export const entityId = () =>
+  refine(string(), "entity ID (domain.entity)", isEntityId);
 
-const isEntityIdOrAll = (
-  value: unknown,
-  context: StructContext
-): StructResult => {
-  if (typeof value === "string" && value === "all") {
+const isEntityIdOrAll = (value: string): boolean => {
+  if (value === "all") {
     return true;
   }
 
-  return isEntityId(value, context);
+  return isEntityId(value);
 };
 
-export const EntityIdOrAll = struct("entity-id-all", isEntityIdOrAll);
+export const entityIdOrAll = () =>
+  refine(string(), "entity ID (domain.entity or all)", isEntityIdOrAll);
diff --git a/src/common/structs/is-icon.ts b/src/common/structs/is-icon.ts
index 7ca4ff9ed5..db97d69ec2 100644
--- a/src/common/structs/is-icon.ts
+++ b/src/common/structs/is-icon.ts
@@ -1,17 +1,10 @@
-import { struct, StructContext, StructResult } from "superstruct";
+import { refine, string } from "superstruct";
 
-const isIcon = (value: unknown, context: StructContext): StructResult => {
-  if (typeof value !== "string") {
-    return [context.fail({ type: "string" })];
-  }
+const isIcon = (value: string) => {
   if (!value.includes(":")) {
-    return [
-      context.fail({
-        type: "icon should be in the format 'mdi:icon'",
-      }),
-    ];
+    return false;
   }
   return true;
 };
 
-export const Icon = struct("icon", isIcon);
+export const icon = () => refine(string(), "icon (mdi:icon-name)", isIcon);
diff --git a/src/common/style/icon_color_css.ts b/src/common/style/icon_color_css.ts
index 4672d0ca9c..fbc663653a 100644
--- a/src/common/style/icon_color_css.ts
+++ b/src/common/style/icon_color_css.ts
@@ -1,4 +1,4 @@
-import { css } from "lit-element";
+import { css } from "lit";
 
 export const iconColorCSS = css`
   ha-icon[data-domain="alert"][data-state="on"],
diff --git a/src/common/translations/localize.ts b/src/common/translations/localize.ts
index 94edcc8a7a..ee9522e141 100644
--- a/src/common/translations/localize.ts
+++ b/src/common/translations/localize.ts
@@ -1,9 +1,8 @@
-import { shouldPolyfill } from "@formatjs/intl-pluralrules/should-polyfill";
+import { shouldPolyfill } from "@formatjs/intl-pluralrules/lib/should-polyfill";
 import IntlMessageFormat from "intl-messageformat";
 import { Resources } from "../../types";
 
 export type LocalizeFunc = (key: string, ...args: any[]) => string;
-
 interface FormatType {
   [format: string]: any;
 }
@@ -13,12 +12,17 @@ export interface FormatsType {
   time: FormatType;
 }
 
+let loadedPolyfillLocale: Set<string> | undefined;
+
 let polyfillLoaded = !shouldPolyfill();
 const polyfillProm = polyfillLoaded
   ? undefined
-  : import("@formatjs/intl-pluralrules/polyfill-locales").then(() => {
-      polyfillLoaded = true;
-    });
+  : import("@formatjs/intl-locale/polyfill")
+      .then(() => import("@formatjs/intl-pluralrules/polyfill"))
+      .then(() => {
+        loadedPolyfillLocale = new Set();
+        polyfillLoaded = true;
+      });
 
 /**
  * Adapted from Polymer app-localize-behavior.
@@ -51,6 +55,15 @@ export const computeLocalize = async (
     await polyfillProm;
   }
 
+  if (loadedPolyfillLocale && !loadedPolyfillLocale.has(language)) {
+    try {
+      loadedPolyfillLocale.add(language);
+      await import("@formatjs/intl-pluralrules/locale-data/en");
+    } catch (_e) {
+      // Ignore
+    }
+  }
+
   // Everytime any of the parameters change, invalidate the strings cache.
   cache._localizationCache = {};
 
@@ -68,7 +81,9 @@ export const computeLocalize = async (
     }
 
     const messageKey = key + translatedValue;
-    let translatedMessage = cache._localizationCache[messageKey];
+    let translatedMessage = cache._localizationCache[messageKey] as
+      | IntlMessageFormat
+      | undefined;
 
     if (!translatedMessage) {
       translatedMessage = new IntlMessageFormat(
@@ -79,37 +94,19 @@ export const computeLocalize = async (
       cache._localizationCache[messageKey] = translatedMessage;
     }
 
-    const argObject = {};
-    for (let i = 0; i < args.length; i += 2) {
-      argObject[args[i]] = args[i + 1];
+    let argObject = {};
+    if (args.length === 1 && typeof args[0] === "object") {
+      argObject = args[0];
+    } else {
+      for (let i = 0; i < args.length; i += 2) {
+        argObject[args[i]] = args[i + 1];
+      }
     }
 
     try {
-      return translatedMessage.format(argObject);
+      return translatedMessage.format<string>(argObject) as string;
     } catch (err) {
       return "Translation " + err;
     }
   };
 };
-
-/**
- * Silly helper function that converts an object of placeholders to array so we
- * can convert it back to an object again inside the localize func.
- * @param localize
- * @param key
- * @param placeholders
- */
-export const localizeKey = (
-  localize: LocalizeFunc,
-  key: string,
-  placeholders?: Record<string, string>
-) => {
-  const args: [string, ...string[]] = [key];
-  if (placeholders) {
-    Object.keys(placeholders).forEach((placeholderKey) => {
-      args.push(placeholderKey);
-      args.push(placeholders[placeholderKey]);
-    });
-  }
-  return localize(...args);
-};
diff --git a/src/components/buttons/ha-call-api-button.ts b/src/components/buttons/ha-call-api-button.ts
index ab5d075373..6bf9e92d4d 100644
--- a/src/components/buttons/ha-call-api-button.ts
+++ b/src/components/buttons/ha-call-api-button.ts
@@ -1,4 +1,5 @@
-import { css, CSSResult, html, LitElement, property, query } from "lit-element";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HomeAssistant } from "../../types";
 import "./ha-progress-button";
@@ -59,7 +60,7 @@ class HaCallApiButton extends LitElement {
     fireEvent(this, "hass-api-called", eventData as any);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host([disabled]) {
         pointer-events: none;
diff --git a/src/components/buttons/ha-progress-button.ts b/src/components/buttons/ha-progress-button.ts
index bb431cf7cb..259ee75310 100644
--- a/src/components/buttons/ha-progress-button.ts
+++ b/src/components/buttons/ha-progress-button.ts
@@ -1,15 +1,7 @@
 import "@material/mwc-button";
 import type { Button } from "@material/mwc-button";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
 import "../ha-circular-progress";
 
 @customElement("ha-progress-button")
@@ -60,7 +52,7 @@ class HaProgressButton extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         outline: none;
diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index cca0ddf896..b3b8080e07 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -1,27 +1,30 @@
+import { Layout1d, scroll } from "@lit-labs/virtualizer";
 import deepClone from "deep-clone-simple";
 import {
   css,
-  CSSResult,
-  customElement,
-  eventOptions,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { ifDefined } from "lit-html/directives/if-defined";
-import { styleMap } from "lit-html/directives/style-map";
-import { scroll } from "lit-virtualizer";
+} from "lit";
+import {
+  customElement,
+  property,
+  state,
+  query,
+  eventOptions,
+} from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
+import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { restoreScroll } from "../../common/decorators/restore-scroll";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../common/search/search-input";
 import { debounce } from "../../common/util/debounce";
 import { nextRender } from "../../common/util/render-status";
+import { haStyleScrollbar } from "../../resources/styles";
 import "../ha-checkbox";
 import type { HaCheckbox } from "../ha-checkbox";
 import "../ha-icon";
@@ -118,21 +121,21 @@ export class HaDataTable extends LitElement {
 
   @property({ type: String }) public filter = "";
 
-  @internalProperty() private _filterable = false;
+  @state() private _filterable = false;
 
-  @internalProperty() private _filter = "";
+  @state() private _filter = "";
 
-  @internalProperty() private _sortColumn?: string;
+  @state() private _sortColumn?: string;
 
-  @internalProperty() private _sortDirection: SortingDirection = null;
+  @state() private _sortDirection: SortingDirection = null;
 
-  @internalProperty() private _filteredData: DataTableRowData[] = [];
+  @state() private _filteredData: DataTableRowData[] = [];
 
-  @internalProperty() private _headerHeight = 0;
+  @state() private _headerHeight = 0;
 
   @query("slot[name='header']") private _header!: HTMLSlotElement;
 
-  @internalProperty() private _items: DataTableRowData[] = [];
+  @state() private _items: DataTableRowData[] = [];
 
   private _checkableRowsCount?: number;
 
@@ -166,8 +169,12 @@ export class HaDataTable extends LitElement {
     }
   }
 
-  protected updated(properties: PropertyValues) {
-    super.updated(properties);
+  protected firstUpdated() {
+    this.updateComplete.then(() => this._calcTableHeight());
+  }
+
+  public willUpdate(properties: PropertyValues) {
+    super.willUpdate(properties);
 
     if (properties.has("columns")) {
       this._filterable = Object.values(this.columns).some(
@@ -327,12 +334,18 @@ export class HaDataTable extends LitElement {
               `
             : html`
                 <div
-                  class="mdc-data-table__content scroller"
+                  class="mdc-data-table__content scroller ha-scrollbar"
                   @scroll=${this._saveScrollPos}
                 >
                   ${scroll({
                     items: this._items,
+                    layout: Layout1d,
+                    // @ts-expect-error
                     renderItem: (row: DataTableRowData, index) => {
+                      // not sure how this happens...
+                      if (!row) {
+                        return "";
+                      }
                       if (row.append) {
                         return html`
                           <div class="mdc-data-table__row">${row.content}</div>
@@ -465,15 +478,16 @@ export class HaDataTable extends LitElement {
     }
 
     if (this.appendRow || this.hasFab) {
-      this._items = [...data];
+      const items = [...data];
 
       if (this.appendRow) {
-        this._items.push({ append: true, content: this.appendRow });
+        items.push({ append: true, content: this.appendRow });
       }
 
       if (this.hasFab) {
-        this._items.push({ empty: true });
+        items.push({ empty: true });
       }
+      this._items = items;
     } else {
       this._items = data;
     }
@@ -573,355 +587,359 @@ export class HaDataTable extends LitElement {
     this._savedScrollPos = (e.target as HTMLDivElement).scrollTop;
   }
 
-  static get styles(): CSSResult {
-    return css`
-      /* default mdc styles, colors changed, without checkbox styles */
-      :host {
-        height: 100%;
-      }
-      .mdc-data-table__content {
-        font-family: Roboto, sans-serif;
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-        font-weight: 400;
-        letter-spacing: 0.0178571429em;
-        text-decoration: inherit;
-        text-transform: inherit;
-      }
+  static get styles(): CSSResultGroup {
+    return [
+      haStyleScrollbar,
+      css`
+        /* default mdc styles, colors changed, without checkbox styles */
+        :host {
+          height: 100%;
+        }
+        .mdc-data-table__content {
+          font-family: Roboto, sans-serif;
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          font-size: 0.875rem;
+          line-height: 1.25rem;
+          font-weight: 400;
+          letter-spacing: 0.0178571429em;
+          text-decoration: inherit;
+          text-transform: inherit;
+        }
 
-      .mdc-data-table {
-        background-color: var(--data-table-background-color);
-        border-radius: 4px;
-        border-width: 1px;
-        border-style: solid;
-        border-color: var(--divider-color);
-        display: inline-flex;
-        flex-direction: column;
-        box-sizing: border-box;
-        overflow: hidden;
-      }
+        .mdc-data-table {
+          background-color: var(--data-table-background-color);
+          border-radius: 4px;
+          border-width: 1px;
+          border-style: solid;
+          border-color: var(--divider-color);
+          display: inline-flex;
+          flex-direction: column;
+          box-sizing: border-box;
+          overflow: hidden;
+        }
 
-      .mdc-data-table__row--selected {
-        background-color: rgba(var(--rgb-primary-color), 0.04);
-      }
+        .mdc-data-table__row--selected {
+          background-color: rgba(var(--rgb-primary-color), 0.04);
+        }
 
-      .mdc-data-table__row {
-        display: flex;
-        width: 100%;
-        height: 52px;
-      }
+        .mdc-data-table__row {
+          display: flex;
+          width: 100%;
+          height: 52px;
+        }
 
-      .mdc-data-table__row ~ .mdc-data-table__row {
-        border-top: 1px solid var(--divider-color);
-      }
+        .mdc-data-table__row ~ .mdc-data-table__row {
+          border-top: 1px solid var(--divider-color);
+        }
 
-      .mdc-data-table__row:not(.mdc-data-table__row--selected):hover {
-        background-color: rgba(var(--rgb-primary-text-color), 0.04);
-      }
+        .mdc-data-table__row:not(.mdc-data-table__row--selected):hover {
+          background-color: rgba(var(--rgb-primary-text-color), 0.04);
+        }
 
-      .mdc-data-table__header-cell {
-        color: var(--primary-text-color);
-      }
+        .mdc-data-table__header-cell {
+          color: var(--primary-text-color);
+        }
 
-      .mdc-data-table__cell {
-        color: var(--primary-text-color);
-      }
+        .mdc-data-table__cell {
+          color: var(--primary-text-color);
+        }
 
-      .mdc-data-table__header-row {
-        height: 56px;
-        display: flex;
-        width: 100%;
-        border-bottom: 1px solid var(--divider-color);
-        overflow-x: auto;
-      }
+        .mdc-data-table__header-row {
+          height: 56px;
+          display: flex;
+          width: 100%;
+          border-bottom: 1px solid var(--divider-color);
+          overflow-x: auto;
+        }
 
-      .mdc-data-table__header-row::-webkit-scrollbar {
-        display: none;
-      }
+        .mdc-data-table__header-row::-webkit-scrollbar {
+          display: none;
+        }
 
-      .mdc-data-table__cell,
-      .mdc-data-table__header-cell {
-        padding-right: 16px;
-        padding-left: 16px;
-        align-self: center;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        flex-shrink: 0;
-        box-sizing: border-box;
-      }
+        .mdc-data-table__cell,
+        .mdc-data-table__header-cell {
+          padding-right: 16px;
+          padding-left: 16px;
+          align-self: center;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          flex-shrink: 0;
+          box-sizing: border-box;
+        }
 
-      .mdc-data-table__cell.mdc-data-table__cell--icon {
-        overflow: initial;
-      }
+        .mdc-data-table__cell.mdc-data-table__cell--icon {
+          overflow: initial;
+        }
 
-      .mdc-data-table__header-cell--checkbox,
-      .mdc-data-table__cell--checkbox {
-        /* @noflip */
-        padding-left: 16px;
-        /* @noflip */
-        padding-right: 0;
-        width: 56px;
-      }
-      :host([dir="rtl"]) .mdc-data-table__header-cell--checkbox,
-      :host([dir="rtl"]) .mdc-data-table__cell--checkbox {
-        /* @noflip */
-        padding-left: 0;
-        /* @noflip */
-        padding-right: 16px;
-      }
+        .mdc-data-table__header-cell--checkbox,
+        .mdc-data-table__cell--checkbox {
+          /* @noflip */
+          padding-left: 16px;
+          /* @noflip */
+          padding-right: 0;
+          width: 56px;
+        }
+        :host([dir="rtl"]) .mdc-data-table__header-cell--checkbox,
+        :host([dir="rtl"]) .mdc-data-table__cell--checkbox {
+          /* @noflip */
+          padding-left: 0;
+          /* @noflip */
+          padding-right: 16px;
+        }
 
-      .mdc-data-table__table {
-        height: 100%;
-        width: 100%;
-        border: 0;
-        white-space: nowrap;
-      }
+        .mdc-data-table__table {
+          height: 100%;
+          width: 100%;
+          border: 0;
+          white-space: nowrap;
+        }
 
-      .mdc-data-table__cell {
-        font-family: Roboto, sans-serif;
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        font-size: 0.875rem;
-        line-height: 1.25rem;
-        font-weight: 400;
-        letter-spacing: 0.0178571429em;
-        text-decoration: inherit;
-        text-transform: inherit;
-      }
+        .mdc-data-table__cell {
+          font-family: Roboto, sans-serif;
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          font-size: 0.875rem;
+          line-height: 1.25rem;
+          font-weight: 400;
+          letter-spacing: 0.0178571429em;
+          text-decoration: inherit;
+          text-transform: inherit;
+        }
 
-      .mdc-data-table__cell a {
-        color: inherit;
-        text-decoration: none;
-      }
+        .mdc-data-table__cell a {
+          color: inherit;
+          text-decoration: none;
+        }
 
-      .mdc-data-table__cell--numeric {
-        text-align: right;
-      }
-      :host([dir="rtl"]) .mdc-data-table__cell--numeric {
-        /* @noflip */
-        text-align: left;
-      }
+        .mdc-data-table__cell--numeric {
+          text-align: right;
+        }
+        :host([dir="rtl"]) .mdc-data-table__cell--numeric {
+          /* @noflip */
+          text-align: left;
+        }
 
-      .mdc-data-table__cell--icon {
-        color: var(--secondary-text-color);
-        text-align: center;
-      }
+        .mdc-data-table__cell--icon {
+          color: var(--secondary-text-color);
+          text-align: center;
+        }
 
-      .mdc-data-table__header-cell--icon,
-      .mdc-data-table__cell--icon {
-        width: 54px;
-      }
+        .mdc-data-table__header-cell--icon,
+        .mdc-data-table__cell--icon {
+          width: 54px;
+        }
 
-      .mdc-data-table__header-cell.mdc-data-table__header-cell--icon {
-        text-align: center;
-      }
+        .mdc-data-table__header-cell.mdc-data-table__header-cell--icon {
+          text-align: center;
+        }
 
-      .mdc-data-table__header-cell.sortable.mdc-data-table__header-cell--icon:hover,
-      .mdc-data-table__header-cell.sortable.mdc-data-table__header-cell--icon:not(.not-sorted) {
-        text-align: left;
-      }
-      :host([dir="rtl"])
         .mdc-data-table__header-cell.sortable.mdc-data-table__header-cell--icon:hover,
-      :host([dir="rtl"])
         .mdc-data-table__header-cell.sortable.mdc-data-table__header-cell--icon:not(.not-sorted) {
-        text-align: right;
-      }
+          text-align: left;
+        }
+        :host([dir="rtl"])
+          .mdc-data-table__header-cell.sortable.mdc-data-table__header-cell--icon:hover,
+        :host([dir="rtl"])
+          .mdc-data-table__header-cell.sortable.mdc-data-table__header-cell--icon:not(.not-sorted) {
+          text-align: right;
+        }
 
-      .mdc-data-table__cell--icon:first-child ha-icon {
-        margin-left: 8px;
-      }
-      :host([dir="rtl"]) .mdc-data-table__cell--icon:first-child ha-icon {
-        margin-left: auto;
-        margin-right: 8px;
-      }
+        .mdc-data-table__cell--icon:first-child ha-icon {
+          margin-left: 8px;
+        }
+        :host([dir="rtl"]) .mdc-data-table__cell--icon:first-child ha-icon {
+          margin-left: auto;
+          margin-right: 8px;
+        }
 
-      .mdc-data-table__cell--icon:first-child state-badge {
-        margin-right: -8px;
-      }
-      :host([dir="rtl"]) .mdc-data-table__cell--icon:first-child state-badge {
-        margin-right: auto;
-        margin-left: -8px;
-      }
+        .mdc-data-table__cell--icon:first-child state-badge {
+          margin-right: -8px;
+        }
+        :host([dir="rtl"]) .mdc-data-table__cell--icon:first-child state-badge {
+          margin-right: auto;
+          margin-left: -8px;
+        }
 
-      .mdc-data-table__header-cell--icon-button,
-      .mdc-data-table__cell--icon-button {
-        width: 56px;
-        padding: 8px;
-      }
+        .mdc-data-table__header-cell--icon-button,
+        .mdc-data-table__cell--icon-button {
+          width: 56px;
+          padding: 8px;
+        }
 
-      .mdc-data-table__cell--icon-button {
-        color: var(--secondary-text-color);
-        text-overflow: clip;
-      }
+        .mdc-data-table__cell--icon-button {
+          color: var(--secondary-text-color);
+          text-overflow: clip;
+        }
 
-      .mdc-data-table__header-cell--icon-button:first-child,
-      .mdc-data-table__cell--icon-button:first-child {
-        width: 64px;
-        padding-left: 16px;
-      }
-      :host([dir="rtl"]) .mdc-data-table__header-cell--icon-button:first-child,
-      :host([dir="rtl"]) .mdc-data-table__cell--icon-button:first-child {
-        padding-left: auto;
-        padding-right: 16px;
-      }
+        .mdc-data-table__header-cell--icon-button:first-child,
+        .mdc-data-table__cell--icon-button:first-child {
+          width: 64px;
+          padding-left: 16px;
+        }
+        :host([dir="rtl"])
+          .mdc-data-table__header-cell--icon-button:first-child,
+        :host([dir="rtl"]) .mdc-data-table__cell--icon-button:first-child {
+          padding-left: auto;
+          padding-right: 16px;
+        }
 
-      .mdc-data-table__header-cell--icon-button:last-child,
-      .mdc-data-table__cell--icon-button:last-child {
-        width: 64px;
-        padding-right: 16px;
-      }
-      :host([dir="rtl"]) .mdc-data-table__header-cell--icon-button:last-child,
-      :host([dir="rtl"]) .mdc-data-table__cell--icon-button:last-child {
-        padding-right: auto;
-        padding-left: 16px;
-      }
+        .mdc-data-table__header-cell--icon-button:last-child,
+        .mdc-data-table__cell--icon-button:last-child {
+          width: 64px;
+          padding-right: 16px;
+        }
+        :host([dir="rtl"]) .mdc-data-table__header-cell--icon-button:last-child,
+        :host([dir="rtl"]) .mdc-data-table__cell--icon-button:last-child {
+          padding-right: auto;
+          padding-left: 16px;
+        }
 
-      .mdc-data-table__cell--icon-button a {
-        color: var(--secondary-text-color);
-      }
+        .mdc-data-table__cell--icon-button a {
+          color: var(--secondary-text-color);
+        }
 
-      .mdc-data-table__header-cell {
-        font-family: Roboto, sans-serif;
-        -moz-osx-font-smoothing: grayscale;
-        -webkit-font-smoothing: antialiased;
-        font-size: 0.875rem;
-        line-height: 1.375rem;
-        font-weight: 500;
-        letter-spacing: 0.0071428571em;
-        text-decoration: inherit;
-        text-transform: inherit;
-        text-align: left;
-      }
-      :host([dir="rtl"]) .mdc-data-table__header-cell {
-        /* @noflip */
-        text-align: right;
-      }
+        .mdc-data-table__header-cell {
+          font-family: Roboto, sans-serif;
+          -moz-osx-font-smoothing: grayscale;
+          -webkit-font-smoothing: antialiased;
+          font-size: 0.875rem;
+          line-height: 1.375rem;
+          font-weight: 500;
+          letter-spacing: 0.0071428571em;
+          text-decoration: inherit;
+          text-transform: inherit;
+          text-align: left;
+        }
+        :host([dir="rtl"]) .mdc-data-table__header-cell {
+          /* @noflip */
+          text-align: right;
+        }
 
-      .mdc-data-table__header-cell--numeric {
-        text-align: right;
-      }
-      .mdc-data-table__header-cell--numeric.sortable:hover,
-      .mdc-data-table__header-cell--numeric.sortable:not(.not-sorted) {
-        text-align: left;
-      }
-      :host([dir="rtl"]) .mdc-data-table__header-cell--numeric {
-        /* @noflip */
-        text-align: left;
-      }
-      :host([dir="rtl"]) .mdc-data-table__header-cell--numeric.sortable:hover,
-      :host([dir="rtl"])
+        .mdc-data-table__header-cell--numeric {
+          text-align: right;
+        }
+        .mdc-data-table__header-cell--numeric.sortable:hover,
         .mdc-data-table__header-cell--numeric.sortable:not(.not-sorted) {
-        text-align: right;
-      }
+          text-align: left;
+        }
+        :host([dir="rtl"]) .mdc-data-table__header-cell--numeric {
+          /* @noflip */
+          text-align: left;
+        }
+        :host([dir="rtl"]) .mdc-data-table__header-cell--numeric.sortable:hover,
+        :host([dir="rtl"])
+          .mdc-data-table__header-cell--numeric.sortable:not(.not-sorted) {
+          text-align: right;
+        }
 
-      /* custom from here */
+        /* custom from here */
 
-      :host {
-        display: block;
-      }
+        :host {
+          display: block;
+        }
 
-      .mdc-data-table {
-        display: block;
-        border-width: var(--data-table-border-width, 1px);
-        height: 100%;
-      }
-      .mdc-data-table__header-cell {
-        overflow: hidden;
-        position: relative;
-      }
-      .mdc-data-table__header-cell span {
-        position: relative;
-        left: 0px;
-      }
-      :host([dir="rtl"]) .mdc-data-table__header-cell span {
-        left: auto;
-        right: 0px;
-      }
+        .mdc-data-table {
+          display: block;
+          border-width: var(--data-table-border-width, 1px);
+          height: 100%;
+        }
+        .mdc-data-table__header-cell {
+          overflow: hidden;
+          position: relative;
+        }
+        .mdc-data-table__header-cell span {
+          position: relative;
+          left: 0px;
+        }
+        :host([dir="rtl"]) .mdc-data-table__header-cell span {
+          left: auto;
+          right: 0px;
+        }
 
-      .mdc-data-table__header-cell.sortable {
-        cursor: pointer;
-      }
-      .mdc-data-table__header-cell > * {
-        transition: left 0.2s ease;
-      }
-      :host([dir="rtl"]) .mdc-data-table__header-cell > * {
-        transition: right 0.2s ease;
-      }
-      .mdc-data-table__header-cell ha-icon {
-        top: -3px;
-        position: absolute;
-      }
-      .mdc-data-table__header-cell.not-sorted ha-icon {
-        left: -20px;
-      }
-      :host([dir="rtl"]) .mdc-data-table__header-cell.not-sorted ha-icon {
-        right: -20px;
-      }
-      .mdc-data-table__header-cell.sortable:not(.not-sorted) span,
-      .mdc-data-table__header-cell.sortable.not-sorted:hover span {
-        left: 24px;
-      }
-      :host([dir="rtl"])
-        .mdc-data-table__header-cell.sortable:not(.not-sorted)
-        span,
-      :host([dir="rtl"])
-        .mdc-data-table__header-cell.sortable.not-sorted:hover
-        span {
-        left: auto;
-        right: 24px;
-      }
-      .mdc-data-table__header-cell.sortable:not(.not-sorted) ha-icon,
-      .mdc-data-table__header-cell.sortable:hover.not-sorted ha-icon {
-        left: 12px;
-      }
-      :host([dir="rtl"])
-        .mdc-data-table__header-cell.sortable:not(.not-sorted)
-        ha-icon,
-      :host([dir="rtl"])
-        .mdc-data-table__header-cell.sortable:hover.not-sorted
-        ha-icon {
-        left: auto;
-        right: 12px;
-      }
-      .table-header {
-        border-bottom: 1px solid var(--divider-color);
-        padding: 0 16px;
-      }
-      search-input {
-        position: relative;
-        top: 2px;
-      }
-      slot[name="header"] {
-        display: block;
-      }
-      .center {
-        text-align: center;
-      }
-      .secondary {
-        color: var(--secondary-text-color);
-      }
-      .scroller {
-        display: flex;
-        position: relative;
-        contain: strict;
-        height: calc(100% - 57px);
-      }
-      .mdc-data-table__table:not(.auto-height) .scroller {
-        overflow: auto;
-      }
-      .grows {
-        flex-grow: 1;
-        flex-shrink: 1;
-      }
-      .forceLTR {
-        direction: ltr;
-      }
-      .clickable {
-        cursor: pointer;
-      }
-    `;
+        .mdc-data-table__header-cell.sortable {
+          cursor: pointer;
+        }
+        .mdc-data-table__header-cell > * {
+          transition: left 0.2s ease;
+        }
+        :host([dir="rtl"]) .mdc-data-table__header-cell > * {
+          transition: right 0.2s ease;
+        }
+        .mdc-data-table__header-cell ha-icon {
+          top: -3px;
+          position: absolute;
+        }
+        .mdc-data-table__header-cell.not-sorted ha-icon {
+          left: -20px;
+        }
+        :host([dir="rtl"]) .mdc-data-table__header-cell.not-sorted ha-icon {
+          right: -20px;
+        }
+        .mdc-data-table__header-cell.sortable:not(.not-sorted) span,
+        .mdc-data-table__header-cell.sortable.not-sorted:hover span {
+          left: 24px;
+        }
+        :host([dir="rtl"])
+          .mdc-data-table__header-cell.sortable:not(.not-sorted)
+          span,
+        :host([dir="rtl"])
+          .mdc-data-table__header-cell.sortable.not-sorted:hover
+          span {
+          left: auto;
+          right: 24px;
+        }
+        .mdc-data-table__header-cell.sortable:not(.not-sorted) ha-icon,
+        .mdc-data-table__header-cell.sortable:hover.not-sorted ha-icon {
+          left: 12px;
+        }
+        :host([dir="rtl"])
+          .mdc-data-table__header-cell.sortable:not(.not-sorted)
+          ha-icon,
+        :host([dir="rtl"])
+          .mdc-data-table__header-cell.sortable:hover.not-sorted
+          ha-icon {
+          left: auto;
+          right: 12px;
+        }
+        .table-header {
+          border-bottom: 1px solid var(--divider-color);
+          padding: 0 16px;
+        }
+        search-input {
+          position: relative;
+          top: 2px;
+        }
+        slot[name="header"] {
+          display: block;
+        }
+        .center {
+          text-align: center;
+        }
+        .secondary {
+          color: var(--secondary-text-color);
+        }
+        .scroller {
+          display: flex;
+          position: relative;
+          contain: strict;
+          height: calc(100% - 57px);
+        }
+        .mdc-data-table__table:not(.auto-height) .scroller {
+          overflow: auto;
+        }
+        .grows {
+          flex-grow: 1;
+          flex-shrink: 1;
+        }
+        .forceLTR {
+          direction: ltr;
+        }
+        .clickable {
+          cursor: pointer;
+        }
+      `,
+    ];
   }
 }
 
diff --git a/src/components/date-range-picker.ts b/src/components/date-range-picker.ts
index f7ec87169e..6ad2905564 100644
--- a/src/components/date-range-picker.ts
+++ b/src/components/date-range-picker.ts
@@ -1,8 +1,8 @@
-// @ts-nocheck
 import wrap from "@vue/web-component-wrapper";
-import { customElement } from "lit-element/lib/decorators";
+import { customElement } from "lit/decorators";
 import Vue from "vue";
 import DateRangePicker from "vue2-daterange-picker";
+// @ts-ignore
 import dateRangePickerStyles from "vue2-daterange-picker/dist/vue2-daterange-picker.css";
 import { fireEvent } from "../common/dom/fire_event";
 import { Constructor } from "../types";
@@ -35,22 +35,29 @@ const Component = Vue.extend({
     },
   },
   render(createElement) {
+    // @ts-ignore
     return createElement(DateRangePicker, {
       props: {
         "time-picker": true,
         "auto-apply": false,
         opens: "right",
         "show-dropdowns": false,
+        // @ts-ignore
         "time-picker24-hour": this.twentyfourHours,
+        // @ts-ignore
         disabled: this.disabled,
+        // @ts-ignore
         ranges: this.ranges ? {} : false,
       },
       model: {
         value: {
+          // @ts-ignore
           startDate: this.startDate,
+          // @ts-ignore
           endDate: this.endDate,
         },
         callback: (value) => {
+          // @ts-ignore
           fireEvent(this.$el as HTMLElement, "change", value);
         },
         expression: "dateRange",
diff --git a/src/components/device/ha-area-devices-picker.ts b/src/components/device/ha-area-devices-picker.ts
index 6e635d0720..712e1b1bb3 100644
--- a/src/components/device/ha-area-devices-picker.ts
+++ b/src/components/device/ha-area-devices-picker.ts
@@ -9,15 +9,13 @@ import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
@@ -40,6 +38,7 @@ import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
 import "../ha-svg-icon";
 import "./ha-devices-picker";
+import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
 
 interface DevicesByArea {
   [areaId: string]: AreaDevices;
@@ -51,42 +50,28 @@ interface AreaDevices {
   devices: string[];
 }
 
-const rowRenderer = (
-  root: HTMLElement,
-  _owner,
-  model: { item: AreaDevices }
-) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-    <style>
-      paper-item {
-        width: 100%;
-        margin: -10px 0;
-        padding: 0;
-      }
-      mwc-icon-button {
-        float: right;
-      }
-      .devices {
-        display: none;
-      }
-      .devices.visible {
-        display: block;
-      }
-    </style>
-    <paper-item>
-      <paper-item-body two-line="">
-        <div class='name'>[[item.name]]</div>
-        <div secondary>[[item.devices.length]] devices</div>
-      </paper-item-body>
-    </paper-item>
-    `;
-  }
-  root.querySelector(".name")!.textContent = model.item.name!;
-  root.querySelector(
-    "[secondary]"
-  )!.textContent = `${model.item.devices.length.toString()} devices`;
-};
+const rowRenderer: ComboBoxLitRenderer<AreaDevices> = (item) => html`<style>
+    paper-item {
+      width: 100%;
+      margin: -10px 0;
+      padding: 0;
+    }
+    mwc-icon-button {
+      float: right;
+    }
+    .devices {
+      display: none;
+    }
+    .devices.visible {
+      display: block;
+    }
+  </style>
+  <paper-item>
+    <paper-item-body two-line="">
+      <div class="name">${item.name}</div>
+      <div secondary>${item.devices.length} devices</div>
+    </paper-item-body>
+  </paper-item>`;
 
 @customElement("ha-area-devices-picker")
 export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
@@ -127,13 +112,13 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
   @property({ type: Boolean })
   private _opened?: boolean;
 
-  @internalProperty() private _areaPicker = true;
+  @state() private _areaPicker = true;
 
-  @internalProperty() private _devices?: DeviceRegistryEntry[];
+  @state() private _devices?: DeviceRegistryEntry[];
 
-  @internalProperty() private _areas?: AreaRegistryEntry[];
+  @state() private _areas?: AreaRegistryEntry[];
 
-  @internalProperty() private _entities?: EntityRegistryEntry[];
+  @state() private _entities?: EntityRegistryEntry[];
 
   private _selectedDevices: string[] = [];
 
@@ -312,7 +297,7 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
         item-label-path="name"
         .items=${areas}
         .value=${this._value}
-        .renderer=${rowRenderer}
+        ${comboBoxRenderer(rowRenderer)}
         @opened-changed=${this._openedChanged}
         @value-changed=${this._areaPicked}
       >
@@ -407,7 +392,7 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
     }, 0);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .suffix {
         display: flex;
diff --git a/src/components/device/ha-device-action-picker.ts b/src/components/device/ha-device-action-picker.ts
index e8e50f5b47..ce053d45cf 100644
--- a/src/components/device/ha-device-action-picker.ts
+++ b/src/components/device/ha-device-action-picker.ts
@@ -1,4 +1,4 @@
-import { customElement } from "lit-element";
+import { customElement } from "lit/decorators";
 import {
   DeviceAction,
   fetchDeviceActions,
diff --git a/src/components/device/ha-device-automation-picker.ts b/src/components/device/ha-device-automation-picker.ts
index 98e79035b6..e4cc705dce 100644
--- a/src/components/device/ha-device-automation-picker.ts
+++ b/src/components/device/ha-device-automation-picker.ts
@@ -2,15 +2,8 @@ import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-listbox/paper-listbox";
-import {
-  css,
-  CSSResult,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import {
   DeviceAutomation,
@@ -33,11 +26,11 @@ export abstract class HaDeviceAutomationPicker<
 
   @property() public value?: T;
 
-  @internalProperty() private _automations: T[] = [];
+  @state() private _automations: T[] = [];
 
   // Trigger an empty render so we start with a clean DOM.
   // paper-listbox does not like changing things around.
-  @internalProperty() private _renderEmpty = false;
+  @state() private _renderEmpty = false;
 
   protected get NO_AUTOMATION_TEXT() {
     return this.hass.localize(
@@ -188,7 +181,7 @@ export abstract class HaDeviceAutomationPicker<
     fireEvent(this, "value-changed", { value: automation });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-paper-dropdown-menu {
         width: 100%;
diff --git a/src/components/device/ha-device-condition-picker.ts b/src/components/device/ha-device-condition-picker.ts
index 3ab706e73d..977a4ee05f 100644
--- a/src/components/device/ha-device-condition-picker.ts
+++ b/src/components/device/ha-device-condition-picker.ts
@@ -1,4 +1,4 @@
-import { customElement } from "lit-element";
+import { customElement } from "lit/decorators";
 import {
   DeviceCondition,
   fetchDeviceConditions,
diff --git a/src/components/device/ha-device-picker.ts b/src/components/device/ha-device-picker.ts
index 3644ad9405..1333f9fb82 100644
--- a/src/components/device/ha-device-picker.ts
+++ b/src/components/device/ha-device-picker.ts
@@ -3,16 +3,13 @@ import "@polymer/paper-item/paper-item-body";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
@@ -34,8 +31,9 @@ import {
 import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
-import type { HaComboBox } from "../ha-combo-box";
 import "../ha-combo-box";
+import type { HaComboBox } from "../ha-combo-box";
+import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
 
 interface Device {
   name: string;
@@ -47,27 +45,18 @@ export type HaDevicePickerDeviceFilterFunc = (
   device: DeviceRegistryEntry
 ) => boolean;
 
-const rowRenderer = (root: HTMLElement, _owner, model: { item: Device }) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-    <style>
-      paper-item {
-        margin: -10px 0;
-        padding: 0;
-      }
-    </style>
-    <paper-item>
-      <paper-item-body two-line="">
-        <div class='name'>[[item.name]]</div>
-        <div secondary>[[item.area]]</div>
-      </paper-item-body>
-    </paper-item>
-    `;
-  }
-
-  root.querySelector(".name")!.textContent = model.item.name!;
-  root.querySelector("[secondary]")!.textContent = model.item.area!;
-};
+const rowRenderer: ComboBoxLitRenderer<Device> = (item) => html`<style>
+    paper-item {
+      margin: -10px 0;
+      padding: 0;
+    }
+  </style>
+  <paper-item>
+    <paper-item-body two-line>
+      ${item.name}
+      <span secondary>${item.area}</span>
+    </paper-item-body>
+  </paper-item>`;
 
 @customElement("ha-device-picker")
 export class HaDevicePicker extends SubscribeMixin(LitElement) {
@@ -111,7 +100,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean }) public disabled?: boolean;
 
-  @internalProperty() private _opened?: boolean;
+  @state() private _opened?: boolean;
 
   @query("ha-combo-box", true) public comboBox!: HaComboBox;
 
@@ -326,7 +315,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
     }, 0);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       paper-input > mwc-icon-button {
         --mdc-icon-button-size: 24px;
diff --git a/src/components/device/ha-device-trigger-picker.ts b/src/components/device/ha-device-trigger-picker.ts
index d1ff66d37e..142955b24a 100644
--- a/src/components/device/ha-device-trigger-picker.ts
+++ b/src/components/device/ha-device-trigger-picker.ts
@@ -1,4 +1,4 @@
-import { customElement } from "lit-element";
+import { customElement } from "lit/decorators";
 import {
   DeviceTrigger,
   fetchDeviceTriggers,
diff --git a/src/components/device/ha-devices-picker.ts b/src/components/device/ha-devices-picker.ts
index 9106521d1d..1b437da780 100644
--- a/src/components/device/ha-devices-picker.ts
+++ b/src/components/device/ha-devices-picker.ts
@@ -1,10 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
diff --git a/src/components/entity/ha-battery-icon.ts b/src/components/entity/ha-battery-icon.ts
index 45f4f7d553..40233ec4a3 100644
--- a/src/components/entity/ha-battery-icon.ts
+++ b/src/components/entity/ha-battery-icon.ts
@@ -1,4 +1,5 @@
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { batteryIcon } from "../../common/entity/battery_icon";
 import "../ha-icon";
 
diff --git a/src/components/entity/ha-entities-picker.ts b/src/components/entity/ha-entities-picker.ts
index 0ac66ed8fa..3f754e464c 100644
--- a/src/components/entity/ha-entities-picker.ts
+++ b/src/components/entity/ha-entities-picker.ts
@@ -1,11 +1,6 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import {
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { isValidEntityId } from "../../common/entity/valid_entity_id";
 import type { PolymerChangedEvent } from "../../polymer-types";
diff --git a/src/components/entity/ha-entity-attribute-picker.ts b/src/components/entity/ha-entity-attribute-picker.ts
index 784ea421f8..b0b07b40ea 100644
--- a/src/components/entity/ha-entity-attribute-picker.ts
+++ b/src/components/entity/ha-entity-attribute-picker.ts
@@ -6,15 +6,14 @@ import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
+import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
@@ -24,22 +23,13 @@ import "./state-badge";
 
 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
 
-const rowRenderer = (root: HTMLElement, _owner, model: { item: string }) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-      <style>
-        paper-item {
-          margin: -10px;
-          padding: 0;
-        }
-      </style>
-      <paper-item></paper-item>
-    `;
-  }
-  root.querySelector("paper-item")!.textContent = formatAttributeName(
-    model.item
-  );
-};
+const rowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
+    paper-item {
+      margin: -5px -10px;
+      padding: 0;
+    }
+  </style>
+  <paper-item>${formatAttributeName(item)}</paper-item>`;
 
 @customElement("ha-entity-attribute-picker")
 class HaEntityAttributePicker extends LitElement {
@@ -84,8 +74,8 @@ class HaEntityAttributePicker extends LitElement {
       <vaadin-combo-box-light
         .value=${this._value}
         .allowCustomValue=${this.allowCustomValue}
-        .renderer=${rowRenderer}
         attr-for-value="bind-value"
+        ${comboBoxRenderer(rowRenderer)}
         @opened-changed=${this._openedChanged}
         @value-changed=${this._valueChanged}
       >
@@ -165,7 +155,7 @@ class HaEntityAttributePicker extends LitElement {
     }, 0);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .suffix {
         display: flex;
diff --git a/src/components/entity/ha-entity-picker.ts b/src/components/entity/ha-entity-picker.ts
index dfaeecd570..e17393a775 100644
--- a/src/components/entity/ha-entity-picker.ts
+++ b/src/components/entity/ha-entity-picker.ts
@@ -7,15 +7,14 @@ import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
+import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeDomain } from "../../common/entity/compute_domain";
@@ -27,32 +26,19 @@ import "./state-badge";
 
 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
 
-const rowRenderer = (
-  root: HTMLElement,
-  _owner,
-  model: { item: HassEntity }
-) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-      <style>
-        paper-icon-item {
-          margin: -10px;
-          padding: 0;
-        }
-      </style>
-      <paper-icon-item>
-        <state-badge slot="item-icon"></state-badge>
-        <paper-item-body two-line="">
-          <div class='name'></div>
-          <div secondary></div>
-        </paper-item-body>
-      </paper-icon-item>
-    `;
-  }
-  root.querySelector("state-badge")!.stateObj = model.item;
-  root.querySelector(".name")!.textContent = computeStateName(model.item);
-  root.querySelector("[secondary]")!.textContent = model.item.entity_id;
-};
+const rowRenderer: ComboBoxLitRenderer<HassEntity> = (item) => html`<style>
+    paper-icon-item {
+      margin: -10px;
+      padding: 0;
+    }
+  </style>
+  <paper-icon-item>
+    <state-badge slot="item-icon" .stateObj=${item}></state-badge>
+    <paper-item-body two-line="">
+      ${computeStateName(item)}
+      <span secondary>${item.entity_id}</span>
+    </paper-item-body>
+  </paper-icon-item>`;
 
 @customElement("ha-entity-picker")
 export class HaEntityPicker extends LitElement {
@@ -223,7 +209,7 @@ export class HaEntityPicker extends LitElement {
         item-label-path="entity_id"
         .value=${this._value}
         .allowCustomValue=${this.allowCustomEntity}
-        .renderer=${rowRenderer}
+        ${comboBoxRenderer(rowRenderer)}
         @opened-changed=${this._openedChanged}
         @value-changed=${this._valueChanged}
         @filter-changed=${this._filterChanged}
@@ -311,7 +297,7 @@ export class HaEntityPicker extends LitElement {
     }, 0);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .suffix {
         display: flex;
diff --git a/src/components/entity/ha-entity-toggle.ts b/src/components/entity/ha-entity-toggle.ts
index 10fb56e096..5a3942d5d3 100644
--- a/src/components/entity/ha-entity-toggle.ts
+++ b/src/components/entity/ha-entity-toggle.ts
@@ -1,23 +1,22 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { property, state } from "lit/decorators";
 import { STATES_OFF } from "../../common/const";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { UNAVAILABLE, UNAVAILABLE_STATES } from "../../data/entity";
 import { forwardHaptic } from "../../data/haptics";
 import { HomeAssistant } from "../../types";
+import "../ha-formfield";
 import "../ha-icon-button";
 import "../ha-switch";
-import "../ha-formfield";
 
 const isOn = (stateObj?: HassEntity) =>
   stateObj !== undefined &&
@@ -32,7 +31,7 @@ export class HaEntityToggle extends LitElement {
 
   @property() public label?: string;
 
-  @internalProperty() private _isOn = false;
+  @state() private _isOn = false;
 
   protected render(): TemplateResult {
     if (!this.stateObj) {
@@ -81,7 +80,8 @@ export class HaEntityToggle extends LitElement {
     this.addEventListener("click", (ev) => ev.stopPropagation());
   }
 
-  protected updated(changedProps: PropertyValues): void {
+  public willUpdate(changedProps: PropertyValues): void {
+    super.willUpdate(changedProps);
     if (changedProps.has("stateObj")) {
       this._isOn = isOn(this.stateObj);
     }
@@ -148,7 +148,7 @@ export class HaEntityToggle extends LitElement {
     }, 2000);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         white-space: nowrap;
diff --git a/src/components/entity/ha-state-label-badge.ts b/src/components/entity/ha-state-label-badge.ts
index 340677ff41..eaa8f89c53 100644
--- a/src/components/entity/ha-state-label-badge.ts
+++ b/src/components/entity/ha-state-label-badge.ts
@@ -1,23 +1,21 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import secondsToDuration from "../../common/datetime/seconds_to_duration";
 import { computeStateDisplay } from "../../common/entity/compute_state_display";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { domainIcon } from "../../common/entity/domain_icon";
 import { stateIcon } from "../../common/entity/state_icon";
-import { timerTimeRemaining } from "../../common/entity/timer_time_remaining";
+import { timerTimeRemaining } from "../../data/timer";
 import { formatNumber } from "../../common/string/format_number";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { HomeAssistant } from "../../types";
@@ -35,7 +33,7 @@ export class HaStateLabelBadge extends LitElement {
 
   @property() public image?: string;
 
-  @internalProperty() private _timerTimeRemaining?: number;
+  @state() private _timerTimeRemaining?: number;
 
   private _connected?: boolean;
 
@@ -54,9 +52,9 @@ export class HaStateLabelBadge extends LitElement {
   }
 
   protected render(): TemplateResult {
-    const state = this.state;
+    const entityState = this.state;
 
-    if (!state) {
+    if (!entityState) {
       return html`
         <ha-label-badge
           class="warning"
@@ -69,24 +67,31 @@ export class HaStateLabelBadge extends LitElement {
       `;
     }
 
-    const domain = computeStateDomain(state);
+    const domain = computeStateDomain(entityState);
 
     return html`
       <ha-label-badge
         class="${classMap({
           [domain]: true,
-          "has-unit_of_measurement": "unit_of_measurement" in state.attributes,
+          "has-unit_of_measurement":
+            "unit_of_measurement" in entityState.attributes,
         })}"
-        .value="${this._computeValue(domain, state)}"
-        .icon="${this.icon ? this.icon : this._computeIcon(domain, state)}"
+        .value="${this._computeValue(domain, entityState)}"
+        .icon="${this.icon
+          ? this.icon
+          : this._computeIcon(domain, entityState)}"
         .image="${this.icon
           ? ""
           : this.image
           ? this.image
-          : state.attributes.entity_picture_local ||
-            state.attributes.entity_picture}"
-        .label="${this._computeLabel(domain, state, this._timerTimeRemaining)}"
-        .description="${this.name ? this.name : computeStateName(state)}"
+          : entityState.attributes.entity_picture_local ||
+            entityState.attributes.entity_picture}"
+        .label="${this._computeLabel(
+          domain,
+          entityState,
+          this._timerTimeRemaining
+        )}"
+        .description="${this.name ? this.name : computeStateName(entityState)}"
       ></ha-label-badge>
     `;
   }
@@ -99,7 +104,7 @@ export class HaStateLabelBadge extends LitElement {
     }
   }
 
-  private _computeValue(domain: string, state: HassEntity) {
+  private _computeValue(domain: string, entityState: HassEntity) {
     switch (domain) {
       case "binary_sensor":
       case "device_tracker":
@@ -111,77 +116,81 @@ export class HaStateLabelBadge extends LitElement {
         return null;
       case "sensor":
       default:
-        return state.attributes.device_class === "moon__phase"
+        return entityState.attributes.device_class === "moon__phase"
           ? null
-          : state.state === UNKNOWN
+          : entityState.state === UNKNOWN
           ? "-"
-          : state.attributes.unit_of_measurement
-          ? formatNumber(state.state, this.hass!.locale)
-          : computeStateDisplay(this.hass!.localize, state, this.hass!.locale);
+          : entityState.attributes.unit_of_measurement
+          ? formatNumber(entityState.state, this.hass!.locale)
+          : computeStateDisplay(
+              this.hass!.localize,
+              entityState,
+              this.hass!.locale
+            );
     }
   }
 
-  private _computeIcon(domain: string, state: HassEntity) {
-    if (state.state === UNAVAILABLE) {
+  private _computeIcon(domain: string, entityState: HassEntity) {
+    if (entityState.state === UNAVAILABLE) {
       return null;
     }
     switch (domain) {
       case "alarm_control_panel":
-        if (state.state === "pending") {
+        if (entityState.state === "pending") {
           return "hass:clock-fast";
         }
-        if (state.state === "armed_away") {
+        if (entityState.state === "armed_away") {
           return "hass:nature";
         }
-        if (state.state === "armed_home") {
+        if (entityState.state === "armed_home") {
           return "hass:home-variant";
         }
-        if (state.state === "armed_night") {
+        if (entityState.state === "armed_night") {
           return "hass:weather-night";
         }
-        if (state.state === "armed_custom_bypass") {
+        if (entityState.state === "armed_custom_bypass") {
           return "hass:shield-home";
         }
-        if (state.state === "triggered") {
+        if (entityState.state === "triggered") {
           return "hass:alert-circle";
         }
         // state == 'disarmed'
-        return domainIcon(domain, state);
+        return domainIcon(domain, entityState);
       case "binary_sensor":
       case "device_tracker":
       case "updater":
       case "person":
       case "sun":
-        return stateIcon(state);
+        return stateIcon(entityState);
       case "timer":
-        return state.state === "active"
+        return entityState.state === "active"
           ? "hass:timer-outline"
           : "hass:timer-off-outline";
       default:
-        return state?.attributes.device_class === "moon__phase"
-          ? stateIcon(state)
+        return entityState?.attributes.device_class === "moon__phase"
+          ? stateIcon(entityState)
           : null;
     }
   }
 
-  private _computeLabel(domain, state, _timerTimeRemaining) {
+  private _computeLabel(domain, entityState, _timerTimeRemaining) {
     if (
-      state.state === UNAVAILABLE ||
+      entityState.state === UNAVAILABLE ||
       ["device_tracker", "alarm_control_panel", "person"].includes(domain)
     ) {
       // Localize the state with a special state_badge namespace, which has variations of
       // the state translations that are truncated to fit within the badge label. Translations
       // are only added for device_tracker, alarm_control_panel and person.
       return (
-        this.hass!.localize(`state_badge.${domain}.${state.state}`) ||
-        this.hass!.localize(`state_badge.default.${state.state}`) ||
-        state.state
+        this.hass!.localize(`state_badge.${domain}.${entityState.state}`) ||
+        this.hass!.localize(`state_badge.default.${entityState.state}`) ||
+        entityState.state
       );
     }
     if (domain === "timer") {
       return secondsToDuration(_timerTimeRemaining);
     }
-    return state.attributes.unit_of_measurement || null;
+    return entityState.attributes.unit_of_measurement || null;
   }
 
   private clearInterval() {
@@ -209,7 +218,7 @@ export class HaStateLabelBadge extends LitElement {
     this._timerTimeRemaining = timerTimeRemaining(stateObj);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         cursor: pointer;
diff --git a/src/components/entity/state-badge.ts b/src/components/entity/state-badge.ts
index 46886fa909..8dea329c93 100644
--- a/src/components/entity/state-badge.ts
+++ b/src/components/entity/state-badge.ts
@@ -1,16 +1,15 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
-import { styleMap } from "lit-html/directives/style-map";
+} from "lit";
+import { property, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
+import { styleMap } from "lit/directives/style-map";
 import { computeActiveState } from "../../common/entity/compute_active_state";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { stateIcon } from "../../common/entity/state_icon";
@@ -32,7 +31,7 @@ export class StateBadge extends LitElement {
   @property({ type: Boolean, reflect: true, attribute: "icon" })
   private _showIcon = true;
 
-  @internalProperty() private _iconStyle: { [name: string]: string } = {};
+  @state() private _iconStyle: { [name: string]: string } = {};
 
   protected render(): TemplateResult {
     const stateObj = this.stateObj;
@@ -64,7 +63,8 @@ export class StateBadge extends LitElement {
     `;
   }
 
-  protected updated(changedProps: PropertyValues) {
+  public willUpdate(changedProps: PropertyValues) {
+    super.willUpdate(changedProps);
     if (
       !changedProps.has("stateObj") &&
       !changedProps.has("overrideImage") &&
@@ -128,7 +128,7 @@ export class StateBadge extends LitElement {
     Object.assign(this.style, hostStyle);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         position: relative;
diff --git a/src/components/entity/state-info.ts b/src/components/entity/state-info.ts
index 0bb035cc7f..a4dbd8b87e 100644
--- a/src/components/entity/state-info.ts
+++ b/src/components/entity/state-info.ts
@@ -1,14 +1,7 @@
 import "@polymer/paper-tooltip/paper-tooltip";
 import type { HassEntity } 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 { computeStateName } from "../../common/entity/compute_state_name";
 import { computeRTL } from "../../common/util/compute_rtl";
 import type { HomeAssistant } from "../../types";
@@ -73,7 +66,7 @@ class StateInfo extends LitElement {
                 </div>
               </paper-tooltip>
             </div>`
-          : html`<div class="extra-info"><slot> </slot></div>`}
+          : html`<div class="extra-info"><slot></slot></div>`}
       </div>`;
   }
 
@@ -89,7 +82,7 @@ class StateInfo extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         min-width: 120px;
@@ -106,6 +99,10 @@ class StateInfo extends LitElement {
 
       .info {
         margin-left: 56px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        height: 100%;
       }
 
       :host([rtl]) .info {
diff --git a/src/components/ha-addon-picker.ts b/src/components/ha-addon-picker.ts
index 582eaefcff..f868d5ead6 100644
--- a/src/components/ha-addon-picker.ts
+++ b/src/components/ha-addon-picker.ts
@@ -1,12 +1,5 @@
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state, query } from "lit/decorators";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { fireEvent } from "../common/dom/fire_event";
 import { compare } from "../common/string/compare";
@@ -16,32 +9,20 @@ import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
 import { HaComboBox } from "./ha-combo-box";
+import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
 
-const rowRenderer = (
-  root: HTMLElement,
-  _owner,
-  model: { item: HassioAddonInfo }
-) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-    <style>
-      paper-item {
-        margin: -10px 0;
-        padding: 0;
-      }
-    </style>
-    <paper-item>
-      <paper-item-body two-line="">
-        <div class='name'>[[item.name]]</div>
-        <div secondary>[[item.slug]]</div>
-      </paper-item-body>
-    </paper-item>
-    `;
-  }
-
-  root.querySelector(".name")!.textContent = model.item.name;
-  root.querySelector("[secondary]")!.textContent = model.item.slug;
-};
+const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (item) => html`<style>
+    paper-item {
+      margin: -10px 0;
+      padding: 0;
+    }
+  </style>
+  <paper-item>
+    <paper-item-body two-line>
+      ${item.name}
+      <span secondary>${item.slug}</span>
+    </paper-item-body>
+  </paper-item>`;
 
 @customElement("ha-addon-picker")
 class HaAddonPicker extends LitElement {
@@ -51,7 +32,7 @@ class HaAddonPicker extends LitElement {
 
   @property() public value = "";
 
-  @internalProperty() private _addons?: HassioAddonInfo[];
+  @state() private _addons?: HassioAddonInfo[];
 
   @property({ type: Boolean }) public disabled = false;
 
diff --git a/src/components/ha-analytics-learn-more.ts b/src/components/ha-analytics-learn-more.ts
index 75acdab0b5..e806b2e459 100644
--- a/src/components/ha-analytics-learn-more.ts
+++ b/src/components/ha-analytics-learn-more.ts
@@ -1,4 +1,4 @@
-import { html } from "lit-element";
+import { html } from "lit";
 import { HomeAssistant } from "../types";
 import { documentationUrl } from "../util/documentation-url";
 
diff --git a/src/components/ha-analytics.ts b/src/components/ha-analytics.ts
index e3f5ae6858..d81cbf379c 100644
--- a/src/components/ha-analytics.ts
+++ b/src/components/ha-analytics.ts
@@ -1,13 +1,6 @@
 import "@polymer/paper-tooltip/paper-tooltip";
-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 { fireEvent } from "../common/dom/fire_event";
 import { Analytics, AnalyticsPreferences } from "../data/analytics";
 import { haStyle } from "../resources/styles";
@@ -151,7 +144,7 @@ export class HaAnalytics extends LitElement {
     fireEvent(this, "analytics-preferences-changed", { preferences });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/components/ha-area-picker.ts b/src/components/ha-area-picker.ts
index 35f7fc00bb..f6d99c4510 100644
--- a/src/components/ha-area-picker.ts
+++ b/src/components/ha-area-picker.ts
@@ -8,16 +8,15 @@ import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
+import { customElement, property, query, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
@@ -45,36 +44,20 @@ import { HomeAssistant } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-svg-icon";
 
-const rowRenderer = (
-  root: HTMLElement,
-  _owner,
-  model: { item: AreaRegistryEntry }
-) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-      <style>
-        paper-item {
-          margin: -10px 0;
-          padding: 0;
-        }
-        paper-item.add-new {
-            font-weight: 500;
-        }
-      </style>
-      <paper-item>
-        <paper-item-body two-line>
-          <div class='name'>[[item.name]]</div>
-        </paper-item-body>
-      </paper-item>
-      `;
-  }
-  root.querySelector(".name")!.textContent = model.item.name!;
-  if (model.item.area_id === "add_new") {
-    root.querySelector("paper-item")!.className = "add-new";
-  } else {
-    root.querySelector("paper-item")!.classList.remove("add-new");
-  }
-};
+const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (
+  item
+) => html`<style>
+    paper-item {
+      margin: -10px 0;
+      padding: 0;
+    }
+    paper-item.add-new {
+      font-weight: 500;
+    }
+  </style>
+  <paper-item class=${classMap({ "add-new": item.area_id === "add_new" })}>
+    <paper-item-body two-line>${item.name}</paper-item-body>
+  </paper-item>`;
 
 @customElement("ha-area-picker")
 export class HaAreaPicker extends SubscribeMixin(LitElement) {
@@ -119,13 +102,13 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean }) public disabled?: boolean;
 
-  @internalProperty() private _areas?: AreaRegistryEntry[];
+  @state() private _areas?: AreaRegistryEntry[];
 
-  @internalProperty() private _devices?: DeviceRegistryEntry[];
+  @state() private _devices?: DeviceRegistryEntry[];
 
-  @internalProperty() private _entities?: EntityRegistryEntry[];
+  @state() private _entities?: EntityRegistryEntry[];
 
-  @internalProperty() private _opened?: boolean;
+  @state() private _opened?: boolean;
 
   @query("vaadin-combo-box-light", true) public comboBox!: HTMLElement;
 
@@ -343,8 +326,8 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
         item-id-path="area_id"
         item-label-path="name"
         .value=${this._value}
-        .renderer=${rowRenderer}
         .disabled=${this.disabled}
+        ${comboBoxRenderer(rowRenderer)}
         @opened-changed=${this._openedChanged}
         @value-changed=${this._areaChanged}
       >
@@ -457,7 +440,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
     }, 0);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       paper-input > mwc-icon-button {
         --mdc-icon-button-size: 24px;
diff --git a/src/components/ha-attributes.ts b/src/components/ha-attributes.ts
index e18910ef1d..5c75269a0b 100644
--- a/src/components/ha-attributes.ts
+++ b/src/components/ha-attributes.ts
@@ -1,27 +1,24 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { until } from "lit-html/directives/until";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { haStyle } from "../resources/styles";
+import { HomeAssistant } from "../types";
 import hassAttributeUtil, {
   formatAttributeName,
+  formatAttributeValue,
 } from "../util/hass-attributes-util";
-import { haStyle } from "../resources/styles";
-
-let jsYamlPromise: Promise<typeof import("js-yaml")>;
+import "./ha-expansion-panel";
 
 @customElement("ha-attributes")
 class HaAttributes extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property() public stateObj?: HassEntity;
 
   @property({ attribute: "extra-filters" }) public extraFilters?: string;
 
+  @state() private _expanded = false;
+
   protected render(): TemplateResult {
     if (!this.stateObj) {
       return html``;
@@ -37,31 +34,47 @@ class HaAttributes extends LitElement {
     }
 
     return html`
-      <hr />
-      <div>
-        ${attributes.map(
-          (attribute) => html`
-            <div class="data-entry">
-              <div class="key">${formatAttributeName(attribute)}</div>
-              <div class="value">${this.formatAttribute(attribute)}</div>
-            </div>
-          `
+      <ha-expansion-panel
+        .header=${this.hass.localize(
+          "ui.components.attributes.expansion_header"
         )}
-        ${this.stateObj.attributes.attribution
-          ? html`
-              <div class="attribution">
-                ${this.stateObj.attributes.attribution}
-              </div>
-            `
-          : ""}
-      </div>
+        outlined
+        @expanded-will-change=${this.expandedChanged}
+      >
+        <div class="attribute-container">
+          ${this._expanded
+            ? html`
+                ${attributes.map(
+                  (attribute) => html`
+                    <div class="data-entry">
+                      <div class="key">${formatAttributeName(attribute)}</div>
+                      <div class="value">
+                        ${this.formatAttribute(attribute)}
+                      </div>
+                    </div>
+                  `
+                )}
+                ${this.stateObj.attributes.attribution
+                  ? html`
+                      <div class="attribution">
+                        ${this.stateObj.attributes.attribution}
+                      </div>
+                    `
+                  : ""}
+              `
+            : ""}
+        </div>
+      </ha-expansion-panel>
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
+        .attribute-container {
+          margin-bottom: 8px;
+        }
         .data-entry {
           display: flex;
           flex-direction: row;
@@ -109,38 +122,11 @@ class HaAttributes extends LitElement {
       return "-";
     }
     const value = this.stateObj.attributes[attribute];
-    return this.formatAttributeValue(value);
+    return formatAttributeValue(this.hass, value);
   }
 
-  private formatAttributeValue(value: any): string | TemplateResult {
-    if (value === null) {
-      return "-";
-    }
-    // YAML handling
-    if (
-      (Array.isArray(value) && value.some((val) => val instanceof Object)) ||
-      (!Array.isArray(value) && value instanceof Object)
-    ) {
-      if (!jsYamlPromise) {
-        jsYamlPromise = import("js-yaml");
-      }
-      const yaml = jsYamlPromise.then((jsYaml) => jsYaml.safeDump(value));
-      return html` <pre>${until(yaml, "")}</pre> `;
-    }
-    // URL handling
-    if (typeof value === "string" && value.startsWith("http")) {
-      try {
-        // If invalid URL, exception will be raised
-        const url = new URL(value);
-        if (url.protocol === "http:" || url.protocol === "https:")
-          return html`<a target="_blank" rel="noreferrer" href="${value}"
-            >${value}</a
-          >`;
-      } catch (_) {
-        // Nothing to do here
-      }
-    }
-    return Array.isArray(value) ? value.join(", ") : value;
+  private expandedChanged(ev) {
+    this._expanded = ev.detail.expanded;
   }
 }
 
diff --git a/src/components/ha-bar.ts b/src/components/ha-bar.ts
index 3378958a56..d53abb15c7 100644
--- a/src/components/ha-bar.ts
+++ b/src/components/ha-bar.ts
@@ -1,12 +1,5 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  LitElement,
-  property,
-  svg,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, LitElement, svg, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import {
   getValueInPercentage,
   normalize,
@@ -40,7 +33,7 @@ export class HaBar extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       rect {
         height: 100%;
diff --git a/src/components/ha-blueprint-picker.ts b/src/components/ha-blueprint-picker.ts
index 716d85ba17..2f3a302c35 100644
--- a/src/components/ha-blueprint-picker.ts
+++ b/src/components/ha-blueprint-picker.ts
@@ -1,15 +1,8 @@
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-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 { fireEvent } from "../common/dom/fire_event";
 import { compare } from "../common/string/compare";
@@ -98,7 +91,7 @@ class HaBluePrintPicker extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: inline-block;
@@ -108,11 +101,9 @@ class HaBluePrintPicker extends LitElement {
         min-width: 200px;
         display: block;
       }
-      paper-listbox {
-        min-width: 200px;
-      }
       paper-item {
         cursor: pointer;
+        min-width: 200px;
       }
     `;
   }
diff --git a/src/components/ha-button-menu.ts b/src/components/ha-button-menu.ts
index de50f7bd42..8223b68d1c 100644
--- a/src/components/ha-button-menu.ts
+++ b/src/components/ha-button-menu.ts
@@ -1,15 +1,7 @@
 import "@material/mwc-menu";
 import type { Corner, Menu } from "@material/mwc-menu";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
 @customElement("ha-button-menu")
 export class HaButtonMenu extends LitElement {
   @property() public corner: Corner = "TOP_START";
@@ -20,6 +12,8 @@ export class HaButtonMenu extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  @property({ type: Boolean }) public fixed = false;
+
   @query("mwc-menu", true) private _menu?: Menu;
 
   public get items() {
@@ -37,6 +31,7 @@ export class HaButtonMenu extends LitElement {
       </div>
       <mwc-menu
         .corner=${this.corner}
+        .fixed=${this.fixed}
         .multi=${this.multi}
         .activatable=${this.activatable}
       >
@@ -53,7 +48,7 @@ export class HaButtonMenu extends LitElement {
     this._menu!.show();
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: inline-block;
diff --git a/src/components/ha-button-related-filter-menu.ts b/src/components/ha-button-related-filter-menu.ts
index 1e4cde248d..02db7f1e20 100644
--- a/src/components/ha-button-related-filter-menu.ts
+++ b/src/components/ha-button-related-filter-menu.ts
@@ -1,26 +1,18 @@
 import "@material/mwc-icon-button";
 import type { Corner } from "@material/mwc-menu";
-import { mdiFilterVariant } from "@mdi/js";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
 import "@material/mwc-menu/mwc-menu-surface";
+import { mdiFilterVariant } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import { findRelated, RelatedResult } from "../data/search";
-import type { HomeAssistant } from "../types";
-import "./ha-svg-icon";
-import "./ha-area-picker";
-import "./device/ha-device-picker";
-import "./entity/ha-entity-picker";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { computeDeviceName } from "../data/device_registry";
+import { findRelated, RelatedResult } from "../data/search";
+import type { HomeAssistant } from "../types";
+import "./device/ha-device-picker";
+import "./entity/ha-entity-picker";
+import "./ha-area-picker";
+import "./ha-svg-icon";
 
 declare global {
   // for fire event
@@ -59,7 +51,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
   @property({ type: Array, attribute: "exclude-domains" })
   public excludeDomains?: string[];
 
-  @internalProperty() private _open = false;
+  @state() private _open = false;
 
   protected render(): TemplateResult {
     return html`
@@ -175,7 +167,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: inline-block;
diff --git a/src/components/ha-button-toggle-group.ts b/src/components/ha-button-toggle-group.ts
index 8facec61bf..374be87341 100644
--- a/src/components/ha-button-toggle-group.ts
+++ b/src/components/ha-button-toggle-group.ts
@@ -1,15 +1,8 @@
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-icon-button/mwc-icon-button";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { styleMap } from "lit-html/directives/style-map";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
 import { fireEvent } from "../common/dom/fire_event";
 import type { ToggleButton } from "../types";
 import "./ha-svg-icon";
@@ -56,7 +49,7 @@ export class HaButtonToggleGroup extends LitElement {
     fireEvent(this, "value-changed", { value: this.active });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       div {
         display: flex;
diff --git a/src/components/ha-camera-stream.ts b/src/components/ha-camera-stream.ts
index adc3913644..9d91e81ffd 100644
--- a/src/components/ha-camera-stream.ts
+++ b/src/components/ha-camera-stream.ts
@@ -1,18 +1,16 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { supportsFeature } from "../common/entity/supports-feature";
-import { isComponentLoaded } from "../common/config/is_component_loaded";
 import {
   CameraEntity,
   CAMERA_SUPPORT_STREAM,
@@ -39,9 +37,9 @@ class HaCameraStream extends LitElement {
 
   // We keep track if we should force MJPEG with a string
   // that way it automatically resets if we change entity.
-  @internalProperty() private _forceMJPEG?: string;
+  @state() private _forceMJPEG?: string;
 
-  @internalProperty() private _url?: string;
+  @state() private _url?: string;
 
   protected render(): TemplateResult {
     if (!this.stateObj) {
@@ -113,7 +111,7 @@ class HaCameraStream extends LitElement {
     fireEvent(this, "iron-resize");
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host,
       img {
diff --git a/src/components/ha-card.ts b/src/components/ha-card.ts
index 157d663bfe..a5a6702b5b 100644
--- a/src/components/ha-card.ts
+++ b/src/components/ha-card.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";
 
 @customElement("ha-card")
 export class HaCard extends LitElement {
@@ -14,7 +7,7 @@ export class HaCard extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public outlined = false;
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         background: var(
diff --git a/src/components/ha-checkbox.ts b/src/components/ha-checkbox.ts
index 713d62d1d9..b3f5a1a2f4 100644
--- a/src/components/ha-checkbox.ts
+++ b/src/components/ha-checkbox.ts
@@ -1,12 +1,8 @@
-import "@material/mwc-checkbox";
-import type { Checkbox } from "@material/mwc-checkbox";
-import { customElement } from "lit-element";
-import type { Constructor } from "../types";
-
-const MwcCheckbox = customElements.get("mwc-checkbox") as Constructor<Checkbox>;
+import { Checkbox } from "@material/mwc-checkbox";
+import { customElement } from "lit/decorators";
 
 @customElement("ha-checkbox")
-export class HaCheckbox extends MwcCheckbox {
+export class HaCheckbox extends Checkbox {
   public firstUpdated() {
     super.firstUpdated();
     this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
diff --git a/src/components/ha-chip-set.ts b/src/components/ha-chip-set.ts
index 9f1e237188..2b2bb6a9e9 100644
--- a/src/components/ha-chip-set.ts
+++ b/src/components/ha-chip-set.ts
@@ -2,14 +2,13 @@
 import chipStyles from "@material/chips/dist/mdc.chips.min.css";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   TemplateResult,
   unsafeCSS,
-} from "lit-element";
+} from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import "./ha-chip";
 
@@ -48,7 +47,7 @@ export class HaChipSet extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ${unsafeCSS(chipStyles)}
 
diff --git a/src/components/ha-chip.ts b/src/components/ha-chip.ts
index 2f57b6c943..0c8dce7edc 100644
--- a/src/components/ha-chip.ts
+++ b/src/components/ha-chip.ts
@@ -1,17 +1,15 @@
 // @ts-ignore
 import chipStyles from "@material/chips/dist/mdc.chips.min.css";
-import { ripple } from "@material/mwc-ripple/ripple-directive";
-import "./ha-icon";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   TemplateResult,
   unsafeCSS,
-} from "lit-element";
+} from "lit";
+import { customElement, property } from "lit/decorators";
+import "./ha-icon";
 
 declare global {
   // for fire event
@@ -34,7 +32,7 @@ export class HaChip extends LitElement {
               <slot name="icon"></slot>
             </div>`
           : null}
-        <div class="mdc-chip__ripple" .ripple="${ripple()}"></div>
+        <div class="mdc-chip__ripple"></div>
         <span role="gridcell">
           <span role="button" tabindex="0" class="mdc-chip__primary-action">
             <span class="mdc-chip__text"><slot></slot></span>
@@ -44,7 +42,7 @@ export class HaChip extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ${unsafeCSS(chipStyles)}
       .mdc-chip {
diff --git a/src/components/ha-circular-progress.ts b/src/components/ha-circular-progress.ts
index 7b69afa6b8..d493c04c5d 100644
--- a/src/components/ha-circular-progress.ts
+++ b/src/components/ha-circular-progress.ts
@@ -1,5 +1,6 @@
 import { CircularProgress } from "@material/mwc-circular-progress";
-import { customElement, property } from "lit-element";
+import { CSSResultGroup, css } from "lit";
+import { customElement, property } from "lit/decorators";
 
 @customElement("ha-circular-progress")
 // @ts-ignore
@@ -41,6 +42,17 @@ export class HaCircularProgress extends CircularProgress {
   public get indeterminate() {
     return this.active;
   }
+
+  static get styles(): CSSResultGroup {
+    return [
+      super.styles,
+      css`
+        :host {
+          overflow: hidden;
+        }
+      `,
+    ];
+  }
 }
 
 declare global {
diff --git a/src/components/ha-climate-state.ts b/src/components/ha-climate-state.ts
index aac651d6af..e9a14f653c 100644
--- a/src/components/ha-climate-state.ts
+++ b/src/components/ha-climate-state.ts
@@ -1,13 +1,6 @@
 import { HassEntity } 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 { formatNumber } from "../common/string/format_number";
 import { CLIMATE_PRESET_NONE } from "../data/climate";
 import type { HomeAssistant } from "../types";
@@ -126,7 +119,7 @@ class HaClimateState extends LitElement {
       : stateString;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: flex;
diff --git a/src/components/ha-code-editor.ts b/src/components/ha-code-editor.ts
index d830e06e08..7ea60707c3 100644
--- a/src/components/ha-code-editor.ts
+++ b/src/components/ha-code-editor.ts
@@ -1,11 +1,6 @@
 import type { EditorView, KeyBinding, ViewUpdate } from "@codemirror/view";
-import {
-  customElement,
-  internalProperty,
-  property,
-  PropertyValues,
-  UpdatingElement,
-} from "lit-element";
+import { css, CSSResultGroup, PropertyValues, ReactiveElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { loadCodeMirror } from "../resources/codemirror.ondemand";
 
@@ -24,7 +19,7 @@ const saveKeyBinding: KeyBinding = {
 };
 
 @customElement("ha-code-editor")
-export class HaCodeEditor extends UpdatingElement {
+export class HaCodeEditor extends ReactiveElement {
   public codemirror?: EditorView;
 
   @property() public mode = "yaml";
@@ -35,7 +30,7 @@ export class HaCodeEditor extends UpdatingElement {
 
   @property() public error = false;
 
-  @internalProperty() private _value = "";
+  @state() private _value = "";
 
   private _loadedCodeMirror?: typeof import("../resources/codemirror");
 
@@ -116,14 +111,6 @@ export class HaCodeEditor extends UpdatingElement {
   private async _load(): Promise<void> {
     this._loadedCodeMirror = await loadCodeMirror();
 
-    const shadowRoot = this.attachShadow({ mode: "open" });
-
-    shadowRoot!.innerHTML = `<style>
-      :host(.error-state) div.cm-wrap .cm-gutters {
-        border-color: var(--error-state-color, red);
-      }
-    </style>`;
-
     this.codemirror = new this._loadedCodeMirror.EditorView({
       state: this._loadedCodeMirror.EditorState.create({
         doc: this._value,
@@ -155,8 +142,8 @@ export class HaCodeEditor extends UpdatingElement {
           ),
         ],
       }),
-      root: shadowRoot,
-      parent: shadowRoot,
+      root: this.shadowRoot!,
+      parent: this.shadowRoot!,
     });
   }
 
@@ -175,6 +162,15 @@ export class HaCodeEditor extends UpdatingElement {
     this._value = newValue;
     fireEvent(this, "value-changed", { value: this._value });
   }
+
+  // Only Lit 2.0 will use this
+  static get styles(): CSSResultGroup {
+    return css`
+      :host(.error-state) div.cm-wrap .cm-gutters {
+        border-color: var(--error-state-color, red);
+      }
+    `;
+  }
 }
 
 declare global {
diff --git a/src/components/ha-color-picker.js b/src/components/ha-color-picker.js
index e692ef3076..f94018ab71 100644
--- a/src/components/ha-color-picker.js
+++ b/src/components/ha-color-picker.js
@@ -1,8 +1,8 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { EventsMixin } from "../mixins/events-mixin";
 import { hs2rgb, rgb2hs } from "../common/color/convert-color";
+import { EventsMixin } from "../mixins/events-mixin";
 /**
  * Color-picker custom element
  *
diff --git a/src/components/ha-combo-box.ts b/src/components/ha-combo-box.ts
index 19f89bd410..f1e4650d7c 100644
--- a/src/components/ha-combo-box.ts
+++ b/src/components/ha-combo-box.ts
@@ -5,41 +5,21 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-listbox/paper-listbox";
 import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
 import "./ha-svg-icon";
 
-const defaultRowRenderer = (
-  root: HTMLElement,
-  _owner,
-  model: { item: any }
-) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-    <style>
-      paper-item {
-        margin: -5px -10px;
-        padding: 0;
-      }
-    </style>
-    <paper-item></paper-item>
-    `;
-  }
-
-  root.querySelector("paper-item")!.textContent = model.item;
-};
+const defaultRowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
+    paper-item {
+      margin: -5px -10px;
+      padding: 0;
+    }
+  </style>
+  <paper-item>${item}</paper-item>`;
 
 @customElement("ha-combo-box")
 export class HaComboBox extends LitElement {
@@ -62,15 +42,11 @@ export class HaComboBox extends LitElement {
 
   @property({ attribute: "item-id-path" }) public itemIdPath?: string;
 
-  @property() public renderer?: (
-    root: HTMLElement,
-    owner: HTMLElement,
-    model: { item: any }
-  ) => void;
+  @property() public renderer?: ComboBoxLitRenderer<any>;
 
   @property({ type: Boolean }) public disabled?: boolean;
 
-  @internalProperty() private _opened?: boolean;
+  @state() private _opened?: boolean;
 
   @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
 
@@ -99,9 +75,9 @@ export class HaComboBox extends LitElement {
         .value=${this.value}
         .items=${this.items}
         .filteredItems=${this.filteredItems}
-        .renderer=${this.renderer || defaultRowRenderer}
         .allowCustomValue=${this.allowCustomValue}
         .disabled=${this.disabled}
+        ${comboBoxRenderer(this.renderer || defaultRowRenderer)}
         @opened-changed=${this._openedChanged}
         @filter-changed=${this._filterChanged}
         @value-changed=${this._valueChanged}
@@ -167,7 +143,7 @@ export class HaComboBox extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       paper-input > mwc-icon-button {
         --mdc-icon-button-size: 24px;
diff --git a/src/components/ha-cover-controls.ts b/src/components/ha-cover-controls.ts
index 08910a7735..dbc4018322 100644
--- a/src/components/ha-cover-controls.ts
+++ b/src/components/ha-cover-controls.ts
@@ -1,16 +1,14 @@
 import type { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { computeCloseIcon, computeOpenIcon } from "../common/entity/cover_icon";
 import { UNAVAILABLE } from "../data/entity";
 import type { HomeAssistant } from "../types";
@@ -23,10 +21,10 @@ class HaCoverControls extends LitElement {
 
   @property({ attribute: false }) public stateObj!: HassEntity;
 
-  @internalProperty() private _entityObj?: CoverEntity;
+  @state() private _entityObj?: CoverEntity;
 
-  protected updated(changedProperties: PropertyValues): void {
-    super.updated(changedProperties);
+  public willUpdate(changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties);
 
     if (changedProperties.has("stateObj")) {
       this._entityObj = new CoverEntity(this.hass, this.stateObj);
@@ -114,7 +112,7 @@ class HaCoverControls extends LitElement {
     this._entityObj.stopCover();
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .state {
         white-space: nowrap;
diff --git a/src/components/ha-cover-tilt-controls.ts b/src/components/ha-cover-tilt-controls.ts
index be2f6f4087..d2c3d97eb7 100644
--- a/src/components/ha-cover-tilt-controls.ts
+++ b/src/components/ha-cover-tilt-controls.ts
@@ -1,16 +1,14 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { UNAVAILABLE } from "../data/entity";
 import { HomeAssistant } from "../types";
 import CoverEntity from "../util/cover-model";
@@ -22,10 +20,10 @@ class HaCoverTiltControls extends LitElement {
 
   @property({ attribute: false }) stateObj!: HassEntity;
 
-  @internalProperty() private _entityObj?: CoverEntity;
+  @state() private _entityObj?: CoverEntity;
 
-  protected updated(changedProperties: PropertyValues): void {
-    super.updated(changedProperties);
+  public willUpdate(changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties);
 
     if (changedProperties.has("stateObj")) {
       this._entityObj = new CoverEntity(this.hass, this.stateObj);
@@ -101,7 +99,7 @@ class HaCoverTiltControls extends LitElement {
     this._entityObj.stopCoverTilt();
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         white-space: nowrap;
diff --git a/src/components/ha-date-input.ts b/src/components/ha-date-input.ts
index 40493d1345..d2289c464b 100644
--- a/src/components/ha-date-input.ts
+++ b/src/components/ha-date-input.ts
@@ -1,17 +1,9 @@
-import "@vaadin/vaadin-date-picker/theme/material/vaadin-date-picker-light";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  PropertyValues,
-  query,
-} from "lit-element";
-import "@polymer/paper-input/paper-input";
-import { fireEvent } from "../common/dom/fire_event";
 import { mdiCalendar } from "@mdi/js";
+import "@polymer/paper-input/paper-input";
+import "@vaadin/vaadin-date-picker/theme/material/vaadin-date-picker-light";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import { fireEvent } from "../common/dom/fire_event";
 import "./ha-svg-icon";
 
 const i18n = {
@@ -134,7 +126,7 @@ export class HaDateInput extends LitElement {
     return true;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       paper-input {
         width: 110px;
diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts
index d0d1442f87..2940c3a883 100644
--- a/src/components/ha-date-range-picker.ts
+++ b/src/components/ha-date-range-picker.ts
@@ -6,15 +6,15 @@ import { mdiCalendar } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property } from "lit/decorators";
 import { formatDateTime } from "../common/datetime/format_date_time";
+import { useAmPm } from "../common/datetime/use_am_pm";
 import { computeRTLDirection } from "../common/util/compute_rtl";
 import { HomeAssistant } from "../types";
 import "./date-range-picker";
@@ -44,7 +44,7 @@ export class HaDateRangePicker extends LitElement {
     if (changedProps.has("hass")) {
       const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
       if (!oldHass || oldHass.locale !== this.hass.locale) {
-        this._hour24format = this._compute24hourFormat();
+        this._hour24format = !useAmPm(this.hass.locale);
         this._rtlDirection = computeRTLDirection(this.hass);
       }
     }
@@ -107,16 +107,6 @@ export class HaDateRangePicker extends LitElement {
     `;
   }
 
-  private _compute24hourFormat() {
-    return (
-      new Intl.DateTimeFormat(this.hass.language, {
-        hour: "numeric",
-      })
-        .formatToParts(new Date(2020, 0, 1, 13))
-        .find((part) => part.type === "hour")!.value.length === 2
-    );
-  }
-
   private _setDateRange(ev: CustomEvent<ActionDetail>) {
     const dateRange = Object.values(this.ranges!)[ev.detail.index];
     const dateRangePicker = this._dateRangePicker;
@@ -146,7 +136,7 @@ export class HaDateRangePicker extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-svg-icon {
         margin-right: 8px;
diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts
index 40e0f736db..b776bdf6cb 100644
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -1,14 +1,11 @@
-import "@material/mwc-dialog";
-import type { Dialog } from "@material/mwc-dialog";
-import { style } from "@material/mwc-dialog/mwc-dialog-css";
+import { Dialog } from "@material/mwc-dialog";
 import { mdiClose } from "@mdi/js";
-import { css, CSSResult, customElement, html } from "lit-element";
+import { css, CSSResultGroup, html } from "lit";
+import { customElement } from "lit/decorators";
 import { computeRTLDirection } from "../common/util/compute_rtl";
-import type { Constructor, HomeAssistant } from "../types";
+import type { HomeAssistant } from "../types";
 import "./ha-icon-button";
 
-const MwcDialog = customElements.get("mwc-dialog") as Constructor<Dialog>;
-
 export const createCloseHeading = (hass: HomeAssistant, title: string) => html`
   <span class="header_title">${title}</span>
   <mwc-icon-button
@@ -22,7 +19,8 @@ export const createCloseHeading = (hass: HomeAssistant, title: string) => html`
 `;
 
 @customElement("ha-dialog")
-export class HaDialog extends MwcDialog {
+// @ts-expect-error
+export class HaDialog extends Dialog {
   public scrollToPos(x: number, y: number) {
     this.contentElement.scrollTo(x, y);
   }
@@ -31,9 +29,9 @@ export class HaDialog extends MwcDialog {
     return html`<slot name="heading"> ${super.renderHeading()} </slot>`;
   }
 
-  protected static get styles(): CSSResult[] {
+  protected static get styles(): CSSResultGroup {
     return [
-      style,
+      Dialog.styles,
       css`
         .mdc-dialog {
           --mdc-dialog-scroll-divider-color: var(--divider-color);
diff --git a/src/components/ha-expansion-panel.ts b/src/components/ha-expansion-panel.ts
index be3dc4f77d..f553e3ffc6 100644
--- a/src/components/ha-expansion-panel.ts
+++ b/src/components/ha-expansion-panel.ts
@@ -1,16 +1,9 @@
 import { mdiChevronDown } from "@mdi/js";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../common/dom/fire_event";
+import { nextRender } from "../common/util/render-status";
 import "./ha-svg-icon";
 
 @customElement("ha-expansion-panel")
@@ -45,21 +38,29 @@ class HaExpansionPanel extends LitElement {
     this._container.style.removeProperty("height");
   }
 
-  private _toggleContainer(): void {
+  private async _toggleContainer(): Promise<void> {
+    const newExpanded = !this.expanded;
+    fireEvent(this, "expanded-will-change", { expanded: newExpanded });
+
+    if (newExpanded) {
+      // allow for dynamic content to be rendered
+      await nextRender();
+    }
+
     const scrollHeight = this._container.scrollHeight;
     this._container.style.height = `${scrollHeight}px`;
 
-    if (this.expanded) {
+    if (!newExpanded) {
       setTimeout(() => {
         this._container.style.height = "0px";
       }, 0);
     }
 
-    this.expanded = !this.expanded;
+    this.expanded = newExpanded;
     fireEvent(this, "expanded-changed", { expanded: this.expanded });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;
@@ -119,5 +120,8 @@ declare global {
     "expanded-changed": {
       expanded: boolean;
     };
+    "expanded-will-change": {
+      expanded: boolean;
+    };
   }
 }
diff --git a/src/components/ha-fab.ts b/src/components/ha-fab.ts
index 9725630b6c..c2f58b8f0f 100644
--- a/src/components/ha-fab.ts
+++ b/src/components/ha-fab.ts
@@ -1,12 +1,8 @@
-import "@material/mwc-fab";
-import type { Fab } from "@material/mwc-fab";
-import { customElement } from "lit-element";
-import { Constructor } from "../types";
-
-const MwcFab = customElements.get("mwc-fab") as Constructor<Fab>;
+import { Fab } from "@material/mwc-fab";
+import { customElement } from "lit/decorators";
 
 @customElement("ha-fab")
-export class HaFab extends MwcFab {
+export class HaFab extends Fab {
   protected firstUpdated(changedProperties) {
     super.firstUpdated(changedProperties);
     this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
diff --git a/src/components/ha-file-upload.ts b/src/components/ha-file-upload.ts
index 0fa12a6ed9..2eec7319c0 100644
--- a/src/components/ha-file-upload.ts
+++ b/src/components/ha-file-upload.ts
@@ -2,18 +2,9 @@ import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiClose } from "@mdi/js";
 import "@polymer/iron-input/iron-input";
 import "@polymer/paper-input/paper-input-container";
-import {
-  css,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, state, query } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../common/dom/fire_event";
 import "./ha-circular-progress";
 import "./ha-svg-icon";
@@ -39,7 +30,7 @@ export class HaFileUpload extends LitElement {
   @property({ type: Boolean, attribute: "auto-open-file-dialog" })
   private autoOpenFileDialog = false;
 
-  @internalProperty() private _drag = false;
+  @state() private _drag = false;
 
   @query("#input") private _input?: HTMLInputElement;
 
diff --git a/src/components/ha-form/ha-form-boolean.ts b/src/components/ha-form/ha-form-boolean.ts
index 454a01e718..2bf264a498 100644
--- a/src/components/ha-form/ha-form-boolean.ts
+++ b/src/components/ha-form/ha-form-boolean.ts
@@ -1,15 +1,7 @@
 import "@polymer/paper-checkbox/paper-checkbox";
 import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import type {
   HaFormBooleanData,
@@ -49,7 +41,7 @@ export class HaFormBoolean extends LitElement implements HaFormElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       paper-checkbox {
         display: block;
diff --git a/src/components/ha-form/ha-form-constant.ts b/src/components/ha-form/ha-form-constant.ts
index 4e6d6e21b4..d05e9ac5f6 100644
--- a/src/components/ha-form/ha-form-constant.ts
+++ b/src/components/ha-form/ha-form-constant.ts
@@ -1,13 +1,12 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HaFormConstantSchema, HaFormElement } from "./ha-form";
 
@@ -28,7 +27,7 @@ export class HaFormConstant extends LitElement implements HaFormElement {
     return html`<span class="label">${this.label}</span>: ${this.schema.value}`;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;
diff --git a/src/components/ha-form/ha-form-float.ts b/src/components/ha-form/ha-form-float.ts
index 9720f0ffd2..edf3c13576 100644
--- a/src/components/ha-form/ha-form-float.ts
+++ b/src/components/ha-form/ha-form-float.ts
@@ -1,13 +1,7 @@
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import {
-  customElement,
-  html,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HaFormElement, HaFormFloatData, HaFormFloatSchema } from "./ha-form";
 
diff --git a/src/components/ha-form/ha-form-integer.ts b/src/components/ha-form/ha-form-integer.ts
index 9fab3cabc0..6f0ec4cfab 100644
--- a/src/components/ha-form/ha-form-integer.ts
+++ b/src/components/ha-form/ha-form-integer.ts
@@ -2,16 +2,8 @@ import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import "@polymer/paper-slider/paper-slider";
 import type { PaperSliderElement } from "@polymer/paper-slider/paper-slider";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HaCheckbox } from "../ha-checkbox";
 import "../ha-slider";
@@ -107,7 +99,7 @@ export class HaFormInteger extends LitElement implements HaFormElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .flex {
         display: flex;
diff --git a/src/components/ha-form/ha-form-multi_select.ts b/src/components/ha-form/ha-form-multi_select.ts
index 117dbe927e..93ad92bd65 100644
--- a/src/components/ha-form/ha-form-multi_select.ts
+++ b/src/components/ha-form/ha-form-multi_select.ts
@@ -4,17 +4,8 @@ import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-listbox/paper-listbox";
 import "@polymer/paper-menu-button/paper-menu-button";
 import "@polymer/paper-ripple/paper-ripple";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../ha-icon";
 import {
@@ -33,7 +24,7 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
 
   @property() public suffix!: string;
 
-  @internalProperty() private _init = false;
+  @state() private _init = false;
 
   @query("paper-menu-button", true) private _input?: HTMLElement;
 
@@ -140,7 +131,7 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
     );
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       paper-menu-button {
         display: block;
diff --git a/src/components/ha-form/ha-form-positive_time_period_dict.ts b/src/components/ha-form/ha-form-positive_time_period_dict.ts
index 453eaf2a68..04ec575981 100644
--- a/src/components/ha-form/ha-form-positive_time_period_dict.ts
+++ b/src/components/ha-form/ha-form-positive_time_period_dict.ts
@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
 import "../ha-time-input";
 import { HaFormElement, HaFormTimeData, HaFormTimeSchema } from "./ha-form";
 
diff --git a/src/components/ha-form/ha-form-select.ts b/src/components/ha-form/ha-form-select.ts
index 398de2afda..5cf9dc013d 100644
--- a/src/components/ha-form/ha-form-select.ts
+++ b/src/components/ha-form/ha-form-select.ts
@@ -1,15 +1,7 @@
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../ha-paper-dropdown-menu";
 import { HaFormElement, HaFormSelectData, HaFormSelectSchema } from "./ha-form";
@@ -74,7 +66,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-paper-dropdown-menu {
         display: block;
diff --git a/src/components/ha-form/ha-form-string.ts b/src/components/ha-form/ha-form-string.ts
index a376520783..82e4520bfa 100644
--- a/src/components/ha-form/ha-form-string.ts
+++ b/src/components/ha-form/ha-form-string.ts
@@ -1,17 +1,9 @@
+import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiEye, mdiEyeOff } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../ha-svg-icon";
 import type {
@@ -19,7 +11,6 @@ import type {
   HaFormStringData,
   HaFormStringSchema,
 } from "./ha-form";
-import "@material/mwc-icon-button/mwc-icon-button";
 
 @customElement("ha-form-string")
 export class HaFormString extends LitElement implements HaFormElement {
@@ -31,7 +22,7 @@ export class HaFormString extends LitElement implements HaFormElement {
 
   @property() public suffix!: string;
 
-  @internalProperty() private _unmaskedPassword = false;
+  @state() private _unmaskedPassword = false;
 
   @query("paper-input") private _input?: HTMLElement;
 
@@ -104,7 +95,7 @@ export class HaFormString extends LitElement implements HaFormElement {
     return "text";
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       mwc-icon-button {
         --mdc-icon-button-size: 24px;
diff --git a/src/components/ha-form/ha-form.ts b/src/components/ha-form/ha-form.ts
index adfe4fd71f..1a4c02e319 100644
--- a/src/components/ha-form/ha-form.ts
+++ b/src/components/ha-form/ha-form.ts
@@ -1,11 +1,5 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HaTimeData } from "../ha-time-input";
@@ -207,7 +201,7 @@ export class HaForm extends LitElement implements HaFormElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .error {
         color: var(--error-color);
diff --git a/src/components/ha-formfield.ts b/src/components/ha-formfield.ts
index 96187b8803..e7c9232f1d 100644
--- a/src/components/ha-formfield.ts
+++ b/src/components/ha-formfield.ts
@@ -1,18 +1,12 @@
-import "@material/mwc-formfield";
-import type { Formfield } from "@material/mwc-formfield";
-import { style } from "@material/mwc-formfield/mwc-formfield-css";
-import { css, CSSResult, customElement } from "lit-element";
-import { Constructor } from "../types";
-
-const MwcFormfield = customElements.get(
-  "mwc-formfield"
-) as Constructor<Formfield>;
-
+import { Formfield } from "@material/mwc-formfield";
+import { css, CSSResultGroup } from "lit";
+import { customElement } from "lit/decorators";
 @customElement("ha-formfield")
-export class HaFormfield extends MwcFormfield {
-  protected static get styles(): CSSResult[] {
+// @ts-expect-error
+export class HaFormfield extends Formfield {
+  protected static get styles(): CSSResultGroup {
     return [
-      style,
+      Formfield.styles,
       css`
         :host(:not([alignEnd])) ::slotted(ha-switch) {
           margin-right: 10px;
diff --git a/src/components/ha-gauge.ts b/src/components/ha-gauge.ts
index 0628cb2243..26b4ae52aa 100644
--- a/src/components/ha-gauge.ts
+++ b/src/components/ha-gauge.ts
@@ -1,17 +1,10 @@
-import {
-  css,
-  customElement,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-  svg,
-} from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
-import { styleMap } from "lit-html/directives/style-map";
+import { css, LitElement, PropertyValues, svg } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
+import { styleMap } from "lit/directives/style-map";
 import { formatNumber } from "../common/string/format_number";
 import { afterNextRender } from "../common/util/render-status";
-import { FrontendTranslationData } from "../data/translation";
+import { FrontendLocaleData } from "../data/translation";
 import { getValueInPercentage, normalize } from "../util/calculate";
 
 const getAngle = (value: number, min: number, max: number) => {
@@ -30,13 +23,13 @@ export class Gauge extends LitElement {
 
   @property({ type: Number }) public value = 0;
 
-  @property() public locale!: FrontendTranslationData;
+  @property() public locale!: FrontendLocaleData;
 
   @property() public label = "";
 
-  @internalProperty() private _angle = 0;
+  @state() private _angle = 0;
 
-  @internalProperty() private _updated = false;
+  @state() private _updated = false;
 
   protected firstUpdated(changedProperties: PropertyValues) {
     super.firstUpdated(changedProperties);
diff --git a/src/components/ha-header-bar.ts b/src/components/ha-header-bar.ts
index 0677e96673..68111455af 100644
--- a/src/components/ha-header-bar.ts
+++ b/src/components/ha-header-bar.ts
@@ -1,6 +1,7 @@
 // @ts-ignore
 import topAppBarStyles from "@material/top-app-bar/dist/mdc.top-app-bar.min.css";
-import { css, customElement, html, LitElement, unsafeCSS } from "lit-element";
+import { css, html, LitElement, unsafeCSS } from "lit";
+import { customElement } from "lit/decorators";
 
 @customElement("ha-header-bar")
 export class HaHeaderBar extends LitElement {
diff --git a/src/components/ha-help-tooltip.ts b/src/components/ha-help-tooltip.ts
index 73e60e5799..1194f77b98 100644
--- a/src/components/ha-help-tooltip.ts
+++ b/src/components/ha-help-tooltip.ts
@@ -1,13 +1,7 @@
 import { mdiHelpCircle } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
-import {
-  css,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import "./ha-svg-icon";
 
 @customElement("ha-help-tooltip")
diff --git a/src/components/ha-hls-player.ts b/src/components/ha-hls-player.ts
index e841993c1b..857e2c1874 100644
--- a/src/components/ha-hls-player.ts
+++ b/src/components/ha-hls-player.ts
@@ -1,16 +1,13 @@
 import type HlsType from "hls.js";
 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 { fireEvent } from "../common/dom/fire_event";
 import { nextRender } from "../common/util/render-status";
 import { getExternalConfig } from "../external_app/external_config";
@@ -40,7 +37,7 @@ class HaHLSPlayer extends LitElement {
   // don't cache this, as we remove it on disconnects
   @query("video") private _videoEl!: HTMLVideoElement;
 
-  @internalProperty() private _attached = false;
+  @state() private _attached = false;
 
   private _hlsPolyfillInstance?: HlsType;
 
@@ -220,7 +217,7 @@ class HaHLSPlayer extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host,
       video {
diff --git a/src/components/ha-icon-button-arrow-next.ts b/src/components/ha-icon-button-arrow-next.ts
index 85bc2d245f..a0c58a48ef 100644
--- a/src/components/ha-icon-button-arrow-next.ts
+++ b/src/components/ha-icon-button-arrow-next.ts
@@ -1,13 +1,7 @@
 import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { HomeAssistant } from "../types";
 import "./ha-svg-icon";
 
@@ -19,7 +13,7 @@ export class HaIconButtonArrowNext extends LitElement {
 
   @property() public label?: string;
 
-  @internalProperty() private _icon = mdiArrowRight;
+  @state() private _icon = mdiArrowRight;
 
   public connectedCallback() {
     super.connectedCallback();
diff --git a/src/components/ha-icon-button-arrow-prev.ts b/src/components/ha-icon-button-arrow-prev.ts
index c426c589a7..dc192b88fe 100644
--- a/src/components/ha-icon-button-arrow-prev.ts
+++ b/src/components/ha-icon-button-arrow-prev.ts
@@ -1,13 +1,7 @@
 import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiArrowLeft, mdiArrowRight } from "@mdi/js";
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { HomeAssistant } from "../types";
 import "./ha-svg-icon";
 
@@ -19,7 +13,7 @@ export class HaIconButtonArrowPrev extends LitElement {
 
   @property() public label?: string;
 
-  @internalProperty() private _icon = mdiArrowLeft;
+  @state() private _icon = mdiArrowLeft;
 
   public connectedCallback() {
     super.connectedCallback();
diff --git a/src/components/ha-icon-button-next.ts b/src/components/ha-icon-button-next.ts
index 04213393eb..8f3a039ca0 100644
--- a/src/components/ha-icon-button-next.ts
+++ b/src/components/ha-icon-button-next.ts
@@ -1,13 +1,7 @@
 import "@material/mwc-icon-button";
 import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { HomeAssistant } from "../types";
 import "./ha-svg-icon";
 
@@ -19,7 +13,7 @@ export class HaIconButtonNext extends LitElement {
 
   @property() public label?: string;
 
-  @internalProperty() private _icon = mdiChevronRight;
+  @state() private _icon = mdiChevronRight;
 
   public connectedCallback() {
     super.connectedCallback();
diff --git a/src/components/ha-icon-button-prev.ts b/src/components/ha-icon-button-prev.ts
index 6384039f13..9bad876137 100644
--- a/src/components/ha-icon-button-prev.ts
+++ b/src/components/ha-icon-button-prev.ts
@@ -1,13 +1,7 @@
 import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { HomeAssistant } from "../types";
 import "./ha-svg-icon";
 
@@ -19,7 +13,7 @@ export class HaIconButtonPrev extends LitElement {
 
   @property() public label?: string;
 
-  @internalProperty() private _icon = mdiChevronLeft;
+  @state() private _icon = mdiChevronLeft;
 
   public connectedCallback() {
     super.connectedCallback();
diff --git a/src/components/ha-icon-button.ts b/src/components/ha-icon-button.ts
index e8cc62ab55..1195a8517a 100644
--- a/src/components/ha-icon-button.ts
+++ b/src/components/ha-icon-button.ts
@@ -1,13 +1,6 @@
 import "@material/mwc-icon-button";
-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 "./ha-icon";
 
 @customElement("ha-icon-button")
@@ -18,9 +11,10 @@ export class HaIconButton extends LitElement {
 
   @property({ type: String }) label = "";
 
-  protected createRenderRoot() {
-    return this.attachShadow({ mode: "open", delegatesFocus: true });
-  }
+  static shadowRootOptions: ShadowRootInit = {
+    mode: "open",
+    delegatesFocus: true,
+  };
 
   protected render(): TemplateResult {
     return html`
@@ -30,7 +24,7 @@ export class HaIconButton extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: inline-block;
diff --git a/src/components/ha-icon-input.ts b/src/components/ha-icon-input.ts
index 11f310c91f..fb62e3addb 100644
--- a/src/components/ha-icon-input.ts
+++ b/src/components/ha-icon-input.ts
@@ -1,12 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import {
-  css,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import "./ha-icon";
 
diff --git a/src/components/ha-icon.ts b/src/components/ha-icon.ts
index 2cb7e0bdf6..73563d26f6 100644
--- a/src/components/ha-icon.ts
+++ b/src/components/ha-icon.ts
@@ -1,15 +1,13 @@
 import "@polymer/iron-icon/iron-icon";
 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 "../common/dom/fire_event";
 import { debounce } from "../common/util/debounce";
 import { CustomIcon, customIconsets } from "../data/custom_iconsets";
@@ -45,13 +43,14 @@ const cachedIcons: Record<string, string> = {};
 export class HaIcon extends LitElement {
   @property() public icon?: string;
 
-  @internalProperty() private _path?: string;
+  @state() private _path?: string;
 
-  @internalProperty() private _viewBox?;
+  @state() private _viewBox?;
 
-  @internalProperty() private _legacy = false;
+  @state() private _legacy = false;
 
-  protected updated(changedProps: PropertyValues) {
+  public willUpdate(changedProps: PropertyValues) {
+    super.willUpdate(changedProps);
     if (changedProps.has("icon")) {
       this._path = undefined;
       this._viewBox = undefined;
@@ -161,7 +160,7 @@ export class HaIcon extends LitElement {
     cachedIcons[iconName] = iconPack[iconName];
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         fill: currentcolor;
diff --git a/src/components/ha-label-badge.ts b/src/components/ha-label-badge.ts
index 49ecff7bf2..67569aeecb 100644
--- a/src/components/ha-label-badge.ts
+++ b/src/components/ha-label-badge.ts
@@ -1,13 +1,13 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+} from "lit";
+import { property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import "./ha-icon";
 
 class HaLabelBadge extends LitElement {
@@ -60,7 +60,7 @@ class HaLabelBadge extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       css`
         .badge-container {
diff --git a/src/components/ha-markdown-element.ts b/src/components/ha-markdown-element.ts
index cd07cf0a01..e0df4e40b7 100644
--- a/src/components/ha-markdown-element.ts
+++ b/src/components/ha-markdown-element.ts
@@ -1,15 +1,20 @@
-import { customElement, property, UpdatingElement } from "lit-element";
+import { ReactiveElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { renderMarkdown } from "../resources/render-markdown";
 
 @customElement("ha-markdown-element")
-class HaMarkdownElement extends UpdatingElement {
+class HaMarkdownElement extends ReactiveElement {
   @property() public content?;
 
   @property({ type: Boolean }) public allowSvg = false;
 
   @property({ type: Boolean }) public breaks = false;
 
+  protected createRenderRoot() {
+    return this;
+  }
+
   protected update(changedProps) {
     super.update(changedProps);
     if (this.content !== undefined) {
diff --git a/src/components/ha-markdown.ts b/src/components/ha-markdown.ts
index c98f5d07a9..0f192bac32 100644
--- a/src/components/ha-markdown.ts
+++ b/src/components/ha-markdown.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 "./ha-markdown-element";
 
 @customElement("ha-markdown")
@@ -29,7 +22,7 @@ class HaMarkdown extends LitElement {
     ></ha-markdown-element>`;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;
diff --git a/src/components/ha-menu-button.ts b/src/components/ha-menu-button.ts
index b95d012938..9737b2427d 100644
--- a/src/components/ha-menu-button.ts
+++ b/src/components/ha-menu-button.ts
@@ -1,16 +1,8 @@
 import "@material/mwc-icon-button";
 import { mdiMenu } from "@mdi/js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
-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 { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
 import { subscribeNotifications } from "../data/persistent_notification";
@@ -25,7 +17,7 @@ class HaMenuButton extends LitElement {
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _hasNotifications = false;
+  @state() private _hasNotifications = false;
 
   private _alwaysVisible = false;
 
@@ -101,7 +93,6 @@ class HaMenuButton extends LitElement {
     this.style.display = newNarrow || this._alwaysVisible ? "initial" : "none";
 
     if (!newNarrow) {
-      this._hasNotifications = false;
       if (this._unsubNotifications) {
         this._unsubNotifications();
         this._unsubNotifications = undefined;
@@ -125,7 +116,7 @@ class HaMenuButton extends LitElement {
     fireEvent(this, "hass-toggle-menu");
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         position: relative;
diff --git a/src/components/ha-network.ts b/src/components/ha-network.ts
new file mode 100644
index 0000000000..a4163ae720
--- /dev/null
+++ b/src/components/ha-network.ts
@@ -0,0 +1,172 @@
+import "@polymer/paper-tooltip/paper-tooltip";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, state, property } from "lit/decorators";
+import {
+  Adapter,
+  NetworkConfig,
+  IPv6ConfiguredAddress,
+  IPv4ConfiguredAddress,
+} from "../data/network";
+import { fireEvent } from "../common/dom/fire_event";
+import { haStyle } from "../resources/styles";
+import { HomeAssistant } from "../types";
+import "./ha-checkbox";
+import type { HaCheckbox } from "./ha-checkbox";
+import "./ha-settings-row";
+import "./ha-icon";
+
+const format_addresses = (
+  addresses: IPv6ConfiguredAddress[] | IPv4ConfiguredAddress[]
+): TemplateResult[] =>
+  addresses.map(
+    (address) => html`<span>${address.address}/${address.network_prefix}</span>`
+  );
+
+const format_auto_detected_interfaces = (
+  adapters: Adapter[]
+): Array<TemplateResult | string> =>
+  adapters.map((adapter) =>
+    adapter.auto
+      ? html`${adapter.name} (${format_addresses(adapter.ipv4)}
+        ${format_addresses(adapter.ipv6)} )`
+      : ""
+  );
+
+declare global {
+  interface HASSDomEvents {
+    "network-config-changed": { configured_adapters: string[] };
+  }
+}
+@customElement("ha-network")
+export class HaNetwork extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public networkConfig?: NetworkConfig;
+
+  @state() private _expanded?: boolean;
+
+  protected render(): TemplateResult {
+    if (this.networkConfig === undefined) {
+      return html``;
+    }
+    const configured_adapters = this.networkConfig.configured_adapters || [];
+    return html`
+      <ha-settings-row>
+        <span slot="prefix">
+          <ha-checkbox
+            id="auto_configure"
+            @change=${this._handleAutoConfigureCheckboxClick}
+            .checked=${!configured_adapters.length}
+            name="auto_configure"
+          >
+          </ha-checkbox>
+        </span>
+        <span slot="heading" data-for="auto_configure"> Auto Configure </span>
+        <span slot="description" data-for="auto_configure">
+          Detected:
+          ${format_auto_detected_interfaces(this.networkConfig.adapters)}
+        </span>
+      </ha-settings-row>
+      ${configured_adapters.length || this._expanded
+        ? this.networkConfig.adapters.map(
+            (adapter) =>
+              html`<ha-settings-row>
+                <span slot="prefix">
+                  <ha-checkbox
+                    id=${adapter.name}
+                    @change=${this._handleAdapterCheckboxClick}
+                    .checked=${configured_adapters.includes(adapter.name)}
+                    .adapter=${adapter.name}
+                    name=${adapter.name}
+                  >
+                  </ha-checkbox>
+                </span>
+                <span slot="heading">
+                  Adapter: ${adapter.name}
+                  ${adapter.default
+                    ? html`<ha-icon .icon="hass:star"></ha-icon> (Default)`
+                    : ""}
+                </span>
+                <span slot="description">
+                  ${format_addresses(adapter.ipv4)}
+                  ${format_addresses(adapter.ipv6)}
+                </span>
+              </ha-settings-row>`
+          )
+        : ""}
+    `;
+  }
+
+  private _handleAutoConfigureCheckboxClick(ev: Event) {
+    const checkbox = ev.currentTarget as HaCheckbox;
+    if (this.networkConfig === undefined) {
+      return;
+    }
+
+    let configured_adapters = [...this.networkConfig.configured_adapters];
+
+    if (checkbox.checked) {
+      this._expanded = false;
+      configured_adapters = [];
+    } else {
+      this._expanded = true;
+      for (const adapter of this.networkConfig.adapters) {
+        if (adapter.default) {
+          configured_adapters = [adapter.name];
+          break;
+        }
+      }
+    }
+
+    fireEvent(this, "network-config-changed", {
+      configured_adapters: configured_adapters,
+    });
+  }
+
+  private _handleAdapterCheckboxClick(ev: Event) {
+    const checkbox = ev.currentTarget as HaCheckbox;
+    const adapter_name = (checkbox as any).name;
+    if (this.networkConfig === undefined) {
+      return;
+    }
+
+    const configured_adapters = [...this.networkConfig.configured_adapters];
+
+    if (checkbox.checked) {
+      configured_adapters.push(adapter_name);
+    } else {
+      const index = configured_adapters.indexOf(adapter_name, 0);
+      configured_adapters.splice(index, 1);
+    }
+
+    fireEvent(this, "network-config-changed", {
+      configured_adapters: configured_adapters,
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        .error {
+          color: var(--error-color);
+        }
+
+        ha-settings-row {
+          padding: 0;
+        }
+
+        span[slot="heading"],
+        span[slot="description"] {
+          cursor: pointer;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-network": HaNetwork;
+  }
+}
diff --git a/src/components/ha-picture-upload.ts b/src/components/ha-picture-upload.ts
index 0ac990c667..5111b07644 100644
--- a/src/components/ha-picture-upload.ts
+++ b/src/components/ha-picture-upload.ts
@@ -2,14 +2,8 @@ import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiImagePlus } from "@mdi/js";
 import "@polymer/iron-input/iron-input";
 import "@polymer/paper-input/paper-input-container";
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { createImage, generateImageThumbnailUrl } from "../data/image";
 import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
@@ -36,7 +30,7 @@ export class HaPictureUpload extends LitElement {
 
   @property({ type: Number }) public size = 512;
 
-  @internalProperty() private _uploading = false;
+  @state() private _uploading = false;
 
   public render(): TemplateResult {
     return html`
diff --git a/src/components/ha-radio.ts b/src/components/ha-radio.ts
index 8796750a74..f1269e5a9f 100644
--- a/src/components/ha-radio.ts
+++ b/src/components/ha-radio.ts
@@ -1,12 +1,7 @@
-import "@material/mwc-radio";
-import type { Radio } from "@material/mwc-radio";
-import { customElement } from "lit-element";
-import type { Constructor } from "../types";
-
-const MwcRadio = customElements.get("mwc-radio") as Constructor<Radio>;
-
+import { Radio } from "@material/mwc-radio";
+import { customElement } from "lit/decorators";
 @customElement("ha-radio")
-export class HaRadio extends MwcRadio {
+export class HaRadio extends Radio {
   public firstUpdated() {
     super.firstUpdated();
     this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
diff --git a/src/components/ha-related-items.ts b/src/components/ha-related-items.ts
index 3d2cc72c27..4da2605b80 100644
--- a/src/components/ha-related-items.ts
+++ b/src/components/ha-related-items.ts
@@ -1,15 +1,13 @@
 import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 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 "../common/dom/fire_event";
 import {
   AreaRegistryEntry,
@@ -34,13 +32,13 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {
 
   @property() public itemId!: string;
 
-  @internalProperty() private _entries?: ConfigEntry[];
+  @state() private _entries?: ConfigEntry[];
 
-  @internalProperty() private _devices?: DeviceRegistryEntry[];
+  @state() private _devices?: DeviceRegistryEntry[];
 
-  @internalProperty() private _areas?: AreaRegistryEntry[];
+  @state() private _areas?: AreaRegistryEntry[];
 
-  @internalProperty() private _related?: RelatedResult;
+  @state() private _related?: RelatedResult;
 
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
@@ -303,7 +301,7 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {
     fireEvent(this, "hass-more-info", { entityId });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       a {
         color: var(--primary-color);
diff --git a/src/components/ha-relative-time.ts b/src/components/ha-relative-time.ts
index 98b9228dec..36da1ab190 100644
--- a/src/components/ha-relative-time.ts
+++ b/src/components/ha-relative-time.ts
@@ -1,14 +1,10 @@
-import {
-  customElement,
-  property,
-  PropertyValues,
-  UpdatingElement,
-} from "lit-element";
+import { PropertyValues, ReactiveElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import relativeTime from "../common/datetime/relative_time";
 import type { HomeAssistant } from "../types";
 
 @customElement("ha-relative-time")
-class HaRelativeTime extends UpdatingElement {
+class HaRelativeTime extends ReactiveElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public datetime?: string | Date;
@@ -27,6 +23,10 @@ class HaRelativeTime extends UpdatingElement {
     }
   }
 
+  protected createRenderRoot() {
+    return this;
+  }
+
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
     this._updateRelative();
diff --git a/src/components/ha-selector/ha-selector-action.ts b/src/components/ha-selector/ha-selector-action.ts
index 8b2ca84fca..5a6fd5f6c3 100644
--- a/src/components/ha-selector/ha-selector-action.ts
+++ b/src/components/ha-selector/ha-selector-action.ts
@@ -1,11 +1,5 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { Action } from "../../data/script";
 import { ActionSelector } from "../../data/selector";
 import "../../panels/config/automation/action/ha-automation-action";
@@ -31,7 +25,7 @@ export class HaActionSelector extends LitElement {
     ></ha-automation-action>`;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-automation-action {
         display: block;
diff --git a/src/components/ha-selector/ha-selector-addon.ts b/src/components/ha-selector/ha-selector-addon.ts
index 923fb4c29e..30214933f1 100644
--- a/src/components/ha-selector/ha-selector-addon.ts
+++ b/src/components/ha-selector/ha-selector-addon.ts
@@ -1,4 +1,5 @@
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { AddonSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
 import "../ha-addon-picker";
diff --git a/src/components/ha-selector/ha-selector-area.ts b/src/components/ha-selector/ha-selector-area.ts
index c3443291d6..5d619bf0e8 100644
--- a/src/components/ha-selector/ha-selector-area.ts
+++ b/src/components/ha-selector/ha-selector-area.ts
@@ -1,10 +1,5 @@
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-} from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { ConfigEntry, getConfigEntries } from "../../data/config_entries";
 import { DeviceRegistryEntry } from "../../data/device_registry";
 import { EntityRegistryEntry } from "../../data/entity_registry";
@@ -22,7 +17,7 @@ export class HaAreaSelector extends LitElement {
 
   @property() public label?: string;
 
-  @internalProperty() public _configEntries?: ConfigEntry[];
+  @state() public _configEntries?: ConfigEntry[];
 
   @property({ type: Boolean }) public disabled = false;
 
diff --git a/src/components/ha-selector/ha-selector-boolean.ts b/src/components/ha-selector/ha-selector-boolean.ts
index 0f56180fe5..154ecc4c9a 100644
--- a/src/components/ha-selector/ha-selector-boolean.ts
+++ b/src/components/ha-selector/ha-selector-boolean.ts
@@ -1,11 +1,5 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HomeAssistant } from "../../types";
 import "../ha-formfield";
@@ -39,7 +33,7 @@ export class HaBooleanSelector extends LitElement {
     fireEvent(this, "value-changed", { value });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-formfield {
         width: 100%;
diff --git a/src/components/ha-selector/ha-selector-device.ts b/src/components/ha-selector/ha-selector-device.ts
index 9446c16a51..bdf945899c 100644
--- a/src/components/ha-selector/ha-selector-device.ts
+++ b/src/components/ha-selector/ha-selector-device.ts
@@ -1,10 +1,5 @@
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-} from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { ConfigEntry, getConfigEntries } from "../../data/config_entries";
 import { DeviceRegistryEntry } from "../../data/device_registry";
 import { DeviceSelector } from "../../data/selector";
@@ -21,7 +16,7 @@ export class HaDeviceSelector extends LitElement {
 
   @property() public label?: string;
 
-  @internalProperty() public _configEntries?: ConfigEntry[];
+  @state() public _configEntries?: ConfigEntry[];
 
   @property({ type: Boolean }) public disabled = false;
 
diff --git a/src/components/ha-selector/ha-selector-entity.ts b/src/components/ha-selector/ha-selector-entity.ts
index 21977aa46c..a2cb042c72 100644
--- a/src/components/ha-selector/ha-selector-entity.ts
+++ b/src/components/ha-selector/ha-selector-entity.ts
@@ -1,11 +1,6 @@
 import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-} from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { subscribeEntityRegistry } from "../../data/entity_registry";
 import { EntitySelector } from "../../data/selector";
@@ -19,7 +14,7 @@ export class HaEntitySelector extends SubscribeMixin(LitElement) {
 
   @property() public selector!: EntitySelector;
 
-  @internalProperty() private _entityPlaformLookup?: Record<string, string>;
+  @state() private _entityPlaformLookup?: Record<string, string>;
 
   @property() public value?: any;
 
diff --git a/src/components/ha-selector/ha-selector-number.ts b/src/components/ha-selector/ha-selector-number.ts
index 6360ed1568..244f97e2ce 100644
--- a/src/components/ha-selector/ha-selector-number.ts
+++ b/src/components/ha-selector/ha-selector-number.ts
@@ -1,13 +1,7 @@
 import "@polymer/paper-input/paper-input";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../common/dom/fire_event";
 import { NumberSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
@@ -29,12 +23,12 @@ export class HaNumberSelector extends LitElement {
 
   protected render() {
     return html`${this.label}
-      ${this.selector.number.mode === "slider"
+      ${this.selector.number.mode !== "box"
         ? html`<ha-slider
             .min=${this.selector.number.min}
             .max=${this.selector.number.max}
             .value=${this._value}
-            .step=${this.selector.number.step}
+            .step=${this.selector.number.step ?? 1}
             .disabled=${this.disabled}
             pin
             ignore-bar-touch
@@ -44,16 +38,14 @@ export class HaNumberSelector extends LitElement {
         : ""}
       <paper-input
         pattern="[0-9]+([\\.][0-9]+)?"
-        .label=${this.selector.number.mode === "slider"
-          ? undefined
-          : this.label}
+        .label=${this.selector.number.mode !== "box" ? undefined : this.label}
         .placeholder=${this.placeholder}
-        .noLabelFloat=${this.selector.number.mode === "slider"}
+        .noLabelFloat=${this.selector.number.mode !== "box"}
         class=${classMap({ single: this.selector.number.mode === "box" })}
         .min=${this.selector.number.min}
         .max=${this.selector.number.max}
         .value=${this.value}
-        .step=${this.selector.number.step}
+        .step=${this.selector.number.step ?? 1}
         .disabled=${this.disabled}
         type="number"
         auto-validate
@@ -92,7 +84,7 @@ export class HaNumberSelector extends LitElement {
     fireEvent(this, "value-changed", { value });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: flex;
diff --git a/src/components/ha-selector/ha-selector-object.ts b/src/components/ha-selector/ha-selector-object.ts
index 208bbaa6d4..e003f28251 100644
--- a/src/components/ha-selector/ha-selector-object.ts
+++ b/src/components/ha-selector/ha-selector-object.ts
@@ -1,4 +1,5 @@
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HomeAssistant } from "../../types";
 import "../ha-yaml-editor";
diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts
index 55a2fa7357..450a6d7e6a 100644
--- a/src/components/ha-selector/ha-selector-select.ts
+++ b/src/components/ha-selector/ha-selector-select.ts
@@ -1,14 +1,8 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import { HomeAssistant } from "../../types";
 import { SelectSelector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
 import "../ha-paper-dropdown-menu";
 
 @customElement("ha-selector-select")
@@ -52,7 +46,7 @@ export class HaSelectSelector extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-paper-dropdown-menu {
         width: 100%;
diff --git a/src/components/ha-selector/ha-selector-target.ts b/src/components/ha-selector/ha-selector-target.ts
index 60c93c8857..6299f60bf1 100644
--- a/src/components/ha-selector/ha-selector-target.ts
+++ b/src/components/ha-selector/ha-selector-target.ts
@@ -8,15 +8,8 @@ import {
   HassServiceTarget,
   UnsubscribeFunc,
 } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { ConfigEntry, getConfigEntries } from "../../data/config_entries";
 import { DeviceRegistryEntry } from "../../data/device_registry";
 import {
@@ -38,9 +31,9 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
 
   @property() public label?: string;
 
-  @internalProperty() private _entityPlaformLookup?: Record<string, string>;
+  @state() private _entityPlaformLookup?: Record<string, string>;
 
-  @internalProperty() private _configEntries?: ConfigEntry[];
+  @state() private _configEntries?: ConfigEntry[];
 
   @property({ type: Boolean }) public disabled = false;
 
@@ -153,7 +146,7 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
     );
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-target-picker {
         display: block;
diff --git a/src/components/ha-selector/ha-selector-text.ts b/src/components/ha-selector/ha-selector-text.ts
index 9d2fbbd248..25cddf58d8 100644
--- a/src/components/ha-selector/ha-selector-text.ts
+++ b/src/components/ha-selector/ha-selector-text.ts
@@ -1,9 +1,10 @@
-import { customElement, html, LitElement, property } from "lit-element";
-import { fireEvent } from "../../common/dom/fire_event";
-import { HomeAssistant } from "../../types";
-import "@polymer/paper-input/paper-textarea";
 import "@polymer/paper-input/paper-input";
+import "@polymer/paper-input/paper-textarea";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
 import { StringSelector } from "../../data/selector";
+import { HomeAssistant } from "../../types";
 
 @customElement("ha-selector-text")
 export class HaTextSelector extends LitElement {
diff --git a/src/components/ha-selector/ha-selector-time.ts b/src/components/ha-selector/ha-selector-time.ts
index 8fb0d530c0..84ab97c8da 100644
--- a/src/components/ha-selector/ha-selector-time.ts
+++ b/src/components/ha-selector/ha-selector-time.ts
@@ -1,9 +1,13 @@
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { useAmPm } from "../../common/datetime/use_am_pm";
 import { fireEvent } from "../../common/dom/fire_event";
 import { TimeSelector } from "../../data/selector";
+import { FrontendLocaleData } from "../../data/translation";
 import { HomeAssistant } from "../../types";
 import "../paper-time-input";
+
 @customElement("ha-selector-time")
 export class HaTimeSelector extends LitElement {
   @property() public hass!: HomeAssistant;
@@ -16,13 +20,12 @@ export class HaTimeSelector extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  private _useAmPm = memoizeOne((language: string) => {
-    const test = new Date().toLocaleString(language);
-    return test.includes("AM") || test.includes("PM");
-  });
+  private _useAmPmMem = memoizeOne((locale: FrontendLocaleData): boolean =>
+    useAmPm(locale)
+  );
 
   protected render() {
-    const useAMPM = this._useAmPm(this.hass.locale.language);
+    const useAMPM = this._useAmPmMem(this.hass.locale);
 
     const parts = this.value?.split(":") || [];
     const hours = parts[0];
@@ -47,7 +50,7 @@ export class HaTimeSelector extends LitElement {
 
   private _timeChanged(ev) {
     let value = ev.target.value;
-    const useAMPM = this._useAmPm(this.hass.locale.language);
+    const useAMPM = this._useAmPmMem(this.hass.locale);
     let hours = Number(ev.target.hour || 0);
     if (value && useAMPM) {
       if (ev.target.amPm === "PM") {
diff --git a/src/components/ha-selector/ha-selector.ts b/src/components/ha-selector/ha-selector.ts
index 9982e33831..d426ec0b49 100644
--- a/src/components/ha-selector/ha-selector.ts
+++ b/src/components/ha-selector/ha-selector.ts
@@ -1,4 +1,5 @@
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { dynamicElement } from "../../common/dom/dynamic-element-directive";
 import { Selector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
@@ -9,11 +10,11 @@ import "./ha-selector-boolean";
 import "./ha-selector-device";
 import "./ha-selector-entity";
 import "./ha-selector-number";
-import "./ha-selector-target";
-import "./ha-selector-time";
 import "./ha-selector-object";
-import "./ha-selector-text";
 import "./ha-selector-select";
+import "./ha-selector-target";
+import "./ha-selector-text";
+import "./ha-selector-time";
 
 @customElement("ha-selector")
 export class HaSelector extends LitElement {
diff --git a/src/components/ha-service-control.ts b/src/components/ha-service-control.ts
index 48fb03011e..a93b7aba26 100644
--- a/src/components/ha-service-control.ts
+++ b/src/components/ha-service-control.ts
@@ -1,21 +1,15 @@
 import { mdiHelpCircle } from "@mdi/js";
-import { HassService, HassServiceTarget } from "home-assistant-js-websocket";
 import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-  query,
-} from "lit-element";
+  HassService,
+  HassServices,
+  HassServiceTarget,
+} from "home-assistant-js-websocket";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, state, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
 import { computeObjectId } from "../common/entity/compute_object_id";
-import { ENTITY_COMPONENT_DOMAINS } from "../data/entity";
 import { Selector } from "../data/selector";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
@@ -51,13 +45,13 @@ export class HaServiceControl extends LitElement {
     data?: Record<string, any>;
   };
 
-  @internalProperty() private _value!: this["value"];
+  @state() private _value!: this["value"];
 
   @property({ reflect: true, type: Boolean }) public narrow!: boolean;
 
   @property({ type: Boolean }) public showAdvanced?: boolean;
 
-  @internalProperty() private _checkedKeys = new Set();
+  @state() private _checkedKeys = new Set();
 
   @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
 
@@ -73,7 +67,10 @@ export class HaServiceControl extends LitElement {
       this._checkedKeys = new Set();
     }
 
-    const serviceData = this._getServiceInfo(this.value?.service);
+    const serviceData = this._getServiceInfo(
+      this.value?.service,
+      this.hass.services
+    );
 
     if (
       serviceData &&
@@ -117,45 +114,45 @@ export class HaServiceControl extends LitElement {
     }
   }
 
-  private _domainFilter = memoizeOne((service: string) => {
-    const domain = computeDomain(service);
-    return ENTITY_COMPONENT_DOMAINS.includes(domain) ? [domain] : null;
-  });
+  private _getServiceInfo = memoizeOne(
+    (
+      service?: string,
+      serviceDomains?: HassServices
+    ): ExtHassService | undefined => {
+      if (!service || !serviceDomains) {
+        return undefined;
+      }
+      const domain = computeDomain(service);
+      const serviceName = computeObjectId(service);
+      if (!(domain in serviceDomains)) {
+        return undefined;
+      }
+      if (!(serviceName in serviceDomains[domain])) {
+        return undefined;
+      }
 
-  private _getServiceInfo = memoizeOne((service?: string):
-    | ExtHassService
-    | undefined => {
-    if (!service) {
-      return undefined;
+      const fields = Object.entries(
+        serviceDomains[domain][serviceName].fields
+      ).map(([key, value]) => ({
+        key,
+        ...value,
+        selector: value.selector as Selector | undefined,
+      }));
+      return {
+        ...serviceDomains[domain][serviceName],
+        fields,
+        hasSelector: fields.length
+          ? fields.filter((field) => field.selector).map((field) => field.key)
+          : [],
+      };
     }
-    const domain = computeDomain(service);
-    const serviceName = computeObjectId(service);
-    const serviceDomains = this.hass.services;
-    if (!(domain in serviceDomains)) {
-      return undefined;
-    }
-    if (!(serviceName in serviceDomains[domain])) {
-      return undefined;
-    }
-
-    const fields = Object.entries(
-      serviceDomains[domain][serviceName].fields
-    ).map(([key, value]) => ({
-      key,
-      ...value,
-      selector: value.selector as Selector | undefined,
-    }));
-    return {
-      ...serviceDomains[domain][serviceName],
-      fields,
-      hasSelector: fields.length
-        ? fields.filter((field) => field.selector).map((field) => field.key)
-        : [],
-    };
-  });
+  );
 
   protected render() {
-    const serviceData = this._getServiceInfo(this._value?.service);
+    const serviceData = this._getServiceInfo(
+      this._value?.service,
+      this.hass.services
+    );
 
     const shouldRenderServiceDataYaml =
       (serviceData?.fields.length && !serviceData.hasSelector.length) ||
@@ -219,11 +216,7 @@ export class HaServiceControl extends LitElement {
               .hass=${this.hass}
               .selector=${serviceData.target
                 ? { target: serviceData.target }
-                : {
-                    target: {
-                      entity: { domain: computeDomain(this._value!.service) },
-                    },
-                  }}
+                : { target: {} }}
               @value-changed=${this._targetChanged}
               .value=${this._value?.target}
             ></ha-selector
@@ -233,7 +226,6 @@ export class HaServiceControl extends LitElement {
             .hass=${this.hass}
             .value=${this._value?.data?.entity_id}
             .label=${entityId.description}
-            .includeDomains=${this._domainFilter(this._value!.service)}
             @value-changed=${this._entityPicked}
             allow-custom-entity
           ></ha-entity-picker>`
@@ -395,7 +387,7 @@ export class HaServiceControl extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-settings-row {
         padding: var(--service-control-padding, 0 16px);
diff --git a/src/components/ha-service-picker.ts b/src/components/ha-service-picker.ts
index 17bff6027f..10755ca50e 100644
--- a/src/components/ha-service-picker.ts
+++ b/src/components/ha-service-picker.ts
@@ -1,44 +1,34 @@
-import { html, internalProperty, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { LocalizeFunc } from "../common/translations/localize";
 import { domainToName } from "../data/integration";
 import { HomeAssistant } from "../types";
 import "./ha-combo-box";
+import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
 
-const rowRenderer = (
-  root: HTMLElement,
-  _owner,
-  model: { item: { service: string; name: string } }
-) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-    <style>
-      paper-item {
-        margin: -10px 0;
-        padding: 0;
-      }
-    </style>
-    <paper-item>
-      <paper-item-body two-line="">
-        <div class='name'>[[item.name]]</div>
-        <div secondary>[[item.service]]</div>
-      </paper-item-body>
-    </paper-item>
-    `;
-  }
-
-  root.querySelector(".name")!.textContent = model.item.name;
-  root.querySelector("[secondary]")!.textContent =
-    model.item.name === model.item.service ? "" : model.item.service;
-};
+const rowRenderer: ComboBoxLitRenderer<{ service: string; name: string }> = (
+  item
+) => html`<style>
+    paper-item {
+      margin: -10px 0;
+      padding: 0;
+    }
+  </style>
+  <paper-item>
+    <paper-item-body two-line>
+      ${item.name}
+      <span secondary>${item.name === item.service ? "" : item.service}</span>
+    </paper-item-body>
+  </paper-item>`;
 
 class HaServicePicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public value?: string;
 
-  @internalProperty() private _filter?: string;
+  @state() private _filter?: string;
 
   protected render() {
     return html`
diff --git a/src/components/ha-settings-row.ts b/src/components/ha-settings-row.ts
index 12f37bfe79..a28738b265 100644
--- a/src/components/ha-settings-row.ts
+++ b/src/components/ha-settings-row.ts
@@ -1,13 +1,6 @@
 import "@polymer/paper-item/paper-item-body";
-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";
 
 @customElement("ha-settings-row")
 export class HaSettingsRow extends LitElement {
@@ -32,7 +25,7 @@ export class HaSettingsRow extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: flex;
diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index 83502db730..0a56b4df48 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -16,19 +16,18 @@ import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
   CSSResult,
-  customElement,
-  eventOptions,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { guard } from "lit-html/directives/guard";
+} from "lit";
+import { customElement, eventOptions, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { guard } from "lit/directives/guard";
 import memoizeOne from "memoize-one";
 import { LocalStorage } from "../common/decorators/local-storage";
 import { fireEvent } from "../common/dom/fire_event";
+import { toggleAttribute } from "../common/dom/toggle_attribute";
 import { computeDomain } from "../common/entity/compute_domain";
 import { compare } from "../common/string/compare";
 import { computeRTL } from "../common/util/compute_rtl";
@@ -167,19 +166,13 @@ class HaSidebar extends LitElement {
 
   @property({ type: Boolean }) public alwaysExpand = false;
 
-  @property({ type: Boolean, reflect: true }) public expanded = false;
-
   @property({ type: Boolean }) public editMode = false;
 
-  @internalProperty() private _externalConfig?: ExternalConfig;
+  @state() private _externalConfig?: ExternalConfig;
 
-  @internalProperty() private _notifications?: PersistentNotification[];
+  @state() private _notifications?: PersistentNotification[];
 
-  // property used only in css
-  // @ts-ignore
-  @property({ type: Boolean, reflect: true }) public rtl = false;
-
-  @internalProperty() private _renderEmptySortable = false;
+  @state() private _renderEmptySortable = false;
 
   private _mouseLeaveTimeout?: number;
 
@@ -267,7 +260,7 @@ class HaSidebar extends LitElement {
   protected updated(changedProps) {
     super.updated(changedProps);
     if (changedProps.has("alwaysExpand")) {
-      this.expanded = this.alwaysExpand;
+      toggleAttribute(this, "expanded", this.alwaysExpand);
     }
     if (changedProps.has("editMode")) {
       if (this.editMode) {
@@ -282,7 +275,7 @@ class HaSidebar extends LitElement {
 
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
     if (!oldHass || oldHass.locale !== this.hass.locale) {
-      this.rtl = computeRTL(this.hass);
+      toggleAttribute(this, "rtl", computeRTL(this.hass));
     }
 
     if (!SUPPORT_SCROLL_IF_NEEDED) {
@@ -430,7 +423,7 @@ class HaSidebar extends LitElement {
         @click=${this._handleShowNotificationDrawer}
       >
         <ha-svg-icon slot="item-icon" .path=${mdiBell}></ha-svg-icon>
-        ${!this.expanded && notificationCount > 0
+        ${!this.alwaysExpand && notificationCount > 0
           ? html`
               <span class="notification-badge" slot="item-icon">
                 ${notificationCount}
@@ -440,7 +433,7 @@ class HaSidebar extends LitElement {
         <span class="item-text">
           ${this.hass.localize("ui.notification_drawer.title")}
         </span>
-        ${this.expanded && notificationCount > 0
+        ${this.alwaysExpand && notificationCount > 0
           ? html` <span class="notification-badge">${notificationCount}</span> `
           : ""}
       </paper-icon-item>
@@ -524,7 +517,7 @@ class HaSidebar extends LitElement {
       ]);
 
       const style = document.createElement("style");
-      style.innerHTML = sortStylesImport.sortableStyles.cssText;
+      style.innerHTML = (sortStylesImport.sortableStyles as CSSResult).cssText;
       this.shadowRoot!.appendChild(style);
 
       Sortable = sortableImport.Sortable;
@@ -595,7 +588,7 @@ class HaSidebar extends LitElement {
     // for 100ms so that we ignore it when pressing down arrow scrolls the
     // sidebar causing the mouse to hover a new icon
     if (
-      this.expanded ||
+      this.alwaysExpand ||
       new Date().getTime() < this._recentKeydownActiveUntil
     ) {
       return;
@@ -617,7 +610,7 @@ class HaSidebar extends LitElement {
   }
 
   private _listboxFocusIn(ev) {
-    if (this.expanded || ev.target.nodeName !== "A") {
+    if (this.alwaysExpand || ev.target.nodeName !== "A") {
       return;
     }
     this._showTooltip(ev.target.querySelector("paper-icon-item"));
@@ -741,7 +734,7 @@ class HaSidebar extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleScrollbar,
       css`
diff --git a/src/components/ha-svg-icon.ts b/src/components/ha-svg-icon.ts
index ecc95d0d44..b8f6a3b5c7 100644
--- a/src/components/ha-svg-icon.ts
+++ b/src/components/ha-svg-icon.ts
@@ -1,12 +1,5 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  LitElement,
-  property,
-  svg,
-  SVGTemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, LitElement, svg, SVGTemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 
 @customElement("ha-svg-icon")
 export class HaSvgIcon extends LitElement {
@@ -26,7 +19,7 @@ export class HaSvgIcon extends LitElement {
     </svg>`;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: var(--ha-icon-display, inline-flex);
diff --git a/src/components/ha-switch.ts b/src/components/ha-switch.ts
index ed5c123a1d..2ab7106190 100644
--- a/src/components/ha-switch.ts
+++ b/src/components/ha-switch.ts
@@ -1,14 +1,10 @@
-import "@material/mwc-switch";
-import type { Switch } from "@material/mwc-switch";
-import { style } from "@material/mwc-switch/mwc-switch-css";
-import { css, CSSResult, customElement, property } from "lit-element";
+import { Switch } from "@material/mwc-switch";
+import { css, CSSResultGroup } from "lit";
+import { customElement, property } from "lit/decorators";
 import { forwardHaptic } from "../data/haptics";
-import { Constructor } from "../types";
-
-const MwcSwitch = customElements.get("mwc-switch") as Constructor<Switch>;
-
 @customElement("ha-switch")
-export class HaSwitch extends MwcSwitch {
+// @ts-expect-error
+export class HaSwitch extends Switch {
   // Generate a haptic vibration.
   // Only set to true if the new value of the switch is applied right away when toggling.
   // Do not add haptic when a user is required to press save.
@@ -27,9 +23,9 @@ export class HaSwitch extends MwcSwitch {
     });
   }
 
-  protected static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
-      style,
+      Switch.styles,
       css`
         .mdc-switch.mdc-switch--checked .mdc-switch__thumb {
           background-color: var(--switch-checked-button-color);
diff --git a/src/components/ha-tab.ts b/src/components/ha-tab.ts
index c887c6c440..fe391171ba 100644
--- a/src/components/ha-tab.ts
+++ b/src/components/ha-tab.ts
@@ -1,19 +1,15 @@
 import type { Ripple } from "@material/mwc-ripple";
 import "@material/mwc-ripple/mwc-ripple";
 import { RippleHandlers } from "@material/mwc-ripple/ripple-handlers";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import {
-  css,
-  CSSResult,
   customElement,
   eventOptions,
-  html,
-  internalProperty,
-  LitElement,
   property,
   queryAsync,
-  TemplateResult,
-} from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
+  state,
+} from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import "./ha-icon";
 import "./ha-svg-icon";
 
@@ -27,7 +23,7 @@ export class HaTab extends LitElement {
 
   @queryAsync("mwc-ripple") private _ripple!: Promise<Ripple | null>;
 
-  @internalProperty() private _shouldRenderRipple = false;
+  @state() private _shouldRenderRipple = false;
 
   protected render(): TemplateResult {
     return html`
@@ -92,7 +88,7 @@ export class HaTab extends LitElement {
     this._rippleHandlers.endFocus();
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       div {
         padding: 0 32px;
@@ -121,9 +117,10 @@ export class HaTab extends LitElement {
       }
 
       :host([narrow]) {
-        padding: 0 16px;
-        width: 20%;
         min-width: 0;
+        display: flex;
+        justify-content: center;
+        overflow: hidden;
       }
     `;
   }
diff --git a/src/components/ha-tabs.ts b/src/components/ha-tabs.ts
index 491d36462f..035663190f 100644
--- a/src/components/ha-tabs.ts
+++ b/src/components/ha-tabs.ts
@@ -2,7 +2,7 @@ import type { PaperIconButtonElement } from "@polymer/paper-icon-button/paper-ic
 import type { PaperTabElement } from "@polymer/paper-tabs/paper-tab";
 import "@polymer/paper-tabs/paper-tabs";
 import type { PaperTabsElement } from "@polymer/paper-tabs/paper-tabs";
-import { customElement } from "lit-element";
+import { customElement } from "lit/decorators";
 import { Constructor } from "../types";
 
 const PaperTabs = customElements.get(
diff --git a/src/components/ha-target-picker.ts b/src/components/ha-target-picker.ts
index d082962d9b..3e2e40260f 100644
--- a/src/components/ha-target-picker.ts
+++ b/src/components/ha-target-picker.ts
@@ -14,18 +14,9 @@ import {
   HassServiceTarget,
   UnsubscribeFunc,
 } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  query,
-  unsafeCSS,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+import { css, CSSResultGroup, html, LitElement, unsafeCSS } from "lit";
+import { customElement, property, state, query } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../common/dom/fire_event";
 import { ensureArray } from "../common/ensure-array";
 import { computeDomain } from "../common/entity/compute_domain";
@@ -86,15 +77,15 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
-  @internalProperty() private _areas?: { [areaId: string]: AreaRegistryEntry };
+  @state() private _areas?: { [areaId: string]: AreaRegistryEntry };
 
-  @internalProperty() private _devices?: {
+  @state() private _devices?: {
     [deviceId: string]: DeviceRegistryEntry;
   };
 
-  @internalProperty() private _entities?: EntityRegistryEntry[];
+  @state() private _entities?: EntityRegistryEntry[];
 
-  @internalProperty() private _addMode?: "area_id" | "entity_id" | "device_id";
+  @state() private _addMode?: "area_id" | "entity_id" | "device_id";
 
   @query("#input") private _inputElement?;
 
@@ -534,7 +525,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
     return true;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ${unsafeCSS(chipStyles)}
       .mdc-chip {
diff --git a/src/components/ha-time-input.ts b/src/components/ha-time-input.ts
index e72e1a09d9..382ea4d569 100644
--- a/src/components/ha-time-input.ts
+++ b/src/components/ha-time-input.ts
@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import "./paper-time-input";
 
diff --git a/src/components/ha-yaml-editor.ts b/src/components/ha-yaml-editor.ts
index a702be77ac..8d79034c3e 100644
--- a/src/components/ha-yaml-editor.ts
+++ b/src/components/ha-yaml-editor.ts
@@ -1,12 +1,6 @@
-import { safeDump, safeLoad } from "js-yaml";
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { dump, load } from "js-yaml";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import "./ha-code-editor";
 
@@ -32,11 +26,11 @@ export class HaYamlEditor extends LitElement {
 
   @property() public label?: string;
 
-  @internalProperty() private _yaml = "";
+  @state() private _yaml = "";
 
   public setValue(value): void {
     try {
-      this._yaml = value && !isEmpty(value) ? safeDump(value) : "";
+      this._yaml = value && !isEmpty(value) ? dump(value) : "";
     } catch (err) {
       // eslint-disable-next-line no-console
       console.error(err, value);
@@ -73,7 +67,7 @@ export class HaYamlEditor extends LitElement {
 
     if (this._yaml) {
       try {
-        parsed = safeLoad(this._yaml);
+        parsed = load(this._yaml);
       } catch (err) {
         // Invalid YAML
         isValid = false;
diff --git a/src/components/map/ha-location-editor.ts b/src/components/map/ha-location-editor.ts
index 8ba1ec3c2b..4ee130d52d 100644
--- a/src/components/map/ha-location-editor.ts
+++ b/src/components/map/ha-location-editor.ts
@@ -10,14 +10,13 @@ import {
 } from "leaflet";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import {
   LeafletModuleType,
@@ -109,7 +108,7 @@ class LocationEditor extends LitElement {
 
     if (changedProps.has("hass")) {
       const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-      if (!oldHass || oldHass.themes?.darkMode === this.hass.themes?.darkMode) {
+      if (!oldHass || oldHass.themes.darkMode === this.hass.themes.darkMode) {
         return;
       }
       if (!this._leafletMap || !this._tileLayer) {
@@ -119,7 +118,7 @@ class LocationEditor extends LitElement {
         this.Leaflet,
         this._leafletMap,
         this._tileLayer,
-        this.hass.themes?.darkMode
+        this.hass.themes.darkMode
       );
     }
   }
@@ -131,7 +130,7 @@ class LocationEditor extends LitElement {
   private async _initMap(): Promise<void> {
     [this._leafletMap, this.Leaflet, this._tileLayer] = await setupLeafletMap(
       this._mapEl,
-      this.darkMode ?? this.hass.themes?.darkMode,
+      this.darkMode ?? this.hass.themes.darkMode,
       Boolean(this.radius)
     );
     this._leafletMap.addEventListener(
@@ -271,7 +270,7 @@ class LocationEditor extends LitElement {
     (this._locationMarker as Circle).setStyle({ color: this.radiusColor });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;
diff --git a/src/components/map/ha-locations-editor.ts b/src/components/map/ha-locations-editor.ts
index 184813c32e..b0b8008906 100644
--- a/src/components/map/ha-locations-editor.ts
+++ b/src/components/map/ha-locations-editor.ts
@@ -10,14 +10,13 @@ import {
 } from "leaflet";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import {
   LeafletModuleType,
@@ -286,12 +285,11 @@ export class HaLocationsEditor extends LitElement {
           [location.latitude, location.longitude],
           options
         )
-          .addEventListener(
-            "dragend",
-            // @ts-ignore
-            (ev: DragEndEvent) => this._updateLocation(ev)
+          .addEventListener("dragend", (ev: DragEndEvent) =>
+            this._updateLocation(ev)
           )
           .addEventListener(
+            // @ts-ignore
             "click",
             // @ts-ignore
             (ev: MouseEvent) => this._markerClicked(ev)
@@ -304,7 +302,7 @@ export class HaLocationsEditor extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;
diff --git a/src/components/map/ha-map.ts b/src/components/map/ha-map.ts
index 98113ab100..fd29d2a268 100644
--- a/src/components/map/ha-map.ts
+++ b/src/components/map/ha-map.ts
@@ -1,14 +1,13 @@
 import { Circle, Layer, Map, Marker, TileLayer } from "leaflet";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property } from "lit/decorators";
 import {
   LeafletModuleType,
   replaceTileLayer,
@@ -326,7 +325,7 @@ class HaMap extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;
diff --git a/src/components/media-player/dialog-media-player-browse.ts b/src/components/media-player/dialog-media-player-browse.ts
index 3ef4f00c04..6e5a54d973 100644
--- a/src/components/media-player/dialog-media-player-browse.ts
+++ b/src/components/media-player/dialog-media-player-browse.ts
@@ -1,13 +1,5 @@
-import {
-  css,
-  CSSResultArray,
-  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 { fireEvent, HASSDomEvent } from "../../common/dom/fire_event";
 import type {
   MediaPickedEvent,
@@ -23,15 +15,15 @@ import { MediaPlayerBrowseDialogParams } from "./show-media-browser-dialog";
 class DialogMediaPlayerBrowse extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _entityId!: string;
+  @state() private _entityId!: string;
 
-  @internalProperty() private _mediaContentId?: string;
+  @state() private _mediaContentId?: string;
 
-  @internalProperty() private _mediaContentType?: string;
+  @state() private _mediaContentType?: string;
 
-  @internalProperty() private _action?: MediaPlayerBrowseAction;
+  @state() private _action?: MediaPlayerBrowseAction;
 
-  @internalProperty() private _params?: MediaPlayerBrowseDialogParams;
+  @state() private _params?: MediaPlayerBrowseDialogParams;
 
   public showDialog(params: MediaPlayerBrowseDialogParams): void {
     this._params = params;
@@ -81,7 +73,7 @@ class DialogMediaPlayerBrowse extends LitElement {
     }
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/components/media-player/ha-media-player-browse.ts b/src/components/media-player/ha-media-player-browse.ts
index 88ccff39d1..db5b8af6b3 100644
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/src/components/media-player/ha-media-player-browse.ts
@@ -7,20 +7,22 @@ import "@polymer/paper-listbox/paper-listbox";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
   css,
-  CSSResultArray,
-  customElement,
-  eventOptions,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { ifDefined } from "lit-html/directives/if-defined";
-import { styleMap } from "lit-html/directives/style-map";
+} from "lit";
+import {
+  customElement,
+  property,
+  state,
+  query,
+  eventOptions,
+} from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
+import { styleMap } from "lit/directives/style-map";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeRTLDirection } from "../../common/util/compute_rtl";
 import { debounce } from "../../common/util/debounce";
@@ -72,11 +74,11 @@ export class HaMediaPlayerBrowse extends LitElement {
   @property({ type: Boolean, attribute: "scroll", reflect: true })
   private _scrolled = false;
 
-  @internalProperty() private _loading = false;
+  @state() private _loading = false;
 
-  @internalProperty() private _error?: { message: string; code: string };
+  @state() private _error?: { message: string; code: string };
 
-  @internalProperty() private _mediaPlayerItems: MediaPlayerItem[] = [];
+  @state() private _mediaPlayerItems: MediaPlayerItem[] = [];
 
   @query(".header") private _header?: HTMLDivElement;
 
@@ -610,7 +612,7 @@ export class HaMediaPlayerBrowse extends LitElement {
     return html`<span class="error">${err.message}</span>`;
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/components/state-history-chart-timeline.js b/src/components/state-history-chart-timeline.js
index 12fe3ca416..816425aa25 100644
--- a/src/components/state-history-chart-timeline.js
+++ b/src/components/state-history-chart-timeline.js
@@ -194,7 +194,10 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
           invertOnOff,
         ]);
       }
-      datasets.push({ data: dataRow, entity_id: stateInfo.entity_id });
+      datasets.push({
+        data: dataRow,
+        entity_id: stateInfo.entity_id,
+      });
       labels.push(entityDisplay);
     });
 
@@ -234,6 +237,9 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
                   fontStyle: "bold",
                 },
               },
+              categoryPercentage: undefined,
+              barPercentage: undefined,
+              time: { format: undefined },
             },
           ],
           yAxes: [
@@ -242,10 +248,17 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
                 yaxe.maxWidth = yaxe.chart.width * 0.18;
               },
               position: this._computeRTL ? "right" : "left",
+              categoryPercentage: undefined,
+              barPercentage: undefined,
+              time: { format: undefined },
             },
           ],
         },
       },
+      datasets: {
+        categoryPercentage: 0.8,
+        barPercentage: 0.9,
+      },
       data: {
         labels: labels,
         datasets: datasets,
diff --git a/src/components/state-history-charts.ts b/src/components/state-history-charts.ts
index 49ac8049c5..9be40220da 100644
--- a/src/components/state-history-charts.ts
+++ b/src/components/state-history-charts.ts
@@ -1,19 +1,18 @@
-import "./ha-circular-progress";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property } from "lit/decorators";
+import { isComponentLoaded } from "../common/config/is_component_loaded";
+import { HistoryResult } from "../data/history";
+import type { HomeAssistant } from "../types";
+import "./ha-circular-progress";
 import "./state-history-chart-line";
 import "./state-history-chart-timeline";
-import { isComponentLoaded } from "../common/config/is_component_loaded";
-import type { HomeAssistant } from "../types";
-import { HistoryResult } from "../data/history";
 
 @customElement("state-history-charts")
 class StateHistoryCharts extends LitElement {
@@ -98,7 +97,7 @@ class StateHistoryCharts extends LitElement {
     return !this.isLoadingData && historyDataEmpty;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;
diff --git a/src/components/trace/ha-timeline.ts b/src/components/trace/ha-timeline.ts
index d9572c4a67..3ca99b56d2 100644
--- a/src/components/trace/ha-timeline.ts
+++ b/src/components/trace/ha-timeline.ts
@@ -1,13 +1,6 @@
 import { mdiCircleOutline } from "@mdi/js";
-import {
-  LitElement,
-  customElement,
-  html,
-  css,
-  property,
-  TemplateResult,
-  internalProperty,
-} from "lit-element";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { buttonLinkStyle } from "../../resources/styles";
 import "../ha-svg-icon";
 
@@ -23,7 +16,7 @@ export class HaTimeline extends LitElement {
 
   @property({ attribute: false }) public moreItems?: TemplateResult[];
 
-  @internalProperty() private _showMore = false;
+  @state() private _showMore = false;
 
   protected render() {
     return html`
diff --git a/src/components/trace/hat-graph-node.ts b/src/components/trace/hat-graph-node.ts
index ae0b59aa87..5b0ba7ca64 100644
--- a/src/components/trace/hat-graph-node.ts
+++ b/src/components/trace/hat-graph-node.ts
@@ -1,5 +1,5 @@
-import { css, customElement, LitElement, property, svg } from "lit-element";
-
+import { css, LitElement, svg } from "lit";
+import { customElement, property } from "lit/decorators";
 import { NODE_SIZE, SPACING } from "./hat-graph";
 
 @customElement("hat-graph-node")
diff --git a/src/components/trace/hat-graph-spacer.ts b/src/components/trace/hat-graph-spacer.ts
index 22c6770a1b..e30c05bd5a 100644
--- a/src/components/trace/hat-graph-spacer.ts
+++ b/src/components/trace/hat-graph-spacer.ts
@@ -1,5 +1,5 @@
-import { css, customElement, LitElement, property, svg } from "lit-element";
-
+import { css, LitElement, svg } from "lit";
+import { customElement, property } from "lit/decorators";
 import { NODE_SIZE, SPACING } from "./hat-graph";
 
 @customElement("hat-graph-spacer")
diff --git a/src/components/trace/hat-graph.ts b/src/components/trace/hat-graph.ts
index c7e06ae663..93ecdf015e 100644
--- a/src/components/trace/hat-graph.ts
+++ b/src/components/trace/hat-graph.ts
@@ -1,12 +1,6 @@
-import {
-  css,
-  customElement,
-  html,
-  LitElement,
-  property,
-  svg,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+import { css, html, LitElement, svg } from "lit";
+import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 
 export const BRANCH_HEIGHT = 20;
 export const SPACING = 10;
diff --git a/src/components/trace/hat-logbook-note.ts b/src/components/trace/hat-logbook-note.ts
index 5d5b1f9df7..8df890bbf5 100644
--- a/src/components/trace/hat-logbook-note.ts
+++ b/src/components/trace/hat-logbook-note.ts
@@ -1,4 +1,5 @@
-import { LitElement, css, html, customElement } from "lit-element";
+import { css, html, LitElement } from "lit";
+import { customElement } from "lit/decorators";
 
 @customElement("hat-logbook-note")
 class HatLogbookNote extends LitElement {
diff --git a/src/components/trace/hat-script-graph.ts b/src/components/trace/hat-script-graph.ts
index cecb0feb28..aff37a1032 100644
--- a/src/components/trace/hat-script-graph.ts
+++ b/src/components/trace/hat-script-graph.ts
@@ -1,19 +1,4 @@
-import {
-  html,
-  LitElement,
-  property,
-  customElement,
-  PropertyValues,
-  css,
-} from "lit-element";
 import "@material/mwc-icon-button/mwc-icon-button";
-import { fireEvent } from "../../common/dom/fire_event";
-import "../ha-svg-icon";
-import {
-  AutomationTraceExtended,
-  ChooseActionTraceStep,
-  ConditionTraceStep,
-} from "../../data/trace";
 import {
   mdiAbTesting,
   mdiArrowUp,
@@ -32,9 +17,11 @@ import {
   mdiTimerOutline,
   mdiTrafficLight,
 } from "@mdi/js";
-import "./hat-graph-node";
-import { classMap } from "lit-html/directives/class-map";
-import { NODE_SIZE, SPACING, NodeInfo } from "./hat-graph";
+import { css, html, LitElement, PropertyValues } from "lit";
+import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { fireEvent } from "../../common/dom/fire_event";
+import { ensureArray } from "../../common/ensure-array";
 import { Condition, Trigger } from "../../data/automation";
 import {
   Action,
@@ -48,7 +35,14 @@ import {
   WaitAction,
   WaitForTriggerAction,
 } from "../../data/script";
-import { ensureArray } from "../../common/ensure-array";
+import {
+  AutomationTraceExtended,
+  ChooseActionTraceStep,
+  ConditionTraceStep,
+} from "../../data/trace";
+import "../ha-svg-icon";
+import { NodeInfo, NODE_SIZE, SPACING } from "./hat-graph";
+import "./hat-graph-node";
 import "./hat-graph-spacer";
 
 declare global {
@@ -63,6 +57,8 @@ class HatScriptGraph extends LitElement {
 
   @property({ attribute: false }) public selected;
 
+  @property() renderedNodes: Record<string, any> = {};
+
   @property() trackedNodes: Record<string, any> = {};
 
   private selectNode(config, path) {
@@ -74,8 +70,9 @@ class HatScriptGraph extends LitElement {
   private render_trigger(config: Trigger, i: number) {
     const path = `trigger/${i}`;
     const tracked = this.trace && path in this.trace.trace;
+    this.renderedNodes[path] = { config, path };
     if (tracked) {
-      this.trackedNodes[path] = { config, path };
+      this.trackedNodes[path] = this.renderedNodes[path];
     }
     return html`
       <hat-graph-node
@@ -96,8 +93,9 @@ class HatScriptGraph extends LitElement {
     const trace = this.trace.trace[path] as ConditionTraceStep[] | undefined;
     const track_path =
       trace?.[0].result === undefined ? 0 : trace[0].result.result ? 1 : 2;
+    this.renderedNodes[path] = { config, path };
     if (trace) {
-      this.trackedNodes[path] = { config, path };
+      this.trackedNodes[path] = this.renderedNodes[path];
     }
     return html`
       <hat-graph
@@ -172,8 +170,11 @@ class HatScriptGraph extends LitElement {
               const branch_path = `${path}/choose/${i}`;
               const track_this =
                 trace !== undefined && trace[0].result?.choice === i;
+              this.renderedNodes[branch_path] = { config, path: branch_path };
               if (track_this) {
-                this.trackedNodes[branch_path] = { config, path: branch_path };
+                this.trackedNodes[branch_path] = this.renderedNodes[
+                  branch_path
+                ];
               }
               return html`
                 <hat-graph>
@@ -411,8 +412,9 @@ class HatScriptGraph extends LitElement {
 
     const type = Object.keys(NODE_TYPES).find((key) => key in node) || "other";
     const nodeEl = NODE_TYPES[type].bind(this)(node, path);
+    this.renderedNodes[path] = { config: node, path };
     if (this.trace && path in this.trace.trace) {
-      this.trackedNodes[path] = { config: node, path };
+      this.trackedNodes[path] = this.renderedNodes[path];
     }
     return nodeEl;
   }
@@ -483,6 +485,7 @@ class HatScriptGraph extends LitElement {
 
   protected update(changedProps: PropertyValues<this>) {
     if (changedProps.has("trace")) {
+      this.renderedNodes = {};
       this.trackedNodes = {};
     }
     super.update(changedProps);
@@ -493,7 +496,7 @@ class HatScriptGraph extends LitElement {
 
     // Select first node if new trace loaded but no selection given.
     if (changedProps.has("trace")) {
-      const tracked = this.getTrackedNodes();
+      const tracked = this.trackedNodes;
       const paths = Object.keys(tracked);
 
       // If trace changed and we have no or an invalid selection, select first option.
@@ -509,42 +512,44 @@ class HatScriptGraph extends LitElement {
 
       if (this.trace) {
         const sortKeys = Object.keys(this.trace.trace);
-        const keys = Object.keys(this.trackedNodes).sort(
+        const keys = Object.keys(this.renderedNodes).sort(
           (a, b) => sortKeys.indexOf(a) - sortKeys.indexOf(b)
         );
-        const sortedTrackedNodes = keys.reduce((obj, key) => {
-          obj[key] = this.trackedNodes[key];
-          return obj;
-        }, {});
+        const sortedTrackedNodes = {};
+        const sortedRenderedNodes = {};
+        for (const key of keys) {
+          sortedRenderedNodes[key] = this.renderedNodes[key];
+          if (key in this.trackedNodes) {
+            sortedTrackedNodes[key] = this.trackedNodes[key];
+          }
+        }
+        this.renderedNodes = sortedRenderedNodes;
         this.trackedNodes = sortedTrackedNodes;
       }
     }
   }
 
-  public getTrackedNodes() {
-    return this.trackedNodes;
-  }
-
   public previousTrackedNode() {
-    const tracked = this.getTrackedNodes();
-    const nodes = Object.keys(tracked);
-
-    for (let i = nodes.indexOf(this.selected) - 1; i >= 0; i--) {
-      if (tracked[nodes[i]]) {
-        fireEvent(this, "graph-node-selected", tracked[nodes[i]]);
-        break;
-      }
+    const nodes = Object.keys(this.trackedNodes);
+    const prevIndex = nodes.indexOf(this.selected) - 1;
+    if (prevIndex >= 0) {
+      fireEvent(
+        this,
+        "graph-node-selected",
+        this.trackedNodes[nodes[prevIndex]]
+      );
     }
   }
 
   public nextTrackedNode() {
-    const tracked = this.getTrackedNodes();
-    const nodes = Object.keys(tracked);
-    for (let i = nodes.indexOf(this.selected) + 1; i < nodes.length; i++) {
-      if (tracked[nodes[i]]) {
-        fireEvent(this, "graph-node-selected", tracked[nodes[i]]);
-        break;
-      }
+    const nodes = Object.keys(this.trackedNodes);
+    const nextIndex = nodes.indexOf(this.selected) + 1;
+    if (nextIndex < nodes.length) {
+      fireEvent(
+        this,
+        "graph-node-selected",
+        this.trackedNodes[nodes[nextIndex]]
+      );
     }
   }
 
diff --git a/src/components/trace/hat-trace-timeline.ts b/src/components/trace/hat-trace-timeline.ts
index 49898be86f..c56332f30b 100644
--- a/src/components/trace/hat-trace-timeline.ts
+++ b/src/components/trace/hat-trace-timeline.ts
@@ -1,24 +1,3 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  PropertyValues,
-  TemplateResult,
-} from "lit-element";
-import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
-import {
-  AutomationTraceExtended,
-  ChooseActionTraceStep,
-  getDataFromPath,
-  TriggerTraceStep,
-  isTriggerPath,
-} from "../../data/trace";
-import { HomeAssistant } from "../../types";
-import "./ha-timeline";
-import type { HaTimeline } from "./ha-timeline";
 import {
   mdiAlertCircle,
   mdiCircle,
@@ -27,16 +6,36 @@ import {
   mdiProgressWrench,
   mdiRecordCircleOutline,
 } from "@mdi/js";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { customElement, property } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
+import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
+import relativeTime from "../../common/datetime/relative_time";
+import { fireEvent } from "../../common/dom/fire_event";
 import { LogbookEntry } from "../../data/logbook";
 import {
   ChooseAction,
   ChooseActionChoice,
   getActionType,
 } from "../../data/script";
-import relativeTime from "../../common/datetime/relative_time";
-import { fireEvent } from "../../common/dom/fire_event";
 import { describeAction } from "../../data/script_i18n";
-import { ifDefined } from "lit-html/directives/if-defined";
+import {
+  AutomationTraceExtended,
+  ChooseActionTraceStep,
+  getDataFromPath,
+  isTriggerPath,
+  TriggerTraceStep,
+} from "../../data/trace";
+import { HomeAssistant } from "../../types";
+import "./ha-timeline";
+import type { HaTimeline } from "./ha-timeline";
 
 const LOGBOOK_ENTRIES_BEFORE_FOLD = 2;
 
@@ -245,13 +244,15 @@ class ActionRenderer {
     try {
       data = getDataFromPath(this.trace.config, path);
     } catch (err) {
-      this.entries.push(
-        html`Unable to extract path ${path}. Download trace and report as bug`
+      this._renderEntry(
+        path,
+        `Unable to extract path ${path}. Download trace and report as bug`
       );
       return index + 1;
     }
 
-    const isTopLevel = path.split("/").length === 2;
+    const parts = path.split("/");
+    const isTopLevel = parts.length === 2;
 
     if (!isTopLevel && !actionType) {
       this._renderEntry(path, path.replace(/\//g, " "));
@@ -267,7 +268,16 @@ class ActionRenderer {
     }
 
     this._renderEntry(path, describeAction(this.hass, data, actionType));
-    return index + 1;
+
+    let i = index + 1;
+
+    for (; i < this.keys.length; i++) {
+      if (this.keys[i].split("/").length === parts.length) {
+        break;
+      }
+    }
+
+    return i;
   }
 
   private _handleTrigger(index: number, triggerStep: TriggerTraceStep): number {
@@ -303,7 +313,7 @@ class ActionRenderer {
     // +4: executed sequence
 
     const choosePath = this.keys[index];
-    const startLevel = choosePath.split("/").length - 1;
+    const startLevel = choosePath.split("/").length;
 
     const chooseTrace = this._getItem(index)[0] as ChooseActionTraceStep;
     const defaultExecuted = chooseTrace.result?.choice === "default";
@@ -568,7 +578,7 @@ export class HaAutomationTracer extends LitElement {
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       css`
         ha-timeline[lastItem].condition {
diff --git a/src/components/user/ha-person-badge.ts b/src/components/user/ha-person-badge.ts
index eead0784c2..9074ea7c9f 100644
--- a/src/components/user/ha-person-badge.ts
+++ b/src/components/user/ha-person-badge.ts
@@ -1,14 +1,7 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { styleMap } from "lit-html/directives/style-map";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { styleMap } from "lit/directives/style-map";
 import { Person } from "../../data/person";
 import { computeInitials } from "./ha-user-badge";
 
@@ -37,7 +30,7 @@ class PersonBadge extends LitElement {
     </div>`;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: contents;
diff --git a/src/components/user/ha-user-badge.ts b/src/components/user/ha-user-badge.ts
index cb978dd004..dc1692c35c 100644
--- a/src/components/user/ha-user-badge.ts
+++ b/src/components/user/ha-user-badge.ts
@@ -1,15 +1,14 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
+  PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { styleMap } from "lit-html/directives/style-map";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { styleMap } from "lit/directives/style-map";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { User } from "../../data/user";
 import { CurrentUser, HomeAssistant } from "../../types";
@@ -36,26 +35,26 @@ class UserBadge extends LitElement {
 
   @property({ attribute: false }) public user?: User | CurrentUser;
 
-  @internalProperty() private _personPicture?: string;
+  @state() private _personPicture?: string;
 
   private _personEntityId?: string;
 
-  protected updated(changedProps) {
-    super.updated(changedProps);
+  public willUpdate(changedProps: PropertyValues<this>) {
+    super.willUpdate(changedProps);
     if (changedProps.has("user")) {
       this._getPersonPicture();
       return;
     }
-    const oldHass = changedProps.get("hass");
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
     if (
       this._personEntityId &&
       oldHass &&
       this.hass.states[this._personEntityId] !==
         oldHass.states[this._personEntityId]
     ) {
-      const state = this.hass.states[this._personEntityId];
-      if (state) {
-        this._personPicture = state.attributes.entity_picture;
+      const entityState = this.hass.states[this._personEntityId];
+      if (entityState) {
+        this._personPicture = entityState.attributes.entity_picture;
       } else {
         this._getPersonPicture();
       }
@@ -102,7 +101,7 @@ class UserBadge extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: contents;
diff --git a/src/components/user/ha-user-picker.ts b/src/components/user/ha-user-picker.ts
index e8cd417bc6..89e779d3cc 100644
--- a/src/components/user/ha-user-picker.ts
+++ b/src/components/user/ha-user-picker.ts
@@ -3,14 +3,8 @@ import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-listbox/paper-listbox";
-import {
-  css,
-  CSSResult,
-  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 { fireEvent } from "../../common/dom/fire_event";
 import { compare } from "../../common/string/compare";
@@ -96,7 +90,7 @@ class HaUserPicker extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: inline-block;
diff --git a/src/components/user/ha-users-picker.ts b/src/components/user/ha-users-picker.ts
index 36a8012596..d0420b82dd 100644
--- a/src/components/user/ha-users-picker.ts
+++ b/src/components/user/ha-users-picker.ts
@@ -1,14 +1,7 @@
 import { mdiClose } from "@mdi/js";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { guard } from "lit-html/directives/guard";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import { guard } from "lit/directives/guard";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import { fetchUsers, User } from "../../data/user";
@@ -149,7 +142,7 @@ class HaUsersPickerLight extends LitElement {
     this._updateUsers(this._currentUsers.filter((user) => user !== userId));
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;
diff --git a/src/data/automation.ts b/src/data/automation.ts
index 21bd303a62..d6e308ccf3 100644
--- a/src/data/automation.ts
+++ b/src/data/automation.ts
@@ -241,12 +241,9 @@ let inititialAutomationEditorData: Partial<AutomationConfig> | undefined;
 export const getAutomationConfig = (hass: HomeAssistant, id: string) =>
   hass.callApi<AutomationConfig>("GET", `config/automation/config/${id}`);
 
-export const showAutomationEditor = (
-  el: HTMLElement,
-  data?: Partial<AutomationConfig>
-) => {
+export const showAutomationEditor = (data?: Partial<AutomationConfig>) => {
   inititialAutomationEditorData = data;
-  navigate(el, "/config/automation/edit/new");
+  navigate("/config/automation/edit/new");
 };
 
 export const getAutomationEditorInitData = () => {
diff --git a/src/data/automation_i18n.ts b/src/data/automation_i18n.ts
index 7b0caf842f..c819ee340e 100644
--- a/src/data/automation_i18n.ts
+++ b/src/data/automation_i18n.ts
@@ -1,4 +1,4 @@
-import { Trigger, Condition } from "./automation";
+import { Condition, Trigger } from "./automation";
 
 export const describeTrigger = (trigger: Trigger) =>
   `${trigger.platform} trigger`;
@@ -7,8 +7,8 @@ export const describeCondition = (condition: Condition) => {
   if (condition.alias) {
     return condition.alias;
   }
-  if (condition.condition === "template") {
-    return "Test a template";
+  if (["or", "and", "not"].includes(condition.condition)) {
+    return `multiple conditions using "${condition.condition}"`;
   }
   return `${condition.condition} condition`;
 };
diff --git a/src/data/config_flow.ts b/src/data/config_flow.ts
index 04ecff9915..caa61f48bc 100644
--- a/src/data/config_flow.ts
+++ b/src/data/config_flow.ts
@@ -13,6 +13,7 @@ export const DISCOVERY_SOURCES = [
   "zeroconf",
   "discovery",
   "mqtt",
+  "hassio",
 ];
 
 export const ATTENTION_SOURCES = ["reauth"];
diff --git a/src/data/device_automation.ts b/src/data/device_automation.ts
index 339bf61a16..4392fa529e 100644
--- a/src/data/device_automation.ts
+++ b/src/data/device_automation.ts
@@ -17,7 +17,7 @@ export interface DeviceAction extends DeviceAutomation {
 }
 
 export interface DeviceCondition extends DeviceAutomation {
-  condition: string;
+  condition: "device";
 }
 
 export interface DeviceTrigger extends DeviceAutomation {
diff --git a/src/data/entity.ts b/src/data/entity.ts
index 0ade5b2d15..829ee58c35 100644
--- a/src/data/entity.ts
+++ b/src/data/entity.ts
@@ -2,45 +2,3 @@ export const UNAVAILABLE = "unavailable";
 export const UNKNOWN = "unknown";
 
 export const UNAVAILABLE_STATES = [UNAVAILABLE, UNKNOWN];
-
-export const ENTITY_COMPONENT_DOMAINS = [
-  "air_quality",
-  "alarm_control_panel",
-  "alert",
-  "automation",
-  "binary_sensor",
-  "calendar",
-  "camera",
-  "counter",
-  "cover",
-  "dominos",
-  "fan",
-  "geo_location",
-  "group",
-  "image_processing",
-  "input_boolean",
-  "input_datetime",
-  "input_number",
-  "input_select",
-  "input_text",
-  "light",
-  "lock",
-  "mailbox",
-  "media_player",
-  "number",
-  "person",
-  "plant",
-  "remember_the_milk",
-  "remote",
-  "scene",
-  "script",
-  "sensor",
-  "switch",
-  "timer",
-  "utility_meter",
-  "vacuum",
-  "weather",
-  "wink",
-  "zha",
-  "zwave",
-];
diff --git a/src/data/hassio/addon.ts b/src/data/hassio/addon.ts
index e403d28ba7..902bd88816 100644
--- a/src/data/hassio/addon.ts
+++ b/src/data/hassio/addon.ts
@@ -2,7 +2,11 @@ import { atLeastVersion } from "../../common/config/version";
 import { HaFormSchema } from "../../components/ha-form/ha-form";
 import { HomeAssistant } from "../../types";
 import { SupervisorArch } from "../supervisor/supervisor";
-import { hassioApiResultExtractor, HassioResponse } from "./common";
+import {
+  extractApiErrorMessage,
+  hassioApiResultExtractor,
+  HassioResponse,
+} from "./common";
 
 export type AddonStage = "stable" | "experimental" | "deprecated";
 export type AddonAppArmour = "disable" | "default" | "profile";
@@ -186,16 +190,20 @@ export const setHassioAddonOption = async (
   data: HassioAddonSetOptionParams
 ) => {
   if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
-    await hass.callWS({
+    const response = await hass.callWS<HassioResponse<any>>({
       type: "supervisor/api",
       endpoint: `/addons/${slug}/options`,
       method: "post",
       data,
     });
-    return;
+
+    if (response.result === "error") {
+      throw Error(extractApiErrorMessage(response));
+    }
+    return response;
   }
 
-  await hass.callApi<HassioResponse<void>>(
+  return hass.callApi<HassioResponse<any>>(
     "POST",
     `hassio/addons/${slug}/options`,
     data
diff --git a/src/data/hassio/common.ts b/src/data/hassio/common.ts
index b6f7decb25..6c1c254a1c 100644
--- a/src/data/hassio/common.ts
+++ b/src/data/hassio/common.ts
@@ -3,7 +3,8 @@ import { HomeAssistant } from "../../types";
 
 export interface HassioResponse<T> {
   data: T;
-  result: "ok";
+  message?: string;
+  result: "ok" | "error";
 }
 
 export interface HassioStats {
diff --git a/src/data/hassio/snapshot.ts b/src/data/hassio/snapshot.ts
index 77df1be76e..ba34776228 100644
--- a/src/data/hassio/snapshot.ts
+++ b/src/data/hassio/snapshot.ts
@@ -2,12 +2,27 @@ import { atLeastVersion } from "../../common/config/version";
 import { HomeAssistant } from "../../types";
 import { hassioApiResultExtractor, HassioResponse } from "./common";
 
+export const friendlyFolderName = {
+  ssl: "SSL",
+  homeassistant: "Configuration",
+  "addons/local": "Local add-ons",
+  media: "Media",
+  share: "Share",
+};
+
+interface SnapshotContent {
+  homeassistant: boolean;
+  folders: string[];
+  addons: string[];
+}
+
 export interface HassioSnapshot {
   slug: string;
   date: string;
   name: string;
   type: "full" | "partial";
   protected: boolean;
+  content: SnapshotContent;
 }
 
 export interface HassioSnapshotDetail extends HassioSnapshot {
@@ -27,11 +42,10 @@ export interface HassioFullSnapshotCreateParams {
   name: string;
   password?: string;
 }
-export interface HassioPartialSnapshotCreateParams {
-  name: string;
+export interface HassioPartialSnapshotCreateParams
+  extends HassioFullSnapshotCreateParams {
   folders?: string[];
   addons?: string[];
-  password?: string;
   homeassistant?: boolean;
 }
 
diff --git a/src/data/history.ts b/src/data/history.ts
index 6bd1f3359d..636698caf7 100644
--- a/src/data/history.ts
+++ b/src/data/history.ts
@@ -4,7 +4,7 @@ import { computeStateDomain } from "../common/entity/compute_state_domain";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { LocalizeFunc } from "../common/translations/localize";
 import { HomeAssistant } from "../types";
-import { FrontendTranslationData } from "./translation";
+import { FrontendLocaleData } from "./translation";
 
 const DOMAINS_USE_LAST_UPDATED = ["climate", "humidifier", "water_heater"];
 const LINE_ATTRIBUTES_TO_KEEP = [
@@ -109,7 +109,7 @@ const equalState = (obj1: LineChartState, obj2: LineChartState) =>
 
 const processTimelineEntity = (
   localize: LocalizeFunc,
-  language: FrontendTranslationData,
+  language: FrontendLocaleData,
   states: HassEntity[]
 ): TimelineEntity => {
   const data: TimelineState[] = [];
@@ -224,12 +224,15 @@ export const computeHistory = (
 
     if (stateWithUnit) {
       unit = stateWithUnit.attributes.unit_of_measurement;
-    } else if (computeStateDomain(stateInfo[0]) === "climate") {
-      unit = hass.config.unit_system.temperature;
-    } else if (computeStateDomain(stateInfo[0]) === "water_heater") {
-      unit = hass.config.unit_system.temperature;
-    } else if (computeStateDomain(stateInfo[0]) === "humidifier") {
-      unit = "%";
+    } else {
+      unit = {
+        climate: hass.config.unit_system.temperature,
+        counter: "#",
+        humidifier: "%",
+        input_number: "#",
+        number: "#",
+        water_heater: hass.config.unit_system.temperature,
+      }[computeStateDomain(stateInfo[0])];
     }
 
     if (!unit) {
diff --git a/src/data/iconsets.ts b/src/data/iconsets.ts
index 2e6df41914..8b92ddbfa3 100644
--- a/src/data/iconsets.ts
+++ b/src/data/iconsets.ts
@@ -1,4 +1,4 @@
-import { clear, get, set, Store } from "idb-keyval";
+import { clear, get, set, createStore } from "idb-keyval";
 import { iconMetadata } from "../resources/icon-metadata";
 import { IconMeta } from "../types";
 
@@ -10,11 +10,11 @@ export interface Chunks {
   [key: string]: Promise<Icons>;
 }
 
-export const iconStore = new Store("hass-icon-db", "mdi-icon-store");
+export const iconStore = createStore("hass-icon-db", "mdi-icon-store");
 
 export const MDI_PREFIXES = ["mdi", "hass", "hassio", "hademo"];
 
-let toRead: Array<[string, (string) => void, () => void]> = [];
+let toRead: Array<[string, (iconPath: string) => void, () => void]> = [];
 
 // Queue up as many icon fetches in 1 transaction
 export const getIcon = (iconName: string) =>
@@ -25,15 +25,13 @@ export const getIcon = (iconName: string) =>
       return;
     }
 
-    const results: Array<[(string) => void, IDBRequest]> = [];
+    const results: Array<[(iconPath: string) => void, IDBRequest]> = [];
 
-    iconStore
-      ._withIDBStore("readonly", (store) => {
-        for (const [iconName_, resolve_] of toRead) {
-          results.push([resolve_, store.get(iconName_)]);
-        }
-        toRead = [];
-      })
+    iconStore("readonly", (store) => {
+      for (const [iconName_, resolve_] of toRead) {
+        results.push([resolve_, store.get(iconName_)]);
+      }
+    })
       .then(() => {
         for (const [resolve_, request] of results) {
           resolve_(request.result);
@@ -44,11 +42,13 @@ export const getIcon = (iconName: string) =>
         for (const [, , reject_] of toRead) {
           reject_();
         }
+      })
+      .finally(() => {
         toRead = [];
       });
   });
 
-export const findIconChunk = (icon): string => {
+export const findIconChunk = (icon: string): string => {
   let lastChunk: IconMeta;
   for (const chunk of iconMetadata.parts) {
     if (chunk.start !== undefined && icon < chunk.start) {
@@ -63,7 +63,7 @@ export const writeCache = async (chunks: Chunks) => {
   const keys = Object.keys(chunks);
   const iconsSets: Icons[] = await Promise.all(Object.values(chunks));
   // We do a batch opening the store just once, for (considerable) performance
-  iconStore._withIDBStore("readwrite", (store) => {
+  iconStore("readwrite", (store) => {
     iconsSets.forEach((icons, idx) => {
       Object.entries(icons).forEach(([name, path]) => {
         store.put(path, name);
@@ -73,14 +73,13 @@ export const writeCache = async (chunks: Chunks) => {
   });
 };
 
-export const checkCacheVersion = () => {
-  get("_version", iconStore).then((version) => {
-    if (!version) {
-      set("_version", iconMetadata.version, iconStore);
-    } else if (version !== iconMetadata.version) {
-      clear(iconStore).then(() =>
-        set("_version", iconMetadata.version, iconStore)
-      );
-    }
-  });
+export const checkCacheVersion = async () => {
+  const version = await get("_version", iconStore);
+
+  if (!version) {
+    set("_version", iconMetadata.version, iconStore);
+  } else if (version !== iconMetadata.version) {
+    await clear(iconStore);
+    set("_version", iconMetadata.version, iconStore);
+  }
 };
diff --git a/src/data/light.ts b/src/data/light.ts
index df67709783..9ef41c284f 100644
--- a/src/data/light.ts
+++ b/src/data/light.ts
@@ -51,9 +51,7 @@ export const lightSupportsDimming = (entity: LightEntity) =>
     modesSupportingDimming.includes(mode)
   );
 
-export const getLightCurrentModeRgbColor = (
-  entity: LightEntity
-): number[] | undefined =>
+export const getLightCurrentModeRgbColor = (entity: LightEntity): number[] =>
   entity.attributes.color_mode === LightColorModes.RGBWW
     ? entity.attributes.rgbww_color
     : entity.attributes.color_mode === LightColorModes.RGBW
diff --git a/src/data/main_window.ts b/src/data/main_window.ts
new file mode 100644
index 0000000000..2a6a6d3e30
--- /dev/null
+++ b/src/data/main_window.ts
@@ -0,0 +1 @@
+export const MAIN_WINDOW_NAME = "ha-main-window";
diff --git a/src/data/network.ts b/src/data/network.ts
new file mode 100644
index 0000000000..5bfb391c00
--- /dev/null
+++ b/src/data/network.ts
@@ -0,0 +1,43 @@
+import { HomeAssistant } from "../types";
+
+export interface IPv6ConfiguredAddress {
+  address: string;
+  flowinfo: number;
+  scope_id: number;
+  network_prefix: number;
+}
+
+export interface IPv4ConfiguredAddress {
+  address: string;
+  network_prefix: number;
+}
+
+export interface Adapter {
+  name: string;
+  enabled: boolean;
+  auto: boolean;
+  default: boolean;
+  ipv6: IPv6ConfiguredAddress[];
+  ipv4: IPv4ConfiguredAddress[];
+}
+
+export interface NetworkConfig {
+  adapters: Adapter[];
+  configured_adapters: string[];
+}
+
+export const getNetworkConfig = (hass: HomeAssistant) =>
+  hass.callWS<NetworkConfig>({
+    type: "network",
+  });
+
+export const setNetworkConfig = (
+  hass: HomeAssistant,
+  configured_adapters: string[]
+) =>
+  hass.callWS<string[]>({
+    type: "network/configure",
+    config: {
+      configured_adapters: configured_adapters,
+    },
+  });
diff --git a/src/data/scene.ts b/src/data/scene.ts
index 6b029412c4..5851c48584 100644
--- a/src/data/scene.ts
+++ b/src/data/scene.ts
@@ -20,12 +20,9 @@ export const SCENE_IGNORED_DOMAINS = [
 
 let inititialSceneEditorData: Partial<SceneConfig> | undefined;
 
-export const showSceneEditor = (
-  el: HTMLElement,
-  data?: Partial<SceneConfig>
-) => {
+export const showSceneEditor = (data?: Partial<SceneConfig>) => {
   inititialSceneEditorData = data;
-  navigate(el, "/config/scene/edit/new");
+  navigate("/config/scene/edit/new");
 };
 
 export const getSceneEditorInitData = () => {
@@ -39,6 +36,7 @@ export interface SceneEntity extends HassEntityBase {
 }
 
 export interface SceneConfig {
+  id?: string;
   name: string;
   icon?: string;
   entities: SceneEntities;
diff --git a/src/data/script.ts b/src/data/script.ts
index dc7858768b..559af3a4e3 100644
--- a/src/data/script.ts
+++ b/src/data/script.ts
@@ -182,12 +182,9 @@ export const deleteScript = (hass: HomeAssistant, objectId: string) =>
 
 let inititialScriptEditorData: Partial<ScriptConfig> | undefined;
 
-export const showScriptEditor = (
-  el: HTMLElement,
-  data?: Partial<ScriptConfig>
-) => {
+export const showScriptEditor = (data?: Partial<ScriptConfig>) => {
   inititialScriptEditorData = data;
-  navigate(el, "/config/script/edit/new");
+  navigate("/config/script/edit/new");
 };
 
 export const getScriptEditorInitData = () => {
diff --git a/src/data/script_i18n.ts b/src/data/script_i18n.ts
index 3b20e12865..338cb7c234 100644
--- a/src/data/script_i18n.ts
+++ b/src/data/script_i18n.ts
@@ -7,13 +7,13 @@ import { Condition } from "./automation";
 import { describeCondition, describeTrigger } from "./automation_i18n";
 import {
   ActionType,
-  getActionType,
-  DelayAction,
-  SceneAction,
-  WaitForTriggerAction,
   ActionTypes,
-  VariablesAction,
+  DelayAction,
   EventAction,
+  getActionType,
+  SceneAction,
+  VariablesAction,
+  WaitForTriggerAction,
 } from "./script";
 
 export const describeAction = <T extends ActionType>(
diff --git a/src/data/selector.ts b/src/data/selector.ts
index 7722d56de8..3bb2999877 100644
--- a/src/data/selector.ts
+++ b/src/data/selector.ts
@@ -72,8 +72,8 @@ export interface NumberSelector {
   number: {
     min: number;
     max: number;
-    step: number;
-    mode: "box" | "slider";
+    step?: number;
+    mode?: "box" | "slider";
     unit_of_measurement?: string;
   };
 }
diff --git a/src/data/timer.ts b/src/data/timer.ts
index a963d64ea3..cff601b60a 100644
--- a/src/data/timer.ts
+++ b/src/data/timer.ts
@@ -1,7 +1,11 @@
 import {
+  HassEntity,
   HassEntityAttributeBase,
   HassEntityBase,
 } from "home-assistant-js-websocket";
+import durationToSeconds from "../common/datetime/duration_to_seconds";
+import secondsToDuration from "../common/datetime/seconds_to_duration";
+import { computeStateDisplay } from "../common/entity/compute_state_display";
 import { HomeAssistant } from "../types";
 
 export type TimerEntity = HassEntityBase & {
@@ -55,3 +59,46 @@ export const deleteTimer = (hass: HomeAssistant, id: string) =>
     type: "timer/delete",
     timer_id: id,
   });
+
+export const timerTimeRemaining = (
+  stateObj: HassEntity
+): undefined | number => {
+  if (!stateObj.attributes.remaining) {
+    return undefined;
+  }
+  let timeRemaining = durationToSeconds(stateObj.attributes.remaining);
+
+  if (stateObj.state === "active") {
+    const now = new Date().getTime();
+    const madeActive = new Date(stateObj.last_changed).getTime();
+    timeRemaining = Math.max(timeRemaining - (now - madeActive) / 1000, 0);
+  }
+
+  return timeRemaining;
+};
+
+export const computeDisplayTimer = (
+  hass: HomeAssistant,
+  stateObj: HassEntity,
+  timeRemaining?: number
+): string | null => {
+  if (!stateObj) {
+    return null;
+  }
+
+  if (stateObj.state === "idle" || timeRemaining === 0) {
+    return computeStateDisplay(hass.localize, stateObj, hass.locale);
+  }
+
+  let display = secondsToDuration(timeRemaining || 0);
+
+  if (stateObj.state === "paused") {
+    display = `${display} (${computeStateDisplay(
+      hass.localize,
+      stateObj,
+      hass.locale
+    )})`;
+  }
+
+  return display;
+};
diff --git a/src/data/trace.ts b/src/data/trace.ts
index cf5f18e6c2..a8d294454d 100644
--- a/src/data/trace.ts
+++ b/src/data/trace.ts
@@ -1,5 +1,5 @@
 import { strStartsWith } from "../common/string/starts-with";
-import { HomeAssistant, Context } from "../types";
+import { Context, HomeAssistant } from "../types";
 import {
   BlueprintAutomationConfig,
   ManualAutomationConfig,
diff --git a/src/data/translation.ts b/src/data/translation.ts
index d2fc74e560..65f98a059d 100644
--- a/src/data/translation.ts
+++ b/src/data/translation.ts
@@ -10,14 +10,22 @@ export enum NumberFormat {
   none = "none",
 }
 
-export interface FrontendTranslationData {
+export enum TimeFormat {
+  language = "language",
+  system = "system",
+  am_pm = "12",
+  twenty_four = "24",
+}
+
+export interface FrontendLocaleData {
   language: string;
   number_format: NumberFormat;
+  time_format: TimeFormat;
 }
 
 declare global {
   interface FrontendUserData {
-    language: FrontendTranslationData;
+    language: FrontendLocaleData;
   }
 }
 
@@ -36,7 +44,7 @@ export const fetchTranslationPreferences = (hass: HomeAssistant) =>
 
 export const saveTranslationPreferences = (
   hass: HomeAssistant,
-  data: FrontendTranslationData
+  data: FrontendLocaleData
 ) => saveFrontendUserData(hass.connection, "language", data);
 
 export const getHassTranslations = async (
diff --git a/src/data/weather.ts b/src/data/weather.ts
index e15844c9f4..3c27c13418 100644
--- a/src/data/weather.ts
+++ b/src/data/weather.ts
@@ -9,8 +9,8 @@ import {
   HassEntityAttributeBase,
   HassEntityBase,
 } from "home-assistant-js-websocket";
-import { css, html, svg, SVGTemplateResult, TemplateResult } from "lit-element";
-import { styleMap } from "lit-html/directives/style-map";
+import { css, html, svg, SVGTemplateResult, TemplateResult } from "lit";
+import { styleMap } from "lit/directives/style-map";
 import { formatNumber } from "../common/string/format_number";
 import "../components/ha-icon";
 import "../components/ha-svg-icon";
diff --git a/src/data/ws-themes.ts b/src/data/ws-themes.ts
index d758c27b1a..99a44064f9 100644
--- a/src/data/ws-themes.ts
+++ b/src/data/ws-themes.ts
@@ -1,6 +1,6 @@
 import { Connection, createCollection } from "home-assistant-js-websocket";
 
-export interface Theme {
+export interface ThemeVars {
   // Incomplete
   "primary-color": string;
   "text-primary-color": string;
@@ -8,10 +8,20 @@ export interface Theme {
   [key: string]: string;
 }
 
+export type Theme = ThemeVars & {
+  modes?: {
+    light?: ThemeVars;
+    dark?: ThemeVars;
+  };
+};
+
 export interface Themes {
   default_theme: string;
   default_dark_theme: string | null;
   themes: Record<string, Theme>;
+  // Currently effective dark mode. Will never be undefined. If user selected "auto"
+  // in theme picker, this property will still contain either true or false based on
+  // what has been determined via system preferences and support from the selected theme.
   darkMode: boolean;
 }
 
diff --git a/src/data/zone.ts b/src/data/zone.ts
index 92151c4a58..737ae07dd8 100644
--- a/src/data/zone.ts
+++ b/src/data/zone.ts
@@ -1,8 +1,12 @@
 import { navigate } from "../common/navigate";
+import {
+  DEFAULT_ACCENT_COLOR,
+  DEFAULT_PRIMARY_COLOR,
+} from "../resources/ha-style";
 import { HomeAssistant } from "../types";
 
-export const defaultRadiusColor = "#FF9800";
-export const homeRadiusColor = "#03a9f4";
+export const defaultRadiusColor = DEFAULT_ACCENT_COLOR;
+export const homeRadiusColor = DEFAULT_PRIMARY_COLOR;
 export const passiveRadiusColor = "#9b9b9b";
 
 export interface Zone {
@@ -52,12 +56,9 @@ export const deleteZone = (hass: HomeAssistant, zoneId: string) =>
 
 let inititialZoneEditorData: Partial<ZoneMutableParams> | undefined;
 
-export const showZoneEditor = (
-  el: HTMLElement,
-  data?: Partial<ZoneMutableParams>
-) => {
+export const showZoneEditor = (data?: Partial<ZoneMutableParams>) => {
   inititialZoneEditorData = data;
-  navigate(el, "/config/zone/new");
+  navigate("/config/zone/new");
 };
 
 export const getZoneEditorInitData = () => {
diff --git a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
index ece523c8fa..bd1f6bbcd1 100644
--- a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
+++ b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
@@ -1,14 +1,6 @@
 import "@material/mwc-button/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 { fireEvent } from "../../common/dom/fire_event";
 import { computeRTLDirection } from "../../common/util/compute_rtl";
 import "../../components/ha-circular-progress";
@@ -28,15 +20,15 @@ import { ConfigEntrySystemOptionsDialogParams } from "./show-dialog-config-entry
 class DialogConfigEntrySystemOptions extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _disableNewEntities!: boolean;
+  @state() private _disableNewEntities!: boolean;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _params?: ConfigEntrySystemOptionsDialogParams;
+  @state() private _params?: ConfigEntrySystemOptionsDialogParams;
 
-  @internalProperty() private _loading = false;
+  @state() private _loading = false;
 
-  @internalProperty() private _submitting = false;
+  @state() private _submitting = false;
 
   public async showDialog(
     params: ConfigEntrySystemOptionsDialogParams
@@ -154,7 +146,7 @@ class DialogConfigEntrySystemOptions extends LitElement {
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/dialogs/config-flow/dialog-data-entry-flow.ts b/src/dialogs/config-flow/dialog-data-entry-flow.ts
index c4cb084fab..abe31c81be 100644
--- a/src/dialogs/config-flow/dialog-data-entry-flow.ts
+++ b/src/dialogs/config-flow/dialog-data-entry-flow.ts
@@ -3,14 +3,13 @@ import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResultArray,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeRTL } from "../../common/util/compute_rtl";
 import "../../components/ha-circular-progress";
@@ -41,9 +40,9 @@ import "./step-flow-create-entry";
 import "./step-flow-external";
 import "./step-flow-form";
 import "./step-flow-loading";
+import "./step-flow-pick-flow";
 import "./step-flow-pick-handler";
 import "./step-flow-progress";
-import "./step-flow-pick-flow";
 
 let instance = 0;
 
@@ -61,27 +60,27 @@ declare global {
 class DataEntryFlowDialog extends LitElement {
   public hass!: HomeAssistant;
 
-  @internalProperty() private _params?: DataEntryFlowDialogParams;
+  @state() private _params?: DataEntryFlowDialogParams;
 
-  @internalProperty() private _loading = true;
+  @state() private _loading = true;
 
   private _instance = instance;
 
-  @internalProperty() private _step:
+  @state() private _step:
     | DataEntryFlowStep
     | undefined
     // Null means we need to pick a config flow
     | null;
 
-  @internalProperty() private _devices?: DeviceRegistryEntry[];
+  @state() private _devices?: DeviceRegistryEntry[];
 
-  @internalProperty() private _areas?: AreaRegistryEntry[];
+  @state() private _areas?: AreaRegistryEntry[];
 
-  @internalProperty() private _handlers?: string[];
+  @state() private _handlers?: string[];
 
-  @internalProperty() private _handler?: string;
+  @state() private _handler?: string;
 
-  @internalProperty() private _flowsInProgress?: DataEntryFlowProgress[];
+  @state() private _flowsInProgress?: DataEntryFlowProgress[];
 
   private _unsubAreas?: UnsubscribeFunc;
 
@@ -400,7 +399,7 @@ class DataEntryFlowDialog extends LitElement {
     this._step = step;
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/dialogs/config-flow/show-dialog-config-flow.ts b/src/dialogs/config-flow/show-dialog-config-flow.ts
index 452d83cb22..fc49d0bf1f 100644
--- a/src/dialogs/config-flow/show-dialog-config-flow.ts
+++ b/src/dialogs/config-flow/show-dialog-config-flow.ts
@@ -1,6 +1,5 @@
-import { html } from "lit-element";
+import { html } from "lit";
 import { caseInsensitiveCompare } from "../../common/string/compare";
-import { localizeKey } from "../../common/translations/localize";
 import {
   createConfigFlow,
   deleteConfigFlow,
@@ -52,8 +51,7 @@ export const showConfigFlowDialog = (
     deleteFlow: deleteConfigFlow,
 
     renderAbortDescription(hass, step) {
-      const description = localizeKey(
-        hass.localize,
+      const description = hass.localize(
         `component.${step.handler}.config.abort.${step.reason}`,
         step.description_placeholders
       );
@@ -74,8 +72,7 @@ export const showConfigFlowDialog = (
     },
 
     renderShowFormStepDescription(hass, step) {
-      const description = localizeKey(
-        hass.localize,
+      const description = hass.localize(
         `component.${step.handler}.config.step.${step.step_id}.description`,
         step.description_placeholders
       );
@@ -108,8 +105,7 @@ export const showConfigFlowDialog = (
     },
 
     renderExternalStepDescription(hass, step) {
-      const description = localizeKey(
-        hass.localize,
+      const description = hass.localize(
         `component.${step.handler}.config.${step.step_id}.description`,
         step.description_placeholders
       );
@@ -133,8 +129,7 @@ export const showConfigFlowDialog = (
     },
 
     renderCreateEntryDescription(hass, step) {
-      const description = localizeKey(
-        hass.localize,
+      const description = hass.localize(
         `component.${step.handler}.config.create_entry.${
           step.description || "default"
         }`,
@@ -170,8 +165,7 @@ export const showConfigFlowDialog = (
     },
 
     renderShowFormProgressDescription(hass, step) {
-      const description = localizeKey(
-        hass.localize,
+      const description = hass.localize(
         `component.${step.handler}.config.progress.${step.progress_action}`,
         step.description_placeholders
       );
diff --git a/src/dialogs/config-flow/show-dialog-data-entry-flow.ts b/src/dialogs/config-flow/show-dialog-data-entry-flow.ts
index 23c3961378..1f48db7e77 100644
--- a/src/dialogs/config-flow/show-dialog-data-entry-flow.ts
+++ b/src/dialogs/config-flow/show-dialog-data-entry-flow.ts
@@ -1,4 +1,4 @@
-import { TemplateResult } from "lit-html";
+import { TemplateResult } from "lit";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HaFormSchema } from "../../components/ha-form/ha-form";
 import {
diff --git a/src/dialogs/config-flow/show-dialog-options-flow.ts b/src/dialogs/config-flow/show-dialog-options-flow.ts
index 1113b939a6..c138272920 100644
--- a/src/dialogs/config-flow/show-dialog-options-flow.ts
+++ b/src/dialogs/config-flow/show-dialog-options-flow.ts
@@ -1,5 +1,4 @@
-import { html } from "lit-element";
-import { localizeKey } from "../../common/translations/localize";
+import { html } from "lit";
 import { ConfigEntry } from "../../data/config_entries";
 import {
   createOptionsFlow,
@@ -43,8 +42,7 @@ export const showOptionsFlowDialog = (
       deleteFlow: deleteOptionsFlow,
 
       renderAbortDescription(hass, step) {
-        const description = localizeKey(
-          hass.localize,
+        const description = hass.localize(
           `component.${configEntry.domain}.options.abort.${step.reason}`,
           step.description_placeholders
         );
@@ -69,8 +67,7 @@ export const showOptionsFlowDialog = (
       },
 
       renderShowFormStepDescription(hass, step) {
-        const description = localizeKey(
-          hass.localize,
+        const description = hass.localize(
           `component.${configEntry.domain}.options.step.${step.step_id}.description`,
           step.description_placeholders
         );
diff --git a/src/dialogs/config-flow/step-flow-abort.ts b/src/dialogs/config-flow/step-flow-abort.ts
index 7309ff2226..b581717f8b 100644
--- a/src/dialogs/config-flow/step-flow-abort.ts
+++ b/src/dialogs/config-flow/step-flow-abort.ts
@@ -1,12 +1,6 @@
 import "@material/mwc-button";
-import {
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { DataEntryFlowStepAbort } from "../../data/data_entry_flow";
 import { HomeAssistant } from "../../types";
@@ -47,7 +41,7 @@ class StepFlowAbort extends LitElement {
     fireEvent(this, "flow-update", { step: undefined });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return configFlowContentStyles;
   }
 }
diff --git a/src/dialogs/config-flow/step-flow-create-entry.ts b/src/dialogs/config-flow/step-flow-create-entry.ts
index 46b67ab1a6..2d08078c88 100644
--- a/src/dialogs/config-flow/step-flow-create-entry.ts
+++ b/src/dialogs/config-flow/step-flow-create-entry.ts
@@ -2,15 +2,8 @@ import "@material/mwc-button";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-import {
-  css,
-  CSSResultArray,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-area-picker";
 import { DataEntryFlowStepCreateEntry } from "../../data/data_entry_flow";
@@ -109,7 +102,7 @@ class StepFlowCreateEntry extends LitElement {
     }
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       configFlowContentStyles,
       css`
diff --git a/src/dialogs/config-flow/step-flow-external.ts b/src/dialogs/config-flow/step-flow-external.ts
index 3f9c84bbc7..419d9bcde5 100644
--- a/src/dialogs/config-flow/step-flow-external.ts
+++ b/src/dialogs/config-flow/step-flow-external.ts
@@ -1,13 +1,6 @@
 import "@material/mwc-button";
-import {
-  css,
-  CSSResultArray,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { DataEntryFlowStepExternal } from "../../data/data_entry_flow";
 import { HomeAssistant } from "../../types";
 import { FlowConfig } from "./show-dialog-data-entry-flow";
@@ -48,7 +41,7 @@ class StepFlowExternal extends LitElement {
     window.open(this.step.url);
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       configFlowContentStyles,
       css`
diff --git a/src/dialogs/config-flow/step-flow-form.ts b/src/dialogs/config-flow/step-flow-form.ts
index 5c569873d6..403eccb3c8 100644
--- a/src/dialogs/config-flow/step-flow-form.ts
+++ b/src/dialogs/config-flow/step-flow-form.ts
@@ -2,14 +2,13 @@ import "@material/mwc-button";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
   css,
-  CSSResultArray,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-circular-progress";
 import "../../components/ha-form/ha-form";
@@ -183,7 +182,7 @@ class StepFlowForm extends LitElement {
   private _errorCallback = (error: string) =>
     this.flowConfig.renderShowFormStepFieldError(this.hass, this.step, error);
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       configFlowContentStyles,
       css`
diff --git a/src/dialogs/config-flow/step-flow-loading.ts b/src/dialogs/config-flow/step-flow-loading.ts
index 8b4d28735b..bc10d71c7a 100644
--- a/src/dialogs/config-flow/step-flow-loading.ts
+++ b/src/dialogs/config-flow/step-flow-loading.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 "../../components/ha-circular-progress";
 
 @customElement("step-flow-loading")
@@ -22,7 +15,7 @@ class StepFlowLoading extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .init-spinner {
         padding: 50px 100px;
diff --git a/src/dialogs/config-flow/step-flow-pick-flow.ts b/src/dialogs/config-flow/step-flow-pick-flow.ts
index b75f2e3b38..0e407fad89 100644
--- a/src/dialogs/config-flow/step-flow-pick-flow.ts
+++ b/src/dialogs/config-flow/step-flow-pick-flow.ts
@@ -1,15 +1,8 @@
-import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item";
+import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
-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 { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-icon-next";
 import { localizeConfigFlowTitle } from "../../data/config_flow";
@@ -89,7 +82,7 @@ class StepFlowPickFlow extends LitElement {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       configFlowContentStyles,
       css`
diff --git a/src/dialogs/config-flow/step-flow-pick-handler.ts b/src/dialogs/config-flow/step-flow-pick-handler.ts
index 660416a71e..421478857c 100644
--- a/src/dialogs/config-flow/step-flow-pick-handler.ts
+++ b/src/dialogs/config-flow/step-flow-pick-handler.ts
@@ -1,18 +1,10 @@
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
 import Fuse from "fuse.js";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { styleMap } from "lit-html/directives/style-map";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../common/search/search-input";
@@ -46,7 +38,7 @@ class StepFlowPickHandler extends LitElement {
 
   @property() public showAdvanced?: boolean;
 
-  @internalProperty() private _filter?: string;
+  @state() private _filter?: string;
 
   private _width?: number;
 
@@ -175,7 +167,7 @@ class StepFlowPickHandler extends LitElement {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       configFlowContentStyles,
       css`
diff --git a/src/dialogs/config-flow/step-flow-progress.ts b/src/dialogs/config-flow/step-flow-progress.ts
index fc12f9b5c5..3235ec55cb 100644
--- a/src/dialogs/config-flow/step-flow-progress.ts
+++ b/src/dialogs/config-flow/step-flow-progress.ts
@@ -1,13 +1,6 @@
 import "@material/mwc-button";
-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 "../../components/ha-circular-progress";
 import { DataEntryFlowStepProgress } from "../../data/data_entry_flow";
 import { HomeAssistant } from "../../types";
@@ -39,7 +32,7 @@ class StepFlowProgress extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       configFlowContentStyles,
       css`
diff --git a/src/dialogs/config-flow/styles.ts b/src/dialogs/config-flow/styles.ts
index b6e2b8d831..008fed7c1b 100644
--- a/src/dialogs/config-flow/styles.ts
+++ b/src/dialogs/config-flow/styles.ts
@@ -1,4 +1,4 @@
-import { css } from "lit-element";
+import { css } from "lit";
 
 export const configFlowContentStyles = css`
   h2 {
diff --git a/src/dialogs/domain-toggler/dialog-domain-toggler.ts b/src/dialogs/domain-toggler/dialog-domain-toggler.ts
index 4b2aa3aea4..82307abfe1 100644
--- a/src/dialogs/domain-toggler/dialog-domain-toggler.ts
+++ b/src/dialogs/domain-toggler/dialog-domain-toggler.ts
@@ -1,13 +1,6 @@
 import "@material/mwc-button/mwc-button";
-import {
-  css,
-  CSSResultArray,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { createCloseHeading } from "../../components/ha-dialog";
 import "../../components/ha-formfield";
@@ -24,7 +17,7 @@ class DomainTogglerDialog
   implements HassDialog<HaDomainTogglerDialogParams> {
   public hass!: HomeAssistant;
 
-  @internalProperty() private _params?: HaDomainTogglerDialogParams;
+  @state() private _params?: HaDomainTogglerDialogParams;
 
   public showDialog(params: HaDomainTogglerDialogParams): void {
     this._params = params;
@@ -91,7 +84,7 @@ class DomainTogglerDialog
     ev.currentTarget.blur();
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/dialogs/generic/dialog-box.ts b/src/dialogs/generic/dialog-box.ts
index 3dcbbd37f8..4fc1c09cde 100644
--- a/src/dialogs/generic/dialog-box.ts
+++ b/src/dialogs/generic/dialog-box.ts
@@ -1,16 +1,8 @@
 import "@material/mwc-button/mwc-button";
 import "@polymer/paper-input/paper-input";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  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, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-dialog";
 import "../../components/ha-switch";
@@ -23,9 +15,9 @@ import { DialogBoxParams } from "./show-dialog-box";
 class DialogBox extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _params?: DialogBoxParams;
+  @state() private _params?: DialogBoxParams;
 
-  @internalProperty() private _value?: string;
+  @state() private _value?: string;
 
   public async showDialog(params: DialogBoxParams): Promise<void> {
     this._params = params;
@@ -57,7 +49,7 @@ class DialogBox extends LitElement {
         open
         ?scrimClickAction=${confirmPrompt}
         ?escapeKeyAction=${confirmPrompt}
-        @closing=${this._dialogClosed}
+        @closed=${this._dialogClosed}
         defaultAction="ignore"
         .heading=${this._params.title
           ? this._params.title
@@ -154,7 +146,7 @@ class DialogBox extends LitElement {
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/dialogs/generic/show-dialog-box.ts b/src/dialogs/generic/show-dialog-box.ts
index bd3210c5fd..1350c91d18 100644
--- a/src/dialogs/generic/show-dialog-box.ts
+++ b/src/dialogs/generic/show-dialog-box.ts
@@ -1,4 +1,4 @@
-import { TemplateResult } from "lit-html";
+import { TemplateResult } from "lit";
 import { fireEvent } from "../../common/dom/fire_event";
 
 interface BaseDialogBoxParams {
diff --git a/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts b/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts
index 82dd0bc958..f8709344e3 100644
--- a/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts
+++ b/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts
@@ -4,18 +4,15 @@ import Cropper from "cropperjs";
 import cropperCss from "cropperjs/dist/cropper.css";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
   unsafeCSS,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+} from "lit";
+import { customElement, property, state, query } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import "../../components/ha-dialog";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
@@ -25,9 +22,9 @@ import { HaImageCropperDialogParams } from "./show-image-cropper-dialog";
 export class HaImagecropperDialog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _params?: HaImageCropperDialogParams;
+  @state() private _params?: HaImageCropperDialogParams;
 
-  @internalProperty() private _open = false;
+  @state() private _open = false;
 
   @query("img", true) private _image!: HTMLImageElement;
 
@@ -104,7 +101,7 @@ export class HaImagecropperDialog extends LitElement {
     );
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/dialogs/make-dialog-manager.ts b/src/dialogs/make-dialog-manager.ts
index bc32b08050..2acfe6473f 100644
--- a/src/dialogs/make-dialog-manager.ts
+++ b/src/dialogs/make-dialog-manager.ts
@@ -1,4 +1,5 @@
 import { HASSDomEvent, ValidHassDomEvent } from "../common/dom/fire_event";
+import { mainWindow } from "../common/dom/get_main_window";
 import { ProvideHassElement } from "../mixins/provide-hass-lit-mixin";
 
 declare global {
@@ -50,6 +51,12 @@ export const showDialog = async (
 ) => {
   if (!(dialogTag in LOADED)) {
     if (!dialogImport) {
+      if (__DEV__) {
+        // eslint-disable-next-line
+        console.warn(
+          "Asked to show dialog that's not loaded and can't be imported"
+        );
+      }
       return;
     }
     LOADED[dialogTag] = dialogImport().then(() => {
@@ -61,25 +68,26 @@ export const showDialog = async (
   }
 
   if (addHistory) {
-    top.history.replaceState(
+    mainWindow.history.replaceState(
       {
         dialog: dialogTag,
         open: false,
         oldState:
-          top.history.state?.open && top.history.state?.dialog !== dialogTag
-            ? top.history.state
+          mainWindow.history.state?.open &&
+          mainWindow.history.state?.dialog !== dialogTag
+            ? mainWindow.history.state
             : null,
       },
       ""
     );
     try {
-      top.history.pushState(
+      mainWindow.history.pushState(
         { dialog: dialogTag, dialogParams: dialogParams, open: true },
         ""
       );
     } catch (err) {
       // dialogParams could not be cloned, probably contains callback
-      top.history.pushState(
+      mainWindow.history.pushState(
         { dialog: dialogTag, dialogParams: null, open: true },
         ""
       );
@@ -90,14 +98,17 @@ export const showDialog = async (
 };
 
 export const replaceDialog = () => {
-  top.history.replaceState({ ...top.history.state, replaced: true }, "");
+  mainWindow.history.replaceState(
+    { ...mainWindow.history.state, replaced: true },
+    ""
+  );
 };
 
 export const closeDialog = async (dialogTag: string): Promise<boolean> => {
   if (!(dialogTag in LOADED)) {
     return true;
   }
-  const dialogElement = await LOADED[dialogTag];
+  const dialogElement: HassDialog = await LOADED[dialogTag];
   if (dialogElement.closeDialog) {
     return dialogElement.closeDialog() !== false;
   }
diff --git a/src/dialogs/more-info/controls/more-info-automation.ts b/src/dialogs/more-info/controls/more-info-automation.ts
index 293b56f6ad..0584b977ed 100644
--- a/src/dialogs/more-info/controls/more-info-automation.ts
+++ b/src/dialogs/more-info/controls/more-info-automation.ts
@@ -1,14 +1,7 @@
 import "@material/mwc-button";
 import { HassEntity } 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 "../../../components/ha-relative-time";
 import { triggerAutomationActions } from "../../../data/automation";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
@@ -50,7 +43,7 @@ class MoreInfoAutomation extends LitElement {
     triggerAutomationActions(this.hass, this.stateObj!.entity_id);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .flex {
         display: flex;
diff --git a/src/dialogs/more-info/controls/more-info-camera.ts b/src/dialogs/more-info/controls/more-info-camera.ts
index 64808f950f..bc571b4bc8 100644
--- a/src/dialogs/more-info/controls/more-info-camera.ts
+++ b/src/dialogs/more-info/controls/more-info-camera.ts
@@ -2,16 +2,15 @@ import "@polymer/paper-checkbox/paper-checkbox";
 import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { supportsFeature } from "../../../common/entity/supports-feature";
+} from "lit";
+import { property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-camera-stream";
 import {
   CameraEntity,
@@ -27,9 +26,9 @@ class MoreInfoCamera extends LitElement {
 
   @property() public stateObj?: CameraEntity;
 
-  @internalProperty() private _cameraPrefs?: CameraPreferences;
+  @state() private _cameraPrefs?: CameraPreferences;
 
-  @internalProperty() private _attached = false;
+  @state() private _attached = false;
 
   public connectedCallback() {
     super.connectedCallback();
@@ -113,15 +112,19 @@ class MoreInfoCamera extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
+      :host {
+        display: block;
+        position: relative;
+      }
       paper-checkbox {
         position: absolute;
         top: 0;
         right: 0;
         background-color: var(--secondary-background-color);
         padding: 5px;
-        border-bottom-left-radius: 6px;
+        border-bottom-left-radius: 4px;
       }
     `;
   }
diff --git a/src/dialogs/more-info/controls/more-info-climate.ts b/src/dialogs/more-info/controls/more-info-climate.ts
index 02d48e8a1b..7d21934698 100644
--- a/src/dialogs/more-info/controls/more-info-climate.ts
+++ b/src/dialogs/more-info/controls/more-info-climate.ts
@@ -3,14 +3,14 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+} from "lit";
+import { property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
@@ -437,7 +437,7 @@ class MoreInfoClimate extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         color: var(--primary-text-color);
diff --git a/src/dialogs/more-info/controls/more-info-counter.ts b/src/dialogs/more-info/controls/more-info-counter.ts
index 330f504f50..3e08b0e522 100644
--- a/src/dialogs/more-info/controls/more-info-counter.ts
+++ b/src/dialogs/more-info/controls/more-info-counter.ts
@@ -1,14 +1,7 @@
 import "@material/mwc-button";
 import { HassEntity } 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 { UNAVAILABLE_STATES } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 
@@ -59,7 +52,7 @@ class MoreInfoCounter extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .actions {
         margin: 8px 0;
diff --git a/src/dialogs/more-info/controls/more-info-cover.js b/src/dialogs/more-info/controls/more-info-cover.js
index 4e26d57e86..6431959047 100644
--- a/src/dialogs/more-info/controls/more-info-cover.js
+++ b/src/dialogs/more-info/controls/more-info-cover.js
@@ -65,6 +65,7 @@ class MoreInfoCover extends LocalizeMixin(PolymerElement) {
         </div>
       </div>
       <ha-attributes
+        hass="[[hass]]"
         state-obj="[[stateObj]]"
         extra-filters="current_position,current_tilt_position"
       ></ha-attributes>
diff --git a/src/dialogs/more-info/controls/more-info-default.ts b/src/dialogs/more-info/controls/more-info-default.ts
index 443b39ed43..381454bf9d 100644
--- a/src/dialogs/more-info/controls/more-info-default.ts
+++ b/src/dialogs/more-info/controls/more-info-default.ts
@@ -1,11 +1,6 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import {
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../../../components/ha-attributes";
 import { HomeAssistant } from "../../../types";
 
@@ -20,7 +15,10 @@ class MoreInfoDefault extends LitElement {
       return html``;
     }
 
-    return html` <ha-attributes .stateObj=${this.stateObj}></ha-attributes> `;
+    return html`<ha-attributes
+      .hass=${this.hass}
+      .stateObj=${this.stateObj}
+    ></ha-attributes>`;
   }
 }
 
diff --git a/src/dialogs/more-info/controls/more-info-fan.js b/src/dialogs/more-info/controls/more-info-fan.js
index 93bbe59396..5ef80331c1 100644
--- a/src/dialogs/more-info/controls/more-info-fan.js
+++ b/src/dialogs/more-info/controls/more-info-fan.js
@@ -11,9 +11,9 @@ import "../../../components/ha-icon-button";
 import "../../../components/ha-labeled-slider";
 import "../../../components/ha-paper-dropdown-menu";
 import "../../../components/ha-switch";
+import { SUPPORT_SET_SPEED } from "../../../data/fan";
 import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
-import { SUPPORT_SET_SPEED } from "../../../data/fan";
 
 /*
  * @appliesMixin EventsMixin
@@ -113,6 +113,7 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
       </div>
 
       <ha-attributes
+        hass="[[hass]]"
         state-obj="[[stateObj]]"
         extra-filters="percentage_step,speed,preset_mode,preset_modes,speed_list,percentage,oscillating,direction"
       ></ha-attributes>
diff --git a/src/dialogs/more-info/controls/more-info-group.ts b/src/dialogs/more-info/controls/more-info-group.ts
index 615bf3314d..c8b2e7bdbb 100644
--- a/src/dialogs/more-info/controls/more-info-group.ts
+++ b/src/dialogs/more-info/controls/more-info-group.ts
@@ -1,13 +1,13 @@
 import { HassEntity } from "home-assistant-js-websocket";
 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 { dynamicElement } from "../../../common/dom/dynamic-element-directive";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { GroupEntity } from "../../../data/group";
@@ -23,9 +23,9 @@ class MoreInfoGroup extends LitElement {
 
   @property() public stateObj?: GroupEntity;
 
-  @internalProperty() private _groupDomainStateObj?: HassEntity;
+  @state() private _groupDomainStateObj?: HassEntity;
 
-  @internalProperty() private _moreInfoType?: string;
+  @state() private _moreInfoType?: string;
 
   protected updated(changedProperties: PropertyValues) {
     if (
@@ -38,7 +38,7 @@ class MoreInfoGroup extends LitElement {
 
     const states = this.stateObj.attributes.entity_id
       .map((entity_id) => this.hass.states[entity_id])
-      .filter((state) => state);
+      .filter((entityState) => entityState);
 
     if (!states.length) {
       this._groupDomainStateObj = undefined;
@@ -53,7 +53,9 @@ class MoreInfoGroup extends LitElement {
     // first child above the children of the current group
     if (
       groupDomain !== "group" &&
-      states.every((state) => groupDomain === computeStateDomain(state))
+      states.every(
+        (entityState) => groupDomain === computeStateDomain(entityState)
+      )
     ) {
       this._groupDomainStateObj = {
         ...baseStateObj,
@@ -80,20 +82,20 @@ class MoreInfoGroup extends LitElement {
         })
       : ""}
     ${this.stateObj.attributes.entity_id.map((entity_id) => {
-      const state = this.hass!.states[entity_id];
-      if (!state) {
+      const entityState = this.hass!.states[entity_id];
+      if (!entityState) {
         return "";
       }
       return html`
         <state-card-content
-          .stateObj=${state}
+          .stateObj=${entityState}
           .hass=${this.hass}
         ></state-card-content>
       `;
     })}`;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       state-card-content {
         display: block;
diff --git a/src/dialogs/more-info/controls/more-info-humidifier.ts b/src/dialogs/more-info/controls/more-info-humidifier.ts
index 56f89af45d..43da799a16 100644
--- a/src/dialogs/more-info/controls/more-info-humidifier.ts
+++ b/src/dialogs/more-info/controls/more-info-humidifier.ts
@@ -3,14 +3,14 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+} from "lit";
+import { property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
@@ -171,7 +171,7 @@ class MoreInfoHumidifier extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         color: var(--primary-text-color);
diff --git a/src/dialogs/more-info/controls/more-info-light.ts b/src/dialogs/more-info/controls/more-info-light.ts
index 63520d1947..3ac4d2e143 100644
--- a/src/dialogs/more-info/controls/more-info-light.ts
+++ b/src/dialogs/more-info/controls/more-info-light.ts
@@ -2,17 +2,16 @@ 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 { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attributes";
+import "../../../components/ha-button-toggle-group";
 import "../../../components/ha-color-picker";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-labeled-slider";
@@ -28,7 +27,6 @@ import {
   SUPPORT_EFFECT,
 } from "../../../data/light";
 import type { HomeAssistant } from "../../../types";
-import "../../../components/ha-button-toggle-group";
 
 const toggleButtons = [
   { label: "Color", value: "color" },
@@ -41,27 +39,27 @@ class MoreInfoLight extends LitElement {
 
   @property({ attribute: false }) public stateObj?: LightEntity;
 
-  @internalProperty() private _brightnessSliderValue = 0;
+  @state() private _brightnessSliderValue = 0;
 
-  @internalProperty() private _ctSliderValue?: number;
+  @state() private _ctSliderValue?: number;
 
-  @internalProperty() private _cwSliderValue?: number;
+  @state() private _cwSliderValue?: number;
 
-  @internalProperty() private _wwSliderValue?: number;
+  @state() private _wwSliderValue?: number;
 
-  @internalProperty() private _wvSliderValue?: number;
+  @state() private _wvSliderValue?: number;
 
-  @internalProperty() private _colorBrightnessSliderValue?: number;
+  @state() private _colorBrightnessSliderValue?: number;
 
-  @internalProperty() private _brightnessAdjusted?: number;
+  @state() private _brightnessAdjusted?: number;
 
-  @internalProperty() private _hueSegments = 24;
+  @state() private _hueSegments = 24;
 
-  @internalProperty() private _saturationSegments = 8;
+  @state() private _saturationSegments = 8;
 
-  @internalProperty() private _colorPickerColor?: [number, number, number];
+  @state() private _colorPickerColor?: [number, number, number];
 
-  @internalProperty() private _mode?: "color" | LightColorModes.COLOR_TEMP;
+  @state() private _mode?: "color" | LightColorModes.COLOR_TEMP;
 
   protected render(): TemplateResult {
     if (!this.hass || !this.stateObj) {
@@ -154,7 +152,7 @@ class MoreInfoLight extends LitElement {
                           )}
                           icon="hass:brightness-7"
                           max="100"
-                          .value=${this._colorBrightnessSliderValue ?? 100}
+                          .value=${this._colorBrightnessSliderValue}
                           @change=${this._colorBrightnessSliderChanged}
                           pin
                         ></ha-labeled-slider>`
@@ -228,6 +226,7 @@ class MoreInfoLight extends LitElement {
             `
           : ""}
         <ha-attributes
+          .hass=${this.hass}
           .stateObj=${this.stateObj}
           extra-filters="brightness,color_temp,white_value,effect_list,effect,hs_color,rgb_color,rgbw_color,rgbww_color,xy_color,min_mireds,max_mireds,entity_id,supported_color_modes,color_mode"
         ></ha-attributes>
@@ -235,7 +234,9 @@ class MoreInfoLight extends LitElement {
     `;
   }
 
-  protected updated(changedProps: PropertyValues<this>) {
+  public willUpdate(changedProps: PropertyValues<this>) {
+    super.willUpdate(changedProps);
+
     if (!changedProps.has("stateObj")) {
       return;
     }
@@ -282,23 +283,18 @@ class MoreInfoLight extends LitElement {
         stateObj.attributes.color_mode === LightColorModes.RGBWW
           ? Math.round((stateObj.attributes.rgbww_color[4] * 100) / 255)
           : undefined;
-      this._colorBrightnessSliderValue =
-        stateObj.attributes.color_mode === LightColorModes.RGBWW
-          ? Math.round(
-              (Math.max(...stateObj.attributes.rgbww_color.slice(0, 3)) * 100) /
-                255
-            )
-          : stateObj.attributes.color_mode === LightColorModes.RGBW
-          ? Math.round(
-              (Math.max(...stateObj.attributes.rgbw_color.slice(0, 3)) * 100) /
-                255
-            )
-          : undefined;
 
-      this._colorPickerColor = getLightCurrentModeRgbColor(stateObj)?.slice(
-        0,
-        3
-      ) as [number, number, number] | undefined;
+      const currentRgbColor = getLightCurrentModeRgbColor(stateObj);
+
+      this._colorBrightnessSliderValue = currentRgbColor
+        ? Math.round((Math.max(...currentRgbColor.slice(0, 3)) * 100) / 255)
+        : undefined;
+
+      this._colorPickerColor = currentRgbColor?.slice(0, 3) as [
+        number,
+        number,
+        number
+      ];
     } else {
       this._brightnessSliderValue = 0;
     }
@@ -328,6 +324,8 @@ class MoreInfoLight extends LitElement {
       return;
     }
 
+    this._brightnessSliderValue = bri;
+
     if (this._brightnessAdjusted) {
       const rgb =
         this.stateObj!.attributes.rgb_color ||
@@ -358,6 +356,8 @@ class MoreInfoLight extends LitElement {
       return;
     }
 
+    this._ctSliderValue = ct;
+
     this.hass.callService("light", "turn_on", {
       entity_id: this.stateObj!.entity_id,
       color_temp: ct,
@@ -373,6 +373,14 @@ class MoreInfoLight extends LitElement {
       return;
     }
 
+    if (name === "wv") {
+      this._wvSliderValue = wv;
+    } else if (name === "cw") {
+      this._cwSliderValue = wv;
+    } else if (name === "ww") {
+      this._wwSliderValue = wv;
+    }
+
     wv = Math.min(255, Math.round((wv * 255) / 100));
 
     const rgb = getLightCurrentModeRgbColor(this.stateObj!);
@@ -406,6 +414,9 @@ class MoreInfoLight extends LitElement {
       return;
     }
 
+    const oldValue = this._colorBrightnessSliderValue;
+    this._colorBrightnessSliderValue = value;
+
     value = (value * 255) / 100;
 
     const rgb = (getLightCurrentModeRgbColor(this.stateObj!)?.slice(0, 3) || [
@@ -417,12 +428,8 @@ class MoreInfoLight extends LitElement {
     this._setRgbWColor(
       this._adjustColorBrightness(
         // first normalize the value
-        this._colorBrightnessSliderValue
-          ? this._adjustColorBrightness(
-              rgb,
-              (this._colorBrightnessSliderValue * 255) / 100,
-              true
-            )
+        oldValue
+          ? this._adjustColorBrightness(rgb, (oldValue * 255) / 100, true)
           : rgb,
         value
       )
@@ -488,6 +495,12 @@ class MoreInfoLight extends LitElement {
       rgb: { r: number; g: number; b: number };
     }>
   ) {
+    this._colorPickerColor = [
+      ev.detail.rgb.r,
+      ev.detail.rgb.g,
+      ev.detail.rgb.b,
+    ];
+
     if (
       lightSupportsColorMode(this.stateObj!, LightColorModes.RGBWW) ||
       lightSupportsColorMode(this.stateObj!, LightColorModes.RGBW)
@@ -530,7 +543,7 @@ class MoreInfoLight extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .content {
         display: flex;
@@ -540,8 +553,6 @@ class MoreInfoLight extends LitElement {
 
       .content > * {
         width: 100%;
-        max-height: 84px;
-        overflow: hidden;
       }
 
       .color_temp {
diff --git a/src/dialogs/more-info/controls/more-info-lock.js b/src/dialogs/more-info/controls/more-info-lock.js
index 7c7fe6f3c7..346e1a8625 100644
--- a/src/dialogs/more-info/controls/more-info-lock.js
+++ b/src/dialogs/more-info/controls/more-info-lock.js
@@ -39,6 +39,7 @@ class MoreInfoLock extends LocalizeMixin(PolymerElement) {
         >
       </template>
       <ha-attributes
+        hass="[[hass]]"
         state-obj="[[stateObj]]"
         extra-filters="code_format"
       ></ha-attributes>
diff --git a/src/dialogs/more-info/controls/more-info-media_player.ts b/src/dialogs/more-info/controls/more-info-media_player.ts
index 95ebc74d26..89bb143d3f 100644
--- a/src/dialogs/more-info/controls/more-info-media_player.ts
+++ b/src/dialogs/more-info/controls/more-info-media_player.ts
@@ -4,16 +4,8 @@ import { mdiPlayBoxMultiple } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
@@ -203,7 +195,7 @@ class MoreInfoMediaPlayer extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-icon-button[action="turn_off"],
       ha-icon-button[action="turn_on"],
diff --git a/src/dialogs/more-info/controls/more-info-person.ts b/src/dialogs/more-info/controls/more-info-person.ts
index 4caa2ea3d3..328b73dc97 100644
--- a/src/dialogs/more-info/controls/more-info-person.ts
+++ b/src/dialogs/more-info/controls/more-info-person.ts
@@ -1,14 +1,7 @@
 import "@material/mwc-button";
 import { HassEntity } 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 memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-attributes";
@@ -31,6 +24,7 @@ class MoreInfoPerson extends LitElement {
 
     return html`
       <ha-attributes
+        .hass=${this.hass}
         .stateObj=${this.stateObj}
         extra-filters="id,user_id,editable"
       ></ha-attributes>
@@ -61,14 +55,14 @@ class MoreInfoPerson extends LitElement {
   }
 
   private _handleAction() {
-    showZoneEditor(this, {
+    showZoneEditor({
       latitude: this.stateObj!.attributes.latitude,
       longitude: this.stateObj!.attributes.longitude,
     });
     fireEvent(this, "hass-more-info", { entityId: null });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .flex {
         display: flex;
diff --git a/src/dialogs/more-info/controls/more-info-remote.ts b/src/dialogs/more-info/controls/more-info-remote.ts
index 276b862b33..421537bf67 100644
--- a/src/dialogs/more-info/controls/more-info-remote.ts
+++ b/src/dialogs/more-info/controls/more-info-remote.ts
@@ -1,14 +1,7 @@
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-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 { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attributes";
 import "../../../components/ha-paper-dropdown-menu";
@@ -55,6 +48,7 @@ class MoreInfoRemote extends LitElement {
         : ""}
 
       <ha-attributes
+        .hass=${this.hass}
         .stateObj=${this.stateObj}
         .extraFilters=${filterExtraAttributes}
       ></ha-attributes>
@@ -75,7 +69,7 @@ class MoreInfoRemote extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       paper-item {
         cursor: pointer;
diff --git a/src/dialogs/more-info/controls/more-info-script.ts b/src/dialogs/more-info/controls/more-info-script.ts
index 1c364318b9..39ce62214e 100644
--- a/src/dialogs/more-info/controls/more-info-script.ts
+++ b/src/dialogs/more-info/controls/more-info-script.ts
@@ -1,13 +1,6 @@
 import { HassEntity } 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 "../../../components/ha-relative-time";
 import { HomeAssistant } from "../../../types";
 
@@ -42,7 +35,7 @@ class MoreInfoScript extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .flex {
         display: flex;
diff --git a/src/dialogs/more-info/controls/more-info-sun.ts b/src/dialogs/more-info/controls/more-info-sun.ts
index 22904234d5..9de886b619 100644
--- a/src/dialogs/more-info/controls/more-info-sun.ts
+++ b/src/dialogs/more-info/controls/more-info-sun.ts
@@ -1,13 +1,6 @@
 import { HassEntity } 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 { formatTime } from "../../../common/datetime/format_time";
 import { formatNumber } from "../../../common/string/format_number";
 import "../../../components/ha-relative-time";
@@ -68,7 +61,7 @@ class MoreInfoSun extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .row {
         margin: 0;
diff --git a/src/dialogs/more-info/controls/more-info-timer.ts b/src/dialogs/more-info/controls/more-info-timer.ts
index 80f8819009..daf2e8e97f 100644
--- a/src/dialogs/more-info/controls/more-info-timer.ts
+++ b/src/dialogs/more-info/controls/more-info-timer.ts
@@ -1,13 +1,6 @@
 import "@material/mwc-button";
-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 "../../../components/ha-attributes";
 import { TimerEntity } from "../../../data/timer";
 import { HomeAssistant } from "../../../types";
@@ -25,6 +18,7 @@ class MoreInfoTimer extends LitElement {
 
     return html`
       <ha-attributes
+        .hass=${this.hass}
         .stateObj=${this.stateObj}
         extra-filters="remaining"
       ></ha-attributes>
@@ -73,7 +67,7 @@ class MoreInfoTimer extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .actions {
         margin: 8px 0;
diff --git a/src/dialogs/more-info/controls/more-info-vacuum.ts b/src/dialogs/more-info/controls/more-info-vacuum.ts
index f6285c28d2..c1841b7a5f 100644
--- a/src/dialogs/more-info/controls/more-info-vacuum.ts
+++ b/src/dialogs/more-info/controls/more-info-vacuum.ts
@@ -1,14 +1,7 @@
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-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 { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attributes";
 import "../../../components/ha-icon";
@@ -197,6 +190,7 @@ class MoreInfoVacuum extends LitElement {
         : ""}
 
       <ha-attributes
+        .hass=${this.hass}
         .stateObj=${this.stateObj}
         .extraFilters=${filterExtraAttributes}
       ></ha-attributes>
@@ -224,7 +218,7 @@ class MoreInfoVacuum extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         line-height: 1.5;
diff --git a/src/dialogs/more-info/controls/more-info-weather.ts b/src/dialogs/more-info/controls/more-info-weather.ts
index 0f2b63313d..3b69a35a7a 100644
--- a/src/dialogs/more-info/controls/more-info-weather.ts
+++ b/src/dialogs/more-info/controls/more-info-weather.ts
@@ -22,13 +22,13 @@ import {
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
+  html,
   LitElement,
-  property,
   PropertyValues,
-} from "lit-element";
-import { html, TemplateResult } from "lit-html";
+  TemplateResult,
+} from "lit";
+import { customElement, property } from "lit/decorators";
 import { formatDateWeekday } from "../../../common/datetime/format_date";
 import { formatTimeWeekday } from "../../../common/datetime/format_time";
 import { formatNumber } from "../../../common/string/format_number";
@@ -224,7 +224,7 @@ class MoreInfoWeather extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-svg-icon {
         color: var(--paper-item-icon-color);
diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts
index 0e57bc9112..b5c72f87da 100644
--- a/src/dialogs/more-info/ha-more-info-dialog.ts
+++ b/src/dialogs/more-info/ha-more-info-dialog.ts
@@ -3,15 +3,9 @@ import "@material/mwc-icon-button";
 import "@material/mwc-tab";
 import "@material/mwc-tab-bar";
 import { mdiClose, mdiCog, mdiPencil } from "@mdi/js";
-import {
-  css,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-} from "lit-element";
-import { cache } from "lit-html/directives/cache";
+import { css, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { cache } from "lit/directives/cache";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import {
   DOMAINS_MORE_INFO_NO_HISTORY,
@@ -31,11 +25,11 @@ import { haStyleDialog } from "../../resources/styles";
 import "../../state-summary/state-card-content";
 import { HomeAssistant } from "../../types";
 import { showConfirmationDialog } from "../generic/show-dialog-box";
+import { replaceDialog } from "../make-dialog-manager";
 import "./controls/more-info-default";
 import "./ha-more-info-history";
 import "./ha-more-info-logbook";
 import "./more-info-content";
-import { replaceDialog } from "../make-dialog-manager";
 
 const DOMAINS_NO_INFO = ["camera", "configurator"];
 /**
@@ -58,9 +52,9 @@ export class MoreInfoDialog extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public large = false;
 
-  @internalProperty() private _entityId?: string | null;
+  @state() private _entityId?: string | null;
 
-  @internalProperty() private _currTabIndex = 0;
+  @state() private _currTabIndex = 0;
 
   public showDialog(params: MoreInfoDialogParams) {
     this._entityId = params.entityId;
@@ -312,7 +306,7 @@ export class MoreInfoDialog extends LitElement {
       idToPassThroughUrl = stateObj.attributes.id;
     }
 
-    navigate(this, `/config/${domain}/edit/${idToPassThroughUrl}`);
+    navigate(`/config/${domain}/edit/${idToPassThroughUrl}`);
     this.closeDialog();
   }
 
diff --git a/src/dialogs/more-info/ha-more-info-history.ts b/src/dialogs/more-info/ha-more-info-history.ts
index eb393e3395..6dcb3144de 100644
--- a/src/dialogs/more-info/ha-more-info-history.ts
+++ b/src/dialogs/more-info/ha-more-info-history.ts
@@ -1,12 +1,5 @@
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { throttle } from "../../common/util/throttle";
 import "../../components/state-history-charts";
@@ -20,7 +13,7 @@ export class MoreInfoHistory extends LitElement {
 
   @property() public entityId!: string;
 
-  @internalProperty() private _stateHistory?: HistoryResult;
+  @state() private _stateHistory?: HistoryResult;
 
   private _throttleGetStateHistory = throttle(() => {
     this._getStateHistory();
diff --git a/src/dialogs/more-info/ha-more-info-logbook.ts b/src/dialogs/more-info/ha-more-info-logbook.ts
index 397dc10fc4..3a307e9370 100644
--- a/src/dialogs/more-info/ha-more-info-logbook.ts
+++ b/src/dialogs/more-info/ha-more-info-logbook.ts
@@ -1,24 +1,16 @@
-import {
-  css,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-  TemplateResult,
-} from "lit-element";
+import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
-import { closeDialog } from "../make-dialog-manager";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { throttle } from "../../common/util/throttle";
 import "../../components/ha-circular-progress";
 import "../../components/state-history-charts";
-import { TraceContexts, loadTraceContexts } from "../../data/trace";
 import { getLogbookData, LogbookEntry } from "../../data/logbook";
+import { loadTraceContexts, TraceContexts } from "../../data/trace";
 import "../../panels/logbook/ha-logbook";
-import { haStyle, haStyleScrollbar } from "../../resources/styles";
+import { haStyle } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
+import { closeDialog } from "../make-dialog-manager";
 
 @customElement("ha-more-info-logbook")
 export class MoreInfoLogbook extends LitElement {
@@ -26,11 +18,11 @@ export class MoreInfoLogbook extends LitElement {
 
   @property() public entityId!: string;
 
-  @internalProperty() private _logbookEntries?: LogbookEntry[];
+  @state() private _logbookEntries?: LogbookEntry[];
 
-  @internalProperty() private _traceContexts?: TraceContexts;
+  @state() private _traceContexts?: TraceContexts;
 
-  @internalProperty() private _persons = {};
+  @state() private _persons = {};
 
   private _lastLogbookDate?: Date;
 
@@ -60,7 +52,6 @@ export class MoreInfoLogbook extends LitElement {
           : this._logbookEntries.length
           ? html`
               <ha-logbook
-                class="ha-scrollbar"
                 narrow
                 no-icon
                 no-name
@@ -157,7 +148,6 @@ export class MoreInfoLogbook extends LitElement {
   static get styles() {
     return [
       haStyle,
-      haStyleScrollbar,
       css`
         .no-entries {
           text-align: center;
@@ -165,12 +155,11 @@ export class MoreInfoLogbook extends LitElement {
           color: var(--secondary-text-color);
         }
         ha-logbook {
-          max-height: 250px;
-          overflow: auto;
+          --logbook-max-height: 250px;
         }
         @media all and (max-width: 450px), all and (max-height: 500px) {
           ha-logbook {
-            max-height: unset;
+            --logbook-max-height: unset;
           }
         }
         ha-circular-progress {
diff --git a/src/dialogs/more-info/more-info-content.ts b/src/dialogs/more-info/more-info-content.ts
index d08ae9507a..2185206433 100644
--- a/src/dialogs/more-info/more-info-content.ts
+++ b/src/dialogs/more-info/more-info-content.ts
@@ -1,17 +1,22 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import { property, PropertyValues, UpdatingElement } from "lit-element";
+import { PropertyValues, ReactiveElement } from "lit";
+import { property } from "lit/decorators";
 import dynamicContentUpdater from "../../common/dom/dynamic_content_updater";
 import { importMoreInfoControl } from "../../panels/lovelace/custom-card-helpers";
 import { HomeAssistant } from "../../types";
 import { stateMoreInfoType } from "./state_more_info_control";
 
-class MoreInfoContent extends UpdatingElement {
+class MoreInfoContent extends ReactiveElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @property() public stateObj?: HassEntity;
+  @property({ attribute: false }) public stateObj?: HassEntity;
 
   private _detachedChild?: ChildNode;
 
+  protected createRenderRoot() {
+    return this;
+  }
+
   // This is not a lit element, but an updating element, so we implement update
   protected update(changedProps: PropertyValues): void {
     super.update(changedProps);
@@ -54,3 +59,9 @@ class MoreInfoContent extends UpdatingElement {
 }
 
 customElements.define("more-info-content", MoreInfoContent);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "more-info-content": MoreInfoContent;
+  }
+}
diff --git a/src/dialogs/notifications/configurator-notification-item.ts b/src/dialogs/notifications/configurator-notification-item.ts
index eb998f76be..0ea19c0653 100644
--- a/src/dialogs/notifications/configurator-notification-item.ts
+++ b/src/dialogs/notifications/configurator-notification-item.ts
@@ -1,11 +1,6 @@
 import "@material/mwc-button";
-import {
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeStateDisplay } from "../../common/entity/compute_state_display";
 import { domainToName } from "../../data/integration";
diff --git a/src/dialogs/notifications/notification-item-template.ts b/src/dialogs/notifications/notification-item-template.ts
index f6b5d319d8..8f6528550e 100644
--- a/src/dialogs/notifications/notification-item-template.ts
+++ b/src/dialogs/notifications/notification-item-template.ts
@@ -1,11 +1,5 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
 import "../../components/ha-card";
 
 @customElement("notification-item-template")
@@ -20,7 +14,7 @@ export class HuiNotificationItemTemplate extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .contents {
         padding: 16px;
diff --git a/src/dialogs/notifications/notification-item.ts b/src/dialogs/notifications/notification-item.ts
index 41207b1db4..dfe95fdc77 100644
--- a/src/dialogs/notifications/notification-item.ts
+++ b/src/dialogs/notifications/notification-item.ts
@@ -1,12 +1,6 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import {
-  customElement,
-  html,
-  LitElement,
-  property,
-  PropertyValues,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { PersistentNotification } from "../../data/persistent_notification";
 import { HomeAssistant } from "../../types";
 import "./configurator-notification-item";
diff --git a/src/dialogs/notifications/persistent-notification-item.ts b/src/dialogs/notifications/persistent-notification-item.ts
index 44cab069de..c7a38d264b 100644
--- a/src/dialogs/notifications/persistent-notification-item.ts
+++ b/src/dialogs/notifications/persistent-notification-item.ts
@@ -1,14 +1,7 @@
 import "@material/mwc-button";
 import "@polymer/paper-tooltip/paper-tooltip";
-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 { formatDateTime } from "../../common/datetime/format_date_time";
 import "../../components/ha-markdown";
 import "../../components/ha-relative-time";
@@ -57,7 +50,7 @@ export class HuiPersistentNotificationItem extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .time {
         display: flex;
diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts
index a570e6a699..e00565e59a 100644
--- a/src/dialogs/quick-bar/ha-quick-bar.ts
+++ b/src/dialogs/quick-bar/ha-quick-bar.ts
@@ -1,3 +1,4 @@
+import { Layout1d, scroll } from "@lit-labs/virtualizer";
 import "@material/mwc-list/mwc-list";
 import type { List } from "@material/mwc-list/mwc-list";
 import { SingleSelectedEvent } from "@material/mwc-list/mwc-list-foundation";
@@ -11,18 +12,10 @@ import {
   mdiReload,
   mdiServerNetwork,
 } from "@mdi/js";
-import {
-  css,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  query,
-} from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
-import { styleMap } from "lit-html/directives/style-map";
-import { scroll } from "lit-virtualizer";
+import { css, html, LitElement } from "lit";
+import { customElement, property, query, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
+import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { canShowPage } from "../../common/config/can_show_page";
 import { componentsWithService } from "../../common/config/components_with_service";
@@ -38,6 +31,7 @@ import {
   ScorableTextItem,
 } from "../../common/string/filter/sequence-matching";
 import { debounce } from "../../common/util/debounce";
+import "../../components/ha-chip";
 import "../../components/ha-circular-progress";
 import "../../components/ha-dialog";
 import "../../components/ha-header-bar";
@@ -52,7 +46,6 @@ import {
   showConfirmationDialog,
 } from "../generic/show-dialog-box";
 import { QuickBarParams } from "./show-dialog-quick-bar";
-import "../../components/ha-chip";
 
 interface QuickBarItem extends ScorableTextItem {
   primaryText: string;
@@ -87,19 +80,19 @@ type BaseNavigationCommand = Pick<
 export class QuickBar extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _commandItems?: CommandItem[];
+  @state() private _commandItems?: CommandItem[];
 
-  @internalProperty() private _entityItems?: EntityItem[];
+  @state() private _entityItems?: EntityItem[];
 
-  @internalProperty() private _filter = "";
+  @state() private _filter = "";
 
-  @internalProperty() private _search = "";
+  @state() private _search = "";
 
-  @internalProperty() private _opened = false;
+  @state() private _opened = false;
 
-  @internalProperty() private _commandMode = false;
+  @state() private _commandMode = false;
 
-  @internalProperty() private _done = false;
+  @state() private _done = false;
 
   @query("paper-input", false) private _filterInputField?: HTMLElement;
 
@@ -194,7 +187,9 @@ export class QuickBar extends LitElement {
             >
               ${scroll({
                 items,
-                renderItem: (item: QuickBarItem, index?: number) =>
+                layout: Layout1d,
+                // @ts-expect-error
+                renderItem: (item: QuickBarItem, index) =>
                   this._renderItem(item, index),
               })}
             </mwc-list>`}
@@ -228,6 +223,9 @@ export class QuickBar extends LitElement {
   }
 
   private _renderItem(item: QuickBarItem, index?: number) {
+    if (!item) {
+      return undefined;
+    }
     return isCommandItem(item)
       ? this._renderCommandItem(item, index)
       : this._renderEntityItem(item as EntityItem, index);
@@ -562,7 +560,7 @@ export class QuickBar extends LitElement {
         categoryText: this.hass.localize(
           `ui.dialogs.quick-bar.commands.types.${categoryKey}`
         ),
-        action: () => navigate(this, item.path),
+        action: () => navigate(item.path),
       };
 
       return {
diff --git a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
index 31c573e52d..649c209678 100644
--- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
+++ b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
@@ -4,17 +4,14 @@ import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+} from "lit";
+import { customElement, property, state, query } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../common/dom/fire_event";
 import { SpeechRecognition } from "../../common/dom/speech-recognition";
 import { uid } from "../../common/util/uid";
@@ -46,16 +43,16 @@ export class HaVoiceCommandDialog extends LitElement {
 
   @property() public results: Results | null = null;
 
-  @internalProperty() private _conversation: Message[] = [
+  @state() private _conversation: Message[] = [
     {
       who: "hass",
       text: "",
     },
   ];
 
-  @internalProperty() private _opened = false;
+  @state() private _opened = false;
 
-  @internalProperty() private _agentInfo?: AgentInfo;
+  @state() private _agentInfo?: AgentInfo;
 
   @query("#messages", true) private messages!: PaperDialogScrollableElement;
 
@@ -120,9 +117,13 @@ export class HaVoiceCommandDialog extends LitElement {
                     href="${this._agentInfo.onboarding.url}"
                     target="_blank"
                     rel="noreferrer"
-                    ><mwc-button unelevated>Yes!</mwc-button></a
+                    ><mwc-button unelevated
+                      >${this.hass.localize("ui.common.yes")}!</mwc-button
+                    ></a
+                  >
+                  <mwc-button outlined
+                    >${this.hass.localize("ui.common.no")}</mwc-button
                   >
-                  <mwc-button outlined>No</mwc-button>
                 </div>
               </div>
             `
@@ -158,7 +159,7 @@ export class HaVoiceCommandDialog extends LitElement {
         <div class="input">
           <paper-input
             @keyup=${this._handleKeyUp}
-            label="${this.hass!.localize(
+            .label="${this.hass.localize(
               `ui.dialogs.voice_command.${
                 SpeechRecognition ? "label_voice" : "label"
               }`
@@ -360,7 +361,7 @@ export class HaVoiceCommandDialog extends LitElement {
     return `message ${message.who} ${message.error ? " error" : ""}`;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/entrypoints/core.ts b/src/entrypoints/core.ts
index 87c6275449..964c2ca99c 100644
--- a/src/entrypoints/core.ts
+++ b/src/entrypoints/core.ts
@@ -25,6 +25,9 @@ import { subscribeUser } from "../data/ws-user";
 import type { ExternalAuth } from "../external_app/external_auth";
 import "../resources/safari-14-attachshadow-patch";
 import { HomeAssistant } from "../types";
+import { MAIN_WINDOW_NAME } from "../data/main_window";
+
+window.name = MAIN_WINDOW_NAME;
 
 declare global {
   interface Window {
diff --git a/src/entrypoints/custom-panel.ts b/src/entrypoints/custom-panel.ts
index de6df8758a..e2da175ea8 100644
--- a/src/entrypoints/custom-panel.ts
+++ b/src/entrypoints/custom-panel.ts
@@ -1,15 +1,19 @@
 // Compat needs to be first import
 import "../resources/compatibility";
+import "../resources/safari-14-attachshadow-patch";
+
 import { PolymerElement } from "@polymer/polymer";
+import { CSSResult } from "lit";
 import { fireEvent } from "../common/dom/fire_event";
+import { isNavigationClick } from "../common/dom/is-navigation-click";
 import { loadJS } from "../common/dom/load_resource";
 import { webComponentsSupported } from "../common/feature-detect/support-web-components";
+import { navigate } from "../common/navigate";
 import { CustomPanelInfo } from "../data/panel_custom";
-import "../resources/safari-14-attachshadow-patch";
+import { baseEntrypointStyles } from "../resources/styles";
 import { createCustomPanelElement } from "../util/custom-panel/create-custom-panel-element";
 import { loadCustomPanel } from "../util/custom-panel/load-custom-panel";
 import { setCustomPanelProperties } from "../util/custom-panel/set-custom-panel-properties";
-import { baseEntrypointStyles } from "../resources/styles";
 
 declare global {
   interface Window {
@@ -43,7 +47,13 @@ function initialize(
 ) {
   const style = document.createElement("style");
 
-  style.innerHTML = "body{margin:0}";
+  style.innerHTML = `body { margin:0; } 
+  @media (prefers-color-scheme: dark) {
+    body {
+      background-color: #111111;
+      color: #e1e1e1;
+    }
+  }`;
   document.head.appendChild(style);
 
   const config = panel.config._panel_custom;
@@ -78,7 +88,7 @@ function initialize(
           if (window.parent.customPanel) {
             window.parent.customPanel.navigate(
               window.location.pathname,
-              ev.detail ? ev.detail.replace : false
+              ev.detail
             );
           }
         });
@@ -101,13 +111,20 @@ function initialize(
         }
 
         const errorStyle = document.createElement("style");
-        errorStyle.innerHTML = baseEntrypointStyles.cssText;
+        errorStyle.innerHTML = (baseEntrypointStyles as CSSResult).cssText;
         document.body.appendChild(errorStyle);
 
         errorScreen.hass = properties.hass;
         document.body.appendChild(errorScreen);
       }
     );
+
+  document.body.addEventListener("click", (ev) => {
+    const href = isNavigationClick(ev);
+    if (href) {
+      navigate(href);
+    }
+  });
 }
 
 document.addEventListener(
diff --git a/src/entrypoints/service_worker.ts b/src/entrypoints/service_worker.ts
index 0748a15e1f..e3f141fa54 100644
--- a/src/entrypoints/service_worker.ts
+++ b/src/entrypoints/service_worker.ts
@@ -2,7 +2,9 @@
 // eslint-disable-next-line spaced-comment
 /// <reference path="../types/service-worker.d.ts" />
 /* eslint-env serviceworker */
+import { CacheableResponsePlugin } from "workbox-cacheable-response";
 import { cacheNames, RouteHandler } from "workbox-core";
+import { ExpirationPlugin } from "workbox-expiration";
 import { cleanupOutdatedCaches, precacheAndRoute } from "workbox-precaching";
 import { registerRoute, setCatchHandler } from "workbox-routing";
 import {
@@ -10,8 +12,6 @@ import {
   NetworkOnly,
   StaleWhileRevalidate,
 } from "workbox-strategies";
-import { CacheableResponsePlugin } from "workbox-cacheable-response";
-import { ExpirationPlugin } from "workbox-expiration";
 
 const noFallBackRegEx = new RegExp(
   "/(api|static|auth|frontend_latest|frontend_es5|local)/.*"
diff --git a/src/fake_data/provide_hass.ts b/src/fake_data/provide_hass.ts
index e74cb69152..d074f4c9ab 100644
--- a/src/fake_data/provide_hass.ts
+++ b/src/fake_data/provide_hass.ts
@@ -5,10 +5,10 @@ import {
 } from "../common/dom/apply_themes_on_element";
 import { computeLocalize } from "../common/translations/localize";
 import { DEFAULT_PANEL } from "../data/panel";
-import { NumberFormat } from "../data/translation";
+import { NumberFormat, TimeFormat } from "../data/translation";
 import { translationMetadata } from "../resources/translations-metadata";
 import { HomeAssistant } from "../types";
-import { getTranslation, getLocalLanguage } from "../util/hass-translation";
+import { getLocalLanguage, getTranslation } from "../util/hass-translation";
 import { demoConfig } from "./demo_config";
 import { demoPanels } from "./demo_panels";
 import { demoServices } from "./demo_services";
@@ -215,6 +215,7 @@ export const provideHass = (
     locale: {
       language: localLanguage,
       number_format: NumberFormat.language,
+      time_format: TimeFormat.language,
     },
     resources: null as any,
     localize: () => "",
@@ -276,7 +277,7 @@ export const provideHass = (
     mockTheme(theme) {
       invalidateThemeCache();
       hass().updateHass({
-        selectedTheme: { theme: theme ? "mock" : "default" },
+        selectedThemeSettings: { theme: theme ? "mock" : "default" },
         themes: {
           ...hass().themes,
           themes: {
@@ -284,11 +285,11 @@ export const provideHass = (
           },
         },
       });
-      const { themes, selectedTheme } = hass();
+      const { themes, selectedThemeSettings } = hass();
       applyThemesOnElement(
         document.documentElement,
         themes,
-        selectedTheme!.theme
+        selectedThemeSettings!.theme
       );
     },
 
diff --git a/src/layouts/ha-init-page.ts b/src/layouts/ha-init-page.ts
index e0fa8384c5..0a4e730fde 100644
--- a/src/layouts/ha-init-page.ts
+++ b/src/layouts/ha-init-page.ts
@@ -1,5 +1,6 @@
 import "@material/mwc-button";
-import { css, CSSResult, html, LitElement, property } from "lit-element";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { property } from "lit/decorators";
 import "../components/ha-circular-progress";
 import { removeInitSkeleton } from "../util/init-skeleton";
 
@@ -43,7 +44,7 @@ class HaInitPage extends LitElement {
     location.reload();
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       div {
         height: 100%;
diff --git a/src/layouts/hass-error-screen.ts b/src/layouts/hass-error-screen.ts
index b335218f03..de0b3f1fcf 100644
--- a/src/layouts/hass-error-screen.ts
+++ b/src/layouts/hass-error-screen.ts
@@ -1,16 +1,9 @@
 import "@material/mwc-button";
-import {
-  css,
-  CSSResultArray,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { HomeAssistant } from "../types";
-import "../components/ha-menu-button";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../components/ha-icon-button-arrow-prev";
+import "../components/ha-menu-button";
+import { HomeAssistant } from "../types";
 
 @customElement("hass-error-screen")
 class HassErrorScreen extends LitElement {
@@ -58,7 +51,7 @@ class HassErrorScreen extends LitElement {
     history.back();
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       css`
         :host {
diff --git a/src/layouts/hass-loading-screen.ts b/src/layouts/hass-loading-screen.ts
index 763622b3c1..529659ba0a 100644
--- a/src/layouts/hass-loading-screen.ts
+++ b/src/layouts/hass-loading-screen.ts
@@ -1,13 +1,6 @@
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import {
-  css,
-  CSSResultArray,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../components/ha-circular-progress";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
@@ -54,7 +47,7 @@ class HassLoadingScreen extends LitElement {
     history.back();
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/layouts/hass-router-page.ts b/src/layouts/hass-router-page.ts
index 450e331a73..5c37cd577c 100644
--- a/src/layouts/hass-router-page.ts
+++ b/src/layouts/hass-router-page.ts
@@ -1,4 +1,5 @@
-import { property, PropertyValues, UpdatingElement } from "lit-element";
+import { PropertyValues, ReactiveElement } from "lit";
+import { property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { navigate } from "../common/navigate";
 import { Route } from "../types";
@@ -46,7 +47,7 @@ export interface RouterOptions {
 // Time to wait for code to load before we show loading screen.
 const LOADING_SCREEN_THRESHOLD = 400; // ms
 
-export class HassRouterPage extends UpdatingElement {
+export class HassRouterPage extends ReactiveElement {
   @property() public route?: Route;
 
   protected routerOptions!: RouterOptions;
@@ -72,6 +73,10 @@ export class HassRouterPage extends UpdatingElement {
         };
   });
 
+  protected createRenderRoot() {
+    return this;
+  }
+
   protected update(changedProps: PropertyValues) {
     super.update(changedProps);
 
@@ -94,7 +99,7 @@ export class HassRouterPage extends UpdatingElement {
     const defaultPage = routerOptions.defaultPage;
 
     if (route && route.path === "" && defaultPage !== undefined) {
-      navigate(this, `${route.prefix}/${defaultPage}`, true);
+      navigate(`${route.prefix}/${defaultPage}`, { replace: true });
     }
 
     let newPage = route
@@ -122,7 +127,7 @@ export class HassRouterPage extends UpdatingElement {
 
         // Update the url if we know where we're mounted.
         if (route) {
-          navigate(this, `${route.prefix}/${result}`, true);
+          navigate(`${route.prefix}/${result}`, { replace: true });
         }
       }
     }
diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts
index 780fdb068b..58c4c376aa 100644
--- a/src/layouts/hass-subpage.ts
+++ b/src/layouts/hass-subpage.ts
@@ -1,13 +1,5 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  eventOptions,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, eventOptions, property } from "lit/decorators";
 import { restoreScroll } from "../common/decorators/restore-scroll";
 import "../components/ha-icon-button-arrow-prev";
 import "../components/ha-menu-button";
@@ -62,7 +54,7 @@ class HassSubpage extends LitElement {
     history.back();
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;
diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts
index 1c46a6caba..5ecfa2b722 100644
--- a/src/layouts/hass-tabs-subpage-data-table.ts
+++ b/src/layouts/hass-tabs-subpage-data-table.ts
@@ -1,17 +1,10 @@
 import "@material/mwc-button/mwc-button";
 import { mdiFilterVariant } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
+import { LocalizeFunc } from "../common/translations/localize";
 import { computeRTLDirection } from "../common/util/compute_rtl";
 import "../components/data-table/ha-data-table";
 import type {
@@ -35,10 +28,16 @@ declare global {
 export class HaTabsSubpageDataTable extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
+  @property({ attribute: false }) public localizeFunc?: LocalizeFunc;
+
   @property({ type: Boolean }) public isWide = false;
 
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
+  @property({ type: Boolean }) public supervisor = false;
+
+  @property({ type: Boolean, attribute: "main-page" }) public mainPage = false;
+
   /**
    * Object with the columns.
    * @type {Object}
@@ -185,12 +184,15 @@ export class HaTabsSubpageDataTable extends LitElement {
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
+        .localizeFunc=${this.localizeFunc}
         .narrow=${this.narrow}
         .isWide=${this.isWide}
         .backPath=${this.backPath}
         .backCallback=${this.backCallback}
         .route=${this.route}
         .tabs=${this.tabs}
+        .mainPage=${this.mainPage}
+        .supervisor=${this.supervisor}
       >
         <div slot="toolbar-icon"><slot name="toolbar-icon"></slot></div>
         ${this.narrow
@@ -238,7 +240,7 @@ export class HaTabsSubpageDataTable extends LitElement {
     fireEvent(this, "clear-filter");
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-data-table {
         width: 100%;
diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts
index 23c599e613..ea691e1766 100644
--- a/src/layouts/hass-tabs-subpage.ts
+++ b/src/layouts/hass-tabs-subpage.ts
@@ -1,21 +1,17 @@
 import "@material/mwc-ripple";
 import {
   css,
-  CSSResult,
-  customElement,
-  eventOptions,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+} from "lit";
+import { customElement, eventOptions, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../common/config/is_component_loaded";
 import { restoreScroll } from "../common/decorators/restore-scroll";
-import { navigate } from "../common/navigate";
 import { LocalizeFunc } from "../common/translations/localize";
 import { computeRTL } from "../common/util/compute_rtl";
 import "../components/ha-icon";
@@ -62,7 +58,7 @@ class HassTabsSubpage extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public rtl = false;
 
-  @internalProperty() private _activeTab?: PageNavigation;
+  @state() private _activeTab?: PageNavigation;
 
   // @ts-ignore
   @restoreScroll(".content") private _savedScrollPos?: number;
@@ -88,30 +84,29 @@ class HassTabsSubpage extends LitElement {
       return shownTabs.map(
         (page) =>
           html`
-            <ha-tab
-              .hass=${this.hass}
-              @click=${this._tabTapped}
-              .path=${page.path}
-              .active=${page === activeTab}
-              .narrow=${this.narrow}
-              .name=${page.translationKey
-                ? localizeFunc(page.translationKey)
-                : page.name}
-            >
-              ${page.iconPath
-                ? html`<ha-svg-icon
-                    slot="icon"
-                    .path=${page.iconPath}
-                  ></ha-svg-icon>`
-                : html`<ha-icon slot="icon" .icon=${page.icon}></ha-icon>`}
-            </ha-tab>
+            <a href=${page.path}>
+              <ha-tab
+                .hass=${this.hass}
+                .active=${page === activeTab}
+                .narrow=${this.narrow}
+                .name=${page.translationKey
+                  ? localizeFunc(page.translationKey)
+                  : page.name}
+              >
+                ${page.iconPath
+                  ? html`<ha-svg-icon
+                      slot="icon"
+                      .path=${page.iconPath}
+                    ></ha-svg-icon>`
+                  : html`<ha-icon slot="icon" .icon=${page.icon}></ha-icon>`}
+              </ha-tab>
+            </a>
           `
       );
     }
   );
 
-  protected updated(changedProperties: PropertyValues) {
-    super.updated(changedProperties);
+  public willUpdate(changedProperties: PropertyValues) {
     if (changedProperties.has("route")) {
       this._activeTab = this.tabs.find((tab) =>
         `${this.route.prefix}${this.route.path}`.includes(tab.path)
@@ -125,6 +120,7 @@ class HassTabsSubpage extends LitElement {
         this.rtl = computeRTL(this.hass);
       }
     }
+    super.willUpdate(changedProperties);
   }
 
   protected render(): TemplateResult {
@@ -148,6 +144,14 @@ class HassTabsSubpage extends LitElement {
                 .narrow=${this.narrow}
               ></ha-menu-button>
             `
+          : this.backPath
+          ? html`
+              <a href=${this.backPath}>
+                <ha-icon-button-arrow-prev
+                  .hass=${this.hass}
+                ></ha-icon-button-arrow-prev>
+              </a>
+            `
           : html`
               <ha-icon-button-arrow-prev
                 .hass=${this.hass}
@@ -185,15 +189,7 @@ class HassTabsSubpage extends LitElement {
     this._savedScrollPos = (e.target as HTMLDivElement).scrollTop;
   }
 
-  private _tabTapped(ev: Event): void {
-    navigate(this, (ev.currentTarget as any).path);
-  }
-
   private _backTapped(): void {
-    if (this.backPath) {
-      navigate(this, this.backPath);
-      return;
-    }
     if (this.backCallback) {
       this.backCallback();
       return;
@@ -201,7 +197,7 @@ class HassTabsSubpage extends LitElement {
     history.back();
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;
@@ -225,11 +221,18 @@ class HassTabsSubpage extends LitElement {
         height: var(--header-height);
         background-color: var(--sidebar-background-color);
         font-weight: 400;
-        color: var(--sidebar-text-color);
         border-bottom: 1px solid var(--divider-color);
         padding: 0 16px;
         box-sizing: border-box;
       }
+      .toolbar a {
+        color: var(--sidebar-text-color);
+        text-decoration: none;
+      }
+      :host([narrow]) .toolbar a {
+        width: 25%;
+      }
+
       #tabbar {
         display: flex;
         font-size: 14px;
@@ -243,7 +246,7 @@ class HassTabsSubpage extends LitElement {
         box-sizing: border-box;
         background-color: var(--sidebar-background-color);
         border-top: 1px solid var(--divider-color);
-        justify-content: space-between;
+        justify-content: space-around;
         z-index: 2;
         font-size: 12px;
         width: 100%;
diff --git a/src/layouts/home-assistant-main.ts b/src/layouts/home-assistant-main.ts
index f90e26b861..36f948d7f7 100644
--- a/src/layouts/home-assistant-main.ts
+++ b/src/layouts/home-assistant-main.ts
@@ -4,15 +4,13 @@ import "@polymer/app-layout/app-drawer/app-drawer";
 import type { AppDrawerElement } from "@polymer/app-layout/app-drawer/app-drawer";
 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, HASSDomEvent } from "../common/dom/fire_event";
 import { listenMediaQuery } from "../common/dom/media_query";
 import { toggleAttribute } from "../common/dom/toggle_attribute";
@@ -44,19 +42,20 @@ class HomeAssistantMain extends LitElement {
 
   @property() public route?: Route;
 
-  @property({ type: Boolean }) public narrow?: boolean;
+  @property({ type: Boolean }) public narrow!: boolean;
 
-  @internalProperty() private _sidebarEditMode = false;
+  @state() private _sidebarEditMode = false;
+
+  constructor() {
+    super();
+    listenMediaQuery("(max-width: 870px)", (matches) => {
+      this.narrow = matches;
+    });
+  }
 
   protected render(): TemplateResult {
     const hass = this.hass;
-
-    if (!hass) {
-      return html``;
-    }
-
     const sidebarNarrow = this._sidebarNarrow;
-
     const disableSwipe =
       this._sidebarEditMode ||
       !sidebarNarrow ||
@@ -144,13 +143,9 @@ class HomeAssistantMain extends LitElement {
 
     this.addEventListener("hass-show-notifications", () => {
       showNotificationDrawer(this, {
-        narrow: this.narrow!,
+        narrow: this.narrow,
       });
     });
-
-    listenMediaQuery("(max-width: 870px)", (matches) => {
-      this.narrow = matches;
-    });
   }
 
   protected updated(changedProps: PropertyValues) {
@@ -186,7 +181,7 @@ class HomeAssistantMain extends LitElement {
     return this.shadowRoot!.querySelector("app-drawer-layout")!;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         color: var(--primary-text-color);
diff --git a/src/layouts/home-assistant.ts b/src/layouts/home-assistant.ts
index 42abe399ce..6b4004938d 100644
--- a/src/layouts/home-assistant.ts
+++ b/src/layouts/home-assistant.ts
@@ -1,10 +1,6 @@
-import "@polymer/app-route/app-location";
-import {
-  customElement,
-  html,
-  internalProperty,
-  PropertyValues,
-} from "lit-element";
+import { isNavigationClick } from "../common/dom/is-navigation-click";
+import { html, PropertyValues } from "lit";
+import { customElement, state } from "lit/decorators";
 import { navigate } from "../common/navigate";
 import { getStorageDefaultPanelUrlPath } from "../data/panel";
 import "../resources/custom-card-support";
@@ -19,13 +15,24 @@ import {
 import "./ha-init-page";
 import "./home-assistant-main";
 
+const useHash = __DEMO__;
+const curPath = () =>
+  window.decodeURIComponent(
+    useHash ? location.hash.substr(1) : location.pathname
+  );
+
+const panelUrl = (path: string) => {
+  const dividerPos = path.indexOf("/", 1);
+  return dividerPos === -1 ? path.substr(1) : path.substr(1, dividerPos - 1);
+};
+
 @customElement("home-assistant")
 export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
-  @internalProperty() private _route?: Route;
+  @state() private _route: Route;
 
-  @internalProperty() private _error = false;
+  @state() private _error = false;
 
-  @internalProperty() private _panelUrl?: string;
+  private _panelUrl: string;
 
   private _haVersion?: string;
 
@@ -33,30 +40,36 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
 
   private _visiblePromiseResolve?: () => void;
 
+  constructor() {
+    super();
+    const path = curPath();
+
+    if (["", "/"].includes(path)) {
+      navigate(`/${getStorageDefaultPanelUrlPath()}`, { replace: true });
+    }
+    this._route = {
+      prefix: "",
+      path,
+    };
+    this._panelUrl = panelUrl(path);
+  }
+
   protected render() {
     const hass = this.hass;
 
-    return html`
-      <app-location
-        @route-changed=${this._routeChanged}
-        ?use-hash-as-path=${__DEMO__}
-      ></app-location>
-      ${this._panelUrl === undefined || this._route === undefined
-        ? ""
-        : hass && hass.states && hass.config && hass.services
-        ? html`
-            <home-assistant-main
-              .hass=${this.hass}
-              .route=${this._route}
-            ></home-assistant-main>
-          `
-        : html` <ha-init-page .error=${this._error}></ha-init-page> `}
-    `;
+    return hass && hass.states && hass.config && hass.services
+      ? html`
+          <home-assistant-main
+            .hass=${this.hass}
+            .route=${this._route}
+          ></home-assistant-main>
+        `
+      : html`<ha-init-page .error=${this._error}></ha-init-page>`;
   }
 
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
-    this._initialize();
+    this._initializeHass();
     setTimeout(() => registerServiceWorker(this), 1000);
     /* polyfill for paper-dropdown */
     import("web-animations-js/web-animations-next-lite.min");
@@ -64,14 +77,42 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
       this._updateHass({ suspendWhenHidden: ev.detail.suspend });
       storeState(this.hass!);
     });
+
+    // Navigation
+    const updateRoute = (path = curPath()) => {
+      if (this._route && path === this._route.path) {
+        return;
+      }
+      this._route = {
+        prefix: "",
+        path: path,
+      };
+
+      this._panelUrl = panelUrl(path);
+      this.panelUrlChanged(this._panelUrl!);
+      this._updateHass({ panelUrl: this._panelUrl });
+    };
+
+    window.addEventListener("location-changed", () => updateRoute());
+
+    // Handle history changes
+    if (useHash) {
+      window.addEventListener("hashchange", () => updateRoute());
+    } else {
+      window.addEventListener("popstate", () => updateRoute());
+    }
+
+    // Handle clicking on links
+    window.addEventListener("click", (ev) => {
+      const href = isNavigationClick(ev);
+      if (href) {
+        navigate(href);
+      }
+    });
   }
 
   protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
-    if (changedProps.has("_panelUrl")) {
-      this.panelUrlChanged(this._panelUrl!);
-      this._updateHass({ panelUrl: this._panelUrl });
-    }
     if (changedProps.has("hass")) {
       this.hassChanged(
         this.hass!,
@@ -113,7 +154,7 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
     }
   }
 
-  protected async _initialize() {
+  protected async _initializeHass() {
     try {
       let result;
 
@@ -134,31 +175,6 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
     }
   }
 
-  private async _routeChanged(ev) {
-    // routeChangged event listener is called while we're doing the fist render,
-    // causing the update to be ignored. So delay it to next task (Lit render is sync).
-    await new Promise((resolve) => setTimeout(resolve, 0));
-
-    const route = ev.detail.value as Route;
-    // If it's the first route that we process,
-    // check if we should navigate away from /
-    if (
-      this._route === undefined &&
-      (route.path === "" || route.path === "/")
-    ) {
-      navigate(window, `/${getStorageDefaultPanelUrlPath()}`, true);
-      return;
-    }
-
-    this._route = route;
-
-    const dividerPos = route.path.indexOf("/", 1);
-    this._panelUrl =
-      dividerPos === -1
-        ? route.path.substr(1)
-        : route.path.substr(1, dividerPos - 1);
-  }
-
   protected _checkVisibility() {
     if (document.hidden) {
       // If the document is hidden, we will prevent reconnects until we are visible again
diff --git a/src/layouts/partial-panel-resolver.ts b/src/layouts/partial-panel-resolver.ts
index cbc3cdfefb..6035c27713 100644
--- a/src/layouts/partial-panel-resolver.ts
+++ b/src/layouts/partial-panel-resolver.ts
@@ -4,7 +4,8 @@ import {
   STATE_RUNNING,
   STATE_STARTING,
 } from "home-assistant-js-websocket";
-import { customElement, property, PropertyValues } from "lit-element";
+import { PropertyValues } from "lit";
+import { customElement, property } from "lit/decorators";
 import { deepActiveElement } from "../common/dom/deep-active-element";
 import { deepEqual } from "../common/util/deep-equal";
 import { getDefaultPanel } from "../data/panel";
@@ -64,8 +65,8 @@ class PartialPanelResolver extends HassRouterPage {
     document.addEventListener("resume", () => this._checkVisibility());
   }
 
-  protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
+  public willUpdate(changedProps: PropertyValues) {
+    super.willUpdate(changedProps);
 
     if (!changedProps.has("hass")) {
       return;
diff --git a/src/layouts/supervisor-error-screen.ts b/src/layouts/supervisor-error-screen.ts
index dab453f236..29bafefbc8 100644
--- a/src/layouts/supervisor-error-screen.ts
+++ b/src/layouts/supervisor-error-screen.ts
@@ -1,20 +1,19 @@
-import "../components/ha-card";
 import "@material/mwc-button";
 import {
   css,
-  CSSResultArray,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { HomeAssistant } from "../types";
+} from "lit";
+import { customElement, property } from "lit/decorators";
+import { atLeastVersion } from "../common/config/version";
+import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
+import "../components/ha-card";
 import "../resources/ha-style";
 import { haStyle } from "../resources/styles";
-import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
-import { atLeastVersion } from "../common/config/version";
+import { HomeAssistant } from "../types";
 import "./hass-subpage";
 
 @customElement("supervisor-error-screen")
@@ -82,25 +81,27 @@ class SupervisorErrorScreen extends LitElement {
 
   private _applyTheme() {
     let themeName: string;
-    let options: Partial<HomeAssistant["selectedTheme"]> | undefined;
+    let themeSettings:
+      | Partial<HomeAssistant["selectedThemeSettings"]>
+      | undefined;
 
     if (atLeastVersion(this.hass.config.version, 0, 114)) {
       themeName =
-        this.hass.selectedTheme?.theme ||
+        this.hass.selectedThemeSettings?.theme ||
         (this.hass.themes.darkMode && this.hass.themes.default_dark_theme
           ? this.hass.themes.default_dark_theme!
           : this.hass.themes.default_theme);
 
-      options = this.hass.selectedTheme;
-      if (themeName === "default" && options?.dark === undefined) {
-        options = {
-          ...this.hass.selectedTheme,
+      themeSettings = this.hass.selectedThemeSettings;
+      if (themeName === "default" && themeSettings?.dark === undefined) {
+        themeSettings = {
+          ...this.hass.selectedThemeSettings,
           dark: this.hass.themes.darkMode,
         };
       }
     } else {
       themeName =
-        ((this.hass.selectedTheme as unknown) as string) ||
+        ((this.hass.selectedThemeSettings as unknown) as string) ||
         this.hass.themes.default_theme;
     }
 
@@ -108,11 +109,11 @@ class SupervisorErrorScreen extends LitElement {
       this.parentElement,
       this.hass.themes,
       themeName,
-      options
+      themeSettings
     );
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/managers/notification-manager.ts b/src/managers/notification-manager.ts
index a282adfd78..7eb9b410cd 100644
--- a/src/managers/notification-manager.ts
+++ b/src/managers/notification-manager.ts
@@ -1,14 +1,6 @@
 import "@material/mwc-button";
-import {
-  css,
-  CSSResult,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { property, state, query } from "lit/decorators";
 import { computeRTL } from "../common/util/compute_rtl";
 import "../components/ha-toast";
 import type { HaToast } from "../components/ha-toast";
@@ -29,9 +21,9 @@ export interface ToastActionParams {
 class NotificationManager extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _action?: ToastActionParams;
+  @state() private _action?: ToastActionParams;
 
-  @internalProperty() private _noCancelOnOutsideClick = false;
+  @state() private _noCancelOnOutsideClick = false;
 
   @query("ha-toast") private _toast!: HaToast;
 
@@ -80,7 +72,7 @@ class NotificationManager extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-toast {
         display: flex;
diff --git a/src/mixins/keyboard-shortcut-mixin.ts b/src/mixins/keyboard-shortcut-mixin.ts
index 359f386dc8..c319135b94 100644
--- a/src/mixins/keyboard-shortcut-mixin.ts
+++ b/src/mixins/keyboard-shortcut-mixin.ts
@@ -1,4 +1,4 @@
-import { LitElement } from "lit-element";
+import { LitElement } from "lit";
 import { Constructor } from "../types";
 
 export const KeyboardShortcutMixin = <T extends Constructor<LitElement>>(
diff --git a/src/mixins/lit-localize-lite-mixin.ts b/src/mixins/lit-localize-lite-mixin.ts
index cc723a36ac..c9751e1837 100644
--- a/src/mixins/lit-localize-lite-mixin.ts
+++ b/src/mixins/lit-localize-lite-mixin.ts
@@ -1,7 +1,8 @@
-import { LitElement, property, PropertyValues } from "lit-element";
+import { LitElement, PropertyValues } from "lit";
+import { property } from "lit/decorators";
 import { computeLocalize, LocalizeFunc } from "../common/translations/localize";
 import { Constructor, Resources } from "../types";
-import { getTranslation, getLocalLanguage } from "../util/hass-translation";
+import { getLocalLanguage, getTranslation } from "../util/hass-translation";
 
 const empty = () => "";
 
diff --git a/src/mixins/navigate-mixin.js b/src/mixins/navigate-mixin.js
index 7b8764c65b..2a2f8aac5d 100644
--- a/src/mixins/navigate-mixin.js
+++ b/src/mixins/navigate-mixin.js
@@ -9,7 +9,7 @@ export default dedupingMixin(
   (superClass) =>
     class extends superClass {
       navigate(...args) {
-        navigate(this, ...args);
+        navigate(...args);
       }
     }
 );
diff --git a/src/mixins/provide-hass-lit-mixin.ts b/src/mixins/provide-hass-lit-mixin.ts
index ba9ab227c3..361d4e281c 100644
--- a/src/mixins/provide-hass-lit-mixin.ts
+++ b/src/mixins/provide-hass-lit-mixin.ts
@@ -1,11 +1,11 @@
-import { PropertyValues, UpdatingElement } from "lit-element";
+import { PropertyValues, ReactiveElement } from "lit";
 import { Constructor, HomeAssistant } from "../types";
 
 export interface ProvideHassElement {
   provideHass(element: HTMLElement);
 }
 
-export const ProvideHassLitMixin = <T extends Constructor<UpdatingElement>>(
+export const ProvideHassLitMixin = <T extends Constructor<ReactiveElement>>(
   superClass: T
 ) =>
   class extends superClass {
diff --git a/src/mixins/subscribe-mixin.ts b/src/mixins/subscribe-mixin.ts
index 88c54eaf3c..701d524175 100644
--- a/src/mixins/subscribe-mixin.ts
+++ b/src/mixins/subscribe-mixin.ts
@@ -1,12 +1,13 @@
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { property, PropertyValues, UpdatingElement } from "lit-element";
+import { PropertyValues, ReactiveElement } from "lit";
+import { property } from "lit/decorators";
 import { Constructor, HomeAssistant } from "../types";
 
 export interface HassSubscribeElement {
   hassSubscribe(): UnsubscribeFunc[];
 }
 
-export const SubscribeMixin = <T extends Constructor<UpdatingElement>>(
+export const SubscribeMixin = <T extends Constructor<ReactiveElement>>(
   superClass: T
 ) => {
   class SubscribeClass extends superClass {
diff --git a/src/onboarding/action-badge.ts b/src/onboarding/action-badge.ts
index 45d69b0c72..e97c9c5bd8 100644
--- a/src/onboarding/action-badge.ts
+++ b/src/onboarding/action-badge.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 "../components/ha-icon";
 
 @customElement("action-badge")
@@ -31,7 +24,7 @@ class ActionBadge extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: inline-flex;
diff --git a/src/onboarding/ha-onboarding.ts b/src/onboarding/ha-onboarding.ts
index 64ff66bf5a..2a7c66bd9f 100644
--- a/src/onboarding/ha-onboarding.ts
+++ b/src/onboarding/ha-onboarding.ts
@@ -5,14 +5,9 @@ import {
   getAuth,
   subscribeConfig,
 } from "home-assistant-js-websocket";
-import {
-  customElement,
-  html,
-  internalProperty,
-  property,
-  PropertyValues,
-  TemplateResult,
-} from "lit-element";
+import { html, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
 import { HASSDomEvent } from "../common/dom/fire_event";
 import { extractSearchParamsObject } from "../common/url/search-params";
 import { subscribeOne } from "../common/util/subscribe-one";
@@ -29,10 +24,9 @@ import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
 import { HassElement } from "../state/hass-element";
 import { HomeAssistant } from "../types";
 import { registerServiceWorker } from "../util/register-service-worker";
+import "./onboarding-analytics";
 import "./onboarding-create-user";
 import "./onboarding-loading";
-import "./onboarding-analytics";
-import { applyThemesOnElement } from "../common/dom/apply_themes_on_element";
 
 type OnboardingEvent =
   | {
@@ -66,13 +60,13 @@ class HaOnboarding extends litLocalizeLiteMixin(HassElement) {
 
   public translationFragment = "page-onboarding";
 
-  @internalProperty() private _loading = false;
+  @state() private _loading = false;
 
-  @internalProperty() private _restoring = false;
+  @state() private _restoring = false;
 
-  @internalProperty() private _supervisor?: boolean;
+  @state() private _supervisor?: boolean;
 
-  @internalProperty() private _steps?: OnboardingStep[];
+  @state() private _steps?: OnboardingStep[];
 
   protected render(): TemplateResult {
     const step = this._curStep()!;
diff --git a/src/onboarding/integration-badge.ts b/src/onboarding/integration-badge.ts
index 341c3f6219..7958ca7080 100644
--- a/src/onboarding/integration-badge.ts
+++ b/src/onboarding/integration-badge.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 "../components/ha-icon";
 import { brandsUrl } from "../util/brands-url";
 
@@ -35,7 +28,7 @@ class IntegrationBadge extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: inline-flex;
diff --git a/src/onboarding/onboarding-analytics.ts b/src/onboarding/onboarding-analytics.ts
index 78c20b485f..60783b95f7 100644
--- a/src/onboarding/onboarding-analytics.ts
+++ b/src/onboarding/onboarding-analytics.ts
@@ -1,14 +1,6 @@
 import "@material/mwc-button/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 { fireEvent } from "../common/dom/fire_event";
 import { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-analytics";
@@ -23,9 +15,9 @@ class OnboardingAnalytics extends LitElement {
 
   @property() public localize!: LocalizeFunc;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _analyticsDetails: Analytics = {
+  @state() private _analyticsDetails: Analytics = {
     preferences: {},
   };
 
@@ -85,7 +77,7 @@ class OnboardingAnalytics extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .error {
         color: var(--error-color);
diff --git a/src/onboarding/onboarding-core-config.ts b/src/onboarding/onboarding-core-config.ts
index a983a2288b..f1bc58a83d 100644
--- a/src/onboarding/onboarding-core-config.ts
+++ b/src/onboarding/onboarding-core-config.ts
@@ -3,16 +3,8 @@ import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import "@polymer/paper-radio-button/paper-radio-button";
 import "@polymer/paper-radio-group/paper-radio-group";
-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 { fireEvent } from "../common/dom/fire_event";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/map/ha-location-editor";
@@ -35,17 +27,17 @@ class OnboardingCoreConfig extends LitElement {
 
   @property() public onboardingLocalize!: LocalizeFunc;
 
-  @internalProperty() private _working = false;
+  @state() private _working = false;
 
-  @internalProperty() private _name!: ConfigUpdateValues["location_name"];
+  @state() private _name!: ConfigUpdateValues["location_name"];
 
-  @internalProperty() private _location!: [number, number];
+  @state() private _location!: [number, number];
 
-  @internalProperty() private _elevation!: string;
+  @state() private _elevation!: string;
 
-  @internalProperty() private _unitSystem!: ConfigUpdateValues["unit_system"];
+  @state() private _unitSystem!: ConfigUpdateValues["unit_system"];
 
-  @internalProperty() private _timeZone!: string;
+  @state() private _timeZone!: string;
 
   protected render(): TemplateResult {
     return html`
@@ -278,7 +270,7 @@ class OnboardingCoreConfig extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .row {
         display: flex;
diff --git a/src/onboarding/onboarding-create-user.ts b/src/onboarding/onboarding-create-user.ts
index 63cff1ca6e..c0c23aafdc 100644
--- a/src/onboarding/onboarding-create-user.ts
+++ b/src/onboarding/onboarding-create-user.ts
@@ -3,15 +3,13 @@ import "@polymer/paper-input/paper-input";
 import { genClientId } from "home-assistant-js-websocket";
 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 "../common/dom/fire_event";
 import { LocalizeFunc } from "../common/translations/localize";
 import { onboardUserStep } from "../data/onboarding";
@@ -23,17 +21,17 @@ class OnboardingCreateUser extends LitElement {
 
   @property() public language!: string;
 
-  @internalProperty() private _name = "";
+  @state() private _name = "";
 
-  @internalProperty() private _username = "";
+  @state() private _username = "";
 
-  @internalProperty() private _password = "";
+  @state() private _password = "";
 
-  @internalProperty() private _passwordConfirm = "";
+  @state() private _passwordConfirm = "";
 
-  @internalProperty() private _loading = false;
+  @state() private _loading = false;
 
-  @internalProperty() private _errorMsg?: string = undefined;
+  @state() private _errorMsg?: string = undefined;
 
   protected render(): TemplateResult {
     return html`
@@ -199,7 +197,7 @@ class OnboardingCreateUser extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .error {
         color: red;
diff --git a/src/onboarding/onboarding-integrations.ts b/src/onboarding/onboarding-integrations.ts
index 0ea9a94ff5..9426c88ad4 100644
--- a/src/onboarding/onboarding-integrations.ts
+++ b/src/onboarding/onboarding-integrations.ts
@@ -1,15 +1,13 @@
 import "@material/mwc-button/mwc-button";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
-  internalProperty,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { compare } from "../common/string/compare";
 import { LocalizeFunc } from "../common/translations/localize";
@@ -37,9 +35,9 @@ class OnboardingIntegrations extends LitElement {
 
   @property() public onboardingLocalize!: LocalizeFunc;
 
-  @internalProperty() private _entries?: ConfigEntry[];
+  @state() private _entries?: ConfigEntry[];
 
-  @internalProperty() private _discovered?: DataEntryFlowProgress[];
+  @state() private _discovered?: DataEntryFlowProgress[];
 
   private _unsubEvents?: () => void;
 
@@ -175,7 +173,7 @@ class OnboardingIntegrations extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .badges {
         margin-top: 24px;
diff --git a/src/onboarding/onboarding-loading.ts b/src/onboarding/onboarding-loading.ts
index 96703c6a6c..e9182332ec 100644
--- a/src/onboarding/onboarding-loading.ts
+++ b/src/onboarding/onboarding-loading.ts
@@ -1,11 +1,5 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
 
 @customElement("onboarding-loading")
 class OnboardingLoading extends LitElement {
@@ -13,7 +7,7 @@ class OnboardingLoading extends LitElement {
     return html` <div class="loader"></div> `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       /* MIT License (MIT). Copyright (c) 2014 Luke Haas */
       .loader,
diff --git a/src/onboarding/onboarding-restore-snapshot.ts b/src/onboarding/onboarding-restore-snapshot.ts
index 6fb86da28e..32d604c7ac 100644
--- a/src/onboarding/onboarding-restore-snapshot.ts
+++ b/src/onboarding/onboarding-restore-snapshot.ts
@@ -1,13 +1,6 @@
 import "@material/mwc-button/mwc-button";
-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 "../../hassio/src/components/hassio-ansi-to-html";
 import { showHassioSnapshotDialog } from "../../hassio/src/dialogs/snapshot/show-dialog-hassio-snapshot";
 import { showSnapshotUploadDialog } from "../../hassio/src/dialogs/snapshot/show-dialog-snapshot-upload";
@@ -70,7 +63,7 @@ class OnboardingRestoreSnapshot extends ProvideHassLitMixin(LitElement) {
         });
         if (response.status === 401) {
           // If we get a unauthorized response, the restore is done
-          navigate(this, "/", true);
+          navigate("/", { replace: true });
           location.reload();
         }
       } catch (err) {
@@ -86,7 +79,7 @@ class OnboardingRestoreSnapshot extends ProvideHassLitMixin(LitElement) {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/calendar/ha-full-calendar.ts b/src/panels/calendar/ha-full-calendar.ts
index 9d11cff9d2..5b737d529c 100644
--- a/src/panels/calendar/ha-full-calendar.ts
+++ b/src/panels/calendar/ha-full-calendar.ts
@@ -14,15 +14,14 @@ import "@material/mwc-button";
 import { mdiViewAgenda, mdiViewDay, mdiViewModule, mdiViewWeek } from "@mdi/js";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
   unsafeCSS,
-} from "lit-element";
+} from "lit";
+import { property, state } from "lit/decorators";
 import memoize from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-button-toggle-group";
@@ -91,9 +90,9 @@ export class HAFullCalendar extends LitElement {
 
   @property() public initialView: FullCalendarView = "dayGridMonth";
 
-  @internalProperty() private calendar?: Calendar;
+  private calendar?: Calendar;
 
-  @internalProperty() private _activeView?: FullCalendarView;
+  @state() private _activeView = this.initialView;
 
   public updateSize(): void {
     this.calendar?.updateSize();
@@ -182,8 +181,8 @@ export class HAFullCalendar extends LitElement {
     `;
   }
 
-  protected updated(changedProps: PropertyValues): void {
-    super.updated(changedProps);
+  public willUpdate(changedProps: PropertyValues): void {
+    super.willUpdate(changedProps);
 
     if (!this.calendar) {
       return;
@@ -217,8 +216,6 @@ export class HAFullCalendar extends LitElement {
       initialView: this.initialView,
     };
 
-    this._activeView = this.initialView;
-
     config.dateClick = (info) => this._handleDateClick(info);
     config.eventClick = (info) => this._handleEventClick(info);
 
@@ -285,7 +282,7 @@ export class HAFullCalendar extends LitElement {
     )
   );
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/calendar/ha-panel-calendar.ts b/src/panels/calendar/ha-panel-calendar.ts
index 636c9fb117..91cad5b3a6 100644
--- a/src/panels/calendar/ha-panel-calendar.ts
+++ b/src/panels/calendar/ha-panel-calendar.ts
@@ -4,16 +4,14 @@ import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import {
   css,
-  CSSResultArray,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { styleMap } from "lit-html/directives/style-map";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
 import { LocalStorage } from "../../common/decorators/local-storage";
 import { HASSDomEvent } from "../../common/dom/fire_event";
 import "../../components/ha-card";
@@ -39,9 +37,9 @@ class PanelCalendar extends LitElement {
   @property({ type: Boolean, reflect: true })
   public narrow!: boolean;
 
-  @internalProperty() private _calendars: Calendar[] = [];
+  @state() private _calendars: Calendar[] = [];
 
-  @internalProperty() private _events: CalendarEvent[] = [];
+  @state() private _events: CalendarEvent[] = [];
 
   @LocalStorage("deSelectedCalendars", true)
   private _deSelectedCalendars: string[] = [];
@@ -50,9 +48,11 @@ class PanelCalendar extends LitElement {
 
   private _end?: Date;
 
-  protected firstUpdated(changedProps: PropertyValues): void {
-    super.firstUpdated(changedProps);
-    this._calendars = getCalendars(this.hass);
+  public willUpdate(changedProps: PropertyValues): void {
+    super.willUpdate(changedProps);
+    if (!this.hasUpdated) {
+      this._calendars = getCalendars(this.hass);
+    }
   }
 
   protected render(): TemplateResult {
@@ -175,7 +175,7 @@ class PanelCalendar extends LitElement {
     );
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/areas/dialog-area-registry-detail.ts b/src/panels/config/areas/dialog-area-registry-detail.ts
index e0c5c48467..0add7268b5 100644
--- a/src/panels/config/areas/dialog-area-registry-detail.ts
+++ b/src/panels/config/areas/dialog-area-registry-detail.ts
@@ -1,15 +1,8 @@
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-input/paper-input";
-import {
-  css,
-  CSSResult,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
 import "../../../components/ha-dialog";
@@ -22,13 +15,13 @@ import { AreaRegistryDetailDialogParams } from "./show-dialog-area-registry-deta
 class DialogAreaDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _name!: string;
+  @state() private _name!: string;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _params?: AreaRegistryDetailDialogParams;
+  @state() private _params?: AreaRegistryDetailDialogParams;
 
-  @internalProperty() private _submitting?: boolean;
+  @state() private _submitting?: boolean;
 
   public async showDialog(
     params: AreaRegistryDetailDialogParams
@@ -156,10 +149,10 @@ class DialogAreaDetail extends LitElement {
       this._submitting = false;
     }
 
-    navigate(this, "/config/areas/dashboard");
+    navigate("/config/areas/dashboard");
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/config/areas/ha-config-area-page.ts b/src/panels/config/areas/ha-config-area-page.ts
index d1356ef014..6b3e35a783 100644
--- a/src/panels/config/areas/ha-config-area-page.ts
+++ b/src/panels/config/areas/ha-config-area-page.ts
@@ -1,15 +1,7 @@
 import "@material/mwc-button";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { computeStateName } from "../../../common/entity/compute_state_name";
@@ -58,7 +50,7 @@ class HaConfigAreaPage extends LitElement {
 
   @property() public route!: Route;
 
-  @internalProperty() private _related?: RelatedResult;
+  @state() private _related?: RelatedResult;
 
   private _area = memoizeOne((areaId: string, areas: AreaRegistryEntry[]):
     | AreaRegistryEntry
@@ -215,27 +207,27 @@ class HaConfigAreaPage extends LitElement {
                     )}
                     >${this._related?.automation?.length
                       ? this._related.automation.map((automation) => {
-                          const state = this.hass.states[automation];
-                          return state
+                          const entityState = this.hass.states[automation];
+                          return entityState
                             ? html`
                                 <div>
                                   <a
                                     href=${ifDefined(
-                                      state.attributes.id
-                                        ? `/config/automation/edit/${state.attributes.id}`
+                                      entityState.attributes.id
+                                        ? `/config/automation/edit/${entityState.attributes.id}`
                                         : undefined
                                     )}
                                   >
                                     <paper-item
-                                      .disabled=${!state.attributes.id}
+                                      .disabled=${!entityState.attributes.id}
                                     >
                                       <paper-item-body>
-                                        ${computeStateName(state)}
+                                        ${computeStateName(entityState)}
                                       </paper-item-body>
                                       <ha-icon-next></ha-icon-next>
                                     </paper-item>
                                   </a>
-                                  ${!state.attributes.id
+                                  ${!entityState.attributes.id
                                     ? html`
                                         <paper-tooltip animation-delay="0">
                                           ${this.hass.localize(
@@ -268,27 +260,27 @@ class HaConfigAreaPage extends LitElement {
                     )}
                     >${this._related?.scene?.length
                       ? this._related.scene.map((scene) => {
-                          const state = this.hass.states[scene];
-                          return state
+                          const entityState = this.hass.states[scene];
+                          return entityState
                             ? html`
                                 <div>
                                   <a
                                     href=${ifDefined(
-                                      state.attributes.id
-                                        ? `/config/scene/edit/${state.attributes.id}`
+                                      entityState.attributes.id
+                                        ? `/config/scene/edit/${entityState.attributes.id}`
                                         : undefined
                                     )}
                                   >
                                     <paper-item
-                                      .disabled=${!state.attributes.id}
+                                      .disabled=${!entityState.attributes.id}
                                     >
                                       <paper-item-body>
-                                        ${computeStateName(state)}
+                                        ${computeStateName(entityState)}
                                       </paper-item-body>
                                       <ha-icon-next></ha-icon-next>
                                     </paper-item>
                                   </a>
-                                  ${!state.attributes.id
+                                  ${!entityState.attributes.id
                                     ? html`
                                         <paper-tooltip animation-delay="0">
                                           ${this.hass.localize(
@@ -319,15 +311,15 @@ class HaConfigAreaPage extends LitElement {
                     )}
                     >${this._related?.script?.length
                       ? this._related.script.map((script) => {
-                          const state = this.hass.states[script];
-                          return state
+                          const entityState = this.hass.states[script];
+                          return entityState
                             ? html`
                                 <a
-                                  href=${`/config/script/edit/${state.entity_id}`}
+                                  href=${`/config/script/edit/${entityState.entity_id}`}
                                 >
                                   <paper-item>
                                     <paper-item-body>
-                                      ${computeStateName(state)}
+                                      ${computeStateName(entityState)}
                                     </paper-item-body>
                                     <ha-icon-next></ha-icon-next>
                                   </paper-item>
@@ -399,7 +391,7 @@ class HaConfigAreaPage extends LitElement {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/areas/ha-config-areas-dashboard.ts b/src/panels/config/areas/ha-config-areas-dashboard.ts
index 7ba5201c97..92bdbe225b 100644
--- a/src/panels/config/areas/ha-config-areas-dashboard.ts
+++ b/src/panels/config/areas/ha-config-areas-dashboard.ts
@@ -1,15 +1,8 @@
 import { mdiPlus } from "@mdi/js";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-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 { HASSDomEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
@@ -199,7 +192,7 @@ export class HaConfigAreasDashboard extends LitElement {
 
   private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
     const areaId = ev.detail.id;
-    navigate(this, `/config/areas/area/${areaId}`);
+    navigate(`/config/areas/area/${areaId}`);
   }
 
   private _openDialog(entry?: AreaRegistryEntry) {
@@ -210,7 +203,7 @@ export class HaConfigAreasDashboard extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       hass-loading-screen {
         --app-header-background-color: var(--sidebar-background-color);
diff --git a/src/panels/config/areas/ha-config-areas.ts b/src/panels/config/areas/ha-config-areas.ts
index c742b304d0..dd9378e321 100644
--- a/src/panels/config/areas/ha-config-areas.ts
+++ b/src/panels/config/areas/ha-config-areas.ts
@@ -1,10 +1,6 @@
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import {
-  customElement,
-  internalProperty,
-  property,
-  PropertyValues,
-} from "lit-element";
+import { PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { compare } from "../../../common/string/compare";
 import {
   AreaRegistryEntry,
@@ -50,15 +46,15 @@ class HaConfigAreas extends HassRouterPage {
     },
   };
 
-  @internalProperty() private _configEntries: ConfigEntry[] = [];
+  @state() private _configEntries: ConfigEntry[] = [];
 
-  @internalProperty()
+  @state()
   private _deviceRegistryEntries: DeviceRegistryEntry[] = [];
 
-  @internalProperty()
+  @state()
   private _entityRegistryEntries: EntityRegistryEntry[] = [];
 
-  @internalProperty() private _areas: AreaRegistryEntry[] = [];
+  @state() private _areas: AreaRegistryEntry[] = [];
 
   private _unsubs?: UnsubscribeFunc[];
 
diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts
index 87556b3a75..96719a003f 100644
--- a/src/panels/config/automation/action/ha-automation-action-row.ts
+++ b/src/panels/config/automation/action/ha-automation-action-row.ts
@@ -6,19 +6,11 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-  query,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, state, query } from "lit/decorators";
 import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { handleStructError } from "../../../../common/structs/handle-errors";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
 import "../../../../components/ha-svg-icon";
@@ -27,7 +19,6 @@ import type { Action } from "../../../../data/script";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
-import { handleStructError } from "../../../../common/structs/handle-errors";
 import "./types/ha-automation-action-choose";
 import "./types/ha-automation-action-condition";
 import "./types/ha-automation-action-delay";
@@ -99,11 +90,11 @@ export default class HaAutomationActionRow extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @internalProperty() private _warnings?: string[];
+  @state() private _warnings?: string[];
 
-  @internalProperty() private _uiModeAvailable = true;
+  @state() private _uiModeAvailable = true;
 
-  @internalProperty() private _yamlMode = false;
+  @state() private _yamlMode = false;
 
   @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
 
@@ -339,7 +330,7 @@ export default class HaAutomationActionRow extends LitElement {
     this._yamlMode = !this._yamlMode;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/automation/action/ha-automation-action.ts b/src/panels/config/automation/action/ha-automation-action.ts
index 568dc9676b..dfdf25b215 100644
--- a/src/panels/config/automation/action/ha-automation-action.ts
+++ b/src/panels/config/automation/action/ha-automation-action.ts
@@ -1,12 +1,6 @@
 import "@material/mwc-button";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-card";
 import { Action } from "../../../../data/script";
@@ -90,7 +84,7 @@ export default class HaAutomationAction extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-automation-action-row,
       ha-card {
diff --git a/src/panels/config/automation/action/types/ha-automation-action-choose.ts b/src/panels/config/automation/action/types/ha-automation-action-choose.ts
index 2a04f9e022..584d217b90 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-choose.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-choose.ts
@@ -1,14 +1,8 @@
 import { mdiDelete } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-listbox/paper-listbox";
-import {
-  css,
-  CSSResult,
-  customElement,
-  LitElement,
-  property,
-} from "lit-element";
-import { html } from "lit-html";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { ensureArray } from "../../../../../common/ensure-array";
 import { Condition } from "../../../../../data/automation";
@@ -156,7 +150,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/automation/action/types/ha-automation-action-condition.ts b/src/panels/config/automation/action/types/ha-automation-action-condition.ts
index 03eb234832..6509d71c6c 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-condition.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-condition.ts
@@ -1,4 +1,5 @@
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { Condition } from "../../../../../data/automation";
 import { HomeAssistant } from "../../../../../types";
diff --git a/src/panels/config/automation/action/types/ha-automation-action-delay.ts b/src/panels/config/automation/action/types/ha-automation-action-delay.ts
index b805a68b2d..ab9a3ed8ab 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-delay.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-delay.ts
@@ -1,11 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import {
-  customElement,
-  html,
-  LitElement,
-  property,
-  PropertyValues,
-} from "lit-element";
+import { html, LitElement, PropertyValues } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { hasTemplate } from "../../../../../common/string/has-template";
 import "../../../../../components/entity/ha-entity-picker";
diff --git a/src/panels/config/automation/action/types/ha-automation-action-device_id.ts b/src/panels/config/automation/action/types/ha-automation-action-device_id.ts
index 051b3a8889..1a4565f870 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-device_id.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-device_id.ts
@@ -1,10 +1,5 @@
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-} from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/device/ha-device-action-picker";
@@ -24,9 +19,9 @@ export class HaDeviceAction extends LitElement {
 
   @property({ type: Object }) public action!: DeviceAction;
 
-  @internalProperty() private _deviceId?: string;
+  @state() private _deviceId?: string;
 
-  @internalProperty() private _capabilities?: DeviceCapabilities;
+  @state() private _capabilities?: DeviceCapabilities;
 
   private _origAction?: DeviceAction;
 
diff --git a/src/panels/config/automation/action/types/ha-automation-action-event.ts b/src/panels/config/automation/action/types/ha-automation-action-event.ts
index 81fc2c10da..92b64fe634 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-event.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-event.ts
@@ -1,12 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import {
-  customElement,
-  LitElement,
-  property,
-  PropertyValues,
-  query,
-} from "lit-element";
-import { html } from "lit-html";
+import { html, LitElement, PropertyValues } from "lit";
+import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/entity/ha-entity-picker";
 import "../../../../../components/ha-service-picker";
diff --git a/src/panels/config/automation/action/types/ha-automation-action-repeat.ts b/src/panels/config/automation/action/types/ha-automation-action-repeat.ts
index 807aa2fefa..07249aeaf8 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-repeat.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-repeat.ts
@@ -1,8 +1,8 @@
 import "@polymer/paper-input/paper-input";
 import type { PaperListboxElement } from "@polymer/paper-listbox";
 import "@polymer/paper-listbox/paper-listbox";
-import { CSSResult, customElement, LitElement, property } from "lit-element";
-import { html } from "lit-html";
+import { CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import {
   Action,
@@ -165,7 +165,7 @@ export class HaRepeatAction extends LitElement implements ActionElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return haStyle;
   }
 }
diff --git a/src/panels/config/automation/action/types/ha-automation-action-scene.ts b/src/panels/config/automation/action/types/ha-automation-action-scene.ts
index 9b0610b187..6af3f06c40 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-scene.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-scene.ts
@@ -1,4 +1,5 @@
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/entity/ha-entity-picker";
 import { SceneAction } from "../../../../../data/script";
diff --git a/src/panels/config/automation/action/types/ha-automation-action-service.ts b/src/panels/config/automation/action/types/ha-automation-action-service.ts
index 4930c86b9b..eafbc88b60 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-service.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-service.ts
@@ -1,26 +1,18 @@
 import "@polymer/paper-input/paper-input";
-import {
-  css,
-  CSSResult,
-  customElement,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-} from "lit-element";
-import { html } from "lit-html";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { any, assert, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import { hasTemplate } from "../../../../../common/string/has-template";
+import { entityIdOrAll } from "../../../../../common/structs/is-entity-id";
+import "../../../../../components/ha-service-control";
 import { ServiceAction } from "../../../../../data/script";
 import type { HomeAssistant } from "../../../../../types";
-import { EntityIdOrAll } from "../../../../../common/structs/is-entity-id";
 import { ActionElement } from "../ha-automation-action-row";
-import "../../../../../components/ha-service-control";
-import { hasTemplate } from "../../../../../common/string/has-template";
 
 const actionStruct = object({
   service: optional(string()),
-  entity_id: optional(EntityIdOrAll),
+  entity_id: optional(entityIdOrAll()),
   target: optional(any()),
   data: optional(any()),
 });
@@ -33,7 +25,7 @@ export class HaServiceAction extends LitElement implements ActionElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @internalProperty() private _action!: ServiceAction;
+  @state() private _action!: ServiceAction;
 
   public static get defaultConfig() {
     return { service: "", data: {} };
@@ -86,7 +78,7 @@ export class HaServiceAction extends LitElement implements ActionElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-service-control {
         display: block;
diff --git a/src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts b/src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts
index 0d28d05c77..223eb40d9c 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger.ts
@@ -1,7 +1,7 @@
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-input/paper-textarea";
-import { customElement, LitElement, property } from "lit-element";
-import { html } from "lit-html";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-formfield";
 import { WaitForTriggerAction } from "../../../../../data/script";
diff --git a/src/panels/config/automation/action/types/ha-automation-action-wait_template.ts b/src/panels/config/automation/action/types/ha-automation-action-wait_template.ts
index ed6326a381..62e7a5bbb9 100644
--- a/src/panels/config/automation/action/types/ha-automation-action-wait_template.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-wait_template.ts
@@ -1,7 +1,7 @@
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-input/paper-textarea";
-import { customElement, LitElement, property } from "lit-element";
-import { html } from "lit-html";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { WaitAction } from "../../../../../data/script";
 import { HomeAssistant } from "../../../../../types";
diff --git a/src/panels/config/automation/blueprint-automation-editor.ts b/src/panels/config/automation/blueprint-automation-editor.ts
index 75a7019d27..a7ccc8c07c 100644
--- a/src/panels/config/automation/blueprint-automation-editor.ts
+++ b/src/panels/config/automation/blueprint-automation-editor.ts
@@ -2,15 +2,8 @@ import "@material/mwc-button/mwc-button";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
 import "@polymer/paper-input/paper-textarea";
 import { HassEntity } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResult,
-  customElement,
-  internalProperty,
-  LitElement,
-  property,
-} from "lit-element";
-import { html } from "lit-html";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/entity/ha-entity-toggle";
 import "../../../components/ha-blueprint-picker";
@@ -44,7 +37,7 @@ export class HaBlueprintAutomationEditor extends LitElement {
 
   @property() public stateObj?: HassEntity;
 
-  @internalProperty() private _blueprints?: Blueprints;
+  @state() private _blueprints?: Blueprints;
 
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
@@ -270,7 +263,7 @@ export class HaBlueprintAutomationEditor extends LitElement {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/automation/condition/ha-automation-condition-editor.ts b/src/panels/config/automation/condition/ha-automation-condition-editor.ts
index e7a1c2f691..014e40c55b 100644
--- a/src/panels/config/automation/condition/ha-automation-condition-editor.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition-editor.ts
@@ -2,13 +2,8 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox";
-import {
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-card";
@@ -134,7 +129,7 @@ export default class HaAutomationConditionEditor extends LitElement {
     fireEvent(this, "value-changed", { value: ev.detail.value });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return haStyle;
   }
 }
diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts
index 6b824a60fc..8015055358 100644
--- a/src/panels/config/automation/condition/ha-automation-condition-row.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts
@@ -2,24 +2,17 @@ import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
 import "@polymer/paper-item/paper-item";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
 import "../../../../components/ha-icon-button";
 import { Condition } from "../../../../data/automation";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
+import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 import "./ha-automation-condition-editor";
-import { haStyle } from "../../../../resources/styles";
 
 export interface ConditionElement extends LitElement {
   condition: Condition;
@@ -56,7 +49,7 @@ export default class HaAutomationConditionRow extends LitElement {
 
   @property() public condition!: Condition;
 
-  @internalProperty() private _yamlMode = false;
+  @state() private _yamlMode = false;
 
   protected render() {
     if (!this.condition) {
@@ -135,7 +128,7 @@ export default class HaAutomationConditionRow extends LitElement {
     this._yamlMode = !this._yamlMode;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/automation/condition/ha-automation-condition.ts b/src/panels/config/automation/condition/ha-automation-condition.ts
index b4529c4650..513ca4c361 100644
--- a/src/panels/config/automation/condition/ha-automation-condition.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition.ts
@@ -1,13 +1,6 @@
 import "@material/mwc-button";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  PropertyValues,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-card";
 import { Condition } from "../../../../data/automation";
@@ -107,7 +100,7 @@ export default class HaAutomationCondition extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-automation-condition-row,
       ha-card {
diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-and.ts b/src/panels/config/automation/condition/types/ha-automation-condition-and.ts
index 92148e5ffb..482d593d91 100644
--- a/src/panels/config/automation/condition/types/ha-automation-condition-and.ts
+++ b/src/panels/config/automation/condition/types/ha-automation-condition-and.ts
@@ -1,4 +1,4 @@
-import { customElement } from "lit-element";
+import { customElement } from "lit/decorators";
 import { HaLogicalCondition } from "./ha-automation-condition-logical";
 
 @customElement("ha-automation-condition-and")
diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-device.ts b/src/panels/config/automation/condition/types/ha-automation-condition-device.ts
index 4470724548..74277a4680 100644
--- a/src/panels/config/automation/condition/types/ha-automation-condition-device.ts
+++ b/src/panels/config/automation/condition/types/ha-automation-condition-device.ts
@@ -1,10 +1,5 @@
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-} from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/device/ha-device-condition-picker";
@@ -24,9 +19,9 @@ export class HaDeviceCondition extends LitElement {
 
   @property({ type: Object }) public condition!: DeviceCondition;
 
-  @internalProperty() private _deviceId?: string;
+  @state() private _deviceId?: string;
 
-  @internalProperty() private _capabilities?: DeviceCapabilities;
+  @state() private _capabilities?: DeviceCapabilities;
 
   private _origCondition?: DeviceCondition;
 
diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-logical.ts b/src/panels/config/automation/condition/types/ha-automation-condition-logical.ts
index 6d6fc40f77..47fbba8de6 100644
--- a/src/panels/config/automation/condition/types/ha-automation-condition-logical.ts
+++ b/src/panels/config/automation/condition/types/ha-automation-condition-logical.ts
@@ -1,4 +1,5 @@
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { LogicalCondition } from "../../../../../data/automation";
 import { HomeAssistant } from "../../../../../types";
diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-not.ts b/src/panels/config/automation/condition/types/ha-automation-condition-not.ts
index 586346765e..82f8a95049 100644
--- a/src/panels/config/automation/condition/types/ha-automation-condition-not.ts
+++ b/src/panels/config/automation/condition/types/ha-automation-condition-not.ts
@@ -1,4 +1,4 @@
-import { customElement } from "lit-element";
+import { customElement } from "lit/decorators";
 import { HaLogicalCondition } from "./ha-automation-condition-logical";
 
 @customElement("ha-automation-condition-not")
diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-numeric_state.ts b/src/panels/config/automation/condition/types/ha-automation-condition-numeric_state.ts
index 71259efe5d..d953eb7c72 100644
--- a/src/panels/config/automation/condition/types/ha-automation-condition-numeric_state.ts
+++ b/src/panels/config/automation/condition/types/ha-automation-condition-numeric_state.ts
@@ -1,6 +1,7 @@
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-input/paper-textarea";
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../../../../../components/entity/ha-entity-picker";
 import { NumericStateCondition } from "../../../../../data/automation";
 import { HomeAssistant } from "../../../../../types";
diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-or.ts b/src/panels/config/automation/condition/types/ha-automation-condition-or.ts
index 38152f3bbc..ca770ee816 100644
--- a/src/panels/config/automation/condition/types/ha-automation-condition-or.ts
+++ b/src/panels/config/automation/condition/types/ha-automation-condition-or.ts
@@ -1,4 +1,4 @@
-import { customElement } from "lit-element";
+import { customElement } from "lit/decorators";
 import { HaLogicalCondition } from "./ha-automation-condition-logical";
 
 @customElement("ha-automation-condition-or")
diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-state.ts b/src/panels/config/automation/condition/types/ha-automation-condition-state.ts
index d0f18b1ab7..1b841f0af9 100644
--- a/src/panels/config/automation/condition/types/ha-automation-condition-state.ts
+++ b/src/panels/config/automation/condition/types/ha-automation-condition-state.ts
@@ -1,5 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../../../../../components/entity/ha-entity-attribute-picker";
 import "../../../../../components/entity/ha-entity-picker";
 import { ForDict, StateCondition } from "../../../../../data/automation";
diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-sun.ts b/src/panels/config/automation/condition/types/ha-automation-condition-sun.ts
index becb62bf8c..bda9399539 100644
--- a/src/panels/config/automation/condition/types/ha-automation-condition-sun.ts
+++ b/src/panels/config/automation/condition/types/ha-automation-condition-sun.ts
@@ -2,7 +2,8 @@ import "@polymer/paper-input/paper-input";
 import "@polymer/paper-radio-button/paper-radio-button";
 import "@polymer/paper-radio-group/paper-radio-group";
 import type { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import type { SunCondition } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-template.ts b/src/panels/config/automation/condition/types/ha-automation-condition-template.ts
index 6f8fe2329e..d83eea64e2 100644
--- a/src/panels/config/automation/condition/types/ha-automation-condition-template.ts
+++ b/src/panels/config/automation/condition/types/ha-automation-condition-template.ts
@@ -1,5 +1,6 @@
 import "@polymer/paper-input/paper-textarea";
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { TemplateCondition } from "../../../../../data/automation";
 import { HomeAssistant } from "../../../../../types";
 import { handleChangeEvent } from "../ha-automation-condition-row";
diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-time.ts b/src/panels/config/automation/condition/types/ha-automation-condition-time.ts
index 87b22ef223..5b0e56b350 100644
--- a/src/panels/config/automation/condition/types/ha-automation-condition-time.ts
+++ b/src/panels/config/automation/condition/types/ha-automation-condition-time.ts
@@ -1,14 +1,7 @@
 import { Radio } from "@material/mwc-radio";
 import "@polymer/paper-input/paper-input";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { computeRTLDirection } from "../../../../../common/util/compute_rtl";
 import "../../../../../components/ha-formfield";
@@ -43,9 +36,9 @@ export class HaTimeCondition extends LitElement implements ConditionElement {
 
   @property({ attribute: false }) public condition!: TimeCondition;
 
-  @internalProperty() private _inputModeBefore?: boolean;
+  @state() private _inputModeBefore?: boolean;
 
-  @internalProperty() private _inputModeAfter?: boolean;
+  @state() private _inputModeAfter?: boolean;
 
   public static get defaultConfig() {
     return {};
@@ -210,7 +203,7 @@ export class HaTimeCondition extends LitElement implements ConditionElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .weekday-toggle {
         display: flex;
diff --git a/src/panels/config/automation/condition/types/ha-automation-condition-zone.ts b/src/panels/config/automation/condition/types/ha-automation-condition-zone.ts
index e84bd7766d..7511b1ff0d 100644
--- a/src/panels/config/automation/condition/types/ha-automation-condition-zone.ts
+++ b/src/panels/config/automation/condition/types/ha-automation-condition-zone.ts
@@ -1,5 +1,6 @@
 import "@polymer/paper-radio-button/paper-radio-button";
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { computeStateDomain } from "../../../../../common/entity/compute_state_domain";
 import { hasLocation } from "../../../../../common/entity/has_location";
diff --git a/src/panels/config/automation/dialog-new-automation.ts b/src/panels/config/automation/dialog-new-automation.ts
index 3815eee8b0..a86d06bc19 100644
--- a/src/panels/config/automation/dialog-new-automation.ts
+++ b/src/panels/config/automation/dialog-new-automation.ts
@@ -1,33 +1,30 @@
 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 { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { nextRender } from "../../../common/util/render-status";
 import "../../../components/ha-blueprint-picker";
 import "../../../components/ha-card";
 import "../../../components/ha-circular-progress";
-import "../../../components/ha-dialog";
+import { createCloseHeading } from "../../../components/ha-dialog";
 import {
   AutomationConfig,
   showAutomationEditor,
 } from "../../../data/automation";
+import {
+  HassDialog,
+  replaceDialog,
+} from "../../../dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { showThingtalkDialog } from "./thingtalk/show-dialog-thingtalk";
 
 @customElement("ha-dialog-new-automation")
-class DialogNewAutomation extends LitElement {
+class DialogNewAutomation extends LitElement implements HassDialog {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _opened = false;
+  @state() private _opened = false;
 
   public showDialog(): void {
     this._opened = true;
@@ -46,8 +43,9 @@ class DialogNewAutomation extends LitElement {
       <ha-dialog
         open
         @closed=${this.closeDialog}
-        .heading=${this.hass.localize(
-          "ui.panel.config.automation.dialog_new.header"
+        .heading=${createCloseHeading(
+          this.hass,
+          this.hass.localize("ui.panel.config.automation.dialog_new.header")
         )}
       >
         <div>
@@ -107,25 +105,28 @@ class DialogNewAutomation extends LitElement {
   }
 
   private _thingTalk() {
-    this.closeDialog();
+    replaceDialog();
     showThingtalkDialog(this, {
       callback: (config: Partial<AutomationConfig> | undefined) =>
-        showAutomationEditor(this, config),
+        showAutomationEditor(config),
       input: this.shadowRoot!.querySelector("paper-input")!.value as string,
     });
-  }
-
-  private _blueprintPicked(ev: CustomEvent) {
-    showAutomationEditor(this, { use_blueprint: { path: ev.detail.value } });
     this.closeDialog();
   }
 
-  private _blank() {
-    showAutomationEditor(this);
+  private async _blueprintPicked(ev: CustomEvent) {
     this.closeDialog();
+    await nextRender();
+    showAutomationEditor({ use_blueprint: { path: ev.detail.value } });
   }
 
-  static get styles(): CSSResult[] {
+  private async _blank() {
+    this.closeDialog();
+    await nextRender();
+    showAutomationEditor();
+  }
+
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       haStyleDialog,
diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts
index 19c73ac31b..8d6057762d 100644
--- a/src/panels/config/automation/ha-automation-editor.ts
+++ b/src/panels/config/automation/ha-automation-editor.ts
@@ -13,16 +13,14 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
 import "@polymer/paper-input/paper-textarea";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+} from "lit";
+import { property, state, query } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { navigate } from "../../../common/navigate";
 import { copyToClipboard } from "../../../common/util/copy-clipboard";
 import "../../../components/ha-button-menu";
@@ -75,7 +73,7 @@ declare global {
 export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public automationId!: string;
+  @property() public automationId: string | null = null;
 
   @property() public automations!: AutomationEntity[];
 
@@ -85,15 +83,15 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
 
   @property() public route!: Route;
 
-  @internalProperty() private _config?: AutomationConfig;
+  @state() private _config?: AutomationConfig;
 
-  @internalProperty() private _dirty = false;
+  @state() private _dirty = false;
 
-  @internalProperty() private _errors?: string;
+  @state() private _errors?: string;
 
-  @internalProperty() private _entityId?: string;
+  @state() private _entityId?: string;
 
-  @internalProperty() private _mode: "gui" | "yaml" = "gui";
+  @state() private _mode: "gui" | "yaml" = "gui";
 
   @query("ha-yaml-editor", true) private _editor?: HaYamlEditor;
 
@@ -178,14 +176,14 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
             aria-label=${this.hass.localize(
               "ui.panel.config.automation.picker.delete_automation"
             )}
-            class=${classMap({ warning: this.automationId })}
+            class=${classMap({ warning: Boolean(this.automationId) })}
             graphic="icon"
           >
             ${this.hass.localize(
               "ui.panel.config.automation.picker.delete_automation"
             )}
             <ha-svg-icon
-              class=${classMap({ warning: this.automationId })}
+              class=${classMap({ warning: Boolean(this.automationId) })}
               slot="graphic"
               .path=${mdiDelete}
             >
@@ -349,7 +347,10 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
 
   private async _loadConfig() {
     try {
-      const config = await getAutomationConfig(this.hass, this.automationId);
+      const config = await getAutomationConfig(
+        this.hass,
+        this.automationId as string
+      );
 
       // Normalize data: ensure trigger, action and condition are lists
       // Happens when people copy paste their automations into the config
@@ -449,7 +450,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
       // Wait for dialog to complate closing
       await new Promise((resolve) => setTimeout(resolve, 0));
     }
-    showAutomationEditor(this, {
+    showAutomationEditor({
       ...this._config,
       id: undefined,
       alias: `${this._config?.alias} (${this.hass.localize(
@@ -470,7 +471,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
   }
 
   private async _delete() {
-    await deleteAutomation(this.hass, this.automationId);
+    await deleteAutomation(this.hass, this.automationId as string);
     history.back();
   }
 
@@ -502,7 +503,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
         this._dirty = false;
 
         if (!this.automationId) {
-          navigate(this, `/config/automation/edit/${id}`, true);
+          navigate(`/config/automation/edit/${id}`, { replace: true });
         }
       },
       (errors) => {
@@ -519,7 +520,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
     this._saveAutomation();
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts
index 03dd102f45..e2970fc3a5 100644
--- a/src/panels/config/automation/ha-automation-picker.ts
+++ b/src/panels/config/automation/ha-automation-picker.ts
@@ -8,16 +8,9 @@ import {
   mdiPlus,
 } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
-import {
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { formatDateTime } from "../../../common/datetime/format_date_time";
@@ -26,9 +19,9 @@ import { computeStateName } from "../../../common/entity/compute_state_name";
 import { navigate } from "../../../common/navigate";
 import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
 import "../../../components/entity/ha-entity-toggle";
+import "../../../components/ha-button-related-filter-menu";
 import "../../../components/ha-fab";
 import "../../../components/ha-svg-icon";
-import "../../../components/ha-button-related-filter-menu";
 import {
   AutomationEntity,
   triggerAutomationActions,
@@ -56,9 +49,9 @@ class HaAutomationPicker extends LitElement {
 
   @property() private _activeFilters?: string[];
 
-  @internalProperty() private _filteredAutomations?: string[] | null;
+  @state() private _filteredAutomations?: string[] | null;
 
-  @internalProperty() private _filterValue?;
+  @state() private _filterValue?;
 
   private _automations = memoizeOne(
     (
@@ -331,11 +324,11 @@ class HaAutomationPicker extends LitElement {
     ) {
       showNewAutomationDialog(this);
     } else {
-      navigate(this, "/config/automation/edit/new");
+      navigate("/config/automation/edit/new");
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return haStyle;
   }
 }
diff --git a/src/panels/config/automation/ha-config-automation.ts b/src/panels/config/automation/ha-config-automation.ts
index d9db28fac1..8a61fabf57 100644
--- a/src/panels/config/automation/ha-config-automation.ts
+++ b/src/panels/config/automation/ha-config-automation.ts
@@ -1,5 +1,6 @@
 import { HassEntities } from "home-assistant-js-websocket";
-import { customElement, property, PropertyValues } from "lit-element";
+import { PropertyValues } from "lit";
+import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { debounce } from "../../../common/util/debounce";
@@ -9,8 +10,8 @@ import {
   RouterOptions,
 } from "../../../layouts/hass-router-page";
 import { HomeAssistant } from "../../../types";
-import "./ha-automation-picker";
 import "./ha-automation-editor";
+import "./ha-automation-picker";
 
 const equal = (a: AutomationEntity[], b: AutomationEntity[]): boolean => {
   if (a.length !== b.length) {
diff --git a/src/panels/config/automation/manual-automation-editor.ts b/src/panels/config/automation/manual-automation-editor.ts
index 8828066792..9dfdf01ec4 100644
--- a/src/panels/config/automation/manual-automation-editor.ts
+++ b/src/panels/config/automation/manual-automation-editor.ts
@@ -3,14 +3,8 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
 import "@polymer/paper-input/paper-textarea";
 import { PaperListboxElement } from "@polymer/paper-listbox";
 import { HassEntity } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResult,
-  customElement,
-  LitElement,
-  property,
-} from "lit-element";
-import { html } from "lit-html";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/entity/ha-entity-toggle";
 import "../../../components/ha-card";
@@ -317,7 +311,7 @@ export class HaManualAutomationEditor extends LitElement {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/automation/thingtalk/dialog-thingtalk.ts b/src/panels/config/automation/thingtalk/dialog-thingtalk.ts
index 5c09ed45cd..467e293e6d 100644
--- a/src/panels/config/automation/thingtalk/dialog-thingtalk.ts
+++ b/src/panels/config/automation/thingtalk/dialog-thingtalk.ts
@@ -2,17 +2,9 @@ import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state, query } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/dialog/ha-paper-dialog";
 import "../../../../components/ha-circular-progress";
 import type { AutomationConfig } from "../../../../data/automation";
@@ -40,15 +32,15 @@ export interface PlaceholderContainer {
 class DialogThingtalk extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _params?: ThingtalkDialogParams;
+  @state() private _params?: ThingtalkDialogParams;
 
-  @internalProperty() private _submitting = false;
+  @state() private _submitting = false;
 
-  @internalProperty() private _opened = false;
+  @state() private _opened = false;
 
-  @internalProperty() private _placeholders?: PlaceholderContainer;
+  @state() private _placeholders?: PlaceholderContainer;
 
   @query("#input") private _input?: PaperInputElement;
 
@@ -67,6 +59,15 @@ class DialogThingtalk extends LitElement {
     }
   }
 
+  public closeDialog() {
+    this._placeholders = undefined;
+    if (this._input) {
+      this._input.value = null;
+    }
+    this._opened = false;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
   protected render(): TemplateResult {
     if (!this._params) {
       return html``;
@@ -225,25 +226,17 @@ class DialogThingtalk extends LitElement {
 
   private _sendConfig(input, config) {
     this._params!.callback({ alias: input, ...config });
-    this._closeDialog();
+    this.closeDialog();
   }
 
   private _skip() {
     this._params!.callback(undefined);
-    this._closeDialog();
-  }
-
-  private _closeDialog() {
-    this._placeholders = undefined;
-    if (this._input) {
-      this._input.value = null;
-    }
-    this._opened = false;
+    this.closeDialog();
   }
 
   private _openedChanged(ev: PolymerChangedEvent<boolean>): void {
     if (!ev.detail.value) {
-      this._closeDialog();
+      this.closeDialog();
     }
   }
 
@@ -257,7 +250,7 @@ class DialogThingtalk extends LitElement {
     this._input!.value = (ev.target as HTMLAnchorElement).innerText;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       haStyleDialog,
diff --git a/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts b/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts
index f71d8a8ab9..af00652e8f 100644
--- a/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts
+++ b/src/panels/config/automation/thingtalk/ha-thingtalk-placeholders.ts
@@ -1,15 +1,13 @@
 import { HassEntity } from "home-assistant-js-websocket";
 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 "../../../../common/dom/fire_event";
 import { computeDomain } from "../../../../common/entity/compute_domain";
 import { applyPatch, getPath } from "../../../../common/util/patch";
@@ -72,13 +70,13 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) {
 
   @property() public placeholders!: PlaceholderContainer;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
   private _deviceEntityLookup: DeviceEntitiesLookup = {};
 
-  @internalProperty() private _extraInfo: ExtraInfo = {};
+  @state() private _extraInfo: ExtraInfo = {};
 
-  @internalProperty() private _placeholderValues: PlaceholderValues = {};
+  @state() private _placeholderValues: PlaceholderValues = {};
 
   private _devices?: DeviceRegistryEntry[];
 
@@ -198,13 +196,13 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) {
                                       "device_id",
                                     ])
                                   )}`}
-                                  .entityFilter=${(state: HassEntity) => {
+                                  .entityFilter=${(entityState: HassEntity) => {
                                     const devId = this._placeholderValues[type][
                                       placeholder.index
                                     ][idx].device_id;
                                     return this._deviceEntityLookup[
                                       devId
-                                    ].includes(state.entity_id);
+                                    ].includes(entityState.entity_id);
                                   }}
                                 ></ha-entity-picker>
                               `
@@ -470,7 +468,7 @@ export class ThingTalkPlaceholders extends SubscribeMixin(LitElement) {
     this.dispatchEvent(new CustomEvent(ev.type, ev));
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/config/automation/trace/ha-automation-trace-blueprint-config.ts b/src/panels/config/automation/trace/ha-automation-trace-blueprint-config.ts
index 4f9d02403e..bc3117114b 100644
--- a/src/panels/config/automation/trace/ha-automation-trace-blueprint-config.ts
+++ b/src/panels/config/automation/trace/ha-automation-trace-blueprint-config.ts
@@ -1,15 +1,10 @@
-import { safeDump } from "js-yaml";
-import {
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import "../../../../components/ha-icon-button";
+import { dump } from "js-yaml";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../../../../components/ha-code-editor";
-import { HomeAssistant } from "../../../../types";
+import "../../../../components/ha-icon-button";
 import { AutomationTraceExtended } from "../../../../data/trace";
+import { HomeAssistant } from "../../../../types";
 
 @customElement("ha-automation-trace-blueprint-config")
 export class HaAutomationTraceBlueprintConfig extends LitElement {
@@ -20,7 +15,7 @@ export class HaAutomationTraceBlueprintConfig extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-code-editor
-        .value=${safeDump(this.trace.blueprint_inputs || "").trimRight()}
+        .value=${dump(this.trace.blueprint_inputs || "").trimRight()}
         readOnly
       ></ha-code-editor>
     `;
diff --git a/src/panels/config/automation/trace/ha-automation-trace-config.ts b/src/panels/config/automation/trace/ha-automation-trace-config.ts
index f579e30815..c97bb47f8b 100644
--- a/src/panels/config/automation/trace/ha-automation-trace-config.ts
+++ b/src/panels/config/automation/trace/ha-automation-trace-config.ts
@@ -1,16 +1,9 @@
-import { safeDump } from "js-yaml";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { AutomationTraceExtended } from "../../../../data/trace";
-import "../../../../components/ha-icon-button";
+import { dump } from "js-yaml";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../../../../components/ha-code-editor";
+import "../../../../components/ha-icon-button";
+import { AutomationTraceExtended } from "../../../../data/trace";
 import { HomeAssistant } from "../../../../types";
 
 @customElement("ha-automation-trace-config")
@@ -22,13 +15,13 @@ export class HaAutomationTraceConfig extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-code-editor
-        .value=${safeDump(this.trace.config).trimRight()}
+        .value=${dump(this.trace.config).trimRight()}
         readOnly
       ></ha-code-editor>
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [css``];
   }
 }
diff --git a/src/panels/config/automation/trace/ha-automation-trace-logbook.ts b/src/panels/config/automation/trace/ha-automation-trace-logbook.ts
index b18d83d1be..675d355662 100644
--- a/src/panels/config/automation/trace/ha-automation-trace-logbook.ts
+++ b/src/panels/config/automation/trace/ha-automation-trace-logbook.ts
@@ -1,15 +1,8 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import type { HomeAssistant } from "../../../../types";
-import type { LogbookEntry } from "../../../../data/logbook";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../../../../components/trace/hat-logbook-note";
+import type { LogbookEntry } from "../../../../data/logbook";
+import type { HomeAssistant } from "../../../../types";
 import "../../../logbook/ha-logbook";
 
 @customElement("ha-automation-trace-logbook")
@@ -36,7 +29,7 @@ export class HaAutomationTraceLogbook extends LitElement {
         </div>`;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       css`
         .padded-box {
diff --git a/src/panels/config/automation/trace/ha-automation-trace-path-details.ts b/src/panels/config/automation/trace/ha-automation-trace-path-details.ts
index 51ebbdab7f..dc0412b149 100644
--- a/src/panels/config/automation/trace/ha-automation-trace-path-details.ts
+++ b/src/panels/config/automation/trace/ha-automation-trace-path-details.ts
@@ -1,30 +1,22 @@
-import { safeDump } from "js-yaml";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+import { dump } from "js-yaml";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { formatDateTimeWithSeconds } from "../../../../common/datetime/format_date_time";
+import "../../../../components/ha-code-editor";
+import "../../../../components/ha-icon-button";
+import type { NodeInfo } from "../../../../components/trace/hat-graph";
+import "../../../../components/trace/hat-logbook-note";
+import { LogbookEntry } from "../../../../data/logbook";
 import {
   ActionTraceStep,
   AutomationTraceExtended,
   ChooseActionTraceStep,
   getDataFromPath,
 } from "../../../../data/trace";
-import "../../../../components/ha-icon-button";
-import "../../../../components/ha-code-editor";
-import type { NodeInfo } from "../../../../components/trace/hat-graph";
-import "../../../../components/trace/hat-logbook-note";
 import { HomeAssistant } from "../../../../types";
-import { formatDateTimeWithSeconds } from "../../../../common/datetime/format_date_time";
-import { LogbookEntry } from "../../../../data/logbook";
-import { traceTabStyles } from "./styles";
 import "../../../logbook/ha-logbook";
+import { traceTabStyles } from "./styles";
 
 @customElement("ha-automation-trace-path-details")
 export class HaAutomationTracePathDetails extends LitElement {
@@ -38,12 +30,11 @@ export class HaAutomationTracePathDetails extends LitElement {
 
   @property() public logbookEntries!: LogbookEntry[];
 
+  @property() renderedNodes: Record<string, any> = {};
+
   @property() public trackedNodes!: Record<string, any>;
 
-  @internalProperty() private _view:
-    | "config"
-    | "changed_variables"
-    | "logbook" = "config";
+  @state() private _view: "config" | "changed_variables" | "logbook" = "config";
 
   protected render(): TemplateResult {
     return html`
@@ -102,12 +93,12 @@ export class HaAutomationTracePathDetails extends LitElement {
     const parts: TemplateResult[][] = [];
 
     let active = false;
-    const childConditionsPrefix = `${this.selected.path}/conditions/`;
 
     for (const curPath of Object.keys(this.trace.trace)) {
-      // Include all child conditions too
+      // Include all trace results until the next rendered node.
+      // Rendered nodes also include non-chosen choose paths.
       if (active) {
-        if (!curPath.startsWith(childConditionsPrefix)) {
+        if (curPath in this.renderedNodes) {
           break;
         }
       } else if (curPath === this.selected.path) {
@@ -132,9 +123,7 @@ export class HaAutomationTracePathDetails extends LitElement {
           return html`
             ${curPath === this.selected.path
               ? ""
-              : html`<h2>
-                  Condition ${curPath.substr(childConditionsPrefix.length)}
-                </h2>`}
+              : html`<h2>${curPath.substr(this.selected.path.length + 1)}</h2>`}
             ${data.length === 1 ? "" : html`<h3>Iteration ${idx + 1}</h3>`}
             Executed:
             ${formatDateTimeWithSeconds(
@@ -143,13 +132,13 @@ export class HaAutomationTracePathDetails extends LitElement {
             )}<br />
             ${result
               ? html`Result:
-                  <pre>${safeDump(result)}</pre>`
+                  <pre>${dump(result)}</pre>`
               : error
               ? html`<div class="error">Error: ${error}</div>`
               : ""}
             ${Object.keys(rest).length === 0
               ? ""
-              : html`<pre>${safeDump(rest)}</pre>`}
+              : html`<pre>${dump(rest)}</pre>`}
           `;
         })
       );
@@ -165,7 +154,7 @@ export class HaAutomationTracePathDetails extends LitElement {
     const config = getDataFromPath(this.trace!.config, this.selected.path);
     return config
       ? html`<ha-code-editor
-          .value=${safeDump(config).trimRight()}
+          .value=${dump(config).trimRight()}
           readOnly
         ></ha-code-editor>`
       : "Unable to find config";
@@ -182,9 +171,7 @@ export class HaAutomationTracePathDetails extends LitElement {
             ${idx > 0 ? html`<p>Iteration ${idx + 1}</p>` : ""}
             ${Object.keys(trace.changed_variables || {}).length === 0
               ? "No variables changed"
-              : html`<pre>
-${safeDump(trace.changed_variables).trimRight()}</pre
-                >`}
+              : html`<pre>${dump(trace.changed_variables).trimRight()}</pre>`}
           `
         )}
       </div>
@@ -254,7 +241,7 @@ ${safeDump(trace.changed_variables).trimRight()}</pre
     this._view = ev.target.view;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       traceTabStyles,
       css`
diff --git a/src/panels/config/automation/trace/ha-automation-trace-timeline.ts b/src/panels/config/automation/trace/ha-automation-trace-timeline.ts
index b61ce862ee..d379dc6934 100644
--- a/src/panels/config/automation/trace/ha-automation-trace-timeline.ts
+++ b/src/panels/config/automation/trace/ha-automation-trace-timeline.ts
@@ -1,18 +1,11 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import type { AutomationTraceExtended } from "../../../../data/trace";
-import type { HomeAssistant } from "../../../../types";
-import type { LogbookEntry } from "../../../../data/logbook";
-import "../../../../components/trace/hat-trace-timeline";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import type { NodeInfo } from "../../../../components/trace/hat-graph";
 import "../../../../components/trace/hat-logbook-note";
+import "../../../../components/trace/hat-trace-timeline";
+import type { LogbookEntry } from "../../../../data/logbook";
+import type { AutomationTraceExtended } from "../../../../data/trace";
+import type { HomeAssistant } from "../../../../types";
 
 @customElement("ha-automation-trace-timeline")
 export class HaAutomationTraceTimeline extends LitElement {
@@ -38,7 +31,7 @@ export class HaAutomationTraceTimeline extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       css`
         :host {
diff --git a/src/panels/config/automation/trace/ha-automation-trace.ts b/src/panels/config/automation/trace/ha-automation-trace.ts
index 794e06f409..fefffacb80 100644
--- a/src/panels/config/automation/trace/ha-automation-trace.ts
+++ b/src/panels/config/automation/trace/ha-automation-trace.ts
@@ -1,47 +1,39 @@
 import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+  mdiDownload,
+  mdiPencil,
+  mdiRayEndArrow,
+  mdiRayStartArrow,
+  mdiRefresh,
+} from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { repeat } from "lit/directives/repeat";
+import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
+import { formatDateTimeWithSeconds } from "../../../../common/datetime/format_date_time";
+import type { NodeInfo } from "../../../../components/trace/hat-graph";
+import "../../../../components/trace/hat-script-graph";
 import { AutomationEntity } from "../../../../data/automation";
+import {
+  getLogbookDataForContext,
+  LogbookEntry,
+} from "../../../../data/logbook";
 import {
   AutomationTrace,
   AutomationTraceExtended,
   loadTrace,
   loadTraces,
 } from "../../../../data/trace";
-import "../../../../components/trace/hat-script-graph";
-import type { NodeInfo } from "../../../../components/trace/hat-graph";
+import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../resources/styles";
 import { HomeAssistant, Route } from "../../../../types";
 import { configSections } from "../../ha-panel-config";
-import {
-  getLogbookDataForContext,
-  LogbookEntry,
-} from "../../../../data/logbook";
-import { formatDateTimeWithSeconds } from "../../../../common/datetime/format_date_time";
-import { repeat } from "lit-html/directives/repeat";
-import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
-import "./ha-automation-trace-path-details";
-import "./ha-automation-trace-timeline";
+import "./ha-automation-trace-blueprint-config";
 import "./ha-automation-trace-config";
 import "./ha-automation-trace-logbook";
-import { classMap } from "lit-html/directives/class-map";
+import "./ha-automation-trace-path-details";
+import "./ha-automation-trace-timeline";
 import { traceTabStyles } from "./styles";
-import {
-  mdiRayEndArrow,
-  mdiRayStartArrow,
-  mdiPencil,
-  mdiRefresh,
-  mdiDownload,
-} from "@mdi/js";
-import "./ha-automation-trace-blueprint-config";
-import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 
 @customElement("ha-automation-trace")
 export class HaAutomationTrace extends LitElement {
@@ -57,19 +49,19 @@ export class HaAutomationTrace extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
-  @internalProperty() private _entityId?: string;
+  @state() private _entityId?: string;
 
-  @internalProperty() private _traces?: AutomationTrace[];
+  @state() private _traces?: AutomationTrace[];
 
-  @internalProperty() private _runId?: string;
+  @state() private _runId?: string;
 
-  @internalProperty() private _selected?: NodeInfo;
+  @state() private _selected?: NodeInfo;
 
-  @internalProperty() private _trace?: AutomationTraceExtended;
+  @state() private _trace?: AutomationTraceExtended;
 
-  @internalProperty() private _logbookEntries?: LogbookEntry[];
+  @state() private _logbookEntries?: LogbookEntry[];
 
-  @internalProperty() private _view:
+  @state() private _view:
     | "details"
     | "config"
     | "timeline"
@@ -81,9 +73,9 @@ export class HaAutomationTrace extends LitElement {
       ? this.hass.states[this._entityId]
       : undefined;
 
-    const trackedNodes = this.shadowRoot!.querySelector(
-      "hat-script-graph"
-    )?.getTrackedNodes();
+    const graph = this.shadowRoot!.querySelector("hat-script-graph");
+    const trackedNodes = graph?.trackedNodes;
+    const renderedNodes = graph?.renderedNodes;
 
     const title = stateObj?.attributes.friendly_name || this._entityId;
 
@@ -234,6 +226,7 @@ export class HaAutomationTrace extends LitElement {
                           .selected=${this._selected}
                           .logbookEntries=${this._logbookEntries}
                           .trackedNodes=${trackedNodes}
+                          .renderedNodes=${renderedNodes}
                         ></ha-automation-trace-path-details>
                       `
                     : this._view === "config"
@@ -442,15 +435,14 @@ export class HaAutomationTrace extends LitElement {
 
   private _timelinePathPicked(ev) {
     const path = ev.detail.value;
-    const nodes = this.shadowRoot!.querySelector(
-      "hat-script-graph"
-    )!.getTrackedNodes();
+    const nodes = this.shadowRoot!.querySelector("hat-script-graph")!
+      .trackedNodes;
     if (nodes[path]) {
       this._selected = nodes[path];
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       traceTabStyles,
diff --git a/src/panels/config/automation/trace/styles.ts b/src/panels/config/automation/trace/styles.ts
index 4f236499c1..40878d304f 100644
--- a/src/panels/config/automation/trace/styles.ts
+++ b/src/panels/config/automation/trace/styles.ts
@@ -1,4 +1,4 @@
-import { css } from "lit-element";
+import { css } from "lit";
 
 export const traceTabStyles = css`
   .tabs {
diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
index d60c801216..07b8b7373f 100644
--- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
@@ -5,15 +5,8 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-button-menu";
@@ -87,7 +80,7 @@ export default class HaAutomationTriggerRow extends LitElement {
 
   @property() public trigger!: Trigger;
 
-  @internalProperty() private _yamlMode = false;
+  @state() private _yamlMode = false;
 
   protected render() {
     const selected = OPTIONS.indexOf(this.trigger.platform);
@@ -240,7 +233,7 @@ export default class HaAutomationTriggerRow extends LitElement {
     this._yamlMode = !this._yamlMode;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/automation/trigger/ha-automation-trigger.ts b/src/panels/config/automation/trigger/ha-automation-trigger.ts
index 953ec67037..612780c9d4 100644
--- a/src/panels/config/automation/trigger/ha-automation-trigger.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger.ts
@@ -1,12 +1,6 @@
 import "@material/mwc-button";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-card";
 import { Trigger } from "../../../../data/automation";
@@ -77,7 +71,7 @@ export default class HaAutomationTrigger extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-automation-trigger-row,
       ha-card {
diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-device.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-device.ts
index 4bd1d68f36..51a579c2c6 100644
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-device.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-device.ts
@@ -1,10 +1,5 @@
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-} from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/device/ha-device-picker";
@@ -24,9 +19,9 @@ export class HaDeviceTrigger extends LitElement {
 
   @property({ type: Object }) public trigger!: DeviceTrigger;
 
-  @internalProperty() private _deviceId?: string;
+  @state() private _deviceId?: string;
 
-  @internalProperty() private _capabilities?: DeviceCapabilities;
+  @state() private _capabilities?: DeviceCapabilities;
 
   private _origTrigger?: DeviceTrigger;
 
diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts
index 9d53e8ea0e..de11702140 100644
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts
@@ -1,6 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import { customElement, LitElement, property } from "lit-element";
-import { html } from "lit-html";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-yaml-editor";
 import "../../../../../components/user/ha-users-picker";
diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location.ts
index b65fac6d92..55e08598d1 100644
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location.ts
@@ -1,7 +1,8 @@
 import "@polymer/paper-radio-button/paper-radio-button";
 import "@polymer/paper-radio-group/paper-radio-group";
 import type { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/entity/ha-entity-picker";
 import type { GeoLocationTrigger } from "../../../../../data/automation";
diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant.ts
index f811e20f0b..1d45e6c5f6 100644
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant.ts
@@ -1,7 +1,8 @@
 import "@polymer/paper-radio-button/paper-radio-button";
 import "@polymer/paper-radio-group/paper-radio-group";
 import type { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import type { HassTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt.ts
index 0450f37ff2..e3e997771f 100644
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt.ts
@@ -1,5 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { MqttTrigger } from "../../../../../data/automation";
 import { HomeAssistant } from "../../../../../types";
 import {
diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state.ts
index 0c54205b2b..cf7cf64115 100644
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state.ts
@@ -1,6 +1,7 @@
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-input/paper-textarea";
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../../../../../components/entity/ha-entity-picker";
 import { ForDict, NumericStateTrigger } from "../../../../../data/automation";
 import { HomeAssistant } from "../../../../../types";
diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-state.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-state.ts
index c128904318..1ad3b18555 100644
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-state.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-state.ts
@@ -1,5 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../../../../../components/entity/ha-entity-attribute-picker";
 import "../../../../../components/entity/ha-entity-picker";
 import { ForDict, StateTrigger } from "../../../../../data/automation";
diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-sun.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-sun.ts
index 3c2bb9cf62..d940a3e1cc 100644
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-sun.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-sun.ts
@@ -2,7 +2,8 @@ import "@polymer/paper-input/paper-input";
 import "@polymer/paper-radio-button/paper-radio-button";
 import "@polymer/paper-radio-group/paper-radio-group";
 import type { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import type { SunTrigger } from "../../../../../data/automation";
 import type { HomeAssistant } from "../../../../../types";
diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts
index bd40b48e21..5accba1a25 100644
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts
@@ -1,12 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-} from "lit-element";
+import { html, LitElement, PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { TagTrigger } from "../../../../../data/automation";
 import { fetchTags, Tag } from "../../../../../data/tag";
@@ -19,7 +13,7 @@ export class HaTagTrigger extends LitElement implements TriggerElement {
 
   @property() public trigger!: TagTrigger;
 
-  @internalProperty() private _tags: Tag[] = [];
+  @state() private _tags: Tag[] = [];
 
   public static get defaultConfig() {
     return { tag_id: "" };
diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-template.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-template.ts
index 5e9483e0c8..2a40c2fc9d 100644
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-template.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-template.ts
@@ -1,5 +1,6 @@
 import "@polymer/paper-input/paper-textarea";
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { TemplateTrigger } from "../../../../../data/automation";
 import { HomeAssistant } from "../../../../../types";
 import { handleChangeEvent } from "../ha-automation-trigger-row";
diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-time.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-time.ts
index 5b18ff0e20..ddb0404907 100644
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-time.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-time.ts
@@ -1,11 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-} from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import "../../../../../components/entity/ha-entity-picker";
 import "../../../../../components/ha-formfield";
 import "../../../../../components/ha-radio";
@@ -24,7 +19,7 @@ export class HaTimeTrigger extends LitElement implements TriggerElement {
 
   @property() public trigger!: TimeTrigger;
 
-  @internalProperty() private _inputMode?: boolean;
+  @state() private _inputMode?: boolean;
 
   public static get defaultConfig() {
     return { at: "" };
diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-time_pattern.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-time_pattern.ts
index 1f0f081ad9..b1b0a74f4c 100644
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-time_pattern.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-time_pattern.ts
@@ -1,5 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { TimePatternTrigger } from "../../../../../data/automation";
 import { HomeAssistant } from "../../../../../types";
 import {
diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-webhook.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-webhook.ts
index 3eb56a805e..4d90ec0219 100644
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-webhook.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-webhook.ts
@@ -1,5 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { WebhookTrigger } from "../../../../../data/automation";
 import { HomeAssistant } from "../../../../../types";
 import { handleChangeEvent } from "../ha-automation-trigger-row";
diff --git a/src/panels/config/automation/trigger/types/ha-automation-trigger-zone.ts b/src/panels/config/automation/trigger/types/ha-automation-trigger-zone.ts
index 4d93d61f6c..a8b4ba457e 100644
--- a/src/panels/config/automation/trigger/types/ha-automation-trigger-zone.ts
+++ b/src/panels/config/automation/trigger/types/ha-automation-trigger-zone.ts
@@ -1,7 +1,8 @@
 import "@polymer/paper-radio-button/paper-radio-button";
 import "@polymer/paper-radio-group/paper-radio-group";
 import type { PaperRadioGroupElement } from "@polymer/paper-radio-group/paper-radio-group";
-import { customElement, html, LitElement, property } from "lit-element";
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { computeStateDomain } from "../../../../../common/entity/compute_state_domain";
 import { hasLocation } from "../../../../../common/entity/has_location";
diff --git a/src/panels/config/blueprint/dialog-import-blueprint.ts b/src/panels/config/blueprint/dialog-import-blueprint.ts
index 325fccc460..db171c6449 100644
--- a/src/panels/config/blueprint/dialog-import-blueprint.ts
+++ b/src/panels/config/blueprint/dialog-import-blueprint.ts
@@ -1,21 +1,14 @@
-import "../../../components/ha-markdown";
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import {
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state, query } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-circular-progress";
+import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-expansion-panel";
+import "../../../components/ha-markdown";
 import {
   BlueprintImportResult,
   importBlueprint,
@@ -23,23 +16,22 @@ import {
 } from "../../../data/blueprint";
 import { haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
-import { createCloseHeading } from "../../../components/ha-dialog";
 
 @customElement("ha-dialog-import-blueprint")
 class DialogImportBlueprint extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _params?;
+  @state() private _params?;
 
-  @internalProperty() private _importing = false;
+  @state() private _importing = false;
 
-  @internalProperty() private _saving = false;
+  @state() private _saving = false;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _result?: BlueprintImportResult;
+  @state() private _result?: BlueprintImportResult;
 
-  @internalProperty() private _url?: string;
+  @state() private _url?: string;
 
   @query("#input") private _input?: PaperInputElement;
 
@@ -221,7 +213,7 @@ class DialogImportBlueprint extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return haStyleDialog;
   }
 }
diff --git a/src/panels/config/blueprint/ha-blueprint-overview.ts b/src/panels/config/blueprint/ha-blueprint-overview.ts
index 68b1e0cf32..37b4fba05f 100644
--- a/src/panels/config/blueprint/ha-blueprint-overview.ts
+++ b/src/panels/config/blueprint/ha-blueprint-overview.ts
@@ -8,14 +8,13 @@ import {
 } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
@@ -47,11 +46,8 @@ interface BlueprintMetaDataPath extends BlueprintMetaData {
 }
 
 const createNewFunctions = {
-  automation: (
-    context: HaBlueprintOverview,
-    blueprintMeta: BlueprintMetaDataPath
-  ) => {
-    showAutomationEditor(context, {
+  automation: (blueprintMeta: BlueprintMetaDataPath) => {
+    showAutomationEditor({
       alias: blueprintMeta.name,
       use_blueprint: { path: blueprintMeta.path },
     });
@@ -184,7 +180,7 @@ class HaBlueprintOverview extends LitElement {
     super.firstUpdated(changedProps);
     if (this.route.path === "/import") {
       const url = extractSearchParam("blueprint_url");
-      navigate(this, "/config/blueprint/dashboard", true);
+      navigate("/config/blueprint/dashboard", { replace: true });
       if (url) {
         this._addBlueprint(url);
       }
@@ -281,7 +277,7 @@ class HaBlueprintOverview extends LitElement {
 
   private _createNew(ev) {
     const blueprint = ev.currentTarget.blueprint as BlueprintMetaDataPath;
-    createNewFunctions[blueprint.domain](this, blueprint);
+    createNewFunctions[blueprint.domain](blueprint);
   }
 
   private _share(ev) {
@@ -312,7 +308,7 @@ class HaBlueprintOverview extends LitElement {
     fireEvent(this, "reload-blueprints");
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return haStyle;
   }
 }
diff --git a/src/panels/config/blueprint/ha-config-blueprint.ts b/src/panels/config/blueprint/ha-config-blueprint.ts
index efe7e82645..3ea73842da 100644
--- a/src/panels/config/blueprint/ha-config-blueprint.ts
+++ b/src/panels/config/blueprint/ha-config-blueprint.ts
@@ -1,4 +1,5 @@
-import { customElement, property, PropertyValues } from "lit-element";
+import { PropertyValues } from "lit";
+import { customElement, property } from "lit/decorators";
 import { Blueprints, fetchBlueprints } from "../../../data/blueprint";
 import {
   HassRouterPage,
diff --git a/src/panels/config/cloud/account/cloud-account.js b/src/panels/config/cloud/account/cloud-account.js
index ae3d8823ca..9670794dfc 100644
--- a/src/panels/config/cloud/account/cloud-account.js
+++ b/src/panels/config/cloud/account/cloud-account.js
@@ -92,7 +92,9 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
                 <paper-item-body
                   >[[localize('ui.panel.config.cloud.account.connection_status')]]</paper-item-body
                 >
-                <div class="status">[[cloudStatus.cloud]]</div>
+                <div class="status">
+                  [[_computeConnectionStatus(cloudStatus.cloud)]]
+                </div>
               </div>
 
               <div class="card-actions">
@@ -189,10 +191,12 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
     this._fetchSubscriptionInfo();
   }
 
-  _computeRemoteConnected(connected) {
-    return connected
+  _computeConnectionStatus(status) {
+    return status === "connected"
       ? this.hass.localize("ui.panel.config.cloud.account.connected")
-      : this.hass.localize("ui.panel.config.cloud.account.not_connected");
+      : status === "disconnected"
+      ? this.hass.localize("ui.panel.config.cloud.account.not_connected")
+      : this.hass.localize("ui.panel.config.cloud.account.connecting");
   }
 
   async _fetchSubscriptionInfo() {
diff --git a/src/panels/config/cloud/account/cloud-alexa-pref.ts b/src/panels/config/cloud/account/cloud-alexa-pref.ts
index 8d6c190d7d..9b98f7d560 100644
--- a/src/panels/config/cloud/account/cloud-alexa-pref.ts
+++ b/src/panels/config/cloud/account/cloud-alexa-pref.ts
@@ -1,13 +1,6 @@
 import "@material/mwc-button";
-import {
-  css,
-  CSSResult,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-card";
 import "../../../../components/ha-switch";
@@ -21,7 +14,7 @@ export class CloudAlexaPref extends LitElement {
 
   @property() public cloudStatus?: CloudStatusLoggedIn;
 
-  @internalProperty() private _syncing = false;
+  @state() private _syncing = false;
 
   protected render(): TemplateResult {
     if (!this.cloudStatus) {
@@ -161,7 +154,7 @@ export class CloudAlexaPref extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       a {
         color: var(--primary-color);
diff --git a/src/panels/config/cloud/account/cloud-google-pref.ts b/src/panels/config/cloud/account/cloud-google-pref.ts
index b0c86ea7f5..b572e7a67e 100644
--- a/src/panels/config/cloud/account/cloud-google-pref.ts
+++ b/src/panels/config/cloud/account/cloud-google-pref.ts
@@ -1,14 +1,8 @@
 import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import {
-  css,
-  CSSResult,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/buttons/ha-call-api-button";
 import "../../../../components/ha-card";
@@ -220,7 +214,7 @@ export class CloudGooglePref extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       a {
         color: var(--primary-color);
diff --git a/src/panels/config/cloud/account/cloud-remote-pref.ts b/src/panels/config/cloud/account/cloud-remote-pref.ts
index 223f58dd1a..a2973d250b 100644
--- a/src/panels/config/cloud/account/cloud-remote-pref.ts
+++ b/src/panels/config/cloud/account/cloud-remote-pref.ts
@@ -1,14 +1,7 @@
 import "@material/mwc-button";
 import "@polymer/paper-item/paper-item-body";
-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 { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-card";
 import "../../../../components/ha-switch";
@@ -156,7 +149,7 @@ export class CloudRemotePref extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .preparing {
         padding: 0 16px 16px;
diff --git a/src/panels/config/cloud/account/cloud-tts-pref.ts b/src/panels/config/cloud/account/cloud-tts-pref.ts
index b55b070333..1b57e7b113 100644
--- a/src/panels/config/cloud/account/cloud-tts-pref.ts
+++ b/src/panels/config/cloud/account/cloud-tts-pref.ts
@@ -1,32 +1,24 @@
+import "@material/mwc-button";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-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 memoizeOne from "memoize-one";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import { caseInsensitiveCompare } from "../../../../common/string/compare";
 import "../../../../components/ha-card";
-import "../../../../components/ha-switch";
 import "../../../../components/ha-svg-icon";
+import "../../../../components/ha-switch";
 import {
   CloudStatusLoggedIn,
   CloudTTSInfo,
   getCloudTTSInfo,
   updateCloudPref,
 } from "../../../../data/cloud";
-import type { HomeAssistant } from "../../../../types";
 import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
 import { translationMetadata } from "../../../../resources/translations-metadata";
-import { caseInsensitiveCompare } from "../../../../common/string/compare";
-import memoizeOne from "memoize-one";
-import { fireEvent } from "../../../../common/dom/fire_event";
+import type { HomeAssistant } from "../../../../types";
 import { showTryTtsDialog } from "./show-dialog-cloud-tts-try";
 
 @customElement("cloud-tts-pref")
@@ -35,9 +27,9 @@ export class CloudTTSPref extends LitElement {
 
   @property() public cloudStatus?: CloudStatusLoggedIn;
 
-  @internalProperty() private savingPreferences = false;
+  @state() private savingPreferences = false;
 
-  @internalProperty() private ttsInfo?: CloudTTSInfo;
+  @state() private ttsInfo?: CloudTTSInfo;
 
   protected render(): TemplateResult {
     if (!this.cloudStatus) {
@@ -231,7 +223,7 @@ export class CloudTTSPref extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       a {
         color: var(--primary-color);
diff --git a/src/panels/config/cloud/account/cloud-webhooks.ts b/src/panels/config/cloud/account/cloud-webhooks.ts
index 57f4ee24ac..309e78b651 100644
--- a/src/panels/config/cloud/account/cloud-webhooks.ts
+++ b/src/panels/config/cloud/account/cloud-webhooks.ts
@@ -1,20 +1,12 @@
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 import "../../../../components/ha-card";
 import "../../../../components/ha-circular-progress";
 import "../../../../components/ha-settings-row";
 import "../../../../components/ha-switch";
-import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 import {
   CloudStatusLoggedIn,
   CloudWebhook,
@@ -34,13 +26,13 @@ export class CloudWebhooks extends LitElement {
 
   @property({ type: Boolean }) public narrow!: boolean;
 
-  @internalProperty() private _cloudHooks?: {
+  @state() private _cloudHooks?: {
     [webhookId: string]: CloudWebhook;
   };
 
-  @internalProperty() private _localHooks?: Webhook[];
+  @state() private _localHooks?: Webhook[];
 
-  @internalProperty() private _progress: string[] = [];
+  @state() private _progress: string[] = [];
 
   public connectedCallback() {
     super.connectedCallback();
@@ -208,7 +200,7 @@ export class CloudWebhooks extends LitElement {
       : [];
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/cloud/account/dialog-cloud-tts-try.ts b/src/panels/config/cloud/account/dialog-cloud-tts-try.ts
index e4d340d46d..9da9b5ca10 100644
--- a/src/panels/config/cloud/account/dialog-cloud-tts-try.ts
+++ b/src/panels/config/cloud/account/dialog-cloud-tts-try.ts
@@ -1,42 +1,33 @@
 import "@material/mwc-button";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
-import { HomeAssistant } from "../../../../types";
-import { TryTtsDialogParams } from "./show-dialog-cloud-tts-try";
-import { haStyleDialog } from "../../../../resources/styles";
-import { fireEvent } from "../../../../common/dom/fire_event";
-import { convertTextToSpeech } from "../../../../data/tts";
-import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
+import { mdiPlayCircleOutline } from "@mdi/js";
 import "@polymer/paper-input/paper-textarea";
-import "../../../../components/ha-paper-dropdown-menu";
-import { computeStateDomain } from "../../../../common/entity/compute_state_domain";
-import { computeStateName } from "../../../../common/entity/compute_state_name";
+import type { PaperTextareaElement } from "@polymer/paper-input/paper-textarea";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-import { supportsFeature } from "../../../../common/entity/supports-feature";
-import { SUPPORT_PLAY_MEDIA } from "../../../../data/media-player";
-import { createCloseHeading } from "../../../../components/ha-dialog";
-import { mdiPlayCircleOutline } from "@mdi/js";
 import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox";
-import type { PaperTextareaElement } from "@polymer/paper-input/paper-textarea";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state, query } from "lit/decorators";
 import { LocalStorage } from "../../../../common/decorators/local-storage";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import { computeStateDomain } from "../../../../common/entity/compute_state_domain";
+import { computeStateName } from "../../../../common/entity/compute_state_name";
+import { supportsFeature } from "../../../../common/entity/supports-feature";
+import { createCloseHeading } from "../../../../components/ha-dialog";
+import "../../../../components/ha-paper-dropdown-menu";
+import { SUPPORT_PLAY_MEDIA } from "../../../../data/media-player";
+import { convertTextToSpeech } from "../../../../data/tts";
+import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
+import { haStyleDialog } from "../../../../resources/styles";
+import { HomeAssistant } from "../../../../types";
+import { TryTtsDialogParams } from "./show-dialog-cloud-tts-try";
 
 @customElement("dialog-cloud-try-tts")
 export class DialogTryTts extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _loadingExample = false;
+  @state() private _loadingExample = false;
 
-  @internalProperty() private _params?: TryTtsDialogParams;
+  @state() private _params?: TryTtsDialogParams;
 
   @query("#target") private _targetInput?: PaperListboxElement;
 
@@ -189,7 +180,7 @@ export class DialogTryTts extends LitElement {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/config/cloud/alexa/cloud-alexa.ts b/src/panels/config/cloud/alexa/cloud-alexa.ts
index 079ebdef10..f3cdda6971 100644
--- a/src/panels/config/cloud/alexa/cloud-alexa.ts
+++ b/src/panels/config/cloud/alexa/cloud-alexa.ts
@@ -6,17 +6,9 @@ import {
   mdiCloseBox,
   mdiCloseBoxMultiple,
 } from "@mdi/js";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  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, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeDomain } from "../../../../common/entity/compute_domain";
@@ -59,7 +51,7 @@ class CloudAlexa extends LitElement {
 
   @property({ type: Boolean }) public narrow!: boolean;
 
-  @internalProperty() private _entities?: AlexaEntity[];
+  @state() private _entities?: AlexaEntity[];
 
   @property()
   private _entityConfigs: CloudPreferences["alexa_entity_configs"] = {};
@@ -440,7 +432,7 @@ class CloudAlexa extends LitElement {
     );
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts b/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts
index 3a5e6811b2..8351c20cc0 100644
--- a/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts
+++ b/src/panels/config/cloud/dialog-cloud-certificate/dialog-cloud-certificate.ts
@@ -1,12 +1,6 @@
 import "@material/mwc-button";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { formatDateTime } from "../../../../common/datetime/format_date_time";
 import "../../../../components/dialog/ha-paper-dialog";
 import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
@@ -81,7 +75,7 @@ class DialogCloudCertificate extends LitElement {
     this._dialog.close();
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts b/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts
index 3a1c744c41..2fea1ef018 100644
--- a/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts
+++ b/src/panels/config/cloud/dialog-manage-cloudhook/dialog-manage-cloudhook.ts
@@ -2,13 +2,8 @@ import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import {
-  css,
-  CSSResult,
-  html,
-  internalProperty,
-  LitElement,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { state } from "lit/decorators";
 import "../../../../components/dialog/ha-paper-dialog";
 import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
@@ -22,7 +17,7 @@ const inputLabel = "Public URL – Click to copy to clipboard";
 export class DialogManageCloudhook extends LitElement {
   protected hass?: HomeAssistant;
 
-  @internalProperty() private _params?: WebhookDialogParams;
+  @state() private _params?: WebhookDialogParams;
 
   public async showDialog(params: WebhookDialogParams) {
     this._params = params;
@@ -148,7 +143,7 @@ export class DialogManageCloudhook extends LitElement {
     this._paperInput.label = inputLabel;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts b/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
index 3ba045e6a5..29068eeb71 100644
--- a/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
+++ b/src/panels/config/cloud/google-assistant/cloud-google-assistant.ts
@@ -6,17 +6,9 @@ import {
   mdiCloseBox,
   mdiCloseBoxMultiple,
 } from "@mdi/js";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  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, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeDomain } from "../../../../common/entity/compute_domain";
@@ -64,7 +56,7 @@ class CloudGoogleAssistant extends LitElement {
 
   @property() public narrow!: boolean;
 
-  @internalProperty() private _entities?: GoogleEntity[];
+  @state() private _entities?: GoogleEntity[];
 
   @property()
   private _entityConfigs: CloudPreferences["google_entity_configs"] = {};
@@ -486,7 +478,7 @@ class CloudGoogleAssistant extends LitElement {
     );
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/cloud/ha-config-cloud.ts b/src/panels/config/cloud/ha-config-cloud.ts
index 1bf79fac77..8fe5c0a085 100644
--- a/src/panels/config/cloud/ha-config-cloud.ts
+++ b/src/panels/config/cloud/ha-config-cloud.ts
@@ -1,5 +1,5 @@
 import { PolymerElement } from "@polymer/polymer";
-import { customElement, internalProperty, property } from "lit-element";
+import { customElement, property, state } from "lit/decorators";
 import { navigate } from "../../../common/navigate";
 import { CloudStatus } from "../../../data/cloud";
 import {
@@ -67,9 +67,9 @@ class HaConfigCloud extends HassRouterPage {
     },
   };
 
-  @internalProperty() private _flashMessage = "";
+  @state() private _flashMessage = "";
 
-  @internalProperty() private _loginEmail = "";
+  @state() private _loginEmail = "";
 
   private _resolveCloudStatusLoaded!: () => void;
 
@@ -81,7 +81,7 @@ class HaConfigCloud extends HassRouterPage {
     super.firstUpdated(changedProps);
     this.addEventListener("cloud-done", (ev) => {
       this._flashMessage = (ev as any).detail.flashMessage;
-      navigate(this, "/config/cloud/login");
+      navigate("/config/cloud/login");
     });
   }
 
@@ -95,7 +95,7 @@ class HaConfigCloud extends HassRouterPage {
       if (oldStatus === undefined) {
         this._resolveCloudStatusLoaded();
       } else if (oldStatus.logged_in !== this.cloudStatus.logged_in) {
-        navigate(this, this.route.prefix, true);
+        navigate(this.route.prefix, { replace: true });
       }
     }
   }
diff --git a/src/panels/config/core/ha-config-analytics.ts b/src/panels/config/core/ha-config-analytics.ts
index ee145e9f64..1050e7f8ca 100644
--- a/src/panels/config/core/ha-config-analytics.ts
+++ b/src/panels/config/core/ha-config-analytics.ts
@@ -1,15 +1,13 @@
 import "@material/mwc-button/mwc-button";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/ha-analytics";
 import { analyticsLearnMore } from "../../../components/ha-analytics-learn-more";
@@ -28,9 +26,9 @@ import type { HomeAssistant } from "../../../types";
 class ConfigAnalytics extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _analyticsDetails?: Analytics;
+  @state() private _analyticsDetails?: Analytics;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
   protected render(): TemplateResult {
     const error = this._error
@@ -101,7 +99,7 @@ class ConfigAnalytics extends LitElement {
     };
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/core/ha-config-core-form.ts b/src/panels/config/core/ha-config-core-form.ts
index f14b1ca526..322c2697c1 100644
--- a/src/panels/config/core/ha-config-core-form.ts
+++ b/src/panels/config/core/ha-config-core-form.ts
@@ -3,16 +3,9 @@ import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import "@polymer/paper-radio-button/paper-radio-button";
 import "@polymer/paper-radio-group/paper-radio-group";
-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 memoizeOne from "memoize-one";
 import { UNIT_C } from "../../../common/const";
 import "../../../components/ha-card";
 import "../../../components/map/ha-location-editor";
@@ -25,15 +18,15 @@ import type { HomeAssistant } from "../../../types";
 class ConfigCoreForm extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _working = false;
+  @state() private _working = false;
 
-  @internalProperty() private _location!: [number, number];
+  @state() private _location!: [number, number];
 
-  @internalProperty() private _elevation!: string;
+  @state() private _elevation!: string;
 
-  @internalProperty() private _unitSystem!: ConfigUpdateValues["unit_system"];
+  @state() private _unitSystem!: ConfigUpdateValues["unit_system"];
 
-  @internalProperty() private _timeZone!: string;
+  @state() private _timeZone!: string;
 
   protected render(): TemplateResult {
     const canEdit = ["storage", "default"].includes(
@@ -62,7 +55,11 @@ class ConfigCoreForm extends LitElement {
             <ha-location-editor
               class="flex"
               .hass=${this.hass}
-              .location=${this._locationValue}
+              .location=${this._locationValue(
+                this._location,
+                this.hass.config.latitude,
+                this.hass.config.longitude
+              )}
               @change=${this._locationChanged}
             ></ha-location-editor>
           </div>
@@ -165,11 +162,9 @@ class ConfigCoreForm extends LitElement {
     input.inputElement.appendChild(createTimezoneListEl());
   }
 
-  private get _locationValue() {
-    return this._location !== undefined
-      ? this._location
-      : [Number(this.hass.config.latitude), Number(this.hass.config.longitude)];
-  }
+  private _locationValue = memoizeOne(
+    (location, lat, lng) => location || [Number(lat), Number(lng)]
+  );
 
   private get _elevationValue() {
     return this._elevation !== undefined
@@ -209,7 +204,11 @@ class ConfigCoreForm extends LitElement {
   private async _save() {
     this._working = true;
     try {
-      const location = this._locationValue;
+      const location = this._locationValue(
+        this._location,
+        this.hass.config.latitude,
+        this.hass.config.longitude
+      );
       await saveCoreConfig(this.hass, {
         latitude: location[0],
         longitude: location[1],
@@ -224,7 +223,7 @@ class ConfigCoreForm extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .row {
         display: flex;
diff --git a/src/panels/config/core/ha-config-name-form.ts b/src/panels/config/core/ha-config-name-form.ts
index 3dbdefb1ed..f99e073cb8 100644
--- a/src/panels/config/core/ha-config-name-form.ts
+++ b/src/panels/config/core/ha-config-name-form.ts
@@ -3,15 +3,8 @@ import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import "@polymer/paper-radio-button/paper-radio-button";
 import "@polymer/paper-radio-group/paper-radio-group";
-import {
-  css,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import "../../../components/ha-card";
 import { ConfigUpdateValues, saveCoreConfig } from "../../../data/core";
 import type { PolymerChangedEvent } from "../../../polymer-types";
@@ -21,9 +14,9 @@ import type { HomeAssistant } from "../../../types";
 class ConfigNameForm extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _working = false;
+  @state() private _working = false;
 
-  @internalProperty() private _name!: ConfigUpdateValues["location_name"];
+  @state() private _name!: ConfigUpdateValues["location_name"];
 
   protected render(): TemplateResult {
     const canEdit = ["storage", "default"].includes(
diff --git a/src/panels/config/core/ha-config-network.ts b/src/panels/config/core/ha-config-network.ts
new file mode 100644
index 0000000000..6793673711
--- /dev/null
+++ b/src/panels/config/core/ha-config-network.ts
@@ -0,0 +1,128 @@
+import "@material/mwc-button/mwc-button";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import "../../../components/ha-network";
+import "../../../components/ha-card";
+import "../../../components/ha-checkbox";
+import "../../../components/ha-settings-row";
+import {
+  NetworkConfig,
+  getNetworkConfig,
+  setNetworkConfig,
+} from "../../../data/network";
+import { haStyle } from "../../../resources/styles";
+import type { HomeAssistant } from "../../../types";
+
+@customElement("ha-config-network")
+class ConfigNetwork extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _networkConfig?: NetworkConfig;
+
+  @state() private _error?: string;
+
+  protected render(): TemplateResult {
+    if (
+      !this.hass.userData?.showAdvanced ||
+      !isComponentLoaded(this.hass, "network")
+    ) {
+      return html``;
+    }
+
+    return html`
+      <ha-card header="Network">
+        <div class="card-content">
+          ${this._error ? html`<div class="error">${this._error}</div>` : ""}
+          <p>
+            Configure which network adapters integrations will use. Currently
+            this setting only affects multicast traffic. A restart is required
+            for these settings to apply.
+          </p>
+          <ha-network
+            @network-config-changed=${this._configChanged}
+            .hass=${this.hass}
+            .networkConfig=${this._networkConfig}
+          ></ha-network>
+        </div>
+        <div class="card-actions">
+          <mwc-button @click=${this._save}>
+            ${this.hass.localize(
+              "ui.panel.config.core.section.core.core_config.save_button"
+            )}
+          </mwc-button>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    if (isComponentLoaded(this.hass, "network")) {
+      this._load();
+    }
+  }
+
+  private async _load() {
+    this._error = undefined;
+    try {
+      this._networkConfig = await getNetworkConfig(this.hass);
+    } catch (err) {
+      this._error = err.message || err;
+    }
+  }
+
+  private async _save() {
+    this._error = undefined;
+    try {
+      await setNetworkConfig(
+        this.hass,
+        this._networkConfig?.configured_adapters || []
+      );
+    } catch (err) {
+      this._error = err.message || err;
+    }
+  }
+
+  private _configChanged(event: CustomEvent): void {
+    this._networkConfig = {
+      ...this._networkConfig!,
+      configured_adapters: event.detail.configured_adapters,
+    };
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        .error {
+          color: var(--error-color);
+        }
+
+        ha-settings-row {
+          padding: 0;
+        }
+
+        .card-actions {
+          display: flex;
+          flex-direction: row-reverse;
+          justify-content: space-between;
+          align-items: center;
+        }
+      `, // row-reverse so we tab first to "save"
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-network": ConfigNetwork;
+  }
+}
diff --git a/src/panels/config/core/ha-config-section-core.js b/src/panels/config/core/ha-config-section-core.js
index 4e50ab56c4..6c74b6f539 100644
--- a/src/panels/config/core/ha-config-section-core.js
+++ b/src/panels/config/core/ha-config-section-core.js
@@ -11,6 +11,7 @@ import "../ha-config-section";
 import "./ha-config-analytics";
 import "./ha-config-core-form";
 import "./ha-config-name-form";
+import "./ha-config-network";
 import "./ha-config-url-form";
 
 /*
@@ -30,6 +31,7 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
         <ha-config-name-form hass="[[hass]]"></ha-config-name-form>
         <ha-config-core-form hass="[[hass]]"></ha-config-core-form>
         <ha-config-url-form hass="[[hass]]"></ha-config-url-form>
+        <ha-config-network hass="[[hass]]"></ha-config-network>
         <ha-config-analytics hass="[[hass]]"></ha-config-analytics>
       </ha-config-section>
     `;
diff --git a/src/panels/config/core/ha-config-url-form.ts b/src/panels/config/core/ha-config-url-form.ts
index 778fa18a66..6c7e9f0468 100644
--- a/src/panels/config/core/ha-config-url-form.ts
+++ b/src/panels/config/core/ha-config-url-form.ts
@@ -1,16 +1,8 @@
 import "@material/mwc-button/mwc-button";
 import "@polymer/paper-input/paper-input";
 import type { 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 "../../../components/ha-card";
 import { saveCoreConfig } from "../../../data/core";
 import type { PolymerChangedEvent } from "../../../polymer-types";
@@ -20,13 +12,13 @@ import type { HomeAssistant } from "../../../types";
 class ConfigUrlForm extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _working = false;
+  @state() private _working = false;
 
-  @internalProperty() private _external_url?: string;
+  @state() private _external_url?: string;
 
-  @internalProperty() private _internal_url?: string;
+  @state() private _internal_url?: string;
 
   protected render(): TemplateResult {
     const canEdit = ["storage", "default"].includes(
@@ -135,7 +127,7 @@ class ConfigUrlForm extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .row {
         display: flex;
diff --git a/src/panels/config/customize/ha-config-customize.ts b/src/panels/config/customize/ha-config-customize.ts
index c1802cc6aa..d6109546fc 100644
--- a/src/panels/config/customize/ha-config-customize.ts
+++ b/src/panels/config/customize/ha-config-customize.ts
@@ -1,11 +1,5 @@
-import {
-  css,
-  CSSResult,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { property } from "lit/decorators";
 import "../../../components/ha-card";
 import "../../../layouts/hass-loading-screen";
 import "../../../layouts/hass-tabs-subpage";
@@ -80,7 +74,7 @@ class HaConfigCustomize extends LitElement {
     this._selectedEntityId = routeSegments.length > 1 ? routeSegments[1] : "";
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       a {
         color: var(--primary-color);
diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts
index 9e740eea4a..f81527cce0 100644
--- a/src/panels/config/dashboard/ha-config-dashboard.ts
+++ b/src/panels/config/dashboard/ha-config-dashboard.ts
@@ -1,15 +1,8 @@
 import { mdiCloudLock } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import {
-  css,
-  CSSResultArray,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-next";
@@ -111,7 +104,7 @@ class HaConfigDashboard extends LitElement {
     `;
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/dashboard/ha-config-navigation.ts b/src/panels/config/dashboard/ha-config-navigation.ts
index f1b958a4fe..ee08290b06 100644
--- a/src/panels/config/dashboard/ha-config-navigation.ts
+++ b/src/panels/config/dashboard/ha-config-navigation.ts
@@ -1,14 +1,7 @@
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
-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 { canShowPage } from "../../../common/config/can_show_page";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-next";
@@ -76,7 +69,7 @@ class HaConfigNavigation extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       a {
         text-decoration: none;
diff --git a/src/panels/config/devices/device-detail/ha-device-actions-card.ts b/src/panels/config/devices/device-detail/ha-device-actions-card.ts
index a5d5e4507f..bec915a9e3 100644
--- a/src/panels/config/devices/device-detail/ha-device-actions-card.ts
+++ b/src/panels/config/devices/device-detail/ha-device-actions-card.ts
@@ -1,4 +1,4 @@
-import { customElement } from "lit-element";
+import { customElement } from "lit/decorators";
 import "../../../../components/ha-card";
 import {
   DeviceAction,
diff --git a/src/panels/config/devices/device-detail/ha-device-automation-card.ts b/src/panels/config/devices/device-detail/ha-device-automation-card.ts
index b267581048..741c426f3d 100644
--- a/src/panels/config/devices/device-detail/ha-device-automation-card.ts
+++ b/src/panels/config/devices/device-detail/ha-device-automation-card.ts
@@ -1,11 +1,5 @@
-import {
-  css,
-  CSSResult,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { property } from "lit/decorators";
 import "../../../../components/ha-card";
 import "../../../../components/ha-chip-set";
 import { showAutomationEditor } from "../../../../data/automation";
@@ -78,15 +72,15 @@ export abstract class HaDeviceAutomationCard<
       return;
     }
     if (this.script) {
-      showScriptEditor(this, { sequence: [automation as DeviceAction] });
+      showScriptEditor({ sequence: [automation as DeviceAction] });
       return;
     }
     const data = {};
     data[this.type] = [automation];
-    showAutomationEditor(this, data);
+    showAutomationEditor(data);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       h3 {
         color: var(--primary-text-color);
diff --git a/src/panels/config/devices/device-detail/ha-device-automation-dialog.ts b/src/panels/config/devices/device-detail/ha-device-automation-dialog.ts
index d374b14860..eb18201a25 100644
--- a/src/panels/config/devices/device-detail/ha-device-automation-dialog.ts
+++ b/src/panels/config/devices/device-detail/ha-device-automation-dialog.ts
@@ -1,12 +1,6 @@
-import {
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import "@material/mwc-button/mwc-button";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-dialog";
 import {
@@ -23,19 +17,18 @@ import "./ha-device-actions-card";
 import "./ha-device-conditions-card";
 import "./ha-device-triggers-card";
 import { DeviceAutomationDialogParams } from "./show-dialog-device-automation";
-import "@material/mwc-button/mwc-button";
 
 @customElement("dialog-device-automation")
 export class DialogDeviceAutomation extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _triggers: DeviceTrigger[] = [];
+  @state() private _triggers: DeviceTrigger[] = [];
 
-  @internalProperty() private _conditions: DeviceCondition[] = [];
+  @state() private _conditions: DeviceCondition[] = [];
 
-  @internalProperty() private _actions: DeviceAction[] = [];
+  @state() private _actions: DeviceAction[] = [];
 
-  @internalProperty() private _params?: DeviceAutomationDialogParams;
+  @state() private _params?: DeviceAutomationDialogParams;
 
   public async showDialog(params: DeviceAutomationDialogParams): Promise<void> {
     this._params = params;
@@ -140,7 +133,7 @@ export class DialogDeviceAutomation extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return haStyleDialog;
   }
 }
diff --git a/src/panels/config/devices/device-detail/ha-device-conditions-card.ts b/src/panels/config/devices/device-detail/ha-device-conditions-card.ts
index 54f126667a..ffa084bf6c 100644
--- a/src/panels/config/devices/device-detail/ha-device-conditions-card.ts
+++ b/src/panels/config/devices/device-detail/ha-device-conditions-card.ts
@@ -1,4 +1,4 @@
-import { customElement } from "lit-element";
+import { customElement } from "lit/decorators";
 import "../../../../components/ha-card";
 import {
   DeviceCondition,
diff --git a/src/panels/config/devices/device-detail/ha-device-entities-card.ts b/src/panels/config/devices/device-detail/ha-device-entities-card.ts
index 946c46e665..5bb169256b 100644
--- a/src/panels/config/devices/device-detail/ha-device-entities-card.ts
+++ b/src/panels/config/devices/device-detail/ha-device-entities-card.ts
@@ -3,14 +3,13 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property } from "lit/decorators";
 import { computeDomain } from "../../../../common/entity/compute_domain";
 import { domainIcon } from "../../../../common/entity/domain_icon";
 import "../../../../components/entity/state-badge";
@@ -173,7 +172,7 @@ export class HaDeviceEntitiesCard extends LitElement {
     );
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;
diff --git a/src/panels/config/devices/device-detail/ha-device-info-card.ts b/src/panels/config/devices/device-detail/ha-device-info-card.ts
index af8110fe2c..f442246d0f 100644
--- a/src/panels/config/devices/device-detail/ha-device-info-card.ts
+++ b/src/panels/config/devices/device-detail/ha-device-info-card.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 { AreaRegistryEntry } from "../../../../data/area_registry";
 import {
   computeDeviceName,
@@ -94,7 +87,7 @@ export class HaDeviceCard extends LitElement {
         )})`;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;
diff --git a/src/panels/config/devices/device-detail/ha-device-triggers-card.ts b/src/panels/config/devices/device-detail/ha-device-triggers-card.ts
index ec14f55d35..bdf15ee03b 100644
--- a/src/panels/config/devices/device-detail/ha-device-triggers-card.ts
+++ b/src/panels/config/devices/device-detail/ha-device-triggers-card.ts
@@ -1,4 +1,4 @@
-import { customElement } from "lit-element";
+import { customElement } from "lit/decorators";
 import {
   DeviceTrigger,
   localizeDeviceAutomationTrigger,
diff --git a/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts b/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts
index d66d736779..0208bbbd7a 100644
--- a/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts
@@ -1,13 +1,6 @@
 import "@material/mwc-button/mwc-button";
-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 { computeStateName } from "../../../../../../common/entity/compute_state_name";
 import { computeRTLDirection } from "../../../../../../common/util/compute_rtl";
 import "../../../../../../components/ha-dialog";
@@ -29,13 +22,13 @@ import { MQTTDeviceDebugInfoDialogParams } from "./show-dialog-mqtt-device-debug
 class DialogMQTTDeviceDebugInfo extends LitElement {
   public hass!: HomeAssistant;
 
-  @internalProperty() private _params?: MQTTDeviceDebugInfoDialogParams;
+  @state() private _params?: MQTTDeviceDebugInfoDialogParams;
 
-  @internalProperty() private _debugInfo?: MQTTDeviceDebugInfo;
+  @state() private _debugInfo?: MQTTDeviceDebugInfo;
 
-  @internalProperty() private _showAsYaml = true;
+  @state() private _showAsYaml = true;
 
-  @internalProperty() private _showDeserialized = true;
+  @state() private _showDeserialized = true;
 
   public async showDialog(
     params: MQTTDeviceDebugInfoDialogParams
@@ -56,7 +49,7 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
     return html`
       <ha-dialog
         open
-        @closing=${this._close}
+        @closed=${this._close}
         .heading="${this.hass!.localize(
           "ui.dialogs.mqtt_device_debug_info.title",
           "device",
@@ -219,7 +212,7 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/config/devices/device-detail/integration-elements/mqtt/ha-device-actions-mqtt.ts b/src/panels/config/devices/device-detail/integration-elements/mqtt/ha-device-actions-mqtt.ts
index 2b5c29b052..4be0413450 100644
--- a/src/panels/config/devices/device-detail/integration-elements/mqtt/ha-device-actions-mqtt.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/ha-device-actions-mqtt.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 { DeviceRegistryEntry } from "../../../../../../data/device_registry";
 import { removeMQTTDeviceEntry } from "../../../../../../data/mqtt";
 import { showConfirmationDialog } from "../../../../../../dialogs/generic/show-dialog-box";
@@ -46,7 +39,7 @@ export class HaDeviceActionsMqtt extends LitElement {
     await showMQTTDeviceDebugInfoDialog(this, { device });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-discovery-payload.ts b/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-discovery-payload.ts
index a820ef9bf3..cb5e8e3b84 100644
--- a/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-discovery-payload.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-discovery-payload.ts
@@ -1,15 +1,7 @@
-import { safeDump } from "js-yaml";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+import { dump } from "js-yaml";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 
 @customElement("mqtt-discovery-payload")
 class MQTTDiscoveryPayload extends LitElement {
@@ -19,7 +11,7 @@ class MQTTDiscoveryPayload extends LitElement {
 
   @property() public summary!: string;
 
-  @internalProperty() private _open = false;
+  @state() private _open = false;
 
   protected render(): TemplateResult {
     return html`
@@ -39,7 +31,7 @@ class MQTTDiscoveryPayload extends LitElement {
     const payload = this.payload;
     return html`
       ${this.showAsYaml
-        ? html` <pre>${safeDump(payload)}</pre> `
+        ? html` <pre>${dump(payload)}</pre> `
         : html` <pre>${JSON.stringify(payload, null, 2)}</pre> `}
     `;
   }
@@ -48,7 +40,7 @@ class MQTTDiscoveryPayload extends LitElement {
     this._open = !this._open;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .expander {
         cursor: pointer;
diff --git a/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts b/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts
index 15a8ce0051..d07f83fb5f 100644
--- a/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts
@@ -1,15 +1,7 @@
-import { safeDump } from "js-yaml";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+import { dump } from "js-yaml";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { formatTimeWithSeconds } from "../../../../../../common/datetime/format_time";
 import { MQTTMessage } from "../../../../../../data/mqtt";
 import { HomeAssistant } from "../../../../../../types";
@@ -28,11 +20,11 @@ class MQTTMessages extends LitElement {
 
   @property() public summary!: string;
 
-  @internalProperty() private _open = false;
+  @state() private _open = false;
 
-  @internalProperty() private _payloadsJson = new WeakMap();
+  @state() private _payloadsJson = new WeakMap();
 
-  @internalProperty() private _showTopic = false;
+  @state() private _showTopic = false;
 
   protected firstUpdated(): void {
     this.messages.forEach((message) => {
@@ -100,7 +92,7 @@ class MQTTMessages extends LitElement {
     return json
       ? html`
           ${this.showAsYaml
-            ? html` <pre>${safeDump(json)}</pre> `
+            ? html` <pre>${dump(json)}</pre> `
             : html` <pre>${JSON.stringify(json, null, 2)}</pre> `}
         `
       : html` <code>${message.payload}</code> `;
@@ -133,7 +125,7 @@ class MQTTMessages extends LitElement {
     this._open = !this._open;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .expander {
         cursor: pointer;
diff --git a/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-actions-ozw.ts b/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-actions-ozw.ts
index 82f770c928..3608c6514d 100644
--- a/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-actions-ozw.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-actions-ozw.ts
@@ -1,14 +1,13 @@
 import "@material/mwc-button/mwc-button";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property } from "lit/decorators";
 import { navigate } from "../../../../../../common/navigate";
 import { DeviceRegistryEntry } from "../../../../../../data/device_registry";
 import {
@@ -67,12 +66,11 @@ export class HaDeviceActionsOzw extends LitElement {
 
   private async _nodeDetailsClicked() {
     navigate(
-      this,
       `/config/ozw/network/${this.ozw_instance}/node/${this.node_id}/dashboard`
     );
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-info-ozw.ts b/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-info-ozw.ts
index f23ce1c636..bfb4d7bba8 100644
--- a/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-info-ozw.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/ozw/ha-device-info-ozw.ts
@@ -1,14 +1,12 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { DeviceRegistryEntry } from "../../../../../../data/device_registry";
 import {
   fetchOZWNodeStatus,
@@ -31,7 +29,7 @@ export class HaDeviceInfoOzw extends LitElement {
   @property()
   private ozw_instance = 1;
 
-  @internalProperty() private _ozwDevice?: OZWDevice;
+  @state() private _ozwDevice?: OZWDevice;
 
   protected updated(changedProperties: PropertyValues) {
     if (changedProperties.has("device")) {
@@ -85,7 +83,7 @@ export class HaDeviceInfoOzw extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/devices/device-detail/integration-elements/tasmota/ha-device-actions-tasmota.ts b/src/panels/config/devices/device-detail/integration-elements/tasmota/ha-device-actions-tasmota.ts
index 96253e2bd9..33bc22a3a3 100644
--- a/src/panels/config/devices/device-detail/integration-elements/tasmota/ha-device-actions-tasmota.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/tasmota/ha-device-actions-tasmota.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 { DeviceRegistryEntry } from "../../../../../../data/device_registry";
 import { removeTasmotaDeviceEntry } from "../../../../../../data/tasmota";
 import { showConfirmationDialog } from "../../../../../../dialogs/generic/show-dialog-box";
@@ -39,7 +32,7 @@ export class HaDeviceActionsTasmota extends LitElement {
     await removeTasmotaDeviceEntry(this.hass!, this.device.id);
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts b/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts
index 4d0b380bb2..2a0337c043 100644
--- a/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-actions-zha.ts
@@ -1,14 +1,12 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { navigate } from "../../../../../../common/navigate";
 import { DeviceRegistryEntry } from "../../../../../../data/device_registry";
 import { fetchZHADevice, ZHADevice } from "../../../../../../data/zha";
@@ -16,9 +14,9 @@ import { showConfirmationDialog } from "../../../../../../dialogs/generic/show-d
 import { haStyle } from "../../../../../../resources/styles";
 import { HomeAssistant } from "../../../../../../types";
 import { showZHAClusterDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-cluster";
+import { showZHADeviceChildrenDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-device-children";
 import { showZHADeviceZigbeeInfoDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-device-zigbee-info";
 import { showZHAReconfigureDeviceDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-reconfigure-device";
-import { showZHADeviceChildrenDialog } from "../../../../integrations/integration-panels/zha/show-dialog-zha-device-children";
 
 @customElement("ha-device-actions-zha")
 export class HaDeviceActionsZha extends LitElement {
@@ -26,7 +24,7 @@ export class HaDeviceActionsZha extends LitElement {
 
   @property() public device!: DeviceRegistryEntry;
 
-  @internalProperty() private _zhaDevice?: ZHADevice;
+  @state() private _zhaDevice?: ZHADevice;
 
   protected updated(changedProperties: PropertyValues) {
     if (changedProperties.has("device")) {
@@ -109,14 +107,11 @@ export class HaDeviceActionsZha extends LitElement {
   }
 
   private _onAddDevicesClick() {
-    navigate(this, "/config/zha/add/" + this._zhaDevice!.ieee);
+    navigate(`/config/zha/add/${this._zhaDevice!.ieee}`);
   }
 
   private _onViewInVisualizationClick() {
-    navigate(
-      this,
-      "/config/zha/visualization/" + this._zhaDevice!.device_reg_id
-    );
+    navigate(`/config/zha/visualization/${this._zhaDevice!.device_reg_id}`);
   }
 
   private async _handleZigbeeInfoClicked() {
@@ -145,7 +140,7 @@ export class HaDeviceActionsZha extends LitElement {
     history.back();
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-info-zha.ts b/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-info-zha.ts
index 5440940f16..28a3e3e0e6 100644
--- a/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-info-zha.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/zha/ha-device-info-zha.ts
@@ -1,14 +1,12 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { DeviceRegistryEntry } from "../../../../../../data/device_registry";
 import { fetchZHADevice, ZHADevice } from "../../../../../../data/zha";
 import { haStyle } from "../../../../../../resources/styles";
@@ -21,7 +19,7 @@ export class HaDeviceActionsZha extends LitElement {
 
   @property() public device!: DeviceRegistryEntry;
 
-  @internalProperty() private _zhaDevice?: ZHADevice;
+  @state() private _zhaDevice?: ZHADevice;
 
   protected updated(changedProperties: PropertyValues) {
     if (changedProperties.has("device")) {
@@ -77,7 +75,7 @@ export class HaDeviceActionsZha extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-actions-zwave_js.ts b/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-actions-zwave_js.ts
index a43d8126f3..e258e66835 100644
--- a/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-actions-zwave_js.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-actions-zwave_js.ts
@@ -1,15 +1,13 @@
 import "@material/mwc-button/mwc-button";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { DeviceRegistryEntry } from "../../../../../../data/device_registry";
 import {
   getIdentifiersFromDevice,
@@ -25,9 +23,9 @@ export class HaDeviceActionsZWaveJS extends LitElement {
 
   @property() public device!: DeviceRegistryEntry;
 
-  @internalProperty() private _entryId?: string;
+  @state() private _entryId?: string;
 
-  @internalProperty() private _nodeId?: number;
+  @state() private _nodeId?: number;
 
   protected updated(changedProperties: PropertyValues) {
     if (changedProperties.has("device")) {
@@ -70,7 +68,7 @@ export class HaDeviceActionsZWaveJS extends LitElement {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts b/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts
index ed35383b16..f8558fc5fb 100644
--- a/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts
+++ b/src/panels/config/devices/device-detail/integration-elements/zwave_js/ha-device-info-zwave_js.ts
@@ -1,23 +1,20 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { DeviceRegistryEntry } from "../../../../../../data/device_registry";
 import {
-  getIdentifiersFromDevice,
   fetchNodeStatus,
+  getIdentifiersFromDevice,
+  nodeStatus,
   ZWaveJSNode,
   ZWaveJSNodeIdentifiers,
-  nodeStatus,
 } from "../../../../../../data/zwave_js";
-
 import { haStyle } from "../../../../../../resources/styles";
 import { HomeAssistant } from "../../../../../../types";
 
@@ -27,13 +24,13 @@ export class HaDeviceInfoZWaveJS extends LitElement {
 
   @property() public device!: DeviceRegistryEntry;
 
-  @internalProperty() private _entryId?: string;
+  @state() private _entryId?: string;
 
-  @internalProperty() private _nodeId?: number;
+  @state() private _nodeId?: number;
 
-  @internalProperty() private _homeId?: string;
+  @state() private _homeId?: string;
 
-  @internalProperty() private _node?: ZWaveJSNode;
+  @state() private _node?: ZWaveJSNode;
 
   protected updated(changedProperties: PropertyValues) {
     if (changedProperties.has("device")) {
@@ -95,7 +92,7 @@ export class HaDeviceInfoZWaveJS extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts b/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts
index 99bd51dcb7..5a36906c77 100644
--- a/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts
+++ b/src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts
@@ -3,16 +3,8 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-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 { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-area-picker";
 import "../../../../components/ha-dialog";
@@ -27,17 +19,17 @@ import { DeviceRegistryDetailDialogParams } from "./show-dialog-device-registry-
 class DialogDeviceRegistryDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _nameByUser!: string;
+  @state() private _nameByUser!: string;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _params?: DeviceRegistryDetailDialogParams;
+  @state() private _params?: DeviceRegistryDetailDialogParams;
 
-  @internalProperty() private _areaId?: string | null;
+  @state() private _areaId?: string | null;
 
-  @internalProperty() private _disabledBy!: string | null;
+  @state() private _disabledBy!: string | null;
 
-  @internalProperty() private _submitting?: boolean;
+  @state() private _submitting?: boolean;
 
   public async showDialog(
     params: DeviceRegistryDetailDialogParams
@@ -159,7 +151,7 @@ class DialogDeviceRegistryDetail extends LitElement {
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       haStyleDialog,
diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts
index bf2575ee97..3e2cdcfd4e 100644
--- a/src/panels/config/devices/ha-config-device-page.ts
+++ b/src/panels/config/devices/ha-config-device-page.ts
@@ -1,15 +1,7 @@
 import "@polymer/paper-tooltip/paper-tooltip";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
@@ -75,7 +67,7 @@ export class HaConfigDevicePage extends LitElement {
 
   @property() public route!: Route;
 
-  @internalProperty() private _related?: RelatedResult;
+  @state() private _related?: RelatedResult;
 
   private _device = memoizeOne(
     (
@@ -323,28 +315,28 @@ export class HaConfigDevicePage extends LitElement {
                       </h1>
                       ${this._related?.automation?.length
                         ? this._related.automation.map((automation) => {
-                            const state = this.hass.states[automation];
-                            return state
+                            const entityState = this.hass.states[automation];
+                            return entityState
                               ? html`
                                   <div>
                                     <a
                                       href=${ifDefined(
-                                        state.attributes.id
-                                          ? `/config/automation/edit/${state.attributes.id}`
+                                        entityState.attributes.id
+                                          ? `/config/automation/edit/${entityState.attributes.id}`
                                           : undefined
                                       )}
                                     >
                                       <paper-item
-                                        .automation=${state}
-                                        .disabled=${!state.attributes.id}
+                                        .automation=${entityState}
+                                        .disabled=${!entityState.attributes.id}
                                       >
                                         <paper-item-body>
-                                          ${computeStateName(state)}
+                                          ${computeStateName(entityState)}
                                         </paper-item-body>
                                         <ha-icon-next></ha-icon-next>
                                       </paper-item>
                                     </a>
-                                    ${!state.attributes.id
+                                    ${!entityState.attributes.id
                                       ? html`
                                           <paper-tooltip animation-delay="0">
                                             ${this.hass.localize(
@@ -402,28 +394,29 @@ export class HaConfigDevicePage extends LitElement {
                         ${
                           this._related?.scene?.length
                             ? this._related.scene.map((scene) => {
-                                const state = this.hass.states[scene];
-                                return state
+                                const entityState = this.hass.states[scene];
+                                return entityState
                                   ? html`
                                       <div>
                                         <a
                                           href=${ifDefined(
-                                            state.attributes.id
-                                              ? `/config/scene/edit/${state.attributes.id}`
+                                            entityState.attributes.id
+                                              ? `/config/scene/edit/${entityState.attributes.id}`
                                               : undefined
                                           )}
                                         >
                                           <paper-item
-                                            .scene=${state}
-                                            .disabled=${!state.attributes.id}
+                                            .scene=${entityState}
+                                            .disabled=${!entityState.attributes
+                                              .id}
                                           >
                                             <paper-item-body>
-                                              ${computeStateName(state)}
+                                              ${computeStateName(entityState)}
                                             </paper-item-body>
                                             <ha-icon-next></ha-icon-next>
                                           </paper-item>
                                         </a>
-                                        ${!state.attributes.id
+                                        ${!entityState.attributes.id
                                           ? html`
                                               <paper-tooltip
                                                 animation-delay="0"
@@ -478,15 +471,15 @@ export class HaConfigDevicePage extends LitElement {
                         </h1>
                         ${this._related?.script?.length
                           ? this._related.script.map((script) => {
-                              const state = this.hass.states[script];
-                              return state
+                              const entityState = this.hass.states[script];
+                              return entityState
                                 ? html`
                                     <a
-                                      href=${`/config/script/edit/${state.entity_id}`}
+                                      href=${`/config/script/edit/${entityState.entity_id}`}
                                     >
                                       <paper-item .script=${script}>
                                         <paper-item-body>
-                                          ${computeStateName(state)}
+                                          ${computeStateName(entityState)}
                                         </paper-item-body>
                                         <ha-icon-next></ha-icon-next>
                                       </paper-item>
@@ -519,8 +512,8 @@ export class HaConfigDevicePage extends LitElement {
     if (entity.name) {
       return entity.name;
     }
-    const state = this.hass.states[entity.entity_id];
-    return state ? computeStateName(state) : null;
+    const entityState = this.hass.states[entity.entity_id];
+    return entityState ? computeStateName(entityState) : null;
   }
 
   private _onImageLoad(ev) {
@@ -540,7 +533,7 @@ export class HaConfigDevicePage extends LitElement {
     this._entities(this.deviceId, this.entities).forEach((entity) => {
       entities[entity.entity_id] = "";
     });
-    showSceneEditor(this, {
+    showSceneEditor({
       entities,
     });
   }
@@ -748,7 +741,7 @@ export class HaConfigDevicePage extends LitElement {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/devices/ha-config-devices-dashboard.ts b/src/panels/config/devices/ha-config-devices-dashboard.ts
index 67dd2fa2c2..b30b7a24d4 100644
--- a/src/panels/config/devices/ha-config-devices-dashboard.ts
+++ b/src/panels/config/devices/ha-config-devices-dashboard.ts
@@ -2,16 +2,8 @@ import "@material/mwc-list/mwc-list-item";
 import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
 import { mdiCancel, mdiFilterVariant, mdiPlus } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
-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 memoizeOne from "memoize-one";
 import { HASSDomEvent } from "../../../common/dom/fire_event";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
@@ -68,15 +60,37 @@ export class HaConfigDeviceDashboard extends LitElement {
 
   @property() public route!: Route;
 
-  @internalProperty() private _searchParms = new URLSearchParams(
-    window.location.search
-  );
+  @state() private _searchParms = new URLSearchParams(window.location.search);
 
-  @internalProperty() private _showDisabled = false;
+  @state() private _showDisabled = false;
 
-  @internalProperty() private _filter = "";
+  @state() private _filter = "";
 
-  @internalProperty() private _numHiddenDevices = 0;
+  @state() private _numHiddenDevices = 0;
+
+  private _ignoreLocationChange = false;
+
+  public constructor() {
+    super();
+    window.addEventListener("location-changed", () => {
+      if (this._ignoreLocationChange) {
+        this._ignoreLocationChange = false;
+        return;
+      }
+      if (
+        window.location.search.substring(1) !== this._searchParms.toString()
+      ) {
+        this._searchParms = new URLSearchParams(window.location.search);
+      }
+    });
+    window.addEventListener("popstate", () => {
+      if (
+        window.location.search.substring(1) !== this._searchParms.toString()
+      ) {
+        this._searchParms = new URLSearchParams(window.location.search);
+      }
+    });
+  }
 
   private _activeFilters = memoizeOne(
     (
@@ -88,10 +102,6 @@ export class HaConfigDeviceDashboard extends LitElement {
       filters.forEach((value, key) => {
         switch (key) {
           case "config_entry": {
-            // If we are requested to show the devices for a given config entry,
-            // also show the disabled ones by default.
-            this._showDisabled = true;
-
             const configEntry = entries.find(
               (entry) => entry.entry_id === value
             );
@@ -128,7 +138,6 @@ export class HaConfigDeviceDashboard extends LitElement {
     ) => {
       // Some older installations might have devices pointing at invalid entryIDs
       // So we guard for that.
-
       let outputDevices: DeviceRowData[] = devices;
 
       const deviceLookup: { [deviceId: string]: DeviceRegistryEntry } = {};
@@ -325,14 +334,14 @@ export class HaConfigDeviceDashboard extends LitElement {
     }
   );
 
-  public constructor() {
-    super();
-    window.addEventListener("location-changed", () => {
-      this._searchParms = new URLSearchParams(window.location.search);
-    });
-    window.addEventListener("popstate", () => {
-      this._searchParms = new URLSearchParams(window.location.search);
-    });
+  public willUpdate(changedProps) {
+    if (changedProps.has("_searchParms")) {
+      if (this._searchParms.get("config_entry")) {
+        // If we are requested to show the devices for a given config entry,
+        // also show the disabled ones by default.
+        this._showDisabled = true;
+      }
+    }
   }
 
   protected render(): TemplateResult {
@@ -445,7 +454,8 @@ export class HaConfigDeviceDashboard extends LitElement {
 
   private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
     const deviceId = ev.detail.id;
-    navigate(this, `/config/devices/device/${deviceId}`);
+    this._ignoreLocationChange = true;
+    navigate(`/config/devices/device/${deviceId}`);
   }
 
   private _showDisabledChanged(ev: CustomEvent<RequestSelectedDetail>) {
@@ -463,12 +473,12 @@ export class HaConfigDeviceDashboard extends LitElement {
     if (
       this._activeFilters(this.entries, this._searchParms, this.hass.localize)
     ) {
-      navigate(this, window.location.pathname, true);
+      navigate(window.location.pathname, { replace: true });
     }
     this._showDisabled = true;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       css`
         ha-button-menu {
diff --git a/src/panels/config/devices/ha-config-devices.ts b/src/panels/config/devices/ha-config-devices.ts
index 82dd2d7720..fe5625565c 100644
--- a/src/panels/config/devices/ha-config-devices.ts
+++ b/src/panels/config/devices/ha-config-devices.ts
@@ -1,10 +1,6 @@
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import {
-  customElement,
-  internalProperty,
-  property,
-  PropertyValues,
-} from "lit-element";
+import { PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import {
   AreaRegistryEntry,
   subscribeAreaRegistry,
@@ -49,15 +45,15 @@ class HaConfigDevices extends HassRouterPage {
     },
   };
 
-  @internalProperty() private _configEntries: ConfigEntry[] = [];
+  @state() private _configEntries: ConfigEntry[] = [];
 
-  @internalProperty()
+  @state()
   private _entityRegistryEntries: EntityRegistryEntry[] = [];
 
-  @internalProperty()
+  @state()
   private _deviceRegistryEntries: DeviceRegistryEntry[] = [];
 
-  @internalProperty() private _areas: AreaRegistryEntry[] = [];
+  @state() private _areas: AreaRegistryEntry[] = [];
 
   private _unsubs?: UnsubscribeFunc[];
 
diff --git a/src/panels/config/entities/dialog-entity-editor.ts b/src/panels/config/entities/dialog-entity-editor.ts
index c0f4f18ea7..a9f02c9137 100644
--- a/src/panels/config/entities/dialog-entity-editor.ts
+++ b/src/panels/config/entities/dialog-entity-editor.ts
@@ -3,17 +3,9 @@ import "@material/mwc-tab";
 import "@material/mwc-tab-bar";
 import { mdiClose, mdiTune } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-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 { dynamicElement } from "../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
@@ -26,13 +18,13 @@ import {
   ExtEntityRegistryEntry,
   getExtendedEntityRegistryEntry,
 } from "../../../data/entity_registry";
+import { replaceDialog } from "../../../dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../resources/styles";
 import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import { PLATFORMS_WITH_SETTINGS_TAB } from "./const";
 import "./entity-registry-settings";
 import type { EntityRegistryDetailDialogParams } from "./show-dialog-entity-editor";
-import { replaceDialog } from "../../../dialogs/make-dialog-manager";
 
 interface Tabs {
   [key: string]: Tab;
@@ -47,30 +39,24 @@ interface Tab {
 export class DialogEntityEditor extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _params?: EntityRegistryDetailDialogParams;
+  @state() private _params?: EntityRegistryDetailDialogParams;
 
-  @internalProperty() private _entry?:
-    | EntityRegistryEntry
-    | ExtEntityRegistryEntry
-    | null;
+  @state() private _entry?: EntityRegistryEntry | ExtEntityRegistryEntry | null;
 
-  @internalProperty() private _curTab = "tab-settings";
+  @state() private _curTab = "tab-settings";
 
-  @internalProperty() private _extraTabs: Tabs = {};
+  @state() private _extraTabs: Tabs = {};
 
-  @internalProperty() private _settingsElementTag?: string;
+  @state() private _settingsElementTag?: string;
 
   private _curTabIndex = 0;
 
-  public async showDialog(
-    params: EntityRegistryDetailDialogParams
-  ): Promise<void> {
+  public showDialog(params: EntityRegistryDetailDialogParams): void {
     this._params = params;
     this._entry = undefined;
     this._settingsElementTag = undefined;
     this._extraTabs = {};
     this._getEntityReg();
-    await this.updateComplete;
   }
 
   public closeDialog(): void {
@@ -256,7 +242,7 @@ export class DialogEntityEditor extends LitElement {
     this.closeDialog();
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts b/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts
index dae2b5f42e..8d48ffd2e6 100644
--- a/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts
+++ b/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts
@@ -1,15 +1,12 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state, query } from "lit/decorators";
 import { isComponentLoaded } from "../../../../../common/config/is_component_loaded";
 import { dynamicElement } from "../../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../../common/dom/fire_event";
@@ -110,13 +107,13 @@ export class EntityRegistrySettingsHelper extends LitElement {
 
   @property() public entry!: ExtEntityRegistryEntry;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _item?: Helper | null;
+  @state() private _item?: Helper | null;
 
-  @internalProperty() private _submitting?: boolean;
+  @state() private _submitting?: boolean;
 
-  @internalProperty() private _componentLoaded?: boolean;
+  @state() private _componentLoaded?: boolean;
 
   @query("ha-registry-basic-editor")
   private _registryEditor?: HaEntityRegistryBasicEditor;
@@ -242,7 +239,7 @@ export class EntityRegistrySettingsHelper extends LitElement {
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/entities/entity-registry-basic-editor.ts b/src/panels/config/entities/entity-registry-basic-editor.ts
index 1063639aa4..af79a115aa 100644
--- a/src/panels/config/entities/entity-registry-basic-editor.ts
+++ b/src/panels/config/entities/entity-registry-basic-editor.ts
@@ -1,15 +1,7 @@
 import "@polymer/paper-input/paper-input";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import {
-  css,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-  TemplateResult,
-} from "lit-element";
+import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import "../../../components/ha-area-picker";
 import "../../../components/ha-switch";
@@ -34,19 +26,19 @@ export class HaEntityRegistryBasicEditor extends SubscribeMixin(LitElement) {
 
   @property() public entry!: ExtEntityRegistryEntry;
 
-  @internalProperty() private _origEntityId!: string;
+  @state() private _origEntityId!: string;
 
-  @internalProperty() private _entityId!: string;
+  @state() private _entityId!: string;
 
-  @internalProperty() private _areaId?: string | null;
+  @state() private _areaId?: string | null;
 
-  @internalProperty() private _disabledBy!: string | null;
+  @state() private _disabledBy!: string | null;
 
   private _deviceLookup?: Record<string, DeviceRegistryEntry>;
 
-  @internalProperty() private _device?: DeviceRegistryEntry;
+  @state() private _device?: DeviceRegistryEntry;
 
-  @internalProperty() private _submitting?: boolean;
+  @state() private _submitting?: boolean;
 
   public async updateEntry(): Promise<void> {
     this._submitting = true;
diff --git a/src/panels/config/entities/entity-registry-settings.ts b/src/panels/config/entities/entity-registry-settings.ts
index 6e60b08bfe..36bc24b843 100644
--- a/src/panels/config/entities/entity-registry-settings.ts
+++ b/src/panels/config/entities/entity-registry-settings.ts
@@ -3,15 +3,13 @@ import "@polymer/paper-input/paper-input";
 import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 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 "../../../common/dom/fire_event";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { domainIcon } from "../../../common/entity/domain_icon";
@@ -47,23 +45,23 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
 
   @property() public entry!: ExtEntityRegistryEntry;
 
-  @internalProperty() private _name!: string;
+  @state() private _name!: string;
 
-  @internalProperty() private _icon!: string;
+  @state() private _icon!: string;
 
-  @internalProperty() private _entityId!: string;
+  @state() private _entityId!: string;
 
-  @internalProperty() private _areaId?: string | null;
+  @state() private _areaId?: string | null;
 
-  @internalProperty() private _disabledBy!: string | null;
+  @state() private _disabledBy!: string | null;
 
   private _deviceLookup?: Record<string, DeviceRegistryEntry>;
 
-  @internalProperty() private _device?: DeviceRegistryEntry;
+  @state() private _device?: DeviceRegistryEntry;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _submitting?: boolean;
+  @state() private _submitting?: boolean;
 
   private _origEntityId!: string;
 
@@ -359,7 +357,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
     this._disabledBy = (ev.target as HaSwitch).checked ? null : "user";
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts
index d42ef240cf..40c32e4d3c 100644
--- a/src/panels/config/entities/ha-config-entities.ts
+++ b/src/panels/config/entities/ha-config-entities.ts
@@ -13,19 +13,10 @@ import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-listbox/paper-listbox";
 import "@polymer/paper-tooltip/paper-tooltip";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { styleMap } from "lit-html/directives/style-map";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state, query } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { styleMap } from "lit/directives/style-map";
 import memoize from "memoize-one";
 import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -101,31 +92,29 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
 
   @property() public route!: Route;
 
-  @internalProperty() private _entities?: EntityRegistryEntry[];
+  @state() private _entities?: EntityRegistryEntry[];
 
-  @internalProperty() private _devices?: DeviceRegistryEntry[];
+  @state() private _devices?: DeviceRegistryEntry[];
 
-  @internalProperty() private _areas: AreaRegistryEntry[] = [];
+  @state() private _areas: AreaRegistryEntry[] = [];
 
-  @internalProperty() private _stateEntities: StateEntity[] = [];
+  @state() private _stateEntities: StateEntity[] = [];
 
   @property() public _entries?: ConfigEntry[];
 
-  @internalProperty() private _showDisabled = false;
+  @state() private _showDisabled = false;
 
-  @internalProperty() private _showUnavailable = true;
+  @state() private _showUnavailable = true;
 
-  @internalProperty() private _showReadOnly = true;
+  @state() private _showReadOnly = true;
 
-  @internalProperty() private _filter = "";
+  @state() private _filter = "";
 
-  @internalProperty() private _numHiddenEntities = 0;
+  @state() private _numHiddenEntities = 0;
 
-  @internalProperty() private _searchParms = new URLSearchParams(
-    window.location.search
-  );
+  @state() private _searchParms = new URLSearchParams(window.location.search);
 
-  @internalProperty() private _selectedEntities: string[] = [];
+  @state() private _selectedEntities: string[] = [];
 
   @query("hass-tabs-subpage-data-table", true)
   private _dataTable!: HaTabsSubpageDataTable;
@@ -402,10 +391,18 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
   public constructor() {
     super();
     window.addEventListener("location-changed", () => {
-      this._searchParms = new URLSearchParams(window.location.search);
+      if (
+        window.location.search.substring(1) !== this._searchParms.toString()
+      ) {
+        this._searchParms = new URLSearchParams(window.location.search);
+      }
     });
     window.addEventListener("popstate", () => {
-      this._searchParms = new URLSearchParams(window.location.search);
+      if (
+        window.location.search.substring(1) !== this._searchParms.toString()
+      ) {
+        this._searchParms = new URLSearchParams(window.location.search);
+      }
     });
   }
 
@@ -634,8 +631,8 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
     loadEntityEditorDialog();
   }
 
-  protected updated(changedProps): void {
-    super.updated(changedProps);
+  public willUpdate(changedProps): void {
+    super.willUpdate(changedProps);
     const oldHass = changedProps.get("hass");
     let changed = false;
     if (!this.hass || !this._entities) {
@@ -840,14 +837,14 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
     if (
       this._activeFilters(this._searchParms, this.hass.localize, this._entries)
     ) {
-      navigate(this, window.location.pathname, true);
+      navigate(window.location.pathname, { replace: true });
     }
     this._showDisabled = true;
     this._showReadOnly = true;
     this._showUnavailable = true;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/ha-config-section.ts b/src/panels/config/ha-config-section.ts
index f98ef27012..01211a9b7a 100644
--- a/src/panels/config/ha-config-section.ts
+++ b/src/panels/config/ha-config-section.ts
@@ -1,5 +1,6 @@
-import { css, customElement, html, LitElement, property } from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 
 @customElement("ha-config-section")
 export class HaConfigSection extends LitElement {
diff --git a/src/panels/config/ha-entity-config.ts b/src/panels/config/ha-entity-config.ts
index 9fb1d804dd..87a3fa0687 100644
--- a/src/panels/config/ha-entity-config.ts
+++ b/src/panels/config/ha-entity-config.ts
@@ -1,15 +1,13 @@
 import "@material/mwc-button";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, query } from "lit/decorators";
 import "../../components/buttons/ha-progress-button";
 import "../../components/entity/ha-entity-picker";
 import "../../components/ha-card";
@@ -103,7 +101,7 @@ export class HaEntityConfig extends LitElement {
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/ha-panel-config.ts b/src/panels/config/ha-panel-config.ts
index 831bb4682d..e31711cf99 100644
--- a/src/panels/config/ha-panel-config.ts
+++ b/src/panels/config/ha-panel-config.ts
@@ -22,12 +22,8 @@ import {
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import { PolymerElement } from "@polymer/polymer";
-import {
-  customElement,
-  internalProperty,
-  property,
-  PropertyValues,
-} from "lit-element";
+import { PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { listenMediaQuery } from "../../common/dom/media_query";
 import { CloudStatus, fetchCloudStatus } from "../../data/cloud";
@@ -316,11 +312,11 @@ class HaPanelConfig extends HassRouterPage {
     },
   };
 
-  @internalProperty() private _wideSidebar = false;
+  @state() private _wideSidebar = false;
 
-  @internalProperty() private _wide = false;
+  @state() private _wide = false;
 
-  @internalProperty() private _cloudStatus?: CloudStatus;
+  @state() private _cloudStatus?: CloudStatus;
 
   private _listeners: Array<() => void> = [];
 
diff --git a/src/panels/config/helpers/dialog-helper-detail.ts b/src/panels/config/helpers/dialog-helper-detail.ts
index b4eeed86be..3740b8bdaf 100644
--- a/src/panels/config/helpers/dialog-helper-detail.ts
+++ b/src/panels/config/helpers/dialog-helper-detail.ts
@@ -1,18 +1,9 @@
 import "@material/mwc-button/mwc-button";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-tooltip/paper-tooltip";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state, query } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { dynamicElement } from "../../../common/dom/dynamic-element-directive";
 import { domainIcon } from "../../../common/entity/domain_icon";
@@ -49,15 +40,15 @@ const HELPERS = {
 export class DialogHelperDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _item?: Helper;
+  @state() private _item?: Helper;
 
-  @internalProperty() private _opened = false;
+  @state() private _opened = false;
 
-  @internalProperty() private _platform?: string;
+  @state() private _platform?: string;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _submitting = false;
+  @state() private _submitting = false;
 
   @query(".form") private _form?: HTMLDivElement;
 
@@ -77,7 +68,7 @@ export class DialogHelperDetail extends LitElement {
     return html`
       <ha-dialog
         .open=${this._opened}
-        @closing=${this.closeDialog}
+        @closed=${this.closeDialog}
         class=${classMap({ "button-left": !this._platform })}
         scrimClickAction
         escapeKeyAction
@@ -207,7 +198,7 @@ export class DialogHelperDetail extends LitElement {
     this._error = undefined;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/config/helpers/forms/ha-counter-form.ts b/src/panels/config/helpers/forms/ha-counter-form.ts
index 278d33edd3..607fa64af0 100644
--- a/src/panels/config/helpers/forms/ha-counter-form.ts
+++ b/src/panels/config/helpers/forms/ha-counter-form.ts
@@ -1,14 +1,6 @@
 import "@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 { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-input";
 import "../../../../components/ha-switch";
@@ -25,19 +17,19 @@ class HaCounterForm extends LitElement {
 
   private _item?: Partial<Counter>;
 
-  @internalProperty() private _name!: string;
+  @state() private _name!: string;
 
-  @internalProperty() private _icon!: string;
+  @state() private _icon!: string;
 
-  @internalProperty() private _maximum?: number;
+  @state() private _maximum?: number;
 
-  @internalProperty() private _minimum?: number;
+  @state() private _minimum?: number;
 
-  @internalProperty() private _restore?: boolean;
+  @state() private _restore?: boolean;
 
-  @internalProperty() private _initial?: number;
+  @state() private _initial?: number;
 
-  @internalProperty() private _step?: number;
+  @state() private _step?: number;
 
   set item(item: Counter) {
     this._item = item;
@@ -183,7 +175,7 @@ class HaCounterForm extends LitElement {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/helpers/forms/ha-input_boolean-form.ts b/src/panels/config/helpers/forms/ha-input_boolean-form.ts
index 90656b861d..419819d4f2 100644
--- a/src/panels/config/helpers/forms/ha-input_boolean-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_boolean-form.ts
@@ -1,14 +1,6 @@
 import "@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 { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-input";
 import { InputBoolean } from "../../../../data/input_boolean";
@@ -23,9 +15,9 @@ class HaInputBooleanForm extends LitElement {
 
   private _item?: InputBoolean;
 
-  @internalProperty() private _name!: string;
+  @state() private _name!: string;
 
-  @internalProperty() private _icon!: string;
+  @state() private _icon!: string;
 
   set item(item: InputBoolean) {
     this._item = item;
@@ -100,7 +92,7 @@ class HaInputBooleanForm extends LitElement {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/helpers/forms/ha-input_datetime-form.ts b/src/panels/config/helpers/forms/ha-input_datetime-form.ts
index 09a1efc4e7..362fe30c90 100644
--- a/src/panels/config/helpers/forms/ha-input_datetime-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_datetime-form.ts
@@ -1,16 +1,8 @@
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-radio-button/paper-radio-button";
 import "@polymer/paper-radio-group/paper-radio-group";
-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 { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-input";
 import { InputDateTime } from "../../../../data/input_datetime";
@@ -25,11 +17,11 @@ class HaInputDateTimeForm extends LitElement {
 
   private _item?: InputDateTime;
 
-  @internalProperty() private _name!: string;
+  @state() private _name!: string;
 
-  @internalProperty() private _icon!: string;
+  @state() private _icon!: string;
 
-  @internalProperty() private _mode!: "date" | "time" | "datetime";
+  @state() private _mode!: "date" | "time" | "datetime";
 
   set item(item: InputDateTime) {
     this._item = item;
@@ -145,7 +137,7 @@ class HaInputDateTimeForm extends LitElement {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/helpers/forms/ha-input_number-form.ts b/src/panels/config/helpers/forms/ha-input_number-form.ts
index 0439227315..ec3288ebab 100644
--- a/src/panels/config/helpers/forms/ha-input_number-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_number-form.ts
@@ -1,16 +1,8 @@
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-radio-button/paper-radio-button";
 import "@polymer/paper-radio-group/paper-radio-group";
-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 { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-input";
 import { InputNumber } from "../../../../data/input_number";
@@ -25,20 +17,20 @@ class HaInputNumberForm extends LitElement {
 
   private _item?: Partial<InputNumber>;
 
-  @internalProperty() private _name!: string;
+  @state() private _name!: string;
 
-  @internalProperty() private _icon!: string;
+  @state() private _icon!: string;
 
-  @internalProperty() private _max?: number;
+  @state() private _max?: number;
 
-  @internalProperty() private _min?: number;
+  @state() private _min?: number;
 
-  @internalProperty() private _mode?: string;
+  @state() private _mode?: string;
 
-  @internalProperty() private _step?: number;
+  @state() private _step?: number;
 
   // eslint-disable-next-line: variable-name
-  @internalProperty() private _unit_of_measurement?: string;
+  @state() private _unit_of_measurement?: string;
 
   set item(item: InputNumber) {
     this._item = item;
@@ -194,7 +186,7 @@ class HaInputNumberForm extends LitElement {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/helpers/forms/ha-input_select-form.ts b/src/panels/config/helpers/forms/ha-input_select-form.ts
index 2aec4aee3a..fbb15f7f6e 100644
--- a/src/panels/config/helpers/forms/ha-input_select-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_select-form.ts
@@ -3,17 +3,8 @@ 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, state, query } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-button";
 import "../../../../components/ha-icon-input";
@@ -30,11 +21,11 @@ class HaInputSelectForm extends LitElement {
 
   private _item?: InputSelect;
 
-  @internalProperty() private _name!: string;
+  @state() private _name!: string;
 
-  @internalProperty() private _icon!: string;
+  @state() private _icon!: string;
 
-  @internalProperty() private _options: string[] = [];
+  @state() private _options: string[] = [];
 
   @query("#option_input", true) private _optionInput?: PaperInputElement;
 
@@ -190,7 +181,7 @@ class HaInputSelectForm extends LitElement {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/helpers/forms/ha-input_text-form.ts b/src/panels/config/helpers/forms/ha-input_text-form.ts
index 5c738b9dd8..4de30e62d2 100644
--- a/src/panels/config/helpers/forms/ha-input_text-form.ts
+++ b/src/panels/config/helpers/forms/ha-input_text-form.ts
@@ -1,16 +1,8 @@
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-radio-button/paper-radio-button";
 import "@polymer/paper-radio-group/paper-radio-group";
-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 { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-input";
 import { InputText } from "../../../../data/input_text";
@@ -25,17 +17,17 @@ class HaInputTextForm extends LitElement {
 
   private _item?: InputText;
 
-  @internalProperty() private _name!: string;
+  @state() private _name!: string;
 
-  @internalProperty() private _icon!: string;
+  @state() private _icon!: string;
 
-  @internalProperty() private _max?: number;
+  @state() private _max?: number;
 
-  @internalProperty() private _min?: number;
+  @state() private _min?: number;
 
-  @internalProperty() private _mode?: string;
+  @state() private _mode?: string;
 
-  @internalProperty() private _pattern?: string;
+  @state() private _pattern?: string;
 
   set item(item: InputText) {
     this._item = item;
@@ -177,7 +169,7 @@ class HaInputTextForm extends LitElement {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/helpers/forms/ha-timer-form.ts b/src/panels/config/helpers/forms/ha-timer-form.ts
index 1b81f2d481..2842226ce5 100644
--- a/src/panels/config/helpers/forms/ha-timer-form.ts
+++ b/src/panels/config/helpers/forms/ha-timer-form.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 { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-input";
 import { DurationDict, Timer } from "../../../../data/timer";
@@ -22,11 +14,11 @@ class HaTimerForm extends LitElement {
 
   private _item?: Timer;
 
-  @internalProperty() private _name!: string;
+  @state() private _name!: string;
 
-  @internalProperty() private _icon!: string;
+  @state() private _icon!: string;
 
-  @internalProperty() private _duration!: string | number | DurationDict;
+  @state() private _duration!: string | number | DurationDict;
 
   set item(item: Timer) {
     this._item = item;
@@ -111,7 +103,7 @@ class HaTimerForm extends LitElement {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/helpers/ha-config-helpers.ts b/src/panels/config/helpers/ha-config-helpers.ts
index 71623d5289..40371e8607 100644
--- a/src/panels/config/helpers/ha-config-helpers.ts
+++ b/src/panels/config/helpers/ha-config-helpers.ts
@@ -5,15 +5,8 @@ import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-listbox/paper-listbox";
 import "@polymer/paper-tooltip/paper-tooltip";
 import { HassEntity } from "home-assistant-js-websocket";
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import memoize from "memoize-one";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { domainIcon } from "../../../common/entity/domain_icon";
@@ -43,7 +36,7 @@ export class HaConfigHelpers extends LitElement {
 
   @property() public route!: Route;
 
-  @internalProperty() private _stateItems: HassEntity[] = [];
+  @state() private _stateItems: HassEntity[] = [];
 
   private _columns = memoize(
     (narrow, _language): DataTableColumnContainer => {
@@ -121,13 +114,13 @@ export class HaConfigHelpers extends LitElement {
   );
 
   private _getItems = memoize((stateItems: HassEntity[]) =>
-    stateItems.map((state) => ({
-      id: state.entity_id,
-      icon: state.attributes.icon,
-      name: state.attributes.friendly_name || "",
-      entity_id: state.entity_id,
-      editable: state.attributes.editable,
-      type: computeStateDomain(state),
+    stateItems.map((entityState) => ({
+      id: entityState.entity_id,
+      icon: entityState.attributes.icon,
+      name: entityState.attributes.friendly_name || "",
+      entity_id: entityState.entity_id,
+      editable: entityState.attributes.editable,
+      type: computeStateDomain(entityState),
     }))
   );
 
diff --git a/src/panels/config/info/ha-config-info.ts b/src/panels/config/info/ha-config-info.ts
index b3ffe78557..d849eaeada 100644
--- a/src/panels/config/info/ha-config-info.ts
+++ b/src/panels/config/info/ha-config-info.ts
@@ -1,11 +1,5 @@
-import {
-  css,
-  CSSResult,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { property } from "lit/decorators";
 import "../../../layouts/hass-tabs-subpage";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
@@ -161,7 +155,7 @@ class HaConfigInfo extends LitElement {
     }, 1000);
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/info/integrations-card.ts b/src/panels/config/info/integrations-card.ts
index 42287dda06..2c31c9a354 100644
--- a/src/panels/config/info/integrations-card.ts
+++ b/src/panels/config/info/integrations-card.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 memoizeOne from "memoize-one";
 import "../../../components/ha-card";
 import {
@@ -27,11 +19,11 @@ class IntegrationsCard extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
-  @internalProperty() private _manifests?: {
+  @state() private _manifests?: {
     [domain: string]: IntegrationManifest;
   };
 
-  @internalProperty() private _setups?: {
+  @state() private _setups?: {
     [domain: string]: IntegrationSetup;
   };
 
@@ -152,7 +144,7 @@ class IntegrationsCard extends LitElement {
     this._setups = setups;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       table {
         width: 100%;
diff --git a/src/panels/config/info/system-health-card.ts b/src/panels/config/info/system-health-card.ts
index ebdcf8f4e4..28c139609a 100644
--- a/src/panels/config/info/system-health-card.ts
+++ b/src/panels/config/info/system-health-card.ts
@@ -4,18 +4,11 @@ import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiContentCopy } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
-import {
-  css,
-  CSSResult,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { property, state } from "lit/decorators";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { formatDateTime } from "../../../common/datetime/format_date_time";
 import { copyToClipboard } from "../../../common/util/copy-clipboard";
-import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-card";
 import "../../../components/ha-circular-progress";
@@ -48,7 +41,7 @@ const sortKeys = (a: string, b: string) => {
 class SystemHealthCard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _info?: SystemHealthInfo;
+  @state() private _info?: SystemHealthInfo;
 
   protected render(): TemplateResult {
     if (!this.hass) {
@@ -260,7 +253,7 @@ class SystemHealthCard extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       table {
         width: 100%;
diff --git a/src/panels/config/integrations/ha-config-flow-card.ts b/src/panels/config/integrations/ha-config-flow-card.ts
index fd6769b22c..369b4dca7a 100644
--- a/src/panels/config/integrations/ha-config-flow-card.ts
+++ b/src/panels/config/integrations/ha-config-flow-card.ts
@@ -1,12 +1,6 @@
-import {
-  customElement,
-  LitElement,
-  property,
-  css,
-  html,
-  TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../common/dom/fire_event";
 import {
   ATTENTION_SOURCES,
diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts
index 3bfe8bb69b..20546603cb 100644
--- a/src/panels/config/integrations/ha-config-integrations.ts
+++ b/src/panels/config/integrations/ha-config-integrations.ts
@@ -6,21 +6,26 @@ import Fuse from "fuse.js";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
+import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import { navigate } from "../../../common/navigate";
+import "../../../common/search/search-input";
 import { caseInsensitiveCompare } from "../../../common/string/compare";
+import type { LocalizeFunc } from "../../../common/translations/localize";
 import { extractSearchParam } from "../../../common/url/search-params";
 import { nextRender } from "../../../common/util/render-status";
+import "../../../components/ha-button-menu";
+import "../../../components/ha-checkbox";
+import "../../../components/ha-fab";
+import "../../../components/ha-svg-icon";
 import { ConfigEntry, getConfigEntries } from "../../../data/config_entries";
 import {
   getConfigFlowInProgressCollection,
@@ -44,25 +49,16 @@ import {
 } from "../../../data/integration";
 import { showConfigFlowDialog } from "../../../dialogs/config-flow/show-dialog-config-flow";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
-import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
-import { haStyle } from "../../../resources/styles";
-import { configSections } from "../ha-panel-config";
-
-import type { HomeAssistant, Route } from "../../../types";
-import type { HASSDomEvent } from "../../../common/dom/fire_event";
-import type { LocalizeFunc } from "../../../common/translations/localize";
-import type { HaIntegrationCard } from "./ha-integration-card";
-
-import "../../../common/search/search-input";
-import "../../../components/ha-button-menu";
-import "../../../components/ha-fab";
-import "../../../components/ha-checkbox";
-import "../../../components/ha-svg-icon";
 import "../../../layouts/hass-loading-screen";
 import "../../../layouts/hass-tabs-subpage";
-import "./ha-integration-card";
+import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
+import { haStyle } from "../../../resources/styles";
+import type { HomeAssistant, Route } from "../../../types";
+import { configSections } from "../ha-panel-config";
 import "./ha-config-flow-card";
 import "./ha-ignored-config-entry-card";
+import "./ha-integration-card";
+import type { HaIntegrationCard } from "./ha-integration-card";
 
 export interface ConfigEntryUpdatedEvent {
   entry: ConfigEntry;
@@ -114,31 +110,31 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
 
   @property() public route!: Route;
 
-  @internalProperty() private _configEntries?: ConfigEntryExtended[];
+  @state() private _configEntries?: ConfigEntryExtended[];
 
   @property()
   private _configEntriesInProgress: DataEntryFlowProgressExtended[] = [];
 
-  @internalProperty()
+  @state()
   private _entityRegistryEntries: EntityRegistryEntry[] = [];
 
-  @internalProperty()
+  @state()
   private _deviceRegistryEntries: DeviceRegistryEntry[] = [];
 
-  @internalProperty()
+  @state()
   private _manifests: Record<string, IntegrationManifest> = {};
 
   private _extraFetchedManifests?: Set<string>;
 
-  @internalProperty() private _showIgnored = false;
+  @state() private _showIgnored = false;
 
-  @internalProperty() private _showDisabled = false;
+  @state() private _showDisabled = false;
 
-  @internalProperty() private _searchParms = new URLSearchParams(
+  @state() private _searchParms = new URLSearchParams(
     window.location.hash.substring(1)
   );
 
-  @internalProperty() private _filter?: string;
+  @state() private _filter?: string;
 
   public hassSubscribe(): UnsubscribeFunc[] {
     return [
@@ -195,7 +191,10 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
     ): [
       Map<string, ConfigEntryExtended[]>,
       ConfigEntryExtended[],
-      Map<string, ConfigEntryExtended[]>
+      Map<string, ConfigEntryExtended[]>,
+      // Counter for disabled integrations since the tuple element above will
+      // be grouped by the integration name and therefore not provide a valid count
+      number
     ] => {
       const filteredConfigEnties = this._filterConfigEntries(
         configEntries,
@@ -214,6 +213,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
         groupByIntegration(filteredConfigEnties),
         ignored,
         groupByIntegration(disabled),
+        disabled.length,
       ];
     }
   );
@@ -271,6 +271,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
       groupedConfigEntries,
       ignoredConfigEntries,
       disabledConfigEntries,
+      disabledCount,
     ] = this._filterGroupConfigEntries(this._configEntries, this._filter);
     const configEntriesInProgress = this._filterConfigEntriesInProgress(
       this._configEntriesInProgress,
@@ -342,12 +343,11 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
                     "ui.panel.config.integrations.search"
                   )}
                 ></search-input>
-                ${!this._showDisabled && disabledConfigEntries.size
+                ${!this._showDisabled && disabledCount
                   ? html`<div class="active-filters">
                       ${this.hass.localize(
                         "ui.panel.config.integrations.disable.disabled_integrations",
-                        "number",
-                        disabledConfigEntries.size
+                        { number: disabledCount }
                       )}
                       <mwc-button
                         @click=${this._toggleShowDisabled}
@@ -599,18 +599,16 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
 
   private async _handleAdd(localizePromise: Promise<LocalizeFunc>) {
     const domain = extractSearchParam("domain");
-    navigate(this, "/config/integrations", true);
+    navigate("/config/integrations", { replace: true });
     if (!domain) {
       return;
     }
     const localize = await localizePromise;
     if (
       !(await showConfirmationDialog(this, {
-        title: localize(
-          "ui.panel.config.integrations.confirm_new",
-          "integration",
-          domainToName(localize, domain)
-        ),
+        title: localize("ui.panel.config.integrations.confirm_new", {
+          integration: domainToName(localize, domain),
+        }),
       }))
     ) {
       return;
@@ -624,7 +622,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/integrations/ha-ignored-config-entry-card.ts b/src/panels/config/integrations/ha-ignored-config-entry-card.ts
index cbd6c476b7..34c7c32dc3 100644
--- a/src/panels/config/integrations/ha-ignored-config-entry-card.ts
+++ b/src/panels/config/integrations/ha-ignored-config-entry-card.ts
@@ -1,11 +1,5 @@
-import {
-  customElement,
-  LitElement,
-  property,
-  css,
-  html,
-  TemplateResult,
-} from "lit-element";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { deleteConfigEntry } from "../../../data/config_entries";
 import type { IntegrationManifest } from "../../../data/integration";
diff --git a/src/panels/config/integrations/ha-integration-action-card.ts b/src/panels/config/integrations/ha-integration-action-card.ts
index 2470067684..8f24451007 100644
--- a/src/panels/config/integrations/ha-integration-action-card.ts
+++ b/src/panels/config/integrations/ha-integration-action-card.ts
@@ -1,11 +1,5 @@
-import {
-  TemplateResult,
-  html,
-  customElement,
-  LitElement,
-  property,
-  css,
-} from "lit-element";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import type { IntegrationManifest } from "../../../data/integration";
 import type { HomeAssistant } from "../../../types";
 import "./ha-integration-header";
diff --git a/src/panels/config/integrations/ha-integration-card.ts b/src/panels/config/integrations/ha-integration-card.ts
index 44cd2866c7..cbd7de5aab 100644
--- a/src/panels/config/integrations/ha-integration-card.ts
+++ b/src/panels/config/integrations/ha-integration-card.ts
@@ -1,26 +1,19 @@
-import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
-import "@material/mwc-list/mwc-list-item";
-import "@polymer/paper-listbox";
 import "@material/mwc-button";
-import "@polymer/paper-item";
-import "@polymer/paper-tooltip/paper-tooltip";
+import "@material/mwc-list/mwc-list-item";
+import type { RequestSelectedDetail } from "@material/mwc-list/mwc-list-item";
 import { mdiAlertCircle, mdiDotsVertical, mdiOpenInNew } from "@mdi/js";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+import "@polymer/paper-item";
+import "@polymer/paper-listbox";
+import "@polymer/paper-tooltip/paper-tooltip";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
-import "../../../components/ha-icon-next";
 import "../../../components/ha-button-menu";
-import "../../../components/ha-svg-icon";
 import "../../../components/ha-card";
+import "../../../components/ha-icon-next";
+import "../../../components/ha-svg-icon";
 import {
   ConfigEntry,
   deleteConfigEntry,
@@ -300,80 +293,73 @@ export class HaIntegrationCard extends LitElement {
               `
             : ""}
         </div>
-        ${!this.manifest
-          ? ""
-          : html`
-              <ha-button-menu corner="BOTTOM_START">
-                <mwc-icon-button
-                  .title=${this.hass.localize("ui.common.menu")}
-                  .label=${this.hass.localize("ui.common.overflow_menu")}
-                  slot="trigger"
-                >
-                  <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
-                </mwc-icon-button>
-                <mwc-list-item @request-selected="${this._editEntryName}">
+        <ha-button-menu corner="BOTTOM_START">
+          <mwc-icon-button
+            .title=${this.hass.localize("ui.common.menu")}
+            .label=${this.hass.localize("ui.common.overflow_menu")}
+            slot="trigger"
+          >
+            <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+          </mwc-icon-button>
+          <mwc-list-item @request-selected="${this._editEntryName}">
+            ${this.hass.localize(
+              "ui.panel.config.integrations.config_entry.rename"
+            )}
+          </mwc-list-item>
+          <mwc-list-item @request-selected="${this._handleSystemOptions}">
+            ${this.hass.localize(
+              "ui.panel.config.integrations.config_entry.system_options"
+            )}
+          </mwc-list-item>
+          ${this.manifest
+            ? html` <a
+                href=${this.manifest.documentation}
+                rel="noreferrer"
+                target="_blank"
+              >
+                <mwc-list-item hasMeta>
                   ${this.hass.localize(
-                    "ui.panel.config.integrations.config_entry.rename"
-                  )}
+                    "ui.panel.config.integrations.config_entry.documentation"
+                  )}<ha-svg-icon
+                    slot="meta"
+                    .path=${mdiOpenInNew}
+                  ></ha-svg-icon>
                 </mwc-list-item>
-                <mwc-list-item @request-selected="${this._handleSystemOptions}">
-                  ${this.hass.localize(
-                    "ui.panel.config.integrations.config_entry.system_options"
-                  )}
-                </mwc-list-item>
-
-                <a
-                  href=${this.manifest.documentation}
-                  rel="noreferrer"
-                  target="_blank"
-                >
-                  <mwc-list-item hasMeta>
-                    ${this.hass.localize(
-                      "ui.panel.config.integrations.config_entry.documentation"
-                    )}<ha-svg-icon
-                      slot="meta"
-                      .path=${mdiOpenInNew}
-                    ></ha-svg-icon>
-                  </mwc-list-item>
-                </a>
-                ${!item.disabled_by &&
-                item.state === "loaded" &&
-                item.supports_unload &&
-                item.source !== "system"
-                  ? html`<mwc-list-item
-                      @request-selected="${this._handleReload}"
-                    >
-                      ${this.hass.localize(
-                        "ui.panel.config.integrations.config_entry.reload"
-                      )}
-                    </mwc-list-item>`
-                  : ""}
-                ${item.disabled_by === "user"
-                  ? html`<mwc-list-item
-                      @request-selected="${this._handleEnable}"
-                    >
-                      ${this.hass.localize("ui.common.enable")}
-                    </mwc-list-item>`
-                  : item.source !== "system"
-                  ? html`<mwc-list-item
-                      class="warning"
-                      @request-selected="${this._handleDisable}"
-                    >
-                      ${this.hass.localize("ui.common.disable")}
-                    </mwc-list-item>`
-                  : ""}
-                ${item.source !== "system"
-                  ? html`<mwc-list-item
-                      class="warning"
-                      @request-selected="${this._handleDelete}"
-                    >
-                      ${this.hass.localize(
-                        "ui.panel.config.integrations.config_entry.delete"
-                      )}
-                    </mwc-list-item>`
-                  : ""}
-              </ha-button-menu>
-            `}
+              </a>`
+            : ""}
+          ${!item.disabled_by &&
+          item.state === "loaded" &&
+          item.supports_unload &&
+          item.source !== "system"
+            ? html`<mwc-list-item @request-selected="${this._handleReload}">
+                ${this.hass.localize(
+                  "ui.panel.config.integrations.config_entry.reload"
+                )}
+              </mwc-list-item>`
+            : ""}
+          ${item.disabled_by === "user"
+            ? html`<mwc-list-item @request-selected="${this._handleEnable}">
+                ${this.hass.localize("ui.common.enable")}
+              </mwc-list-item>`
+            : item.source !== "system"
+            ? html`<mwc-list-item
+                class="warning"
+                @request-selected="${this._handleDisable}"
+              >
+                ${this.hass.localize("ui.common.disable")}
+              </mwc-list-item>`
+            : ""}
+          ${item.source !== "system"
+            ? html`<mwc-list-item
+                class="warning"
+                @request-selected="${this._handleDelete}"
+              >
+                ${this.hass.localize(
+                  "ui.panel.config.integrations.config_entry.delete"
+                )}
+              </mwc-list-item>`
+            : ""}
+        </ha-button-menu>
       </div>
     `;
   }
@@ -581,7 +567,7 @@ export class HaIntegrationCard extends LitElement {
     fireEvent(this, "entry-updated", { entry: newEntry });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       haStyleScrollbar,
diff --git a/src/panels/config/integrations/ha-integration-header.ts b/src/panels/config/integrations/ha-integration-header.ts
index 29cf8d3544..cd189da48b 100644
--- a/src/panels/config/integrations/ha-integration-header.ts
+++ b/src/panels/config/integrations/ha-integration-header.ts
@@ -1,14 +1,8 @@
-import "../../../components/ha-svg-icon";
-import { mdiPackageVariant, mdiCloud } from "@mdi/js";
+import { mdiCloud, mdiPackageVariant } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
-import {
-  css,
-  html,
-  customElement,
-  property,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../components/ha-svg-icon";
 import { domainToName, IntegrationManifest } from "../../../data/integration";
 import { HomeAssistant } from "../../../types";
 import { brandsUrl } from "../../../util/brands-url";
diff --git a/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts b/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts
index a7e971bfca..2edd27c8db 100644
--- a/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts
+++ b/src/panels/config/integrations/integration-panels/mqtt/mqtt-config-panel.ts
@@ -1,15 +1,7 @@
 import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
-import {
-  css,
-  CSSResultArray,
-  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 "../../../../../components/ha-card";
 import "../../../../../components/ha-code-editor";
 import { getConfigEntries } from "../../../../../data/config_entries";
@@ -25,9 +17,9 @@ class HaPanelDevMqtt extends LitElement {
 
   @property({ type: Boolean }) public narrow!: boolean;
 
-  @internalProperty() private topic = "";
+  @state() private topic = "";
 
-  @internalProperty() private payload = "";
+  @state() private payload = "";
 
   private inited = false;
 
@@ -123,7 +115,7 @@ class HaPanelDevMqtt extends LitElement {
     showOptionsFlowDialog(this, configEntry!);
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts b/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts
index 532b8f7873..c3fd96ce4f 100644
--- a/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts
+++ b/src/panels/config/integrations/integration-panels/mqtt/mqtt-subscribe-card.ts
@@ -1,15 +1,7 @@
 import "@material/mwc-button";
 import "@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 { formatTime } from "../../../../../common/datetime/format_time";
 import "../../../../../components/ha-card";
 import { MQTTMessage, subscribeMQTTTopic } from "../../../../../data/mqtt";
@@ -19,11 +11,11 @@ import { HomeAssistant } from "../../../../../types";
 class MqttSubscribeCard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _topic = "";
+  @state() private _topic = "";
 
-  @internalProperty() private _subscribed?: () => void;
+  @state() private _subscribed?: () => void;
 
-  @internalProperty() private _messages: Array<{
+  @state() private _messages: Array<{
     id: number;
     message: MQTTMessage;
     payload: string;
@@ -129,7 +121,7 @@ class MqttSubscribeCard extends LitElement {
     ];
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       form {
         display: block;
diff --git a/src/panels/config/integrations/integration-panels/ozw/dialog-ozw-refresh-node.ts b/src/panels/config/integrations/integration-panels/ozw/dialog-ozw-refresh-node.ts
index f041c1c370..4aaacd533f 100644
--- a/src/panels/config/integrations/integration-panels/ozw/dialog-ozw-refresh-node.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/dialog-ozw-refresh-node.ts
@@ -1,14 +1,12 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import "../../../../../components/ha-circular-progress";
 import "../../../../../components/ha-code-editor";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
@@ -26,17 +24,17 @@ import { OZWRefreshNodeDialogParams } from "./show-dialog-ozw-refresh-node";
 class DialogOZWRefreshNode extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _node_id?: number;
+  @state() private _node_id?: number;
 
-  @internalProperty() private _ozw_instance = 1;
+  @state() private _ozw_instance = 1;
 
-  @internalProperty() private _nodeMetaData?: OZWDeviceMetaData;
+  @state() private _nodeMetaData?: OZWDeviceMetaData;
 
-  @internalProperty() private _node?: OZWDevice;
+  @state() private _node?: OZWDevice;
 
-  @internalProperty() private _active = false;
+  @state() private _active = false;
 
-  @internalProperty() private _complete = false;
+  @state() private _complete = false;
 
   private _refreshDevicesTimeoutHandle?: number;
 
@@ -81,7 +79,7 @@ class DialogOZWRefreshNode extends LitElement {
     return html`
       <ha-dialog
         open
-        @closing="${this._close}"
+        @closed="${this._close}"
         .heading=${createCloseHeading(
           this.hass,
           this.hass.localize("ui.panel.config.ozw.refresh_node.title")
@@ -234,7 +232,7 @@ class DialogOZWRefreshNode extends LitElement {
     this._node = undefined;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts
index dba134523b..2d64773059 100644
--- a/src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-config-dashboard.ts
@@ -2,16 +2,8 @@ import "@material/mwc-button/mwc-button";
 import { mdiCheckCircle, mdiCircle, mdiCloseCircle, mdiZWave } from "@mdi/js";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
-import {
-  css,
-  CSSResultArray,
-  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 { navigate } from "../../../../../common/navigate";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-icon-next";
@@ -44,7 +36,7 @@ class OZWConfigDashboard extends LitElement {
 
   @property() public configEntryId?: string;
 
-  @internalProperty() private _instances?: OZWInstance[];
+  @state() private _instances?: OZWInstance[];
 
   protected firstUpdated() {
     this._fetchData();
@@ -151,15 +143,13 @@ class OZWConfigDashboard extends LitElement {
   private async _fetchData() {
     this._instances = await fetchOZWInstances(this.hass!);
     if (this._instances.length === 1) {
-      navigate(
-        this,
-        `/config/ozw/network/${this._instances[0].ozw_instance}`,
-        true
-      );
+      navigate(`/config/ozw/network/${this._instances[0].ozw_instance}`, {
+        replace: true,
+      });
     }
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-config-router.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-config-router.ts
index ba31c90f06..ad2d2e38fe 100644
--- a/src/panels/config/integrations/integration-panels/ozw/ozw-config-router.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-config-router.ts
@@ -1,4 +1,4 @@
-import { customElement, property } from "lit-element";
+import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import {
   HassRouterPage,
diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts
index 655d1fae01..46ba6fbd7d 100644
--- a/src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-network-dashboard.ts
@@ -1,16 +1,8 @@
 import "@material/mwc-button/mwc-button";
 import { mdiCheckCircle, mdiCircle, mdiCloseCircle } from "@mdi/js";
-import {
-  css,
-  CSSResultArray,
-  customElement,
-  html,
-  internalProperty,
-  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, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { navigate } from "../../../../../common/navigate";
 import "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/ha-card";
@@ -44,17 +36,17 @@ class OZWNetworkDashboard extends LitElement {
 
   @property() public ozwInstance?: number;
 
-  @internalProperty() private _network?: OZWInstance;
+  @state() private _network?: OZWInstance;
 
-  @internalProperty() private _statistics?: OZWNetworkStatistics;
+  @state() private _statistics?: OZWNetworkStatistics;
 
-  @internalProperty() private _status = "unknown";
+  @state() private _status = "unknown";
 
-  @internalProperty() private _icon = mdiCircle;
+  @state() private _icon = mdiCircle;
 
   protected firstUpdated() {
     if (!this.ozwInstance) {
-      navigate(this, "/config/ozw/dashboard", true);
+      navigate("/config/ozw/dashboard", { replace: true });
     } else if (this.hass) {
       this._fetchData();
     }
@@ -172,7 +164,7 @@ class OZWNetworkDashboard extends LitElement {
     `;
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts
index 1983aba1a2..ce9ec48b4b 100644
--- a/src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-network-nodes.ts
@@ -1,14 +1,7 @@
 import "@material/mwc-button/mwc-button";
 import { mdiAlert, mdiCheck } from "@mdi/js";
-import {
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { HASSDomEvent } from "../../../../../common/dom/fire_event";
 import { navigate } from "../../../../../common/navigate";
@@ -46,7 +39,7 @@ class OZWNetworkNodes extends LitElement {
 
   @property() public ozwInstance = 0;
 
-  @internalProperty() private _nodes: OZWDevice[] = [];
+  @state() private _nodes: OZWDevice[] = [];
 
   private _columns = memoizeOne(
     (narrow: boolean): DataTableColumnContainer => ({
@@ -95,7 +88,7 @@ class OZWNetworkNodes extends LitElement {
 
   protected firstUpdated() {
     if (!this.ozwInstance) {
-      navigate(this, "/config/ozw/dashboard", true);
+      navigate("/config/ozw/dashboard", { replace: true });
     } else if (this.hass) {
       this._fetchData();
     }
@@ -124,10 +117,10 @@ class OZWNetworkNodes extends LitElement {
 
   private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
     const nodeId = ev.detail.id;
-    navigate(this, `/config/ozw/network/${this.ozwInstance}/node/${nodeId}`);
+    navigate(`/config/ozw/network/${this.ozwInstance}/node/${nodeId}`);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return haStyle;
   }
 }
diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-network-router.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-network-router.ts
index e16133ba01..0294ff9b0f 100644
--- a/src/panels/config/integrations/integration-panels/ozw/ozw-network-router.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-network-router.ts
@@ -1,5 +1,5 @@
 import { mdiNetwork, mdiServerNetwork } from "@mdi/js";
-import { customElement, property } from "lit-element";
+import { customElement, property } from "lit/decorators";
 import {
   HassRouterPage,
   RouterOptions,
diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts
index d495a45d76..db7e9ee6e0 100644
--- a/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-node-config.ts
@@ -1,14 +1,6 @@
 import "@material/mwc-button/mwc-button";
-import {
-  css,
-  CSSResultArray,
-  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 { navigate } from "../../../../../common/navigate";
 import "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/ha-card";
@@ -45,19 +37,21 @@ class OZWNodeConfig extends LitElement {
 
   @property() public nodeId?;
 
-  @internalProperty() private _node?: OZWDevice;
+  @state() private _node?: OZWDevice;
 
-  @internalProperty() private _metadata?: OZWDeviceMetaDataResponse;
+  @state() private _metadata?: OZWDeviceMetaDataResponse;
 
-  @internalProperty() private _config?: OZWDeviceConfig[];
+  @state() private _config?: OZWDeviceConfig[];
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
   protected firstUpdated() {
     if (!this.ozwInstance) {
-      navigate(this, "/config/ozw/dashboard", true);
+      navigate("/config/ozw/dashboard", { replace: true });
     } else if (!this.nodeId) {
-      navigate(this, `/config/ozw/network/${this.ozwInstance}/nodes`, true);
+      navigate(`/config/ozw/network/${this.ozwInstance}/nodes`, {
+        replace: true,
+      });
     } else {
       this._fetchData();
     }
@@ -221,7 +215,7 @@ class OZWNodeConfig extends LitElement {
     });
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts
index ff13a68f2f..c34a5bf729 100644
--- a/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-node-dashboard.ts
@@ -1,14 +1,6 @@
 import "@material/mwc-button/mwc-button";
-import {
-  css,
-  CSSResultArray,
-  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 { navigate } from "../../../../../common/navigate";
 import "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/ha-card";
@@ -43,17 +35,19 @@ class OZWNodeDashboard extends LitElement {
 
   @property() public nodeId?;
 
-  @internalProperty() private _node?: OZWDevice;
+  @state() private _node?: OZWDevice;
 
-  @internalProperty() private _metadata?: OZWDeviceMetaDataResponse;
+  @state() private _metadata?: OZWDeviceMetaDataResponse;
 
-  @internalProperty() private _not_found = false;
+  @state() private _not_found = false;
 
   protected firstUpdated() {
     if (!this.ozwInstance) {
-      navigate(this, "/config/ozw/dashboard", true);
+      navigate("/config/ozw/dashboard", { replace: true });
     } else if (!this.nodeId) {
-      navigate(this, `/config/ozw/network/${this.ozwInstance}/nodes`, true);
+      navigate(`/config/ozw/network/${this.ozwInstance}/nodes`, {
+        replace: true,
+      });
     } else if (this.hass) {
       this._fetchData();
     }
@@ -189,7 +183,7 @@ class OZWNodeDashboard extends LitElement {
     });
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/integrations/integration-panels/ozw/ozw-node-router.ts b/src/panels/config/integrations/integration-panels/ozw/ozw-node-router.ts
index 45a922f8b7..f5676bdcaa 100644
--- a/src/panels/config/integrations/integration-panels/ozw/ozw-node-router.ts
+++ b/src/panels/config/integrations/integration-panels/ozw/ozw-node-router.ts
@@ -1,5 +1,5 @@
 import { mdiNetwork, mdiWrench } from "@mdi/js";
-import { customElement, property } from "lit-element";
+import { customElement, property } from "lit/decorators";
 import { navigate } from "../../../../../common/navigate";
 import {
   HassRouterPage,
@@ -68,11 +68,10 @@ class OZWNodeRouter extends HassRouterPage {
     if (this._configEntry && !searchParams.has("config_entry")) {
       searchParams.append("config_entry", this._configEntry);
       navigate(
-        this,
         `${this.routeTail.prefix}${
           this.routeTail.path
         }?${searchParams.toString()}`,
-        true
+        { replace: true }
       );
     }
   }
diff --git a/src/panels/config/integrations/integration-panels/zha/dialog-zha-cluster.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-cluster.ts
index 3632eb748f..f46570057d 100644
--- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-cluster.ts
+++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-cluster.ts
@@ -1,13 +1,11 @@
 import {
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { HASSDomEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-code-editor";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
@@ -33,13 +31,13 @@ import "./zha-group-binding";
 class DialogZHACluster extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _device?: ZHADevice;
+  @state() private _device?: ZHADevice;
 
-  @internalProperty() private _selectedCluster?: Cluster;
+  @state() private _selectedCluster?: Cluster;
 
-  @internalProperty() private _bindableDevices: ZHADevice[] = [];
+  @state() private _bindableDevices: ZHADevice[] = [];
 
-  @internalProperty() private _groups: ZHAGroup[] = [];
+  @state() private _groups: ZHAGroup[] = [];
 
   public async showDialog(
     params: ZHADeviceZigbeeInfoDialogParams
@@ -63,7 +61,7 @@ class DialogZHACluster extends LitElement {
       <ha-dialog
         open
         hideActions
-        @closing="${this._close}"
+        @closed="${this._close}"
         .heading=${createCloseHeading(
           this.hass,
           this.hass.localize("ui.panel.config.zha.clusters.header")
@@ -132,7 +130,7 @@ class DialogZHACluster extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return haStyleDialog;
   }
 }
diff --git a/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-children.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-children.ts
index 135776a74a..f726df4231 100644
--- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-children.ts
+++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-children.ts
@@ -1,12 +1,4 @@
-import {
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import memoizeOne from "memoize-one";
 import { computeRTLDirection } from "../../../../../common/util/compute_rtl";
 import "../../../../../components/ha-code-editor";
@@ -22,6 +14,7 @@ import type {
 import "../../../../../components/ha-circular-progress";
 import { fetchDevices, ZHADevice } from "../../../../../data/zha";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import { customElement, property, state } from "lit/decorators";
 
 export interface DeviceRowData extends DataTableRowData {
   id: string;
@@ -33,9 +26,9 @@ export interface DeviceRowData extends DataTableRowData {
 class DialogZHADeviceChildren extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _device: ZHADevice | undefined;
+  @state() private _device: ZHADevice | undefined;
 
-  @internalProperty() private _devices: Map<string, ZHADevice> | undefined;
+  @state() private _devices: Map<string, ZHADevice> | undefined;
 
   private _deviceChildren = memoizeOne(
     (
@@ -132,7 +125,7 @@ class DialogZHADeviceChildren extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return haStyleDialog;
   }
 }
diff --git a/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-zigbee-info.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-zigbee-info.ts
index d0fc98269f..5150ed473a 100644
--- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-zigbee-info.ts
+++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-device-zigbee-info.ts
@@ -1,12 +1,5 @@
-import {
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import "../../../../../components/ha-code-editor";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
 import { haStyleDialog } from "../../../../../resources/styles";
@@ -17,7 +10,7 @@ import { ZHADeviceZigbeeInfoDialogParams } from "./show-dialog-zha-device-zigbee
 class DialogZHADeviceZigbeeInfo extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _signature: any;
+  @state() private _signature: any;
 
   public async showDialog(
     params: ZHADeviceZigbeeInfoDialogParams
@@ -43,7 +36,7 @@ class DialogZHADeviceZigbeeInfo extends LitElement {
       <ha-dialog
         open
         hideActions
-        @closing="${this._close}"
+        @closed="${this._close}"
         .heading=${createCloseHeading(
           this.hass,
           this.hass.localize(`ui.dialogs.zha_device_info.device_signature`)
@@ -59,7 +52,7 @@ class DialogZHADeviceZigbeeInfo extends LitElement {
     this._signature = undefined;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return haStyleDialog;
   }
 }
diff --git a/src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts b/src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts
index e32e984729..bf3ce73ead 100644
--- a/src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts
+++ b/src/panels/config/integrations/integration-panels/zha/dialog-zha-reconfigure-device.ts
@@ -1,19 +1,11 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
 import "@material/mwc-button/mwc-button";
-import { haStyleDialog } from "../../../../../resources/styles";
-import { HomeAssistant } from "../../../../../types";
-import { ZHAReconfigureDeviceDialogParams } from "./show-dialog-zha-reconfigure-device";
+import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-circular-progress";
+import { createCloseHeading } from "../../../../../components/ha-dialog";
 import "../../../../../components/ha-svg-icon";
 import {
   AttributeConfigurationStatus,
@@ -26,30 +18,30 @@ import {
   ZHA_CHANNEL_MSG_BIND,
   ZHA_CHANNEL_MSG_CFG_RPT,
 } from "../../../../../data/zha";
-import { fireEvent } from "../../../../../common/dom/fire_event";
-import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { createCloseHeading } from "../../../../../components/ha-dialog";
+import { haStyleDialog } from "../../../../../resources/styles";
+import { HomeAssistant } from "../../../../../types";
+import { ZHAReconfigureDeviceDialogParams } from "./show-dialog-zha-reconfigure-device";
 
 @customElement("dialog-zha-reconfigure-device")
 class DialogZHAReconfigureDevice extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _status?: string;
+  @state() private _status?: string;
 
-  @internalProperty() private _stages?: string[];
+  @state() private _stages?: string[];
 
-  @internalProperty() private _clusterConfigurationStatuses?: Map<
+  @state() private _clusterConfigurationStatuses?: Map<
     number,
     ClusterConfigurationStatus
   > = new Map();
 
-  @internalProperty() private _params:
+  @state() private _params:
     | ZHAReconfigureDeviceDialogParams
     | undefined = undefined;
 
-  @internalProperty() private _allSuccessful = true;
+  @state() private _allSuccessful = true;
 
-  @internalProperty() private _showDetails = false;
+  @state() private _showDetails = false;
 
   private _subscribed?: Promise<UnsubscribeFunc>;
 
@@ -397,7 +389,7 @@ class DialogZHAReconfigureDevice extends LitElement {
     this._showDetails = !this._showDetails;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
index eceb2fa034..654cd3b4be 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
@@ -3,15 +3,13 @@ import { IronAutogrowTextareaElement } from "@polymer/iron-autogrow-textarea";
 import "@polymer/paper-input/paper-textarea";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import "../../../../../components/ha-circular-progress";
 import "../../../../../components/ha-icon-button";
 import "../../../../../components/ha-service-description";
@@ -36,20 +34,17 @@ class ZHAAddDevicesPage extends LitElement {
 
   @property() public route?: Route;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _discoveredDevices: Record<
-    string,
-    ZHADevice
-  > = {};
+  @state() private _discoveredDevices: Record<string, ZHADevice> = {};
 
-  @internalProperty() private _formattedEvents = "";
+  @state() private _formattedEvents = "";
 
-  @internalProperty() private _active = false;
+  @state() private _active = false;
 
-  @internalProperty() private _showHelp = false;
+  @state() private _showHelp = false;
 
-  @internalProperty() private _showLogs = false;
+  @state() private _showLogs = false;
 
   private _ieeeAddress?: string;
 
@@ -217,7 +212,7 @@ class ZHAAddDevicesPage extends LitElement {
     );
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
index 81765c1810..34ed5174e2 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
@@ -1,17 +1,8 @@
 import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-  query,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, state, query } from "lit/decorators";
 import type { HASSDomEvent } from "../../../../../common/dom/fire_event";
 import { navigate } from "../../../../../common/navigate";
 import type { SelectionChangedEvent } from "../../../../../components/data-table/ha-data-table";
@@ -38,9 +29,9 @@ export class ZHAAddGroupPage extends LitElement {
 
   @property({ type: Array }) public deviceEndpoints: ZHADeviceEndpoint[] = [];
 
-  @internalProperty() private _processingAdd = false;
+  @state() private _processingAdd = false;
 
-  @internalProperty() private _groupName = "";
+  @state() private _groupName = "";
 
   @query("zha-device-endpoint-data-table", true)
   private _zhaDevicesDataTable!: ZHADeviceEndpointDataTable;
@@ -147,7 +138,7 @@ export class ZHAAddGroupPage extends LitElement {
     this._processingAdd = false;
     this._groupName = "";
     this._zhaDevicesDataTable.clearSelection();
-    navigate(this, `/config/zha/group/${group.group_id}`, true);
+    navigate(`/config/zha/group/${group.group_id}`, { replace: true });
   }
 
   private _handleNameChange(ev: PolymerChangedEvent<string>) {
@@ -155,7 +146,7 @@ export class ZHAAddGroupPage extends LitElement {
     this._groupName = target.value || "";
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       css`
         .header {
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts b/src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts
index 2ef7ed2784..0d7a815256 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts
@@ -5,14 +5,13 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { property, state } from "lit/decorators";
 import "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-icon-button";
@@ -46,15 +45,15 @@ export class ZHAClusterAttributes extends LitElement {
 
   @property() public selectedCluster?: Cluster;
 
-  @internalProperty() private _attributes: Attribute[] = [];
+  @state() private _attributes: Attribute[] = [];
 
-  @internalProperty() private _selectedAttributeIndex = -1;
+  @state() private _selectedAttributeIndex = -1;
 
-  @internalProperty() private _attributeValue?: any = "";
+  @state() private _attributeValue?: any = "";
 
-  @internalProperty() private _manufacturerCodeOverride?: string | number;
+  @state() private _manufacturerCodeOverride?: string | number;
 
-  @internalProperty()
+  @state()
   private _setAttributeServiceData?: SetAttributeServiceData;
 
   protected updated(changedProperties: PropertyValues): void {
@@ -273,7 +272,7 @@ export class ZHAClusterAttributes extends LitElement {
     this._attributeValue = "";
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts b/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts
index f66f398148..5ffcf61637 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts
@@ -4,14 +4,13 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { property, state } from "lit/decorators";
 import "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-icon-button";
@@ -41,15 +40,15 @@ export class ZHAClusterCommands extends LitElement {
 
   @property() public selectedCluster?: Cluster;
 
-  @internalProperty() private _showHelp = false;
+  @state() private _showHelp = false;
 
-  @internalProperty() private _commands: Command[] = [];
+  @state() private _commands: Command[] = [];
 
-  @internalProperty() private _selectedCommandIndex = -1;
+  @state() private _selectedCommandIndex = -1;
 
-  @internalProperty() private _manufacturerCodeOverride?: number;
+  @state() private _manufacturerCodeOverride?: number;
 
-  @internalProperty()
+  @state()
   private _issueClusterCommandServiceData?: IssueCommandServiceData;
 
   protected updated(changedProperties: PropertyValues): void {
@@ -205,7 +204,7 @@ export class ZHAClusterCommands extends LitElement {
     this._issueClusterCommandServiceData = this._computeIssueClusterCommandServiceData();
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-clusters-data-table.ts b/src/panels/config/integrations/integration-panels/zha/zha-clusters-data-table.ts
index cfaa1a1717..e29bcbe10d 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-clusters-data-table.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-clusters-data-table.ts
@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { computeRTLDirection } from "../../../../../common/util/compute_rtl";
 import "../../../../../components/data-table/ha-data-table";
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts b/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts
index 9761d1b0b6..4559fafe9e 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-clusters.ts
@@ -3,14 +3,13 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/ha-card";
@@ -45,9 +44,9 @@ export class ZHAClusters extends LitElement {
 
   @property() public showHelp = false;
 
-  @internalProperty() private _selectedClusterIndex = -1;
+  @state() private _selectedClusterIndex = -1;
 
-  @internalProperty() private _clusters: Cluster[] = [];
+  @state() private _clusters: Cluster[] = [];
 
   protected updated(changedProperties: PropertyValues): void {
     if (changedProperties.has("selectedDevice")) {
@@ -132,7 +131,7 @@ export class ZHAClusters extends LitElement {
     this.showHelp = !this.showHelp;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard-router.ts b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard-router.ts
index 4fcef9343c..8b0963b190 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard-router.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard-router.ts
@@ -1,4 +1,4 @@
-import { customElement, property } from "lit-element";
+import { customElement, property } from "lit/decorators";
 import { navigate } from "../../../../../common/navigate";
 import {
   HassRouterPage,
@@ -67,11 +67,10 @@ class ZHAConfigDashboardRouter extends HassRouterPage {
     if (this._configEntry && !searchParams.has("config_entry")) {
       searchParams.append("config_entry", this._configEntry);
       navigate(
-        this,
         `${this.routeTail.prefix}${
           this.routeTail.path
         }?${searchParams.toString()}`,
-        true
+        { replace: true }
       );
     }
   }
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts
index fd67ae4c04..0b1014d78c 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts
@@ -4,14 +4,12 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import {
   css,
-  CSSResultArray,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
 import { computeRTL } from "../../../../../common/util/compute_rtl";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-fab";
@@ -27,6 +25,7 @@ import {
   updateZHAConfiguration,
   ZHAConfiguration,
 } from "../../../../../data/zha";
+import { customElement, property } from "lit/decorators";
 
 export const zhaTabs: PageNavigation[] = [
   {
@@ -169,7 +168,7 @@ class ZHAConfigDashboard extends LitElement {
       schema.name;
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts b/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts
index 41d269f69c..36c71f8536 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-device-binding.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-device-binding.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 "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-icon-button";
@@ -31,13 +29,13 @@ export class ZHADeviceBindingControl extends LitElement {
 
   @property() public selectedDevice?: ZHADevice;
 
-  @internalProperty() private _showHelp = false;
+  @state() private _showHelp = false;
 
-  @internalProperty() private _bindTargetIndex = -1;
+  @state() private _bindTargetIndex = -1;
 
-  @internalProperty() private bindableDevices: ZHADevice[] = [];
+  @state() private bindableDevices: ZHADevice[] = [];
 
-  @internalProperty() private _deviceToBind?: ZHADevice;
+  @state() private _deviceToBind?: ZHADevice;
 
   protected updated(changedProperties: PropertyValues): void {
     if (changedProperties.has("selectedDevice")) {
@@ -142,7 +140,7 @@ export class ZHADeviceBindingControl extends LitElement {
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-device-card.ts b/src/panels/config/integrations/integration-panels/zha/zha-device-card.ts
index 763bb5d49a..f1dbb1a254 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-device-card.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-device-card.ts
@@ -1,16 +1,7 @@
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-listbox/paper-listbox";
 import { UnsubscribeFunc } 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 { fireEvent } from "../../../../../common/dom/fire_event";
 import { computeStateName } from "../../../../../common/entity/compute_state_name";
 import "../../../../../components/buttons/ha-call-service-button";
@@ -34,6 +25,7 @@ import { EntityRegistryStateEntry } from "../../../devices/ha-config-device-page
 import { compare } from "../../../../../common/string/compare";
 import { getIeeeTail } from "./functions";
 import { slugify } from "../../../../../common/string/slugify";
+import { customElement, property, state } from "lit/decorators";
 
 @customElement("zha-device-card")
 class ZHADeviceCard extends SubscribeMixin(LitElement) {
@@ -43,7 +35,7 @@ class ZHADeviceCard extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean }) public narrow?: boolean;
 
-  @internalProperty() private _entities: EntityRegistryEntry[] = [];
+  @state() private _entities: EntityRegistryEntry[] = [];
 
   private _deviceEntities = memoizeOne(
     (
@@ -206,7 +198,7 @@ class ZHADeviceCard extends SubscribeMixin(LitElement) {
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-device-endpoint-data-table.ts b/src/panels/config/integrations/integration-panels/zha/zha-device-endpoint-data-table.ts
index 2b09a8220a..3a3ce48f09 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-device-endpoint-data-table.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-device-endpoint-data-table.ts
@@ -1,13 +1,5 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { computeRTLDirection } from "../../../../../common/util/compute_rtl";
 import "../../../../../components/data-table/ha-data-table";
@@ -156,7 +148,7 @@ export class ZHADeviceEndpointDataTable extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       css`
         .table-cell-text {
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-device-pairing-status-card.ts b/src/panels/config/integrations/integration-panels/zha/zha-device-pairing-status-card.ts
index d3422dd828..0fc745cf81 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-device-pairing-status-card.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-device-pairing-status-card.ts
@@ -1,16 +1,8 @@
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-listbox/paper-listbox";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  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, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/entity/state-badge";
 import "../../../../../components/ha-area-picker";
@@ -36,7 +28,7 @@ class ZHADevicePairingStatusCard extends LitElement {
 
   @property({ type: Boolean }) public narrow?: boolean;
 
-  @internalProperty() private _showHelp = false;
+  @state() private _showHelp = false;
 
   protected render(): TemplateResult {
     if (!this.hass || !this.device) {
@@ -102,7 +94,7 @@ class ZHADevicePairingStatusCard extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts b/src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts
index 449db0795a..201c139c69 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts
@@ -4,16 +4,13 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state, query } from "lit/decorators";
 import type { HASSDomEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/buttons/ha-call-service-button";
 import { SelectionChangedEvent } from "../../../../../components/data-table/ha-data-table";
@@ -45,15 +42,15 @@ export class ZHAGroupBindingControl extends LitElement {
 
   @property() public selectedDevice?: ZHADevice;
 
-  @internalProperty() private _showHelp = false;
+  @state() private _showHelp = false;
 
-  @internalProperty() private _bindTargetIndex = -1;
+  @state() private _bindTargetIndex = -1;
 
-  @internalProperty() private groups: ZHAGroup[] = [];
+  @state() private groups: ZHAGroup[] = [];
 
-  @internalProperty() private _selectedClusters: string[] = [];
+  @state() private _selectedClusters: string[] = [];
 
-  @internalProperty() private _clusters: Cluster[] = [];
+  @state() private _clusters: Cluster[] = [];
 
   private _groupToBind?: ZHAGroup;
 
@@ -250,7 +247,7 @@ export class ZHAGroupBindingControl extends LitElement {
     );
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
index e56c145673..9d22b43bbb 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
@@ -1,15 +1,6 @@
 import "@material/mwc-button";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-  query,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, state, query } from "lit/decorators";
 import { HASSDomEvent } from "../../../../../common/dom/fire_event";
 import { navigate } from "../../../../../common/navigate";
 import { SelectionChangedEvent } from "../../../../../components/data-table/ha-data-table";
@@ -46,16 +37,16 @@ export class ZHAGroupPage extends LitElement {
 
   @property({ type: Array }) public deviceEndpoints: ZHADeviceEndpoint[] = [];
 
-  @internalProperty() private _processingAdd = false;
+  @state() private _processingAdd = false;
 
-  @internalProperty() private _processingRemove = false;
+  @state() private _processingRemove = false;
 
-  @internalProperty()
+  @state()
   private _filteredDeviceEndpoints: ZHADeviceEndpoint[] = [];
 
-  @internalProperty() private _selectedDevicesToAdd: string[] = [];
+  @state() private _selectedDevicesToAdd: string[] = [];
 
-  @internalProperty() private _selectedDevicesToRemove: string[] = [];
+  @state() private _selectedDevicesToRemove: string[] = [];
 
   @query("#addMembers", true)
   private _zhaAddMembersDataTable!: ZHADeviceEndpointDataTable;
@@ -282,10 +273,10 @@ export class ZHAGroupPage extends LitElement {
 
   private async _deleteGroup(): Promise<void> {
     await removeGroups(this.hass, [this.groupId]);
-    navigate(this, `/config/zha/groups`, true);
+    navigate(`/config/zha/groups`, { replace: true });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       css`
         hass-subpage {
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts b/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts
index ce1e02415a..39f77d934b 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-groups-dashboard.ts
@@ -2,14 +2,13 @@ import "@material/mwc-button";
 import { mdiPlus } from "@mdi/js";
 import {
   css,
-  CSSResultArray,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { HASSDomEvent } from "../../../../../common/dom/fire_event";
 import { navigate } from "../../../../../common/navigate";
@@ -141,10 +140,10 @@ export class ZHAGroupsDashboard extends LitElement {
 
   private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
     const groupId = ev.detail.id;
-    navigate(this, `/config/zha/group/${groupId}`);
+    navigate(`/config/zha/group/${groupId}`);
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts
index c1937537c1..b42c15fb6b 100644
--- a/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts
@@ -1,14 +1,4 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-  query,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 
 import "@material/mwc-button";
 import { navigate } from "../../../../../common/navigate";
@@ -19,7 +9,7 @@ import {
 } from "../../../../../data/zha";
 import "../../../../../layouts/hass-tabs-subpage";
 import type { HomeAssistant, Route } from "../../../../../types";
-import { Network, Edge, Node, EdgeOptions } from "vis-network";
+import { Network, Edge, Node, EdgeOptions } from "vis-network/peer";
 import "../../../../../common/search/search-input";
 import "../../../../../components/device/ha-device-picker";
 import "../../../../../components/ha-button-menu";
@@ -30,6 +20,7 @@ import { DeviceRegistryEntry } from "../../../../../data/device_registry";
 import "../../../../../components/ha-checkbox";
 import type { HaCheckbox } from "../../../../../components/ha-checkbox";
 import { zhaTabs } from "./zha-config-dashboard";
+import { customElement, property, query, state } from "lit/decorators";
 
 @customElement("zha-network-visualization-page")
 export class ZHANetworkVisualizationPage extends LitElement {
@@ -47,19 +38,19 @@ export class ZHANetworkVisualizationPage extends LitElement {
   @query("#visualization", true)
   private _visualization?: HTMLElement;
 
-  @internalProperty()
+  @state()
   private _devices: Map<string, ZHADevice> = new Map();
 
-  @internalProperty()
+  @state()
   private _devicesByDeviceId: Map<string, ZHADevice> = new Map();
 
-  @internalProperty()
+  @state()
   private _nodes: Node[] = [];
 
-  @internalProperty()
+  @state()
   private _network?: Network;
 
-  @internalProperty()
+  @state()
   private _filter?: string;
 
   private _autoZoom = true;
@@ -109,11 +100,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
       if (ieee) {
         const device = this._devices.get(ieee);
         if (device) {
-          navigate(
-            this,
-            `/config/devices/device/${device.device_reg_id}`,
-            false
-          );
+          navigate(`/config/devices/device/${device.device_reg_id}`);
         }
       }
     });
@@ -361,7 +348,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
     this._autoZoom = (ev.target as HaCheckbox).checked;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       css`
         .header {
diff --git a/src/panels/config/integrations/integration-panels/zwave/zwave-config-router.ts b/src/panels/config/integrations/integration-panels/zwave/zwave-config-router.ts
index 70d5a07b0b..4ebb4b9970 100644
--- a/src/panels/config/integrations/integration-panels/zwave/zwave-config-router.ts
+++ b/src/panels/config/integrations/integration-panels/zwave/zwave-config-router.ts
@@ -1,10 +1,10 @@
-import { customElement, property } from "lit-element";
+import { customElement, property } from "lit/decorators";
+import { navigate } from "../../../../../common/navigate";
 import {
   HassRouterPage,
   RouterOptions,
 } from "../../../../../layouts/hass-router-page";
 import { HomeAssistant } from "../../../../../types";
-import { navigate } from "../../../../../common/navigate";
 
 @customElement("zwave-config-router")
 class ZWaveConfigRouter extends HassRouterPage {
@@ -46,11 +46,10 @@ class ZWaveConfigRouter extends HassRouterPage {
     if (this._configEntry && !searchParams.has("config_entry")) {
       searchParams.append("config_entry", this._configEntry);
       navigate(
-        this,
         `${this.routeTail.prefix}${
           this.routeTail.path
         }?${searchParams.toString()}`,
-        true
+        { replace: true }
       );
     }
   }
diff --git a/src/panels/config/integrations/integration-panels/zwave/zwave-migration.ts b/src/panels/config/integrations/integration-panels/zwave/zwave-migration.ts
index 5ea9be159f..318744d30b 100644
--- a/src/panels/config/integrations/integration-panels/zwave/zwave-migration.ts
+++ b/src/panels/config/integrations/integration-panels/zwave/zwave-migration.ts
@@ -1,45 +1,37 @@
+import "@material/mwc-button/mwc-button";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@material/mwc-button/mwc-button";
-import "../../../../../components/ha-icon-button";
-import "../../../../../components/ha-circular-progress";
 import { UnsubscribeFunc } 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 { isComponentLoaded } from "../../../../../common/config/is_component_loaded";
+import { computeStateName } from "../../../../../common/entity/compute_state_name";
+import { navigate } from "../../../../../common/navigate";
 import "../../../../../components/buttons/ha-call-api-button";
 import "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/ha-card";
+import "../../../../../components/ha-circular-progress";
 import "../../../../../components/ha-icon";
-import {
-  fetchNetworkStatus,
-  ZWaveNetworkStatus,
-  ZWAVE_NETWORK_STATE_STOPPED,
-  fetchMigrationConfig,
-  ZWaveMigrationConfig,
-  startOzwConfigFlow,
-} from "../../../../../data/zwave";
-import { haStyle } from "../../../../../resources/styles";
-import type { HomeAssistant, Route } from "../../../../../types";
-import "../../../ha-config-section";
-import "../../../../../layouts/hass-subpage";
-import { showConfigFlowDialog } from "../../../../../dialogs/config-flow/show-dialog-config-flow";
-import { migrateZwave, OZWMigrationData } from "../../../../../data/ozw";
-import { navigate } from "../../../../../common/navigate";
-import { showAlertDialog } from "../../../../../dialogs/generic/show-dialog-box";
-import { computeStateName } from "../../../../../common/entity/compute_state_name";
+import "../../../../../components/ha-icon-button";
 import {
   computeDeviceName,
   subscribeDeviceRegistry,
 } from "../../../../../data/device_registry";
-import { isComponentLoaded } from "../../../../../common/config/is_component_loaded";
+import { migrateZwave, OZWMigrationData } from "../../../../../data/ozw";
+import {
+  fetchMigrationConfig,
+  fetchNetworkStatus,
+  startOzwConfigFlow,
+  ZWaveMigrationConfig,
+  ZWaveNetworkStatus,
+  ZWAVE_NETWORK_STATE_STOPPED,
+} from "../../../../../data/zwave";
+import { showConfigFlowDialog } from "../../../../../dialogs/config-flow/show-dialog-config-flow";
+import { showAlertDialog } from "../../../../../dialogs/generic/show-dialog-box";
+import "../../../../../layouts/hass-subpage";
+import { haStyle } from "../../../../../resources/styles";
+import type { HomeAssistant, Route } from "../../../../../types";
+import "../../../ha-config-section";
 
 @customElement("zwave-migration")
 export class ZwaveMigration extends LitElement {
@@ -51,19 +43,19 @@ export class ZwaveMigration extends LitElement {
 
   @property({ type: Boolean }) public isWide!: boolean;
 
-  @internalProperty() private _networkStatus?: ZWaveNetworkStatus;
+  @state() private _networkStatus?: ZWaveNetworkStatus;
 
-  @internalProperty() private _step = 0;
+  @state() private _step = 0;
 
-  @internalProperty() private _stoppingNetwork = false;
+  @state() private _stoppingNetwork = false;
 
-  @internalProperty() private _migrationConfig?: ZWaveMigrationConfig;
+  @state() private _migrationConfig?: ZWaveMigrationConfig;
 
-  @internalProperty() private _migrationData?: OZWMigrationData;
+  @state() private _migrationData?: OZWMigrationData;
 
-  @internalProperty() private _migratedZwaveEntities?: string[];
+  @state() private _migratedZwaveEntities?: string[];
 
-  @internalProperty() private _deviceNameLookup: { [id: string]: string } = {};
+  @state() private _deviceNameLookup: { [id: string]: string } = {};
 
   private _unsub?: Promise<UnsubscribeFunc>;
 
@@ -447,7 +439,7 @@ export class ZwaveMigration extends LitElement {
   }
 
   private _navigateOzw() {
-    navigate(this, "/config/ozw");
+    navigate("/config/ozw");
   }
 
   private _networkStopped(): void {
@@ -461,7 +453,7 @@ export class ZwaveMigration extends LitElement {
     this._networkStatus = await fetchNetworkStatus(this.hass!);
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts b/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts
index b9860c0589..12d0284cc1 100644
--- a/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts
+++ b/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts
@@ -1,14 +1,6 @@
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
-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 "../../../../../components/buttons/ha-call-api-button";
 import "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/ha-card";
@@ -35,11 +27,11 @@ export class ZwaveNetwork extends LitElement {
 
   @property() public isWide!: boolean;
 
-  @internalProperty() private _showHelp = false;
+  @state() private _showHelp = false;
 
-  @internalProperty() private _networkStatus?: ZWaveNetworkStatus;
+  @state() private _networkStatus?: ZWaveNetworkStatus;
 
-  @internalProperty() private _unsubs: Array<Promise<UnsubscribeFunc>> = [];
+  @state() private _unsubs: Array<Promise<UnsubscribeFunc>> = [];
 
   public disconnectedCallback(): void {
     this._unsubscribe();
@@ -239,7 +231,7 @@ export class ZwaveNetwork extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/integrations/integration-panels/zwave/zwave-node-config.ts b/src/panels/config/integrations/integration-panels/zwave/zwave-node-config.ts
index 343cc3b479..3a846334b6 100644
--- a/src/panels/config/integrations/integration-panels/zwave/zwave-node-config.ts
+++ b/src/panels/config/integrations/integration-panels/zwave/zwave-node-config.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 "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/ha-card";
 import {
@@ -34,13 +32,13 @@ export class ZwaveNodeConfig extends LitElement {
 
   @property() public selectedNode = -1;
 
-  @internalProperty() private _configItem?: ZWaveConfigItem;
+  @state() private _configItem?: ZWaveConfigItem;
 
-  @internalProperty() private _wakeupInput = -1;
+  @state() private _wakeupInput = -1;
 
-  @internalProperty() private _selectedConfigParameter = -1;
+  @state() private _selectedConfigParameter = -1;
 
-  @internalProperty() private _selectedConfigValue: number | string = -1;
+  @state() private _selectedConfigValue: number | string = -1;
 
   protected render(): TemplateResult {
     return html`
@@ -107,9 +105,9 @@ export class ZwaveNodeConfig extends LitElement {
                 @iron-select=${this._selectedConfigParameterChanged}
               >
                 ${this.config.map(
-                  (state) => html`
+                  (entityState) => html`
                     <paper-item>
-                      ${state.key}: ${state.value.label}
+                      ${entityState.key}: ${entityState.value.label}
                     </paper-item>
                   `
                 )}
@@ -135,8 +133,8 @@ export class ZwaveNodeConfig extends LitElement {
                             @iron-select=${this._configValueSelectChanged}
                           >
                             ${this._configItem.value.data_items.map(
-                              (state) => html`
-                                <paper-item>${state}</paper-item>
+                              (entityState) => html`
+                                <paper-item>${entityState}</paper-item>
                               `
                             )}
                           </paper-listbox>
@@ -218,7 +216,7 @@ export class ZwaveNodeConfig extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/integrations/integration-panels/zwave/zwave-values.ts b/src/panels/config/integrations/integration-panels/zwave/zwave-values.ts
index 9d2ee97f3e..1e6750c6af 100644
--- a/src/panels/config/integrations/integration-panels/zwave/zwave-values.ts
+++ b/src/panels/config/integrations/integration-panels/zwave/zwave-values.ts
@@ -1,16 +1,8 @@
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-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 "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/ha-card";
 import { ZWaveValue } from "../../../../../data/zwave";
@@ -23,7 +15,7 @@ export class ZwaveValues extends LitElement {
 
   @property() public values: ZWaveValue[] = [];
 
-  @internalProperty() private _selectedValue = -1;
+  @state() private _selectedValue = -1;
 
   protected render(): TemplateResult {
     return html`
@@ -54,7 +46,7 @@ export class ZwaveValues extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts
index fa9f30869e..9e2f4e8874 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-add-node.ts
@@ -2,22 +2,14 @@ import "@material/mwc-button/mwc-button";
 import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
 import "../../../../../components/ha-switch";
 import "../../../../../components/ha-formfield";
-import {
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  internalProperty,
-  TemplateResult,
-  css,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement, TemplateResult, css } from "lit";
 import "../../../../../components/ha-circular-progress";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
 import { haStyleDialog } from "../../../../../resources/styles";
 import { HomeAssistant } from "../../../../../types";
 import { ZWaveJSAddNodeDialogParams } from "./show-dialog-zwave_js-add-node";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import { customElement, property, state } from "lit/decorators";
 
 export interface ZWaveJSAddNodeDevice {
   id: string;
@@ -28,13 +20,19 @@ export interface ZWaveJSAddNodeDevice {
 class DialogZWaveJSAddNode extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private entry_id?: string;
+  @state() private entry_id?: string;
 
-  @internalProperty() private _use_secure_inclusion = false;
+  @state() private _use_secure_inclusion = false;
 
-  @internalProperty() private _status = "";
+  @state() private _status = "";
 
-  @internalProperty() private _device?: ZWaveJSAddNodeDevice;
+  @state() private _nodeAdded = false;
+
+  @state() private _device?: ZWaveJSAddNodeDevice;
+
+  @state() private _stages?: string[];
+
+  private _stoppedTimeout?: any;
 
   private _addNodeTimeoutHandle?: number;
 
@@ -128,6 +126,40 @@ class DialogZWaveJSAddNode extends LitElement {
               </mwc-button>
             `
           : ``}
+        ${this._status === "interviewing"
+          ? html`
+              <div class="flex-container">
+                <ha-circular-progress active></ha-circular-progress>
+                <div class="status">
+                  <p>
+                    <b
+                      >${this.hass.localize(
+                        "ui.panel.config.zwave_js.add_node.interview_started"
+                      )}</b
+                    >
+                  </p>
+                  ${this._stages
+                    ? html` <div class="stages">
+                        ${this._stages.map(
+                          (stage) => html`
+                            <span class="stage">
+                              <ha-svg-icon
+                                .path=${mdiCheckCircle}
+                                class="success"
+                              ></ha-svg-icon>
+                              ${stage}
+                            </span>
+                          `
+                        )}
+                      </div>`
+                    : ""}
+                </div>
+              </div>
+              <mwc-button slot="primaryAction" @click=${this.closeDialog}>
+                ${this.hass.localize("ui.panel.config.zwave_js.common.close")}
+              </mwc-button>
+            `
+          : ``}
         ${this._status === "failed"
           ? html`
               <div class="flex-container">
@@ -141,6 +173,21 @@ class DialogZWaveJSAddNode extends LitElement {
                       "ui.panel.config.zwave_js.add_node.inclusion_failed"
                     )}
                   </p>
+                  ${this._stages
+                    ? html` <div class="stages">
+                        ${this._stages.map(
+                          (stage) => html`
+                            <span class="stage">
+                              <ha-svg-icon
+                                .path=${mdiCheckCircle}
+                                class="success"
+                              ></ha-svg-icon>
+                              ${stage}
+                            </span>
+                          `
+                        )}
+                      </div>`
+                    : ""}
                 </div>
               </div>
               <mwc-button slot="primaryAction" @click=${this.closeDialog}>
@@ -168,6 +215,21 @@ class DialogZWaveJSAddNode extends LitElement {
                       )}
                     </mwc-button>
                   </a>
+                  ${this._stages
+                    ? html` <div class="stages">
+                        ${this._stages.map(
+                          (stage) => html`
+                            <span class="stage">
+                              <ha-svg-icon
+                                .path=${mdiCheckCircle}
+                                class="success"
+                              ></ha-svg-icon>
+                              ${stage}
+                            </span>
+                          `
+                        )}
+                      </div>`
+                    : ""}
                 </div>
               </div>
               <mwc-button slot="primaryAction" @click=${this.closeDialog}>
@@ -211,16 +273,41 @@ class DialogZWaveJSAddNode extends LitElement {
       this._status = "failed";
     }
     if (message.event === "inclusion stopped") {
-      if (this._status !== "finished") {
-        this._status = "";
-      }
-      this._unsubscribe();
+      // we get the inclusion stopped event before the node added event
+      // during a successful inclusion. so we set a timer to wait 3 seconds
+      // to give the node added event time to come in before assuming it
+      // timed out or was cancelled and unsubscribing.
+      this._stoppedTimeout = setTimeout(() => {
+        if (!this._nodeAdded) {
+          this._status = "";
+          this._unsubscribe();
+          this._stoppedTimeout = undefined;
+        }
+      }, 3000);
     }
     if (message.event === "device registered") {
       this._device = message.device;
+    }
+    if (message.event === "node added") {
+      this._nodeAdded = true;
+      if (this._stoppedTimeout) {
+        clearTimeout(this._stoppedTimeout);
+      }
+      this._status = "interviewing";
+    }
+
+    if (message.event === "interview completed") {
       this._status = "finished";
       this._unsubscribe();
     }
+
+    if (message.event === "interview stage completed") {
+      if (this._stages === undefined) {
+        this._stages = [message.stage];
+      } else {
+        this._stages = [...this._stages, message.stage];
+      }
+    }
   }
 
   private _unsubscribe(): void {
@@ -246,13 +333,19 @@ class DialogZWaveJSAddNode extends LitElement {
     this._unsubscribe();
     this.entry_id = undefined;
     this._status = "";
+    this._nodeAdded = false;
     this._device = undefined;
+    this._stages = undefined;
+    if (this._stoppedTimeout) {
+      clearTimeout(this._stoppedTimeout);
+      this._stoppedTimeout = undefined;
+    }
     this._use_secure_inclusion = false;
 
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
@@ -261,11 +354,24 @@ class DialogZWaveJSAddNode extends LitElement {
         }
 
         .success {
-          color: green;
+          color: var(--success-color);
         }
 
         .failed {
-          color: red;
+          color: var(--warning-color);
+        }
+
+        .stages {
+          margin-top: 16px;
+        }
+
+        .flex-container .stage ha-svg-icon {
+          width: 16px;
+          height: 16px;
+          margin-right: 0px;
+        }
+        .stage {
+          padding: 8px;
         }
 
         blockquote {
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts
index 7dfc9a999a..c3bfd90433 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-reinterview-node.ts
@@ -1,35 +1,27 @@
 import "@material/mwc-button/mwc-button";
 import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
-import {
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  internalProperty,
-  TemplateResult,
-  css,
-} from "lit-element";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-circular-progress";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
+import { reinterviewNode } from "../../../../../data/zwave_js";
 import { haStyleDialog } from "../../../../../resources/styles";
 import { HomeAssistant } from "../../../../../types";
 import { ZWaveJSReinterviewNodeDialogParams } from "./show-dialog-zwave_js-reinterview-node";
-import { fireEvent } from "../../../../../common/dom/fire_event";
-import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import { reinterviewNode } from "../../../../../data/zwave_js";
 
 @customElement("dialog-zwave_js-reinterview-node")
 class DialogZWaveJSReinterviewNode extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private entry_id?: string;
+  @state() private entry_id?: string;
 
-  @internalProperty() private node_id?: number;
+  @state() private node_id?: number;
 
-  @internalProperty() private _status?: string;
+  @state() private _status?: string;
 
-  @internalProperty() private _stages?: string[];
+  @state() private _stages?: string[];
 
   private _subscribed?: Promise<UnsubscribeFunc>;
 
@@ -212,7 +204,7 @@ class DialogZWaveJSReinterviewNode extends LitElement {
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts
index a319ad8ce9..a6f7018940 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/dialog-zwave_js-remove-node.ts
@@ -1,21 +1,13 @@
 import "@material/mwc-button/mwc-button";
-import {
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  internalProperty,
-  TemplateResult,
-  css,
-} from "lit-element";
+import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-circular-progress";
 import { createCloseHeading } from "../../../../../components/ha-dialog";
 import { haStyleDialog } from "../../../../../resources/styles";
 import { HomeAssistant } from "../../../../../types";
 import { ZWaveJSRemoveNodeDialogParams } from "./show-dialog-zwave_js-remove-node";
-import { mdiCheckCircle, mdiCloseCircle } from "@mdi/js";
-import { fireEvent } from "../../../../../common/dom/fire_event";
 
 export interface ZWaveJSRemovedNode {
   node_id: number;
@@ -27,11 +19,11 @@ export interface ZWaveJSRemovedNode {
 class DialogZWaveJSRemoveNode extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private entry_id?: string;
+  @state() private entry_id?: string;
 
-  @internalProperty() private _status = "";
+  @state() private _status = "";
 
-  @internalProperty() private _node?: ZWaveJSRemovedNode;
+  @state() private _node?: ZWaveJSRemovedNode;
 
   private _removeNodeTimeoutHandle?: number;
 
@@ -213,7 +205,7 @@ class DialogZWaveJSRemoveNode extends LitElement {
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
index eb53eeafba..6a9580cb7f 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-dashboard.ts
@@ -1,20 +1,12 @@
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiCheckCircle, mdiCircle, mdiRefresh } from "@mdi/js";
-import {
-  css,
-  CSSResultArray,
-  customElement,
-  html,
-  internalProperty,
-  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, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import "../../../../../components/ha-card";
-import "../../../../../components/ha-svg-icon";
 import "../../../../../components/ha-icon-next";
+import "../../../../../components/ha-svg-icon";
 import { getSignedPath } from "../../../../../data/auth";
 import {
   fetchDataCollectionStatus,
@@ -49,15 +41,15 @@ class ZWaveJSConfigDashboard extends LitElement {
 
   @property() public configEntryId?: string;
 
-  @internalProperty() private _network?: ZWaveJSNetwork;
+  @state() private _network?: ZWaveJSNetwork;
 
-  @internalProperty() private _nodes?: ZWaveJSNode[];
+  @state() private _nodes?: ZWaveJSNode[];
 
-  @internalProperty() private _status = "unknown";
+  @state() private _status = "unknown";
 
-  @internalProperty() private _icon = mdiCircle;
+  @state() private _icon = mdiCircle;
 
-  @internalProperty() private _dataCollectionOptIn?: boolean;
+  @state() private _dataCollectionOptIn?: boolean;
 
   protected firstUpdated() {
     if (this.hass) {
@@ -328,7 +320,7 @@ class ZWaveJSConfigDashboard extends LitElement {
     this.shadowRoot!.removeChild(a);
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-router.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-router.ts
index 2973f17c3b..c81eacadea 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-router.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-config-router.ts
@@ -1,4 +1,3 @@
-import { customElement, property } from "lit-element";
 import {
   HassRouterPage,
   RouterOptions,
@@ -8,6 +7,7 @@ import { navigate } from "../../../../../common/navigate";
 import { PageNavigation } from "../../../../../layouts/hass-tabs-subpage";
 
 import { mdiServerNetwork, mdiMathLog } from "@mdi/js";
+import { customElement, property } from "lit/decorators";
 
 export const configTabs: PageNavigation[] = [
   {
@@ -64,11 +64,10 @@ class ZWaveJSConfigRouter extends HassRouterPage {
     if (this._configEntry && !searchParams.has("config_entry")) {
       searchParams.append("config_entry", this._configEntry);
       navigate(
-        this,
         `${this.routeTail.prefix}${
           this.routeTail.path
         }?${searchParams.toString()}`,
-        true
+        { replace: true }
       );
     }
   }
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-logs.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-logs.ts
index b51a9d8163..37a984666e 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-logs.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-logs.ts
@@ -1,27 +1,19 @@
-import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import {
-  css,
-  html,
-  property,
-  customElement,
-  LitElement,
-  CSSResultArray,
-  internalProperty,
-  query,
-} from "lit-element";
-import "@polymer/paper-listbox/paper-listbox";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@polymer/paper-listbox/paper-listbox";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
+import { css, CSSResultArray, html, LitElement } from "lit";
+import { customElement, property, state, query } from "lit/decorators";
 import {
   fetchZWaveJSLogConfig,
   setZWaveJSLogLevel,
   subscribeZWaveJSLogs,
   ZWaveJSLogConfig,
 } from "../../../../../data/zwave_js";
+import "../../../../../layouts/hass-tabs-subpage";
 import { SubscribeMixin } from "../../../../../mixins/subscribe-mixin";
+import { haStyle } from "../../../../../resources/styles";
 import { HomeAssistant, Route } from "../../../../../types";
 import { configTabs } from "./zwave_js-config-router";
-import "../../../../../layouts/hass-tabs-subpage";
-import { haStyle } from "../../../../../resources/styles";
 
 @customElement("zwave_js-logs")
 class ZWaveJSLogs extends SubscribeMixin(LitElement) {
@@ -33,7 +25,7 @@ class ZWaveJSLogs extends SubscribeMixin(LitElement) {
 
   @property() public configEntryId!: string;
 
-  @internalProperty() private _logConfig?: ZWaveJSLogConfig;
+  @state() private _logConfig?: ZWaveJSLogConfig;
 
   @query("textarea", true) private _textarea?: HTMLTextAreaElement;
 
@@ -126,10 +118,16 @@ class ZWaveJSLogs extends SubscribeMixin(LitElement) {
     if (ev.target === undefined || this._logConfig === undefined) {
       return;
     }
-    if (this._logConfig.level === ev.target.selected) {
+    const selected = ev.target.selected;
+    if (this._logConfig.level === selected) {
       return;
     }
-    setZWaveJSLogLevel(this.hass!, this.configEntryId, ev.target.selected);
+    setZWaveJSLogLevel(this.hass!, this.configEntryId, selected);
+    this._logConfig.level = selected;
+    this._textarea!.value += `${this.hass.localize(
+      "ui.panel.config.zwave_js.logs.log_level_changed",
+      { level: selected.charAt(0).toUpperCase() + selected.slice(1) }
+    )}\n`;
   }
 
   static get styles(): CSSResultArray {
diff --git a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts
index bc850d348f..b58c12ec53 100644
--- a/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts
+++ b/src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts
@@ -1,31 +1,37 @@
-import {
-  mdiCheckCircle,
-  mdiCircle,
-  mdiProgressClock,
-  mdiCloseCircle,
-} from "@mdi/js";
-import "../../../../../components/ha-settings-row";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-icon-button/mwc-icon-button";
+import {
+  mdiCheckCircle,
+  mdiCircle,
+  mdiCloseCircle,
+  mdiProgressClock,
+} from "@mdi/js";
+import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResultArray,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import memoizeOne from "memoize-one";
 import { debounce } from "../../../../../common/util/debounce";
 import "../../../../../components/ha-card";
-import "../../../../../components/ha-svg-icon";
 import "../../../../../components/ha-icon-next";
+import "../../../../../components/ha-settings-row";
+import "../../../../../components/ha-svg-icon";
 import "../../../../../components/ha-switch";
+import {
+  computeDeviceName,
+  DeviceRegistryEntry,
+  subscribeDeviceRegistry,
+} from "../../../../../data/device_registry";
 import {
   fetchNodeConfigParameters,
   setNodeConfigParameter,
@@ -33,19 +39,11 @@ import {
   ZWaveJSSetConfigParamResult,
 } from "../../../../../data/zwave_js";
 import "../../../../../layouts/hass-tabs-subpage";
+import { SubscribeMixin } from "../../../../../mixins/subscribe-mixin";
 import { haStyle } from "../../../../../resources/styles";
 import type { HomeAssistant, Route } from "../../../../../types";
 import "../../../ha-config-section";
 import { configTabs } from "./zwave_js-config-router";
-import {
-  DeviceRegistryEntry,
-  computeDeviceName,
-  subscribeDeviceRegistry,
-} from "../../../../../data/device_registry";
-import { SubscribeMixin } from "../../../../../mixins/subscribe-mixin";
-import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import memoizeOne from "memoize-one";
-import { classMap } from "lit-html/directives/class-map";
 
 const icons = {
   accepted: mdiCheckCircle,
@@ -91,14 +89,11 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
   @property({ type: Array })
   private _deviceRegistryEntries?: DeviceRegistryEntry[];
 
-  @internalProperty() private _config?: ZWaveJSNodeConfigParams;
+  @state() private _config?: ZWaveJSNodeConfigParams;
 
-  @internalProperty() private _results: Record<
-    string,
-    ZWaveJSSetConfigParamResult
-  > = {};
+  @state() private _results: Record<string, ZWaveJSSetConfigParamResult> = {};
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
   public connectedCallback(): void {
     super.connectedCallback();
@@ -294,8 +289,8 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
               @iron-select=${this._dropdownSelected}
             >
               ${Object.entries(item.metadata.states).map(
-                ([key, state]) => html`
-                  <paper-item .value=${key}>${state}</paper-item>
+                ([key, entityState]) => html`
+                  <paper-item .value=${key}>${entityState}</paper-item>
                 `
               )}
             </paper-listbox>
@@ -428,7 +423,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
     );
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/logs/dialog-system-log-detail.ts b/src/panels/config/logs/dialog-system-log-detail.ts
index db8a33c244..51e2483d73 100644
--- a/src/panels/config/logs/dialog-system-log-detail.ts
+++ b/src/panels/config/logs/dialog-system-log-detail.ts
@@ -1,15 +1,8 @@
 import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiClose, mdiContentCopy, mdiPackageVariant } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
-import {
-  css,
-  CSSResult,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { copyToClipboard } from "../../../common/util/copy-clipboard";
 import "../../../components/ha-dialog";
@@ -34,9 +27,9 @@ import { formatSystemLogTime } from "./util";
 class DialogSystemLogDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _params?: SystemLogDetailDialogParams;
+  @state() private _params?: SystemLogDetailDialogParams;
 
-  @internalProperty() private _manifest?: IntegrationManifest;
+  @state() private _manifest?: IntegrationManifest;
 
   public async showDialog(params: SystemLogDetailDialogParams): Promise<void> {
     this._params = params;
@@ -197,7 +190,7 @@ class DialogSystemLogDetail extends LitElement {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/config/logs/error-log-card.ts b/src/panels/config/logs/error-log-card.ts
index 2dd3fc9ceb..b096fb93ad 100644
--- a/src/panels/config/logs/error-log-card.ts
+++ b/src/panels/config/logs/error-log-card.ts
@@ -1,13 +1,6 @@
 import "@material/mwc-button";
-import {
-  css,
-  CSSResult,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { property, state } from "lit/decorators";
 import "../../../components/ha-icon-button";
 import { fetchErrorLog } from "../../../data/error_log";
 import { HomeAssistant } from "../../../types";
@@ -15,7 +8,7 @@ import { HomeAssistant } from "../../../types";
 class ErrorLogCard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _errorHTML!: TemplateResult[] | string;
+  @state() private _errorHTML!: TemplateResult[] | string;
 
   protected render(): TemplateResult {
     return html`
@@ -47,7 +40,7 @@ class ErrorLogCard extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .error-log-intro {
         text-align: center;
diff --git a/src/panels/config/logs/ha-config-logs.ts b/src/panels/config/logs/ha-config-logs.ts
index a8c822ccd1..13ef1137dc 100644
--- a/src/panels/config/logs/ha-config-logs.ts
+++ b/src/panels/config/logs/ha-config-logs.ts
@@ -1,13 +1,5 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
 import "../../../layouts/hass-tabs-subpage";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
@@ -54,7 +46,7 @@ export class HaConfigLogs extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/logs/system-log-card.ts b/src/panels/config/logs/system-log-card.ts
index 3cc184b8be..bc59a07457 100644
--- a/src/panels/config/logs/system-log-card.ts
+++ b/src/panels/config/logs/system-log-card.ts
@@ -1,15 +1,7 @@
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-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 "../../../components/buttons/ha-call-service-button";
 import "../../../components/buttons/ha-progress-button";
 import "../../../components/ha-card";
@@ -32,7 +24,7 @@ export class SystemLogCard extends LitElement {
 
   public loaded = false;
 
-  @internalProperty() private _items?: LoggedError[];
+  @state() private _items?: LoggedError[];
 
   public async fetchData(): Promise<void> {
     this._items = undefined;
@@ -154,7 +146,7 @@ export class SystemLogCard extends LitElement {
     showSystemLogDetailDialog(this, { item });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-card {
         padding-top: 16px;
diff --git a/src/panels/config/logs/util.ts b/src/panels/config/logs/util.ts
index ebe74c2e06..3eb92fcd96 100644
--- a/src/panels/config/logs/util.ts
+++ b/src/panels/config/logs/util.ts
@@ -1,8 +1,8 @@
 import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time";
 import { formatTimeWithSeconds } from "../../../common/datetime/format_time";
-import { FrontendTranslationData } from "../../../data/translation";
+import { FrontendLocaleData } from "../../../data/translation";
 
-export const formatSystemLogTime = (date, locale: FrontendTranslationData) => {
+export const formatSystemLogTime = (date, locale: FrontendLocaleData) => {
   const today = new Date().setHours(0, 0, 0, 0);
   const dateTime = new Date(date * 1000);
   const dateTimeDay = new Date(date * 1000).setHours(0, 0, 0, 0);
diff --git a/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts b/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts
index 3ed55ea16d..d7dbaa4eca 100644
--- a/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts
+++ b/src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts
@@ -1,14 +1,6 @@
 import "@material/mwc-button/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 { slugify } from "../../../../common/string/slugify";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import { createCloseHeading } from "../../../../components/ha-dialog";
@@ -31,22 +23,22 @@ import { LovelaceDashboardDetailsDialogParams } from "./show-dialog-lovelace-das
 export class DialogLovelaceDashboardDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _params?: LovelaceDashboardDetailsDialogParams;
+  @state() private _params?: LovelaceDashboardDetailsDialogParams;
 
-  @internalProperty() private _urlPath!: LovelaceDashboard["url_path"];
+  @state() private _urlPath!: LovelaceDashboard["url_path"];
 
-  @internalProperty() private _showInSidebar!: boolean;
+  @state() private _showInSidebar!: boolean;
 
-  @internalProperty() private _icon!: string;
+  @state() private _icon!: string;
 
-  @internalProperty() private _title!: string;
+  @state() private _title!: string;
 
-  @internalProperty()
+  @state()
   private _requireAdmin!: LovelaceDashboard["require_admin"];
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _submitting = false;
+  @state() private _submitting = false;
 
   public async showDialog(
     params: LovelaceDashboardDetailsDialogParams
@@ -82,7 +74,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
     return html`
       <ha-dialog
         open
-        @closing="${this._close}"
+        @closed="${this._close}"
         scrimClickAction
         escapeKeyAction
         .heading=${createCloseHeading(
@@ -322,7 +314,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
     this._params = undefined;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
index e40fbcd9db..21d3b7f595 100644
--- a/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
+++ b/src/panels/config/lovelace/dashboards/ha-config-lovelace-dashboards.ts
@@ -1,14 +1,7 @@
 import { mdiPlus } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import memoize from "memoize-one";
 import { navigate } from "../../../../common/navigate";
 import { compare } from "../../../../common/string/compare";
@@ -46,7 +39,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
 
   @property() public route!: Route;
 
-  @internalProperty() private _dashboards: LovelaceDashboard[] = [];
+  @state() private _dashboards: LovelaceDashboard[] = [];
 
   private _columns = memoize(
     (narrow: boolean, _language, dashboards): DataTableColumnContainer => {
@@ -246,8 +239,7 @@ export class HaConfigLovelaceDashboards extends LitElement {
 
   private _navigate(ev: Event) {
     ev.stopPropagation();
-    const url = `/${(ev.target as any).urlPath}`;
-    navigate(this, url);
+    navigate(`/${(ev.target as any).urlPath}`);
   }
 
   private _editDashboard(ev: CustomEvent) {
diff --git a/src/panels/config/lovelace/ha-config-lovelace.ts b/src/panels/config/lovelace/ha-config-lovelace.ts
index 1f12645d3b..2c09c81569 100644
--- a/src/panels/config/lovelace/ha-config-lovelace.ts
+++ b/src/panels/config/lovelace/ha-config-lovelace.ts
@@ -1,4 +1,4 @@
-import { customElement, property } from "lit-element";
+import { customElement, property } from "lit/decorators";
 import {
   HassRouterPage,
   RouterOptions,
diff --git a/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts b/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts
index ff4df8eb82..b4145ca5c3 100644
--- a/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts
+++ b/src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts
@@ -2,16 +2,8 @@ import "@material/mwc-button/mwc-button";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-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 "../../../../components/ha-dialog";
 import "../../../../components/ha-paper-dropdown-menu";
 import {
@@ -41,15 +33,15 @@ const detectResourceType = (url: string) => {
 export class DialogLovelaceResourceDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _params?: LovelaceResourceDetailsDialogParams;
+  @state() private _params?: LovelaceResourceDetailsDialogParams;
 
-  @internalProperty() private _url!: LovelaceResource["url"];
+  @state() private _url!: LovelaceResource["url"];
 
-  @internalProperty() private _type?: LovelaceResource["type"];
+  @state() private _type?: LovelaceResource["type"];
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _submitting = false;
+  @state() private _submitting = false;
 
   public async showDialog(
     params: LovelaceResourceDetailsDialogParams
@@ -74,7 +66,7 @@ export class DialogLovelaceResourceDetail extends LitElement {
     return html`
       <ha-dialog
         open
-        @closing=${this._close}
+        @closed=${this._close}
         scrimClickAction
         escapeKeyAction
         .heading=${createCloseHeading(
@@ -236,7 +228,7 @@ export class DialogLovelaceResourceDetail extends LitElement {
     this._params = undefined;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
index 68a64a4b65..3497bd1a73 100644
--- a/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
+++ b/src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
@@ -3,15 +3,8 @@ import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-listbox/paper-listbox";
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import memoize from "memoize-one";
 import { compare } from "../../../../common/string/compare";
 import {
@@ -49,7 +42,7 @@ export class HaConfigLovelaceRescources extends LitElement {
 
   @property() public route!: Route;
 
-  @internalProperty() private _resources: LovelaceResource[] = [];
+  @state() private _resources: LovelaceResource[] = [];
 
   private _columns = memoize(
     (_language): DataTableColumnContainer => ({
diff --git a/src/panels/config/person/dialog-person-detail.ts b/src/panels/config/person/dialog-person-detail.ts
index 9d83ae4d9a..88dce3ce2c 100644
--- a/src/panels/config/person/dialog-person-detail.ts
+++ b/src/panels/config/person/dialog-person-detail.ts
@@ -1,14 +1,7 @@
 import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
-import {
-  css,
-  CSSResult,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import "../../../components/entity/ha-entities-picker";
@@ -50,25 +43,25 @@ const cropOptions: CropOptions = {
 class DialogPersonDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _name!: string;
+  @state() private _name!: string;
 
-  @internalProperty() private _userId?: string;
+  @state() private _userId?: string;
 
-  @internalProperty() private _user?: User;
+  @state() private _user?: User;
 
-  @internalProperty() private _isAdmin?: boolean;
+  @state() private _isAdmin?: boolean;
 
-  @internalProperty() private _deviceTrackers!: string[];
+  @state() private _deviceTrackers!: string[];
 
-  @internalProperty() private _picture!: string | null;
+  @state() private _picture!: string | null;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _params?: PersonDetailDialogParams;
+  @state() private _params?: PersonDetailDialogParams;
 
-  @internalProperty() private _submitting = false;
+  @state() private _submitting = false;
 
-  @internalProperty() private _personExists = false;
+  @state() private _personExists = false;
 
   private _deviceTrackersAvailable = memoizeOne((hass) =>
     Object.keys(hass.states).some(
@@ -438,7 +431,7 @@ class DialogPersonDetail extends LitElement {
     this._params = undefined;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/config/person/ha-config-person.ts b/src/panels/config/person/ha-config-person.ts
index 697627e09f..e67bb715f6 100644
--- a/src/panels/config/person/ha-config-person.ts
+++ b/src/panels/config/person/ha-config-person.ts
@@ -1,15 +1,8 @@
 import { mdiPlus } from "@mdi/js";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
-import {
-  css,
-  CSSResult,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { property, state } from "lit/decorators";
 import { compare } from "../../../common/string/compare";
 import "../../../components/ha-card";
 import "../../../components/ha-fab";
@@ -47,9 +40,9 @@ class HaConfigPerson extends LitElement {
 
   @property() public route!: Route;
 
-  @internalProperty() private _storageItems?: Person[];
+  @state() private _storageItems?: Person[];
 
-  @internalProperty() private _configItems?: Person[];
+  @state() private _configItems?: Person[];
 
   private _usersLoad?: Promise<User[]>;
 
@@ -265,7 +258,7 @@ class HaConfigPerson extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       a {
         color: var(--primary-color);
diff --git a/src/panels/config/scene/ha-config-scene.ts b/src/panels/config/scene/ha-config-scene.ts
index 275a00200f..ae0742e754 100644
--- a/src/panels/config/scene/ha-config-scene.ts
+++ b/src/panels/config/scene/ha-config-scene.ts
@@ -1,5 +1,6 @@
 import { HassEntities } from "home-assistant-js-websocket";
-import { customElement, property, PropertyValues } from "lit-element";
+import { PropertyValues } from "lit";
+import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { debounce } from "../../../common/util/debounce";
diff --git a/src/panels/config/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts
index cdecf87ec2..d887231989 100644
--- a/src/panels/config/scene/ha-scene-dashboard.ts
+++ b/src/panels/config/scene/ha-scene-dashboard.ts
@@ -8,26 +8,18 @@ import {
   mdiPlus,
 } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
-import {
-  css,
-  CSSResultArray,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { stateIcon } from "../../../common/entity/state_icon";
 import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
+import "../../../components/ha-button-related-filter-menu";
 import "../../../components/ha-fab";
 import "../../../components/ha-icon";
 import "../../../components/ha-svg-icon";
-import "../../../components/ha-button-related-filter-menu";
 import { forwardHaptic } from "../../../data/haptics";
 import { activateScene, SceneEntity } from "../../../data/scene";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
@@ -52,9 +44,9 @@ class HaSceneDashboard extends LitElement {
 
   @property() private _activeFilters?: string[];
 
-  @internalProperty() private _filteredScenes?: string[] | null;
+  @state() private _filteredScenes?: string[] | null;
 
-  @internalProperty() private _filterValue?;
+  @state() private _filterValue?;
 
   private _scenes = memoizeOne(
     (scenes: SceneEntity[], filteredScenes?: string[] | null) => {
@@ -252,7 +244,7 @@ class HaSceneDashboard extends LitElement {
     });
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts
index 0fd4d9dcd1..bf4b44e295 100644
--- a/src/panels/config/scene/ha-scene-editor.ts
+++ b/src/panels/config/scene/ha-scene-editor.ts
@@ -1,20 +1,25 @@
-import { mdiContentSave } from "@mdi/js";
+import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
+import "@material/mwc-list/mwc-list-item";
+import {
+  mdiContentDuplicate,
+  mdiContentSave,
+  mdiDelete,
+  mdiDotsVertical,
+} from "@mdi/js";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import { HassEvent } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -48,6 +53,7 @@ import {
   SceneEntities,
   SceneEntity,
   SCENE_IGNORED_DOMAINS,
+  showSceneEditor,
 } from "../../../data/scene";
 import {
   showAlertDialog,
@@ -83,35 +89,35 @@ export class HaSceneEditor extends SubscribeMixin(
 
   @property() public route!: Route;
 
-  @property() public sceneId?: string;
+  @property() public sceneId: string | null = null;
 
   @property() public scenes!: SceneEntity[];
 
   @property() public showAdvanced!: boolean;
 
-  @internalProperty() private _dirty = false;
+  @state() private _dirty = false;
 
-  @internalProperty() private _errors?: string;
+  @state() private _errors?: string;
 
-  @internalProperty() private _config?: SceneConfig;
+  @state() private _config?: SceneConfig;
 
-  @internalProperty() private _entities: string[] = [];
+  @state() private _entities: string[] = [];
 
-  @internalProperty() private _devices: string[] = [];
+  @state() private _devices: string[] = [];
 
-  @internalProperty()
+  @state()
   private _deviceRegistryEntries: DeviceRegistryEntry[] = [];
 
-  @internalProperty()
+  @state()
   private _entityRegistryEntries: EntityRegistryEntry[] = [];
 
-  @internalProperty() private _scene?: SceneEntity;
+  @state() private _scene?: SceneEntity;
 
   private _storedStates: SceneEntities = {};
 
   private _unsubscribeEvents?: () => void;
 
-  @internalProperty() private _deviceEntityLookup: DeviceEntitiesLookup = {};
+  @state() private _deviceEntityLookup: DeviceEntitiesLookup = {};
 
   private _activateContextId?: string;
 
@@ -198,19 +204,52 @@ export class HaSceneEditor extends SubscribeMixin(
         .backCallback=${() => this._backTapped()}
         .tabs=${configSections.automation}
       >
-        ${!this.sceneId
-          ? ""
-          : html`
-              <ha-icon-button
-                class="warning"
-                slot="toolbar-icon"
-                title="${this.hass.localize(
-                  "ui.panel.config.scene.picker.delete_scene"
-                )}"
-                icon="hass:delete"
-                @click=${this._deleteTapped}
-              ></ha-icon-button>
-            `}
+        <ha-button-menu
+          corner="BOTTOM_START"
+          slot="toolbar-icon"
+          @action=${this._handleMenuAction}
+          activatable
+        >
+          <mwc-icon-button
+            slot="trigger"
+            .title=${this.hass.localize("ui.common.menu")}
+            .label=${this.hass.localize("ui.common.overflow_menu")}
+            ><ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
+          </mwc-icon-button>
+
+          <mwc-list-item
+            .disabled=${!this.sceneId}
+            aria-label=${this.hass.localize(
+              "ui.panel.config.scene.picker.duplicate_scene"
+            )}
+            graphic="icon"
+          >
+            ${this.hass.localize(
+              "ui.panel.config.scene.picker.duplicate_scene"
+            )}
+            <ha-svg-icon
+              slot="graphic"
+              .path=${mdiContentDuplicate}
+            ></ha-svg-icon>
+          </mwc-list-item>
+
+          <mwc-list-item
+            .disabled=${!this.sceneId}
+            aria-label=${this.hass.localize(
+              "ui.panel.config.scene.picker.delete_scene"
+            )}
+            class=${classMap({ warning: Boolean(this.sceneId) })}
+            graphic="icon"
+          >
+            ${this.hass.localize("ui.panel.config.scene.picker.delete_scene")}
+            <ha-svg-icon
+              class=${classMap({ warning: Boolean(this.sceneId) })}
+              slot="graphic"
+              .path=${mdiDelete}
+            >
+            </ha-svg-icon>
+          </mwc-list-item>
+        </ha-button-menu>
         ${this._errors ? html` <div class="errors">${this._errors}</div> ` : ""}
         ${this.narrow ? html` <span slot="header">${name}</span> ` : ""}
         <div
@@ -479,6 +518,17 @@ export class HaSceneEditor extends SubscribeMixin(
     }
   }
 
+  private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
+    switch (ev.detail.index) {
+      case 0:
+        this._duplicate();
+        break;
+      case 1:
+        this._deleteTapped();
+        break;
+    }
+  }
+
   private async _setScene() {
     const scene = this.scenes.find(
       (entity: SceneEntity) => entity.attributes.id === this.sceneId
@@ -683,12 +733,37 @@ export class HaSceneEditor extends SubscribeMixin(
     history.back();
   }
 
+  private async _duplicate() {
+    if (this._dirty) {
+      if (
+        !(await showConfirmationDialog(this, {
+          text: this.hass!.localize(
+            "ui.panel.config.scene.editor.unsaved_confirm"
+          ),
+          confirmText: this.hass!.localize("ui.common.leave"),
+          dismissText: this.hass!.localize("ui.common.stay"),
+        }))
+      ) {
+        return;
+      }
+      // Wait for dialog to complete closing
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    }
+    showSceneEditor({
+      ...this._config,
+      id: undefined,
+      name: `${this._config?.name} (${this.hass.localize(
+        "ui.panel.config.scene.picker.duplicate"
+      )})`,
+    });
+  }
+
   private _calculateStates(): SceneEntities {
     const output: SceneEntities = {};
     this._entities.forEach((entityId) => {
-      const state = this._getCurrentState(entityId);
-      if (state) {
-        output[entityId] = state;
+      const entityState = this._getCurrentState(entityId);
+      if (entityState) {
+        output[entityId] = entityState;
       }
     });
     return output;
@@ -698,11 +773,11 @@ export class HaSceneEditor extends SubscribeMixin(
     if (entityId in this._storedStates) {
       return;
     }
-    const state = this._getCurrentState(entityId);
-    if (!state) {
+    const entityState = this._getCurrentState(entityId);
+    if (!entityState) {
       return;
     }
-    this._storedStates[entityId] = state;
+    this._storedStates[entityId] = entityState;
   }
 
   private _getCurrentState(entityId: string) {
@@ -721,7 +796,7 @@ export class HaSceneEditor extends SubscribeMixin(
       this._dirty = false;
 
       if (!this.sceneId) {
-        navigate(this, `/config/scene/edit/${id}`, true);
+        navigate(`/config/scene/edit/${id}`, { replace: true });
       }
     } catch (err) {
       this._errors = err.body.message || err.message;
@@ -736,7 +811,7 @@ export class HaSceneEditor extends SubscribeMixin(
     this._saveScene();
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/script/ha-config-script.ts b/src/panels/config/script/ha-config-script.ts
index 6efe063b55..f1c11a2b84 100644
--- a/src/panels/config/script/ha-config-script.ts
+++ b/src/panels/config/script/ha-config-script.ts
@@ -1,5 +1,6 @@
 import { HassEntities } from "home-assistant-js-websocket";
-import { customElement, property, PropertyValues } from "lit-element";
+import { PropertyValues } from "lit";
+import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { debounce } from "../../../common/util/debounce";
diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts
index e59a8b7429..dc7abce376 100644
--- a/src/panels/config/script/ha-script-editor.ts
+++ b/src/panels/config/script/ha-script-editor.ts
@@ -13,16 +13,14 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
 import { PaperListboxElement } from "@polymer/paper-listbox";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+} from "lit";
+import { property, state, query } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { computeObjectId } from "../../../common/entity/compute_object_id";
 import { navigate } from "../../../common/navigate";
 import { slugify } from "../../../common/string/slugify";
@@ -61,7 +59,7 @@ import { configSections } from "../ha-panel-config";
 export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public scriptEntityId!: string;
+  @property() public scriptEntityId: string | null = null;
 
   @property() public route!: Route;
 
@@ -69,17 +67,17 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
 
   @property() public narrow!: boolean;
 
-  @internalProperty() private _config?: ScriptConfig;
+  @state() private _config?: ScriptConfig;
 
-  @internalProperty() private _entityId?: string;
+  @state() private _entityId?: string;
 
-  @internalProperty() private _idError = false;
+  @state() private _idError = false;
 
-  @internalProperty() private _dirty = false;
+  @state() private _dirty = false;
 
-  @internalProperty() private _errors?: string;
+  @state() private _errors?: string;
 
-  @internalProperty() private _mode: "gui" | "yaml" = "gui";
+  @state() private _mode: "gui" | "yaml" = "gui";
 
   @query("ha-yaml-editor", true) private _editor?: HaYamlEditor;
 
@@ -161,12 +159,12 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
             aria-label=${this.hass.localize(
               "ui.panel.config.script.editor.delete_script"
             )}
-            class=${classMap({ warning: this.scriptEntityId })}
+            class=${classMap({ warning: Boolean(this.scriptEntityId) })}
             graphic="icon"
           >
             ${this.hass.localize("ui.panel.config.script.editor.delete_script")}
             <ha-svg-icon
-              class=${classMap({ warning: this.scriptEntityId })}
+              class=${classMap({ warning: Boolean(this.scriptEntityId) })}
               slot="graphic"
               .path=${mdiDelete}
             >
@@ -470,7 +468,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
 
   private async _runScript(ev) {
     ev.stopPropagation();
-    await triggerScript(this.hass, this.scriptEntityId);
+    await triggerScript(this.hass, this.scriptEntityId as string);
     showToast(this, {
       message: this.hass.localize(
         "ui.notification_toast.triggered",
@@ -602,7 +600,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
       // Wait for dialog to complate closing
       await new Promise((resolve) => setTimeout(resolve, 0));
     }
-    showScriptEditor(this, {
+    showScriptEditor({
       ...this._config,
       alias: `${this._config?.alias} (${this.hass.localize(
         "ui.panel.config.script.picker.duplicate"
@@ -620,7 +618,10 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
   }
 
   private async _delete() {
-    await deleteScript(this.hass, computeObjectId(this.scriptEntityId));
+    await deleteScript(
+      this.hass,
+      computeObjectId(this.scriptEntityId as string)
+    );
     history.back();
   }
 
@@ -664,7 +665,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
         this._dirty = false;
 
         if (!this.scriptEntityId) {
-          navigate(this, `/config/script/edit/${id}`, true);
+          navigate(`/config/script/edit/${id}`, { replace: true });
         }
       },
       (errors) => {
@@ -681,7 +682,7 @@ export class HaScriptEditor extends KeyboardShortcutMixin(LitElement) {
     this._saveScript();
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts
index bd38f62599..c52efb19df 100644
--- a/src/panels/config/script/ha-script-picker.ts
+++ b/src/panels/config/script/ha-script-picker.ts
@@ -7,16 +7,8 @@ import {
   mdiPlus,
 } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-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 memoizeOne from "memoize-one";
 import { formatDateTime } from "../../../common/datetime/format_date_time";
 import { fireEvent } from "../../../common/dom/fire_event";
@@ -50,9 +42,9 @@ class HaScriptPicker extends LitElement {
 
   @property() private _activeFilters?: string[];
 
-  @internalProperty() private _filteredScripts?: string[] | null;
+  @state() private _filteredScripts?: string[] | null;
 
-  @internalProperty() private _filterValue?;
+  @state() private _filterValue?;
 
   private _scripts = memoizeOne(
     (scripts: HassEntity[], filteredScripts?: string[] | null) => {
@@ -268,7 +260,7 @@ class HaScriptPicker extends LitElement {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/server_control/ha-config-server-control.ts b/src/panels/config/server_control/ha-config-server-control.ts
index f63cfab076..3a5c7ae56e 100644
--- a/src/panels/config/server_control/ha-config-server-control.ts
+++ b/src/panels/config/server_control/ha-config-server-control.ts
@@ -2,16 +2,8 @@ import "@material/mwc-button";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@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 { componentsWithService } from "../../../common/config/components_with_service";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-card";
@@ -35,9 +27,9 @@ export class HaConfigServerControl extends LitElement {
 
   @property() public showAdvanced!: boolean;
 
-  @internalProperty() private _validating = false;
+  @state() private _validating = false;
 
-  @internalProperty() private _reloadableDomains: string[] = [];
+  @state() private _reloadableDomains: string[] = [];
 
   private _validateLog = "";
 
@@ -242,7 +234,7 @@ export class HaConfigServerControl extends LitElement {
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/config/tags/dialog-tag-detail.ts b/src/panels/config/tags/dialog-tag-detail.ts
index 68e9f39b0e..9d7f322336 100644
--- a/src/panels/config/tags/dialog-tag-detail.ts
+++ b/src/panels/config/tags/dialog-tag-detail.ts
@@ -1,20 +1,11 @@
 import "@material/mwc-button";
 import "@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 { fireEvent } from "../../../common/dom/fire_event";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-formfield";
 import "../../../components/ha-switch";
-import "../../../components/map/ha-location-editor";
 import { Tag, UpdateTagParams } from "../../../data/tag";
 import { HassDialog } from "../../../dialogs/make-dialog-manager";
 import { haStyleDialog } from "../../../resources/styles";
@@ -29,17 +20,17 @@ class DialogTagDetail
   implements HassDialog<TagDetailDialogParams> {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _id?: string;
+  @state() private _id?: string;
 
-  @internalProperty() private _name!: string;
+  @state() private _name!: string;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _params?: TagDetailDialogParams;
+  @state() private _params?: TagDetailDialogParams;
 
-  @internalProperty() private _submitting = false;
+  @state() private _submitting = false;
 
-  @internalProperty() private _qrCode?: TemplateResult;
+  @state() private _qrCode?: TemplateResult;
 
   public showDialog(params: TagDetailDialogParams): void {
     this._params = params;
@@ -253,7 +244,7 @@ class DialogTagDetail
     this._qrCode = html`<img src=${canvas.toDataURL()}></img>`;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/config/tags/ha-config-tags.ts b/src/panels/config/tags/ha-config-tags.ts
index d543b5c6af..030bb53213 100644
--- a/src/panels/config/tags/ha-config-tags.ts
+++ b/src/panels/config/tags/ha-config-tags.ts
@@ -6,14 +6,8 @@ import {
   mdiPlus,
   mdiRobot,
 } from "@mdi/js";
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-} from "lit-element";
+import { html, LitElement, PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { DataTableColumnContainer } from "../../../components/data-table/ha-data-table";
 import "../../../components/ha-card";
@@ -57,9 +51,9 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
 
   @property() public route!: Route;
 
-  @internalProperty() private _tags: Tag[] = [];
+  @state() private _tags: Tag[] = [];
 
-  @internalProperty() private _canWriteTags = false;
+  @state() private _canWriteTags = false;
 
   private _columns = memoizeOne(
     (
@@ -266,7 +260,7 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
       ),
       trigger: [{ platform: "tag", tag_id: tag.id } as TagTrigger],
     };
-    showAutomationEditor(this, data);
+    showAutomationEditor(data);
   }
 
   private _addTag() {
diff --git a/src/panels/config/tags/tag-image.ts b/src/panels/config/tags/tag-image.ts
index 7392b935cb..ce5a5826c4 100644
--- a/src/panels/config/tags/tag-image.ts
+++ b/src/panels/config/tags/tag-image.ts
@@ -1,12 +1,6 @@
 import { mdiNfcVariant } from "@mdi/js";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../../../components/ha-svg-icon";
 import { TagRowData } from "./ha-config-tags";
 
@@ -52,7 +46,7 @@ export class HaTagImage extends LitElement {
     </div>`;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .image {
         height: 100%;
diff --git a/src/panels/config/users/dialog-add-user.ts b/src/panels/config/users/dialog-add-user.ts
index b18bfc7a7e..ed9f6520f0 100644
--- a/src/panels/config/users/dialog-add-user.ts
+++ b/src/panels/config/users/dialog-add-user.ts
@@ -2,15 +2,13 @@ import "@material/mwc-button";
 import "@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 { computeRTLDirection } from "../../../common/util/compute_rtl";
 import "../../../components/ha-circular-progress";
 import "../../../components/ha-dialog";
@@ -33,24 +31,24 @@ import { AddUserDialogParams } from "./show-dialog-add-user";
 export class DialogAddUser extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _loading = false;
+  @state() private _loading = false;
 
   // Error message when can't talk to server etc
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _params?: AddUserDialogParams;
+  @state() private _params?: AddUserDialogParams;
 
-  @internalProperty() private _name?: string;
+  @state() private _name?: string;
 
-  @internalProperty() private _username?: string;
+  @state() private _username?: string;
 
-  @internalProperty() private _password?: string;
+  @state() private _password?: string;
 
-  @internalProperty() private _passwordConfirm?: string;
+  @state() private _passwordConfirm?: string;
 
-  @internalProperty() private _isAdmin?: boolean;
+  @state() private _isAdmin?: boolean;
 
-  @internalProperty() private _allowChangeName = true;
+  @state() private _allowChangeName = true;
 
   public showDialog(params: AddUserDialogParams) {
     this._params = params;
@@ -86,7 +84,7 @@ export class DialogAddUser extends LitElement {
     return html`
       <ha-dialog
         open
-        @closing=${this._close}
+        @closed=${this._close}
         scrimClickAction
         escapeKeyAction
         .heading=${this.hass.localize("ui.panel.config.users.add_user.caption")}
@@ -264,7 +262,7 @@ export class DialogAddUser extends LitElement {
     this._close();
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/config/users/dialog-user-detail.ts b/src/panels/config/users/dialog-user-detail.ts
index 7882b5ba16..3b6d055110 100644
--- a/src/panels/config/users/dialog-user-detail.ts
+++ b/src/panels/config/users/dialog-user-detail.ts
@@ -1,16 +1,8 @@
 import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-tooltip/paper-tooltip";
-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 { computeRTLDirection } from "../../../common/util/compute_rtl";
 import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-formfield";
@@ -34,17 +26,17 @@ import { UserDetailDialogParams } from "./show-dialog-user-detail";
 class DialogUserDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _name!: string;
+  @state() private _name!: string;
 
-  @internalProperty() private _isAdmin?: boolean;
+  @state() private _isAdmin?: boolean;
 
-  @internalProperty() private _isActive?: boolean;
+  @state() private _isActive?: boolean;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _params?: UserDetailDialogParams;
+  @state() private _params?: UserDetailDialogParams;
 
-  @internalProperty() private _submitting = false;
+  @state() private _submitting = false;
 
   public async showDialog(params: UserDetailDialogParams): Promise<void> {
     this._params = params;
@@ -63,7 +55,7 @@ class DialogUserDetail extends LitElement {
     return html`
       <ha-dialog
         open
-        @closing=${this._close}
+        @closed=${this._close}
         scrimClickAction
         escapeKeyAction
         .heading=${createCloseHeading(this.hass, user.name)}
@@ -295,7 +287,7 @@ class DialogUserDetail extends LitElement {
     this._params = undefined;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/config/users/ha-config-users.ts b/src/panels/config/users/ha-config-users.ts
index 74dde61fc3..13807febd4 100644
--- a/src/panels/config/users/ha-config-users.ts
+++ b/src/panels/config/users/ha-config-users.ts
@@ -1,11 +1,6 @@
 import { mdiPlus } from "@mdi/js";
-import {
-  customElement,
-  LitElement,
-  property,
-  PropertyValues,
-} from "lit-element";
-import { html } from "lit-html";
+import { html, LitElement, PropertyValues } from "lit";
+import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { HASSDomEvent } from "../../../common/dom/fire_event";
 import {
diff --git a/src/panels/config/zone/dialog-zone-detail.ts b/src/panels/config/zone/dialog-zone-detail.ts
index b2dd807734..ac4cedc32a 100644
--- a/src/panels/config/zone/dialog-zone-detail.ts
+++ b/src/panels/config/zone/dialog-zone-detail.ts
@@ -1,14 +1,8 @@
 import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
-import {
-  css,
-  CSSResult,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { addDistanceToCoord } from "../../../common/location/add_distance_to_coord";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
@@ -29,23 +23,23 @@ import { ZoneDetailDialogParams } from "./show-dialog-zone-detail";
 class DialogZoneDetail extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _name!: string;
+  @state() private _name!: string;
 
-  @internalProperty() private _icon!: string;
+  @state() private _icon!: string;
 
-  @internalProperty() private _latitude!: number;
+  @state() private _latitude!: number;
 
-  @internalProperty() private _longitude!: number;
+  @state() private _longitude!: number;
 
-  @internalProperty() private _passive!: boolean;
+  @state() private _passive!: boolean;
 
-  @internalProperty() private _radius!: number;
+  @state() private _radius!: number;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _params?: ZoneDetailDialogParams;
+  @state() private _params?: ZoneDetailDialogParams;
 
-  @internalProperty() private _submitting = false;
+  @state() private _submitting = false;
 
   public showDialog(params: ZoneDetailDialogParams): void {
     this._params = params;
@@ -141,7 +135,7 @@ class DialogZoneDetail extends LitElement {
             <ha-location-editor
               class="flex"
               .hass=${this.hass}
-              .location=${this._locationValue}
+              .location=${this._locationValue(this._latitude, this._longitude)}
               .radius=${this._radius}
               .radiusColor=${this._passive
                 ? passiveRadiusColor
@@ -228,9 +222,7 @@ class DialogZoneDetail extends LitElement {
     `;
   }
 
-  private get _locationValue() {
-    return [Number(this._latitude), Number(this._longitude)];
-  }
+  private _locationValue = memoizeOne((lat, lng) => [Number(lat), Number(lng)]);
 
   private _locationChanged(ev) {
     [this._latitude, this._longitude] = ev.currentTarget.location;
@@ -283,7 +275,7 @@ class DialogZoneDetail extends LitElement {
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/config/zone/ha-config-zone.ts b/src/panels/config/zone/ha-config-zone.ts
index 0e1972f69e..e5f6883d20 100644
--- a/src/panels/config/zone/ha-config-zone.ts
+++ b/src/panels/config/zone/ha-config-zone.ts
@@ -1,4 +1,3 @@
-import "../../../components/ha-fab";
 import "@material/mwc-icon-button";
 import { mdiPencil, mdiPencilOff, mdiPlus } from "@mdi/js";
 import "@polymer/paper-item/paper-icon-item";
@@ -8,22 +7,20 @@ import "@polymer/paper-tooltip/paper-tooltip";
 import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
+} from "lit";
+import { customElement, property, state, query } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
 import { navigate } from "../../../common/navigate";
 import { compare } from "../../../common/string/compare";
 import "../../../components/ha-card";
+import "../../../components/ha-fab";
 import "../../../components/ha-svg-icon";
 import "../../../components/map/ha-locations-editor";
 import type {
@@ -62,13 +59,13 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
 
   @property() public route!: Route;
 
-  @internalProperty() private _storageItems?: Zone[];
+  @state() private _storageItems?: Zone[];
 
-  @internalProperty() private _stateItems?: HassEntity[];
+  @state() private _stateItems?: HassEntity[];
 
-  @internalProperty() private _activeEntry = "";
+  @state() private _activeEntry = "";
 
-  @internalProperty() private _canEditCore = false;
+  @state() private _canEditCore = false;
 
   @query("ha-locations-editor") private _map?: HaLocationsEditor;
 
@@ -76,22 +73,25 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
 
   private _getZones = memoizeOne(
     (storageItems: Zone[], stateItems: HassEntity[]): MarkerLocation[] => {
-      const stateLocations: MarkerLocation[] = stateItems.map((state) => ({
-        id: state.entity_id,
-        icon: state.attributes.icon,
-        name: state.attributes.friendly_name || state.entity_id,
-        latitude: state.attributes.latitude,
-        longitude: state.attributes.longitude,
-        radius: state.attributes.radius,
-        radius_color:
-          state.entity_id === "zone.home"
-            ? homeRadiusColor
-            : state.attributes.passive
-            ? passiveRadiusColor
-            : defaultRadiusColor,
-        location_editable: state.entity_id === "zone.home" && this._canEditCore,
-        radius_editable: false,
-      }));
+      const stateLocations: MarkerLocation[] = stateItems.map(
+        (entityState) => ({
+          id: entityState.entity_id,
+          icon: entityState.attributes.icon,
+          name: entityState.attributes.friendly_name || entityState.entity_id,
+          latitude: entityState.attributes.latitude,
+          longitude: entityState.attributes.longitude,
+          radius: entityState.attributes.radius,
+          radius_color:
+            entityState.entity_id === "zone.home"
+              ? homeRadiusColor
+              : entityState.attributes.passive
+              ? passiveRadiusColor
+              : defaultRadiusColor,
+          location_editable:
+            entityState.entity_id === "zone.home" && this._canEditCore,
+          radius_editable: false,
+        })
+      );
       const storageLocations: MarkerLocation[] = storageItems.map((zone) => ({
         ...zone,
         radius_color: zone.passive ? passiveRadiusColor : defaultRadiusColor,
@@ -161,22 +161,26 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
                 `
               )}
               ${this._stateItems.map(
-                (state) => html`
+                (stateObject) => html`
                   <paper-icon-item
-                    data-id=${state.entity_id}
+                    data-id=${stateObject.entity_id}
                     @click=${this._stateItemClicked}
                   >
-                    <ha-icon .icon=${state.attributes.icon} slot="item-icon">
+                    <ha-icon
+                      .icon=${stateObject.attributes.icon}
+                      slot="item-icon"
+                    >
                     </ha-icon>
                     <paper-item-body>
-                      ${state.attributes.friendly_name || state.entity_id}
+                      ${stateObject.attributes.friendly_name ||
+                      stateObject.entity_id}
                     </paper-item-body>
                     <div style="display:inline-block">
                       <mwc-icon-button
-                        .entityId=${state.entity_id}
+                        .entityId=${stateObject.entity_id}
                         @click=${this._openCoreConfig}
                         disabled=${ifDefined(
-                          state.entity_id === "zone.home" &&
+                          stateObject.entity_id === "zone.home" &&
                             this.narrow &&
                             this._canEditCore
                             ? undefined
@@ -184,7 +188,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
                         )}
                       >
                         <ha-svg-icon
-                          .path=${state.entity_id === "zone.home" &&
+                          .path=${stateObject.entity_id === "zone.home" &&
                           this.narrow &&
                           this._canEditCore
                             ? mdiPencil
@@ -192,7 +196,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
                         ></ha-svg-icon>
                       </mwc-icon-button>
                       <paper-tooltip animation-delay="0" position="left">
-                        ${state.entity_id === "zone.home"
+                        ${stateObject.entity_id === "zone.home"
                           ? this.hass.localize(
                               `ui.panel.config.zone.${
                                 this.narrow
@@ -265,7 +269,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
       ["storage", "default"].includes(this.hass.config.config_source);
     this._fetchData();
     if (this.route.path === "/new") {
-      navigate(this, "/config/zone", true);
+      navigate("/config/zone", { replace: true });
       this._createZone();
     }
   }
@@ -395,7 +399,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
     ) {
       return;
     }
-    navigate(this, "/config/core");
+    navigate("/config/core");
   }
 
   private async _createEntry(values: ZoneMutableParams) {
@@ -462,7 +466,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       hass-loading-screen {
         --app-header-background-color: var(--sidebar-background-color);
diff --git a/src/panels/custom/ha-panel-custom.ts b/src/panels/custom/ha-panel-custom.ts
index e000a4c7dd..907bc9c655 100644
--- a/src/panels/custom/ha-panel-custom.ts
+++ b/src/panels/custom/ha-panel-custom.ts
@@ -1,5 +1,6 @@
-import { property, PropertyValues, UpdatingElement } from "lit-element";
-import { navigate } from "../../common/navigate";
+import { PropertyValues, ReactiveElement } from "lit";
+import { property } from "lit/decorators";
+import { navigate, NavigateOptions } from "../../common/navigate";
 import { CustomPanelInfo } from "../../data/panel_custom";
 import { HomeAssistant, Route } from "../../types";
 import { createCustomPanelElement } from "../../util/custom-panel/create-custom-panel-element";
@@ -15,7 +16,7 @@ declare global {
   }
 }
 
-export class HaPanelCustom extends UpdatingElement {
+export class HaPanelCustom extends ReactiveElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property() public narrow!: boolean;
@@ -26,11 +27,15 @@ export class HaPanelCustom extends UpdatingElement {
 
   private _setProperties?: (props: Record<string, unknown>) => void | undefined;
 
+  protected createRenderRoot() {
+    return this;
+  }
+
   // Since navigate fires events on `window`, we need to expose this as a function
   // to allow custom panels to forward their location changes to the main window
   // instead of their iframe window.
-  public navigate = (path: string, replace?: boolean) =>
-    navigate(this, path, replace);
+  public navigate = (path: string, options?: NavigateOptions) =>
+    navigate(path, options);
 
   public registerIframe(initialize, setProperties) {
     initialize(this.panel, {
diff --git a/src/panels/developer-tools/developer-tools-router.ts b/src/panels/developer-tools/developer-tools-router.ts
index 903948a168..efc0c01ddc 100644
--- a/src/panels/developer-tools/developer-tools-router.ts
+++ b/src/panels/developer-tools/developer-tools-router.ts
@@ -1,5 +1,5 @@
 import { PolymerElement } from "@polymer/polymer";
-import { customElement, property } from "lit-element";
+import { customElement, property } from "lit/decorators";
 import { HassRouterPage, RouterOptions } from "../../layouts/hass-router-page";
 import { HomeAssistant } from "../../types";
 
diff --git a/src/panels/developer-tools/event/developer-tools-event.js b/src/panels/developer-tools/event/developer-tools-event.js
index 6c508799cc..962676645f 100644
--- a/src/panels/developer-tools/event/developer-tools-event.js
+++ b/src/panels/developer-tools/event/developer-tools-event.js
@@ -4,7 +4,7 @@ import "@polymer/paper-input/paper-input";
 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 "../../../components/ha-code-editor";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { EventsMixin } from "../../../mixins/events-mixin";
@@ -151,7 +151,7 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {
 
   _computeParsedEventData(eventData) {
     try {
-      return eventData.trim() ? safeLoad(eventData) : {};
+      return eventData.trim() ? load(eventData) : {};
     } catch (err) {
       return ERROR_SENTINEL;
     }
diff --git a/src/panels/developer-tools/event/event-subscribe-card.ts b/src/panels/developer-tools/event/event-subscribe-card.ts
index 58a8fc27a7..cfa8a67be6 100644
--- a/src/panels/developer-tools/event/event-subscribe-card.ts
+++ b/src/panels/developer-tools/event/event-subscribe-card.ts
@@ -1,16 +1,8 @@
 import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
 import { HassEvent } from "home-assistant-js-websocket";
-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 { formatTime } from "../../../common/datetime/format_time";
 import "../../../components/ha-card";
 import { PolymerChangedEvent } from "../../../polymer-types";
@@ -20,11 +12,11 @@ import { HomeAssistant } from "../../../types";
 class EventSubscribeCard extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _eventType = "";
+  @state() private _eventType = "";
 
-  @internalProperty() private _subscribed?: () => void;
+  @state() private _subscribed?: () => void;
 
-  @internalProperty() private _events: Array<{
+  @state() private _events: Array<{
     id: number;
     event: HassEvent;
   }> = [];
@@ -118,7 +110,7 @@ class EventSubscribeCard extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       form {
         display: block;
diff --git a/src/panels/developer-tools/ha-panel-developer-tools.ts b/src/panels/developer-tools/ha-panel-developer-tools.ts
index 3ad8fe9887..3d05125563 100644
--- a/src/panels/developer-tools/ha-panel-developer-tools.ts
+++ b/src/panels/developer-tools/ha-panel-developer-tools.ts
@@ -1,15 +1,8 @@
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/paper-tabs/paper-tab";
-import {
-  css,
-  CSSResultArray,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { navigate } from "../../common/navigate";
 import "../../components/ha-icon-button";
 import "../../components/ha-menu-button";
@@ -84,7 +77,7 @@ class PanelDeveloperTools extends LitElement {
   private handlePageSelected(ev) {
     const newPage = ev.detail.item.getAttribute("page-name");
     if (newPage !== this._page) {
-      navigate(this, `/developer-tools/${newPage}`);
+      navigate(`/developer-tools/${newPage}`);
     } else {
       scrollTo(0, 0);
     }
@@ -94,7 +87,7 @@ class PanelDeveloperTools extends LitElement {
     return this.route.path.substr(1);
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/developer-tools/service/developer-tools-service.ts b/src/panels/developer-tools/service/developer-tools-service.ts
index a7b3451a14..8e66d99a87 100644
--- a/src/panels/developer-tools/service/developer-tools-service.ts
+++ b/src/panels/developer-tools/service/developer-tools-service.ts
@@ -1,15 +1,8 @@
 import { mdiHelpCircle } from "@mdi/js";
 import { ERR_CONNECTION_LOST } from "home-assistant-js-websocket";
-import { safeLoad } from "js-yaml";
-import {
-  css,
-  CSSResultArray,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  query,
-} from "lit-element";
+import { load } from "js-yaml";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { LocalStorage } from "../../../common/decorators/local-storage";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -42,7 +35,7 @@ class HaPanelDevService extends LitElement {
 
   @property({ type: Boolean }) public narrow!: boolean;
 
-  @internalProperty() private _uiAvailable = true;
+  @state() private _uiAvailable = true;
 
   @LocalStorage("panel-dev-service-state-service-data", true)
   private _serviceData?: ServiceAction = { service: "", target: {}, data: {} };
@@ -368,9 +361,9 @@ class HaPanelDevService extends LitElement {
     const example = {};
     fields.forEach((field) => {
       if (field.example) {
-        let value = "";
+        let value: any = "";
         try {
-          value = safeLoad(field.example);
+          value = load(field.example);
         } catch (err) {
           value = field.example;
         }
@@ -381,7 +374,7 @@ class HaPanelDevService extends LitElement {
     this._yamlEditor?.setValue(this._serviceData);
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/developer-tools/state/developer-tools-state.js b/src/panels/developer-tools/state/developer-tools-state.js
index 64f85edfae..3389d29ae6 100644
--- a/src/panels/developer-tools/state/developer-tools-state.js
+++ b/src/panels/developer-tools/state/developer-tools-state.js
@@ -1,16 +1,19 @@
 import "@material/mwc-button";
 import {
-  mdiInformationOutline,
   mdiClipboardTextMultipleOutline,
+  mdiInformationOutline,
+  mdiRefresh,
 } from "@mdi/js";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { safeDump, safeLoad } from "js-yaml";
+import { dump, load } from "js-yaml";
 import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time";
+import { isPatternInWord } from "../../../common/string/filter/filter";
 import { computeRTL } from "../../../common/util/compute_rtl";
+import { copyToClipboard } from "../../../common/util/copy-clipboard";
 import "../../../components/entity/ha-entity-picker";
 import "../../../components/ha-code-editor";
 import "../../../components/ha-svg-icon";
@@ -18,7 +21,6 @@ import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
 import "../../../styles/polymer-ha-style";
-import { copyToClipboard } from "../../../common/util/copy-clipboard";
 
 const ERROR_SENTINEL = {};
 /*
@@ -46,8 +48,10 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
           padding: 0 16px;
         }
 
-        mwc-button {
+        .button-row {
+          display: flex;
           margin-top: 8px;
+          align-items: center;
         }
 
         .table-wrapper {
@@ -88,6 +92,12 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
           --mdc-icon-size: 20px;
           padding: 4px;
           cursor: pointer;
+          flex-shrink: 0;
+          margin-right: 8px;
+        }
+        .entities td:nth-child(1) {
+          min-width: 300px;
+          width: 30%;
         }
         .entities td:nth-child(3) {
           white-space: pre-wrap;
@@ -98,6 +108,15 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
           color: var(--primary-color);
         }
 
+        .entities .id-name-container {
+          display: flex;
+          flex-direction: column;
+        }
+        .entities .id-name-row {
+          display: flex;
+          align-items: center;
+        }
+
         :host([narrow]) .state-wrapper {
           flex-direction: column;
         }
@@ -139,9 +158,19 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
             error="[[!validJSON]]"
             on-value-changed="_yamlChanged"
           ></ha-code-editor>
-          <mwc-button on-click="handleSetState" disabled="[[!validJSON]]" raised
-            >[[localize('ui.panel.developer-tools.tabs.states.set_state')]]</mwc-button
-          >
+          <div class="button-row">
+            <mwc-button
+              on-click="handleSetState"
+              disabled="[[!validJSON]]"
+              raised
+              >[[localize('ui.panel.developer-tools.tabs.states.set_state')]]</mwc-button
+            >
+            <mwc-icon-button
+              on-click="entityIdChanged"
+              label="[[localize('ui.common.refresh')]]"
+              ><ha-svg-icon path="[[refreshIcon()]]"></ha-svg-icon
+            ></mwc-icon-button>
+          </div>
         </div>
         <div class="info">
           <template is="dom-if" if="[[_entity]]">
@@ -206,19 +235,30 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
           <template is="dom-repeat" items="[[_entities]]" as="entity">
             <tr>
               <td>
-                <ha-svg-icon
-                  on-click="entityMoreInfo"
-                  alt="[[localize('ui.panel.developer-tools.tabs.states.more_info')]]"
-                  title="[[localize('ui.panel.developer-tools.tabs.states.more_info')]]"
-                  path="[[informationOutlineIcon()]]"
-                ></ha-svg-icon>
-                <ha-svg-icon
-                  on-click="copyEntity"
-                  alt="[[localize('ui.panel.developer-tools.tabs.states.copy_id')]]"
-                  title="[[localize('ui.panel.developer-tools.tabs.states.copy_id')]]"
-                  path="[[clipboardOutlineIcon()]]"
-                ></ha-svg-icon>
-                <a href="#" on-click="entitySelected">[[entity.entity_id]]</a>
+                <div class="id-name-container">
+                  <div class="id-name-row">
+                    <ha-svg-icon
+                      on-click="copyEntity"
+                      alt="[[localize('ui.panel.developer-tools.tabs.states.copy_id')]]"
+                      title="[[localize('ui.panel.developer-tools.tabs.states.copy_id')]]"
+                      path="[[clipboardOutlineIcon()]]"
+                    ></ha-svg-icon>
+                    <a href="#" on-click="entitySelected"
+                      >[[entity.entity_id]]</a
+                    >
+                  </div>
+                  <div class="id-name-row">
+                    <ha-svg-icon
+                      on-click="entityMoreInfo"
+                      alt="[[localize('ui.panel.developer-tools.tabs.states.more_info')]]"
+                      title="[[localize('ui.panel.developer-tools.tabs.states.more_info')]]"
+                      path="[[informationOutlineIcon()]]"
+                    ></ha-svg-icon>
+                    <span class="secondary">
+                      [[entity.attributes.friendly_name]]
+                    </span>
+                  </div>
+                </div>
               </td>
               <td>[[entity.state]]</td>
               <template
@@ -319,7 +359,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
     this._entityId = state.entity_id;
     this._entity = state;
     this._state = state.state;
-    this._stateAttributes = safeDump(state.attributes);
+    this._stateAttributes = dump(state.attributes);
     ev.preventDefault();
   }
 
@@ -336,7 +376,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
     }
     this._entity = state;
     this._state = state.state;
-    this._stateAttributes = safeDump(state.attributes);
+    this._stateAttributes = dump(state.attributes);
   }
 
   entityMoreInfo(ev) {
@@ -367,13 +407,39 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
     return mdiClipboardTextMultipleOutline;
   }
 
+  refreshIcon() {
+    return mdiRefresh;
+  }
+
   computeEntities(hass, _entityFilter, _stateFilter, _attributeFilter) {
+    const _entityFilterLength = _entityFilter && _entityFilter.length;
+    const _entityFilterLow = _entityFilter && _entityFilter.toLowerCase();
+
     return Object.keys(hass.states)
-      .map(function (key) {
-        return hass.states[key];
-      })
-      .filter(function (value) {
-        if (!value.entity_id.includes(_entityFilter.toLowerCase())) {
+      .map((key) => hass.states[key])
+      .filter((value) => {
+        if (
+          _entityFilter &&
+          !isPatternInWord(
+            _entityFilterLow,
+            0,
+            _entityFilterLength,
+            value.entity_id.toLowerCase(),
+            0,
+            value.entity_id.length,
+            true
+          ) &&
+          (value.attributes.friendly_name === undefined ||
+            !isPatternInWord(
+              _entityFilterLow,
+              0,
+              _entityFilterLength,
+              value.attributes.friendly_name.toLowerCase(),
+              0,
+              value.attributes.friendly_name.length,
+              true
+            ))
+        ) {
           return false;
         }
 
@@ -410,7 +476,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
             const attributeValue = value.attributes[key];
 
             if (
-              attributeValue !== null &&
+              attributeValue !== undefined &&
               JSON.stringify(attributeValue).toLowerCase().includes(valueFilter)
             ) {
               return true;
@@ -476,7 +542,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
       (Array.isArray(value) && value.some((val) => val instanceof Object)) ||
       (!Array.isArray(value) && value instanceof Object)
     ) {
-      return `\n${safeDump(value)}`;
+      return `\n${dump(value)}`;
     }
     return Array.isArray(value) ? value.join(", ") : value;
   }
@@ -491,7 +557,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
 
   _computeParsedStateAttributes(stateAttributes) {
     try {
-      return stateAttributes.trim() ? safeLoad(stateAttributes) : {};
+      return stateAttributes.trim() ? load(stateAttributes) : {};
     } catch (err) {
       return ERROR_SENTINEL;
     }
diff --git a/src/panels/developer-tools/template/developer-tools-template.ts b/src/panels/developer-tools/template/developer-tools-template.ts
index 9ec9c1c4ad..670ae744b2 100644
--- a/src/panels/developer-tools/template/developer-tools-template.ts
+++ b/src/panels/developer-tools/template/developer-tools-template.ts
@@ -1,15 +1,8 @@
 import "@material/mwc-button/mwc-button";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResultArray,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+import { css, CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { debounce } from "../../../common/util/debounce";
 import "../../../components/ha-circular-progress";
 import "../../../components/ha-code-editor";
@@ -48,13 +41,13 @@ class HaPanelDevTemplate extends LitElement {
 
   @property() public narrow!: boolean;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _rendering = false;
+  @state() private _rendering = false;
 
-  @internalProperty() private _templateResult?: RenderTemplateResult;
+  @state() private _templateResult?: RenderTemplateResult;
 
-  @internalProperty() private _unsubRenderTemplate?: Promise<UnsubscribeFunc>;
+  @state() private _unsubRenderTemplate?: Promise<UnsubscribeFunc>;
 
   private _template = "";
 
@@ -105,7 +98,7 @@ class HaPanelDevTemplate extends LitElement {
           <ul>
             <li>
               <a
-                href="http://jinja.pocoo.org/docs/dev/templates/"
+                href="https://jinja.palletsprojects.com/en/latest/templates/"
                 target="_blank"
                 rel="noreferrer"
                 >${this.hass.localize(
@@ -240,7 +233,7 @@ class HaPanelDevTemplate extends LitElement {
     `;
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/history/ha-panel-history.ts b/src/panels/history/ha-panel-history.ts
index ba0fc03517..31737c8874 100644
--- a/src/panels/history/ha-panel-history.ts
+++ b/src/panels/history/ha-panel-history.ts
@@ -1,13 +1,7 @@
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import {
-  css,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-} from "lit-element";
-import { html } from "lit-html";
+import { css, html, LitElement, PropertyValues } from "lit";
+import { property, state } from "lit/decorators";
 import { computeRTL } from "../../common/util/compute_rtl";
 import "../../components/entity/ha-entity-picker";
 import "../../components/ha-circular-progress";
@@ -37,7 +31,7 @@ class HaPanelHistory extends LitElement {
 
   @property({ reflect: true, type: Boolean }) rtl = false;
 
-  @internalProperty() private _ranges?: DateRangePickerRanges;
+  @state() private _ranges?: DateRangePickerRanges;
 
   public constructor() {
     super();
diff --git a/src/panels/logbook/ha-logbook.ts b/src/panels/logbook/ha-logbook.ts
index cb77b90a92..87c1402869 100644
--- a/src/panels/logbook/ha-logbook.ts
+++ b/src/panels/logbook/ha-logbook.ts
@@ -1,16 +1,14 @@
+import { Layout1d, scroll } from "@lit-labs/virtualizer";
 import {
   css,
-  CSSResultArray,
-  customElement,
-  eventOptions,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { scroll } from "lit-virtualizer";
+} from "lit";
+import { customElement, eventOptions, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { DOMAINS_WITH_DYNAMIC_PICTURE } from "../../common/const";
 import { formatDate } from "../../common/datetime/format_date";
 import { formatTimeWithSeconds } from "../../common/datetime/format_time";
@@ -22,8 +20,8 @@ import { computeRTL, emitRTLDirection } from "../../common/util/compute_rtl";
 import "../../components/entity/state-badge";
 import "../../components/ha-circular-progress";
 import "../../components/ha-relative-time";
-import { TraceContexts } from "../../data/trace";
 import { LogbookEntry } from "../../data/logbook";
+import { TraceContexts } from "../../data/trace";
 import { haStyle, haStyleScrollbar } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 
@@ -101,7 +99,9 @@ class HaLogbook extends LitElement {
         ${this.virtualize
           ? scroll({
               items: this.entries,
-              renderItem: (item: LogbookEntry, index?: number) =>
+              layout: Layout1d,
+              // @ts-expect-error
+              renderItem: (item: LogbookEntry, index) =>
                 this._renderLogbookItem(item, index),
             })
           : this.entries.map((item, index) =>
@@ -254,7 +254,7 @@ class HaLogbook extends LitElement {
     });
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       haStyleScrollbar,
@@ -349,7 +349,11 @@ class HaLogbook extends LitElement {
           color: var(--primary-color);
         }
 
-        .uni-virtualizer-host {
+        .container {
+          max-height: var(--logbook-max-height);
+        }
+
+        :host([virtualize]) .container {
           display: block;
           position: relative;
           contain: strict;
@@ -357,7 +361,7 @@ class HaLogbook extends LitElement {
           overflow: auto;
         }
 
-        .uni-virtualizer-host > * {
+        .container > * {
           box-sizing: border-box;
         }
 
diff --git a/src/panels/logbook/ha-panel-logbook.ts b/src/panels/logbook/ha-panel-logbook.ts
index d8278a5877..9c93f077ee 100644
--- a/src/panels/logbook/ha-panel-logbook.ts
+++ b/src/panels/logbook/ha-panel-logbook.ts
@@ -1,15 +1,9 @@
 import { mdiRefresh } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import {
-  css,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-} from "lit-element";
+import { css, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { computeRTL } from "../../common/util/compute_rtl";
 import "../../components/entity/ha-entity-picker";
 import "../../components/ha-circular-progress";
@@ -17,19 +11,18 @@ import "../../components/ha-date-range-picker";
 import type { DateRangePickerRanges } from "../../components/ha-date-range-picker";
 import "../../components/ha-icon-button";
 import "../../components/ha-menu-button";
-import { TraceContexts, loadTraceContexts } from "../../data/trace";
 import {
   clearLogbookCache,
   getLogbookData,
   LogbookEntry,
 } from "../../data/logbook";
 import { fetchPersons } from "../../data/person";
+import { loadTraceContexts, TraceContexts } from "../../data/trace";
 import { fetchUsers } from "../../data/user";
 import "../../layouts/ha-app-layout";
 import { haStyle } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import "./ha-logbook";
-import { isComponentLoaded } from "../../common/config/is_component_loaded";
 
 @customElement("ha-panel-logbook")
 export class HaPanelLogbook extends LitElement {
@@ -49,13 +42,13 @@ export class HaPanelLogbook extends LitElement {
 
   @property({ reflect: true, type: Boolean }) rtl = false;
 
-  @internalProperty() private _ranges?: DateRangePickerRanges;
+  @state() private _ranges?: DateRangePickerRanges;
 
   private _fetchUserDone?: Promise<unknown>;
 
-  @internalProperty() private _userIdToName = {};
+  @state() private _userIdToName = {};
 
-  @internalProperty() private _traceContexts: TraceContexts = {};
+  @state() private _traceContexts: TraceContexts = {};
 
   public constructor() {
     super();
diff --git a/src/panels/lovelace/badges/hui-entity-filter-badge.ts b/src/panels/lovelace/badges/hui-entity-filter-badge.ts
index 71ec50e8fc..a45799695a 100644
--- a/src/panels/lovelace/badges/hui-entity-filter-badge.ts
+++ b/src/panels/lovelace/badges/hui-entity-filter-badge.ts
@@ -1,9 +1,5 @@
-import {
-  internalProperty,
-  property,
-  PropertyValues,
-  UpdatingElement,
-} from "lit-element";
+import { PropertyValues, ReactiveElement } from "lit";
+import { property, state } from "lit/decorators";
 import { HomeAssistant } from "../../../types";
 import { evaluateFilter } from "../common/evaluate-filter";
 import { processConfigEntities } from "../common/process-config-entities";
@@ -12,10 +8,10 @@ import { EntityFilterEntityConfig } from "../entity-rows/types";
 import { LovelaceBadge } from "../types";
 import { EntityFilterBadgeConfig } from "./types";
 
-class EntityFilterBadge extends UpdatingElement implements LovelaceBadge {
+class EntityFilterBadge extends ReactiveElement implements LovelaceBadge {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _config?: EntityFilterBadgeConfig;
+  @state() private _config?: EntityFilterBadgeConfig;
 
   private _elements?: LovelaceBadge[];
 
@@ -50,6 +46,10 @@ class EntityFilterBadge extends UpdatingElement implements LovelaceBadge {
     this._config = config;
   }
 
+  protected createRenderRoot() {
+    return this;
+  }
+
   protected shouldUpdate(changedProperties: PropertyValues): boolean {
     if (
       changedProperties.has("_config") ||
diff --git a/src/panels/lovelace/badges/hui-error-badge.ts b/src/panels/lovelace/badges/hui-error-badge.ts
index abb18344ab..f15a5b0490 100644
--- a/src/panels/lovelace/badges/hui-error-badge.ts
+++ b/src/panels/lovelace/badges/hui-error-badge.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 "../../../components/ha-label-badge";
 import { HomeAssistant } from "../../../types";
 import { LovelaceBadge } from "../types";
@@ -27,7 +20,7 @@ export const createErrorBadgeConfig = (error) => ({
 export class HuiErrorBadge extends LitElement implements LovelaceBadge {
   public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: ErrorBadgeConfig;
+  @state() private _config?: ErrorBadgeConfig;
 
   public setConfig(config: ErrorBadgeConfig): void {
     this._config = config;
@@ -47,7 +40,7 @@ export class HuiErrorBadge extends LitElement implements LovelaceBadge {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         --ha-label-badge-color: var(--label-badge-red, #fce588);
diff --git a/src/panels/lovelace/badges/hui-state-label-badge.ts b/src/panels/lovelace/badges/hui-state-label-badge.ts
index c95258ba0c..9ccceba1e8 100644
--- a/src/panels/lovelace/badges/hui-state-label-badge.ts
+++ b/src/panels/lovelace/badges/hui-state-label-badge.ts
@@ -1,13 +1,6 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import "../../../components/entity/ha-state-label-badge";
 import { ActionHandlerEvent } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
@@ -59,7 +52,7 @@ export class HuiStateLabelBadge extends LitElement implements LovelaceBadge {
     handleAction(this, this.hass!, this._config!, ev.detail.action!);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-state-label-badge:focus {
         outline: none;
diff --git a/src/panels/lovelace/cards/hui-alarm-panel-card.ts b/src/panels/lovelace/cards/hui-alarm-panel-card.ts
index d78203fe15..8b29c7f8a6 100644
--- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts
+++ b/src/panels/lovelace/cards/hui-alarm-panel-card.ts
@@ -2,17 +2,14 @@ import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+} from "lit";
+import { customElement, property, state, query } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-card";
@@ -70,7 +67,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: AlarmPanelCardConfig;
+  @state() private _config?: AlarmPanelCardConfig;
 
   @query("#alarmCode") private _input?: PaperInputElement;
 
@@ -173,13 +170,13 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
             ? this._config.states!
             : ["disarm"]
           ).map(
-            (state) => html`
+            (stateAction) => html`
               <mwc-button
-                .action="${state}"
+                .action="${stateAction}"
                 @click="${this._handleActionClick}"
                 outlined
               >
-                ${this._actionDisplay(state)}
+                ${this._actionDisplay(stateAction)}
               </mwc-button>
             `
           )}
@@ -226,22 +223,22 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  private _stateIconLabel(state: string): string {
-    const stateLabel = state.split("_").pop();
+  private _stateIconLabel(entityState: string): string {
+    const stateLabel = entityState.split("_").pop();
     return stateLabel === "disarmed" ||
       stateLabel === "triggered" ||
       !stateLabel
       ? ""
-      : this._stateDisplay(state);
+      : this._stateDisplay(entityState);
   }
 
-  private _actionDisplay(state: string): string {
-    return this.hass!.localize(`ui.card.alarm_control_panel.${state}`);
+  private _actionDisplay(entityState: string): string {
+    return this.hass!.localize(`ui.card.alarm_control_panel.${entityState}`);
   }
 
-  private _stateDisplay(state: string): string {
+  private _stateDisplay(entityState: string): string {
     return this.hass!.localize(
-      `component.alarm_control_panel.state._.${state}`
+      `component.alarm_control_panel.state._.${entityState}`
     );
   }
 
@@ -269,7 +266,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-card {
         padding-bottom: 16px;
diff --git a/src/panels/lovelace/cards/hui-button-card.ts b/src/panels/lovelace/cards/hui-button-card.ts
index f8ed4453a7..931147d268 100644
--- a/src/panels/lovelace/cards/hui-button-card.ts
+++ b/src/panels/lovelace/cards/hui-button-card.ts
@@ -4,19 +4,21 @@ import { RippleHandlers } from "@material/mwc-ripple/ripple-handlers";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import {
   customElement,
   eventOptions,
-  html,
-  internalProperty,
-  LitElement,
   property,
-  PropertyValues,
   queryAsync,
-  TemplateResult,
-} from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
-import { styleMap } from "lit-html/directives/style-map";
+  state,
+} from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
+import { styleMap } from "lit/directives/style-map";
 import { DOMAINS_TOGGLE } from "../../../common/const";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { computeActiveState } from "../../../common/entity/compute_active_state";
@@ -71,11 +73,11 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: ButtonCardConfig;
+  @state() private _config?: ButtonCardConfig;
 
   @queryAsync("mwc-ripple") private _ripple!: Promise<Ripple | null>;
 
-  @internalProperty() private _shouldRenderRipple = false;
+  @state() private _shouldRenderRipple = false;
 
   public getCardSize(): number {
     return (
@@ -247,7 +249,7 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
     this._rippleHandlers.endFocus();
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-card {
         cursor: pointer;
diff --git a/src/panels/lovelace/cards/hui-calendar-card.ts b/src/panels/lovelace/cards/hui-calendar-card.ts
index ae3280920f..13b5bcc8b3 100644
--- a/src/panels/lovelace/cards/hui-calendar-card.ts
+++ b/src/panels/lovelace/cards/hui-calendar-card.ts
@@ -1,15 +1,12 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state, query } from "lit/decorators";
 import { HA_COLOR_PALETTE } from "../../../common/const";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { HASSDomEvent } from "../../../common/dom/fire_event";
@@ -62,13 +59,13 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public _events: CalendarEvent[] = [];
 
-  @internalProperty() private _config?: CalendarCardConfig;
+  @state() private _config?: CalendarCardConfig;
 
-  @internalProperty() private _calendars: Calendar[] = [];
+  @state() private _calendars: Calendar[] = [];
 
-  @internalProperty() private _narrow = false;
+  @state() private _narrow = false;
 
-  @internalProperty() private _veryNarrow = false;
+  @state() private _veryNarrow = false;
 
   @query("ha-full-calendar", true) private _calendar?: HAFullCalendar;
 
@@ -204,7 +201,7 @@ export class HuiCalendarCard extends LitElement implements LovelaceCard {
     this._resizeObserver.observe(card);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-card {
         position: relative;
diff --git a/src/panels/lovelace/cards/hui-conditional-card.ts b/src/panels/lovelace/cards/hui-conditional-card.ts
index d89e609278..6b0ba014ee 100644
--- a/src/panels/lovelace/cards/hui-conditional-card.ts
+++ b/src/panels/lovelace/cards/hui-conditional-card.ts
@@ -1,4 +1,4 @@
-import { customElement } from "lit-element";
+import { customElement } from "lit/decorators";
 import { LovelaceCardConfig } from "../../../data/lovelace";
 import { computeCardSize } from "../common/compute-card-size";
 import { HuiConditionalBase } from "../components/hui-conditional-base";
diff --git a/src/panels/lovelace/cards/hui-empty-state-card.ts b/src/panels/lovelace/cards/hui-empty-state-card.ts
index dce740668b..333cad59a4 100644
--- a/src/panels/lovelace/cards/hui-empty-state-card.ts
+++ b/src/panels/lovelace/cards/hui-empty-state-card.ts
@@ -1,13 +1,6 @@
 import "@material/mwc-button/mwc-button";
-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 "../../../components/ha-card";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCard } from "../types";
@@ -54,7 +47,7 @@ export class HuiEmptyStateCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .content {
         margin-top: -1em;
diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts
index 09cf5f7574..a74f934beb 100644
--- a/src/panels/lovelace/cards/hui-entities-card.ts
+++ b/src/panels/lovelace/cards/hui-entities-card.ts
@@ -1,13 +1,12 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, state } from "lit/decorators";
 import { DOMAINS_TOGGLE } from "../../../common/const";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -55,7 +54,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
     return { type: "entities", entities: foundEntities };
   }
 
-  @internalProperty() private _config?: EntitiesCardConfig;
+  @state() private _config?: EntitiesCardConfig;
 
   private _hass?: HomeAssistant;
 
@@ -69,18 +68,18 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
 
   set hass(hass: HomeAssistant) {
     this._hass = hass;
-    this.shadowRoot!.querySelectorAll("#states > div > *").forEach(
-      (element: unknown) => {
+    this.shadowRoot
+      ?.querySelectorAll("#states > div > *")
+      .forEach((element: unknown) => {
         (element as LovelaceRow).hass = hass;
-      }
-    );
+      });
     if (this._headerElement) {
       this._headerElement.hass = hass;
     }
     if (this._footerElement) {
       this._footerElement.hass = hass;
     }
-    const entitiesToggle = this.shadowRoot!.querySelector(
+    const entitiesToggle = this.shadowRoot?.querySelector(
       "hui-entities-toggle"
     );
     if (entitiesToggle) {
@@ -223,7 +222,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-card {
         height: 100%;
diff --git a/src/panels/lovelace/cards/hui-entity-button-card.ts b/src/panels/lovelace/cards/hui-entity-button-card.ts
index 0cb0b7eb43..e6b79249ba 100644
--- a/src/panels/lovelace/cards/hui-entity-button-card.ts
+++ b/src/panels/lovelace/cards/hui-entity-button-card.ts
@@ -1,4 +1,4 @@
-import { customElement } from "lit-element";
+import { customElement } from "lit/decorators";
 import { HuiButtonCard } from "./hui-button-card";
 
 @customElement("hui-entity-button-card")
diff --git a/src/panels/lovelace/cards/hui-entity-card.ts b/src/panels/lovelace/cards/hui-entity-card.ts
index 7c8c1b9a36..5c46621b55 100644
--- a/src/panels/lovelace/cards/hui-entity-card.ts
+++ b/src/panels/lovelace/cards/hui-entity-card.ts
@@ -1,14 +1,12 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
@@ -20,6 +18,7 @@ import "../../../components/ha-card";
 import "../../../components/ha-icon";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
+import { formatAttributeValue } from "../../../util/hass-attributes-util";
 import { computeCardSize } from "../common/compute-card-size";
 import { findEntities } from "../common/find-entities";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
@@ -62,7 +61,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: EntityCardConfig;
+  @state() private _config?: EntityCardConfig;
 
   private _footerElement?: HuiErrorCard | LovelaceHeaderFooter;
 
@@ -126,8 +125,12 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
         <div class="info">
           <span class="value"
             >${"attribute" in this._config
-              ? stateObj.attributes[this._config.attribute!] ??
-                this.hass.localize("state.default.unknown")
+              ? stateObj.attributes[this._config.attribute!] !== undefined
+                ? formatAttributeValue(
+                    this.hass,
+                    stateObj.attributes[this._config.attribute!]
+                  )
+                : this.hass.localize("state.default.unknown")
               : stateObj.attributes.unit_of_measurement
               ? formatNumber(stateObj.state, this.hass.locale)
               : computeStateDisplay(
@@ -185,7 +188,7 @@ export class HuiEntityCard extends LitElement implements LovelaceCard {
     fireEvent(this, "hass-more-info", { entityId: this._config!.entity });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-card {
         height: 100%;
diff --git a/src/panels/lovelace/cards/hui-entity-filter-card.ts b/src/panels/lovelace/cards/hui-entity-filter-card.ts
index f6bcdb4307..ed1db86230 100644
--- a/src/panels/lovelace/cards/hui-entity-filter-card.ts
+++ b/src/panels/lovelace/cards/hui-entity-filter-card.ts
@@ -1,9 +1,5 @@
-import {
-  internalProperty,
-  property,
-  PropertyValues,
-  UpdatingElement,
-} from "lit-element";
+import { PropertyValues, ReactiveElement } from "lit";
+import { property, state } from "lit/decorators";
 import { LovelaceCardConfig } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
 import { computeCardSize } from "../common/compute-card-size";
@@ -15,7 +11,7 @@ import { EntityFilterEntityConfig } from "../entity-rows/types";
 import { LovelaceCard } from "../types";
 import { EntityFilterCardConfig } from "./types";
 
-class EntityFilterCard extends UpdatingElement implements LovelaceCard {
+class EntityFilterCard extends ReactiveElement implements LovelaceCard {
   public static getStubConfig(
     hass: HomeAssistant,
     entities: string[],
@@ -46,7 +42,7 @@ class EntityFilterCard extends UpdatingElement implements LovelaceCard {
 
   @property() public editMode = false;
 
-  @internalProperty() private _config?: EntityFilterCardConfig;
+  @state() private _config?: EntityFilterCardConfig;
 
   private _element?: LovelaceCard;
 
@@ -92,6 +88,10 @@ class EntityFilterCard extends UpdatingElement implements LovelaceCard {
     this._element = this._createCardElement(this._baseCardConfig);
   }
 
+  protected createRenderRoot() {
+    return this;
+  }
+
   protected shouldUpdate(changedProps: PropertyValues): boolean {
     if (this._element) {
       this._element.hass = this.hass;
diff --git a/src/panels/lovelace/cards/hui-error-card.ts b/src/panels/lovelace/cards/hui-error-card.ts
index 1e9b0fc779..969ad566c7 100644
--- a/src/panels/lovelace/cards/hui-error-card.ts
+++ b/src/panels/lovelace/cards/hui-error-card.ts
@@ -1,13 +1,6 @@
-import { safeDump } from "js-yaml";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
+import { dump } from "js-yaml";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCard } from "../types";
 import { ErrorCardConfig } from "./types";
@@ -16,7 +9,7 @@ import { ErrorCardConfig } from "./types";
 export class HuiErrorCard extends LitElement implements LovelaceCard {
   public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: ErrorCardConfig;
+  @state() private _config?: ErrorCardConfig;
 
   public getCardSize(): number {
     return 4;
@@ -35,7 +28,7 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
 
     if (this._config.origConfig) {
       try {
-        dumped = safeDump(this._config.origConfig);
+        dumped = dump(this._config.origConfig);
       } catch (err) {
         dumped = `[Error dumping ${this._config.origConfig}]`;
       }
@@ -46,7 +39,7 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;
diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts
index 770706a861..f87a9081e8 100644
--- a/src/panels/lovelace/cards/hui-gauge-card.ts
+++ b/src/panels/lovelace/cards/hui-gauge-card.ts
@@ -1,16 +1,14 @@
 import { HassEntity } from "home-assistant-js-websocket/dist/types";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { styleMap } from "lit-html/directives/style-map";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
@@ -44,7 +42,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     entities: string[],
     entitiesFallback: string[]
   ): GaugeCardConfig {
-    const includeDomains = ["sensor"];
+    const includeDomains = ["counter", "input_number", "number", "sensor"];
     const maxEntities = 1;
     const entityFilter = (stateObj: HassEntity): boolean =>
       !isNaN(Number(stateObj.state));
@@ -63,7 +61,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: GaugeCardConfig;
+  @state() private _config?: GaugeCardConfig;
 
   public getCardSize(): number {
     return 4;
@@ -95,7 +93,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
       `;
     }
 
-    const state = Number(stateObj.state);
+    const entityState = Number(stateObj.state);
 
     if (stateObj.state === UNAVAILABLE) {
       return html`
@@ -109,7 +107,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
       `;
     }
 
-    if (isNaN(state)) {
+    if (isNaN(entityState)) {
       return html`
         <hui-warning
           >${this.hass.localize(
@@ -135,7 +133,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
             .unit_of_measurement ||
           ""}
           style=${styleMap({
-            "--gauge-color": this._computeSeverity(state),
+            "--gauge-color": this._computeSeverity(entityState),
           })}
         ></ha-gauge>
         <div class="name">
@@ -206,7 +204,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     fireEvent(this, "hass-more-info", { entityId: this._config!.entity });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-card {
         cursor: pointer;
diff --git a/src/panels/lovelace/cards/hui-glance-card.ts b/src/panels/lovelace/cards/hui-glance-card.ts
index e59d0dd4ac..87265c6d81 100644
--- a/src/panels/lovelace/cards/hui-glance-card.ts
+++ b/src/panels/lovelace/cards/hui-glance-card.ts
@@ -1,16 +1,14 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { ifDefined } from "lit-html/directives/if-defined";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
 import relativeTime from "../../../common/datetime/relative_time";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -64,7 +62,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: GlanceCardConfig;
+  @state() private _config?: GlanceCardConfig;
 
   private _configEntities?: GlanceConfigEntity[];
 
@@ -184,7 +182,7 @@ export class HuiGlanceCard extends LitElement implements LovelaceCard {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-card {
         height: 100%;
diff --git a/src/panels/lovelace/cards/hui-grid-card.ts b/src/panels/lovelace/cards/hui-grid-card.ts
index b7880b2f6d..504d8e1a0c 100644
--- a/src/panels/lovelace/cards/hui-grid-card.ts
+++ b/src/panels/lovelace/cards/hui-grid-card.ts
@@ -1,8 +1,8 @@
-import { css, CSSResult } from "lit-element";
+import { css, CSSResultGroup } from "lit";
 import { computeCardSize } from "../common/compute-card-size";
+import { LovelaceCardEditor } from "../types";
 import { HuiStackCard } from "./hui-stack-card";
 import { GridCardConfig } from "./types";
-import { LovelaceCardEditor } from "../types";
 
 const DEFAULT_COLUMNS = 3;
 const SQUARE_ROW_HEIGHTS_BY_COLUMNS = {
@@ -64,7 +64,7 @@ class HuiGridCard extends HuiStackCard<GridCardConfig> {
     this.toggleAttribute("square", this.square);
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       super.sharedStyles,
       css`
diff --git a/src/panels/lovelace/cards/hui-history-graph-card.ts b/src/panels/lovelace/cards/hui-history-graph-card.ts
index d034811e07..b17a1ad1e0 100644
--- a/src/panels/lovelace/cards/hui-history-graph-card.ts
+++ b/src/panels/lovelace/cards/hui-history-graph-card.ts
@@ -1,15 +1,13 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { throttle } from "../../../common/util/throttle";
 import "../../../components/ha-card";
 import "../../../components/state-history-charts";
@@ -36,9 +34,9 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _stateHistory?: HistoryResult;
+  @state() private _stateHistory?: HistoryResult;
 
-  @internalProperty() private _config?: HistoryGraphCardConfig;
+  @state() private _config?: HistoryGraphCardConfig;
 
   private _configEntities?: EntityConfig[];
 
@@ -169,7 +167,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-card {
         height: 100%;
diff --git a/src/panels/lovelace/cards/hui-horizontal-stack-card.ts b/src/panels/lovelace/cards/hui-horizontal-stack-card.ts
index efe402d52d..349f5867b7 100644
--- a/src/panels/lovelace/cards/hui-horizontal-stack-card.ts
+++ b/src/panels/lovelace/cards/hui-horizontal-stack-card.ts
@@ -1,4 +1,4 @@
-import { css, CSSResult } from "lit-element";
+import { css, CSSResultGroup } from "lit";
 import { computeCardSize } from "../common/compute-card-size";
 import { HuiStackCard } from "./hui-stack-card";
 
@@ -19,7 +19,7 @@ class HuiHorizontalStackCard extends HuiStackCard {
     return Math.max(...results);
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       super.sharedStyles,
       css`
diff --git a/src/panels/lovelace/cards/hui-humidifier-card.ts b/src/panels/lovelace/cards/hui-humidifier-card.ts
index db983222df..93a327de9b 100644
--- a/src/panels/lovelace/cards/hui-humidifier-card.ts
+++ b/src/panels/lovelace/cards/hui-humidifier-card.ts
@@ -2,16 +2,14 @@ import "@thomasloven/round-slider";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   svg,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
@@ -54,9 +52,9 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: HumidifierCardConfig;
+  @state() private _config?: HumidifierCardConfig;
 
-  @internalProperty() private _setHum?: number;
+  @state() private _setHum?: number;
 
   public getCardSize(): number {
     return 6;
@@ -216,11 +214,27 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
     }
 
     if (!oldHass || oldHass.states[this._config.entity] !== stateObj) {
-      this._setHum = this._getSetHum(stateObj);
       this._rescale_svg();
     }
   }
 
+  public willUpdate(changedProps: PropertyValues) {
+    if (!this.hass || !this._config || !changedProps.has("hass")) {
+      return;
+    }
+
+    const stateObj = this.hass.states[this._config.entity];
+    if (!stateObj) {
+      return;
+    }
+
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+
+    if (!oldHass || oldHass.states[this._config.entity] !== stateObj) {
+      this._setHum = this._getSetHum(stateObj);
+    }
+  }
+
   private _rescale_svg() {
     // Set the viewbox of the SVG containing the set humidity to perfectly
     // fit the text
@@ -268,7 +282,7 @@ export class HuiHumidifierCard extends LitElement implements LovelaceCard {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;
diff --git a/src/panels/lovelace/cards/hui-iframe-card.ts b/src/panels/lovelace/cards/hui-iframe-card.ts
index 30a226848d..6ac89599a3 100644
--- a/src/panels/lovelace/cards/hui-iframe-card.ts
+++ b/src/panels/lovelace/cards/hui-iframe-card.ts
@@ -1,13 +1,6 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { styleMap } from "lit-html/directives/style-map";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
 import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
 import "../../../components/ha-card";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
@@ -84,7 +77,7 @@ export class HuiIframeCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host([ispanel]) ha-card {
         width: 100%;
diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts
index bd493d84fc..0cdca46706 100644
--- a/src/panels/lovelace/cards/hui-light-card.ts
+++ b/src/panels/lovelace/cards/hui-light-card.ts
@@ -2,17 +2,15 @@ import { mdiDotsVertical } from "@mdi/js";
 import "@thomasloven/round-slider";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { styleMap } from "lit-html/directives/style-map";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { styleMap } from "lit/directives/style-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
@@ -60,7 +58,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: LightCardConfig;
+  @state() private _config?: LightCardConfig;
 
   private _brightnessTimout?: number;
 
@@ -254,7 +252,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-card {
         height: 100%;
diff --git a/src/panels/lovelace/cards/hui-logbook-card.ts b/src/panels/lovelace/cards/hui-logbook-card.ts
index 29e7adbee8..5681ce47f6 100644
--- a/src/panels/lovelace/cards/hui-logbook-card.ts
+++ b/src/panels/lovelace/cards/hui-logbook-card.ts
@@ -1,15 +1,13 @@
 import {
   css,
-  CSSResultArray,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { computeStateDomain } from "../../../common/entity/compute_state_domain";
@@ -55,13 +53,13 @@ export class HuiLogbookCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: LogbookCardConfig;
+  @state() private _config?: LogbookCardConfig;
 
-  @internalProperty() private _logbookEntries?: LogbookEntry[];
+  @state() private _logbookEntries?: LogbookEntry[];
 
-  @internalProperty() private _persons = {};
+  @state() private _persons = {};
 
-  @internalProperty() private _configEntities?: EntityConfig[];
+  @state() private _configEntities?: EntityConfig[];
 
   private _lastLogbookDate?: Date;
 
@@ -266,7 +264,7 @@ export class HuiLogbookCard extends LitElement implements LovelaceCard {
     });
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       css`
         ha-card {
@@ -292,7 +290,6 @@ export class HuiLogbookCard extends LitElement implements LovelaceCard {
 
         ha-logbook {
           height: 385px;
-          overflow: auto;
           display: block;
         }
 
diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts
index 9683445600..493ee46823 100644
--- a/src/panels/lovelace/cards/hui-map-card.ts
+++ b/src/panels/lovelace/cards/hui-map-card.ts
@@ -11,15 +11,14 @@ import {
 } from "leaflet";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+} from "lit";
+import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import {
   LeafletModuleType,
   replaceTileLayer,
@@ -653,7 +652,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-card {
         overflow: hidden;
diff --git a/src/panels/lovelace/cards/hui-markdown-card.ts b/src/panels/lovelace/cards/hui-markdown-card.ts
index 8aaedc76a9..242990aa50 100644
--- a/src/panels/lovelace/cards/hui-markdown-card.ts
+++ b/src/panels/lovelace/cards/hui-markdown-card.ts
@@ -1,16 +1,14 @@
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import "../../../components/ha-card";
 import "../../../components/ha-markdown";
@@ -39,11 +37,11 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: MarkdownCardConfig;
+  @state() private _config?: MarkdownCardConfig;
 
-  @internalProperty() private _templateResult?: RenderTemplateResult;
+  @state() private _templateResult?: RenderTemplateResult;
 
-  @internalProperty() private _unsubRenderTemplate?: Promise<UnsubscribeFunc>;
+  @state() private _unsubRenderTemplate?: Promise<UnsubscribeFunc>;
 
   public getCardSize(): number {
     return this._config === undefined
@@ -166,7 +164,7 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-card {
         height: 100%;
diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts
index c1fd6788d9..2acf872f26 100644
--- a/src/panels/lovelace/cards/hui-media-control-card.ts
+++ b/src/panels/lovelace/cards/hui-media-control-card.ts
@@ -4,18 +4,15 @@ import "@polymer/paper-progress/paper-progress";
 import type { PaperProgressElement } from "@polymer/paper-progress/paper-progress";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { styleMap } from "lit-html/directives/style-map";
+} from "lit";
+import { customElement, property, state, query } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { styleMap } from "lit/directives/style-map";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
@@ -75,21 +72,21 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _config?: MediaControlCardConfig;
+  @state() private _config?: MediaControlCardConfig;
 
-  @internalProperty() private _foregroundColor?: string;
+  @state() private _foregroundColor?: string;
 
-  @internalProperty() private _backgroundColor?: string;
+  @state() private _backgroundColor?: string;
 
-  @internalProperty() private _narrow = false;
+  @state() private _narrow = false;
 
-  @internalProperty() private _veryNarrow = false;
+  @state() private _veryNarrow = false;
 
-  @internalProperty() private _cardHeight = 0;
+  @state() private _cardHeight = 0;
 
   @query("paper-progress") private _progressBar?: PaperProgressElement;
 
-  @internalProperty() private _marqueeActive = false;
+  @state() private _marqueeActive = false;
 
   private _progressInterval?: number;
 
@@ -172,17 +169,20 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
       width: `${this._cardHeight}px`,
     };
 
-    const state = stateObj.state;
+    const entityState = stateObj.state;
 
-    const isOffState = state === "off";
+    const isOffState = entityState === "off";
     const isUnavailable =
-      UNAVAILABLE_STATES.includes(state) ||
-      (state === "off" && !supportsFeature(stateObj, SUPPORT_TURN_ON));
+      UNAVAILABLE_STATES.includes(entityState) ||
+      (entityState === "off" && !supportsFeature(stateObj, SUPPORT_TURN_ON));
     const hasNoImage = !this._image;
     const controls = computeMediaControls(stateObj);
     const showControls =
       controls &&
-      (!this._veryNarrow || isOffState || state === "idle" || state === "on");
+      (!this._veryNarrow ||
+        isOffState ||
+        entityState === "idle" ||
+        entityState === "on");
 
     const mediaDescription = computeMediaDescription(stateObj);
 
@@ -325,12 +325,15 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
   }
 
   protected firstUpdated(): void {
-    this._measureCard();
     this._attachObserver();
   }
 
-  protected updated(changedProps: PropertyValues): void {
-    super.updated(changedProps);
+  public willUpdate(changedProps: PropertyValues): void {
+    super.willUpdate(changedProps);
+
+    if (!this.hasUpdated) {
+      this._measureCard();
+    }
 
     if (
       !this._config ||
@@ -352,6 +355,35 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
       return;
     }
 
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+
+    const oldImage =
+      oldHass?.states[this._config.entity]?.attributes.entity_picture_local ||
+      oldHass?.states[this._config.entity]?.attributes.entity_picture;
+
+    if (!this._image) {
+      this._foregroundColor = undefined;
+      this._backgroundColor = undefined;
+      return;
+    }
+
+    if (this._image !== oldImage) {
+      this._setColors();
+    }
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    if (
+      !this._config ||
+      !this.hass ||
+      !this._stateObj ||
+      (!changedProps.has("_config") && !changedProps.has("hass"))
+    ) {
+      return;
+    }
+
+    const stateObj = this._stateObj;
+
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
     const oldConfig = changedProps.get("_config") as
       | MediaControlCardConfig
@@ -384,20 +416,6 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
       clearInterval(this._progressInterval);
       this._progressInterval = undefined;
     }
-
-    const oldImage =
-      oldHass?.states[this._config.entity]?.attributes.entity_picture_local ||
-      oldHass?.states[this._config.entity]?.attributes.entity_picture;
-
-    if (!this._image) {
-      this._foregroundColor = undefined;
-      this._backgroundColor = undefined;
-      return;
-    }
-
-    if (this._image !== oldImage) {
-      this._setColors();
-    }
   }
 
   private get _image() {
@@ -552,7 +570,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-card {
         overflow: hidden;
diff --git a/src/panels/lovelace/cards/hui-picture-card.ts b/src/panels/lovelace/cards/hui-picture-card.ts
index 6da862a137..4983cf736a 100644
--- a/src/panels/lovelace/cards/hui-picture-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-card.ts
@@ -1,15 +1,14 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { ifDefined } from "lit-html/directives/if-defined";
+} from "lit";
+import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import "../../../components/ha-card";
 import { ActionHandlerEvent } from "../../../data/lovelace";
@@ -107,7 +106,7 @@ export class HuiPictureCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-card {
         overflow: hidden;
diff --git a/src/panels/lovelace/cards/hui-picture-elements-card.ts b/src/panels/lovelace/cards/hui-picture-elements-card.ts
index 0905c84f0f..192569b3a9 100644
--- a/src/panels/lovelace/cards/hui-picture-elements-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-elements-card.ts
@@ -1,14 +1,12 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import "../../../components/ha-card";
 import { HomeAssistant } from "../../../types";
@@ -22,7 +20,7 @@ import { PictureElementsCardConfig } from "./types";
 class HuiPictureElementsCard extends LitElement implements LovelaceCard {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _elements?: LovelaceElement[];
+  @state() private _elements?: LovelaceElement[];
 
   public static getStubConfig(
     hass: HomeAssistant,
@@ -54,7 +52,7 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
     };
   }
 
-  @internalProperty() private _config?: PictureElementsCardConfig;
+  @state() private _config?: PictureElementsCardConfig;
 
   public getCardSize(): number {
     return 4;
@@ -138,7 +136,7 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       #root {
         position: relative;
diff --git a/src/panels/lovelace/cards/hui-picture-entity-card.ts b/src/panels/lovelace/cards/hui-picture-entity-card.ts
index 0329de6ba8..2e079a46a9 100644
--- a/src/panels/lovelace/cards/hui-picture-entity-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-entity-card.ts
@@ -1,16 +1,14 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { ifDefined } from "lit-html/directives/if-defined";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
@@ -59,7 +57,7 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: PictureEntityCardConfig;
+  @state() private _config?: PictureEntityCardConfig;
 
   public getCardSize(): number {
     return 3;
@@ -122,7 +120,7 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
     }
 
     const name = this._config.name || computeStateName(stateObj);
-    const state = computeStateDisplay(
+    const entityState = computeStateDisplay(
       this.hass!.localize,
       stateObj,
       this.hass.locale
@@ -133,13 +131,13 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
       footer = html`
         <div class="footer both">
           <div>${name}</div>
-          <div>${state}</div>
+          <div>${entityState}</div>
         </div>
       `;
     } else if (this._config.show_name) {
       footer = html`<div class="footer">${name}</div>`;
     } else if (this._config.show_state) {
-      footer = html`<div class="footer state">${state}</div>`;
+      footer = html`<div class="footer state">${entityState}</div>`;
     }
 
     return html`
@@ -174,7 +172,7 @@ class HuiPictureEntityCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-card {
         min-height: 75px;
diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts
index 20e06a2108..e5c7281edd 100644
--- a/src/panels/lovelace/cards/hui-picture-glance-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts
@@ -1,16 +1,14 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { ifDefined } from "lit-html/directives/if-defined";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
 import { DOMAINS_TOGGLE } from "../../../common/const";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -66,7 +64,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: PictureGlanceCardConfig;
+  @state() private _config?: PictureGlanceCardConfig;
 
   private _entitiesDialog?: PictureGlanceEntityConfig[];
 
@@ -287,7 +285,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
     handleAction(this, this.hass!, config, ev.detail.action!);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-card {
         position: relative;
diff --git a/src/panels/lovelace/cards/hui-plant-status-card.ts b/src/panels/lovelace/cards/hui-plant-status-card.ts
index 9019fcd8b7..173ee823c7 100644
--- a/src/panels/lovelace/cards/hui-plant-status-card.ts
+++ b/src/panels/lovelace/cards/hui-plant-status-card.ts
@@ -1,15 +1,13 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
@@ -58,7 +56,7 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: PlantStatusCardConfig;
+  @state() private _config?: PlantStatusCardConfig;
 
   public getCardSize(): number {
     return 3;
@@ -159,7 +157,7 @@ class HuiPlantStatusCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-card {
         height: 100%;
diff --git a/src/panels/lovelace/cards/hui-safe-mode-card.ts b/src/panels/lovelace/cards/hui-safe-mode-card.ts
index ccf58d78ae..d9269fce02 100644
--- a/src/panels/lovelace/cards/hui-safe-mode-card.ts
+++ b/src/panels/lovelace/cards/hui-safe-mode-card.ts
@@ -1,13 +1,6 @@
 import "@material/mwc-button";
-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 "../../../components/ha-card";
 import { HomeAssistant } from "../../../types";
 import "../../config/logs/error-log-card";
@@ -42,7 +35,7 @@ export class HuiSafeModeCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-card {
         --ha-card-header-color: var(--primary-color);
diff --git a/src/panels/lovelace/cards/hui-sensor-card.ts b/src/panels/lovelace/cards/hui-sensor-card.ts
index 0dc038770e..b7a44a421c 100644
--- a/src/panels/lovelace/cards/hui-sensor-card.ts
+++ b/src/panels/lovelace/cards/hui-sensor-card.ts
@@ -1,5 +1,6 @@
 import { HassEntity } from "home-assistant-js-websocket/dist/types";
-import { customElement } from "lit-element";
+import { computeDomain } from "../../../common/entity/compute_domain";
+import { customElement } from "lit/decorators";
 import { HomeAssistant } from "../../../types";
 import { findEntities } from "../common/find-entities";
 import { GraphHeaderFooterConfig } from "../header-footer/types";
@@ -7,6 +8,8 @@ import { LovelaceCardEditor } from "../types";
 import { HuiEntityCard } from "./hui-entity-card";
 import { EntityCardConfig, SensorCardConfig } from "./types";
 
+const includeDomains = ["counter", "input_number", "number", "sensor"];
+
 @customElement("hui-sensor-card")
 class HuiSensorCard extends HuiEntityCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
@@ -19,7 +22,6 @@ class HuiSensorCard extends HuiEntityCard {
     entities: string[],
     entitiesFallback: string[]
   ): SensorCardConfig {
-    const includeDomains = ["sensor"];
     const maxEntities = 1;
     const entityFilter = (stateObj: HassEntity): boolean =>
       !isNaN(Number(stateObj.state)) &&
@@ -38,7 +40,10 @@ class HuiSensorCard extends HuiEntityCard {
   }
 
   public setConfig(config: SensorCardConfig): void {
-    if (!config.entity || config.entity.split(".")[0] !== "sensor") {
+    if (
+      !config.entity ||
+      !includeDomains.includes(computeDomain(config.entity))
+    ) {
       throw new Error("Specify an entity from within the sensor domain");
     }
 
@@ -55,6 +60,7 @@ class HuiSensorCard extends HuiEntityCard {
         entity: config.entity,
         detail: detail || 1,
         hours_to_show: hours_to_show || 24,
+        limits: config.limits!,
       };
 
       entityCardConfig.footer = footerConfig;
diff --git a/src/panels/lovelace/cards/hui-shopping-list-card.ts b/src/panels/lovelace/cards/hui-shopping-list-card.ts
index ea0af2a6d1..c247a96070 100644
--- a/src/panels/lovelace/cards/hui-shopping-list-card.ts
+++ b/src/panels/lovelace/cards/hui-shopping-list-card.ts
@@ -4,19 +4,16 @@ import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { guard } from "lit-html/directives/guard";
-import { repeat } from "lit-html/directives/repeat";
+} from "lit";
+import { customElement, property, state, query } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { guard } from "lit/directives/guard";
+import { repeat } from "lit/directives/repeat";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import "../../../components/ha-card";
 import "../../../components/ha-icon";
@@ -50,15 +47,15 @@ class HuiShoppingListCard
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: ShoppingListCardConfig;
+  @state() private _config?: ShoppingListCardConfig;
 
-  @internalProperty() private _uncheckedItems?: ShoppingListItem[];
+  @state() private _uncheckedItems?: ShoppingListItem[];
 
-  @internalProperty() private _checkedItems?: ShoppingListItem[];
+  @state() private _checkedItems?: ShoppingListItem[];
 
-  @internalProperty() private _reordering = false;
+  @state() private _reordering = false;
 
-  @internalProperty() private _renderEmptySortable = false;
+  @state() private _renderEmptySortable = false;
 
   private _sortable?;
 
@@ -348,7 +345,7 @@ class HuiShoppingListCard
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-card {
         padding: 16px;
diff --git a/src/panels/lovelace/cards/hui-stack-card.ts b/src/panels/lovelace/cards/hui-stack-card.ts
index 2262eea996..615581ef63 100644
--- a/src/panels/lovelace/cards/hui-stack-card.ts
+++ b/src/panels/lovelace/cards/hui-stack-card.ts
@@ -1,13 +1,12 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { property, state } from "lit/decorators";
 import { LovelaceCardConfig } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
 import { createCardElement } from "../create-element/create-card-element";
@@ -32,7 +31,7 @@ export abstract class HuiStackCard<T extends StackCardConfig = StackCardConfig>
 
   @property() protected _cards?: LovelaceCard[];
 
-  @internalProperty() protected _config?: T;
+  @state() protected _config?: T;
 
   public getCardSize(): number | Promise<number> {
     return 1;
@@ -81,7 +80,7 @@ export abstract class HuiStackCard<T extends StackCardConfig = StackCardConfig>
     `;
   }
 
-  static get sharedStyles(): CSSResult {
+  static get sharedStyles(): CSSResultGroup {
     return css`
       .card-header {
         color: var(--ha-card-header-color, --primary-text-color);
diff --git a/src/panels/lovelace/cards/hui-starting-card.ts b/src/panels/lovelace/cards/hui-starting-card.ts
index d7f90b2b2f..09bdd24079 100644
--- a/src/panels/lovelace/cards/hui-starting-card.ts
+++ b/src/panels/lovelace/cards/hui-starting-card.ts
@@ -2,14 +2,13 @@ import "@material/mwc-button/mwc-button";
 import { STATE_NOT_RUNNING } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-card";
 import "../../../components/ha-circular-progress";
@@ -53,7 +52,7 @@ export class HuiStartingCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;
diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index 50012c5573..1d50d04180 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -3,18 +3,15 @@ import "@thomasloven/round-slider";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
-  query,
   svg,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+} from "lit";
+import { customElement, property, state, query } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { UNIT_F } from "../../../common/const";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
@@ -74,9 +71,9 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: ThermostatCardConfig;
+  @state() private _config?: ThermostatCardConfig;
 
-  @internalProperty() private _setTemp?: number | number[];
+  @state() private _setTemp?: number | number[];
 
   @query("ha-card") private _card?: HaCard;
 
@@ -303,11 +300,27 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
     }
 
     if (!oldHass || oldHass.states[this._config.entity] !== stateObj) {
-      this._setTemp = this._getSetTemp(stateObj);
       this._rescale_svg();
     }
   }
 
+  public willUpdate(changedProps: PropertyValues) {
+    if (!this.hass || !this._config || !changedProps.has("hass")) {
+      return;
+    }
+
+    const stateObj = this.hass.states[this._config.entity];
+    if (!stateObj) {
+      return;
+    }
+
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+
+    if (!oldHass || oldHass.states[this._config.entity] !== stateObj) {
+      this._setTemp = this._getSetTemp(stateObj);
+    }
+  }
+
   private _rescale_svg() {
     // Set the viewbox of the SVG containing the set temperature to perfectly
     // fit the text
@@ -421,7 +434,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;
diff --git a/src/panels/lovelace/cards/hui-vertical-stack-card.ts b/src/panels/lovelace/cards/hui-vertical-stack-card.ts
index dfb01c4a84..e4915feea8 100644
--- a/src/panels/lovelace/cards/hui-vertical-stack-card.ts
+++ b/src/panels/lovelace/cards/hui-vertical-stack-card.ts
@@ -1,4 +1,4 @@
-import { css, CSSResult } from "lit-element";
+import { css, CSSResultGroup } from "lit";
 import { computeCardSize } from "../common/compute-card-size";
 import { HuiStackCard } from "./hui-stack-card";
 
@@ -19,7 +19,7 @@ class HuiVerticalStackCard extends HuiStackCard {
     return results.reduce((partial_sum, a) => partial_sum + a, 0);
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       super.sharedStyles,
       css`
diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
index af35cb18e3..0a00fa51e8 100644
--- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts
+++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
@@ -1,20 +1,13 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
-
-import type { HomeAssistant } from "../../../types";
-import type { LovelaceCard, LovelaceCardEditor } from "../types";
-import type { WeatherForecastCardConfig } from "./types";
-
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { formatTime } from "../../../common/datetime/format_time";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
@@ -23,6 +16,8 @@ import { stateIcon } from "../../../common/entity/state_icon";
 import { isValidEntityId } from "../../../common/entity/valid_entity_id";
 import { formatNumber } from "../../../common/string/format_number";
 import { debounce } from "../../../common/util/debounce";
+import "../../../components/ha-card";
+import "../../../components/ha-icon";
 import { UNAVAILABLE } from "../../../data/entity";
 import { ActionHandlerEvent } from "../../../data/lovelace";
 import {
@@ -34,6 +29,7 @@ import {
   WeatherEntity,
   weatherSVGStyles,
 } from "../../../data/weather";
+import type { HomeAssistant } from "../../../types";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { findEntities } from "../common/find-entities";
 import { handleAction } from "../common/handle-action";
@@ -41,9 +37,8 @@ import { hasAction } from "../common/has-action";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import { installResizeObserver } from "../common/install-resize-observer";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
-
-import "../../../components/ha-card";
-import "../../../components/ha-icon";
+import type { LovelaceCard, LovelaceCardEditor } from "../types";
+import type { WeatherForecastCardConfig } from "./types";
 
 const DAY_IN_MILLISECONDS = 86400000;
 
@@ -74,7 +69,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: WeatherForecastCardConfig;
+  @state() private _config?: WeatherForecastCardConfig;
 
   @property({ type: Boolean, reflect: true, attribute: "veryverynarrow" })
   private _veryVeryNarrow = false;
@@ -111,8 +106,13 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
     return hasConfigOrEntityChanged(this, changedProps);
   }
 
+  public willUpdate(): void {
+    if (!this.hasUpdated) {
+      this._measureCard();
+    }
+  }
+
   protected firstUpdated(): void {
-    this._measureCard();
     this._attachObserver();
   }
 
@@ -134,7 +134,6 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
       (changedProps.has("_config") && oldConfig!.theme !== this._config.theme)
     ) {
       applyThemesOnElement(this, this.hass.themes, this._config.theme);
-      this.requestUpdate();
     }
   }
 
@@ -390,7 +389,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
     this._veryVeryNarrow = card.offsetWidth < 245;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       weatherSVGStyles,
       css`
diff --git a/src/panels/lovelace/cards/types.ts b/src/panels/lovelace/cards/types.ts
index 6f70d507ce..db5c4063e4 100644
--- a/src/panels/lovelace/cards/types.ts
+++ b/src/panels/lovelace/cards/types.ts
@@ -286,6 +286,10 @@ export interface SensorCardConfig extends LovelaceCardConfig {
   detail?: number;
   theme?: string;
   hours_to_show?: number;
+  limits?: {
+    min?: number;
+    max?: number;
+  };
 }
 
 export interface ShoppingListCardConfig extends LovelaceCardConfig {
diff --git a/src/panels/lovelace/common/directives/action-handler-directive.ts b/src/panels/lovelace/common/directives/action-handler-directive.ts
index 3b0ea378c8..dac0cfd6a0 100644
--- a/src/panels/lovelace/common/directives/action-handler-directive.ts
+++ b/src/panels/lovelace/common/directives/action-handler-directive.ts
@@ -1,6 +1,13 @@
+/* eslint-disable max-classes-per-file */
 import "@material/mwc-ripple";
 import type { Ripple } from "@material/mwc-ripple";
-import { directive, PropertyPart } from "lit-html";
+import { noChange } from "lit";
+import {
+  AttributePart,
+  directive,
+  Directive,
+  DirectiveParameters,
+} from "lit/directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { deepEqual } from "../../../../common/util/deep-equal";
 import {
@@ -15,7 +22,7 @@ const isTouch =
 
 interface ActionHandler extends HTMLElement {
   holdTime: number;
-  bind(element: Element, options): void;
+  bind(element: Element, options?: ActionHandlerOptions): void;
 }
 interface ActionHandlerElement extends HTMLElement {
   actionHandler?: {
@@ -90,7 +97,10 @@ class ActionHandler extends HTMLElement implements ActionHandler {
     });
   }
 
-  public bind(element: ActionHandlerElement, options: ActionHandlerOptions) {
+  public bind(
+    element: ActionHandlerElement,
+    options: ActionHandlerOptions = {}
+  ) {
     if (
       element.actionHandler &&
       deepEqual(options, element.actionHandler.options)
@@ -240,7 +250,7 @@ const getActionHandler = (): ActionHandler => {
 
 export const actionHandlerBind = (
   element: ActionHandlerElement,
-  options: ActionHandlerOptions
+  options?: ActionHandlerOptions
 ) => {
   const actionhandler: ActionHandler = getActionHandler();
   if (!actionhandler) {
@@ -250,7 +260,12 @@ export const actionHandlerBind = (
 };
 
 export const actionHandler = directive(
-  (options: ActionHandlerOptions = {}) => (part: PropertyPart) => {
-    actionHandlerBind(part.committer.element as ActionHandlerElement, options);
+  class extends Directive {
+    update(part: AttributePart, [options]: DirectiveParameters<this>) {
+      actionHandlerBind(part.element as ActionHandlerElement, options);
+      return noChange;
+    }
+
+    render(_options?: ActionHandlerOptions) {}
   }
 );
diff --git a/src/panels/lovelace/common/graph/coordinates.ts b/src/panels/lovelace/common/graph/coordinates.ts
index 0b64d5dffd..7674492c9a 100644
--- a/src/panels/lovelace/common/graph/coordinates.ts
+++ b/src/panels/lovelace/common/graph/coordinates.ts
@@ -57,15 +57,22 @@ export const coordinates = (
   history: any,
   hours: number,
   width: number,
-  detail: number
+  detail: number,
+  limits?: { min?: number; max?: number }
 ): number[][] | undefined => {
   history.forEach((item) => {
     item.state = Number(item.state);
   });
   history = history.filter((item) => !Number.isNaN(item.state));
 
-  const min = Math.min(...history.map((item) => item.state));
-  const max = Math.max(...history.map((item) => item.state));
+  const min =
+    limits?.min !== undefined
+      ? limits.min
+      : Math.min(...history.map((item) => item.state));
+  const max =
+    limits?.max !== undefined
+      ? limits.max
+      : Math.max(...history.map((item) => item.state));
   const now = new Date().getTime();
 
   const reduce = (res, item, point) => {
diff --git a/src/panels/lovelace/common/handle-action.ts b/src/panels/lovelace/common/handle-action.ts
index 3be3790397..7bdbea4f49 100644
--- a/src/panels/lovelace/common/handle-action.ts
+++ b/src/panels/lovelace/common/handle-action.ts
@@ -101,7 +101,7 @@ export const handleAction = async (
     }
     case "navigate":
       if (actionConfig.navigation_path) {
-        navigate(node, actionConfig.navigation_path);
+        navigate(actionConfig.navigation_path);
       } else {
         showToast(node, {
           message: hass.localize(
diff --git a/src/panels/lovelace/common/has-changed.ts b/src/panels/lovelace/common/has-changed.ts
index f054ece6ba..1675f49e20 100644
--- a/src/panels/lovelace/common/has-changed.ts
+++ b/src/panels/lovelace/common/has-changed.ts
@@ -1,4 +1,4 @@
-import { PropertyValues } from "lit-element";
+import { PropertyValues } from "lit";
 import { HomeAssistant } from "../../../types";
 import { processConfigEntities } from "./process-config-entities";
 
diff --git a/src/panels/lovelace/components/hui-action-editor.ts b/src/panels/lovelace/components/hui-action-editor.ts
index d523877435..3bc6853ed2 100644
--- a/src/panels/lovelace/components/hui-action-editor.ts
+++ b/src/panels/lovelace/components/hui-action-editor.ts
@@ -4,17 +4,12 @@ import "@polymer/paper-input/paper-textarea";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox";
-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 { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-help-tooltip";
+import "../../../components/ha-service-control";
 import {
   ActionConfig,
   CallServiceActionConfig,
@@ -24,8 +19,6 @@ import {
 import { ServiceAction } from "../../../data/script";
 import { HomeAssistant } from "../../../types";
 import { EditorTarget } from "../editor/types";
-import "../../../components/ha-service-control";
-import memoizeOne from "memoize-one";
 
 @customElement("hui-action-editor")
 export class HuiActionEditor extends LitElement {
@@ -209,7 +202,7 @@ export class HuiActionEditor extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .dropdown {
         display: flex;
diff --git a/src/panels/lovelace/components/hui-buttons-base.ts b/src/panels/lovelace/components/hui-buttons-base.ts
index 919b5058e8..4c7692adef 100644
--- a/src/panels/lovelace/components/hui-buttons-base.ts
+++ b/src/panels/lovelace/components/hui-buttons-base.ts
@@ -1,16 +1,7 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  queryAll,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, state, property } from "lit/decorators";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import "../../../components/entity/state-badge";
-import type { StateBadge } from "../../../components/entity/state-badge";
 import type { ActionHandlerEvent } from "../../../data/lovelace";
 import type { HomeAssistant } from "../../../types";
 import type { EntitiesCardEntityConfig } from "../cards/types";
@@ -21,27 +12,14 @@ import { hasAction } from "../common/has-action";
 
 @customElement("hui-buttons-base")
 export class HuiButtonsBase extends LitElement {
+  @state() public hass!: HomeAssistant;
+
   @property() public configEntities?: EntitiesCardEntityConfig[];
 
-  @queryAll("state-badge") protected _badges!: StateBadge[];
-
-  private _hass?: HomeAssistant;
-
-  set hass(hass: HomeAssistant) {
-    this._hass = hass;
-    const entitiesShowingIcons = this.configEntities?.filter(
-      (entity) => entity.show_icon !== false
-    );
-    this._badges.forEach((badge, index: number) => {
-      badge.hass = hass;
-      badge.stateObj = hass.states[entitiesShowingIcons![index].entity];
-    });
-  }
-
-  protected render(): TemplateResult | void {
+  protected render(): TemplateResult {
     return html`
       ${(this.configEntities || []).map((entityConf) => {
-        const stateObj = this._hass!.states[entityConf.entity];
+        const stateObj = this.hass.states[entityConf.entity];
 
         return html`
           <div
@@ -56,8 +34,8 @@ export class HuiButtonsBase extends LitElement {
             ${entityConf.show_icon !== false
               ? html`
                   <state-badge
-                    title=${computeTooltip(this._hass!, entityConf)}
-                    .hass=${this._hass}
+                    title=${computeTooltip(this.hass, entityConf)}
+                    .hass=${this.hass}
                     .stateObj=${stateObj}
                     .overrideIcon=${entityConf.icon}
                     .overrideImage=${entityConf.image}
@@ -79,10 +57,10 @@ export class HuiButtonsBase extends LitElement {
 
   private _handleAction(ev: ActionHandlerEvent) {
     const config = (ev.currentTarget as any).config as EntitiesCardEntityConfig;
-    handleAction(this, this._hass!, config, ev.detail.action!);
+    handleAction(this, this.hass, config, ev.detail.action!);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: flex;
diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts
index c627c3b838..541e5202cb 100644
--- a/src/panels/lovelace/components/hui-card-options.ts
+++ b/src/panels/lovelace/components/hui-card-options.ts
@@ -5,15 +5,13 @@ import "@material/mwc-list/mwc-list-item";
 import { mdiArrowDown, mdiArrowUp, mdiDotsVertical } from "@mdi/js";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
-  queryAssignedNodes,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, queryAssignedNodes } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-button-menu";
 import { saveConfig } from "../../../data/lovelace";
@@ -113,7 +111,7 @@ export class HuiCardOptions extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host(:hover) {
         outline: 2px solid var(--primary-color);
diff --git a/src/panels/lovelace/components/hui-conditional-base.ts b/src/panels/lovelace/components/hui-conditional-base.ts
index 46446558df..876707cce0 100644
--- a/src/panels/lovelace/components/hui-conditional-base.ts
+++ b/src/panels/lovelace/components/hui-conditional-base.ts
@@ -1,9 +1,5 @@
-import {
-  customElement,
-  property,
-  PropertyValues,
-  UpdatingElement,
-} from "lit-element";
+import { PropertyValues, ReactiveElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import { HomeAssistant } from "../../../types";
 import { ConditionalCardConfig } from "../cards/types";
 import {
@@ -14,7 +10,7 @@ import { ConditionalRowConfig, LovelaceRow } from "../entity-rows/types";
 import { LovelaceCard } from "../types";
 
 @customElement("hui-conditional-base")
-export class HuiConditionalBase extends UpdatingElement {
+export class HuiConditionalBase extends ReactiveElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property() public editMode?: boolean;
@@ -23,6 +19,10 @@ export class HuiConditionalBase extends UpdatingElement {
 
   protected _element?: LovelaceCard | LovelaceRow;
 
+  protected createRenderRoot() {
+    return this;
+  }
+
   protected validateConfig(
     config: ConditionalCardConfig | ConditionalRowConfig
   ): void {
diff --git a/src/panels/lovelace/components/hui-entities-toggle.ts b/src/panels/lovelace/components/hui-entities-toggle.ts
index b1d56f8626..7e0431b61f 100644
--- a/src/panels/lovelace/components/hui-entities-toggle.ts
+++ b/src/panels/lovelace/components/hui-entities-toggle.ts
@@ -1,14 +1,12 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { DOMAINS_TOGGLE } from "../../../common/const";
 import "../../../components/ha-switch";
 import type { HaSwitch } from "../../../components/ha-switch";
@@ -22,10 +20,10 @@ class HuiEntitiesToggle extends LitElement {
 
   @property({ attribute: false }) protected hass?: HomeAssistant;
 
-  @internalProperty() private _toggleEntities?: string[];
+  @state() private _toggleEntities?: string[];
 
-  public updated(changedProperties: PropertyValues): void {
-    super.updated(changedProperties);
+  public willUpdate(changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties);
     if (changedProperties.has("entities")) {
       this._toggleEntities = this.entities!.filter(
         (entityId) =>
@@ -54,7 +52,7 @@ class HuiEntitiesToggle extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         width: 38px;
@@ -62,7 +60,7 @@ class HuiEntitiesToggle extends LitElement {
       }
       ha-switch {
         padding: 13px 5px;
-        margin: -4px -5px;
+        margin: -4px -8px;
       }
     `;
   }
diff --git a/src/panels/lovelace/components/hui-entity-editor.ts b/src/panels/lovelace/components/hui-entity-editor.ts
index 25df30a13e..0393d59ea9 100644
--- a/src/panels/lovelace/components/hui-entity-editor.ts
+++ b/src/panels/lovelace/components/hui-entity-editor.ts
@@ -1,16 +1,14 @@
 import { mdiDrag } from "@mdi/js";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { guard } from "lit-html/directives/guard";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { guard } from "lit/directives/guard";
 import type { SortableEvent } from "sortablejs";
 import Sortable, {
   AutoScroll,
@@ -32,9 +30,9 @@ export class HuiEntityEditor extends LitElement {
 
   @property() protected label?: string;
 
-  @internalProperty() private _attached = false;
+  @state() private _attached = false;
 
-  @internalProperty() private _renderEmptySortable = false;
+  @state() private _renderEmptySortable = false;
 
   private _sortable?: Sortable;
 
@@ -181,7 +179,7 @@ export class HuiEntityEditor extends LitElement {
     fireEvent(this, "entities-changed", { entities: newConfigEntities });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       sortableStyles,
       css`
diff --git a/src/panels/lovelace/components/hui-generic-entity-row.ts b/src/panels/lovelace/components/hui-generic-entity-row.ts
index 2449ddf277..9c7ca08df3 100644
--- a/src/panels/lovelace/components/hui-generic-entity-row.ts
+++ b/src/panels/lovelace/components/hui-generic-entity-row.ts
@@ -1,14 +1,14 @@
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { ifDefined } from "lit-html/directives/if-defined";
+} from "lit";
+import { property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
 import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const";
 import { toggleAttribute } from "../../../common/dom/toggle_attribute";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -156,7 +156,7 @@ class HuiGenericEntityRow extends LitElement {
     handleAction(this, this.hass!, this.config!, ev.detail.action!);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: flex;
diff --git a/src/panels/lovelace/components/hui-graph-base.ts b/src/panels/lovelace/components/hui-graph-base.ts
index 5aff518758..de0a35e25b 100644
--- a/src/panels/lovelace/components/hui-graph-base.ts
+++ b/src/panels/lovelace/components/hui-graph-base.ts
@@ -1,15 +1,13 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   svg,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { strokeWidth } from "../../../data/graph";
 import { getPath } from "../common/graph/get-path";
 
@@ -17,7 +15,7 @@ import { getPath } from "../common/graph/get-path";
 export class HuiGraphBase extends LitElement {
   @property() public coordinates?: any;
 
-  @internalProperty() private _path?: string;
+  @state() private _path?: string;
 
   protected render(): TemplateResult {
     return html`
@@ -49,7 +47,7 @@ export class HuiGraphBase extends LitElement {
     `;
   }
 
-  protected updated(changedProps: PropertyValues) {
+  public willUpdate(changedProps: PropertyValues) {
     if (!this.coordinates) {
       return;
     }
@@ -59,7 +57,7 @@ export class HuiGraphBase extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: flex;
diff --git a/src/panels/lovelace/components/hui-image.ts b/src/panels/lovelace/components/hui-image.ts
index 9cfe450762..70f15fea22 100644
--- a/src/panels/lovelace/components/hui-image.ts
+++ b/src/panels/lovelace/components/hui-image.ts
@@ -1,17 +1,14 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { styleMap } from "lit-html/directives/style-map";
+} from "lit";
+import { customElement, property, state, query } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { styleMap } from "lit/directives/style-map";
 import { STATES_OFF } from "../../../common/const";
 import parseAspectRatio from "../../../common/util/parse-aspect-ratio";
 import "../../../components/ha-camera-stream";
@@ -50,9 +47,9 @@ export class HuiImage extends LitElement {
 
   @property() public darkModeFilter?: string;
 
-  @internalProperty() private _loadError?: boolean;
+  @state() private _loadError?: boolean;
 
-  @internalProperty() private _cameraImageSrc?: string;
+  @state() private _cameraImageSrc?: string;
 
   @query("img") private _image!: HTMLImageElement;
 
@@ -78,7 +75,7 @@ export class HuiImage extends LitElement {
     }
     const ratio = this.aspectRatio ? parseAspectRatio(this.aspectRatio) : null;
     const stateObj = this.entity ? this.hass.states[this.entity] : undefined;
-    const state = stateObj ? stateObj.state : UNAVAILABLE;
+    const entityState = stateObj ? stateObj.state : UNAVAILABLE;
 
     // Figure out image source to use
     let imageSrc: string | undefined;
@@ -93,7 +90,7 @@ export class HuiImage extends LitElement {
         imageSrc = this._cameraImageSrc;
       }
     } else if (this.stateImage) {
-      const stateImage = this.stateImage[state];
+      const stateImage = this.stateImage[entityState];
 
       if (stateImage) {
         imageSrc = stateImage;
@@ -118,12 +115,12 @@ export class HuiImage extends LitElement {
       filter += this.darkModeFilter;
     }
 
-    if (this.stateFilter && this.stateFilter[state]) {
-      filter += this.stateFilter[state];
+    if (this.stateFilter && this.stateFilter[entityState]) {
+      filter += this.stateFilter[entityState];
     }
 
     if (!filter && this.entity) {
-      const isOff = !stateObj || STATES_OFF.includes(state);
+      const isOff = !stateObj || STATES_OFF.includes(entityState);
       filter = isOff && imageFallback ? DEFAULT_FILTER : "";
     }
 
@@ -237,7 +234,7 @@ export class HuiImage extends LitElement {
     );
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       img {
         display: block;
diff --git a/src/panels/lovelace/components/hui-input-list-editor.ts b/src/panels/lovelace/components/hui-input-list-editor.ts
index 1f56afd279..ae64dea7b7 100644
--- a/src/panels/lovelace/components/hui-input-list-editor.ts
+++ b/src/panels/lovelace/components/hui-input-list-editor.ts
@@ -1,13 +1,6 @@
 import "@polymer/paper-input/paper-input";
-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 { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-icon-button";
 import { HomeAssistant } from "../../../types";
@@ -97,7 +90,7 @@ export class HuiInputListEditor extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-icon-button {
         --mdc-icon-button-size: 24px;
diff --git a/src/panels/lovelace/components/hui-marquee.ts b/src/panels/lovelace/components/hui-marquee.ts
index 29bd5bd0da..b159892d0c 100644
--- a/src/panels/lovelace/components/hui-marquee.ts
+++ b/src/panels/lovelace/components/hui-marquee.ts
@@ -1,13 +1,12 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property } from "lit/decorators";
 
 @customElement("hui-marquee")
 class HuiMarquee extends LitElement {
@@ -66,7 +65,7 @@ class HuiMarquee extends LitElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: flex;
diff --git a/src/panels/lovelace/components/hui-theme-select-editor.ts b/src/panels/lovelace/components/hui-theme-select-editor.ts
index ce5d9200aa..f20b6dd033 100644
--- a/src/panels/lovelace/components/hui-theme-select-editor.ts
+++ b/src/panels/lovelace/components/hui-theme-select-editor.ts
@@ -2,15 +2,8 @@ import "@material/mwc-button";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-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 { fireEvent } from "../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../types";
 
@@ -55,7 +48,7 @@ export class HuiThemeSelectEditor extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       paper-dropdown-menu {
         width: 100%;
diff --git a/src/panels/lovelace/components/hui-timestamp-display.ts b/src/panels/lovelace/components/hui-timestamp-display.ts
index 04663d12ae..086ba6b13d 100644
--- a/src/panels/lovelace/components/hui-timestamp-display.ts
+++ b/src/panels/lovelace/components/hui-timestamp-display.ts
@@ -1,22 +1,15 @@
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { formatDate } from "../../../common/datetime/format_date";
 import { formatDateTime } from "../../../common/datetime/format_date_time";
 import { formatTime } from "../../../common/datetime/format_time";
 import relativeTime from "../../../common/datetime/relative_time";
-import { FrontendTranslationData } from "../../../data/translation";
+import { FrontendLocaleData } from "../../../data/translation";
 import { HomeAssistant } from "../../../types";
 import { TimestampRenderingFormats } from "./types";
 
 const FORMATS: {
-  [key: string]: (ts: Date, lang: FrontendTranslationData) => string;
+  [key: string]: (ts: Date, lang: FrontendLocaleData) => string;
 } = {
   date: formatDate,
   datetime: formatDateTime,
@@ -32,7 +25,7 @@ class HuiTimestampDisplay extends LitElement {
 
   @property() public format?: TimestampRenderingFormats;
 
-  @internalProperty() private _relative?: string;
+  @state() private _relative?: string;
 
   private _connected?: boolean;
 
diff --git a/src/panels/lovelace/components/hui-views-list.ts b/src/panels/lovelace/components/hui-views-list.ts
index 7307369601..a04e3f0cba 100644
--- a/src/panels/lovelace/components/hui-views-list.ts
+++ b/src/panels/lovelace/components/hui-views-list.ts
@@ -1,14 +1,7 @@
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-listbox/paper-listbox";
-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 { fireEvent } from "../../../common/dom/fire_event";
 import { toggleAttribute } from "../../../common/dom/toggle_attribute";
 import "../../../components/ha-icon";
@@ -24,9 +17,9 @@ declare global {
 
 @customElement("hui-views-list")
 class HuiViewsList extends LitElement {
-  @internalProperty() private lovelaceConfig?: LovelaceConfig | undefined;
+  @state() private lovelaceConfig?: LovelaceConfig | undefined;
 
-  @internalProperty() private selected?: number | undefined;
+  @state() private selected?: number | undefined;
 
   protected render(): TemplateResult {
     if (!this.lovelaceConfig) {
@@ -67,7 +60,7 @@ class HuiViewsList extends LitElement {
     fireEvent(this, "view-selected", { view });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       paper-listbox {
         padding-top: 0;
diff --git a/src/panels/lovelace/components/hui-warning-element.ts b/src/panels/lovelace/components/hui-warning-element.ts
index bd3b1ad45e..85a99c0217 100644
--- a/src/panels/lovelace/components/hui-warning-element.ts
+++ b/src/panels/lovelace/components/hui-warning-element.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 "../../../components/ha-icon";
 
 @customElement("hui-warning-element")
@@ -17,7 +10,7 @@ export class HuiWarningElement extends LitElement {
     return html` <ha-icon icon="hass:alert" .title=${this.label}></ha-icon> `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-icon {
         color: #fce588;
diff --git a/src/panels/lovelace/components/hui-warning.ts b/src/panels/lovelace/components/hui-warning.ts
index 96b9dab9ea..183c75497a 100644
--- a/src/panels/lovelace/components/hui-warning.ts
+++ b/src/panels/lovelace/components/hui-warning.ts
@@ -1,12 +1,6 @@
 import { STATE_NOT_RUNNING } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
 import { HomeAssistant } from "../../../types";
 
 export const createEntityNotFoundWarning = (
@@ -27,7 +21,7 @@ export class HuiWarning extends LitElement {
     return html` <slot></slot> `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;
diff --git a/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts b/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
index f2d99f3ad0..08a0b9bd42 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-element-editor.ts
@@ -1,4 +1,4 @@
-import { customElement } from "lit-element";
+import { customElement } from "lit/decorators";
 import type { LovelaceCardConfig } from "../../../../data/lovelace";
 import { getCardElementClass } from "../../create-element/create-card-element";
 import type { LovelaceCardEditor } from "../../types";
diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
index 75c9a95bc5..500dd755cf 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
@@ -3,18 +3,16 @@ import "@material/mwc-tab/mwc-tab";
 import Fuse from "fuse.js";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { styleMap } from "lit-html/directives/style-map";
-import { until } from "lit-html/directives/until";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { styleMap } from "lit/directives/style-map";
+import { until } from "lit/directives/until";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../common/search/search-input";
@@ -50,17 +48,17 @@ interface CardElement {
 export class HuiCardPicker extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _cards: CardElement[] = [];
+  @state() private _cards: CardElement[] = [];
 
   public lovelace?: LovelaceConfig;
 
   public cardPicked?: (cardConf: LovelaceCardConfig) => void;
 
-  @internalProperty() private _filter = "";
+  @state() private _filter = "";
 
-  @internalProperty() private _width?: number;
+  @state() private _width?: number;
 
-  @internalProperty() private _height?: number;
+  @state() private _height?: number;
 
   private _unusedEntities?: string[];
 
@@ -333,7 +331,7 @@ export class HuiCardPicker extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       css`
         search-input {
diff --git a/src/panels/lovelace/editor/card-editor/hui-card-preview.ts b/src/panels/lovelace/editor/card-editor/hui-card-preview.ts
index 9cb7882655..c562d19b4c 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-preview.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-preview.ts
@@ -1,5 +1,6 @@
 import "@polymer/paper-input/paper-textarea";
-import { property, PropertyValues, UpdatingElement } from "lit-element";
+import { PropertyValues, ReactiveElement } from "lit";
+import { property } from "lit/decorators";
 import { computeRTL } from "../../../../common/util/compute_rtl";
 import { LovelaceCardConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
@@ -7,7 +8,7 @@ import { createCardElement } from "../../create-element/create-card-element";
 import { createErrorCardConfig } from "../../create-element/create-element-base";
 import { LovelaceCard } from "../../types";
 
-export class HuiCardPreview extends UpdatingElement {
+export class HuiCardPreview extends ReactiveElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
   @property() public config?: LovelaceCardConfig;
@@ -28,6 +29,10 @@ export class HuiCardPreview extends UpdatingElement {
     });
   }
 
+  protected createRenderRoot() {
+    return this;
+  }
+
   protected update(changedProperties: PropertyValues) {
     super.update(changedProperties);
 
diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts
index a1790a9e95..7ce93089a8 100644
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-create-card.ts
@@ -1,17 +1,9 @@
 import "@material/mwc-tab-bar/mwc-tab-bar";
 import "@material/mwc-tab/mwc-tab";
-import {
-  css,
-  CSSResultArray,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { cache } from "lit-html/directives/cache";
-import { classMap } from "lit-html/directives/class-map";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { cache } from "lit/directives/cache";
+import { classMap } from "lit/directives/class-map";
 import memoize from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeDomain } from "../../../../common/entity/compute_domain";
@@ -45,13 +37,13 @@ export class HuiCreateDialogCard
   implements HassDialog<CreateCardDialogParams> {
   @property({ attribute: false }) protected hass!: HomeAssistant;
 
-  @internalProperty() private _params?: CreateCardDialogParams;
+  @state() private _params?: CreateCardDialogParams;
 
-  @internalProperty() private _viewConfig!: LovelaceViewConfig;
+  @state() private _viewConfig!: LovelaceViewConfig;
 
-  @internalProperty() private _selectedEntities: string[] = [];
+  @state() private _selectedEntities: string[] = [];
 
-  @internalProperty() private _currTabIndex = 0;
+  @state() private _currTabIndex = 0;
 
   public async showDialog(params: CreateCardDialogParams): Promise<void> {
     this._params = params;
@@ -151,7 +143,7 @@ export class HuiCreateDialogCard
     ev.stopPropagation();
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-delete-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-delete-card.ts
index 28f006e32d..6e8507794e 100644
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-delete-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-delete-card.ts
@@ -1,16 +1,7 @@
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import deepFreeze from "deep-freeze";
-import {
-  css,
-  CSSResultArray,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state, query } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/dialog/ha-paper-dialog";
 import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
@@ -24,9 +15,9 @@ import type { DeleteCardDialogParams } from "./show-delete-card-dialog";
 export class HuiDialogDeleteCard extends LitElement {
   @property() protected hass!: HomeAssistant;
 
-  @internalProperty() private _params?: DeleteCardDialogParams;
+  @state() private _params?: DeleteCardDialogParams;
 
-  @internalProperty() private _cardConfig?: LovelaceCardConfig;
+  @state() private _cardConfig?: LovelaceCardConfig;
 
   @query("ha-paper-dialog", true) private _dialog!: HaPaperDialog;
 
@@ -72,7 +63,7 @@ export class HuiDialogDeleteCard extends LitElement {
     `;
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
index 83da1e44ae..f8609c40c5 100755
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
@@ -2,16 +2,13 @@ import { mdiHelpCircle } from "@mdi/js";
 import deepFreeze from "deep-freeze";
 import {
   css,
-  CSSResultArray,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state, query } from "lit/decorators";
 import type { HASSDomEvent } from "../../../../common/dom/fire_event";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
@@ -55,26 +52,26 @@ export class HuiDialogEditCard
 
   @property({ type: Boolean, reflect: true }) public large = false;
 
-  @internalProperty() private _params?: EditCardDialogParams;
+  @state() private _params?: EditCardDialogParams;
 
-  @internalProperty() private _cardConfig?: LovelaceCardConfig;
+  @state() private _cardConfig?: LovelaceCardConfig;
 
-  @internalProperty() private _viewConfig!: LovelaceViewConfig;
+  @state() private _viewConfig!: LovelaceViewConfig;
 
-  @internalProperty() private _saving = false;
+  @state() private _saving = false;
 
-  @internalProperty() private _error?: string;
+  @state() private _error?: string;
 
-  @internalProperty() private _guiModeAvailable? = true;
+  @state() private _guiModeAvailable? = true;
 
   @query("hui-card-element-editor")
   private _cardEditorEl?: HuiCardElementEditor;
 
-  @internalProperty() private _GUImode = true;
+  @state() private _GUImode = true;
 
-  @internalProperty() private _documentationURL?: string;
+  @state() private _documentationURL?: string;
 
-  @internalProperty() private _dirty = false;
+  @state() private _dirty = false;
 
   public async showDialog(params: EditCardDialogParams): Promise<void> {
     this._params = params;
@@ -353,7 +350,7 @@ export class HuiDialogEditCard
     this.closeDialog();
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts
index a8e2d4bfc4..a005040f11 100755
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts
@@ -1,16 +1,7 @@
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import deepFreeze from "deep-freeze";
-import {
-  css,
-  CSSResultArray,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state, query } from "lit/decorators";
 import "../../../../components/dialog/ha-paper-dialog";
 import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
@@ -28,11 +19,11 @@ import { SuggestCardDialogParams } from "./show-suggest-card-dialog";
 export class HuiDialogSuggestCard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _params?: SuggestCardDialogParams;
+  @state() private _params?: SuggestCardDialogParams;
 
-  @internalProperty() private _cardConfig?: LovelaceCardConfig[];
+  @state() private _cardConfig?: LovelaceCardConfig[];
 
-  @internalProperty() private _saving = false;
+  @state() private _saving = false;
 
   @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
 
@@ -123,7 +114,7 @@ export class HuiDialogSuggestCard extends LitElement {
     `;
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/lovelace/editor/card-editor/hui-entity-picker-table.ts b/src/panels/lovelace/editor/card-editor/hui-entity-picker-table.ts
index e38c05a6d0..ec4154078a 100644
--- a/src/panels/lovelace/editor/card-editor/hui-entity-picker-table.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-entity-picker-table.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 memoizeOne from "memoize-one";
 import type { HASSDomEvent } from "../../../../common/dom/fire_event";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -136,7 +129,7 @@ export class HuiEntityPickerTable extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-data-table {
         --data-table-border-width: 0;
diff --git a/src/panels/lovelace/editor/config-elements/config-elements-style.ts b/src/panels/lovelace/editor/config-elements/config-elements-style.ts
index 4a1c4bf12b..80561f7ff8 100644
--- a/src/panels/lovelace/editor/config-elements/config-elements-style.ts
+++ b/src/panels/lovelace/editor/config-elements/config-elements-style.ts
@@ -1,4 +1,4 @@
-import { css } from "lit-element";
+import { css } from "lit";
 
 export const configElementStyle = css`
   ha-switch {
diff --git a/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts
index 895d668ac5..c63083dd1a 100644
--- a/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts
@@ -1,16 +1,8 @@
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-import {
-  css,
-  CSSResultArray,
-  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 { array, assert, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
@@ -38,7 +30,7 @@ export class HuiAlarmPanelCardEditor
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: AlarmPanelCardConfig;
+  @state() private _config?: AlarmPanelCardConfig;
 
   public setConfig(config: AlarmPanelCardConfig): void {
     assert(config, cardConfigStruct);
@@ -94,9 +86,9 @@ export class HuiAlarmPanelCardEditor
           @value-changed="${this._valueChanged}"
         ></paper-input>
         <span>Used States</span> ${this._states.map(
-          (state, index) => html`
+          (entityState, index) => html`
             <div class="states">
-              <paper-item>${state}</paper-item>
+              <paper-item>${entityState}</paper-item>
               <ha-icon
                 class="deleteState"
                 .value="${index}"
@@ -113,7 +105,9 @@ export class HuiAlarmPanelCardEditor
           @value-changed="${this._stateAdded}"
         >
           <paper-listbox slot="dropdown-content">
-            ${states.map((state) => html` <paper-item>${state}</paper-item> `)}
+            ${states.map(
+              (entityState) => html` <paper-item>${entityState}</paper-item> `
+            )}
           </paper-listbox>
         </paper-dropdown-menu>
         <hui-theme-select-editor
@@ -126,7 +120,7 @@ export class HuiAlarmPanelCardEditor
     `;
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       configElementStyle,
       css`
diff --git a/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
index 7d57a1d477..9a38ec0820 100644
--- a/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
@@ -1,13 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import {
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { assert, boolean, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stateIcon } from "../../../../common/entity/state_icon";
@@ -54,7 +47,7 @@ export class HuiButtonCardEditor
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: ButtonCardConfig;
+  @state() private _config?: ButtonCardConfig;
 
   public setConfig(config: ButtonCardConfig): void {
     assert(config, cardConfigStruct);
@@ -295,7 +288,7 @@ export class HuiButtonCardEditor
     fireEvent(this, "config-changed", { config: newConfig });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return configElementStyle;
   }
 }
diff --git a/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts
index 76a837a651..adaa2233e2 100644
--- a/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts
@@ -1,12 +1,5 @@
-import {
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import {
   array,
   assert,
@@ -44,7 +37,7 @@ export class HuiCalendarCardEditor
 
   @property({ attribute: false }) private _config?: CalendarCardConfig;
 
-  @internalProperty() private _configEntities?: string[];
+  @state() private _configEntities?: string[];
 
   public setConfig(config: CalendarCardConfig): void {
     assert(config, cardConfigStruct);
@@ -176,7 +169,7 @@ export class HuiCalendarCardEditor
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return configElementStyle;
   }
 }
diff --git a/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts
index 8a658210c8..86ce3316eb 100644
--- a/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-conditional-card-editor.ts
@@ -1,17 +1,8 @@
 import "@material/mwc-tab-bar/mwc-tab-bar";
 import "@material/mwc-tab/mwc-tab";
 import type { MDCTabBarActivatedEvent } from "@material/tab-bar";
-import {
-  css,
-  CSSResultArray,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state, query } from "lit/decorators";
 import { any, array, assert, object, optional, string } from "superstruct";
 import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
@@ -46,13 +37,13 @@ export class HuiConditionalCardEditor
 
   @property({ attribute: false }) public lovelace?: LovelaceConfig;
 
-  @internalProperty() private _config?: ConditionalCardConfig;
+  @state() private _config?: ConditionalCardConfig;
 
-  @internalProperty() private _GUImode = true;
+  @state() private _GUImode = true;
 
-  @internalProperty() private _guiModeAvailable? = true;
+  @state() private _guiModeAvailable? = true;
 
-  @internalProperty() private _cardTab = false;
+  @state() private _cardTab = false;
 
   @query("hui-card-element-editor")
   private _cardEditorEl?: HuiCardElementEditor;
@@ -299,7 +290,7 @@ export class HuiConditionalCardEditor
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       configElementStyle,
       css`
diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
index f85a1e4530..5cac06cda6 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
@@ -2,16 +2,8 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-import {
-  css,
-  CSSResultArray,
-  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 {
   array,
   assert,
@@ -22,6 +14,7 @@ import {
   union,
 } from "superstruct";
 import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import { entityId } from "../../../../common/structs/is-entity-id";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/entity/state-badge";
 import "../../../../components/ha-card";
@@ -49,7 +42,9 @@ import { configElementStyle } from "./config-elements-style";
 const cardConfigStruct = object({
   type: string(),
   title: optional(union([string(), boolean()])),
+  entity: optional(entityId()),
   theme: optional(string()),
+  icon: optional(string()),
   show_header_toggle: optional(boolean()),
   state_color: optional(boolean()),
   entities: array(entitiesConfigStruct),
@@ -63,11 +58,11 @@ export class HuiEntitiesCardEditor
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: EntitiesCardConfig;
+  @state() private _config?: EntitiesCardConfig;
 
-  @internalProperty() private _configEntities?: LovelaceRowConfig[];
+  @state() private _configEntities?: LovelaceRowConfig[];
 
-  @internalProperty() private _subElementEditorConfig?: SubElementEditorConfig;
+  @state() private _subElementEditorConfig?: SubElementEditorConfig;
 
   public setConfig(config: EntitiesCardConfig): void {
     assert(config, cardConfigStruct);
@@ -268,7 +263,7 @@ export class HuiEntitiesCardEditor
     this._subElementEditorConfig = undefined;
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       configElementStyle,
       css`
diff --git a/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts
index 1d3efe38a2..275f460f6b 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts
@@ -1,13 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import {
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { assert, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stateIcon } from "../../../../common/entity/state_icon";
@@ -40,7 +33,7 @@ export class HuiEntityCardEditor
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: EntityCardConfig;
+  @state() private _config?: EntityCardConfig;
 
   public setConfig(config: EntityCardConfig): void {
     assert(config, cardConfigStruct);
@@ -188,7 +181,7 @@ export class HuiEntityCardEditor
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return configElementStyle;
   }
 }
diff --git a/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts
index 09c096b466..680640c636 100644
--- a/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts
@@ -1,14 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import {
-  css,
-  CSSResultArray,
-  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 { assert, number, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
@@ -33,7 +25,7 @@ const cardConfigStruct = object({
   theme: optional(string()),
 });
 
-const includeDomains = ["sensor"];
+const includeDomains = ["counter", "input_number", "number", "sensor"];
 
 @customElement("hui-gauge-card-editor")
 export class HuiGaugeCardEditor
@@ -41,7 +33,7 @@ export class HuiGaugeCardEditor
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: GaugeCardConfig;
+  @state() private _config?: GaugeCardConfig;
 
   public setConfig(config: GaugeCardConfig): void {
     assert(config, cardConfigStruct);
@@ -197,7 +189,7 @@ export class HuiGaugeCardEditor
     `;
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       configElementStyle,
       css`
diff --git a/src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts b/src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts
index cdae684b95..232112c6b4 100644
--- a/src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts
@@ -1,13 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import {
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { assert } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeDomain } from "../../../../common/entity/compute_domain";
@@ -44,7 +37,7 @@ export class HuiGenericEntityRowEditor
   implements LovelaceRowEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: EntitiesCardEntityConfig;
+  @state() private _config?: EntitiesCardEntityConfig;
 
   public setConfig(config: EntitiesCardEntityConfig): void {
     assert(config, entitiesConfigStruct);
@@ -163,7 +156,7 @@ export class HuiGenericEntityRowEditor
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return configElementStyle;
   }
 }
diff --git a/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
index eb65442a19..651a767c0a 100644
--- a/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
@@ -1,15 +1,8 @@
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-import {
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import {
   array,
   assert,
@@ -58,9 +51,9 @@ export class HuiGlanceCardEditor
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: GlanceCardConfig;
+  @state() private _config?: GlanceCardConfig;
 
-  @internalProperty() private _configEntities?: ConfigEntity[];
+  @state() private _configEntities?: ConfigEntity[];
 
   public setConfig(config: GlanceCardConfig): void {
     assert(config, cardConfigStruct);
@@ -236,7 +229,7 @@ export class HuiGlanceCardEditor
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return configElementStyle;
   }
 }
diff --git a/src/panels/lovelace/editor/config-elements/hui-graph-footer-editor.ts b/src/panels/lovelace/editor/config-elements/hui-graph-footer-editor.ts
index c7da202cf0..a63cac0d46 100644
--- a/src/panels/lovelace/editor/config-elements/hui-graph-footer-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-graph-footer-editor.ts
@@ -1,14 +1,7 @@
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-input/paper-input";
-import {
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { assert } from "superstruct";
 import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
@@ -31,7 +24,7 @@ export class HuiGraphFooterEditor
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: GraphHeaderFooterConfig;
+  @state() private _config?: GraphHeaderFooterConfig;
 
   public setConfig(config: GraphHeaderFooterConfig): void {
     assert(config, graphHeaderFooterConfigStruct);
@@ -145,7 +138,7 @@ export class HuiGraphFooterEditor
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return configElementStyle;
   }
 }
diff --git a/src/panels/lovelace/editor/config-elements/hui-grid-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-grid-card-editor.ts
index 681ebd0dc9..4d7f8262f4 100644
--- a/src/panels/lovelace/editor/config-elements/hui-grid-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-grid-card-editor.ts
@@ -1,4 +1,5 @@
-import { customElement, html, TemplateResult } from "lit-element";
+import { html, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
 import {
   any,
   array,
diff --git a/src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts
index 4f2ee981e1..407db8ca1a 100644
--- a/src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-history-graph-card-editor.ts
@@ -1,13 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import {
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import {
   array,
   assert,
@@ -18,9 +11,9 @@ import {
   union,
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { entityId } from "../../../../common/structs/is-entity-id";
 import { HomeAssistant } from "../../../../types";
 import { HistoryGraphCardConfig } from "../../cards/types";
-import { EntityId } from "../../../../common/structs/is-entity-id";
 import "../../components/hui-entity-editor";
 import { EntityConfig } from "../../entity-rows/types";
 import { LovelaceCardEditor } from "../../types";
@@ -30,10 +23,10 @@ import { configElementStyle } from "./config-elements-style";
 
 const entitiesConfigStruct = union([
   object({
-    entity: EntityId,
+    entity: entityId(),
     name: optional(string()),
   }),
-  EntityId,
+  entityId(),
 ]);
 
 const cardConfigStruct = object({
@@ -50,9 +43,9 @@ export class HuiHistoryGraphCardEditor
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: HistoryGraphCardConfig;
+  @state() private _config?: HistoryGraphCardConfig;
 
-  @internalProperty() private _configEntities?: EntityConfig[];
+  @state() private _configEntities?: EntityConfig[];
 
   public setConfig(config: HistoryGraphCardConfig): void {
     assert(config, cardConfigStruct);
@@ -158,7 +151,7 @@ export class HuiHistoryGraphCardEditor
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return configElementStyle;
   }
 }
diff --git a/src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts
index d844161bc5..f4949c672f 100644
--- a/src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts
@@ -1,13 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import {
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { assert, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
@@ -33,7 +26,7 @@ export class HuiHumidifierCardEditor
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: HumidifierCardConfig;
+  @state() private _config?: HumidifierCardConfig;
 
   public setConfig(config: HumidifierCardConfig): void {
     assert(config, cardConfigStruct);
@@ -112,7 +105,7 @@ export class HuiHumidifierCardEditor
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return configElementStyle;
   }
 }
diff --git a/src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts
index 761a5cc251..e02268eb10 100644
--- a/src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts
@@ -1,13 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import {
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { assert, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../../types";
@@ -29,7 +22,7 @@ export class HuiIframeCardEditor
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: IframeCardConfig;
+  @state() private _config?: IframeCardConfig;
 
   public setConfig(config: IframeCardConfig): void {
     assert(config, cardConfigStruct);
@@ -112,7 +105,7 @@ export class HuiIframeCardEditor
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return configElementStyle;
   }
 }
diff --git a/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts
index 4e84f014a3..867d939a1a 100644
--- a/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts
@@ -1,13 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import {
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { assert, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stateIcon } from "../../../../common/entity/state_icon";
@@ -40,7 +33,7 @@ export class HuiLightCardEditor
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: LightCardConfig;
+  @state() private _config?: LightCardConfig;
 
   public setConfig(config: LightCardConfig): void {
     assert(config, cardConfigStruct);
@@ -185,7 +178,7 @@ export class HuiLightCardEditor
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return configElementStyle;
   }
 }
diff --git a/src/panels/lovelace/editor/config-elements/hui-logbook-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-logbook-card-editor.ts
index b5835259de..ae710c5dbf 100644
--- a/src/panels/lovelace/editor/config-elements/hui-logbook-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-logbook-card-editor.ts
@@ -1,13 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import {
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { array, assert, number, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entities-picker";
@@ -34,9 +27,9 @@ export class HuiLogbookCardEditor
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: LogbookCardConfig;
+  @state() private _config?: LogbookCardConfig;
 
-  @internalProperty() private _configEntities?: string[];
+  @state() private _configEntities?: string[];
 
   public setConfig(config: LogbookCardConfig): void {
     assert(config, cardConfigStruct);
@@ -144,7 +137,7 @@ export class HuiLogbookCardEditor
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return configElementStyle;
   }
 }
diff --git a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
index e32c9f56bc..f9484d1ed9 100644
--- a/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
@@ -1,14 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import {
-  css,
-  CSSResultArray,
-  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 {
   array,
   assert,
@@ -52,9 +44,9 @@ const cardConfigStruct = object({
 export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: MapCardConfig;
+  @state() private _config?: MapCardConfig;
 
-  @internalProperty() private _configEntities?: EntityConfig[];
+  @state() private _configEntities?: EntityConfig[];
 
   public setConfig(config: MapCardConfig): void {
     assert(config, cardConfigStruct);
@@ -223,7 +215,7 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       configElementStyle,
       css`
diff --git a/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts
index d20d83f200..49190d8ebd 100644
--- a/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts
@@ -1,14 +1,7 @@
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-input/paper-textarea";
-import {
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { assert, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../../types";
@@ -31,7 +24,7 @@ export class HuiMarkdownCardEditor
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: MarkdownCardConfig;
+  @state() private _config?: MarkdownCardConfig;
 
   public setConfig(config: MarkdownCardConfig): void {
     assert(config, cardConfigStruct);
@@ -119,7 +112,7 @@ export class HuiMarkdownCardEditor
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return configElementStyle;
   }
 }
diff --git a/src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts
index 196674eac2..6896b94381 100644
--- a/src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts
@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { assert, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
@@ -29,7 +23,7 @@ export class HuiMediaControlCardEditor
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: MediaControlCardConfig;
+  @state() private _config?: MediaControlCardConfig;
 
   public setConfig(config: MediaControlCardConfig): void {
     assert(config, cardConfigStruct);
diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts
index 5d8b5f68f4..5ae59b0d26 100644
--- a/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts
@@ -1,13 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import {
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { assert, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { ActionConfig } from "../../../../data/lovelace";
@@ -33,7 +26,7 @@ export class HuiPictureCardEditor
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: PictureCardConfig;
+  @state() private _config?: PictureCardConfig;
 
   public setConfig(config: PictureCardConfig): void {
     assert(config, cardConfigStruct);
@@ -135,7 +128,7 @@ export class HuiPictureCardEditor
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return configElementStyle;
   }
 }
diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
index f7737938f0..a9a99edf4f 100644
--- a/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
@@ -2,15 +2,8 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-import {
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { assert, boolean, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
@@ -49,7 +42,7 @@ export class HuiPictureEntityCardEditor
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: PictureEntityCardConfig;
+  @state() private _config?: PictureEntityCardConfig;
 
   public setConfig(config: PictureEntityCardConfig): void {
     assert(config, cardConfigStruct);
@@ -293,7 +286,7 @@ export class HuiPictureEntityCardEditor
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return configElementStyle;
   }
 }
diff --git a/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts
index 08631e48f8..a09f13cb68 100644
--- a/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts
@@ -2,15 +2,8 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-import {
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { array, assert, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
@@ -52,9 +45,9 @@ export class HuiPictureGlanceCardEditor
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: PictureGlanceCardConfig;
+  @state() private _config?: PictureGlanceCardConfig;
 
-  @internalProperty() private _configEntities?: EntityConfig[];
+  @state() private _configEntities?: EntityConfig[];
 
   public setConfig(config: PictureGlanceCardConfig): void {
     assert(config, cardConfigStruct);
@@ -260,7 +253,7 @@ export class HuiPictureGlanceCardEditor
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return configElementStyle;
   }
 }
diff --git a/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts
index 421aadc11b..fcfed5c373 100644
--- a/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts
@@ -1,13 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import {
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { assert, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
@@ -34,7 +27,7 @@ export class HuiPlantStatusCardEditor
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: PlantStatusCardConfig;
+  @state() private _config?: PlantStatusCardConfig;
 
   public setConfig(config: PlantStatusCardConfig): void {
     assert(config, cardConfigStruct);
@@ -115,7 +108,7 @@ export class HuiPlantStatusCardEditor
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return configElementStyle;
   }
 }
diff --git a/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts
index 425f973763..3f707cc1fe 100644
--- a/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts
@@ -2,15 +2,8 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-import {
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { assert, number, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stateIcon } from "../../../../common/entity/state_icon";
@@ -37,7 +30,7 @@ const cardConfigStruct = object({
   hours_to_show: optional(number()),
 });
 
-const includeDomains = ["sensor"];
+const includeDomains = ["counter", "input_number", "number", "sensor"];
 
 @customElement("hui-sensor-card-editor")
 export class HuiSensorCardEditor
@@ -45,7 +38,7 @@ export class HuiSensorCardEditor
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: SensorCardConfig;
+  @state() private _config?: SensorCardConfig;
 
   public setConfig(config: SensorCardConfig): void {
     assert(config, cardConfigStruct);
@@ -238,7 +231,7 @@ export class HuiSensorCardEditor
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return configElementStyle;
   }
 }
diff --git a/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts b/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts
index fc54ae7ad7..6edbc4787b 100644
--- a/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts
@@ -1,14 +1,6 @@
 import "@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 { assert, object, optional, string } from "superstruct";
 import { isComponentLoaded } from "../../../../common/config/is_component_loaded";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -30,7 +22,7 @@ export class HuiShoppingListEditor
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: ShoppingListCardConfig;
+  @state() private _config?: ShoppingListCardConfig;
 
   public setConfig(config: ShoppingListCardConfig): void {
     assert(config, cardConfigStruct);
@@ -104,7 +96,7 @@ export class HuiShoppingListEditor
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .error {
         color: var(--error-color);
diff --git a/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
index 43dc42d1d9..80dae64248 100644
--- a/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
@@ -1,17 +1,8 @@
 import { mdiArrowLeft, mdiArrowRight, mdiDelete, mdiPlus } from "@mdi/js";
 import "@polymer/paper-tabs";
 import "@polymer/paper-tabs/paper-tab";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state, query } from "lit/decorators";
 import { any, array, assert, object, optional, string } from "superstruct";
 import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import { LovelaceCardConfig, LovelaceConfig } from "../../../../data/lovelace";
@@ -39,13 +30,13 @@ export class HuiStackCardEditor
 
   @property({ attribute: false }) public lovelace?: LovelaceConfig;
 
-  @internalProperty() protected _config?: StackCardConfig;
+  @state() protected _config?: StackCardConfig;
 
-  @internalProperty() protected _selectedCard = 0;
+  @state() protected _selectedCard = 0;
 
-  @internalProperty() protected _GUImode = true;
+  @state() protected _GUImode = true;
 
-  @internalProperty() protected _guiModeAvailable? = true;
+  @state() protected _guiModeAvailable? = true;
 
   @query("hui-card-element-editor")
   protected _cardEditorEl?: HuiCardElementEditor;
@@ -236,7 +227,7 @@ export class HuiStackCardEditor
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       configElementStyle,
       css`
diff --git a/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts
index 88ae8402e6..460ed8ae93 100644
--- a/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts
@@ -1,13 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import {
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { assert, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
@@ -33,7 +26,7 @@ export class HuiThermostatCardEditor
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: ThermostatCardConfig;
+  @state() private _config?: ThermostatCardConfig;
 
   public setConfig(config: ThermostatCardConfig): void {
     assert(config, cardConfigStruct);
@@ -112,7 +105,7 @@ export class HuiThermostatCardEditor
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return configElementStyle;
   }
 }
diff --git a/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts
index d02036d35e..f5f3d18b58 100644
--- a/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts
@@ -1,12 +1,5 @@
-import {
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { assert, boolean, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
@@ -45,7 +38,7 @@ export class HuiWeatherForecastCardEditor
   implements LovelaceCardEditor {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: WeatherForecastCardConfig;
+  @state() private _config?: WeatherForecastCardConfig;
 
   public setConfig(config: WeatherForecastCardConfig): void {
     assert(config, cardConfigStruct);
@@ -163,7 +156,7 @@ export class HuiWeatherForecastCardEditor
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return configElementStyle;
   }
 }
diff --git a/src/panels/lovelace/editor/entity-row-editor/hui-row-element-editor.ts b/src/panels/lovelace/editor/entity-row-editor/hui-row-element-editor.ts
index 00ab2c6553..bdf7aef9cf 100644
--- a/src/panels/lovelace/editor/entity-row-editor/hui-row-element-editor.ts
+++ b/src/panels/lovelace/editor/entity-row-editor/hui-row-element-editor.ts
@@ -1,4 +1,4 @@
-import { customElement } from "lit-element";
+import { customElement } from "lit/decorators";
 import { getRowElementClass } from "../../create-element/create-row-element";
 import { LovelaceRowConfig } from "../../entity-rows/types";
 import type { LovelaceRowEditor } from "../../types";
diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts b/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts
index 6c488b4253..bd5657ac5d 100644
--- a/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-dialog-create-headerfooter.ts
@@ -1,14 +1,6 @@
 import "@material/mwc-button/mwc-button";
-import {
-  css,
-  CSSResultArray,
-  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 { fireEvent } from "../../../../common/dom/fire_event";
 import { createCloseHeading } from "../../../../components/ha-dialog";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
@@ -25,7 +17,7 @@ export class HuiCreateDialogHeaderFooter
   implements HassDialog<CreateHeaderFooterDialogParams> {
   @property({ attribute: false }) protected hass!: HomeAssistant;
 
-  @internalProperty() private _params?: CreateHeaderFooterDialogParams;
+  @state() private _params?: CreateHeaderFooterDialogParams;
 
   public async showDialog(
     params: CreateHeaderFooterDialogParams
@@ -117,7 +109,7 @@ export class HuiCreateDialogHeaderFooter
     this.closeDialog();
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
index dc064f7ddd..044f7502ae 100644
--- a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
@@ -2,15 +2,8 @@ import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiClose, mdiPencil, mdiPlus } from "@mdi/js";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-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 { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-paper-dropdown-menu";
 import "../../../../components/ha-svg-icon";
@@ -110,7 +103,7 @@ export class HuiHeaderFooterEditor extends LitElement {
     fireEvent(this, "value-changed", { value: "" });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         font-size: 16px;
diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts
index ed7f3897f9..07cd2ae0d8 100644
--- a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts
+++ b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-element-editor.ts
@@ -1,4 +1,4 @@
-import { customElement } from "lit-element";
+import { customElement } from "lit/decorators";
 import { getHeaderFooterElementClass } from "../../create-element/create-header-footer-element";
 import type { LovelaceHeaderFooterConfig } from "../../header-footer/types";
 import type { LovelaceHeaderFooterEditor } from "../../types";
diff --git a/src/panels/lovelace/editor/hui-dialog-save-config.ts b/src/panels/lovelace/editor/hui-dialog-save-config.ts
index acf32993e4..0f0a6c341e 100644
--- a/src/panels/lovelace/editor/hui-dialog-save-config.ts
+++ b/src/panels/lovelace/editor/hui-dialog-save-config.ts
@@ -1,16 +1,8 @@
 import "@material/mwc-button";
 import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiHelpCircle } from "@mdi/js";
-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 { fireEvent } from "../../../common/dom/fire_event";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import "../../../components/ha-circular-progress";
@@ -33,11 +25,11 @@ const EMPTY_CONFIG: LovelaceConfig = { views: [{ title: "Home" }] };
 export class HuiSaveConfig extends LitElement implements HassDialog {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _params?: SaveDialogParams;
+  @state() private _params?: SaveDialogParams;
 
-  @internalProperty() private _emptyConfig = false;
+  @state() private _emptyConfig = false;
 
-  @internalProperty() private _saving: boolean;
+  @state() private _saving: boolean;
 
   public constructor() {
     super();
@@ -201,7 +193,7 @@ export class HuiSaveConfig extends LitElement implements HassDialog {
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/lovelace/editor/hui-element-editor.ts b/src/panels/lovelace/editor/hui-element-editor.ts
index d87c072e00..d0c0904f78 100644
--- a/src/panels/lovelace/editor/hui-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-element-editor.ts
@@ -1,17 +1,16 @@
 import "@material/mwc-button";
-import { safeDump, safeLoad } from "js-yaml";
+import { dump, load } from "js-yaml";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { property, state, query } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { handleStructError } from "../../../common/structs/handle-errors";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import { deepEqual } from "../../../common/util/deep-equal";
 import "../../../components/ha-circular-progress";
@@ -22,7 +21,6 @@ import type {
   LovelaceConfig,
 } from "../../../data/lovelace";
 import type { HomeAssistant } from "../../../types";
-import { handleStructError } from "../../../common/structs/handle-errors";
 import type { LovelaceRowConfig } from "../entity-rows/types";
 import { LovelaceHeaderFooterConfig } from "../header-footer/types";
 import type { LovelaceGenericElementEditor } from "../types";
@@ -55,31 +53,31 @@ export abstract class HuiElementEditor<T> extends LitElement {
 
   @property({ attribute: false }) public lovelace?: LovelaceConfig;
 
-  @internalProperty() private _yaml?: string;
+  @state() private _yaml?: string;
 
-  @internalProperty() private _config?: T;
+  @state() private _config?: T;
 
-  @internalProperty() private _configElement?: LovelaceGenericElementEditor;
+  @state() private _configElement?: LovelaceGenericElementEditor;
 
-  @internalProperty() private _configElementType?: string;
+  @state() private _configElementType?: string;
 
-  @internalProperty() private _guiMode = true;
+  @state() private _guiMode = true;
 
   // Error: Configuration broken - do not save
-  @internalProperty() private _errors?: string[];
+  @state() private _errors?: string[];
 
   // Warning: GUI editor can't handle configuration - ok to save
-  @internalProperty() private _warnings?: string[];
+  @state() private _warnings?: string[];
 
-  @internalProperty() private _guiSupported?: boolean;
+  @state() private _guiSupported?: boolean;
 
-  @internalProperty() private _loading = false;
+  @state() private _loading = false;
 
   @query("ha-code-editor") _yamlEditor?: HaCodeEditor;
 
   public get yaml(): string {
     if (!this._yaml) {
-      this._yaml = safeDump(this._config);
+      this._yaml = dump(this._config);
     }
     return this._yaml || "";
   }
@@ -87,7 +85,7 @@ export abstract class HuiElementEditor<T> extends LitElement {
   public set yaml(_yaml: string) {
     this._yaml = _yaml;
     try {
-      this._config = safeLoad(this.yaml);
+      this._config = load(this.yaml) as any;
       this._errors = undefined;
     } catch (err) {
       this._errors = [err.message];
@@ -351,7 +349,7 @@ export abstract class HuiElementEditor<T> extends LitElement {
     ev.stopPropagation();
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: flex;
diff --git a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
index e093fcc0c2..9095c6b1b1 100644
--- a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
+++ b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts
@@ -2,16 +2,14 @@ import "@material/mwc-icon-button";
 import { mdiClose, mdiDrag, mdiPencil } from "@mdi/js";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { guard } from "lit-html/directives/guard";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { guard } from "lit/directives/guard";
 import type { SortableEvent } from "sortablejs";
 import Sortable, {
   AutoScroll,
@@ -41,9 +39,9 @@ export class HuiEntitiesCardRowEditor extends LitElement {
 
   @property() protected label?: string;
 
-  @internalProperty() private _attached = false;
+  @state() private _attached = false;
 
-  @internalProperty() private _renderEmptySortable = false;
+  @state() private _renderEmptySortable = false;
 
   private _sortable?: Sortable;
 
@@ -250,7 +248,7 @@ export class HuiEntitiesCardRowEditor extends LitElement {
     });
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       sortableStyles,
       css`
diff --git a/src/panels/lovelace/editor/hui-sub-element-editor.ts b/src/panels/lovelace/editor/hui-sub-element-editor.ts
index c382ed0570..e243aee060 100644
--- a/src/panels/lovelace/editor/hui-sub-element-editor.ts
+++ b/src/panels/lovelace/editor/hui-sub-element-editor.ts
@@ -1,17 +1,8 @@
 import "@material/mwc-button";
 import "@material/mwc-icon-button";
 import { mdiArrowLeft } from "@mdi/js";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state, query } from "lit/decorators";
 import { fireEvent, HASSDomEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-svg-icon";
 import type { HomeAssistant } from "../../../types";
@@ -34,9 +25,9 @@ export class HuiSubElementEditor extends LitElement {
 
   @property({ attribute: false }) public config!: SubElementEditorConfig;
 
-  @internalProperty() private _guiModeAvailable = true;
+  @state() private _guiModeAvailable = true;
 
-  @internalProperty() private _guiMode = true;
+  @state() private _guiMode = true;
 
   @query(".editor") private _editorElement?: HuiElementEditor<
     LovelaceRowConfig | LovelaceHeaderFooterConfig
@@ -109,7 +100,7 @@ export class HuiSubElementEditor extends LitElement {
     this._guiModeAvailable = ev.detail.guiModeAvailable;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .header {
         display: flex;
diff --git a/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts b/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
index 219824378f..2630466145 100644
--- a/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
+++ b/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
@@ -1,15 +1,8 @@
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-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 { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/dialog/ha-paper-dialog";
 import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
 import "../../../../components/ha-circular-progress";
@@ -18,13 +11,12 @@ import { haStyleDialog } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
 import type { Lovelace } from "../../types";
 import "./hui-lovelace-editor";
-import { fireEvent } from "../../../../common/dom/fire_event";
 
 @customElement("hui-dialog-edit-lovelace")
 export class HuiDialogEditLovelace extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _lovelace?: Lovelace;
+  @state() private _lovelace?: Lovelace;
 
   private _config?: LovelaceConfig;
 
@@ -135,7 +127,7 @@ export class HuiDialogEditLovelace extends LitElement {
     return JSON.stringify(this._config) !== JSON.stringify(lovelaceConfig);
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/lovelace/editor/lovelace-editor/hui-lovelace-editor.ts b/src/panels/lovelace/editor/lovelace-editor/hui-lovelace-editor.ts
index dff6c618a4..6f732499fc 100644
--- a/src/panels/lovelace/editor/lovelace-editor/hui-lovelace-editor.ts
+++ b/src/panels/lovelace/editor/lovelace-editor/hui-lovelace-editor.ts
@@ -1,12 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import {
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { LovelaceConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
@@ -72,7 +66,7 @@ export class HuiLovelaceEditor extends LitElement {
     fireEvent(this, "lovelace-config-changed", { config: newConfig });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return configElementStyle;
   }
 }
diff --git a/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts b/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts
index 55cedc9626..f01cf1717a 100644
--- a/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts
+++ b/src/panels/lovelace/editor/select-view/hui-dialog-select-view.ts
@@ -1,13 +1,7 @@
 import "@polymer/paper-item/paper-item";
-import {
-  css,
-  CSSResultArray,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/dialog/ha-paper-dialog";
 import { createCloseHeading } from "../../../../components/ha-dialog";
 import "../../../../components/ha-paper-dropdown-menu";
@@ -17,7 +11,6 @@ import {
   LovelaceConfig,
   LovelaceDashboard,
 } from "../../../../data/lovelace";
-import { fireEvent } from "../../../../common/dom/fire_event";
 import { haStyleDialog } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 import "../../components/hui-views-list";
@@ -27,13 +20,13 @@ import type { SelectViewDialogParams } from "./show-select-view-dialog";
 export class HuiDialogSelectView extends LitElement {
   public hass!: HomeAssistant;
 
-  @internalProperty() private _params?: SelectViewDialogParams;
+  @state() private _params?: SelectViewDialogParams;
 
-  @internalProperty() private _dashboards: LovelaceDashboard[] = [];
+  @state() private _dashboards: LovelaceDashboard[] = [];
 
-  @internalProperty() private _urlPath?: string | null;
+  @state() private _urlPath?: string | null;
 
-  @internalProperty() private _config?: LovelaceConfig;
+  @state() private _config?: LovelaceConfig;
 
   public showDialog(params: SelectViewDialogParams): void {
     this._config = params.lovelaceConfig;
@@ -138,7 +131,7 @@ export class HuiDialogSelectView extends LitElement {
     this.closeDialog();
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts b/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts
index 9a74ed6958..cc8d2de9db 100644
--- a/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts
+++ b/src/panels/lovelace/editor/unused-entities/hui-unused-entities.ts
@@ -1,16 +1,14 @@
 import { mdiPlus } from "@mdi/js";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { computeDomain } from "../../../../common/entity/compute_domain";
 import { computeStateName } from "../../../../common/entity/compute_state_name";
 import { computeRTL } from "../../../../common/util/compute_rtl";
@@ -33,9 +31,9 @@ export class HuiUnusedEntities extends LitElement {
 
   @property({ type: Boolean }) public narrow?: boolean;
 
-  @internalProperty() private _unusedEntities: string[] = [];
+  @state() private _unusedEntities: string[] = [];
 
-  @internalProperty() private _selectedEntities: string[] = [];
+  @state() private _selectedEntities: string[] = [];
 
   private get _config(): LovelaceConfig {
     return this.lovelace.config;
@@ -153,7 +151,7 @@ export class HuiUnusedEntities extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         background: var(--lovelace-background);
diff --git a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
index 5041bd3b60..0faeff3dfc 100644
--- a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
@@ -1,16 +1,8 @@
 import "@material/mwc-button";
 import "@polymer/paper-tabs/paper-tab";
 import "@polymer/paper-tabs/paper-tabs";
-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 { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import { navigate } from "../../../../common/navigate";
 import "../../../../components/ha-circular-progress";
@@ -44,17 +36,17 @@ import { EditViewDialogParams } from "./show-edit-view-dialog";
 export class HuiDialogEditView extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _params?: EditViewDialogParams;
+  @state() private _params?: EditViewDialogParams;
 
-  @internalProperty() private _config?: LovelaceViewConfig;
+  @state() private _config?: LovelaceViewConfig;
 
-  @internalProperty() private _badges?: LovelaceBadgeConfig[];
+  @state() private _badges?: LovelaceBadgeConfig[];
 
-  @internalProperty() private _cards?: LovelaceCardConfig[];
+  @state() private _cards?: LovelaceCardConfig[];
 
-  @internalProperty() private _saving = false;
+  @state() private _saving = false;
 
-  @internalProperty() private _curTab?: string;
+  @state() private _curTab?: string;
 
   private _curTabIndex = 0;
 
@@ -236,7 +228,7 @@ export class HuiDialogEditView extends LitElement {
         deleteView(this._params.lovelace!.config, this._params.viewIndex!)
       );
       this.closeDialog();
-      navigate(this, `/${window.location.pathname.split("/")[1]}`);
+      navigate(`/${window.location.pathname.split("/")[1]}`);
     } catch (err) {
       showAlertDialog(this, {
         text: `Deleting failed: ${err.message}`,
@@ -347,7 +339,7 @@ export class HuiDialogEditView extends LitElement {
     return this._params!.viewIndex === undefined;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/lovelace/editor/view-editor/hui-view-editor.ts b/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
index 9ea6d9bc21..a07e0a9fee 100644
--- a/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-view-editor.ts
@@ -1,14 +1,6 @@
 import "@polymer/paper-input/paper-input";
-import {
-  css,
-  CSSResultArray,
-  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 { fireEvent } from "../../../../common/dom/fire_event";
 import { slugify } from "../../../../common/string/slugify";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
@@ -35,7 +27,7 @@ export class HuiViewEditor extends LitElement {
 
   @property() public isNew!: boolean;
 
-  @internalProperty() private _config!: LovelaceViewConfig;
+  @state() private _config!: LovelaceViewConfig;
 
   private _suggestedPath = false;
 
@@ -181,7 +173,7 @@ export class HuiViewEditor extends LitElement {
     fireEvent(this, "view-config-changed", { config });
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       configElementStyle,
       css`
diff --git a/src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts b/src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts
index bed9698288..b546794a29 100644
--- a/src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts
@@ -2,15 +2,13 @@ import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { compare } from "../../../../common/string/compare";
@@ -40,9 +38,9 @@ export class HuiViewVisibilityEditor extends LitElement {
 
   @property() public _config!: LovelaceViewConfig;
 
-  @internalProperty() private _users!: User[];
+  @state() private _users!: User[];
 
-  @internalProperty() private _visible!: boolean | ShowViewConfig[];
+  @state() private _visible!: boolean | ShowViewConfig[];
 
   private _sortedUsers = memoizeOne((users: User[]) =>
     users.sort((a, b) => compare(a.name, b.name))
@@ -134,7 +132,7 @@ export class HuiViewVisibilityEditor extends LitElement {
     fireEvent(this, "view-visibility-changed", { visible: this._visible });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;
diff --git a/src/panels/lovelace/elements/hui-icon-element.ts b/src/panels/lovelace/elements/hui-icon-element.ts
index 5c934ce593..9f88b796cc 100644
--- a/src/panels/lovelace/elements/hui-icon-element.ts
+++ b/src/panels/lovelace/elements/hui-icon-element.ts
@@ -1,13 +1,6 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import "../../../components/ha-icon";
 import { ActionHandlerEvent } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
@@ -21,7 +14,7 @@ import { IconElementConfig, LovelaceElement } from "./types";
 export class HuiIconElement extends LitElement implements LovelaceElement {
   public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: IconElementConfig;
+  @state() private _config?: IconElementConfig;
 
   public setConfig(config: IconElementConfig): void {
     if (!config.icon) {
@@ -56,7 +49,7 @@ export class HuiIconElement extends LitElement implements LovelaceElement {
     handleAction(this, this.hass!, this._config!, ev.detail.action!);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         cursor: pointer;
diff --git a/src/panels/lovelace/elements/hui-image-element.ts b/src/panels/lovelace/elements/hui-image-element.ts
index ab4d328d71..55537e3131 100644
--- a/src/panels/lovelace/elements/hui-image-element.ts
+++ b/src/panels/lovelace/elements/hui-image-element.ts
@@ -1,14 +1,6 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { ActionHandlerEvent } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
 import { computeTooltip } from "../common/compute-tooltip";
@@ -22,7 +14,7 @@ import { ImageElementConfig, LovelaceElement } from "./types";
 export class HuiImageElement extends LitElement implements LovelaceElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: ImageElementConfig;
+  @state() private _config?: ImageElementConfig;
 
   public setConfig(config: ImageElementConfig): void {
     if (!config) {
@@ -66,7 +58,7 @@ export class HuiImageElement extends LitElement implements LovelaceElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host(.clickable) {
         cursor: pointer;
diff --git a/src/panels/lovelace/elements/hui-service-button-element.ts b/src/panels/lovelace/elements/hui-service-button-element.ts
index 3c0b880e45..23b03a0ff9 100644
--- a/src/panels/lovelace/elements/hui-service-button-element.ts
+++ b/src/panels/lovelace/elements/hui-service-button-element.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 "../../../components/buttons/ha-call-service-button";
 import { HomeAssistant } from "../../../types";
 import { LovelaceElement, ServiceButtonElementConfig } from "./types";
@@ -17,7 +10,7 @@ export class HuiServiceButtonElement
   implements LovelaceElement {
   public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: ServiceButtonElementConfig;
+  @state() private _config?: ServiceButtonElementConfig;
 
   private _domain?: string;
 
@@ -57,7 +50,7 @@ export class HuiServiceButtonElement
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-call-service-button {
         color: var(--primary-color);
diff --git a/src/panels/lovelace/elements/hui-state-badge-element.ts b/src/panels/lovelace/elements/hui-state-badge-element.ts
index 7677e45e57..1296acd316 100644
--- a/src/panels/lovelace/elements/hui-state-badge-element.ts
+++ b/src/panels/lovelace/elements/hui-state-badge-element.ts
@@ -1,13 +1,6 @@
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-  TemplateResult,
-} from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import "../../../components/entity/ha-state-label-badge";
 import { ActionHandlerEvent } from "../../../data/lovelace";
@@ -26,7 +19,7 @@ export class HuiStateBadgeElement
   implements LovelaceElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: StateBadgeElementConfig;
+  @state() private _config?: StateBadgeElementConfig;
 
   public setConfig(config: StateBadgeElementConfig): void {
     if (!config.entity) {
diff --git a/src/panels/lovelace/elements/hui-state-icon-element.ts b/src/panels/lovelace/elements/hui-state-icon-element.ts
index 7ec7fdcdf4..578567ac08 100644
--- a/src/panels/lovelace/elements/hui-state-icon-element.ts
+++ b/src/panels/lovelace/elements/hui-state-icon-element.ts
@@ -1,15 +1,13 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import "../../../components/entity/state-badge";
 import { ActionHandlerEvent } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
@@ -26,7 +24,7 @@ import { LovelaceElement, StateIconElementConfig } from "./types";
 export class HuiStateIconElement extends LitElement implements LovelaceElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: StateIconElementConfig;
+  @state() private _config?: StateIconElementConfig;
 
   public setConfig(config: StateIconElementConfig): void {
     if (!config.entity) {
@@ -77,7 +75,7 @@ export class HuiStateIconElement extends LitElement implements LovelaceElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         cursor: pointer;
diff --git a/src/panels/lovelace/elements/hui-state-label-element.ts b/src/panels/lovelace/elements/hui-state-label-element.ts
index 8b78064d82..6439a43d01 100644
--- a/src/panels/lovelace/elements/hui-state-label-element.ts
+++ b/src/panels/lovelace/elements/hui-state-label-element.ts
@@ -1,15 +1,13 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { ActionHandlerEvent } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
@@ -26,7 +24,7 @@ import { LovelaceElement, StateLabelElementConfig } from "./types";
 class HuiStateLabelElement extends LitElement implements LovelaceElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: StateLabelElementConfig;
+  @state() private _config?: StateLabelElementConfig;
 
   public setConfig(config: StateLabelElementConfig): void {
     if (!config.entity) {
@@ -95,7 +93,7 @@ class HuiStateLabelElement extends LitElement implements LovelaceElement {
     handleAction(this, this.hass!, this._config!, ev.detail.action!);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         cursor: pointer;
diff --git a/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts b/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts
index f4c44a5633..1ad1a78098 100644
--- a/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-climate-entity-row.ts
@@ -1,14 +1,12 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import "../../../components/ha-climate-state";
 import { HomeAssistant } from "../../../types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
@@ -20,7 +18,7 @@ import { EntityConfig, LovelaceRow } from "./types";
 class HuiClimateEntityRow extends LitElement implements LovelaceRow {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: EntityConfig;
+  @state() private _config?: EntityConfig;
 
   public setConfig(config: EntityConfig): void {
     if (!config || !config.entity) {
@@ -59,7 +57,7 @@ class HuiClimateEntityRow extends LitElement implements LovelaceRow {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-climate-state {
         text-align: right;
diff --git a/src/panels/lovelace/entity-rows/hui-cover-entity-row.ts b/src/panels/lovelace/entity-rows/hui-cover-entity-row.ts
index 4fe7860a95..5503eac028 100644
--- a/src/panels/lovelace/entity-rows/hui-cover-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-cover-entity-row.ts
@@ -1,14 +1,12 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import "../../../components/ha-cover-controls";
 import "../../../components/ha-cover-tilt-controls";
 import { HomeAssistant } from "../../../types";
@@ -22,7 +20,7 @@ import { EntityConfig, LovelaceRow } from "./types";
 class HuiCoverEntityRow extends LitElement implements LovelaceRow {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: EntityConfig;
+  @state() private _config?: EntityConfig;
 
   public setConfig(config: EntityConfig): void {
     if (!config) {
@@ -69,7 +67,7 @@ class HuiCoverEntityRow extends LitElement implements LovelaceRow {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-cover-controls,
       ha-cover-tilt-controls {
diff --git a/src/panels/lovelace/entity-rows/hui-group-entity-row.ts b/src/panels/lovelace/entity-rows/hui-group-entity-row.ts
index 89e9813c3a..9a0e24aa7c 100644
--- a/src/panels/lovelace/entity-rows/hui-group-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-group-entity-row.ts
@@ -1,12 +1,5 @@
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { DOMAINS_TOGGLE } from "../../../common/const";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
@@ -21,7 +14,7 @@ import { EntityConfig, LovelaceRow } from "./types";
 class HuiGroupEntityRow extends LitElement implements LovelaceRow {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: EntityConfig;
+  @state() private _config?: EntityConfig;
 
   private _computeCanToggle(hass: HomeAssistant, entityIds: string[]): boolean {
     return entityIds.some((entityId) => {
diff --git a/src/panels/lovelace/entity-rows/hui-humidifier-entity-row.ts b/src/panels/lovelace/entity-rows/hui-humidifier-entity-row.ts
index f9e54b8b04..9170e34ebd 100644
--- a/src/panels/lovelace/entity-rows/hui-humidifier-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-humidifier-entity-row.ts
@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  property,
-  PropertyValues,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../../../components/entity/ha-entity-toggle";
 import { HomeAssistant } from "../../../types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
diff --git a/src/panels/lovelace/entity-rows/hui-input-datetime-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-datetime-entity-row.ts
index fbc6ce31ff..0567009b12 100644
--- a/src/panels/lovelace/entity-rows/hui-input-datetime-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-input-datetime-entity-row.ts
@@ -1,13 +1,5 @@
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-  query,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, state, query } from "lit/decorators";
 import "../../../components/ha-date-input";
 import type { HaDateInput } from "../../../components/ha-date-input";
 import "../../../components/paper-time-input";
@@ -24,7 +16,7 @@ import type { EntityConfig, LovelaceRow } from "./types";
 class HuiInputDatetimeEntityRow extends LitElement implements LovelaceRow {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: EntityConfig;
+  @state() private _config?: EntityConfig;
 
   @query("paper-time-input") private _timeInputEl?: PaperTimeInput;
 
diff --git a/src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts
index 92583cffbc..652b192d44 100644
--- a/src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-input-number-entity-row.ts
@@ -1,15 +1,13 @@
 import "@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 { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import "../../../components/ha-slider";
@@ -25,7 +23,7 @@ import { EntityConfig, LovelaceRow } from "./types";
 class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: EntityConfig;
+  @state() private _config?: EntityConfig;
 
   private _loaded?: boolean;
 
@@ -120,7 +118,7 @@ class HuiInputNumberEntityRow extends LitElement implements LovelaceRow {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .flex {
         display: flex;
diff --git a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
index aa2ca5c4dc..852af65fee 100644
--- a/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts
@@ -2,17 +2,15 @@ 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";
-import { classMap } from "lit-html/directives/class-map";
-import { ifDefined } from "lit-html/directives/if-defined";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
 import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeDomain } from "../../../common/entity/compute_domain";
@@ -39,7 +37,7 @@ import { LovelaceRow } from "./types";
 class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: EntitiesCardEntityConfig;
+  @state() private _config?: EntitiesCardEntityConfig;
 
   public setConfig(config: EntitiesCardEntityConfig): void {
     if (!config || !config.entity) {
@@ -136,7 +134,7 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
     handleAction(this, this.hass!, this._config!, ev.detail.action!);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: flex;
diff --git a/src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts b/src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts
index 38d6e8058e..5c52d0b605 100644
--- a/src/panels/lovelace/entity-rows/hui-input-text-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-input-text-entity-row.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 { UNAVAILABLE } from "../../../data/entity";
 import { setValue } from "../../../data/input_text";
 import { HomeAssistant } from "../../../types";
@@ -22,7 +20,7 @@ import { EntityConfig, LovelaceRow } from "./types";
 class HuiInputTextEntityRow extends LitElement implements LovelaceRow {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: EntityConfig;
+  @state() private _config?: EntityConfig;
 
   public setConfig(config: EntityConfig): void {
     if (!config) {
@@ -83,7 +81,7 @@ class HuiInputTextEntityRow extends LitElement implements LovelaceRow {
     ev.target.blur();
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         cursor: pointer;
diff --git a/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts b/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts
index f8b8b66291..4bc96f298b 100644
--- a/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-lock-entity-row.ts
@@ -1,15 +1,13 @@
 import "@material/mwc-button/mwc-button";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
@@ -21,7 +19,7 @@ import { EntityConfig, LovelaceRow } from "./types";
 class HuiLockEntityRow extends LitElement implements LovelaceRow {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: EntityConfig;
+  @state() private _config?: EntityConfig;
 
   public setConfig(config: EntityConfig): void {
     if (!config) {
@@ -64,7 +62,7 @@ class HuiLockEntityRow extends LitElement implements LovelaceRow {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       mwc-button {
         margin-right: -0.57em;
diff --git a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts
index e86402dab3..83f73eacb4 100644
--- a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts
@@ -1,15 +1,13 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
@@ -42,11 +40,11 @@ import type { EntityConfig, LovelaceRow } from "./types";
 class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: EntityConfig;
+  @state() private _config?: EntityConfig;
 
-  @internalProperty() private _narrow?: boolean = false;
+  @state() private _narrow?: boolean = false;
 
-  @internalProperty() private _veryNarrow?: boolean = false;
+  @state() private _veryNarrow?: boolean = false;
 
   private _resizeObserver?: ResizeObserver;
 
@@ -67,8 +65,13 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
     this._resizeObserver?.unobserve(this);
   }
 
+  public willUpdate(): void {
+    if (!this.hasUpdated) {
+      this._measureCard();
+    }
+  }
+
   protected firstUpdated(): void {
-    this._measureCard();
     this._attachObserver();
   }
 
@@ -91,11 +94,11 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
       `;
     }
 
-    const state = stateObj.state;
+    const entityState = stateObj.state;
 
     const buttons = html`
       ${!this._narrow &&
-      state === "playing" &&
+      entityState === "playing" &&
       supportsFeature(stateObj, SUPPORT_PREVIOUS_TRACK)
         ? html`
             <ha-icon-button
@@ -104,12 +107,12 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
             ></ha-icon-button>
           `
         : ""}
-      ${(state === "playing" &&
+      ${(entityState === "playing" &&
         (supportsFeature(stateObj, SUPPORT_PAUSE) ||
           supportsFeature(stateObj, SUPPORT_STOP))) ||
-      ((state === "paused" || state === "idle") &&
+      ((entityState === "paused" || entityState === "idle") &&
         supportsFeature(stateObj, SUPPORT_PLAY)) ||
-      (state === "on" &&
+      (entityState === "on" &&
         (supportsFeature(stateObj, SUPPORT_PLAY) ||
           supportsFeature(stateObj, SUPPORT_PAUSE)))
         ? html`
@@ -119,7 +122,8 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
             ></ha-icon-button>
           `
         : ""}
-      ${state === "playing" && supportsFeature(stateObj, SUPPORT_NEXT_TRACK)
+      ${entityState === "playing" &&
+      supportsFeature(stateObj, SUPPORT_NEXT_TRACK)
         ? html`
             <ha-icon-button
               icon="hass:skip-next"
@@ -140,8 +144,8 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
       >
         <div class="controls">
           ${supportsFeature(stateObj, SUPPORT_TURN_ON) &&
-          state === "off" &&
-          !UNAVAILABLE_STATES.includes(state)
+          entityState === "off" &&
+          !UNAVAILABLE_STATES.includes(entityState)
             ? html`
                 <ha-icon-button
                   icon="hass:power"
@@ -153,8 +157,8 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
             ? buttons
             : ""}
           ${supportsFeature(stateObj, SUPPORT_TURN_OFF) &&
-          state !== "off" &&
-          !UNAVAILABLE_STATES.includes(state)
+          entityState !== "off" &&
+          !UNAVAILABLE_STATES.includes(entityState)
             ? html`
                 <ha-icon-button
                   icon="hass:power"
@@ -166,7 +170,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
       </hui-generic-entity-row>
       ${(supportsFeature(stateObj, SUPPORT_VOLUME_SET) ||
         supportsFeature(stateObj, SUPPORT_VOLUME_BUTTONS)) &&
-      ![UNAVAILABLE, UNKNOWN, "off"].includes(state)
+      ![UNAVAILABLE, UNKNOWN, "off"].includes(entityState)
         ? html`
             <div class="flex">
               <div class="volume">
@@ -308,7 +312,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;
diff --git a/src/panels/lovelace/entity-rows/hui-number-entity-row.ts b/src/panels/lovelace/entity-rows/hui-number-entity-row.ts
index 40e748ec76..97360e0192 100644
--- a/src/panels/lovelace/entity-rows/hui-number-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-number-entity-row.ts
@@ -1,15 +1,14 @@
 import "@polymer/paper-input/paper-input";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
-  internalProperty,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import "../../../components/ha-slider";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
@@ -17,15 +16,14 @@ import { setValue } from "../../../data/input_text";
 import { HomeAssistant } from "../../../types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-generic-entity-row";
-import { EntityConfig, LovelaceRow } from "./types";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
-import { computeStateDisplay } from "../../../common/entity/compute_state_display";
+import { EntityConfig, LovelaceRow } from "./types";
 
 @customElement("hui-number-entity-row")
 class HuiNumberEntityRow extends LitElement implements LovelaceRow {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: EntityConfig;
+  @state() private _config?: EntityConfig;
 
   private _loaded?: boolean;
 
@@ -120,7 +118,7 @@ class HuiNumberEntityRow extends LitElement implements LovelaceRow {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .flex {
         display: flex;
diff --git a/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts b/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts
index e0eec27805..3a9b87694c 100644
--- a/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-scene-entity-row.ts
@@ -1,15 +1,13 @@
 import "@material/mwc-button/mwc-button";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import "../../../components/entity/ha-entity-toggle";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
 import { activateScene } from "../../../data/scene";
@@ -23,7 +21,7 @@ import { ActionRowConfig, LovelaceRow } from "./types";
 class HuiSceneEntityRow extends LitElement implements LovelaceRow {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _config?: ActionRowConfig;
+  @state() private _config?: ActionRowConfig;
 
   public setConfig(config: ActionRowConfig): void {
     if (!config) {
@@ -65,7 +63,7 @@ class HuiSceneEntityRow extends LitElement implements LovelaceRow {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       mwc-button {
         margin-right: -0.57em;
diff --git a/src/panels/lovelace/entity-rows/hui-script-entity-row.ts b/src/panels/lovelace/entity-rows/hui-script-entity-row.ts
index 3be834a4b0..b4e21fc11b 100644
--- a/src/panels/lovelace/entity-rows/hui-script-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-script-entity-row.ts
@@ -1,15 +1,13 @@
 import "@material/mwc-button/mwc-button";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
 import { canRun, ScriptEntity } from "../../../data/script";
 import { HomeAssistant } from "../../../types";
@@ -22,7 +20,7 @@ import { ActionRowConfig, LovelaceRow } from "./types";
 class HuiScriptEntityRow extends LitElement implements LovelaceRow {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: ActionRowConfig;
+  @state() private _config?: ActionRowConfig;
 
   public setConfig(config: ActionRowConfig): void {
     if (!config) {
@@ -78,7 +76,7 @@ class HuiScriptEntityRow extends LitElement implements LovelaceRow {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       mwc-button:last-child {
         margin-right: -0.57em;
diff --git a/src/panels/lovelace/entity-rows/hui-sensor-entity-row.ts b/src/panels/lovelace/entity-rows/hui-sensor-entity-row.ts
index 758c8570e3..4a9a7f1b4f 100644
--- a/src/panels/lovelace/entity-rows/hui-sensor-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-sensor-entity-row.ts
@@ -1,14 +1,12 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
 import { ActionHandlerEvent } from "../../../data/lovelace";
@@ -33,7 +31,7 @@ interface SensorEntityConfig extends EntitiesCardEntityConfig {
 class HuiSensorEntityRow extends LitElement implements LovelaceRow {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: SensorEntityConfig;
+  @state() private _config?: SensorEntityConfig;
 
   public setConfig(config: SensorEntityConfig): void {
     if (!config) {
@@ -95,7 +93,7 @@ class HuiSensorEntityRow extends LitElement implements LovelaceRow {
     handleAction(this, this.hass!, this._config!, ev.detail.action);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       div {
         text-align: right;
diff --git a/src/panels/lovelace/entity-rows/hui-text-entity-row.ts b/src/panels/lovelace/entity-rows/hui-text-entity-row.ts
index 1fb732ca5c..6117579ab3 100644
--- a/src/panels/lovelace/entity-rows/hui-text-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-text-entity-row.ts
@@ -1,15 +1,13 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
@@ -28,7 +26,7 @@ import { LovelaceRow } from "./types";
 class HuiTextEntityRow extends LitElement implements LovelaceRow {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: EntitiesCardEntityConfig;
+  @state() private _config?: EntitiesCardEntityConfig;
 
   public setConfig(config: EntitiesCardEntityConfig): void {
     if (!config) {
@@ -87,7 +85,7 @@ class HuiTextEntityRow extends LitElement implements LovelaceRow {
     handleAction(this, this.hass!, this._config!, ev.detail.action);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       div {
         text-align: right;
diff --git a/src/panels/lovelace/entity-rows/hui-timer-entity-row.ts b/src/panels/lovelace/entity-rows/hui-timer-entity-row.ts
index 448ccc4574..a06eeb9905 100644
--- a/src/panels/lovelace/entity-rows/hui-timer-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-timer-entity-row.ts
@@ -1,15 +1,7 @@
 import { HassEntity } from "home-assistant-js-websocket";
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-  TemplateResult,
-} from "lit-element";
-import secondsToDuration from "../../../common/datetime/seconds_to_duration";
-import { timerTimeRemaining } from "../../../common/entity/timer_time_remaining";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { computeDisplayTimer, timerTimeRemaining } from "../../../data/timer";
 import { HomeAssistant } from "../../../types";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-generic-entity-row";
@@ -20,9 +12,9 @@ import { EntityConfig } from "./types";
 class HuiTimerEntityRow extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: EntityConfig;
+  @state() private _config?: EntityConfig;
 
-  @internalProperty() private _timeRemaining?: number;
+  @state() private _timeRemaining?: number;
 
   private _interval?: number;
 
@@ -65,7 +57,9 @@ class HuiTimerEntityRow extends LitElement {
 
     return html`
       <hui-generic-entity-row .hass=${this.hass} .config=${this._config}>
-        <div class="text-content">${this._computeDisplay(stateObj)}</div>
+        <div class="text-content">
+          ${computeDisplayTimer(this.hass, stateObj, this._timeRemaining)}
+        </div>
       </hui-generic-entity-row>
     `;
   }
@@ -118,26 +112,6 @@ class HuiTimerEntityRow extends LitElement {
   private _calculateRemaining(stateObj: HassEntity): void {
     this._timeRemaining = timerTimeRemaining(stateObj);
   }
-
-  private _computeDisplay(stateObj: HassEntity): string | null {
-    if (!stateObj) {
-      return null;
-    }
-
-    if (stateObj.state === "idle" || this._timeRemaining === 0) {
-      return (
-        this.hass!.localize(`state.timer.${stateObj.state}`) || stateObj.state
-      );
-    }
-
-    let display = secondsToDuration(this._timeRemaining || 0);
-
-    if (stateObj.state === "paused") {
-      display += ` (${this.hass!.localize("state.timer.paused")})`;
-    }
-
-    return display;
-  }
 }
 
 declare global {
diff --git a/src/panels/lovelace/entity-rows/hui-toggle-entity-row.ts b/src/panels/lovelace/entity-rows/hui-toggle-entity-row.ts
index 08fb08f86f..32c3f0d1ad 100644
--- a/src/panels/lovelace/entity-rows/hui-toggle-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-toggle-entity-row.ts
@@ -1,12 +1,5 @@
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
 import "../../../components/entity/ha-entity-toggle";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
@@ -20,7 +13,7 @@ import { EntityConfig, LovelaceRow } from "./types";
 class HuiToggleEntityRow extends LitElement implements LovelaceRow {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: EntityConfig;
+  @state() private _config?: EntityConfig;
 
   public setConfig(config: EntityConfig): void {
     if (!config) {
diff --git a/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts b/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts
index 1d4a23f185..803c2c8fdd 100644
--- a/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-weather-entity-row.ts
@@ -1,16 +1,14 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { ifDefined } from "lit-html/directives/if-defined";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
 import { DOMAINS_HIDE_MORE_INFO } from "../../../common/const";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateDisplay } from "../../../common/entity/compute_state_display";
@@ -41,7 +39,7 @@ import type { LovelaceRow } from "./types";
 class HuiWeatherEntityRow extends LitElement implements LovelaceRow {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: EntitiesCardEntityConfig;
+  @state() private _config?: EntitiesCardEntityConfig;
 
   public setConfig(config: EntitiesCardEntityConfig): void {
     if (!config?.entity) {
@@ -133,7 +131,7 @@ class HuiWeatherEntityRow extends LitElement implements LovelaceRow {
     handleAction(this, this.hass!, this._config!, ev.detail.action!);
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       weatherSVGStyles,
       css`
diff --git a/src/panels/lovelace/entity-rows/types.ts b/src/panels/lovelace/entity-rows/types.ts
index 9890927485..228c7d50a6 100644
--- a/src/panels/lovelace/entity-rows/types.ts
+++ b/src/panels/lovelace/entity-rows/types.ts
@@ -18,7 +18,7 @@ export interface EntityFilterEntityConfig extends EntityConfig {
 }
 export interface DividerConfig {
   type: "divider";
-  style: Record<string, string>;
+  style?: Record<string, string>;
 }
 export interface SectionConfig {
   type: "section";
diff --git a/src/panels/lovelace/ha-panel-lovelace.ts b/src/panels/lovelace/ha-panel-lovelace.ts
index 43aa5c8d45..c6e2fe8107 100644
--- a/src/panels/lovelace/ha-panel-lovelace.ts
+++ b/src/panels/lovelace/ha-panel-lovelace.ts
@@ -1,12 +1,7 @@
 import "@material/mwc-button";
 import deepFreeze from "deep-freeze";
-import {
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { property, state } from "lit/decorators";
 import { constructUrlCurrentPath } from "../../common/url/construct-url";
 import {
   addSearchParam,
@@ -53,11 +48,12 @@ class LovelacePanel extends LitElement {
   @property() public route?: Route;
 
   @property()
-  private _state?: "loading" | "loaded" | "error" | "yaml-editor" = "loading";
+  private _panelState?: "loading" | "loaded" | "error" | "yaml-editor" =
+    "loading";
 
-  @internalProperty() private _errorMsg?: string;
+  @state() private _errorMsg?: string;
 
-  @internalProperty() private lovelace?: Lovelace;
+  @state() private lovelace?: Lovelace;
 
   private _ignoreNextUpdateEvent = false;
 
@@ -86,7 +82,7 @@ class LovelacePanel extends LitElement {
     } else if (this.lovelace && this.lovelace.mode === "generated") {
       // When lovelace is generated, we re-generate each time a user goes
       // to the states panel to make sure new entities are shown.
-      this._state = "loading";
+      this._panelState = "loading";
       this._regenerateConfig();
     } else if (this._fetchConfigOnConnect) {
       // Config was changed when we were not at the lovelace panel
@@ -103,9 +99,9 @@ class LovelacePanel extends LitElement {
   }
 
   protected render(): TemplateResult | void {
-    const state = this._state!;
+    const panelState = this._panelState!;
 
-    if (state === "loaded") {
+    if (panelState === "loaded") {
       return html`
         <hui-root
           .hass=${this.hass}
@@ -117,7 +113,7 @@ class LovelacePanel extends LitElement {
       `;
     }
 
-    if (state === "error") {
+    if (panelState === "error") {
       return html`
         <hass-error-screen
           .hass=${this.hass}
@@ -131,7 +127,7 @@ class LovelacePanel extends LitElement {
       `;
     }
 
-    if (state === "yaml-editor") {
+    if (panelState === "yaml-editor") {
       return html`
         <hui-editor
           .hass=${this.hass}
@@ -174,7 +170,7 @@ class LovelacePanel extends LitElement {
       DEFAULT_STRATEGY
     );
     this._setLovelaceConfig(conf, undefined, "generated");
-    this._state = "loaded";
+    this._panelState = "loaded";
   }
 
   private async _subscribeUpdates() {
@@ -186,7 +182,7 @@ class LovelacePanel extends LitElement {
   }
 
   private _closeEditor() {
-    this._state = "loaded";
+    this._panelState = "loaded";
   }
 
   private _lovelaceChanged() {
@@ -272,7 +268,7 @@ class LovelacePanel extends LitElement {
       if (err.code !== "config_not_found") {
         // eslint-disable-next-line
         console.log(err);
-        this._state = "error";
+        this._panelState = "error";
         this._errorMsg = err.message;
         return;
       }
@@ -293,7 +289,8 @@ class LovelacePanel extends LitElement {
       }
     }
 
-    this._state = this._state === "yaml-editor" ? this._state : "loaded";
+    this._panelState =
+      this._panelState === "yaml-editor" ? this._panelState : "loaded";
     this._setLovelaceConfig(conf, rawConf, confMode);
   }
 
@@ -332,7 +329,7 @@ class LovelacePanel extends LitElement {
           editorLoaded = true;
           import("./hui-editor");
         }
-        this._state = "yaml-editor";
+        this._panelState = "yaml-editor";
       },
       setEditMode: (editMode: boolean) => {
         // If we use a strategy for dashboard, we cannot show the edit UI
diff --git a/src/panels/lovelace/header-footer/hui-buttons-header-footer.ts b/src/panels/lovelace/header-footer/hui-buttons-header-footer.ts
index 2d237225c4..7d47c8645d 100644
--- a/src/panels/lovelace/header-footer/hui-buttons-header-footer.ts
+++ b/src/panels/lovelace/header-footer/hui-buttons-header-footer.ts
@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { HomeAssistant } from "../../../types";
 import { processConfigEntities } from "../common/process-config-entities";
 import "../components/hui-buttons-base";
@@ -23,7 +17,7 @@ export class HuiButtonsHeaderFooter
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _configEntities?: EntityConfig[];
+  @state() private _configEntities?: EntityConfig[];
 
   public getCardSize(): number {
     return 3;
diff --git a/src/panels/lovelace/header-footer/hui-graph-header-footer.ts b/src/panels/lovelace/header-footer/hui-graph-header-footer.ts
index f86d2645c1..c95646ef64 100644
--- a/src/panels/lovelace/header-footer/hui-graph-header-footer.ts
+++ b/src/panels/lovelace/header-footer/hui-graph-header-footer.ts
@@ -1,17 +1,16 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import "../../../components/ha-circular-progress";
 import { fetchRecent } from "../../../data/history";
+import { computeDomain } from "../../../common/entity/compute_domain";
 import { HomeAssistant } from "../../../types";
 import { findEntities } from "../common/find-entities";
 import { coordinates } from "../common/graph/coordinates";
@@ -22,6 +21,7 @@ import { GraphHeaderFooterConfig } from "./types";
 
 const MINUTE = 60000;
 const HOUR = MINUTE * 60;
+const includeDomains = ["counter", "input_number", "number", "sensor"];
 
 @customElement("hui-graph-header-footer")
 export class HuiGraphHeaderFooter
@@ -37,7 +37,6 @@ export class HuiGraphHeaderFooter
     entities: string[],
     entitiesFallback: string[]
   ): GraphHeaderFooterConfig {
-    const includeDomains = ["sensor"];
     const maxEntities = 1;
     const entityFilter = (stateObj: HassEntity): boolean =>
       !isNaN(Number(stateObj.state)) &&
@@ -62,7 +61,7 @@ export class HuiGraphHeaderFooter
 
   @property() protected _config?: GraphHeaderFooterConfig;
 
-  @internalProperty() private _coordinates?: number[][];
+  @state() private _coordinates?: number[][];
 
   private _date?: Date;
 
@@ -75,7 +74,10 @@ export class HuiGraphHeaderFooter
   }
 
   public setConfig(config: GraphHeaderFooterConfig): void {
-    if (!config?.entity || config.entity.split(".")[0] !== "sensor") {
+    if (
+      !config?.entity ||
+      !includeDomains.includes(computeDomain(config.entity))
+    ) {
       throw new Error("Specify an entity from within the sensor domain");
     }
 
@@ -190,19 +192,28 @@ export class HuiGraphHeaderFooter
       this._stateHistory!.push(...stateHistory[0]);
     }
 
+    const limits =
+      this._config!.limits === undefined &&
+      this._stateHistory?.some(
+        (entity) => entity.attributes?.unit_of_measurement === "%"
+      )
+        ? { min: 0, max: 100 }
+        : this._config!.limits;
+
     this._coordinates =
       coordinates(
         this._stateHistory,
         this._config!.hours_to_show!,
         500,
-        this._config!.detail!
+        this._config!.detail!,
+        limits
       ) || [];
 
     this._date = endTime;
     this._fetching = false;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       ha-circular-progress {
         position: absolute;
diff --git a/src/panels/lovelace/header-footer/hui-picture-header-footer.ts b/src/panels/lovelace/header-footer/hui-picture-header-footer.ts
index 5a6ccfd350..3dcfd3b0f1 100644
--- a/src/panels/lovelace/header-footer/hui-picture-header-footer.ts
+++ b/src/panels/lovelace/header-footer/hui-picture-header-footer.ts
@@ -1,15 +1,14 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { ifDefined } from "lit-html/directives/if-defined";
+} from "lit";
+import { customElement, property } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
+import { ifDefined } from "lit/directives/if-defined";
 import "../../../components/ha-card";
 import { ActionHandlerEvent } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
@@ -80,7 +79,7 @@ export class HuiPictureHeaderFooter
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       img.clickable {
         cursor: pointer;
diff --git a/src/panels/lovelace/header-footer/types.ts b/src/panels/lovelace/header-footer/types.ts
index 2514649dda..00e058f759 100644
--- a/src/panels/lovelace/header-footer/types.ts
+++ b/src/panels/lovelace/header-footer/types.ts
@@ -15,6 +15,10 @@ export interface GraphHeaderFooterConfig extends LovelaceHeaderFooterConfig {
   entity: string;
   detail?: number;
   hours_to_show?: number;
+  limits?: {
+    min?: number;
+    max?: number;
+  };
 }
 
 export interface PictureHeaderFooterConfig extends LovelaceHeaderFooterConfig {
diff --git a/src/panels/lovelace/hui-editor.ts b/src/panels/lovelace/hui-editor.ts
index d0e6dc2004..f989ba7ac9 100644
--- a/src/panels/lovelace/hui-editor.ts
+++ b/src/panels/lovelace/hui-editor.ts
@@ -2,19 +2,17 @@ import { undoDepth } from "@codemirror/history";
 import "@material/mwc-button";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import { safeDump, safeLoad } from "js-yaml";
+import { dump, load } from "js-yaml";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { array, assert, object, optional, string, type } from "superstruct";
 import { computeRTL } from "../../common/util/compute_rtl";
 import { deepEqual } from "../../common/util/deep-equal";
@@ -47,9 +45,9 @@ class LovelaceFullConfigEditor extends LitElement {
 
   @property() public closeEditor?: () => void;
 
-  @internalProperty() private _saving?: boolean;
+  @state() private _saving?: boolean;
 
-  @internalProperty() private _changed?: boolean;
+  @state() private _changed?: boolean;
 
   protected render(): TemplateResult | void {
     return html`
@@ -106,7 +104,7 @@ class LovelaceFullConfigEditor extends LitElement {
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
-    this.yamlEditor.value = safeDump(this.lovelace!.rawConfig);
+    this.yamlEditor.value = dump(this.lovelace!.rawConfig);
   }
 
   protected updated(changedProps: PropertyValues) {
@@ -124,7 +122,7 @@ class LovelaceFullConfigEditor extends LitElement {
         ),
         action: {
           action: () => {
-            this.yamlEditor.value = safeDump(this.lovelace!.rawConfig);
+            this.yamlEditor.value = dump(this.lovelace!.rawConfig);
           },
           text: this.hass!.localize(
             "ui.panel.lovelace.editor.raw_editor.reload"
@@ -136,7 +134,7 @@ class LovelaceFullConfigEditor extends LitElement {
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
@@ -260,7 +258,7 @@ class LovelaceFullConfigEditor extends LitElement {
 
     let config: LovelaceConfig;
     try {
-      config = safeLoad(value);
+      config = load(value) as LovelaceConfig;
     } catch (err) {
       showAlertDialog(this, {
         text: this.hass.localize(
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index 199c979e66..f8f98751fd 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -24,16 +24,14 @@ import "@polymer/paper-tabs/paper-tab";
 import "@polymer/paper-tabs/paper-tabs";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
-  query,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+} from "lit";
+import { property, state, query } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -85,7 +83,7 @@ class HUIRoot extends LitElement {
 
   @property() public route?: { path: string; prefix: string };
 
-  @internalProperty() private _curView?: number | "hass-unused-entities";
+  @state() private _curView?: number | "hass-unused-entities";
 
   @query("ha-app-layout", true) private _appLayout!: haAppLayout;
 
@@ -682,21 +680,21 @@ class HUIRoot extends LitElement {
     if (!shouldHandleRequestSelectedEvent(ev)) {
       return;
     }
-    navigate(this, "/config/lovelace/dashboards");
+    navigate("/config/lovelace/dashboards");
   }
 
   private _handleManageResources(ev: CustomEvent<RequestSelectedDetail>): void {
     if (!shouldHandleRequestSelectedEvent(ev)) {
       return;
     }
-    navigate(this, "/config/lovelace/resources");
+    navigate("/config/lovelace/resources");
   }
 
   private _handleUnusedEntities(ev: CustomEvent<RequestSelectedDetail>): void {
     if (!shouldHandleRequestSelectedEvent(ev)) {
       return;
     }
-    navigate(this, `${this.route?.prefix}/hass-unused-entities`);
+    navigate(`${this.route?.prefix}/hass-unused-entities`);
   }
 
   private _showVoiceCommandDialog(): void {
@@ -726,14 +724,12 @@ class HUIRoot extends LitElement {
 
   private _navigateToView(path: string | number, replace?: boolean) {
     if (!this.lovelace!.editMode) {
-      navigate(this, `${this.route!.prefix}/${path}`, replace);
+      navigate(`${this.route!.prefix}/${path}`, { replace });
       return;
     }
-    navigate(
-      this,
-      `${this.route!.prefix}/${path}?${addSearchParam({ edit: "1" })}`,
-      replace
-    );
+    navigate(`${this.route!.prefix}/${path}?${addSearchParam({ edit: "1" })}`, {
+      replace,
+    });
   }
 
   private _editView() {
@@ -853,7 +849,7 @@ class HUIRoot extends LitElement {
     fireEvent(this, "iron-resize");
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/lovelace/special-rows/hui-attribute-row.ts b/src/panels/lovelace/special-rows/hui-attribute-row.ts
index ce215b0f2e..77b05f0803 100644
--- a/src/panels/lovelace/special-rows/hui-attribute-row.ts
+++ b/src/panels/lovelace/special-rows/hui-attribute-row.ts
@@ -1,17 +1,16 @@
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import checkValidDate from "../../../common/datetime/check_valid_date";
 import { formatNumber } from "../../../common/string/format_number";
 import { HomeAssistant } from "../../../types";
+import { formatAttributeValue } from "../../../util/hass-attributes-util";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import "../components/hui-generic-entity-row";
 import "../components/hui-timestamp-display";
@@ -22,7 +21,7 @@ import { AttributeRowConfig, LovelaceRow } from "../entity-rows/types";
 class HuiAttributeRow extends LitElement implements LovelaceRow {
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: AttributeRowConfig;
+  @state() private _config?: AttributeRowConfig;
 
   public setConfig(config: AttributeRowConfig): void {
     if (!config) {
@@ -74,14 +73,16 @@ class HuiAttributeRow extends LitElement implements LovelaceRow {
               ></hui-timestamp-display>`
             : typeof attribute === "number"
             ? formatNumber(attribute, this.hass.locale)
-            : attribute ?? "-"}
+            : attribute !== undefined
+            ? formatAttributeValue(this.hass, attribute)
+            : "-"}
           ${this._config.suffix}
         </div>
       </hui-generic-entity-row>
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       div {
         text-align: right;
diff --git a/src/panels/lovelace/special-rows/hui-button-row.ts b/src/panels/lovelace/special-rows/hui-button-row.ts
index 8622503329..c67887bee2 100644
--- a/src/panels/lovelace/special-rows/hui-button-row.ts
+++ b/src/panels/lovelace/special-rows/hui-button-row.ts
@@ -1,13 +1,6 @@
 import "@material/mwc-button";
-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 { DOMAINS_TOGGLE } from "../../../common/const";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
@@ -24,7 +17,7 @@ import { ButtonRowConfig, LovelaceRow } from "../entity-rows/types";
 export class HuiButtonRow extends LitElement implements LovelaceRow {
   public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: ButtonRowConfig;
+  @state() private _config?: ButtonRowConfig;
 
   public setConfig(config: ButtonRowConfig): void {
     if (!config) {
@@ -81,7 +74,7 @@ export class HuiButtonRow extends LitElement implements LovelaceRow {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: flex;
diff --git a/src/panels/lovelace/special-rows/hui-buttons-row.ts b/src/panels/lovelace/special-rows/hui-buttons-row.ts
index 58ed5f4a84..6dade3a362 100644
--- a/src/panels/lovelace/special-rows/hui-buttons-row.ts
+++ b/src/panels/lovelace/special-rows/hui-buttons-row.ts
@@ -1,11 +1,5 @@
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { DOMAINS_TOGGLE } from "../../../common/const";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { HomeAssistant } from "../../../types";
@@ -25,7 +19,7 @@ export class HuiButtonsRow extends LitElement implements LovelaceRow {
 
   @property({ attribute: false }) public hass?: HomeAssistant;
 
-  @internalProperty() private _configEntities?: EntityConfig[];
+  @state() private _configEntities?: EntityConfig[];
 
   public setConfig(config: ButtonsRowConfig): void {
     this._configEntities = processConfigEntities(config.entities).map(
diff --git a/src/panels/lovelace/special-rows/hui-call-service-row.ts b/src/panels/lovelace/special-rows/hui-call-service-row.ts
index 1bfed88f0f..5f461d5180 100644
--- a/src/panels/lovelace/special-rows/hui-call-service-row.ts
+++ b/src/panels/lovelace/special-rows/hui-call-service-row.ts
@@ -1,4 +1,4 @@
-import { customElement } from "lit-element";
+import { customElement } from "lit/decorators";
 import { CallServiceConfig } from "../entity-rows/types";
 import { HuiButtonRow } from "./hui-button-row";
 
diff --git a/src/panels/lovelace/special-rows/hui-cast-row.ts b/src/panels/lovelace/special-rows/hui-cast-row.ts
index 851b4430d0..e60e8e74a4 100644
--- a/src/panels/lovelace/special-rows/hui-cast-row.ts
+++ b/src/panels/lovelace/special-rows/hui-cast-row.ts
@@ -1,16 +1,14 @@
 import "@material/mwc-button/mwc-button";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { CastManager } from "../../../cast/cast_manager";
 import {
   castSendShowLovelaceView,
@@ -24,11 +22,11 @@ import { CastConfig, LovelaceRow } from "../entity-rows/types";
 class HuiCastRow extends LitElement implements LovelaceRow {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _config?: CastConfig;
+  @state() private _config?: CastConfig;
 
-  @internalProperty() private _castManager?: CastManager | null;
+  @state() private _castManager?: CastManager | null;
 
-  @internalProperty() private _noHTTPS = false;
+  @state() private _noHTTPS = false;
 
   public setConfig(config: CastConfig): void {
     if (!config || config.view === undefined || config.view === null) {
@@ -129,7 +127,7 @@ class HuiCastRow extends LitElement implements LovelaceRow {
     );
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: flex;
diff --git a/src/panels/lovelace/special-rows/hui-conditional-row.ts b/src/panels/lovelace/special-rows/hui-conditional-row.ts
index 65b04afdb3..9251a72bd7 100644
--- a/src/panels/lovelace/special-rows/hui-conditional-row.ts
+++ b/src/panels/lovelace/special-rows/hui-conditional-row.ts
@@ -1,4 +1,4 @@
-import { customElement } from "lit-element";
+import { customElement } from "lit/decorators";
 import { HuiConditionalBase } from "../components/hui-conditional-base";
 import { createRowElement } from "../create-element/create-row-element";
 import { ConditionalRowConfig, LovelaceRow } from "../entity-rows/types";
diff --git a/src/panels/lovelace/special-rows/hui-divider-row.ts b/src/panels/lovelace/special-rows/hui-divider-row.ts
index 9949fa53d1..7f7bc8f1ba 100644
--- a/src/panels/lovelace/special-rows/hui-divider-row.ts
+++ b/src/panels/lovelace/special-rows/hui-divider-row.ts
@@ -1,13 +1,6 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
-import { styleMap } from "lit-html/directives/style-map";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
 import { HomeAssistant } from "../../../types";
 import { DividerConfig, LovelaceRow } from "../entity-rows/types";
 
@@ -15,7 +8,7 @@ import { DividerConfig, LovelaceRow } from "../entity-rows/types";
 class HuiDividerRow extends LitElement implements LovelaceRow {
   public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: DividerConfig;
+  @state() private _config?: DividerConfig;
 
   public setConfig(config): void {
     if (!config) {
@@ -30,10 +23,12 @@ class HuiDividerRow extends LitElement implements LovelaceRow {
       return html``;
     }
 
-    return html`<div style=${styleMap(this._config.style)}></div>`;
+    return html`<div
+      style=${this._config.style ? styleMap(this._config.style) : ""}
+    ></div>`;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       div {
         height: 1px;
diff --git a/src/panels/lovelace/special-rows/hui-section-row.ts b/src/panels/lovelace/special-rows/hui-section-row.ts
index 4052921bb6..619d7a070b 100644
--- a/src/panels/lovelace/special-rows/hui-section-row.ts
+++ b/src/panels/lovelace/special-rows/hui-section-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 "../../../components/ha-icon";
 import { HomeAssistant } from "../../../types";
 import { LovelaceRow, SectionConfig } from "../entity-rows/types";
@@ -15,7 +8,7 @@ import { LovelaceRow, SectionConfig } from "../entity-rows/types";
 class HuiSectionRow extends LitElement implements LovelaceRow {
   public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: SectionConfig;
+  @state() private _config?: SectionConfig;
 
   public setConfig(config: SectionConfig): void {
     if (!config) {
@@ -38,7 +31,7 @@ class HuiSectionRow extends LitElement implements LovelaceRow {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       .label {
         color: var(--section-header-text-color, var(--primary-text-color));
diff --git a/src/panels/lovelace/special-rows/hui-text-row.ts b/src/panels/lovelace/special-rows/hui-text-row.ts
index 6f12ce2eec..a88c68a732 100644
--- a/src/panels/lovelace/special-rows/hui-text-row.ts
+++ b/src/panels/lovelace/special-rows/hui-text-row.ts
@@ -1,18 +1,11 @@
-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 "../../../components/ha-icon";
 import { LovelaceRow, TextConfig } from "../entity-rows/types";
 
 @customElement("hui-text-row")
 class HuiTextRow extends LitElement implements LovelaceRow {
-  @internalProperty() private _config?: TextConfig;
+  @state() private _config?: TextConfig;
 
   public setConfig(config: TextConfig): void {
     if (!config || !config.name || !config.text) {
@@ -34,7 +27,7 @@ class HuiTextRow extends LitElement implements LovelaceRow {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: flex;
diff --git a/src/panels/lovelace/special-rows/hui-weblink-row.ts b/src/panels/lovelace/special-rows/hui-weblink-row.ts
index 6cdf9cc983..9fe2a9aeed 100644
--- a/src/panels/lovelace/special-rows/hui-weblink-row.ts
+++ b/src/panels/lovelace/special-rows/hui-weblink-row.ts
@@ -1,13 +1,6 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  TemplateResult,
-} from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, state } from "lit/decorators";
+import { ifDefined } from "lit/directives/if-defined";
 import "../../../components/ha-icon";
 import { HomeAssistant } from "../../../types";
 import { LovelaceRow, WeblinkConfig } from "../entity-rows/types";
@@ -16,7 +9,7 @@ import { LovelaceRow, WeblinkConfig } from "../entity-rows/types";
 class HuiWeblinkRow extends LitElement implements LovelaceRow {
   public hass?: HomeAssistant;
 
-  @internalProperty() private _config?: WeblinkConfig;
+  @state() private _config?: WeblinkConfig;
 
   public setConfig(config: WeblinkConfig): void {
     if (!config || !config.url) {
@@ -48,7 +41,7 @@ class HuiWeblinkRow extends LitElement implements LovelaceRow {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       a {
         display: flex;
diff --git a/src/panels/lovelace/strategies/original-states-strategy.ts b/src/panels/lovelace/strategies/original-states-strategy.ts
index 8ecdd922d1..01694cdf78 100644
--- a/src/panels/lovelace/strategies/original-states-strategy.ts
+++ b/src/panels/lovelace/strategies/original-states-strategy.ts
@@ -5,8 +5,8 @@ import { subscribeDeviceRegistry } from "../../../data/device_registry";
 import { subscribeEntityRegistry } from "../../../data/entity_registry";
 import { generateDefaultViewConfig } from "../common/generate-lovelace-config";
 import {
-  LovelaceViewStrategy,
   LovelaceDashboardStrategy,
+  LovelaceViewStrategy,
 } from "./get-strategy";
 
 let subscribedRegistries = false;
@@ -83,10 +83,10 @@ export class OriginalStatesStrategy {
     info: Parameters<LovelaceDashboardStrategy["generateDashboard"]>[0]
   ): ReturnType<LovelaceDashboardStrategy["generateDashboard"]> {
     return {
+      title: info.hass.config.location_name,
       views: [
         {
           strategy: { type: "original-states" },
-          title: info.hass.config.location_name,
         },
       ],
     };
diff --git a/src/panels/lovelace/types.ts b/src/panels/lovelace/types.ts
index f9763be955..070c5ef761 100644
--- a/src/panels/lovelace/types.ts
+++ b/src/panels/lovelace/types.ts
@@ -3,7 +3,7 @@ import {
   LovelaceCardConfig,
   LovelaceConfig,
 } from "../../data/lovelace";
-import { FrontendTranslationData } from "../../data/translation";
+import { FrontendLocaleData } from "../../data/translation";
 import { Constructor, HomeAssistant } from "../../types";
 import { LovelaceRow, LovelaceRowConfig } from "./entity-rows/types";
 import { LovelaceHeaderFooterConfig } from "./header-footer/types";
@@ -23,7 +23,7 @@ export interface Lovelace {
   editMode: boolean;
   urlPath: string | null;
   mode: "generated" | "yaml" | "storage";
-  locale: FrontendTranslationData;
+  locale: FrontendLocaleData;
   enableFullEditMode: () => void;
   setEditMode: (editMode: boolean) => void;
   saveConfig: (newConfig: LovelaceConfig) => Promise<void>;
diff --git a/src/panels/lovelace/views/hui-masonry-view.ts b/src/panels/lovelace/views/hui-masonry-view.ts
index c29130e46a..908d32e818 100644
--- a/src/panels/lovelace/views/hui-masonry-view.ts
+++ b/src/panels/lovelace/views/hui-masonry-view.ts
@@ -1,15 +1,14 @@
 import { mdiPlus } from "@mdi/js";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+} from "lit";
+import { property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import { nextRender } from "../../../common/util/render-status";
@@ -24,8 +23,6 @@ import type { HuiErrorCard } from "../cards/hui-error-card";
 import { computeCardSize } from "../common/compute-card-size";
 import type { Lovelace, LovelaceBadge, LovelaceCard } from "../types";
 
-let editCodeLoaded = false;
-
 // Find column with < 5 size, else smallest column
 const getColumnIndex = (columnSizes: number[], size: number) => {
   let minIndex = 0;
@@ -61,7 +58,7 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
 
   @property({ attribute: false }) public badges: LovelaceBadge[] = [];
 
-  @internalProperty() private _columns?: number;
+  @state() private _columns?: number;
 
   private _createColumnsIteration = 0;
 
@@ -72,16 +69,26 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
     this.addEventListener("iron-resize", (ev: Event) => ev.stopPropagation());
   }
 
+  public connectedCallback() {
+    super.connectedCallback();
+    this._initMqls();
+  }
+
+  public disconnectedCallback() {
+    super.disconnectedCallback();
+    this._mqls?.forEach((mql) => {
+      mql.removeListener(this._updateColumns);
+    });
+    this._mqls = undefined;
+  }
+
   public setConfig(_config: LovelaceViewConfig): void {}
 
   protected render(): TemplateResult {
     return html`
-      <div
-        id="badges"
-        style=${this.badges.length > 0 ? "display: block" : "display: none"}
-      >
-        ${this.badges.map((badge) => html`${badge}`)}
-      </div>
+      ${this.badges.length > 0
+        ? html` <div class="badges">${this.badges}</div>`
+        : ""}
       <div id="columns"></div>
       ${this.lovelace?.editMode
         ? html`
@@ -102,31 +109,31 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
     `;
   }
 
-  protected firstUpdated(): void {
+  private _initMqls() {
     this._mqls = [300, 600, 900, 1200].map((width) => {
       const mql = window.matchMedia(`(min-width: ${width}px)`);
-      mql.addListener(() => this._updateColumns());
+      mql.addListener(this._updateColumns.bind(this));
       return mql;
     });
-    this._updateColumns();
   }
 
-  protected updated(changedProperties: PropertyValues): void {
-    super.updated(changedProperties);
-
-    if (this.lovelace?.editMode && !editCodeLoaded) {
-      editCodeLoaded = true;
-      import("./default-view-editable");
+  private get mqls(): MediaQueryList[] {
+    if (!this._mqls) {
+      this._initMqls();
     }
+    return this._mqls!;
+  }
+
+  public willUpdate(changedProperties: PropertyValues) {
+    super.willUpdate(changedProperties);
 
     if (changedProperties.has("hass")) {
-      const oldHass = changedProperties.get("hass") as HomeAssistant;
+      const oldHass = changedProperties.get("hass") as
+        | HomeAssistant
+        | undefined;
 
-      if (oldHass && this.hass!.dockedSidebar !== oldHass.dockedSidebar) {
+      if (this.hass!.dockedSidebar !== oldHass?.dockedSidebar) {
         this._updateColumns();
-      }
-
-      if (changedProperties.size === 1) {
         return;
       }
     }
@@ -134,16 +141,24 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
     if (changedProperties.has("narrow")) {
       this._updateColumns();
     }
+  }
+
+  protected updated(changedProperties: PropertyValues): void {
+    super.updated(changedProperties);
+
+    if (this.lovelace?.editMode) {
+      import("./default-view-editable");
+    }
 
     const oldLovelace = changedProperties.get("lovelace") as
       | Lovelace
       | undefined;
 
     if (
-      (changedProperties.has("lovelace") &&
-        (oldLovelace?.config !== this.lovelace?.config ||
-          oldLovelace?.editMode !== this.lovelace?.editMode)) ||
-      changedProperties.has("_columns")
+      changedProperties.has("lovelace") &&
+      oldLovelace &&
+      (oldLovelace.config !== this.lovelace?.config ||
+        oldLovelace.editMode !== this.lovelace?.editMode)
     ) {
       this._createColumns();
     }
@@ -153,6 +168,17 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
     fireEvent(this, "ll-create-card");
   }
 
+  private _createRootElement(columns: HTMLDivElement[]) {
+    const root = this.shadowRoot!.getElementById("columns") as HTMLDivElement;
+
+    // Remove old columns
+    while (root.lastChild) {
+      root.removeChild(root.lastChild);
+    }
+
+    columns.forEach((column) => root.appendChild(column));
+  }
+
   private async _createColumns() {
     if (!this._columns) {
       return;
@@ -160,12 +186,6 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
 
     this._createColumnsIteration++;
     const iteration = this._createColumnsIteration;
-    const root = this.shadowRoot!.getElementById("columns")!;
-
-    // Remove old columns
-    while (root.lastChild) {
-      root.removeChild(root.lastChild);
-    }
 
     // Track the total height of cards in a columns
     const columnSizes: number[] = [];
@@ -174,11 +194,18 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
     for (let i = 0; i < Math.min(this._columns, this.cards.length); i++) {
       const columnEl = document.createElement("div");
       columnEl.classList.add("column");
-      root.appendChild(columnEl);
       columnSizes.push(0);
       columnElements.push(columnEl);
     }
 
+    if (!this.hasUpdated) {
+      this.updateComplete.then(() => {
+        this._createRootElement(columnElements);
+      });
+    } else {
+      this._createRootElement(columnElements);
+    }
+
     let tillNextRender: Promise<unknown> | undefined;
     let start: Date | undefined;
 
@@ -245,22 +272,24 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
   }
 
   private _updateColumns() {
-    if (!this._mqls) {
-      return;
-    }
-    const matchColumns = this._mqls!.reduce(
+    const matchColumns = this.mqls.reduce(
       (cols, mql) => cols + Number(mql.matches),
       0
     );
     // Do -1 column if the menu is docked and open
-    this._columns = Math.max(
+    const newColumns = Math.max(
       1,
       matchColumns -
         Number(!this.narrow && this.hass!.dockedSidebar === "docked")
     );
+    if (newColumns === this._columns) {
+      return;
+    }
+    this._columns = newColumns;
+    this._createColumns();
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;
@@ -269,7 +298,7 @@ export class MasonryView extends LitElement implements LovelaceViewElement {
         box-sizing: border-box;
       }
 
-      #badges {
+      .badges {
         margin: 8px 16px;
         font-size: 85%;
         text-align: center;
diff --git a/src/panels/lovelace/views/hui-panel-view.ts b/src/panels/lovelace/views/hui-panel-view.ts
index 23898074aa..bc43c1fde1 100644
--- a/src/panels/lovelace/views/hui-panel-view.ts
+++ b/src/panels/lovelace/views/hui-panel-view.ts
@@ -1,15 +1,14 @@
 import { mdiPlus } from "@mdi/js";
 import {
   css,
-  CSSResult,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
+} from "lit";
+import { property, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import { computeRTL } from "../../../common/util/compute_rtl";
 import type {
   LovelaceViewConfig,
@@ -37,15 +36,12 @@ export class PanelView extends LitElement implements LovelaceViewElement {
     LovelaceCard | HuiErrorCard
   > = [];
 
-  @internalProperty() private _card?:
-    | LovelaceCard
-    | HuiWarning
-    | HuiCardOptions;
+  @state() private _card?: LovelaceCard | HuiWarning | HuiCardOptions;
 
   public setConfig(_config: LovelaceViewConfig): void {}
 
-  protected updated(changedProperties: PropertyValues): void {
-    super.updated(changedProperties);
+  public willUpdate(changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties);
 
     if (this.lovelace?.editMode && !editCodeLoaded) {
       editCodeLoaded = true;
@@ -138,7 +134,7 @@ export class PanelView extends LitElement implements LovelaceViewElement {
     }
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;
diff --git a/src/panels/lovelace/views/hui-view.ts b/src/panels/lovelace/views/hui-view.ts
index 938662e24a..e7f0943f3a 100644
--- a/src/panels/lovelace/views/hui-view.ts
+++ b/src/panels/lovelace/views/hui-view.ts
@@ -1,10 +1,5 @@
-import {
-  customElement,
-  internalProperty,
-  property,
-  PropertyValues,
-  UpdatingElement,
-} from "lit-element";
+import { PropertyValues, ReactiveElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import "../../../components/entity/ha-state-label-badge";
 import "../../../components/ha-svg-icon";
@@ -39,7 +34,7 @@ declare global {
 }
 
 @customElement("hui-view")
-export class HUIView extends UpdatingElement {
+export class HUIView extends ReactiveElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
   @property({ attribute: false }) public lovelace!: Lovelace;
@@ -48,9 +43,9 @@ export class HUIView extends UpdatingElement {
 
   @property({ type: Number }) public index!: number;
 
-  @internalProperty() private _cards: Array<LovelaceCard | HuiErrorCard> = [];
+  @state() private _cards: Array<LovelaceCard | HuiErrorCard> = [];
 
-  @internalProperty() private _badges: LovelaceBadge[] = [];
+  @state() private _badges: LovelaceBadge[] = [];
 
   private _layoutElementType?: string;
 
@@ -89,8 +84,12 @@ export class HUIView extends UpdatingElement {
     return element;
   }
 
-  protected updated(changedProperties: PropertyValues): void {
-    super.updated(changedProperties);
+  protected createRenderRoot() {
+    return this;
+  }
+
+  public willUpdate(changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties);
 
     /*
       We need to handle the following use cases:
@@ -113,8 +112,11 @@ export class HUIView extends UpdatingElement {
             oldLovelace.config.views[this.index]))
     ) {
       this._initializeConfig();
-      return;
     }
+  }
+
+  protected update(changedProperties) {
+    super.update(changedProperties);
 
     // If no layout element, we're still creating one
     if (this._layoutElement) {
@@ -150,7 +152,7 @@ export class HUIView extends UpdatingElement {
       changedProperties.has("hass") &&
       (!oldHass ||
         this.hass.themes !== oldHass.themes ||
-        this.hass.selectedTheme !== oldHass.selectedTheme)
+        this.hass.selectedThemeSettings !== oldHass.selectedThemeSettings)
     ) {
       applyThemesOnElement(this, this.hass.themes, this._viewConfigTheme);
     }
diff --git a/src/panels/map/ha-panel-map.js b/src/panels/map/ha-panel-map.js
index e42a8c233b..108c984765 100644
--- a/src/panels/map/ha-panel-map.js
+++ b/src/panels/map/ha-panel-map.js
@@ -94,7 +94,7 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
   }
 
   openZonesEditor() {
-    navigate(this, "/config/zone");
+    navigate("/config/zone");
   }
 
   fitMap() {
diff --git a/src/panels/media-browser/ha-panel-media-browser.ts b/src/panels/media-browser/ha-panel-media-browser.ts
index fd2cebb721..ebf1bfe90c 100644
--- a/src/panels/media-browser/ha-panel-media-browser.ts
+++ b/src/panels/media-browser/ha-panel-media-browser.ts
@@ -1,15 +1,8 @@
 import "@material/mwc-icon-button";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import {
-  css,
-  CSSResultArray,
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { LocalStorage } from "../../common/decorators/local-storage";
 import { HASSDomEvent } from "../../common/dom/fire_event";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
@@ -129,7 +122,7 @@ class PanelMediaBrowser extends LitElement {
     });
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/media-browser/hui-dialog-select-media-player.ts b/src/panels/media-browser/hui-dialog-select-media-player.ts
index 46865415da..42c094c286 100644
--- a/src/panels/media-browser/hui-dialog-select-media-player.ts
+++ b/src/panels/media-browser/hui-dialog-select-media-player.ts
@@ -2,15 +2,8 @@ import "@material/mwc-list/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-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 { fireEvent } from "../../common/dom/fire_event";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { compare } from "../../common/string/compare";
@@ -81,7 +74,7 @@ export class HuiDialogSelectMediaPlayer extends LitElement {
     this.closeDialog();
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/media-browser/hui-dialog-web-browser-play-media.ts b/src/panels/media-browser/hui-dialog-web-browser-play-media.ts
index 9a68172b11..18af9e77d7 100644
--- a/src/panels/media-browser/hui-dialog-web-browser-play-media.ts
+++ b/src/panels/media-browser/hui-dialog-web-browser-play-media.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 { fireEvent } from "../../common/dom/fire_event";
 import { createCloseHeading } from "../../components/ha-dialog";
 import "../../components/ha-hls-player";
@@ -91,7 +84,7 @@ export class HuiDialogWebBrowserPlayMedia extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/my/ha-panel-my.ts b/src/panels/my/ha-panel-my.ts
index 9beeb01c87..73effdcc7a 100644
--- a/src/panels/my/ha-panel-my.ts
+++ b/src/panels/my/ha-panel-my.ts
@@ -1,20 +1,15 @@
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-} from "lit-element";
 import { sanitizeUrl } from "@braintree/sanitize-url";
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { navigate } from "../../common/navigate";
-import { HomeAssistant, Route } from "../../types";
 import {
   createSearchParam,
   extractSearchParamsObject,
 } from "../../common/url/search-params";
-import "../../layouts/hass-error-screen";
-import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { domainToName } from "../../data/integration";
+import "../../layouts/hass-error-screen";
+import { HomeAssistant, Route } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 
 const REDIRECTS: Redirects = {
@@ -167,7 +162,7 @@ class HaPanelMy extends LitElement {
 
   @property() public route!: Route;
 
-  @internalProperty() public _error?: string;
+  @state() public _error?: string;
 
   connectedCallback() {
     super.connectedCallback();
@@ -178,11 +173,9 @@ class HaPanelMy extends LitElement {
         this._error = "no_supervisor";
         return;
       }
-      navigate(
-        this,
-        `/hassio/_my_redirect/${path}${window.location.search}`,
-        true
-      );
+      navigate(`/hassio/_my_redirect/${path}${window.location.search}`, {
+        replace: true,
+      });
       return;
     }
 
@@ -209,7 +202,7 @@ class HaPanelMy extends LitElement {
       return;
     }
 
-    navigate(this, url, true);
+    navigate(url, { replace: true });
   }
 
   protected render() {
diff --git a/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts b/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts
index bb3aa67587..5d29772daf 100644
--- a/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts
+++ b/src/panels/profile/dialog-ha-mfa-module-setup-flow.ts
@@ -1,15 +1,8 @@
 import "@material/mwc-button";
-import {
-  css,
-  CSSResult,
-  customElement,
-  internalProperty,
-  LitElement,
-  property,
-} from "lit-element";
-import { html, TemplateResult } from "lit-html";
-import { localizeKey } from "../../common/translations/localize";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import "../../components/ha-circular-progress";
+import "../../components/ha-dialog";
 import "../../components/ha-form/ha-form";
 import "../../components/ha-markdown";
 import {
@@ -18,7 +11,6 @@ import {
 } from "../../data/data_entry_flow";
 import { haStyleDialog } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
-import "../../components/ha-dialog";
 
 let instance = 0;
 
@@ -26,21 +18,21 @@ let instance = 0;
 class HaMfaModuleSetupFlow extends LitElement {
   @property() public hass!: HomeAssistant;
 
-  @internalProperty() private _dialogClosedCallback?: (params: {
+  @state() private _dialogClosedCallback?: (params: {
     flowFinished: boolean;
   }) => void;
 
-  @internalProperty() private _instance?: number;
+  @state() private _instance?: number;
 
-  @internalProperty() private _loading = false;
+  @state() private _loading = false;
 
-  @internalProperty() private _opened = false;
+  @state() private _opened = false;
 
-  @internalProperty() private _stepData: any = {};
+  @state() private _stepData: any = {};
 
-  @internalProperty() private _step?: DataEntryFlowStep;
+  @state() private _step?: DataEntryFlowStep;
 
-  @internalProperty() private _errorMessage?: string;
+  @state() private _errorMessage?: string;
 
   public showDialog({ continueFlowId, mfaModuleId, dialogClosedCallback }) {
     this._instance = instance++;
@@ -82,7 +74,7 @@ class HaMfaModuleSetupFlow extends LitElement {
       <ha-dialog
         open
         .heading=${this._computeStepTitle()}
-        @closing=${this.closeDialog}
+        @closed=${this.closeDialog}
       >
         <div>
           ${this._errorMessage
@@ -112,8 +104,7 @@ class HaMfaModuleSetupFlow extends LitElement {
                 ? html` <ha-markdown
                       allowsvg
                       breaks
-                      .content=${localizeKey(
-                        this.hass.localize,
+                      .content=${this.hass.localize(
                         `component.auth.mfa_setup.${this._step!.handler}.step.${
                           (this._step! as DataEntryFlowStepForm).step_id
                         }.description`,
@@ -151,7 +142,7 @@ class HaMfaModuleSetupFlow extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
diff --git a/src/panels/profile/ha-advanced-mode-row.ts b/src/panels/profile/ha-advanced-mode-row.ts
index 4f5744e52a..ce0c9ec50f 100644
--- a/src/panels/profile/ha-advanced-mode-row.ts
+++ b/src/panels/profile/ha-advanced-mode-row.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 "../../components/ha-card";
 import "../../components/ha-settings-row";
 import "../../components/ha-switch";
@@ -55,7 +48,7 @@ class AdvancedModeRow extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       a {
         color: var(--primary-color);
diff --git a/src/panels/profile/ha-change-password-card.ts b/src/panels/profile/ha-change-password-card.ts
index a54cb4eff3..6b06b70365 100644
--- a/src/panels/profile/ha-change-password-card.ts
+++ b/src/panels/profile/ha-change-password-card.ts
@@ -3,15 +3,13 @@ import "@polymer/paper-dialog/paper-dialog";
 import "@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 "../../components/ha-card";
 import "../../components/ha-circular-progress";
 import { haStyle } from "../../resources/styles";
@@ -21,17 +19,17 @@ import type { HomeAssistant } from "../../types";
 class HaChangePasswordCard extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _loading = false;
+  @state() private _loading = false;
 
-  @internalProperty() private _statusMsg?: string;
+  @state() private _statusMsg?: string;
 
-  @internalProperty() private _errorMsg?: string;
+  @state() private _errorMsg?: string;
 
-  @internalProperty() private _currentPassword?: string;
+  @state() private _currentPassword?: string;
 
-  @internalProperty() private _password?: string;
+  @state() private _password?: string;
 
-  @internalProperty() private _passwordConfirm?: string;
+  @state() private _passwordConfirm?: string;
 
   protected render(): TemplateResult {
     return html`
@@ -170,7 +168,7 @@ class HaChangePasswordCard extends LitElement {
     this._passwordConfirm = undefined;
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/profile/ha-enable-shortcuts-row.ts b/src/panels/profile/ha-enable-shortcuts-row.ts
index cdec57a03b..429c439c69 100644
--- a/src/panels/profile/ha-enable-shortcuts-row.ts
+++ b/src/panels/profile/ha-enable-shortcuts-row.ts
@@ -1,10 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-settings-row";
 import "../../components/ha-switch";
diff --git a/src/panels/profile/ha-force-narrow-row.ts b/src/panels/profile/ha-force-narrow-row.ts
index 49d70ef57f..771f49c7d9 100644
--- a/src/panels/profile/ha-force-narrow-row.ts
+++ b/src/panels/profile/ha-force-narrow-row.ts
@@ -1,10 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-settings-row";
 import "../../components/ha-switch";
diff --git a/src/panels/profile/ha-long-lived-access-tokens-card.ts b/src/panels/profile/ha-long-lived-access-tokens-card.ts
index 99ea0bd7bd..789a79b206 100644
--- a/src/panels/profile/ha-long-lived-access-tokens-card.ts
+++ b/src/panels/profile/ha-long-lived-access-tokens-card.ts
@@ -1,15 +1,8 @@
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiDelete } from "@mdi/js";
-import {
-  css,
-  CSSResultArray,
-  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 relativeTime from "../../common/datetime/relative_time";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -173,7 +166,7 @@ class HaLongLivedTokens extends LitElement {
     }
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/profile/ha-mfa-modules-card.ts b/src/panels/profile/ha-mfa-modules-card.ts
index f5680cb127..620f1f5ed1 100644
--- a/src/panels/profile/ha-mfa-modules-card.ts
+++ b/src/panels/profile/ha-mfa-modules-card.ts
@@ -1,15 +1,8 @@
 import "@material/mwc-button";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-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 { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-card";
 import { showConfirmationDialog } from "../../dialogs/generic/show-dialog-box";
@@ -48,7 +41,7 @@ class HaMfaModulesCard extends LitElement {
     `;
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       mwc-button {
         margin-right: -0.57em;
diff --git a/src/panels/profile/ha-panel-profile.ts b/src/panels/profile/ha-panel-profile.ts
index cca363678c..4d9b82c42c 100644
--- a/src/panels/profile/ha-panel-profile.ts
+++ b/src/panels/profile/ha-panel-profile.ts
@@ -4,15 +4,8 @@ import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
-import {
-  css,
-  CSSResultArray,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-card";
 import "../../components/ha-menu-button";
@@ -36,6 +29,7 @@ import "./ha-pick-dashboard-row";
 import "./ha-pick-language-row";
 import "./ha-pick-number-format-row";
 import "./ha-pick-theme-row";
+import "./ha-pick-time-format-row";
 import "./ha-push-notifications-row";
 import "./ha-refresh-tokens-card";
 import "./ha-set-suspend-row";
@@ -46,9 +40,9 @@ class HaPanelProfile extends LitElement {
 
   @property({ type: Boolean }) public narrow!: boolean;
 
-  @internalProperty() private _refreshTokens?: RefreshToken[];
+  @state() private _refreshTokens?: RefreshToken[];
 
-  @internalProperty() private _coreUserData?: CoreFrontendUserData | null;
+  @state() private _coreUserData?: CoreFrontendUserData | null;
 
   private _unsubCoreData?: UnsubscribeFunc;
 
@@ -87,11 +81,9 @@ class HaPanelProfile extends LitElement {
         <div class="content">
           <ha-card .header=${this.hass.user!.name}>
             <div class="card-content">
-              ${this.hass.localize(
-                "ui.panel.profile.current_user",
-                "fullName",
-                this.hass.user!.name
-              )}
+              ${this.hass.localize("ui.panel.profile.current_user", {
+                fullName: this.hass.user!.name,
+              })}
               ${this.hass.user!.is_owner
                 ? this.hass.localize("ui.panel.profile.is_owner")
                 : ""}
@@ -105,6 +97,10 @@ class HaPanelProfile extends LitElement {
               .narrow=${this.narrow}
               .hass=${this.hass}
             ></ha-pick-number-format-row>
+            <ha-pick-time-format-row
+              .narrow=${this.narrow}
+              .hass=${this.hass}
+            ></ha-pick-time-format-row>
             <ha-pick-theme-row
               .narrow=${this.narrow}
               .hass=${this.hass}
@@ -228,7 +224,7 @@ class HaPanelProfile extends LitElement {
     });
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/profile/ha-pick-dashboard-row.ts b/src/panels/profile/ha-pick-dashboard-row.ts
index ba749ee6ea..482ce1969b 100644
--- a/src/panels/profile/ha-pick-dashboard-row.ts
+++ b/src/panels/profile/ha-pick-dashboard-row.ts
@@ -1,14 +1,7 @@
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-import {
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import "../../components/ha-paper-dropdown-menu";
 import "../../components/ha-settings-row";
 import { fetchDashboards, LovelaceDashboard } from "../../data/lovelace";
@@ -21,7 +14,7 @@ class HaPickDashboardRow extends LitElement {
 
   @property() public narrow!: boolean;
 
-  @internalProperty() private _dashboards: LovelaceDashboard[] = [];
+  @state() private _dashboards: LovelaceDashboard[] = [];
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
diff --git a/src/panels/profile/ha-pick-number-format-row.ts b/src/panels/profile/ha-pick-number-format-row.ts
index 07dd738231..734780538d 100644
--- a/src/panels/profile/ha-pick-number-format-row.ts
+++ b/src/panels/profile/ha-pick-number-format-row.ts
@@ -1,19 +1,14 @@
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-import {
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
+import { formatNumber } from "../../common/string/format_number";
 import "../../components/ha-card";
 import "../../components/ha-paper-dropdown-menu";
-import { HomeAssistant } from "../../types";
 import "../../components/ha-settings-row";
-import { formatNumber } from "../../common/string/format_number";
 import { NumberFormat } from "../../data/translation";
-import { fireEvent } from "../../common/dom/fire_event";
+import { HomeAssistant } from "../../types";
 
 @customElement("ha-pick-number-format-row")
 class NumberFormatRow extends LitElement {
@@ -45,7 +40,7 @@ class NumberFormatRow extends LitElement {
           >
             ${Object.values(NumberFormat).map((format) => {
               const formattedNumber = formatNumber(1234567.89, {
-                language: this.hass.locale.language,
+                ...this.hass.locale,
                 number_format: format,
               });
               const value = this.hass.localize(
@@ -53,7 +48,7 @@ class NumberFormatRow extends LitElement {
               );
               const twoLine = value.slice(value.length - 2) !== "89"; // Display explicit number formats on one line
               return html`
-                <paper-item .format=${format}>
+                <paper-item .format=${format} .label=${value}>
                   <paper-item-body ?two-line=${twoLine}>
                     <div>${value}</div>
                     ${twoLine
diff --git a/src/panels/profile/ha-pick-theme-row.ts b/src/panels/profile/ha-pick-theme-row.ts
index aeb3f85324..32c89b373d 100644
--- a/src/panels/profile/ha-pick-theme-row.ts
+++ b/src/panels/profile/ha-pick-theme-row.ts
@@ -4,20 +4,24 @@ import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
-  CSSResult,
-  customElement,
-  internalProperty,
+  CSSResultGroup,
+  html,
   LitElement,
-  property,
   PropertyValues,
-} from "lit-element";
-import { html, TemplateResult } from "lit-html";
+  TemplateResult,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-formfield";
 import "../../components/ha-paper-dropdown-menu";
 import "../../components/ha-radio";
 import type { HaRadio } from "../../components/ha-radio";
 import "../../components/ha-settings-row";
+import { Theme } from "../../data/ws-themes";
+import {
+  DEFAULT_PRIMARY_COLOR,
+  DEFAULT_ACCENT_COLOR,
+} from "../../resources/ha-style";
 import { HomeAssistant } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
 
@@ -27,15 +31,20 @@ export class HaPickThemeRow extends LitElement {
 
   @property({ type: Boolean }) public narrow!: boolean;
 
-  @internalProperty() _themes: string[] = [];
+  @state() _themeNames: string[] = [];
 
-  @internalProperty() _selectedTheme = 0;
+  @state() _selectedThemeIndex = 0;
+
+  @state() _selectedTheme?: Theme;
 
   protected render(): TemplateResult {
     const hasThemes =
-      this.hass.themes?.themes && Object.keys(this.hass.themes.themes).length;
+      this.hass.themes.themes && Object.keys(this.hass.themes.themes).length;
     const curTheme =
-      this.hass!.selectedTheme?.theme || this.hass!.themes.default_theme;
+      this.hass.selectedThemeSettings?.theme || this.hass.themes.default_theme;
+
+    const themeSettings = this.hass.selectedThemeSettings;
+
     return html`
       <ha-settings-row .narrow=${this.narrow}>
         <span slot="heading"
@@ -47,7 +56,7 @@ export class HaPickThemeRow extends LitElement {
             : ""}
           <a
             href="${documentationUrl(
-              this.hass!,
+              this.hass,
               "/integrations/frontend/#defining-themes"
             )}"
             target="_blank"
@@ -63,19 +72,20 @@ export class HaPickThemeRow extends LitElement {
         >
           <paper-listbox
             slot="dropdown-content"
-            .selected=${this._selectedTheme}
+            .selected=${this._selectedThemeIndex}
             @iron-select=${this._handleThemeSelection}
           >
-            ${this._themes.map(
+            ${this._themeNames.map(
               (theme) => html`<paper-item .theme=${theme}>${theme}</paper-item>`
             )}
           </paper-listbox>
         </ha-paper-dropdown-menu>
       </ha-settings-row>
-      ${curTheme === "default"
+      ${curTheme === "default" ||
+      (this._selectedTheme && this._supportsModeSelection(this._selectedTheme))
         ? html` <div class="inputs">
             <ha-formfield
-              .label=${this.hass!.localize(
+              .label=${this.hass.localize(
                 "ui.panel.profile.themes.dark_mode.auto"
               )}
             >
@@ -83,11 +93,11 @@ export class HaPickThemeRow extends LitElement {
                 @change=${this._handleDarkMode}
                 name="dark_mode"
                 value="auto"
-                ?checked=${this.hass.selectedTheme?.dark === undefined}
+                ?checked=${themeSettings?.dark === undefined}
               ></ha-radio>
             </ha-formfield>
             <ha-formfield
-              .label=${this.hass!.localize(
+              .label=${this.hass.localize(
                 "ui.panel.profile.themes.dark_mode.light"
               )}
             >
@@ -95,12 +105,12 @@ export class HaPickThemeRow extends LitElement {
                 @change=${this._handleDarkMode}
                 name="dark_mode"
                 value="light"
-                ?checked=${this.hass.selectedTheme?.dark === false}
+                ?checked=${themeSettings?.dark === false}
               >
               </ha-radio>
             </ha-formfield>
             <ha-formfield
-              .label=${this.hass!.localize(
+              .label=${this.hass.localize(
                 "ui.panel.profile.themes.dark_mode.dark"
               )}
             >
@@ -108,36 +118,38 @@ export class HaPickThemeRow extends LitElement {
                 @change=${this._handleDarkMode}
                 name="dark_mode"
                 value="dark"
-                ?checked=${this.hass.selectedTheme?.dark === true}
+                ?checked=${themeSettings?.dark === true}
               >
               </ha-radio>
             </ha-formfield>
-            <div class="color-pickers">
-              <paper-input
-                .value=${this.hass!.selectedTheme?.primaryColor || "#03a9f4"}
-                type="color"
-                .label=${this.hass!.localize(
-                  "ui.panel.profile.themes.primary_color"
-                )}
-                .name=${"primaryColor"}
-                @change=${this._handleColorChange}
-              ></paper-input>
-              <paper-input
-                .value=${this.hass!.selectedTheme?.accentColor || "#ff9800"}
-                type="color"
-                .label=${this.hass!.localize(
-                  "ui.panel.profile.themes.accent_color"
-                )}
-                .name=${"accentColor"}
-                @change=${this._handleColorChange}
-              ></paper-input>
-              ${this.hass!.selectedTheme?.primaryColor ||
-              this.hass!.selectedTheme?.accentColor
-                ? html` <mwc-button @click=${this._resetColors}>
-                    ${this.hass!.localize("ui.panel.profile.themes.reset")}
-                  </mwc-button>`
-                : ""}
-            </div>
+            ${curTheme === "default"
+              ? html` <div class="color-pickers">
+                  <paper-input
+                    .value=${themeSettings?.primaryColor ||
+                    DEFAULT_PRIMARY_COLOR}
+                    type="color"
+                    .label=${this.hass.localize(
+                      "ui.panel.profile.themes.primary_color"
+                    )}
+                    .name=${"primaryColor"}
+                    @change=${this._handleColorChange}
+                  ></paper-input>
+                  <paper-input
+                    .value=${themeSettings?.accentColor || DEFAULT_ACCENT_COLOR}
+                    type="color"
+                    .label=${this.hass.localize(
+                      "ui.panel.profile.themes.accent_color"
+                    )}
+                    .name=${"accentColor"}
+                    @change=${this._handleColorChange}
+                  ></paper-input>
+                  ${themeSettings?.primaryColor || themeSettings?.accentColor
+                    ? html` <mwc-button @click=${this._resetColors}>
+                        ${this.hass.localize("ui.panel.profile.themes.reset")}
+                      </mwc-button>`
+                    : ""}
+                </div>`
+              : ""}
           </div>`
         : ""}
     `;
@@ -147,27 +159,31 @@ export class HaPickThemeRow extends LitElement {
     const oldHass = changedProperties.get("hass") as undefined | HomeAssistant;
     const themesChanged =
       changedProperties.has("hass") &&
-      (!oldHass || oldHass.themes?.themes !== this.hass.themes?.themes);
+      (!oldHass || oldHass.themes.themes !== this.hass.themes.themes);
     const selectedThemeChanged =
       changedProperties.has("hass") &&
-      (!oldHass || oldHass.selectedTheme !== this.hass.selectedTheme);
+      (!oldHass ||
+        oldHass.selectedThemeSettings !== this.hass.selectedThemeSettings);
 
     if (themesChanged) {
-      this._themes = ["Backend-selected", "default"].concat(
+      this._themeNames = ["Backend-selected", "default"].concat(
         Object.keys(this.hass.themes.themes).sort()
       );
     }
 
     if (selectedThemeChanged) {
       if (
-        this.hass.selectedTheme &&
-        this._themes.indexOf(this.hass.selectedTheme.theme) > 0
+        this.hass.selectedThemeSettings &&
+        this._themeNames.indexOf(this.hass.selectedThemeSettings.theme) > 0
       ) {
-        this._selectedTheme = this._themes.indexOf(
-          this.hass.selectedTheme.theme
+        this._selectedThemeIndex = this._themeNames.indexOf(
+          this.hass.selectedThemeSettings.theme
         );
-      } else if (!this.hass.selectedTheme) {
-        this._selectedTheme = 0;
+        this._selectedTheme = this.hass.themes.themes[
+          this.hass.selectedThemeSettings.theme
+        ];
+      } else if (!this.hass.selectedThemeSettings) {
+        this._selectedThemeIndex = 0;
       }
     }
   }
@@ -184,6 +200,10 @@ export class HaPickThemeRow extends LitElement {
     });
   }
 
+  private _supportsModeSelection(theme: Theme): boolean {
+    return theme.modes?.light !== undefined && theme.modes?.dark !== undefined;
+  }
+
   private _handleDarkMode(ev: CustomEvent) {
     let dark: boolean | undefined;
     switch ((ev.target as HaRadio).value) {
@@ -200,15 +220,23 @@ export class HaPickThemeRow extends LitElement {
   private _handleThemeSelection(ev: CustomEvent) {
     const theme = ev.detail.item.theme;
     if (theme === "Backend-selected") {
-      if (this.hass.selectedTheme?.theme) {
-        fireEvent(this, "settheme", { theme: "" });
+      if (this.hass.selectedThemeSettings?.theme) {
+        fireEvent(this, "settheme", {
+          theme: "",
+          primaryColor: undefined,
+          accentColor: undefined,
+        });
       }
       return;
     }
-    fireEvent(this, "settheme", { theme });
+    fireEvent(this, "settheme", {
+      theme,
+      primaryColor: undefined,
+      accentColor: undefined,
+    });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       a {
         color: var(--primary-color);
diff --git a/src/panels/profile/ha-pick-time-format-row.ts b/src/panels/profile/ha-pick-time-format-row.ts
new file mode 100644
index 0000000000..686c186d17
--- /dev/null
+++ b/src/panels/profile/ha-pick-time-format-row.ts
@@ -0,0 +1,72 @@
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-listbox/paper-listbox";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import { formatTime } from "../../common/datetime/format_time";
+import { fireEvent } from "../../common/dom/fire_event";
+import "../../components/ha-card";
+import "../../components/ha-paper-dropdown-menu";
+import "../../components/ha-settings-row";
+import { TimeFormat } from "../../data/translation";
+import { HomeAssistant } from "../../types";
+
+@customElement("ha-pick-time-format-row")
+class TimeFormatRow extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public narrow!: boolean;
+
+  protected render(): TemplateResult {
+    const date = new Date();
+    return html`
+      <ha-settings-row .narrow=${this.narrow}>
+        <span slot="heading">
+          ${this.hass.localize("ui.panel.profile.time_format.header")}
+        </span>
+        <span slot="description">
+          ${this.hass.localize("ui.panel.profile.time_format.description")}
+        </span>
+        <ha-paper-dropdown-menu
+          .label=${this.hass.localize(
+            "ui.panel.profile.time_format.dropdown_label"
+          )}
+          dynamic-align
+          .disabled=${this.hass.locale === undefined}
+        >
+          <paper-listbox
+            slot="dropdown-content"
+            .selected=${this.hass.locale.time_format}
+            @iron-select=${this._handleFormatSelection}
+            attr-for-selected="format"
+          >
+            ${Object.values(TimeFormat).map((format) => {
+              const formattedTime = formatTime(date, {
+                ...this.hass.locale,
+                time_format: format,
+              });
+              const value = this.hass.localize(
+                `ui.panel.profile.time_format.formats.${format}`
+              );
+              return html` <paper-item .format=${format} .label=${value}>
+                <paper-item-body two-line>
+                  <div>${value}</div>
+                  <div secondary>${formattedTime}</div>
+                </paper-item-body>
+              </paper-item>`;
+            })}
+          </paper-listbox>
+        </ha-paper-dropdown-menu>
+      </ha-settings-row>
+    `;
+  }
+
+  private async _handleFormatSelection(ev: CustomEvent) {
+    fireEvent(this, "hass-time-format-select", ev.detail.item.format);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-pick-time-format-row": TimeFormatRow;
+  }
+}
diff --git a/src/panels/profile/ha-refresh-tokens-card.ts b/src/panels/profile/ha-refresh-tokens-card.ts
index 044dfa630d..7c75b3f15b 100644
--- a/src/panels/profile/ha-refresh-tokens-card.ts
+++ b/src/panels/profile/ha-refresh-tokens-card.ts
@@ -1,15 +1,8 @@
 import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiDelete } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
-import {
-  css,
-  CSSResultArray,
-  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 relativeTime from "../../common/datetime/relative_time";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -62,28 +55,31 @@ class HaRefreshTokens extends LitElement {
                 <span slot="heading"
                   >${this.hass.localize(
                     "ui.panel.profile.refresh_tokens.token_title",
-                    "clientId",
-                    token.client_id
+                    { clientId: token.client_id }
                   )}
                 </span>
                 <div slot="description">
                   ${this.hass.localize(
                     "ui.panel.profile.refresh_tokens.created_at",
-                    "date",
-                    relativeTime(new Date(token.created_at), this.hass.localize)
+                    {
+                      date: relativeTime(
+                        new Date(token.created_at),
+                        this.hass.localize
+                      ),
+                    }
                   )}
                 </div>
                 <div slot="description">
                   ${token.last_used_at
                     ? this.hass.localize(
                         "ui.panel.profile.refresh_tokens.last_used",
-                        "date",
-                        relativeTime(
-                          new Date(token.last_used_at),
-                          this.hass.localize
-                        ),
-                        "location",
-                        token.last_used_ip
+                        {
+                          date: relativeTime(
+                            new Date(token.last_used_at),
+                            this.hass.localize
+                          ),
+                          location: token.last_used_ip,
+                        }
                       )
                     : this.hass.localize(
                         "ui.panel.profile.refresh_tokens.not_used"
@@ -119,8 +115,7 @@ class HaRefreshTokens extends LitElement {
       !(await showConfirmationDialog(this, {
         text: this.hass.localize(
           "ui.panel.profile.refresh_tokens.confirm_delete",
-          "name",
-          token.client_name || token.client_id
+          { name: token.client_name || token.client_id }
         ),
       }))
     ) {
@@ -142,7 +137,7 @@ class HaRefreshTokens extends LitElement {
     }
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/panels/profile/ha-set-suspend-row.ts b/src/panels/profile/ha-set-suspend-row.ts
index 9874590295..47a4d7f431 100644
--- a/src/panels/profile/ha-set-suspend-row.ts
+++ b/src/panels/profile/ha-set-suspend-row.ts
@@ -1,10 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent, HASSDomEvent } from "../../common/dom/fire_event";
 import "../../components/ha-settings-row";
 import "../../components/ha-switch";
diff --git a/src/panels/profile/ha-set-vibrate-row.ts b/src/panels/profile/ha-set-vibrate-row.ts
index d0e7701dfb..184b9b096f 100644
--- a/src/panels/profile/ha-set-vibrate-row.ts
+++ b/src/panels/profile/ha-set-vibrate-row.ts
@@ -1,10 +1,5 @@
-import {
-  customElement,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-settings-row";
 import "../../components/ha-switch";
diff --git a/src/panels/shopping-list/ha-panel-shopping-list.ts b/src/panels/shopping-list/ha-panel-shopping-list.ts
index dabeae5082..f46d52dcd2 100644
--- a/src/panels/shopping-list/ha-panel-shopping-list.ts
+++ b/src/panels/shopping-list/ha-panel-shopping-list.ts
@@ -3,15 +3,13 @@ import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import {
   css,
-  CSSResultArray,
-  customElement,
+  CSSResultGroup,
   html,
-  internalProperty,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import "../../components/ha-menu-button";
@@ -29,7 +27,7 @@ class PanelShoppingList extends LitElement {
 
   @property({ type: Boolean, reflect: true }) public narrow!: boolean;
 
-  @internalProperty() private _card!: LovelaceCard | HuiErrorCard;
+  @state() private _card!: LovelaceCard | HuiErrorCard;
 
   private _conversation = memoizeOne((_components) =>
     isComponentLoaded(this.hass, "conversation")
@@ -85,7 +83,7 @@ class PanelShoppingList extends LitElement {
     showVoiceCommandDialog(this);
   }
 
-  static get styles(): CSSResultArray {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/resources/codemirror.ts b/src/resources/codemirror.ts
index 0c52dd5446..b487cc5a31 100644
--- a/src/resources/codemirror.ts
+++ b/src/resources/codemirror.ts
@@ -1,24 +1,24 @@
+import { indentLess, indentMore } from "@codemirror/commands";
 import { HighlightStyle, tags } from "@codemirror/highlight";
-import { EditorView, KeyBinding } from "@codemirror/view";
-import { StreamLanguage } from "@codemirror/stream-parser";
 import { jinja2 } from "@codemirror/legacy-modes/mode/jinja2";
 import { yaml } from "@codemirror/legacy-modes/mode/yaml";
-import { indentLess, indentMore } from "@codemirror/commands";
 import { Compartment } from "@codemirror/state";
+import { StreamLanguage } from "@codemirror/stream-parser";
+import { EditorView, KeyBinding } from "@codemirror/view";
 
-export {
-  keymap,
-  highlightActiveLine,
-  drawSelection,
-  EditorView,
-} from "@codemirror/view";
-export { EditorState, Prec } from "@codemirror/state";
 export { defaultKeymap } from "@codemirror/commands";
 export { lineNumbers } from "@codemirror/gutter";
-export { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
+export { HighlightStyle, tags } from "@codemirror/highlight";
 export { history, historyKeymap } from "@codemirror/history";
 export { rectangularSelection } from "@codemirror/rectangular-selection";
-export { HighlightStyle, tags } from "@codemirror/highlight";
+export { highlightSelectionMatches, searchKeymap } from "@codemirror/search";
+export { EditorState, Prec } from "@codemirror/state";
+export {
+  drawSelection,
+  EditorView,
+  highlightActiveLine,
+  keymap,
+} from "@codemirror/view";
 
 export const langs = {
   jinja2: StreamLanguage.define(jinja2),
diff --git a/src/resources/compatibility.ts b/src/resources/compatibility.ts
index 8cec919666..f1ae18e990 100644
--- a/src/resources/compatibility.ts
+++ b/src/resources/compatibility.ts
@@ -1,5 +1,6 @@
 // For localize
 import "@formatjs/intl-getcanonicallocales/polyfill";
+import "lit/polyfill-support";
 import "core-js";
 // To use comlink under ES5
 import "proxy-polyfill";
diff --git a/src/resources/custom-card-support.ts b/src/resources/custom-card-support.ts
index 2e33e53552..dbf420cd7d 100644
--- a/src/resources/custom-card-support.ts
+++ b/src/resources/custom-card-support.ts
@@ -1,4 +1,4 @@
-import { css, html, LitElement } from "lit-element";
+import { css, html, LitElement } from "lit";
 
 (LitElement.prototype as any).html = html;
 (LitElement.prototype as any).css = css;
diff --git a/src/resources/ha-sortable-style.ts b/src/resources/ha-sortable-style.ts
index 5979f986e2..8c7a5ded7c 100644
--- a/src/resources/ha-sortable-style.ts
+++ b/src/resources/ha-sortable-style.ts
@@ -1,4 +1,4 @@
-import { css } from "lit-element";
+import { css } from "lit";
 
 export const sortableStyles = css`
   #sortable a:nth-of-type(2n) paper-icon-item {
diff --git a/src/resources/ha-style.ts b/src/resources/ha-style.ts
index 1e308b9aad..f3e9dcb757 100644
--- a/src/resources/ha-style.ts
+++ b/src/resources/ha-style.ts
@@ -2,6 +2,9 @@ import "@polymer/paper-styles/paper-styles";
 import "@polymer/polymer/lib/elements/custom-style";
 import { derivedStyles } from "./styles";
 
+export const DEFAULT_PRIMARY_COLOR = "#03a9f4";
+export const DEFAULT_ACCENT_COLOR = "#ff9800";
+
 const documentContainer = document.createElement("template");
 documentContainer.setAttribute("style", "display: none;");
 
diff --git a/src/resources/js-yaml-dump.ts b/src/resources/js-yaml-dump.ts
new file mode 100644
index 0000000000..dec67712ae
--- /dev/null
+++ b/src/resources/js-yaml-dump.ts
@@ -0,0 +1 @@
+export { dump } from "js-yaml";
diff --git a/src/resources/safari-14-attachshadow-patch.ts b/src/resources/safari-14-attachshadow-patch.ts
index 597e0f480e..88954ab4d2 100644
--- a/src/resources/safari-14-attachshadow-patch.ts
+++ b/src/resources/safari-14-attachshadow-patch.ts
@@ -1,5 +1,5 @@
 // https://github.com/home-assistant/frontend/pull/7031
-const isSafari14 = /^((?!chrome|android).)*version\/14\.0.*safari/i.test(
+const isSafari14 = /^((?!chrome|android).)*version\/14\.0\s.*safari/i.test(
   navigator.userAgent
 );
 if (isSafari14) {
diff --git a/src/resources/styles.ts b/src/resources/styles.ts
index 6be57cf1f2..54e298f1c2 100644
--- a/src/resources/styles.ts
+++ b/src/resources/styles.ts
@@ -1,4 +1,4 @@
-import { css } from "lit-element";
+import { css } from "lit";
 
 export const darkStyles = {
   "primary-background-color": "#111111",
diff --git a/src/state-summary/state-card-display.ts b/src/state-summary/state-card-display.ts
index c89668cfe2..4e434fbf8a 100755
--- a/src/state-summary/state-card-display.ts
+++ b/src/state-summary/state-card-display.ts
@@ -1,15 +1,8 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import type { HassEntity } from "home-assistant-js-websocket";
-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 { computeDomain } from "../common/entity/compute_domain";
 import { computeStateDisplay } from "../common/entity/compute_state_display";
 import { computeRTL } from "../common/util/compute_rtl";
@@ -75,7 +68,7 @@ export class StateCardDisplay extends LitElement {
     }
   }
 
-  static get styles(): CSSResult[] {
+  static get styles(): CSSResultGroup {
     return [
       haStyle,
       css`
diff --git a/src/state-summary/state-card-input_select.ts b/src/state-summary/state-card-input_select.ts
index 7b82d9767d..854b9c1280 100644
--- a/src/state-summary/state-card-input_select.ts
+++ b/src/state-summary/state-card-input_select.ts
@@ -4,14 +4,13 @@ import type { PaperItemElement } from "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
-  CSSResult,
-  customElement,
+  CSSResultGroup,
   html,
   LitElement,
-  property,
   PropertyValues,
   TemplateResult,
-} from "lit-element";
+} from "lit";
+import { customElement, property } from "lit/decorators";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import { computeStateName } from "../common/entity/compute_state_name";
 import "../components/entity/state-badge";
@@ -61,7 +60,7 @@ class StateCardInputSelect extends LitElement {
     await setInputSelectOption(this.hass, this.stateObj.entity_id, option);
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return css`
       :host {
         display: block;
diff --git a/src/state-summary/state-card-script.ts b/src/state-summary/state-card-script.ts
index afd839c569..52eed9f297 100644
--- a/src/state-summary/state-card-script.ts
+++ b/src/state-summary/state-card-script.ts
@@ -1,12 +1,7 @@
 import "@material/mwc-button";
 import { HassEntity } from "home-assistant-js-websocket";
-import {
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-} from "lit-element";
+import { CSSResultGroup, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import "../components/entity/ha-entity-toggle";
 import "../components/entity/state-info";
 import { UNAVAILABLE_STATES } from "../data/entity";
@@ -72,7 +67,7 @@ export class StateCardScript extends LitElement {
     });
   }
 
-  static get styles(): CSSResult {
+  static get styles(): CSSResultGroup {
     return haStyle;
   }
 }
diff --git a/src/state-summary/state-card-timer.js b/src/state-summary/state-card-timer.js
index 17d39fde5c..a517a52da1 100644
--- a/src/state-summary/state-card-timer.js
+++ b/src/state-summary/state-card-timer.js
@@ -2,9 +2,8 @@ import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import secondsToDuration from "../common/datetime/seconds_to_duration";
-import { timerTimeRemaining } from "../common/entity/timer_time_remaining";
 import "../components/entity/state-info";
+import { computeDisplayTimer, timerTimeRemaining } from "../data/timer";
 
 class StateCardTimer extends PolymerElement {
   static get template() {
@@ -18,6 +17,7 @@ class StateCardTimer extends PolymerElement {
           margin-left: 16px;
           text-align: right;
           line-height: 40px;
+          white-space: nowrap;
         }
       </style>
 
@@ -90,10 +90,8 @@ class StateCardTimer extends PolymerElement {
     this.timeRemaining = timerTimeRemaining(stateObj);
   }
 
-  _displayState(time, stateObj) {
-    return time
-      ? secondsToDuration(time)
-      : this.hass.localize(`state.timer.${stateObj.state}`) || stateObj.state;
+  _displayState(timeRemaining, stateObj) {
+    return computeDisplayTimer(this.hass, stateObj, timeRemaining);
   }
 }
 customElements.define("state-card-timer", StateCardTimer);
diff --git a/src/state/connection-mixin.ts b/src/state/connection-mixin.ts
index cda1c797ec..bfe4617020 100644
--- a/src/state/connection-mixin.ts
+++ b/src/state/connection-mixin.ts
@@ -2,8 +2,8 @@ import {
   Auth,
   callService,
   Connection,
-  ERR_INVALID_AUTH,
   ERR_CONNECTION_LOST,
+  ERR_INVALID_AUTH,
   HassConfig,
   subscribeConfig,
   subscribeEntities,
@@ -15,7 +15,7 @@ import { subscribeFrontendUserData } from "../data/frontend";
 import { forwardHaptic } from "../data/haptics";
 import { DEFAULT_PANEL } from "../data/panel";
 import { serviceCallWillDisconnect } from "../data/service";
-import { NumberFormat } from "../data/translation";
+import { NumberFormat, TimeFormat } from "../data/translation";
 import { subscribePanels } from "../data/ws-panels";
 import { translationMetadata } from "../resources/translations-metadata";
 import { Constructor, ServiceCallResponse } from "../types";
@@ -39,6 +39,7 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
         states: null as any,
         config: null as any,
         themes: null as any,
+        selectedThemeSettings: null,
         panels: null as any,
         services: null as any,
         user: null as any,
@@ -49,6 +50,7 @@ export const connectionMixin = <T extends Constructor<HassBaseEl>>(
         locale: {
           language,
           number_format: NumberFormat.language,
+          time_format: TimeFormat.language,
         },
         resources: null as any,
         localize: () => "",
diff --git a/src/state/dialog-manager-mixin.ts b/src/state/dialog-manager-mixin.ts
index acb0c7c5e3..0575afa493 100644
--- a/src/state/dialog-manager-mixin.ts
+++ b/src/state/dialog-manager-mixin.ts
@@ -1,4 +1,4 @@
-import { PropertyValues } from "lit-element";
+import { PropertyValues } from "lit";
 import { HASSDomEvent } from "../common/dom/fire_event";
 import { makeDialogManager, showDialog } from "../dialogs/make-dialog-manager";
 import { Constructor } from "../types";
diff --git a/src/state/disconnect-toast-mixin.ts b/src/state/disconnect-toast-mixin.ts
index 98e36dea7a..a222ae7894 100644
--- a/src/state/disconnect-toast-mixin.ts
+++ b/src/state/disconnect-toast-mixin.ts
@@ -4,14 +4,14 @@ import {
   STATE_STARTING,
   UnsubscribeFunc,
 } from "home-assistant-js-websocket";
+import {
+  BootstrapIntegrationsTimings,
+  subscribeBootstrapIntegrations,
+} from "../data/bootstrap_integrations";
+import { domainToName } from "../data/integration";
 import { Constructor } from "../types";
 import { showToast } from "../util/toast";
 import { HassBaseEl } from "./hass-base-mixin";
-import { domainToName } from "../data/integration";
-import {
-  subscribeBootstrapIntegrations,
-  BootstrapIntegrationsTimings,
-} from "../data/bootstrap_integrations";
 
 export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
   class extends superClass {
@@ -20,7 +20,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
     protected firstUpdated(changedProps) {
       super.firstUpdated(changedProps);
       // Need to load in advance because when disconnected, can't dynamically load code.
-      import("../managers/notification-manager");
+      setTimeout(() => import("../managers/notification-manager"), 5000);
     }
 
     updated(changedProperties) {
@@ -112,7 +112,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
       showToast(this, {
         message:
           this.hass!.localize(
-            "ui.notification_toast.intergration_starting",
+            "ui.notification_toast.integration_starting",
             "integration",
             domainToName(this.hass!.localize, integration)
           ) ||
diff --git a/src/state/haptic-mixin.ts b/src/state/haptic-mixin.ts
index 6a4483c3bb..a4a46ceb35 100644
--- a/src/state/haptic-mixin.ts
+++ b/src/state/haptic-mixin.ts
@@ -1,4 +1,4 @@
-import { PropertyValues } from "lit-element";
+import { PropertyValues } from "lit";
 import { HASSDomEvent } from "../common/dom/fire_event";
 import { HapticType } from "../data/haptics";
 import { Constructor, HomeAssistant } from "../types";
diff --git a/src/state/hass-base-mixin.ts b/src/state/hass-base-mixin.ts
index 1d9b09d4ee..c0e7170328 100644
--- a/src/state/hass-base-mixin.ts
+++ b/src/state/hass-base-mixin.ts
@@ -1,5 +1,6 @@
 import { Auth, Connection } from "home-assistant-js-websocket";
-import { LitElement, property } from "lit-element";
+import { LitElement } from "lit";
+import { property } from "lit/decorators";
 import { HomeAssistant } from "../types";
 
 export class HassBaseEl extends LitElement {
diff --git a/src/state/more-info-mixin.ts b/src/state/more-info-mixin.ts
index dd0cf17c0c..e05c76ed72 100644
--- a/src/state/more-info-mixin.ts
+++ b/src/state/more-info-mixin.ts
@@ -1,4 +1,4 @@
-import type { PropertyValues } from "lit-element";
+import type { PropertyValues } from "lit";
 import type { HASSDomEvent } from "../common/dom/fire_event";
 import { showDialog } from "../dialogs/make-dialog-manager";
 import type { MoreInfoDialogParams } from "../dialogs/more-info/ha-more-info-dialog";
@@ -12,14 +12,6 @@ declare global {
   }
 }
 
-let moreInfoImportPromise;
-const importMoreInfo = () => {
-  if (!moreInfoImportPromise) {
-    moreInfoImportPromise = import("../dialogs/more-info/ha-more-info-dialog");
-  }
-  return moreInfoImportPromise;
-};
-
 export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
   class extends superClass {
     protected firstUpdated(changedProps: PropertyValues) {
@@ -27,7 +19,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
       this.addEventListener("hass-more-info", (ev) => this._handleMoreInfo(ev));
 
       // Load it once we are having the initial rendering done.
-      importMoreInfo();
+      import("../dialogs/more-info/ha-more-info-dialog");
     }
 
     private async _handleMoreInfo(ev: HASSDomEvent<MoreInfoDialogParams>) {
@@ -38,7 +30,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
         {
           entityId: ev.detail.entityId,
         },
-        importMoreInfo
+        () => import("../dialogs/more-info/ha-more-info-dialog")
       );
     }
   };
diff --git a/src/state/quick-bar-mixin.ts b/src/state/quick-bar-mixin.ts
index c09ce80402..445a9e3ee5 100644
--- a/src/state/quick-bar-mixin.ts
+++ b/src/state/quick-bar-mixin.ts
@@ -1,10 +1,10 @@
-import type { Constructor, PropertyValues } from "lit-element";
+import type { PropertyValues } from "lit";
 import tinykeys from "tinykeys";
 import {
   QuickBarParams,
   showQuickBar,
 } from "../dialogs/quick-bar/show-dialog-quick-bar";
-import { HomeAssistant } from "../types";
+import { Constructor, HomeAssistant } from "../types";
 import { storeState } from "../util/ha-pref-storage";
 import { HassElement } from "./hass-element";
 
diff --git a/src/state/themes-mixin.ts b/src/state/themes-mixin.ts
index 8555391b88..9ef9778014 100644
--- a/src/state/themes-mixin.ts
+++ b/src/state/themes-mixin.ts
@@ -11,10 +11,10 @@ import { HassBaseEl } from "./hass-base-mixin";
 declare global {
   // for add event listener
   interface HTMLElementEventMap {
-    settheme: HASSDomEvent<Partial<HomeAssistant["selectedTheme"]>>;
+    settheme: HASSDomEvent<Partial<HomeAssistant["selectedThemeSettings"]>>;
   }
   interface HASSDomEvents {
-    settheme: Partial<HomeAssistant["selectedTheme"]>;
+    settheme: Partial<HomeAssistant["selectedThemeSettings"]>;
   }
 }
 
@@ -28,7 +28,10 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
       super.firstUpdated(changedProps);
       this.addEventListener("settheme", (ev) => {
         this._updateHass({
-          selectedTheme: { ...this.hass!.selectedTheme!, ...ev.detail },
+          selectedThemeSettings: {
+            ...this.hass!.selectedThemeSettings!,
+            ...ev.detail,
+          },
         });
         this._applyTheme(mql.matches);
         storeState(this.hass!);
@@ -60,41 +63,48 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
       });
     }
 
-    private _applyTheme(dark: boolean) {
+    private _applyTheme(darkPreferred: boolean) {
       if (!this.hass) {
         return;
       }
+
+      let themeSettings: Partial<HomeAssistant["selectedThemeSettings"]> = this
+        .hass!.selectedThemeSettings;
+
       const themeName =
-        this.hass.selectedTheme?.theme ||
-        (dark && this.hass.themes.default_dark_theme
+        themeSettings?.theme ||
+        (darkPreferred && this.hass.themes.default_dark_theme
           ? this.hass.themes.default_dark_theme!
           : this.hass.themes.default_theme);
 
-      let options: Partial<HomeAssistant["selectedTheme"]> = this.hass!
-        .selectedTheme;
+      let darkMode =
+        themeSettings?.dark === undefined ? darkPreferred : themeSettings?.dark;
 
-      if (themeName === "default" && options?.dark === undefined) {
-        options = {
-          ...this.hass.selectedTheme!,
-          dark,
-        };
+      const selectedTheme =
+        themeSettings?.theme !== undefined
+          ? this.hass.themes.themes[themeSettings.theme]
+          : undefined;
+
+      if (selectedTheme && darkMode && !selectedTheme.modes) {
+        darkMode = false;
       }
 
+      themeSettings = { ...this.hass.selectedThemeSettings, dark: darkMode };
+
       applyThemesOnElement(
         document.documentElement,
         this.hass.themes,
         themeName,
-        options
+        themeSettings
       );
 
-      const darkMode =
-        themeName === "default"
-          ? !!options?.dark
-          : !!(dark && this.hass.themes.default_dark_theme);
+      // Now determine value that should be stored in the local storage settings
+      darkMode =
+        darkMode || !!(darkPreferred && this.hass.themes.default_dark_theme);
 
       if (darkMode !== this.hass.themes.darkMode) {
         this._updateHass({
-          themes: { ...this.hass.themes, darkMode },
+          themes: { ...this.hass.themes!, darkMode },
         });
 
         const schemeMeta = document.querySelector("meta[name=color-scheme]");
diff --git a/src/state/translations-mixin.ts b/src/state/translations-mixin.ts
index 6c5bf64302..7e0ee332f2 100644
--- a/src/state/translations-mixin.ts
+++ b/src/state/translations-mixin.ts
@@ -7,14 +7,15 @@ import {
   getHassTranslationsPre109,
   NumberFormat,
   saveTranslationPreferences,
+  TimeFormat,
   TranslationCategory,
 } from "../data/translation";
 import { translationMetadata } from "../resources/translations-metadata";
 import { Constructor, HomeAssistant } from "../types";
 import { storeState } from "../util/ha-pref-storage";
 import {
-  getTranslation,
   getLocalLanguage,
+  getTranslation,
   getUserLocale,
 } from "../util/hass-translation";
 import { HassBaseEl } from "./hass-base-mixin";
@@ -28,6 +29,9 @@ declare global {
     "hass-number-format-select": {
       number_format: NumberFormat;
     };
+    "hass-time-format-select": {
+      time_format: TimeFormat;
+    };
   }
 }
 
@@ -64,6 +68,9 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
       this.addEventListener("hass-number-format-select", (e) => {
         this._selectNumberFormat((e as CustomEvent).detail, true);
       });
+      this.addEventListener("hass-time-format-select", (e) => {
+        this._selectTimeFormat((e as CustomEvent).detail, true);
+      });
       this._loadCoreTranslations(getLocalLanguage());
     }
 
@@ -95,6 +102,13 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
           // We just got number_format from backend, no need to save back
           this._selectNumberFormat(locale.number_format, false);
         }
+        if (
+          locale?.time_format &&
+          this.hass!.locale.time_format !== locale.time_format
+        ) {
+          // We just got time_format from backend, no need to save back
+          this._selectTimeFormat(locale.time_format, false);
+        }
       });
 
       this.hass!.connection.subscribeEvents(
@@ -133,6 +147,15 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
       }
     }
 
+    private _selectTimeFormat(time_format: TimeFormat, saveToBackend: boolean) {
+      this._updateHass({
+        locale: { ...this.hass!.locale, time_format: time_format },
+      });
+      if (saveToBackend) {
+        saveTranslationPreferences(this.hass!, this.hass!.locale);
+      }
+    }
+
     private _selectLanguage(language: string, saveToBackend: boolean) {
       if (!this.hass) {
         // should not happen, do it to avoid use this.hass!
diff --git a/src/state/url-sync-mixin.ts b/src/state/url-sync-mixin.ts
index 2a9efa8d05..684f9a79dc 100644
--- a/src/state/url-sync-mixin.ts
+++ b/src/state/url-sync-mixin.ts
@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
-import { UpdatingElement } from "lit-element";
+import { ReactiveElement } from "lit";
 import { HASSDomEvent } from "../common/dom/fire_event";
+import { mainWindow } from "../common/dom/get_main_window";
 import {
   closeDialog,
   DialogClosedParams,
@@ -13,7 +14,7 @@ import { Constructor } from "../types";
 const DEBUG = false;
 
 export const urlSyncMixin = <
-  T extends Constructor<UpdatingElement & ProvideHassElement>
+  T extends Constructor<ReactiveElement & ProvideHassElement>
 >(
   superClass: T
 ) =>
@@ -28,13 +29,16 @@ export const urlSyncMixin = <
           if (history.length === 1) {
             history.replaceState({ ...history.state, root: true }, "");
           }
-          top.addEventListener("popstate", this._popstateChangeListener);
+          mainWindow.addEventListener("popstate", this._popstateChangeListener);
           this.addEventListener("dialog-closed", this._dialogClosedListener);
         }
 
         public disconnectedCallback(): void {
           super.disconnectedCallback();
-          top.removeEventListener("popstate", this._popstateChangeListener);
+          mainWindow.removeEventListener(
+            "popstate",
+            this._popstateChangeListener
+          );
           this.removeEventListener("dialog-closed", this._dialogClosedListener);
         }
 
@@ -45,21 +49,21 @@ export const urlSyncMixin = <
             console.log("dialog closed", ev.detail.dialog);
             console.log(
               "open",
-              top.history.state?.open,
+              mainWindow.history.state?.open,
               "dialog",
-              top.history.state?.dialog
+              mainWindow.history.state?.dialog
             );
           }
           // If not closed by navigating back, and not a new dialog is open, remove the open state from history
           if (
-            top.history.state?.open &&
-            top.history.state?.dialog === ev.detail.dialog
+            mainWindow.history.state?.open &&
+            mainWindow.history.state?.dialog === ev.detail.dialog
           ) {
             if (DEBUG) {
               console.log("remove state", ev.detail.dialog);
             }
             this._ignoreNextPopState = true;
-            top.history.back();
+            mainWindow.history.back();
           }
         };
 
@@ -73,7 +77,7 @@ export const urlSyncMixin = <
               if (DEBUG) {
                 console.log("remove old state", ev.state.oldState);
               }
-              top.history.back();
+              mainWindow.history.back();
               return;
             }
             this._ignoreNextPopState = false;
@@ -98,7 +102,7 @@ export const urlSyncMixin = <
                 console.log("dialog could not be closed");
               }
               // dialog could not be closed, push state again
-              top.history.pushState(
+              mainWindow.history.pushState(
                 {
                   dialog: state.dialog,
                   open: true,
diff --git a/src/styles/polymer-ha-style-dialog.ts b/src/styles/polymer-ha-style-dialog.ts
index 04e28b93e1..68193fc45a 100644
--- a/src/styles/polymer-ha-style-dialog.ts
+++ b/src/styles/polymer-ha-style-dialog.ts
@@ -1,4 +1,5 @@
 import "@polymer/polymer/lib/elements/dom-module";
+import { CSSResult } from "lit";
 import { haStyleDialog } from "../resources/styles";
 
 const documentContainer = document.createElement("template");
@@ -7,7 +8,7 @@ documentContainer.setAttribute("style", "display: none;");
 documentContainer.innerHTML = `<dom-module id="ha-style-dialog">
 <template>
   <style>
-    ${haStyleDialog.cssText}
+    ${(haStyleDialog as CSSResult).cssText}
   </style>
 </template>
 </dom-module>`;
diff --git a/src/styles/polymer-ha-style.ts b/src/styles/polymer-ha-style.ts
index 22d8c38cc6..e3afebd8fa 100644
--- a/src/styles/polymer-ha-style.ts
+++ b/src/styles/polymer-ha-style.ts
@@ -1,4 +1,5 @@
 import "@polymer/polymer/lib/elements/dom-module";
+import { CSSResult } from "lit";
 import { haStyle } from "../resources/styles";
 
 const documentContainer = document.createElement("template");
@@ -7,7 +8,7 @@ documentContainer.setAttribute("style", "display: none;");
 documentContainer.innerHTML = `<dom-module id="ha-style">
   <template>
     <style>
-    ${haStyle.cssText}
+    ${(haStyle as CSSResult).cssText}
     </style>
   </template>
 </dom-module>`;
diff --git a/src/translations/en.json b/src/translations/en.json
index ff075ced07..6a700c664a 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -522,6 +522,9 @@
       "calendar": {
         "my_calendars": "My Calendars",
         "today": "Today"
+      },
+      "attributes": {
+        "expansion_header": "Attributes"
       }
     },
     "dialogs": {
@@ -870,7 +873,7 @@
       "started": "Home Assistant has started!",
       "starting": "Home Assistant is starting, not everything will be available until it is finished.",
       "wrapping_up_startup": "Wrapping up startup, not everything will be available until it is finished.",
-      "intergration_starting": "Starting {integration}, not everything will be available until it is finished.",
+      "integration_starting": "Starting {integration}, not everything will be available until it is finished.",
       "triggered": "Triggered {name}",
       "dismiss": "Dismiss"
     },
@@ -1680,6 +1683,8 @@
             "show_info_scene": "Show info about scene",
             "delete_scene": "Delete scene",
             "delete_confirm": "Are you sure you want to delete this scene?",
+            "duplicate_scene": "Duplicate scene",
+            "duplicate": "Duplicate",
             "headers": {
               "name": "Name"
             }
@@ -1775,6 +1780,7 @@
             "integrations_introduction2": "Check the website for ",
             "integrations_link_all_features": " all available features",
             "connected": "Connected",
+            "connecting": "Connecting...",
             "not_connected": "Not Connected",
             "fetching_subscription": "Fetching subscription...",
             "tts": {
@@ -2631,8 +2637,10 @@
             "controller_in_inclusion_mode": "Your Z-Wave controller is now in inclusion mode.",
             "follow_device_instructions": "Follow the directions that came with your device to trigger pairing on the device.",
             "inclusion_failed": "The node could not be added. Please check the logs for more information.",
-            "inclusion_finished": "The node has been added. It may take a few minutes for all entities to show up as we finish setting up the node in the background.",
-            "view_device": "View Device"
+            "inclusion_finished": "The node has been added.",
+            "view_device": "View Device",
+            "interview_started": "The device is being interviewed. This may take some time.",
+            "interview_failed": "The device interview failed. Additional information may be available in the logs."
           },
           "remove_node": {
             "title": "Remove a Z-Wave Node",
@@ -2657,7 +2665,8 @@
           "logs": {
             "title": "Z-Wave JS Logs",
             "log_level": "Log Level",
-            "subscribed_to_logs": "Subscribed to Z-Wave JS Log Messages..."
+            "subscribed_to_logs": "Subscribed to Z-Wave JS Log Messages...",
+            "log_level_changed": "Log Level changed to: {level}"
           }
         }
       },
@@ -3209,6 +3218,17 @@
             "none": "None"
           }
         },
+        "time_format": {
+          "header": "Time Format",
+          "dropdown_label": "Time format",
+          "description": "Choose how times are formatted.",
+          "formats": {
+            "language": "Auto (use language setting)",
+            "system": "Use system locale",
+            "12": "12 hours (AM/PM)",
+            "24": "24 hours"
+          }
+        },
         "themes": {
           "header": "Theme",
           "error_no_theme": "No themes available.",
@@ -3261,8 +3281,8 @@
           "header": "Refresh Tokens",
           "description": "Each refresh token represents a login session. Refresh tokens will be automatically removed when you click log out. The following refresh tokens are currently active for your account.",
           "token_title": "Refresh token for {clientId}",
-          "created_at": "Created at {date}",
-          "last_used": "Last used at {date} from {location}",
+          "created_at": "Created {date}",
+          "last_used": "Last used {date} from {location}",
           "not_used": "Has never been used",
           "confirm_delete": "Are you sure you want to delete the refresh token for {name}?",
           "delete_failed": "Failed to delete the refresh token.",
@@ -3741,7 +3761,7 @@
       "save": "[%key:ui::common::save%]",
       "close": "[%key:ui::common::close%]",
       "show_more": "Show more information about this",
-      "update_available": "{count, plural,\n  one {Update}\n  other {{count} Updates}\n} pending",
+      "update_available": "{count, plural,\n  one {Update}\n  other {{count} updates}\n} pending",
       "update": "Update",
       "version": "Version",
       "error": {
@@ -3767,7 +3787,7 @@
       "addon_new_version": "New version available",
       "addon_running": "Add-on is running",
       "addon_stopped": "Add-on is stopped",
-      "addons": "Add-ons",
+      "addons": "Installed add-ons",
       "no_addons": "You don't have any add-ons installed yet. Head over to the add-on store to get started!"
     },
     "store": {
@@ -3786,7 +3806,8 @@
       "not_supported": "[%key:ui::panel::my::not_supported%]",
       "faq_link": "[%key:ui::panel::my::faq_link%]",
       "error": "[%key:ui::panel::my::error%]",
-      "error_addon_not_found": "Add-on not found"
+      "error_addon_not_found": "Add-on not found",
+      "error_addon_no_ingress": "The requested add-on does not support ingress"
     },
     "system": {
       "log": {
@@ -3813,6 +3834,7 @@
         "share_diagnostics_description": "Share crash reports and diagnostic information.",
         "reload_supervisor": "Reload Supervisor",
         "warning": "WARNING",
+        "search": "Search",
         "beta_warning": "Beta releases are for testers and early adopters and can contain unstable code changes",
         "beta_backup": "Make sure you have backups of your data before you activate this feature.",
         "beta_release_items": "This includes beta releases for:",
@@ -3878,14 +3900,16 @@
       "upload_snapshot": "Upload snapshot",
       "create_snapshot": "Create snapshot",
       "create": "Create",
-      "name": "Name",
-      "type": "Type",
+      "created": "Created",
+      "name": "Snapshot name",
+      "type": "Snapshot type",
+      "select_type": "Select what to restore",
       "security": "Security",
       "full_snapshot": "Full snapshot",
       "partial_snapshot": "Partial snapshot",
       "addons": "Add-ons",
       "folders": "Folders",
-      "password": "Password",
+      "password": "Snapshot password",
       "password_protection": "Password protection",
       "password_protected": "password protected",
       "enter_password": "Please enter a password.",
diff --git a/src/types.ts b/src/types.ts
index 7c6d699ce1..2cb1af3337 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -3,16 +3,13 @@ import {
   Connection,
   HassConfig,
   HassEntities,
-  HassServiceTarget,
   HassServices,
+  HassServiceTarget,
   MessageBase,
 } from "home-assistant-js-websocket";
 import { LocalizeFunc } from "./common/translations/localize";
 import { CoreFrontendUserData } from "./data/frontend";
-import {
-  FrontendTranslationData,
-  getHassTranslations,
-} from "./data/translation";
+import { FrontendLocaleData, getHassTranslations } from "./data/translation";
 import { Themes } from "./data/ws-themes";
 import { ExternalMessaging } from "./external_app/external_messaging";
 
@@ -85,8 +82,12 @@ export interface CurrentUser {
   mfa_modules: MFAModule[];
 }
 
+// Currently selected theme and its settings. These are the values stored in local storage.
 export interface ThemeSettings {
   theme: string;
+  // Radio box selection for theme picker. Do not use in cards as
+  // it can be undefined == auto.
+  // Property hass.themes.darkMode carries effective current mode.
   dark?: boolean;
   primaryColor?: string;
   accentColor?: string;
@@ -193,19 +194,19 @@ export interface HomeAssistant {
   services: HassServices;
   config: HassConfig;
   themes: Themes;
-  selectedTheme?: ThemeSettings | null;
+  selectedThemeSettings: ThemeSettings | null;
   panels: Panels;
   panelUrl: string;
   // i18n
   // current effective language in that order:
-  //   - backend saved user selected lanugage
-  //   - language in local appstorage
+  //   - backend saved user selected language
+  //   - language in local app storage
   //   - browser language
   //   - english (en)
   language: string;
-  // local stored language, keep that name for backward compability
+  // local stored language, keep that name for backward compatibility
   selectedLanguage: string | null;
-  locale: FrontendTranslationData;
+  locale: FrontendLocaleData;
   resources: Resources;
   localize: LocalizeFunc;
   translationMetadata: TranslationMetadata;
diff --git a/src/util/ha-pref-storage.ts b/src/util/ha-pref-storage.ts
index 8c21de00b7..086e8f7c46 100644
--- a/src/util/ha-pref-storage.ts
+++ b/src/util/ha-pref-storage.ts
@@ -2,13 +2,16 @@ import { HomeAssistant } from "../types";
 
 const STORED_STATE = [
   "dockedSidebar",
-  "selectedTheme",
+  "selectedThemeSettings",
   "selectedLanguage",
   "vibrate",
   "suspendWhenHidden",
   "enableShortcuts",
   "defaultPanel",
 ];
+// Deprecated states will be loaded once so that the values can be migrated to other states if required,
+// but during the next state storing, the deprecated keys will be removed.
+const STORED_STATE_DEPRECATED = ["selectedTheme"];
 const STORAGE = window.localStorage || {};
 
 export function storeState(hass: HomeAssistant) {
@@ -17,6 +20,9 @@ export function storeState(hass: HomeAssistant) {
       const value = hass[key];
       STORAGE[key] = JSON.stringify(value === undefined ? null : value);
     });
+    STORED_STATE_DEPRECATED.forEach((key) => {
+      if (key in STORAGE) delete STORAGE[key];
+    });
   } catch (err) {
     // Safari throws exception in private mode
   }
@@ -25,13 +31,17 @@ export function storeState(hass: HomeAssistant) {
 export function getState() {
   const state = {};
 
-  STORED_STATE.forEach((key) => {
+  STORED_STATE.concat(STORED_STATE_DEPRECATED).forEach((key) => {
     if (key in STORAGE) {
       let value = JSON.parse(STORAGE[key]);
       // selectedTheme went from string to object on 20200718
       if (key === "selectedTheme" && typeof value === "string") {
         value = { theme: value };
       }
+      // selectedTheme was renamed to selectedThemeSettings on 20210207
+      if (key === "selectedTheme") {
+        key = "selectedThemeSettings";
+      }
       // dockedSidebar went from boolean to enum on 20190720
       if (key === "dockedSidebar" && typeof value === "boolean") {
         value = value ? "docked" : "auto";
diff --git a/src/util/hass-attributes-util.ts b/src/util/hass-attributes-util.ts
index 0db6b5e0d5..0e991b0fa5 100644
--- a/src/util/hass-attributes-util.ts
+++ b/src/util/hass-attributes-util.ts
@@ -1,3 +1,14 @@
+import { html, TemplateResult } from "lit";
+import { until } from "lit/directives/until";
+import checkValidDate from "../common/datetime/check_valid_date";
+import { formatDate } from "../common/datetime/format_date";
+import { formatDateTimeWithSeconds } from "../common/datetime/format_date_time";
+import { isDate } from "../common/string/is_date";
+import { isTimestamp } from "../common/string/is_timestamp";
+import { HomeAssistant } from "../types";
+
+let jsYamlPromise: Promise<typeof import("../resources/js-yaml-dump")>;
+
 const hassAttributeUtil = {
   DOMAIN_DEVICE_CLASS: {
     binary_sensor: [
@@ -126,6 +137,63 @@ export function formatAttributeName(value: string): string {
     .replace(/_/g, " ")
     .replace(/\bid\b/g, "ID")
     .replace(/\bip\b/g, "IP")
-    .replace(/\bmac\b/g, "MAC");
+    .replace(/\bmac\b/g, "MAC")
+    .replace(/\bgps\b/g, "GPS");
   return value.charAt(0).toUpperCase() + value.slice(1);
 }
+
+export function formatAttributeValue(
+  hass: HomeAssistant,
+  value: any
+): string | TemplateResult {
+  if (value === null) {
+    return "-";
+  }
+
+  // YAML handling
+  if (
+    (Array.isArray(value) && value.some((val) => val instanceof Object)) ||
+    (!Array.isArray(value) && value instanceof Object)
+  ) {
+    if (!jsYamlPromise) {
+      jsYamlPromise = import("../resources/js-yaml-dump");
+    }
+    const yaml = jsYamlPromise.then((jsYaml) => jsYaml.dump(value));
+    return html`<pre>${until(yaml, "")}</pre>`;
+  }
+
+  if (typeof value === "string") {
+    // URL handling
+    if (value.startsWith("http")) {
+      try {
+        // If invalid URL, exception will be raised
+        const url = new URL(value);
+        if (url.protocol === "http:" || url.protocol === "https:")
+          return html`<a target="_blank" rel="noreferrer" href="${value}"
+            >${value}</a
+          >`;
+      } catch (_) {
+        // Nothing to do here
+      }
+    }
+
+    // Date handling
+    if (isDate(value, true)) {
+      // Timestamp handling
+      if (isTimestamp(value)) {
+        const date = new Date(value);
+        if (checkValidDate(date)) {
+          return formatDateTimeWithSeconds(date, hass.locale);
+        }
+      }
+
+      // Value was not a timestamp, so only do date formatting
+      const date = new Date(value);
+      if (checkValidDate(date)) {
+        return formatDate(date, hass.locale);
+      }
+    }
+  }
+
+  return Array.isArray(value) ? value.join(", ") : value;
+}
diff --git a/src/util/hass-translation.ts b/src/util/hass-translation.ts
index a203ec894e..fcf8767d03 100644
--- a/src/util/hass-translation.ts
+++ b/src/util/hass-translation.ts
@@ -1,6 +1,6 @@
 import {
   fetchTranslationPreferences,
-  FrontendTranslationData,
+  FrontendLocaleData,
 } from "../data/translation";
 import { translationMetadata } from "../resources/translations-metadata";
 import { HomeAssistant } from "../types";
@@ -55,21 +55,24 @@ export function findAvailableLanguage(language: string) {
  */
 export async function getUserLocale(
   hass: HomeAssistant
-): Promise<Partial<FrontendTranslationData>> {
+): Promise<Partial<FrontendLocaleData>> {
   const result = await fetchTranslationPreferences(hass);
   const language = result?.language;
   const number_format = result?.number_format;
+  const time_format = result?.time_format;
   if (language) {
     const availableLanguage = findAvailableLanguage(language);
     if (availableLanguage) {
       return {
         language: availableLanguage,
         number_format,
+        time_format,
       };
     }
   }
   return {
     number_format,
+    time_format,
   };
 }
 
diff --git a/test-mocha/common/datetime/format_date.ts b/test-mocha/common/datetime/format_date.ts
index 851c18f99d..f81a4d1a5d 100644
--- a/test-mocha/common/datetime/format_date.ts
+++ b/test-mocha/common/datetime/format_date.ts
@@ -1,7 +1,7 @@
 import { assert } from "chai";
 
 import { formatDate } from "../../../src/common/datetime/format_date";
-import { NumberFormat } from "../../../src/data/translation";
+import { NumberFormat, TimeFormat } from "../../../src/data/translation";
 
 describe("formatDate", () => {
   const dateObj = new Date(2017, 10, 18, 11, 12, 13, 1400);
@@ -11,6 +11,7 @@ describe("formatDate", () => {
       formatDate(dateObj, {
         language: "en",
         number_format: NumberFormat.language,
+        time_format: TimeFormat.language,
       }),
       "November 18, 2017"
     );
diff --git a/test-mocha/common/datetime/format_date_time.ts b/test-mocha/common/datetime/format_date_time.ts
index beead0d442..cd3a116e3f 100644
--- a/test-mocha/common/datetime/format_date_time.ts
+++ b/test-mocha/common/datetime/format_date_time.ts
@@ -4,32 +4,50 @@ import {
   formatDateTime,
   formatDateTimeWithSeconds,
 } from "../../../src/common/datetime/format_date_time";
-import { NumberFormat } from "../../../src/data/translation";
+import { NumberFormat, TimeFormat } from "../../../src/data/translation";
 
 describe("formatDateTime", () => {
-  const dateObj = new Date(2017, 10, 18, 11, 12, 13, 400);
+  const dateObj = new Date(2017, 10, 18, 23, 12, 13, 400);
 
   it("Formats English date times", () => {
     assert.strictEqual(
       formatDateTime(dateObj, {
         language: "en",
         number_format: NumberFormat.language,
+        time_format: TimeFormat.am_pm,
       }),
-      "November 18, 2017, 11:12 AM"
+      "November 18, 2017, 11:12 PM"
+    );
+    assert.strictEqual(
+      formatDateTime(dateObj, {
+        language: "en",
+        number_format: NumberFormat.language,
+        time_format: TimeFormat.twenty_four,
+      }),
+      "November 18, 2017, 23:12"
     );
   });
 });
 
 describe("formatDateTimeWithSeconds", () => {
-  const dateObj = new Date(2017, 10, 18, 11, 12, 13, 400);
+  const dateObj = new Date(2017, 10, 18, 23, 12, 13, 400);
 
   it("Formats English date times with seconds", () => {
     assert.strictEqual(
       formatDateTimeWithSeconds(dateObj, {
         language: "en",
         number_format: NumberFormat.language,
+        time_format: TimeFormat.am_pm,
       }),
-      "November 18, 2017, 11:12:13 AM"
+      "November 18, 2017, 11:12:13 PM"
+    );
+    assert.strictEqual(
+      formatDateTimeWithSeconds(dateObj, {
+        language: "en",
+        number_format: NumberFormat.language,
+        time_format: TimeFormat.twenty_four,
+      }),
+      "November 18, 2017, 23:12:13"
     );
   });
 });
diff --git a/test-mocha/common/datetime/format_time.ts b/test-mocha/common/datetime/format_time.ts
index 2b1ac03aba..827f278278 100644
--- a/test-mocha/common/datetime/format_time.ts
+++ b/test-mocha/common/datetime/format_time.ts
@@ -4,32 +4,50 @@ import {
   formatTime,
   formatTimeWithSeconds,
 } from "../../../src/common/datetime/format_time";
-import { NumberFormat } from "../../../src/data/translation";
+import { NumberFormat, TimeFormat } from "../../../src/data/translation";
 
 describe("formatTime", () => {
-  const dateObj = new Date(2017, 10, 18, 11, 12, 13, 1400);
+  const dateObj = new Date(2017, 10, 18, 23, 12, 13, 1400);
 
   it("Formats English times", () => {
     assert.strictEqual(
       formatTime(dateObj, {
         language: "en",
         number_format: NumberFormat.language,
+        time_format: TimeFormat.am_pm,
       }),
-      "11:12 AM"
+      "11:12 PM"
+    );
+    assert.strictEqual(
+      formatTime(dateObj, {
+        language: "en",
+        number_format: NumberFormat.language,
+        time_format: TimeFormat.twenty_four,
+      }),
+      "23:12"
     );
   });
 });
 
 describe("formatTimeWithSeconds", () => {
-  const dateObj = new Date(2017, 10, 18, 11, 12, 13, 400);
+  const dateObj = new Date(2017, 10, 18, 23, 12, 13, 400);
 
   it("Formats English times with seconds", () => {
     assert.strictEqual(
       formatTimeWithSeconds(dateObj, {
         language: "en",
         number_format: NumberFormat.language,
+        time_format: TimeFormat.am_pm,
       }),
-      "11:12:13 AM"
+      "11:12:13 PM"
+    );
+    assert.strictEqual(
+      formatTimeWithSeconds(dateObj, {
+        language: "en",
+        number_format: NumberFormat.language,
+        time_format: TimeFormat.twenty_four,
+      }),
+      "23:12:13"
     );
   });
 });
diff --git a/test-mocha/common/entity/compute_state_display.ts b/test-mocha/common/entity/compute_state_display.ts
index eb0157956f..01246ec186 100644
--- a/test-mocha/common/entity/compute_state_display.ts
+++ b/test-mocha/common/entity/compute_state_display.ts
@@ -2,20 +2,26 @@ import { assert } from "chai";
 import { computeStateDisplay } from "../../../src/common/entity/compute_state_display";
 import { UNKNOWN } from "../../../src/data/entity";
 import {
-  FrontendTranslationData,
+  FrontendLocaleData,
   NumberFormat,
+  TimeFormat,
 } from "../../../src/data/translation";
 
-const localeData: FrontendTranslationData = {
-  language: "en",
-  number_format: NumberFormat.comma_decimal,
-};
+let localeData: FrontendLocaleData;
 
 describe("computeStateDisplay", () => {
   // Mock Localize function for testing
   const localize = (message, ...args) =>
     message + (args.length ? ": " + args.join(",") : "");
 
+  beforeEach(() => {
+    localeData = {
+      language: "en",
+      number_format: NumberFormat.comma_decimal,
+      time_format: TimeFormat.am_pm,
+    };
+  });
+
   it("Localizes binary sensor defaults", () => {
     const stateObj: any = {
       entity_id: "binary_sensor.test",
@@ -148,7 +154,7 @@ describe("computeStateDisplay", () => {
     );
   });
 
-  it("Localizes input_datetime with full date time", () => {
+  describe("Localizes input_datetime with full date time", () => {
     const stateObj: any = {
       entity_id: "input_datetime.test",
       state: "123",
@@ -158,15 +164,24 @@ describe("computeStateDisplay", () => {
         year: 2017,
         month: 11,
         day: 18,
-        hour: 11,
+        hour: 23,
         minute: 12,
         second: 13,
       },
     };
-    assert.strictEqual(
-      computeStateDisplay(localize, stateObj, localeData),
-      "November 18, 2017, 11:12 AM"
-    );
+    it("Uses am/pm time format", () => {
+      assert.strictEqual(
+        computeStateDisplay(localize, stateObj, localeData),
+        "November 18, 2017, 11:12 PM"
+      );
+    });
+    it("Uses 24h time format", () => {
+      localeData.time_format = TimeFormat.twenty_four;
+      assert.strictEqual(
+        computeStateDisplay(localize, stateObj, localeData),
+        "November 18, 2017, 23:12"
+      );
+    });
   });
 
   it("Localizes input_datetime with date", () => {
@@ -179,7 +194,7 @@ describe("computeStateDisplay", () => {
         year: 2017,
         month: 11,
         day: 18,
-        hour: 11,
+        hour: 23,
         minute: 12,
         second: 13,
       },
@@ -190,7 +205,7 @@ describe("computeStateDisplay", () => {
     );
   });
 
-  it("Localizes input_datetime with time", () => {
+  describe("Localizes input_datetime with time", () => {
     const stateObj: any = {
       entity_id: "input_datetime.test",
       state: "123",
@@ -200,15 +215,25 @@ describe("computeStateDisplay", () => {
         year: 2017,
         month: 11,
         day: 18,
-        hour: 11,
+        hour: 23,
         minute: 12,
         second: 13,
       },
     };
-    assert.strictEqual(
-      computeStateDisplay(localize, stateObj, localeData),
-      "11:12 AM"
-    );
+    it("Uses am/pm time format", () => {
+      localeData.time_format = TimeFormat.am_pm;
+      assert.strictEqual(
+        computeStateDisplay(localize, stateObj, localeData),
+        "11:12 PM"
+      );
+    });
+    it("Uses 24h time format", () => {
+      localeData.time_format = TimeFormat.twenty_four;
+      assert.strictEqual(
+        computeStateDisplay(localize, stateObj, localeData),
+        "23:12"
+      );
+    });
   });
 
   it("Localizes unavailable", () => {
@@ -230,10 +255,9 @@ describe("computeStateDisplay", () => {
   });
 
   it("Localizes custom state", () => {
-    const altLocalize = () => {
+    const altLocalize = () =>
       // No matches can be found
-      return "";
-    };
+      "";
     const stateObj: any = {
       entity_id: "sensor.test",
       state: "My Custom State",
diff --git a/test-mocha/common/entity/extract_views.spec.ts b/test-mocha/common/entity/extract_views.spec.ts
index e3cb85c111..245bbefbca 100644
--- a/test-mocha/common/entity/extract_views.spec.ts
+++ b/test-mocha/common/entity/extract_views.spec.ts
@@ -1,4 +1,4 @@
-import * as assert from "assert";
+import { assert } from "chai";
 import { DEFAULT_VIEW_ENTITY_ID } from "../../../src/common/const";
 import { extractViews } from "../../../src/common/entity/extract_views";
 import { createEntities, createView } from "./test_util";
diff --git a/test-mocha/common/entity/get_group_entities.spec.ts b/test-mocha/common/entity/get_group_entities.spec.ts
index 2c22a2913b..4ac01de91c 100644
--- a/test-mocha/common/entity/get_group_entities.spec.ts
+++ b/test-mocha/common/entity/get_group_entities.spec.ts
@@ -1,4 +1,4 @@
-import * as assert from "assert";
+import { assert } from "chai";
 
 import { getGroupEntities } from "../../../src/common/entity/get_group_entities";
 
diff --git a/test-mocha/common/entity/get_view_entities.spec.ts b/test-mocha/common/entity/get_view_entities.spec.ts
index ae3cd13192..b22365c780 100644
--- a/test-mocha/common/entity/get_view_entities.spec.ts
+++ b/test-mocha/common/entity/get_view_entities.spec.ts
@@ -1,4 +1,4 @@
-import * as assert from "assert";
+import { assert } from "chai";
 
 import { getViewEntities } from "../../../src/common/entity/get_view_entities";
 
diff --git a/test-mocha/common/entity/split_by_groups.spec.ts b/test-mocha/common/entity/split_by_groups.spec.ts
index 1e4a28140d..514734238e 100644
--- a/test-mocha/common/entity/split_by_groups.spec.ts
+++ b/test-mocha/common/entity/split_by_groups.spec.ts
@@ -1,4 +1,4 @@
-import * as assert from "assert";
+import { assert } from "chai";
 
 import { splitByGroups } from "../../../src/common/entity/split_by_groups";
 
diff --git a/test-mocha/common/entity/timer_time_remaining_test.ts b/test-mocha/common/entity/timer_time_remaining_test.ts
index 3fb7632869..13ba7eb206 100644
--- a/test-mocha/common/entity/timer_time_remaining_test.ts
+++ b/test-mocha/common/entity/timer_time_remaining_test.ts
@@ -1,7 +1,7 @@
 import { assert } from "chai";
-import * as sinon from "sinon";
+import { useFakeTimers } from "sinon";
 
-import { timerTimeRemaining } from "../../../src/common/entity/timer_time_remaining";
+import { timerTimeRemaining } from "../../../src/data/timer";
 
 describe("timerTimeRemaining", () => {
   it("works with idle timers", () => {
@@ -31,7 +31,7 @@ describe("timerTimeRemaining", () => {
   describe("active timers", () => {
     let clock;
     beforeEach(() => {
-      clock = sinon.useFakeTimers(new Date("2018-01-17T16:15:30Z"));
+      clock = useFakeTimers(new Date("2018-01-17T16:15:30Z"));
     });
     afterEach(() => {
       clock.restore();
diff --git a/test-mocha/common/string/format_number.ts b/test-mocha/common/string/format_number.ts
index 903be54cb0..dafa75575c 100644
--- a/test-mocha/common/string/format_number.ts
+++ b/test-mocha/common/string/format_number.ts
@@ -1,23 +1,29 @@
 import { assert } from "chai";
 
 import { formatNumber } from "../../../src/common/string/format_number";
-import { NumberFormat } from "../../../src/data/translation";
+import {
+  FrontendLocaleData,
+  NumberFormat,
+  TimeFormat,
+} from "../../../src/data/translation";
 
 describe("formatNumber", () => {
+  // Create default to not have to specify a not relevant TimeFormat over and over again.
+  const defaultLocale: FrontendLocaleData = {
+    language: "en",
+    number_format: NumberFormat.language,
+    time_format: TimeFormat.language,
+  };
+
   // Node only ships with English support for `Intl`, so we can not test for other number formats here.
   it("Formats English numbers", () => {
-    assert.strictEqual(
-      formatNumber(1234.5, {
-        language: "en",
-        number_format: NumberFormat.language,
-      }),
-      "1,234.5"
-    );
+    assert.strictEqual(formatNumber(1234.5, defaultLocale), "1,234.5");
   });
 
   it("Test format 'none' (keep dot despite language 'de')", () => {
     assert.strictEqual(
       formatNumber(1.23, {
+        ...defaultLocale,
         language: "de",
         number_format: NumberFormat.none,
       }),
@@ -26,57 +32,32 @@ describe("formatNumber", () => {
   });
 
   it("Ensure zero is kept for format 'language'", () => {
-    assert.strictEqual(
-      formatNumber(0, {
-        language: "en",
-        number_format: NumberFormat.language,
-      }),
-      "0"
-    );
+    assert.strictEqual(formatNumber(0, defaultLocale), "0");
   });
 
   it("Ensure zero is kept for format 'none'", () => {
     assert.strictEqual(
-      formatNumber(0, {
-        language: "en",
-        number_format: NumberFormat.none,
-      }),
+      formatNumber(0, { ...defaultLocale, number_format: NumberFormat.none }),
       "0"
     );
   });
 
   it("Test empty string input for format 'none'", () => {
     assert.strictEqual(
-      formatNumber("", {
-        language: "en",
-        number_format: NumberFormat.none,
-      }),
+      formatNumber("", { ...defaultLocale, number_format: NumberFormat.none }),
       ""
     );
   });
 
   it("Test empty string input for format 'language'", () => {
-    assert.strictEqual(
-      formatNumber("", {
-        language: "en",
-        number_format: NumberFormat.language,
-      }),
-      "0"
-    );
+    assert.strictEqual(formatNumber("", defaultLocale), "0");
   });
 
   it("Formats number with options", () => {
     assert.strictEqual(
-      formatNumber(
-        1234.5,
-        {
-          language: "en",
-          number_format: NumberFormat.language,
-        },
-        {
-          minimumFractionDigits: 2,
-        }
-      ),
+      formatNumber(1234.5, defaultLocale, {
+        minimumFractionDigits: 2,
+      }),
       "1,234.50"
     );
   });
diff --git a/test-mocha/common/string/is_date.ts b/test-mocha/common/string/is_date.ts
new file mode 100644
index 0000000000..58964f766f
--- /dev/null
+++ b/test-mocha/common/string/is_date.ts
@@ -0,0 +1,12 @@
+import { assert } from "chai";
+import { isDate } from "../../../src/common/string/is_date";
+
+describe("isDate", () => {
+  assert.strictEqual(isDate("ABC"), false);
+
+  assert.strictEqual(isDate("2021-02-03", false), true);
+  assert.strictEqual(isDate("2021-02-03", true), true);
+
+  assert.strictEqual(isDate("2021-05-25T19:23:52+00:00", true), true);
+  assert.strictEqual(isDate("2021-05-25T19:23:52+00:00", false), false);
+});
diff --git a/test-mocha/common/util/parse_aspect_ratio_test.ts b/test-mocha/common/util/parse_aspect_ratio_test.ts
index 758010aefa..398361e9e7 100644
--- a/test-mocha/common/util/parse_aspect_ratio_test.ts
+++ b/test-mocha/common/util/parse_aspect_ratio_test.ts
@@ -1,4 +1,4 @@
-import * as assert from "assert";
+import { assert } from "chai";
 
 import parseAspectRatio from "../../../src/common/util/parse-aspect-ratio";
 
diff --git a/test-mocha/external_app/external_messaging.spec.ts b/test-mocha/external_app/external_messaging.spec.ts
index d13e342d1d..ac1b1b8aa1 100644
--- a/test-mocha/external_app/external_messaging.spec.ts
+++ b/test-mocha/external_app/external_messaging.spec.ts
@@ -1,4 +1,4 @@
-import * as assert from "assert";
+import { assert } from "chai";
 
 import {
   ExternalMessaging,
diff --git a/test-mocha/hassio/create_session.spec.ts b/test-mocha/hassio/create_session.spec.ts
index e308036eef..0367167e48 100644
--- a/test-mocha/hassio/create_session.spec.ts
+++ b/test-mocha/hassio/create_session.spec.ts
@@ -1,4 +1,4 @@
-import * as assert from "assert";
+import { assert } from "chai";
 import { createHassioSession } from "../../src/data/hassio/ingress";
 
 describe("Create hassio session", function () {
@@ -44,7 +44,9 @@ describe("Create hassio session", function () {
   it("Test fail to create", async function () {
     const createSessionPromise = createHassioSession({
       // @ts-ignore
-      callApi: async function () {},
+      callApi: async function () {
+        // noop
+      },
     }).then(
       () => true,
       () => false
diff --git a/test-mocha/mocha.opts b/test-mocha/mocha.opts
deleted file mode 100644
index 468fd16da1..0000000000
--- a/test-mocha/mocha.opts
+++ /dev/null
@@ -1,4 +0,0 @@
---require test-mocha/testconf.js
---recursive
---timeout 10000
-test-mocha/**/*.ts
diff --git a/test-mocha/panels/lovelace/editor/config-util.spec.ts b/test-mocha/panels/lovelace/editor/config-util.spec.ts
index bfba395379..d30ac84fa3 100644
--- a/test-mocha/panels/lovelace/editor/config-util.spec.ts
+++ b/test-mocha/panels/lovelace/editor/config-util.spec.ts
@@ -1,4 +1,4 @@
-import * as assert from "assert";
+import { assert } from "chai";
 
 import {
   swapCard,
@@ -43,7 +43,7 @@ describe("swapCard", () => {
     };
 
     const result = swapCard(config, [0, 0], [1, 1]);
-    const expected = {
+    const expected: LovelaceConfig = {
       views: [
         {
           cards: [{ type: "v2-c2" }, { type: "v1-c2" }],
@@ -69,7 +69,7 @@ describe("moveCard", () => {
     };
 
     const result = moveCard(config, [1, 0], [0]);
-    const expected = {
+    const expected: LovelaceConfig = {
       views: [
         {
           cards: [{ type: "card1" }],
@@ -95,7 +95,7 @@ describe("moveCard", () => {
     };
 
     const result = moveCard(config, [1, 0], [0]);
-    const expected = {
+    const expected: LovelaceConfig = {
       views: [
         {
           cards: [{ type: "v1-c1" }, { type: "v1-c2" }, { type: "v2-c1" }],
@@ -147,7 +147,7 @@ describe("swapView", () => {
     };
 
     const result = swapView(config, 1, 0);
-    const expected = {
+    const expected: LovelaceConfig = {
       views: [
         {
           title: "view2",
@@ -177,7 +177,7 @@ describe("swapView", () => {
     };
 
     const result = swapView(config, 0, 0);
-    const expected = {
+    const expected: LovelaceConfig = {
       views: [
         {
           title: "view1",
diff --git a/test-mocha/tsconfig.test.json b/test-mocha/tsconfig.test.json
index 0e7afc6855..ea24da6ec1 100644
--- a/test-mocha/tsconfig.test.json
+++ b/test-mocha/tsconfig.test.json
@@ -1,6 +1,7 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "module": "commonjs"
+    "module": "commonjs",
+    "esModuleInterop": true
   }
 }
diff --git a/test-mocha/util/calculate.spec.ts b/test-mocha/util/calculate.spec.ts
index 8470e27828..49c8fa5109 100644
--- a/test-mocha/util/calculate.spec.ts
+++ b/test-mocha/util/calculate.spec.ts
@@ -1,4 +1,4 @@
-import * as assert from "assert";
+import { assert } from "chai";
 import {
   getValueInPercentage,
   normalize,
@@ -7,19 +7,19 @@ import {
 
 describe("Calculate tests", function () {
   it("Test getValueInPercentage", function () {
-    assert.equal(getValueInPercentage(10, 0, 100), 10);
-    assert.equal(getValueInPercentage(120, 0, 100), 120);
-    assert.equal(getValueInPercentage(-10, 0, 100), -10);
-    assert.equal(getValueInPercentage(10.33333, 0, 100), 10.33333);
+    assert.strictEqual(getValueInPercentage(10, 0, 100), 10);
+    assert.strictEqual(getValueInPercentage(120, 0, 100), 120);
+    assert.strictEqual(getValueInPercentage(-10, 0, 100), -10);
+    assert.strictEqual(getValueInPercentage(10.33333, 0, 100), 10.33333);
   });
   it("Test normalize", function () {
-    assert.equal(normalize(10, 0, 100), 10);
-    assert.equal(normalize(1, 10, 100), 10);
-    assert.equal(normalize(100, 0, 10), 10);
+    assert.strictEqual(normalize(10, 0, 100), 10);
+    assert.strictEqual(normalize(1, 10, 100), 10);
+    assert.strictEqual(normalize(100, 0, 10), 10);
   });
   it("Test roundWithOneDecimal", function () {
-    assert.equal(roundWithOneDecimal(10), 10);
-    assert.equal(roundWithOneDecimal(10.3), 10.3);
-    assert.equal(roundWithOneDecimal(10.3333), 10.3);
+    assert.strictEqual(roundWithOneDecimal(10), 10);
+    assert.strictEqual(roundWithOneDecimal(10.3), 10.3);
+    assert.strictEqual(roundWithOneDecimal(10.3333), 10.3);
   });
 });
diff --git a/test-mocha/util/generate-brands-url-spec.ts b/test-mocha/util/generate-brands-url-spec.ts
index 6d3c48edda..169c0e0ca8 100644
--- a/test-mocha/util/generate-brands-url-spec.ts
+++ b/test-mocha/util/generate-brands-url-spec.ts
@@ -1,4 +1,4 @@
-import * as assert from "assert";
+import { assert } from "chai";
 import { brandsUrl } from "../../src/util/brands-url";
 
 describe("Generate brands Url", function () {
diff --git a/test-mocha/util/generate-documentation-url.spec.ts b/test-mocha/util/generate-documentation-url.spec.ts
index 9e34e61448..1eb5ed51f0 100644
--- a/test-mocha/util/generate-documentation-url.spec.ts
+++ b/test-mocha/util/generate-documentation-url.spec.ts
@@ -1,4 +1,4 @@
-import * as assert from "assert";
+import { assert } from "chai";
 import { documentationUrl } from "../../src/util/documentation-url";
 
 describe("Generate documentation URL", function () {
diff --git a/translations/frontend/af.json b/translations/frontend/af.json
index ae1eaaf418..b225047649 100644
--- a/translations/frontend/af.json
+++ b/translations/frontend/af.json
@@ -79,6 +79,19 @@
             "unknown": "Onbekend"
         }
     },
+    "supervisor": {
+        "my": {
+            "error_addon_no_ingress": "Die aangevraagde byvoegsel ondersteun nie ingryping nie"
+        },
+        "snapshot": {
+            "created": "Geskep"
+        },
+        "system": {
+            "supervisor": {
+                "search": "Soek"
+            }
+        }
+    },
     "ui": {
         "auth_store": {
             "ask": "Wil u hierdie aanmelding stoor?",
@@ -635,6 +648,13 @@
                     "account": {
                         "google": {
                             "sync_entities_404_message": "Kon nie u entiteite met Google sinkroniseer nie, vra Google 'Hallo Google, sinkroniseer my toestelle' om u entiteite te sinkroniseer."
+                        },
+                        "remote": {
+                            "not_connected": "Nie gekoppel nie",
+                            "remote_enabled": {
+                                "caption": "Verbind outomaties",
+                                "description": "Skakel hierdie opsie in om seker te maak dat u Home Assistent-instansie altyd op afstand toeganklik is."
+                            }
                         }
                     },
                     "description_features": "Beheer terwyl weg van die huis af is, integreer met Alexa en Google Assistant.",
@@ -819,6 +839,7 @@
                             "open_site": "Maak webwerf oop"
                         },
                         "finish": "Klaar",
+                        "next": "Volgende",
                         "not_all_required_fields": "Nie alle vereiste velde is gevul nie.",
                         "submit": "Dien in"
                     },
@@ -966,6 +987,8 @@
                         "add_scene": "Voeg toneel by",
                         "delete_confirm": "Is u seker dat u hierdie toneel wil uitvee?",
                         "delete_scene": "Verwyder toneel",
+                        "duplicate": "Dupliseer",
+                        "duplicate_scene": "Duplikaat toneel",
                         "edit_scene": "Wysig toneel",
                         "header": "Toneel-Redakteur",
                         "introduction": "Die toneel redakteur kan jy om te skep en wysig skerms. Volg asseblief die skakel hieronder om die instruksies te lees om seker te maak dat jy het ingestel Huis Assistent korrek.",
@@ -1089,6 +1112,12 @@
                     "introduction": "Met sones kan u sekere streke op aarde spesifiseer. As 'n persoon binne 'n sone is, neem die toestand die sonenaam aan. Sones kan ook as 'n sneller of toestand gebruik word in outomatiseringsinstellings.",
                     "no_zones_created_yet": "Lyk asof jy nog geen sones geskep het nie."
                 },
+                "zwave_js": {
+                    "add_node": {
+                        "interview_failed": "Die toestelonderhoud het misluk. Bykomende inligting kan moontlik in die logboeke beskikbaar wees.",
+                        "interview_started": "Die toestel word ondervra. Dit kan 'n geruime tyd neem."
+                    }
+                },
                 "zwave": {
                     "common": {
                         "index": "Indeks",
diff --git a/translations/frontend/ar.json b/translations/frontend/ar.json
index 5902381b4d..874b69ddb8 100644
--- a/translations/frontend/ar.json
+++ b/translations/frontend/ar.json
@@ -124,6 +124,14 @@
         },
         "my": {
             "error_addon_not_found": "لم يتم العثور على الإضافة"
+        },
+        "snapshot": {
+            "created": "خلقت"
+        },
+        "system": {
+            "supervisor": {
+                "search": "بحث"
+            }
         }
     },
     "ui": {
@@ -383,6 +391,10 @@
                 "zha_device_card": {
                     "device_name_placeholder": "تغيير اسم الجهاز"
                 }
+            },
+            "zha_reconfigure_device": {
+                "button_hide": "أخف التفاصيل",
+                "button_show": "إظهار التفاصيل"
             }
         },
         "duration": {
@@ -421,7 +433,8 @@
                 "areas": {
                     "data_table": {
                         "area": "المنطقة",
-                        "devices": "الأجهزة"
+                        "devices": "الأجهزة",
+                        "entities": "الكيانات"
                     },
                     "delete": {
                         "confirmation_text": "سيتم إلغاء تعيين جميع الأجهزة في هذه المنطقة.",
@@ -429,8 +442,10 @@
                     },
                     "editor": {
                         "area_id": "المنطقة",
+                        "linked_entities_caption": "الكيانات",
                         "name": "اسم",
                         "name_required": "الاسم مطلوب",
+                        "no_linked_entities": "لا توجد كيانات مرتبطة بهذه المنطقة.",
                         "unknown_error": "خطأ غير معروف"
                     },
                     "picker": {
@@ -649,6 +664,14 @@
                         "integrations": "تكاملات",
                         "integrations_introduction2": "تحقق من الموقع ل",
                         "integrations_link_all_features": " جميع الميزات المتوفرة",
+                        "remote": {
+                            "connected": "متصل",
+                            "not_connected": "غير متصل",
+                            "remote_enabled": {
+                                "caption": "الاتصال تلقائيا",
+                                "description": "قم بتفعيل هذا الخيار للتأكد من أن Home Assistant الخاص بك يمكن الوصول إليه دائمًا عن بُعد."
+                            }
+                        },
                         "tts": {
                             "dialog": {
                                 "example_message": "مرحبًا {name} ، يمكنك تشغيل أي نص على أي مشغل وسائط مدعوم!",
@@ -752,7 +775,8 @@
                     "documentation": "الوثائق",
                     "home_assistant_logo": "شعار Home Assistant",
                     "integrations": "تكاملات",
-                    "issues": "الاعطال"
+                    "issues": "الاعطال",
+                    "setup_time": "وقت التنصيب"
                 },
                 "integration_panel_move": {
                     "link_integration_page": "صفحة التكاملات",
@@ -777,6 +801,9 @@
                         "options": "خيارات",
                         "rename": "إعادة تسمية",
                         "restart_confirm": "أعد تشغيل Home Assistant لإنهاء حذف هذا التكامل",
+                        "state": {
+                            "setup_error": "فشل في التنصيب"
+                        },
                         "system_options": "خيارات النظام",
                         "unnamed_entry": "إدخال بدون اسم"
                     },
@@ -791,6 +818,7 @@
                         },
                         "finish": "إنهاء",
                         "loading_first_time": "يرجى الانتظار بينما يتم تثبيت الـintegration",
+                        "next": "التالى",
                         "not_all_required_fields": "لم يتم تعبئة جميع الحقول المطلوبة."
                     },
                     "configure": "إعداد",
@@ -914,6 +942,8 @@
                         "icon": "أيقونة"
                     },
                     "picker": {
+                        "duplicate": "تكرار",
+                        "duplicate_scene": "تكرار بطاقة",
                         "headers": {
                             "name": "الاسم"
                         }
@@ -1034,6 +1064,12 @@
                     "dashboard": {
                         "dump_not_ready_confirm": "تحميل"
                     },
+                    "logs": {
+                        "log_level": "مستوى التسجيل في السجل"
+                    },
+                    "navigation": {
+                        "logs": "السجلات"
+                    },
                     "remove_node": {
                         "cancel_exclusion": "إلغاء الاستبعاد",
                         "start_exclusion": "بدء الاستبعاد"
diff --git a/translations/frontend/bg.json b/translations/frontend/bg.json
index abb6379f7a..dbc8595145 100644
--- a/translations/frontend/bg.json
+++ b/translations/frontend/bg.json
@@ -350,6 +350,7 @@
             "create": "Създаване",
             "create_blocked_not_running": "Създаването на снапшот в момента не е възможно, тъй като системата е в състояние {state}.",
             "create_snapshot": "Създаване на снапшот",
+            "created": "Създаден",
             "description": "Снапшотите ви позволяват лесно да архивирате и възстановявате всички данни от вашия екземпляр на Home Assistant.",
             "enter_password": "Моля, въведете парола.",
             "folder": {
@@ -425,6 +426,7 @@
                 "leave_beta_description": "Получавайте стабилни актуализации за Home Assistant, Supervisor и хоста",
                 "ram_usage": "Използване на RAM от Supervisor",
                 "reload_supervisor": "Презареждане на Supervisor",
+                "search": "Търсене",
                 "share_diagnostics": "Споделяне на диагностика",
                 "share_diagnostics_description": "Споделяйте доклади за сривове и диагностична информация.",
                 "share_diagonstics_description": "Искате ли да споделяте автоматично отчети за сривове и диагностична информация, когато Supervisor срещне неочаквани грешки? {line_break} Това ще ни позволи да отстраним проблемите, информацията е достъпна само за екипа на Home Assistant Core и няма да бъде споделяна с други. {line_break} Данните не включват никаква частна/чувствителна информация и можете да деактивирате това в настройките по всяко време, когато пожелаете.",
@@ -887,7 +889,7 @@
                     "enabled_description": "Изключените обекти няма да бъдат добавени в Home Assistant.",
                     "enabled_label": "Активирай обекта",
                     "enabled_restart_confirm": "Рестартирайте Home Assistant, за да завършите активирането на обектите",
-                    "entity_id": "ID на обект",
+                    "entity_id": "ID на обекта",
                     "icon": "Икона",
                     "icon_error": "Иконите трябва да са във формат „prefix: iconname“, напр. mdi:home",
                     "name": "Име",
@@ -1080,8 +1082,8 @@
                     "add": "Добавете устройства чрез това устройство",
                     "clusters": "Управление на клъстери",
                     "device_children": "Преглед на дъщерни",
-                    "reconfigure": "Преконфигуриране на устройство",
-                    "remove": "Премахване на устройство",
+                    "reconfigure": "Преконфигуриране на устройството",
+                    "remove": "Премахване на устройството",
                     "zigbee_information": "Подпис на Zigbee устройството"
                 },
                 "confirmations": {
@@ -1116,6 +1118,7 @@
                 "in_progress": "Устройството се преконфигурира. Това може да отнеме известно време.",
                 "min_max_change": "мин/макс/промяна",
                 "reporting_header": "Отчитане",
+                "run_in_background": "Можете да затворите този диалогов прозорец и преконфигурирането ще продължи във фонов режим.",
                 "start_reconfiguration": "Стартиране на преконфигуриране"
             }
         },
@@ -1157,7 +1160,7 @@
         },
         "notification_toast": {
             "connection_lost": "Връзката е прекъсната. Повторно свързване...",
-            "intergration_starting": "Стартиране на {integration}, не всичко ще бъде налично, докато процесът не приключи.",
+            "integration_starting": "Стартиране на {integration}, не всичко ще бъде налично, докато процесът не приключи.",
             "service_call_failed": "Неуспешно повикване на услуга {service}.",
             "started": "Home Assistant стартира успешно!",
             "starting": "Home Assistant стартира, не всичко ще е на разположение, докато не приключи.",
@@ -1595,6 +1598,7 @@
                             "title": "Alexa"
                         },
                         "connected": "Свързан",
+                        "connecting": "Свързване...",
                         "connection_status": "Състояние на връзката с облака",
                         "fetching_subscription": "Извличане на абонамент...",
                         "google": {
@@ -1611,7 +1615,7 @@
                         },
                         "integrations": "Интеграции",
                         "integrations_introduction": "Интеграциите за Home Assistant Cloud ви позволяват свързването с услуги в облака, без да се налага да излагате публично своя Home Assistant в интернет.",
-                        "integrations_introduction2": "Проверете уебсайта за",
+                        "integrations_introduction2": "Проверете уебсайта за ",
                         "integrations_link_all_features": "всички налични функции",
                         "manage_account": "Управление на акаунта",
                         "nabu_casa_account": "Акаунт в Nabu Casa",
@@ -1619,10 +1623,15 @@
                         "remote": {
                             "access_is_being_prepared": "Подготвя се отдалечен достъп. Ще ви уведомим, когато е готов.",
                             "certificate_info": "Информация за сертификата",
+                            "connected": "Свързан",
                             "info": "Home Assistant Cloud осигурява сигурна отдалечена връзка с вашата инсталация, докато сте извън дома.",
                             "instance_is_available": "Вашата инсталация е налична на",
                             "instance_will_be_available": "Вашата инсталация ще е налична на",
                             "link_learn_how_it_works": "Научете как работи",
+                            "not_connected": "Не е свързан",
+                            "remote_enabled": {
+                                "caption": "Автоматично свързване"
+                            },
                             "title": "Дистанционен контрол"
                         },
                         "sign_out": "Отписване",
@@ -1820,6 +1829,7 @@
                     }
                 },
                 "devices": {
+                    "add_prompt": "Все още не са добавени {name} с това устройство. Можете да добавите, като кликнете върху бутона + по-горе.",
                     "automation": {
                         "actions": {
                             "caption": "Когато нещо се задейства...",
@@ -1987,7 +1997,7 @@
                     "frontend": "интерфейс",
                     "frontend_version": "Версия на интерфейса: {version} - {type}",
                     "home_assistant_logo": "Лого на Home Assistant",
-                    "icons_by": "Икони от",
+                    "icons_by": "икони от",
                     "integrations": "Интеграции",
                     "license": "Публикувано под лиценза Apache 2.0",
                     "path_configuration": "Път към configuration.yaml: {path}",
@@ -2056,6 +2066,7 @@
                             "open_site": "Отваряне на уеб сайт"
                         },
                         "loading_first_time": "Моля, изчакайте, докато се инсталира интеграцията",
+                        "next": "Следващ",
                         "not_all_required_fields": "Не всички задължителни полета са попълнени.",
                         "not_loaded": "Интеграцията не можа да бъде заредена, опитайте да рестартирате Home Assistant."
                     },
@@ -2069,10 +2080,16 @@
                         "show": "Покажи",
                         "show_disabled": "Показване на деактивираните интеграции"
                     },
-                    "discovered": "Открит",
-                    "home_assistant_website": "Уебсайт на Home Assistant",
+                    "discovered": "Открита",
+                    "home_assistant_website": "уебсайта на Home Assistant",
                     "ignore": {
-                        "confirm_ignore": "Наистина ли не искате да настроите тази интеграция? Можете да отмените това, като кликнете върху „Показване на игнорирани интеграции“ в менюто горе вдясно."
+                        "confirm_delete_ignore_title": "Да се спре ли игнорирането на {name}?",
+                        "confirm_ignore": "Наистина ли не искате да настроите тази интеграция? Можете да отмените това, като кликнете върху „Показване на игнорирани интеграции“ в менюто горе вдясно.",
+                        "hide_ignored": "Скриване на игнорираните интеграции",
+                        "ignore": "Игнорирайте",
+                        "ignored": "Игнорирана",
+                        "show_ignored": "Показване на игнорираните интеграции",
+                        "stop_ignore": "Спрете да игнорирате"
                     },
                     "integration": "интеграция",
                     "integration_not_found": "Не е намерена интеграция.",
@@ -3465,6 +3482,14 @@
                     "primary_color": "Основен цвят",
                     "reset": "Нулиране"
                 },
+                "time_format": {
+                    "formats": {
+                        "12": "12 часа (AM/PM)",
+                        "24": "24 часа",
+                        "language": "Авто (езикова настройка)",
+                        "system": "Системна настройка"
+                    }
+                },
                 "vibrate": {
                     "description": "Разрешаване или забраняване на вибрациите на това устройство при управление на устройства.",
                     "header": "Вибрация"
@@ -3473,7 +3498,7 @@
         },
         "sidebar": {
             "done": "Готово",
-            "external_app_configuration": "Конфигурация на приложение"
+            "external_app_configuration": "Конфигурация на приложението"
         }
     }
 }
\ No newline at end of file
diff --git a/translations/frontend/ca.json b/translations/frontend/ca.json
index efa1660a2d..a62762e1bb 100644
--- a/translations/frontend/ca.json
+++ b/translations/frontend/ca.json
@@ -366,6 +366,7 @@
         },
         "my": {
             "error": "S'ha produït un error desconegut",
+            "error_addon_no_ingress": "El complement sol·licitat no admet ingress",
             "error_addon_not_found": "No s'ha trobat el complement",
             "faq_link": "Preguntes freqüents de My Home Assistant",
             "not_supported": "La instància de Home Assistant no admet aquesta redirecció. Consulta {link} per veure les redireccions compatibles i en quina versió es van introduir."
@@ -383,6 +384,7 @@
             "create": "Crea",
             "create_blocked_not_running": "Ara mateix no és possible crear una instantània perquè el sistema es troba en estat {state}.",
             "create_snapshot": "Crea instantània",
+            "created": "Creada",
             "description": "Les instantànies et permeten fer una còpia de seguretat i recuperar les dades de la teva instància de Home Assistant.",
             "enter_password": "Introdueix una contrasenya.",
             "folder": {
@@ -458,6 +460,7 @@
                 "leave_beta_description": "Obtén actualitzacions estables de Home Assistant, del Supervisor i de l'amfitrió",
                 "ram_usage": "Ús de RAM del Supervisor",
                 "reload_supervisor": "Torna a carregar el Supervisor",
+                "search": "Cerca",
                 "share_diagnostics": "Comparteix diagnòstics",
                 "share_diagnostics_description": "Comparteix informes d'errors i informació de diagnòstic.",
                 "share_diagonstics_description": "Vols compartir automàticament informes d'error i informació de diagnòstic quan el Supervisor trobi amb errors inesperats?{line_break} Això ens permetrà solucionar problemes, la informació només és accessible per a l'equip de Home Assistant Core i no es compartirà amb altres persones.{line_break} Les dades no inclouen informació privada/confidencial, ho pots desactivar en qualsevol moment a la configuració.",
@@ -1258,7 +1261,7 @@
         "notification_toast": {
             "connection_lost": "Connexió perduda. Tornant a connectar...",
             "dismiss": "Omet",
-            "intergration_starting": "Iniciant {integration}, no estarà tot disponible fins que acabi.",
+            "integration_starting": "Iniciant {integration}, no estarà tot disponible fins que acabi.",
             "service_call_failed": "Ha fallat la crida al servei {service}.",
             "started": "Home Assistant s'ha iniciat!",
             "starting": "Home Assistant està iniciant-se, no estarà tot disponible fins que acabi",
@@ -2585,6 +2588,8 @@
                         "add_scene": "Afegeix escena",
                         "delete_confirm": "Estàs segur que vols eliminar aquesta escena?",
                         "delete_scene": "Elimina l'escena",
+                        "duplicate": "Duplica",
+                        "duplicate_scene": "Duplica escena",
                         "edit_scene": "Edita escena",
                         "header": "Editor d'escenes",
                         "headers": {
@@ -2912,7 +2917,9 @@
                         "controller_in_inclusion_mode": "El controlador Z-Wave ara està en mode d'inclusió.",
                         "follow_device_instructions": "Segueix les instruccions del teu dispositiu per activar la vinculació al dispositiu.",
                         "inclusion_failed": "No s'ha pogut afegir el node. Consulta els registres per a més informació.",
-                        "inclusion_finished": "S'ha afegit el node. Pot ser que les entitats triguin uns minuts a aparèixer mentre s'acaba de configurar el node en segon pla.",
+                        "inclusion_finished": "S'ha afegit el node.",
+                        "interview_failed": "Ha fallat la consulta del dispositiu. Pots trobar informació addicional als registres.",
+                        "interview_started": "S'està consultant el dispositiu. Això pot trigar una estona.",
                         "introduction": "Aquest assistent et guiarà perquè afegeixis un node a la teva xarxa Z-Wave.",
                         "secure_inclusion_warning": "Els dispositius segurs necessiten una amplada de banda més gran; si tens molts dispositius segurs pot ser que la xarxa Z-Wave vagi més lenta. Et recomanem que utilitzis la inclusió segura només en dispositius que realment ho necessitin com ara panys i controls de portes.",
                         "start_inclusion": "Inicia la inclusió",
@@ -3948,7 +3955,7 @@
                     "header": "Mòduls d'autenticació amb múltiples passos"
                 },
                 "number_format": {
-                    "description": "Trieu el format dels números.",
+                    "description": "Tria el format dels números.",
                     "dropdown_label": "Format dels números",
                     "formats": {
                         "comma_decimal": "1,234,567.89",
@@ -3974,7 +3981,7 @@
                 },
                 "refresh_tokens": {
                     "confirm_delete": "Estàs segur que vols eliminar el token d'actualització per a {name}?",
-                    "created_at": "Creat el {date}",
+                    "created_at": "Creat {date}",
                     "current_token_tooltip": "No s'ha pogut eliminar el token d'autenticació d'actualització.",
                     "delete_failed": "No s'ha pogut eliminar el token d'autenticació d'actualització.",
                     "description": "Cada token d'autenticació d'actualització representa un inici de sessió diferent. Els tokens d'autenticació d'actualització s'eliminaran automàticament quan tanquis la sessió. A sota hi ha una llista de tokens d'autenticació d'actualització que estan actius actualment al teu compte.",
@@ -4001,6 +4008,17 @@
                     "primary_color": "Color primari",
                     "reset": "Restablir"
                 },
+                "time_format": {
+                    "description": "Tria el format de data i hora.",
+                    "dropdown_label": "Format de data i hora",
+                    "formats": {
+                        "12": "12 hores (AM/PM)",
+                        "24": "24 hores",
+                        "language": "Automàtic (utilitza la configuració d'idioma)",
+                        "system": "Utilitza la configuració regional del sistema"
+                    },
+                    "header": "Format de data i hora"
+                },
                 "vibrate": {
                     "description": "Activa o desactiva la vibració en d'aquest dispositiu.",
                     "header": "Vibra"
diff --git a/translations/frontend/cs.json b/translations/frontend/cs.json
index 06d28ece51..9278395619 100644
--- a/translations/frontend/cs.json
+++ b/translations/frontend/cs.json
@@ -366,6 +366,7 @@
         },
         "my": {
             "error": "Nastala neznámá chyba",
+            "error_addon_no_ingress": "Požadovaný doplněk nepodporuje ingress",
             "error_addon_not_found": "Doplněk nebyl nalezen",
             "faq_link": "Časté dotazy týkající se My Home Assistant",
             "not_supported": "Toto přesměrování není vaší instancí Home Assistant podporováno. Zkontrolujte {link} pro podporovaná přesměrování a verzi, ve které byla zavedena."
@@ -383,6 +384,7 @@
             "create": "Vytvořit",
             "create_blocked_not_running": "Vytvoření zálohy není momentálně možné, protože systém je ve \"{state}\".",
             "create_snapshot": "Vytvořit zálohu",
+            "created": "Vytvořeno",
             "description": "Zálohy umožňují snadno zálohovat a obnovovat všechna data vaší instance Home Assistant.",
             "enter_password": "Prosím zadejte heslo.",
             "folder": {
@@ -458,6 +460,7 @@
                 "leave_beta_description": "Získejte stabilní aktualizace pro Home Assistant, Supervisor a hostitele",
                 "ram_usage": "Využití paměti RAM Supervisorem",
                 "reload_supervisor": "Nově načíst Supervisor",
+                "search": "Hledat",
                 "share_diagnostics": "Sdílet diagnostické informace",
                 "share_diagnostics_description": "Sdílejte zprávy o selhání a diagnostické informace.",
                 "share_diagonstics_description": "Chcete automaticky sdílet zprávy o selhání a diagnostické informace, když  Supervisor narazí na neočekávané chyby? {line_break} To nám umožní vyřešit problémy, informace jsou přístupné pouze týmu Home Assistant Core a nebudou sdíleny s ostatními. {line_break} Data neobsahují žádné soukromé / citlivé informace a tato volba může být kdykoliv deaktivována v nastavení.",
@@ -561,9 +564,11 @@
             },
             "light": {
                 "brightness": "Jas",
+                "cold_white_value": "Jas studené bílé",
                 "color_brightness": "Jas barev",
                 "color_temperature": "Teplota barvy",
                 "effect": "Efekt",
+                "warm_white_value": "Jas teplé bílé",
                 "white_value": "Jas bílé"
             },
             "lock": {
@@ -1195,7 +1200,22 @@
                 }
             },
             "zha_reconfigure_device": {
-                "heading": "Znovunastavení zařízení"
+                "attribute": "Atribut",
+                "battery_device_warning": "Před zahájením procesu rekonfigurace budete muset probudit zařízení napájená z baterie. Pokyny k probuzení zařízení najdete v příručce k zařízení.",
+                "bind_header": "Vazba",
+                "button_hide": "Skrýt podrobnosti",
+                "button_show": "Podrobnosti",
+                "cluster_header": "Klastr",
+                "configuration_complete": "Změna konfigurace zařízení dokončena.",
+                "configuration_failed": "Rekonfigurace zařízení se nezdařila. Další informace mohou být k dispozici v protokolech.",
+                "configuring_alt": "Nastavuji",
+                "heading": "Znovunastavení zařízení",
+                "in_progress": "Zařízení se překonfigurová. Může to chvíli trvat.",
+                "introduction": "Překonfigurujte zařízení v síti Zigbee. Tuto funkci použijte, pokud zařízení nefunguje správně.",
+                "min_max_change": "min/max/změna",
+                "reporting_header": "Hlášení",
+                "run_in_background": "Toto dialogové okno můžete zavřít a změna konfigurace bude pokračovat na pozadí.",
+                "start_reconfiguration": "Spustit rekonfiguraci"
             }
         },
         "duration": {
@@ -1241,7 +1261,7 @@
         "notification_toast": {
             "connection_lost": "Připojení bylo ztraceno. Připojuji se znovu...",
             "dismiss": "Zavřít",
-            "intergration_starting": "Integrace {integration} se spouští - dokud nebude spuštění dokončeno, nemusí být vše k dispozici.",
+            "integration_starting": "Integrace {integration} se spouští - dokud nebude spuštění dokončeno, nemusí být vše k dispozici.",
             "service_call_failed": "Službu {service} se nepodařilo zavolat.",
             "started": "Home Assistant je spuštěn!",
             "starting": "Home Assistant se spouští, ne všechno bude k dispozici, dokud nebude spuštění dokončeno.",
@@ -1736,7 +1756,8 @@
                             "link_learn_how_it_works": "Zjistěte, jak to funguje",
                             "not_connected": "Nepřipojeno",
                             "remote_enabled": {
-                                "caption": "Automaticky se připojit"
+                                "caption": "Automaticky se připojit",
+                                "description": "Povolením této možnosti zajistíte, aby byla vaše instance Home Assistant vždy vzdáleně přístupná."
                             },
                             "title": "Vzdálené ovládání"
                         },
@@ -2148,6 +2169,7 @@
                     "license": "Publikováno pod licencí Apache 2.0",
                     "path_configuration": "Cesta k souboru configuration.yaml: {path}",
                     "server": "server",
+                    "setup_time": "Doba nastavení",
                     "source": "Zdroj:",
                     "system_health_error": "Součást System Health není načtena. Přidejte 'system_health:' do configuration.yaml",
                     "system_health": {
@@ -2227,6 +2249,7 @@
                         },
                         "finish": "Dokončit",
                         "loading_first_time": "Počkejte prosím, než bude integrace nainstalována.",
+                        "next": "Další",
                         "not_all_required_fields": "Nejsou vyplněna všechna povinná pole.",
                         "not_loaded": "Integraci se nepodařilo načíst, zkuste restartovat Home Assistant.",
                         "pick_flow_step": {
@@ -2565,6 +2588,8 @@
                         "add_scene": "Přidat scénu",
                         "delete_confirm": "Opravdu chcete tuto scénu smazat?",
                         "delete_scene": "Smazat scénu",
+                        "duplicate": "Duplikovat",
+                        "duplicate_scene": "Duplikovat scénu",
                         "edit_scene": "Upravit scénu",
                         "header": "Editor scén",
                         "headers": {
@@ -2798,7 +2823,12 @@
                         "value": "Hodnota"
                     },
                     "configuration_page": {
-                        "update_button": "Aktualizovat nastavení"
+                        "shortcuts_title": "Zástupci",
+                        "update_button": "Aktualizovat nastavení",
+                        "zha_options": {
+                            "default_light_transition": "Výchozí doba přechodu světla (sekundy)",
+                            "title": "Globální možnosti"
+                        }
                     },
                     "device_pairing_card": {
                         "CONFIGURED": "Nastavení dokončeno",
@@ -2886,7 +2916,7 @@
                         "controller_in_inclusion_mode": "Váš ovladač Z-Wave je nyní v režimu začlenění.",
                         "follow_device_instructions": "Podle pokynů dodaných se zařízením aktivujte párování na zařízení.",
                         "inclusion_failed": "Uzel nelze přidat. Další informace najdete v protokolech.",
-                        "inclusion_finished": "Uzel byl přidán. Může trvat několik minut, než se všechny entity zobrazí, když dokončíme nastavení uzlu na pozadí.",
+                        "inclusion_finished": "Uzel byl přidán.",
                         "introduction": "Tento průvodce vás provede přidáním uzlu do vaší sítě Z-Wave.",
                         "secure_inclusion_warning": "Zabezpečená zařízení vyžadují větší šířku pásma; příliš mnoho zabezpečených zařízení může zpomalit vaši síť Z-Wave. Bezpečné začlenění doporučujeme používat pouze u zařízení, která to vyžadují, jako jsou zámky nebo otvírače garážových vrat.",
                         "start_inclusion": "Zahájit začlenění",
@@ -2924,7 +2954,12 @@
                         "node_status": "Stav uzlu",
                         "zwave_info": "Z-Wave Info"
                     },
+                    "logs": {
+                        "log_level": "Úroveň protokolu",
+                        "title": "Z-Wave JS protokoly"
+                    },
                     "navigation": {
+                        "logs": "Protokoly",
                         "network": "Síť"
                     },
                     "network_status": {
@@ -2939,6 +2974,9 @@
                         "header": "Konfigurace zařízení Z-Wave",
                         "introduction": "Spravujte a upravujte specifické konfigurační parametry zařízení (uzlu) pro vybrané zařízení",
                         "parameter_is_read_only": "Tento parametr je jen pro čtení.",
+                        "set_param_accepted": "Parametr byl aktualizován.",
+                        "set_param_error": "Vyskytla se chyba.",
+                        "set_param_queued": "Změna parametru byla zařazena do fronty a bude aktualizována, jakmile se zařízení probudí.",
                         "zwave_js_device_database": "Databáze zařízení Z-Wave JS"
                     },
                     "node_status": {
@@ -2948,6 +2986,14 @@
                         "dead": "Mrtvý",
                         "unknown": "Nezjištěno"
                     },
+                    "reinterview_node": {
+                        "battery_device_warning": "Před zahájením opakovaného rozhovoru je třeba probudit zařízení napájená z baterie. Pokyny k probuzení zařízení naleznete v příručce k zařízení.",
+                        "in_progress": "Zařízení je dotazováno. To může nějakou dobu trvat.",
+                        "interview_complete": "Pohovor se zařízením dokončen.",
+                        "interview_failed": "Dotazování zařízení se nezdařilo. Další informace mohou být k dispozici v protokolech.",
+                        "run_in_background": "Toto dialogové okno můžete zavřít a rozhovor bude pokračovat na pozadí.",
+                        "start_reinterview": "Zahájit opakovaný rozhovor"
+                    },
                     "remove_node": {
                         "cancel_exclusion": "Zrušit vyloučení",
                         "controller_in_exclusion_mode": "Kontroler Z-Wave je nyní v režimu vyloučení.",
@@ -3826,7 +3872,7 @@
                         "required_fields": "Vyplňte všechna povinná pole"
                     },
                     "intro": "Začněme tím, že vytvoříme uživatelský účet.",
-                    "required_field": "Povinný"
+                    "required_field": "Povinné"
                 }
             },
             "profile": {
@@ -3840,7 +3886,7 @@
                     "current_password": "Současné heslo",
                     "error_new_is_old": "Nové heslo se musí lišit od aktuálního hesla",
                     "error_new_mismatch": "Zadaná nová hesla se neshodují",
-                    "error_required": "Povinný",
+                    "error_required": "Povinné",
                     "header": "Změnit heslo",
                     "new_password": "Nové heslo",
                     "submit": "Odeslat",
@@ -3955,6 +4001,17 @@
                     "primary_color": "Základní barva",
                     "reset": "Obnovit"
                 },
+                "time_format": {
+                    "description": "Zvolte způsob formátování času.",
+                    "dropdown_label": "Formát času",
+                    "formats": {
+                        "12": "12hodinový (AM/PM)",
+                        "24": "24hodinový",
+                        "language": "Automaticky (dle nastaveného jazyka)",
+                        "system": "Dle systému"
+                    },
+                    "header": "Formát času"
+                },
                 "vibrate": {
                     "description": "Povolit nebo zakázat vibrace na tomto zařízení při ovládání ostatních zařízení.",
                     "header": "Vibrovat"
diff --git a/translations/frontend/da.json b/translations/frontend/da.json
index 2237a6af24..768c77d9ff 100644
--- a/translations/frontend/da.json
+++ b/translations/frontend/da.json
@@ -366,6 +366,7 @@
         },
         "my": {
             "error": "Der opstod en ukendt fejl",
+            "error_addon_no_ingress": "Tilføjelsesprogrammet understøtter ikke ingress",
             "error_addon_not_found": "Tilføjelsesprogrammet blev ikke fundet",
             "faq_link": "Ofte stillede spørgsmål om Home Assistant",
             "not_supported": "Denne omdirigering understøttes ikke af din Home Assistant installation. Kontroller {link} for de understøttede omdirigeringer og den version, de blev introduceret i."
@@ -383,6 +384,7 @@
             "create": "Opret",
             "create_blocked_not_running": "Det er ikke muligt at oprette et snapshot lige nu, fordi systemet er i tilstanden {state}.",
             "create_snapshot": "Opret snapshot",
+            "created": "Oprettet",
             "description": "Snapshots giver dig mulighed for nemt at sikkerhedskopiere og gendanne alle data fra dit instans af Home Assistant.",
             "enter_password": "Venligst indtast et kodeord.",
             "folder": {
@@ -458,6 +460,7 @@
                 "leave_beta_description": "Få stabile opdateringer til Home Assistant, Supervisor og værtsmaskinen",
                 "ram_usage": "Supervisor RAM forbrug",
                 "reload_supervisor": "Genindlæs Supervisor",
+                "search": "Søg",
                 "share_diagnostics": "Del diagnostik",
                 "share_diagnostics_description": "Del oplysninger om nedbrud og diagnosticeringsinformationer.",
                 "share_diagonstics_description": "Ønsker du automatisk at dele rapporter og fejlfindingsoplysninger når supervisoren oplever uventede fejl? {line_break} Dette vil lade os løse problemerne, informationerne er kun tilgængelige for Home Assistant Core teamet og vil ikke blive delt med andre. {line_break} Dataene indeholder ikke private/følsomme informationer og du kan slå det fra i indstillingerne til hver en tid.",
@@ -473,6 +476,7 @@
                 "unhealthy_title": "Din installation er usund",
                 "unsupported_description": "Nedenfor er en liste over problemer, der er fundet med din installation. Klik på linkene for at lære, hvordan du kan løse problemerne.",
                 "unsupported_reason": {
+                    "apparmor": "AppArmor er ikke aktiveret på værten",
                     "container": "Containere, der erfaringsmæssigt giver problemer",
                     "content-trust": "Validering af indholds-tillid er deaktiveret",
                     "dbus": "DBUS",
@@ -560,8 +564,11 @@
             },
             "light": {
                 "brightness": "Lysstyrke",
+                "cold_white_value": "kold hvid lysstyrke",
+                "color_brightness": "Farvetemperatur",
                 "color_temperature": "Farvetemperatur",
                 "effect": "Effekt",
+                "warm_white_value": "Varm hvid lysstyrke",
                 "white_value": "Hvidværdi"
             },
             "lock": {
@@ -840,6 +847,14 @@
                 "label": "Billede",
                 "unsupported_format": "Ikke-understøttet format, vælg venligst et JPEG-, PNG- eller GIF-billede."
             },
+            "related-filter-menu": {
+                "filter_by_area": "Filtrer efter område",
+                "filter_by_device": "Filtrer efter enhed",
+                "filter_by_entity": "Filtrer efter entitet",
+                "filtered_by_area": "område: {area_name}",
+                "filtered_by_device": "enhed: {device_name}",
+                "filtered_by_entity": "entitet: {entity_name}"
+            },
             "related-items": {
                 "area": "Område",
                 "automation": "En del af følgende automatiseringer",
@@ -877,6 +892,7 @@
                 }
             },
             "service-control": {
+                "integration_doc": "Dokumentation for integration",
                 "required": "Dette felt er påkrævet",
                 "service_data": "Service data",
                 "target": "Mål",
@@ -1117,7 +1133,7 @@
                         "min_max": "Genindlæs min / max entiteter",
                         "mqtt": "Genindlæs manuelt konfigurerede MQTT-entiteter",
                         "person": "Genindlæs personer",
-                        "ping": "Genindlæs ping sensorentiteter",
+                        "ping": "Genindlæs ping sensor entiteter",
                         "reload": "Genindlæs {domain}",
                         "rest": "Genindlæs REST entiteter og REST notifikationstjenester",
                         "rpi_gpio": "Genindlæs Raspberry Pi GPIO entiteter",
@@ -1182,6 +1198,24 @@
                 "zha_device_card": {
                     "device_name_placeholder": "Skift enhedsnavn"
                 }
+            },
+            "zha_reconfigure_device": {
+                "attribute": "Attribut",
+                "battery_device_warning": "Du er nødt til at tænde for batteridrevne enheder før du stater konfigurationen. Læs mere i manualen til din enhed for at få mere information",
+                "bind_header": "Binding",
+                "button_hide": "Skjul detaljer",
+                "button_show": "Vis detaljer",
+                "cluster_header": "Klynge",
+                "configuration_complete": "Konfiguration af enheden er færdig",
+                "configuration_failed": "konfuguration af enheden fejlede.  Yderligere information kam findes i logfilerne  ",
+                "configuring_alt": "Konfigurerer",
+                "heading": "Omkonfigurering af enhed",
+                "in_progress": "Enheden rekonfigureres. Dette kan tage noget tid",
+                "introduction": "Konfigurer en enhed på dit Zigbee netværk. Brug denne mulighed hvos din enhed ikke virker korrekt",
+                "min_max_change": "Min/maks/ændre",
+                "reporting_header": "Rapportering",
+                "run_in_background": "Du kan lukke denne dialogboks.Konfigurationen fortsætter i baggrunden",
+                "start_reconfiguration": "Start konfiguration"
             }
         },
         "duration": {
@@ -1202,6 +1236,14 @@
                 "key_wrong_type": "Den angivne værdi for \"{key}\" understøttes ikke af den visuelle editor. Vi understøtter ( {type_correct} ) men modtog ( {type_wrong} ).",
                 "no_template_editor_support": "Skabeloner understøttes ikke i visuel editor",
                 "no_type_provided": "Der er ikke angivet nogen type."
+            },
+            "supervisor": {
+                "ask": "Anmod om hjælp",
+                "observer": "Kontroller observatøren",
+                "reboot": "Prøv at genstarte værten",
+                "system_health": "Kontroller systemets sundhed",
+                "title": "Supervisor panelet kunne ikke indlæses!",
+                "wait": "Hvis du lige er startet, skal du sørge for, at du har givet Supervisor tid til at starte."
             }
         },
         "login-form": {
@@ -1219,10 +1261,12 @@
         "notification_toast": {
             "connection_lost": "Forbindelse afbrudt. Opretter forbindelse igen...",
             "dismiss": "Afvis",
+            "integration_starting": "Starter {integration}, ikke alt vil være tilgængeligt, før det er færdigt.",
             "service_call_failed": "Kunne ikke kalde tjenesten {service}.",
             "started": "Home Assistant er startet!",
             "starting": "Home Assistant starter. Nogle funktioner er måske ikke tilgængelige før opstarten er færdig.",
-            "triggered": "Udløste {name}"
+            "triggered": "Udløste {name}",
+            "wrapping_up_startup": "Færdigører opstarten af Home Assistant. Nogle funktioner er måske ikke tilgængelige før opstarten er færdig."
         },
         "panel": {
             "config": {
@@ -1234,7 +1278,8 @@
                     "caption": "Områder",
                     "data_table": {
                         "area": "Område",
-                        "devices": "Enheder"
+                        "devices": "Enheder",
+                        "entities": "Entiteter"
                     },
                     "delete": {
                         "confirmation_text": "Alle enheder i dette område vil blive utildelte.",
@@ -1246,8 +1291,10 @@
                         "create": "Opret",
                         "default_name": "Nyt område",
                         "delete": "Slet",
+                        "linked_entities_caption": "Entiteter",
                         "name": "Navn",
                         "name_required": "Navn er påkrævet",
+                        "no_linked_entities": "Der er ingen entiteter forbundet til dette område",
                         "unknown_error": "Ukendt fejl",
                         "update": "Opdater"
                     },
@@ -1586,7 +1633,7 @@
                         "delete_automation": "Slet automatisering",
                         "delete_confirm": "Er du sikker på, at du vil slette denne automatisering?",
                         "dev_automation": "Fejlfindingsautomatisering",
-                        "dev_only_editable": "Kun automatiseringer defineret i automations.yaml kan debugges.",
+                        "dev_only_editable": "Kun automatiseringer, der har fået tildelt et unikt ID, kan fejlsøges.",
                         "duplicate": "Kopier",
                         "duplicate_automation": "Kopier automatisering",
                         "edit_automation": "Rediger automatisering",
@@ -1677,7 +1724,7 @@
                         "google": {
                             "config_documentation": "Konfigurationsdokumentation",
                             "devices_pin": "Pinkode til sikkerhedsenheder",
-                            "enable_ha_skill": "Aktivér Home Assistant-skill til Google Assistant",
+                            "enable_ha_skill": "Aktivér \"Home Assistant Cloud skill for Google Assistant\"",
                             "enable_state_reporting": "Aktivér tilstandsrapportering",
                             "enter_pin_error": "Pin kunne ikke gemmes:",
                             "enter_pin_hint": "Indtast en pinkode for at bruge sikkerhedsenheder",
@@ -1685,6 +1732,8 @@
                             "info": "Med Google Assistant-integrationen til Home Assistant Cloud kan du styre alle dine Home Assistant-enheder via enhver Google Assistant-aktiveret enhed.",
                             "info_state_reporting": "Hvis du aktiverer tilstandsrapportering, vil Home Assistant sende alle tilstandsændringer af eksponerede entiteter til Google. Dette giver dig mulighed for altid at se de seneste tilstande i Google-appen.",
                             "manage_entities": "Administrer entiteter",
+                            "not_configured_text": "Inden du kan bruge Google Assistant, skal du aktivere \"Home Assistant Cloud skill for Google Assistant\" i Google Home-appen.",
+                            "not_configured_title": "Google Assistent er ikke aktiveret",
                             "security_devices": "Sikkerhedsenheder",
                             "sync_entities": "Synkroniser entiteter til Google",
                             "sync_entities_404_message": "Kunne ikke synkronisere dine entiteter til Google. Sig til Google \"Hey Google, synkronisér mine enheder\" for at synkronisere dine entiteter.",
@@ -1700,10 +1749,16 @@
                         "remote": {
                             "access_is_being_prepared": "Fjernadgang forberedes. Vi giver dig besked, når den er klar.",
                             "certificate_info": "Certifikatoplysninger",
+                            "connected": "Tilsluttet",
                             "info": "Home Assistant Cloud leverer en sikker fjernforbindelse til din instans, når du er væk fra hjemmet.",
                             "instance_is_available": "Din instans er tilgængelig på",
                             "instance_will_be_available": "Din instans vil være tilgængelig på",
                             "link_learn_how_it_works": "Lær hvordan det fungerer",
+                            "not_connected": "Ikke tilsluttet",
+                            "remote_enabled": {
+                                "caption": "Forbind automatisk",
+                                "description": "Slå denne indstilling til for at sikre din Home Assistant applikation er tilgængelig udefra "
+                            },
                             "title": "Fjernadgang"
                         },
                         "sign_out": "Log ud",
@@ -1847,6 +1902,36 @@
                     "description": "Ændre Home Assistants generelle konfiguration",
                     "section": {
                         "core": {
+                            "analytics": {
+                                "documentation": "Før du aktiverer dette, skal du sørge for at besøge dokumentationssiden {link} for at forstå, hvilke data du sender, og hvordan de opbevares og anvendes.",
+                                "header": "Analytics",
+                                "instance_id": "Instans-id: {huuid}",
+                                "introduction": "Del dine installationsoplysninger med os for at gøre Home Assistant bedre og hjælpe os med at overbevise producenter om at tilføje lokale funktioner, der fokuserer på beskyttelse af personlige oplysninger.",
+                                "learn_more": "Sådan behandler vi dine data",
+                                "needs_base": "Du skal aktivere basisanalyser, for at denne indstilling er tilgængelig",
+                                "preference": {
+                                    "base": {
+                                        "description": "Instans-id, version og installationstype.",
+                                        "title": "Basisanalyser"
+                                    },
+                                    "diagnostics": {
+                                        "description": "Del fejlrapporter, hvis der opstår uventede fejl.",
+                                        "title": "Diagnostik"
+                                    },
+                                    "statistics": {
+                                        "description": "Samlet antal anvendte enheder, brugere og andre data.",
+                                        "title": "Brugsstatistikker"
+                                    },
+                                    "usage_supervisor": {
+                                        "description": "Navne, versioner og funktioner.",
+                                        "title": "Anvendte integrationer og tilføjelsesprogrammer"
+                                    },
+                                    "usage": {
+                                        "description": "Navne og versionsoplysninger.",
+                                        "title": "Anvendte integrationer"
+                                    }
+                                }
+                            },
                             "core_config": {
                                 "edit_requires_storage": "Editor er deaktiveret, fordi config er gemt i 'configuration.yaml'.",
                                 "elevation": "Højde",
@@ -2034,6 +2119,9 @@
                     "filtering_by": "Filtrering efter",
                     "show": "Vis"
                 },
+                "hassio": {
+                    "button": "Konfigurer"
+                },
                 "header": "Konfigurer Home Assistant",
                 "helpers": {
                     "caption": "Hjælpere",
@@ -2081,6 +2169,7 @@
                     "license": "Udgivet under Apache 2.0-licensen",
                     "path_configuration": "Sti til 'configuration.yaml': {path}",
                     "server": "server",
+                    "setup_time": "Opsætningstid",
                     "source": "Kilde:",
                     "system_health_error": "System Health-komponenten er ikke indlæst. Føj 'system_health:' til 'config.yaml'",
                     "system_health": {
@@ -2099,8 +2188,11 @@
                     "caption": "Integrationer",
                     "config_entry": {
                         "area": "I {area}",
+                        "check_the_logs": "Kontroller logfilerne",
+                        "configure": "Konfigurer",
                         "delete": "Slet",
                         "delete_confirm": "Er du sikker på, at du vil fjerne denne integration?",
+                        "depends_on_cloud": "Afhængig af Cloud tjenester",
                         "device_unavailable": "Enheden er utilgængelig",
                         "devices": "{count} {count, plural,\n  one {enhed}\n  other {enheder}\n}",
                         "disable_restart_confirm": "Genstart Home Assistant for at fuldføre deaktivering af denne integration",
@@ -2120,15 +2212,26 @@
                         "entity_unavailable": "Entiteten er utilgængelig",
                         "firmware": "Firmware: {version}",
                         "hub": "Forbundet via",
+                        "logs": "logfiler",
                         "manuf": "af {manufacturer}",
                         "no_area": "Intet område",
+                        "not_loaded": "Ikke indlæst",
                         "options": "Indstillinger",
+                        "provided_by_custom_integration": "Leveret af en brugerdefineret integration",
                         "reload": "Genindlæs",
                         "reload_confirm": "Integrationen blev genindlæst",
                         "reload_restart_confirm": "Genstart Home Assistant for at fuldføre genindlæsningen af integrationen",
                         "rename": "Omdøb",
                         "restart_confirm": "Genstart Home Assistant for at fuldføre fjernelsen af denne integration",
                         "services": "{count} {count, plural,\n  one {tjeneste}\n  other {tjenester}\n}",
+                        "state": {
+                            "failed_unload": "Det lykkedes ikke at fjerne",
+                            "loaded": "Indlæst",
+                            "migration_error": "Migrationsfejl",
+                            "not_loaded": "Ikke indlæst",
+                            "setup_error": "Konfigurationen mislykkedes",
+                            "setup_retry": "Forsøger konfigurationen igen"
+                        },
                         "system_options": "Systemindstillinger",
                         "unnamed_entry": "Unavngivet post"
                     },
@@ -2146,7 +2249,9 @@
                         },
                         "finish": "Afslut",
                         "loading_first_time": "Vent mens integrationen installeres",
+                        "next": "Næste",
                         "not_all_required_fields": "Ikke alle påkrævede felter er udfyldt.",
+                        "not_loaded": "Integrationen kunne ikke indlæses, prøv at genstarte Home Assistant.",
                         "pick_flow_step": {
                             "new_flow": "Nej, konfigurer en anden forekomst af {integration}",
                             "title": "Vi opdagede disse, vil du oprette dem?"
@@ -2195,8 +2300,17 @@
                 "logs": {
                     "caption": "Logs",
                     "clear": "Ryd",
+                    "custom_integration": "brugerdefineret integration",
                     "description": "Se logs for Home Assistant",
                     "details": "Logdetaljer ({level})",
+                    "error_from_custom_integration": "Denne fejl stammer fra en brugerdefineret integration.",
+                    "level": {
+                        "critical": "KRITISK",
+                        "debug": "DEBUG",
+                        "error": "FEJL",
+                        "info": "INFO",
+                        "warning": "ADVARSEL"
+                    },
                     "load_full_log": "Indlæs fuld Home Assistant-log",
                     "loading_log": "Indlæser fejllog...",
                     "multiple_messages": "beskeden forekom først kl. {time} og ses {counter} gange",
@@ -2561,7 +2675,7 @@
                             "min_max": "Genindlæs min / max entiteter",
                             "mqtt": "Genindlæs manuelt konfigurerede MQTT-entiteter",
                             "person": "Genindlæs personer",
-                            "ping": "Genindlæs ping sensorentiteter",
+                            "ping": "Genindlæs ping sensor entiteter",
                             "reload": "Genindlæs {domain}",
                             "rest": "Genindlæs REST entiteter og REST notifikationstjenester",
                             "rpi_gpio": "Genindlæs Raspberry Pi GPIO entiteter",
@@ -2706,6 +2820,15 @@
                         "manufacturer_code_override": "Brugerdefineret producentkode",
                         "value": "Værdi"
                     },
+                    "configuration_page": {
+                        "shortcuts_title": "Genveje",
+                        "update_button": "Opdater konfiguration",
+                        "zha_options": {
+                            "default_light_transition": "Standard overgangstid for lys (sekunder)",
+                            "enable_identify_on_join": "Aktiver identifikation, når enheder tilsluttes netværket",
+                            "title": "Globale indstillinger"
+                        }
+                    },
                     "device_pairing_card": {
                         "CONFIGURED": "Konfiguration fuldført",
                         "CONFIGURED_status_text": "Initialiserer",
@@ -2830,7 +2953,13 @@
                         "node_status": "Nodestatus",
                         "zwave_info": "Z-Wave-info"
                     },
+                    "logs": {
+                        "log_level": "Log niveau",
+                        "subscribed_to_logs": "Abboner på Z-Wave JS Log beskeder",
+                        "title": "Z-Wave JS-logfiler"
+                    },
                     "navigation": {
+                        "logs": "Logfiler",
                         "network": "Netværk"
                     },
                     "network_status": {
@@ -2845,6 +2974,9 @@
                         "header": "Konfiguration af Z-Wave-enhed",
                         "introduction": "Administrer og juster enheds (node) specifikke konfigurationsparametre for den valgte enhed",
                         "parameter_is_read_only": "Denne parameter er skrivebeskyttet.",
+                        "set_param_accepted": "Parameteren er blevet opdateret.",
+                        "set_param_error": "Der opstod en fejl",
+                        "set_param_queued": "Parameterændringen er sat i kø, og vil blive udført når enheden vågner",
                         "zwave_js_device_database": "Z-Wave JS-enhedsdatabasen"
                     },
                     "node_status": {
@@ -2854,6 +2986,16 @@
                         "dead": "Død",
                         "unknown": "Ukendt"
                     },
+                    "reinterview_node": {
+                        "battery_device_warning": "Du skal vække batteridrevne enheder, inden du starter forespørgslen. Se enhedens manual for instruktioner om, hvordan du vækker enheden.",
+                        "in_progress": "Enheden forespørges. Dette kan tage noget tid.",
+                        "interview_complete": "Enhedsinformationsudveksling er færdig",
+                        "interview_failed": "Forespørgsel af enheden er mislykkedes. Der kan være yderligere oplysninger i logfilerne.",
+                        "introduction": "Gentag forespørgsel af en enhed på dit Z-Wave-netværk. Brug denne funktion, hvis enheden har manglende eller forkert funktionalitet.",
+                        "run_in_background": "Du kan lukke denne dialog og forespørgslen fortsætter i baggrunden.",
+                        "start_reinterview": "Gentag forespørgsel",
+                        "title": "Gentag forespørgsel af en Z-Wave enhed"
+                    },
                     "remove_node": {
                         "cancel_exclusion": "Annuller udelukkelse",
                         "controller_in_exclusion_mode": "Din Z-Wave-controller er nu i eksklusionstilstand.",
@@ -3004,7 +3146,7 @@
                         "attributes": "Egenskaber",
                         "copy_id": "Kopier ID til Udklipsholder",
                         "current_entities": "Aktuelle entiteter",
-                        "description1": "Sæt repræsentationen af en enhed i Home Assistant.",
+                        "description1": "Tilpas tilstanden for en enhed i Home Assistant.",
                         "description2": "Dette vil ikke kommunikere med den faktiske enhed.",
                         "entity": "Entitet",
                         "filter_attributes": "Filtrer egenskaber",
@@ -3315,7 +3457,7 @@
                             "name": "Billedentitet"
                         },
                         "picture-glance": {
-                            "description": "Billedblik-kortet viser et billede og den tilsvarende entitetstilstand som et ikon. Entiteterne på højre side tillader at skifte handlinger, andre viser dialogboksen for mere information.",
+                            "description": "Billedblik-kortet viser et billede og den tilsvarende tilstand for en entitet som et ikon. Entiteterne på højre side tillader at skifte handlinger, andre viser dialogboksen for mere information.",
                             "name": "Billedblik",
                             "state_entity": "Entitet status"
                         },
@@ -3693,6 +3835,10 @@
                 }
             },
             "page-onboarding": {
+                "analytics": {
+                    "finish": "Næste",
+                    "intro": "Del analysedata fra din installation. Delte data vil være offentligt tilgængelige på {link}"
+                },
                 "core-config": {
                     "button_detect": "Detekter",
                     "finish": "Næste",
@@ -3702,12 +3848,14 @@
                     "location_name": "Navn på din Home Assistant-installation",
                     "location_name_default": "Hjem"
                 },
+                "finish": "Afslut",
                 "integration": {
                     "finish": "Afslut",
                     "intro": "Enheder og tjenester er repræsenteret i Home Assistant som integrationer. Du kan konfigurere dem nu eller gøre det senere fra konfigurationsskærmen.",
                     "more_integrations": "Mere"
                 },
                 "intro": "Er du klar til at vække dit hjem til live, genvinde dit privatliv og blive medlem af et verdensomspændende fællesskab af tinkerers?",
+                "next": "Næste",
                 "restore": {
                     "description": "Alternativt kan du gendanne fra et tidligere snapshot.",
                     "hide_log": "Skjul fuld log",
diff --git a/translations/frontend/de.json b/translations/frontend/de.json
index d6b8f7e69e..32294da3bd 100644
--- a/translations/frontend/de.json
+++ b/translations/frontend/de.json
@@ -366,6 +366,7 @@
         },
         "my": {
             "error": "Ein unbekannter Fehler ist aufgetreten.",
+            "error_addon_no_ingress": "Das angeforderte Add-on unterstützt keinen Ingress",
             "error_addon_not_found": "Add-on nicht gefunden",
             "faq_link": "Häufig gestellten Fragen zu Home Assistant",
             "not_supported": "Diese Weiterleitung wird von deiner Home Assistant-Instanz nicht unterstützt. Überprüfe den {link} auf die unterstützten Weiterleitungen und die Version, in der sie eingeführt wurden."
@@ -383,6 +384,7 @@
             "create": "Erstellen",
             "create_blocked_not_running": "Das Erstellen eines Snapshots ist derzeit nicht möglich, da sich das System im Zustand {state} befindet.",
             "create_snapshot": "Datensicherung erstellen",
+            "created": "Erstellt",
             "description": "Datensicherungen ermöglichen dir das leichte Speichern und Wiederherstellen von allen Daten aus Home Assistant.",
             "enter_password": "Bitte Passwort eingeben.",
             "folder": {
@@ -458,6 +460,7 @@
                 "leave_beta_description": "Erhalte stabile Updates für Home Assistant, Supervisor und Host",
                 "ram_usage": "Arbeitsspeicherbedarf von Supervisor",
                 "reload_supervisor": "Supervisor neu laden",
+                "search": "Suche",
                 "share_diagnostics": "Diagnose teilen",
                 "share_diagnostics_description": "Teile Absturzberichte und Diagnoseinformationen.",
                 "share_diagonstics_description": "Möchtest du Absturzberichte und Diagnoseinformationen automatisch freigeben, wenn der Supervisor auf unerwartete Fehler stößt? {line_break} Auf diese Weise können wir die Probleme beheben. Die Informationen sind nur für das Home Assistant Core Team zugänglich und werden nicht an andere weitergegeben. {line_break} Die Daten enthalten keine privaten/sensiblen Informationen und du kannst diese jederzeit in den Einstellungen deaktivieren.",
@@ -1258,7 +1261,7 @@
         "notification_toast": {
             "connection_lost": "Verbindung getrennt. Verbinde erneut...",
             "dismiss": "Ausblenden",
-            "intergration_starting": "Starte {integration}. Währenddessen ist noch nicht alles verfügbar.",
+            "integration_starting": "Starte {integration}. Währenddessen ist noch nicht alles verfügbar.",
             "service_call_failed": "Fehler beim Aufrufen des Diensts {service}.",
             "started": "Home Assistant wurde vollständig gestartet!",
             "starting": "Home Assistant startet. Währenddessen ist noch nicht alles verfügbar.",
@@ -2246,6 +2249,7 @@
                         },
                         "finish": "Fertig",
                         "loading_first_time": "Bitte warten, während die Integration installiert wird",
+                        "next": "Weiter",
                         "not_all_required_fields": "Nicht alle Pflichtfelder sind ausgefüllt.",
                         "not_loaded": "Die Integration konnte nicht geladen werden. Versuche Home Assistant neu zu starten.",
                         "pick_flow_step": {
@@ -2296,7 +2300,7 @@
                 "logs": {
                     "caption": "Logs",
                     "clear": "Löschen",
-                    "custom_integration": "benutzerdefiniert integration",
+                    "custom_integration": "benutzerdefinierte Integration",
                     "description": "Home Assistant Logs einsehen",
                     "details": "Protokolldetails ({level})",
                     "error_from_custom_integration": "benutzerdefinierte",
@@ -2584,6 +2588,8 @@
                         "add_scene": "Szene hinzufügen",
                         "delete_confirm": "Bist du sicher, dass du diese Szene löschen möchtest?",
                         "delete_scene": "Szene löschen",
+                        "duplicate": "Duplizieren",
+                        "duplicate_scene": "Szene duplizieren",
                         "edit_scene": "Szene bearbeiten",
                         "header": "Szenen-Editor",
                         "headers": {
@@ -2911,7 +2917,9 @@
                         "controller_in_inclusion_mode": "Ihr Z-Wave-Controller befindet sich jetzt im Inklusionsmodus.",
                         "follow_device_instructions": "Befolge die mit dem Gerät gelieferten Anweisungen, um die Kopplung am Gerät auszulösen.",
                         "inclusion_failed": "Der Knoten konnte nicht hinzugefügt werden. Bitte überprüfe die Protokolle für weitere Informationen.",
-                        "inclusion_finished": "Der Knoten wurde hinzugefügt. Es kann einige Minuten dauern, bis alle Einheiten angezeigt werden, da der Knoten im Hintergrund fertig eingerichtet wird.",
+                        "inclusion_finished": "Der Knoten wurde hinzugefügt.",
+                        "interview_failed": "Das Geräteinterview ist fehlgeschlagen. Zusätzliche Informationen sind möglicherweise in den Logs verfügbar.",
+                        "interview_started": "Das Gerät wird gerade eingerichtet. Dies könnte eine Weile dauern.",
                         "introduction": "Dieser Assistent führt dich durch das Hinzufügen eines Knotens zu deinem Z-Wave-Netzwerk.",
                         "secure_inclusion_warning": "Sichere Geräte benötigen zusätzliche Bandbreite; zu viele sichere Geräte können Ihr Z-Wave-Netzwerk ausbremsen. Wir empfehlen, die sichere Einbindung nur für Geräte zu verwenden, die sie benötigen, wie Schlösser oder Garagentoröffner.",
                         "start_inclusion": "Starten der Erfassung",
@@ -3142,8 +3150,8 @@
                         "attributes": "Attribute",
                         "copy_id": "ID in die Zwischenablage kopieren",
                         "current_entities": "Aktuelle Entitäten",
-                        "description1": "Stelle die Darstellung eines Geräts in Home Assistant ein.",
-                        "description2": "Dies führt nicht zur Kommunikation mit dem eigentlichen Gerät.",
+                        "description1": "Legt die aktuelle Zustandsdarstellung einer Entität in Home Assistant fest.",
+                        "description2": "Wenn die Entität zu einem Gerät gehört, findet keine tatsächliche Kommunikation mit diesem Gerät statt.",
                         "entity": "Entität",
                         "filter_attributes": "Attribute filtern",
                         "filter_entities": "Entitäten filtern",
@@ -4000,6 +4008,17 @@
                     "primary_color": "Primärfarbe",
                     "reset": "zurücksetzen"
                 },
+                "time_format": {
+                    "description": "Wähle aus, wie Zeiten formatiert werden sollen.",
+                    "dropdown_label": "Zeitformat",
+                    "formats": {
+                        "12": "12 Stunden (AM/PM)",
+                        "24": "24 Stunden",
+                        "language": "Auto (Spracheinstellung verwenden)",
+                        "system": "Systemeinstellungen verwenden"
+                    },
+                    "header": "Zeitformat"
+                },
                 "vibrate": {
                     "description": "Aktiviere oder deaktiviere die Vibration an diesem Gerät, wenn du Geräte steuerst.",
                     "header": "Vibrieren"
diff --git a/translations/frontend/en.json b/translations/frontend/en.json
index 0ac8bcae0e..7f87c48dce 100644
--- a/translations/frontend/en.json
+++ b/translations/frontend/en.json
@@ -292,7 +292,7 @@
             "save": "Save",
             "show_more": "Show more information about this",
             "update": "Update",
-            "update_available": "{count, plural,\n  one {Update}\n  other {{count} Updates}\n} pending",
+            "update_available": "{count, plural,\n  one {Update}\n  other {{count} updates}\n} pending",
             "version": "Version",
             "yes": "Yes"
         },
@@ -314,7 +314,7 @@
             "addon_new_version": "New version available",
             "addon_running": "Add-on is running",
             "addon_stopped": "Add-on is stopped",
-            "addons": "Add-ons",
+            "addons": "Installed add-ons",
             "no_addons": "You don't have any add-ons installed yet. Head over to the add-on store to get started!"
         },
         "dialog": {
@@ -366,6 +366,7 @@
         },
         "my": {
             "error": "An unknown error occurred",
+            "error_addon_no_ingress": "The requested add-on does not support ingress",
             "error_addon_not_found": "Add-on not found",
             "faq_link": "My Home Assistant FAQ",
             "not_supported": "This redirect is not supported by your Home Assistant instance. Check the {link} for the supported redirects and the version they where introduced."
@@ -383,6 +384,7 @@
             "create": "Create",
             "create_blocked_not_running": "Creating a snapshot is not possible right now because the system is in {state} state.",
             "create_snapshot": "Create snapshot",
+            "created": "Created",
             "description": "Snapshots allow you to easily backup and restore all data of your Home Assistant instance.",
             "enter_password": "Please enter a password.",
             "folder": {
@@ -394,14 +396,15 @@
             },
             "folders": "Folders",
             "full_snapshot": "Full snapshot",
-            "name": "Name",
+            "name": "Snapshot name",
             "no_snapshots": "You don't have any snapshots yet.",
             "partial_snapshot": "Partial snapshot",
-            "password": "Password",
+            "password": "Snapshot password",
             "password_protected": "password protected",
             "password_protection": "Password protection",
             "security": "Security",
-            "type": "Type",
+            "select_type": "Select what to restore",
+            "type": "Snapshot type",
             "upload_snapshot": "Upload snapshot"
         },
         "store": {
@@ -458,6 +461,7 @@
                 "leave_beta_description": "Get stable updates for Home Assistant, Supervisor and host",
                 "ram_usage": "Supervisor RAM Usage",
                 "reload_supervisor": "Reload Supervisor",
+                "search": "Search",
                 "share_diagnostics": "Share Diagnostics",
                 "share_diagnostics_description": "Share crash reports and diagnostic information.",
                 "share_diagonstics_description": "Would you want to automatically share crash reports and diagnostic information when the Supervisor encounters unexpected errors? {line_break} This will allow us to fix the problems, the information is only accessible to the Home Assistant Core team and will not be shared with others.{line_break} The data does not include any private/sensitive information and you can disable this in settings at any time you want.",
@@ -717,6 +721,9 @@
                 "no_match": "No matching areas found",
                 "show_areas": "Show areas"
             },
+            "attributes": {
+                "expansion_header": "Attributes"
+            },
             "blueprint-picker": {
                 "add_user": "Add user",
                 "remove_user": "Remove user",
@@ -1258,7 +1265,7 @@
         "notification_toast": {
             "connection_lost": "Connection lost. Reconnecting...",
             "dismiss": "Dismiss",
-            "intergration_starting": "Starting {integration}, not everything will be available until it is finished.",
+            "integration_starting": "Starting {integration}, not everything will be available until it is finished.",
             "service_call_failed": "Failed to call service {service}.",
             "started": "Home Assistant has started!",
             "starting": "Home Assistant is starting, not everything will be available until it is finished.",
@@ -1716,6 +1723,7 @@
                             "title": "Alexa"
                         },
                         "connected": "Connected",
+                        "connecting": "Connecting...",
                         "connection_status": "Cloud connection status",
                         "fetching_subscription": "Fetching subscription...",
                         "google": {
@@ -2585,6 +2593,8 @@
                         "add_scene": "Add scene",
                         "delete_confirm": "Are you sure you want to delete this scene?",
                         "delete_scene": "Delete scene",
+                        "duplicate": "Duplicate",
+                        "duplicate_scene": "Duplicate scene",
                         "edit_scene": "Edit scene",
                         "header": "Scene Editor",
                         "headers": {
@@ -2912,7 +2922,9 @@
                         "controller_in_inclusion_mode": "Your Z-Wave controller is now in inclusion mode.",
                         "follow_device_instructions": "Follow the directions that came with your device to trigger pairing on the device.",
                         "inclusion_failed": "The node could not be added. Please check the logs for more information.",
-                        "inclusion_finished": "The node has been added. It may take a few minutes for all entities to show up as we finish setting up the node in the background.",
+                        "inclusion_finished": "The node has been added.",
+                        "interview_failed": "The device interview failed. Additional information may be available in the logs.",
+                        "interview_started": "The device is being interviewed. This may take some time.",
                         "introduction": "This wizard will guide you through adding a node to your Z-Wave network.",
                         "secure_inclusion_warning": "Secure devices require additional bandwidth; too many secure devices can slow down your Z-Wave network. We recommend only using secure inclusion for devices that require it, like locks or garage door openers.",
                         "start_inclusion": "Start Inclusion",
@@ -2952,6 +2964,7 @@
                     },
                     "logs": {
                         "log_level": "Log Level",
+                        "log_level_changed": "Log Level changed to: {level}",
                         "subscribed_to_logs": "Subscribed to Z-Wave JS Log Messages...",
                         "title": "Z-Wave JS Logs"
                     },
@@ -3974,12 +3987,12 @@
                 },
                 "refresh_tokens": {
                     "confirm_delete": "Are you sure you want to delete the refresh token for {name}?",
-                    "created_at": "Created at {date}",
+                    "created_at": "Created {date}",
                     "current_token_tooltip": "Unable to delete current refresh token",
                     "delete_failed": "Failed to delete the refresh token.",
                     "description": "Each refresh token represents a login session. Refresh tokens will be automatically removed when you click log out. The following refresh tokens are currently active for your account.",
                     "header": "Refresh Tokens",
-                    "last_used": "Last used at {date} from {location}",
+                    "last_used": "Last used {date} from {location}",
                     "not_used": "Has never been used",
                     "token_title": "Refresh token for {clientId}"
                 },
@@ -4001,6 +4014,17 @@
                     "primary_color": "Primary color",
                     "reset": "Reset"
                 },
+                "time_format": {
+                    "description": "Choose how times are formatted.",
+                    "dropdown_label": "Time format",
+                    "formats": {
+                        "12": "12 hours (AM/PM)",
+                        "24": "24 hours",
+                        "language": "Auto (use language setting)",
+                        "system": "Use system locale"
+                    },
+                    "header": "Time Format"
+                },
                 "vibrate": {
                     "description": "Enable or disable vibration on this device when controlling devices.",
                     "header": "Vibrate"
diff --git a/translations/frontend/es-419.json b/translations/frontend/es-419.json
index 0c22036f4c..7745b01ec5 100644
--- a/translations/frontend/es-419.json
+++ b/translations/frontend/es-419.json
@@ -1239,7 +1239,7 @@
         "notification_toast": {
             "connection_lost": "Conexión perdida. Reconectando...",
             "dismiss": "Descartar",
-            "intergration_starting": "Iniciando {integration}, no todo estará totalmente disponible hasta que finalice.",
+            "integration_starting": "Iniciando {integration}, no todo estará totalmente disponible hasta que finalice.",
             "service_call_failed": "Error al llamar al servicio {service} .",
             "started": "¡Home Assistant ha iniciado!",
             "starting": "Home Assistant está iniciando, no todo estará disponible hasta que termine.",
diff --git a/translations/frontend/es.json b/translations/frontend/es.json
index 3133ee0b76..fd19086d4f 100644
--- a/translations/frontend/es.json
+++ b/translations/frontend/es.json
@@ -314,7 +314,7 @@
             "addon_new_version": "Nueva versión disponible",
             "addon_running": "El complemento se está ejecutando",
             "addon_stopped": "El complemento está detenido",
-            "addons": "Complementos",
+            "addons": "Complementos instalados",
             "no_addons": "Aún no tienes ningún complemento instalado. ¡Dirígete a la tienda de complementos para comenzar!"
         },
         "dialog": {
@@ -366,6 +366,7 @@
         },
         "my": {
             "error": "Se ha producido un error desconocido",
+            "error_addon_no_ingress": "El complemento solicitado no admite la entrada",
             "error_addon_not_found": "Complemento no encontrado",
             "faq_link": "Preguntas frecuentes sobre mi Home Assistant",
             "not_supported": "Esta redirección no es compatible con tu instancia de Home Assistant. Consulta el {link} para conocer las redirecciones admitidas y la versión en la que se introdujeron."
@@ -383,6 +384,7 @@
             "create": "Crear",
             "create_blocked_not_running": "No es posible crear una instantánea en este momento porque el sistema está en el estado {state}.",
             "create_snapshot": "Crear instantánea",
+            "created": "Creada",
             "description": "Las instantáneas te permiten realizar copias de seguridad y restaurar fácilmente todos los datos de tu instancia de Home Assistant.",
             "enter_password": "Por favor, introduce una contraseña.",
             "folder": {
@@ -394,14 +396,15 @@
             },
             "folders": "Carpetas",
             "full_snapshot": "Instantánea completa",
-            "name": "Nombre",
+            "name": "Nombre de la instantánea",
             "no_snapshots": "Aún no tienes instantáneas.",
             "partial_snapshot": "Instantánea parcial",
-            "password": "Contraseña",
+            "password": "Contraseña de la instantánea",
             "password_protected": "protegida por contraseña",
             "password_protection": "Protección con contraseña",
             "security": "Seguridad",
-            "type": "Tipo",
+            "select_type": "Selecciona qué restaurar",
+            "type": "Tipo de instantánea",
             "upload_snapshot": "Subir instantánea"
         },
         "store": {
@@ -458,6 +461,7 @@
                 "leave_beta_description": "Obtén actualizaciones estables para Home Assistant, Supervisor y el host",
                 "ram_usage": "Uso de RAM del Supervisor",
                 "reload_supervisor": "Recargar el Supervisor",
+                "search": "Buscar",
                 "share_diagnostics": "Compartir diagnósticos",
                 "share_diagnostics_description": "Comparte informes de fallos e información de diagnóstico.",
                 "share_diagonstics_description": "¿Te gustaría compartir automáticamente informes de fallos e información de diagnóstico cuando el Supervisor encuentra errores inesperados? {line_break} Esto nos permitirá solucionar los problemas, la información solo es accesible para el equipo principal de Home Assistant y no se compartirá con otros. {line_break} Los datos no incluyen ninguna información privada/confidencial y puedes desactivar esto en la configuración en cualquier momento que desees.",
@@ -717,6 +721,9 @@
                 "no_match": "No se han encontrado áreas coincidentes",
                 "show_areas": "Mostrar áreas"
             },
+            "attributes": {
+                "expansion_header": "Atributos"
+            },
             "blueprint-picker": {
                 "add_user": "Añadir usuario",
                 "remove_user": "Eliminar usuario",
@@ -1258,7 +1265,7 @@
         "notification_toast": {
             "connection_lost": "Conexión perdida. Reconectando...",
             "dismiss": "Descartar",
-            "intergration_starting": "Iniciando {integration}, no estará todo disponible hasta que finalice.",
+            "integration_starting": "Iniciando {integration}, no estará todo disponible hasta que finalice.",
             "service_call_failed": "Error al llamar al servicio {service}.",
             "started": "¡Home Assistant se ha iniciado!",
             "starting": "Home Assistant se está iniciando, no estará todo disponible hasta que finalice.",
@@ -1716,6 +1723,7 @@
                             "title": "Alexa"
                         },
                         "connected": "Conectado",
+                        "connecting": "Conectando...",
                         "connection_status": "Estado de conexión a la nube",
                         "fetching_subscription": "Obteniendo suscripción...",
                         "google": {
@@ -2585,6 +2593,8 @@
                         "add_scene": "Añadir escena",
                         "delete_confirm": "¿Estás seguro de que quieres eliminar esta escena?",
                         "delete_scene": "Eliminar escena",
+                        "duplicate": "Duplicar",
+                        "duplicate_scene": "Duplicar la escena",
                         "edit_scene": "Editar escena",
                         "header": "Editor de escenas",
                         "headers": {
@@ -2912,7 +2922,9 @@
                         "controller_in_inclusion_mode": "Tu controlador Z-Wave ahora está en modo de inclusión.",
                         "follow_device_instructions": "Sigue las instrucciones que vienen con el dispositivo para activar el emparejamiento en el dispositivo.",
                         "inclusion_failed": "No se pudo agregar el nodo. Por favor, consulta los registros para obtener más información.",
-                        "inclusion_finished": "Se ha agregado el nodo. Pueden tardar unos minutos en aparecer todas las entidades mientras terminamos de configurar el nodo en segundo plano.",
+                        "inclusion_finished": "Se ha agregado el nodo.",
+                        "interview_failed": "La entrevista del dispositivo falló. Es posible que haya información adicional disponible en los registros.",
+                        "interview_started": "El dispositivo está siendo entrevistado. Esto puede llevar algún tiempo.",
                         "introduction": "Este asistente te guiará para añadir un nodo a tu red Z-Wave.",
                         "secure_inclusion_warning": "Los dispositivos seguros requieren ancho de banda adicional; demasiados dispositivos seguros pueden ralentizar tu red Z-Wave. Recomendamos usar solo la inclusión segura para dispositivos que lo requieran, como cerraduras o abre-puertas de garaje.",
                         "start_inclusion": "Iniciar inclusión",
@@ -2952,6 +2964,7 @@
                     },
                     "logs": {
                         "log_level": "Nivel de registro",
+                        "log_level_changed": "Nivel de registro cambiado a: {level}",
                         "subscribed_to_logs": "Suscrito a los mensajes de registro de Z-Wave JS...",
                         "title": "Registros de Z-Wave JS"
                     },
@@ -3600,7 +3613,7 @@
                         "unsaved_changes": "Cambios no guardados"
                     },
                     "save_config": {
-                        "cancel": "No importa",
+                        "cancel": "Cancelar",
                         "close": "Cerrar",
                         "empty_config": "Empezar con un panel de control vacío",
                         "header": "Tomar el control de la interfaz de usuario Lovelace",
@@ -3974,12 +3987,12 @@
                 },
                 "refresh_tokens": {
                     "confirm_delete": "¿Estás seguro de que quieres eliminar el token de actualización para {name}?",
-                    "created_at": "Creado el {date}",
+                    "created_at": "Creado {date}",
                     "current_token_tooltip": "No se puede eliminar el token actual",
                     "delete_failed": "Error al eliminar el token de acceso.",
                     "description": "Cada token de actualización representa un acceso de sesión. Los tokens de actualización se eliminarán automáticamente al cerrar la sesión. Los siguientes tokens de actualización están actualmente activos para tu cuenta.",
                     "header": "Actualizar tokens",
-                    "last_used": "Último uso el {date} desde {location}",
+                    "last_used": "Último uso {date} desde {location}",
                     "not_used": "Nunca ha sido usado",
                     "token_title": "Actualizar token para {clientId}"
                 },
@@ -4001,6 +4014,17 @@
                     "primary_color": "Color primario",
                     "reset": "Reiniciar"
                 },
+                "time_format": {
+                    "description": "Elije cómo se formatean las horas.",
+                    "dropdown_label": "Formato de hora",
+                    "formats": {
+                        "12": "12 horas (AM/PM)",
+                        "24": "24 horas",
+                        "language": "Automático (utilizar la configuración del idioma)",
+                        "system": "Utilizar la configuración regional del sistema"
+                    },
+                    "header": "Formato de hora"
+                },
                 "vibrate": {
                     "description": "Activar o deshabilitar la vibración en este dispositivo al controlar dispositivos.",
                     "header": "Vibrar"
diff --git a/translations/frontend/et.json b/translations/frontend/et.json
index f7542f1c1f..878a37dc10 100644
--- a/translations/frontend/et.json
+++ b/translations/frontend/et.json
@@ -292,7 +292,7 @@
             "save": "Salvesta",
             "show_more": "Kuva selle kohta rohkem teavet",
             "update": "Uuenda",
-            "update_available": "{count, plural,\n  one {värskendus}\n  other {{count] värskendust}\n} on saadaval",
+            "update_available": "{count, plural,\n  one {uuendus}\n  other {{count} uuendust}\n} on saadaval",
             "version": "Versioon",
             "yes": "Jah"
         },
@@ -314,7 +314,7 @@
             "addon_new_version": "Uus versioon on saadaval",
             "addon_running": "Lisandmoodul töötab",
             "addon_stopped": "Lisandmoodul on peatatud",
-            "addons": "Lisandmoodulid",
+            "addons": "Paigaldatud lisandmoodulid",
             "no_addons": "Ühtegi lisandmoodulit pole veel paigaldatud. Alustamiseks mine lisandmoodulite hoidlasse!"
         },
         "dialog": {
@@ -366,6 +366,7 @@
         },
         "my": {
             "error": "Viga",
+            "error_addon_no_ingress": "Valitud lisandmoodul ei toeta ingressi",
             "error_addon_not_found": "Lisandmoodulit ei leitud",
             "faq_link": "KKK viide",
             "not_supported": "pole toetatud"
@@ -383,6 +384,7 @@
             "create": "Loo",
             "create_blocked_not_running": "Hetktõmmise loomine pole praegu võimalik kuna süsteem on olekus {state}.",
             "create_snapshot": "Loo hetktõmmis",
+            "created": "Loodud",
             "description": "Hetktõmmised võimaldavad hõlpsalt varundada ja taastada kõik Home Assistanti andmed.",
             "enter_password": "Sisesta salasõna.",
             "folder": {
@@ -394,14 +396,15 @@
             },
             "folders": "Kaustad",
             "full_snapshot": "Täielik hetktõmmis",
-            "name": "Nimi",
+            "name": "Hetktõmmise nimi",
             "no_snapshots": "Sul pole veel ühtegi hetktõmmist.",
             "partial_snapshot": "Osaline hetktõmmis",
-            "password": "Salasõna",
+            "password": "Hetktõmmise salasõna",
             "password_protected": "salasõnaha kaitstud",
             "password_protection": "Salasõnaga kaitstud",
             "security": "Turvalisus",
-            "type": "Tüüp",
+            "select_type": "Vali mida taastada",
+            "type": "Hetktõmmise tüüp",
             "upload_snapshot": "Hetktõmmise üleslaadimine"
         },
         "store": {
@@ -458,6 +461,7 @@
                 "leave_beta_description": "Hangi Home Assistanti, Supervisori ja hosti jaoks stabiilseid uuendusi",
                 "ram_usage": "Supervisori mälu kasutus",
                 "reload_supervisor": "Taaslae Supevisor",
+                "search": "Otsing",
                 "share_diagnostics": "Jaga silumisteavet",
                 "share_diagnostics_description": "Jaga krahhiaruandeid ja diagnostikateavet.",
                 "share_diagonstics_description": "Kas soovid automaatselt jagada krahhiaruandeid ja diagnostikateavet kui Supervisoris ilmneb ootamatuid tõrkeid? {line_break} See võimaldab meil probleeme lahendada, teave on kättesaadav ainult Home Assistanti põhimeeskonnale ja seda ei jagata teistega. {line_break} Andmed ei sisalda privaatset/tundlikku teavet ja saad selle sätetes igal ajal keelata.",
@@ -717,6 +721,9 @@
                 "no_match": "Sobivaid alasid ei leitud",
                 "show_areas": "Näita alasid"
             },
+            "attributes": {
+                "expansion_header": "Atribuudid"
+            },
             "blueprint-picker": {
                 "add_user": "Lisa kasutaja",
                 "remove_user": "Kustuta kasutaja",
@@ -868,7 +875,7 @@
                     "day": "{count} {count, plural,\n  one {päev}\n  other {päeva}\n}",
                     "hour": "{count} {count, plural,\n  one {tund}\n  other {tunni}\n}",
                     "minute": "{count} {count, plural,\n  one {minut}\n  other {minuti}\n}",
-                    "second": "{count} {count, plural,\n  one {sekund}\n  other {sekundit}\n}",
+                    "second": "{count} {count, plural,\n  one {sekund}\n  other {sekundi}\n}",
                     "week": "{count} {count, plural,\n  one {nädala}\n  other {nädala}\n}"
                 },
                 "future_duration": {
@@ -1217,8 +1224,8 @@
         },
         "duration": {
             "day": "{count} {count, plural,\n  one {päev}\n  other {päeva}\n}",
-            "hour": "{count} {count, plural,\n  one {tund}\n  other {tunni}\n}",
-            "minute": "{count} {count, plural,\n  one {minut}\n  other {minuti}\n}",
+            "hour": "{count} {count, plural,\n  one {tund}\n  other {tundi}\n}",
+            "minute": "{count} {count, plural,\n  one {minut}\n  other {minutit}\n}",
             "second": "{count} {count, plural,\n  one {sekund}\n  other {sekundit}\n}",
             "week": "{count} {count, plural,\n  one {nädal}\n  other {nädalat}\n}"
         },
@@ -1258,7 +1265,7 @@
         "notification_toast": {
             "connection_lost": "Ühendus kadunud. Taasühendamine...",
             "dismiss": "Loobu",
-            "intergration_starting": "Sidumine {integration} käivitub, kõik elemendid pole veel saadaval.",
+            "integration_starting": "Sidumine {integration} käivitub, kõik elemendid pole veel saadaval.",
             "service_call_failed": "Teenuse {service} väljakutsumine ebaõnnestus.",
             "started": "Home Assistant on käivitunud!",
             "starting": "Home Assistant  käivitub, kõik elemendid ei pruugi veel saadaval olla",
@@ -1716,6 +1723,7 @@
                             "title": "Alexa"
                         },
                         "connected": "Ühendatud",
+                        "connecting": "Ühendun...",
                         "connection_status": "Pilveühenduse olek",
                         "fetching_subscription": "Tellimuse andmete toomine ...",
                         "google": {
@@ -2166,7 +2174,7 @@
                     "license": "Avaldatud Apache 2.0 litsentsi alusel",
                     "path_configuration": "configuration.yaml asukoht: {path}",
                     "server": "server",
-                    "setup_time": "Kellaaja suvandid",
+                    "setup_time": "Käivitusaeg",
                     "source": "Allikas:",
                     "system_health_error": "Süsteemi seisundi komponenti ei laadita. Lisage \"system_health:\" configuration.yaml",
                     "system_health": {
@@ -2585,6 +2593,8 @@
                         "add_scene": "Lisa stseen",
                         "delete_confirm": "Oled kindel, et soovid selle stseeni kustutada?",
                         "delete_scene": "Kustuta stseen",
+                        "duplicate": "Paljunda",
+                        "duplicate_scene": "Paljunda stseen",
                         "edit_scene": "Muuda stseeni",
                         "header": "Stseeniredaktor",
                         "headers": {
@@ -2912,7 +2922,9 @@
                         "controller_in_inclusion_mode": "Z-Wave kontroller on nüüd kaasamise režiimis.",
                         "follow_device_instructions": "Sidumise käivitamiseks järgi seadmega kaasas olnud juhiseid.",
                         "inclusion_failed": "Sõlme ei saanud lisada. Lisateabe saamiseks vaata logi.",
-                        "inclusion_finished": "Sõlm on lisatud. See võib võtta paar minutit, et kõik üksused ilmuksid kuni me lõpetame taustal sõlme loomise.",
+                        "inclusion_finished": "Sõlm on lisatud.",
+                        "interview_failed": "Seadme küsitlemine nurjus. Lisateave võib olla kättesaadav logides.",
+                        "interview_started": "Seadet küsitletakse. See võib võtta aega.",
                         "introduction": "See viisard juhendab sõlme lisamisel Z-Wave'i võrku.",
                         "secure_inclusion_warning": "Turvalised seadmed vajavad täiendavat ribalaiust; liiga palju turvalisi seadmeid võib Z-Wave võrku aeglustada. Turvalist kaasamist soovitame kasutada ainult seadmete jaoks mis seda vajavad, näiteks lukud või garaažiukse avajad.",
                         "start_inclusion": "Alusta kaasamist",
@@ -2952,6 +2964,7 @@
                     },
                     "logs": {
                         "log_level": "Logimise tase",
+                        "log_level_changed": "Silumisteave on muudetud: {level}",
                         "subscribed_to_logs": "Z-Wave JS Logi sõnumite tellimine...",
                         "title": "Z-Wave JS logid"
                     },
@@ -4001,6 +4014,17 @@
                     "primary_color": "Esmane värv",
                     "reset": "Lähtesta"
                 },
+                "time_format": {
+                    "description": "Vali kuidas ajad vormindatakse.",
+                    "dropdown_label": "Ajavorming",
+                    "formats": {
+                        "12": "12 tundi (AM/PM)",
+                        "24": "24 tundi",
+                        "language": "Automaatne (kasuta keeleseadet)",
+                        "system": "Kasuta süsteemi poolt määratut"
+                    },
+                    "header": "Ajavorming"
+                },
                 "vibrate": {
                     "description": "Seadmete juhtimisel lubage või keelake vibratsioon.",
                     "header": "Vibreeri"
diff --git a/translations/frontend/fi.json b/translations/frontend/fi.json
index b0f919f978..250dd5ded7 100644
--- a/translations/frontend/fi.json
+++ b/translations/frontend/fi.json
@@ -113,6 +113,7 @@
                 },
                 "network": {
                     "container": "Kontti",
+                    "disabled": "Poistettu käytöstä",
                     "header": "Verkko",
                     "host": "Isäntä"
                 },
@@ -170,6 +171,16 @@
                         "description": "Tämä lisäosa käyttää Ingressiä upottaakseen käyttöliittymänsä turvallisesti Home Assistantiin.",
                         "title": "Ingress"
                     },
+                    "label": {
+                        "docker": "Docker",
+                        "hardware": "Laitteisto",
+                        "hass": "hass",
+                        "hassio": "hassio",
+                        "host": "Isäntä",
+                        "host_pid": "isäntä pid",
+                        "rating": "luokitus",
+                        "stage": "vaihe"
+                    },
                     "rating": {
                         "description": "Home Assistant antaa jokaiselle lisäosalle turvallisuusluokituksen, joka kertoo lisäosan käyttöön liittyvistä riskeistä. Mitä enemmän käyttöoikeuksia lisäosa vaatii, sitä enemmän mahdollisia tietoturvariskejä se aiheuttaa, mikä alentaa pistemäärää.\n\nLuokituksen asteikko on 1–6, missä huonoin pistemäärä on 1 (heikoin turvallisuus ja suurimmat riskit) ja paras pistemäärä on 6 (turvallisin ja pienimmät riskit).",
                         "title": "Lisäosan turvallisuusluokitus"
@@ -218,6 +229,7 @@
                     "title": "Varoitus: Suojaustila ei ole käytössä!"
                 },
                 "ram_usage": "Lisäosan muistinkäyttö",
+                "rebuild": "uudelleenrakenna",
                 "restart": "käynnistä uudelleen",
                 "start": "käynnistä",
                 "stop": "pysäytä",
@@ -331,7 +343,9 @@
             },
             "update": {
                 "create_snapshot": "Luo tilannevedos kohteesta {name} ennen päivittämistä",
-                "snapshot": "Tilannevedos"
+                "snapshot": "Tilannevedos",
+                "snapshotting": "Luo tilannevedos kohteesta {name}",
+                "updating": "Päivitetään {name} versioon {version}"
             }
         },
         "my": {
@@ -339,13 +353,16 @@
         },
         "panel": {
             "dashboard": "Kojelauta",
+            "snapshots": "Tilannekuvat",
             "store": "Lisäosakauppa",
             "system": "Järjestelmä"
         },
         "snapshot": {
             "addons": "Lisäosat",
+            "available_snapshots": "Saatavilla olevat tilannekuvat",
             "create": "Luo",
             "create_snapshot": "Luo tilannevedos",
+            "created": "Luotu ",
             "enter_password": "Syötä salasana.",
             "folder": {
                 "addons/local": "Paikalliset lisäosat",
@@ -366,7 +383,9 @@
             "upload_snapshot": "Lähetä tilannevedos"
         },
         "store": {
-            "no_results_found": "Ei tuloksia kohteesta {repository}."
+            "no_results_found": "Ei tuloksia kohteesta {repository}.",
+            "registries": "Rekisterit",
+            "repositories": "Tietovarastot"
         },
         "system": {
             "core": {
@@ -415,6 +434,7 @@
                 "leave_beta_description": "Vastaanota vakaita päivityksiä Home Assistantille, Supervisorille ja isännälle",
                 "ram_usage": "Supervisorin muistinkäyttö",
                 "reload_supervisor": "Lataa Supervisor uudelleen",
+                "search": "Hae",
                 "share_diagnostics": "Jaa diagnostiikka",
                 "share_diagnostics_description": "Jaa kaatumisraportit ja diagnostiikkatiedot.",
                 "share_diagonstics_description": "Haluatko jakaa kaatumisraportit ja diagnostiikkatiedot automaattisesti, kun Supervisor havaitsee odottamattomia virheitä? {line_break} Tämän avulla voimme korjata ongelmat. Tiedot ovat vain Home Assistant Core -tiimin käytettävissä, eikä niitä jaeta muille. {line_break} Tiedot eivät sisällä yksityisiä tai arkaluontoisia tietoja, ja voit poistaa tämän käytöstä asetuksissa milloin tahansa.",
@@ -509,6 +529,7 @@
             },
             "light": {
                 "brightness": "Kirkkaus",
+                "color_brightness": "Värikirkkaus",
                 "color_temperature": "Värilämpötila",
                 "effect": "Efekti",
                 "white_value": "Valkoisuusarvo"
@@ -661,6 +682,9 @@
                 "today": "Tänään"
             },
             "data-table": {
+                "clear": "Tyhjennä",
+                "filtering_by": "Suodatus",
+                "hidden": "{number} piilotettu",
                 "no-data": "Ei dataa",
                 "search": "Hae"
             },
@@ -724,7 +748,8 @@
                     "was_unlocked": "avattiin",
                     "was_unplugged": "kytkettin irti",
                     "was_unsafe": "oli vaarallinen"
-                }
+                },
+                "show_trace": "Näytä jäljitys"
             },
             "media-browser": {
                 "audio_not_supported": "Selaimesi ei tue audioelementtiä.",
@@ -773,6 +798,12 @@
                 "label": "Kuva",
                 "unsupported_format": "Muotoa ei tueta, valitse JPEG-, PNG- tai GIF-kuva."
             },
+            "related-filter-menu": {
+                "filter_by_area": "Suodata alueen mukaan",
+                "filter_by_device": "Suodata laitteen mukaan",
+                "filtered_by_area": "alue: {area_name}",
+                "filtered_by_device": "laite: {device_name}"
+            },
             "related-items": {
                 "area": "Alue",
                 "automation": "Osa seuraavia automaatioita",
@@ -1013,6 +1044,7 @@
                         "zone": "Alueet"
                     },
                     "reload": {
+                        "automation": "Automaatiot",
                         "filesize": "Lataa tiedostokokokohteet uudelleen",
                         "homekit": "Lataa HomeKit uudelleen",
                         "input_boolean": "Lataa booleanit uudelleen",
@@ -1076,6 +1108,14 @@
                 "zha_device_card": {
                     "device_name_placeholder": "Vaihda laitteen nimi"
                 }
+            },
+            "zha_reconfigure_device": {
+                "attribute": "Määrite",
+                "button_hide": "Piilota yksityiskohdat",
+                "button_show": "Näytä yksityiskohdat",
+                "cluster_header": "Klusteri",
+                "configuring_alt": "Määrittää",
+                "reporting_header": "Raportoi"
             }
         },
         "duration": {
@@ -1089,6 +1129,11 @@
             "config": {
                 "no_template_editor_support": "Visuaalinen editori ei tue malleja",
                 "no_type_provided": "Tyyppiä ei ole annettu."
+            },
+            "supervisor": {
+                "ask": "Pyydä apua",
+                "reboot": "Yritä uudelleenkäynnistää isäntä ",
+                "system_health": "Tarkista järjestelmän kunto"
             }
         },
         "login-form": {
@@ -1121,7 +1166,8 @@
                     "caption": "Alueet",
                     "data_table": {
                         "area": "Alue",
-                        "devices": "Laitteet"
+                        "devices": "Laitteet",
+                        "entities": "Kohteet"
                     },
                     "delete": {
                         "confirmation_text": "Tälle alueelle kuuluvien laitteiden osoitus poistetaan.",
@@ -1133,6 +1179,7 @@
                         "create": "Luo",
                         "default_name": "Uusi alue",
                         "delete": "Poista",
+                        "linked_entities_caption": "Kohteet",
                         "name": "Nimi",
                         "name_required": "Nimi on pakollinen",
                         "unknown_error": "Tuntematon virhe",
@@ -1196,8 +1243,11 @@
                                     "action": "Toiminta",
                                     "extra_fields": {
                                         "code": "Koodi",
+                                        "humidity": "Kosteus",
                                         "message": "Viesti",
-                                        "title": "Otsikko"
+                                        "mode": "Tila",
+                                        "title": "Otsikko",
+                                        "value": "Arvo"
                                     },
                                     "label": "Laite"
                                 },
@@ -1270,7 +1320,9 @@
                                     "extra_fields": {
                                         "above": "Yli",
                                         "below": "Alle",
-                                        "for": "Kesto"
+                                        "for": "Kesto",
+                                        "hvac_mode": "HVAC-tila",
+                                        "preset_mode": "Esiasetettu tila"
                                     },
                                     "label": "Laite"
                                 },
@@ -1572,10 +1624,12 @@
                         "remote": {
                             "access_is_being_prepared": "Etäkäyttöä valmistellaan. Ilmoitamme sinulle, kun se on valmis.",
                             "certificate_info": "Sertifikaatin tiedot",
+                            "connected": "Yhdistetty",
                             "info": "Home Assistant Cloud tarjoaa turvallisen etäyhteyden ollessasi poissa kotoa.",
                             "instance_is_available": "Asennuksesi on saatavilla osoitteessa",
                             "instance_will_be_available": "Asennuksesi tulee saataville",
                             "link_learn_how_it_works": "Lisätietoja toiminnasta",
+                            "not_connected": "Ei yhteyttä",
                             "title": "Etähallinta"
                         },
                         "sign_out": "Kirjaudu ulos",
@@ -1717,6 +1771,19 @@
                     "description": "Muuta Home Assistantin yleisiä asetuksiasi",
                     "section": {
                         "core": {
+                            "analytics": {
+                                "preference": {
+                                    "diagnostics": {
+                                        "title": "Diagnostiikka"
+                                    },
+                                    "statistics": {
+                                        "title": "Käyttötilastot"
+                                    },
+                                    "usage_supervisor": {
+                                        "description": "Nimet, versiot ja ominaisuudet."
+                                    }
+                                }
+                            },
                             "core_config": {
                                 "edit_requires_storage": "Editori on poistettu käytöstä, koska asetuksia on annettu configuration.yaml:ssa.",
                                 "elevation": "Korkeus merenpinnasta",
@@ -1899,7 +1966,11 @@
                 },
                 "filtering": {
                     "clear": "Tyhjennä",
-                    "filtering_by": "Suodatus"
+                    "filtering_by": "Suodatus",
+                    "show": "Näytä"
+                },
+                "hassio": {
+                    "button": "Määrittele"
                 },
                 "header": "Säädä Home Assistantia",
                 "helpers": {
@@ -1948,6 +2019,7 @@
                     "license": "Julkaistu Apache 2.0-lisenssillä",
                     "path_configuration": "Polku configuration.yaml-tiedostoon: {path}",
                     "server": "palvelin",
+                    "setup_time": "Asennusaika",
                     "source": "Lähde:",
                     "system_health_error": "Järjestelmän kunto-komponenttia ei ole ladattu. Lisää 'system_health:' kohteeseen configuration.yaml",
                     "system_health": {
@@ -1966,6 +2038,8 @@
                     "caption": "Integraatiot",
                     "config_entry": {
                         "area": "Alueessa {area}",
+                        "check_the_logs": "Tarkista lokitiedot",
+                        "configure": "Määrittele",
                         "delete": "Poista",
                         "delete_confirm": "Haluatko varmasti poistaa tämän integraation?",
                         "device_unavailable": "laite ei saatavissa",
@@ -1987,8 +2061,10 @@
                         "entity_unavailable": "kohde ei saatavilla",
                         "firmware": "Laiteohjelmisto: {version}",
                         "hub": "Yhdistetty kautta",
+                        "logs": "Lokit",
                         "manuf": "{manufacturer}",
                         "no_area": "Ei aluetta",
+                        "not_loaded": "Ei ladattu",
                         "options": "Asetukset",
                         "reload": "Lataa uudelleen",
                         "reload_confirm": "Integraatio ladattiin uudelleen",
@@ -1996,6 +2072,10 @@
                         "rename": "Nimeä uudelleen",
                         "restart_confirm": "Käynnistä Home Assistant uudellen viimeistelläksesi tämän integraation poistamisen",
                         "services": "{count} {count, plural,\n  one {palvelu}\n  other {palvelua}\n}",
+                        "state": {
+                            "loaded": "Ladattu",
+                            "not_loaded": "Ei ladattu"
+                        },
                         "system_options": "Järjestelmäasetukset",
                         "unnamed_entry": "Nimeämätön merkintä"
                     },
@@ -2012,6 +2092,7 @@
                         },
                         "finish": "Valmis",
                         "loading_first_time": "Odota, kunnes integraatio on asennettu",
+                        "next": "Seuraava",
                         "not_all_required_fields": "Täytä kaikki pakolliset kentät.",
                         "submit": "Lähetä"
                     },
@@ -2022,6 +2103,7 @@
                     "disable": {
                         "disabled_integrations": "{number} poistettu käytöstä",
                         "hide_disabled": "Piilota käytöstä poistetut integraatiot",
+                        "show": "Näytä",
                         "show_disabled": "Näytä käytöstä poistetut integraatiot"
                     },
                     "discovered": "Löydetty",
@@ -2057,6 +2139,12 @@
                     "clear": "Tyhjennä",
                     "description": "Tarkastele Home Assistant -lokeja",
                     "details": "Lokitiedot ( {level} )",
+                    "level": {
+                        "critical": "KRIITTINEN",
+                        "error": "VIRHE",
+                        "info": "TIEDOT",
+                        "warning": "VAROITUS"
+                    },
                     "load_full_log": "Lataa Home Assistantin koko loki",
                     "loading_log": "Ladataan virhelokia...",
                     "multiple_messages": "Viesti esiintyi ensimmäisen kerran {time} ja tämän jälkeen {counter} kertaa",
@@ -2334,6 +2422,8 @@
                         "add_scene": "Lisää tilanne",
                         "delete_confirm": "Haluatko varmasti poistaa tämän tilanteen?",
                         "delete_scene": "Poista tilanne",
+                        "duplicate": "Kopioi",
+                        "duplicate_scene": "Kopioi tilanne",
                         "edit_scene": "Muokkaa tilannetta",
                         "header": "Tilanne-editori",
                         "headers": {
@@ -2565,6 +2655,10 @@
                         "manufacturer_code_override": "Valmistajan koodin yliajo",
                         "value": "Arvo"
                     },
+                    "configuration_page": {
+                        "shortcuts_title": "Pikanäppäimet",
+                        "update_button": "Päivitä kokoonpano"
+                    },
                     "device_pairing_card": {
                         "CONFIGURED": "Määritys valmis",
                         "CONFIGURED_status_text": "Alustetaan",
@@ -2655,12 +2749,15 @@
                     "dashboard": {
                         "driver_version": "Ohjaimen versio",
                         "dump_not_ready_confirm": "Lataa",
-                        "home_id": "Kodin ID"
+                        "home_id": "Kodin ID",
+                        "server_version": "Palvelinversio"
                     },
                     "device_info": {
-                        "node_ready": "Solmu valmis"
+                        "node_ready": "Solmu valmis",
+                        "zwave_info": "Z-Wave tiedot"
                     },
                     "navigation": {
+                        "logs": "Lokit",
                         "network": "Verkko"
                     },
                     "network_status": {
@@ -3250,6 +3347,7 @@
                         "error_remove": "Asetusta ei voida poistaa: {error}",
                         "error_save_yaml": "YAML-tiedostoa ei voi tallentaa: {error}",
                         "header": "Muokkaa asetuksia",
+                        "reload": "Lataa uudelleen",
                         "resources_moved": "Resursseja ei enää lisätä Lovelace-kokoonpanoon, mutta ne voidaan lisätä Lovelace config -paneeliin.",
                         "save": "Tallenna",
                         "saved": "Tallennettu",
@@ -3335,6 +3433,9 @@
                 "empty": "Sinulle ei ole yhtään viestiä",
                 "playback_title": "Toista viesti"
             },
+            "my": {
+                "documentation": "dokumentaatio"
+            },
             "page-authorize": {
                 "abort_intro": "Kirjautuminen on keskeytetty",
                 "authorizing_client": "Olet antamassa pääsyn {clientId} Home Assistant -ympäristöösi.",
@@ -3480,6 +3581,9 @@
                 }
             },
             "page-onboarding": {
+                "analytics": {
+                    "finish": "Seuraava"
+                },
                 "core-config": {
                     "button_detect": "Havaitse",
                     "finish": "Seuraava",
@@ -3591,6 +3695,14 @@
                     "enable": "Ota käyttöön",
                     "header": "Monivaiheisen tunnistautumisen moduulit"
                 },
+                "number_format": {
+                    "dropdown_label": "Numeromuoto",
+                    "formats": {
+                        "language": "Automaattinen (käytä kieliasetusta)",
+                        "none": "Ei mitään"
+                    },
+                    "header": "Numeromuoto"
+                },
                 "push_notifications": {
                     "add_device_prompt": {
                         "input_label": "Laitteen nimi",
diff --git a/translations/frontend/fr.json b/translations/frontend/fr.json
index 74a105406a..2088f1fe42 100644
--- a/translations/frontend/fr.json
+++ b/translations/frontend/fr.json
@@ -366,6 +366,7 @@
         },
         "my": {
             "error": "Une erreur inconnue s'est produite",
+            "error_addon_no_ingress": "L’add-on demandé ne prend pas en charge l’entrée",
             "error_addon_not_found": "Module complémentaire introuvable",
             "faq_link": "FAQ de My Home Assistant",
             "not_supported": "Cette redirection n'est pas prise en charge par votre instance Home Assistant. Vérifiez le {link} pour les redirections prises en charge et la version dans laquelle elles ont été introduites."
@@ -383,6 +384,7 @@
             "create": "Créer",
             "create_blocked_not_running": "La création d’un instantané n’est pas possible en ce moment car le système est en état {state}.",
             "create_snapshot": "Créer un instantané",
+            "created": "créé",
             "description": "Les instantanés vous permettent de sauvegarder et de restaurer facilement toutes les données de votre instance Home Assistant.",
             "enter_password": "Veuillez entrer un mot de passe.",
             "folder": {
@@ -458,6 +460,7 @@
                 "leave_beta_description": "Obtenez des mises à jour stables pour l'assistant domestique, le Superviseur et l'hôte",
                 "ram_usage": "Utilisation de la RAM du Superviseur",
                 "reload_supervisor": "Recharger le Superviseur",
+                "search": "Recherche",
                 "share_diagnostics": "Partager les diagnostics",
                 "share_diagnostics_description": "Partagez les rapports d'incident et les informations de diagnostic.",
                 "share_diagonstics_description": "Souhaitez-vous partager automatiquement les rapports d'erreur et les informations de diagnostic lorsque le Superviseur rencontre des erreurs inattendues? {line_break} Cela nous permettra de résoudre les problèmes, les informations ne sont accessibles qu'à l'équipe Home Assistant Core et ne seront pas partagées avec d'autres. {line_break} Les données n'incluent aucune information privée / sensible et vous pouvez désactiver cela dans les paramètres à tout moment.",
@@ -1258,12 +1261,12 @@
         "notification_toast": {
             "connection_lost": "Connexion perdue. Reconnexion en cours ...",
             "dismiss": "Ignorer",
-            "intergration_starting": "Démarrage de {integration}, tout ne sera pas disponible tant qu'il n'aura pas terminé",
+            "integration_starting": "Démarrage de {integration}, tout ne sera pas disponible tant qu'il n'aura pas terminé",
             "service_call_failed": "Échec d'appel du service \"{service}\".",
             "started": "Home Assistant a démarré !",
             "starting": "Home Assistant est en cours de démarrage, tout ne sera pas disponible tant qu’il n’aura pas terminé.",
             "triggered": "{name} déclenché",
-            "wrapping_up_startup": "En terminant le démarrage, tout ne sera pas disponible tant qu'il ne sera pas terminé."
+            "wrapping_up_startup": "Finalisation du démarrage, tout ne sera pas disponible tant qu'il ne sera pas terminé."
         },
         "panel": {
             "config": {
@@ -1746,10 +1749,16 @@
                         "remote": {
                             "access_is_being_prepared": "L'accès à distance est en préparation. Nous vous informerons quand ce sera prêt.",
                             "certificate_info": "Informations sur le certificat",
+                            "connected": "Connecté",
                             "info": "Home Assistant Cloud fournit une connexion à distance sécurisée à votre instance lorsque vous n'êtes pas chez vous.",
                             "instance_is_available": "Votre instance est disponible à l'adresse",
                             "instance_will_be_available": "Votre instance sera disponible sur",
                             "link_learn_how_it_works": "Apprenez comment ça marche",
+                            "not_connected": "Non connecté",
+                            "remote_enabled": {
+                                "caption": "Se connecter automatiquement",
+                                "description": "Activez cette option pour vous assurer que votre instance de Home Assistant est toujours accessible à distance."
+                            },
                             "title": "Contrôle à distance"
                         },
                         "sign_out": "Déconnexion",
@@ -2206,7 +2215,7 @@
                         "logs": "journaux",
                         "manuf": "par {manufacturer}",
                         "no_area": "Pas de zone",
-                        "not_loaded": "Non chargé, vérifiez le {logs_link}",
+                        "not_loaded": "Non chargé",
                         "options": "Options",
                         "provided_by_custom_integration": "Fourni par une intégration personnalisée",
                         "reload": "Recharger",
@@ -2240,6 +2249,7 @@
                         },
                         "finish": "Terminer",
                         "loading_first_time": "Veuillez patienter pendant que l'intégration est en cours d'installation",
+                        "next": "Suivant",
                         "not_all_required_fields": "Tous les champs obligatoires ne sont pas renseignés.",
                         "not_loaded": "Cette intégration ne peut être chargée, essayez de redémarrer Home Assistant",
                         "pick_flow_step": {
@@ -3994,6 +4004,16 @@
                     "primary_color": "Couleur primaire",
                     "reset": "Réinitialiser"
                 },
+                "time_format": {
+                    "description": "Définir le formatage des nombres",
+                    "dropdown_label": "Format de l'heure",
+                    "formats": {
+                        "12": "12 heures (AM / PM)",
+                        "24": "24 heures",
+                        "system": "Utiliser les paramètres régionaux du système"
+                    },
+                    "header": "Format de l'heure"
+                },
                 "vibrate": {
                     "description": "Activer ou désactiver les vibrations sur cet appareil lors du contrôle des périphériques.",
                     "header": "Vibrer"
diff --git a/translations/frontend/he.json b/translations/frontend/he.json
index 2d29099358..9d635a92e9 100644
--- a/translations/frontend/he.json
+++ b/translations/frontend/he.json
@@ -183,7 +183,7 @@
                 "text": "האם ברצונך לאתחל את התוסף עם השינויים שלך?"
             },
             "update": {
-                "create_snapshot": "צור נקודת גיבוי עבור {name}",
+                "create_snapshot": "צור נקודת גיבוי עבור {name} לפני העדכון",
                 "snapshot": "נקודת גיבוי",
                 "snapshotting": "יוצר נקודת גיבוי עבור {name}",
                 "updating": "מעדכן את {name} לגרסה {version}"
@@ -898,7 +898,7 @@
         "notification_toast": {
             "connection_lost": "החיבור אבד. מתחבר מחדש...",
             "dismiss": "בטל",
-            "intergration_starting": "מפעיל את {integration} , לא הכל יהיה זמין עד לסיום.",
+            "integration_starting": "מפעיל את {integration} , לא הכל יהיה זמין עד לסיום.",
             "service_call_failed": "נכשלה הקריאה לשירות {service} .",
             "started": "Home Assistant עלה!",
             "starting": "Home Assistant בעלייה, ייתכן שלא הכל יהיה זמין עד שהעליה תסתיים",
diff --git a/translations/frontend/hu.json b/translations/frontend/hu.json
index 7f5ae34c9f..7f79d1ea49 100644
--- a/translations/frontend/hu.json
+++ b/translations/frontend/hu.json
@@ -802,6 +802,7 @@
                 }
             },
             "service-control": {
+                "integration_doc": "Integrációs dokumentáció",
                 "required": "Ez a mező kötelező",
                 "service_data": "Szolgáltatás adatai",
                 "target": "Célok",
@@ -1157,6 +1158,7 @@
                         "create": "Létrehozás",
                         "default_name": "Új Terület",
                         "delete": "Törlés",
+                        "linked_entities_caption": "Entitások",
                         "name": "Név",
                         "name_required": "Név szükséges",
                         "unknown_error": "Ismeretlen hiba",
@@ -2048,6 +2050,7 @@
                         },
                         "finish": "Befejezés",
                         "loading_first_time": "Kérlek várj, amíg az integráció telepítésre kerül",
+                        "next": "Következő",
                         "not_all_required_fields": "Nincs kitöltve minden szükséges mező.",
                         "pick_flow_step": {
                             "title": "Felfedeztük ezeket, be akarod állítani őket?"
@@ -2606,6 +2609,13 @@
                         "manufacturer_code_override": "Gyártói kód felülbírálása",
                         "value": "Érték"
                     },
+                    "configuration_page": {
+                        "shortcuts_title": "Parancsikonok",
+                        "update_button": "Beállítások frissítése",
+                        "zha_options": {
+                            "title": "Globális beállítások"
+                        }
+                    },
                     "device_pairing_card": {
                         "CONFIGURED": "A konfigurálás befejeződött",
                         "CONFIGURED_status_text": "Inicializálás",
@@ -2716,7 +2726,8 @@
                     "node_config": {
                         "error_device_not_found": "Az eszköz nem található",
                         "header": "Z-Wave eszköz konfigurálása",
-                        "parameter_is_read_only": "Ez a paraméter csak olvasható"
+                        "parameter_is_read_only": "Ez a paraméter csak olvasható",
+                        "set_param_error": "Hiba történt."
                     },
                     "node_status": {
                         "unknown": "Ismeretlen"
diff --git a/translations/frontend/id.json b/translations/frontend/id.json
index 8a5deab0f0..bb798e8931 100644
--- a/translations/frontend/id.json
+++ b/translations/frontend/id.json
@@ -1256,7 +1256,7 @@
         "notification_toast": {
             "connection_lost": "Koneksi terputus. Menghubungkan kembali…",
             "dismiss": "Tutup",
-            "intergration_starting": "Memulai {integration}, tidak semuanya akan tersedia hingga prosesnya selesai.",
+            "integration_starting": "Memulai {integration}, tidak semuanya akan tersedia hingga prosesnya selesai.",
             "service_call_failed": "Gagal memanggil layanan {service}.",
             "started": "Home Assistant telah dimulai!",
             "starting": "Home Assistant sedang dimulai, belum semuanya akan tersedia hingga selesai.",
diff --git a/translations/frontend/it.json b/translations/frontend/it.json
index 58a2214037..d0fcb13914 100644
--- a/translations/frontend/it.json
+++ b/translations/frontend/it.json
@@ -366,6 +366,7 @@
         },
         "my": {
             "error": "Si è verificato un errore sconosciuto",
+            "error_addon_no_ingress": "Il componente aggiuntivo richiesto non supporta l'ingresso",
             "error_addon_not_found": "Componente aggiuntivo non trovato",
             "faq_link": "My Home Assistant FAQ",
             "not_supported": "Questo reindirizzamento non è supportato dall'istanza di Home Assistant. Controlla il {link} per i reindirizzamenti supportati e la versione in cui sono stati introdotti."
@@ -383,13 +384,14 @@
             "create": "Crea",
             "create_blocked_not_running": "La creazione di un'istantanea non è al momento possibile perché il sistema è nello stato {state}.",
             "create_snapshot": "Crea istantanea",
+            "created": "Creato",
             "description": "Le istantanee ti consentono di eseguire facilmente il backup e il ripristino di tutti i dati dell'istanza di Home Assistant.",
             "enter_password": "Immettere una password.",
             "folder": {
                 "addons/local": "Componenti aggiuntivi locali",
                 "homeassistant": "Configurazione di Home Assistant",
                 "media": "Media",
-                "share": "Share",
+                "share": "Condividi",
                 "ssl": "SSL"
             },
             "folders": "Cartelle",
@@ -458,6 +460,7 @@
                 "leave_beta_description": "Ricevi aggiornamenti stabili per Home Assistant, Supervisor e host",
                 "ram_usage": "Utilizzo RAM Supervisor",
                 "reload_supervisor": "Ricarica Supervisor",
+                "search": "Ricerca",
                 "share_diagnostics": "Condividi diagnostica",
                 "share_diagnostics_description": "Condividi i rapporti sugli arresti anomali e le informazioni diagnostiche.",
                 "share_diagonstics_description": "Vorresti condividere automaticamente i rapporti sugli arresti anomali e le informazioni diagnostiche quando il Supervisor rileva errori imprevisti? {line_break} Questo ci consentirà di risolvere i problemi, le informazioni sono accessibili solo al team di Home Assistant Core e non saranno condivise con altri. {line_break} I dati non includono alcuna informazione privata/sensibile e puoi disabilitarla nelle impostazioni in qualsiasi momento lo desideri.",
@@ -769,7 +772,7 @@
                 "by_service": "dal servizio",
                 "entries_not_found": "Non sono state trovate voci nel registro.",
                 "messages": {
-                    "became_unavailable": "non è più disponibile",
+                    "became_unavailable": "è diventato non disponibile",
                     "changed_to_state": "cambiato in {state}",
                     "cleared_device_class": "sgombro (nessun {device_class} rilevato)",
                     "detected_device_class": "rilevato {device_class}",
@@ -1258,7 +1261,7 @@
         "notification_toast": {
             "connection_lost": "Connessione persa. Riconnessione…",
             "dismiss": "Rimuovi",
-            "intergration_starting": "{integration} si sta avviando, non tutto sarà disponibile fino ad avvio completo.",
+            "integration_starting": "{integration} si sta avviando, non tutto sarà disponibile fino ad avvio completo.",
             "service_call_failed": "Fallita chiamata a servizio {service} .",
             "started": "Home Assistant si è avviato!",
             "starting": "Home Assistant si sta avviando, non tutto sarà disponibile fino ad avvio completo.",
@@ -1744,12 +1747,18 @@
                         "nabu_casa_account": "Account Nabu Casa",
                         "not_connected": "Non Connesso",
                         "remote": {
-                            "access_is_being_prepared": "È in fase di preparazione l'accesso remoto. Ti avviseremo quando sarà pronto.",
+                            "access_is_being_prepared": "Il controllo remoto è in fase di preparazione. Ti avviseremo quando sarà pronto.",
                             "certificate_info": "Informazioni sul certificato",
+                            "connected": "Connesso",
                             "info": "Home Assistant Cloud fornisce una connessione remota sicura alla tua istanza mentre sei fuori casa.",
                             "instance_is_available": "La tua istanza è disponibile su",
                             "instance_will_be_available": "La tua istanza sarà disponibile su",
                             "link_learn_how_it_works": "Scopri come funziona",
+                            "not_connected": "Non Connesso",
+                            "remote_enabled": {
+                                "caption": "Collegati automaticamente",
+                                "description": "Abilita questa opzione per assicurarti che la tua istanza di Home Assistant sia sempre accessibile da remoto."
+                            },
                             "title": "Telecomando"
                         },
                         "sign_out": "Esci",
@@ -2160,6 +2169,7 @@
                     "license": "Pubblicato sotto la licenza Apache 2.0",
                     "path_configuration": "Percorso del file configuration.yaml: {path}",
                     "server": "server",
+                    "setup_time": "Tempo di preparazione",
                     "source": "Sorgenti:",
                     "system_health_error": "Il componente System Health non è caricato. Aggiungere 'system_health:' a configuration.yaml",
                     "system_health": {
@@ -2239,6 +2249,7 @@
                         },
                         "finish": "Finito",
                         "loading_first_time": "Si prega di attendere durante l'installazione dell'integrazione",
+                        "next": "Prossimo",
                         "not_all_required_fields": "Non tutti i campi obbligatori sono compilati.",
                         "not_loaded": "L'integrazione non può essere caricata, prova a riavviare Home Assistant.",
                         "pick_flow_step": {
@@ -2577,6 +2588,8 @@
                         "add_scene": "Aggiungi scena",
                         "delete_confirm": "Sei sicuro di voler cancellare questa scena?",
                         "delete_scene": "Cancella scena",
+                        "duplicate": "Duplica",
+                        "duplicate_scene": "Scena duplicata",
                         "edit_scene": "Modifica scena",
                         "header": "Editor di scene",
                         "headers": {
@@ -2904,7 +2917,9 @@
                         "controller_in_inclusion_mode": "Il tuo controller Z-Wave è ora in modalità inclusione.",
                         "follow_device_instructions": "Segui le indicazioni fornite con il tuo dispositivo per attivare l'associazione sul dispositivo.",
                         "inclusion_failed": "Impossibile aggiungere il nodo. Si prega di controllare i registri per ulteriori informazioni.",
-                        "inclusion_finished": "Il nodo è stato aggiunto. Potrebbero essere necessari alcuni minuti prima che tutte le entità vengano visualizzate mentre finiamo di configurare il nodo in background.",
+                        "inclusion_finished": "Il nodo è stato aggiunto.",
+                        "interview_failed": "L'interrogazione al dispositivo non è riuscita. Ulteriori informazioni potrebbero essere disponibili nei registri.",
+                        "interview_started": "Il dispositivo viene interrogato. Potrebbe volerci un po' di tempo.",
                         "introduction": "Questa procedura ti guiderà nell'aggiunta di un nodo alla tua rete Z-Wave.",
                         "secure_inclusion_warning": "I dispositivi protetti richiedono una larghezza di banda aggiuntiva; troppi dispositivi sicuri possono rallentare la tua rete Z-Wave. Si consiglia di utilizzare l'inclusione sicura solo per i dispositivi che lo richiedono, come serrature o apri porta da garage.",
                         "start_inclusion": "Avvia inclusione",
@@ -2944,6 +2959,7 @@
                     },
                     "logs": {
                         "log_level": "Livello di registro",
+                        "subscribed_to_logs": "Sottoscrizione al registro dei messaggi di Z-Wave JS ...",
                         "title": "Registri Z-Wave JS"
                     },
                     "navigation": {
@@ -3970,7 +3986,7 @@
                     "delete_failed": "Impossibile eliminare il token di aggiornamento.",
                     "description": "Ogni token di aggiornamento rappresenta una sessione di accesso. I token di aggiornamento verranno rimossi automaticamente quando si fa clic su Disconnetti. I seguenti token di aggiornamento sono attualmente attivi per il tuo account.",
                     "header": "Token di aggiornamento",
-                    "last_used": "Utilizzato l'ultima volta il {date} da {location}",
+                    "last_used": "Ultimo utilizzo del {date} da {location}",
                     "not_used": "Non è mai stato usato",
                     "token_title": "Token di aggiornamento per {clientId}"
                 },
@@ -3992,6 +4008,17 @@
                     "primary_color": "Colore principale",
                     "reset": "Reset"
                 },
+                "time_format": {
+                    "description": "Scegli come vengono formattate le ore.",
+                    "dropdown_label": "Formato orario",
+                    "formats": {
+                        "12": "12 ore (AM/PM)",
+                        "24": "24 ore",
+                        "language": "Automatico (usa l'impostazione della lingua)",
+                        "system": "Usa le impostazioni locali del sistema"
+                    },
+                    "header": "Formato orario"
+                },
                 "vibrate": {
                     "description": "Abilitare o disabilitare la vibrazione su questo dispositivo durante il controllo dei dispositivi.",
                     "header": "Vibrazione"
diff --git a/translations/frontend/ja.json b/translations/frontend/ja.json
index 7e032802f8..c096f0fec0 100644
--- a/translations/frontend/ja.json
+++ b/translations/frontend/ja.json
@@ -377,6 +377,7 @@
             "create": "作成",
             "create_blocked_not_running": "システムが {state} 状態であるため、スナップショットの作成は現在できません。",
             "create_snapshot": "スナップショットの作成",
+            "created": "作成",
             "description": "スナップショットでは、Home Assistantインスタンスのすべてのデータを簡単にバックアップして復元することができます。",
             "enter_password": "パスワードを入力してください。",
             "folder": {
@@ -452,6 +453,7 @@
                 "leave_beta_description": "Home Assistant、Supervisor、およびホストの安定した更新を取得する",
                 "ram_usage": "SupervisorのRAM使用量",
                 "reload_supervisor": "リロード Supervisor",
+                "search": "検索",
                 "share_diagnostics": "診断の共有",
                 "share_diagnostics_description": "クラッシュ レポートと診断情報を共有します。",
                 "share_diagonstics_description": "スーパーバイザで予期しないエラーが発生したときに、クラッシュ レポートと診断情報を自動的に共有しますか?{line_break}これにより、問題を解決することができ、情報はホームアシスタントコアチームにのみアクセス可能であり、他の人と共有されません。{line_break}データには、個人情報や機密情報は含まれていないので、いつでも設定でこれを無効にすることができます。",
@@ -1109,7 +1111,7 @@
                         "input_text": "入力テキストを再読み込み",
                         "min_max": "最小/最大エンティティをリロードします",
                         "mqtt": "mqttエンティティをリロードします",
-                        "person": "人の再読込",
+                        "person": "人",
                         "ping": "pingバイナリセンサーエンティティをリロードします",
                         "reload": "{domain}をリロードします",
                         "rest": "残りのエンティティをリロードし通知します",
@@ -1222,12 +1224,12 @@
         "notification_toast": {
             "connection_lost": "接続が切れました。再接続中...",
             "dismiss": "閉じる",
-            "intergration_starting": "{integration}を開始すると、完了するまですべてが利用できるわけではありません。",
+            "integration_starting": "{integration}を開始すると、完了するまですべてが利用できるわけではありません。",
             "service_call_failed": "サービス{service}の呼び出しに失敗しました。",
             "started": "ホームアシスタントが開始されました！",
             "starting": "Home Assistantが起動中です。全て利用可能なるまでもうしばらくお待ち下さい。",
             "triggered": "トリガーしました {name}",
-            "wrapping_up_startup": "スタートアップを総括すると、完成するまですべてが公開されるわけではありません。"
+            "wrapping_up_startup": "スタートアップの締めくくりとして、終了するまですべてが利用できるわけではありません。"
         },
         "panel": {
             "config": {
@@ -2612,7 +2614,7 @@
                             "introduction": "Home Assistant の一部は、再起動を必要とせずに再読込できます。再読込を押すと、現在の設定をアンロードし、新しい設定を読み込みます。",
                             "min_max": "最小/最大エンティティを再読み込み",
                             "mqtt": "mqtt エンティティの再読み込み",
-                            "person": "人の再読込",
+                            "person": "人",
                             "ping": "ping バイナリ センサー エンティティの再読み込み",
                             "reload": "{domain} の再読み込み",
                             "rest": "残りのエンティティの再読み込み",
@@ -2758,6 +2760,12 @@
                         "manufacturer_code_override": "製造元コードの上書き",
                         "value": "バリュー"
                     },
+                    "configuration_page": {
+                        "zha_options": {
+                            "default_light_transition": "デフォルトのライト遷移時間(秒)",
+                            "enable_identify_on_join": "デバイスがネットワークに参加する際に、識別効果を有効にする"
+                        }
+                    },
                     "device_pairing_card": {
                         "CONFIGURED": "設定の完了",
                         "CONFIGURED_status_text": "初期化中",
@@ -2906,6 +2914,9 @@
                         "dead": "停止中",
                         "unknown": "不明"
                     },
+                    "reinterview_node": {
+                        "title": "Z-Waveデバイスへの再インタビュー"
+                    },
                     "remove_node": {
                         "cancel_exclusion": "除外をキャンセルする",
                         "controller_in_exclusion_mode": "Z-Wave コントローラが除外モードになりました。",
diff --git a/translations/frontend/ko.json b/translations/frontend/ko.json
index 8d6ef37bad..a5e21b946d 100644
--- a/translations/frontend/ko.json
+++ b/translations/frontend/ko.json
@@ -366,6 +366,7 @@
         },
         "my": {
             "error": "알 수 없는 오류가 발생했습니다",
+            "error_addon_no_ingress": "해당 애드온은 인그레스를 지원하지 않습니다.",
             "error_addon_not_found": "애드온을 찾을 수 없습니다",
             "faq_link": "내 Home Assistant 자주 묻는 질문",
             "not_supported": "이 리디렉션은 Home Assistant 인스턴스에서 지원되지 않습니다. {link}에서 지원되는 리디렉션과 리디렉션이 도입된 버전을 확인해주세요."
@@ -383,6 +384,7 @@
             "create": "생성하기",
             "create_blocked_not_running": "시스템이 {state} 상태이기 때문에 지금은 스냅숏을 생성할 수 없습니다.",
             "create_snapshot": "스냅숏 생성하기",
+            "created": "생성됨",
             "description": "스냅숏을 사용하면 Home Assistant 인스턴스의 모든 데이터를 쉽게 백업하고 복원할 수 있습니다.",
             "enter_password": "비밀번호를 입력해주세요.",
             "folder": {
@@ -458,6 +460,7 @@
                 "leave_beta_description": "Home Assistant, Supervisor 및 호스트의 공식 업데이트를 가져옵니다",
                 "ram_usage": "Supervisor RAM 사용량",
                 "reload_supervisor": "Supervisor 다시 읽어오기",
+                "search": "검색",
                 "share_diagnostics": "진단 정보 공유하기",
                 "share_diagnostics_description": "충돌 보고서 및 진단 정보를 공유합니다.",
                 "share_diagonstics_description": "Supervisor에서 예기치 않은 오류가 발생한 경우 충돌 보고서 및 진단 정보를 자동으로 공유하시겠습니까? {line_break} 공유된 내용으로 발생된 문제를 해결할 수 있으며, 해당 정보는 Home Assistant Core 팀에서만 접근할 수 있을 뿐, 다른 사람과 공유되지 않습니다.{line_break} 데이터에는 개인정보 및 민감한 정보가 포함되어 있지 않으므로 언제든지 설정에서 이 정보를 사용하지 않도록 설정할 수 있습니다.",
@@ -1258,7 +1261,7 @@
         "notification_toast": {
             "connection_lost": "서버와 연결이 끊어졌습니다. 다시 연결하는 중...",
             "dismiss": "해제하기",
-            "intergration_starting": "{integration}을(를) 시작하는 중입니다. 완료될 때까지 일부 기능은 작동하지 않을 수 있습니다.",
+            "integration_starting": "{integration}을(를) 시작하는 중입니다. 완료될 때까지 일부 기능은 작동하지 않을 수 있습니다.",
             "service_call_failed": "{service} 서비스를 호출하지 못했습니다.",
             "started": "Home Assistant가 시작되었습니다!",
             "starting": "Home Assistant가 시작됩니다. 완료될 때까지 일부 기능은 작동하지 않을 수 있습니다.",
@@ -1746,10 +1749,16 @@
                         "remote": {
                             "access_is_being_prepared": "원격 접속이 준비 중입니다. 준비가 되면 알려드리겠습니다.",
                             "certificate_info": "인증서 정보",
+                            "connected": "연결됨",
                             "info": "Home Assistant Cloud는 집 밖에서도 구성요소에 대한 안전한 원격 연결을 제공해드립니다.",
                             "instance_is_available": "구성요소는 다음의 주소에서 사용할 수 있습니다.",
                             "instance_will_be_available": "토글을 활성화하여 다음의 주소에서 구성요소를 사용해보세요.",
                             "link_learn_how_it_works": "작동 방식에 대해 알아보기",
+                            "not_connected": "연결되지 않음",
+                            "remote_enabled": {
+                                "caption": "자동 연결",
+                                "description": "이 옵션을 활성화하면 Home Assistant 인스턴스에 항상 원격으로 액세스 할 수 있습니다."
+                            },
                             "title": "원격 제어"
                         },
                         "sign_out": "로그 아웃",
@@ -1915,11 +1924,11 @@
                                     },
                                     "usage_supervisor": {
                                         "description": "이름, 버전 그리고 기타 정보.",
-                                        "title": "사용된 통합 구성요소 및 애드온"
+                                        "title": "사용된 통합구성요소 및 애드온"
                                     },
                                     "usage": {
                                         "description": "이름과 버전 정보.",
-                                        "title": "사용된 통합 구성요소"
+                                        "title": "사용된 통합구성요소"
                                     }
                                 }
                             },
@@ -2111,7 +2120,7 @@
                     "show": "표시하기"
                 },
                 "hassio": {
-                    "button": "구성하기"
+                    "button": "구성"
                 },
                 "header": "Home Assistant 구성하기",
                 "helpers": {
@@ -2160,6 +2169,7 @@
                     "license": "Apache 2.0 License에 따라 게시",
                     "path_configuration": "configuration.yaml의 위치: {path}",
                     "server": "서버",
+                    "setup_time": "설정 시간",
                     "source": "소스:",
                     "system_health_error": "시스템 상태보기 구성요소가 로드되지 않았습니다. configuration.yaml에 'system_health:'를 추가해주세요.",
                     "system_health": {
@@ -2182,6 +2192,7 @@
                         "configure": "구성",
                         "delete": "삭제하기",
                         "delete_confirm": "이 통합 구성요소를 제거하시겠습니까?",
+                        "depends_on_cloud": "클라우드 서비스",
                         "device_unavailable": "기기 사용불가",
                         "devices": "{count} {count, plural,\none{개의 기기}\nother{개의 기기}\n}",
                         "disable_restart_confirm": "이 통합 구성요소를 비활성화하려면 Home Assistant를 다시 시작해주세요",
@@ -2206,6 +2217,7 @@
                         "no_area": "영역 없음",
                         "not_loaded": "로드되지 않음",
                         "options": "옵션",
+                        "provided_by_custom_integration": "사용자 통합구성요소",
                         "reload": "다시 읽어오기",
                         "reload_confirm": "통합 구성요소를 다시 읽어 들였습니다",
                         "reload_restart_confirm": "이 통합 구성요소를 다시 읽어 들일려면 Home Assistant를 다시 시작해주세요",
@@ -2237,6 +2249,7 @@
                         },
                         "finish": "완료",
                         "loading_first_time": "통합 구성요소가 설치되는 동안 기다려주세요",
+                        "next": "다음",
                         "not_all_required_fields": "필수 입력란이 모두 채워지지 않았습니다.",
                         "not_loaded": "통합 구성요소를 불러올 수 없습니다. Home Assistant를 다시 시작해주세요.",
                         "pick_flow_step": {
@@ -2575,6 +2588,8 @@
                         "add_scene": "씬 추가하기",
                         "delete_confirm": "이 씬을 삭제하시겠습니까?",
                         "delete_scene": "씬 삭제하기",
+                        "duplicate": "복제",
+                        "duplicate_scene": "씬 복제",
                         "edit_scene": "씬 편집하기",
                         "header": "씬 편집기",
                         "headers": {
@@ -2808,6 +2823,7 @@
                         "value": "값"
                     },
                     "configuration_page": {
+                        "shortcuts_title": "바로 가기",
                         "update_button": "구성 업데이트",
                         "zha_options": {
                             "default_light_transition": "조명 전환 시간 기본 값(초)",
@@ -2902,6 +2918,8 @@
                         "follow_device_instructions": "기기를 연결하려면 기기의 설명서를 따라주세요.",
                         "inclusion_failed": "노드를 추가할 수 없습니다. 자세한 내용은 로그를 확인해주세요.",
                         "inclusion_finished": "노드가 추가되었습니다. 백그라운드에서 노드 설정을 마치면 모든 구성요소가 표시되는 데 몇 분 정도 걸릴 수 있습니다.",
+                        "interview_failed": "장치 인터뷰에 실패했습니다. 로그에서 추가 정보를 확인할 수 있습니다.",
+                        "interview_started": "장치가 인터뷰중입니다. 시간이 좀 걸릴 수 있습니다.",
                         "introduction": "이 마법사는 Z-Wave 네트워크에 노드를 추가하는 과정을 안내해드립니다.",
                         "secure_inclusion_warning": "보안 기기에는 추가 대역폭이 필요합니다. 보안 기기가 너무 많으면 Z-Wave 네트워크의 속도가 느려질 수 있습니다. 잠금장치나 차고 문 개폐기와 같이 보안이 필요한 기기에만 보안 포함을 사용하는 것이 좋습니다.",
                         "start_inclusion": "연결 시작하기",
@@ -2910,7 +2928,7 @@
                         "use_secure_inclusion": "암호화 연결 사용하기",
                         "view_device": "기기 보기"
                     },
-                    "button": "구성하기",
+                    "button": "구성",
                     "common": {
                         "add_node": "노드 추가하기",
                         "close": "닫기",
@@ -2934,13 +2952,14 @@
                         "server_version": "서버 버전"
                     },
                     "device_info": {
-                        "device_config": "기기 구성하기",
+                        "device_config": "기기 구성",
                         "node_ready": "노드 준비",
                         "node_status": "노드 상태",
                         "zwave_info": "Z-Wave 정보"
                     },
                     "logs": {
                         "log_level": "로그 레벨",
+                        "subscribed_to_logs": "Z-Wave JS 로그 메시지 수신 ...",
                         "title": "Z-Wave JS 로그"
                     },
                     "navigation": {
@@ -3989,6 +4008,17 @@
                     "primary_color": "주 색상",
                     "reset": "초기화"
                 },
+                "time_format": {
+                    "description": "시간 형식을 선택하십시오.",
+                    "dropdown_label": "시간 형식",
+                    "formats": {
+                        "12": "12시간(오전/오후)",
+                        "24": "24시간",
+                        "language": "자동 (언어 설정 사용)",
+                        "system": "시스템 로케일 사용"
+                    },
+                    "header": "시간 형식"
+                },
                 "vibrate": {
                     "description": "기기를 제어할 때 이 기기에서 진동을 활성화 또는 비활성화합니다.",
                     "header": "진동 효과"
diff --git a/translations/frontend/lt.json b/translations/frontend/lt.json
index fef434b079..5016bb31cf 100644
--- a/translations/frontend/lt.json
+++ b/translations/frontend/lt.json
@@ -202,7 +202,7 @@
                 "messages": {
                     "became_unavailable": "tapo neprieinama",
                     "changed_to_state": "pakeista į {state}",
-                    "cleared_device_class": "išvalyta  {device_class} nerasta)",
+                    "cleared_device_class": "išvalyta ({device_class} neaptikta)",
                     "detected_device_class": "aptikta {device_class}",
                     "rose": "pakilo",
                     "set": "nustatyti",
@@ -1039,8 +1039,39 @@
                     "close": "Uždaryti",
                     "title_aborted": "Nutraukta"
                 },
+                "number_format": {
+                    "dropdown_label": "Skaičių formatas",
+                    "formats": {
+                        "language": "Automatinis (naudoti kalbos nustatymą)",
+                        "none": "Joks",
+                        "system": "Naudoti sistemos lokalę"
+                    },
+                    "header": "Skaičių formatas"
+                },
                 "push_notifications": {
                     "description": "Siųsti pranešimus į šį įrenginį."
+                },
+                "themes": {
+                    "accent_color": "Akcento spalva",
+                    "dark_mode": {
+                        "auto": "Automatinė",
+                        "dark": "Tamsi",
+                        "light": "Šviesi"
+                    },
+                    "dropdown_label": "Tema",
+                    "header": "Tema",
+                    "primary_color": "Pagrindinė spalva",
+                    "reset": "Atstatyti"
+                },
+                "time_format": {
+                    "dropdown_label": "Laiko formatas",
+                    "formats": {
+                        "12": "12 valandų (AM/PM)",
+                        "24": "24 valandų",
+                        "language": "Automatinis (naudoti kalbos nustatymą)",
+                        "system": "Naudoti sistemos lokalę"
+                    },
+                    "header": "Laiko formatas"
                 }
             }
         }
diff --git a/translations/frontend/nb.json b/translations/frontend/nb.json
index d915fffaba..375698e2b9 100644
--- a/translations/frontend/nb.json
+++ b/translations/frontend/nb.json
@@ -292,7 +292,7 @@
             "save": "Lagre",
             "show_more": "Vis mer informasjon om dette",
             "update": "Oppdater",
-            "update_available": "{count, plural,\n  one {Oppdatering}\n  other {{count} Oppdateringer}\n} venter",
+            "update_available": "{count, plural,\n  one {Update}\n  other {{count} updates}\n} pending",
             "version": "Versjon",
             "yes": "Ja"
         },
@@ -314,7 +314,7 @@
             "addon_new_version": "Ny versjon tilgjengelig",
             "addon_running": "Tillegget kjører",
             "addon_stopped": "Tillegget er stoppet",
-            "addons": "Tillegg",
+            "addons": "Installerte tillegg",
             "no_addons": "Du har ikke installert tilleggsprogrammer ennå. Gå over til tilleggsbutikken for å komme i gang!"
         },
         "dialog": {
@@ -366,6 +366,7 @@
         },
         "my": {
             "error": "En ukjent feil har oppstått",
+            "error_addon_no_ingress": "Det etterspurte tillegget støtter ikke inngang",
             "error_addon_not_found": "Tillegget ble ikke funnet",
             "faq_link": "Vanlige spørsmål om Min Home Assistant",
             "not_supported": "Denne viderekoblingen støttes ikke av Home Assistant-forekomsten. Se på {link} for viderekoblinger som støttes, og hvilken versjon de ble introdusert."
@@ -383,6 +384,7 @@
             "create": "Opprett",
             "create_blocked_not_running": "Å lage en sikkerhetskopi er ikke mulig akkurat nå fordi systemet er i {state} status",
             "create_snapshot": "Opprett sikkerhetskopi",
+            "created": "Opprettet",
             "description": "Sikkerhetskopier lar deg enkelt sikkerhetskopiere og gjenopprette alle dataene fra din Home Assistant forekomst",
             "enter_password": "Vennligst skriv inn et passord",
             "folder": {
@@ -394,14 +396,15 @@
             },
             "folders": "Mapper",
             "full_snapshot": "Full sikkerhetskopi",
-            "name": "Navn",
+            "name": "Navn på øyeblikksbilde",
             "no_snapshots": "Du har ingen sikkerhetskopier ennå",
             "partial_snapshot": "Delvis sikkerhetskopi",
-            "password": "Passord",
+            "password": "Passord for øyeblikksbilde",
             "password_protected": "Passordbeskyttet",
             "password_protection": "Passordbeskyttelse",
             "security": "Sikkerhet",
-            "type": "",
+            "select_type": "Velg hva du vil gjenopprette",
+            "type": "Type øyeblikksbilde",
             "upload_snapshot": "Last opp sikkerhetskopi"
         },
         "store": {
@@ -458,6 +461,7 @@
                 "leave_beta_description": "Få stabile oppdateringer for Home Assistant, Supervisor og vert",
                 "ram_usage": "Supervisor RAM forbruk",
                 "reload_supervisor": "Last inn Supervisor på nytt",
+                "search": "Søk",
                 "share_diagnostics": "Del diagnostikk",
                 "share_diagnostics_description": "Del krasjrapporter og diagnoseinformasjon",
                 "share_diagonstics_description": "Vil du automatisk dele krasjrapporter og diagnostisk informasjon når Supervisor møter på uventede feil? {line_break} Dette vil tillate oss å løse problemene, informasjonen er bare tilgjengelig for Home Assistant Core-teamet og deles ikke med andre. {line_break} Dataene inkluderer ikke privat / sensitiv informasjon, og du kan deaktivere dette i innstillingene når som helst.",
@@ -717,6 +721,9 @@
                 "no_match": "Fant ingen samsvarende områder",
                 "show_areas": "Vis områder"
             },
+            "attributes": {
+                "expansion_header": "Attributter"
+            },
             "blueprint-picker": {
                 "add_user": "Legg til bruker",
                 "remove_user": "Fjern bruker",
@@ -1199,7 +1206,7 @@
             "zha_reconfigure_device": {
                 "attribute": "Attributt",
                 "battery_device_warning": "Du må vekke batteridrevne enheter før du starter omkonfigureringsprosessen. Se enhetens håndbok for instruksjoner om hvordan du vekker enheten.",
-                "bind_header": "Bindende",
+                "bind_header": "Binding",
                 "button_hide": "Skjul detaljer",
                 "button_show": "Vis detaljer",
                 "cluster_header": "Klynge",
@@ -1209,7 +1216,7 @@
                 "heading": "Konfigurerer enheten på nytt",
                 "in_progress": "Enheten konfigureres på nytt. Dette kan ta litt tid.",
                 "introduction": "Konfigurer en enhet på nytt på Zigbee-nettverket. Bruk denne funksjonen hvis enheten ikke fungerer som den skal.",
-                "min_max_change": "min./maks./endring",
+                "min_max_change": "min/maks/endring",
                 "reporting_header": "Rapportering",
                 "run_in_background": "Du kan lukke denne dialogen, og omkonfigurasjonen vil fortsette i bakgrunnen.",
                 "start_reconfiguration": "Start rekonfigurasjon"
@@ -1256,9 +1263,9 @@
             "title": "Varsler"
         },
         "notification_toast": {
-            "connection_lost": "Forbindelse mistet. Koble til igjen...",
+            "connection_lost": "Mistet forbindelsen. Kobler til på nytt...",
             "dismiss": "Avvis",
-            "intergration_starting": "Starter {integration}. Ikke alt er tilgjengelig før lasting er ferdig.",
+            "integration_starting": "Starter {integration}. Ikke alt er tilgjengelig før lasting er ferdig.",
             "service_call_failed": "Kunne ikke tilkalle tjenesten: {service}",
             "started": "Home Assistant har startet!",
             "starting": "Home Assistant starter, alt er ikke tilgjengelig før starten er fullført.",
@@ -1716,6 +1723,7 @@
                             "title": ""
                         },
                         "connected": "Tilkoblet",
+                        "connecting": "Kobler til...",
                         "connection_status": "Status for skytilkobling",
                         "fetching_subscription": "Henter abonnement...",
                         "google": {
@@ -2246,6 +2254,7 @@
                         },
                         "finish": "Fullfør",
                         "loading_first_time": "Vennligst vent mens integrasjonen installeres",
+                        "next": "Neste",
                         "not_all_required_fields": "Ikke alle obligatoriske felt er fylt ut.",
                         "not_loaded": "Integrasjonen kunne ikke lastes, prøv å starte Home Assistant på nytt.",
                         "pick_flow_step": {
@@ -2584,6 +2593,8 @@
                         "add_scene": "Legg til scene",
                         "delete_confirm": "Er du sikker på at du vil slette denne scenen?",
                         "delete_scene": "Slett scene",
+                        "duplicate": "Duplisere",
+                        "duplicate_scene": "Dupliser scenen",
                         "edit_scene": "Rediger scene",
                         "header": "Sceneditor",
                         "headers": {
@@ -2911,7 +2922,9 @@
                         "controller_in_inclusion_mode": "Z-Wave-kontrolleren er nå i inkluderingsmodus",
                         "follow_device_instructions": "Følg instruksjonene som fulgte med enheten for å utløse sammenkobling på enheten",
                         "inclusion_failed": "Noden kunne ikke legges til. Vennligst sjekk loggene for mer informasjon.",
-                        "inclusion_finished": "Noden er lagt til. Det kan ta noen minutter før alle entiteter dukker opp når vi er ferdig med å sette opp noden i bakgrunnen.",
+                        "inclusion_finished": "Noden er lagt til.",
+                        "interview_failed": "Enhetsintervjuet mislyktes. Ytterligere informasjon kan være tilgjengelig i loggene.",
+                        "interview_started": "Enheten blir intervjuet. Dette kan ta litt tid.",
                         "introduction": "Denne veiviseren vil guide deg gjennom å legge til en node i Z-Wave-nettverket ditt",
                         "secure_inclusion_warning": "Sikre enheter krever ekstra båndbredde; for mange sikre enheter kan redusere Z-Wave-nettverket. Vi anbefaler bare å bruke sikker inkludering for enheter som krever det, for eksempel låser eller garasjeportåpnere.",
                         "start_inclusion": "Start inkludering",
@@ -2951,6 +2964,7 @@
                     },
                     "logs": {
                         "log_level": "Loggnivå",
+                        "log_level_changed": "Loggnivå endret til: {level}",
                         "subscribed_to_logs": "Abonnerer på Z-Wave JS-loggmeldinger ...",
                         "title": "Z-Wave JS-logger"
                     },
@@ -3129,7 +3143,7 @@
                         "column_description": "Beskrivelse",
                         "column_example": "Eksempel",
                         "column_parameter": "",
-                        "description": "Service utviklingsverktøyet lar deg tilkalle alle tilgjengelige tjenester i Home Assistant.",
+                        "description": "Tjenesteutviklingsverktøyet lar deg tilkalle alle tilgjengelige tjenester i Home Assistant.",
                         "fill_example_data": "Fyll ut eksempeldata",
                         "no_template_ui_support": "Brukergrensesnittet støtter ikke maler, du kan fortsatt bruke YAML-redigereren.",
                         "title": "Tjenester",
@@ -3142,8 +3156,8 @@
                         "attributes": "Attributter",
                         "copy_id": "Kopier ID til utklippstavlen",
                         "current_entities": "Gjeldende entiteter",
-                        "description1": "Angi gjeldende tilstandsrepresentasjon for en enhet i Home Assistant.",
-                        "description2": "Hvis enheten tilhører en enhet, vil det ikke være noen faktisk kommunikasjon med den enheten.",
+                        "description1": "Angi gjeldende tilstandsrepresentasjon for en entitet i Home Assistant.",
+                        "description2": "Hvis entiteten tilhører en enhet, vil det ikke være noen faktisk kommunikasjon med den enheten.",
                         "entity": "Entitet",
                         "filter_attributes": "Filtrere attributter",
                         "filter_entities": "Filtrere entiteter",
@@ -3973,12 +3987,12 @@
                 },
                 "refresh_tokens": {
                     "confirm_delete": "Er du sikker på at du vil slette oppdateringstoken for {name}?",
-                    "created_at": "Opprettet den {date}",
+                    "created_at": "Opprettet {date}",
                     "current_token_tooltip": "Kan ikke slette gjeldende oppdateringstoken",
                     "delete_failed": "Kunne ikke slette oppdateringstoken.",
                     "description": "Hver oppdateringstoken representerer en innloggingsøkt. Oppdateringstoken blir automatisk fjernet når du klikker på logg ut. Følgende oppdateringstoken er for tiden aktiv for kontoen din.",
                     "header": "Oppdater Tokens",
-                    "last_used": "Sist brukt den {date} fra {location}",
+                    "last_used": "Sist brukt {date} fra {location}",
                     "not_used": "Har aldri blitt brukt",
                     "token_title": "Oppdateringstoken for {clientId}"
                 },
@@ -4000,6 +4014,17 @@
                     "primary_color": "Primærfarge",
                     "reset": "Nullstille"
                 },
+                "time_format": {
+                    "description": "Velg hvordan tidene skal formateres.",
+                    "dropdown_label": "Tidsformat",
+                    "formats": {
+                        "12": "12 timer (AM/PM)",
+                        "24": "24 timer",
+                        "language": "Automatisk (bruk språkinnstilling)",
+                        "system": "Bruk systemområdet"
+                    },
+                    "header": "Tidsformat"
+                },
                 "vibrate": {
                     "description": "Aktiver eller deaktiver vibrasjoner på denne enheten når du kontrollerer enheter.",
                     "header": "Vibrere"
diff --git a/translations/frontend/nl.json b/translations/frontend/nl.json
index 42aa767972..6cf8313968 100644
--- a/translations/frontend/nl.json
+++ b/translations/frontend/nl.json
@@ -366,6 +366,7 @@
         },
         "my": {
             "error": "Er is een onbekende fout opgetreden",
+            "error_addon_no_ingress": "De gevraagde add-on ondersteunt geen ingress",
             "error_addon_not_found": "Invoegtoepassing niet gevonden",
             "faq_link": "My Home Assistant FAQ",
             "not_supported": "Deze redirect wordt niet ondersteund door uw Home Assistant instantie. Controleer de {link} voor de ondersteunde redirects en de versie waarin ze zijn geïntroduceerd."
@@ -383,6 +384,7 @@
             "create": "Maak",
             "create_blocked_not_running": "Het maken van een snapshot is nu niet mogelijk omdat het systeem in {state} staat.",
             "create_snapshot": "Maak snapshot",
+            "created": "Gemaakt",
             "description": "Met snapshots kunt u gemakkelijk een back-up maken van alle gegevens van uw Home Assistant en ze herstellen.",
             "enter_password": "Voer een wachtwoord in.",
             "folder": {
@@ -458,6 +460,7 @@
                 "leave_beta_description": "Krijg stabiele updates voor Home Assistant, Supervisor en host",
                 "ram_usage": "Supervisor RAM-gebruik",
                 "reload_supervisor": "Herlaad de Supervisor",
+                "search": "Zoek",
                 "share_diagnostics": "Diagnostische gegevens delen",
                 "share_diagnostics_description": "Deel crash rapporten en diagnostische informatie.",
                 "share_diagonstics_description": "Zou je automatisch crash rapporten en diagnostische informatie willen delen wanneer de Supervisor onverwachte fouten tegenkomt? {line_break} Dit stelt ons in staat om de problemen op te lossen, de informatie is alleen toegankelijk voor het Home Assistant Core team en zal niet met anderen gedeeld worden.{line_break} De gegevens bevatten geen privé/gevoelige informatie en u kunt dit in de instellingen op elk gewenst moment uitschakelen.",
@@ -1258,7 +1261,7 @@
         "notification_toast": {
             "connection_lost": "Verbinding verbroken. Opnieuw verbinden...",
             "dismiss": "Afwijzen",
-            "intergration_starting": "{integration} starten, niet alles is beschikbaar totdat het voltooid is.",
+            "integration_starting": "{integration} starten, niet alles is beschikbaar totdat het voltooid is.",
             "service_call_failed": "Kan service {service} niet aanroepen",
             "started": "Home Assistant is gestart!",
             "starting": "Home Assistant is aan het opstarten. Tijdens het opstarten is niet alles beschikbaar.",
@@ -1585,7 +1588,7 @@
                                 "sun": {
                                     "event": "Gebeurtenis:",
                                     "label": "Zon",
-                                    "offset": "Afwijking (optioneel)",
+                                    "offset": "Offset (optioneel)",
                                     "sunrise": "Zonsopkomst",
                                     "sunset": "Zonsondergang"
                                 },
@@ -1630,7 +1633,7 @@
                         "delete_automation": "Verwijder automatisering",
                         "delete_confirm": "Weet je zeker dat je deze automatisering wilt verwijderen?",
                         "dev_automation": "Debug automatisering",
-                        "dev_only_editable": "Alleen automatiseringen in automations.yaml kunnen worden gedebugd.",
+                        "dev_only_editable": "Alleen automatiseringen waaraan een uniek ID is toegewezen, kunnen worden gedebugd",
                         "duplicate": "Dupliceren",
                         "duplicate_automation": "Dupliceer automatisering",
                         "edit_automation": "Bewerk automatisering",
@@ -1668,7 +1671,7 @@
                         "error_no_url": "Voer de URL van de Blueprint in.",
                         "file_name": "Blueprint pad",
                         "header": "Voeg een nieuwe Blueprint toe",
-                        "import_btn": "Bekijk een Blueprint",
+                        "import_btn": "Bekijk deze Blueprint",
                         "import_header": "Blueprint \"{name}\"",
                         "import_introduction_link": "U kunt Blueprints van andere gebruikers importeren vanuit Github en de {community_link} . Voer de URL van de Blueprint hieronder in.",
                         "importing": "Blueprint importeren ...",
@@ -1958,7 +1961,7 @@
                     "attributes_override": "Je kunt ze overschrijven als je wilt.",
                     "attributes_set": "De volgende attributen van de entiteit zijn automatisch ingevuld.",
                     "caption": "Aanpassingen",
-                    "description": "Pas je entiteiten aan",
+                    "description": "Pas uw entiteiten aan",
                     "different_include": "Mogelijk via een domein, een glob of een andere include.",
                     "pick_attribute": "Kies een attribuut om te overschrijven",
                     "picker": {
@@ -2166,7 +2169,7 @@
                     "license": "Gepubliceerd onder de Apache 2.0-licentie",
                     "path_configuration": "Pad naar configuration.yaml: {path}",
                     "server": "Server",
-                    "setup_time": "Setup tijd",
+                    "setup_time": "Insteltijd",
                     "source": "Bron:",
                     "system_health_error": "De systeemstatus component is niet geladen. Voeg ' system_health: ' toe aan het configuratiebestand.",
                     "system_health": {
@@ -2585,6 +2588,8 @@
                         "add_scene": "Voeg scène toe",
                         "delete_confirm": "Weet je zeker dat je deze scène wilt verwijderen?",
                         "delete_scene": "Scène verwijderen",
+                        "duplicate": "Dupliceer",
+                        "duplicate_scene": "Dupliceer scene",
                         "edit_scene": "Scène bewerken",
                         "header": "Scene Editor",
                         "headers": {
@@ -2696,7 +2701,7 @@
                         },
                         "validation": {
                             "check_config": "Controleer configuratie",
-                            "heading": "Configuratie validatie",
+                            "heading": "Valideer configuratie",
                             "introduction": "Controleer je configuratie als je onlangs wijzigingen hebt aangebracht en zeker wilt weten dat ze geldig zijn",
                             "invalid": "Ongeldige configuratie",
                             "valid": "Geldige configuratie!"
@@ -2821,7 +2826,7 @@
                         "shortcuts_title": "Snelkoppelingen",
                         "update_button": "Update configuratie",
                         "zha_options": {
-                            "default_light_transition": "Standaard licht transitietijd (seconden)",
+                            "default_light_transition": "Standaard lichttransitietijd (seconden)",
                             "enable_identify_on_join": "Schakel het identificatie-effect in wanneer apparaten in het netwerk komen",
                             "title": "Globale opties"
                         }
@@ -2912,7 +2917,9 @@
                         "controller_in_inclusion_mode": "Uw Z-Wave controller bevindt zich nu in de opnamemodus.",
                         "follow_device_instructions": "Volg de aanwijzingen die bij het apparaat zijn geleverd om de koppeling van het apparaat te activeren.",
                         "inclusion_failed": "Het knooppunt kon niet worden toegevoegd. Controleer de logs voor meer informatie.",
-                        "inclusion_finished": "Het knooppunt is toegevoegd. Het kan een paar minuten duren voordat alle entiteiten zichtbaar zijn, omdat we het opzetten van het knooppunt op de achtergrond afwerken.",
+                        "inclusion_finished": "Het knooppunt is toegevoegd.",
+                        "interview_failed": "Het apparaat \"interview\" is mislukt. Aanvullende informatie is mogelijk beschikbaar in de logboeken.",
+                        "interview_started": "Het apparaat wordt \"geïnterviewd\". Dit kan wat tijd kosten.",
                         "introduction": "Deze wizard begeleidt u bij het toevoegen van een knooppunt aan uw Z-Wave netwerk.",
                         "secure_inclusion_warning": "Beveiligde apparaten vereisen extra bandbreedte; te veel beveiligde apparaten kunnen uw Z-Wave-netwerk vertragen. We raden aan om alleen veilige opname te gebruiken voor apparaten die dat vereisen, zoals sloten of garagedeuropeners.",
                         "start_inclusion": "Start Opname",
@@ -2983,6 +2990,16 @@
                         "dead": "Onbereikbaar",
                         "unknown": "Onbekend"
                     },
+                    "reinterview_node": {
+                        "battery_device_warning": "U moet apparaten met batterijvoeding uit de slaapstand halen voordat u een nieuw \"interview\" begint. Raadpleeg de handleiding van uw apparaat voor instructies over hoe u het apparaat uit de slaapstand haalt.",
+                        "in_progress": "Het apparaat wordt \"geïnterviewd\". Dit kan wat tijd kosten.",
+                        "interview_complete": "Apparaat interview voltooid.",
+                        "interview_failed": "Het apparaat \"interview\" is mislukt. Aanvullende informatie is mogelijk beschikbaar in de logboeken.",
+                        "introduction": "\"Interview\" een apparaat op uw Z-Wave-netwerk opnieuw. Gebruik deze functie als uw apparaat een ontbrekende of onjuiste functionaliteit heeft.",
+                        "run_in_background": "U kunt dit dialoogvenster sluiten en het \"interview\" zal op de achtergrond worden voortgezet.",
+                        "start_reinterview": "Start opnieuw \"interview\"",
+                        "title": "\"Interview\" een Z-Wave-apparaat opnieuw"
+                    },
                     "remove_node": {
                         "cancel_exclusion": "Uitsluiting annuleren",
                         "controller_in_exclusion_mode": "Uw Z-Wave controller bevindt zich nu in de uitsluitingsmodus.",
@@ -3590,7 +3607,7 @@
                         "unsaved_changes": "Niet-opgeslagen wijzigingen"
                     },
                     "save_config": {
-                        "cancel": "Laat maar",
+                        "cancel": "Annuleer",
                         "close": "Sluiten",
                         "empty_config": "Begin met een leeg dashboard",
                         "header": "Neem de controle over je Lovelace UI",
@@ -3991,6 +4008,17 @@
                     "primary_color": "Primaire kleur",
                     "reset": "Herstel"
                 },
+                "time_format": {
+                    "description": "Kies hoe tijden worden opgemaakt.",
+                    "dropdown_label": "Tijdformaat",
+                    "formats": {
+                        "12": "12 uur (AM/PM)",
+                        "24": "24 uur",
+                        "language": "Automatisch (taalinstelling gebruiken)",
+                        "system": "Systeemlokalen gebruiken"
+                    },
+                    "header": "Tijdformaat"
+                },
                 "vibrate": {
                     "description": "Schakel trillingen op dit apparaat in of uit wanneer u apparaten bestuurt.",
                     "header": "Trillen"
diff --git a/translations/frontend/pl.json b/translations/frontend/pl.json
index a365c7e119..13ee90347d 100644
--- a/translations/frontend/pl.json
+++ b/translations/frontend/pl.json
@@ -287,7 +287,7 @@
             "reset_defaults": "Przywróć domyślne",
             "reset_options": "Resetuj opcje",
             "restart": "Uruchom ponownie",
-            "restart_name": "Uruchom ponownie {name}",
+            "restart_name": "Uruchom ponownie",
             "running_version": "Aktualnie używasz wersji {version}",
             "save": "Zapisz",
             "show_more": "Pokaż więcej informacji na ten temat",
@@ -303,7 +303,7 @@
             },
             "restart": {
                 "text": "Czy na pewno chcesz ponownie uruchomić {name}?",
-                "title": "Uruchom ponownie {name}"
+                "title": "Uruchom ponownie"
             },
             "update": {
                 "text": "Czy na pewno chcesz zaktualizować {name} do wersji {version}?",
@@ -314,7 +314,7 @@
             "addon_new_version": "Nowa wersja dostępna",
             "addon_running": "Dodatek jest uruchomiony",
             "addon_stopped": "Dodatek jest zatrzymany",
-            "addons": "Dodatki",
+            "addons": "Zainstalowane dodatki",
             "no_addons": "Nie masz jeszcze zainstalowanych żadnych dodatków. Przejdź do sklepu z dodatkami, aby rozpocząć!"
         },
         "dialog": {
@@ -366,6 +366,7 @@
         },
         "my": {
             "error": "Wystąpił nieznany błąd",
+            "error_addon_no_ingress": "Żądany dodatek nie obsługuje osadzania",
             "error_addon_not_found": "Nie znaleziono dodatku",
             "faq_link": "Mój Home Assistant - często zadawane pytania",
             "not_supported": "To przekierowanie nie jest obsługiwane przez Twoją instancję Home Assistanta. Sprawdź {link} aby znaleźć obsługiwane przekierowania i wersję, w której zostały wprowadzone."
@@ -383,6 +384,7 @@
             "create": "Utwórz",
             "create_blocked_not_running": "Tworzenie snapshota nie jest teraz możliwe, ponieważ system jest w {state}.",
             "create_snapshot": "Utwórz snapshot",
+            "created": "Utworzony",
             "description": "Snapshoty umożliwiają łatwe tworzenie kopii zapasowych i przywracanie wszystkich danych instancji Home Assistant.",
             "enter_password": "Proszę wprowadzić hasło",
             "folder": {
@@ -434,8 +436,8 @@
                 "ip_address": "Adres IP",
                 "new_hostname": "Wprowadź nową nazwę hosta:",
                 "operating_system": "System operacyjny",
-                "reboot_host": "Uruchom ponownie hosta",
-                "shutdown_host": "Zamknij hosta",
+                "reboot_host": "Uruchom ponownie",
+                "shutdown_host": "Wyłącz",
                 "used_space": "Zajęte miejsce"
             },
             "log": {
@@ -457,7 +459,8 @@
                 "leave_beta_action": "Opuść kanał beta",
                 "leave_beta_description": "Pobieraj stabilne aktualizacje dla Home Assistanta, Supervisora i hosta",
                 "ram_usage": "Zużycie pamięci przez Supervisora",
-                "reload_supervisor": "Wczytaj ponownie Supervisor",
+                "reload_supervisor": "Wczytaj ponownie",
+                "search": "Szukaj",
                 "share_diagnostics": "Udostępnij dane diagnostyczne",
                 "share_diagnostics_description": "Udostępniaj raporty o awariach i informacje diagnostyczne.",
                 "share_diagonstics_description": "Czy chcesz automatycznie udostępniać raporty o awariach i informacje diagnostyczne, gdy Supervisor napotka nieoczekiwane błędy? {line_break} Pozwoli nam to rozwiązać problemy, informacje są dostępne tylko dla głównego zespołu Home Assistant Core i nie będą udostępniane innym. {line_break} Dane nie zawierają żadnych prywatnych/wrażliwych informacji i możesz to wyłączyć w ustawieniach w dowolnym momencie.",
@@ -717,6 +720,9 @@
                 "no_match": "Nie znaleziono pasujących obszarów",
                 "show_areas": "Pokaż obszary"
             },
+            "attributes": {
+                "expansion_header": "Atrybuty"
+            },
             "blueprint-picker": {
                 "add_user": "Dodaj użytkownika",
                 "remove_user": "Usuń użytkownika",
@@ -1258,7 +1264,7 @@
         "notification_toast": {
             "connection_lost": "Utracono połączenie. Łączę ponownie...",
             "dismiss": "Ukryj",
-            "intergration_starting": "{integration} uruchamia się, nie wszystko będzie dostępne, dopóki uruchamianie się nie zakończy.",
+            "integration_starting": "{integration} uruchamia się, nie wszystko będzie dostępne, dopóki uruchamianie się nie zakończy.",
             "service_call_failed": "Nie udało się wywołać usługi {service}.",
             "started": "Home Assistant uruchomił się!",
             "starting": "Home Assistant uruchamia się, nie wszystko będzie dostępne, dopóki uruchamianie się nie zakończy.",
@@ -2166,7 +2172,7 @@
                     "license": "Opublikowany na licencji Apache 2.0",
                     "path_configuration": "Ścieżka do pliku configuration.yaml: {path}",
                     "server": "serwer",
-                    "setup_time": "Ustawienia czasu",
+                    "setup_time": "Czas konfiguracji",
                     "source": "Źródło:",
                     "system_health_error": "Komponent kondycji systemu nie jest wczytany. Dodaj 'system_health:' do pliku configuration.yaml",
                     "system_health": {
@@ -2585,6 +2591,8 @@
                         "add_scene": "Dodaj scenę",
                         "delete_confirm": "Czy na pewno chcesz usunąć tę scenę?",
                         "delete_scene": "Usuń scenę",
+                        "duplicate": "Duplikuj",
+                        "duplicate_scene": "Duplikuj scenę",
                         "edit_scene": "Edytuj scenę",
                         "header": "Edytor scen",
                         "headers": {
@@ -2912,7 +2920,9 @@
                         "controller_in_inclusion_mode": "Kontroler Z-Wave jest teraz w trybie dodawania węzła.",
                         "follow_device_instructions": "Postępuj zgodnie ze wskazówkami dołączonymi do urządzenia, aby wywołać dodawanie do sieci.",
                         "inclusion_failed": "Nie można dodać węzła. Sprawdź logi, aby uzyskać więcej informacji.",
-                        "inclusion_finished": "Węzeł został dodany. Trwa kończenie konfiguracji węzła w tle, dodawanie encji urządzenia może zająć kilka minut.",
+                        "inclusion_finished": "Węzeł został dodany.",
+                        "interview_failed": "Odpytywanie urządzenia nie powiodło się. Dodatkowe informacje mogą być dostępne w logach.",
+                        "interview_started": "Urządzenie jest odpytywane. To może zająć trochę czasu.",
                         "introduction": "Ten kreator poprowadzi Cię przez proces dodawania węzła do sieci Z-Wave.",
                         "secure_inclusion_warning": "Bezpieczne węzły wymagają dodatkowej przepustowości; zbyt wiele bezpiecznych węzłów może spowolnić twoją sieć Z-Wave. Zalecamy używanie bezpiecznego dodawania tylko w przypadku urządzeń, które tego wymagają, takich jak zamki lub urządzenia sterujące bramami garażowymi.",
                         "start_inclusion": "Rozpocznij dodawanie węzła",
@@ -2952,7 +2962,7 @@
                     },
                     "logs": {
                         "log_level": "Poziom loga",
-                        "subscribed_to_logs": "Zasubskrybowano komunikaty dziennika Z-Wave JS ...",
+                        "subscribed_to_logs": "Zasubskrybowano komunikaty dziennika Z-Wave JS...",
                         "title": "Logi Z-Wave JS"
                     },
                     "navigation": {
@@ -4001,6 +4011,17 @@
                     "primary_color": "Kolor podstawowy",
                     "reset": "Zresetuj"
                 },
+                "time_format": {
+                    "description": "Wybierz sposób formatowania czasu.",
+                    "dropdown_label": "Format czasu",
+                    "formats": {
+                        "12": "12-godzinny (AM / PM)",
+                        "24": "24-godzinny",
+                        "language": "Auto (użyj ustawień języka)",
+                        "system": "Użyj ustawień regionalnych systemu"
+                    },
+                    "header": "Format czasu"
+                },
                 "vibrate": {
                     "description": "Włącz lub wyłącz wibracje na tym urządzeniu podczas sterowania urządzeniami.",
                     "header": "Wibracja"
diff --git a/translations/frontend/pt-BR.json b/translations/frontend/pt-BR.json
index 6a149061b7..87168ecd09 100644
--- a/translations/frontend/pt-BR.json
+++ b/translations/frontend/pt-BR.json
@@ -120,9 +120,15 @@
             }
         },
         "snapshot": {
+            "created": "Criado",
             "folder": {
                 "homeassistant": "Configuração do Home Assistant"
             }
+        },
+        "system": {
+            "supervisor": {
+                "search": "Procurar"
+            }
         }
     },
     "ui": {
@@ -694,6 +700,12 @@
                 "zha_device_card": {
                     "device_name_placeholder": "Alterar o nome do dispositivo"
                 }
+            },
+            "zha_reconfigure_device": {
+                "attribute": "Atributo",
+                "bind_header": "Vinculação",
+                "min_max_change": "min/máx/mudança",
+                "reporting_header": "Relatório"
             }
         },
         "duration": {
@@ -732,7 +744,8 @@
                     "caption": "Áreas",
                     "data_table": {
                         "area": "Área",
-                        "devices": "Dispositivos"
+                        "devices": "Dispositivos",
+                        "entities": "Entidades"
                     },
                     "delete": {
                         "confirmation_text": "Todos os dispositivos nesta área ficarão sem designação.",
@@ -744,6 +757,7 @@
                         "create": "Criar",
                         "default_name": "Nova Zona",
                         "delete": "Excluir",
+                        "linked_entities_caption": "Entidades",
                         "name": "Nome",
                         "name_required": "Nome é obrigatório",
                         "unknown_error": "Erro desconhecido",
@@ -1131,10 +1145,15 @@
                         "remote": {
                             "access_is_being_prepared": "O acesso remoto está sendo preparado. Vamos notificá-lo quando estiver pronto.",
                             "certificate_info": "Informações do certificado",
+                            "connected": "Conectado",
                             "info": "O Home Assistant Cloud fornece uma conexão remota segura à sua instância enquanto estiver fora de casa.",
                             "instance_is_available": "Sua instância está disponível em",
                             "instance_will_be_available": "Sua instância estará disponível em",
                             "link_learn_how_it_works": "Aprenda como funciona",
+                            "not_connected": "Não Conectado",
+                            "remote_enabled": {
+                                "caption": "Conectar automaticamente"
+                            },
                             "title": "Controle Remoto"
                         },
                         "sign_out": "Sair",
@@ -1475,6 +1494,7 @@
                     "license": "Publicado sob a licença Apache 2.0",
                     "path_configuration": "Caminho para configuration.yaml: {path}",
                     "server": "servidor",
+                    "setup_time": "Tempo de configuração",
                     "source": "Código fonte:",
                     "system_health_error": "O componente System Health não foi carregado. Adicione 'system_health:' ao configuration.yaml",
                     "system_health": {
@@ -1524,6 +1544,7 @@
                         },
                         "finish": "Terminar",
                         "loading_first_time": "Aguarde enquanto a integração está sendo instalada",
+                        "next": "Próximo",
                         "not_all_required_fields": "Nem todos os campos obrigatórios são preenchidos.",
                         "submit": "Enviar"
                     },
@@ -1785,6 +1806,8 @@
                         "add_scene": "Adicionar cena",
                         "delete_confirm": "Tem certeza de que deseja excluir esta cena?",
                         "delete_scene": "Excluir cena",
+                        "duplicate": "Duplicado",
+                        "duplicate_scene": "Cena duplicada",
                         "edit_scene": "Editar cena",
                         "header": "Editor de cena",
                         "headers": {
@@ -2082,6 +2105,14 @@
                     "introduction": "As zonas permitem especificar determinadas regiões da Terra. Quando uma pessoa está dentro de uma zona, o estado assume o nome da zona. As zonas também podem ser usadas como gatilho ou condição nas configurações de automações.",
                     "no_zones_created_yet": "Parece que você ainda não criou nenhuma zona."
                 },
+                "zwave_js": {
+                    "logs": {
+                        "log_level": "Nível de Log"
+                    },
+                    "navigation": {
+                        "logs": "Logs"
+                    }
+                },
                 "zwave": {
                     "button": "Configurar",
                     "common": {
@@ -2971,6 +3002,17 @@
                     "primary_color": "Cor Principal",
                     "reset": "Redefinir"
                 },
+                "time_format": {
+                    "description": "Escolha como os horários são formatados.",
+                    "dropdown_label": "Formato de hora",
+                    "formats": {
+                        "12": "Horas",
+                        "24": "Horas",
+                        "language": "Auto (usar configuração de idioma)",
+                        "system": "Use a localidade do sistema"
+                    },
+                    "header": "Formato de hora"
+                },
                 "vibrate": {
                     "description": "Ative ou desative a vibração neste dispositivo ao controlar dispositivos.",
                     "header": "Vibrar"
diff --git a/translations/frontend/pt.json b/translations/frontend/pt.json
index bdc10ad0c1..6ad736bf3f 100644
--- a/translations/frontend/pt.json
+++ b/translations/frontend/pt.json
@@ -138,6 +138,9 @@
                     "apparmor": {
                         "title": "AppArmor"
                     },
+                    "auth_api": {
+                        "title": "Autenticação do Home Assistant"
+                    },
                     "docker_api": {
                         "title": "Acesso completo ao Docker"
                     },
@@ -147,6 +150,9 @@
                     "hassio_api": {
                         "description": "O suplemento tem acesso à API do Supervisor, a pedido do autor do complemento. Por defeito, o complemento pode aceder à informação da versão do seu sistema. Quando o complemento solicita acesso de nível 'gestor' ou 'administrador' à API, obterá acesso para controlar múltiplas partes do seu sistema Home Assistant. Esta permissão é indicada por este crachá e terá um impacto negativo na pontuação de segurança do complemento."
                     },
+                    "ingress": {
+                        "title": "Ingress"
+                    },
                     "label": {
                         "apparmor": "AppArmor",
                         "docker": "docker",
@@ -344,6 +350,7 @@
             "create": "Criar",
             "create_blocked_not_running": "Não é possível criar um snapshot agora porque o sistema está {state}.",
             "create_snapshot": "Criar snapshot",
+            "created": "Criado",
             "description": "As imagens de sistema permitem facilmente criar uma cópia de segurança e restauro de todos os dados da sua instância do Home Assistant",
             "enter_password": "Por favor introduza uma palavra-passe.",
             "folder": {
@@ -419,6 +426,7 @@
                 "leave_beta_description": "Obter actualizações estáveis para Home Assistant, Supervisor e Host",
                 "ram_usage": "Utilização de RAM do Supervisor",
                 "reload_supervisor": "Recarregar Supervisor",
+                "search": "Procurar",
                 "share_diagnostics": "Partilhar Diagnósticos",
                 "share_diagnostics_description": "Partilhar relatórios de falhas e informações de diagnóstico.",
                 "share_diagonstics_description": "Quer partilhar automaticamente relatórios de quebras do sistema e informações de diagnóstico quando o Supervisor se deparar com erros inesperados? {line_break} Isto permitir-nos-á resolver os problemas, a informação só é acessível à equipa do Home Assistant Core  e não será partilhada com outros.{line_break} Os dados não incluem qualquer informação privada/sensível e pode desativá-la em configurações em qualquer altura.",
@@ -523,7 +531,7 @@
                 "brightness": "Brilho",
                 "color_temperature": "Temperatura de cor",
                 "effect": "Efeito",
-                "white_value": "Quantidade de brancos"
+                "white_value": "Brilho"
             },
             "lock": {
                 "code": "Código",
@@ -679,6 +687,8 @@
                 "today": "Hoje"
             },
             "data-table": {
+                "clear": "Limpar",
+                "filtering_by": "A filtrar por",
                 "no-data": "Dados do evento",
                 "search": "Procurar"
             },
@@ -1134,6 +1144,15 @@
                 "zha_device_card": {
                     "device_name_placeholder": "Alterar o nome do dispositivo"
                 }
+            },
+            "zha_reconfigure_device": {
+                "attribute": "Atributo",
+                "bind_header": "Associação",
+                "button_hide": "Ocultar detalhes",
+                "button_show": "Mostrar Detalhes",
+                "configuring_alt": "A configurar",
+                "min_max_change": "min/max/alterar",
+                "start_reconfiguration": "Iniciar reconfiguração"
             }
         },
         "duration": {
@@ -1185,7 +1204,8 @@
                     "caption": "Áreas",
                     "data_table": {
                         "area": "Área",
-                        "devices": "Dispositivos"
+                        "devices": "Dispositivos",
+                        "entities": "Entidades"
                     },
                     "delete": {
                         "confirmation_text": "Todos os dispositivos nesta área ficarão por atribuir.",
@@ -1197,8 +1217,10 @@
                         "create": "Criar",
                         "default_name": "Nova área",
                         "delete": "Apagar",
+                        "linked_entities_caption": "Entidades",
                         "name": "Nome",
                         "name_required": "Nome é obrigatório",
+                        "no_linked_entities": "Não há entidades ligadas a essa área.",
                         "unknown_error": "Erro desconhecido",
                         "update": "Atualizar"
                     },
@@ -1649,10 +1671,15 @@
                         "remote": {
                             "access_is_being_prepared": "O acesso remoto está a ser preparado. Iremos notificá-lo quando estiver pronto.",
                             "certificate_info": "Informações do certificado",
+                            "connected": "Ligado",
                             "info": "O Home Assistant Cloud oferece uma ligação remota segura à sua instância enquanto estiver fora de casa.",
                             "instance_is_available": "A sua instância está disponível em",
                             "instance_will_be_available": "Sua instância estará disponível em",
                             "link_learn_how_it_works": "Aprenda como funciona",
+                            "not_connected": "Não Ligado",
+                            "remote_enabled": {
+                                "caption": "Ligar automaticamente"
+                            },
                             "title": "Controle Remoto"
                         },
                         "sign_out": "Terminar sessão",
@@ -2029,6 +2056,7 @@
                     "license": "Publicado sob a licença de Apache 2.0",
                     "path_configuration": "Caminho para configuration.yaml: {path}",
                     "server": "servidor",
+                    "setup_time": "Tempo de inicialização",
                     "source": "Fonte:",
                     "system_health_error": "O componente System Health não está carregado. Adicione 'system_health:' ao configuration.yaml",
                     "system_health": {
@@ -2047,8 +2075,11 @@
                     "caption": "Integrações",
                     "config_entry": {
                         "area": "Em {area}",
+                        "check_the_logs": "Verifique os logs",
+                        "configure": "Configurar",
                         "delete": "Eliminar",
                         "delete_confirm": "Tem a certeza que pretende apagar esta integração?",
+                        "depends_on_cloud": "Depende da nuvem",
                         "device_unavailable": "Dispositivo indisponível",
                         "devices": "{count} {count, plural,\n one {dispositivo}\n other {dispositivos}\n}",
                         "disable_restart_confirm": "Reinicie o Home Assistant para termina a desactivação desta integração",
@@ -2070,6 +2101,7 @@
                         "hub": "Conectado via",
                         "manuf": "por {manufacturer}",
                         "no_area": "Nenhuma Área",
+                        "not_loaded": "Não carregado",
                         "options": "Opções",
                         "reload": "Recarregar",
                         "reload_confirm": "A integração foi recarregada",
@@ -2077,6 +2109,12 @@
                         "rename": "Renomear",
                         "restart_confirm": "Reinicie o Home Assistant para concluir a remoção desta integração",
                         "services": "{count} {count, plural,\n  one {serviço}\n  other {serviços}\n}",
+                        "state": {
+                            "loaded": "Carregado",
+                            "migration_error": "Erro de migração",
+                            "not_loaded": "Não carregado",
+                            "setup_error": "Erro ao inicializar"
+                        },
                         "system_options": "Opções do sistema",
                         "unnamed_entry": "Entrada sem nome"
                     },
@@ -2094,6 +2132,7 @@
                         },
                         "finish": "Terminar",
                         "loading_first_time": "Por favor, aguarde enquanto a integração está a ser instalada",
+                        "next": "Próximo",
                         "not_all_required_fields": "Nem todos os campos obrigatórios estão preenchidos.",
                         "submit": "Enviar"
                     },
@@ -2105,6 +2144,7 @@
                     "disable": {
                         "disabled_integrations": "{number} desativado",
                         "hide_disabled": "Ocultar integrações desativadas",
+                        "show": "Mostrar",
                         "show_disabled": "Mostrar integrações desativadas"
                     },
                     "discovered": "Descoberto",
@@ -2417,6 +2457,8 @@
                         "add_scene": "Adicionar cenário",
                         "delete_confirm": "Tem certeza de que deseja apagar esta cena?",
                         "delete_scene": "Eliminar cena",
+                        "duplicate": "Duplicado",
+                        "duplicate_scene": "Duplicar cena",
                         "edit_scene": "Editar cena",
                         "header": "Editor de cenários",
                         "headers": {
@@ -2770,7 +2812,12 @@
                         "node_status": "Estado do Nó",
                         "zwave_info": "Informações sobre Z-Wave"
                     },
+                    "logs": {
+                        "log_level": "Nível de log",
+                        "title": "Z-Wave JS Logs"
+                    },
                     "navigation": {
+                        "logs": "Logs",
                         "network": "Rede"
                     },
                     "network_status": {
@@ -2778,6 +2825,10 @@
                         "connecting": "A conectar",
                         "unknown": "Desconhecido"
                     },
+                    "node_config": {
+                        "error_device_not_found": "Dispositivo não encontrado",
+                        "parameter_is_read_only": "Este parâmetro é apenas de leitura."
+                    },
                     "node_status": {
                         "alive": "Ativo",
                         "asleep": "Adormecido",
@@ -2901,7 +2952,7 @@
                         "count_listeners": " ({count} escutas)",
                         "data": "Dados do evento (YAML, opcional)",
                         "description": "Dispare um evento aqui.",
-                        "documentation": "Documentação de eventos.",
+                        "documentation": "Documentação de eventos",
                         "event_fired": "Evento {name} despoletado",
                         "fire_event": "Executar Evento",
                         "listen_to_events": "Ouça os eventos",
@@ -2932,7 +2983,7 @@
                         "copy_id": "Copiar para a Área de Transferência",
                         "current_entities": "Entidades atuais",
                         "description1": "Coloque o nome de um dispositivo do Home Assistant.",
-                        "description2": "Isto não irá comunicar com o dispositivo.",
+                        "description2": "Se a entidade pertencer a um dispositivo, não haverá comunicação com o dispositivo.",
                         "entity": "Entidade",
                         "filter_attributes": "Filtrar atributos",
                         "filter_entities": "Filtrar entidades",
@@ -3302,7 +3353,7 @@
                         "duplicate": "Duplicar cartão",
                         "edit": "Editar",
                         "header": "Configuração do cartão",
-                        "move": "Mover para Vista",
+                        "move": "Mover para vista",
                         "move_after": "Mover cartão após",
                         "move_before": "Mover cartão antes de",
                         "options": "Mais opções",
@@ -3724,6 +3775,15 @@
                     "enable": "Ativar",
                     "header": "Módulos de Autenticação por Multíplos-fatores"
                 },
+                "number_format": {
+                    "dropdown_label": "Formatação numérica",
+                    "formats": {
+                        "comma_decimal": "1,234,567.89",
+                        "decimal_comma": "1.234.567,89",
+                        "space_comma": "1 234 567,89"
+                    },
+                    "header": "Formatação numérica"
+                },
                 "push_notifications": {
                     "add_device_prompt": {
                         "input_label": "Nome do dispositivo",
diff --git a/translations/frontend/ru.json b/translations/frontend/ru.json
index c2ad66a3de..bf9577846b 100644
--- a/translations/frontend/ru.json
+++ b/translations/frontend/ru.json
@@ -96,8 +96,8 @@
     },
     "state": {
         "default": {
-            "off": "Выкл",
-            "on": "Вкл",
+            "off": "Выключено",
+            "on": "Включено",
             "unavailable": "Недоступно",
             "unknown": "Неизвестно"
         }
@@ -292,7 +292,7 @@
             "save": "Сохранить",
             "show_more": "Показать дополнительную информацию об этом",
             "update": "Обновить",
-            "update_available": "{count, plural,\n  one {Доступно обновление}\n  other {Доступно {count} обновления}\n}",
+            "update_available": "{count, plural,\n  one {Доступно обновление}\n  few {Доступно {count} обновления}\n  many {Доступно {count} обновлений}\n  other {Доступно {count} обновлений}\n}",
             "version": "Версия",
             "yes": "Да"
         },
@@ -314,7 +314,7 @@
             "addon_new_version": "Доступна новая версия",
             "addon_running": "Дополнение работает",
             "addon_stopped": "Дополнение остановлено",
-            "addons": "Дополнения",
+            "addons": "Установленные дополнения",
             "no_addons": "Нет установленных дополнений. Вы можете установить их из магазина дополнений."
         },
         "dialog": {
@@ -366,6 +366,7 @@
         },
         "my": {
             "error": "Произошла неизвестная ошибка",
+            "error_addon_no_ingress": "Дополнение не поддерживает ingress.",
             "error_addon_not_found": "Дополнение не найдено.",
             "faq_link": "часто задаваемыми вопросами по My Home Assistant",
             "not_supported": "Это перенаправление не поддерживается Вашим Home Assistant. Ознакомьтесь с {link}, чтобы узнать поддерживаемые перенаправления и версии, в которых они были добавлены."
@@ -383,6 +384,7 @@
             "create": "Создать",
             "create_blocked_not_running": "Создание снимка сейчас невозможно, потому что система находится в состоянии {state}.",
             "create_snapshot": "Снимки файловой системы",
+            "created": "Создан",
             "description": "Снимок файловой системы (snapshot) позволяет легко создавать и восстанавливать резервную копию всех данных Вашего Home Assistant.",
             "enter_password": "Пожалуйста, введите пароль.",
             "folder": {
@@ -401,7 +403,8 @@
             "password_protected": "защищено паролем",
             "password_protection": "Защита паролем",
             "security": "Безопасность",
-            "type": "Тип",
+            "select_type": "Выберите, что нужно восстановить",
+            "type": "Тип снимка",
             "upload_snapshot": "Загрузить снимок"
         },
         "store": {
@@ -458,6 +461,7 @@
                 "leave_beta_description": "Получать стабильные версии обновлений для Home Assistant, Supervisor и операционной системы хоста",
                 "ram_usage": "Использование ОЗУ",
                 "reload_supervisor": "Перезагрузить Supervisor",
+                "search": "Поиск",
                 "share_diagnostics": "Отправлять данные для диагностики",
                 "share_diagnostics_description": "Автоматически отправлять отчеты о сбоях и диагностическую информацию.",
                 "share_diagonstics_description": "Хотели бы Вы автоматически отправлять отчеты о сбоях и другую диагностическую информацию, когда Supervisor обнаруживает неожиданные ошибки? {line_break} Это позволит разработчикам получать необходимые данные для решения проблем. Данные не будут содержать никакой личной или конфиденциальной информации и будут доступны только основной команде Home Assistant. {line_break} Вы сможете отменить отправку данных в настройках в любое время.",
@@ -717,6 +721,9 @@
                 "no_match": "Подходящих помещений не найдено",
                 "show_areas": "Показать помещения"
             },
+            "attributes": {
+                "expansion_header": "Атрибуты"
+            },
             "blueprint-picker": {
                 "add_user": "Добавить пользователя",
                 "remove_user": "Удалить пользователя",
@@ -865,27 +872,27 @@
             },
             "relative_time": {
                 "duration": {
-                    "day": "{count} {count, plural,\none {д.}\nother {д.}\n}",
-                    "hour": "{count} {count, plural,\none {ч.}\nother {ч.}\n}",
-                    "minute": "{count} {count, plural,\none {мин.}\nother {мин.}\n}",
-                    "second": "{count} {count, plural,\n  one {сек.}\n  other {сек.}\n}",
-                    "week": "{count} {count, plural,\none {нед.}\nother {нед.}\n}"
+                    "day": "{count} {count, plural,\n  one {день}\n  few {дня}\n  many {дней}\n  other {дней}\n}",
+                    "hour": "{count} {count, plural,\n  one {час}\n  few {часа}\n  many {часов}\n  other {часов}\n}",
+                    "minute": "{count} {count, plural,\n  one {минута}\n  few {минуты}\n  many {минут}\n  other {минут}\n}",
+                    "second": "{count} {count, plural,\n  one {секунда}\n  few {секунды}\n  many {секунд}\n  other {секунд}\n}",
+                    "week": "{count} {count, plural,\n  one {неделя}\n  few {недели}\n  many {недель}\n  other {недель}\n}"
                 },
                 "future_duration": {
-                    "day": "Через {count} {count, plural,\n  one {д.}\n  other {д.}\n}",
-                    "hour": "Через {count} {count, plural,\n  one {ч.}\n  other {ч.}\n}",
-                    "minute": "Через {count} {count, plural,\n  one {мин.}\n  other {мин.}\n}",
-                    "second": "Через {count} {count, plural,\n  one {сек.}\n  other {сек.}\n}",
-                    "week": "Через {count} {count, plural,\n  one {нед.}\n  other {нед.}\n}"
+                    "day": "Через {count} {count, plural,\n  one {день}\n  few {дня}\n  many {дней}\n  other {дней}\n}",
+                    "hour": "Через {count} {count, plural,\n  one {час}\n  few {часа}\n  many {часов}\n  other {часов}\n}",
+                    "minute": "Через {count} {count, plural,\n  one {минуту}\n  few {минуты}\n  many {минут}\n  other {минут}\n}",
+                    "second": "Через {count} {count, plural,\n  one {секунду}\n  few {секунды}\n  many {секунд}\n  other {секунд}\n}",
+                    "week": "Через {count} {count, plural,\n  one {неделю}\n  few {недели}\n  many {недель}\n  other {недель}\n}"
                 },
                 "just_now": "Сейчас",
                 "never": "Никогда",
                 "past_duration": {
-                    "day": "{count} {count, plural,\n  one {д.}\n  other {д.}\n} назад",
-                    "hour": "{count} {count, plural,\n  one {ч.}\n  other {ч.}\n} назад",
-                    "minute": "{count} {count, plural,\n  one {мин.}\n  other {мин.}\n} назад",
-                    "second": "{count} {count, plural,\n  one {сек.}\n  other {сек.}\n} назад",
-                    "week": "{count} {count, plural,\n  one {нед.}\n  other {нед.}\n} назад"
+                    "day": "{count} {count, plural,\n  one {день}\n  few {дня}\n  many {дней}\n  other {дней}\n} назад",
+                    "hour": "{count} {count, plural,\n  one {час}\n  few {часа}\n  many {часов}\n  other {часов}\n} назад",
+                    "minute": "{count} {count, plural,\n  one {минуту}\n  few {минуты}\n  many {минут}\n  other {минут}\n} назад",
+                    "second": "{count} {count, plural,\n  one {секунду}\n  few {секунды}\n  many {секунд}\n  other {секунд}\n} назад",
+                    "week": "{count} {count, plural,\n  one {неделю}\n  few {недели}\n  many {недель}\n  other {недель}\n} назад"
                 }
             },
             "service-control": {
@@ -1038,7 +1045,7 @@
                 "restored": {
                     "confirm_remove_text": "Вы уверены, что хотите удалить этот объект?",
                     "confirm_remove_title": "Удалить объект?",
-                    "not_provided": "Этот объект в настоящее время недоступен и его родительская интеграция или устройство удалены, изменены либо неисправны.",
+                    "not_provided": "Этот объект в настоящее время недоступен. Его родительская интеграция или устройство удалены, изменены либо неисправны.",
                     "remove_action": "Удалить объект",
                     "remove_intro": "Если объект больше не используется, Вы можете удалить его."
                 },
@@ -1216,11 +1223,11 @@
             }
         },
         "duration": {
-            "day": "{count} {count, plural,\none {д.}\nother {д.}\n}",
-            "hour": "{count} {count, plural,\none {ч.}\nother {ч.}\n}",
-            "minute": "{count} {count, plural,\none {мин.}\nother {мин.}\n}",
-            "second": "{count} {count, plural,\n  one {сек.}\n  other {сек.}\n}",
-            "week": "{count} {count, plural,\none {нед.}\nother {нед.}\n}"
+            "day": "{count} {count, plural,\n  one {день}\n  few {дня}\n  many {дней}\n  other {дней}\n}",
+            "hour": "{count} {count, plural,\n  one {час}\n  few {часа}\n  many {часов}\n  other {часов}\n}",
+            "minute": "{count} {count, plural,\n  one {минута}\n  few {минуты}\n  many {минут}\n  other {минут}\n}",
+            "second": "{count} {count, plural,\n  one {секунда}\n  few {секунды}\n  many {секунд}\n  other {секунд}\n}",
+            "week": "{count} {count, plural,\n  one {неделя}\n  few {недели}\n  many {недель}\n  other {недель}\n}"
         },
         "errors": {
             "config": {
@@ -1258,7 +1265,7 @@
         "notification_toast": {
             "connection_lost": "Соединение потеряно. Повторное подключение...",
             "dismiss": "Закрыть",
-            "intergration_starting": "{integration} запускается, пока что не всё может быть доступно.",
+            "integration_starting": "{integration} запускается, пока что не всё может быть доступно.",
             "service_call_failed": "Не удалось вызвать службу {service}.",
             "started": "Home Assistant работает!",
             "starting": "Home Assistant запускается, пока что не всё может быть доступно.",
@@ -1716,6 +1723,7 @@
                             "title": "Alexa"
                         },
                         "connected": "Подключено",
+                        "connecting": "Подключение...",
                         "connection_status": "Статус подключения к облаку",
                         "fetching_subscription": "Получение информации о подписке…",
                         "google": {
@@ -2027,7 +2035,7 @@
                     "enabled_label": "Активировать устройство",
                     "entities": {
                         "add_entities_lovelace": "Добавить объекты в Lovelace UI",
-                        "disabled_entities": "Показать {count, plural,\n  one {деактивированные объекты:}\n  other {деактивированные объекты:}\n} {count}",
+                        "disabled_entities": "+{count} {count, plural,\n  one {деактивированный объект}\n  few {деактивированных объекта}\n  many {деактивированных объектов}\n  other {деактивированных объектов}\n}",
                         "entities": "Объекты",
                         "hide_disabled": "Скрыть деактивированные объекты",
                         "none": "У этого устройства нет объектов"
@@ -2068,12 +2076,12 @@
                         "disable_selected": {
                             "button": "Деактивировать выбранные",
                             "confirm_text": "Деактивированные объекты не будут доступны в Home Assistant.",
-                            "confirm_title": "Вы уверены, что хотите деактивировать {number} {number, plural,\n  one {выбранный объект}\n  other {выбранных объектов}\n}?"
+                            "confirm_title": "Вы уверены, что хотите деактивировать {number} {number, plural,\n  one {выбранный объект}\n  few {выбранных объекта}\n  many {выбранных объектов}\n  other {выбранных объектов}\n}?"
                         },
                         "enable_selected": {
                             "button": "Активировать выбранные",
                             "confirm_text": "Если эти объекты ранее были деактивированы, они снова будут доступными в Home Assistant.",
-                            "confirm_title": "Активировать {number} {number, plural,\n  one {выбранный объект}\n  other {выбранных объектов}\n}?"
+                            "confirm_title": "Активировать {number} {number, plural,\n  one {выбранный объект}\n  few {выбранных объекта}\n  many {выбранных объектов}\n  other {выбранных объектов}\n}?"
                         },
                         "filter": {
                             "filter": "Фильтр",
@@ -2096,9 +2104,9 @@
                         "remove_selected": {
                             "button": "Удалить выбранные",
                             "confirm_partly_text": "Вы можете удалить только {removable} из выбранных {selected} объектов. Объекты могут быть удалены только когда интеграция больше не предоставляет объекты. В некоторых случаях Вам нужно будет перезапустить Home Assistant, чтобы удалить объекты удаленной интеграции. Вы уверены, что хотите удалить объекты?",
-                            "confirm_partly_title": "Только {number} {number, plural,\n  one {выбранный объект}\n  other {выбранных объектов}\n} могут быть удалены.",
+                            "confirm_partly_title": "Только {number} {number, plural,\n  one {выбранный объект}\n  few {выбранных объекта}\n  many {выбранных объектов}\n  other {выбранных объектов}\n} могут быть удалены.",
                             "confirm_text": "Вы должны удалить эти объекты из конфигурации Lovelace и из правил автоматизации.",
-                            "confirm_title": "Вы уверены, что хотите удалить {number} {number, plural,\n  one {выбранный объект}\n  other {выбранных объектов}\n}?"
+                            "confirm_title": "Вы уверены, что хотите удалить {number} {number, plural,\n  one {выбранный объект}\n  few {выбранных объекта}\n  many {выбранных объектов}\n  other {выбранных объектов}\n}?"
                         },
                         "search": "Поиск объектов",
                         "selected": "Выбрано: {number}",
@@ -2191,7 +2199,7 @@
                         "delete_confirm": "Вы уверены, что хотите удалить эту интеграцию?",
                         "depends_on_cloud": "Зависит от облачных сервисов",
                         "device_unavailable": "Устройство недоступно",
-                        "devices": "{count, plural,\n  one {устройств:}\n  other {устройств:}\n} {count}",
+                        "devices": "{count} {count, plural,\n  one {устройство}\n  few {устройства}\n  many {устройств}\n  other {устройств}\n}",
                         "disable_restart_confirm": "Перезапустите Home Assistant, чтобы завершить деактивацию этой интеграции.",
                         "disable": {
                             "disable_confirm": "Вы уверены, что хотите деактивировать эту запись конфигурации? Её дочерние устройства и объекты будут также деактивированы.",
@@ -2205,7 +2213,7 @@
                         },
                         "documentation": "Документация",
                         "enable_restart_confirm": "Перезапустите Home Assistant, чтобы завершить подключение этой интеграции.",
-                        "entities": "{count, plural,\n  one {объектов:}\n  other {объектов:}\n} {count}",
+                        "entities": "{count} {count, plural,\n  one {объект}\n  few {объекта}\n  many {объектов}\n  other {объектов}\n}",
                         "entity_unavailable": "Объект недоступен",
                         "firmware": "Прошивка: {version}",
                         "hub": "Подключено через",
@@ -2220,7 +2228,7 @@
                         "reload_restart_confirm": "Перезапустите Home Assistant, чтобы завершить перезагрузку этой интеграции",
                         "rename": "Переименовать",
                         "restart_confirm": "Перезапустите Home Assistant, чтобы завершить удаление этой интеграции",
-                        "services": "{count, plural,\n  one {служб:}\n  other {служб:}\n} {count}",
+                        "services": "{count} {count, plural,\n  one {служба}\n  few {службы}\n  many {служб}\n  other {служб}\n}",
                         "state": {
                             "failed_unload": "Не удалось выгрузить",
                             "loaded": "Загружено",
@@ -2585,6 +2593,8 @@
                         "add_scene": "Добавить сцену",
                         "delete_confirm": "Вы уверены, что хотите удалить эту сцену?",
                         "delete_scene": "Удалить сцену",
+                        "duplicate": "Дублировать",
+                        "duplicate_scene": "Дублировать сцену",
                         "edit_scene": "Редактировать сцену",
                         "header": "Редактор сцен",
                         "headers": {
@@ -2912,7 +2922,9 @@
                         "controller_in_inclusion_mode": "Ваш контроллер Z-Wave находится в режиме подключения.",
                         "follow_device_instructions": "Следуйте инструкциям к подключаемому устройству, чтобы инициировать сопряжение.",
                         "inclusion_failed": "Не удалось добавить узел. Проверьте журналы для получения дополнительной информации.",
-                        "inclusion_finished": "Узел добавлен. Настройка узла выполняется в фоновом режиме, поэтому может пройти несколько минут, пока все объекты появятся в интерфейсе.",
+                        "inclusion_finished": "Узел добавлен.",
+                        "interview_failed": "Опрос устройства не удался. Дополнительная информация может быть получена в журналах.",
+                        "interview_started": "Устройство опрашивается, это может занять некоторое время.",
                         "introduction": "Этот мастер поможет Вам добавить узел в Вашу сеть Z-Wave.",
                         "secure_inclusion_warning": "Для защищенных устройств требуется дополнительная пропускная способность. Слишком много таких устройств может замедлить работу Вашей сети Z-Wave. Мы рекомендуем использовать безопасное подключение только для устройств, которым требуется дополнительная защита, например, для замков или открывателей гаражных ворот.",
                         "start_inclusion": "Начать подключение",
@@ -2952,6 +2964,7 @@
                     },
                     "logs": {
                         "log_level": "Уровень",
+                        "log_level_changed": "Уровень журнала изменен на: {level}",
                         "subscribed_to_logs": "Подписано на сообщения журнала Z-Wave JS...",
                         "title": "Журналы Z-Wave JS"
                     },
@@ -4001,6 +4014,17 @@
                     "primary_color": "Основной цвет",
                     "reset": "Сбросить"
                 },
+                "time_format": {
+                    "description": "Отображение времени в пользовательском интерфейсе",
+                    "dropdown_label": "Формат времени",
+                    "formats": {
+                        "12": "12-часовой (AM/PM)",
+                        "24": "24-часовой",
+                        "language": "Автоматически (определять из настроек языка)",
+                        "system": "Использовать локализацию системы"
+                    },
+                    "header": "Формат времени"
+                },
                 "vibrate": {
                     "description": "Получать тактильный отклик при управлении устройствами",
                     "header": "Вибрация"
diff --git a/translations/frontend/sk.json b/translations/frontend/sk.json
index 1470603626..a1ba3685ab 100644
--- a/translations/frontend/sk.json
+++ b/translations/frontend/sk.json
@@ -1151,7 +1151,7 @@
                             "delete_confirm": "Ste si istý odstránením ? ",
                             "duplicate": "Duplikovať",
                             "header": "Akcie",
-                            "introduction": "Akcie, ktoré vykoná Home Assistant, sa aktivujú po spustení automatizácie. \n\n [Viac informácií o akciách.](https://home-assistant.io/docs/automation/action/)",
+                            "introduction": "Akcie predstavujú činnosti, ktoré Home Assistant vykoná po spustení automatizácie.",
                             "learn_more": "Získajte viac informácií o akciách",
                             "name": "Akcia",
                             "type_select": "Typ akcie",
diff --git a/translations/frontend/zh-Hans.json b/translations/frontend/zh-Hans.json
index f7ab7ec2fb..204b0f2bdf 100644
--- a/translations/frontend/zh-Hans.json
+++ b/translations/frontend/zh-Hans.json
@@ -366,6 +366,7 @@
         },
         "my": {
             "error": "发生未知错误",
+            "error_addon_no_ingress": "请求的加载项不支持 ingress",
             "error_addon_not_found": "未找到加载项",
             "faq_link": "我的 Home Assistant 常见问题",
             "not_supported": "您的 Home Assistant 不支持此重定向。请查阅{link}以获取受支持的重定向及其引入的版本。"
@@ -383,6 +384,7 @@
             "create": "创建",
             "create_blocked_not_running": "现在无法创建快照，因为系统处于{state}状态。",
             "create_snapshot": "创建快照",
+            "created": "创建于",
             "description": "“快照”使您可以轻松地备份和还原 Home Assistant 实例的所有数据。",
             "enter_password": "请输入密码。",
             "folder": {
@@ -458,6 +460,7 @@
                 "leave_beta_description": "获取 Home Assistant、Supervisor 和主机的稳定版更新",
                 "ram_usage": "Supervisor 内存使用率",
                 "reload_supervisor": "重载 Supervisor",
+                "search": "搜索",
                 "share_diagnostics": "共享诊断信息",
                 "share_diagnostics_description": "共享崩溃报告和诊断信息。",
                 "share_diagonstics_description": "您想要在 Supervisor 遇到异常错误时，共享崩溃报告和诊断信息吗？{line_break}这将帮助我们解决问题，此信息仅限 Home Assistant Core 团队访问，不会共享给他人。{line_break}此信息不包含私密、敏感信息，您可以随时在设置中将其禁用。",
@@ -1258,7 +1261,7 @@
         "notification_toast": {
             "connection_lost": "连接中断。正在重新连接...",
             "dismiss": "关闭",
-            "intergration_starting": "正在启动 {integration}。在启动完成前，部分功能暂不可用。",
+            "integration_starting": "正在启动 {integration}。在启动完成前，部分功能暂不可用。",
             "service_call_failed": "调用服务 {service} 失败。",
             "started": "Home Assistant 已启动！",
             "starting": "Home Assistant 正在启动。在启动完成前，部分功能暂不可用。",
@@ -2166,7 +2169,7 @@
                     "license": "根据 Apache 2.0 许可发布",
                     "path_configuration": "configuration.yaml 路径：{path}",
                     "server": "服务器",
-                    "setup_time": "安装时间",
+                    "setup_time": "启动时长",
                     "source": "源：",
                     "system_health_error": "未加载系统健康组件。请将 'system_health:' 添加到 configuration.yaml",
                     "system_health": {
@@ -2189,7 +2192,7 @@
                         "configure": "选项",
                         "delete": "删除",
                         "delete_confirm": "您确定要删除此集成吗？",
-                        "depends_on_cloud": "取决于云端",
+                        "depends_on_cloud": "依赖云端服务",
                         "device_unavailable": "设备不可用",
                         "devices": "{count} {count, plural,\n  one {个设备}\n  other {个设备}\n}",
                         "disable_restart_confirm": "重启 Home Assistant 以完成此集成的禁用",
@@ -2246,6 +2249,7 @@
                         },
                         "finish": "完成",
                         "loading_first_time": "正在安装集成，请稍候",
+                        "next": "下一步",
                         "not_all_required_fields": "请填写所有必填字段",
                         "not_loaded": "集成未能加载，请尝试重启 Home Assistant。",
                         "pick_flow_step": {
@@ -2584,6 +2588,8 @@
                         "add_scene": "添加场景",
                         "delete_confirm": "您确定要删除此场景吗？",
                         "delete_scene": "删除场景",
+                        "duplicate": "制作副本",
+                        "duplicate_scene": "复制场景",
                         "edit_scene": "编辑场景",
                         "header": "场景编辑器",
                         "headers": {
@@ -2911,7 +2917,9 @@
                         "controller_in_inclusion_mode": "您的 Z-Wave 控制器现在处于 inclusion 模式。",
                         "follow_device_instructions": "请按照设备说明书，触发设备配对。",
                         "inclusion_failed": "无法添加该节点。请查看日志以了解更多信息。",
-                        "inclusion_finished": "节点已添加。需要花费几分钟在后台完成节点设置，然后才能显示出所有实体。",
+                        "inclusion_finished": "节点已添加。",
+                        "interview_failed": "设备协商失败。日志中会有更多信息。",
+                        "interview_started": "设备正在重新协商。可能需要一段时间。",
                         "introduction": "此向导将指导您向 Z-Wave 网络添加节点。",
                         "secure_inclusion_warning": "安全设备需要额外的带宽；安全设备过多可能会降低 Z-Wave 网络的速度。建议仅当设备需要时才使用 secure inclusion，例如门锁和车库开门器。",
                         "start_inclusion": "开始 inclusion",
@@ -3142,8 +3150,8 @@
                         "attributes": "属性",
                         "copy_id": "将 ID 复制到剪贴板",
                         "current_entities": "现有实体",
-                        "description1": "设置设备在 Home Assistant 中的呈现方式。",
-                        "description2": "这将不影响实际设备。",
+                        "description1": "此处可设置实体在 Home Assistant 中的状态。",
+                        "description2": "此操作只会改变实体在系统中显示的状态，而不会改变实际设备的状态。",
                         "entity": "实体",
                         "filter_attributes": "输入筛选属性",
                         "filter_entities": "输入筛选实体",
@@ -3515,7 +3523,7 @@
                         "duplicate": "复制卡片",
                         "edit": "编辑",
                         "header": "卡片配置",
-                        "move": "移动",
+                        "move": "移动到视图",
                         "move_after": "向后移动卡片",
                         "move_before": "向前移动卡片",
                         "options": "更多选项",
@@ -4000,6 +4008,17 @@
                     "primary_color": "主色调",
                     "reset": "重置"
                 },
+                "time_format": {
+                    "description": "选择时间的格式。",
+                    "dropdown_label": "时间格式",
+                    "formats": {
+                        "12": "12 小时（上午/下午）",
+                        "24": "24 小时",
+                        "language": "自动（使用语言设置）",
+                        "system": "使用系统区域设置"
+                    },
+                    "header": "时间格式"
+                },
                 "vibrate": {
                     "description": "控制设备时，在此设备上启用或禁用振动。",
                     "header": "振动"
diff --git a/translations/frontend/zh-Hant.json b/translations/frontend/zh-Hant.json
index d916ccf291..849d32e790 100644
--- a/translations/frontend/zh-Hant.json
+++ b/translations/frontend/zh-Hant.json
@@ -292,7 +292,7 @@
             "save": "儲存",
             "show_more": "顯示關於此更詳細資訊",
             "update": "更新",
-            "update_available": "{count, plural,\n  one {個更新}\n  other {{count} 個更新}\n}等候中",
+            "update_available": "{count, plural,\n  one {個更新}\n  other {{count}個更新}\n}等候中",
             "version": "安裝版本",
             "yes": "是"
         },
@@ -314,7 +314,7 @@
             "addon_new_version": "新版本可供下載",
             "addon_running": "附加元件執行中",
             "addon_stopped": "附加元件已停止",
-            "addons": "附加元件",
+            "addons": "安裝附加元件",
             "no_addons": "目前似乎沒有安裝任何附加元件。點選下方附加元件商店以新增！"
         },
         "dialog": {
@@ -366,6 +366,7 @@
         },
         "my": {
             "error": "發生未知錯誤",
+            "error_addon_no_ingress": "所要求的附加元件不支援 ingress",
             "error_addon_not_found": "找不到附加元件",
             "faq_link": "Home Assistant 常見問答集",
             "not_supported": "Home Assistant 不支援此重新導向。點選 {link} 獲取支援之重新導向與版本。"
@@ -383,6 +384,7 @@
             "create": "新增",
             "create_blocked_not_running": "由於系統為 {state} 狀態，無法製作系統備份。",
             "create_snapshot": "製作系統備份",
+            "created": "建立",
             "description": "系統備份可供您快速的備份與還原 Home Assistant 所有資料。",
             "enter_password": "請輸入密碼。",
             "folder": {
@@ -458,6 +460,7 @@
                 "leave_beta_description": "取得 Home Assistant、Supervisor 與主機穩定更新版",
                 "ram_usage": "Supervisor RAM 使用率",
                 "reload_supervisor": "重新載入 Supervisor",
+                "search": "搜尋",
                 "share_diagnostics": "分享診斷資料",
                 "share_diagnostics_description": "分享當機回報與診斷資訊。",
                 "share_diagonstics_description": "是否要於 Supervisor 遭遇未知錯誤時、自動分享當機回報與診斷資訊？{line_break} 此些訊息將協助我們修正問題、所提供的資訊僅供 Home Assistant Core 團隊分析使用、將不會與其他人員共享。{line_break} 所提供的資料並不包含任何私人/敏感資訊，您可以於之後隨時關閉此設定。",
@@ -629,7 +632,7 @@
                     "humidity": "濕度",
                     "precipitation": "降雨量",
                     "temperature": "溫度",
-                    "visibility": "顯示選項",
+                    "visibility": "能見度",
                     "wind_speed": "風速"
                 },
                 "cardinal_direction": {
@@ -1258,7 +1261,7 @@
         "notification_toast": {
             "connection_lost": "連線中斷。重新連線中...",
             "dismiss": "關閉",
-            "intergration_starting": "{integration} 正在啟動，在完成載入前、可能無法顯示所有功能。",
+            "integration_starting": "{integration} 正在啟動，在完成載入前、可能無法顯示所有功能。",
             "service_call_failed": "服務 {service} 執行失敗。",
             "started": "Home Assistant 已啟動！",
             "starting": "Home Assistant 正在啟動，在完成載入前、可能無法顯示所有功能。",
@@ -2246,6 +2249,7 @@
                         },
                         "finish": "完成",
                         "loading_first_time": "請稍候、正在安裝整合",
+                        "next": "下一步",
                         "not_all_required_fields": "所有所需欄位都需要填寫。",
                         "not_loaded": "整合無法載入，請重啟 Home Assistant。",
                         "pick_flow_step": {
@@ -2584,6 +2588,8 @@
                         "add_scene": "新增場景",
                         "delete_confirm": "確定要刪除此場景？",
                         "delete_scene": "刪除場景",
+                        "duplicate": "複製",
+                        "duplicate_scene": "複製場景",
                         "edit_scene": "編輯場景",
                         "header": "場景編輯器",
                         "headers": {
@@ -2911,7 +2917,9 @@
                         "controller_in_inclusion_mode": "Z-Wave 控制器目前處於登記模式。",
                         "follow_device_instructions": "跟隨裝置隨附的說明書以觸發裝置上的配對功能。",
                         "inclusion_failed": "節點無法新增，請參閱日誌以獲得更詳細資訊。",
-                        "inclusion_finished": "節點已經新增。由於於後台完成設定、可能需要一點時間以讓所有節點進行顯示。",
+                        "inclusion_finished": "節點已經新增。",
+                        "interview_failed": "裝置探訪失敗。日誌中可能包含其他相關資訊。",
+                        "interview_started": "正在探訪裝置，可能需要一點時間。",
                         "introduction": "導引將帶領你於 Z-Wave 網路中新增節點。",
                         "secure_inclusion_warning": "加密裝置需要額外的頻寬，過多的加密裝置可能拖慢您的 Z-Wave 網路。建議您僅於需要時才使用加密裝置登記、例如門鎖或車庫開門裝置。",
                         "start_inclusion": "開始登記",
@@ -4000,6 +4008,17 @@
                     "primary_color": "主色彩",
                     "reset": "重置"
                 },
+                "time_format": {
+                    "description": "選擇時間顯示格式。",
+                    "dropdown_label": "時間格式",
+                    "formats": {
+                        "12": "12 小時制（AM/PM）",
+                        "24": "24 小時制",
+                        "language": "自動（使用語言設定）",
+                        "system": "使用系統位置"
+                    },
+                    "header": "時間格式"
+                },
                 "vibrate": {
                     "description": "當控制裝置時、開啟或關閉此裝置震動。",
                     "header": "震動"
diff --git a/yarn.lock b/yarn.lock
index 113e25d4c6..0375730fc3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16,25 +16,25 @@
   dependencies:
     "@babel/highlight" "^7.12.13"
 
-"@babel/compat-data@^7.13.11", "@babel/compat-data@^7.13.15", "@babel/compat-data@^7.13.8", "@babel/compat-data@^7.14.0":
+"@babel/compat-data@^7.13.11", "@babel/compat-data@^7.13.15", "@babel/compat-data@^7.14.0":
   version "7.14.0"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.14.0.tgz#a901128bce2ad02565df95e6ecbf195cf9465919"
   integrity sha512-vu9V3uMM/1o5Hl5OekMUowo3FqXLJSw+s+66nt0fSWVWTtmosdzn45JHOB3cPtZoe6CTBDzvSw0RdOY85Q37+Q==
 
-"@babel/core@^7.11.1", "@babel/core@^7.12.3", "@babel/core@^7.14.0":
-  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.14.0.tgz#47299ff3ec8d111b493f1a9d04bf88c04e728d88"
-  integrity sha512-8YqpRig5NmIHlMLw09zMlPTvUVMILjqCOtVgu+TVNWEBvy9b5I3RRyhqnrV4hjgEK7n8P9OqvkWJAFmEL6Wwfw==
+"@babel/core@^7.11.1", "@babel/core@^7.12.3", "@babel/core@^7.14.3":
+  version "7.14.3"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.14.3.tgz#5395e30405f0776067fbd9cf0884f15bfb770a38"
+  integrity sha512-jB5AmTKOCSJIZ72sd78ECEhuPiDMKlQdDI/4QRI6lzYATx5SSogS1oQA2AoPecRCknm30gHi2l+QVvNUu3wZAg==
   dependencies:
     "@babel/code-frame" "^7.12.13"
-    "@babel/generator" "^7.14.0"
+    "@babel/generator" "^7.14.3"
     "@babel/helper-compilation-targets" "^7.13.16"
-    "@babel/helper-module-transforms" "^7.14.0"
+    "@babel/helper-module-transforms" "^7.14.2"
     "@babel/helpers" "^7.14.0"
-    "@babel/parser" "^7.14.0"
+    "@babel/parser" "^7.14.3"
     "@babel/template" "^7.12.13"
-    "@babel/traverse" "^7.14.0"
-    "@babel/types" "^7.14.0"
+    "@babel/traverse" "^7.14.2"
+    "@babel/types" "^7.14.2"
     convert-source-map "^1.7.0"
     debug "^4.1.0"
     gensync "^1.0.0-beta.2"
@@ -42,12 +42,12 @@
     semver "^6.3.0"
     source-map "^0.5.0"
 
-"@babel/generator@^7.14.0":
-  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.14.0.tgz#0f35d663506c43e4f10898fbda0d752ec75494be"
-  integrity sha512-C6u00HbmsrNPug6A+CiNl8rEys7TsdcXwg12BHi2ca5rUfAs3+UwZsuDQSXnc+wCElCXMB8gMaJ3YXDdh8fAlg==
+"@babel/generator@^7.14.2", "@babel/generator@^7.14.3":
+  version "7.14.3"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.14.3.tgz#0c2652d91f7bddab7cccc6ba8157e4f40dcedb91"
+  integrity sha512-bn0S6flG/j0xtQdz3hsjJ624h3W0r3llttBMfyHX3YrZ/KtLYr15bjA0FXkgW7FpvrDuTuElXeVjiKlYRpnOFA==
   dependencies:
-    "@babel/types" "^7.14.0"
+    "@babel/types" "^7.14.2"
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
@@ -66,7 +66,7 @@
     "@babel/helper-explode-assignable-expression" "^7.12.13"
     "@babel/types" "^7.12.13"
 
-"@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.13.16", "@babel/helper-compilation-targets@^7.13.8":
+"@babel/helper-compilation-targets@^7.13.0", "@babel/helper-compilation-targets@^7.13.16":
   version "7.13.16"
   resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.13.16.tgz#6e91dccf15e3f43e5556dffe32d860109887563c"
   integrity sha512-3gmkYIrpqsLlieFwjkGgLaSHmhnvlAYzZLlYVjlW+QwI+1zE17kGxuJGmIqDQdYp56XdmGeD+Bswx0UTyG18xA==
@@ -76,30 +76,30 @@
     browserslist "^4.14.5"
     semver "^6.3.0"
 
-"@babel/helper-create-class-features-plugin@^7.13.0", "@babel/helper-create-class-features-plugin@^7.13.11", "@babel/helper-create-class-features-plugin@^7.14.0":
-  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.0.tgz#38367d3dab125b12f94273de418f4df23a11a15e"
-  integrity sha512-6pXDPguA5zC40Y8oI5mqr+jEUpjMJonKvknvA+vD8CYDz5uuXEwWBK8sRAsE/t3gfb1k15AQb9RhwpscC4nUJQ==
+"@babel/helper-create-class-features-plugin@^7.13.0", "@babel/helper-create-class-features-plugin@^7.14.0", "@babel/helper-create-class-features-plugin@^7.14.2", "@babel/helper-create-class-features-plugin@^7.14.3":
+  version "7.14.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.3.tgz#832111bcf4f57ca57a4c5b1a000fc125abc6554a"
+  integrity sha512-BnEfi5+6J2Lte9LeiL6TxLWdIlEv9Woacc1qXzXBgbikcOzMRM2Oya5XGg/f/ngotv1ej2A/b+3iJH8wbS1+lQ==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.12.13"
-    "@babel/helper-function-name" "^7.12.13"
+    "@babel/helper-function-name" "^7.14.2"
     "@babel/helper-member-expression-to-functions" "^7.13.12"
     "@babel/helper-optimise-call-expression" "^7.12.13"
-    "@babel/helper-replace-supers" "^7.13.12"
+    "@babel/helper-replace-supers" "^7.14.3"
     "@babel/helper-split-export-declaration" "^7.12.13"
 
 "@babel/helper-create-regexp-features-plugin@^7.12.13":
-  version "7.12.17"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.12.17.tgz#a2ac87e9e319269ac655b8d4415e94d38d663cb7"
-  integrity sha512-p2VGmBu9oefLZ2nQpgnEnG0ZlRPvL8gAGvPUMQwUdaE8k49rOMuZpOwdQoy5qJf6K8jL3bcAMhVUlHAjIgJHUg==
+  version "7.14.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.14.3.tgz#149aa6d78c016e318c43e2409a0ae9c136a86688"
+  integrity sha512-JIB2+XJrb7v3zceV2XzDhGIB902CmKGSpSl4q2C6agU9SNLG/2V1RtFRGPG1Ajh9STj3+q6zJMOC+N/pp2P9DA==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.12.13"
     regexpu-core "^4.7.1"
 
 "@babel/helper-define-polyfill-provider@^0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.2.0.tgz#a640051772045fedaaecc6f0c6c69f02bdd34bf1"
-  integrity sha512-JT8tHuFjKBo8NnaUbblz7mIu1nnvUDiHVjXXkulZULyidvo/7P6TY7+YqpV37IfF+KUFxmlK04elKtGKXaiVgw==
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.2.1.tgz#e6f5f4a6edc3722152c21359190de67fc6cf664d"
+  integrity sha512-x3AUTVZNPunaw1opRTa5OwVA5N0YxGlIad9xQ5QflK1uIS7PnAGGU5O2Dj/G183fR//N8AzTq+Q8+oiu9m0VFg==
   dependencies:
     "@babel/helper-compilation-targets" "^7.13.0"
     "@babel/helper-module-imports" "^7.12.13"
@@ -117,14 +117,14 @@
   dependencies:
     "@babel/types" "^7.13.0"
 
-"@babel/helper-function-name@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz#93ad656db3c3c2232559fd7b2c3dbdcbe0eb377a"
-  integrity sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==
+"@babel/helper-function-name@^7.12.13", "@babel/helper-function-name@^7.14.2":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.14.2.tgz#397688b590760b6ef7725b5f0860c82427ebaac2"
+  integrity sha512-NYZlkZRydxw+YT56IlhIcS8PAhb+FEUiOzuhFTfqDyPmzAhRge6ua0dQYT/Uh0t/EDHq05/i+e5M2d4XvjgarQ==
   dependencies:
     "@babel/helper-get-function-arity" "^7.12.13"
     "@babel/template" "^7.12.13"
-    "@babel/types" "^7.12.13"
+    "@babel/types" "^7.14.2"
 
 "@babel/helper-get-function-arity@^7.12.13":
   version "7.12.13"
@@ -155,10 +155,10 @@
   dependencies:
     "@babel/types" "^7.13.12"
 
-"@babel/helper-module-transforms@^7.13.0", "@babel/helper-module-transforms@^7.14.0":
-  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.14.0.tgz#8fcf78be220156f22633ee204ea81f73f826a8ad"
-  integrity sha512-L40t9bxIuGOfpIGA3HNkJhU9qYrf4y5A5LUSw7rGMSn+pcG8dfJ0g6Zval6YJGd2nEjI7oP00fRdnhLKndx6bw==
+"@babel/helper-module-transforms@^7.13.0", "@babel/helper-module-transforms@^7.14.0", "@babel/helper-module-transforms@^7.14.2":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.14.2.tgz#ac1cc30ee47b945e3e0c4db12fa0c5389509dfe5"
+  integrity sha512-OznJUda/soKXv0XhpvzGWDnml4Qnwp16GN+D/kZIdLsWoHj05kyu8Rm5kXmMef+rVJZ0+4pSGLkeixdqNUATDA==
   dependencies:
     "@babel/helper-module-imports" "^7.13.12"
     "@babel/helper-replace-supers" "^7.13.12"
@@ -166,8 +166,8 @@
     "@babel/helper-split-export-declaration" "^7.12.13"
     "@babel/helper-validator-identifier" "^7.14.0"
     "@babel/template" "^7.12.13"
-    "@babel/traverse" "^7.14.0"
-    "@babel/types" "^7.14.0"
+    "@babel/traverse" "^7.14.2"
+    "@babel/types" "^7.14.2"
 
 "@babel/helper-optimise-call-expression@^7.12.13":
   version "7.12.13"
@@ -190,15 +190,15 @@
     "@babel/helper-wrap-function" "^7.13.0"
     "@babel/types" "^7.13.0"
 
-"@babel/helper-replace-supers@^7.12.13", "@babel/helper-replace-supers@^7.13.0", "@babel/helper-replace-supers@^7.13.12":
-  version "7.13.12"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.13.12.tgz#6442f4c1ad912502481a564a7386de0c77ff3804"
-  integrity sha512-Gz1eiX+4yDO8mT+heB94aLVNCL+rbuT2xy4YfyNqu8F+OI6vMvJK891qGBTqL9Uc8wxEvRW92Id6G7sDen3fFw==
+"@babel/helper-replace-supers@^7.12.13", "@babel/helper-replace-supers@^7.13.12", "@babel/helper-replace-supers@^7.14.3":
+  version "7.14.3"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.14.3.tgz#ca17b318b859d107f0e9b722d58cf12d94436600"
+  integrity sha512-Rlh8qEWZSTfdz+tgNV/N4gz1a0TMNwCUcENhMjHTHKp3LseYH5Jha0NSlyTQWMnjbYcwFt+bqAMqSLHVXkQ6UA==
   dependencies:
     "@babel/helper-member-expression-to-functions" "^7.13.12"
     "@babel/helper-optimise-call-expression" "^7.12.13"
-    "@babel/traverse" "^7.13.0"
-    "@babel/types" "^7.13.12"
+    "@babel/traverse" "^7.14.2"
+    "@babel/types" "^7.14.2"
 
 "@babel/helper-simple-access@^7.13.12":
   version "7.13.12"
@@ -259,10 +259,10 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.12.13", "@babel/parser@^7.14.0":
-  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.0.tgz#2f0ebfed92bcddcc8395b91f1895191ce2760380"
-  integrity sha512-AHbfoxesfBALg33idaTBVUkLnfXtsgvJREf93p4p0Lwsz4ppfE7g1tpEXVm4vrxUcH4DVhAa9Z1m1zqf9WUC7Q==
+"@babel/parser@^7.12.13", "@babel/parser@^7.14.2", "@babel/parser@^7.14.3":
+  version "7.14.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.3.tgz#9b530eecb071fd0c93519df25c5ff9f14759f298"
+  integrity sha512-7MpZDIfI7sUC5zWo2+foJ50CSI5lcqDehZ0lVgIhSi4bFEk94fLAKlF3Q0nzSQQ+ca0lm+O6G9ztKVBeu8PMRQ==
 
 "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.13.12":
   version "7.13.12"
@@ -280,10 +280,10 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.12.13"
 
-"@babel/plugin-proposal-async-generator-functions@^7.13.15":
-  version "7.13.15"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.13.15.tgz#80e549df273a3b3050431b148c892491df1bcc5b"
-  integrity sha512-VapibkWzFeoa6ubXy/NgV5U2U4MVnUlvnx6wo1XhlsaTrLYWE0UFpDQsVrmn22q5CzeloqJ8gEMHSKxuee6ZdA==
+"@babel/plugin-proposal-async-generator-functions@^7.14.2":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.14.2.tgz#3a2085abbf5d5f962d480dbc81347385ed62eb1e"
+  integrity sha512-b1AM4F6fwck4N8ItZ/AtC4FP/cqZqmKRQ4FaTDutwSYyjuhtvsGEMLK4N/ztV/ImP40BjIDyMgBQAeAMsQYVFQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.13.0"
     "@babel/helper-remap-async-to-generator" "^7.13.0"
@@ -298,93 +298,94 @@
     "@babel/helper-plugin-utils" "^7.13.0"
 
 "@babel/plugin-proposal-class-static-block@^7.13.11":
-  version "7.13.11"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.13.11.tgz#6fcbba4a962702c17e5371a0c7b39afde186d703"
-  integrity sha512-fJTdFI4bfnMjvxJyNuaf8i9mVcZ0UhetaGEUHaHV9KEnibLugJkZAtXikR8KcYj+NYmI4DZMS8yQAyg+hvfSqg==
+  version "7.14.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.14.3.tgz#5a527e2cae4a4753119c3a3e7f64ecae8ccf1360"
+  integrity sha512-HEjzp5q+lWSjAgJtSluFDrGGosmwTgKwCXdDQZvhKsRlwv3YdkUEqxNrrjesJd+B9E9zvr1PVPVBvhYZ9msjvQ==
   dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.14.3"
     "@babel/helper-plugin-utils" "^7.13.0"
     "@babel/plugin-syntax-class-static-block" "^7.12.13"
 
 "@babel/plugin-proposal-decorators@^7.13.15":
-  version "7.13.15"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.13.15.tgz#e91ccfef2dc24dd5bd5dcc9fc9e2557c684ecfb8"
-  integrity sha512-ibAMAqUm97yzi+LPgdr5Nqb9CMkeieGHvwPg1ywSGjZrZHQEGqE01HmOio8kxRpA/+VtOHouIVy2FMpBbtltjA==
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.14.2.tgz#e68c3c5e4a6a08834456568256fc3e71b93590cf"
+  integrity sha512-LauAqDd/VjQDtae58QgBcEOE42NNP+jB2OE+XeC3KBI/E+BhhRjtr5viCIrj1hmu1YvrguLipIPRJZmS5yUcFw==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.13.11"
+    "@babel/helper-create-class-features-plugin" "^7.14.2"
     "@babel/helper-plugin-utils" "^7.13.0"
     "@babel/plugin-syntax-decorators" "^7.12.13"
 
-"@babel/plugin-proposal-dynamic-import@^7.13.8":
-  version "7.13.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.13.8.tgz#876a1f6966e1dec332e8c9451afda3bebcdf2e1d"
-  integrity sha512-ONWKj0H6+wIRCkZi9zSbZtE/r73uOhMVHh256ys0UzfM7I3d4n+spZNWjOnJv2gzopumP2Wxi186vI8N0Y2JyQ==
+"@babel/plugin-proposal-dynamic-import@^7.14.2":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.14.2.tgz#01ebabd7c381cff231fa43e302939a9de5be9d9f"
+  integrity sha512-oxVQZIWFh91vuNEMKltqNsKLFWkOIyJc95k2Gv9lWVyDfPUQGSSlbDEgWuJUU1afGE9WwlzpucMZ3yDRHIItkA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.13.0"
     "@babel/plugin-syntax-dynamic-import" "^7.8.3"
 
-"@babel/plugin-proposal-export-namespace-from@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.12.13.tgz#393be47a4acd03fa2af6e3cde9b06e33de1b446d"
-  integrity sha512-INAgtFo4OnLN3Y/j0VwAgw3HDXcDtX+C/erMvWzuV9v71r7urb6iyMXu7eM9IgLr1ElLlOkaHjJ0SbCmdOQ3Iw==
+"@babel/plugin-proposal-export-namespace-from@^7.14.2":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.14.2.tgz#62542f94aa9ce8f6dba79eec698af22112253791"
+  integrity sha512-sRxW3z3Zp3pFfLAgVEvzTFutTXax837oOatUIvSG9o5gRj9mKwm3br1Se5f4QalTQs9x4AzlA/HrCWbQIHASUQ==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
+    "@babel/helper-plugin-utils" "^7.13.0"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
-"@babel/plugin-proposal-json-strings@^7.13.8":
-  version "7.13.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.13.8.tgz#bf1fb362547075afda3634ed31571c5901afef7b"
-  integrity sha512-w4zOPKUFPX1mgvTmL/fcEqy34hrQ1CRcGxdphBc6snDnnqJ47EZDIyop6IwXzAC8G916hsIuXB2ZMBCExC5k7Q==
+"@babel/plugin-proposal-json-strings@^7.14.2":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.14.2.tgz#830b4e2426a782e8b2878fbfe2cba85b70cbf98c"
+  integrity sha512-w2DtsfXBBJddJacXMBhElGEYqCZQqN99Se1qeYn8DVLB33owlrlLftIbMzn5nz1OITfDVknXF433tBrLEAOEjA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.13.0"
     "@babel/plugin-syntax-json-strings" "^7.8.3"
 
-"@babel/plugin-proposal-logical-assignment-operators@^7.13.8":
-  version "7.13.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.13.8.tgz#93fa78d63857c40ce3c8c3315220fd00bfbb4e1a"
-  integrity sha512-aul6znYB4N4HGweImqKn59Su9RS8lbUIqxtXTOcAGtNIDczoEFv+l1EhmX8rUBp3G1jMjKJm8m0jXVp63ZpS4A==
+"@babel/plugin-proposal-logical-assignment-operators@^7.14.2":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.14.2.tgz#222348c080a1678e0e74ea63fe76f275882d1fd7"
+  integrity sha512-1JAZtUrqYyGsS7IDmFeaem+/LJqujfLZ2weLR9ugB0ufUPjzf8cguyVT1g5im7f7RXxuLq1xUxEzvm68uYRtGg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.13.0"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
 
-"@babel/plugin-proposal-nullish-coalescing-operator@^7.13.8":
-  version "7.13.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.13.8.tgz#3730a31dafd3c10d8ccd10648ed80a2ac5472ef3"
-  integrity sha512-iePlDPBn//UhxExyS9KyeYU7RM9WScAG+D3Hhno0PLJebAEpDZMocbDe64eqynhNAnwz/vZoL/q/QB2T1OH39A==
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.13.8", "@babel/plugin-proposal-nullish-coalescing-operator@^7.14.2":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.14.2.tgz#425b11dc62fc26939a2ab42cbba680bdf5734546"
+  integrity sha512-ebR0zU9OvI2N4qiAC38KIAK75KItpIPTpAtd2r4OZmMFeKbKJpUFLYP2EuDut82+BmYi8sz42B+TfTptJ9iG5Q==
   dependencies:
     "@babel/helper-plugin-utils" "^7.13.0"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
 
-"@babel/plugin-proposal-numeric-separator@^7.12.13":
-  version "7.12.13"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.12.13.tgz#bd9da3188e787b5120b4f9d465a8261ce67ed1db"
-  integrity sha512-O1jFia9R8BUCl3ZGB7eitaAPu62TXJRHn7rh+ojNERCFyqRwJMTmhz+tJ+k0CwI6CLjX/ee4qW74FSqlq9I35w==
+"@babel/plugin-proposal-numeric-separator@^7.14.2":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.14.2.tgz#82b4cc06571143faf50626104b335dd71baa4f9e"
+  integrity sha512-DcTQY9syxu9BpU3Uo94fjCB3LN9/hgPS8oUL7KrSW3bA2ePrKZZPJcc5y0hoJAM9dft3pGfErtEUvxXQcfLxUg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.12.13"
+    "@babel/helper-plugin-utils" "^7.13.0"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
-"@babel/plugin-proposal-object-rest-spread@^7.13.8":
-  version "7.13.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.13.8.tgz#5d210a4d727d6ce3b18f9de82cc99a3964eed60a"
-  integrity sha512-DhB2EuB1Ih7S3/IRX5AFVgZ16k3EzfRbq97CxAVI1KSYcW+lexV8VZb7G7L8zuPVSdQMRn0kiBpf/Yzu9ZKH0g==
+"@babel/plugin-proposal-object-rest-spread@^7.13.8", "@babel/plugin-proposal-object-rest-spread@^7.14.2":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.14.2.tgz#e17d418f81cc103fedd4ce037e181c8056225abc"
+  integrity sha512-hBIQFxwZi8GIp934+nj5uV31mqclC1aYDhctDu5khTi9PCCUOczyy0b34W0oE9U/eJXiqQaKyVsmjeagOaSlbw==
   dependencies:
-    "@babel/compat-data" "^7.13.8"
-    "@babel/helper-compilation-targets" "^7.13.8"
+    "@babel/compat-data" "^7.14.0"
+    "@babel/helper-compilation-targets" "^7.13.16"
     "@babel/helper-plugin-utils" "^7.13.0"
     "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
-    "@babel/plugin-transform-parameters" "^7.13.0"
+    "@babel/plugin-transform-parameters" "^7.14.2"
 
-"@babel/plugin-proposal-optional-catch-binding@^7.13.8":
-  version "7.13.8"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.13.8.tgz#3ad6bd5901506ea996fc31bdcf3ccfa2bed71107"
-  integrity sha512-0wS/4DUF1CuTmGo+NiaHfHcVSeSLj5S3e6RivPTg/2k3wOv3jO35tZ6/ZWsQhQMvdgI7CwphjQa/ccarLymHVA==
+"@babel/plugin-proposal-optional-catch-binding@^7.14.2":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.14.2.tgz#150d4e58e525b16a9a1431bd5326c4eed870d717"
+  integrity sha512-XtkJsmJtBaUbOxZsNk0Fvrv8eiqgneug0A6aqLFZ4TSkar2L5dSXWcnUKHgmjJt49pyB/6ZHvkr3dPgl9MOWRQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.13.0"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
 
-"@babel/plugin-proposal-optional-chaining@^7.13.12":
-  version "7.13.12"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.13.12.tgz#ba9feb601d422e0adea6760c2bd6bbb7bfec4866"
-  integrity sha512-fcEdKOkIB7Tf4IxrgEVeFC4zeJSTr78no9wTdBuZZbqF64kzllU0ybo2zrzm7gUQfxGhBgq4E39oRs8Zx/RMYQ==
+"@babel/plugin-proposal-optional-chaining@^7.13.12", "@babel/plugin-proposal-optional-chaining@^7.14.2":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.14.2.tgz#df8171a8b9c43ebf4c1dabe6311b432d83e1b34e"
+  integrity sha512-qQByMRPwMZJainfig10BoaDldx/+VDtNcrA7qdNaEOAj6VXud+gfrkA8j4CRAU5HjnWREXqIpSpH30qZX1xivA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.13.0"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.12.1"
@@ -565,23 +566,23 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.12.13"
 
-"@babel/plugin-transform-block-scoping@^7.13.16":
-  version "7.13.16"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.13.16.tgz#a9c0f10794855c63b1d629914c7dcfeddd185892"
-  integrity sha512-ad3PHUxGnfWF4Efd3qFuznEtZKoBp0spS+DgqzVzRPV7urEBvPLue3y2j80w4Jf2YLzZHj8TOv/Lmvdmh3b2xg==
+"@babel/plugin-transform-block-scoping@^7.14.2":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.14.2.tgz#761cb12ab5a88d640ad4af4aa81f820e6b5fdf5c"
+  integrity sha512-neZZcP19NugZZqNwMTH+KoBjx5WyvESPSIOQb4JHpfd+zPfqcH65RMu5xJju5+6q/Y2VzYrleQTr+b6METyyxg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.13.0"
 
-"@babel/plugin-transform-classes@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.13.0.tgz#0265155075c42918bf4d3a4053134176ad9b533b"
-  integrity sha512-9BtHCPUARyVH1oXGcSJD3YpsqRLROJx5ZNP6tN5vnk17N0SVf9WCtf8Nuh1CFmgByKKAIMstitKduoCmsaDK5g==
+"@babel/plugin-transform-classes@^7.14.2":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.14.2.tgz#3f1196c5709f064c252ad056207d87b7aeb2d03d"
+  integrity sha512-7oafAVcucHquA/VZCsXv/gmuiHeYd64UJyyTYU+MPfNu0KeNlxw06IeENBO8bJjXVbolu+j1MM5aKQtH1OMCNg==
   dependencies:
     "@babel/helper-annotate-as-pure" "^7.12.13"
-    "@babel/helper-function-name" "^7.12.13"
+    "@babel/helper-function-name" "^7.14.2"
     "@babel/helper-optimise-call-expression" "^7.12.13"
     "@babel/helper-plugin-utils" "^7.13.0"
-    "@babel/helper-replace-supers" "^7.13.0"
+    "@babel/helper-replace-supers" "^7.13.12"
     "@babel/helper-split-export-declaration" "^7.12.13"
     globals "^11.1.0"
 
@@ -651,12 +652,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.12.13"
 
-"@babel/plugin-transform-modules-amd@^7.14.0":
-  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.14.0.tgz#589494b5b290ff76cf7f59c798011f6d77026553"
-  integrity sha512-CF4c5LX4LQ03LebQxJ5JZes2OYjzBuk1TdiF7cG7d5dK4lAdw9NZmaxq5K/mouUdNeqwz3TNjnW6v01UqUNgpQ==
+"@babel/plugin-transform-modules-amd@^7.14.2":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.14.2.tgz#6622806fe1a7c07a1388444222ef9535f2ca17b0"
+  integrity sha512-hPC6XBswt8P3G2D1tSV2HzdKvkqOpmbyoy+g73JG0qlF/qx2y3KaMmXb1fLrpmWGLZYA0ojCvaHdzFWjlmV+Pw==
   dependencies:
-    "@babel/helper-module-transforms" "^7.14.0"
+    "@babel/helper-module-transforms" "^7.14.2"
     "@babel/helper-plugin-utils" "^7.13.0"
     babel-plugin-dynamic-import-node "^2.3.3"
 
@@ -711,10 +712,10 @@
     "@babel/helper-plugin-utils" "^7.12.13"
     "@babel/helper-replace-supers" "^7.12.13"
 
-"@babel/plugin-transform-parameters@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.13.0.tgz#8fa7603e3097f9c0b7ca1a4821bc2fb52e9e5007"
-  integrity sha512-Jt8k/h/mIwE2JFEOb3lURoY5C85ETcYPnbuAJ96zRBzh1XHtQZfs62ChZ6EP22QlC8c7Xqr9q+e1SU5qttwwjw==
+"@babel/plugin-transform-parameters@^7.14.2":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.14.2.tgz#e4290f72e0e9e831000d066427c4667098decc31"
+  integrity sha512-NxoVmA3APNCC1JdMXkdYXuQS+EMdqy0vIwyDHeKHiJKRxmp1qGSdb0JLEIoPRhkx6H/8Qi3RJ3uqOCYw8giy9A==
   dependencies:
     "@babel/helper-plugin-utils" "^7.13.0"
 
@@ -776,11 +777,11 @@
     "@babel/helper-plugin-utils" "^7.12.13"
 
 "@babel/plugin-transform-typescript@^7.13.0":
-  version "7.13.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.13.0.tgz#4a498e1f3600342d2a9e61f60131018f55774853"
-  integrity sha512-elQEwluzaU8R8dbVuW2Q2Y8Nznf7hnjM7+DSCd14Lo5fF63C9qNLbwZYbmZrtV9/ySpSUpkRpQXvJb6xyu4hCQ==
+  version "7.14.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.14.3.tgz#44f67f725a60cccee33d9d6fee5e4f338258f34f"
+  integrity sha512-G5Bb5pY6tJRTC4ag1visSgiDoGgJ1u1fMUgmc2ijLkcIdzP83Q1qyZX4ggFQ/SkR+PNOatkaYC+nKcTlpsX4ag==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.13.0"
+    "@babel/helper-create-class-features-plugin" "^7.14.3"
     "@babel/helper-plugin-utils" "^7.13.0"
     "@babel/plugin-syntax-typescript" "^7.12.13"
 
@@ -799,28 +800,28 @@
     "@babel/helper-create-regexp-features-plugin" "^7.12.13"
     "@babel/helper-plugin-utils" "^7.12.13"
 
-"@babel/preset-env@^7.11.0", "@babel/preset-env@^7.14.0":
-  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.14.0.tgz#236f88cd5da625e625dd40500d4824523f50e6c5"
-  integrity sha512-GWRCdBv2whxqqaSi7bo/BEXf070G/fWFMEdCnmoRg2CZJy4GK06ovFuEjJrZhDRXYgBsYtxVbG8GUHvw+UWBkQ==
+"@babel/preset-env@^7.11.0", "@babel/preset-env@^7.14.2":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.14.2.tgz#e80612965da73579c84ad2f963c2359c71524ed5"
+  integrity sha512-7dD7lVT8GMrE73v4lvDEb85cgcQhdES91BSD7jS/xjC6QY8PnRhux35ac+GCpbiRhp8crexBvZZqnaL6VrY8TQ==
   dependencies:
     "@babel/compat-data" "^7.14.0"
     "@babel/helper-compilation-targets" "^7.13.16"
     "@babel/helper-plugin-utils" "^7.13.0"
     "@babel/helper-validator-option" "^7.12.17"
     "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.13.12"
-    "@babel/plugin-proposal-async-generator-functions" "^7.13.15"
+    "@babel/plugin-proposal-async-generator-functions" "^7.14.2"
     "@babel/plugin-proposal-class-properties" "^7.13.0"
     "@babel/plugin-proposal-class-static-block" "^7.13.11"
-    "@babel/plugin-proposal-dynamic-import" "^7.13.8"
-    "@babel/plugin-proposal-export-namespace-from" "^7.12.13"
-    "@babel/plugin-proposal-json-strings" "^7.13.8"
-    "@babel/plugin-proposal-logical-assignment-operators" "^7.13.8"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.13.8"
-    "@babel/plugin-proposal-numeric-separator" "^7.12.13"
-    "@babel/plugin-proposal-object-rest-spread" "^7.13.8"
-    "@babel/plugin-proposal-optional-catch-binding" "^7.13.8"
-    "@babel/plugin-proposal-optional-chaining" "^7.13.12"
+    "@babel/plugin-proposal-dynamic-import" "^7.14.2"
+    "@babel/plugin-proposal-export-namespace-from" "^7.14.2"
+    "@babel/plugin-proposal-json-strings" "^7.14.2"
+    "@babel/plugin-proposal-logical-assignment-operators" "^7.14.2"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.14.2"
+    "@babel/plugin-proposal-numeric-separator" "^7.14.2"
+    "@babel/plugin-proposal-object-rest-spread" "^7.14.2"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.14.2"
+    "@babel/plugin-proposal-optional-chaining" "^7.14.2"
     "@babel/plugin-proposal-private-methods" "^7.13.0"
     "@babel/plugin-proposal-private-property-in-object" "^7.14.0"
     "@babel/plugin-proposal-unicode-property-regex" "^7.12.13"
@@ -841,8 +842,8 @@
     "@babel/plugin-transform-arrow-functions" "^7.13.0"
     "@babel/plugin-transform-async-to-generator" "^7.13.0"
     "@babel/plugin-transform-block-scoped-functions" "^7.12.13"
-    "@babel/plugin-transform-block-scoping" "^7.13.16"
-    "@babel/plugin-transform-classes" "^7.13.0"
+    "@babel/plugin-transform-block-scoping" "^7.14.2"
+    "@babel/plugin-transform-classes" "^7.14.2"
     "@babel/plugin-transform-computed-properties" "^7.13.0"
     "@babel/plugin-transform-destructuring" "^7.13.17"
     "@babel/plugin-transform-dotall-regex" "^7.12.13"
@@ -852,14 +853,14 @@
     "@babel/plugin-transform-function-name" "^7.12.13"
     "@babel/plugin-transform-literals" "^7.12.13"
     "@babel/plugin-transform-member-expression-literals" "^7.12.13"
-    "@babel/plugin-transform-modules-amd" "^7.14.0"
+    "@babel/plugin-transform-modules-amd" "^7.14.2"
     "@babel/plugin-transform-modules-commonjs" "^7.14.0"
     "@babel/plugin-transform-modules-systemjs" "^7.13.8"
     "@babel/plugin-transform-modules-umd" "^7.14.0"
     "@babel/plugin-transform-named-capturing-groups-regex" "^7.12.13"
     "@babel/plugin-transform-new-target" "^7.12.13"
     "@babel/plugin-transform-object-super" "^7.12.13"
-    "@babel/plugin-transform-parameters" "^7.13.0"
+    "@babel/plugin-transform-parameters" "^7.14.2"
     "@babel/plugin-transform-property-literals" "^7.12.13"
     "@babel/plugin-transform-regenerator" "^7.13.15"
     "@babel/plugin-transform-reserved-words" "^7.12.13"
@@ -871,7 +872,7 @@
     "@babel/plugin-transform-unicode-escapes" "^7.12.13"
     "@babel/plugin-transform-unicode-regex" "^7.12.13"
     "@babel/preset-modules" "^0.1.4"
-    "@babel/types" "^7.14.0"
+    "@babel/types" "^7.14.2"
     babel-plugin-polyfill-corejs2 "^0.2.0"
     babel-plugin-polyfill-corejs3 "^0.2.0"
     babel-plugin-polyfill-regenerator "^0.2.0"
@@ -898,13 +899,6 @@
     "@babel/helper-validator-option" "^7.12.17"
     "@babel/plugin-transform-typescript" "^7.13.0"
 
-"@babel/runtime@7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0.tgz#adeb78fedfc855aa05bc041640f3f6f98e85424c"
-  integrity sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==
-  dependencies:
-    regenerator-runtime "^0.12.0"
-
 "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
   version "7.14.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.0.tgz#46794bc20b612c5f75e62dd071e24dfd95f1cbe6"
@@ -921,32 +915,32 @@
     "@babel/parser" "^7.12.13"
     "@babel/types" "^7.12.13"
 
-"@babel/traverse@^7.13.0", "@babel/traverse@^7.13.15", "@babel/traverse@^7.14.0":
-  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.14.0.tgz#cea0dc8ae7e2b1dec65f512f39f3483e8cc95aef"
-  integrity sha512-dZ/a371EE5XNhTHomvtuLTUyx6UEoJmYX+DT5zBCQN3McHemsuIaKKYqsc/fs26BEkHs/lBZy0J571LP5z9kQA==
+"@babel/traverse@^7.13.0", "@babel/traverse@^7.13.15", "@babel/traverse@^7.14.0", "@babel/traverse@^7.14.2":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.14.2.tgz#9201a8d912723a831c2679c7ebbf2fe1416d765b"
+  integrity sha512-TsdRgvBFHMyHOOzcP9S6QU0QQtjxlRpEYOy3mcCO5RgmC305ki42aSAmfZEMSSYBla2oZ9BMqYlncBaKmD/7iA==
   dependencies:
     "@babel/code-frame" "^7.12.13"
-    "@babel/generator" "^7.14.0"
-    "@babel/helper-function-name" "^7.12.13"
+    "@babel/generator" "^7.14.2"
+    "@babel/helper-function-name" "^7.14.2"
     "@babel/helper-split-export-declaration" "^7.12.13"
-    "@babel/parser" "^7.14.0"
-    "@babel/types" "^7.14.0"
+    "@babel/parser" "^7.14.2"
+    "@babel/types" "^7.14.2"
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.12.1", "@babel/types@^7.12.13", "@babel/types@^7.13.0", "@babel/types@^7.13.12", "@babel/types@^7.13.16", "@babel/types@^7.14.0", "@babel/types@^7.4.4":
-  version "7.14.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.0.tgz#3fc3fc74e0cdad878182e5f66cc6bcab1915a802"
-  integrity sha512-O2LVLdcnWplaGxiPBz12d0HcdN8QdxdsWYhz5LSeuukV/5mn2xUUc3gBeU4QBYPJ18g/UToe8F532XJ608prmg==
+"@babel/types@^7.12.1", "@babel/types@^7.12.13", "@babel/types@^7.13.0", "@babel/types@^7.13.12", "@babel/types@^7.13.16", "@babel/types@^7.14.0", "@babel/types@^7.14.2", "@babel/types@^7.4.4":
+  version "7.14.2"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.2.tgz#4208ae003107ef8a057ea8333e56eb64d2f6a2c3"
+  integrity sha512-SdjAG/3DikRHpUOjxZgnkbR11xUlyDMUFJdvnIgZEE16mqmY0BINMmc4//JMJglEmn6i7sq6p+mGrFWyZ98EEw==
   dependencies:
     "@babel/helper-validator-identifier" "^7.14.0"
     to-fast-properties "^2.0.0"
 
-"@braintree/sanitize-url@^5.0.0":
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-5.0.0.tgz#3ba791f37b90e7f6170d252b63aacfcae943c039"
-  integrity sha512-WmKrB/575EJCzbeSJR3YQ5sET5FaizeljLRw1382qVUeGqzuWBgIS+AF5a0FO51uQTrDpoRgvuHC2IWVsgwkkA==
+"@braintree/sanitize-url@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-5.0.1.tgz#3c76855aea4a71904a35c92f433462c775583452"
+  integrity sha512-KzIC8q/UsT8g6bwRAQ0NbOCNxRoGbPKtqGBUtDaN8WN80xqsbHFs8z+Eq0fR0W1wcrcTB5oKNACsrbkK4X+FWA==
 
 "@codemirror/commands@^0.18.0":
   version "0.18.1"
@@ -1108,40 +1102,60 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@formatjs/ecma402-abstract@^1.2.5":
+"@formatjs/ecma402-abstract@1.9.1":
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.9.1.tgz#5d15c5a687a215ed9de47a577ac7c720a3fe5e00"
+  integrity sha512-XAJ1ygWKgGEaFuNg3Cf+maJNYEJjl5LjSVZ1iAnSaOKDg/VXa+dDPWhWQP6jimvWv6h9NyDj6Zgh+2qFBeVABw==
+  dependencies:
+    tslib "^2.1.0"
+
+"@formatjs/fast-memoize@1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@formatjs/fast-memoize/-/fast-memoize-1.1.1.tgz#3006b58aca1e39a98aca213356b42da5d173f26b"
+  integrity sha512-mIqBr5uigIlx13eZTOPSEh2buDiy3BCdMYUtewICREQjbb4xarDiVWoXSnrERM7NanZ+0TAHNXSqDe6HpEFQUg==
+
+"@formatjs/icu-messageformat-parser@2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.0.4.tgz#b54d2be1bf51892fbadd9f13e857fe4ffaa528bf"
+  integrity sha512-R6tEOyP+GRFuqLI9NQ4Aw6y5K2m7ASLn6Zu+fCu0HRh9IfHnNrvriHUSntmaXpxwSB3gI8eSawmyemKqdSxgtg==
+  dependencies:
+    "@formatjs/ecma402-abstract" "1.9.1"
+    "@formatjs/icu-skeleton-parser" "1.2.5"
+    tslib "^2.1.0"
+
+"@formatjs/icu-skeleton-parser@1.2.5":
   version "1.2.5"
-  resolved "https://registry.yarnpkg.com/@formatjs/ecma402-abstract/-/ecma402-abstract-1.2.5.tgz#5a61ac1990ff2df8d1348ab12e186c1ca2a2bd71"
-  integrity sha512-k0fqS3LBNOHueAoMdgig8Ni6TchsH+zbzWBzX2gTFm50X9mxHwnuXdCk0XLlCIbvgVVlzcO254Men/mHAheMbg==
+  resolved "https://registry.yarnpkg.com/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.2.5.tgz#db611b3c1eed743673c29c01a8248a5ff56105a2"
+  integrity sha512-Y99K8gEOei8dRRjxdV8PX+BFopGtFnc+MyWByhCmb/UbOpn/XbFxz/iM+DpWRnF1GEs5R3tq9RNpFpD6O/hjGg==
   dependencies:
-    tslib "^2.0.1"
+    "@formatjs/ecma402-abstract" "1.9.1"
+    tslib "^2.1.0"
 
-"@formatjs/intl-getcanonicallocales@^1.4.6":
-  version "1.4.6"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-getcanonicallocales/-/intl-getcanonicallocales-1.4.6.tgz#348a0b8dd87f2b0513a4942a6273c937dd91ead0"
-  integrity sha512-V54a+Ks02vke2CSmuGJ4GCvrdWfN105GSH7oZRoW5QSiwuac+fmxb5Qpu4002HetuRu0rrRTm+NMUTfZ1VB2xw==
+"@formatjs/intl-getcanonicallocales@1.7.0", "@formatjs/intl-getcanonicallocales@^1.5.10":
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-getcanonicallocales/-/intl-getcanonicallocales-1.7.0.tgz#f864cc8228976599719d0a8212a1e6d7c846b38d"
+  integrity sha512-3pQjp+WCHrFfkUeSuw//LIx/orcykopZX4U/2kY1jTYhATVJbKdU8Rl5V2/d+fw1naKjKYoIjIXGn85Ti396+A==
   dependencies:
-    cldr-core "36.0.0"
-    tslib "^2.0.1"
+    cldr-core "38"
+    tslib "^2.1.0"
 
-"@formatjs/intl-pluralrules@^3.4.10":
-  version "3.4.10"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-pluralrules/-/intl-pluralrules-3.4.10.tgz#7ed3b03190971f21d482cb0e46791d90783a74d3"
-  integrity sha512-KcZZv38bu0pho9+9pMUOsCAi9/Kayh4+V5QZ/I9ps5OFSQlQaFMP5sX/zHBp41SsT6HxTfrPw5CHWpGrS75NQQ==
+"@formatjs/intl-locale@^2.4.28":
+  version "2.4.28"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-locale/-/intl-locale-2.4.28.tgz#064bb50764393669803aa777b74a18b81d6566b5"
+  integrity sha512-z20qVhgtHFTCGLDCl/pWs3cdnxGT4whsbjxwfrhyF2Qf0TNYWrJ/y88f3vINJ19iGVY3GJ6bxaRI5d+uyQ/7ig==
   dependencies:
-    "@formatjs/ecma402-abstract" "^1.2.5"
-    tslib "^2.0.1"
+    "@formatjs/ecma402-abstract" "1.9.1"
+    "@formatjs/intl-getcanonicallocales" "1.7.0"
+    cldr-core "38"
+    tslib "^2.1.0"
 
-"@formatjs/intl-unified-numberformat@^3.3.5":
-  version "3.3.5"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-unified-numberformat/-/intl-unified-numberformat-3.3.5.tgz#b150c25eb56c1b09a03bf24fb5d1e394b945a27c"
-  integrity sha512-LdRs9OoqG8Ah6wKKAcaq9wfeZ0w+Icway63thbbOam5DLY9G3u44NReFYWAmVSU+MXOQ+VPATMB9RUXGZxBdig==
+"@formatjs/intl-pluralrules@^4.0.22":
+  version "4.0.22"
+  resolved "https://registry.yarnpkg.com/@formatjs/intl-pluralrules/-/intl-pluralrules-4.0.22.tgz#2a56baef93ef4deac7957ee1d945a6f5332c1261"
+  integrity sha512-4pSxb31AsjZXUjQHid9eJuUJrXqLOH3tgfiryvBfgNoS76cqk0cFUAuTGdC07YQZlVuJ4c3K4rqBlRpFJwn4Mg==
   dependencies:
-    "@formatjs/intl-utils" "^2.2.4"
-
-"@formatjs/intl-utils@^2.2.4":
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/@formatjs/intl-utils/-/intl-utils-2.2.4.tgz#fe62a96799d1f7dbe621fd38a4bd2e5a6a16cb0e"
-  integrity sha512-83fsJywew0o9wQsW3VuEp33HRiFd0qbQDyFFnwZCwk59eLZ33CtKyJ5ofKMrU2KK6hk1zaIdzisrZeoNfmI3Tw==
+    "@formatjs/ecma402-abstract" "1.9.1"
+    tslib "^2.1.0"
 
 "@fullcalendar/common@5.1.0", "@fullcalendar/common@~5.1.0":
   version "5.1.0"
@@ -1334,551 +1348,592 @@
   dependencies:
     vary "^1.1.2"
 
-"@material/animation@9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/animation/-/animation-9.0.0-canary.1c156d69d.0.tgz#53acc1253d1286f6d4cfaf3a778229cbd19ab000"
-  integrity sha512-m3eUpFRwxcP1tEWJlIH5q77YGSYEe5ITRw5OtyDvxU7ZzF0xKJbBeauQEdCmyig9UvK+J7jUUnCgkT/t/ldLtw==
+"@lit-labs/virtualizer@^0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@lit-labs/virtualizer/-/virtualizer-0.6.0.tgz#7b556652d4484f2f28d1d7d9ce6aa0fa882e73bc"
+  integrity sha512-nuwePG9b0TRXmkeL2WQpMxukw9CwlHi33n+s9xW7wfOIl7xcRE6Q+7ygeA/nScFypm1RhumI+SbZVLVTADY2Zg==
   dependencies:
-    tslib "^1.9.3"
+    event-target-shim "^5.0.1"
+    lit "^2.0.0-rc.1"
+    tslib "^1.10.0"
 
-"@material/base@9.0.0-canary.1c156d69d.0", "@material/base@=9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/base/-/base-9.0.0-canary.1c156d69d.0.tgz#84f365077dfae12a31a32bfc7f9ba673fe56b2db"
-  integrity sha512-r98qY6EsPx6BlzT0Pj+H+BTI7r76GEX/zZPgajxZjbPAJSeeK+uCh69Dmhf63meLKaFkKgvLwH5udKJLMqqjpQ==
+"@lit/reactive-element@^1.0.0-rc.2":
+  version "1.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.0.0-rc.2.tgz#f24dba16ea571a08dca70f1783bd2ca5ec8de3ee"
+  integrity sha512-cujeIl5Ei8FC7UHf4/4Q3bRJOtdTe1vpJV/JEBYCggedmQ+2P8A2oz7eE+Vxi6OJ4nc0X+KZxXnBoH4QrEbmEQ==
+
+"@material/animation@12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/animation/-/animation-12.0.0-canary.1a8d06483.0.tgz#a3d5a6ebf8965c0e3a52da1c3bf86ff2677f9c31"
+  integrity sha512-aUiyCKXnXjq6WWOnc5Jh7jWe5hwnG8uKDScq0BKvNOANmGA5ZJnD4F52fmY1bdZmzbGpmPPu9p6WulaLtYfjIQ==
   dependencies:
-    tslib "^1.9.3"
+    tslib "^2.1.0"
 
-"@material/button@9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/button/-/button-9.0.0-canary.1c156d69d.0.tgz#b35540ed085006d65562ed56fe2b5540d6712712"
-  integrity sha512-ZjBDrGy2kKPmlIYaL99/C1D0t+MCIkP3Pcj9Y1RxxYdayvP+o8evkBUz5IRtg5NpW4o1X89x8RfF/JmLJZrdYw==
+"@material/base@12.0.0-canary.1a8d06483.0", "@material/base@=12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/base/-/base-12.0.0-canary.1a8d06483.0.tgz#7644e4638301b6dd8f70160a5dfdf3339b2d0e4c"
+  integrity sha512-mqAV6ZlVyLstS6XcaOUBtY36SnHk8x+HPqJsc/EWkowfQfmjbVnjgjQ3Ld5jAS5BdC1kETmqSKxm0hHxlZd5UQ==
   dependencies:
-    "@material/density" "9.0.0-canary.1c156d69d.0"
-    "@material/elevation" "9.0.0-canary.1c156d69d.0"
-    "@material/feature-targeting" "9.0.0-canary.1c156d69d.0"
-    "@material/ripple" "9.0.0-canary.1c156d69d.0"
-    "@material/rtl" "9.0.0-canary.1c156d69d.0"
-    "@material/shape" "9.0.0-canary.1c156d69d.0"
-    "@material/theme" "9.0.0-canary.1c156d69d.0"
-    "@material/touch-target" "9.0.0-canary.1c156d69d.0"
-    "@material/typography" "9.0.0-canary.1c156d69d.0"
+    tslib "^2.1.0"
 
-"@material/checkbox@9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/checkbox/-/checkbox-9.0.0-canary.1c156d69d.0.tgz#7534284e59af51217e3653ce8d7105dbd001d55f"
-  integrity sha512-7Fyjh3avQg+EZx6wVIB3K4b/9rs7rYTZIXVYM4iAVJo/LDtdBrdmLy6sRmk90gnO7+V5eTvSBJy7R+dU3l/xNQ==
+"@material/button@12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/button/-/button-12.0.0-canary.1a8d06483.0.tgz#8dd20ae410c8f3064511c5ffd2efbd433539ec73"
+  integrity sha512-AxPbx9PCYX1Lbez1gsS1P6Ucbmc3UgEHgbNB8kxrksK1Y+vRD1nFXqxGQ67bNCY1c9gTKuMVM84b8OTccRZg2w==
   dependencies:
-    "@material/animation" "9.0.0-canary.1c156d69d.0"
-    "@material/base" "9.0.0-canary.1c156d69d.0"
-    "@material/density" "9.0.0-canary.1c156d69d.0"
-    "@material/dom" "9.0.0-canary.1c156d69d.0"
-    "@material/feature-targeting" "9.0.0-canary.1c156d69d.0"
-    "@material/ripple" "9.0.0-canary.1c156d69d.0"
-    "@material/theme" "9.0.0-canary.1c156d69d.0"
-    "@material/touch-target" "9.0.0-canary.1c156d69d.0"
-    tslib "^1.9.3"
+    "@material/density" "12.0.0-canary.1a8d06483.0"
+    "@material/dom" "12.0.0-canary.1a8d06483.0"
+    "@material/elevation" "12.0.0-canary.1a8d06483.0"
+    "@material/feature-targeting" "12.0.0-canary.1a8d06483.0"
+    "@material/ripple" "12.0.0-canary.1a8d06483.0"
+    "@material/rtl" "12.0.0-canary.1a8d06483.0"
+    "@material/shape" "12.0.0-canary.1a8d06483.0"
+    "@material/theme" "12.0.0-canary.1a8d06483.0"
+    "@material/touch-target" "12.0.0-canary.1a8d06483.0"
+    "@material/typography" "12.0.0-canary.1a8d06483.0"
+    tslib "^2.1.0"
 
-"@material/chips@=9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/chips/-/chips-9.0.0-canary.1c156d69d.0.tgz#8f6819c42743a8f4dd9be5155556f0c9eb2d30f7"
-  integrity sha512-DuWDauRhrlj/nMI/NNUqVD+SUnVsuuZNSvf9t9AX3H08Uo3ZUHhNfdc7Ust0B+jHCaHsjLjlREyYagp8JxJuXQ==
+"@material/checkbox@12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/checkbox/-/checkbox-12.0.0-canary.1a8d06483.0.tgz#3b5fbaa01743387fcbd135f2bd322324c0613bd7"
+  integrity sha512-j6N1dsVIKqNuXliUuDM/06hdqVOF90Kc6W93nERM0gp5FP0Wx66IuOS6RZV4+RiITTy1AtmTR5HmKIYSq4uPhg==
   dependencies:
-    "@material/animation" "9.0.0-canary.1c156d69d.0"
-    "@material/base" "9.0.0-canary.1c156d69d.0"
-    "@material/checkbox" "9.0.0-canary.1c156d69d.0"
-    "@material/density" "9.0.0-canary.1c156d69d.0"
-    "@material/dom" "9.0.0-canary.1c156d69d.0"
-    "@material/elevation" "9.0.0-canary.1c156d69d.0"
-    "@material/feature-targeting" "9.0.0-canary.1c156d69d.0"
-    "@material/ripple" "9.0.0-canary.1c156d69d.0"
-    "@material/rtl" "9.0.0-canary.1c156d69d.0"
-    "@material/shape" "9.0.0-canary.1c156d69d.0"
-    "@material/theme" "9.0.0-canary.1c156d69d.0"
-    "@material/touch-target" "9.0.0-canary.1c156d69d.0"
-    "@material/typography" "9.0.0-canary.1c156d69d.0"
-    tslib "^1.9.3"
+    "@material/animation" "12.0.0-canary.1a8d06483.0"
+    "@material/base" "12.0.0-canary.1a8d06483.0"
+    "@material/density" "12.0.0-canary.1a8d06483.0"
+    "@material/dom" "12.0.0-canary.1a8d06483.0"
+    "@material/feature-targeting" "12.0.0-canary.1a8d06483.0"
+    "@material/ripple" "12.0.0-canary.1a8d06483.0"
+    "@material/theme" "12.0.0-canary.1a8d06483.0"
+    "@material/touch-target" "12.0.0-canary.1a8d06483.0"
+    tslib "^2.1.0"
 
-"@material/circular-progress@=9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/circular-progress/-/circular-progress-9.0.0-canary.1c156d69d.0.tgz#df6a6b13cbe65e6e90e81ce0149d472a3de2463c"
-  integrity sha512-DCYOF9ssHb+psiKA98GZFztYFr48dvEhvS8w0Lu/hx+7G4qlG6KJzFZv1mBuiF0pdJCT1tjEDjOcj6t3nU9SRA==
+"@material/chips@=12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/chips/-/chips-12.0.0-canary.1a8d06483.0.tgz#0827604c15a6ef0d49ab7765b9e0c0a1679c160b"
+  integrity sha512-STRAaLD5OFKOYehb97wWurNMuj9nDyt/kdFjOqeBZk2b7fXYaG7bV1hMydR+LO0W6znOhubX2Zt6inNZvI56XQ==
   dependencies:
-    "@material/animation" "9.0.0-canary.1c156d69d.0"
-    "@material/base" "9.0.0-canary.1c156d69d.0"
-    "@material/feature-targeting" "9.0.0-canary.1c156d69d.0"
-    "@material/progress-indicator" "9.0.0-canary.1c156d69d.0"
-    "@material/theme" "9.0.0-canary.1c156d69d.0"
-    tslib "^1.9.3"
+    "@material/animation" "12.0.0-canary.1a8d06483.0"
+    "@material/base" "12.0.0-canary.1a8d06483.0"
+    "@material/checkbox" "12.0.0-canary.1a8d06483.0"
+    "@material/density" "12.0.0-canary.1a8d06483.0"
+    "@material/dom" "12.0.0-canary.1a8d06483.0"
+    "@material/elevation" "12.0.0-canary.1a8d06483.0"
+    "@material/feature-targeting" "12.0.0-canary.1a8d06483.0"
+    "@material/ripple" "12.0.0-canary.1a8d06483.0"
+    "@material/rtl" "12.0.0-canary.1a8d06483.0"
+    "@material/shape" "12.0.0-canary.1a8d06483.0"
+    "@material/theme" "12.0.0-canary.1a8d06483.0"
+    "@material/touch-target" "12.0.0-canary.1a8d06483.0"
+    "@material/typography" "12.0.0-canary.1a8d06483.0"
+    tslib "^2.1.0"
 
-"@material/density@9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/density/-/density-9.0.0-canary.1c156d69d.0.tgz#ca2a2a5f4ea31520d717a41a6343c104acee3005"
-  integrity sha512-Y87bUpTsXNDOi1q5NVRBxIyTUAFda1PP1Z9HOvgpV19n7/F6YLrttLGcOFSRFfx9btUKf4EddctBzwzBrF71TQ==
-
-"@material/dialog@=9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/dialog/-/dialog-9.0.0-canary.1c156d69d.0.tgz#15a0c38d322679f3fcf372eabd21a9c70061f788"
-  integrity sha512-JadtYwhCPrvZce/0j+kUuSq5+QaXAbZ1yx2FPT01K6/mzEgM0eDuU7ta7IlGGoJXFzmQI8jy7WsTSuW+IBNC8A==
+"@material/circular-progress@=12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/circular-progress/-/circular-progress-12.0.0-canary.1a8d06483.0.tgz#ff87ecf784cc6ac316c6fb560a34e7cafef32d3a"
+  integrity sha512-+mfVC9zK5BRbEOIn0qzXF7yZiTBLf7jiXJb6ufyyBJR9RDu5RAzvbj2Dj2GDfq46Y+eM7cO3aHjJ77i4eJ6haQ==
   dependencies:
-    "@material/animation" "9.0.0-canary.1c156d69d.0"
-    "@material/base" "9.0.0-canary.1c156d69d.0"
-    "@material/button" "9.0.0-canary.1c156d69d.0"
-    "@material/dom" "9.0.0-canary.1c156d69d.0"
-    "@material/elevation" "9.0.0-canary.1c156d69d.0"
-    "@material/feature-targeting" "9.0.0-canary.1c156d69d.0"
-    "@material/ripple" "9.0.0-canary.1c156d69d.0"
-    "@material/rtl" "9.0.0-canary.1c156d69d.0"
-    "@material/shape" "9.0.0-canary.1c156d69d.0"
-    "@material/theme" "9.0.0-canary.1c156d69d.0"
-    "@material/touch-target" "9.0.0-canary.1c156d69d.0"
-    "@material/typography" "9.0.0-canary.1c156d69d.0"
-    tslib "^1.9.3"
+    "@material/animation" "12.0.0-canary.1a8d06483.0"
+    "@material/base" "12.0.0-canary.1a8d06483.0"
+    "@material/feature-targeting" "12.0.0-canary.1a8d06483.0"
+    "@material/progress-indicator" "12.0.0-canary.1a8d06483.0"
+    "@material/theme" "12.0.0-canary.1a8d06483.0"
+    tslib "^2.1.0"
 
-"@material/dom@9.0.0-canary.1c156d69d.0", "@material/dom@=9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/dom/-/dom-9.0.0-canary.1c156d69d.0.tgz#ffba86848f77cdce5ac2cfe494a97cb82af5c714"
-  integrity sha512-AwiQDzquolB7rqy8k4+QMVQ8Njb6k0CT+otJ/UNJbj0qNVXZB4njVaWRWrWCt70hYp1rG0cRNkZ01ZJDqABUFw==
+"@material/density@12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/density/-/density-12.0.0-canary.1a8d06483.0.tgz#0f6ccaa15b8efcab1c5eef51ab9cc2c304ff2f9c"
+  integrity sha512-Tq5MX//GECdL2EnqRFJkIVPJjHD7u6XUCPhH5n50GKo3fZAwU+dksZoncqZPdG/4vxZ4aqTTQT9VXmk0QDEo5Q==
   dependencies:
-    "@material/feature-targeting" "9.0.0-canary.1c156d69d.0"
-    tslib "^1.9.3"
+    tslib "^2.1.0"
 
-"@material/elevation@9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/elevation/-/elevation-9.0.0-canary.1c156d69d.0.tgz#0027434eef691dde7e16e672e1349ee1e9ed7a2b"
-  integrity sha512-ojX0+nRNkfJssFA/EXhwglDwW48xll1OPCVy8jJrRfvIasRHiIJBeRdnlU5BL4qxDJHaEoOfEMmVQP/Aj504Qw==
+"@material/dialog@=12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/dialog/-/dialog-12.0.0-canary.1a8d06483.0.tgz#ef0fdcaf8909b015971c92181c294caa443cffc6"
+  integrity sha512-TXUjnOhHeVBsNsavSQDVG9bfNj/wzqfn2WpIljDgyKRQd1JPh75AgnZleiOFeVvvOKsNcV3bB+ESwaqgV9Nd1w==
   dependencies:
-    "@material/animation" "9.0.0-canary.1c156d69d.0"
-    "@material/base" "9.0.0-canary.1c156d69d.0"
-    "@material/feature-targeting" "9.0.0-canary.1c156d69d.0"
-    "@material/theme" "9.0.0-canary.1c156d69d.0"
+    "@material/animation" "12.0.0-canary.1a8d06483.0"
+    "@material/base" "12.0.0-canary.1a8d06483.0"
+    "@material/button" "12.0.0-canary.1a8d06483.0"
+    "@material/dom" "12.0.0-canary.1a8d06483.0"
+    "@material/elevation" "12.0.0-canary.1a8d06483.0"
+    "@material/feature-targeting" "12.0.0-canary.1a8d06483.0"
+    "@material/icon-button" "12.0.0-canary.1a8d06483.0"
+    "@material/ripple" "12.0.0-canary.1a8d06483.0"
+    "@material/rtl" "12.0.0-canary.1a8d06483.0"
+    "@material/shape" "12.0.0-canary.1a8d06483.0"
+    "@material/theme" "12.0.0-canary.1a8d06483.0"
+    "@material/touch-target" "12.0.0-canary.1a8d06483.0"
+    "@material/typography" "12.0.0-canary.1a8d06483.0"
+    tslib "^2.1.0"
 
-"@material/feature-targeting@9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/feature-targeting/-/feature-targeting-9.0.0-canary.1c156d69d.0.tgz#feaf37af156811a088958e653e6c08e66f567d2a"
-  integrity sha512-HWd0+GMnkVB3anmUc9+MeWCNoogAbb4U7ihzwq7lzLCQyC+i/kunppkUVV7DhL3ZVl1O6zIw1eAT+dgQpN8x4Q==
-
-"@material/form-field@=9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/form-field/-/form-field-9.0.0-canary.1c156d69d.0.tgz#2f44c9704c8a4aef54376819573f835983686e89"
-  integrity sha512-v1KWGRj4Qf9SESLswtlrdm/B6TmNkQsh5CZSM2xL2ZXe/k/KNgbLgM4ofHJApwW3QWYVBfA8nT/MlIvJJivd9w==
+"@material/dom@12.0.0-canary.1a8d06483.0", "@material/dom@=12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/dom/-/dom-12.0.0-canary.1a8d06483.0.tgz#6ce068b0bcc20d605256d6316b9ed36e6130f729"
+  integrity sha512-x1+6b2vwCcJbjLddsGefhZNzdvDoyFmrbjSxljnzk+qdeRrM6gXioLfBjxJKT8/olge+XnZukNH8JfiRCVSCGA==
   dependencies:
-    "@material/base" "9.0.0-canary.1c156d69d.0"
-    "@material/feature-targeting" "9.0.0-canary.1c156d69d.0"
-    "@material/ripple" "9.0.0-canary.1c156d69d.0"
-    "@material/rtl" "9.0.0-canary.1c156d69d.0"
-    "@material/theme" "9.0.0-canary.1c156d69d.0"
-    "@material/typography" "9.0.0-canary.1c156d69d.0"
-    tslib "^1.9.3"
+    "@material/feature-targeting" "12.0.0-canary.1a8d06483.0"
+    tslib "^2.1.0"
 
-"@material/list@9.0.0-canary.1c156d69d.0", "@material/list@=9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/list/-/list-9.0.0-canary.1c156d69d.0.tgz#d4a7b1354e4d00a843de19f3dbde188ca2e1e429"
-  integrity sha512-cn9zTm38RgriNudHnQAlEyLJOIfE11rTYl5mnBMkLaGz1gRLH+QVN8Q8FBpMwagS0cU0CkMTwrADJaUlmJeuVQ==
+"@material/elevation@12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/elevation/-/elevation-12.0.0-canary.1a8d06483.0.tgz#f6e24d5573b16160f3f694a1d80ca945e5ee707a"
+  integrity sha512-0MaBjiEwZsFnVfDVUqdVl3eVRGlJcBJK/Qm495ITwMg4Z8pCM6S+p8km8PidGvSTy0RAUpR/51x1CI2sgl7Fqw==
   dependencies:
-    "@material/base" "9.0.0-canary.1c156d69d.0"
-    "@material/density" "9.0.0-canary.1c156d69d.0"
-    "@material/dom" "9.0.0-canary.1c156d69d.0"
-    "@material/feature-targeting" "9.0.0-canary.1c156d69d.0"
-    "@material/ripple" "9.0.0-canary.1c156d69d.0"
-    "@material/rtl" "9.0.0-canary.1c156d69d.0"
-    "@material/shape" "9.0.0-canary.1c156d69d.0"
-    "@material/theme" "9.0.0-canary.1c156d69d.0"
-    "@material/typography" "9.0.0-canary.1c156d69d.0"
-    tslib "^1.9.3"
+    "@material/animation" "12.0.0-canary.1a8d06483.0"
+    "@material/base" "12.0.0-canary.1a8d06483.0"
+    "@material/feature-targeting" "12.0.0-canary.1a8d06483.0"
+    "@material/theme" "12.0.0-canary.1a8d06483.0"
+    tslib "^2.1.0"
 
-"@material/menu-surface@9.0.0-canary.1c156d69d.0", "@material/menu-surface@=9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/menu-surface/-/menu-surface-9.0.0-canary.1c156d69d.0.tgz#6200a17a4895d99f604f96d87b65243ae3b98d5e"
-  integrity sha512-/ePz8oZm+XLsGypnXJ1ATK4Vtei4KgHh9MFJHhOvmAbd6gPX6I8LnWlUA3cQ2/AX0bDeLNM7mXUkJ1d2flHdNQ==
+"@material/feature-targeting@12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/feature-targeting/-/feature-targeting-12.0.0-canary.1a8d06483.0.tgz#b5191c4c813a87207ffeebca6edb9c50fc71f5b3"
+  integrity sha512-CXlHPZ+ArtVpFitBMtvpphGHWesL2n3NuE14e6vBW12N+3kj58BYCUZHLF3/tB1qJlezYEvEs/W2/YpOx8qMMA==
   dependencies:
-    "@material/animation" "9.0.0-canary.1c156d69d.0"
-    "@material/base" "9.0.0-canary.1c156d69d.0"
-    "@material/elevation" "9.0.0-canary.1c156d69d.0"
-    "@material/feature-targeting" "9.0.0-canary.1c156d69d.0"
-    "@material/rtl" "9.0.0-canary.1c156d69d.0"
-    "@material/shape" "9.0.0-canary.1c156d69d.0"
-    "@material/theme" "9.0.0-canary.1c156d69d.0"
-    tslib "^1.9.3"
+    tslib "^2.1.0"
 
-"@material/menu@=9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/menu/-/menu-9.0.0-canary.1c156d69d.0.tgz#641c020acaa1a92a254f8366e6a5762137483757"
-  integrity sha512-opUKKT40E3aDY9wMUIKQtUoxB2gD6Ry633vb2sOHHkf7YA7Ad/F8HnByhLqeq7tB2Gg1N0PKfSGOk/OMjJ1l9w==
+"@material/form-field@=12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/form-field/-/form-field-12.0.0-canary.1a8d06483.0.tgz#393d41ae0a3dbe1780c28c7a2af3791317e189fe"
+  integrity sha512-5OUWpLKAeBK17wsdCN3vAxefXsshuLqXbocvf+FzUwyMWzStRhXyjjR1PxuBLuBBof6JvabLGpQgpuaYFju2EQ==
   dependencies:
-    "@material/base" "9.0.0-canary.1c156d69d.0"
-    "@material/dom" "9.0.0-canary.1c156d69d.0"
-    "@material/elevation" "9.0.0-canary.1c156d69d.0"
-    "@material/feature-targeting" "9.0.0-canary.1c156d69d.0"
-    "@material/list" "9.0.0-canary.1c156d69d.0"
-    "@material/menu-surface" "9.0.0-canary.1c156d69d.0"
-    "@material/ripple" "9.0.0-canary.1c156d69d.0"
-    "@material/rtl" "9.0.0-canary.1c156d69d.0"
-    "@material/theme" "9.0.0-canary.1c156d69d.0"
-    tslib "^1.9.3"
+    "@material/base" "12.0.0-canary.1a8d06483.0"
+    "@material/feature-targeting" "12.0.0-canary.1a8d06483.0"
+    "@material/ripple" "12.0.0-canary.1a8d06483.0"
+    "@material/rtl" "12.0.0-canary.1a8d06483.0"
+    "@material/theme" "12.0.0-canary.1a8d06483.0"
+    "@material/typography" "12.0.0-canary.1a8d06483.0"
+    tslib "^2.1.0"
 
-"@material/mwc-base@^0.20.0":
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/@material/mwc-base/-/mwc-base-0.20.0.tgz#9753d357ea3fb9010985487a4d582bf273de1aaf"
-  integrity sha512-q35jN1TGBts3LzKk2RVtgBpLDfBfRrx2hJ4GEVAeJsEGiO5CZrCD0bPlZSRTammzQBbDAh7szvhMiWo0TkRaWw==
+"@material/icon-button@12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/icon-button/-/icon-button-12.0.0-canary.1a8d06483.0.tgz#bf15f01c994e906bdafb8656c1629b3d71e1c393"
+  integrity sha512-m7WHl4cZHf/oCoQ+Uwu8rzd/Ni712GN6PXN670SQ/1dOSeoK+1H8/J09bWG/OccsYbBAopGRdWBRcgvf4rkC3Q==
   dependencies:
-    "@material/base" "=9.0.0-canary.1c156d69d.0"
-    "@material/dom" "=9.0.0-canary.1c156d69d.0"
-    lit-element "^2.3.0"
+    "@material/base" "12.0.0-canary.1a8d06483.0"
+    "@material/density" "12.0.0-canary.1a8d06483.0"
+    "@material/feature-targeting" "12.0.0-canary.1a8d06483.0"
+    "@material/ripple" "12.0.0-canary.1a8d06483.0"
+    "@material/rtl" "12.0.0-canary.1a8d06483.0"
+    "@material/theme" "12.0.0-canary.1a8d06483.0"
+    tslib "^2.1.0"
+
+"@material/list@12.0.0-canary.1a8d06483.0", "@material/list@=12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/list/-/list-12.0.0-canary.1a8d06483.0.tgz#6ba66e3e0f23dd0b3146090e3ba58a69f835d917"
+  integrity sha512-gt76+G2+kKpmtuY5lImZESZts65eGPmYkjDQsE7x/GsX/eEd9F5k3VqeDQwsp2HyywMoAi6CD9EHN3Hw+ays+g==
+  dependencies:
+    "@material/base" "12.0.0-canary.1a8d06483.0"
+    "@material/density" "12.0.0-canary.1a8d06483.0"
+    "@material/dom" "12.0.0-canary.1a8d06483.0"
+    "@material/feature-targeting" "12.0.0-canary.1a8d06483.0"
+    "@material/ripple" "12.0.0-canary.1a8d06483.0"
+    "@material/rtl" "12.0.0-canary.1a8d06483.0"
+    "@material/shape" "12.0.0-canary.1a8d06483.0"
+    "@material/theme" "12.0.0-canary.1a8d06483.0"
+    "@material/typography" "12.0.0-canary.1a8d06483.0"
+    tslib "^2.1.0"
+
+"@material/menu-surface@12.0.0-canary.1a8d06483.0", "@material/menu-surface@=12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/menu-surface/-/menu-surface-12.0.0-canary.1a8d06483.0.tgz#fd940d4f1007ceff5b829c1f2fbdf21f8c88de43"
+  integrity sha512-vWCkbuNRjNE8FfK8wdFUW61PnURCtEnpceMd+XiAKorUJaqaPSG2uU9Uu6Y823dVEotxmhZaW25oFIPGobM4Cw==
+  dependencies:
+    "@material/animation" "12.0.0-canary.1a8d06483.0"
+    "@material/base" "12.0.0-canary.1a8d06483.0"
+    "@material/elevation" "12.0.0-canary.1a8d06483.0"
+    "@material/feature-targeting" "12.0.0-canary.1a8d06483.0"
+    "@material/rtl" "12.0.0-canary.1a8d06483.0"
+    "@material/shape" "12.0.0-canary.1a8d06483.0"
+    "@material/theme" "12.0.0-canary.1a8d06483.0"
+    tslib "^2.1.0"
+
+"@material/menu@=12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/menu/-/menu-12.0.0-canary.1a8d06483.0.tgz#81f6050fa95c138a6454b84d5ff7a5c38d1fe4c3"
+  integrity sha512-DhUNwiEtPyhvVTW6zpcWsupiLKq/Qi+RDJJP+B79ZY40/p3BoWjDymULOtYGndDYduR5lJ6ScJ5MMT666nelQQ==
+  dependencies:
+    "@material/base" "12.0.0-canary.1a8d06483.0"
+    "@material/dom" "12.0.0-canary.1a8d06483.0"
+    "@material/elevation" "12.0.0-canary.1a8d06483.0"
+    "@material/feature-targeting" "12.0.0-canary.1a8d06483.0"
+    "@material/list" "12.0.0-canary.1a8d06483.0"
+    "@material/menu-surface" "12.0.0-canary.1a8d06483.0"
+    "@material/ripple" "12.0.0-canary.1a8d06483.0"
+    "@material/rtl" "12.0.0-canary.1a8d06483.0"
+    "@material/theme" "12.0.0-canary.1a8d06483.0"
+    tslib "^2.1.0"
+
+"@material/mwc-base@0.22.0-canary.cc04657a.0":
+  version "0.22.0-canary.cc04657a.0"
+  resolved "https://registry.yarnpkg.com/@material/mwc-base/-/mwc-base-0.22.0-canary.cc04657a.0.tgz#9d619b66f0f0b91976215249866ea5a880371a33"
+  integrity sha512-O3BrWp7cfsRgBKIcWt+WRlnG7x4dRP5v+zhiRPdxZV3EHtHfQTO3yiXnhkW+F3BHN4UMOHYeshXHg0CbJ3O6jA==
+  dependencies:
+    "@material/base" "=12.0.0-canary.1a8d06483.0"
+    "@material/dom" "=12.0.0-canary.1a8d06483.0"
+    lit-element "^2.5.0"
     tslib "^2.0.1"
 
-"@material/mwc-button@^0.20.0":
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/@material/mwc-button/-/mwc-button-0.20.0.tgz#2942edb504f4cee4d8f55b667b8538f27084b772"
-  integrity sha512-kqQpeuLfaqfH4PZbENT9rwx1sgeFPLHuKy5M31ZeKG1deRTxw11FDGeMxSkePfm1QFfY6DNTsIAG5qC56tUNlw==
+"@material/mwc-button@0.22.0-canary.cc04657a.0", "@material/mwc-button@canary":
+  version "0.22.0-canary.cc04657a.0"
+  resolved "https://registry.yarnpkg.com/@material/mwc-button/-/mwc-button-0.22.0-canary.cc04657a.0.tgz#9640668b340197325ecc493ddc861bc215c117a3"
+  integrity sha512-xM6VorfSUgYDFFHYr5GfzHFbqcgz0j3TE6xR6dXkJQTqQPFameOYFBKn7TKu2j5674+OY4QHeyhw8/fYaWeP0A==
   dependencies:
-    "@material/mwc-icon" "^0.20.0"
-    "@material/mwc-ripple" "^0.20.0"
-    lit-element "^2.3.0"
-    lit-html "^1.1.2"
+    "@material/mwc-icon" "0.22.0-canary.cc04657a.0"
+    "@material/mwc-ripple" "0.22.0-canary.cc04657a.0"
+    lit-element "^2.5.0"
+    lit-html "^1.4.0"
     tslib "^2.0.1"
 
-"@material/mwc-checkbox@^0.20.0":
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/@material/mwc-checkbox/-/mwc-checkbox-0.20.0.tgz#fff9d41cd8a72b39a3c883d1b01230e1a3e462fd"
-  integrity sha512-e7qRFpoTZPeBTU05M/FvGnAalY9fJXtzTIfFXWevpm5xm21zr+5lw4QqJOzN8l8Sj8CwciTZ86GMfKGViBbyuw==
+"@material/mwc-checkbox@0.22.0-canary.cc04657a.0", "@material/mwc-checkbox@canary":
+  version "0.22.0-canary.cc04657a.0"
+  resolved "https://registry.yarnpkg.com/@material/mwc-checkbox/-/mwc-checkbox-0.22.0-canary.cc04657a.0.tgz#ebfd10c06120de3fbdcf05751757ca621ce9035c"
+  integrity sha512-m/BSKMecOmZ8xG2g7P0bHZ5mlMBNkXxcmw68FOv3qZZufEkLMEic07zxbHNePcmDhjildwMWzTLfWHgCdTQ0hQ==
   dependencies:
-    "@material/mwc-base" "^0.20.0"
-    "@material/mwc-ripple" "^0.20.0"
-    lit-element "^2.3.0"
-    lit-html "^1.1.2"
+    "@material/mwc-base" "0.22.0-canary.cc04657a.0"
+    "@material/mwc-ripple" "0.22.0-canary.cc04657a.0"
+    lit-element "^2.5.0"
+    lit-html "^1.4.0"
     tslib "^2.0.1"
 
-"@material/mwc-circular-progress@^0.20.0":
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/@material/mwc-circular-progress/-/mwc-circular-progress-0.20.0.tgz#db27d4862be4afa3b68f4d9bd06533171869ce37"
-  integrity sha512-6GyI97rZOGajjFB9L8R+44myv3YMo3zEHrlco5j1WnMPIPNHUcYww8EJgtkcl1E/q04Xpwvt6fFPv9X4vmLBnQ==
+"@material/mwc-circular-progress@canary":
+  version "0.22.0-canary.cc04657a.0"
+  resolved "https://registry.yarnpkg.com/@material/mwc-circular-progress/-/mwc-circular-progress-0.22.0-canary.cc04657a.0.tgz#d5873e347979b2279f66826cca167ed3ac147f96"
+  integrity sha512-hBD2EZhiolkD3m7xaSK7ml+qomX+FCg78RbV1BArrEnLk21ui46NsmtvBBJ1UiZUGs1FvRUcVNyMjSRTByxeDA==
   dependencies:
-    "@material/circular-progress" "=9.0.0-canary.1c156d69d.0"
-    "@material/mwc-base" "^0.20.0"
-    "@material/theme" "=9.0.0-canary.1c156d69d.0"
-    lit-element "^2.3.0"
-    lit-html "^1.1.2"
+    "@material/circular-progress" "=12.0.0-canary.1a8d06483.0"
+    "@material/mwc-base" "0.22.0-canary.cc04657a.0"
+    "@material/theme" "=12.0.0-canary.1a8d06483.0"
+    lit-element "^2.5.0"
+    lit-html "^1.4.0"
     tslib "^2.0.1"
 
-"@material/mwc-dialog@^0.20.0":
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/@material/mwc-dialog/-/mwc-dialog-0.20.0.tgz#3169f71a049c61cfd53d16b761b8313645bdba01"
-  integrity sha512-7VG8M0p2xaqs+gFDQLNQiVSKJNe+j8jemYX94wxRMZaMRryX09uPrOkn1CGUAuAy0fivxVLhlFG6KINbGR/Avg==
+"@material/mwc-dialog@canary":
+  version "0.22.0-canary.cc04657a.0"
+  resolved "https://registry.yarnpkg.com/@material/mwc-dialog/-/mwc-dialog-0.22.0-canary.cc04657a.0.tgz#d817a733149893cb4c0d1d1ea563e7c65d360af1"
+  integrity sha512-qcMVcrJxEzgswiP34WPPtR484d2G7YfViVxVUrmAupsIlKqCLn7jYf6OlE/NmX0d65XIdo+WQEt1Qprui6wQiA==
   dependencies:
-    "@material/dialog" "=9.0.0-canary.1c156d69d.0"
-    "@material/dom" "=9.0.0-canary.1c156d69d.0"
-    "@material/mwc-base" "^0.20.0"
-    "@material/mwc-button" "^0.20.0"
+    "@material/dialog" "=12.0.0-canary.1a8d06483.0"
+    "@material/dom" "=12.0.0-canary.1a8d06483.0"
+    "@material/mwc-base" "0.22.0-canary.cc04657a.0"
+    "@material/mwc-button" "0.22.0-canary.cc04657a.0"
     blocking-elements "^0.1.0"
-    lit-element "^2.3.0"
-    lit-html "^1.1.2"
+    lit-element "^2.5.0"
+    lit-html "^1.4.0"
     tslib "^2.0.1"
     wicg-inert "^3.0.0"
 
-"@material/mwc-fab@^0.20.0":
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/@material/mwc-fab/-/mwc-fab-0.20.0.tgz#bcd77bd9a6e06855b174944f0267e2b5512fab45"
-  integrity sha512-lxPlber5SxRAzH063IFTQhUj7YRuoi5juvYsSWHDLZUqj7wBTV+m6wX9a14wltcCumMNL80k2lXs9FLUOnZz9Q==
+"@material/mwc-fab@canary":
+  version "0.22.0-canary.cc04657a.0"
+  resolved "https://registry.yarnpkg.com/@material/mwc-fab/-/mwc-fab-0.22.0-canary.cc04657a.0.tgz#a3307c19a5c432c20da1029451a4dc97a219aa46"
+  integrity sha512-VR1xGp+VaIcysklG6jXP2rky3iTTbI06AvWa3KYevlpwm/sfnY5N4onUpeckAzIVvKUKM9JO/Yx+snJCUCAY5w==
   dependencies:
-    "@material/mwc-ripple" "^0.20.0"
-    lit-element "^2.3.0"
-    lit-html "^1.1.2"
+    "@material/mwc-ripple" "0.22.0-canary.cc04657a.0"
+    lit-element "^2.5.0"
+    lit-html "^1.4.0"
     tslib "^2.0.1"
 
-"@material/mwc-formfield@^0.20.0":
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/@material/mwc-formfield/-/mwc-formfield-0.20.0.tgz#dd3e25778aad624a0d13f5b8a33c95bf1aa3883f"
-  integrity sha512-Rrk2ah5gNHD4O/yYWdwHvH3kGddaZXbdiZPCTpYDlTHG63CMUsAENJy8Fu8ZCC23nxbWfBeejtbB/Da+0VZWig==
+"@material/mwc-formfield@canary":
+  version "0.22.0-canary.cc04657a.0"
+  resolved "https://registry.yarnpkg.com/@material/mwc-formfield/-/mwc-formfield-0.22.0-canary.cc04657a.0.tgz#3e5803793e19c047ac0ec71061069c1f4b593dd0"
+  integrity sha512-eVajWwlwSC0ySDYU3btu41agtDQlotuaa6LYR0ZamNa1CMcu8QFq3ZyLaQqqS66/FsJJ4W+72+MpkUnAthj55A==
   dependencies:
-    "@material/form-field" "=9.0.0-canary.1c156d69d.0"
-    "@material/mwc-base" "^0.20.0"
-    lit-element "^2.3.0"
-    lit-html "^1.1.2"
+    "@material/form-field" "=12.0.0-canary.1a8d06483.0"
+    "@material/mwc-base" "0.22.0-canary.cc04657a.0"
+    lit-element "^2.5.0"
+    lit-html "^1.4.0"
     tslib "^2.0.1"
 
-"@material/mwc-icon-button@^0.20.0":
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/@material/mwc-icon-button/-/mwc-icon-button-0.20.0.tgz#1a2d22f5d351b6a61f0dd41cb516a6fe21b6bcc5"
-  integrity sha512-Bwm399++ZAo4HKmvLwRqSQ8Prhq6fxKwBcNFcqRIYMwwOf/iuuq4/hSX8+Wm8XtdX+mxSQfS7GePqn8XOTTKvw==
+"@material/mwc-icon-button@canary":
+  version "0.22.0-canary.cc04657a.0"
+  resolved "https://registry.yarnpkg.com/@material/mwc-icon-button/-/mwc-icon-button-0.22.0-canary.cc04657a.0.tgz#79171babfbfde7fd98e2d9fbe66af40fdeeadf80"
+  integrity sha512-GzWXtjTterfWKAjs+qRyPP0RIWHt34FJkMoMjD0YuoVzbKeTFURwo9QBduVUU36ERe73sssnxtBk+5pQ7GWGjA==
   dependencies:
-    "@material/mwc-ripple" "^0.20.0"
-    lit-element "^2.3.0"
+    "@material/mwc-ripple" "0.22.0-canary.cc04657a.0"
+    lit-element "^2.5.0"
     tslib "^2.0.1"
 
-"@material/mwc-icon@^0.20.0":
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/@material/mwc-icon/-/mwc-icon-0.20.0.tgz#c2c42bca9145d4a75f63b4ce1567270b41986b47"
-  integrity sha512-YCtzWbJVSZGcvWKVHwIhwfGMLEqAmRSVGcXTCAH/rOzGU7RkOxQkfNDkLAuTRAX9a7HYQStIJ39ENVcysElljg==
+"@material/mwc-icon@0.22.0-canary.cc04657a.0":
+  version "0.22.0-canary.cc04657a.0"
+  resolved "https://registry.yarnpkg.com/@material/mwc-icon/-/mwc-icon-0.22.0-canary.cc04657a.0.tgz#d2a9a597a7e1cb894cf85af44298aa44507649e2"
+  integrity sha512-ArXclZOwcf4UfI2OSQjFNjzp59uRFLD6KDYJuGqrvPneeh4ekS6GVwOrJkI1CVe2ddv9MKWeTdXR6WY2TYk+Uw==
   dependencies:
-    lit-element "^2.3.0"
+    lit-element "^2.5.0"
     tslib "^2.0.1"
 
-"@material/mwc-list@^0.20.0":
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/@material/mwc-list/-/mwc-list-0.20.0.tgz#44b0bcd3653b46c7493614741fc7a11cee8abca4"
-  integrity sha512-RLHn4k6oH2jsSorALbQJ3Ak0BwTyaTeKpXgjI65dHuMRhQaQUaMapJzfh5ghKPhjg1R5D+2r5wktjciFoZ9KVw==
+"@material/mwc-list@0.22.0-canary.cc04657a.0", "@material/mwc-list@canary":
+  version "0.22.0-canary.cc04657a.0"
+  resolved "https://registry.yarnpkg.com/@material/mwc-list/-/mwc-list-0.22.0-canary.cc04657a.0.tgz#490ac8b1aebf57f937122bd9e55bc406c4ef793f"
+  integrity sha512-yA0b38mTEh75+W3LxeSJe97/Yu9bZAXX9783v8lhbwlAbp/IZPcLr0FkSfUt4BM4TIuEU9Sb6E8L8YpCqM6NSA==
   dependencies:
-    "@material/base" "=9.0.0-canary.1c156d69d.0"
-    "@material/dom" "=9.0.0-canary.1c156d69d.0"
-    "@material/list" "=9.0.0-canary.1c156d69d.0"
-    "@material/mwc-base" "^0.20.0"
-    "@material/mwc-checkbox" "^0.20.0"
-    "@material/mwc-radio" "^0.20.0"
-    "@material/mwc-ripple" "^0.20.0"
-    lit-element "^2.3.0"
-    lit-html "^1.1.2"
+    "@material/base" "=12.0.0-canary.1a8d06483.0"
+    "@material/dom" "=12.0.0-canary.1a8d06483.0"
+    "@material/list" "=12.0.0-canary.1a8d06483.0"
+    "@material/mwc-base" "0.22.0-canary.cc04657a.0"
+    "@material/mwc-checkbox" "0.22.0-canary.cc04657a.0"
+    "@material/mwc-radio" "0.22.0-canary.cc04657a.0"
+    "@material/mwc-ripple" "0.22.0-canary.cc04657a.0"
+    lit-element "^2.5.0"
+    lit-html "^1.4.0"
     tslib "^2.0.1"
 
-"@material/mwc-menu@^0.20.0":
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/@material/mwc-menu/-/mwc-menu-0.20.0.tgz#672d6a4b40975b8101029be3b526aa014a252957"
-  integrity sha512-slSY3LORaP8MniXoNvvulvptQ3Ohjit13xiFWVWRr63H3YxnNdBqWW6BICASNJWNV/5y8UM1CE2Xw99UEnG9JQ==
+"@material/mwc-menu@canary":
+  version "0.22.0-canary.cc04657a.0"
+  resolved "https://registry.yarnpkg.com/@material/mwc-menu/-/mwc-menu-0.22.0-canary.cc04657a.0.tgz#61aa5d70af6509958aff9b583c5d86a048d23af2"
+  integrity sha512-unXilkODM05Q4Dhmw54OItlRO1A+k8STuWnDSpM7nti1r5uh25BfJ64qs70OBMn4FM9fZGbOAvX1GfW5o/nYrA==
   dependencies:
-    "@material/menu" "=9.0.0-canary.1c156d69d.0"
-    "@material/menu-surface" "=9.0.0-canary.1c156d69d.0"
-    "@material/mwc-base" "^0.20.0"
-    "@material/mwc-list" "^0.20.0"
-    "@material/shape" "=9.0.0-canary.1c156d69d.0"
-    "@material/theme" "=9.0.0-canary.1c156d69d.0"
-    lit-element "^2.3.0"
-    lit-html "^1.1.2"
+    "@material/menu" "=12.0.0-canary.1a8d06483.0"
+    "@material/menu-surface" "=12.0.0-canary.1a8d06483.0"
+    "@material/mwc-base" "0.22.0-canary.cc04657a.0"
+    "@material/mwc-list" "0.22.0-canary.cc04657a.0"
+    "@material/shape" "=12.0.0-canary.1a8d06483.0"
+    "@material/theme" "=12.0.0-canary.1a8d06483.0"
+    lit-element "^2.5.0"
+    lit-html "^1.4.0"
     tslib "^2.0.1"
 
-"@material/mwc-radio@^0.20.0":
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/@material/mwc-radio/-/mwc-radio-0.20.0.tgz#bf282fe5bd3f0f8e6c3eeb0b781eea6bc06f1743"
-  integrity sha512-aVsok8EZJQFHn5VW9iP4gxO1wY5XeNnANdP82GhHZfIcxp1AQDORuUSy6Qoj2YBmCFCnG4BGAac1zs4OXRPRqA==
+"@material/mwc-radio@0.22.0-canary.cc04657a.0", "@material/mwc-radio@canary":
+  version "0.22.0-canary.cc04657a.0"
+  resolved "https://registry.yarnpkg.com/@material/mwc-radio/-/mwc-radio-0.22.0-canary.cc04657a.0.tgz#3cf7ea09b4c6bfb8cb654c39c1fadd288235ca91"
+  integrity sha512-NDCBflXsqbL8vZKce1BPlDJgjcC/XD+ZlmtSY2liZgvZ6fPUGxtii/YGQRrrmZvIKDc+JJG0rhzZOty5XHQy+A==
   dependencies:
-    "@material/mwc-base" "^0.20.0"
-    "@material/mwc-ripple" "^0.20.0"
-    "@material/radio" "=9.0.0-canary.1c156d69d.0"
-    lit-element "^2.3.0"
+    "@material/mwc-base" "0.22.0-canary.cc04657a.0"
+    "@material/mwc-ripple" "0.22.0-canary.cc04657a.0"
+    "@material/radio" "=12.0.0-canary.1a8d06483.0"
+    lit-element "^2.5.0"
     tslib "^2.0.1"
 
-"@material/mwc-ripple@^0.20.0":
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/@material/mwc-ripple/-/mwc-ripple-0.20.0.tgz#ac83eda314b712c2fba293d2732f550dd1c6023b"
-  integrity sha512-4rlIu+Kk//NsW/u3CnU1kz3dsvwEozax0Zf2CUp+ao0ozclHfQ2+sTZVY0Mr8+GJLn7Oz51gT5OHoarZuWWljA==
+"@material/mwc-ripple@0.22.0-canary.cc04657a.0", "@material/mwc-ripple@canary":
+  version "0.22.0-canary.cc04657a.0"
+  resolved "https://registry.yarnpkg.com/@material/mwc-ripple/-/mwc-ripple-0.22.0-canary.cc04657a.0.tgz#bd22e2babe11aeffe7a611eadf7d354597c18eae"
+  integrity sha512-mjXSH7OA7iBe6e6ssenInTav9gTGx0lK0hrJfi92ku3YYoSgw8ULK8TiL/7YmGGH7UN67Emv4fdGPhwfiMfYbg==
   dependencies:
-    "@material/dom" "=9.0.0-canary.1c156d69d.0"
-    "@material/mwc-base" "^0.20.0"
-    "@material/ripple" "=9.0.0-canary.1c156d69d.0"
-    lit-element "^2.3.0"
-    lit-html "^1.1.2"
+    "@material/dom" "=12.0.0-canary.1a8d06483.0"
+    "@material/mwc-base" "0.22.0-canary.cc04657a.0"
+    "@material/ripple" "=12.0.0-canary.1a8d06483.0"
+    lit-element "^2.5.0"
+    lit-html "^1.4.0"
     tslib "^2.0.1"
 
-"@material/mwc-switch@^0.20.0":
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/@material/mwc-switch/-/mwc-switch-0.20.0.tgz#e4b3c3f512e7c2c497f07828795aa543320e81f9"
-  integrity sha512-1++EESLaVGdRQTpm0t5Z5Il/3IZTSaMzBYb/21AVM2SkNqWG5/2ycd+cj4BhfViIBjPXi0Ajcz4nhxHE/6SRjw==
+"@material/mwc-switch@canary":
+  version "0.22.0-canary.cc04657a.0"
+  resolved "https://registry.yarnpkg.com/@material/mwc-switch/-/mwc-switch-0.22.0-canary.cc04657a.0.tgz#44ccbb37946ec2884692b6fff8ef3beab854d07a"
+  integrity sha512-dP4dqqIYULckm7UDynVS5E62nZt28Ae622AGneiHtRc1ob9IVtGRkpTVNoz5QyKvrLyF4XKAsKoOwAm6x66nkg==
   dependencies:
-    "@material/mwc-base" "^0.20.0"
-    "@material/mwc-ripple" "^0.20.0"
-    "@material/switch" "=9.0.0-canary.1c156d69d.0"
-    lit-element "^2.3.0"
+    "@material/mwc-base" "0.22.0-canary.cc04657a.0"
+    "@material/mwc-ripple" "0.22.0-canary.cc04657a.0"
+    "@material/switch" "=12.0.0-canary.1a8d06483.0"
+    lit-element "^2.5.0"
     tslib "^2.0.1"
 
-"@material/mwc-tab-bar@^0.20.0":
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0.tgz#02cecdc1bdf20feeb85085c8138d0f6d933411b2"
-  integrity sha512-7iGFzVsS33m5uZXxeXMK1ag3u1drRbBcfkXbP8mp0rpIrhZNpCAOZkTpyXtZGx7WAijaCXPdKOo3MkHutqn6Rg==
+"@material/mwc-tab-bar@canary":
+  version "0.22.0-canary.cc04657a.0"
+  resolved "https://registry.yarnpkg.com/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.cc04657a.0.tgz#5590d3a3e820b4a7a4dc134d44790735cd375884"
+  integrity sha512-p0T+65FmD2EdMN4L0MStjd1jXSLjq5/w0wQ08WiO2Q7EWgh2iuABxwLLzhL4hMLWKzDXqmzy1rKI2QyiTRIW8A==
   dependencies:
-    "@material/mwc-base" "^0.20.0"
-    "@material/mwc-tab" "^0.20.0"
-    "@material/mwc-tab-scroller" "^0.20.0"
-    "@material/tab" "=9.0.0-canary.1c156d69d.0"
-    "@material/tab-bar" "=9.0.0-canary.1c156d69d.0"
-    lit-element "^2.3.0"
+    "@material/mwc-base" "0.22.0-canary.cc04657a.0"
+    "@material/mwc-tab" "0.22.0-canary.cc04657a.0"
+    "@material/mwc-tab-scroller" "0.22.0-canary.cc04657a.0"
+    "@material/tab" "=12.0.0-canary.1a8d06483.0"
+    "@material/tab-bar" "=12.0.0-canary.1a8d06483.0"
+    lit-element "^2.5.0"
     tslib "^2.0.1"
 
-"@material/mwc-tab-indicator@^0.20.0":
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/@material/mwc-tab-indicator/-/mwc-tab-indicator-0.20.0.tgz#a25e981517d46689aae5214798cbc083780569e3"
-  integrity sha512-Y98B1MKeBX2zHwQ4yqpQKULvrm2GaLmw6yUqxiwUoE8CJQv/8wOTJHjtvYXgazYs/VZ2bOD1NoOhtntZwMpn/w==
+"@material/mwc-tab-indicator@0.22.0-canary.cc04657a.0":
+  version "0.22.0-canary.cc04657a.0"
+  resolved "https://registry.yarnpkg.com/@material/mwc-tab-indicator/-/mwc-tab-indicator-0.22.0-canary.cc04657a.0.tgz#9a3228248f27ba71f6007a4b9a109c3302cd2017"
+  integrity sha512-HEFb1H9CsxGhWM57Z6MJaAaMLgKdorl8Dvjfj/hDRPaqiQAncKU2SSzRPqGSgnwqIqPQZVZrHte8+0vpnQgv5w==
   dependencies:
-    "@material/mwc-base" "^0.20.0"
-    "@material/tab-indicator" "=9.0.0-canary.1c156d69d.0"
-    lit-element "^2.3.0"
-    lit-html "^1.1.2"
+    "@material/mwc-base" "0.22.0-canary.cc04657a.0"
+    "@material/tab-indicator" "=12.0.0-canary.1a8d06483.0"
+    lit-element "^2.5.0"
+    lit-html "^1.4.0"
     tslib "^2.0.1"
 
-"@material/mwc-tab-scroller@^0.20.0":
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/@material/mwc-tab-scroller/-/mwc-tab-scroller-0.20.0.tgz#5f4ed139a322eef1047a03c3f79aa5df78f7b04e"
-  integrity sha512-Q6Gh+xdiTuXtOBJEUz6YBEHakDAdrsiqGJV1x90Oj5PtbSvkEU8dc/QiJBFsCesxK3vssWKLGqeo1GvQSJW0LQ==
+"@material/mwc-tab-scroller@0.22.0-canary.cc04657a.0":
+  version "0.22.0-canary.cc04657a.0"
+  resolved "https://registry.yarnpkg.com/@material/mwc-tab-scroller/-/mwc-tab-scroller-0.22.0-canary.cc04657a.0.tgz#2b2d80ef5d66872888259341f9bd76ca341b9725"
+  integrity sha512-LOBQdbr+7Ooi4cDGIq9SwmL/ynQ08Xrvp7F81uWvHLMKi5lOz30Jp6nBlBO/+cE3GkLXGfRhwRJTBBEaoQhy1g==
   dependencies:
-    "@material/dom" "=9.0.0-canary.1c156d69d.0"
-    "@material/mwc-base" "^0.20.0"
-    "@material/tab-scroller" "=9.0.0-canary.1c156d69d.0"
-    lit-element "^2.3.0"
+    "@material/dom" "=12.0.0-canary.1a8d06483.0"
+    "@material/mwc-base" "0.22.0-canary.cc04657a.0"
+    "@material/tab-scroller" "=12.0.0-canary.1a8d06483.0"
+    lit-element "^2.5.0"
     tslib "^2.0.1"
 
-"@material/mwc-tab@^0.20.0":
-  version "0.20.0"
-  resolved "https://registry.yarnpkg.com/@material/mwc-tab/-/mwc-tab-0.20.0.tgz#a3445601dab27880e568dc5706738a6517082838"
-  integrity sha512-zGHnns1Gj91sucs9GLyN9kSqstWmaKpqeQCAcu98B7D6rI4dZKYgudrwnUUZiu1xqrsWhZy2rSbe8tu075ENVQ==
+"@material/mwc-tab@0.22.0-canary.cc04657a.0", "@material/mwc-tab@canary":
+  version "0.22.0-canary.cc04657a.0"
+  resolved "https://registry.yarnpkg.com/@material/mwc-tab/-/mwc-tab-0.22.0-canary.cc04657a.0.tgz#8d4491f55758f5ac4cbabc18c3f4f0de26fd687b"
+  integrity sha512-G3i5bCIqoz1yivFNdNcQMvbGX4B2X99Ayt+VbOpr0Mo3xGDqxZ1FXIEK6bLBcfLPO92kgaWlSyzMFkVS4Z/xxw==
   dependencies:
-    "@material/mwc-base" "^0.20.0"
-    "@material/mwc-ripple" "^0.20.0"
-    "@material/mwc-tab-indicator" "^0.20.0"
-    "@material/tab" "=9.0.0-canary.1c156d69d.0"
-    lit-element "^2.3.0"
-    lit-html "^1.1.2"
+    "@material/mwc-base" "0.22.0-canary.cc04657a.0"
+    "@material/mwc-ripple" "0.22.0-canary.cc04657a.0"
+    "@material/mwc-tab-indicator" "0.22.0-canary.cc04657a.0"
+    "@material/tab" "=12.0.0-canary.1a8d06483.0"
+    lit-element "^2.5.0"
+    lit-html "^1.4.0"
     tslib "^2.0.1"
 
-"@material/progress-indicator@9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/progress-indicator/-/progress-indicator-9.0.0-canary.1c156d69d.0.tgz#2a43d2c1442909874c5990b7ae893aced071a83d"
-  integrity sha512-56lYRqnUcI4L9a/LgfmzDTCKxxW1oOFqIVn3pMCP8hVGslhXY+yGl24qIp13MDW6FBgzx5rf66zB1rQltcSp/g==
+"@material/progress-indicator@12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/progress-indicator/-/progress-indicator-12.0.0-canary.1a8d06483.0.tgz#336bde0bfb38c40a1b3f3472fc15be2ee6a35afa"
+  integrity sha512-/X9x7lEh5iTBsc6JHwzx/jgVoHoAxZVq5Fh5zf0Y0QwOUSu6rxUVCQCRz1ylcsRvmKO5BnJpzeHkRGKZDKImMg==
   dependencies:
-    tslib "^1.9.3"
+    tslib "^2.1.0"
 
-"@material/radio@=9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/radio/-/radio-9.0.0-canary.1c156d69d.0.tgz#f0db2c1da9106a7a3888ed382da31b16fe78d1fc"
-  integrity sha512-i2pDFRhvk8bWp8BBJ0dyuGCqP17FlKSHzGqYQNI80dRPVYyLiexqIRfn0KGcW/sJtVC/P4GlyhE98g4mNYA/iQ==
+"@material/radio@=12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/radio/-/radio-12.0.0-canary.1a8d06483.0.tgz#9b2aab58db5ce6f95db385139ffff2295c70d37e"
+  integrity sha512-j7Af+eoO7HMlnSlnRf7D4LEBVc4s2HPcRxFNrZ87POPRYaKlFGa+1TTqn0E9m6dRMB3AA0FCfJk7dLZKE6wlJA==
   dependencies:
-    "@material/animation" "9.0.0-canary.1c156d69d.0"
-    "@material/base" "9.0.0-canary.1c156d69d.0"
-    "@material/density" "9.0.0-canary.1c156d69d.0"
-    "@material/dom" "9.0.0-canary.1c156d69d.0"
-    "@material/feature-targeting" "9.0.0-canary.1c156d69d.0"
-    "@material/ripple" "9.0.0-canary.1c156d69d.0"
-    "@material/theme" "9.0.0-canary.1c156d69d.0"
-    "@material/touch-target" "9.0.0-canary.1c156d69d.0"
-    tslib "^1.9.3"
+    "@material/animation" "12.0.0-canary.1a8d06483.0"
+    "@material/base" "12.0.0-canary.1a8d06483.0"
+    "@material/density" "12.0.0-canary.1a8d06483.0"
+    "@material/dom" "12.0.0-canary.1a8d06483.0"
+    "@material/feature-targeting" "12.0.0-canary.1a8d06483.0"
+    "@material/ripple" "12.0.0-canary.1a8d06483.0"
+    "@material/theme" "12.0.0-canary.1a8d06483.0"
+    "@material/touch-target" "12.0.0-canary.1a8d06483.0"
+    tslib "^2.1.0"
 
-"@material/ripple@9.0.0-canary.1c156d69d.0", "@material/ripple@=9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/ripple/-/ripple-9.0.0-canary.1c156d69d.0.tgz#1cbfec1c94640140f6c1c0f43a3582a82dbc7671"
-  integrity sha512-F1e/LQmYHQFORM/C3hchmANnRwJCXlc7Cp7W+VGpvJdtdzYlTd8DKKcShuOozxUQOjutbNf+Ql8gpZIdYRQaoQ==
+"@material/ripple@12.0.0-canary.1a8d06483.0", "@material/ripple@=12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/ripple/-/ripple-12.0.0-canary.1a8d06483.0.tgz#8d7f62f46b83e2533948f2b527266770dbd5f8ae"
+  integrity sha512-U2uIdgIGDfKueucPnxSmiGwiWYcrE97fOsykagxxiTH037VsSlfLB4gldIKB4vUftYgOlYY1j/2Zz4PWr1MfUg==
   dependencies:
-    "@material/animation" "9.0.0-canary.1c156d69d.0"
-    "@material/base" "9.0.0-canary.1c156d69d.0"
-    "@material/dom" "9.0.0-canary.1c156d69d.0"
-    "@material/feature-targeting" "9.0.0-canary.1c156d69d.0"
-    "@material/theme" "9.0.0-canary.1c156d69d.0"
-    tslib "^1.9.3"
+    "@material/animation" "12.0.0-canary.1a8d06483.0"
+    "@material/base" "12.0.0-canary.1a8d06483.0"
+    "@material/dom" "12.0.0-canary.1a8d06483.0"
+    "@material/feature-targeting" "12.0.0-canary.1a8d06483.0"
+    "@material/theme" "12.0.0-canary.1a8d06483.0"
+    tslib "^2.1.0"
 
-"@material/rtl@9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/rtl/-/rtl-9.0.0-canary.1c156d69d.0.tgz#0ff1f89f95ea4c67f030e56ce3ffdbfefcea225b"
-  integrity sha512-ICx0trLFna0M1Ina/1Nat9aSiB64o7VMs8wyCcidX//n7qFDOb0AtU9h2IB+lvX/UmPZVsDAoaL8iVm6RAqygg==
+"@material/rtl@12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/rtl/-/rtl-12.0.0-canary.1a8d06483.0.tgz#7c0a615ed2c4169b2f7bfa873b13e54ed80a1880"
+  integrity sha512-7GxyzdTs2aCc/fcN+J+EhlVVlFZHhVnCnYi9lQGY8ohaIB1OxMLIVCp399Gqu89/wLZC0xukwWCsiv5fhPOecA==
   dependencies:
-    "@material/theme" "9.0.0-canary.1c156d69d.0"
+    "@material/theme" "12.0.0-canary.1a8d06483.0"
+    tslib "^2.1.0"
 
-"@material/shape@9.0.0-canary.1c156d69d.0", "@material/shape@=9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/shape/-/shape-9.0.0-canary.1c156d69d.0.tgz#6d42d7004ed09b4493abf3f732bb855d3c3996ed"
-  integrity sha512-3NPm+LNFfY4xsiwy/jo+kY3WIFDwlVyJhq+eimjZ9vpG7STBPyzi1LpiPKvsrk0rmvsy3M0c1alM8E+BQ5+UAg==
+"@material/shape@12.0.0-canary.1a8d06483.0", "@material/shape@=12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/shape/-/shape-12.0.0-canary.1a8d06483.0.tgz#9b055b9ec771e5f315b0637606b81718e1f13d34"
+  integrity sha512-VT/DHUHOkaiZznZmKrjIuo0Rq7PyGaAzZyeN3bdJAHz3UXAYQdBUYUxu/PPwKzoIHHKKdfP7XuGpDEysGiNkDw==
   dependencies:
-    "@material/feature-targeting" "9.0.0-canary.1c156d69d.0"
-    "@material/rtl" "9.0.0-canary.1c156d69d.0"
-    "@material/theme" "9.0.0-canary.1c156d69d.0"
+    "@material/feature-targeting" "12.0.0-canary.1a8d06483.0"
+    "@material/rtl" "12.0.0-canary.1a8d06483.0"
+    "@material/theme" "12.0.0-canary.1a8d06483.0"
+    tslib "^2.1.0"
 
-"@material/switch@=9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/switch/-/switch-9.0.0-canary.1c156d69d.0.tgz#e76b4ec213a7fc449a82534289f016ae60002465"
-  integrity sha512-jGMtsI+IdPORkiEKG56XdiN8/8G9JcIdDKExov3BwGn/d6fO+IXQnMbV6XY9aRq/+eI0eI2XXT+ggiyk1Jy0AQ==
+"@material/switch@=12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/switch/-/switch-12.0.0-canary.1a8d06483.0.tgz#6ebd6ff0f5b4e4373da496b225eaacf423b983a6"
+  integrity sha512-pYCKMdu8L6zNePrAESkDUyCAjFMXrtk9WmkigzRkku9E0NEvm4ippajmpAX5zKUAS9OhllsZfVIP0TfyEYNGTA==
   dependencies:
-    "@material/animation" "9.0.0-canary.1c156d69d.0"
-    "@material/base" "9.0.0-canary.1c156d69d.0"
-    "@material/density" "9.0.0-canary.1c156d69d.0"
-    "@material/dom" "9.0.0-canary.1c156d69d.0"
-    "@material/elevation" "9.0.0-canary.1c156d69d.0"
-    "@material/feature-targeting" "9.0.0-canary.1c156d69d.0"
-    "@material/ripple" "9.0.0-canary.1c156d69d.0"
-    "@material/rtl" "9.0.0-canary.1c156d69d.0"
-    "@material/theme" "9.0.0-canary.1c156d69d.0"
-    tslib "^1.9.3"
+    "@material/animation" "12.0.0-canary.1a8d06483.0"
+    "@material/base" "12.0.0-canary.1a8d06483.0"
+    "@material/density" "12.0.0-canary.1a8d06483.0"
+    "@material/dom" "12.0.0-canary.1a8d06483.0"
+    "@material/elevation" "12.0.0-canary.1a8d06483.0"
+    "@material/feature-targeting" "12.0.0-canary.1a8d06483.0"
+    "@material/ripple" "12.0.0-canary.1a8d06483.0"
+    "@material/rtl" "12.0.0-canary.1a8d06483.0"
+    "@material/shape" "12.0.0-canary.1a8d06483.0"
+    "@material/theme" "12.0.0-canary.1a8d06483.0"
+    tslib "^2.1.0"
 
-"@material/tab-bar@=9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/tab-bar/-/tab-bar-9.0.0-canary.1c156d69d.0.tgz#d3dc2ea7317410c4fb054b32d88dbbbdf9c34bb3"
-  integrity sha512-wtpMK37gxkpbpdTpQh3IlHXx/maUyiYiwRjioIeh3GFQ42ZXW/N/9Ou2HK+qpiGVZDREYyT9TS2U5DiZTmM7tA==
+"@material/tab-bar@=12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/tab-bar/-/tab-bar-12.0.0-canary.1a8d06483.0.tgz#fb7e3089feaa22de95b8f6c4e34bb6c9e336400d"
+  integrity sha512-cWhOfT12glndFH+B4V2XeYtBvFvXWmrRjH+lxdeZ+sC12qC6JjryF9wAq7wbciq4m83KaoMwaG1A+ixL6RbcQg==
   dependencies:
-    "@material/animation" "9.0.0-canary.1c156d69d.0"
-    "@material/base" "9.0.0-canary.1c156d69d.0"
-    "@material/density" "9.0.0-canary.1c156d69d.0"
-    "@material/feature-targeting" "9.0.0-canary.1c156d69d.0"
-    "@material/tab" "9.0.0-canary.1c156d69d.0"
-    "@material/tab-scroller" "9.0.0-canary.1c156d69d.0"
-    tslib "^1.9.3"
+    "@material/animation" "12.0.0-canary.1a8d06483.0"
+    "@material/base" "12.0.0-canary.1a8d06483.0"
+    "@material/density" "12.0.0-canary.1a8d06483.0"
+    "@material/feature-targeting" "12.0.0-canary.1a8d06483.0"
+    "@material/tab" "12.0.0-canary.1a8d06483.0"
+    "@material/tab-scroller" "12.0.0-canary.1a8d06483.0"
+    tslib "^2.1.0"
 
-"@material/tab-indicator@9.0.0-canary.1c156d69d.0", "@material/tab-indicator@=9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/tab-indicator/-/tab-indicator-9.0.0-canary.1c156d69d.0.tgz#428b53a25cf09de65e1f602f3784b6202844ad48"
-  integrity sha512-PglSDSuQY6irrTNpEK/n/MDkZh6nH+iw0H31vt2A7QrG+BPwXrVJeRi6b8y2lvEnoQFp5WK8VavhFDNhcibEtw==
+"@material/tab-indicator@12.0.0-canary.1a8d06483.0", "@material/tab-indicator@=12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/tab-indicator/-/tab-indicator-12.0.0-canary.1a8d06483.0.tgz#7765bf234f040b58a9022174c5f857657b1f4b9d"
+  integrity sha512-tGNP7DnPOiQ8R8Zc6E5DmRZONvhOZOyCo1vzt6uIA9noeFW0gDnNUyw1T7znA8FDJsNKu1R9HTcqym7WurcZFQ==
   dependencies:
-    "@material/animation" "9.0.0-canary.1c156d69d.0"
-    "@material/base" "9.0.0-canary.1c156d69d.0"
-    "@material/feature-targeting" "9.0.0-canary.1c156d69d.0"
-    "@material/theme" "9.0.0-canary.1c156d69d.0"
-    tslib "^1.9.3"
+    "@material/animation" "12.0.0-canary.1a8d06483.0"
+    "@material/base" "12.0.0-canary.1a8d06483.0"
+    "@material/feature-targeting" "12.0.0-canary.1a8d06483.0"
+    "@material/theme" "12.0.0-canary.1a8d06483.0"
+    tslib "^2.1.0"
 
-"@material/tab-scroller@9.0.0-canary.1c156d69d.0", "@material/tab-scroller@=9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/tab-scroller/-/tab-scroller-9.0.0-canary.1c156d69d.0.tgz#f65267f3af811af3e7b1a7716a4b4a3cd64571ae"
-  integrity sha512-27h/vQv3+qh3YXPSTw/nakkWxgzDXMv3+ZBw+/XAwxu1siRb6EFBzsfLkQGpjVLm2DCPH3Dz4Xq8DOUkAyvd1A==
+"@material/tab-scroller@12.0.0-canary.1a8d06483.0", "@material/tab-scroller@=12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/tab-scroller/-/tab-scroller-12.0.0-canary.1a8d06483.0.tgz#8fc58334342624b23a6094f9376312141742a750"
+  integrity sha512-tfvtGqFKe8vnd/6a41mxwR7Nl7b8QbcrJPDUmSVBDnZEg2VZ0+svs+w3OdECwen2ivnEvVIfFdESAzG4D8eI6g==
   dependencies:
-    "@material/animation" "9.0.0-canary.1c156d69d.0"
-    "@material/base" "9.0.0-canary.1c156d69d.0"
-    "@material/dom" "9.0.0-canary.1c156d69d.0"
-    "@material/feature-targeting" "9.0.0-canary.1c156d69d.0"
-    "@material/tab" "9.0.0-canary.1c156d69d.0"
-    tslib "^1.9.3"
+    "@material/animation" "12.0.0-canary.1a8d06483.0"
+    "@material/base" "12.0.0-canary.1a8d06483.0"
+    "@material/dom" "12.0.0-canary.1a8d06483.0"
+    "@material/feature-targeting" "12.0.0-canary.1a8d06483.0"
+    "@material/tab" "12.0.0-canary.1a8d06483.0"
+    tslib "^2.1.0"
 
-"@material/tab@9.0.0-canary.1c156d69d.0", "@material/tab@=9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/tab/-/tab-9.0.0-canary.1c156d69d.0.tgz#eef68160458a4d55b28e96f14b0077a6dd69e88d"
-  integrity sha512-gS93t8Yl+djgWA8bFU80amzj2auGg/H3muVIJ1Mncak0CUtX3u6dYyvdKbeecRT9F1Wr4J3L8E0/aQatBOGa1w==
+"@material/tab@12.0.0-canary.1a8d06483.0", "@material/tab@=12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/tab/-/tab-12.0.0-canary.1a8d06483.0.tgz#c901edf4fa9d1c0dd6f26a9c326af9fe13759534"
+  integrity sha512-HR6+Q4Gi9/Wz/A1D6CAIR+6fRDXDvp3JOTsjRBoXonsGKHQmuB+jI3DaTEQ7gDsWa2k4OAC5/wBn+omEDFMQNQ==
   dependencies:
-    "@material/base" "9.0.0-canary.1c156d69d.0"
-    "@material/feature-targeting" "9.0.0-canary.1c156d69d.0"
-    "@material/ripple" "9.0.0-canary.1c156d69d.0"
-    "@material/rtl" "9.0.0-canary.1c156d69d.0"
-    "@material/tab-indicator" "9.0.0-canary.1c156d69d.0"
-    "@material/theme" "9.0.0-canary.1c156d69d.0"
-    "@material/typography" "9.0.0-canary.1c156d69d.0"
-    tslib "^1.9.3"
+    "@material/base" "12.0.0-canary.1a8d06483.0"
+    "@material/feature-targeting" "12.0.0-canary.1a8d06483.0"
+    "@material/ripple" "12.0.0-canary.1a8d06483.0"
+    "@material/rtl" "12.0.0-canary.1a8d06483.0"
+    "@material/tab-indicator" "12.0.0-canary.1a8d06483.0"
+    "@material/theme" "12.0.0-canary.1a8d06483.0"
+    "@material/typography" "12.0.0-canary.1a8d06483.0"
+    tslib "^2.1.0"
 
-"@material/theme@9.0.0-canary.1c156d69d.0", "@material/theme@=9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/theme/-/theme-9.0.0-canary.1c156d69d.0.tgz#2d733dea8f762cc8e35969915dfb3b7359147d1e"
-  integrity sha512-r1610TPwUplt4FHMk7cR06Oz1jU/G31wBIh4Frs/YIB0ZonVlI5cZdIkG0IFtNt9ZYWoDwfP/1nQBxdqrDPPhg==
+"@material/theme@12.0.0-canary.1a8d06483.0", "@material/theme@=12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/theme/-/theme-12.0.0-canary.1a8d06483.0.tgz#0cb281b26a1147ef0322d21ce750f4a0f792d880"
+  integrity sha512-Llc8UnCcE3UbCrJyNLTVXradY9zoddJgH1cB3bzx/j7gIeoJnqXqZB43Zg+ZMXVzoOyGTbYrqpi5Kl1VzOxJSQ==
   dependencies:
-    "@material/feature-targeting" "9.0.0-canary.1c156d69d.0"
+    "@material/feature-targeting" "12.0.0-canary.1a8d06483.0"
+    tslib "^2.1.0"
 
-"@material/top-app-bar@=9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/top-app-bar/-/top-app-bar-9.0.0-canary.1c156d69d.0.tgz#6b5c76a9cfd2abae35f45b74eb17c917db74d70d"
-  integrity sha512-VJLGCF+1vsLY/YFPVgcFCIEG/EjuY7eg7ulBwhwbERIl3pyyY3NAvISGzaeUBKg6JOcw0YqcPKcRnv+Js3KchQ==
+"@material/top-app-bar@=12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/top-app-bar/-/top-app-bar-12.0.0-canary.1a8d06483.0.tgz#7164e244ee41b804660847f1387230b158cd46e1"
+  integrity sha512-+vDujMPtrCSKMs+6q3TxnpG0sAm/snAL14zrReTLTVwr0QEPh5V/gJ51vRZ/Fubr0ssDxc+g3Jw6MtGkN9hrng==
   dependencies:
-    "@material/animation" "9.0.0-canary.1c156d69d.0"
-    "@material/base" "9.0.0-canary.1c156d69d.0"
-    "@material/elevation" "9.0.0-canary.1c156d69d.0"
-    "@material/ripple" "9.0.0-canary.1c156d69d.0"
-    "@material/rtl" "9.0.0-canary.1c156d69d.0"
-    "@material/shape" "9.0.0-canary.1c156d69d.0"
-    "@material/theme" "9.0.0-canary.1c156d69d.0"
-    "@material/typography" "9.0.0-canary.1c156d69d.0"
-    tslib "^1.9.3"
+    "@material/animation" "12.0.0-canary.1a8d06483.0"
+    "@material/base" "12.0.0-canary.1a8d06483.0"
+    "@material/elevation" "12.0.0-canary.1a8d06483.0"
+    "@material/ripple" "12.0.0-canary.1a8d06483.0"
+    "@material/rtl" "12.0.0-canary.1a8d06483.0"
+    "@material/shape" "12.0.0-canary.1a8d06483.0"
+    "@material/theme" "12.0.0-canary.1a8d06483.0"
+    "@material/typography" "12.0.0-canary.1a8d06483.0"
+    tslib "^2.1.0"
 
-"@material/touch-target@9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/touch-target/-/touch-target-9.0.0-canary.1c156d69d.0.tgz#e2839c73f6df724804c376624af776f32be2c81a"
-  integrity sha512-AFymS9cb152a2hEwTc80dVKA0ccNCyMAQNpvB6fEopPMLjO4Hrsu4fIHVyZF5xnz3k/iG59Y6vreHQdHKFGyUw==
+"@material/touch-target@12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/touch-target/-/touch-target-12.0.0-canary.1a8d06483.0.tgz#18ae321c2c6a14bc3bf7c7966f2413a942ef28cb"
+  integrity sha512-JiEIJVzTEwKxh87/noFXsOmF2uWUPinJc0Hhf/BIZrxQk0Gi0MJWwZ5p4gcfv3Z8sC+DjZXd7BImdDhBV2oZJw==
   dependencies:
-    "@material/base" "9.0.0-canary.1c156d69d.0"
-    "@material/feature-targeting" "9.0.0-canary.1c156d69d.0"
+    "@material/base" "12.0.0-canary.1a8d06483.0"
+    "@material/feature-targeting" "12.0.0-canary.1a8d06483.0"
+    tslib "^2.1.0"
 
-"@material/typography@9.0.0-canary.1c156d69d.0":
-  version "9.0.0-canary.1c156d69d.0"
-  resolved "https://registry.yarnpkg.com/@material/typography/-/typography-9.0.0-canary.1c156d69d.0.tgz#340328147eaa86efacfad601b6dbdff7ac0388ac"
-  integrity sha512-+JgMe2fIP+lVh4l5qXfjH9/JWd+LnfDEiVr2clWHgAc3pc2LQm6VVgUbNkrX3yeWql0x7I/inGfQovza8BeYAw==
+"@material/typography@12.0.0-canary.1a8d06483.0":
+  version "12.0.0-canary.1a8d06483.0"
+  resolved "https://registry.yarnpkg.com/@material/typography/-/typography-12.0.0-canary.1a8d06483.0.tgz#df337ca915f505ba6607fb239387b5358a933625"
+  integrity sha512-RGxiA4FEvdO3PQ8xmSaKGvOHmm7WNCjl9rizHembV6tS2rc3CvMiHpQgIyHMGv7WXBcu7Aa9V48S2vXJa0fkmg==
   dependencies:
-    "@material/feature-targeting" "9.0.0-canary.1c156d69d.0"
-    "@material/theme" "9.0.0-canary.1c156d69d.0"
+    "@material/feature-targeting" "12.0.0-canary.1a8d06483.0"
+    "@material/theme" "12.0.0-canary.1a8d06483.0"
+    tslib "^2.1.0"
 
 "@mdi/js@5.9.55":
   version "5.9.55"
@@ -1948,14 +2003,6 @@
     "@polymer/iron-scroll-target-behavior" "^3.0.0-pre.26"
     "@polymer/polymer" "^3.0.0"
 
-"@polymer/app-route@^3.0.2":
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/@polymer/app-route/-/app-route-3.0.2.tgz#749096fb610fb15d27c7b68446406f30786cf93d"
-  integrity sha512-8Y34evmsaYh7ONr+zLwLzXaU0iOZZQj1E2uB3iaToQHbOP1POhKlnmAycBQ/eFB8BwrdSUBaDQk+rZhio78FQw==
-  dependencies:
-    "@polymer/iron-location" "^3.0.0-pre.26"
-    "@polymer/polymer" "^3.0.0"
-
 "@polymer/app-storage@^3.0.2":
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/@polymer/app-storage/-/app-storage-3.0.2.tgz#9303d9cf246f4882b223cca7c36901ecc6fa003c"
@@ -2090,13 +2137,6 @@
     "@polymer/iron-scroll-target-behavior" "^3.0.0-pre.26"
     "@polymer/polymer" "^3.0.0"
 
-"@polymer/iron-location@^3.0.0-pre.26":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@polymer/iron-location/-/iron-location-3.0.1.tgz#43a59fced248ea71db5833116fcdefa186b79527"
-  integrity sha512-almb+p/fdSi4bxG+vyXjY51fDZxHMxwiug51Lfvr86wZRXN/u21Y6BapxG5n9f0hPSy9fimjIAvaYmozi7VjyQ==
-  dependencies:
-    "@polymer/polymer" "^3.0.0"
-
 "@polymer/iron-media-query@^3.0.0", "@polymer/iron-media-query@^3.0.0-pre.26":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@polymer/iron-media-query/-/iron-media-query-3.0.1.tgz#5cd8a1c1e8c9b8bafd3dd5da14e0f8d2cfa76d83"
@@ -2511,36 +2551,28 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@samverschueren/stream-to-observable@^0.3.0":
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"
-  integrity sha512-MI4Xx6LHs4Webyvi6EbspgyAb4D2Q2VtnCQ1blOJcoLS6mVa8lNN2rkIy1CVxfTUpoyIbCTkXES1rLXztFD1lg==
-  dependencies:
-    any-observable "^0.3.0"
-
-"@sinonjs/commons@^1", "@sinonjs/commons@^1.0.2", "@sinonjs/commons@^1.4.0":
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.4.0.tgz#7b3ec2d96af481d7a0321252e7b1c94724ec5a78"
-  integrity sha512-9jHK3YF/8HtJ9wCAbG+j8cD0i0+ATS9A7gXFqS36TblLPNy6rEEc+SB0imo91eCboGaBYGV/MT1/br/J+EE7Tw==
+"@sinonjs/commons@^1.6.0", "@sinonjs/commons@^1.7.0", "@sinonjs/commons@^1.8.3":
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d"
+  integrity sha512-xkNcLAn/wZaX14RPlwizcKicDk9G3F8m2nU3L7Ukm5zBgTwiT0wsoFAHx9Jq56fJA1z/7uKGtCRu16sOUCLIHQ==
   dependencies:
     type-detect "4.0.8"
 
-"@sinonjs/formatio@^3.1.0", "@sinonjs/formatio@^3.2.1":
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/@sinonjs/formatio/-/formatio-3.2.1.tgz#52310f2f9bcbc67bdac18c94ad4901b95fde267e"
-  integrity sha512-tsHvOB24rvyvV2+zKMmPkZ7dXX6LSLKZ7aOtXY6Edklp0uRcgGpOsQTTGTcWViFyx4uhWc6GV8QdnALbIbIdeQ==
+"@sinonjs/fake-timers@^7.0.4", "@sinonjs/fake-timers@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@sinonjs/fake-timers/-/fake-timers-7.1.0.tgz#8f13af27d842cbf51ad4502e05562fe9391d084e"
+  integrity sha512-hAEzXi6Wbvlb67NnGMGSNOeAflLVnMa4yliPU/ty1qjgW/vAletH15/v/esJwASSIA0YlIyjnloenFbEZc9q9A==
   dependencies:
-    "@sinonjs/commons" "^1"
-    "@sinonjs/samsam" "^3.1.0"
+    "@sinonjs/commons" "^1.7.0"
 
-"@sinonjs/samsam@^3.1.0", "@sinonjs/samsam@^3.3.1":
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/@sinonjs/samsam/-/samsam-3.3.1.tgz#e88c53fbd9d91ad9f0f2b0140c16c7c107fe0d07"
-  integrity sha512-wRSfmyd81swH0hA1bxJZJ57xr22kC07a1N4zuIL47yTS04bDk6AoCkczcqHEjcRPmJ+FruGJ9WBQiJwMtIElFw==
+"@sinonjs/samsam@^6.0.2":
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/@sinonjs/samsam/-/samsam-6.0.2.tgz#a0117d823260f282c04bff5f8704bdc2ac6910bb"
+  integrity sha512-jxPRPp9n93ci7b8hMfJOFDPRLFYadN6FSpeROFTR4UNF4i5b+EK6m4QXPO46BDhFgRy1JuS87zAnFOzCUwMJcQ==
   dependencies:
-    "@sinonjs/commons" "^1.0.2"
-    array-from "^2.1.1"
-    lodash "^4.17.11"
+    "@sinonjs/commons" "^1.6.0"
+    lodash.get "^4.4.2"
+    type-detect "^4.0.8"
 
 "@sinonjs/text-encoding@^0.7.1":
   version "0.7.1"
@@ -2577,16 +2609,6 @@
     "@types/connect" "*"
     "@types/node" "*"
 
-"@types/chai@^4.1.7":
-  version "4.1.7"
-  resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.1.7.tgz#1b8e33b61a8c09cbe1f85133071baa0dbf9fa71a"
-  integrity sha512-2Y8uPt0/jwjhQ6EiluT0XCri1Dbplr0ZxfFXUz+ye13gaqE8u5gL5ppao1JrUYr9cIip5S6MvQzBS7Kke7U9VA==
-
-"@types/chai@^4.2.11":
-  version "4.2.11"
-  resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.2.11.tgz#d3614d6c5f500142358e6ed24e1bf16657536c50"
-  integrity sha512-t7uW6eFafjO+qJ3BIV2gGUyZs27egcNRkUdalkud+Qa3+kg//f129iuOFivHDXQ+vnU3fDXuwgv0cqMCbcE8sw==
-
 "@types/chrome@*":
   version "0.0.119"
   resolved "https://registry.yarnpkg.com/@types/chrome/-/chrome-0.0.119.tgz#12a2af96886d0c7210590928729ebf622eb67a58"
@@ -2595,10 +2617,10 @@
     "@types/filesystem" "*"
     "@types/har-format" "*"
 
-"@types/chromecast-caf-receiver@^5.0.11":
-  version "5.0.11"
-  resolved "https://registry.yarnpkg.com/@types/chromecast-caf-receiver/-/chromecast-caf-receiver-5.0.11.tgz#072aa84363392d83284d4ce091ea51ed588bbe38"
-  integrity sha512-c5FMxW5rzSZsqy0BU9yrsvZvkBCRFskE3V3jDPK595v6JKa8b1CoS8okXihHji7T2mrZYRUZeImpKe7kLr75lQ==
+"@types/chromecast-caf-receiver@5.0.12":
+  version "5.0.12"
+  resolved "https://registry.yarnpkg.com/@types/chromecast-caf-receiver/-/chromecast-caf-receiver-5.0.12.tgz#4967f3dabf69a83acd8101bb54fdd10948c3ace0"
+  integrity sha512-JAw+Ok0Jvc5QmRHl/B6+MY9qOlhaa/0yhi7eM0+WoPOIgLrWcHXAcR9aYcqq5oeWKU0P4kHOnMxpBWZcbHmbOg==
 
 "@types/chromecast-caf-sender@^1.0.3":
   version "1.0.3"
@@ -2735,10 +2757,10 @@
   resolved "https://registry.yarnpkg.com/@types/http-errors/-/http-errors-1.8.0.tgz#682477dbbbd07cd032731cb3b0e7eaee3d026b69"
   integrity sha512-2aoSC4UUbHDj2uCsCxcG/vRMXey/m17bC7UwitVm5hn22nI8O8Y9iDpA76Orc+DWkQ4zZrOKEshCqR/jSuXAHA==
 
-"@types/js-yaml@^3.12.1":
-  version "3.12.1"
-  resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-3.12.1.tgz#5c6f4a1eabca84792fbd916f0cb40847f123c656"
-  integrity sha512-SGGAhXLHDx+PK4YLNcNGa6goPf9XRWQNAUUbffkwVGGXIxmDKWyGGL4inzq2sPmExu431Ekb9aEMn9BkPqEYFA==
+"@types/js-yaml@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-4.0.1.tgz#5544730b65a480b18ace6b6ce914e519cec2d43b"
+  integrity sha512-xdOvNmXmrZqqPy3kuCQ+fz6wA0xU5pji9cd1nDrflWaAWtYLLGk5ykW0H6yg5TVyehHP1pfmuuSaZkhP+kspVA==
 
 "@types/json-schema@*":
   version "7.0.5"
@@ -2786,10 +2808,10 @@
     "@types/koa-compose" "*"
     "@types/node" "*"
 
-"@types/leaflet-draw@^1.0.1":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@types/leaflet-draw/-/leaflet-draw-1.0.1.tgz#66e0c2c8b93b23487f836a8d65a769b98aa0bc5b"
-  integrity sha512-/urwtXkpvv7rtre5A6plvXHSUDmFvDrwqpQRKseBCC2bIhIhBtMDf+plqQmi0vhvSk0Pqgk8qH1rtC8EVxPdmg==
+"@types/leaflet-draw@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@types/leaflet-draw/-/leaflet-draw-1.0.3.tgz#73a003bf1def575c7cfd3205fa48d26bd0dc4273"
+  integrity sha512-ayNnO40vafd1Do3h7v0++toEzcO1CEjtFBqPunF3695WU0OTPzJ82XUQcd4MlYTuPSP3OsZm5ni361tgmcjxNw==
   dependencies:
     "@types/leaflet" "*"
 
@@ -2800,22 +2822,17 @@
   dependencies:
     "@types/geojson" "*"
 
-"@types/leaflet@^1.4.3":
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.4.3.tgz#62638cb73770eeaed40222042afbcc7b495f0cc4"
-  integrity sha512-jFRBSsPHi1EwQSwrN0cOJLdPhwOZsRl4IMxvm/2ShLh0YM5GfCtQXCzsrv8RE7DWL+AykXdYSAd9bFLWbZT4CQ==
+"@types/leaflet@^1.7.0":
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/@types/leaflet/-/leaflet-1.7.0.tgz#3700fb5d29a8214fbd496565b08ec28e40cee808"
+  integrity sha512-ltv5jR+VjKSMtoDkxH61Rsbo0zLU7iqyOXpVPkAX4F+79fg2eymC7t0msWsfNaEZO1FGTIQATCCCQe+ijWoicg==
   dependencies:
     "@types/geojson" "*"
 
-"@types/marked@^1.2.2":
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-1.2.2.tgz#1f858a0e690247ecf3b2eef576f98f86e8d960d4"
-  integrity sha512-wLfw1hnuuDYrFz97IzJja0pdVsC0oedtS4QsKH1/inyW9qkLQbXgMUqEQT0MVtUBx3twjWeInUfjQbhBVLECXw==
-
-"@types/memoize-one@4.1.0":
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/@types/memoize-one/-/memoize-one-4.1.0.tgz#62119f26055b3193ae43ca1882c5b29b88b71ece"
-  integrity sha512-cmSgi6JMX/yBwgpVm4GooNWIH+vEeJoa8FAa6ExOhpJbC0Juq32/uYKiKb3VPSqrEA0aOnjvwZanla3O1WZMbw==
+"@types/marked@^2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-2.0.3.tgz#c8ea93684e530cc3b667d3e7226556dd0844ad1f"
+  integrity sha512-lbhSN1rht/tQ+dSWxawCzGgTfxe9DB31iLgiT1ZVT5lshpam/nyOA1m3tKHRoNPctB2ukSL22JZI5Fr+WI/zYg==
 
 "@types/mime@*":
   version "2.0.3"
@@ -2827,10 +2844,10 @@
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
   integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
 
-"@types/mocha@^7.0.2":
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-7.0.2.tgz#b17f16cf933597e10d6d78eae3251e692ce8b0ce"
-  integrity sha512-ZvO2tAcjmMi8V/5Z3JsyofMe3hasRcaw88cto5etSVMwVQfeivGAlEYmaQgceUSVYFofVjT+ioHsATjdWcFt1w==
+"@types/mocha@^8.2.2":
+  version "8.2.2"
+  resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-8.2.2.tgz#91daa226eb8c2ff261e6a8cbf8c7304641e095e0"
+  integrity sha512-Lwh0lzzqT5Pqh6z61P3c3P5nm6fzQK/MMHl9UKeneAeInVflBSz1O2EkX6gM6xfJd7FBXBY5purtLx7fUiZ7Hw==
 
 "@types/node@*":
   version "15.0.1"
@@ -2842,6 +2859,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.46.tgz#1cd867ebfe9957ab45951f2f715f8de5f3dab7a3"
   integrity sha512-Tice8a+sJtlP9C1EUo0DYyjq52T37b3LexVu3p871+kfIBIN+OQ7PKPei1oF3MgF39olEpUfxaLtD+QFc1k69Q==
 
+"@types/parse-json@^4.0.0":
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
+  integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
+
 "@types/parse5@^5.0.3":
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/@types/parse5/-/parse5-5.0.3.tgz#e7b5aebbac150f8b5fdd4a46e7f0bd8e65e19109"
@@ -2857,11 +2879,6 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.3.tgz#7ee330ba7caafb98090bece86a5ee44115904c2c"
   integrity sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA==
 
-"@types/resize-observer-browser@^0.1.3":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@types/resize-observer-browser/-/resize-observer-browser-0.1.3.tgz#5cca2445e6fc34a380760bd6ef8c492863469c47"
-  integrity sha512-3tGjLIDH8L57fWOfC7NVn/BbGQD7pXwbkk2+8Z4hK/S7kOIv1MUN4nkKjfx0qg4ctkukjzp3Bgr/Z+Hq5ZQZTQ==
-
 "@types/resolve@0.0.8":
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-0.0.8.tgz#f26074d238e02659e323ce1a13d041eee280e194"
@@ -2889,6 +2906,11 @@
   resolved "https://registry.yarnpkg.com/@types/sortablejs/-/sortablejs-1.10.6.tgz#98725ae08f1dfe28b8da0fdf302c417f5ff043c0"
   integrity sha512-QRz8Z+uw2Y4Gwrtxw8hD782zzuxxugdcq8X/FkPsXUa1kfslhGzy13+4HugO9FXNo+jlWVcE6DYmmegniIQ30A==
 
+"@types/trusted-types@^1.0.1":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-1.0.6.tgz#569b8a08121d3203398290d602d84d73c8dcf5da"
+  integrity sha512-230RC8sFeHoT6sSUlRO6a8cAnclO06eeiq1QDfiv2FGCLWFvvERWgwIQD4FWqD9A69BN7Lzee4OXwoMVnnsWDw==
+
 "@types/webspeechapi@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/webspeechapi/-/webspeechapi-0.0.29.tgz#8f3c6b31b779df7a9bbac7f89acfce0c3bcb1972"
@@ -2971,6 +2993,11 @@
     "@typescript-eslint/types" "4.22.0"
     eslint-visitor-keys "^2.0.0"
 
+"@ungap/promise-all-settled@1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@ungap/promise-all-settled/-/promise-all-settled-1.1.2.tgz#aa58042711d6e3275dd37dc597e5d31e8c290a44"
+  integrity sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==
+
 "@vaadin/vaadin-button@^2.1.0":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@vaadin/vaadin-button/-/vaadin-button-2.2.1.tgz#129b585d176053289b13451767495727b2201763"
@@ -3518,6 +3545,14 @@ acorn@^8.0.4:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.0.5.tgz#a3bfb872a74a6a7f661bc81b9849d9cac12601b7"
   integrity sha512-v+DieK/HJkJOpFBETDJioequtc3PfxsWMaxIdIwujtF7FEV/MAyDQLlm6/zPvr7Mix07mLh6ccVwIsloceodlg==
 
+aggregate-error@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a"
+  integrity sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==
+  dependencies:
+    clean-stack "^2.0.0"
+    indent-string "^4.0.0"
+
 ajv-errors@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/ajv-errors/-/ajv-errors-1.0.1.tgz#f35986aceb91afadec4102fbd85014950cefa64d"
@@ -3605,10 +3640,10 @@ ansi-align@^2.0.0:
   dependencies:
     string-width "^2.0.0"
 
-ansi-colors@3.2.3:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.3.tgz#57d35b8686e851e2cc04c403f1c00203976a1813"
-  integrity sha512-LEHHyuhlPY3TmuUYMh2oz89lTShfvgbmzaBcxve9t/9Wuy7Dwf4yoAKcND7KFT1HAQfqZ12qtc+DUrBMeKF9nw==
+ansi-colors@4.1.1, ansi-colors@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
+  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
 
 ansi-colors@^1.0.1:
   version "1.1.0"
@@ -3622,16 +3657,6 @@ ansi-colors@^3.0.0:
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"
   integrity sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==
 
-ansi-colors@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-4.1.1.tgz#cbb9ae256bf750af1eab344f229aa27fe94ba348"
-  integrity sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==
-
-ansi-escapes@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
-  integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
-
 ansi-escapes@^4.2.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.1.tgz#a5c47cc43181f1f38ffd7076837700d395522a61"
@@ -3639,6 +3664,13 @@ ansi-escapes@^4.2.1:
   dependencies:
     type-fest "^0.11.0"
 
+ansi-escapes@^4.3.0:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.3.2.tgz#6b2291d1db7d98b6521d5f1efa42d0f3a9feb65e"
+  integrity sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==
+  dependencies:
+    type-fest "^0.21.3"
+
 ansi-gray@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/ansi-gray/-/ansi-gray-0.1.1.tgz#2962cf54ec9792c48510a3deb524436861ef7251"
@@ -3718,11 +3750,6 @@ any-base@^1.1.0:
   resolved "https://registry.yarnpkg.com/any-base/-/any-base-1.1.0.tgz#ae101a62bc08a597b4c9ab5b7089d456630549fe"
   integrity sha512-uMgjozySS8adZZYePpaWs8cxB9/kdzmpX6SgJZ+wbz1K5eYk5QMYDVJaZKhxyIHUdnnJkfR7SVgStgH7LkGUyg==
 
-any-observable@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/any-observable/-/any-observable-0.3.0.tgz#af933475e5806a67d0d7df090dd5e8bef65d119b"
-  integrity sha512-/FQM1EDkTsf63Ub2C6O7GuYFDsSXUwsaZDurV0np41ocwq0jthUAYCmhBX9f+KwlaCgIuWyr/4WlUQUBfKfZog==
-
 any-promise@^1.0.0, any-promise@^1.1.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/any-promise/-/any-promise-1.3.0.tgz#abc6afeedcea52e809cdc0376aed3ce39635d17f"
@@ -3794,6 +3821,11 @@ argparse@^1.0.7:
   dependencies:
     sprintf-js "~1.0.2"
 
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
 arr-diff@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-2.0.0.tgz#8f3b827f955a8bd669697e4a4256ac3ceae356cf"
@@ -3870,11 +3902,6 @@ array-flatten@^2.1.0:
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-2.1.2.tgz#24ef80a28c1a893617e2149b0c6d0d788293b099"
   integrity sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==
 
-array-from@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/array-from/-/array-from-2.1.1.tgz#cfe9d8c26628b9dc5aecc62a9f5d8f1f352c1195"
-  integrity sha1-z+nYwmYoudxa7MYqn12PHzUsEZU=
-
 array-includes@^3.1.1:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/array-includes/-/array-includes-3.1.3.tgz#c7f619b382ad2afaf5326cddfdc0afc61af7690a"
@@ -3961,7 +3988,7 @@ array.prototype.flat@^1.2.3:
     define-properties "^1.1.3"
     es-abstract "^1.18.0-next.1"
 
-arrify@^1.0.0, arrify@^1.0.1:
+arrify@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
   integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
@@ -4540,7 +4567,7 @@ camelcase@^5.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
-camelcase@^6.2.0:
+camelcase@^6.0.0, camelcase@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.2.0.tgz#924af881c9d525ac9d87f40d964e5cea982a1809"
   integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg==
@@ -4550,16 +4577,16 @@ caniuse-lite@^1.0.30001214:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001219.tgz#5bfa5d0519f41f993618bd318f606a4c4c16156b"
   integrity sha512-c0yixVG4v9KBc/tQ2rlbB3A/bgBFRvl8h8M4IeUbqCca4gsiCfvtaheUssbnux/Mb66Vjz7x8yYjDgYcNQOhyQ==
 
-chai@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/chai/-/chai-4.2.0.tgz#760aa72cf20e3795e84b12877ce0e83737aa29e5"
-  integrity sha512-XQU3bhBukrOsQCuwZndwGcCVQHyZi53fQ6Ys1Fym7E4olpIqqZZhhoFJoaKVvV17lWQoXYwgWN2nF5crA8J2jw==
+chai@^4.3.4:
+  version "4.3.4"
+  resolved "https://registry.yarnpkg.com/chai/-/chai-4.3.4.tgz#b55e655b31e1eac7099be4c08c21964fce2e6c49"
+  integrity sha512-yS5H68VYOCtN1cjfwumDSuzn/9c+yza4f3reKXlE5rUg7SFcCEy90gJvydNgOYtblyf4Zi6jIWRnXOgErta0KA==
   dependencies:
     assertion-error "^1.1.0"
     check-error "^1.0.2"
     deep-eql "^3.0.1"
     get-func-name "^2.0.0"
-    pathval "^1.1.0"
+    pathval "^1.1.1"
     type-detect "^4.0.5"
 
 chalk@2.4.1:
@@ -4582,7 +4609,7 @@ chalk@^0.5.0:
     strip-ansi "^0.3.0"
     supports-color "^0.2.0"
 
-chalk@^1.0.0, chalk@^1.1.3:
+chalk@^1.0.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
   integrity sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=
@@ -4593,7 +4620,7 @@ chalk@^1.0.0, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.1, chalk@^2.4.1, chalk@^2.4.2:
+chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -4610,7 +4637,7 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^4.0.0:
+chalk@^4.0.0, chalk@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.1.tgz#c80b3fab28bf6371e6863325eee67e618b77e6ad"
   integrity sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==
@@ -4631,21 +4658,18 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
-chart.js@~2.8.0:
-  version "2.8.0"
-  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.8.0.tgz#b703b10d0f4ec5079eaefdcd6ca32dc8f826e0e9"
-  integrity sha512-Di3wUL4BFvqI5FB5K26aQ+hvWh8wnP9A3DWGvXHVkO13D3DSnaSsdZx29cXlEsYKVkn1E2az+ZYFS4t0zi8x0w==
+chart.js@^2.9.4:
+  version "2.9.4"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684"
+  integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A==
   dependencies:
     chartjs-color "^2.1.0"
     moment "^2.10.2"
 
-chartjs-chart-timeline@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/chartjs-chart-timeline/-/chartjs-chart-timeline-0.3.0.tgz#0cd07ad4380d05104162382006d52a02e581decf"
-  integrity sha512-/smXdf/1yRpp1dUZ1EPJ8l/Cys4fvyLoBgej4uulgC9rlYRIZ3pCIYW6JJbAomFQsNwk6jv7VKlLPCPqxb0oZQ==
-  dependencies:
-    chart.js "~2.8.0"
-    moment "^2.22.0"
+chartjs-chart-timeline@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/chartjs-chart-timeline/-/chartjs-chart-timeline-0.4.0.tgz#cbd25dc5ddb5c2b34289f8dd7a2a627d71e251e8"
+  integrity sha512-a3iOFgMUXgEK9zyDFXlL7cfhO6z4DkeuGqok1xnNVNg12ciSt/k1jDBFk8JKN+sVNZfoqeGAFBT9zvb++iEWnA==
 
 chartjs-color-string@^0.6.0:
   version "0.6.0"
@@ -4667,10 +4691,10 @@ check-error@^1.0.2:
   resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
   integrity sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=
 
-chokidar@3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.3.0.tgz#12c0714668c55800f659e262d4962a97faf554a6"
-  integrity sha512-dGmKLDdT3Gdl7fBUe8XK+gAtGmzy5Fn0XkkWQuYxGIgWVPPse2CxFA5mtrlD0TOHaHjEUqkWNyP1XdHoJES/4A==
+chokidar@3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a"
+  integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==
   dependencies:
     anymatch "~3.1.1"
     braces "~3.0.2"
@@ -4678,9 +4702,9 @@ chokidar@3.3.0:
     is-binary-path "~2.1.0"
     is-glob "~4.0.1"
     normalize-path "~3.0.0"
-    readdirp "~3.2.0"
+    readdirp "~3.5.0"
   optionalDependencies:
-    fsevents "~2.1.1"
+    fsevents "~2.3.1"
 
 chokidar@^1.6.0:
   version "1.7.0"
@@ -4786,10 +4810,10 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-cldr-core@36.0.0:
-  version "36.0.0"
-  resolved "https://registry.yarnpkg.com/cldr-core/-/cldr-core-36.0.0.tgz#1d2148ed6802411845baeeb21432d7bbfde7d4f7"
-  integrity sha512-QLnAjt20rZe38c8h8OJ9jPND+O4o5O8Nw0TK/P3KpNn1cmOhMu0rk6Kc3ap96c5OStQ9gAngs9+Be2sum26NOw==
+cldr-core@38:
+  version "38.1.0"
+  resolved "https://registry.yarnpkg.com/cldr-core/-/cldr-core-38.1.0.tgz#3c400436b89110e2c0584469d51b7479ef0fa70c"
+  integrity sha512-Da9xKjDp4qGGIX0VDsBqTan09iR5nuYD2a/KkfEaUyqKhu6wFVNRiCpPDXeRbpVwPBY6PgemV8WiHatMhcpy4A==
 
 clean-css@^4.2.1:
   version "4.2.3"
@@ -4798,18 +4822,16 @@ clean-css@^4.2.1:
   dependencies:
     source-map "~0.6.0"
 
+clean-stack@^2.0.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
+  integrity sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==
+
 cli-boxes@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/cli-boxes/-/cli-boxes-1.0.0.tgz#4fa917c3e59c94a004cd61f8ee509da651687143"
   integrity sha1-T6kXw+WclKAEzWH47lCdplFocUM=
 
-cli-cursor@^2.0.0, cli-cursor@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-2.1.0.tgz#b35dac376479facc3e94747d41d0d0f5238ffcb5"
-  integrity sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=
-  dependencies:
-    restore-cursor "^2.0.0"
-
 cli-cursor@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307"
@@ -4817,13 +4839,13 @@ cli-cursor@^3.1.0:
   dependencies:
     restore-cursor "^3.1.0"
 
-cli-truncate@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-0.2.1.tgz#9f15cfbb0705005369216c626ac7d05ab90dd574"
-  integrity sha1-nxXPuwcFAFNpIWxiasfQWrkN1XQ=
+cli-truncate@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/cli-truncate/-/cli-truncate-2.1.0.tgz#c39e28bf05edcde5be3b98992a22deed5a2b93c7"
+  integrity sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==
   dependencies:
-    slice-ansi "0.0.4"
-    string-width "^1.0.1"
+    slice-ansi "^3.0.0"
+    string-width "^4.2.0"
 
 cli-width@^2.0.0:
   version "2.2.0"
@@ -4865,6 +4887,15 @@ cliui@^6.0.0:
     strip-ansi "^6.0.0"
     wrap-ansi "^6.2.0"
 
+cliui@^7.0.2:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/cliui/-/cliui-7.0.4.tgz#a0265ee655476fc807aea9df3df8df7783808b4f"
+  integrity sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==
+  dependencies:
+    string-width "^4.2.0"
+    strip-ansi "^6.0.0"
+    wrap-ansi "^7.0.0"
+
 clone-buffer@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/clone-buffer/-/clone-buffer-1.0.0.tgz#e3e25b207ac4e701af721e2cb5a16792cac3dc58"
@@ -4974,10 +5005,10 @@ colorette@^1.2.1, colorette@^1.2.2:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
   integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
 
-comlink@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/comlink/-/comlink-4.3.0.tgz#80b3366baccd87897dab3638ebfcfae28b2f87c7"
-  integrity sha512-mu4KKKNuW8TvkfpW/H88HBPeILubBS6T94BdD1VWBXNXfiyqVtwUCVNO1GeNOBTsIswzsMjWlycYr+77F5b84g==
+comlink@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/comlink/-/comlink-4.3.1.tgz#0c6b9d69bcd293715c907c33fe8fc45aecad13c5"
+  integrity sha512-+YbhUdNrpBZggBAHWcgQMLPLH1KDF3wJpeqrCKieWQ8RL7atmgsgTQko1XEBK6PsecfopWNntopJ+ByYG1lRaA==
 
 command-line-args@^5.1.1:
   version "5.1.1"
@@ -4999,16 +5030,21 @@ command-line-usage@^6.1.1:
     table-layout "^1.0.1"
     typical "^5.2.0"
 
-commander@^2.14.1, commander@^2.19.0, commander@^2.9.0:
+commander@^2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
   integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
 
-commander@^2.20.0, commander@~2.20.3:
+commander@^2.20.0, commander@^2.20.3, commander@~2.20.3:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
+commander@^6.2.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
+  integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
+
 commander@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.1.0.tgz#f2eaecf131f10e36e07d894698226e36ae0eb5ff"
@@ -5199,7 +5235,7 @@ core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
   integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
 
-cosmiconfig@^5.0.2, cosmiconfig@^5.0.7:
+cosmiconfig@^5.0.7:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.0.tgz#45038e4d28a7fe787203aede9c25bca4a08b12c8"
   integrity sha512-nxt+Nfc3JAqf4WIWd0jXLjTJZmsPLrA9DDc4nRw2KFJQJK7DNooqSXrNI7tzLG50CF8axczly5UV929tBmh/7g==
@@ -5209,6 +5245,17 @@ cosmiconfig@^5.0.2, cosmiconfig@^5.0.7:
     js-yaml "^3.13.0"
     parse-json "^4.0.0"
 
+cosmiconfig@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.0.tgz#ef9b44d773959cae63ddecd122de23853b60f8d3"
+  integrity sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
 cpx@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/cpx/-/cpx-1.5.0.tgz#185be018511d87270dedccc293171e37655ab88f"
@@ -5262,10 +5309,10 @@ crelt@^1.0.5:
   resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.5.tgz#57c0d52af8c859e354bace1883eb2e1eb182bb94"
   integrity sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==
 
-cropperjs@^1.5.7:
-  version "1.5.7"
-  resolved "https://registry.yarnpkg.com/cropperjs/-/cropperjs-1.5.7.tgz#b65019725bae1c6285e881fb661b2141fa57025b"
-  integrity sha512-sGj+G/ofKh+f6A4BtXLJwtcKJgMUsXYVUubfTo9grERiDGXncttefmue/fyQFvn8wfdyoD1KhDRYLfjkJFl0yw==
+cropperjs@^1.5.11:
+  version "1.5.11"
+  resolved "https://registry.yarnpkg.com/cropperjs/-/cropperjs-1.5.11.tgz#502ae6d8ca098b124de6813601cca70015879fc0"
+  integrity sha512-SJUeBBhtNBnnn+UrLKluhFRIXLJn7XFPv8QN1j49X5t+BIMwkgvDev541f96bmu8Xe0TgCx3gON22KmY/VddaA==
 
 cross-spawn@^5.0.1:
   version "5.1.0"
@@ -5287,7 +5334,7 @@ cross-spawn@^6.0.0, cross-spawn@^6.0.5:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
-cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
@@ -5337,11 +5384,6 @@ d@1:
   dependencies:
     es5-ext "^0.10.9"
 
-date-fns@^1.27.2:
-  version "1.30.1"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
-  integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
-
 dateformat@^1.0.7-1.2.3:
   version "1.0.12"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-1.0.12.tgz#9f124b67594c937ff706932e4a642cca8dbbfee9"
@@ -5362,7 +5404,14 @@ debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@3.2.6, debug@^3.1.0, debug@^3.1.1:
+debug@4.3.1, debug@^4.1.0, debug@^4.2.0:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
+  integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==
+  dependencies:
+    ms "2.1.2"
+
+debug@^3.1.0, debug@^3.1.1:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
   integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@@ -5383,13 +5432,6 @@ debug@^4.0.1, debug@^4.1.1:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.1.0:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
-  integrity sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==
-  dependencies:
-    ms "2.1.2"
-
 debug@~3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
@@ -5402,6 +5444,11 @@ decamelize@^1.1.1, decamelize@^1.1.2, decamelize@^1.2.0:
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
 
+decamelize@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-4.0.0.tgz#aa472d7bf660eb15f3494efd531cab7f2a709837"
+  integrity sha512-9iE1PgSik9HeIIw2JO94IidnE3eBoQrFJ3w7sFuzSX4DpmZ3v5sZpUiV5Swcf6mQEF+Y0ru8Neo+p+nyh2J+hQ==
+
 decode-uri-component@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
@@ -5510,18 +5557,6 @@ define-property@^2.0.2:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
-del@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/del/-/del-3.0.0.tgz#53ecf699ffcbcb39637691ab13baf160819766e5"
-  integrity sha1-U+z2mf/LyzljdpGrE7rxYIGXZuU=
-  dependencies:
-    globby "^6.1.0"
-    is-path-cwd "^1.0.0"
-    is-path-in-cwd "^1.0.0"
-    p-map "^1.1.1"
-    pify "^3.0.0"
-    rimraf "^2.2.8"
-
 del@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/del/-/del-4.0.0.tgz#4fa27e92c366cb45b9bdaa56a9b8703dced17437"
@@ -5604,7 +5639,12 @@ didyoumean2@4.1.0:
     leven "^3.1.0"
     lodash.deburr "^4.1.0"
 
-diff@3.5.0, diff@^3.1.0, diff@^3.5.0:
+diff@5.0.0, diff@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/diff/-/diff-5.0.0.tgz#7ed6ad76d859d030787ec35855f5b1daf31d852b"
+  integrity sha512-/VTCrvm5Z0JGty/BWHljh+BAiw3IK+2j87NGMu8Nwc/f48WoDAC395uomO9ZD117ZOBaHmkX1oyLvkVM/aIT3w==
+
+diff@^3.1.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
   integrity sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==
@@ -5720,11 +5760,6 @@ electron-to-chromium@^1.3.719:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.723.tgz#52769a75635342a4db29af5f1e40bd3dad02c877"
   integrity sha512-L+WXyXI7c7+G1V8ANzRsPI5giiimLAUDC6Zs1ojHHPhYXb3k/iTABFmWjivEtsWrRQymjnO66/rO2ZTABGdmWg==
 
-elegant-spinner@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
-  integrity sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=
-
 elliptic@^6.0.0, elliptic@^6.5.2:
   version "6.5.4"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.4.tgz#da37cebd31e79a1367e941b592ed1fbebd58abbb"
@@ -5813,23 +5848,6 @@ error-ex@^1.2.0, error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.17.0-next.1, es-abstract@^1.17.5:
-  version "1.17.5"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.5.tgz#d8c9d1d66c8981fb9200e2251d799eee92774ae9"
-  integrity sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==
-  dependencies:
-    es-to-primitive "^1.2.1"
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-symbols "^1.0.1"
-    is-callable "^1.1.5"
-    is-regex "^1.0.5"
-    object-inspect "^1.7.0"
-    object-keys "^1.1.1"
-    object.assign "^4.1.0"
-    string.prototype.trimleft "^2.1.1"
-    string.prototype.trimright "^2.1.1"
-
 es-abstract@^1.18.0-next.1, es-abstract@^1.18.0-next.2:
   version "1.18.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.18.0.tgz#ab80b359eecb7ede4c298000390bc5ac3ec7b5a4"
@@ -5922,7 +5940,12 @@ escape-html@^1.0.3, escape-html@~1.0.3:
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
 
-escape-string-regexp@1.0.5, escape-string-regexp@^1.0.0, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.4, escape-string-regexp@^1.0.5:
+escape-string-regexp@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
+escape-string-regexp@^1.0.0, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
@@ -6330,6 +6353,21 @@ execa@^1.0.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+execa@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-4.1.0.tgz#4e5491ad1572f2f17a77d388c6c857135b22847a"
+  integrity sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==
+  dependencies:
+    cross-spawn "^7.0.0"
+    get-stream "^5.0.0"
+    human-signals "^1.1.1"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.0"
+    onetime "^5.1.0"
+    signal-exit "^3.0.2"
+    strip-final-newline "^2.0.0"
+
 execa@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-5.0.0.tgz#4029b0007998a841fbd1032e5f4de86a3c1e3376"
@@ -6529,6 +6567,11 @@ fast-json-stable-stringify@^2.1.0:
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
   integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
 
+fast-levenshtein@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-1.1.4.tgz#e6a754cc8f15e58987aa9cbd27af66fd6f4e5af9"
+  integrity sha1-5qdUzI8V5YmHqpy9J69m/W9OWvk=
+
 fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
@@ -6565,22 +6608,7 @@ fecha@^4.2.0:
   resolved "https://registry.yarnpkg.com/fecha/-/fecha-4.2.0.tgz#3ffb6395453e3f3efff850404f0a59b6747f5f41"
   integrity sha512-aN3pcx/DSmtyoovUudctc8+6Hl4T+hI9GBBHLjA76jdZl7+b1sgh5g4k+u/GL3dTy1/pnYzKp69FpJ0OicE3Wg==
 
-figures@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
-  integrity sha1-y+Hjr/zxzUS4DK3+0o3Hk6lwHS4=
-  dependencies:
-    escape-string-regexp "^1.0.5"
-    object-assign "^4.1.0"
-
-figures@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
-  integrity sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=
-  dependencies:
-    escape-string-regexp "^1.0.5"
-
-figures@^3.0.0:
+figures@^3.0.0, figures@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-3.2.0.tgz#625c18bd293c604dc4a8ddb2febf0c88341746af"
   integrity sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==
@@ -6666,11 +6694,6 @@ find-index@^0.1.1:
   resolved "https://registry.yarnpkg.com/find-index/-/find-index-0.1.1.tgz#675d358b2ca3892d795a1ab47232f8b6e2e0dde4"
   integrity sha1-Z101iyyjiS15Whq0cjL4tuLg3eQ=
 
-find-parent-dir@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/find-parent-dir/-/find-parent-dir-0.3.0.tgz#33c44b429ab2b2f0646299c5f9f718f376ff8d54"
-  integrity sha1-M8RLQpqysvBkYpnF+fcY83b/jVQ=
-
 find-replace@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/find-replace/-/find-replace-3.0.0.tgz#3e7e23d3b05167a76f770c9fbd5258b0def68c38"
@@ -6683,12 +6706,13 @@ find-root@^1.1.0:
   resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
   integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
 
-find-up@3.0.0, find-up@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
-  integrity sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==
+find-up@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
   dependencies:
-    locate-path "^3.0.0"
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
 
 find-up@^1.0.0:
   version "1.1.2"
@@ -6705,6 +6729,13 @@ find-up@^2.0.0, find-up@^2.1.0:
   dependencies:
     locate-path "^2.0.0"
 
+find-up@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
+  integrity sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==
+  dependencies:
+    locate-path "^3.0.0"
+
 find-up@^4.0.0, find-up@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
@@ -6766,12 +6797,10 @@ flat-cache@^3.0.4:
     flatted "^3.1.0"
     rimraf "^3.0.2"
 
-flat@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/flat/-/flat-4.1.0.tgz#090bec8b05e39cba309747f1d588f04dbaf98db2"
-  integrity sha512-Px/TiLIznH7gEDlPXcUD4KnBusa6kR6ayRUVcnEAbreRIuhkqow/mun59BuRXwoYk7ZQOLW1ZM05ilIvK38hFw==
-  dependencies:
-    is-buffer "~2.0.3"
+flat@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/flat/-/flat-5.0.2.tgz#8ca6fe332069ffa9d324c327198c598259ceb241"
+  integrity sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==
 
 flatted@^2.0.0:
   version "2.0.0"
@@ -6791,11 +6820,6 @@ flush-write-stream@^1.0.2:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-fn-name@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/fn-name/-/fn-name-2.0.1.tgz#5214d7537a4d06a4a301c0cc262feb84188002e7"
-  integrity sha1-UhTXU3pNBqSjAcDMJi/rhBiAAuc=
-
 follow-redirects@^1.0.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"
@@ -6892,11 +6916,6 @@ fsevents@^1.0.0, fsevents@^1.2.7:
     nan "^2.12.1"
     node-pre-gyp "^0.12.0"
 
-fsevents@~2.1.1:
-  version "2.1.3"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.3.tgz#fb738703ae8d2f9fe900c33836ddebee8b97f23e"
-  integrity sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==
-
 fsevents@~2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.1.2.tgz#4c0a1fb34bc68e543b4b82a9ec392bfbda840805"
@@ -6922,15 +6941,6 @@ fuse.js@^6.0.0:
   resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-6.0.0.tgz#6fc16cd7555648deda392892402d4188553552b2"
   integrity sha512-e5Ap6mhF/WQ9bKqsMFTTR5/DS9qbYab4VXHtMdxCanH+VZkdUV2LqcgMO31etSQv53NXsguQF1bdqkrrPAM2HQ==
 
-g-status@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/g-status/-/g-status-2.0.2.tgz#270fd32119e8fc9496f066fe5fe88e0a6bc78b97"
-  integrity sha512-kQoE9qH+T1AHKgSSD0Hkv98bobE90ILQcXAF4wvGgsr7uFqNvwmh8j+Lq3l0RVt3E3HjSbv2B9biEGcEtpHLCA==
-  dependencies:
-    arrify "^1.0.1"
-    matcher "^1.0.0"
-    simple-git "^1.85.0"
-
 gauge@~2.7.3:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
@@ -6955,7 +6965,7 @@ get-caller-file@^1.0.1:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.3.tgz#f978fa4c90d1dfe7ff2d6beda2a515e713bdcf4a"
   integrity sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==
 
-get-caller-file@^2.0.1:
+get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
@@ -7001,6 +7011,13 @@ get-stream@^4.0.0:
   dependencies:
     pump "^3.0.0"
 
+get-stream@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-5.2.0.tgz#4966a1795ee5ace65e706c4b7beb71257d6e22d3"
+  integrity sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==
+  dependencies:
+    pump "^3.0.0"
+
 get-stream@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-6.0.0.tgz#3e0012cb6827319da2706e601a1583e8629a6718"
@@ -7082,16 +7099,17 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
-glob-watcher@^5.0.0:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/glob-watcher/-/glob-watcher-5.0.3.tgz#88a8abf1c4d131eb93928994bc4a593c2e5dd626"
-  integrity sha512-8tWsULNEPHKQ2MR4zXuzSmqbdyV5PtwwCaWSGQ1WwHsJ07ilNeN1JB8ntxhckbnpSHaf9dXFUHzIWvm1I13dsg==
+glob-watcher@^5.0.3:
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/glob-watcher/-/glob-watcher-5.0.5.tgz#aa6bce648332924d9a8489be41e3e5c52d4186dc"
+  integrity sha512-zOZgGGEHPklZNjZQaZ9f41i7F2YwE+tS5ZHrDhbBCk3stwahn5vQxnFmBJZHoYdusR6R1bLSXeGUy/BhctwKzw==
   dependencies:
     anymatch "^2.0.0"
     async-done "^1.2.0"
     chokidar "^2.0.0"
     is-negated-glob "^1.0.0"
     just-debounce "^1.0.0"
+    normalize-path "^3.0.0"
     object.defaults "^1.1.0"
 
 glob2base@^0.0.12:
@@ -7101,7 +7119,19 @@ glob2base@^0.0.12:
   dependencies:
     find-index "^0.1.1"
 
-glob@7.1.3, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3:
+glob@7.1.6, glob@^7.1.6:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
+  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3:
   version "7.1.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.3.tgz#3960832d3f1574108342dafd3a67b332c0969df1"
   integrity sha512-vcfuiIxogLV4DlGBHIUOwI0IbrJ8HWPc4MU7HzviGeNho/UJDfi6B5p3sHeWIQ0KGIU0Jpxi5ZHxemQfLkkAwQ==
@@ -7125,18 +7155,6 @@ glob@^7.0.5:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.1.6:
-  version "7.1.6"
-  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
-  integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
-  dependencies:
-    fs.realpath "^1.0.0"
-    inflight "^1.0.4"
-    inherits "2"
-    minimatch "^3.0.4"
-    once "^1.3.0"
-    path-is-absolute "^1.0.0"
-
 global-modules@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/global-modules/-/global-modules-1.0.0.tgz#6d770f0eb523ac78164d72b5e71a8877265cc3ea"
@@ -7239,10 +7257,10 @@ growl@1.10.5:
   resolved "https://registry.yarnpkg.com/growl/-/growl-1.10.5.tgz#f2735dc2283674fa67478b10181059355c369e5e"
   integrity sha512-qBr4OuELkhPenW6goKVXiv47US3clb3/IbuWF9KNKEijAy9oeHxU9IgzjvJhHkUzhaj7rOUD7+YGWqUjLp5oSA==
 
-gulp-cli@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/gulp-cli/-/gulp-cli-2.1.0.tgz#2705143ae744c9e10d894ca621ce0a3933aa2e89"
-  integrity sha512-txzgdFVlEPShBZus6JJyGyKJoBVDq6Do0ZQgIgx5RAsmhNVTDjymmOxpQvo3c20m66FldilS68ZXj2Q9w5dKbA==
+gulp-cli@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/gulp-cli/-/gulp-cli-2.3.0.tgz#ec0d380e29e52aa45e47977f0d32e18fd161122f"
+  integrity sha512-zzGBl5fHo0EKSXsHzjspp3y5CONegCm8ErO5Qh0UzFzk2y4tMvzLWhoDokADbarfZRL2pGpRp7yt6gfJX4ph7A==
   dependencies:
     ansi-colors "^1.0.1"
     archy "^1.0.0"
@@ -7252,7 +7270,7 @@ gulp-cli@^2.0.0:
     copy-props "^2.0.1"
     fancy-log "^1.3.2"
     gulplog "^1.0.0"
-    interpret "^1.1.0"
+    interpret "^1.4.0"
     isobject "^3.0.1"
     liftoff "^3.1.0"
     matchdep "^2.0.0"
@@ -7260,7 +7278,7 @@ gulp-cli@^2.0.0:
     pretty-hrtime "^1.0.0"
     replace-homedir "^1.0.0"
     semver-greatest-satisfied-range "^1.1.0"
-    v8flags "^3.0.1"
+    v8flags "^3.2.0"
     yargs "^7.1.0"
 
 gulp-foreach@^0.1.0:
@@ -7328,14 +7346,14 @@ gulp-zopfli-green@^3.0.1:
     stream-to-array "^2.0.2"
     through2 "^3.0.0"
 
-gulp@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/gulp/-/gulp-4.0.0.tgz#95766c601dade4a77ed3e7b2b6dc03881b596366"
-  integrity sha1-lXZsYB2t5Kd+0+eyttwDiBtZY2Y=
+gulp@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/gulp/-/gulp-4.0.2.tgz#543651070fd0f6ab0a0650c6a3e6ff5a7cb09caa"
+  integrity sha512-dvEs27SCZt2ibF29xYgmnwwCYZxdxhQ/+LFWlbAW8y7jt68L/65402Lz3+CKy0Ov4rOs+NERmDq7YlZaDqUIfA==
   dependencies:
-    glob-watcher "^5.0.0"
-    gulp-cli "^2.0.0"
-    undertaker "^1.0.0"
+    glob-watcher "^5.0.3"
+    gulp-cli "^2.2.0"
+    undertaker "^1.2.1"
     vinyl-fs "^3.0.0"
 
 gulplog@^1.0.0:
@@ -7454,10 +7472,10 @@ he@1.2.0, he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-hls.js@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/hls.js/-/hls.js-1.0.1.tgz#d92bd0a9c78760f0f0e90d53c60192800ebc629f"
-  integrity sha512-ElPUW9VMY2uXdX07N872BSrVUcVd4jZGav4nqlY3vinpdMpW8esmdpUaeVA5vv3oIRSmiC/XtL9K+mSt6rlBpA==
+hls.js@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/hls.js/-/hls.js-1.0.4.tgz#1b191f0f49c992e5c22d4a648ac73630d13d3c2e"
+  integrity sha512-sTea9L0ORE9u5dThUjEhDP4t9YzakEYRyMHEYQctaLZf2X9ihjmUbqKneExQWHXZz2cYQs5ihaKUe8QnrQDp7Q==
 
 hmac-drbg@^1.0.1:
   version "1.0.1"
@@ -7468,10 +7486,10 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-home-assistant-js-websocket@^5.9.0:
-  version "5.9.0"
-  resolved "https://registry.yarnpkg.com/home-assistant-js-websocket/-/home-assistant-js-websocket-5.9.0.tgz#85f73cc7aa23362e93d7e8208026fbcf25934022"
-  integrity sha512-HSAhX+s2JgsE77sYKKqcNsukiO6Zm4CcCIwugq17MwHcEyLoecChsbQtgtbvg1dHctUAk+IHxuZ0JBx10B1YGQ==
+home-assistant-js-websocket@^5.10.0:
+  version "5.10.0"
+  resolved "https://registry.yarnpkg.com/home-assistant-js-websocket/-/home-assistant-js-websocket-5.10.0.tgz#b59fd4f20a8295571b1a2589530c995d0d910c49"
+  integrity sha512-QiK26d62wuQCuaXHRZ90yvaMXeHkYbQrSGQvCrF6hqxdibLXEwSXQM2uzWYUgP25Q3iKy3PLQspMBRnuBKczbQ==
 
 homedir-polyfill@^1.0.1:
   version "1.0.3"
@@ -7481,9 +7499,9 @@ homedir-polyfill@^1.0.1:
     parse-passwd "^1.0.0"
 
 hosted-git-info@^2.1.4:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.7.1.tgz#97f236977bd6e125408930ff6de3eec6281ec047"
-  integrity sha512-7T/BxH19zbcCTa8XkMlbK5lTo1WtgkFi3GvdWEyNuc4Vex7/9Dqbnpsf4JMydcfj9HCg4zUWFTL3Za6lapg5/w==
+  version "2.8.9"
+  resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9"
+  integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
 
 hpack.js@^2.1.6:
   version "2.1.6"
@@ -7603,6 +7621,11 @@ https-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
   integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
+human-signals@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-1.1.1.tgz#c5b1cd14f50aeae09ab6c59fe63ba3395fe4dfa3"
+  integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
+
 human-signals@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
@@ -7631,10 +7654,10 @@ iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
-idb-keyval@^3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/idb-keyval/-/idb-keyval-3.2.0.tgz#cbbf354deb5684b6cdc84376294fc05932845bd6"
-  integrity sha512-slx8Q6oywCCSfKgPgL0sEsXtPVnSbTLWpyiDcu6msHOyKOLari1TD1qocXVCft80umnkk3/Qqh3lwoFt8T/BPQ==
+idb-keyval@^5.0.5:
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/idb-keyval/-/idb-keyval-5.0.5.tgz#1b02984dcf42ad4aa290bf9f10935b485419df34"
+  integrity sha512-cqi65rrjhgPExI9vmSU7VcYEbHCUfIBY+9YUWxyr0PyGizptFgGFnvZQ0w+tqOXk1lUcGCZGVLfabf7QnR2S0g==
 
 ieee754@^1.1.4:
   version "1.1.13"
@@ -7715,10 +7738,10 @@ indent-string@^2.1.0:
   dependencies:
     repeating "^2.0.0"
 
-indent-string@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
-  integrity sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=
+indent-string@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
+  integrity sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==
 
 indexof@0.0.1:
   version "0.0.1"
@@ -7780,12 +7803,7 @@ internal-ip@^4.3.0:
     default-gateway "^4.2.0"
     ipaddr.js "^1.9.0"
 
-interpret@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
-  integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
-
-interpret@^1.2.0:
+interpret@^1.2.0, interpret@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
   integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
@@ -7795,28 +7813,14 @@ interpret@^2.2.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-2.2.0.tgz#1a78a0b5965c40a5416d007ad6f50ad27c417df9"
   integrity sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==
 
-intl-format-cache@^4.2.26:
-  version "4.2.26"
-  resolved "https://registry.yarnpkg.com/intl-format-cache/-/intl-format-cache-4.2.26.tgz#ba5e2ee6cec25217f688b68ecdd58eec3703a827"
-  integrity sha512-RalEzK89R3rJrOo7vcGY8h1WLypF1ZRQQldIsrQM6FTEPixvHb+pAEhd2QkdUk972hFjAEBJR02GdHhaEw9v2g==
+intl-messageformat@^9.6.16:
+  version "9.6.16"
+  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-9.6.16.tgz#2e44203f391632468256de873b99945a37417881"
+  integrity sha512-EdsdT0izNWH2MTTAXzOJHvv6w14Y9hyjWop8V38SukbAWcMz9CATp6qQC3x7n3U5xYUhWWDHFP0SEuz/rp33+w==
   dependencies:
-    "@types/chai" "^4.2.11"
-    chai "^4.2.0"
-
-intl-messageformat-parser@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/intl-messageformat-parser/-/intl-messageformat-parser-5.0.2.tgz#878c0d66459b366f4135a812007a873789875b95"
-  integrity sha512-7logOIMKQX4cWTAGdMSPdlzlGG2aGcpdTr/Laroi3/LTgXvYqMQ8fbC7DolygSEWUxbYrzDIuQsoQGJO6Kp8Gg==
-  dependencies:
-    "@formatjs/intl-unified-numberformat" "^3.3.5"
-
-intl-messageformat@^8.3.9:
-  version "8.3.9"
-  resolved "https://registry.yarnpkg.com/intl-messageformat/-/intl-messageformat-8.3.9.tgz#fa57e6f5abdd4b5ad03dd767c965435bd38cbd78"
-  integrity sha512-WHIopaMiZ14UJ76d14FfqbeNE3knGJT7pJg6eJVxh1G5ziL656BqfQk6dYxPZ2VvoaY7wnT3dLlIXy1MTE0blw==
-  dependencies:
-    intl-format-cache "^4.2.26"
-    intl-messageformat-parser "^5.0.2"
+    "@formatjs/fast-memoize" "1.1.1"
+    "@formatjs/icu-messageformat-parser" "2.0.4"
+    tslib "^2.1.0"
 
 into-stream@^4.0.0:
   version "4.0.0"
@@ -7909,21 +7913,11 @@ is-buffer@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
-is-buffer@~2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.3.tgz#4ecf3fcf749cbd1e472689e109ac66261a25e725"
-  integrity sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==
-
 is-callable@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
   integrity sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==
 
-is-callable@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
-  integrity sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==
-
 is-callable@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.3.tgz#8b1e0500b73a1d76c70487636f368e519de8db8e"
@@ -8135,30 +8129,11 @@ is-obj@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f"
   integrity sha1-PkcprB9f3gJc19g6iW2rn09n2w8=
 
-is-observable@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-observable/-/is-observable-1.1.0.tgz#b3e986c8f44de950867cab5403f5a3465005975e"
-  integrity sha512-NqCa4Sa2d+u7BWc6CukaObG3Fh+CU9bvixbpcXYhy2VvYS7vVGIdAgnIS5Ks3A/cqk4rebLJ9s8zBstT2aKnIA==
-  dependencies:
-    symbol-observable "^1.1.0"
-
-is-path-cwd@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-1.0.0.tgz#d225ec23132e89edd38fda767472e62e65f1106d"
-  integrity sha1-0iXsIxMuie3Tj9p2dHLmLmXxEG0=
-
 is-path-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-path-cwd/-/is-path-cwd-2.0.0.tgz#d4777a8e227a00096a31f030db3770f84b116c02"
   integrity sha512-m5dHHzpOXEiv18JEORttBO64UgTEypx99vCxQLjbBvGhOJxnTNglYoFXxwo6AbsQb79sqqycQEHv2hWkHZAijA==
 
-is-path-in-cwd@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-1.0.1.tgz#5ac48b345ef675339bd6c7a48a912110b241cf52"
-  integrity sha512-FjV1RTW48E7CWM7eE/J2NJvAEEVektecDBVBE5Hh3nM1Jd0kvhHtX68Pr3xsDf857xt3Y4AkwVULK1Vku62aaQ==
-  dependencies:
-    is-path-inside "^1.0.0"
-
 is-path-in-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/is-path-in-cwd/-/is-path-in-cwd-2.0.0.tgz#68e452a6eec260500cec21e029c0a44cc0dcd2ea"
@@ -8173,6 +8148,11 @@ is-path-inside@^1.0.0:
   dependencies:
     path-is-inside "^1.0.1"
 
+is-plain-obj@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
+  integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==
+
 is-plain-object@^2.0.1, is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
@@ -8207,13 +8187,6 @@ is-reference@^1.1.2:
   dependencies:
     "@types/estree" "0.0.39"
 
-is-regex@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.0.5.tgz#39d589a358bf18967f726967120b8fc1aed74eae"
-  integrity sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==
-  dependencies:
-    has "^1.0.3"
-
 is-regex@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.1.2.tgz#81c8ebde4db142f2cf1c53fc86d6a45788266251"
@@ -8270,6 +8243,11 @@ is-unc-path@^1.0.0:
   dependencies:
     unc-path-regex "^0.1.2"
 
+is-unicode-supported@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz#3f26c76a809593b52bfa2ecb5710ed2779b522a7"
+  integrity sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==
+
 is-utf8@^0.2.0, is-utf8@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
@@ -8366,7 +8344,14 @@ js-tokens@^4.0.0:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
 
-js-yaml@3.13.1, js-yaml@^3.13.0, js-yaml@^3.13.1:
+js-yaml@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.0.0.tgz#f426bc0ff4b4051926cd588c71113183409a121f"
+  integrity sha512-pqon0s+4ScYUvX30wxQi3PogGFAlUyH0awepWvwkj4jD4v+ova3RiYw8bmA6x2rDrEaj8i/oWKoRxpVNW+Re8Q==
+  dependencies:
+    argparse "^2.0.1"
+
+js-yaml@^3.13.0, js-yaml@^3.13.1:
   version "3.13.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
   integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
@@ -8374,6 +8359,13 @@ js-yaml@3.13.1, js-yaml@^3.13.0, js-yaml@^3.13.1:
     argparse "^1.0.7"
     esprima "^4.0.0"
 
+js-yaml@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
+  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
+  dependencies:
+    argparse "^2.0.1"
+
 jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
@@ -8389,6 +8381,11 @@ json-parse-better-errors@^1.0.1, json-parse-better-errors@^1.0.2:
   resolved "https://registry.yarnpkg.com/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz#bb867cfb3450e69107c131d1c514bab3dc8bcaa9"
   integrity sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==
 
+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz#7c47805a94319928e05777405dc12e1f7a4ee02d"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
 json-schema-traverse@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
@@ -8598,10 +8595,10 @@ leaflet-draw@^1.0.4:
   resolved "https://registry.yarnpkg.com/leaflet-draw/-/leaflet-draw-1.0.4.tgz#45be92f378ed253e7202fdeda1fcc71885198d46"
   integrity sha512-rsQ6saQO5ST5Aj6XRFylr5zvarWgzWnrg46zQ1MEOEIHsppdC/8hnN8qMoFvACsPvTioAuysya/TVtog15tyAQ==
 
-leaflet@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.4.0.tgz#d5f56eeb2aa32787c24011e8be4c77e362ae171b"
-  integrity sha512-x9j9tGY1+PDLN9pcWTx9/y6C5nezoTMB8BLK5jTakx+H7bPlnbCHfi9Hjg+Qt36sgDz/cb9lrSpNQXmk45Tvhw==
+leaflet@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.7.1.tgz#10d684916edfe1bf41d688a3b97127c0322a2a19"
+  integrity sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==
 
 leven@^3.1.0:
   version "3.1.0"
@@ -8650,80 +8647,46 @@ liftoff@^3.1.0:
     rechoir "^0.6.2"
     resolve "^1.1.7"
 
-lint-staged@^8.1.5:
-  version "8.1.5"
-  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-8.1.5.tgz#372476fe1a58b8834eb562ed4c99126bd60bdd79"
-  integrity sha512-e5ZavfnSLcBJE1BTzRTqw6ly8OkqVyO3GL2M6teSmTBYQ/2BuueD5GIt2RPsP31u/vjKdexUyDCxSyK75q4BDA==
+lines-and-columns@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
+  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
+
+lint-staged@^10.5.4:
+  version "10.5.4"
+  resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-10.5.4.tgz#cd153b5f0987d2371fc1d2847a409a2fe705b665"
+  integrity sha512-EechC3DdFic/TdOPgj/RB3FicqE6932LTHCUm0Y2fsD9KGlLB+RwJl2q1IYBIvEsKzDOgn0D4gll+YxG5RsrKg==
   dependencies:
-    chalk "^2.3.1"
-    commander "^2.14.1"
-    cosmiconfig "^5.0.2"
-    debug "^3.1.0"
+    chalk "^4.1.0"
+    cli-truncate "^2.1.0"
+    commander "^6.2.0"
+    cosmiconfig "^7.0.0"
+    debug "^4.2.0"
     dedent "^0.7.0"
-    del "^3.0.0"
-    execa "^1.0.0"
-    find-parent-dir "^0.3.0"
-    g-status "^2.0.2"
-    is-glob "^4.0.0"
-    is-windows "^1.0.2"
-    listr "^0.14.2"
-    listr-update-renderer "^0.5.0"
-    lodash "^4.17.11"
-    log-symbols "^2.2.0"
-    micromatch "^3.1.8"
-    npm-which "^3.0.1"
-    p-map "^1.1.1"
-    path-is-inside "^1.0.2"
-    pify "^3.0.0"
-    please-upgrade-node "^3.0.2"
-    staged-git-files "1.1.2"
-    string-argv "^0.0.2"
-    stringify-object "^3.2.2"
-    yup "^0.26.10"
+    enquirer "^2.3.6"
+    execa "^4.1.0"
+    listr2 "^3.2.2"
+    log-symbols "^4.0.0"
+    micromatch "^4.0.2"
+    normalize-path "^3.0.0"
+    please-upgrade-node "^3.2.0"
+    string-argv "0.3.1"
+    stringify-object "^3.3.0"
 
-listr-silent-renderer@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/listr-silent-renderer/-/listr-silent-renderer-1.1.1.tgz#924b5a3757153770bf1a8e3fbf74b8bbf3f9242e"
-  integrity sha1-kktaN1cVN3C/Go4/v3S4u/P5JC4=
-
-listr-update-renderer@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/listr-update-renderer/-/listr-update-renderer-0.5.0.tgz#4ea8368548a7b8aecb7e06d8c95cb45ae2ede6a2"
-  integrity sha512-tKRsZpKz8GSGqoI/+caPmfrypiaq+OQCbd+CovEC24uk1h952lVj5sC7SqyFUm+OaJ5HN/a1YLt5cit2FMNsFA==
+listr2@^3.2.2:
+  version "3.8.2"
+  resolved "https://registry.yarnpkg.com/listr2/-/listr2-3.8.2.tgz#99b138ad1cfb08f1b0aacd422972e49b2d814b99"
+  integrity sha512-E28Fw7Zd3HQlCJKzb9a8C8M0HtFWQeucE+S8YrSrqZObuCLPRHMRrR8gNmYt65cU9orXYHwvN5agXC36lYt7VQ==
   dependencies:
-    chalk "^1.1.3"
-    cli-truncate "^0.2.1"
-    elegant-spinner "^1.0.1"
-    figures "^1.7.0"
-    indent-string "^3.0.0"
-    log-symbols "^1.0.2"
-    log-update "^2.3.0"
-    strip-ansi "^3.0.1"
-
-listr-verbose-renderer@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/listr-verbose-renderer/-/listr-verbose-renderer-0.5.0.tgz#f1132167535ea4c1261102b9f28dac7cba1e03db"
-  integrity sha512-04PDPqSlsqIOaaaGZ+41vq5FejI9auqTInicFRndCBgE3bXG8D6W1I+mWhk+1nqbHmyhla/6BUrd5OSiHwKRXw==
-  dependencies:
-    chalk "^2.4.1"
-    cli-cursor "^2.1.0"
-    date-fns "^1.27.2"
-    figures "^2.0.0"
-
-listr@^0.14.2:
-  version "0.14.3"
-  resolved "https://registry.yarnpkg.com/listr/-/listr-0.14.3.tgz#2fea909604e434be464c50bddba0d496928fa586"
-  integrity sha512-RmAl7su35BFd/xoMamRjpIE4j3v+L28o8CT5YhAXQJm1fD+1l9ngXY8JAQRJ+tFK2i5njvi0iRUKV09vPwA0iA==
-  dependencies:
-    "@samverschueren/stream-to-observable" "^0.3.0"
-    is-observable "^1.1.0"
-    is-promise "^2.1.0"
-    is-stream "^1.1.0"
-    listr-silent-renderer "^1.1.1"
-    listr-update-renderer "^0.5.0"
-    listr-verbose-renderer "^0.5.0"
-    p-map "^2.0.0"
-    rxjs "^6.3.3"
+    chalk "^4.1.1"
+    cli-truncate "^2.1.0"
+    figures "^3.2.0"
+    indent-string "^4.0.0"
+    log-update "^4.0.0"
+    p-map "^4.0.0"
+    rxjs "^6.6.7"
+    through "^2.3.8"
+    wrap-ansi "^7.0.0"
 
 lit-analyzer@1.2.1, lit-analyzer@^1.2.1:
   version "1.2.1"
@@ -8739,28 +8702,36 @@ lit-analyzer@1.2.1, lit-analyzer@^1.2.1:
     vscode-html-languageservice "3.1.0"
     web-component-analyzer "~1.1.1"
 
-lit-element@2.5.0, lit-element@^2.0.0, lit-element@^2.2.1, lit-element@^2.3.0, lit-element@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.5.0.tgz#218773185d30cab8cb7baabcddd9182f6e7bc14b"
-  integrity sha512-SS6Bmm7FYw/RVeD6YD3gAjrT0ss6rOQHaacUnDCyVE3sDuUpEmr+Gjl0QUHnD8+0mM5apBbnA60NkFJ2kqcOMA==
+lit-element@3.0.0-rc.2, lit-element@^2.2.1, lit-element@^2.5.0, lit-element@^3.0.0-rc.2:
+  version "3.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-3.0.0-rc.2.tgz#883d0b6fd7b846226d360699d1b713da5fc7e1b7"
+  integrity sha512-2Z7DabJ3b5K+p5073vFjMODoaWqy5PIaI4y6ADKm+fCGc8OnX9fU9dMoUEBZjFpd/bEFR9PBp050tUtBnT9XTQ==
   dependencies:
-    lit-html "^1.1.1"
+    "@lit/reactive-element" "^1.0.0-rc.2"
+    lit-html "^2.0.0-rc.3"
 
-lit-html@1.4.0, lit-html@^1.0.0, lit-html@^1.1.1, lit-html@^1.1.2, lit-html@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.4.0.tgz#5f18c08d11b52b1d01ceb263df42f115aecef5ca"
-  integrity sha512-cgaqPSgqHRaTH/P1DnWD/dQxudtrHqD0xo1AoyOGJZir2rXgsvTg77z6Pitwk9B+kL23EakD62HV3x8sT01aWQ==
-
-lit-virtualizer@^0.4.2:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/lit-virtualizer/-/lit-virtualizer-0.4.2.tgz#8c66e26c0e50cd8e3fc7f2dfeab932967b40050a"
-  integrity sha512-aytx/Qym8h7eIh3u17oT2FfgmhOixnk4IuJAOMIbA6E8szkbpnKUDSLDWlN9ihQyCb0eijV213P+4mlekOWKxA==
+lit-html@2.0.0-rc.3, lit-html@^1.4.0, lit-html@^2.0.0-rc.3:
+  version "2.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-2.0.0-rc.3.tgz#1c216e548630e18d3093d97f4e29563abce659af"
+  integrity sha512-Y6P8LlAyQuqvzq6l/Nc4z5/P5M/rVLYKQIRxcNwSuGajK0g4kbcBFQqZmgvqKG+ak+dHZjfm2HUw9TF5N/pkCw==
   dependencies:
-    event-target-shim "^5.0.1"
-    lit-element "^2.0.0"
-    lit-html "^1.0.0"
-    resize-observer-polyfill "^1.5.1"
-    tslib "^1.10.0"
+    "@types/trusted-types" "^1.0.1"
+
+lit-vaadin-helpers@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/lit-vaadin-helpers/-/lit-vaadin-helpers-0.1.3.tgz#6230ffdb90f7808d087107f18e83f14d64f0f5d5"
+  integrity sha512-fEUJEVzC1IluUbOOExBYuwal/DyhZqheIvtDV/Tlnmbq1NFtIjgybFQuFNXAyHDaaVwuKDijTGP1c3wwf9rg8w==
+  dependencies:
+    lit "^2.0.0-rc.1"
+
+lit@^2.0.0-rc.1, lit@^2.0.0-rc.2:
+  version "2.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/lit/-/lit-2.0.0-rc.2.tgz#724a2d621aa098001d73bf7106f3a72b7b5948ef"
+  integrity sha512-BOCuoJR04WaTV8UqTKk09cNcQA10Aq2LCcBOiHuF7TzWH5RNDsbCBP5QM9sLBSotGTXbDug/gFO08jq6TbyEtw==
+  dependencies:
+    "@lit/reactive-element" "^1.0.0-rc.2"
+    lit-element "^3.0.0-rc.2"
+    lit-html "^2.0.0-rc.3"
 
 load-bmfont@^1.3.1:
   version "1.4.0"
@@ -8843,6 +8814,13 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+locate-path@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
+  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
+  dependencies:
+    p-locate "^5.0.0"
+
 lodash._escapehtmlchar@~2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/lodash._escapehtmlchar/-/lodash._escapehtmlchar-2.4.1.tgz#df67c3bb6b7e8e1e831ab48bfa0795b92afe899d"
@@ -8875,7 +8853,7 @@ lodash._reinterpolate@^2.4.1, lodash._reinterpolate@~2.4.1:
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-2.4.1.tgz#4f1227aa5a8711fc632f5b07a1f4607aab8b3222"
   integrity sha1-TxInqlqHEfxjL1sHofRgequLMiI=
 
-lodash._reinterpolate@^3.0.0, lodash._reinterpolate@~3.0.0:
+lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
@@ -8937,6 +8915,11 @@ lodash.flatten@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f"
   integrity sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8=
 
+lodash.get@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
+  integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
+
 lodash.isobject@~2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/lodash.isobject/-/lodash.isobject-2.4.1.tgz#5a2e47fe69953f1ee631a7eba1fe64d2d06558f5"
@@ -8985,11 +8968,11 @@ lodash.template@^4.5.0:
     lodash.templatesettings "^4.0.0"
 
 lodash.templatesettings@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz#2b4d4e95ba440d915ff08bc899e4553666713316"
-  integrity sha1-K01OlbpEDZFf8IvImeRVNmZxMxY=
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz#e481310f049d3cf6d47e912ad09313b154f0fb33"
+  integrity sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==
   dependencies:
-    lodash._reinterpolate "~3.0.0"
+    lodash._reinterpolate "^3.0.0"
 
 lodash.templatesettings@~2.4.1:
   version "2.4.1"
@@ -9011,66 +8994,48 @@ lodash.values@~2.4.1:
   dependencies:
     lodash.keys "~2.4.1"
 
-lodash@^4.17.10:
-  version "4.17.11"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
-  integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
-
-lodash@^4.17.11, lodash@^4.17.20, lodash@^4.17.21:
+lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-lodash@^4.17.14, lodash@^4.17.15:
-  version "4.17.15"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
-  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
-
-log-symbols@3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-3.0.0.tgz#f3a08516a5dea893336a7dee14d18a1cfdab77c4"
-  integrity sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==
+log-symbols@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.0.0.tgz#69b3cc46d20f448eccdb75ea1fa733d9e821c920"
+  integrity sha512-FN8JBzLx6CzeMrB0tg6pqlGU1wCrXW+ZXGH481kfsBqer0hToTIiHdjH4Mq8xJUbvATujKCvaREGWpGUionraA==
   dependencies:
-    chalk "^2.4.2"
+    chalk "^4.0.0"
 
-log-symbols@^1.0.0, log-symbols@^1.0.2:
+log-symbols@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
   integrity sha1-N2/3tY6jCGoPCfrMdGF+ylAeGhg=
   dependencies:
     chalk "^1.0.0"
 
-log-symbols@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a"
-  integrity sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==
+log-symbols@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.1.0.tgz#3fbdbb95b4683ac9fc785111e792e558d4abd503"
+  integrity sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==
   dependencies:
-    chalk "^2.0.1"
+    chalk "^4.1.0"
+    is-unicode-supported "^0.1.0"
 
-log-update@^2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/log-update/-/log-update-2.3.0.tgz#88328fd7d1ce7938b29283746f0b1bc126b24708"
-  integrity sha1-iDKP19HOeTiykoN0bwsbwSayRwg=
+log-update@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/log-update/-/log-update-4.0.0.tgz#589ecd352471f2a1c0c570287543a64dfd20e0a1"
+  integrity sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==
   dependencies:
-    ansi-escapes "^3.0.0"
-    cli-cursor "^2.0.0"
-    wrap-ansi "^3.0.1"
+    ansi-escapes "^4.3.0"
+    cli-cursor "^3.1.0"
+    slice-ansi "^4.0.0"
+    wrap-ansi "^6.2.0"
 
 loglevel@^1.6.8:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.7.0.tgz#728166855a740d59d38db01cf46f042caa041bb0"
   integrity sha512-i2sY04nal5jDcagM3FMfG++T69GEEM8CYuOfeOIvmXzOIcwE9a/CJPR0MFM97pYMj/u10lzz7/zd7+qwhrBTqQ==
 
-lolex@^2.3.2:
-  version "2.7.5"
-  resolved "https://registry.yarnpkg.com/lolex/-/lolex-2.7.5.tgz#113001d56bfc7e02d56e36291cc5c413d1aa0733"
-  integrity sha512-l9x0+1offnKKIzYVjyXU2SiwhXDLekRzKyhnbyldPHvC7BvLPVpdNUNR2KeMAiCN2D/kLNttZgQD5WjSxuBx3Q==
-
-lolex@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/lolex/-/lolex-3.1.0.tgz#1a7feb2fefd75b3e3a7f79f0e110d9476e294434"
-  integrity sha512-zFo5MgCJ0rZ7gQg69S4pqBsLURbFw11X68C18OcJjJQbqaXm2NoTrGl1IMM3TIz0/BnN1tIs2tzmmqvCsOMMjw==
-
 loud-rejection@^1.0.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/loud-rejection/-/loud-rejection-1.6.0.tgz#5b46f80147edee578870f086d04821cf998e551f"
@@ -9155,10 +9120,10 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
-marked@2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-2.0.0.tgz#9662bbcb77ebbded0662a7be66ff929a8611cee5"
-  integrity sha512-NqRSh2+LlN2NInpqTQnS614Y/3NkVMFFU6sJlRFEpxJ/LHuK/qJECH7/fXZjk4VZstPW/Pevjil/VtSONsLc7Q==
+marked@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-2.0.5.tgz#2d15c759b9497b0e7b5b57f4c2edabe1002ef9e7"
+  integrity sha512-yfCEUXmKhBPLOzEC7c+tc4XZdIeTdGoRCZakFMkCxodr7wDXqoapIME4wjcpBPJLNyUnKJ3e8rb8wlAgnLnaDw==
 
 matchdep@^2.0.0:
   version "2.0.0"
@@ -9170,13 +9135,6 @@ matchdep@^2.0.0:
     resolve "^1.4.0"
     stack-trace "0.0.10"
 
-matcher@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/matcher/-/matcher-1.1.1.tgz#51d8301e138f840982b338b116bb0c09af62c1c2"
-  integrity sha512-+BmqxWIubKTRKNWx/ahnCkk3mG8m7OturVlqq6HiojGJTd5hVYbgZm6WzcYPCoB+KBT4Vd6R7WSRG2OADNaCjg==
-  dependencies:
-    escape-string-regexp "^1.0.4"
-
 math-random@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.4.tgz#5dd6943c938548267016d4e34f057583080c514c"
@@ -9201,10 +9159,10 @@ media-typer@0.3.0:
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
-memoize-one@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.2.tgz#6aba5276856d72fb44ead3efab86432f94ba203d"
-  integrity sha512-o7lldN4fs/axqctc03NF+PMhd2veRrWeJ2n2GjEzUPBD4F9rmNg4A+bQCACIzwjHJEXuYv4aFFMaH35KZfHUrw==
+memoize-one@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+  integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
 
 memory-fs@^0.2.0:
   version "0.2.0"
@@ -9281,7 +9239,7 @@ micromatch@^2.1.5:
     parse-glob "^3.0.4"
     regex-cache "^0.4.2"
 
-micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4, micromatch@^3.1.8:
+micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4:
   version "3.1.10"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
   integrity sha512-MWikgl9n9M3w+bpsY3He8L+w9eF9338xRl8IAO5viDizwSzziFEyUzo2xrrloB64ADbTf8uA8vRqqttDTOmccg==
@@ -9374,11 +9332,6 @@ mime@^2.4.4:
   resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.4.tgz#bd7b91135fc6b01cde3e9bae33d659b63d8857e5"
   integrity sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA==
 
-mimic-fn@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
-  integrity sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==
-
 mimic-fn@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
@@ -9451,13 +9404,6 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mkdirp@0.5.5, mkdirp@^0.5.3, mkdirp@^0.5.5:
-  version "0.5.5"
-  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
-  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
-  dependencies:
-    minimist "^1.2.5"
-
 mkdirp@^0.5.0, mkdirp@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.1.tgz#30057438eac6cf7f8c4767f38648d6697d75c903"
@@ -9465,37 +9411,45 @@ mkdirp@^0.5.0, mkdirp@^0.5.1:
   dependencies:
     minimist "0.0.8"
 
-mocha@^7.2.0:
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/mocha/-/mocha-7.2.0.tgz#01cc227b00d875ab1eed03a75106689cfed5a604"
-  integrity sha512-O9CIypScywTVpNaRrCAgoUnJgozpIofjKUYmJhiCIJMiuYnLI6otcb1/kpW9/n/tJODHGZ7i8aLQoDVsMtOKQQ==
+mkdirp@^0.5.3, mkdirp@^0.5.5:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
+  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
   dependencies:
-    ansi-colors "3.2.3"
+    minimist "^1.2.5"
+
+mocha@^8.4.0:
+  version "8.4.0"
+  resolved "https://registry.yarnpkg.com/mocha/-/mocha-8.4.0.tgz#677be88bf15980a3cae03a73e10a0fc3997f0cff"
+  integrity sha512-hJaO0mwDXmZS4ghXsvPVriOhsxQ7ofcpQdm8dE+jISUOKopitvnXFQmpRR7jd2K6VBG6E26gU3IAbXXGIbu4sQ==
+  dependencies:
+    "@ungap/promise-all-settled" "1.1.2"
+    ansi-colors "4.1.1"
     browser-stdout "1.3.1"
-    chokidar "3.3.0"
-    debug "3.2.6"
-    diff "3.5.0"
-    escape-string-regexp "1.0.5"
-    find-up "3.0.0"
-    glob "7.1.3"
+    chokidar "3.5.1"
+    debug "4.3.1"
+    diff "5.0.0"
+    escape-string-regexp "4.0.0"
+    find-up "5.0.0"
+    glob "7.1.6"
     growl "1.10.5"
     he "1.2.0"
-    js-yaml "3.13.1"
-    log-symbols "3.0.0"
+    js-yaml "4.0.0"
+    log-symbols "4.0.0"
     minimatch "3.0.4"
-    mkdirp "0.5.5"
-    ms "2.1.1"
-    node-environment-flags "1.0.6"
-    object.assign "4.1.0"
-    strip-json-comments "2.0.1"
-    supports-color "6.0.0"
-    which "1.3.1"
+    ms "2.1.3"
+    nanoid "3.1.20"
+    serialize-javascript "5.0.1"
+    strip-json-comments "3.1.1"
+    supports-color "8.1.1"
+    which "2.0.2"
     wide-align "1.1.3"
-    yargs "13.3.2"
-    yargs-parser "13.1.2"
-    yargs-unparser "1.6.0"
+    workerpool "6.1.0"
+    yargs "16.2.0"
+    yargs-parser "20.2.4"
+    yargs-unparser "2.0.0"
 
-moment@^2.10.2, moment@^2.22.0:
+moment@^2.10.2:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
   integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
@@ -9515,7 +9469,7 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-ms@^2.1.1:
+ms@2.1.3, ms@^2.1.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
@@ -9564,6 +9518,11 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.13.2.tgz#f51dc7ae66ba7d5d55e1e6d4d8092e802c9aefe7"
   integrity sha512-TghvYc72wlMGMVMluVo9WRJc0mB8KxxF/gZ4YYFy7V2ZQX9l7rgbPg7vjS9mt6U5HXODVFVI2bOduCzwOMv/lw==
 
+nanoid@3.1.20:
+  version "3.1.20"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.20.tgz#badc263c6b1dcf14b71efaa85f6ab4c1d6cfc788"
+  integrity sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw==
+
 nanoid@^3.0.1:
   version "3.1.9"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.9.tgz#1f148669c70bb2072dc5af0666e46edb6cd31fb2"
@@ -9625,15 +9584,15 @@ nice-try@^1.0.4:
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
-nise@^1.4.10:
-  version "1.4.10"
-  resolved "https://registry.yarnpkg.com/nise/-/nise-1.4.10.tgz#ae46a09a26436fae91a38a60919356ae6db143b6"
-  integrity sha512-sa0RRbj53dovjc7wombHmVli9ZihXbXCQ2uH3TNm03DyvOSIQbxg+pbqDKrk2oxMK1rtLGVlKxcB9rrc6X5YjA==
+nise@^5.0.4:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/nise/-/nise-5.1.0.tgz#713ef3ed138252daef20ec035ab62b7a28be645c"
+  integrity sha512-W5WlHu+wvo3PaKLsJJkgPup2LrsXCcm7AWwyNZkUnn5rwPkuPBi3Iwk5SQtN0mv+K65k7nKKjwNQ30wg3wLAQQ==
   dependencies:
-    "@sinonjs/formatio" "^3.1.0"
+    "@sinonjs/commons" "^1.7.0"
+    "@sinonjs/fake-timers" "^7.0.4"
     "@sinonjs/text-encoding" "^0.7.1"
     just-extend "^4.0.2"
-    lolex "^2.3.2"
     path-to-regexp "^1.7.0"
 
 no-case@^2.2.0:
@@ -9643,14 +9602,6 @@ no-case@^2.2.0:
   dependencies:
     lower-case "^1.1.1"
 
-node-environment-flags@1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/node-environment-flags/-/node-environment-flags-1.0.6.tgz#a30ac13621f6f7d674260a54dede048c3982c088"
-  integrity sha512-5Evy2epuL+6TM0lCQGpFIj6KwiEsGh1SrHUhTbNX+sLbBtjidPZFAnVK9y5yU1+h//RitLbRHTIMyxQPtxMdHw==
-  dependencies:
-    object.getownpropertydescriptors "^2.0.3"
-    semver "^5.7.0"
-
 node-forge@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3"
@@ -9769,13 +9720,6 @@ npm-packlist@^1.1.6:
     ignore-walk "^3.0.1"
     npm-bundled "^1.0.1"
 
-npm-path@^2.0.2:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/npm-path/-/npm-path-2.0.4.tgz#c641347a5ff9d6a09e4d9bce5580c4f505278e64"
-  integrity sha512-IFsj0R9C7ZdR5cP+ET342q77uSRdtWOlWpih5eC+lu29tIDbNEgDbzgVJ5UFvYHWhxDZ5TFkJafFioO0pPQjCw==
-  dependencies:
-    which "^1.2.10"
-
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -9783,22 +9727,13 @@ npm-run-path@^2.0.0:
   dependencies:
     path-key "^2.0.0"
 
-npm-run-path@^4.0.1:
+npm-run-path@^4.0.0, npm-run-path@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-4.0.1.tgz#b7ecd1e5ed53da8e37a55e1c2269e0b97ed748ea"
   integrity sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==
   dependencies:
     path-key "^3.0.0"
 
-npm-which@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/npm-which/-/npm-which-3.0.1.tgz#9225f26ec3a285c209cae67c3b11a6b4ab7140aa"
-  integrity sha1-kiXybsOihcIJyuZ8OxGmtKtxQKo=
-  dependencies:
-    commander "^2.9.0"
-    npm-path "^2.0.2"
-    which "^1.2.10"
-
 npmlog@^4.0.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
@@ -9833,11 +9768,6 @@ object-hash@^2.0.3:
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.0.3.tgz#d12db044e03cd2ca3d77c0570d87225b02e1e6ea"
   integrity sha512-JPKn0GMu+Fa3zt3Bmr66JhokJU5BaNBIh4ZeTlaCBzrBsOeXzwcKKAK1tbLiPKgvwmPXsDvvLHoWh5Bm7ofIYg==
 
-object-inspect@^1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.7.0.tgz#f4f6bd181ad77f006b5ece60bd0b6f398ff74a67"
-  integrity sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==
-
 object-inspect@^1.9.0:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.10.2.tgz#b6385a3e2b7cae0b5eafcf90cddf85d128767f30"
@@ -9855,7 +9785,7 @@ object-visit@^1.0.0:
   dependencies:
     isobject "^3.0.0"
 
-object.assign@4.1.0, object.assign@^4.0.4:
+object.assign@^4.0.4:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
   integrity sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==
@@ -9895,14 +9825,6 @@ object.entries@^1.1.2:
     es-abstract "^1.18.0-next.1"
     has "^1.0.3"
 
-object.getownpropertydescriptors@^2.0.3:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.0.tgz#369bf1f9592d8ab89d712dced5cb81c7c5352649"
-  integrity sha512-Z53Oah9A3TdLoblT7VKJaTDdXdT+lQO+cNpKVnya5JDe9uLvzu1YyY1yFDFrcxrlRgWrEFH0jJtD/IbuwjcEVg==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-
 object.map@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/object.map/-/object.map-1.0.1.tgz#cf83e59dc8fcc0ad5f4250e1f78b3b81bd801d37"
@@ -9973,13 +9895,6 @@ once@^1.3.0, once@^1.3.1, once@^1.3.2, once@^1.4.0:
   dependencies:
     wrappy "1"
 
-onetime@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/onetime/-/onetime-2.0.1.tgz#067428230fd67443b2794b22bba528b6867962d4"
-  integrity sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=
-  dependencies:
-    mimic-fn "^1.0.0"
-
 onetime@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/onetime/-/onetime-5.1.0.tgz#fff0f3c91617fe62bb50189636e99ac8a6df7be5"
@@ -10121,7 +10036,7 @@ p-limit@^2.2.0:
   dependencies:
     p-try "^2.0.0"
 
-p-limit@^3.1.0:
+p-limit@^3.0.2, p-limit@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
   integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
@@ -10149,16 +10064,25 @@ p-locate@^4.1.0:
   dependencies:
     p-limit "^2.2.0"
 
-p-map@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b"
-  integrity sha512-r6zKACMNhjPJMTl8KcFH4li//gkrXWfbD6feV8l6doRHlzljFWGJ2AP6iKaCJXyZmAUMOPtvbW7EXkbWO/pLEA==
+p-locate@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
+  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
+  dependencies:
+    p-limit "^3.0.2"
 
 p-map@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.0.0.tgz#be18c5a5adeb8e156460651421aceca56c213a50"
   integrity sha512-GO107XdrSUmtHxVoi60qc9tUl/KkNKm+X2CF4P9amalpGxv5YqVPJNfSb0wcA+syCopkZvYYIzW8OVTQW59x/w==
 
+p-map@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/p-map/-/p-map-4.0.0.tgz#bb2f95a5eda2ec168ec9274e06a747c3e2904d2b"
+  integrity sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==
+  dependencies:
+    aggregate-error "^3.0.0"
+
 p-retry@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-3.0.1.tgz#316b4c8893e2c8dc1cfa891f406c4b422bebf328"
@@ -10269,6 +10193,16 @@ parse-json@^4.0.0:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
 
+parse-json@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.2.0.tgz#c76fc66dee54231c962b22bcc8a72cf2f99753cd"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
 parse-node-version@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/parse-node-version/-/parse-node-version-1.0.1.tgz#e2b5dbede00e7fa9bc363607f53327e8b073189b"
@@ -10343,7 +10277,7 @@ path-is-absolute@1.0.1, path-is-absolute@^1.0.0:
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
   integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
 
-path-is-inside@1.0.2, path-is-inside@^1.0.1, path-is-inside@^1.0.2:
+path-is-inside@1.0.2, path-is-inside@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/path-is-inside/-/path-is-inside-1.0.2.tgz#365417dede44430d1c11af61027facf074bdfc53"
   integrity sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=
@@ -10418,10 +10352,10 @@ pathseg@^1.2.0:
   resolved "https://registry.yarnpkg.com/pathseg/-/pathseg-1.2.0.tgz#22af051e28037671e7799e296fe96c5dcbe53acd"
   integrity sha512-+pQS7lTaoVIXhaCW7R3Wd/165APzZHWzYVqe7dxzdupxQwebgpBaCmf0/XZwmoA/rkDq3qvzO0qv4d5oFVrBRw==
 
-pathval@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.0.tgz#b942e6d4bde653005ef6b71361def8727d0645e0"
-  integrity sha1-uULm1L3mUwBe9rcTYd74cn0GReA=
+pathval@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.1.tgz#8534e77a77ce7ac5a2512ea21e0fdb8fcf6c3d8d"
+  integrity sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==
 
 pbkdf2@^3.0.3:
   version "3.1.1"
@@ -10504,13 +10438,20 @@ pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
-please-upgrade-node@^3.0.2, please-upgrade-node@^3.1.1:
+please-upgrade-node@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.1.1.tgz#ed320051dfcc5024fae696712c8288993595e8ac"
   integrity sha512-KY1uHnQ2NlQHqIJQpnh/i54rKkuxCEBx+voJIS/Mvb+L2iYd2NMotwduhKTMjfC1uKoX3VXOxLjIYG66dfJTVQ==
   dependencies:
     semver-compare "^1.0.0"
 
+please-upgrade-node@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz#aeddd3f994c933e4ad98b99d9a556efa0e2fe942"
+  integrity sha512-gQR3WpIgNIKwBMVLkpMUeR3e1/E1y42bqDQZfql+kDeXd8COYfM8PQA4X6y7a8u9Ua9FHmsrrmirW2vHs45hWg==
+  dependencies:
+    semver-compare "^1.0.0"
+
 plugin-error@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/plugin-error/-/plugin-error-1.0.1.tgz#77016bd8919d0ac377fdcdd0322328953ca5781c"
@@ -10619,11 +10560,6 @@ promise@^8.0.1:
   dependencies:
     asap "~2.0.6"
 
-property-expr@^1.5.0:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-1.5.1.tgz#22e8706894a0c8e28d58735804f6ba3a3673314f"
-  integrity sha512-CGuc0VUTGthpJXL36ydB6jnbyOf/rAHFvmVrJlH+Rg0DqqLFQGAP6hIaxD/G0OAmBJPhXDHuEJigrp0e0wFV6g==
-
 proxy-addr@~2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.5.tgz#34cbd64a2d81f4b1fd21e76f9f06c8a45299ee34"
@@ -10734,11 +10670,6 @@ querystring@0.2.0:
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
   integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
 
-querystringify@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e"
-  integrity sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==
-
 querystringify@^2.1.1:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.2.0.tgz#3345941b4153cb9d082d8eee4cda2016a9aef7f6"
@@ -10909,13 +10840,6 @@ readdirp@^2.0.0, readdirp@^2.2.1:
     micromatch "^3.1.10"
     readable-stream "^2.0.2"
 
-readdirp@~3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.2.0.tgz#c30c33352b12c96dfb4b895421a49fd5a9593839"
-  integrity sha512-crk4Qu3pmXwgxdSgGhgA/eXiJAPQiX4GMOZZMXnqKxHX7TaoL+3gQVo/WeuAiogr07DpnfjIMpXXa+PAIvwPGQ==
-  dependencies:
-    picomatch "^2.0.4"
-
 readdirp@~3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.5.0.tgz#9ba74c019b15d365278d2e91bb8c48d7b4d42c9e"
@@ -10967,11 +10891,6 @@ regenerator-runtime@^0.11.0:
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
   integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
 
-regenerator-runtime@^0.12.0:
-  version "0.12.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
-  integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg==
-
 regenerator-runtime@^0.13.2:
   version "0.13.2"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz#32e59c9a6fb9b1a4aff09b4930ca2d4477343447"
@@ -11245,14 +11164,6 @@ resolve@^1.17.0:
     is-core-module "^2.1.0"
     path-parse "^1.0.6"
 
-restore-cursor@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
-  integrity sha1-n37ih/gv0ybU/RYpI9YhKe7g368=
-  dependencies:
-    onetime "^2.0.0"
-    signal-exit "^3.0.2"
-
 restore-cursor@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
@@ -11276,7 +11187,7 @@ reusify@^1.0.4:
   resolved "https://registry.yarnpkg.com/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
-rimraf@2.6.3, rimraf@^2.2.8, rimraf@^2.6.1, rimraf@^2.6.2:
+rimraf@2.6.3, rimraf@^2.6.1, rimraf@^2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
   integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==
@@ -11394,13 +11305,6 @@ run-parallel@^1.1.9:
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.1.9.tgz#c9dd3a7cf9f4b2c4b6244e173a6ed866e61dd679"
   integrity sha512-DEqnSRTDw/Tc3FXf49zedI638Z9onwUotBMiUFKmrO2sdFKIbXamXGQ3Axd4qgphxKB4kw/qP1w5kTxnfU1B9Q==
 
-rxjs@^6.3.3:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.4.0.tgz#f3bb0fe7bda7fb69deac0c16f17b50b0b8790504"
-  integrity sha512-Z9Yfa11F6B9Sg/BK9MnqnQ+aQYicPLtilXBp2yUtDt2JRCE0h26d33EnfO3ZxoNxG0T92OUucP3Ct7cpfkdFfw==
-  dependencies:
-    tslib "^1.9.0"
-
 rxjs@^6.5.3:
   version "6.5.5"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.5.tgz#c5c884e3094c8cfee31bf27eb87e54ccfc87f9ec"
@@ -11408,6 +11312,13 @@ rxjs@^6.5.3:
   dependencies:
     tslib "^1.9.0"
 
+rxjs@^6.6.7:
+  version "6.6.7"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
+  integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
+  dependencies:
+    tslib "^1.9.0"
+
 safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
@@ -11495,7 +11406,7 @@ semver@7.0.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
-semver@^5.5.0, semver@^5.7.0, semver@^5.7.1:
+semver@^5.5.0, semver@^5.7.1:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
   integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@@ -11536,6 +11447,13 @@ send@0.17.1:
     range-parser "~1.2.1"
     statuses "~1.5.0"
 
+serialize-javascript@5.0.1, serialize-javascript@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-5.0.1.tgz#7886ec848049a462467a97d3d918ebb2aaf934f4"
+  integrity sha512-SaaNal9imEO737H2c05Og0/8LUXG7EnsZyMa8MzkmuHoELfT6txuj0cMqRj6zfPKnmQ1yasR4PCJc8x+M4JSPA==
+  dependencies:
+    randombytes "^2.1.0"
+
 serialize-javascript@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-2.1.2.tgz#ecec53b0e0317bdc95ef76ab7074b7384785fa61"
@@ -11548,17 +11466,10 @@ serialize-javascript@^4.0.0:
   dependencies:
     randombytes "^2.1.0"
 
-serialize-javascript@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-5.0.1.tgz#7886ec848049a462467a97d3d918ebb2aaf934f4"
-  integrity sha512-SaaNal9imEO737H2c05Og0/8LUXG7EnsZyMa8MzkmuHoELfT6txuj0cMqRj6zfPKnmQ1yasR4PCJc8x+M4JSPA==
-  dependencies:
-    randombytes "^2.1.0"
-
-serve-handler@6.1.2:
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/serve-handler/-/serve-handler-6.1.2.tgz#f05b0421a313fff2d257838cba00cbcc512cd2b6"
-  integrity sha512-RFh49wX7zJmmOVDcIjiDSJnMH+ItQEvyuYLYuDBVoA/xmQSCuj+uRmk1cmBB5QQlI3qOiWKp6p4DUGY+Z5AB2A==
+serve-handler@6.1.3:
+  version "6.1.3"
+  resolved "https://registry.yarnpkg.com/serve-handler/-/serve-handler-6.1.3.tgz#1bf8c5ae138712af55c758477533b9117f6435e8"
+  integrity sha512-FosMqFBNrLyeiIDvP1zgO6YoTzFYHxLDEIavhlmQ+knB2Z7l1t+kGLHkZIDN7UVWqQAmKI3D20A6F6jo3nDd4w==
   dependencies:
     bytes "3.0.0"
     content-disposition "0.5.2"
@@ -11592,10 +11503,10 @@ serve-static@1.14.1:
     parseurl "~1.3.3"
     send "0.17.1"
 
-serve@^11.3.0:
-  version "11.3.0"
-  resolved "https://registry.yarnpkg.com/serve/-/serve-11.3.0.tgz#1d342e13e310501ecf17b6602f1f35da640d6448"
-  integrity sha512-AU0g50Q1y5EVFX56bl0YX5OtVjUX1N737/Htj93dQGKuHiuLvVB45PD8Muar70W6Kpdlz8aNJfoUqTyAq9EE/A==
+serve@^11.3.2:
+  version "11.3.2"
+  resolved "https://registry.yarnpkg.com/serve/-/serve-11.3.2.tgz#b905e980616feecd170e51c8f979a7b2374098f5"
+  integrity sha512-yKWQfI3xbj/f7X1lTBg91fXBP0FqjJ4TEi+ilES5yzH0iKJpN5LjNb1YzIfQg9Rqn4ECUS2SOf2+Kmepogoa5w==
   dependencies:
     "@zeit/schemas" "2.6.0"
     ajv "6.5.3"
@@ -11604,7 +11515,7 @@ serve@^11.3.0:
     chalk "2.4.1"
     clipboardy "1.2.3"
     compression "1.7.3"
-    serve-handler "6.1.2"
+    serve-handler "6.1.3"
     update-check "1.5.2"
 
 set-blocking@^2.0.0, set-blocking@~2.0.0:
@@ -11701,25 +11612,17 @@ signal-exit@^3.0.3:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c"
   integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==
 
-simple-git@^1.85.0:
-  version "1.110.0"
-  resolved "https://registry.yarnpkg.com/simple-git/-/simple-git-1.110.0.tgz#54eb179089d055a7783d32399246cebc9d9933e9"
-  integrity sha512-UYY0rQkknk0P5eb+KW+03F4TevZ9ou0H+LoGaj7iiVgpnZH4wdj/HTViy/1tNNkmIPcmtxuBqXWiYt2YwlRKOQ==
+sinon@^11.0.0:
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/sinon/-/sinon-11.0.0.tgz#e45bae910425d3e52f7eebcb34b47ad42cc7eb57"
+  integrity sha512-iLdNOhEDVHf1GJwWIqiFQe7QqYsqKDSYUUmmb180WCu3l0Cz+CKBxsiSa8P5fTJvTp1lwE77uK/aHzUuJKr1cA==
   dependencies:
-    debug "^4.0.1"
-
-sinon@^7.3.1:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/sinon/-/sinon-7.3.1.tgz#e8276522104e6c08d1cb52a907270b0e316655c4"
-  integrity sha512-eQKMaeWovtOtYe2xThEvaHmmxf870Di+bim10c3ZPrL5bZhLGtu8cz+rOBTFz0CwBV4Q/7dYwZiqZbGVLZ+vjQ==
-  dependencies:
-    "@sinonjs/commons" "^1.4.0"
-    "@sinonjs/formatio" "^3.2.1"
-    "@sinonjs/samsam" "^3.3.1"
-    diff "^3.5.0"
-    lolex "^3.1.0"
-    nise "^1.4.10"
-    supports-color "^5.5.0"
+    "@sinonjs/commons" "^1.8.3"
+    "@sinonjs/fake-timers" "^7.1.0"
+    "@sinonjs/samsam" "^6.0.2"
+    diff "^5.0.0"
+    nise "^5.0.4"
+    supports-color "^8.1.1"
 
 slash@^2.0.0:
   version "2.0.0"
@@ -11731,11 +11634,6 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
-slice-ansi@0.0.4:
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-0.0.4.tgz#edbf8903f66f7ce2f8eafd6ceed65e264c831b35"
-  integrity sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=
-
 slice-ansi@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-2.1.0.tgz#cacd7693461a637a5788d92a7dd4fba068e81636"
@@ -11745,6 +11643,15 @@ slice-ansi@^2.1.0:
     astral-regex "^1.0.0"
     is-fullwidth-code-point "^2.0.0"
 
+slice-ansi@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-3.0.0.tgz#31ddc10930a1b7e0b67b08c96c2f49b77a789787"
+  integrity sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==
+  dependencies:
+    ansi-styles "^4.0.0"
+    astral-regex "^2.0.0"
+    is-fullwidth-code-point "^3.0.0"
+
 slice-ansi@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-4.0.0.tgz#500e8dd0fd55b05815086255b3195adf2a45fe6b"
@@ -11945,11 +11852,6 @@ stack-trace@0.0.10:
   resolved "https://registry.yarnpkg.com/stack-trace/-/stack-trace-0.0.10.tgz#547c70b347e8d32b4e108ea1a2a159e5fdde19c0"
   integrity sha1-VHxws0fo0ytOEI6hoqFZ5f3eGcA=
 
-staged-git-files@1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/staged-git-files/-/staged-git-files-1.1.2.tgz#4326d33886dc9ecfa29a6193bf511ba90a46454b"
-  integrity sha512-0Eyrk6uXW6tg9PYkhi/V/J4zHp33aNyi2hOCmhFLqLTIhbgqWn5jlSzI+IU0VqrZq6+DbHcabQl/WP6P3BG0QA==
-
 static-extend@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"
@@ -11999,10 +11901,10 @@ stream-to-array@^2.0.2:
   dependencies:
     any-promise "^1.1.0"
 
-string-argv@^0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.0.2.tgz#dac30408690c21f3c3630a3ff3a05877bdcbd736"
-  integrity sha1-2sMECGkMIfPDYwo/86BYd73L1zY=
+string-argv@0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.1.tgz#95e2fbec0427ae19184935f816d74aaa4c5c19da"
+  integrity sha512-a1uQGz7IyVy9YwhqjZIZu1c8JO8dNIe20xBmSS6qu9kv++k3JGzCVmprbNN5Kn+BgzD5E7YYwg1CcjuJMRNsvg==
 
 string-width@^1.0.1, string-width@^1.0.2:
   version "1.0.2"
@@ -12039,14 +11941,6 @@ string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
-string.prototype.trimend@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz#85812a6b847ac002270f5808146064c995fb6913"
-  integrity sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.5"
-
 string.prototype.trimend@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/string.prototype.trimend/-/string.prototype.trimend-1.0.4.tgz#e75ae90c2942c63504686c18b287b4a0b1a45f80"
@@ -12055,32 +11949,6 @@ string.prototype.trimend@^1.0.4:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
 
-string.prototype.trimleft@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.2.tgz#4408aa2e5d6ddd0c9a80739b087fbc067c03b3cc"
-  integrity sha512-gCA0tza1JBvqr3bfAIFJGqfdRTyPae82+KTnm3coDXkZN9wnuW3HjGgN386D7hfv5CHQYCI022/rJPVlqXyHSw==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.5"
-    string.prototype.trimstart "^1.0.0"
-
-string.prototype.trimright@^2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimright/-/string.prototype.trimright-2.1.2.tgz#c76f1cef30f21bbad8afeb8db1511496cfb0f2a3"
-  integrity sha512-ZNRQ7sY3KroTaYjRS6EbNiiHrOkjihL9aQE/8gfQ4DtAC/aEBRHFJa44OmoWxGGqXuJlfKkZW4WcXErGr+9ZFg==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.5"
-    string.prototype.trimend "^1.0.0"
-
-string.prototype.trimstart@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz#14af6d9f34b053f7cfc89b72f8f2ee14b9039a54"
-  integrity sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.5"
-
 string.prototype.trimstart@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/string.prototype.trimstart/-/string.prototype.trimstart-1.0.4.tgz#b36399af4ab2999b4c9c648bd7a3fb2bb26feeed"
@@ -12115,7 +11983,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-stringify-object@^3.2.2, stringify-object@^3.3.0:
+stringify-object@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.3.0.tgz#703065aefca19300d3ce88af4f5b3956d7556629"
   integrity sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==
@@ -12193,20 +12061,20 @@ strip-indent@^1.0.1:
   dependencies:
     get-stdin "^4.0.1"
 
-strip-json-comments@2.0.1, strip-json-comments@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
-  integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
+strip-json-comments@3.1.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
 strip-json-comments@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.0.1.tgz#85713975a91fb87bf1b305cca77395e40d2a64a7"
   integrity sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==
 
-strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
-  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+strip-json-comments@~2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
+  integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
 
 style-mod@^4.0.0:
   version "4.0.0"
@@ -12220,17 +12088,17 @@ subarg@^1.0.0:
   dependencies:
     minimist "^1.1.0"
 
-superstruct@^0.10.13:
-  version "0.10.13"
-  resolved "https://registry.yarnpkg.com/superstruct/-/superstruct-0.10.13.tgz#705535a5598ff231bd976601a7b6b534a71a821b"
-  integrity sha512-W4SitSZ9MOyMPbHreoZVEneSZyPEeNGbdfJo/7FkJyRs/M3wQRFzq+t3S/NBwlrFSWdx1ONLjLb9pB+UKe4IqQ==
+superstruct@^0.15.2:
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/superstruct/-/superstruct-0.15.2.tgz#ab7fb84c455a9d7da84c11cfd82c85a4fee9dfff"
+  integrity sha512-OsJI8lv6/PsInwCf4ultejmsJYseYshKhkcbDendqNwj3MeGXENajl3ujMGMU4FDDSSeJTOwFn9T6pnfsS9DYA==
 
-supports-color@6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.0.0.tgz#76cfe742cf1f41bb9b1c29ad03068c05b4c0e40a"
-  integrity sha512-on9Kwidc1IUQo+bQdhi8+Tijpo0e1SS6RoGo2guUwn5vdaxw8RXOF9Vb2ws+ihWOmh4JnCJOvaziZWP1VABaLg==
+supports-color@8.1.1, supports-color@^8.1.1:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-8.1.1.tgz#cd6fc17e28500cff56c1b86c0a7fd4a54a73005c"
+  integrity sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==
   dependencies:
-    has-flag "^3.0.0"
+    has-flag "^4.0.0"
 
 supports-color@^0.2.0:
   version "0.2.0"
@@ -12242,7 +12110,7 @@ supports-color@^2.0.0:
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"
   integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=
 
-supports-color@^5.3.0, supports-color@^5.5.0:
+supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
@@ -12271,16 +12139,6 @@ sver-compat@^1.5.0:
     es6-iterator "^2.0.1"
     es6-symbol "^3.1.1"
 
-symbol-observable@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
-  integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
-
-synchronous-promise@^2.0.5:
-  version "2.0.7"
-  resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.7.tgz#3574b3d2fae86b145356a4b89103e1577f646fe3"
-  integrity sha512-16GbgwTmFMYFyQMLvtQjvNWh30dsFe1cAW5Fg1wm5+dg84L9Pe36mftsIRU95/W2YsISxsz/xq4VB23sqpgb/A==
-
 systemjs@^6.3.2:
   version "6.3.2"
   resolved "https://registry.yarnpkg.com/systemjs/-/systemjs-6.3.2.tgz#2c3407f949260fdfb3b837c191869db933d1fe0f"
@@ -12369,17 +12227,17 @@ term-size@^1.2.0:
   dependencies:
     execa "^0.7.0"
 
-terser-webpack-plugin@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.1.1.tgz#7effadee06f7ecfa093dbbd3e9ab23f5f3ed8673"
-  integrity sha512-5XNNXZiR8YO6X6KhSGXfY0QrGrCRlSwAEjIIrlRQR4W8nP69TaJUlh3bkuac6zzgspiGPfKEHcY295MMVExl5Q==
+terser-webpack-plugin@^5.1.1, terser-webpack-plugin@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-5.1.2.tgz#51d295eb7cc56785a67a372575fdc46e42d5c20c"
+  integrity sha512-6QhDaAiVHIQr5Ab3XUWZyDmrIPCHMiqJVljMF91YKyqwKkL5QHnYMkrMBy96v9Z7ev1hGhSEw1HQZc2p/s5Z8Q==
   dependencies:
     jest-worker "^26.6.2"
     p-limit "^3.1.0"
     schema-utils "^3.0.0"
     serialize-javascript "^5.0.1"
     source-map "^0.6.1"
-    terser "^5.5.1"
+    terser "^5.7.0"
 
 terser@^4.6.2:
   version "4.8.0"
@@ -12390,7 +12248,7 @@ terser@^4.6.2:
     source-map "~0.6.1"
     source-map-support "~0.5.12"
 
-terser@^5.0.0:
+terser@^5.0.0, terser@^5.7.0:
   version "5.7.0"
   resolved "https://registry.yarnpkg.com/terser/-/terser-5.7.0.tgz#a761eeec206bc87b605ab13029876ead938ae693"
   integrity sha512-HP5/9hp2UaZt5fYkuhNBR8YyRcT8juw8+uFbAme53iN9hblvKnLUTKkmwJG6ocWpIKf8UK4DoeWG4ty0J6S6/g==
@@ -12399,15 +12257,6 @@ terser@^5.0.0:
     source-map "~0.7.2"
     source-map-support "~0.5.19"
 
-terser@^5.5.1:
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.6.0.tgz#138cdf21c5e3100b1b3ddfddf720962f88badcd2"
-  integrity sha512-vyqLMoqadC1uR0vywqOZzriDYzgEkNJFK4q9GeyOBHIbiECHiWLKcWfbQWAUaPfxkjDhapSlZB9f7fkMrvkVjA==
-  dependencies:
-    commander "^2.20.0"
-    source-map "~0.7.2"
-    source-map-support "~0.5.19"
-
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
@@ -12498,10 +12347,10 @@ tinycolor2@^1.4.1:
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
   integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
 
-tinykeys@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/tinykeys/-/tinykeys-1.1.1.tgz#2535e8b24c8e2be447dd0ee1cff656ef435cd63d"
-  integrity sha512-YEA1TGMlkMabXI0NGddRFti+c1eMO2QP7wefwibSz0Pip8sA+d99yX5Pp7pK7wUeTKmrF4ys4XZVz44YydlTYg==
+tinykeys@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/tinykeys/-/tinykeys-1.1.3.tgz#5881cb0af2b1426417e43ae932c312d9c7261d15"
+  integrity sha512-18kivCMdM70c4Zz8FE/BeBS69iJ3xSd3+LJ9kzXhWHZj/gqtMVu+vXaVZG5+3HEnKWk6rdrFgObyNaYUFqIaWA==
 
 tmp@^0.0.33:
   version "0.0.33"
@@ -12572,11 +12421,6 @@ toidentifier@1.0.0:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
-toposort@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
-  integrity sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=
-
 tr46@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
@@ -12603,10 +12447,10 @@ ts-lit-plugin@^1.2.1:
   dependencies:
     lit-analyzer "1.2.1"
 
-ts-mocha@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/ts-mocha/-/ts-mocha-7.0.0.tgz#f1549b48b46f53d7ae1dccbb26313c7879acb190"
-  integrity sha512-7WfkQw1W6JZXG5m4E1w2e945uWzBoZqmnOHvpMu0v+zvyKLdUQeTtRMfcQsVEKsUnYL6nTyH4okRt2PZucmFXQ==
+ts-mocha@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/ts-mocha/-/ts-mocha-8.0.0.tgz#962d0fa12eeb6468aa1a6b594bb3bbc818da3ef0"
+  integrity sha512-Kou1yxTlubLnD5C3unlCVO7nh0HERTezjoVhVw/M5S1SqoUec0WgllQvPk3vzPMc6by8m6xD1uR1yRf8lnVUbA==
   dependencies:
     ts-node "7.0.1"
   optionalDependencies:
@@ -12652,7 +12496,7 @@ tsconfig-paths@^3.9.0:
     minimist "^1.2.0"
     strip-bom "^3.0.0"
 
-tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
+tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
   integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
@@ -12667,6 +12511,11 @@ tslib@^2.0.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
   integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
 
+tslib@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.2.0.tgz#fb2c475977e35e241311ede2693cee1ec6698f5c"
+  integrity sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==
+
 tsparticles@^1.19.2:
   version "1.19.2"
   resolved "https://registry.yarnpkg.com/tsparticles/-/tsparticles-1.19.2.tgz#056d26149e67155e99efbfb1ea8f521fcc66520c"
@@ -12705,7 +12554,7 @@ type-check@~0.3.2:
   dependencies:
     prelude-ls "~1.1.2"
 
-type-detect@4.0.8, type-detect@^4.0.0, type-detect@^4.0.5:
+type-detect@4.0.8, type-detect@^4.0.0, type-detect@^4.0.5, type-detect@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
   integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
@@ -12725,6 +12574,11 @@ type-fest@^0.20.2:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
+type-fest@^0.21.3:
+  version "0.21.3"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.21.3.tgz#d260a24b0198436e133fa26a524a6d65fa3b2e37"
+  integrity sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==
+
 type-fest@^0.8.1:
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
@@ -12790,16 +12644,17 @@ undertaker-registry@^1.0.0:
   resolved "https://registry.yarnpkg.com/undertaker-registry/-/undertaker-registry-1.0.1.tgz#5e4bda308e4a8a2ae584f9b9a4359a499825cc50"
   integrity sha1-XkvaMI5KiirlhPm5pDWaSZglzFA=
 
-undertaker@^1.0.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/undertaker/-/undertaker-1.2.0.tgz#339da4646252d082dc378e708067299750e11b49"
-  integrity sha1-M52kZGJS0ILcN45wgGcpl1DhG0k=
+undertaker@^1.2.1:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/undertaker/-/undertaker-1.3.0.tgz#363a6e541f27954d5791d6fa3c1d321666f86d18"
+  integrity sha512-/RXwi5m/Mu3H6IHQGww3GNt1PNXlbeCuclF2QYR14L/2CHPz3DFZkvB5hZ0N/QUkiXWCACML2jXViIQEQc2MLg==
   dependencies:
     arr-flatten "^1.0.1"
     arr-map "^2.0.0"
     bach "^1.0.0"
     collection-map "^1.0.0"
     es6-weak-map "^2.0.1"
+    fast-levenshtein "^1.0.0"
     last-run "^1.1.0"
     object.defaults "^1.0.0"
     object.reduce "^1.0.0"
@@ -12916,15 +12771,7 @@ urix@^0.1.0:
   resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz#da937f7a62e21fec1fd18d49b35c2935067a6c72"
   integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
 
-url-parse@^1.4.3:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.4.4.tgz#cac1556e95faa0303691fec5cf9d5a1bc34648f8"
-  integrity sha512-/92DTTorg4JjktLNLe6GPS2/RvAd/RGr6LuktmWSMLEOa6rjnlrFXNgSbSmkNvCoL2T028A0a1JaJLzRMlFoHg==
-  dependencies:
-    querystringify "^2.0.0"
-    requires-port "^1.0.0"
-
-url-parse@^1.4.7:
+url-parse@^1.4.3, url-parse@^1.4.7:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.1.tgz#d5fa9890af8a5e1f274a2c98376510f6425f6e3b"
   integrity sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==
@@ -12996,10 +12843,10 @@ v8-compile-cache@^2.2.0:
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.2.0.tgz#9471efa3ef9128d2f7c6a7ca39c4dd6b5055b132"
   integrity sha512-gTpR5XQNKFwOd4clxfnhaqvfqMpqEwr4tOtCyz4MtYZX2JYhfr1JvBFKdS+7K/9rfpZR3VLX+YWBbKoxCgS43Q==
 
-v8flags@^3.0.1:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-3.1.2.tgz#fc5cd0c227428181e6c29b2992e4f8f1da5e0c9f"
-  integrity sha512-MtivA7GF24yMPte9Rp/BWGCYQNaUj86zeYxV/x2RRJMKagImbbv3u8iJC57lNhWLPcGLJmHcHmFWkNsplbbLWw==
+v8flags@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-3.2.0.tgz#b243e3b4dfd731fa774e7492128109a0fe66d656"
+  integrity sha512-mH8etigqMfiGWdeXpaaqGfs6BndypxusHHcv2qSHyZkGEznCd/qAXCWWRzeowtL54147cktFOC4P5y+kl8d8Jg==
   dependencies:
     homedir-polyfill "^1.0.1"
 
@@ -13101,10 +12948,10 @@ vinyl@^2.0.0, vinyl@^2.1.0:
     remove-trailing-separator "^1.0.1"
     replace-ext "^1.0.0"
 
-vis-data@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/vis-data/-/vis-data-7.1.1.tgz#a38b38efcc0b721181ddaa4f4359edfd75623825"
-  integrity sha512-Z5+caySDqoKL9yxbI3c/CKmUcSvROSZstuvwxbOsUpdxHpxFYEUgxC1EH4lSB1ykEaM54MVMM1UcwB9oNaWFlw==
+vis-data@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.yarnpkg.com/vis-data/-/vis-data-7.1.2.tgz#b7d076ac79cb54f7c5e9c80f5b03b93cc8cc1fda"
+  integrity sha512-RPSegFxEcnp3HUEJSzhS2vBdbJ2PSsrYYuhRlpHp2frO/MfRtTYbIkkLZmPkA/Sg3pPfBlR235gcoKbtdm4mbw==
 
 vis-network@^8.5.4:
   version "8.5.4"
@@ -13165,10 +13012,10 @@ vue2-daterange-picker@^0.5.1:
   dependencies:
     vue "^2.6.10"
 
-vue@^2.6.10, vue@^2.6.11:
-  version "2.6.11"
-  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
-  integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==
+vue@^2.6.10, vue@^2.6.12:
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
+  integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==
 
 w3c-keyname@^2.2.4:
   version "2.2.4"
@@ -13407,20 +13254,20 @@ which-module@^2.0.0:
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
   integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=
 
-which@1.3.1, which@^1.2.10, which@^1.2.14, which@^1.2.9:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
-  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
-  dependencies:
-    isexe "^2.0.0"
-
-which@^2.0.1:
+which@2.0.2, which@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
   integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
   dependencies:
     isexe "^2.0.0"
 
+which@^1.2.14, which@^1.2.9:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/which/-/which-1.3.1.tgz#a45043d54f5805316da8d62f9f50918d3da70b0a"
+  integrity sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==
+  dependencies:
+    isexe "^2.0.0"
+
 wicg-inert@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/wicg-inert/-/wicg-inert-3.0.0.tgz#4f5797172fbf7ff01effd3839b52872e35d3cba2"
@@ -13613,6 +13460,11 @@ workbox-window@^6.1.5:
   dependencies:
     workbox-core "^6.1.5"
 
+workerpool@6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.1.0.tgz#a8e038b4c94569596852de7a8ea4228eefdeb37b"
+  integrity sha512-toV7q9rWNYha963Pl/qyeZ6wG+3nnsyvolaNUS8+R5Wtw6qJPTxIlOP1ZSvcGhEJw+l3HMMmtiNo9Gl61G4GVg==
+
 wrap-ansi@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-2.1.0.tgz#d8fc3d284dd05794fe84973caecdd1cf824fdd85"
@@ -13621,14 +13473,6 @@ wrap-ansi@^2.0.0:
     string-width "^1.0.1"
     strip-ansi "^3.0.1"
 
-wrap-ansi@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-3.0.1.tgz#288a04d87eda5c286e060dfe8f135ce8d007f8ba"
-  integrity sha1-KIoE2H7aXChuBg3+jxNc6NAH+Lo=
-  dependencies:
-    string-width "^2.1.1"
-    strip-ansi "^4.0.0"
-
 wrap-ansi@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-5.1.0.tgz#1fd1f67235d5b6d0fee781056001bfb694c03b09"
@@ -13647,6 +13491,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
@@ -13699,12 +13552,12 @@ xmlbuilder@~11.0.0:
   resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-11.0.1.tgz#be9bae1c8a046e76b31127726347d0ad7002beb3"
   integrity sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA==
 
-xss@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/xss/-/xss-1.0.6.tgz#eaf11e9fc476e3ae289944a1009efddd8a124b51"
-  integrity sha512-6Q9TPBeNyoTRxgZFk5Ggaepk/4vUOYdOsIUYvLehcsIZTFjaavbVnsuAkLA5lIFuug5hw8zxcB9tm01gsjph2A==
+xss@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/xss/-/xss-1.0.9.tgz#3ffd565571ff60d2e40db7f3b80b4677bec770d2"
+  integrity sha512-2t7FahYnGJys6DpHLhajusId7R0Pm2yTmuL0GV9+mV0ZlaLSnb2toBmppATfg5sWIhZQGlsTLoecSzya+l4EAQ==
   dependencies:
-    commander "^2.9.0"
+    commander "^2.20.3"
     cssfilter "0.0.10"
 
 "xtend@>=4.0.0 <4.1.0-0", xtend@~4.0.0, xtend@~4.0.1:
@@ -13732,6 +13585,11 @@ y18n@^4.0.0:
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.0.tgz#95ef94f85ecc81d007c264e190a120f0a3c8566b"
   integrity sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==
 
+y18n@^5.0.5:
+  version "5.0.8"
+  resolved "https://registry.yarnpkg.com/y18n/-/y18n-5.0.8.tgz#7f4934d0f7ca8c56f95314939ddcd2dd91ce1d55"
+  integrity sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==
+
 yallist@^2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-2.1.2.tgz#1c11f9218f076089a47dd512f93c6699a6a81d52"
@@ -13747,7 +13605,17 @@ yallist@^4.0.0:
   resolved "https://registry.yarnpkg.com/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yargs-parser@13.1.2, yargs-parser@^13.1.2:
+yaml@^1.10.0:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
+yargs-parser@20.2.4:
+  version "20.2.4"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.4.tgz#b42890f14566796f85ae8e3a25290d205f154a54"
+  integrity sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==
+
+yargs-parser@^13.1.2:
   version "13.1.2"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-13.1.2.tgz#130f09702ebaeef2650d54ce6e3e5706f7a4fb38"
   integrity sha512-3lbsNRf/j+A4QuSZfDRA7HRSfWrzO0YjqTJd5kjAq37Zep1CEgaYmrH9Q3GwPiB9cHyd1Y1UwggGhJGoxipbzg==
@@ -13763,6 +13631,11 @@ yargs-parser@^18.1.1, yargs-parser@^18.1.2:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
+yargs-parser@^20.2.2:
+  version "20.2.7"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.7.tgz#61df85c113edfb5a7a4e36eb8aa60ef423cbc90a"
+  integrity sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw==
+
 yargs-parser@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.0.tgz#275ecf0d7ffe05c77e64e7c86e4cd94bf0e1228a"
@@ -13770,16 +13643,30 @@ yargs-parser@^5.0.0:
   dependencies:
     camelcase "^3.0.0"
 
-yargs-unparser@1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/yargs-unparser/-/yargs-unparser-1.6.0.tgz#ef25c2c769ff6bd09e4b0f9d7c605fb27846ea9f"
-  integrity sha512-W9tKgmSn0DpSatfri0nx52Joq5hVXgeLiqR/5G0sZNDoLZFOr/xjBUDcShCOGNsBnEMNo1KAMBkTej1Hm62HTw==
+yargs-unparser@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-unparser/-/yargs-unparser-2.0.0.tgz#f131f9226911ae5d9ad38c432fe809366c2325eb"
+  integrity sha512-7pRTIA9Qc1caZ0bZ6RYRGbHJthJWuakf+WmHK0rVeLkNrrGhfoabBNdue6kdINI6r4if7ocq9aD/n7xwKOdzOA==
   dependencies:
-    flat "^4.1.0"
-    lodash "^4.17.15"
-    yargs "^13.3.0"
+    camelcase "^6.0.0"
+    decamelize "^4.0.0"
+    flat "^5.0.2"
+    is-plain-obj "^2.1.0"
 
-yargs@13.3.2, yargs@^13.2.4, yargs@^13.3.0, yargs@^13.3.2:
+yargs@16.2.0:
+  version "16.2.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-16.2.0.tgz#1c82bf0f6b6a66eafce7ef30e376f49a12477f66"
+  integrity sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==
+  dependencies:
+    cliui "^7.0.2"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.0"
+    y18n "^5.0.5"
+    yargs-parser "^20.2.2"
+
+yargs@^13.2.4, yargs@^13.3.2:
   version "13.3.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
   integrity sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==
@@ -13862,15 +13749,3 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
-
-yup@^0.26.10:
-  version "0.26.10"
-  resolved "https://registry.yarnpkg.com/yup/-/yup-0.26.10.tgz#3545839663289038faf25facfc07e11fd67c0cb1"
-  integrity sha512-keuNEbNSnsOTOuGCt3UJW69jDE3O4P+UHAakO7vSeFMnjaitcmlbij/a3oNb9g1Y1KvSKH/7O1R2PQ4m4TRylw==
-  dependencies:
-    "@babel/runtime" "7.0.0"
-    fn-name "~2.0.1"
-    lodash "^4.17.10"
-    property-expr "^1.5.0"
-    synchronous-promise "^2.0.5"
-    toposort "^2.0.2"