From 9be864b45e3471b30684041157b1b971fa5c7441 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 20 May 2020 10:01:33 +0200
Subject: [PATCH 01/25] Fix search for data-tables using the builtin search bar
 (#5937)

---
 src/components/data-table/ha-data-table.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts
index 015f54130e..ce957a0ee4 100644
--- a/src/components/data-table/ha-data-table.ts
+++ b/src/components/data-table/ha-data-table.ts
@@ -382,7 +382,7 @@ export class HaDataTable extends LitElement {
       filteredData = await this._memFilterData(
         this.data,
         this._sortColumns,
-        this.filter
+        this._filter
       );
     }
 

From 339221e7931b57afa7c3cf61a6b1fbe723487e51 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 20 May 2020 16:23:50 +0200
Subject: [PATCH 02/25] Upgrade lazy loaded elements before setting config
 (#5944)

---
 src/panels/lovelace/create-element/create-element-base.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/panels/lovelace/create-element/create-element-base.ts b/src/panels/lovelace/create-element/create-element-base.ts
index c8379e8f3a..f409f6a3b6 100644
--- a/src/panels/lovelace/create-element/create-element-base.ts
+++ b/src/panels/lovelace/create-element/create-element-base.ts
@@ -126,6 +126,7 @@ const _lazyCreate = <T extends keyof CreateElementConfigTypes>(
   ) as CreateElementConfigTypes[T]["element"];
   customElements.whenDefined(tag).then(() => {
     try {
+      customElements.upgrade(element);
       // @ts-ignore
       element.setConfig(config);
     } catch (err) {

From 11bd72915c311a701b169edaa03b76b0b331e896 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 20 May 2020 17:34:15 +0200
Subject: [PATCH 03/25] Fix picture header footer upgrade (#5945)

---
 .../header-footer/hui-picture-header-footer.ts         | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/panels/lovelace/header-footer/hui-picture-header-footer.ts b/src/panels/lovelace/header-footer/hui-picture-header-footer.ts
index 9807c4a0e6..34d4c893b7 100644
--- a/src/panels/lovelace/header-footer/hui-picture-header-footer.ts
+++ b/src/panels/lovelace/header-footer/hui-picture-header-footer.ts
@@ -6,6 +6,7 @@ import {
   LitElement,
   property,
   TemplateResult,
+  PropertyValues,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import { ifDefined } from "lit-html/directives/if-defined";
@@ -30,7 +31,7 @@ export class HuiPictureHeaderFooter extends LitElement
     };
   }
 
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
 
   @property() protected _config?: PictureHeaderFooterConfig;
 
@@ -42,6 +43,13 @@ export class HuiPictureHeaderFooter extends LitElement
     this._config = config;
   }
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    if (changedProps.size === 1 && changedProps.has("hass")) {
+      return !changedProps.get("hass");
+    }
+    return true;
+  }
+
   protected render(): TemplateResult {
     if (!this._config || !this.hass) {
       return html``;

From 612811e2c2e8ed86002ec4be8f47adbb390c85d2 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 20 May 2020 19:31:45 +0200
Subject: [PATCH 04/25] Fix disabled styling zone panel (#5950)

---
 src/panels/config/zone/ha-config-zone.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/panels/config/zone/ha-config-zone.ts b/src/panels/config/zone/ha-config-zone.ts
index 475e3822a7..1d794fa3e4 100644
--- a/src/panels/config/zone/ha-config-zone.ts
+++ b/src/panels/config/zone/ha-config-zone.ts
@@ -489,6 +489,9 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
       mwc-icon-button:not([disabled]) {
         color: var(--secondary-text-color);
       }
+      mwc-icon-button {
+        --mdc-theme-text-disabled-on-light: var(--disabled-text-color);
+      }
       .empty {
         text-align: center;
         padding: 8px;

From 91a655a81e8356f4112fb652c5690871bf9d9d24 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 20 May 2020 21:27:08 +0200
Subject: [PATCH 05/25] Fix resize observers and update gauge styling (#5949)

---
 src/panels/lovelace/cards/hui-gauge-card.ts   | 45 ++++++++++---------
 .../lovelace/cards/hui-media-control-card.ts  |  6 +--
 .../cards/hui-weather-forecast-card.ts        |  6 +--
 .../hui-media-player-entity-row.ts            |  6 +--
 4 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts
index 3297515f53..c13ff98fef 100644
--- a/src/panels/lovelace/cards/hui-gauge-card.ts
+++ b/src/panels/lovelace/cards/hui-gauge-card.ts
@@ -238,9 +238,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
   private async _attachObserver(): Promise<void> {
     await installResizeObserver();
 
-    this._resizeObserver = new ResizeObserver(
-      debounce(() => this._measureCard(), 250, false)
-    );
+    this._resizeObserver = new ResizeObserver(this._debouncedMeasure);
 
     const card = this.shadowRoot!.querySelector("ha-card");
     // If we show an error or warning there is no ha-card
@@ -250,6 +248,8 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     this._resizeObserver.observe(card);
   }
 
+  private _debouncedMeasure = debounce(() => this._measureCard(), 250, true);
+
   private _measureCard() {
     if (!this.isConnected) {
       return;
@@ -277,7 +277,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
         cursor: pointer;
         height: 100%;
         overflow: hidden;
-        padding: 16px 16px 0 16px;
+        padding: 16px;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -293,37 +293,39 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
       round-slider {
         max-width: 200px;
         --round-slider-path-width: 35px;
-        --round-slider-path-color: var(--disabled-text-color);
+        --round-slider-path-color: var(--primary-background-color);
         --round-slider-linecap: "butt";
       }
 
       .gauge-data {
-        line-height: 1;
         text-align: center;
-        position: relative;
+        line-height: initial;
         color: var(--primary-text-color);
-        margin-top: -28px;
-        margin-bottom: 14px;
+        margin-top: -26px;
+        width: 100%;
       }
 
       .gauge-data .percent {
+        white-space: nowrap;
         font-size: 28px;
       }
 
       .gauge-data .name {
-        padding-top: 6px;
-        font-size: 14px;
+        font-size: 15px;
       }
 
       /* ============= NARROW ============= */
 
+      :host([narrow]) ha-card {
+        padding: 8px;
+      }
+
       :host([narrow]) round-slider {
         --round-slider-path-width: 22px;
       }
 
       :host([narrow]) .gauge-data {
-        margin-top: -24px;
-        margin-bottom: 12px;
+        margin-top: -22px;
       }
 
       :host([narrow]) .gauge-data .percent {
@@ -331,30 +333,29 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
       }
 
       :host([narrow]) .gauge-data .name {
-        font-size: 12px;
+        font-size: 14px;
       }
 
       /* ============= VERY NARROW ============= */
 
+      :host([narrow]) ha-card {
+        padding: 4px;
+      }
+
       :host([veryNarrow]) round-slider {
         --round-slider-path-width: 15px;
       }
 
-      :host([veryNarrow]) ha-card {
-        padding-bottom: 16px;
-      }
-
       :host([veryNarrow]) .gauge-data {
-        margin-top: 0;
-        margin-bottom: 0;
+        margin-top: -16px;
       }
 
       :host([veryNarrow]) .gauge-data .percent {
-        font-size: 20px;
+        font-size: 16px;
       }
 
       :host([veryNarrow]) .gauge-data .name {
-        font-size: 10px;
+        font-size: 12px;
       }
     `;
   }
diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts
index f1e070ff65..c7e5ba8319 100644
--- a/src/panels/lovelace/cards/hui-media-control-card.ts
+++ b/src/panels/lovelace/cards/hui-media-control-card.ts
@@ -618,6 +618,8 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
     );
   }
 
+  private _debouncedMeasure = debounce(() => this._measureCard(), 250, true);
+
   private _measureCard() {
     const card = this.shadowRoot!.querySelector("ha-card");
     if (!card) {
@@ -630,9 +632,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
 
   private async _attachObserver(): Promise<void> {
     await installResizeObserver();
-    this._resizeObserver = new ResizeObserver(
-      debounce(() => this._measureCard(), 250, false)
-    );
+    this._resizeObserver = new ResizeObserver(this._debouncedMeasure);
 
     const card = this.shadowRoot!.querySelector("ha-card");
     // If we show an error or warning there is no ha-card
diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
index 74f0151a2e..69862bb4c3 100644
--- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts
+++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
@@ -290,9 +290,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
 
   private async _attachObserver(): Promise<void> {
     await installResizeObserver();
-    this._resizeObserver = new ResizeObserver(
-      debounce(() => this._measureCard(), 250, false)
-    );
+    this._resizeObserver = new ResizeObserver(this._debouncedMeasure);
 
     const card = this.shadowRoot!.querySelector("ha-card");
     // If we show an error or warning there is no ha-card
@@ -302,6 +300,8 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
     this._resizeObserver.observe(card);
   }
 
+  private _debouncedMeasure = debounce(() => this._measureCard(), 250, true);
+
   private _measureCard() {
     if (!this.isConnected) {
       return;
diff --git a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts
index a3a41ba6d2..ba9da31e08 100644
--- a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts
@@ -53,7 +53,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
       this._veryNarrow = (this.clientWidth || 0) < 225;
     },
     250,
-    false
+    true
   );
 
   public setConfig(config: EntityConfig): void {
@@ -216,9 +216,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
 
   private _attachObserver(): void {
     installResizeObserver().then(() => {
-      this._resizeObserver = new ResizeObserver(() =>
-        this._debouncedResizeListener()
-      );
+      this._resizeObserver = new ResizeObserver(this._debouncedResizeListener);
 
       this._resizeObserver.observe(this);
     });

From e165a9668969410b435184abf9d5b04f2b90f019 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 20 May 2020 21:36:11 +0200
Subject: [PATCH 06/25] Bumped version to 20200519.1

---
 setup.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/setup.py b/setup.py
index eb4d8d3d99..d63dd6e454 100644
--- a/setup.py
+++ b/setup.py
@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20200519.0",
+    version="20200519.1",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",

From 4b8f7e1fe9c6f9000c799569a03e2b09e22db9be Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Wed, 20 May 2020 15:39:29 -0400
Subject: [PATCH 07/25] Weather Card: Fix Forecast Image Spacing (#5952)

---
 src/panels/lovelace/cards/hui-weather-forecast-card.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
index 69862bb4c3..06b839075d 100644
--- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts
+++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
@@ -435,6 +435,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
 
         .forecast-image-icon > * {
           width: 40px;
+          height: 40px;
         }
 
         .forecast-icon {

From 9689db9605b23b3031d2fdaf537ba2f8ee53857b Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 20 May 2020 23:08:49 +0200
Subject: [PATCH 08/25] Upgrade lazy error card (#5955)

---
 src/panels/lovelace/create-element/create-element-base.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/panels/lovelace/create-element/create-element-base.ts b/src/panels/lovelace/create-element/create-element-base.ts
index f409f6a3b6..1e9c09cf59 100644
--- a/src/panels/lovelace/create-element/create-element-base.ts
+++ b/src/panels/lovelace/create-element/create-element-base.ts
@@ -52,9 +52,10 @@ export const createErrorCardElement = (config: ErrorCardConfig) => {
     el.setConfig(config);
   } else {
     import("../cards/hui-error-card");
-    customElements
-      .whenDefined("hui-error-card")
-      .then(() => el.setConfig(config));
+    customElements.whenDefined("hui-error-card").then(() => {
+      customElements.upgrade(el);
+      el.setConfig(config);
+    });
   }
   return el;
 };

From c6be3be45ad58b3c312a857512bf8185e7cb8c0d Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 21 May 2020 13:00:33 +0200
Subject: [PATCH 09/25] Fix markdown card crashing the demo (#5962)

---
 .../lovelace/cards/hui-markdown-card.ts       | 36 +++++++++----------
 .../cards/hui-weather-forecast-card.ts        |  1 +
 .../lovelace/common/compute-card-size.ts      |  2 +-
 .../editor/card-editor/hui-card-picker.ts     | 15 +++++---
 4 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-markdown-card.ts b/src/panels/lovelace/cards/hui-markdown-card.ts
index 75ac449ad0..1e0b886e57 100644
--- a/src/panels/lovelace/cards/hui-markdown-card.ts
+++ b/src/panels/lovelace/cards/hui-markdown-card.ts
@@ -41,7 +41,7 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
 
   @property() private _content = "";
 
-  @property() private _unsubRenderTemplate?: Promise<UnsubscribeFunc>;
+  @property() private _unsubRenderTemplate?: UnsubscribeFunc;
 
   public getCardSize(): number {
     return this._config === undefined
@@ -121,24 +121,25 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
       return;
     }
 
-    this._unsubRenderTemplate = subscribeRenderTemplate(
-      this.hass.connection,
-      (result) => {
-        this._content = result;
-      },
-      {
-        template: this._config.content,
-        entity_ids: this._config.entity_id,
-        variables: {
-          config: this._config,
-          user: this.hass.user!.name,
+    try {
+      this._unsubRenderTemplate = await subscribeRenderTemplate(
+        this.hass.connection,
+        (result) => {
+          this._content = result;
         },
-      }
-    );
-    this._unsubRenderTemplate.catch(() => {
+        {
+          template: this._config.content,
+          entity_ids: this._config.entity_id,
+          variables: {
+            config: this._config,
+            user: this.hass.user!.name,
+          },
+        }
+      );
+    } catch {
       this._content = this._config!.content;
       this._unsubRenderTemplate = undefined;
-    });
+    }
   }
 
   private async _tryDisconnect(): Promise<void> {
@@ -147,9 +148,8 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
     }
 
     try {
-      const unsub = await this._unsubRenderTemplate;
+      this._unsubRenderTemplate();
       this._unsubRenderTemplate = undefined;
-      unsub();
     } catch (e) {
       if (e.code === "not_found") {
         // If we get here, the connection was probably already closed. Ignore.
diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
index 06b839075d..d9d7e5ce4f 100644
--- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts
+++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
@@ -115,6 +115,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
       oldConfig.theme !== this._config.theme
     ) {
       applyThemesOnElement(this, this.hass.themes, this._config.theme);
+      this.requestUpdate();
     }
   }
 
diff --git a/src/panels/lovelace/common/compute-card-size.ts b/src/panels/lovelace/common/compute-card-size.ts
index a8f884f75c..b572b0b5e3 100644
--- a/src/panels/lovelace/common/compute-card-size.ts
+++ b/src/panels/lovelace/common/compute-card-size.ts
@@ -1,5 +1,5 @@
 import { LovelaceCard } from "../types";
 
 export const computeCardSize = (card: LovelaceCard): number => {
-  return typeof card.getCardSize === "function" ? card.getCardSize() : 1;
+  return typeof card.getCardSize === "function" ? card.getCardSize() : 4;
 };
diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
index cf2870801e..9b0216d155 100644
--- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
+++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts
@@ -284,16 +284,23 @@ export class HuiCardPicker extends LitElement {
       "ll-rebuild",
       (ev) => {
         ev.stopPropagation();
-        element.parentElement!.replaceChild(
-          this._createCardElement(cardConfig),
-          element
-        );
+        this._rebuildCard(element, cardConfig);
       },
       { once: true }
     );
     return element;
   }
 
+  private _rebuildCard(
+    cardElToReplace: LovelaceCard,
+    config: LovelaceCardConfig
+  ): void {
+    const newCardEl = this._createCardElement(config);
+    if (cardElToReplace.parentElement) {
+      cardElToReplace.parentElement!.replaceChild(newCardEl, cardElToReplace);
+    }
+  }
+
   private async _renderCardElement(card: Card): Promise<TemplateResult> {
     let { type } = card;
     const { showElement, isCustom, name, description } = card;

From 0c57c05a229a27ec9c6c5cba497fe242d8e7167e Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 21 May 2020 13:02:07 +0200
Subject: [PATCH 10/25] Bumped version to 20200519.2

---
 setup.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/setup.py b/setup.py
index d63dd6e454..e96209534f 100644
--- a/setup.py
+++ b/setup.py
@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20200519.1",
+    version="20200519.2",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",

From 8e0688140ececb3cf43076cbbdc5b8b646139d54 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 21 May 2020 14:54:10 +0200
Subject: [PATCH 11/25] Fix weather card (#5966)

---
 .../cards/hui-weather-forecast-card.ts        | 31 ++++++++++---------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
index d9d7e5ce4f..e2b49a2d4b 100644
--- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts
+++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
@@ -97,6 +97,14 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
     this._config = config;
   }
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return hasConfigOrEntityChanged(this, changedProps);
+  }
+
+  protected firstUpdated(): void {
+    this._attachObserver();
+  }
+
   protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
     if (!this._config || !this.hass) {
@@ -109,10 +117,10 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
       | undefined;
 
     if (
-      !oldHass ||
-      !oldConfig ||
-      oldHass.themes !== this.hass.themes ||
-      oldConfig.theme !== this._config.theme
+      (changedProps.has("hass") && !oldHass) ||
+      (changedProps.has("_config") && !oldConfig) ||
+      (changedProps.has("hass") && oldHass!.themes !== this.hass.themes) ||
+      (changedProps.has("_config") && oldConfig!.theme !== this._config.theme)
     ) {
       applyThemesOnElement(this, this.hass.themes, this._config.theme);
       this.requestUpdate();
@@ -277,22 +285,15 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
     `;
   }
 
-  protected shouldUpdate(changedProps: PropertyValues): boolean {
-    return hasConfigOrEntityChanged(this, changedProps);
-  }
-
-  protected firstUpdated(): void {
-    this._attachObserver();
-  }
-
   private _handleAction(): void {
     fireEvent(this, "hass-more-info", { entityId: this._config!.entity });
   }
 
   private async _attachObserver(): Promise<void> {
-    await installResizeObserver();
-    this._resizeObserver = new ResizeObserver(this._debouncedMeasure);
-
+    if (!this._resizeObserver) {
+      await installResizeObserver();
+      this._resizeObserver = new ResizeObserver(this._debouncedMeasure);
+    }
     const card = this.shadowRoot!.querySelector("ha-card");
     // If we show an error or warning there is no ha-card
     if (!card) {

From 3f35c603d2f21f2ddc67fed7167bac7e76b41f83 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 21 May 2020 15:10:32 +0200
Subject: [PATCH 12/25] Don't set hass when not defined (#5967)

---
 src/panels/lovelace/cards/hui-picture-elements-card.ts | 4 +++-
 src/panels/lovelace/cards/hui-stack-card.ts            | 8 ++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-picture-elements-card.ts b/src/panels/lovelace/cards/hui-picture-elements-card.ts
index 9a178f22d4..29c78c9650 100644
--- a/src/panels/lovelace/cards/hui-picture-elements-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-elements-card.ts
@@ -76,7 +76,9 @@ class HuiPictureElementsCard extends LitElement implements LovelaceCard {
     this._elements = this._config.elements.map(
       (elementConfig: LovelaceElementConfig) => {
         const element = createStyledHuiElement(elementConfig);
-        element.hass = this.hass;
+        if (this.hass) {
+          element.hass = this.hass;
+        }
         return element as LovelaceElement;
       }
     );
diff --git a/src/panels/lovelace/cards/hui-stack-card.ts b/src/panels/lovelace/cards/hui-stack-card.ts
index 547aad6357..92e8e3f1e4 100644
--- a/src/panels/lovelace/cards/hui-stack-card.ts
+++ b/src/panels/lovelace/cards/hui-stack-card.ts
@@ -58,8 +58,12 @@ export abstract class HuiStackCard extends LitElement implements LovelaceCard {
     }
 
     for (const element of this._cards) {
-      element.hass = this.hass;
-      element.editMode = this.editMode;
+      if (this.hass) {
+        element.hass = this.hass;
+      }
+      if (this.editMode !== undefined) {
+        element.editMode = this.editMode;
+      }
     }
   }
 

From 9c574995ac6e2202ef8c41829e8d2d3009cfeaaf Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Thu, 21 May 2020 15:15:37 +0200
Subject: [PATCH 13/25] Bumped version to 20200519.3

---
 setup.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/setup.py b/setup.py
index e96209534f..384c4c7392 100644
--- a/setup.py
+++ b/setup.py
@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20200519.2",
+    version="20200519.3",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",

From 6d0490d7d9a44b668d0c9990b89a3129844457de Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Fri, 22 May 2020 14:44:17 +0200
Subject: [PATCH 14/25] Fix show password toggle (#5979)

---
 src/components/ha-form/ha-form-string.ts                    | 5 ++---
 src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts | 1 -
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/ha-form/ha-form-string.ts b/src/components/ha-form/ha-form-string.ts
index 4b7c78848f..c940e5e7c6 100644
--- a/src/components/ha-form/ha-form-string.ts
+++ b/src/components/ha-form/ha-form-string.ts
@@ -49,7 +49,6 @@ export class HaFormString extends LitElement implements HaFormElement {
           >
             <ha-icon-button
               toggles
-              .active=${this._unmaskedPassword}
               slot="suffix"
               .icon=${this._unmaskedPassword ? "hass:eye-off" : "hass:eye"}
               id="iconButton"
@@ -72,8 +71,8 @@ export class HaFormString extends LitElement implements HaFormElement {
         `;
   }
 
-  private _toggleUnmaskedPassword(ev: Event): void {
-    this._unmaskedPassword = (ev.target as any).active;
+  private _toggleUnmaskedPassword(): void {
+    this._unmaskedPassword = !this._unmaskedPassword;
   }
 
   private _valueChanged(ev: Event): void {
diff --git a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
index 2ccef81407..7415c133ac 100644
--- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
+++ b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
@@ -176,7 +176,6 @@ export class HaVoiceCommandDialog extends LitElement {
                         `
                       : ""}
                     <ha-icon-button
-                      .active=${Boolean(this.results)}
                       icon="hass:microphone"
                       @click=${this._toggleListening}
                     >

From 55dd1f4aa1a998503cf15a15cd0a19b3a82e57d1 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Fri, 22 May 2020 15:36:30 +0200
Subject: [PATCH 15/25] Fix device entities not updating (#5983)

---
 .../device-detail/ha-device-entities-card.ts  | 28 ++++++++++++-------
 1 file changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/panels/config/devices/device-detail/ha-device-entities-card.ts b/src/panels/config/devices/device-detail/ha-device-entities-card.ts
index b82d7e4dd0..a586d15f5a 100644
--- a/src/panels/config/devices/device-detail/ha-device-entities-card.ts
+++ b/src/panels/config/devices/device-detail/ha-device-entities-card.ts
@@ -9,7 +9,6 @@ import {
   LitElement,
   property,
   PropertyValues,
-  queryAll,
   TemplateResult,
 } from "lit-element";
 import { computeDomain } from "../../../../common/entity/compute_domain";
@@ -23,6 +22,7 @@ import { addEntitiesToLovelaceView } from "../../../lovelace/editor/add-entities
 import { LovelaceRow } from "../../../lovelace/entity-rows/types";
 import { showEntityEditorDialog } from "../../entities/show-dialog-entity-editor";
 import { EntityRegistryStateEntry } from "../ha-config-device-page";
+import { HuiErrorCard } from "../../../lovelace/cards/hui-error-card";
 
 @customElement("ha-device-entities-card")
 export class HaDeviceEntitiesCard extends LitElement {
@@ -32,20 +32,21 @@ export class HaDeviceEntitiesCard extends LitElement {
 
   @property() private _showDisabled = false;
 
-  @queryAll("#entities > *") private _entityRows?: LovelaceRow[];
+  private _entityRows: Array<LovelaceRow | HuiErrorCard> = [];
 
   protected shouldUpdate(changedProps: PropertyValues) {
-    if (changedProps.has("hass")) {
-      this._entityRows?.forEach((element) => {
+    if (changedProps.has("hass") && changedProps.size === 1) {
+      this._entityRows.forEach((element) => {
         element.hass = this.hass;
       });
-      return changedProps.size > 1;
+      return false;
     }
     return true;
   }
 
   protected render(): TemplateResult {
     const disabledEntities: EntityRegistryStateEntry[] = [];
+    this._entityRows = [];
     return html`
       <ha-card
         .header=${this.hass.localize(
@@ -54,7 +55,7 @@ export class HaDeviceEntitiesCard extends LitElement {
       >
         ${this.entities.length
           ? html`
-              <div id="entities">
+              <div id="entities" @hass-more-info=${this._overrideMoreInfo}>
                 ${this.entities.map((entry: EntityRegistryStateEntry) => {
                   if (entry.disabled_by) {
                     disabledEntities.push(entry);
@@ -127,8 +128,7 @@ export class HaDeviceEntitiesCard extends LitElement {
     }
     // @ts-ignore
     element.entry = entry;
-    element.addEventListener("hass-more-info", (ev) => this._openEditEntry(ev));
-
+    this._entityRows.push(element);
     return html` <div>${element}</div> `;
   }
 
@@ -148,8 +148,16 @@ export class HaDeviceEntitiesCard extends LitElement {
     `;
   }
 
-  private _openEditEntry(ev: Event): void {
+  private _overrideMoreInfo(ev: Event): void {
     ev.stopPropagation();
+    const entry = (ev.target! as any).entry;
+    showEntityEditorDialog(this, {
+      entry,
+      entity_id: entry.entity_id,
+    });
+  }
+
+  private _openEditEntry(ev: Event): void {
     const entry = (ev.currentTarget! as any).entry;
     showEntityEditorDialog(this, {
       entry,
@@ -173,7 +181,7 @@ export class HaDeviceEntitiesCard extends LitElement {
         display: block;
       }
       ha-icon {
-        width: 40px;
+        margin-left: 8px;
       }
       .entity-id {
         color: var(--secondary-text-color);

From 785f49b005ce8f79212556ff650d84c0b7cfb3a2 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Fri, 22 May 2020 15:36:43 +0200
Subject: [PATCH 16/25] Picture glance: Use icon button instead of icon with
 button styles. (#5977)

---
 .../lovelace/cards/hui-picture-glance-card.ts | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-picture-glance-card.ts b/src/panels/lovelace/cards/hui-picture-glance-card.ts
index a1fb3bec86..e1b6c22f91 100644
--- a/src/panels/lovelace/cards/hui-picture-glance-card.ts
+++ b/src/panels/lovelace/cards/hui-picture-glance-card.ts
@@ -17,7 +17,7 @@ import { computeStateDisplay } from "../../../common/entity/compute_state_displa
 import { computeStateName } from "../../../common/entity/compute_state_name";
 import { stateIcon } from "../../../common/entity/state_icon";
 import "../../../components/ha-card";
-import "../../../components/ha-icon";
+import "../../../components/ha-icon-button";
 import { ActionHandlerEvent } from "../../../data/lovelace";
 import { HomeAssistant } from "../../../types";
 import { actionHandler } from "../common/directives/action-handler-directive";
@@ -240,15 +240,16 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
 
     return html`
       <div class="wrapper">
-        <ha-icon
+        <ha-icon-button
           @action=${this._handleAction}
           .actionHandler=${actionHandler({
             hasHold: hasAction(entityConf.hold_action),
             hasDoubleClick: hasAction(entityConf.double_tap_action),
           })}
           tabindex=${ifDefined(
-            hasAction(entityConf.tap_action) ? "0" : undefined
+            !hasAction(entityConf.tap_action) ? "-1" : undefined
           )}
+          .disabled=${!hasAction(entityConf.tap_action)}
           .config=${entityConf}
           class=${classMap({
             "state-on": !STATES_OFF.has(stateObj.state),
@@ -261,7 +262,7 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
             this.hass!.language
           )}
           `}
-        ></ha-icon>
+        ></ha-icon-button>
         ${this._config!.show_state !== true && entityConf.show_state !== true
           ? html` <div class="state"></div> `
           : html`
@@ -326,19 +327,15 @@ class HuiPictureGlanceCard extends LitElement implements LovelaceCard {
         margin-left: 8px;
       }
 
-      ha-icon {
-        cursor: pointer;
+      ha-icon-button {
+        --mdc-icon-button-size: 40px;
+        --disabled-text-color: currentColor;
         color: #a9a9a9;
       }
 
-      ha-icon.state-on {
+      ha-icon-button.state-on {
         color: white;
       }
-      ha-icon:focus {
-        outline: none;
-        background: var(--divider-color);
-        border-radius: 100%;
-      }
       .state {
         display: block;
         font-size: 12px;

From 736444201be61dfa67eff38bdbb1babb96fdcb6a Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Fri, 22 May 2020 17:55:28 +0200
Subject: [PATCH 17/25] Fix for icons with firefox private mode (#5985)

---
 src/components/ha-icon.ts                      |  9 ++++++++-
 src/data/iconsets.ts                           | 13 ++++++++++---
 src/panels/lovelace/cards/hui-markdown-card.ts |  2 +-
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/ha-icon.ts b/src/components/ha-icon.ts
index 7f1bfc57c9..7a8eee1896 100644
--- a/src/components/ha-icon.ts
+++ b/src/components/ha-icon.ts
@@ -90,7 +90,14 @@ export class HaIcon extends LitElement {
       return;
     }
 
-    const databaseIcon: string = await getIcon(iconName);
+    let databaseIcon: string | undefined;
+    try {
+      databaseIcon = await getIcon(iconName);
+    } catch (_err) {
+      // Firefox in private mode doesn't support IDB
+      databaseIcon = undefined;
+    }
+
     if (databaseIcon) {
       this._path = databaseIcon;
       cachedIcons[iconName] = databaseIcon;
diff --git a/src/data/iconsets.ts b/src/data/iconsets.ts
index 1f28e7dd80..941f84cd74 100644
--- a/src/data/iconsets.ts
+++ b/src/data/iconsets.ts
@@ -14,12 +14,12 @@ export const iconStore = new Store("hass-icon-db", "mdi-icon-store");
 
 export const MDI_PREFIXES = ["mdi", "hass", "hassio", "hademo"];
 
-let toRead: Array<[string, (string) => void]> = [];
+let toRead: Array<[string, (string) => void, () => void]> = [];
 
 // Queue up as many icon fetches in 1 transaction
 export const getIcon = (iconName: string) =>
-  new Promise<string>((resolve) => {
-    toRead.push([iconName, resolve]);
+  new Promise<string>((resolve, reject) => {
+    toRead.push([iconName, resolve, reject]);
 
     if (toRead.length > 1) {
       return;
@@ -38,6 +38,13 @@ export const getIcon = (iconName: string) =>
         for (const [resolve_, request] of results) {
           resolve_(request.result);
         }
+      })
+      .catch(() => {
+        // Firefox in private mode doesn't support IDB
+        for (const [, , reject_] of toRead) {
+          reject_();
+        }
+        toRead = [];
       });
   });
 
diff --git a/src/panels/lovelace/cards/hui-markdown-card.ts b/src/panels/lovelace/cards/hui-markdown-card.ts
index 1e0b886e57..d2ced882c2 100644
--- a/src/panels/lovelace/cards/hui-markdown-card.ts
+++ b/src/panels/lovelace/cards/hui-markdown-card.ts
@@ -136,7 +136,7 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
           },
         }
       );
-    } catch {
+    } catch (_err) {
       this._content = this._config!.content;
       this._unsubRenderTemplate = undefined;
     }

From 23192226dd36130c565c5b19b6247275b663f392 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Fri, 22 May 2020 18:16:45 +0200
Subject: [PATCH 18/25] Missed paper icon button (#5987)

---
 .../automation/condition/ha-automation-condition-row.ts       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts
index af0850e5f6..d25bd7d0e1 100644
--- a/src/panels/config/automation/condition/ha-automation-condition-row.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts
@@ -68,10 +68,10 @@ export default class HaAutomationConditionRow extends LitElement {
               vertical-offset="-5"
               close-on-activate
             >
-              <paper-icon-button
+              <ha-icon-button
                 icon="hass:dots-vertical"
                 slot="dropdown-trigger"
-              ></paper-icon-button>
+              ></ha-icon-button>
               <paper-listbox slot="dropdown-content">
                 <paper-item @tap=${this._switchYamlMode}>
                   ${this._yamlMode

From 6cc9ce573b3484f92f8563f0b554e62dbeb00f6d Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Fri, 22 May 2020 18:21:00 +0200
Subject: [PATCH 19/25] Bumped version to 20200519.4

---
 setup.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/setup.py b/setup.py
index 384c4c7392..378ef1156c 100644
--- a/setup.py
+++ b/setup.py
@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20200519.3",
+    version="20200519.4",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",

From 9c43c5806dd6ca88739bd974b9135e9ba0f9e3b6 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Tue, 26 May 2020 09:44:46 +0200
Subject: [PATCH 20/25] Fix shopping list initial data fetch (#6020)

---
 src/mixins/subscribe-mixin.ts                 |   9 +-
 .../lovelace/cards/hui-markdown-card.ts       |   7 +-
 .../lovelace/cards/hui-shopping-list-card.ts  | 158 ++++++++----------
 3 files changed, 84 insertions(+), 90 deletions(-)

diff --git a/src/mixins/subscribe-mixin.ts b/src/mixins/subscribe-mixin.ts
index a4d877a85f..3250093763 100644
--- a/src/mixins/subscribe-mixin.ts
+++ b/src/mixins/subscribe-mixin.ts
@@ -12,7 +12,7 @@ export const SubscribeMixin = <T extends Constructor<UpdatingElement>>(
   class SubscribeClass extends superClass {
     @property() public hass?: HomeAssistant;
 
-    private __unsubs?: UnsubscribeFunc[];
+    private __unsubs?: Array<UnsubscribeFunc | Promise<UnsubscribeFunc>>;
 
     public connectedCallback() {
       super.connectedCallback();
@@ -23,7 +23,8 @@ export const SubscribeMixin = <T extends Constructor<UpdatingElement>>(
       super.disconnectedCallback();
       if (this.__unsubs) {
         while (this.__unsubs.length) {
-          this.__unsubs.pop()!();
+          const unsub = this.__unsubs.pop()!;
+          Promise.resolve(unsub).then((unsubFunc) => unsubFunc());
         }
         this.__unsubs = undefined;
       }
@@ -36,7 +37,9 @@ export const SubscribeMixin = <T extends Constructor<UpdatingElement>>(
       }
     }
 
-    protected hassSubscribe(): UnsubscribeFunc[] {
+    protected hassSubscribe(): Array<
+      UnsubscribeFunc | Promise<UnsubscribeFunc>
+    > {
       return [];
     }
 
diff --git a/src/panels/lovelace/cards/hui-markdown-card.ts b/src/panels/lovelace/cards/hui-markdown-card.ts
index d2ced882c2..4a466d72b6 100644
--- a/src/panels/lovelace/cards/hui-markdown-card.ts
+++ b/src/panels/lovelace/cards/hui-markdown-card.ts
@@ -41,7 +41,7 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
 
   @property() private _content = "";
 
-  @property() private _unsubRenderTemplate?: UnsubscribeFunc;
+  @property() private _unsubRenderTemplate?: Promise<UnsubscribeFunc>;
 
   public getCardSize(): number {
     return this._config === undefined
@@ -122,7 +122,7 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
     }
 
     try {
-      this._unsubRenderTemplate = await subscribeRenderTemplate(
+      this._unsubRenderTemplate = subscribeRenderTemplate(
         this.hass.connection,
         (result) => {
           this._content = result;
@@ -148,7 +148,8 @@ export class HuiMarkdownCard extends LitElement implements LovelaceCard {
     }
 
     try {
-      this._unsubRenderTemplate();
+      const unsub = await this._unsubRenderTemplate;
+      unsub();
       this._unsubRenderTemplate = undefined;
     } catch (e) {
       if (e.code === "not_found") {
diff --git a/src/panels/lovelace/cards/hui-shopping-list-card.ts b/src/panels/lovelace/cards/hui-shopping-list-card.ts
index 2695f7fcf2..85395dfffd 100644
--- a/src/panels/lovelace/cards/hui-shopping-list-card.ts
+++ b/src/panels/lovelace/cards/hui-shopping-list-card.ts
@@ -25,9 +25,12 @@ import {
 import { HomeAssistant } from "../../../types";
 import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { SensorCardConfig, ShoppingListCardConfig } from "./types";
+import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
 
 @customElement("hui-shopping-list-card")
-class HuiShoppingListCard extends LitElement implements LovelaceCard {
+class HuiShoppingListCard extends SubscribeMixin(LitElement)
+  implements LovelaceCard {
   public static async getConfigElement(): Promise<LovelaceCardEditor> {
     await import(
       /* webpackChunkName: "hui-shopping-list-editor" */ "../editor/config-elements/hui-shopping-list-editor"
@@ -47,8 +50,6 @@ class HuiShoppingListCard extends LitElement implements LovelaceCard {
 
   @property() private _checkedItems?: ShoppingListItem[];
 
-  private _unsubEvents?: Promise<() => Promise<void>>;
-
   public getCardSize(): number {
     return (this._config ? (this._config.title ? 1 : 0) : 0) + 3;
   }
@@ -57,27 +58,16 @@ class HuiShoppingListCard extends LitElement implements LovelaceCard {
     this._config = config;
     this._uncheckedItems = [];
     this._checkedItems = [];
-    this._fetchData();
   }
 
-  public connectedCallback(): void {
-    super.connectedCallback();
-
-    if (this.hass) {
-      this._unsubEvents = this.hass.connection.subscribeEvents(
+  public hassSubscribe(): Promise<UnsubscribeFunc>[] {
+    this._fetchData();
+    return [
+      this.hass!.connection.subscribeEvents(
         () => this._fetchData(),
         "shopping_list_updated"
-      );
-      this._fetchData();
-    }
-  }
-
-  public disconnectedCallback(): void {
-    super.disconnectedCallback();
-
-    if (this._unsubEvents) {
-      this._unsubEvents.then((unsub) => unsub());
-    }
+      ),
+    ];
   }
 
   protected updated(changedProps: PropertyValues): void {
@@ -85,16 +75,15 @@ class HuiShoppingListCard extends LitElement implements LovelaceCard {
     if (!this._config || !this.hass) {
       return;
     }
+
     const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
     const oldConfig = changedProps.get("_config") as
       | SensorCardConfig
       | undefined;
 
     if (
-      !oldHass ||
-      !oldConfig ||
-      oldHass.themes !== this.hass.themes ||
-      oldConfig.theme !== this._config.theme
+      (changedProps.has("hass") && oldHass?.themes !== this.hass.themes) ||
+      (changedProps.has("_config") && oldConfig?.theme !== this._config.theme)
     ) {
       applyThemesOnElement(this, this.hass.themes, this._config.theme);
     }
@@ -199,6 +188,67 @@ class HuiShoppingListCard extends LitElement implements LovelaceCard {
     `;
   }
 
+  private async _fetchData(): Promise<void> {
+    if (!this.hass) {
+      return;
+    }
+    const checkedItems: ShoppingListItem[] = [];
+    const uncheckedItems: ShoppingListItem[] = [];
+    const items = await fetchItems(this.hass);
+    for (const key in items) {
+      if (items[key].complete) {
+        checkedItems.push(items[key]);
+      } else {
+        uncheckedItems.push(items[key]);
+      }
+    }
+    this._checkedItems = checkedItems;
+    this._uncheckedItems = uncheckedItems;
+  }
+
+  private _completeItem(ev): void {
+    updateItem(this.hass!, ev.target.itemId, {
+      complete: ev.target.checked,
+    }).catch(() => this._fetchData());
+  }
+
+  private _saveEdit(ev): void {
+    updateItem(this.hass!, ev.target.itemId, {
+      name: ev.target.value,
+    }).catch(() => this._fetchData());
+
+    ev.target.blur();
+  }
+
+  private _clearItems(): void {
+    if (this.hass) {
+      clearItems(this.hass).catch(() => this._fetchData());
+    }
+  }
+
+  private get _newItem(): PaperInputElement {
+    return this.shadowRoot!.querySelector(".addBox") as PaperInputElement;
+  }
+
+  private _addItem(ev): void {
+    const newItem = this._newItem;
+
+    if (newItem.value!.length > 0) {
+      addItem(this.hass!, newItem.value!).catch(() => this._fetchData());
+    }
+
+    newItem.value = "";
+    if (ev) {
+      newItem.focus();
+    }
+  }
+
+  private _addKeyPress(ev): void {
+    if (ev.keyCode === 13) {
+      this._addItem(null);
+    }
+  }
+
   static get styles(): CSSResult {
     return css`
       ha-card {
@@ -257,66 +307,6 @@ class HuiShoppingListCard extends LitElement implements LovelaceCard {
       }
     `;
   }
-
-  private async _fetchData(): Promise<void> {
-    if (this.hass) {
-      const checkedItems: ShoppingListItem[] = [];
-      const uncheckedItems: ShoppingListItem[] = [];
-      const items = await fetchItems(this.hass);
-      for (const key in items) {
-        if (items[key].complete) {
-          checkedItems.push(items[key]);
-        } else {
-          uncheckedItems.push(items[key]);
-        }
-      }
-      this._checkedItems = checkedItems;
-      this._uncheckedItems = uncheckedItems;
-    }
-  }
-
-  private _completeItem(ev): void {
-    updateItem(this.hass!, ev.target.itemId, {
-      complete: ev.target.checked,
-    }).catch(() => this._fetchData());
-  }
-
-  private _saveEdit(ev): void {
-    updateItem(this.hass!, ev.target.itemId, {
-      name: ev.target.value,
-    }).catch(() => this._fetchData());
-
-    ev.target.blur();
-  }
-
-  private _clearItems(): void {
-    if (this.hass) {
-      clearItems(this.hass).catch(() => this._fetchData());
-    }
-  }
-
-  private get _newItem(): PaperInputElement {
-    return this.shadowRoot!.querySelector(".addBox") as PaperInputElement;
-  }
-
-  private _addItem(ev): void {
-    const newItem = this._newItem;
-
-    if (newItem.value!.length > 0) {
-      addItem(this.hass!, newItem.value!).catch(() => this._fetchData());
-    }
-
-    newItem.value = "";
-    if (ev) {
-      newItem.focus();
-    }
-  }
-
-  private _addKeyPress(ev): void {
-    if (ev.keyCode === 13) {
-      this._addItem(null);
-    }
-  }
 }
 
 declare global {

From 582d15988474783c8ea781871a1dcc2cc12d8266 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 25 May 2020 21:57:04 +0200
Subject: [PATCH 21/25] Remove mwc-icon-button from dev tools states (#6046)

---
 .../developer-tools/state/developer-tools-state.js   | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/panels/developer-tools/state/developer-tools-state.js b/src/panels/developer-tools/state/developer-tools-state.js
index 76fecb5d97..2c55a1f6de 100644
--- a/src/panels/developer-tools/state/developer-tools-state.js
+++ b/src/panels/developer-tools/state/developer-tools-state.js
@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@material/mwc-icon-button";
 import "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
@@ -59,9 +58,10 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
         .entities td {
           padding: 4px;
         }
-        .entities mwc-icon-button {
-          --mdc-icon-button-size: 24px;
+        .entities ha-svg-icon {
           --mdc-icon-size: 20px;
+          padding: 4px;
+          cursor: pointer;
         }
         .entities td:nth-child(3) {
           white-space: pre-wrap;
@@ -153,12 +153,12 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
         <template is="dom-repeat" items="[[_entities]]" as="entity">
           <tr>
             <td>
-              <mwc-icon-button
+              <ha-svg-icon
                 on-click="entityMoreInfo"
                 alt="[[localize('ui.panel.developer-tools.tabs.states.more_info')]]"
                 title="[[localize('ui.panel.developer-tools.tabs.states.more_info')]]"
-                ><ha-svg-icon path="[[informationOutlineIcon()]]"></ha-svg-icon>
-              </mwc-icon-button>
+                path="[[informationOutlineIcon()]]"
+              ></ha-svg-icon>
               <a href="#" on-click="entitySelected">[[entity.entity_id]]</a>
             </td>
             <td>[[entity.state]]</td>

From 20baff380b1624ee7831c3a3bc2e04dcd28f2a66 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 25 May 2020 19:36:47 +0200
Subject: [PATCH 22/25] Dont recreate resize observers and replace polyfill
 (#6043)

---
 package.json                                  |  2 +-
 src/data/area_registry.ts                     | 18 +++++++---
 src/panels/lovelace/cards/hui-gauge-card.ts   | 13 +++----
 src/panels/lovelace/cards/hui-map-card.ts     | 34 ++++++-------------
 .../lovelace/cards/hui-media-control-card.ts  | 12 ++++---
 .../cards/hui-weather-forecast-card.ts        |  7 ++--
 .../common/install-resize-observer.ts         |  3 +-
 .../hui-media-player-entity-row.ts            | 34 +++++++++----------
 yarn.lock                                     |  5 ---
 9 files changed, 61 insertions(+), 67 deletions(-)

diff --git a/package.json b/package.json
index 4252ee18a7..17e89644b2 100644
--- a/package.json
+++ b/package.json
@@ -104,7 +104,7 @@
     "node-vibrant": "^3.1.5",
     "proxy-polyfill": "^0.3.1",
     "regenerator-runtime": "^0.13.2",
-    "resize-observer": "^1.0.0",
+    "resize-observer-polyfill": "^1.5.1",
     "roboto-fontface": "^0.10.0",
     "superstruct": "^0.6.1",
     "unfetch": "^4.1.0",
diff --git a/src/data/area_registry.ts b/src/data/area_registry.ts
index 63e8a38301..d59a7ff69d 100644
--- a/src/data/area_registry.ts
+++ b/src/data/area_registry.ts
@@ -2,6 +2,7 @@ import { Connection, createCollection } from "home-assistant-js-websocket";
 import { compare } from "../common/string/compare";
 import { debounce } from "../common/util/debounce";
 import { HomeAssistant } from "../types";
+import { Store } from "home-assistant-js-websocket/dist/store";
 
 export interface AreaRegistryEntry {
   area_id: string;
@@ -38,18 +39,27 @@ export const deleteAreaRegistryEntry = (hass: HomeAssistant, areaId: string) =>
     area_id: areaId,
   });
 
-const fetchAreaRegistry = (conn) =>
+const fetchAreaRegistry = (conn: Connection) =>
   conn
     .sendMessagePromise({
       type: "config/area_registry/list",
     })
-    .then((areas) => areas.sort((ent1, ent2) => compare(ent1.name, ent2.name)));
+    .then((areas) =>
+      (areas as AreaRegistryEntry[]).sort((ent1, ent2) =>
+        compare(ent1.name, ent2.name)
+      )
+    );
 
-const subscribeAreaRegistryUpdates = (conn, store) =>
+const subscribeAreaRegistryUpdates = (
+  conn: Connection,
+  store: Store<AreaRegistryEntry[]>
+) =>
   conn.subscribeEvents(
     debounce(
       () =>
-        fetchAreaRegistry(conn).then((areas) => store.setState(areas, true)),
+        fetchAreaRegistry(conn).then((areas: AreaRegistryEntry[]) =>
+          store.setState(areas, true)
+        ),
       500,
       true
     ),
diff --git a/src/panels/lovelace/cards/hui-gauge-card.ts b/src/panels/lovelace/cards/hui-gauge-card.ts
index c13ff98fef..37d9f761af 100644
--- a/src/panels/lovelace/cards/hui-gauge-card.ts
+++ b/src/panels/lovelace/cards/hui-gauge-card.ts
@@ -175,6 +175,7 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
   }
 
   protected firstUpdated(): void {
+    this._measureCard();
     this._attachObserver();
   }
 
@@ -236,10 +237,12 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
   }
 
   private async _attachObserver(): Promise<void> {
-    await installResizeObserver();
-
-    this._resizeObserver = new ResizeObserver(this._debouncedMeasure);
-
+    if (!this._resizeObserver) {
+      await installResizeObserver();
+      this._resizeObserver = new ResizeObserver(
+        debounce(() => this._measureCard(), 250, false)
+      );
+    }
     const card = this.shadowRoot!.querySelector("ha-card");
     // If we show an error or warning there is no ha-card
     if (!card) {
@@ -248,8 +251,6 @@ class HuiGaugeCard extends LitElement implements LovelaceCard {
     this._resizeObserver.observe(card);
   }
 
-  private _debouncedMeasure = debounce(() => this._measureCard(), 250, true);
-
   private _measureCard() {
     if (!this.isConnected) {
       return;
diff --git a/src/panels/lovelace/cards/hui-map-card.ts b/src/panels/lovelace/cards/hui-map-card.ts
index 1a8f72a1b4..de7bd3a434 100644
--- a/src/panels/lovelace/cards/hui-map-card.ts
+++ b/src/panels/lovelace/cards/hui-map-card.ts
@@ -39,6 +39,7 @@ import { EntityConfig } from "../entity-rows/types";
 import { LovelaceCard } from "../types";
 import "../../../components/ha-card";
 import { MapCardConfig } from "./types";
+import { installResizeObserver } from "../common/install-resize-observer";
 
 @customElement("hui-map-card")
 class HuiMapCard extends LitElement implements LovelaceCard {
@@ -90,17 +91,16 @@ class HuiMapCard extends LitElement implements LovelaceCard {
 
   private _leafletMap?: Map;
 
-  // @ts-ignore
   private _resizeObserver?: ResizeObserver;
 
   private _debouncedResizeListener = debounce(
     () => {
-      if (!this._leafletMap) {
+      if (!this.isConnected || !this._leafletMap) {
         return;
       }
       this._leafletMap.invalidateSize();
     },
-    100,
+    250,
     false
   );
 
@@ -110,8 +110,6 @@ class HuiMapCard extends LitElement implements LovelaceCard {
 
   private _mapPaths: Array<Polyline | CircleMarker> = [];
 
-  private _connected = false;
-
   private _colorDict: { [key: string]: string } = {};
 
   private _colorIndex = 0;
@@ -174,16 +172,14 @@ class HuiMapCard extends LitElement implements LovelaceCard {
 
   public connectedCallback(): void {
     super.connectedCallback();
-    this._connected = true;
+    this._attachObserver();
     if (this.hasUpdated) {
       this.loadMap();
-      this._attachObserver();
     }
   }
 
   public disconnectedCallback(): void {
     super.disconnectedCallback();
-    this._connected = false;
 
     if (this._leafletMap) {
       this._leafletMap.remove();
@@ -193,8 +189,6 @@ class HuiMapCard extends LitElement implements LovelaceCard {
 
     if (this._resizeObserver) {
       this._resizeObserver.unobserve(this._mapEl);
-    } else {
-      window.removeEventListener("resize", this._debouncedResizeListener);
     }
   }
 
@@ -250,9 +244,7 @@ class HuiMapCard extends LitElement implements LovelaceCard {
       return;
     }
 
-    if (this._connected) {
-      this._attachObserver();
-    }
+    this._attachObserver();
 
     if (!this._config.aspect_ratio) {
       root.style.paddingBottom = "100%";
@@ -564,20 +556,14 @@ class HuiMapCard extends LitElement implements LovelaceCard {
     this._mapPaths.forEach((marker) => map.addLayer(marker));
   }
 
-  private _attachObserver(): void {
+  private async _attachObserver(): Promise<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);
+    if (!this._resizeObserver) {
+      await installResizeObserver();
+      this._resizeObserver = new ResizeObserver(this._debouncedResizeListener);
     }
+    this._resizeObserver.observe(this);
   }
 
   private async _getHistory(): Promise<void> {
diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts
index c7e5ba8319..340689a843 100644
--- a/src/panels/lovelace/cards/hui-media-control-card.ts
+++ b/src/panels/lovelace/cards/hui-media-control-card.ts
@@ -431,6 +431,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
   }
 
   protected firstUpdated(): void {
+    this._measureCard();
     this._attachObserver();
   }
 
@@ -618,8 +619,6 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
     );
   }
 
-  private _debouncedMeasure = debounce(() => this._measureCard(), 250, true);
-
   private _measureCard() {
     const card = this.shadowRoot!.querySelector("ha-card");
     if (!card) {
@@ -631,9 +630,12 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
   }
 
   private async _attachObserver(): Promise<void> {
-    await installResizeObserver();
-    this._resizeObserver = new ResizeObserver(this._debouncedMeasure);
-
+    if (!this._resizeObserver) {
+      await installResizeObserver();
+      this._resizeObserver = new ResizeObserver(
+        debounce(() => this._measureCard(), 250, false)
+      );
+    }
     const card = this.shadowRoot!.querySelector("ha-card");
     // If we show an error or warning there is no ha-card
     if (!card) {
diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
index e2b49a2d4b..23155a918a 100644
--- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts
+++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
@@ -102,6 +102,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
   }
 
   protected firstUpdated(): void {
+    this._measureCard();
     this._attachObserver();
   }
 
@@ -292,7 +293,9 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
   private async _attachObserver(): Promise<void> {
     if (!this._resizeObserver) {
       await installResizeObserver();
-      this._resizeObserver = new ResizeObserver(this._debouncedMeasure);
+      this._resizeObserver = new ResizeObserver(
+        debounce(() => this._measureCard(), 250, false)
+      );
     }
     const card = this.shadowRoot!.querySelector("ha-card");
     // If we show an error or warning there is no ha-card
@@ -302,8 +305,6 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
     this._resizeObserver.observe(card);
   }
 
-  private _debouncedMeasure = debounce(() => this._measureCard(), 250, true);
-
   private _measureCard() {
     if (!this.isConnected) {
       return;
diff --git a/src/panels/lovelace/common/install-resize-observer.ts b/src/panels/lovelace/common/install-resize-observer.ts
index f675858d99..1018ea38ca 100644
--- a/src/panels/lovelace/common/install-resize-observer.ts
+++ b/src/panels/lovelace/common/install-resize-observer.ts
@@ -1,6 +1,5 @@
 export const installResizeObserver = async () => {
   if (typeof ResizeObserver !== "function") {
-    const modules = await import("resize-observer");
-    modules.install();
+    window.ResizeObserver = (await import("resize-observer-polyfill")).default;
   }
 };
diff --git a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts
index ba9da31e08..16bed1f07b 100644
--- a/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts
+++ b/src/panels/lovelace/entity-rows/hui-media-player-entity-row.ts
@@ -47,15 +47,6 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
 
   private _resizeObserver?: ResizeObserver;
 
-  private _debouncedResizeListener = debounce(
-    () => {
-      this._narrow = (this.clientWidth || 0) < 300;
-      this._veryNarrow = (this.clientWidth || 0) < 225;
-    },
-    250,
-    true
-  );
-
   public setConfig(config: EntityConfig): void {
     if (!config || !config.entity) {
       throw new Error("Invalid Configuration: 'entity' required");
@@ -66,9 +57,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
 
   public connectedCallback(): void {
     super.connectedCallback();
-    if (!this._resizeObserver) {
-      this._attachObserver();
-    }
+    this._attachObserver();
   }
 
   public disconnectedCallback(): void {
@@ -76,6 +65,7 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
   }
 
   protected firstUpdated(): void {
+    this._measureCard();
     this._attachObserver();
   }
 
@@ -214,12 +204,22 @@ class HuiMediaPlayerEntityRow extends LitElement implements LovelaceRow {
     `;
   }
 
-  private _attachObserver(): void {
-    installResizeObserver().then(() => {
-      this._resizeObserver = new ResizeObserver(this._debouncedResizeListener);
+  private async _attachObserver(): Promise<void> {
+    if (!this._resizeObserver) {
+      await installResizeObserver();
+      this._resizeObserver = new ResizeObserver(
+        debounce(() => this._measureCard(), 250, false)
+      );
+    }
+    this._resizeObserver.observe(this);
+  }
 
-      this._resizeObserver.observe(this);
-    });
+  private _measureCard() {
+    if (!this.isConnected) {
+      return;
+    }
+    this._narrow = (this.clientWidth || 0) < 300;
+    this._veryNarrow = (this.clientWidth || 0) < 225;
   }
 
   private _computeControlIcon(stateObj: HassEntity): string {
diff --git a/yarn.lock b/yarn.lock
index 8bca36beda..3515c5589f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12534,11 +12534,6 @@ resize-observer-polyfill@^1.5.1:
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
   integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
 
-resize-observer@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/resize-observer/-/resize-observer-1.0.0.tgz#4f8380b73b411af4ed7d916fe85a2d59900e71ef"
-  integrity sha512-D7UFShDm2TgrEDEyeg+/tTEbvOgPWlvPAfJtxiKp+qutu6HowmcGJKjECgGru0PPDIj3SAucn3ZPpOx54fF7DQ==
-
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"

From 413f1c31bb87d4180e445997e60a7d0cc3b60120 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Tue, 26 May 2020 09:50:56 +0200
Subject: [PATCH 23/25] Bumped version to 20200519.5

---
 setup.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/setup.py b/setup.py
index 378ef1156c..df198d527f 100644
--- a/setup.py
+++ b/setup.py
@@ -2,7 +2,7 @@ from setuptools import setup, find_packages
 
 setup(
     name="home-assistant-frontend",
-    version="20200519.4",
+    version="20200519.5",
     description="The Home Assistant frontend",
     url="https://github.com/home-assistant/home-assistant-polymer",
     author="The Home Assistant Authors",

From 6076a0cdc48c04056a5c03e5f87fa38996c1f841 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Tue, 26 May 2020 09:59:06 +0200
Subject: [PATCH 24/25] Bump roundslider (#6049)

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 17e89644b2..2c08ccb36c 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
     "@polymer/paper-toast": "^3.0.1",
     "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "3.1.0",
-    "@thomasloven/round-slider": "0.4.1",
+    "@thomasloven/round-slider": "0.5.0",
     "@vaadin/vaadin-combo-box": "^5.0.10",
     "@vaadin/vaadin-date-picker": "^4.0.7",
     "@webcomponents/webcomponentsjs": "^2.2.7",
diff --git a/yarn.lock b/yarn.lock
index 3515c5589f..7a0e8281f4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2844,10 +2844,10 @@
     ejs "^2.6.1"
     magic-string "^0.25.0"
 
-"@thomasloven/round-slider@0.4.1":
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/@thomasloven/round-slider/-/round-slider-0.4.1.tgz#42ddd28abb25c378dce35c4c0ccdd72ea63b3b25"
-  integrity sha512-Z6jrXG5vowKQkOwdsyGDLi8ZT9lUfcYjFsaQe8djhDE8+x41GYp5lkJ4uCwT787A8WcODbtQfYtuxPOlZcizTw==
+"@thomasloven/round-slider@0.5.0":
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/@thomasloven/round-slider/-/round-slider-0.5.0.tgz#e2307bcc50aa69a67f6dcb575d0c9ea9e42024e4"
+  integrity sha512-ygHbL7ygDA9KCjWeJLgPX/bQajaL+BAz7MTQsQiePy55yEPFB/uv2yNsjesw9Gg8zNh7HQbbvvySe0C85veHkA==
   dependencies:
     lit-element "^2.2.1"
 

From fb929a089c29f44d94eb952645ea2b5c4a8df284 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Fri, 22 May 2020 22:24:37 +0200
Subject: [PATCH 25/25] Fix aria label icon name (#5992)

---
 src/components/ha-icon-button.ts | 2 +-
 src/panels/lovelace/hui-root.ts  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ha-icon-button.ts b/src/components/ha-icon-button.ts
index ba8e55a143..311e4fb368 100644
--- a/src/components/ha-icon-button.ts
+++ b/src/components/ha-icon-button.ts
@@ -25,7 +25,7 @@ export class HaIconButton extends LitElement {
   protected render(): TemplateResult {
     return html`
       <mwc-icon-button
-        .label=${this.label || this.icon}
+        .label=${this.label}
         ?disabled=${this.disabled}
         @click=${this._handleClick}
       >
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index e25f870708..289100b08c 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -183,7 +183,7 @@ class HUIRoot extends LitElement {
                   ${this._conversation(this.hass.config.components)
                     ? html`
                         <ha-icon-button
-                          aria-label="Start conversation"
+                          label="Start conversation"
                           icon="hass:microphone"
                           @click=${this._showVoiceCommandDialog}
                         ></ha-icon-button>