Arrayify actions list

Allow multiple tap/hold/doubletap actions.
Bump material elements (#8093 )
2026-08-28 01:47:26 +00:00 · 2021-01-27 10:43:58 +01:00 · 2021-01-10 19:29:29 +01:00 · 2021-01-07 10:09:03 +01:00 · 2021-01-06 20:46:39 +01:00 · 2021-01-06 10:37:53 +01:00
223 changed files with 11896 additions and 3929 deletions
@@ -74,12 +74,12 @@ DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed w

 ```

-## Problem-relevant configuration
+## Problem-relevant frontend configuration

 <!--
-  An example configuration that caused the problem for you. Fill this out even
-  if it seems unimportant to you. Please be sure to remove personal information
-  like passwords, private URLs and other credentials.
+  An example configuration that caused the problem for you, e.g. the YAML configuration 
+  of the used cards. Fill this out even if it seems unimportant to you. Please be sure 
+  to remove personal information like passwords, private URLs and other credentials.
 -->

 ```yaml
@@ -89,7 +89,7 @@ DO NOT DELETE ANY TEXT from this template! Otherwise, your issue may be closed w
 ## Javascript errors shown in your browser console/inspector

 <!--
-  If you come across any javascript or other error logs, e.g., in your browser
+  If you come across any Javascript or other error logs, e.g. in your browser
  console/inspector please provide them.
 -->

@@ -14,7 +14,7 @@ This is the repository for the official [Home Assistant](https://home-assistant.
 - Development: [Instructions](https://developers.home-assistant.io/docs/frontend/development/)
 - Production build: `script/build_frontend`
 - Gallery: `cd gallery && script/develop_gallery`
- Hass.io: [Instructions](https://developers.home-assistant.io/docs/en/hassio_hass.html)
+- Supervisor: [Instructions](https://developers.home-assistant.io/docs/supervisor/developing)

 ## Frontend development

@@ -36,6 +36,7 @@ const createWebpackConfig = ({
  const ignorePackages = bundle.ignorePackages({ latestBuild });
  return {
    mode: isProdBuild ? "production" : "development",
+    target: ["web", latestBuild ? "es2017" : "es5"],
    devtool: isProdBuild
      ? "cheap-module-source-map"
      : "eval-cheap-module-source-map",
@@ -131,22 +132,6 @@ const createWebpackConfig = ({
        }
        return `${chunk.name}.${chunk.hash.substr(0, 8)}.js`;
      },
-      environment: {
-        // The environment supports arrow functions ('() => { ... }').
-        arrowFunction: latestBuild,
-        // The environment supports BigInt as literal (123n).
-        bigIntLiteral: false,
-        // The environment supports const and let for variable declarations.
-        const: latestBuild,
-        // The environment supports destructuring ('{ a, b } = obj').
-        destructuring: latestBuild,
-        // The environment supports an async import() function to import EcmaScript modules.
-        dynamicImport: latestBuild,
-        // The environment supports 'for of' iteration ('for (const x of array) { ... }').
-        forOf: latestBuild,
-        // The environment supports ECMAScript Module syntax to import ECMAScript modules (import ... from '...').
-        module: latestBuild,
-      },
      chunkFilename:
        isProdBuild && !isStatsBuild
          ? "chunk.[chunkhash].js"
@@ -9,30 +9,29 @@ class DemoMoreInfo extends PolymerElement {
  static get template() {
    return html`
      <style>
-        :host {
+        .root {
          display: flex;
-          align-items: start;
        }
-
+        #card {
+          max-width: 400px;
+          width: 100vw;
+        }
        ha-card {
-          width: 333px;
+          width: 352px;
          padding: 20px 24px;
        }
-
        state-card-content {
          display: block;
          margin-bottom: 16px;
        }
-
        pre {
          width: 400px;
          margin: 0 16px;
          overflow: auto;
          color: var(--primary-text-color);
        }
-
        @media only screen and (max-width: 800px) {
-          :host {
+          .root {
            flex-direction: column;
          }
          pre {
@@ -40,21 +39,25 @@ class DemoMoreInfo extends PolymerElement {
          }
        }
      </style>
-      <ha-card>
-        <state-card-content
-          state-obj="[[_stateObj]]"
-          hass="[[hass]]"
-          in-dialog
-        ></state-card-content>
+      <div class="root">
+        <div id="card">
+          <ha-card>
+            <state-card-content
+              state-obj="[[_stateObj]]"
+              hass="[[hass]]"
+              in-dialog
+            ></state-card-content>

-        <more-info-content
-          hass="[[hass]]"
-          state-obj="[[_stateObj]]"
-        ></more-info-content>
-      </ha-card>
-      <template is="dom-if" if="[[showConfig]]">
-        <pre>[[_jsonEntity(_stateObj)]]</pre>
-      </template>
+            <more-info-content
+              hass="[[hass]]"
+              state-obj="[[_stateObj]]"
+            ></more-info-content>
+          </ha-card>
+        </div>
+        <template is="dom-if" if="[[showConfig]]">
+          <pre>[[_jsonEntity(_stateObj)]]</pre>
+        </template>
+      </div>
    `;
  }

@@ -3,12 +3,18 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../src/components/ha-switch";
+import "../../../src/components/ha-formfield";
 import "./demo-more-info";
+import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";

 class DemoMoreInfos extends PolymerElement {
  static get template() {
    return html`
      <style>
+        #container {
+          min-height: calc(100vh - 128px);
+          background: var(--primary-background-color);
+        }
        .cards {
          display: flex;
          flex-wrap: wrap;
@@ -23,20 +29,31 @@ class DemoMoreInfos extends PolymerElement {
        .filters {
          margin-left: 60px;
        }
+        ha-formfield {
+          margin-right: 16px;
+        }
      </style>
      <app-toolbar>
        <div class="filters">
-          <ha-switch checked="{{_showConfig}}">Show entity</ha-switch>
+          <ha-formfield label="Show entities">
+            <ha-switch checked="[[_showConfig]]" on-change="_showConfigToggled">
+            </ha-switch>
+          </ha-formfield>
+          <ha-formfield label="Dark theme">
+            <ha-switch on-change="_darkThemeToggled"> </ha-switch>
+          </ha-formfield>
        </div>
      </app-toolbar>
-      <div class="cards">
-        <template is="dom-repeat" items="[[entities]]">
-          <demo-more-info
-            entity-id="[[item]]"
-            show-config="[[_showConfig]]"
-            hass="[[hass]]"
-          ></demo-more-info>
-        </template>
+      <div id="container">
+        <div class="cards">
+          <template is="dom-repeat" items="[[entities]]">
+            <demo-more-info
+              entity-id="[[item]]"
+              show-config="[[_showConfig]]"
+              hass="[[hass]]"
+            ></demo-more-info>
+          </template>
+        </div>
      </div>
    `;
  }
@@ -51,6 +68,16 @@ class DemoMoreInfos extends PolymerElement {
      },
    };
  }
+
+  _showConfigToggled(ev) {
+    this._showConfig = ev.target.checked;
+  }
+
+  _darkThemeToggled(ev) {
+    applyThemesOnElement(this.$.container, { themes: {} }, "default", {
+      dark: ev.target.checked,
+    });
+  }
 }

 customElements.define("demo-more-infos", DemoMoreInfos);
@@ -7,8 +7,8 @@ export const createMediaPlayerEntities = () => [
    media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
    media_artist: "Technohead",
    // Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media +
-    // Select Source + Stop + Clear + Play + Shuffle Set + Browse Media
-    supported_features: 195135,
+    // Select Source + Stop + Clear + Play + Shuffle Set
+    supported_features: 64063,
    entity_picture: "/images/album_cover_2.jpg",
    media_duration: 300,
    media_position: 50,
@@ -24,8 +24,8 @@ export const createMediaPlayerEntities = () => [
    media_title: "I Wanna Be A Hippy (Flamman & Abraxas Radio Mix)",
    media_artist: "Technohead",
    // Pause + Seek + Volume Set + Volume Mute + Previous Track + Next Track + Play Media +
-    // Select Source + Stop + Clear + Play + Shuffle Set
-    supported_features: 64063,
+    // Select Source + Stop + Clear + Play + Shuffle Set + Browse Media
+    supported_features: 195135,
    entity_picture: "/images/album_cover.jpg",
    media_duration: 300,
    media_position: 0,
@@ -0,0 +1,72 @@
+import { getEntity } from "../../../src/fake_data/entity";
+
+export const createPlantEntities = () => [
+  getEntity("plant", "lemon_tree", "ok", {
+    problem: "none",
+    sensors: {
+      moisture: "sensor.lemon_tree_moisture",
+      battery: "sensor.lemon_tree_battery",
+      temperature: "sensor.lemon_tree_temperature",
+      conductivity: "sensor.lemon_tree_conductivity",
+      brightness: "sensor.lemon_tree_brightness",
+    },
+    unit_of_measurement_dict: {
+      temperature: "°C",
+      moisture: "%",
+      brightness: "lx",
+      battery: "%",
+      conductivity: "μS/cm",
+    },
+    moisture: 54,
+    battery: 95,
+    temperature: 15.6,
+    conductivity: 1,
+    brightness: 12,
+    max_brightness: 20,
+    friendly_name: "Lemon Tree",
+  }),
+  getEntity("plant", "apple_tree", "ok", {
+    problem: "brightness",
+    sensors: {
+      moisture: "sensor.apple_tree_moisture",
+      battery: "sensor.apple_tree_battery",
+      temperature: "sensor.apple_tree_temperature",
+      conductivity: "sensor.apple_tree_conductivity",
+      brightness: "sensor.apple_tree_brightness",
+    },
+    unit_of_measurement_dict: {
+      temperature: "°C",
+      moisture: "%",
+      brightness: "lx",
+      battery: "%",
+      conductivity: "μS/cm",
+    },
+    moisture: 54,
+    battery: 2,
+    temperature: 15.6,
+    conductivity: 1,
+    brightness: 25,
+    max_brightness: 20,
+    friendly_name: "Apple Tree",
+  }),
+  getEntity("plant", "sunflowers", "ok", {
+    problem: "moisture, temperature, conductivity",
+    sensors: {
+      moisture: "sensor.sunflowers_moisture",
+      temperature: "sensor.sunflowers_temperature",
+      conductivity: "sensor.sunflowers_conductivity",
+      brightness: "sensor.sunflowers_brightness",
+    },
+    unit_of_measurement_dict: {
+      temperature: "°C",
+      moisture: "%",
+      brightness: "lx",
+      conductivity: "μS/cm",
+    },
+    moisture: 54,
+    temperature: 15.6,
+    conductivity: 1,
+    brightness: 25,
+    entity_picture: "/images/sunflowers.jpg",
+  }),
+];
@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  html,
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -71,28 +76,19 @@ const CONFIGS = [
  },
 ];

-class DemoAlarmPanelEntity extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-alarm-panel-card")
+class DemoAlarmPanelEntity extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
  }

-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    this._setupDemo();
-  }
-
-  private async _setupDemo() {
-    const hass = provideHass(this.$.demos);
-    await hass.updateTranslations(null, "en");
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
  }
 }
@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  html,
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -53,24 +58,19 @@ const CONFIGS = [
  },
 ];

-class DemoConditional extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-conditional-card")
+class DemoConditional extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
  }

-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
  }
 }
@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  html,
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -217,24 +222,19 @@ const CONFIGS = [
  },
 ];

-class DemoEntities extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-entities-card")
+class DemoEntities extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
  }

-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
  }
 }
@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  html,
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -69,24 +74,19 @@ const CONFIGS = [
  },
 ];

-class DemoButtonEntity extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-entity-button-card")
+class DemoButtonEntity extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
  }

-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
  }
 }
@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  html,
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -89,26 +94,21 @@ const CONFIGS = [
  },
 ];

-class DemoFilter extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-entity-filter-card")
+class DemoEntityFilter extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
  }

-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
  }
 }

-customElements.define("demo-hui-entity-filter-card", DemoFilter);
+customElements.define("demo-hui-entity-filter-card", DemoEntityFilter);
@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  html,
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -107,24 +112,19 @@ const CONFIGS = [
  },
 ];

-class DemoGaugeEntity extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-gauge-card")
+class DemoGaugeEntity extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
  }

-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
  }
 }
@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  html,
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -218,26 +223,21 @@ const CONFIGS = [
  },
 ];

-class DemoPicEntity extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-glance-card")
+class DemoGlanceEntity extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
  }

-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
  }
 }

-customElements.define("demo-hui-glance-card", DemoPicEntity);
+customElements.define("demo-hui-glance-card", DemoGlanceEntity);
@@ -1,6 +1,4 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import { html, LitElement, customElement, TemplateResult } from "lit-element";
 import "../components/demo-cards";

 const CONFIGS = [
@@ -37,18 +35,10 @@ const CONFIGS = [
  },
 ];

-class DemoIframe extends PolymerElement {
-  static get template() {
-    return html` <demo-cards configs="[[_configs]]"></demo-cards> `;
-  }
-
-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
+@customElement("demo-hui-iframe-card")
+class DemoIframe extends LitElement {
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
  }
 }

@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  html,
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -63,24 +68,19 @@ const CONFIGS = [
  },
 ];

-class DemoLightEntity extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-light-card")
+class DemoLightEntity extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
  }

-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
  }
 }
@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  html,
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -161,24 +166,19 @@ const CONFIGS = [
  },
 ];

-class DemoMap extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-map-card")
+class DemoMap extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
  }

-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
  }
 }
@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  html,
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { mockTemplate } from "../../../demo/src/stubs/template";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -254,23 +259,19 @@ const CONFIGS = [
  },
 ];

-class DemoMarkdown extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-markdown-card")
+class DemoMarkdown extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
  }

-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
    mockTemplate(hass);
  }
 }
@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  html,
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 import { createMediaPlayerEntities } from "../data/media_players";
@@ -146,28 +151,33 @@ const CONFIGS = [
    entity: media_player.receiver_off
    `,
  },
+  {
+    heading: "Grid Full Size",
+    config: `
+  - type: grid
+    columns: 1
+    cards:
+    - type: media-control
+      entity: media_player.music_paused
+    `,
+  },
 ];

-class DemoHuiMediControlCard extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-media-control-card")
+class DemoHuiMediaControlCard extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
  }

-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
    hass.addEntities(createMediaPlayerEntities());
  }
 }

-customElements.define("demo-hui-media-control-card", DemoHuiMediControlCard);
+customElements.define("demo-hui-media-control-card", DemoHuiMediaControlCard);
@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  html,
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
 import { createMediaPlayerEntities } from "../data/media_players";
@@ -55,26 +60,21 @@ const CONFIGS = [
  },
 ];

-class DemoHuiMediaPlayerRows extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-media-player-row")
+class DemoHuiMediaPlayerRow extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
  }

-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
    hass.addEntities(createMediaPlayerEntities());
  }
 }

-customElements.define("demo-hui-media-player-rows", DemoHuiMediaPlayerRows);
+customElements.define("demo-hui-media-player-row", DemoHuiMediaPlayerRow);
@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  html,
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -125,26 +130,21 @@ const CONFIGS = [
  },
 ];

-class DemoPicElements extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-picture-elements-card")
+class DemoPictureElements extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
  }

-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
  }
 }

-customElements.define("demo-hui-picture-elements-card", DemoPicElements);
+customElements.define("demo-hui-picture-elements-card", DemoPictureElements);
@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  html,
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -80,26 +85,21 @@ const CONFIGS = [
  },
 ];

-class DemoPicEntity extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-picture-entity-card")
+class DemoPictureEntity extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
  }

-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
  }
 }

-customElements.define("demo-hui-picture-entity-card", DemoPicEntity);
+customElements.define("demo-hui-picture-entity-card", DemoPictureEntity);
@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  html,
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -121,26 +126,21 @@ const CONFIGS = [
  },
 ];

-class DemoPicGlance extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-picture-glance-card")
+class DemoPictureGlance extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
  }

-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
  }
 }

-customElements.define("demo-hui-picture-glance-card", DemoPicGlance);
+customElements.define("demo-hui-picture-glance-card", DemoPictureGlance);
@@ -0,0 +1,55 @@
+import {
+  html,
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
+import { provideHass } from "../../../src/fake_data/provide_hass";
+import "../components/demo-cards";
+import { createPlantEntities } from "../data/plants";
+
+const CONFIGS = [
+  {
+    heading: "Basic example",
+    config: `
+- type: plant-status
+  entity: plant.lemon_tree
+    `,
+  },
+  {
+    heading: "Problem (too bright) + low battery",
+    config: `
+- type: plant-status
+  entity: plant.apple_tree
+    `,
+  },
+  {
+    heading: "With picture + multiple problems",
+    config: `
+- type: plant-status
+  entity: plant.sunflowers
+  name: Sunflowers Name Overwrite
+    `,
+  },
+];
+
+@customElement("demo-hui-plant-card")
+export class DemoPlantEntity extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
+  }
+
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
+    hass.addEntities(createPlantEntities());
+  }
+}
+
+customElements.define("demo-hui-plant-card", DemoPlantEntity);
@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  html,
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";

@@ -20,24 +25,19 @@ const CONFIGS = [
  },
 ];

-class DemoShoppingListEntity extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-shopping-list-card")
+class DemoShoppingListEntity extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
  }

-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");

    hass.mockAPI("shopping_list", () => [
      { name: "list", id: 1, complete: false },
@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  html,
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { mockHistory } from "../../../demo/src/stubs/history";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
@@ -132,24 +137,19 @@ const CONFIGS = [
  },
 ];

-class DemoStack extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-stack-card")
+class DemoStack extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
  }

-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
    mockHistory(hass);
  }
@@ -1,6 +1,11 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  html,
+  LitElement,
+  customElement,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import { getEntity } from "../../../src/fake_data/entity";
 import { provideHass } from "../../../src/fake_data/provide_hass";
 import "../components/demo-cards";
@@ -74,24 +79,19 @@ const CONFIGS = [
  },
 ];

-class DemoThermostatEntity extends PolymerElement {
-  static get template() {
-    return html` <demo-cards id="demos" configs="[[_configs]]"></demo-cards> `;
+@customElement("demo-hui-thermostat-card")
+class DemoThermostatEntity extends LitElement {
+  @query("#demos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
+    return html`<demo-cards id="demos" .configs=${CONFIGS}></demo-cards>`;
  }

-  static get properties() {
-    return {
-      _configs: {
-        type: Object,
-        value: CONFIGS,
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    const hass = provideHass(this.$.demos);
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
    hass.updateTranslations(null, "en");
+    hass.updateTranslations("lovelace", "en");
    hass.addEntities(ENTITIES);
  }
 }
@@ -1,10 +1,27 @@
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
+import {
+  html,
+  LitElement,
+  customElement,
+  property,
+  PropertyValues,
+  query,
+  TemplateResult,
+} from "lit-element";
 import "../../../src/components/ha-card";
-import { SUPPORT_BRIGHTNESS } from "../../../src/data/light";
+import {
+  SUPPORT_BRIGHTNESS,
+  SUPPORT_COLOR_TEMP,
+  SUPPORT_EFFECT,
+  SUPPORT_FLASH,
+  SUPPORT_COLOR,
+  SUPPORT_TRANSITION,
+  SUPPORT_WHITE_VALUE,
+} from "../../../src/data/light";
 import { getEntity } from "../../../src/fake_data/entity";
-import { provideHass } from "../../../src/fake_data/provide_hass";
+import {
+  provideHass,
+  MockHomeAssistant,
+} from "../../../src/fake_data/provide_hass";
 import "../components/demo-more-infos";
 import "../../../src/dialogs/more-info/more-info-content";

@@ -14,38 +31,52 @@ const ENTITIES = [
  }),
  getEntity("light", "kitchen_light", "on", {
    friendly_name: "Brightness Light",
-    brightness: 80,
+    brightness: 200,
    supported_features: SUPPORT_BRIGHTNESS,
  }),
+  getEntity("light", "color_temperature_light", "on", {
+    friendly_name: "White Color Temperature Light",
+    brightness: 128,
+    color_temp: 75,
+    min_mireds: 30,
+    max_mireds: 150,
+    supported_features: SUPPORT_BRIGHTNESS + SUPPORT_COLOR_TEMP,
+  }),
+  getEntity("light", "color_effectslight", "on", {
+    friendly_name: "Color Effets Light",
+    brightness: 255,
+    hs_color: [30, 100],
+    white_value: 36,
+    supported_features:
+      SUPPORT_BRIGHTNESS +
+      SUPPORT_EFFECT +
+      SUPPORT_FLASH +
+      SUPPORT_COLOR +
+      SUPPORT_TRANSITION +
+      SUPPORT_WHITE_VALUE,
+    effect_list: ["random", "colorloop"],
+  }),
 ];

-class DemoMoreInfoLight extends PolymerElement {
-  static get template() {
+@customElement("demo-more-info-light")
+class DemoMoreInfoLight extends LitElement {
+  @property() public hass!: MockHomeAssistant;
+
+  @query("demo-more-infos") private _demoRoot!: HTMLElement;
+
+  protected render(): TemplateResult {
    return html`
      <demo-more-infos
-        hass="[[hass]]"
-        entities="[[_entities]]"
+        .hass=${this.hass}
+        .entities=${ENTITIES.map((ent) => ent.entityId)}
      ></demo-more-infos>
    `;
  }

-  static get properties() {
-    return {
-      _entities: {
-        type: Array,
-        value: ENTITIES.map((ent) => ent.entityId),
-      },
-    };
-  }
-
-  public ready() {
-    super.ready();
-    this._setupDemo();
-  }
-
-  private async _setupDemo() {
-    const hass = provideHass(this);
-    await hass.updateTranslations(null, "en");
+  protected firstUpdated(changedProperties: PropertyValues) {
+    super.firstUpdated(changedProperties);
+    const hass = provideHass(this._demoRoot);
+    hass.updateTranslations(null, "en");
    hass.addEntities(ENTITIES);
  }
 }
@@ -1,9 +1,10 @@
 import "@material/mwc-button";
-import { html, LitElement, TemplateResult } from "lit-element";
+import { customElement, html, LitElement, TemplateResult } from "lit-element";
 import "../../../src/components/ha-card";
 import { ActionHandlerEvent } from "../../../src/data/lovelace";
 import { actionHandler } from "../../../src/panels/lovelace/common/directives/action-handler-directive";

+@customElement("demo-util-long-press")
 export class DemoUtilLongPress extends LitElement {
  protected render(): TemplateResult {
    return html`
@@ -20,7 +21,7 @@ export class DemoUtilLongPress extends LitElement {

            <textarea></textarea>

-            <div>(try pressing and scrolling too!)</div>
+            <div>Try pressing and scrolling too!</div>
          </ha-card>
        `
      )}
@@ -62,5 +63,3 @@ export class DemoUtilLongPress extends LitElement {
    `;
  }
 }
