From 03e581870af22e065607d5983e4ada642f15fade Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Tue, 28 Apr 2020 23:11:01 +0200
Subject: [PATCH 1/9] Bumped version to 20200427.1

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

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

From 00e7b930119ffd9474af5d3f4d331cfede9ec5ca Mon Sep 17 00:00:00 2001
From: Erik Montnemery <erik@montnemery.com>
Date: Tue, 28 Apr 2020 23:09:20 +0200
Subject: [PATCH 2/9] Improve styling of MQTT debug info (#5626)

---
 src/data/mqtt.ts                              |   1 +
 .../dialog-mqtt-device-debug-info.ts          |  44 +++++---
 .../mqtt-discovery-payload.ts                 |  61 ++++++++--
 .../mqtt-messages.ts                          | 104 ++++++++++++++----
 4 files changed, 165 insertions(+), 45 deletions(-)

diff --git a/src/data/mqtt.ts b/src/data/mqtt.ts
index d00f9f2415..ff3a960752 100644
--- a/src/data/mqtt.ts
+++ b/src/data/mqtt.ts
@@ -5,6 +5,7 @@ export interface MQTTMessage {
   payload: string;
   qos: number;
   retain: number;
+  time: string;
 }
 
 export interface MQTTTopicDebugInfo {
diff --git a/src/dialogs/mqtt-device-debug-info-dialog/dialog-mqtt-device-debug-info.ts b/src/dialogs/mqtt-device-debug-info-dialog/dialog-mqtt-device-debug-info.ts
index a825d12396..4eb09e5382 100644
--- a/src/dialogs/mqtt-device-debug-info-dialog/dialog-mqtt-device-debug-info.ts
+++ b/src/dialogs/mqtt-device-debug-info-dialog/dialog-mqtt-device-debug-info.ts
@@ -80,7 +80,7 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
         <h4>
           ${this.hass!.localize("ui.dialogs.mqtt_device_debug_info.entities")}
         </h4>
-        <ul>
+        <ul class="entitylist">
           ${this._debugInfo.entities.length
             ? this._renderEntities()
             : html`
@@ -92,7 +92,7 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
         <h4>
           ${this.hass!.localize("ui.dialogs.mqtt_device_debug_info.triggers")}
         </h4>
-        <ul>
+        <ul class="triggerlist">
           ${this._debugInfo.triggers.length
             ? this._renderTriggers()
             : html`
@@ -125,11 +125,11 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
     return html`
       ${this._debugInfo!.entities.map(
         (entity) => html`
-          <li>
+          <li class="entitylistitem">
             '${computeStateName(this.hass.states[entity.entity_id])}'
             (<code>${entity.entity_id}</code>)
             <br />MQTT discovery data:
-            <ul>
+            <ul class="discoverydata">
               <li>
                 Topic:
                 <code>${entity.discovery_data.topic}</code>
@@ -177,16 +177,23 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
     return html`
       ${this._debugInfo!.triggers.map(
         (trigger) => html`
-          <li>
-            Discovery topic:
-            <code>${trigger.discovery_data.topic}</code>
-            <mqtt-discovery-payload
-              .hass=${this.hass}
-              .payload=${trigger.discovery_data.payload}
-              .showAsYaml=${this._showAsYaml}
-              .summary="Discovery payload"
-            >
+          <li class="triggerlistitem">
+            MQTT discovery data:
+            <ul class="discoverydata">
+            <li>
+              Topic:
+              <code>${trigger.discovery_data.topic}</code>
+            </li>
+            <li>
+              <mqtt-discovery-payload
+                .hass=${this.hass}
+                .payload=${trigger.discovery_data.payload}
+                .showAsYaml=${this._showAsYaml}
+                .summary=${"Payload"}
+              >
+            </li>
             </mqtt-discovery-payload>
+            </ul>
           </li>
         `
       )}
@@ -204,6 +211,17 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
         ha-switch {
           margin: 16px;
         }
+        .discoverydata {
+          list-style-type: none;
+          margin: 4px;
+          padding-left: 16px;
+        }
+        .entitylistitem {
+          margin-bottom: 12px;
+        }
+        .triggerlistitem {
+          margin-bottom: 12px;
+        }
       `,
     ];
   }
diff --git a/src/dialogs/mqtt-device-debug-info-dialog/mqtt-discovery-payload.ts b/src/dialogs/mqtt-device-debug-info-dialog/mqtt-discovery-payload.ts
index 04fc6f0a5c..d132879149 100644
--- a/src/dialogs/mqtt-device-debug-info-dialog/mqtt-discovery-payload.ts
+++ b/src/dialogs/mqtt-device-debug-info-dialog/mqtt-discovery-payload.ts
@@ -1,11 +1,14 @@
 import { safeDump } from "js-yaml";
 import {
+  css,
+  CSSResult,
   customElement,
   html,
   LitElement,
   property,
   TemplateResult,
 } from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
 
 @customElement("mqtt-discovery-payload")
 class MQTTDiscoveryPayload extends LitElement {
@@ -19,12 +22,17 @@ class MQTTDiscoveryPayload extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <details @toggle=${this._handleToggle}>
-        <summary>
-          ${this.summary}
-        </summary>
-        ${this._open ? this._renderPayload() : ""}
-      </details>
+      <div
+        class="expander ${classMap({ open: this._open })}"
+        @click=${this._handleToggle}
+      >
+        ${this.summary}
+      </div>
+      ${this._open
+        ? html` <div class="payload">
+            ${this._renderPayload()}
+          </div>`
+        : ""}
     `;
   }
 
@@ -37,8 +45,45 @@ class MQTTDiscoveryPayload extends LitElement {
     `;
   }
 
-  private _handleToggle(ev) {
-    this._open = ev.target.open;
+  private _handleToggle() {
+    this._open = !this._open;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      .expander {
+        cursor: pointer;
+        position: relative;
+        padding: 8px;
+        padding-left: 29px;
+        border: 1px solid var(--divider-color);
+      }
+      .expander:before {
+        content: "";
+        position: absolute;
+        border-right: 2px solid var(--primary-text-color);
+        border-bottom: 2px solid var(--primary-text-color);
+        width: 5px;
+        height: 5px;
+        top: 50%;
+        left: 12px;
+        transform: translateY(-50%) rotate(-45deg);
+      }
+      .expander.open:before {
+        transform: translateY(-50%) rotate(45deg);
+      }
+      .payload {
+        border: 1px solid var(--divider-color);
+        border-top: 0;
+        padding-left: 16px;
+      }
+      pre {
+        display: inline-block;
+        font-size: 0.9em;
+        padding-left: 4px;
+        padding-right: 4px;
+      }
+    `;
   }
 }
 
diff --git a/src/dialogs/mqtt-device-debug-info-dialog/mqtt-messages.ts b/src/dialogs/mqtt-device-debug-info-dialog/mqtt-messages.ts
index 401eb86141..661d6c0eaa 100644
--- a/src/dialogs/mqtt-device-debug-info-dialog/mqtt-messages.ts
+++ b/src/dialogs/mqtt-device-debug-info-dialog/mqtt-messages.ts
@@ -1,15 +1,22 @@
 import { safeDump } from "js-yaml";
 import {
+  css,
+  CSSResult,
   customElement,
   html,
   LitElement,
   property,
   TemplateResult,
 } from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
+import { formatTimeWithSeconds } from "../../common/datetime/format_time";
+import { HomeAssistant } from "../../types";
 import { MQTTMessage } from "../../data/mqtt";
 
 @customElement("mqtt-messages")
 class MQTTMessages extends LitElement {
+  public hass!: HomeAssistant;
+
   @property() public messages!: MQTTMessage[];
 
   @property() public showAsYaml = false;
@@ -37,24 +44,32 @@ class MQTTMessages extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <details @toggle=${this._handleToggle}>
-        <summary>
-          ${this.summary}
-        </summary>
-        ${this._open
-          ? html`
-              <ul>
-                ${this.messages.map(
-                  (message) => html`
-                    <li>
-                      ${this._renderSingleMessage(message)}
-                    </li>
-                  `
-                )}
-              </ul>
-            `
-          : ""}
-      </details>
+      <div
+        class="expander ${classMap({ open: this._open })}"
+        @click=${this._handleToggle}
+      >
+        ${this.summary}
+      </div>
+      ${this._open
+        ? html`
+            <ul class="message-list">
+              ${this.messages.map(
+                (message) => html`
+                  <li class="message">
+                    <div class="time">
+                      Received
+                      ${formatTimeWithSeconds(
+                        new Date(message.time),
+                        this.hass.language
+                      )}
+                    </div>
+                    ${this._renderSingleMessage(message)}
+                  </li>
+                `
+              )}
+            </ul>
+          `
+        : ""}
     `;
   }
 
@@ -62,10 +77,8 @@ class MQTTMessages extends LitElement {
     const topic = message.topic;
     return this._showTopic
       ? html`
-          <ul>
-            <li>
-              Topic: ${topic}
-            </li>
+          <ul class="message-with-topic">
+            <li>Topic: <code>${topic}</code></li>
             <li>
               Payload: ${this._renderSinglePayload(message)}
             </li>
@@ -118,8 +131,51 @@ class MQTTMessages extends LitElement {
     return jsonPayload;
   }
 
-  private _handleToggle(ev) {
-    this._open = ev.target.open;
+  private _handleToggle() {
+    this._open = !this._open;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      .expander {
+        cursor: pointer;
+        position: relative;
+        padding: 8px;
+        padding-left: 29px;
+        border: 1px solid var(--divider-color);
+      }
+      .expander:before {
+        content: "";
+        position: absolute;
+        border-right: 2px solid var(--primary-text-color);
+        border-bottom: 2px solid var(--primary-text-color);
+        width: 5px;
+        height: 5px;
+        top: 50%;
+        left: 12px;
+        transform: translateY(-50%) rotate(-45deg);
+      }
+      .expander.open:before {
+        transform: translateY(-50%) rotate(45deg);
+      }
+      .message {
+        font-size: 0.9em;
+        margin-bottom: 12px;
+      }
+      .message-list {
+        border: 1px solid var(--divider-color);
+        border-top: 0;
+        padding-left: 28px;
+        margin: 0;
+      }
+      pre {
+        display: inline-block;
+        font-size: 0.9em;
+        margin: 0;
+        padding-left: 4px;
+        padding-right: 4px;
+      }
+    `;
   }
 }
 

From 869ec113f4e099026e08ac45d4e2fef5ad58d964 Mon Sep 17 00:00:00 2001
From: Sean Mooney <sean.mooney@gmail.com>
Date: Tue, 28 Apr 2020 04:03:54 -0400
Subject: [PATCH 3/9] Updated repo links on Dev Tools Info panel (#5644)

These were still using the old names of the repos.

home-assistant is now "core" and home-assistant-polymer is now "frontend".
---
 src/panels/developer-tools/info/developer-tools-info.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/panels/developer-tools/info/developer-tools-info.ts b/src/panels/developer-tools/info/developer-tools-info.ts
index 4bebb76103..ba5fc85dd3 100644
--- a/src/panels/developer-tools/info/developer-tools-info.ts
+++ b/src/panels/developer-tools/info/developer-tools-info.ts
@@ -59,7 +59,7 @@ class HaPanelDevInfo extends LitElement {
           )}<br />
           ${this.hass.localize("ui.panel.developer-tools.tabs.info.source")}
           <a
-            href="https://github.com/home-assistant/home-assistant"
+            href="https://github.com/home-assistant/core"
             target="_blank" rel="noreferrer"
             >${this.hass.localize(
               "ui.panel.developer-tools.tabs.info.server"
@@ -67,7 +67,7 @@ class HaPanelDevInfo extends LitElement {
           >
           &mdash;
           <a
-            href="https://github.com/home-assistant/home-assistant-polymer"
+            href="https://github.com/home-assistant/frontend"
             target="_blank" rel="noreferrer"
             >${this.hass.localize(
               "ui.panel.developer-tools.tabs.info.frontend"

From 117e4e468f6015288db4e89667d16f086df6c035 Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Mon, 27 Apr 2020 14:43:23 -0400
Subject: [PATCH 4/9] Weather Card: Switch Importance of Name and State (#5624)

* Improvements to the name and state importance

* Bram Suggestions
---
 src/data/weather.ts                           |   4 +-
 .../cards/hui-weather-forecast-card.ts        | 234 +++++++++---------
 2 files changed, 125 insertions(+), 113 deletions(-)

diff --git a/src/data/weather.ts b/src/data/weather.ts
index 45b6423e37..5eb946cc2e 100644
--- a/src/data/weather.ts
+++ b/src/data/weather.ts
@@ -150,7 +150,7 @@ const getWeatherExtrema = (
     ${
       tempHigh
         ? `
-            ${hass!.localize(`ui.card.weather.high`)} ${tempHigh} ${unit}
+            ${tempHigh} ${unit}
           `
         : ""
     }
@@ -158,7 +158,7 @@ const getWeatherExtrema = (
     ${
       tempLow
         ? `
-          ${hass!.localize(`ui.card.weather.low`)} ${tempLow} ${unit}
+          ${tempLow} ${unit}
         `
         : ""
     }
diff --git a/src/panels/lovelace/cards/hui-weather-forecast-card.ts b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
index de40b4af6a..060139f125 100644
--- a/src/panels/lovelace/cards/hui-weather-forecast-card.ts
+++ b/src/panels/lovelace/cards/hui-weather-forecast-card.ts
@@ -165,7 +165,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
         tabindex="0"
       >
         <div class="content">
-          <div class="icon-info">
+          <div class="icon-image">
             ${stateObj.state in weatherImages
               ? html`
                   <img
@@ -179,7 +179,9 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
                     .icon=${weatherIcons[stateObj.state] || stateIcon(stateObj)}
                   ></ha-icon>
                 `}
-            <div class="info">
+          </div>
+          <div class="info">
+            <div class="name-state">
               <div class="name">
                 ${this._config.name || computeStateName(stateObj)}
               </div>
@@ -191,15 +193,15 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
                 )}
               </div>
             </div>
-          </div>
-          <div class="temp-attribute">
-            <div class="temp">
-              ${stateObj.attributes.temperature}<span
-                >${getWeatherUnit(this.hass, "temperature")}</span
-              >
-            </div>
-            <div class="attribute">
-              ${getSecondaryWeatherAttribute(this.hass, stateObj)}
+            <div class="temp-attribute">
+              <div class="temp">
+                ${stateObj.attributes.temperature}<span
+                  >${getWeatherUnit(this.hass, "temperature")}</span
+                >
+              </div>
+              <div class="attribute">
+                ${getSecondaryWeatherAttribute(this.hass, stateObj)}
+              </div>
             </div>
           </div>
         </div>
@@ -312,7 +314,7 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
     } else {
       this.removeAttribute("verynarrow");
     }
-    if (this.offsetWidth < 200) {
+    if (this.offsetWidth < 225) {
       this.setAttribute("veryverynarrow", "");
     } else {
       this.removeAttribute("veryverynarrow");
@@ -337,61 +339,72 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
         align-items: center;
       }
 
-      .icon-info {
+      .icon-image {
         display: flex;
         align-items: center;
-        min-width: 0;
-        flex: 1;
+        min-width: 64px;
+        margin-right: 16px;
       }
 
       .weather-image,
       .weather-icon {
-        flex: 0 0 66px;
-        margin-right: 16px;
+        flex: 0 0 64px;
       }
 
       .weather-icon {
-        --iron-icon-width: 66px;
-        --iron-icon-height: 66px;
+        --iron-icon-width: 64px;
+        --iron-icon-height: 64px;
       }
 
       .info {
+        display: flex;
+        justify-content: space-between;
+        flex-grow: 1;
         overflow: hidden;
       }
 
-      .name {
-        font-size: 16px;
-        color: var(--secondary-text-color);
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .state {
-        font-size: 28px;
-        line-height: 1.2;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
       .temp-attribute {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-end;
+        text-align: right;
       }
 
       .temp-attribute .temp {
         position: relative;
-        font-size: 38px;
-        line-height: 1;
         margin-right: 24px;
       }
 
       .temp-attribute .temp span {
         position: absolute;
         font-size: 24px;
-        top: 4px;
+        top: 1px;
+      }
+
+      .name,
+      .temp-attribute .temp {
+        font-size: 28px;
+        line-height: 1.2;
+      }
+
+      .state,
+      .attribute {
+        font-size: 14px;
+        line-height: 1;
+      }
+
+      .name-state {
+        overflow: hidden;
+        padding-right: 12px;
+        width: 100%;
+      }
+
+      .name,
+      .state {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .attribute {
+        white-space: nowrap;
       }
 
       .forecast {
@@ -427,80 +440,12 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
         --iron-icon-height: 40px;
       }
 
-      .attribute {
-        line-height: 1;
-      }
-
       .attribute,
-      .templow {
+      .templow,
+      .state {
         color: var(--secondary-text-color);
       }
 
-      :host([narrow]) .weather-image {
-        flex: 0 0 58px;
-      }
-
-      :host([narrow]) .weather-icon {
-        --iron-icon-width: 58px;
-        --iron-icon-height: 58px;
-      }
-
-      :host([narrow]) .state {
-        font-size: 22px;
-      }
-
-      :host([narrow]) .temp-attribute .temp {
-        font-size: 44px;
-        margin-right: 18px;
-      }
-
-      :host([narrow]) .temp-attribute .temp span {
-        font-size: 18px;
-        top: 3px;
-      }
-
-      :host([narrow]) .attribute {
-        display: none;
-      }
-
-      :host([narrow]) .forecast {
-        justify-content: space-around;
-      }
-
-      :host([veryVeryNarrow]) .content {
-        flex-wrap: wrap;
-        justify-content: center;
-      }
-
-      :host([veryNarrow]) .icon-info {
-        flex: initial;
-      }
-
-      :host([narrow]) .weather-image {
-        flex: 0 0 48px;
-      }
-
-      :host([narrow]) .weather-icon {
-        --iron-icon-width: 48px;
-        --iron-icon-height: 48px;
-      }
-
-      :host([veryNarrow]) .info {
-        display: none;
-      }
-
-      :host([veryNarrow]) .temp-attribute .temp {
-        font-size: 36px;
-      }
-
-      :host([veryNarrow]) .temp-attribute .temp span {
-        top: 2px;
-      }
-
-      :host([veryVeryNarrow]) .temp-attribute {
-        padding-top: 4px;
-      }
-
       .unavailable {
         height: 100px;
         display: flex;
@@ -510,6 +455,73 @@ class HuiWeatherForecastCard extends LitElement implements LovelaceCard {
         padding: 10px 20px;
         text-align: center;
       }
+
+      /* ============= NARROW ============= */
+
+      :host([narrow]) .icon-image {
+        min-width: 52px;
+      }
+
+      :host([narrow]) .weather-image {
+        flex: 0 0 52px;
+        width: 52px;
+      }
+
+      :host([narrow]) .weather-icon {
+        --iron-icon-width: 52px;
+        --iron-icon-height: 52px;
+      }
+
+      :host([narrow]) .forecast {
+        justify-content: space-around;
+      }
+
+      :host([narrow]) .name,
+      :host([narrow]) .temp-attribute .temp {
+        font-size: 22px;
+      }
+
+      :host([narrow]) .temp-attribute .temp {
+        margin-right: 16px;
+      }
+
+      :host([narrow]) .temp span {
+        top: 1px;
+        font-size: 16px;
+      }
+
+      /* ============= VERY NARROW ============= */
+
+      :host([veryNarrow]) .state,
+      :host([veryNarrow]) .attribute {
+        display: none;
+      }
+
+      :host([veryNarrow]) .info {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      :host([veryNarrow]) .name-state {
+        padding-right: 0;
+      }
+
+      /* ============= VERY VERY NARROW ============= */
+
+      :host([veryVeryNarrow]) .info {
+        padding-top: 4px;
+        align-items: center;
+      }
+
+      :host([veryVeryNarrow]) .content {
+        flex-wrap: wrap;
+        justify-content: center;
+        flex-direction: column;
+      }
+
+      :host([veryVeryNarrow]) .icon-image {
+        margin-right: 0;
+      }
     `;
   }
 }

From 61fdee14c64991ded18714bc38e9623c6e9d6ad4 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Mon, 27 Apr 2020 20:40:30 +0200
Subject: [PATCH 5/9] Fix demo themes (#5643)

---
 demo/src/configs/jimpower/theme.ts      | 2 +-
 demo/src/configs/kernehed/theme.ts      | 2 +-
 demo/src/configs/teachingbirds/theme.ts | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/demo/src/configs/jimpower/theme.ts b/demo/src/configs/jimpower/theme.ts
index 655c6da45d..5d269d38a9 100644
--- a/demo/src/configs/jimpower/theme.ts
+++ b/demo/src/configs/jimpower/theme.ts
@@ -33,7 +33,7 @@ export const demoThemeJimpower = () => ({
   "label-badge-border-color": "green",
   "paper-listbox-color": "var(--primary-color)",
   "paper-slider-disabled-secondary-color": "var(--disabled-text-color)",
-  "paper-card-background-color": "#434954",
+  "card-background-color": "#434954",
   "label-badge-text-color": "var(--primary-text-color)",
   "paper-slider-knob-start-color": "var(--accent-color)",
   "switch-unchecked-track-color": "var(--disabled-text-color)",
diff --git a/demo/src/configs/kernehed/theme.ts b/demo/src/configs/kernehed/theme.ts
index 078dc5ac93..e1cb10e78a 100644
--- a/demo/src/configs/kernehed/theme.ts
+++ b/demo/src/configs/kernehed/theme.ts
@@ -34,7 +34,7 @@ export const demoThemeKernehed = () => ({
   "label-badge-border-color": "green",
   "paper-listbox-color": "#777777",
   "paper-slider-disabled-secondary-color": "var(--disabled-text-color)",
-  "paper-card-background-color": "#292929",
+  "card-background-color": "#292929",
   "label-badge-text-color": "var(--primary-text-color)",
   "paper-slider-knob-start-color": "var(--accent-color)",
   "switch-unchecked-track-color": "var(--disabled-text-color)",
diff --git a/demo/src/configs/teachingbirds/theme.ts b/demo/src/configs/teachingbirds/theme.ts
index 8861bd0663..34687a23f1 100644
--- a/demo/src/configs/teachingbirds/theme.ts
+++ b/demo/src/configs/teachingbirds/theme.ts
@@ -13,7 +13,7 @@ export const demoThemeTeachingbirds = () => ({
   "paper-listbox-color": "#FFFFFF",
   "paper-toggle-button-checked-bar-color": "var(--light-primary-color)",
   "switch-unchecked-track-color": "var(--primary-text-color)",
-  "paper-card-background-color": "#4e4e4e",
+  "card-background-color": "#4e4e4e",
   "label-badge-text-color": "var(--text-primary-color)",
   "primary-background-color": "#303030",
   "sidebar-icon-color": "var(--paper-item-icon-color)",

From 04a2ff7506f296d1882a5f8d47ca37f1c7b5de16 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Sat, 2 May 2020 17:23:00 +0200
Subject: [PATCH 6/9] Don't disable thermostat when state is unknown (#5720)

---
 .../lovelace/cards/hui-thermostat-card.ts     | 33 ++++++++++---------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index af84967fdf..bf2ebc5d8b 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -24,7 +24,7 @@ import {
   compareClimateHvacModes,
   HvacMode,
 } from "../../../data/climate";
-import { UNAVAILABLE_STATES } from "../../../data/entity";
+import { UNAVAILABLE } from "../../../data/entity";
 import { HomeAssistant } from "../../../types";
 import { actionHandler } from "../common/directives/action-handler-directive";
 import { findEntities } from "../common/find-entites";
@@ -125,20 +125,21 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
         ? stateObj.attributes.temperature
         : stateObj.attributes.min_temp;
 
-    const slider = UNAVAILABLE_STATES.includes(stateObj.state)
-      ? html` <round-slider disabled="true"></round-slider> `
-      : html`
-          <round-slider
-            .value=${targetTemp}
-            .low=${stateObj.attributes.target_temp_low}
-            .high=${stateObj.attributes.target_temp_high}
-            .min=${stateObj.attributes.min_temp}
-            .max=${stateObj.attributes.max_temp}
-            .step=${this._stepSize}
-            @value-changing=${this._dragEvent}
-            @value-changed=${this._setTemperature}
-          ></round-slider>
-        `;
+    const slider =
+      stateObj.state === UNAVAILABLE
+        ? html` <round-slider disabled="true"></round-slider> `
+        : html`
+            <round-slider
+              .value=${targetTemp}
+              .low=${stateObj.attributes.target_temp_low}
+              .high=${stateObj.attributes.target_temp_high}
+              .min=${stateObj.attributes.min_temp}
+              .max=${stateObj.attributes.max_temp}
+              .step=${this._stepSize}
+              @value-changing=${this._dragEvent}
+              @value-changed=${this._setTemperature}
+            ></round-slider>
+          `;
 
     const currentTemperature = !isNaN(stateObj.attributes.current_temperature)
       ? svg`
@@ -322,7 +323,7 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
   }
 
   private _getSetTemp(stateObj: HassEntity) {
-    if (UNAVAILABLE_STATES.includes(stateObj.state)) {
+    if (stateObj.state === UNAVAILABLE) {
       return this.hass!.localize("state.default.unavailable");
     }
 

From fa8bd30e83e7d5f2b833a2f69e3b96798e21d19d Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Fri, 1 May 2020 13:18:58 +0200
Subject: [PATCH 7/9] Don't disable controls when state is unknown (#5687)

---
 src/components/entity/ha-entity-toggle.ts |  6 +++---
 src/components/ha-cover-controls.js       | 14 +++++++++++---
 src/components/ha-cover-tilt-controls.js  | 14 +++++++++++---
 3 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/components/entity/ha-entity-toggle.ts b/src/components/entity/ha-entity-toggle.ts
index 67549ca090..13c269a114 100644
--- a/src/components/entity/ha-entity-toggle.ts
+++ b/src/components/entity/ha-entity-toggle.ts
@@ -12,7 +12,7 @@ import {
 import { STATES_OFF } from "../../common/const";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
-import { UNAVAILABLE_STATES } from "../../data/entity";
+import { UNAVAILABLE_STATES, UNAVAILABLE } from "../../data/entity";
 import { forwardHaptic } from "../../data/haptics";
 import { HomeAssistant } from "../../types";
 import "../ha-switch";
@@ -40,14 +40,14 @@ class HaEntityToggle extends LitElement {
         <paper-icon-button
           aria-label=${`Turn ${computeStateName(this.stateObj)} off`}
           icon="hass:flash-off"
-          .disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
+          .disabled=${this.stateObj.state === UNAVAILABLE}
           @click=${this._turnOff}
           ?state-active=${!this._isOn}
         ></paper-icon-button>
         <paper-icon-button
           aria-label=${`Turn ${computeStateName(this.stateObj)} on`}
           icon="hass:flash"
-          .disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
+          .disabled=${this.stateObj.state === UNAVAILABLE}
           @click=${this._turnOn}
           ?state-active=${this._isOn}
         ></paper-icon-button>
diff --git a/src/components/ha-cover-controls.js b/src/components/ha-cover-controls.js
index 0e7eb841e8..2768484d3b 100644
--- a/src/components/ha-cover-controls.js
+++ b/src/components/ha-cover-controls.js
@@ -2,7 +2,7 @@ import "@polymer/paper-icon-button/paper-icon-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { UNAVAILABLE_STATES } from "../data/entity";
+import { UNAVAILABLE } from "../data/entity";
 import CoverEntity from "../util/cover-model";
 
 class HaCoverControls extends PolymerElement {
@@ -30,6 +30,7 @@ class HaCoverControls extends PolymerElement {
           icon="hass:stop"
           on-click="onStopTap"
           invisible$="[[!entityObj.supportsStop]]"
+          disabled="[[computStopDisabled(stateObj)]]"
         ></paper-icon-button>
         <paper-icon-button
           aria-label="Close cover"
@@ -81,8 +82,15 @@ class HaCoverControls extends PolymerElement {
     }
   }
 
+  computeStopDisabled(stateObj) {
+    if (stateObj.state === UNAVAILABLE) {
+      return true;
+    }
+    return false;
+  }
+
   computeOpenDisabled(stateObj, entityObj) {
-    if (UNAVAILABLE_STATES.includes(stateObj.state)) {
+    if (stateObj.state === UNAVAILABLE) {
       return true;
     }
     var assumedState = stateObj.attributes.assumed_state === true;
@@ -90,7 +98,7 @@ class HaCoverControls extends PolymerElement {
   }
 
   computeClosedDisabled(stateObj, entityObj) {
-    if (UNAVAILABLE_STATES.includes(stateObj.state)) {
+    if (stateObj.state === UNAVAILABLE) {
       return true;
     }
     var assumedState = stateObj.attributes.assumed_state === true;
diff --git a/src/components/ha-cover-tilt-controls.js b/src/components/ha-cover-tilt-controls.js
index 399915c75a..b3328963ce 100644
--- a/src/components/ha-cover-tilt-controls.js
+++ b/src/components/ha-cover-tilt-controls.js
@@ -3,7 +3,7 @@ import "@polymer/paper-icon-button/paper-icon-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { UNAVAILABLE_STATES } from "../data/entity";
+import { UNAVAILABLE } from "../data/entity";
 import CoverEntity from "../util/cover-model";
 
 class HaCoverTiltControls extends PolymerElement {
@@ -31,6 +31,7 @@ class HaCoverTiltControls extends PolymerElement {
         icon="hass:stop"
         on-click="onStopTiltTap"
         invisible$="[[!entityObj.supportsStopTilt]]"
+        disabled="[[computStopDisabled(stateObj)]]"
         title="Stop tilt"
       ></paper-icon-button>
       <paper-icon-button
@@ -63,8 +64,15 @@ class HaCoverTiltControls extends PolymerElement {
     return new CoverEntity(hass, stateObj);
   }
 
+  computeStopDisabled(stateObj) {
+    if (stateObj.state === UNAVAILABLE) {
+      return true;
+    }
+    return false;
+  }
+
   computeOpenDisabled(stateObj, entityObj) {
-    if (UNAVAILABLE_STATES.includes(stateObj.state)) {
+    if (stateObj.state === UNAVAILABLE) {
       return true;
     }
     var assumedState = stateObj.attributes.assumed_state === true;
@@ -72,7 +80,7 @@ class HaCoverTiltControls extends PolymerElement {
   }
 
   computeClosedDisabled(stateObj, entityObj) {
-    if (UNAVAILABLE_STATES.includes(stateObj.state)) {
+    if (stateObj.state === UNAVAILABLE) {
       return true;
     }
     var assumedState = stateObj.attributes.assumed_state === true;

From e11ef55dd8a29dd63e040acd853a811559162902 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Sat, 2 May 2020 17:25:52 +0200
Subject: [PATCH 8/9] Update nb.json

---
 translations/frontend/nb.json | 2 --
 1 file changed, 2 deletions(-)

diff --git a/translations/frontend/nb.json b/translations/frontend/nb.json
index 3c7cc12756..64bc6ff00e 100644
--- a/translations/frontend/nb.json
+++ b/translations/frontend/nb.json
@@ -1344,8 +1344,6 @@
                         "delete_button": "Slett {integration}",
                         "delete_confirm": "Er du sikker på at du vil slette denne integrasjonen?",
                         "device_unavailable": "enheten er utilgjengelig",
-                        "devices": "{antall} {antall, flertall,\n  én {enhet}\n  andre {enheter}\n}",
-                        "entities": "{antall} {antall, flertall,\n  én {enhet}\n  andre {enheter}\n}",
                         "entity_unavailable": "entiteten er ikke tilgjengelig",
                         "firmware": "Fastvare: {version}",
                         "hub": "Tilkoblet via",

From f067bcd87784dc8f89d8fffa115439b2716a82e6 Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Sat, 2 May 2020 17:28:45 +0200
Subject: [PATCH 9/9] Bumped version to 20200427.2

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

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