change

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

.eslintrc.json

@@ -28,9 +28,7 @@
     "__BUILD__": false,
     "__VERSION__": false,
     "__STATIC_PATH__": false,
-    "Polymer": true,
-    "webkitSpeechRecognition": false,
-    "ResizeObserver": false
+    "Polymer": true
   },
   "env": {
     "browser": true,
@@ -106,5 +104,6 @@
     "lit/attribute-value-entities": 0
   },
   "plugins": ["disable", "import", "lit", "prettier", "@typescript-eslint"],
-  "processor": "disable/disable"
+  "processor": "disable/disable",
+  "ignorePatterns": ["src/resources/lit-virtualizer/*"]
 }

.github/workflows/release.yaml

@@ -6,7 +6,6 @@ on:
       - published
 
 env:
-  WHEELS_TAG: 3.8-alpine3.12
   PYTHON_VERSION: 3.8
   NODE_VERSION: 12.1
 
@@ -64,6 +63,9 @@ jobs:
     strategy:
       matrix:
         arch: ["aarch64", "armhf", "armv7", "amd64", "i386"]
+        tag:
+          - "3.8-alpine3.12"
+          - "3.9-alpine3.13"
     steps:
       - name: Download requirements.txt
         uses: actions/download-artifact@v2
@@ -73,7 +75,7 @@ jobs:
       - name: Build wheels
         uses: home-assistant/wheels@master
         with:
-          tag: ${{ env.WHEELS_TAG }}
+          tag: ${{ matrix.tag }}
           arch: ${{ matrix.arch }}
           wheels-host: ${{ secrets.WHEELS_HOST }}
           wheels-key: ${{ secrets.WHEELS_KEY }}

.gitignore

