Add app alias

2025-10-19 16:49:43 +00:00 · 2020-06-21 12:37:12 -07:00
108 changed files with 356 additions and 1489 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -66,11 +66,7 @@
    "import/prefer-default-export": 0,
    "import/no-unresolved": 0,
    "import/no-cycle": 0,
-    "import/extensions": [
+    "import/extensions": 0,
      2,
      "ignorePackages",
      { "ts": "never", "js": "never" }
    ],
    "no-restricted-syntax": ["error", "LabeledStatement", "WithStatement"],
    "object-curly-newline": 0,
    "default-case": 0,
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -34,8 +34,10 @@ jobs:
        run: yarn install
        env:
          CI: true
-      - name: Build resources
+      - name: Build icons
-        run: ./node_modules/.bin/gulp gen-icons-json build-translations gather-gallery-demos
+        run: ./node_modules/.bin/gulp gen-icons-json
      - name: Build translations
        run: ./node_modules/.bin/gulp build-translations
      - name: Run eslint
        run: ./node_modules/.bin/eslint '{**/src,src}/**/*.{js,ts,html}' --ignore-path .gitignore
      - name: Run tsc
--- a/build-scripts/bundle.js
+++ b/build-scripts/bundle.js
@@ -57,7 +57,7 @@ module.exports.babelOptions = ({ latestBuild }) => ({
  ].filter(Boolean),
  plugins: [
    // Part of ES2018. Converts {...a, b: 2} to Object.assign({}, a, {b: 2})
-    !latestBuild && [
+    [
      "@babel/plugin-proposal-object-rest-spread",
      { loose: true, useBuiltIns: true },
    ],
@@ -73,7 +73,7 @@ module.exports.babelOptions = ({ latestBuild }) => ({
      require("@babel/plugin-proposal-class-properties").default,
      { loose: true },
    ],
-  ].filter(Boolean),
+  ],
 });
 // Are already ES5, cause warnings when babelified.
--- a/build-scripts/gulp/gallery.js
+++ b/build-scripts/gulp/gallery.js
@@ -1,10 +1,7 @@
 // Run demo develop mode
 const gulp = require("gulp");
 const fs = require("fs");
 const path = require("path");
 const env = require("../env");
 const paths = require("../paths");
 require("./clean.js");
 require("./translations.js");
