Fix for displaying time left for values > 24 hour

2025-08-31 12:00:26 +00:00 · 2020-07-27 19:04:25 +02:00
294 changed files with 5193 additions and 18154 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,7 +1,7 @@
 {
  "extends": [
-    "airbnb-typescript/base",
    "plugin:@typescript-eslint/recommended",
+    "airbnb-typescript/base",
    "plugin:wc/recommended",
    "plugin:lit/recommended",
    "prettier",
@@ -45,16 +45,16 @@
    "func-names": 0,
    "prefer-arrow-callback": 0,
    "no-underscore-dangle": 0,
+    "no-var": 0,
    "strict": 0,
    "prefer-spread": 0,
    "no-plusplus": 0,
-    "no-bitwise": 2,
+    "no-bitwise": 0,
    "comma-dangle": 0,
    "vars-on-top": 0,
    "no-continue": 0,
    "no-param-reassign": 0,
    "no-multi-assign": 0,
-    "no-console": 2,
    "radix": 0,
    "no-alert": 0,
    "no-return-await": 0,
--- a/build-scripts/removedIcons.json
+++ b/build-scripts/removedIcons.json
@@ -147,10 +147,6 @@
    "path": "M21.11,18.5C20.97,18.5 20.83,18.44 20.71,18.36C20.37,18.13 20.28,17.68 20.5,17.34C21.18,16.34 21.54,15.16 21.54,13.93C21.54,12.71 21.18,11.53 20.5,10.5C20.28,10.18 20.37,9.73 20.71,9.5C21.04,9.28 21.5,9.37 21.72,9.7C22.56,10.95 23,12.41 23,13.93C23,15.45 22.56,16.91 21.72,18.16C21.58,18.37 21.35,18.5 21.11,18.5M19,17.29C18.88,17.29 18.74,17.25 18.61,17.17C18.28,16.94 18.19,16.5 18.42,16.15C18.86,15.5 19.1,14.73 19.1,13.93C19.1,13.14 18.86,12.37 18.42,11.71C18.19,11.37 18.28,10.92 18.61,10.69C18.95,10.47 19.4,10.55 19.63,10.89C20.24,11.79 20.56,12.84 20.56,13.93C20.56,15 20.24,16.07 19.63,16.97C19.5,17.18 19.25,17.29 19,17.29M14.9,15.73C15.89,15.73 16.7,14.92 16.7,13.93C16.7,13.17 16.22,12.5 15.55,12.25C15.5,12.55 15.43,12.85 15.34,13.14C15.23,13.44 14.95,13.64 14.64,13.64C14.57,13.64 14.5,13.62 14.41,13.6C14.03,13.47 13.82,13.06 13.95,12.67C14.09,12.24 14.17,11.78 14.17,11.32C14.17,8.93 12.22,7 9.82,7C8.1,7 6.56,8 5.87,9.5C6.54,9.7 7.16,10.04 7.66,10.54C7.95,10.83 7.95,11.29 7.66,11.58C7.38,11.86 6.91,11.86 6.63,11.58C6.17,11.12 5.56,10.86 4.9,10.86C3.56,10.86 2.46,11.96 2.46,13.3C2.46,14.64 3.56,15.73 4.9,15.73H14.9M15.6,10.75C17.06,11.07 18.17,12.37 18.17,13.93C18.17,15.73 16.7,17.19 14.9,17.19H4.9C2.75,17.19 1,15.45 1,13.3C1,11.34 2.45,9.73 4.33,9.45C5.12,7.12 7.33,5.5 9.82,5.5C12.83,5.5 15.31,7.82 15.6,10.75Z",
    "name": "mixcloud"
  },
-  {
-    "path": "M5.68,3.96L11.41,11.65C11.55,11.84 11.55,12.1 11.41,12.29L5.65,20L5.5,20.18C4.76,21 3.47,21.07 2.64,20.31C1.85,19.59 1.79,18.37 2.43,17.5L6.56,11.97L2.46,6.47C1.83,5.62 1.88,4.39 2.67,3.67L2.82,3.54C3.73,2.87 5,3.05 5.68,3.96M18.32,3.96C19,3.05 20.27,2.87 21.18,3.54L21.33,3.67C22.12,4.39 22.17,5.61 21.54,6.47L17.44,11.97L21.57,17.5C22.21,18.36 22.15,19.59 21.36,20.31C20.53,21.07 19.24,21 18.5,20.18L18.35,20L12.59,12.29C12.45,12.1 12.45,11.84 12.59,11.65L18.32,3.96Z",
-    "name": "mixer"
-  },
  {
    "path": "M3.25,4.03L19.95,20.73L18.7,22L14.86,18.13C14.77,18.12 14.68,18.09 14.59,18.05C14.26,17.89 14.14,17.62 14.11,17.38L12.18,15.45C12.14,15.53 12.09,15.6 12.05,15.66C11.62,16.26 11.19,16.26 10.86,16.04C10.54,15.83 5.5,12 5.23,11.87C4.95,11.76 4.85,12.03 5.12,13.5C5.39,15 4.95,15.39 4.57,15.45C4.2,15.5 3.06,15.18 3,12.14C2.95,9.11 3.76,8.62 4.14,8.62C4.6,8.62 7.08,10.69 8.84,12.12L2,5.28L3.25,4.03M18.38,16.56C18.75,15.4 19.12,13.8 19.1,12.03V12C19.14,8.5 17.66,5.58 17.66,5.58C17.66,5.58 17.42,4.72 18.12,4.39C18.83,4.06 19.3,4.61 19.3,4.61C21.12,8.22 21,11.64 21,12C21,12.27 21.09,14.96 19.88,18.05L18.38,16.56M15.14,13.31C15.19,12.92 15.22,12.5 15.24,12.03V12C15.14,8.5 14.13,7.21 14.13,7.21C14.13,7.21 13.89,6.34 14.59,6C15.3,5.69 15.77,6.23 15.77,6.23C17.26,8.94 17.16,11.64 17.14,12C17.15,12.2 17.2,13.38 16.82,15L15.14,13.31M10.2,8.38C10.23,7.77 10.59,7.64 10.59,7.64C10.59,7.64 11.19,7.37 11.57,7.8C11.91,8.19 12.72,9.57 12.89,11.07L10.2,8.38Z",
    "name": "nfc-off"
--- a/cast/src/receiver/layout/hc-lovelace.ts
+++ b/cast/src/receiver/layout/hc-lovelace.ts
@@ -22,8 +22,6 @@ class HcLovelace extends LitElement {

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

-  public urlPath?: string | null;
-
  protected render(): TemplateResult {
    const index = this._viewIndex;
    if (index === undefined) {
@@ -37,7 +35,6 @@ class HcLovelace extends LitElement {
    const lovelace: Lovelace = {
      config: this.lovelaceConfig,
      editMode: false,
-      urlPath: this.urlPath!,
      enableFullEditMode: () => undefined,
      mode: "storage",
      language: "en",
--- a/cast/src/receiver/layout/hc-main.ts
+++ b/cast/src/receiver/layout/hc-main.ts
@@ -87,7 +87,6 @@ export class HcMain extends HassElement {
        .hass=${this.hass}
        .lovelaceConfig=${this._lovelaceConfig}
        .viewPath=${this._lovelacePath}
-        .urlPath=${this._urlPath}
        @config-refresh=${this._generateLovelaceConfig}
      ></hc-lovelace>
    `;
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info.ts
@@ -9,6 +9,7 @@ import {
  mdiExclamationThick,
  mdiFlask,
  mdiHomeAssistant,
+  mdiInformation,
  mdiKey,
  mdiNetwork,
  mdiPound,
@@ -52,7 +53,6 @@ import { HomeAssistant } from "../../../../src/types";
 import "../../components/hassio-card-content";
 import { showHassioMarkdownDialog } from "../../dialogs/markdown/show-dialog-hassio-markdown";
 import { hassioStyle } from "../../resources/hassio-style";
-import "../../../../src/components/ha-settings-row";

 const STAGE_ICON = {
  stable: mdiCheckCircle,
@@ -242,23 +242,19 @@ class HassioAddonInfo extends LitElement {
              `
            : ""}
          <div class="security">
-            ${this.addon.stage !== "stable"
-              ? html` <ha-label-badge
-                  class=${classMap({
-                    yellow: this.addon.stage === "experimental",
-                    red: this.addon.stage === "deprecated",
-                  })}
-                  @click=${this._showMoreInfo}
-                  id="stage"
-                  label="stage"
-                  description=""
-                >
-                  <ha-svg-icon
-                    .path=${STAGE_ICON[this.addon.stage]}
-                  ></ha-svg-icon>
-                </ha-label-badge>`
-              : ""}
-
+            <ha-label-badge
+              class=${classMap({
+                green: this.addon.stage === "stable",
+                yellow: this.addon.stage === "experimental",
+                red: this.addon.stage === "deprecated",
+              })}
+              @click=${this._showMoreInfo}
+              id="stage"
+              label="stage"
+              description=""
+            >
+              <ha-svg-icon .path=${STAGE_ICON[this.addon.stage]}></ha-svg-icon>
+            </ha-label-badge>
            <ha-label-badge
              class=${classMap({
                green: [5, 6].includes(Number(this.addon.rating)),
@@ -386,94 +382,67 @@ class HassioAddonInfo extends LitElement {

          ${this.addon.version
            ? html`
-                <div class="addon-options">
-                  <ha-settings-row ?three-line=${this.narrow}>
-                    <span slot="heading">
-                      Start on boot
-                    </span>
-                    <span slot="description">
-                      Make the add-on start during a system boot
-                    </span>
-                    <ha-switch
-                      @change=${this._startOnBootToggled}
-                      .checked=${this.addon.boot === "auto"}
-                      haptic
-                    ></ha-switch>
-                  </ha-settings-row>
-
-                  ${this.hass.userData?.showAdvanced
-                    ? html`
-                        <ha-settings-row ?three-line=${this.narrow}>
-                          <span slot="heading">
-                            Watchdog
-                          </span>
-                          <span slot="description">
-                            This will start the add-on if it crashes
-                          </span>
-                          <ha-switch
-                            @change=${this._watchdogToggled}
-                            .checked=${this.addon.watchdog}
-                            haptic
-                          ></ha-switch>
-                        </ha-settings-row>
-                      `
-                    : ""}
-                  ${this.addon.auto_update || this.hass.userData?.showAdvanced
-                    ? html`
-                        <ha-settings-row ?three-line=${this.narrow}>
-                          <span slot="heading">
-                            Auto update
-                          </span>
-                          <span slot="description">
-                            Auto update the add-on when there is a new version
-                            available
-                          </span>
-                          <ha-switch
-                            @change=${this._autoUpdateToggled}
-                            .checked=${this.addon.auto_update}
-                            haptic
-                          ></ha-switch>
-                        </ha-settings-row>
-                      `
-                    : ""}
-                  ${this.addon.ingress
-                    ? html`
-                        <ha-settings-row ?three-line=${this.narrow}>
-                          <span slot="heading">
-                            Show in sidebar
-                          </span>
-                          <span slot="description">
-                            ${this._computeCannotIngressSidebar
-                              ? "This option requires Home Assistant 0.92 or later."
-                              : "Add this add-on to your sidebar"}
-                          </span>
-                          <ha-switch
-                            @change=${this._panelToggled}
-                            .checked=${this.addon.ingress_panel}
-                            .disabled=${this._computeCannotIngressSidebar}
-                            haptic
-                          ></ha-switch>
-                        </ha-settings-row>
-                      `
-                    : ""}
-                  ${this._computeUsesProtectedOptions
-                    ? html`
-                        <ha-settings-row ?three-line=${this.narrow}>
-                          <span slot="heading">
-                            Protection mode
-                          </span>
-                          <span slot="description">
-                            Blocks elevated system access from the add-on
-                          </span>
-                          <ha-switch
-                            @change=${this._protectionToggled}
-                            .checked=${this.addon.protected}
-                            haptic
-                          ></ha-switch>
-                        </ha-settings-row>
-                      `
-                    : ""}
+                <div class="state">
+                  <div>Start on boot</div>
+                  <ha-switch
+                    @change=${this._startOnBootToggled}
+                    .checked=${this.addon.boot === "auto"}
+                    haptic
+                  ></ha-switch>
                </div>
+                ${this.addon.auto_update || this.hass.userData?.showAdvanced
+                  ? html`
+                      <div class="state">
+                        <div>Auto update</div>
+                        <ha-switch
+                          @change=${this._autoUpdateToggled}
+                          .checked=${this.addon.auto_update}
+                          haptic
+                        ></ha-switch>
+                      </div>
+                    `
+                  : ""}
+                ${this.addon.ingress
+                  ? html`
+                      <div class="state">
+                        <div>Show in sidebar</div>
+                        <ha-switch
+                          @change=${this._panelToggled}
+                          .checked=${this.addon.ingress_panel}
+                          .disabled=${this._computeCannotIngressSidebar}
+                          haptic
+                        ></ha-switch>
+                        ${this._computeCannotIngressSidebar
+                          ? html`
+                              <span>
+                                This option requires Home Assistant 0.92 or
+                                later.
+                              </span>
+                            `
+                          : ""}
+                      </div>
+                    `
+                  : ""}
+                ${this._computeUsesProtectedOptions
+                  ? html`
+                      <div class="state">
+                        <div>
+                          Protection mode
+                          <span>
+                            <ha-svg-icon path=${mdiInformation}></ha-svg-icon>
+                            <paper-tooltip>
+                              Grant the add-on elevated system access.
+                            </paper-tooltip>
+                          </span>
+                        </div>
+                        <ha-switch
+                          @change=${this._protectionToggled}
+                          .checked=${this.addon.protected}
+                          haptic
+                        ></ha-switch>
+                      </div>
+                    `
+                  : ""}
              `
            : ""}
          ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
@@ -579,6 +548,137 @@ class HassioAddonInfo extends LitElement {
    `;
  }

+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      hassioStyle,
+      css`
+        :host {
+          display: block;
+        }
+        ha-card {
+          display: block;
+          margin-bottom: 16px;
+        }
+        ha-card.warning {
+          background-color: var(--error-color);
+          color: white;
+        }
+        ha-card.warning .card-header {
+          color: white;
+        }
+        ha-card.warning .card-content {
+          color: white;
+        }
+        ha-card.warning mwc-button {
+          --mdc-theme-primary: white !important;
+        }
+        .warning {
+          color: var(--error-color);
+          --mdc-theme-primary: var(--error-color);
+        }
+        .light-color {
+          color: var(--secondary-text-color);
+        }
+        .addon-header {
+          padding-left: 8px;
+          font-size: 24px;
+          color: var(--ha-card-header-color, --primary-text-color);
+        }
+        .addon-version {
+          float: right;
+          font-size: 15px;
+          vertical-align: middle;
+        }
+        .errors {
+          color: var(--error-color);
+          margin-bottom: 16px;
+        }
+        .description {
+          margin-bottom: 16px;
+        }
+        img.logo {
+          max-height: 60px;
+          margin: 16px 0;
+          display: block;
+        }
+        .state {
+          display: flex;
+          margin: 33px 0;
+        }
+        .state div {
+          width: 180px;
+          display: inline-block;
+        }
+        .state ha-svg-icon {
+          width: 16px;
+          height: 16px;
+          color: var(--secondary-text-color);
+        }
+        ha-switch {
+          display: flex;
+        }
+        ha-svg-icon.running {
+          color: var(--paper-green-400);
+        }
+        ha-svg-icon.stopped {
+          color: var(--google-red-300);
+        }
+        ha-call-api-button {
+          font-weight: 500;
+          color: var(--primary-color);
+        }
+        .right {
+          float: right;
+        }
+        protection-enable mwc-button {
+          --mdc-theme-primary: white;
+        }
+        .description a {
+          color: var(--primary-color);
+        }
+        .red {
+          --ha-label-badge-color: var(--label-badge-red, #df4c1e);
+        }
+        .blue {
+          --ha-label-badge-color: var(--label-badge-blue, #039be5);
+        }
+        .green {
+          --ha-label-badge-color: var(--label-badge-green, #0da035);
+        }
+        .yellow {
+          --ha-label-badge-color: var(--label-badge-yellow, #f4b400);
+        }
+        .security {
+          margin-bottom: 16px;
+        }
+        .card-actions {
+          display: flow-root;
+        }
+        .security h3 {
+          margin-bottom: 8px;
+          font-weight: normal;
+        }
+        .security ha-label-badge {
+          cursor: pointer;
+          margin-right: 4px;
+          --ha-label-badge-padding: 8px 0 0 0;
+        }
+        .changelog {
+          display: contents;
+        }
+        .changelog-link {
+          color: var(--primary-color);
+          text-decoration: underline;
+          cursor: pointer;
+        }
+        ha-markdown {
+          padding: 16px;
+        }
+      `,
+    ];
+  }
+
  private get _computeHassioApi(): boolean {
    return (
      this.addon.hassio_api &&
@@ -667,24 +767,6 @@ class HassioAddonInfo extends LitElement {
    }
  }

-  private async _watchdogToggled(): Promise<void> {
-    this._error = undefined;
-    const data: HassioAddonSetOptionParams = {
-      watchdog: !this.addon.watchdog,
-    };
-    try {
-      await setHassioAddonOption(this.hass, this.addon.slug, data);
-      const eventdata = {
-        success: true,
-        response: undefined,
-        path: "option",
-      };
-      fireEvent(this, "hass-api-called", eventdata);
-    } catch (err) {
-      this._error = `Failed to set addon option, ${err.body?.message || err}`;
-    }
-  }
-
  private async _autoUpdateToggled(): Promise<void> {
    this._error = undefined;
    const data: HassioAddonSetOptionParams = {
@@ -801,146 +883,6 @@ class HassioAddonInfo extends LitElement {
      this._error = `Failed to uninstall addon, ${err.body?.message || err}`;
    }
  }
-
-  static get styles(): CSSResult[] {
-    return [
-      haStyle,
-      hassioStyle,
-      css`
-        :host {
-          display: block;
-        }
-        ha-card {
-          display: block;
-          margin-bottom: 16px;
-        }
-        ha-card.warning {
-          background-color: var(--error-color);
-          color: white;
-        }
-        ha-card.warning .card-header {
-          color: white;
-        }
-        ha-card.warning .card-content {
-          color: white;
-        }
-        ha-card.warning mwc-button {
-          --mdc-theme-primary: white !important;
-        }
-        .warning {
-          color: var(--error-color);
-          --mdc-theme-primary: var(--error-color);
-        }
-        .light-color {
-          color: var(--secondary-text-color);
-        }
-        .addon-header {
-          padding-left: 8px;
-          font-size: 24px;
-          color: var(--ha-card-header-color, --primary-text-color);
-        }
-        .addon-version {
-          float: right;
-          font-size: 15px;
-          vertical-align: middle;
-        }
-        .errors {
-          color: var(--error-color);
-          margin-bottom: 16px;
-        }
-        .description {
-          margin-bottom: 16px;
-        }
-        img.logo {
-          max-height: 60px;
-          margin: 16px 0;
-          display: block;
-        }
-
-        ha-switch {
-          display: flex;
-        }
-        ha-svg-icon.running {
-          color: var(--paper-green-400);
-        }
-        ha-svg-icon.stopped {
-          color: var(--google-red-300);
-        }
-        ha-call-api-button {
-          font-weight: 500;
-          color: var(--primary-color);
-        }
-        .right {
-          float: right;
-        }
-        protection-enable mwc-button {
-          --mdc-theme-primary: white;
-        }
-        .description a {
-          color: var(--primary-color);
-        }
-        .red {
-          --ha-label-badge-color: var(--label-badge-red, #df4c1e);
-        }
-        .blue {
-          --ha-label-badge-color: var(--label-badge-blue, #039be5);
-        }
-        .green {
-          --ha-label-badge-color: var(--label-badge-green, #0da035);
-        }
-        .yellow {
-          --ha-label-badge-color: var(--label-badge-yellow, #f4b400);
-        }
-        .security {
-          margin-bottom: 16px;
-        }
-        .card-actions {
-          display: flow-root;
-        }
-        .security h3 {
-          margin-bottom: 8px;
-          font-weight: normal;
-        }
-        .security ha-label-badge {
-          cursor: pointer;
-          margin-right: 4px;
-          --ha-label-badge-padding: 8px 0 0 0;
-        }
-        .changelog {
-          display: contents;
-        }
-        .changelog-link {
-          color: var(--primary-color);
-          text-decoration: underline;
-          cursor: pointer;
-        }
-        ha-markdown {
-          padding: 16px;
-        }
-        ha-settings-row {
-          padding: 0;
-          height: 54px;
-          width: 100%;
-        }
-        ha-settings-row > span[slot="description"] {
-          white-space: normal;
-          color: var(--secondary-text-color);
-        }
-        ha-settings-row[three-line] {
-          height: 74px;
-        }
-
-        .addon-options {
-          max-width: 50%;
-        }
-        @media (max-width: 720px) {
-          .addon-options {
-            max-width: 100%;
-          }
-        }
-      `,
-    ];
-  }
 }
 declare global {
  interface HTMLElementTagNameMap {
--- a/hassio/src/dashboard/hassio-update.ts
+++ b/hassio/src/dashboard/hassio-update.ts
@@ -10,7 +10,7 @@ import {
  internalProperty,
  TemplateResult,
 } from "lit-element";
-import "../../../src/components/buttons/ha-progress-button";
+import "../../../src/components/buttons/ha-call-api-button";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-svg-icon";
 import { HassioHassOSInfo } from "../../../src/data/hassio/host";
@@ -21,11 +21,6 @@ import {
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
 import { hassioStyle } from "../resources/hassio-style";
-import {
-  showConfirmationDialog,
-  showAlertDialog,
-} from "../../../src/dialogs/generic/show-dialog-box";
-import { HassioResponse } from "../../../src/data/hassio/common";

@customElement("hassio-update")
 export class HassioUpdate extends LitElement {
@@ -131,43 +126,31 @@ export class HassioUpdate extends LitElement {
          <a href="${releaseNotesUrl}" target="_blank" rel="noreferrer">
            <mwc-button>Release notes</mwc-button>
          </a>
-          <ha-progress-button
-            .apiPath=${apiPath}
-            .name=${name}
-            .version=${lastVersion}
-            @click=${this._confirmUpdate}
+          <ha-call-api-button
+            .hass=${this.hass}
+            .path=${apiPath}
+            @hass-api-called=${this._apiCalled}
          >
            Update
-          </ha-progress-button>
+          </ha-call-api-button>
        </div>
      </ha-card>
    `;
  }

-  private async _confirmUpdate(ev): Promise<void> {
-    const item = ev.target;
-    item.progress = true;
-    const confirmed = await showConfirmationDialog(this, {
-      title: `Update ${item.name}`,
-      text: `Are you sure you want to upgrade ${item.name} to version ${item.version}?`,
-      confirmText: "update",
-      dismissText: "cancel",
-    });
-
-    if (!confirmed) {
-      item.progress = false;
+  private _apiCalled(ev): void {
+    if (ev.detail.success) {
+      this._error = "";
      return;
    }
-    try {
-      await this.hass.callApi<HassioResponse<void>>("POST", item.apiPath);
-    } catch (err) {
-      showAlertDialog(this, {
-        title: "Update failed",
-        text:
-          typeof err === "object" ? err.body?.message || "Unkown error" : err,
-      });
+
+    const response = ev.detail.response;
+
+    if (typeof response.body === "object") {
+      this._error = response.body.message || "Unknown error";
+    } else {
+      this._error = response.body;
    }
-    item.progress = false;
  }

  static get styles(): CSSResult[] {
--- a/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts
+++ b/hassio/src/dialogs/markdown/dialog-hassio-markdown.ts
@@ -31,10 +31,6 @@ class HassioMarkdownDialog extends LitElement {
    this._opened = true;
  }

-  public closeDialog() {
-    this._opened = false;
-  }
-
  protected render(): TemplateResult {
    if (!this._opened) {
      return html``;
@@ -42,7 +38,7 @@ class HassioMarkdownDialog extends LitElement {
    return html`
      <ha-dialog
        open
-        @closed=${this.closeDialog}
+        @closing=${this._closeDialog}
        .heading=${createCloseHeading(this.hass, this.title)}
      >
        <ha-markdown .content=${this.content || ""}></ha-markdown>
@@ -50,6 +46,10 @@ class HassioMarkdownDialog extends LitElement {
    `;
  }

+  private _closeDialog(): void {
+    this._opened = false;
+  }
+
  static get styles(): CSSResult[] {
    return [
      haStyleDialog,
--- a/hassio/src/dialogs/network/dialog-hassio-network.ts
+++ b/hassio/src/dialogs/network/dialog-hassio-network.ts
@@ -1,328 +0,0 @@
-import "@material/mwc-button/mwc-button";
-import "@material/mwc-icon-button";
-import "@material/mwc-tab-bar";
-import "@material/mwc-tab";
-import { PaperInputElement } from "@polymer/paper-input/paper-input";
-import { mdiClose } from "@mdi/js";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  internalProperty,
-  TemplateResult,
-} from "lit-element";
-import { cache } from "lit-html/directives/cache";
-
-import {
-  updateNetworkInterface,
-  NetworkInterface,
-} from "../../../../src/data/hassio/network";
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import { HassioNetworkDialogParams } from "./show-dialog-network";
-import { haStyleDialog } from "../../../../src/resources/styles";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../../../src/dialogs/generic/show-dialog-box";
-import type { HomeAssistant } from "../../../../src/types";
-import type { HaRadio } from "../../../../src/components/ha-radio";
-import { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
-
-import "../../../../src/components/ha-circular-progress";
-import "../../../../src/components/ha-dialog";
-import "../../../../src/components/ha-formfield";
-import "../../../../src/components/ha-header-bar";
-import "../../../../src/components/ha-radio";
-import "../../../../src/components/ha-related-items";
-import "../../../../src/components/ha-svg-icon";
-
-@customElement("dialog-hassio-network")
-export class DialogHassioNetwork extends LitElement implements HassDialog {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @internalProperty() private _prosessing = false;
-
-  @internalProperty() private _params?: HassioNetworkDialogParams;
-
-  @internalProperty() private _network!: {
-    interface: string;
-    data: NetworkInterface;
-  }[];
-
-  @internalProperty() private _curTabIndex = 0;
-
-  @internalProperty() private _device?: {
-    interface: string;
-    data: NetworkInterface;
-  };
-
-  @internalProperty() private _dirty = false;
-
-  public async showDialog(params: HassioNetworkDialogParams): Promise<void> {
-    this._params = params;
-    this._dirty = false;
-    this._curTabIndex = 0;
-    this._network = Object.keys(params.network?.interfaces)
-      .map((device) => ({
-        interface: device,
-        data: params.network.interfaces[device],
-      }))
-      .sort((a, b) => {
-        return a.data.primary > b.data.primary ? -1 : 1;
-      });
-    this._device = this._network[this._curTabIndex];
-    this._device.data.nameservers = String(this._device.data.nameservers);
-    await this.updateComplete;
-  }
-
-  public closeDialog(): void {
-    this._params = undefined;
-    this._prosessing = false;
-    fireEvent(this, "dialog-closed", { dialog: this.localName });
-  }
-
-  protected render(): TemplateResult {
-    if (!this._params || !this._network) {
-      return html``;
-    }
-
-    return html`
-      <ha-dialog open .heading=${true} hideActions @closed=${this.closeDialog}>
-        <div slot="heading">
-          <ha-header-bar>
-            <span slot="title">
-              Network settings
-            </span>
-            <mwc-icon-button slot="actionItems" dialogAction="cancel">
-              <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-            </mwc-icon-button>
-          </ha-header-bar>
-          ${this._network.length > 1
-            ? html` <mwc-tab-bar
-                .activeIndex=${this._curTabIndex}
-                @MDCTabBar:activated=${this._handleTabActivated}
-                >${this._network.map(
-                  (device) =>
-                    html`<mwc-tab
-                      .id=${device.interface}
-                      .label=${device.interface}
-                    >
-                    </mwc-tab>`
-                )}
-              </mwc-tab-bar>`
-            : ""}
-        </div>
-        ${cache(this._renderTab())}
-      </ha-dialog>
-    `;
-  }
-
-  private _renderTab() {
-    return html` <div class="form container">
-        <ha-formfield label="DHCP">
-          <ha-radio
-            @change=${this._handleRadioValueChanged}
-            value="dhcp"
-            name="method"
-            ?checked=${this._device!.data.method === "dhcp"}
-          >
-          </ha-radio>
-        </ha-formfield>
-        <ha-formfield label="Static">
-          <ha-radio
-            @change=${this._handleRadioValueChanged}
-            value="static"
-            name="method"
-            ?checked=${this._device!.data.method === "static"}
-          >
-          </ha-radio>
-        </ha-formfield>
-        ${this._device!.data.method !== "dhcp"
-          ? html` <paper-input
-                class="flex-auto"
-                id="ip_address"
-                label="IP address/Netmask"
-                .value="${this._device!.data.ip_address}"
-                @value-changed=${this._handleInputValueChanged}
-              ></paper-input>
-              <paper-input
-                class="flex-auto"
-                id="gateway"
-                label="Gateway address"
-                .value="${this._device!.data.gateway}"
-                @value-changed=${this._handleInputValueChanged}
-              ></paper-input>
-              <paper-input
-                class="flex-auto"
-                id="nameservers"
-                label="DNS servers"
-                .value="${this._device!.data.nameservers as string}"
-                @value-changed=${this._handleInputValueChanged}
-              ></paper-input>
-              NB!: If you are changing IP or gateway addresses, you might lose
-              the connection.`
-          : ""}
-      </div>
-      <div class="buttons">
-        <mwc-button label="close" @click=${this.closeDialog}> </mwc-button>
-        <mwc-button @click=${this._updateNetwork} ?disabled=${!this._dirty}>
-          ${this._prosessing
-            ? html`<ha-circular-progress active></ha-circular-progress>`
-            : "Update"}
-        </mwc-button>
-      </div>`;
-  }
-
-  private async _updateNetwork() {
-    this._prosessing = true;
-    let options: Partial<NetworkInterface> = {
-      method: this._device!.data.method,
-    };
-    if (options.method !== "dhcp") {
-      options = {
-        ...options,
-        address: this._device!.data.ip_address,
-        gateway: this._device!.data.gateway,
-        dns: String(this._device!.data.nameservers).split(","),
-      };
-    }
-    try {
-      await updateNetworkInterface(this.hass, this._device!.interface, options);
-    } catch (err) {
-      showAlertDialog(this, {
-        title: "Failed to change network settings",
-        text:
-          typeof err === "object" ? err.body.message || "Unkown error" : err,
-      });
-      this._prosessing = false;
-      return;
-    }
-    this._params?.loadData();
-    this.closeDialog();
-  }
-
-  private async _handleTabActivated(ev: CustomEvent): Promise<void> {
-    if (this._dirty) {
-      const confirm = await showConfirmationDialog(this, {
-        text:
-          "You have unsaved changes, these will get lost if you change tabs, do you want to continue?",
-        confirmText: "yes",
-        dismissText: "no",
-      });
-      if (!confirm) {
-        this.requestUpdate("_device");
-        return;
-      }
-    }
-    this._curTabIndex = ev.detail.index;
-    this._device = this._network[ev.detail.index];
-    this._device.data.nameservers = String(this._device.data.nameservers);
-  }
-
-  private _handleRadioValueChanged(ev: CustomEvent): void {
-    const value = (ev.target as HaRadio).value as "dhcp" | "static";
-
-    if (!value || !this._device || this._device!.data.method === value) {
-      return;
-    }
-
-    this._dirty = true;
-
-    this._device!.data.method = value;
-    this.requestUpdate("_device");
-  }
-
-  private _handleInputValueChanged(ev: CustomEvent): void {
-    const value: string | null | undefined = (ev.target as PaperInputElement)
-      .value;
-    const id = (ev.target as PaperInputElement).id;
-
-    if (!value || !this._device || this._device.data[id] === value) {
-      return;
-    }
-
-    this._dirty = true;
-
-    this._device.data[id] = value;
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      haStyleDialog,
-      css`
-        ha-header-bar {
-          --mdc-theme-on-primary: var(--primary-text-color);
-          --mdc-theme-primary: var(--mdc-theme-surface);
-          flex-shrink: 0;
-        }
-
-        mwc-tab-bar {
-          border-bottom: 1px solid
-            var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
-        }
-
-        ha-dialog {
-          --dialog-content-position: static;
-          --dialog-content-padding: 0;
-          --dialog-z-index: 6;
-        }
-
-        @media all and (min-width: 451px) and (min-height: 501px) {
-          .container {
-            width: 400px;
-          }
-        }
-
-        .content {
-          display: block;
-          padding: 20px 24px;
-        }
-
-        /* overrule the ha-style-dialog max-height on small screens */
-        @media all and (max-width: 450px), all and (max-height: 500px) {
-          ha-header-bar {
-            --mdc-theme-primary: var(--app-header-background-color);
-            --mdc-theme-on-primary: var(--app-header-text-color, white);
-          }
-        }
-
-        mwc-button.warning {
-          --mdc-theme-primary: var(--error-color);
-        }
-
-        :host([rtl]) app-toolbar {
-          direction: rtl;
-          text-align: right;
-        }
-        .container {
-          padding: 20px 24px;
-        }
-        .form {
-          margin-bottom: 53px;
-        }
-        .buttons {
-          position: absolute;
-          bottom: 0;
-          width: 100%;
-          box-sizing: border-box;
-          border-top: 1px solid
-            var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
-          display: flex;
-          justify-content: space-between;
-          padding: 8px;
-          padding-bottom: max(env(safe-area-inset-bottom), 8px);
-          background-color: var(--mdc-theme-surface, #fff);
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-hassio-network": DialogHassioNetwork;
-  }
-}
--- a/hassio/src/dialogs/network/show-dialog-network.ts
+++ b/hassio/src/dialogs/network/show-dialog-network.ts
@@ -1,22 +0,0 @@
-import { fireEvent } from "../../../../src/common/dom/fire_event";
-import { NetworkInfo } from "../../../../src/data/hassio/network";
-import "./dialog-hassio-network";
-
-export interface HassioNetworkDialogParams {
-  network: NetworkInfo;
-  loadData: () => Promise<void>;
-}
-
-export const showNetworkDialog = (
-  element: HTMLElement,
-  dialogParams: HassioNetworkDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-hassio-network",
-    dialogImport: () =>
-      import(
-        /* webpackChunkName: "dialog-hassio-network" */ "./dialog-hassio-network"
-      ),
-    dialogParams,
-  });
-};
--- a/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts
+++ b/hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts
@@ -7,9 +7,9 @@ import {
  CSSResult,
  customElement,
  html,
-  internalProperty,
  LitElement,
  property,
+  internalProperty,
  TemplateResult,
 } from "lit-element";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
@@ -19,7 +19,6 @@ import {
  fetchHassioSnapshotInfo,
  HassioSnapshotDetail,
 } from "../../../../src/data/hassio/snapshot";
-import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
 import { PolymerChangedEvent } from "../../../../src/polymer-types";
 import { haStyleDialog } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
@@ -267,12 +266,8 @@ class HassioSnapshotDialog extends LitElement {
    this._snapshotPassword = ev.detail.value;
  }

-  private async _partialRestoreClicked() {
-    if (
-      !(await showConfirmationDialog(this, {
-        title: "Are you sure you want partially to restore this snapshot?",
-      }))
-    ) {
+  private _partialRestoreClicked() {
+    if (!confirm("Are you sure you want to restore this snapshot?")) {
      return;
    }

@@ -317,13 +312,8 @@ class HassioSnapshotDialog extends LitElement {
      );
  }

-  private async _fullRestoreClicked() {
-    if (
-      !(await showConfirmationDialog(this, {
-        title:
-          "Are you sure you want to wipe your system and restore this snapshot?",
-      }))
-    ) {
+  private _fullRestoreClicked() {
+    if (!confirm("Are you sure you want to restore this snapshot?")) {
      return;
    }

@@ -348,12 +338,8 @@ class HassioSnapshotDialog extends LitElement {
      );
  }

-  private async _deleteClicked() {
-    if (
-      !(await showConfirmationDialog(this, {
-        title: "Are you sure you want to delete this snapshot?",
-      }))
-    ) {
+  private _deleteClicked() {
+    if (!confirm("Are you sure you want to delete this snapshot?")) {
      return;
    }

--- a/hassio/src/hassio-main.ts
+++ b/hassio/src/hassio-main.ts
@@ -1,35 +1,116 @@
+import { PolymerElement } from "@polymer/polymer";
 import {
-  html,
-  PropertyValues,
  customElement,
-  LitElement,
  property,
+  internalProperty,
+  PropertyValues,
 } from "lit-element";
-import "./hassio-router";
-import { urlSyncMixin } from "../../src/state/url-sync-mixin";
-import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin";
-import { HomeAssistant, Route } from "../../src/types";
-import { HassioPanelInfo } from "../../src/data/hassio/supervisor";
 import { applyThemesOnElement } from "../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../src/common/dom/fire_event";
+import { navigate } from "../../src/common/navigate";
+import { fetchHassioAddonInfo } from "../../src/data/hassio/addon";
+import {
+  fetchHassioHassOsInfo,
+  fetchHassioHostInfo,
+  HassioHassOSInfo,
+  HassioHostInfo,
+} from "../../src/data/hassio/host";
+import {
+  createHassioSession,
+  fetchHassioHomeAssistantInfo,
+  fetchHassioSupervisorInfo,
+  fetchHassioInfo,
+  HassioHomeAssistantInfo,
+  HassioInfo,
+  HassioPanelInfo,
+  HassioSupervisorInfo,
+} from "../../src/data/hassio/supervisor";
+import {
+  AlertDialogParams,
+  showAlertDialog,
+} from "../../src/dialogs/generic/show-dialog-box";
 import { makeDialogManager } from "../../src/dialogs/make-dialog-manager";
-import { atLeastVersion } from "../../src/common/config/version";
+import {
+  HassRouterPage,
+  RouterOptions,
+} from "../../src/layouts/hass-router-page";
+import { ProvideHassLitMixin } from "../../src/mixins/provide-hass-lit-mixin";
+import "../../src/resources/ha-style";
+import { HomeAssistant } from "../../src/types";
+// Don't codesplit it, that way the dashboard always loads fast.
+import "./hassio-panel";

@customElement("hassio-main")
-export class HassioMain extends urlSyncMixin(ProvideHassLitMixin(LitElement)) {
+class HassioMain extends ProvideHassLitMixin(HassRouterPage) {
  @property({ attribute: false }) public hass!: HomeAssistant;

  @property() public panel!: HassioPanelInfo;

  @property() public narrow!: boolean;

-  @property() public route?: Route;
+  protected routerOptions: RouterOptions = {
+    // Hass.io has a page with tabs, so we route all non-matching routes to it.
+    defaultPage: "dashboard",
+    initialLoad: () => this._fetchData(),
+    showLoading: true,
+    routes: {
+      dashboard: {
+        tag: "hassio-panel",
+        cache: true,
+      },
+      snapshots: "dashboard",
+      store: "dashboard",
+      system: "dashboard",
+      addon: {
+        tag: "hassio-addon-dashboard",
+        load: () =>
+          import(
+            /* webpackChunkName: "hassio-addon-dashboard" */ "./addon-view/hassio-addon-dashboard"
+          ),
+      },
+      ingress: {
+        tag: "hassio-ingress-view",
+        load: () =>
+          import(
+            /* webpackChunkName: "hassio-ingress-view" */ "./ingress-view/hassio-ingress-view"
+          ),
+      },
+    },
+  };
+
+  @internalProperty() private _supervisorInfo: HassioSupervisorInfo;
+
+  @internalProperty() private _hostInfo: HassioHostInfo;
+
+  @internalProperty() private _hassioInfo?: HassioInfo;
+
+  @internalProperty() private _hassOsInfo?: HassioHassOSInfo;
+
+  @internalProperty() private _hassInfo: HassioHomeAssistantInfo;

  protected firstUpdated(changedProps: PropertyValues) {
    super.firstUpdated(changedProps);

-    this._applyTheme();
+    applyThemesOnElement(
+      this.parentElement,
+      this.hass.themes,
+      this.hass.selectedTheme || this.hass.themes.default_theme
+    );

+    this.style.setProperty(
+      "--app-header-background-color",
+      "var(--sidebar-background-color)"
+    );
+    this.style.setProperty(
+      "--app-header-text-color",
+      "var(--sidebar-text-color)"
+    );
+    this.style.setProperty(
+      "--app-header-border-bottom",
+      "1px solid var(--divider-color)"
+    );
+
+    this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
    // Paulus - March 17, 2019
    // We went to a single hass-toggle-menu event in HA 0.90. However, the
    // supervisor UI can also run under older versions of Home Assistant.
@@ -62,61 +143,152 @@ export class HassioMain extends urlSyncMixin(ProvideHassLitMixin(LitElement)) {
      });
    });

-    makeDialogManager(this, this.shadowRoot!);
+    makeDialogManager(this, document.body);
  }

-  protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
-    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-    if (!oldHass) {
+  protected updatePageEl(el) {
+    // the tabs page does its own routing so needs full route.
+    const route = el.nodeName === "HASSIO-PANEL" ? this.route : this.routeTail;
+
+    if ("setProperties" in el) {
+      // As long as we have Polymer pages
+      (el as PolymerElement).setProperties({
+        hass: this.hass,
+        narrow: this.narrow,
+        supervisorInfo: this._supervisorInfo,
+        hassioInfo: this._hassioInfo,
+        hostInfo: this._hostInfo,
+        hassInfo: this._hassInfo,
+        hassOsInfo: this._hassOsInfo,
+        route,
+      });
+    } else {
+      el.hass = this.hass;
+      el.narrow = this.narrow;
+      el.supervisorInfo = this._supervisorInfo;
+      el.hassioInfo = this._hassioInfo;
+      el.hostInfo = this._hostInfo;
+      el.hassInfo = this._hassInfo;
+      el.hassOsInfo = this._hassOsInfo;
+      el.route = route;
+    }
+  }
+
+  private async _fetchData() {
+    if (this.panel.config && this.panel.config.ingress) {
+      await this._redirectIngress(this.panel.config.ingress);
      return;
    }
-    if (oldHass.themes !== this.hass.themes) {
-      this._applyTheme();
+
+    const [supervisorInfo, hostInfo, hassInfo, hassioInfo] = await Promise.all([
+      fetchHassioSupervisorInfo(this.hass),
+      fetchHassioHostInfo(this.hass),
+      fetchHassioHomeAssistantInfo(this.hass),
+      fetchHassioInfo(this.hass),
+    ]);
+    this._supervisorInfo = supervisorInfo;
+    this._hassioInfo = hassioInfo;
+    this._hostInfo = hostInfo;
+    this._hassInfo = hassInfo;
+
+    if (this._hostInfo.features && this._hostInfo.features.includes("hassos")) {
+      this._hassOsInfo = await fetchHassioHassOsInfo(this.hass);
    }
  }

-  protected render() {
-    return html`
-      <hassio-router
-        .hass=${this.hass}
-        .route=${this.route}
-        .panel=${this.panel}
-        .narrow=${this.narrow}
-      ></hassio-router>
-    `;
-  }
+  private async _redirectIngress(addonSlug: string) {
+    // When we trigger a navigation, we sleep to make sure we don't
+    // show the hassio dashboard before navigating away.
+    const awaitAlert = async (
+      alertParams: AlertDialogParams,
+      action: () => void
+    ) => {
+      await new Promise((resolve) => {
+        alertParams.confirm = resolve;
+        showAlertDialog(this, alertParams);
+      });
+      action();
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+    };

-  private _applyTheme() {
-    let themeName: string;
-    let options: Partial<HomeAssistant["selectedTheme"]> | undefined;
-
-    if (atLeastVersion(this.hass.config.version, 0, 114)) {
-      themeName =
-        this.hass.selectedTheme?.theme ||
-        (this.hass.themes.darkMode && this.hass.themes.default_dark_theme
-          ? this.hass.themes.default_dark_theme!
-          : this.hass.themes.default_theme);
-
-      options = this.hass.selectedTheme;
-      if (themeName === "default" && options?.dark === undefined) {
-        options = {
-          ...this.hass.selectedTheme,
-          dark: this.hass.themes.darkMode,
-        };
-      }
-    } else {
-      themeName =
-        ((this.hass.selectedTheme as unknown) as string) ||
-        this.hass.themes.default_theme;
-    }
-
-    applyThemesOnElement(
-      this.parentElement,
-      this.hass.themes,
-      themeName,
-      options
+    const createSessionPromise = createHassioSession(this.hass).then(
+      () => true,
+      () => false
    );
+
+    let addon;
+
+    try {
+      addon = await fetchHassioAddonInfo(this.hass, addonSlug);
+    } catch (err) {
+      await awaitAlert(
+        {
+          text: "Unable to fetch add-on info to start Ingress",
+          title: "Supervisor",
+        },
+        () => history.back()
+      );
+
+      return;
+    }
+
+    if (!addon.ingress_url) {
+      await awaitAlert(
+        {
+          text: "Add-on does not support Ingress",
+          title: addon.name,
+        },
+        () => history.back()
+      );
+
+      return;
+    }
+
+    if (addon.state !== "started") {
+      await awaitAlert(
+        {
+          text: "Add-on is not running. Please start it first",
+          title: addon.name,
+        },
+        () => navigate(this, `/hassio/addon/${addon.slug}/info`, true)
+      );
+
+      return;
+    }
+
+    if (!(await createSessionPromise)) {
+      await awaitAlert(
+        {
+          text: "Unable to create an Ingress session",
+          title: addon.name,
+        },
+        () => history.back()
+      );
+
+      return;
+    }
+
+    location.assign(addon.ingress_url);
+    // await a promise that doesn't resolve, so we show the loading screen
+    // while we load the next page.
+    await new Promise(() => undefined);
+  }
+
+  private _apiCalled(ev) {
+    if (!ev.detail.success) {
+      return;
+    }
+
+    let tries = 1;
+
+    const tryUpdate = () => {
+      this._fetchData().catch(() => {
+        tries += 1;
+        setTimeout(tryUpdate, Math.min(tries, 5) * 1000);
+      });
+    };
+
+    tryUpdate();
  }
 }

--- a/hassio/src/hassio-panel.ts
+++ b/hassio/src/hassio-panel.ts
@@ -4,8 +4,6 @@ import {
  LitElement,
  property,
  TemplateResult,
-  css,
-  CSSResult,
 } from "lit-element";
 import { HassioHassOSInfo, HassioHostInfo } from "../../src/data/hassio/host";
 import {
@@ -35,9 +33,6 @@ class HassioPanel extends LitElement {
  @property({ attribute: false }) public hassOsInfo!: HassioHassOSInfo;

  protected render(): TemplateResult {
-    if (!this.supervisorInfo) {
-      return html``;
-    }
    return html`
      <hassio-panel-router
        .route=${this.route}
@@ -51,16 +46,6 @@ class HassioPanel extends LitElement {
      ></hassio-panel-router>
    `;
  }
-
-  static get styles(): CSSResult {
-    return css`
-      :host {
-        --app-header-background-color: var(--sidebar-background-color);
-        --app-header-text-color: var(--sidebar-text-color);
-        --app-header-border-bottom: 1px solid var(--divider-color);
-      }
-    `;
-  }
 }

 declare global {
--- a/hassio/src/hassio-router.ts
+++ b/hassio/src/hassio-router.ts
@@ -1,150 +0,0 @@
-import {
-  customElement,
-  property,
-  internalProperty,
-  PropertyValues,
-} from "lit-element";
-import {
-  fetchHassioHassOsInfo,
-  fetchHassioHostInfo,
-  HassioHassOSInfo,
-  HassioHostInfo,
-} from "../../src/data/hassio/host";
-import {
-  fetchHassioHomeAssistantInfo,
-  fetchHassioSupervisorInfo,
-  fetchHassioInfo,
-  HassioHomeAssistantInfo,
-  HassioInfo,
-  HassioPanelInfo,
-  HassioSupervisorInfo,
-} from "../../src/data/hassio/supervisor";
-import {
-  HassRouterPage,
-  RouterOptions,
-} from "../../src/layouts/hass-router-page";
-import "../../src/resources/ha-style";
-import { HomeAssistant } from "../../src/types";
-// Don't codesplit it, that way the dashboard always loads fast.
-import "./hassio-panel";
-
-@customElement("hassio-router")
-class HassioRouter extends HassRouterPage {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public panel!: HassioPanelInfo;
-
-  @property() public narrow!: boolean;
-
-  protected routerOptions: RouterOptions = {
-    // Hass.io has a page with tabs, so we route all non-matching routes to it.
-    defaultPage: "dashboard",
-    initialLoad: () => this._fetchData(),
-    showLoading: true,
-    routes: {
-      dashboard: {
-        tag: "hassio-panel",
-        cache: true,
-      },
-      snapshots: "dashboard",
-      store: "dashboard",
-      system: "dashboard",
-      addon: {
-        tag: "hassio-addon-dashboard",
-        load: () =>
-          import(
-            /* webpackChunkName: "hassio-addon-dashboard" */ "./addon-view/hassio-addon-dashboard"
-          ),
-      },
-      ingress: {
-        tag: "hassio-ingress-view",
-        load: () =>
-          import(
-            /* webpackChunkName: "hassio-ingress-view" */ "./ingress-view/hassio-ingress-view"
-          ),
-      },
-    },
-  };
-
-  @internalProperty() private _supervisorInfo: HassioSupervisorInfo;
-
-  @internalProperty() private _hostInfo: HassioHostInfo;
-
-  @internalProperty() private _hassioInfo?: HassioInfo;
-
-  @internalProperty() private _hassOsInfo?: HassioHassOSInfo;
-
-  @internalProperty() private _hassInfo: HassioHomeAssistantInfo;
-
-  protected firstUpdated(changedProps: PropertyValues) {
-    super.firstUpdated(changedProps);
-    this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
-  }
-
-  protected updatePageEl(el) {
-    // the tabs page does its own routing so needs full route.
-    const route = el.nodeName === "HASSIO-PANEL" ? this.route : this.routeTail;
-
-    el.hass = this.hass;
-    el.narrow = this.narrow;
-    el.supervisorInfo = this._supervisorInfo;
-    el.hassioInfo = this._hassioInfo;
-    el.hostInfo = this._hostInfo;
-    el.hassInfo = this._hassInfo;
-    el.hassOsInfo = this._hassOsInfo;
-    el.route = route;
-
-    if (el.localName === "hassio-ingress-view") {
-      el.ingressPanel = this.panel.config && this.panel.config.ingress;
-    }
-  }
-
-  private async _fetchData() {
-    if (this.panel.config && this.panel.config.ingress) {
-      this._redirectIngress(this.panel.config.ingress);
-      return;
-    }
-
-    const [supervisorInfo, hostInfo, hassInfo, hassioInfo] = await Promise.all([
-      fetchHassioSupervisorInfo(this.hass),
-      fetchHassioHostInfo(this.hass),
-      fetchHassioHomeAssistantInfo(this.hass),
-      fetchHassioInfo(this.hass),
-    ]);
-    this._supervisorInfo = supervisorInfo;
-    this._hassioInfo = hassioInfo;
-    this._hostInfo = hostInfo;
-    this._hassInfo = hassInfo;
-
-    if (this._hostInfo.features && this._hostInfo.features.includes("hassos")) {
-      this._hassOsInfo = await fetchHassioHassOsInfo(this.hass);
-    }
-  }
-
-  private _redirectIngress(addonSlug: string) {
-    this.route = { prefix: "/hassio", path: `/ingress/${addonSlug}` };
-  }
-
-  private _apiCalled(ev) {
-    if (!ev.detail.success) {
-      return;
-    }
-
-    let tries = 1;
-
-    const tryUpdate = () => {
-      this._fetchData().catch(() => {
-        tries += 1;
-        setTimeout(tryUpdate, Math.min(tries, 5) * 1000);
-      });
-    };
-
-    tryUpdate();
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "hassio-router": HassioRouter;
-  }
-}
--- a/hassio/src/ingress-view/hassio-ingress-view.ts
+++ b/hassio/src/ingress-view/hassio-ingress-view.ts
@@ -17,10 +17,6 @@ import { createHassioSession } from "../../../src/data/hassio/supervisor";
 import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-subpage";
 import { HomeAssistant, Route } from "../../../src/types";
-import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
-import { navigate } from "../../../src/common/navigate";
-import { mdiMenu } from "@mdi/js";
-import { fireEvent } from "../../../src/common/dom/fire_event";

@customElement("hassio-ingress-view")
 class HassioIngressView extends LitElement {
@@ -28,45 +24,22 @@ class HassioIngressView extends LitElement {

  @property() public route!: Route;

-  @property() public ingressPanel = false;
-
  @internalProperty() private _addon?: HassioAddonDetails;

-  @property({ type: Boolean })
-  public narrow = false;
-
  protected render(): TemplateResult {
    if (!this._addon) {
      return html` <hass-loading-screen></hass-loading-screen> `;
    }

-    const iframe = html`<iframe src=${this._addon.ingress_url!}></iframe>`;
-
-    if (!this.ingressPanel) {
-      return html`<hass-subpage
-        .header=${this._addon.name}
-        .narrow=${this.narrow}
-      >
-        ${iframe}
-      </hass-subpage>`;
-    }
-
-    return html`${this.narrow || this.hass.dockedSidebar === "always_hidden"
-      ? html`<div class="header">
-            <mwc-icon-button
-              aria-label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
-              @click=${this._toggleMenu}
-            >
-              <ha-svg-icon path=${mdiMenu}></ha-svg-icon>
-            </mwc-icon-button>
-            <div class="main-title">${this._addon.name}</div>
-          </div>
-          ${iframe}`
-      : iframe}`;
+    return html`
+      <hass-subpage .header=${this._addon.name} hassio>
+        <iframe src=${this._addon.ingress_url}></iframe>
+      </hass-subpage>
+    `;
  }

  protected updated(changedProps: PropertyValues) {
-    super.updated(changedProps);
+    super.firstUpdated(changedProps);

    if (!changedProps.has("route")) {
      return;
@@ -83,56 +56,27 @@ class HassioIngressView extends LitElement {
  }

  private async _fetchData(addonSlug: string) {
-    const createSessionPromise = createHassioSession(this.hass).then(
-      () => true,
-      () => false
-    );
-
-    let addon;
-
    try {
-      addon = await fetchHassioAddonInfo(this.hass, addonSlug);
+      const [addon] = await Promise.all([
+        fetchHassioAddonInfo(this.hass, addonSlug).catch(() => {
+          throw new Error("Failed to fetch add-on info");
+        }),
+        createHassioSession(this.hass).catch(() => {
+          throw new Error("Failed to create an ingress session");
+        }),
+      ]);
+
+      if (!addon.ingress) {
+        throw new Error("This add-on does not support ingress");
+      }
+
+      this._addon = addon;
    } catch (err) {
-      await showAlertDialog(this, {
-        text: "Unable to fetch add-on info to start Ingress",
-        title: "Supervisor",
-      });
+      // eslint-disable-next-line
+      console.error(err);
+      alert(err.message || "Unknown error starting ingress.");
      history.back();
-      return;
    }
-
-    if (!addon.ingress_url) {
-      await showAlertDialog(this, {
-        text: "Add-on does not support Ingress",
-        title: addon.name,
-      });
-      history.back();
-      return;
-    }
-
-    if (addon.state !== "started") {
-      await showAlertDialog(this, {
-        text: "Add-on is not running. Please start it first",
-        title: addon.name,
-      });
-      navigate(this, `/hassio/addon/${addon.slug}/info`, true);
-      return;
-    }
-
-    if (!(await createSessionPromise)) {
-      await showAlertDialog(this, {
-        text: "Unable to create an Ingress session",
-        title: addon.name,
-      });
-      history.back();
-      return;
-    }
-
-    this._addon = addon;
-  }
-
-  private _toggleMenu(): void {
-    fireEvent(this, "hass-toggle-menu");
  }

  static get styles(): CSSResult {
@@ -143,41 +87,6 @@ class HassioIngressView extends LitElement {
        height: 100%;
        border: 0;
      }
-
-      .header + iframe {
-        height: calc(100% - 40px);
-      }
-
-      .header {
-        display: flex;
-        align-items: center;
-        font-size: 16px;
-        height: 40px;
-        padding: 0 16px;
-        pointer-events: none;
-        background-color: var(--app-header-background-color);
-        font-weight: 400;
-        color: var(--app-header-text-color, white);
-        border-bottom: var(--app-header-border-bottom, none);
-        box-sizing: border-box;
-        --mdc-icon-size: 20px;
-      }
-
-      .main-title {
-        margin: 0 0 0 24px;
-        line-height: 20px;
-        flex-grow: 1;
-      }
-
-      mwc-icon-button {
-        pointer-events: auto;
-      }
-
-      hass-subpage {
-        --app-header-background-color: var(--sidebar-background-color);
-        --app-header-text-color: var(--sidebar-text-color);
-        --app-header-border-bottom: 1px solid var(--divider-color);
-      }
    `;
  }
 }
--- a/hassio/src/system/hassio-host-info.ts
+++ b/hassio/src/system/hassio-host-info.ts
@@ -1,23 +1,18 @@
 import "@material/mwc-button";
-import "@material/mwc-list/mwc-list-item";
-import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
-import { mdiDotsVertical } from "@mdi/js";
-import { safeDump } from "js-yaml";
-import memoizeOne from "memoize-one";
 import {
  css,
  CSSResult,
  customElement,
  html,
-  internalProperty,
  LitElement,
  property,
+  internalProperty,
  TemplateResult,
 } from "lit-element";
-
+import "../../../src/components/buttons/ha-call-api-button";
+import { fetchHassioHardwareInfo } from "../../../src/data/hassio/hardware";
 import {
  changeHostOptions,
-  configSyncOS,
  fetchHassioHostInfo,
  HassioHassOSInfo,
  HassioHostInfo as HassioHostInfoType,
@@ -25,26 +20,16 @@ import {
  shutdownHost,
  updateOS,
 } from "../../../src/data/hassio/host";
-import { fetchHassioHardwareInfo } from "../../../src/data/hassio/hardware";
-import {
-  fetchNetworkInfo,
-  NetworkInfo,
-} from "../../../src/data/hassio/network";
 import { HassioInfo } from "../../../src/data/hassio/supervisor";
-import { hassioStyle } from "../resources/hassio-style";
-import { haStyle } from "../../../src/resources/styles";
-import { HomeAssistant } from "../../../src/types";
 import {
  showAlertDialog,
  showConfirmationDialog,
  showPromptDialog,
 } from "../../../src/dialogs/generic/show-dialog-box";
+import { haStyle } from "../../../src/resources/styles";
+import { HomeAssistant } from "../../../src/types";
 import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
-import { showNetworkDialog } from "../dialogs/network/show-dialog-network";
-
-import "../../../src/components/ha-button-menu";
-import "../../../src/components/ha-card";
-import "../../../src/components/ha-settings-row";
+import { hassioStyle } from "../resources/hassio-style";

@customElement("hassio-host-info")
 class HassioHostInfo extends LitElement {
@@ -56,130 +41,86 @@ class HassioHostInfo extends LitElement {

  @property({ attribute: false }) public hassOsInfo!: HassioHassOSInfo;

-  @internalProperty() public _networkInfo?: NetworkInfo;
+  @internalProperty() private _errors?: string;

  public render(): TemplateResult | void {
-    const primaryIpAddress = this.hostInfo.features.includes("network")
-      ? this._primaryIpAddress(this._networkInfo!)
-      : "";
    return html`
-      <ha-card header="Host System">
+      <ha-card>
        <div class="card-content">
+          <h2>Host system</h2>
+          <table class="info">
+            <tbody>
+              <tr>
+                <td>Hostname</td>
+                <td>${this.hostInfo.hostname}</td>
+              </tr>
+              <tr>
+                <td>System</td>
+                <td>${this.hostInfo.operating_system}</td>
+              </tr>
+              ${!this.hostInfo.features.includes("hassos")
+                ? html`<tr>
+                    <td>Docker version</td>
+                    <td>${this.hassioInfo.docker}</td>
+                  </tr>`
+                : ""}
+              ${this.hostInfo.deployment
+                ? html`
+                    <tr>
+                      <td>Deployment</td>
+                      <td>${this.hostInfo.deployment}</td>
+                    </tr>
+                  `
+                : ""}
+            </tbody>
+          </table>
+          <mwc-button raised @click=${this._showHardware} class="info">
+            Hardware
+          </mwc-button>
          ${this.hostInfo.features.includes("hostname")
-            ? html`<ha-settings-row>
-                <span slot="heading">
-                  Hostname
-                </span>
-                <span slot="description">
-                  ${this.hostInfo.hostname}
-                </span>
+            ? html`
                <mwc-button
-                  title="Change the hostname"
-                  label="Change"
+                  raised
                  @click=${this._changeHostnameClicked}
+                  class="info"
                >
+                  Change hostname
                </mwc-button>
-              </ha-settings-row>`
+              `
            : ""}
-          ${this.hostInfo.features.includes("network")
-            ? html` <ha-settings-row>
-                <span slot="heading">
-                  IP address
-                </span>
-                <span slot="description">
-                  ${primaryIpAddress}
-                </span>
-                <mwc-button
-                  title="Change the network"
-                  label="Change"
-                  @click=${this._changeNetworkClicked}
-                >
-                </mwc-button>
-              </ha-settings-row>`
-            : ""}
-
-          <ha-settings-row>
-            <span slot="heading">
-              Operating system
-            </span>
-            <span slot="description">
-              ${this.hostInfo.operating_system}
-            </span>
-            ${this.hostInfo.version !== this.hostInfo.version_latest &&
-            this.hostInfo.features.includes("hassos")
-              ? html`
-                  <mwc-button
-                    title="Update the host OS"
-                    label="Update"
-                    @click=${this._osUpdate}
-                  >
-                  </mwc-button>
-                `
-              : ""}
-          </ha-settings-row>
-          ${!this.hostInfo.features.includes("hassos")
-            ? html`<ha-settings-row>
-                <span slot="heading">
-                  Docker version
-                </span>
-                <span slot="description">
-                  ${this.hassioInfo.docker}
-                </span>
-              </ha-settings-row>`
-            : ""}
-          ${this.hostInfo.deployment
-            ? html`<ha-settings-row>
-                <span slot="heading">
-                  Deployment
-                </span>
-                <span slot="description">
-                  ${this.hostInfo.deployment}
-                </span>
-              </ha-settings-row>`
+          ${this._errors
+            ? html` <div class="errors">Error: ${this._errors}</div> `
            : ""}
        </div>
        <div class="card-actions">
          ${this.hostInfo.features.includes("reboot")
            ? html`
-                <mwc-button
-                  title="Reboot the host OS"
-                  label="Reboot"
-                  class="warning"
-                  @click=${this._hostReboot}
+                <mwc-button class="warning" @click=${this._rebootHost}
+                  >Reboot</mwc-button
                >
-                </mwc-button>
              `
            : ""}
          ${this.hostInfo.features.includes("shutdown")
            ? html`
-                <mwc-button
-                  title="Shutdown the host OS"
-                  label="Shutdown"
-                  class="warning"
-                  @click=${this._hostShutdown}
+                <mwc-button class="warning" @click=${this._shutdownHost}
+                  >Shutdown</mwc-button
                >
-                </mwc-button>
              `
            : ""}
-
-          <ha-button-menu
-            corner="BOTTOM_START"
-            @action=${this._handleMenuAction}
-          >
-            <mwc-icon-button slot="trigger">
-              <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
-            </mwc-icon-button>
-            <mwc-list-item title="Show a list of hardware">
-              Hardware
-            </mwc-list-item>
-            ${this.hostInfo.features.includes("hassos")
-              ? html`<mwc-list-item
+          ${this.hostInfo.features.includes("hassos")
+            ? html`
+                <ha-call-api-button
+                  class="warning"
+                  .hass=${this.hass}
+                  path="hassio/os/config/sync"
                  title="Load HassOS configs or updates from USB"
+                  >Import from USB</ha-call-api-button
                >
-                  Import from USB
-                </mwc-list-item>`
-              : ""}
-          </ha-button-menu>
+              `
+            : ""}
+          ${this.hostInfo.version !== this.hostInfo.version_latest
+            ? html` <mwc-button @click=${this._updateOS}>Update</mwc-button> `
+            : ""}
        </div>
      </ha-card>
    `;
@@ -192,96 +133,72 @@ class HassioHostInfo extends LitElement {
      css`
        ha-card {
          height: 100%;
-          justify-content: space-between;
-          flex-direction: column;
-          display: flex;
-        }
-        .card-actions {
-          height: 48px;
-          border-top: none;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-        }
-        ha-settings-row {
-          padding: 0;
-          height: 54px;
          width: 100%;
        }
-        ha-settings-row[three-line] {
-          height: 74px;
+        .card-content {
+          color: var(--primary-text-color);
+          box-sizing: border-box;
+          height: calc(100% - 47px);
        }
-        ha-settings-row > span[slot="description"] {
-          white-space: normal;
-          color: var(--secondary-text-color);
+        .info {
+          width: 100%;
+        }
+        .info td:nth-child(2) {
+          text-align: right;
+        }
+        .errors {
+          color: var(--error-color);
+          margin-top: 16px;
+        }
+        mwc-button.info {
+          max-width: calc(50% - 12px);
+        }
+        table.info {
+          margin-bottom: 10px;
        }
-
        .warning {
          --mdc-theme-primary: var(--error-color);
        }
-
-        ha-button-menu {
-          color: var(--secondary-text-color);
-          --mdc-menu-min-width: 200px;
-        }
-        @media (min-width: 563px) {
-          paper-listbox {
-            max-height: 150px;
-            overflow: auto;
-          }
-        }
-        paper-item {
-          cursor: pointer;
-          min-height: 35px;
-        }
-        mwc-list-item ha-svg-icon {
-          color: var(--secondary-text-color);
-        }
      `,
    ];
  }

  protected firstUpdated(): void {
-    this._loadData();
+    this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
  }

-  private _primaryIpAddress = memoizeOne((network_info: NetworkInfo) => {
-    if (!network_info) {
-      return "";
+  private _apiCalled(ev): void {
+    if (ev.detail.success) {
+      this._errors = undefined;
+      return;
    }
-    return Object.keys(network_info?.interfaces)
-      .map((device) => network_info.interfaces[device])
-      .find((device) => device.primary)?.ip_address;
-  });

-  private async _handleMenuAction(ev: CustomEvent<ActionDetail>) {
-    switch (ev.detail.index) {
-      case 0:
-        await this._showHardware();
-        break;
-      case 1:
-        await this._importFromUSB();
-        break;
-    }
+    const response = ev.detail.response;
+
+    this._errors =
+      typeof response.body === "object"
+        ? response.body.message || "Unknown error"
+        : response.body;
  }

  private async _showHardware(): Promise<void> {
    try {
-      const content = await fetchHassioHardwareInfo(this.hass);
+      const content = this._objectToMarkdown(
+        await fetchHassioHardwareInfo(this.hass)
+      );
      showHassioMarkdownDialog(this, {
        title: "Hardware",
-        content: `<pre>${safeDump(content, { indent: 2 })}</pre>`,
+        content,
      });
    } catch (err) {
-      showAlertDialog(this, {
-        title: "Failed to get Hardware list",
-        text:
-          typeof err === "object" ? err.body?.message || "Unkown error" : err,
+      showHassioMarkdownDialog(this, {
+        title: "Hardware",
+        content: "Error getting hardware info",
      });
    }
  }

-  private async _hostReboot(): Promise<void> {
+  private async _rebootHost(): Promise<void> {
    const confirmed = await showConfirmationDialog(this, {
      title: "Reboot",
      text: "Are you sure you want to reboot the host?",
@@ -298,13 +215,12 @@ class HassioHostInfo extends LitElement {
    } catch (err) {
      showAlertDialog(this, {
        title: "Failed to reboot",
-        text:
-          typeof err === "object" ? err.body?.message || "Unkown error" : err,
+        text: err.body.message,
      });
    }
  }

-  private async _hostShutdown(): Promise<void> {
+  private async _shutdownHost(): Promise<void> {
    const confirmed = await showConfirmationDialog(this, {
      title: "Shutdown",
      text: "Are you sure you want to shutdown the host?",
@@ -321,13 +237,12 @@ class HassioHostInfo extends LitElement {
    } catch (err) {
      showAlertDialog(this, {
        title: "Failed to shutdown",
-        text:
-          typeof err === "object" ? err.body?.message || "Unkown error" : err,
+        text: err.body.message,
      });
    }
  }

-  private async _osUpdate(): Promise<void> {
+  private async _updateOS(): Promise<void> {
    const confirmed = await showConfirmationDialog(this, {
      title: "Update",
      text: "Are you sure you want to update the OS?",
@@ -344,17 +259,30 @@ class HassioHostInfo extends LitElement {
    } catch (err) {
      showAlertDialog(this, {
        title: "Failed to update",
-        text:
-          typeof err === "object" ? err.body?.message || "Unkown error" : err,
+        text: err.body.message,
      });
    }
  }

-  private async _changeNetworkClicked(): Promise<void> {
-    showNetworkDialog(this, {
-      network: this._networkInfo!,
-      loadData: () => this._loadData(),
+  private _objectToMarkdown(obj, indent = ""): string {
+    let data = "";
+    Object.keys(obj).forEach((key) => {
+      if (typeof obj[key] !== "object") {
+        data += `${indent}- ${key}: ${obj[key]}\n`;
+      } else {
+        data += `${indent}- ${key}:\n`;
+        if (Array.isArray(obj[key])) {
+          if (obj[key].length) {
+            data +=
+              `${indent}    - ` + obj[key].join(`\n${indent}    - `) + "\n";
+          }
+        } else {
+          data += this._objectToMarkdown(obj[key], `    ${indent}`);
+        }
+      }
    });
+
+    return data;
  }

  private async _changeHostnameClicked(): Promise<void> {
@@ -373,29 +301,11 @@ class HassioHostInfo extends LitElement {
      } catch (err) {
        showAlertDialog(this, {
          title: "Setting hostname failed",
-          text:
-            typeof err === "object" ? err.body?.message || "Unkown error" : err,
+          text: err.body.message,
        });
      }
    }
  }
-
-  private async _importFromUSB(): Promise<void> {
-    try {
-      await configSyncOS(this.hass);
-      this.hostInfo = await fetchHassioHostInfo(this.hass);
-    } catch (err) {
-      showAlertDialog(this, {
-        title: "Failed to import from USB",
-        text:
-          typeof err === "object" ? err.body?.message || "Unkown error" : err,
-      });
-    }
-  }
-
-  private async _loadData(): Promise<void> {
-    this._networkInfo = await fetchNetworkInfo(this.hass);
-  }
 }

 declare global {
--- a/hassio/src/system/hassio-supervisor-info.ts
+++ b/hassio/src/system/hassio-supervisor-info.ts
@@ -6,28 +6,21 @@ import {
  html,
  LitElement,
  property,
+  internalProperty,
  TemplateResult,
 } from "lit-element";
-
-import { HassioHostInfo as HassioHostInfoType } from "../../../src/data/hassio/host";
-import { hassioStyle } from "../resources/hassio-style";
-import { haStyle } from "../../../src/resources/styles";
-import { HomeAssistant } from "../../../src/types";
+import { fireEvent } from "../../../src/common/dom/fire_event";
+import "../../../src/components/buttons/ha-call-api-button";
+import "../../../src/components/ha-card";
 import {
  HassioSupervisorInfo as HassioSupervisorInfoType,
-  reloadSupervisor,
  setSupervisorOption,
  SupervisorOptions,
-  updateSupervisor,
 } from "../../../src/data/hassio/supervisor";
-import {
-  showAlertDialog,
-  showConfirmationDialog,
-} from "../../../src/dialogs/generic/show-dialog-box";
-
-import "../../../src/components/ha-card";
-import "../../../src/components/ha-settings-row";
-import "../../../src/components/ha-switch";
+import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box";
+import { haStyle } from "../../../src/resources/styles";
+import { HomeAssistant } from "../../../src/types";
+import { hassioStyle } from "../resources/hassio-style";

@customElement("hassio-supervisor-info")
 class HassioSupervisorInfo extends LitElement {
@@ -35,110 +28,70 @@ class HassioSupervisorInfo extends LitElement {

  @property() public supervisorInfo!: HassioSupervisorInfoType;

-  @property() public hostInfo!: HassioHostInfoType;
+  @internalProperty() private _errors?: string;

  public render(): TemplateResult | void {
    return html`
-      <ha-card header="Supervisor">
+      <ha-card>
        <div class="card-content">
-          <ha-settings-row>
-            <span slot="heading">
-              Version
-            </span>
-            <span slot="description">
-              ${this.supervisorInfo.version}
-            </span>
-          </ha-settings-row>
-          <ha-settings-row>
-            <span slot="heading">
-              Newest version
-            </span>
-            <span slot="description">
-              ${this.supervisorInfo.version_latest}
-            </span>
-            ${this.supervisorInfo.version !== this.supervisorInfo.version_latest
-              ? html`
-                  <mwc-button
-                    title="Update the supervisor"
-                    label="Update"
-                    @click=${this._supervisorUpdate}
-                  >
-                  </mwc-button>
-                `
-              : ""}
-          </ha-settings-row>
-          <ha-settings-row>
-            <span slot="heading">
-              Channel
-            </span>
-            <span slot="description">
-              ${this.supervisorInfo.channel}
-            </span>
-            ${this.supervisorInfo.channel === "beta"
-              ? html`
-                  <mwc-button
-                    @click=${this._toggleBeta}
-                    label="Leave beta channel"
-                    title="Get stable updates for Home Assistant, supervisor and host"
-                  >
-                  </mwc-button>
-                `
-              : this.supervisorInfo.channel === "stable"
-              ? html`
-                  <mwc-button
-                    @click=${this._toggleBeta}
-                    label="Join beta channel"
-                    title="Get beta updates for Home Assistant (RCs), supervisor and host"
-                  >
-                  </mwc-button>
-                `
-              : ""}
-          </ha-settings-row>
-
-          ${this.supervisorInfo?.supported
-            ? html` <ha-settings-row three-line>
-                <span slot="heading">
-                  Share diagnostics
-                </span>
-                <div slot="description" class="diagnostics-description">
-                  Share crash reports and diagnostic information.
-                  <button
-                    class="link"
-                    title="Show more information about this"
-                    @click=${this._diagnosticsInformationDialog}
-                  >
-                    Learn more
-                  </button>
-                </div>
-                <ha-switch
-                  haptic
-                  .checked=${this.supervisorInfo.diagnostics}
-                  @change=${this._toggleDiagnostics}
-                ></ha-switch>
-              </ha-settings-row>`
-            : html`<div class="error">
-                You are running an unsupported installation.
-                <a
-                  href="https://github.com/home-assistant/architecture/blob/master/adr/${this.hostInfo.features.includes(
-                    "hassos"
-                  )
-                    ? "0015-home-assistant-os.md"
-                    : "0014-home-assistant-supervised.md"}"
-                  target="_blank"
-                  rel="noreferrer"
-                  title="Learn more about how you can make your system compliant"
-                >
-                  Learn More
-                </a>
-              </div>`}
+          <h2>Supervisor</h2>
+          <table class="info">
+            <tbody>
+              <tr>
+                <td>Version</td>
+                <td>${this.supervisorInfo.version}</td>
+              </tr>
+              <tr>
+                <td>Latest version</td>
+                <td>${this.supervisorInfo.version_latest}</td>
+              </tr>
+              ${this.supervisorInfo.channel !== "stable"
+                ? html`
+                    <tr>
+                      <td>Channel</td>
+                      <td>${this.supervisorInfo.channel}</td>
+                    </tr>
+                  `
+                : ""}
+            </tbody>
+          </table>
+          ${this._errors
+            ? html` <div class="errors">Error: ${this._errors}</div> `
+            : ""}
        </div>
        <div class="card-actions">
-          <mwc-button
-            @click=${this._supervisorReload}
-            title="Reload parts of the supervisor."
-            label="Reload"
+          <ha-call-api-button .hass=${this.hass} path="hassio/supervisor/reload"
+            >Reload</ha-call-api-button
          >
-          </mwc-button>
+          ${this.supervisorInfo.version !== this.supervisorInfo.version_latest
+            ? html`
+                <ha-call-api-button
+                  .hass=${this.hass}
+                  path="hassio/supervisor/update"
+                  >Update</ha-call-api-button
+                >
+              `
+            : ""}
+          ${this.supervisorInfo.channel === "beta"
+            ? html`
+                <ha-call-api-button
+                  .hass=${this.hass}
+                  path="hassio/supervisor/options"
+                  .data=${{ channel: "stable" }}
+                  >Leave beta channel</ha-call-api-button
+                >
+              `
+            : ""}
+          ${this.supervisorInfo.channel === "stable"
+            ? html`
+                <mwc-button
+                  @click=${this._joinBeta}
+                  class="warning"
+                  title="Get beta updates for Home Assistant (RCs), supervisor and host"
+                  >Join beta channel</mwc-button
+                >
+              `
+            : ""}
        </div>
      </ha-card>
    `;
@@ -151,129 +104,81 @@ class HassioSupervisorInfo extends LitElement {
      css`
        ha-card {
          height: 100%;
-          justify-content: space-between;
-          flex-direction: column;
-          display: flex;
-        }
-        .card-actions {
-          height: 48px;
-          border-top: none;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-        }
-        button.link {
-          color: var(--primary-color);
-        }
-        ha-settings-row {
-          padding: 0;
-          height: 54px;
          width: 100%;
        }
-        ha-settings-row[three-line] {
-          height: 74px;
+        .card-content {
+          color: var(--primary-text-color);
+          box-sizing: border-box;
+          height: calc(100% - 47px);
        }
-        ha-settings-row > span[slot="description"] {
-          white-space: normal;
-          color: var(--secondary-text-color);
+        .info {
+          width: 100%;
+        }
+        .info td:nth-child(2) {
+          text-align: right;
+        }
+        .errors {
+          color: var(--error-color);
+          margin-top: 16px;
        }
      `,
    ];
  }

-  private async _toggleBeta(): Promise<void> {
-    if (this.supervisorInfo.channel === "stable") {
-      const confirmed = await showConfirmationDialog(this, {
-        title: "WARNING",
-        text: html` Beta releases are for testers and early adopters and can
-          contain unstable code changes.
-          <br />
-          <b>
-            Make sure you have backups of your data before you activate this
-            feature.
-          </b>
-          <br /><br />
-          This includes beta releases for:
-          <li>Home Assistant Core</li>
-          <li>Home Assistant Supervisor</li>
-          <li>Home Assistant Operating System</li>
-          <br />
-          Do you want to join the beta channel?`,
-        confirmText: "join beta",
-        dismissText: "no",
-      });
-
-      if (!confirmed) {
-        return;
-      }
-    }
-
-    try {
-      const data: Partial<SupervisorOptions> = {
-        channel: this.supervisorInfo.channel !== "stable" ? "beta" : "stable",
-      };
-      await setSupervisorOption(this.hass, data);
-      await reloadSupervisor(this.hass);
-    } catch (err) {
-      showAlertDialog(this, {
-        title: "Failed to set supervisor option",
-        text:
-          typeof err === "object" ? err.body?.message || "Unkown error" : err,
-      });
-    }
+  protected firstUpdated(): void {
+    this.addEventListener("hass-api-called", (ev) => this._apiCalled(ev));
  }

-  private async _supervisorReload(): Promise<void> {
-    try {
-      await reloadSupervisor(this.hass);
-    } catch (err) {
-      showAlertDialog(this, {
-        title: "Failed to reload the supervisor",
-        text:
-          typeof err === "object" ? err.body?.message || "Unkown error" : err,
-      });
+  private _apiCalled(ev): void {
+    if (ev.detail.success) {
+      this._errors = undefined;
+      return;
    }
+
+    const response = ev.detail.response;
+
+    this._errors =
+      typeof response.body === "object"
+        ? response.body.message || "Unknown error"
+        : response.body;
  }

-  private async _supervisorUpdate(): Promise<void> {
-    try {
-      await updateSupervisor(this.hass);
-    } catch (err) {
-      showAlertDialog(this, {
-        title: "Failed to update the supervisor",
-        text:
-          typeof err === "object" ? err.body.message || "Unkown error" : err,
-      });
-    }
-  }
-
-  private async _diagnosticsInformationDialog(): Promise<void> {
-    await showAlertDialog(this, {
-      title: "Help Improve Home Assistant",
-      text: html`Would you want to automatically share crash reports and
-        diagnostic information when the supervisor encounters unexpected errors?
+  private async _joinBeta() {
+    const confirmed = await showConfirmationDialog(this, {
+      title: "WARNING",
+      text: html` Beta releases are for testers and early adopters and can
+        contain unstable code changes.
+        <br />
+        <b>
+          Make sure you have backups of your data before you activate this
+          feature.
+        </b>
        <br /><br />
-        This will allow us to fix the problems, the information is only
-        accessible to the Home Assistant Core team and will not be shared with
-        others.
-        <br /><br />
-        The data does not include any private/sensitive information and you can
-        disable this in settings at any time you want.`,
+        This includes beta releases for:
+        <li>Home Assistant Core</li>
+        <li>Home Assistant Supervisor</li>
+        <li>Home Assistant Operating System</li>
+        <br />
+        Do you want to join the beta channel?`,
+      confirmText: "join beta",
+      dismissText: "no",
    });
-  }

-  private async _toggleDiagnostics(): Promise<void> {
+    if (!confirmed) {
+      return;
+    }
+
    try {
-      const data: SupervisorOptions = {
-        diagnostics: !this.supervisorInfo?.diagnostics,
-      };
+      const data: SupervisorOptions = { channel: "beta" };
      await setSupervisorOption(this.hass, data);
+      const eventdata = {
+        success: true,
+        response: undefined,
+        path: "option",
+      };
+      fireEvent(this, "hass-api-called", eventdata);
    } catch (err) {
-      showAlertDialog(this, {
-        title: "Failed to set supervisor option",
-        text:
-          typeof err === "object" ? err.body.message || "Unkown error" : err,
-      });
+      this._errors = `Error joining beta channel, ${err.body?.message || err}`;
    }
  }
 }
--- a/hassio/src/system/hassio-supervisor-log.ts
+++ b/hassio/src/system/hassio-supervisor-log.ts
@@ -7,20 +7,18 @@ import {
  CSSResult,
  customElement,
  html,
-  internalProperty,
  LitElement,
  property,
+  internalProperty,
  TemplateResult,
 } from "lit-element";
-
+import "../../../src/components/ha-card";
 import { fetchHassioLogs } from "../../../src/data/hassio/supervisor";
-import { hassioStyle } from "../resources/hassio-style";
+import "../../../src/layouts/hass-loading-screen";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
-
-import "../../../src/components/ha-card";
-import "../../../src/layouts/hass-loading-screen";
 import "../components/hassio-ansi-to-html";
+import { hassioStyle } from "../resources/hassio-style";

 interface LogProvider {
  key: string;
@@ -104,7 +102,7 @@ class HassioSupervisorLog extends LitElement {
            : html`<hass-loading-screen no-toolbar></hass-loading-screen>`}
        </div>
        <div class="card-actions">
-          <mwc-button @click=${this._loadData}>Refresh</mwc-button>
+          <mwc-button @click=${this._refresh}>Refresh</mwc-button>
        </div>
      </ha-card>
    `;
@@ -116,7 +114,6 @@ class HassioSupervisorLog extends LitElement {
      hassioStyle,
      css`
        ha-card {
-          margin-top: 8px;
          width: 100%;
        }
        pre {
@@ -130,6 +127,9 @@ class HassioSupervisorLog extends LitElement {
          color: var(--error-color);
          margin-bottom: 16px;
        }
+        .card-content {
+          padding-top: 0px;
+        }
      `,
    ];
  }
@@ -142,6 +142,7 @@ class HassioSupervisorLog extends LitElement {

  private async _loadData(): Promise<void> {
    this._error = undefined;
+    this._content = undefined;

    try {
      this._content = await fetchHassioLogs(
@@ -150,10 +151,14 @@ class HassioSupervisorLog extends LitElement {
      );
    } catch (err) {
      this._error = `Failed to get supervisor logs, ${
-        typeof err === "object" ? err.body?.message || "Unkown error" : err
+        err.body?.message || err
      }`;
    }
  }
+
+  private async _refresh(): Promise<void> {
+    await this._loadData();
+  }
 }

 declare global {
--- a/hassio/src/system/hassio-system.ts
+++ b/hassio/src/system/hassio-system.ts
@@ -52,10 +52,10 @@ class HassioSystem extends LitElement {
      >
        <span slot="header">System</span>
        <div class="content">
+          <h1>Information</h1>
          <div class="card-group">
            <hassio-supervisor-info
              .hass=${this.hass}
-              .hostInfo=${this.hostInfo}
              .supervisorInfo=${this.supervisorInfo}
            ></hassio-supervisor-info>
            <hassio-host-info
@@ -65,6 +65,7 @@ class HassioSystem extends LitElement {
              .hassOsInfo=${this.hassOsInfo}
            ></hassio-host-info>
          </div>
+          <h1>System log</h1>
          <hassio-supervisor-log .hass=${this.hass}></hassio-supervisor-log>
        </div>
      </hass-tabs-subpage>
--- a/package.json
+++ b/package.json
@@ -23,29 +23,25 @@
  "license": "Apache-2.0",
  "dependencies": {
    "@formatjs/intl-pluralrules": "^1.5.8",
-    "@fullcalendar/common": "5.1.0",
-    "@fullcalendar/core": "5.1.0",
-    "@fullcalendar/daygrid": "5.1.0",
-    "@fullcalendar/interaction": "5.1.0",
-    "@fullcalendar/list": "5.1.0",
-    "@material/chips": "=8.0.0-canary.096a7a066.0",
+    "@fullcalendar/core": "^5.0.0-beta.2",
+    "@fullcalendar/daygrid": "^5.0.0-beta.2",
+    "@material/chips": "=8.0.0-canary.a78ceb112.0",
    "@material/circular-progress": "=8.0.0-canary.a78ceb112.0",
-    "@material/mwc-button": "^0.18.0",
-    "@material/mwc-checkbox": "^0.18.0",
-    "@material/mwc-dialog": "^0.18.0",
-    "@material/mwc-fab": "^0.18.0",
-    "@material/mwc-formfield": "^0.18.0",
-    "@material/mwc-icon-button": "^0.18.0",
-    "@material/mwc-list": "^0.18.0",
-    "@material/mwc-menu": "^0.18.0",
-    "@material/mwc-radio": "^0.18.0",
-    "@material/mwc-ripple": "^0.18.0",
-    "@material/mwc-switch": "^0.18.0",
-    "@material/mwc-tab": "^0.18.0",
-    "@material/mwc-tab-bar": "^0.18.0",
-    "@material/top-app-bar": "=8.0.0-canary.096a7a066.0",
-    "@mdi/js": "5.5.55",
-    "@mdi/svg": "5.5.55",
+    "@material/mwc-button": "^0.17.2",
+    "@material/mwc-checkbox": "^0.17.2",
+    "@material/mwc-dialog": "^0.17.2",
+    "@material/mwc-fab": "^0.17.2",
+    "@material/mwc-formfield": "^0.17.2",
+    "@material/mwc-icon-button": "^0.17.2",
+    "@material/mwc-list": "^0.17.2",
+    "@material/mwc-menu": "^0.17.2",
+    "@material/mwc-ripple": "^0.17.2",
+    "@material/mwc-switch": "^0.17.2",
+    "@material/mwc-tab": "^0.17.2",
+    "@material/mwc-tab-bar": "^0.17.2",
+    "@material/top-app-bar": "=8.0.0-canary.a78ceb112.0",
+    "@mdi/js": "5.3.45",
+    "@mdi/svg": "5.3.45",
    "@polymer/app-layout": "^3.0.2",
    "@polymer/app-route": "^3.0.2",
    "@polymer/app-storage": "^3.0.2",
@@ -88,7 +84,6 @@
    "codemirror": "^5.49.0",
    "comlink": "^4.3.0",
    "cpx": "^1.5.0",
-    "cropperjs": "^1.5.7",
    "deep-clone-simple": "^1.1.1",
    "deep-freeze": "^0.0.1",
    "es6-object-assign": "^1.1.0",
@@ -105,12 +100,11 @@
    "lit-element": "^2.3.1",
    "lit-html": "^1.2.1",
    "lit-virtualizer": "^0.4.2",
-    "marked": "^1.1.1",
+    "marked": "^0.6.1",
    "mdn-polyfills": "^5.16.0",
    "memoize-one": "^5.0.2",
    "node-vibrant": "^3.1.5",
    "proxy-polyfill": "^0.3.1",
-    "punycode": "^2.1.1",
    "regenerator-runtime": "^0.13.2",
    "resize-observer-polyfill": "^1.5.1",
    "roboto-fontface": "^0.10.0",
@@ -142,14 +136,13 @@
    "@rollup/plugin-replace": "^2.3.2",
    "@types/chai": "^4.1.7",
    "@types/chromecast-caf-receiver": "^3.0.12",
-    "@types/codemirror": "^0.0.97",
+    "@types/codemirror": "^0.0.78",
    "@types/hls.js": "^0.12.3",
    "@types/js-yaml": "^3.12.1",
    "@types/leaflet": "^1.4.3",
    "@types/leaflet-draw": "^1.0.1",
-    "@types/marked": "^1.1.0",
    "@types/memoize-one": "4.1.0",
-    "@types/mocha": "^7.0.2",
+    "@types/mocha": "^5.2.6",
    "@types/resize-observer-browser": "^0.1.3",
    "@types/webspeechapi": "^0.0.29",
    "@typescript-eslint/eslint-plugin": "^2.28.0",
@@ -160,7 +153,7 @@
    "eslint": "^6.8.0",
    "eslint-config-airbnb-typescript": "^7.2.1",
    "eslint-config-prettier": "^6.10.1",
-    "eslint-import-resolver-webpack": "^0.12.2",
+    "eslint-import-resolver-webpack": "^0.12.1",
    "eslint-plugin-disable": "^2.0.1",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-lit": "^1.2.0",
@@ -183,7 +176,7 @@
    "magic-string": "^0.25.7",
    "map-stream": "^0.0.7",
    "merge-stream": "^1.0.1",
-    "mocha": "^7.2.0",
+    "mocha": "^6.0.2",
    "object-hash": "^2.0.3",
    "open": "^7.0.4",
    "prettier": "^2.0.4",
@@ -200,7 +193,7 @@
    "systemjs": "^6.3.2",
    "terser-webpack-plugin": "^3.0.6",
    "ts-lit-plugin": "^1.2.0",
-    "ts-mocha": "^7.0.0",
+    "ts-mocha": "^6.0.0",
    "typescript": "^3.8.3",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0",
@@ -217,11 +210,7 @@
    "@webcomponents/webcomponentsjs": "^2.2.10",
    "@polymer/polymer": "3.1.0",
    "lit-html": "1.2.1",
-    "lit-element": "2.3.1",
-    "@material/animation": "8.0.0-canary.096a7a066.0",
-    "@material/base": "8.0.0-canary.096a7a066.0",
-    "@material/feature-targeting": "8.0.0-canary.096a7a066.0",
-    "@material/theme": "8.0.0-canary.096a7a066.0"
+    "lit-element": "2.3.1"
  },
  "main": "src/home-assistant.js",
  "husky": {
--- a/setup.py
+++ b/setup.py
@@ -2,7 +2,7 @@ from setuptools import setup, find_packages

 setup(
    name="home-assistant-frontend",
-    version="20200824.0",
+    version="20200716.0",
    description="The Home Assistant frontend",
    url="https://github.com/home-assistant/home-assistant-polymer",
    author="The Home Assistant Authors",
--- a/src/auth/ha-authorize.ts
+++ b/src/auth/ha-authorize.ts
@@ -16,7 +16,6 @@ import { litLocalizeLiteMixin } from "../mixins/lit-localize-lite-mixin";
 import { registerServiceWorker } from "../util/register-service-worker";
 import "./ha-auth-flow";
 import { extractSearchParamsObject } from "../common/url/search-params";
-import punycode from "punycode";

 import(/* webpackChunkName: "pick-auth-provider" */ "./ha-pick-auth-provider");

@@ -76,7 +75,7 @@ class HaAuthorize extends litLocalizeLiteMixin(LitElement) {
        ${this.localize(
          "ui.panel.page-authorize.authorizing_client",
          "clientId",
-          this.clientId ? punycode.toASCII(this.clientId) : this.clientId
+          this.clientId
        )}
      </p>
      ${loggingInWith}
--- a/src/common/color/convert-color.ts
+++ b/src/common/color/convert-color.ts
@@ -1,113 +0,0 @@
-const expand_hex = (hex: string): string => {
-  let result = "";
-  for (const val of hex) {
-    result += val + val;
-  }
-  return result;
-};
-
-const rgb_hex = (component: number): string => {
-  const hex = Math.round(Math.min(Math.max(component, 0), 255)).toString(16);
-  return hex.length === 1 ? `0${hex}` : hex;
-};
-
-// Conversion between HEX and RGB
-
-export const hex2rgb = (hex: string): [number, number, number] => {
-  hex = hex.replace("#", "");
-  if (hex.length === 3 || hex.length === 4) {
-    hex = expand_hex(hex);
-  }
-
-  return [
-    parseInt(hex.substring(0, 2), 16),
-    parseInt(hex.substring(2, 4), 16),
-    parseInt(hex.substring(4, 6), 16),
-  ];
-};
-
-export const rgb2hex = (rgb: [number, number, number]): string => {
-  return `#${rgb_hex(rgb[0])}${rgb_hex(rgb[1])}${rgb_hex(rgb[2])}`;
-};
-
-// Conversion between LAB, XYZ and RGB from https://github.com/gka/chroma.js
-// Copyright (c) 2011-2019, Gregor Aisch
-
-// Constants for XYZ and LAB conversion
-const Xn = 0.95047;
-const Yn = 1;
-const Zn = 1.08883;
-
-const t0 = 0.137931034; // 4 / 29
-const t1 = 0.206896552; // 6 / 29
-const t2 = 0.12841855; // 3 * t1 * t1
-const t3 = 0.008856452; // t1 * t1 * t1
-
-const rgb_xyz = (r: number) => {
-  r /= 255;
-  if (r <= 0.04045) {
-    return r / 12.92;
-  }
-  return ((r + 0.055) / 1.055) ** 2.4;
-};
-
-const xyz_lab = (t: number) => {
-  if (t > t3) {
-    return t ** (1 / 3);
-  }
-  return t / t2 + t0;
-};
-
-const xyz_rgb = (r: number) => {
-  return 255 * (r <= 0.00304 ? 12.92 * r : 1.055 * r ** (1 / 2.4) - 0.055);
-};
-
-const lab_xyz = (t: number) => {
-  return t > t1 ? t * t * t : t2 * (t - t0);
-};
-
-// Conversions between RGB and LAB
-
-const rgb2xyz = (rgb: [number, number, number]): [number, number, number] => {
-  let [r, g, b] = rgb;
-  r = rgb_xyz(r);
-  g = rgb_xyz(g);
-  b = rgb_xyz(b);
-  const x = xyz_lab((0.4124564 * r + 0.3575761 * g + 0.1804375 * b) / Xn);
-  const y = xyz_lab((0.2126729 * r + 0.7151522 * g + 0.072175 * b) / Yn);
-  const z = xyz_lab((0.0193339 * r + 0.119192 * g + 0.9503041 * b) / Zn);
-  return [x, y, z];
-};
-
-export const rgb2lab = (
-  rgb: [number, number, number]
-): [number, number, number] => {
-  const [x, y, z] = rgb2xyz(rgb);
-  const l = 116 * y - 16;
-  return [l < 0 ? 0 : l, 500 * (x - y), 200 * (y - z)];
-};
-
-export const lab2rgb = (
-  lab: [number, number, number]
-): [number, number, number] => {
-  const [l, a, b] = lab;
-
-  let y = (l + 16) / 116;
-  let x = isNaN(a) ? y : y + a / 500;
-  let z = isNaN(b) ? y : y - b / 200;
-
-  y = Yn * lab_xyz(y);
-  x = Xn * lab_xyz(x);
-  z = Zn * lab_xyz(z);
-
-  const r = xyz_rgb(3.2404542 * x - 1.5371385 * y - 0.4985314 * z); // D65 -> sRGB
-  const g = xyz_rgb(-0.969266 * x + 1.8760108 * y + 0.041556 * z);
-  const b_ = xyz_rgb(0.0556434 * x - 0.2040259 * y + 1.0572252 * z);
-
-  return [r, g, b_];
-};
-
-export const lab2hex = (lab: [number, number, number]): string => {
-  const rgb = lab2rgb(lab);
-  return rgb2hex(rgb);
-};
--- a/src/common/color/lab.ts
+++ b/src/common/color/lab.ts
@@ -1,16 +0,0 @@
-// From https://github.com/gka/chroma.js
-// Copyright (c) 2011-2019, Gregor Aisch
-
-export const labDarken = (
-  lab: [number, number, number],
-  amount = 1
-): [number, number, number] => {
-  return [lab[0] - 18 * amount, lab[1], lab[2]];
-};
-
-export const labBrighten = (
-  lab: [number, number, number],
-  amount = 1
-): [number, number, number] => {
-  return labDarken(lab, -amount);
-};
--- a/src/common/color/rgb.ts
+++ b/src/common/color/rgb.ts
@@ -1,24 +0,0 @@
-const luminosity = (rgb: [number, number, number]): number => {
-  // http://www.w3.org/TR/WCAG20/#relativeluminancedef
-  const lum: [number, number, number] = [0, 0, 0];
-  for (let i = 0; i < rgb.length; i++) {
-    const chan = rgb[i] / 255;
-    lum[i] = chan <= 0.03928 ? chan / 12.92 : ((chan + 0.055) / 1.055) ** 2.4;
-  }
-
-  return 0.2126 * lum[0] + 0.7152 * lum[1] + 0.0722 * lum[2];
-};
-
-export const rgbContrast = (
-  color1: [number, number, number],
-  color2: [number, number, number]
-) => {
-  const lum1 = luminosity(color1);
-  const lum2 = luminosity(color2);
-
-  if (lum1 > lum2) {
-    return (lum1 + 0.05) / (lum2 + 0.05);
-  }
-
-  return (lum2 + 0.05) / (lum1 + 0.05);
-};
--- a/src/common/config/is_service_loaded.ts
+++ b/src/common/config/is_service_loaded.ts
@@ -1,9 +0,0 @@
-import { HomeAssistant } from "../../types";
-
-/** Return if a service is loaded. */
-export const isServiceLoaded = (
-  hass: HomeAssistant,
-  domain: string,
-  service: string
-): boolean =>
-  hass && domain in hass.services && service in hass.services[domain];
--- a/src/common/datetime/duration_to_seconds.ts
+++ b/src/common/datetime/duration_to_seconds.ts
@@ -1,4 +1,10 @@
 export default function durationToSeconds(duration: string): number {
+  let days = 0;
+  if (duration.includes("day")) {
+    const position = duration.indexOf("day");
+    days = Number(duration.substr(0, position));
+    duration = duration.split(",")[1];
+  }
  const parts = duration.split(":").map(Number);
-  return parts[0] * 3600 + parts[1] * 60 + parts[2];
+  return (days * 24 + parts[0]) * 3600 + parts[1] * 60 + parts[2];
 }
--- a/src/common/datetime/relative_time.ts
+++ b/src/common/datetime/relative_time.ts
@@ -21,11 +21,6 @@ export default function relativeTime(
  const tense = delta >= 0 ? "past" : "future";
  delta = Math.abs(delta);
  let roundedDelta = Math.round(delta);
-
-  if (roundedDelta === 0) {
-    return localize("ui.components.relative_time.just_now");
-  }
-
  let unit = "week";

  for (let i = 0; i < tests.length; i++) {
--- a/src/common/dom/apply_themes_on_element.ts
+++ b/src/common/dom/apply_themes_on_element.ts
@@ -1,20 +1,26 @@
-import { derivedStyles, darkStyles } from "../../resources/styles";
+import { derivedStyles } from "../../resources/styles";
 import { HomeAssistant, Theme } from "../../types";
-import {
-  hex2rgb,
-  rgb2hex,
-  rgb2lab,
-  lab2rgb,
-  lab2hex,
-} from "../color/convert-color";
-import { rgbContrast } from "../color/rgb";
-import { labDarken, labBrighten } from "../color/lab";

 interface ProcessedTheme {
  keys: { [key: string]: "" };
  styles: { [key: string]: string };
 }

+const hexToRgb = (hex: string): string | null => {
+  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+  const checkHex = hex.replace(shorthandRegex, (_m, r, g, b) => {
+    return r + r + g + g + b + b;
+  });
+
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(checkHex);
+  return result
+    ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(
+        result[3],
+        16
+      )}`
+    : null;
+};
+
 let PROCESSED_THEMES: { [key: string]: ProcessedTheme } = {};

 /**
@@ -27,56 +33,17 @@ let PROCESSED_THEMES: { [key: string]: ProcessedTheme } = {};
 export const applyThemesOnElement = (
  element,
  themes: HomeAssistant["themes"],
-  selectedTheme?: string,
-  themeOptions?: Partial<HomeAssistant["selectedTheme"]>
+  selectedTheme?: string
 ) => {
-  let cacheKey = selectedTheme;
-  let themeRules: Partial<Theme> = {};
+  const newTheme = selectedTheme
+    ? PROCESSED_THEMES[selectedTheme] || processTheme(selectedTheme, themes)
+    : undefined;

-  if (selectedTheme === "default" && themeOptions) {
-    if (themeOptions.dark) {
-      cacheKey = `${cacheKey}__dark`;
-      themeRules = darkStyles;
-    }
-    if (themeOptions.primaryColor) {
-      cacheKey = `${cacheKey}__primary_${themeOptions.primaryColor}`;
-      const rgbPrimaryColor = hex2rgb(themeOptions.primaryColor);
-      const labPrimaryColor = rgb2lab(rgbPrimaryColor);
-      themeRules["primary-color"] = themeOptions.primaryColor;
-      const rgbLigthPrimaryColor = lab2rgb(labBrighten(labPrimaryColor));
-      themeRules["light-primary-color"] = rgb2hex(rgbLigthPrimaryColor);
-      themeRules["dark-primary-color"] = lab2hex(labDarken(labPrimaryColor));
-      themeRules["text-primary-color"] =
-        rgbContrast(rgbPrimaryColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
-      themeRules["text-light-primary-color"] =
-        rgbContrast(rgbLigthPrimaryColor, [33, 33, 33]) < 6
-          ? "#fff"
-          : "#212121";
-      themeRules["state-icon-color"] = themeRules["dark-primary-color"];
-    }
-    if (themeOptions.accentColor) {
-      cacheKey = `${cacheKey}__accent_${themeOptions.accentColor}`;
-      themeRules["accent-color"] = themeOptions.accentColor;
-      const rgbAccentColor = hex2rgb(themeOptions.accentColor);
-      themeRules["text-accent-color"] =
-        rgbContrast(rgbAccentColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
-    }
-  }
-
-  if (selectedTheme && themes.themes[selectedTheme]) {
-    themeRules = themes.themes[selectedTheme];
-  }
-
-  if (!element._themes && !Object.keys(themeRules).length) {
+  if (!element._themes && !newTheme) {
    // No styles to reset, and no styles to set
    return;
  }

-  const newTheme =
-    themeRules && cacheKey
-      ? PROCESSED_THEMES[cacheKey] || processTheme(cacheKey, themeRules)
-      : undefined;
-
  // Add previous set keys to reset them, and new theme
  const styles = { ...element._themes, ...newTheme?.styles };
  element._themes = newTheme?.keys;
@@ -91,45 +58,42 @@ export const applyThemesOnElement = (
 };

 const processTheme = (
-  cacheKey: string,
-  theme: Partial<Theme>
+  themeName: string,
+  themes: HomeAssistant["themes"]
 ): ProcessedTheme | undefined => {
-  if (!theme || !Object.keys(theme).length) {
+  if (!themes.themes[themeName]) {
    return undefined;
  }
-  const combinedTheme: Partial<Theme> = {
+  const theme: Theme = {
    ...derivedStyles,
-    ...theme,
+    ...themes.themes[themeName],
  };
  const styles = {};
  const keys = {};
-  for (const key of Object.keys(combinedTheme)) {
+  for (const key of Object.keys(theme)) {
    const prefixedKey = `--${key}`;
-    const value = combinedTheme[key]!;
+    const value = theme[key];
    styles[prefixedKey] = value;
    keys[prefixedKey] = "";

-    // Try to create a rgb value for this key if it is not a var
+    // Try to create a rgb value for this key if it is a hex color
    if (!value.startsWith("#")) {
-      // Can't convert non hex value
+      // Not a hex color
      continue;
    }
-
    const rgbKey = `rgb-${key}`;
-    if (combinedTheme[rgbKey] !== undefined) {
+    if (theme[rgbKey] !== undefined) {
      // Theme has it's own rgb value
      continue;
    }
-    try {
-      const rgbValue = hex2rgb(value).join(",");
+    const rgbValue = hexToRgb(value);
+    if (rgbValue !== null) {
      const prefixedRgbKey = `--${rgbKey}`;
      styles[prefixedRgbKey] = rgbValue;
      keys[prefixedRgbKey] = "";
-    } catch (e) {
-      continue;
    }
  }
-  PROCESSED_THEMES[cacheKey] = { styles, keys };
+  PROCESSED_THEMES[themeName] = { styles, keys };
  return { styles, keys };
 };

--- a/src/common/dom/setup-leaflet-map.ts
+++ b/src/common/dom/setup-leaflet-map.ts
@@ -1,4 +1,4 @@
-import type { Map, TileLayer } from "leaflet";
+import type { Map } from "leaflet";

 // Sets up a Leaflet map on the provided DOM element
 export type LeafletModuleType = typeof import("leaflet");
@@ -6,9 +6,9 @@ export type LeafletDrawModuleType = typeof import("leaflet-draw");

 export const setupLeafletMap = async (
  mapElement: HTMLElement,
-  darkMode?: boolean,
+  darkMode = false,
  draw = false
-): Promise<[Map, LeafletModuleType, TileLayer]> => {
+): Promise<[Map, LeafletModuleType]> => {
  if (!mapElement.parentNode) {
    throw new Error("Cannot setup Leaflet map on disconnected element");
  }
@@ -28,28 +28,15 @@ export const setupLeafletMap = async (
  style.setAttribute("rel", "stylesheet");
  mapElement.parentNode.appendChild(style);
  map.setView([52.3731339, 4.8903147], 13);
+  createTileLayer(Leaflet, darkMode).addTo(map);

-  const tileLayer = createTileLayer(Leaflet, Boolean(darkMode)).addTo(map);
-
-  return [map, Leaflet, tileLayer];
+  return [map, Leaflet];
 };

-export const replaceTileLayer = (
-  leaflet: LeafletModuleType,
-  map: Map,
-  tileLayer: TileLayer,
-  darkMode: boolean
-): TileLayer => {
-  map.removeLayer(tileLayer);
-  tileLayer = createTileLayer(leaflet, darkMode);
-  tileLayer.addTo(map);
-  return tileLayer;
-};
-
-const createTileLayer = (
+export const createTileLayer = (
  leaflet: LeafletModuleType,
  darkMode: boolean
-): TileLayer => {
+) => {
  return leaflet.tileLayer(
    `https://{s}.basemaps.cartocdn.com/${
      darkMode ? "dark_all" : "light_all"
--- a/src/common/entity/battery_icon.ts
+++ b/src/common/entity/battery_icon.ts
@@ -13,7 +13,7 @@ export const batteryIcon = (
    return "hass:battery-unknown";
  }

-  let icon = "hass:battery";
+  var icon = "hass:battery";
  const batteryRound = Math.round(battery / 10) * 10;
  if (battery_charging && battery > 10) {
    icon += `-charging-${batteryRound}`;
--- a/src/common/entity/sensor_icon.ts
+++ b/src/common/entity/sensor_icon.ts
@@ -5,16 +5,12 @@ import { domainIcon } from "./domain_icon";
 import { batteryIcon } from "./battery_icon";

 const fixedDeviceClassIcons = {
-  current: "hass:current-ac",
-  energy: "hass:flash",
  humidity: "hass:water-percent",
  illuminance: "hass:brightness-5",
  temperature: "hass:thermometer",
  pressure: "hass:gauge",
  power: "hass:flash",
-  power_factor: "hass:angle-acute",
  signal_strength: "hass:wifi",
-  voltage: "hass:sine-wave",
 };

 export const sensorIcon = (state: HassEntity) => {
--- a/src/common/entity/supports-feature.ts
+++ b/src/common/entity/supports-feature.ts
@@ -4,6 +4,6 @@ export const supportsFeature = (
  stateObj: HassEntity,
  feature: number
 ): boolean => {
-  // eslint-disable-next-line no-bitwise
+  // eslint-disable-next-line:no-bitwise
  return (stateObj.attributes.supported_features! & feature) !== 0;
 };
--- a/src/common/entity/valid_entity_id.ts
+++ b/src/common/entity/valid_entity_id.ts
@@ -2,3 +2,11 @@ const validEntityId = /^(\w+)\.(\w+)$/;

 export const isValidEntityId = (entityId: string) =>
  validEntityId.test(entityId);
+
+export const createValidEntityId = (input: string) =>
+  input
+    .toLowerCase()
+    .replace(/\s|'|\./g, "_") // replace spaces, points and quotes with underscore
+    .replace(/\W/g, "") // remove not allowed chars
+    .replace(/_{2,}/g, "_") // replace multiple underscores with 1
+    .replace(/_$/, ""); // remove underscores at the end
--- a/src/common/string/slugify.ts
+++ b/src/common/string/slugify.ts
@@ -1,5 +1,5 @@
 // https://gist.github.com/hagemann/382adfc57adbd5af078dc93feef01fe1
-export const slugify = (value: string, delimiter = "_") => {
+export const slugify = (value: string, delimiter = "-") => {
  const a =
    "àáäâãåăæąçćčđďèéěėëêęğǵḧìíïîįłḿǹńňñòóöôœøṕŕřßşśšșťțùúüûǘůűūųẃẍÿýźžż·/_,:;";
  const b = `aaaaaaaaacccddeeeeeeegghiiiiilmnnnnooooooprrsssssttuuuuuuuuuwxyyzzz${delimiter}${delimiter}${delimiter}${delimiter}${delimiter}${delimiter}`;
--- a/src/components/buttons/ha-call-service-button.js
+++ b/src/components/buttons/ha-call-service-button.js
@@ -54,8 +54,8 @@ class HaCallServiceButton extends EventsMixin(PolymerElement) {
  callService() {
    this.progress = true;
    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const el = this;
-    const eventData = {
+    var el = this;
+    var eventData = {
      domain: this.domain,
      service: this.service,
      serviceData: this.serviceData,
--- a/src/components/buttons/ha-progress-button.js
+++ b/src/components/buttons/ha-progress-button.js
@@ -78,7 +78,7 @@ class HaProgressButton extends PolymerElement {
  }

  tempClass(className) {
-    const classList = this.$.container.classList;
+    var classList = this.$.container.classList;
    classList.add(className);
    setTimeout(() => {
      classList.remove(className);
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -3,21 +3,19 @@ import {
  css,
  CSSResult,
  customElement,
-  eventOptions,
  html,
-  internalProperty,
  LitElement,
  property,
+  internalProperty,
  PropertyValues,
  query,
  TemplateResult,
+  eventOptions,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import { ifDefined } from "lit-html/directives/if-defined";
 import { styleMap } from "lit-html/directives/style-map";
 import { scroll } from "lit-virtualizer";
-import memoizeOne from "memoize-one";
-import { restoreScroll } from "../../common/decorators/restore-scroll";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../common/search/search-input";
 import { debounce } from "../../common/util/debounce";
@@ -26,6 +24,8 @@ import "../ha-checkbox";
 import type { HaCheckbox } from "../ha-checkbox";
 import "../ha-icon";
 import { filterData, sortData } from "./sort-filter";
+import memoizeOne from "memoize-one";
+import { restoreScroll } from "../../common/decorators/restore-scroll";

 declare global {
  // for fire event
@@ -70,7 +70,6 @@ export interface DataTableColumnData extends DataTableSortColumnData {
  maxWidth?: string;
  grows?: boolean;
  forceLTR?: boolean;
-  hidden?: boolean;
 }

 export interface DataTableRowData {
@@ -215,15 +214,13 @@ export class HaDataTable extends LitElement {
          class="mdc-data-table__table ${classMap({
            "auto-height": this.autoHeight,
          })}"
-          role="table"
-          aria-rowcount=${this._filteredData.length}
          style=${styleMap({
            height: this.autoHeight
              ? `${(this._filteredData.length || 1) * 53 + 57}px`
              : `calc(100% - ${this._header?.clientHeight}px)`,
          })}
        >
-          <div class="mdc-data-table__header-row" role="row">
+          <div class="mdc-data-table__header-row">
            ${this.selectable
              ? html`
                  <div
@@ -243,10 +240,8 @@ export class HaDataTable extends LitElement {
                  </div>
                `
              : ""}
-            ${Object.entries(this.columns).map(([key, column]) => {
-              if (column.hidden) {
-                return "";
-              }
+            ${Object.entries(this.columns).map((columnEntry) => {
+              const [key, column] = columnEntry;
              const sorted = key === this._sortColumn;
              const classes = {
                "mdc-data-table__header-cell--numeric": Boolean(
@@ -293,8 +288,8 @@ export class HaDataTable extends LitElement {
          ${!this._filteredData.length
            ? html`
                <div class="mdc-data-table__content">
-                  <div class="mdc-data-table__row" role="row">
-                    <div class="mdc-data-table__cell grows center" role="cell">
+                  <div class="mdc-data-table__row">
+                    <div class="mdc-data-table__cell grows center">
                      ${this.noDataText || "No data"}
                    </div>
                  </div>
@@ -309,14 +304,12 @@ export class HaDataTable extends LitElement {
                    items: !this.hasFab
                      ? this._filteredData
                      : [...this._filteredData, ...[{ empty: true }]],
-                    renderItem: (row: DataTableRowData, index) => {
+                    renderItem: (row: DataTableRowData) => {
                      if (row.empty) {
                        return html` <div class="mdc-data-table__row"></div> `;
                      }
                      return html`
                        <div
-                          aria-rowindex=${index}
-                          role="row"
                          .rowId="${row[this.id]}"
                          @click=${this._handleRowClick}
                          class="mdc-data-table__row ${classMap({
@@ -335,7 +328,6 @@ export class HaDataTable extends LitElement {
                            ? html`
                                <div
                                  class="mdc-data-table__cell mdc-data-table__cell--checkbox"
-                                  role="cell"
                                >
                                  <ha-checkbox
                                    class="mdc-data-table__row-checkbox"
@@ -349,45 +341,40 @@ export class HaDataTable extends LitElement {
                                </div>
                              `
                            : ""}
-                          ${Object.entries(this.columns).map(
-                            ([key, column]) => {
-                              if (column.hidden) {
-                                return "";
-                              }
-                              return html`
-                                <div
-                                  role="cell"
-                                  class="mdc-data-table__cell ${classMap({
-                                    "mdc-data-table__cell--numeric": Boolean(
-                                      column.type === "numeric"
-                                    ),
-                                    "mdc-data-table__cell--icon": Boolean(
-                                      column.type === "icon"
-                                    ),
-                                    "mdc-data-table__cell--icon-button": Boolean(
-                                      column.type === "icon-button"
-                                    ),
-                                    grows: Boolean(column.grows),
-                                    forceLTR: Boolean(column.forceLTR),
-                                  })}"
-                                  style=${column.width
-                                    ? styleMap({
-                                        [column.grows
-                                          ? "minWidth"
-                                          : "width"]: column.width,
-                                        maxWidth: column.maxWidth
-                                          ? column.maxWidth
-                                          : "",
-                                      })
-                                    : ""}
-                                >
-                                  ${column.template
-                                    ? column.template(row[key], row)
-                                    : row[key]}
-                                </div>
-                              `;
-                            }
-                          )}
+                          ${Object.entries(this.columns).map((columnEntry) => {
+                            const [key, column] = columnEntry;
+                            return html`
+                              <div
+                                class="mdc-data-table__cell ${classMap({
+                                  "mdc-data-table__cell--numeric": Boolean(
+                                    column.type === "numeric"
+                                  ),
+                                  "mdc-data-table__cell--icon": Boolean(
+                                    column.type === "icon"
+                                  ),
+                                  "mdc-data-table__cell--icon-button": Boolean(
+                                    column.type === "icon-button"
+                                  ),
+                                  grows: Boolean(column.grows),
+                                  forceLTR: Boolean(column.forceLTR),
+                                })}"
+                                style=${column.width
+                                  ? styleMap({
+                                      [column.grows
+                                        ? "minWidth"
+                                        : "width"]: column.width,
+                                      maxWidth: column.maxWidth
+                                        ? column.maxWidth
+                                        : "",
+                                    })
+                                  : ""}
+                              >
+                                ${column.template
+                                  ? column.template(row[key], row)
+                                  : row[key]}
+                              </div>
+                            `;
+                          })}
                        </div>
                      `;
                    },
@@ -554,7 +541,7 @@ export class HaDataTable extends LitElement {
        border-radius: 4px;
        border-width: 1px;
        border-style: solid;
-        border-color: var(--divider-color);
+        border-color: rgba(var(--rgb-primary-text-color), 0.12);
        display: inline-flex;
        flex-direction: column;
        box-sizing: border-box;
@@ -572,7 +559,7 @@ export class HaDataTable extends LitElement {
      }

      .mdc-data-table__row ~ .mdc-data-table__row {
-        border-top: 1px solid var(--divider-color);
+        border-top: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
      }

      .mdc-data-table__row:not(.mdc-data-table__row--selected):hover {
@@ -591,7 +578,7 @@ export class HaDataTable extends LitElement {
        height: 56px;
        display: flex;
        width: 100%;
-        border-bottom: 1px solid var(--divider-color);
+        border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
        overflow-x: auto;
      }

@@ -844,7 +831,7 @@ export class HaDataTable extends LitElement {
        right: 12px;
      }
      .table-header {
-        border-bottom: 1px solid var(--divider-color);
+        border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
        padding: 0 16px;
      }
      search-input {
--- a/src/components/data-table/sort_filter_worker.ts
+++ b/src/components/data-table/sort_filter_worker.ts
@@ -1,11 +1,11 @@
 // To use comlink under ES5
-import { expose } from "comlink";
 import "proxy-polyfill";
+import { expose } from "comlink";
 import type {
-  DataTableRowData,
  DataTableSortColumnData,
-  SortableColumnContainer,
+  DataTableRowData,
  SortingDirection,
+  SortableColumnContainer,
 } from "./ha-data-table";

 const filterData = (
@@ -19,7 +19,7 @@ const filterData = (
      const [key, column] = columnEntry;
      if (column.filterable) {
        if (
-          String(column.filterKey ? row[key][column.filterKey] : row[key])
+          (column.filterKey ? row[key][column.filterKey] : row[key])
            .toUpperCase()
            .includes(filter)
        ) {
--- a/src/components/date-range-picker.ts
+++ b/src/components/date-range-picker.ts
@@ -135,7 +135,7 @@ class DateRangePickerElement extends WrappedElement {
          }
          .daterangepicker td.in-range {
            background-color: var(--light-primary-color);
-            color: var(--text-light-primary-color, var(--primary-text-color));
+            color: var(--primary-text-color);
          }
          .daterangepicker td.active,
          .daterangepicker td.active:hover {
--- a/src/components/dialog/ha-iron-focusables-helper.js
+++ b/src/components/dialog/ha-iron-focusables-helper.js
@@ -23,10 +23,10 @@ export const HaIronFocusablesHelper = {
   * @return {!Array<!HTMLElement>}
   */
  getTabbableNodes: function (node) {
-    const result = [];
+    var result = [];
    // If there is at least one element with tabindex > 0, we need to sort
    // the final array by tabindex.
-    const needsSortByTabIndex = this._collectTabbableNodes(node, result);
+    var needsSortByTabIndex = this._collectTabbableNodes(node, result);
    if (needsSortByTabIndex) {
      return IronFocusablesHelper._sortByTabIndex(result);
    }
@@ -50,9 +50,9 @@ export const HaIronFocusablesHelper = {
    ) {
      return false;
    }
-    const element = /** @type {!HTMLElement} */ (node);
-    const tabIndex = IronFocusablesHelper._normalizedTabIndex(element);
-    let needsSort = tabIndex > 0;
+    var element = /** @type {!HTMLElement} */ (node);
+    var tabIndex = IronFocusablesHelper._normalizedTabIndex(element);
+    var needsSort = tabIndex > 0;
    if (tabIndex >= 0) {
      result.push(element);
    }
@@ -70,7 +70,7 @@ export const HaIronFocusablesHelper = {
    //   <input id="B" slot="b" tabindex="1">
    //  </div>
    // TODO(valdrin) support ShadowDOM v1 when upgrading to Polymer v2.0.
-    let children;
+    var children;
    if (element.localName === "content" || element.localName === "slot") {
      children = dom(element).getDistributedNodes();
    } else {
@@ -80,7 +80,7 @@ export const HaIronFocusablesHelper = {
      children = dom(element.shadowRoot || element.root || element).children;
      // /////////////////////////
    }
-    for (let i = 0; i < children.length; i++) {
+    for (var i = 0; i < children.length; i++) {
      // Ensure method is always invoked to collect tabbable children.
      needsSort = this._collectTabbableNodes(children[i], result) || needsSort;
    }
--- a/src/components/entity/ha-chart-base.js
+++ b/src/components/entity/ha-chart-base.js
@@ -1,12 +1,12 @@
 /* eslint-plugin-disable lit */
 import { IronResizableBehavior } from "@polymer/iron-resizable-behavior/iron-resizable-behavior";
+import "../ha-icon-button";
 import { mixinBehaviors } from "@polymer/polymer/lib/legacy/class";
 import { timeOut } from "@polymer/polymer/lib/utils/async";
 import { Debouncer } from "@polymer/polymer/lib/utils/debounce";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { formatTime } from "../../common/datetime/format_time";
-import "../ha-icon-button";

 // eslint-disable-next-line no-unused-vars
 /* global Chart moment Color */
@@ -355,7 +355,7 @@ class HaChartBase extends mixinBehaviors(
      return value;
    }
    const date = new Date(values[index].value);
-    return formatTime(date, this.hass.language);
+    return formatTime(date);
  }

  drawChart() {
@@ -420,7 +420,7 @@ class HaChartBase extends mixinBehaviors(
        },
      };
      options = Chart.helpers.merge(options, this.data.options);
-      options.scales.xAxes[0].ticks.callback = this._formatTickValue.bind(this);
+      options.scales.xAxes[0].ticks.callback = this._formatTickValue;
      if (this.data.type === "timeline") {
        this.set("isTimeline", true);
        if (this.data.colors !== undefined) {
--- a/src/components/entity/ha-state-label-badge.ts
+++ b/src/components/entity/ha-state-label-badge.ts
@@ -81,7 +81,7 @@ export class HaStateLabelBadge extends LitElement {
          ? ""
          : this.image
          ? this.image
-          : state.attributes.entity_picture_local || state.attributes.entity_picture}"
+          : state.attributes.entity_picture}"
        .label="${this._computeLabel(domain, state, this._timerTimeRemaining)}"
        .description="${this.name ? this.name : computeStateName(state)}"
      ></ha-label-badge>
--- a/src/components/entity/state-badge.ts
+++ b/src/components/entity/state-badge.ts
@@ -73,10 +73,10 @@ export class StateBadge extends LitElement {
    if (stateObj) {
      // hide icon if we have entity picture
      if (
-        ((stateObj.attributes.entity_picture_local || stateObj.attributes.entity_picture) && !this.overrideIcon) ||
+        (stateObj.attributes.entity_picture && !this.overrideIcon) ||
        this.overrideImage
      ) {
-        let imageUrl = this.overrideImage || stateObj.attributes.entity_picture_local || stateObj.attributes.entity_picture;
+        let imageUrl = this.overrideImage || stateObj.attributes.entity_picture;
        if (this.hass) {
          imageUrl = this.hass.hassUrl(imageUrl);
        }
--- a/src/components/ha-bar.ts
+++ b/src/components/ha-bar.ts
@@ -1,67 +0,0 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  LitElement,
-  property,
-  svg,
-  TemplateResult,
-} from "lit-element";
-
-import {
-  getValueInPercentage,
-  normalize,
-  roundWithOneDecimal,
-} from "../util/calculate";
-
-@customElement("ha-bar")
-export class HaBar extends LitElement {
-  @property({ type: Number }) public min = 0;
-
-  @property({ type: Number }) public max = 100;
-
-  @property({ type: Number }) public value!: number;
-
-  protected render(): TemplateResult {
-    const valuePrecentage = roundWithOneDecimal(
-      getValueInPercentage(
-        normalize(this.value, this.min, this.max),
-        this.min,
-        this.max
-      )
-    );
-
-    return svg`
-      <svg>
-        <g>
-          <rect></rect>
-          <rect width="${valuePrecentage}%"></rect>
-        </g>
-      </svg>
-    `;
-  }
-
-  static get styles(): CSSResult {
-    return css`
-      rect:first-child {
-        width: 100%;
-        fill: var(--ha-bar-background-color, var(--secondary-background-color));
-      }
-      rect:last-child {
-        fill: var(--ha-bar-primary-color, var(--primary-color));
-        rx: var(--ha-bar-border-radius, 4px);
-      }
-      svg {
-        border-radius: var(--ha-bar-border-radius, 4px);
-        height: 12px;
-        width: 100%;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-bar": HaBar;
-  }
-}
--- a/src/components/ha-button-toggle-group.ts
+++ b/src/components/ha-button-toggle-group.ts
@@ -1,20 +1,21 @@
-import "@material/mwc-icon-button/mwc-icon-button";
 import {
-  css,
-  CSSResult,
  customElement,
  html,
-  LitElement,
-  property,
  TemplateResult,
+  property,
+  LitElement,
+  CSSResult,
+  css,
 } from "lit-element";
+
+import "./ha-icon-button";
+
 import { fireEvent } from "../common/dom/fire_event";
 import type { ToggleButton } from "../types";
-import "./ha-svg-icon";

@customElement("ha-button-toggle-group")
 export class HaButtonToggleGroup extends LitElement {
-  @property({ attribute: false }) public buttons!: ToggleButton[];
+  @property() public buttons!: ToggleButton[];

  @property() public active?: string;

@@ -22,23 +23,21 @@ export class HaButtonToggleGroup extends LitElement {
    return html`
      <div>
        ${this.buttons.map(
-          (button) => html`
-            <mwc-icon-button
-              .label=${button.label}
-              .value=${button.value}
-              ?active=${this.active === button.value}
-              @click=${this._handleClick}
-            >
-              <ha-svg-icon .path=${button.iconPath}></ha-svg-icon>
-            </mwc-icon-button>
-          `
+          (button) => html` <ha-icon-button
+            .label=${button.label}
+            .icon=${button.icon}
+            .value=${button.value}
+            ?active=${this.active === button.value}
+            @click=${this._handleClick}
+          >
+          </ha-icon-button>`
        )}
      </div>
    `;
  }

  private _handleClick(ev): void {
-    this.active = ev.currentTarget.value;
+    this.active = ev.target.value;
    fireEvent(this, "value-changed", { value: this.active });
  }

@@ -49,13 +48,12 @@ export class HaButtonToggleGroup extends LitElement {
        --mdc-icon-button-size: var(--button-toggle-size, 36px);
        --mdc-icon-size: var(--button-toggle-icon-size, 20px);
      }
-      mwc-icon-button {
+      ha-icon-button {
        border: 1px solid var(--primary-color);
        border-right-width: 0px;
        position: relative;
-        cursor: pointer;
      }
-      mwc-icon-button::before {
+      ha-icon-button::before {
        top: 0;
        left: 0;
        width: 100%;
@@ -67,26 +65,22 @@ export class HaButtonToggleGroup extends LitElement {
        content: "";
        transition: opacity 15ms linear, background-color 15ms linear;
      }
-      mwc-icon-button[active]::before {
+      ha-icon-button[active]::before {
        opacity: var(--mdc-icon-button-ripple-opacity, 0.12);
      }
-      mwc-icon-button:first-child {
+      ha-icon-button:first-child {
        border-radius: 4px 0 0 4px;
      }
-      mwc-icon-button:last-child {
+      ha-icon-button:last-child {
        border-radius: 0 4px 4px 0;
        border-right-width: 1px;
      }
-      mwc-icon-button:only-child {
-        border-radius: 4px;
-        border-right-width: 1px;
-      }
    `;
  }
 }

 declare global {
  interface HTMLElementTagNameMap {
-    "ha-button-toggle-group": HaButtonToggleGroup;
+    "ha-button-toggle-button": HaButtonToggleGroup;
  }
 }
--- a/src/components/ha-camera-stream.ts
+++ b/src/components/ha-camera-stream.ts
@@ -12,8 +12,6 @@ import {
 import { fireEvent } from "../common/dom/fire_event";
 import { computeStateName } from "../common/entity/compute_state_name";
 import { supportsFeature } from "../common/entity/supports-feature";
-import { nextRender } from "../common/util/render-status";
-import { getExternalConfig } from "../external_app/external_config";
 import {
  CAMERA_SUPPORT_STREAM,
  computeMJPEGStreamUrl,
@@ -39,8 +37,6 @@ class HaCameraStream extends LitElement {

  private _hlsPolyfillInstance?: Hls;

-  private _useExoPlayer = false;
-
  public connectedCallback() {
    super.connectedCallback();
    this._attached = true;
@@ -129,33 +125,22 @@ class HaCameraStream extends LitElement {
    return this.shadowRoot!.querySelector("video")!;
  }

-  private async _getUseExoPlayer(): Promise<boolean> {
-    if (!this.hass!.auth.external) {
-      return false;
-    }
-    const externalConfig = await getExternalConfig(this.hass!.auth.external);
-    return externalConfig && externalConfig.hasExoPlayer;
-  }
-
  private async _startHls(): Promise<void> {
    // eslint-disable-next-line
-    let hls;
+    const Hls = ((await import(
+      /* webpackChunkName: "hls.js" */ "hls.js"
+    )) as any).default as HLSModule;
+    let hlsSupported = Hls.isSupported();
    const videoEl = this._videoEl;
-    this._useExoPlayer = await this._getUseExoPlayer();
-    if (!this._useExoPlayer) {
-      hls = ((await import(/* webpackChunkName: "hls.js" */ "hls.js")) as any)
-        .default as HLSModule;
-      let hlsSupported = hls.isSupported();

-      if (!hlsSupported) {
-        hlsSupported =
-          videoEl.canPlayType("application/vnd.apple.mpegurl") !== "";
-      }
+    if (!hlsSupported) {
+      hlsSupported =
+        videoEl.canPlayType("application/vnd.apple.mpegurl") !== "";
+    }

-      if (!hlsSupported) {
-        this._forceMJPEG = this.stateObj!.entity_id;
-        return;
-      }
+    if (!hlsSupported) {
+      this._forceMJPEG = this.stateObj!.entity_id;
+      return;
    }

    try {
@@ -164,10 +149,8 @@ class HaCameraStream extends LitElement {
        this.stateObj!.entity_id
      );

-      if (this._useExoPlayer) {
-        this._renderHLSExoPlayer(url);
-      } else if (hls.isSupported()) {
-        this._renderHLSPolyfill(videoEl, hls, url);
+      if (Hls.isSupported()) {
+        this._renderHLSPolyfill(videoEl, Hls, url);
      } else {
        this._renderHLSNative(videoEl, url);
      }
@@ -180,29 +163,6 @@ class HaCameraStream extends LitElement {
    }
  }

-  private async _renderHLSExoPlayer(url: string) {
-    window.addEventListener("resize", this._resizeExoPlayer);
-    this.updateComplete.then(() => nextRender()).then(this._resizeExoPlayer);
-    this._videoEl.style.visibility = "hidden";
-    await this.hass!.auth.external!.sendMessage({
-      type: "exoplayer/play_hls",
-      payload: new URL(url, window.location.href).toString(),
-    });
-  }
-
-  private _resizeExoPlayer = () => {
-    const rect = this._videoEl.getBoundingClientRect();
-    this.hass!.auth.external!.fireMessage({
-      type: "exoplayer/resize",
-      payload: {
-        left: rect.left,
-        top: rect.top,
-        right: rect.right,
-        bottom: rect.bottom,
-      },
-    });
-  };
-
  private async _renderHLSNative(videoEl: HTMLVideoElement, url: string) {
    videoEl.src = url;
    await new Promise((resolve) =>
@@ -234,15 +194,11 @@ class HaCameraStream extends LitElement {
    fireEvent(this, "iron-resize");
  }

-  private _destroyPolyfill() {
+  private _destroyPolyfill(): void {
    if (this._hlsPolyfillInstance) {
      this._hlsPolyfillInstance.destroy();
      this._hlsPolyfillInstance = undefined;
    }
-    if (this._useExoPlayer) {
-      window.removeEventListener("resize", this._resizeExoPlayer);
-      this.hass!.auth.external!.fireMessage({ type: "exoplayer/stop" });
-    }
  }

  static get styles(): CSSResult {
--- a/src/components/ha-card.ts
+++ b/src/components/ha-card.ts
@@ -66,7 +66,7 @@ export class HaCard extends LitElement {
      }

      :host ::slotted(.card-actions) {
-        border-top: 1px solid var(--divider-color, #e8e8e8);
+        border-top: 1px solid #e8e8e8;
        padding: 5px 16px;
      }
    `;
--- a/src/components/ha-code-editor.ts
+++ b/src/components/ha-code-editor.ts
@@ -1,8 +1,8 @@
 import { Editor } from "codemirror";
 import {
  customElement,
-  internalProperty,
  property,
+  internalProperty,
  PropertyValues,
  UpdatingElement,
 } from "lit-element";
@@ -101,6 +101,11 @@ export class HaCodeEditor extends UpdatingElement {
      .CodeMirror-scroll {
        max-height: var(--code-mirror-max-height, --code-mirror-height);
      }
+      .CodeMirror-gutters {
+        border-right: 1px solid var(--paper-input-container-color, var(--secondary-text-color));
+        background-color: var(--paper-dialog-background-color, var(--primary-background-color));
+        transition: 0.2s ease border-right;
+      }
      :host(.error-state) .CodeMirror-gutters {
        border-color: var(--error-state-color, red);
      }
@@ -108,7 +113,7 @@ export class HaCodeEditor extends UpdatingElement {
        border-right: 2px solid var(--paper-input-container-focus-color, var(--primary-color));
      }
      .CodeMirror-linenumber {
-        color: var(--paper-dialog-color, var(--secondary-text-color));
+        color: var(--paper-dialog-color, var(--primary-text-color));
      }
      .rtl .CodeMirror-vscrollbar {
        right: auto;
@@ -117,100 +122,6 @@ export class HaCodeEditor extends UpdatingElement {
      .rtl-gutter {
        width: 20px;
      }
-      .CodeMirror-gutters {
-        border-right: 1px solid var(--paper-input-container-color, var(--secondary-text-color));
-        background-color: var(--paper-dialog-background-color, var(--primary-background-color));
-        transition: 0.2s ease border-right;
-      }
-      .cm-s-default.CodeMirror {
-        background-color: var(--code-editor-background-color, var(--card-background-color));
-        color: var(--primary-text-color);
-      }
-      .cm-s-default .CodeMirror-cursor {
-        border-left: 1px solid var(--secondary-text-color);
-      }
-      
-      .cm-s-default div.CodeMirror-selected, .cm-s-default.CodeMirror-focused div.CodeMirror-selected {
-        background: rgba(var(--rgb-primary-color), 0.2);
-      }
-      
-      .cm-s-default .CodeMirror-line::selection,
-      .cm-s-default .CodeMirror-line>span::selection,
-      .cm-s-default .CodeMirror-line>span>span::selection {
-        background: rgba(var(--rgb-primary-color), 0.2);
-      }
-      
-      .cm-s-default .cm-keyword {
-        color: var(--codemirror-keyword, #6262FF);
-      }
-      
-      .cm-s-default .cm-operator {
-        color: var(--codemirror-operator, #cda869);
-      }
-      
-      .cm-s-default .cm-variable-2 {
-        color: var(--codemirror-variable-2, #690);
-      }
-      
-      .cm-s-default .cm-builtin {
-        color: var(--codemirror-builtin, #9B7536);
-      }
-      
-      .cm-s-default .cm-atom {
-        color: var(--codemirror-atom, #F90);
-      }
-      
-      .cm-s-default .cm-number {
-        color: var(--codemirror-number, #ca7841);
-      }
-      
-      .cm-s-default .cm-def {
-        color: var(--codemirror-def, #8DA6CE);
-      }
-      
-      .cm-s-default .cm-string {
-        color: var(--codemirror-string, #07a);
-      }
-      
-      .cm-s-default .cm-string-2 {
-        color: var(--codemirror-string-2, #bd6b18);
-      }
-      
-      .cm-s-default .cm-comment {
-        color: var(--codemirror-comment, #777);
-      }
-      
-      .cm-s-default .cm-variable {
-        color: var(--codemirror-variable, #07a);
-      }
-      
-      .cm-s-default .cm-tag {
-        color: var(--codemirror-tag, #997643);
-      }
-      
-      .cm-s-default .cm-meta {
-        color: var(--codemirror-meta, #000);
-      }
-      
-      .cm-s-default .cm-attribute {
-        color: var(--codemirror-attribute, #d6bb6d);
-      }
-      
-      .cm-s-default .cm-property {
-        color: var(--codemirror-property, #905);
-      }
-      
-      .cm-s-default .cm-qualifier {
-        color: var(--codemirror-qualifier, #690);
-      }
-      
-      .cm-s-default .cm-variable-3  {
-        color: var(--codemirror-variable-3, #07a);
-      }
-
-      .cm-s-default .cm-type {
-        color: var(--codemirror-type, #07a);
-      }
    </style>`;

    this.codemirror = codeMirror(shadowRoot, {
--- a/src/components/ha-color-picker.js
+++ b/src/components/ha-color-picker.js
@@ -188,10 +188,10 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
  // origin is wheel center
  // returns {x: X, y: Y} object
  convertToCanvasCoordinates(clientX, clientY) {
-    const svgPoint = this.interactionLayer.createSVGPoint();
+    var svgPoint = this.interactionLayer.createSVGPoint();
    svgPoint.x = clientX;
    svgPoint.y = clientY;
-    const cc = svgPoint.matrixTransform(
+    var cc = svgPoint.matrixTransform(
      this.interactionLayer.getScreenCTM().inverse()
    );
    return { x: cc.x, y: cc.y };
@@ -225,7 +225,7 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
  // Touch events

  onTouchStart(ev) {
-    const touch = ev.changedTouches[0];
+    var touch = ev.changedTouches[0];
    const cc = this.convertToCanvasCoordinates(touch.clientX, touch.clientY);
    // return if we're not on the wheel
    if (!this.isInWheel(cc.x, cc.y)) {
@@ -275,8 +275,8 @@ class HaColorPicker extends EventsMixin(PolymerElement) {

  // Process user input to color
  processUserSelect(ev) {
-    const canvasXY = this.convertToCanvasCoordinates(ev.clientX, ev.clientY);
-    const hs = this.getColor(canvasXY.x, canvasXY.y);
+    var canvasXY = this.convertToCanvasCoordinates(ev.clientX, ev.clientY);
+    var hs = this.getColor(canvasXY.x, canvasXY.y);
    this.onColorSelect(hs);
  }

@@ -319,11 +319,11 @@ class HaColorPicker extends EventsMixin(PolymerElement) {

  // set marker position to the given color
  setMarkerOnColor(hs) {
-    const dist = hs.s * this.radius;
-    const theta = ((hs.h - 180) / 180) * Math.PI;
-    const markerdX = -dist * Math.cos(theta);
-    const markerdY = -dist * Math.sin(theta);
-    const translateString = `translate(${markerdX},${markerdY})`;
+    var dist = hs.s * this.radius;
+    var theta = ((hs.h - 180) / 180) * Math.PI;
+    var markerdX = -dist * Math.cos(theta);
+    var markerdY = -dist * Math.sin(theta);
+    var translateString = `translate(${markerdX},${markerdY})`;
    this.marker.setAttribute("transform", translateString);
    this.tooltip.setAttribute("transform", translateString);
  }
@@ -358,8 +358,8 @@ class HaColorPicker extends EventsMixin(PolymerElement) {

  // get angle (degrees)
  getAngle(dX, dY) {
-    const theta = Math.atan2(-dY, -dX); // radians from the left edge, clockwise = positive
-    const angle = (theta / Math.PI) * 180 + 180; // degrees, clockwise from right
+    var theta = Math.atan2(-dY, -dX); // radians from the left edge, clockwise = positive
+    var angle = (theta / Math.PI) * 180 + 180; // degrees, clockwise from right
    return angle;
  }

@@ -378,9 +378,9 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
   */

  getColor(x, y) {
-    const hue = this.getAngle(x, y); // degrees, clockwise from right
-    const relativeDistance = this.getDistance(x, y); // edge of radius = 1
-    const sat = Math.min(relativeDistance, 1); // Distance from center
+    var hue = this.getAngle(x, y); // degrees, clockwise from right
+    var relativeDistance = this.getDistance(x, y); // edge of radius = 1
+    var sat = Math.min(relativeDistance, 1); // Distance from center
    return { h: hue, s: sat };
  }

@@ -402,9 +402,9 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
      if (this.saturationSegments === 1) {
        hs.s = 1;
      } else {
-        const segmentSize = 1 / this.saturationSegments;
-        const saturationStep = 1 / (this.saturationSegments - 1);
-        const calculatedSat = Math.floor(hs.s / segmentSize) * saturationStep;
+        var segmentSize = 1 / this.saturationSegments;
+        var saturationStep = 1 / (this.saturationSegments - 1);
+        var calculatedSat = Math.floor(hs.s / segmentSize) * saturationStep;
        hs.s = Math.min(calculatedSat, 1);
      }
    }
@@ -477,9 +477,9 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
      hueSegments = hueSegments || 360; // reset 0 segments to 360
      const angleStep = 360 / hueSegments;
      const halfAngleStep = angleStep / 2; // center segments on color
-      for (let angle = 0; angle <= 360; angle += angleStep) {
-        const startAngle = (angle - halfAngleStep) * (Math.PI / 180);
-        const endAngle = (angle + halfAngleStep + 1) * (Math.PI / 180);
+      for (var angle = 0; angle <= 360; angle += angleStep) {
+        var startAngle = (angle - halfAngleStep) * (Math.PI / 180);
+        var endAngle = (angle + halfAngleStep + 1) * (Math.PI / 180);
        context.beginPath();
        context.moveTo(cX, cY);
        context.arc(
@@ -492,7 +492,7 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
        );
        context.closePath();
        // gradient
-        const gradient = context.createRadialGradient(
+        var gradient = context.createRadialGradient(
          cX,
          cY,
          0,
@@ -507,8 +507,8 @@ class HaColorPicker extends EventsMixin(PolymerElement) {
        if (saturationSegments > 0) {
          const ratioStep = 1 / saturationSegments;
          let ratio = 0;
-          for (let stop = 1; stop < saturationSegments; stop += 1) {
-            const prevLighness = lightness;
+          for (var stop = 1; stop < saturationSegments; stop += 1) {
+            var prevLighness = lightness;
            ratio = stop * ratioStep;
            lightness = 100 - 50 * ratio;
            gradient.addColorStop(
--- a/src/components/ha-cover-controls.js
+++ b/src/components/ha-cover-controls.js
@@ -95,7 +95,7 @@ class HaCoverControls extends PolymerElement {
    if (stateObj.state === UNAVAILABLE) {
      return true;
    }
-    const assumedState = stateObj.attributes.assumed_state === true;
+    var assumedState = stateObj.attributes.assumed_state === true;
    return (entityObj.isFullyOpen || entityObj.isOpening) && !assumedState;
  }

@@ -103,7 +103,7 @@ class HaCoverControls extends PolymerElement {
    if (stateObj.state === UNAVAILABLE) {
      return true;
    }
-    const assumedState = stateObj.attributes.assumed_state === true;
+    var assumedState = stateObj.attributes.assumed_state === true;
    return (entityObj.isFullyClosed || entityObj.isClosing) && !assumedState;
  }

--- a/src/components/ha-cover-tilt-controls.js
+++ b/src/components/ha-cover-tilt-controls.js
@@ -75,7 +75,7 @@ class HaCoverTiltControls extends PolymerElement {
    if (stateObj.state === UNAVAILABLE) {
      return true;
    }
-    const assumedState = stateObj.attributes.assumed_state === true;
+    var assumedState = stateObj.attributes.assumed_state === true;
    return entityObj.isFullyOpenTilt && !assumedState;
  }

@@ -83,7 +83,7 @@ class HaCoverTiltControls extends PolymerElement {
    if (stateObj.state === UNAVAILABLE) {
      return true;
    }
-    const assumedState = stateObj.attributes.assumed_state === true;
+    var assumedState = stateObj.attributes.assumed_state === true;
    return entityObj.isFullyClosedTilt && !assumedState;
  }

--- a/src/components/ha-date-range-picker.ts
+++ b/src/components/ha-date-range-picker.ts
@@ -163,6 +163,13 @@ export class HaDateRangePicker extends LitElement {
        border-right: 1px solid var(--divider-color);
      }

+      @media only screen and (max-width: 800px) {
+        .date-range-ranges {
+          border-right: none;
+          border-bottom: 1px solid var(--divider-color);
+        }
+      }
+
      .date-range-footer {
        display: flex;
        justify-content: flex-end;
@@ -172,30 +179,12 @@ export class HaDateRangePicker extends LitElement {

      paper-input {
        display: inline-block;
-        max-width: 250px;
-        min-width: 200px;
+        max-width: 200px;
      }

      paper-input:last-child {
        margin-left: 8px;
      }
-
-      @media only screen and (max-width: 800px) {
-        .date-range-ranges {
-          border-right: none;
-          border-bottom: 1px solid var(--divider-color);
-        }
-      }
-
-      @media only screen and (max-width: 500px) {
-        paper-input {
-          min-width: inherit;
-        }
-
-        ha-svg-icon {
-          display: none;
-        }
-      }
    `;
  }
 }
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -34,12 +34,10 @@ export class HaDialog extends MwcDialog {
      style,
      css`
        .mdc-dialog {
-          --mdc-dialog-scroll-divider-color: var(--divider-color);
          z-index: var(--dialog-z-index, 7);
        }
        .mdc-dialog__actions {
          justify-content: var(--justify-action-buttons, flex-end);
-          padding-bottom: max(env(safe-area-inset-bottom), 8px);
        }
        .mdc-dialog__container {
          align-items: var(--vertial-align-dialog, center);
@@ -52,12 +50,6 @@ export class HaDialog extends MwcDialog {
          position: var(--dialog-content-position, relative);
          padding: var(--dialog-content-padding, 20px 24px);
        }
-        :host([hideactions]) .mdc-dialog .mdc-dialog__content {
-          padding-bottom: max(
-            var(--dialog-content-padding, 20px),
-            env(safe-area-inset-bottom)
-          );
-        }
        .mdc-dialog .mdc-dialog__surface {
          position: var(--dialog-surface-position, relative);
          min-height: var(--mdc-dialog-min-height, auto);
--- a/src/components/ha-form/ha-form.ts
+++ b/src/components/ha-form/ha-form.ts
@@ -100,7 +100,7 @@ export interface HaFormTimeData {
 }

 export interface HaFormElement extends LitElement {
-  schema: HaFormSchema | HaFormSchema[];
+  schema: HaFormSchema;
  data?: HaFormDataContainer | HaFormData;
  label?: string;
  suffix?: string;
@@ -110,7 +110,7 @@ export interface HaFormElement extends LitElement {
 export class HaForm extends LitElement implements HaFormElement {
  @property() public data!: HaFormDataContainer | HaFormData;

-  @property() public schema!: HaFormSchema | HaFormSchema[];
+  @property() public schema!: HaFormSchema;

  @property() public error;

@@ -190,7 +190,7 @@ export class HaForm extends LitElement implements HaFormElement {
      : "";
  }

-  private _computeError(error, schema: HaFormSchema | HaFormSchema[]) {
+  private _computeError(error, schema: HaFormSchema) {
    return this.computeError ? this.computeError(error, schema) : error;
  }

@@ -203,7 +203,7 @@ export class HaForm extends LitElement implements HaFormElement {

  private _valueChanged(ev: CustomEvent) {
    ev.stopPropagation();
-    const schema = (ev.target as HaFormElement).schema as HaFormSchema;
+    const schema = (ev.target as HaFormElement).schema;
    const data = this.data as HaFormDataContainer;
    data[schema.name] = ev.detail.value;
    fireEvent(this, "value-changed", {
--- a/src/components/ha-gauge.ts
+++ b/src/components/ha-gauge.ts
@@ -9,17 +9,23 @@ import {
 } from "lit-element";
 import { styleMap } from "lit-html/directives/style-map";
 import { afterNextRender } from "../common/util/render-status";
-import { ifDefined } from "lit-html/directives/if-defined";
-
-import { getValueInPercentage, normalize } from "../util/calculate";

 const getAngle = (value: number, min: number, max: number) => {
  const percentage = getValueInPercentage(normalize(value, min, max), min, max);
  return (percentage * 180) / 100;
 };

-// Workaround for https://github.com/home-assistant/frontend/issues/6467
-const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+const normalize = (value: number, min: number, max: number) => {
+  if (value > max) return max;
+  if (value < min) return min;
+  return value;
+};
+
+const getValueInPercentage = (value: number, min: number, max: number) => {
+  const newMax = max - min;
+  const newVal = value - min;
+  return (100 * newVal) / newMax;
+};

@customElement("ha-gauge")
 export class Gauge extends LitElement {
@@ -63,28 +69,9 @@ export class Gauge extends LitElement {
        ></path>
        <path
          class="value"
+          style=${styleMap({ transform: `rotate(${this._angle}deg)` })}
          d="M 90 50.001 A 40 40 0 0 1 10 50"
-          style=${ifDefined(
-            !isSafari
-              ? styleMap({ transform: `rotate(${this._angle}deg)` })
-              : undefined
-          )}
-          transform=${ifDefined(
-            isSafari ? `rotate(${this._angle} 50 50)` : undefined
-          )}
-        >
-        ${
-          isSafari
-            ? svg`<animateTransform
-                attributeName="transform"
-                type="rotate"
-                from="0 50 50"
-                to="${this._angle} 50 50"
-                dur="1s"
-              />`
-            : ""
-        }
-        </path>
+        ></path>
      </svg>
      <svg class="text">
        <text class="value-text">
@@ -119,8 +106,8 @@ export class Gauge extends LitElement {
        fill: none;
        stroke-width: 15;
        stroke: var(--gauge-color);
+        transition: all 1000ms ease 0s;
        transform-origin: 50% 100%;
-        transition: all 1s ease 0s;
      }
      .gauge {
        display: block;
--- a/src/components/ha-icon.ts
+++ b/src/components/ha-icon.ts
@@ -106,7 +106,6 @@ const mdiRenameMapping = {
  pot: "pot-steam",
  ruby: "language-ruby",
  sailing: "sail-boat",
-  scooter: "human-scooter",
  settings: "cog",
  "settings-box": "cog-box",
  "settings-outline": "cog-outline",
@@ -194,7 +193,6 @@ const mdiRemovedIcons = new Set([
  "medium",
  "meetup",
  "mixcloud",
-  "mixer",
  "nfc-off",
  "npm-variant",
  "npm-variant-outline",
--- a/src/components/ha-markdown-element.ts
+++ b/src/components/ha-markdown-element.ts
@@ -23,6 +23,7 @@ class HaMarkdownElement extends UpdatingElement {
      {
        breaks: this.breaks,
        gfm: true,
+        tables: true,
      },
      {
        allowSvg: this.allowSvg,
--- a/src/components/ha-markdown.ts
+++ b/src/components/ha-markdown.ts
@@ -57,10 +57,6 @@ class HaMarkdown extends LitElement {
        background-color: var(--markdown-code-background-color, none);
        border-radius: 3px;
      }
-      ha-markdown-element svg {
-        background-color: var(--markdown-svg-background-color, none);
-        color: var(--markdown-svg-color, none);
-      }
      ha-markdown-element code {
        font-size: 85%;
        padding: 0.2em 0.4em;
@@ -74,8 +70,8 @@ class HaMarkdown extends LitElement {
        line-height: 1.45;
      }
      ha-markdown-element h2 {
-        font-size: 1.5em;
-        font-weight: bold;
+        font-size: 1.5em !important;
+        font-weight: bold !important;
      }
    `;
  }
--- a/src/components/ha-picture-upload.ts
+++ b/src/components/ha-picture-upload.ts
@@ -1,226 +0,0 @@
-import "@material/mwc-icon-button/mwc-icon-button";
-import { mdiClose, mdiImagePlus } from "@mdi/js";
-import "@polymer/iron-input/iron-input";
-import "@polymer/paper-input/paper-input-container";
-import {
-  css,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-  TemplateResult,
-} from "lit-element";
-import { classMap } from "lit-html/directives/class-map";
-import { fireEvent } from "../common/dom/fire_event";
-import { createImage, generateImageThumbnailUrl } from "../data/image";
-import { HomeAssistant } from "../types";
-import "./ha-circular-progress";
-import "./ha-svg-icon";
-import {
-  showImageCropperDialog,
-  CropOptions,
-} from "../dialogs/image-cropper-dialog/show-image-cropper-dialog";
-
-@customElement("ha-picture-upload")
-export class HaPictureUpload extends LitElement {
-  public hass!: HomeAssistant;
-
-  @property() public value: string | null = null;
-
-  @property() public label?: string;
-
-  @property({ type: Boolean }) public crop = false;
-
-  @property({ attribute: false }) public cropOptions?: CropOptions;
-
-  @property({ type: Number }) public size = 512;
-
-  @internalProperty() private _error = "";
-
-  @internalProperty() private _uploading = false;
-
-  @internalProperty() private _drag = false;
-
-  protected updated(changedProperties: PropertyValues) {
-    if (changedProperties.has("_drag")) {
-      (this.shadowRoot!.querySelector(
-        "paper-input-container"
-      ) as any)._setFocused(this._drag);
-    }
-  }
-
-  public render(): TemplateResult {
-    return html`
-      ${this._uploading
-        ? html`<ha-circular-progress
-            alt="Uploading"
-            size="large"
-            active
-          ></ha-circular-progress>`
-        : html`
-            ${this._error ? html`<div class="error">${this._error}</div>` : ""}
-            <label for="input">
-              <paper-input-container
-                .alwaysFloatLabel=${Boolean(this.value)}
-                @drop=${this._handleDrop}
-                @dragenter=${this._handleDragStart}
-                @dragover=${this._handleDragStart}
-                @dragleave=${this._handleDragEnd}
-                @dragend=${this._handleDragEnd}
-                class=${classMap({
-                  dragged: this._drag,
-                })}
-              >
-                <label for="input" slot="label">
-                  ${this.label ||
-                  this.hass.localize("ui.components.picture-upload.label")}
-                </label>
-                <iron-input slot="input">
-                  <input
-                    id="input"
-                    type="file"
-                    class="file"
-                    accept="image/png, image/jpeg, image/gif"
-                    @change=${this._handleFilePicked}
-                  />
-                  ${this.value ? html`<img .src=${this.value} />` : ""}
-                </iron-input>
-                ${this.value
-                  ? html`<mwc-icon-button
-                      slot="suffix"
-                      @click=${this._clearPicture}
-                    >
-                      <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
-                    </mwc-icon-button>`
-                  : html`<mwc-icon-button slot="suffix">
-                      <ha-svg-icon .path=${mdiImagePlus}></ha-svg-icon>
-                    </mwc-icon-button>`}
-              </paper-input-container>
-            </label>
-          `}
-    `;
-  }
-
-  private _handleDrop(ev: DragEvent) {
-    ev.preventDefault();
-    ev.stopPropagation();
-    if (ev.dataTransfer?.files) {
-      if (this.crop) {
-        this._cropFile(ev.dataTransfer.files[0]);
-      } else {
-        this._uploadFile(ev.dataTransfer.files[0]);
-      }
-    }
-    this._drag = false;
-  }
-
-  private _handleDragStart(ev: DragEvent) {
-    ev.preventDefault();
-    ev.stopPropagation();
-    this._drag = true;
-  }
-
-  private _handleDragEnd(ev: DragEvent) {
-    ev.preventDefault();
-    ev.stopPropagation();
-    this._drag = false;
-  }
-
-  private async _handleFilePicked(ev) {
-    if (this.crop) {
-      this._cropFile(ev.target.files[0]);
-    } else {
-      this._uploadFile(ev.target.files[0]);
-    }
-  }
-
-  private async _cropFile(file: File) {
-    if (!["image/png", "image/jpeg", "image/gif"].includes(file.type)) {
-      this._error = this.hass.localize(
-        "ui.components.picture-upload.unsupported_format"
-      );
-      return;
-    }
-    showImageCropperDialog(this, {
-      file,
-      options: this.cropOptions || {
-        round: false,
-        aspectRatio: NaN,
-      },
-      croppedCallback: (croppedFile) => {
-        this._uploadFile(croppedFile);
-      },
-    });
-  }
-
-  private async _uploadFile(file: File) {
-    if (!["image/png", "image/jpeg", "image/gif"].includes(file.type)) {
-      this._error = this.hass.localize(
-        "ui.components.picture-upload.unsupported_format"
-      );
-      return;
-    }
-    this._uploading = true;
-    this._error = "";
-    try {
-      const media = await createImage(this.hass, file);
-      this.value = generateImageThumbnailUrl(media.id, this.size);
-      fireEvent(this, "change");
-    } catch (err) {
-      this._error = err.toString();
-    } finally {
-      this._uploading = false;
-    }
-  }
-
-  private _clearPicture(ev: Event) {
-    ev.preventDefault();
-    this.value = null;
-    this._error = "";
-    fireEvent(this, "change");
-  }
-
-  static get styles() {
-    return css`
-      .error {
-        color: var(--error-color);
-      }
-      paper-input-container {
-        position: relative;
-        padding: 8px;
-        margin: 0 -8px;
-      }
-      paper-input-container.dragged:before {
-        position: var(--layout-fit_-_position);
-        top: var(--layout-fit_-_top);
-        right: var(--layout-fit_-_right);
-        bottom: var(--layout-fit_-_bottom);
-        left: var(--layout-fit_-_left);
-        background: currentColor;
-        content: "";
-        opacity: var(--dark-divider-opacity);
-        pointer-events: none;
-        border-radius: 4px;
-      }
-      img {
-        max-width: 125px;
-        max-height: 125px;
-      }
-      input.file {
-        display: none;
-      }
-      mwc-icon-button {
-        --mdc-icon-button-size: 24px;
-        --mdc-icon-size: 20px;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-picture-upload": HaPictureUpload;
-  }
-}
--- a/src/components/ha-radio.ts
+++ b/src/components/ha-radio.ts
@@ -1,20 +0,0 @@
-import "@material/mwc-radio";
-import type { Radio } from "@material/mwc-radio";
-import { customElement } from "lit-element";
-import type { Constructor } from "../types";
-
-const MwcRadio = customElements.get("mwc-radio") as Constructor<Radio>;
-
-@customElement("ha-radio")
-export class HaRadio extends MwcRadio {
-  public firstUpdated() {
-    super.firstUpdated();
-    this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-radio": HaRadio;
-  }
-}
--- a/src/components/ha-related-items.ts
+++ b/src/components/ha-related-items.ts
@@ -97,7 +97,6 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {
              </h3>
              <a
                href=${`/config/integrations#config_entry=${relatedConfigEntryId}`}
-                @click=${this._navigateAwayClose}
              >
                ${this.hass.localize(`component.${entry.domain}.title`)}:
                ${entry.title}
@@ -117,10 +116,7 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {
              <h3>
                ${this.hass.localize("ui.components.related-items.device")}:
              </h3>
-              <a
-                href="/config/devices/device/${relatedDeviceId}"
-                @click=${this._navigateAwayClose}
-              >
+              <a href="/config/devices/device/${relatedDeviceId}">
                ${device.name_by_user || device.name}
              </a>
            `;
@@ -138,10 +134,7 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {
              <h3>
                ${this.hass.localize("ui.components.related-items.area")}:
              </h3>
-              <a
-                href="/config/areas/area/${relatedAreaId}"
-                @click=${this._navigateAwayClose}
-              >
+              <a href="/config/areas/area/${relatedAreaId}">
                ${area.name}
              </a>
            `;
@@ -285,12 +278,6 @@ export class HaRelatedItems extends SubscribeMixin(LitElement) {
    `;
  }

-  private async _navigateAwayClose() {
-    // allow new page to open before closing dialog
-    await new Promise((resolve) => setTimeout(resolve, 0));
-    fireEvent(this, "close-dialog");
-  }
-
  private async _findRelated() {
    this._related = await findRelated(this.hass, this.itemType, this.itemId);
    await this.updateComplete;
--- a/src/components/ha-service-description.js
+++ b/src/components/ha-service-description.js
@@ -16,9 +16,9 @@ class HaServiceDescription extends PolymerElement {
  }

  _getDescription(hass, domain, service) {
-    const domainServices = hass.services[domain];
+    var domainServices = hass.services[domain];
    if (!domainServices) return "";
-    const serviceObject = domainServices[service];
+    var serviceObject = domainServices[service];
    if (!serviceObject) return "";
    return serviceObject.description;
  }
--- a/src/components/ha-settings-row.ts
+++ b/src/components/ha-settings-row.ts
@@ -1,59 +0,0 @@
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  LitElement,
-  property,
-  SVGTemplateResult,
-} from "lit-element";
-import "@polymer/paper-item/paper-item-body";
-
-@customElement("ha-settings-row")
-export class HaSettingsRow extends LitElement {
-  @property({ type: Boolean, reflect: true }) public narrow!: boolean;
-
-  @property({ type: Boolean, attribute: "three-line" })
-  public threeLine = false;
-
-  protected render(): SVGTemplateResult {
-    return html`
-      <style>
-        paper-item-body {
-          padding-right: 16px;
-        }
-      </style>
-      <paper-item-body
-        ?two-line=${!this.threeLine}
-        ?three-line=${this.threeLine}
-      >
-        <slot name="heading"></slot>
-        <div secondary><slot name="description"></slot></div>
-      </paper-item-body>
-      <slot></slot>
-    `;
-  }
-
-  static get styles(): CSSResult {
-    return css`
-      :host {
-        display: flex;
-        padding: 0 16px;
-        align-content: normal;
-        align-self: auto;
-        align-items: center;
-      }
-      :host([narrow]) {
-        align-items: normal;
-        flex-direction: column;
-        border-top: 1px solid var(--divider-color);
-        padding-bottom: 8px;
-      }
-    `;
-  }
-}
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-settings-row": HaSettingsRow;
-  }
-}
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -126,7 +126,7 @@ class HaSidebar extends LitElement {

  // property used only in css
  // @ts-ignore
-  @property({ type: Boolean, reflect: true }) public rtl = false;
+  @property({ type: Boolean, reflect: true }) private _rtl = false;

  private _mouseLeaveTimeout?: number;

@@ -312,7 +312,6 @@ class HaSidebar extends LitElement {
      hass.panelUrl !== oldHass.panelUrl ||
      hass.user !== oldHass.user ||
      hass.localize !== oldHass.localize ||
-      hass.language !== oldHass.language ||
      hass.states !== oldHass.states ||
      hass.defaultPanel !== oldHass.defaultPanel
    );
@@ -340,14 +339,12 @@ class HaSidebar extends LitElement {
      return;
    }

-    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-    if (!oldHass || oldHass.language !== this.hass.language) {
-      this.rtl = computeRTL(this.hass);
-    }
+    this._rtl = computeRTL(this.hass);

    if (!SUPPORT_SCROLL_IF_NEEDED) {
      return;
    }
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
    if (!oldHass || oldHass.panelUrl !== this.hass.panelUrl) {
      const selectedEl = this.shadowRoot!.querySelector(".iron-selected");
      if (selectedEl) {
@@ -499,12 +496,9 @@ class HaSidebar extends LitElement {
        width: 64px;
      }
      :host([expanded]) {
-        width: calc(256px + env(safe-area-inset-left));
-      }
-      :host([rtl]) {
-        border-right: 0;
-        border-left: 1px solid var(--divider-color);
+        width: 256px;
      }
+
      .menu {
        box-sizing: border-box;
        height: 65px;
@@ -518,25 +512,18 @@ class HaSidebar extends LitElement {
        background-color: var(--primary-background-color);
        font-size: 20px;
        align-items: center;
-        padding-left: calc(8.5px + env(safe-area-inset-left));
-      }
-      :host([rtl]) .menu {
-        padding-left: 8.5px;
-        padding-right: calc(8.5px + env(safe-area-inset-right));
      }
      :host([expanded]) .menu {
-        width: calc(256px + env(safe-area-inset-left));
-      }
-      :host([rtl][expanded]) .menu {
-        width: calc(256px + env(safe-area-inset-right));
+        width: 256px;
      }
+
      .menu mwc-icon-button {
        color: var(--sidebar-icon-color);
      }
      :host([expanded]) .menu mwc-icon-button {
        margin-right: 23px;
      }
-      :host([expanded][rtl]) .menu mwc-icon-button {
+      :host([expanded][_rtl]) .menu mwc-icon-button {
        margin-right: 0px;
        margin-left: 23px;
      }
@@ -564,18 +551,12 @@ class HaSidebar extends LitElement {
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
-        height: calc(100% - 196px - env(safe-area-inset-bottom));
+        height: calc(100% - 196px);
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-color: var(--scrollbar-thumb-color) transparent;
        scrollbar-width: thin;
        background: none;
-        margin-left: env(safe-area-inset-left);
-      }
-
-      :host([rtl]) paper-listbox {
-        margin-left: initial;
-        margin-right: env(safe-area-inset-right);
      }

      a {
@@ -599,7 +580,7 @@ class HaSidebar extends LitElement {
      :host([expanded]) paper-icon-item {
        width: 240px;
      }
-      :host([rtl]) paper-icon-item {
+      :host([_rtl]) paper-icon-item {
        padding-left: auto;
        padding-right: 12px;
      }
@@ -675,11 +656,6 @@ class HaSidebar extends LitElement {
      }
      .notifications-container {
        display: flex;
-        margin-left: env(safe-area-inset-left);
-      }
-      :host([rtl]) .notifications-container {
-        margin-left: initial;
-        margin-right: env(safe-area-inset-right);
      }
      .notifications {
        cursor: pointer;
@@ -688,23 +664,18 @@ class HaSidebar extends LitElement {
        flex: 1;
      }
      .profile {
-        margin-left: env(safe-area-inset-left);
-      }
-      :host([rtl]) .profile {
-        margin-left: initial;
-        margin-right: env(safe-area-inset-right);
      }
      .profile paper-icon-item {
        padding-left: 4px;
      }
-      :host([rtl]) .profile paper-icon-item {
+      :host([_rtl]) .profile paper-icon-item {
        padding-left: auto;
        padding-right: 4px;
      }
      .profile .item-text {
        margin-left: 8px;
      }
-      :host([rtl]) .profile .item-text {
+      :host([_rtl]) .profile .item-text {
        margin-right: 8px;
      }

@@ -717,7 +688,7 @@ class HaSidebar extends LitElement {
        line-height: 20px;
        text-align: center;
        padding: 0px 6px;
-        color: var(--text-accent-color, var(--text-primary-color));
+        color: var(--text-primary-color);
      }
      ha-svg-icon + .notification-badge {
        position: absolute;
@@ -764,7 +735,7 @@ class HaSidebar extends LitElement {
        font-weight: 500;
      }

-      :host([rtl]) .menu mwc-icon-button {
+      :host([_rtl]) .menu mwc-icon-button {
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
      }
--- a/src/components/ha-yaml-editor.ts
+++ b/src/components/ha-yaml-editor.ts
@@ -50,8 +50,6 @@ export class HaYamlEditor extends LitElement {
    try {
      this._yaml = value && !isEmpty(value) ? safeDump(value) : "";
    } catch (err) {
-      // eslint-disable-next-line no-console
-      console.error(err);
      alert(`There was an error converting to YAML: ${err}`);
    }
    afterNextRender(() => {
--- a/src/components/map/ha-location-editor.ts
+++ b/src/components/map/ha-location-editor.ts
@@ -6,7 +6,6 @@ import {
  LeafletMouseEvent,
  Map,
  Marker,
-  TileLayer,
 } from "leaflet";
 import {
  css,
@@ -21,27 +20,21 @@ import {
 import { fireEvent } from "../../common/dom/fire_event";
 import {
  LeafletModuleType,
-  replaceTileLayer,
  setupLeafletMap,
 } from "../../common/dom/setup-leaflet-map";
 import { nextRender } from "../../common/util/render-status";
 import { defaultRadiusColor } from "../../data/zone";
-import { HomeAssistant } from "../../types";

@customElement("ha-location-editor")
 class LocationEditor extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @property() public location?: [number, number];

-  @property({ type: Array }) public location?: [number, number];
-
-  @property({ type: Number }) public radius?: number;
+  @property() public radius?: number;

  @property() public radiusColor?: string;

  @property() public icon?: string;

-  @property({ type: Boolean }) public darkMode?: boolean;
-
  public fitZoom = 16;

  private _iconEl?: DivIcon;
@@ -53,8 +46,6 @@ class LocationEditor extends LitElement {

  private _leafletMap?: Map;

-  private _tileLayer?: TileLayer;
-
  private _locationMarker?: Marker | Circle;

  public fitMap(): void {
@@ -106,22 +97,6 @@ class LocationEditor extends LitElement {
    if (changedProps.has("icon")) {
      this._updateIcon();
    }
-
-    if (changedProps.has("hass")) {
-      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-      if (!oldHass || oldHass.themes?.darkMode === this.hass.themes?.darkMode) {
-        return;
-      }
-      if (!this._leafletMap || !this._tileLayer) {
-        return;
-      }
-      this._tileLayer = replaceTileLayer(
-        this.Leaflet,
-        this._leafletMap,
-        this._tileLayer,
-        this.hass.themes?.darkMode
-      );
-    }
  }

  private get _mapEl(): HTMLDivElement {
@@ -129,9 +104,9 @@ class LocationEditor extends LitElement {
  }

  private async _initMap(): Promise<void> {
-    [this._leafletMap, this.Leaflet, this._tileLayer] = await setupLeafletMap(
+    [this._leafletMap, this.Leaflet] = await setupLeafletMap(
      this._mapEl,
-      this.darkMode ?? this.hass.themes?.darkMode,
+      false,
      Boolean(this.radius)
    );
    this._leafletMap.addEventListener(
@@ -280,6 +255,9 @@ class LocationEditor extends LitElement {
      #map {
        height: 100%;
      }
+      .light {
+        color: #000000;
+      }
      .leaflet-edit-move {
        border-radius: 50%;
        cursor: move !important;
--- a/src/components/map/ha-locations-editor.ts
+++ b/src/components/map/ha-locations-editor.ts
@@ -6,7 +6,6 @@ import {
  Map,
  Marker,
  MarkerOptions,
-  TileLayer,
 } from "leaflet";
 import {
  css,
@@ -22,10 +21,8 @@ import { fireEvent } from "../../common/dom/fire_event";
 import {
  LeafletModuleType,
  setupLeafletMap,
-  replaceTileLayer,
 } from "../../common/dom/setup-leaflet-map";
 import { defaultRadiusColor } from "../../data/zone";
-import { HomeAssistant } from "../../types";

 declare global {
  // for fire event
@@ -50,8 +47,6 @@ export interface MarkerLocation {

@customElement("ha-locations-editor")
 export class HaLocationsEditor extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
  @property() public locations?: MarkerLocation[];

  public fitZoom = 16;
@@ -62,8 +57,6 @@ export class HaLocationsEditor extends LitElement {
  // eslint-disable-next-line
  private _leafletMap?: Map;

-  private _tileLayer?: TileLayer;
-
  private _locationMarkers?: { [key: string]: Marker | Circle };

  private _circles: { [key: string]: Circle } = {};
@@ -123,22 +116,6 @@ export class HaLocationsEditor extends LitElement {
    if (changedProps.has("locations")) {
      this._updateMarkers();
    }
-
-    if (changedProps.has("hass")) {
-      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-      if (!oldHass || oldHass.themes.darkMode === this.hass.themes.darkMode) {
-        return;
-      }
-      if (!this._leafletMap || !this._tileLayer) {
-        return;
-      }
-      this._tileLayer = replaceTileLayer(
-        this.Leaflet,
-        this._leafletMap,
-        this._tileLayer,
-        this.hass.themes.darkMode
-      );
-    }
  }

  private get _mapEl(): HTMLDivElement {
@@ -146,9 +123,9 @@ export class HaLocationsEditor extends LitElement {
  }

  private async _initMap(): Promise<void> {
-    [this._leafletMap, this.Leaflet, this._tileLayer] = await setupLeafletMap(
+    [this._leafletMap, this.Leaflet] = await setupLeafletMap(
      this._mapEl,
-      this.hass.themes.darkMode,
+      false,
      true
    );
    this._updateMarkers();
@@ -313,6 +290,9 @@ export class HaLocationsEditor extends LitElement {
      #map {
        height: 100%;
      }
+      .light {
+        color: #000000;
+      }
      .leaflet-marker-draggable {
        cursor: move !important;
      }
--- a/src/components/map/ha-map.ts
+++ b/src/components/map/ha-map.ts
@@ -1,5 +1,5 @@
 import "../ha-icon-button";
-import { Circle, Layer, Map, Marker, TileLayer } from "leaflet";
+import { Circle, Layer, Map, Marker } from "leaflet";
 import {
  css,
  CSSResult,
@@ -13,7 +13,6 @@ import {
 import {
  LeafletModuleType,
  setupLeafletMap,
-  replaceTileLayer,
 } from "../../common/dom/setup-leaflet-map";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
@@ -23,11 +22,11 @@ import { HomeAssistant } from "../../types";

@customElement("ha-map")
 class HaMap extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
+  @property({ attribute: false }) public hass?: HomeAssistant;

  @property() public entities?: string[];

-  @property() public darkMode?: boolean;
+  @property() public darkMode = false;

  @property() public zoom?: number;

@@ -36,8 +35,6 @@ class HaMap extends LitElement {

  private _leafletMap?: Map;

-  private _tileLayer?: TileLayer;
-
  // @ts-ignore
  private _resizeObserver?: ResizeObserver;

@@ -125,20 +122,6 @@ class HaMap extends LitElement {
    if (changedProps.has("hass")) {
      this._drawEntities();
      this._fitMap();
-
-      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-      if (!oldHass || oldHass.themes.darkMode === this.hass.themes.darkMode) {
-        return;
-      }
-      if (!this.Leaflet || !this._leafletMap || !this._tileLayer) {
-        return;
-      }
-      this._tileLayer = replaceTileLayer(
-        this.Leaflet,
-        this._leafletMap,
-        this._tileLayer,
-        this.hass.themes.darkMode
-      );
    }
  }

@@ -147,9 +130,9 @@ class HaMap extends LitElement {
  }

  private async loadMap(): Promise<void> {
-    [this._leafletMap, this.Leaflet, this._tileLayer] = await setupLeafletMap(
+    [this._leafletMap, this.Leaflet] = await setupLeafletMap(
      this._mapEl,
-      this.darkMode ?? this.hass.themes.darkMode
+      this.darkMode
    );
    this._drawEntities();
    this._leafletMap.invalidateSize();
@@ -246,8 +229,7 @@ class HaMap extends LitElement {
            icon: Leaflet.divIcon({
              html: iconHTML,
              iconSize: [24, 24],
-              className:
-                this.darkMode ?? this.hass.themes.darkMode ? "dark" : "light",
+              className: this.darkMode ? "dark" : "light",
            }),
            interactive: false,
            title,
--- a/src/components/media-player/dialog-media-player-browse.ts
+++ b/src/components/media-player/dialog-media-player-browse.ts
@@ -1,115 +0,0 @@
-import {
-  css,
-  CSSResultArray,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { HASSDomEvent } from "../../common/dom/fire_event";
-import type {
-  MediaPickedEvent,
-  MediaPlayerBrowseAction,
-} from "../../data/media-player";
-import { haStyleDialog } from "../../resources/styles";
-import type { HomeAssistant } from "../../types";
-import { createCloseHeading } from "../ha-dialog";
-import "./ha-media-player-browse";
-import { MediaPlayerBrowseDialogParams } from "./show-media-browser-dialog";
-
-@customElement("dialog-media-player-browse")
-class DialogMediaPlayerBrowse extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @internalProperty() private _entityId!: string;
-
-  @internalProperty() private _mediaContentId?: string;
-
-  @internalProperty() private _mediaContentType?: string;
-
-  @internalProperty() private _action?: MediaPlayerBrowseAction;
-
-  @internalProperty() private _params?: MediaPlayerBrowseDialogParams;
-
-  public async showDialog(
-    params: MediaPlayerBrowseDialogParams
-  ): Promise<void> {
-    this._params = params;
-    this._entityId = this._params.entityId;
-    this._mediaContentId = this._params.mediaContentId;
-    this._mediaContentType = this._params.mediaContentType;
-    this._action = this._params.action || "play";
-
-    await this.updateComplete;
-  }
-
-  protected render(): TemplateResult {
-    if (!this._params) {
-      return html``;
-    }
-
-    return html`
-      <ha-dialog
-        open
-        scrimClickAction
-        escapeKeyAction
-        hideActions
-        .heading=${createCloseHeading(
-          this.hass,
-          this.hass.localize("ui.components.media-browser.media-player-browser")
-        )}
-        @closed=${this._closeDialog}
-      >
-        <ha-media-player-browse
-          .hass=${this.hass}
-          .entityId=${this._entityId}
-          .action=${this._action!}
-          .mediaContentId=${this._mediaContentId}
-          .mediaContentType=${this._mediaContentType}
-          @media-picked=${this._mediaPicked}
-        ></ha-media-player-browse>
-      </ha-dialog>
-    `;
-  }
-
-  private _closeDialog() {
-    this._params = undefined;
-  }
-
-  private _mediaPicked(ev: HASSDomEvent<MediaPickedEvent>): void {
-    this._params!.mediaPickedCallback(ev.detail);
-    if (this._action !== "play") {
-      this._closeDialog();
-    }
-  }
-
-  static get styles(): CSSResultArray {
-    return [
-      haStyleDialog,
-      css`
-        ha-dialog {
-          --dialog-z-index: 8;
-          --dialog-content-padding: 0;
-        }
-
-        @media (min-width: 800px) {
-          ha-dialog {
-            --mdc-dialog-max-width: 800px;
-          }
-          ha-media-player-browse {
-            width: 700px;
-            padding: 20px 24px;
-          }
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "dialog-media-player-browse": DialogMediaPlayerBrowse;
-  }
-}
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/src/components/media-player/ha-media-player-browse.ts
@@ -1,591 +0,0 @@
-import "@material/mwc-button/mwc-button";
-import "@material/mwc-fab/mwc-fab";
-import "@material/mwc-list/mwc-list";
-import "@material/mwc-list/mwc-list-item";
-import { mdiArrowLeft, mdiFolder, mdiPlay, mdiPlus } from "@mdi/js";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-import {
-  css,
-  CSSResultArray,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-  TemplateResult,
-} from "lit-element";
-import memoizeOne from "memoize-one";
-import { fireEvent } from "../../common/dom/fire_event";
-import { debounce } from "../../common/util/debounce";
-import { browseMediaPlayer, MediaPickedEvent } from "../../data/media-player";
-import type { MediaPlayerItem } from "../../data/media-player";
-import { installResizeObserver } from "../../panels/lovelace/common/install-resize-observer";
-import { haStyle } from "../../resources/styles";
-import type { HomeAssistant } from "../../types";
-import "../entity/ha-entity-picker";
-import "../ha-button-menu";
-import "../ha-card";
-import "../ha-circular-progress";
-import "../ha-paper-dropdown-menu";
-import "../ha-svg-icon";
-
-declare global {
-  interface HASSDomEvents {
-    "media-picked": MediaPickedEvent;
-  }
-}
-
-@customElement("ha-media-player-browse")
-export class HaMediaPlayerBrowse extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public entityId!: string;
-
-  @property() public mediaContentId?: string;
-
-  @property() public mediaContentType?: string;
-
-  @property() public action: "pick" | "play" = "play";
-
-  @property({ type: Boolean, attribute: "narrow", reflect: true })
-  private _narrow = false;
-
-  @internalProperty() private _loading = false;
-
-  @internalProperty() private _mediaPlayerItems: MediaPlayerItem[] = [];
-
-  private _resizeObserver?: ResizeObserver;
-
-  public connectedCallback(): void {
-    super.connectedCallback();
-    this.updateComplete.then(() => this._attachObserver());
-  }
-
-  public disconnectedCallback(): void {
-    if (this._resizeObserver) {
-      this._resizeObserver.disconnect();
-    }
-  }
-
-  protected render(): TemplateResult {
-    if (!this._mediaPlayerItems.length) {
-      return html``;
-    }
-
-    if (this._loading) {
-      return html`<ha-circular-progress active></ha-circular-progress>`;
-    }
-
-    const mostRecentItem = this._mediaPlayerItems[
-      this._mediaPlayerItems.length - 1
-    ];
-    const previousItem =
-      this._mediaPlayerItems.length > 1
-        ? this._mediaPlayerItems[this._mediaPlayerItems.length - 2]
-        : undefined;
-
-    const hasExpandableChildren:
-      | MediaPlayerItem
-      | undefined = this._hasExpandableChildren(mostRecentItem.children);
-
-    return html`
-      <div class="header">
-        <div class="header-content">
-          ${mostRecentItem.thumbnail
-            ? html`
-                <div
-                  class="img"
-                  style="background-image: url(${mostRecentItem.thumbnail})"
-                >
-                  ${this._narrow && mostRecentItem?.can_play
-                    ? html`
-                        <mwc-fab
-                          mini
-                          .item=${mostRecentItem}
-                          @click=${this._actionClicked}
-                        >
-                          <ha-svg-icon
-                            slot="icon"
-                            .label=${this.hass.localize(
-                              `ui.components.media-browser.${this.action}-media`
-                            )}
-                            .path=${this.action === "play" ? mdiPlay : mdiPlus}
-                          ></ha-svg-icon>
-                          ${this.hass.localize(
-                            `ui.components.media-browser.${this.action}`
-                          )}
-                        </mwc-fab>
-                      `
-                    : ""}
-                </div>
-              `
-            : html``}
-          <div class="header-info">
-            <div class="breadcrumb-overflow">
-              <div class="breadcrumb">
-                ${previousItem
-                  ? html`
-                      <div
-                        class="previous-title"
-                        .previous=${true}
-                        .item=${previousItem}
-                        @click=${this._navigate}
-                      >
-                        <ha-svg-icon .path=${mdiArrowLeft}></ha-svg-icon>
-                        ${previousItem.title}
-                      </div>
-                    `
-                  : ""}
-                <h1 class="title">${mostRecentItem.title}</h1>
-                <h2 class="subtitle">
-                  ${this.hass.localize(
-                    `ui.components.media-browser.content-type.${mostRecentItem.media_content_type}`
-                  )}
-                </h2>
-              </div>
-            </div>
-            ${mostRecentItem?.can_play &&
-            (!this._narrow || (this._narrow && !mostRecentItem.thumbnail))
-              ? html`
-                  <div class="actions">
-                    <mwc-button
-                      raised
-                      .item=${mostRecentItem}
-                      @click=${this._actionClicked}
-                    >
-                      <ha-svg-icon
-                        slot="icon"
-                        .label=${this.hass.localize(
-                          `ui.components.media-browser.${this.action}-media`
-                        )}
-                        .path=${this.action === "play" ? mdiPlay : mdiPlus}
-                      ></ha-svg-icon>
-                      ${this.hass.localize(
-                        `ui.components.media-browser.${this.action}`
-                      )}
-                    </mwc-button>
-                  </div>
-                `
-              : ""}
-          </div>
-        </div>
-      </div>
-      <div class="divider"></div>
-      ${mostRecentItem.children?.length
-        ? hasExpandableChildren
-          ? html`
-              <div class="children">
-                ${mostRecentItem.children?.length
-                  ? html`
-                      ${mostRecentItem.children.map(
-                        (child) => html`
-                          <div
-                            class="child"
-                            .item=${child}
-                            @click=${this._navigate}
-                          >
-                            <div class="ha-card-parent">
-                              <ha-card
-                                outlined
-                                style="background-image: url(${child.thumbnail})"
-                              >
-                                ${child.can_expand && !child.thumbnail
-                                  ? html`
-                                      <ha-svg-icon
-                                        class="folder"
-                                        .path=${mdiFolder}
-                                      ></ha-svg-icon>
-                                    `
-                                  : ""}
-                              </ha-card>
-                              ${child.can_play
-                                ? html`
-                                    <mwc-icon-button
-                                      class="play"
-                                      .item=${child}
-                                      .label=${this.hass.localize(
-                                        `ui.components.media-browser.${this.action}-media`
-                                      )}
-                                      @click=${this._actionClicked}
-                                    >
-                                      <ha-svg-icon
-                                        .path=${this.action === "play"
-                                          ? mdiPlay
-                                          : mdiPlus}
-                                      ></ha-svg-icon>
-                                    </mwc-icon-button>
-                                  `
-                                : ""}
-                            </div>
-                            <div class="title">${child.title}</div>
-                            <div class="type">
-                              ${this.hass.localize(
-                                `ui.components.media-browser.content-type.${child.media_content_type}`
-                              )}
-                            </div>
-                          </div>
-                        `
-                      )}
-                    `
-                  : ""}
-              </div>
-            `
-          : html`
-              <mwc-list>
-                ${mostRecentItem.children.map(
-                  (child) => html`<mwc-list-item
-                      @click=${this._actionClicked}
-                      .item=${child}
-                      graphic="icon"
-                    >
-                      <span>${child.title}</span>
-                      <ha-svg-icon
-                        slot="graphic"
-                        .label=${this.hass.localize(
-                          `ui.components.media-browser.${this.action}-media`
-                        )}
-                        .path=${this.action === "play" ? mdiPlay : mdiPlus}
-                      ></ha-svg-icon
-                    ></mwc-list-item>
-                    <li divider role="separator"></li>`
-                )}
-              </mwc-list>
-            `
-        : this.hass.localize("ui.components.media-browser.no_items")}
-    `;
-  }
-
-  protected firstUpdated(): void {
-    this._measureCard();
-    this._attachObserver();
-  }
-
-  protected updated(changedProps: PropertyValues): void {
-    super.updated(changedProps);
-
-    if (
-      !changedProps.has("entityId") &&
-      !changedProps.has("mediaContentId") &&
-      !changedProps.has("mediaContentType") &&
-      !changedProps.has("action")
-    ) {
-      return;
-    }
-
-    this._fetchData(this.mediaContentId, this.mediaContentType).then(
-      (itemData) => {
-        this._mediaPlayerItems = [itemData];
-      }
-    );
-  }
-
-  private _actionClicked(ev: MouseEvent): void {
-    ev.stopPropagation();
-    const item = (ev.currentTarget as any).item;
-
-    this._runAction(item);
-  }
-
-  private _runAction(item: MediaPlayerItem): void {
-    fireEvent(this, "media-picked", {
-      media_content_id: item.media_content_id,
-      media_content_type: item.media_content_type,
-    });
-  }
-
-  private async _navigate(ev: MouseEvent): Promise<void> {
-    const target = ev.currentTarget as any;
-    let item: MediaPlayerItem | undefined;
-
-    if (target.previous) {
-      this._mediaPlayerItems!.pop();
-      item = this._mediaPlayerItems!.pop();
-    }
-
-    item = target.item;
-
-    if (!item) {
-      return;
-    }
-
-    const itemData = await this._fetchData(
-      item.media_content_id,
-      item.media_content_type
-    );
-    this._mediaPlayerItems = [...this._mediaPlayerItems, itemData];
-  }
-
-  private async _fetchData(
-    mediaContentId?: string,
-    mediaContentType?: string
-  ): Promise<MediaPlayerItem> {
-    const itemData = await browseMediaPlayer(
-      this.hass,
-      this.entityId,
-      !mediaContentId ? undefined : mediaContentId,
-      mediaContentType
-    );
-
-    return itemData;
-  }
-
-  private _measureCard(): void {
-    this._narrow = this.offsetWidth < 500;
-  }
-
-  private async _attachObserver(): Promise<void> {
-    if (!this._resizeObserver) {
-      await installResizeObserver();
-      this._resizeObserver = new ResizeObserver(
-        debounce(() => this._measureCard(), 250, false)
-      );
-    }
-
-    this._resizeObserver.observe(this);
-  }
-
-  private _hasExpandableChildren = memoizeOne((children) =>
-    children.find((item: MediaPlayerItem) => item.can_expand)
-  );
-
-  static get styles(): CSSResultArray {
-    return [
-      haStyle,
-      css`
-        :host {
-          display: block;
-        }
-
-        .header {
-          display: flex;
-          justify-content: space-between;
-        }
-
-        .breadcrumb-overflow {
-          display: flex;
-          justify-content: space-between;
-        }
-
-        .header-content {
-          display: flex;
-          flex-wrap: wrap;
-          flex-grow: 1;
-          align-items: flex-start;
-        }
-
-        .header-content .img {
-          height: 200px;
-          width: 200px;
-          margin-right: 16px;
-          background-size: cover;
-        }
-
-        .header-info {
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
-          align-self: stretch;
-          min-width: 0;
-          flex: 1;
-        }
-
-        .header-info .actions {
-          padding-top: 24px;
-          --mdc-theme-primary: var(--primary-color);
-        }
-
-        .breadcrumb {
-          display: flex;
-          flex-direction: column;
-          overflow: hidden;
-          flex-grow: 1;
-        }
-
-        .breadcrumb .title {
-          font-size: 48px;
-          line-height: 1.2;
-          font-weight: bold;
-          margin: 0;
-          overflow: hidden;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 2;
-        }
-
-        .breadcrumb .previous-title {
-          font-size: 14px;
-          padding-bottom: 8px;
-          color: var(--secondary-text-color);
-          overflow: hidden;
-          text-overflow: ellipsis;
-          cursor: pointer;
-          --mdc-icon-size: 14px;
-        }
-
-        .breadcrumb .subtitle {
-          font-size: 16px;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-
-        .divider {
-          padding: 10px 0;
-        }
-
-        .divider::before {
-          height: 1px;
-          display: block;
-          background-color: var(--divider-color);
-          content: " ";
-        }
-
-        /* ============= CHILDREN ============= */
-
-        mwc-list {
-          --mdc-list-vertical-padding: 0;
-          --mdc-theme-text-icon-on-background: var(--secondary-text-color);
-          border: 1px solid var(--divider-color);
-          border-radius: 4px;
-        }
-
-        mwc-list li:last-child {
-          display: none;
-        }
-
-        mwc-list li[divider] {
-          border-bottom-color: var(--divider-color);
-        }
-
-        .children {
-          display: grid;
-          grid-template-columns: repeat(
-            auto-fit,
-            minmax(var(--media-browse-item-size, 175px), 0.33fr)
-          );
-          grid-gap: 16px;
-          margin: 8px 0px;
-        }
-
-        .child {
-          display: flex;
-          flex-direction: column;
-          cursor: pointer;
-        }
-
-        .ha-card-parent {
-          position: relative;
-          width: 100%;
-        }
-
-        ha-card {
-          width: 100%;
-          padding-bottom: 100%;
-          position: relative;
-          box-sizing: border-box;
-          background-size: cover;
-          background-repeat: no-repeat;
-          background-position: center;
-        }
-
-        .child .folder,
-        .child .play {
-          position: absolute;
-        }
-
-        .child .folder {
-          color: var(--secondary-text-color);
-          top: calc(50% - (var(--mdc-icon-size) / 2));
-          left: calc(50% - (var(--mdc-icon-size) / 2));
-          --mdc-icon-size: calc(var(--media-browse-item-size, 175px) * 0.4);
-        }
-
-        .child .play {
-          bottom: 4px;
-          right: 4px;
-          transition: all 0.5s;
-          background-color: rgba(255, 255, 255, 0.5);
-          border-radius: 50%;
-        }
-
-        .child .play:hover {
-          color: var(--primary-color);
-        }
-
-        ha-card:hover {
-          opacity: 0.5;
-        }
-
-        .child .title {
-          font-size: 16px;
-          padding-top: 8px;
-          overflow: hidden;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 2;
-        }
-
-        .child .type {
-          font-size: 12px;
-          color: var(--secondary-text-color);
-        }
-
-        /* ============= Narrow ============= */
-
-        :host([narrow]) {
-          padding: 0;
-        }
-
-        :host([narrow]) mwc-list {
-          border: 0;
-        }
-
-        :host([narrow]) .breadcrumb .title {
-          font-size: 38px;
-        }
-
-        :host([narrow]) .breadcrumb-overflow {
-          align-items: flex-end;
-        }
-
-        :host([narrow]) .header-content {
-          flex-direction: column;
-          flex-wrap: nowrap;
-        }
-
-        :host([narrow]) .header-content .img {
-          height: auto;
-          width: 100%;
-          margin-right: 0;
-          padding-bottom: 100%;
-          margin-bottom: 8px;
-          position: relative;
-        }
-
-        :host([narrow]) .header-content .img mwc-fab {
-          position: absolute;
-          --mdc-theme-secondary: var(--primary-color);
-          bottom: -20px;
-          right: 20px;
-        }
-
-        :host([narrow]) .header-info,
-        :host([narrow]) .media-source,
-        :host([narrow]) .children {
-          padding: 0 24px;
-        }
-
-        :host([narrow]) .children {
-          grid-template-columns: 1fr 1fr !important;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-media-player-browse": HaMediaPlayerBrowse;
-  }
-}
--- a/src/components/media-player/show-media-browser-dialog.ts
+++ b/src/components/media-player/show-media-browser-dialog.ts
@@ -1,27 +0,0 @@
-import { fireEvent } from "../../common/dom/fire_event";
-import {
-  MediaPickedEvent,
-  MediaPlayerBrowseAction,
-} from "../../data/media-player";
-
-export interface MediaPlayerBrowseDialogParams {
-  action: MediaPlayerBrowseAction;
-  entityId: string;
-  mediaPickedCallback: (pickedMedia: MediaPickedEvent) => void;
-  mediaContentId?: string;
-  mediaContentType?: string;
-}
-
-export const showMediaBrowserDialog = (
-  element: HTMLElement,
-  dialogParams: MediaPlayerBrowseDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "dialog-media-player-browse",
-    dialogImport: () =>
-      import(
-        /* webpackChunkName: "dialog-media-player-browse" */ "./dialog-media-player-browse"
-      ),
-    dialogParams,
-  });
-};
--- a/src/components/paper-time-input.js
+++ b/src/components/paper-time-input.js
@@ -322,9 +322,9 @@ export class PaperTimeInput extends PolymerElement {
   * @return {boolean}
   */
  validate() {
-    let valid = true;
+    var valid = true;
    // Validate hour & min fields
-    if (!this.$.hour.validate() || !this.$.min.validate()) {
+    if (!this.$.hour.validate() | !this.$.min.validate()) {
      valid = false;
    }
    // Validate second field
--- a/src/components/state-history-chart-line.js
+++ b/src/components/state-history-chart-line.js
@@ -19,7 +19,6 @@ class StateHistoryChartLine extends LocalizeMixin(PolymerElement) {
      </style>
      <ha-chart-base
        id="chart"
-        hass="[[hass]]"
        data="[[chartData]]"
        identifier="[[identifier]]"
        rendered="{{rendered}}"
@@ -29,9 +28,6 @@ class StateHistoryChartLine extends LocalizeMixin(PolymerElement) {

  static get properties() {
    return {
-      hass: {
-        type: Object,
-      },
      chartData: Object,
      data: Object,
      names: Object,
--- a/src/components/state-history-chart-timeline.js
+++ b/src/components/state-history-chart-timeline.js
@@ -25,7 +25,6 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
        }
      </style>
      <ha-chart-base
-        hass="[[hass]]"
        data="[[chartData]]"
        rendered="{{rendered}}"
        rtl="{{rtl}}"
--- a/src/components/user/ha-user-badge.ts
+++ b/src/components/user/ha-user-badge.ts
@@ -57,7 +57,7 @@ class StateBadge extends LitElement {
        text-align: center;
        background-color: var(--light-primary-color);
        text-decoration: none;
-        color: var(--text-light-primary-color, var(--primary-text-color));
+        color: var(--primary-text-color);
        overflow: hidden;
      }

--- a/src/data/auth.ts
+++ b/src/data/auth.ts
@@ -44,14 +44,3 @@ export const createAuthForUser = async (
    username,
    password,
  });
-
-export const adminChangePassword = async (
-  hass: HomeAssistant,
-  userId: string,
-  password: string
-) =>
-  hass.callWS<void>({
-    type: "config/auth_provider/homeassistant/admin_change_password",
-    user_id: userId,
-    password,
-  });
--- a/src/data/automation.ts
+++ b/src/data/automation.ts
@@ -3,7 +3,7 @@ import {
  HassEntityBase,
 } from "home-assistant-js-websocket";
 import { navigate } from "../common/navigate";
-import { HomeAssistant, Context } from "../types";
+import { HomeAssistant } from "../types";
 import { DeviceCondition, DeviceTrigger } from "./device_automation";
 import { Action } from "./script";

@@ -90,12 +90,6 @@ export interface ZoneTrigger {
  event: "enter" | "leave";
 }

-export interface TagTrigger {
-  platform: "tag";
-  tag_id: string;
-  device_id?: string;
-}
-
 export interface TimeTrigger {
  platform: "time";
  at: string;
@@ -122,7 +116,6 @@ export type Trigger =
  | TimePatternTrigger
  | WebhookTrigger
  | ZoneTrigger
-  | TagTrigger
  | TimeTrigger
  | TemplateTrigger
  | EventTrigger
@@ -206,31 +199,3 @@ export const getAutomationEditorInitData = () => {
  inititialAutomationEditorData = undefined;
  return data;
 };
-
-export const subscribeTrigger = (
-  hass: HomeAssistant,
-  onChange: (result: {
-    variables: {
-      trigger: {};
-    };
-    context: Context;
-  }) => void,
-  trigger: Trigger | Trigger[],
-  variables?: {}
-) =>
-  hass.connection.subscribeMessage(onChange, {
-    type: "subscribe_trigger",
-    trigger,
-    variables,
-  });
-
-export const testCondition = (
-  hass: HomeAssistant,
-  condition: Condition | Condition[],
-  variables?: {}
-) =>
-  hass.callWS<{ result: boolean }>({
-    type: "test_condition",
-    condition,
-    variables,
-  });
--- a/src/data/config_entries.ts
+++ b/src/data/config_entries.ts
@@ -8,7 +8,6 @@ export interface ConfigEntry {
  state: string;
  connection_class: string;
  supports_options: boolean;
-  supports_unload: boolean;
 }

 export interface ConfigEntryMutableParams {
@@ -38,11 +37,6 @@ export const deleteConfigEntry = (hass: HomeAssistant, configEntryId: string) =>
    require_restart: boolean;
  }>("DELETE", `config/config_entries/entry/${configEntryId}`);

-export const reloadConfigEntry = (hass: HomeAssistant, configEntryId: string) =>
-  hass.callApi<{
-    require_restart: boolean;
-  }>("POST", `config/config_entries/entry/${configEntryId}/reload`);
-
 export const getConfigEntrySystemOptions = (
  hass: HomeAssistant,
  configEntryId: string
--- a/src/data/device_automation.ts
+++ b/src/data/device_automation.ts
@@ -1,6 +1,5 @@
 import { computeStateName } from "../common/entity/compute_state_name";
 import { HomeAssistant } from "../types";
-import { HaFormSchema } from "../components/ha-form/ha-form";

 export interface DeviceAutomation {
  device_id: string;
@@ -21,10 +20,6 @@ export interface DeviceTrigger extends DeviceAutomation {
  platform: "device";
 }

-export interface DeviceCapabilities {
-  extra_fields: HaFormSchema[];
-}
-
 export const fetchDeviceActions = (hass: HomeAssistant, deviceId: string) =>
  hass.callWS<DeviceAction[]>({
    type: "device_automation/action/list",
@@ -47,7 +42,7 @@ export const fetchDeviceActionCapabilities = (
  hass: HomeAssistant,
  action: DeviceAction
 ) =>
-  hass.callWS<DeviceCapabilities>({
+  hass.callWS<DeviceAction[]>({
    type: "device_automation/action/capabilities",
    action,
  });
@@ -56,7 +51,7 @@ export const fetchDeviceConditionCapabilities = (
  hass: HomeAssistant,
  condition: DeviceCondition
 ) =>
-  hass.callWS<DeviceCapabilities>({
+  hass.callWS<DeviceCondition[]>({
    type: "device_automation/condition/capabilities",
    condition,
  });
@@ -65,7 +60,7 @@ export const fetchDeviceTriggerCapabilities = (
  hass: HomeAssistant,
  trigger: DeviceTrigger
 ) =>
-  hass.callWS<DeviceCapabilities>({
+  hass.callWS<DeviceTrigger[]>({
    type: "device_automation/trigger/capabilities",
    trigger,
  });
--- a/src/data/device_registry.ts
+++ b/src/data/device_registry.ts
@@ -8,7 +8,6 @@ export interface DeviceRegistryEntry {
  id: string;
  config_entries: string[];
  connections: Array<[string, string]>;
-  identifiers: Array<[string, string]>;
  manufacturer: string;
  model?: string;
  name?: string;
--- a/src/data/hassio/addon.ts
+++ b/src/data/hassio/addon.ts
@@ -72,7 +72,6 @@ export interface HassioAddonDetails extends HassioAddonInfo {
  ingress_panel: boolean;
  ingress_entry: null | string;
  ingress_url: null | string;
-  watchdog: null | boolean;
 }

 export interface HassioAddonsInfo {
@@ -100,7 +99,6 @@ export interface HassioAddonSetOptionParams {
  auto_update?: boolean;
  ingress_panel?: boolean;
  network?: object | null;
-  watchdog?: boolean;
 }

 export const reloadHassioAddons = async (hass: HomeAssistant) => {
--- a/src/data/hassio/host.ts
+++ b/src/data/hassio/host.ts
@@ -40,10 +40,6 @@ export const updateOS = async (hass: HomeAssistant) => {
  return hass.callApi<HassioResponse<void>>("POST", "hassio/os/update");
 };

-export const configSyncOS = async (hass: HomeAssistant) => {
-  return hass.callApi<HassioResponse<void>>("POST", "hassio/os/config/sync");
-};
-
 export const changeHostOptions = async (hass: HomeAssistant, options: any) => {
  return hass.callApi<HassioResponse<void>>(
    "POST",
--- a/src/data/hassio/network.ts
+++ b/src/data/hassio/network.ts
@@ -1,43 +0,0 @@
-import { HomeAssistant } from "../../types";
-import { hassioApiResultExtractor, HassioResponse } from "./common";
-
-export interface NetworkInterface {
-  gateway: string;
-  id: string;
-  ip_address: string;
-  address?: string;
-  method: "static" | "dhcp";
-  nameservers: string[] | string;
-  dns?: string[];
-  primary: boolean;
-  type: string;
-}
-
-export interface NetworkInterfaces {
-  [key: string]: NetworkInterface;
-}
-
-export interface NetworkInfo {
-  interfaces: NetworkInterfaces;
-}
-
-export const fetchNetworkInfo = async (hass: HomeAssistant) => {
-  return hassioApiResultExtractor(
-    await hass.callApi<HassioResponse<NetworkInfo>>(
-      "GET",
-      "hassio/network/info"
-    )
-  );
-};
-
-export const updateNetworkInterface = async (
-  hass: HomeAssistant,
-  network_interface: string,
-  options: Partial<NetworkInterface>
-) => {
-  await hass.callApi<HassioResponse<NetworkInfo>>(
-    "POST",
-    `hassio/network/interface/${network_interface}/update`,
-    options
-  );
-};
--- a/src/data/hassio/supervisor.ts
+++ b/src/data/hassio/supervisor.ts
@@ -31,18 +31,9 @@ export interface CreateSessionResponse {

 export interface SupervisorOptions {
  channel?: "beta" | "dev" | "stable";
-  diagnostics?: boolean;
  addons_repositories?: string[];
 }

-export const reloadSupervisor = async (hass: HomeAssistant) => {
-  await hass.callApi<HassioResponse<void>>("POST", `hassio/supervisor/reload`);
-};
-
-export const updateSupervisor = async (hass: HomeAssistant) => {
-  await hass.callApi<HassioResponse<void>>("POST", `hassio/supervisor/update`);
-};
-
 export const fetchHassioHomeAssistantInfo = async (hass: HomeAssistant) => {
  return hassioApiResultExtractor(
    await hass.callApi<HassioResponse<HassioHomeAssistantInfo>>(
@@ -79,11 +70,7 @@ export const createHassioSession = async (hass: HomeAssistant) => {
    "POST",
    "hassio/ingress/session"
  );
-  document.cookie = `ingress_session=${
-    response.data.session
-  };path=/api/hassio_ingress/;SameSite=Strict${
-    location.protocol === "https:" ? ";Secure" : ""
-  }`;
+  document.cookie = `ingress_session=${response.data.session};path=/api/hassio_ingress/`;
 };

 export const setSupervisorOption = async (
--- a/src/data/image.ts
+++ b/src/data/image.ts
@@ -1,54 +0,0 @@
-import { HomeAssistant } from "../types";
-
-interface Image {
-  filesize: number;
-  name: string;
-  uploaded_at: string; // isoformat date
-  content_type: string;
-  id: string;
-}
-
-export interface ImageMutableParams {
-  name: string;
-}
-
-export const generateImageThumbnailUrl = (mediaId: string, size: number) =>
-  `/api/image/serve/${mediaId}/${size}x${size}`;
-
-export const fetchImages = (hass: HomeAssistant) =>
-  hass.callWS<Image[]>({ type: "image/list" });
-
-export const createImage = async (
-  hass: HomeAssistant,
-  file: File
-): Promise<Image> => {
-  const fd = new FormData();
-  fd.append("file", file);
-  const resp = await hass.fetchWithAuth("/api/image/upload", {
-    method: "POST",
-    body: fd,
-  });
-  if (resp.status === 413) {
-    throw new Error("Uploaded image is too large");
-  } else if (resp.status !== 200) {
-    throw new Error("Unknown error");
-  }
-  return await resp.json();
-};
-
-export const updateImage = (
-  hass: HomeAssistant,
-  id: string,
-  updates: Partial<ImageMutableParams>
-) =>
-  hass.callWS<Image>({
-    type: "image/update",
-    media_id: id,
-    ...updates,
-  });
-
-export const deleteImage = (hass: HomeAssistant, id: string) =>
-  hass.callWS({
-    type: "image/delete",
-    media_id: id,
-  });
--- a/src/data/logbook.ts
+++ b/src/data/logbook.ts
@@ -7,12 +7,6 @@ export interface LogbookEntry {
  entity_id?: string;
  domain: string;
  context_user_id?: string;
-  context_event_type?: string;
-  context_domain?: string;
-  context_service?: string;
-  context_entity_id?: string;
-  context_entity_id_name?: string;
-  context_name?: string;
 }

 const DATA_CACHE: {
--- a/src/data/media-player.ts
+++ b/src/data/media-player.ts
@@ -1,5 +1,4 @@
-import type { HassEntity } from "home-assistant-js-websocket";
-import type { HomeAssistant } from "../types";
+import { HassEntity } from "home-assistant-js-websocket";

 export const SUPPORT_PAUSE = 1;
 export const SUPPORT_SEEK = 2;
@@ -15,49 +14,13 @@ export const SUPPORT_SELECT_SOURCE = 2048;
 export const SUPPORT_STOP = 4096;
 export const SUPPORTS_PLAY = 16384;
 export const SUPPORT_SELECT_SOUND_MODE = 65536;
-export const SUPPORT_BROWSE_MEDIA = 131072;
 export const CONTRAST_RATIO = 4.5;

-export type MediaPlayerBrowseAction = "pick" | "play";
-
-export interface MediaPickedEvent {
-  media_content_id: string;
-  media_content_type: string;
-}
-
 export interface MediaPlayerThumbnail {
  content_type: string;
  content: string;
 }

-export interface ControlButton {
-  icon: string;
-  action: string;
-}
-
-export interface MediaPlayerItem {
-  title: string;
-  media_content_type: string;
-  media_content_id: string;
-  can_play: boolean;
-  can_expand: boolean;
-  thumbnail?: string;
-  children?: MediaPlayerItem[];
-}
-
-export const browseMediaPlayer = (
-  hass: HomeAssistant,
-  entityId: string,
-  mediaContentId?: string,
-  mediaContentType?: string
-): Promise<MediaPlayerItem> =>
-  hass.callWS<MediaPlayerItem>({
-    type: "media_player/browse_media",
-    entity_id: entityId,
-    media_content_id: mediaContentId,
-    media_content_type: mediaContentType,
-  });
-
 export const getCurrentProgress = (stateObj: HassEntity): number => {
  let progress = stateObj.attributes.media_position;

--- a/src/data/ozw.ts
+++ b/src/data/ozw.ts
@@ -1,181 +0,0 @@
-import { HomeAssistant } from "../types";
-import { DeviceRegistryEntry } from "./device_registry";
-
-export interface OZWNodeIdentifiers {
-  ozw_instance: number;
-  node_id: number;
-}
-
-export interface OZWDevice {
-  node_id: number;
-  node_query_stage: string;
-  is_awake: boolean;
-  is_failed: boolean;
-  is_zwave_plus: boolean;
-  ozw_instance: number;
-  event: string;
-}
-
-export interface OZWDeviceMetaDataResponse {
-  node_id: number;
-  ozw_instance: number;
-  metadata: OZWDeviceMetaData;
-}
-
-export interface OZWDeviceMetaData {
-  OZWInfoURL: string;
-  ZWAProductURL: string;
-  ProductPic: string;
-  Description: string;
-  ProductManualURL: string;
-  ProductPageURL: string;
-  InclusionHelp: string;
-  ExclusionHelp: string;
-  ResetHelp: string;
-  WakeupHelp: string;
-  ProductSupportURL: string;
-  Frequency: string;
-  Name: string;
-  ProductPicBase64: string;
-}
-
-export interface OZWInstance {
-  ozw_instance: number;
-  OZWDaemon_Version: string;
-  OpenZWave_Version: string;
-  QTOpenZWave_Version: string;
-  Status: string;
-  getControllerPath: string;
-  homeID: string;
-}
-
-export interface OZWNetworkStatistics {
-  ozw_instance: number;
-  node_count: number;
-  readCnt: number;
-  writeCnt: number;
-  ACKCnt: number;
-  CANCnt: number;
-  NAKCnt: number;
-  dropped: number;
-  retries: number;
-}
-
-export const nodeQueryStages = [
-  "ProtocolInfo",
-  "Probe",
-  "WakeUp",
-  "ManufacturerSpecific1",
-  "NodeInfo",
-  "NodePlusInfo",
-  "ManufacturerSpecific2",
-  "Versions",
-  "Instances",
-  "Static",
-  "CacheLoad",
-  "Associations",
-  "Neighbors",
-  "Session",
-  "Dynamic",
-  "Configuration",
-  "Complete",
-];
-
-export const networkOnlineStatuses = [
-  "driverAllNodesQueried",
-  "driverAllNodesQueriedSomeDead",
-  "driverAwakeNodesQueried",
-];
-export const networkStartingStatuses = [
-  "starting",
-  "started",
-  "Ready",
-  "driverReady",
-];
-export const networkOfflineStatuses = [
-  "Offline",
-  "stopped",
-  "driverFailed",
-  "driverReset",
-  "driverRemoved",
-  "driverAllNodesOnFire",
-];
-
-export const getIdentifiersFromDevice = function (
-  device: DeviceRegistryEntry
-): OZWNodeIdentifiers | undefined {
-  if (!device) {
-    return undefined;
-  }
-
-  const ozwIdentifier = device.identifiers.find(
-    (identifier) => identifier[0] === "ozw"
-  );
-  if (!ozwIdentifier) {
-    return undefined;
-  }
-
-  const identifiers = ozwIdentifier[1].split(".");
-  return {
-    node_id: parseInt(identifiers[1]),
-    ozw_instance: parseInt(identifiers[0]),
-  };
-};
-
-export const fetchOZWInstances = (
-  hass: HomeAssistant
-): Promise<OZWInstance[]> =>
-  hass.callWS({
-    type: "ozw/get_instances",
-  });
-
-export const fetchOZWNetworkStatus = (
-  hass: HomeAssistant,
-  ozw_instance: number
-): Promise<OZWInstance> =>
-  hass.callWS({
-    type: "ozw/network_status",
-    ozw_instance: ozw_instance,
-  });
-
-export const fetchOZWNetworkStatistics = (
-  hass: HomeAssistant,
-  ozw_instance: number
-): Promise<OZWNetworkStatistics> =>
-  hass.callWS({
-    type: "ozw/network_statistics",
-    ozw_instance: ozw_instance,
-  });
-
-export const fetchOZWNodeStatus = (
-  hass: HomeAssistant,
-  ozw_instance: number,
-  node_id: number
-): Promise<OZWDevice> =>
-  hass.callWS({
-    type: "ozw/node_status",
-    ozw_instance: ozw_instance,
-    node_id: node_id,
-  });
-
-export const fetchOZWNodeMetadata = (
-  hass: HomeAssistant,
-  ozw_instance: number,
-  node_id: number
-): Promise<OZWDeviceMetaDataResponse> =>
-  hass.callWS({
-    type: "ozw/node_metadata",
-    ozw_instance: ozw_instance,
-    node_id: node_id,
-  });
-
-export const refreshNodeInfo = (
-  hass: HomeAssistant,
-  ozw_instance: number,
-  node_id: number
-): Promise<OZWDevice> =>
-  hass.callWS({
-    type: "ozw/refresh_node_info",
-    ozw_instance: ozw_instance,
-    node_id: node_id,
-  });
--- a/src/data/panel.ts
+++ b/src/data/panel.ts
@@ -17,9 +17,7 @@ export const setDefaultPanel = (
 };

 export const getDefaultPanel = (hass: HomeAssistant): PanelInfo =>
-  hass.panels[hass.defaultPanel]
-    ? hass.panels[hass.defaultPanel]
-    : hass.panels[DEFAULT_PANEL];
+  hass.panels[hass.defaultPanel];

 export const getPanelTitle = (hass: HomeAssistant): string | undefined => {
  if (!hass.panels) {
--- a/src/data/person.ts
+++ b/src/data/person.ts
@@ -5,14 +5,12 @@ export interface Person {
  name: string;
  user_id?: string;
  device_trackers?: string[];
-  picture?: string;
 }

 export interface PersonMutableParams {
  name: string;
  user_id: string | null;
  device_trackers: string[];
-  picture: string | null;
 }

 export const fetchPersons = (hass: HomeAssistant) =>
--- a/src/data/script.ts
+++ b/src/data/script.ts
@@ -58,31 +58,6 @@ export interface WaitAction {
  timeout?: number;
 }

-export interface RepeatAction {
-  repeat: CountRepeat | WhileRepeat | UntilRepeat;
-}
-
-interface BaseRepeat {
-  sequence: Action[];
-}
-
-export interface CountRepeat extends BaseRepeat {
-  count: number;
-}
-
-export interface WhileRepeat extends BaseRepeat {
-  while: Condition[];
-}
-
-export interface UntilRepeat extends BaseRepeat {
-  until: Condition[];
-}
-
-export interface ChooseAction {
-  choose: [{ conditions: Condition[]; sequence: Action[] }];
-  default?: Action[];
-}
-
 export type Action =
  | EventAction
  | DeviceAction
@@ -90,9 +65,7 @@ export type Action =
  | Condition
  | DelayAction
  | SceneAction
-  | WaitAction
-  | RepeatAction
-  | ChooseAction;
+  | WaitAction;

 export const triggerScript = (
  hass: HomeAssistant,
--- a/src/data/tag.ts
+++ b/src/data/tag.ts
@@ -1,57 +0,0 @@
-import { HomeAssistant } from "../types";
-import { HassEventBase } from "home-assistant-js-websocket";
-
-export const EVENT_TAG_SCANNED = "tag_scanned";
-
-export interface TagScannedEvent extends HassEventBase {
-  event_type: "tag_scanned";
-  data: {
-    tag_id: string;
-    device_id?: string;
-  };
-}
-
-export interface Tag {
-  id: string;
-  name?: string;
-  description?: string;
-  last_scanned?: string;
-}
-
-export interface UpdateTagParams {
-  name?: Tag["name"];
-  description?: Tag["description"];
-}
-
-export const fetchTags = async (hass: HomeAssistant) =>
-  hass.callWS<Tag[]>({
-    type: "tag/list",
-  });
-
-export const createTag = async (
-  hass: HomeAssistant,
-  params: UpdateTagParams,
-  tagId?: string
-) =>
-  hass.callWS<Tag>({
-    type: "tag/create",
-    tag_id: tagId,
-    ...params,
-  });
-
-export const updateTag = async (
-  hass: HomeAssistant,
-  tagId: string,
-  params: UpdateTagParams
-) =>
-  hass.callWS<Tag>({
-    ...params,
-    type: "tag/update",
-    tag_id: tagId,
-  });
-
-export const deleteTag = async (hass: HomeAssistant, tagId: string) =>
-  hass.callWS<void>({
-    type: "tag/delete",
-    tag_id: tagId,
-  });
--- a/src/data/weather.ts
+++ b/src/data/weather.ts
@@ -2,7 +2,6 @@ import { SVGTemplateResult, svg, html, TemplateResult, css } from "lit-element";
 import { styleMap } from "lit-html/directives/style-map";

 import type { HomeAssistant, WeatherEntity } from "../types";
-import { roundWithOneDecimal } from "../util/calculate";

 export const weatherSVGs = new Set<string>([
  "clear-night",
@@ -136,7 +135,7 @@ export const getSecondaryWeatherAttribute = (
  return `
    ${hass!.localize(
      `ui.card.weather.attributes.${attribute}`
-    )} ${roundWithOneDecimal(value)} ${getWeatherUnit(hass!, attribute)}
+    )} ${value} ${getWeatherUnit(hass!, attribute)}
  `;
 };

--- a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
+++ b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
@@ -165,6 +165,7 @@ class DialogConfigEntrySystemOptions extends LitElement {
      haStyleDialog,
      css`
        ha-paper-dialog {
+          min-width: 400px;
          max-width: 500px;
        }
        .init-spinner {
--- a/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts
+++ b/src/dialogs/image-cropper-dialog/image-cropper-dialog.ts
@@ -1,136 +0,0 @@
-import "@material/mwc-button/mwc-button";
-import Cropper from "cropperjs";
-// @ts-ignore
-import cropperCss from "cropperjs/dist/cropper.css";
-import {
-  css,
-  CSSResult,
-  customElement,
-  html,
-  internalProperty,
-  LitElement,
-  property,
-  PropertyValues,
-  query,
-  TemplateResult,
-  unsafeCSS,
-} from "lit-element";
-import "../../components/ha-dialog";
-import { haStyleDialog } from "../../resources/styles";
-import type { HomeAssistant } from "../../types";
-import { HaImageCropperDialogParams } from "./show-image-cropper-dialog";
-import { classMap } from "lit-html/directives/class-map";
-
-@customElement("image-cropper-dialog")
-export class HaImagecropperDialog extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @internalProperty() private _params?: HaImageCropperDialogParams;
-
-  @internalProperty() private _open = false;
-
-  @query("img") private _image!: HTMLImageElement;
-
-  private _cropper?: Cropper;
-
-  public showDialog(params: HaImageCropperDialogParams): void {
-    this._params = params;
-    this._open = true;
-  }
-
-  public closeDialog() {
-    this._open = false;
-    this._params = undefined;
-    this._cropper?.destroy();
-  }
-
-  protected updated(changedProperties: PropertyValues) {
-    if (!changedProperties.has("_params") || !this._params) {
-      return;
-    }
-    if (!this._cropper) {
-      this._image.src = URL.createObjectURL(this._params.file);
-      this._cropper = new Cropper(this._image, {
-        aspectRatio: this._params.options.aspectRatio,
-        viewMode: 1,
-        dragMode: "move",
-        minCropBoxWidth: 50,
-        ready: () => {
-          URL.revokeObjectURL(this._image!.src);
-        },
-      });
-    } else {
-      this._cropper.replace(URL.createObjectURL(this._params.file));
-    }
-  }
-
-  protected render(): TemplateResult {
-    return html`<ha-dialog
-      @closed=${this.closeDialog}
-      scrimClickAction
-      escapeKeyAction
-      .open=${this._open}
-    >
-      <div
-        class="container ${classMap({
-          round: Boolean(this._params?.options.round),
-        })}"
-      >
-        <img />
-      </div>
-      <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
-        ${this.hass.localize("ui.common.cancel")}
-      </mwc-button>
-      <mwc-button slot="primaryAction" @click=${this._cropImage}>
-        ${this.hass.localize("ui.dialogs.image_cropper.crop")}
-      </mwc-button>
-    </ha-dialog>`;
-  }
-
-  private _cropImage() {
-    this._cropper!.getCroppedCanvas().toBlob(
-      (blob) => {
-        if (!blob) {
-          return;
-        }
-        const file = new File([blob], this._params!.file.name, {
-          type: this._params!.options.type || this._params!.file.type,
-        });
-        this._params!.croppedCallback(file);
-        this.closeDialog();
-      },
-      this._params!.options.type || this._params!.file.type,
-      this._params!.options.quality
-    );
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      haStyleDialog,
-      css`
-        ${unsafeCSS(cropperCss)}
-        .container {
-          max-width: 640px;
-        }
-        img {
-          max-width: 100%;
-        }
-        .container.round .cropper-view-box,
-        .container.round .cropper-face {
-          border-radius: 50%;
-        }
-        .cropper-line,
-        .cropper-point,
-        .cropper-point.point-se::before {
-          background-color: var(--primary-color);
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "image-cropper-dialog": HaImagecropperDialog;
-  }
-}
--- a/src/dialogs/image-cropper-dialog/show-image-cropper-dialog.ts
+++ b/src/dialogs/image-cropper-dialog/show-image-cropper-dialog.ts
@@ -1,30 +0,0 @@
-import { fireEvent } from "../../common/dom/fire_event";
-
-export interface CropOptions {
-  round: boolean;
-  type?: "image/jpeg" | "image/png";
-  quality?: number;
-  aspectRatio: number;
-}
-
-export interface HaImageCropperDialogParams {
-  file: File;
-  options: CropOptions;
-  croppedCallback: (file: File) => void;
-}
-
-const loadImageCropperDialog = () =>
-  import(
-    /* webpackChunkName: "image-cropper-dialog" */ "./image-cropper-dialog"
-  );
-
-export const showImageCropperDialog = (
-  element: HTMLElement,
-  dialogParams: HaImageCropperDialogParams
-): void => {
-  fireEvent(element, "show-dialog", {
-    dialogTag: "image-cropper-dialog",
-    dialogImport: loadImageCropperDialog,
-    dialogParams,
-  });
-};
--- a/src/dialogs/more-info/controls/more-info-configurator.js
+++ b/src/dialogs/more-info/controls/more-info-configurator.js
@@ -123,12 +123,12 @@ class MoreInfoConfigurator extends PolymerElement {
  }

  fieldChanged(ev) {
-    const el = ev.target;
+    var el = ev.target;
    this.fieldInput[el.name] = el.value;
  }

  submitClicked() {
-    const data = {
+    var data = {
      configure_id: this.stateObj.attributes.configure_id,
      fields: this.fieldInput,
    };
--- a/src/dialogs/more-info/controls/more-info-cover.js
+++ b/src/dialogs/more-info/controls/more-info-cover.js
@@ -97,7 +97,7 @@ class MoreInfoCover extends LocalizeMixin(PolymerElement) {
  }

  computeClassNames(stateObj) {
-    const classes = [
+    var classes = [
      attributeClassNames(stateObj, [
        "current_position",
        "current_tilt_position",
--- a/src/dialogs/more-info/controls/more-info-fan.js
+++ b/src/dialogs/more-info/controls/more-info-fan.js
@@ -140,8 +140,8 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
  }

  speedChanged(ev) {
-    const oldVal = this.stateObj.attributes.speed;
-    const newVal = ev.detail.value;
+    var oldVal = this.stateObj.attributes.speed;
+    var newVal = ev.detail.value;

    if (!newVal || oldVal === newVal) return;

@@ -152,8 +152,8 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
  }

  oscillationToggleChanged(ev) {
-    const oldVal = this.stateObj.attributes.oscillating;
-    const newVal = ev.target.checked;
+    var oldVal = this.stateObj.attributes.oscillating;
+    var newVal = ev.target.checked;

    if (oldVal === newVal) return;

--- a/src/dialogs/more-info/controls/more-info-group.js
+++ b/src/dialogs/more-info/controls/more-info-group.js
@@ -53,11 +53,11 @@ class MoreInfoGroup extends PolymerElement {
  }

  computeStates(stateObj, hass) {
-    const states = [];
-    const entIds = stateObj.attributes.entity_id || [];
+    var states = [];
+    var entIds = stateObj.attributes.entity_id || [];

-    for (let i = 0; i < entIds.length; i++) {
-      const state = hass.states[entIds[i]];
+    for (var i = 0; i < entIds.length; i++) {
+      var state = hass.states[entIds[i]];

      if (state) {
        states.push(state);
--- a/Show More
+++ b/Show More