Move icon slot and adjust styles

adjust
Add background to ha-svg-icon
2026-04-25 20:12:48 +00:00 · 2021-11-21 10:23:16 +00:00 · 2021-11-18 21:04:16 +00:00 · 2021-11-18 18:39:17 +00:00 · 2021-11-18 18:57:15 +01:00 · 2021-11-17 10:54:08 -08:00
207 changed files with 17969 additions and 5849 deletions
--- 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/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));
@@ -141,7 +143,15 @@ gulp.task("gen-icons-json", (done) => {

  fs.writeFileSync(
    path.resolve(OUTPUT_DIR, "iconList.json"),
-    JSON.stringify(orderMeta(meta).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/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
@@ -40,9 +40,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 +68,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 +109,7 @@ export class HcMain extends HassElement {
        this._sendStatus();
      }
    });
+    this.addEventListener("dialog-closed", this._dialogClosed);
  }

  private _sendStatus(senderId?: string) {
@@ -118,7 +121,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 +134,10 @@ export class HcMain extends HassElement {
    }
  }

+  private _dialogClosed = () => {
+    document.body.setAttribute("style", "overflow-y: auto !important");
+  };
+
  private async _handleGetStatusMessage(msg: GetStatusMessage) {
    this._sendStatus(msg.senderId!);
  }
@@ -168,6 +175,7 @@ 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) {
@@ -178,14 +186,16 @@ export class HcMain extends HassElement {
    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 +204,12 @@ export class HcMain extends HassElement {
          this._handleNewLovelaceConfig(lovelaceConfig)
        );
      } catch (err: any) {
-        // eslint-disable-next-line
-        console.log("Error fetching Lovelace configuration", err, msg);
+        if (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}`;
+          return;
+        }
        // Generate a Lovelace config.
        this._unsubLovelace = () => undefined;
        await this._generateLovelaceConfig();
@@ -210,8 +224,6 @@ export class HcMain extends HassElement {
        loadLovelaceResources(resources, this.hass!.auth.data.hassUrl);
      }
    }
-    this._showDemo = false;
-    this._lovelacePath = msg.viewPath;

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

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

--- a/demo/src/html/index.html.template
+++ b/demo/src/html/index.html.template
@@ -63,6 +63,16 @@
    />
    <title>Home Assistant Demo</title>
    <style>
+      html {
+        background-color: var(--primary-background-color, #fafafa);
+        color: var(--primary-text-color, #212121);
+      }
+      @media (prefers-color-scheme: dark) {
+        html {
+          background-color: var(--primary-background-color, #111111);
+          color: var(--primary-text-color, #e1e1e1);
+        }
+      }
      body {
        font-family: Roboto, Noto, sans-serif;
        -moz-osx-font-smoothing: grayscale;
@@ -72,17 +82,46 @@
        margin: 0;
        padding: 0;
      }
-      #ha-init-skeleton::before {
-        display: block;
-        content: "";
-        height: 64px;
-        background-color: #03a9f4;
+      #ha-launch-screen {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      #ha-launch-screen svg {
+        width: 170px;
+        flex-shrink: 0;
+      }
+      #ha-launch-screen .ha-launch-screen-spacer {
+        flex: 1;
      }
    </style>
  </head>
  <body>
-    <div id="ha-init-skeleton"></div>
+    <div id="ha-launch-screen">
+      <div class="ha-launch-screen-spacer"></div>
+      <svg version="1.1" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <defs>
+          <path id="a" d="m44.041 343.22v-133.64h-34.753a9.333 9.333 0 0 1-6.655-15.876l187.01-190.21c4.517-4.594 11.903-4.657 16.498-0.14l0.12 0.12 97.601 98.794v-18.297a7.778 7.778 0 0 1 7.778-7.778h32.41a7.778 7.778 0 0 1 7.779 7.778v67.138l41.568 42.618a9.333 9.333 0 0 1-6.682 15.85h-34.886v133.64a7.778 7.778 0 0 1-7.778 7.778h-292.23a7.778 7.778 0 0 1-7.778-7.778zm206.39-163.26a15.029 15.029 0 0 0 1.46-6.486c0-8.308-6.71-15.043-14.989-15.043-8.278 0-14.989 6.735-14.989 15.043s6.711 15.044 14.99 15.044c2.314 0 4.505-0.527 6.462-1.467l21.518 21.596v20.918l-26.981 27.078v-19.84a15.046 15.046 0 0 0 9.993-14.187c0-8.308-6.711-15.044-14.99-15.044-8.278 0-14.99 6.736-14.99 15.044 0 6.55 4.172 12.122 9.994 14.187v29.868l-24.983 25.073v-147.28l20.519-20.592a14.886 14.886 0 0 0 6.462 1.466c8.279 0 14.99-6.735 14.99-15.044 0-8.308-6.711-15.043-14.99-15.043-8.278 0-14.989 6.735-14.989 15.043 0 2.323 0.524 4.522 1.46 6.486l-18.448 18.515-18.449-18.515a15.029 15.029 0 0 0 1.46-6.486c0-8.308-6.71-15.043-14.989-15.043-8.278 0-14.989 6.735-14.989 15.043 0 8.309 6.711 15.044 14.99 15.044 2.314 0 4.505-0.527 6.462-1.466l20.518 20.592v105.16l-35.974-36.104v-28.865a15.046 15.046 0 0 0 9.993-14.187c0-8.309-6.711-15.044-14.99-15.044-8.278 0-14.99 6.735-14.99 15.044 0 6.55 4.172 12.122 9.994 14.187v18.837l-27.98-28.081v-27.863a15.046 15.046 0 0 0 9.993-14.187c0-8.308-6.711-15.044-14.99-15.044-8.278 0-14.99 6.736-14.99 15.044 0 6.55 4.172 12.122 9.994 14.187v32.017l30.907 31.018h-17.77c-2.058-5.843-7.61-10.029-14.137-10.029-8.278 0-14.99 6.735-14.99 15.043 0 8.309 6.712 15.044 14.99 15.044 6.527 0 12.08-4.186 14.137-10.03h27.763l43.04 43.196v75.074l-22.983-23.066v-28.866a15.046 15.046 0 0 0 9.993-14.187c0-8.308-6.711-15.043-14.99-15.043-8.278 0-14.99 6.735-14.99 15.043 0 6.55 4.172 12.122 9.994 14.187v18.837l-33.439-33.558a15.029 15.029 0 0 0 1.461-6.486c0-8.308-6.71-15.043-14.99-15.043-8.278 0-14.989 6.735-14.989 15.043s6.711 15.043 14.99 15.043c2.314 0 4.506-0.526 6.462-1.466l33.439 33.559h-17.77c-2.058-5.843-7.61-10.03-14.137-10.03-8.278 0-14.99 6.736-14.99 15.044s6.712 15.043 14.99 15.043c6.527 0 12.079-4.186 14.137-10.029h27.763l27.98 28.081h14.132l28.98-29.083h26.763c2.058 5.842 7.61 10.028 14.137 10.028 8.278 0 14.99-6.735 14.99-15.043s-6.712-15.043-14.99-15.043c-6.527 0-12.079 4.186-14.137 10.029h-30.902l-26.91 27.006v-32.951l32.049-32.164h51.746c2.058 5.843 7.61 10.029 14.136 10.029 8.279 0 14.99-6.735 14.99-15.043 0-8.309-6.711-15.044-14.99-15.044-6.526 0-12.078 4.186-14.136 10.03h-41.755l29.908-30.016v-25.072l21.517-21.596a14.886 14.886 0 0 0 6.463 1.467c8.278 0 14.99-6.736 14.99-15.044s-6.712-15.043-14.99-15.043-14.99 6.735-14.99 15.043c0 2.323 0.525 4.522 1.461 6.486l-14.451 14.504v-45.917a15.046 15.046 0 0 0 9.993-14.187c0-8.309-6.711-15.044-14.99-15.044-8.278 0-14.99 6.735-14.99 15.044 0 6.55 4.172 12.122 9.994 14.187v45.915l-14.452-14.504zm-129.45 143.95c-3.311 0-5.996-2.694-5.996-6.017s2.685-6.017 5.996-6.017c3.312 0 5.996 2.694 5.996 6.017s-2.684 6.017-5.996 6.017zm43.97-45.13c-3.312 0-5.997-2.694-5.997-6.017s2.685-6.017 5.996-6.017c3.312 0 5.996 2.694 5.996 6.017s-2.684 6.017-5.996 6.017zm-51.964-7.02c-3.312 0-5.996-2.694-5.996-6.017s2.684-6.017 5.996-6.017c3.311 0 5.996 2.694 5.996 6.017s-2.685 6.017-5.996 6.017zm-4.997-50.144c-3.311 0-5.995-2.694-5.995-6.018 0-3.323 2.684-6.017 5.995-6.017 3.312 0 5.996 2.694 5.996 6.017 0 3.324-2.684 6.018-5.996 6.018zm124.91 7.02c-3.311 0-5.995-2.694-5.995-6.017 0-3.324 2.684-6.018 5.995-6.018 3.312 0 5.996 2.694 5.996 6.018 0 3.323-2.684 6.017-5.996 6.017zm67.952 46.133c-3.31 0-5.995-2.694-5.995-6.017 0-3.324 2.684-6.018 5.995-6.018 3.312 0 5.996 2.694 5.996 6.018 0 3.323-2.684 6.017-5.996 6.017zm-25.981 48.138c-3.312 0-5.996-2.694-5.996-6.017s2.684-6.017 5.996-6.017c3.311 0 5.996 2.694 5.996 6.017s-2.685 6.017-5.996 6.017zm27.98-143.41c-3.311 0-5.996-2.695-5.996-6.018s2.685-6.017 5.996-6.017 5.996 2.694 5.996 6.017-2.685 6.018-5.996 6.018zm-32.977-39.113c-3.311 0-5.996-2.694-5.996-6.017 0-3.324 2.685-6.018 5.996-6.018 3.312 0 5.996 2.694 5.996 6.018 0 3.323-2.684 6.017-5.996 6.017zm-39.972-24.07c-3.311 0-5.995-2.693-5.995-6.017 0-3.323 2.684-6.017 5.995-6.017 3.312 0 5.996 2.694 5.996 6.017 0 3.324-2.684 6.018-5.996 6.018zm-63.955 0c-3.31 0-5.995-2.693-5.995-6.017 0-3.323 2.684-6.017 5.995-6.017 3.312 0 5.996 2.694 5.996 6.017 0 3.324-2.684 6.018-5.996 6.018zm-51.963 23.067c-3.311 0-5.996-2.694-5.996-6.017 0-3.324 2.685-6.018 5.996-6.018s5.996 2.694 5.996 6.018c0 3.323-2.685 6.017-5.996 6.017zm37.973 37.107c-3.311 0-5.995-2.694-5.995-6.017 0-3.324 2.684-6.018 5.995-6.018 3.312 0 5.996 2.694 5.996 6.018 0 3.323-2.684 6.017-5.996 6.017zm84.94 3.009c-3.31 0-5.995-2.695-5.995-6.018s2.684-6.017 5.995-6.017c3.312 0 5.996 2.694 5.996 6.017s-2.684 6.018-5.996 6.018z"/>
+        </defs>
+        <g fill="none" fill-rule="evenodd">
+          <rect width="500" height="500" ry="40.911" fill="#41bdf5" fill-rule="evenodd" stroke-width="5.8497"/>
+          <g transform="translate(52 70)">
+          <mask id="b" fill="#fff">
+            <use xlink:href="#a"/>
+          </mask>
+          <g fill="#FFF" mask="url(#b)">
+            <path d="M0 0h396v351H0z"/>
+          </g>
+          </g>
+        </g>
+      </svg>
+      <div id="ha-launch-screen-info-box" class="ha-launch-screen-spacer"></div>
+    </div>
+
    <ha-demo></ha-demo>
+
    <%= renderTemplate('_js_base') %>
    <%= renderTemplate('_preload_roboto') %>

--- a/gallery/public/images/office.jpg
+++ b/gallery/public/images/office.jpg
--- a/gallery/src/demos/demo-ha-alert.ts
+++ b/gallery/src/demos/demo-ha-alert.ts
@@ -1,7 +1,9 @@
-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 "../../../src/components/ha-alert";
 import "../../../src/components/ha-card";
+import "../../../src/components/ha-logo-svg";

 const alerts: {
  title?: string;
@@ -10,6 +12,8 @@ const alerts: {
  dismissable?: boolean;
  action?: string;
  rtl?: boolean;
+  iconSlot?: TemplateResult;
+  actionSlot?: TemplateResult;
 }[] = [
  {
    title: "Test info alert",
@@ -81,6 +85,28 @@ const alerts: {
    type: "warning",
    action: "save",
  },
+  {
+    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)",
    type: "info",
@@ -117,7 +143,7 @@ export class DemoHaAlert extends LitElement {
                .actionText=${alert.action || ""}
                .rtl=${alert.rtl || false}
              >
-                ${alert.description}
+                ${alert.iconSlot} ${alert.description} ${alert.actionSlot}
              </ha-alert>
            `
          )}