@@ -15,31 +12,6 @@ require("./service-worker.js");
 require("./entry-html.js");
 require("./rollup.js");
 gulp.task("gather-gallery-demos", async function gatherDemos() {
  const files = await fs.promises.readdir(
    path.resolve(paths.gallery_dir, "src/demos")
  );
  let content = "export const DEMOS = {\n";
  for (const file of files) {
    const demoId = path.basename(file, ".ts");
    const demoPath = "../src/demos/" + demoId;
    content += `  "${demoId}": () => import("${demoPath}"),\n`;
  }
  content += "};";
  const galleryBuild = path.resolve(paths.gallery_dir, "build");
  fs.mkdirSync(galleryBuild, { recursive: true });
  fs.writeFileSync(
    path.resolve(galleryBuild, "import-demos.ts"),
    content,
    "utf-8"
  );
 });
 gulp.task(
  "develop-gallery",
  gulp.series(
@@ -48,11 +20,7 @@ gulp.task(
    },
    "clean-gallery",
    "translations-enable-merge-backend",
-    gulp.parallel(
+    gulp.parallel("gen-icons-json", "build-translations"),
      "gen-icons-json",
      "build-translations",
      "gather-gallery-demos"
    ),
    "copy-static-gallery",
    "gen-index-gallery-dev",
    env.useRollup() ? "rollup-dev-server-gallery" : "webpack-dev-server-gallery"
@@ -67,11 +35,7 @@ gulp.task(
    },
    "clean-gallery",
    "translations-enable-merge-backend",
-    gulp.parallel(
+    gulp.parallel("gen-icons-json", "build-translations"),
      "gen-icons-json",
      "build-translations",
      "gather-gallery-demos"
    ),
    "copy-static-gallery",
    env.useRollup() ? "rollup-prod-gallery" : "webpack-prod-gallery",
    "gen-index-gallery-prod"
--- a/cast/src/html/launcher-faq.html.template
+++ b/cast/src/html/launcher-faq.html.template
@@ -37,21 +37,23 @@
  <body>
    <%= renderTemplate('_js_base') %>
-    <script>
+    <script type="module" crossorigin="use-credentials">
-      import("<%= latestLauncherJS %>");
+      import "<%= latestLauncherJS %>";
      window.latestJS = true;
    </script>
-    <script>
+    <script nomodule>
-      if (!window.latestJS) {
+      (function() {
-        <% if (useRollup) { %>
+        // // Safari 10.1 supports type=module but ignores nomodule, so we add this check.
-          _ls("/static/js/s.min.js").onload = function() {
+        if (!isS101) {
-            System.import("<%= es5LauncherJS %>");
+          <% if (useRollup) { %>
-          };
+            _ls("/static/js/s.min.js").onload = function() {
-        <% } else { %>
+              System.import("<%= es5LauncherJS %>");
-          _ls("<%= es5LauncherJS %>");
+            };
-        <% } %>
+          <% } else { %>
-      }
+            _ls("<%= es5LauncherJS %>");
          <% } %>
        }
      })();
    </script>
    <hc-layout subtitle="FAQ">
@@ -251,7 +253,7 @@ http:
    <script>
      var _gaq = [["_setAccount", "UA-57927901-9"], ["_trackPageview"]];
-      (function (d, t) {
+      (function(d, t) {
        var g = d.createElement(t),
          s = d.getElementsByTagName(t)[0];
        g.src =
--- a/cast/src/html/launcher.html.template
+++ b/cast/src/html/launcher.html.template
@@ -28,21 +28,23 @@
    <hc-connect></hc-connect>
-    <script>
+    <script type="module" crossorigin="use-credentials">
-      import("<%= latestLauncherJS %>");
+      import "<%= latestLauncherJS %>";
      window.latestJS = true;
    </script>
-    <script>
+    <script nomodule>
-      if (!window.latestJS) {
+      (function() {
-        <% if (useRollup) { %>
+        // // Safari 10.1 supports type=module but ignores nomodule, so we add this check.
-          _ls("/static/js/s.min.js").onload = function() {
+        if (!isS101) {
-            System.import("<%= es5LauncherJS %>");
+          <% if (useRollup) { %>
-          };
+            _ls("/static/js/s.min.js").onload = function() {
-        <% } else { %>
+              System.import("<%= es5LauncherJS %>");
-          _ls("<%= es5LauncherJS %>");
+            };
-        <% } %>
+          <% } else { %>
-      }
+            _ls("<%= es5LauncherJS %>");
          <% } %>
        }
      })();
    </script>
    <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
--- a/cast/src/launcher/entrypoint.ts
+++ b/cast/src/launcher/entrypoint.ts
@@ -1,3 +1,3 @@
-import "../../../src/resources/ha-style";
+import "~app/resources/ha-style";
-import "../../../src/resources/roboto";
+import "~app/resources/roboto";
 import "./layout/hc-connect";
--- a/cast/src/receiver/entrypoint.ts
+++ b/cast/src/receiver/entrypoint.ts
@@ -1,7 +1,7 @@
 /* eslint-disable no-undef */
-import { CAST_NS } from "../../../src/cast/const";
+import { CAST_NS } from "~app/cast/const";
-import { HassMessage } from "../../../src/cast/receiver_messages";
+import { HassMessage } from "~app/cast/receiver_messages";
-import "../../../src/resources/custom-card-support";
+import "~app/resources/custom-card-support";
 import { castContext } from "./cast_context";
 import { HcMain } from "./layout/hc-main";
 import { ReceivedMessage } from "./types";
--- a/demo/src/custom-cards/ha-demo-card.ts
+++ b/demo/src/custom-cards/ha-demo-card.ts
@@ -1,4 +1,5 @@
 import "@material/mwc-button";
 import "@polymer/paper-spinner/paper-spinner-lite";
 import {
  css,
  CSSResult,
@@ -9,7 +10,6 @@ import {
 } from "lit-element";
 import { until } from "lit-html/directives/until";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-circular-progress";
 import { LovelaceCardConfig } from "../../../src/data/lovelace";
 import { MockHomeAssistant } from "../../../src/fake_data/provide_hass";
 import { Lovelace, LovelaceCard } from "../../../src/panels/lovelace/types";
@@ -49,7 +49,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
        <div class="picker">
          <div class="label">
            ${this._switching
-              ? html`<ha-circular-progress active></ha-circular-progress>`
+              ? html` <paper-spinner-lite active></paper-spinner-lite> `
              : until(
                  selectedDemoConfig.then(
                    (conf) => html`
--- a/demo/src/html/index.html.template
+++ b/demo/src/html/index.html.template
@@ -86,26 +86,26 @@
    <%= renderTemplate('_js_base') %>
    <%= renderTemplate('_preload_roboto') %>
-    <script>
+    <script type="module" src="<%= latestDemoJS %>"></script>
      import("<%= latestDemoJS %>");
      window.latestJS = true;
    </script>
-    <script>
+    <script nomodule>
-      if (!window.latestJS) {
+      (function() {
-        <% if (useRollup) { %>
+        // // Safari 10.1 supports type=module but ignores nomodule, so we add this check.
-          _ls("/static/js/s.min.js").onload = function() {
+        if (!isS101) {
-            System.import("<%= es5DemoJS %>");
+          <% if (useRollup) { %>
-          };
+            _ls("/static/js/s.min.js").onload = function() {
-        <% } else { %>
+              System.import("<%= es5DemoJS %>");
-          _ls("<%= es5DemoJS %>");
+            };
-        <% } %>
+          <% } else { %>
-      }
+            _ls("<%= es5DemoJS %>");
          <% } %>
        }
      })();
    </script>
    <script>
      var _gaq = [["_setAccount", "UA-57927901-5"], ["_trackPageview"]];
-      (function (d, t) {
+      (function(d, t) {
        var g = d.createElement(t),
          s = d.getElementsByTagName(t)[0];
        g.src =
--- a/gallery/src/components/demo-cards.js
+++ b/gallery/src/components/demo-cards.js
@@ -2,8 +2,8 @@ import "@polymer/app-layout/app-toolbar/app-toolbar";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../../src/components/ha-switch";
+import "~app/components/ha-switch";
-import "../../../src/components/ha-formfield";
+import "~app/components/ha-formfield";
 import "./demo-card";
 class DemoCards extends PolymerElement {
--- a/gallery/src/ha-gallery.js
+++ b/gallery/src/ha-gallery.js
@@ -11,7 +11,9 @@ import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../src/components/ha-card";
 import "../../src/managers/notification-manager";
 import "../../src/styles/polymer-ha-style";
-import { DEMOS } from "../build/import-demos";
+
 // eslint-disable-next-line no-undef
 const DEMOS = require.context("./demos", true, /^(.*\.(ts$))[^.]*$/im);
 const fixPath = (path) => path.substr(2, path.length - 5);
@@ -161,7 +163,7 @@ class HaGallery extends PolymerElement {
      },
      _demos: {
        type: Array,
-        value: Object.keys(DEMOS),
+        value: DEMOS.keys().map(fixPath),
      },
      _lovelaceDemos: {
        type: Array,
@@ -208,7 +210,7 @@ class HaGallery extends PolymerElement {
    while (root.lastChild) root.removeChild(root.lastChild);
    if (demo) {
-      DEMOS[demo]();
+      DEMOS(`./${demo}.ts`);
      const el = document.createElement(demo);
      root.appendChild(el);
    }
--- a/hassio/src/addon-store/hassio-addon-store.ts
+++ b/hassio/src/addon-store/hassio-addon-store.ts
@@ -22,7 +22,7 @@ import "../../../src/layouts/hass-tabs-subpage";
 import "../../../src/layouts/loading-screen";
 import { HomeAssistant, Route } from "../../../src/types";
 import { showRepositoriesDialog } from "../dialogs/repositories/show-dialog-repositories";
-import { supervisorTabs } from "../hassio-tabs";
+import { supervisorTabs } from "../hassio-panel";
 import "./hassio-addon-repository";
 const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
--- a/hassio/src/addon-view/config/hassio-addon-config-tab.ts
+++ b/hassio/src/addon-view/config/hassio-addon-config-tab.ts
@@ -1,3 +1,4 @@
 import "@polymer/paper-spinner/paper-spinner-lite";
 import {
  css,
  CSSResult,
@@ -11,7 +12,6 @@ import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
 import "../../../../src/components/ha-circular-progress";
 import "./hassio-addon-audio";
 import "./hassio-addon-config";
 import "./hassio-addon-network";
@@ -24,7 +24,7 @@ class HassioAddonConfigDashboard extends LitElement {
  protected render(): TemplateResult {
    if (!this.addon) {
-      return html`<ha-circular-progress active></ha-circular-progress>`;
+      return html` <paper-spinner-lite active></paper-spinner-lite> `;
    }
    return html`
      <div class="content">
--- a/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts
+++ b/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts
@@ -1,3 +1,4 @@
 import "@polymer/paper-spinner/paper-spinner-lite";
 import {
  css,
  CSSResult,
@@ -13,7 +14,6 @@ import {
  HassioAddonDetails,
 } from "../../../../src/data/hassio/addon";
 import "../../../../src/layouts/loading-screen";
 import "../../../../src/components/ha-circular-progress";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
@@ -35,7 +35,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
  protected render(): TemplateResult {
    if (!this.addon) {
-      return html`<ha-circular-progress active></ha-circular-progress>`;
+      return html` <paper-spinner-lite active></paper-spinner-lite> `;
    }
    return html`
      <div class="content">
--- a/hassio/src/addon-view/hassio-addon-dashboard.ts
+++ b/hassio/src/addon-view/hassio-addon-dashboard.ts
@@ -4,6 +4,7 @@ import {
  mdiInformationVariant,
  mdiMathLog,
 } from "@mdi/js";
 import "@polymer/paper-spinner/paper-spinner-lite";
 import {
  css,
  CSSResult,
@@ -19,7 +20,6 @@ import {
  HassioAddonDetails,
 } from "../../../src/data/hassio/addon";
 import "../../../src/layouts/hass-tabs-subpage";
 import "../../../src/components/ha-circular-progress";
 import type { PageNavigation } from "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
@@ -56,7 +56,7 @@ class HassioAddonDashboard extends LitElement {
  protected render(): TemplateResult {
    if (!this.addon) {
-      return html`<ha-circular-progress active></ha-circular-progress>`;
+      return html` <paper-spinner-lite active></paper-spinner-lite> `;
    }
    const addonTabs: PageNavigation[] = [
--- a/hassio/src/addon-view/info/hassio-addon-info-tab.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info-tab.ts
@@ -1,3 +1,4 @@
 import "@polymer/paper-spinner/paper-spinner-lite";
 import {
  css,
  CSSResult,
@@ -8,7 +9,6 @@ import {
  TemplateResult,
 } from "lit-element";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import "../../../../src/components/ha-circular-progress";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
@@ -24,7 +24,7 @@ class HassioAddonInfoDashboard extends LitElement {
  protected render(): TemplateResult {
    if (!this.addon) {
-      return html`<ha-circular-progress active></ha-circular-progress>`;
+      return html` <paper-spinner-lite active></paper-spinner-lite> `;
    }
    return html`
--- a/hassio/src/addon-view/log/hassio-addon-log-tab.ts
+++ b/hassio/src/addon-view/log/hassio-addon-log-tab.ts
@@ -1,3 +1,4 @@
 import "@polymer/paper-spinner/paper-spinner-lite";
 import {
  css,
  CSSResult,
@@ -8,7 +9,6 @@ import {
  TemplateResult,
 } from "lit-element";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
 import "../../../../src/components/ha-circular-progress";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
 import { hassioStyle } from "../../resources/hassio-style";
@@ -22,7 +22,7 @@ class HassioAddonLogDashboard extends LitElement {
  protected render(): TemplateResult {
    if (!this.addon) {
-      return html` <ha-circular-progress active></ha-circular-progress> `;
+      return html` <paper-spinner-lite active></paper-spinner-lite> `;
    }
    return html`
      <div class="content">
--- a/hassio/src/dashboard/hassio-dashboard.ts
+++ b/hassio/src/dashboard/hassio-dashboard.ts
@@ -15,7 +15,7 @@ import {
 import "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
-import { supervisorTabs } from "../hassio-tabs";
+import { supervisorTabs } from "../hassio-panel";
 import "./hassio-addons";
 import "./hassio-update";
--- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
+++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
@@ -5,7 +5,7 @@ import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import "../../../../src/components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import {
  css,
  CSSResult,
@@ -108,7 +108,7 @@ class HassioRepositoriesDialog extends LitElement {
            ></paper-input>
            <mwc-button @click=${this._addRepository}>
              ${this._prosessing
-                ? html`<ha-circular-progress active></ha-circular-progress>`
+                ? html`<paper-spinner active></paper-spinner>`
                : "Add"}
            </mwc-button>
          </div>
--- a/hassio/src/entrypoint.ts
+++ b/hassio/src/entrypoint.ts
@@ -1,5 +1,5 @@
-import "../../src/resources/compatibility";
+import "~app/resources/compatibility";
-import "../../src/resources/roboto";
+import "~app/resources/roboto";
 import "./hassio-main";
 const styleEl = document.createElement("style");
--- a/hassio/src/hassio-panel.ts
+++ b/hassio/src/hassio-panel.ts
@@ -1,3 +1,4 @@
 import { mdiBackupRestore, mdiCogs, mdiStore, mdiViewDashboard } from "@mdi/js";
 import {
  customElement,
  html,
@@ -11,9 +12,33 @@ import {
  HassioSupervisorInfo,
  HassioInfo,
 } from "../../src/data/hassio/supervisor";
 import type { PageNavigation } from "../../src/layouts/hass-tabs-subpage";
 import { HomeAssistant, Route } from "../../src/types";
 import "./hassio-panel-router";
 export const supervisorTabs: PageNavigation[] = [
  {
    name: "Dashboard",
    path: `/hassio/dashboard`,
    iconPath: mdiViewDashboard,
  },
  {
    name: "Add-on store",
    path: `/hassio/store`,
    iconPath: mdiStore,
  },
  {
    name: "Snapshots",
    path: `/hassio/snapshots`,
    iconPath: mdiBackupRestore,
  },
  {
    name: "System",
    path: `/hassio/system`,
    iconPath: mdiCogs,
  },
 ];
@customElement("hassio-panel")
 class HassioPanel extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
--- a/hassio/src/hassio-tabs.ts
+++ b/hassio/src/hassio-tabs.ts
@@ -1,25 +0,0 @@
 import { mdiBackupRestore, mdiCogs, mdiStore, mdiViewDashboard } from "@mdi/js";
 import type { PageNavigation } from "../../src/layouts/hass-tabs-subpage";
 export const supervisorTabs: PageNavigation[] = [
  {
    name: "Dashboard",
    path: `/hassio/dashboard`,
    iconPath: mdiViewDashboard,
  },
  {
    name: "Add-on store",
    path: `/hassio/store`,
    iconPath: mdiStore,
  },
  {
    name: "Snapshots",
    path: `/hassio/snapshots`,
    iconPath: mdiBackupRestore,
  },
  {
    name: "System",
    path: `/hassio/system`,
    iconPath: mdiCogs,
  },
 ];
--- a/hassio/src/snapshots/hassio-snapshots.ts
+++ b/hassio/src/snapshots/hassio-snapshots.ts
@@ -37,7 +37,7 @@ import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
 import "../components/hassio-card-content";
 import { showHassioSnapshotDialog } from "../dialogs/snapshot/show-dialog-hassio-snapshot";
-import { supervisorTabs } from "../hassio-tabs";
+import { supervisorTabs } from "../hassio-panel";
 import { hassioStyle } from "../resources/hassio-style";
 interface CheckboxItem {
--- a/hassio/src/system/hassio-system.ts
+++ b/hassio/src/system/hassio-system.ts
@@ -18,7 +18,7 @@ import {
 import "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
-import { supervisorTabs } from "../hassio-tabs";
+import { supervisorTabs } from "../hassio-panel";
 import { hassioStyle } from "../resources/hassio-style";
 import "./hassio-host-info";
 import "./hassio-supervisor-info";
--- a/package.json
+++ b/package.json
@@ -22,11 +22,11 @@
  "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
  "license": "Apache-2.0",
  "dependencies": {
    "~app": "file:./src",
    "@formatjs/intl-pluralrules": "^1.5.8",
    "@fullcalendar/core": "^5.0.0-beta.2",
    "@fullcalendar/daygrid": "^5.0.0-beta.2",
    "@material/chips": "7.0.0-canary.d92d8c93e.0",
    "@material/circular-progress": "7.0.0-canary.d92d8c93e.0",
    "@material/mwc-button": "^0.15.0",
    "@material/mwc-checkbox": "^0.15.0",
    "@material/mwc-dialog": "^0.15.0",
@@ -48,6 +48,7 @@
    "@polymer/iron-image": "^3.0.1",
    "@polymer/iron-input": "^3.0.1",
    "@polymer/iron-label": "^3.0.1",
    "@polymer/iron-media-query": "^3.0.1",
    "@polymer/iron-overlay-behavior": "^3.0.2",
    "@polymer/iron-resizable-behavior": "^3.0.1",
    "@polymer/paper-card": "^3.0.1",
@@ -65,6 +66,7 @@
    "@polymer/paper-radio-group": "^3.0.1",
    "@polymer/paper-ripple": "^3.0.1",
    "@polymer/paper-slider": "^3.0.1",
    "@polymer/paper-spinner": "^3.0.2",
    "@polymer/paper-styles": "^3.0.1",
    "@polymer/paper-tabs": "^3.0.1",
    "@polymer/paper-toast": "^3.0.1",
--- a/setup.py
+++ b/setup.py
@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 setup(
    name="home-assistant-frontend",
-    version="20200623.1",
+    version="20200620.0",
    description="The Home Assistant frontend",
    url="https://github.com/home-assistant/home-assistant-polymer",
    author="The Home Assistant Authors",
--- a/src/common/const.ts
+++ b/src/common/const.ts
@@ -37,7 +37,6 @@ export const DOMAINS_WITH_MORE_INFO = [
  "fan",
  "group",
  "history_graph",
  "humidifier",
  "input_datetime",
  "light",
  "lock",
@@ -80,7 +79,6 @@ export const DOMAINS_TOGGLE = new Set([
  "switch",
  "group",
  "automation",
  "humidifier",
 ]);
 /** Temperature units. */
--- a/src/common/entity/compute_state_display.ts
+++ b/src/common/entity/compute_state_display.ts
@@ -55,12 +55,6 @@ export const computeStateDisplay = (
    return formatDateTime(date, language);
  }
  if (domain === "humidifier") {
    if (stateObj.state === "on" && stateObj.attributes.humidity) {
      return `${stateObj.attributes.humidity}%`;
    }
  }
  return (
    // Return device class translation
    (stateObj.attributes.device_class &&
--- a/src/common/entity/domain_icon.ts
+++ b/src/common/entity/domain_icon.ts
@@ -22,7 +22,6 @@ const fixedIcons = {
  history_graph: "hass:chart-line",
  homeassistant: "hass:home-assistant",
  homekit: "hass:home-automation",
  humidifier: "hass:air-humidifier",
  image_processing: "hass:image-filter-frames",
  input_boolean: "hass:toggle-switch-outline",
  input_datetime: "hass:calendar-clock",
--- a/src/common/style/icon_color_css.ts
+++ b/src/common/style/icon_color_css.ts
@@ -8,7 +8,6 @@ export const iconColorCSS = css`
  ha-icon[data-domain="camera"][data-state="streaming"],
  ha-icon[data-domain="cover"][data-state="open"],
  ha-icon[data-domain="fan"][data-state="on"],
  ha-icon[data-domain="humidifier"][data-state="on"],
  ha-icon[data-domain="light"][data-state="on"],
  ha-icon[data-domain="input_boolean"][data-state="on"],
  ha-icon[data-domain="lock"][data-state="unlocked"],
--- a/src/components/buttons/ha-progress-button.js
+++ b/src/components/buttons/ha-progress-button.js
@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import "../ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -51,9 +51,7 @@ class HaProgressButton extends PolymerElement {
          <slot></slot>
        </mwc-button>
        <template is="dom-if" if="[[progress]]">
-          <div class="progress">
+          <div class="progress"><paper-spinner active=""></paper-spinner></div>
            <ha-circular-progress active size="small"></ha-circular-progress>
          </div>
        </template>
      </div>
    `;
--- a/src/components/entity/ha-entity-toggle.ts
+++ b/src/components/entity/ha-entity-toggle.ts
@@ -22,7 +22,7 @@ const isOn = (stateObj?: HassEntity) =>
  !STATES_OFF.includes(stateObj.state) &&
  !UNAVAILABLE_STATES.includes(stateObj.state);
-export class HaEntityToggle extends LitElement {
+class HaEntityToggle extends LitElement {
  // hass is not a property so that we only re-render on stateObj changes
  public hass?: HomeAssistant;
--- a/src/components/ha-circular-progress.ts
+++ b/src/components/ha-circular-progress.ts
@@ -1,93 +0,0 @@
 import {
  LitElement,
  TemplateResult,
  property,
  svg,
  html,
  customElement,
  unsafeCSS,
  SVGTemplateResult,
  css,
 } from "lit-element";
 // @ts-ignore
 import progressStyles from "@material/circular-progress/dist/mdc.circular-progress.min.css";
 import { classMap } from "lit-html/directives/class-map";
@customElement("ha-circular-progress")
 export class HaCircularProgress extends LitElement {
  @property({ type: Boolean })
  public active = false;
  @property()
  public alt = "Loading";
  @property()
  public size: "small" | "medium" | "large" = "medium";
  protected render(): TemplateResult | void {
    let indeterminatePart: SVGTemplateResult;
    if (this.size === "small") {
      indeterminatePart = svg`
        <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="8.75" stroke-dasharray="54.978" stroke-dashoffset="27.489"/>
        </svg>`;
    } else if (this.size === "large") {
      indeterminatePart = svg`
        <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
          <circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549"/>
        </svg>`;
    } else {
      // medium
      indeterminatePart = svg`
        <svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
          <circle cx="16" cy="16" r="12.5" stroke-dasharray="78.54" stroke-dashoffset="39.27"/>
        </svg>`;
    }
    // ignoring prettier as it will introduce unwanted whitespace
    // We have not implemented the determinate support of mdc circular progress.
    // prettier-ignore
    return html`
      <div
        class="mdc-circular-progress ${classMap({
          "mdc-circular-progress--indeterminate": this.active,
          [`mdc-circular-progress--${this.size}`]: true,
        })}"
        role="progressbar"
        aria-label=${this.alt}
        aria-valuemin="0"
        aria-valuemax="1"
      >
        <div class="mdc-circular-progress__indeterminate-container">
          <div class="mdc-circular-progress__spinner-layer">
            <div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
              ${indeterminatePart}
            </div><div class="mdc-circular-progress__gap-patch">
              ${indeterminatePart}
            </div><div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
              ${indeterminatePart}
            </div>
          </div>
        </div>
      </div>
    `;
  }
  static get styles() {
    return [
      unsafeCSS(progressStyles),
      css`
        :host {
          text-align: initial;
        }
      `,
    ];
  }
 }
 declare global {
  interface HTMLElementTagNameMap {
    "ha-circular-progress": HaCircularProgress;
  }
 }
--- a/src/components/ha-demo-badge.js
+++ b/src/components/ha-demo-badge.js
@@ -0,0 +1,24 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "./ha-label-badge";
 class HaDemoBadge extends PolymerElement {
  static get template() {
    return html`
      <style>
        :host {
          --ha-label-badge-color: #dac90d;
        }
      </style>
      <ha-label-badge
        icon="hass:emoticon"
        label="Demo"
        description=""
      ></ha-label-badge>
    `;
  }
 }
 customElements.define("ha-demo-badge", HaDemoBadge);
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -6,6 +6,7 @@ import {
  mdiMenu,
  mdiViewDashboard,
 } from "@mdi/js";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/paper-item/paper-icon-item";
 import type { PaperIconItemElement } from "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item";
@@ -15,7 +16,6 @@ import {
  CSSResult,
  eventOptions,
  html,
  customElement,
  LitElement,
  property,
  PropertyValues,
@@ -109,7 +109,9 @@ const computePanels = (hass: HomeAssistant): [PanelInfo[], PanelInfo[]] => {
  return [beforeSpacer, afterSpacer];
 };
-@customElement("ha-sidebar")
+/*
 * @appliesMixin LocalizeMixin
 */
 class HaSidebar extends LitElement {
  @property() public hass!: HomeAssistant;
@@ -747,3 +749,5 @@ declare global {
    "ha-sidebar": HaSidebar;
  }
 }
 customElements.define("ha-sidebar", HaSidebar);
--- a/src/components/state-history-chart-line.js
+++ b/src/components/state-history-chart-line.js
@@ -262,28 +262,6 @@ class StateHistoryChartLine extends LocalizeMixin(PolymerElement) {
            pushData(new Date(state.last_changed), series);
          }
        });
      } else if (domain === "humidifier") {
        addColumn(
          `${this.hass.localize(
            "ui.card.humidifier.target_humidity_entity",
            "name",
            name
          )}`,
          true
        );
        addColumn(
          `${this.hass.localize("ui.card.humidifier.on_entity", "name", name)}`,
          true,
          true
        );
        states.states.forEach((state) => {
          if (!state.attributes) return;
          const target = safeParseFloat(state.attributes.humidity);
          const series = [target];
          series.push(state.state === "on" ? target : null);
          pushData(new Date(state.last_changed), series);
        });
      } else {
        // Only disable interpolation for sensors
        const isStep = domain === "sensor";
--- a/src/components/state-history-charts.js
+++ b/src/components/state-history-charts.js
@@ -1,4 +1,4 @@
-import "./ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
--- a/src/data/history.ts
+++ b/src/data/history.ts
@@ -5,15 +5,13 @@ import { computeStateName } from "../common/entity/compute_state_name";
 import { LocalizeFunc } from "../common/translations/localize";
 import { HomeAssistant } from "../types";
-const DOMAINS_USE_LAST_UPDATED = ["climate", "humidifier", "water_heater"];
+const DOMAINS_USE_LAST_UPDATED = ["climate", "water_heater"];
 const LINE_ATTRIBUTES_TO_KEEP = [
  "temperature",
  "current_temperature",
  "target_temp_low",
  "target_temp_high",
  "hvac_action",
  "humidity",
  "mode",
 ];
 export interface LineChartState {
@@ -226,8 +224,6 @@ export const computeHistory = (
      unit = hass.config.unit_system.temperature;
    } else if (computeStateDomain(stateInfo[0]) === "water_heater") {
      unit = hass.config.unit_system.temperature;
    } else if (computeStateDomain(stateInfo[0]) === "humidifier") {
      unit = "%";
    }
    if (!unit) {
--- a/src/data/humidifier.ts
+++ b/src/data/humidifier.ts
@@ -1,19 +0,0 @@
 import {
  HassEntityAttributeBase,
  HassEntityBase,
 } from "home-assistant-js-websocket";
 export type HumidifierEntity = HassEntityBase & {
  attributes: HassEntityAttributeBase & {
    humidity?: number;
    min_humidity?: number;
    max_humidity?: number;
    mode?: string;
    available_modes?: string[];
  };
 };
 export const HUMIDIFIER_SUPPORT_MODES = 1;
 export const HUMIDIFIER_DEVICE_CLASS_HUMIDIFIER = "humidifier";
 export const HUMIDIFIER_DEVICE_CLASS_DEHUMIDIFIER = "dehumidifier";
--- 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
@@ -10,7 +10,6 @@ import {
  TemplateResult,
 } from "lit-element";
 import "../../components/dialog/ha-paper-dialog";
 import "../../components/ha-circular-progress";
 import "../../components/ha-switch";
 import "../../components/ha-formfield";
 import type { HaSwitch } from "../../components/ha-switch";
@@ -76,7 +75,7 @@ class DialogConfigEntrySystemOptions extends LitElement {
          ${this._loading
            ? html`
                <div class="init-spinner">
-                  <ha-circular-progress active></ha-circular-progress>
+                  <paper-spinner-lite active></paper-spinner-lite>
                </div>
              `
            : html`
--- a/src/dialogs/config-flow/dialog-data-entry-flow.ts
+++ b/src/dialogs/config-flow/dialog-data-entry-flow.ts
@@ -1,7 +1,7 @@
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "../../components/ha-icon-button";
-import "../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import "@polymer/paper-tooltip/paper-tooltip";
 import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
--- a/src/dialogs/config-flow/step-flow-form.ts
+++ b/src/dialogs/config-flow/step-flow-form.ts
@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import "../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
  css,
@@ -76,7 +76,7 @@ class StepFlowForm extends LitElement {
        ${this._loading
          ? html`
              <div class="submit-spinner">
-                <ha-circular-progress active></ha-circular-progress>
+                <paper-spinner active></paper-spinner>
              </div>
            `
          : html`
--- a/src/dialogs/config-flow/step-flow-loading.ts
+++ b/src/dialogs/config-flow/step-flow-loading.ts
@@ -1,3 +1,4 @@
 import "@polymer/paper-spinner/paper-spinner-lite";
 import {
  css,
  CSSResult,
@@ -7,7 +8,6 @@ import {
  property,
  TemplateResult,
 } from "lit-element";
 import "../../components/ha-circular-progress";
@customElement("step-flow-loading")
 class StepFlowLoading extends LitElement {
@@ -17,7 +17,7 @@ class StepFlowLoading extends LitElement {
    return html`
      <div class="init-spinner">
        ${this.label ? html` <div>${this.label}</div> ` : ""}
-        <ha-circular-progress active></ha-circular-progress>
+        <paper-spinner-lite active></paper-spinner-lite>
      </div>
    `;
  }
@@ -28,7 +28,7 @@ class StepFlowLoading extends LitElement {
        padding: 50px 100px;
        text-align: center;
      }
-      ha-circular-progress {
+      paper-spinner-lite {
        margin-top: 16px;
      }
    `;
--- a/src/dialogs/config-flow/step-flow-pick-handler.ts
+++ b/src/dialogs/config-flow/step-flow-pick-handler.ts
@@ -1,5 +1,6 @@
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-spinner/paper-spinner-lite";
 import Fuse from "fuse.js";
 import {
  css,
--- a/src/dialogs/more-info/controls/more-info-configurator.js
+++ b/src/dialogs/more-info/controls/more-info-configurator.js
@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import "@polymer/iron-input/iron-input";
 import "@polymer/paper-input/paper-input";
-import "../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -38,7 +38,7 @@ class MoreInfoConfigurator extends PolymerElement {
          height: 41px;
        }
-        ha-circular-progress {
+        paper-spinner {
          width: 14px;
          height: 14px;
          margin-right: 20px;
@@ -75,11 +75,11 @@ class MoreInfoConfigurator extends PolymerElement {
              disabled="[[isConfiguring]]"
              on-click="submitClicked"
            >
-              <ha-circular-progress
+              <paper-spinner
                active="[[isConfiguring]]"
                hidden="[[!isConfiguring]]"
                alt="Configuring"
-              ></ha-circular-progress>
+              ></paper-spinner>
              [[stateObj.attributes.submit_caption]]
            </mwc-button>
          </p>
--- a/src/dialogs/more-info/controls/more-info-content.ts
+++ b/src/dialogs/more-info/controls/more-info-content.ts
@@ -14,7 +14,6 @@ import "./more-info-default";
 import "./more-info-fan";
 import "./more-info-group";
 import "./more-info-history_graph";
 import "./more-info-humidifier";
 import "./more-info-input_datetime";
 import "./more-info-light";
 import "./more-info-lock";
--- a/src/dialogs/more-info/controls/more-info-humidifier.ts
+++ b/src/dialogs/more-info/controls/more-info-humidifier.ts
@@ -1,218 +0,0 @@
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
 import {
  css,
  CSSResult,
  html,
  LitElement,
  property,
  PropertyValues,
  TemplateResult,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import "../../../components/ha-paper-dropdown-menu";
 import "../../../components/ha-paper-slider";
 import "../../../components/ha-switch";
 import {
  HumidifierEntity,
  HUMIDIFIER_SUPPORT_MODES,
 } from "../../../data/humidifier";
 import { HomeAssistant } from "../../../types";
 class MoreInfoHumidifier extends LitElement {
  @property() public hass!: HomeAssistant;
  @property() public stateObj?: HumidifierEntity;
  private _resizeDebounce?: number;
  protected render(): TemplateResult {
    if (!this.stateObj) {
      return html``;
    }
    const hass = this.hass;
    const stateObj = this.stateObj;
    const supportModes = supportsFeature(stateObj, HUMIDIFIER_SUPPORT_MODES);
    const rtlDirection = computeRTLDirection(hass);
    return html`
      <div
        class=${classMap({
          "has-modes": supportModes,
        })}
      >
        <div class="container-humidity">
          <div>${hass.localize("ui.card.humidifier.humidity")}</div>
          <div class="single-row">
            <div class="target-humidity">
              ${stateObj.attributes.humidity} %
            </div>
            <ha-paper-slider
              class="humidity"
              step="1"
              pin
              ignore-bar-touch
              dir=${rtlDirection}
              .min=${stateObj.attributes.min_humidity}
              .max=${stateObj.attributes.max_humidity}
              .secondaryProgress=${stateObj.attributes.max_humidity}
              .value=${stateObj.attributes.humidity}
              @change=${this._targetHumiditySliderChanged}
            >
            </ha-paper-slider>
          </div>
        </div>
        ${supportModes
          ? html`
              <div class="container-modes">
                <ha-paper-dropdown-menu
                  label-float
                  dynamic-align
                  .label=${hass.localize("ui.card.humidifier.mode")}
                >
                  <paper-listbox
                    slot="dropdown-content"
                    attr-for-selected="item-name"
                    .selected=${stateObj.attributes.mode}
                    @selected-changed=${this._handleModeChanged}
                  >
                    ${stateObj.attributes.available_modes!.map(
                      (mode) => html`
                        <paper-item item-name=${mode}>
                          ${hass.localize(
                            `state_attributes.humidifier.mode.${mode}`
                          ) || mode}
                        </paper-item>
                      `
                    )}
                  </paper-listbox>
                </ha-paper-dropdown-menu>
              </div>
            `
          : ""}
      </div>
    `;
  }
  protected updated(changedProps: PropertyValues) {
    super.updated(changedProps);
    if (!changedProps.has("stateObj") || !this.stateObj) {
      return;
    }
    if (this._resizeDebounce) {
      clearTimeout(this._resizeDebounce);
    }
    this._resizeDebounce = window.setTimeout(() => {
      fireEvent(this, "iron-resize");
      this._resizeDebounce = undefined;
    }, 500);
  }
  private _targetHumiditySliderChanged(ev) {
    const newVal = ev.target.value;
    this._callServiceHelper(
      this.stateObj!.attributes.humidity,
      newVal,
      "set_humidity",
      { humidity: newVal }
    );
  }
  private _handleModeChanged(ev) {
    const newVal = ev.detail.value || null;
    this._callServiceHelper(
      this.stateObj!.attributes.mode,
      newVal,
      "set_mode",
      { mode: newVal }
    );
  }
  private async _callServiceHelper(
    oldVal: unknown,
    newVal: unknown,
    service: string,
    data: {
      entity_id?: string;
      [key: string]: unknown;
    }
  ) {
    if (oldVal === newVal) {
      return;
    }
    data.entity_id = this.stateObj!.entity_id;
    const curState = this.stateObj;
    await this.hass.callService("humidifier", service, data);
    // We reset stateObj to re-sync the inputs with the state. It will be out
    // of sync if our service call did not result in the entity to be turned
    // on. Since the state is not changing, the resync is not called automatic.
    await new Promise((resolve) => setTimeout(resolve, 2000));
    // No need to resync if we received a new state.
    if (this.stateObj !== curState) {
      return;
    }
    this.stateObj = undefined;
    await this.updateComplete;
    // Only restore if not set yet by a state change
    if (this.stateObj === undefined) {
      this.stateObj = curState;
    }
  }
  static get styles(): CSSResult {
    return css`
      :host {
        color: var(--primary-text-color);
      }
      ha-paper-dropdown-menu {
        width: 100%;
      }
      paper-item {
        cursor: pointer;
      }
      ha-paper-slider {
        width: 100%;
      }
      .container-humidity .single-row {
        display: flex;
        height: 50px;
      }
      .target-humidity {
        width: 90px;
        font-size: 200%;
        margin: auto;
        direction: ltr;
      }
      .humidity {
        --paper-slider-active-color: var(--paper-blue-400);
        --paper-slider-secondary-color: var(--paper-blue-400);
      }
      .single-row {
        padding: 8px 0;
      }
    `;
  }
 }
 customElements.define("more-info-humidifier", MoreInfoHumidifier);
--- a/src/html/index.html.template
+++ b/src/html/index.html.template
@@ -52,7 +52,7 @@
    <%= renderTemplate('_js_base') %>
    <%= renderTemplate('_preload_roboto') %>
-    <script crossorigin="use-credentials">
+    <script>
      import("<%= latestCoreJS %>");
      import("<%= latestAppJS %>");
      window.customPanelJS = "<%= latestCustomPanelJS %>";
--- a/src/layouts/ha-init-page.ts
+++ b/src/layouts/ha-init-page.ts
@@ -1,7 +1,7 @@
 import "@material/mwc-button";
 import "@polymer/paper-spinner/paper-spinner-lite";
 import { css, CSSResult, html, LitElement, property } from "lit-element";
 import { removeInitSkeleton } from "../util/init-skeleton";
 import "../components/ha-circular-progress";
 class HaInitPage extends LitElement {
  @property({ type: Boolean }) public error = false;
@@ -28,7 +28,7 @@ class HaInitPage extends LitElement {
                : ""}
            `
          : html`
-              <ha-circular-progress active></ha-circular-progress>
+              <paper-spinner-lite active></paper-spinner-lite>
              <p>Loading data</p>
            `}
      </div>
@@ -52,7 +52,7 @@ class HaInitPage extends LitElement {
        justify-content: center;
        align-items: center;
      }
-      ha-circular-progress {
+      paper-spinner-lite {
        margin-top: 9px;
      }
      a {
--- a/src/layouts/hass-loading-screen.ts
+++ b/src/layouts/hass-loading-screen.ts
@@ -1,4 +1,5 @@
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "@polymer/paper-spinner/paper-spinner-lite";
 import {
  css,
  CSSResultArray,
@@ -8,7 +9,6 @@ import {
  property,
  TemplateResult,
 } from "lit-element";
 import "../components/ha-circular-progress";
 import "../components/ha-menu-button";
 import "../components/ha-icon-button-arrow-prev";
 import { haStyle } from "../resources/styles";
@@ -39,7 +39,7 @@ class HassLoadingScreen extends LitElement {
            `}
      </app-toolbar>
      <div class="content">
-        <ha-circular-progress active></ha-circular-progress>
+        <paper-spinner-lite active></paper-spinner-lite>
      </div>
    `;
  }
--- a/src/layouts/hass-router-page.ts
+++ b/src/layouts/hass-router-page.ts
@@ -147,8 +147,6 @@ export class HassRouterPage extends UpdatingElement {
      ? routeOptions.load()
      : Promise.resolve();
    let showLoadingScreenTimeout: undefined | number;
    // Check when loading the page source failed.
    loadProm.catch((err) => {
      // eslint-disable-next-line
@@ -160,13 +158,7 @@ export class HassRouterPage extends UpdatingElement {
      }
      // Removes either loading screen or the panel
-      if (this.lastChild) {
+      this.removeChild(this.lastChild!);
        this.removeChild(this.lastChild!);
      }
      if (showLoadingScreenTimeout) {
        clearTimeout(showLoadingScreenTimeout);
      }
      // Show error screen
      const errorEl = document.createElement("hass-error-screen");
@@ -185,7 +177,7 @@ export class HassRouterPage extends UpdatingElement {
    // That way we won't have a double fast flash on fast connections.
    let created = false;
-    showLoadingScreenTimeout = window.setTimeout(() => {
+    setTimeout(() => {
      if (created || this._currentPage !== newPage) {
        return;
      }
--- a/src/layouts/home-assistant-main.ts
+++ b/src/layouts/home-assistant-main.ts
@@ -2,20 +2,20 @@ import "@polymer/app-layout/app-drawer-layout/app-drawer-layout";
 import type { AppDrawerLayoutElement } from "@polymer/app-layout/app-drawer-layout/app-drawer-layout";
 import "@polymer/app-layout/app-drawer/app-drawer";
 import type { AppDrawerElement } from "@polymer/app-layout/app-drawer/app-drawer";
 import "@polymer/iron-media-query/iron-media-query";
 import {
  css,
  CSSResult,
  html,
  LitElement,
  property,
  customElement,
  PropertyValues,
  TemplateResult,
 } from "lit-element";
 import { listenMediaQuery } from "../common/dom/media_query";
 import { fireEvent } from "../common/dom/fire_event";
 import { toggleAttribute } from "../common/dom/toggle_attribute";
 import { showNotificationDrawer } from "../dialogs/notifications/show-notification-drawer";
 import type { PolymerChangedEvent } from "../polymer-types";
 import type { HomeAssistant, Route } from "../types";
 import "./partial-panel-resolver";
@@ -29,7 +29,6 @@ declare global {
  }
 }
@customElement("home-assistant-main")
 class HomeAssistantMain extends LitElement {
  @property() public hass!: HomeAssistant;
@@ -50,6 +49,11 @@ class HomeAssistantMain extends LitElement {
      !sidebarNarrow || NON_SWIPABLE_PANELS.indexOf(hass.panelUrl) !== -1;
    return html`
      <iron-media-query
        query="(max-width: 870px)"
        @query-matches-changed=${this._narrowChanged}
      ></iron-media-query>
      <app-drawer-layout
        fullbleed
        .forceNarrow=${sidebarNarrow}
@@ -104,10 +108,6 @@ class HomeAssistantMain extends LitElement {
        narrow: this.narrow!,
      });
    });
    listenMediaQuery("(max-width: 870px)", (matches) => {
      this.narrow = matches;
    });
  }
  protected updated(changedProps: PropertyValues) {
@@ -131,6 +131,10 @@ class HomeAssistantMain extends LitElement {
    }
  }
  private _narrowChanged(ev: PolymerChangedEvent<boolean>) {
    this.narrow = ev.detail.value;
  }
  private get _sidebarNarrow() {
    return this.narrow || this.hass.dockedSidebar === "always_hidden";
  }
@@ -166,8 +170,4 @@ class HomeAssistantMain extends LitElement {
  }
 }
-declare global {
+customElements.define("home-assistant-main", HomeAssistantMain);
  interface HTMLElementTagNameMap {
    "home-assistant-main": HomeAssistantMain;
  }
 }
--- a/src/layouts/home-assistant.ts
+++ b/src/layouts/home-assistant.ts
@@ -1,5 +1,5 @@
 import "@polymer/app-route/app-location";
-import { html, property, PropertyValues, customElement } from "lit-element";
+import { html, property, PropertyValues } from "lit-element";
 import { navigate } from "../common/navigate";
 import { getStorageDefaultPanelUrlPath } from "../data/panel";
 import "../resources/custom-card-support";
@@ -12,7 +12,6 @@ import {
 import "./ha-init-page";
 import "./home-assistant-main";
@customElement("home-assistant")
 export class HomeAssistantAppEl extends HassElement {
  @property() private _route?: Route;
@@ -22,10 +21,6 @@ export class HomeAssistantAppEl extends HassElement {
  private _haVersion?: string;
  private _hiddenTimeout?: number;
  private _visiblePromiseResolve?: () => void;
  protected render() {
    const hass = this.hass;
@@ -75,12 +70,6 @@ export class HomeAssistantAppEl extends HassElement {
    super.hassConnected();
    // @ts-ignore
    this._loadHassTranslations(this.hass!.language, "state");
    document.addEventListener(
      "visibilitychange",
      () => this.__handleVisibilityChange(),
      false
    );
  }
  protected hassReconnected() {
@@ -147,37 +136,6 @@ export class HomeAssistantAppEl extends HassElement {
        ? route.path.substr(1)
        : route.path.substr(1, dividerPos - 1);
  }
  private __handleVisibilityChange() {
    if (document.hidden) {
      // If the document is hidden, we will prevent reconnects until we are visible again
      this.hass!.connection.suspendReconnectUntil(
        new Promise((resolve) => {
          this._visiblePromiseResolve = resolve;
        })
      );
      // We close the connection to Home Assistant after being hidden for 5 minutes
      this._hiddenTimeout = window.setTimeout(() => {
        this._hiddenTimeout = undefined;
        this.hass!.connection.suspend();
      }, 300000);
    } else {
      // Clear timer to close the connection
      if (this._hiddenTimeout) {
        clearTimeout(this._hiddenTimeout);
        this._hiddenTimeout = undefined;
      }
      // Unsuspend the reconnect
      if (this._visiblePromiseResolve) {
        this._visiblePromiseResolve();
        this._visiblePromiseResolve = undefined;
      }
    }
  }
 }
-declare global {
+customElements.define("home-assistant", HomeAssistantAppEl);
  interface HTMLElementTagNameMap {
    "home-assistant": HomeAssistantAppEl;
  }
 }
--- a/src/layouts/loading-screen.ts
+++ b/src/layouts/loading-screen.ts
@@ -1,3 +1,4 @@
 import "@polymer/paper-spinner/paper-spinner-lite";
 import {
  css,
  CSSResult,
@@ -6,12 +7,11 @@ import {
  LitElement,
  TemplateResult,
 } from "lit-element";
 import "../components/ha-circular-progress";
@customElement("loading-screen")
 class LoadingScreen extends LitElement {
  protected render(): TemplateResult {
-    return html` <ha-circular-progress active></ha-circular-progress> `;
+    return html` <paper-spinner-lite active></paper-spinner-lite> `;
  }
  static get styles(): CSSResult {
--- a/src/panels/config/automation/thingtalk/dialog-thingtalk.ts
+++ b/src/panels/config/automation/thingtalk/dialog-thingtalk.ts
@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import "../../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import {
  css,
  CSSResult,
@@ -132,10 +132,10 @@ class DialogThingtalk extends LitElement {
            Skip
          </mwc-button>
          <mwc-button @click="${this._generate}" .disabled=${this._submitting}>
-            <ha-circular-progress
+            <paper-spinner
              ?active="${this._submitting}"
              alt="Creating your automation..."
-            ></ha-circular-progress>
+            ></paper-spinner>
            Create automation
          </mwc-button>
        </div>
@@ -245,15 +245,15 @@ class DialogThingtalk extends LitElement {
        mwc-button.left {
          margin-right: auto;
        }
-        mwc-button ha-circular-progress {
+        mwc-button paper-spinner {
          width: 14px;
          height: 14px;
          margin-right: 20px;
        }
-        ha-circular-progress {
+        paper-spinner {
          display: none;
        }
-        ha-circular-progress[active] {
+        paper-spinner[active] {
          display: block;
        }
        .error {
--- a/src/panels/config/cloud/account/cloud-webhooks.ts
+++ b/src/panels/config/cloud/account/cloud-webhooks.ts
@@ -1,6 +1,6 @@
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import "../../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { html, LitElement, property, PropertyValues } from "lit-element";
 import "../../../../components/ha-card";
 import "../../../../components/ha-switch";
@@ -119,7 +119,7 @@ export class CloudWebhooks extends LitElement {
          ${this._progress.includes(entry.webhook_id)
            ? html`
                <div class="progress">
-                  <ha-circular-progress active></ha-circular-progress>
+                  <paper-spinner active></paper-spinner>
                </div>
              `
            : this._cloudHooks![entry.webhook_id]
--- a/src/panels/config/entities/show-dialog-entity-editor.ts
+++ b/src/panels/config/entities/show-dialog-entity-editor.ts
@@ -1,6 +1,6 @@
 import { fireEvent } from "../../../common/dom/fire_event";
 import { EntityRegistryEntry } from "../../../data/entity_registry";
-import type { DialogEntityEditor } from "./dialog-entity-editor";
+import { DialogEntityEditor } from "./dialog-entity-editor";
 export interface EntityRegistryDetailDialogParams {
  entry?: EntityRegistryEntry;
--- a/src/panels/config/ha-entity-config.js
+++ b/src/panels/config/ha-entity-config.js
@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-import "../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -65,10 +65,7 @@ class HaEntityConfig extends PolymerElement {
                </template>
                <template is="dom-if" if="[[computeShowSpinner(formState)]]">
-                  <ha-circular-progress
+                  <paper-spinner active="" alt="[[formState]]"></paper-spinner>
                    active=""
                    alt="[[formState]]"
                  ></ha-circular-progress>
                  [[formState]]
                </template>
              </div>
--- a/src/panels/config/info/system-health-card.ts
+++ b/src/panels/config/info/system-health-card.ts
@@ -1,4 +1,4 @@
-import "../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import {
  css,
  CSSResult,
@@ -46,7 +46,7 @@ class SystemHealthCard extends LitElement {
      sections.push(
        html`
          <div class="loading-container">
-            <ha-circular-progress active></ha-circular-progress>
+            <paper-spinner active></paper-spinner>
          </div>
        `
      );
--- a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import "../../../../../components/ha-icon-button";
-import "../../../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import {
  css,
  CSSResult,
@@ -97,10 +97,7 @@ class ZHAAddDevicesPage extends LitElement {
                    "ui.panel.config.zha.add_device_page.spinner"
                  )}
                </h1>
-                <ha-circular-progress
+                <paper-spinner active alt="Searching"></paper-spinner>
                  active
                  alt="Searching"
                ></ha-circular-progress>
              `
            : html`
                <div>
@@ -229,7 +226,7 @@ class ZHAAddDevicesPage extends LitElement {
        .error {
          color: var(--google-red-500);
        }
-        ha-circular-progress {
+        paper-spinner {
          padding: 20px;
        }
        .searching {
--- a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
@@ -1,7 +1,7 @@
 import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
-import "../../../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import {
  css,
  CSSResult,
@@ -104,12 +104,12 @@ export class ZHAAddGroupPage extends LitElement {
              @click="${this._createGroup}"
              class="button"
            >
-              <ha-circular-progress
+              <paper-spinner
                ?active="${this._processingAdd}"
                alt="${this.hass!.localize(
                  "ui.panel.config.zha.groups.creating_group"
                )}"
-              ></ha-circular-progress>
+              ></paper-spinner>
              ${this.hass!.localize(
                "ui.panel.config.zha.groups.create"
              )}</mwc-button
@@ -171,15 +171,15 @@ export class ZHAAddGroupPage extends LitElement {
        ha-config-section *:last-child {
          padding-bottom: 24px;
        }
-        mwc-button ha-circular-progress {
+        mwc-button paper-spinner {
          width: 14px;
          height: 14px;
          margin-right: 20px;
        }
-        ha-circular-progress {
+        paper-spinner {
          display: none;
        }
-        ha-circular-progress[active] {
+        paper-spinner[active] {
          display: block;
        }
        .paper-dialog-buttons {
--- a/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
+++ b/src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import "../../../../../components/ha-icon-button";
-import "../../../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import {
  css,
  CSSResult,
@@ -166,12 +166,12 @@ export class ZHAGroupPage extends LitElement {
                    @click="${this._removeMembersFromGroup}"
                    class="button"
                  >
-                    <ha-circular-progress
+                    <paper-spinner
                      ?active="${this._processingRemove}"
                      alt=${this.hass.localize(
                        "ui.panel.config.zha.groups.removing_members"
                      )}
-                    ></ha-circular-progress>
+                    ></paper-spinner>
                    ${this.hass!.localize(
                      "ui.panel.config.zha.groups.remove_members"
                    )}</mwc-button
@@ -201,12 +201,12 @@ export class ZHAGroupPage extends LitElement {
              @click="${this._addMembersToGroup}"
              class="button"
            >
-              <ha-circular-progress
+              <paper-spinner
                ?active="${this._processingAdd}"
                alt=${this.hass.localize(
                  "ui.panel.config.zha.groups.adding_members"
                )}
-              ></ha-circular-progress>
+              ></paper-spinner>
              ${this.hass!.localize(
                "ui.panel.config.zha.groups.add_members"
              )}</mwc-button
@@ -309,15 +309,15 @@ export class ZHAGroupPage extends LitElement {
          text-decoration: none;
        }
-        mwc-button ha-circular-progress {
+        mwc-button paper-spinner {
          width: 14px;
          height: 14px;
          margin-right: 20px;
        }
-        ha-circular-progress {
+        paper-spinner {
          display: none;
        }
-        ha-circular-progress[active] {
+        paper-spinner[active] {
          display: block;
        }
        .paper-dialog-buttons {
--- a/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts
+++ b/src/panels/config/integrations/integration-panels/zwave/zwave-network.ts
@@ -1,5 +1,5 @@
 import "../../../../../components/ha-icon-button";
-import "../../../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
  css,
@@ -92,7 +92,7 @@ export class ZwaveNetwork extends LitElement {
                      `
                    : this._networkStatus.state === ZWAVE_NETWORK_STATE_STARTED
                    ? html`
-                        <ha-circular-progress active></ha-circular-progress>
+                        <paper-spinner active></paper-spinner>
                        ${this.hass!.localize(
                          "ui.panel.config.zwave.network_status.network_starting"
                        )}<br />
--- a/src/panels/config/logs/system-log-card.ts
+++ b/src/panels/config/logs/system-log-card.ts
@@ -1,7 +1,7 @@
 import "../../../components/ha-icon-button";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
-import "../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import {
  css,
  CSSResult,
@@ -47,7 +47,7 @@ export class SystemLogCard extends LitElement {
          ${this._items === undefined
            ? html`
                <div class="loading-container">
-                  <ha-circular-progress active></ha-circular-progress>
+                  <paper-spinner active></paper-spinner>
                </div>
              `
            : html`
--- a/src/panels/config/server_control/ha-config-server-control.ts
+++ b/src/panels/config/server_control/ha-config-server-control.ts
@@ -112,11 +112,7 @@ export class HaConfigServerControl extends LitElement {
                                  )}
                                </mwc-button>
                              `
-                            : html`
+                            : html` <paper-spinner active></paper-spinner> `}
                                <ha-circular-progress
                                  active
                                ></ha-circular-progress>
                              `}
                        </div>
                      `
                    : html`
--- a/src/panels/config/users/dialog-add-user.ts
+++ b/src/panels/config/users/dialog-add-user.ts
@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import "@polymer/paper-input/paper-input";
-import "../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import {
  css,
  CSSResult,
@@ -138,7 +138,7 @@ export class DialogAddUser extends LitElement {
        ${this._loading
          ? html`
              <div slot="primaryAction" class="submit-spinner">
-                <ha-circular-progress active></ha-circular-progress>
+                <paper-spinner active></paper-spinner>
              </div>
            `
          : html`
--- a/src/panels/developer-tools/template/developer-tools-template.js
+++ b/src/panels/developer-tools/template/developer-tools-template.js
@@ -1,4 +1,4 @@
-import "../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 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";
@@ -92,11 +92,10 @@ class HaPanelDevTemplate extends LocalizeMixin(PolymerElement) {
        </div>
        <div class="render-pane">
-          <ha-circular-progress
+          <paper-spinner
            class="render-spinner"
            active="[[rendering]]"
-            size="small"
+          ></paper-spinner>
          ></ha-circular-progress>
          <pre class$="[[computeRenderedClasses(error)]]">[[processed]]</pre>
        </div>
      </div>
--- a/src/panels/history/ha-panel-history.ts
+++ b/src/panels/history/ha-panel-history.ts
@@ -11,7 +11,7 @@ import { HomeAssistant } from "../../types";
 import type { DateRangePickerRanges } from "../../components/ha-date-range-picker";
 import "../../components/ha-date-range-picker";
 import { fetchDate, computeHistory } from "../../data/history";
-import "../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 class HaPanelHistory extends LitElement {
  @property() hass!: HomeAssistant;
@@ -73,10 +73,10 @@ class HaPanelHistory extends LitElement {
            ></ha-date-range-picker>
          </div>
          ${this._isLoading
-            ? html`<ha-circular-progress
+            ? html`<paper-spinner
                active
                alt=${this.hass.localize("ui.common.loading")}
-              ></ha-circular-progress>`
+              ></paper-spinner>`
            : html`
                <state-history-charts
                  .hass=${this.hass}
@@ -190,7 +190,7 @@ class HaPanelHistory extends LitElement {
        .content {
          padding: 0 16px 16px;
        }
-        ha-circular-progress {
+        paper-spinner {
          position: absolute;
          left: 50%;
          top: 50%;
--- a/src/panels/logbook/ha-panel-logbook.ts
+++ b/src/panels/logbook/ha-panel-logbook.ts
@@ -2,7 +2,7 @@ import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "../../components/ha-icon-button";
-import "../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { computeRTL } from "../../common/util/compute_rtl";
 import "../../components/entity/ha-entity-picker";
 import "../../components/ha-menu-button";
@@ -105,10 +105,10 @@ export class HaPanelLogbook extends LitElement {
        </div>
        ${this._isLoading
-          ? html`<ha-circular-progress
+          ? html`<paper-spinner
              active
              alt=${this.hass.localize("ui.common.loading")}
-            ></ha-circular-progress>`
+            ></paper-spinner>`
          : html`<ha-logbook
              .hass=${this.hass}
              .entries=${this._entries}
@@ -239,7 +239,7 @@ export class HaPanelLogbook extends LitElement {
          margin-right: 0;
        }
-        ha-circular-progress {
+        paper-spinner {
          position: absolute;
          left: 50%;
          top: 50%;
--- a/src/panels/lovelace/cards/hui-humidifier-card.ts
+++ b/src/panels/lovelace/cards/hui-humidifier-card.ts
@@ -1,392 +0,0 @@
 import "../../../components/ha-icon-button";
 import "@thomasloven/round-slider";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
  css,
  CSSResult,
  customElement,
  html,
  LitElement,
  property,
  PropertyValues,
  svg,
  TemplateResult,
 } from "lit-element";
 import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import "../../../components/ha-card";
 import { HumidifierEntity } from "../../../data/humidifier";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 import { findEntities } from "../common/find-entites";
 import { hasConfigOrEntityChanged } from "../common/has-changed";
 import { createEntityNotFoundWarning } from "../components/hui-warning";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { HumidifierCardConfig } from "./types";
@customElement("hui-humidifier-card")
 export class HuiHumidifierCard extends LitElement implements LovelaceCard {
  public static async getConfigElement(): Promise<LovelaceCardEditor> {
    await import(
      /* webpackChunkName: "hui-humidifier-card-editor" */ "../editor/config-elements/hui-humidifier-card-editor"
    );
    return document.createElement("hui-humidifier-card-editor");
  }
  public static getStubConfig(
    hass: HomeAssistant,
    entities: string[],
    entitiesFallback: string[]
  ): HumidifierCardConfig {
    const includeDomains = ["humidifier"];
    const maxEntities = 1;
    const foundEntities = findEntities(
      hass,
      maxEntities,
      entities,
      entitiesFallback,
      includeDomains
    );
    return { type: "humidifier", entity: foundEntities[0] || "" };
  }
  @property() public hass?: HomeAssistant;
  @property() private _config?: HumidifierCardConfig;
  @property() private _setHum?: number;
  public getCardSize(): number {
    return 5;
  }
  public setConfig(config: HumidifierCardConfig): void {
    if (!config.entity || config.entity.split(".")[0] !== "humidifier") {
      throw new Error("Specify an entity from within the humidifier domain.");
    }
    this._config = config;
  }
  protected render(): TemplateResult {
    if (!this.hass || !this._config) {
      return html``;
    }
    const stateObj = this.hass.states[this._config.entity] as HumidifierEntity;
    if (!stateObj) {
      return html`
        <hui-warning>
          ${createEntityNotFoundWarning(this.hass, this._config.entity)}
        </hui-warning>
      `;
    }
    const name =
      this._config!.name ||
      computeStateName(this.hass!.states[this._config!.entity]);
    const targetHumidity =
      stateObj.attributes.humidity !== null &&
      Number.isFinite(Number(stateObj.attributes.humidity))
        ? stateObj.attributes.humidity
        : stateObj.attributes.min_humidity;
    const rtlDirection = computeRTLDirection(this.hass);
    const slider = UNAVAILABLE_STATES.includes(stateObj.state)
      ? html` <round-slider disabled="true"></round-slider> `
      : html`
          <round-slider
            .value=${targetHumidity}
            .min=${stateObj.attributes.min_humidity}
            .max=${stateObj.attributes.max_humidity}
            .rtl=${rtlDirection === "rtl"}
            .step="1"
            @value-changing=${this._dragEvent}
            @value-changed=${this._setHumidity}
          ></round-slider>
        `;
    const setValues = svg`
      <svg viewBox="0 0 40 20">
        <text
          x="50%"
          dx="1"
          y="60%"
          text-anchor="middle"
          style="font-size: 13px;"
          class="set-value"
        >
          ${
            UNAVAILABLE_STATES.includes(stateObj.state) ||
            this._setHum === undefined ||
            this._setHum === null
              ? ""
              : svg`
                    ${this._setHum.toFixed()}
                    <tspan dx="-3" dy="-6.5" style="font-size: 4px;">
                      %
                    </tspan>
                    `
          }
        </text>
      </svg>
      <svg id="set-values">
        <g>
          <text
            dy="22"
            text-anchor="middle"
            id="set-mode"
          >
            ${this.hass!.localize(`state.default.${stateObj.state}`)}
            ${
              stateObj.attributes.mode &&
              !UNAVAILABLE_STATES.includes(stateObj.state)
                ? html`
                    -
                    ${this.hass!.localize(
                      `state_attributes.humidifier.mode.${stateObj.attributes.mode}`
                    ) || stateObj.attributes.mode}
                  `
                : ""
            }
          </text>
        </g>
      </svg>
    `;
    return html`
      <ha-card>
        <ha-icon-button
          icon="hass:dots-vertical"
          class="more-info"
          @click=${this._handleMoreInfo}
          tabindex="0"
        ></ha-icon-button>
        <div class="content">
          <div id="controls">
            <div id="slider">
              ${slider}
              <div id="slider-center">
                <div id="humidity">
                  ${setValues}
                </div>
              </div>
            </div>
          </div>
          <div id="info">
            ${name}
          </div>
        </div>
      </ha-card>
    `;
  }
  protected shouldUpdate(changedProps: PropertyValues): boolean {
    return hasConfigOrEntityChanged(this, changedProps);
  }
  protected updated(changedProps: PropertyValues): void {
    super.updated(changedProps);
    if (
      !this._config ||
      !this.hass ||
      (!changedProps.has("hass") && !changedProps.has("_config"))
    ) {
      return;
    }
    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
    const oldConfig = changedProps.get("_config") as
      | HumidifierCardConfig
      | undefined;
    if (
      !oldHass ||
      !oldConfig ||
      oldHass.themes !== this.hass.themes ||
      oldConfig.theme !== this._config.theme
    ) {
      applyThemesOnElement(this, this.hass.themes, this._config.theme);
    }
    const stateObj = this.hass.states[this._config.entity];
    if (!stateObj) {
      return;
    }
    if (!oldHass || oldHass.states[this._config.entity] !== stateObj) {
      this._setHum = this._getSetHum(stateObj);
      this._rescale_svg();
    }
  }
  private _rescale_svg() {
    // Set the viewbox of the SVG containing the set humidity to perfectly
    // fit the text
    // That way it will auto-scale correctly
    // This is not done to the SVG containing the current humidity, because
    // it should not be centered on the text, but only on the value
    if (this.shadowRoot && this.shadowRoot.querySelector("ha-card")) {
      (this.shadowRoot.querySelector(
        "ha-card"
      ) as LitElement).updateComplete.then(() => {
        const svgRoot = this.shadowRoot!.querySelector("#set-values");
        const box = svgRoot!.querySelector("g")!.getBBox();
        svgRoot!.setAttribute(
          "viewBox",
          `${box!.x} ${box!.y} ${box!.width} ${box!.height}`
        );
        svgRoot!.setAttribute("width", `${box!.width}`);
        svgRoot!.setAttribute("height", `${box!.height}`);
      });
    }
  }
  private _getSetHum(stateObj: HassEntity): undefined | number {
    if (UNAVAILABLE_STATES.includes(stateObj.state)) {
      return undefined;
    }
    return stateObj.attributes.humidity;
  }
  private _dragEvent(e): void {
    this._setHum = e.detail.value;
  }
  private _setHumidity(e): void {
    this.hass!.callService("humidifier", "set_humidity", {
      entity_id: this._config!.entity,
      humidity: e.detail.value,
    });
  }
  private _handleMoreInfo() {
    fireEvent(this, "hass-more-info", {
      entityId: this._config!.entity,
    });
  }
  static get styles(): CSSResult {
    return css`
      :host {
        display: block;
      }
      ha-card {
        height: 100%;
        position: relative;
        overflow: hidden;
        --name-font-size: 1.2rem;
        --brightness-font-size: 1.2rem;
        --rail-border-color: transparent;
      }
      .more-info {
        position: absolute;
        cursor: pointer;
        top: 0;
        right: 0;
        border-radius: 100%;
        color: var(--secondary-text-color);
        z-index: 25;
      }
      .content {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      #controls {
        display: flex;
        justify-content: center;
        padding: 16px;
        position: relative;
      }
      #slider {
        height: 100%;
        width: 100%;
        position: relative;
        max-width: 250px;
        min-width: 100px;
      }
      round-slider {
        --round-slider-path-color: var(--disabled-text-color);
        --round-slider-bar-color: var(--mode-color);
        padding-bottom: 10%;
      }
      #slider-center {
        position: absolute;
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        box-sizing: border-box;
        border-radius: 100%;
        left: 20px;
        top: 20px;
        text-align: center;
        overflow-wrap: break-word;
        pointer-events: none;
      }
      #humidity {
        position: absolute;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 50%;
        top: 45%;
        left: 50%;
      }
      #set-values {
        max-width: 80%;
        transform: translate(0, -50%);
        font-size: 20px;
      }
      #set-mode {
        fill: var(--secondary-text-color);
        font-size: 16px;
      }
      #info {
        display: flex-vertical;
        justify-content: center;
        text-align: center;
        padding: 16px;
        margin-top: -60px;
        font-size: var(--name-font-size);
      }
      #modes > * {
        color: var(--disabled-text-color);
        cursor: pointer;
        display: inline-block;
      }
      #modes .selected-icon {
        color: var(--mode-color);
      }
      text {
        fill: var(--primary-text-color);
      }
    `;
  }
 }
 declare global {
  interface HTMLElementTagNameMap {
    "hui-humidifier-card": HuiHumidifierCard;
  }
 }
--- a/src/panels/lovelace/cards/hui-starting-card.ts
+++ b/src/panels/lovelace/cards/hui-starting-card.ts
@@ -10,10 +10,10 @@ import {
  PropertyValues,
 } from "lit-element";
 import "../../../components/ha-card";
 import "../../../components/ha-circular-progress";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCard } from "../types";
 import { LovelaceCardConfig } from "../../../data/lovelace";
 import "@polymer/paper-spinner/paper-spinner-lite";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { STATE_NOT_RUNNING } from "home-assistant-js-websocket";
@@ -47,7 +47,7 @@ export class HuiStartingCard extends LitElement implements LovelaceCard {
    return html`
      <div class="content">
-        <ha-circular-progress active></ha-circular-progress>
+        <paper-spinner-lite active></paper-spinner-lite>
        ${this.hass.localize("ui.panel.lovelace.cards.starting.description")}
      </div>
    `;
@@ -59,7 +59,7 @@ export class HuiStartingCard extends LitElement implements LovelaceCard {
        display: block;
        height: calc(100vh - 64px);
      }
-      ha-circular-progress {
+      paper-spinner-lite {
        padding-bottom: 20px;
      }
      .content {
--- a/src/panels/lovelace/cards/types.ts
+++ b/src/panels/lovelace/cards/types.ts
@@ -133,12 +133,6 @@ export interface GlanceCardConfig extends LovelaceCardConfig {
  state_color?: boolean;
 }
 export interface HumidifierCardConfig extends LovelaceCardConfig {
  entity: string;
  theme?: string;
  name?: string;
 }
 export interface IframeCardConfig extends LovelaceCardConfig {
  aspect_ratio?: string;
  title?: string;
--- a/src/panels/lovelace/common/generate-lovelace-config.ts
+++ b/src/panels/lovelace/common/generate-lovelace-config.ts
@@ -37,7 +37,6 @@ import { GroupEntity, HomeAssistant } from "../../../types";
 import {
  AlarmPanelCardConfig,
  EntitiesCardConfig,
  HumidifierCardConfig,
  LightCardConfig,
  PictureEntityCardConfig,
  ThermostatCardConfig,
@@ -151,12 +150,6 @@ export const computeCards = (
        refresh_interval: stateObj.attributes.refresh,
      };
      cards.push(cardConfig);
    } else if (domain === "humidifier") {
      const cardConfig: HumidifierCardConfig = {
        type: "humidifier",
        entity: entityId,
      };
      cards.push(cardConfig);
    } else if (domain === "light" && single) {
      const cardConfig: LightCardConfig = {
        type: "light",
--- a/src/panels/lovelace/create-element/create-card-element.ts
+++ b/src/panels/lovelace/create-element/create-card-element.ts
@@ -38,7 +38,6 @@ const LAZY_LOAD_TYPES = {
  "empty-state": () => import("../cards/hui-empty-state-card"),
  starting: () => import("../cards/hui-starting-card"),
  "entity-filter": () => import("../cards/hui-entity-filter-card"),
  humidifier: () => import("../cards/hui-humidifier-card"),
  "media-control": () => import("../cards/hui-media-control-card"),
  "picture-elements": () => import("../cards/hui-picture-elements-card"),
  "picture-entity": () => import("../cards/hui-picture-entity-card"),
--- a/src/panels/lovelace/create-element/create-row-element.ts
+++ b/src/panels/lovelace/create-element/create-row-element.ts
@@ -51,7 +51,6 @@ const DOMAIN_TO_ELEMENT_TYPE = {
  cover: "cover",
  fan: "toggle",
  group: "group",
  humidifier: "toggle",
  input_boolean: "toggle",
  input_number: "input-number",
  input_select: "input-select",
--- a/src/panels/lovelace/editor/card-editor/hui-card-editor.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-editor.ts
@@ -140,11 +140,11 @@ export class HuiCardEditor extends LitElement {
              <div class="gui-editor">
                ${this._loading
                  ? html`
-                      <ha-circular-progress
+                      <paper-spinner
                        active
                        alt="Loading"
                        class="center margin-bot"
-                      ></ha-circular-progress>
+                      ></paper-spinner>
                    `
                  : this._configElement}
              </div>
@@ -303,7 +303,7 @@ export class HuiCardEditor extends LitElement {
      .warning {
        color: #ffa726;
      }
-      ha-circular-progress {
+      paper-spinner {
        display: block;
        margin: auto;
      }
--- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
@@ -210,7 +210,7 @@ export class HuiCardPicker extends LitElement {
        this._renderCardElement(card),
        html`
          <div class="card spinner">
-            <ha-circular-progress active alt="Loading"></ha-circular-progress>
+            <paper-spinner active alt="Loading"></paper-spinner>
          </div>
        `
      )}`,
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
@@ -17,7 +17,6 @@ import type {
  LovelaceViewConfig,
 } from "../../../../data/lovelace";
 import { haStyleDialog } from "../../../../resources/styles";
 import "../../../../components/ha-circular-progress";
 import type { HomeAssistant } from "../../../../types";
 import { showSaveSuccessToast } from "../../../../util/toast-saved-success";
 import { addCard, replaceCard } from "../config-util";
@@ -168,10 +167,10 @@ export class HuiDialogEditCard extends LitElement {
                    ></hui-card-preview>
                    ${this._error
                      ? html`
-                          <ha-circular-progress
+                          <paper-spinner
                            active
                            alt="Can't update card"
-                          ></ha-circular-progress>
+                          ></paper-spinner>
                        `
                      : ``}
                  </div>
@@ -206,10 +205,7 @@ export class HuiDialogEditCard extends LitElement {
                >
                  ${this._saving
                    ? html`
-                        <ha-circular-progress
+                        <paper-spinner active alt="Saving"></paper-spinner>
                          active
                          alt="Saving"
                        ></ha-circular-progress>
                      `
                    : this.hass!.localize("ui.common.save")}
                </mwc-button>
@@ -290,7 +286,7 @@ export class HuiDialogEditCard extends LitElement {
          }
        }
-        mwc-button ha-circular-progress {
+        mwc-button paper-spinner {
          width: 14px;
          height: 14px;
          margin-right: 20px;
@@ -307,7 +303,7 @@ export class HuiDialogEditCard extends LitElement {
        .element-preview {
          position: relative;
        }
-        .element-preview ha-circular-progress {
+        .element-preview paper-spinner {
          top: 50%;
          left: 50%;
          position: absolute;
--- a/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts
@@ -111,10 +111,7 @@ export class HuiDialogSuggestCard extends LitElement {
                <mwc-button ?disabled="${this._saving}" @click="${this._save}">
                  ${this._saving
                    ? html`
-                        <ha-circular-progress
+                        <paper-spinner active alt="Saving"></paper-spinner>
                          active
                          alt="Saving"
                        ></ha-circular-progress>
                      `
                    : this.hass!.localize(
                        "ui.panel.lovelace.editor.suggest_card.add"
@@ -146,7 +143,7 @@ export class HuiDialogSuggestCard extends LitElement {
        ha-paper-dialog {
          max-width: 845px;
        }
-        mwc-button ha-circular-progress {
+        mwc-button paper-spinner {
          width: 14px;
          height: 14px;
          margin-right: 20px;
--- a/src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts
@@ -1,117 +0,0 @@
 import "@polymer/paper-input/paper-input";
 import {
  customElement,
  html,
  LitElement,
  property,
  TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/entity/ha-entity-picker";
 import { HomeAssistant } from "../../../../types";
 import { HumidifierCardConfig } from "../../cards/types";
 import { struct } from "../../common/structs/struct";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
 import { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
 const cardConfigStruct = struct({
  type: "string",
  entity: "string",
  name: "string?",
  theme: "string?",
 });
 const includeDomains = ["humidifier"];
@customElement("hui-humidifier-card-editor")
 export class HuiHumidifierCardEditor extends LitElement
  implements LovelaceCardEditor {
  @property() public hass?: HomeAssistant;
  @property() private _config?: HumidifierCardConfig;
  public setConfig(config: HumidifierCardConfig): void {
    config = cardConfigStruct(config);
    this._config = config;
  }
  get _entity(): string {
    return this._config!.entity || "";
  }
  get _name(): string {
    return this._config!.name || "";
  }
  get _theme(): string {
    return this._config!.theme || "";
  }
  protected render(): TemplateResult {
    if (!this.hass || !this._config) {
      return html``;
    }
    return html`
      ${configElementStyle}
      <div class="card-config">
        <ha-entity-picker
          .label="${this.hass.localize(
            "ui.panel.lovelace.editor.card.generic.entity"
          )} (${this.hass.localize(
            "ui.panel.lovelace.editor.card.config.required"
          )})"
          .hass=${this.hass}
          .value="${this._entity}"
          .configValue=${"entity"}
          .includeDomains=${includeDomains}
          @change="${this._valueChanged}"
          allow-custom-entity
        ></ha-entity-picker>
        <paper-input
          .label="${this.hass.localize(
            "ui.panel.lovelace.editor.card.generic.name"
          )} (${this.hass.localize(
            "ui.panel.lovelace.editor.card.config.optional"
          )})"
          .value="${this._name}"
          .configValue="${"name"}"
          @value-changed="${this._valueChanged}"
        ></paper-input>
        <hui-theme-select-editor
          .hass=${this.hass}
          .value="${this._theme}"
          .configValue="${"theme"}"
          @value-changed="${this._valueChanged}"
        ></hui-theme-select-editor>
      </div>
    `;
  }
  private _valueChanged(ev: EntitiesEditorEvent): void {
    if (!this._config || !this.hass) {
      return;
    }
    const target = ev.target! as EditorTarget;
    if (this[`_${target.configValue}`] === target.value) {
      return;
    }
    if (target.configValue) {
      if (target.value === "") {
        delete this._config[target.configValue!];
      } else {
        this._config = { ...this._config, [target.configValue!]: target.value };
      }
    }
    fireEvent(this, "config-changed", { config: this._config });
  }
 }
 declare global {
  interface HTMLElementTagNameMap {
    "hui-humidifier-card-editor": HuiHumidifierCardEditor;
  }
 }
--- a/src/panels/lovelace/editor/hui-dialog-save-config.ts
+++ b/src/panels/lovelace/editor/hui-dialog-save-config.ts
@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import {
  css,
  CSSResult,
@@ -118,10 +118,10 @@ export class HuiSaveConfig extends LitElement {
                  ?disabled="${this._saving}"
                  @click="${this._saveConfig}"
                >
-                  <ha-circular-progress
+                  <paper-spinner
                    ?active="${this._saving}"
                    alt="Saving"
-                  ></ha-circular-progress>
+                  ></paper-spinner>
                  ${this.hass!.localize(
                    "ui.panel.lovelace.editor.save_config.save"
                  )}
@@ -195,13 +195,13 @@ export class HuiSaveConfig extends LitElement {
        ha-paper-dialog {
          max-width: 650px;
        }
-        ha-circular-progress {
+        paper-spinner {
          display: none;
        }
-        ha-circular-progress[active] {
+        paper-spinner[active] {
          display: block;
        }
-        mwc-button ha-circular-progress {
+        mwc-button paper-spinner {
          width: 14px;
          height: 14px;
          margin-right: 20px;
--- a/src/panels/lovelace/editor/lovelace-cards.ts
+++ b/src/panels/lovelace/editor/lovelace-cards.ts
@@ -29,10 +29,6 @@ export const coreCards: Card[] = [
    type: "history-graph",
    showElement: true,
  },
  {
    type: "humidifier",
    showElement: true,
  },
  {
    type: "light",
    showElement: true,
--- a/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
+++ b/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
@@ -1,5 +1,6 @@
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "@polymer/paper-spinner/paper-spinner";
 import {
  css,
  CSSResult,
@@ -10,7 +11,6 @@ import {
  TemplateResult,
 } from "lit-element";
 import "../../../../components/dialog/ha-paper-dialog";
 import "../../../../components/ha-circular-progress";
 import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
 import type { LovelaceConfig } from "../../../../data/lovelace";
 import { haStyleDialog } from "../../../../resources/styles";
@@ -75,10 +75,10 @@ export class HuiDialogEditLovelace extends LitElement {
            ?disabled="${!this._config || this._saving}"
            @click="${this._save}"
          >
-            <ha-circular-progress
+            <paper-spinner
              ?active="${this._saving}"
              alt="Saving"
-            ></ha-circular-progress>
+            ></paper-spinner>
            ${this.hass!.localize("ui.common.save")}</mwc-button
          >
        </div>
@@ -148,15 +148,15 @@ export class HuiDialogEditLovelace extends LitElement {
        ha-paper-dialog {
          max-width: 650px;
        }
-        mwc-button ha-circular-progress {
+        mwc-button paper-spinner {
          width: 14px;
          height: 14px;
          margin-right: 20px;
        }
-        ha-circular-progress {
+        paper-spinner {
          display: none;
        }
-        ha-circular-progress[active] {
+        paper-spinner[active] {
          display: block;
        }
      `,
--- a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
+++ b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
@@ -1,6 +1,7 @@
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
 import "../../../../components/ha-icon-button";
 import "@polymer/paper-spinner/paper-spinner";
 import "@polymer/paper-tabs/paper-tab";
 import "@polymer/paper-tabs/paper-tabs";
 import {
@@ -15,7 +16,6 @@ import {
 import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import { navigate } from "../../../../common/navigate";
 import "../../../../components/dialog/ha-paper-dialog";
 import "../../../../components/ha-circular-progress";
 import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog";
 import type {
  LovelaceBadgeConfig,
@@ -199,10 +199,10 @@ export class HuiDialogEditView extends LitElement {
            ?disabled="${!this._config || this._saving}"
            @click="${this._save}"
          >
-            <ha-circular-progress
+            <paper-spinner
              ?active="${this._saving}"
              alt="Saving"
-            ></ha-circular-progress>
+            ></paper-spinner>
            ${this.hass!.localize("ui.common.save")}</mwc-button
          >
        </div>
@@ -369,7 +369,7 @@ export class HuiDialogEditView extends LitElement {
          text-transform: uppercase;
          border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }
-        mwc-button ha-circular-progress {
+        mwc-button paper-spinner {
          width: 14px;
          height: 14px;
          margin-right: 20px;
@@ -377,10 +377,10 @@ export class HuiDialogEditView extends LitElement {
        mwc-button.warning {
          margin-right: auto;
        }
-        ha-circular-progress {
+        paper-spinner {
          display: none;
        }
-        ha-circular-progress[active] {
+        paper-spinner[active] {
          display: block;
        }
        paper-dialog-scrollable {
--- a/src/panels/lovelace/header-footer/hui-graph-header-footer.ts
+++ b/src/panels/lovelace/header-footer/hui-graph-header-footer.ts
@@ -1,4 +1,4 @@
-import "../../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { HassEntity } from "home-assistant-js-websocket";
 import {
  css,
@@ -74,7 +74,7 @@ export class HuiGraphHeaderFooter extends LitElement
    if (!this._coordinates) {
      return html`
        <div class="container">
-          <ha-circular-progress active></ha-circular-progress>
+          <paper-spinner active></paper-spinner>
        </div>
      `;
    }
@@ -164,7 +164,7 @@ export class HuiGraphHeaderFooter extends LitElement
  static get styles(): CSSResult {
    return css`
-      ha-circular-progress {
+      paper-spinner {
        position: absolute;
        top: calc(50% - 28px);
      }
--- a/src/panels/lovelace/hui-editor.ts
+++ b/src/panels/lovelace/hui-editor.ts
@@ -3,7 +3,7 @@ import "@polymer/app-layout/app-header-layout/app-header-layout";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import "../../components/ha-icon-button";
-import "../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { safeDump, safeLoad } from "js-yaml";
 import {
  css,
--- a/src/panels/mailbox/ha-dialog-show-audio-message.js
+++ b/src/panels/mailbox/ha-dialog-show-audio-message.js
@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import "../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -54,7 +54,7 @@ class HaDialogShowAudioMessage extends LocalizeMixin(PolymerElement) {
          [[localize('ui.panel.mailbox.playback_title')]]
          <div class="icon">
            <template is="dom-if" if="[[_loading]]">
-              <ha-circular-progress active></ha-circular-progress>
+              <paper-spinner active></paper-spinner>
            </template>
            <ha-icon-button
              id="delicon"
--- a/src/panels/profile/ha-change-password-card.js
+++ b/src/panels/profile/ha-change-password-card.js
@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import "@polymer/paper-dialog/paper-dialog";
-import "../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -71,7 +71,7 @@ class HaChangePasswordCard extends LocalizeMixin(PolymerElement) {
          </div>
          <div class="card-actions">
            <template is="dom-if" if="[[_loading]]">
-              <div><ha-circular-progress active></ha-circular-progress></div>
+              <div><paper-spinner active></paper-spinner></div>
            </template>
            <template is="dom-if" if="[[!_loading]]">
              <mwc-button on-click="_changePassword"
--- a/src/panels/profile/ha-mfa-module-setup-flow.js
+++ b/src/panels/profile/ha-mfa-module-setup-flow.js
@@ -1,6 +1,6 @@
 import "@material/mwc-button";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
-import "../../components/ha-circular-progress";
+import "@polymer/paper-spinner/paper-spinner";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
@@ -70,7 +70,7 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
          </template>
          <template is="dom-if" if="[[!_step]]">
            <div class="init-spinner">
-              <ha-circular-progress active></ha-circular-progress>
+              <paper-spinner active></paper-spinner>
            </div>
          </template>
          <template is="dom-if" if="[[_step]]">
@@ -125,7 +125,7 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
          <template is="dom-if" if="[[_equals(_step.type, 'form')]]">
            <template is="dom-if" if="[[_loading]]">
              <div class="submit-spinner">
-                <ha-circular-progress active></ha-circular-progress>
+                <paper-spinner active></paper-spinner>
              </div>
            </template>
            <template is="dom-if" if="[[!_loading]]">
--- a/src/resources/ha-style.ts
+++ b/src/resources/ha-style.ts
@@ -60,6 +60,12 @@ documentContainer.innerHTML = `<custom-style>
      --paper-grey-200: #eeeeee;  /* for ha-date-picker-style */
      --paper-grey-500: #9e9e9e;  /* --label-badge-grey */
      /* for paper-spinner */
      --google-red-500: #db4437;
      --google-blue-500: #4285f4;
      --google-green-500: #0f9d58;
      --google-yellow-500: #f4b400;
      /* for paper-slider */
      --paper-green-400: #66bb6a;
      --paper-blue-400: #42a5f5;
--- a/src/resources/styles.ts
+++ b/src/resources/styles.ts
@@ -1,6 +1,7 @@
 import { css } from "lit-element";
 export const derivedStyles = {
  "paper-spinner-color": "var(--primary-color)",
  "error-state-color": "var(--error-color)",
  "state-icon-unavailable-color": "var(--disabled-text-color)",
  "sidebar-text-color": "var(--primary-text-color)",
--- a/src/state/hass-element.ts
+++ b/src/state/hass-element.ts
@@ -12,6 +12,7 @@ import SidebarMixin from "./sidebar-mixin";
 import ThemesMixin from "./themes-mixin";
 import TranslationsMixin from "./translations-mixin";
 import { urlSyncMixin } from "./url-sync-mixin";
 import { suspendMixin } from "./suspend-mixin";
 const ext = <T extends Constructor>(baseClass: T, mixins): T =>
  mixins.reduceRight((base, mixin) => mixin(base), baseClass);
@@ -24,6 +25,7 @@ export class HassElement extends ext(HassBaseEl, [
  SidebarMixin,
  DisconnectToastMixin,
  connectionMixin,
  suspendMixin,
  NotificationMixin,
  dialogManagerMixin,
  urlSyncMixin,
--- a/src/state/suspend-mixin.ts
+++ b/src/state/suspend-mixin.ts
@@ -0,0 +1,48 @@
 import { Constructor } from "../types";
 import { HassBaseEl } from "./hass-base-mixin";
 export const suspendMixin = <T extends Constructor<HassBaseEl>>(
  superClass: T
 ) =>
  class extends superClass {
    private __hiddenTimeout?: number;
    private __visiblePromiseResolve?: () => void;
    protected hassConnected() {
      super.hassConnected();
      document.addEventListener(
        "visibilitychange",
        () => this.__handleVisibilityChange(),
        false
      );
    }
    private __handleVisibilityChange() {
      if (document.hidden) {
        // If the document is hidden, we will prevent reconnects until we are visible again
        this.hass!.connection.suspendReconnectUntil(
          new Promise((resolve) => {
            this.__visiblePromiseResolve = resolve;
          })
        );
        // We close the connection to Home Assistant after being hidden for 5 minutes
        this.__hiddenTimeout = window.setTimeout(() => {
          this.__hiddenTimeout = undefined;
          this.hass!.connection.suspend();
        }, 300000);
      } else {
        // Clear timer to close the connection
        if (this.__hiddenTimeout) {
          clearTimeout(this.__hiddenTimeout);
          this.__hiddenTimeout = undefined;
        }
        // Unsuspend the reconnect
        if (this.__visiblePromiseResolve) {
          this.__visiblePromiseResolve();
          this.__visiblePromiseResolve = undefined;
        }
      }
    }
  };
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -44,19 +44,6 @@
        "idle": "Idle",
        "fan": "Fan"
      }
    },
    "humidifier": {
      "mode": {
        "normal": "Normal",
        "eco": "Eco",
        "away": "Away",
        "boost": "Boost",
        "comfort": "Comfort",
        "home": "Home",
        "sleep": "Sleep",
        "auto": "Auto",
        "baby": "Baby"
      }
    }
  },
  "state_badge": {
@@ -159,12 +146,6 @@
        "forward": "Forward",
        "reverse": "Reverse"
      },
      "humidifier": {
        "humidity": "Target humidity",
        "mode": "Mode",
        "target_humidity_entity": "{name} target humidity",
        "on_entity": "{name} on"
      },
      "light": {
        "brightness": "Brightness",
        "color_temperature": "Color temperature",
@@ -1954,10 +1935,6 @@
              "name": "Horizontal Stack",
              "description": "The Horizontal Stack card allows you to stack together multiple cards, so they always sit next to each other in the space of one column."
            },
            "humidifier": {
              "name": "Humidifier",
              "description": "The Humidifier card gives control of your humidifier entity. Allowing you to change the humidity and mode of the entity."
            },
            "iframe": {
              "name": "Webpage",
              "description": "The Webpage card allows you to embed your favorite webpage right into Home Assistant."
--- a/src/util/hass-attributes-util.js
+++ b/src/util/hass-attributes-util.js
@@ -37,7 +37,6 @@ hassAttributeUtil.DOMAIN_DEVICE_CLASS = {
    "shutter",
    "window",
  ],
  humidifier: ["dehumidifier", "humidifier"],
  sensor: [
    "battery",
    "humidity",
@@ -90,7 +89,7 @@ hassAttributeUtil.LOGIC_STATE_ATTRIBUTES = hassAttributeUtil.LOGIC_STATE_ATTRIBU
    type: "array",
    options: hassAttributeUtil.DOMAIN_DEVICE_CLASS,
    description: "Device class",
-    domains: ["binary_sensor", "cover", "humidifier", "sensor", "switch"],
+    domains: ["binary_sensor", "cover", "sensor", "switch"],
  },
  hidden: { type: "boolean", description: "Hide from UI" },
  assumed_state: {
@@ -101,7 +100,6 @@ hassAttributeUtil.LOGIC_STATE_ATTRIBUTES = hassAttributeUtil.LOGIC_STATE_ATTRIBU
      "cover",
      "climate",
      "fan",
      "humidifier",
      "group",
      "water_heater",
    ],
--- a/translations/frontend/ca.json
+++ b/translations/frontend/ca.json
@@ -506,11 +506,6 @@
                "clear": "Esborra",
                "show_areas": "Mostra àrees"
            },
            "date-range-picker": {
                "end_date": "Data final",
                "select": "Selecciona",
                "start_date": "Data inici"
            },
            "device-picker": {
                "clear": "Esborra",
                "device": "Dispositiu",
@@ -700,7 +695,6 @@
            "zha_device_info": {
                "buttons": {
                    "add": "Afegeix dispositius a través d'aquest dispositiu",
                    "clusters": "Gestiona clústers",
                    "reconfigure": "Reconfigurar dispositiu",
                    "remove": "Eliminar dispositiu",
                    "zigbee_information": "Signatura Zigbee del dispositiu"
@@ -1564,7 +1558,6 @@
                    }
                },
                "mqtt": {
                    "button": "Configura",
                    "description_listen": "Escolta d'un tòpic",
                    "description_publish": "Publicació d'un paquet",
                    "listening_to": "Escoltant a",
@@ -2042,23 +2035,11 @@
            },
            "history": {
                "period": "Període",
                "ranges": {
                    "last_week": "La setmana passada",
                    "this_week": "Aquesta setmana",
                    "today": "Avui",
                    "yesterday": "Ahir"
                },
                "showing_entries": "Mostrant entrades de"
            },
            "logbook": {
                "entries_not_found": "No s'han trobat entrades al registre.",
                "period": "Període",
                "ranges": {
                    "last_week": "La setmana passada",
                    "this_week": "Aquesta setmana",
                    "today": "Avui",
                    "yesterday": "Ahir"
                },
                "showing_entries": "Mostrant entrades de"
            },
            "lovelace": {
--- a/translations/frontend/da.json
+++ b/translations/frontend/da.json
@@ -506,11 +506,6 @@
                "clear": "Ryd",
                "show_areas": "Vis områder"
            },
            "date-range-picker": {
                "end_date": "Slutdato",
                "select": "Vælg",
                "start_date": "Startdato"
            },
            "device-picker": {
                "clear": "Ryd",
                "device": "Enhed",
@@ -700,7 +695,6 @@
            "zha_device_info": {
                "buttons": {
                    "add": "Tilføj enheder",
                    "clusters": "Administrer klynger",
                    "reconfigure": "Genkonfigurer enhed",
                    "remove": "Fjern enhed",
                    "zigbee_information": "Zigbee-oplysninger"
@@ -1564,7 +1558,6 @@
                    }
                },
                "mqtt": {
                    "button": "Konfigurer",
                    "description_listen": "Lyt til et emne",
                    "description_publish": "Udsend en pakke",
                    "listening_to": "Lytter til",
@@ -2015,23 +2008,11 @@
            },
            "history": {
                "period": "Periode",
                "ranges": {
                    "last_week": "Sidste uge",
                    "this_week": "Denne uge",
                    "today": "I dag",
                    "yesterday": "I går"
                },
                "showing_entries": "Viser poster for"
            },
            "logbook": {
                "entries_not_found": "Der blev ikke fundet nogen logbogsposter.",
                "period": "Periode",
                "ranges": {
                    "last_week": "Sidste uge",
                    "this_week": "Denne uge",
                    "today": "I dag",
                    "yesterday": "I går"
                },
                "showing_entries": "Viser poster for"
            },
            "lovelace": {
--- a/translations/frontend/es.json
+++ b/translations/frontend/es.json
@@ -506,11 +506,6 @@
                "clear": "Limpiar",
                "show_areas": "Mostrar áreas"
            },
            "date-range-picker": {
                "end_date": "Fecha de finalización",
                "select": "Seleccione",
                "start_date": "Fecha de inicio"
            },
            "device-picker": {
                "clear": "Limpiar",
                "device": "Dispositivo",
@@ -700,7 +695,6 @@
            "zha_device_info": {
                "buttons": {
                    "add": "Añadir dispositivos a través de este dispositivo",
                    "clusters": "Administrar clústeres",
                    "reconfigure": "Reconfigurar dispositivo",
                    "remove": "Eliminar dispositivos",
                    "zigbee_information": "Firma del dispositivo Zigbee"
@@ -1564,7 +1558,6 @@
                    }
                },
                "mqtt": {
                    "button": "Configurar",
                    "description_listen": "Escuchar un tema",
                    "description_publish": "Publicar un paquete",
                    "listening_to": "Escuchando",
@@ -2042,23 +2035,11 @@
            },
            "history": {
                "period": "Periodo",
                "ranges": {
                    "last_week": "La semana pasada",
                    "this_week": "Esta semana",
                    "today": "Hoy",
                    "yesterday": "Ayer"
                },
                "showing_entries": "Mostrando entradas del"
            },
            "logbook": {
                "entries_not_found": "No se han encontrado entradas en el registro.",
                "period": "Periodo",
                "ranges": {
                    "last_week": "La semana pasada",
                    "this_week": "Esta semana",
                    "today": "Hoy",
                    "yesterday": "Ayer"
                },
                "showing_entries": "Mostrando entradas del"
            },
            "lovelace": {
--- a/translations/frontend/fr.json
+++ b/translations/frontend/fr.json
@@ -506,11 +506,6 @@
                "clear": "Effacer",
                "show_areas": "Afficher les pièces"
            },
            "date-range-picker": {
                "end_date": "Date de fin",
                "select": "Sélectionner",
                "start_date": "Date de début"
            },
            "device-picker": {
                "clear": "Effacer",
                "device": "Appareil",
@@ -700,7 +695,6 @@
            "zha_device_info": {
                "buttons": {
                    "add": "Ajouter des appareils",
                    "clusters": "Gérer les clusters",
                    "reconfigure": "Reconfigurer l'appareil",
                    "remove": "Supprimer l'appareil",
                    "zigbee_information": "Informations Zigbee"
@@ -1564,7 +1558,6 @@
                    }
                },
                "mqtt": {
                    "button": "Configurer",
                    "description_listen": "Écouter un sujet",
                    "description_publish": "Publier un paquet",
                    "listening_to": "Écouter",
@@ -2042,23 +2035,11 @@
            },
            "history": {
                "period": "Période",
                "ranges": {
                    "last_week": "La semaine dernière",
                    "this_week": "Cette semaine",
                    "today": "Aujourd'hui",
                    "yesterday": "Hier"
                },
                "showing_entries": "Afficher les entrées pour"
            },
            "logbook": {
                "entries_not_found": "Aucune entrée trouvée dans le journal.",
                "period": "Période",
                "ranges": {
                    "last_week": "La semaine dernière",
                    "this_week": "Cette semaine",
                    "today": "Aujourd'hui",
                    "yesterday": "Hier"
                },
                "showing_entries": "Afficher les entrées pour le"
            },
            "lovelace": {
--- a/Show More
+++ b/Show More