@@ -1,10 +1,17 @@
+.DS_Store
+.reify-cache
+
+# build
 build
 build-translations/*
+hass_frontend/*
+dist
+
+# yarn
+.yarn
+yarn-error.log
 node_modules/*
 npm-debug.log
-.DS_Store
-hass_frontend/*
-.reify-cache
 
 # Python stuff
 *.py[cod]
@@ -14,11 +21,8 @@ hass_frontend/*
 # venv stuff
 pyvenv.cfg
 pip-selfcheck.json
-venv
+venv/*
 .venv
-lib
-bin
-dist
 
 # vscode
 .vscode/*
@@ -31,9 +35,8 @@ src/cast/dev_const.ts
 
 # Secrets
 .lokalise_token
-yarn-error.log
 
-#asdf
+# asdf
 .tool-versions
 
 # Home Assistant config

.mocharc.cjs

@@ -0,0 +1,4 @@
+module.exports = {
+  require: "test-mocha/testconf.js",
+  timeout: 10000,
+};

build-scripts/bundle.js

@@ -52,6 +52,7 @@ module.exports.terserOptions = (latestBuild) => ({
 
 module.exports.babelOptions = ({ latestBuild }) => ({
   babelrc: false,
+  compact: false,
   presets: [
     !latestBuild && [
       "@babel/preset-env",
@@ -79,12 +80,6 @@ module.exports.babelOptions = ({ latestBuild }) => ({
   ].filter(Boolean),
 });
 
-// Are already ES5, cause warnings when babelified.
-module.exports.babelExclude = () => [
-  require.resolve("@mdi/js/mdi.js"),
-  require.resolve("hls.js"),
-];
-
 const outputPath = (outputRoot, latestBuild) =>
   path.resolve(outputRoot, latestBuild ? "frontend_latest" : "frontend_es5");
 

build-scripts/rollup.js

@@ -52,16 +52,11 @@ const createRollupConfig = ({
         browser: true,
         rootDir: paths.polymer_dir,
       }),
-      commonjs({
-        namedExports: {
-          "js-yaml": ["safeDump", "safeLoad"],
-        },
-      }),
+      commonjs(),
       json(),
       babel({
         ...bundle.babelOptions({ latestBuild }),
         extensions,
-        exclude: bundle.babelExclude(),
         babelHelpers: isWDS ? "inline" : "bundled",
       }),
       string({

build-scripts/webpack.js

@@ -47,7 +47,6 @@ const createWebpackConfig = ({
       rules: [
         {
           test: /\.m?js$|\.ts$/,
-          exclude: bundle.babelExclude(),
           use: {
             loader: "babel-loader",
             options: bundle.babelOptions({ latestBuild }),
@@ -116,8 +115,9 @@ const createWebpackConfig = ({
       // We need to change the import of the polyfill for EventTarget, so we replace the polyfill file with our customized one
       new webpack.NormalModuleReplacementPlugin(
         new RegExp(
-          require.resolve(
-            "@lit-labs/virtualizer/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js"
+          path.resolve(
+            paths.polymer_dir,
+            "src/resources/lit-virtualizer/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js"
           )
         ),
         path.resolve(paths.polymer_dir, "src/resources/EventTarget-ponyfill.js")

demo/src/ha-demo.ts

@@ -70,7 +70,7 @@ class HaDemo extends HomeAssistantAppEl {
         }
 
         e.preventDefault();
-        navigate(this, href);
+        navigate(href);
       },
       { capture: true }
     );

gallery/src/components/demo-card.js

@@ -1,7 +1,7 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { safeLoad } from "js-yaml";
+import { load } from "js-yaml";
 import { createCardElement } from "../../../src/panels/lovelace/create-element/create-card-element";
 
 class DemoCard extends PolymerElement {
@@ -80,7 +80,7 @@ class DemoCard extends PolymerElement {
       card.removeChild(card.lastChild);
     }
 
-    const el = this._createCardElement(safeLoad(config.config)[0]);
+    const el = this._createCardElement(load(config.config)[0]);
     card.appendChild(el);
     this._getSize(el);
   }

gallery/src/demos/demo-automation-describe-action.ts

@@ -1,4 +1,4 @@
-import { safeDump } from "js-yaml";
+import { dump } from "js-yaml";
 import { html, css, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../src/components/ha-card";
@@ -56,7 +56,7 @@ export class DemoAutomationDescribeAction extends LitElement {
           (conf) => html`
             <div class="action">
               <span>${describeAction(this.hass, conf as any)}</span>
-              <pre>${safeDump(conf)}</pre>
+              <pre>${dump(conf)}</pre>
             </div>
           `
         )}

gallery/src/demos/demo-automation-describe-condition.ts

@@ -1,4 +1,4 @@
-import { safeDump } from "js-yaml";
+import { dump } from "js-yaml";
 import { html, css, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import "../../../src/components/ha-card";
@@ -26,7 +26,7 @@ export class DemoAutomationDescribeCondition extends LitElement {
           (conf) => html`
             <div class="condition">
               <span>${describeCondition(conf as any)}</span>
-              <pre>${safeDump(conf)}</pre>
+              <pre>${dump(conf)}</pre>
             </div>
           `
         )}

gallery/src/demos/demo-automation-describe-trigger.ts

@@ -1,4 +1,4 @@
-import { safeDump } from "js-yaml";
+import { dump } from "js-yaml";
 import { html, css, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import "../../../src/components/ha-card";
@@ -29,7 +29,7 @@ export class DemoAutomationDescribeTrigger extends LitElement {
           (conf) => html`
             <div class="trigger">
               <span>${describeTrigger(conf as any)}</span>
-              <pre>${safeDump(conf)}</pre>
+              <pre>${dump(conf)}</pre>
             </div>
           `
         )}

gallery/src/demos/demo-integration-card.ts

@@ -28,10 +28,11 @@ const createConfigEntry = (
   title,
   source: "zeroconf",
   state: "loaded",
-  connection_class: "local_push",
   supports_options: false,
   supports_unload: true,
   disabled_by: null,
+  pref_disable_new_entities: false,
+  pref_disable_polling: false,
   reason: null,
   ...override,
 });
@@ -64,6 +65,9 @@ const configPanelEntry = createConfigEntry("Config Panel", {
 const optionsFlowEntry = createConfigEntry("Options Flow", {
   supports_options: true,
 });
+const disabledPollingEntry = createConfigEntry("Disabled Polling", {
+  pref_disable_polling: true,
+});
 const setupErrorEntry = createConfigEntry("Setup Error", {
   state: "setup_error",
 });
@@ -136,6 +140,7 @@ const configEntries: Array<{
   { items: [loadedEntry] },
   { items: [configPanelEntry] },
   { items: [optionsFlowEntry] },
+  { items: [disabledPollingEntry] },
   { items: [nameAsDomainEntry] },
   { items: [longNameEntry] },
   { items: [longNonBreakingNameEntry] },

hassio/src/addon-store/hassio-addon-repository.ts

@@ -120,7 +120,7 @@ class HassioAddonRepositoryEl extends LitElement {
   }
 
   private _addonTapped(ev) {
-    navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}`);
+    navigate(`/hassio/addon/${ev.currentTarget.addon.slug}`);
   }
 
   static get styles(): CSSResultGroup {

hassio/src/addon-store/hassio-addon-store.ts

@@ -138,7 +138,7 @@ class HassioAddonStore extends LitElement {
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
     const repositoryUrl = extractSearchParam("repository_url");
-    navigate(this, "/hassio/store", true);
+    navigate("/hassio/store", { replace: true });
     if (repositoryUrl) {
       this._manageRepositories(repositoryUrl);
     }

hassio/src/addon-view/config/hassio-addon-config.ts

@@ -3,6 +3,7 @@ import { ActionDetail } from "@material/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
 import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea";
+import { DEFAULT_SCHEMA, Type } from "js-yaml";
 import {
   css,
   CSSResultGroup,
@@ -11,7 +12,7 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
@@ -27,6 +28,7 @@ import {
   HassioAddonDetails,
   HassioAddonSetOptionParams,
   setHassioAddonOption,
+  validateHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
@@ -38,6 +40,13 @@ import { hassioStyle } from "../../resources/hassio-style";
 
 const SUPPORTED_UI_TYPES = ["string", "select", "boolean", "integer", "float"];
 
+const ADDON_YAML_SCHEMA = DEFAULT_SCHEMA.extend([
+  new Type("!secret", {
+    kind: "scalar",
+    construct: (data) => `!secret ${data}`,
+  }),
+]);
+
 @customElement("hassio-addon-config")
 class HassioAddonConfig extends LitElement {
   @property({ attribute: false }) public addon!: HassioAddonDetails;
@@ -125,6 +134,7 @@ class HassioAddonConfig extends LitElement {
               ></ha-form>`
             : html` <ha-yaml-editor
                 @value-changed=${this._configChanged}
+                .schema=${ADDON_YAML_SCHEMA}
               ></ha-yaml-editor>`}
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
           ${!this._yamlMode ||
@@ -269,6 +279,14 @@ class HassioAddonConfig extends LitElement {
     this._error = undefined;
 
     try {
+      const validation = await validateHassioAddonOption(
+        this.hass,
+        this.addon.slug,
+        this._editor?.value
+      );
+      if (!validation.valid) {
+        throw Error(validation.message);
+      }
       await setHassioAddonOption(this.hass, this.addon.slug, {
         options: this._yamlMode ? this._editor?.value : this._options,
       });

hassio/src/addon-view/hassio-addon-dashboard.ts

@@ -175,7 +175,7 @@ class HassioAddonDashboard extends LitElement {
         if (!validAddon) {
           this._error = this.supervisor.localize("my.error_addon_not_found");
         } else {
-          navigate(this, `/hassio/addon/${requestedAddon}`, true);
+          navigate(`/hassio/addon/${requestedAddon}`, { replace: true });
         }
       }
     }

hassio/src/addon-view/info/hassio-addon-info.ts

@@ -761,7 +761,7 @@ class HassioAddonInfo extends LitElement {
   }
 
   private _openIngress(): void {
-    navigate(this, `/hassio/ingress/${this.addon.slug}`);
+    navigate(`/hassio/ingress/${this.addon.slug}`);
   }
 
   private get _computeShowIngressUI(): boolean {
@@ -1051,7 +1051,7 @@ class HassioAddonInfo extends LitElement {
   }
 
   private _openConfiguration(): void {
-    navigate(this, `/hassio/addon/${this.addon.slug}/config`);
+    navigate(`/hassio/addon/${this.addon.slug}/config`);
   }
 
   private async _uninstallClicked(ev: CustomEvent): Promise<void> {

hassio/src/components/supervisor-formfield-label.ts

@@ -0,0 +1,54 @@
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import "../../../src/components/ha-svg-icon";
+
+@customElement("supervisor-formfield-label")
+class SupervisorFormfieldLabel extends LitElement {
+  @property({ type: String }) public label!: string;
+
+  @property({ type: String }) public imageUrl?: string;
+
+  @property({ type: String }) public iconPath?: string;
+
+  @property({ type: String }) public version?: string;
+
+  protected render(): TemplateResult {
+    return html`
+      ${this.imageUrl
+        ? html`<img loading="lazy" .src=${this.imageUrl} class="icon" />`
+        : this.iconPath
+        ? html`<ha-svg-icon .path=${this.iconPath} class="icon"></ha-svg-icon>`
+        : ""}
+      <span class="label">${this.label}</span>
+      ${this.version
+        ? html`<span class="version">(${this.version})</span>`
+        : ""}
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      :host {
+        display: flex;
+        align-items: center;
+      }
+      .label {
+        margin-right: 4px;
+      }
+      .version {
+        color: var(--secondary-text-color);
+      }
+      .icon {
+        max-height: 22px;
+        max-width: 22px;
+        margin-right: 8px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "supervisor-formfield-label": SupervisorFormfieldLabel;
+  }
+}

hassio/src/components/supervisor-metric.ts

@@ -64,6 +64,7 @@ class SupervisorMetric extends LitElement {
       .value {
         width: 48px;
         padding-right: 4px;
+        flex-shrink: 0;
       }
     `;
   }

hassio/src/components/supervisor-snapshot-content.ts

@@ -0,0 +1,450 @@
+import { mdiFolder, mdiHomeAssistant, mdiPuzzle } from "@mdi/js";
+import { PaperInputElement } from "@polymer/paper-input/paper-input";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators";
+import { atLeastVersion } from "../../../src/common/config/version";
+import { formatDate } from "../../../src/common/datetime/format_date";
+import { formatDateTime } from "../../../src/common/datetime/format_date_time";
+import { LocalizeFunc } from "../../../src/common/translations/localize";
+import "../../../src/components/ha-checkbox";
+import "../../../src/components/ha-formfield";
+import "../../../src/components/ha-radio";
+import type { HaRadio } from "../../../src/components/ha-radio";
+import {
+  HassioFullSnapshotCreateParams,
+  HassioPartialSnapshotCreateParams,
+  HassioSnapshotDetail,
+} from "../../../src/data/hassio/snapshot";
+import { Supervisor } from "../../../src/data/supervisor/supervisor";
+import { PolymerChangedEvent } from "../../../src/polymer-types";
+import { HomeAssistant } from "../../../src/types";
+import "./supervisor-formfield-label";
+
+interface CheckboxItem {
+  slug: string;
+  checked: boolean;
+  name: string;
+}
+
+interface AddonCheckboxItem extends CheckboxItem {
+  version: string;
+}
+
+const _computeFolders = (folders): CheckboxItem[] => {
+  const list: CheckboxItem[] = [];
+  if (folders.includes("homeassistant")) {
+    list.push({
+      slug: "homeassistant",
+      name: "Home Assistant configuration",
+      checked: false,
+    });
+  }
+  if (folders.includes("ssl")) {
+    list.push({ slug: "ssl", name: "SSL", checked: false });
+  }
+  if (folders.includes("share")) {
+    list.push({ slug: "share", name: "Share", checked: false });
+  }
+  if (folders.includes("media")) {
+    list.push({ slug: "media", name: "Media", checked: false });
+  }
+  if (folders.includes("addons/local")) {
+    list.push({ slug: "addons/local", name: "Local add-ons", checked: false });
+  }
+  return list.sort((a, b) => (a.name > b.name ? 1 : -1));
+};
+
+const _computeAddons = (addons): AddonCheckboxItem[] =>
+  addons
+    .map((addon) => ({
+      slug: addon.slug,
+      name: addon.name,
+      version: addon.version,
+      checked: false,
+    }))
+    .sort((a, b) => (a.name > b.name ? 1 : -1));
+
+@customElement("supervisor-snapshot-content")
+export class SupervisorSnapshotContent extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public localize?: LocalizeFunc;
+
+  @property({ attribute: false }) public supervisor?: Supervisor;
+
+  @property({ attribute: false }) public snapshot?: HassioSnapshotDetail;
+
+  @property() public snapshotType: HassioSnapshotDetail["type"] = "full";
+
+  @property({ attribute: false }) public folders?: CheckboxItem[];
+
+  @property({ attribute: false }) public addons?: AddonCheckboxItem[];
+
+  @property({ type: Boolean }) public homeAssistant = false;
+
+  @property({ type: Boolean }) public snapshotHasPassword = false;
+
+  @property({ type: Boolean }) public onboarding = false;
+
+  @property() public snapshotName = "";
+
+  @property() public snapshotPassword = "";
+
+  @property() public confirmSnapshotPassword = "";
+
+  public willUpdate(changedProps) {
+    super.willUpdate(changedProps);
+    if (!this.hasUpdated) {
+      this.folders = _computeFolders(
+        this.snapshot
+          ? this.snapshot.folders
+          : ["homeassistant", "ssl", "share", "media", "addons/local"]
+      );
+      this.addons = _computeAddons(
+        this.snapshot
+          ? this.snapshot.addons
+          : this.supervisor?.supervisor.addons
+      );
+      this.snapshotType = this.snapshot?.type || "full";
+      this.snapshotName = this.snapshot?.name || "";
+      this.snapshotHasPassword = this.snapshot?.protected || false;
+    }
+  }
+
+  private _localize = (string: string) =>
+    this.supervisor?.localize(`snapshot.${string}`) ||
+    this.localize!(`ui.panel.page-onboarding.restore.${string}`);
+
+  protected render(): TemplateResult {
+    if (!this.onboarding && !this.supervisor) {
+      return html``;
+    }
+    const foldersSection =
+      this.snapshotType === "partial" ? this._getSection("folders") : undefined;
+    const addonsSection =
+      this.snapshotType === "partial" ? this._getSection("addons") : undefined;
+
+    return html`
+      ${this.snapshot
+        ? html`<div class="details">
+            ${this.snapshot.type === "full"
+              ? this._localize("full_snapshot")
+              : this._localize("partial_snapshot")}
+            (${Math.ceil(this.snapshot.size * 10) / 10 + " MB"})<br />
+            ${this.hass
+              ? formatDateTime(new Date(this.snapshot.date), this.hass.locale)
+              : this.snapshot.date}
+          </div>`
+        : html`<paper-input
+            name="snapshotName"
+            .label=${this.supervisor?.localize("snapshot.name") || "Name"}
+            .value=${this.snapshotName}
+            @value-changed=${this._handleTextValueChanged}
+          >
+          </paper-input>`}
+      ${!this.snapshot || this.snapshot.type === "full"
+        ? html`<div class="sub-header">
+              ${!this.snapshot
+                ? this._localize("type")
+                : this._localize("select_type")}
+            </div>
+            <div class="snapshot-types">
+              <ha-formfield .label=${this._localize("full_snapshot")}>
+                <ha-radio
+                  @change=${this._handleRadioValueChanged}
+                  value="full"
+                  name="snapshotType"
+                  .checked=${this.snapshotType === "full"}
+                >
+                </ha-radio>
+              </ha-formfield>
+              <ha-formfield .label=${this._localize("partial_snapshot")}>
+                <ha-radio
+                  @change=${this._handleRadioValueChanged}
+                  value="partial"
+                  name="snapshotType"
+                  .checked=${this.snapshotType === "partial"}
+                >
+                </ha-radio>
+              </ha-formfield>
+            </div>`
+        : ""}
+      ${this.snapshotType === "partial"
+        ? html`<div class="partial-picker">
+            ${this.snapshot && this.snapshot.homeassistant
+              ? html`
+                  <ha-formfield
+                    .label=${html`<supervisor-formfield-label
+                      label="Home Assistant"
+                      .iconPath=${mdiHomeAssistant}
+                      .version=${this.snapshot.homeassistant}
+                    >
+                    </supervisor-formfield-label>`}
+                  >
+                    <ha-checkbox
+                      .checked=${this.homeAssistant}
+                      @click=${() => {
+                        this.homeAssistant = !this.homeAssistant;
+                      }}
+                    >
+                    </ha-checkbox>
+                  </ha-formfield>
+                `
+              : ""}
+            ${foldersSection?.templates.length
+              ? html`
+                  <ha-formfield
+                    .label=${html`<supervisor-formfield-label
+                      .label=${this._localize("folders")}
+                      .iconPath=${mdiFolder}
+                    >
+                    </supervisor-formfield-label>`}
+                  >
+                    <ha-checkbox
+                      @change=${this._toggleSection}
+                      .checked=${foldersSection.checked}
+                      .indeterminate=${foldersSection.indeterminate}
+                      .section=${"folders"}
+                    >
+                    </ha-checkbox>
+                  </ha-formfield>
+                  <div class="section-content">${foldersSection.templates}</div>
+                `
+              : ""}
+            ${addonsSection?.templates.length
+              ? html`
+                  <ha-formfield
+                    .label=${html`<supervisor-formfield-label
+                      .label=${this._localize("addons")}
+                      .iconPath=${mdiPuzzle}
+                    >
+                    </supervisor-formfield-label>`}
+                  >
+                    <ha-checkbox
+                      @change=${this._toggleSection}
+                      .checked=${addonsSection.checked}
+                      .indeterminate=${addonsSection.indeterminate}
+                      .section=${"addons"}
+                    >
+                    </ha-checkbox>
+                  </ha-formfield>
+                  <div class="section-content">${addonsSection.templates}</div>
+                `
+              : ""}
+          </div> `
+        : ""}
+      ${this.snapshotType === "partial" &&
+      (!this.snapshot || this.snapshotHasPassword)
+        ? html`<hr />`
+        : ""}
+      ${!this.snapshot
+        ? html`<ha-formfield
+            class="password"
+            .label=${this._localize("password_protection")}
+          >
+            <ha-checkbox
+              .checked=${this.snapshotHasPassword}
+              @change=${this._toggleHasPassword}
+            >
+            </ha-checkbox>
+          </ha-formfield>`
+        : ""}
+      ${this.snapshotHasPassword
+        ? html`
+            <paper-input
+              .label=${this._localize("password")}
+              type="password"
+              name="snapshotPassword"
+              .value=${this.snapshotPassword}
+              @value-changed=${this._handleTextValueChanged}
+            >
+            </paper-input>
+            ${!this.snapshot
+              ? html` <paper-input
+                  .label=${this.supervisor?.localize("confirm_password")}
+                  type="password"
+                  name="confirmSnapshotPassword"
+                  .value=${this.confirmSnapshotPassword}
+                  @value-changed=${this._handleTextValueChanged}
+                >
+                </paper-input>`
+              : ""}
+          `
+        : ""}
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    return css`
+      .partial-picker ha-formfield {
+        display: block;
+      }
+      .partial-picker ha-checkbox {
+        --mdc-checkbox-touch-target-size: 32px;
+      }
+      .partial-picker {
+        display: block;
+        margin: 0px -6px;
+      }
+      supervisor-formfield-label {
+        display: inline-flex;
+        align-items: center;
+      }
+      hr {
+        border-color: var(--divider-color);
+        border-bottom: none;
+        margin: 16px 0;
+      }
+      .details {
+        color: var(--secondary-text-color);
+      }
+      .section-content {
+        display: flex;
+        flex-direction: column;
+        margin-left: 30px;
+      }
+      ha-formfield.password {
+        display: block;
+        margin: 0 -14px -16px;
+      }
+      .snapshot-types {
+        display: flex;
+        margin-left: -13px;
+      }
+      .sub-header {
+        margin-top: 8px;
+      }
+    `;
+  }
+
+  public snapshotDetails():
+    | HassioPartialSnapshotCreateParams
+    | HassioFullSnapshotCreateParams {
+    const data: any = {};
+
+    if (!this.snapshot) {
+      data.name = this.snapshotName || formatDate(new Date(), this.hass.locale);
+    }
+
+    if (this.snapshotHasPassword) {
+      data.password = this.snapshotPassword;
+      if (!this.snapshot) {
+        data.confirm_password = this.confirmSnapshotPassword;
+      }
+    }
+
+    if (this.snapshotType === "full") {
+      return data;
+    }
+
+    const addons = this.addons
+      ?.filter((addon) => addon.checked)
+      .map((addon) => addon.slug);
+    const folders = this.folders
+      ?.filter((folder) => folder.checked)
+      .map((folder) => folder.slug);
+
+    if (addons?.length) {
+      data.addons = addons;
+    }
+    if (folders?.length) {
+      data.folders = folders;
+    }
+    if (this.homeAssistant) {
+      data.homeassistant = this.homeAssistant;
+    }
+
+    return data;
+  }
+
+  private _getSection(section: string) {
+    const templates: TemplateResult[] = [];
+    const addons =
+      section === "addons"
+        ? new Map(
+            this.supervisor?.addon.addons.map((item) => [item.slug, item])
+          )
+        : undefined;
+    let checkedItems = 0;
+    this[section].forEach((item) => {
+      templates.push(html`<ha-formfield
+        .label=${html`<supervisor-formfield-label
+          .label=${item.name}
+          .iconPath=${section === "addons" ? mdiPuzzle : mdiFolder}
+          .imageUrl=${section === "addons" &&
+          !this.onboarding &&
+          atLeastVersion(this.hass.config.version, 0, 105) &&
+          addons?.get(item.slug)?.icon
+            ? `/api/hassio/addons/${item.slug}/icon`
+            : undefined}
+          .version=${item.version}
+        >
+        </supervisor-formfield-label>`}
+      >
+        <ha-checkbox
+          .item=${item}
+          .checked=${item.checked}
+          .section=${section}
+          @change=${this._updateSectionEntry}
+        >
+        </ha-checkbox>
+      </ha-formfield>`);
+
+      if (item.checked) {
+        checkedItems++;
+      }
+    });
+
+    const checked = checkedItems === this[section].length;
+
+    return {
+      templates,
+      checked,
+      indeterminate: !checked && checkedItems !== 0,
+    };
+  }
+
+  private _handleRadioValueChanged(ev: CustomEvent) {
+    const input = ev.currentTarget as HaRadio;
+    this[input.name] = input.value;
+  }
+
+  private _handleTextValueChanged(ev: PolymerChangedEvent<string>) {
+    const input = ev.currentTarget as PaperInputElement;
+    this[input.name!] = ev.detail.value;
+  }
+
+  private _toggleHasPassword(): void {
+    this.snapshotHasPassword = !this.snapshotHasPassword;
+  }
+
+  private _toggleSection(ev): void {
+    const section = ev.currentTarget.section;
+
+    this[section] = (section === "addons" ? this.addons : this.folders)!.map(
+      (item) => ({
+        ...item,
+        checked: ev.currentTarget.checked,
+      })
+    );
+  }
+
+  private _updateSectionEntry(ev): void {
+    const item = ev.currentTarget.item;
+    const section = ev.currentTarget.section;
+    this[section] = this[section].map((entry) =>
+      entry.slug === item.slug
+        ? {
+            ...entry,
+            checked: ev.currentTarget.checked,
+          }
+        : entry
+    );
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "supervisor-snapshot-content": SupervisorSnapshotContent;
+  }
+}

hassio/src/dashboard/hassio-addons.ts

@@ -96,11 +96,11 @@ class HassioAddons extends LitElement {
   }
 
   private _addonTapped(ev: any): void {
-    navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}/info`);
+    navigate(`/hassio/addon/${ev.currentTarget.addon.slug}/info`);
   }
 
   private _openStore(): void {
-    navigate(this, "/hassio/store");
+    navigate("/hassio/store");
   }
 }
 

hassio/src/dashboard/hassio-update.ts

@@ -220,10 +220,29 @@ export class HassioUpdate extends LitElement {
   }
 
   private async _updateCore(): Promise<void> {
-    await updateCore(this.hass);
+    try {
+      await updateCore(this.hass);
+    } catch (err) {
+      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
+        showAlertDialog(this, {
+          title: this.supervisor.localize(
+            "common.failed_to_update_name",
+            "name",
+            "Home Assistant Core"
+          ),
+          text: extractApiErrorMessage(err),
+        });
+        return;
+      }
+    }
+
     fireEvent(this, "supervisor-collection-refresh", {
       collection: "core",
     });
+    fireEvent(this, "supervisor-applying-update", {
+      name: "Home Assistant Core",
+      version: this.supervisor.core.version_latest,
+    });
   }
 
   static get styles(): CSSResultGroup {

hassio/src/dialogs/hardware/dialog-hassio-hardware.ts

@@ -0,0 +1,194 @@
+import { mdiClose } from "@mdi/js";
+import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/common/search/search-input";
+import { compare } from "../../../../src/common/string/compare";
+import "../../../../src/components/ha-dialog";
+import "../../../../src/components/ha-expansion-panel";
+import { HassioHardwareInfo } from "../../../../src/data/hassio/hardware";
+import { dump } from "../../../../src/resources/js-yaml-dump";
+import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
+import { HomeAssistant } from "../../../../src/types";
+import { HassioHardwareDialogParams } from "./show-dialog-hassio-hardware";
+
+const _filterDevices = memoizeOne(
+  (showAdvanced: boolean, hardware: HassioHardwareInfo, filter: string) =>
+    hardware.devices
+      .filter(
+        (device) =>
+          (showAdvanced ||
+            ["tty", "gpio", "input"].includes(device.subsystem)) &&
+          (device.by_id?.toLowerCase().includes(filter) ||
+            device.name.toLowerCase().includes(filter) ||
+            device.dev_path.toLocaleLowerCase().includes(filter) ||
+            JSON.stringify(device.attributes)
+              .toLocaleLowerCase()
+              .includes(filter))
+      )
+      .sort((a, b) => compare(a.name, b.name))
+);
+
+@customElement("dialog-hassio-hardware")
+class HassioHardwareDialog extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _dialogParams?: HassioHardwareDialogParams;
+
+  @state() private _filter?: string;
+
+  public showDialog(params: HassioHardwareDialogParams) {
+    this._dialogParams = params;
+  }
+
+  public closeDialog() {
+    this._dialogParams = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
+  }
+
+  protected render(): TemplateResult {
+    if (!this._dialogParams) {
+      return html``;
+    }
+
+    const devices = _filterDevices(
+      this.hass.userData?.showAdvanced || false,
+      this._dialogParams.hardware,
+      (this._filter || "").toLowerCase()
+    );
+
+    return html`
+      <ha-dialog
+        open
+        scrimClickAction
+        hideActions
+        @closed=${this.closeDialog}
+        .heading=${true}
+      >
+        <div class="header" slot="heading">
+          <h2>
+            ${this._dialogParams.supervisor.localize("dialog.hardware.title")}
+          </h2>
+          <mwc-icon-button dialogAction="close">
+            <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+          </mwc-icon-button>
+          <search-input
+            autofocus
+            no-label-float
+            .filter=${this._filter}
+            @value-changed=${this._handleSearchChange}
+            .label=${this._dialogParams.supervisor.localize(
+              "dialog.hardware.search"
+            )}
+          >
+          </search-input>
+        </div>
+
+        ${devices.map(
+          (device) =>
+            html`<ha-expansion-panel
+              .header=${device.name}
+              .secondary=${device.by_id || undefined}
+              outlined
+            >
+              <div class="device-property">
+                <span>
+                  ${this._dialogParams!.supervisor.localize(
+                    "dialog.hardware.subsystem"
+                  )}:
+                </span>
+                <span>${device.subsystem}</span>
+              </div>
+              <div class="device-property">
+                <span>
+                  ${this._dialogParams!.supervisor.localize(
+                    "dialog.hardware.device_path"
+                  )}:
+                </span>
+                <code>${device.dev_path}</code>
+              </div>
+              ${device.by_id
+                ? html` <div class="device-property">
+                    <span>
+                      ${this._dialogParams!.supervisor.localize(
+                        "dialog.hardware.id"
+                      )}:
+                    </span>
+                    <code>${device.by_id}</code>
+                  </div>`
+                : ""}
+              <div class="attributes">
+                <span>
+                  ${this._dialogParams!.supervisor.localize(
+                    "dialog.hardware.attributes"
+                  )}:
+                </span>
+                <pre>${dump(device.attributes, { indent: 2 })}</pre>
+              </div>
+            </ha-expansion-panel>`
+        )}
+      </ha-dialog>
+    `;
+  }
+
+  private _handleSearchChange(ev: CustomEvent) {
+    this._filter = ev.detail.value;
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      haStyleDialog,
+      css`
+        mwc-icon-button {
+          position: absolute;
+          right: 16px;
+          top: 10px;
+          text-decoration: none;
+          color: var(--primary-text-color);
+        }
+        h2 {
+          margin: 18px 42px 0 18px;
+          color: var(--primary-text-color);
+        }
+
+        ha-expansion-panel {
+          margin: 4px 0;
+        }
+        pre,
+        code {
+          background-color: var(--markdown-code-background-color, none);
+          border-radius: 3px;
+        }
+        pre {
+          padding: 16px;
+          overflow: auto;
+          line-height: 1.45;
+          font-family: var(--code-font-family, monospace);
+        }
+        code {
+          font-size: 85%;
+          padding: 0.2em 0.4em;
+        }
+        search-input {
+          margin: 0 16px;
+          display: block;
+        }
+        .device-property {
+          display: flex;
+          justify-content: space-between;
+        }
+        .attributes {
+          margin-top: 12px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-hassio-hardware": HassioHardwareDialog;
+  }
+}

hassio/src/dialogs/hardware/show-dialog-hassio-hardware.ts

@@ -0,0 +1,19 @@
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { HassioHardwareInfo } from "../../../../src/data/hassio/hardware";
+import { Supervisor } from "../../../../src/data/supervisor/supervisor";
+
+export interface HassioHardwareDialogParams {
+  supervisor: Supervisor;
+  hardware: HassioHardwareInfo;
+}
+
+export const showHassioHardwareDialog = (
+  element: HTMLElement,
+  dialogParams: HassioHardwareDialogParams
+): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-hassio-hardware",
+    dialogImport: () => import("./dialog-hassio-hardware"),
+    dialogParams,
+  });
+};

hassio/src/dialogs/registries/dialog-hassio-registries.ts

@@ -45,7 +45,7 @@ class HassioRegistriesDialog extends LitElement {
     return html`
       <ha-dialog
         .open=${this._opened}
-        @closing=${this.closeDialog}
+        @closed=${this.closeDialog}
         scrimClickAction
         escapeKeyAction
         .heading=${createCloseHeading(
@@ -244,9 +244,6 @@ class HassioRegistriesDialog extends LitElement {
         mwc-list-item span[slot="secondary"] {
           color: var(--secondary-text-color);
         }
-        ha-paper-dropdown-menu {
-          display: block;
-        }
       `,
     ];
   }

hassio/src/dialogs/repositories/dialog-hassio-repositories.ts

@@ -67,7 +67,7 @@ class HassioRepositoriesDialog extends LitElement {
     return html`
       <ha-dialog
         .open=${this._opened}
-        @closing=${this.closeDialog}
+        @closed=${this.closeDialog}
         scrimClickAction
         escapeKeyAction
         .heading=${createCloseHeading(
@@ -150,9 +150,6 @@ class HassioRepositoriesDialog extends LitElement {
         mwc-button {
           margin-left: 8px;
         }
-        ha-paper-dropdown-menu {
-          display: block;
-        }
         ha-circular-progress {
           display: block;
           margin: 32px;

hassio/src/dialogs/snapshot/dialog-hassio-create-snapshot.ts

@@ -1,91 +1,43 @@
 import "@material/mwc-button";
-import "@polymer/paper-input/paper-input";
-import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { formatDate } from "../../../../src/common/datetime/format_date";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
-import { compare } from "../../../../src/common/string/compare";
 import "../../../../src/components/buttons/ha-progress-button";
-import "../../../../src/components/ha-checkbox";
-import type { HaCheckbox } from "../../../../src/components/ha-checkbox";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
-import "../../../../src/components/ha-formfield";
-import "../../../../src/components/ha-radio";
-import type { HaRadio } from "../../../../src/components/ha-radio";
-import "../../../../src/components/ha-settings-row";
 import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import {
   createHassioFullSnapshot,
   createHassioPartialSnapshot,
-  HassioFullSnapshotCreateParams,
-  HassioPartialSnapshotCreateParams,
-  HassioSnapshot,
 } from "../../../../src/data/hassio/snapshot";
 import { showAlertDialog } from "../../../../src/dialogs/generic/show-dialog-box";
-import { PolymerChangedEvent } from "../../../../src/polymer-types";
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
+import "../../components/supervisor-snapshot-content";
+import type { SupervisorSnapshotContent } from "../../components/supervisor-snapshot-content";
 import { HassioCreateSnapshotDialogParams } from "./show-dialog-hassio-create-snapshot";
 
-interface CheckboxItem {
-  slug: string;
-  checked: boolean;
-  name?: string;
-  version?: string;
-}
-
-const folderList = () => [
-  {
-    slug: "homeassistant",
-    checked: true,
-  },
-  { slug: "ssl", checked: true },
-  { slug: "share", checked: true },
-  { slug: "media", checked: true },
-  { slug: "addons/local", checked: true },
-];
-
 @customElement("dialog-hassio-create-snapshot")
 class HassioCreateSnapshotDialog extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @state() private _snapshotName = "";
-
-  @state() private _snapshotPassword = "";
-
-  @state() private _snapshotHasPassword = false;
-
-  @state() private _snapshotType: HassioSnapshot["type"] = "full";
-
   @state() private _dialogParams?: HassioCreateSnapshotDialogParams;
 
-  @state() private _addonList: CheckboxItem[] = [];
+  @state() private _error?: string;
 
-  @state() private _folderList: CheckboxItem[] = folderList();
+  @state() private _creatingSnapshot = false;
 
-  @state() private _error = "";
+  @query("supervisor-snapshot-content")
+  private _snapshotContent!: SupervisorSnapshotContent;
 
   public showDialog(params: HassioCreateSnapshotDialogParams) {
     this._dialogParams = params;
-    this._addonList = this._dialogParams.supervisor.supervisor.addons
-      .map((addon) => ({
-        slug: addon.slug,
-        name: addon.name,
-        version: addon.version,
-        checked: true,
-      }))
-      .sort((a, b) => compare(a.name, b.name));
-    this._snapshotType = "full";
-    this._error = "";
-    this._folderList = folderList();
-    this._snapshotHasPassword = false;
-    this._snapshotPassword = "";
-    this._snapshotName = "";
+    this._creatingSnapshot = false;
   }
 
   public closeDialog() {
     this._dialogParams = undefined;
+    this._creatingSnapshot = false;
+    this._error = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -96,179 +48,36 @@ class HassioCreateSnapshotDialog extends LitElement {
     return html`
       <ha-dialog
         open
-        @closing=${this.closeDialog}
+        scrimClickAction
+        @closed=${this.closeDialog}
         .heading=${createCloseHeading(
           this.hass,
           this._dialogParams.supervisor.localize("snapshot.create_snapshot")
         )}
       >
-          <paper-input
-            name="snapshotName"
-            .label=${this._dialogParams.supervisor.localize("snapshot.name")}
-            .value=${this._snapshotName}
-            @value-changed=${this._handleTextValueChanged}
-          >
-          </paper-input>
-          <div class="snapshot-types">
-            <div>
-              ${this._dialogParams.supervisor.localize("snapshot.type")}:
-            </div>
-            <ha-formfield
-              .label=${this._dialogParams.supervisor.localize(
-                "snapshot.full_snapshot"
-              )}
+        ${this._creatingSnapshot
+          ? html` <ha-circular-progress active></ha-circular-progress>`
+          : html`<supervisor-snapshot-content
+              .hass=${this.hass}
+              .supervisor=${this._dialogParams.supervisor}
             >
-              <ha-radio
-                @change=${this._handleRadioValueChanged}
-                value="full"
-                name="snapshotType"
-                .checked=${this._snapshotType === "full"}
-              >
-              </ha-radio>
-            </ha-formfield>
-            <ha-formfield
-              .label=${this._dialogParams.supervisor.localize(
-                "snapshot.partial_snapshot"
-              )}
-            >
-              <ha-radio
-                @change=${this._handleRadioValueChanged}
-                value="partial"
-                name="snapshotType"
-                .checked=${this._snapshotType === "partial"}
-              >
-              </ha-radio>
-            </ha-formfield>
-          </div>
-
-          ${
-            this._snapshotType === "full"
-              ? undefined
-              : html`
-                  ${this._dialogParams.supervisor.localize("snapshot.folders")}:
-                  <div class="checkbox-section">
-                    ${this._folderList.map(
-                      (folder, idx) => html`
-                        <div class="checkbox-line">
-                          <ha-checkbox
-                            .idx=${idx}
-                            .checked=${folder.checked}
-                            @change=${this._folderChecked}
-                            slot="prefix"
-                          >
-                          </ha-checkbox>
-                          <span>
-                            ${this._dialogParams!.supervisor.localize(
-                              `snapshot.folder.${folder.slug}`
-                            )}
-                          </span>
-                        </div>
-                      `
-                    )}
-                  </div>
-
-                  ${this._dialogParams.supervisor.localize("snapshot.addons")}:
-                  <div class="checkbox-section">
-                    ${this._addonList.map(
-                      (addon, idx) => html`
-                        <div class="checkbox-line">
-                          <ha-checkbox
-                            .idx=${idx}
-                            .checked=${addon.checked}
-                            @change=${this._addonChecked}
-                            slot="prefix"
-                          >
-                          </ha-checkbox>
-                          <span>
-                            ${addon.name}<span class="version">
-                              (${addon.version})
-                            </span>
-                          </span>
-                        </div>
-                      `
-                    )}
-                  </div>
-                `
-          }
-          ${this._dialogParams.supervisor.localize("snapshot.security")}:
-          <div class="checkbox-section">
-          <div class="checkbox-line">
-            <ha-checkbox
-              .checked=${this._snapshotHasPassword}
-              @change=${this._handleCheckboxValueChanged}
-              slot="prefix"
-            >
-            </ha-checkbox>
-            <span>
-            ${this._dialogParams.supervisor.localize(
-              "snapshot.password_protection"
-            )}
-              </span>
-            </span>
-          </div>
-          </div>
-
-          ${
-            this._snapshotHasPassword
-              ? html`
-                  <paper-input
-                    .label=${this._dialogParams.supervisor.localize(
-                      "snapshot.password"
-                    )}
-                    type="password"
-                    name="snapshotPassword"
-                    .value=${this._snapshotPassword}
-                    @value-changed=${this._handleTextValueChanged}
-                  >
-                  </paper-input>
-                `
-              : undefined
-          }
-          ${
-            this._error !== ""
-              ? html` <p class="error">${this._error}</p> `
-              : undefined
-          }
+            </supervisor-snapshot-content>`}
+        ${this._error ? html`<p class="error">Error: ${this._error}</p>` : ""}
         <mwc-button slot="secondaryAction" @click=${this.closeDialog}>
           ${this._dialogParams.supervisor.localize("common.close")}
         </mwc-button>
-        <ha-progress-button slot="primaryAction" @click=${this._createSnapshot}>
+        <mwc-button
+          .disabled=${this._creatingSnapshot}
+          slot="primaryAction"
+          @click=${this._createSnapshot}
+        >
           ${this._dialogParams.supervisor.localize("snapshot.create")}
-        </ha-progress-button>
+        </mwc-button>
       </ha-dialog>
     `;
   }
 
-  private _handleTextValueChanged(ev: PolymerChangedEvent<string>) {
-    const input = ev.currentTarget as PaperInputElement;
-    this[`_${input.name}`] = ev.detail.value;
-  }
-
-  private _handleCheckboxValueChanged(ev: CustomEvent) {
-    const input = ev.currentTarget as HaCheckbox;
-    this._snapshotHasPassword = input.checked;
-  }
-
-  private _handleRadioValueChanged(ev: CustomEvent) {
-    const input = ev.currentTarget as HaRadio;
-    this[`_${input.name}`] = input.value;
-  }
-
-  private _folderChecked(ev) {
-    const { idx, checked } = ev.currentTarget!;
-    this._folderList = this._folderList.map((folder, curIdx) =>
-      curIdx === idx ? { ...folder, checked } : folder
-    );
-  }
-
-  private _addonChecked(ev) {
-    const { idx, checked } = ev.currentTarget!;
-    this._addonList = this._addonList.map((addon, curIdx) =>
-      curIdx === idx ? { ...addon, checked } : addon
-    );
-  }
-
-  private async _createSnapshot(ev: CustomEvent): Promise<void> {
+  private async _createSnapshot(): Promise<void> {
     if (this._dialogParams!.supervisor.info.state !== "running") {
       showAlertDialog(this, {
         title: this._dialogParams!.supervisor.localize(
@@ -282,40 +91,35 @@ class HassioCreateSnapshotDialog extends LitElement {
       });
       return;
     }
-    const button = ev.currentTarget as any;
-    button.progress = true;
+    const snapshotDetails = this._snapshotContent.snapshotDetails();
+    this._creatingSnapshot = true;
 
     this._error = "";
-    if (this._snapshotHasPassword && !this._snapshotPassword.length) {
+    if (snapshotDetails.password && !snapshotDetails.password.length) {
       this._error = this._dialogParams!.supervisor.localize(
         "snapshot.enter_password"
       );
-      button.progress = false;
+      this._creatingSnapshot = false;
       return;
     }
-    const name = this._snapshotName || formatDate(new Date(), this.hass.locale);
+    if (
+      snapshotDetails.password &&
+      snapshotDetails.password !== snapshotDetails.confirm_password
+    ) {
+      this._error = this._dialogParams!.supervisor.localize(
+        "snapshot.passwords_not_matching"
+      );
+      this._creatingSnapshot = false;
+      return;
+    }
+
+    delete snapshotDetails.confirm_password;
 
     try {
-      if (this._snapshotType === "full") {
-        const data: HassioFullSnapshotCreateParams = { name };
-        if (this._snapshotHasPassword) {
-          data.password = this._snapshotPassword;
-        }
-        await createHassioFullSnapshot(this.hass, data);
+      if (this._snapshotContent.snapshotType === "full") {
+        await createHassioFullSnapshot(this.hass, snapshotDetails);
       } else {
-        const data: HassioPartialSnapshotCreateParams = {
-          name,
-          folders: this._folderList
-            .filter((folder) => folder.checked)
-            .map((folder) => folder.slug),
-          addons: this._addonList
-            .filter((addon) => addon.checked)
-            .map((addon) => addon.slug),
-        };
-        if (this._snapshotHasPassword) {
-          data.password = this._snapshotPassword;
-        }
-        await createHassioPartialSnapshot(this.hass, data);
+        await createHassioPartialSnapshot(this.hass, snapshotDetails);
       }
 
       this._dialogParams!.onCreate();
@@ -323,7 +127,7 @@ class HassioCreateSnapshotDialog extends LitElement {
     } catch (err) {
       this._error = extractApiErrorMessage(err);
     }
-    button.progress = false;
+    this._creatingSnapshot = false;
   }
 
   static get styles(): CSSResultGroup {
@@ -331,22 +135,9 @@ class HassioCreateSnapshotDialog extends LitElement {
       haStyle,
       haStyleDialog,
       css`
-        .error {
-          color: var(--error-color);
-        }
-        paper-input[type="password"] {
+        ha-circular-progress {
           display: block;
-          margin: 4px 0 4px 16px;
-        }
-        span.version {
-          color: var(--secondary-text-color);
-        }
-        .checkbox-section {
-          display: grid;
-        }
-        .checkbox-line {
-          display: inline-flex;
-          align-items: center;
+          text-align: center;
         }
       `,
     ];

hassio/src/dialogs/snapshot/dialog-hassio-snapshot.ts

@@ -1,12 +1,12 @@
-import "@material/mwc-button";
-import { mdiClose, mdiDelete, mdiDownload, mdiHistory } from "@mdi/js";
-import "@polymer/paper-checkbox/paper-checkbox";
-import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
-import "@polymer/paper-input/paper-input";
+import { ActionDetail } from "@material/mwc-list";
+import "@material/mwc-list/mwc-list-item";
+import { mdiClose, mdiDotsVertical } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators";
-import { formatDateTime } from "../../../../src/common/datetime/format_date_time";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { slugify } from "../../../../src/common/string/slugify";
+import "../../../../src/components/buttons/ha-progress-button";
+import "../../../../src/components/ha-button-menu";
 import "../../../../src/components/ha-header-bar";
 import "../../../../src/components/ha-svg-icon";
 import { getSignedPath } from "../../../../src/data/auth";
@@ -15,95 +15,47 @@ import {
   fetchHassioSnapshotInfo,
   HassioSnapshotDetail,
 } from "../../../../src/data/hassio/snapshot";
-import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../../../src/dialogs/generic/show-dialog-box";
-import { PolymerChangedEvent } from "../../../../src/polymer-types";
+import { HassDialog } from "../../../../src/dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
+import { fileDownload } from "../../../../src/util/file_download";
+import "../../components/supervisor-snapshot-content";
+import type { SupervisorSnapshotContent } from "../../components/supervisor-snapshot-content";
 import { HassioSnapshotDialogParams } from "./show-dialog-hassio-snapshot";
 
-const _computeFolders = (folders) => {
-  const list: Array<{ slug: string; name: string; checked: boolean }> = [];
-  if (folders.includes("homeassistant")) {
-    list.push({
-      slug: "homeassistant",
-      name: "Home Assistant configuration",
-      checked: true,
-    });
-  }
-  if (folders.includes("ssl")) {
-    list.push({ slug: "ssl", name: "SSL", checked: true });
-  }
-  if (folders.includes("share")) {
-    list.push({ slug: "share", name: "Share", checked: true });
-  }
-  if (folders.includes("addons/local")) {
-    list.push({ slug: "addons/local", name: "Local add-ons", checked: true });
-  }
-  return list;
-};
-
-const _computeAddons = (addons) =>
-  addons.map((addon) => ({
-    slug: addon.slug,
-    name: addon.name,
-    version: addon.version,
-    checked: true,
-  }));
-
-interface AddonItem {
-  slug: string;
-  name: string;
-  version: string;
-  checked: boolean | null | undefined;
-}
-
-interface FolderItem {
-  slug: string;
-  name: string;
-  checked: boolean | null | undefined;
-}
-
 @customElement("dialog-hassio-snapshot")
-class HassioSnapshotDialog extends LitElement {
+class HassioSnapshotDialog
+  extends LitElement
+  implements HassDialog<HassioSnapshotDialogParams> {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public supervisor?: Supervisor;
-
   @state() private _error?: string;
 
-  @state() private _onboarding = false;
-
   @state() private _snapshot?: HassioSnapshotDetail;
 
-  @state() private _folders!: FolderItem[];
-
-  @state() private _addons!: AddonItem[];
-
   @state() private _dialogParams?: HassioSnapshotDialogParams;
 
-  @state() private _snapshotPassword!: string;
+  @state() private _restoringSnapshot = false;
 
-  @state() private _restoreHass = true;
+  @query("supervisor-snapshot-content")
+  private _snapshotContent!: SupervisorSnapshotContent;
 
   public async showDialog(params: HassioSnapshotDialogParams) {
     this._snapshot = await fetchHassioSnapshotInfo(this.hass, params.slug);
-    this._folders = _computeFolders(
-      this._snapshot?.folders
-    ).sort((a: FolderItem, b: FolderItem) => (a.name > b.name ? 1 : -1));
-    this._addons = _computeAddons(
-      this._snapshot?.addons
-    ).sort((a: AddonItem, b: AddonItem) => (a.name > b.name ? 1 : -1));
-
     this._dialogParams = params;
-    this._onboarding = params.onboarding ?? false;
-    this.supervisor = params.supervisor;
-    if (!this._snapshot.homeassistant) {
-      this._restoreHass = false;
-    }
+    this._restoringSnapshot = false;
+  }
+
+  public closeDialog() {
+    this._snapshot = undefined;
+    this._dialogParams = undefined;
+    this._restoringSnapshot = false;
+    this._error = undefined;
+    fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
   protected render(): TemplateResult {
@@ -111,121 +63,54 @@ class HassioSnapshotDialog extends LitElement {
       return html``;
     }
     return html`
-      <ha-dialog open @closing=${this._closeDialog} .heading=${true}>
+      <ha-dialog
+        open
+        scrimClickAction
+        @closed=${this.closeDialog}
+        .heading=${true}
+      >
         <div slot="heading">
           <ha-header-bar>
-            <span slot="title"> ${this._computeName} </span>
+            <span slot="title">${this._snapshot.name}</span>
             <mwc-icon-button slot="actionItems" dialogAction="cancel">
               <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
             </mwc-icon-button>
           </ha-header-bar>
         </div>
-        <div class="details">
-          ${this._snapshot.type === "full"
-            ? "Full snapshot"
-            : "Partial snapshot"}
-          (${this._computeSize})<br />
-          ${formatDateTime(new Date(this._snapshot.date), this.hass.locale)}
-        </div>
-        ${this._snapshot.homeassistant
-          ? html`<div>Home Assistant:</div>
-              <paper-checkbox
-                .checked=${this._restoreHass}
-                @change="${(ev: Event) => {
-                  this._restoreHass = (ev.target as PaperCheckboxElement).checked!;
-                }}"
-              >
-                Home Assistant
-                <span class="version">(${this._snapshot.homeassistant})</span>
-              </paper-checkbox>`
-          : ""}
-        ${this._folders.length
-          ? html`
-              <div>Folders:</div>
-              <paper-dialog-scrollable class="no-margin-top">
-                ${this._folders.map(
-                  (item) => html`
-                    <paper-checkbox
-                      .checked=${item.checked}
-                      @change="${(ev: Event) =>
-                        this._updateFolders(
-                          item,
-                          (ev.target as PaperCheckboxElement).checked
-                        )}"
-                    >
-                      ${item.name}
-                    </paper-checkbox>
-                  `
-                )}
-              </paper-dialog-scrollable>
-            `
-          : ""}
-        ${this._addons.length
-          ? html`
-              <div>Add-on:</div>
-              <paper-dialog-scrollable class="no-margin-top">
-                ${this._addons.map(
-                  (item) => html`
-                    <paper-checkbox
-                      .checked=${item.checked}
-                      @change="${(ev: Event) =>
-                        this._updateAddons(
-                          item,
-                          (ev.target as PaperCheckboxElement).checked
-                        )}"
-                    >
-                      ${item.name}
-                      <span class="version">(${item.version})</span>
-                    </paper-checkbox>
-                  `
-                )}
-              </paper-dialog-scrollable>
-            `
-          : ""}
-        ${this._snapshot.protected
-          ? html`
-              <paper-input
-                autofocus=""
-                label="Password"
-                type="password"
-                @value-changed=${this._passwordInput}
-                .value=${this._snapshotPassword}
-              ></paper-input>
-            `
-          : ""}
-        ${this._error ? html` <p class="error">Error: ${this._error}</p> ` : ""}
+        ${this._restoringSnapshot
+          ? html` <ha-circular-progress active></ha-circular-progress>`
+          : html`<supervisor-snapshot-content
+              .hass=${this.hass}
+              .supervisor=${this._dialogParams.supervisor}
+              .snapshot=${this._snapshot}
+              .onboarding=${this._dialogParams.onboarding || false}
+              .localize=${this._dialogParams.localize}
+            >
+            </supervisor-snapshot-content>`}
+        ${this._error ? html`<p class="error">Error: ${this._error}</p>` : ""}
 
-        <div class="button-row" slot="primaryAction">
-          <mwc-button @click=${this._partialRestoreClicked}>
-            <ha-svg-icon .path=${mdiHistory} class="icon"></ha-svg-icon>
-            Restore Selected
-          </mwc-button>
-          ${!this._onboarding
-            ? html`
-                <mwc-button @click=${this._deleteClicked}>
-                  <ha-svg-icon .path=${mdiDelete} class="icon warning">
-                  </ha-svg-icon>
-                  <span class="warning">Delete Snapshot</span>
-                </mwc-button>
-              `
-            : ""}
-        </div>
-        <div class="button-row" slot="secondaryAction">
-          ${this._snapshot.type === "full"
-            ? html`
-                <mwc-button @click=${this._fullRestoreClicked}>
-                  <ha-svg-icon .path=${mdiHistory} class="icon"></ha-svg-icon>
-                  Restore Everything
-                </mwc-button>
-              `
-            : ""}
-          ${!this._onboarding
-            ? html`<mwc-button @click=${this._downloadClicked}>
-                <ha-svg-icon .path=${mdiDownload} class="icon"></ha-svg-icon>
-                Download Snapshot
-              </mwc-button>`
-            : ""}
-        </div>
+        <mwc-button
+          .disabled=${this._restoringSnapshot}
+          slot="secondaryAction"
+          @click=${this._restoreClicked}
+        >
+          Restore
+        </mwc-button>
+
+        ${!this._dialogParams.onboarding
+          ? html`<ha-button-menu
+              fixed
+              slot="primaryAction"
+              @action=${this._handleMenuAction}
+              @closed=${(ev: Event) => ev.stopPropagation()}
+            >
+              <mwc-icon-button slot="trigger" alt="menu">
+                <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
+              </mwc-icon-button>
+              <mwc-list-item>Download Snapshot</mwc-list-item>
+              <mwc-list-item class="error">Delete Snapshot</mwc-list-item>
+            </ha-button-menu>`
+          : ""}
       </ha-dialog>
     `;
   }
@@ -235,83 +120,53 @@ class HassioSnapshotDialog extends LitElement {
       haStyle,
       haStyleDialog,
       css`
-        paper-checkbox {
+        ha-svg-icon {
+          color: var(--primary-text-color);
+        }
+        ha-circular-progress {
           display: block;
-          margin: 4px;
-        }
-        mwc-button ha-svg-icon {
-          margin-right: 4px;
-        }
-        .button-row {
-          display: grid;
-          gap: 8px;
-          margin-right: 8px;
-        }
-        .details {
-          color: var(--secondary-text-color);
-        }
-        .warning,
-        .error {
-          color: var(--error-color);
-        }
-        .buttons li {
-          list-style-type: none;
-        }
-        .buttons .icon {
-          margin-right: 16px;
-        }
-        .no-margin-top {
-          margin-top: 0;
-        }
-        span.version {
-          color: var(--secondary-text-color);
+          text-align: center;
         }
         ha-header-bar {
           --mdc-theme-on-primary: var(--primary-text-color);
           --mdc-theme-primary: var(--mdc-theme-surface);
           flex-shrink: 0;
-        }
-        /* overrule the ha-style-dialog max-height on small screens */
-        @media all and (max-width: 450px), all and (max-height: 500px) {
-          ha-header-bar {
-            --mdc-theme-primary: var(--app-header-background-color);
-            --mdc-theme-on-primary: var(--app-header-text-color, white);
-          }
+          display: block;
         }
       `,
     ];
   }
 
-  private _updateFolders(item: FolderItem, value: boolean | null | undefined) {
-    this._folders = this._folders.map((folder) => {
-      if (folder.slug === item.slug) {
-        folder.checked = value;
-      }
-      return folder;
-    });
+  private _handleMenuAction(ev: CustomEvent<ActionDetail>) {
+    switch (ev.detail.index) {
+      case 0:
+        this._downloadClicked();
+        break;
+      case 1:
+        this._deleteClicked();
+        break;
+    }
   }
 
-  private _updateAddons(item: AddonItem, value: boolean | null | undefined) {
-    this._addons = this._addons.map((addon) => {
-      if (addon.slug === item.slug) {
-        addon.checked = value;
-      }
-      return addon;
-    });
+  private async _restoreClicked() {
+    const snapshotDetails = this._snapshotContent.snapshotDetails();
+    this._restoringSnapshot = true;
+    if (this._snapshotContent.snapshotType === "full") {
+      await this._fullRestoreClicked(snapshotDetails);
+    } else {
+      await this._partialRestoreClicked(snapshotDetails);
+    }
+    this._restoringSnapshot = false;
   }
 
-  private _passwordInput(ev: PolymerChangedEvent<string>) {
-    this._snapshotPassword = ev.detail.value;
-  }
-
-  private async _partialRestoreClicked() {
+  private async _partialRestoreClicked(snapshotDetails) {
     if (
-      this.supervisor !== undefined &&
-      this.supervisor.info.state !== "running"
+      this._dialogParams?.supervisor !== undefined &&
+      this._dialogParams?.supervisor.info.state !== "running"
     ) {
       await showAlertDialog(this, {
         title: "Could not restore snapshot",
-        text: `Restoring a snapshot is not possible right now because the system is in ${this.supervisor.info.state} state.`,
+        text: `Restoring a snapshot is not possible right now because the system is in ${this._dialogParams?.supervisor.info.state} state.`,
       });
       return;
     }
@@ -325,41 +180,17 @@ class HassioSnapshotDialog extends LitElement {
       return;
     }
 
-    const addons = this._addons
-      .filter((addon) => addon.checked)
-      .map((addon) => addon.slug);
-
-    const folders = this._folders
-      .filter((folder) => folder.checked)
-      .map((folder) => folder.slug);
-
-    const data: {
-      homeassistant: boolean;
-      addons: any;
-      folders: any;
-      password?: string;
-    } = {
-      homeassistant: this._restoreHass,
-      addons,
-      folders,
-    };
-
-    if (this._snapshot!.protected) {
-      data.password = this._snapshotPassword;
-    }
-
-    if (!this._onboarding) {
+    if (!this._dialogParams?.onboarding) {
       this.hass
         .callApi(
           "POST",
 
           `hassio/snapshots/${this._snapshot!.slug}/restore/partial`,
-          data
+          snapshotDetails
         )
         .then(
           () => {
-            alert("Snapshot restored!");
-            this._closeDialog();
+            this.closeDialog();
           },
           (error) => {
             this._error = error.body.message;
@@ -369,20 +200,20 @@ class HassioSnapshotDialog extends LitElement {
       fireEvent(this, "restoring");
       fetch(`/api/hassio/snapshots/${this._snapshot!.slug}/restore/partial`, {
         method: "POST",
-        body: JSON.stringify(data),
+        body: JSON.stringify(snapshotDetails),
       });
-      this._closeDialog();
+      this.closeDialog();
     }
   }
 
-  private async _fullRestoreClicked() {
+  private async _fullRestoreClicked(snapshotDetails) {
     if (
-      this.supervisor !== undefined &&
-      this.supervisor.info.state !== "running"
+      this._dialogParams?.supervisor !== undefined &&
+      this._dialogParams?.supervisor.info.state !== "running"
     ) {
       await showAlertDialog(this, {
         title: "Could not restore snapshot",
-        text: `Restoring a snapshot is not possible right now because the system is in ${this.supervisor.info.state} state.`,
+        text: `Restoring a snapshot is not possible right now because the system is in ${this._dialogParams?.supervisor.info.state} state.`,
       });
       return;
     }
@@ -397,20 +228,16 @@ class HassioSnapshotDialog extends LitElement {
       return;
     }
 
-    const data = this._snapshot!.protected
-      ? { password: this._snapshotPassword }
-      : undefined;
-    if (!this._onboarding) {
+    if (!this._dialogParams?.onboarding) {
       this.hass
         .callApi(
           "POST",
           `hassio/snapshots/${this._snapshot!.slug}/restore/full`,
-          data
+          snapshotDetails
         )
         .then(
           () => {
-            alert("Snapshot restored!");
-            this._closeDialog();
+            this.closeDialog();
           },
           (error) => {
             this._error = error.body.message;
@@ -420,9 +247,9 @@ class HassioSnapshotDialog extends LitElement {
       fireEvent(this, "restoring");
       fetch(`/api/hassio/snapshots/${this._snapshot!.slug}/restore/full`, {
         method: "POST",
-        body: JSON.stringify(data),
+        body: JSON.stringify(snapshotDetails),
       });
-      this._closeDialog();
+      this.closeDialog();
     }
   }
 
@@ -445,7 +272,7 @@ class HassioSnapshotDialog extends LitElement {
           if (this._dialogParams!.onDelete) {
             this._dialogParams!.onDelete();
           }
-          this._closeDialog();
+          this.closeDialog();
         },
         (error) => {
           this._error = error.body.message;
@@ -461,7 +288,9 @@ class HassioSnapshotDialog extends LitElement {
         `/api/hassio/snapshots/${this._snapshot!.slug}/download`
       );
     } catch (err) {
-      alert(`Error: ${extractApiErrorMessage(err)}`);
+      await showAlertDialog(this, {
+        text: extractApiErrorMessage(err),
+      });
       return;
     }
 
@@ -478,13 +307,11 @@ class HassioSnapshotDialog extends LitElement {
       }
     }
 
-    const name = this._computeName.replace(/[^a-z0-9]+/gi, "_");
-    const a = document.createElement("a");
-    a.href = signedPath.path;
-    a.download = `Hass_io_${name}.tar`;
-    this.shadowRoot!.appendChild(a);
-    a.click();
-    this.shadowRoot!.removeChild(a);
+    fileDownload(
+      this,
+      signedPath.path,
+      `home_assistant_snapshot_${slugify(this._computeName)}.tar`
+    );
   }
 
   private get _computeName() {
@@ -492,18 +319,6 @@ class HassioSnapshotDialog extends LitElement {
       ? this._snapshot.name || this._snapshot.slug
       : "Unnamed snapshot";
   }
-
-  private get _computeSize() {
-    return Math.ceil(this._snapshot!.size * 10) / 10 + " MB";
-  }
-
-  private _closeDialog() {
-    this._dialogParams = undefined;
-    this._snapshot = undefined;
-    this._snapshotPassword = "";
-    this._folders = [];
-    this._addons = [];
-  }
 }
 
 declare global {

hassio/src/dialogs/snapshot/show-dialog-hassio-snapshot.ts

@@ -1,4 +1,5 @@
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { LocalizeFunc } from "../../../../src/common/translations/localize";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 
 export interface HassioSnapshotDialogParams {
@@ -6,6 +7,7 @@ export interface HassioSnapshotDialogParams {
   onDelete?: () => void;
   onboarding?: boolean;
   supervisor?: Supervisor;
+  localize?: LocalizeFunc;
 }
 
 export const showHassioSnapshotDialog = (

hassio/src/dialogs/update/dialog-supervisor-update.ts

@@ -7,10 +7,7 @@ import "../../../../src/components/ha-dialog";
 import "../../../../src/components/ha-settings-row";
 import "../../../../src/components/ha-svg-icon";
 import "../../../../src/components/ha-switch";
-import {
-  extractApiErrorMessage,
-  ignoreSupervisorError,
-} from "../../../../src/data/hassio/common";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import { createHassioPartialSnapshot } from "../../../../src/data/hassio/snapshot";
 import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
@@ -153,16 +150,7 @@ class DialogSupervisorUpdate extends LitElement {
     }
 
     this._action = "update";
-    try {
-      await this._dialogParams!.updateHandler!();
-    } catch (err) {
-      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
-        this._error = extractApiErrorMessage(err);
-      }
-      this._action = null;
-      return;
-    }
-
+    await this._dialogParams!.updateHandler!();
     this.closeDialog();
   }
 

hassio/src/dialogs/update/show-dialog-update.ts

@@ -1,17 +1,18 @@
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { HassioPartialSnapshotCreateParams } from "../../../../src/data/hassio/snapshot";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 
 export interface SupervisorDialogSupervisorUpdateParams {
   supervisor: Supervisor;
   name: string;
   version: string;
-  snapshotParams: any;
+  snapshotParams: HassioPartialSnapshotCreateParams;
   updateHandler: () => Promise<void>;
 }
 
 export const showDialogSupervisorUpdate = (
   element: HTMLElement,
-  dialogParams: SupervisorDialogSupervisorUpdateParams
+  dialogParams: Partial<SupervisorDialogSupervisorUpdateParams>
 ): void => {
   fireEvent(element, "show-dialog", {
     dialogTag: "dialog-supervisor-update",

hassio/src/entrypoint.ts

@@ -15,5 +15,11 @@ body {
   padding: 0;
   height: 100vh;
 }
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #111111;
+    color: #e1e1e1;
+  }
+}
 `;
 document.head.appendChild(styleEl);

