Bumped version to 20201021.4

* Fix issue with some inputs blocking, or incorrectly allowing, keyboard shortcut activation

* Explicitly declare all input types that we can allow alphanumeric overrides

* Do not launch dialog in codemirror targets on mobile devices

.eslintrc.json

@@ -75,6 +75,7 @@
     "object-curly-newline": 0,
     "default-case": 0,
     "wc/no-self-class": 0,
+    "no-shadow": 0,
     "@typescript-eslint/camelcase": 0,
     "@typescript-eslint/ban-ts-comment": 0,
     "@typescript-eslint/no-use-before-define": 0,
@@ -82,7 +83,8 @@
     "@typescript-eslint/no-explicit-any": 0,
     "@typescript-eslint/no-unused-vars": 0,
     "@typescript-eslint/explicit-function-return-type": 0,
-    "@typescript-eslint/explicit-module-boundary-types": 0
+    "@typescript-eslint/explicit-module-boundary-types": 0,
+    "@typescript-eslint/no-shadow": ["error"]
   },
   "plugins": ["disable", "import", "lit", "prettier", "@typescript-eslint"],
   "processor": "disable/disable"

.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md

@@ -1,26 +0,0 @@
----
-name: Request a feature for the UI, Frontend or Lovelace
-about: Request an new feature for the Home Assistant frontend.
-labels: feature request
----
-
-<!--
-  DO NOT DELETE ANY TEXT from this template!
-  Otherwise, your request may be closed without comment.
--->
-
-## The request
-
-<!--
-  Describe to our maintainers, the feature you would like to be added.
-  Please be clear and concise and, if possible, provide a screenshot or mockup.
--->
-
-## The alternatives
-
-<!--
-  Are you currently using, or have you considered alternatives?
-  If so, could you please describe those?
--->
-
-## Additional information

.github/ISSUE_TEMPLATE/config.yml

@@ -1,5 +1,8 @@
 blank_issues_enabled: false
 contact_links:
+  - name: Request a feature for the UI, Frontend or Lovelace
+    url: https://github.com/home-assistant/frontend/discussions/category_choices
+    about: Request an new feature for the Home Assistant frontend.
   - name: Report a bug that is NOT related to the UI, Frontend or Lovelace
     url: https://github.com/home-assistant/core/issues
     about: This is the issue tracker for our frontend. Please report other issues with the backend repository.

README.md