@@ -142,8 +168,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-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-ha-svg-icon.ts
+++ b/gallery/src/demos/demo-ha-svg-icon.ts
@@ -0,0 +1,59 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
+import { getColorByIndex } from "../../../src/common/color/colors";
+import { FIXED_DOMAIN_ICONS } from "../../../src/common/const";
+import "../../../src/components/ha-card";
+import "../../../src/components/ha-svg-icon";
+
+@customElement("demo-ha-svg-icon")
+export class DemoHaSvgIcon extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      <ha-card header="ha-svg-icon demo">
+        <div class="card-content">
+          ${Object.values(FIXED_DOMAIN_ICONS).map(
+            (icon) => html`
+              <div class="icon">
+                <ha-svg-icon .path=${icon}></ha-svg-icon>
+                <ha-svg-icon
+                  .path=${icon}
+                  .backgroundColor=${getColorByIndex(icon.length)}
+                ></ha-svg-icon>
+                <ha-svg-icon
+                  class="background"
+                  .path=${icon}
+                  .backgroundColor=${getColorByIndex(icon.length)}
+                ></ha-svg-icon>
+              </div>
+            `
+          )}
+        </div>
+      </ha-card>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      ha-svg-icon {
+        margin: 4px;
+      }
+      .background {
+        color: var(--card-background-color);
+      }
+      .icon {
+        display: flex;
+        align-items: center;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-svg-icon": DemoHaSvgIcon;
+  }
+}
--- 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/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/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.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info.ts
@@ -1,6 +1,5 @@
 import "@material/mwc-button";
 import {
-  mdiArrowUpBoldCircle,
  mdiCheckCircle,
  mdiChip,
  mdiCircle,
@@ -49,7 +48,6 @@ import {
  startHassioAddon,
  stopHassioAddon,
  uninstallHassioAddon,
-  updateHassioAddon,
  validateHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
 import {
@@ -69,9 +67,8 @@ 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 { addonArchIsSupported, extractChangelog } from "../../util/addon";

 const STAGE_ICON = {
  stable: mdiCheckCircle,
@@ -128,69 +125,23 @@ class HassioAddonInfo extends LitElement {
    return html`
      ${this.addon.update_available
        ? html`
-            <ha-card
-              .header="${this.supervisor.localize(
-                "common.update_available",
-                "count",
-                1
-              )}🎉"
+            <ha-alert
+              .title=${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")}
+              ${this.supervisor.localize(
+                "addon.dashboard.new_update_available",
+                { name: this.addon.name, version: this.addon.version_latest }
+              )}
+              <a
+                href="/hassio/update-available/${this.addon.slug}"
+                slot="action"
+              >
+                <mwc-button .label=${this.supervisor.localize("common.review")}>
                </mwc-button>
-              </div>
-            </ha-card>
+              </a>
+            </ha-alert>
          `
        : ""}
      ${!this.addon.protected
@@ -899,22 +850,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, {
@@ -989,33 +932,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;
@@ -1244,6 +1160,13 @@ class HassioAddonInfo extends LitElement {
          align-self: end;
        }

+        ha-alert mwc-button {
+          --mdc-theme-primary: var(--primary-text-color);
+        }
+        a {
+          text-decoration: none;
+        }
+
        @media (max-width: 720px) {
          ha-chip {
            line-height: 36px;
--- 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")}
--- 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,37 @@ class HassioDashboard extends LitElement {
        .localizeFunc=${this.supervisor.localize}
        .narrow=${this.narrow}
        .route=${this.route}
-        .tabs=${supervisorTabs}
+        .tabs=${supervisorTabs(this.hass)}
        main-page
        supervisor
+        hasFab
      >
        <span slot="header">
          ${this.supervisor.localize("panel.dashboard")}
        </span>
        <div class="content">
-          <hassio-update
-            .hass=${this.hass}
-            .supervisor=${this.supervisor}
-          ></hassio-update>
+          ${this.hass.config.version.includes("dev") ||
+          !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.review")}>
            </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>
@@ -192,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`, {
@@ -244,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`, {
@@ -283,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/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-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/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.review")}
+                      >
+                      </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.review")}
+                      >
+                      </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 {
@@ -77,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.review")}
+                      >
+                      </mwc-button>
+                    </a>
                  `
                : ""}
            </ha-settings-row>
@@ -337,51 +335,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(
@@ -513,6 +466,9 @@ class HassioSupervisorInfo extends LitElement {
          white-space: normal;
          color: var(--secondary-text-color);
        }
+        a {
+          text-decoration: none;
+        }
      `,
    ];
  }
--- a/hassio/src/system/hassio-system.ts
+++ b/hassio/src/system/hassio-system.ts
@@ -28,7 +28,7 @@ class HassioSystem extends LitElement {
        .localizeFunc=${this.supervisor.localize}
        .narrow=${this.narrow}
        .route=${this.route}
-        .tabs=${supervisorTabs}
+        .tabs=${supervisorTabs(this.hass)}
        main-page
        supervisor
      >
--- a/hassio/src/update-available/update-available-dashboard.ts
+++ b/hassio/src/update-available/update-available-dashboard.ts
@@ -0,0 +1,392 @@
+import "@material/mwc-list/mwc-list-item";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+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-expansion-panel";
+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 {
+  createHassioPartialBackup,
+  HassioPartialBackupCreateParams,
+} from "../../../src/data/hassio/backup";
+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 { documentationUrl } from "../../../src/util/documentation-url";
+import { addonArchIsSupported, extractChangelog } from "../util/addon";
+
+const changelogUrl = (
+  hass: HomeAssistant,
+  entry: string,
+  version: string
+): string | undefined => {
+  if (entry === "core") {
+    return version?.includes("dev")
+      ? "https://github.com/home-assistant/core/commits/dev"
+      : documentationUrl(hass, "/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;
+};
+
+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;
+
+  @state() private _updateEntry?: string;
+
+  @state() private _changelogContent?: string;
+
+  @state() private _addonInfo?: HassioAddonDetails;
+
+  @state() private _createBackup = true;
+
+  @state() private _action: "backup" | "update" | null = null;
+
+  @state() private _error?: string;
+
+  private _isAddon = false;
+
+  private _addonStoreInfo = memoizeOne(
+    (slug: string, storeAddons: StoreAddon[]) =>
+      storeAddons.find((addon) => addon.slug === slug)
+  );
+
+  protected render(): TemplateResult {
+    if (!this._updateEntry) {
+      return html``;
+    }
+    const name =
+      // @ts-ignore
+      this._addonInfo?.name || SUPERVISOR_UPDATE_NAMES[this._updateEntry];
+    const changelog = !this._isAddon
+      ? changelogUrl(
+          this.hass,
+          this._updateEntry,
+          this.supervisor[this._updateEntry]?.version
+        )
+      : undefined;
+    return html`
+      <hass-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        .route=${this.route}
+      >
+        <ha-card
+          .header=${this.supervisor.localize("update_available.update_name", {
+            name,
+          })}
+        >
+          <div class="card-content">
+            ${this._error
+              ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
+              : ""}
+            ${this._action === null
+              ? html`
+                  ${this._changelogContent
+                    ? html`
+                        <ha-expansion-panel header="Changelog" outlined>
+                          <ha-markdown .content=${this._changelogContent}>
+                          </ha-markdown>
+                        </ha-expansion-panel>
+                      `
+                    : ""}
+                  <div class="versions">
+                    <p>
+                      ${this.supervisor.localize(
+                        "update_available.description",
+                        {
+                          name,
+                          version:
+                            this._addonInfo?.version ||
+                            this.supervisor[this._updateEntry]?.version,
+                          newest_version:
+                            this._addonInfo?.version_latest ||
+                            this.supervisor[this._updateEntry]?.version_latest,
+                        }
+                      )}
+                    </p>
+                    ${this._updateEntry === "core"
+                      ? html`
+                          <i>
+                            ${this.supervisor.localize(
+                              "update_available.core_note",
+                              {
+                                version:
+                                  this._addonInfo?.version ||
+                                  this.supervisor[this._updateEntry]?.version,
+                              }
+                            )}
+                          </i>
+                        `
+                      : ""}
+                  </div>
+                  ${!["os", "supervisor"].includes(this._updateEntry)
+                    ? html`
+                        <ha-settings-row>
+                          <ha-checkbox
+                            slot="prefix"
+                            .checked=${this._createBackup}
+                            @click=${this._toggleBackup}
+                          >
+                          </ha-checkbox>
+                          <span slot="heading">
+                            ${this.supervisor.localize(
+                              "update_available.create_backup"
+                            )}
+                          </span>
+                        </ha-settings-row>
+                      `
+                    : ""}
+                `
+              : html`<ha-circular-progress alt="Updating" size="large" active>
+                  </ha-circular-progress>
+                  <p class="progress-text">
+                    ${this._action === "update"
+                      ? this.supervisor.localize("update_available.updating", {
+                          name,
+                          version:
+                            this._addonInfo?.version_latest ||
+                            this.supervisor[this._updateEntry]?.version_latest,
+                        })
+                      : this.supervisor.localize(
+                          "update_available.creating_backup",
+                          { name }
+                        )}
+                  </p>`}
+          </div>
+          ${this._action === null
+            ? 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._error !== undefined}
+                    @click=${this._update}
+                    raised
+                  >
+                    ${this.supervisor.localize("common.update")}
+                  </ha-progress-button>
+                </div>
+              `
+            : ""}
+        </ha-card>
+      </hass-subpage>
+    `;
+  }
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    this._updateEntry = this.route.path.substring(1, this.route.path.length);
+    this._isAddon = !["core", "os", "supervisor"].includes(this._updateEntry);
+    if (this._isAddon) {
+      this._loadAddonData();
+    }
+  }
+
+  private async _loadAddonData() {
+    try {
+      this._addonInfo = await fetchHassioAddonInfo(
+        this.hass,
+        this._updateEntry!
+      );
+    } catch (err) {
+      showAlertDialog(this, {
+        title: this._updateEntry,
+        text: extractApiErrorMessage(err),
+        confirm: () => history.back(),
+      });
+      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._updateEntry!
+        );
+        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_arch",
+          {
+            core_version_installed: this.supervisor.core.version,
+            core_version_needed: addonStoreInfo.homeassistant,
+          }
+        );
+      }
+    }
+  }
+
+  private _toggleBackup() {
+    this._createBackup = !this._createBackup;
+  }
+
+  private async _update() {
+    if (this._createBackup) {
+      let backupArgs: HassioPartialBackupCreateParams;
+      if (this._isAddon) {
+        backupArgs = {
+          name: `addon_${this._updateEntry}_${this._addonInfo?.version}`,
+          addons: [this._updateEntry!],
+          homeassistant: false,
+        };
+      } else {
+        backupArgs = {
+          name: `${this._updateEntry}_${this._addonInfo?.version}`,
+          folders: ["homeassistant"],
+          homeassistant: true,
+        };
+      }
+      this._action = "backup";
+      try {
+        await createHassioPartialBackup(this.hass, backupArgs);
+      } catch (err: any) {
+        this._error = extractApiErrorMessage(err);
+        this._action = null;
+        return;
+      }
+    }
+
+    this._action = "update";
+    try {
+      if (this._isAddon) {
+        await updateHassioAddon(this.hass, this._updateEntry!);
+      } else if (this._updateEntry === "core") {
+        await updateCore(this.hass);
+      } else if (this._updateEntry === "os") {
+        await updateOS(this.hass);
+      } else if (this._updateEntry === "supervisor") {
+        await updateSupervisor(this.hass);
+      }
+    } catch (err: any) {
+      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
+        this._error = extractApiErrorMessage(err);
+        this._action = null;
+        return;
+      }
+    }
+    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);
+      }
+      ha-card {
+        margin: auto;
+        margin-top: 16px;
+        max-width: 600px;
+      }
+      a {
+        text-decoration: none;
+        color: var(--primary-text-color);
+      }
+      ha-settings-row {
+        padding: 0;
+      }
+      .card-actions {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      ha-circular-progress {
+        display: block;
+        margin: 32px;
+        text-align: center;
+      }
+
+      .progress-text {
+        text-align: center;
+      }
+    `;
+  }
+}
+
+customElements.define("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
@@ -23,16 +23,16 @@
  "dependencies": {
    "@braintree/sanitize-url": "^5.0.2",
    "@codemirror/commands": "^0.19.5",
-    "@codemirror/gutter": "^0.19.3",
+    "@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.1",
    "@codemirror/search": "^0.19.2",
-    "@codemirror/state": "^0.19.2",
+    "@codemirror/state": "^0.19.4",
    "@codemirror/stream-parser": "^0.19.2",
-    "@codemirror/text": "^0.19.4",
-    "@codemirror/view": "^0.19.9",
+    "@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",
@@ -67,8 +67,8 @@
    "@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.4.95",
-    "@mdi/svg": "6.4.95",
+    "@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",
--- a/setup.py
+++ b/setup.py
@@ -2,7 +2,7 @@ from setuptools import setup, find_packages

 setup(
    name="home-assistant-frontend",
-    version="20211027.0",
+    version="20211117.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
@@ -206,7 +206,8 @@ class HaAuthFlow extends litLocalizeLiteMixin(LitElement) {
            .computeError=${this._computeErrorCallback(step)}
            @value-changed=${this._stepDataChanged}
          ></ha-form>
-          ${this.clientId === genClientId() && step.step_id !== "mfa"
+          ${this.clientId === genClientId() &&
+          !["select_mfa_module", "mfa"].includes(step.step_id)
            ? html`
                <ha-formfield
                  class="store-token"
--- 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/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 || {};

@@ -31,10 +32,7 @@ export function askWrite() {
 export function saveTokens(tokens: AuthData | null) {
  tokenCache.tokens = tokens;

-  if (
-    !tokenCache.writeEnabled &&
-    new URLSearchParams(window.location.search).get("storeToken") === "true"
-  ) {
+  if (!tokenCache.writeEnabled && extractSearchParam("storeToken") === "true") {
    tokenCache.writeEnabled = true;
  }

--- a/src/common/const.ts
+++ b/src/common/const.ts
@@ -76,7 +76,6 @@ export const FIXED_DOMAIN_ICONS = {
  configurator: mdiCog,
  conversation: mdiTextToSpeech,
  counter: mdiCounter,
-  device_tracker: mdiAccount,
  fan: mdiFan,
  google_assistant: mdiGoogleAssistant,
  group: mdiGoogleCirclesCommunities,
@@ -104,7 +103,6 @@ export const FIXED_DOMAIN_ICONS = {
  siren: mdiBullhorn,
  simple_alarm: mdiBell,
  sun: mdiWhiteBalanceSunny,
-  switch: mdiFlash,
  timer: mdiTimerOutline,
  updater: mdiCloudUpload,
  vacuum: mdiRobotVacuum,
@@ -145,6 +143,7 @@ export const FIXED_DEVICE_CLASS_ICONS = {

 /** Domains that have a state card. */
 export const DOMAINS_WITH_CARD = [
+  "button",
  "climate",
  "cover",
  "configurator",
--- a/src/common/entity/binary_sensor_icon.ts
+++ b/src/common/entity/binary_sensor_icon.ts
@@ -6,6 +6,8 @@ import {
  mdiBrightness5,
  mdiBrightness7,
  mdiCheckboxMarkedCircle,
+  mdiCheckNetworkOutline,
+  mdiCloseNetworkOutline,
  mdiCheckCircle,
  mdiCropPortrait,
  mdiDoorClosed,
@@ -26,8 +28,6 @@ import {
  mdiPowerPlugOff,
  mdiRadioboxBlank,
  mdiRun,
-  mdiServerNetwork,
-  mdiServerNetworkOff,
  mdiSmoke,
  mdiSnowflake,
  mdiSquare,
@@ -55,7 +55,7 @@ export const binarySensorIcon = (state?: string, stateObj?: HassEntity) => {
    case "cold":
      return is_off ? mdiThermometer : mdiSnowflake;
    case "connectivity":
-      return is_off ? mdiServerNetworkOff : mdiServerNetwork;
+      return is_off ? mdiCloseNetworkOutline : mdiCheckNetworkOutline;
    case "door":
      return is_off ? mdiDoorClosed : mdiDoorOpen;
    case "garage_door":
--- 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,8 +32,10 @@ export const computeStateDisplay = (
        // fallback to default
      }
    }
-    return `${formatNumber(compareState, locale)} ${
+    return `${formatNumber(compareState, locale)}${
      stateObj.attributes.unit_of_measurement
+        ? " " + stateObj.attributes.unit_of_measurement
+        : ""
    }`;
  }

@@ -113,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/domain_icon.ts
+++ b/src/common/entity/domain_icon.ts
@@ -1,6 +1,13 @@
 import {
+  mdiAccount,
+  mdiAccountArrowRight,
  mdiAirHumidifierOff,
  mdiAirHumidifier,
+  mdiFlash,
+  mdiBluetooth,
+  mdiBluetoothConnect,
+  mdiLanConnect,
+  mdiLanDisconnect,
  mdiLockOpen,
  mdiLockAlert,
  mdiLockClock,
@@ -8,8 +15,12 @@ import {
  mdiCastConnected,
  mdiCast,
  mdiEmoticonDead,
+  mdiPowerPlug,
+  mdiPowerPlugOff,
  mdiSleep,
  mdiTimerSand,
+  mdiToggleSwitch,
+  mdiToggleSwitchOff,
  mdiZWave,
  mdiClock,
  mdiCalendar,
@@ -44,6 +55,17 @@ export const domainIcon = (
    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" ? mdiAirHumidifierOff : mdiAirHumidifier;

@@ -63,6 +85,16 @@ export const domainIcon = (
    case "media_player":
      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":
--- 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/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/state-history-chart-timeline.ts
+++ b/src/components/chart/state-history-chart-timeline.ts
@@ -25,7 +25,6 @@ const BINARY_SENSOR_DEVICE_CLASS_COLOR_NOT_INVERTED = new Set([
  "power",
  "presence",
  "running",
-  "update",
 ]);

 const STATIC_STATE_COLORS = new Set([
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -678,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 {
--- a/src/components/entity/ha-state-label-badge.ts
+++ b/src/components/entity/ha-state-label-badge.ts
@@ -14,7 +14,10 @@ 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 { 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";
@@ -145,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,
--- a/src/components/entity/state-badge.ts
+++ b/src/components/entity/state-badge.ts
@@ -80,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) {
--- a/src/components/ha-alert.ts
+++ b/src/components/ha-alert.ts
@@ -52,14 +52,16 @@ class HaAlert extends LitElement {
        })}"
      >
        <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">
            ${this.title ? html`<div class="title">${this.title}</div>` : ""}
            <slot></slot>
          </div>
-          <div class="action">
+          <slot name="action">
            ${this.actionText
              ? html`<mwc-button
                  @click=${this._action_clicked}
@@ -72,7 +74,7 @@ class HaAlert extends LitElement {
                  .path=${mdiClose}
                ></ha-icon-button>`
              : ""}
-          </div>
+          </slot>
        </div>
      </div>
    `;
@@ -96,7 +98,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 +110,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;
@@ -131,6 +127,12 @@ class HaAlert extends LitElement {
    }
    .main-content {
      overflow-wrap: anywhere;
+      margin-left: 8px;
+      margin-right: 0;
+    }
+    .issue-type.rtl > .main-content {
+      margin-left: 0;
+      margin-right: 8px;
    }
    .title {
      margin-top: 2px;
@@ -145,28 +147,28 @@ class HaAlert extends LitElement {
    .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-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/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -38,6 +38,7 @@ export class HaDialog extends Dialog {
        .mdc-dialog {
          --mdc-dialog-scroll-divider-color: var(--divider-color);
          z-index: var(--dialog-z-index, 7);
+          -webkit-backdrop-filter: var(--dialog-backdrop-filter, none);
          backdrop-filter: var(--dialog-backdrop-filter, none);
        }
        .mdc-dialog__actions {
@@ -71,6 +72,10 @@ export class HaDialog extends Dialog {
          position: var(--dialog-surface-position, relative);
          top: var(--dialog-surface-top);
          min-height: var(--mdc-dialog-min-height, auto);
+          border-radius: var(
+            --ha-dialog-border-radius,
+            var(--ha-card-border-radius, 4px)
+          );
        }
        :host([flexContent]) .mdc-dialog .mdc-dialog__content {
          display: flex;
--- a/src/components/ha-file-upload.ts
+++ b/src/components/ha-file-upload.ts
@@ -17,7 +17,7 @@ declare global {

@customElement("ha-file-upload")
 export class HaFileUpload extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;

  @property() public accept!: string;

@@ -88,7 +88,8 @@ export class HaFileUpload extends LitElement {
                      <ha-icon-button
                        slot="suffix"
                        @click=${this._clearValue}
-                        .label=${this.hass.localize("ui.common.close")}
+                        .label=${this.hass?.localize("ui.common.close") ||
+                        "close"}
                        .path=${mdiClose}
                      ></ha-icon-button>
                    `
--- a/src/components/ha-form/ha-form-float.ts
+++ b/src/components/ha-form/ha-form-float.ts
@@ -47,12 +47,19 @@ export class HaFormFloat extends LitElement implements HaFormElement {

  private _valueChanged(ev: Event) {
    const source = ev.target as TextField;
-    const rawValue = source.value;
+    const rawValue = source.value.replace(",", ".");

    let value: number | undefined;

+    if (rawValue.endsWith(".")) {
+      return;
+    }
+
    if (rawValue !== "") {
      value = parseFloat(rawValue);
+      if (isNaN(value)) {
+        value = undefined;
+      }
    }

    // Detect anything changed
@@ -61,7 +68,6 @@ export class HaFormFloat extends LitElement implements HaFormElement {
      const newRawValue = value === undefined ? "" : String(value);
      if (source.value !== newRawValue) {
        source.value = newRawValue;
-        return;
      }
      return;
    }
--- a/src/components/ha-form/ha-form-integer.ts
+++ b/src/components/ha-form/ha-form-integer.ts
@@ -36,7 +36,11 @@ export class HaFormInteger extends LitElement implements HaFormElement {
  }

  protected render(): TemplateResult {
-    if ("valueMin" in this.schema && "valueMax" in this.schema) {
+    if (
+      this.schema.valueMin !== undefined &&
+      this.schema.valueMax !== undefined &&
+      this.schema.valueMax - this.schema.valueMin < 256
+    ) {
      return html`
        <div>
          ${this.label}
@@ -96,10 +100,15 @@ export class HaFormInteger extends LitElement implements HaFormElement {
    }

    if (this.schema.optional) {
-      return 0;
+      return this.schema.valueMin || 0;
    }

-    return this.schema.description?.suggested_value || this.schema.default || 0;
+    return (
+      this.schema.description?.suggested_value ||
+      this.schema.default ||
+      this.schema.valueMin ||
+      0
+    );
  }

  private _handleCheckboxChange(ev: Event) {
--- a/src/components/ha-form/ha-form-multi_select.ts
+++ b/src/components/ha-form/ha-form-multi_select.ts
@@ -52,7 +52,9 @@ export class HaFormMultiSelect extends LitElement implements HaFormElement {
  }

  protected render(): TemplateResult {
-    const options = Object.entries(this.schema.options);
+    const options = Array.isArray(this.schema.options)
+      ? this.schema.options
+      : Object.entries(this.schema.options);
    const data = this.data || [];

    const renderedOptions = options.map((item: string | [string, string]) => {
--- a/src/components/ha-form/types.ts
+++ b/src/components/ha-form/types.ts
@@ -38,7 +38,7 @@ export interface HaFormSelectSchema extends HaFormBaseSchema {

 export interface HaFormMultiSelectSchema extends HaFormBaseSchema {
  type: "multi_select";
-  options: Record<string, string>;
+  options: Record<string, string> | string[];
 }

 export interface HaFormFloatSchema extends HaFormBaseSchema {
--- a/src/components/ha-hls-player.ts
+++ b/src/components/ha-hls-player.ts
@@ -229,6 +229,7 @@ class HaHLSPlayer extends LitElement {

      video {
        width: 100%;
+        max-height: var(--video-max-height, calc(100vh - 97px));
      }
    `;
  }
--- a/src/components/ha-icon-picker.ts
+++ b/src/components/ha-icon-picker.ts
@@ -7,14 +7,19 @@ import { css, html, LitElement, TemplateResult } from "lit";
 import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
+import { customIcons } from "../data/custom_icons";
 import { PolymerChangedEvent } from "../polymer-types";
 import "./ha-icon";
 import "./ha-icon-button";

-let mdiIconList: string[] = [];
+type IconItem = {
+  icon: string;
+  keywords: string[];
+};
+let iconItems: IconItem[] = [];

 // eslint-disable-next-line lit/prefer-static-styles
-const rowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
+const rowRenderer: ComboBoxLitRenderer<IconItem> = (item) => html`<style>
    paper-icon-item {
      padding: 0;
      margin: -8px;
@@ -37,8 +42,8 @@ const rowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>

  <ha-svg-icon .path=${mdiCheck}></ha-svg-icon>
  <paper-icon-item>
-    <ha-icon .icon=${item} slot="item-icon"></ha-icon>
-    <paper-item-body>${item}</paper-item-body>
+    <ha-icon .icon=${item.icon} slot="item-icon"></ha-icon>
+    <paper-item-body>${item.icon}</paper-item-body>
  </paper-icon-item>`;

@customElement("ha-icon-picker")
@@ -55,6 +60,8 @@ export class HaIconPicker extends LitElement {

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

+  @property({ type: Boolean }) public invalid = false;
+
  @state() private _opened = false;

  @query("vaadin-combo-box-light", true) private comboBox!: HTMLElement;
@@ -66,7 +73,7 @@ export class HaIconPicker extends LitElement {
        item-label-path="icon"
        .value=${this._value}
        allow-custom-value
-        .filteredItems=${mdiIconList}
+        .filteredItems=${iconItems}
        ${comboBoxRenderer(rowRenderer)}
        @opened-changed=${this._openedChanged}
        @value-changed=${this._valueChanged}
@@ -81,6 +88,8 @@ export class HaIconPicker extends LitElement {
          autocomplete="off"
          autocorrect="off"
          spellcheck="false"
+          .errorMessage=${this.errorMessage}
+          .invalid=${this.invalid}
        >
          ${this._value || this.placeholder
            ? html`
@@ -105,10 +114,38 @@ export class HaIconPicker extends LitElement {

  private async _openedChanged(ev: PolymerChangedEvent<boolean>) {
    this._opened = ev.detail.value;
-    if (this._opened && !mdiIconList.length) {
+    if (this._opened && !iconItems.length) {
      const iconList = await import("../../build/mdi/iconList.json");
-      mdiIconList = iconList.default.map((icon) => `mdi:${icon}`);
-      (this.comboBox as any).filteredItems = mdiIconList;
+
+      iconItems = iconList.default.map((icon) => ({
+        icon: `mdi:${icon.name}`,
+        keywords: icon.keywords,
+      }));
+
+      (this.comboBox as any).filteredItems = iconItems;
+
+      Object.keys(customIcons).forEach((iconSet) => {
+        this._loadCustomIconItems(iconSet);
+      });
+    }
+  }
+
+  private async _loadCustomIconItems(iconsetPrefix: string) {
+    try {
+      const getIconList = customIcons[iconsetPrefix].getIconList;
+      if (typeof getIconList !== "function") {
+        return;
+      }
+      const iconList = await getIconList();
+      const customIconItems = iconList.map((icon) => ({
+        icon: `${iconsetPrefix}:${icon.name}`,
+        keywords: icon.keywords ?? [],
+      }));
+      iconItems.push(...customIconItems);
+      (this.comboBox as any).filteredItems = iconItems;
+    } catch (e) {
+      // eslint-disable-next-line
+      console.warn(`Unable to load icon list for ${iconsetPrefix} iconset`);
    }
  }

@@ -133,16 +170,30 @@ export class HaIconPicker extends LitElement {
    const filterString = ev.detail.value.toLowerCase();
    const characterCount = filterString.length;
    if (characterCount >= 2) {
-      const filteredItems = mdiIconList.filter((icon) =>
-        icon.includes(filterString)
-      );
+      const filteredItems: IconItem[] = [];
+      const filteredItemsByKeywords: IconItem[] = [];
+
+      iconItems.forEach((item) => {
+        if (item.icon.includes(filterString)) {
+          filteredItems.push(item);
+          return;
+        }
+        if (item.keywords.some((t) => t.includes(filterString))) {
+          filteredItemsByKeywords.push(item);
+        }
+      });
+
+      filteredItems.push(...filteredItemsByKeywords);
+
      if (filteredItems.length > 0) {
        (this.comboBox as any).filteredItems = filteredItems;
      } else {
-        (this.comboBox as any).filteredItems = [filterString];
+        (this.comboBox as any).filteredItems = [
+          { icon: filterString, keywords: [] },
+        ];
      }
    } else {
-      (this.comboBox as any).filteredItems = mdiIconList;
+      (this.comboBox as any).filteredItems = iconItems;
    }
  }

--- a/src/components/ha-icon.ts
+++ b/src/components/ha-icon.ts
@@ -10,7 +10,7 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { debounce } from "../common/util/debounce";
-import { CustomIcon, customIconsets } from "../data/custom_iconsets";
+import { CustomIcon, customIcons } from "../data/custom_icons";
 import {
  checkCacheVersion,
  Chunks,
@@ -29,315 +29,7 @@ interface DeprecatedIcon {
  };
 }

-const mdiDeprecatedIcons: DeprecatedIcon = {
-  "adobe-acrobat": {
-    removeIn: "2021.12",
-  },
-  adobe: {
-    removeIn: "2021.12",
-  },
-  "amazon-alexa": {
-    removeIn: "2021.12",
-  },
-  amazon: {
-    removeIn: "2021.12",
-  },
-  "android-auto": {
-    removeIn: "2021.12",
-  },
-  "android-debug-bridge": {
-    removeIn: "2021.12",
-  },
-  "apple-airplay": {
-    newName: "cast-variant",
-    removeIn: "2021.12",
-  },
-  bandcamp: {
-    removeIn: "2021.12",
-  },
-  battlenet: {
-    removeIn: "2021.12",
-  },
-  blogger: {
-    removeIn: "2021.12",
-  },
-  "bolnisi-cross": {
-    newName: "cross-bolnisi",
-    removeIn: "2021.12",
-  },
-  "boom-gate-down": {
-    newName: "boom-gate-arrow-down",
-    removeIn: "2021.12",
-  },
-  "boom-gate-down-outline": {
-    newName: "boom-gate-arrow-down-outline",
-    removeIn: "2021.12",
-  },
-  buddhism: {
-    newName: "dharmachakra",
-    removeIn: "2021.12",
-  },
-  buffer: {
-    removeIn: "2021.12",
-  },
-  "cash-usd-outline": {
-    removeIn: "2021.12",
-  },
-  "cash-usd": {
-    removeIn: "2021.12",
-  },
-  "cellphone-android": {
-    newName: "cellphone",
-    removeIn: "2021.12",
-  },
-  "cellphone-erase": {
-    newName: "cellphone-remove",
-    removeIn: "2021.12",
-  },
-  "cellphone-iphone": {
-    newName: "cellphone",
-    removeIn: "2021.12",
-  },
-  "celtic-cross": {
-    newName: "cross-celtic",
-    removeIn: "2021.12",
-  },
-  christianity: {
-    newName: "cross",
-    removeIn: "2021.12",
-  },
-  "christianity-outline": {
-    newName: "cross-outline",
-    removeIn: "2021.12",
-  },
-  "concourse-ci": {
-    removeIn: "2021.12",
-  },
-  "currency-usd-circle": {
-    removeIn: "2021.12",
-  },
-  "currency-usd-circle-outline": {
-    removeIn: "2021.12",
-  },
-  "do-not-disturb-off": {
-    newName: "minus-circle-off",
-    removeIn: "2021.12",
-  },
-  "do-not-disturb": {
-    newName: "minus-circle",
-    removeIn: "2021.12",
-  },
-  douban: {
-    removeIn: "2021.12",
-  },
-  face: {
-    newName: "face-man",
-    removeIn: "2021.12",
-  },
-  "face-outline": {
-    newName: "face-man-outline",
-    removeIn: "2021.12",
-  },
-  "face-profile-woman": {
-    newName: "face-woman-profile",
-    removeIn: "2021.12",
-  },
-  "face-shimmer": {
-    newName: "face-man-shimmer",
-    removeIn: "2021.12",
-  },
-  "face-shimmer-outline": {
-    newName: "face-man-shimmer-outline",
-    removeIn: "2021.12",
-  },
-  "file-pdf": {
-    newName: "file-pdf-box",
-    removeIn: "2021.12",
-  },
-  "file-pdf-outline": {
-    newName: "file-pdf-box",
-    removeIn: "2021.12",
-  },
-  "file-pdf-box-outline": {
-    newName: "file-pdf-box",
-    removeIn: "2021.12",
-  },
-  "flash-circle": {
-    newName: "lightning-bolt-circle",
-    removeIn: "2021.12",
-  },
-  "floor-lamp-variant": {
-    newName: "floor-lamp-torchiere-variant",
-    removeIn: "2021.12",
-  },
-  gif: {
-    newName: "file-gif-box",
-    removeIn: "2021.12",
-  },
-  "google-photos": {
-    removeIn: "2021.12",
-  },
-  gradient: {
-    newName: "gradient-vertical",
-    removeIn: "2021.12",
-  },
-  hand: {
-    newName: "hand-front-right",
-    removeIn: "2021.12",
-  },
-  "hand-left": {
-    newName: "hand-back-left",
-    removeIn: "2021.12",
-  },
-  "hand-right": {
-    newName: "hand-back-right",
-    removeIn: "2021.12",
-  },
-  hinduism: {
-    newName: "om",
-    removeIn: "2021.12",
-  },
-  "home-currency-usd": {
-    removeIn: "2021.12",
-  },
-  iframe: {
-    newName: "application-brackets",
-    removeIn: "2021.12",
-  },
-  "iframe-outline": {
-    newName: "application-brackets-outline",
-    removeIn: "2021.12",
-  },
-  "iframe-array": {
-    newName: "application-array",
-    removeIn: "2021.12",
-  },
-  "iframe-array-outline": {
-    newName: "application-array-outline",
-    removeIn: "2021.12",
-  },
-  "iframe-braces": {
-    newName: "application-braces",
-    removeIn: "2021.12",
-  },
-  "iframe-braces-outline": {
-    newName: "application-braces-outline",
-    removeIn: "2021.12",
-  },
-  "iframe-parentheses": {
-    newName: "application-parentheses",
-    removeIn: "2021.12",
-  },
-  "iframe-parentheses-outline": {
-    newName: "application-parentheses-outline",
-    removeIn: "2021.12",
-  },
-  "iframe-variable": {
-    newName: "application-variable",
-    removeIn: "2021.12",
-  },
-  "iframe-variable-outline": {
-    newName: "application-variable-outline",
-    removeIn: "2021.12",
-  },
-  islam: {
-    newName: "star-crescent",
-    removeIn: "2021.12",
-  },
-  judaism: {
-    newName: "star-david",
-    removeIn: "2021.12",
-  },
-  "laptop-chromebook": {
-    newName: "laptop",
-    removeIn: "2021.12",
-  },
-  "laptop-mac": {
-    newName: "laptop",
-    removeIn: "2021.12",
-  },
-  "laptop-windows": {
-    newName: "laptop",
-    removeIn: "2021.12",
-  },
-  "microsoft-edge-legacy": {
-    removeIn: "2021.12",
-  },
-  "microsoft-yammer": {
-    removeIn: "2021.12",
-  },
-  "monitor-clean": {
-    newName: "monitor-shimmer",
-    removeIn: "2021.12",
-  },
-  "pdf-box": {
-    newName: "file-pdf-box",
-    removeIn: "2021.12",
-  },
-  pharmacy: {
-    newName: "mortar-pestle-plus",
-    removeIn: "2021.12",
-  },
-  "plus-one": {
-    newName: "numeric-positive-1",
-    removeIn: "2021.12",
-  },
-  "poll-box": {
-    newName: "chart-box",
-    removeIn: "2021.12",
-  },
-  "poll-box-outline": {
-    newName: "chart-box-outline",
-    removeIn: "2021.12",
-  },
-  sparkles: {
-    newName: "shimmer",
-    removeIn: "2021.12",
-  },
-  "tablet-ipad": {
-    newName: "tablet",
-    removeIn: "2021.12",
-  },
-  teach: {
-    newName: "human-male-board",
-    removeIn: "2021.12",
-  },
-  telegram: {
-    removeIn: "2021.12",
-  },
-  "television-clean": {
-    newName: "television-shimmer",
-    removeIn: "2021.12",
-  },
-  "text-subject": {
-    newName: "text-long",
-    removeIn: "2021.12",
-  },
-  "twitter-retweet": {
-    newName: "repeat-variant",
-    removeIn: "2021.12",
-  },
-  untappd: {
-    removeIn: "2021.12",
-  },
-  vk: {
-    removeIn: "2021.12",
-  },
-  "voice-off": {
-    newName: "account-voice-off",
-    removeIn: "2021.12",
-  },
-  "xamarian-outline": {
-    newName: "xamarian",
-    removeIn: "2021.12",
-  },
-  xing: {
-    removeIn: "2021.12",
-  },
-  "y-combinator": {
-    removeIn: "2021.12",
-  },
-};
+const mdiDeprecatedIcons: DeprecatedIcon = {};

 const chunks: Chunks = {};

@@ -356,7 +48,7 @@ export class HaIcon extends LitElement {

  @state() private _path?: string;

-  @state() private _viewBox?;
+  @state() private _viewBox?: string;

  @state() private _legacy = false;

@@ -386,6 +78,7 @@ export class HaIcon extends LitElement {
    if (!this.icon) {
      return;
    }
+    const requestedIcon = this.icon;
    const [iconPrefix, origIconName] = this.icon.split(":", 2);

    let iconName = origIconName;
@@ -395,10 +88,10 @@ export class HaIcon extends LitElement {
    }

    if (!MDI_PREFIXES.includes(iconPrefix)) {
-      if (iconPrefix in customIconsets) {
-        const customIconset = customIconsets[iconPrefix];
-        if (customIconset) {
-          this._setCustomPath(customIconset(iconName));
+      if (iconPrefix in customIcons) {
+        const customIcon = customIcons[iconPrefix];
+        if (customIcon && typeof customIcon.getIcon === "function") {
+          this._setCustomPath(customIcon.getIcon(iconName), requestedIcon);
        }
        return;
      }
@@ -441,14 +134,16 @@ export class HaIcon extends LitElement {
    }

    if (databaseIcon) {
-      this._path = databaseIcon;
+      if (this.icon === requestedIcon) {
+        this._path = databaseIcon;
+      }
      cachedIcons[iconName] = databaseIcon;
      return;
    }
    const chunk = findIconChunk(iconName);

    if (chunk in chunks) {
-      this._setPath(chunks[chunk], iconName);
+      this._setPath(chunks[chunk], iconName, requestedIcon);
      return;
    }

@@ -456,19 +151,31 @@ export class HaIcon extends LitElement {
      response.json()
    );
    chunks[chunk] = iconPromise;
-    this._setPath(iconPromise, iconName);
+    this._setPath(iconPromise, iconName, requestedIcon);
    debouncedWriteCache();
  }

-  private async _setCustomPath(promise: Promise<CustomIcon>) {
+  private async _setCustomPath(
+    promise: Promise<CustomIcon>,
+    requestedIcon: string
+  ) {
    const icon = await promise;
+    if (this.icon !== requestedIcon) {
+      return;
+    }
    this._path = icon.path;
    this._viewBox = icon.viewBox;
  }

-  private async _setPath(promise: Promise<Icons>, iconName: string) {
+  private async _setPath(
+    promise: Promise<Icons>,
+    iconName: string,
+    requestedIcon: string
+  ) {
    const iconPack = await promise;
-    this._path = iconPack[iconName];
+    if (this.icon === requestedIcon) {
+      this._path = iconPack[iconName];
+    }
    cachedIcons[iconName] = iconPack[iconName];
  }

--- a/src/components/ha-logo-svg.ts
+++ b/src/components/ha-logo-svg.ts
@@ -0,0 +1,51 @@
+import { css, CSSResultGroup, LitElement, svg, SVGTemplateResult } from "lit";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-logo-svg")
+export class HaLogoSvg extends LitElement {
+  protected render(): SVGTemplateResult {
+    return svg`
+      <svg version="1.1" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <defs>
+          <path id="a" d="m44.041 343.22v-133.64h-34.753a9.333 9.333 0 0 1-6.655-15.876l187.01-190.21c4.517-4.594 11.903-4.657 16.498-0.14l0.12 0.12 97.601 98.794v-18.297a7.778 7.778 0 0 1 7.778-7.778h32.41a7.778 7.778 0 0 1 7.779 7.778v67.138l41.568 42.618a9.333 9.333 0 0 1-6.682 15.85h-34.886v133.64a7.778 7.778 0 0 1-7.778 7.778h-292.23a7.778 7.778 0 0 1-7.778-7.778zm206.39-163.26a15.029 15.029 0 0 0 1.46-6.486c0-8.308-6.71-15.043-14.989-15.043-8.278 0-14.989 6.735-14.989 15.043s6.711 15.044 14.99 15.044c2.314 0 4.505-0.527 6.462-1.467l21.518 21.596v20.918l-26.981 27.078v-19.84a15.046 15.046 0 0 0 9.993-14.187c0-8.308-6.711-15.044-14.99-15.044-8.278 0-14.99 6.736-14.99 15.044 0 6.55 4.172 12.122 9.994 14.187v29.868l-24.983 25.073v-147.28l20.519-20.592a14.886 14.886 0 0 0 6.462 1.466c8.279 0 14.99-6.735 14.99-15.044 0-8.308-6.711-15.043-14.99-15.043-8.278 0-14.989 6.735-14.989 15.043 0 2.323 0.524 4.522 1.46 6.486l-18.448 18.515-18.449-18.515a15.029 15.029 0 0 0 1.46-6.486c0-8.308-6.71-15.043-14.989-15.043-8.278 0-14.989 6.735-14.989 15.043 0 8.309 6.711 15.044 14.99 15.044 2.314 0 4.505-0.527 6.462-1.466l20.518 20.592v105.16l-35.974-36.104v-28.865a15.046 15.046 0 0 0 9.993-14.187c0-8.309-6.711-15.044-14.99-15.044-8.278 0-14.99 6.735-14.99 15.044 0 6.55 4.172 12.122 9.994 14.187v18.837l-27.98-28.081v-27.863a15.046 15.046 0 0 0 9.993-14.187c0-8.308-6.711-15.044-14.99-15.044-8.278 0-14.99 6.736-14.99 15.044 0 6.55 4.172 12.122 9.994 14.187v32.017l30.907 31.018h-17.77c-2.058-5.843-7.61-10.029-14.137-10.029-8.278 0-14.99 6.735-14.99 15.043 0 8.309 6.712 15.044 14.99 15.044 6.527 0 12.08-4.186 14.137-10.03h27.763l43.04 43.196v75.074l-22.983-23.066v-28.866a15.046 15.046 0 0 0 9.993-14.187c0-8.308-6.711-15.043-14.99-15.043-8.278 0-14.99 6.735-14.99 15.043 0 6.55 4.172 12.122 9.994 14.187v18.837l-33.439-33.558a15.029 15.029 0 0 0 1.461-6.486c0-8.308-6.71-15.043-14.99-15.043-8.278 0-14.989 6.735-14.989 15.043s6.711 15.043 14.99 15.043c2.314 0 4.506-0.526 6.462-1.466l33.439 33.559h-17.77c-2.058-5.843-7.61-10.03-14.137-10.03-8.278 0-14.99 6.736-14.99 15.044s6.712 15.043 14.99 15.043c6.527 0 12.079-4.186 14.137-10.029h27.763l27.98 28.081h14.132l28.98-29.083h26.763c2.058 5.842 7.61 10.028 14.137 10.028 8.278 0 14.99-6.735 14.99-15.043s-6.712-15.043-14.99-15.043c-6.527 0-12.079 4.186-14.137 10.029h-30.902l-26.91 27.006v-32.951l32.049-32.164h51.746c2.058 5.843 7.61 10.029 14.136 10.029 8.279 0 14.99-6.735 14.99-15.043 0-8.309-6.711-15.044-14.99-15.044-6.526 0-12.078 4.186-14.136 10.03h-41.755l29.908-30.016v-25.072l21.517-21.596a14.886 14.886 0 0 0 6.463 1.467c8.278 0 14.99-6.736 14.99-15.044s-6.712-15.043-14.99-15.043-14.99 6.735-14.99 15.043c0 2.323 0.525 4.522 1.461 6.486l-14.451 14.504v-45.917a15.046 15.046 0 0 0 9.993-14.187c0-8.309-6.711-15.044-14.99-15.044-8.278 0-14.99 6.735-14.99 15.044 0 6.55 4.172 12.122 9.994 14.187v45.915l-14.452-14.504zm-129.45 143.95c-3.311 0-5.996-2.694-5.996-6.017s2.685-6.017 5.996-6.017c3.312 0 5.996 2.694 5.996 6.017s-2.684 6.017-5.996 6.017zm43.97-45.13c-3.312 0-5.997-2.694-5.997-6.017s2.685-6.017 5.996-6.017c3.312 0 5.996 2.694 5.996 6.017s-2.684 6.017-5.996 6.017zm-51.964-7.02c-3.312 0-5.996-2.694-5.996-6.017s2.684-6.017 5.996-6.017c3.311 0 5.996 2.694 5.996 6.017s-2.685 6.017-5.996 6.017zm-4.997-50.144c-3.311 0-5.995-2.694-5.995-6.018 0-3.323 2.684-6.017 5.995-6.017 3.312 0 5.996 2.694 5.996 6.017 0 3.324-2.684 6.018-5.996 6.018zm124.91 7.02c-3.311 0-5.995-2.694-5.995-6.017 0-3.324 2.684-6.018 5.995-6.018 3.312 0 5.996 2.694 5.996 6.018 0 3.323-2.684 6.017-5.996 6.017zm67.952 46.133c-3.31 0-5.995-2.694-5.995-6.017 0-3.324 2.684-6.018 5.995-6.018 3.312 0 5.996 2.694 5.996 6.018 0 3.323-2.684 6.017-5.996 6.017zm-25.981 48.138c-3.312 0-5.996-2.694-5.996-6.017s2.684-6.017 5.996-6.017c3.311 0 5.996 2.694 5.996 6.017s-2.685 6.017-5.996 6.017zm27.98-143.41c-3.311 0-5.996-2.695-5.996-6.018s2.685-6.017 5.996-6.017 5.996 2.694 5.996 6.017-2.685 6.018-5.996 6.018zm-32.977-39.113c-3.311 0-5.996-2.694-5.996-6.017 0-3.324 2.685-6.018 5.996-6.018 3.312 0 5.996 2.694 5.996 6.018 0 3.323-2.684 6.017-5.996 6.017zm-39.972-24.07c-3.311 0-5.995-2.693-5.995-6.017 0-3.323 2.684-6.017 5.995-6.017 3.312 0 5.996 2.694 5.996 6.017 0 3.324-2.684 6.018-5.996 6.018zm-63.955 0c-3.31 0-5.995-2.693-5.995-6.017 0-3.323 2.684-6.017 5.995-6.017 3.312 0 5.996 2.694 5.996 6.017 0 3.324-2.684 6.018-5.996 6.018zm-51.963 23.067c-3.311 0-5.996-2.694-5.996-6.017 0-3.324 2.685-6.018 5.996-6.018s5.996 2.694 5.996 6.018c0 3.323-2.685 6.017-5.996 6.017zm37.973 37.107c-3.311 0-5.995-2.694-5.995-6.017 0-3.324 2.684-6.018 5.995-6.018 3.312 0 5.996 2.694 5.996 6.018 0 3.323-2.684 6.017-5.996 6.017zm84.94 3.009c-3.31 0-5.995-2.695-5.995-6.018s2.684-6.017 5.995-6.017c3.312 0 5.996 2.694 5.996 6.017s-2.684 6.018-5.996 6.018z"/>
+        </defs>
+        <g fill="none" fill-rule="evenodd">
+          <rect width="500" height="500" ry="40.911" fill="#41bdf5" fill-rule="evenodd" stroke-width="5.8497"/>
+          <g transform="translate(52 70)">
+          <mask id="b" fill="#fff">
+            <use xlink:href="#a"/>
+          </mask>
+          <g fill="#FFF" mask="url(#b)">
+            <path d="M0 0h396v351H0z"/>
+          </g>
+          </g>
+        </g>
+      </svg>`;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: var(--ha-icon-display, inline-flex);
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        vertical-align: middle;
+        fill: currentcolor;
+        width: var(--mdc-icon-size, 24px);
+        height: var(--mdc-icon-size, 24px);
+      }
+      svg {
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        display: block;
+      }
+    `;
+  }
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-logo-svg": HaLogoSvg;
+  }
+}
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -51,7 +51,7 @@ import {
 } from "../external_app/external_config";
 import { actionHandler } from "../panels/lovelace/common/directives/action-handler-directive";
 import { haStyleScrollbar } from "../resources/styles";
-import type { HomeAssistant, PanelInfo } from "../types";
+import type { HomeAssistant, PanelInfo, Route } from "../types";
 import "./ha-icon";
 import "./ha-icon-button";
 import "./ha-menu-button";
@@ -189,6 +189,8 @@ class HaSidebar extends LitElement {

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

+  @property() public route!: Route;
+
  @property({ type: Boolean }) public alwaysExpand = false;

  @property({ type: Boolean }) public editMode = false;
@@ -351,12 +353,19 @@ class HaSidebar extends LitElement {
      this._hiddenPanels
    );

+    // Show the update-available as beeing part of configuration
+    const selectedPanel = this.route.path?.startsWith(
+      "/hassio/update-available"
+    )
+      ? "config"
+      : this.hass.panelUrl;
+
    // prettier-ignore
    return html`
      <paper-listbox
        attr-for-selected="data-panel"
        class="ha-scrollbar"
-        .selected=${this.hass.panelUrl}
+        .selected=${selectedPanel}
        @focusin=${this._listboxFocusIn}
        @focusout=${this._listboxFocusOut}
        @scroll=${this._listboxScroll}
--- a/src/components/ha-svg-icon.ts
+++ b/src/components/ha-svg-icon.ts
@@ -7,9 +7,15 @@ export class HaSvgIcon extends LitElement {

  @property() public viewBox?: string;

+  @property({ attribute: "background-color" }) public backgroundColor?: string;
+
  protected render(): SVGTemplateResult {
    return svg`
    <svg
+      class="${this.backgroundColor ? "background" : ""}"
+      style="background-color: ${
+        this.backgroundColor ? this.backgroundColor : "undefined"
+      };"
      viewBox=${this.viewBox || "0 0 24 24"}
      preserveAspectRatio="xMidYMid meet"
      focusable="false">
@@ -28,12 +34,14 @@ export class HaSvgIcon extends LitElement {
        position: relative;
        vertical-align: middle;
        fill: currentcolor;
-        width: var(--mdc-icon-size, 24px);
-        height: var(--mdc-icon-size, 24px);
+      }
+      .background {
+        padding: 8px;
+        border-radius: 50%;
      }
      svg {
-        width: 100%;
-        height: 100%;
+        width: var(--mdc-icon-size, 24px);
+        height: var(--mdc-icon-size, 24px);
        pointer-events: none;
        display: block;
      }
--- a/src/components/ha-target-picker.ts
+++ b/src/components/ha-target-picker.ts
@@ -502,6 +502,9 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
  }

  private _entityRegMeetsFilter(entity: EntityRegistryEntry): boolean {
+    if (entity.entity_category) {
+      return false;
+    }
    if (
      this.includeDomains &&
      !this.includeDomains.includes(computeDomain(entity.entity_id))
--- a/src/components/ha-web-rtc-player.ts
+++ b/src/components/ha-web-rtc-player.ts
@@ -80,6 +80,9 @@ class HaWebRtcPlayer extends LitElement {
    // Some cameras (such as nest) require a data channel to establish a stream
    // however, not used by any integrations.
    peerConnection.createDataChannel("dataSendChannel");
+    peerConnection.addTransceiver("audio", { direction: "recvonly" });
+    peerConnection.addTransceiver("video", { direction: "recvonly" });
+
    const offerOptions: RTCOfferOptions = {
      offerToReceiveAudio: true,
      offerToReceiveVideo: true,
@@ -145,9 +148,15 @@ class HaWebRtcPlayer extends LitElement {

  static get styles(): CSSResultGroup {
    return css`
+      :host,
      video {
        display: block;
      }
+
+      video {
+        width: 100%;
+        max-height: var(--video-max-height, calc(100vh - 97px));
+      }
    `;
  }
 }
--- a/src/components/map/ha-entity-marker.ts
+++ b/src/components/map/ha-entity-marker.ts
@@ -26,7 +26,9 @@ class HaEntityMarker extends LitElement {
          ? html`<div
              class="entity-picture"
              style=${styleMap({
-                "background-image": `url(${this.entityPicture})`,
+                "background-image": `url(${this.hass.hassUrl(
+                  this.entityPicture
+                )})`,
              })}
            ></div>`
          : this.entityName}
--- a/src/components/map/ha-locations-editor.ts
+++ b/src/components/map/ha-locations-editor.ts
@@ -26,6 +26,7 @@ declare global {
  // for fire event
  interface HASSDomEvents {
    "location-updated": { id: string; location: [number, number] };
+    "markers-updated": undefined;
    "radius-updated": { id: string; radius: number };
    "marker-clicked": { id: string };
  }
@@ -281,6 +282,7 @@ export class HaLocationsEditor extends LitElement {
    });
    this._circles = circles;
    this._locationMarkers = locationMarkers;
+    fireEvent(this, "markers-updated");
  }

  static get styles(): CSSResultGroup {
--- a/src/data/area_registry.ts
+++ b/src/data/area_registry.ts
@@ -7,10 +7,12 @@ import { HomeAssistant } from "../types";
 export interface AreaRegistryEntry {
  area_id: string;
  name: string;
+  picture: string | null;
 }

 export interface AreaRegistryEntryMutableParams {
  name: string;
+  picture?: string | null;
 }

 export const createAreaRegistryEntry = (
--- a/src/data/custom_icons.ts
+++ b/src/data/custom_icons.ts
@@ -0,0 +1,40 @@
+import { customIconsets } from "./custom_iconsets";
+
+export interface CustomIcon {
+  path: string;
+  viewBox?: string;
+}
+
+export interface CustomIconListItem {
+  name: string;
+  keywords?: string[];
+}
+
+export interface CustomIconHelpers {
+  getIcon: (name: string) => Promise<CustomIcon>;
+  getIconList?: () => Promise<CustomIconListItem[]>;
+}
+
+export interface CustomIconsWindow {
+  customIcons?: {
+    [key: string]: CustomIconHelpers;
+  };
+}
+
+const customIconsWindow = window as CustomIconsWindow;
+
+if (!("customIcons" in customIconsWindow)) {
+  customIconsWindow.customIcons = {};
+}
+
+// Proxy for backward compatibility with icon sets
+export const customIcons = new Proxy(customIconsWindow.customIcons!, {
+  get: (obj, prop: string) =>
+    obj[prop] ??
+    (customIconsets[prop]
+      ? {
+          getIcon: customIconsets[prop],
+        }
+      : undefined),
+  has: (obj, prop: string) => prop in obj || prop in customIconsets,
+});
--- a/src/data/custom_iconsets.ts
+++ b/src/data/custom_iconsets.ts
@@ -1,9 +1,6 @@
-export interface CustomIcon {
-  path: string;
-  viewBox?: string;
-}
+import { CustomIcon } from "./custom_icons";

-export interface CustomIconsetsWindow {
+interface CustomIconsetsWindow {
  customIconsets?: { [key: string]: (name: string) => Promise<CustomIcon> };
 }

--- a/src/data/entity_registry.ts
+++ b/src/data/entity_registry.ts
@@ -66,7 +66,7 @@ export const computeEntityRegistryName = (
    return entry.name;
  }
  const state = hass.states[entry.entity_id];
-  return state ? computeStateName(state) : null;
+  return state ? computeStateName(state) : entry.entity_id;
 };

 export const getExtendedEntityRegistryEntry = (
--- a/src/data/hassio/backup.ts
+++ b/src/data/hassio/backup.ts
@@ -79,7 +79,7 @@ export const fetchHassioBackups = async (
 };

 export const fetchHassioBackupInfo = async (
-  hass: HomeAssistant,
+  hass: HomeAssistant | undefined,
  backup: string
 ): Promise<HassioBackupDetail> => {
  if (hass) {
@@ -202,7 +202,7 @@ export const createHassioPartialBackup = async (
 };

 export const uploadBackup = async (
-  hass: HomeAssistant,
+  hass: HomeAssistant | undefined,
  file: File
 ): Promise<HassioResponse<HassioBackup>> => {
  const fd = new FormData();
--- a/src/data/supervisor/supervisor.ts
+++ b/src/data/supervisor/supervisor.ts
@@ -70,6 +70,42 @@ export interface Supervisor {
  localize: LocalizeFunc;
 }

+interface SupervisorBaseAvailableUpdates {
+  panel_path?: string;
+  update_type?: string;
+  version_latest?: string;
+}
+
+interface SupervisorAddonAvailableUpdates
+  extends SupervisorBaseAvailableUpdates {
+  update_type?: "addon";
+  icon?: string;
+  name?: string;
+}
+
+interface SupervisorCoreAvailableUpdates
+  extends SupervisorBaseAvailableUpdates {
+  update_type?: "core";
+}
+
+interface SupervisorOsAvailableUpdates extends SupervisorBaseAvailableUpdates {
+  update_type?: "os";
+}
+
+interface SupervisorSupervisorAvailableUpdates
+  extends SupervisorBaseAvailableUpdates {
+  update_type?: "supervisor";
+}
+
+export type SupervisorAvailableUpdates =
+  | SupervisorAddonAvailableUpdates
+  | SupervisorCoreAvailableUpdates
+  | SupervisorOsAvailableUpdates
+  | SupervisorSupervisorAvailableUpdates;
+
+export interface SupervisorAvailableUpdatesResponse {
+  available_updates: SupervisorAvailableUpdates[];
+}
 export const supervisorApiWsRequest = <T>(
  conn: Connection,
  request: supervisorApiRequest
@@ -139,3 +175,14 @@ export const subscribeSupervisorEvents = (
  getSupervisorEventCollection(hass.connection, key, endpoint).subscribe(
    onChange
  );
+
+export const fetchSupervisorAvailableUpdates = async (
+  hass: HomeAssistant
+): Promise<SupervisorAvailableUpdates[]> =>
+  (
+    await hass.callWS<SupervisorAvailableUpdatesResponse>({
+      type: "supervisor/api",
+      endpoint: "/supervisor/available_updates",
+      method: "get",
+    })
+  ).available_updates;
--- a/src/data/zha.ts
+++ b/src/data/zha.ts
@@ -34,7 +34,7 @@ export interface ZHADevice {
 export interface Neighbor {
  ieee: string;
  nwk: string;
-  lqi: number;
+  lqi: string;
 }

 export interface ZHADeviceEndpoint {
--- a/src/data/zone.ts
+++ b/src/data/zone.ts
@@ -12,7 +12,7 @@ export interface Zone {
 }

 export interface ZoneMutableParams {
-  icon: string;
+  icon?: string;
  latitude: number;
  longitude: number;
  name: string;
--- a/src/dialogs/config-flow/step-flow-pick-flow.ts
+++ b/src/dialogs/config-flow/step-flow-pick-flow.ts
@@ -45,7 +45,7 @@ class StepFlowPickFlow extends LitElement {
                domain: flow.handler,
                type: "icon",
                useFallback: true,
-                darkOptimized: this.hass.selectedTheme?.dark,
+                darkOptimized: this.hass.themes?.darkMode,
              })}
              referrerpolicy="no-referrer"
            />
--- a/src/dialogs/config-flow/step-flow-pick-handler.ts
+++ b/src/dialogs/config-flow/step-flow-pick-handler.ts
@@ -102,7 +102,7 @@ class StepFlowPickHandler extends LitElement {
                        domain: handler.slug,
                        type: "icon",
                        useFallback: true,
-                        darkOptimized: this.hass.selectedTheme?.dark,
+                        darkOptimized: this.hass.themes?.darkMode,
                      })}
                      referrerpolicy="no-referrer"
                    />
--- a/src/dialogs/config-flow/styles.ts
+++ b/src/dialogs/config-flow/styles.ts
@@ -2,7 +2,7 @@ import { css } from "lit";

 export const configFlowContentStyles = css`
  h2 {
-    margin: 24px 0 0;
+    margin: 24px 38px 0 0;
    padding: 0 24px;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
--- a/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts
+++ b/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts
@@ -39,6 +39,7 @@ export class HaImagecropperDialog extends LitElement {
    this._open = false;
    this._params = undefined;
    this._cropper?.destroy();
+    this._cropper = undefined;
  }

  protected updated(changedProperties: PropertyValues) {
--- a/src/dialogs/image-cropper-dialog/show-image-cropper-dialog.ts
+++ b/src/dialogs/image-cropper-dialog/show-image-cropper-dialog.ts
@@ -4,7 +4,7 @@ export interface CropOptions {
  round: boolean;
  type?: "image/jpeg" | "image/png";
  quality?: number;
-  aspectRatio: number;
+  aspectRatio?: number;
 }

 export interface HaImageCropperDialogParams {
--- a/src/dialogs/more-info/controls/more-info-camera.ts
+++ b/src/dialogs/more-info/controls/more-info-camera.ts
@@ -10,7 +10,8 @@ import { property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-camera-stream";
-import { HaCheckbox } from "../../../components/ha-checkbox";
+import type { HaCheckbox } from "../../../components/ha-checkbox";
+import "../../../components/ha-checkbox";
 import {
  CameraEntity,
  CameraPreferences,
@@ -20,6 +21,7 @@ import {
  updateCameraPrefs,
 } from "../../../data/camera";
 import type { HomeAssistant } from "../../../types";
+import "../../../components/ha-formfield";

 class MoreInfoCamera extends LitElement {
  @property({ attribute: false }) public hass?: HomeAssistant;
@@ -54,12 +56,11 @@ class MoreInfoCamera extends LitElement {
      ></ha-camera-stream>
      ${this._cameraPrefs
        ? html`
-            <ha-formfield>
+            <ha-formfield label="Preload stream">
              <ha-checkbox
                .checked=${this._cameraPrefs.preload_stream}
                @change=${this._handleCheckboxChanged}
              >
-                Preload stream
              </ha-checkbox>
            </ha-formfield>
          `
@@ -123,12 +124,12 @@ class MoreInfoCamera extends LitElement {
        display: block;
        position: relative;
      }
-      ha-checkbox {
+      ha-formfield {
        position: absolute;
        top: 0;
        right: 0;
        background-color: var(--secondary-background-color);
-        padding: 5px;
+        padding-right: 16px;
        border-bottom-left-radius: 4px;
      }
    `;
--- a/src/dialogs/more-info/controls/more-info-light.ts
+++ b/src/dialogs/more-info/controls/more-info-light.ts
@@ -209,6 +209,7 @@ class MoreInfoLight extends LitElement {
                ? html`
                    <hr />
                    <ha-paper-dropdown-menu
+                      dynamic-align
                      .label=${this.hass.localize("ui.card.light.effect")}
                    >
                      <paper-listbox
--- a/src/entrypoints/core.ts
+++ b/src/entrypoints/core.ts
@@ -60,10 +60,12 @@ const connProm = async (auth) => {
      searchParams.delete("auth_callback");
      searchParams.delete("code");
      searchParams.delete("state");
+      searchParams.delete("storeToken");
+      const search = searchParams.toString();
      history.replaceState(
        null,
        "",
-        `${location.pathname}?${searchParams.toString()}`
+        `${location.pathname}${search ? `?${search}` : ""}`
      );
    }

--- a/src/html/authorize.html.template
+++ b/src/html/authorize.html.template
@@ -33,7 +33,7 @@
  <body>
    <div class="content">
      <div class="header">
-        <img src="/static/icons/favicon-192x192.png" height="52" />
+        <img src="/static/icons/favicon-192x192.png" height="52" alt="" />
        Home Assistant
      </div>
      <ha-authorize><p>Initializing</p></ha-authorize>
@@ -70,4 +70,4 @@
      })();
    </script>
  </body>
-</html>
+</html>
--- a/src/html/index.html.template
+++ b/src/html/index.html.template
@@ -39,29 +39,64 @@
    <meta name="theme-color" content="#THEMEC" />
    <meta name="color-scheme" content="dark light" />
    <style>
-      #ha-init-skeleton::before {
-        display: block;
-        content: "";
-        height: 56px;
-        background-color: #THEMEC;
-      }
      html {
-        background-color: var(--primary-background-color);
+        background-color: var(--primary-background-color, #fafafa);
+        color: var(--primary-text-color, #212121);
      }
      @media (prefers-color-scheme: dark) {
        html {
-          background-color: #111111;
-          color: #e1e1e1;
-        }
-        #ha-init-skeleton::before {
-          background-color: #1c1c1c;
+          background-color: var(--primary-background-color, #111111);
+          color: var(--primary-text-color, #e1e1e1);
        }
      }
+      body {
+        font-family: Roboto, Noto, sans-serif;
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+        font-weight: 400;
+        height: 100vh;
+        margin: 0;
+        padding: 0;
+      }
+      #ha-launch-screen {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+      }
+      #ha-launch-screen svg {
+        width: 170px;
+        flex-shrink: 0;
+      }
+      #ha-launch-screen .ha-launch-screen-spacer {
+        flex: 1;
+      }
    </style>
  </head>
  <body>
-    <div id="ha-init-skeleton"></div>
-    <home-assistant> </home-assistant>
+    <div id="ha-launch-screen">
+      <div class="ha-launch-screen-spacer"></div>
+      <svg version="1.1" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+        <defs>
+          <path id="a" d="m44.041 343.22v-133.64h-34.753a9.333 9.333 0 0 1-6.655-15.876l187.01-190.21c4.517-4.594 11.903-4.657 16.498-0.14l0.12 0.12 97.601 98.794v-18.297a7.778 7.778 0 0 1 7.778-7.778h32.41a7.778 7.778 0 0 1 7.779 7.778v67.138l41.568 42.618a9.333 9.333 0 0 1-6.682 15.85h-34.886v133.64a7.778 7.778 0 0 1-7.778 7.778h-292.23a7.778 7.778 0 0 1-7.778-7.778zm206.39-163.26a15.029 15.029 0 0 0 1.46-6.486c0-8.308-6.71-15.043-14.989-15.043-8.278 0-14.989 6.735-14.989 15.043s6.711 15.044 14.99 15.044c2.314 0 4.505-0.527 6.462-1.467l21.518 21.596v20.918l-26.981 27.078v-19.84a15.046 15.046 0 0 0 9.993-14.187c0-8.308-6.711-15.044-14.99-15.044-8.278 0-14.99 6.736-14.99 15.044 0 6.55 4.172 12.122 9.994 14.187v29.868l-24.983 25.073v-147.28l20.519-20.592a14.886 14.886 0 0 0 6.462 1.466c8.279 0 14.99-6.735 14.99-15.044 0-8.308-6.711-15.043-14.99-15.043-8.278 0-14.989 6.735-14.989 15.043 0 2.323 0.524 4.522 1.46 6.486l-18.448 18.515-18.449-18.515a15.029 15.029 0 0 0 1.46-6.486c0-8.308-6.71-15.043-14.989-15.043-8.278 0-14.989 6.735-14.989 15.043 0 8.309 6.711 15.044 14.99 15.044 2.314 0 4.505-0.527 6.462-1.466l20.518 20.592v105.16l-35.974-36.104v-28.865a15.046 15.046 0 0 0 9.993-14.187c0-8.309-6.711-15.044-14.99-15.044-8.278 0-14.99 6.735-14.99 15.044 0 6.55 4.172 12.122 9.994 14.187v18.837l-27.98-28.081v-27.863a15.046 15.046 0 0 0 9.993-14.187c0-8.308-6.711-15.044-14.99-15.044-8.278 0-14.99 6.736-14.99 15.044 0 6.55 4.172 12.122 9.994 14.187v32.017l30.907 31.018h-17.77c-2.058-5.843-7.61-10.029-14.137-10.029-8.278 0-14.99 6.735-14.99 15.043 0 8.309 6.712 15.044 14.99 15.044 6.527 0 12.08-4.186 14.137-10.03h27.763l43.04 43.196v75.074l-22.983-23.066v-28.866a15.046 15.046 0 0 0 9.993-14.187c0-8.308-6.711-15.043-14.99-15.043-8.278 0-14.99 6.735-14.99 15.043 0 6.55 4.172 12.122 9.994 14.187v18.837l-33.439-33.558a15.029 15.029 0 0 0 1.461-6.486c0-8.308-6.71-15.043-14.99-15.043-8.278 0-14.989 6.735-14.989 15.043s6.711 15.043 14.99 15.043c2.314 0 4.506-0.526 6.462-1.466l33.439 33.559h-17.77c-2.058-5.843-7.61-10.03-14.137-10.03-8.278 0-14.99 6.736-14.99 15.044s6.712 15.043 14.99 15.043c6.527 0 12.079-4.186 14.137-10.029h27.763l27.98 28.081h14.132l28.98-29.083h26.763c2.058 5.842 7.61 10.028 14.137 10.028 8.278 0 14.99-6.735 14.99-15.043s-6.712-15.043-14.99-15.043c-6.527 0-12.079 4.186-14.137 10.029h-30.902l-26.91 27.006v-32.951l32.049-32.164h51.746c2.058 5.843 7.61 10.029 14.136 10.029 8.279 0 14.99-6.735 14.99-15.043 0-8.309-6.711-15.044-14.99-15.044-6.526 0-12.078 4.186-14.136 10.03h-41.755l29.908-30.016v-25.072l21.517-21.596a14.886 14.886 0 0 0 6.463 1.467c8.278 0 14.99-6.736 14.99-15.044s-6.712-15.043-14.99-15.043-14.99 6.735-14.99 15.043c0 2.323 0.525 4.522 1.461 6.486l-14.451 14.504v-45.917a15.046 15.046 0 0 0 9.993-14.187c0-8.309-6.711-15.044-14.99-15.044-8.278 0-14.99 6.735-14.99 15.044 0 6.55 4.172 12.122 9.994 14.187v45.915l-14.452-14.504zm-129.45 143.95c-3.311 0-5.996-2.694-5.996-6.017s2.685-6.017 5.996-6.017c3.312 0 5.996 2.694 5.996 6.017s-2.684 6.017-5.996 6.017zm43.97-45.13c-3.312 0-5.997-2.694-5.997-6.017s2.685-6.017 5.996-6.017c3.312 0 5.996 2.694 5.996 6.017s-2.684 6.017-5.996 6.017zm-51.964-7.02c-3.312 0-5.996-2.694-5.996-6.017s2.684-6.017 5.996-6.017c3.311 0 5.996 2.694 5.996 6.017s-2.685 6.017-5.996 6.017zm-4.997-50.144c-3.311 0-5.995-2.694-5.995-6.018 0-3.323 2.684-6.017 5.995-6.017 3.312 0 5.996 2.694 5.996 6.017 0 3.324-2.684 6.018-5.996 6.018zm124.91 7.02c-3.311 0-5.995-2.694-5.995-6.017 0-3.324 2.684-6.018 5.995-6.018 3.312 0 5.996 2.694 5.996 6.018 0 3.323-2.684 6.017-5.996 6.017zm67.952 46.133c-3.31 0-5.995-2.694-5.995-6.017 0-3.324 2.684-6.018 5.995-6.018 3.312 0 5.996 2.694 5.996 6.018 0 3.323-2.684 6.017-5.996 6.017zm-25.981 48.138c-3.312 0-5.996-2.694-5.996-6.017s2.684-6.017 5.996-6.017c3.311 0 5.996 2.694 5.996 6.017s-2.685 6.017-5.996 6.017zm27.98-143.41c-3.311 0-5.996-2.695-5.996-6.018s2.685-6.017 5.996-6.017 5.996 2.694 5.996 6.017-2.685 6.018-5.996 6.018zm-32.977-39.113c-3.311 0-5.996-2.694-5.996-6.017 0-3.324 2.685-6.018 5.996-6.018 3.312 0 5.996 2.694 5.996 6.018 0 3.323-2.684 6.017-5.996 6.017zm-39.972-24.07c-3.311 0-5.995-2.693-5.995-6.017 0-3.323 2.684-6.017 5.995-6.017 3.312 0 5.996 2.694 5.996 6.017 0 3.324-2.684 6.018-5.996 6.018zm-63.955 0c-3.31 0-5.995-2.693-5.995-6.017 0-3.323 2.684-6.017 5.995-6.017 3.312 0 5.996 2.694 5.996 6.017 0 3.324-2.684 6.018-5.996 6.018zm-51.963 23.067c-3.311 0-5.996-2.694-5.996-6.017 0-3.324 2.685-6.018 5.996-6.018s5.996 2.694 5.996 6.018c0 3.323-2.685 6.017-5.996 6.017zm37.973 37.107c-3.311 0-5.995-2.694-5.995-6.017 0-3.324 2.684-6.018 5.995-6.018 3.312 0 5.996 2.694 5.996 6.018 0 3.323-2.684 6.017-5.996 6.017zm84.94 3.009c-3.31 0-5.995-2.695-5.995-6.018s2.684-6.017 5.995-6.017c3.312 0 5.996 2.694 5.996 6.017s-2.684 6.018-5.996 6.018z"/>
+        </defs>
+        <g fill="none" fill-rule="evenodd">
+          <rect width="500" height="500" ry="40.911" fill="#41bdf5" fill-rule="evenodd" stroke-width="5.8497"/>
+          <g transform="translate(52 70)">
+          <mask id="b" fill="#fff">
+            <use xlink:href="#a"/>
+          </mask>
+          <g fill="#FFF" mask="url(#b)">
+            <path d="M0 0h396v351H0z"/>
+          </g>
+          </g>
+        </g>
+      </svg>
+      <div id="ha-launch-screen-info-box" class="ha-launch-screen-spacer"></div>
+    </div>
+
+    <home-assistant></home-assistant>

    <%= renderTemplate('_js_base') %>
    <%= renderTemplate('_preload_roboto') %>
--- a/src/html/onboarding.html.template
+++ b/src/html/onboarding.html.template
@@ -64,7 +64,7 @@
  <body id="particles">
    <div class="content">
      <div class="header">
-        <img src="/static/icons/favicon-192x192.png" height="52" width="52" />
+        <img src="/static/icons/favicon-192x192.png" height="52" width="52" alt="" />
        Home Assistant
      </div>

--- a/src/layouts/ha-init-page.ts
+++ b/src/layouts/ha-init-page.ts
@@ -1,43 +1,52 @@
 import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement } from "lit";
-import { property } from "lit/decorators";
-import "../components/ha-circular-progress";
-import { removeInitSkeleton } from "../util/init-skeleton";
+import { property, state } from "lit/decorators";

 class HaInitPage extends LitElement {
  @property({ type: Boolean }) public error = false;

+  @state() showProgressIndicator = false;
+
+  private _showProgressIndicatorTimeout;
+
  protected render() {
-    return html`
-      <div>
-        <img src="/static/icons/favicon-192x192.png" height="192" />
-        ${this.error
-          ? html`
-              <p>Unable to connect to Home Assistant.</p>
-              <mwc-button @click=${this._retry}>Retry</mwc-button>
-              ${location.host.includes("ui.nabu.casa")
-                ? html`
-                    <p>
-                      It is possible that you are seeing this screen because
-                      your Home Assistant is not currently connected. You can
-                      ask it to come online from your
-                      <a href="https://account.nabucasa.com/"
-                        >Naba Casa account page</a
-                      >.
-                    </p>
-                  `
-                : ""}
-            `
-          : html`
-              <ha-circular-progress active></ha-circular-progress>
-              <p>Loading data</p>
-            `}
-      </div>
-    `;
+    return this.error
+      ? html`
+          <p>Unable to connect to Home Assistant.</p>
+          <mwc-button @click=${this._retry}>Retry</mwc-button>
+          ${location.host.includes("ui.nabu.casa")
+            ? html`
+                <p>
+                  It is possible that you are seeing this screen because your
+                  Home Assistant is not currently connected. You can ask it to
+                  come online from your
+                  <a href="https://account.nabucasa.com/"
+                    >Naba Casa account page</a
+                  >.
+                </p>
+              `
+            : ""}
+        `
+      : html`
+          <div id="progress-indicator-wrapper">
+            ${this.showProgressIndicator
+              ? html`<ha-circular-progress active></ha-circular-progress>`
+              : ""}
+          </div>
+          <div id="loading-text">Loading data</div>
+        `;
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    clearTimeout(this._showProgressIndicatorTimeout);
  }

  protected firstUpdated() {
-    removeInitSkeleton();
+    this._showProgressIndicatorTimeout = setTimeout(async () => {
+      await import("../components/ha-circular-progress");
+      this.showProgressIndicator = true;
+    }, 5000);
  }

  private _retry() {
@@ -46,20 +55,23 @@ class HaInitPage extends LitElement {

  static get styles(): CSSResultGroup {
    return css`
-      div {
-        height: 100%;
+      :host {
+        flex: 0;
        display: flex;
        flex-direction: column;
-        justify-content: center;
        align-items: center;
      }
-      ha-circular-progress {
-        margin-top: 9px;
+      #progress-indicator-wrapper {
+        display: flex;
+        align-items: center;
+        margin: 25px 0;
+        height: 50px;
      }
      a {
        color: var(--primary-color);
      }
-      p {
+      p,
+      #loading-text {
        max-width: 350px;
        color: var(--primary-text-color);
      }
@@ -68,3 +80,9 @@ class HaInitPage extends LitElement {
 }

 customElements.define("ha-init-page", HaInitPage);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-init-page": HaInitPage;
+  }
+}
--- a/src/layouts/home-assistant-main.ts
+++ b/src/layouts/home-assistant-main.ts
@@ -88,6 +88,7 @@ class HomeAssistantMain extends LitElement {
          <ha-sidebar
            .hass=${hass}
            .narrow=${sidebarNarrow}
+            .route=${this.route}
            .editMode=${this._sidebarEditMode}
            .alwaysExpand=${sidebarNarrow ||
            this.hass.dockedSidebar === "docked"}
--- a/src/layouts/home-assistant.ts
+++ b/src/layouts/home-assistant.ts
@@ -8,6 +8,10 @@ import { HassElement } from "../state/hass-element";
 import QuickBarMixin from "../state/quick-bar-mixin";
 import { HomeAssistant, Route } from "../types";
 import { storeState } from "../util/ha-pref-storage";
+import {
+  renderLaunchScreenInfoBox,
+  removeLaunchScreen,
+} from "../util/launch-screen";
 import {
  registerServiceWorker,
  supportsServiceWorker,
@@ -40,6 +44,8 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {

  private _visiblePromiseResolve?: () => void;

+  private _visibleLaunchScreen = true;
+
  constructor() {
    super();
    const path = curPath();
@@ -55,16 +61,26 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
  }

  protected render() {
-    const hass = this.hass;
+    if (this._isHassComplete() && this.hass) {
+      return html`
+        <home-assistant-main
+          .hass=${this.hass}
+          .route=${this._route}
+        ></home-assistant-main>
+      `;
+    }

-    return hass && hass.states && hass.config && hass.services
-      ? html`
-          <home-assistant-main
-            .hass=${this.hass}
-            .route=${this._route}
-          ></home-assistant-main>
-        `
-      : html`<ha-init-page .error=${this._error}></ha-init-page>`;
+    return "";
+  }
+
+  update(changedProps) {
+    super.update(changedProps);
+
+    // Remove launch screen if main gui is loaded
+    if (this._isHassComplete() && this._visibleLaunchScreen) {
+      this._visibleLaunchScreen = false;
+      removeLaunchScreen();
+    }
  }

  protected firstUpdated(changedProps) {
@@ -109,6 +125,13 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
        navigate(href);
      }
    });
+
+    // Render launch screen info box (loading data / error message)
+    if (!this._isHassComplete() && this._visibleLaunchScreen) {
+      renderLaunchScreenInfoBox(
+        html`<ha-init-page .error=${this._error}></ha-init-page>`
+      );
+    }
  }

  protected updated(changedProps: PropertyValues): void {
@@ -229,6 +252,14 @@ export class HomeAssistantAppEl extends QuickBarMixin(HassElement) {
      this._visiblePromiseResolve = undefined;
    }
  }
+
+  private _isHassComplete(): boolean {
+    if (this.hass?.states && this.hass.config && this.hass.services) {
+      return true;
+    }
+
+    return false;
+  }
 }

 declare global {
--- a/src/layouts/partial-panel-resolver.ts
+++ b/src/layouts/partial-panel-resolver.ts
@@ -11,7 +11,7 @@ import { deepEqual } from "../common/util/deep-equal";
 import { getDefaultPanel } from "../data/panel";
 import { CustomPanelInfo } from "../data/panel_custom";
 import { HomeAssistant, Panels } from "../types";
-import { removeInitSkeleton } from "../util/init-skeleton";
+import { removeLaunchScreen } from "../util/launch-screen";
 import {
  HassRouterPage,
  RouteOptions,
@@ -226,7 +226,7 @@ class PartialPanelResolver extends HassRouterPage {
    ) {
      await this.rebuild();
      await this.pageRendered;
-      removeInitSkeleton();
+      removeLaunchScreen();
    }
  }
 }
--- a/src/onboarding/onboarding-core-config.ts
+++ b/src/onboarding/onboarding-core-config.ts
@@ -2,13 +2,16 @@ import "@material/mwc-button/mwc-button";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import type { LocalizeFunc } from "../common/translations/localize";
 import { createCurrencyListEl } from "../components/currency-datalist";
 import "../components/map/ha-locations-editor";
-import type { MarkerLocation } from "../components/map/ha-locations-editor";
+import type {
+  HaLocationsEditor,
+  MarkerLocation,
+} from "../components/map/ha-locations-editor";
 import { createTimezoneListEl } from "../components/timezone-datalist";
 import {
  ConfigUpdateValues,
@@ -25,6 +28,7 @@ import type { HaRadio } from "../components/ha-radio";

 const amsterdam: [number, number] = [52.3731339, 4.8903147];
 const mql = matchMedia("(prefers-color-scheme: dark)");
+const locationMarkerId = "location";

@customElement("onboarding-core-config")
 class OnboardingCoreConfig extends LitElement {
@@ -46,6 +50,8 @@ class OnboardingCoreConfig extends LitElement {

  @state() private _timeZone?: string;

+  @query("ha-locations-editor", true) private map!: HaLocationsEditor;
+
  protected render(): TemplateResult {
    return html`
      <p>
@@ -268,7 +274,7 @@ class OnboardingCoreConfig extends LitElement {
  private _markerLocation = memoizeOne(
    (location: [number, number]): MarkerLocation[] => [
      {
-        id: "location",
+        id: locationMarkerId,
        latitude: location[0],
        longitude: location[1],
        location_editable: true,
@@ -304,6 +310,15 @@ class OnboardingCoreConfig extends LitElement {
      const values = await detectCoreConfig(this.hass);

      if (values.latitude && values.longitude) {
+        this.map.addEventListener(
+          "markers-updated",
+          () => {
+            this.map.fitMarker(locationMarkerId);
+          },
+          {
+            once: true,
+          }
+        );
        this._location = [Number(values.latitude), Number(values.longitude)];
      }
      if (values.elevation) {
--- a/src/onboarding/onboarding-create-user.ts
+++ b/src/onboarding/onboarding-create-user.ts
@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-input/paper-input";
 import { genClientId } from "home-assistant-js-websocket";
 import {
  css,
@@ -9,168 +8,116 @@ import {
  PropertyValues,
  TemplateResult,
 } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { LocalizeFunc } from "../common/translations/localize";
+import "../components/ha-form/ha-form";
+import type { HaForm } from "../components/ha-form/ha-form";
+import { HaFormDataContainer, HaFormSchema } from "../components/ha-form/types";
 import { onboardUserStep } from "../data/onboarding";
 import { PolymerChangedEvent } from "../polymer-types";

+const CREATE_USER_SCHEMA: HaFormSchema[] = [
+  { type: "string", name: "name", required: true },
+  { type: "string", name: "username", required: true },
+  { type: "string", name: "password", required: true },
+  { type: "string", name: "password_confirm", required: true },
+];
+
@customElement("onboarding-create-user")
 class OnboardingCreateUser extends LitElement {
  @property() public localize!: LocalizeFunc;

  @property() public language!: string;

-  @state() private _name = "";
-
-  @state() private _username = "";
-
-  @state() private _password = "";
-
-  @state() private _passwordConfirm = "";
-
  @state() private _loading = false;

-  @state() private _errorMsg?: string = undefined;
+  @state() private _errorMsg?: string;
+
+  @state() private _formError: Record<string, string> = {};
+
+  @state() private _newUser: HaFormDataContainer = {};
+
+  @query("ha-form", true) private _form?: HaForm;

  protected render(): TemplateResult {
    return html`
-    <p>
-      ${this.localize("ui.panel.page-onboarding.intro")}
-    </p>
+      <p>${this.localize("ui.panel.page-onboarding.intro")}</p>
+      <p>${this.localize("ui.panel.page-onboarding.user.intro")}</p>

-    <p>
-      ${this.localize("ui.panel.page-onboarding.user.intro")}
-    </p>
+      ${this._errorMsg
+        ? html`<ha-alert alert-type="error">${this._errorMsg}</ha-alert>`
+        : ""}

-    ${
-      this._errorMsg
-        ? html`
-            <p class="error">
-              ${this.localize(
-                `ui.panel.page-onboarding.user.error.${this._errorMsg}`
-              ) || this._errorMsg}
-            </p>
-          `
-        : ""
-    }
-
-    <form>
-      <paper-input
-        name="name"
-        label=${this.localize("ui.panel.page-onboarding.user.data.name")}
-        .value=${this._name}
+      <ha-form
+        .computeLabel=${this._computeLabel(this.localize)}
+        .data=${this._newUser}
+        .disabled=${this._loading}
+        .error=${this._formError}
+        .schema=${CREATE_USER_SCHEMA}
        @value-changed=${this._handleValueChanged}
-        required
-        auto-validate
-        autocapitalize='on'
-        .errorMessage=${this.localize(
-          "ui.panel.page-onboarding.user.required_field"
-        )}
-        @blur=${this._maybePopulateUsername}
-      ></paper-input>
+      ></ha-form>

-      <paper-input
-        name="username"
-        label=${this.localize("ui.panel.page-onboarding.user.data.username")}
-        value=${this._username}
-        @value-changed=${this._handleValueChanged}
-        required
-        auto-validate
-        autocapitalize='none'
-        .errorMessage=${this.localize(
-          "ui.panel.page-onboarding.user.required_field"
-        )}
-      ></paper-input>
-
-      <paper-input
-        name="password"
-        label=${this.localize("ui.panel.page-onboarding.user.data.password")}
-        value=${this._password}
-        @value-changed=${this._handleValueChanged}
-        required
-        type='password'
-        auto-validate
-        .errorMessage=${this.localize(
-          "ui.panel.page-onboarding.user.required_field"
-        )}
-      ></paper-input>
-
-      <paper-input
-        name="passwordConfirm"
-        label=${this.localize(
-          "ui.panel.page-onboarding.user.data.password_confirm"
-        )}
-        value=${this._passwordConfirm}
-        @value-changed=${this._handleValueChanged}
-        required
-        type='password'
-        .invalid=${
-          this._password !== "" &&
-          this._passwordConfirm !== "" &&
-          this._passwordConfirm !== this._password
-        }
-        .errorMessage=${this.localize(
-          "ui.panel.page-onboarding.user.error.password_not_match"
-        )}
-      ></paper-input>
-
-      <p class="action">
-        <mwc-button
-          raised
-          @click=${this._submitForm}
-          .disabled=${this._loading}
-        >
-          ${this.localize("ui.panel.page-onboarding.user.create_account")}
-        </mwc-button>
-      </p>
-    </div>
-  </form>
-`;
+      <mwc-button
+        raised
+        @click=${this._submitForm}
+        .disabled=${this._loading ||
+        !this._newUser.name ||
+        !this._newUser.username ||
+        !this._newUser.password}
+      >
+        ${this.localize("ui.panel.page-onboarding.user.create_account")}
+      </mwc-button>
+    `;
  }

  protected firstUpdated(changedProps: PropertyValues) {
    super.firstUpdated(changedProps);
-    setTimeout(
-      () => this.shadowRoot!.querySelector("paper-input")!.focus(),
-      100
-    );
+    setTimeout(() => this._form?.focus(), 100);
    this.addEventListener("keypress", (ev) => {
-      if (ev.keyCode === 13) {
+      if (
+        ev.keyCode === 13 &&
+        this._newUser.name &&
+        this._newUser.username &&
+        this._newUser.password &&
+        this._newUser.password_confirm
+      ) {
        this._submitForm(ev);
      }
    });
  }

-  private _handleValueChanged(ev: PolymerChangedEvent<string>): void {
-    const name = (ev.target as any).name;
-    this[`_${name}`] = ev.detail.value;
+  private _computeLabel(localize) {
+    return (schema: HaFormSchema) =>
+      localize(`ui.panel.page-onboarding.user.data.${schema.name}`);
+  }
+
+  private _handleValueChanged(
+    ev: PolymerChangedEvent<HaFormDataContainer>
+  ): void {
+    this._newUser = ev.detail.value;
+    this._maybePopulateUsername();
+    this._formError.password_confirm =
+      this._newUser.password !== this._newUser.password_confirm
+        ? this.localize(
+            "ui.panel.page-onboarding.user.error.password_not_match"
+          )
+        : "";
  }

  private _maybePopulateUsername(): void {
-    if (this._username) {
+    if (!this._newUser.name || this._newUser.name === this._newUser.username) {
      return;
    }

-    const parts = this._name.split(" ");
-
+    const parts = String(this._newUser.name).split(" ");
    if (parts.length) {
-      this._username = parts[0].toLowerCase();
+      this._newUser.username = parts[0].toLowerCase();
    }
  }

  private async _submitForm(ev): Promise<void> {
    ev.preventDefault();
-    if (!this._name || !this._username || !this._password) {
-      this._errorMsg = "required_fields";
-      return;
-    }
-
-    if (this._password !== this._passwordConfirm) {
-      this._errorMsg = "password_not_match";
-      return;
-    }
-
    this._loading = true;
    this._errorMsg = "";

@@ -179,9 +126,9 @@ class OnboardingCreateUser extends LitElement {

      const result = await onboardUserStep({
        client_id: clientId,
-        name: this._name,
-        username: this._username,
-        password: this._password,
+        name: String(this._newUser.name),
+        username: String(this._newUser.username),
+        password: String(this._newUser.password),
        language: this.language,
      });

@@ -199,13 +146,11 @@ class OnboardingCreateUser extends LitElement {

  static get styles(): CSSResultGroup {
    return css`
-      .error {
-        color: red;
-      }
-
-      .action {
-        margin: 32px 0 16px;
+      mwc-button {
+        margin: 32px 0 0;
        text-align: center;
+        display: block;
+        text-align: right;
      }
    `;
  }
--- a/src/onboarding/onboarding-integrations.ts
+++ b/src/onboarding/onboarding-integrations.ts
@@ -81,7 +81,7 @@ class OnboardingIntegrations extends LitElement {
              .domain=${entry.domain}
              .title=${title}
              .badgeIcon=${mdiCheck}
-              .darkOptimizedIcon=${this.hass.selectedTheme?.dark}
+              .darkOptimizedIcon=${this.hass.themes?.darkMode}
            ></integration-badge>
          `,
        ];
@@ -98,7 +98,7 @@ class OnboardingIntegrations extends LitElement {
                clickable
                .domain=${flow.handler}
                .title=${title}
-                .darkOptimizedIcon=${this.hass.selectedTheme?.dark}
+                .darkOptimizedIcon=${this.hass.themes?.darkMode}
              ></integration-badge>
            </button>
          `,
--- a/src/panels/config/areas/dialog-area-registry-detail.ts
+++ b/src/panels/config/areas/dialog-area-registry-detail.ts
@@ -3,19 +3,31 @@ import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
-import { navigate } from "../../../common/navigate";
-import "../../../components/ha-dialog";
+import { createCloseHeading } from "../../../components/ha-dialog";
+import "../../../components/ha-alert";
+import "../../../components/ha-picture-upload";
+import type { HaPictureUpload } from "../../../components/ha-picture-upload";
 import { AreaRegistryEntryMutableParams } from "../../../data/area_registry";
+import { CropOptions } from "../../../dialogs/image-cropper-dialog/show-image-cropper-dialog";
 import { PolymerChangedEvent } from "../../../polymer-types";
 import { haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import { AreaRegistryDetailDialogParams } from "./show-dialog-area-registry-detail";

+const cropOptions: CropOptions = {
+  round: false,
+  type: "image/jpeg",
+  quality: 0.75,
+  aspectRatio: 1.78,
+};
+
 class DialogAreaDetail extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

  @state() private _name!: string;

+  @state() private _picture!: string | null;
+
  @state() private _error?: string;

  @state() private _params?: AreaRegistryDetailDialogParams;
@@ -28,6 +40,7 @@ class DialogAreaDetail extends LitElement {
    this._params = params;
    this._error = undefined;
    this._name = this._params.entry ? this._params.entry.name : "";
+    this._picture = this._params.entry?.picture || null;
    await this.updateComplete;
  }

@@ -47,12 +60,17 @@ class DialogAreaDetail extends LitElement {
      <ha-dialog
        open
        @closed=${this.closeDialog}
-        .heading=${entry
-          ? entry.name
-          : this.hass.localize("ui.panel.config.areas.editor.default_name")}
+        .heading=${createCloseHeading(
+          this.hass,
+          entry
+            ? entry.name
+            : this.hass.localize("ui.panel.config.areas.editor.default_name")
+        )}
      >
        <div>
-          ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
+          ${this._error
+            ? html` <ha-alert alert-type="error">${this._error}</ha-alert> `
+            : ""}
          <div class="form">
            ${entry
              ? html`
@@ -75,6 +93,13 @@ class DialogAreaDetail extends LitElement {
              )}
              .invalid=${nameInvalid}
            ></paper-input>
+            <ha-picture-upload
+              .hass=${this.hass}
+              .value=${this._picture}
+              crop
+              .cropOptions=${cropOptions}
+              @change=${this._pictureChanged}
+            ></ha-picture-upload>
          </div>
        </div>
        ${entry
@@ -117,18 +142,24 @@ class DialogAreaDetail extends LitElement {
    this._name = ev.detail.value;
  }

+  private _pictureChanged(ev: PolymerChangedEvent<string | null>) {
+    this._error = undefined;
+    this._picture = (ev.target as HaPictureUpload).value;
+  }
+
  private async _updateEntry() {
    this._submitting = true;
    try {
      const values: AreaRegistryEntryMutableParams = {
        name: this._name.trim(),
+        picture: this._picture,
      };
      if (this._params!.entry) {
        await this._params!.updateEntry!(values);
      } else {
        await this._params!.createEntry!(values);
      }
-      this._params = undefined;
+      this.closeDialog();
    } catch (err: any) {
      this._error =
        err.message ||
@@ -142,13 +173,11 @@ class DialogAreaDetail extends LitElement {
    this._submitting = true;
    try {
      if (await this._params!.removeEntry!()) {
-        this._params = undefined;
+        this.closeDialog();
      }
    } finally {
      this._submitting = false;
    }
-
-    navigate("/config/areas/dashboard");
  }

  static get styles(): CSSResultGroup {
@@ -158,9 +187,6 @@ class DialogAreaDetail extends LitElement {
        .form {
          padding-bottom: 24px;
        }
-        .error {
-          color: var(--error-color);
-        }
      `,
    ];
  }
--- a/src/panels/config/areas/ha-config-area-page.ts
+++ b/src/panels/config/areas/ha-config-area-page.ts
@@ -1,13 +1,17 @@
 import "@material/mwc-button";
-import { mdiCog } from "@mdi/js";
+import "@polymer/paper-item/paper-item";
+import "@polymer/paper-item/paper-item-body";
+import { mdiImagePlus, mdiPencil } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { computeStateName } from "../../../common/entity/compute_state_name";
+import { afterNextRender } from "../../../common/util/render-status";
 import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-icon-next";
 import {
  AreaRegistryEntry,
  deleteAreaRegistryEntry,
@@ -134,25 +138,59 @@ class HaConfigAreaPage extends LitElement {
        .tabs=${configSections.integrations}
        .route=${this.route}
      >
-        ${this.narrow ? html` <span slot="header"> ${area.name} </span> ` : ""}
-
-        <ha-icon-button
-          slot="toolbar-icon"
-          .path=${mdiCog}
-          .entry=${area}
-          @click=${this._showSettings}
-          .label=${this.hass.localize("ui.panel.config.areas.edit_settings")}
-        ></ha-icon-button>
+        ${this.narrow
+          ? html`<span slot="header"> ${area.name} </span>
+              <ha-icon-button
+                .path=${mdiPencil}
+                .entry=${area}
+                @click=${this._showSettings}
+                slot="toolbar-icon"
+                .label=${this.hass.localize(
+                  "ui.panel.config.areas.edit_settings"
+                )}
+              ></ha-icon-button>`
+          : ""}

        <div class="container">
          ${!this.narrow
            ? html`
                <div class="fullwidth">
-                  <h1>${area.name}</h1>
+                  <h1>
+                    ${area.name}
+                    <ha-icon-button
+                      .path=${mdiPencil}
+                      .entry=${area}
+                      @click=${this._showSettings}
+                      .label=${this.hass.localize(
+                        "ui.panel.config.areas.edit_settings"
+                      )}
+                    ></ha-icon-button>
+                  </h1>
                </div>
              `
            : ""}
          <div class="column">
+            ${area.picture
+              ? html`<div class="img-container">
+                  <img src=${area.picture} /><ha-icon-button
+                    .path=${mdiPencil}
+                    .entry=${area}
+                    @click=${this._showSettings}
+                    .label=${this.hass.localize(
+                      "ui.panel.config.areas.edit_settings"
+                    )}
+                    class="img-edit-btn"
+                  ></ha-icon-button>
+                </div>`
+              : html`<mwc-button
+                  .entry=${area}
+                  @click=${this._showSettings}
+                  .label=${this.hass.localize(
+                    "ui.panel.config.areas.add_picture"
+                  )}
+                >
+                  <ha-svg-icon .path=${mdiImagePlus} slot="icon"></ha-svg-icon>
+                </mwc-button>`}
            <ha-card
              .header=${this.hass.localize("ui.panel.config.devices.caption")}
              >${devices.length
@@ -181,7 +219,8 @@ class HaConfigAreaPage extends LitElement {
              .header=${this.hass.localize(
                "ui.panel.config.areas.editor.linked_entities_caption"
              )}
-              >${entities.length
+            >
+              ${entities.length
                ? entities.map(
                    (entity) =>
                      html`
@@ -390,6 +429,7 @@ class HaConfigAreaPage extends LitElement {

        try {
          await deleteAreaRegistryEntry(this.hass!, entry!.area_id);
+          afterNextRender(() => history.back());
          return true;
        } catch (err: any) {
          return false;
@@ -403,7 +443,7 @@ class HaConfigAreaPage extends LitElement {
      haStyle,
      css`
        h1 {
-          margin-top: 0;
+          margin: 0;
          font-family: var(--paper-font-headline_-_font-family);
          -webkit-font-smoothing: var(
            --paper-font-headline_-_-webkit-font-smoothing
@@ -413,6 +453,13 @@ class HaConfigAreaPage extends LitElement {
          letter-spacing: var(--paper-font-headline_-_letter-spacing);
          line-height: var(--paper-font-headline_-_line-height);
          opacity: var(--dark-primary-opacity);
+          display: flex;
+          align-items: center;
+        }
+
+        img {
+          border-radius: var(--ha-card-border-radius, 4px);
+          width: 100%;
        }

        .container {
@@ -458,6 +505,34 @@ class HaConfigAreaPage extends LitElement {
        paper-item.no-link {
          cursor: default;
        }
+
+        ha-card > a:first-child {
+          display: block;
+        }
+        ha-card > *:first-child {
+          margin-top: -16px;
+        }
+        .img-container {
+          position: relative;
+        }
+        .img-edit-btn {
+          position: absolute;
+          top: 4px;
+          right: 4px;
+          display: none;
+        }
+        .img-container:hover .img-edit-btn {
+          display: block;
+        }
+        .img-edit-btn::before {
+          content: "";
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          background-color: var(--card-background-color);
+          opacity: 0.5;
+          border-radius: 50%;
+        }
      `,
    ];
  }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Ludeeus	82240a3b79	Move icon slot and adjust styles	2021-11-21 10:23:16 +00:00
Ludeeus	a8adf17f9d	adjust	2021-11-18 21:04:16 +00:00
Ludeeus	25f90f5453	Add background to ha-svg-icon	2021-11-18 18:39:17 +00:00
Joakim Sørensen	91b009af79	Fix back button color (#10650 )	2021-11-18 18:57:15 +01:00
Paulus Schoutsen	1ebd2fb9f1	Bumped version to 20211117.0	2021-11-17 10:54:08 -08:00
Zack Barett	4684979ae7	Area Card (#10141 ) Co-authored-by: Philip Allgaier <mail@spacegaier.de> Co-authored-by: Bram Kragten <mail@bramkragten.nl> Co-authored-by: Paulus Schoutsen <balloob@gmail.com>	2021-11-17 19:43:41 +01:00
Joakim Sørensen	a567312bdb	Show updates on dashboard for dev (#10637 )	2021-11-17 18:39:16 +00:00
Joakim Sørensen	1e851e0e8c	Remove customize UI (#10632 )	2021-11-17 10:34:20 -08:00
Bram Kragten	7d94615f47	Cast fixes (#10598 )	2021-11-17 10:33:15 -08:00
Bram Kragten	582fab7ea1	Update Lovelace Cast app ID (#10592 )	2021-11-17 10:32:15 -08:00
Philip Allgaier	822590ec8a	Add correct button label to "no_state" statistics fix dialog (#10628 )	2021-11-17 10:22:34 -08:00
Joakim Sørensen	e9f0967578	Move updates (#10626 )	2021-11-17 10:21:27 -08:00
Joakim Sørensen	481da19c74	Fix datatable checkbox width (#10631 )	2021-11-16 19:46:41 +01:00
Joakim Sørensen	b969db0c0f	Use ha-form for onboarding-create-user (#10604 )	2021-11-15 14:21:29 -08:00
Joakim Sørensen	a6b98fc3c3	Add markers-updated to ha-locations-editor (#10601 )	2021-11-15 14:11:42 -08:00
Joakim Sørensen	87c2046ab5	Remove add-on store tab (#10624 )	2021-11-15 09:15:20 -08:00
David F. Mulcahey	4b992fb0c4	Correct ZHA LQI sort in device children dialog (#10616 )	2021-11-15 09:11:31 -08:00
Lasse Rosenow	3154011c65	Improve startup experience by removing AppBar skeleton (#10569 )	2021-11-15 07:54:59 -08:00
Bram Kragten	4e68383cf7	Remove deprecated icons (#10622 )	2021-11-15 11:54:59 +01:00
Michael Irigoyen	db6ef22ebb	Update MDI to v6.5.95 (#10618 )	2021-11-15 09:49:53 +01:00
Allen Porter	c238c7dbbc	WebRTC fix for Safari (#10602 )	2021-11-11 10:48:56 +01:00
Bram Kragten	d04823b4c5	Update image-cropper-dialog.ts	2021-11-10 22:55:05 +01:00
Bram Kragten	4cb45d6313	Add picture uploader to area (#10544 )	2021-11-10 21:42:43 +01:00
Bram Kragten	6623e5f017	Fix thingktalk dialog (#10600 )	2021-11-10 19:36:18 +00:00
Bram Kragten	6518aefb7f	Prevent cast timeout after 10 mins, show current shown Lovelace view (#10586 )	2021-11-09 21:53:40 +01:00
Bram Kragten	d5600b7c08	Bumped version to 20211109.0	2021-11-09 21:42:04 +01:00
Philip Allgaier	4789295d32	Add CSS var for `ha-dialog` border radius (#10424 )	2021-11-09 17:24:39 +01:00
Philip Allgaier	70d54aa855	Ensure theme picker row uses correct theme name (#10589 )	2021-11-09 17:22:48 +01:00
Bram Kragten	77549efc47	Bump codemirror (#10588 )	2021-11-09 16:10:42 +01:00
Bram Kragten	00299bc74d	Fix multi select ha-form (#10585 )	2021-11-09 16:10:26 +01:00
Philip Allgaier	b74fc5578d	Consistently show a close button for config dialogs (#10587 )	2021-11-09 13:52:56 +00:00
Bram Kragten	9018d4cc18	Update translations	2021-11-08 19:58:29 +01:00
Bram Kragten	fcdceba09d	Bumped version to 20211108.0	2021-11-08 18:30:59 +01:00
Bram Kragten	06d4ccf344	Allow create zone without icon + add icon picker (#10447 )	2021-11-08 09:29:10 -08:00
Bram Kragten	a268040ae7	Fix datetime polyfill for latest build (#10572 )	2021-11-08 09:28:27 -08:00
Bram Kragten	67d79d618a	Allow to input decimal in ha-form-float (#10575 )	2021-11-08 09:28:17 -08:00
Philip Allgaier	0e8a06e24d	Use correct darkMode flag for image variant selection (#10574 )	2021-11-08 11:41:17 +01:00
rianadon	d7732ee850	Improve accessibility on login page (#9731 )	2021-11-08 10:29:34 +01:00
H. Árkosi Róbert	729a928cfe	Update connectivity icons (#10558 )	2021-11-08 10:27:08 +01:00
Paulus Schoutsen	fe5a582a74	Filter out entities when expanding device in target (#10570 )	2021-11-08 10:22:52 +01:00
Bram Kragten	c26a59d805	Format timestamp sensor states (#10525 )	2021-11-05 12:01:14 +01:00
chriss158	ea331dbe0b	Fix cut off slider value (#10250 )	2021-11-05 11:55:03 +01:00
Bram Kragten	b97d6d7059	Play dummy media to prevent app from closing (#10531 )	2021-11-04 10:12:07 -07:00
Bram Kragten	9425b943dd	Add separate cast media entrypoint (with ES5) (#10527 )	2021-11-04 10:09:21 -07:00
Joakim Sørensen	3fd0becfd4	Update registry dialog (#10524 )	2021-11-04 13:47:53 +01:00
Joakim Sørensen	12ef191a0f	Handle missing hass with backup upload during onboarding (#10523 )	2021-11-04 13:47:30 +01:00
Marius	2bbb4acf3d	change switch icon to mdiToggleSwitch (#10475 ) Co-authored-by: Bram Kragten <mail@bramkragten.nl>	2021-11-04 13:37:38 +01:00
Marius	77d54df007	Add Bluetooth source_type icon (#10507 ) Co-authored-by: Bram Kragten <mail@bramkragten.nl>	2021-11-04 12:18:36 +01:00
Zack Barett	1c35571ef0	Fix Device Page (#10513 )	2021-11-04 10:41:30 +01:00
Bram Kragten	c8804160bf	Add basic support for button entity (#10504 )	2021-11-03 15:38:52 -07:00
Marius	0a6ffb6bc8	change device_tracker icon to reflect state (#10501 ) Co-authored-by: Bram Kragten <mail@bramkragten.nl>	2021-11-03 11:59:39 +01:00
Bram Kragten	6984f19aa0	Bumped version to 20211103.0	2021-11-03 10:35:17 +01:00
Paulus Schoutsen	cb8de53d74	Dynamic align light effects dropdown (#10503 )	2021-11-02 15:46:26 +00:00
Simone Chemelli	93680b9764	Improve icons for plant status card (#10493 )	2021-11-02 13:34:46 +01:00
Bram Kragten	3cf9b745b5	Add more domains to sensor group, strip device name from disabled entities (#10490 )	2021-11-01 15:55:55 +01:00
Nico Hirsch	5851fe26ff	dialog-backdrop-filter fix for Safari (#10485 )	2021-11-01 11:48:56 +01:00
Josh McCarty	b188c4ec81	Measurement number format (#10459 )	2021-11-01 09:32:22 +01:00
Bram Kragten	4624c3d75b	Fix missing import (#10456 )	2021-10-28 20:53:49 -05:00
Bram Kragten	7d196b4b95	Bumped version to 20211028.0	2021-10-28 20:06:14 +02:00
Bram Kragten	6347e44d94	Energy: Dont shrink today button (#10451 )	2021-10-28 20:03:28 +02:00
Allen Porter	719d9386c5	Render Nest battery cam vertical video on screen correctly (#10431 ) Co-authored-by: Bram Kragten <mail@bramkragten.nl>	2021-10-28 18:02:06 +00:00
Bram Kragten	bb734be4bc	Remove keep logged in query string after login, dont show on select_mfa_module step (#10439 )	2021-10-28 19:05:30 +02:00
Bram Kragten	7cadaf1dc3	Use min value instead of hard coded 0 (#10443 )	2021-10-28 17:16:09 +02:00
Bram Kragten	c30453a86f	Fix title though close button in config/options flow (#10444 )	2021-10-28 17:15:55 +02:00
Bram Kragten	c2e3d0188e	Update translations	2021-10-28 17:06:48 +02:00
Bram Kragten	aabb8ea16f	Fix camera more info pre load toggle (#10442 )	2021-10-28 16:03:08 +02:00
Paul Bottein	df572d59c5	Custom iconsets in Icon Picker (#10399 ) Co-authored-by: Bram Kragten <mail@bramkragten.nl>	2021-10-28 13:28:14 +00:00
Allen Porter	5ef7a37c20	Fix for Nest WebRTC cams to not require stream component (#10432 )	2021-10-28 13:47:15 +02:00
Paulus Schoutsen	4b44e197ae	ha-form-integer to only show slider if < 256 steps (#10430 )	2021-10-28 13:44:25 +02:00
Joakim Sørensen	8b5b21ae69	Fix icon overrides in logbook (#10434 )	2021-10-28 13:43:14 +02:00
Joakim Sørensen	f5417fad6f	Fix alignment in card editor elements (#10428 )	2021-10-28 13:39:18 +02:00
Philip Allgaier	7fa6317f5c	Invert "update" binary sensor device class color (#10427 )	2021-10-28 11:50:52 +02:00
Paul Bottein	74533cebc6	Use tags and aliases when filtering icons in Icon Picker (#10425 )	2021-10-27 20:12:12 +00:00