-
-customElements.define("demo-util-long-press", DemoUtilLongPress);
@@ -14,8 +14,6 @@ import "../../src/styles/polymer-ha-style";
 // eslint-disable-next-line import/extensions
 import { DEMOS } from "../build/import-demos";

-const fixPath = (path) => path.substr(2, path.length - 5);
-
 class HaGallery extends PolymerElement {
  static get template() {
    return html`
@@ -69,7 +69,7 @@ const STAGE_ICON = {
 const PERMIS_DESC = {
  stage: {
    title: "Add-on Stage",
-    description: `Add-ons can have one of three stages:\n\n<ha-svg-icon .path='${STAGE_ICON.stable}'></ha-svg-icon> **Stable**: These are add-ons ready to be used in production.\n\n<ha-svg-icon .path='${STAGE_ICON.experimental}'></ha-svg-icon> **Experimental**: These may contain bugs, and may be unfinished.\n\n<ha-svg-icon .path='${STAGE_ICON.deprecated}'></ha-svg-icon> **Deprecated**: These add-ons will no longer receive any updates.`,
+    description: `Add-ons can have one of three stages:\n\n<ha-svg-icon path="${STAGE_ICON.stable}"></ha-svg-icon> **Stable**: These are add-ons ready to be used in production.\n\n<ha-svg-icon path="${STAGE_ICON.experimental}"></ha-svg-icon> **Experimental**: These may contain bugs, and may be unfinished.\n\n<ha-svg-icon path="${STAGE_ICON.deprecated}"></ha-svg-icon> **Deprecated**: These add-ons will no longer receive any updates.`,
  },
  rating: {
    title: "Add-on Security Rating",
@@ -74,9 +74,7 @@ export class HassioUpdate extends LitElement {
            "Supervisor",
            this.supervisor.supervisor,
            "hassio/supervisor/update",
-            `https://github.com//home-assistant/hassio/releases/tag/${
-              this.supervisor.supervisor.version_latest
-            }`
+            `https://github.com//home-assistant/hassio/releases/tag/${this.supervisor.supervisor.version_latest}`
          )}
          ${this.supervisor.host.features.includes("hassos")
            ? this._renderUpdateCard(
@@ -137,8 +137,7 @@ export class DialogHassioNetwork extends LitElement
        )}
        ${this._interface?.type === "wireless"
          ? html`
-              <ha-expansion-panel outlined>
-                <span slot="title">Wi-Fi</span>
+              <ha-expansion-panel header="Wi-Fi" outlined>
                ${this._interface?.wifi?.ssid
                  ? html`<p>Connected to: ${this._interface?.wifi?.ssid}</p>`
                  : ""}
@@ -281,8 +280,10 @@ export class DialogHassioNetwork extends LitElement

  private _renderIPConfiguration(version: string) {
    return html`
-      <ha-expansion-panel outlined>
-        <span slot="title">IPv${version.charAt(version.length - 1)}</span>
+      <ha-expansion-panel
+        .header=${`IPv${version.charAt(version.length - 1)}`}
+        outlined
+      >
        <div class="radio-row">
          <ha-formfield label="DHCP">
            <ha-radio
@@ -591,6 +592,7 @@ export class DialogHassioNetwork extends LitElement
        }

        ha-expansion-panel {
+          --expansion-panel-summary-padding: 0 16px;
          margin: 4px 0;
        }
        paper-input {
@@ -178,7 +178,7 @@ class HassioSupervisorInfo extends LitElement {
              </div>`}
          ${!this.supervisor.supervisor.healthy
            ? html`<div class="error">
-                Your installtion is running in an unhealthy state.
+                Your installation is running in an unhealthy state.
                <button
                  class="link"
                  title="Learn more about why your system is marked as unhealthy"
@@ -29,22 +29,22 @@
    "@fullcalendar/daygrid": "5.1.0",
    "@fullcalendar/interaction": "5.1.0",
    "@fullcalendar/list": "5.1.0",
-    "@material/chips": "=8.0.0-canary.774dcfc8e.0",
-    "@material/mwc-button": "^0.19.0",
-    "@material/mwc-checkbox": "^0.19.0",
-    "@material/mwc-circular-progress": "^0.19.0",
-    "@material/mwc-dialog": "^0.19.0",
-    "@material/mwc-fab": "^0.19.0",
-    "@material/mwc-formfield": "^0.19.0",
-    "@material/mwc-icon-button": "^0.19.0",
-    "@material/mwc-list": "^0.19.0",
-    "@material/mwc-menu": "^0.19.0",
-    "@material/mwc-radio": "^0.19.0",
-    "@material/mwc-ripple": "^0.19.0",
-    "@material/mwc-switch": "^0.19.0",
-    "@material/mwc-tab": "^0.19.0",
-    "@material/mwc-tab-bar": "^0.19.0",
-    "@material/top-app-bar": "=8.0.0-canary.774dcfc8e.0",
+    "@material/chips": "=9.0.0-canary.1c156d69d.0",
+    "@material/mwc-button": "^0.20.0",
+    "@material/mwc-checkbox": "^0.20.0",
+    "@material/mwc-circular-progress": "^0.20.0",
+    "@material/mwc-dialog": "^0.20.0",
+    "@material/mwc-fab": "^0.20.0",
+    "@material/mwc-formfield": "^0.20.0",
+    "@material/mwc-icon-button": "^0.20.0",
+    "@material/mwc-list": "^0.20.0",
+    "@material/mwc-menu": "^0.20.0",
+    "@material/mwc-radio": "^0.20.0",
+    "@material/mwc-ripple": "^0.20.0",
+    "@material/mwc-switch": "^0.20.0",
+    "@material/mwc-tab": "^0.20.0",
+    "@material/mwc-tab-bar": "^0.20.0",
+    "@material/top-app-bar": "=9.0.0-canary.1c156d69d.0",
    "@mdi/js": "5.6.55",
    "@mdi/svg": "5.6.55",
    "@polymer/app-layout": "^3.0.2",
@@ -2,7 +2,7 @@ from setuptools import setup, find_packages

 setup(
    name="home-assistant-frontend",
-    version="20201126.0",
+    version="20201229.0",
    description="The Home Assistant frontend",
    url="https://github.com/home-assistant/home-assistant-polymer",
    author="The Home Assistant Authors",
@@ -0,0 +1,6 @@
+export const ensureArray = (value?: any) => {
+  if (!value || Array.isArray(value)) {
+    return value;
+  }
+  return [value];
+};
@@ -67,6 +67,10 @@ export const computeStateDisplay = (
    }
  }

+  if (domain === "counter") {
+    return formatNumber(compareState, language);
+  }
+
  return (
    // Return device class translation
    (stateObj.attributes.device_class &&
@@ -1,4 +1,13 @@
-export const copyToClipboard = (str) => {
+export const copyToClipboard = async (str) => {
+  if (navigator.clipboard) {
+    try {
+      await navigator.clipboard.writeText(str);
+      return;
+    } catch {
+      // just continue with the fallback coding below
+    }
+  }
+
  const el = document.createElement("textarea");
  el.value = str;
  document.body.appendChild(el);
@@ -98,6 +98,12 @@ export class HaDataTable extends LitElement {

  @property({ type: Boolean }) public hasFab = false;

+  /**
+   * Add an extra row at the bottom of the data table
+   * @type {TemplateResult}
+   */
+  @property({ attribute: false }) public appendRow?;
+
  @property({ type: Boolean, attribute: "auto-height" })
  public autoHeight = false;

@@ -126,6 +132,8 @@ export class HaDataTable extends LitElement {

  @query("slot[name='header']") private _header!: HTMLSlotElement;

+  private _items: DataTableRowData[] = [];
+
  private _checkableRowsCount?: number;

  private _checkedRows: string[] = [];
@@ -318,10 +326,13 @@ export class HaDataTable extends LitElement {
                  @scroll=${this._saveScrollPos}
                >
                  ${scroll({
-                    items: !this.hasFab
-                      ? this._filteredData
-                      : [...this._filteredData, ...[{ empty: true }]],
+                    items: this._items,
                    renderItem: (row: DataTableRowData, index) => {
+                      if (row.append) {
+                        return html`
+                          <div class="mdc-data-table__row">${row.content}</div>
+                        `;
+                      }
                      if (row.empty) {
                        return html` <div class="mdc-data-table__row"></div> `;
                      }
@@ -447,6 +458,20 @@ export class HaDataTable extends LitElement {
    if (this.curRequest !== curRequest) {
      return;
    }
+
+    if (this.appendRow || this.hasFab) {
+      this._items = [...data];
+
+      if (this.appendRow) {
+        this._items.push({ append: true, content: this.appendRow });
+      }
+
+      if (this.hasFab) {
+        this._items.push({ empty: true });
+      }
+    } else {
+      this._items = data;
+    }
    this._filteredData = data;
  }

@@ -58,6 +58,14 @@ const sortData = (
      valB = valB.toUpperCase();
    }

+    // Ensure "undefined" is always sorted to the bottom
+    if (valA === undefined && valB !== undefined) {
+      return 1;
+    }
+    if (valB === undefined && valA !== undefined) {
+      return -1;
+    }
+
    if (valA < valB) {
      return sort * -1;
    }
@@ -139,7 +139,7 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {

  private _filteredDevices: DeviceRegistryEntry[] = [];

-  private _getDevices = memoizeOne(
+  private _getAreasWithDevices = memoizeOne(
    (
      devices: DeviceRegistryEntry[],
      areas: AreaRegistryEntry[],
@@ -277,7 +277,7 @@ export class HaAreaDevicesPicker extends SubscribeMixin(LitElement) {
    if (!this._devices || !this._areas || !this._entities) {
      return html``;
    }
-    const areas = this._getDevices(
+    const areas = this._getAreasWithDevices(
      this._devices,
      this._areas,
      this._entities,
@@ -1,4 +1,5 @@
-import "../ha-icon-button";
+import "../ha-svg-icon";
+import "@material/mwc-icon-button/mwc-icon-button";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
@@ -12,6 +13,8 @@ import {
  html,
  LitElement,
  property,
+  PropertyValues,
+  query,
  TemplateResult,
 } from "lit-element";
 import memoizeOne from "memoize-one";
@@ -35,6 +38,7 @@ import {
 import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
+import { mdiClose, mdiMenuUp, mdiMenuDown } from "@mdi/js";

 interface Device {
  name: string;
@@ -111,6 +115,10 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
  @property({ type: Boolean })
  private _opened?: boolean;

+  @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
+
+  private _init = false;
+
  private _getDevices = memoizeOne(
    (
      devices: DeviceRegistryEntry[],
@@ -122,18 +130,27 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
      deviceFilter: this["deviceFilter"]
    ): Device[] => {
      if (!devices.length) {
-        return [];
+        return [
+          {
+            id: "",
+            area: "",
+            name: this.hass.localize("ui.components.device-picker.no_devices"),
+          },
+        ];
      }

      const deviceEntityLookup: DeviceEntityLookup = {};
-      for (const entity of entities) {
-        if (!entity.device_id) {
-          continue;
+
+      if (includeDomains || excludeDomains || includeDeviceClasses) {
+        for (const entity of entities) {
+          if (!entity.device_id) {
+            continue;
+          }
+          if (!(entity.device_id in deviceEntityLookup)) {
+            deviceEntityLookup[entity.device_id] = [];
+          }
+          deviceEntityLookup[entity.device_id].push(entity);
        }
-        if (!(entity.device_id in deviceEntityLookup)) {
-          deviceEntityLookup[entity.device_id] = [];
-        }
-        deviceEntityLookup[entity.device_id].push(entity);
      }

      const areaLookup: { [areaId: string]: AreaRegistryEntry } = {};
@@ -141,7 +158,9 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
        areaLookup[area.area_id] = area;
      }

-      let inputDevices = [...devices];
+      let inputDevices = devices.filter(
+        (device) => device.id === this.value || !device.disabled_by
+      );

      if (includeDomains) {
        inputDevices = inputDevices.filter((device) => {
@@ -208,6 +227,15 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
            : this.hass.localize("ui.components.device-picker.no_area"),
        };
      });
+      if (!outputDevices.length) {
+        return [
+          {
+            id: "",
+            area: "",
+            name: this.hass.localize("ui.components.device-picker.no_match"),
+          },
+        ];
+      }
      if (outputDevices.length === 1) {
        return outputDevices;
      }
@@ -215,6 +243,18 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
    }
  );

+  public open() {
+    this.updateComplete.then(() => {
+      (this.shadowRoot?.querySelector("vaadin-combo-box-light") as any)?.open();
+    });
+  }
+
+  public focus() {
+    this.updateComplete.then(() => {
+      this.shadowRoot?.querySelector("paper-input")?.focus();
+    });
+  }
+
  public hassSubscribe(): UnsubscribeFunc[] {
    return [
      subscribeDeviceRegistry(this.hass.connection!, (devices) => {
@@ -229,25 +269,33 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
    ];
  }

+  protected updated(changedProps: PropertyValues) {
+    if (
+      (!this._init && this.devices && this.areas && this.entities) ||
+      (changedProps.has("_opened") && this._opened)
+    ) {
+      this._init = true;
+      (this._comboBox as any).items = this._getDevices(
+        this.devices!,
+        this.areas!,
+        this.entities!,
+        this.includeDomains,
+        this.excludeDomains,
+        this.includeDeviceClasses,
+        this.deviceFilter
+      );
+    }
+  }
+
  protected render(): TemplateResult {
    if (!this.devices || !this.areas || !this.entities) {
      return html``;
    }
-    const devices = this._getDevices(
-      this.devices,
-      this.areas,
-      this.entities,
-      this.includeDomains,
-      this.excludeDomains,
-      this.includeDeviceClasses,
-      this.deviceFilter
-    );
    return html`
      <vaadin-combo-box-light
        item-value-path="id"
        item-id-path="id"
        item-label-path="name"
-        .items=${devices}
        .value=${this._value}
        .renderer=${rowRenderer}
        @opened-changed=${this._openedChanged}
@@ -265,34 +313,30 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
        >
          ${this.value
            ? html`
-                <ha-icon-button
-                  aria-label=${this.hass.localize(
+                <mwc-icon-button
+                  .label=${this.hass.localize(
                    "ui.components.device-picker.clear"
                  )}
                  slot="suffix"
                  class="clear-button"
-                  icon="hass:close"
                  @click=${this._clearValue}
-                  no-ripple
                >
-                  Clear
-                </ha-icon-button>
-              `
-            : ""}
-          ${devices.length > 0
-            ? html`
-                <ha-icon-button
-                  aria-label=${this.hass.localize(
-                    "ui.components.device-picker.show_devices"
-                  )}
-                  slot="suffix"
-                  class="toggle-button"
-                  .icon=${this._opened ? "hass:menu-up" : "hass:menu-down"}
-                >
-                  Toggle
-                </ha-icon-button>
+                  <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+                </mwc-icon-button>
              `
            : ""}
+
+          <mwc-icon-button
+            .label=${this.hass.localize(
+              "ui.components.device-picker.show_devices"
+            )}
+            slot="suffix"
+            class="toggle-button"
+          >
+            <ha-svg-icon
+              .path=${this._opened ? mdiMenuUp : mdiMenuDown}
+            ></ha-svg-icon>
+          </mwc-icon-button>
        </paper-input>
      </vaadin-combo-box-light>
    `;
@@ -329,7 +373,7 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {

  static get styles(): CSSResult {
    return css`
-      paper-input > ha-icon-button {
+      paper-input > mwc-icon-button {
        --mdc-icon-button-size: 24px;
        padding: 2px;
        color: var(--secondary-text-color);
@@ -101,6 +101,18 @@ export class HaEntityPicker extends LitElement {

  @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;

+  public open() {
+    this.updateComplete.then(() => {
+      (this.shadowRoot?.querySelector("vaadin-combo-box-light") as any)?.open();
+    });
+  }
+
+  public focus() {
+    this.updateComplete.then(() => {
+      this.shadowRoot?.querySelector("paper-input")?.focus();
+    });
+  }
+
  private _initedStates = false;

  private _states: HassEntity[] = [];
@@ -153,6 +165,24 @@ export class HaEntityPicker extends LitElement {
        );
      }

+      if (!states.length) {
+        return [
+          {
+            entity_id: "",
+            state: "",
+            last_changed: "",
+            last_updated: "",
+            context: { id: "", user_id: null },
+            attributes: {
+              friendly_name: this.hass!.localize(
+                "ui.components.entity.entity-picker.no_match"
+              ),
+              icon: "mdi:magnify",
+            },
+          },
+        ];
+      }
+
      return states;
    }
  );
@@ -203,7 +233,6 @@ export class HaEntityPicker extends LitElement {
          .label=${this.label === undefined
            ? this.hass.localize("ui.components.entity.entity-picker.entity")
            : this.label}
-          .value=${this._value}
          .disabled=${this.disabled}
          class="input"
          autocapitalize="none"
@@ -1,4 +1,5 @@
-import "./ha-icon-button";
+import "./ha-svg-icon";
+import "@material/mwc-icon-button/mwc-icon-button";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
@@ -14,6 +15,8 @@ import {
  property,
  internalProperty,
  TemplateResult,
+  PropertyValues,
+  query,
 } from "lit-element";
 import { fireEvent } from "../common/dom/fire_event";
 import {
@@ -28,6 +31,19 @@ import {
 import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
+import memoizeOne from "memoize-one";
+import {
+  DeviceEntityLookup,
+  DeviceRegistryEntry,
+  subscribeDeviceRegistry,
+} from "../data/device_registry";
+import {
+  EntityRegistryEntry,
+  subscribeEntityRegistry,
+} from "../data/entity_registry";
+import { computeDomain } from "../common/entity/compute_domain";
+import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
+import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";

 const rowRenderer = (
  root: HTMLElement,
@@ -68,31 +84,252 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {

  @property() public value?: string;

-  @property() public _areas?: AreaRegistryEntry[];
+  @property() public placeholder?: string;

  @property({ type: Boolean, attribute: "no-add" })
  public noAdd?: boolean;

+  /**
+   * Show only areas with entities from specific domains.
+   * @type {Array}
+   * @attr include-domains
+   */
+  @property({ type: Array, attribute: "include-domains" })
+  public includeDomains?: string[];
+
+  /**
+   * Show no areas with entities of these domains.
+   * @type {Array}
+   * @attr exclude-domains
+   */
+  @property({ type: Array, attribute: "exclude-domains" })
+  public excludeDomains?: string[];
+
+  /**
+   * Show only areas with entities of these device classes.
+   * @type {Array}
+   * @attr include-device-classes
+   */
+  @property({ type: Array, attribute: "include-device-classes" })
+  public includeDeviceClasses?: string[];
+
+  @property() public deviceFilter?: HaDevicePickerDeviceFilterFunc;
+
+  @property() public entityFilter?: (entity: EntityRegistryEntry) => boolean;
+
+  @internalProperty() private _areas?: AreaRegistryEntry[];
+
+  @internalProperty() private _devices?: DeviceRegistryEntry[];
+
+  @internalProperty() private _entities?: EntityRegistryEntry[];
+
  @internalProperty() private _opened?: boolean;

+  @query("vaadin-combo-box-light", true) private _comboBox!: HTMLElement;
+
+  private _init = false;
+
  public hassSubscribe(): UnsubscribeFunc[] {
    return [
      subscribeAreaRegistry(this.hass.connection!, (areas) => {
-        this._areas = this.noAdd
-          ? areas
-          : [
-              ...areas,
-              {
-                area_id: "add_new",
-                name: this.hass.localize("ui.components.area-picker.add_new"),
-              },
-            ];
+        this._areas = areas;
+      }),
+      subscribeDeviceRegistry(this.hass.connection!, (devices) => {
+        this._devices = devices;
+      }),
+      subscribeEntityRegistry(this.hass.connection!, (entities) => {
+        this._entities = entities;
      }),
    ];
  }

+  public open() {
+    this.updateComplete.then(() => {
+      (this.shadowRoot?.querySelector("vaadin-combo-box-light") as any)?.open();
+    });
+  }
+
+  public focus() {
+    this.updateComplete.then(() => {
+      this.shadowRoot?.querySelector("paper-input")?.focus();
+    });
+  }
+
+  private _getAreas = memoizeOne(
+    (
+      areas: AreaRegistryEntry[],
+      devices: DeviceRegistryEntry[],
+      entities: EntityRegistryEntry[],
+      includeDomains: this["includeDomains"],
+      excludeDomains: this["excludeDomains"],
+      includeDeviceClasses: this["includeDeviceClasses"],
+      deviceFilter: this["deviceFilter"],
+      entityFilter: this["entityFilter"],
+      noAdd: this["noAdd"]
+    ): AreaRegistryEntry[] => {
+      if (!areas.length) {
+        return [
+          {
+            area_id: "",
+            name: this.hass.localize("ui.components.area-picker.no_areas"),
+          },
+        ];
+      }
+
+      const deviceEntityLookup: DeviceEntityLookup = {};
+      let inputDevices: DeviceRegistryEntry[] | undefined;
+      let inputEntities: EntityRegistryEntry[] | undefined;
+
+      if (includeDomains || excludeDomains || includeDeviceClasses) {
+        for (const entity of entities) {
+          if (!entity.device_id) {
+            continue;
+          }
+          if (!(entity.device_id in deviceEntityLookup)) {
+            deviceEntityLookup[entity.device_id] = [];
+          }
+          deviceEntityLookup[entity.device_id].push(entity);
+        }
+        inputDevices = devices;
+        inputEntities = entities.filter((entity) => entity.area_id);
+      } else if (deviceFilter) {
+        inputDevices = devices;
+      } else if (entityFilter) {
+        inputEntities = entities.filter((entity) => entity.area_id);
+      }
+
+      if (includeDomains) {
+        inputDevices = inputDevices!.filter((device) => {
+          const devEntities = deviceEntityLookup[device.id];
+          if (!devEntities || !devEntities.length) {
+            return false;
+          }
+          return deviceEntityLookup[device.id].some((entity) =>
+            includeDomains.includes(computeDomain(entity.entity_id))
+          );
+        });
+        inputEntities = inputEntities!.filter((entity) =>
+          includeDomains.includes(computeDomain(entity.entity_id))
+        );
+      }
+
+      if (excludeDomains) {
+        inputDevices = inputDevices!.filter((device) => {
+          const devEntities = deviceEntityLookup[device.id];
+          if (!devEntities || !devEntities.length) {
+            return true;
+          }
+          return entities.every(
+            (entity) =>
+              !excludeDomains.includes(computeDomain(entity.entity_id))
+          );
+        });
+        inputEntities = inputEntities!.filter(
+          (entity) => !excludeDomains.includes(computeDomain(entity.entity_id))
+        );
+      }
+
+      if (includeDeviceClasses) {
+        inputDevices = inputDevices!.filter((device) => {
+          const devEntities = deviceEntityLookup[device.id];
+          if (!devEntities || !devEntities.length) {
+            return false;
+          }
+          return deviceEntityLookup[device.id].some((entity) => {
+            const stateObj = this.hass.states[entity.entity_id];
+            if (!stateObj) {
+              return false;
+            }
+            return (
+              stateObj.attributes.device_class &&
+              includeDeviceClasses.includes(stateObj.attributes.device_class)
+            );
+          });
+        });
+        inputEntities = inputEntities!.filter((entity) => {
+          const stateObj = this.hass.states[entity.entity_id];
+          return (
+            stateObj.attributes.device_class &&
+            includeDeviceClasses.includes(stateObj.attributes.device_class)
+          );
+        });
+      }
+
+      if (deviceFilter) {
+        inputDevices = inputDevices!.filter((device) => deviceFilter!(device));
+      }
+
+      if (entityFilter) {
+        inputEntities = inputEntities!.filter((entity) =>
+          entityFilter!(entity)
+        );
+      }
+
+      let outputAreas = areas;
+
+      let areaIds: string[] | undefined;
+
+      if (inputDevices) {
+        areaIds = inputDevices
+          .filter((device) => device.area_id)
+          .map((device) => device.area_id!);
+      }
+
+      if (inputEntities) {
+        areaIds = (areaIds ?? []).concat(
+          inputEntities
+            .filter((entity) => entity.area_id)
+            .map((entity) => entity.area_id!)
+        );
+      }
+
+      if (areaIds) {
+        outputAreas = areas.filter((area) => areaIds!.includes(area.area_id));
+      }
+
+      if (!outputAreas.length) {
+        outputAreas = [
+          {
+            area_id: "",
+            name: this.hass.localize("ui.components.area-picker.no_match"),
+          },
+        ];
+      }
+
+      return noAdd
+        ? outputAreas
+        : [
+            ...outputAreas,
+            {
+              area_id: "add_new",
+              name: this.hass.localize("ui.components.area-picker.add_new"),
+            },
+          ];
+    }
+  );
+
+  protected updated(changedProps: PropertyValues) {
+    if (
+      (!this._init && this._devices && this._areas && this._entities) ||
+      (changedProps.has("_opened") && this._opened)
+    ) {
+      this._init = true;
+      (this._comboBox as any).items = this._getAreas(
+        this._areas!,
+        this._devices!,
+        this._entities!,
+        this.includeDomains,
+        this.excludeDomains,
+        this.includeDeviceClasses,
+        this.deviceFilter,
+        this.entityFilter,
+        this.noAdd
+      );
+    }
+  }
+
  protected render(): TemplateResult {
-    if (!this._areas) {
+    if (!this._devices || !this._areas || !this._entities) {
      return html``;
    }
    return html`
@@ -100,7 +337,6 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
        item-value-path="area_id"
        item-id-path="area_id"
        item-label-path="name"
-        .items=${this._areas}
        .value=${this._value}
        .renderer=${rowRenderer}
        @opened-changed=${this._openedChanged}
@@ -110,6 +346,9 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
          .label=${this.label === undefined && this.hass
            ? this.hass.localize("ui.components.area-picker.area")
            : this.label}
+          .placeholder=${this.placeholder
+            ? this._area(this.placeholder)?.name
+            : undefined}
          class="input"
          autocapitalize="none"
          autocomplete="off"
@@ -118,39 +357,39 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
        >
          ${this.value
            ? html`
-                <ha-icon-button
-                  aria-label=${this.hass.localize(
+                <mwc-icon-button
+                  .label=${this.hass.localize(
                    "ui.components.area-picker.clear"
                  )}
                  slot="suffix"
                  class="clear-button"
-                  icon="hass:close"
                  @click=${this._clearValue}
-                  no-ripple
                >
-                  ${this.hass.localize("ui.components.area-picker.clear")}
-                </ha-icon-button>
-              `
-            : ""}
-          ${this._areas.length > 0
-            ? html`
-                <ha-icon-button
-                  aria-label=${this.hass.localize(
-                    "ui.components.area-picker.show_areas"
-                  )}
-                  slot="suffix"
-                  class="toggle-button"
-                  .icon=${this._opened ? "hass:menu-up" : "hass:menu-down"}
-                >
-                  ${this.hass.localize("ui.components.area-picker.toggle")}
-                </ha-icon-button>
+                  <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+                </mwc-icon-button>
              `
            : ""}
+
+          <mwc-icon-button
+            .label=${this.hass.localize("ui.components.area-picker.toggle")}
+            slot="suffix"
+            class="toggle-button"
+          >
+            <ha-svg-icon
+              .path=${this._opened ? mdiMenuUp : mdiMenuDown}
+            ></ha-svg-icon>
+          </mwc-icon-button>
        </paper-input>
      </vaadin-combo-box-light>
    `;
  }

+  private _area = memoizeOne((areaId: string):
+    | AreaRegistryEntry
+    | undefined => {
+    return this._areas?.find((area) => area.area_id === areaId);
+  });
+
  private _clearValue(ev: Event) {
    ev.stopPropagation();
    this._setValue("");
@@ -215,7 +454,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {

  static get styles(): CSSResult {
    return css`
-      paper-input > ha-icon-button {
+      paper-input > mwc-icon-button {
        --mdc-icon-button-size: 24px;
        padding: 2px;
        color: var(--secondary-text-color);
@@ -63,7 +63,7 @@ class HaAttributes extends LitElement {
        justify-content: space-between;
      }
      .data-entry .value {
-        max-width: 50%;
+        max-width: 60%;
        overflow-wrap: break-word;
        text-align: right;
      }
@@ -77,6 +77,9 @@ class HaAttributes extends LitElement {
      pre {
        font-family: inherit;
        font-size: inherit;
+        margin: 0px;
+        overflow-wrap: break-word;
+        white-space: pre-line;
      }
    `;
  }
@@ -52,6 +52,7 @@ class HaBluePrintPicker extends LitElement {
        .label=${this.label ||
        this.hass.localize("ui.components.blueprint-picker.label")}
        .disabled=${this.disabled}
+        horizontal-align="left"
      >
        <paper-listbox
          slot="dropdown-content"
@@ -110,6 +111,9 @@ class HaBluePrintPicker extends LitElement {
      paper-listbox {
        min-width: 200px;
      }
+      paper-item {
+        cursor: pointer;
+      }
    `;
  }
 }
@@ -11,6 +11,7 @@ import {
 import { fireEvent } from "../common/dom/fire_event";
 import type { ToggleButton } from "../types";
 import "./ha-svg-icon";
+import "@material/mwc-button/mwc-button";

@customElement("ha-button-toggle-group")
 export class HaButtonToggleGroup extends LitElement {
@@ -21,17 +22,22 @@ export class HaButtonToggleGroup extends LitElement {
  protected render(): TemplateResult {
    return html`
      <div>
-        ${this.buttons.map(
-          (button) => html`
-            <mwc-icon-button
-              .label=${button.label}
-              .value=${button.value}
-              ?active=${this.active === button.value}
-              @click=${this._handleClick}
-            >
-              <ha-svg-icon .path=${button.iconPath}></ha-svg-icon>
-            </mwc-icon-button>
-          `
+        ${this.buttons.map((button) =>
+          button.iconPath
+            ? html`<mwc-icon-button
+                .label=${button.label}
+                .value=${button.value}
+                ?active=${this.active === button.value}
+                @click=${this._handleClick}
+              >
+                <ha-svg-icon .path=${button.iconPath}></ha-svg-icon>
+              </mwc-icon-button>`
+            : html`<mwc-button
+                .value=${button.value}
+                ?active=${this.active === button.value}
+                @click=${this._handleClick}
+                >${button.label}</mwc-button
+              >`
        )}
      </div>
    `;
@@ -49,13 +55,15 @@ export class HaButtonToggleGroup extends LitElement {
        --mdc-icon-button-size: var(--button-toggle-size, 36px);
        --mdc-icon-size: var(--button-toggle-icon-size, 20px);
      }
-      mwc-icon-button {
+      mwc-icon-button,
+      mwc-button {
        border: 1px solid var(--primary-color);
        border-right-width: 0px;
        position: relative;
        cursor: pointer;
      }
-      mwc-icon-button::before {
+      mwc-icon-button::before,
+      mwc-button::before {
        top: 0;
        left: 0;
        width: 100%;
@@ -67,17 +75,21 @@ export class HaButtonToggleGroup extends LitElement {
        content: "";
        transition: opacity 15ms linear, background-color 15ms linear;
      }
-      mwc-icon-button[active]::before {
+      mwc-icon-button[active]::before,
+      mwc-button[active]::before {
        opacity: var(--mdc-icon-button-ripple-opacity, 0.12);
      }
-      mwc-icon-button:first-child {
+      mwc-icon-button:first-child,
+      mwc-button:first-child {
        border-radius: 4px 0 0 4px;
      }
-      mwc-icon-button:last-child {
+      mwc-icon-button:last-child,
+      mwc-button:last-child {
        border-radius: 0 4px 4px 0;
        border-right-width: 1px;
      }
-      mwc-icon-button:only-child {
+      mwc-icon-button:only-child,
+      mwc-button:only-child {
        border-radius: 4px;
        border-right-width: 1px;
      }
@@ -19,12 +19,14 @@ class HaExpansionPanel extends LitElement {

  @property({ type: Boolean, reflect: true }) outlined = false;

+  @property() header?: string;
+
  @query(".container") private _container!: HTMLDivElement;

  protected render(): TemplateResult {
    return html`
      <div class="summary" @click=${this._toggleContainer}>
-        <slot name="title"></slot>
+        <slot name="header">${this.header}</slot>
        <ha-svg-icon
          .path=${mdiChevronDown}
          class="summary-icon ${classMap({ expanded: this.expanded })}"
@@ -76,7 +78,7 @@ class HaExpansionPanel extends LitElement {

      .summary {
        display: flex;
-        padding: var(--expansion-panel-summary-padding, 0px 16px);
+        padding: var(--expansion-panel-summary-padding, 0);
        min-height: 48px;
        align-items: center;
        cursor: pointer;
@@ -0,0 +1,20 @@
+import type { Fab } from "@material/mwc-fab";
+import "@material/mwc-fab";
+import { customElement } from "lit-element";
+import { Constructor } from "../types";
+
+const MwcFab = customElements.get("mwc-fab") as Constructor<Fab>;
+
+@customElement("ha-fab")
+export class HaFab extends MwcFab {
+  protected firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
+    this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-fab": HaFab;
+  }
+}
@@ -127,7 +127,7 @@ class HaHLSPlayer extends LitElement {

    // Parse playlist assuming it is a master playlist. Match group 1 is whether hevc, match group 2 is regular playlist url
    // See https://tools.ietf.org/html/rfc8216 for HLS spec details
-    const playlistRegexp = /#EXT-X-STREAM-INF:.*?(?:CODECS=".*?(?<isHevc>hev1|hvc1)?\..*?".*?)?(?:\n|\r\n)(?<streamUrl>.+)/g;
+    const playlistRegexp = /#EXT-X-STREAM-INF:.*?(?:CODECS=".*?(hev1|hvc1)?\..*?".*?)?(?:\n|\r\n)(.+)/g;
    const match = playlistRegexp.exec(masterPlaylist);
    const matchTwice = playlistRegexp.exec(masterPlaylist);

@@ -136,17 +136,13 @@ class HaHLSPlayer extends LitElement {
    let playlist_url: string;
    if (match !== null && matchTwice === null) {
      // Only send the regular playlist url if we match exactly once
-      playlist_url = new URL(match.groups!.streamUrl, this.url).href;
+      playlist_url = new URL(match[2], this.url).href;
    } else {
      playlist_url = this.url;
    }

    // If codec is HEVC and ExoPlayer is supported, use ExoPlayer.
-    if (
-      this._useExoPlayer &&
-      match !== null &&
-      match.groups!.isHevc !== undefined
-    ) {
+    if (this._useExoPlayer && match !== null && match[1] !== undefined) {
      this._renderHLSExoPlayer(playlist_url);
    } else if (hls.isSupported()) {
      this._renderHLSPolyfill(videoEl, hls, playlist_url);
@@ -60,8 +60,9 @@ export class HaIconInput extends LitElement {
  static get styles() {
    return css`
      ha-icon {
-        position: relative;
-        bottom: 4px;
+        position: absolute;
+        bottom: 2px;
+        right: 0;
      }
    `;
  }
@@ -10,7 +10,6 @@ class HaLabeledSlider extends PolymerElement {
      <style>
        :host {
          display: block;
-          border-radius: 4px;
        }

        .title {
@@ -30,6 +29,7 @@ class HaLabeledSlider extends PolymerElement {
        ha-slider {
          flex-grow: 1;
          background-image: var(--ha-slider-background);
+          border-radius: 4px;
        }
      </style>

@@ -13,7 +13,7 @@ import type { HomeAssistant } from "../types";
 class HaRelativeTime extends UpdatingElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

-  @property({ attribute: false }) public datetime?: string;
+  @property({ attribute: false }) public datetime?: string | Date;

  private _interval?: number;

@@ -0,0 +1,45 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+} from "lit-element";
+import { HomeAssistant } from "../../types";
+import { ActionSelector } from "../../data/selector";
+import { Action } from "../../data/script";
+import "../../panels/config/automation/action/ha-automation-action";
+
+@customElement("ha-selector-action")
+export class HaActionSelector extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: ActionSelector;
+
+  @property() public value?: Action;
+
+  @property() public label?: string;
+
+  protected render() {
+    return html`<ha-automation-action
+      .actions=${this.value || []}
+      .hass=${this.hass}
+    ></ha-automation-action>`;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      ha-automation-action {
+        display: block;
+        margin-bottom: 16px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-action": HaActionSelector;
+  }
+}
@@ -1,7 +1,16 @@
-import { customElement, html, LitElement, property } from "lit-element";
+import {
+  customElement,
+  html,
+  internalProperty,
+  LitElement,
+  property,
+} from "lit-element";
 import { HomeAssistant } from "../../types";
 import { AreaSelector } from "../../data/selector";
 import "../ha-area-picker";
+import { ConfigEntry, getConfigEntries } from "../../data/config_entries";
+import { DeviceRegistryEntry } from "../../data/device_registry";
+import { EntityRegistryEntry } from "../../data/entity_registry";

@customElement("ha-selector-area")
 export class HaAreaSelector extends LitElement {
@@ -13,14 +22,77 @@ export class HaAreaSelector extends LitElement {

  @property() public label?: string;

+  @internalProperty() public _configEntries?: ConfigEntry[];
+
+  protected updated(changedProperties) {
+    if (changedProperties.has("selector")) {
+      const oldSelector = changedProperties.get("selector");
+      if (
+        oldSelector !== this.selector &&
+        this.selector.area.device?.integration
+      ) {
+        this._loadConfigEntries();
+      }
+    }
+  }
+
  protected render() {
    return html`<ha-area-picker
      .hass=${this.hass}
      .value=${this.value}
      .label=${this.label}
      no-add
+      .deviceFilter=${(device) => this._filterDevices(device)}
+      .entityFilter=${(entity) => this._filterEntities(entity)}
+      .includeDeviceClasses=${this.selector.area.entity?.device_class
+        ? [this.selector.area.entity.device_class]
+        : undefined}
+      .includeDomains=${this.selector.area.entity?.domain
+        ? [this.selector.area.entity.domain]
+        : undefined}
    ></ha-area-picker>`;
  }
+
+  private _filterEntities(entity: EntityRegistryEntry): boolean {
+    if (this.selector.area.entity?.integration) {
+      if (entity.platform !== this.selector.area.entity.integration) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  private _filterDevices(device: DeviceRegistryEntry): boolean {
+    if (
+      this.selector.area.device?.manufacturer &&
+      device.manufacturer !== this.selector.area.device.manufacturer
+    ) {
+      return false;
+    }
+    if (
+      this.selector.area.device?.model &&
+      device.model !== this.selector.area.device.model
+    ) {
+      return false;
+    }
+    if (this.selector.area.device?.integration) {
+      if (
+        this._configEntries &&
+        !this._configEntries.some((entry) =>
+          device.config_entries.includes(entry.entry_id)
+        )
+      ) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  private async _loadConfigEntries() {
+    this._configEntries = (await getConfigEntries(this.hass)).filter(
+      (entry) => entry.domain === this.selector.area.device?.integration
+    );
+  }
 }

 declare global {
@@ -63,7 +63,8 @@ export class HaDeviceSelector extends LitElement {
    }
    if (this.selector.device.integration) {
      if (
-        !this._configEntries?.some((entry) =>
+        this._configEntries &&
+        !this._configEntries.some((entry) =>
          device.config_entries.includes(entry.entry_id)
        )
      ) {
@@ -19,7 +19,7 @@ export class HaEntitySelector extends SubscribeMixin(LitElement) {

  @property() public selector!: EntitySelector;

-  @internalProperty() private _entities?: Record<string, string>;
+  @internalProperty() private _entityPlaformLookup?: Record<string, string>;

  @property() public value?: any;

@@ -45,7 +45,7 @@ export class HaEntitySelector extends SubscribeMixin(LitElement) {
          }
          entityLookup[confEnt.entity_id] = confEnt.platform;
        }
-        this._entities = entityLookup;
+        this._entityPlaformLookup = entityLookup;
      }),
    ];
  }
@@ -66,8 +66,9 @@ export class HaEntitySelector extends SubscribeMixin(LitElement) {
    }
    if (this.selector.entity.integration) {
      if (
-        !this._entities ||
-        this._entities[entity.entity_id] !== this.selector.entity.integration
+        !this._entityPlaformLookup ||
+        this._entityPlaformLookup[entity.entity_id] !==
+          this.selector.entity.integration
      ) {
        return false;
      }
@@ -0,0 +1,153 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  internalProperty,
+  LitElement,
+  property,
+} from "lit-element";
+import { HomeAssistant } from "../../types";
+import { TargetSelector } from "../../data/selector";
+import { ConfigEntry, getConfigEntries } from "../../data/config_entries";
+import { DeviceRegistryEntry } from "../../data/device_registry";
+import "../ha-target-picker";
+import "@material/mwc-list/mwc-list-item";
+import "@polymer/paper-input/paper-input";
+import "@material/mwc-list/mwc-list";
+import {
+  EntityRegistryEntry,
+  subscribeEntityRegistry,
+} from "../../data/entity_registry";
+import { Target } from "../../data/target";
+import "@material/mwc-tab-bar/mwc-tab-bar";
+import "@material/mwc-tab/mwc-tab";
+import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
+import { SubscribeMixin } from "../../mixins/subscribe-mixin";
+
+@customElement("ha-selector-target")
+export class HaTargetSelector extends SubscribeMixin(LitElement) {
+  @property() public hass!: HomeAssistant;
+
+  @property() public selector!: TargetSelector;
+
+  @property() public value?: Target;
+
+  @property() public label?: string;
+
+  @internalProperty() private _entityPlaformLookup?: Record<string, string>;
+
+  @internalProperty() private _configEntries?: ConfigEntry[];
+
+  public hassSubscribe(): UnsubscribeFunc[] {
+    return [
+      subscribeEntityRegistry(this.hass.connection!, (entities) => {
+        const entityLookup = {};
+        for (const confEnt of entities) {
+          if (!confEnt.platform) {
+            continue;
+          }
+          entityLookup[confEnt.entity_id] = confEnt.platform;
+        }
+        this._entityPlaformLookup = entityLookup;
+      }),
+    ];
+  }
+
+  protected updated(changedProperties) {
+    if (changedProperties.has("selector")) {
+      const oldSelector = changedProperties.get("selector");
+      if (
+        oldSelector !== this.selector &&
+        this.selector.target.device?.integration
+      ) {
+        this._loadConfigEntries();
+      }
+    }
+  }
+
+  protected render() {
+    return html`<ha-target-picker
+      .hass=${this.hass}
+      .value=${this.value}
+      .deviceFilter=${(device) => this._filterDevices(device)}
+      .entityRegFilter=${(entity: EntityRegistryEntry) =>
+        this._filterRegEntities(entity)}
+      .entityFilter=${(entity: HassEntity) => this._filterEntities(entity)}
+      .includeDeviceClasses=${this.selector.target.entity?.device_class
+        ? [this.selector.target.entity.device_class]
+        : undefined}
+      .includeDomains=${this.selector.target.entity?.domain
+        ? [this.selector.target.entity.domain]
+        : undefined}
+    ></ha-target-picker>`;
+  }
+
+  private _filterEntities(entity: HassEntity): boolean {
+    if (this.selector.target.entity?.integration) {
+      if (
+        !this._entityPlaformLookup ||
+        this._entityPlaformLookup[entity.entity_id] !==
+          this.selector.target.entity.integration
+      ) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  private _filterRegEntities(entity: EntityRegistryEntry): boolean {
+    if (this.selector.target.entity?.integration) {
+      if (entity.platform !== this.selector.target.entity.integration) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  private _filterDevices(device: DeviceRegistryEntry): boolean {
+    if (
+      this.selector.target.device?.manufacturer &&
+      device.manufacturer !== this.selector.target.device.manufacturer
+    ) {
+      return false;
+    }
+    if (
+      this.selector.target.device?.model &&
+      device.model !== this.selector.target.device.model
+    ) {
+      return false;
+    }
+    if (this.selector.target.device?.integration) {
+      if (
+        !this._configEntries?.some((entry) =>
+          device.config_entries.includes(entry.entry_id)
+        )
+      ) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  private async _loadConfigEntries() {
+    this._configEntries = (await getConfigEntries(this.hass)).filter(
+      (entry) => entry.domain === this.selector.target.device?.integration
+    );
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      ha-target-picker {
+        margin: 0 -8px;
+        display: block;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-target": HaTargetSelector;
+  }
+}
@@ -5,9 +5,11 @@ import { HomeAssistant } from "../../types";
 import "./ha-selector-entity";
 import "./ha-selector-device";
 import "./ha-selector-area";
+import "./ha-selector-target";
 import "./ha-selector-number";
 import "./ha-selector-boolean";
 import "./ha-selector-time";
+import "./ha-selector-action";
 import { Selector } from "../../data/selector";

@customElement("ha-selector")
@@ -18,11 +18,6 @@ export class HaSettingsRow extends LitElement {

  protected render(): SVGTemplateResult {
    return html`
-      <style>
-        paper-item-body {
-          padding-right: 16px;
-        }
-      </style>
      <paper-item-body
        ?two-line=${!this.threeLine}
        ?three-line=${this.threeLine}
@@ -43,6 +38,14 @@ export class HaSettingsRow extends LitElement {
        align-self: auto;
        align-items: center;
      }
+      paper-item-body {
+        padding: 8px 16px 8px 0;
+      }
+      paper-item-body[two-line] {
+        min-height: calc(
+          var(--paper-item-body-two-line-min-height, 72px) - 16px
+        );
+      }
      :host([narrow]) {
        align-items: normal;
        flex-direction: column;
@@ -52,6 +55,9 @@ export class HaSettingsRow extends LitElement {
      ::slotted(ha-switch) {
        padding: 16px 0;
      }
+      div[secondary] {
+        white-space: normal;
+      }
    `;
  }
 }
@@ -0,0 +1,605 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  internalProperty,
+  LitElement,
+  property,
+  query,
+  unsafeCSS,
+} from "lit-element";
+import { HomeAssistant } from "../types";
+// @ts-ignore
+import chipStyles from "@material/chips/dist/mdc.chips.min.css";
+import {
+  mdiSofa,
+  mdiDevices,
+  mdiClose,
+  mdiPlus,
+  mdiUnfoldMoreVertical,
+} from "@mdi/js";
+import "./ha-svg-icon";
+import "./ha-icon";
+import "@material/mwc-icon-button/mwc-icon-button";
+import { classMap } from "lit-html/directives/class-map";
+import "@material/mwc-button/mwc-button";
+import { UnsubscribeFunc } from "home-assistant-js-websocket";
+import {
+  AreaRegistryEntry,
+  subscribeAreaRegistry,
+} from "../data/area_registry";
+import {
+  computeDeviceName,
+  DeviceRegistryEntry,
+  subscribeDeviceRegistry,
+} from "../data/device_registry";
+import {
+  EntityRegistryEntry,
+  subscribeEntityRegistry,
+} from "../data/entity_registry";
+import { SubscribeMixin } from "../mixins/subscribe-mixin";
+import { computeStateName } from "../common/entity/compute_state_name";
+import { stateIcon } from "../common/entity/state_icon";
+import { fireEvent } from "../common/dom/fire_event";
+import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
+import { computeDomain } from "../common/entity/compute_domain";
+import { Target } from "../data/target";
+import { ensureArray } from "../common/ensure-array";
+import "./entity/ha-entity-picker";
+import "./device/ha-device-picker";
+import "./ha-area-picker";
+import type { HaEntityPickerEntityFilterFunc } from "./entity/ha-entity-picker";
+import "@polymer/paper-tooltip/paper-tooltip";
+
+@customElement("ha-target-picker")
+export class HaTargetPicker extends SubscribeMixin(LitElement) {
+  @property() public hass!: HomeAssistant;
+
+  @property() public value?: Target;
+
+  @property() public label?: string;
+
+  /**
+   * Show only targets with entities from specific domains.
+   * @type {Array}
+   * @attr include-domains
+   */
+  @property({ type: Array, attribute: "include-domains" })
+  public includeDomains?: string[];
+
+  /**
+   * Show only targets with entities of these device classes.
+   * @type {Array}
+   * @attr include-device-classes
+   */
+  @property({ type: Array, attribute: "include-device-classes" })
+  public includeDeviceClasses?: string[];
+
+  @property() public deviceFilter?: HaDevicePickerDeviceFilterFunc;
+
+  @property() public entityRegFilter?: (entity: EntityRegistryEntry) => boolean;
+
+  @property() public entityFilter?: HaEntityPickerEntityFilterFunc;
+
+  @internalProperty() private _areas?: { [areaId: string]: AreaRegistryEntry };
+
+  @internalProperty() private _devices?: {
+    [deviceId: string]: DeviceRegistryEntry;
+  };
+
+  @internalProperty() private _entities?: EntityRegistryEntry[];
+
+  @internalProperty() private _addMode?: "area_id" | "entity_id" | "device_id";
+
+  @query("#input") private _inputElement?;
+
+  public hassSubscribe(): UnsubscribeFunc[] {
+    return [
+      subscribeAreaRegistry(this.hass.connection!, (areas) => {
+        const areaLookup: { [areaId: string]: AreaRegistryEntry } = {};
+        for (const area of areas) {
+          areaLookup[area.area_id] = area;
+        }
+        this._areas = areaLookup;
+      }),
+      subscribeDeviceRegistry(this.hass.connection!, (devices) => {
+        const deviceLookup: { [deviceId: string]: DeviceRegistryEntry } = {};
+        for (const device of devices) {
+          deviceLookup[device.id] = device;
+        }
+        this._devices = deviceLookup;
+      }),
+      subscribeEntityRegistry(this.hass.connection!, (entities) => {
+        this._entities = entities;
+      }),
+    ];
+  }
+
+  protected render() {
+    if (!this._areas || !this._devices || !this._entities) {
+      return html``;
+    }
+    return html`<div class="mdc-chip-set items">
+        ${ensureArray(this.value?.area_id)?.map((area_id) => {
+          const area = this._areas![area_id];
+          return this._renderChip(
+            "area_id",
+            area_id,
+            area?.name || area_id,
+            undefined,
+            mdiSofa
+          );
+        })}
+        ${ensureArray(this.value?.device_id)?.map((device_id) => {
+          const device = this._devices![device_id];
+          return this._renderChip(
+            "device_id",
+            device_id,
+            device ? computeDeviceName(device, this.hass) : device_id,
+            undefined,
+            mdiDevices
+          );
+        })}
+        ${ensureArray(this.value?.entity_id)?.map((entity_id) => {
+          const entity = this.hass.states[entity_id];
+          return this._renderChip(
+            "entity_id",
+            entity_id,
+            entity ? computeStateName(entity) : entity_id,
+            entity ? stateIcon(entity) : undefined
+          );
+        })}
+      </div>
+      ${this._renderPicker()}
+      <div class="mdc-chip-set">
+        <div
+          class="mdc-chip area_id add"
+          .type=${"area_id"}
+          @click=${this._showPicker}
+        >
+          <div class="mdc-chip__ripple"></div>
+          <ha-svg-icon
+            class="mdc-chip__icon mdc-chip__icon--leading"
+            .path=${mdiPlus}
+          ></ha-svg-icon>
+          <span role="gridcell">
+            <span role="button" tabindex="0" class="mdc-chip__primary-action">
+              <span class="mdc-chip__text"
+                >${this.hass.localize(
+                  "ui.components.target-picker.add_area_id"
+                )}</span
+              >
+            </span>
+          </span>
+        </div>
+        <div
+          class="mdc-chip device_id add"
+          .type=${"device_id"}
+          @click=${this._showPicker}
+        >
+          <div class="mdc-chip__ripple"></div>
+          <ha-svg-icon
+            class="mdc-chip__icon mdc-chip__icon--leading"
+            .path=${mdiPlus}
+          ></ha-svg-icon>
+          <span role="gridcell">
+            <span role="button" tabindex="0" class="mdc-chip__primary-action">
+              <span class="mdc-chip__text"
+                >${this.hass.localize(
+                  "ui.components.target-picker.add_device_id"
+                )}</span
+              >
+            </span>
+          </span>
+        </div>
+        <div
+          class="mdc-chip entity_id add"
+          .type=${"entity_id"}
+          @click=${this._showPicker}
+        >
+          <div class="mdc-chip__ripple"></div>
+          <ha-svg-icon
+            class="mdc-chip__icon mdc-chip__icon--leading"
+            .path=${mdiPlus}
+          ></ha-svg-icon>
+          <span role="gridcell">
+            <span role="button" tabindex="0" class="mdc-chip__primary-action">
+              <span class="mdc-chip__text"
+                >${this.hass.localize(
+                  "ui.components.target-picker.add_entity_id"
+                )}</span
+              >
+            </span>
+          </span>
+        </div>
+      </div>`;
+  }
+
+  private async _showPicker(ev) {
+    this._addMode = ev.currentTarget.type;
+    await this.updateComplete;
+    setTimeout(() => {
+      this._inputElement?.open();
+      this._inputElement?.focus();
+    }, 0);
+  }
+
+  private _renderChip(
+    type: string,
+    id: string,
+    name: string,
+    icon?: string,
+    iconPath?: string
+  ) {
+    return html`
+      <div
+        class="mdc-chip ${classMap({
+          [type]: true,
+        })}"
+      >
+        ${iconPath
+          ? html`<ha-svg-icon
+              class="mdc-chip__icon mdc-chip__icon--leading"
+              .path=${iconPath}
+            ></ha-svg-icon>`
+          : ""}
+        ${icon
+          ? html`<ha-icon
+              class="mdc-chip__icon mdc-chip__icon--leading"
+              .icon=${icon}
+            ></ha-icon>`
+          : ""}
+        <span role="gridcell">
+          <span role="button" tabindex="0" class="mdc-chip__primary-action">
+            <span class="mdc-chip__text">${name}</span>
+          </span>
+        </span>
+        ${type === "entity_id"
+          ? ""
+          : html` <span role="gridcell">
+              <mwc-icon-button
+                class="expand-btn mdc-chip__icon mdc-chip__icon--trailing"
+                tabindex="-1"
+                role="button"
+                .label=${"Expand"}
+                .id=${id}
+                .type=${type}
+                @click=${this._handleExpand}
+              >
+                <ha-svg-icon .path=${mdiUnfoldMoreVertical}></ha-svg-icon>
+              </mwc-icon-button>
+              <paper-tooltip class="expand" animation-delay="0"
+                >${this.hass.localize(
+                  `ui.components.target-picker.expand_${type}`
+                )}</paper-tooltip
+              >
+            </span>`}
+        <span role="gridcell">
+          <mwc-icon-button
+            class="mdc-chip__icon mdc-chip__icon--trailing"
+            tabindex="-1"
+            role="button"
+            .label=${"Remove"}
+            .id=${id}
+            .type=${type}
+            @click=${this._handleRemove}
+          >
+            <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+          </mwc-icon-button>
+          <paper-tooltip animation-delay="0"
+            >${this.hass.localize(
+              `ui.components.target-picker.remove_${type}`
+            )}</paper-tooltip
+          >
+        </span>
+      </div>
+    `;
+  }
+
+  private _renderPicker() {
+    switch (this._addMode) {
+      case "area_id":
+        return html`<ha-area-picker
+          .hass=${this.hass}
+          id="input"
+          .type=${"area_id"}
+          .label=${this.hass.localize(
+            "ui.components.target-picker.add_area_id"
+          )}
+          no-add
+          .deviceFilter=${this.deviceFilter}
+          .entityFilter=${this.entityRegFilter}
+          .includeDeviceClasses=${this.includeDeviceClasses}
+          .includeDomains=${this.includeDomains}
+          @value-changed=${this._targetPicked}
+        ></ha-area-picker>`;
+      case "device_id":
+        return html`<ha-device-picker
+          .hass=${this.hass}
+          id="input"
+          .type=${"device_id"}
+          .label=${this.hass.localize(
+            "ui.components.target-picker.add_device_id"
+          )}
+          .deviceFilter=${this.deviceFilter}
+          .entityFilter=${this.entityRegFilter}
+          .includeDeviceClasses=${this.includeDeviceClasses}
+          .includeDomains=${this.includeDomains}
+          @value-changed=${this._targetPicked}
+        ></ha-device-picker>`;
+      case "entity_id":
+        return html`<ha-entity-picker
+          .hass=${this.hass}
+          id="input"
+          .type=${"entity_id"}
+          .label=${this.hass.localize(
+            "ui.components.target-picker.add_entity_id"
+          )}
+          .entityFilter=${this.entityFilter}
+          .includeDeviceClasses=${this.includeDeviceClasses}
+          .includeDomains=${this.includeDomains}
+          @value-changed=${this._targetPicked}
+        ></ha-entity-picker>`;
+    }
+    return html``;
+  }
+
+  private _targetPicked(ev) {
+    ev.stopPropagation();
+    if (!ev.detail.value) {
+      return;
+    }
+    const value = ev.detail.value;
+    const target = ev.currentTarget;
+    target.value = "";
+    this._addMode = undefined;
+    fireEvent(this, "value-changed", {
+      value: this.value
+        ? {
+            ...this.value,
+            [target.type]: this.value[target.type]
+              ? [...ensureArray(this.value[target.type]), value]
+              : value,
+          }
+        : { [target.type]: value },
+    });
+  }
+
+  private _handleExpand(ev) {
+    const target = ev.currentTarget as any;
+    const newDevices: string[] = [];
+    const newEntities: string[] = [];
+    if (target.type === "area_id") {
+      Object.values(this._devices!).forEach((device) => {
+        if (
+          device.area_id === target.id &&
+          !this.value!.device_id?.includes(device.id) &&
+          this._deviceMeetsFilter(device)
+        ) {
+          newDevices.push(device.id);
+        }
+      });
+      this._entities!.forEach((entity) => {
+        if (
+          entity.area_id === target.id &&
+          !this.value!.entity_id?.includes(entity.entity_id) &&
+          this._entityRegMeetsFilter(entity)
+        ) {
+          newEntities.push(entity.entity_id);
+        }
+      });
+    } else if (target.type === "device_id") {
+      this._entities!.forEach((entity) => {
+        if (
+          entity.device_id === target.id &&
+          !this.value!.entity_id?.includes(entity.entity_id) &&
+          this._entityRegMeetsFilter(entity)
+        ) {
+          newEntities.push(entity.entity_id);
+        }
+      });
+    } else {
+      return;
+    }
+    let value = this.value;
+    if (newEntities.length) {
+      value = this._addItems(value, "entity_id", newEntities);
+    }
+    if (newDevices.length) {
+      value = this._addItems(value, "device_id", newDevices);
+    }
+    value = this._removeItem(value, target.type, target.id);
+    fireEvent(this, "value-changed", { value });
+  }
+
+  private _handleRemove(ev) {
+    const target = ev.currentTarget as any;
+    fireEvent(this, "value-changed", {
+      value: this._removeItem(this.value, target.type, target.id),
+    });
+  }
+
+  private _addItems(
+    value: this["value"],
+    type: string,
+    ids: string[]
+  ): this["value"] {
+    return {
+      ...value,
+      [type]: value![type] ? ensureArray(value![type])!.concat(ids) : ids,
+    };
+  }
+
+  private _removeItem(
+    value: this["value"],
+    type: string,
+    id: string
+  ): this["value"] {
+    const newVal = ensureArray(value![type])!.filter((val) => val !== id);
+    if (newVal.length) {
+      return {
+        ...value,
+        [type]: newVal,
+      };
+    }
+    const val = { ...value }!;
+    delete val[type];
+    if (Object.keys(val).length) {
+      return val;
+    }
+    return undefined;
+  }
+
+  private _deviceMeetsFilter(device: DeviceRegistryEntry): boolean {
+    const devEntities = this._entities?.filter(
+      (entity) => entity.device_id === device.id
+    );
+    if (this.includeDomains) {
+      if (!devEntities || !devEntities.length) {
+        return false;
+      }
+      if (
+        !devEntities.some((entity) =>
+          this.includeDomains!.includes(computeDomain(entity.entity_id))
+        )
+      ) {
+        return false;
+      }
+    }
+
+    if (this.includeDeviceClasses) {
+      if (!devEntities || !devEntities.length) {
+        return false;
+      }
+      if (
+        !devEntities.some((entity) => {
+          const stateObj = this.hass.states[entity.entity_id];
+          if (!stateObj) {
+            return false;
+          }
+          return (
+            stateObj.attributes.device_class &&
+            this.includeDeviceClasses!.includes(
+              stateObj.attributes.device_class
+            )
+          );
+        })
+      ) {
+        return false;
+      }
+    }
+
+    if (this.deviceFilter) {
+      return this.deviceFilter(device);
+    }
+    return true;
+  }
+
+  private _entityRegMeetsFilter(entity: EntityRegistryEntry): boolean {
+    if (
+      this.includeDomains &&
+      !this.includeDomains.includes(computeDomain(entity.entity_id))
+    ) {
+      return false;
+    }
+    if (this.includeDeviceClasses) {
+      const stateObj = this.hass.states[entity.entity_id];
+      if (!stateObj) {
+        return false;
+      }
+      if (
+        !stateObj.attributes.device_class ||
+        !this.includeDeviceClasses!.includes(stateObj.attributes.device_class)
+      ) {
+        return false;
+      }
+    }
+    if (this.entityRegFilter) {
+      return this.entityRegFilter(entity);
+    }
+    return true;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      ${unsafeCSS(chipStyles)}
+      .mdc-chip {
+        color: var(--primary-text-color);
+      }
+      .items {
+        z-index: 2;
+      }
+      .mdc-chip.add {
+        color: rgba(0, 0, 0, 0.87);
+      }
+      .mdc-chip:not(.add) {
+        cursor: default;
+      }
+      .mdc-chip mwc-icon-button {
+        --mdc-icon-button-size: 24px;
+        display: flex;
+        align-items: center;
+        outline: none;
+      }
+      .mdc-chip mwc-icon-button ha-svg-icon {
+        border-radius: 50%;
+        background: var(--secondary-text-color);
+      }
+      .mdc-chip__icon.mdc-chip__icon--trailing {
+        width: 16px;
+        height: 16px;
+        --mdc-icon-size: 14px;
+        color: var(--card-background-color);
+      }
+      .mdc-chip__icon--leading {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        --mdc-icon-size: 20px;
+        border-radius: 50%;
+        padding: 6px;
+        margin-left: -14px !important;
+      }
+      .expand-btn {
+        margin-right: 0;
+      }
+      .mdc-chip.area_id:not(.add) {
+        border: 2px solid #fed6a4;
+        background: var(--card-background-color);
+      }
+      .mdc-chip.area_id:not(.add) .mdc-chip__icon--leading,
+      .mdc-chip.area_id.add {
+        background: #fed6a4;
+      }
+      .mdc-chip.device_id:not(.add) {
+        border: 2px solid #a8e1fb;
+        background: var(--card-background-color);
+      }
+      .mdc-chip.device_id:not(.add) .mdc-chip__icon--leading,
+      .mdc-chip.device_id.add {
+        background: #a8e1fb;
+      }
+      .mdc-chip.entity_id:not(.add) {
+        border: 2px solid #d2e7b9;
+        background: var(--card-background-color);
+      }
+      .mdc-chip.entity_id:not(.add) .mdc-chip__icon--leading,
+      .mdc-chip.entity_id.add {
+        background: #d2e7b9;
+      }
+      .mdc-chip:hover {
+        z-index: 5;
+      }
+      paper-tooltip.expand {
+        min-width: 200px;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-target-picker": HaTargetPicker;
+  }
+}
@@ -1,5 +1,5 @@
 import "@material/mwc-button/mwc-button";
-import "@material/mwc-fab/mwc-fab";
+import "../ha-fab";
 import "@material/mwc-list/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import { mdiArrowLeft, mdiClose, mdiPlay, mdiPlus } from "@mdi/js";
@@ -170,7 +170,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                >
                  ${this._narrow && currentItem?.can_play
                    ? html`
-                        <mwc-fab
+                        <ha-fab
                          mini
                          .item=${currentItem}
                          @click=${this._actionClicked}
@@ -185,7 +185,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                          ${this.hass.localize(
                            `ui.components.media-browser.${this.action}`
                          )}
-                        </mwc-fab>
+                        </ha-fab>
                      `
                    : ""}
                </div>
@@ -927,7 +927,7 @@ export class HaMediaPlayerBrowse extends LitElement {
          transition: width 0.4s, height 0.4s, padding-bottom 0.4s;
        }

-        mwc-fab {
+        ha-fab {
          position: absolute;
          --mdc-theme-secondary: var(--primary-color);
          bottom: -20px;
@@ -1011,7 +1011,7 @@ export class HaMediaPlayerBrowse extends LitElement {
          margin-bottom: 0;
        }

-        :host([scroll]) mwc-fab {
+        :host([scroll]) ha-fab {
          bottom: 4px;
          right: 4px;
          --mdc-fab-box-shadow: none;
@@ -6,7 +6,7 @@ import { navigate } from "../common/navigate";
 import { Context, HomeAssistant } from "../types";
 import { BlueprintInput } from "./blueprint";
 import { DeviceCondition, DeviceTrigger } from "./device_automation";
-import { Action } from "./script";
+import { Action, MODES } from "./script";

 export interface AutomationEntity extends HassEntityBase {
  attributes: HassEntityAttributeBase & {
@@ -26,7 +26,7 @@ export interface ManualAutomationConfig {
  trigger: Trigger[];
  condition?: Condition[];
  action: Action[];
-  mode?: "single" | "restart" | "queued" | "parallel";
+  mode?: typeof MODES[number];
  max?: number;
 }

@@ -17,6 +17,7 @@ export interface DeviceRegistryEntry {
  area_id?: string;
  name_by_user?: string;
  entry_type: "service" | null;
+  disabled_by: string | null;
 }

 export interface DeviceEntityLookup {
@@ -26,6 +27,7 @@ export interface DeviceEntityLookup {
 export interface DeviceRegistryEntryMutableParams {
  area_id?: string | null;
  name_by_user?: string | null;
+  disabled_by?: string | null;
 }

 export const fallbackDeviceName = (
@@ -10,6 +10,7 @@ export interface EntityRegistryEntry {
  platform: string;
  config_entry_id?: string;
  device_id?: string;
+  area_id?: string;
  disabled_by: string | null;
 }

@@ -29,6 +30,7 @@ export interface UpdateEntityRegistryEntryResult {
 export interface EntityRegistryEntryUpdateParams {
  name?: string | null;
  icon?: string | null;
+  area_id?: string | null;
  disabled_by?: string | null;
  new_entity_id?: string;
 }
@@ -124,13 +124,17 @@ export const getLogbookMessage = (
  switch (domain) {
    case "device_tracker":
    case "person":
-      return state === "not_home"
-        ? hass.localize(`${LOGBOOK_LOCALIZE_PATH}.was_away`)
-        : hass.localize(
-            `${LOGBOOK_LOCALIZE_PATH}.was_at_state`,
-            "state",
-            state
-          );
+      if (state === "not_home") {
+        return hass.localize(`${LOGBOOK_LOCALIZE_PATH}.was_away`);
+      }
+      if (state === "home") {
+        return hass.localize(`${LOGBOOK_LOCALIZE_PATH}.was_at_home`);
+      }
+      return hass.localize(
+        `${LOGBOOK_LOCALIZE_PATH}.was_at_state`,
+        "state",
+        state
+      );

    case "sun":
      return state === "above_horizon"
@@ -148,6 +148,11 @@ export interface CustomActionConfig extends BaseActionConfig {
  action: "fire-dom-event";
 }

+export interface MultipleActionConfig extends BaseActionConfig {
+  action: "multiple";
+  actions: ActionConfig[];
+}
+
 export interface BaseActionConfig {
  confirmation?: ConfirmationRestrictionConfig;
 }
@@ -168,7 +173,8 @@ export type ActionConfig =
  | UrlActionConfig
  | MoreInfoActionConfig
  | NoActionConfig
-  | CustomActionConfig;
+  | CustomActionConfig
+  | MultipleActionConfig;

 type LovelaceUpdatedEvent = HassEventBase & {
  event_type: "lovelace_updated";
@@ -7,13 +7,13 @@ import { navigate } from "../common/navigate";
 import { HomeAssistant } from "../types";
 import { Condition, Trigger } from "./automation";

-export const MODES = ["single", "restart", "queued", "parallel"];
+export const MODES = ["single", "restart", "queued", "parallel"] as const;
 export const MODES_MAX = ["queued", "parallel"];

 export interface ScriptEntity extends HassEntityBase {
  attributes: HassEntityAttributeBase & {
    last_triggered: string;
-    mode: "single" | "restart" | "queued" | "parallel";
+    mode: typeof MODES[number];
    current?: number;
    max?: number;
  };
@@ -23,7 +23,7 @@ export interface ScriptConfig {
  alias: string;
  sequence: Action[];
  icon?: string;
-  mode?: "single" | "restart" | "queued" | "parallel";
+  mode?: typeof MODES[number];
  max?: number;
 }

@@ -2,9 +2,11 @@ export type Selector =
  | EntitySelector
  | DeviceSelector
  | AreaSelector
+  | TargetSelector
  | NumberSelector
  | BooleanSelector
-  | TimeSelector;
+  | TimeSelector
+  | ActionSelector;

 export interface EntitySelector {
  entity: {
@@ -19,13 +21,41 @@ export interface DeviceSelector {
    integration?: string;
    manufacturer?: string;
    model?: string;
-    entity?: EntitySelector["entity"];
+    entity?: {
+      domain?: EntitySelector["entity"]["domain"];
+      device_class?: EntitySelector["entity"]["device_class"];
+    };
  };
 }

 export interface AreaSelector {
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  area: {};
+  area: {
+    entity?: {
+      integration?: EntitySelector["entity"]["integration"];
+      domain?: EntitySelector["entity"]["domain"];
+      device_class?: EntitySelector["entity"]["device_class"];
+    };
+    device?: {
+      integration?: DeviceSelector["device"]["integration"];
+      manufacturer?: DeviceSelector["device"]["manufacturer"];
+      model?: DeviceSelector["device"]["model"];
+    };
+  };
+}
+
+export interface TargetSelector {
+  target: {
+    entity?: {
+      integration?: EntitySelector["entity"]["integration"];
+      domain?: EntitySelector["entity"]["domain"];
+      device_class?: EntitySelector["entity"]["device_class"];
+    };
+    device?: {
+      integration?: DeviceSelector["device"]["integration"];
+      manufacturer?: DeviceSelector["device"]["manufacturer"];
+      model?: DeviceSelector["device"]["model"];
+    };
+  };
 }

 export interface NumberSelector {
@@ -47,3 +77,8 @@ export interface TimeSelector {
  // eslint-disable-next-line @typescript-eslint/ban-types
  time: {};
 }
+
+export interface ActionSelector {
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  action: {};
+}
@@ -38,3 +38,12 @@ export const addItem = (
    type: "shopping_list/items/add",
    name,
  });
+
+export const reorderItems = (
+  hass: HomeAssistant,
+  itemIds: [string]
+): Promise<ShoppingListItem> =>
+  hass.callWS({
+    type: "shopping_list/items/reorder",
+    item_ids: itemIds,
+  });
@@ -0,0 +1,5 @@
+export interface Target {
+  entity_id?: string[];
+  device_id?: string[];
+  area_id?: string[];
+}
@@ -9,6 +9,7 @@ export const GROUPS = [SYSTEM_GROUP_ID_USER, SYSTEM_GROUP_ID_ADMIN];

 export interface User {
  id: string;
+  username: string | null;
  name: string;
  is_owner: boolean;
  is_active: boolean;
@@ -19,6 +20,7 @@ export interface User {

 export interface UpdateUserParams {
  name?: User["name"];
+  is_active?: User["is_active"];
  group_ids?: User["group_ids"];
 }

@@ -27,6 +27,7 @@ export interface ZHADevice {
  device_type: string;
  signature: any;
  neighbors: Neighbor[];
+  pairing_status?: string;
 }

 export interface Neighbor {
@@ -270,3 +271,23 @@ export const addGroup = (
    group_name: groupName,
    members: membersToAdd,
  });
+
+export const INITIALIZED = "INITIALIZED";
+export const INTERVIEW_COMPLETE = "INTERVIEW_COMPLETE";
+export const CONFIGURED = "CONFIGURED";
+export const PAIRED = "PAIRED";
+export const INCOMPLETE_PAIRING_STATUSES = [
+  PAIRED,
+  CONFIGURED,
+  INTERVIEW_COMPLETE,
+];
+
+export const DEVICE_JOINED = "device_joined";
+export const RAW_DEVICE_INITIALIZED = "raw_device_initialized";
+export const DEVICE_FULLY_INITIALIZED = "device_fully_initialized";
+export const DEVICE_MESSAGE_TYPES = [
+  DEVICE_JOINED,
+  RAW_DEVICE_INITIALIZED,
+  DEVICE_FULLY_INITIALIZED,
+];
+export const LOG_OUTPUT = "log_output";
@@ -17,17 +17,17 @@ import "../../components/ha-switch";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { haStyleDialog } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
-import { DialogParams } from "./show-dialog-box";
+import { DialogBoxParams } from "./show-dialog-box";

@customElement("dialog-box")
 class DialogBox extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;

-  @internalProperty() private _params?: DialogParams;
+  @internalProperty() private _params?: DialogBoxParams;

  @internalProperty() private _value?: string;

-  public async showDialog(params: DialogParams): Promise<void> {
+  public async showDialog(params: DialogBoxParams): Promise<void> {
    this._params = params;
    if (params.prompt) {
      this._value = params.defaultValue;
@@ -55,8 +55,8 @@ class DialogBox extends LitElement {
    return html`
      <ha-dialog
        open
-        ?scrimClickAction=${this._params.prompt}
-        ?escapeKeyAction=${this._params.prompt}
+        ?scrimClickAction=${confirmPrompt}
+        ?escapeKeyAction=${confirmPrompt}
        @closed=${this._dialogClosed}
        defaultAction="ignore"
        .heading=${this._params.title
@@ -140,10 +140,10 @@ class DialogBox extends LitElement {
  }

  private _dialogClosed(ev) {
-    if (ev.detail.action === "ignore") {
+    if (this._params?.prompt && ev.detail.action === "ignore") {
      return;
    }
-    this.closeDialog();
+    this._dismiss();
  }

  private _close(): void {
@@ -1,31 +1,31 @@
 import { TemplateResult } from "lit-html";
 import { fireEvent } from "../../common/dom/fire_event";

-interface BaseDialogParams {
+interface BaseDialogBoxParams {
  confirmText?: string;
  text?: string | TemplateResult;
  title?: string;
  warning?: boolean;
 }

-export interface AlertDialogParams extends BaseDialogParams {
+export interface AlertDialogParams extends BaseDialogBoxParams {
  confirm?: () => void;
 }

-export interface ConfirmationDialogParams extends BaseDialogParams {
+export interface ConfirmationDialogParams extends BaseDialogBoxParams {
  dismissText?: string;
  confirm?: () => void;
  cancel?: () => void;
 }

-export interface PromptDialogParams extends BaseDialogParams {
+export interface PromptDialogParams extends BaseDialogBoxParams {
  inputLabel?: string;
  inputType?: string;
  defaultValue?: string;
  confirm?: (out?: string) => void;
 }

-export interface DialogParams
+export interface DialogBoxParams
  extends ConfirmationDialogParams,
    PromptDialogParams {
  confirm?: (out?: string) => void;
@@ -37,10 +37,10 @@ export const loadGenericDialog = () => import("./dialog-box");

 const showDialogHelper = (
  element: HTMLElement,
-  dialogParams: DialogParams,
+  dialogParams: DialogBoxParams,
  extra?: {
-    confirmation?: DialogParams["confirmation"];
-    prompt?: DialogParams["prompt"];
+    confirmation?: DialogBoxParams["confirmation"];
+    prompt?: DialogBoxParams["prompt"];
  }
 ) =>
  new Promise((resolve) => {
@@ -10,6 +10,7 @@ import {
  TemplateResult,
 } from "lit-element";
 import { HomeAssistant } from "../../../types";
+import { UNAVAILABLE_STATES } from "../../../data/entity";

@customElement("more-info-counter")
 class MoreInfoCounter extends LitElement {
@@ -22,21 +23,29 @@ class MoreInfoCounter extends LitElement {
      return html``;
    }

+    const disabled = UNAVAILABLE_STATES.includes(this.stateObj!.state);
+
    return html`
      <div class="actions">
        <mwc-button
          .action="${"increment"}"
-          @click="${this._handleActionClick}"
+          @click=${this._handleActionClick}
+          .disabled=${disabled}
        >
          ${this.hass!.localize("ui.card.counter.actions.increment")}
        </mwc-button>
        <mwc-button
          .action="${"decrement"}"
-          @click="${this._handleActionClick}"
+          @click=${this._handleActionClick}
+          .disabled=${disabled}
        >
          ${this.hass!.localize("ui.card.counter.actions.decrement")}
        </mwc-button>
-        <mwc-button .action="${"reset"}" @click="${this._handleActionClick}">
+        <mwc-button
+          .action="${"reset"}"
+          @click=${this._handleActionClick}
+          .disabled=${disabled}
+        >
          ${this.hass!.localize("ui.card.counter.actions.reset")}
        </mwc-button>
      </div>
@@ -53,8 +62,7 @@ class MoreInfoCounter extends LitElement {
  static get styles(): CSSResult {
    return css`
      .actions {
-        margin: 0;
-        padding-top: 20px;
+        margin: 8px 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
@@ -75,7 +75,7 @@ class MoreInfoPerson extends LitElement {
        justify-content: space-between;
      }
      .actions {
-        margin: 36px 0 8px 0;
+        margin: 8px 0;
        text-align: right;
      }
      ha-map {
@@ -44,7 +44,7 @@ class MoreInfoSun extends LitElement {
              >
              <ha-relative-time
                .hass=${this.hass}
-                .datetimeObj=${item === "ris" ? risingDate : settingDate}
+                .datetime=${item === "ris" ? risingDate : settingDate}
              ></ha-relative-time>
            </div>
            <div class="value">
@@ -80,6 +80,7 @@ class MoreInfoSun extends LitElement {
      }
      ha-relative-time {
        display: inline-block;
+        white-space: nowrap;
      }
      ha-relative-time::first-letter {
        text-transform: lowercase;
@@ -76,8 +76,7 @@ class MoreInfoTimer extends LitElement {
  static get styles(): CSSResult {
    return css`
      .actions {
-        margin: 0;
-        padding-top: 20px;
+        margin: 8px 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
@@ -46,7 +46,7 @@ export class HuiNotificationItemTemplate extends LitElement {
      }

      .actions {
-        border-top: 1px solid #e8e8e8;
+        border-top: 1px solid var(--divider-color, #e8e8e8);
        padding: 5px 16px;
      }

@@ -42,7 +42,7 @@
      #ha-init-skeleton::before {
        display: block;
        content: "";
-        height: 112px;
+        height: 56px;
        background-color: #THEMEC;
      }
      html {
@@ -60,6 +60,12 @@ export class HaTabsSubpageDataTable extends LitElement {
   */
  @property({ type: Boolean }) public hasFab = false;

+  /**
+   * Add an extra row at the bottom of the data table
+   * @type {TemplateResult}
+   */
+  @property({ attribute: false }) public appendRow?;
+
  /**
   * Field with a unique id per entry in data.
   * @type {String}
@@ -171,6 +177,7 @@ export class HaTabsSubpageDataTable extends LitElement {
          .noDataText=${this.noDataText}
          .dir=${computeRTLDirection(this.hass)}
          .clickable=${this.clickable}
+          .appendRow=${this.appendRow}
        >
          ${!this.narrow
            ? html`
@@ -17,6 +17,7 @@ import { PolymerChangedEvent } from "../../../polymer-types";
 import { haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import { AreaRegistryDetailDialogParams } from "./show-dialog-area-registry-detail";
+import { navigate } from "../../../common/navigate";

 class DialogAreaDetail extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
@@ -154,6 +155,8 @@ class DialogAreaDetail extends LitElement {
    } finally {
      this._submitting = false;
    }
+
+    navigate(this, "/config/areas/dashboard");
  }

  static get styles(): CSSResult[] {
@@ -1,4 +1,4 @@
-import "@material/mwc-fab";
+import "../../../components/ha-fab";
 import { mdiPlus } from "@mdi/js";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-item/paper-item-body";
@@ -124,7 +124,7 @@ export class HaConfigAreasDashboard extends LitElement {
          icon="hass:help-circle"
          @click=${this._showHelp}
        ></ha-icon-button>
-        <mwc-fab
+        <ha-fab
          slot="fab"
          .label=${this.hass.localize(
            "ui.panel.config.areas.picker.create_area"
@@ -133,7 +133,7 @@ export class HaConfigAreasDashboard extends LitElement {
          @click=${this._createArea}
        >
          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
-        </mwc-fab>
+        </ha-fab>
      </hass-tabs-subpage-data-table>
    `;
  }
@@ -15,12 +15,14 @@ import {
  LitElement,
  property,
  PropertyValues,
+  query,
 } from "lit-element";
 import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
 import "../../../../components/ha-svg-icon";
+import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
 import type { Action } from "../../../../data/script";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../resources/styles";
@@ -103,6 +105,8 @@ export default class HaAutomationActionRow extends LitElement {

  @internalProperty() private _yamlMode = false;

+  @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
+
  protected updated(changedProperties: PropertyValues) {
    if (!changedProperties.has("action")) {
      return;
@@ -111,6 +115,10 @@ export default class HaAutomationActionRow extends LitElement {
    if (!this._uiModeAvailable && !this._yamlMode) {
      this._yamlMode = true;
    }
+
+    if (this._yamlMode && this._yamlEditor) {
+      this._yamlEditor.setValue(this.action);
+    }
  }

  protected render() {
@@ -187,7 +195,7 @@ export default class HaAutomationActionRow extends LitElement {
                <ul>
                  ${this._warnings.map((warning) => html`<li>${warning}</li>`)}
                </ul>
-                You can still edit your config in yaml.
+                You can still edit your config in YAML.
              </div>`
            : ""}
          ${yamlMode
@@ -19,12 +19,12 @@ import type { HaYamlEditor } from "../../../../../components/ha-yaml-editor";
 import { ServiceAction } from "../../../../../data/script";
 import type { PolymerChangedEvent } from "../../../../../polymer-types";
 import type { HomeAssistant } from "../../../../../types";
-import { EntityId } from "../../../../lovelace/common/structs/is-entity-id";
+import { EntityIdOrAll } from "../../../../lovelace/common/structs/is-entity-id";
 import { ActionElement, handleChangeEvent } from "../ha-automation-action-row";

 const actionStruct = object({
  service: optional(string()),
-  entity_id: optional(EntityId),
+  entity_id: optional(EntityIdOrAll),
  data: optional(any()),
 });

@@ -39,7 +39,7 @@ export class HaWaitForTriggerAction extends LitElement
        )}
      >
        <ha-switch
-          .checked=${continue_on_timeout}
+          .checked=${continue_on_timeout ?? true}
          @change=${this._continueChanged}
        ></ha-switch>
      </ha-formfield>
@@ -18,13 +18,9 @@ import "@polymer/paper-input/paper-textarea";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
 import "../../../components/entity/ha-entity-toggle";
 import "@material/mwc-button/mwc-button";
-import "./trigger/ha-automation-trigger";
-import "./condition/ha-automation-condition";
-import "./action/ha-automation-action";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { haStyle } from "../../../resources/styles";
 import { HassEntity } from "home-assistant-js-websocket";
-import { navigate } from "../../../common/navigate";
 import {
  BlueprintOrError,
  Blueprints,
@@ -63,7 +59,7 @@ export class HaBlueprintAutomationEditor extends LitElement {

  protected render() {
    const blueprint = this._blueprint;
-    return html`<ha-config-section .isWide=${this.isWide}>
+    return html`<ha-config-section vertical .isWide=${this.isWide}>
        ${!this.narrow
          ? html` <span slot="header">${this.config.alias}</span> `
          : ""}
@@ -119,7 +115,7 @@ export class HaBlueprintAutomationEditor extends LitElement {
        </ha-card>
      </ha-config-section>

-      <ha-config-section .isWide=${this.isWide}>
+      <ha-config-section vertical .isWide=${this.isWide}>
        <span slot="header"
          >${this.hass.localize(
            "ui.panel.config.automation.editor.blueprint.header"
@@ -144,11 +140,6 @@ export class HaBlueprintAutomationEditor extends LitElement {
                    "ui.panel.config.automation.editor.blueprint.no_blueprints"
                  )
              : html`<ha-circular-progress active></ha-circular-progress>`}
-            <mwc-button @click=${this._navigateBlueprints}>
-              ${this.hass.localize(
-                "ui.panel.config.automation.editor.blueprint.manage_blueprints"
-              )}
-            </mwc-button>
          </div>

          ${this.config.use_blueprint.path
@@ -157,41 +148,37 @@ export class HaBlueprintAutomationEditor extends LitElement {
                  There is an error in this Blueprint: ${blueprint.error}
                </p>`
              : html`${blueprint?.metadata.description
-                  ? html`<p>${blueprint.metadata.description}</p>`
+                  ? html`<p class="card-content pre-line">
+                      ${blueprint.metadata.description}
+                    </p>`
                  : ""}
                ${blueprint?.metadata?.input &&
                Object.keys(blueprint.metadata.input).length
-                  ? html`<h3>
-                        ${this.hass.localize(
-                          "ui.panel.config.automation.editor.blueprint.inputs"
-                        )}
-                      </h3>
-                      ${Object.entries(blueprint.metadata.input).map(
-                        ([key, value]) =>
-                          html`<ha-settings-row .narrow=${this.narrow}>
-                            <span slot="heading">${value?.name || key}</span>
-                            <span slot="description"
-                              >${value?.description}</span
-                            >
-                            ${value?.selector
-                              ? html`<ha-selector
-                                  .hass=${this.hass}
-                                  .selector=${value.selector}
-                                  .key=${key}
-                                  .value=${(this.config.use_blueprint.input &&
-                                    this.config.use_blueprint.input[key]) ||
-                                  value?.default}
-                                  @value-changed=${this._inputChanged}
-                                ></ha-selector>`
-                              : html`<paper-input
-                                  .key=${key}
-                                  .value=${this.config.use_blueprint.input &&
-                                  this.config.use_blueprint.input[key]}
-                                  @value-changed=${this._inputChanged}
-                                  no-label-float
-                                ></paper-input>`}
-                          </ha-settings-row>`
-                      )}`
+                  ? Object.entries(blueprint.metadata.input).map(
+                      ([key, value]) =>
+                        html`<ha-settings-row .narrow=${this.narrow}>
+                          <span slot="heading">${value?.name || key}</span>
+                          <span slot="description">${value?.description}</span>
+                          ${value?.selector
+                            ? html`<ha-selector
+                                .hass=${this.hass}
+                                .selector=${value.selector}
+                                .key=${key}
+                                .value=${(this.config.use_blueprint.input &&
+                                  this.config.use_blueprint.input[key]) ??
+                                value?.default}
+                                @value-changed=${this._inputChanged}
+                              ></ha-selector>`
+                            : html`<paper-input
+                                .key=${key}
+                                required
+                                .value=${this.config.use_blueprint.input &&
+                                this.config.use_blueprint.input[key]}
+                                @value-changed=${this._inputChanged}
+                                no-label-float
+                              ></paper-input>`}
+                        </ha-settings-row>`
+                    )
                  : html`<p class="padding">
                      ${this.hass.localize(
                        "ui.panel.config.automation.editor.blueprint.no_inputs"
@@ -237,12 +224,18 @@ export class HaBlueprintAutomationEditor extends LitElement {
    ) {
      return;
    }
+    const input = { ...this.config.use_blueprint.input, [key]: value };
+
+    if (value === "" || value === undefined) {
+      delete input[key];
+    }
+
    fireEvent(this, "value-changed", {
      value: {
        ...this.config!,
        use_blueprint: {
          ...this.config.use_blueprint,
-          input: { ...this.config.use_blueprint.input, [key]: value },
+          input,
        },
      },
    });
@@ -267,33 +260,18 @@ export class HaBlueprintAutomationEditor extends LitElement {
    });
  }

-  private _navigateBlueprints() {
-    navigate(this, "/config/blueprint");
-  }
-
  static get styles(): CSSResult[] {
    return [
      haStyle,
      css`
-        ha-card {
-          overflow: hidden;
-        }
-        .errors {
-          padding: 20px;
-          font-weight: bold;
-          color: var(--error-color);
-        }
        .padding {
          padding: 16px;
        }
-        .content {
-          padding-bottom: 20px;
+        .pre-line {
+          white-space: pre-line;
        }
        .blueprint-picker-container {
          padding: 16px;
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
        }
        h3 {
          margin: 16px;
@@ -312,24 +290,10 @@ export class HaBlueprintAutomationEditor extends LitElement {
          border-top: 1px solid var(--divider-color);
        }
        :host(:not([narrow])) ha-settings-row paper-input {
-          width: 50%;
+          width: 60%;
        }
        :host(:not([narrow])) ha-settings-row ha-selector {
-          width: 50%;
-        }
-        mwc-fab {
-          position: relative;
-          bottom: calc(-80px - env(safe-area-inset-bottom));
-          transition: bottom 0.3s;
-        }
-        mwc-fab.dirty {
-          bottom: 0;
-        }
-        .selected_menu_item {
-          color: var(--primary-color);
-        }
-        li[role="separator"] {
-          border-bottom-color: var(--divider-color);
+          width: 60%;
        }
      `,
    ];
@@ -1,4 +1,4 @@
-import "@material/mwc-fab";
+import "../../../components/ha-fab";
 import {
  mdiCheck,
  mdiContentDuplicate,
@@ -32,6 +32,7 @@ import "../../../components/ha-svg-icon";
 import "../../../components/ha-yaml-editor";
 import { showToast } from "../../../util/toast";
 import type { HaYamlEditor } from "../../../components/ha-yaml-editor";
+import { copyToClipboard } from "../../../common/util/copy-clipboard";
 import {
  AutomationConfig,
  AutomationEntity,
@@ -206,6 +207,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                        ? html`<blueprint-automation-editor
                            .hass=${this.hass}
                            .narrow=${this.narrow}
+                            .isWide=${this.isWide}
                            .stateObj=${stateObj}
                            .config=${this._config}
                            @value-changed=${this._valueChanged}
@@ -213,6 +215,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
                        : html`<manual-automation-editor
                            .hass=${this.hass}
                            .narrow=${this.narrow}
+                            .isWide=${this.isWide}
                            .stateObj=${stateObj}
                            .config=${this._config}
                            @value-changed=${this._valueChanged}
@@ -271,7 +274,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
              </div>
            `
          : ""}
-        <mwc-fab
+        <ha-fab
          slot="fab"
          class=${classMap({ dirty: this._dirty })}
          .label=${this.hass.localize("ui.panel.config.automation.editor.save")}
@@ -279,7 +282,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
          @click=${this._saveAutomation}
        >
          <ha-svg-icon slot="icon" .path=${mdiContentSave}></ha-svg-icon>
-        </mwc-fab>
+        </ha-fab>
      </hass-tabs-subpage>
    `;
  }
@@ -392,9 +395,12 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
    return cleanConfig;
  }

-  private async _copyYaml() {
+  private async _copyYaml(): Promise<void> {
    if (this._editor?.yaml) {
-      navigator.clipboard.writeText(this._editor.yaml);
+      await copyToClipboard(this._editor.yaml);
+      showToast(this, {
+        message: this.hass.localize("ui.common.copied_clipboard"),
+      });
    }
  }

@@ -524,21 +530,18 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
        .content {
          padding-bottom: 20px;
        }
-        span[slot="introduction"] a {
-          color: var(--primary-color);
-        }
        p {
          margin-bottom: 0;
        }
        ha-entity-toggle {
          margin-right: 8px;
        }
-        mwc-fab {
+        ha-fab {
          position: relative;
          bottom: calc(-80px - env(safe-area-inset-bottom));
          transition: bottom 0.3s;
        }
-        mwc-fab.dirty {
+        ha-fab.dirty {
          bottom: 0;
        }
        .selected_menu_item {
@@ -1,4 +1,4 @@
-import "@material/mwc-fab";
+import "../../../components/ha-fab";
 import "@material/mwc-icon-button";
 import { mdiPlus, mdiHelpCircle } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
@@ -170,7 +170,7 @@ class HaAutomationPicker extends LitElement {
        <mwc-icon-button slot="toolbar-icon" @click=${this._showHelp}>
          <ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
        </mwc-icon-button>
-        <mwc-fab
+        <ha-fab
          slot="fab"
          .label=${this.hass.localize(
            "ui.panel.config.automation.picker.add_automation"
@@ -179,7 +179,7 @@ class HaAutomationPicker extends LitElement {
          @click=${this._createNew}
        >
          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
-        </mwc-fab>
+        </ha-fab>
      </hass-tabs-subpage-data-table>
    `;
  }
@@ -309,14 +309,6 @@ export class HaManualAutomationEditor extends LitElement {
        ha-card {
          overflow: hidden;
        }
-        .errors {
-          padding: 20px;
-          font-weight: bold;
-          color: var(--error-color);
-        }
-        .content {
-          padding-bottom: 20px;
-        }
        span[slot="introduction"] a {
          color: var(--primary-color);
        }
@@ -326,20 +318,6 @@ export class HaManualAutomationEditor extends LitElement {
        ha-entity-toggle {
          margin-right: 8px;
        }
-        mwc-fab {
-          position: relative;
-          bottom: calc(-80px - env(safe-area-inset-bottom));
-          transition: bottom 0.3s;
-        }
-        mwc-fab.dirty {
-          bottom: 0;
-        }
-        .selected_menu_item {
-          color: var(--primary-color);
-        }
-        li[role="separator"] {
-          border-bottom-color: var(--divider-color);
-        }
      `,
    ];
  }
@@ -4,7 +4,6 @@ import "@polymer/paper-input/paper-input";
 import type { PaperInputElement } from "@polymer/paper-input/paper-input";
 import "../../../components/ha-circular-progress";
 import {
-  css,
  CSSResult,
  customElement,
  html,
@@ -13,6 +12,7 @@ import {
  internalProperty,
  query,
  TemplateResult,
+  css,
 } from "lit-element";
 import "../../../components/ha-dialog";
 import { haStyleDialog } from "../../../resources/styles";
@@ -74,7 +74,9 @@ class DialogImportBlueprint extends LitElement {
                  this._result.blueprint.metadata.domain
                )}
                <br />
-                ${this._result.blueprint.metadata.description}
+                <p class="pre-line">
+                  ${this._result.blueprint.metadata.description}
+                </p>
                ${this._result.validation_errors
                  ? html`
                      <p class="error">
@@ -97,16 +99,24 @@ class DialogImportBlueprint extends LitElement {
                        )}
                      ></paper-input>
                    `}
-                <ha-expansion-panel>
-                  <span slot="title"
-                    >${this.hass.localize(
-                      "ui.panel.config.blueprint.add.raw_blueprint"
-                    )}</span
-                  >
+                <ha-expansion-panel
+                  .header=${this.hass.localize(
+                    "ui.panel.config.blueprint.add.raw_blueprint"
+                  )}
+                >
                  <pre>${this._result.raw_data}</pre>
                </ha-expansion-panel>`
            : html`${this.hass.localize(
-                  "ui.panel.config.blueprint.add.import_introduction"
+                  "ui.panel.config.blueprint.add.import_introduction_link",
+                  "community_link",
+                  html`<a
+                    href="https://www.home-assistant.io/get-blueprints"
+                    target="_blank"
+                    rel="noreferrer noopener"
+                    >${this.hass.localize(
+                      "ui.panel.config.blueprint.add.community_forums"
+                    )}</a
+                  >`
                )}<paper-input
                  id="input"
                  .label=${this.hass.localize(
@@ -205,8 +215,8 @@ class DialogImportBlueprint extends LitElement {
    return [
      haStyleDialog,
      css`
-        ha-expansion-panel {
-          --expansion-panel-summary-padding: 0;
+        .pre-line {
+          white-space: pre-line;
        }
      `,
    ];
@@ -1,6 +1,6 @@
-import "@material/mwc-fab";
+import "../../../components/ha-fab";
 import "@material/mwc-icon-button";
-import { mdiPlus, mdiHelpCircle, mdiDelete, mdiRobot } from "@mdi/js";
+import { mdiHelpCircle, mdiDelete, mdiRobot, mdiDownload } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
  CSSResult,
@@ -112,7 +112,6 @@ class HaBlueprintOverview extends LitElement {
      create: {
        title: "",
        type: narrow ? "icon-button" : undefined,
-        width: narrow ? undefined : "180px",
        template: (_, blueprint: any) =>
          blueprint.error
            ? ""
@@ -126,8 +125,9 @@ class HaBlueprintOverview extends LitElement {
                  "ui.panel.config.blueprint.overview.use_blueprint"
                )}
                @click=${(ev) => this._createNew(ev)}
-                ><ha-svg-icon .path=${mdiRobot}></ha-svg-icon
-              ></mwc-icon-button>`
+              >
+                <ha-svg-icon .path=${mdiRobot}></ha-svg-icon>
+              </mwc-icon-button>`
            : html`<mwc-button
                .blueprint=${blueprint}
                @click=${(ev) => this._createNew(ev)}
@@ -170,11 +170,28 @@ class HaBlueprintOverview extends LitElement {
          "ui.panel.config.blueprint.overview.no_blueprints"
        )}
        hasFab
+        .appendRow=${html` <div
+          class="mdc-data-table__cell"
+          style="width: 100%; text-align: center;"
+          role="cell"
+        >
+          <a
+            href="https://www.home-assistant.io/get-blueprints"
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            <mwc-button
+              >${this.hass.localize(
+                "ui.panel.config.blueprint.overview.discover_more"
+              )}</mwc-button
+            >
+          </a>
+        </div>`}
      >
        <mwc-icon-button slot="toolbar-icon" @click=${this._showHelp}>
          <ha-svg-icon .path=${mdiHelpCircle}></ha-svg-icon>
        </mwc-icon-button>
-        <mwc-fab
+        <ha-fab
          slot="fab"
          .label=${this.hass.localize(
            "ui.panel.config.blueprint.overview.add_blueprint"
@@ -182,8 +199,8 @@ class HaBlueprintOverview extends LitElement {
          extended
          @click=${this._addBlueprint}
        >
-          <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
-        </mwc-fab>
+          <ha-svg-icon slot="icon" .path=${mdiDownload}></ha-svg-icon>
+        </ha-fab>
      </hass-tabs-subpage-data-table>
    `;
  }
@@ -195,7 +212,10 @@ class HaBlueprintOverview extends LitElement {
        ${this.hass.localize("ui.panel.config.blueprint.overview.introduction")}
        <p>
          <a
-            href="${documentationUrl(this.hass, "/docs/blueprint/editor/")}"
+            href="${documentationUrl(
+              this.hass,
+              "/docs/automation/using_blueprints/"
+            )}"
            target="_blank"
            rel="noreferrer"
          >
@@ -92,7 +92,7 @@ class HaConfigCustomize extends LocalizeMixin(PolymerElement) {
  }

  _computeTabs() {
-    return configSections.general;
+    return configSections.advanced;
  }

  computeEntities(hass) {
@@ -8,7 +8,6 @@ import {
  html,
  LitElement,
  property,
-  internalProperty,
  PropertyValues,
  TemplateResult,
 } from "lit-element";
@@ -31,7 +30,7 @@ export class HaDeviceEntitiesCard extends LitElement {

  @property() public entities!: EntityRegistryStateEntry[];

-  @internalProperty() private _showDisabled = false;
+  @property() public showDisabled = false;

  private _entityRows: Array<LovelaceRow | HuiErrorCard> = [];

@@ -68,7 +67,7 @@ export class HaDeviceEntitiesCard extends LitElement {
                })}
              </div>
              ${disabledEntities.length
-                ? !this._showDisabled
+                ? !this.showDisabled
                  ? html`
                      <button
                        class="show-more"
@@ -119,7 +118,7 @@ export class HaDeviceEntitiesCard extends LitElement {
  }

  private _toggleShowDisabled() {
-    this._showDisabled = !this._showDisabled;
+    this.showDisabled = !this.showDisabled;
  }

  private _renderEntity(entry: EntityRegistryStateEntry): TemplateResult {
@@ -227,3 +226,9 @@ export class HaDeviceEntitiesCard extends LitElement {
    `;
  }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-device-entities-card": HaDeviceEntitiesCard;
+  }
+}
@@ -12,7 +12,7 @@ import {
  computeDeviceName,
  DeviceRegistryEntry,
 } from "../../../../data/device_registry";
-import { loadDeviceRegistryDetailDialog } from "../../../../dialogs/device-registry-detail/show-dialog-device-registry-detail";
+import { loadDeviceRegistryDetailDialog } from "../device-registry-detail/show-dialog-device-registry-detail";
 import { HomeAssistant } from "../../../../types";

@customElement("ha-device-info-card")
@@ -3,8 +3,8 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
-import "../../components/ha-dialog";
-import "../../components/ha-area-picker";
+import "../../../../components/ha-dialog";
+import "../../../../components/ha-area-picker";

 import {
  CSSResult,
@@ -18,11 +18,12 @@ import {
 } from "lit-element";

 import { DeviceRegistryDetailDialogParams } from "./show-dialog-device-registry-detail";
-import { HomeAssistant } from "../../types";
-import { PolymerChangedEvent } from "../../polymer-types";
-import { computeDeviceName } from "../../data/device_registry";
-import { fireEvent } from "../../common/dom/fire_event";
-import { haStyleDialog } from "../../resources/styles";
+import { HomeAssistant } from "../../../../types";
+import type { HaSwitch } from "../../../../components/ha-switch";
+import { PolymerChangedEvent } from "../../../../polymer-types";
+import { computeDeviceName } from "../../../../data/device_registry";
+import { fireEvent } from "../../../../common/dom/fire_event";
+import { haStyle, haStyleDialog } from "../../../../resources/styles";

@customElement("dialog-device-registry-detail")
 class DialogDeviceRegistryDetail extends LitElement {
@@ -36,6 +37,8 @@ class DialogDeviceRegistryDetail extends LitElement {

  @internalProperty() private _areaId?: string;

+  @internalProperty() private _disabledBy!: string | null;
+
  @internalProperty() private _submitting?: boolean;

  public async showDialog(
@@ -45,6 +48,7 @@ class DialogDeviceRegistryDetail extends LitElement {
    this._error = undefined;
    this._nameByUser = this._params.device.name_by_user || "";
    this._areaId = this._params.device.area_id;
+    this._disabledBy = this._params.device.disabled_by;
    await this.updateComplete;
  }

@@ -80,6 +84,32 @@ class DialogDeviceRegistryDetail extends LitElement {
              .value=${this._areaId}
              @value-changed=${this._areaPicked}
            ></ha-area-picker>
+            <div class="row">
+              <ha-switch
+                .checked=${!this._disabledBy}
+                @change=${this._disabledByChanged}
+              >
+              </ha-switch>
+              <div>
+                <div>
+                  ${this.hass.localize("ui.panel.config.devices.enabled_label")}
+                </div>
+                <div class="secondary">
+                  ${this._disabledBy && this._disabledBy !== "user"
+                    ? this.hass.localize(
+                        "ui.panel.config.devices.enabled_cause",
+                        "cause",
+                        this.hass.localize(
+                          `config_entry.disabled_by.${this._disabledBy}`
+                        )
+                      )
+                    : ""}
+                  ${this.hass.localize(
+                    "ui.panel.config.devices.enabled_description"
+                  )}
+                </div>
+              </div>
+            </div>
          </div>
        </div>
        <mwc-button
@@ -109,12 +139,17 @@ class DialogDeviceRegistryDetail extends LitElement {
    this._areaId = event.detail.value;
  }

+  private _disabledByChanged(ev: Event): void {
+    this._disabledBy = (ev.target as HaSwitch).checked ? null : "user";
+  }
+
  private async _updateEntry(): Promise<void> {
    this._submitting = true;
    try {
      await this._params!.updateEntry({
        name_by_user: this._nameByUser.trim() || null,
        area_id: this._areaId || null,
+        disabled_by: this._disabledBy || null,
      });
      this._params = undefined;
    } catch (err) {
@@ -128,6 +163,7 @@ class DialogDeviceRegistryDetail extends LitElement {

  static get styles(): CSSResult[] {
    return [
+      haStyle,
      haStyleDialog,
      css`
        .form {
@@ -139,6 +175,15 @@ class DialogDeviceRegistryDetail extends LitElement {
        .error {
          color: var(--error-color);
        }
+        ha-switch {
+          margin-right: 16px;
+        }
+        .row {
+          margin-top: 8px;
+          color: var(--primary-text-color);
+          display: flex;
+          align-items: center;
+        }
      `,
    ];
  }
@@ -1,8 +1,8 @@
-import { fireEvent } from "../../common/dom/fire_event";
+import { fireEvent } from "../../../../common/dom/fire_event";
 import {
  DeviceRegistryEntry,
  DeviceRegistryEntryMutableParams,
-} from "../../data/device_registry";
+} from "../../../../data/device_registry";

 export interface DeviceRegistryDetailDialogParams {
  device: DeviceRegistryEntry;
@@ -35,7 +35,7 @@ import { findRelated, RelatedResult } from "../../../data/search";
 import {
  loadDeviceRegistryDetailDialog,
  showDeviceRegistryDetailDialog,
-} from "../../../dialogs/device-registry-detail/show-dialog-device-registry-detail";
+} from "./device-registry-detail/show-dialog-device-registry-detail";
 import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-error-screen";
 import "../../../layouts/hass-tabs-subpage";
@@ -46,6 +46,7 @@ import "./device-detail/ha-device-entities-card";
 import "./device-detail/ha-device-info-card";
 import { showDeviceAutomationDialog } from "./device-detail/show-dialog-device-automation";
 import { brandsUrl } from "../../../util/brands-url";
+import { haStyle } from "../../../resources/styles";

 export interface EntityRegistryStateEntry extends EntityRegistryEntry {
  stateName?: string | null;
@@ -246,6 +247,28 @@ export class HaConfigDevicePage extends LitElement {
                .devices=${this.devices}
                .device=${device}
              >
+              ${
+                device.disabled_by
+                  ? html`
+                      <div>
+                        <p class="warning">
+                          ${this.hass.localize(
+                            "ui.panel.config.devices.enabled_cause",
+                            "cause",
+                            this.hass.localize(
+                              `ui.panel.config.devices.disabled_by.${device.disabled_by}`
+                            )
+                          )}
+                        </p>
+                      </div>
+                      <div class="card-actions" slot="actions">
+                        <mwc-button unelevated @click=${this._enableDevice}>
+                          ${this.hass.localize("ui.common.enable")}
+                        </mwc-button>
+                      </div>
+                    `
+                  : html``
+              }
              ${this._renderIntegrationInfo(device, integrations)}
              </ha-device-info-card>

@@ -255,6 +278,7 @@ export class HaConfigDevicePage extends LitElement {
                    <ha-device-entities-card
                      .hass=${this.hass}
                      .entities=${entities}
+                      .showDisabled=${device.disabled_by !== null}
                    >
                    </ha-device-entities-card>
                  `
@@ -272,9 +296,14 @@ export class HaConfigDevicePage extends LitElement {
                        )}
                        <ha-icon-button
                          @click=${this._showAutomationDialog}
-                          title=${this.hass.localize(
-                            "ui.panel.config.devices.automation.create"
-                          )}
+                          .disabled=${device.disabled_by}
+                          title=${device.disabled_by
+                            ? this.hass.localize(
+                                "ui.panel.config.devices.automation.create_disabled"
+                              )
+                            : this.hass.localize(
+                                "ui.panel.config.devices.automation.create"
+                              )}
                          icon="hass:plus-circle"
                        ></ha-icon-button>
                      </h1>
@@ -342,9 +371,16 @@ export class HaConfigDevicePage extends LitElement {

                                  <ha-icon-button
                                    @click=${this._createScene}
-                                    title=${this.hass.localize(
-                                      "ui.panel.config.devices.scene.create"
-                                    )}
+                                    .disabled=${device.disabled_by}
+                                    title=${
+                                      device.disabled_by
+                                        ? this.hass.localize(
+                                            "ui.panel.config.devices.scene.create_disabled"
+                                          )
+                                        : this.hass.localize(
+                                            "ui.panel.config.devices.scene.create"
+                                          )
+                                    }
                                    icon="hass:plus-circle"
                                  ></ha-icon-button>
                        </h1>
@@ -415,9 +451,14 @@ export class HaConfigDevicePage extends LitElement {
                          )}
                          <ha-icon-button
                            @click=${this._showScriptDialog}
-                            title=${this.hass.localize(
-                              "ui.panel.config.devices.script.create"
-                            )}
+                            .disabled=${device.disabled_by}
+                            title=${device.disabled_by
+                              ? this.hass.localize(
+                                  "ui.panel.config.devices.script.create_disabled"
+                                )
+                              : this.hass.localize(
+                                  "ui.panel.config.devices.script.create"
+                                )}
                            icon="hass:plus-circle"
                          ></ha-icon-button>
                        </h1>
@@ -632,128 +673,137 @@ export class HaConfigDevicePage extends LitElement {
    });
  }

-  static get styles(): CSSResult {
-    return css`
-      .container {
-        display: flex;
-        flex-wrap: wrap;
-        margin: auto;
-        max-width: 1000px;
-        margin-top: 32px;
-        margin-bottom: 32px;
-      }
+  private async _enableDevice(): Promise<void> {
+    await updateDeviceRegistryEntry(this.hass, this.deviceId, {
+      disabled_by: null,
+    });
+  }

-      .card-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-      }
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
+        .container {
+          display: flex;
+          flex-wrap: wrap;
+          margin: auto;
+          max-width: 1000px;
+          margin-top: 32px;
+          margin-bottom: 32px;
+        }

-      .card-header ha-icon-button {
-        margin-right: -8px;
-        color: var(--primary-color);
-        height: auto;
-      }
+        .card-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+        }

-      .device-info {
-        padding: 16px;
-      }
+        .card-header ha-icon-button {
+          margin-right: -8px;
+          color: var(--primary-color);
+          height: auto;
+        }

-      .show-more {
-      }
+        .device-info {
+          padding: 16px;
+        }

-      h1 {
-        margin: 0;
-        font-family: var(--paper-font-headline_-_font-family);
-        -webkit-font-smoothing: var(
-          --paper-font-headline_-_-webkit-font-smoothing
-        );
-        font-size: var(--paper-font-headline_-_font-size);
-        font-weight: var(--paper-font-headline_-_font-weight);
-        letter-spacing: var(--paper-font-headline_-_letter-spacing);
-        line-height: var(--paper-font-headline_-_line-height);
-        opacity: var(--dark-primary-opacity);
-      }
+        .show-more {
+        }

-      .header {
-        display: flex;
-        justify-content: space-between;
-      }
+        h1 {
+          margin: 0;
+          font-family: var(--paper-font-headline_-_font-family);
+          -webkit-font-smoothing: var(
+            --paper-font-headline_-_-webkit-font-smoothing
+          );
+          font-size: var(--paper-font-headline_-_font-size);
+          font-weight: var(--paper-font-headline_-_font-weight);
+          letter-spacing: var(--paper-font-headline_-_letter-spacing);
+          line-height: var(--paper-font-headline_-_line-height);
+          opacity: var(--dark-primary-opacity);
+        }

-      .column,
-      .fullwidth {
-        padding: 8px;
-        box-sizing: border-box;
-      }
-      .column {
-        width: 33%;
-        flex-grow: 1;
-      }
-      .fullwidth {
-        width: 100%;
-        flex-grow: 1;
-      }
+        .header {
+          display: flex;
+          justify-content: space-between;
+        }

-      .header-right {
-        align-self: center;
-      }
+        .column,
+        .fullwidth {
+          padding: 8px;
+          box-sizing: border-box;
+        }
+        .column {
+          width: 33%;
+          flex-grow: 1;
+        }
+        .fullwidth {
+          width: 100%;
+          flex-grow: 1;
+        }

-      .header-right img {
-        height: 30px;
-      }
+        .header-right {
+          align-self: center;
+        }

-      .header-right {
-        display: flex;
-      }
+        .header-right img {
+          height: 30px;
+        }

-      .header-right:first-child {
-        width: 100%;
-        justify-content: flex-end;
-      }
+        .header-right {
+          display: flex;
+        }

-      .header-right > *:not(:first-child) {
-        margin-left: 16px;
-      }
+        .header-right:first-child {
+          width: 100%;
+          justify-content: flex-end;
+        }

-      .battery {
-        align-self: center;
-        align-items: center;
-        display: flex;
-      }
+        .header-right > *:not(:first-child) {
+          margin-left: 16px;
+        }

-      .column > *:not(:first-child) {
-        margin-top: 16px;
-      }
+        .battery {
+          align-self: center;
+          align-items: center;
+          display: flex;
+        }

-      :host([narrow]) .column {
-        width: 100%;
-      }
+        .column > *:not(:first-child) {
+          margin-top: 16px;
+        }

-      :host([narrow]) .container {
-        margin-top: 0;
-      }
+        :host([narrow]) .column {
+          width: 100%;
+        }

-      paper-item {
-        cursor: pointer;
-        font-size: var(--paper-font-body1_-_font-size);
-      }
+        :host([narrow]) .container {
+          margin-top: 0;
+        }

-      paper-item.no-link {
-        cursor: default;
-      }
+        paper-item {
+          cursor: pointer;
+          font-size: var(--paper-font-body1_-_font-size);
+        }

-      a {
-        text-decoration: none;
-        color: var(--primary-color);
-      }
+        paper-item.no-link {
+          cursor: default;
+        }

-      ha-card {
-        padding-bottom: 8px;
-      }
+        a {
+          text-decoration: none;
+          color: var(--primary-color);
+        }

-      ha-card a {
-        color: var(--primary-text-color);
-      }
-    `;
+        ha-card {
+          padding-bottom: 8px;
+        }
+
+        ha-card a {
+          color: var(--primary-text-color);
+        }
+      `,
+    ];
  }
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Thomas Lovén	e87accdfb4	Arrayify actions list	2021-01-27 10:43:58 +01:00
Thomas Lovén	4dcfe3031d	Allow multiple tap/hold/doubletap actions.	2021-01-10 19:29:29 +01:00
Bram KragtenandGitHub	1538fbb102	Bump material elements (#8093 )	2021-01-07 10:09:03 +01:00
Philip AllgaierandGitHub	b9259b87eb	Beautify ha-attribute `<pre>` (#8101 )	2021-01-06 20:46:39 +01:00
David F. MulcaheyandGitHub	30997dbc88	Add filtering and zoom to node to the ZHA network visualization (#7913 )	2021-01-06 10:37:53 +01:00
Paulus SchoutsenandGitHub	607eb6d130	Prefer target over environment (#8092 )	2021-01-05 16:03:55 +01:00
Philip AllgaierandGitHub	f2e9b3577d	Use proper styled confirmation dialog for handled actions (#8077 )	2021-01-05 14:04:45 +01:00
Philip AllgaierandGitHub	cb2c6d8560	Convert gallery elements to LitElement (#8088 )	2021-01-05 13:29:21 +01:00
dependabot[bot]GitHubdependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	bfe8346ced	Bump ini from 1.3.5 to 1.3.7 (#7949 ) Bumps [ini](https://github.com/isaacs/ini) from 1.3.5 to 1.3.7. - [Release notes](https://github.com/isaacs/ini/releases) - [Commits](https://github.com/isaacs/ini/compare/v1.3.5...v1.3.7) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2021-01-05 11:47:56 +01:00
Siemon GeeromsandGitHub	88da9bb91b	Allow to show modal dialogs in iFrame panels (#7971 )	2021-01-05 11:38:46 +01:00
Shane QiandGitHub	5e2ee1a16c	Added Drag & Drop Reordering to Shopping List Card. (#7296 )	2021-01-05 11:24:41 +01:00
Philip AllgaierandGitHub	2fdc746392	Add support for "all" as entity ID in action "service" (#7954 )	2021-01-05 11:02:47 +01:00
Philip AllgaierandGitHub	1667973a66	Improve spacing in entity rows + secondary ellipsis (#8028 )	2021-01-05 10:50:40 +01:00
Philip AllgaierandGitHub	42f0101440	Add gallery demo for plant card (#7989 )	2021-01-04 22:10:58 +01:00
Philip AllgaierandGitHub	13b69bff1b	Translate timestamp-display errors + tiny tweaks (#8086 ) * Translate timestamp-display errors + tiny tweaks * Adjust translation key	2021-01-04 20:55:43 +01:00
Philip AllgaierandGitHub	2c2226dfd6	Slightly increase max attribute value width (#8085 )	2021-01-04 19:51:30 +01:00
Philip AllgaierandGitHub	a3fdfe0e15	Add additional entities to gallery more-info-light (#7930 )	2021-01-04 18:06:47 +01:00
Philip AllgaierandGitHub	a0de209a55	Aligned gallery more-info with hui-cards (#7931 )	2021-01-04 18:05:30 +01:00
Philip AllgaierandGitHub	0208b50ac7	Disable counter buttons if entity is unavailable (#8084 )	2021-01-04 18:02:01 +01:00
Philip Allgaier GitHub Bram Kragten	4a61779aba	Ensure YAML editor gets updated during action change / deletion (#8024 ) Co-authored-by: Bram Kragten <[email protected]>	2021-01-04 15:01:25 +01:00
Philip Allgaier GitHub Bram Kragten	05057ade05	Catch navigator.clipboard errors (#7942 ) Co-authored-by: Bram Kragten <[email protected]>	2021-01-04 14:04:54 +01:00
Abílio CostaandGitHub	6fb206853c	Switch header sizes for ZHA pairing status card (#8078 ) Since the top title shows the result of the previous step ("Interview Complete", "Configuration Complete", etc), while the second title shows the current step ("Configuring", "Initializing", etc), having the top title bigger would draw attention to it. So a user could see "Configuration Complete" and assume pairing is done. This change makes the second title bigger than the top one, so that the user focus on the step that is in progress.	2021-01-04 14:03:12 +01:00
Charles GarwoodandGitHub	fab68055bf	OZW Panel: Don't show an empty wakeup card (#8064 )	2021-01-04 10:57:25 +01:00
Philip AllgaierandGitHub	d5a77ef3cd	Treat zero as String in number selector (#8070 )	2021-01-04 10:53:40 +01:00
Philip AllgaierandGitHub	dcb2605de4	Add Bengali language (#8014 )	2021-01-04 10:28:25 +01:00
Philip AllgaierandGitHub	e6d38f4539	Fix incorrect date selection ranges for history and logbook (#8045 )	2021-01-04 10:04:14 +01:00
Philip AllgaierandGitHub	293b56cfa6	Show actual error path/key in YAML card editor (#8076 )	2021-01-04 09:58:07 +01:00
Philip AllgaierandGitHub	775e93d54b	Ensure consistent number display for gauge (#8080 )	2021-01-04 09:24:51 +01:00
Philip AllgaierandGitHub	7f840e75df	Add EN fallback text for dismiss button (#8068 )	2021-01-04 09:18:08 +01:00
Philip AllgaierandGitHub	2113ea675e	Prevent relative time text wrapping in more-info-sun (#8051 )	2021-01-04 09:17:17 +01:00
Philip AllgaierandGitHub	916a5c1a6b	Make it clearer that we are looking for the YAML card config	2021-01-04 00:31:42 +01:00
HomeAssistant Azure	f684531315	[ci skip] Translation update	2021-01-02 00:41:18 +00:00
HomeAssistant Azure	fe8dda8996	[ci skip] Translation update	2020-12-31 00:32:48 +00:00
HomeAssistant Azure	4cd4b328c8	[ci skip] Translation update	2020-12-30 00:32:31 +00:00
Bram KragtenandGitHub	d844c89b94	Merge branch 'master' into dev	2020-12-29 23:12:14 +01:00
Bram Kragten	177ea2b85a	Bumped version to 20201229.0	2020-12-29 23:09:00 +01:00
Marc Mueller GitHub Philip Allgaier	50c5c15f49	Update group reload string (#7938 ) * Update group reload string * Update src/translations/en.json Co-authored-by: Philip Allgaier <[email protected]> * Update rest reload string Co-authored-by: Philip Allgaier <[email protected]>	2020-12-29 23:03:44 +01:00
Philip AllgaierandGitHub	1810760dc7	Mark entity ID as optional for button card (#7967 )	2020-12-29 23:02:47 +01:00
Joakim SørensenandGitHub	4635b92e3f	Fix add-on stage icon rendering (#7981 )	2020-12-29 22:59:07 +01:00
Jochen MehlhornandGitHub	1c652626eb	Fix typo in hassio-supervisor-info.ts (#7907 ) Fix typo in "unhealthy state" warning	2020-12-29 22:58:29 +01:00
Philip AllgaierandGitHub	2000cfb1db	Correct tabs for customizations page (#7990 )	2020-12-29 22:52:58 +01:00
Philip AllgaierandGitHub	f4d07828e7	Minor follow-up tweaks for PR 7947 (#7955 )	2020-12-29 22:52:20 +01:00
Philip AllgaierandGitHub	95b552671c	Fix border radius for labeled slider (#7929 )	2020-12-29 22:50:09 +01:00
Philip AllgaierandGitHub	ef3bc3efe1	Do not render "No Area" in device table to reduce clutter (#7986 )	2020-12-29 22:46:47 +01:00
Philip AllgaierandGitHub	371ad899f5	Handle sorting with "undefined" (move always to bottom) (#7985 )	2020-12-29 22:45:39 +01:00
plafüandGitHub	2c54158d84	Fixes typo: 'bring to live'>'bring to life' (#8000 )	2020-12-29 22:44:21 +01:00
quthlaandGitHub	5d9e30bbdc	Fix translation of home state (#8015 )	2020-12-29 22:43:41 +01:00
Marc RandolphandGitHub	e477fd567d	Button text is swapped on Lovelace raw YAML exit window (#8038 ) Button text is swapped compared to the same thing elsewhere: https://github.com/home-assistant/frontend/blob/d23165d06ae57cddef2529481d1c4d857f3e20b6/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts#L311	2020-12-29 22:38:31 +01:00
Philip AllgaierandGitHub	6a6c2937fe	Ensure consistent spelling of "ID" (#8042 )	2020-12-29 22:36:28 +01:00
HomeAssistant Azure	09e17c4da8	[ci skip] Translation update	2020-12-29 00:32:26 +00:00
HomeAssistant Azure	fd00469d11	[ci skip] Translation update	2020-12-28 00:32:37 +00:00
HomeAssistant Azure	cbbeb795f3	[ci skip] Translation update	2020-12-27 00:32:32 +00:00
HomeAssistant Azure	bba40e0da8	[ci skip] Translation update	2020-12-25 00:32:32 +00:00
HomeAssistant Azure	d23165d06a	[ci skip] Translation update	2020-12-24 00:33:07 +00:00
HomeAssistant Azure	405fef6f03	[ci skip] Translation update	2020-12-23 00:32:49 +00:00
HomeAssistant Azure	588f217826	[ci skip] Translation update	2020-12-22 00:32:27 +00:00
HomeAssistant Azure	3d8b7cf80e	[ci skip] Translation update	2020-12-21 00:32:26 +00:00
HomeAssistant Azure	c0ef923ad3	[ci skip] Translation update	2020-12-20 00:32:26 +00:00
HomeAssistant Azure	3df44fc71e	[ci skip] Translation update	2020-12-19 00:33:33 +00:00
HomeAssistant Azure	c1965492d9	[ci skip] Translation update	2020-12-18 00:32:38 +00:00
HomeAssistant Azure	1f56ffde80	[ci skip] Translation update	2020-12-17 00:33:13 +00:00
Georgi KirichkovandGitHub	f335fdc002	Fixes a typo in hassio-supervisor-info.ts (#7987 ) An "a" was missing in installtion	2020-12-16 10:28:21 +01:00
HomeAssistant Azure	0c914b5ec8	[ci skip] Translation update	2020-12-16 00:32:25 +00:00
Philip AllgaierandGitHub	d767b06858	Fix spelling error (#7961 ) Fixes https://github.com/home-assistant/frontend/issues/7958	2020-12-15 07:22:06 -06:00
Fabian AffolterandGitHub	d4e49f3944	Update entry (#7978 )	2020-12-15 09:49:26 +01:00
HomeAssistant Azure	7dfc5b3faf	[ci skip] Translation update	2020-12-15 00:32:22 +00:00
HomeAssistant Azure	8a88033ab9	[ci skip] Translation update	2020-12-14 00:32:42 +00:00
HomeAssistant Azure	7b06b38c94	[ci skip] Translation update	2020-12-13 00:32:43 +00:00
Bram Kragten GitHub Paulus Schoutsen HomeAssistant Azure Philip Allgaier	5409752817	20201212.0 (#7952 ) * [ci skip] Translation update * Add link to the community forums to find more blueprints (#7947) * Add link to the community forums to find more blueprints * Apply suggestions from code review Co-authored-by: Paulus Schoutsen <[email protected]> Co-authored-by: Paulus Schoutsen <[email protected]> * Fix `ha-relative-time` usage for tags and sun (#7944) * Bumped version to 20201212.0 Co-authored-by: HomeAssistant Azure <[email protected]> Co-authored-by: Paulus Schoutsen <[email protected]> Co-authored-by: Philip Allgaier <[email protected]>	2020-12-12 20:57:28 +01:00
Bram Kragten	909f3a3005	Bumped version to 20201212.0	2020-12-12 20:48:44 +01:00
Philip AllgaierandGitHub	4930532c7b	Fix `ha-relative-time` usage for tags and sun (#7944 )	2020-12-12 20:46:56 +01:00
Bram Kragten GitHub Paulus Schoutsen	8a42e65c6a	Add link to the community forums to find more blueprints (#7947 ) * Add link to the community forums to find more blueprints * Apply suggestions from code review Co-authored-by: Paulus Schoutsen <[email protected]> Co-authored-by: Paulus Schoutsen <[email protected]>	2020-12-12 20:38:10 +01:00
HomeAssistant Azure	5d4121a9b4	[ci skip] Translation update	2020-12-11 00:32:17 +00:00
Bram KragtenandGitHub	a70e6c49a1	Merge pull request #7940 from home-assistant/dev 20201210.0	2020-12-10 16:56:08 +01:00
Bram Kragten	3d83d5f4b5	Bumped version to 20201210.0	2020-12-10 15:57:13 +01:00
Philip AllgaierandGitHub	f9dece0743	Add copy YAML (automation & script) fallback without `navigator.clipboard` (#7900 )	2020-12-10 15:55:57 +01:00
Bram KragtenandGitHub	ac0871d0e8	Use correct device name in target picker (#7939 )	2020-12-10 15:12:33 +01:00
HomeAssistant Azure	ffc19e591d	[ci skip] Translation update	2020-12-10 00:32:24 +00:00
HomeAssistant Azure	c53380ca3d	[ci skip] Translation update	2020-12-09 00:32:38 +00:00
Bram KragtenandGitHub	7c74a2026a	Correct tabs helpers page (#7928 ) Fixes https://github.com/home-assistant/frontend/issues/7926	2020-12-08 11:47:30 +01:00
HomeAssistant Azure	adaed438d9	[ci skip] Translation update	2020-12-08 00:32:29 +00:00
uvjustinandGitHub	baf38305cb	Remove use of named groups in regexp (#7921 )	2020-12-07 15:18:27 +01:00
HomeAssistant Azure	8254712521	[ci skip] Translation update	2020-12-07 00:33:14 +00:00
HomeAssistant Azure	53214781e3	[ci skip] Translation update	2020-12-06 00:32:39 +00:00
HomeAssistant Azure	88cbbbdf65	[ci skip] Translation update	2020-12-05 00:33:30 +00:00
Bram KragtenandGitHub	c10dca9c7b	Merge pull request #7910 from home-assistant/dev	2020-12-04 21:46:54 +01:00
Bram Kragten	7f2ebb4bde	Bumped version to 20201204.0	2020-12-04 21:33:37 +01:00
Bram KragtenandGitHub	f1abb60e4a	Add message when no matches for selectors, clear config when deleted (#7906 )	2020-12-04 20:49:24 +01:00
Bram KragtenandGitHub	e014c7aff6	Entity is not required for button card (#7909 ) Fixes https://github.com/home-assistant/frontend/issues/7908	2020-12-04 12:02:58 -06:00
Bram KragtenandGitHub	b79c03433e	Don't update device picker while open (#7903 )	2020-12-04 12:05:01 +01:00
HomeAssistant Azure	34eb4d974d	[ci skip] Translation update	2020-12-04 00:32:26 +00:00
Zack BarettandGitHub	3264be3c5e	Move main function to events on hui-view for custom views to use (#7861 )	2020-12-03 18:16:55 -06:00
Bram KragtenandGitHub	655f4f75fb	Change import blueprint fab icon (#7894 )	2020-12-03 22:41:13 +01:00
Bram KragtenandGitHub	4383f31696	Translation logic tweaks (#7901 ) * Translation logic tweaks * Comments	2020-12-03 22:29:52 +01:00
Paulus SchoutsenandGitHub	99eb15d15e	Improve blueprint translations (#7892 )	2020-12-03 18:08:14 +01:00
Bram KragtenandGitHub	2682c6e150	Merge pull request #7891 from home-assistant/dev	2020-12-03 17:22:08 +01:00
Bram Kragten	3a5d854e6d	Bumped version to 20201203.0	2020-12-03 17:00:56 +01:00
Bram KragtenandGitHub	1e90c6387c	More BP tweaks (#7884 )	2020-12-03 09:59:43 -06:00
Philip AllgaierandGitHub	2cca25f4d0	Navigate back to area overview after area deletion (#7890 )	2020-12-03 16:52:44 +01:00
Bram KragtenandGitHub	565724d201	Fix translation race condition? (#7885 )	2020-12-03 16:52:09 +01:00
Bram Kragten GitHub Paulus Schoutsen	3e4955becd	UI tweaks for BP (#7883 ) Co-authored-by: Paulus Schoutsen <[email protected]>	2020-12-03 14:18:17 +01:00
Philip AllgaierandGitHub	7b560c727f	Adjust text since entities can now be in areas too (#7880 )	2020-12-03 14:05:16 +01:00
HomeAssistant Azure	35abd9dfdb	[ci skip] Translation update	2020-12-03 00:32:38 +00:00
Bram KragtenandGitHub	b7ccf3e0e5	Merge pull request #7875 from home-assistant/dev	2020-12-02 19:51:36 +01:00
Bram Kragten	0d9ab8fdd0	Bumped version to 20201202.0	2020-12-02 19:31:43 +01:00
Bram KragtenandGitHub	303f9290a8	Add more device disabled ui (#7874 )	2020-12-02 19:31:06 +01:00
Bram KragtenandGitHub	e0c4dc08a1	Tooltip tweak target picker (#7870 )	2020-12-02 11:21:51 -06:00
Bram KragtenandGitHub	8c655883fe	Add device disabled reason (#7873 )	2020-12-02 18:20:29 +01:00
Bram KragtenandGitHub	ba90785115	Fix card picker cards (#7871 )	2020-12-02 17:46:30 +01:00
Bram KragtenandGitHub	7b392b626b	Hardcode history card stub entity to sun.sun (#7760 )	2020-12-02 10:16:46 -06:00
Zack BarettandGitHub	8e4ceb7d48	Fix View Background Colors (#7823 )	2020-12-02 17:08:18 +01:00
Philip AllgaierandGitHub	2ab1c6e9a9	Make media player card work as square + add to gallery + icon pos tweaks (#7727 )	2020-12-02 16:57:19 +01:00
Adam ErnstandGitHub	dbdced0971	Improve descriptions for Configuration entries (#7606 )	2020-12-02 16:36:21 +01:00
Philip AllgaierandGitHub	5e481880bd	Allow empty entities array with entity-filter (#7854 )	2020-12-02 16:34:59 +01:00
Kendell RandGitHub	faec063f34	Add --masonry-view-card-margin (#7395 )	2020-12-02 16:22:20 +01:00
Zack BarettandGitHub	bbea38d227	Lovelace Card Editor: Preview Background (#7678 )	2020-12-02 16:19:01 +01:00
Kendell RandGitHub	a0ef60de49	Make card picker border follow standards (#7162 )	2020-12-02 16:14:46 +01:00
Philip Allgaier GitHub Bram Kragten	3313572606	Improve password change card (#7756 ) Co-authored-by: Bram Kragten <[email protected]>	2020-12-02 16:00:49 +01:00
Philip AllgaierandGitHub	c4f850cb14	Cleanup created user if person creation is cancelled (#7865 )	2020-12-02 15:45:24 +01:00
Erik Montnemery GitHub Bram Kragten	3bdab738c6	Support disabling devices (#7715 ) Co-authored-by: Bram Kragten <[email protected]>	2020-12-02 15:40:35 +01:00
Philip AllgaierandGitHub	faaef31b9f	Show proper error message if username already used (#7866 )	2020-12-02 15:35:38 +01:00
Philip AllgaierandGitHub	ca7b8b8b4c	Add option to deactivate a user (#7757 )	2020-12-02 15:33:11 +01:00
Philip AllgaierandGitHub	9ca84e0694	Ensure "false" is set as default for "continue_on_timeout" (#7862 )	2020-12-02 15:22:17 +01:00
Philip AllgaierandGitHub	daaf2b1796	Ensure push notification description reacts to language change (#7856 )	2020-12-02 12:11:47 +01:00
Bram Kragten GitHub Paulus Schoutsen	25f7cbea5a	Add target selector (#7864 ) Co-authored-by: Paulus Schoutsen <[email protected]>	2020-12-02 12:10:31 +01:00
Josh McCartyandGitHub	c485ea9d7b	Add number formatting to counter entity state display (#7868 )	2020-12-02 11:51:56 +01:00
HomeAssistant Azure	295390c8e9	[ci skip] Translation update	2020-12-02 00:32:30 +00:00
Bram KragtenandGitHub	3ebf816ce2	Fix height of `ha-icon-input` (#7767 )	2020-12-01 22:51:15 +01:00
HomeAssistant Azure	0e362b851b	[ci skip] Translation update	2020-12-01 00:32:47 +00:00
David F. MulcaheyandGitHub	8d7ba19a08	Add ZHA fab for adding device when filtered by ZHA (#7848 )	2020-11-30 11:05:54 +01:00
Paulus SchoutsenandGitHub	08f4aa9d10	Use balloons as default pic for header. (#7850 )	2020-11-30 10:59:04 +01:00
HomeAssistant Azure	98175d5c72	[ci skip] Translation update	2020-11-30 00:32:50 +00:00
Ian Richardson GitHub Bram Kragten	7d4cad90bc	Show attribute value when 0 (#7842 ) Co-authored-by: Bram Kragten <[email protected]>	2020-11-29 22:37:13 +01:00
David F. Mulcahey GitHub Bram Kragten	335354d962	Enhance ZHA device pairing feedback (#7843 ) Co-authored-by: Bram Kragten <[email protected]>	2020-11-29 22:33:46 +01:00
Bram KragtenandGitHub	fe31d15d27	Add UI for setting an area on entity level (#7837 )	2020-11-29 22:00:51 +01:00
Marc RandolphandGitHub	7ceb6eb50d	Apply existing theme variables to unthemed items (#7844 )	2020-11-29 16:13:55 +01:00
HomeAssistant Azure	4c4db46aa8	[ci skip] Translation update	2020-11-29 00:32:38 +00:00
Bram KragtenandGitHub	b5724ed343	Make fab blue (#7839 )	2020-11-28 17:22:42 +01:00
HomeAssistant Azure	cae94175fe	[ci skip] Translation update	2020-11-28 00:32:35 +00:00
Kendell R GitHub Bram Kragten	0494a9d410	Update skeleton height for compact header (#7827 ) Co-authored-by: Bram Kragten <[email protected]>	2020-11-27 19:23:41 +01:00
Philip AllgaierandGitHub	c261b5c1ce	Display HA username + flags in user config (#7705 )	2020-11-27 09:41:47 +01:00
HomeAssistant Azure	c89e17ac00	[ci skip] Translation update	2020-11-27 00:32:35 +00:00