hassio/src/hassio-main.ts

@@ -4,6 +4,7 @@ import { atLeastVersion } from "../../src/common/config/version";
 import { applyThemesOnElement } from "../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../src/common/dom/fire_event";
 import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
+import { mainWindow } from "../../src/common/dom/get_main_window";
 import { navigate } from "../../src/common/navigate";
 import { HassioPanelInfo } from "../../src/data/hassio/supervisor";
 import { Supervisor } from "../../src/data/supervisor/supervisor";
@@ -50,7 +51,7 @@ export class HassioMain extends SupervisorBaseElement {
 
     // Joakim - April 26, 2021
     // Due to changes in behavior in Google Chrome, we changed navigate to listen on the top element
-    top.addEventListener("location-changed", (ev) =>
+    mainWindow.addEventListener("location-changed", (ev) =>
       // @ts-ignore
       fireEvent(this, ev.type, ev.detail, {
         bubbles: false,
@@ -62,7 +63,7 @@ export class HassioMain extends SupervisorBaseElement {
     document.body.addEventListener("click", (ev) => {
       const href = isNavigationClick(ev);
       if (href) {
-        navigate(document.body, href);
+        navigate(href);
       }
     });
 
@@ -102,7 +103,7 @@ export class HassioMain extends SupervisorBaseElement {
 
   private _applyTheme() {
     let themeName: string;
-    let options: Partial<HomeAssistant["selectedTheme"]> | undefined;
+    let themeSettings: Partial<HomeAssistant["selectedTheme"]> | undefined;
 
     if (atLeastVersion(this.hass.config.version, 0, 114)) {
       themeName =
@@ -111,9 +112,9 @@ export class HassioMain extends SupervisorBaseElement {
           ? this.hass.themes.default_dark_theme!
           : this.hass.themes.default_theme);
 
-      options = this.hass.selectedTheme;
-      if (themeName === "default" && options?.dark === undefined) {
-        options = {
+      themeSettings = this.hass.selectedTheme;
+      if (themeSettings?.dark === undefined) {
+        themeSettings = {
           ...this.hass.selectedTheme,
           dark: this.hass.themes.darkMode,
         };
@@ -128,7 +129,7 @@ export class HassioMain extends SupervisorBaseElement {
       this.parentElement,
       this.hass.themes,
       themeName,
-      options
+      themeSettings
     );
   }
 }

hassio/src/hassio-my-redirect.ts

@@ -89,7 +89,7 @@ class HassioMyRedirect extends LitElement {
       return;
     }
 
-    navigate(this, url, true);
+    navigate(url, { replace: true });
   }
 
   protected render(): TemplateResult {

hassio/src/hassio-panel.ts

@@ -1,12 +1,26 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
 import {
   Supervisor,
+  supervisorApplyUpdateDetails,
   supervisorCollection,
 } from "../../src/data/supervisor/supervisor";
 import { HomeAssistant, Route } from "../../src/types";
 import "./hassio-panel-router";
 
+declare global {
+  interface HASSDomEvents {
+    "supervisor-applying-update": supervisorApplyUpdateDetails;
+  }
+}
+
 @customElement("hassio-panel")
 class HassioPanel extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -17,6 +31,16 @@ class HassioPanel extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
+  @state() private _applyingUpdate?: supervisorApplyUpdateDetails;
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    this._applyingUpdate = undefined;
+    this.addEventListener("supervisor-applying-update", (ev) => {
+      this._applyingUpdate = ev.detail;
+    });
+  }
+
   protected render(): TemplateResult {
     if (!this.hass) {
       return html`<hass-loading-screen></hass-loading-screen>`;
@@ -29,6 +53,16 @@ class HassioPanel extends LitElement {
     ) {
       return html`<hass-loading-screen></hass-loading-screen>`;
     }
+
+    if (this._applyingUpdate !== undefined) {
+      return html`<hass-loading-screen no-toolbar>
+        ${this.supervisor.localize("dialog.update.updating", {
+          name: this._applyingUpdate.name,
+          version: this._applyingUpdate.version,
+        })}
+      </hass-loading-screen>`;
+    }
+
     return html`
       <hassio-panel-router
         .hass=${this.hass}

hassio/src/ingress-view/hassio-ingress-view.ts

@@ -11,6 +11,7 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import { navigate } from "../../../src/common/navigate";
 import { extractSearchParam } from "../../../src/common/url/search-params";
+import { nextRender } from "../../../src/common/util/render-status";
 import {
   fetchHassioAddonInfo,
   HassioAddonDetails,
@@ -95,17 +96,26 @@ class HassioIngressView extends LitElement {
             text: extractApiErrorMessage(err),
             title: requestedAddon,
           });
-          history.back();
+          await nextRender();
+          navigate("/hassio/store", { replace: true });
           return;
         }
-        if (!addonInfo.ingress) {
+        if (!addonInfo.version) {
+          await showAlertDialog(this, {
+            text: this.supervisor.localize("my.error_addon_not_installed"),
+            title: addonInfo.name,
+          });
+          await nextRender();
+          navigate(`/hassio/addon/${addonInfo.slug}/info`, { replace: true });
+        } else if (!addonInfo.ingress) {
           await showAlertDialog(this, {
             text: this.supervisor.localize("my.error_addon_no_ingress"),
             title: addonInfo.name,
           });
-          history.back();
+          await nextRender();
+          navigate(`/hassio/addon/${addonInfo.slug}/info`, { replace: true });
         } else {
-          navigate(this, `/hassio/ingress/${addonInfo.slug}`, true);
+          navigate(`/hassio/ingress/${addonInfo.slug}`, { replace: true });
         }
       }
     }
@@ -140,6 +150,7 @@ class HassioIngressView extends LitElement {
         text: "Unable to fetch add-on info to start Ingress",
         title: "Supervisor",
       });
+      await nextRender();
       history.back();
       return;
     }
@@ -149,6 +160,7 @@ class HassioIngressView extends LitElement {
         text: "Add-on does not support Ingress",
         title: addon.name,
       });
+      await nextRender();
       history.back();
       return;
     }
@@ -158,7 +170,8 @@ class HassioIngressView extends LitElement {
         text: "Add-on is not running. Please start it first",
         title: addon.name,
       });
-      navigate(this, `/hassio/addon/${addon.slug}/info`, true);
+      await nextRender();
+      navigate(`/hassio/addon/${addon.slug}/info`, { replace: true });
       return;
     }
 
@@ -171,6 +184,7 @@ class HassioIngressView extends LitElement {
         text: "Unable to create an Ingress session",
         title: addon.name,
       });
+      await nextRender();
       history.back();
       return;
     }

hassio/src/snapshots/hassio-snapshots.ts

@@ -1,15 +1,17 @@
 import "@material/mwc-button";
 import { ActionDetail } from "@material/mwc-list";
 import "@material/mwc-list/mwc-list-item";
-import { mdiDotsVertical, mdiPlus } from "@mdi/js";
+import { mdiDelete, mdiDotsVertical, mdiPlus } from "@mdi/js";
 import {
+  css,
   CSSResultGroup,
   html,
   LitElement,
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { customElement, property, state } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import relativeTime from "../../../src/common/datetime/relative_time";
@@ -17,18 +19,25 @@ import { HASSDomEvent } from "../../../src/common/dom/fire_event";
 import {
   DataTableColumnContainer,
   RowClickedEvent,
+  SelectionChangedEvent,
 } from "../../../src/components/data-table/ha-data-table";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-fab";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import {
   fetchHassioSnapshots,
   friendlyFolderName,
   HassioSnapshot,
   reloadHassioSnapshots,
+  removeSnapshot,
 } from "../../../src/data/hassio/snapshot";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
-import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../src/dialogs/generic/show-dialog-box";
 import "../../../src/layouts/hass-tabs-subpage-data-table";
+import type { HaTabsSubpageDataTable } from "../../../src/layouts/hass-tabs-subpage-data-table";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
 import { showHassioCreateSnapshotDialog } from "../dialogs/snapshot/show-dialog-hassio-create-snapshot";
@@ -49,10 +58,15 @@ export class HassioSnapshots extends LitElement {
 
   @property({ type: Boolean }) public isWide!: boolean;
 
-  private _firstUpdatedCalled = false;
+  @state() private _selectedSnapshots: string[] = [];
 
   @state() private _snapshots?: HassioSnapshot[] = [];
 
+  @query("hass-tabs-subpage-data-table", true)
+  private _dataTable!: HaTabsSubpageDataTable;
+
+  private _firstUpdatedCalled = false;
+
   public connectedCallback(): void {
     super.connectedCallback();
     if (this.hass && this._firstUpdatedCalled) {
@@ -153,7 +167,9 @@ export class HassioSnapshots extends LitElement {
         .data=${this._snapshotData(this._snapshots || [])}
         id="slug"
         @row-click=${this._handleRowClicked}
+        @selection-changed=${this._handleSelectionChanged}
         clickable
+        selectable
         hasFab
         main-page
         supervisor
@@ -176,6 +192,45 @@ export class HassioSnapshots extends LitElement {
             : ""}
         </ha-button-menu>
 
+        ${this._selectedSnapshots.length
+          ? html`<div
+              class=${classMap({
+                "header-toolbar": this.narrow,
+                "table-header": !this.narrow,
+              })}
+              slot="header"
+            >
+              <p class="selected-txt">
+                ${this.supervisor.localize("snapshot.selected", {
+                  number: this._selectedSnapshots.length,
+                })}
+              </p>
+              <div class="header-btns">
+                ${!this.narrow
+                  ? html`
+                      <mwc-button
+                        @click=${this._deleteSelected}
+                        class="warning"
+                      >
+                        ${this.supervisor.localize("snapshot.delete_selected")}
+                      </mwc-button>
+                    `
+                  : html`
+                      <mwc-icon-button
+                        id="delete-btn"
+                        class="warning"
+                        @click=${this._deleteSelected}
+                      >
+                        <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
+                      </mwc-icon-button>
+                      <paper-tooltip animation-delay="0" for="delete-btn">
+                        ${this.supervisor.localize("snapshot.delete_selected")}
+                      </paper-tooltip>
+                    `}
+              </div>
+            </div> `
+          : ""}
+
         <ha-fab
           slot="fab"
           @click=${this._createSnapshot}
@@ -199,6 +254,12 @@ export class HassioSnapshots extends LitElement {
     }
   }
 
+  private _handleSelectionChanged(
+    ev: HASSDomEvent<SelectionChangedEvent>
+  ): void {
+    this._selectedSnapshots = ev.detail.value;
+  }
+
   private _showUploadSnapshotDialog() {
     showSnapshotUploadDialog(this, {
       showSnapshot: (slug: string) =>
@@ -216,6 +277,35 @@ export class HassioSnapshots extends LitElement {
     this._snapshots = await fetchHassioSnapshots(this.hass);
   }
 
+  private async _deleteSelected() {
+    const confirm = await showConfirmationDialog(this, {
+      title: this.supervisor.localize("snapshot.delete_snapshot_title"),
+      text: this.supervisor.localize("snapshot.delete_snapshot_text", {
+        number: this._selectedSnapshots.length,
+      }),
+      confirmText: this.supervisor.localize("snapshot.delete_snapshot_confirm"),
+    });
+
+    if (!confirm) {
+      return;
+    }
+
+    try {
+      await Promise.all(
+        this._selectedSnapshots.map((slug) => removeSnapshot(this.hass, slug))
+      );
+    } catch (err) {
+      showAlertDialog(this, {
+        title: this.supervisor.localize("snapshot.failed_to_delete"),
+        text: extractApiErrorMessage(err),
+      });
+      return;
+    }
+    await reloadHassioSnapshots(this.hass);
+    this._snapshots = await fetchHassioSnapshots(this.hass);
+    this._dataTable.clearSelection();
+  }
+
   private _handleRowClicked(ev: HASSDomEvent<RowClickedEvent>) {
     const slug = ev.detail.id;
     showHassioSnapshotDialog(this, {
@@ -244,7 +334,45 @@ export class HassioSnapshots extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return [haStyle, hassioStyle];
+    return [
+      haStyle,
+      hassioStyle,
+      css`
+        .table-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          height: 58px;
+          border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
+        }
+        .header-toolbar {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          color: var(--secondary-text-color);
+          position: relative;
+          top: -4px;
+        }
+        .selected-txt {
+          font-weight: bold;
+          padding-left: 16px;
+          color: var(--primary-text-color);
+        }
+        .table-header .selected-txt {
+          margin-top: 20px;
+        }
+        .header-toolbar .selected-txt {
+          font-size: 16px;
+        }
+        .header-toolbar .header-btns {
+          margin-right: -12px;
+        }
+        .header-btns > mwc-button,
+        .header-btns > mwc-icon-button {
+          margin: 8px;
+        }
+      `,
+    ];
   }
 }
 

hassio/src/system/hassio-core-info.ts

@@ -11,6 +11,7 @@ import {
   extractApiErrorMessage,
   fetchHassioStats,
   HassioStats,
+  ignoreSupervisorError,
 } from "../../../src/data/hassio/common";
 import { restartCore, updateCore } from "../../../src/data/supervisor/core";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
@@ -150,7 +151,7 @@ class HassioCoreInfo extends LitElement {
           title: this.supervisor.localize(
             "common.failed_to_restart_name",
             "name",
-            "Home AssistantCore"
+            "Home Assistant Core"
           ),
           text: extractApiErrorMessage(err),
         });
@@ -175,10 +176,29 @@ class HassioCoreInfo extends LitElement {
   }
 
   private async _updateCore(): Promise<void> {
-    await updateCore(this.hass);
+    try {
+      await updateCore(this.hass);
+    } catch (err) {
+      if (this.hass.connection.connected && !ignoreSupervisorError(err)) {
+        showAlertDialog(this, {
+          title: this.supervisor.localize(
+            "common.failed_to_update_name",
+            "name",
+            "Home Assistant Core"
+          ),
+          text: extractApiErrorMessage(err),
+        });
+        return;
+      }
+    }
+
     fireEvent(this, "supervisor-collection-refresh", {
       collection: "core",
     });
+    fireEvent(this, "supervisor-applying-update", {
+      name: "Home Assistant Core",
+      version: this.supervisor.core.version_latest,
+    });
   }
 
   static get styles(): CSSResultGroup {

hassio/src/system/hassio-host-info.ts

@@ -2,7 +2,6 @@ import "@material/mwc-button";
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
-import { safeDump } from "js-yaml";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -41,8 +40,8 @@ import {
   roundWithOneDecimal,
 } from "../../../src/util/calculate";
 import "../components/supervisor-metric";
-import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
 import { showNetworkDialog } from "../dialogs/network/show-dialog-network";
+import { showHassioHardwareDialog } from "../dialogs/hardware/show-dialog-hassio-hardware";
 import { hassioStyle } from "../resources/hassio-style";
 
 @customElement("hassio-host-info")
@@ -229,20 +228,19 @@ class HassioHostInfo extends LitElement {
   }
 
   private async _showHardware(): Promise<void> {
+    let hardware;
     try {
-      const content = await fetchHassioHardwareInfo(this.hass);
-      showHassioMarkdownDialog(this, {
-        title: this.supervisor.localize("system.host.hardware"),
-        content: `<pre>${safeDump(content, { indent: 2 })}</pre>`,
-      });
+      hardware = await fetchHassioHardwareInfo(this.hass);
     } catch (err) {
-      showAlertDialog(this, {
+      await showAlertDialog(this, {
         title: this.supervisor.localize(
           "system.host.failed_to_get_hardware_list"
         ),
         text: extractApiErrorMessage(err),
       });
+      return;
     }
+    showHassioHardwareDialog(this, { supervisor: this.supervisor, hardware });
   }
 
   private async _hostReboot(ev: CustomEvent): Promise<void> {

lint-staged.config.js

@@ -1,5 +1,4 @@
 module.exports = {
-  "*.ts": () => "tsc -p tsconfig.json",
   "*.{js,ts}": "eslint --fix",
   "!(/translations)*.{js,ts,json,css,md,html}": "prettier --write",
 };

package.json

@@ -16,13 +16,13 @@
     "lint:lit": "lit-analyzer \"**/src/**/*.ts\" --format markdown --outFile result.md",
     "lint": "yarn run lint:eslint && yarn run lint:prettier && yarn run lint:types",
     "format": "yarn run format:eslint && yarn run format:prettier",
-    "mocha": "node_modules/.bin/ts-mocha -p test-mocha/tsconfig.test.json --opts test-mocha/mocha.opts",
+    "mocha": "ts-mocha -p test-mocha/tsconfig.test.json \"test-mocha/**/*.ts\"",
     "test": "yarn run lint && yarn run mocha"
   },
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@braintree/sanitize-url": "^5.0.0",
+    "@braintree/sanitize-url": "^5.0.1",
     "@codemirror/commands": "^0.18.0",
     "@codemirror/gutter": "^0.18.0",
     "@codemirror/highlight": "^0.18.0",
@@ -35,8 +35,8 @@
     "@codemirror/text": "^0.18.0",
     "@codemirror/view": "^0.18.0",
     "@formatjs/intl-getcanonicallocales": "^1.5.10",
-    "@formatjs/intl-locale": "^2.4.24",
-    "@formatjs/intl-pluralrules": "^4.0.18",
+    "@formatjs/intl-locale": "^2.4.28",
+    "@formatjs/intl-pluralrules": "^4.0.22",
     "@fullcalendar/common": "5.1.0",
     "@fullcalendar/core": "5.1.0",
     "@fullcalendar/daygrid": "5.1.0",
@@ -66,12 +66,9 @@
     "@polymer/iron-autogrow-textarea": "^3.0.1",
     "@polymer/iron-flex-layout": "^3.0.1",
     "@polymer/iron-icon": "^3.0.1",
-    "@polymer/iron-image": "^3.0.1",
     "@polymer/iron-input": "^3.0.1",
-    "@polymer/iron-label": "^3.0.1",
     "@polymer/iron-overlay-behavior": "^3.0.2",
     "@polymer/iron-resizable-behavior": "^3.0.1",
-    "@polymer/paper-card": "^3.0.1",
     "@polymer/paper-checkbox": "^3.1.0",
     "@polymer/paper-dialog": "^3.0.1",
     "@polymer/paper-dialog-behavior": "^3.0.1",
@@ -101,25 +98,26 @@
     "@webcomponents/webcomponentsjs": "^2.2.7",
     "chart.js": "^2.9.4",
     "chartjs-chart-timeline": "^0.4.0",
-    "comlink": "^4.3.0",
+    "comlink": "^4.3.1",
     "core-js": "^3.6.5",
-    "cropperjs": "^1.5.7",
+    "cropperjs": "^1.5.11",
     "deep-clone-simple": "^1.1.1",
     "deep-freeze": "^0.0.1",
     "fecha": "^4.2.0",
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
-    "hls.js": "^1.0.3",
+    "hls.js": "^1.0.5",
     "home-assistant-js-websocket": "^5.10.0",
-    "idb-keyval": "^3.2.0",
-    "intl-messageformat": "^9.6.13",
-    "js-yaml": "^3.13.1",
+    "idb-keyval": "^5.0.5",
+    "intl-messageformat": "^9.6.16",
+    "js-yaml": "^4.1.0",
     "leaflet": "^1.7.1",
     "leaflet-draw": "^1.0.4",
     "lit": "^2.0.0-rc.2",
-    "marked": "2.0.0",
+    "lit-vaadin-helpers": "^0.1.3",
+    "marked": "^2.0.5",
     "mdn-polyfills": "^5.16.0",
-    "memoize-one": "^5.0.2",
+    "memoize-one": "^5.2.1",
     "node-vibrant": "3.2.1-alpha.1",
     "proxy-polyfill": "^0.3.1",
     "punycode": "^2.1.1",
@@ -129,12 +127,12 @@
     "roboto-fontface": "^0.10.0",
     "sortablejs": "^1.10.2",
     "superstruct": "^0.15.2",
-    "tinykeys": "^1.1.1",
+    "tinykeys": "^1.1.3",
     "tsparticles": "^1.19.2",
     "unfetch": "^4.1.0",
-    "vis-data": "^7.1.1",
+    "vis-data": "^7.1.2",
     "vis-network": "^8.5.4",
-    "vue": "^2.6.11",
+    "vue": "^2.6.12",
     "vue2-daterange-picker": "^0.5.1",
     "web-animations-js": "^2.3.2",
     "workbox-cacheable-response": "^6.1.5",
@@ -146,7 +144,7 @@
     "xss": "^1.0.9"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.0",
+    "@babel/core": "^7.14.3",
     "@babel/plugin-external-helpers": "^7.12.13",
     "@babel/plugin-proposal-class-properties": "^7.13.0",
     "@babel/plugin-proposal-decorators": "^7.13.15",
@@ -155,7 +153,7 @@
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-import-meta": "^7.10.4",
-    "@babel/preset-env": "^7.14.0",
+    "@babel/preset-env": "^7.14.2",
     "@babel/preset-typescript": "^7.13.0",
     "@koa/cors": "^3.1.0",
     "@open-wc/dev-server-hmr": "^0.0.2",
@@ -164,16 +162,13 @@
     "@rollup/plugin-json": "^4.0.3",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
-    "@types/chai": "^4.1.7",
-    "@types/chromecast-caf-receiver": "^5.0.11",
+    "@types/chromecast-caf-receiver": "5.0.12",
     "@types/chromecast-caf-sender": "^1.0.3",
-    "@types/js-yaml": "^3.12.1",
+    "@types/js-yaml": "^4.0.1",
     "@types/leaflet": "^1.7.0",
     "@types/leaflet-draw": "^1.0.3",
-    "@types/marked": "^1.2.2",
-    "@types/memoize-one": "4.1.0",
-    "@types/mocha": "^7.0.2",
-    "@types/resize-observer-browser": "^0.1.3",
+    "@types/marked": "^2.0.3",
+    "@types/mocha": "^8.2.2",
     "@types/sortablejs": "^1.10.6",
     "@types/webspeechapi": "^0.0.29",
     "@typescript-eslint/eslint-plugin": "^4.22.0",
@@ -181,7 +176,7 @@
     "@web/dev-server": "^0.0.24",
     "@web/dev-server-rollup": "^0.2.11",
     "babel-loader": "^8.1.0",
-    "chai": "^4.2.0",
+    "chai": "^4.3.4",
     "cpx": "^1.5.0",
     "del": "^4.0.0",
     "eslint": "^7.25.0",
@@ -195,7 +190,7 @@
     "eslint-plugin-wc": "^1.3.0",
     "fancy-log": "^1.3.3",
     "fs-extra": "^7.0.1",
-    "gulp": "^4.0.0",
+    "gulp": "^4.0.2",
     "gulp-foreach": "^0.1.0",
     "gulp-json-transform": "^0.4.6",
     "gulp-merge-json": "^1.3.1",
@@ -209,7 +204,7 @@
     "magic-string": "^0.25.7",
     "map-stream": "^0.0.7",
     "merge-stream": "^1.0.1",
-    "mocha": "^7.2.0",
+    "mocha": "^8.4.0",
     "object-hash": "^2.0.3",
     "open": "^7.0.4",
     "prettier": "^2.0.4",
@@ -219,13 +214,13 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-terser": "^5.3.0",
     "rollup-plugin-visualizer": "^4.0.4",
-    "serve": "^11.3.0",
-    "sinon": "^7.3.1",
+    "serve": "^11.3.2",
+    "sinon": "^11.0.0",
     "source-map-url": "^0.4.0",
     "systemjs": "^6.3.2",
-    "terser-webpack-plugin": "^5.1.1",
+    "terser-webpack-plugin": "^5.1.2",
     "ts-lit-plugin": "^1.2.1",
-    "ts-mocha": "^7.0.0",
+    "ts-mocha": "^8.0.0",
     "typescript": "^4.2.4",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",

setup.py

@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20210518.0",
+    version="20210603.0",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",

src/common/datetime/format_date.ts

@@ -1,21 +1,32 @@
 import { format } from "fecha";
-import { FrontendTranslationData } from "../../data/translation";
+import memoizeOne from "memoize-one";
+import { FrontendLocaleData } from "../../data/translation";
 import { toLocaleDateStringSupportsOptions } from "./check_options_support";
 
+const formatDateMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(locale.language, {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    })
+);
+
 export const formatDate = toLocaleDateStringSupportsOptions
-  ? (dateObj: Date, locales: FrontendTranslationData) =>
-      dateObj.toLocaleDateString(locales.language, {
-        year: "numeric",
-        month: "long",
-        day: "numeric",
-      })
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatDateMem(locale).format(dateObj)
   : (dateObj: Date) => format(dateObj, "longDate");
 
+const formatDateWeekdayMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(locale.language, {
+      weekday: "long",
+      month: "long",
+      day: "numeric",
+    })
+);
+
 export const formatDateWeekday = toLocaleDateStringSupportsOptions
-  ? (dateObj: Date, locales: FrontendTranslationData) =>
-      dateObj.toLocaleDateString(locales.language, {
-        weekday: "long",
-        month: "short",
-        day: "numeric",
-      })
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatDateWeekdayMem(locale).format(dateObj)
   : (dateObj: Date) => format(dateObj, "dddd, MMM D");

src/common/datetime/format_date_time.ts

@@ -1,26 +1,42 @@
 import { format } from "fecha";
-import { FrontendTranslationData } from "../../data/translation";
+import memoizeOne from "memoize-one";
+import { FrontendLocaleData } from "../../data/translation";
 import { toLocaleStringSupportsOptions } from "./check_options_support";
+import { useAmPm } from "./use_am_pm";
+
+const formatDateTimeMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(locale.language, {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+      hour12: useAmPm(locale),
+    })
+);
 
 export const formatDateTime = toLocaleStringSupportsOptions
-  ? (dateObj: Date, locales: FrontendTranslationData) =>
-      dateObj.toLocaleString(locales.language, {
-        year: "numeric",
-        month: "long",
-        day: "numeric",
-        hour: "numeric",
-        minute: "2-digit",
-      })
-  : (dateObj: Date) => format(dateObj, "MMMM D, YYYY, HH:mm");
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatDateTimeMem(locale).format(dateObj)
+  : (dateObj: Date, locale: FrontendLocaleData) =>
+      format(dateObj, "MMMM D, YYYY, HH:mm" + useAmPm(locale) ? " A" : "");
+
+const formatDateTimeWithSecondsMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(locale.language, {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: useAmPm(locale),
+    })
+);
 
 export const formatDateTimeWithSeconds = toLocaleStringSupportsOptions
-  ? (dateObj: Date, locales: FrontendTranslationData) =>
-      dateObj.toLocaleString(locales.language, {
-        year: "numeric",
-        month: "long",
-        day: "numeric",
-        hour: "numeric",
-        minute: "2-digit",
-        second: "2-digit",
-      })
-  : (dateObj: Date) => format(dateObj, "MMMM D, YYYY, HH:mm:ss");
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatDateTimeWithSecondsMem(locale).format(dateObj)
+  : (dateObj: Date, locale: FrontendLocaleData) =>
+      format(dateObj, "MMMM D, YYYY, HH:mm:ss" + useAmPm(locale) ? " A" : "");

src/common/datetime/format_time.ts

@@ -1,29 +1,52 @@
 import { format } from "fecha";
-import { FrontendTranslationData } from "../../data/translation";
+import memoizeOne from "memoize-one";
+import { FrontendLocaleData } from "../../data/translation";
 import { toLocaleTimeStringSupportsOptions } from "./check_options_support";
+import { useAmPm } from "./use_am_pm";
+
+const formatTimeMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(locale.language, {
+      hour: "numeric",
+      minute: "2-digit",
+      hour12: useAmPm(locale),
+    })
+);
 
 export const formatTime = toLocaleTimeStringSupportsOptions
-  ? (dateObj: Date, locales: FrontendTranslationData) =>
-      dateObj.toLocaleTimeString(locales.language, {
-        hour: "numeric",
-        minute: "2-digit",
-      })
-  : (dateObj: Date) => format(dateObj, "shortTime");
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatTimeMem(locale).format(dateObj)
+  : (dateObj: Date, locale: FrontendLocaleData) =>
+      format(dateObj, "shortTime" + useAmPm(locale) ? " A" : "");
+
+const formatTimeWithSecondsMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(locale.language, {
+      hour: "numeric",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: useAmPm(locale),
+    })
+);
 
 export const formatTimeWithSeconds = toLocaleTimeStringSupportsOptions
-  ? (dateObj: Date, locales: FrontendTranslationData) =>
-      dateObj.toLocaleTimeString(locales.language, {
-        hour: "numeric",
-        minute: "2-digit",
-        second: "2-digit",
-      })
-  : (dateObj: Date) => format(dateObj, "mediumTime");
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatTimeWithSecondsMem(locale).format(dateObj)
+  : (dateObj: Date, locale: FrontendLocaleData) =>
+      format(dateObj, "mediumTime" + useAmPm(locale) ? " A" : "");
+
+const formatTimeWeekdayMem = memoizeOne(
+  (locale: FrontendLocaleData) =>
+    new Intl.DateTimeFormat(locale.language, {
+      weekday: "long",
+      hour: "numeric",
+      minute: "2-digit",
+      hour12: useAmPm(locale),
+    })
+);
 
 export const formatTimeWeekday = toLocaleTimeStringSupportsOptions
-  ? (dateObj: Date, locales: FrontendTranslationData) =>
-      dateObj.toLocaleTimeString(locales.language, {
-        weekday: "long",
-        hour: "numeric",
-        minute: "2-digit",
-      })
-  : (dateObj: Date) => format(dateObj, "dddd, HH:mm");
+  ? (dateObj: Date, locale: FrontendLocaleData) =>
+      formatTimeWeekdayMem(locale).format(dateObj)
+  : (dateObj: Date, locale: FrontendLocaleData) =>
+      format(dateObj, "dddd, HH:mm" + useAmPm(locale) ? " A" : "");

src/common/datetime/use_am_pm.ts

@@ -0,0 +1,15 @@
+import { FrontendLocaleData, TimeFormat } from "../../data/translation";
+
+export const useAmPm = (locale: FrontendLocaleData): boolean => {
+  if (
+    locale.time_format === TimeFormat.language ||
+    locale.time_format === TimeFormat.system
+  ) {
+    const testLanguage =
+      locale.time_format === TimeFormat.language ? locale.language : undefined;
+    const test = new Date().toLocaleString(testLanguage);
+    return test.includes("AM") || test.includes("PM");
+  }
+
+  return locale.time_format === TimeFormat.am_pm;
+};

src/common/dom/apply_themes_on_element.ts

@@ -1,4 +1,4 @@
-import { Theme } from "../../data/ws-themes";
+import { ThemeVars } from "../../data/ws-themes";
 import { darkStyles, derivedStyles } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import {
@@ -23,62 +23,90 @@ let PROCESSED_THEMES: Record<string, ProcessedTheme> = {};
  * Apply a theme to an element by setting the CSS variables on it.
  *
  * element: Element to apply theme on.
- * themes: HASS Theme information
- * selectedTheme: selected theme.
+ * themes: HASS theme information.
+ * selectedTheme: Selected theme.
+ * themeSettings: Settings such as selected dark mode and colors.
  */
 export const applyThemesOnElement = (
   element,
   themes: HomeAssistant["themes"],
   selectedTheme?: string,
-  themeOptions?: Partial<HomeAssistant["selectedTheme"]>
+  themeSettings?: Partial<HomeAssistant["selectedTheme"]>
 ) => {
   let cacheKey = selectedTheme;
-  let themeRules: Partial<Theme> = {};
+  let themeRules: Partial<ThemeVars> = {};
 
-  if (selectedTheme === "default" && themeOptions) {
-    if (themeOptions.dark) {
+  if (themeSettings) {
+    if (themeSettings.dark) {
       cacheKey = `${cacheKey}__dark`;
-      themeRules = darkStyles;
-      if (themeOptions.primaryColor) {
+      themeRules = { ...darkStyles };
+    }
+
+    if (selectedTheme === "default") {
+      // Determine the primary and accent colors from the current settings.
+      // Fallbacks are implicitly the HA default blue and orange or the
+      // derived "darkStyles" values, depending on the light vs dark mode.
+      const primaryColor = themeSettings.primaryColor;
+      const accentColor = themeSettings.accentColor;
+
+      if (themeSettings.dark && primaryColor) {
         themeRules["app-header-background-color"] = hexBlend(
-          themeOptions.primaryColor,
+          primaryColor,
           "#121212",
           8
         );
       }
-    }
-    if (themeOptions.primaryColor) {
-      cacheKey = `${cacheKey}__primary_${themeOptions.primaryColor}`;
-      const rgbPrimaryColor = hex2rgb(themeOptions.primaryColor);
-      const labPrimaryColor = rgb2lab(rgbPrimaryColor);
-      themeRules["primary-color"] = themeOptions.primaryColor;
-      const rgbLigthPrimaryColor = lab2rgb(labBrighten(labPrimaryColor));
-      themeRules["light-primary-color"] = rgb2hex(rgbLigthPrimaryColor);
-      themeRules["dark-primary-color"] = lab2hex(labDarken(labPrimaryColor));
-      themeRules["text-primary-color"] =
-        rgbContrast(rgbPrimaryColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
-      themeRules["text-light-primary-color"] =
-        rgbContrast(rgbLigthPrimaryColor, [33, 33, 33]) < 6
-          ? "#fff"
-          : "#212121";
-      themeRules["state-icon-color"] = themeRules["dark-primary-color"];
-    }
-    if (themeOptions.accentColor) {
-      cacheKey = `${cacheKey}__accent_${themeOptions.accentColor}`;
-      themeRules["accent-color"] = themeOptions.accentColor;
-      const rgbAccentColor = hex2rgb(themeOptions.accentColor);
-      themeRules["text-accent-color"] =
-        rgbContrast(rgbAccentColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
-    }
 
-    // Nothing was changed
-    if (element._themes?.cacheKey === cacheKey) {
-      return;
+      if (primaryColor) {
+        cacheKey = `${cacheKey}__primary_${primaryColor}`;
+        const rgbPrimaryColor = hex2rgb(primaryColor);
+        const labPrimaryColor = rgb2lab(rgbPrimaryColor);
+        themeRules["primary-color"] = primaryColor;
+        const rgbLightPrimaryColor = lab2rgb(labBrighten(labPrimaryColor));
+        themeRules["light-primary-color"] = rgb2hex(rgbLightPrimaryColor);
+        themeRules["dark-primary-color"] = lab2hex(labDarken(labPrimaryColor));
+        themeRules["text-primary-color"] =
+          rgbContrast(rgbPrimaryColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
+        themeRules["text-light-primary-color"] =
+          rgbContrast(rgbLightPrimaryColor, [33, 33, 33]) < 6
+            ? "#fff"
+            : "#212121";
+        themeRules["state-icon-color"] = themeRules["dark-primary-color"];
+      }
+      if (accentColor) {
+        cacheKey = `${cacheKey}__accent_${accentColor}`;
+        themeRules["accent-color"] = accentColor;
+        const rgbAccentColor = hex2rgb(accentColor);
+        themeRules["text-accent-color"] =
+          rgbContrast(rgbAccentColor, [33, 33, 33]) < 6 ? "#fff" : "#212121";
+      }
+
+      // Nothing was changed
+      if (element._themes?.cacheKey === cacheKey) {
+        return;
+      }
     }
   }
 
-  if (selectedTheme && themes.themes[selectedTheme]) {
-    themeRules = themes.themes[selectedTheme];
+  // Custom theme logic (not relevant for default theme, since it would override
+  // the derived calculations from above)
+  if (
+    selectedTheme &&
+    selectedTheme !== "default" &&
+    themes.themes[selectedTheme]
+  ) {
+    // Apply theme vars that are relevant for all modes (but extract the "modes" section first)
+    const { modes, ...baseThemeRules } = themes.themes[selectedTheme];
+    themeRules = { ...themeRules, ...baseThemeRules };
+
+    // Apply theme vars for the specific mode if available
+    if (modes) {
+      if (themeSettings?.dark) {
+        themeRules = { ...themeRules, ...modes.dark };
+      } else {
+        themeRules = { ...themeRules, ...modes.light };
+      }
+    }
   }
 
   if (!element._themes?.keys && !Object.keys(themeRules).length) {
@@ -106,12 +134,12 @@ export const applyThemesOnElement = (
 
 const processTheme = (
   cacheKey: string,
-  theme: Partial<Theme>
+  theme: Partial<ThemeVars>
 ): ProcessedTheme | undefined => {
   if (!theme || !Object.keys(theme).length) {
     return undefined;
   }
-  const combinedTheme: Partial<Theme> = {
+  const combinedTheme: Partial<ThemeVars> = {
     ...derivedStyles,
     ...theme,
   };

src/common/dom/get_main_window.ts

@@ -0,0 +1,8 @@
+import { MAIN_WINDOW_NAME } from "../../data/main_window";
+
+export const mainWindow =
+  window.name === MAIN_WINDOW_NAME
+    ? window
+    : parent.name === MAIN_WINDOW_NAME
+    ? parent
+    : top;

src/common/dom/setup-leaflet-map.ts

@@ -6,8 +6,7 @@ export type LeafletDrawModuleType = typeof import("leaflet-draw");
 
 export const setupLeafletMap = async (
   mapElement: HTMLElement,
-  darkMode?: boolean,
-  draw = false
+  darkMode?: boolean
 ): Promise<[Map, LeafletModuleType, TileLayer]> => {
   if (!mapElement.parentNode) {
     throw new Error("Cannot setup Leaflet map on disconnected element");
@@ -17,10 +16,6 @@ export const setupLeafletMap = async (
     .default as LeafletModuleType;
   Leaflet.Icon.Default.imagePath = "/static/images/leaflet/images/";
 
-  if (draw) {
-    await import("leaflet-draw");
-  }
-
   const map = Leaflet.map(mapElement);
   const style = document.createElement("link");
   style.setAttribute("href", "/static/images/leaflet/leaflet.css");

src/common/dom/speech-recognition.ts

@@ -1,14 +1,7 @@
-/* eslint-disable */
-// @ts-ignore
 export const SpeechRecognition =
-  // @ts-ignore
   window.SpeechRecognition || window.webkitSpeechRecognition;
-// @ts-ignore
 export const SpeechGrammarList =
-  // @ts-ignore
   window.SpeechGrammarList || window.webkitSpeechGrammarList;
-// @ts-ignore
 export const SpeechRecognitionEvent =
-  // @ts-ignore
+  // @ts-expect-error
   window.SpeechRecognitionEvent || window.webkitSpeechRecognitionEvent;
-/* eslint-enable */

src/common/entity/compute_state_display.ts

@@ -1,6 +1,6 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
-import { FrontendTranslationData } from "../../data/translation";
+import { FrontendLocaleData } from "../../data/translation";
 import { formatDate } from "../datetime/format_date";
 import { formatDateTime } from "../datetime/format_date_time";
 import { formatTime } from "../datetime/format_time";
@@ -11,7 +11,7 @@ import { computeStateDomain } from "./compute_state_domain";
 export const computeStateDisplay = (
   localize: LocalizeFunc,
   stateObj: HassEntity,
-  locale: FrontendTranslationData,
+  locale: FrontendLocaleData,
   state?: string
 ): string => {
   const compareState = state !== undefined ? state : stateObj.state;

src/common/entity/domain_icon.ts

@@ -89,8 +89,6 @@ export const domainIcon = (
   }
 
   // eslint-disable-next-line
-  console.warn(
-    "Unable to find icon for domain " + domain + " (" + stateObj + ")"
-  );
+  console.warn(`Unable to find icon for domain ${domain}`);
   return DEFAULT_DOMAIN_ICON;
 };

src/common/entity/timer_time_remaining.ts

@@ -1,19 +0,0 @@
-import { HassEntity } from "home-assistant-js-websocket";
-import durationToSeconds from "../datetime/duration_to_seconds";
-
-export const timerTimeRemaining = (
-  stateObj: HassEntity
-): undefined | number => {
-  if (!stateObj.attributes.remaining) {
-    return undefined;
-  }
-  let timeRemaining = durationToSeconds(stateObj.attributes.remaining);
-
-  if (stateObj.state === "active") {
-    const now = new Date().getTime();
-    const madeActive = new Date(stateObj.last_changed).getTime();
-    timeRemaining = Math.max(timeRemaining - (now - madeActive) / 1000, 0);
-  }
-
-  return timeRemaining;
-};

src/common/navigate.ts

@@ -1,35 +1,40 @@
 import { fireEvent } from "./dom/fire_event";
+import { mainWindow } from "./dom/get_main_window";
 
 declare global {
   // for fire event
   interface HASSDomEvents {
-    "location-changed": {
-      replace: boolean;
-    };
+    "location-changed": NavigateOptions;
   }
 }
 
-export const navigate = (_node: any, path: string, replace = false) => {
+export interface NavigateOptions {
+  replace?: boolean;
+}
+
+export const navigate = (path: string, options?: NavigateOptions) => {
+  const replace = options?.replace || false;
+
   if (__DEMO__) {
     if (replace) {
-      top.history.replaceState(
-        top.history.state?.root ? { root: true } : null,
+      mainWindow.history.replaceState(
+        mainWindow.history.state?.root ? { root: true } : null,
         "",
-        `${top.location.pathname}#${path}`
+        `${mainWindow.location.pathname}#${path}`
       );
     } else {
-      top.location.hash = path;
+      mainWindow.location.hash = path;
     }
   } else if (replace) {
-    top.history.replaceState(
-      top.history.state?.root ? { root: true } : null,
+    mainWindow.history.replaceState(
+      mainWindow.history.state?.root ? { root: true } : null,
       "",
       path
     );
   } else {
-    top.history.pushState(null, "", path);
+    mainWindow.history.pushState(null, "", path);
   }
-  fireEvent(top, "location-changed", {
+  fireEvent(mainWindow, "location-changed", {
     replace,
   });
 };

src/common/search/search-input.ts

@@ -1,9 +1,16 @@
 import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiClose, mdiMagnify } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
+import type { PaperInputElement } from "@polymer/paper-input/paper-input";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { customElement, property, query } from "lit/decorators";
 import "../../components/ha-svg-icon";
 import { fireEvent } from "../dom/fire_event";
 
@@ -27,18 +34,11 @@ class SearchInput extends LitElement {
     this.shadowRoot!.querySelector("paper-input")!.focus();
   }
 
+  @query("paper-input", true) private _input!: PaperInputElement;
+
   protected render(): TemplateResult {
     return html`
-      <style>
-        .no-underline:not(.focused) {
-          --paper-input-container-underline: {
-            display: none;
-            height: 0;
-          }
-        }
-      </style>
       <paper-input
-        class=${classMap({ "no-underline": this.noUnderline })}
         .autofocus=${this.autofocus}
         .label=${this.label || "Search"}
         .value=${this.filter}
@@ -62,6 +62,17 @@ class SearchInput extends LitElement {
     `;
   }
 
+  protected updated(changedProps: PropertyValues) {
+    if (
+      changedProps.has("noUnderline") &&
+      (this.noUnderline || changedProps.get("noUnderline") !== undefined)
+    ) {
+      (this._input.inputElement!.parentElement!.shadowRoot!.querySelector(
+        "div.unfocused-line"
+      ) as HTMLElement).style.display = this.noUnderline ? "none" : "block";
+    }
+  }
+
   private async _filterChanged(value: string) {
     fireEvent(this, "value-changed", { value: String(value) });
   }

src/common/string/escape_regexp.ts

@@ -0,0 +1,2 @@
+export const escapeRegExp = (text: string): string =>
+  text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");

src/common/string/filter/filter.ts

@@ -92,7 +92,7 @@ function isUpperCaseAtPos(pos: number, word: string, wordLow: string): boolean {
   return word[pos] !== wordLow[pos];
 }
 
-function isPatternInWord(
+export function isPatternInWord(
   patternLow: string,
   patternPos: number,
   patternLen: number,
@@ -121,7 +121,7 @@ enum Arrow {
 }
 
 /**
- * An array representating a fuzzy match.
+ * An array representing a fuzzy match.
  *
  * 0. the score
  * 1. the offset at which matching started

src/common/string/filter/sequence-matching.ts

@@ -5,7 +5,7 @@ import { fuzzyScore } from "./filter";
  *   in that order, allowing for skipping. Ex: "chdr" exists in "chandelier")
  *
  * @param {string} filter - Sequence of letters to check for
- * @param {string} word - Word to check for sequence
+ * @param {ScorableTextItem} item - Item against whose strings will be checked
  *
  * @return {number} Score representing how well the word matches the filter. Return of 0 means no match.
  */

src/common/string/format_number.ts

@@ -1,4 +1,4 @@
-import { FrontendTranslationData, NumberFormat } from "../../data/translation";
+import { FrontendLocaleData, NumberFormat } from "../../data/translation";
 
 /**
  * Formats a number based on the user's preference with thousands separator(s) and decimal character for better legibility.
@@ -9,7 +9,7 @@ import { FrontendTranslationData, NumberFormat } from "../../data/translation";
  */
 export const formatNumber = (
   num: string | number,
-  locale?: FrontendTranslationData,
+  locale?: FrontendLocaleData,
   options?: Intl.NumberFormatOptions
 ): string => {
   let format: string | string[] | undefined;

src/common/string/is_date.ts

@@ -0,0 +1,11 @@
+// https://regex101.com/r/kc5C14/2
+const regExpString = "^\\d{4}-(0[1-9]|1[0-2])-([12]\\d|0[1-9]|3[01])";
+
+const regExp = new RegExp(regExpString + "$");
+// 2nd expression without the "end of string" enforced, so it can be used
+// to just verify the start of a string and then based on that result e.g.
+// check for a full timestamp string efficiently.
+const regExpNoStringEnd = new RegExp(regExpString);
+
+export const isDate = (input: string, allowCharsAfterDate = false): boolean =>
+  allowCharsAfterDate ? regExpNoStringEnd.test(input) : regExp.test(input);

src/common/string/is_timestamp.ts

@@ -0,0 +1,11 @@
+// https://stackoverflow.com/a/14322189/1947205
+// Changes:
+// 1. Do not allow a plus or minus at the start.
+// 2. Enforce that we have a "T" or a blank after the date portion
+//    to ensure we have a timestamp and not only a date.
+// 3. Disallow dates based on week number.
+// 4. Disallow dates only consisting of a year.
+// https://regex101.com/r/kc5C14/3
+const regexp = /^\d{4}-(0[1-9]|1[0-2])-([12]\d|0[1-9]|3[01])[T| ](((([01]\d|2[0-3])((:?)[0-5]\d)?|24:?00)([.,]\d+(?!:))?)(\8[0-5]\d([.,]\d+)?)?([zZ]|([+-])([01]\d|2[0-3]):?([0-5]\d)?)?)$/;
+
+export const isTimestamp = (input: string): boolean => regexp.test(input);

src/common/structs/is-custom-type.ts

@@ -0,0 +1,6 @@
+import { refine, string } from "superstruct";
+
+const isCustomType = (value: string) => value.startsWith("custom:");
+
+export const customType = () =>
+  refine(string(), "custom element type", isCustomType);

src/common/structs/is-entity-id.ts

@@ -1,11 +1,6 @@
 import { refine, string } from "superstruct";
 
-const isEntityId = (value: string): boolean => {
-  if (!value.includes(".")) {
-    return false;
-  }
-  return true;
-};
+const isEntityId = (value: string): boolean => value.includes(".");
 
 export const entityId = () =>
   refine(string(), "entity ID (domain.entity)", isEntityId);

src/common/structs/is-icon.ts

@@ -1,10 +1,5 @@
 import { refine, string } from "superstruct";
 
-const isIcon = (value: string) => {
-  if (!value.includes(":")) {
-    return false;
-  }
-  return true;
-};
+const isIcon = (value: string) => value.includes(":");
 
 export const icon = () => refine(string(), "icon (mdi:icon-name)", isIcon);

src/common/translations/localize.ts

@@ -1,4 +1,4 @@
-import { shouldPolyfill } from "@formatjs/intl-pluralrules/should-polyfill";
+import { shouldPolyfill } from "@formatjs/intl-pluralrules/lib/should-polyfill";
 import IntlMessageFormat from "intl-messageformat";
 import { Resources } from "../../types";
 
@@ -86,11 +86,15 @@ export const computeLocalize = async (
       | undefined;
 
     if (!translatedMessage) {
-      translatedMessage = new IntlMessageFormat(
-        translatedValue,
-        language,
-        formats
-      );
+      try {
+        translatedMessage = new IntlMessageFormat(
+          translatedValue,
+          language,
+          formats
+        );
+      } catch (err) {
+        return "Translation error: " + err.message;
+      }
       cache._localizationCache[messageKey] = translatedMessage;
     }
 

src/common/util/debounce.ts

@@ -4,29 +4,25 @@
 // be triggered. The function will be called after it stops being called for
 // N milliseconds. If `immediate` is passed, trigger the function on the
 // leading edge, instead of the trailing.
-// eslint-disable-next-line: ban-types
-export const debounce = <T extends (...args) => unknown>(
-  func: T,
-  wait,
+
+export const debounce = <T extends any[]>(
+  func: (...args: T) => void,
+  wait: number,
   immediate = false
-): T => {
-  let timeout;
-  // @ts-ignore
-  return function (...args) {
-    // @ts-ignore
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const context = this;
+) => {
+  let timeout: number | undefined;
+  return (...args: T): void => {
     const later = () => {
-      timeout = null;
+      timeout = undefined;
       if (!immediate) {
-        func.apply(context, args);
+        func(...args);
       }
     };
     const callNow = immediate && !timeout;
     clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
+    timeout = window.setTimeout(later, wait);
     if (callNow) {
-      func.apply(context, args);
+      func(...args);
     }
   };
 };

src/common/util/promise-timeout.ts

@@ -0,0 +1,10 @@
+export const promiseTimeout = (ms: number, promise: Promise<any>) => {
+  const timeout = new Promise((_resolve, reject) => {
+    setTimeout(() => {
+      reject(`Timed out in ${ms} ms.`);
+    }, ms);
+  });
+
+  // Returns a race between our timeout and the passed in promise
+  return Promise.race([promise, timeout]);
+};

src/components/data-table/ha-data-table.ts

@@ -1,4 +1,4 @@
-import { Layout1d, scroll } from "@lit-labs/virtualizer";
+import { Layout1d, scroll } from "../../resources/lit-virtualizer";
 import deepClone from "deep-clone-simple";
 import {
   css,
@@ -173,8 +173,8 @@ export class HaDataTable extends LitElement {
     this.updateComplete.then(() => this._calcTableHeight());
   }
 
-  protected updated(properties: PropertyValues) {
-    super.updated(properties);
+  public willUpdate(properties: PropertyValues) {
+    super.willUpdate(properties);
 
     if (properties.has("columns")) {
       this._filterable = Object.values(this.columns).some(
@@ -246,7 +246,7 @@ export class HaDataTable extends LitElement {
           aria-rowcount=${this._filteredData.length + 1}
           style=${styleMap({
             height: this.autoHeight
-              ? `${(this._filteredData.length || 1) * 53 + 57}px`
+              ? `${(this._filteredData.length || 1) * 53 + 53}px`
               : `calc(100% - ${this._headerHeight}px)`,
           })}
         >
@@ -340,8 +340,11 @@ export class HaDataTable extends LitElement {
                   ${scroll({
                     items: this._items,
                     layout: Layout1d,
-                    // @ts-expect-error
                     renderItem: (row: DataTableRowData, index) => {
+                      // not sure how this happens...
+                      if (!row) {
+                        return html``;
+                      }
                       if (row.append) {
                         return html`
                           <div class="mdc-data-table__row">${row.content}</div>
@@ -474,15 +477,16 @@ export class HaDataTable extends LitElement {
     }
 
     if (this.appendRow || this.hasFab) {
-      this._items = [...data];
+      const items = [...data];
 
       if (this.appendRow) {
-        this._items.push({ append: true, content: this.appendRow });
+        items.push({ append: true, content: this.appendRow });
       }
 
       if (this.hasFab) {
-        this._items.push({ empty: true });
+        items.push({ empty: true });
       }
+      this._items = items;
     } else {
       this._items = data;
     }
@@ -915,13 +919,11 @@ export class HaDataTable extends LitElement {
           color: var(--secondary-text-color);
         }
         .scroller {
-          display: flex;
-          position: relative;
-          contain: strict;
           height: calc(100% - 57px);
         }
-        .mdc-data-table__table:not(.auto-height) .scroller {
-          overflow: auto;
+
+        .mdc-data-table__table.auto-height .scroller {
+          overflow-y: hidden !important;
         }
         .grows {
           flex-grow: 1;

src/components/device/ha-area-devices-picker.ts

@@ -38,6 +38,7 @@ import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
 import "../ha-svg-icon";
 import "./ha-devices-picker";
+import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
 
 interface DevicesByArea {
   [areaId: string]: AreaDevices;
@@ -49,42 +50,28 @@ interface AreaDevices {
   devices: string[];
 }
 
-const rowRenderer = (
-  root: HTMLElement,
-  _owner,
-  model: { item: AreaDevices }
-) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-    <style>
-      paper-item {
-        width: 100%;
-        margin: -10px 0;
-        padding: 0;
-      }
-      mwc-icon-button {
-        float: right;
-      }
-      .devices {
-        display: none;
-      }
-      .devices.visible {
-        display: block;
-      }
-    </style>
-    <paper-item>
-      <paper-item-body two-line="">
-        <div class='name'>[[item.name]]</div>
-        <div secondary>[[item.devices.length]] devices</div>
-      </paper-item-body>
-    </paper-item>
-    `;
-  }
-  root.querySelector(".name")!.textContent = model.item.name!;
-  root.querySelector(
-    "[secondary]"
-  )!.textContent = `${model.item.devices.length.toString()} devices`;
-};
+const rowRenderer: ComboBoxLitRenderer<AreaDevices> = (item) => html`<style>
+    paper-item {
+      width: 100%;
+      margin: -10px 0;
+      padding: 0;
+    }
+    mwc-icon-button {
+      float: right;
+    }
+    .devices {
+      display: none;
+    }
+    .devices.visible {
+      display: block;
+    }
+  </style>
+  <paper-item>
+    <paper-item-body two-line="">
+      <div class="name">${item.name}</div>
+      <div secondary>${item.devices.length} devices</div>
+    </paper-item-body>
+  </paper-item>`;
 
 @customElement("ha-area-devices-picker")
 export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
@@ -310,7 +297,7 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
         item-label-path="name"
         .items=${areas}
         .value=${this._value}
-        .renderer=${rowRenderer}
+        ${comboBoxRenderer(rowRenderer)}
         @opened-changed=${this._openedChanged}
         @value-changed=${this._areaPicked}
       >

src/components/device/ha-device-action-picker.ts

@@ -4,7 +4,6 @@ import {
   fetchDeviceActions,
   localizeDeviceAutomationAction,
 } from "../../data/device_automation";
-import "../ha-paper-dropdown-menu";
 import { HaDeviceAutomationPicker } from "./ha-device-automation-picker";
 
 @customElement("ha-device-action-picker")

src/components/device/ha-device-condition-picker.ts

@@ -4,7 +4,6 @@ import {
   fetchDeviceConditions,
   localizeDeviceAutomationCondition,
 } from "../../data/device_automation";
-import "../ha-paper-dropdown-menu";
 import { HaDeviceAutomationPicker } from "./ha-device-automation-picker";
 
 @customElement("ha-device-condition-picker")

src/components/device/ha-device-picker.ts

@@ -33,6 +33,7 @@ import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
 import "../ha-combo-box";
 import type { HaComboBox } from "../ha-combo-box";
+import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
 
 interface Device {
   name: string;
@@ -44,27 +45,18 @@ export type HaDevicePickerDeviceFilterFunc = (
   device: DeviceRegistryEntry
 ) => boolean;
 
-const rowRenderer = (root: HTMLElement, _owner, model: { item: Device }) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-    <style>
-      paper-item {
-        margin: -10px 0;
-        padding: 0;
-      }
-    </style>
-    <paper-item>
-      <paper-item-body two-line="">
-        <div class='name'>[[item.name]]</div>
-        <div secondary>[[item.area]]</div>
-      </paper-item-body>
-    </paper-item>
-    `;
-  }
-
-  root.querySelector(".name")!.textContent = model.item.name!;
-  root.querySelector("[secondary]")!.textContent = model.item.area!;
-};
+const rowRenderer: ComboBoxLitRenderer<Device> = (item) => html`<style>
+    paper-item {
+      margin: -10px 0;
+      padding: 0;
+    }
+  </style>
+  <paper-item>
+    <paper-item-body two-line>
+      ${item.name}
+      <span secondary>${item.area}</span>
+    </paper-item-body>
+  </paper-item>`;
 
 @customElement("ha-device-picker")
 export class HaDevicePicker extends SubscribeMixin(LitElement) {

src/components/device/ha-device-trigger-picker.ts

@@ -4,7 +4,6 @@ import {
   fetchDeviceTriggers,
   localizeDeviceAutomationTrigger,
 } from "../../data/device_automation";
-import "../ha-paper-dropdown-menu";
 import { HaDeviceAutomationPicker } from "./ha-device-automation-picker";
 
 @customElement("ha-device-trigger-picker")

src/components/entity/ha-entity-attribute-picker.ts

@@ -12,6 +12,7 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
+import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { PolymerChangedEvent } from "../../polymer-types";
@@ -22,22 +23,13 @@ import "./state-badge";
 
 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
 
-const rowRenderer = (root: HTMLElement, _owner, model: { item: string }) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-      <style>
-        paper-item {
-          margin: -10px;
-          padding: 0;
-        }
-      </style>
-      <paper-item></paper-item>
-    `;
-  }
-  root.querySelector("paper-item")!.textContent = formatAttributeName(
-    model.item
-  );
-};
+const rowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
+    paper-item {
+      margin: -5px -10px;
+      padding: 0;
+    }
+  </style>
+  <paper-item>${formatAttributeName(item)}</paper-item>`;
 
 @customElement("ha-entity-attribute-picker")
 class HaEntityAttributePicker extends LitElement {
@@ -82,8 +74,8 @@ class HaEntityAttributePicker extends LitElement {
       <vaadin-combo-box-light
         .value=${this._value}
         .allowCustomValue=${this.allowCustomValue}
-        .renderer=${rowRenderer}
         attr-for-value="bind-value"
+        ${comboBoxRenderer(rowRenderer)}
         @opened-changed=${this._openedChanged}
         @value-changed=${this._valueChanged}
       >

src/components/entity/ha-entity-picker.ts

@@ -13,6 +13,7 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
+import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
 import { customElement, property, query } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -25,32 +26,19 @@ import "./state-badge";
 
 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
 
-const rowRenderer = (
-  root: HTMLElement,
-  _owner,
-  model: { item: HassEntity }
-) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-      <style>
-        paper-icon-item {
-          margin: -10px;
-          padding: 0;
-        }
-      </style>
-      <paper-icon-item>
-        <state-badge slot="item-icon"></state-badge>
-        <paper-item-body two-line="">
-          <div class='name'></div>
-          <div secondary></div>
-        </paper-item-body>
-      </paper-icon-item>
-    `;
-  }
-  root.querySelector("state-badge")!.stateObj = model.item;
-  root.querySelector(".name")!.textContent = computeStateName(model.item);
-  root.querySelector("[secondary]")!.textContent = model.item.entity_id;
-};
+const rowRenderer: ComboBoxLitRenderer<HassEntity> = (item) => html`<style>
+    paper-icon-item {
+      margin: -10px;
+      padding: 0;
+    }
+  </style>
+  <paper-icon-item>
+    <state-badge slot="item-icon" .stateObj=${item}></state-badge>
+    <paper-item-body two-line="">
+      ${computeStateName(item)}
+      <span secondary>${item.entity_id}</span>
+    </paper-item-body>
+  </paper-icon-item>`;
 
 @customElement("ha-entity-picker")
 export class HaEntityPicker extends LitElement {
@@ -221,7 +209,7 @@ export class HaEntityPicker extends LitElement {
         item-label-path="entity_id"
         .value=${this._value}
         .allowCustomValue=${this.allowCustomEntity}
-        .renderer=${rowRenderer}
+        ${comboBoxRenderer(rowRenderer)}
         @opened-changed=${this._openedChanged}
         @value-changed=${this._valueChanged}
         @filter-changed=${this._filterChanged}

src/components/entity/ha-state-label-badge.ts

@@ -15,7 +15,7 @@ import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { domainIcon } from "../../common/entity/domain_icon";
 import { stateIcon } from "../../common/entity/state_icon";
-import { timerTimeRemaining } from "../../common/entity/timer_time_remaining";
+import { timerTimeRemaining } from "../../data/timer";
 import { formatNumber } from "../../common/string/format_number";
 import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
 import { HomeAssistant } from "../../types";

src/components/ha-addon-picker.ts

@@ -9,32 +9,20 @@ import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
 import { HaComboBox } from "./ha-combo-box";
+import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
 
-const rowRenderer = (
-  root: HTMLElement,
-  _owner,
-  model: { item: HassioAddonInfo }
-) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-    <style>
-      paper-item {
-        margin: -10px 0;
-        padding: 0;
-      }
-    </style>
-    <paper-item>
-      <paper-item-body two-line="">
-        <div class='name'>[[item.name]]</div>
-        <div secondary>[[item.slug]]</div>
-      </paper-item-body>
-    </paper-item>
-    `;
-  }
-
-  root.querySelector(".name")!.textContent = model.item.name;
-  root.querySelector("[secondary]")!.textContent = model.item.slug;
-};
+const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (item) => html`<style>
+    paper-item {
+      margin: -10px 0;
+      padding: 0;
+    }
+  </style>
+  <paper-item>
+    <paper-item-body two-line>
+      ${item.name}
+      <span secondary>${item.slug}</span>
+    </paper-item-body>
+  </paper-item>`;
 
 @customElement("ha-addon-picker")
 class HaAddonPicker extends LitElement {

src/components/ha-area-picker.ts

@@ -14,7 +14,9 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
+import { customElement, property, query, state } from "lit/decorators";
+import { classMap } from "lit/directives/class-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../common/dom/fire_event";
 import { computeDomain } from "../common/entity/compute_domain";
@@ -42,36 +44,20 @@ import { HomeAssistant } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
 import "./ha-svg-icon";
 
-const rowRenderer = (
-  root: HTMLElement,
-  _owner,
-  model: { item: AreaRegistryEntry }
-) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-      <style>
-        paper-item {
-          margin: -10px 0;
-          padding: 0;
-        }
-        paper-item.add-new {
-            font-weight: 500;
-        }
-      </style>
-      <paper-item>
-        <paper-item-body two-line>
-          <div class='name'>[[item.name]]</div>
-        </paper-item-body>
-      </paper-item>
-      `;
-  }
-  root.querySelector(".name")!.textContent = model.item.name!;
-  if (model.item.area_id === "add_new") {
-    root.querySelector("paper-item")!.className = "add-new";
-  } else {
-    root.querySelector("paper-item")!.classList.remove("add-new");
-  }
-};
+const rowRenderer: ComboBoxLitRenderer<AreaRegistryEntry> = (
+  item
+) => html`<style>
+    paper-item {
+      margin: -10px 0;
+      padding: 0;
+    }
+    paper-item.add-new {
+      font-weight: 500;
+    }
+  </style>
+  <paper-item class=${classMap({ "add-new": item.area_id === "add_new" })}>
+    <paper-item-body two-line>${item.name}</paper-item-body>
+  </paper-item>`;
 
 @customElement("ha-area-picker")
 export class HaAreaPicker extends SubscribeMixin(LitElement) {
@@ -340,8 +326,8 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
         item-id-path="area_id"
         item-label-path="name"
         .value=${this._value}
-        .renderer=${rowRenderer}
         .disabled=${this.disabled}
+        ${comboBoxRenderer(rowRenderer)}
         @opened-changed=${this._openedChanged}
         @value-changed=${this._areaChanged}
       >

src/components/ha-attributes.ts

@@ -1,20 +1,24 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
-import { until } from "lit/directives/until";
+import { customElement, property, state } from "lit/decorators";
 import { haStyle } from "../resources/styles";
+import { HomeAssistant } from "../types";
 import hassAttributeUtil, {
   formatAttributeName,
+  formatAttributeValue,
 } from "../util/hass-attributes-util";
-
-let jsYamlPromise: Promise<typeof import("js-yaml")>;
+import "./ha-expansion-panel";
 
 @customElement("ha-attributes")
 class HaAttributes extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property() public stateObj?: HassEntity;
 
   @property({ attribute: "extra-filters" }) public extraFilters?: string;
 
+  @state() private _expanded = false;
+
   protected render(): TemplateResult {
     if (!this.stateObj) {
       return html``;
@@ -30,24 +34,37 @@ class HaAttributes extends LitElement {
     }
 
     return html`
-      <hr />
-      <div>
-        ${attributes.map(
-          (attribute) => html`
-            <div class="data-entry">
-              <div class="key">${formatAttributeName(attribute)}</div>
-              <div class="value">${this.formatAttribute(attribute)}</div>
+      <ha-expansion-panel
+        .header=${this.hass.localize(
+          "ui.components.attributes.expansion_header"
+        )}
+        outlined
+        @expanded-will-change=${this.expandedChanged}
+      >
+        <div class="attribute-container">
+          ${this._expanded
+            ? html`
+                ${attributes.map(
+                  (attribute) => html`
+                    <div class="data-entry">
+                      <div class="key">${formatAttributeName(attribute)}</div>
+                      <div class="value">
+                        ${this.formatAttribute(attribute)}
+                      </div>
+                    </div>
+                  `
+                )}
+              `
+            : ""}
+        </div>
+      </ha-expansion-panel>
+      ${this.stateObj.attributes.attribution
+        ? html`
+            <div class="attribution">
+              ${this.stateObj.attributes.attribution}
             </div>
           `
-        )}
-        ${this.stateObj.attributes.attribution
-          ? html`
-              <div class="attribution">
-                ${this.stateObj.attributes.attribution}
-              </div>
-            `
-          : ""}
-      </div>
+        : ""}
     `;
   }
 
@@ -55,6 +72,9 @@ class HaAttributes extends LitElement {
     return [
       haStyle,
       css`
+        .attribute-container {
+          margin-bottom: 8px;
+        }
         .data-entry {
           display: flex;
           flex-direction: row;
@@ -71,6 +91,7 @@ class HaAttributes extends LitElement {
         .attribution {
           color: var(--secondary-text-color);
           text-align: center;
+          margin-top: 16px;
         }
         pre {
           font-family: inherit;
@@ -102,38 +123,11 @@ class HaAttributes extends LitElement {
       return "-";
     }
     const value = this.stateObj.attributes[attribute];
-    return this.formatAttributeValue(value);
+    return formatAttributeValue(this.hass, value);
   }
 
-  private formatAttributeValue(value: any): string | TemplateResult {
-    if (value === null) {
-      return "-";
-    }
-    // YAML handling
-    if (
-      (Array.isArray(value) && value.some((val) => val instanceof Object)) ||
-      (!Array.isArray(value) && value instanceof Object)
-    ) {
-      if (!jsYamlPromise) {
-        jsYamlPromise = import("js-yaml");
-      }
-      const yaml = jsYamlPromise.then((jsYaml) => jsYaml.safeDump(value));
-      return html` <pre>${until(yaml, "")}</pre> `;
-    }
-    // URL handling
-    if (typeof value === "string" && value.startsWith("http")) {
-      try {
-        // If invalid URL, exception will be raised
-        const url = new URL(value);
-        if (url.protocol === "http:" || url.protocol === "https:")
-          return html`<a target="_blank" rel="noreferrer" href="${value}"
-            >${value}</a
-          >`;
-      } catch (_) {
-        // Nothing to do here
-      }
-    }
-    return Array.isArray(value) ? value.join(", ") : value;
+  private expandedChanged(ev) {
+    this._expanded = ev.detail.expanded;
   }
 }
 

src/components/ha-button-menu.ts

@@ -12,6 +12,8 @@ export class HaButtonMenu extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
+  @property({ type: Boolean }) public fixed = false;
+
   @query("mwc-menu", true) private _menu?: Menu;
 
   public get items() {
@@ -29,6 +31,7 @@ export class HaButtonMenu extends LitElement {
       </div>
       <mwc-menu
         .corner=${this.corner}
+        .fixed=${this.fixed}
         .multi=${this.multi}
         .activatable=${this.activatable}
       >

src/components/ha-circular-progress.ts

@@ -1,4 +1,5 @@
 import { CircularProgress } from "@material/mwc-circular-progress";
+import { CSSResultGroup, css } from "lit";
 import { customElement, property } from "lit/decorators";
 
 @customElement("ha-circular-progress")
@@ -41,6 +42,17 @@ export class HaCircularProgress extends CircularProgress {
   public get indeterminate() {
     return this.active;
   }
+
+  static get styles(): CSSResultGroup {
+    return [
+      super.styles,
+      css`
+        :host {
+          overflow: hidden;
+        }
+      `,
+    ];
+  }
 }
 
 declare global {

src/components/ha-combo-box.ts

@@ -6,31 +6,20 @@ import "@polymer/paper-item/paper-item-body";
 import "@polymer/paper-listbox/paper-listbox";
 import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { ComboBoxLitRenderer, comboBoxRenderer } from "lit-vaadin-helpers";
+import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
 import "./ha-svg-icon";
 
-const defaultRowRenderer = (
-  root: HTMLElement,
-  _owner,
-  model: { item: any }
-) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-    <style>
-      paper-item {
-        margin: -5px -10px;
-        padding: 0;
-      }
-    </style>
-    <paper-item></paper-item>
-    `;
-  }
-
-  root.querySelector("paper-item")!.textContent = model.item;
-};
+const defaultRowRenderer: ComboBoxLitRenderer<string> = (item) => html`<style>
+    paper-item {
+      margin: -5px -10px;
+      padding: 0;
+    }
+  </style>
+  <paper-item>${item}</paper-item>`;
 
 @customElement("ha-combo-box")
 export class HaComboBox extends LitElement {
@@ -53,11 +42,7 @@ export class HaComboBox extends LitElement {
 
   @property({ attribute: "item-id-path" }) public itemIdPath?: string;
 
-  @property() public renderer?: (
-    root: HTMLElement,
-    owner: HTMLElement,
-    model: { item: any }
-  ) => void;
+  @property() public renderer?: ComboBoxLitRenderer<any>;
 
   @property({ type: Boolean }) public disabled?: boolean;
 
@@ -90,9 +75,9 @@ export class HaComboBox extends LitElement {
         .value=${this.value}
         .items=${this.items}
         .filteredItems=${this.filteredItems}
-        .renderer=${this.renderer || defaultRowRenderer}
         .allowCustomValue=${this.allowCustomValue}
         .disabled=${this.disabled}
+        ${comboBoxRenderer(this.renderer || defaultRowRenderer)}
         @opened-changed=${this._openedChanged}
         @filter-changed=${this._filterChanged}
         @value-changed=${this._valueChanged}

src/components/ha-cover-controls.ts

@@ -23,8 +23,8 @@ class HaCoverControls extends LitElement {
 
   @state() private _entityObj?: CoverEntity;
 
-  protected updated(changedProperties: PropertyValues): void {
-    super.updated(changedProperties);
+  public willUpdate(changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties);
 
     if (changedProperties.has("stateObj")) {
       this._entityObj = new CoverEntity(this.hass, this.stateObj);

src/components/ha-cover-tilt-controls.ts

@@ -22,8 +22,8 @@ class HaCoverTiltControls extends LitElement {
 
   @state() private _entityObj?: CoverEntity;
 
-  protected updated(changedProperties: PropertyValues): void {
-    super.updated(changedProperties);
+  public willUpdate(changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties);
 
     if (changedProperties.has("stateObj")) {
       this._entityObj = new CoverEntity(this.hass, this.stateObj);

src/components/ha-date-range-picker.ts

@@ -14,6 +14,7 @@ import {
 } from "lit";
 import { customElement, property } from "lit/decorators";
 import { formatDateTime } from "../common/datetime/format_date_time";
+import { useAmPm } from "../common/datetime/use_am_pm";
 import { computeRTLDirection } from "../common/util/compute_rtl";
 import { HomeAssistant } from "../types";
 import "./date-range-picker";
@@ -43,7 +44,7 @@ export class HaDateRangePicker extends LitElement {
     if (changedProps.has("hass")) {
       const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
       if (!oldHass || oldHass.locale !== this.hass.locale) {
-        this._hour24format = this._compute24hourFormat();
+        this._hour24format = !useAmPm(this.hass.locale);
         this._rtlDirection = computeRTLDirection(this.hass);
       }
     }
@@ -106,16 +107,6 @@ export class HaDateRangePicker extends LitElement {
     `;
   }
 
-  private _compute24hourFormat() {
-    return (
-      new Intl.DateTimeFormat(this.hass.language, {
-        hour: "numeric",
-      })
-        .formatToParts(new Date(2020, 0, 1, 13))
-        .find((part) => part.type === "hour")!.value.length === 2
-    );
-  }
-
   private _setDateRange(ev: CustomEvent<ActionDetail>) {
     const dateRange = Object.values(this.ranges!)[ev.detail.index];
     const dateRangePicker = this._dateRangePicker;

src/components/ha-expansion-panel.ts

@@ -3,6 +3,7 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../common/dom/fire_event";
+import { nextRender } from "../common/util/render-status";
 import "./ha-svg-icon";
 
 @customElement("ha-expansion-panel")
@@ -13,12 +14,17 @@ class HaExpansionPanel extends LitElement {
 
   @property() header?: string;
 
+  @property() secondary?: string;
+
   @query(".container") private _container!: HTMLDivElement;
 
   protected render(): TemplateResult {
     return html`
       <div class="summary" @click=${this._toggleContainer}>
-        <slot name="header">${this.header}</slot>
+        <slot class="header" name="header">
+          ${this.header}
+          <slot class="secondary" name="secondary">${this.secondary}</slot>
+        </slot>
         <ha-svg-icon
           .path=${mdiChevronDown}
           class="summary-icon ${classMap({ expanded: this.expanded })}"
@@ -37,17 +43,25 @@ class HaExpansionPanel extends LitElement {
     this._container.style.removeProperty("height");
   }
 
-  private _toggleContainer(): void {
+  private async _toggleContainer(): Promise<void> {
+    const newExpanded = !this.expanded;
+    fireEvent(this, "expanded-will-change", { expanded: newExpanded });
+
+    if (newExpanded) {
+      // allow for dynamic content to be rendered
+      await nextRender();
+    }
+
     const scrollHeight = this._container.scrollHeight;
     this._container.style.height = `${scrollHeight}px`;
 
-    if (this.expanded) {
+    if (!newExpanded) {
       setTimeout(() => {
         this._container.style.height = "0px";
       }, 0);
     }
 
-    this.expanded = !this.expanded;
+    this.expanded = newExpanded;
     fireEvent(this, "expanded-changed", { expanded: this.expanded });
   }
 
@@ -97,6 +111,16 @@ class HaExpansionPanel extends LitElement {
       .container.expanded {
         height: auto;
       }
+
+      .header {
+        display: block;
+      }
+
+      .secondary {
+        display: block;
+        color: var(--secondary-text-color);
+        font-size: 12px;
+      }
     `;
   }
 }
@@ -111,5 +135,8 @@ declare global {
     "expanded-changed": {
       expanded: boolean;
     };
+    "expanded-will-change": {
+      expanded: boolean;
+    };
   }
 }

src/components/ha-gauge.ts

@@ -4,17 +4,17 @@ import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import { formatNumber } from "../common/string/format_number";
 import { afterNextRender } from "../common/util/render-status";
-import { FrontendTranslationData } from "../data/translation";
+import { FrontendLocaleData } from "../data/translation";
 import { getValueInPercentage, normalize } from "../util/calculate";
 
+// Workaround for https://github.com/home-assistant/frontend/issues/6467
+const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+
 const getAngle = (value: number, min: number, max: number) => {
   const percentage = getValueInPercentage(normalize(value, min, max), min, max);
   return (percentage * 180) / 100;
 };
 
-// Workaround for https://github.com/home-assistant/frontend/issues/6467
-const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
-
 @customElement("ha-gauge")
 export class Gauge extends LitElement {
   @property({ type: Number }) public min = 0;
@@ -23,7 +23,7 @@ export class Gauge extends LitElement {
 
   @property({ type: Number }) public value = 0;
 
-  @property() public locale!: FrontendTranslationData;
+  @property() public locale!: FrontendLocaleData;
 
   @property() public label = "";
 

src/components/ha-hls-player.ts

@@ -13,6 +13,11 @@ import { nextRender } from "../common/util/render-status";
 import { getExternalConfig } from "../external_app/external_config";
 import type { HomeAssistant } from "../types";
 
+type HlsLite = Omit<
+  HlsType,
+  "subtitleTrackController" | "audioTrackController" | "emeController"
+>;
+
 @customElement("ha-hls-player")
 class HaHLSPlayer extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -39,7 +44,7 @@ class HaHLSPlayer extends LitElement {
 
   @state() private _attached = false;
 
-  private _hlsPolyfillInstance?: HlsType;
+  private _hlsPolyfillInstance?: HlsLite;
 
   private _useExoPlayer = false;
 
@@ -103,7 +108,8 @@ class HaHLSPlayer extends LitElement {
     const useExoPlayerPromise = this._getUseExoPlayer();
     const masterPlaylistPromise = fetch(this.url);
 
-    const Hls = (await import("hls.js")).default;
+    const Hls: typeof HlsType = (await import("hls.js/dist/hls.light.min.js"))
+      .default;
     let hlsSupported = Hls.isSupported();
 
     if (!hlsSupported) {
@@ -182,7 +188,7 @@ class HaHLSPlayer extends LitElement {
     url: string
   ) {
     const hls = new Hls({
-      liveBackBufferLength: 60,
+      backBufferLength: 60,
       fragLoadingTimeOut: 30000,
       manifestLoadingTimeOut: 30000,
       levelLoadingTimeOut: 30000,

src/components/ha-icon.ts

@@ -125,6 +125,7 @@ export class HaIcon extends LitElement {
       databaseIcon = await getIcon(iconName);
     } catch (_err) {
       // Firefox in private mode doesn't support IDB
+      // iOS Safari sometimes doesn't open the DB
       databaseIcon = undefined;
     }
 

src/components/ha-network.ts

@@ -0,0 +1,179 @@
+import "@polymer/paper-tooltip/paper-tooltip";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  nothing,
+  LitElement,
+  TemplateResult,
+} from "lit";
+import { customElement, state, property } from "lit/decorators";
+import {
+  Adapter,
+  NetworkConfig,
+  IPv6ConfiguredAddress,
+  IPv4ConfiguredAddress,
+} from "../data/network";
+import { fireEvent } from "../common/dom/fire_event";
+import { haStyle } from "../resources/styles";
+import { HomeAssistant } from "../types";
+import "./ha-checkbox";
+import type { HaCheckbox } from "./ha-checkbox";
+import "./ha-settings-row";
+import "./ha-icon";
+
+const format_addresses = (
+  addresses: IPv6ConfiguredAddress[] | IPv4ConfiguredAddress[]
+): TemplateResult =>
+  html`${addresses.map((address, i) => [
+    html`<span>${address.address}/${address.network_prefix}</span>`,
+    i < addresses.length - 1 ? ", " : nothing,
+  ])}`;
+
+const format_auto_detected_interfaces = (
+  adapters: Adapter[]
+): Array<TemplateResult | string> =>
+  adapters.map((adapter) =>
+    adapter.auto
+      ? html`${adapter.name}
+        (${format_addresses([...adapter.ipv4, ...adapter.ipv6])})`
+      : ""
+  );
+
+declare global {
+  interface HASSDomEvents {
+    "network-config-changed": { configured_adapters: string[] };
+  }
+}
+@customElement("ha-network")
+export class HaNetwork extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public networkConfig?: NetworkConfig;
+
+  @state() private _expanded?: boolean;
+
+  protected render(): TemplateResult {
+    if (this.networkConfig === undefined) {
+      return html``;
+    }
+    const configured_adapters = this.networkConfig.configured_adapters || [];
+    return html`
+      <ha-settings-row>
+        <span slot="prefix">
+          <ha-checkbox
+            id="auto_configure"
+            @change=${this._handleAutoConfigureCheckboxClick}
+            .checked=${!configured_adapters.length}
+            name="auto_configure"
+          >
+          </ha-checkbox>
+        </span>
+        <span slot="heading" data-for="auto_configure"> Auto Configure </span>
+        <span slot="description" data-for="auto_configure">
+          Detected:
+          ${format_auto_detected_interfaces(this.networkConfig.adapters)}
+        </span>
+      </ha-settings-row>
+      ${configured_adapters.length || this._expanded
+        ? this.networkConfig.adapters.map(
+            (adapter) =>
+              html`<ha-settings-row>
+                <span slot="prefix">
+                  <ha-checkbox
+                    id=${adapter.name}
+                    @change=${this._handleAdapterCheckboxClick}
+                    .checked=${configured_adapters.includes(adapter.name)}
+                    .adapter=${adapter.name}
+                    name=${adapter.name}
+                  >
+                  </ha-checkbox>
+                </span>
+                <span slot="heading">
+                  Adapter: ${adapter.name}
+                  ${adapter.default
+                    ? html`<ha-icon .icon="hass:star"></ha-icon> (Default)`
+                    : ""}
+                </span>
+                <span slot="description">
+                  ${format_addresses([...adapter.ipv4, ...adapter.ipv6])}
+                </span>
+              </ha-settings-row>`
+          )
+        : ""}
+    `;
+  }
+
+  private _handleAutoConfigureCheckboxClick(ev: Event) {
+    const checkbox = ev.currentTarget as HaCheckbox;
+    if (this.networkConfig === undefined) {
+      return;
+    }
+
+    let configured_adapters = [...this.networkConfig.configured_adapters];
+
+    if (checkbox.checked) {
+      this._expanded = false;
+      configured_adapters = [];
+    } else {
+      this._expanded = true;
+      for (const adapter of this.networkConfig.adapters) {
+        if (adapter.default) {
+          configured_adapters = [adapter.name];
+          break;
+        }
+      }
+    }
+
+    fireEvent(this, "network-config-changed", {
+      configured_adapters: configured_adapters,
+    });
+  }
+
+  private _handleAdapterCheckboxClick(ev: Event) {
+    const checkbox = ev.currentTarget as HaCheckbox;
+    const adapter_name = (checkbox as any).name;
+    if (this.networkConfig === undefined) {
+      return;
+    }
+
+    const configured_adapters = [...this.networkConfig.configured_adapters];
+
+    if (checkbox.checked) {
+      configured_adapters.push(adapter_name);
+    } else {
+      const index = configured_adapters.indexOf(adapter_name, 0);
+      configured_adapters.splice(index, 1);
+    }
+
+    fireEvent(this, "network-config-changed", {
+      configured_adapters: configured_adapters,
+    });
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        .error {
+          color: var(--error-color);
+        }
+
+        ha-settings-row {
+          padding: 0;
+        }
+
+        span[slot="heading"],
+        span[slot="description"] {
+          cursor: pointer;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-network": HaNetwork;
+  }
+}

src/components/ha-selector/ha-selector-time.ts

@@ -1,10 +1,13 @@
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { useAmPm } from "../../common/datetime/use_am_pm";
 import { fireEvent } from "../../common/dom/fire_event";
 import { TimeSelector } from "../../data/selector";
+import { FrontendLocaleData } from "../../data/translation";
 import { HomeAssistant } from "../../types";
 import "../paper-time-input";
+
 @customElement("ha-selector-time")
 export class HaTimeSelector extends LitElement {
   @property() public hass!: HomeAssistant;
@@ -17,13 +20,12 @@ export class HaTimeSelector extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  private _useAmPm = memoizeOne((language: string) => {
-    const test = new Date().toLocaleString(language);
-    return test.includes("AM") || test.includes("PM");
-  });
+  private _useAmPmMem = memoizeOne((locale: FrontendLocaleData): boolean =>
+    useAmPm(locale)
+  );
 
   protected render() {
-    const useAMPM = this._useAmPm(this.hass.locale.language);
+    const useAMPM = this._useAmPmMem(this.hass.locale);
 
     const parts = this.value?.split(":") || [];
     const hours = parts[0];
@@ -48,7 +50,7 @@ export class HaTimeSelector extends LitElement {
 
   private _timeChanged(ev) {
     let value = ev.target.value;
-    const useAMPM = this._useAmPm(this.hass.locale.language);
+    const useAMPM = this._useAmPmMem(this.hass.locale);
     let hours = Number(ev.target.hour || 0);
     if (value && useAMPM) {
       if (ev.target.amPm === "PM") {

src/components/ha-service-picker.ts

@@ -6,33 +6,22 @@ import { LocalizeFunc } from "../common/translations/localize";
 import { domainToName } from "../data/integration";
 import { HomeAssistant } from "../types";
 import "./ha-combo-box";
+import { ComboBoxLitRenderer } from "lit-vaadin-helpers";
 
-const rowRenderer = (
-  root: HTMLElement,
-  _owner,
-  model: { item: { service: string; name: string } }
-) => {
-  if (!root.firstElementChild) {
-    root.innerHTML = `
-    <style>
-      paper-item {
-        margin: -10px 0;
-        padding: 0;
-      }
-    </style>
-    <paper-item>
-      <paper-item-body two-line="">
-        <div class='name'>[[item.name]]</div>
-        <div secondary>[[item.service]]</div>
-      </paper-item-body>
-    </paper-item>
-    `;
-  }
-
-  root.querySelector(".name")!.textContent = model.item.name;
-  root.querySelector("[secondary]")!.textContent =
-    model.item.name === model.item.service ? "" : model.item.service;
-};
+const rowRenderer: ComboBoxLitRenderer<{ service: string; name: string }> = (
+  item
+) => html`<style>
+    paper-item {
+      margin: -10px 0;
+      padding: 0;
+    }
+  </style>
+  <paper-item>
+    <paper-item-body two-line>
+      ${item.name}
+      <span secondary>${item.name === item.service ? "" : item.service}</span>
+    </paper-item-body>
+  </paper-item>`;
 
 class HaServicePicker extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;

src/components/ha-tab.ts

@@ -117,7 +117,10 @@ export class HaTab extends LitElement {
       }
 
       :host([narrow]) {
-        padding: 0 16px;
+        min-width: 0;
+        display: flex;
+        justify-content: center;
+        overflow: hidden;
       }
     `;
   }

src/components/ha-yaml-editor.ts

@@ -1,4 +1,4 @@
-import { safeDump, safeLoad } from "js-yaml";
+import { DEFAULT_SCHEMA, dump, load, Schema } from "js-yaml";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
@@ -20,6 +20,8 @@ const isEmpty = (obj: Record<string, unknown>): boolean => {
 export class HaYamlEditor extends LitElement {
   @property() public value?: any;
 
+  @property({ attribute: false }) public yamlSchema: Schema = DEFAULT_SCHEMA;
+
   @property() public defaultValue?: any;
 
   @property() public isValid = true;
@@ -30,7 +32,10 @@ export class HaYamlEditor extends LitElement {
 
   public setValue(value): void {
     try {
-      this._yaml = value && !isEmpty(value) ? safeDump(value) : "";
+      this._yaml =
+        value && !isEmpty(value)
+          ? dump(value, { schema: this.yamlSchema })
+          : "";
     } catch (err) {
       // eslint-disable-next-line no-console
       console.error(err, value);
@@ -67,7 +72,7 @@ export class HaYamlEditor extends LitElement {
 
     if (this._yaml) {
       try {
-        parsed = safeLoad(this._yaml);
+        parsed = load(this._yaml, { schema: this.yamlSchema });
       } catch (err) {
         // Invalid YAML
         isValid = false;

src/components/map/ha-entity-marker.ts

@@ -0,0 +1,69 @@
+import { LitElement, html, css } from "lit";
+import { property } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
+import { fireEvent } from "../../common/dom/fire_event";
+import { HomeAssistant } from "../../types";
+
+class HaEntityMarker extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: "entity-id" }) public entityId?: string;
+
+  @property({ attribute: "entity-name" }) public entityName?: string;
+
+  @property({ attribute: "entity-picture" }) public entityPicture?: string;
+
+  @property({ attribute: "entity-color" }) public entityColor?: string;
+
+  protected render() {
+    return html`
+      <div
+        class="marker"
+        style=${styleMap({ "border-color": this.entityColor })}
+        @click=${this._badgeTap}
+      >
+        ${this.entityPicture
+          ? html`<div
+              class="entity-picture"
+              style=${styleMap({
+                "background-image": `url(${this.entityPicture})`,
+              })}
+            ></div>`
+          : this.entityName}
+      </div>
+    `;
+  }
+
+  private _badgeTap(ev: Event) {
+    ev.stopPropagation();
+    if (this.entityId) {
+      fireEvent(this, "hass-more-info", { entityId: this.entityId });
+    }
+  }
+
+  static get styles() {
+    return css`
+      .marker {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        box-sizing: border-box;
+        overflow: hidden;
+        width: 48px;
+        height: 48px;
+        font-size: var(--ha-marker-font-size, 1.5em);
+        border-radius: 50%;
+        border: 1px solid var(--ha-marker-color, var(--primary-color));
+        color: var(--primary-text-color);
+        background-color: var(--card-background-color);
+      }
+      .entity-picture {
+        background-size: cover;
+        height: 100%;
+        width: 100%;
+      }
+    `;
+  }
+}
+
+customElements.define("ha-entity-marker", HaEntityMarker);

src/components/map/ha-location-editor.ts

@@ -1,299 +0,0 @@
-import {
-  Circle,
-  DivIcon,
-  DragEndEvent,
-  LatLng,
-  LeafletMouseEvent,
-  Map,
-  Marker,
-  TileLayer,
-} from "leaflet";
-import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
-import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
-import {
-  LeafletModuleType,
-  replaceTileLayer,
-  setupLeafletMap,
-} from "../../common/dom/setup-leaflet-map";
-import { nextRender } from "../../common/util/render-status";
-import { defaultRadiusColor } from "../../data/zone";
-import { HomeAssistant } from "../../types";
-
-@customElement("ha-location-editor")
-class LocationEditor extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ type: Array }) public location?: [number, number];
-
-  @property({ type: Number }) public radius?: number;
-
-  @property() public radiusColor?: string;
-
-  @property() public icon?: string;
-
-  @property({ type: Boolean }) public darkMode?: boolean;
-
-  public fitZoom = 16;
-
-  private _iconEl?: DivIcon;
-
-  private _ignoreFitToMap?: [number, number];
-
-  // eslint-disable-next-line
-  private Leaflet?: LeafletModuleType;
-
-  private _leafletMap?: Map;
-
-  private _tileLayer?: TileLayer;
-
-  private _locationMarker?: Marker | Circle;
-
-  public fitMap(): void {
-    if (!this._leafletMap || !this.location) {
-      return;
-    }
-    if (this._locationMarker && "getBounds" in this._locationMarker) {
-      this._leafletMap.fitBounds(this._locationMarker.getBounds());
-    } else {
-      this._leafletMap.setView(this.location, this.fitZoom);
-    }
-    this._ignoreFitToMap = this.location;
-  }
-
-  protected render(): TemplateResult {
-    return html` <div id="map"></div> `;
-  }
-
-  protected firstUpdated(changedProps: PropertyValues): void {
-    super.firstUpdated(changedProps);
-    this._initMap();
-  }
-
-  protected updated(changedProps: PropertyValues): void {
-    super.updated(changedProps);
-
-    // Still loading.
-    if (!this.Leaflet) {
-      return;
-    }
-
-    if (changedProps.has("location")) {
-      this._updateMarker();
-      if (
-        this.location &&
-        (!this._ignoreFitToMap ||
-          this._ignoreFitToMap[0] !== this.location[0] ||
-          this._ignoreFitToMap[1] !== this.location[1])
-      ) {
-        this.fitMap();
-      }
-    }
-    if (changedProps.has("radius")) {
-      this._updateRadius();
-    }
-    if (changedProps.has("radiusColor")) {
-      this._updateRadiusColor();
-    }
-    if (changedProps.has("icon")) {
-      this._updateIcon();
-    }
-
-    if (changedProps.has("hass")) {
-      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-      if (!oldHass || oldHass.themes?.darkMode === this.hass.themes?.darkMode) {
-        return;
-      }
-      if (!this._leafletMap || !this._tileLayer) {
-        return;
-      }
-      this._tileLayer = replaceTileLayer(
-        this.Leaflet,
-        this._leafletMap,
-        this._tileLayer,
-        this.hass.themes?.darkMode
-      );
-    }
-  }
-
-  private get _mapEl(): HTMLDivElement {
-    return this.shadowRoot!.querySelector("div")!;
-  }
-
-  private async _initMap(): Promise<void> {
-    [this._leafletMap, this.Leaflet, this._tileLayer] = await setupLeafletMap(
-      this._mapEl,
-      this.darkMode ?? this.hass.themes?.darkMode,
-      Boolean(this.radius)
-    );
-    this._leafletMap.addEventListener(
-      "click",
-      // @ts-ignore
-      (ev: LeafletMouseEvent) => this._locationUpdated(ev.latlng)
-    );
-    this._updateIcon();
-    this._updateMarker();
-    this.fitMap();
-    this._leafletMap.invalidateSize();
-  }
-
-  private _locationUpdated(latlng: LatLng) {
-    let longitude = latlng.lng;
-    if (Math.abs(longitude) > 180.0) {
-      // Normalize longitude if map provides values beyond -180 to +180 degrees.
-      longitude = (((longitude % 360.0) + 540.0) % 360.0) - 180.0;
-    }
-    this.location = this._ignoreFitToMap = [latlng.lat, longitude];
-    fireEvent(this, "change", undefined, { bubbles: false });
-  }
-
-  private _radiusUpdated() {
-    this._ignoreFitToMap = this.location;
-    this.radius = (this._locationMarker as Circle).getRadius();
-    fireEvent(this, "change", undefined, { bubbles: false });
-  }
-
-  private _updateIcon() {
-    if (!this.icon) {
-      this._iconEl = undefined;
-      return;
-    }
-
-    // create icon
-    let iconHTML = "";
-    const el = document.createElement("ha-icon");
-    el.setAttribute("icon", this.icon);
-    iconHTML = el.outerHTML;
-
-    this._iconEl = this.Leaflet!.divIcon({
-      html: iconHTML,
-      iconSize: [24, 24],
-      className: "light leaflet-edit-move",
-    });
-    this._setIcon();
-  }
-
-  private _setIcon() {
-    if (!this._locationMarker || !this._iconEl) {
-      return;
-    }
-
-    if (!this.radius) {
-      (this._locationMarker as Marker).setIcon(this._iconEl);
-      return;
-    }
-
-    // @ts-ignore
-    const moveMarker = this._locationMarker.editing._moveMarker;
-    moveMarker.setIcon(this._iconEl);
-  }
-
-  private _setupEdit() {
-    // @ts-ignore
-    this._locationMarker.editing.enable();
-    // @ts-ignore
-    const moveMarker = this._locationMarker.editing._moveMarker;
-    // @ts-ignore
-    const resizeMarker = this._locationMarker.editing._resizeMarkers[0];
-    this._setIcon();
-    moveMarker.addEventListener(
-      "dragend",
-      // @ts-ignore
-      (ev: DragEndEvent) => this._locationUpdated(ev.target.getLatLng())
-    );
-    resizeMarker.addEventListener(
-      "dragend",
-      // @ts-ignore
-      (ev: DragEndEvent) => this._radiusUpdated(ev)
-    );
-  }
-
-  private async _updateMarker(): Promise<void> {
-    if (!this.location) {
-      if (this._locationMarker) {
-        this._locationMarker.remove();
-        this._locationMarker = undefined;
-      }
-      return;
-    }
-
-    if (this._locationMarker) {
-      this._locationMarker.setLatLng(this.location);
-      if (this.radius) {
-        // @ts-ignore
-        this._locationMarker.editing.disable();
-        await nextRender();
-        this._setupEdit();
-      }
-      return;
-    }
-
-    if (!this.radius) {
-      this._locationMarker = this.Leaflet!.marker(this.location, {
-        draggable: true,
-      });
-      this._setIcon();
-      this._locationMarker.addEventListener(
-        "dragend",
-        // @ts-ignore
-        (ev: DragEndEvent) => this._locationUpdated(ev.target.getLatLng())
-      );
-      this._leafletMap!.addLayer(this._locationMarker);
-    } else {
-      this._locationMarker = this.Leaflet!.circle(this.location, {
-        color: this.radiusColor || defaultRadiusColor,
-        radius: this.radius,
-      });
-      this._leafletMap!.addLayer(this._locationMarker);
-      this._setupEdit();
-    }
-  }
-
-  private _updateRadius(): void {
-    if (!this._locationMarker || !this.radius) {
-      return;
-    }
-    (this._locationMarker as Circle).setRadius(this.radius);
-  }
-
-  private _updateRadiusColor(): void {
-    if (!this._locationMarker || !this.radius) {
-      return;
-    }
-    (this._locationMarker as Circle).setStyle({ color: this.radiusColor });
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        display: block;
-        height: 300px;
-      }
-      #map {
-        height: 100%;
-        background: inherit;
-      }
-      .leaflet-edit-move {
-        border-radius: 50%;
-        cursor: move !important;
-      }
-      .leaflet-edit-resize {
-        border-radius: 50%;
-        cursor: nesw-resize !important;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-location-editor": LocationEditor;
-  }
-}

src/components/map/ha-locations-editor.ts

@@ -3,10 +3,8 @@ import {
   DivIcon,
   DragEndEvent,
   LatLng,
-  Map,
   Marker,
   MarkerOptions,
-  TileLayer,
 } from "leaflet";
 import {
   css,
@@ -16,15 +14,13 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
-import {
-  LeafletModuleType,
-  replaceTileLayer,
-  setupLeafletMap,
-} from "../../common/dom/setup-leaflet-map";
-import { defaultRadiusColor } from "../../data/zone";
-import { HomeAssistant } from "../../types";
+import type { LeafletModuleType } from "../../common/dom/setup-leaflet-map";
+import type { HomeAssistant } from "../../types";
+import "./ha-map";
+import type { HaMap } from "./ha-map";
 
 declare global {
   // for fire event
@@ -51,38 +47,40 @@ export interface MarkerLocation {
 export class HaLocationsEditor extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public locations?: MarkerLocation[];
+  @property({ attribute: false }) public locations?: MarkerLocation[];
 
-  public fitZoom = 16;
+  @property({ type: Boolean }) public autoFit = false;
+
+  @property({ type: Number }) public zoom = 16;
+
+  @property({ type: Boolean }) public darkMode?: boolean;
+
+  @state() private _locationMarkers?: Record<string, Marker | Circle>;
+
+  @state() private _circles: Record<string, Circle> = {};
+
+  @query("ha-map", true) private map!: HaMap;
 
-  // eslint-disable-next-line
   private Leaflet?: LeafletModuleType;
 
-  // eslint-disable-next-line
-  private _leafletMap?: Map;
+  constructor() {
+    super();
 
-  private _tileLayer?: TileLayer;
-
-  private _locationMarkers?: { [key: string]: Marker | Circle };
-
-  private _circles: Record<string, Circle> = {};
+    import("leaflet").then((module) => {
+      import("leaflet-draw").then(() => {
+        this.Leaflet = module.default as LeafletModuleType;
+        this._updateMarkers();
+        this.updateComplete.then(() => this.fitMap());
+      });
+    });
+  }
 
   public fitMap(): void {
-    if (
-      !this._leafletMap ||
-      !this._locationMarkers ||
-      !Object.keys(this._locationMarkers).length
-    ) {
-      return;
-    }
-    const bounds = this.Leaflet!.latLngBounds(
-      Object.values(this._locationMarkers).map((item) => item.getLatLng())
-    );
-    this._leafletMap.fitBounds(bounds.pad(0.5));
+    this.map.fitMap();
   }
 
   public fitMarker(id: string): void {
-    if (!this._leafletMap || !this._locationMarkers) {
+    if (!this.map.leafletMap || !this._locationMarkers) {
       return;
     }
     const marker = this._locationMarkers[id];
@@ -90,29 +88,44 @@ export class HaLocationsEditor extends LitElement {
       return;
     }
     if ("getBounds" in marker) {
-      this._leafletMap.fitBounds(marker.getBounds());
+      this.map.leafletMap.fitBounds(marker.getBounds());
       (marker as Circle).bringToFront();
     } else {
       const circle = this._circles[id];
       if (circle) {
-        this._leafletMap.fitBounds(circle.getBounds());
+        this.map.leafletMap.fitBounds(circle.getBounds());
       } else {
-        this._leafletMap.setView(marker.getLatLng(), this.fitZoom);
+        this.map.leafletMap.setView(marker.getLatLng(), this.zoom);
       }
     }
   }
 
   protected render(): TemplateResult {
-    return html` <div id="map"></div> `;
+    return html`<ha-map
+      .hass=${this.hass}
+      .layers=${this._getLayers(this._circles, this._locationMarkers)}
+      .zoom=${this.zoom}
+      .autoFit=${this.autoFit}
+      .darkMode=${this.darkMode}
+    ></ha-map>`;
   }
 
-  protected firstUpdated(changedProps: PropertyValues): void {
-    super.firstUpdated(changedProps);
-    this._initMap();
-  }
+  private _getLayers = memoizeOne(
+    (
+      circles: Record<string, Circle>,
+      markers?: Record<string, Marker | Circle>
+    ): Array<Marker | Circle> => {
+      const layers: Array<Marker | Circle> = [];
+      Array.prototype.push.apply(layers, Object.values(circles));
+      if (markers) {
+        Array.prototype.push.apply(layers, Object.values(markers));
+      }
+      return layers;
+    }
+  );
 
-  protected updated(changedProps: PropertyValues): void {
-    super.updated(changedProps);
+  public willUpdate(changedProps: PropertyValues): void {
+    super.willUpdate(changedProps);
 
     // Still loading.
     if (!this.Leaflet) {
@@ -122,37 +135,6 @@ export class HaLocationsEditor extends LitElement {
     if (changedProps.has("locations")) {
       this._updateMarkers();
     }
-
-    if (changedProps.has("hass")) {
-      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-      if (!oldHass || oldHass.themes.darkMode === this.hass.themes.darkMode) {
-        return;
-      }
-      if (!this._leafletMap || !this._tileLayer) {
-        return;
-      }
-      this._tileLayer = replaceTileLayer(
-        this.Leaflet,
-        this._leafletMap,
-        this._tileLayer,
-        this.hass.themes.darkMode
-      );
-    }
-  }
-
-  private get _mapEl(): HTMLDivElement {
-    return this.shadowRoot!.querySelector("div")!;
-  }
-
-  private async _initMap(): Promise<void> {
-    [this._leafletMap, this.Leaflet, this._tileLayer] = await setupLeafletMap(
-      this._mapEl,
-      this.hass.themes.darkMode,
-      true
-    );
-    this._updateMarkers();
-    this.fitMap();
-    this._leafletMap.invalidateSize();
   }
 
   private _updateLocation(ev: DragEndEvent) {
@@ -189,21 +171,18 @@ export class HaLocationsEditor extends LitElement {
   }
 
   private _updateMarkers(): void {
-    if (this._locationMarkers) {
-      Object.values(this._locationMarkers).forEach((marker) => {
-        marker.remove();
-      });
-      this._locationMarkers = undefined;
-
-      Object.values(this._circles).forEach((circle) => circle.remove());
-      this._circles = {};
-    }
-
     if (!this.locations || !this.locations.length) {
+      this._circles = {};
+      this._locationMarkers = undefined;
       return;
     }
 
-    this._locationMarkers = {};
+    const locationMarkers = {};
+    const circles = {};
+
+    const defaultZoneRadiusColor = getComputedStyle(this).getPropertyValue(
+      "--accent-color"
+    );
 
     this.locations.forEach((location: MarkerLocation) => {
       let icon: DivIcon | undefined;
@@ -228,45 +207,46 @@ export class HaLocationsEditor extends LitElement {
         const circle = this.Leaflet!.circle(
           [location.latitude, location.longitude],
           {
-            color: location.radius_color || defaultRadiusColor,
+            color: location.radius_color || defaultZoneRadiusColor,
             radius: location.radius,
           }
         );
-        circle.addTo(this._leafletMap!);
         if (location.radius_editable || location.location_editable) {
           // @ts-ignore
           circle.editing.enable();
-          // @ts-ignore
-          const moveMarker = circle.editing._moveMarker;
-          // @ts-ignore
-          const resizeMarker = circle.editing._resizeMarkers[0];
-          if (icon) {
-            moveMarker.setIcon(icon);
-          }
-          resizeMarker.id = moveMarker.id = location.id;
-          moveMarker
-            .addEventListener(
-              "dragend",
-              // @ts-ignore
-              (ev: DragEndEvent) => this._updateLocation(ev)
-            )
-            .addEventListener(
-              "click",
-              // @ts-ignore
-              (ev: MouseEvent) => this._markerClicked(ev)
-            );
-          if (location.radius_editable) {
-            resizeMarker.addEventListener(
-              "dragend",
-              // @ts-ignore
-              (ev: DragEndEvent) => this._updateRadius(ev)
-            );
-          } else {
-            resizeMarker.remove();
-          }
-          this._locationMarkers![location.id] = circle;
+          circle.addEventListener("add", () => {
+            // @ts-ignore
+            const moveMarker = circle.editing._moveMarker;
+            // @ts-ignore
+            const resizeMarker = circle.editing._resizeMarkers[0];
+            if (icon) {
+              moveMarker.setIcon(icon);
+            }
+            resizeMarker.id = moveMarker.id = location.id;
+            moveMarker
+              .addEventListener(
+                "dragend",
+                // @ts-ignore
+                (ev: DragEndEvent) => this._updateLocation(ev)
+              )
+              .addEventListener(
+                "click",
+                // @ts-ignore
+                (ev: MouseEvent) => this._markerClicked(ev)
+              );
+            if (location.radius_editable) {
+              resizeMarker.addEventListener(
+                "dragend",
+                // @ts-ignore
+                (ev: DragEndEvent) => this._updateRadius(ev)
+              );
+            } else {
+              resizeMarker.remove();
+            }
+          });
+          locationMarkers[location.id] = circle;
         } else {
-          this._circles[location.id] = circle;
+          circles[location.id] = circle;
         }
       }
       if (
@@ -275,6 +255,7 @@ export class HaLocationsEditor extends LitElement {
       ) {
         const options: MarkerOptions = {
           title: location.name,
+          draggable: location.location_editable,
         };
 
         if (icon) {
@@ -293,13 +274,14 @@ export class HaLocationsEditor extends LitElement {
             "click",
             // @ts-ignore
             (ev: MouseEvent) => this._markerClicked(ev)
-          )
-          .addTo(this._leafletMap!);
+          );
         (marker as any).id = location.id;
 
-        this._locationMarkers![location.id] = marker;
+        locationMarkers[location.id] = marker;
       }
     });
+    this._circles = circles;
+    this._locationMarkers = locationMarkers;
   }
 
   static get styles(): CSSResultGroup {
@@ -308,23 +290,9 @@ export class HaLocationsEditor extends LitElement {
         display: block;
         height: 300px;
       }
-      #map {
+      ha-map {
         height: 100%;
       }
-      .leaflet-marker-draggable {
-        cursor: move !important;
-      }
-      .leaflet-edit-resize {
-        border-radius: 50%;
-        cursor: nesw-resize !important;
-      }
-      .named-icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        text-align: center;
-      }
     `;
   }
 }

src/components/map/ha-map.ts

@@ -1,13 +1,15 @@
-import { Circle, Layer, Map, Marker, TileLayer } from "leaflet";
 import {
-  css,
-  CSSResultGroup,
-  html,
-  LitElement,
-  PropertyValues,
-  TemplateResult,
-} from "lit";
-import { customElement, property } from "lit/decorators";
+  Circle,
+  CircleMarker,
+  LatLngTuple,
+  Layer,
+  Map,
+  Marker,
+  Polyline,
+  TileLayer,
+} from "leaflet";
+import { css, CSSResultGroup, PropertyValues, ReactiveElement } from "lit";
+import { customElement, property, state } from "lit/decorators";
 import {
   LeafletModuleType,
   replaceTileLayer,
@@ -15,194 +17,324 @@ import {
 } from "../../common/dom/setup-leaflet-map";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
-import { debounce } from "../../common/util/debounce";
-import "../../panels/map/ha-entity-marker";
+import "./ha-entity-marker";
 import { HomeAssistant } from "../../types";
 import "../ha-icon-button";
+import { installResizeObserver } from "../../panels/lovelace/common/install-resize-observer";
+
+const getEntityId = (entity: string | HaMapEntity): string =>
+  typeof entity === "string" ? entity : entity.entity_id;
+
+export interface HaMapPaths {
+  points: LatLngTuple[];
+  color?: string;
+  gradualOpacity?: number;
+}
+
+export interface HaMapEntity {
+  entity_id: string;
+  color: string;
+}
 
 @customElement("ha-map")
-class HaMap extends LitElement {
+export class HaMap extends ReactiveElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public entities?: string[];
+  @property({ attribute: false }) public entities?: string[] | HaMapEntity[];
 
-  @property() public darkMode?: boolean;
+  @property({ attribute: false }) public paths?: HaMapPaths[];
 
-  @property() public zoom?: number;
+  @property({ attribute: false }) public layers?: Layer[];
+
+  @property({ type: Boolean }) public autoFit = false;
+
+  @property({ type: Boolean }) public fitZones?: boolean;
+
+  @property({ type: Boolean }) public darkMode?: boolean;
+
+  @property({ type: Number }) public zoom = 14;
+
+  @state() private _loaded = false;
+
+  public leafletMap?: Map;
 
-  // eslint-disable-next-line
   private Leaflet?: LeafletModuleType;
 
-  private _leafletMap?: Map;
-
   private _tileLayer?: TileLayer;
 
-  // @ts-ignore
   private _resizeObserver?: ResizeObserver;
 
-  private _debouncedResizeListener = debounce(
-    () => {
-      if (!this._leafletMap) {
-        return;
-      }
-      this._leafletMap.invalidateSize();
-    },
-    100,
-    false
-  );
-
   private _mapItems: Array<Marker | Circle> = [];
 
   private _mapZones: Array<Marker | Circle> = [];
 
-  private _connected = false;
+  private _mapPaths: Array<Polyline | CircleMarker> = [];
 
   public connectedCallback(): void {
     super.connectedCallback();
-    this._connected = true;
-    if (this.hasUpdated) {
-      this.loadMap();
-      this._attachObserver();
-    }
+    this._loadMap();
+    this._attachObserver();
   }
 
   public disconnectedCallback(): void {
     super.disconnectedCallback();
-    this._connected = false;
-
-    if (this._leafletMap) {
-      this._leafletMap.remove();
-      this._leafletMap = undefined;
+    if (this.leafletMap) {
+      this.leafletMap.remove();
+      this.leafletMap = undefined;
       this.Leaflet = undefined;
     }
 
+    this._loaded = false;
+
     if (this._resizeObserver) {
-      this._resizeObserver.unobserve(this._mapEl);
-    } else {
-      window.removeEventListener("resize", this._debouncedResizeListener);
+      this._resizeObserver.unobserve(this);
     }
   }
 
-  protected render(): TemplateResult {
-    if (!this.entities) {
-      return html``;
-    }
-    return html` <div id="map"></div> `;
-  }
+  protected update(changedProps: PropertyValues) {
+    super.update(changedProps);
 
-  protected firstUpdated(changedProps: PropertyValues): void {
-    super.firstUpdated(changedProps);
-    this.loadMap();
-
-    if (this._connected) {
-      this._attachObserver();
-    }
-  }
-
-  protected shouldUpdate(changedProps) {
-    if (!changedProps.has("hass") || changedProps.size > 1) {
-      return true;
-    }
-
-    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-
-    if (!oldHass || !this.entities) {
-      return true;
-    }
-
-    // Check if any state has changed
-    for (const entity of this.entities) {
-      if (oldHass.states[entity] !== this.hass!.states[entity]) {
-        return true;
-      }
-    }
-
-    return false;
-  }
-
-  protected updated(changedProps: PropertyValues): void {
-    if (changedProps.has("hass")) {
-      this._drawEntities();
-      this._fitMap();
-
-      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-      if (!oldHass || oldHass.themes.darkMode === this.hass.themes.darkMode) {
-        return;
-      }
-      if (!this.Leaflet || !this._leafletMap || !this._tileLayer) {
-        return;
-      }
-      this._tileLayer = replaceTileLayer(
-        this.Leaflet,
-        this._leafletMap,
-        this._tileLayer,
-        this.hass.themes.darkMode
-      );
-    }
-  }
-
-  private get _mapEl(): HTMLDivElement {
-    return this.shadowRoot!.getElementById("map") as HTMLDivElement;
-  }
-
-  private async loadMap(): Promise<void> {
-    [this._leafletMap, this.Leaflet, this._tileLayer] = await setupLeafletMap(
-      this._mapEl,
-      this.darkMode ?? this.hass.themes.darkMode
-    );
-    this._drawEntities();
-    this._leafletMap.invalidateSize();
-    this._fitMap();
-  }
-
-  private _fitMap(): void {
-    if (!this._leafletMap || !this.Leaflet || !this.hass) {
+    if (!this._loaded) {
       return;
     }
-    if (this._mapItems.length === 0) {
-      this._leafletMap.setView(
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+
+    if (changedProps.has("_loaded") || changedProps.has("entities")) {
+      this._drawEntities();
+    } else if (this._loaded && oldHass && this.entities) {
+      // Check if any state has changed
+      for (const entity of this.entities) {
+        if (
+          oldHass.states[getEntityId(entity)] !==
+          this.hass!.states[getEntityId(entity)]
+        ) {
+          this._drawEntities();
+          break;
+        }
+      }
+    }
+
+    if (changedProps.has("_loaded") || changedProps.has("paths")) {
+      this._drawPaths();
+    }
+
+    if (changedProps.has("_loaded") || changedProps.has("layers")) {
+      this._drawLayers(changedProps.get("layers") as Layer[] | undefined);
+    }
+
+    if (
+      changedProps.has("_loaded") ||
+      ((changedProps.has("entities") || changedProps.has("layers")) &&
+        this.autoFit)
+    ) {
+      this.fitMap();
+    }
+
+    if (changedProps.has("zoom")) {
+      this.leafletMap!.setZoom(this.zoom);
+    }
+
+    if (
+      !changedProps.has("darkMode") &&
+      (!changedProps.has("hass") ||
+        (oldHass && oldHass.themes.darkMode === this.hass.themes.darkMode))
+    ) {
+      return;
+    }
+    const darkMode = this.darkMode ?? this.hass.themes.darkMode;
+    this._tileLayer = replaceTileLayer(
+      this.Leaflet!,
+      this.leafletMap!,
+      this._tileLayer!,
+      darkMode
+    );
+    this.shadowRoot!.getElementById("map")!.classList.toggle("dark", darkMode);
+  }
+
+  private async _loadMap(): Promise<void> {
+    let map = this.shadowRoot!.getElementById("map");
+    if (!map) {
+      map = document.createElement("div");
+      map.id = "map";
+      this.shadowRoot!.append(map);
+    }
+    const darkMode = this.darkMode ?? this.hass.themes.darkMode;
+    [this.leafletMap, this.Leaflet, this._tileLayer] = await setupLeafletMap(
+      map,
+      darkMode
+    );
+    this.shadowRoot!.getElementById("map")!.classList.toggle("dark", darkMode);
+    this._loaded = true;
+  }
+
+  public fitMap(): void {
+    if (!this.leafletMap || !this.Leaflet || !this.hass) {
+      return;
+    }
+
+    if (!this._mapItems.length && !this.layers?.length) {
+      this.leafletMap.setView(
         new this.Leaflet.LatLng(
           this.hass.config.latitude,
           this.hass.config.longitude
         ),
-        this.zoom || 14
+        this.zoom
       );
       return;
     }
 
-    const bounds = this.Leaflet.latLngBounds(
+    let bounds = this.Leaflet.latLngBounds(
       this._mapItems ? this._mapItems.map((item) => item.getLatLng()) : []
     );
-    this._leafletMap.fitBounds(bounds.pad(0.5));
 
-    if (this.zoom && this._leafletMap.getZoom() > this.zoom) {
-      this._leafletMap.setZoom(this.zoom);
+    if (this.fitZones) {
+      this._mapZones?.forEach((zone) => {
+        bounds.extend(
+          "getBounds" in zone ? zone.getBounds() : zone.getLatLng()
+        );
+      });
     }
+
+    this.layers?.forEach((layer: any) => {
+      bounds.extend(
+        "getBounds" in layer ? layer.getBounds() : layer.getLatLng()
+      );
+    });
+
+    if (!this.layers) {
+      bounds = bounds.pad(0.5);
+    }
+
+    this.leafletMap.fitBounds(bounds, { maxZoom: this.zoom });
+  }
+
+  private _drawLayers(prevLayers: Layer[] | undefined): void {
+    if (prevLayers) {
+      prevLayers.forEach((layer) => layer.remove());
+    }
+    if (!this.layers) {
+      return;
+    }
+    const map = this.leafletMap!;
+    this.layers.forEach((layer) => {
+      map.addLayer(layer);
+    });
+  }
+
+  private _drawPaths(): void {
+    const hass = this.hass;
+    const map = this.leafletMap;
+    const Leaflet = this.Leaflet;
+
+    if (!hass || !map || !Leaflet) {
+      return;
+    }
+    if (this._mapPaths.length) {
+      this._mapPaths.forEach((marker) => marker.remove());
+      this._mapPaths = [];
+    }
+    if (!this.paths) {
+      return;
+    }
+
+    const darkPrimaryColor = getComputedStyle(this).getPropertyValue(
+      "--dark-primary-color"
+    );
+
+    this.paths.forEach((path) => {
+      let opacityStep: number;
+      let baseOpacity: number;
+      if (path.gradualOpacity) {
+        opacityStep = path.gradualOpacity / (path.points.length - 2);
+        baseOpacity = 1 - path.gradualOpacity;
+      }
+
+      for (
+        let pointIndex = 0;
+        pointIndex < path.points.length - 1;
+        pointIndex++
+      ) {
+        const opacity = path.gradualOpacity
+          ? baseOpacity! + pointIndex * opacityStep!
+          : undefined;
+
+        // DRAW point
+        this._mapPaths.push(
+          Leaflet!.circleMarker(path.points[pointIndex], {
+            radius: 3,
+            color: path.color || darkPrimaryColor,
+            opacity,
+            fillOpacity: opacity,
+            interactive: false,
+          })
+        );
+
+        // DRAW line between this and next point
+        this._mapPaths.push(
+          Leaflet!.polyline(
+            [path.points[pointIndex], path.points[pointIndex + 1]],
+            {
+              color: path.color || darkPrimaryColor,
+              opacity,
+              interactive: false,
+            }
+          )
+        );
+      }
+      const pointIndex = path.points.length - 1;
+      if (pointIndex >= 0) {
+        const opacity = path.gradualOpacity
+          ? baseOpacity! + pointIndex * opacityStep!
+          : undefined;
+        // DRAW end path point
+        this._mapPaths.push(
+          Leaflet!.circleMarker(path.points[pointIndex], {
+            radius: 3,
+            color: path.color || darkPrimaryColor,
+            opacity,
+            fillOpacity: opacity,
+            interactive: false,
+          })
+        );
+      }
+      this._mapPaths.forEach((marker) => map.addLayer(marker));
+    });
   }
 
   private _drawEntities(): void {
     const hass = this.hass;
-    const map = this._leafletMap;
+    const map = this.leafletMap;
     const Leaflet = this.Leaflet;
+
     if (!hass || !map || !Leaflet) {
       return;
     }
 
-    if (this._mapItems) {
+    if (this._mapItems.length) {
       this._mapItems.forEach((marker) => marker.remove());
+      this._mapItems = [];
     }
-    const mapItems: Layer[] = (this._mapItems = []);
 
-    if (this._mapZones) {
+    if (this._mapZones.length) {
       this._mapZones.forEach((marker) => marker.remove());
+      this._mapZones = [];
     }
-    const mapZones: Layer[] = (this._mapZones = []);
 
-    const allEntities = this.entities!.concat();
+    if (!this.entities) {
+      return;
+    }
 
-    for (const entity of allEntities) {
-      const entityId = entity;
-      const stateObj = hass.states[entityId];
+    const computedStyles = getComputedStyle(this);
+    const zoneColor = computedStyles.getPropertyValue("--accent-color");
+    const darkPrimaryColor = computedStyles.getPropertyValue(
+      "--dark-primary-color"
+    );
+
+    const className =
+      this.darkMode ?? this.hass.themes.darkMode ? "dark" : "light";
+
+    for (const entity of this.entities) {
+      const stateObj = hass.states[getEntityId(entity)];
       if (!stateObj) {
         continue;
       }
@@ -240,13 +372,12 @@ class HaMap extends LitElement {
         }
 
         // create marker with the icon
-        mapZones.push(
+        this._mapZones.push(
           Leaflet.marker([latitude, longitude], {
             icon: Leaflet.divIcon({
               html: iconHTML,
               iconSize: [24, 24],
-              className:
-                this.darkMode ?? this.hass.themes.darkMode ? "dark" : "light",
+              className,
             }),
             interactive: false,
             title,
@@ -254,10 +385,10 @@ class HaMap extends LitElement {
         );
 
         // create circle around it
-        mapZones.push(
+        this._mapZones.push(
           Leaflet.circle([latitude, longitude], {
             interactive: false,
-            color: "#FF9800",
+            color: zoneColor,
             radius,
           })
         );
@@ -273,17 +404,20 @@ class HaMap extends LitElement {
         .join("")
         .substr(0, 3);
 
-      // create market with the icon
-      mapItems.push(
+      // create marker with the icon
+      this._mapItems.push(
         Leaflet.marker([latitude, longitude], {
           icon: Leaflet.divIcon({
-            // Leaflet clones this element before adding it to the map. This messes up
-            // our Polymer object and we can't pass data through. Thus we hack like this.
             html: `
               <ha-entity-marker
-                entity-id="${entityId}"
+                entity-id="${getEntityId(entity)}"
                 entity-name="${entityName}"
                 entity-picture="${entityPicture || ""}"
+                ${
+                  typeof entity !== "string"
+                    ? `entity-color="${entity.color}"`
+                    : ""
+                }
               ></ha-entity-marker>
             `,
             iconSize: [48, 48],
@@ -295,10 +429,10 @@ class HaMap extends LitElement {
 
       // create circle around if entity has accuracy
       if (gpsAccuracy) {
-        mapItems.push(
+        this._mapItems.push(
           Leaflet.circle([latitude, longitude], {
             interactive: false,
-            color: "#0288D1",
+            color: darkPrimaryColor,
             radius: gpsAccuracy,
           })
         );
@@ -309,20 +443,14 @@ class HaMap extends LitElement {
     this._mapZones.forEach((marker) => map.addLayer(marker));
   }
 
-  private _attachObserver(): void {
-    // Observe changes to map size and invalidate to prevent broken rendering
-    // Uses ResizeObserver in Chrome, otherwise window resize event
-
-    // @ts-ignore
-    if (typeof ResizeObserver === "function") {
-      // @ts-ignore
-      this._resizeObserver = new ResizeObserver(() =>
-        this._debouncedResizeListener()
-      );
-      this._resizeObserver.observe(this._mapEl);
-    } else {
-      window.addEventListener("resize", this._debouncedResizeListener);
+  private async _attachObserver(): Promise<void> {
+    if (!this._resizeObserver) {
+      await installResizeObserver();
+      this._resizeObserver = new ResizeObserver(() => {
+        this.leafletMap?.invalidateSize({ debounceMoveend: true });
+      });
     }
+    this._resizeObserver.observe(this);
   }
 
   static get styles(): CSSResultGroup {
@@ -337,13 +465,25 @@ class HaMap extends LitElement {
       #map.dark {
         background: #090909;
       }
-
+      .light {
+        color: #000000;
+      }
       .dark {
         color: #ffffff;
       }
-
-      .light {
-        color: #000000;
+      .leaflet-marker-draggable {
+        cursor: move !important;
+      }
+      .leaflet-edit-resize {
+        border-radius: 50%;
+        cursor: nesw-resize !important;
+      }
+      .named-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        text-align: center;
       }
     `;
   }

src/components/media-player/ha-media-player-browse.ts

@@ -45,7 +45,6 @@ import "../ha-button-menu";
 import "../ha-card";
 import "../ha-circular-progress";
 import "../ha-fab";
-import "../ha-paper-dropdown-menu";
 import "../ha-svg-icon";
 
 declare global {