Add link-local to ipv6

* Use HLS light build

* Bump hls, backBufferLength

.eslintrc.json

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

.gitignore

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

.mocharc.cjs

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

build-scripts/rollup.js

@@ -52,11 +52,7 @@ const createRollupConfig = ({
         browser: true,
         rootDir: paths.polymer_dir,
       }),
-      commonjs({
-        namedExports: {
-          "js-yaml": ["safeDump", "safeLoad"],
-        },
-      }),
+      commonjs(),
       json(),
       babel({
         ...bundle.babelOptions({ latestBuild }),

build-scripts/webpack.js

@@ -116,8 +116,9 @@ const createWebpackConfig = ({
       // We need to change the import of the polyfill for EventTarget, so we replace the polyfill file with our customized one
       new webpack.NormalModuleReplacementPlugin(
         new RegExp(
-          require.resolve(
-            "@lit-labs/virtualizer/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js"
+          path.resolve(
+            paths.polymer_dir,
+            "src/resources/lit-virtualizer/lib/uni-virtualizer/lib/polyfillLoaders/EventTarget.js"
           )
         ),
         path.resolve(paths.polymer_dir, "src/resources/EventTarget-ponyfill.js")

gallery/src/components/demo-card.js

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

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

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

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

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

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

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

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

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

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

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

hassio/src/components/supervisor-metric.ts

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

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

@@ -44,6 +44,9 @@ const _computeFolders = (folders): CheckboxItem[] => {
   if (folders.includes("share")) {
     list.push({ slug: "share", name: "Share", checked: false });
   }
+  if (folders.includes("media")) {
+    list.push({ slug: "media", name: "Media", checked: false });
+  }
   if (folders.includes("addons/local")) {
     list.push({ slug: "addons/local", name: "Local add-ons", checked: false });
   }

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

@@ -339,6 +339,21 @@ export class DialogHassioNetwork
             >
             </ha-radio>
           </ha-formfield>
+          ${version === "ipv6"
+            ? html` <ha-formfield
+                .label=${this.supervisor.localize("dialog.network.link-local")}
+                class="warning"
+              >
+                <ha-radio
+                  @change=${this._handleRadioValueChanged}
+                  .version=${version}
+                  value="link-local"
+                  name="${version}method"
+                  .checked=${this._interface![version]?.method === "link-local"}
+                >
+                </ha-radio>
+              </ha-formfield>`
+            : ""}
         </div>
         ${this._interface![version].method === "static"
           ? html`
@@ -558,7 +573,7 @@ export class DialogHassioNetwork
 
         @media all and (min-width: 451px) and (min-height: 501px) {
           .container {
-            width: 400px;
+            width: 500px;
           }
         }
 

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

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

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

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

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

@@ -48,7 +48,8 @@ class HassioCreateSnapshotDialog extends LitElement {
     return html`
       <ha-dialog
         open
-        @closing=${this.closeDialog}
+        scrimClickAction
+        @closed=${this.closeDialog}
         .heading=${createCloseHeading(
           this.hass,
           this._dialogParams.supervisor.localize("snapshot.create_snapshot")

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

@@ -4,6 +4,7 @@ import { mdiDotsVertical } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import { slugify } from "../../../../src/common/string/slugify";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-button-menu";
 import { createCloseHeading } from "../../../../src/components/ha-dialog";
@@ -63,7 +64,8 @@ class HassioSnapshotDialog
     return html`
       <ha-dialog
         open
-        @closing=${this.closeDialog}
+        scrimClickAction
+        @closed=${this.closeDialog}
         .heading=${createCloseHeading(this.hass, this._computeName)}
       >
         ${this._restoringSnapshot
@@ -88,7 +90,7 @@ class HassioSnapshotDialog
           fixed
           slot="primaryAction"
           @action=${this._handleMenuAction}
-          @closing=${(ev: Event) => ev.stopPropagation()}
+          @closed=${(ev: Event) => ev.stopPropagation()}
         >
           <mwc-icon-button slot="trigger" alt="menu">
             <ha-svg-icon .path=${mdiDotsVertical}></ha-svg-icon>
@@ -286,10 +288,9 @@ class HassioSnapshotDialog
       }
     }
 
-    const name = this._computeName.replace(/[^a-z0-9]+/gi, "_");
     const a = document.createElement("a");
     a.href = signedPath.path;
-    a.download = `Hass_io_${name}.tar`;
+    a.download = `home_assistant_snapshot_${slugify(this._computeName)}.tar`;
     this.shadowRoot!.appendChild(a);
     a.click();
     this.shadowRoot!.removeChild(a);

hassio/src/hassio-main.ts

@@ -103,27 +103,25 @@ export class HassioMain extends SupervisorBaseElement {
 
   private _applyTheme() {
     let themeName: string;
-    let themeSettings:
-      | Partial<HomeAssistant["selectedThemeSettings"]>
-      | undefined;
+    let themeSettings: Partial<HomeAssistant["selectedTheme"]> | undefined;
 
     if (atLeastVersion(this.hass.config.version, 0, 114)) {
       themeName =
-        this.hass.selectedThemeSettings?.theme ||
+        this.hass.selectedTheme?.theme ||
         (this.hass.themes.darkMode && this.hass.themes.default_dark_theme
           ? this.hass.themes.default_dark_theme!
           : this.hass.themes.default_theme);
 
-      themeSettings = this.hass.selectedThemeSettings;
+      themeSettings = this.hass.selectedTheme;
       if (themeSettings?.dark === undefined) {
         themeSettings = {
-          ...this.hass.selectedThemeSettings,
+          ...this.hass.selectedTheme,
           dark: this.hass.themes.darkMode,
         };
       }
     } else {
       themeName =
-        ((this.hass.selectedThemeSettings as unknown) as string) ||
+        ((this.hass.selectedTheme as unknown) as string) ||
         this.hass.themes.default_theme;
     }
 

hassio/src/snapshots/hassio-snapshots.ts

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

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

@@ -2,7 +2,7 @@ import "@material/mwc-button";
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
-import { safeDump } from "js-yaml";
+import { dump } from "js-yaml";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -233,7 +233,7 @@ class HassioHostInfo extends LitElement {
       const content = await fetchHassioHardwareInfo(this.hass);
       showHassioMarkdownDialog(this, {
         title: this.supervisor.localize("system.host.hardware"),
-        content: `<pre>${safeDump(content, { indent: 2 })}</pre>`,
+        content: `<pre>${dump(content, { indent: 2 })}</pre>`,
       });
     } catch (err) {
       showAlertDialog(this, {

package.json

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

setup.py

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

src/common/dom/apply_themes_on_element.ts

@@ -31,7 +31,7 @@ export const applyThemesOnElement = (
   element,
   themes: HomeAssistant["themes"],
   selectedTheme?: string,
-  themeSettings?: Partial<HomeAssistant["selectedThemeSettings"]>
+  themeSettings?: Partial<HomeAssistant["selectedTheme"]>
 ) => {
   let cacheKey = selectedTheme;
   let themeRules: Partial<ThemeVars> = {};
@@ -39,7 +39,7 @@ export const applyThemesOnElement = (
   if (themeSettings) {
     if (themeSettings.dark) {
       cacheKey = `${cacheKey}__dark`;
-      themeRules = darkStyles;
+      themeRules = { ...darkStyles };
     }
 
     if (selectedTheme === "default") {

src/common/dom/speech-recognition.ts

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

src/common/entity/domain_icon.ts

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

src/common/search/search-input.ts

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

src/common/string/escape_regexp.ts

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

src/common/string/filter/filter.ts

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

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

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

src/common/string/is_date.ts

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

src/common/string/is_timestamp.ts

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

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

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

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

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

src/common/structs/is-icon.ts

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

src/common/translations/localize.ts

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

src/common/util/debounce.ts

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

src/common/util/promise-timeout.ts

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

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

@@ -1,4 +1,4 @@
-import { Layout1d, scroll } from "@lit-labs/virtualizer";
+import { Layout1d, scroll } from "../../resources/lit-virtualizer";
 import deepClone from "deep-clone-simple";
 import {
   css,
@@ -246,7 +246,7 @@ export class HaDataTable extends LitElement {
           aria-rowcount=${this._filteredData.length + 1}
           style=${styleMap({
             height: this.autoHeight
-              ? `${(this._filteredData.length || 1) * 53 + 57}px`
+              ? `${(this._filteredData.length || 1) * 53 + 53}px`
               : `calc(100% - ${this._headerHeight}px)`,
           })}
         >
@@ -340,11 +340,10 @@ export class HaDataTable extends LitElement {
                   ${scroll({
                     items: this._items,
                     layout: Layout1d,
-                    // @ts-expect-error
                     renderItem: (row: DataTableRowData, index) => {
                       // not sure how this happens...
                       if (!row) {
-                        return "";
+                        return html``;
                       }
                       if (row.append) {
                         return html`
@@ -920,13 +919,11 @@ export class HaDataTable extends LitElement {
           color: var(--secondary-text-color);
         }
         .scroller {
-          display: flex;
-          position: relative;
-          contain: strict;
           height: calc(100% - 57px);
         }
-        .mdc-data-table__table:not(.auto-height) .scroller {
-          overflow: auto;
+
+        .mdc-data-table__table.auto-height .scroller {
+          overflow-y: hidden !important;
         }
         .grows {
           flex-grow: 1;

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

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

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

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

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

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

src/components/ha-attributes.ts

@@ -1,16 +1,14 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { until } from "lit/directives/until";
 import { haStyle } from "../resources/styles";
 import { HomeAssistant } from "../types";
 import hassAttributeUtil, {
   formatAttributeName,
+  formatAttributeValue,
 } from "../util/hass-attributes-util";
 import "./ha-expansion-panel";
 
-let jsYamlPromise: Promise<typeof import("js-yaml")>;
-
 @customElement("ha-attributes")
 class HaAttributes extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -56,17 +54,17 @@ class HaAttributes extends LitElement {
                     </div>
                   `
                 )}
-                ${this.stateObj.attributes.attribution
-                  ? html`
-                      <div class="attribution">
-                        ${this.stateObj.attributes.attribution}
-                      </div>
-                    `
-                  : ""}
               `
             : ""}
         </div>
       </ha-expansion-panel>
+      ${this.stateObj.attributes.attribution
+        ? html`
+            <div class="attribution">
+              ${this.stateObj.attributes.attribution}
+            </div>
+          `
+        : ""}
     `;
   }
 
@@ -93,6 +91,7 @@ class HaAttributes extends LitElement {
         .attribution {
           color: var(--secondary-text-color);
           text-align: center;
+          margin-top: 16px;
         }
         pre {
           font-family: inherit;
@@ -124,38 +123,7 @@ class HaAttributes extends LitElement {
       return "-";
     }
     const value = this.stateObj.attributes[attribute];
-    return this.formatAttributeValue(value);
-  }
-
-  private formatAttributeValue(value: any): string | TemplateResult {
-    if (value === null) {
-      return "-";
-    }
-    // YAML handling
-    if (
-      (Array.isArray(value) && value.some((val) => val instanceof Object)) ||
-      (!Array.isArray(value) && value instanceof Object)
-    ) {
-      if (!jsYamlPromise) {
-        jsYamlPromise = import("js-yaml");
-      }
-      const yaml = jsYamlPromise.then((jsYaml) => jsYaml.safeDump(value));
-      return html` <pre>${until(yaml, "")}</pre> `;
-    }
-    // URL handling
-    if (typeof value === "string" && value.startsWith("http")) {
-      try {
-        // If invalid URL, exception will be raised
-        const url = new URL(value);
-        if (url.protocol === "http:" || url.protocol === "https:")
-          return html`<a target="_blank" rel="noreferrer" href="${value}"
-            >${value}</a
-          >`;
-      } catch (_) {
-        // Nothing to do here
-      }
-    }
-    return Array.isArray(value) ? value.join(", ") : value;
+    return formatAttributeValue(this.hass, value);
   }
 
   private expandedChanged(ev) {

src/components/ha-circular-progress.ts

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

src/components/ha-cover-controls.ts

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

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

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

src/components/ha-hls-player.ts

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

src/components/ha-icon.ts

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

src/components/ha-network.ts

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

src/components/ha-yaml-editor.ts

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

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

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

src/components/state-history-chart-line.js

@@ -377,6 +377,10 @@ class StateHistoryChartLine extends LocalizeMixin(PolymerElement) {
                 major: {
                   fontStyle: "bold",
                 },
+                source: "auto",
+                sampleSize: 5,
+                autoSkipPadding: 20,
+                maxRotation: 0,
               },
             },
           ],

src/components/state-history-chart-timeline.js

@@ -194,7 +194,10 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
           invertOnOff,
         ]);
       }
-      datasets.push({ data: dataRow, entity_id: stateInfo.entity_id });
+      datasets.push({
+        data: dataRow,
+        entity_id: stateInfo.entity_id,
+      });
       labels.push(entityDisplay);
     });
 
@@ -233,6 +236,14 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
                 major: {
                   fontStyle: "bold",
                 },
+                sampleSize: 5,
+                autoSkipPadding: 50,
+                maxRotation: 0,
+              },
+              categoryPercentage: undefined,
+              barPercentage: undefined,
+              time: {
+                format: undefined,
               },
             },
           ],
@@ -242,10 +253,17 @@ class StateHistoryChartTimeline extends LocalizeMixin(PolymerElement) {
                 yaxe.maxWidth = yaxe.chart.width * 0.18;
               },
               position: this._computeRTL ? "right" : "left",
+              categoryPercentage: undefined,
+              barPercentage: undefined,
+              time: { format: undefined },
             },
           ],
         },
       },
+      datasets: {
+        categoryPercentage: 0.8,
+        barPercentage: 0.9,
+      },
       data: {
         labels: labels,
         datasets: datasets,

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

@@ -1,4 +1,11 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { styleMap } from "lit/directives/style-map";
@@ -32,13 +39,13 @@ class UserBadge extends LitElement {
 
   private _personEntityId?: string;
 
-  protected updated(changedProps) {
-    super.updated(changedProps);
+  public willUpdate(changedProps: PropertyValues<this>) {
+    super.willUpdate(changedProps);
     if (changedProps.has("user")) {
       this._getPersonPicture();
       return;
     }
-    const oldHass = changedProps.get("hass");
+    const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
     if (
       this._personEntityId &&
       oldHass &&

src/data/config_entries.ts

@@ -12,20 +12,20 @@ export interface ConfigEntry {
     | "setup_retry"
     | "not_loaded"
     | "failed_unload";
-  connection_class: string;
   supports_options: boolean;
   supports_unload: boolean;
+  pref_disable_new_entities: boolean;
+  pref_disable_polling: boolean;
   disabled_by: "user" | null;
   reason: string | null;
 }
 
-export interface ConfigEntryMutableParams {
-  title: string;
-}
-
-export interface ConfigEntrySystemOptions {
-  disable_new_entities: boolean;
-}
+export type ConfigEntryMutableParams = Partial<
+  Pick<
+    ConfigEntry,
+    "title" | "pref_disable_new_entities" | "pref_disable_polling"
+  >
+>;
 
 export const getConfigEntries = (hass: HomeAssistant) =>
   hass.callApi<ConfigEntry[]>("GET", "config/config_entries/entry");
@@ -33,9 +33,9 @@ export const getConfigEntries = (hass: HomeAssistant) =>
 export const updateConfigEntry = (
   hass: HomeAssistant,
   configEntryId: string,
-  updatedValues: Partial<ConfigEntryMutableParams>
+  updatedValues: ConfigEntryMutableParams
 ) =>
-  hass.callWS<ConfigEntry>({
+  hass.callWS<{ require_restart: boolean; config_entry: ConfigEntry }>({
     type: "config_entries/update",
     entry_id: configEntryId,
     ...updatedValues,
@@ -51,13 +51,15 @@ export const reloadConfigEntry = (hass: HomeAssistant, configEntryId: string) =>
     require_restart: boolean;
   }>("POST", `config/config_entries/entry/${configEntryId}/reload`);
 
+export interface DisableConfigEntryResult {
+  require_restart: boolean;
+}
+
 export const disableConfigEntry = (
   hass: HomeAssistant,
   configEntryId: string
 ) =>
-  hass.callWS<{
-    require_restart: boolean;
-  }>({
+  hass.callWS<DisableConfigEntryResult>({
     type: "config_entries/disable",
     entry_id: configEntryId,
     disabled_by: "user",
@@ -71,23 +73,3 @@ export const enableConfigEntry = (hass: HomeAssistant, configEntryId: string) =>
     entry_id: configEntryId,
     disabled_by: null,
   });
-
-export const getConfigEntrySystemOptions = (
-  hass: HomeAssistant,
-  configEntryId: string
-) =>
-  hass.callWS<ConfigEntrySystemOptions>({
-    type: "config_entries/system_options/list",
-    entry_id: configEntryId,
-  });
-
-export const updateConfigEntrySystemOptions = (
-  hass: HomeAssistant,
-  configEntryId: string,
-  params: Partial<ConfigEntrySystemOptions>
-) =>
-  hass.callWS({
-    type: "config_entries/system_options/update",
-    entry_id: configEntryId,
-    ...params,
-  });

src/data/hassio/addon.ts

@@ -212,13 +212,15 @@ export const setHassioAddonOption = async (
 
 export const validateHassioAddonOption = async (
   hass: HomeAssistant,
-  slug: string
+  slug: string,
+  data?: any
 ): Promise<{ message: string; valid: boolean }> => {
   if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
     return hass.callWS({
       type: "supervisor/api",
       endpoint: `/addons/${slug}/options/validate`,
       method: "post",
+      data,
     });
   }
 

src/data/hassio/network.ts

@@ -5,7 +5,7 @@ import { hassioApiResultExtractor, HassioResponse } from "./common";
 interface IpConfiguration {
   address: string[];
   gateway: string;
-  method: "disabled" | "static" | "auto";
+  method: "disabled" | "static" | "auto" | "link-local";
   nameservers: string[];
 }
 

src/data/hassio/snapshot.ts

@@ -130,6 +130,21 @@ export const createHassioFullSnapshot = async (
   );
 };
 
+export const removeSnapshot = async (hass: HomeAssistant, slug: string) => {
+  if (atLeastVersion(hass.config.version, 2021, 2, 4)) {
+    await hass.callWS({
+      type: "supervisor/api",
+      endpoint: `/snapshots/${slug}/remove`,
+      method: "post",
+    });
+    return;
+  }
+  await hass.callApi<HassioResponse<void>>(
+    "POST",
+    `hassio/snapshots/${slug}/remove`
+  );
+};
+
 export const createHassioPartialSnapshot = async (
   hass: HomeAssistant,
   data: HassioPartialSnapshotCreateParams

src/data/iconsets.ts

@@ -1,4 +1,5 @@
-import { clear, get, set, Store } from "idb-keyval";
+import { clear, get, set, createStore, promisifyRequest } from "idb-keyval";
+import { promiseTimeout } from "../common/util/promise-timeout";
 import { iconMetadata } from "../resources/icon-metadata";
 import { IconMeta } from "../types";
 
@@ -10,45 +11,44 @@ export interface Chunks {
   [key: string]: Promise<Icons>;
 }
 
-export const iconStore = new Store("hass-icon-db", "mdi-icon-store");
+export const iconStore = createStore("hass-icon-db", "mdi-icon-store");
 
 export const MDI_PREFIXES = ["mdi", "hass", "hassio", "hademo"];
 
-let toRead: Array<[string, (string) => void, () => void]> = [];
+let toRead: Array<
+  [string, (iconPath: string | undefined) => void, (e: any) => void]
+> = [];
 
 // Queue up as many icon fetches in 1 transaction
 export const getIcon = (iconName: string) =>
-  new Promise<string>((resolve, reject) => {
+  new Promise<string | undefined>((resolve, reject) => {
     toRead.push([iconName, resolve, reject]);
 
     if (toRead.length > 1) {
       return;
     }
 
-    const results: Array<[(string) => void, IDBRequest]> = [];
-
-    iconStore
-      ._withIDBStore("readonly", (store) => {
-        for (const [iconName_, resolve_] of toRead) {
-          results.push([resolve_, store.get(iconName_)]);
+    promiseTimeout(
+      1000,
+      iconStore("readonly", (store) => {
+        for (const [iconName_, resolve_, reject_] of toRead) {
+          promisifyRequest<string | undefined>(store.get(iconName_))
+            .then((icon) => resolve_(icon))
+            .catch((e) => reject_(e));
         }
         toRead = [];
       })
-      .then(() => {
-        for (const [resolve_, request] of results) {
-          resolve_(request.result);
-        }
-      })
-      .catch(() => {
-        // Firefox in private mode doesn't support IDB
-        for (const [, , reject_] of toRead) {
-          reject_();
-        }
-        toRead = [];
-      });
+    ).catch((e) => {
+      // Firefox in private mode doesn't support IDB
+      // Safari sometime doesn't open the DB so we time out
+      for (const [, , reject_] of toRead) {
+        reject_(e);
+      }
+      toRead = [];
+    });
   });
 
-export const findIconChunk = (icon): string => {
+export const findIconChunk = (icon: string): string => {
   let lastChunk: IconMeta;
   for (const chunk of iconMetadata.parts) {
     if (chunk.start !== undefined && icon < chunk.start) {
@@ -63,7 +63,7 @@ export const writeCache = async (chunks: Chunks) => {
   const keys = Object.keys(chunks);
   const iconsSets: Icons[] = await Promise.all(Object.values(chunks));
   // We do a batch opening the store just once, for (considerable) performance
-  iconStore._withIDBStore("readwrite", (store) => {
+  iconStore("readwrite", (store) => {
     iconsSets.forEach((icons, idx) => {
       Object.entries(icons).forEach(([name, path]) => {
         store.put(path, name);
@@ -73,14 +73,13 @@ export const writeCache = async (chunks: Chunks) => {
   });
 };
 
-export const checkCacheVersion = () => {
-  get("_version", iconStore).then((version) => {
-    if (!version) {
-      set("_version", iconMetadata.version, iconStore);
-    } else if (version !== iconMetadata.version) {
-      clear(iconStore).then(() =>
-        set("_version", iconMetadata.version, iconStore)
-      );
-    }
-  });
+export const checkCacheVersion = async () => {
+  const version = await get("_version", iconStore);
+
+  if (!version) {
+    set("_version", iconMetadata.version, iconStore);
+  } else if (version !== iconMetadata.version) {
+    await clear(iconStore);
+    set("_version", iconMetadata.version, iconStore);
+  }
 };

src/data/network.ts

@@ -0,0 +1,43 @@
+import { HomeAssistant } from "../types";
+
+export interface IPv6ConfiguredAddress {
+  address: string;
+  flowinfo: number;
+  scope_id: number;
+  network_prefix: number;
+}
+
+export interface IPv4ConfiguredAddress {
+  address: string;
+  network_prefix: number;
+}
+
+export interface Adapter {
+  name: string;
+  enabled: boolean;
+  auto: boolean;
+  default: boolean;
+  ipv6: IPv6ConfiguredAddress[];
+  ipv4: IPv4ConfiguredAddress[];
+}
+
+export interface NetworkConfig {
+  adapters: Adapter[];
+  configured_adapters: string[];
+}
+
+export const getNetworkConfig = (hass: HomeAssistant) =>
+  hass.callWS<NetworkConfig>({
+    type: "network",
+  });
+
+export const setNetworkConfig = (
+  hass: HomeAssistant,
+  configured_adapters: string[]
+) =>
+  hass.callWS<string[]>({
+    type: "network/configure",
+    config: {
+      configured_adapters: configured_adapters,
+    },
+  });

src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts

@@ -3,17 +3,17 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeRTLDirection } from "../../common/util/compute_rtl";
-import "../../components/ha-circular-progress";
 import "../../components/ha-dialog";
 import "../../components/ha-formfield";
 import "../../components/ha-switch";
 import type { HaSwitch } from "../../components/ha-switch";
 import {
-  getConfigEntrySystemOptions,
-  updateConfigEntrySystemOptions,
+  ConfigEntryMutableParams,
+  updateConfigEntry,
 } from "../../data/config_entries";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
+import { showAlertDialog } from "../generic/show-dialog-box";
 import { ConfigEntrySystemOptionsDialogParams } from "./show-dialog-config-entry-system-options";
 
 @customElement("dialog-config-entry-system-options")
@@ -22,12 +22,12 @@ class DialogConfigEntrySystemOptions extends LitElement {
 
   @state() private _disableNewEntities!: boolean;
 
+  @state() private _disablePolling!: boolean;
+
   @state() private _error?: string;
 
   @state() private _params?: ConfigEntrySystemOptionsDialogParams;
 
-  @state() private _loading = false;
-
   @state() private _submitting = false;
 
   public async showDialog(
@@ -35,13 +35,8 @@ class DialogConfigEntrySystemOptions extends LitElement {
   ): Promise<void> {
     this._params = params;
     this._error = undefined;
-    this._loading = true;
-    const systemOptions = await getConfigEntrySystemOptions(
-      this.hass,
-      params.entry.entry_id
-    );
-    this._loading = false;
-    this._disableNewEntities = systemOptions.disable_new_entities;
+    this._disableNewEntities = params.entry.pref_disable_new_entities;
+    this._disablePolling = params.entry.pref_disable_polling;
   }
 
   public closeDialog(): void {
@@ -66,45 +61,57 @@ class DialogConfigEntrySystemOptions extends LitElement {
             this._params.entry.domain
         )}
       >
-        <div>
-          ${this._loading
-            ? html`
-                <div class="init-spinner">
-                  <ha-circular-progress active></ha-circular-progress>
-                </div>
-              `
-            : html`
-                ${this._error
-                  ? html` <div class="error">${this._error}</div> `
-                  : ""}
-                <div class="form">
-                  <ha-formfield
-                    .label=${html`<p>
-                        ${this.hass.localize(
-                          "ui.dialogs.config_entry_system_options.enable_new_entities_label"
-                        )}
-                      </p>
-                      <p class="secondary">
-                        ${this.hass.localize(
-                          "ui.dialogs.config_entry_system_options.enable_new_entities_description",
-                          "integration",
-                          this.hass.localize(
-                            `component.${this._params.entry.domain}.title`
-                          ) || this._params.entry.domain
-                        )}
-                      </p>`}
-                    .dir=${computeRTLDirection(this.hass)}
-                  >
-                    <ha-switch
-                      .checked=${!this._disableNewEntities}
-                      @change=${this._disableNewEntitiesChanged}
-                      .disabled=${this._submitting}
-                    >
-                    </ha-switch>
-                  </ha-formfield>
-                </div>
-              `}
-        </div>
+        ${this._error ? html` <div class="error">${this._error}</div> ` : ""}
+        <ha-formfield
+          .label=${html`<p>
+              ${this.hass.localize(
+                "ui.dialogs.config_entry_system_options.enable_new_entities_label"
+              )}
+            </p>
+            <p class="secondary">
+              ${this.hass.localize(
+                "ui.dialogs.config_entry_system_options.enable_new_entities_description",
+                "integration",
+                this.hass.localize(
+                  `component.${this._params.entry.domain}.title`
+                ) || this._params.entry.domain
+              )}
+            </p>`}
+          .dir=${computeRTLDirection(this.hass)}
+        >
+          <ha-switch
+            .checked=${!this._disableNewEntities}
+            @change=${this._disableNewEntitiesChanged}
+            .disabled=${this._submitting}
+          ></ha-switch>
+        </ha-formfield>
+        ${this._allowUpdatePolling()
+          ? html`
+              <ha-formfield
+                .label=${html`<p>
+                    ${this.hass.localize(
+                      "ui.dialogs.config_entry_system_options.enable_polling_label"
+                    )}
+                  </p>
+                  <p class="secondary">
+                    ${this.hass.localize(
+                      "ui.dialogs.config_entry_system_options.enable_polling_description",
+                      "integration",
+                      this.hass.localize(
+                        `component.${this._params.entry.domain}.title`
+                      ) || this._params.entry.domain
+                    )}
+                  </p>`}
+                .dir=${computeRTLDirection(this.hass)}
+              >
+                <ha-switch
+                  .checked=${!this._disablePolling}
+                  @change=${this._disablePollingChanged}
+                  .disabled=${this._submitting}
+                ></ha-switch>
+              </ha-formfield>
+            `
+          : ""}
         <mwc-button
           slot="secondaryAction"
           @click=${this.closeDialog}
@@ -115,7 +122,7 @@ class DialogConfigEntrySystemOptions extends LitElement {
         <mwc-button
           slot="primaryAction"
           @click="${this._updateEntry}"
-          .disabled=${this._submitting || this._loading}
+          .disabled=${this._submitting}
         >
           ${this.hass.localize("ui.dialogs.config_entry_system_options.update")}
         </mwc-button>
@@ -123,22 +130,47 @@ class DialogConfigEntrySystemOptions extends LitElement {
     `;
   }
 
+  private _allowUpdatePolling() {
+    return (
+      this._params!.manifest &&
+      (this._params!.manifest.iot_class === "local_polling" ||
+        this._params!.manifest.iot_class === "cloud_polling")
+    );
+  }
+
   private _disableNewEntitiesChanged(ev: Event): void {
     this._error = undefined;
     this._disableNewEntities = !(ev.target as HaSwitch).checked;
   }
 
+  private _disablePollingChanged(ev: Event): void {
+    this._error = undefined;
+    this._disablePolling = !(ev.target as HaSwitch).checked;
+  }
+
   private async _updateEntry(): Promise<void> {
     this._submitting = true;
+    const data: ConfigEntryMutableParams = {
+      pref_disable_new_entities: this._disableNewEntities,
+    };
+    if (this._allowUpdatePolling()) {
+      data.pref_disable_polling = this._disablePolling;
+    }
     try {
-      await updateConfigEntrySystemOptions(
+      const result = await updateConfigEntry(
         this.hass,
         this._params!.entry.entry_id,
-        {
-          disable_new_entities: this._disableNewEntities,
-        }
+        data
       );
-      this._params = undefined;
+      if (result.require_restart) {
+        await showAlertDialog(this, {
+          text: this.hass.localize(
+            "ui.dialogs.config_entry_system_options.restart_home_assistant"
+          ),
+        });
+      }
+      this._params!.entryUpdated(result.config_entry);
+      this.closeDialog();
     } catch (err) {
       this._error = err.message || "Unknown error";
     } finally {
@@ -150,20 +182,6 @@ class DialogConfigEntrySystemOptions extends LitElement {
     return [
       haStyleDialog,
       css`
-        .init-spinner {
-          padding: 50px 100px;
-          text-align: center;
-        }
-
-        .form {
-          padding-top: 6px;
-          padding-bottom: 24px;
-          color: var(--primary-text-color);
-        }
-        .secondary {
-          color: var(--secondary-text-color);
-        }
-
         .error {
           color: var(--error-color);
         }

src/dialogs/config-entry-system-options/show-dialog-config-entry-system-options.ts

@@ -1,12 +1,11 @@
 import { fireEvent } from "../../common/dom/fire_event";
 import { ConfigEntry } from "../../data/config_entries";
+import { IntegrationManifest } from "../../data/integration";
 
 export interface ConfigEntrySystemOptionsDialogParams {
   entry: ConfigEntry;
-  // updateEntry: (
-  //   updates: Partial<EntityRegistryEntryUpdateParams>
-  // ) => Promise<unknown>;
-  // removeEntry: () => Promise<boolean>;
+  manifest?: IntegrationManifest;
+  entryUpdated(entry: ConfigEntry): void;
 }
 
 export const loadConfigEntrySystemOptionsDialog = () =>

src/dialogs/generic/dialog-box.ts

@@ -49,7 +49,7 @@ class DialogBox extends LitElement {
         open
         ?scrimClickAction=${confirmPrompt}
         ?escapeKeyAction=${confirmPrompt}
-        @closing=${this._dialogClosed}
+        @closed=${this._dialogClosed}
         defaultAction="ignore"
         .heading=${this._params.title
           ? this._params.title

src/dialogs/ha-store-auth-card.js

@@ -1,74 +0,0 @@
-import "@polymer/paper-card/paper-card";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { enableWrite } from "../common/auth/token_storage";
-import LocalizeMixin from "../mixins/localize-mixin";
-import "../styles/polymer-ha-style";
-
-class HaStoreAuth extends LocalizeMixin(PolymerElement) {
-  static get template() {
-    return html`
-      <style include="ha-style">
-        paper-card {
-          position: fixed;
-          padding: 8px 0;
-          bottom: 16px;
-          right: 16px;
-        }
-
-        .card-content {
-          color: var(--primary-text-color);
-        }
-
-        .card-actions {
-          text-align: right;
-          border-top: 0;
-          margin-right: -4px;
-        }
-
-        :host(.small) paper-card {
-          bottom: 0;
-          left: 0;
-          right: 0;
-        }
-      </style>
-      <paper-card elevation="4">
-        <div class="card-content">[[localize('ui.auth_store.ask')]]</div>
-        <div class="card-actions">
-          <mwc-button on-click="_done"
-            >[[localize('ui.auth_store.decline')]]</mwc-button
-          >
-          <mwc-button raised on-click="_save"
-            >[[localize('ui.auth_store.confirm')]]</mwc-button
-          >
-        </div>
-      </paper-card>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-    };
-  }
-
-  ready() {
-    super.ready();
-    this.classList.toggle("small", window.innerWidth < 600);
-  }
-
-  _save() {
-    enableWrite();
-    this._done();
-  }
-
-  _done() {
-    const card = this.shadowRoot.querySelector("paper-card");
-    card.style.transition = "bottom .25s";
-    card.style.bottom = `-${card.offsetHeight + 8}px`;
-    setTimeout(() => this.parentNode.removeChild(this), 300);
-  }
-}
-
-customElements.define("ha-store-auth-card", HaStoreAuth);

src/dialogs/ha-store-auth-card.ts

@@ -0,0 +1,78 @@
+import { LitElement, TemplateResult, html, css } from "lit";
+import { property } from "lit/decorators";
+import { enableWrite } from "../common/auth/token_storage";
+import { HomeAssistant } from "../types";
+import "../components/ha-card";
+import type { HaCard } from "../components/ha-card";
+import "@material/mwc-button/mwc-button";
+
+class HaStoreAuth extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  protected render(): TemplateResult {
+    return html`
+      <ha-card>
+        <div class="card-content">
+          ${this.hass.localize("ui.auth_store.ask")}
+        </div>
+        <div class="card-actions">
+          <mwc-button @click=${this._dismiss}>
+            ${this.hass.localize("ui.auth_store.decline")}
+          </mwc-button>
+          <mwc-button raised @click=${this._save}>
+            ${this.hass.localize("ui.auth_store.confirm")}
+          </mwc-button>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  firstUpdated() {
+    this.classList.toggle("small", window.innerWidth < 600);
+  }
+
+  private _save(): void {
+    enableWrite();
+    this._dismiss();
+  }
+
+  private _dismiss(): void {
+    const card = this.shadowRoot!.querySelector("ha-card") as HaCard;
+    card.style.bottom = `-${card.offsetHeight + 8}px`;
+    setTimeout(() => this.parentNode!.removeChild(this), 300);
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        position: fixed;
+        padding: 8px 0;
+        bottom: 16px;
+        right: 16px;
+        transition: bottom 0.25s;
+        --ha-card-box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
+          0px 6px 10px 0px rgba(0, 0, 0, 0.14),
+          0px 1px 18px 0px rgba(0, 0, 0, 0.12);
+      }
+
+      .card-actions {
+        text-align: right;
+        border-top: 0;
+      }
+
+      :host(.small) ha-card {
+        bottom: 0;
+        left: 0;
+        right: 0;
+      }
+    `;
+  }
+}
+
+customElements.define("ha-store-auth-card", HaStoreAuth);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-store-auth-card": HaStoreAuth;
+  }
+}

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

@@ -108,7 +108,7 @@ class MoreInfoWeather extends LitElement {
                   this.stateObj.attributes.pressure,
                   this.hass.locale
                 )}
-                ${getWeatherUnit(this.hass, "air_pressure")}
+                ${getWeatherUnit(this.hass, "pressure")}
               </div>
             </div>
           `

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

@@ -8,7 +8,7 @@ import "../../components/state-history-charts";
 import { getLogbookData, LogbookEntry } from "../../data/logbook";
 import { loadTraceContexts, TraceContexts } from "../../data/trace";
 import "../../panels/logbook/ha-logbook";
-import { haStyle, haStyleScrollbar } from "../../resources/styles";
+import { haStyle } from "../../resources/styles";
 import { HomeAssistant } from "../../types";
 import { closeDialog } from "../make-dialog-manager";
 
@@ -52,7 +52,6 @@ export class MoreInfoLogbook extends LitElement {
           : this._logbookEntries.length
           ? html`
               <ha-logbook
-                class="ha-scrollbar"
                 narrow
                 no-icon
                 no-name
@@ -149,7 +148,6 @@ export class MoreInfoLogbook extends LitElement {
   static get styles() {
     return [
       haStyle,
-      haStyleScrollbar,
       css`
         .no-entries {
           text-align: center;
@@ -157,12 +155,11 @@ export class MoreInfoLogbook extends LitElement {
           color: var(--secondary-text-color);
         }
         ha-logbook {
-          max-height: 250px;
-          overflow: auto;
+          --logbook-max-height: 250px;
         }
         @media all and (max-width: 450px), all and (max-height: 500px) {
           ha-logbook {
-            max-height: unset;
+            --logbook-max-height: unset;
           }
         }
         ha-circular-progress {

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

@@ -1,4 +1,4 @@
-import { Layout1d, scroll } from "@lit-labs/virtualizer";
+import { Layout1d, scroll } from "../../resources/lit-virtualizer";
 import "@material/mwc-list/mwc-list";
 import type { List } from "@material/mwc-list/mwc-list";
 import { SingleSelectedEvent } from "@material/mwc-list/mwc-list-foundation";
@@ -188,7 +188,6 @@ export class QuickBar extends LitElement {
               ${scroll({
                 items,
                 layout: Layout1d,
-                // @ts-expect-error
                 renderItem: (item: QuickBarItem, index) =>
                   this._renderItem(item, index),
               })}
@@ -223,6 +222,9 @@ export class QuickBar extends LitElement {
   }
 
   private _renderItem(item: QuickBarItem, index?: number) {
+    if (!item) {
+      return html``;
+    }
     return isCommandItem(item)
       ? this._renderCommandItem(item, index)
       : this._renderEntityItem(item as EntityItem, index);
@@ -636,18 +638,6 @@ export class QuickBar extends LitElement {
           margin-left: 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

@@ -277,7 +277,7 @@ export const provideHass = (
     mockTheme(theme) {
       invalidateThemeCache();
       hass().updateHass({
-        selectedThemeSettings: { theme: theme ? "mock" : "default" },
+        selectedTheme: { theme: theme ? "mock" : "default" },
         themes: {
           ...hass().themes,
           themes: {
@@ -285,11 +285,11 @@ export const provideHass = (
           },
         },
       });
-      const { themes, selectedThemeSettings } = hass();
+      const { themes, selectedTheme } = hass();
       applyThemesOnElement(
         document.documentElement,
         themes,
-        selectedThemeSettings!.theme
+        selectedTheme!.theme
       );
     },
 

src/layouts/hass-tabs-subpage.ts

@@ -229,7 +229,7 @@ class HassTabsSubpage extends LitElement {
         color: var(--sidebar-text-color);
         text-decoration: none;
       }
-      :host([narrow]) .toolbar a {
+      .bottom-bar a {
         width: 25%;
       }
 

src/layouts/supervisor-error-screen.ts

@@ -81,27 +81,25 @@ class SupervisorErrorScreen extends LitElement {
 
   private _applyTheme() {
     let themeName: string;
-    let themeSettings:
-      | Partial<HomeAssistant["selectedThemeSettings"]>
-      | undefined;
+    let themeSettings: Partial<HomeAssistant["selectedTheme"]> | undefined;
 
     if (atLeastVersion(this.hass.config.version, 0, 114)) {
       themeName =
-        this.hass.selectedThemeSettings?.theme ||
+        this.hass.selectedTheme?.theme ||
         (this.hass.themes.darkMode && this.hass.themes.default_dark_theme
           ? this.hass.themes.default_dark_theme!
           : this.hass.themes.default_theme);
 
-      themeSettings = this.hass.selectedThemeSettings;
+      themeSettings = this.hass.selectedTheme;
       if (themeName === "default" && themeSettings?.dark === undefined) {
         themeSettings = {
-          ...this.hass.selectedThemeSettings,
+          ...this.hass.selectedTheme,
           dark: this.hass.themes.darkMode,
         };
       }
     } else {
       themeName =
-        ((this.hass.selectedThemeSettings as unknown) as string) ||
+        ((this.hass.selectedTheme as unknown) as string) ||
         this.hass.themes.default_theme;
     }
 

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

@@ -90,9 +90,9 @@ export class HAFullCalendar extends LitElement {
 
   @property() public initialView: FullCalendarView = "dayGridMonth";
 
-  @state() private calendar?: Calendar;
+  private calendar?: Calendar;
 
-  @state() private _activeView?: FullCalendarView;
+  @state() private _activeView = this.initialView;
 
   public updateSize(): void {
     this.calendar?.updateSize();
@@ -181,8 +181,8 @@ export class HAFullCalendar extends LitElement {
     `;
   }
 
-  protected updated(changedProps: PropertyValues): void {
-    super.updated(changedProps);
+  public willUpdate(changedProps: PropertyValues): void {
+    super.willUpdate(changedProps);
 
     if (!this.calendar) {
       return;
@@ -216,8 +216,6 @@ export class HAFullCalendar extends LitElement {
       initialView: this.initialView,
     };
 
-    this._activeView = this.initialView;
-
     config.dateClick = (info) => this._handleDateClick(info);
     config.eventClick = (info) => this._handleEventClick(info);
 

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

@@ -48,9 +48,11 @@ class PanelCalendar extends LitElement {
 
   private _end?: Date;
 
-  protected firstUpdated(changedProps: PropertyValues): void {
-    super.firstUpdated(changedProps);
-    this._calendars = getCalendars(this.hass);
+  public willUpdate(changedProps: PropertyValues): void {
+    super.willUpdate(changedProps);
+    if (!this.hasUpdated) {
+      this._calendars = getCalendars(this.hass);
+    }
   }
 
   protected render(): TemplateResult {

src/panels/config/automation/trace/ha-automation-trace-blueprint-config.ts

@@ -1,4 +1,4 @@
-import { safeDump } from "js-yaml";
+import { dump } from "js-yaml";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../components/ha-code-editor";
@@ -15,7 +15,7 @@ export class HaAutomationTraceBlueprintConfig extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-code-editor
-        .value=${safeDump(this.trace.blueprint_inputs || "").trimRight()}
+        .value=${dump(this.trace.blueprint_inputs || "").trimRight()}
         readOnly
       ></ha-code-editor>
     `;

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

@@ -1,4 +1,4 @@
-import { safeDump } from "js-yaml";
+import { dump } from "js-yaml";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../../components/ha-code-editor";
@@ -15,7 +15,7 @@ export class HaAutomationTraceConfig extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-code-editor
-        .value=${safeDump(this.trace.config).trimRight()}
+        .value=${dump(this.trace.config).trimRight()}
         readOnly
       ></ha-code-editor>
     `;

src/panels/config/automation/trace/ha-automation-trace-path-details.ts

@@ -1,4 +1,4 @@
-import { safeDump } from "js-yaml";
+import { dump } from "js-yaml";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -132,13 +132,13 @@ export class HaAutomationTracePathDetails extends LitElement {
             )}<br />
             ${result
               ? html`Result:
-                  <pre>${safeDump(result)}</pre>`
+                  <pre>${dump(result)}</pre>`
               : error
               ? html`<div class="error">Error: ${error}</div>`
               : ""}
             ${Object.keys(rest).length === 0
               ? ""
-              : html`<pre>${safeDump(rest)}</pre>`}
+              : html`<pre>${dump(rest)}</pre>`}
           `;
         })
       );
@@ -154,7 +154,7 @@ export class HaAutomationTracePathDetails extends LitElement {
     const config = getDataFromPath(this.trace!.config, this.selected.path);
     return config
       ? html`<ha-code-editor
-          .value=${safeDump(config).trimRight()}
+          .value=${dump(config).trimRight()}
           readOnly
         ></ha-code-editor>`
       : "Unable to find config";
@@ -171,9 +171,7 @@ export class HaAutomationTracePathDetails extends LitElement {
             ${idx > 0 ? html`<p>Iteration ${idx + 1}</p>` : ""}
             ${Object.keys(trace.changed_variables || {}).length === 0
               ? "No variables changed"
-              : html`<pre>
-${safeDump(trace.changed_variables).trimRight()}</pre
-                >`}
+              : html`<pre>${dump(trace.changed_variables).trimRight()}</pre>`}
           `
         )}
       </div>

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

@@ -6,7 +6,7 @@ import { TagTrigger } from "../../../../../data/automation";
 import { fetchTags, Tag } from "../../../../../data/tag";
 import { HomeAssistant } from "../../../../../types";
 import { TriggerElement } from "../ha-automation-trigger-row";
-
+import "../../../../../components/ha-paper-dropdown-menu";
 @customElement("ha-automation-trigger-tag")
 export class HaTagTrigger extends LitElement implements TriggerElement {
   @property({ attribute: false }) public hass!: HomeAssistant;

src/panels/config/core/ha-config-network.ts

@@ -0,0 +1,141 @@
+import "@material/mwc-button/mwc-button";
+import {
+  css,
+  CSSResultGroup,
+  html,
+  LitElement,
+  PropertyValues,
+  TemplateResult,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { isComponentLoaded } from "../../../common/config/is_component_loaded";
+import "../../../components/ha-card";
+import "../../../components/ha-checkbox";
+import "../../../components/ha-network";
+import "../../../components/ha-settings-row";
+import { fetchNetworkInfo } from "../../../data/hassio/network";
+import {
+  getNetworkConfig,
+  NetworkConfig,
+  setNetworkConfig,
+} from "../../../data/network";
+import { haStyle } from "../../../resources/styles";
+import type { HomeAssistant } from "../../../types";
+
+@customElement("ha-config-network")
+class ConfigNetwork extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @state() private _networkConfig?: NetworkConfig;
+
+  @state() private _error?: string;
+
+  protected render(): TemplateResult {
+    if (
+      !this.hass.userData?.showAdvanced ||
+      !isComponentLoaded(this.hass, "network")
+    ) {
+      return html``;
+    }
+
+    return html`
+      <ha-card header="Network">
+        <div class="card-content">
+          ${this._error ? html`<div class="error">${this._error}</div>` : ""}
+          <p>
+            Configure which network adapters integrations will use. Currently
+            this setting only affects multicast traffic. A restart is required
+            for these settings to apply.
+          </p>
+          <ha-network
+            @network-config-changed=${this._configChanged}
+            .hass=${this.hass}
+            .networkConfig=${this._networkConfig}
+          ></ha-network>
+        </div>
+        <div class="card-actions">
+          <mwc-button @click=${this._save}>
+            ${this.hass.localize(
+              "ui.panel.config.core.section.core.core_config.save_button"
+            )}
+          </mwc-button>
+        </div>
+      </ha-card>
+    `;
+  }
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    if (isComponentLoaded(this.hass, "network")) {
+      this._load();
+    }
+  }
+
+  private async _load() {
+    this._error = undefined;
+    try {
+      const coreNetwork = await getNetworkConfig(this.hass);
+      if (isComponentLoaded(this.hass, "hassio")) {
+        const supervisorNetwork = await fetchNetworkInfo(this.hass);
+        const interfaces = new Set(
+          supervisorNetwork.interfaces.map((int) => int.interface)
+        );
+        if (interfaces.size) {
+          coreNetwork.adapters = coreNetwork.adapters.filter((adapter) =>
+            interfaces.has(adapter.name)
+          );
+        }
+      }
+      this._networkConfig = coreNetwork;
+    } catch (err) {
+      this._error = err.message || err;
+    }
+  }
+
+  private async _save() {
+    this._error = undefined;
+    try {
+      await setNetworkConfig(
+        this.hass,
+        this._networkConfig?.configured_adapters || []
+      );
+    } catch (err) {
+      this._error = err.message || err;
+    }
+  }
+
+  private _configChanged(event: CustomEvent): void {
+    this._networkConfig = {
+      ...this._networkConfig!,
+      configured_adapters: event.detail.configured_adapters,
+    };
+  }
+
+  static get styles(): CSSResultGroup {
+    return [
+      haStyle,
+      css`
+        .error {
+          color: var(--error-color);
+        }
+
+        ha-settings-row {
+          padding: 0;
+        }
+
+        .card-actions {
+          display: flex;
+          flex-direction: row-reverse;
+          justify-content: space-between;
+          align-items: center;
+        }
+      `, // row-reverse so we tab first to "save"
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-network": ConfigNetwork;
+  }
+}

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

@@ -11,6 +11,7 @@ import "../ha-config-section";
 import "./ha-config-analytics";
 import "./ha-config-core-form";
 import "./ha-config-name-form";
+import "./ha-config-network";
 import "./ha-config-url-form";
 
 /*
@@ -30,6 +31,7 @@ class HaConfigSectionCore extends LocalizeMixin(PolymerElement) {
         <ha-config-name-form hass="[[hass]]"></ha-config-name-form>
         <ha-config-core-form hass="[[hass]]"></ha-config-core-form>
         <ha-config-url-form hass="[[hass]]"></ha-config-url-form>
+        <ha-config-network hass="[[hass]]"></ha-config-network>
         <ha-config-analytics hass="[[hass]]"></ha-config-analytics>
       </ha-config-section>
     `;

src/panels/config/devices/device-detail/integration-elements/mqtt/dialog-mqtt-device-debug-info.ts

@@ -49,7 +49,7 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
     return html`
       <ha-dialog
         open
-        @closing=${this._close}
+        @closed=${this._close}
         .heading="${this.hass!.localize(
           "ui.dialogs.mqtt_device_debug_info.title",
           "device",

src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-discovery-payload.ts

@@ -1,4 +1,4 @@
-import { safeDump } from "js-yaml";
+import { dump } from "js-yaml";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -31,7 +31,7 @@ class MQTTDiscoveryPayload extends LitElement {
     const payload = this.payload;
     return html`
       ${this.showAsYaml
-        ? html` <pre>${safeDump(payload)}</pre> `
+        ? html` <pre>${dump(payload)}</pre> `
         : html` <pre>${JSON.stringify(payload, null, 2)}</pre> `}
     `;
   }

src/panels/config/devices/device-detail/integration-elements/mqtt/mqtt-messages.ts

@@ -1,4 +1,4 @@
-import { safeDump } from "js-yaml";
+import { dump } from "js-yaml";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
@@ -92,7 +92,7 @@ class MQTTMessages extends LitElement {
     return json
       ? html`
           ${this.showAsYaml
-            ? html` <pre>${safeDump(json)}</pre> `
+            ? html` <pre>${dump(json)}</pre> `
             : html` <pre>${JSON.stringify(json, null, 2)}</pre> `}
         `
       : html` <code>${message.payload}</code> `;

src/panels/config/devices/ha-config-device-page.ts

@@ -11,7 +11,11 @@ import { slugify } from "../../../common/string/slugify";
 import "../../../components/entity/ha-battery-icon";
 import "../../../components/ha-icon-next";
 import { AreaRegistryEntry } from "../../../data/area_registry";
-import { ConfigEntry, disableConfigEntry } from "../../../data/config_entries";
+import {
+  ConfigEntry,
+  disableConfigEntry,
+  DisableConfigEntryResult,
+} from "../../../data/config_entries";
 import {
   computeDeviceName,
   DeviceRegistryEntry,
@@ -25,7 +29,10 @@ import {
 } from "../../../data/entity_registry";
 import { SceneEntities, showSceneEditor } from "../../../data/scene";
 import { findRelated, RelatedResult } from "../../../data/search";
-import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
+import {
+  showAlertDialog,
+  showConfirmationDialog,
+} from "../../../dialogs/generic/show-dialog-box";
 import "../../../layouts/hass-error-screen";
 import "../../../layouts/hass-tabs-subpage";
 import { haStyle } from "../../../resources/styles";
@@ -671,13 +678,41 @@ export class HaConfigDevicePage extends LitElement {
                   dismissText: this.hass.localize("ui.common.no"),
                 }))
               ) {
-                disableConfigEntry(this.hass, cnfg_entry);
+                let result: DisableConfigEntryResult;
+                try {
+                  // eslint-disable-next-line no-await-in-loop
+                  result = await disableConfigEntry(this.hass, cnfg_entry);
+                } catch (err) {
+                  showAlertDialog(this, {
+                    title: this.hass.localize(
+                      "ui.panel.config.integrations.config_entry.disable_error"
+                    ),
+                    text: err.message,
+                  });
+                  return;
+                }
+                if (result.require_restart) {
+                  showAlertDialog(this, {
+                    text: this.hass.localize(
+                      "ui.panel.config.integrations.config_entry.disable_restart_confirm"
+                    ),
+                  });
+                }
                 delete updates.disabled_by;
               }
             }
           }
         }
-        await updateDeviceRegistryEntry(this.hass, this.deviceId, updates);
+        try {
+          await updateDeviceRegistryEntry(this.hass, this.deviceId, updates);
+        } catch (err) {
+          showAlertDialog(this, {
+            title: this.hass.localize(
+              "ui.panel.config.devices.update_device_error"
+            ),
+            text: err.message,
+          });
+        }
 
         if (
           !oldDeviceName ||

src/panels/config/helpers/dialog-helper-detail.ts

@@ -68,7 +68,7 @@ export class DialogHelperDetail extends LitElement {
     return html`
       <ha-dialog
         .open=${this._opened}
-        @closing=${this.closeDialog}
+        @closed=${this.closeDialog}
         class=${classMap({ "button-left": !this._platform })}
         scrimClickAction
         escapeKeyAction

src/panels/config/helpers/forms/ha-input_number-form.ts

@@ -193,9 +193,6 @@ class HaInputNumberForm extends LitElement {
         .form {
           color: var(--primary-text-color);
         }
-        ha-paper-dropdown-menu {
-          display: block;
-        }
       `,
     ];
   }

src/panels/config/helpers/forms/ha-input_select-form.ts

@@ -196,9 +196,6 @@ class HaInputSelectForm extends LitElement {
         mwc-button {
           margin-left: 8px;
         }
-        ha-paper-dropdown-menu {
-          display: block;
-        }
       `,
     ];
   }

src/panels/config/helpers/forms/ha-input_text-form.ts

@@ -179,9 +179,6 @@ class HaInputTextForm extends LitElement {
         .row {
           padding: 16px 0;
         }
-        ha-paper-dropdown-menu {
-          display: block;
-        }
       `,
     ];
   }

src/panels/config/integrations/ha-integration-card.ts

@@ -18,6 +18,7 @@ import {
   ConfigEntry,
   deleteConfigEntry,
   disableConfigEntry,
+  DisableConfigEntryResult,
   enableConfigEntry,
   reloadConfigEntry,
   updateConfigEntry,
@@ -110,6 +111,7 @@ export class HaIntegrationCard extends LitElement {
             : undefined}
           .localizedDomainName=${item ? item.localized_domain_name : undefined}
           .manifest=${this.manifest}
+          .configEntry=${item}
         >
           ${this.items.length > 1
             ? html`
@@ -466,6 +468,11 @@ export class HaIntegrationCard extends LitElement {
   private _showSystemOptions(configEntry: ConfigEntry) {
     showConfigEntrySystemOptionsDialog(this, {
       entry: configEntry,
+      manifest: this.manifest,
+      entryUpdated: (entry) =>
+        fireEvent(this, "entry-updated", {
+          entry,
+        }),
     });
   }
 
@@ -481,7 +488,18 @@ export class HaIntegrationCard extends LitElement {
     if (!confirmed) {
       return;
     }
-    const result = await disableConfigEntry(this.hass, entryId);
+    let result: DisableConfigEntryResult;
+    try {
+      result = await disableConfigEntry(this.hass, entryId);
+    } catch (err) {
+      showAlertDialog(this, {
+        title: this.hass.localize(
+          "ui.panel.config.integrations.config_entry.disable_error"
+        ),
+        text: err.message,
+      });
+      return;
+    }
     if (result.require_restart) {
       showAlertDialog(this, {
         text: this.hass.localize(
@@ -497,7 +515,18 @@ export class HaIntegrationCard extends LitElement {
   private async _enableIntegration(configEntry: ConfigEntry) {
     const entryId = configEntry.entry_id;
 
-    const result = await enableConfigEntry(this.hass, entryId);
+    let result: DisableConfigEntryResult;
+    try {
+      result = await enableConfigEntry(this.hass, entryId);
+    } catch (err) {
+      showAlertDialog(this, {
+        title: this.hass.localize(
+          "ui.panel.config.integrations.config_entry.disable_error"
+        ),
+        text: err.message,
+      });
+      return;
+    }
 
     if (result.require_restart) {
       showAlertDialog(this, {
@@ -561,10 +590,10 @@ export class HaIntegrationCard extends LitElement {
     if (newName === null) {
       return;
     }
-    const newEntry = await updateConfigEntry(this.hass, configEntry.entry_id, {
+    const result = await updateConfigEntry(this.hass, configEntry.entry_id, {
       title: newName,
     });
-    fireEvent(this, "entry-updated", { entry: newEntry });
+    fireEvent(this, "entry-updated", { entry: result.config_entry });
   }
 
   static get styles(): CSSResultGroup {

src/panels/config/integrations/ha-integration-header.ts

@@ -1,8 +1,9 @@
-import { mdiCloud, mdiPackageVariant } from "@mdi/js";
+import { mdiCloud, mdiPackageVariant, mdiSyncOff } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import "../../../components/ha-svg-icon";
+import { ConfigEntry } from "../../../data/config_entries";
 import { domainToName, IntegrationManifest } from "../../../data/integration";
 import { HomeAssistant } from "../../../types";
 import { brandsUrl } from "../../../util/brands-url";
@@ -21,6 +22,8 @@ export class HaIntegrationHeader extends LitElement {
 
   @property({ attribute: false }) public manifest?: IntegrationManifest;
 
+  @property({ attribute: false }) public configEntry?: ConfigEntry;
+
   protected render(): TemplateResult {
     let primary: string;
     let secondary: string | undefined;
@@ -59,6 +62,15 @@ export class HaIntegrationHeader extends LitElement {
           ),
         ]);
       }
+
+      if (this.configEntry?.pref_disable_polling) {
+        icons.push([
+          mdiSyncOff,
+          this.hass.localize(
+            "ui.panel.config.integrations.config_entry.disabled_polling"
+          ),
+        ]);
+      }
     }
 
     return html`

src/panels/config/integrations/integration-panels/ozw/dialog-ozw-refresh-node.ts

@@ -79,7 +79,7 @@ class DialogOZWRefreshNode extends LitElement {
     return html`
       <ha-dialog
         open
-        @closing="${this._close}"
+        @closed="${this._close}"
         .heading=${createCloseHeading(
           this.hass,
           this.hass.localize("ui.panel.config.ozw.refresh_node.title")

src/panels/config/integrations/integration-panels/zha/dialog-zha-cluster.ts

@@ -61,7 +61,7 @@ class DialogZHACluster extends LitElement {
       <ha-dialog
         open
         hideActions
-        @closing="${this._close}"
+        @closed="${this._close}"
         .heading=${createCloseHeading(
           this.hass,
           this.hass.localize("ui.panel.config.zha.clusters.header")

src/panels/config/integrations/integration-panels/zha/dialog-zha-device-zigbee-info.ts

@@ -36,7 +36,7 @@ class DialogZHADeviceZigbeeInfo extends LitElement {
       <ha-dialog
         open
         hideActions
-        @closing="${this._close}"
+        @closed="${this._close}"
         .heading=${createCloseHeading(
           this.hass,
           this.hass.localize(`ui.dialogs.zha_device_info.device_signature`)

src/panels/config/integrations/integration-panels/zha/zha-network-visualization-page.ts

@@ -9,7 +9,12 @@ import {
 } from "../../../../../data/zha";
 import "../../../../../layouts/hass-tabs-subpage";
 import type { HomeAssistant, Route } from "../../../../../types";
-import { Network, Edge, Node, EdgeOptions } from "vis-network";
+import {
+  Network,
+  Edge,
+  Node,
+  EdgeOptions,
+} from "vis-network/peer/esm/vis-network";
 import "../../../../../common/search/search-input";
 import "../../../../../components/device/ha-device-picker";
 import "../../../../../components/ha-button-menu";
@@ -21,6 +26,7 @@ import "../../../../../components/ha-checkbox";
 import type { HaCheckbox } from "../../../../../components/ha-checkbox";
 import { zhaTabs } from "./zha-config-dashboard";
 import { customElement, property, query, state } from "lit/decorators";
+import "../../../../../components/ha-formfield";
 
 @customElement("zha-network-visualization-page")
 export class ZHANetworkVisualizationPage extends LitElement {
@@ -28,7 +34,7 @@ export class ZHANetworkVisualizationPage extends LitElement {
 
   @property({ attribute: false }) public route!: Route;
 
-  @property({ type: Boolean }) public narrow!: boolean;
+  @property({ type: Boolean, reflect: true }) public narrow!: boolean;
 
   @property({ type: Boolean }) public isWide!: boolean;
 
@@ -67,8 +73,6 @@ export class ZHANetworkVisualizationPage extends LitElement {
       {},
       {
         autoResize: true,
-        height: window.innerHeight + "px",
-        width: window.innerWidth + "px",
         layout: {
           improvedLayout: true,
         },
@@ -135,17 +139,35 @@ export class ZHANetworkVisualizationPage extends LitElement {
           "ui.panel.config.zha.visualization.header"
         )}
       >
-        <div class="table-header">
-          <search-input
-            no-label-float
-            no-underline
-            @value-changed=${this._handleSearchChange}
-            .filter=${this._filter}
-            .label=${this.hass.localize(
-              "ui.panel.config.zha.visualization.highlight_label"
-            )}
-          >
-          </search-input>
+        ${this.narrow
+          ? html`
+              <div slot="header">
+                <search-input
+                  no-label-float
+                  no-underline
+                  class="header"
+                  @value-changed=${this._handleSearchChange}
+                  .filter=${this._filter}
+                  .label=${this.hass.localize(
+                    "ui.panel.config.zha.visualization.highlight_label"
+                  )}
+                >
+                </search-input>
+              </div>
+            `
+          : ""}
+        <div class="header">
+          ${!this.narrow
+            ? html`<search-input
+                no-label-float
+                no-underline
+                @value-changed=${this._handleSearchChange}
+                .filter=${this._filter}
+                .label=${this.hass.localize(
+                  "ui.panel.config.zha.visualization.highlight_label"
+                )}
+              ></search-input>`
+            : ""}
           <ha-device-picker
             .hass=${this.hass}
             .value=${this.zoomedDeviceId}
@@ -155,16 +177,24 @@ export class ZHANetworkVisualizationPage extends LitElement {
             .deviceFilter=${(device) => this._filterDevices(device)}
             @value-changed=${this._onZoomToDevice}
           ></ha-device-picker>
-          <ha-checkbox
-            @change=${this._handleCheckboxChange}
-            .checked=${this._autoZoom}
-          ></ha-checkbox
-          >${this.hass!.localize("ui.panel.config.zha.visualization.auto_zoom")}
-          <mwc-button @click=${this._refreshTopology}
-            >${this.hass!.localize(
-              "ui.panel.config.zha.visualization.refresh_topology"
-            )}</mwc-button
-          >
+          <div class="controls">
+            <ha-formfield
+              .label=${this.hass!.localize(
+                "ui.panel.config.zha.visualization.auto_zoom"
+              )}
+            >
+              <ha-checkbox
+                @change=${this._handleCheckboxChange}
+                .checked=${this._autoZoom}
+              >
+              </ha-checkbox>
+            </ha-formfield>
+            <mwc-button @click=${this._refreshTopology}>
+              ${this.hass!.localize(
+                "ui.panel.config.zha.visualization.refresh_topology"
+              )}
+            </mwc-button>
+          </div>
         </div>
         <div id="visualization"></div>
       </hass-tabs-subpage>
@@ -352,30 +382,23 @@ export class ZHANetworkVisualizationPage extends LitElement {
     return [
       css`
         .header {
-          font-family: var(--paper-font-display1_-_font-family);
-          -webkit-font-smoothing: var(
-            --paper-font-display1_-_-webkit-font-smoothing
-          );
-          font-size: var(--paper-font-display1_-_font-size);
-          font-weight: var(--paper-font-display1_-_font-weight);
-          letter-spacing: var(--paper-font-display1_-_letter-spacing);
-          line-height: var(--paper-font-display1_-_line-height);
-          opacity: var(--dark-primary-opacity);
-        }
-
-        .table-header {
-          border-bottom: 1px solid --divider-color;
-          padding: 0 16px;
+          border-bottom: 1px solid var(--divider-color);
+          padding: 0 8px;
           display: flex;
           align-items: center;
-          flex-direction: row;
+          justify-content: space-between;
           height: var(--header-height);
+          box-sizing: border-box;
         }
 
-        :host([narrow]) .table-header {
+        .header > * {
+          padding: 0 8px;
+        }
+
+        :host([narrow]) .header {
           flex-direction: column;
           align-items: stretch;
-          height: var(--header-height) * 3;
+          height: var(--header-height) * 2;
         }
 
         .search-toolbar {
@@ -386,34 +409,34 @@ export class ZHANetworkVisualizationPage extends LitElement {
         }
 
         search-input {
-          position: relative;
-          top: 2px;
           flex: 1;
         }
 
-        :host(:not([narrow])) search-input {
-          margin: 5px;
-        }
-
         search-input.header {
-          left: -8px;
+          display: block;
+          position: relative;
+          top: -2px;
+          color: var(--secondary-text-color);
         }
 
         ha-device-picker {
           flex: 1;
+          position: relative;
+          top: -4px;
         }
 
-        :host(:not([narrow])) ha-device-picker {
-          margin: 5px;
+        .controls {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
         }
 
-        mwc-button {
-          font-weight: 500;
-          color: var(--primary-color);
+        #visualization {
+          height: calc(100% - var(--header-height));
+          width: 100%;
         }
-
-        :host(:not([narrow])) mwc-button {
-          margin: 5px;
+        :host([narrow]) #visualization {
+          height: calc(100% - (var(--header-height) * 2));
         }
       `,
     ];

src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts

@@ -74,7 +74,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
     return html`
       <ha-dialog
         open
-        @closing="${this._close}"
+        @closed="${this._close}"
         scrimClickAction
         escapeKeyAction
         .heading=${createCloseHeading(

src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts

@@ -66,7 +66,7 @@ export class DialogLovelaceResourceDetail extends LitElement {
     return html`
       <ha-dialog
         open
-        @closing=${this._close}
+        @closed=${this._close}
         scrimClickAction
         escapeKeyAction
         .heading=${createCloseHeading(

src/panels/config/users/dialog-add-user.ts

@@ -84,7 +84,7 @@ export class DialogAddUser extends LitElement {
     return html`
       <ha-dialog
         open
-        @closing=${this._close}
+        @closed=${this._close}
         scrimClickAction
         escapeKeyAction
         .heading=${this.hass.localize("ui.panel.config.users.add_user.caption")}

src/panels/config/users/dialog-user-detail.ts

@@ -55,7 +55,7 @@ class DialogUserDetail extends LitElement {
     return html`
       <ha-dialog
         open
-        @closing=${this._close}
+        @closed=${this._close}
         scrimClickAction
         escapeKeyAction
         .heading=${createCloseHeading(this.hass, user.name)}

src/panels/developer-tools/event/developer-tools-event.js

@@ -4,7 +4,7 @@ import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { safeLoad } from "js-yaml";
+import { load } from "js-yaml";
 import "../../../components/ha-code-editor";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { EventsMixin } from "../../../mixins/events-mixin";
@@ -151,7 +151,7 @@ class HaPanelDevEvent extends EventsMixin(LocalizeMixin(PolymerElement)) {
 
   _computeParsedEventData(eventData) {
     try {
-      return eventData.trim() ? safeLoad(eventData) : {};
+      return eventData.trim() ? load(eventData) : {};
     } catch (err) {
       return ERROR_SENTINEL;
     }

src/panels/developer-tools/service/developer-tools-service.ts

@@ -1,6 +1,6 @@
 import { mdiHelpCircle } from "@mdi/js";
 import { ERR_CONNECTION_LOST } from "home-assistant-js-websocket";
-import { safeLoad } from "js-yaml";
+import { load } from "js-yaml";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -361,9 +361,9 @@ class HaPanelDevService extends LitElement {
     const example = {};
     fields.forEach((field) => {
       if (field.example) {
-        let value = "";
+        let value: any = "";
         try {
-          value = safeLoad(field.example);
+          value = load(field.example);
         } catch (err) {
           value = field.example;
         }

src/panels/developer-tools/state/developer-tools-state.js

@@ -9,9 +9,10 @@ import "@polymer/paper-input/paper-input";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
-import { safeDump, safeLoad } from "js-yaml";
+import { dump, load } from "js-yaml";
 import { formatDateTimeWithSeconds } from "../../../common/datetime/format_date_time";
 import { computeRTL } from "../../../common/util/compute_rtl";
+import { escapeRegExp } from "../../../common/string/escape_regexp";
 import { copyToClipboard } from "../../../common/util/copy-clipboard";
 import "../../../components/entity/ha-entity-picker";
 import "../../../components/ha-code-editor";
@@ -91,6 +92,12 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
           --mdc-icon-size: 20px;
           padding: 4px;
           cursor: pointer;
+          flex-shrink: 0;
+          margin-right: 8px;
+        }
+        .entities td:nth-child(1) {
+          min-width: 300px;
+          width: 30%;
         }
         .entities td:nth-child(3) {
           white-space: pre-wrap;
@@ -101,6 +108,15 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
           color: var(--primary-color);
         }
 
+        .entities .id-name-container {
+          display: flex;
+          flex-direction: column;
+        }
+        .entities .id-name-row {
+          display: flex;
+          align-items: center;
+        }
+
         :host([narrow]) .state-wrapper {
           flex-direction: column;
         }
@@ -219,19 +235,30 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
           <template is="dom-repeat" items="[[_entities]]" as="entity">
             <tr>
               <td>
-                <ha-svg-icon
-                  on-click="entityMoreInfo"
-                  alt="[[localize('ui.panel.developer-tools.tabs.states.more_info')]]"
-                  title="[[localize('ui.panel.developer-tools.tabs.states.more_info')]]"
-                  path="[[informationOutlineIcon()]]"
-                ></ha-svg-icon>
-                <ha-svg-icon
-                  on-click="copyEntity"
-                  alt="[[localize('ui.panel.developer-tools.tabs.states.copy_id')]]"
-                  title="[[localize('ui.panel.developer-tools.tabs.states.copy_id')]]"
-                  path="[[clipboardOutlineIcon()]]"
-                ></ha-svg-icon>
-                <a href="#" on-click="entitySelected">[[entity.entity_id]]</a>
+                <div class="id-name-container">
+                  <div class="id-name-row">
+                    <ha-svg-icon
+                      on-click="copyEntity"
+                      alt="[[localize('ui.panel.developer-tools.tabs.states.copy_id')]]"
+                      title="[[localize('ui.panel.developer-tools.tabs.states.copy_id')]]"
+                      path="[[clipboardOutlineIcon()]]"
+                    ></ha-svg-icon>
+                    <a href="#" on-click="entitySelected"
+                      >[[entity.entity_id]]</a
+                    >
+                  </div>
+                  <div class="id-name-row">
+                    <ha-svg-icon
+                      on-click="entityMoreInfo"
+                      alt="[[localize('ui.panel.developer-tools.tabs.states.more_info')]]"
+                      title="[[localize('ui.panel.developer-tools.tabs.states.more_info')]]"
+                      path="[[informationOutlineIcon()]]"
+                    ></ha-svg-icon>
+                    <span class="secondary">
+                      [[entity.attributes.friendly_name]]
+                    </span>
+                  </div>
+                </div>
               </td>
               <td>[[entity.state]]</td>
               <template
@@ -332,7 +359,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
     this._entityId = state.entity_id;
     this._entity = state;
     this._state = state.state;
-    this._stateAttributes = safeDump(state.attributes);
+    this._stateAttributes = dump(state.attributes);
     ev.preventDefault();
   }
 
@@ -349,7 +376,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
     }
     this._entity = state;
     this._state = state.state;
-    this._stateAttributes = safeDump(state.attributes);
+    this._stateAttributes = dump(state.attributes);
   }
 
   entityMoreInfo(ev) {
@@ -385,50 +412,68 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
   }
 
   computeEntities(hass, _entityFilter, _stateFilter, _attributeFilter) {
-    return Object.keys(hass.states)
-      .map(function (key) {
-        return hass.states[key];
-      })
-      .filter(function (value) {
-        if (!value.entity_id.includes(_entityFilter.toLowerCase())) {
+    const entityFilterRegExp =
+      _entityFilter &&
+      RegExp(escapeRegExp(_entityFilter).replace(/\\\*/g, ".*"), "i");
+
+    const stateFilterRegExp =
+      _stateFilter &&
+      RegExp(escapeRegExp(_stateFilter).replace(/\\\*/g, ".*"), "i");
+
+    let keyFilterRegExp;
+    let valueFilterRegExp;
+    let multiMode = false;
+
+    if (_attributeFilter) {
+      const colonIndex = _attributeFilter.indexOf(":");
+      multiMode = colonIndex !== -1;
+
+      const keyFilter = multiMode
+        ? _attributeFilter.substring(0, colonIndex).trim()
+        : _attributeFilter;
+      const valueFilter = multiMode
+        ? _attributeFilter.substring(colonIndex + 1).trim()
+        : _attributeFilter;
+
+      keyFilterRegExp = RegExp(
+        escapeRegExp(keyFilter).replace(/\\\*/g, ".*"),
+        "i"
+      );
+      valueFilterRegExp = multiMode
+        ? RegExp(escapeRegExp(valueFilter).replace(/\\\*/g, ".*"), "i")
+        : keyFilterRegExp;
+    }
+
+    return Object.values(hass.states)
+      .filter((value) => {
+        if (
+          entityFilterRegExp &&
+          !entityFilterRegExp.test(value.entity_id) &&
+          (value.attributes.friendly_name === undefined ||
+            !entityFilterRegExp.test(value.attributes.friendly_name))
+        ) {
           return false;
         }
 
-        if (!value.state.toLowerCase().includes(_stateFilter.toLowerCase())) {
+        if (stateFilterRegExp && !stateFilterRegExp.test(value.state)) {
           return false;
         }
 
-        if (_attributeFilter !== "") {
-          const attributeFilter = _attributeFilter.toLowerCase();
-          const colonIndex = attributeFilter.indexOf(":");
-          const multiMode = colonIndex !== -1;
-
-          let keyFilter = attributeFilter;
-          let valueFilter = attributeFilter;
-
-          if (multiMode) {
-            // we need to filter keys and values separately
-            keyFilter = attributeFilter.substring(0, colonIndex).trim();
-            valueFilter = attributeFilter.substring(colonIndex + 1).trim();
-          }
-
-          const attributeKeys = Object.keys(value.attributes);
-
-          for (let i = 0; i < attributeKeys.length; i++) {
-            const key = attributeKeys[i];
-
-            if (key.includes(keyFilter) && !multiMode) {
+        if (keyFilterRegExp && valueFilterRegExp) {
+          for (const [key, attributeValue] of Object.entries(
+            value.attributes
+          )) {
+            const match = keyFilterRegExp.test(key);
+            if (match && !multiMode) {
               return true; // in single mode we're already satisfied with this match
             }
-            if (!key.includes(keyFilter) && multiMode) {
+            if (!match && multiMode) {
               continue;
             }
 
-            const attributeValue = value.attributes[key];
-
             if (
               attributeValue !== undefined &&
-              JSON.stringify(attributeValue).toLowerCase().includes(valueFilter)
+              valueFilterRegExp.test(JSON.stringify(attributeValue))
             ) {
               return true;
             }
@@ -493,7 +538,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
       (Array.isArray(value) && value.some((val) => val instanceof Object)) ||
       (!Array.isArray(value) && value instanceof Object)
     ) {
-      return `\n${safeDump(value)}`;
+      return `\n${dump(value)}`;
     }
     return Array.isArray(value) ? value.join(", ") : value;
   }
@@ -508,7 +553,7 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
 
   _computeParsedStateAttributes(stateAttributes) {
     try {
-      return stateAttributes.trim() ? safeLoad(stateAttributes) : {};
+      return stateAttributes.trim() ? load(stateAttributes) : {};
     } catch (err) {
       return ERROR_SENTINEL;
     }