Move partial backup logic to backend

Add hardware version to the device info card (#10914 )
Bumped version to 20211215.0
2025-08-15 04:09:25 +00:00 · 2021-12-16 12:36:02 +00:00 · 2021-12-16 05:16:23 -06:00 · 2021-12-15 13:36:34 +01:00 · 2021-12-15 13:15:50 +01:00 · 2021-12-13 16:33:34 -08:00
504 changed files with 28650 additions and 12924 deletions
--- a/.yarn/patches/@material/mwc-icon-button/remove-icon.patch
+++ b/.yarn/patches/@material/mwc-icon-button/remove-icon.patch
@@ -0,0 +1,12 @@
+diff --git a/mwc-icon-button-base.js b/mwc-icon-button-base.js
+index 45cdaab93ccc0a6daaaaabc01266dcdc32e46bfd..b3ea5b541597308d85f86ce6c23fd00785fda835 100644
+--- a/mwc-icon-button-base.js
+++ b/mwc-icon-button-base.js
+@@ -63,7 +63,6 @@ export class IconButtonBase extends LitElement {
+         @touchend="${this.handleRippleDeactivate}"
+         @touchcancel="${this.handleRippleDeactivate}"
+     >${this.renderRipple()}
+-    <i class="material-icons">${this.icon}</i>
+     <span
+       ><slot></slot
+     ></span>
--- a/build-scripts/bundle.js
+++ b/build-scripts/bundle.js
@@ -165,6 +165,7 @@ module.exports.config = {
  cast({ isProdBuild, latestBuild }) {
    const entry = {
      launcher: path.resolve(paths.cast_dir, "src/launcher/entrypoint.ts"),
+      media: path.resolve(paths.cast_dir, "src/media/entrypoint.ts"),
    };

    if (latestBuild) {
--- a/build-scripts/gulp/entry-html.js
+++ b/build-scripts/gulp/entry-html.js
@@ -154,6 +154,15 @@ gulp.task("gen-index-cast-dev", (done) => {
    contentReceiver
  );

+  const contentMedia = renderCastTemplate("media", {
+    latestMediaJS: "/frontend_latest/media.js",
+    es5MediaJS: "/frontend_es5/media.js",
+  });
+  fs.outputFileSync(
+    path.resolve(paths.cast_output_root, "media.html"),
+    contentMedia
+  );
+
  const contentFAQ = renderCastTemplate("launcher-faq", {
    latestLauncherJS: "/frontend_latest/launcher.js",
    es5LauncherJS: "/frontend_es5/launcher.js",
@@ -192,6 +201,15 @@ gulp.task("gen-index-cast-prod", (done) => {
    contentReceiver
  );

+  const contentMedia = renderCastTemplate("media", {
+    latestMediaJS: latestManifest["media.js"],
+    es5MediaJS: es5Manifest["media.js"],
+  });
+  fs.outputFileSync(
+    path.resolve(paths.cast_output_root, "media.html"),
+    contentMedia
+  );
+
  const contentFAQ = renderCastTemplate("launcher-faq", {
    latestLauncherJS: latestManifest["launcher.js"],
    es5LauncherJS: es5Manifest["launcher.js"],
--- a/build-scripts/gulp/gather-static.js
+++ b/build-scripts/gulp/gather-static.js
@@ -79,6 +79,11 @@ function copyFonts(staticDir) {
  );
 }

+function copyQrScannerWorker(staticDir) {
+  const staticPath = genStaticPath(staticDir);
+  copyFileDir(npmPath("qr-scanner/qr-scanner-worker.min.js"), staticPath("js"));
+}
+
 function copyMapPanel(staticDir) {
  const staticPath = genStaticPath(staticDir);
  copyFileDir(
@@ -125,6 +130,9 @@ gulp.task("copy-static-app", async () => {

  // Panel assets
  copyMapPanel(staticDir);
+
+  // Qr Scanner assets
+  copyQrScannerWorker(staticDir);
 });

 gulp.task("copy-static-demo", async () => {
--- a/build-scripts/gulp/gen-icons-json.js
+++ b/build-scripts/gulp/gen-icons-json.js
@@ -26,6 +26,7 @@ const getMeta = () => {
      path: svg.match(/ d="([^"]+)"/)[1],
      name: icon.name,
      tags: icon.tags,
+      aliases: icon.aliases,
    };
  });
 };
@@ -37,6 +38,7 @@ const addRemovedMeta = (meta) => {
    path: removeIcon.path,
    name: removeIcon.name,
    tags: [],
+    aliases: [],
  }));
  const combinedMeta = [...meta, ...removedMeta];
  return combinedMeta.sort((a, b) => a.name.localeCompare(b.name));
@@ -99,6 +101,7 @@ const findDifferentiator = (curString, prevString) => {

 gulp.task("gen-icons-json", (done) => {
  const meta = getMeta();
+
  const metaAndRemoved = addRemovedMeta(meta);
  const split = splitBySize(metaAndRemoved);

@@ -138,11 +141,17 @@ gulp.task("gen-icons-json", (done) => {
    JSON.stringify({ version: package.version, parts })
  );

-  const orderedMeta = orderMeta(meta);
-
  fs.writeFileSync(
    path.resolve(OUTPUT_DIR, "iconList.json"),
-    JSON.stringify(orderedMeta.map((icon) => icon.name))
+    JSON.stringify(
+      orderMeta(meta).map((icon) => ({
+        name: icon.name,
+        keywords: [
+          ...icon.tags.map((t) => t.toLowerCase().replace(/\s\/\s/g, " ")),
+          ...icon.aliases,
+        ],
+      }))
+    )
  );

  done();
--- a/build-scripts/removedIcons.json
+++ b/build-scripts/removedIcons.json
--- a/cast/src/html/media.html.template
+++ b/cast/src/html/media.html.template
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
+    <style>
+      body {
+        --logo-image: url('https://www.home-assistant.io/images/home-assistant-logo.svg');
+        --logo-repeat: no-repeat;
+        --playback-logo-image: url('https://www.home-assistant.io/images/home-assistant-logo.svg');
+        --theme-hue: 200;
+        --progress-color: #03a9f4;
+        --splash-image: url('https://home-assistant.io/images/cast/splash.png');
+        --splash-size: cover;
+        --background-color: #41bdf5;
+      }
+    </style>
+    <script>
+      var _gaq=[['_setAccount','UA-57927901-10'],['_trackPageview']];
+      (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
+      g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
+      s.parentNode.insertBefore(g,s)}(document,'script'));
+    </script>
+  </head>
+  <body>
+    <%= renderTemplate('_js_base') %>
+
+    <cast-media-player></cast-media-player>
+
+    <script>
+      import("<%= latestMediaJS %>");
+      window.latestJS = true;
+    </script>
+
+    <script>
+      if (!window.latestJS) {
+        <% if (useRollup) { %>
+          _ls("/static/js/s.min.js").onload = function() {
+            System.import("<%= es5MediaJS %>");
+          };
+        <% } else { %>
+          _ls("<%= es5MediaJS %>");
+        <% } %>
+      }
+    </script>
+  </body>
+</html>
--- a/cast/src/launcher/layout/hc-cast.ts
+++ b/cast/src/launcher/layout/hc-cast.ts
@@ -1,4 +1,5 @@
 import "@material/mwc-button/mwc-button";
+import { mdiCast, mdiCastConnected } from "@mdi/js";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-listbox/paper-listbox";
 import { Auth, Connection } from "home-assistant-js-websocket";
@@ -17,6 +18,7 @@ import {
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { toggleAttribute } from "../../../../src/common/dom/toggle_attribute";
 import "../../../../src/components/ha-icon";
+import "../../../../src/components/ha-svg-icon";
 import {
  getLegacyLovelaceCollection,
  getLovelaceCollection,
@@ -73,7 +75,7 @@ class HcCast extends LitElement {
          ? html`
              <p class="center-item">
                <mwc-button raised @click=${this._handleLaunch}>
-                  <ha-icon icon="hass:cast"></ha-icon>
+                  <ha-svg-icon .path=${mdiCast}></ha-svg-icon>
                  Start Casting
                </mwc-button>
              </p>
@@ -111,7 +113,7 @@ class HcCast extends LitElement {
          ${this.castManager.status
            ? html`
                <mwc-button @click=${this._handleLaunch}>
-                  <ha-icon icon="hass:cast-connected"></ha-icon>
+                  <ha-svg-icon .path=${mdiCastConnected}></ha-svg-icon>
                  Manage
                </mwc-button>
              `
@@ -233,7 +235,7 @@ class HcCast extends LitElement {
        color: var(--secondary-text-color);
      }

-      mwc-button ha-icon {
+      mwc-button ha-svg-icon {
        margin-right: 8px;
        height: 18px;
      }
--- a/cast/src/launcher/layout/hc-connect.ts
+++ b/cast/src/launcher/layout/hc-connect.ts
@@ -1,4 +1,5 @@
 import "@material/mwc-button";
+import { mdiCastConnected, mdiCast } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import {
  Auth,
@@ -19,7 +20,7 @@ import {
  loadTokens,
  saveTokens,
 } from "../../../../src/common/auth/token_storage";
-import "../../../../src/components/ha-icon";
+import "../../../../src/components/ha-svg-icon";
 import "../../../../src/layouts/hass-loading-screen";
 import { registerServiceWorker } from "../../../../src/util/register-service-worker";
 import "./hc-layout";
@@ -127,11 +128,11 @@ export class HcConnect extends LitElement {
          <div class="card-actions">
            <mwc-button @click=${this._handleDemo}>
              Show Demo
-              <ha-icon
-                .icon=${this.castManager.castState === "CONNECTED"
-                  ? "hass:cast-connected"
-                  : "hass:cast"}
-              ></ha-icon>
+              <ha-svg-icon
+                .path=${this.castManager.castState === "CONNECTED"
+                  ? mdiCastConnected
+                  : mdiCast}
+              ></ha-svg-icon>
            </mwc-button>
            <div class="spacer"></div>
            <mwc-button @click=${this._handleConnect}>Authorize</mwc-button>
@@ -307,7 +308,7 @@ export class HcConnect extends LitElement {
        color: darkred;
      }

-      mwc-button ha-icon {
+      mwc-button ha-svg-icon {
        margin-left: 8px;
      }

--- a/cast/src/media/entrypoint.ts
+++ b/cast/src/media/entrypoint.ts
@@ -0,0 +1,22 @@
+const castContext = cast.framework.CastReceiverContext.getInstance();
+
+const playerManager = castContext.getPlayerManager();
+
+playerManager.setMessageInterceptor(
+  cast.framework.messages.MessageType.LOAD,
+  (loadRequestData) => {
+    const media = loadRequestData.media;
+    // Special handling if it came from Google Assistant
+    if (media.entity) {
+      media.contentId = media.entity;
+      media.streamType = cast.framework.messages.StreamType.LIVE;
+      media.contentType = "application/vnd.apple.mpegurl";
+      // @ts-ignore
+      media.hlsVideoSegmentFormat =
+        cast.framework.messages.HlsVideoSegmentFormat.FMP4;
+    }
+    return loadRequestData;
+  }
+);
+
+castContext.start();
--- a/cast/src/receiver/entrypoint.ts
+++ b/cast/src/receiver/entrypoint.ts
@@ -8,6 +8,9 @@ import { ReceivedMessage } from "./types";

 const lovelaceController = new HcMain();
 document.body.append(lovelaceController);
+lovelaceController.addEventListener("cast-view-changed", (ev) => {
+  playDummyMedia(ev.detail.title);
+});

 const mediaPlayer = document.createElement("cast-media-player");
 mediaPlayer.style.display = "none";
@@ -28,6 +31,31 @@ const setTouchControlsVisibility = (visible: boolean) => {
  }
 };

+let timeOut: number | undefined;
+
+const playDummyMedia = (viewTitle?: string) => {
+  const loadRequestData = new cast.framework.messages.LoadRequestData();
+  loadRequestData.autoplay = true;
+  loadRequestData.media = new cast.framework.messages.MediaInformation();
+  loadRequestData.media.contentId =
+    "https://cast.home-assistant.io/images/google-nest-hub.png";
+  loadRequestData.media.contentType = "image/jpeg";
+  loadRequestData.media.streamType = cast.framework.messages.StreamType.NONE;
+  const metadata = new cast.framework.messages.GenericMediaMetadata();
+  metadata.title = viewTitle;
+  loadRequestData.media.metadata = metadata;
+
+  loadRequestData.requestId = 0;
+  playerManager.load(loadRequestData);
+  if (timeOut) {
+    clearTimeout(timeOut);
+    timeOut = undefined;
+  }
+  if (castContext.getDeviceCapabilities().touch_input_supported) {
+    timeOut = window.setTimeout(() => playDummyMedia(viewTitle), 540000); // repeat every 9 minutes to keep it active (gets deactivated after 10 minutes)
+  }
+};
+
 const showLovelaceController = () => {
  mediaPlayer.style.display = "none";
  lovelaceController.style.display = "initial";
@@ -51,6 +79,7 @@ const showMediaPlayer = () => {
      --progress-color: #03a9f4;
      --splash-image: url('https://home-assistant.io/images/cast/splash.png');
      --splash-size: cover;
+      --background-color: #41bdf5;
    }
    `;
    document.head.appendChild(style);
@@ -63,22 +92,6 @@ options.customNamespaces = {
  [CAST_NS]: cast.framework.system.MessageType.JSON,
 };

-// The docs say we need to set options.touchScreenOptimizeApp = true
-// https://developers.google.com/cast/docs/caf_receiver/customize_ui#accessing_ui_controls
-// This doesn't work.
-// @ts-ignore
-options.touchScreenOptimizedApp = true;
-
-// The class reference say we can set a uiConfig in options to set it
-// https://developers.google.com/cast/docs/reference/caf_receiver/cast.framework.CastReceiverOptions#uiConfig
-// This doesn't work either.
-// @ts-ignore
-options.uiConfig = new cast.framework.ui.UiConfig();
-// @ts-ignore
-options.uiConfig.touchScreenOptimizedApp = true;
-
-castContext.setInactivityTimeout(86400); // 1 day
-
 castContext.addCustomMessageListener(
  CAST_NS,
  // @ts-ignore
@@ -103,6 +116,12 @@ const playerManager = castContext.getPlayerManager();
 playerManager.setMessageInterceptor(
  cast.framework.messages.MessageType.LOAD,
  (loadRequestData) => {
+    if (
+      loadRequestData.media.contentId ===
+      "https://cast.home-assistant.io/images/google-nest-hub.png"
+    ) {
+      return loadRequestData;
+    }
    // We received a play media command, hide Lovelace and show media player
    showMediaPlayer();
    const media = loadRequestData.media;
--- a/cast/src/receiver/layout/hc-lovelace.ts
+++ b/cast/src/receiver/layout/hc-lovelace.ts
@@ -1,5 +1,6 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
+import { fireEvent } from "../../../../src/common/dom/fire_event";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
 import { Lovelace } from "../../../../src/panels/lovelace/types";
 import "../../../../src/panels/lovelace/views/hui-view";
@@ -14,7 +15,7 @@ class HcLovelace extends LitElement {

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

-  public urlPath?: string | null;
+  @property() public urlPath: string | null = null;

  protected render(): TemplateResult {
    const index = this._viewIndex;
@@ -30,7 +31,7 @@ class HcLovelace extends LitElement {
      config: this.lovelaceConfig,
      rawConfig: this.lovelaceConfig,
      editMode: false,
-      urlPath: this.urlPath!,
+      urlPath: this.urlPath,
      enableFullEditMode: () => undefined,
      mode: "storage",
      locale: this.hass.locale,
@@ -54,6 +55,21 @@ class HcLovelace extends LitElement {
      const index = this._viewIndex;

      if (index !== undefined) {
+        const dashboardTitle = this.lovelaceConfig.title || this.urlPath;
+
+        const viewTitle =
+          this.lovelaceConfig.views[index].title ||
+          this.lovelaceConfig.views[index].path;
+
+        fireEvent(this, "cast-view-changed", {
+          title:
+            dashboardTitle || viewTitle
+              ? `${dashboardTitle || ""}${
+                  dashboardTitle && viewTitle ? ": " : ""
+                }${viewTitle || ""}`
+              : undefined,
+        });
+
        const configBackground =
          this.lovelaceConfig.views[index].background ||
          this.lovelaceConfig.background;
@@ -101,8 +117,15 @@ class HcLovelace extends LitElement {
  }
 }

+export interface CastViewChanged {
+  title: string | undefined;
+}
+
 declare global {
  interface HTMLElementTagNameMap {
    "hc-lovelace": HcLovelace;
  }
+  interface HASSDomEvents {
+    "cast-view-changed": CastViewChanged;
+  }
 }
--- a/cast/src/receiver/layout/hc-main.ts
+++ b/cast/src/receiver/layout/hc-main.ts
@@ -13,7 +13,11 @@ import {
  ShowDemoMessage,
  ShowLovelaceViewMessage,
 } from "../../../../src/cast/receiver_messages";
-import { ReceiverStatusMessage } from "../../../../src/cast/sender_messages";
+import {
+  ReceiverErrorCode,
+  ReceiverErrorMessage,
+  ReceiverStatusMessage,
+} from "../../../../src/cast/sender_messages";
 import { atLeastVersion } from "../../../../src/common/config/version";
 import { isNavigationClick } from "../../../../src/common/dom/is-navigation-click";
 import {
@@ -40,9 +44,9 @@ export class HcMain extends HassElement {

  @state() private _error?: string;

-  private _unsubLovelace?: UnsubscribeFunc;
+  @state() private _urlPath?: string | null;

-  private _urlPath?: string | null;
+  private _unsubLovelace?: UnsubscribeFunc;

  public processIncomingMessage(msg: HassMessage) {
    if (msg.type === "connect") {
@@ -68,8 +72,10 @@ export class HcMain extends HassElement {
      !this._lovelaceConfig ||
      this._lovelacePath === null ||
      // Guard against part of HA not being loaded yet.
-      (this.hass &&
-        (!this.hass.states || !this.hass.config || !this.hass.services))
+      !this.hass ||
+      !this.hass.states ||
+      !this.hass.config ||
+      !this.hass.services
    ) {
      return html`
        <hc-launch-screen
@@ -107,6 +113,7 @@ export class HcMain extends HassElement {
        this._sendStatus();
      }
    });
+    this.addEventListener("dialog-closed", this._dialogClosed);
  }

  private _sendStatus(senderId?: string) {
@@ -118,7 +125,7 @@ export class HcMain extends HassElement {

    if (this.hass) {
      status.hassUrl = this.hass.auth.data.hassUrl;
-      status.lovelacePath = this._lovelacePath!;
+      status.lovelacePath = this._lovelacePath;
      status.urlPath = this._urlPath;
    }

@@ -131,6 +138,30 @@ export class HcMain extends HassElement {
    }
  }

+  private _sendError(
+    error_code: number,
+    error_message: string,
+    senderId?: string
+  ) {
+    const error: ReceiverErrorMessage = {
+      type: "receiver_error",
+      error_code,
+      error_message,
+    };
+
+    if (senderId) {
+      this.sendMessage(senderId, error);
+    } else {
+      for (const sender of castContext.getSenders()) {
+        this.sendMessage(sender.id, error);
+      }
+    }
+  }
+
+  private _dialogClosed = () => {
+    document.body.setAttribute("style", "overflow-y: auto !important");
+  };
+
  private async _handleGetStatusMessage(msg: GetStatusMessage) {
    this._sendStatus(msg.senderId!);
  }
@@ -149,14 +180,18 @@ export class HcMain extends HassElement {
        }),
      });
    } catch (err: any) {
-      this._error = this._getErrorMessage(err);
+      const errorMessage = this._getErrorMessage(err);
+      this._error = errorMessage;
+      this._sendError(err, errorMessage);
      return;
    }
    let connection;
    try {
      connection = await createConnection({ auth });
    } catch (err: any) {
-      this._error = this._getErrorMessage(err);
+      const errorMessage = this._getErrorMessage(err);
+      this._error = errorMessage;
+      this._sendError(err, errorMessage);
      return;
    }
    if (this.hass) {
@@ -168,24 +203,29 @@ export class HcMain extends HassElement {
  }

  private async _handleShowLovelaceMessage(msg: ShowLovelaceViewMessage) {
+    this._showDemo = false;
    // We should not get this command before we are connected.
    // Means a client got out of sync. Let's send status to them.
    if (!this.hass) {
      this._sendStatus(msg.senderId!);
      this._error = "Cannot show Lovelace because we're not connected.";
+      this._sendError(ReceiverErrorCode.NOT_CONNECTED, this._error);
      return;
    }
+    this._error = undefined;
    if (msg.urlPath === "lovelace") {
      msg.urlPath = null;
    }
+    this._lovelacePath = msg.viewPath;
    if (!this._unsubLovelace || this._urlPath !== msg.urlPath) {
      this._urlPath = msg.urlPath;
+      this._lovelaceConfig = undefined;
      if (this._unsubLovelace) {
        this._unsubLovelace();
      }
      const llColl = atLeastVersion(this.hass.connection.haVersion, 0, 107)
-        ? getLovelaceCollection(this.hass!.connection, msg.urlPath)
-        : getLegacyLovelaceCollection(this.hass!.connection);
+        ? getLovelaceCollection(this.hass.connection, msg.urlPath)
+        : getLegacyLovelaceCollection(this.hass.connection);
      // We first do a single refresh because we need to check if there is LL
      // configuration.
      try {
@@ -194,8 +234,16 @@ export class HcMain extends HassElement {
          this._handleNewLovelaceConfig(lovelaceConfig)
        );
      } catch (err: any) {
-        // eslint-disable-next-line
-        console.log("Error fetching Lovelace configuration", err, msg);
+        if (
+          atLeastVersion(this.hass.connection.haVersion, 0, 107) &&
+          err.code !== "config_not_found"
+        ) {
+          // eslint-disable-next-line
+          console.log("Error fetching Lovelace configuration", err, msg);
+          this._error = `Error fetching Lovelace configuration: ${err.message}`;
+          this._sendError(ReceiverErrorCode.FETCH_CONFIG_FAILED, this._error);
+          return;
+        }
        // Generate a Lovelace config.
        this._unsubLovelace = () => undefined;
        await this._generateLovelaceConfig();
@@ -210,8 +258,6 @@ export class HcMain extends HassElement {
        loadLovelaceResources(resources, this.hass!.auth.data.hassUrl);
      }
    }
-    this._showDemo = false;
-    this._lovelacePath = msg.viewPath;

    this._sendStatus();
  }
@@ -232,7 +278,7 @@ export class HcMain extends HassElement {
  }

  private _handleNewLovelaceConfig(lovelaceConfig: LovelaceConfig) {
-    castContext.setApplicationState(lovelaceConfig.title!);
+    castContext.setApplicationState(lovelaceConfig.title || "");
    this._lovelaceConfig = lovelaceConfig;
  }

--- a/demo/src/custom-cards/cast-demo-row.ts
+++ b/demo/src/custom-cards/cast-demo-row.ts
@@ -1,3 +1,4 @@
+import { mdiTelevision } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
 import { CastManager } from "../../../src/cast/cast_manager";
@@ -27,7 +28,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
      return html``;
    }
    return html`
-      <ha-icon icon="hademo:television"></ha-icon>
+      <ha-svg-icon .path=${mdiTelevision}></ha-svg-icon>
      <div class="flex">
        <div class="name">Show Chromecast interface</div>
        <google-cast-launcher></google-cast-launcher>
@@ -72,7 +73,7 @@ class CastDemoRow extends LitElement implements LovelaceRow {
        display: flex;
        align-items: center;
      }
-      ha-icon {
+      ha-svg-icon {
        padding: 8px;
        color: var(--paper-item-icon-color);
      }
--- a/demo/src/html/index.html.template
+++ b/demo/src/html/index.html.template
--- a/demo/src/stubs/energy.ts
+++ b/demo/src/stubs/energy.ts
@@ -82,6 +82,9 @@ export const mockEnergy = (hass: MockHomeAssistant) => {
    ],
  }));
  hass.mockWS("energy/info", () => ({ cost_sensors: [] }));
+  hass.mockWS("energy/fossil_energy_consumption", ({ period }) => ({
+    start: period === "month" ? 500 : period === "day" ? 20 : 5,
+  }));
  const todayString = format(startOfToday(), "yyyy-MM-dd");
  const tomorrowString = format(startOfTomorrow(), "yyyy-MM-dd");
  hass.mockWS(
--- a/demo/src/stubs/history.ts
+++ b/demo/src/stubs/history.ts
@@ -1,4 +1,10 @@
-import { addHours, differenceInHours, endOfDay } from "date-fns";
+import {
+  addDays,
+  addHours,
+  addMonths,
+  differenceInHours,
+  endOfDay,
+} from "date-fns";
 import { HassEntity } from "home-assistant-js-websocket";
 import { StatisticValue } from "../../../src/data/history";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
@@ -70,6 +76,7 @@ const generateMeanStatistics = (
  id: string,
  start: Date,
  end: Date,
+  period: "5minute" | "hour" | "day" | "month" = "hour",
  initValue: number,
  maxDiff: number
 ) => {
@@ -84,6 +91,7 @@ const generateMeanStatistics = (
    statistics.push({
      statistic_id: id,
      start: currentDate.toISOString(),
+      end: currentDate.toISOString(),
      mean,
      min: mean - Math.random() * maxDiff,
      max: mean + Math.random() * maxDiff,
@@ -92,7 +100,12 @@ const generateMeanStatistics = (
      sum: null,
    });
    lastVal = mean;
-    currentDate = addHours(currentDate, 1);
+    currentDate =
+      period === "day"
+        ? addDays(currentDate, 1)
+        : period === "month"
+        ? addMonths(currentDate, 1)
+        : addHours(currentDate, 1);
  }
  return statistics;
 };
@@ -101,6 +114,7 @@ const generateSumStatistics = (
  id: string,
  start: Date,
  end: Date,
+  period: "5minute" | "hour" | "day" | "month" = "hour",
  initValue: number,
  maxDiff: number
 ) => {
@@ -115,6 +129,7 @@ const generateSumStatistics = (
    statistics.push({
      statistic_id: id,
      start: currentDate.toISOString(),
+      end: currentDate.toISOString(),
      mean: null,
      min: null,
      max: null,
@@ -122,7 +137,12 @@ const generateSumStatistics = (
      state: initValue + sum,
      sum,
    });
-    currentDate = addHours(currentDate, 1);
+    currentDate =
+      period === "day"
+        ? addDays(currentDate, 1)
+        : period === "month"
+        ? addMonths(currentDate, 1)
+        : addHours(currentDate, 1);
  }
  return statistics;
 };
@@ -131,6 +151,7 @@ const generateCurvedStatistics = (
  id: string,
  start: Date,
  end: Date,
+  _period: "5minute" | "hour" | "day" | "month" = "hour",
  initValue: number,
  maxDiff: number,
  metered: boolean
@@ -149,6 +170,7 @@ const generateCurvedStatistics = (
    statistics.push({
      statistic_id: id,
      start: currentDate.toISOString(),
+      end: currentDate.toISOString(),
      mean: null,
      min: null,
      max: null,
@@ -167,11 +189,38 @@ const generateCurvedStatistics = (

 const statisticsFunctions: Record<
  string,
-  (id: string, start: Date, end: Date) => StatisticValue[]
+  (
+    id: string,
+    start: Date,
+    end: Date,
+    period: "5minute" | "hour" | "day" | "month"
+  ) => StatisticValue[]
 > = {
-  "sensor.energy_consumption_tarif_1": (id: string, start: Date, end: Date) => {
+  "sensor.energy_consumption_tarif_1": (
+    id: string,
+    start: Date,
+    end: Date,
+    period = "hour"
+  ) => {
+    if (period !== "hour") {
+      return generateSumStatistics(
+        id,
+        start,
+        end,
+        period,
+        0,
+        period === "day" ? 17 : 504
+      );
+    }
    const morningEnd = new Date(start.getTime() + 10 * 60 * 60 * 1000);
-    const morningLow = generateSumStatistics(id, start, morningEnd, 0, 0.7);
+    const morningLow = generateSumStatistics(
+      id,
+      start,
+      morningEnd,
+      period,
+      0,
+      0.7
+    );
    const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
    const morningFinalVal = morningLow.length
      ? morningLow[morningLow.length - 1].sum!
@@ -180,6 +229,7 @@ const statisticsFunctions: Record<
      id,
      morningEnd,
      eveningStart,
+      period,
      morningFinalVal,
      0
    );
@@ -187,39 +237,71 @@ const statisticsFunctions: Record<
      id,
      eveningStart,
      end,
+      period,
      morningFinalVal,
      0.7
    );
    return [...morningLow, ...empty, ...eveningLow];
  },
-  "sensor.energy_consumption_tarif_2": (id: string, start: Date, end: Date) => {
+  "sensor.energy_consumption_tarif_2": (
+    id: string,
+    start: Date,
+    end: Date,
+    period = "hour"
+  ) => {
+    if (period !== "hour") {
+      return generateSumStatistics(
+        id,
+        start,
+        end,
+        period,
+        0,
+        period === "day" ? 17 : 504
+      );
+    }
    const morningEnd = new Date(start.getTime() + 9 * 60 * 60 * 1000);
    const eveningStart = new Date(start.getTime() + 20 * 60 * 60 * 1000);
    const highTarif = generateSumStatistics(
      id,
      morningEnd,
      eveningStart,
+      period,
      0,
      0.3
    );
    const highTarifFinalVal = highTarif.length
      ? highTarif[highTarif.length - 1].sum!
      : 0;
-    const morning = generateSumStatistics(id, start, morningEnd, 0, 0);
+    const morning = generateSumStatistics(id, start, morningEnd, period, 0, 0);
    const evening = generateSumStatistics(
      id,
      eveningStart,
      end,
+      period,
      highTarifFinalVal,
      0
    );
    return [...morning, ...highTarif, ...evening];
  },
-  "sensor.energy_production_tarif_1": (id, start, end) =>
-    generateSumStatistics(id, start, end, 0, 0),
-  "sensor.energy_production_tarif_1_compensation": (id, start, end) =>
-    generateSumStatistics(id, start, end, 0, 0),
-  "sensor.energy_production_tarif_2": (id, start, end) => {
+  "sensor.energy_production_tarif_1": (id, start, end, period = "hour") =>
+    generateSumStatistics(id, start, end, period, 0, 0),
+  "sensor.energy_production_tarif_1_compensation": (
+    id,
+    start,
+    end,
+    period = "hour"
+  ) => generateSumStatistics(id, start, end, period, 0, 0),
+  "sensor.energy_production_tarif_2": (id, start, end, period = "hour") => {
+    if (period !== "hour") {
+      return generateSumStatistics(
+        id,
+        start,
+        end,
+        period,
+        0,
+        period === "day" ? 17 : 504
+      );
+    }
    const productionStart = new Date(start.getTime() + 9 * 60 * 60 * 1000);
    const productionEnd = new Date(start.getTime() + 21 * 60 * 60 * 1000);
    const dayEnd = new Date(endOfDay(productionEnd));
@@ -227,6 +309,7 @@ const statisticsFunctions: Record<
      id,
      productionStart,
      productionEnd,
+      period,
      0,
      0.15,
      true
@@ -234,18 +317,43 @@ const statisticsFunctions: Record<
    const productionFinalVal = production.length
      ? production[production.length - 1].sum!
      : 0;
-    const morning = generateSumStatistics(id, start, productionStart, 0, 0);
+    const morning = generateSumStatistics(
+      id,
+      start,
+      productionStart,
+      period,
+      0,
+      0
+    );
    const evening = generateSumStatistics(
      id,
      productionEnd,
      dayEnd,
+      period,
      productionFinalVal,
      0
    );
-    const rest = generateSumStatistics(id, dayEnd, end, productionFinalVal, 1);
+    const rest = generateSumStatistics(
+      id,
+      dayEnd,
+      end,
+      period,
+      productionFinalVal,
+      1
+    );
    return [...morning, ...production, ...evening, ...rest];
  },
-  "sensor.solar_production": (id, start, end) => {
+  "sensor.solar_production": (id, start, end, period = "hour") => {
+    if (period !== "hour") {
+      return generateSumStatistics(
+        id,
+        start,
+        end,
+        period,
+        0,
+        period === "day" ? 17 : 504
+      );
+    }
    const productionStart = new Date(start.getTime() + 7 * 60 * 60 * 1000);
    const productionEnd = new Date(start.getTime() + 23 * 60 * 60 * 1000);
    const dayEnd = new Date(endOfDay(productionEnd));
@@ -253,6 +361,7 @@ const statisticsFunctions: Record<
      id,
      productionStart,
      productionEnd,
+      period,
      0,
      0.3,
      true
@@ -260,19 +369,32 @@ const statisticsFunctions: Record<
    const productionFinalVal = production.length
      ? production[production.length - 1].sum!
      : 0;
-    const morning = generateSumStatistics(id, start, productionStart, 0, 0);
+    const morning = generateSumStatistics(
+      id,
+      start,
+      productionStart,
+      period,
+      0,
+      0
+    );
    const evening = generateSumStatistics(
      id,
      productionEnd,
      dayEnd,
+      period,
      productionFinalVal,
      0
    );
-    const rest = generateSumStatistics(id, dayEnd, end, productionFinalVal, 2);
+    const rest = generateSumStatistics(
+      id,
+      dayEnd,
+      end,
+      period,
+      productionFinalVal,
+      2
+    );
    return [...morning, ...production, ...evening, ...rest];
  },
-  "sensor.grid_fossil_fuel_percentage": (id, start, end) =>
-    generateMeanStatistics(id, start, end, 35, 1.3),
 };

 export const mockHistory = (mockHass: MockHomeAssistant) => {
@@ -347,7 +469,7 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
  mockHass.mockWS("history/list_statistic_ids", () => []);
  mockHass.mockWS(
    "history/statistics_during_period",
-    ({ statistic_ids, start_time, end_time }, hass) => {
+    ({ statistic_ids, start_time, end_time, period }, hass) => {
      const start = new Date(start_time);
      const end = end_time ? new Date(end_time) : new Date();

@@ -355,7 +477,7 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {

      statistic_ids.forEach((id: string) => {
        if (id in statisticsFunctions) {
-          statistics[id] = statisticsFunctions[id](id, start, end);
+          statistics[id] = statisticsFunctions[id](id, start, end, period);
        } else {
          const entityState = hass.states[id];
          const state = entityState ? Number(entityState.state) : 1;
@@ -365,6 +487,7 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
                  id,
                  start,
                  end,
+                  period,
                  state,
                  state * (state > 80 ? 0.01 : 0.05)
                )
@@ -372,6 +495,7 @@ export const mockHistory = (mockHass: MockHomeAssistant) => {
                  id,
                  start,
                  end,
+                  period,
                  state,
                  state * (state > 80 ? 0.05 : 0.1)
                );
--- a/gallery/public/images/office.jpg
+++ b/gallery/public/images/office.jpg
--- a/gallery/src/components/demo-black-white-row.ts
+++ b/gallery/src/components/demo-black-white-row.ts
@@ -52,17 +52,13 @@ class DemoBlackWhiteRow extends LitElement {

  firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: false,
-      },
-      "default",
-      { dark: true }
-    );
+    applyThemesOnElement(this.shadowRoot!.querySelector(".dark"), {
+      default_theme: "default",
+      default_dark_theme: "default",
+      themes: {},
+      darkMode: true,
+      theme: "default",
+    });
  }

  handleSubmit(ev) {
--- a/gallery/src/demos/demo-automation-editor-action.ts
+++ b/gallery/src/demos/demo-automation-editor-action.ts
@@ -0,0 +1,91 @@
+/* eslint-disable lit/no-template-arrow */
+import { LitElement, TemplateResult, html } from "lit";
+import { customElement, state } from "lit/decorators";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import type { HomeAssistant } from "../../../src/types";
+import "../components/demo-black-white-row";
+import { mockEntityRegistry } from "../../../demo/src/stubs/entity_registry";
+import { mockDeviceRegistry } from "../../../demo/src/stubs/device_registry";
+import { mockAreaRegistry } from "../../../demo/src/stubs/area_registry";
+import { mockHassioSupervisor } from "../../../demo/src/stubs/hassio_supervisor";
+import "../../../src/panels/config/automation/action/ha-automation-action";
+import { HaChooseAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-choose";
+import { HaDelayAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-delay";
+import { HaDeviceAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-device_id";
+import { HaEventAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-event";
+import { HaRepeatAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-repeat";
+import { HaSceneAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-scene";
+import { HaServiceAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-service";
+import { HaWaitForTriggerAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-wait_for_trigger";
+import { HaWaitAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-wait_template";
+import { Action } from "../../../src/data/script";
+import { HaConditionAction } from "../../../src/panels/config/automation/action/types/ha-automation-action-condition";
+
+const SCHEMAS: { name: string; actions: Action[] }[] = [
+  { name: "Event", actions: [HaEventAction.defaultConfig] },
+  { name: "Device", actions: [HaDeviceAction.defaultConfig] },
+  { name: "Service", actions: [HaServiceAction.defaultConfig] },
+  { name: "Condition", actions: [HaConditionAction.defaultConfig] },
+  { name: "Delay", actions: [HaDelayAction.defaultConfig] },
+  { name: "Scene", actions: [HaSceneAction.defaultConfig] },
+  { name: "Wait", actions: [HaWaitAction.defaultConfig] },
+  { name: "WaitForTrigger", actions: [HaWaitForTriggerAction.defaultConfig] },
+  { name: "Repeat", actions: [HaRepeatAction.defaultConfig] },
+  { name: "Choose", actions: [HaChooseAction.defaultConfig] },
+  { name: "Variables", actions: [{ variables: { hello: "1" } }] },
+];
+
+@customElement("demo-automation-editor-action")
+class DemoHaAutomationEditorAction extends LitElement {
+  @state() private hass!: HomeAssistant;
+
+  private data: any = SCHEMAS.map((info) => info.actions);
+
+  constructor() {
+    super();
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
+    mockEntityRegistry(hass);
+    mockDeviceRegistry(hass);
+    mockAreaRegistry(hass);
+    mockHassioSupervisor(hass);
+  }
+
+  protected render(): TemplateResult {
+    const valueChanged = (ev) => {
+      const sampleIdx = ev.target.sampleIdx;
+      this.data[sampleIdx] = ev.detail.value;
+      this.requestUpdate();
+    };
+    return html`
+      ${SCHEMAS.map(
+        (info, sampleIdx) => html`
+          <demo-black-white-row
+            .title=${info.name}
+            .value=${this.data[sampleIdx]}
+          >
+            ${["light", "dark"].map(
+              (slot) =>
+                html`
+                  <ha-automation-action
+                    slot=${slot}
+                    .hass=${this.hass}
+                    .actions=${this.data[sampleIdx]}
+                    .sampleIdx=${sampleIdx}
+                    @value-changed=${valueChanged}
+                  ></ha-automation-action>
+                `
+            )}
+          </demo-black-white-row>
+        `
+      )}
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-automation-editor-action": DemoHaAutomationEditorAction;
+  }
+}
--- a/gallery/src/demos/demo-automation-editor-condition.ts
+++ b/gallery/src/demos/demo-automation-editor-condition.ts
@@ -0,0 +1,127 @@
+/* eslint-disable lit/no-template-arrow */
+import { LitElement, TemplateResult, html } from "lit";
+import { customElement, state } from "lit/decorators";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import type { HomeAssistant } from "../../../src/types";
+import "../components/demo-black-white-row";
+import { mockEntityRegistry } from "../../../demo/src/stubs/entity_registry";
+import { mockDeviceRegistry } from "../../../demo/src/stubs/device_registry";
+import { mockAreaRegistry } from "../../../demo/src/stubs/area_registry";
+import { mockHassioSupervisor } from "../../../demo/src/stubs/hassio_supervisor";
+import type { Condition } from "../../../src/data/automation";
+import "../../../src/panels/config/automation/condition/ha-automation-condition";
+import { HaDeviceCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-device";
+import { HaLogicalCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-logical";
+import HaNumericStateCondition from "../../../src/panels/config/automation/condition/types/ha-automation-condition-numeric_state";
+import { HaStateCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-state";
+import { HaSunCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-sun";
+import { HaTemplateCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-template";
+import { HaTimeCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-time";
+import { HaTriggerCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-trigger";
+import { HaZoneCondition } from "../../../src/panels/config/automation/condition/types/ha-automation-condition-zone";
+
+const SCHEMAS: { name: string; conditions: Condition[] }[] = [
+  {
+    name: "State",
+    conditions: [{ condition: "state", ...HaStateCondition.defaultConfig }],
+  },
+  {
+    name: "Numeric State",
+    conditions: [
+      { condition: "numeric_state", ...HaNumericStateCondition.defaultConfig },
+    ],
+  },
+  {
+    name: "Sun",
+    conditions: [{ condition: "sun", ...HaSunCondition.defaultConfig }],
+  },
+  {
+    name: "Zone",
+    conditions: [{ condition: "zone", ...HaZoneCondition.defaultConfig }],
+  },
+  {
+    name: "Time",
+    conditions: [{ condition: "time", ...HaTimeCondition.defaultConfig }],
+  },
+  {
+    name: "Template",
+    conditions: [
+      { condition: "template", ...HaTemplateCondition.defaultConfig },
+    ],
+  },
+  {
+    name: "Device",
+    conditions: [{ condition: "device", ...HaDeviceCondition.defaultConfig }],
+  },
+  {
+    name: "And",
+    conditions: [{ condition: "and", ...HaLogicalCondition.defaultConfig }],
+  },
+  {
+    name: "Or",
+    conditions: [{ condition: "or", ...HaLogicalCondition.defaultConfig }],
+  },
+  {
+    name: "Not",
+    conditions: [{ condition: "not", ...HaLogicalCondition.defaultConfig }],
+  },
+  {
+    name: "Trigger",
+    conditions: [{ condition: "trigger", ...HaTriggerCondition.defaultConfig }],
+  },
+];
+
+@customElement("demo-automation-editor-condition")
+class DemoHaAutomationEditorCondition extends LitElement {
+  @state() private hass!: HomeAssistant;
+
+  private data: any = SCHEMAS.map((info) => info.conditions);
+
+  constructor() {
+    super();
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
+    mockEntityRegistry(hass);
+    mockDeviceRegistry(hass);
+    mockAreaRegistry(hass);
+    mockHassioSupervisor(hass);
+  }
+
+  protected render(): TemplateResult {
+    const valueChanged = (ev) => {
+      const sampleIdx = ev.target.sampleIdx;
+      this.data[sampleIdx] = ev.detail.value;
+      this.requestUpdate();
+    };
+    return html`
+      ${SCHEMAS.map(
+        (info, sampleIdx) => html`
+          <demo-black-white-row
+            .title=${info.name}
+            .value=${this.data[sampleIdx]}
+          >
+            ${["light", "dark"].map(
+              (slot) =>
+                html`
+                  <ha-automation-condition
+                    slot=${slot}
+                    .hass=${this.hass}
+                    .conditions=${this.data[sampleIdx]}
+                    .sampleIdx=${sampleIdx}
+                    @value-changed=${valueChanged}
+                  ></ha-automation-condition>
+                `
+            )}
+          </demo-black-white-row>
+        `
+      )}
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-automation-editor-condition": DemoHaAutomationEditorCondition;
+  }
+}
--- a/gallery/src/demos/demo-automation-editor-trigger.ts
+++ b/gallery/src/demos/demo-automation-editor-trigger.ts
@@ -0,0 +1,159 @@
+/* eslint-disable lit/no-template-arrow */
+import { LitElement, TemplateResult, html } from "lit";
+import { customElement, state } from "lit/decorators";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import type { HomeAssistant } from "../../../src/types";
+import "../components/demo-black-white-row";
+import { mockEntityRegistry } from "../../../demo/src/stubs/entity_registry";
+import { mockDeviceRegistry } from "../../../demo/src/stubs/device_registry";
+import { mockAreaRegistry } from "../../../demo/src/stubs/area_registry";
+import { mockHassioSupervisor } from "../../../demo/src/stubs/hassio_supervisor";
+import type { Trigger } from "../../../src/data/automation";
+import { HaGeolocationTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-geo_location";
+import { HaEventTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-event";
+import { HaHassTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-homeassistant";
+import { HaNumericStateTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-numeric_state";
+import { HaSunTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-sun";
+import { HaTagTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-tag";
+import { HaTemplateTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-template";
+import { HaTimeTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-time";
+import { HaTimePatternTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-time_pattern";
+import { HaWebhookTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-webhook";
+import { HaZoneTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-zone";
+import { HaDeviceTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-device";
+import { HaStateTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-state";
+import { HaMQTTTrigger } from "../../../src/panels/config/automation/trigger/types/ha-automation-trigger-mqtt";
+import "../../../src/panels/config/automation/trigger/ha-automation-trigger";
+
+const SCHEMAS: { name: string; triggers: Trigger[] }[] = [
+  {
+    name: "State",
+    triggers: [{ platform: "state", ...HaStateTrigger.defaultConfig }],
+  },
+
+  {
+    name: "MQTT",
+    triggers: [{ platform: "mqtt", ...HaMQTTTrigger.defaultConfig }],
+  },
+
+  {
+    name: "GeoLocation",
+    triggers: [
+      { platform: "geo_location", ...HaGeolocationTrigger.defaultConfig },
+    ],
+  },
+
+  {
+    name: "Home Assistant",
+    triggers: [{ platform: "homeassistant", ...HaHassTrigger.defaultConfig }],
+  },
+
+  {
+    name: "Numeric State",
+    triggers: [
+      { platform: "numeric_state", ...HaNumericStateTrigger.defaultConfig },
+    ],
+  },
+
+  {
+    name: "Sun",
+    triggers: [{ platform: "sun", ...HaSunTrigger.defaultConfig }],
+  },
+
+  {
+    name: "Time Pattern",
+    triggers: [
+      { platform: "time_pattern", ...HaTimePatternTrigger.defaultConfig },
+    ],
+  },
+
+  {
+    name: "Webhook",
+    triggers: [{ platform: "webhook", ...HaWebhookTrigger.defaultConfig }],
+  },
+
+  {
+    name: "Zone",
+    triggers: [{ platform: "zone", ...HaZoneTrigger.defaultConfig }],
+  },
+
+  {
+    name: "Tag",
+    triggers: [{ platform: "tag", ...HaTagTrigger.defaultConfig }],
+  },
+
+  {
+    name: "Time",
+    triggers: [{ platform: "time", ...HaTimeTrigger.defaultConfig }],
+  },
+
+  {
+    name: "Template",
+    triggers: [{ platform: "template", ...HaTemplateTrigger.defaultConfig }],
+  },
+
+  {
+    name: "Event",
+    triggers: [{ platform: "event", ...HaEventTrigger.defaultConfig }],
+  },
+
+  {
+    name: "Device Trigger",
+    triggers: [{ platform: "device", ...HaDeviceTrigger.defaultConfig }],
+  },
+];
+
+@customElement("demo-automation-editor-trigger")
+class DemoHaAutomationEditorTrigger extends LitElement {
+  @state() private hass!: HomeAssistant;
+
+  private data: any = SCHEMAS.map((info) => info.triggers);
+
+  constructor() {
+    super();
+    const hass = provideHass(this);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("config", "en");
+    mockEntityRegistry(hass);
+    mockDeviceRegistry(hass);
+    mockAreaRegistry(hass);
+    mockHassioSupervisor(hass);
+  }
+
+  protected render(): TemplateResult {
+    const valueChanged = (ev) => {
+      const sampleIdx = ev.target.sampleIdx;
+      this.data[sampleIdx] = ev.detail.value;
+      this.requestUpdate();
+    };
+    return html`
+      ${SCHEMAS.map(
+        (info, sampleIdx) => html`
+          <demo-black-white-row
+            .title=${info.name}
+            .value=${this.data[sampleIdx]}
+          >
+            ${["light", "dark"].map(
+              (slot) =>
+                html`
+                  <ha-automation-trigger
+                    slot=${slot}
+                    .hass=${this.hass}
+                    .triggers=${this.data[sampleIdx]}
+                    .sampleIdx=${sampleIdx}
+                    @value-changed=${valueChanged}
+                  ></ha-automation-trigger>
+                `
+            )}
+          </demo-black-white-row>
+        `
+      )}
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-automation-editor-trigger": DemoHaAutomationEditorTrigger;
+  }
+}
--- a/gallery/src/demos/demo-ha-alert.ts
+++ b/gallery/src/demos/demo-ha-alert.ts
@@ -1,15 +1,19 @@
-import { html, css, LitElement, TemplateResult } from "lit";
+import "@material/mwc-button/mwc-button";
+import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
+import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 import "../../../src/components/ha-alert";
 import "../../../src/components/ha-card";
+import "../../../src/components/ha-logo-svg";

 const alerts: {
  title?: string;
  description: string | TemplateResult;
  type: "info" | "warning" | "error" | "success";
  dismissable?: boolean;
-  action?: string;
  rtl?: boolean;
+  iconSlot?: TemplateResult;
+  actionSlot?: TemplateResult;
 }[] = [
  {
    title: "Test info alert",
@@ -73,13 +77,35 @@ const alerts: {
    title: "Error with action",
    description: "This is a test error alert with action",
    type: "error",
-    action: "restart",
+    actionSlot: html`<mwc-button slot="action" label="restart"></mwc-button>`,
  },
  {
    title: "Unsaved data",
    description: "You have unsaved data",
    type: "warning",
-    action: "save",
+    actionSlot: html`<mwc-button slot="action" label="save"></mwc-button>`,
+  },
+  {
+    title: "Slotted icon",
+    description: "Alert with slotted icon",
+    type: "warning",
+    iconSlot: html`<span slot="icon" class="image">
+      <ha-logo-svg></ha-logo-svg>
+    </span>`,
+  },
+  {
+    title: "Slotted image",
+    description: "Alert with slotted image",
+    type: "warning",
+    iconSlot: html`<span slot="icon" class="image"
+      ><img src="https://www.home-assistant.io/images/home-assistant-logo.svg"
+    /></span>`,
+  },
+  {
+    title: "Slotted action",
+    description: "Alert with slotted action",
+    type: "info",
+    actionSlot: html`<mwc-button slot="action" label="action"></mwc-button>`,
  },
  {
    description: "Dismissable information (RTL)",
@@ -91,7 +117,7 @@ const alerts: {
    title: "Error with action",
    description: "This is a test error alert with action (RTL)",
    type: "error",
-    action: "restart",
+    actionSlot: html`<mwc-button slot="action" label="restart"></mwc-button>`,
    rtl: true,
  },
  {
@@ -106,30 +132,56 @@ const alerts: {
 export class DemoHaAlert extends LitElement {
  protected render(): TemplateResult {
    return html`
-      <ha-card header="ha-alert demo">
-        <div class="card-content">
-          ${alerts.map(
-            (alert) => html`
-              <ha-alert
-                .title=${alert.title || ""}
-                .alertType=${alert.type}
-                .dismissable=${alert.dismissable || false}
-                .actionText=${alert.action || ""}
-                .rtl=${alert.rtl || false}
-              >
-                ${alert.description}
-              </ha-alert>
-            `
-          )}
-        </div>
-      </ha-card>
+      ${["light", "dark"].map(
+        (mode) => html`
+          <div class=${mode}>
+            <ha-card header="ha-alert ${mode} demo">
+              <div class="card-content">
+                ${alerts.map(
+                  (alert) => html`
+                    <ha-alert
+                      .title=${alert.title || ""}
+                      .alertType=${alert.type}
+                      .dismissable=${alert.dismissable || false}
+                      .rtl=${alert.rtl || false}
+                    >
+                      ${alert.iconSlot} ${alert.description} ${alert.actionSlot}
+                    </ha-alert>
+                  `
+                )}
+              </div>
+            </ha-card>
+          </div>
+        `
+      )}
    `;
  }

+  firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    applyThemesOnElement(this.shadowRoot!.querySelector(".dark"), {
+      default_theme: "default",
+      default_dark_theme: "default",
+      themes: {},
+      darkMode: true,
+      theme: "default",
+    });
+  }
+
  static get styles() {
    return css`
+      :host {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+      }
+      .dark,
+      .light {
+        display: block;
+        background-color: var(--primary-background-color);
+        padding: 0 50px;
+      }
      ha-card {
-        max-width: 600px;
        margin: 24px auto;
      }
      ha-alert {
@@ -142,8 +194,17 @@ export class DemoHaAlert extends LitElement {
        align-items: center;
        justify-content: space-between;
      }
-      span {
-        margin-right: 16px;
+      .image {
+        display: inline-flex;
+        height: 100%;
+        align-items: center;
+      }
+      img {
+        max-height: 24px;
+        width: 24px;
+      }
+      mwc-button {
+        --mdc-theme-primary: var(--primary-text-color);
      }
    `;
  }
--- a/gallery/src/demos/demo-ha-chips.ts
+++ b/gallery/src/demos/demo-ha-chips.ts
@@ -3,6 +3,7 @@ import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-chip";
+import "../../../src/components/ha-chip-set";
 import "../../../src/components/ha-svg-icon";

 const chips: {
@@ -22,8 +23,8 @@ const chips: {
  },
 ];

-@customElement("demo-ha-chip")
-export class DemoHaChip extends LitElement {
+@customElement("demo-ha-chips")
+export class DemoHaChips extends LitElement {
  protected render(): TemplateResult {
    return html`
      <ha-card header="ha-chip demo">
@@ -41,6 +42,23 @@ export class DemoHaChip extends LitElement {
          )}
        </div>
      </ha-card>
+      <ha-card header="ha-chip-set demo">
+        <div class="card-content">
+          <ha-chip-set>
+            ${chips.map(
+              (chip) => html`
+                <ha-chip .hasIcon=${chip.icon !== undefined}>
+                  ${chip.icon
+                    ? html`<ha-svg-icon slot="icon" .path=${chip.icon}>
+                      </ha-svg-icon>`
+                    : ""}
+                  ${chip.content}
+                </ha-chip>
+              `
+            )}
+          </ha-chip-set>
+        </div>
+      </ha-card>
    `;
  }

@@ -50,12 +68,19 @@ export class DemoHaChip extends LitElement {
        max-width: 600px;
        margin: 24px auto;
      }
+      ha-chip {
+        margin-bottom: 4px;
+      }
+      .card-content {
+        display: flex;
+        flex-direction: column;
+      }
    `;
  }
 }

 declare global {
  interface HTMLElementTagNameMap {
-    "demo-ha-chip": DemoHaChip;
+    "demo-ha-chips": DemoHaChips;
  }
 }
--- a/gallery/src/demos/demo-ha-faded.ts
+++ b/gallery/src/demos/demo-ha-faded.ts
@@ -0,0 +1,88 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
+import "../../../src/components/ha-card";
+import "../../../src/components/ha-faded";
+import "../../../src/components/ha-markdown";
+
+const LONG_TEXT = `
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc laoreet velit ut elit volutpat, eget ultrices odio lacinia. In imperdiet malesuada est, nec sagittis metus ultricies quis. Sed nisl ex, convallis porttitor ante quis, hendrerit tristique justo. Mauris pharetra venenatis augue, eu maximus sem cursus in. Quisque sed consequat risus. Suspendisse facilisis ligula a odio consectetur condimentum. Curabitur vehicula elit nec augue mollis, et volutpat massa dictum.
+
+Nam pellentesque auctor rutrum. Suspendisse elit est, sodales vel diam nec, porttitor faucibus massa. Ut pretium ac orci eu pharetra. Praesent in nibh at magna viverra rutrum eu vitae tortor. Etiam eget sem ex. Fusce tristique odio nec lacus mattis, vitae tempor nunc malesuada. Maecenas faucibus magna vel libero maximus egestas. Vestibulum luctus semper velit, in lobortis risus tempus non. Curabitur bibendum ornare commodo. Quisque commodo neque sit amet tincidunt lacinia. Proin elementum ante velit, eu congue nulla semper quis. Pellentesque consequat vel nunc at scelerisque. Mauris sit amet venenatis diam, blandit viverra leo. Integer commodo laoreet orci.
+
+Curabitur ipsum tortor, sodales ut augue sed, commodo porttitor libero. Pellentesque molestie vitae mi consectetur tempor. In sed lectus consequat, lobortis neque non, semper ipsum. Etiam eget ex et nibh sagittis pulvinar lacinia ac mauris. Aenean ligula eros, viverra ac nibh at, venenatis semper quam. Sed interdum ligula sit amet massa tincidunt tincidunt. Suspendisse potenti. Aliquam egestas facilisis est, sed faucibus erat scelerisque id. Duis dolor quam, viverra vitae orci euismod, laoreet pellentesque justo. Nunc malesuada non erat at ullamcorper. Mauris eget posuere odio. Vestibulum turpis nunc, pharetra eget ante in, feugiat mollis justo. Proin porttitor, diam nec vulputate pretium, tellus arcu rhoncus turpis, a blandit nisi nulla quis arcu. Nunc ac ullamcorper ligula, nec facilisis leo.
+
+In vitae eros sollicitudin, iaculis ex eget, egestas orci. Etiam sed pretium lorem. Nam nisi enim, consectetur sit amet semper ac, semper pharetra diam. In pulvinar neque sapien, ac ullamcorper est lacinia a. Etiam tincidunt velit sed diam malesuada, eu ornare ex consectetur. Phasellus in imperdiet tellus. Sed bibendum, dui sit amet fringilla aliquet, enim odio sollicitudin lorem, vel semper turpis mauris vel mauris. Aenean congue magna ac massa cursus, in dictum orci commodo. Pellentesque mollis velit in sollicitudin tincidunt. Vestibulum et efficitur nulla.
+
+Quisque posuere, velit sed porttitor dapibus, neque augue fringilla felis, eu luctus nisi nisl nec ipsum. Curabitur pellentesque ac lectus eget ultricies. Vestibulum est dolor, lacinia pharetra vulputate a, facilisis a magna. Nam vitae arcu nibh. Praesent finibus blandit ante, ac gravida ex mollis eget. Donec quam est, pulvinar vitae neque ut, bibendum aliquam erat. Nullam mollis arcu at sem tincidunt, in tristique lectus facilisis. Aenean ut lacus vel nisl finibus iaculis non a turpis. Integer eget ipsum ante. Donec nunc neque, vestibulum ac magna ac, posuere scelerisque dui. Pellentesque massa nibh, rhoncus id dolor quis, placerat posuere turpis. Donec aliquet augue nisi, eu finibus dui auctor et. Vestibulum eu varius lorem. Quisque lectus ante, malesuada pretium risus eget, interdum mattis enim.
+`;
+
+const SMALL_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
+
+@customElement("demo-ha-faded")
+export class DemoHaFaded extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      <ha-card header="ha-faded demo">
+        <div class="card-content">
+          <h3>Long text directly as slotted content</h3>
+          <ha-faded>${LONG_TEXT}</ha-faded>
+          <h3>Long text with slotted element</h3>
+          <ha-faded><span>${LONG_TEXT}</span></ha-faded>
+          <h3>No text</h3>
+          <ha-faded><span></span></ha-faded>
+          <h3>Smal text</h3>
+          <ha-faded><span>${SMALL_TEXT}</span></ha-faded>
+          <h3>Long text in markdown</h3>
+          <ha-faded>
+            <ha-markdown .content=${LONG_TEXT}> </ha-markdown>
+          </ha-faded>
+          <h3>Missing 1px from hiding</h3>
+          <ha-faded faded-height="87">
+            <span>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
+              laoreet velit ut elit volutpat, eget ultrices odio lacinia. In
+              imperdiet malesuada est, nec sagittis metus ultricies quis. Sed
+              nisl ex, convallis porttitor ante quis, hendrerit tristique justo.
+              Mauris pharetra venenatis augue, eu maximus sem cursus in. Quisque
+              sed consequat risus. Suspendisse facilisis ligula a odio
+              consectetur condimentum. Curabitur vehicula elit nec augue mollis,
+              et volutpat massa dictum. Nam pellentesque auctor rutrum.
+              Suspendisse elit est, sodales vel diam nec, porttitor faucibus
+              massa. Ut pretium ac orci eu pharetra.
+            </span>
+          </ha-faded>
+          <h3>1px over hiding point</h3>
+          <ha-faded faded-height="85">
+            <span>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
+              laoreet velit ut elit volutpat, eget ultrices odio lacinia. In
+              imperdiet malesuada est, nec sagittis metus ultricies quis. Sed
+              nisl ex, convallis porttitor ante quis, hendrerit tristique justo.
+              Mauris pharetra venenatis augue, eu maximus sem cursus in. Quisque
+              sed consequat risus. Suspendisse facilisis ligula a odio
+              consectetur condimentum. Curabitur vehicula elit nec augue mollis,
+              et volutpat massa dictum. Nam pellentesque auctor rutrum.
+              Suspendisse elit est, sodales vel diam nec, porttitor faucibus
+              massa. Ut pretium ac orci eu pharetra.
+            </span>
+          </ha-faded>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-faded": DemoHaFaded;
+  }
+}
--- a/gallery/src/demos/demo-ha-form.ts
+++ b/gallery/src/demos/demo-ha-form.ts
@@ -222,6 +222,30 @@ const SCHEMAS: {
      },
    ],
  },
+  {
+    title: "OctoPrint",
+    translations: {
+      username: "Username",
+      host: "Host",
+      port: "Port Number",
+      path: "Application Path",
+      ssl: "Use SSL",
+    },
+    schema: [
+      { type: "string", name: "username", required: true, default: "" },
+      { type: "string", name: "host", required: true, default: "" },
+      {
+        type: "integer",
+        valueMin: 1,
+        valueMax: 65535,
+        name: "port",
+        optional: true,
+        default: 80,
+      },
+      { type: "string", name: "path", optional: true, default: "/" },
+      { type: "boolean", name: "ssl", optional: true, default: false },
+    ],
+  },
 ];

@customElement("demo-ha-form")
--- a/gallery/src/demos/demo-hui-area-card.ts
+++ b/gallery/src/demos/demo-hui-area-card.ts
@@ -0,0 +1,156 @@
+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";
+
+const ENTITIES = [
+  getEntity("light", "bed_light", "on", {
+    friendly_name: "Bed Light",
+  }),
+  getEntity("switch", "bed_ac", "on", {
+    friendly_name: "Ecobee",
+  }),
+  getEntity("sensor", "bed_temp", "72", {
+    friendly_name: "Bedroom Temp",
+    device_class: "temperature",
+    unit_of_measurement: "°F",
+  }),
+  getEntity("light", "living_room_light", "off", {
+    friendly_name: "Living Room Light",
+  }),
+  getEntity("fan", "living_room", "on", {
+    friendly_name: "Living Room Fan",
+  }),
+  getEntity("sensor", "office_humidity", "73", {
+    friendly_name: "Office Humidity",
+    device_class: "humidity",
+    unit_of_measurement: "%",
+  }),
+  getEntity("light", "office", "on", {
+    friendly_name: "Office Light",
+  }),
+  getEntity("fan", "kitchen", "on", {
+    friendly_name: "Second Office Fan",
+  }),
+  getEntity("binary_sensor", "kitchen_door", "on", {
+    friendly_name: "Office Door",
+    device_class: "door",
+  }),
+];
+
+// TODO: Update image here
+const CONFIGS = [
+  {
+    heading: "Bedroom",
+    config: `
+- type: area
+  area: bedroom
+  image: "/images/bed.png"
+    `,
+  },
+  {
+    heading: "Living Room",
+    config: `
+- type: area
+  area: living_room
+  image: "/images/living_room.png"
+    `,
+  },
+  {
+    heading: "Office",
+    config: `
+- type: area
+  area: office
+  image: "/images/office.jpg"
+    `,
+  },
+  {
+    heading: "Kitchen",
+    config: `
+- type: area
+  area: kitchen
+  image: "/images/kitchen.png"
+    `,
+  },
+];
+
+@customElement("demo-hui-area-card")
+class DemoArea extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
+    hass.addEntities(ENTITIES);
+    hass.mockWS("config/area_registry/list", () => [
+      {
+        name: "Bedroom",
+        area_id: "bedroom",
+      },
+      {
+        name: "Living Room",
+        area_id: "living_room",
+      },
+      {
+        name: "Office",
+        area_id: "office",
+      },
+      {
+        name: "Second Office",
+        area_id: "kitchen",
+      },
+    ]);
+    hass.mockWS("config/device_registry/list", () => []);
+    hass.mockWS("config/entity_registry/list", () => [
+      {
+        area_id: "bedroom",
+        entity_id: "light.bed_light",
+      },
+      {
+        area_id: "bedroom",
+        entity_id: "switch.bed_ac",
+      },
+      {
+        area_id: "bedroom",
+        entity_id: "sensor.bed_temp",
+      },
+      {
+        area_id: "living_room",
+        entity_id: "light.living_room_light",
+      },
+      {
+        area_id: "living_room",
+        entity_id: "fan.living_room",
+      },
+      {
+        area_id: "office",
+        entity_id: "light.office",
+      },
+      {
+        area_id: "office",
+        entity_id: "sensor.office_humidity",
+      },
+      {
+        area_id: "kitchen",
+        entity_id: "fan.kitchen",
+      },
+      {
+        area_id: "kitchen",
+        entity_id: "binary_sensor.kitchen_door",
+      },
+    ]);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-hui-area-card": DemoArea;
+  }
+}
--- a/gallery/src/demos/demo-integration-card.ts
+++ b/gallery/src/demos/demo-integration-card.ts
@@ -206,6 +206,7 @@ const createDeviceRegistryEntries = (
    model: "Mock Device",
    name: "Tag Reader",
    sw_version: null,
+    hw_version: "1.0.0",
    id: "mock-device-id",
    identifiers: [],
    via_device_id: null,
--- a/gallery/src/demos/demo-more-info-cover.ts
+++ b/gallery/src/demos/demo-more-info-cover.ts
@@ -0,0 +1,164 @@
+import { html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import "../../../src/components/ha-card";
+import {
+  SUPPORT_OPEN,
+  SUPPORT_STOP,
+  SUPPORT_CLOSE,
+  SUPPORT_SET_POSITION,
+  SUPPORT_OPEN_TILT,
+  SUPPORT_STOP_TILT,
+  SUPPORT_CLOSE_TILT,
+  SUPPORT_SET_TILT_POSITION,
+} from "../../../src/data/cover";
+import "../../../src/dialogs/more-info/more-info-content";
+import { getEntity } from "../../../src/fake_data/entity";
+import {
+  MockHomeAssistant,
+  provideHass,
+} from "../../../src/fake_data/provide_hass";
+import "../components/demo-more-infos";
+
+const ENTITIES = [
+  getEntity("cover", "position_buttons", "on", {
+    friendly_name: "Position Buttons",
+    supported_features: SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE,
+  }),
+  getEntity("cover", "position_slider_half", "on", {
+    friendly_name: "Position Half-Open",
+    supported_features:
+      SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
+    current_position: 50,
+  }),
+  getEntity("cover", "position_slider_open", "on", {
+    friendly_name: "Position Open",
+    supported_features:
+      SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
+    current_position: 100,
+  }),
+  getEntity("cover", "position_slider_closed", "on", {
+    friendly_name: "Position Closed",
+    supported_features:
+      SUPPORT_OPEN + SUPPORT_STOP + SUPPORT_CLOSE + SUPPORT_SET_POSITION,
+    current_position: 0,
+  }),
+  getEntity("cover", "tilt_buttons", "on", {
+    friendly_name: "Tilt Buttons",
+    supported_features:
+      SUPPORT_OPEN_TILT + SUPPORT_STOP_TILT + SUPPORT_CLOSE_TILT,
+  }),
+  getEntity("cover", "tilt_slider_half", "on", {
+    friendly_name: "Tilt Half-Open",
+    supported_features:
+      SUPPORT_OPEN_TILT +
+      SUPPORT_STOP_TILT +
+      SUPPORT_CLOSE_TILT +
+      SUPPORT_SET_TILT_POSITION,
+    current_tilt_position: 50,
+  }),
+  getEntity("cover", "tilt_slider_open", "on", {
+    friendly_name: "Tilt Open",
+    supported_features:
+      SUPPORT_OPEN_TILT +
+      SUPPORT_STOP_TILT +
+      SUPPORT_CLOSE_TILT +
+      SUPPORT_SET_TILT_POSITION,
+    current_tilt_position: 100,
+  }),
+  getEntity("cover", "tilt_slider_closed", "on", {
+    friendly_name: "Tilt Closed",
+    supported_features:
+      SUPPORT_OPEN_TILT +
+      SUPPORT_STOP_TILT +
+      SUPPORT_CLOSE_TILT +
+      SUPPORT_SET_TILT_POSITION,
+    current_tilt_position: 0,
+  }),
+  getEntity("cover", "position_slider_tilt_slider", "on", {
+    friendly_name: "Both Sliders",
+    supported_features:
+      SUPPORT_OPEN +
+      SUPPORT_STOP +
+      SUPPORT_CLOSE +
+      SUPPORT_SET_POSITION +
+      SUPPORT_OPEN_TILT +
+      SUPPORT_STOP_TILT +
+      SUPPORT_CLOSE_TILT +
+      SUPPORT_SET_TILT_POSITION,
+    current_position: 30,
+    current_tilt_position: 70,
+  }),
+  getEntity("cover", "position_tilt_slider", "on", {
+    friendly_name: "Position & Tilt Slider",
+    supported_features:
+      SUPPORT_OPEN +
+      SUPPORT_STOP +
+      SUPPORT_CLOSE +
+      SUPPORT_OPEN_TILT +
+      SUPPORT_STOP_TILT +
+      SUPPORT_CLOSE_TILT +
+      SUPPORT_SET_TILT_POSITION,
+    current_tilt_position: 70,
+  }),
+  getEntity("cover", "position_slider_tilt", "on", {
+    friendly_name: "Position Slider & Tilt",
+    supported_features:
+      SUPPORT_OPEN +
+      SUPPORT_STOP +
+      SUPPORT_CLOSE +
+      SUPPORT_SET_POSITION +
+      SUPPORT_OPEN_TILT +
+      SUPPORT_STOP_TILT +
+      SUPPORT_CLOSE_TILT,
+    current_position: 30,
+  }),
+  getEntity("cover", "position_slider_only_tilt_slider", "on", {
+    friendly_name: "Position Slider Only & Tilt Buttons",
+    supported_features:
+      SUPPORT_SET_POSITION +
+      SUPPORT_OPEN_TILT +
+      SUPPORT_STOP_TILT +
+      SUPPORT_CLOSE_TILT,
+    current_position: 30,
+  }),
+  getEntity("cover", "position_slider_only_tilt", "on", {
+    friendly_name: "Position Slider Only & Tilt",
+    supported_features:
+      SUPPORT_SET_POSITION +
+      SUPPORT_OPEN_TILT +
+      SUPPORT_STOP_TILT +
+      SUPPORT_CLOSE_TILT +
+      SUPPORT_SET_TILT_POSITION,
+    current_position: 30,
+    current_tilt_position: 70,
+  }),
+];
+
+@customElement("demo-more-info-cover")
+class DemoMoreInfoCover extends LitElement {
+  @property() public hass!: MockHomeAssistant;
+
+  @query("demo-more-infos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`
+      <demo-more-infos
+        .hass=${this.hass}
+        .entities=${ENTITIES.map((ent) => ent.entityId)}
+      ></demo-more-infos>
+    `;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.addEntities(ENTITIES);
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-more-info-cover": DemoMoreInfoCover;
+  }
+}
--- a/gallery/src/ha-gallery.js
+++ b/gallery/src/ha-gallery.js
@@ -176,11 +176,6 @@ class HaGallery extends PolymerElement {
    this.addEventListener("alert-dismissed-clicked", () =>
      this.$.notifications.showDialog({ message: "Alert dismissed clicked" })
    );
-
-    this.addEventListener("alert-action-clicked", () =>
-      this.$.notifications.showDialog({ message: "Alert action clicked" })
-    );
-
    this.addEventListener("hass-more-info", (ev) => {
      if (ev.detail.entityId) {
        this.$.notifications.showDialog({
--- a/hassio/src/addon-store/hassio-addon-store.ts
+++ b/hassio/src/addon-store/hassio-addon-store.ts
@@ -25,11 +25,10 @@ import {
 } from "../../../src/data/hassio/addon";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import "../../../src/layouts/hass-loading-screen";
-import "../../../src/layouts/hass-tabs-subpage";
+import "../../../src/layouts/hass-subpage";
 import { HomeAssistant, Route } from "../../../src/types";
 import { showRegistriesDialog } from "../dialogs/registries/show-dialog-registries";
 import { showRepositoriesDialog } from "../dialogs/repositories/show-dialog-repositories";
-import { supervisorTabs } from "../hassio-tabs";
 import "./hassio-addon-repository";

 const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
@@ -76,16 +75,12 @@ class HassioAddonStore extends LitElement {
    }

    return html`
-      <hass-tabs-subpage
+      <hass-subpage
        .hass=${this.hass}
-        .localizeFunc=${this.supervisor.localize}
        .narrow=${this.narrow}
        .route=${this.route}
-        .tabs=${supervisorTabs}
-        main-page
-        supervisor
+        .header=${this.supervisor.localize("panel.store")}
      >
-        <span slot="header"> ${this.supervisor.localize("panel.store")} </span>
        <ha-button-menu
          corner="BOTTOM_START"
          slot="toolbar-icon"
@@ -133,7 +128,7 @@ class HassioAddonStore extends LitElement {
              </div>
            `
          : ""}
-      </hass-tabs-subpage>
+      </hass-subpage>
    `;
  }

--- a/hassio/src/addon-view/config/hassio-addon-config.ts
+++ b/hassio/src/addon-view/config/hassio-addon-config.ts
@@ -78,6 +78,18 @@ class HassioAddonConfig extends LitElement {
    this.addon.translations.en?.configuration?.[entry.name].name ||
    entry.name;

+  private _schema = memoizeOne((schema: HaFormSchema[]): HaFormSchema[] =>
+    // @ts-expect-error supervisor does not implement [string, string] for select.options[]
+    schema.map((entry) =>
+      entry.type === "select"
+        ? {
+            ...entry,
+            options: entry.options.map((option) => [option, option]),
+          }
+        : entry
+    )
+  );
+
  private _filteredShchema = memoizeOne(
    (options: Record<string, unknown>, schema: HaFormSchema[]) =>
      schema.filter((entry) => entry.name in options || entry.required)
@@ -128,12 +140,14 @@ class HassioAddonConfig extends LitElement {
                .data=${this._options!}
                @value-changed=${this._configChanged}
                .computeLabel=${this.computeLabel}
-                .schema=${this._showOptional
-                  ? this.addon.schema!
-                  : this._filteredShchema(
-                      this.addon.options,
-                      this.addon.schema!
-                    )}
+                .schema=${this._schema(
+                  this._showOptional
+                    ? this.addon.schema!
+                    : this._filteredShchema(
+                        this.addon.options,
+                        this.addon.schema!
+                      )
+                )}
              ></ha-form>`
            : html` <ha-yaml-editor
                @value-changed=${this._configChanged}
--- a/hassio/src/addon-view/hassio-addon-dashboard.ts
+++ b/hassio/src/addon-view/hassio-addon-dashboard.ts
@@ -108,7 +108,6 @@ class HassioAddonDashboard extends LitElement {
        .hass=${this.hass}
        .localizeFunc=${this.supervisor.localize}
        .narrow=${this.narrow}
-        .backPath=${this.addon.version ? "/hassio/dashboard" : "/hassio/store"}
        .route=${route}
        .tabs=${addonTabs}
        supervisor
--- a/hassio/src/addon-view/info/hassio-addon-info-tab.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info-tab.ts
@@ -4,7 +4,7 @@ import "../../../../src/components/ha-circular-progress";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
-import { HomeAssistant } from "../../../../src/types";
+import { HomeAssistant, Route } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
 import "./hassio-addon-info";

@@ -12,6 +12,8 @@ import "./hassio-addon-info";
 class HassioAddonInfoDashboard extends LitElement {
  @property({ type: Boolean }) public narrow!: boolean;

+  @property({ attribute: false }) public route!: Route;
+
  @property({ attribute: false }) public hass!: HomeAssistant;

  @property({ attribute: false }) public supervisor!: Supervisor;
@@ -27,6 +29,7 @@ class HassioAddonInfoDashboard extends LitElement {
      <div class="content">
        <hassio-addon-info
          .narrow=${this.narrow}
+          .route=${this.route}
          .hass=${this.hass}
          .supervisor=${this.supervisor}
          .addon=${this.addon}
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info.ts
@@ -1,6 +1,5 @@
 import "@material/mwc-button";
 import {
-  mdiArrowUpBoldCircle,
  mdiCheckCircle,
  mdiChip,
  mdiCircle,
@@ -11,6 +10,12 @@ import {
  mdiHomeAssistant,
  mdiKey,
  mdiNetwork,
+  mdiNumeric1,
+  mdiNumeric2,
+  mdiNumeric3,
+  mdiNumeric4,
+  mdiNumeric5,
+  mdiNumeric6,
  mdiPound,
  mdiShield,
 } from "@mdi/js";
@@ -25,7 +30,7 @@ import "../../../../src/components/buttons/ha-call-api-button";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-label-badge";
+import "../../../../src/components/ha-chip";
 import "../../../../src/components/ha-markdown";
 import "../../../../src/components/ha-settings-row";
 import "../../../../src/components/ha-svg-icon";
@@ -43,7 +48,6 @@ import {
  startHassioAddon,
  stopHassioAddon,
  uninstallHassioAddon,
-  updateHassioAddon,
  validateHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
 import {
@@ -58,14 +62,14 @@ import {
  showConfirmationDialog,
 } from "../../../../src/dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../src/resources/styles";
-import { HomeAssistant } from "../../../../src/types";
+import { HomeAssistant, Route } from "../../../../src/types";
 import { bytesToString } from "../../../../src/util/bytes-to-string";
 import "../../components/hassio-card-content";
 import "../../components/supervisor-metric";
 import { showHassioMarkdownDialog } from "../../dialogs/markdown/show-dialog-hassio-markdown";
-import { showDialogSupervisorUpdate } from "../../dialogs/update/show-dialog-update";
 import { hassioStyle } from "../../resources/hassio-style";
-import { addonArchIsSupported } from "../../util/addon";
+import "../../update-available/update-available-card";
+import { addonArchIsSupported, extractChangelog } from "../../util/addon";

 const STAGE_ICON = {
  stable: mdiCheckCircle,
@@ -73,10 +77,21 @@ const STAGE_ICON = {
  deprecated: mdiExclamationThick,
 };

+const RATING_ICON = {
+  1: mdiNumeric1,
+  2: mdiNumeric2,
+  3: mdiNumeric3,
+  4: mdiNumeric4,
+  5: mdiNumeric5,
+  6: mdiNumeric6,
+};
+
@customElement("hassio-addon-info")
 class HassioAddonInfo extends LitElement {
  @property({ type: Boolean }) public narrow!: boolean;

+  @property({ attribute: false }) public route!: Route;
+
  @property({ attribute: false }) public hass!: HomeAssistant;

  @property({ attribute: false }) public addon!: HassioAddonDetails;
@@ -113,86 +128,33 @@ class HassioAddonInfo extends LitElement {
    return html`
      ${this.addon.update_available
        ? html`
-            <ha-card
-              .header="${this.supervisor.localize(
-                "common.update_available",
-                "count",
-                1
-              )}🎉"
-            >
-              <div class="card-content">
-                <hassio-card-content
-                  .hass=${this.hass}
-                  .title=${this.supervisor.localize(
-                    "addon.dashboard.new_update_available",
-                    "name",
-                    this.addon.name,
-                    "version",
-                    this.addon.version_latest
-                  )}
-                  .description=${this.supervisor.localize(
-                    "common.running_version",
-                    "version",
-                    this.addon.version
-                  )}
-                  icon=${mdiArrowUpBoldCircle}
-                  iconClass="update"
-                ></hassio-card-content>
-                ${!this.addon.available && addonStoreInfo
-                  ? !addonArchIsSupported(
-                      this.supervisor.info.supported_arch,
-                      this.addon.arch
-                    )
-                    ? html`
-                        <ha-alert alert-type="warning">
-                          ${this.supervisor.localize(
-                            "addon.dashboard.not_available_arch"
-                          )}
-                        </ha-alert>
-                      `
-                    : html`
-                        <ha-alert alert-type="warning">
-                          ${this.supervisor.localize(
-                            "addon.dashboard.not_available_arch",
-                            "core_version_installed",
-                            this.supervisor.core.version,
-                            "core_version_needed",
-                            addonStoreInfo.homeassistant
-                          )}
-                        </ha-alert>
-                      `
-                  : ""}
-              </div>
-              <div class="card-actions">
-                ${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>
+            <update-available-card
+              .hass=${this.hass}
+              .narrow=${this.narrow}
+              .supervisor=${this.supervisor}
+              .addonSlug=${this.addon.slug}
+            ></update-available-card>
          `
        : ""}
      ${!this.addon.protected
        ? html`
            <ha-alert
-              alert-type="warning"
+              alert-type="error"
              .title=${this.supervisor.localize(
                "addon.dashboard.protection_mode.title"
              )}
-              .actionText=${this.supervisor.localize(
-                "addon.dashboard.protection_mode.enable"
-              )}
-              @alert-action-clicked=${this._protectionToggled}
            >
              ${this.supervisor.localize(
                "addon.dashboard.protection_mode.content"
              )}
+              <mwc-button
+                slot="action"
+                .label=${this.supervisor.localize(
+                  "addon.dashboard.protection_mode.enable"
+                )}
+                @click=${this._protectionToggled}
+              >
+              </mwc-button>
            </ha-alert>
          `
        : ""}
@@ -246,6 +208,163 @@ class HassioAddonInfo extends LitElement {
                >`}
          </div>

+          <div class="capabilities">
+            ${this.addon.stage !== "stable"
+              ? html` <ha-chip
+                  hasIcon
+                  class=${classMap({
+                    yellow: this.addon.stage === "experimental",
+                    red: this.addon.stage === "deprecated",
+                  })}
+                  @click=${this._showMoreInfo}
+                  id="stage"
+                >
+                  <ha-svg-icon
+                    slot="icon"
+                    .path=${STAGE_ICON[this.addon.stage]}
+                  >
+                  </ha-svg-icon>
+                  ${this.supervisor.localize(
+                    `addon.dashboard.capability.stages.${this.addon.stage}`
+                  )}
+                </ha-chip>`
+              : ""}
+
+            <ha-chip
+              hasIcon
+              class=${classMap({
+                green: [5, 6].includes(Number(this.addon.rating)),
+                yellow: [3, 4].includes(Number(this.addon.rating)),
+                red: [1, 2].includes(Number(this.addon.rating)),
+              })}
+              @click=${this._showMoreInfo}
+              id="rating"
+            >
+              <ha-svg-icon slot="icon" .path=${RATING_ICON[this.addon.rating]}>
+              </ha-svg-icon>
+
+              ${this.supervisor.localize(
+                "addon.dashboard.capability.label.rating"
+              )}
+            </ha-chip>
+            ${this.addon.host_network
+              ? html`
+                  <ha-chip
+                    hasIcon
+                    @click=${this._showMoreInfo}
+                    id="host_network"
+                  >
+                    <ha-svg-icon slot="icon" .path=${mdiNetwork}> </ha-svg-icon>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.host"
+                    )}
+                  </ha-chip>
+                `
+              : ""}
+            ${this.addon.full_access
+              ? html`
+                  <ha-chip
+                    hasIcon
+                    @click=${this._showMoreInfo}
+                    id="full_access"
+                  >
+                    <ha-svg-icon slot="icon" .path=${mdiChip}></ha-svg-icon>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.hardware"
+                    )}
+                  </ha-chip>
+                `
+              : ""}
+            ${this.addon.homeassistant_api
+              ? html`
+                  <ha-chip
+                    hasIcon
+                    @click=${this._showMoreInfo}
+                    id="homeassistant_api"
+                  >
+                    <ha-svg-icon
+                      slot="icon"
+                      .path=${mdiHomeAssistant}
+                    ></ha-svg-icon>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.core"
+                    )}
+                  </ha-chip>
+                `
+              : ""}
+            ${this._computeHassioApi
+              ? html`
+                  <ha-chip hasIcon @click=${this._showMoreInfo} id="hassio_api">
+                    <ha-svg-icon
+                      slot="icon"
+                      .path=${mdiHomeAssistant}
+                    ></ha-svg-icon>
+                    ${this.supervisor.localize(
+                      `addon.dashboard.capability.role.${this.addon.hassio_role}`
+                    ) || this.addon.hassio_role}
+                  </ha-chip>
+                `
+              : ""}
+            ${this.addon.docker_api
+              ? html`
+                  <ha-chip hasIcon @click=${this._showMoreInfo} id="docker_api">
+                    <ha-svg-icon slot="icon" .path=${mdiDocker}></ha-svg-icon>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.docker"
+                    )}
+                  </ha-chip>
+                `
+              : ""}
+            ${this.addon.host_pid
+              ? html`
+                  <ha-chip hasIcon @click=${this._showMoreInfo} id="host_pid">
+                    <ha-svg-icon slot="icon" .path=${mdiPound}></ha-svg-icon>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.host_pid"
+                    )}
+                  </ha-chip>
+                `
+              : ""}
+            ${this.addon.apparmor !== "default"
+              ? html`
+                  <ha-chip
+                    hasIcon
+                    @click=${this._showMoreInfo}
+                    class=${this._computeApparmorClassName}
+                    id="apparmor"
+                  >
+                    <ha-svg-icon slot="icon" .path=${mdiShield}></ha-svg-icon>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.apparmor"
+                    )}
+                  </ha-chip>
+                `
+              : ""}
+            ${this.addon.auth_api
+              ? html`
+                  <ha-chip hasIcon @click=${this._showMoreInfo} id="auth_api">
+                    <ha-svg-icon slot="icon" .path=${mdiKey}></ha-svg-icon>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.auth"
+                    )}
+                  </ha-chip>
+                `
+              : ""}
+            ${this.addon.ingress
+              ? html`
+                  <ha-chip hasIcon @click=${this._showMoreInfo} id="ingress">
+                    <ha-svg-icon
+                      slot="icon"
+                      .path=${mdiCursorDefaultClickOutline}
+                    ></ha-svg-icon>
+                    ${this.supervisor.localize(
+                      "addon.dashboard.capability.label.ingress"
+                    )}
+                  </ha-chip>
+                `
+              : ""}
+          </div>
+
          <div class="description light-color">
            ${this.addon.description}.<br />
            ${this.supervisor.localize(
@@ -266,172 +385,6 @@ class HassioAddonInfo extends LitElement {
                    />
                  `
                : ""}
-              <div class="security">
-                ${this.addon.stage !== "stable"
-                  ? html` <ha-label-badge
-                      class=${classMap({
-                        yellow: this.addon.stage === "experimental",
-                        red: this.addon.stage === "deprecated",
-                      })}
-                      @click=${this._showMoreInfo}
-                      id="stage"
-                      .label=${this.supervisor.localize(
-                        "addon.dashboard.capability.label.stage"
-                      )}
-                      description=""
-                    >
-                      <ha-svg-icon
-                        .path=${STAGE_ICON[this.addon.stage]}
-                      ></ha-svg-icon>
-                    </ha-label-badge>`
-                  : ""}
-
-                <ha-label-badge
-                  class=${classMap({
-                    green: [5, 6].includes(Number(this.addon.rating)),
-                    yellow: [3, 4].includes(Number(this.addon.rating)),
-                    red: [1, 2].includes(Number(this.addon.rating)),
-                  })}
-                  @click=${this._showMoreInfo}
-                  id="rating"
-                  label="rating"
-                  description=""
-                >
-                  ${this.addon.rating}
-                </ha-label-badge>
-                ${this.addon.host_network
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        id="host_network"
-                        .label=${this.supervisor.localize(
-                          "addon.dashboard.capability.label.host"
-                        )}
-                        description=""
-                      >
-                        <ha-svg-icon .path=${mdiNetwork}></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-                ${this.addon.full_access
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        id="full_access"
-                        .label=${this.supervisor.localize(
-                          "addon.dashboard.capability.label.hardware"
-                        )}
-                        description=""
-                      >
-                        <ha-svg-icon .path=${mdiChip}></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-                ${this.addon.homeassistant_api
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        id="homeassistant_api"
-                        .label=${this.supervisor.localize(
-                          "addon.dashboard.capability.label.hass"
-                        )}
-                        description=""
-                      >
-                        <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-                ${this._computeHassioApi
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        id="hassio_api"
-                        .label=${this.supervisor.localize(
-                          "addon.dashboard.capability.label.hassio"
-                        )}
-                        .description=${this.supervisor.localize(
-                          `addon.dashboard.capability.role.${this.addon.hassio_role}`
-                        ) || this.addon.hassio_role}
-                      >
-                        <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-                ${this.addon.docker_api
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        id="docker_api"
-                        .label=${this.supervisor.localize(
-                          "addon.dashboard.capability.label.docker"
-                        )}
-                        description=""
-                      >
-                        <ha-svg-icon .path=${mdiDocker}></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-                ${this.addon.host_pid
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        id="host_pid"
-                        .label=${this.supervisor.localize(
-                          "addon.dashboard.capability.label.host_pid"
-                        )}
-                        description=""
-                      >
-                        <ha-svg-icon .path=${mdiPound}></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-                ${this.addon.apparmor
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        class=${this._computeApparmorClassName}
-                        id="apparmor"
-                        .label=${this.supervisor.localize(
-                          "addon.dashboard.capability.label.apparmor"
-                        )}
-                        description=""
-                      >
-                        <ha-svg-icon .path=${mdiShield}></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-                ${this.addon.auth_api
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        id="auth_api"
-                        .label=${this.supervisor.localize(
-                          "addon.dashboard.capability.label.auth"
-                        )}
-                        description=""
-                      >
-                        <ha-svg-icon .path=${mdiKey}></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-                ${this.addon.ingress
-                  ? html`
-                      <ha-label-badge
-                        @click=${this._showMoreInfo}
-                        id="ingress"
-                        .label=${this.supervisor.localize(
-                          "addon.dashboard.capability.label.ingress"
-                        )}
-                        description=""
-                      >
-                        <ha-svg-icon
-                          .path=${mdiCursorDefaultClickOutline}
-                        ></ha-svg-icon>
-                      </ha-label-badge>
-                    `
-                  : ""}
-              </div>
-
              ${this.addon.version
                ? html`
                    <div
@@ -893,22 +846,14 @@ class HassioAddonInfo extends LitElement {

  private async _openChangelog(): Promise<void> {
    try {
-      let content = await fetchHassioAddonChangelog(this.hass, this.addon.slug);
-      if (
-        content.includes(`# ${this.addon.version}`) &&
-        content.includes(`# ${this.addon.version_latest}`)
-      ) {
-        const newcontent = content.split(`# ${this.addon.version}`)[0];
-        if (newcontent.includes(`# ${this.addon.version_latest}`)) {
-          // Only change the content if the new version still exist
-          // if the changelog does not have the newests version on top
-          // this will not be true, and we don't modify the content
-          content = newcontent;
-        }
-      }
+      const content = await fetchHassioAddonChangelog(
+        this.hass,
+        this.addon.slug
+      );
+
      showHassioMarkdownDialog(this, {
        title: this.supervisor.localize("addon.dashboard.changelog"),
-        content,
+        content: extractChangelog(this.addon, content),
      });
    } catch (err: any) {
      showAlertDialog(this, {
@@ -983,33 +928,6 @@ class HassioAddonInfo extends LitElement {
    button.progress = false;
  }

-  private async _updateClicked(): Promise<void> {
-    showDialogSupervisorUpdate(this, {
-      supervisor: this.supervisor,
-      name: this.addon.name,
-      version: this.addon.version_latest,
-      backupParams: {
-        name: `addon_${this.addon.slug}_${this.addon.version}`,
-        addons: [this.addon.slug],
-        homeassistant: false,
-      },
-      updateHandler: async () => this._updateAddon(),
-    });
-  }
-
-  private async _updateAddon(): Promise<void> {
-    await updateHassioAddon(this.hass, this.addon.slug);
-    fireEvent(this, "supervisor-collection-refresh", {
-      collection: "addon",
-    });
-    const eventdata = {
-      success: true,
-      response: undefined,
-      path: "update",
-    };
-    fireEvent(this, "hass-api-called", eventdata);
-  }
-
  private async _startClicked(ev: CustomEvent): Promise<void> {
    const button = ev.currentTarget as any;
    button.progress = true;
@@ -1175,34 +1093,31 @@ class HassioAddonInfo extends LitElement {
        .description a {
          color: var(--primary-color);
        }
+        ha-chip {
+          text-transform: capitalize;
+          --ha-chip-text-color: var(--text-primary-color);
+          --ha-chip-background-color: var(--primary-color);
+        }
+
        .red {
-          --ha-label-badge-color: var(--label-badge-red, #df4c1e);
+          --ha-chip-background-color: var(--label-badge-red, #df4c1e);
        }
        .blue {
-          --ha-label-badge-color: var(--label-badge-blue, #039be5);
+          --ha-chip-background-color: var(--label-badge-blue, #039be5);
        }
        .green {
-          --ha-label-badge-color: var(--label-badge-green, #0da035);
+          --ha-chip-background-color: var(--label-badge-green, #0da035);
        }
        .yellow {
-          --ha-label-badge-color: var(--label-badge-yellow, #f4b400);
+          --ha-chip-background-color: var(--label-badge-yellow, #f4b400);
        }
-        .security {
+        .capabilities {
          margin-bottom: 16px;
        }
        .card-actions {
          justify-content: space-between;
          display: flex;
        }
-        .security h3 {
-          margin-bottom: 8px;
-          font-weight: normal;
-        }
-        .security ha-label-badge {
-          cursor: pointer;
-          margin-right: 4px;
-          --ha-label-badge-padding: 8px 0 0 0;
-        }
        .changelog {
          display: contents;
        }
@@ -1241,7 +1156,21 @@ class HassioAddonInfo extends LitElement {
          align-self: end;
        }

+        ha-alert mwc-button {
+          --mdc-theme-primary: var(--primary-text-color);
+        }
+        a {
+          text-decoration: none;
+        }
+
+        update-available-card {
+          padding-bottom: 16px;
+        }
+
        @media (max-width: 720px) {
+          ha-chip {
+            line-height: 36px;
+          }
          .addon-options {
            max-width: 100%;
          }
--- a/hassio/src/backups/hassio-backups.ts
+++ b/hassio/src/backups/hassio-backups.ts
@@ -158,7 +158,7 @@ export class HassioBackups extends LitElement {
    }
    return html`
      <hass-tabs-subpage-data-table
-        .tabs=${supervisorTabs}
+        .tabs=${supervisorTabs(this.hass)}
        .hass=${this.hass}
        .localizeFunc=${this.supervisor.localize}
        .searchLabel=${this.supervisor.localize("search")}
@@ -173,7 +173,8 @@ export class HassioBackups extends LitElement {
        clickable
        selectable
        hasFab
-        main-page
+        .mainPage=${!atLeastVersion(this.hass.config.version, 2021, 12)}
+        back-path="/config"
        supervisor
      >
        <ha-button-menu
--- a/hassio/src/components/hassio-upload-backup.ts
+++ b/hassio/src/components/hassio-upload-backup.ts
@@ -16,11 +16,9 @@ declare global {
  }
 }

-const MAX_FILE_SIZE = 1 * 1024 * 1024 * 1024; // 1GB
-
@customElement("hassio-upload-backup")
 export class HassioUploadBackup extends LitElement {
-  public hass!: HomeAssistant;
+  public hass?: HomeAssistant;

  @state() public value: string | null = null;

@@ -43,20 +41,6 @@ export class HassioUploadBackup extends LitElement {
  private async _uploadFile(ev) {
    const file = ev.detail.files[0];

-    if (file.size > MAX_FILE_SIZE) {
-      showAlertDialog(this, {
-        title: "Backup file is too big",
-        text: html`The maximum allowed filesize is 1GB.<br />
-          <a
-            href="https://www.home-assistant.io/hassio/haos_common_tasks/#restoring-a-backup-on-a-new-install"
-            target="_blank"
-            >Have a look here on how to restore it.</a
-          >`,
-        confirmText: "ok",
-      });
-      return;
-    }
-
    if (!["application/x-tar"].includes(file.type)) {
      showAlertDialog(this, {
        title: "Unsupported file format",
--- a/hassio/src/dashboard/hassio-addons.ts
+++ b/hassio/src/dashboard/hassio-addons.ts
@@ -20,7 +20,9 @@ class HassioAddons extends LitElement {
  protected render(): TemplateResult {
    return html`
      <div class="content">
-        <h1>${this.supervisor.localize("dashboard.addons")}</h1>
+        ${!atLeastVersion(this.hass.config.version, 2021, 12)
+          ? html` <h1>${this.supervisor.localize("dashboard.addons")}</h1> `
+          : ""}
        <div class="card-group">
          ${!this.supervisor.supervisor.addons?.length
            ? html`
--- a/hassio/src/dashboard/hassio-dashboard.ts
+++ b/hassio/src/dashboard/hassio-dashboard.ts
@@ -1,5 +1,8 @@
+import { mdiStorePlus } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
+import { atLeastVersion } from "../../../src/common/config/version";
+import "../../../src/components/ha-fab";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
@@ -25,23 +28,41 @@ class HassioDashboard extends LitElement {
        .localizeFunc=${this.supervisor.localize}
        .narrow=${this.narrow}
        .route=${this.route}
-        .tabs=${supervisorTabs}
-        main-page
+        .tabs=${supervisorTabs(this.hass)}
+        .mainPage=${!atLeastVersion(this.hass.config.version, 2021, 12)}
+        back-path="/config"
        supervisor
+        hasFab
      >
        <span slot="header">
-          ${this.supervisor.localize("panel.dashboard")}
+          ${this.supervisor.localize(
+            atLeastVersion(this.hass.config.version, 2021, 12)
+              ? "panel.addons"
+              : "panel.dashboard"
+          )}
        </span>
        <div class="content">
-          <hassio-update
-            .hass=${this.hass}
-            .supervisor=${this.supervisor}
-          ></hassio-update>
+          ${!atLeastVersion(this.hass.config.version, 2021, 12)
+            ? html`
+                <hassio-update
+                  .hass=${this.hass}
+                  .supervisor=${this.supervisor}
+                ></hassio-update>
+              `
+            : ""}
          <hassio-addons
            .hass=${this.hass}
            .supervisor=${this.supervisor}
          ></hassio-addons>
        </div>
+
+        <a href="/hassio/store" slot="fab">
+          <ha-fab .label=${this.supervisor.localize("panel.store")} extended>
+            <ha-svg-icon
+              slot="icon"
+              .path=${mdiStorePlus}
+            ></ha-svg-icon> </ha-fab
+        ></a>
      </hass-tabs-subpage>
    `;
  }
--- a/hassio/src/dashboard/hassio-update.ts
+++ b/hassio/src/dashboard/hassio-update.ts
@@ -3,34 +3,18 @@ import { mdiHomeAssistant } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { atLeastVersion } from "../../../src/common/config/version";
-import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-settings-row";
 import "../../../src/components/ha-svg-icon";
-import {
-  extractApiErrorMessage,
-  HassioResponse,
-  ignoreSupervisorError,
-} from "../../../src/data/hassio/common";
 import { HassioHassOSInfo } from "../../../src/data/hassio/host";
 import {
  HassioHomeAssistantInfo,
  HassioSupervisorInfo,
 } from "../../../src/data/hassio/supervisor";
-import { updateCore } from "../../../src/data/supervisor/core";
-import {
-  Supervisor,
-  supervisorApiWsRequest,
-} from "../../../src/data/supervisor/supervisor";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../../src/dialogs/generic/show-dialog-box";
+import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
-import { showDialogSupervisorUpdate } from "../dialogs/update/show-dialog-update";
 import { hassioStyle } from "../resources/hassio-style";

 const computeVersion = (key: string, version: string): string =>
@@ -73,26 +57,18 @@ export class HassioUpdate extends LitElement {
          ${this._renderUpdateCard(
            "Home Assistant Core",
            "core",
-            this.supervisor.core,
-            "hassio/homeassistant/update",
-            `https://${
-              this.supervisor.core.version_latest.includes("b") ? "rc" : "www"
-            }.home-assistant.io/latest-release-notes/`
+            this.supervisor.core
          )}
          ${this._renderUpdateCard(
            "Supervisor",
            "supervisor",
-            this.supervisor.supervisor,
-            "hassio/supervisor/update",
-            `https://github.com//home-assistant/hassio/releases/tag/${this.supervisor.supervisor.version_latest}`
+            this.supervisor.supervisor
          )}
          ${this.supervisor.host.features.includes("haos")
            ? this._renderUpdateCard(
                "Operating System",
                "os",
-                this.supervisor.os,
-                "hassio/os/update",
-                `https://github.com//home-assistant/hassos/releases/tag/${this.supervisor.os.version_latest}`
+                this.supervisor.os
              )
            : ""}
        </div>
@@ -103,9 +79,7 @@ export class HassioUpdate extends LitElement {
  private _renderUpdateCard(
    name: string,
    key: string,
-    object: HassioHomeAssistantInfo | HassioSupervisorInfo | HassioHassOSInfo,
-    apiPath: string,
-    releaseNotesUrl: string
+    object: HassioHomeAssistantInfo | HassioSupervisorInfo | HassioHassOSInfo
  ): TemplateResult {
    if (!object.update_available) {
      return html``;
@@ -136,96 +110,15 @@ export class HassioUpdate extends LitElement {
          </ha-settings-row>
        </div>
        <div class="card-actions">
-          <a href=${releaseNotesUrl} target="_blank" rel="noreferrer">
-            <mwc-button>
-              ${this.supervisor.localize("common.release_notes")}
+          <a href="/hassio/update-available/${key}">
+            <mwc-button .label=${this.supervisor.localize("common.show")}>
            </mwc-button>
          </a>
-          <ha-progress-button
-            .apiPath=${apiPath}
-            .name=${name}
-            .key=${key}
-            .version=${object.version_latest}
-            @click=${this._confirmUpdate}
-          >
-            ${this.supervisor.localize("common.update")}
-          </ha-progress-button>
        </div>
      </ha-card>
    `;
  }

-  private async _confirmUpdate(ev): Promise<void> {
-    const item = ev.currentTarget;
-    if (item.key === "core") {
-      showDialogSupervisorUpdate(this, {
-        supervisor: this.supervisor,
-        name: "Home Assistant Core",
-        version: this.supervisor.core.version_latest,
-        backupParams: {
-          name: `core_${this.supervisor.core.version}`,
-          folders: ["homeassistant"],
-          homeassistant: true,
-        },
-        updateHandler: async () => this._updateCore(),
-      });
-      return;
-    }
-    item.progress = true;
-    const confirmed = await showConfirmationDialog(this, {
-      title: this.supervisor.localize(
-        "confirm.update.title",
-        "name",
-        item.name
-      ),
-      text: this.supervisor.localize(
-        "confirm.update.text",
-        "name",
-        item.name,
-        "version",
-        computeVersion(item.key, item.version)
-      ),
-      confirmText: this.supervisor.localize("common.update"),
-      dismissText: this.supervisor.localize("common.cancel"),
-    });
-
-    if (!confirmed) {
-      item.progress = false;
-      return;
-    }
-    try {
-      if (atLeastVersion(this.hass.config.version, 2021, 2, 4)) {
-        await supervisorApiWsRequest(this.hass.connection, {
-          method: "post",
-          endpoint: item.apiPath.replace("hassio", ""),
-          timeout: null,
-        });
-      } else {
-        await this.hass.callApi<HassioResponse<void>>("POST", item.apiPath);
-      }
-      fireEvent(this, "supervisor-collection-refresh", {
-        collection: item.key,
-      });
-    } catch (err: any) {
-      // Only show an error if the status code was not expected (user behind proxy)
-      // or no status at all(connection terminated)
-      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
-        showAlertDialog(this, {
-          title: this.supervisor.localize("common.error.update_failed"),
-          text: extractApiErrorMessage(err),
-        });
-      }
-    }
-    item.progress = false;
-  }
-
-  private async _updateCore(): Promise<void> {
-    await updateCore(this.hass);
-    fireEvent(this, "supervisor-collection-refresh", {
-      collection: "core",
-    });
-  }
-
  static get styles(): CSSResultGroup {
    return [
      haStyle,
--- a/hassio/src/dialogs/backup/dialog-hassio-backup-upload.ts
+++ b/hassio/src/dialogs/backup/dialog-hassio-backup-upload.ts
@@ -15,7 +15,7 @@ export class DialogHassioBackupUpload
  extends LitElement
  implements HassDialog<HassioBackupUploadDialogParams>
 {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;

  @state() private _params?: HassioBackupUploadDialogParams;

@@ -54,7 +54,7 @@ export class DialogHassioBackupUpload
          <ha-header-bar>
            <span slot="title"> Upload backup </span>
            <ha-icon-button
-              .label=${this.hass.localize("common.close")}
+              .label=${this.hass?.localize("common.close") || "close"}
              .path=${mdiClose}
              slot="actionItems"
              dialogAction="cancel"
--- a/hassio/src/dialogs/backup/dialog-hassio-backup.ts
+++ b/hassio/src/dialogs/backup/dialog-hassio-backup.ts
@@ -35,7 +35,7 @@ class HassioBackupDialog
  extends LitElement
  implements HassDialog<HassioBackupDialogParams>
 {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;

  @state() private _error?: string;

@@ -77,7 +77,7 @@ class HassioBackupDialog
          <ha-header-bar>
            <span slot="title">${this._backup.name}</span>
            <ha-icon-button
-              .label=${this.hass.localize("common.close")}
+              .label=${this.hass?.localize("common.close") || "close"}
              .path=${mdiClose}
              slot="actionItems"
              dialogAction="cancel"
@@ -114,7 +114,7 @@ class HassioBackupDialog
              @closed=${stopPropagation}
            >
              <ha-icon-button
-                .label=${this.hass.localize("common.menu")}
+                .label=${this.hass!.localize("common.menu")}
                .path=${mdiDotsVertical}
                slot="trigger"
              ></ha-icon-button>
@@ -141,6 +141,9 @@ class HassioBackupDialog
          flex-shrink: 0;
          display: block;
        }
+        ha-icon-button {
+          color: var(--secondary-text-color);
+        }
      `,
    ];
  }
@@ -189,25 +192,23 @@ class HassioBackupDialog
    }

    if (!this._dialogParams?.onboarding) {
-      this.hass
-        .callApi(
-          "POST",
+      this.hass!.callApi(
+        "POST",

-          `hassio/${
-            atLeastVersion(this.hass.config.version, 2021, 9)
-              ? "backups"
-              : "snapshots"
-          }/${this._backup!.slug}/restore/partial`,
-          backupDetails
-        )
-        .then(
-          () => {
-            this.closeDialog();
-          },
-          (error) => {
-            this._error = error.body.message;
-          }
-        );
+        `hassio/${
+          atLeastVersion(this.hass!.config.version, 2021, 9)
+            ? "backups"
+            : "snapshots"
+        }/${this._backup!.slug}/restore/partial`,
+        backupDetails
+      ).then(
+        () => {
+          this.closeDialog();
+        },
+        (error) => {
+          this._error = error.body.message;
+        }
+      );
    } else {
      fireEvent(this, "restoring");
      fetch(`/api/hassio/backups/${this._backup!.slug}/restore/partial`, {
@@ -241,24 +242,22 @@ class HassioBackupDialog
    }

    if (!this._dialogParams?.onboarding) {
-      this.hass
-        .callApi(
-          "POST",
-          `hassio/${
-            atLeastVersion(this.hass.config.version, 2021, 9)
-              ? "backups"
-              : "snapshots"
-          }/${this._backup!.slug}/restore/full`,
-          backupDetails
-        )
-        .then(
-          () => {
-            this.closeDialog();
-          },
-          (error) => {
-            this._error = error.body.message;
-          }
-        );
+      this.hass!.callApi(
+        "POST",
+        `hassio/${
+          atLeastVersion(this.hass!.config.version, 2021, 9)
+            ? "backups"
+            : "snapshots"
+        }/${this._backup!.slug}/restore/full`,
+        backupDetails
+      ).then(
+        () => {
+          this.closeDialog();
+        },
+        (error) => {
+          this._error = error.body.message;
+        }
+      );
    } else {
      fireEvent(this, "restoring");
      fetch(`/api/hassio/backups/${this._backup!.slug}/restore/full`, {
@@ -280,36 +279,33 @@ class HassioBackupDialog
      return;
    }

-    this.hass
-
-      .callApi(
-        atLeastVersion(this.hass.config.version, 2021, 9) ? "DELETE" : "POST",
-        `hassio/${
-          atLeastVersion(this.hass.config.version, 2021, 9)
-            ? `backups/${this._backup!.slug}`
-            : `snapshots/${this._backup!.slug}/remove`
-        }`
-      )
-      .then(
-        () => {
-          if (this._dialogParams!.onDelete) {
-            this._dialogParams!.onDelete();
-          }
-          this.closeDialog();
-        },
-        (error) => {
-          this._error = error.body.message;
+    this.hass!.callApi(
+      atLeastVersion(this.hass!.config.version, 2021, 9) ? "DELETE" : "POST",
+      `hassio/${
+        atLeastVersion(this.hass!.config.version, 2021, 9)
+          ? `backups/${this._backup!.slug}`
+          : `snapshots/${this._backup!.slug}/remove`
+      }`
+    ).then(
+      () => {
+        if (this._dialogParams!.onDelete) {
+          this._dialogParams!.onDelete();
        }
-      );
+        this.closeDialog();
+      },
+      (error) => {
+        this._error = error.body.message;
+      }
+    );
  }

  private async _downloadClicked() {
    let signedPath: { path: string };
    try {
      signedPath = await getSignedPath(
-        this.hass,
+        this.hass!,
        `/api/hassio/${
-          atLeastVersion(this.hass.config.version, 2021, 9)
+          atLeastVersion(this.hass!.config.version, 2021, 9)
            ? "backups"
            : "snapshots"
        }/${this._backup!.slug}/download`
--- a/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts
+++ b/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts
@@ -47,11 +47,6 @@ class HassioMarkdownDialog extends LitElement {
      haStyleDialog,
      hassioStyle,
      css`
-        ha-paper-dialog {
-          min-width: 350px;
-          font-size: 14px;
-          border-radius: 2px;
-        }
        app-toolbar {
          margin: 0;
          padding: 0 16px;
@@ -62,19 +57,6 @@ class HassioMarkdownDialog extends LitElement {
          margin-left: 16px;
        }
        @media all and (max-width: 450px), all and (max-height: 500px) {
-          ha-paper-dialog {
-            max-height: 100%;
-          }
-          ha-paper-dialog::before {
-            content: "";
-            position: fixed;
-            z-index: -1;
-            top: 0px;
-            left: 0px;
-            right: 0px;
-            bottom: 0px;
-            background-color: inherit;
-          }
          app-toolbar {
            color: var(--text-primary-color);
            background-color: var(--primary-color);
--- a/hassio/src/dialogs/registries/dialog-hassio-registries.ts
+++ b/hassio/src/dialogs/registries/dialog-hassio-registries.ts
@@ -1,12 +1,12 @@
 import "@material/mwc-button/mwc-button";
-import "@material/mwc-list/mwc-list-item";
 import { mdiDelete } from "@mdi/js";
-import { PaperInputElement } from "@polymer/paper-input/paper-input";
 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-form/ha-form";
+import { HaFormSchema } from "../../../../src/components/ha-form/types";
 import "../../../../src/components/ha-icon-button";
+import "../../../../src/components/ha-settings-row";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import {
  addHassioDockerRegistry,
@@ -19,22 +19,41 @@ import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
 import { RegistriesDialogParams } from "./show-dialog-registries";

+const SCHEMA = [
+  {
+    type: "string",
+    name: "registry",
+    required: true,
+  },
+  {
+    type: "string",
+    name: "username",
+    required: true,
+  },
+  {
+    type: "string",
+    name: "password",
+    required: true,
+    format: "password",
+  },
+];
+
@customElement("dialog-hassio-registries")
 class HassioRegistriesDialog extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

  @property({ attribute: false }) public supervisor!: Supervisor;

-  @property({ attribute: false }) private _registries?: {
+  @state() private _registries?: {
    registry: string;
    username: string;
  }[];

-  @state() private _registry?: string;
-
-  @state() private _username?: string;
-
-  @state() private _password?: string;
+  @state() private _input: {
+    registry?: string;
+    username?: string;
+    password?: string;
+  } = {};

  @state() private _opened = false;

@@ -47,6 +66,7 @@ class HassioRegistriesDialog extends LitElement {
        @closed=${this.closeDialog}
        scrimClickAction
        escapeKeyAction
+        hideActions
        .heading=${createCloseHeading(
          this.hass,
          this._addingRegistry
@@ -54,99 +74,77 @@ class HassioRegistriesDialog extends LitElement {
            : this.supervisor.localize("dialog.registries.title_manage")
        )}
      >
-        <div class="form">
-          ${this._addingRegistry
-            ? html`
-                <paper-input
-                  @value-changed=${this._inputChanged}
-                  class="flex-auto"
-                  name="registry"
-                  .label=${this.supervisor.localize(
-                    "dialog.registries.registry"
-                  )}
-                  required
-                  auto-validate
-                ></paper-input>
-                <paper-input
-                  @value-changed=${this._inputChanged}
-                  class="flex-auto"
-                  name="username"
-                  .label=${this.supervisor.localize(
-                    "dialog.registries.username"
-                  )}
-                  required
-                  auto-validate
-                ></paper-input>
-                <paper-input
-                  @value-changed=${this._inputChanged}
-                  class="flex-auto"
-                  name="password"
-                  .label=${this.supervisor.localize(
-                    "dialog.registries.password"
-                  )}
-                  type="password"
-                  required
-                  auto-validate
-                ></paper-input>
-
+        ${this._addingRegistry
+          ? html`
+              <ha-form
+                .data=${this._input}
+                .schema=${SCHEMA}
+                @value-changed=${this._valueChanged}
+                .computeLabel=${this._computeLabel}
+              ></ha-form>
+              <div class="action">
                <mwc-button
                  ?disabled=${Boolean(
-                    !this._registry || !this._username || !this._password
+                    !this._input.registry ||
+                      !this._input.username ||
+                      !this._input.password
                  )}
                  @click=${this._addNewRegistry}
                >
                  ${this.supervisor.localize("dialog.registries.add_registry")}
                </mwc-button>
-              `
-            : html`${this._registries?.length
-                  ? this._registries.map(
-                      (entry) => html`
-                        <mwc-list-item class="option" hasMeta twoline>
-                          <span>${entry.registry}</span>
-                          <span slot="secondary"
-                            >${this.supervisor.localize(
-                              "dialog.registries.username"
-                            )}:
-                            ${entry.username}</span
-                          >
-                          <ha-icon-button
-                            .entry=${entry}
-                            .label=${this.supervisor.localize(
-                              "dialog.registries.remove"
-                            )}
-                            .path=${mdiDelete}
-                            slot="meta"
-                            @click=${this._removeRegistry}
-                          ></ha-icon-button>
-                        </mwc-list-item>
-                      `
-                    )
-                  : html`
-                      <mwc-list-item>
-                        <span
-                          >${this.supervisor.localize(
-                            "dialog.registries.no_registries"
-                          )}</span
-                        >
-                      </mwc-list-item>
-                    `}
+              </div>
+            `
+          : html`${this._registries?.length
+                ? this._registries.map(
+                    (entry) => html`
+                      <ha-settings-row class="registry">
+                        <span slot="heading"> ${entry.registry} </span>
+                        <span slot="description">
+                          ${this.supervisor.localize(
+                            "dialog.registries.username"
+                          )}:
+                          ${entry.username}
+                        </span>
+                        <ha-icon-button
+                          .entry=${entry}
+                          .label=${this.supervisor.localize(
+                            "dialog.registries.remove"
+                          )}
+                          .path=${mdiDelete}
+                          @click=${this._removeRegistry}
+                        ></ha-icon-button>
+                      </ha-settings-row>
+                    `
+                  )
+                : html`
+                    <ha-alert>
+                      ${this.supervisor.localize(
+                        "dialog.registries.no_registries"
+                      )}
+                    </ha-alert>
+                  `}
+              <div class="action">
                <mwc-button @click=${this._addRegistry}>
                  ${this.supervisor.localize(
                    "dialog.registries.add_new_registry"
                  )}
-                </mwc-button> `}
-        </div>
+                </mwc-button>
+              </div> `}
      </ha-dialog>
    `;
  }

-  private _inputChanged(ev: Event) {
-    const target = ev.currentTarget as PaperInputElement;
-    this[`_${target.name}`] = target.value;
+  private _computeLabel = (schema: HaFormSchema) =>
+    this.supervisor.localize(`dialog.registries.${schema.name}`) || schema.name;
+
+  private _valueChanged(ev: CustomEvent) {
+    this._input = ev.detail.value;
  }

  public async showDialog(dialogParams: RegistriesDialogParams): Promise<void> {
    this._opened = true;
+    this._input = {};
    this.supervisor = dialogParams.supervisor;
    await this._loadRegistries();
    await this.updateComplete;
@@ -155,6 +153,7 @@ class HassioRegistriesDialog extends LitElement {
  public closeDialog(): void {
    this._addingRegistry = false;
    this._opened = false;
+    this._input = {};
  }

  public focus(): void {
@@ -179,15 +178,16 @@ class HassioRegistriesDialog extends LitElement {

  private async _addNewRegistry(): Promise<void> {
    const data = {};
-    data[this._registry!] = {
-      username: this._username,
-      password: this._password,
+    data[this._input.registry!] = {
+      username: this._input.username,
+      password: this._input.password,
    };

    try {
      await addHassioDockerRegistry(this.hass, data);
      await this._loadRegistries();
      this._addingRegistry = false;
+      this._input = {};
    } catch (err: any) {
      showAlertDialog(this, {
        title: this.supervisor.localize("dialog.registries.failed_to_add"),
@@ -215,32 +215,20 @@ class HassioRegistriesDialog extends LitElement {
      haStyle,
      haStyleDialog,
      css`
-        ha-dialog.button-left {
-          --justify-action-buttons: flex-start;
-        }
-        paper-icon-item {
-          cursor: pointer;
-        }
-        .form {
-          color: var(--primary-text-color);
-        }
-        .option {
+        .registry {
          border: 1px solid var(--divider-color);
          border-radius: 4px;
          margin-top: 4px;
        }
-        mwc-button {
-          margin-left: 8px;
+        .action {
+          margin-top: 24px;
+          width: 100%;
+          display: flex;
+          justify-content: flex-end;
        }
        ha-icon-button {
          color: var(--error-color);
-          margin: -10px;
-        }
-        mwc-list-item {
-          cursor: default;
-        }
-        mwc-list-item span[slot="secondary"] {
-          color: var(--secondary-text-color);
+          margin-right: -10px;
        }
      `,
    ];
--- a/hassio/src/dialogs/update/dialog-supervisor-update.ts
+++ b/hassio/src/dialogs/update/dialog-supervisor-update.ts
@@ -1,203 +0,0 @@
-import "@material/mwc-button/mwc-button";
-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-alert";
-import "../../../../src/components/ha-circular-progress";
-import "../../../../src/components/ha-dialog";
-import "../../../../src/components/ha-settings-row";
-import "../../../../src/components/ha-switch";
-import {
-  extractApiErrorMessage,
-  ignoreSupervisorError,
-} from "../../../../src/data/hassio/common";
-import { createHassioPartialBackup } from "../../../../src/data/hassio/backup";
-import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
-import type { HomeAssistant } from "../../../../src/types";
-import { SupervisorDialogSupervisorUpdateParams } from "./show-dialog-update";
-
-@customElement("dialog-supervisor-update")
-class DialogSupervisorUpdate extends LitElement {
-  public hass!: HomeAssistant;
-
-  @state() private _opened = false;
-
-  @state() private _createBackup = true;
-
-  @state() private _action: "backup" | "update" | null = null;
-
-  @state() private _error?: string;
-
-  @state()
-  private _dialogParams?: SupervisorDialogSupervisorUpdateParams;
-
-  public async showDialog(
-    params: SupervisorDialogSupervisorUpdateParams
-  ): Promise<void> {
-    this._opened = true;
-    this._dialogParams = params;
-    await this.updateComplete;
-  }
-
-  public closeDialog(): void {
-    this._action = null;
-    this._createBackup = true;
-    this._error = undefined;
-    this._dialogParams = undefined;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  public focus(): void {
-    this.updateComplete.then(() =>
-      (
-        this.shadowRoot?.querySelector("[dialogInitialFocus]") as HTMLElement
-      )?.focus()
-    );
-  }
-
-  protected render(): TemplateResult {
-    if (!this._dialogParams) {
-      return html``;
-    }
-    return html`
-      <ha-dialog .open=${this._opened} scrimClickAction escapeKeyAction>
-        ${this._action === null
-          ? html`<slot name="heading">
-                <h2 id="title" class="header_title">
-                  ${this._dialogParams.supervisor.localize(
-                    "confirm.update.title",
-                    "name",
-                    this._dialogParams.name
-                  )}
-                </h2>
-              </slot>
-              <div>
-                ${this._dialogParams.supervisor.localize(
-                  "confirm.update.text",
-                  "name",
-                  this._dialogParams.name,
-                  "version",
-                  this._dialogParams.version
-                )}
-              </div>
-
-              <ha-settings-row>
-                <span slot="heading">
-                  ${this._dialogParams.supervisor.localize(
-                    "dialog.update.backup"
-                  )}
-                </span>
-                <span slot="description">
-                  ${this._dialogParams.supervisor.localize(
-                    "dialog.update.create_backup",
-                    "name",
-                    this._dialogParams.name
-                  )}
-                </span>
-                <ha-switch
-                  .checked=${this._createBackup}
-                  haptic
-                  @click=${this._toggleBackup}
-                >
-                </ha-switch>
-              </ha-settings-row>
-              <mwc-button @click=${this.closeDialog} slot="secondaryAction">
-                ${this._dialogParams.supervisor.localize("common.cancel")}
-              </mwc-button>
-              <mwc-button
-                .disabled=${this._error !== undefined}
-                @click=${this._update}
-                slot="primaryAction"
-              >
-                ${this._dialogParams.supervisor.localize("common.update")}
-              </mwc-button>`
-          : html`<ha-circular-progress alt="Updating" size="large" active>
-              </ha-circular-progress>
-              <p class="progress-text">
-                ${this._action === "update"
-                  ? this._dialogParams.supervisor.localize(
-                      "dialog.update.updating",
-                      "name",
-                      this._dialogParams.name,
-                      "version",
-                      this._dialogParams.version
-                    )
-                  : this._dialogParams.supervisor.localize(
-                      "dialog.update.creating_backup",
-                      "name",
-                      this._dialogParams.name
-                    )}
-              </p>`}
-        ${this._error
-          ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
-          : ""}
-      </ha-dialog>
-    `;
-  }
-
-  private _toggleBackup() {
-    this._createBackup = !this._createBackup;
-  }
-
-  private async _update() {
-    if (this._createBackup) {
-      this._action = "backup";
-      try {
-        await createHassioPartialBackup(
-          this.hass,
-          this._dialogParams!.backupParams
-        );
-      } catch (err: any) {
-        this._error = extractApiErrorMessage(err);
-        this._action = null;
-        return;
-      }
-    }
-
-    this._action = "update";
-    try {
-      await this._dialogParams!.updateHandler!();
-    } catch (err: any) {
-      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
-        this._error = extractApiErrorMessage(err);
-        this._action = null;
-      }
-      return;
-    }
-
-    this.closeDialog();
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      haStyle,
-      haStyleDialog,
-      css`
-        .form {
-          color: var(--primary-text-color);
-        }
-
-        ha-settings-row {
-          margin-top: 32px;
-          padding: 0;
-        }
-
-        ha-circular-progress {
-          display: block;
-          margin: 32px;
-          text-align: center;
-        }
-
-        .progress-text {
-          text-align: center;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-supervisor-update": DialogSupervisorUpdate;
-  }
-}
--- a/hassio/src/dialogs/update/show-dialog-update.ts
+++ b/hassio/src/dialogs/update/show-dialog-update.ts
@@ -1,21 +0,0 @@
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import { Supervisor } from "../../../../src/data/supervisor/supervisor";
-
-export interface SupervisorDialogSupervisorUpdateParams {
-  supervisor: Supervisor;
-  name: string;
-  version: string;
-  backupParams: any;
-  updateHandler: () => Promise<void>;
-}
-
-export const showDialogSupervisorUpdate = (
-  element: HTMLElement,
-  dialogParams: SupervisorDialogSupervisorUpdateParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-supervisor-update",
-    dialogImport: () => import("./dialog-supervisor-update"),
-    dialogParams,
-  });
-};
--- a/hassio/src/hassio-main.ts
+++ b/hassio/src/hassio-main.ts
@@ -10,7 +10,7 @@ import { HassioPanelInfo } from "../../src/data/hassio/supervisor";
 import { Supervisor } from "../../src/data/supervisor/supervisor";
 import { makeDialogManager } from "../../src/dialogs/make-dialog-manager";
 import "../../src/layouts/hass-loading-screen";
-import { HomeAssistant, Route } from "../../src/types";
+import { HomeAssistant } from "../../src/types";
 import "./hassio-router";
 import { SupervisorBaseElement } from "./supervisor-base-element";

@@ -24,8 +24,6 @@ export class HassioMain extends SupervisorBaseElement {

  @property({ type: Boolean }) public narrow!: boolean;

-  @property({ attribute: false }) public route?: Route;
-
  protected firstUpdated(changedProps: PropertyValues) {
    super.firstUpdated(changedProps);

--- a/hassio/src/hassio-my-redirect.ts
+++ b/hassio/src/hassio-my-redirect.ts
@@ -34,6 +34,9 @@ const REDIRECTS: Redirects = {
  supervisor_store: {
    redirect: "/hassio/store",
  },
+  supervisor_addons: {
+    redirect: "/hassio/dashboard",
+  },
  supervisor_addon: {
    redirect: "/hassio/addon",
    params: {
--- a/hassio/src/hassio-router.ts
+++ b/hassio/src/hassio-router.ts
@@ -35,6 +35,10 @@ class HassioRouter extends HassRouterPage {
      backups: "dashboard",
      store: "dashboard",
      system: "dashboard",
+      "update-available": {
+        tag: "update-available-dashboard",
+        load: () => import("./update-available/update-available-dashboard"),
+      },
      addon: {
        tag: "hassio-addon-dashboard",
        load: () => import("./addon-view/hassio-addon-dashboard"),
--- a/hassio/src/hassio-tabs.ts
+++ b/hassio/src/hassio-tabs.ts
@@ -1,16 +1,22 @@
-import { mdiBackupRestore, mdiCogs, mdiStore, mdiViewDashboard } from "@mdi/js";
+import {
+  mdiBackupRestore,
+  mdiCogs,
+  mdiPuzzle,
+  mdiViewDashboard,
+} from "@mdi/js";
+import { atLeastVersion } from "../../src/common/config/version";
 import type { PageNavigation } from "../../src/layouts/hass-tabs-subpage";
+import { HomeAssistant } from "../../src/types";

-export const supervisorTabs: PageNavigation[] = [
+export const supervisorTabs = (hass: HomeAssistant): PageNavigation[] => [
  {
-    translationKey: "panel.dashboard",
+    translationKey: atLeastVersion(hass.config.version, 2021, 12)
+      ? "panel.addons"
+      : "panel.dashboard",
    path: `/hassio/dashboard`,
-    iconPath: mdiViewDashboard,
-  },
-  {
-    translationKey: "panel.store",
-    path: `/hassio/store`,
-    iconPath: mdiStore,
+    iconPath: atLeastVersion(hass.config.version, 2021, 12)
+      ? mdiPuzzle
+      : mdiViewDashboard,
  },
  {
    translationKey: "panel.backups",
--- a/hassio/src/supervisor-base-element.ts
+++ b/hassio/src/supervisor-base-element.ts
@@ -25,7 +25,7 @@ import {
 } from "../../src/data/supervisor/supervisor";
 import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin";
 import { urlSyncMixin } from "../../src/state/url-sync-mixin";
-import { HomeAssistant } from "../../src/types";
+import { HomeAssistant, Route } from "../../src/types";
 import { getTranslation } from "../../src/util/common-translation";

 declare global {
@@ -38,6 +38,8 @@ declare global {
 export class SupervisorBaseElement extends urlSyncMixin(
  ProvideHassLitMixin(LitElement)
 ) {
+  @property({ attribute: false }) public route?: Route;
+
  @property({ attribute: false }) public supervisor: Partial<Supervisor> = {
    localize: () => "",
  };
@@ -108,7 +110,9 @@ export class SupervisorBaseElement extends urlSyncMixin(
      this._language = this.hass.language;
    }
    this._initializeLocalize();
-    this._initSupervisor();
+    if (this.route?.prefix === "/hassio") {
+      this._initSupervisor();
+    }
  }

  private async _initializeLocalize() {
--- a/hassio/src/system/hassio-core-info.ts
+++ b/hassio/src/system/hassio-core-info.ts
@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import "@material/mwc-list/mwc-list-item";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { fireEvent } from "../../../src/common/dom/fire_event";
+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";
@@ -12,7 +12,7 @@ import {
  fetchHassioStats,
  HassioStats,
 } from "../../../src/data/hassio/common";
-import { restartCore, updateCore } from "../../../src/data/supervisor/core";
+import { restartCore } from "../../../src/data/supervisor/core";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import {
  showAlertDialog,
@@ -22,7 +22,6 @@ import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
 import { bytesToString } from "../../../src/util/bytes-to-string";
 import "../components/supervisor-metric";
-import { showDialogSupervisorUpdate } from "../dialogs/update/show-dialog-update";
 import { hassioStyle } from "../resources/hassio-style";

@customElement("hassio-core-info")
@@ -67,14 +66,15 @@ class HassioCoreInfo extends LitElement {
              <span slot="description">
                core-${this.supervisor.core.version_latest}
              </span>
-              ${this.supervisor.core.update_available
+              ${!atLeastVersion(this.hass.config.version, 2021, 12) &&
+              this.supervisor.core.update_available
                ? html`
-                    <ha-progress-button
-                      .title=${this.supervisor.localize("common.update")}
-                      @click=${this._coreUpdate}
-                    >
-                      ${this.supervisor.localize("common.update")}
-                    </ha-progress-button>
+                    <a href="/hassio/update-available/core">
+                      <mwc-button
+                        .label=${this.supervisor.localize("common.show")}
+                      >
+                      </mwc-button>
+                    </a>
                  `
                : ""}
            </ha-settings-row>
@@ -160,27 +160,6 @@ class HassioCoreInfo extends LitElement {
    }
  }

-  private async _coreUpdate(): Promise<void> {
-    showDialogSupervisorUpdate(this, {
-      supervisor: this.supervisor,
-      name: "Home Assistant Core",
-      version: this.supervisor.core.version_latest,
-      backupParams: {
-        name: `core_${this.supervisor.core.version}`,
-        folders: ["homeassistant"],
-        homeassistant: true,
-      },
-      updateHandler: async () => this._updateCore(),
-    });
-  }
-
-  private async _updateCore(): Promise<void> {
-    await updateCore(this.hass);
-    fireEvent(this, "supervisor-collection-refresh", {
-      collection: "core",
-    });
-  }
-
  static get styles(): CSSResultGroup {
    return [
      haStyle,
@@ -239,6 +218,9 @@ class HassioCoreInfo extends LitElement {
        mwc-list-item ha-svg-icon {
          color: var(--secondary-text-color);
        }
+        a {
+          text-decoration: none;
+        }
      `,
    ];
  }
--- a/hassio/src/system/hassio-host-info.ts
+++ b/hassio/src/system/hassio-host-info.ts
@@ -21,7 +21,6 @@ import {
  configSyncOS,
  rebootHost,
  shutdownHost,
-  updateOS,
 } from "../../../src/data/hassio/host";
 import {
  fetchNetworkInfo,
@@ -106,11 +105,15 @@ class HassioHostInfo extends LitElement {
              <span slot="description">
                ${this.supervisor.host.operating_system}
              </span>
-              ${this.supervisor.os.update_available
+              ${!atLeastVersion(this.hass.config.version, 2021, 12) &&
+              this.supervisor.os.update_available
                ? html`
-                    <ha-progress-button @click=${this._osUpdate}>
-                      ${this.supervisor.localize("commmon.update")}
-                    </ha-progress-button>
+                    <a href="/hassio/update-available/os">
+                      <mwc-button
+                        .label=${this.supervisor.localize("common.show")}
+                      >
+                      </mwc-button>
+                    </a>
                  `
                : ""}
            </ha-settings-row>
@@ -333,50 +336,6 @@ class HassioHostInfo extends LitElement {
    button.progress = false;
  }

-  private async _osUpdate(ev: CustomEvent): Promise<void> {
-    const button = ev.currentTarget as any;
-    button.progress = true;
-
-    const confirmed = await showConfirmationDialog(this, {
-      title: this.supervisor.localize(
-        "confirm.update.title",
-        "name",
-        "Home Assistant Operating System"
-      ),
-      text: this.supervisor.localize(
-        "confirm.update.text",
-        "name",
-        "Home Assistant Operating System",
-        "version",
-        this.supervisor.os.version_latest
-      ),
-      confirmText: this.supervisor.localize("common.update"),
-      dismissText: "no",
-    });
-
-    if (!confirmed) {
-      button.progress = false;
-      return;
-    }
-
-    try {
-      await updateOS(this.hass);
-      fireEvent(this, "supervisor-collection-refresh", { collection: "os" });
-    } catch (err: any) {
-      if (this.hass.connection.connected) {
-        showAlertDialog(this, {
-          title: this.supervisor.localize(
-            "common.failed_to_update_name",
-            "name",
-            "Home Assistant Operating System"
-          ),
-          text: extractApiErrorMessage(err),
-        });
-      }
-    }
-    button.progress = false;
-  }
-
  private async _changeNetworkClicked(): Promise<void> {
    showNetworkDialog(this, {
      supervisor: this.supervisor,
@@ -494,6 +453,9 @@ class HassioHostInfo extends LitElement {
        mwc-list-item ha-svg-icon {
          color: var(--secondary-text-color);
        }
+        a {
+          text-decoration: none;
+        }
      `,
    ];
  }
--- a/hassio/src/system/hassio-supervisor-info.ts
+++ b/hassio/src/system/hassio-supervisor-info.ts
@@ -17,7 +17,6 @@ import {
  restartSupervisor,
  setSupervisorOption,
  SupervisorOptions,
-  updateSupervisor,
 } from "../../../src/data/hassio/supervisor";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import {
@@ -31,29 +30,9 @@ import { documentationUrl } from "../../../src/util/documentation-url";
 import "../components/supervisor-metric";
 import { hassioStyle } from "../resources/hassio-style";

-const UNSUPPORTED_REASON_URL = {
-  apparmor: "/more-info/unsupported/apparmor",
-  container: "/more-info/unsupported/container",
-  content_trust: "/more-info/unsupported/content_trust",
-  dbus: "/more-info/unsupported/dbus",
-  docker_configuration: "/more-info/unsupported/docker_configuration",
-  docker_version: "/more-info/unsupported/docker_version",
-  job_conditions: "/more-info/unsupported/job_conditions",
-  lxc: "/more-info/unsupported/lxc",
-  network_manager: "/more-info/unsupported/network_manager",
-  os_agent: "/more-info/unsupported/os_agent",
-  os: "/more-info/unsupported/os",
-  privileged: "/more-info/unsupported/privileged",
-  source_mods: "/more-info/unsupported/source_mods",
-  systemd: "/more-info/unsupported/systemd",
-};
-
+const UNSUPPORTED_REASON_URL = {};
 const UNHEALTHY_REASON_URL = {
  privileged: "/more-info/unsupported/privileged",
-  supervisor: "/more-info/unhealthy/supervisor",
-  setup: "/more-info/unhealthy/setup",
-  docker: "/more-info/unhealthy/docker",
-  untrusted: "/more-info/unhealthy/untrusted",
 };

@customElement("hassio-supervisor-info")
@@ -97,16 +76,15 @@ class HassioSupervisorInfo extends LitElement {
              <span slot="description">
                supervisor-${this.supervisor.supervisor.version_latest}
              </span>
-              ${this.supervisor.supervisor.update_available
+              ${!atLeastVersion(this.hass.config.version, 2021, 12) &&
+              this.supervisor.supervisor.update_available
                ? html`
-                    <ha-progress-button
-                      .title=${this.supervisor.localize(
-                        "system.supervisor.update_supervisor"
-                      )}
-                      @click=${this._supervisorUpdate}
-                    >
-                      ${this.supervisor.localize("common.update")}
-                    </ha-progress-button>
+                    <a href="/hassio/update-available/supervisor">
+                      <mwc-button
+                        .label=${this.supervisor.localize("common.show")}
+                      >
+                      </mwc-button>
+                    </a>
                  `
                : ""}
            </ha-settings-row>
@@ -173,24 +151,28 @@ class HassioSupervisorInfo extends LitElement {
                    ></ha-switch>
                  </ha-settings-row>`
                : ""
-              : html`<ha-alert
-                  alert-type="warning"
-                  .actionText=${this.supervisor.localize("common.learn_more")}
-                  @alert-action-clicked=${this._unsupportedDialog}
-                >
+              : html`<ha-alert alert-type="warning">
                  ${this.supervisor.localize(
                    "system.supervisor.unsupported_title"
                  )}
+                  <mwc-button
+                    slot="action"
+                    .label=${this.supervisor.localize("common.learn_more")}
+                    @click=${this._unsupportedDialog}
+                  >
+                  </mwc-button>
                </ha-alert>`}
            ${!this.supervisor.supervisor.healthy
-              ? html`<ha-alert
-                  alert-type="error"
-                  .actionText=${this.supervisor.localize("common.learn_more")}
-                  @alert-action-clicked=${this._unhealthyDialog}
-                >
+              ? html`<ha-alert alert-type="error">
                  ${this.supervisor.localize(
                    "system.supervisor.unhealthy_title"
                  )}
+                  <mwc-button
+                    slot="action"
+                    .label=${this.supervisor.localize("common.learn_more")}
+                    @click=${this._unhealthyDialog}
+                  >
+                  </mwc-button>
                </ha-alert>`
              : ""}
          </div>
@@ -357,51 +339,6 @@ class HassioSupervisorInfo extends LitElement {
    }
  }

-  private async _supervisorUpdate(ev: CustomEvent): Promise<void> {
-    const button = ev.currentTarget as any;
-    button.progress = true;
-
-    const confirmed = await showConfirmationDialog(this, {
-      title: this.supervisor.localize(
-        "confirm.update.title",
-        "name",
-        "Supervisor"
-      ),
-      text: this.supervisor.localize(
-        "confirm.update.text",
-        "name",
-        "Supervisor",
-        "version",
-        this.supervisor.supervisor.version_latest
-      ),
-      confirmText: this.supervisor.localize("common.update"),
-      dismissText: this.supervisor.localize("common.cancel"),
-    });
-
-    if (!confirmed) {
-      button.progress = false;
-      return;
-    }
-
-    try {
-      await updateSupervisor(this.hass);
-      fireEvent(this, "supervisor-collection-refresh", {
-        collection: "supervisor",
-      });
-    } catch (err: any) {
-      showAlertDialog(this, {
-        title: this.supervisor.localize(
-          "common.failed_to_update_name",
-          "name",
-          "Supervisor"
-        ),
-        text: extractApiErrorMessage(err),
-      });
-    } finally {
-      button.progress = false;
-    }
-  }
-
  private async _diagnosticsInformationDialog(): Promise<void> {
    await showAlertDialog(this, {
      title: this.supervisor.localize(
@@ -425,20 +362,19 @@ class HassioSupervisorInfo extends LitElement {
          ${this.supervisor.resolution.unsupported.map(
            (reason) => html`
              <li>
-                ${UNSUPPORTED_REASON_URL[reason]
-                  ? html`<a
-                      href=${documentationUrl(
-                        this.hass,
-                        UNSUPPORTED_REASON_URL[reason]
-                      )}
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      ${this.supervisor.localize(
-                        `system.supervisor.unsupported_reason.${reason}`
-                      ) || reason}
-                    </a>`
-                  : reason}
+                <a
+                  href=${documentationUrl(
+                    this.hass,
+                    UNSUPPORTED_REASON_URL[reason] ||
+                      `/more-info/unsupported/${reason}`
+                  )}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  ${this.supervisor.localize(
+                    `system.supervisor.unsupported_reason.${reason}`
+                  ) || reason}
+                </a>
              </li>
            `
          )}
@@ -456,20 +392,19 @@ class HassioSupervisorInfo extends LitElement {
          ${this.supervisor.resolution.unhealthy.map(
            (reason) => html`
              <li>
-                ${UNHEALTHY_REASON_URL[reason]
-                  ? html`<a
-                      href=${documentationUrl(
-                        this.hass,
-                        UNHEALTHY_REASON_URL[reason]
-                      )}
-                      target="_blank"
-                      rel="noreferrer"
-                    >
-                      ${this.supervisor.localize(
-                        `system.supervisor.unhealthy_reason.${reason}`
-                      ) || reason}
-                    </a>`
-                  : reason}
+                <a
+                  href=${documentationUrl(
+                    this.hass,
+                    UNHEALTHY_REASON_URL[reason] ||
+                      `/more-info/unhealthy/${reason}`
+                  )}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  ${this.supervisor.localize(
+                    `system.supervisor.unhealthy_reason.${reason}`
+                  ) || reason}
+                </a>
              </li>
            `
          )}
@@ -535,6 +470,12 @@ class HassioSupervisorInfo extends LitElement {
          white-space: normal;
          color: var(--secondary-text-color);
        }
+        ha-alert mwc-button {
+          --mdc-theme-primary: var(--primary-text-color);
+        }
+        a {
+          text-decoration: none;
+        }
      `,
    ];
  }
--- a/hassio/src/system/hassio-system.ts
+++ b/hassio/src/system/hassio-system.ts
@@ -1,5 +1,6 @@
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
+import { atLeastVersion } from "../../../src/common/config/version";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
@@ -28,8 +29,9 @@ class HassioSystem extends LitElement {
        .localizeFunc=${this.supervisor.localize}
        .narrow=${this.narrow}
        .route=${this.route}
-        .tabs=${supervisorTabs}
-        main-page
+        .tabs=${supervisorTabs(this.hass)}
+        .mainPage=${!atLeastVersion(this.hass.config.version, 2021, 12)}
+        back-path="/config"
        supervisor
      >
        <span slot="header"> ${this.supervisor.localize("panel.system")} </span>
--- a/hassio/src/update-available/update-available-card.ts
+++ b/hassio/src/update-available/update-available-card.ts
@@ -0,0 +1,381 @@
+import "@material/mwc-list/mwc-list-item";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../../src/common/dom/fire_event";
+import "../../../src/common/search/search-input";
+import "../../../src/components/buttons/ha-progress-button";
+import "../../../src/components/ha-alert";
+import "../../../src/components/ha-button-menu";
+import "../../../src/components/ha-card";
+import "../../../src/components/ha-checkbox";
+import "../../../src/components/ha-faded";
+import "../../../src/components/ha-formfield";
+import "../../../src/components/ha-icon-button";
+import "../../../src/components/ha-markdown";
+import "../../../src/components/ha-settings-row";
+import "../../../src/components/ha-svg-icon";
+import "../../../src/components/ha-switch";
+import {
+  fetchHassioAddonChangelog,
+  fetchHassioAddonInfo,
+  HassioAddonDetails,
+  updateHassioAddon,
+} from "../../../src/data/hassio/addon";
+import {
+  extractApiErrorMessage,
+  ignoreSupervisorError,
+} from "../../../src/data/hassio/common";
+import { updateOS } from "../../../src/data/hassio/host";
+import { updateSupervisor } from "../../../src/data/hassio/supervisor";
+import { updateCore } from "../../../src/data/supervisor/core";
+import { StoreAddon } from "../../../src/data/supervisor/store";
+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";
+import "../../../src/layouts/hass-tabs-subpage";
+import { SUPERVISOR_UPDATE_NAMES } from "../../../src/panels/config/dashboard/ha-config-updates";
+import { HomeAssistant, Route } from "../../../src/types";
+import { addonArchIsSupported, extractChangelog } from "../util/addon";
+
+declare global {
+  interface HASSDomEvents {
+    "update-complete": undefined;
+  }
+}
+
+type updateType = "os" | "supervisor" | "core" | "addon";
+
+const changelogUrl = (
+  entry: updateType,
+  version: string
+): string | undefined => {
+  if (entry === "addon") {
+    return undefined;
+  }
+  if (entry === "core") {
+    return version.includes("dev")
+      ? "https://github.com/home-assistant/core/commits/dev"
+      : version.includes("b")
+      ? "https://next.home-assistant.io/latest-release-notes/"
+      : "https://www.home-assistant.io/latest-release-notes/";
+  }
+  if (entry === "os") {
+    return version.includes("dev")
+      ? "https://github.com/home-assistant/operating-system/commits/dev"
+      : `https://github.com/home-assistant/operating-system/releases/tag/${version}`;
+  }
+  if (entry === "supervisor") {
+    return version.includes("dev")
+      ? "https://github.com/home-assistant/supervisor/commits/main"
+      : `https://github.com/home-assistant/supervisor/releases/tag/${version}`;
+  }
+  return undefined;
+};
+
+@customElement("update-available-card")
+class UpdateAvailableCard extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
+  @property({ attribute: false }) public route!: Route;
+
+  @property({ type: Boolean }) public narrow!: boolean;
+
+  @property({ attribute: false }) public addonSlug?: string;
+
+  @state() private _updateType?: updateType;
+
+  @state() private _changelogContent?: string;
+
+  @state() private _addonInfo?: HassioAddonDetails;
+
+  @state() private _updating = false;
+
+  @state() private _error?: string;
+
+  private _addonStoreInfo = memoizeOne(
+    (slug: string, storeAddons: StoreAddon[]) =>
+      storeAddons.find((addon) => addon.slug === slug)
+  );
+
+  protected render(): TemplateResult {
+    if (
+      !this._updateType ||
+      (this._updateType === "addon" && !this._addonInfo)
+    ) {
+      return html``;
+    }
+
+    const changelog = changelogUrl(this._updateType, this._version_latest);
+
+    return html`
+      <ha-card
+        .header=${this.supervisor.localize("update_available.update_name", {
+          name: this._name,
+        })}
+      >
+        <div class="card-content">
+          ${this._error
+            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+            : ""}
+          ${this._version === this._version_latest
+            ? html`<p>
+                ${this.supervisor.localize("update_available.no_update", {
+                  name: this._name,
+                })}
+              </p>`
+            : !this._updating
+            ? html`
+                ${this._changelogContent
+                  ? html`
+                      <ha-faded>
+                        <ha-markdown .content=${this._changelogContent}>
+                        </ha-markdown>
+                      </ha-faded>
+                    `
+                  : ""}
+                <div class="versions">
+                  <p>
+                    ${this.supervisor.localize("update_available.description", {
+                      name: this._name,
+                      version: this._version,
+                      newest_version: this._version_latest,
+                    })}
+                  </p>
+                </div>
+                ${["core", "addon"].includes(this._updateType)
+                  ? html`
+                      <ha-formfield
+                        .label=${this.supervisor.localize(
+                          "update_available.create_backup"
+                        )}
+                      >
+                        <ha-checkbox checked></ha-checkbox>
+                      </ha-formfield>
+                    `
+                  : ""}
+              `
+            : html`<ha-circular-progress alt="Updating" size="large" active>
+                </ha-circular-progress>
+                <p class="progress-text">
+                  ${this.supervisor.localize("update_available.updating", {
+                    name: this._name,
+                    version: this._version_latest,
+                  })}
+                </p>`}
+        </div>
+        ${this._version !== this._version_latest && !this._updating
+          ? html`
+              <div class="card-actions">
+                ${changelog
+                  ? html`<a .href=${changelog} target="_blank" rel="noreferrer">
+                      <mwc-button
+                        .label=${this.supervisor.localize(
+                          "update_available.open_release_notes"
+                        )}
+                      >
+                      </mwc-button>
+                    </a>`
+                  : ""}
+                <span></span>
+                <ha-progress-button
+                  .disabled=${!this._version ||
+                  (this._shouldCreateBackup &&
+                    this.supervisor.info?.state !== "running")}
+                  @click=${this._update}
+                  raised
+                >
+                  ${this.supervisor.localize("common.update")}
+                </ha-progress-button>
+              </div>
+            `
+          : ""}
+      </ha-card>
+    `;
+  }
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    const pathPart = this.route?.path.substring(1, this.route.path.length);
+    const updateType = ["core", "os", "supervisor"].includes(pathPart)
+      ? pathPart
+      : "addon";
+    this._updateType = updateType as updateType;
+
+    if (updateType === "addon") {
+      if (!this.addonSlug) {
+        this.addonSlug = pathPart;
+      }
+      this._loadAddonData();
+    }
+  }
+
+  get _shouldCreateBackup(): boolean {
+    if (this._updateType && !["core", "addon"].includes(this._updateType)) {
+      return false;
+    }
+    const checkbox = this.shadowRoot?.querySelector("ha-checkbox");
+    if (checkbox) {
+      return checkbox.checked;
+    }
+    return true;
+  }
+
+  get _version(): string {
+    return this._updateType
+      ? this._updateType === "addon"
+        ? this._addonInfo!.version
+        : this.supervisor[this._updateType]?.version || ""
+      : "";
+  }
+
+  get _version_latest(): string {
+    return this._updateType
+      ? this._updateType === "addon"
+        ? this._addonInfo!.version_latest
+        : this.supervisor[this._updateType]?.version_latest || ""
+      : "";
+  }
+
+  get _name(): string {
+    return this._updateType
+      ? this._updateType === "addon"
+        ? this._addonInfo!.name
+        : SUPERVISOR_UPDATE_NAMES[this._updateType]
+      : "";
+  }
+
+  private async _loadAddonData() {
+    try {
+      this._addonInfo = await fetchHassioAddonInfo(this.hass, this.addonSlug!);
+    } catch (err) {
+      showAlertDialog(this, {
+        title: this._updateType,
+        text: extractApiErrorMessage(err),
+      });
+      return;
+    }
+    const addonStoreInfo =
+      !this._addonInfo.detached && !this._addonInfo.available
+        ? this._addonStoreInfo(
+            this._addonInfo.slug,
+            this.supervisor.store.addons
+          )
+        : undefined;
+
+    if (this._addonInfo.changelog) {
+      try {
+        const content = await fetchHassioAddonChangelog(
+          this.hass,
+          this.addonSlug!
+        );
+        this._changelogContent = extractChangelog(this._addonInfo, content);
+      } catch (err) {
+        this._error = extractApiErrorMessage(err);
+        return;
+      }
+    }
+
+    if (!this._addonInfo.available && addonStoreInfo) {
+      if (
+        !addonArchIsSupported(
+          this.supervisor.info.supported_arch,
+          this._addonInfo.arch
+        )
+      ) {
+        this._error = this.supervisor.localize(
+          "addon.dashboard.not_available_arch"
+        );
+      } else {
+        this._error = this.supervisor.localize(
+          "addon.dashboard.not_available_version",
+          {
+            core_version_installed: this.supervisor.core.version,
+            core_version_needed: addonStoreInfo.homeassistant,
+          }
+        );
+      }
+    }
+  }
+
+  private async _update() {
+    this._error = undefined;
+    this._updating = true;
+    try {
+      if (this._updateType === "addon") {
+        await updateHassioAddon(
+          this.hass,
+          this.addonSlug!,
+          this._shouldCreateBackup
+        );
+      } else if (this._updateType === "core") {
+        await updateCore(this.hass, this._shouldCreateBackup);
+      } else if (this._updateType === "os") {
+        await updateOS(this.hass);
+      } else if (this._updateType === "supervisor") {
+        await updateSupervisor(this.hass);
+      }
+    } catch (err: any) {
+      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
+        this._error = extractApiErrorMessage(err);
+        this._updating = false;
+        return;
+      }
+    }
+    fireEvent(this, "update-complete");
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: block;
+      }
+      ha-card {
+        margin: auto;
+      }
+      a {
+        text-decoration: none;
+        color: var(--primary-text-color);
+      }
+      ha-settings-row {
+        padding: 0;
+      }
+      .card-actions {
+        display: flex;
+        justify-content: space-between;
+        border-top: none;
+        padding: 0 8px 8px;
+      }
+
+      ha-circular-progress {
+        display: block;
+        margin: 32px;
+        text-align: center;
+      }
+
+      .progress-text {
+        text-align: center;
+      }
+
+      ha-markdown {
+        padding-bottom: 8px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "update-available-card": UpdateAvailableCard;
+  }
+}
--- a/hassio/src/update-available/update-available-dashboard.ts
+++ b/hassio/src/update-available/update-available-dashboard.ts
@@ -0,0 +1,59 @@
+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-subpage";
+import { HomeAssistant, Route } from "../../../src/types";
+import "./update-available-card";
+
+@customElement("update-available-dashboard")
+class UpdateAvailableDashboard extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public supervisor!: Supervisor;
+
+  @property({ type: Boolean }) public narrow!: boolean;
+
+  @property({ attribute: false }) public route!: Route;
+
+  protected render(): TemplateResult {
+    return html`
+      <hass-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .route=${this.route}
+      >
+        <update-available-card
+          .hass=${this.hass}
+          .supervisor=${this.supervisor}
+          .route=${this.route}
+          .narrow=${this.narrow}
+          @update-complete=${this._updateComplete}
+        ></update-available-card>
+      </hass-subpage>
+    `;
+  }
+
+  private _updateComplete() {
+    history.back();
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      hass-subpage {
+        --app-header-background-color: var(--primary-background-color);
+        --app-header-text-color: var(--sidebar-text-color);
+      }
+      update-available-card {
+        margin: auto;
+        margin-top: 16px;
+        max-width: 600px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "update-available-dashboard": UpdateAvailableDashboard;
+  }
+}
--- a/hassio/src/util/addon.ts
+++ b/hassio/src/util/addon.ts
@@ -1,7 +1,30 @@
 import memoizeOne from "memoize-one";
+import { HassioAddonDetails } from "../../../src/data/hassio/addon";
 import { SupervisorArch } from "../../../src/data/supervisor/supervisor";

 export const addonArchIsSupported = memoizeOne(
  (supported_archs: SupervisorArch[], addon_archs: SupervisorArch[]) =>
    addon_archs.some((arch) => supported_archs.includes(arch))
 );
+
+export const extractChangelog = (
+  addon: HassioAddonDetails,
+  content: string
+): string => {
+  if (content.startsWith("# Changelog")) {
+    content = content.substr(12, content.length);
+  }
+  if (
+    content.includes(`# ${addon.version}`) &&
+    content.includes(`# ${addon.version_latest}`)
+  ) {
+    const newcontent = content.split(`# ${addon.version}`)[0];
+    if (newcontent.includes(`# ${addon.version_latest}`)) {
+      // Only change the content if the new version still exist
+      // if the changelog does not have the newests version on top
+      // this will not be true, and we don't modify the content
+      content = newcontent;
+    }
+  }
+  return content;
+};
--- a/package.json
+++ b/package.json
@@ -22,23 +22,23 @@
  "license": "Apache-2.0",
  "dependencies": {
    "@braintree/sanitize-url": "^5.0.2",
-    "@codemirror/commands": "^0.19.2",
-    "@codemirror/gutter": "^0.19.1",
-    "@codemirror/highlight": "^0.19.2",
+    "@codemirror/commands": "^0.19.5",
+    "@codemirror/gutter": "^0.19.4",
+    "@codemirror/highlight": "^0.19.6",
    "@codemirror/history": "^0.19.0",
    "@codemirror/legacy-modes": "^0.19.0",
-    "@codemirror/rectangular-selection": "^0.19.0",
-    "@codemirror/search": "^0.19.0",
-    "@codemirror/state": "^0.19.1",
-    "@codemirror/stream-parser": "^0.19.1",
-    "@codemirror/text": "^0.19.2",
-    "@codemirror/view": "^0.19.4",
-    "@formatjs/intl-datetimeformat": "^4.2.4",
-    "@formatjs/intl-getcanonicallocales": "^1.7.3",
-    "@formatjs/intl-locale": "^2.4.38",
-    "@formatjs/intl-numberformat": "^7.2.4",
-    "@formatjs/intl-pluralrules": "^4.1.4",
-    "@formatjs/intl-relativetimeformat": "^9.3.1",
+    "@codemirror/rectangular-selection": "^0.19.1",
+    "@codemirror/search": "^0.19.2",
+    "@codemirror/state": "^0.19.4",
+    "@codemirror/stream-parser": "^0.19.2",
+    "@codemirror/text": "^0.19.5",
+    "@codemirror/view": "^0.19.15",
+    "@formatjs/intl-datetimeformat": "^4.2.5",
+    "@formatjs/intl-getcanonicallocales": "^1.8.0",
+    "@formatjs/intl-locale": "^2.4.40",
+    "@formatjs/intl-numberformat": "^7.2.5",
+    "@formatjs/intl-pluralrules": "^4.1.5",
+    "@formatjs/intl-relativetimeformat": "^9.3.2",
    "@formatjs/intl-utils": "^3.8.4",
    "@fullcalendar/common": "5.9.0",
    "@fullcalendar/core": "5.9.0",
@@ -46,48 +46,38 @@
    "@fullcalendar/interaction": "5.9.0",
    "@fullcalendar/list": "5.9.0",
    "@lit-labs/virtualizer": "patch:@lit-labs/virtualizer@0.6.0#./.yarn/patches/@lit-labs/virtualizer/0.7.0.patch",
-    "@material/chips": "14.0.0-canary.353ca7e9f.0",
-    "@material/data-table": "14.0.0-canary.353ca7e9f.0",
-    "@material/mwc-button": "0.25.2",
-    "@material/mwc-checkbox": "0.25.2",
-    "@material/mwc-circular-progress": "0.25.2",
-    "@material/mwc-dialog": "0.25.2",
-    "@material/mwc-fab": "0.25.2",
-    "@material/mwc-formfield": "0.25.2",
-    "@material/mwc-icon-button": "0.25.2",
-    "@material/mwc-linear-progress": "0.25.2",
-    "@material/mwc-list": "0.25.2",
-    "@material/mwc-menu": "0.25.2",
-    "@material/mwc-radio": "0.25.2",
-    "@material/mwc-ripple": "0.25.2",
-    "@material/mwc-select": "0.25.2",
-    "@material/mwc-slider": "0.25.2",
-    "@material/mwc-switch": "0.25.2",
-    "@material/mwc-tab": "0.25.2",
-    "@material/mwc-tab-bar": "0.25.2",
-    "@material/mwc-textfield": "0.25.2",
-    "@material/top-app-bar": "14.0.0-canary.353ca7e9f.0",
-    "@mdi/js": "6.3.95",
-    "@mdi/svg": "6.3.95",
+    "@material/chips": "14.0.0-canary.261f2db59.0",
+    "@material/data-table": "14.0.0-canary.261f2db59.0",
+    "@material/mwc-button": "0.25.3",
+    "@material/mwc-checkbox": "0.25.3",
+    "@material/mwc-circular-progress": "0.25.3",
+    "@material/mwc-dialog": "0.25.3",
+    "@material/mwc-fab": "0.25.3",
+    "@material/mwc-formfield": "0.25.3",
+    "@material/mwc-icon-button": "patch:@material/mwc-icon-button@0.25.3#./.yarn/patches/@material/mwc-icon-button/remove-icon.patch",
+    "@material/mwc-linear-progress": "0.25.3",
+    "@material/mwc-list": "0.25.3",
+    "@material/mwc-menu": "0.25.3",
+    "@material/mwc-radio": "0.25.3",
+    "@material/mwc-ripple": "0.25.3",
+    "@material/mwc-select": "0.25.3",
+    "@material/mwc-slider": "0.25.3",
+    "@material/mwc-switch": "0.25.3",
+    "@material/mwc-tab": "0.25.3",
+    "@material/mwc-tab-bar": "0.25.3",
+    "@material/mwc-textfield": "0.25.3",
+    "@material/top-app-bar": "14.0.0-canary.261f2db59.0",
+    "@mdi/js": "6.5.95",
+    "@mdi/svg": "6.5.95",
    "@polymer/app-layout": "^3.1.0",
    "@polymer/iron-flex-layout": "^3.0.1",
    "@polymer/iron-icon": "^3.0.1",
    "@polymer/iron-input": "^3.0.1",
-    "@polymer/iron-overlay-behavior": "^3.0.3",
    "@polymer/iron-resizable-behavior": "^3.0.1",
-    "@polymer/paper-checkbox": "^3.1.0",
-    "@polymer/paper-dialog": "^3.0.1",
-    "@polymer/paper-dialog-behavior": "^3.0.1",
-    "@polymer/paper-dialog-scrollable": "^3.0.1",
    "@polymer/paper-dropdown-menu": "^3.2.0",
    "@polymer/paper-input": "^3.2.1",
    "@polymer/paper-item": "^3.0.1",
    "@polymer/paper-listbox": "^3.0.1",
-    "@polymer/paper-menu-button": "^3.1.0",
-    "@polymer/paper-progress": "^3.0.1",
-    "@polymer/paper-radio-button": "^3.0.1",
-    "@polymer/paper-radio-group": "^3.0.1",
-    "@polymer/paper-ripple": "^3.0.2",
    "@polymer/paper-slider": "^3.0.1",
    "@polymer/paper-styles": "^3.0.1",
    "@polymer/paper-tabs": "^3.1.0",
@@ -112,19 +102,20 @@
    "fuse.js": "^6.0.0",
    "google-timezones-json": "^1.0.2",
    "hls.js": "^1.0.11",
-    "home-assistant-js-websocket": "^5.11.1",
+    "home-assistant-js-websocket": "^5.11.3",
    "idb-keyval": "^5.1.3",
    "intl-messageformat": "^9.9.1",
    "js-yaml": "^4.1.0",
    "leaflet": "^1.7.1",
    "leaflet-draw": "^1.0.4",
-    "lit": "^2.0.0",
+    "lit": "^2.0.2",
    "lit-vaadin-helpers": "^0.2.1",
    "marked": "^3.0.2",
    "memoize-one": "^5.2.1",
    "node-vibrant": "3.2.1-alpha.1",
    "proxy-polyfill": "^0.3.2",
    "punycode": "^2.1.1",
+    "qr-scanner": "^1.3.0",
    "qrcode": "^1.4.4",
    "regenerator-runtime": "^0.13.8",
    "resize-observer-polyfill": "^1.5.1",
@@ -190,7 +181,7 @@
    "eslint-import-resolver-webpack": "^0.13.1",
    "eslint-plugin-disable": "^2.0.1",
    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-lit": "^1.5.1",
+    "eslint-plugin-lit": "^1.6.1",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-unused-imports": "^1.1.5",
    "eslint-plugin-wc": "^1.3.2",
@@ -240,10 +231,10 @@
  "resolutions": {
    "@polymer/polymer": "patch:@polymer/polymer@3.4.1#./.yarn/patches/@polymer/polymer/pr-5569.patch",
    "@webcomponents/webcomponentsjs": "^2.2.10",
-    "lit": "^2.0.0",
-    "lit-html": "2.0.0",
-    "lit-element": "3.0.0",
-    "@lit/reactive-element": "1.0.0"
+    "lit": "^2.0.2",
+    "lit-html": "2.0.1",
+    "lit-element": "3.0.1",
+    "@lit/reactive-element": "1.0.1"
  },
  "main": "src/home-assistant.js",
  "husky": {
--- a/setup.py
+++ b/setup.py
@@ -2,7 +2,7 @@ from setuptools import setup, find_packages

 setup(
    name="home-assistant-frontend",
-    version="20211014.0",
+    version="20211215.0",
    description="The Home Assistant frontend",
    url="https://github.com/home-assistant/frontend",
    author="The Home Assistant Authors",
--- a/src/auth/ha-auth-flow.ts
+++ b/src/auth/ha-auth-flow.ts
@@ -1,4 +1,5 @@
 import "@material/mwc-button";
+import { genClientId } from "home-assistant-js-websocket";
 import {
  css,
  CSSResultGroup,
@@ -7,18 +8,20 @@ import {
  PropertyValues,
  TemplateResult,
 } from "lit";
-import "./ha-password-manager-polyfill";
 import { property, state } from "lit/decorators";
-import "../components/ha-form/ha-form";
-import "../components/ha-markdown";
 import "../components/ha-alert";
+import "../components/ha-checkbox";
+import { computeInitialHaFormData } from "../components/ha-form/compute-initial-ha-form-data";
+import "../components/ha-form/ha-form";
+import "../components/ha-formfield";
+import "../components/ha-markdown";
 import { AuthProvider } from "../data/auth";
 import {
  DataEntryFlowStep,
  DataEntryFlowStepForm,
 } from "../data/data_entry_flow";
 import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
-import { computeInitialHaFormData } from "../components/ha-form/compute-initial-ha-form-data";
+import "./ha-password-manager-polyfill";

 type State = "loading" | "error" | "step";

@@ -41,6 +44,8 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {

  @state() private _submitting = false;

+  @state() private _storeToken = false;
+
  willUpdate(changedProps: PropertyValues) {
    super.willUpdate(changedProps);

@@ -201,12 +206,30 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
            .computeError=${this._computeErrorCallback(step)}
            @value-changed=${this._stepDataChanged}
          ></ha-form>
+          ${this.clientId === genClientId() &&
+          !["select_mfa_module", "mfa"].includes(step.step_id)
+            ? html`
+                <ha-formfield
+                  class="store-token"
+                  .label=${this.localize("ui.panel.page-authorize.store_token")}
+                >
+                  <ha-checkbox
+                    .checked=${this._storeToken}
+                    @change=${this._storeTokenChanged}
+                  ></ha-checkbox>
+                </ha-formfield>
+              `
+            : ""}
        `;
      default:
        return html``;
    }
  }

+  private _storeTokenChanged(e: CustomEvent<HTMLInputElement>) {
+    this._storeToken = (e.currentTarget as HTMLInputElement).checked;
+  }
+
  private async _providerChanged(newProvider?: AuthProvider) {
    if (this._step && this._step.type === "form") {
      fetch(`/auth/login_flow/${this._step.flow_id}`, {
@@ -274,6 +297,9 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
    if (this.oauth2State) {
      url += `&state=${encodeURIComponent(this.oauth2State)}`;
    }
+    if (this._storeToken) {
+      url += `&storeToken=true`;
+    }

    document.location.assign(url);
  }
@@ -357,6 +383,11 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
        margin: 24px 0 8px;
        text-align: center;
      }
+      /* Align with the rest of the form. */
+      .store-token {
+        margin-top: 10px;
+        margin-left: -16px;
+      }
    `;
  }
 }
--- a/src/auth/ha-authorize.ts
+++ b/src/auth/ha-authorize.ts
@@ -101,17 +101,13 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
    this._fetchAuthProviders();

    if (matchMedia("(prefers-color-scheme: dark)").matches) {
-      applyThemesOnElement(
-        document.documentElement,
-        {
-          default_theme: "default",
-          default_dark_theme: null,
-          themes: {},
-          darkMode: false,
-        },
-        "default",
-        { dark: true }
-      );
+      applyThemesOnElement(document.documentElement, {
+        default_theme: "default",
+        default_dark_theme: null,
+        themes: {},
+        darkMode: true,
+        theme: "default",
+      });
    }

    if (!this.redirectUri) {
--- a/src/auth/ha-pick-auth-provider.ts
+++ b/src/auth/ha-pick-auth-provider.ts
@@ -21,7 +21,11 @@ class HaPickAuthProvider extends litLocalizeLiteMixin(LitElement) {
      <p>${this.localize("ui.panel.page-authorize.pick_auth_provider")}:</p>
      ${this.authProviders.map(
        (provider) => html`
-          <paper-item .auth_provider=${provider} @click=${this._handlePick}>
+          <paper-item
+            role="button"
+            .auth_provider=${provider}
+            @click=${this._handlePick}
+          >
            <paper-item-body>${provider.name}</paper-item-body>
            <ha-icon-next></ha-icon-next>
          </paper-item>
--- a/src/cast/const.ts
+++ b/src/cast/const.ts
@@ -3,5 +3,5 @@ import { CAST_DEV_APP_ID } from "./dev_const";
 // Guard dev mode with `__dev__` so it can only ever be enabled in dev mode.
 export const CAST_DEV = __DEV__ && true;

-export const CAST_APP_ID = CAST_DEV ? CAST_DEV_APP_ID : "B12CE3CA";
+export const CAST_APP_ID = CAST_DEV ? CAST_DEV_APP_ID : "A078F6B0";
 export const CAST_NS = "urn:x-cast:com.nabucasa.hast";
--- a/src/cast/sender_messages.ts
+++ b/src/cast/sender_messages.ts
@@ -11,4 +11,20 @@ export interface ReceiverStatusMessage extends BaseCastMessage {
  urlPath?: string | null;
 }

+export interface ReceiverErrorMessage extends BaseCastMessage {
+  type: "receiver_error";
+  error_code: ReceiverErrorCode;
+  error_message: string;
+}
+
+export const enum ReceiverErrorCode {
+  CONNECTION_FAILED = 1,
+  AUTHENTICATION_FAILED = 2,
+  CONNECTION_LOST = 3,
+  HASS_URL_MISSING = 4,
+  NO_HTTPS = 5,
+  NOT_CONNECTED = 21,
+  FETCH_CONFIG_FAILED = 22,
+}
+
 export type SenderMessage = ReceiverStatusMessage;
--- a/src/common/auth/token_storage.ts
+++ b/src/common/auth/token_storage.ts
@@ -1,4 +1,5 @@
 import { AuthData } from "home-assistant-js-websocket";
+import { extractSearchParam } from "../url/search-params";

 const storage = window.localStorage || {};

@@ -30,6 +31,11 @@ export function askWrite() {

 export function saveTokens(tokens: AuthData | null) {
  tokenCache.tokens = tokens;
+
+  if (!tokenCache.writeEnabled && extractSearchParam("storeToken") === "true") {
+    tokenCache.writeEnabled = true;
+  }
+
  if (tokenCache.writeEnabled) {
    try {
      storage.hassTokens = JSON.stringify(tokens);
@@ -45,7 +51,6 @@ export function enableWrite() {
    saveTokens(tokenCache.tokens);
  }
 }
-
 export function loadTokens() {
  if (tokenCache.tokens === undefined) {
    try {
--- a/src/common/color/colors.ts
+++ b/src/common/color/colors.ts
@@ -61,3 +61,14 @@ export const COLORS = [
 export function getColorByIndex(index: number) {
  return COLORS[index % COLORS.length];
 }
+
+export function getGraphColorByIndex(
+  index: number,
+  style: CSSStyleDeclaration
+) {
+  // The CSS vars for the colors use range 1..n, so we need to adjust the index from the internal 0..n color index range.
+  return (
+    style.getPropertyValue(`--graph-color-${index + 1}`) ||
+    getColorByIndex(index)
+  );
+}
--- a/src/common/config/can_show_page.ts
+++ b/src/common/config/can_show_page.ts
@@ -7,7 +7,13 @@ export const canShowPage = (hass: HomeAssistant, page: PageNavigation) =>
  !hideAdvancedPage(hass, page);

 const isLoadedIntegration = (hass: HomeAssistant, page: PageNavigation) =>
-  !page.component || isComponentLoaded(hass, page.component);
+  page.component
+    ? isComponentLoaded(hass, page.component)
+    : page.components
+    ? page.components.some((integration) =>
+        isComponentLoaded(hass, integration)
+      )
+    : true;
 const isCore = (page: PageNavigation) => page.core;
 const isAdvancedPage = (page: PageNavigation) => page.advancedOnly;
 const userWantsAdvanced = (hass: HomeAssistant) => hass.userData?.showAdvanced;
--- a/src/common/const.ts
+++ b/src/common/const.ts
@@ -1,92 +1,150 @@
 /** Constants to be used in the frontend. */

+import {
+  mdiAccount,
+  mdiAirFilter,
+  mdiAlert,
+  mdiAngleAcute,
+  mdiAppleSafari,
+  mdiBell,
+  mdiBookmark,
+  mdiBrightness5,
+  mdiBullhorn,
+  mdiCalendar,
+  mdiCalendarClock,
+  mdiCash,
+  mdiClock,
+  mdiCloudUpload,
+  mdiCog,
+  mdiCommentAlert,
+  mdiCounter,
+  mdiCurrentAc,
+  mdiEye,
+  mdiFan,
+  mdiFlash,
+  mdiFlower,
+  mdiFormatListBulleted,
+  mdiFormTextbox,
+  mdiGasCylinder,
+  mdiGauge,
+  mdiGoogleAssistant,
+  mdiGoogleCirclesCommunities,
+  mdiHomeAssistant,
+  mdiHomeAutomation,
+  mdiImageFilterFrames,
+  mdiLightbulb,
+  mdiLightningBolt,
+  mdiMailbox,
+  mdiMapMarkerRadius,
+  mdiMolecule,
+  mdiMoleculeCo,
+  mdiMoleculeCo2,
+  mdiPalette,
+  mdiRayVertex,
+  mdiRemote,
+  mdiRobot,
+  mdiRobotVacuum,
+  mdiScriptText,
+  mdiSineWave,
+  mdiTextToSpeech,
+  mdiThermometer,
+  mdiThermostat,
+  mdiTimerOutline,
+  mdiToggleSwitchOutline,
+  mdiVideo,
+  mdiWaterPercent,
+  mdiWeatherCloudy,
+  mdiWhiteBalanceSunny,
+  mdiWifi,
+} from "@mdi/js";
+
 // Constants should be alphabetically sorted by name.
 // Arrays with values should be alphabetically sorted if order doesn't matter.
 // Each constant should have a description what it is supposed to be used for.

 /** Icon to use when no icon specified for domain. */
-export const DEFAULT_DOMAIN_ICON = "hass:bookmark";
+export const DEFAULT_DOMAIN_ICON = mdiBookmark;

 /** Icons for each domain */
 export const FIXED_DOMAIN_ICONS = {
-  alert: "hass:alert",
-  alexa: "hass:amazon-alexa",
-  air_quality: "hass:air-filter",
-  automation: "hass:robot",
-  calendar: "hass:calendar",
-  camera: "hass:video",
-  climate: "hass:thermostat",
-  configurator: "hass:cog",
-  conversation: "hass:text-to-speech",
-  counter: "hass:counter",
-  device_tracker: "hass:account",
-  fan: "hass:fan",
-  google_assistant: "hass:google-assistant",
-  group: "hass:google-circles-communities",
-  homeassistant: "hass:home-assistant",
-  homekit: "hass:home-automation",
-  image_processing: "hass:image-filter-frames",
-  input_boolean: "hass:toggle-switch-outline",
-  input_datetime: "hass:calendar-clock",
-  input_number: "hass:ray-vertex",
-  input_select: "hass:format-list-bulleted",
-  input_text: "hass:form-textbox",
-  light: "hass:lightbulb",
-  mailbox: "hass:mailbox",
-  notify: "hass:comment-alert",
-  number: "hass:ray-vertex",
-  persistent_notification: "hass:bell",
-  person: "hass:account",
-  plant: "hass:flower",
-  proximity: "hass:apple-safari",
-  remote: "hass:remote",
-  scene: "hass:palette",
-  script: "hass:script-text",
-  select: "hass:format-list-bulleted",
-  sensor: "hass:eye",
-  simple_alarm: "hass:bell",
-  sun: "hass:white-balance-sunny",
-  switch: "hass:flash",
-  timer: "hass:timer-outline",
-  updater: "hass:cloud-upload",
-  vacuum: "hass:robot-vacuum",
-  water_heater: "hass:thermometer",
-  weather: "hass:weather-cloudy",
-  zone: "hass:map-marker-radius",
+  alert: mdiAlert,
+  air_quality: mdiAirFilter,
+  automation: mdiRobot,
+  calendar: mdiCalendar,
+  camera: mdiVideo,
+  climate: mdiThermostat,
+  configurator: mdiCog,
+  conversation: mdiTextToSpeech,
+  counter: mdiCounter,
+  fan: mdiFan,
+  google_assistant: mdiGoogleAssistant,
+  group: mdiGoogleCirclesCommunities,
+  homeassistant: mdiHomeAssistant,
+  homekit: mdiHomeAutomation,
+  image_processing: mdiImageFilterFrames,
+  input_boolean: mdiToggleSwitchOutline,
+  input_datetime: mdiCalendarClock,
+  input_number: mdiRayVertex,
+  input_select: mdiFormatListBulleted,
+  input_text: mdiFormTextbox,
+  light: mdiLightbulb,
+  mailbox: mdiMailbox,
+  notify: mdiCommentAlert,
+  number: mdiRayVertex,
+  persistent_notification: mdiBell,
+  person: mdiAccount,
+  plant: mdiFlower,
+  proximity: mdiAppleSafari,
+  remote: mdiRemote,
+  scene: mdiPalette,
+  script: mdiScriptText,
+  select: mdiFormatListBulleted,
+  sensor: mdiEye,
+  siren: mdiBullhorn,
+  simple_alarm: mdiBell,
+  sun: mdiWhiteBalanceSunny,
+  timer: mdiTimerOutline,
+  updater: mdiCloudUpload,
+  vacuum: mdiRobotVacuum,
+  water_heater: mdiThermometer,
+  weather: mdiWeatherCloudy,
+  zone: mdiMapMarkerRadius,
 };

 export const FIXED_DEVICE_CLASS_ICONS = {
-  aqi: "hass:air-filter",
-  // battery: "hass:battery", => not included by design since `sensorIcon()` will dynamically determine the icon
-  carbon_dioxide: "mdi:molecule-co2",
-  carbon_monoxide: "mdi:molecule-co",
-  current: "hass:current-ac",
-  date: "hass:calendar",
-  energy: "hass:lightning-bolt",
-  gas: "hass:gas-cylinder",
-  humidity: "hass:water-percent",
-  illuminance: "hass:brightness-5",
-  monetary: "mdi:cash",
-  nitrogen_dioxide: "mdi:molecule",
-  nitrogen_monoxide: "mdi:molecule",
-  nitrous_oxide: "mdi:molecule",
-  ozone: "mdi:molecule",
-  pm1: "mdi:molecule",
-  pm10: "mdi:molecule",
-  pm25: "mdi:molecule",
-  power: "hass:flash",
-  power_factor: "hass:angle-acute",
-  pressure: "hass:gauge",
-  signal_strength: "hass:wifi",
-  sulphur_dioxide: "mdi:molecule",
-  temperature: "hass:thermometer",
-  timestamp: "hass:clock",
-  volatile_organic_compounds: "mdi:molecule",
-  voltage: "hass:sine-wave",
+  aqi: mdiAirFilter,
+  // battery: mdiBattery, => not included by design since `sensorIcon()` will dynamically determine the icon
+  carbon_dioxide: mdiMoleculeCo2,
+  carbon_monoxide: mdiMoleculeCo,
+  current: mdiCurrentAc,
+  date: mdiCalendar,
+  energy: mdiLightningBolt,
+  frequency: mdiSineWave,
+  gas: mdiGasCylinder,
+  humidity: mdiWaterPercent,
+  illuminance: mdiBrightness5,
+  monetary: mdiCash,
+  nitrogen_dioxide: mdiMolecule,
+  nitrogen_monoxide: mdiMolecule,
+  nitrous_oxide: mdiMolecule,
+  ozone: mdiMolecule,
+  pm1: mdiMolecule,
+  pm10: mdiMolecule,
+  pm25: mdiMolecule,
+  power: mdiFlash,
+  power_factor: mdiAngleAcute,
+  pressure: mdiGauge,
+  signal_strength: mdiWifi,
+  sulphur_dioxide: mdiMolecule,
+  temperature: mdiThermometer,
+  timestamp: mdiClock,
+  volatile_organic_compounds: mdiMolecule,
+  voltage: mdiSineWave,
 };

 /** Domains that have a state card. */
 export const DOMAINS_WITH_CARD = [
+  "button",
  "climate",
  "cover",
  "configurator",
@@ -130,8 +188,9 @@ export const DOMAINS_WITH_MORE_INFO = [
  "weather",
 ];

-/** Domains that show no more info dialog. */
-export const DOMAINS_HIDE_MORE_INFO = [
+/** Domains that do not show the default more info dialog content (e.g. the attribute section)
+ *  and do not have a separate more info (so not in DOMAINS_WITH_MORE_INFO). */
+export const DOMAINS_HIDE_DEFAULT_MORE_INFO = [
  "input_number",
  "input_select",
  "input_text",
@@ -140,6 +199,32 @@ export const DOMAINS_HIDE_MORE_INFO = [
  "select",
 ];

+/** Domains that render an input element instead of a text value when rendered in a row.
+ *  Those rows should then not show a cursor pointer when hovered (which would normally
+ *  be the default) unless the element itself enforces it (e.g. a button). Also those elements
+ *  should not act as a click target to open the more info dialog (the row name and state icon
+ *  still do of course) as the click might instead e.g. activate the input field that this row shows.
+ */
+export const DOMAINS_INPUT_ROW = [
+  "cover",
+  "fan",
+  "group",
+  "humidifier",
+  "input_boolean",
+  "input_datetime",
+  "input_number",
+  "input_select",
+  "input_text",
+  "light",
+  "lock",
+  "media_player",
+  "number",
+  "scene",
+  "script",
+  "select",
+  "switch",
+];
+
 /** Domains that should have the history hidden in the more info dialog. */
 export const DOMAINS_MORE_INFO_NO_HISTORY = ["camera", "configurator", "scene"];

--- a/src/common/dom/apply_themes_on_element.ts
+++ b/src/common/dom/apply_themes_on_element.ts
@@ -23,9 +23,9 @@ 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.
- * themeSettings: Settings such as selected dark mode and colors.
+ * themes: HASS theme information (e.g. active dark mode and globally active theme name).
+ * selectedTheme: Selected theme (used to override the globally active theme for this element).
+ * themeSettings: Additional settings such as selected colors.
 */
 export const applyThemesOnElement = (
  element,
@@ -33,31 +33,33 @@ export const applyThemesOnElement = (
  selectedTheme?: string,
  themeSettings?: Partial<HomeAssistant["selectedTheme"]>
 ) => {
-  let cacheKey = selectedTheme;
-  let themeRules: Partial<ThemeVars> = {};
+  // If there is no explicitly desired theme provided, we automatically
+  // use the active one from `themes`.
+  const themeToApply = selectedTheme || themes.theme;

  // If there is no explicitly desired dark mode provided, we automatically
-  // use the active one from hass.themes.
-  if (!themeSettings || themeSettings?.dark === undefined) {
-    themeSettings = {
-      ...themeSettings,
-      dark: themes.darkMode,
-    };
-  }
+  // use the active one from `themes`.
+  const darkMode =
+    themeSettings && themeSettings?.dark !== undefined
+      ? themeSettings?.dark
+      : themes.darkMode;

-  if (themeSettings.dark) {
+  let cacheKey = themeToApply;
+  let themeRules: Partial<ThemeVars> = {};
+
+  if (darkMode) {
    cacheKey = `${cacheKey}__dark`;
    themeRules = { ...darkStyles };
  }

-  if (selectedTheme === "default") {
+  if (themeToApply === "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;
+    const primaryColor = themeSettings?.primaryColor;
+    const accentColor = themeSettings?.accentColor;

-    if (themeSettings.dark && primaryColor) {
+    if (darkMode && primaryColor) {
      themeRules["app-header-background-color"] = hexBlend(
        primaryColor,
        "#121212",
@@ -98,17 +100,17 @@ export const applyThemesOnElement = (
  // Custom theme logic (not relevant for default theme, since it would override
  // the derived calculations from above)
  if (
-    selectedTheme &&
-    selectedTheme !== "default" &&
-    themes.themes[selectedTheme]
+    themeToApply &&
+    themeToApply !== "default" &&
+    themes.themes[themeToApply]
  ) {
    // Apply theme vars that are relevant for all modes (but extract the "modes" section first)
-    const { modes, ...baseThemeRules } = themes.themes[selectedTheme];
+    const { modes, ...baseThemeRules } = themes.themes[themeToApply];
    themeRules = { ...themeRules, ...baseThemeRules };

    // Apply theme vars for the specific mode if available
    if (modes) {
-      if (themeSettings?.dark) {
+      if (darkMode) {
        themeRules = { ...themeRules, ...modes.dark };
      } else {
        themeRules = { ...themeRules, ...modes.light };
--- a/src/common/empty_image_base64.ts
+++ b/src/common/empty_image_base64.ts
@@ -1,2 +1,3 @@
 /** An empty image which can be set as src of an img element. */
-export default "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+export const emptyImageBase64 =
+  "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
--- a/src/common/entity/alarm_panel_icon.ts
+++ b/src/common/entity/alarm_panel_icon.ts
@@ -1,24 +1,36 @@
 /** Return an icon representing a alarm panel state. */

+import {
+  mdiShieldLock,
+  mdiShieldAirplane,
+  mdiShieldHome,
+  mdiShieldMoon,
+  mdiSecurity,
+  mdiShieldOutline,
+  mdiBellRing,
+  mdiShieldOff,
+  mdiShield,
+} from "@mdi/js";
+
 export const alarmPanelIcon = (state?: string) => {
  switch (state) {
    case "armed_away":
-      return "hass:shield-lock";
+      return mdiShieldLock;
    case "armed_vacation":
-      return "hass:shield-airplane";
+      return mdiShieldAirplane;
    case "armed_home":
-      return "hass:shield-home";
+      return mdiShieldHome;
    case "armed_night":
-      return "hass:shield-moon";
+      return mdiShieldMoon;
    case "armed_custom_bypass":
-      return "hass:security";
+      return mdiSecurity;
    case "pending":
-      return "hass:shield-outline";
+      return mdiShieldOutline;
    case "triggered":
-      return "hass:bell-ring";
+      return mdiBellRing;
    case "disarmed":
-      return "hass:shield-off";
+      return mdiShieldOff;
    default:
-      return "hass:shield";
+      return mdiShield;
  }
 };
--- a/src/common/entity/battery_icon.ts
+++ b/src/common/entity/battery_icon.ts
@@ -1,35 +1,92 @@
 /** Return an icon representing a battery state. */
+import {
+  mdiBattery,
+  mdiBattery10,
+  mdiBattery20,
+  mdiBattery30,
+  mdiBattery40,
+  mdiBattery50,
+  mdiBattery60,
+  mdiBattery70,
+  mdiBattery80,
+  mdiBattery90,
+  mdiBatteryAlert,
+  mdiBatteryAlertVariantOutline,
+  mdiBatteryCharging,
+  mdiBatteryCharging10,
+  mdiBatteryCharging20,
+  mdiBatteryCharging30,
+  mdiBatteryCharging40,
+  mdiBatteryCharging50,
+  mdiBatteryCharging60,
+  mdiBatteryCharging70,
+  mdiBatteryCharging80,
+  mdiBatteryCharging90,
+  mdiBatteryChargingOutline,
+  mdiBatteryUnknown,
+} from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";

-export const batteryIcon = (
+const BATTERY_ICONS = {
+  10: mdiBattery10,
+  20: mdiBattery20,
+  30: mdiBattery30,
+  40: mdiBattery40,
+  50: mdiBattery50,
+  60: mdiBattery60,
+  70: mdiBattery70,
+  80: mdiBattery80,
+  90: mdiBattery90,
+  100: mdiBattery,
+};
+const BATTERY_CHARGING_ICONS = {
+  10: mdiBatteryCharging10,
+  20: mdiBatteryCharging20,
+  30: mdiBatteryCharging30,
+  40: mdiBatteryCharging40,
+  50: mdiBatteryCharging50,
+  60: mdiBatteryCharging60,
+  70: mdiBatteryCharging70,
+  80: mdiBatteryCharging80,
+  90: mdiBatteryCharging90,
+  100: mdiBatteryCharging,
+};
+
+export const batteryStateIcon = (
  batteryState: HassEntity,
  batteryChargingState?: HassEntity
 ) => {
-  const battery = Number(batteryState.state);
-  const battery_charging =
+  const battery = batteryState.state;
+  const batteryCharging =
    batteryChargingState && batteryChargingState.state === "on";
-  let icon = "hass:battery";

-  if (isNaN(battery)) {
-    if (batteryState.state === "off") {
-      icon += "-full";
-    } else if (batteryState.state === "on") {
-      icon += "-alert";
-    } else {
-      icon += "-unknown";
-    }
-    return icon;
-  }
-
-  const batteryRound = Math.round(battery / 10) * 10;
-  if (battery_charging && battery > 10) {
-    icon += `-charging-${batteryRound}`;
-  } else if (battery_charging) {
-    icon += "-outline";
-  } else if (battery <= 5) {
-    icon += "-alert";
-  } else if (battery > 5 && battery < 95) {
-    icon += `-${batteryRound}`;
-  }
-  return icon;
+  return batteryIcon(battery, batteryCharging);
+};
+
+export const batteryIcon = (
+  batteryState: number | string,
+  batteryCharging?: boolean
+) => {
+  const batteryValue = Number(batteryState);
+  if (isNaN(batteryValue)) {
+    if (batteryState === "off") {
+      return mdiBattery;
+    }
+    if (batteryState === "on") {
+      return mdiBatteryAlert;
+    }
+    return mdiBatteryUnknown;
+  }
+
+  const batteryRound = Math.round(batteryValue / 10) * 10;
+  if (batteryCharging && batteryValue >= 10) {
+    return BATTERY_CHARGING_ICONS[batteryRound];
+  }
+  if (batteryCharging) {
+    return mdiBatteryChargingOutline;
+  }
+  if (batteryValue <= 5) {
+    return mdiBatteryAlertVariantOutline;
+  }
+  return BATTERY_ICONS[batteryRound];
 };
--- a/src/common/entity/binary_sensor_icon.ts
+++ b/src/common/entity/binary_sensor_icon.ts
@@ -1,3 +1,46 @@
+import {
+  mdiAlertCircle,
+  mdiBattery,
+  mdiBatteryCharging,
+  mdiBatteryOutline,
+  mdiBrightness5,
+  mdiBrightness7,
+  mdiCheckboxMarkedCircle,
+  mdiCheckNetworkOutline,
+  mdiCloseNetworkOutline,
+  mdiCheckCircle,
+  mdiCropPortrait,
+  mdiDoorClosed,
+  mdiDoorOpen,
+  mdiFire,
+  mdiGarage,
+  mdiGarageOpen,
+  mdiHome,
+  mdiHomeOutline,
+  mdiLock,
+  mdiLockOpen,
+  mdiMusicNote,
+  mdiMusicNoteOff,
+  mdiPackage,
+  mdiPackageUp,
+  mdiPlay,
+  mdiPowerPlug,
+  mdiPowerPlugOff,
+  mdiRadioboxBlank,
+  mdiRun,
+  mdiSmoke,
+  mdiSnowflake,
+  mdiSquare,
+  mdiSquareOutline,
+  mdiStop,
+  mdiThermometer,
+  mdiVibrate,
+  mdiWalk,
+  mdiWater,
+  mdiWaterOff,
+  mdiWindowClosed,
+  mdiWindowOpen,
+} from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";

 /** Return an icon representing a binary sensor state. */
@@ -6,53 +49,55 @@ export const binarySensorIcon = (state?: string, stateObj?: HassEntity) => {
  const is_off = state === "off";
  switch (stateObj?.attributes.device_class) {
    case "battery":
-      return is_off ? "hass:battery" : "hass:battery-outline";
+      return is_off ? mdiBattery : mdiBatteryOutline;
    case "battery_charging":
-      return is_off ? "hass:battery" : "hass:battery-charging";
+      return is_off ? mdiBattery : mdiBatteryCharging;
    case "cold":
-      return is_off ? "hass:thermometer" : "hass:snowflake";
+      return is_off ? mdiThermometer : mdiSnowflake;
    case "connectivity":
-      return is_off ? "hass:server-network-off" : "hass:server-network";
+      return is_off ? mdiCloseNetworkOutline : mdiCheckNetworkOutline;
    case "door":
-      return is_off ? "hass:door-closed" : "hass:door-open";
+      return is_off ? mdiDoorClosed : mdiDoorOpen;
    case "garage_door":
-      return is_off ? "hass:garage" : "hass:garage-open";
+      return is_off ? mdiGarage : mdiGarageOpen;
    case "power":
-      return is_off ? "hass:power-plug-off" : "hass:power-plug";
+      return is_off ? mdiPowerPlugOff : mdiPowerPlug;
    case "gas":
    case "problem":
    case "safety":
    case "tamper":
-      return is_off ? "hass:check-circle" : "hass:alert-circle";
+      return is_off ? mdiCheckCircle : mdiAlertCircle;
    case "smoke":
-      return is_off ? "hass:check-circle" : "hass:smoke";
+      return is_off ? mdiCheckCircle : mdiSmoke;
    case "heat":
-      return is_off ? "hass:thermometer" : "hass:fire";
+      return is_off ? mdiThermometer : mdiFire;
    case "light":
-      return is_off ? "hass:brightness-5" : "hass:brightness-7";
+      return is_off ? mdiBrightness5 : mdiBrightness7;
    case "lock":
-      return is_off ? "hass:lock" : "hass:lock-open";
+      return is_off ? mdiLock : mdiLockOpen;
    case "moisture":
-      return is_off ? "hass:water-off" : "hass:water";
+      return is_off ? mdiWaterOff : mdiWater;
    case "motion":
-      return is_off ? "hass:walk" : "hass:run";
+      return is_off ? mdiWalk : mdiRun;
    case "occupancy":
-      return is_off ? "hass:home-outline" : "hass:home";
+      return is_off ? mdiHomeOutline : mdiHome;
    case "opening":
-      return is_off ? "hass:square" : "hass:square-outline";
+      return is_off ? mdiSquare : mdiSquareOutline;
    case "plug":
-      return is_off ? "hass:power-plug-off" : "hass:power-plug";
+      return is_off ? mdiPowerPlugOff : mdiPowerPlug;
    case "presence":
-      return is_off ? "hass:home-outline" : "hass:home";
+      return is_off ? mdiHomeOutline : mdiHome;
+    case "running":
+      return is_off ? mdiStop : mdiPlay;
    case "sound":
-      return is_off ? "hass:music-note-off" : "hass:music-note";
+      return is_off ? mdiMusicNoteOff : mdiMusicNote;
    case "update":
-      return is_off ? "mdi:package" : "mdi:package-up";
+      return is_off ? mdiPackage : mdiPackageUp;
    case "vibration":
-      return is_off ? "hass:crop-portrait" : "hass:vibrate";
+      return is_off ? mdiCropPortrait : mdiVibrate;
    case "window":
-      return is_off ? "hass:window-closed" : "hass:window-open";
+      return is_off ? mdiWindowClosed : mdiWindowOpen;
    default:
-      return is_off ? "hass:radiobox-blank" : "hass:checkbox-marked-circle";
+      return is_off ? mdiRadioboxBlank : mdiCheckboxMarkedCircle;
  }
 };
--- a/src/common/entity/compute_state_display.ts
+++ b/src/common/entity/compute_state_display.ts
@@ -4,7 +4,7 @@ import { FrontendLocaleData } from "../../data/translation";
 import { formatDate } from "../datetime/format_date";
 import { formatDateTime } from "../datetime/format_date_time";
 import { formatTime } from "../datetime/format_time";
-import { formatNumber } from "../number/format_number";
+import { formatNumber, isNumericState } from "../number/format_number";
 import { LocalizeFunc } from "../translations/localize";
 import { computeStateDomain } from "./compute_state_domain";

@@ -20,7 +20,8 @@ export const computeStateDisplay = (
    return localize(`state.default.${compareState}`);
  }

-  if (stateObj.attributes.unit_of_measurement) {
+  // Entities with a `unit_of_measurement` or `state_class` are numeric values and should use `formatNumber`
+  if (isNumericState(stateObj)) {
    if (stateObj.attributes.device_class === "monetary") {
      try {
        return formatNumber(compareState, locale, {
@@ -31,15 +32,17 @@ export const computeStateDisplay = (
        // fallback to default
      }
    }
-    return `${formatNumber(compareState, locale)} ${
+    return `${formatNumber(compareState, locale)}${
      stateObj.attributes.unit_of_measurement
+        ? " " + stateObj.attributes.unit_of_measurement
+        : ""
    }`;
  }

  const domain = computeStateDomain(stateObj);

  if (domain === "input_datetime") {
-    if (state) {
+    if (state !== undefined) {
      // If trying to display an explicit state, need to parse the explict state to `Date` then format.
      // Attributes aren't available, we have to use `state`.
      try {
@@ -63,7 +66,7 @@ export const computeStateDisplay = (
          }
        }
        return state;
-      } catch {
+      } catch (_e) {
        // Formatting methods may throw error if date parsing doesn't go well,
        // just return the state string in that case.
        return state;
@@ -71,7 +74,17 @@ export const computeStateDisplay = (
    } else {
      // If not trying to display an explicit state, create `Date` object from `stateObj`'s attributes then format.
      let date: Date;
-      if (!stateObj.attributes.has_time) {
+      if (stateObj.attributes.has_date && stateObj.attributes.has_time) {
+        date = new Date(
+          stateObj.attributes.year,
+          stateObj.attributes.month - 1,
+          stateObj.attributes.day,
+          stateObj.attributes.hour,
+          stateObj.attributes.minute
+        );
+        return formatDateTime(date, locale);
+      }
+      if (stateObj.attributes.has_date) {
        date = new Date(
          stateObj.attributes.year,
          stateObj.attributes.month - 1,
@@ -79,20 +92,12 @@ export const computeStateDisplay = (
        );
        return formatDate(date, locale);
      }
-      if (!stateObj.attributes.has_date) {
+      if (stateObj.attributes.has_time) {
        date = new Date();
        date.setHours(stateObj.attributes.hour, stateObj.attributes.minute);
        return formatTime(date, locale);
      }
-
-      date = new Date(
-        stateObj.attributes.year,
-        stateObj.attributes.month - 1,
-        stateObj.attributes.day,
-        stateObj.attributes.hour,
-        stateObj.attributes.minute
-      );
-      return formatDateTime(date, locale);
+      return stateObj.state;
    }
  }

@@ -111,6 +116,14 @@ export const computeStateDisplay = (
    return formatNumber(compareState, locale);
  }

+  // state of button is a timestamp
+  if (
+    domain === "button" ||
+    (domain === "sensor" && stateObj.attributes.device_class === "timestamp")
+  ) {
+    return formatDateTime(new Date(compareState), locale);
+  }
+
  return (
    // Return device class translation
    (stateObj.attributes.device_class &&
--- a/src/common/entity/cover_icon.ts
+++ b/src/common/entity/cover_icon.ts
@@ -1,4 +1,30 @@
 /** Return an icon representing a cover state. */
+import {
+  mdiArrowUpBox,
+  mdiArrowDownBox,
+  mdiGarage,
+  mdiGarageOpen,
+  mdiGateArrowRight,
+  mdiGate,
+  mdiGateOpen,
+  mdiDoorOpen,
+  mdiDoorClosed,
+  mdiCircle,
+  mdiWindowShutter,
+  mdiWindowShutterOpen,
+  mdiBlinds,
+  mdiBlindsOpen,
+  mdiWindowClosed,
+  mdiWindowOpen,
+  mdiArrowExpandHorizontal,
+  mdiArrowUp,
+  mdiArrowCollapseHorizontal,
+  mdiArrowDown,
+  mdiCircleSlice8,
+  mdiArrowSplitVertical,
+  mdiCurtains,
+  mdiCurtainsClosed,
+} from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";

 export const coverIcon = (state?: string, stateObj?: HassEntity): string => {
@@ -8,74 +34,84 @@ export const coverIcon = (state?: string, stateObj?: HassEntity): string => {
    case "garage":
      switch (state) {
        case "opening":
-          return "hass:arrow-up-box";
+          return mdiArrowUpBox;
        case "closing":
-          return "hass:arrow-down-box";
+          return mdiArrowDownBox;
        case "closed":
-          return "hass:garage";
+          return mdiGarage;
        default:
-          return "hass:garage-open";
+          return mdiGarageOpen;
      }
    case "gate":
      switch (state) {
        case "opening":
        case "closing":
-          return "hass:gate-arrow-right";
+          return mdiGateArrowRight;
        case "closed":
-          return "hass:gate";
+          return mdiGate;
        default:
-          return "hass:gate-open";
+          return mdiGateOpen;
      }
    case "door":
-      return open ? "hass:door-open" : "hass:door-closed";
+      return open ? mdiDoorOpen : mdiDoorClosed;
    case "damper":
-      return open ? "hass:circle" : "hass:circle-slice-8";
+      return open ? mdiCircle : mdiCircleSlice8;
    case "shutter":
      switch (state) {
        case "opening":
-          return "hass:arrow-up-box";
+          return mdiArrowUpBox;
        case "closing":
-          return "hass:arrow-down-box";
+          return mdiArrowDownBox;
        case "closed":
-          return "hass:window-shutter";
+          return mdiWindowShutter;
        default:
-          return "hass:window-shutter-open";
+          return mdiWindowShutterOpen;
+      }
+    case "curtain":
+      switch (state) {
+        case "opening":
+          return mdiArrowSplitVertical;
+        case "closing":
+          return mdiArrowCollapseHorizontal;
+        case "closed":
+          return mdiCurtainsClosed;
+        default:
+          return mdiCurtains;
      }
    case "blind":
-    case "curtain":
    case "shade":
      switch (state) {
        case "opening":
-          return "hass:arrow-up-box";
+          return mdiArrowUpBox;
        case "closing":
-          return "hass:arrow-down-box";
+          return mdiArrowDownBox;
        case "closed":
-          return "hass:blinds";
+          return mdiBlinds;
        default:
-          return "hass:blinds-open";
+          return mdiBlindsOpen;
      }
    case "window":
      switch (state) {
        case "opening":
-          return "hass:arrow-up-box";
+          return mdiArrowUpBox;
        case "closing":
-          return "hass:arrow-down-box";
+          return mdiArrowDownBox;
        case "closed":
-          return "hass:window-closed";
+          return mdiWindowClosed;
        default:
-          return "hass:window-open";
+          return mdiWindowOpen;
      }
  }

  switch (state) {
    case "opening":
-      return "hass:arrow-up-box";
+      return mdiArrowUpBox;
    case "closing":
-      return "hass:arrow-down-box";
+      return mdiArrowDownBox;
    case "closed":
-      return "hass:window-closed";
+      return mdiWindowClosed;
    default:
-      return "hass:window-open";
+      return mdiWindowOpen;
  }
 };

@@ -84,9 +120,9 @@ export const computeOpenIcon = (stateObj: HassEntity): string => {
    case "awning":
    case "door":
    case "gate":
-      return "hass:arrow-expand-horizontal";
+      return mdiArrowExpandHorizontal;
    default:
-      return "hass:arrow-up";
+      return mdiArrowUp;
  }
 };

@@ -95,8 +131,8 @@ export const computeCloseIcon = (stateObj: HassEntity): string => {
    case "awning":
    case "door":
    case "gate":
-      return "hass:arrow-collapse-horizontal";
+      return mdiArrowCollapseHorizontal;
    default:
-      return "hass:arrow-down";
+      return mdiArrowDown;
  }
 };
--- a/src/common/entity/domain_icon.ts
+++ b/src/common/entity/domain_icon.ts
@@ -1,3 +1,34 @@
+import {
+  mdiAccount,
+  mdiAccountArrowRight,
+  mdiAirHumidifier,
+  mdiAirHumidifierOff,
+  mdiBluetooth,
+  mdiBluetoothConnect,
+  mdiCalendar,
+  mdiCast,
+  mdiCastConnected,
+  mdiClock,
+  mdiEmoticonDead,
+  mdiFlash,
+  mdiGestureTapButton,
+  mdiLanConnect,
+  mdiLanDisconnect,
+  mdiLock,
+  mdiLockAlert,
+  mdiLockClock,
+  mdiLockOpen,
+  mdiPackageUp,
+  mdiPowerPlug,
+  mdiPowerPlugOff,
+  mdiRestart,
+  mdiSleep,
+  mdiTimerSand,
+  mdiToggleSwitch,
+  mdiToggleSwitchOff,
+  mdiWeatherNight,
+  mdiZWave,
+} from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 /**
 * Return the icon to be used for a domain.
@@ -24,40 +55,69 @@ export const domainIcon = (
    case "binary_sensor":
      return binarySensorIcon(compareState, stateObj);

+    case "button":
+      switch (stateObj?.attributes.device_class) {
+        case "restart":
+          return mdiRestart;
+        case "update":
+          return mdiPackageUp;
+        default:
+          return mdiGestureTapButton;
+      }
+
    case "cover":
      return coverIcon(compareState, stateObj);

+    case "device_tracker":
+      if (stateObj?.attributes.source_type === "router") {
+        return compareState === "home" ? mdiLanConnect : mdiLanDisconnect;
+      }
+      if (
+        ["bluetooth", "bluetooth_le"].includes(stateObj?.attributes.source_type)
+      ) {
+        return compareState === "home" ? mdiBluetoothConnect : mdiBluetooth;
+      }
+      return compareState === "not_home" ? mdiAccountArrowRight : mdiAccount;
+
    case "humidifier":
-      return state && state === "off"
-        ? "hass:air-humidifier-off"
-        : "hass:air-humidifier";
+      return state && state === "off" ? mdiAirHumidifierOff : mdiAirHumidifier;

    case "lock":
      switch (compareState) {
        case "unlocked":
-          return "hass:lock-open";
+          return mdiLockOpen;
        case "jammed":
-          return "hass:lock-alert";
+          return mdiLockAlert;
        case "locking":
        case "unlocking":
-          return "hass:lock-clock";
+          return mdiLockClock;
        default:
-          return "hass:lock";
+          return mdiLock;
      }

    case "media_player":
-      return compareState === "playing" ? "hass:cast-connected" : "hass:cast";
+      return compareState === "playing" ? mdiCastConnected : mdiCast;
+
+    case "switch":
+      switch (stateObj?.attributes.device_class) {
+        case "outlet":
+          return state === "on" ? mdiPowerPlug : mdiPowerPlugOff;
+        case "switch":
+          return state === "on" ? mdiToggleSwitch : mdiToggleSwitchOff;
+        default:
+          return mdiFlash;
+      }

    case "zwave":
      switch (compareState) {
        case "dead":
-          return "hass:emoticon-dead";
+          return mdiEmoticonDead;
        case "sleeping":
-          return "hass:sleep";
+          return mdiSleep;
        case "initializing":
-          return "hass:timer-sand";
+          return mdiTimerSand;
        default:
-          return "hass:z-wave";
+          return mdiZWave;
      }

    case "sensor": {
@@ -71,17 +131,17 @@ export const domainIcon = (

    case "input_datetime":
      if (!stateObj?.attributes.has_date) {
-        return "hass:clock";
+        return mdiClock;
      }
      if (!stateObj.attributes.has_time) {
-        return "hass:calendar";
+        return mdiCalendar;
      }
      break;

    case "sun":
      return stateObj?.state === "above_horizon"
        ? FIXED_DOMAIN_ICONS[domain]
-        : "hass:weather-night";
+        : mdiWeatherNight;
  }

  if (domain in FIXED_DOMAIN_ICONS) {
--- a/src/common/entity/sensor_icon.ts
+++ b/src/common/entity/sensor_icon.ts
@@ -1,8 +1,9 @@
 /** Return an icon representing a sensor state. */
+import { mdiBattery, mdiThermometer } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
-import { FIXED_DEVICE_CLASS_ICONS, UNIT_C, UNIT_F } from "../const";
-import { batteryIcon } from "./battery_icon";
 import { SENSOR_DEVICE_CLASS_BATTERY } from "../../data/sensor";
+import { FIXED_DEVICE_CLASS_ICONS, UNIT_C, UNIT_F } from "../const";
+import { batteryStateIcon } from "./battery_icon";

 export const sensorIcon = (stateObj?: HassEntity): string | undefined => {
  const dclass = stateObj?.attributes.device_class;
@@ -12,12 +13,12 @@ export const sensorIcon = (stateObj?: HassEntity): string | undefined => {
  }

  if (dclass === SENSOR_DEVICE_CLASS_BATTERY) {
-    return stateObj ? batteryIcon(stateObj) : "hass:battery";
+    return stateObj ? batteryStateIcon(stateObj) : mdiBattery;
  }

  const unit = stateObj?.attributes.unit_of_measurement;
  if (unit === UNIT_C || unit === UNIT_F) {
-    return "hass:thermometer";
+    return mdiThermometer;
  }

  return undefined;
--- a/src/common/entity/state_icon_path.ts
+++ b/src/common/entity/state_icon_path.ts
@@ -4,13 +4,9 @@ import { DEFAULT_DOMAIN_ICON } from "../const";
 import { computeDomain } from "./compute_domain";
 import { domainIcon } from "./domain_icon";

-export const stateIcon = (state?: HassEntity) => {
+export const stateIconPath = (state?: HassEntity) => {
  if (!state) {
    return DEFAULT_DOMAIN_ICON;
  }
-  if (state.attributes.icon) {
-    return state.attributes.icon;
-  }
-
  return domainIcon(computeDomain(state.entity_id), state);
 };
--- a/src/common/entity/strip_prefix_from_entity_name.ts
+++ b/src/common/entity/strip_prefix_from_entity_name.ts
@@ -0,0 +1,24 @@
+/**
+ * Strips a device name from an entity name.
+ * @param entityName the entity name
+ * @param lowerCasedPrefixWithSpaceSuffix the prefix to strip, lower cased with a space suffix
+ * @returns
+ */
+export const stripPrefixFromEntityName = (
+  entityName: string,
+  lowerCasedPrefixWithSpaceSuffix: string
+) => {
+  if (!entityName.toLowerCase().startsWith(lowerCasedPrefixWithSpaceSuffix)) {
+    return undefined;
+  }
+
+  const newName = entityName.substring(lowerCasedPrefixWithSpaceSuffix.length);
+
+  // If first word already has an upper case letter (e.g. from brand name)
+  // leave as-is, otherwise capitalize the first word.
+  return hasUpperCase(newName.substr(0, newName.indexOf(" ")))
+    ? newName
+    : newName[0].toUpperCase() + newName.slice(1);
+};
+
+const hasUpperCase = (str: string): boolean => str.toLowerCase() !== str;
--- a/src/common/number/format_number.ts
+++ b/src/common/number/format_number.ts
@@ -1,6 +1,15 @@
+import { HassEntity } from "home-assistant-js-websocket";
 import { FrontendLocaleData, NumberFormat } from "../../data/translation";
 import { round } from "./round";

+/**
+ * Returns true if the entity is considered numeric based on the attributes it has
+ * @param stateObj The entity state object
+ */
+export const isNumericState = (stateObj: HassEntity): boolean =>
+  !!stateObj.attributes.unit_of_measurement ||
+  !!stateObj.attributes.state_class;
+
 export const numberFormatToLocale = (
  localeOptions: FrontendLocaleData
 ): string | string[] | undefined => {
--- a/src/common/string/slugify.ts
+++ b/src/common/string/slugify.ts
@@ -12,8 +12,8 @@ export const slugify = (value: string, delimiter = "_") => {
    .replace(p, (c) => b.charAt(a.indexOf(c))) // Replace special characters
    .replace(/&/g, `${delimiter}and${delimiter}`) // Replace & with 'and'
    .replace(/[^\w-]+/g, "") // Remove all non-word characters
-    .replace(/-/, delimiter) // Replace - with delimiter
-    .replace(new RegExp(`/${delimiter}${delimiter}+/`, "g"), delimiter) // Replace multiple delimiters with single delimiter
-    .replace(new RegExp(`/^${delimiter}+/`), "") // Trim delimiter from start of text
-    .replace(new RegExp(`/-+$/`), ""); // Trim delimiter from end of text
+    .replace(/-/g, delimiter) // Replace - with delimiter
+    .replace(new RegExp(`(${delimiter})\\1+`, "g"), "$1") // Replace multiple delimiters with single delimiter
+    .replace(new RegExp(`^${delimiter}+`), "") // Trim delimiter from start of text
+    .replace(new RegExp(`${delimiter}+$`), ""); // Trim delimiter from end of text
 };
--- a/src/common/style/icon_color_css.ts
+++ b/src/common/style/icon_color_css.ts
@@ -1,57 +1,57 @@
 import { css } from "lit";

 export const iconColorCSS = css`
-  ha-icon[data-domain="alert"][data-state="on"],
-  ha-icon[data-domain="automation"][data-state="on"],
-  ha-icon[data-domain="binary_sensor"][data-state="on"],
-  ha-icon[data-domain="calendar"][data-state="on"],
-  ha-icon[data-domain="camera"][data-state="streaming"],
-  ha-icon[data-domain="cover"][data-state="open"],
-  ha-icon[data-domain="fan"][data-state="on"],
-  ha-icon[data-domain="humidifier"][data-state="on"],
-  ha-icon[data-domain="light"][data-state="on"],
-  ha-icon[data-domain="input_boolean"][data-state="on"],
-  ha-icon[data-domain="lock"][data-state="unlocked"],
-  ha-icon[data-domain="media_player"][data-state="on"],
-  ha-icon[data-domain="media_player"][data-state="paused"],
-  ha-icon[data-domain="media_player"][data-state="playing"],
-  ha-icon[data-domain="script"][data-state="on"],
-  ha-icon[data-domain="sun"][data-state="above_horizon"],
-  ha-icon[data-domain="switch"][data-state="on"],
-  ha-icon[data-domain="timer"][data-state="active"],
-  ha-icon[data-domain="vacuum"][data-state="cleaning"],
-  ha-icon[data-domain="group"][data-state="on"],
-  ha-icon[data-domain="group"][data-state="home"],
-  ha-icon[data-domain="group"][data-state="open"],
-  ha-icon[data-domain="group"][data-state="locked"],
-  ha-icon[data-domain="group"][data-state="problem"] {
+  ha-state-icon[data-domain="alert"][data-state="on"],
+  ha-state-icon[data-domain="automation"][data-state="on"],
+  ha-state-icon[data-domain="binary_sensor"][data-state="on"],
+  ha-state-icon[data-domain="calendar"][data-state="on"],
+  ha-state-icon[data-domain="camera"][data-state="streaming"],
+  ha-state-icon[data-domain="cover"][data-state="open"],
+  ha-state-icon[data-domain="fan"][data-state="on"],
+  ha-state-icon[data-domain="humidifier"][data-state="on"],
+  ha-state-icon[data-domain="light"][data-state="on"],
+  ha-state-icon[data-domain="input_boolean"][data-state="on"],
+  ha-state-icon[data-domain="lock"][data-state="unlocked"],
+  ha-state-icon[data-domain="media_player"][data-state="on"],
+  ha-state-icon[data-domain="media_player"][data-state="paused"],
+  ha-state-icon[data-domain="media_player"][data-state="playing"],
+  ha-state-icon[data-domain="script"][data-state="on"],
+  ha-state-icon[data-domain="sun"][data-state="above_horizon"],
+  ha-state-icon[data-domain="switch"][data-state="on"],
+  ha-state-icon[data-domain="timer"][data-state="active"],
+  ha-state-icon[data-domain="vacuum"][data-state="cleaning"],
+  ha-state-icon[data-domain="group"][data-state="on"],
+  ha-state-icon[data-domain="group"][data-state="home"],
+  ha-state-icon[data-domain="group"][data-state="open"],
+  ha-state-icon[data-domain="group"][data-state="locked"],
+  ha-state-icon[data-domain="group"][data-state="problem"] {
    color: var(--paper-item-icon-active-color, #fdd835);
  }

-  ha-icon[data-domain="climate"][data-state="cooling"] {
+  ha-state-icon[data-domain="climate"][data-state="cooling"] {
    color: var(--cool-color, var(--state-climate-cool-color));
  }

-  ha-icon[data-domain="climate"][data-state="heating"] {
+  ha-state-icon[data-domain="climate"][data-state="heating"] {
    color: var(--heat-color, var(--state-climate-heat-color));
  }

-  ha-icon[data-domain="climate"][data-state="drying"] {
+  ha-state-icon[data-domain="climate"][data-state="drying"] {
    color: var(--dry-color, var(--state-climate-dry-color));
  }

-  ha-icon[data-domain="alarm_control_panel"] {
+  ha-state-icon[data-domain="alarm_control_panel"] {
    color: var(--alarm-color-armed, var(--label-badge-red));
  }
-  ha-icon[data-domain="alarm_control_panel"][data-state="disarmed"] {
+  ha-state-icon[data-domain="alarm_control_panel"][data-state="disarmed"] {
    color: var(--alarm-color-disarmed, var(--label-badge-green));
  }
-  ha-icon[data-domain="alarm_control_panel"][data-state="pending"],
-  ha-icon[data-domain="alarm_control_panel"][data-state="arming"] {
+  ha-state-icon[data-domain="alarm_control_panel"][data-state="pending"],
+  ha-state-icon[data-domain="alarm_control_panel"][data-state="arming"] {
    color: var(--alarm-color-pending, var(--label-badge-yellow));
    animation: pulse 1s infinite;
  }
-  ha-icon[data-domain="alarm_control_panel"][data-state="triggered"] {
+  ha-state-icon[data-domain="alarm_control_panel"][data-state="triggered"] {
    color: var(--alarm-color-triggered, var(--label-badge-red));
    animation: pulse 1s infinite;
  }
@@ -68,13 +68,13 @@ export const iconColorCSS = css`
    }
  }

-  ha-icon[data-domain="plant"][data-state="problem"],
-  ha-icon[data-domain="zwave"][data-state="dead"] {
+  ha-state-icon[data-domain="plant"][data-state="problem"],
+  ha-state-icon[data-domain="zwave"][data-state="dead"] {
    color: var(--state-icon-error-color);
  }

  /* Color the icon if unavailable */
-  ha-icon[data-state="unavailable"] {
+  ha-state-icon[data-state="unavailable"] {
    color: var(--state-unavailable-color);
  }
 `;
--- a/src/common/translations/localize.ts
+++ b/src/common/translations/localize.ts
@@ -32,6 +32,7 @@ if (__BUILD__ === "latest") {
  }
  if (shouldPolyfillDateTime()) {
    polyfills.push(import("@formatjs/intl-datetimeformat/polyfill"));
+    polyfills.push(import("@formatjs/intl-datetimeformat/add-all-tz"));
  }
 }

--- a/src/components/chart/ha-chart-base.ts
+++ b/src/components/chart/ha-chart-base.ts
@@ -95,7 +95,7 @@ export default class HaChartBase extends LitElement {
                      borderColor: dataset.borderColor as string,
                    })}
                  ></div>
-                  ${dataset.label}
+                  <div class="label">${dataset.label}</div>
                </li>`
              )}
            </ul>
@@ -278,11 +278,9 @@ export default class HaChartBase extends LitElement {
      }
      .chartLegend li {
        cursor: pointer;
-        display: inline-flex;
+        display: inline-grid;
+        grid-auto-flow: column;
        padding: 0 8px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
        box-sizing: border-box;
        align-items: center;
        color: var(--secondary-text-color);
@@ -290,6 +288,11 @@ export default class HaChartBase extends LitElement {
      .chartLegend .hidden {
        text-decoration: line-through;
      }
+      .chartLegend .label {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
      .chartLegend .bullet,
      .chartTooltip .bullet {
        border-width: 1px;
--- a/src/components/chart/state-history-chart-line.ts
+++ b/src/components/chart/state-history-chart-line.ts
@@ -1,7 +1,7 @@
 import type { ChartData, ChartDataset, ChartOptions } from "chart.js";
 import { html, LitElement, PropertyValues } from "lit";
 import { property, state } from "lit/decorators";
-import { getColorByIndex } from "../../common/color/colors";
+import { getGraphColorByIndex } from "../../common/color/colors";
 import {
  formatNumber,
  numberFormatToLocale,
@@ -164,7 +164,7 @@ class StateHistoryChartLine extends LitElement {
      const pushData = (timestamp: Date, datavalues: any[] | null) => {
        if (!datavalues) return;
        if (timestamp > endTime) {
-          // Drop datapoints that are after the requested endTime. This could happen if
+          // Drop data points that are after the requested endTime. This could happen if
          // endTime is "now" and client time is not in sync with server time.
          return;
        }
@@ -190,7 +190,7 @@ class StateHistoryChartLine extends LitElement {
        color?: string
      ) => {
        if (!color) {
-          color = getColorByIndex(colorIndex);
+          color = getGraphColorByIndex(colorIndex, computedStyles);
          colorIndex++;
        }
        data.push({
--- a/src/components/chart/state-history-chart-timeline.ts
+++ b/src/components/chart/state-history-chart-timeline.ts
@@ -2,7 +2,7 @@ import type { ChartData, ChartDataset, ChartOptions } from "chart.js";
 import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { getColorByIndex } from "../../common/color/colors";
+import { getGraphColorByIndex } from "../../common/color/colors";
 import { formatDateTimeWithSeconds } from "../../common/datetime/format_date_time";
 import { computeDomain } from "../../common/entity/compute_domain";
 import { numberFormatToLocale } from "../../common/number/format_number";
@@ -24,7 +24,7 @@ const BINARY_SENSOR_DEVICE_CLASS_COLOR_NOT_INVERTED = new Set([
  "plug",
  "power",
  "presence",
-  "update",
+  "running",
 ]);

 const STATIC_STATE_COLORS = new Set([
@@ -71,7 +71,7 @@ const getColor = (
    stateColorMap.set(stateString, color);
    return color;
  }
-  const color = getColorByIndex(colorIndex);
+  const color = getGraphColorByIndex(colorIndex, computedStyles);
  colorIndex++;
  stateColorMap.set(stateString, color);
  return color;
--- a/src/components/chart/statistics-chart.ts
+++ b/src/components/chart/statistics-chart.ts
@@ -13,7 +13,7 @@ import {
  TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { getColorByIndex } from "../../common/color/colors";
+import { getGraphColorByIndex } from "../../common/color/colors";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import {
@@ -59,6 +59,8 @@ class StatisticsChart extends LitElement {

  @state() private _chartOptions?: ChartOptions;

+  private _computedStyle?: CSSStyleDeclaration;
+
  protected shouldUpdate(changedProps: PropertyValues): boolean {
    return changedProps.size > 1 || !changedProps.has("hass");
  }
@@ -72,6 +74,10 @@ class StatisticsChart extends LitElement {
    }
  }

+  public firstUpdated() {
+    this._computedStyle = getComputedStyle(this);
+  }
+
  protected render(): TemplateResult {
    if (!isComponentLoaded(this.hass, "history")) {
      return html`<div class="info">
@@ -261,7 +267,7 @@ class StatisticsChart extends LitElement {
      ) => {
        if (!dataValues) return;
        if (timestamp > endTime) {
-          // Drop datapoints that are after the requested endTime. This could happen if
+          // Drop data points that are after the requested endTime. This could happen if
          // endTime is "now" and client time is not in sync with server time.
          return;
        }
@@ -280,7 +286,7 @@ class StatisticsChart extends LitElement {
        prevValues = dataValues;
      };

-      const color = getColorByIndex(colorIndex);
+      const color = getGraphColorByIndex(colorIndex, this._computedStyle!);
      colorIndex++;

      const statTypes: this["statTypes"] = [];
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -70,7 +70,7 @@ export interface DataTableSortColumnData {

 export interface DataTableColumnData extends DataTableSortColumnData {
  title: TemplateResult | string;
-  type?: "numeric" | "icon" | "icon-button";
+  type?: "numeric" | "icon" | "icon-button" | "overflow-menu";
  template?: <T>(data: any, row: T) => TemplateResult | string;
  width?: string;
  maxWidth?: string;
@@ -281,15 +281,13 @@ export class HaDataTable extends LitElement {
              }
              const sorted = key === this._sortColumn;
              const classes = {
-                "mdc-data-table__header-cell--numeric": Boolean(
-                  column.type === "numeric"
-                ),
-                "mdc-data-table__header-cell--icon": Boolean(
-                  column.type === "icon"
-                ),
-                "mdc-data-table__header-cell--icon-button": Boolean(
-                  column.type === "icon-button"
-                ),
+                "mdc-data-table__header-cell--numeric":
+                  column.type === "numeric",
+                "mdc-data-table__header-cell--icon": column.type === "icon",
+                "mdc-data-table__header-cell--icon-button":
+                  column.type === "icon-button",
+                "mdc-data-table__header-cell--overflow-menu":
+                  column.type === "overflow-menu",
                sortable: Boolean(column.sortable),
                "not-sorted": Boolean(column.sortable && !sorted),
                grows: Boolean(column.grows),
@@ -405,14 +403,14 @@ export class HaDataTable extends LitElement {
                                <div
                                  role="cell"
                                  class="mdc-data-table__cell ${classMap({
-                                    "mdc-data-table__cell--numeric": Boolean(
-                                      column.type === "numeric"
-                                    ),
-                                    "mdc-data-table__cell--icon": Boolean(
-                                      column.type === "icon"
-                                    ),
+                                    "mdc-data-table__cell--numeric":
+                                      column.type === "numeric",
+                                    "mdc-data-table__cell--icon":
+                                      column.type === "icon",
                                    "mdc-data-table__cell--icon-button":
-                                      Boolean(column.type === "icon-button"),
+                                      column.type === "icon-button",
+                                    "mdc-data-table__cell--overflow-menu":
+                                      column.type === "overflow-menu",
                                    grows: Boolean(column.grows),
                                    forceLTR: Boolean(column.forceLTR),
                                  })}"
@@ -680,7 +678,7 @@ export class HaDataTable extends LitElement {
          padding-left: 16px;
          /* @noflip */
          padding-right: 0;
-          width: 56px;
+          width: 60px;
        }
        :host([dir="rtl"]) .mdc-data-table__header-cell--checkbox,
        :host([dir="rtl"]) .mdc-data-table__cell--checkbox {
@@ -747,10 +745,16 @@ export class HaDataTable extends LitElement {
          text-align: right;
        }

-        .mdc-data-table__cell--icon:first-child ha-icon {
+        .mdc-data-table__cell--icon:first-child ha-icon,
+        .mdc-data-table__cell--icon:first-child ha-state-icon,
+        .mdc-data-table__cell--icon:first-child ha-svg-icon {
          margin-left: 8px;
        }
-        :host([dir="rtl"]) .mdc-data-table__cell--icon:first-child ha-icon {
+        :host([dir="rtl"]) .mdc-data-table__cell--icon:first-child ha-icon,
+        :host([dir="rtl"])
+          .mdc-data-table__cell--icon:first-child
+          ha-state-icon,
+        :host([dir="rtl"]) .mdc-data-table__cell--icon:first-child ha-svg-icon {
          margin-left: auto;
          margin-right: 8px;
        }
@@ -763,40 +767,65 @@ export class HaDataTable extends LitElement {
          margin-left: -8px;
        }

+        .mdc-data-table__cell--overflow-menu,
+        .mdc-data-table__header-cell--overflow-menu,
        .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;
+        }
+
+        .mdc-data-table__cell--overflow-menu,
        .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__cell--icon-button:first-child,
        .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--overflow-menu:first-child,
+        .mdc-data-table__header-cell--overflow-menu:first-child,
+        .mdc-data-table__header-cell--icon-button:first-child,
+        .mdc-data-table__cell--icon-button:first-child {
+          padding-left: 16px;
+        }
+        :host([dir="rtl"])
+          .mdc-data-table__header-cell--overflow-menu:first-child,
+        :host([dir="rtl"]) .mdc-data-table__cell--overflow-menu:first-child,
+        :host([dir="rtl"])
+          .mdc-data-table__header-cell--overflow-menu:first-child,
+        :host([dir="rtl"]) .mdc-data-table__cell--overflow-menu:first-child {
+          padding-left: 8px;
+          padding-right: 16px;
+        }
+
+        .mdc-data-table__cell--overflow-menu:last-child,
+        .mdc-data-table__header-cell--overflow-menu:last-child,
+        .mdc-data-table__header-cell--icon-button:last-child,
+        .mdc-data-table__cell--icon-button:last-child {
+          padding-right: 16px;
+        }
+        :host([dir="rtl"])
+          .mdc-data-table__header-cell--overflow-menu:last-child,
+        :host([dir="rtl"]) .mdc-data-table__cell--overflow-menu:last-child,
+        :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: 8px;
+          padding-left: 16px;
+        }
+        .mdc-data-table__cell--overflow-menu,
+        .mdc-data-table__header-cell--overflow-menu {
+          overflow: initial;
+        }
        .mdc-data-table__cell--icon-button a {
          color: var(--secondary-text-color);
        }
--- a/src/components/dialog/ha-iron-focusables-helper.js
+++ b/src/components/dialog/ha-iron-focusables-helper.js
@@ -1,89 +0,0 @@
-/**
-@license
-Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at
-http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
-http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
-found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
-part of the polymer project is also subject to an additional IP rights grant
-found at http://polymer.github.io/PATENTS.txt
-*/
-/*
-  Fixes issue with not using shadow dom properly in iron-overlay-behavior/icon-focusables-helper.js
-*/
-import { IronFocusablesHelper } from "@polymer/iron-overlay-behavior/iron-focusables-helper";
-import { dom } from "@polymer/polymer/lib/legacy/polymer.dom";
-
-export const HaIronFocusablesHelper = {
-  /**
-   * Returns a sorted array of tabbable nodes, including the root node.
-   * It searches the tabbable nodes in the light and shadow dom of the chidren,
-   * sorting the result by tabindex.
-   * @param {!Node} node
-   * @return {!Array<!HTMLElement>}
-   */
-  getTabbableNodes: function (node) {
-    const result = [];
-    // If there is at least one element with tabindex > 0, we need to sort
-    // the final array by tabindex.
-    const needsSortByTabIndex = this._collectTabbableNodes(node, result);
-    if (needsSortByTabIndex) {
-      return IronFocusablesHelper._sortByTabIndex(result);
-    }
-    return result;
-  },
-
-  /**
-   * Searches for nodes that are tabbable and adds them to the `result` array.
-   * Returns if the `result` array needs to be sorted by tabindex.
-   * @param {!Node} node The starting point for the search; added to `result`
-   * if tabbable.
-   * @param {!Array<!HTMLElement>} result
-   * @return {boolean}
-   * @private
-   */
-  _collectTabbableNodes: function (node, result) {
-    // If not an element or not visible, no need to explore children.
-    if (
-      node.nodeType !== Node.ELEMENT_NODE ||
-      !IronFocusablesHelper._isVisible(node)
-    ) {
-      return false;
-    }
-    const element = /** @type {!HTMLElement} */ (node);
-    const tabIndex = IronFocusablesHelper._normalizedTabIndex(element);
-    let needsSort = tabIndex > 0;
-    if (tabIndex >= 0) {
-      result.push(element);
-    }
-
-    // In ShadowDOM v1, tab order is affected by the order of distrubution.
-    // E.g. getTabbableNodes(#root) in ShadowDOM v1 should return [#A, #B];
-    // in ShadowDOM v0 tab order is not affected by the distrubution order,
-    // in fact getTabbableNodes(#root) returns [#B, #A].
-    //  <div id="root">
-    //   <!-- shadow -->
-    //     <slot name="a">
-    //     <slot name="b">
-    //   <!-- /shadow -->
-    //   <input id="A" slot="a">
-    //   <input id="B" slot="b" tabindex="1">
-    //  </div>
-    // TODO(valdrin) support ShadowDOM v1 when upgrading to Polymer v2.0.
-    let children;
-    if (element.localName === "content" || element.localName === "slot") {
-      children = dom(element).getDistributedNodes();
-    } else {
-      // /////////////////////////
-      // Use shadow root if possible, will check for distributed nodes.
-      // THIS IS THE CHANGED LINE
-      children = dom(element.shadowRoot || element.root || element).children;
-      // /////////////////////////
-    }
-    for (let i = 0; i < children.length; i++) {
-      // Ensure method is always invoked to collect tabbable children.
-      needsSort = this._collectTabbableNodes(children[i], result) || needsSort;
-    }
-    return needsSort;
-  },
-};
--- a/src/components/dialog/ha-paper-dialog.ts
+++ b/src/components/dialog/ha-paper-dialog.ts
@@ -1,31 +0,0 @@
-import "@polymer/paper-dialog/paper-dialog";
-import type { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
-import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
-import type { Constructor } from "../../types";
-import { HaIronFocusablesHelper } from "./ha-iron-focusables-helper";
-
-const paperDialogClass = customElements.get(
-  "paper-dialog"
-) as Constructor<PaperDialogElement>;
-
-// behavior that will override existing iron-overlay-behavior and call the fixed implementation
-const haTabFixBehaviorImpl = {
-  get _focusableNodes() {
-    return HaIronFocusablesHelper.getTabbableNodes(this);
-  },
-};
-
-// paper-dialog that uses the haTabFixBehaviorImpl behavior
-// export class HaPaperDialog extends paperDialogClass {}
-// @ts-ignore
-export class HaPaperDialog
-  extends mixinBehaviors([haTabFixBehaviorImpl], paperDialogClass)
-  implements PaperDialogElement {}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-paper-dialog": HaPaperDialog;
-  }
-}
-// @ts-ignore
-customElements.define("ha-paper-dialog", HaPaperDialog);
--- a/src/components/entity/ha-battery-icon.ts
+++ b/src/components/entity/ha-battery-icon.ts
@@ -1,7 +1,7 @@
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { batteryIcon } from "../../common/entity/battery_icon";
-import "../ha-icon";
+import { batteryStateIcon } from "../../common/entity/battery_icon";
+import "../ha-svg-icon";

@customElement("ha-battery-icon")
 export class HaBatteryIcon extends LitElement {
@@ -11,9 +11,18 @@ export class HaBatteryIcon extends LitElement {

  protected render() {
    return html`
-      <ha-icon
-        .icon=${batteryIcon(this.batteryStateObj, this.batteryChargingStateObj)}
-      ></ha-icon>
+      <ha-svg-icon
+        .path=${batteryStateIcon(
+          this.batteryStateObj,
+          this.batteryChargingStateObj
+        )}
+      ></ha-svg-icon>
    `;
  }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-battery-icon": HaBatteryIcon;
+  }
+}
--- a/src/components/entity/ha-state-label-badge.ts
+++ b/src/components/entity/ha-state-label-badge.ts
@@ -14,19 +14,21 @@ 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 { stateIcon } from "../../common/entity/state_icon";
-import { formatNumber } from "../../common/number/format_number";
+import {
+  formatNumber,
+  isNumericState,
+} from "../../common/number/format_number";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { timerTimeRemaining } from "../../data/timer";
 import { HomeAssistant } from "../../types";
 import "../ha-label-badge";
-import "../ha-icon";
+import "../ha-state-icon";

@customElement("ha-state-label-badge")
 export class HaStateLabelBadge extends LitElement {
  @property({ attribute: false }) public hass?: HomeAssistant;

-  @property() public state?: HassEntity;
+  @property({ attribute: false }) public state?: HassEntity;

  @property() public name?: string;

@@ -76,7 +78,8 @@ export class HaStateLabelBadge extends LitElement {
    // 4. Icon determined via entity state
    // 5. Value string as fallback
    const domain = computeStateDomain(entityState);
-    const icon = this.icon ? this.icon : this._computeIcon(domain, entityState);
+
+    const showIcon = this.icon || this._computeShowIcon(domain, entityState);
    const image = this.icon
      ? ""
      : this.image
@@ -84,7 +87,7 @@ export class HaStateLabelBadge extends LitElement {
      : entityState.attributes.entity_picture_local ||
        entityState.attributes.entity_picture;
    const value =
-      !image && !icon ? this._computeValue(domain, entityState) : undefined;
+      !image && !showIcon ? this._computeValue(domain, entityState) : undefined;

    return html`
      <ha-label-badge
@@ -101,8 +104,13 @@ export class HaStateLabelBadge extends LitElement {
        )}
        .description=${this.name ?? computeStateName(entityState)}
      >
-        ${!image && icon ? html`<ha-icon .icon=${icon}></ha-icon>` : ""}
-        ${value && !icon && !image
+        ${!image && showIcon
+          ? html`<ha-state-icon
+              .icon=${this.icon}
+              .state=${entityState}
+            ></ha-state-icon>`
+          : ""}
+        ${value && !image && !showIcon
          ? html`<span class=${value && value.length > 4 ? "big" : ""}
              >${value}</span
            >`
@@ -140,7 +148,7 @@ export class HaStateLabelBadge extends LitElement {
        return entityState.state === UNKNOWN ||
          entityState.state === UNAVAILABLE
          ? "-"
-          : entityState.attributes.unit_of_measurement
+          : isNumericState(entityState)
          ? formatNumber(entityState.state, this.hass!.locale)
          : computeStateDisplay(
              this.hass!.localize,
@@ -150,9 +158,9 @@ export class HaStateLabelBadge extends LitElement {
    }
  }

-  private _computeIcon(domain: string, entityState: HassEntity) {
+  private _computeShowIcon(domain: string, entityState: HassEntity): boolean {
    if (entityState.state === UNAVAILABLE) {
-      return null;
+      return false;
    }
    switch (domain) {
      case "alarm_control_panel":
@@ -162,17 +170,13 @@ export class HaStateLabelBadge extends LitElement {
      case "person":
      case "scene":
      case "sun":
-        return stateIcon(entityState);
+        return true;
      case "timer":
-        return entityState.state === "active"
-          ? "hass:timer-outline"
-          : "hass:timer-off-outline";
+        return true;
      case "sensor":
-        return entityState.attributes.device_class === "moon__phase"
-          ? stateIcon(entityState)
-          : null;
+        return entityState.attributes.device_class === "moon__phase";
      default:
-        return null;
+        return false;
    }
  }

--- a/src/components/entity/ha-statistic-picker.ts
+++ b/src/components/entity/ha-statistic-picker.ts
@@ -102,7 +102,12 @@ export class HaStatisticPicker extends LitElement {
    </style>
    <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
    <paper-icon-item>
-      <state-badge slot="item-icon" .stateObj=${item.state}></state-badge>
+      ${item.state
+        ? html`<state-badge
+            slot="item-icon"
+            .stateObj=${item.state}
+          ></state-badge>`
+        : ""}
      <paper-item-body two-line="">
        ${item.name}
        <span secondary
@@ -153,7 +158,10 @@ export class HaStatisticPicker extends LitElement {
        const entityState = this.hass.states[meta.statistic_id];
        if (!entityState) {
          if (!entitiesOnly) {
-            output.push({ id: meta.statistic_id, name: meta.statistic_id });
+            output.push({
+              id: meta.statistic_id,
+              name: meta.name || meta.statistic_id,
+            });
          }
          return;
        }
--- a/src/components/entity/state-badge.ts
+++ b/src/components/entity/state-badge.ts
@@ -1,3 +1,4 @@
+import { mdiAlert } from "@mdi/js";
 import type { HassEntity } from "home-assistant-js-websocket";
 import {
  css,
@@ -12,10 +13,9 @@ 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";
 import { iconColorCSS } from "../../common/style/icon_color_css";
 import type { HomeAssistant } from "../../types";
-import "../ha-icon";
+import "../ha-state-icon";

 export class StateBadge extends LitElement {
  public hass?: HomeAssistant;
@@ -39,7 +39,7 @@ export class StateBadge extends LitElement {
    // We either need a `stateObj` or one override
    if (!stateObj && !this.overrideIcon && !this.overrideImage) {
      return html`<div class="missing">
-        <ha-icon icon="hass:alert"></ha-icon>
+        <ha-svg-icon .path=${mdiAlert}></ha-svg-icon>
      </div>`;
    }

@@ -49,18 +49,17 @@ export class StateBadge extends LitElement {

    const domain = stateObj ? computeStateDomain(stateObj) : undefined;

-    return html`
-      <ha-icon
-        style=${styleMap(this._iconStyle)}
-        data-domain=${ifDefined(
-          this.stateColor || (domain === "light" && this.stateColor !== false)
-            ? domain
-            : undefined
-        )}
-        data-state=${stateObj ? computeActiveState(stateObj) : ""}
-        .icon=${this.overrideIcon || (stateObj ? stateIcon(stateObj) : "")}
-      ></ha-icon>
-    `;
+    return html`<ha-state-icon
+      style=${styleMap(this._iconStyle)}
+      data-domain=${ifDefined(
+        this.stateColor || (domain === "light" && this.stateColor !== false)
+          ? domain
+          : undefined
+      )}
+      data-state=${stateObj ? computeActiveState(stateObj) : ""}
+      .icon=${this.overrideIcon}
+      .state=${stateObj}
+    ></ha-state-icon>`;
  }

  public willUpdate(changedProps: PropertyValues) {
@@ -81,16 +80,14 @@ export class StateBadge extends LitElement {

    this._showIcon = true;

-    if (stateObj) {
+    if (stateObj && this.overrideImage === undefined) {
      // hide icon if we have entity picture
      if (
-        ((stateObj.attributes.entity_picture_local ||
+        (stateObj.attributes.entity_picture_local ||
          stateObj.attributes.entity_picture) &&
-          !this.overrideIcon) ||
-        this.overrideImage
+        !this.overrideIcon
      ) {
        let imageUrl =
-          this.overrideImage ||
          stateObj.attributes.entity_picture_local ||
          stateObj.attributes.entity_picture;
        if (this.hass) {
@@ -154,7 +151,7 @@ export class StateBadge extends LitElement {
        :host([icon]:focus) {
          background: var(--divider-color);
        }
-        ha-icon {
+        ha-state-icon {
          transition: color 0.3s ease-in-out, filter 0.3s ease-in-out;
        }
        .missing {
--- a/src/components/ha-alert.ts
+++ b/src/components/ha-alert.ts
@@ -1,4 +1,3 @@
-import "@material/mwc-button/mwc-button";
 import {
  mdiAlertCircleOutline,
  mdiAlertOutline,
@@ -23,7 +22,6 @@ const ALERT_ICONS = {
 declare global {
  interface HASSDomEvents {
    "alert-dismissed-clicked": undefined;
-    "alert-action-clicked": undefined;
  }
 }

@@ -37,8 +35,6 @@ class HaAlert extends LitElement {
    | "error"
    | "success" = "info";

-  @property({ attribute: "action-text" }) public actionText = "";
-
  @property({ type: Boolean }) public dismissable = false;

  @property({ type: Boolean }) public rtl = false;
@@ -50,9 +46,12 @@ class HaAlert extends LitElement {
          rtl: this.rtl,
          [this.alertType]: true,
        })}"
+        role="alert"
      >
        <div class="icon ${this.title ? "" : "no-title"}">
-          <ha-svg-icon .path=${ALERT_ICONS[this.alertType]}></ha-svg-icon>
+          <slot name="icon">
+            <ha-svg-icon .path=${ALERT_ICONS[this.alertType]}></ha-svg-icon>
+          </slot>
        </div>
        <div class="content">
          <div class="main-content">
@@ -60,18 +59,15 @@ class HaAlert extends LitElement {
            <slot></slot>
          </div>
          <div class="action">
-            ${this.actionText
-              ? html`<mwc-button
-                  @click=${this._action_clicked}
-                  .label=${this.actionText}
-                ></mwc-button>`
-              : this.dismissable
-              ? html`<ha-icon-button
-                  @click=${this._dismiss_clicked}
-                  label="Dismiss alert"
-                  .path=${mdiClose}
-                ></ha-icon-button>`
-              : ""}
+            <slot name="action">
+              ${this.dismissable
+                ? html`<ha-icon-button
+                    @click=${this._dismiss_clicked}
+                    label="Dismiss alert"
+                    .path=${mdiClose}
+                  ></ha-icon-button>`
+                : ""}
+            </slot>
          </div>
        </div>
      </div>
@@ -82,10 +78,6 @@ class HaAlert extends LitElement {
    fireEvent(this, "alert-dismissed-clicked");
  }

-  private _action_clicked() {
-    fireEvent(this, "alert-action-clicked");
-  }
-
  static styles = css`
    .issue-type {
      position: relative;
@@ -96,7 +88,7 @@ class HaAlert extends LitElement {
    .issue-type.rtl {
      flex-direction: row-reverse;
    }
-    .issue-type::before {
+    .issue-type::after {
      position: absolute;
      top: 0;
      right: 0;
@@ -108,17 +100,11 @@ class HaAlert extends LitElement {
      border-radius: 4px;
    }
    .icon {
-      margin-right: 8px;
-      width: 24px;
+      z-index: 1;
    }
    .icon.no-title {
      align-self: center;
    }
-    .issue-type.rtl > .icon {
-      margin-right: 0px;
-      margin-left: 8px;
-      width: 24px;
-    }
    .issue-type.rtl > .content {
      flex-direction: row-reverse;
      text-align: right;
@@ -129,44 +115,55 @@ class HaAlert extends LitElement {
      align-items: center;
      width: 100%;
    }
+    .action {
+      z-index: 1;
+      width: min-content;
+      --mdc-theme-primary: var(--primary-text-color);
+    }
    .main-content {
      overflow-wrap: anywhere;
+      word-break: break-word;
+      margin-left: 8px;
+      margin-right: 0;
+    }
+    .issue-type.rtl > .content > .main-content {
+      margin-left: 0;
+      margin-right: 8px;
    }
    .title {
      margin-top: 2px;
      font-weight: bold;
    }
-    mwc-button {
+    .action mwc-button,
+    .action ha-icon-button {
      --mdc-theme-primary: var(--primary-text-color);
-    }
-    ha-icon-button {
      --mdc-icon-button-size: 36px;
    }
    .issue-type.info > .icon {
      color: var(--info-color);
    }
-    .issue-type.info::before {
+    .issue-type.info::after {
      background-color: var(--info-color);
    }

    .issue-type.warning > .icon {
      color: var(--warning-color);
    }
-    .issue-type.warning::before {
+    .issue-type.warning::after {
      background-color: var(--warning-color);
    }

    .issue-type.error > .icon {
      color: var(--error-color);
    }
-    .issue-type.error::before {
+    .issue-type.error::after {
      background-color: var(--error-color);
    }

    .issue-type.success > .icon {
      color: var(--success-color);
    }
-    .issue-type.success::before {
+    .issue-type.success::after {
      background-color: var(--success-color);
    }
  `;
--- a/src/components/ha-area-picker.ts
+++ b/src/components/ha-area-picker.ts
@@ -172,6 +172,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
          {
            area_id: "",
            name: this.hass.localize("ui.components.area-picker.no_areas"),
+            picture: null,
          },
        ];
      }
@@ -295,6 +296,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
          {
            area_id: "",
            name: this.hass.localize("ui.components.area-picker.no_match"),
+            picture: null,
          },
        ];
      }
@@ -306,6 +308,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
            {
              area_id: "add_new",
              name: this.hass.localize("ui.components.area-picker.add_new"),
+              picture: null,
            },
          ];
    }
@@ -340,7 +343,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
        item-value-path="area_id"
        item-id-path="area_id"
        item-label-path="name"
-        .value=${this._value}
+        .value=${this.value}
        .disabled=${this.disabled}
        ${comboBoxRenderer(rowRenderer)}
        @opened-changed=${this._openedChanged}
@@ -431,12 +434,24 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
            name,
          });
          this._areas = [...this._areas!, area];
+          (this.comboBox as any).items = this._getAreas(
+            this._areas!,
+            this._devices!,
+            this._entities!,
+            this.includeDomains,
+            this.excludeDomains,
+            this.includeDeviceClasses,
+            this.deviceFilter,
+            this.entityFilter,
+            this.noAdd
+          );
          this._setValue(area.area_id);
        } catch (err: any) {
          showAlertDialog(this, {
-            text: this.hass.localize(
+            title: this.hass.localize(
              "ui.components.area-picker.add_dialog.failed_create_area"
            ),
+            text: err.message,
          });
        }
      },
--- a/src/components/ha-blueprint-picker.ts
+++ b/src/components/ha-blueprint-picker.ts
@@ -23,6 +23,10 @@ class HaBluePrintPicker extends LitElement {

  @property({ type: Boolean }) public disabled = false;

+  public open() {
+    this.shadowRoot!.querySelector("paper-dropdown-menu-light")!.open();
+  }
+
  private _processedBlueprints = memoizeOne((blueprints?: Blueprints) => {
    if (!blueprints) {
      return [];
--- a/src/components/ha-button-related-filter-menu.ts
+++ b/src/components/ha-button-related-filter-menu.ts
@@ -56,6 +56,7 @@ export class HaRelatedFilterButtonMenu extends LitElement {
    return html`
      <ha-icon-button
        @click=${this._handleClick}
+        .label=${this.hass.localize("ui.components.related-filter-menu.filter")}
        .path=${mdiFilterVariant}
      ></ha-icon-button>
      <mwc-menu-surface
--- a/src/components/ha-camera-stream.ts
+++ b/src/components/ha-camera-stream.ts
@@ -86,7 +86,7 @@ class HaCameraStream extends LitElement {
    }
    if (this.stateObj.attributes.frontend_stream_type === STREAM_TYPE_HLS) {
      return this._url
-        ? html` <ha-hls-player
+        ? html`<ha-hls-player
            autoplay
            playsinline
            .allowExoPlayer=${this.allowExoPlayer}
@@ -98,7 +98,7 @@ class HaCameraStream extends LitElement {
        : html``;
    }
    if (this.stateObj.attributes.frontend_stream_type === STREAM_TYPE_WEB_RTC) {
-      return html` <ha-web-rtc-player
+      return html`<ha-web-rtc-player
        autoplay
        playsinline
        .muted=${this.muted}
@@ -115,23 +115,18 @@ class HaCameraStream extends LitElement {
      // Fallback when unable to fetch stream url
      return true;
    }
-    if (
-      !isComponentLoaded(this.hass!, "stream") ||
-      !supportsFeature(this.stateObj!, CAMERA_SUPPORT_STREAM)
-    ) {
+    if (!supportsFeature(this.stateObj!, CAMERA_SUPPORT_STREAM)) {
      // Steaming is not supported by the camera so fallback to MJPEG stream
      return true;
    }
    if (
-      this.stateObj!.attributes.frontend_stream_type === STREAM_TYPE_WEB_RTC &&
-      typeof RTCPeerConnection === "undefined"
+      this.stateObj!.attributes.frontend_stream_type === STREAM_TYPE_WEB_RTC
    ) {
-      // Stream requires WebRTC but browser does not support, so fallback to
-      // MJPEG stream.
-      return true;
+      // Browser support required for WebRTC
+      return typeof RTCPeerConnection === "undefined";
    }
-    // Render stream
-    return false;
+    // Server side stream component required for HLS
+    return !isComponentLoaded(this.hass!, "stream");
  }

  private async _getStreamUrl(): Promise<void> {
--- a/Show More
+++ b/Show More