@@ -26,4 +26,4 @@ A complete guide can be found at the following [link](https://www.home-assistant
 
 Home Assistant is open-source and Apache 2 licensed. Feel free to browse the repository, learn and reuse parts in your own projects.
 
-We use [BrowserStack](https://www.browserstack.com) to test Home Assistant on a large variation of devices.
+We use [BrowserStack](https://www.browserstack.com) to test Home Assistant on a large variety of devices.

build-scripts/bundle.js

@@ -54,7 +54,10 @@ module.exports.babelOptions = ({ latestBuild }) => ({
   presets: [
     !latestBuild && [
       require("@babel/preset-env").default,
-      { modules: false, useBuiltIns: "entry", corejs: 3 },
+      {
+        useBuiltIns: "entry",
+        corejs: "3.6",
+      },
     ],
     require("@babel/preset-typescript").default,
   ].filter(Boolean),
@@ -66,7 +69,7 @@ module.exports.babelOptions = ({ latestBuild }) => ({
     ],
     // Only support the syntax, Webpack will handle it.
     "@babel/plugin-syntax-import-meta",
-    "@babel/syntax-dynamic-import",
+    "@babel/plugin-syntax-dynamic-import",
     "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-proposal-nullish-coalescing-operator",
     [

build-scripts/webpack.js

@@ -29,7 +29,7 @@ const createWebpackConfig = ({
     module: {
       rules: [
         {
-          test: /\.js$|\.ts$/,
+          test: /\.m?js$|\.ts$/,
           exclude: bundle.babelExclude(),
           use: {
             loader: "babel-loader",
@@ -45,10 +45,8 @@ const createWebpackConfig = ({
     optimization: {
       minimizer: [
         new TerserPlugin({
-          cache: true,
           parallel: true,
           extractComments: true,
-          sourceMap: true,
           terserOptions: bundle.terserOptions(latestBuild),
         }),
       ],
@@ -97,6 +95,15 @@ const createWebpackConfig = ({
         new RegExp(bundle.emptyPackages({ latestBuild }).join("|")),
         path.resolve(paths.polymer_dir, "src/util/empty.js")
       ),
+      // We need to change the import of the polyfill for EventTarget, so we replace the polyfill file with our customized one
+      new webpack.NormalModuleReplacementPlugin(
+        new RegExp(
+          require.resolve(
+            "lit-virtualizer/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js"
+          )
+        ),
+        path.resolve(paths.polymer_dir, "src/resources/EventTarget-ponyfill.js")
+      ),
     ],
     resolve: {
       extensions: [".ts", ".js", ".json"],
@@ -108,6 +115,22 @@ 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"

cast/src/launcher/layout/hc-layout.ts

@@ -30,7 +30,7 @@ class HcLayout extends LitElement {
       <ha-card>
         <div class="layout">
           <img class="hero" src="/images/google-nest-hub.png" />
-          <div class="card-header">
+          <h1 class="card-header">
             Home Assistant Cast${this.subtitle ? ` – ${this.subtitle}` : ""}
             ${this.auth
               ? html`
@@ -44,7 +44,7 @@ class HcLayout extends LitElement {
                   </div>
                 `
               : ""}
-          </div>
+          </h1>
           <slot></slot>
         </div>
       </ha-card>

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

@@ -23,9 +23,9 @@ import { hassioStyle } from "../resources/hassio-style";
 class HassioAddonRepositoryEl extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public repo!: HassioAddonRepository;
+  @property({ attribute: false }) public repo!: HassioAddonRepository;
 
-  @property() public addons!: HassioAddonInfo[];
+  @property({ attribute: false }) public addons!: HassioAddonInfo[];
 
   @property() public filter!: string;
 
@@ -78,18 +78,18 @@ class HassioAddonRepositoryEl extends LitElement {
                     .title=${addon.name}
                     .description=${addon.description}
                     .available=${addon.available}
-                    .icon=${addon.installed && addon.installed !== addon.version
+                    .icon=${addon.installed && addon.update_available
                       ? mdiArrowUpBoldCircle
                       : mdiPuzzle}
                     .iconTitle=${addon.installed
-                      ? addon.installed !== addon.version
+                      ? addon.update_available
                         ? "New version available"
                         : "Add-on is installed"
                       : addon.available
                       ? "Add-on is not installed"
                       : "Add-on is not available on your system"}
                     .iconClass=${addon.installed
-                      ? addon.installed !== addon.version
+                      ? addon.update_available
                         ? "update"
                         : "installed"
                       : !addon.available
@@ -104,7 +104,7 @@ class HassioAddonRepositoryEl extends LitElement {
                       : undefined}
                     .showTopbar=${addon.installed || !addon.available}
                     .topbarClass=${addon.installed
-                      ? addon.installed !== addon.version
+                      ? addon.update_available
                         ? "update"
                         : "installed"
                       : !addon.available

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

@@ -11,6 +11,7 @@ import {
   PropertyValues,
 } from "lit-element";
 import { html, TemplateResult } from "lit-html";
+import { atLeastVersion } from "../../../src/common/config/version";
 import "../../../src/common/search/search-input";
 import "../../../src/components/ha-button-menu";
 import "../../../src/components/ha-svg-icon";
@@ -24,6 +25,7 @@ import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-tabs-subpage";
 import { HomeAssistant, Route } from "../../../src/types";
+import { showRegistriesDialog } from "../dialogs/registries/show-dialog-registries";
 import { showRepositoriesDialog } from "../dialogs/repositories/show-dialog-repositories";
 import { supervisorTabs } from "../hassio-tabs";
 import "./hassio-addon-repository";
@@ -113,6 +115,12 @@ class HassioAddonStore extends LitElement {
           <mwc-list-item>
             Reload
           </mwc-list-item>
+          ${this.hass.userData?.showAdvanced &&
+          atLeastVersion(this.hass.config.version, 0, 117)
+            ? html`<mwc-list-item>
+                Registries
+              </mwc-list-item>`
+            : ""}
         </ha-button-menu>
         ${repos.length === 0
           ? html`<hass-loading-screen no-toolbar></hass-loading-screen>`
@@ -157,6 +165,9 @@ class HassioAddonStore extends LitElement {
       case 1:
         this.refreshData();
         break;
+      case 2:
+        this._manageRegistries();
+        break;
     }
   }
 
@@ -173,6 +184,10 @@ class HassioAddonStore extends LitElement {
     });
   }
 
+  private async _manageRegistries() {
+    showRegistriesDialog(this);
+  }
+
   private async _loadData() {
     try {
       const addonsInfo = await fetchHassioAddonsInfo(this.hass);

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

@@ -39,13 +39,11 @@ class HassioAddonConfig extends LitElement {
 
   @property({ type: Boolean }) private _configHasChanged = false;
 
+  @property({ type: Boolean }) private _valid = true;
+
   @query("ha-yaml-editor", true) private _editor!: HaYamlEditor;
 
   protected render(): TemplateResult {
-    const editor = this._editor;
-    // If editor not rendered, don't show the error.
-    const valid = editor ? editor.isValid : true;
-
     return html`
       <h1>${this.addon.name}</h1>
       <ha-card header="Configuration">
@@ -54,7 +52,7 @@ class HassioAddonConfig extends LitElement {
             @value-changed=${this._configChanged}
           ></ha-yaml-editor>
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
-          ${valid ? "" : html` <div class="errors">Invalid YAML</div> `}
+          ${this._valid ? "" : html` <div class="errors">Invalid YAML</div> `}
         </div>
         <div class="card-actions">
           <ha-progress-button class="warning" @click=${this._resetTapped}>
@@ -62,7 +60,7 @@ class HassioAddonConfig extends LitElement {
           </ha-progress-button>
           <ha-progress-button
             @click=${this._saveTapped}
-            .disabled=${!this._configHasChanged || !valid}
+            .disabled=${!this._configHasChanged || !this._valid}
           >
             Save
           </ha-progress-button>
@@ -78,9 +76,9 @@ class HassioAddonConfig extends LitElement {
     }
   }
 
-  private _configChanged(): void {
+  private _configChanged(ev): void {
     this._configHasChanged = true;
-    this.requestUpdate();
+    this._valid = ev.detail.isValid;
   }
 
   private async _resetTapped(ev: CustomEvent): Promise<void> {

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

@@ -135,7 +135,7 @@ class HassioAddonInfo extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      ${this._computeUpdateAvailable
+      ${this.addon.update_available
         ? html`
             <ha-card header="Update available! 🎉">
               <div class="card-content">
@@ -178,7 +178,7 @@ class HassioAddonInfo extends LitElement {
       ${!this.addon.protected
         ? html`
         <ha-card class="warning">
-          <div class="card-header">Warning: Protection mode is disabled!</div>
+          <h1 class="card-header">Warning: Protection mode is disabled!</h1>
           <div class="card-content">
             Protection mode on this add-on is disabled! This gives the add-on full access to the entire system, which adds security risks, and could damage your system when used incorrectly. Only disable the protection mode if you know, need AND trust the source of this add-on.
           </div>
@@ -609,15 +609,6 @@ class HassioAddonInfo extends LitElement {
     return this.addon?.state === "started";
   }
 
-  private get _computeUpdateAvailable(): boolean | "" {
-    return (
-      this.addon &&
-      !this.addon.detached &&
-      this.addon.version &&
-      this.addon.version !== this.addon.version_latest
-    );
-  }
-
   private get _pathWebui(): string | null {
     return (
       this.addon.webui &&

hassio/src/components/hassio-card-content.ts

@@ -50,7 +50,7 @@ class HassioCardContent extends LitElement {
           `
         : html`
             <ha-svg-icon
-              class=${this.iconClass}
+              class=${this.iconClass!}
               .path=${this.icon}
               .title=${this.iconTitle}
             ></ha-svg-icon>

hassio/src/components/hassio-upload-snapshot.ts

@@ -1,4 +1,3 @@
-import "../../../src/components/ha-file-upload";
 import "@material/mwc-icon-button/mwc-icon-button";
 import { mdiFolderUpload } from "@mdi/js";
 import "@polymer/iron-input/iron-input";
@@ -12,13 +11,15 @@ import {
 } from "lit-element";
 import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/ha-circular-progress";
+import "../../../src/components/ha-file-upload";
 import "../../../src/components/ha-svg-icon";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import {
   HassioSnapshot,
   uploadSnapshot,
 } from "../../../src/data/hassio/snapshot";
-import { HomeAssistant } from "../../../src/types";
 import { showAlertDialog } from "../../../src/dialogs/generic/show-dialog-box";
+import { HomeAssistant } from "../../../src/types";
 
 declare global {
   interface HASSDomEvents {
@@ -65,7 +66,7 @@ export class HassioUploadSnapshot extends LitElement {
     } catch (err) {
       showAlertDialog(this, {
         title: "Upload failed",
-        text: err.toString(),
+        text: extractApiErrorMessage(err),
         confirmText: "ok",
       });
     } finally {

hassio/src/dashboard/hassio-addons.ts

@@ -52,22 +52,21 @@ class HassioAddons extends LitElement {
                           .title=${addon.name}
                           .description=${addon.description}
                           available
-                          .showTopbar=${addon.installed !== addon.version}
+                          .showTopbar=${addon.update_available}
                           topbarClass="update"
-                          .icon=${addon.installed !== addon.version
+                          .icon=${addon.update_available!
                             ? mdiArrowUpBoldCircle
                             : mdiPuzzle}
                           .iconTitle=${addon.state !== "started"
                             ? "Add-on is stopped"
-                            : addon.installed !== addon.version
+                            : addon.update_available!
                             ? "New version available"
                             : "Add-on is running"}
-                          .iconClass=${addon.installed &&
-                          addon.installed !== addon.version
+                          .iconClass=${addon.update_available
                             ? addon.state === "started"
                               ? "update"
                               : "update stopped"
-                            : addon.installed && addon.state === "started"
+                            : addon.state === "started"
                             ? "running"
                             : "stopped"}
                           .iconImage=${atLeastVersion(

hassio/src/dashboard/hassio-update.ts

@@ -5,11 +5,11 @@ import {
   CSSResult,
   customElement,
   html,
-  internalProperty,
   LitElement,
   property,
   TemplateResult,
 } from "lit-element";
+import memoizeOne from "memoize-one";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-svg-icon";
@@ -35,29 +35,30 @@ import { hassioStyle } from "../resources/hassio-style";
 export class HassioUpdate extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property({ attribute: false }) public hassInfo: HassioHomeAssistantInfo;
+  @property({ attribute: false }) public hassInfo?: HassioHomeAssistantInfo;
 
   @property({ attribute: false }) public hassOsInfo?: HassioHassOSInfo;
 
-  @property() public supervisorInfo: HassioSupervisorInfo;
+  @property({ attribute: false }) public supervisorInfo?: HassioSupervisorInfo;
 
-  @internalProperty() private _error?: string;
+  private _pendingUpdates = memoizeOne(
+    (
+      core?: HassioHomeAssistantInfo,
+      supervisor?: HassioSupervisorInfo,
+      os?: HassioHassOSInfo
+    ): number => {
+      return [core, supervisor, os].filter(
+        (value) => !!value && value?.update_available
+      ).length;
+    }
+  );
 
   protected render(): TemplateResult {
-    const updatesAvailable: number = [
+    const updatesAvailable = this._pendingUpdates(
       this.hassInfo,
       this.supervisorInfo,
-      this.hassOsInfo,
-    ].filter((value) => {
-      return (
-        !!value &&
-        (value.version_latest
-          ? value.version !== value.version_latest
-          : value.version_latest
-          ? value.version !== value.version_latest
-          : false)
-      );
-    }).length;
+      this.hassOsInfo
+    );
 
     if (!updatesAvailable) {
       return html``;
@@ -65,9 +66,6 @@ export class HassioUpdate extends LitElement {
 
     return html`
       <div class="content">
-        ${this._error
-          ? html` <div class="error">Error: ${this._error}</div> `
-          : ""}
         <h1>
           ${updatesAvailable > 1
             ? "Updates Available 🎉"
@@ -76,26 +74,24 @@ export class HassioUpdate extends LitElement {
         <div class="card-group">
           ${this._renderUpdateCard(
             "Home Assistant Core",
-            this.hassInfo.version,
-            this.hassInfo.version_latest,
+            this.hassInfo!,
             "hassio/homeassistant/update",
             `https://${
-              this.hassInfo.version_latest.includes("b") ? "rc" : "www"
-            }.home-assistant.io/latest-release-notes/`,
-            mdiHomeAssistant
+              this.hassInfo?.version_latest.includes("b") ? "rc" : "www"
+            }.home-assistant.io/latest-release-notes/`
           )}
           ${this._renderUpdateCard(
             "Supervisor",
-            this.supervisorInfo.version,
-            this.supervisorInfo.version_latest,
+            this.supervisorInfo!,
             "hassio/supervisor/update",
-            `https://github.com//home-assistant/hassio/releases/tag/${this.supervisorInfo.version_latest}`
+            `https://github.com//home-assistant/hassio/releases/tag/${
+              this.supervisorInfo!.version_latest
+            }`
           )}
           ${this.hassOsInfo
             ? this._renderUpdateCard(
                 "Operating System",
-                this.hassOsInfo.version,
-                this.hassOsInfo.version_latest,
+                this.hassOsInfo,
                 "hassio/os/update",
                 `https://github.com//home-assistant/hassos/releases/tag/${this.hassOsInfo.version_latest}`
               )
@@ -107,28 +103,22 @@ export class HassioUpdate extends LitElement {
 
   private _renderUpdateCard(
     name: string,
-    curVersion: string,
-    lastVersion: string,
+    object: HassioHomeAssistantInfo | HassioSupervisorInfo | HassioHassOSInfo,
     apiPath: string,
-    releaseNotesUrl: string,
-    icon?: string
+    releaseNotesUrl: string
   ): TemplateResult {
-    if (!lastVersion || lastVersion === curVersion) {
+    if (!object.update_available) {
       return html``;
     }
     return html`
       <ha-card>
         <div class="card-content">
-          ${icon
-            ? html`
-                <div class="icon">
-                  <ha-svg-icon .path=${icon}></ha-svg-icon>
-                </div>
-              `
-            : ""}
-          <div class="update-heading">${name} ${lastVersion}</div>
+          <div class="icon">
+            <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>
+          </div>
+          <div class="update-heading">${name} ${object.version_latest}</div>
           <div class="warning">
-            You are currently running version ${curVersion}
+            You are currently running version ${object.version}
           </div>
         </div>
         <div class="card-actions">
@@ -138,7 +128,7 @@ export class HassioUpdate extends LitElement {
           <ha-progress-button
             .apiPath=${apiPath}
             .name=${name}
-            .version=${lastVersion}
+            .version=${object.version_latest}
             @click=${this._confirmUpdate}
           >
             Update

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

@@ -0,0 +1,245 @@
+import "@material/mwc-button/mwc-button";
+import "@material/mwc-icon-button/mwc-icon-button";
+import "@material/mwc-list/mwc-list-item";
+import { mdiDelete } from "@mdi/js";
+import { PaperInputElement } from "@polymer/paper-input/paper-input";
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  internalProperty,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import "../../../../src/components/ha-circular-progress";
+import { createCloseHeading } from "../../../../src/components/ha-dialog";
+import "../../../../src/components/ha-svg-icon";
+import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
+import {
+  addHassioDockerRegistry,
+  fetchHassioDockerRegistries,
+  removeHassioDockerRegistry,
+} from "../../../../src/data/hassio/docker";
+import { showAlertDialog } from "../../../../src/dialogs/generic/show-dialog-box";
+import { haStyle, haStyleDialog } from "../../../../src/resources/styles";
+import type { HomeAssistant } from "../../../../src/types";
+
+@customElement("dialog-hassio-registries")
+class HassioRegistriesDialog extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) private _registries?: {
+    registry: string;
+    username: string;
+  }[];
+
+  @internalProperty() private _registry?: string;
+
+  @internalProperty() private _username?: string;
+
+  @internalProperty() private _password?: string;
+
+  @internalProperty() private _opened = false;
+
+  @internalProperty() private _addingRegistry = false;
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-dialog
+        .open=${this._opened}
+        @closing=${this.closeDialog}
+        scrimClickAction
+        escapeKeyAction
+        .heading=${createCloseHeading(
+          this.hass,
+          this._addingRegistry
+            ? "Add New Docker Registry"
+            : "Manage Docker Registries"
+        )}
+      >
+        <div class="form">
+          ${this._addingRegistry
+            ? html`
+                <paper-input
+                  @value-changed=${this._inputChanged}
+                  class="flex-auto"
+                  name="registry"
+                  label="Registry"
+                  required
+                  auto-validate
+                ></paper-input>
+                <paper-input
+                  @value-changed=${this._inputChanged}
+                  class="flex-auto"
+                  name="username"
+                  label="Username"
+                  required
+                  auto-validate
+                ></paper-input>
+                <paper-input
+                  @value-changed=${this._inputChanged}
+                  class="flex-auto"
+                  name="password"
+                  label="Password"
+                  type="password"
+                  required
+                  auto-validate
+                ></paper-input>
+
+                <mwc-button
+                  ?disabled=${Boolean(
+                    !this._registry || !this._username || !this._password
+                  )}
+                  @click=${this._addNewRegistry}
+                >
+                  Add registry
+                </mwc-button>
+              `
+            : html`${this._registries?.length
+                  ? this._registries.map((entry) => {
+                      return html`
+                        <mwc-list-item class="option" hasMeta twoline>
+                          <span>${entry.registry}</span>
+                          <span slot="secondary"
+                            >Username: ${entry.username}</span
+                          >
+                          <mwc-icon-button
+                            .entry=${entry}
+                            title="Remove"
+                            slot="meta"
+                            @click=${this._removeRegistry}
+                          >
+                            <ha-svg-icon .path=${mdiDelete}></ha-svg-icon>
+                          </mwc-icon-button>
+                        </mwc-list-item>
+                      `;
+                    })
+                  : html`
+                      <mwc-list-item>
+                        <span>No registries configured</span>
+                      </mwc-list-item>
+                    `}
+                <mwc-button @click=${this._addRegistry}>
+                  Add new registry
+                </mwc-button> `}
+        </div>
+      </ha-dialog>
+    `;
+  }
+
+  private _inputChanged(ev: Event) {
+    const target = ev.currentTarget as PaperInputElement;
+    this[`_${target.name}`] = target.value;
+  }
+
+  public async showDialog(_dialogParams: any): Promise<void> {
+    this._opened = true;
+    await this._loadRegistries();
+    await this.updateComplete;
+  }
+
+  public closeDialog(): void {
+    this._addingRegistry = false;
+    this._opened = false;
+  }
+
+  public focus(): void {
+    this.updateComplete.then(() =>
+      (this.shadowRoot?.querySelector(
+        "[dialogInitialFocus]"
+      ) as HTMLElement)?.focus()
+    );
+  }
+
+  private async _loadRegistries(): Promise<void> {
+    const registries = await fetchHassioDockerRegistries(this.hass);
+    this._registries = Object.keys(registries!.registries).map((key) => ({
+      registry: key,
+      username: registries.registries[key].username,
+    }));
+  }
+
+  private _addRegistry(): void {
+    this._addingRegistry = true;
+  }
+
+  private async _addNewRegistry(): Promise<void> {
+    const data = {};
+    data[this._registry!] = {
+      username: this._username,
+      password: this._password,
+    };
+
+    try {
+      await addHassioDockerRegistry(this.hass, data);
+      await this._loadRegistries();
+      this._addingRegistry = false;
+    } catch (err) {
+      showAlertDialog(this, {
+        title: "Failed to add registry",
+        text: extractApiErrorMessage(err),
+      });
+    }
+  }
+
+  private async _removeRegistry(ev: Event): Promise<void> {
+    const entry = (ev.currentTarget as any).entry;
+
+    try {
+      await removeHassioDockerRegistry(this.hass, entry.registry);
+      await this._loadRegistries();
+    } catch (err) {
+      showAlertDialog(this, {
+        title: "Failed to remove registry",
+        text: extractApiErrorMessage(err),
+      });
+    }
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      haStyleDialog,
+      css`
+        ha-dialog.button-left {
+          --justify-action-buttons: flex-start;
+        }
+        paper-icon-item {
+          cursor: pointer;
+        }
+        .form {
+          color: var(--primary-text-color);
+        }
+        .option {
+          border: 1px solid var(--divider-color);
+          border-radius: 4px;
+          margin-top: 4px;
+        }
+        mwc-button {
+          margin-left: 8px;
+        }
+        mwc-icon-button {
+          color: var(--error-color);
+          margin: -10px;
+        }
+        mwc-list-item {
+          cursor: default;
+        }
+        mwc-list-item span[slot="secondary"] {
+          color: var(--secondary-text-color);
+        }
+        ha-paper-dropdown-menu {
+          display: block;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dialog-hassio-registries": HassioRegistriesDialog;
+  }
+}

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

@@ -0,0 +1,13 @@
+import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "./dialog-hassio-registries";
+
+export const showRegistriesDialog = (element: HTMLElement): void => {
+  fireEvent(element, "show-dialog", {
+    dialogTag: "dialog-hassio-registries",
+    dialogImport: () =>
+      import(
+        /* webpackChunkName: "dialog-hassio-registries" */ "./dialog-hassio-registries"
+      ),
+    dialogParams: {},
+  });
+};

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

@@ -1,6 +1,7 @@
 import "@material/mwc-button";
 import { mdiClose, mdiDelete, mdiDownload, mdiHistory } from "@mdi/js";
-import { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
+import "@polymer/paper-checkbox/paper-checkbox";
+import type { PaperCheckboxElement } from "@polymer/paper-checkbox/paper-checkbox";
 import "@polymer/paper-input/paper-input";
 import {
   css,

hassio/src/hassio-panel-router.ts

@@ -25,13 +25,13 @@ class HassioPanelRouter extends HassRouterPage {
 
   @property({ type: Boolean }) public narrow!: boolean;
 
-  @property({ attribute: false }) public supervisorInfo: HassioSupervisorInfo;
+  @property({ attribute: false }) public supervisorInfo?: HassioSupervisorInfo;
 
   @property({ attribute: false }) public hassioInfo!: HassioInfo;
 
-  @property({ attribute: false }) public hostInfo: HassioHostInfo;
+  @property({ attribute: false }) public hostInfo?: HassioHostInfo;
 
-  @property({ attribute: false }) public hassInfo: HassioHomeAssistantInfo;
+  @property({ attribute: false }) public hassInfo?: HassioHomeAssistantInfo;
 
   @property({ attribute: false }) public hassOsInfo!: HassioHassOSInfo;
 

hassio/src/hassio-router.ts

@@ -66,15 +66,15 @@ class HassioRouter extends HassRouterPage {
     },
   };
 
-  @internalProperty() private _supervisorInfo: HassioSupervisorInfo;
+  @internalProperty() private _supervisorInfo?: HassioSupervisorInfo;
 
-  @internalProperty() private _hostInfo: HassioHostInfo;
+  @internalProperty() private _hostInfo?: HassioHostInfo;
 
   @internalProperty() private _hassioInfo?: HassioInfo;
 
   @internalProperty() private _hassOsInfo?: HassioHassOSInfo;
 
-  @internalProperty() private _hassInfo: HassioHomeAssistantInfo;
+  @internalProperty() private _hassInfo?: HassioHomeAssistantInfo;
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);

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

@@ -108,8 +108,8 @@ class HassioHostInfo extends LitElement {
             <span slot="description">
               ${this.hostInfo.operating_system}
             </span>
-            ${this.hostInfo.version !== this.hostInfo.version_latest &&
-            this.hostInfo.features.includes("hassos")
+            ${this.hostInfo.features.includes("hassos") &&
+            this.hassOsInfo.update_available
               ? html`
                   <ha-progress-button
                     title="Update the host OS"

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

@@ -7,18 +7,21 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
+import { fireEvent } from "../../../src/common/dom/fire_event";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-card";
 import "../../../src/components/ha-settings-row";
 import "../../../src/components/ha-switch";
+import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import { HassioHostInfo as HassioHostInfoType } from "../../../src/data/hassio/host";
+import { fetchHassioResolution } from "../../../src/data/hassio/resolution";
 import {
+  fetchHassioSupervisorInfo,
   HassioSupervisorInfo as HassioSupervisorInfoType,
   reloadSupervisor,
   setSupervisorOption,
   SupervisorOptions,
   updateSupervisor,
-  fetchHassioSupervisorInfo,
 } from "../../../src/data/hassio/supervisor";
 import {
   showAlertDialog,
@@ -26,14 +29,42 @@ import {
 } from "../../../src/dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
+import { documentationUrl } from "../../../src/util/documentation-url";
 import { hassioStyle } from "../resources/hassio-style";
-import { extractApiErrorMessage } from "../../../src/data/hassio/common";
+
+const ISSUES = {
+  container: {
+    title: "Containers known to cause issues",
+    url: "/more-info/unsupported/container",
+  },
+  dbus: { title: "DBUS", url: "/more-info/unsupported/dbus" },
+  docker_configuration: {
+    title: "Docker Configuration",
+    url: "/more-info/unsupported/docker_configuration",
+  },
+  docker_version: {
+    title: "Docker Version",
+    url: "/more-info/unsupported/docker_version",
+  },
+  lxc: { title: "LXC", url: "/more-info/unsupported/lxc" },
+  network_manager: {
+    title: "Network Manager",
+    url: "/more-info/unsupported/network_manager",
+  },
+  os: { title: "Operating System", url: "/more-info/unsupported/os" },
+  privileged: {
+    title: "Supervisor is not privileged",
+    url: "/more-info/unsupported/privileged",
+  },
+  systemd: { title: "Systemd", url: "/more-info/unsupported/systemd" },
+};
 
 @customElement("hassio-supervisor-info")
 class HassioSupervisorInfo extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @property() public supervisorInfo!: HassioSupervisorInfoType;
+  @property({ attribute: false })
+  public supervisorInfo!: HassioSupervisorInfoType;
 
   @property() public hostInfo!: HassioHostInfoType;
 
@@ -56,7 +87,7 @@ class HassioSupervisorInfo extends LitElement {
             <span slot="description">
               ${this.supervisorInfo.version_latest}
             </span>
-            ${this.supervisorInfo.version !== this.supervisorInfo.version_latest
+            ${this.supervisorInfo.update_available
               ? html`
                   <ha-progress-button
                     title="Update the supervisor"
@@ -118,18 +149,13 @@ class HassioSupervisorInfo extends LitElement {
               </ha-settings-row>`
             : html`<div class="error">
                 You are running an unsupported installation.
-                <a
-                  href="https://github.com/home-assistant/architecture/blob/master/adr/${this.hostInfo.features.includes(
-                    "hassos"
-                  )
-                    ? "0015-home-assistant-os.md"
-                    : "0014-home-assistant-supervised.md"}"
-                  target="_blank"
-                  rel="noreferrer"
+                <button
+                  class="link"
                   title="Learn more about how you can make your system compliant"
+                  @click=${this._unsupportedDialog}
                 >
-                  Learn More
-                </a>
+                  Learn more
+                </button>
               </div>`}
         </div>
         <div class="card-actions">
@@ -181,7 +207,7 @@ class HassioSupervisorInfo extends LitElement {
       };
       await setSupervisorOption(this.hass, data);
       await reloadSupervisor(this.hass);
-      this.supervisorInfo = await fetchHassioSupervisorInfo(this.hass);
+      fireEvent(this, "hass-api-called", { success: true, response: null });
     } catch (err) {
       showAlertDialog(this, {
         title: "Failed to set supervisor option",
@@ -249,6 +275,32 @@ class HassioSupervisorInfo extends LitElement {
     });
   }
 
+  private async _unsupportedDialog(): Promise<void> {
+    const resolution = await fetchHassioResolution(this.hass);
+    await showAlertDialog(this, {
+      title: "You are running an unsupported installation",
+      text: html`Below is a list of issues found with your installation, click
+        on the links to learn how you can resolve the issues. <br /><br />
+        <ul>
+          ${resolution.unsupported.map(
+            (issue) => html`
+              <li>
+                ${ISSUES[issue]
+                  ? html`<a
+                      href="${documentationUrl(this.hass, ISSUES[issue].url)}"
+                      target="_blank"
+                      rel="noreferrer"
+                    >
+                      ${ISSUES[issue].title}
+                    </a>`
+                  : issue}
+              </li>
+            `
+          )}
+        </ul>`,
+    });
+  }
+
   private async _toggleDiagnostics(): Promise<void> {
     try {
       const data: SupervisorOptions = {

hassio/src/system/hassio-system-metrics.ts

@@ -21,11 +21,11 @@ import { fetchHassioStats, HassioStats } from "../../../src/data/hassio/common";
 import { HassioHostInfo } from "../../../src/data/hassio/host";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
+import { bytesToString } from "../../../src/util/bytes-to-string";
 import {
   getValueInPercentage,
   roundWithOneDecimal,
 } from "../../../src/util/calculate";
-import { bytesToString } from "../../../src/util/bytes-to-string";
 import { hassioStyle } from "../resources/hassio-style";
 
 @customElement("hassio-system-metrics")
@@ -65,9 +65,7 @@ class HassioSystemMetrics extends LitElement {
       {
         description: "Used Space",
         value: this._getUsedSpace(this.hostInfo),
-        tooltip: `${
-          this.hostInfo.disk_used
-        } GB/${this.hostInfo.disk_total} GB`,
+        tooltip: `${this.hostInfo.disk_used} GB/${this.hostInfo.disk_total} GB`,
       },
     ];
 

package.json

@@ -22,7 +22,8 @@
   "author": "Paulus Schoutsen <Paulus@PaulusSchoutsen.nl> (http://paulusschoutsen.nl)",
   "license": "Apache-2.0",
   "dependencies": {
-    "@formatjs/intl-pluralrules": "^1.5.8",
+    "@formatjs/intl-getcanonicallocales": "^1.4.6",
+    "@formatjs/intl-pluralrules": "^3.4.10",
     "@fullcalendar/common": "5.1.0",
     "@fullcalendar/core": "5.1.0",
     "@fullcalendar/daygrid": "5.1.0",
@@ -77,7 +78,7 @@
     "@polymer/paper-toast": "^3.0.1",
     "@polymer/paper-tooltip": "^3.0.1",
     "@polymer/polymer": "3.1.0",
-    "@thomasloven/round-slider": "0.5.0",
+    "@thomasloven/round-slider": "0.5.2",
     "@types/chromecast-caf-sender": "^1.0.3",
     "@types/sortablejs": "^1.10.6",
     "@vaadin/vaadin-combo-box": "^5.0.10",
@@ -109,7 +110,7 @@
     "marked": "^1.1.1",
     "mdn-polyfills": "^5.16.0",
     "memoize-one": "^5.0.2",
-    "node-vibrant": "^3.1.5",
+    "node-vibrant": "^3.1.6",
     "proxy-polyfill": "^0.3.1",
     "punycode": "^2.1.1",
     "qrcode": "^1.4.4",
@@ -118,6 +119,7 @@
     "roboto-fontface": "^0.10.0",
     "sortablejs": "^1.10.2",
     "superstruct": "^0.10.12",
+    "tinykeys": "^1.1.1",
     "unfetch": "^4.1.0",
     "vue": "^2.6.11",
     "vue2-daterange-picker": "^0.5.1",
@@ -202,15 +204,15 @@
     "sinon": "^7.3.1",
     "source-map-url": "^0.4.0",
     "systemjs": "^6.3.2",
-    "terser-webpack-plugin": "^3.0.6",
+    "terser-webpack-plugin": "^5.0.0",
     "ts-lit-plugin": "^1.2.1",
     "ts-mocha": "^7.0.0",
     "typescript": "^4.0.3",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
-    "webpack": "5.0.0-rc.3",
-    "webpack-cli": "4.0.0-rc.0",
-    "webpack-dev-server": "^3.10.3",
+    "webpack": "5.1.3",
+    "webpack-cli": "4.1.0",
+    "webpack-dev-server": "^3.11.0",
     "webpack-manifest-plugin": "3.0.0-rc.0",
     "workbox-build": "^5.1.3"
   },

setup.py

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

src/common/dom/dynamic-element-directive.ts

@@ -10,10 +10,7 @@ export const dynamicElement = directive(
 
     let element = part.value as HTMLElement | undefined;
 
-    if (
-      element !== undefined &&
-      tag.toUpperCase() === (element as HTMLElement).tagName
-    ) {
+    if (tag === element?.localName) {
       if (properties) {
         Object.entries(properties).forEach(([key, value]) => {
           element![key] = value;

src/common/entity/binary_sensor_icon.ts

@@ -23,7 +23,7 @@ export const binarySensorIcon = (state?: string, stateObj?: HassEntity) => {
     case "problem":
     case "safety":
     case "smoke":
-      return is_off ? "hass:shield-check" : "hass:alert";
+      return is_off ? "hass:check-circle" : "hass:alert-circle";
     case "heat":
       return is_off ? "hass:thermometer" : "hass:fire";
     case "light":

src/common/search/search-input.ts

@@ -51,18 +51,14 @@ class SearchInput extends LitElement {
         @value-changed=${this._filterInputChanged}
         .noLabelFloat=${this.noLabelFloat}
       >
-        <ha-svg-icon
-          .path=${mdiMagnify}
-          slot="prefix"
-          class="prefix"
-        ></ha-svg-icon>
+        <slot name="prefix" slot="prefix">
+          <ha-svg-icon class="prefix" .path=${mdiMagnify}></ha-svg-icon>
+        </slot>
         ${this.filter &&
         html`
           <mwc-icon-button
             slot="suffix"
-            class="suffix"
             @click=${this._clearSearch}
-            alt="Clear"
             title="Clear"
           >
             <ha-svg-icon .path=${mdiClose}></ha-svg-icon>

src/common/string/filter/char-code.ts

@@ -0,0 +1,244 @@
+// MIT License
+
+// Copyright (c) 2015 - present Microsoft Corporation
+
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+// Names from https://blog.codinghorror.com/ascii-pronunciation-rules-for-programmers/
+
+/**
+ * An inlined enum containing useful character codes (to be used with String.charCodeAt).
+ * Please leave the const keyword such that it gets inlined when compiled to JavaScript!
+ */
+export enum CharCode {
+  Null = 0,
+  /**
+   * The `\b` character.
+   */
+  Backspace = 8,
+  /**
+   * The `\t` character.
+   */
+  Tab = 9,
+  /**
+   * The `\n` character.
+   */
+  LineFeed = 10,
+  /**
+   * The `\r` character.
+   */
+  CarriageReturn = 13,
+  Space = 32,
+  /**
+   * The `!` character.
+   */
+  ExclamationMark = 33,
+  /**
+   * The `"` character.
+   */
+  DoubleQuote = 34,
+  /**
+   * The `#` character.
+   */
+  Hash = 35,
+  /**
+   * The `$` character.
+   */
+  DollarSign = 36,
+  /**
+   * The `%` character.
+   */
+  PercentSign = 37,
+  /**
+   * The `&` character.
+   */
+  Ampersand = 38,
+  /**
+   * The `'` character.
+   */
+  SingleQuote = 39,
+  /**
+   * The `(` character.
+   */
+  OpenParen = 40,
+  /**
+   * The `)` character.
+   */
+  CloseParen = 41,
+  /**
+   * The `*` character.
+   */
+  Asterisk = 42,
+  /**
+   * The `+` character.
+   */
+  Plus = 43,
+  /**
+   * The `,` character.
+   */
+  Comma = 44,
+  /**
+   * The `-` character.
+   */
+  Dash = 45,
+  /**
+   * The `.` character.
+   */
+  Period = 46,
+  /**
+   * The `/` character.
+   */
+  Slash = 47,
+
+  Digit0 = 48,
+  Digit1 = 49,
+  Digit2 = 50,
+  Digit3 = 51,
+  Digit4 = 52,
+  Digit5 = 53,
+  Digit6 = 54,
+  Digit7 = 55,
+  Digit8 = 56,
+  Digit9 = 57,
+
+  /**
+   * The `:` character.
+   */
+  Colon = 58,
+  /**
+   * The `;` character.
+   */
+  Semicolon = 59,
+  /**
+   * The `<` character.
+   */
+  LessThan = 60,
+  /**
+   * The `=` character.
+   */
+  Equals = 61,
+  /**
+   * The `>` character.
+   */
+  GreaterThan = 62,
+  /**
+   * The `?` character.
+   */
+  QuestionMark = 63,
+  /**
+   * The `@` character.
+   */
+  AtSign = 64,
+
+  A = 65,
+  B = 66,
+  C = 67,
+  D = 68,
+  E = 69,
+  F = 70,
+  G = 71,
+  H = 72,
+  I = 73,
+  J = 74,
+  K = 75,
+  L = 76,
+  M = 77,
+  N = 78,
+  O = 79,
+  P = 80,
+  Q = 81,
+  R = 82,
+  S = 83,
+  T = 84,
+  U = 85,
+  V = 86,
+  W = 87,
+  X = 88,
+  Y = 89,
+  Z = 90,
+
+  /**
+   * The `[` character.
+   */
+  OpenSquareBracket = 91,
+  /**
+   * The `\` character.
+   */
+  Backslash = 92,
+  /**
+   * The `]` character.
+   */
+  CloseSquareBracket = 93,
+  /**
+   * The `^` character.
+   */
+  Caret = 94,
+  /**
+   * The `_` character.
+   */
+  Underline = 95,
+  /**
+   * The ``(`)`` character.
+   */
+  BackTick = 96,
+
+  a = 97,
+  b = 98,
+  c = 99,
+  d = 100,
+  e = 101,
+  f = 102,
+  g = 103,
+  h = 104,
+  i = 105,
+  j = 106,
+  k = 107,
+  l = 108,
+  m = 109,
+  n = 110,
+  o = 111,
+  p = 112,
+  q = 113,
+  r = 114,
+  s = 115,
+  t = 116,
+  u = 117,
+  v = 118,
+  w = 119,
+  x = 120,
+  y = 121,
+  z = 122,
+
+  /**
+   * The `{` character.
+   */
+  OpenCurlyBrace = 123,
+  /**
+   * The `|` character.
+   */
+  Pipe = 124,
+  /**
+   * The `}` character.
+   */
+  CloseCurlyBrace = 125,
+  /**
+   * The `~` character.
+   */
+  Tilde = 126,
+}

src/common/string/filter/filter.ts

@@ -0,0 +1,463 @@
+/* eslint-disable no-console */
+// MIT License
+
+// Copyright (c) 2015 - present Microsoft Corporation
+
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import { CharCode } from "./char-code";
+
+const _debug = false;
+
+export interface Match {
+  start: number;
+  end: number;
+}
+
+const _maxLen = 128;
+
+function initTable() {
+  const table: number[][] = [];
+  const row: number[] = [0];
+  for (let i = 1; i <= _maxLen; i++) {
+    row.push(-i);
+  }
+  for (let i = 0; i <= _maxLen; i++) {
+    const thisRow = row.slice(0);
+    thisRow[0] = -i;
+    table.push(thisRow);
+  }
+  return table;
+}
+
+function isSeparatorAtPos(value: string, index: number): boolean {
+  if (index < 0 || index >= value.length) {
+    return false;
+  }
+  const code = value.charCodeAt(index);
+  switch (code) {
+    case CharCode.Underline:
+    case CharCode.Dash:
+    case CharCode.Period:
+    case CharCode.Space:
+    case CharCode.Slash:
+    case CharCode.Backslash:
+    case CharCode.SingleQuote:
+    case CharCode.DoubleQuote:
+    case CharCode.Colon:
+    case CharCode.DollarSign:
+      return true;
+    default:
+      return false;
+  }
+}
+
+function isWhitespaceAtPos(value: string, index: number): boolean {
+  if (index < 0 || index >= value.length) {
+    return false;
+  }
+  const code = value.charCodeAt(index);
+  switch (code) {
+    case CharCode.Space:
+    case CharCode.Tab:
+      return true;
+    default:
+      return false;
+  }
+}
+
+function isUpperCaseAtPos(pos: number, word: string, wordLow: string): boolean {
+  return word[pos] !== wordLow[pos];
+}
+
+function isPatternInWord(
+  patternLow: string,
+  patternPos: number,
+  patternLen: number,
+  wordLow: string,
+  wordPos: number,
+  wordLen: number
+): boolean {
+  while (patternPos < patternLen && wordPos < wordLen) {
+    if (patternLow[patternPos] === wordLow[wordPos]) {
+      patternPos += 1;
+    }
+    wordPos += 1;
+  }
+  return patternPos === patternLen; // pattern must be exhausted
+}
+
+enum Arrow {
+  Top = 0b1,
+  Diag = 0b10,
+  Left = 0b100,
+}
+
+/**
+ * A tuple of three values.
+ * 0. the score
+ * 1. the matches encoded as bitmask (2^53)
+ * 2. the offset at which matching started
+ */
+export type FuzzyScore = [number, number, number];
+
+interface FilterGlobals {
+  _matchesCount: number;
+  _topMatch2: number;
+  _topScore: number;
+  _wordStart: number;
+  _firstMatchCanBeWeak: boolean;
+  _table: number[][];
+  _scores: number[][];
+  _arrows: Arrow[][];
+}
+
+function initGlobals(): FilterGlobals {
+  return {
+    _matchesCount: 0,
+    _topMatch2: 0,
+    _topScore: 0,
+    _wordStart: 0,
+    _firstMatchCanBeWeak: false,
+    _table: initTable(),
+    _scores: initTable(),
+    _arrows: <Arrow[][]>initTable(),
+  };
+}
+
+export function fuzzyScore(
+  pattern: string,
+  patternLow: string,
+  patternStart: number,
+  word: string,
+  wordLow: string,
+  wordStart: number,
+  firstMatchCanBeWeak: boolean
+): FuzzyScore | undefined {
+  const globals = initGlobals();
+  const patternLen = pattern.length > _maxLen ? _maxLen : pattern.length;
+  const wordLen = word.length > _maxLen ? _maxLen : word.length;
+
+  if (
+    patternStart >= patternLen ||
+    wordStart >= wordLen ||
+    patternLen - patternStart > wordLen - wordStart
+  ) {
+    return undefined;
+  }
+
+  // Run a simple check if the characters of pattern occur
+  // (in order) at all in word. If that isn't the case we
+  // stop because no match will be possible
+  if (
+    !isPatternInWord(
+      patternLow,
+      patternStart,
+      patternLen,
+      wordLow,
+      wordStart,
+      wordLen
+    )
+  ) {
+    return undefined;
+  }
+
+  let row = 1;
+  let column = 1;
+  let patternPos = patternStart;
+  let wordPos = wordStart;
+
+  let hasStrongFirstMatch = false;
+
+  // There will be a match, fill in tables
+  for (
+    row = 1, patternPos = patternStart;
+    patternPos < patternLen;
+    row++, patternPos++
+  ) {
+    for (
+      column = 1, wordPos = wordStart;
+      wordPos < wordLen;
+      column++, wordPos++
+    ) {
+      const score = _doScore(
+        pattern,
+        patternLow,
+        patternPos,
+        patternStart,
+        word,
+        wordLow,
+        wordPos
+      );
+
+      if (patternPos === patternStart && score > 1) {
+        hasStrongFirstMatch = true;
+      }
+
+      globals._scores[row][column] = score;
+
+      const diag =
+        globals._table[row - 1][column - 1] + (score > 1 ? 1 : score);
+      const top = globals._table[row - 1][column] + -1;
+      const left = globals._table[row][column - 1] + -1;
+
+      if (left >= top) {
+        // left or diag
+        if (left > diag) {
+          globals._table[row][column] = left;
+          globals._arrows[row][column] = Arrow.Left;
+        } else if (left === diag) {
+          globals._table[row][column] = left;
+          globals._arrows[row][column] = Arrow.Left || Arrow.Diag;
+        } else {
+          globals._table[row][column] = diag;
+          globals._arrows[row][column] = Arrow.Diag;
+        }
+      } else if (top > diag) {
+        globals._table[row][column] = top;
+        globals._arrows[row][column] = Arrow.Top;
+      } else if (top === diag) {
+        globals._table[row][column] = top;
+        globals._arrows[row][column] = Arrow.Top || Arrow.Diag;
+      } else {
+        globals._table[row][column] = diag;
+        globals._arrows[row][column] = Arrow.Diag;
+      }
+    }
+  }
+
+  if (_debug) {
+    printTables(pattern, patternStart, word, wordStart, globals);
+  }
+
+  if (!hasStrongFirstMatch && !firstMatchCanBeWeak) {
+    return undefined;
+  }
+
+  globals._matchesCount = 0;
+  globals._topScore = -100;
+  globals._wordStart = wordStart;
+  globals._firstMatchCanBeWeak = firstMatchCanBeWeak;
+
+  _findAllMatches2(
+    row - 1,
+    column - 1,
+    patternLen === wordLen ? 1 : 0,
+    0,
+    false,
+    globals
+  );
+  if (globals._matchesCount === 0) {
+    return undefined;
+  }
+
+  return [globals._topScore, globals._topMatch2, wordStart];
+}
+
+function _doScore(
+  pattern: string,
+  patternLow: string,
+  patternPos: number,
+  patternStart: number,
+  word: string,
+  wordLow: string,
+  wordPos: number
+) {
+  if (patternLow[patternPos] !== wordLow[wordPos]) {
+    return -1;
+  }
+  if (wordPos === patternPos - patternStart) {
+    // common prefix: `foobar <-> foobaz`
+    //                            ^^^^^
+    if (pattern[patternPos] === word[wordPos]) {
+      return 7;
+    }
+    return 5;
+  }
+
+  if (
+    isUpperCaseAtPos(wordPos, word, wordLow) &&
+    (wordPos === 0 || !isUpperCaseAtPos(wordPos - 1, word, wordLow))
+  ) {
+    // hitting upper-case: `foo <-> forOthers`
+    //                              ^^ ^
+    if (pattern[patternPos] === word[wordPos]) {
+      return 7;
+    }
+    return 5;
+  }
+
+  if (
+    isSeparatorAtPos(wordLow, wordPos) &&
+    (wordPos === 0 || !isSeparatorAtPos(wordLow, wordPos - 1))
+  ) {
+    // hitting a separator: `. <-> foo.bar`
+    //                                ^
+    return 5;
+  }
+
+  if (
+    isSeparatorAtPos(wordLow, wordPos - 1) ||
+    isWhitespaceAtPos(wordLow, wordPos - 1)
+  ) {
+    // post separator: `foo <-> bar_foo`
+    //                              ^^^
+    return 5;
+  }
+  return 1;
+}
+
+function printTable(
+  table: number[][],
+  pattern: string,
+  patternLen: number,
+  word: string,
+  wordLen: number
+): string {
+  function pad(s: string, n: number, _pad = " ") {
+    while (s.length < n) {
+      s = _pad + s;
+    }
+    return s;
+  }
+  let ret = ` |   |${word
+    .split("")
+    .map((c) => pad(c, 3))
+    .join("|")}\n`;
+
+  for (let i = 0; i <= patternLen; i++) {
+    if (i === 0) {
+      ret += " |";
+    } else {
+      ret += `${pattern[i - 1]}|`;
+    }
+    ret +=
+      table[i]
+        .slice(0, wordLen + 1)
+        .map((n) => pad(n.toString(), 3))
+        .join("|") + "\n";
+  }
+  return ret;
+}
+
+function printTables(
+  pattern: string,
+  patternStart: number,
+  word: string,
+  wordStart: number,
+  globals: FilterGlobals
+): void {
+  pattern = pattern.substr(patternStart);
+  word = word.substr(wordStart);
+  console.log(
+    printTable(globals._table, pattern, pattern.length, word, word.length)
+  );
+  console.log(
+    printTable(globals._arrows, pattern, pattern.length, word, word.length)
+  );
+  console.log(
+    printTable(globals._scores, pattern, pattern.length, word, word.length)
+  );
+}
+
+function _findAllMatches2(
+  row: number,
+  column: number,
+  total: number,
+  matches: number,
+  lastMatched: boolean,
+  globals: FilterGlobals
+): void {
+  if (globals._matchesCount >= 10 || total < -25) {
+    // stop when having already 10 results, or
+    // when a potential alignment as already 5 gaps
+    return;
+  }
+
+  let simpleMatchCount = 0;
+
+  while (row > 0 && column > 0) {
+    const score = globals._scores[row][column];
+    const arrow = globals._arrows[row][column];
+
+    if (arrow === Arrow.Left) {
+      // left -> no match, skip a word character
+      column -= 1;
+      if (lastMatched) {
+        total -= 5; // new gap penalty
+      } else if (matches !== 0) {
+        total -= 1; // gap penalty after first match
+      }
+      lastMatched = false;
+      simpleMatchCount = 0;
+    } else if (arrow && Arrow.Diag) {
+      if (arrow && Arrow.Left) {
+        // left
+        _findAllMatches2(
+          row,
+          column - 1,
+          matches !== 0 ? total - 1 : total, // gap penalty after first match
+          matches,
+          lastMatched,
+          globals
+        );
+      }
+
+      // diag
+      total += score;
+      row -= 1;
+      column -= 1;
+      lastMatched = true;
+
+      // match -> set a 1 at the word pos
+      matches += 2 ** (column + globals._wordStart);
+
+      // count simple matches and boost a row of
+      // simple matches when they yield in a
+      // strong match.
+      if (score === 1) {
+        simpleMatchCount += 1;
+
+        if (row === 0 && !globals._firstMatchCanBeWeak) {
+          // when the first match is a weak
+          // match we discard it
+          return;
+        }
+      } else {
+        // boost
+        total += 1 + simpleMatchCount * (score - 1);
+        simpleMatchCount = 0;
+      }
+    } else {
+      return;
+    }
+  }
+
+  total -= column >= 3 ? 9 : column * 3; // late start penalty
+
+  // dynamically keep track of the current top score
+  // and insert the current best score at head, the rest at tail
+  globals._matchesCount += 1;
+  if (total > globals._topScore) {
+    globals._topScore = total;
+    globals._topMatch2 = matches;
+  }
+}
+
+// #endregion

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

@@ -0,0 +1,66 @@
+import { fuzzyScore } from "./filter";
+
+/**
+ * Determine whether a sequence of letters exists in another string,
+ *   in that order, allowing for skipping. Ex: "chdr" exists in "chandelier")
+ *
+ * @param {string} filter - Sequence of letters to check for
+ * @param {string} word - Word to check for sequence
+ *
+ * @return {number} Score representing how well the word matches the filter. Return of 0 means no match.
+ */
+
+export const fuzzySequentialMatch = (filter: string, ...words: string[]) => {
+  let topScore = 0;
+
+  for (const word of words) {
+    const scores = fuzzyScore(
+      filter,
+      filter.toLowerCase(),
+      0,
+      word,
+      word.toLowerCase(),
+      0,
+      true
+    );
+
+    if (!scores) {
+      continue;
+    }
+
+    // The VS Code implementation of filter treats a score of "0" as just barely a match
+    // But we will typically use this matcher in a .filter(), which interprets 0 as a failure.
+    // By shifting all scores up by 1, we allow "0" matches, while retaining score precedence
+    const score = scores[0] + 1;
+
+    if (score > topScore) {
+      topScore = score;
+    }
+  }
+  return topScore;
+};
+
+export interface ScorableTextItem {
+  score?: number;
+  text: string;
+  altText?: string;
+}
+
+type FuzzyFilterSort = <T extends ScorableTextItem>(
+  filter: string,
+  items: T[]
+) => T[];
+
+export const fuzzyFilterSort: FuzzyFilterSort = (filter, items) => {
+  return items
+    .map((item) => {
+      item.score = item.altText
+        ? fuzzySequentialMatch(filter, item.text, item.altText)
+        : fuzzySequentialMatch(filter, item.text);
+      return item;
+    })
+    .filter((item) => item.score !== undefined && item.score > 0)
+    .sort(({ score: scoreA = 0 }, { score: scoreB = 0 }) =>
+      scoreA > scoreB ? -1 : scoreA < scoreB ? 1 : 0
+    );
+};

src/common/string/sequence_matching.ts

@@ -1,29 +0,0 @@
-/**
- * Determine whether a sequence of letters exists in another string,
- *   in that order, allowing for skipping. Ex: "chdr" exists in "chandelier")
- *
- * filter => sequence of letters
- * word => Word to check for sequence
- *
- * return true if word contains sequence. Otherwise false.
- */
-export const fuzzySequentialMatch = (filter: string, word: string) => {
-  if (filter === "") {
-    return true;
-  }
-
-  for (let i = 0; i <= filter.length; i++) {
-    const pos = word.indexOf(filter[0]);
-
-    if (pos < 0) {
-      return false;
-    }
-
-    const newWord = word.substring(pos + 1);
-    const newFilter = filter.substring(1);
-
-    return fuzzySequentialMatch(newFilter, newWord);
-  }
-
-  return true;
-};

src/common/translations/localize.ts

@@ -1,4 +1,5 @@
 import IntlMessageFormat from "intl-messageformat";
+import { shouldPolyfill } from "@formatjs/intl-pluralrules/should-polyfill";
 import { Resources } from "../../types";
 
 export type LocalizeFunc = (key: string, ...args: any[]) => string;
@@ -12,9 +13,12 @@ export interface FormatsType {
   time: FormatType;
 }
 
-if (!Intl.PluralRules) {
-  import("@formatjs/intl-pluralrules/polyfill-locales");
-}
+let polyfillLoaded = !shouldPolyfill();
+const polyfillProm = polyfillLoaded
+  ? import("@formatjs/intl-pluralrules/polyfill-locales").then(() => {
+      polyfillLoaded = true;
+    })
+  : undefined;
 
 /**
  * Adapted from Polymer app-localize-behavior.
@@ -37,12 +41,16 @@ if (!Intl.PluralRules) {
  * }
  */
 
-export const computeLocalize = (
+export const computeLocalize = async (
   cache: any,
   language: string,
   resources: Resources,
   formats?: FormatsType
-): LocalizeFunc => {
+): Promise<LocalizeFunc> => {
+  if (!polyfillLoaded) {
+    await polyfillProm;
+  }
+
   // Everytime any of the parameters change, invalidate the strings cache.
   cache._localizationCache = {};
 

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

@@ -94,6 +94,8 @@ export class HaDataTable extends LitElement {
 
   @property({ type: Boolean }) public selectable = false;
 
+  @property({ type: Boolean }) public clickable = false;
+
   @property({ type: Boolean }) public hasFab = false;
 
   @property({ type: Boolean, attribute: "auto-height" })
@@ -327,12 +329,13 @@ export class HaDataTable extends LitElement {
                         <div
                           aria-rowindex=${index}
                           role="row"
-                          .rowId="${row[this.id]}"
+                          .rowId=${row[this.id]}
                           @click=${this._handleRowClick}
                           class="mdc-data-table__row ${classMap({
                             "mdc-data-table__row--selected": this._checkedRows.includes(
                               String(row[this.id])
                             ),
+                            clickable: this.clickable,
                           })}"
                           aria-selected=${ifDefined(
                             this._checkedRows.includes(String(row[this.id]))
@@ -350,6 +353,7 @@ export class HaDataTable extends LitElement {
                                   <ha-checkbox
                                     class="mdc-data-table__row-checkbox"
                                     @change=${this._handleRowCheckboxClick}
+                                    .rowId=${row[this.id]}
                                     .disabled=${row.selectable === false}
                                     .checked=${this._checkedRows.includes(
                                       String(row[this.id])
@@ -457,9 +461,7 @@ export class HaDataTable extends LitElement {
   );
 
   private _handleHeaderClick(ev: Event) {
-    const columnId = ((ev.target as HTMLElement).closest(
-      ".mdc-data-table__header-cell"
-    ) as any).columnId;
+    const columnId = (ev.currentTarget as any).columnId;
     if (!this.columns[columnId].sortable) {
       return;
     }
@@ -493,8 +495,8 @@ export class HaDataTable extends LitElement {
   }
 
   private _handleRowCheckboxClick(ev: Event) {
-    const checkbox = ev.target as HaCheckbox;
-    const rowId = (checkbox.closest(".mdc-data-table__row") as any).rowId;
+    const checkbox = ev.currentTarget as HaCheckbox;
+    const rowId = (checkbox as any).rowId;
 
     if (checkbox.checked) {
       if (this._checkedRows.includes(rowId)) {
@@ -512,7 +514,7 @@ export class HaDataTable extends LitElement {
     if (target.tagName === "HA-CHECKBOX") {
       return;
     }
-    const rowId = (target.closest(".mdc-data-table__row") as any).rowId;
+    const rowId = (ev.currentTarget as any).rowId;
     fireEvent(this, "row-click", { id: rowId }, { bubbles: false });
   }
 
@@ -886,6 +888,9 @@ export class HaDataTable extends LitElement {
       .forceLTR {
         direction: ltr;
       }
+      .clickable {
+        cursor: pointer;
+      }
     `;
   }
 }

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

@@ -9,9 +9,17 @@ import { HaDeviceAutomationPicker } from "./ha-device-automation-picker";
 
 @customElement("ha-device-action-picker")
 class HaDeviceActionPicker extends HaDeviceAutomationPicker<DeviceAction> {
-  protected NO_AUTOMATION_TEXT = "No actions";
+  protected get NO_AUTOMATION_TEXT() {
+    return this.hass.localize(
+      "ui.panel.config.devices.automation.actions.no_actions"
+    );
+  }
 
-  protected UNKNOWN_AUTOMATION_TEXT = "Unknown action";
+  protected get UNKNOWN_AUTOMATION_TEXT() {
+    return this.hass.localize(
+      "ui.panel.config.devices.automation.actions.unknown_action"
+    );
+  }
 
   constructor() {
     super(

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

@@ -33,16 +33,24 @@ export abstract class HaDeviceAutomationPicker<
 
   @property() public value?: T;
 
-  protected NO_AUTOMATION_TEXT = "No automations";
-
-  protected UNKNOWN_AUTOMATION_TEXT = "Unknown automation";
-
   @internalProperty() private _automations: T[] = [];
 
   // Trigger an empty render so we start with a clean DOM.
   // paper-listbox does not like changing things around.
   @internalProperty() private _renderEmpty = false;
 
+  protected get NO_AUTOMATION_TEXT() {
+    return this.hass.localize(
+      "ui.panel.config.devices.automation.actions.no_actions"
+    );
+  }
+
+  protected get UNKNOWN_AUTOMATION_TEXT() {
+    return this.hass.localize(
+      "ui.panel.config.devices.automation.actions.unknown_action"
+    );
+  }
+
   private _localizeDeviceAutomation: (
     hass: HomeAssistant,
     automation: T

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

@@ -11,9 +11,17 @@ import { HaDeviceAutomationPicker } from "./ha-device-automation-picker";
 class HaDeviceConditionPicker extends HaDeviceAutomationPicker<
   DeviceCondition
 > {
-  protected NO_AUTOMATION_TEXT = "No conditions";
+  protected get NO_AUTOMATION_TEXT() {
+    return this.hass.localize(
+      "ui.panel.config.devices.automation.conditions.no_conditions"
+    );
+  }
 
-  protected UNKNOWN_AUTOMATION_TEXT = "Unknown condition";
+  protected get UNKNOWN_AUTOMATION_TEXT() {
+    return this.hass.localize(
+      "ui.panel.config.devices.automation.conditions.unknown_condition"
+    );
+  }
 
   constructor() {
     super(

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

@@ -9,9 +9,17 @@ import { HaDeviceAutomationPicker } from "./ha-device-automation-picker";
 
 @customElement("ha-device-trigger-picker")
 class HaDeviceTriggerPicker extends HaDeviceAutomationPicker<DeviceTrigger> {
-  protected NO_AUTOMATION_TEXT = "No triggers";
+  protected get NO_AUTOMATION_TEXT() {
+    return this.hass.localize(
+      "ui.panel.config.devices.automation.triggers.no_triggers"
+    );
+  }
 
-  protected UNKNOWN_AUTOMATION_TEXT = "Unknown trigger";
+  protected get UNKNOWN_AUTOMATION_TEXT() {
+    return this.hass.localize(
+      "ui.panel.config.devices.automation.triggers.unknown_trigger"
+    );
+  }
 
   constructor() {
     super(

src/components/entity/ha-chart-base.js

@@ -278,7 +278,7 @@ class HaChartBase extends mixinBehaviors(
     this.set(["tooltip", "title"], title);
 
     if (tooltip.beforeBody) {
-        this.set(["tooltip", "beforeBody"], tooltip.beforeBody.join("\n"));
+      this.set(["tooltip", "beforeBody"], tooltip.beforeBody.join("\n"));
     }
 
     const bodyLines = tooltip.body.map((n) => n.lines);

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

@@ -1,3 +1,4 @@
+import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
 import "@vaadin/vaadin-combo-box/theme/material/vaadin-combo-box-light";
@@ -16,8 +17,9 @@ import {
 import { fireEvent } from "../../common/dom/fire_event";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
-import "../ha-icon-button";
+import "../ha-svg-icon";
 import "./state-badge";
+import "@material/mwc-icon-button/mwc-icon-button";
 
 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
 
@@ -80,6 +82,7 @@ class HaEntityAttributePicker extends LitElement {
         .value=${this._value}
         .allowCustomValue=${this.allowCustomValue}
         .renderer=${rowRenderer}
+        attr-for-value="bind-value"
         @opened-changed=${this._openedChanged}
         @value-changed=${this._valueChanged}
       >
@@ -97,33 +100,35 @@ class HaEntityAttributePicker extends LitElement {
           autocorrect="off"
           spellcheck="false"
         >
-          ${this.value
-            ? html`
-                <ha-icon-button
-                  aria-label=${this.hass.localize(
-                    "ui.components.entity.entity-picker.clear"
-                  )}
-                  slot="suffix"
-                  class="clear-button"
-                  icon="hass:close"
-                  @click=${this._clearValue}
-                  no-ripple
-                >
-                  Clear
-                </ha-icon-button>
-              `
-            : ""}
+          <div class="suffix" slot="suffix">
+            ${this.value
+              ? html`
+                  <mwc-icon-button
+                    .label=${this.hass.localize(
+                      "ui.components.entity.entity-picker.clear"
+                    )}
+                    class="clear-button"
+                    tabindex="-1"
+                    @click=${this._clearValue}
+                    no-ripple
+                  >
+                    <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+                  </mwc-icon-button>
+                `
+              : ""}
 
-          <ha-icon-button
-            aria-label=${this.hass.localize(
-              "ui.components.entity.entity-attribute-picker.show_attributes"
-            )}
-            slot="suffix"
-            class="toggle-button"
-            .icon=${this._opened ? "hass:menu-up" : "hass:menu-down"}
-          >
-            Toggle
-          </ha-icon-button>
+            <mwc-icon-button
+              .label=${this.hass.localize(
+                "ui.components.entity.entity-attribute-picker.show_attributes"
+              )}
+              class="toggle-button"
+              tabindex="-1"
+            >
+              <ha-svg-icon
+                .path=${this._opened ? mdiMenuUp : mdiMenuDown}
+              ></ha-svg-icon>
+            </mwc-icon-button>
+          </div>
         </paper-input>
       </vaadin-combo-box-light>
     `;
@@ -159,7 +164,10 @@ class HaEntityAttributePicker extends LitElement {
 
   static get styles(): CSSResult {
     return css`
-      paper-input > ha-icon-button {
+      .suffix {
+        display: flex;
+      }
+      mwc-icon-button {
         --mdc-icon-button-size: 24px;
         padding: 0px 2px;
         color: var(--secondary-text-color);

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

@@ -1,3 +1,5 @@
+import "@material/mwc-icon-button/mwc-icon-button";
+import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
@@ -20,7 +22,7 @@ import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
-import "../ha-icon-button";
+import "../ha-svg-icon";
 import "./state-badge";
 
 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
@@ -101,6 +103,8 @@ export class HaEntityPicker extends LitElement {
 
   private _initedStates = false;
 
+  private _states: HassEntity[] = [];
+
   private _getStates = memoizeOne(
     (
       _opened: boolean,
@@ -166,7 +170,7 @@ export class HaEntityPicker extends LitElement {
 
   protected updated(changedProps: PropertyValues) {
     if (!this._initedStates || (changedProps.has("_opened") && this._opened)) {
-      const states = this._getStates(
+      this._states = this._getStates(
         this._opened,
         this.hass,
         this.includeDomains,
@@ -174,7 +178,7 @@ export class HaEntityPicker extends LitElement {
         this.entityFilter,
         this.includeDeviceClasses
       );
-      (this._comboBox as any).items = states;
+      (this._comboBox as any).filteredItems = this._states;
       this._initedStates = true;
     }
   }
@@ -192,6 +196,7 @@ export class HaEntityPicker extends LitElement {
         .renderer=${rowRenderer}
         @opened-changed=${this._openedChanged}
         @value-changed=${this._valueChanged}
+        @filter-changed=${this._filterChanged}
       >
         <paper-input
           .autofocus=${this.autofocus}
@@ -206,35 +211,35 @@ export class HaEntityPicker extends LitElement {
           autocorrect="off"
           spellcheck="false"
         >
-          ${this.value && !this.hideClearIcon
-            ? html`
-                <ha-icon-button
-                  aria-label=${this.hass.localize(
-                    "ui.components.entity.entity-picker.clear"
-                  )}
-                  slot="suffix"
-                  class="clear-button"
-                  icon="hass:close"
-                  tabindex="-1"
-                  @click=${this._clearValue}
-                  no-ripple
-                >
-                  Clear
-                </ha-icon-button>
-              `
-            : ""}
+          <div class="suffix" slot="suffix">
+            ${this.value && !this.hideClearIcon
+              ? html`
+                  <mwc-icon-button
+                    .label=${this.hass.localize(
+                      "ui.components.entity.entity-picker.clear"
+                    )}
+                    class="clear-button"
+                    tabindex="-1"
+                    @click=${this._clearValue}
+                    no-ripple
+                  >
+                    <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+                  </mwc-icon-button>
+                `
+              : ""}
 
-          <ha-icon-button
-            aria-label=${this.hass.localize(
-              "ui.components.entity.entity-picker.show_entities"
-            )}
-            slot="suffix"
-            class="toggle-button"
-            .icon=${this._opened ? "hass:menu-up" : "hass:menu-down"}
-            tabindex="-1"
-          >
-            Toggle
-          </ha-icon-button>
+            <mwc-icon-button
+              .label=${this.hass.localize(
+                "ui.components.entity.entity-picker.show_entities"
+              )}
+              class="toggle-button"
+              tabindex="-1"
+            >
+              <ha-svg-icon
+                .path=${this._opened ? mdiMenuUp : mdiMenuDown}
+              ></ha-svg-icon>
+            </mwc-icon-button>
+          </div>
         </paper-input>
       </vaadin-combo-box-light>
     `;
@@ -260,6 +265,15 @@ export class HaEntityPicker extends LitElement {
     }
   }
 
+  private _filterChanged(ev: CustomEvent): void {
+    const filterString = ev.detail.value.toLowerCase();
+    (this._comboBox as any).filteredItems = this._states.filter(
+      (state) =>
+        state.entity_id.toLowerCase().includes(filterString) ||
+        computeStateName(state).toLowerCase().includes(filterString)
+    );
+  }
+
   private _setValue(value: string) {
     this.value = value;
     setTimeout(() => {
@@ -270,7 +284,10 @@ export class HaEntityPicker extends LitElement {
 
   static get styles(): CSSResult {
     return css`
-      paper-input > ha-icon-button {
+      .suffix {
+        display: flex;
+      }
+      mwc-icon-button {
         --mdc-icon-button-size: 24px;
         padding: 0px 2px;
         color: var(--secondary-text-color);

src/components/entity/state-badge.ts

@@ -11,11 +11,14 @@ import {
 } from "lit-element";
 import { ifDefined } from "lit-html/directives/if-defined";
 import { styleMap } from "lit-html/directives/style-map";
+
 import { computeActiveState } from "../../common/entity/compute_active_state";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { stateIcon } from "../../common/entity/state_icon";
 import { iconColorCSS } from "../../common/style/icon_color_css";
+
 import type { HomeAssistant } from "../../types";
+
 import "../ha-icon";
 
 export class StateBadge extends LitElement {
@@ -37,7 +40,13 @@ export class StateBadge extends LitElement {
   protected render(): TemplateResult {
     const stateObj = this.stateObj;
 
-    if (!stateObj || !this._showIcon) {
+    if (!stateObj) {
+      return html`<div class="missing">
+        <ha-icon icon="hass:alert"></ha-icon>
+      </div>`;
+    }
+
+    if (!this._showIcon) {
       return html``;
     }
 
@@ -140,6 +149,9 @@ export class StateBadge extends LitElement {
       ha-icon {
         transition: color 0.3s ease-in-out, filter 0.3s ease-in-out;
       }
+      .missing {
+        color: #fce588;
+      }
 
       ${iconColorCSS}
     `;

src/components/ha-attributes.ts

@@ -34,7 +34,7 @@ class HaAttributes extends LitElement {
           (attribute) => html`
             <div class="data-entry">
               <div class="key">
-                ${attribute.replace(/_/g, " ").replace("id", "ID")}
+                ${attribute.replace(/_/g, " ").replace(/\bid\b/g, "ID")}
               </div>
               <div class="value">
                 ${this.formatAttribute(attribute)}

src/components/ha-card.ts

@@ -50,9 +50,12 @@ export class HaCard extends LitElement {
         font-family: var(--ha-card-header-font-family, inherit);
         font-size: var(--ha-card-header-font-size, 24px);
         letter-spacing: -0.012em;
-        line-height: 32px;
-        padding: 24px 16px 16px;
+        line-height: 48px;
+        padding: 12px 16px 16px;
         display: block;
+        margin-block-start: 0px;
+        margin-block-end: 0px;
+        font-weight: normal;
       }
 
       :host ::slotted(.card-content:not(:first-child)),
@@ -75,7 +78,7 @@ export class HaCard extends LitElement {
   protected render(): TemplateResult {
     return html`
       ${this.header
-        ? html` <div class="card-header">${this.header}</div> `
+        ? html`<h1 class="card-header">${this.header}</h1>`
         : html``}
       <slot></slot>
     `;

src/components/ha-code-editor.ts

@@ -81,6 +81,7 @@ export class HaCodeEditor extends UpdatingElement {
 
   protected firstUpdated(changedProps: PropertyValues): void {
     super.firstUpdated(changedProps);
+    this._blockKeyboardShortcuts();
     this._load();
   }
 
@@ -232,6 +233,10 @@ export class HaCodeEditor extends UpdatingElement {
     this.codemirror!.on("changes", () => this._onChange());
   }
 
+  private _blockKeyboardShortcuts() {
+    this.addEventListener("keydown", (ev) => ev.stopPropagation());
+  }
+
   private _onChange(): void {
     const newValue = this.value;
     if (newValue === this._value) {

src/components/ha-expansion-panel.ts

@@ -0,0 +1,119 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  query,
+  TemplateResult,
+} from "lit-element";
+import { fireEvent } from "../common/dom/fire_event";
+import "./ha-svg-icon";
+import { mdiChevronDown } from "@mdi/js";
+import { classMap } from "lit-html/directives/class-map";
+
+@customElement("ha-expansion-panel")
+class HaExpansionPanel extends LitElement {
+  @property({ type: Boolean, reflect: true }) expanded = false;
+
+  @property({ type: Boolean, reflect: true }) outlined = false;
+
+  @query(".container") private _container!: HTMLDivElement;
+
+  protected render(): TemplateResult {
+    return html`
+      <div class="summary" @click=${this._toggleContainer}>
+        <slot name="title"></slot>
+        <ha-svg-icon
+          .path=${mdiChevronDown}
+          class="summary-icon ${classMap({ expanded: this.expanded })}"
+        ></ha-svg-icon>
+      </div>
+      <div
+        class="container ${classMap({ expanded: this.expanded })}"
+        @transitionend=${this._handleTransitionEnd}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  private _handleTransitionEnd() {
+    this._container.style.removeProperty("height");
+  }
+
+  private _toggleContainer(): void {
+    const scrollHeight = this._container.scrollHeight;
+    this._container.style.height = `${scrollHeight}px`;
+
+    if (this.expanded) {
+      setTimeout(() => {
+        this._container.style.height = "0px";
+      }, 0);
+    }
+
+    this.expanded = !this.expanded;
+    fireEvent(this, "expanded-changed", { expanded: this.expanded });
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: block;
+      }
+
+      :host([outlined]) {
+        box-shadow: none;
+        border-width: 1px;
+        border-style: solid;
+        border-color: var(
+          --ha-card-border-color,
+          var(--divider-color, #e0e0e0)
+        );
+        border-radius: var(--ha-card-border-radius, 4px);
+      }
+
+      .summary {
+        display: flex;
+        padding: 0px 16px;
+        min-height: 48px;
+        align-items: center;
+        cursor: pointer;
+        overflow: hidden;
+      }
+
+      .summary-icon {
+        transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
+        margin-left: auto;
+      }
+
+      .summary-icon.expanded {
+        transform: rotate(180deg);
+      }
+
+      .container {
+        overflow: hidden;
+        transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
+        height: 0px;
+      }
+
+      .container.expanded {
+        height: auto;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-expansion-panel": HaExpansionPanel;
+  }
+
+  // for fire event
+  interface HASSDomEvents {
+    "expanded-changed": {
+      expanded: boolean;
+    };
+  }
+}

src/components/ha-hls-player.ts

@@ -38,7 +38,8 @@ class HaHLSPlayer extends LitElement {
   @property({ type: Boolean, attribute: "allow-exoplayer" })
   public allowExoPlayer = false;
 
-  @query("video", true) private _videoEl!: HTMLVideoElement;
+  // don't cache this, as we remove it on disconnects
+  @query("video") private _videoEl!: HTMLVideoElement;
 
   @internalProperty() private _attached = false;
 
@@ -154,6 +155,9 @@ class HaHLSPlayer extends LitElement {
   }
 
   private _resizeExoPlayer = () => {
+    if (!this._videoEl) {
+      return;
+    }
     const rect = this._videoEl.getBoundingClientRect();
     this.hass!.auth.external!.fireMessage({
       type: "exoplayer/resize",

src/components/ha-labeled-slider.js

@@ -14,8 +14,8 @@ class HaLabeledSlider extends PolymerElement {
         }
 
         .title {
-          margin-bottom: 16px;
-          color: var(--secondary-text-color);
+          margin-bottom: 8px;
+          color: var(--primary-text-color);
         }
 
         .slider-container {
@@ -43,7 +43,6 @@ class HaLabeledSlider extends PolymerElement {
           step="[[step]]"
           pin="[[pin]]"
           disabled="[[disabled]]"
-          disabled="[[disabled]]"
           value="{{value}}"
         ></ha-slider>
       </div>

src/components/ha-menu-button.ts

@@ -6,9 +6,9 @@ import {
   CSSResult,
   customElement,
   html,
+  internalProperty,
   LitElement,
   property,
-  internalProperty,
   TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../common/dom/fire_event";
@@ -98,8 +98,7 @@ class HaMenuButton extends LitElement {
       return;
     }
 
-    this.style.visibility =
-      newNarrow || this._alwaysVisible ? "initial" : "hidden";
+    this.style.display = newNarrow || this._alwaysVisible ? "initial" : "none";
 
     if (!newNarrow) {
       this._hasNotifications = false;

src/components/ha-sidebar.ts

@@ -728,6 +728,7 @@ class HaSidebar extends LitElement {
           width: 64px;
         }
         :host([expanded]) {
+          width: 256px;
           width: calc(256px + env(safe-area-inset-left));
         }
         :host([rtl]) {
@@ -735,8 +736,7 @@ class HaSidebar extends LitElement {
           border-left: 1px solid var(--divider-color);
         }
         .menu {
-          box-sizing: border-box;
-          height: 65px;
+          height: var(--header-height);
           display: flex;
           padding: 0 8.5px;
           border-bottom: 1px solid transparent;
@@ -781,7 +781,7 @@ class HaSidebar extends LitElement {
           display: initial;
         }
         .title mwc-button {
-          width: 100%;
+          width: 90%;
         }
         #sortable,
         .hidden-panel {
@@ -793,7 +793,10 @@ class HaSidebar extends LitElement {
           display: flex;
           flex-direction: column;
           box-sizing: border-box;
-          height: calc(100% - 196px - env(safe-area-inset-bottom));
+          height: calc(100% - var(--header-height) - 132px);
+          height: calc(
+            100% - var(--header-height) - 132px - env(safe-area-inset-bottom)
+          );
           overflow-x: hidden;
           background: none;
           margin-left: env(safe-area-inset-left);

src/components/ha-slider.js

@@ -21,6 +21,7 @@ class HaSlider extends PaperSliderClass {
             .pin > .slider-knob > .slider-knob-inner {
               font-size:  var(--ha-slider-pin-font-size, 10px);
               line-height: normal;
+              cursor: pointer;
             }
 
             .disabled.ring > .slider-knob > .slider-knob-inner {
@@ -69,9 +70,9 @@ class HaSlider extends PaperSliderClass {
               transform: scale(1) translate(0, -10px);
             }
 
-              .slider-input {
-                width: 54px;
-              }
+            .slider-input {
+              width: 54px;
+            }
         `)
       );
     }

src/components/ha-tabs.ts

@@ -0,0 +1,100 @@
+import "@polymer/paper-tabs/paper-tabs";
+import type { PaperIconButtonElement } from "@polymer/paper-icon-button/paper-icon-button";
+import type { PaperTabElement } from "@polymer/paper-tabs/paper-tab";
+import type { PaperTabsElement } from "@polymer/paper-tabs/paper-tabs";
+import { customElement } from "lit-element";
+import { Constructor } from "../types";
+
+const PaperTabs = customElements.get("paper-tabs") as Constructor<
+  PaperTabsElement
+>;
+
+let subTemplate: HTMLTemplateElement;
+
+@customElement("ha-tabs")
+export class HaTabs extends PaperTabs {
+  private _firstTabWidth = 0;
+
+  private _lastTabWidth = 0;
+
+  private _lastLeftHiddenState = false;
+
+  static get template(): HTMLTemplateElement {
+    if (!subTemplate) {
+      subTemplate = (PaperTabs as any).template.cloneNode(true);
+
+      const superStyle = subTemplate.content.querySelector("style");
+
+      // Add "noink" attribute for scroll buttons to disable animation.
+      subTemplate.content
+        .querySelectorAll("paper-icon-button")
+        .forEach((arrow: PaperIconButtonElement) => {
+          arrow.setAttribute("noink", "");
+        });
+
+      superStyle!.appendChild(
+        document.createTextNode(`
+          :host {
+            padding-top: .5px;
+          }
+          .not-visible {
+            display: none;
+          }
+          paper-icon-button {
+            width: 24px;
+            height: 48px;
+            padding: 0;
+            margin: 0;
+          }
+        `)
+      );
+    }
+    return subTemplate;
+  }
+
+  // Get first and last tab's width for _affectScroll
+  public _tabChanged(tab: PaperTabElement, old: PaperTabElement): void {
+    super._tabChanged(tab, old);
+    const tabs = this.querySelectorAll("paper-tab:not(.hide-tab)");
+    if (tabs.length > 0) {
+      this._firstTabWidth = tabs[0].clientWidth;
+      this._lastTabWidth = tabs[tabs.length - 1].clientWidth;
+    }
+
+    // Scroll active tab into view if needed.
+    const selected = this.querySelector(".iron-selected");
+    if (selected) {
+      selected.scrollIntoView();
+    }
+  }
+
+  /**
+   * Modify _affectScroll so that when the scroll arrows appear
+   * while scrolling and the tab container shrinks we can counteract
+   * the jump in tab position so that the scroll still appears smooth.
+   */
+  public _affectScroll(dx: number): void {
+    if (this._firstTabWidth === 0 || this._lastTabWidth === 0) {
+      return;
+    }
+
+    this.$.tabsContainer.scrollLeft += dx;
+
+    const scrollLeft = this.$.tabsContainer.scrollLeft;
+
+    this._leftHidden = scrollLeft - this._firstTabWidth < 0;
+    this._rightHidden =
+      scrollLeft + this._lastTabWidth > this._tabContainerScrollSize;
+
+    if (this._lastLeftHiddenState !== this._leftHidden) {
+      this._lastLeftHiddenState = this._leftHidden;
+      this.$.tabsContainer.scrollLeft += this._leftHidden ? -23 : 23;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-tabs": HaTabs;
+  }
+}

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

@@ -378,6 +378,7 @@ export class HaMediaPlayerBrowse extends LitElement {
           : html`
               <div class="container">
                 ${this.hass.localize("ui.components.media-browser.no_items")}
+                <br />
                 ${currentItem.media_content_id ===
                 "media-source://media_source/local/."
                   ? html`<br />${this.hass.localize(
@@ -398,7 +399,7 @@ export class HaMediaPlayerBrowse extends LitElement {
                       <br />
                       ${this.hass.localize(
                         "ui.components.media-browser.local_media_files"
-                      )}.`
+                      )}`
                   : ""}
               </div>
             `}

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

@@ -24,10 +24,14 @@ class HaUserPicker extends LitElement {
 
   @property() public label?: string;
 
-  @property() public value?: string;
+  @property() public noUserLabel?: string;
+
+  @property() public value = "";
 
   @property() public users?: User[];
 
+  @property({ type: Boolean }) public disabled = false;
+
   private _sortedUsers = memoizeOne((users?: User[]) => {
     if (!users) {
       return [];
@@ -40,15 +44,19 @@ class HaUserPicker extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <paper-dropdown-menu-light .label=${this.label}>
+      <paper-dropdown-menu-light
+        .label=${this.label}
+        .disabled=${this.disabled}
+      >
         <paper-listbox
           slot="dropdown-content"
-          .selected=${this._value}
+          .selected=${this.value}
           attr-for-selected="data-user-id"
           @iron-select=${this._userChanged}
         >
           <paper-icon-item data-user-id="">
-            No user
+            ${this.noUserLabel ||
+            this.hass?.localize("ui.components.user-picker.no_user")}
           </paper-icon-item>
           ${this._sortedUsers(this.users).map(
             (user) => html`
@@ -67,10 +75,6 @@ class HaUserPicker extends LitElement {
     `;
   }
 
-  private get _value() {
-    return this.value || "";
-  }
-
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     if (this.users === undefined) {
@@ -83,7 +87,7 @@ class HaUserPicker extends LitElement {
   private _userChanged(ev) {
     const newValue = ev.detail.item.dataset.userId;
 
-    if (newValue !== this._value) {
+    if (newValue !== this.value) {
       this.value = ev.detail.value;
       setTimeout(() => {
         fireEvent(this, "value-changed", { value: newValue });
@@ -111,3 +115,9 @@ class HaUserPicker extends LitElement {
 }
 
 customElements.define("ha-user-picker", HaUserPicker);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-user-picker": HaUserPicker;
+  }
+}

src/components/user/ha-users-picker.ts

@@ -0,0 +1,169 @@
+import {
+  css,
+  CSSResult,
+  customElement,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import { fireEvent } from "../../common/dom/fire_event";
+import type { PolymerChangedEvent } from "../../polymer-types";
+import type { HomeAssistant } from "../../types";
+import { fetchUsers, User } from "../../data/user";
+import "./ha-user-picker";
+import { mdiClose } from "@mdi/js";
+import memoizeOne from "memoize-one";
+import { guard } from "lit-html/directives/guard";
+
+@customElement("ha-users-picker")
+class HaUsersPickerLight extends LitElement {
+  @property({ attribute: false }) public hass?: HomeAssistant;
+
+  @property() public value?: string[];
+
+  @property({ attribute: "picked-user-label" })
+  public pickedUserLabel?: string;
+
+  @property({ attribute: "pick-user-label" })
+  public pickUserLabel?: string;
+
+  @property({ attribute: false })
+  public users?: User[];
+
+  protected firstUpdated(changedProps) {
+    super.firstUpdated(changedProps);
+    if (this.users === undefined) {
+      fetchUsers(this.hass!).then((users) => {
+        this.users = users;
+      });
+    }
+  }
+
+  protected render(): TemplateResult {
+    if (!this.hass || !this.users) {
+      return html``;
+    }
+
+    const notSelectedUsers = this._notSelectedUsers(this.users, this.value);
+    return html`
+      ${guard([notSelectedUsers], () =>
+        this.value?.map(
+          (user_id, idx) => html`
+            <div>
+              <ha-user-picker
+                .label=${this.pickedUserLabel}
+                .noUserLabel=${this.hass?.localize(
+                  "ui.components.user-picker.remove_user"
+                )}
+                .index=${idx}
+                .hass=${this.hass}
+                .value=${user_id}
+                .users=${this._notSelectedUsersAndSelected(
+                  user_id,
+                  this.users,
+                  notSelectedUsers
+                )}
+                @value-changed=${this._userChanged}
+              ></ha-user-picker>
+              <mwc-icon-button .userId=${user_id} @click=${this._removeUser}>
+                <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+              </mwc-icon-button>
+            </div>
+          `
+        )
+      )}
+      <ha-user-picker
+        .noUserLabel=${this.pickUserLabel ||
+        this.hass?.localize("ui.components.user-picker.add_user")}
+        .hass=${this.hass}
+        .users=${notSelectedUsers}
+        .disabled=${!notSelectedUsers?.length}
+        @value-changed=${this._addUser}
+      ></ha-user-picker>
+    `;
+  }
+
+  private _notSelectedUsers = memoizeOne(
+    (users?: User[], currentUsers?: string[]) =>
+      currentUsers
+        ? users?.filter(
+            (user) => !user.system_generated && !currentUsers.includes(user.id)
+          )
+        : users?.filter((user) => !user.system_generated)
+  );
+
+  private _notSelectedUsersAndSelected = (
+    userId: string,
+    users?: User[],
+    notSelected?: User[]
+  ) => {
+    const selectedUser = users?.find((user) => user.id === userId);
+    if (selectedUser) {
+      return notSelected ? [...notSelected, selectedUser] : [selectedUser];
+    }
+    return notSelected;
+  };
+
+  private get _currentUsers() {
+    return this.value || [];
+  }
+
+  private async _updateUsers(users) {
+    this.value = users;
+    fireEvent(this, "value-changed", {
+      value: users,
+    });
+  }
+
+  private _userChanged(event: PolymerChangedEvent<string>) {
+    event.stopPropagation();
+    const index = (event.currentTarget as any).index;
+    const newValue = event.detail.value;
+    const newUsers = [...this._currentUsers];
+    if (newValue === "") {
+      newUsers.splice(index, 1);
+    } else {
+      newUsers.splice(index, 1, newValue);
+    }
+    this._updateUsers(newUsers);
+  }
+
+  private async _addUser(event: PolymerChangedEvent<string>) {
+    event.stopPropagation();
+    const toAdd = event.detail.value;
+    (event.currentTarget as any).value = "";
+    if (!toAdd) {
+      return;
+    }
+    const currentUsers = this._currentUsers;
+    if (currentUsers.includes(toAdd)) {
+      return;
+    }
+
+    this._updateUsers([...currentUsers, toAdd]);
+  }
+
+  private _removeUser(event) {
+    const userId = (event.currentTarget as any).userId;
+    this._updateUsers(this._currentUsers.filter((user) => user !== userId));
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      :host {
+        display: block;
+      }
+      div {
+        display: flex;
+        align-items: center;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-users-picker": HaUsersPickerLight;
+  }
+}

src/data/automation.ts

@@ -109,10 +109,17 @@ export interface TemplateTrigger {
   value_template: string;
 }
 
+export interface ContextConstraint {
+  context_id?: string;
+  parent_id?: string;
+  user_id?: string | string[];
+}
+
 export interface EventTrigger {
   platform: "event";
   event_type: string;
-  event_data: any;
+  event_data?: any;
+  context?: ContextConstraint;
 }
 
 export type Trigger =

src/data/config_flow.ts

@@ -11,6 +11,7 @@ export const DISCOVERY_SOURCES = [
   "ssdp",
   "zeroconf",
   "discovery",
+  "mqtt",
 ];
 
 export const ATTENTION_SOURCES = ["reauth"];

src/data/counter.ts

@@ -0,0 +1,51 @@
+import { HomeAssistant } from "../types";
+
+export interface Counter {
+  id: string;
+  name: string;
+  icon?: string;
+  initial?: number;
+  restore?: boolean;
+  minimum?: number;
+  maximum?: number;
+  step?: number;
+}
+
+export interface CounterMutableParams {
+  name: string;
+  icon: string;
+  initial: number;
+  restore: boolean;
+  minimum: number;
+  maximum: number;
+  step: number;
+}
+
+export const fetchCounter = (hass: HomeAssistant) =>
+  hass.callWS<Counter[]>({ type: "counter/list" });
+
+export const createCounter = (
+  hass: HomeAssistant,
+  values: CounterMutableParams
+) =>
+  hass.callWS<Counter>({
+    type: "counter/create",
+    ...values,
+  });
+
+export const updateCounter = (
+  hass: HomeAssistant,
+  id: string,
+  updates: Partial<CounterMutableParams>
+) =>
+  hass.callWS<Counter>({
+    type: "counter/update",
+    counter_id: id,
+    ...updates,
+  });
+
+export const deleteCounter = (hass: HomeAssistant, id: string) =>
+  hass.callWS({
+    type: "counter/delete",
+    counter_id: id,
+  });

src/data/hassio/addon.ts

@@ -2,78 +2,71 @@ import { HomeAssistant } from "../../types";
 import { hassioApiResultExtractor, HassioResponse } from "./common";
 
 export interface HassioAddonInfo {
-  name: string;
-  slug: string;
-  description: string;
-  repository: "core" | "local" | string;
-  version: string;
-  state: "none" | "started" | "stopped";
-  installed: string | undefined;
-  detached: boolean;
+  advanced: boolean;
   available: boolean;
   build: boolean;
-  advanced: boolean;
-  url: string | null;
+  description: string;
+  detached: boolean;
   icon: boolean;
+  installed: boolean;
   logo: boolean;
+  name: string;
+  repository: "core" | "local" | string;
+  slug: string;
+  stage: "stable" | "experimental" | "deprecated";
+  state: "started" | "stopped" | null;
+  update_available: boolean;
+  url: string | null;
+  version_latest: string;
+  version: string;
 }
 
 export interface HassioAddonDetails extends HassioAddonInfo {
-  name: string;
-  slug: string;
-  description: string;
-  long_description: null | string;
-  auto_update: boolean;
-  url: null | string;
-  detached: boolean;
-  documentation: boolean;
-  available: boolean;
-  arch: "armhf" | "aarch64" | "i386" | "amd64";
-  machine: any;
-  homeassistant: string;
-  version_latest: string;
-  boot: "auto" | "manual";
-  build: boolean;
-  options: Record<string, unknown>;
-  network: null | Record<string, number>;
-  network_description: null | Record<string, string>;
-  host_network: boolean;
-  host_pid: boolean;
-  host_ipc: boolean;
-  host_dbus: boolean;
-  privileged: any;
   apparmor: "disable" | "default" | "profile";
-  devices: string[];
-  auto_uart: boolean;
-  icon: boolean;
-  logo: boolean;
-  stage: "stable" | "experimental" | "deprecated";
-  changelog: boolean;
-  hassio_api: boolean;
-  hassio_role: "default" | "homeassistant" | "manager" | "admin";
-  startup: "initialize" | "system" | "services" | "application" | "once";
-  homeassistant_api: boolean;
-  auth_api: boolean;
-  full_access: boolean;
-  protected: boolean;
-  rating: "1-6";
-  stdin: boolean;
-  webui: null | string;
-  gpio: boolean;
-  kernel_modules: boolean;
-  devicetree: boolean;
-  docker_api: boolean;
-  audio: boolean;
+  arch: "armhf" | "aarch64" | "i386" | "amd64";
   audio_input: null | string;
   audio_output: null | string;
-  services_role: string[];
+  audio: boolean;
+  auth_api: boolean;
+  auto_uart: boolean;
+  auto_update: boolean;
+  boot: "auto" | "manual";
+  changelog: boolean;
+  devices: string[];
+  devicetree: boolean;
   discovery: string[];
-  ip_address: string;
-  ingress: boolean;
-  ingress_panel: boolean;
+  docker_api: boolean;
+  documentation: boolean;
+  full_access: boolean;
+  gpio: boolean;
+  hassio_api: boolean;
+  hassio_role: "default" | "homeassistant" | "manager" | "admin";
+  homeassistant_api: boolean;
+  homeassistant: string;
+  host_dbus: boolean;
+  host_ipc: boolean;
+  host_network: boolean;
+  host_pid: boolean;
   ingress_entry: null | string;
+  ingress_panel: boolean;
   ingress_url: null | string;
+  ingress: boolean;
+  ip_address: string;
+  kernel_modules: boolean;
+  long_description: null | string;
+  machine: any;
+  network_description: null | Record<string, string>;
+  network: null | Record<string, number>;
+  options: Record<string, unknown>;
+  privileged: any;
+  protected: boolean;
+  rating: "1-6";
+  services_role: string[];
+  slug: string;
+  startup: "initialize" | "system" | "services" | "application" | "once";
+  stdin: boolean;
   watchdog: null | boolean;
+  webui: null | string;
 }
 
 export interface HassioAddonsInfo {

src/data/hassio/common.ts

@@ -22,8 +22,8 @@ export const hassioApiResultExtractor = <T>(response: HassioResponse<T>) =>
 export const extractApiErrorMessage = (error: any): string => {
   return typeof error === "object"
     ? typeof error.body === "object"
-      ? error.body.message || "Unknown error, see logs"
-      : error.body || "Unknown error, see logs"
+      ? error.body.message || "Unknown error, see supervisor logs"
+      : error.body || error.message || "Unknown error, see supervisor logs"
     : error;
 };
 

src/data/hassio/docker.ts

@@ -0,0 +1,36 @@
+import { HomeAssistant } from "../../types";
+import { hassioApiResultExtractor, HassioResponse } from "./common";
+
+interface HassioDockerRegistries {
+  [key: string]: { username: string; password?: string };
+}
+
+export const fetchHassioDockerRegistries = async (hass: HomeAssistant) => {
+  return hassioApiResultExtractor(
+    await hass.callApi<HassioResponse<HassioDockerRegistries>>(
+      "GET",
+      "hassio/docker/registries"
+    )
+  );
+};
+
+export const addHassioDockerRegistry = async (
+  hass: HomeAssistant,
+  data: HassioDockerRegistries
+) => {
+  await hass.callApi<HassioResponse<HassioDockerRegistries>>(
+    "POST",
+    "hassio/docker/registries",
+    data
+  );
+};
+
+export const removeHassioDockerRegistry = async (
+  hass: HomeAssistant,
+  registry: string
+) => {
+  await hass.callApi<HassioResponse<void>>(
+    "DELETE",
+    `hassio/docker/registries/${registry}`
+  );
+};

src/data/hassio/host.ts

@@ -1,14 +1,25 @@
 import { HomeAssistant } from "../../types";
 import { hassioApiResultExtractor, HassioResponse } from "./common";
 
-export type HassioHostInfo = any;
+export type HassioHostInfo = {
+  chassis: string;
+  cpe: string;
+  deployment: string;
+  disk_free: number;
+  disk_total: number;
+  disk_used: number;
+  features: string[];
+  hostname: string;
+  kernel: string;
+  operating_system: string;
+};
 
 export interface HassioHassOSInfo {
-  version: string;
-  version_cli: string;
+  board: string;
+  boot: string;
+  update_available: boolean;
   version_latest: string;
-  version_cli_latest: string;
-  board: "ova" | "rpi";
+  version: string;
 }
 
 export const fetchHassioHostInfo = async (hass: HomeAssistant) => {

src/data/hassio/resolution.ts

@@ -0,0 +1,15 @@
+import { HomeAssistant } from "../../types";
+import { hassioApiResultExtractor, HassioResponse } from "./common";
+
+export interface HassioResolution {
+  unsupported: string[];
+}
+
+export const fetchHassioResolution = async (hass: HomeAssistant) => {
+  return hassioApiResultExtractor(
+    await hass.callApi<HassioResponse<HassioResolution>>(
+      "GET",
+      "hassio/resolution/info"
+    )
+  );
+};

src/data/hassio/supervisor.ts

@@ -1,19 +1,56 @@
 import { HomeAssistant, PanelInfo } from "../../types";
+import { HassioAddonInfo, HassioAddonRepository } from "./addon";
 import { hassioApiResultExtractor, HassioResponse } from "./common";
 
-export type HassioHomeAssistantInfo = any;
-export type HassioSupervisorInfo = any;
+export type HassioHomeAssistantInfo = {
+  arch: string;
+  audio_input: string | null;
+  audio_output: string | null;
+  boot: boolean;
+  image: string;
+  ip_address: string;
+  machine: string;
+  port: number;
+  ssl: boolean;
+  update_available: boolean;
+  version_latest: string;
+  version: string;
+  wait_boot: number;
+  watchdog: boolean;
+};
+
+export type HassioSupervisorInfo = {
+  addons: HassioAddonInfo[];
+  addons_repositories: HassioAddonRepository[];
+  arch: string;
+  channel: string;
+  debug: boolean;
+  debug_block: boolean;
+  diagnostics: boolean | null;
+  healthy: boolean;
+  ip_address: string;
+  logging: string;
+  supported: boolean;
+  timezone: string;
+  update_available: boolean;
+  version: string;
+  version_latest: string;
+  wait_boot: number;
+};
 
 export type HassioInfo = {
   arch: string;
   channel: string;
   docker: string;
-  hassos?: string;
+  features: string[];
+  hassos: null;
   homeassistant: string;
   hostname: string;
   logging: string;
-  maching: string;
+  machine: string;
+  operating_system: string;
   supervisor: string;
+  supported: boolean;
   supported_arch: string[];
   timezone: string;
 };

src/data/history.ts

@@ -85,11 +85,14 @@ export const fetchRecent = (
 export const fetchDate = (
   hass: HomeAssistant,
   startTime: Date,
-  endTime: Date
+  endTime: Date,
+  entityId
 ): Promise<HassEntity[][]> => {
   return hass.callApi(
     "GET",
-    `history/period/${startTime.toISOString()}?end_time=${endTime.toISOString()}&minimal_response`
+    `history/period/${startTime.toISOString()}?end_time=${endTime.toISOString()}&minimal_response${
+      entityId ? `&filter_entity_id=${entityId}` : ``
+    }`
   );
 };
 

src/data/lovelace.ts

@@ -33,7 +33,7 @@ export interface LovelaceResource {
 }
 
 export interface LovelaceResourcesMutableParams {
-  res_type: "css" | "js" | "module" | "html";
+  res_type: LovelaceResource["type"];
   url: string;
 }
 
@@ -89,6 +89,7 @@ export interface LovelaceViewConfig {
 export interface LovelaceViewElement extends HTMLElement {
   hass?: HomeAssistant;
   lovelace?: Lovelace;
+  narrow?: boolean;
   index?: number;
   cards?: Array<LovelaceCard | HuiErrorCard>;
   badges?: LovelaceBadge[];

src/data/ozw.ts

@@ -63,6 +63,16 @@ export interface OZWNetworkStatistics {
   retries: number;
 }
 
+export interface OZWDeviceConfig {
+  label: string;
+  type: string;
+  value: string | number;
+  parameter: number;
+  min: number;
+  max: number;
+  help: string;
+}
+
 export const nodeQueryStages = [
   "ProtocolInfo",
   "Probe",
@@ -180,6 +190,17 @@ export const fetchOZWNodeMetadata = (
     node_id: node_id,
   });
 
+export const fetchOZWNodeConfig = (
+  hass: HomeAssistant,
+  ozw_instance: number,
+  node_id: number
+): Promise<OZWDeviceConfig[]> =>
+  hass.callWS({
+    type: "ozw/get_config_parameters",
+    ozw_instance: ozw_instance,
+    node_id: node_id,
+  });
+
 export const refreshNodeInfo = (
   hass: HomeAssistant,
   ozw_instance: number,

src/data/timer.ts

@@ -2,6 +2,7 @@ import {
   HassEntityAttributeBase,
   HassEntityBase,
 } from "home-assistant-js-websocket";
+import { HomeAssistant } from "../types";
 
 export type TimerEntity = HassEntityBase & {
   attributes: HassEntityAttributeBase & {
@@ -9,3 +10,48 @@ export type TimerEntity = HassEntityBase & {
     remaining: string;
   };
 };
+
+export interface DurationDict {
+  hours?: number | string;
+  minutes?: number | string;
+  seconds?: number | string;
+}
+
+export interface Timer {
+  id: string;
+  name: string;
+  icon?: string;
+  duration?: string | number | DurationDict;
+}
+
+export interface TimerMutableParams {
+  name: string;
+  icon: string;
+  duration: string | number | DurationDict;
+}
+
+export const fetchTimer = (hass: HomeAssistant) =>
+  hass.callWS<Timer[]>({ type: "timer/list" });
+
+export const createTimer = (hass: HomeAssistant, values: TimerMutableParams) =>
+  hass.callWS<Timer>({
+    type: "timer/create",
+    ...values,
+  });
+
+export const updateTimer = (
+  hass: HomeAssistant,
+  id: string,
+  updates: Partial<TimerMutableParams>
+) =>
+  hass.callWS<Timer>({
+    type: "timer/update",
+    timer_id: id,
+    ...updates,
+  });
+
+export const deleteTimer = (hass: HomeAssistant, id: string) =>
+  hass.callWS({
+    type: "timer/delete",
+    timer_id: id,
+  });

src/data/weather.ts

@@ -1,6 +1,14 @@
-import { SVGTemplateResult, svg, html, TemplateResult, css } from "lit-element";
+import {
+  mdiGauge,
+  mdiWaterPercent,
+  mdiWeatherFog,
+  mdiWeatherRainy,
+  mdiWeatherWindy,
+} from "@mdi/js";
+import { css, html, svg, SVGTemplateResult, TemplateResult } from "lit-element";
 import { styleMap } from "lit-html/directives/style-map";
-
+import "../components/ha-icon";
+import "../components/ha-svg-icon";
 import type { HomeAssistant, WeatherEntity } from "../types";
 import { roundWithOneDecimal } from "../util/calculate";
 
@@ -25,6 +33,15 @@ export const weatherIcons = {
   exceptional: "hass:alert-circle-outline",
 };
 
+export const weatherAttrIcons = {
+  humidity: mdiWaterPercent,
+  wind_bearing: mdiWeatherWindy,
+  wind_speed: mdiWeatherWindy,
+  pressure: mdiGauge,
+  visibility: mdiWeatherFog,
+  precipitation: mdiWeatherRainy,
+};
+
 const cloudyStates = new Set<string>([
   "partlycloudy",
   "cloudy",
@@ -110,6 +127,7 @@ export const getWeatherUnit = (
       return lengthUnit === "km" ? "hPa" : "inHg";
     case "wind_speed":
       return `${lengthUnit}/h`;
+    case "visibility":
     case "length":
       return lengthUnit;
     case "precipitation":
@@ -125,7 +143,7 @@ export const getWeatherUnit = (
 export const getSecondaryWeatherAttribute = (
   hass: HomeAssistant,
   stateObj: WeatherEntity
-): string | undefined => {
+): TemplateResult | undefined => {
   const extrema = getWeatherExtrema(hass, stateObj);
 
   if (extrema) {
@@ -149,17 +167,22 @@ export const getSecondaryWeatherAttribute = (
     return undefined;
   }
 
-  return `
-    ${hass!.localize(
-      `ui.card.weather.attributes.${attribute}`
-    )} ${roundWithOneDecimal(value)} ${getWeatherUnit(hass!, attribute)}
+  const weatherAttrIcon = weatherAttrIcons[attribute];
+
+  return html`
+    ${weatherAttrIcon
+      ? html`
+          <ha-svg-icon class="attr-icon" .path=${weatherAttrIcon}></ha-svg-icon>
+        `
+      : hass!.localize(`ui.card.weather.attributes.${attribute}`)}
+    ${roundWithOneDecimal(value)} ${getWeatherUnit(hass!, attribute)}
   `;
 };
 
 const getWeatherExtrema = (
   hass: HomeAssistant,
   stateObj: WeatherEntity
-): string | undefined => {
+): TemplateResult | undefined => {
   if (!stateObj.attributes.forecast?.length) {
     return undefined;
   }
@@ -189,22 +212,18 @@ const getWeatherExtrema = (
 
   const unit = getWeatherUnit(hass!, "temperature");
 
-  return `
-    ${
-      tempHigh
-        ? `
+  return html`
+    ${tempHigh
+      ? `
             ${tempHigh} ${unit}
           `
-        : ""
-    }
+      : ""}
     ${tempLow && tempHigh ? " / " : ""}
-    ${
-      tempLow
-        ? `
+    ${tempLow
+      ? `
           ${tempLow} ${unit}
         `
-        : ""
-    }
+      : ""}
   `;
 };
 

src/data/ws-templates.ts

@@ -9,6 +9,7 @@ interface TemplateListeners {
   all: boolean;
   domains: string[];
   entities: string[];
+  time: boolean;
 }
 
 export const subscribeRenderTemplate = (

src/dialogs/generic/dialog-box.ts

@@ -70,6 +70,7 @@ class DialogBox extends LitElement {
                 <p
                   class=${classMap({
                     "no-bottom-padding": Boolean(this._params.prompt),
+                    warning: Boolean(this._params.warning),
                   })}
                 >
                   ${this._params.text}
@@ -180,6 +181,9 @@ class DialogBox extends LitElement {
           /* Place above other dialogs */
           --dialog-z-index: 104;
         }
+        .warning {
+          color: var(--warning-color);
+        }
       `,
     ];
   }

src/dialogs/generic/show-dialog-box.ts

@@ -5,6 +5,7 @@ interface BaseDialogParams {
   confirmText?: string;
   text?: string | TemplateResult;
   title?: string;
+  warning?: boolean;
 }
 
 export interface AlertDialogParams extends BaseDialogParams {

src/dialogs/more-info/controls/more-info-group.js

@@ -1,111 +0,0 @@
-import { dom } from "@polymer/polymer/lib/legacy/polymer.dom";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import dynamicContentUpdater from "../../../common/dom/dynamic_content_updater";
-import { computeStateDomain } from "../../../common/entity/compute_state_domain";
-import "../../../state-summary/state-card-content";
-
-class MoreInfoGroup extends PolymerElement {
-  static get template() {
-    return html`
-      <style>
-        .child-card {
-          margin-bottom: 8px;
-        }
-
-        .child-card:last-child {
-          margin-bottom: 0;
-        }
-      </style>
-
-      <div id="groupedControlDetails"></div>
-      <template is="dom-repeat" items="[[states]]" as="state">
-        <div class="child-card">
-          <state-card-content
-            state-obj="[[state]]"
-            hass="[[hass]]"
-          ></state-card-content>
-        </div>
-      </template>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: {
-        type: Object,
-      },
-
-      stateObj: {
-        type: Object,
-      },
-
-      states: {
-        type: Array,
-        computed: "computeStates(stateObj, hass)",
-      },
-    };
-  }
-
-  static get observers() {
-    return ["statesChanged(stateObj, states)"];
-  }
-
-  computeStates(stateObj, hass) {
-    const states = [];
-    const entIds = stateObj.attributes.entity_id || [];
-
-    for (let i = 0; i < entIds.length; i++) {
-      const state = hass.states[entIds[i]];
-
-      if (state) {
-        states.push(state);
-      }
-    }
-
-    return states;
-  }
-
-  statesChanged(stateObj, states) {
-    let groupDomainStateObj = false;
-    let groupDomain = false;
-
-    if (states && states.length > 0) {
-      const baseStateObj = states.find((s) => s.state === "on") || states[0];
-      groupDomain = computeStateDomain(baseStateObj);
-
-      // Groups need to be filtered out or we'll show content of
-      // first child above the children of the current group
-      if (groupDomain !== "group") {
-        groupDomainStateObj = {
-          ...baseStateObj,
-          entity_id: stateObj.entity_id,
-          attributes: { ...baseStateObj.attributes },
-        };
-
-        for (let i = 0; i < states.length; i++) {
-          if (groupDomain !== computeStateDomain(states[i])) {
-            groupDomainStateObj = false;
-            break;
-          }
-        }
-      }
-    }
-
-    if (!groupDomainStateObj) {
-      const el = dom(this.$.groupedControlDetails);
-      if (el.lastChild) {
-        el.removeChild(el.lastChild);
-      }
-    } else {
-      dynamicContentUpdater(
-        this.$.groupedControlDetails,
-        "MORE-INFO-" + groupDomain.toUpperCase(),
-        { stateObj: groupDomainStateObj, hass: this.hass }
-      );
-    }
-  }
-}
-
-customElements.define("more-info-group", MoreInfoGroup);

src/dialogs/more-info/controls/more-info-group.ts

@@ -0,0 +1,111 @@
+import { HassEntity } from "home-assistant-js-websocket";
+import {
+  LitElement,
+  property,
+  CSSResult,
+  css,
+  internalProperty,
+  PropertyValues,
+} from "lit-element";
+import { html, TemplateResult } from "lit-html";
+import { dynamicElement } from "../../../common/dom/dynamic-element-directive";
+import { computeStateDomain } from "../../../common/entity/compute_state_domain";
+import "../../../state-summary/state-card-content";
+import { GroupEntity, HomeAssistant } from "../../../types";
+import {
+  importMoreInfoControl,
+  domainMoreInfoType,
+} from "../state_more_info_control";
+
+class MoreInfoGroup extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public stateObj?: GroupEntity;
+
+  @internalProperty() private _groupDomainStateObj?: HassEntity;
+
+  @internalProperty() private _moreInfoType?: string;
+
+  protected updated(changedProperties: PropertyValues) {
+    if (
+      !this.hass ||
+      !this.stateObj ||
+      (!changedProperties.has("hass") && !changedProperties.has("stateObj"))
+    ) {
+      return;
+    }
+
+    const states = this.stateObj.attributes.entity_id
+      .map((entity_id) => this.hass.states[entity_id])
+      .filter((state) => state);
+
+    if (!states.length) {
+      this._groupDomainStateObj = undefined;
+      this._moreInfoType = undefined;
+      return;
+    }
+
+    const baseStateObj = states.find((s) => s.state === "on") || states[0];
+    const groupDomain = computeStateDomain(baseStateObj);
+
+    // Groups need to be filtered out or we'll show content of
+    // first child above the children of the current group
+    if (
+      groupDomain !== "group" &&
+      states.every((state) => groupDomain === computeStateDomain(state))
+    ) {
+      this._groupDomainStateObj = {
+        ...baseStateObj,
+        entity_id: this.stateObj.entity_id,
+        attributes: { ...baseStateObj.attributes },
+      };
+      const type = domainMoreInfoType(groupDomain);
+      importMoreInfoControl(type);
+      this._moreInfoType = type === "hidden" ? undefined : `more-info-${type}`;
+    } else {
+      this._groupDomainStateObj = undefined;
+      this._moreInfoType = undefined;
+    }
+  }
+
+  protected render(): TemplateResult {
+    if (!this.hass || !this.stateObj) {
+      return html``;
+    }
+    return html`${this._moreInfoType
+      ? dynamicElement(this._moreInfoType, {
+          hass: this.hass,
+          stateObj: this._groupDomainStateObj,
+        })
+      : ""}
+    ${this.stateObj.attributes.entity_id.map((entity_id) => {
+      const state = this.hass!.states[entity_id];
+      if (!state) {
+        return "";
+      }
+      return html`
+        <state-card-content
+          .stateObj=${state}
+          .hass=${this.hass}
+        ></state-card-content>
+      `;
+    })}`;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      state-card-content {
+        display: block;
+        margin-top: 8px;
+      }
+    `;
+  }
+}
+
+customElements.define("more-info-group", MoreInfoGroup);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "more-info-group": MoreInfoGroup;
+  }
+}

src/dialogs/more-info/controls/more-info-light.ts

@@ -67,9 +67,10 @@ class MoreInfoLight extends LitElement {
                 caption=${this.hass.localize("ui.card.light.brightness")}
                 icon="hass:brightness-5"
                 min="1"
-                max="255"
+                max="100"
                 value=${this._brightnessSliderValue}
                 @change=${this._brightnessSliderChanged}
+                pin
               ></ha-labeled-slider>
             `
           : ""}
@@ -87,6 +88,7 @@ class MoreInfoLight extends LitElement {
                       .max=${this.stateObj.attributes.max_mireds}
                       .value=${this._ctSliderValue}
                       @change=${this._ctSliderChanged}
+                      pin
                     ></ha-labeled-slider>
                   `
                 : ""}
@@ -98,6 +100,7 @@ class MoreInfoLight extends LitElement {
                       max="255"
                       .value=${this._wvSliderValue}
                       @change=${this._wvSliderChanged}
+                      pin
                     ></ha-labeled-slider>
                   `
                 : ""}
@@ -155,16 +158,22 @@ class MoreInfoLight extends LitElement {
 
   protected updated(changedProps: PropertyValues): void {
     const stateObj = this.stateObj! as LightEntity;
-    if (changedProps.has("stateObj") && stateObj.state === "on") {
-      this._brightnessSliderValue = stateObj.attributes.brightness;
-      this._ctSliderValue = stateObj.attributes.color_temp;
-      this._wvSliderValue = stateObj.attributes.white_value;
+    if (changedProps.has("stateObj")) {
+      if (stateObj.state === "on") {
+        this._brightnessSliderValue = Math.round(
+          (stateObj.attributes.brightness * 100) / 255
+        );
+        this._ctSliderValue = stateObj.attributes.color_temp;
+        this._wvSliderValue = stateObj.attributes.white_value;
 
-      if (stateObj.attributes.hs_color) {
-        this._colorPickerColor = {
-          h: stateObj.attributes.hs_color[0],
-          s: stateObj.attributes.hs_color[1] / 100,
-        };
+        if (stateObj.attributes.hs_color) {
+          this._colorPickerColor = {
+            h: stateObj.attributes.hs_color[0],
+            s: stateObj.attributes.hs_color[1] / 100,
+          };
+        }
+      } else {
+        this._brightnessSliderValue = 0;
       }
     }
   }
@@ -191,7 +200,7 @@ class MoreInfoLight extends LitElement {
 
     this.hass.callService("light", "turn_on", {
       entity_id: this.stateObj!.entity_id,
-      brightness: bri,
+      brightness_pct: bri,
     });
   }
 
@@ -250,15 +259,10 @@ class MoreInfoLight extends LitElement {
         align-items: center;
       }
 
-      .content.is-on {
-        margin-top: -16px;
-      }
-
       .content > * {
         width: 100%;
         max-height: 84px;
         overflow: hidden;
-        padding-top: 16px;
       }
 
       .color_temp {

src/dialogs/more-info/controls/more-info-media_player.ts

@@ -104,18 +104,7 @@ class MoreInfoMediaPlayer extends LitElement {
                     ></ha-icon-button>
                   `
                 : ""}
-              ${supportsFeature(stateObj, SUPPORT_VOLUME_SET)
-                ? html`
-                    <ha-slider
-                      id="input"
-                      pin
-                      ignore-bar-touch
-                      .dir=${computeRTLDirection(this.hass!)}
-                      .value=${Number(stateObj.attributes.volume_level) * 100}
-                      @change=${this._selectedValueChanged}
-                    ></ha-slider>
-                  `
-                : supportsFeature(stateObj, SUPPORT_VOLUME_BUTTONS)
+              ${supportsFeature(stateObj, SUPPORT_VOLUME_BUTTONS)
                 ? html`
                     <ha-icon-button
                       action="volume_down"
@@ -129,6 +118,18 @@ class MoreInfoMediaPlayer extends LitElement {
                     ></ha-icon-button>
                   `
                 : ""}
+              ${supportsFeature(stateObj, SUPPORT_VOLUME_SET)
+                ? html`
+                    <ha-slider
+                      id="input"
+                      pin
+                      ignore-bar-touch
+                      .dir=${computeRTLDirection(this.hass!)}
+                      .value=${Number(stateObj.attributes.volume_level) * 100}
+                      @change=${this._selectedValueChanged}
+                    ></ha-slider>
+                  `
+                : ""}
             </div>
           `
         : ""}
@@ -196,8 +197,8 @@ class MoreInfoMediaPlayer extends LitElement {
                 )}
                 @keydown=${this._ttsCheckForEnter}
               ></paper-input>
-              <ha-icon-button 
-                icon="hass:send"                 
+              <ha-icon-button
+                icon="hass:send"
                 .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
                 @click=${this._sendTTS}
               ></ha-icon-button>

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -38,6 +38,7 @@ import { showConfirmationDialog } from "../generic/show-dialog-box";
 import "./ha-more-info-history";
 import "./ha-more-info-logbook";
 import "./controls/more-info-default";
+import { CONTINUOUS_DOMAINS } from "../../data/logbook";
 
 const DOMAINS_NO_INFO = ["camera", "configurator"];
 /**
@@ -70,8 +71,21 @@ export class MoreInfoDialog extends LitElement {
     this._entityId = params.entityId;
     if (!this._entityId) {
       this.closeDialog();
+      return;
     }
     this.large = false;
+
+    const stateObj = this.hass.states[this._entityId];
+    if (!stateObj) {
+      return;
+    }
+    if (stateObj.attributes && "custom_ui_more_info" in stateObj.attributes) {
+      this._moreInfoType = stateObj.attributes.custom_ui_more_info;
+    } else {
+      const type = stateMoreInfoType(stateObj);
+      importMoreInfoControl(type);
+      this._moreInfoType = type === "hidden" ? undefined : `more-info-${type}`;
+    }
   }
 
   public closeDialog() {
@@ -94,23 +108,6 @@ export class MoreInfoDialog extends LitElement {
     return false;
   }
 
-  protected updated(changedProperties) {
-    if (!this.hass || !this._entityId || !changedProperties.has("_entityId")) {
-      return;
-    }
-    const stateObj = this.hass.states[this._entityId];
-    if (!stateObj) {
-      return;
-    }
-    if (stateObj.attributes && "custom_ui_more_info" in stateObj.attributes) {
-      this._moreInfoType = stateObj.attributes.custom_ui_more_info;
-    } else {
-      const type = stateMoreInfoType(stateObj);
-      importMoreInfoControl(type);
-      this._moreInfoType = type === "hidden" ? undefined : `more-info-${type}`;
-    }
-  }
-
   protected render() {
     if (!this._entityId) {
       return html``;
@@ -173,7 +170,8 @@ export class MoreInfoDialog extends LitElement {
               : ""}
           </ha-header-bar>
           ${DOMAINS_WITH_MORE_INFO.includes(domain) &&
-          this._computeShowHistoryComponent(entityId)
+          (this._computeShowHistoryComponent(entityId) ||
+            this._computeShowLogBookComponent(entityId))
             ? html`
                 <mwc-tab-bar
                   .activeIndex=${this._currTabIndex}
@@ -210,13 +208,16 @@ export class MoreInfoDialog extends LitElement {
                   !this._computeShowHistoryComponent(entityId)
                     ? ""
                     : html`<ha-more-info-history
-                          .hass=${this.hass}
-                          .entityId=${this._entityId}
-                        ></ha-more-info-history>
-                        <ha-more-info-logbook
-                          .hass=${this.hass}
-                          .entityId=${this._entityId}
-                        ></ha-more-info-logbook>`}
+                        .hass=${this.hass}
+                        .entityId=${this._entityId}
+                      ></ha-more-info-history>`}
+                  ${DOMAINS_WITH_MORE_INFO.includes(domain) ||
+                  !this._computeShowLogBookComponent(entityId)
+                    ? ""
+                    : html`<ha-more-info-logbook
+                        .hass=${this.hass}
+                        .entityId=${this._entityId}
+                      ></ha-more-info-logbook>`}
                   ${this._moreInfoType
                     ? dynamicElement(this._moreInfoType, {
                         hass: this.hass,
@@ -268,12 +269,32 @@ export class MoreInfoDialog extends LitElement {
 
   private _computeShowHistoryComponent(entityId) {
     return (
-      (isComponentLoaded(this.hass, "history") ||
-        isComponentLoaded(this.hass, "logbook")) &&
+      isComponentLoaded(this.hass, "history") &&
       !DOMAINS_MORE_INFO_NO_HISTORY.includes(computeDomain(entityId))
     );
   }
 
+  private _computeShowLogBookComponent(entityId): boolean {
+    if (!isComponentLoaded(this.hass, "logbook")) {
+      return false;
+    }
+
+    const stateObj = this.hass.states[entityId];
+    if (!stateObj || stateObj.attributes.unit_of_measurement) {
+      return false;
+    }
+
+    const domain = computeDomain(entityId);
+    if (
+      CONTINUOUS_DOMAINS.includes(domain) ||
+      DOMAINS_MORE_INFO_NO_HISTORY.includes(domain)
+    ) {
+      return false;
+    }
+
+    return true;
+  }
+
   private _removeEntity() {
     const entityId = this._entityId!;
     showConfirmationDialog(this, {

src/dialogs/more-info/ha-more-info-logbook.ts

@@ -13,11 +13,7 @@ import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { throttle } from "../../common/util/throttle";
 import "../../components/ha-circular-progress";
 import "../../components/state-history-charts";
-import {
-  CONTINUOUS_DOMAINS,
-  getLogbookData,
-  LogbookEntry,
-} from "../../data/logbook";
+import { getLogbookData, LogbookEntry } from "../../data/logbook";
 import "../../panels/logbook/ha-logbook";
 import { haStyle, haStyleScrollbar } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
@@ -44,12 +40,7 @@ export class MoreInfoLogbook extends LitElement {
     }
     const stateObj = this.hass.states[this.entityId];
 
-    if (!stateObj || stateObj.attributes.unit_of_measurement) {
-      return html``;
-    }
-
-    const domain = computeStateDomain(stateObj);
-    if (CONTINUOUS_DOMAINS.includes(domain)) {
+    if (!stateObj) {
       return html``;
     }
 

src/dialogs/more-info/state_more_info_control.ts

@@ -32,6 +32,10 @@ const LAZY_LOADED_MORE_INFO_CONTROL = {
 export const stateMoreInfoType = (stateObj: HassEntity): string => {
   const domain = computeStateDomain(stateObj);
 
+  return domainMoreInfoType(domain);
+};
+
+export const domainMoreInfoType = (domain: string): string => {
   if (DOMAINS_WITH_MORE_INFO.includes(domain)) {
     return domain;
   }

src/dialogs/notifications/notification-drawer.js

@@ -40,7 +40,7 @@ export class HuiNotificationDrawer extends EventsMixin(
         padding-left: env(safe-area-inset-left);
         padding-right: env(safe-area-inset-right);
         padding-bottom: env(safe-area-inset-bottom);
-        height: calc(100% - 65px);
+        height: calc(100% - 1px - var(--header-height));
         box-sizing: border-box;
         background-color: var(--primary-background-color);
         color: var(--primary-text-color);
@@ -50,6 +50,11 @@ export class HuiNotificationDrawer extends EventsMixin(
         padding: 0 16px 16px;
       }
 
+      .notification-actions {
+        padding: 0 16px 16px;
+        text-align: center;
+      }
+
       .empty {
         padding: 16px;
         text-align: center;
@@ -69,6 +74,13 @@ export class HuiNotificationDrawer extends EventsMixin(
               </div>
             </template>
           </dom-repeat>
+          <template is="dom-if" if="[[_moreThanOne(notifications)]]">
+            <div class="notification-actions">
+              <mwc-button raised on-click="_dismissAll">
+                [[localize('ui.notification_drawer.dismiss_all')]]
+              </mwc-button>
+            </div>
+          </template>
         </template>
         <template is="dom-if" if="[[_empty(notifications)]]">
           <div class="empty">[[localize('ui.notification_drawer.empty')]]<div>
@@ -112,10 +124,23 @@ export class HuiNotificationDrawer extends EventsMixin(
     this.open = false;
   }
 
+  _dismissAll() {
+    this.notifications.forEach((notification) => {
+      this.hass.callService("persistent_notification", "dismiss", {
+        notification_id: notification.notification_id,
+      });
+    });
+    this.open = false;
+  }
+
   _empty(notifications) {
     return notifications.length === 0;
   }
 
+  _moreThanOne(notifications) {
+    return notifications.length > 1;
+  }
+
   _openChanged(open) {
     if (open) {
       // Render closed then animate open
@@ -151,7 +176,22 @@ export class HuiNotificationDrawer extends EventsMixin(
       .filter((entityId) => computeDomain(entityId) === "configurator")
       .map((entityId) => hass.states[entityId]);
 
-    return notificationsBackend.concat(configuratorEntities);
+    const notifications = notificationsBackend.concat(configuratorEntities);
+
+    notifications.sort(function (n1, n2) {
+      const d1 = new Date(n1.created_at);
+      const d2 = new Date(n2.created_at);
+
+      if (d1 < d2) {
+        return 1;
+      }
+      if (d1 > d2) {
+        return -1;
+      }
+      return 0;
+    });
+
+    return notifications;
   }
 
   showDialog({ narrow }) {

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -1,7 +1,9 @@
-import "../../components/ha-header-bar";
-import "@polymer/paper-input/paper-input";
-import "@material/mwc-list/mwc-list-item";
 import "@material/mwc-list/mwc-list";
+import type { List } from "@material/mwc-list/mwc-list";
+import { SingleSelectedEvent } from "@material/mwc-list/mwc-list-foundation";
+import "@material/mwc-list/mwc-list-item";
+import type { ListItem } from "@material/mwc-list/mwc-list-item";
+import { mdiConsoleLine } from "@mdi/js";
 import {
   css,
   customElement,
@@ -9,131 +11,282 @@ import {
   internalProperty,
   LitElement,
   property,
+  PropertyValues,
+  query,
 } from "lit-element";
-import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/ha-dialog";
-import { haStyleDialog } from "../../resources/styles";
-import { HomeAssistant, ServiceCallRequest } from "../../types";
-import { PolymerChangedEvent } from "../../polymer-types";
-import { fuzzySequentialMatch } from "../../common/string/sequence_matching";
-import { componentsWithService } from "../../common/config/components_with_service";
-import { domainIcon } from "../../common/entity/domain_icon";
-import { computeDomain } from "../../common/entity/compute_domain";
-import { domainToName } from "../../data/integration";
-import { QuickBarParams } from "./show-dialog-quick-bar";
-import { HassEntity } from "home-assistant-js-websocket";
-import { compare } from "../../common/string/compare";
+import { ifDefined } from "lit-html/directives/if-defined";
+import { styleMap } from "lit-html/directives/style-map";
+import { scroll } from "lit-virtualizer";
 import memoizeOne from "memoize-one";
+import { componentsWithService } from "../../common/config/components_with_service";
+import { fireEvent } from "../../common/dom/fire_event";
+import { computeDomain } from "../../common/entity/compute_domain";
+import { computeStateName } from "../../common/entity/compute_state_name";
+import { domainIcon } from "../../common/entity/domain_icon";
+import "../../common/search/search-input";
+import { compare } from "../../common/string/compare";
+import {
+  fuzzyFilterSort,
+  ScorableTextItem,
+} from "../../common/string/filter/sequence-matching";
+import { debounce } from "../../common/util/debounce";
+import "../../components/ha-circular-progress";
+import "../../components/ha-dialog";
+import "../../components/ha-header-bar";
+import { domainToName } from "../../data/integration";
+import { haStyleDialog } from "../../resources/styles";
+import { HomeAssistant } from "../../types";
+import {
+  ConfirmationDialogParams,
+  showConfirmationDialog,
+} from "../generic/show-dialog-box";
+import { QuickBarParams } from "./show-dialog-quick-bar";
 
-interface CommandItem extends ServiceCallRequest {
-  text: string;
+interface QuickBarItem extends ScorableTextItem {
+  icon: string;
+  action(data?: any): void;
 }
 
 @customElement("ha-quick-bar")
 export class QuickBar extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
 
-  @internalProperty() private _commandItems: CommandItem[] = [];
+  @internalProperty() private _commandItems: QuickBarItem[] = [];
 
-  @internalProperty() private _itemFilter = "";
+  @internalProperty() private _entityItems: QuickBarItem[] = [];
+
+  @internalProperty() private _items?: QuickBarItem[] = [];
+
+  @internalProperty() private _filter = "";
+
+  @internalProperty() private _search = "";
 
   @internalProperty() private _opened = false;
 
   @internalProperty() private _commandMode = false;
 
+  @internalProperty() private _done = false;
+
+  @query("search-input", false) private _filterInputField?: HTMLElement;
+
+  private _focusSet = false;
+
   public async showDialog(params: QuickBarParams) {
-    this._commandMode = params.commandMode || false;
-    this._opened = true;
+    this._commandMode = params.commandMode || this._toggleIfAlreadyOpened();
     this._commandItems = this._generateCommandItems();
+    this._entityItems = this._generateEntityItems();
+    this._opened = true;
   }
 
   public closeDialog() {
     this._opened = false;
-    this._itemFilter = "";
+    this._done = false;
+    this._focusSet = false;
+    this._filter = "";
+    this._search = "";
+    this._items = [];
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
+  protected updated(changedProperties: PropertyValues) {
+    if (
+      this._opened &&
+      (changedProperties.has("_filter") ||
+        changedProperties.has("_commandMode"))
+    ) {
+      this._setFilteredItems();
+    }
+  }
+
   protected render() {
     if (!this._opened) {
       return html``;
     }
 
     return html`
-      <ha-dialog .heading=${true} open @closed=${this.closeDialog} hideActions>
-        <paper-input
+      <ha-dialog
+        .heading=${true}
+        open
+        @opened=${this._handleOpened}
+        @closed=${this.closeDialog}
+        hideActions
+      >
+        <search-input
           dialogInitialFocus
           no-label-float
           slot="heading"
           class="heading"
-          @value-changed=${this._entityFilterChanged}
+          @value-changed=${this._handleSearchChange}
           .label=${this.hass.localize(
             "ui.dialogs.quick-bar.filter_placeholder"
           )}
-          type="search"
-          value=${this._commandMode ? `>${this._itemFilter}` : this._itemFilter}
-        ></paper-input>
-        <mwc-list>
+          .filter=${this._commandMode ? `>${this._search}` : this._search}
+          @keydown=${this._handleInputKeyDown}
+          @focus=${this._setFocusFirstListItem}
+        >
           ${this._commandMode
-            ? this.renderCommandsList(this._itemFilter)
-            : this.renderEntityList(this._itemFilter)}
-        </mwc-list>
+            ? html`<ha-svg-icon
+                slot="prefix"
+                class="prefix"
+                .path=${mdiConsoleLine}
+              ></ha-svg-icon>`
+            : ""}
+        </search-input>
+        ${!this._items
+          ? html`<ha-circular-progress
+              size="small"
+              active
+            ></ha-circular-progress>`
+          : html`<mwc-list
+              @rangechange=${this._handleRangeChanged}
+              @keydown=${this._handleListItemKeyDown}
+              @selected=${this._handleSelected}
+              style=${styleMap({
+                height: `${Math.min(
+                  this._items.length * (this._commandMode ? 56 : 72) + 26,
+                  this._done ? 500 : 0
+                )}px`,
+              })}
+            >
+              ${scroll({
+                items: this._items,
+                renderItem: (item: QuickBarItem, index?: number) =>
+                  this._renderItem(item, index),
+              })}
+            </mwc-list>`}
       </ha-dialog>
     `;
   }
 
-  protected renderCommandsList = memoizeOne((filter) => {
-    const items = this._filterCommandItems(this._commandItems, filter);
+  private _handleOpened() {
+    this._setFilteredItems();
+    this.updateComplete.then(() => {
+      this._done = true;
+    });
+  }
 
-    return html`
-      ${items.map(
-        ({ text, domain, service, serviceData }) => html`
-          <mwc-list-item
-            @click=${this._executeCommand}
-            .domain=${domain}
-            .service=${service}
-            .serviceData=${serviceData}
-            graphic="icon"
-          >
-            <ha-icon .icon=${domainIcon(domain)} slot="graphic"></ha-icon>
-            ${text}
-          </mwc-list-item>
-        `
-      )}
-    `;
-  });
-
-  protected renderEntityList = memoizeOne((filter) => {
-    const entities = this._filterEntityItems(
-      Object.keys(this.hass.states),
-      filter
-    );
-
-    return html`
-      ${entities.map((entity_id) => {
-        const domain = computeDomain(entity_id);
-        return html`
-          <mwc-list-item @click=${this._entityMoreInfo} graphic="icon">
-            <ha-icon .icon=${domainIcon(domain)} slot="graphic"></ha-icon>
-            ${entity_id}
-          </mwc-list-item>
-        `;
-      })}
-    `;
-  });
-
-  private _entityFilterChanged(ev: PolymerChangedEvent<string>) {
-    const newFilter = ev.detail.value;
-
-    if (newFilter.startsWith(">")) {
-      this._commandMode = true;
-      this._itemFilter = newFilter.substring(1);
-    } else {
-      this._commandMode = false;
-      this._itemFilter = newFilter;
+  private async _handleRangeChanged(e) {
+    if (this._focusSet) {
+      return;
+    }
+    if (e.firstVisible > -1) {
+      this._focusSet = true;
+      await this.updateComplete;
+      this._setFocusFirstListItem();
     }
   }
 
-  private _generateCommandItems(): CommandItem[] {
+  private _renderItem(item: QuickBarItem, index?: number) {
+    return html`
+      <mwc-list-item
+        .twoline=${Boolean(item.altText)}
+        .item=${item}
+        index=${ifDefined(index)}
+        hasMeta
+        graphic=${item.altText ? "avatar" : "icon"}
+      >
+        <ha-icon .icon=${item.icon} slot="graphic"></ha-icon>
+        <span>${item.text}</span>
+        ${item.altText
+          ? html`
+              <span slot="secondary" class="secondary">${item.altText}</span>
+            `
+          : null}
+      </mwc-list-item>
+    `;
+  }
+
+  private async processItemAndCloseDialog(item: QuickBarItem, index: number) {
+    this._addSpinnerToCommandItem(index);
+
+    await item.action();
+    this.closeDialog();
+  }
+
+  private _handleSelected(ev: SingleSelectedEvent) {
+    const index = ev.detail.index;
+    const item = ((ev.target as List).items[index] as any).item;
+    this.processItemAndCloseDialog(item, index);
+  }
+
+  private _handleInputKeyDown(ev: KeyboardEvent) {
+    if (ev.code === "Enter") {
+      if (!this._items?.length) {
+        return;
+      }
+
+      this.processItemAndCloseDialog(this._items[0], 0);
+    } else if (ev.code === "ArrowDown") {
+      ev.preventDefault();
+      this._getItemAtIndex(0)?.focus();
+      this._getItemAtIndex(1)?.focus();
+    }
+  }
+
+  private _getItemAtIndex(index: number): ListItem | null {
+    return this.renderRoot.querySelector(`mwc-list-item[index="${index}"]`);
+  }
+
+  private _addSpinnerToCommandItem(index: number): void {
+    const spinner = document.createElement("ha-circular-progress");
+    spinner.size = "small";
+    spinner.slot = "meta";
+    spinner.active = true;
+    this._getItemAtIndex(index)?.appendChild(spinner);
+  }
+
+  private _handleSearchChange(ev: CustomEvent): void {
+    const newFilter = ev.detail.value;
+    const oldCommandMode = this._commandMode;
+
+    if (newFilter.startsWith(">")) {
+      this._commandMode = true;
+      this._search = newFilter.substring(1);
+    } else {
+      this._commandMode = false;
+      this._search = newFilter;
+    }
+
+    this._debouncedSetFilter(this._search);
+
+    if (oldCommandMode !== this._commandMode) {
+      this._items = undefined;
+      this._focusSet = false;
+    }
+  }
+
+  private _debouncedSetFilter = debounce((filter: string) => {
+    this._filter = filter;
+  }, 100);
+
+  private _setFocusFirstListItem() {
+    // @ts-ignore
+    this._getItemAtIndex(0)?.rippleHandlers.startFocus();
+  }
+
+  private _handleListItemKeyDown(ev: KeyboardEvent) {
+    const isSingleCharacter = ev.key.length === 1;
+    const isFirstListItem =
+      (ev.target as HTMLElement).getAttribute("index") === "0";
+    if (ev.key === "ArrowUp") {
+      if (isFirstListItem) {
+        this._filterInputField?.focus();
+      }
+    }
+    if (ev.key === "Backspace" || isSingleCharacter) {
+      (ev.currentTarget as List).scrollTop = 0;
+      this._filterInputField?.focus();
+    }
+  }
+
+  private _generateCommandItems(): QuickBarItem[] {
+    return [
+      ...this._generateReloadCommands(),
+      ...this._generateServerControlCommands(),
+    ].sort((a, b) => compare(a.text.toLowerCase(), b.text.toLowerCase()));
+  }
+
+  private _generateReloadCommands(): QuickBarItem[] {
     const reloadableDomains = componentsWithService(this.hass, "reload").sort();
 
     return reloadableDomains.map((domain) => ({
@@ -144,64 +297,84 @@ export class QuickBar extends LitElement {
           "domain",
           domainToName(this.hass.localize, domain)
         ),
-      domain,
-      service: "reload",
+      icon: domainIcon(domain),
+      action: () => this.hass.callService(domain, "reload"),
     }));
   }
 
-  private _filterCommandItems(
-    items: CommandItem[],
-    filter: string
-  ): CommandItem[] {
-    return items
-      .filter(({ text }) =>
-        fuzzySequentialMatch(filter.toLowerCase(), text.toLowerCase())
+  private _generateServerControlCommands(): QuickBarItem[] {
+    const serverActions = ["restart", "stop"];
+
+    return serverActions.map((action) =>
+      this._generateConfirmationCommand(
+        {
+          text: this.hass.localize(
+            "ui.dialogs.quick-bar.commands.server_control.perform_action",
+            "action",
+            this.hass.localize(
+              `ui.dialogs.quick-bar.commands.server_control.${action}`
+            )
+          ),
+          icon: "hass:server",
+          action: () => this.hass.callService("homeassistant", action),
+        },
+        this.hass.localize("ui.dialogs.generic.ok")
       )
-      .sort((itemA, itemB) => compare(itemA.text, itemB.text));
-  }
-
-  private _filterEntityItems(
-    entity_ids: HassEntity["entity_id"][],
-    filter: string
-  ): HassEntity["entity_id"][] {
-    return entity_ids
-      .filter((entity_id) =>
-        fuzzySequentialMatch(filter.toLowerCase(), entity_id)
-      )
-      .sort();
-  }
-
-  private async _executeCommand(ev: Event) {
-    const target = ev.currentTarget as any;
-
-    await this.hass.callService(
-      target.domain,
-      target.service,
-      target.serviceData
     );
-
-    this.closeDialog();
   }
 
-  private _entityMoreInfo(ev: Event) {
-    ev.preventDefault();
-    fireEvent(this, "hass-more-info", {
-      entityId: (ev.target as any).text,
-    });
-    this.closeDialog();
+  private _generateConfirmationCommand(
+    item: QuickBarItem,
+    confirmText: ConfirmationDialogParams["confirmText"]
+  ): QuickBarItem {
+    return {
+      ...item,
+      action: () =>
+        showConfirmationDialog(this, {
+          confirmText,
+          confirm: item.action,
+        }),
+    };
   }
 
+  private _generateEntityItems(): QuickBarItem[] {
+    return Object.keys(this.hass.states)
+      .map((entityId) => ({
+        text: computeStateName(this.hass.states[entityId]) || entityId,
+        altText: entityId,
+        icon: domainIcon(computeDomain(entityId), this.hass.states[entityId]),
+        action: () => fireEvent(this, "hass-more-info", { entityId }),
+      }))
+      .sort((a, b) => compare(a.text.toLowerCase(), b.text.toLowerCase()));
+  }
+
+  private _toggleIfAlreadyOpened() {
+    return this._opened ? !this._commandMode : false;
+  }
+
+  private _setFilteredItems() {
+    const items = this._commandMode ? this._commandItems : this._entityItems;
+    this._items = this._filter
+      ? this._filterItems(items || [], this._filter)
+      : items;
+  }
+
+  private _filterItems = memoizeOne(
+    (items: QuickBarItem[], filter: string): QuickBarItem[] =>
+      fuzzyFilterSort<QuickBarItem>(filter.trimLeft(), items)
+  );
+
   static get styles() {
     return [
       haStyleDialog,
       css`
         .heading {
-          padding: 20px 20px 0px;
+          padding: 8px 20px 0px;
         }
 
         ha-dialog {
           --dialog-z-index: 8;
-          --dialog-content-padding: 0px 24px 20px;
+          --dialog-content-padding: 0;
         }
 
         @media (min-width: 800px) {
@@ -213,6 +386,26 @@ export class QuickBar extends LitElement {
             --mdc-dialog-max-height: calc(100% - 72px);
           }
         }
+
+        ha-svg-icon.prefix {
+          margin: 8px;
+        }
+
+        .uni-virtualizer-host {
+          display: block;
+          position: relative;
+          contain: strict;
+          overflow: auto;
+          height: 100%;
+        }
+
+        .uni-virtualizer-host > * {
+          box-sizing: border-box;
+        }
+
+        mwc-list-item {
+          width: 100%;
+        }
       `,
     ];
   }

src/fake_data/provide_hass.ts

@@ -55,7 +55,7 @@ export const provideHass = (
 
   function updateTranslations(fragment: null | string, language?: string) {
     const lang = language || getLocalLanguage();
-    getTranslation(fragment, lang).then((translation) => {
+    getTranslation(fragment, lang).then(async (translation) => {
       const resources = {
         [lang]: {
           ...(hass().resources && hass().resources[lang]),
@@ -64,7 +64,7 @@ export const provideHass = (
       };
       hass().updateHass({
         resources,
-        localize: computeLocalize(elements[0], lang, resources),
+        localize: await computeLocalize(elements[0], lang, resources),
       });
     });
   }

src/html/_js_base.html.template

@@ -20,5 +20,4 @@
             "content" in document.createElement("template"))) {
         document.write("<script src='/static/polyfills/webcomponents-bundle.js'><"+"/script>");
       }
-      var isS101 = /\s+Version\/10\.1(?:\.\d+)?\s+Safari\//.test(navigator.userAgent);
     </script>

src/html/_preload_roboto.html.template

@@ -8,7 +8,7 @@
           el.type = "font/woff2";
           el.href = src;
           el.crossOrigin = "anonymous";
-          document.head.append(el);
+          document.head.appendChild(el);
         }
         _pf("/static/fonts/roboto/Roboto-Regular.woff2");
         _pf("/static/fonts/roboto/Roboto-Medium.woff2");

src/html/authorize.html.template

@@ -44,17 +44,17 @@
     <%= renderTemplate('_js_base') %>
     <%= renderTemplate('_preload_roboto') %>
 
-    <script type="module" crossorigin="use-credentials">
-      import "<%= latestPageJS %>";
+    <script crossorigin="use-credentials">
+      import("<%= latestPageJS %>");
+      window.latestJS = true;
       window.providersPromise = fetch("/auth/providers", {
         credentials: "same-origin",
       });
     </script>
 
-    <script nomodule>
+    <script>
       (function() {
-        // Safari 10.1 supports type=module but ignores nomodule, so we add this check.
-        if (!isS101) {
+        if (!window.latestJS) {
           <% if (useRollup) { %>
             _ls("/static/js/s.min.js").onload = function() {
               System.import("<%= es5PageJS %>");
@@ -66,4 +66,4 @@
       })();
     </script>
   </body>
-</html>
+</html>

src/html/onboarding.html.template

@@ -52,17 +52,17 @@
     <%= renderTemplate('_js_base') %>
     <%= renderTemplate('_preload_roboto') %>
 
-    <script type="module" crossorigin="use-credentials">
-      import "<%= latestPageJS %>";
+    <script crossorigin="use-credentials">
+      import("<%= latestPageJS %>");
+      window.latestJS = true;
       window.stepsPromise = fetch("/api/onboarding", {
         credentials: "same-origin",
       });
     </script>
 
-    <script nomodule>
+    <script>
       (function() {
-        // Safari 10.1 supports type=module but ignores nomodule, so we add this check.
-        if (!isS101) {
+        if (!window.latestJS) {
           <% if (useRollup) { %>
             _ls("/static/js/s.min.js").onload = function() {
               System.import("<%= es5PageJS %>");
@@ -74,4 +74,4 @@
       })();
     </script>
   </body>
-</html>
+</html>

src/layouts/hass-error-screen.ts

@@ -64,7 +64,7 @@ class HassErrorScreen extends LitElement {
         }
         .content {
           color: var(--primary-text-color);
-          height: calc(100% - 64px);
+          height: calc(100% - var(--header-height));
           display: flex;
           align-items: center;
           justify-content: center;

src/layouts/hass-loading-screen.ts

@@ -80,7 +80,7 @@ class HassLoadingScreen extends LitElement {
           pointer-events: auto;
         }
         .content {
-          height: calc(100% - 64px);
+          height: calc(100% - var(--header-height));
           display: flex;
           align-items: center;
           justify-content: center;

src/layouts/hass-subpage.ts

@@ -97,7 +97,7 @@ class HassSubpage extends LitElement {
       .content {
         position: relative;
         width: 100%;
-        height: calc(100% - 65px);
+        height: calc(100% - 1px - var(--header-height));
         overflow-y: auto;
         overflow: auto;
         -webkit-overflow-scrolling: touch;

src/layouts/hass-tabs-subpage-data-table.ts

@@ -48,6 +48,12 @@ export class HaTabsSubpageDataTable extends LitElement {
    */
   @property({ type: Boolean }) public selectable = false;
 
+  /**
+   * Should rows be clickable.
+   * @type {Boolean}
+   */
+  @property({ type: Boolean }) public clickable = false;
+
   /**
    * Do we need to add padding for a fab.
    * @type {Boolean}
@@ -164,6 +170,7 @@ export class HaTabsSubpageDataTable extends LitElement {
           .id=${this.id}
           .noDataText=${this.noDataText}
           .dir=${computeRTLDirection(this.hass)}
+          .clickable=${this.clickable}
         >
           ${!this.narrow
             ? html`
@@ -220,7 +227,7 @@ export class HaTabsSubpageDataTable extends LitElement {
         --data-table-border-width: 0;
       }
       :host(:not([narrow])) ha-data-table {
-        height: calc(100vh - 65px);
+        height: calc(100vh - 1px - var(--header-height));
         display: block;
       }
       .table-header {

src/layouts/hass-tabs-subpage.ts

@@ -278,9 +278,10 @@ class HassTabsSubpage extends LitElement {
         );
         margin-left: env(safe-area-inset-left);
         margin-right: env(safe-area-inset-right);
-        height: calc(100% - 65px);
-        height: calc(100% - 65px - env(safe-area-inset-bottom));
-        overflow-y: auto;
+        height: calc(100% - 1px - var(--header-height));
+        height: calc(
+          100% - 1px - var(--header-height) - env(safe-area-inset-bottom)
+        );
         overflow: auto;
         -webkit-overflow-scrolling: touch;
       }

src/managers/notification-manager.ts

@@ -33,7 +33,7 @@ class NotificationManager extends LitElement {
 
   @internalProperty() private _noCancelOnOutsideClick = false;
 
-  @query("ha-toast", true) private _toast!: HaToast;
+  @query("ha-toast") private _toast!: HaToast;
 
   public async showDialog({
     message,
@@ -86,10 +86,12 @@ class NotificationManager extends LitElement {
         display: flex;
         align-items: center;
         justify-content: space-between;
+        padding: 8px 12px;
       }
       mwc-button {
         color: var(--primary-color);
         font-weight: bold;
+        margin-left: 8px;
       }
     `;
   }

src/mixins/lit-localize-lite-mixin.ts

@@ -36,11 +36,13 @@ export const litLocalizeLiteMixin = <T extends Constructor<LitElement>>(
         (changedProperties.has("language") ||
           changedProperties.has("resources"))
       ) {
-        this.localize = computeLocalize(
+        computeLocalize(
           this.constructor.prototype,
           this.language,
           this.resources
-        );
+        ).then((localize) => {
+          this.localize = localize;
+        });
       }
     }
 

src/onboarding/onboarding-restore-snapshot.ts

@@ -15,6 +15,10 @@ import { showSnapshotUploadDialog } from "../../hassio/src/dialogs/snapshot/show
 import { navigate } from "../common/navigate";
 import type { LocalizeFunc } from "../common/translations/localize";
 import "../components/ha-card";
+import {
+  extractApiErrorMessage,
+  ignoredStatusCodes,
+} from "../data/hassio/common";
 import { makeDialogManager } from "../dialogs/make-dialog-manager";
 import { ProvideHassLitMixin } from "../mixins/provide-hass-lit-mixin";
 import { haStyle } from "../resources/styles";
@@ -32,9 +36,9 @@ class OnboardingRestoreSnapshot extends ProvideHassLitMixin(LitElement) {
 
   @property() public language!: string;
 
-  @property({ type: Boolean }) private restoring = false;
+  @property({ type: Boolean }) public restoring = false;
 
-  @internalProperty() private _log?: string;
+  @internalProperty() private _log = "";
 
   @internalProperty() private _showFullLog = false;
 
@@ -45,17 +49,15 @@ class OnboardingRestoreSnapshot extends ProvideHassLitMixin(LitElement) {
             "ui.panel.page-onboarding.restore.in_progress"
           )}
         >
-          ${this._log
-            ? this._showFullLog
-              ? html`<hassio-ansi-to-html .content=${this._log}>
-                </hassio-ansi-to-html>`
-              : html`<onboarding-loading></onboarding-loading>
-                  <hassio-ansi-to-html
-                    class="logentry"
-                    .content=${this._lastLogEntry(this._log)}
-                  >
-                  </hassio-ansi-to-html>`
-            : ""}
+          ${this._showFullLog
+            ? html`<hassio-ansi-to-html .content=${this._log}>
+              </hassio-ansi-to-html>`
+            : html`<onboarding-loading></onboarding-loading>
+                <hassio-ansi-to-html
+                  class="logentry"
+                  .content=${this._lastLogEntry(this._log)}
+                >
+                </hassio-ansi-to-html>`}
           <div class="card-actions">
             <mwc-button @click=${this._toggeFullLog}>
               ${this._showFullLog
@@ -83,7 +85,8 @@ class OnboardingRestoreSnapshot extends ProvideHassLitMixin(LitElement) {
         (entry) =>
           !entry.includes("/supervisor/logs") &&
           !entry.includes("/supervisor/ping") &&
-          !entry.includes("DEBUG")
+          !entry.includes("DEBUG") &&
+          !entry.includes("TypeError: Failed to fetch")
       )
       .join("\n")
       .replace(/\s[A-Z]+\s\(\w+\)\s\[[\w.]+\]/gi, "")
@@ -116,19 +119,33 @@ class OnboardingRestoreSnapshot extends ProvideHassLitMixin(LitElement) {
         const response = await fetch("/api/hassio/supervisor/logs", {
           method: "GET",
         });
+        if (response.status === 401) {
+          // If we get a unauthorized response, the restore is done
+          this._restoreDone();
+        } else if (
+          response.status &&
+          !ignoredStatusCodes.has(response.status)
+        ) {
+          // Handle error responses
+          this._log += this._filterLogs(extractApiErrorMessage(response));
+        }
         const logs = await response.text();
         this._log = this._filterLogs(logs);
         if (this._log.match(/\d{2}:\d{2}:\d{2}\s.*Restore\s\w+\sdone/)) {
           // The log indicates that the restore done, navigate the user back to base
-          navigate(this, "/", true);
-          location.reload();
+          this._restoreDone();
         }
       } catch (err) {
-        this._log = err.toString();
+        this._log += this._filterLogs(err.toString());
       }
     }
   }
 
+  private _restoreDone(): void {
+    navigate(this, "/", true);
+    location.reload();
+  }
+
   private _showSnapshotDialog(slug: string): void {
     showHassioSnapshotDialog(this, {
       slug,

src/panels/calendar/ha-panel-calendar.ts

@@ -179,7 +179,7 @@ class PanelCalendar extends LitElement {
         }
 
         :host(:not([narrow])) .content {
-          height: calc(100vh - 64px);
+          height: calc(100vh - var(--header-height);
         }
 
         .calendar-list {

src/panels/config/areas/ha-config-area-page.ts

@@ -261,11 +261,7 @@ class HaConfigAreaPage extends LitElement {
                           return state
                             ? html`
                                 <a
-                                  href=${ifDefined(
-                                    state.attributes.id
-                                      ? `/config/script/edit/${state.attributes.id}`
-                                      : undefined
-                                  )}
+                                  href=${`/config/script/edit/${state.entity_id}`}
                                 >
                                   <paper-item>
                                     <paper-item-body>
@@ -382,6 +378,7 @@ class HaConfigAreaPage extends LitElement {
 
         paper-item {
           cursor: pointer;
+          font-size: var(--paper-font-body1_-_font-size);
         }
 
         a {

src/panels/config/areas/ha-config-areas-dashboard.ts

@@ -117,6 +117,7 @@ export class HaConfigAreasDashboard extends LitElement {
         )}
         id="area_id"
         hasFab
+        clickable
       >
         <ha-icon-button
           slot="toolbar-icon"

src/panels/config/automation/ha-automation-editor.ts

@@ -31,6 +31,7 @@ import "../../../components/ha-card";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-svg-icon";
 import "../../../components/ha-yaml-editor";
+import { showToast } from "../../../util/toast";
 import type { HaYamlEditor } from "../../../components/ha-yaml-editor";
 import {
   AutomationConfig,
@@ -132,6 +133,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
             ${this.hass.localize("ui.panel.config.automation.editor.edit_ui")}
             ${this._mode === "gui"
               ? html`<ha-svg-icon
+                  class="selected_menu_item"
                   slot="graphic"
                   .path=${mdiCheck}
                 ></ha-svg-icon>`
@@ -147,6 +149,7 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
             ${this.hass.localize("ui.panel.config.automation.editor.edit_yaml")}
             ${this._mode === "yaml"
               ? html`<ha-svg-icon
+                  class="selected_menu_item"
                   slot="graphic"
                   .path=${mdiCheck}
                 ></ha-svg-icon>`
@@ -182,7 +185,12 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
             ${this.hass.localize(
               "ui.panel.config.automation.picker.delete_automation"
             )}
-            <ha-svg-icon slot="graphic" .path=${mdiDelete}></ha-svg-icon>
+            <ha-svg-icon
+              class=${classMap({ warning: this.automationId })}
+              slot="graphic"
+              .path=${mdiDelete}
+            >
+            </ha-svg-icon>
           </mwc-list-item>
         </ha-button-menu>
         ${this._config
@@ -725,6 +733,9 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
       },
       (errors) => {
         this._errors = errors.body.message;
+        showToast(this, {
+          message: errors.body.message,
+        });
         throw errors;
       }
     );
@@ -766,6 +777,12 @@ export class HaAutomationEditor extends KeyboardShortcutMixin(LitElement) {
         mwc-fab.dirty {
           bottom: 0;
         }
+        .selected_menu_item {
+          color: var(--primary-color);
+        }
+        li[role="separator"] {
+          border-bottom-color: var(--divider-color);
+        }
       `,
     ];
   }

src/panels/config/automation/trigger/types/ha-automation-trigger-event.ts

@@ -2,12 +2,14 @@ import "@polymer/paper-input/paper-input";
 import { customElement, LitElement, property } from "lit-element";
 import { html } from "lit-html";
 import "../../../../../components/ha-yaml-editor";
+import { fireEvent } from "../../../../../common/dom/fire_event";
 import { EventTrigger } from "../../../../../data/automation";
 import { HomeAssistant } from "../../../../../types";
 import {
   handleChangeEvent,
   TriggerElement,
 } from "../ha-automation-trigger-row";
+import "../../../../../components/user/ha-users-picker";
 
 @customElement("ha-automation-trigger-event")
 export class HaEventTrigger extends LitElement implements TriggerElement {
@@ -16,11 +18,11 @@ export class HaEventTrigger extends LitElement implements TriggerElement {
   @property() public trigger!: EventTrigger;
 
   public static get defaultConfig() {
-    return { event_type: "", event_data: {} };
+    return { event_type: "" };
   }
 
   protected render() {
-    const { event_type, event_data } = this.trigger;
+    const { event_type, event_data, context } = this.trigger;
     return html`
       <paper-input
         .label=${this.hass.localize(
@@ -38,9 +40,34 @@ export class HaEventTrigger extends LitElement implements TriggerElement {
         .defaultValue=${event_data}
         @value-changed=${this._dataChanged}
       ></ha-yaml-editor>
+      <br />
+      ${this.hass.localize(
+        "ui.panel.config.automation.editor.triggers.type.event.context_users"
+      )}
+      <ha-users-picker
+        .pickedUserLabel=${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.event.context_user_picked"
+        )}
+        .pickUserLabel=${this.hass.localize(
+          "ui.panel.config.automation.editor.triggers.type.event.context_user_pick"
+        )}
+        .hass=${this.hass}
+        .value=${this._wrapUsersInArray(context?.user_id)}
+        @value-changed=${this._usersChanged}
+      ></ha-users-picker>
     `;
   }
 
+  private _wrapUsersInArray(user_id: string | string[] | undefined): string[] {
+    if (!user_id) {
+      return [];
+    }
+    if (typeof user_id === "string") {
+      return [user_id];
+    }
+    return user_id;
+  }
+
   private _valueChanged(ev: CustomEvent): void {
     ev.stopPropagation();
     handleChangeEvent(this, ev);
@@ -53,6 +80,22 @@ export class HaEventTrigger extends LitElement implements TriggerElement {
     }
     handleChangeEvent(this, ev);
   }
+
+  private _usersChanged(ev) {
+    ev.stopPropagation();
+    const value = { ...this.trigger };
+    if (!ev.detail.value.length && value.context) {
+      delete value.context.user_id;
+    } else {
+      if (!value.context) {
+        value.context = {};
+      }
+      value.context.user_id = ev.detail.value;
+    }
+    fireEvent(this, "value-changed", {
+      value,
+    });
+  }
 }
 
 declare global {

src/panels/config/core/ha-config-section-core.js

@@ -19,37 +19,6 @@ import "./ha-config-url-form";
 class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
   static get template() {
     return html`
-      <style include="iron-flex ha-style">
-        .validate-container {
-          @apply --layout-vertical;
-          @apply --layout-center-center;
-          height: 140px;
-        }
-
-        .validate-result {
-          color: var(--success-color);
-          font-weight: 500;
-          margin-bottom: 1em;
-        }
-
-        .config-invalid {
-          margin: 1em 0;
-        }
-
-        .config-invalid .text {
-          color: var(--error-color);
-          font-weight: 500;
-        }
-
-        .config-invalid mwc-button {
-          float: right;
-        }
-
-        .validate-log {
-          white-space: pre-wrap;
-          direction: ltr;
-        }
-      </style>
       <ha-config-section is-wide="[[isWide]]">
         <span slot="header"
           >[[localize('ui.panel.config.core.section.core.header')]]</span
@@ -94,33 +63,6 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
       showAdvanced: Boolean,
     };
   }
-
-  groupLoaded(hass) {
-    return isComponentLoaded(hass, "group");
-  }
-
-  automationLoaded(hass) {
-    return isComponentLoaded(hass, "automation");
-  }
-
-  scriptLoaded(hass) {
-    return isComponentLoaded(hass, "script");
-  }
-
-  validateConfig() {
-    this.validating = true;
-    this.validateLog = "";
-    this.isValid = null;
-
-    this.hass.callApi("POST", "config/core/check_config").then((result) => {
-      this.validating = false;
-      this.isValid = result.result === "valid";
-
-      if (!this.isValid) {
-        this.validateLog = result.errors;
-      }
-    });
-  }
 }
 
 customElements.define("ha-config-section-core", HaConfigSectionCore);