Use installed_version for update entities (#12194 )

Merge pull request #12193 from home-assistant/dev
20220330.0 (#12165 )
2025-08-13 03:09:26 +00:00 · 2022-04-01 19:29:26 +02:00 · 2022-04-01 18:56:12 +02:00 · 2022-03-30 20:49:00 +02:00
206 changed files with 3922 additions and 7320 deletions
--- a/build-scripts/webpack.js
+++ b/build-scripts/webpack.js
@@ -3,10 +3,10 @@ const webpack = require("webpack");
 const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
 const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
-const log = require("fancy-log");
-const WebpackBar = require("webpackbar");
 const paths = require("./paths.js");
 const bundle = require("./bundle.js");
+const log = require("fancy-log");
+const WebpackBar = require("webpackbar");

 class LogStartCompilePlugin {
  ignoredFirst = false;
@@ -138,8 +138,6 @@ const createWebpackConfig = ({
        "lit/directives/cache$": "lit/directives/cache.js",
        "lit/directives/repeat$": "lit/directives/repeat.js",
        "lit/polyfill-support$": "lit/polyfill-support.js",
-        "@lit-labs/virtualizer/layouts/grid":
-          "@lit-labs/virtualizer/layouts/grid.js",
      },
    },
    output: {
--- a/gallery/src/pages/automation/editor-condition.ts
+++ b/gallery/src/pages/automation/editor-condition.ts
@@ -8,7 +8,7 @@ import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
 import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
 import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
-import type { ConditionWithShorthand } from "../../../../src/data/automation";
+import type { Condition } from "../../../../src/data/automation";
 import "../../../../src/panels/config/automation/condition/ha-automation-condition";
 import { HaDeviceCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-device";
 import { HaLogicalCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-logical";
@@ -20,7 +20,7 @@ import { HaTimeCondition } from "../../../../src/panels/config/automation/condit
 import { HaTriggerCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-trigger";
 import { HaZoneCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-zone";

-const SCHEMAS: { name: string; conditions: ConditionWithShorthand[] }[] = [
+const SCHEMAS: { name: string; conditions: Condition[] }[] = [
  {
    name: "State",
    conditions: [{ condition: "state", ...HaStateCondition.defaultConfig }],
@@ -69,14 +69,6 @@ const SCHEMAS: { name: string; conditions: ConditionWithShorthand[] }[] = [
    name: "Trigger",
    conditions: [{ condition: "trigger", ...HaTriggerCondition.defaultConfig }],
  },
-  {
-    name: "Shorthand",
-    conditions: [
-      { and: HaLogicalCondition.defaultConfig.conditions },
-      { or: HaLogicalCondition.defaultConfig.conditions },
-      { not: HaLogicalCondition.defaultConfig.conditions },
-    ],
-  },
 ];

@customElement("demo-automation-editor-condition")
--- a/gallery/src/pages/components/ha-alert.ts
+++ b/gallery/src/pages/components/ha-alert.ts
@@ -159,19 +159,13 @@ export class DemoHaAlert extends LitElement {

  firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
+    applyThemesOnElement(this.shadowRoot!.querySelector(".dark"), {
+      default_theme: "default",
+      default_dark_theme: "default",
+      themes: {},
+      darkMode: true,
+      theme: "default",
+    });
  }

  static get styles() {
--- a/gallery/src/pages/components/ha-selector.ts
+++ b/gallery/src/pages/components/ha-selector.ts
@@ -170,7 +170,6 @@ const SCHEMAS: {
          select: { options: ["Option 1", "Option 2"], mode: "list" },
        },
      },
-      template: { name: "Template", selector: { template: {} } },
      select: {
        name: "Select",
        selector: {
@@ -262,8 +261,6 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {

  @state() private _required = false;

-  @state() private _helper = false;
-
  @state() private _label = true;

  private data = SCHEMAS.map(() => ({}));
@@ -421,13 +418,6 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
            @change=${this._handleOptionChange}
          ></ha-switch>
        </ha-formfield>
-        <ha-formfield label="Helper text">
-          <ha-switch
-            .name=${"helper"}
-            .checked=${this._helper}
-            @change=${this._handleOptionChange}
-          ></ha-switch>
-        </ha-formfield>
      </div>
      ${SCHEMAS.map((info, idx) => {
        const data = this.data[idx];
@@ -456,7 +446,6 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
                        .disabled=${this._disabled}
                        .required=${this._required}
                        @value-changed=${valueChanged}
-                        .helper=${this._helper ? "Helper text" : undefined}
                      ></ha-selector>
                    </ha-settings-row>
                  `
@@ -477,8 +466,7 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
      width: 60;
    }
    .options {
-      max-width: 800px;
-      margin: 16px auto;
+      padding: 16px 48px;
    }
    .options ha-formfield {
      margin-right: 16px;
--- a/gallery/src/pages/components/ha-tip.markdown
+++ b/gallery/src/pages/components/ha-tip.markdown
@@ -1,3 +0,0 @@
---
-title: Tips
---
--- a/gallery/src/pages/components/ha-tip.ts
+++ b/gallery/src/pages/components/ha-tip.ts
@@ -1,73 +0,0 @@
-import { html, css, LitElement, TemplateResult } from "lit";
-import { customElement } from "lit/decorators";
-import "../../../../src/components/ha-tip";
-import "../../../../src/components/ha-card";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
-
-const tips: (string | TemplateResult)[] = [
-  "Test tip",
-  "Bigger test tip, with some random text just to fill up as much space as possible without it looking like I'm really trying to to that",
-  html`<i>Tip</i> <b>with</b> <sub>HTML</sub>`,
-];
-
-@customElement("demo-components-ha-tip")
-export class DemoHaTip extends LitElement {
-  protected render(): TemplateResult {
-    return html` ${["light", "dark"].map(
-      (mode) => html`
-        <div class=${mode}>
-          <ha-card header="ha-tip ${mode} demo">
-            <div class="card-content">
-              ${tips.map((tip) => html`<ha-tip>${tip}</ha-tip>`)}
-            </div>
-          </ha-card>
-        </div>
-      `
-    )}`;
-  }
-
-  firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-      }
-      .dark,
-      .light {
-        display: block;
-        background-color: var(--primary-background-color);
-        padding: 0 50px;
-      }
-      ha-tip {
-        margin-bottom: 14px;
-      }
-      ha-card {
-        margin: 24px auto;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-tip": DemoHaTip;
-  }
-}
--- a/gallery/src/pages/more-info/update.ts
+++ b/gallery/src/pages/more-info/update.ts
@@ -133,12 +133,6 @@ const ENTITIES = [
    friendly_name: "Update with auto update",
    auto_update: true,
  }),
-  getEntity("update", "update20", "on", {
-    ...base_attributes,
-    in_progress: true,
-    title: undefined,
-    friendly_name: "Installing without title",
-  }),
 ];

@customElement("demo-more-info-update")
--- a/hassio/src/addon-view/config/hassio-addon-config.ts
+++ b/hassio/src/addon-view/config/hassio-addon-config.ts
@@ -39,14 +39,7 @@ import type { HomeAssistant } from "../../../../src/types";
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
 import { hassioStyle } from "../../resources/hassio-style";

-const SUPPORTED_UI_TYPES = [
-  "string",
-  "select",
-  "boolean",
-  "integer",
-  "float",
-  "schema",
-];
+const SUPPORTED_UI_TYPES = ["string", "select", "boolean", "integer", "float"];

 const ADDON_YAML_SCHEMA = DEFAULT_SCHEMA.extend([
  new Type("!secret", {
@@ -55,8 +48,6 @@ const ADDON_YAML_SCHEMA = DEFAULT_SCHEMA.extend([
  }),
 ]);

-const MASKED_FIELDS = ["password", "secret", "token"];
-
@customElement("hassio-addon-config")
 class HassioAddonConfig extends LitElement {
  @property({ attribute: false }) public addon!: HassioAddonDetails;
@@ -84,66 +75,19 @@ class HassioAddonConfig extends LitElement {
  public computeLabel = (entry: HaFormSchema): string =>
    this.addon.translations[this.hass.language]?.configuration?.[entry.name]
      ?.name ||
-    this.addon.translations.en?.configuration?.[entry.name]?.name ||
+    this.addon.translations.en?.configuration?.[entry.name].name ||
    entry.name;

-  public computeHelper = (entry: HaFormSchema): string =>
-    this.addon.translations[this.hass.language]?.configuration?.[entry.name]
-      ?.description ||
-    this.addon.translations.en?.configuration?.[entry.name]?.description ||
-    "";
-
-  private _convertSchema = memoizeOne(
-    // Convert supervisor schema to selectors
-    (schema: Record<string, any>): HaFormSchema[] =>
-      schema.map((entry) =>
-        entry.type === "select"
-          ? {
-              name: entry.name,
-              required: entry.required,
-              selector: { select: { options: entry.options } },
-            }
-          : entry.type === "string"
-          ? entry.multiple
-            ? {
-                name: entry.name,
-                required: entry.required,
-                selector: {
-                  select: { options: [], multiple: true, custom_value: true },
-                },
-              }
-            : {
-                name: entry.name,
-                required: entry.required,
-                selector: {
-                  text: {
-                    type:
-                      entry.format || MASKED_FIELDS.includes(entry.name)
-                        ? "password"
-                        : "text",
-                  },
-                },
-              }
-          : entry.type === "boolean"
-          ? {
-              name: entry.name,
-              required: entry.required,
-              selector: { boolean: {} },
-            }
-          : entry.type === "schema"
-          ? {
-              name: entry.name,
-              required: entry.required,
-              selector: { object: {} },
-            }
-          : entry.type === "float" || entry.type === "integer"
-          ? {
-              name: entry.name,
-              required: entry.required,
-              selector: { number: { mode: "box" } },
-            }
-          : entry
-      )
+  private _schema = memoizeOne((schema: HaFormSchema[]): HaFormSchema[] =>
+    // @ts-expect-error supervisor does not implement [string, string] for select.options[]
+    schema.map((entry) =>
+      entry.type === "select"
+        ? {
+            ...entry,
+            options: entry.options.map((option) => [option, option]),
+          }
+        : entry
+    )
  );

  private _filteredShchema = memoizeOne(
@@ -196,8 +140,7 @@ class HassioAddonConfig extends LitElement {
                .data=${this._options!}
                @value-changed=${this._configChanged}
                .computeLabel=${this.computeLabel}
-                .computeHelper=${this.computeHelper}
-                .schema=${this._convertSchema(
+                .schema=${this._schema(
                  this._showOptional
                    ? this.addon.schema!
                    : this._filteredShchema(
@@ -254,9 +197,8 @@ class HassioAddonConfig extends LitElement {
  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    this._canShowSchema = !this.addon.schema!.find(
-      (entry) =>
-        // @ts-ignore
-        !SUPPORTED_UI_TYPES.includes(entry.type)
+      // @ts-ignore
+      (entry) => !SUPPORTED_UI_TYPES.includes(entry.type) || entry.multiple
    );
    this._yamlMode = !this._canShowSchema;
  }
--- a/hassio/src/addon-view/config/hassio-addon-network.ts
+++ b/hassio/src/addon-view/config/hassio-addon-network.ts
@@ -1,3 +1,4 @@
+import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
  css,
  CSSResultGroup,
@@ -7,13 +8,10 @@ import {
  TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-form/ha-form";
-import type { HaFormSchema } from "../../../../src/components/ha-form/types";
 import {
  HassioAddonDetails,
  HassioAddonSetOptionParams,
@@ -26,6 +24,16 @@ import { HomeAssistant } from "../../../../src/types";
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
 import { hassioStyle } from "../../resources/hassio-style";

+interface NetworkItem {
+  description: string;
+  container: string;
+  host: number | null;
+}
+
+interface NetworkItemInput extends PaperInputElement {
+  container: string;
+}
+
@customElement("hassio-addon-network")
 class HassioAddonNetwork extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
@@ -34,13 +42,9 @@ class HassioAddonNetwork extends LitElement {

  @property({ attribute: false }) public addon!: HassioAddonDetails;

-  @state() private _showOptional = false;
-
-  @state() private _configHasChanged = false;
-
  @state() private _error?: string;

-  @state() private _config?: Record<string, any>;
+  @state() private _config?: NetworkItem[];

  public connectedCallback(): void {
    super.connectedCallback();
@@ -52,10 +56,6 @@ class HassioAddonNetwork extends LitElement {
      return html``;
    }

-    const hasHiddenOptions = Object.keys(this._config).find(
-      (entry) => this._config![entry] === null
-    );
-
    return html`
      <ha-card
        .header=${this.supervisor.localize(
@@ -63,49 +63,52 @@ class HassioAddonNetwork extends LitElement {
        )}
      >
        <div class="card-content">
-          <p>
-            ${this.supervisor.localize(
-              "addon.configuration.network.introduction"
-            )}
-          </p>
          ${this._error
            ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
            : ""}

-          <ha-form
-            .data=${this._config}
-            @value-changed=${this._configChanged}
-            .computeLabel=${this._computeLabel}
-            .computeHelper=${this._computeHelper}
-            .schema=${this._createSchema(
-              this._config,
-              this._showOptional,
-              this.hass.userData?.showAdvanced || false
-            )}
-          ></ha-form>
-        </div>
-        ${hasHiddenOptions
-          ? html`<ha-formfield
-              class="show-optional"
-              .label=${this.supervisor.localize(
-                "addon.configuration.network.show_disabled"
+          <table>
+            <tbody>
+              <tr>
+                <th>
+                  ${this.supervisor.localize(
+                    "addon.configuration.network.container"
+                  )}
+                </th>
+                <th>
+                  ${this.supervisor.localize(
+                    "addon.configuration.network.host"
+                  )}
+                </th>
+                <th>${this.supervisor.localize("common.description")}</th>
+              </tr>
+              ${this._config!.map(
+                (item) => html`
+                  <tr>
+                    <td>${item.container}</td>
+                    <td>
+                      <paper-input
+                        @value-changed=${this._configChanged}
+                        placeholder=${this.supervisor.localize(
+                          "addon.configuration.network.disabled"
+                        )}
+                        .value=${item.host ? String(item.host) : ""}
+                        .container=${item.container}
+                        no-label-float
+                      ></paper-input>
+                    </td>
+                    <td>${this._computeDescription(item)}</td>
+                  </tr>
+                `
              )}
-            >
-              <ha-switch
-                @change=${this._toggleOptional}
-                .checked=${this._showOptional}
-              >
-              </ha-switch>
-            </ha-formfield>`
-          : ""}
+            </tbody>
+          </table>
+        </div>
        <div class="card-actions">
          <ha-progress-button class="warning" @click=${this._resetTapped}>
            ${this.supervisor.localize("common.reset_defaults")}
          </ha-progress-button>
-          <ha-progress-button
-            @click=${this._saveTapped}
-            .disabled=${!this._configHasChanged}
-          >
+          <ha-progress-button @click=${this._saveTapped}>
            ${this.supervisor.localize("common.save")}
          </ha-progress-button>
        </div>
@@ -120,60 +123,50 @@ class HassioAddonNetwork extends LitElement {
    }
  }

-  private _createSchema = memoizeOne(
-    (
-      config: Record<string, number>,
-      showOptional: boolean,
-      advanced: boolean
-    ): HaFormSchema[] =>
-      (showOptional
-        ? Object.keys(config)
-        : Object.keys(config).filter((entry) => config[entry] !== null)
-      ).map((entry) => ({
-        name: entry,
-        selector: {
-          number: {
-            mode: "box",
-            min: 0,
-            max: 65535,
-            unit_of_measurement: advanced ? entry : undefined,
-          },
-        },
-      }))
-  );
-
-  private _computeLabel = (_: HaFormSchema): string => "";
-
-  private _computeHelper = (item: HaFormSchema): string =>
-    this.addon.translations[this.hass.language]?.network?.[item.name] ||
-    this.addon.translations.en?.network?.[item.name] ||
-    this.addon.network_description?.[item.name] ||
-    item.name;
+  private _computeDescription = (item: NetworkItem): string =>
+    this.addon.translations[this.hass.language]?.network?.[item.container]
+      ?.description ||
+    this.addon.translations.en?.network?.[item.container]?.description ||
+    item.description;

  private _setNetworkConfig(): void {
-    this._config = this.addon.network || {};
+    const network = this.addon.network || {};
+    const description = this.addon.network_description || {};
+    const items: NetworkItem[] = Object.keys(network).map((key) => ({
+      container: key,
+      host: network[key],
+      description: description[key],
+    }));
+    this._config = items.sort((a, b) => (a.container > b.container ? 1 : -1));
  }

-  private async _configChanged(ev: CustomEvent): Promise<void> {
-    this._configHasChanged = true;
-    this._config! = ev.detail.value;
+  private async _configChanged(ev: Event): Promise<void> {
+    const target = ev.target as NetworkItemInput;
+    this._config!.forEach((item) => {
+      if (
+        item.container === target.container &&
+        item.host !== parseInt(String(target.value), 10)
+      ) {
+        item.host = target.value ? parseInt(String(target.value), 10) : null;
+      }
+    });
  }

  private async _resetTapped(ev: CustomEvent): Promise<void> {
    const button = ev.currentTarget as any;
+    button.progress = true;
+
    const data: HassioAddonSetOptionParams = {
      network: null,
    };

    try {
      await setHassioAddonOption(this.hass, this.addon.slug, data);
-      this._configHasChanged = false;
      const eventdata = {
        success: true,
        response: undefined,
        path: "option",
      };
-      button.actionSuccess();
      fireEvent(this, "hass-api-called", eventdata);
      if (this.addon?.state === "started") {
        await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
@@ -184,21 +177,19 @@ class HassioAddonNetwork extends LitElement {
        "error",
        extractApiErrorMessage(err)
      );
-      button.actionError();
    }
-  }

-  private _toggleOptional() {
-    this._showOptional = !this._showOptional;
+    button.progress = false;
  }

  private async _saveTapped(ev: CustomEvent): Promise<void> {
    const button = ev.currentTarget as any;
+    button.progress = true;

    this._error = undefined;
    const networkconfiguration = {};
-    Object.entries(this._config!).forEach(([key, value]) => {
-      networkconfiguration[key] = value ?? null;
+    this._config!.forEach((item) => {
+      networkconfiguration[item.container] = parseInt(String(item.host), 10);
    });

    const data: HassioAddonSetOptionParams = {
@@ -207,13 +198,11 @@ class HassioAddonNetwork extends LitElement {

    try {
      await setHassioAddonOption(this.hass, this.addon.slug, data);
-      this._configHasChanged = false;
      const eventdata = {
        success: true,
        response: undefined,
        path: "option",
      };
-      button.actionSuccess();
      fireEvent(this, "hass-api-called", eventdata);
      if (this.addon?.state === "started") {
        await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
@@ -224,8 +213,8 @@ class HassioAddonNetwork extends LitElement {
        "error",
        extractApiErrorMessage(err)
      );
-      button.actionError();
    }
+    button.progress = false;
  }

  static get styles(): CSSResultGroup {
@@ -243,9 +232,6 @@ class HassioAddonNetwork extends LitElement {
          display: flex;
          justify-content: space-between;
        }
-        .show-optional {
-          padding: 16px;
-        }
      `,
    ];
  }
--- a/hassio/src/addon-view/log/hassio-addon-logs.ts
+++ b/hassio/src/addon-view/log/hassio-addon-logs.ts
@@ -2,7 +2,6 @@ import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-alert";
-import "../../../../src/components/ha-ansi-to-html";
 import "../../../../src/components/ha-card";
 import {
  fetchHassioAddonLogs,
@@ -12,6 +11,7 @@ import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
+import "../../components/hassio-ansi-to-html";
 import { hassioStyle } from "../../resources/hassio-style";

@customElement("hassio-addon-logs")
@@ -40,9 +40,9 @@ class HassioAddonLogs extends LitElement {
          : ""}
        <div class="card-content">
          ${this._content
-            ? html`<ha-ansi-to-html
+            ? html`<hassio-ansi-to-html
                .content=${this._content}
-              ></ha-ansi-to-html>`
+              ></hassio-ansi-to-html>`
            : ""}
        </div>
        <div class="card-actions">
--- a/hassio/src/backups/hassio-backups.ts
+++ b/hassio/src/backups/hassio-backups.ts
@@ -1,7 +1,7 @@
 import "@material/mwc-button";
 import { ActionDetail } from "@material/mwc-list";
 import "@material/mwc-list/mwc-list-item";
-import { mdiBackupRestore, mdiDelete, mdiDotsVertical, mdiPlus } from "@mdi/js";
+import { mdiDelete, mdiDotsVertical, mdiPlus } from "@mdi/js";
 import {
  css,
  CSSResultGroup,
@@ -166,15 +166,7 @@ export class HassioBackups extends LitElement {
    }
    return html`
      <hass-tabs-subpage-data-table
-        .tabs=${atLeastVersion(this.hass.config.version, 2022, 5)
-          ? [
-              {
-                translationKey: "panel.backups",
-                path: `/hassio/backups`,
-                iconPath: mdiBackupRestore,
-              },
-            ]
-          : supervisorTabs(this.hass)}
+        .tabs=${supervisorTabs(this.hass)}
        .hass=${this.hass}
        .localizeFunc=${this.supervisor.localize}
        .searchLabel=${this.supervisor.localize("search")}
@@ -190,9 +182,7 @@ export class HassioBackups extends LitElement {
        selectable
        hasFab
        .mainPage=${!atLeastVersion(this.hass.config.version, 2021, 12)}
-        back-path=${atLeastVersion(this.hass.config.version, 2022, 5)
-          ? "/config/system"
-          : "/config"}
+        back-path="/config"
        supervisor
      >
        <ha-button-menu
--- a/hassio/src/components/hassio-ansi-to-html.ts
+++ b/hassio/src/components/hassio-ansi-to-html.ts
@@ -10,8 +10,8 @@ interface State {
  backgroundColor: null | string;
 }

-@customElement("ha-ansi-to-html")
-class HaAnsiToHtml extends LitElement {
+@customElement("hassio-ansi-to-html")
+class HassioAnsiToHtml extends LitElement {
  @property() public content!: string;

  protected render(): TemplateResult | void {
@@ -241,6 +241,6 @@ class HaAnsiToHtml extends LitElement {

 declare global {
  interface HTMLElementTagNameMap {
-    "ha-ansi-to-html": HaAnsiToHtml;
+    "hassio-ansi-to-html": HassioAnsiToHtml;
  }
 }
--- a/hassio/src/components/supervisor-backup-content.ts
+++ b/hassio/src/components/supervisor-backup-content.ts
@@ -180,7 +180,7 @@ export class SupervisorBackupContent extends LitElement {
            >
              <ha-checkbox
                .checked=${this.homeAssistant}
-                @change=${this.toggleHomeAssistant}
+                @click=${this.toggleHomeAssistant}
              >
              </ha-checkbox>
            </ha-formfield>
--- a/hassio/src/dashboard/hassio-dashboard.ts
+++ b/hassio/src/dashboard/hassio-dashboard.ts
@@ -10,7 +10,6 @@ import { HomeAssistant, Route } from "../../../src/types";
 import { supervisorTabs } from "../hassio-tabs";
 import "./hassio-addons";
 import "./hassio-update";
-import "../../../src/layouts/hass-subpage";

@customElement("hassio-dashboard")
 class HassioDashboard extends LitElement {
@@ -23,31 +22,6 @@ class HassioDashboard extends LitElement {
  @property({ attribute: false }) public route!: Route;

  protected render(): TemplateResult {
-    if (atLeastVersion(this.hass.config.version, 2022, 5)) {
-      return html`<hass-subpage
-        .hass=${this.hass}
-        .narrow=${this.narrow}
-        .route=${this.route}
-        .header=${this.supervisor.localize("panel.addons")}
-      >
-        <hassio-addons
-          .hass=${this.hass}
-          .supervisor=${this.supervisor}
-        ></hassio-addons>
-        <a href="/hassio/store">
-          <ha-fab
-            .label=${this.supervisor.localize("panel.store")}
-            extended
-            class="non-tabs"
-          >
-            <ha-svg-icon
-              slot="icon"
-              .path=${mdiStorePlus}
-            ></ha-svg-icon> </ha-fab
-        ></a>
-      </hass-subpage>`;
-    }
-
    return html`
      <hass-tabs-subpage
        .hass=${this.hass}
@@ -100,12 +74,6 @@ class HassioDashboard extends LitElement {
        .content {
          margin: 0 auto;
        }
-        ha-fab.non-tabs {
-          position: fixed;
-          right: calc(16px + env(safe-area-inset-right));
-          bottom: calc(16px + env(safe-area-inset-bottom));
-          z-index: 1;
-        }
      `,
    ];
  }
--- a/hassio/src/hassio-main.ts
+++ b/hassio/src/hassio-main.ts
@@ -3,8 +3,8 @@ import { customElement, property } from "lit/decorators";
 import { atLeastVersion } from "../../src/common/config/version";
 import { applyThemesOnElement } from "../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../src/common/dom/fire_event";
-import { mainWindow } from "../../src/common/dom/get_main_window";
 import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
+import { mainWindow } from "../../src/common/dom/get_main_window";
 import { navigate } from "../../src/common/navigate";
 import { HassioPanelInfo } from "../../src/data/hassio/supervisor";
 import { Supervisor } from "../../src/data/supervisor/supervisor";
@@ -73,14 +73,6 @@ export class HassioMain extends SupervisorBaseElement {
      });
    });

-    // Forward keydown events to the main window for quickbar access
-    document.body.addEventListener("keydown", (ev) => {
-      // @ts-ignore
-      fireEvent(mainWindow, "hass-quick-bar-trigger", ev, {
-        bubbles: false,
-      });
-    });
-
    makeDialogManager(this, this.shadowRoot!);
  }

--- a/hassio/src/hassio-my-redirect.ts
+++ b/hassio/src/hassio-my-redirect.ts
@@ -15,7 +15,7 @@ import {
 } from "../../src/panels/my/ha-panel-my";
 import { HomeAssistant, Route } from "../../src/types";

-export const REDIRECTS: Redirects = {
+const REDIRECTS: Redirects = {
  supervisor: {
    redirect: "/hassio/dashboard",
  },
--- a/hassio/src/hassio-tabs.ts
+++ b/hassio/src/hassio-tabs.ts
@@ -8,27 +8,24 @@ import { atLeastVersion } from "../../src/common/config/version";
 import type { PageNavigation } from "../../src/layouts/hass-tabs-subpage";
 import { HomeAssistant } from "../../src/types";

-export const supervisorTabs = (hass: HomeAssistant): PageNavigation[] =>
-  atLeastVersion(hass.config.version, 2022, 5)
-    ? []
-    : [
-        {
-          translationKey: atLeastVersion(hass.config.version, 2021, 12)
-            ? "panel.addons"
-            : "panel.dashboard",
-          path: `/hassio/dashboard`,
-          iconPath: atLeastVersion(hass.config.version, 2021, 12)
-            ? mdiPuzzle
-            : mdiViewDashboard,
-        },
-        {
-          translationKey: "panel.backups",
-          path: `/hassio/backups`,
-          iconPath: mdiBackupRestore,
-        },
-        {
-          translationKey: "panel.system",
-          path: `/hassio/system`,
-          iconPath: mdiCogs,
-        },
-      ];
+export const supervisorTabs = (hass: HomeAssistant): PageNavigation[] => [
+  {
+    translationKey: atLeastVersion(hass.config.version, 2021, 12)
+      ? "panel.addons"
+      : "panel.dashboard",
+    path: `/hassio/dashboard`,
+    iconPath: atLeastVersion(hass.config.version, 2021, 12)
+      ? mdiPuzzle
+      : mdiViewDashboard,
+  },
+  {
+    translationKey: "panel.backups",
+    path: `/hassio/backups`,
+    iconPath: mdiBackupRestore,
+  },
+  {
+    translationKey: "panel.system",
+    path: `/hassio/system`,
+    iconPath: mdiCogs,
+  },
+];
--- a/hassio/src/system/hassio-supervisor-info.ts
+++ b/hassio/src/system/hassio-supervisor-info.ts
@@ -23,10 +23,6 @@ import {
  showAlertDialog,
  showConfirmationDialog,
 } from "../../../src/dialogs/generic/show-dialog-box";
-import {
-  UNHEALTHY_REASON_URL,
-  UNSUPPORTED_REASON_URL,
-} from "../../../src/panels/config/system-health/ha-config-system-health";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
 import { bytesToString } from "../../../src/util/bytes-to-string";
@@ -34,6 +30,11 @@ import { documentationUrl } from "../../../src/util/documentation-url";
 import "../components/supervisor-metric";
 import { hassioStyle } from "../resources/hassio-style";

+const UNSUPPORTED_REASON_URL = {};
+const UNHEALTHY_REASON_URL = {
+  privileged: "/more-info/unsupported/privileged",
+};
+
@customElement("hassio-supervisor-info")
 class HassioSupervisorInfo extends LitElement {
  @property({ attribute: false }) public hass!: HomeAssistant;
--- a/hassio/src/system/hassio-supervisor-log.ts
+++ b/hassio/src/system/hassio-supervisor-log.ts
@@ -1,4 +1,3 @@
-import "../../../src/components/ha-ansi-to-html";
 import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -12,6 +11,7 @@ import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import "../../../src/layouts/hass-loading-screen";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
+import "../components/hassio-ansi-to-html";
 import { hassioStyle } from "../resources/hassio-style";

 interface LogProvider {
@@ -89,8 +89,8 @@ class HassioSupervisorLog extends LitElement {

        <div class="card-content" id="content">
          ${this._content
-            ? html`<ha-ansi-to-html .content=${this._content}>
-              </ha-ansi-to-html>`
+            ? html`<hassio-ansi-to-html .content=${this._content}>
+              </hassio-ansi-to-html>`
            : html`<hass-loading-screen no-toolbar></hass-loading-screen>`}
        </div>
        <div class="card-actions">
--- a/package.json
+++ b/package.json
@@ -106,10 +106,9 @@
    "deep-clone-simple": "^1.1.1",
    "deep-freeze": "^0.0.1",
    "fuse.js": "^6.0.0",
-    "fuzzysort": "^1.2.1",
    "google-timezones-json": "^1.0.2",
    "hls.js": "^1.1.5",
-    "home-assistant-js-websocket": "^7.0.3",
+    "home-assistant-js-websocket": "^7.0.1",
    "idb-keyval": "^5.1.3",
    "intl-messageformat": "^9.9.1",
    "js-yaml": "^4.1.0",
--- a/script/core
+++ b/script/core
@@ -15,7 +15,7 @@ if [ -z $(which hass) ]; then
  echo "Installing Home Asstant core from dev."
  python3 -m pip install --upgrade \
    colorlog \
-    git+https://github.com/home-assistant/home-assistant.git@dev
+    git+git://github.com/home-assistant/home-assistant.git@dev
 fi

 if [ ! -d "${WD}/config" ]; then
--- a/setup.cfg
+++ b/setup.cfg
@@ -1,6 +1,6 @@
 [metadata]
 name         = home-assistant-frontend
-version      = 20220427.0
+version      = 20220401.0
 author       = The Home Assistant Authors
 author_email = hello@home-assistant.io
 license      = Apache-2.0
--- a/src/common/datetime/duration.ts
+++ b/src/common/datetime/duration.ts
@@ -1,16 +0,0 @@
-import secondsToDuration from "./seconds_to_duration";
-
-const DAY_IN_SECONDS = 86400;
-const HOUR_IN_SECONDS = 3600;
-const MINUTE_IN_SECONDS = 60;
-
-export const UNIT_TO_SECOND_CONVERT = {
-  s: 1,
-  min: MINUTE_IN_SECONDS,
-  h: HOUR_IN_SECONDS,
-  d: DAY_IN_SECONDS,
-};
-
-export const formatDuration = (duration: string, units: string): string =>
-  secondsToDuration(parseFloat(duration) * UNIT_TO_SECOND_CONVERT[units]) ||
-  "0";
--- a/src/common/dom/is-navigation-click.ts
+++ b/src/common/dom/is-navigation-click.ts
@@ -12,7 +12,7 @@ export const isNavigationClick = (e: MouseEvent) => {

  const anchor = e
    .composedPath()
-    .find((n) => (n as HTMLElement).tagName === "A") as
+    .filter((n) => (n as HTMLElement).tagName === "A")[0] as
    | HTMLAnchorElement
    | undefined;
  if (
--- a/src/common/entity/binary_sensor_icon.ts
+++ b/src/common/entity/binary_sensor_icon.ts
@@ -29,11 +29,8 @@ import {
  mdiPowerPlug,
  mdiPowerPlugOff,
  mdiRadioboxBlank,
+  mdiSmoke,
  mdiSnowflake,
-  mdiSmokeDetector,
-  mdiSmokeDetectorAlert,
-  mdiSmokeDetectorVariant,
-  mdiSmokeDetectorVariantAlert,
  mdiSquare,
  mdiSquareOutline,
  mdiStop,
@@ -55,8 +52,6 @@ export const binarySensorIcon = (state?: string, stateObj?: HassEntity) => {
      return is_off ? mdiBattery : mdiBatteryOutline;
    case "battery_charging":
      return is_off ? mdiBattery : mdiBatteryCharging;
-    case "carbon_monoxide":
-      return is_off ? mdiSmokeDetector : mdiSmokeDetectorAlert;
    case "cold":
      return is_off ? mdiThermometer : mdiSnowflake;
    case "connectivity":
@@ -73,7 +68,7 @@ export const binarySensorIcon = (state?: string, stateObj?: HassEntity) => {
    case "tamper":
      return is_off ? mdiCheckCircle : mdiAlertCircle;
    case "smoke":
-      return is_off ? mdiSmokeDetectorVariant : mdiSmokeDetectorVariantAlert;
+      return is_off ? mdiCheckCircle : mdiSmoke;
    case "heat":
      return is_off ? mdiThermometer : mdiFire;
    case "light":
--- a/src/common/entity/compute_state_display.ts
+++ b/src/common/entity/compute_state_display.ts
@@ -13,7 +13,6 @@ import { formatNumber, isNumericState } from "../number/format_number";
 import { LocalizeFunc } from "../translations/localize";
 import { computeStateDomain } from "./compute_state_domain";
 import { supportsFeature } from "./supports-feature";
-import { formatDuration, UNIT_TO_SECOND_CONVERT } from "../datetime/duration";

 export const computeStateDisplay = (
  localize: LocalizeFunc,
@@ -29,27 +28,11 @@ export const computeStateDisplay = (

  // Entities with a `unit_of_measurement` or `state_class` are numeric values and should use `formatNumber`
  if (isNumericState(stateObj)) {
-    // state is duration
-    if (
-      stateObj.attributes.device_class === "duration" &&
-      stateObj.attributes.unit_of_measurement &&
-      UNIT_TO_SECOND_CONVERT[stateObj.attributes.unit_of_measurement]
-    ) {
-      try {
-        return formatDuration(
-          compareState,
-          stateObj.attributes.unit_of_measurement
-        );
-      } catch (_err) {
-        // fallback to default
-      }
-    }
    if (stateObj.attributes.device_class === "monetary") {
      try {
        return formatNumber(compareState, locale, {
          style: "currency",
          currency: stateObj.attributes.unit_of_measurement,
-          minimumFractionDigits: 2,
        });
      } catch (_err) {
        // fallback to default
--- a/src/common/entity/domain_icon.ts
+++ b/src/common/entity/domain_icon.ts
@@ -8,25 +8,26 @@ import {
  mdiCalendar,
  mdiCast,
  mdiCastConnected,
-  mdiCheckCircleOutline,
  mdiClock,
-  mdiCloseCircleOutline,
  mdiGestureTapButton,
  mdiLanConnect,
  mdiLanDisconnect,
+  mdiLightSwitch,
  mdiLock,
  mdiLockAlert,
  mdiLockClock,
  mdiLockOpen,
-  mdiPackage,
-  mdiPackageDown,
  mdiPackageUp,
  mdiPowerPlug,
  mdiPowerPlugOff,
  mdiRestart,
-  mdiToggleSwitchVariant,
-  mdiToggleSwitchVariantOff,
+  mdiToggleSwitch,
+  mdiToggleSwitchOff,
+  mdiCheckCircleOutline,
+  mdiCloseCircleOutline,
  mdiWeatherNight,
+  mdiPackage,
+  mdiPackageDown,
 } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 import { updateIsInstalling, UpdateEntity } from "../../data/update";
@@ -108,11 +109,9 @@ export const domainIcon = (
        case "outlet":
          return compareState === "on" ? mdiPowerPlug : mdiPowerPlugOff;
        case "switch":
-          return compareState === "on"
-            ? mdiToggleSwitchVariant
-            : mdiToggleSwitchVariantOff;
+          return compareState === "on" ? mdiToggleSwitch : mdiToggleSwitchOff;
        default:
-          return mdiToggleSwitchVariant;
+          return mdiLightSwitch;
      }

    case "sensor": {
--- a/src/common/string/filter/char-code.ts
+++ b/src/common/string/filter/char-code.ts
@@ -0,0 +1,244 @@
+// MIT License
+
+// Copyright (c) 2015 - present Microsoft Corporation
+
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+// Names from https://blog.codinghorror.com/ascii-pronunciation-rules-for-programmers/
+
+/**
+ * An inlined enum containing useful character codes (to be used with String.charCodeAt).
+ * Please leave the const keyword such that it gets inlined when compiled to JavaScript!
+ */
+export enum CharCode {
+  Null = 0,
+  /**
+   * The `\b` character.
+   */
+  Backspace = 8,
+  /**
+   * The `\t` character.
+   */
+  Tab = 9,
+  /**
+   * The `\n` character.
+   */
+  LineFeed = 10,
+  /**
+   * The `\r` character.
+   */
+  CarriageReturn = 13,
+  Space = 32,
+  /**
+   * The `!` character.
+   */
+  ExclamationMark = 33,
+  /**
+   * The `"` character.
+   */
+  DoubleQuote = 34,
+  /**
+   * The `#` character.
+   */
+  Hash = 35,
+  /**
+   * The `$` character.
+   */
+  DollarSign = 36,
+  /**
+   * The `%` character.
+   */
+  PercentSign = 37,
+  /**
+   * The `&` character.
+   */
+  Ampersand = 38,
+  /**
+   * The `'` character.
+   */
+  SingleQuote = 39,
+  /**
+   * The `(` character.
+   */
+  OpenParen = 40,
+  /**
+   * The `)` character.
+   */
+  CloseParen = 41,
+  /**
+   * The `*` character.
+   */
+  Asterisk = 42,
+  /**
+   * The `+` character.
+   */
+  Plus = 43,
+  /**
+   * The `,` character.
+   */
+  Comma = 44,
+  /**
+   * The `-` character.
+   */
+  Dash = 45,
+  /**
+   * The `.` character.
+   */
+  Period = 46,
+  /**
+   * The `/` character.
+   */
+  Slash = 47,
+
+  Digit0 = 48,
+  Digit1 = 49,
+  Digit2 = 50,
+  Digit3 = 51,
+  Digit4 = 52,
+  Digit5 = 53,
+  Digit6 = 54,
+  Digit7 = 55,
+  Digit8 = 56,
+  Digit9 = 57,
+
+  /**
+   * The `:` character.
+   */
+  Colon = 58,
+  /**
+   * The `;` character.
+   */
+  Semicolon = 59,
+  /**
+   * The `<` character.
+   */
+  LessThan = 60,
+  /**
+   * The `=` character.
+   */
+  Equals = 61,
+  /**
+   * The `>` character.
+   */
+  GreaterThan = 62,
+  /**
+   * The `?` character.
+   */
+  QuestionMark = 63,
+  /**
+   * The `@` character.
+   */
+  AtSign = 64,
+
+  A = 65,
+  B = 66,
+  C = 67,
+  D = 68,
+  E = 69,
+  F = 70,
+  G = 71,
+  H = 72,
+  I = 73,
+  J = 74,
+  K = 75,
+  L = 76,
+  M = 77,
+  N = 78,
+  O = 79,
+  P = 80,
+  Q = 81,
+  R = 82,
+  S = 83,
+  T = 84,
+  U = 85,
+  V = 86,
+  W = 87,
+  X = 88,
+  Y = 89,
+  Z = 90,
+
+  /**
+   * The `[` character.
+   */
+  OpenSquareBracket = 91,
+  /**
+   * The `\` character.
+   */
+  Backslash = 92,
+  /**
+   * The `]` character.
+   */
+  CloseSquareBracket = 93,
+  /**
+   * The `^` character.
+   */
+  Caret = 94,
+  /**
+   * The `_` character.
+   */
+  Underline = 95,
+  /**
+   * The ``(`)`` character.
+   */
+  BackTick = 96,
+
+  a = 97,
+  b = 98,
+  c = 99,
+  d = 100,
+  e = 101,
+  f = 102,
+  g = 103,
+  h = 104,
+  i = 105,
+  j = 106,
+  k = 107,
+  l = 108,
+  m = 109,
+  n = 110,
+  o = 111,
+  p = 112,
+  q = 113,
+  r = 114,
+  s = 115,
+  t = 116,
+  u = 117,
+  v = 118,
+  w = 119,
+  x = 120,
+  y = 121,
+  z = 122,
+
+  /**
+   * The `{` character.
+   */
+  OpenCurlyBrace = 123,
+  /**
+   * The `|` character.
+   */
+  Pipe = 124,
+  /**
+   * The `}` character.
+   */
+  CloseCurlyBrace = 125,
+  /**
+   * The `~` character.
+   */
+  Tilde = 126,
+}
--- a/src/common/string/filter/filter.ts
+++ b/src/common/string/filter/filter.ts
@@ -0,0 +1,551 @@
+/* eslint-disable no-console */
+// MIT License
+
+// Copyright (c) 2015 - present Microsoft Corporation
+
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+import { CharCode } from "./char-code";
+
+const _debug = false;
+
+export interface Match {
+  start: number;
+  end: number;
+}
+
+const _maxLen = 128;
+
+function initTable() {
+  const table: number[][] = [];
+  const row: number[] = [];
+  for (let i = 0; i <= _maxLen; i++) {
+    row[i] = 0;
+  }
+  for (let i = 0; i <= _maxLen; i++) {
+    table.push(row.slice(0));
+  }
+  return table;
+}
+
+function isSeparatorAtPos(value: string, index: number): boolean {
+  if (index < 0 || index >= value.length) {
+    return false;
+  }
+  const code = value.codePointAt(index);
+  switch (code) {
+    case CharCode.Underline:
+    case CharCode.Dash:
+    case CharCode.Period:
+    case CharCode.Space:
+    case CharCode.Slash:
+    case CharCode.Backslash:
+    case CharCode.SingleQuote:
+    case CharCode.DoubleQuote:
+    case CharCode.Colon:
+    case CharCode.DollarSign:
+    case CharCode.LessThan:
+    case CharCode.OpenParen:
+    case CharCode.OpenSquareBracket:
+      return true;
+    case undefined:
+      return false;
+    default:
+      if (isEmojiImprecise(code)) {
+        return true;
+      }
+      return false;
+  }
+}
+
+function isWhitespaceAtPos(value: string, index: number): boolean {
+  if (index < 0 || index >= value.length) {
+    return false;
+  }
+  const code = value.charCodeAt(index);
+  switch (code) {
+    case CharCode.Space:
+    case CharCode.Tab:
+      return true;
+    default:
+      return false;
+  }
+}
+
+function isUpperCaseAtPos(pos: number, word: string, wordLow: string): boolean {
+  return word[pos] !== wordLow[pos];
+}
+
+export function isPatternInWord(
+  patternLow: string,
+  patternPos: number,
+  patternLen: number,
+  wordLow: string,
+  wordPos: number,
+  wordLen: number,
+  fillMinWordPosArr = false
+): boolean {
+  while (patternPos < patternLen && wordPos < wordLen) {
+    if (patternLow[patternPos] === wordLow[wordPos]) {
+      if (fillMinWordPosArr) {
+        // Remember the min word position for each pattern position
+        _minWordMatchPos[patternPos] = wordPos;
+      }
+      patternPos += 1;
+    }
+    wordPos += 1;
+  }
+  return patternPos === patternLen; // pattern must be exhausted
+}
+
+enum Arrow {
+  Diag = 1,
+  Left = 2,
+  LeftLeft = 3,
+}
+
+/**
+ * An array representing a fuzzy match.
+ *
+ * 0. the score
+ * 1. the offset at which matching started
+ * 2. `<match_pos_N>`
+ * 3. `<match_pos_1>`
+ * 4. `<match_pos_0>` etc
+ */
+// export type FuzzyScore = [score: number, wordStart: number, ...matches: number[]];// [number, number, number];
+export type FuzzyScore = Array<number>;
+
+export function fuzzyScore(
+  pattern: string,
+  patternLow: string,
+  patternStart: number,
+  word: string,
+  wordLow: string,
+  wordStart: number,
+  firstMatchCanBeWeak: boolean
+): FuzzyScore | undefined {
+  const patternLen = pattern.length > _maxLen ? _maxLen : pattern.length;
+  const wordLen = word.length > _maxLen ? _maxLen : word.length;
+
+  if (
+    patternStart >= patternLen ||
+    wordStart >= wordLen ||
+    patternLen - patternStart > wordLen - wordStart
+  ) {
+    return undefined;
+  }
+
+  // Run a simple check if the characters of pattern occur
+  // (in order) at all in word. If that isn't the case we
+  // stop because no match will be possible
+  if (
+    !isPatternInWord(
+      patternLow,
+      patternStart,
+      patternLen,
+      wordLow,
+      wordStart,
+      wordLen,
+      true
+    )
+  ) {
+    return undefined;
+  }
+
+  // Find the max matching word position for each pattern position
+  // NOTE: the min matching word position was filled in above, in the `isPatternInWord` call
+  _fillInMaxWordMatchPos(
+    patternLen,
+    wordLen,
+    patternStart,
+    wordStart,
+    patternLow,
+    wordLow
+  );
+
+  let row: number;
+  let column = 1;
+  let patternPos: number;
+  let wordPos: number;
+
+  const hasStrongFirstMatch = [false];
+
+  // There will be a match, fill in tables
+  for (
+    row = 1, patternPos = patternStart;
+    patternPos < patternLen;
+    row++, patternPos++
+  ) {
+    // Reduce search space to possible matching word positions and to possible access from next row
+    const minWordMatchPos = _minWordMatchPos[patternPos];
+    const maxWordMatchPos = _maxWordMatchPos[patternPos];
+    const nextMaxWordMatchPos =
+      patternPos + 1 < patternLen ? _maxWordMatchPos[patternPos + 1] : wordLen;
+
+    for (
+      column = minWordMatchPos - wordStart + 1, wordPos = minWordMatchPos;
+      wordPos < nextMaxWordMatchPos;
+      column++, wordPos++
+    ) {
+      let score = Number.MIN_SAFE_INTEGER;
+      let canComeDiag = false;
+
+      if (wordPos <= maxWordMatchPos) {
+        score = _doScore(
+          pattern,
+          patternLow,
+          patternPos,
+          patternStart,
+          word,
+          wordLow,
+          wordPos,
+          wordLen,
+          wordStart,
+          _diag[row - 1][column - 1] === 0,
+          hasStrongFirstMatch
+        );
+      }
+
+      let diagScore = 0;
+      if (score !== Number.MAX_SAFE_INTEGER) {
+        canComeDiag = true;
+        diagScore = score + _table[row - 1][column - 1];
+      }
+
+      const canComeLeft = wordPos > minWordMatchPos;
+      const leftScore = canComeLeft
+        ? _table[row][column - 1] + (_diag[row][column - 1] > 0 ? -5 : 0)
+        : 0; // penalty for a gap start
+
+      const canComeLeftLeft =
+        wordPos > minWordMatchPos + 1 && _diag[row][column - 1] > 0;
+      const leftLeftScore = canComeLeftLeft
+        ? _table[row][column - 2] + (_diag[row][column - 2] > 0 ? -5 : 0)
+        : 0; // penalty for a gap start
+
+      if (
+        canComeLeftLeft &&
+        (!canComeLeft || leftLeftScore >= leftScore) &&
+        (!canComeDiag || leftLeftScore >= diagScore)
+      ) {
+        // always prefer choosing left left to jump over a diagonal because that means a match is earlier in the word
+        _table[row][column] = leftLeftScore;
+        _arrows[row][column] = Arrow.LeftLeft;
+        _diag[row][column] = 0;
+      } else if (canComeLeft && (!canComeDiag || leftScore >= diagScore)) {
+        // always prefer choosing left since that means a match is earlier in the word
+        _table[row][column] = leftScore;
+        _arrows[row][column] = Arrow.Left;
+        _diag[row][column] = 0;
+      } else if (canComeDiag) {
+        _table[row][column] = diagScore;
+        _arrows[row][column] = Arrow.Diag;
+        _diag[row][column] = _diag[row - 1][column - 1] + 1;
+      } else {
+        throw new Error(`not possible`);
+      }
+    }
+  }
+
+  if (_debug) {
+    printTables(pattern, patternStart, word, wordStart);
+  }
+
+  if (!hasStrongFirstMatch[0] && !firstMatchCanBeWeak) {
+    return undefined;
+  }
+
+  row--;
+  column--;
+
+  const result: FuzzyScore = [_table[row][column], wordStart];
+
+  let backwardsDiagLength = 0;
+  let maxMatchColumn = 0;
+
+  while (row >= 1) {
+    // Find the column where we go diagonally up
+    let diagColumn = column;
+    do {
+      const arrow = _arrows[row][diagColumn];
+      if (arrow === Arrow.LeftLeft) {
+        diagColumn -= 2;
+      } else if (arrow === Arrow.Left) {
+        diagColumn -= 1;
+      } else {
+        // found the diagonal
+        break;
+      }
+    } while (diagColumn >= 1);
+
+    // Overturn the "forwards" decision if keeping the "backwards" diagonal would give a better match
+    if (
+      backwardsDiagLength > 1 && // only if we would have a contiguous match of 3 characters
+      patternLow[patternStart + row - 1] === wordLow[wordStart + column - 1] && // only if we can do a contiguous match diagonally
+      !isUpperCaseAtPos(diagColumn + wordStart - 1, word, wordLow) && // only if the forwards chose diagonal is not an uppercase
+      backwardsDiagLength + 1 > _diag[row][diagColumn] // only if our contiguous match would be longer than the "forwards" contiguous match
+    ) {
+      diagColumn = column;
+    }
+
+    if (diagColumn === column) {
+      // this is a contiguous match
+      backwardsDiagLength++;
+    } else {
+      backwardsDiagLength = 1;
+    }
+
+    if (!maxMatchColumn) {
+      // remember the last matched column
+      maxMatchColumn = diagColumn;
+    }
+
+    row--;
+    column = diagColumn - 1;
+    result.push(column);
+  }
+
+  if (wordLen === patternLen) {
+    // the word matches the pattern with all characters!
+    // giving the score a total match boost (to come up ahead other words)
+    result[0] += 2;
+  }
+
+  // Add 1 penalty for each skipped character in the word
+  const skippedCharsCount = maxMatchColumn - patternLen;
+  result[0] -= skippedCharsCount;
+
+  return result;
+}
+
+function _doScore(
+  pattern: string,
+  patternLow: string,
+  patternPos: number,
+  patternStart: number,
+  word: string,
+  wordLow: string,
+  wordPos: number,
+  wordLen: number,
+  wordStart: number,
+  newMatchStart: boolean,
+  outFirstMatchStrong: boolean[]
+): number {
+  if (patternLow[patternPos] !== wordLow[wordPos]) {
+    return Number.MIN_SAFE_INTEGER;
+  }
+
+  let score = 1;
+  let isGapLocation = false;
+  if (wordPos === patternPos - patternStart) {
+    // common prefix: `foobar <-> foobaz`
+    //                            ^^^^^
+    score = pattern[patternPos] === word[wordPos] ? 7 : 5;
+  } else if (
+    isUpperCaseAtPos(wordPos, word, wordLow) &&
+    (wordPos === 0 || !isUpperCaseAtPos(wordPos - 1, word, wordLow))
+  ) {
+    // hitting upper-case: `foo <-> forOthers`
+    //                              ^^ ^
+    score = pattern[patternPos] === word[wordPos] ? 7 : 5;
+    isGapLocation = true;
+  } else if (
+    isSeparatorAtPos(wordLow, wordPos) &&
+    (wordPos === 0 || !isSeparatorAtPos(wordLow, wordPos - 1))
+  ) {
+    // hitting a separator: `. <-> foo.bar`
+    //                                ^
+    score = 5;
+  } else if (
+    isSeparatorAtPos(wordLow, wordPos - 1) ||
+    isWhitespaceAtPos(wordLow, wordPos - 1)
+  ) {
+    // post separator: `foo <-> bar_foo`
+    //                              ^^^
+    score = 5;
+    isGapLocation = true;
+  }
+
+  if (score > 1 && patternPos === patternStart) {
+    outFirstMatchStrong[0] = true;
+  }
+
+  if (!isGapLocation) {
+    isGapLocation =
+      isUpperCaseAtPos(wordPos, word, wordLow) ||
+      isSeparatorAtPos(wordLow, wordPos - 1) ||
+      isWhitespaceAtPos(wordLow, wordPos - 1);
+  }
+
+  //
+  if (patternPos === patternStart) {
+    // first character in pattern
+    if (wordPos > wordStart) {
+      // the first pattern character would match a word character that is not at the word start
+      // so introduce a penalty to account for the gap preceding this match
+      score -= isGapLocation ? 3 : 5;
+    }
+  } else if (newMatchStart) {
+    // this would be the beginning of a new match (i.e. there would be a gap before this location)
+    score += isGapLocation ? 2 : 0;
+  } else {
+    // this is part of a contiguous match, so give it a slight bonus, but do so only if it would not be a prefered gap location
+    score += isGapLocation ? 0 : 1;
+  }
+
+  if (wordPos + 1 === wordLen) {
+    // we always penalize gaps, but this gives unfair advantages to a match that would match the last character in the word
+    // so pretend there is a gap after the last character in the word to normalize things
+    score -= isGapLocation ? 3 : 5;
+  }
+
+  return score;
+}
+
+function printTable(
+  table: number[][],
+  pattern: string,
+  patternLen: number,
+  word: string,
+  wordLen: number
+): string {
+  function pad(s: string, n: number, _pad = " ") {
+    while (s.length < n) {
+      s = _pad + s;
+    }
+    return s;
+  }
+  let ret = ` |   |${word
+    .split("")
+    .map((c) => pad(c, 3))
+    .join("|")}\n`;
+
+  for (let i = 0; i <= patternLen; i++) {
+    if (i === 0) {
+      ret += " |";
+    } else {
+      ret += `${pattern[i - 1]}|`;
+    }
+    ret +=
+      table[i]
+        .slice(0, wordLen + 1)
+        .map((n) => pad(n.toString(), 3))
+        .join("|") + "\n";
+  }
+  return ret;
+}
+
+function printTables(
+  pattern: string,
+  patternStart: number,
+  word: string,
+  wordStart: number
+): void {
+  pattern = pattern.substr(patternStart);
+  word = word.substr(wordStart);
+  console.log(printTable(_table, pattern, pattern.length, word, word.length));
+  console.log(printTable(_arrows, pattern, pattern.length, word, word.length));
+  console.log(printTable(_diag, pattern, pattern.length, word, word.length));
+}
+
+const _minWordMatchPos = initArr(2 * _maxLen); // min word position for a certain pattern position
+const _maxWordMatchPos = initArr(2 * _maxLen); // max word position for a certain pattern position
+const _diag = initTable(); // the length of a contiguous diagonal match
+const _table = initTable();
+const _arrows = <Arrow[][]>initTable();
+
+function initArr(maxLen: number) {
+  const row: number[] = [];
+  for (let i = 0; i <= maxLen; i++) {
+    row[i] = 0;
+  }
+  return row;
+}
+
+function _fillInMaxWordMatchPos(
+  patternLen: number,
+  wordLen: number,
+  patternStart: number,
+  wordStart: number,
+  patternLow: string,
+  wordLow: string
+) {
+  let patternPos = patternLen - 1;
+  let wordPos = wordLen - 1;
+  while (patternPos >= patternStart && wordPos >= wordStart) {
+    if (patternLow[patternPos] === wordLow[wordPos]) {
+      _maxWordMatchPos[patternPos] = wordPos;
+      patternPos--;
+    }
+    wordPos--;
+  }
+}
+
+export interface FuzzyScorer {
+  (
+    pattern: string,
+    lowPattern: string,
+    patternPos: number,
+    word: string,
+    lowWord: string,
+    wordPos: number,
+    firstMatchCanBeWeak: boolean
+  ): FuzzyScore | undefined;
+}
+
+export function createMatches(score: undefined | FuzzyScore): Match[] {
+  if (typeof score === "undefined") {
+    return [];
+  }
+  const res: Match[] = [];
+  const wordPos = score[1];
+  for (let i = score.length - 1; i > 1; i--) {
+    const pos = score[i] + wordPos;
+    const last = res[res.length - 1];
+    if (last && last.end === pos) {
+      last.end = pos + 1;
+    } else {
+      res.push({ start: pos, end: pos + 1 });
+    }
+  }
+  return res;
+}
+
+/**
+ * A fast function (therefore imprecise) to check if code points are emojis.
+ * Generated using https://github.com/alexdima/unicode-utils/blob/master/generate-emoji-test.js
+ */
+export function isEmojiImprecise(x: number): boolean {
+  return (
+    (x >= 0x1f1e6 && x <= 0x1f1ff) ||
+    x === 8986 ||
+    x === 8987 ||
+    x === 9200 ||
+    x === 9203 ||
+    (x >= 9728 && x <= 10175) ||
+    x === 11088 ||
+    x === 11093 ||
+    (x >= 127744 && x <= 128591) ||
+    (x >= 128640 && x <= 128764) ||
+    (x >= 128992 && x <= 129003) ||
+    (x >= 129280 && x <= 129535) ||
+    (x >= 129648 && x <= 129750)
+  );
+}
--- a/src/common/string/filter/sequence-matching.ts
+++ b/src/common/string/filter/sequence-matching.ts
@@ -1,4 +1,52 @@
-import fuzzysort from "fuzzysort";
+import { fuzzyScore } from "./filter";
+
+/**
+ * Determine whether a sequence of letters exists in another string,
+ *   in that order, allowing for skipping. Ex: "chdr" exists in "chandelier")
+ *
+ * @param {string} filter - Sequence of letters to check for
+ * @param {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.
+ */
+
+export const fuzzySequentialMatch = (
+  filter: string,
+  item: ScorableTextItem
+) => {
+  let topScore = Number.NEGATIVE_INFINITY;
+
+  for (const word of item.strings) {
+    const scores = fuzzyScore(
+      filter,
+      filter.toLowerCase(),
+      0,
+      word,
+      word.toLowerCase(),
+      0,
+      true
+    );
+
+    if (!scores) {
+      continue;
+    }
+
+    // The VS Code implementation of filter returns a 0 for a weak match.
+    // But if .filter() sees a "0", it considers that a failed match and will remove it.
+    // So, we set score to 1 in these cases so the match will be included, and mostly respect correct ordering.
+    const score = scores[0] === 0 ? 1 : scores[0];
+
+    if (score > topScore) {
+      topScore = score;
+    }
+  }
+
+  if (topScore === Number.NEGATIVE_INFINITY) {
+    return undefined;
+  }
+
+  return topScore;
+};

 /**
 * An interface that objects must extend in order to use the fuzzy sequence matcher
@@ -18,48 +66,18 @@ export interface ScorableTextItem {
  strings: string[];
 }

-export type FuzzyFilterSort = <T extends ScorableTextItem>(
+type FuzzyFilterSort = <T extends ScorableTextItem>(
  filter: string,
  items: T[]
 ) => T[];

-export function fuzzyMatcher(search: string | null): (string) => boolean {
-  const scorer = fuzzyScorer(search);
-  return (value: string) => scorer([value]) !== Number.NEGATIVE_INFINITY;
-}
-
-export function fuzzyScorer(
-  search: string | null
-): (values: string[]) => number {
-  const searchTerms = (search || "").match(/("[^"]+"|[^"\s]+)/g);
-  if (!searchTerms) {
-    return () => 0;
-  }
-  return (values) =>
-    searchTerms
-      .map((term) => {
-        const resultsForTerm = fuzzysort.go(term, values, {
-          allowTypo: true,
-        });
-        if (resultsForTerm.length > 0) {
-          return Math.max(...resultsForTerm.map((result) => result.score));
-        }
-        return Number.NEGATIVE_INFINITY;
-      })
-      .reduce((partial, current) => partial + current, 0);
-}
-
-export const fuzzySortFilterSort: FuzzyFilterSort = (filter, items) => {
-  const scorer = fuzzyScorer(filter);
-  return items
+export const fuzzyFilterSort: FuzzyFilterSort = (filter, items) =>
+  items
    .map((item) => {
-      item.score = scorer(item.strings);
+      item.score = fuzzySequentialMatch(filter, item);
      return item;
    })
-    .filter((item) => item.score !== undefined && item.score > -100000)
+    .filter((item) => item.score !== undefined)
    .sort(({ score: scoreA = 0 }, { score: scoreB = 0 }) =>
      scoreA > scoreB ? -1 : scoreA < scoreB ? 1 : 0
    );
-};
-
-export const defaultFuzzyFilterSort = fuzzySortFilterSort;
--- a/src/common/util/promise-timeout.ts
+++ b/src/common/util/promise-timeout.ts
@@ -1,4 +1,4 @@
-export const promiseTimeout = (ms: number, promise: Promise<any> | any) => {
+export const promiseTimeout = (ms: number, promise: Promise<any>) => {
  const timeout = new Promise((_resolve, reject) => {
    setTimeout(() => {
      reject(`Timed out in ${ms} ms.`);
--- a/src/common/util/subscribe-polling.ts
+++ b/src/common/util/subscribe-polling.ts
@@ -1,18 +0,0 @@
-import { HomeAssistant } from "../../types";
-
-export const subscribePollingCollection = (
-  hass: HomeAssistant,
-  updateData: (hass: HomeAssistant) => void,
-  interval: number
-) => {
-  let timeout;
-  const fetchData = async () => {
-    try {
-      await updateData(hass);
-    } finally {
-      timeout = setTimeout(() => fetchData(), interval);
-    }
-  };
-  fetchData();
-  return () => clearTimeout(timeout);
-};
--- a/src/components/chart/statistics-chart.ts
+++ b/src/components/chart/statistics-chart.ts
@@ -347,8 +347,8 @@ class StatisticsChart extends LitElement {
        statTypes.forEach((type) => {
          let val: number | null;
          if (type === "sum") {
-            if (initVal === null) {
-              initVal = val = stat.state || 0;
+            if (!initVal) {
+              initVal = val = stat.state;
              prevSum = stat.sum;
            } else {
              val = initVal + ((stat.sum || 0) - prevSum!);
--- a/src/components/currency-datalist.ts
+++ b/src/components/currency-datalist.ts
@@ -1,167 +1,165 @@
-export const currencies = [
-  "AED",
-  "AFN",
-  "ALL",
-  "AMD",
-  "ANG",
-  "AOA",
-  "ARS",
-  "AUD",
-  "AWG",
-  "AZN",
-  "BAM",
-  "BBD",
-  "BDT",
-  "BGN",
-  "BHD",
-  "BIF",
-  "BMD",
-  "BND",
-  "BOB",
-  "BRL",
-  "BSD",
-  "BTN",
-  "BWP",
-  "BYN",
-  "BYR",
-  "BZD",
-  "CAD",
-  "CDF",
-  "CHF",
-  "CLP",
-  "CNY",
-  "COP",
-  "CRC",
-  "CUP",
-  "CVE",
-  "CZK",
-  "DJF",
-  "DKK",
-  "DOP",
-  "DZD",
-  "EGP",
-  "ERN",
-  "ETB",
-  "EUR",
-  "FJD",
-  "FKP",
-  "GBP",
-  "GEL",
-  "GHS",
-  "GIP",
-  "GMD",
-  "GNF",
-  "GTQ",
-  "GYD",
-  "HKD",
-  "HNL",
-  "HRK",
-  "HTG",
-  "HUF",
-  "IDR",
-  "ILS",
-  "INR",
-  "IQD",
-  "IRR",
-  "ISK",
-  "JMD",
-  "JOD",
-  "JPY",
-  "KES",
-  "KGS",
-  "KHR",
-  "KMF",
-  "KPW",
-  "KRW",
-  "KWD",
-  "KYD",
-  "KZT",
-  "LAK",
-  "LBP",
-  "LKR",
-  "LRD",
-  "LSL",
-  "LTL",
-  "LYD",
-  "MAD",
-  "MDL",
-  "MGA",
-  "MKD",
-  "MMK",
-  "MNT",
-  "MOP",
-  "MRO",
-  "MUR",
-  "MVR",
-  "MWK",
-  "MXN",
-  "MYR",
-  "MZN",
-  "NAD",
-  "NGN",
-  "NIO",
-  "NOK",
-  "NPR",
-  "NZD",
-  "OMR",
-  "PAB",
-  "PEN",
-  "PGK",
-  "PHP",
-  "PKR",
-  "PLN",
-  "PYG",
-  "QAR",
-  "RON",
-  "RSD",
-  "RUB",
-  "RWF",
-  "SAR",
-  "SBD",
-  "SCR",
-  "SDG",
-  "SEK",
-  "SGD",
-  "SHP",
-  "SLL",
-  "SOS",
-  "SRD",
-  "SSP",
-  "STD",
-  "SYP",
-  "SZL",
-  "THB",
-  "TJS",
-  "TMT",
-  "TND",
-  "TOP",
-  "TRY",
-  "TTD",
-  "TWD",
-  "TZS",
-  "UAH",
-  "UGX",
-  "USD",
-  "UYU",
-  "UZS",
-  "VEF",
-  "VND",
-  "VUV",
-  "WST",
-  "XAF",
-  "XCD",
-  "XOF",
-  "XPF",
-  "YER",
-  "ZAR",
-  "ZMK",
-  "ZWL",
-];
-
 export const createCurrencyListEl = () => {
  const list = document.createElement("datalist");
  list.id = "currencies";
-  for (const currency of currencies) {
+  for (const currency of [
+    "AED",
+    "AFN",
+    "ALL",
+    "AMD",
+    "ANG",
+    "AOA",
+    "ARS",
+    "AUD",
+    "AWG",
+    "AZN",
+    "BAM",
+    "BBD",
+    "BDT",
+    "BGN",
+    "BHD",
+    "BIF",
+    "BMD",
+    "BND",
+    "BOB",
+    "BRL",
+    "BSD",
+    "BTN",
+    "BWP",
+    "BYN",
+    "BYR",
+    "BZD",
+    "CAD",
+    "CDF",
+    "CHF",
+    "CLP",
+    "CNY",
+    "COP",
+    "CRC",
+    "CUP",
+    "CVE",
+    "CZK",
+    "DJF",
+    "DKK",
+    "DOP",
+    "DZD",
+    "EGP",
+    "ERN",
+    "ETB",
+    "EUR",
+    "FJD",
+    "FKP",
+    "GBP",
+    "GEL",
+    "GHS",
+    "GIP",
+    "GMD",
+    "GNF",
+    "GTQ",
+    "GYD",
+    "HKD",
+    "HNL",
+    "HRK",
+    "HTG",
+    "HUF",
+    "IDR",
+    "ILS",
+    "INR",
+    "IQD",
+    "IRR",
+    "ISK",
+    "JMD",
+    "JOD",
+    "JPY",
+    "KES",
+    "KGS",
+    "KHR",
+    "KMF",
+    "KPW",
+    "KRW",
+    "KWD",
+    "KYD",
+    "KZT",
+    "LAK",
+    "LBP",
+    "LKR",
+    "LRD",
+    "LSL",
+    "LTL",
+    "LYD",
+    "MAD",
+    "MDL",
+    "MGA",
+    "MKD",
+    "MMK",
+    "MNT",
+    "MOP",
+    "MRO",
+    "MUR",
+    "MVR",
+    "MWK",
+    "MXN",
+    "MYR",
+    "MZN",
+    "NAD",
+    "NGN",
+    "NIO",
+    "NOK",
+    "NPR",
+    "NZD",
+    "OMR",
+    "PAB",
+    "PEN",
+    "PGK",
+    "PHP",
+    "PKR",
+    "PLN",
+    "PYG",
+    "QAR",
+    "RON",
+    "RSD",
+    "RUB",
+    "RWF",
+    "SAR",
+    "SBD",
+    "SCR",
+    "SDG",
+    "SEK",
+    "SGD",
+    "SHP",
+    "SLL",
+    "SOS",
+    "SRD",
+    "SSP",
+    "STD",
+    "SYP",
+    "SZL",
+    "THB",
+    "TJS",
+    "TMT",
+    "TND",
+    "TOP",
+    "TRY",
+    "TTD",
+    "TWD",
+    "TZS",
+    "UAH",
+    "UGX",
+    "USD",
+    "UYU",
+    "UZS",
+    "VEF",
+    "VND",
+    "VUV",
+    "WST",
+    "XAF",
+    "XCD",
+    "XOF",
+    "XPF",
+    "YER",
+    "ZAR",
+    "ZMK",
+    "ZWL",
+  ]) {
    const option = document.createElement("option");
    option.value = currency;
    option.innerHTML = currency;
--- a/src/components/data-table/sort_filter_worker.ts
+++ b/src/components/data-table/sort_filter_worker.ts
@@ -7,26 +7,25 @@ import type {
  SortableColumnContainer,
  SortingDirection,
 } from "./ha-data-table";
-import { fuzzyMatcher } from "../../common/string/filter/sequence-matching";

 const filterData = (
  data: DataTableRowData[],
  columns: SortableColumnContainer,
  filter: string
 ) => {
-  const matcher = fuzzyMatcher(filter);
+  filter = filter.toUpperCase();
  return data.filter((row) =>
    Object.entries(columns).some((columnEntry) => {
      const [key, column] = columnEntry;
      if (column.filterable) {
        if (
-          matcher(
-            String(
-              column.filterKey
-                ? row[column.valueColumn || key][column.filterKey]
-                : row[column.valueColumn || key]
-            )
+          String(
+            column.filterKey
+              ? row[column.valueColumn || key][column.filterKey]
+              : row[column.valueColumn || key]
          )
+            .toUpperCase()
+            .includes(filter)
        ) {
          return true;
        }
--- a/src/components/device/ha-device-picker.ts
+++ b/src/components/device/ha-device-picker.ts
@@ -52,8 +52,6 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {

  @property() public value?: string;

-  @property() public helper?: string;
-
  @property() public devices?: DeviceRegistryEntry[];

  @property() public areas?: AreaRegistryEntry[];
@@ -198,10 +196,9 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
          this.hass,
          deviceEntityLookup[device.id]
        ),
-        area:
-          device.area_id && areaLookup[device.area_id]
-            ? areaLookup[device.area_id].name
-            : this.hass.localize("ui.components.device-picker.no_area"),
+        area: device.area_id
+          ? areaLookup[device.area_id].name
+          : this.hass.localize("ui.components.device-picker.no_area"),
      }));
      if (!outputDevices.length) {
        return [
@@ -272,7 +269,6 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
          ? this.hass.localize("ui.components.device-picker.device")
          : this.label}
        .value=${this._value}
-        .helper=${this.helper}
        .renderer=${rowRenderer}
        .disabled=${this.disabled}
        .required=${this.required}
--- a/src/components/device/ha-devices-picker.ts
+++ b/src/components/device/ha-devices-picker.ts
@@ -4,7 +4,6 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
 import "./ha-device-picker";
-import type { HaDevicePickerDeviceFilterFunc } from "./ha-device-picker";

@customElement("ha-devices-picker")
 class HaDevicesPicker extends LitElement {
@@ -12,10 +11,6 @@ class HaDevicesPicker extends LitElement {

  @property() public value?: string[];

-  @property() public helper?: string;
-
-  @property({ type: Boolean }) public disabled?: boolean;
-
  @property({ type: Boolean }) public required?: boolean;

  /**
@@ -42,8 +37,6 @@ class HaDevicesPicker extends LitElement {

  @property({ attribute: "pick-device-label" }) public pickDeviceLabel?: string;

-  @property() public deviceFilter?: HaDevicePickerDeviceFilterFunc;
-
  protected render(): TemplateResult {
    if (!this.hass) {
      return html``;
@@ -58,13 +51,11 @@ class HaDevicesPicker extends LitElement {
              allow-custom-entity
              .curValue=${entityId}
              .hass=${this.hass}
-              .deviceFilter=${this.deviceFilter}
              .includeDomains=${this.includeDomains}
              .excludeDomains=${this.excludeDomains}
              .includeDeviceClasses=${this.includeDeviceClasses}
              .value=${entityId}
              .label=${this.pickedDeviceLabel}
-              .disabled=${this.disabled}
              @value-changed=${this._deviceChanged}
            ></ha-device-picker>
          </div>
@@ -72,15 +63,11 @@ class HaDevicesPicker extends LitElement {
      )}
      <div>
        <ha-device-picker
-          allow-custom-entity
          .hass=${this.hass}
-          .helper=${this.helper}
-          .deviceFilter=${this.deviceFilter}
          .includeDomains=${this.includeDomains}
          .excludeDomains=${this.excludeDomains}
          .includeDeviceClasses=${this.includeDeviceClasses}
          .label=${this.pickDeviceLabel}
-          .disabled=${this.disabled}
          .required=${this.required && !currentDevices.length}
          @value-changed=${this._addDevice}
        ></ha-device-picker>
--- a/src/components/entity/ha-entities-picker.ts
+++ b/src/components/entity/ha-entities-picker.ts
@@ -14,12 +14,8 @@ class HaEntitiesPickerLight extends LitElement {

  @property({ type: Array }) public value?: string[];

-  @property({ type: Boolean }) public disabled?: boolean;
-
  @property({ type: Boolean }) public required?: boolean;

-  @property() public helper?: string;
-
  /**
   * Show entities from specific domains.
   * @type {string}
@@ -98,7 +94,6 @@ class HaEntitiesPickerLight extends LitElement {
              .entityFilter=${this._entityFilter}
              .value=${entityId}
              .label=${this.pickedEntityLabel}
-              .disabled=${this.disabled}
              @value-changed=${this._entityChanged}
            ></ha-entity-picker>
          </div>
@@ -106,7 +101,6 @@ class HaEntitiesPickerLight extends LitElement {
      )}
      <div>
        <ha-entity-picker
-          allow-custom-entity
          .hass=${this.hass}
          .includeDomains=${this.includeDomains}
          .excludeDomains=${this.excludeDomains}
@@ -116,8 +110,6 @@ class HaEntitiesPickerLight extends LitElement {
          .includeUnitOfMeasurement=${this.includeUnitOfMeasurement}
          .entityFilter=${this._entityFilter}
          .label=${this.pickEntityLabel}
-          .helper=${this.helper}
-          .disabled=${this.disabled}
          .required=${this.required && !currentEntities.length}
          @value-changed=${this._addEntity}
        ></ha-entity-picker>
--- a/src/components/entity/ha-entity-attribute-picker.ts
+++ b/src/components/entity/ha-entity-attribute-picker.ts
@@ -28,8 +28,6 @@ class HaEntityAttributePicker extends LitElement {

  @property() public value?: string;

-  @property() public helper?: string;
-
  @property({ type: Boolean }) private _opened = false;

  @query("ha-combo-box", true) private _comboBox!: HaComboBox;
@@ -66,7 +64,6 @@ class HaEntityAttributePicker extends LitElement {
        )}
        .disabled=${this.disabled || !this.entityId}
        .required=${this.required}
-        .helper=${this.helper}
        .allowCustomValue=${this.allowCustomValue}
        item-value-path="value"
        item-label-path="label"
--- a/src/components/entity/ha-entity-picker.ts
+++ b/src/components/entity/ha-entity-picker.ts
@@ -15,7 +15,6 @@ import type { HaComboBox } from "../ha-combo-box";
 import "../ha-icon-button";
 import "../ha-svg-icon";
 import "./state-badge";
-import { defaultFuzzyFilterSort } from "../../common/string/filter/sequence-matching";

 interface HassEntityWithCachedName extends HassEntity {
  friendly_name: string;
@@ -49,8 +48,6 @@ export class HaEntityPicker extends LitElement {

  @property() public value?: string;

-  @property() public helper?: string;
-
  /**
   * Show entities from specific domains.
   * @type {Array}
@@ -307,7 +304,6 @@ export class HaEntityPicker extends LitElement {
        .label=${this.label === undefined
          ? this.hass.localize("ui.components.entity.entity-picker.entity")
          : this.label}
-        .helper=${this.helper}
        .allowCustomValue=${this.allowCustomEntity}
        .filteredItems=${this._states}
        .renderer=${rowRenderer}
@@ -337,18 +333,11 @@ export class HaEntityPicker extends LitElement {
  }

  private _filterChanged(ev: CustomEvent): void {
-    const filterString = ev.detail.value;
-
-    const sortableEntityStates = this._states.map((entityState) => ({
-      strings: [entityState.entity_id, computeStateName(entityState)],
-      entityState: entityState,
-    }));
-    const sortedEntityStates = defaultFuzzyFilterSort(
-      filterString,
-      sortableEntityStates
-    );
-    (this.comboBox as any).filteredItems = sortedEntityStates.map(
-      (sortableItem) => sortableItem.entityState
+    const filterString = ev.detail.value.toLowerCase();
+    (this.comboBox as any).filteredItems = this._states.filter(
+      (entityState) =>
+        entityState.entity_id.toLowerCase().includes(filterString) ||
+        computeStateName(entityState).toLowerCase().includes(filterString)
    );
  }

--- a/src/components/ha-addon-picker.ts
+++ b/src/components/ha-addon-picker.ts
@@ -29,8 +29,6 @@ class HaAddonPicker extends LitElement {

  @property() public value = "";

-  @property() public helper?: string;
-
  @state() private _addons?: HassioAddonInfo[];

  @property({ type: Boolean }) public disabled = false;
@@ -64,7 +62,6 @@ class HaAddonPicker extends LitElement {
        .value=${this._value}
        .required=${this.required}
        .disabled=${this.disabled}
-        .helper=${this.helper}
        .renderer=${rowRenderer}
        .items=${this._addons}
        item-value-path="slug"
--- a/src/components/ha-analytics.ts
+++ b/src/components/ha-analytics.ts
@@ -2,12 +2,12 @@ import "@polymer/paper-tooltip/paper-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import type { Analytics, AnalyticsPreferences } from "../data/analytics";
+import { Analytics, AnalyticsPreferences } from "../data/analytics";
 import { haStyle } from "../resources/styles";
-import type { HomeAssistant } from "../types";
+import { HomeAssistant } from "../types";
+import "./ha-checkbox";
+import type { HaCheckbox } from "./ha-checkbox";
 import "./ha-settings-row";
-import "./ha-switch";
-import type { HaSwitch } from "./ha-switch";

 const ADDITIONAL_PREFERENCES = [
  {
@@ -40,62 +40,62 @@ export class HaAnalytics extends LitElement {

    return html`
      <ha-settings-row>
+        <span slot="prefix">
+          <ha-checkbox
+            @change=${this._handleRowCheckboxClick}
+            .checked=${baseEnabled}
+            .preference=${"base"}
+            .disabled=${loading}
+            name="base"
+          >
+          </ha-checkbox>
+        </span>
        <span slot="heading" data-for="base"> Basic analytics </span>
        <span slot="description" data-for="base">
          This includes information about your system.
        </span>
-        <ha-switch
-          @change=${this._handleRowClick}
-          .checked=${baseEnabled}
-          .preference=${"base"}
-          .disabled=${loading}
-          name="base"
-        >
-        </ha-switch>
      </ha-settings-row>
      ${ADDITIONAL_PREFERENCES.map(
        (preference) =>
-          html`
-            <ha-settings-row>
-              <span slot="heading" data-for=${preference.key}>
-                ${preference.title}
-              </span>
-              <span slot="description" data-for=${preference.key}>
-                ${preference.description}
-              </span>
-              <span>
-                <ha-switch
-                  @change=${this._handleRowClick}
-                  .checked=${this.analytics?.preferences[preference.key]}
-                  .preference=${preference.key}
-                  name=${preference.key}
-                >
-                </ha-switch>
-                ${!baseEnabled
-                  ? html`
-                      <paper-tooltip animation-delay="0" position="right">
-                        You need to enable basic analytics for this option to be
-                        available
-                      </paper-tooltip>
-                    `
-                  : ""}
-              </span>
-            </ha-settings-row>
-          `
+          html`<ha-settings-row>
+            <span slot="prefix">
+              <ha-checkbox
+                @change=${this._handleRowCheckboxClick}
+                .checked=${this.analytics?.preferences[preference.key]}
+                .preference=${preference.key}
+                name=${preference.key}
+              >
+              </ha-checkbox>
+              ${!baseEnabled
+                ? html`<paper-tooltip animation-delay="0" position="right">
+                    You need to enable basic analytics for this option to be
+                    available
+                  </paper-tooltip>`
+                : ""}
+            </span>
+            <span slot="heading" data-for=${preference.key}>
+              ${preference.title}
+            </span>
+            <span slot="description" data-for=${preference.key}>
+              ${preference.description}
+            </span>
+          </ha-settings-row>`
      )}
      <ha-settings-row>
+        <span slot="prefix">
+          <ha-checkbox
+            @change=${this._handleRowCheckboxClick}
+            .checked=${this.analytics?.preferences.diagnostics}
+            .preference=${"diagnostics"}
+            .disabled=${loading}
+            name="diagnostics"
+          >
+          </ha-checkbox>
+        </span>
        <span slot="heading" data-for="diagnostics"> Diagnostics </span>
        <span slot="description" data-for="diagnostics">
          Share crash reports when unexpected errors occur.
        </span>
-        <ha-switch
-          @change=${this._handleRowClick}
-          .checked=${this.analytics?.preferences.diagnostics}
-          .preference=${"diagnostics"}
-          .disabled=${loading}
-          name="diagnostics"
-        >
-        </ha-switch>
      </ha-settings-row>
    `;
  }
@@ -120,23 +120,23 @@ export class HaAnalytics extends LitElement {
    });
  }

-  private _handleRowClick(ev: Event) {
-    const target = ev.currentTarget as HaSwitch;
-    const preference = (target as any).preference;
+  private _handleRowCheckboxClick(ev: Event) {
+    const checkbox = ev.currentTarget as HaCheckbox;
+    const preference = (checkbox as any).preference;
    const preferences = this.analytics ? { ...this.analytics.preferences } : {};

-    if (preferences[preference] === target.checked) {
+    if (preferences[preference] === checkbox.checked) {
      return;
    }

-    preferences[preference] = target.checked;
+    preferences[preference] = checkbox.checked;

    if (
      ADDITIONAL_PREFERENCES.some((entry) => entry.key === preference) &&
-      target.checked
+      checkbox.checked
    ) {
      preferences.base = true;
-    } else if (preference === "base" && !target.checked) {
+    } else if (preference === "base" && !checkbox.checked) {
      preferences.usage = false;
      preferences.statistics = false;
    }
--- a/src/components/ha-area-picker.ts
+++ b/src/components/ha-area-picker.ts
@@ -49,8 +49,6 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {

  @property() public value?: string;

-  @property() public helper?: string;
-
  @property() public placeholder?: string;

  @property({ type: Boolean, attribute: "no-add" })
@@ -314,7 +312,6 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
    return html`
      <ha-combo-box
        .hass=${this.hass}
-        .helper=${this.helper}
        item-value-path="area_id"
        item-id-path="area_id"
        item-label-path="name"
@@ -409,7 +406,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
            name,
          });
          this._areas = [...this._areas!, area];
-          (this.comboBox as any).filteredItems = this._getAreas(
+          (this.comboBox as any).items = this._getAreas(
            this._areas!,
            this._devices!,
            this._entities!,
--- a/src/components/ha-areas-picker.ts
+++ b/src/components/ha-areas-picker.ts
@@ -15,8 +15,6 @@ export class HaAreasPicker extends SubscribeMixin(LitElement) {

  @property() public value?: string[];

-  @property() public helper?: string;
-
  @property() public placeholder?: string;

  @property({ type: Boolean, attribute: "no-add" })
@@ -92,7 +90,6 @@ export class HaAreasPicker extends SubscribeMixin(LitElement) {
          .noAdd=${this.noAdd}
          .hass=${this.hass}
          .label=${this.pickAreaLabel}
-          .helper=${this.helper}
          .includeDomains=${this.includeDomains}
          .excludeDomains=${this.excludeDomains}
          .includeDeviceClasses=${this.includeDeviceClasses}
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@@ -5,7 +5,6 @@ import { fireEvent } from "../common/dom/fire_event";
 import { stopPropagation } from "../common/dom/stop_propagation";
 import "./ha-select";
 import "./ha-textfield";
-import "./ha-input-helper-text";

 export interface TimeChangedEvent {
  days?: number;
@@ -131,7 +130,7 @@ export class HaBaseTimeInput extends LitElement {
  protected render(): TemplateResult {
    return html`
      ${this.label
-        ? html`<label>${this.label}${this.required ? " *" : ""}</label>`
+        ? html`<label>${this.label}${this.required ? "*" : ""}</label>`
        : ""}
      <div class="time-input-wrap">
        ${this.enableDay
@@ -254,9 +253,7 @@ export class HaBaseTimeInput extends LitElement {
              <mwc-list-item value="PM">PM</mwc-list-item>
            </ha-select>`}
      </div>
-      ${this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
-        : ""}
+      ${this.helper ? html`<div class="helper">${this.helper}</div>` : ""}
    `;
  }

@@ -310,7 +307,6 @@ export class HaBaseTimeInput extends LitElement {
      border-radius: var(--mdc-shape-small, 4px) var(--mdc-shape-small, 4px) 0 0;
      overflow: hidden;
      position: relative;
-      direction: ltr;
    }
    ha-textfield {
      width: 40px;
@@ -354,6 +350,13 @@ export class HaBaseTimeInput extends LitElement {
      color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
      padding-left: 4px;
    }
+
+    .helper {
+      color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
+      font-size: 0.75rem;
+      padding-left: 16px;
+      padding-right: 16px;
+    }
  `;
 }

--- a/src/components/ha-button-toggle-group.ts
+++ b/src/components/ha-button-toggle-group.ts
@@ -117,19 +117,6 @@ export class HaButtonToggleGroup extends LitElement {
        --mdc-shape-small: 4px;
        border-right-width: 1px;
      }
-
-      :host([dir="rtl"]) ha-icon-button:first-child,
-      :host([dir="rtl"]) mwc-button:first-child {
-        border-radius: 0 4px 4px 0;
-        border-right-width: 1px;
-        --mdc-shape-small: 0 4px 4px 0;
-        --mdc-button-outline-width: 1px;
-      }
-      :host([dir="rtl"]) ha-icon-button:last-child,
-      :host([dir="rtl"]) mwc-button:last-child {
-        --mdc-shape-small: 4px 0 0 4px;
-        border-radius: 4px 0 0 4px;
-      }
    `;
  }
 }
--- a/src/components/ha-clickable-list-item.ts
+++ b/src/components/ha-clickable-list-item.ts
@@ -1,68 +0,0 @@
-import { ListItemBase } from "@material/mwc-list/mwc-list-item-base";
-import { styles } from "@material/mwc-list/mwc-list-item.css";
-import { css, CSSResult, html } from "lit";
-import { customElement, property, query } from "lit/decorators";
-
-@customElement("ha-clickable-list-item")
-export class HaClickableListItem extends ListItemBase {
-  @property() public href?: string;
-
-  @property({ type: Boolean }) public disableHref = false;
-
-  // property used only in css
-  @property({ type: Boolean, reflect: true }) public rtl = false;
-
-  @query("a") private _anchor!: HTMLAnchorElement;
-
-  public render() {
-    const r = super.render();
-    const href = this.href || "";
-
-    return html`${this.disableHref
-      ? html`<a aria-role="option">${r}</a>`
-      : html`<a aria-role="option" href=${href}>${r}</a>`}`;
-  }
-
-  firstUpdated() {
-    super.firstUpdated();
-    this.addEventListener("keydown", (ev) => {
-      if (ev.key === "Enter" || ev.key === " ") {
-        this._anchor.click();
-      }
-    });
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      styles,
-      css`
-        :host {
-          padding-left: 0px;
-          padding-right: 0px;
-        }
-        :host([rtl]) span {
-          margin-left: var(--mdc-list-item-graphic-margin, 20px) !important;
-          margin-right: 0px !important;
-        }
-        :host([graphic="avatar"]:not([twoLine])),
-        :host([graphic="icon"]:not([twoLine])) {
-          height: 48px;
-        }
-        a {
-          width: 100%;
-          height: 100%;
-          display: flex;
-          align-items: center;
-          padding-left: var(--mdc-list-side-padding, 20px);
-          padding-right: var(--mdc-list-side-padding, 20px);
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-clickable-list-item": HaClickableListItem;
-  }
-}
--- a/src/components/ha-combo-box.ts
+++ b/src/components/ha-combo-box.ts
@@ -64,8 +64,6 @@ export class HaComboBox extends LitElement {

  @property() public validationMessage?: string;

-  @property() public helper?: string;
-
  @property({ attribute: "error-message" }) public errorMessage?: string;

  @property({ type: Boolean }) public invalid?: boolean;
@@ -149,8 +147,6 @@ export class HaComboBox extends LitElement {
          .suffix=${html`<div style="width: 28px;"></div>`}
          .icon=${this.icon}
          .invalid=${this.invalid}
-          .helper=${this.helper}
-          helperPersistent
        >
          <slot name="icon" slot="leadingIcon"></slot>
        </ha-textfield>
@@ -250,18 +246,6 @@ export class HaComboBox extends LitElement {
        top: -7px;
        right: 36px;
      }
-
-      :host-context([style*="direction: rtl;"]) .toggle-button {
-        left: 12px;
-        right: auto;
-        top: -10px;
-      }
-      :host-context([style*="direction: rtl;"]) .clear-button {
-        --mdc-icon-size: 20px;
-        top: -7px;
-        left: 36px;
-        right: auto;
-      }
    `;
  }
 }
--- a/src/components/ha-date-input.ts
+++ b/src/components/ha-date-input.ts
@@ -39,15 +39,11 @@ export class HaDateInput extends LitElement {

  @property() public label?: string;

-  @property() public helper?: string;
-
  render() {
    return html`<ha-textfield
      .label=${this.label}
-      .helper=${this.helper}
      .disabled=${this.disabled}
      iconTrailing
-      helperPersistent
      @click=${this._openDialog}
      .value=${this.value
        ? formatDateNumeric(new Date(this.value), this.locale)
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -98,10 +98,6 @@ export class HaDialog extends DialogBase {
        margin-left: 40px;
        margin-right: 0px;
      }
-      :host-context([style*="direction: rtl;"]) .dialog-actions {
-        left: 0px !important;
-        right: auto !important;
-      }
    `,
  ];
 }
--- a/src/components/ha-fab.ts
+++ b/src/components/ha-fab.ts
@@ -1,6 +1,5 @@
 import { Fab } from "@material/mwc-fab";
 import { customElement } from "lit/decorators";
-import { css } from "lit";

@customElement("ha-fab")
 export class HaFab extends Fab {
@@ -8,17 +7,6 @@ export class HaFab extends Fab {
    super.firstUpdated(changedProperties);
    this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
  }
-
-  static override styles = Fab.styles.concat([
-    css`
-      :host-context([style*="direction: rtl;"])
-        .mdc-fab--extended
-        .mdc-fab__icon {
-        margin-left: 12px !important;
-        margin-right: calc(12px - 20px) !important;
-      }
-    `,
-  ]);
 }

 declare global {
--- a/src/components/ha-file-upload.ts
+++ b/src/components/ha-file-upload.ts
@@ -176,24 +176,10 @@ export class HaFileUpload extends LitElement {
        .mdc-text-field__icon--leading {
          margin-bottom: 12px;
        }
-        :host-context([style*="direction: rtl;"])
-          .mdc-text-field__icon--leading {
-          margin-right: 0px;
-        }
        .mdc-text-field--filled .mdc-floating-label--float-above {
          transform: scale(0.75);
          top: 8px;
        }
-        :host-context([style*="direction: rtl;"]) .mdc-floating-label {
-          left: initial;
-          right: 16px;
-        }
-        :host-context([style*="direction: rtl;"])
-          .mdc-text-field--filled
-          .mdc-floating-label {
-          left: initial;
-          right: 48px;
-        }
        .dragged:before {
          position: var(--layout-fit_-_position);
          top: var(--layout-fit_-_top);
--- a/src/components/ha-form/ha-form.ts
+++ b/src/components/ha-form/ha-form.ts
@@ -77,7 +77,7 @@ export class HaForm extends LitElement implements HaFormElement {

  protected render(): TemplateResult {
    return html`
-      <div class="root" part="root">
+      <div class="root">
        ${this.error && this.error.base
          ? html`
              <ha-alert alert-type="error">
@@ -173,6 +173,7 @@ export class HaForm extends LitElement implements HaFormElement {
  }

  static get styles(): CSSResultGroup {
+    // .root has overflow: auto to avoid margin collapse
    return css`
      .root {
        margin-bottom: -24px;
--- a/src/components/ha-icon-picker.ts
+++ b/src/components/ha-icon-picker.ts
@@ -31,8 +31,6 @@ export class HaIconPicker extends LitElement {

  @property() public label?: string;

-  @property() public helper?: string;
-
  @property() public placeholder?: string;

  @property() public fallbackPath?: string;
@@ -59,7 +57,6 @@ export class HaIconPicker extends LitElement {
        allow-custom-value
        .filteredItems=${iconItems}
        .label=${this.label}
-        .helper=${this.helper}
        .disabled=${this.disabled}
        .required=${this.required}
        .placeholder=${this.placeholder}
--- a/src/components/ha-input-helper-text.ts
+++ b/src/components/ha-input-helper-text.ts
@@ -1,25 +0,0 @@
-import { css, html, LitElement, TemplateResult } from "lit";
-import { customElement } from "lit/decorators";
-
-@customElement("ha-input-helper-text")
-class InputHelperText extends LitElement {
-  protected render(): TemplateResult {
-    return html`<slot></slot>`;
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-      color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
-      font-size: 0.75rem;
-      padding-left: 16px;
-      padding-right: 16px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-input-helper-text": InputHelperText;
-  }
-}
--- a/src/components/ha-labeled-slider.js
+++ b/src/components/ha-labeled-slider.js
@@ -46,14 +46,11 @@ class HaLabeledSlider extends PolymerElement {
          value="{{value}}"
        ></ha-slider>
      </div>
-      <template is="dom-if" if="[[helper]]">
-        <ha-input-helper-text>[[helper]]</ha-input-helper-text>
-      </template>
    `;
  }

  _getTitle() {
-    return `${this.caption}${this.caption && this.required ? " *" : ""}`;
+    return `${this.caption}${this.required ? "*" : ""}`;
  }

  static get properties() {
@@ -65,7 +62,6 @@ class HaLabeledSlider extends PolymerElement {
      max: Number,
      pin: Boolean,
      step: Number,
-      helper: String,

      extra: {
        type: Boolean,
--- a/src/components/ha-menu-button.ts
+++ b/src/components/ha-menu-button.ts
@@ -3,6 +3,7 @@ import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
+import { computeDomain } from "../common/entity/compute_domain";
 import { subscribeNotifications } from "../data/persistent_notification";
 import { HomeAssistant } from "../types";
 import "./ha-icon-button";
@@ -42,15 +43,18 @@ class HaMenuButton extends LitElement {

  protected render(): TemplateResult {
    const hasNotifications =
-      this._hasNotifications &&
-      (this.narrow || this.hass.dockedSidebar === "always_hidden");
+      (this.narrow || this.hass.dockedSidebar === "always_hidden") &&
+      (this._hasNotifications ||
+        Object.keys(this.hass.states).some(
+          (entityId) => computeDomain(entityId) === "configurator"
+        ));
    return html`
      <ha-icon-button
        .label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
        .path=${mdiMenu}
        @click=${this._toggleMenu}
      ></ha-icon-button>
-      ${hasNotifications ? html`<div class="dot"></div>` : ""}
+      ${hasNotifications ? html` <div class="dot"></div> ` : ""}
    `;
  }

--- a/src/components/ha-metric.ts
+++ b/src/components/ha-metric.ts
@@ -1,79 +0,0 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import { roundWithOneDecimal } from "../util/calculate";
-import "./ha-bar";
-import "./ha-settings-row";
-
-@customElement("ha-metric")
-class HaMetric extends LitElement {
-  @property({ type: Number }) public value!: number;
-
-  @property({ type: String }) public heading!: string;
-
-  @property({ type: String }) public tooltip?: string;
-
-  protected render(): TemplateResult {
-    const roundedValue = roundWithOneDecimal(this.value);
-    return html`
-      <ha-settings-row>
-        <span slot="heading"> ${this.heading} </span>
-        <div slot="description" .title=${this.tooltip ?? ""}>
-          <span class="value"> ${roundedValue} % </span>
-          <ha-bar
-            class=${classMap({
-              "target-warning": roundedValue > 50,
-              "target-critical": roundedValue > 85,
-            })}
-            .value=${this.value}
-          ></ha-bar>
-        </div>
-      </ha-settings-row>
-    `;
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      ha-settings-row {
-        padding: 0;
-        height: 54px;
-        width: 100%;
-      }
-      ha-settings-row > div[slot="description"] {
-        white-space: normal;
-        color: var(--secondary-text-color);
-        display: flex;
-        justify-content: space-between;
-      }
-      ha-bar {
-        --ha-bar-primary-color: var(
-          --metric-bar-ok-color,
-          var(--success-color)
-        );
-      }
-      .target-warning {
-        --ha-bar-primary-color: var(
-          --metric-bar-warning-color,
-          var(--warning-color)
-        );
-      }
-      .target-critical {
-        --ha-bar-primary-color: var(
-          --metric-bar-critical-color,
-          var(--error-color)
-        );
-      }
-      .value {
-        width: 48px;
-        padding-right: 4px;
-        flex-shrink: 0;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-metric": HaMetric;
-  }
-}
--- a/src/components/ha-navigation-list.ts
+++ b/src/components/ha-navigation-list.ts
@@ -1,97 +0,0 @@
-import "@material/mwc-list/mwc-list";
-import "@material/mwc-list/mwc-list-item";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
-import type { PageNavigation } from "../layouts/hass-tabs-subpage";
-import type { HomeAssistant } from "../types";
-import "./ha-clickable-list-item";
-import "./ha-icon-next";
-import "./ha-svg-icon";
-
-@customElement("ha-navigation-list")
-class HaNavigationList extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ type: Boolean }) public narrow!: boolean;
-
-  @property({ attribute: false }) public pages!: PageNavigation[];
-
-  @property({ type: Boolean }) public hasSecondary = false;
-
-  public render(): TemplateResult {
-    return html`
-      <mwc-list>
-        ${this.pages.map(
-          (page) => html`
-            <ha-clickable-list-item
-              graphic="avatar"
-              .twoline=${this.hasSecondary}
-              .hasMeta=${!this.narrow}
-              @click=${this._entryClicked}
-              href=${page.path}
-            >
-              <div
-                slot="graphic"
-                class=${page.iconColor ? "icon-background" : ""}
-                .style="background-color: ${page.iconColor || "undefined"}"
-              >
-                <ha-svg-icon .path=${page.iconPath}></ha-svg-icon>
-              </div>
-              <span>${page.name}</span>
-              ${this.hasSecondary
-                ? html`<span slot="secondary">${page.description}</span>`
-                : ""}
-              ${!this.narrow
-                ? html`<ha-icon-next slot="meta"></ha-icon-next>`
-                : ""}
-            </ha-clickable-list-item>
-          `
-        )}
-      </mwc-list>
-    `;
-  }
-
-  private _entryClicked(ev) {
-    ev.currentTarget.blur();
-  }
-
-  static styles: CSSResultGroup = css`
-    :host {
-      --mdc-list-vertical-padding: 0;
-    }
-    a {
-      text-decoration: none;
-      color: var(--primary-text-color);
-      position: relative;
-      display: block;
-      outline: 0;
-    }
-    ha-svg-icon,
-    ha-icon-next {
-      color: var(--secondary-text-color);
-      height: 24px;
-      width: 24px;
-      display: block;
-    }
-    ha-svg-icon {
-      padding: 8px;
-    }
-    .icon-background {
-      border-radius: 50%;
-    }
-    .icon-background ha-svg-icon {
-      color: #fff;
-    }
-    ha-clickable-list-item {
-      cursor: pointer;
-      font-size: var(--navigation-list-item-title-font-size);
-      padding: var(--navigation-list-item-padding) 0;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-navigation-list": HaNavigationList;
-  }
-}
--- a/src/components/ha-network.ts
+++ b/src/components/ha-network.ts
@@ -163,9 +163,6 @@ export class HaNetwork extends LitElement {

        ha-settings-row {
          padding: 0;
-          --paper-time-input-justify-content: flex-end;
-          --settings-row-content-display: contents;
-          --settings-row-prefix-display: contents;
        }

        span[slot="heading"],
--- a/src/components/ha-select.ts
+++ b/src/components/ha-select.ts
@@ -47,10 +47,6 @@ export class HaSelect extends SelectBase {
      .mdc-select__anchor {
        width: var(--ha-select-min-width, 200px);
      }
-      :host-context([style*="direction: rtl;"]) .mdc-floating-label {
-        right: 16px !important;
-        left: initial !important;
-      }
    `,
  ];
 }
--- a/src/components/ha-selector/ha-selector-addon.ts
+++ b/src/components/ha-selector/ha-selector-addon.ts
@@ -14,8 +14,6 @@ export class HaAddonSelector extends LitElement {

  @property() public label?: string;

-  @property() public helper?: string;
-
  @property({ type: Boolean }) public disabled = false;

  @property({ type: Boolean }) public required = true;
@@ -25,7 +23,6 @@ export class HaAddonSelector extends LitElement {
      .hass=${this.hass}
      .value=${this.value}
      .label=${this.label}
-      .helper=${this.helper}
      .disabled=${this.disabled}
      .required=${this.required}
      allow-custom-entity
--- a/src/components/ha-selector/ha-selector-area.ts
+++ b/src/components/ha-selector/ha-selector-area.ts
@@ -18,8 +18,6 @@ export class HaAreaSelector extends LitElement {

  @property() public label?: string;

-  @property() public helper?: string;
-
  @state() public _configEntries?: ConfigEntry[];

  @property({ type: Boolean }) public disabled = false;
@@ -49,7 +47,6 @@ export class HaAreaSelector extends LitElement {
          .hass=${this.hass}
          .value=${this.value}
          .label=${this.label}
-          .helper=${this.helper}
          no-add
          .deviceFilter=${this._filterDevices}
          .entityFilter=${this._filterEntities}
@@ -69,7 +66,6 @@ export class HaAreaSelector extends LitElement {
      <ha-areas-picker
        .hass=${this.hass}
        .value=${this.value}
-        .helper=${this.helper}
        .pickAreaLabel=${this.label}
        no-add
        .deviceFilter=${this._filterDevices}
--- a/src/components/ha-selector/ha-selector-attribute.ts
+++ b/src/components/ha-selector/ha-selector-attribute.ts
@@ -16,8 +16,6 @@ export class HaSelectorAttribute extends SubscribeMixin(LitElement) {

  @property() public label?: string;

-  @property() public helper?: string;
-
  @property({ type: Boolean }) public disabled = false;

  @property({ type: Boolean }) public required = true;
@@ -34,7 +32,6 @@ export class HaSelectorAttribute extends SubscribeMixin(LitElement) {
        this.context?.filter_entity}
        .value=${this.value}
        .label=${this.label}
-        .helper=${this.helper}
        .disabled=${this.disabled}
        .required=${this.required}
        allow-custom-value
--- a/src/components/ha-selector/ha-selector-boolean.ts
+++ b/src/components/ha-selector/ha-selector-boolean.ts
@@ -4,7 +4,6 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { HomeAssistant } from "../../types";
 import "../ha-formfield";
 import "../ha-switch";
-import "../ha-input-helper-text";

@customElement("ha-selector-boolean")
 export class HaBooleanSelector extends LitElement {
@@ -14,23 +13,16 @@ export class HaBooleanSelector extends LitElement {

  @property() public label?: string;

-  @property() public helper?: string;
-
  @property({ type: Boolean }) public disabled = false;

  protected render() {
-    return html`
-      <ha-formfield alignEnd spaceBetween .label=${this.label}>
-        <ha-switch
-          .checked=${this.value}
-          @change=${this._handleChange}
-          .disabled=${this.disabled}
-        ></ha-switch>
-      </ha-formfield>
-      ${this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
-        : ""}
-    `;
+    return html`<ha-formfield alignEnd spaceBetween .label=${this.label}>
+      <ha-switch
+        .checked=${this.value}
+        @change=${this._handleChange}
+        .disabled=${this.disabled}
+      ></ha-switch>
+    </ha-formfield>`;
  }

  private _handleChange(ev) {
@@ -43,10 +35,12 @@ export class HaBooleanSelector extends LitElement {

  static get styles(): CSSResultGroup {
    return css`
-      ha-formfield {
-        display: flex;
+      :host {
        height: 56px;
-        align-items: center;
+        display: flex;
+      }
+      ha-formfield {
+        width: 100%;
        --mdc-typography-body2-font-size: 1em;
      }
    `;
--- a/src/components/ha-selector/ha-selector-color-rgb.ts
+++ b/src/components/ha-selector/ha-selector-color-rgb.ts
@@ -16,8 +16,6 @@ export class HaColorRGBSelector extends LitElement {

  @property() public label?: string;

-  @property() public helper?: string;
-
  @property({ type: Boolean, reflect: true }) public disabled = false;

  @property({ type: Boolean }) public required = true;
@@ -26,11 +24,9 @@ export class HaColorRGBSelector extends LitElement {
    return html`
      <ha-textfield
        type="color"
-        helperPersistent
        .value=${this.value ? rgb2hex(this.value as any) : ""}
        .label=${this.label || ""}
        .required=${this.required}
-        .helper=${this.helper}
        .disalbled=${this.disabled}
        @change=${this._valueChanged}
      ></ha-textfield>
--- a/src/components/ha-selector/ha-selector-color-temp.ts
+++ b/src/components/ha-selector/ha-selector-color-temp.ts
@@ -15,8 +15,6 @@ export class HaColorTempSelector extends LitElement {

  @property() public label?: string;

-  @property() public helper?: string;
-
  @property({ type: Boolean, reflect: true }) public disabled = false;

  @property({ type: Boolean }) public required = true;
@@ -26,12 +24,11 @@ export class HaColorTempSelector extends LitElement {
      <ha-labeled-slider
        pin
        icon="hass:thermometer"
-        .caption=${this.label || ""}
+        .caption=${this.label}
        .min=${this.selector.color_temp.min_mireds ?? 153}
        .max=${this.selector.color_temp.max_mireds ?? 500}
        .value=${this.value}
        .disabled=${this.disabled}
-        .helper=${this.helper}
        .required=${this.required}
        @change=${this._valueChanged}
      ></ha-labeled-slider>
--- a/src/components/ha-selector/ha-selector-date.ts
+++ b/src/components/ha-selector/ha-selector-date.ts
@@ -14,8 +14,6 @@ export class HaDateSelector extends LitElement {

  @property() public label?: string;

-  @property() public helper?: string;
-
  @property({ type: Boolean, reflect: true }) public disabled = false;

  @property({ type: Boolean }) public required = true;
@@ -28,7 +26,6 @@ export class HaDateSelector extends LitElement {
        .disabled=${this.disabled}
        .value=${this.value}
        .required=${this.required}
-        .helper=${this.helper}
      >
      </ha-date-input>
    `;
--- a/src/components/ha-selector/ha-selector-datetime.ts
+++ b/src/components/ha-selector/ha-selector-datetime.ts
@@ -6,7 +6,6 @@ import type { HomeAssistant } from "../../types";
 import "../ha-date-input";
 import type { HaDateInput } from "../ha-date-input";
 import "../ha-time-input";
-import "../ha-input-helper-text";
 import type { HaTimeInput } from "../ha-time-input";

@customElement("ha-selector-datetime")
@@ -19,8 +18,6 @@ export class HaDateTimeSelector extends LitElement {

  @property() public label?: string;

-  @property() public helper?: string;
-
  @property({ type: Boolean, reflect: true }) public disabled = false;

  @property({ type: Boolean }) public required = true;
@@ -33,28 +30,23 @@ export class HaDateTimeSelector extends LitElement {
    const values = this.value?.split(" ");

    return html`
-      <div class="input">
-        <ha-date-input
-          .label=${this.label}
-          .locale=${this.hass.locale}
-          .disabled=${this.disabled}
-          .required=${this.required}
-          .value=${values?.[0]}
-          @value-changed=${this._valueChanged}
-        >
-        </ha-date-input>
-        <ha-time-input
-          enable-second
-          .value=${values?.[1] || "0:00:00"}
-          .locale=${this.hass.locale}
-          .disabled=${this.disabled}
-          .required=${this.required}
-          @value-changed=${this._valueChanged}
-        ></ha-time-input>
-      </div>
-      ${this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
-        : ""}
+      <ha-date-input
+        .label=${this.label}
+        .locale=${this.hass.locale}
+        .disabled=${this.disabled}
+        .required=${this.required}
+        .value=${values?.[0]}
+        @value-changed=${this._valueChanged}
+      >
+      </ha-date-input>
+      <ha-time-input
+        enable-second
+        .value=${values?.[1] || "0:00:00"}
+        .locale=${this.hass.locale}
+        .disabled=${this.disabled}
+        .required=${this.required}
+        @value-changed=${this._valueChanged}
+      ></ha-time-input>
    `;
  }

@@ -66,7 +58,7 @@ export class HaDateTimeSelector extends LitElement {
  }

  static styles = css`
-    .input {
+    :host {
      display: flex;
      align-items: center;
      flex-direction: row;
--- a/src/components/ha-selector/ha-selector-device.ts
+++ b/src/components/ha-selector/ha-selector-device.ts
@@ -17,8 +17,6 @@ export class HaDeviceSelector extends LitElement {

  @property() public label?: string;

-  @property() public helper?: string;
-
  @state() public _configEntries?: ConfigEntry[];

  @property({ type: Boolean }) public disabled = false;
@@ -45,7 +43,6 @@ export class HaDeviceSelector extends LitElement {
          .hass=${this.hass}
          .value=${this.value}
          .label=${this.label}
-          .helper=${this.helper}
          .deviceFilter=${this._filterDevices}
          .includeDeviceClasses=${this.selector.device.entity?.device_class
            ? [this.selector.device.entity.device_class]
@@ -65,15 +62,12 @@ export class HaDeviceSelector extends LitElement {
      <ha-devices-picker
        .hass=${this.hass}
        .value=${this.value}
-        .helper=${this.helper}
-        .deviceFilter=${this._filterDevices}
        .includeDeviceClasses=${this.selector.device.entity?.device_class
          ? [this.selector.device.entity.device_class]
          : undefined}
        .includeDomains=${this.selector.device.entity?.domain
          ? [this.selector.device.entity.domain]
          : undefined}
-        .disabled=${this.disabled}
        .required=${this.required}
      ></ha-devices-picker>
    `;
--- a/src/components/ha-selector/ha-selector-entity.ts
+++ b/src/components/ha-selector/ha-selector-entity.ts
@@ -23,8 +23,6 @@ export class HaEntitySelector extends LitElement {

  @property() public label?: string;

-  @property() public helper?: string;
-
  @property({ type: Boolean }) public disabled = false;

  @property({ type: Boolean }) public required = true;
@@ -35,7 +33,6 @@ export class HaEntitySelector extends LitElement {
        .hass=${this.hass}
        .value=${this.value}
        .label=${this.label}
-        .helper=${this.helper}
        .includeEntities=${this.selector.entity.include_entities}
        .excludeEntities=${this.selector.entity.exclude_entities}
        .entityFilter=${this._filterEntities}
@@ -50,11 +47,9 @@ export class HaEntitySelector extends LitElement {
      <ha-entities-picker
        .hass=${this.hass}
        .value=${this.value}
-        .helper=${this.helper}
+        .entityFilter=${this._filterEntities}
        .includeEntities=${this.selector.entity.include_entities}
        .excludeEntities=${this.selector.entity.exclude_entities}
-        .entityFilter=${this._filterEntities}
-        .disabled=${this.disabled}
        .required=${this.required}
      ></ha-entities-picker>
    `;
--- a/src/components/ha-selector/ha-selector-icon.ts
+++ b/src/components/ha-selector/ha-selector-icon.ts
@@ -15,8 +15,6 @@ export class HaIconSelector extends LitElement {

  @property() public label?: string;

-  @property() public helper?: string;
-
  @property({ type: Boolean, reflect: true }) public disabled = false;

  @property({ type: Boolean }) public required = true;
@@ -28,7 +26,6 @@ export class HaIconSelector extends LitElement {
        .value=${this.value}
        .required=${this.required}
        .disabled=${this.disabled}
-        .helper=${this.helper}
        .fallbackPath=${this.selector.icon.fallbackPath}
        .placeholder=${this.selector.icon.placeholder}
        @value-changed=${this._valueChanged}
--- a/src/components/ha-selector/ha-selector-location.ts
+++ b/src/components/ha-selector/ha-selector-location.ts
@@ -1,4 +1,4 @@
-import { css, html, LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -20,8 +20,6 @@ export class HaLocationSelector extends LitElement {

  @property() public label?: string;

-  @property() public helper?: string;
-
  @property({ type: Boolean, reflect: true }) public disabled = false;

  protected render() {
@@ -29,7 +27,6 @@ export class HaLocationSelector extends LitElement {
      <ha-locations-editor
        class="flex"
        .hass=${this.hass}
-        .helper=${this.helper}
        .locations=${this._location(this.selector, this.value)}
        @location-updated=${this._locationChanged}
        @radius-updated=${this._radiusChanged}
@@ -76,13 +73,6 @@ export class HaLocationSelector extends LitElement {
    const radius = ev.detail.radius;
    fireEvent(this, "value-changed", { value: { ...this.value, radius } });
  }
-
-  static styles = css`
-    :host {
-      display: block;
-      height: 400px;
-    }
-  `;
 }

 declare global {
--- a/src/components/ha-selector/ha-selector-media.ts
+++ b/src/components/ha-selector/ha-selector-media.ts
@@ -33,8 +33,6 @@ export class HaMediaSelector extends LitElement {

  @property() public label?: string;

-  @property() public helper?: string;
-
  @property({ type: Boolean, reflect: true }) public disabled = false;

  @property({ type: Boolean, reflect: true }) public required = true;
@@ -88,7 +86,6 @@ export class HaMediaSelector extends LitElement {
        .label=${this.label ||
        this.hass.localize("ui.components.selectors.media.pick_media_player")}
        .disabled=${this.disabled}
-        .helper=${this.helper}
        .required=${this.required}
        include-domains='["media_player"]'
        allow-custom-entity
--- a/src/components/ha-selector/ha-selector-number.ts
+++ b/src/components/ha-selector/ha-selector-number.ts
@@ -6,7 +6,6 @@ import { NumberSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
 import "../ha-slider";
 import "../ha-textfield";
-import "../ha-input-helper-text";

@customElement("ha-selector-number")
 export class HaNumberSelector extends LitElement {
@@ -27,13 +26,8 @@ export class HaNumberSelector extends LitElement {
  @property({ type: Boolean }) public disabled = false;

  protected render() {
-    const isBox = this.selector.number.mode === "box";
-
-    return html`
-      ${this.label ? html`${this.label}${this.required ? " *" : ""}` : ""}
-      <div class="input">
-        ${!isBox
-          ? html`<ha-slider
+    return html`${this.selector.number.mode !== "box"
+        ? html`${this.label}${this.required ? "*" : ""}<ha-slider
              .min=${this.selector.number.min}
              .max=${this.selector.number.max}
              .value=${this._value}
@@ -45,33 +39,28 @@ export class HaNumberSelector extends LitElement {
              @change=${this._handleSliderChange}
            >
            </ha-slider>`
-          : ""}
-        <ha-textfield
-          inputMode="numeric"
-          pattern="[0-9]+([\\.][0-9]+)?"
-          .label=${this.selector.number.mode !== "box" ? undefined : this.label}
-          .placeholder=${this.placeholder}
-          class=${classMap({ single: this.selector.number.mode === "box" })}
-          .min=${this.selector.number.min}
-          .max=${this.selector.number.max}
-          .value=${this.value ?? ""}
-          .step=${this.selector.number.step ?? 1}
-          helperPersistent
-          .helper=${isBox ? this.helper : undefined}
-          .disabled=${this.disabled}
-          .required=${this.required}
-          .suffix=${this.selector.number.unit_of_measurement}
-          type="number"
-          autoValidate
-          ?no-spinner=${this.selector.number.mode !== "box"}
-          @input=${this._handleInputChange}
-        >
-        </ha-textfield>
-      </div>
-      ${!isBox && this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
        : ""}
-    `;
+      <ha-textfield
+        inputMode="numeric"
+        pattern="[0-9]+([\\.][0-9]+)?"
+        .label=${this.selector.number.mode !== "box" ? undefined : this.label}
+        .placeholder=${this.placeholder}
+        class=${classMap({ single: this.selector.number.mode === "box" })}
+        .min=${this.selector.number.min}
+        .max=${this.selector.number.max}
+        .value=${this.value ?? ""}
+        .step=${this.selector.number.step ?? 1}
+        helperPersistent
+        .helper=${this.helper}
+        .disabled=${this.disabled}
+        .required=${this.required}
+        .suffix=${this.selector.number.unit_of_measurement}
+        type="number"
+        autoValidate
+        ?no-spinner=${this.selector.number.mode !== "box"}
+        @input=${this._handleInputChange}
+      >
+      </ha-textfield>`;
  }

  private get _value() {
@@ -103,11 +92,10 @@ export class HaNumberSelector extends LitElement {

  static get styles(): CSSResultGroup {
    return css`
-      .input {
+      :host {
        display: flex;
        justify-content: space-between;
        align-items: center;
-        direction: ltr;
      }
      ha-slider {
        flex: 1;
--- a/src/components/ha-selector/ha-selector-object.ts
+++ b/src/components/ha-selector/ha-selector-object.ts
@@ -3,7 +3,6 @@ import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { HomeAssistant } from "../../types";
 import "../ha-yaml-editor";
-import "../ha-input-helper-text";

@customElement("ha-selector-object")
 export class HaObjectSelector extends LitElement {
@@ -13,8 +12,6 @@ export class HaObjectSelector extends LitElement {

  @property() public label?: string;

-  @property() public helper?: string;
-
  @property() public placeholder?: string;

  @property({ type: Boolean }) public disabled = false;
@@ -23,17 +20,13 @@ export class HaObjectSelector extends LitElement {

  protected render() {
    return html`<ha-yaml-editor
-        .hass=${this.hass}
-        .readonly=${this.disabled}
-        .label=${this.label}
-        .required=${this.required}
-        .placeholder=${this.placeholder}
-        .defaultValue=${this.value}
-        @value-changed=${this._handleChange}
-      ></ha-yaml-editor>
-      ${this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
-        : ""} `;
+      .hass=${this.hass}
+      .readonly=${this.disabled}
+      .required=${this.required}
+      .placeholder=${this.placeholder}
+      .defaultValue=${this.value}
+      @value-changed=${this._handleChange}
+    ></ha-yaml-editor>`;
  }

  private _handleChange(ev) {
--- a/src/components/ha-selector/ha-selector-select.ts
+++ b/src/components/ha-selector/ha-selector-select.ts
@@ -58,7 +58,6 @@ export class HaSelectSelector extends LitElement {
              `
            )}
          </div>
-          ${this._renderHelper()}
        `;
      }

@@ -77,7 +76,6 @@ export class HaSelectSelector extends LitElement {
            `
          )}
        </div>
-        ${this._renderHelper()}
      `;
    }

@@ -109,7 +107,6 @@ export class HaSelectSelector extends LitElement {
          item-label-path="label"
          .hass=${this.hass}
          .label=${this.label}
-          .helper=${this.helper}
          .disabled=${this.disabled}
          .required=${this.required && !value.length}
          .value=${this._filter}
@@ -134,7 +131,6 @@ export class HaSelectSelector extends LitElement {
          item-label-path="label"
          .hass=${this.hass}
          .label=${this.label}
-          .helper=${this.helper}
          .disabled=${this.disabled}
          .required=${this.required}
          .items=${options}
@@ -165,12 +161,6 @@ export class HaSelectSelector extends LitElement {
    `;
  }

-  private _renderHelper() {
-    return this.helper
-      ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
-      : "";
-  }
-
  private get _mode(): "list" | "dropdown" {
    return (
      this.selector.select.mode ||
--- a/src/components/ha-selector/ha-selector-target.ts
+++ b/src/components/ha-selector/ha-selector-target.ts
@@ -26,8 +26,6 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {

  @property() public label?: string;

-  @property() public helper?: string;
-
  @state() private _entityPlaformLookup?: Record<string, string>;

  @state() private _configEntries?: ConfigEntry[];
@@ -66,7 +64,6 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {
    return html`<ha-target-picker
      .hass=${this.hass}
      .value=${this.value}
-      .helper=${this.helper}
      .deviceFilter=${this._filterDevices}
      .entityRegFilter=${this._filterRegEntities}
      .entityFilter=${this._filterEntities}
--- a/src/components/ha-selector/ha-selector-template.ts
+++ b/src/components/ha-selector/ha-selector-template.ts
@@ -1,56 +0,0 @@
-import { html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
-import { HomeAssistant } from "../../types";
-import "../ha-code-editor";
-import "../ha-input-helper-text";
-
-@customElement("ha-selector-template")
-export class HaTemplateSelector extends LitElement {
-  @property() public hass!: HomeAssistant;
-
-  @property() public value?: string;
-
-  @property() public label?: string;
-
-  @property() public helper?: string;
-
-  @property({ type: Boolean }) public disabled = false;
-
-  @property({ type: Boolean }) public required = true;
-
-  protected render() {
-    return html`
-      ${this.label
-        ? html`<p>${this.label}${this.required ? " *" : ""}</p>`
-        : ""}
-      <ha-code-editor
-        mode="jinja2"
-        .hass=${this.hass}
-        .value=${this.value}
-        .readOnly=${this.disabled}
-        autofocus
-        autocomplete-entities
-        @value-changed=${this._handleChange}
-        dir="ltr"
-      ></ha-code-editor>
-      ${this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
-        : ""}
-    `;
-  }
-
-  private _handleChange(ev) {
-    const value = ev.target.value;
-    if (this.value === value) {
-      return;
-    }
-    fireEvent(this, "value-changed", { value });
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-selector-template": HaTemplateSelector;
-  }
-}
--- a/src/components/ha-selector/ha-selector-time.ts
+++ b/src/components/ha-selector/ha-selector-time.ts
@@ -14,8 +14,6 @@ export class HaTimeSelector extends LitElement {

  @property() public label?: string;

-  @property() public helper?: string;
-
  @property({ type: Boolean }) public disabled = false;

  @property({ type: Boolean }) public required = false;
@@ -27,7 +25,6 @@ export class HaTimeSelector extends LitElement {
        .locale=${this.hass.locale}
        .disabled=${this.disabled}
        .required=${this.required}
-        .helper=${this.helper}
        .label=${this.label}
        enable-second
      ></ha-time-input>
--- a/src/components/ha-selector/ha-selector.ts
+++ b/src/components/ha-selector/ha-selector.ts
@@ -18,7 +18,6 @@ import "./ha-selector-number";
 import "./ha-selector-object";
 import "./ha-selector-select";
 import "./ha-selector-target";
-import "./ha-selector-template";
 import "./ha-selector-text";
 import "./ha-selector-time";
 import "./ha-selector-icon";
--- a/src/components/ha-service-control.ts
+++ b/src/components/ha-service-control.ts
@@ -472,7 +472,6 @@ export class HaServiceControl extends LitElement {
      ha-settings-row {
        --paper-time-input-justify-content: flex-end;
        --settings-row-content-width: 100%;
-        --settings-row-prefix-display: contents;
        border-top: var(
          --service-control-items-border-top,
          1px solid var(--divider-color)
--- a/src/components/ha-settings-row.ts
+++ b/src/components/ha-settings-row.ts
@@ -47,7 +47,7 @@ export class HaSettingsRow extends LitElement {
        display: contents;
      }
      :host(:not([narrow])) .content {
-        display: var(--settings-row-content-display, flex);
+        display: flex;
        justify-content: flex-end;
        flex: 1;
        padding: 16px 0;
@@ -68,7 +68,7 @@ export class HaSettingsRow extends LitElement {
        white-space: normal;
      }
      .prefix-wrap {
-        display: var(--settings-row-prefix-display);
+        display: contents;
      }
      :host([narrow]) .prefix-wrap {
        display: flex;
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -36,9 +36,10 @@ import memoizeOne from "memoize-one";
 import { LocalStorage } from "../common/decorators/local-storage";
 import { fireEvent } from "../common/dom/fire_event";
 import { toggleAttribute } from "../common/dom/toggle_attribute";
+import { computeDomain } from "../common/entity/compute_domain";
+import { computeStateDomain } from "../common/entity/compute_state_domain";
 import { stringCompare } from "../common/string/compare";
 import { computeRTL } from "../common/util/compute_rtl";
-import { throttle } from "../common/util/throttle";
 import { ActionHandlerDetail } from "../data/lovelace";
 import {
  PersistentNotification,
@@ -293,7 +294,11 @@ class HaSidebar extends LitElement {
      toggleAttribute(this, "rtl", computeRTL(this.hass));
    }

-    this._calculateCounts();
+    this._updatesCount = Object.values(this.hass.states).filter(
+      (entity) =>
+        computeStateDomain(entity) === "update" &&
+        updateCanInstall(entity as UpdateEntity)
+    ).length;

    if (!SUPPORT_SCROLL_IF_NEEDED) {
      return;
@@ -307,21 +312,6 @@ class HaSidebar extends LitElement {
    }
  }

-  private _calculateCounts = throttle(() => {
-    let updateCount = 0;
-
-    for (const entityId of Object.keys(this.hass.states)) {
-      if (
-        entityId.startsWith("update.") &&
-        updateCanInstall(this.hass.states[entityId] as UpdateEntity)
-      ) {
-        updateCount++;
-      }
-    }
-
-    this._updatesCount = updateCount;
-  }, 5000);
-
  private _renderHeader() {
    return html`<div
      class="menu"
@@ -529,9 +519,14 @@ class HaSidebar extends LitElement {
  }

  private _renderNotifications() {
-    const notificationCount = this._notifications
+    let notificationCount = this._notifications
      ? this._notifications.length
      : 0;
+    for (const entityId in this.hass.states) {
+      if (computeDomain(entityId) === "configurator") {
+        notificationCount++;
+      }
+    }

    return html`<div
      class="notifications-container"
@@ -1039,8 +1034,6 @@ class HaSidebar extends LitElement {

        .notification-badge,
        .configuration-badge {
-          left: calc(var(--app-drawer-width) - 42px);
-          position: absolute;
          min-width: 20px;
          box-sizing: border-box;
          border-radius: 50%;
@@ -1051,6 +1044,9 @@ class HaSidebar extends LitElement {
          padding: 0px 6px;
          color: var(--text-accent-color, var(--text-primary-color));
        }
+        .configuration-badge {
+          background-color: var(--primary-color);
+        }
        ha-svg-icon + .notification-badge,
        ha-svg-icon + .configuration-badge {
          position: absolute;
--- a/src/components/ha-target-picker.ts
+++ b/src/components/ha-target-picker.ts
@@ -43,7 +43,6 @@ import type { HaEntityPickerEntityFilterFunc } from "./entity/ha-entity-picker";
 import "./ha-area-picker";
 import "./ha-icon-button";
 import "./ha-svg-icon";
-import "./ha-input-helper-text";

@customElement("ha-target-picker")
 export class HaTargetPicker extends SubscribeMixin(LitElement) {
@@ -53,8 +52,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {

  @property() public label?: string;

-  @property() public helper?: string;
-
  /**
   * Show only targets with entities from specific domains.
   * @type {Array}
@@ -216,11 +213,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
            </span>
          </span>
        </div>
-      </div>
-
-      ${this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
-        : ""} `;
+      </div>`;
  }

  private async _showPicker(ev) {
@@ -616,10 +609,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
        opacity: var(--light-disabled-opacity);
        pointer-events: none;
      }
-      :host-context([style*="direction: rtl;"]) .mdc-chip__icon {
-        margin-right: -14px !important;
-        margin-left: 4px !important;
-      }
    `;
  }
 }
--- a/src/components/ha-textfield.ts
+++ b/src/components/ha-textfield.ts
@@ -91,19 +91,6 @@ export class HaTextField extends TextFieldBase {
      .mdc-text-field {
        overflow: var(--text-field-overflow);
      }
-
-      :host-context([style*="direction: rtl;"]) .mdc-floating-label {
-        right: 10px !important;
-        left: initial !important;
-      }
-
-      :host-context([style*="direction: rtl;"])
-        .mdc-text-field--with-leading-icon.mdc-text-field--filled
-        .mdc-floating-label {
-        max-width: calc(100% - 48px);
-        right: 48px !important;
-        left: initial !important;
-      }
    `,
  ];
 }
--- a/src/components/ha-time-input.ts
+++ b/src/components/ha-time-input.ts
@@ -14,8 +14,6 @@ export class HaTimeInput extends LitElement {

  @property() public label?: string;

-  @property() public helper?: string;
-
  @property({ type: Boolean }) public disabled = false;

  @property({ type: Boolean }) public required = false;
@@ -48,7 +46,6 @@ export class HaTimeInput extends LitElement {
        @value-changed=${this._timeChanged}
        .enableSecond=${this.enableSecond}
        .required=${this.required}
-        .helper=${this.helper}
      ></ha-base-time-input>
    `;
  }
--- a/src/components/ha-tip.ts
+++ b/src/components/ha-tip.ts
@@ -1,38 +0,0 @@
-import { mdiLightbulbOutline } from "@mdi/js";
-import { css, html, LitElement } from "lit";
-import { customElement } from "lit/decorators";
-
-import "./ha-svg-icon";
-
-@customElement("ha-tip")
-class HaTip extends LitElement {
-  public render() {
-    return html`
-      <ha-svg-icon .path=${mdiLightbulbOutline}></ha-svg-icon>
-      <span class="prefix">Tip!</span>
-      <span class="text"><slot></slot></span>
-    `;
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-      text-align: center;
-    }
-
-    .text {
-      margin-left: 2px;
-      color: var(--secondary-text-color);
-    }
-
-    .prefix {
-      font-weight: 500;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-tip": HaTip;
-  }
-}
--- a/src/components/ha-yaml-editor.ts
+++ b/src/components/ha-yaml-editor.ts
@@ -61,9 +61,7 @@ export class HaYamlEditor extends LitElement {
      return html``;
    }
    return html`
-      ${this.label
-        ? html`<p>${this.label}${this.required ? " *" : ""}</p>`
-        : ""}
+      ${this.label ? html`<p>${this.label}${this.required ? "*" : ""}</p>` : ""}
      <ha-code-editor
        .hass=${this.hass}
        .value=${this._yaml}
--- a/src/components/map/ha-locations-editor.ts
+++ b/src/components/map/ha-locations-editor.ts
@@ -19,7 +19,6 @@ import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
 import type { LeafletModuleType } from "../../common/dom/setup-leaflet-map";
 import type { HomeAssistant } from "../../types";
-import "../ha-input-helper-text";
 import "./ha-map";
 import type { HaMap } from "./ha-map";

@@ -51,8 +50,6 @@ export class HaLocationsEditor extends LitElement {

  @property({ attribute: false }) public locations?: MarkerLocation[];

-  @property() public helper?: string;
-
  @property({ type: Boolean }) public autoFit = false;

  @property({ type: Number }) public zoom = 16;
@@ -105,18 +102,13 @@ export class HaLocationsEditor extends LitElement {
  }

  protected render(): TemplateResult {
-    return html`
-      <ha-map
-        .hass=${this.hass}
-        .layers=${this._getLayers(this._circles, this._locationMarkers)}
-        .zoom=${this.zoom}
-        .autoFit=${this.autoFit}
-        .darkMode=${this.darkMode}
-      ></ha-map>
-      ${this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
-        : ""}
-    `;
+    return html`<ha-map
+      .hass=${this.hass}
+      .layers=${this._getLayers(this._circles, this._locationMarkers)}
+      .zoom=${this.zoom}
+      .autoFit=${this.autoFit}
+      .darkMode=${this.darkMode}
+    ></ha-map>`;
  }

  private _getLayers = memoizeOne(
@@ -295,8 +287,11 @@ export class HaLocationsEditor extends LitElement {

  static get styles(): CSSResultGroup {
    return css`
-      ha-map {
+      :host {
        display: block;
+        height: 300px;
+      }
+      ha-map {
        height: 100%;
      }
    `;
--- a/src/components/media-player/dialog-media-player-browse.ts
+++ b/src/components/media-player/dialog-media-player-browse.ts
@@ -151,7 +151,6 @@ class DialogMediaPlayerBrowse extends LitElement {

        ha-media-player-browse {
          --media-browser-max-height: calc(100vh - 65px);
-          height: calc(100vh - 65px);
        }

        @media (min-width: 800px) {
@@ -164,7 +163,6 @@ class DialogMediaPlayerBrowse extends LitElement {
          ha-media-player-browse {
            position: initial;
            --media-browser-max-height: 100vh - 137px;
-            height: 100vh - 137px;
            width: 700px;
          }
        }
--- a/src/components/media-player/ha-media-player-browse.ts
+++ b/src/components/media-player/ha-media-player-browse.ts
@@ -3,8 +3,6 @@ import "@material/mwc-list/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import { mdiArrowUpRight, mdiPlay, mdiPlus } from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
-import { grid } from "@lit-labs/virtualizer/layouts/grid";
-import "@lit-labs/virtualizer";
 import {
  css,
  CSSResultGroup,
@@ -18,13 +16,16 @@ import {
  eventOptions,
  property,
  query,
+  queryAll,
  state,
 } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
-import { until } from "lit/directives/until";
+import { ifDefined } from "lit/directives/if-defined";
+import { styleMap } from "lit/directives/style-map";
 import { fireEvent } from "../../common/dom/fire_event";
 import { computeRTLDirection } from "../../common/util/compute_rtl";
 import { debounce } from "../../common/util/debounce";
+import { getSignedPath } from "../../data/auth";
 import type { MediaPlayerItem } from "../../data/media-player";
 import {
  browseMediaPlayer,
@@ -39,18 +40,18 @@ import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import { installResizeObserver } from "../../panels/lovelace/common/install-resize-observer";
 import { haStyle } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
+import { brandsUrl, extractDomainFromBrandUrl } from "../../util/brands-url";
 import { documentationUrl } from "../../util/documentation-url";
 import "../entity/ha-entity-picker";
 import "../ha-button-menu";
 import "../ha-card";
+import type { HaCard } from "../ha-card";
 import "../ha-circular-progress";
 import "../ha-fab";
 import "../ha-icon-button";
 import "../ha-svg-icon";
 import "./ha-browse-media-tts";
 import type { TtsMediaPickedEvent } from "./ha-browse-media-tts";
-import { getSignedPath } from "../../data/auth";
-import { brandsUrl, extractDomainFromBrandUrl } from "../../util/brands-url";

 declare global {
  interface HASSDomEvents {
@@ -100,6 +101,8 @@ export class HaMediaPlayerBrowse extends LitElement {

  @query(".content") private _content?: HTMLDivElement;

+  @queryAll(".lazythumbnail") private _thumbnails?: HaCard[];
+
  private _headerOffsetHeight = 0;

  private _resizeObserver?: ResizeObserver;
@@ -145,6 +148,326 @@ export class HaMediaPlayerBrowse extends LitElement {
    }
  }

+  protected render(): TemplateResult {
+    if (this._error) {
+      return html`
+        <div class="container">${this._renderError(this._error)}</div>
+      `;
+    }
+
+    if (!this._currentItem) {
+      return html`<ha-circular-progress active></ha-circular-progress>`;
+    }
+
+    const currentItem = this._currentItem;
+
+    const subtitle = this.hass.localize(
+      `ui.components.media-browser.class.${currentItem.media_class}`
+    );
+    const children = currentItem.children || [];
+    const mediaClass = MediaClassBrowserSettings[currentItem.media_class];
+    const childrenMediaClass = currentItem.children_media_class
+      ? MediaClassBrowserSettings[currentItem.children_media_class]
+      : MediaClassBrowserSettings.directory;
+
+    return html`
+              ${
+                currentItem.can_play
+                  ? html` <div
+                      class="header ${classMap({
+                        "no-img": !currentItem.thumbnail,
+                        "no-dialog": !this.dialog,
+                      })}"
+                      @transitionend=${this._setHeaderHeight}
+                    >
+                      <div class="header-content">
+                        ${currentItem.thumbnail
+                          ? html`
+                              <div
+                                class="img"
+                                style=${styleMap({
+                                  backgroundImage: currentItem.thumbnail
+                                    ? `url(${currentItem.thumbnail})`
+                                    : "none",
+                                })}
+                              >
+                                ${this._narrow && currentItem?.can_play
+                                  ? html`
+                                      <ha-fab
+                                        mini
+                                        .item=${currentItem}
+                                        @click=${this._actionClicked}
+                                      >
+                                        <ha-svg-icon
+                                          slot="icon"
+                                          .label=${this.hass.localize(
+                                            `ui.components.media-browser.${this.action}-media`
+                                          )}
+                                          .path=${this.action === "play"
+                                            ? mdiPlay
+                                            : mdiPlus}
+                                        ></ha-svg-icon>
+                                        ${this.hass.localize(
+                                          `ui.components.media-browser.${this.action}`
+                                        )}
+                                      </ha-fab>
+                                    `
+                                  : ""}
+                              </div>
+                            `
+                          : html``}
+                        <div class="header-info">
+                          <div class="breadcrumb">
+                            <h1 class="title">${currentItem.title}</h1>
+                            ${subtitle
+                              ? html` <h2 class="subtitle">${subtitle}</h2> `
+                              : ""}
+                          </div>
+                          ${currentItem.can_play &&
+                          (!currentItem.thumbnail || !this._narrow)
+                            ? html`
+                                <mwc-button
+                                  raised
+                                  .item=${currentItem}
+                                  @click=${this._actionClicked}
+                                >
+                                  <ha-svg-icon
+                                    .label=${this.hass.localize(
+                                      `ui.components.media-browser.${this.action}-media`
+                                    )}
+                                    .path=${this.action === "play"
+                                      ? mdiPlay
+                                      : mdiPlus}
+                                  ></ha-svg-icon>
+                                  ${this.hass.localize(
+                                    `ui.components.media-browser.${this.action}`
+                                  )}
+                                </mwc-button>
+                              `
+                            : ""}
+                        </div>
+                      </div>
+                    </div>`
+                  : ""
+              }
+          <div
+            class="content"
+            @scroll=${this._scroll}
+            @touchmove=${this._scroll}
+          >
+            ${
+              this._error
+                ? html`
+                    <div class="container">
+                      ${this._renderError(this._error)}
+                    </div>
+                  `
+                : isTTSMediaSource(currentItem.media_content_id)
+                ? html`
+                    <ha-browse-media-tts
+                      .item=${currentItem}
+                      .hass=${this.hass}
+                      .action=${this.action}
+                      @tts-picked=${this._ttsPicked}
+                    ></ha-browse-media-tts>
+                  `
+                : !children.length && !currentItem.not_shown
+                ? html`
+                    <div class="container no-items">
+                      ${currentItem.media_content_id ===
+                      "media-source://media_source/local/."
+                        ? html`
+                            <div class="highlight-add-button">
+                              <span>
+                                <ha-svg-icon
+                                  .path=${mdiArrowUpRight}
+                                ></ha-svg-icon>
+                              </span>
+                              <span>
+                                ${this.hass.localize(
+                                  "ui.components.media-browser.file_management.highlight_button"
+                                )}
+                              </span>
+                            </div>
+                          `
+                        : this.hass.localize(
+                            "ui.components.media-browser.no_items"
+                          )}
+                    </div>
+                  `
+                : childrenMediaClass.layout === "grid"
+                ? html`
+                    <div
+                      class="children ${classMap({
+                        portrait:
+                          childrenMediaClass.thumbnail_ratio === "portrait",
+                      })}"
+                    >
+                      ${children.map(
+                        (child) => html`
+                          <div
+                            class="child"
+                            .item=${child}
+                            @click=${this._childClicked}
+                          >
+                            <ha-card outlined>
+                              <div class="thumbnail">
+                                ${child.thumbnail
+                                  ? html`
+                                      <div
+                                        class="${["app", "directory"].includes(
+                                          child.media_class
+                                        )
+                                          ? "centered-image"
+                                          : ""} image lazythumbnail"
+                                        data-src=${child.thumbnail}
+                                      ></div>
+                                    `
+                                  : html`
+                                      <div class="icon-holder image">
+                                        <ha-svg-icon
+                                          class="folder"
+                                          .path=${MediaClassBrowserSettings[
+                                            child.media_class === "directory"
+                                              ? child.children_media_class ||
+                                                child.media_class
+                                              : child.media_class
+                                          ].icon}
+                                        ></ha-svg-icon>
+                                      </div>
+                                    `}
+                                ${child.can_play
+                                  ? html`
+                                      <ha-icon-button
+                                        class="play ${classMap({
+                                          can_expand: child.can_expand,
+                                        })}"
+                                        .item=${child}
+                                        .label=${this.hass.localize(
+                                          `ui.components.media-browser.${this.action}-media`
+                                        )}
+                                        .path=${this.action === "play"
+                                          ? mdiPlay
+                                          : mdiPlus}
+                                        @click=${this._actionClicked}
+                                      ></ha-icon-button>
+                                    `
+                                  : ""}
+                              </div>
+                              <div class="title">
+                                ${child.title}
+                                <paper-tooltip
+                                  fitToVisibleBounds
+                                  position="top"
+                                  offset="4"
+                                  >${child.title}</paper-tooltip
+                                >
+                              </div>
+                            </ha-card>
+                          </div>
+                        `
+                      )}
+                      ${currentItem.not_shown
+                        ? html`
+                            <div class="grid not-shown">
+                              <div class="title">
+                                ${this.hass.localize(
+                                  "ui.components.media-browser.not_shown",
+                                  { count: currentItem.not_shown }
+                                )}
+                              </div>
+                            </div>
+                          `
+                        : ""}
+                    </div>
+                  `
+                : html`
+                    <mwc-list>
+                      ${children.map(
+                        (child) => html`
+                          <mwc-list-item
+                            @click=${this._childClicked}
+                            .item=${child}
+                            .graphic=${mediaClass.show_list_images
+                              ? "medium"
+                              : "avatar"}
+                            dir=${computeRTLDirection(this.hass)}
+                          >
+                            <div
+                              class=${classMap({
+                                graphic: true,
+                                lazythumbnail:
+                                  mediaClass.show_list_images === true,
+                              })}
+                              data-src=${ifDefined(
+                                mediaClass.show_list_images && child.thumbnail
+                                  ? child.thumbnail
+                                  : undefined
+                              )}
+                              slot="graphic"
+                            >
+                              <ha-icon-button
+                                class="play ${classMap({
+                                  show:
+                                    !mediaClass.show_list_images ||
+                                    !child.thumbnail,
+                                })}"
+                                .item=${child}
+                                .label=${this.hass.localize(
+                                  `ui.components.media-browser.${this.action}-media`
+                                )}
+                                .path=${this.action === "play"
+                                  ? mdiPlay
+                                  : mdiPlus}
+                                @click=${this._actionClicked}
+                              ></ha-icon-button>
+                            </div>
+                            <span class="title">${child.title}</span>
+                          </mwc-list-item>
+                          <li divider role="separator"></li>
+                        `
+                      )}
+                      ${currentItem.not_shown
+                        ? html`
+                            <mwc-list-item
+                              noninteractive
+                              class="not-shown"
+                              .graphic=${mediaClass.show_list_images
+                                ? "medium"
+                                : "avatar"}
+                              dir=${computeRTLDirection(this.hass)}
+                            >
+                              <span class="title">
+                                ${this.hass.localize(
+                                  "ui.components.media-browser.not_shown",
+                                  { count: currentItem.not_shown }
+                                )}
+                              </span>
+                            </mwc-list-item>
+                          `
+                        : ""}
+                    </mwc-list>
+                  `
+            }
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  protected firstUpdated(): void {
+    this._measureCard();
+    this._attachResizeObserver();
+  }
+
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    if (changedProps.size > 1 || !changedProps.has("hass")) {
+      return true;
+    }
+    const oldHass = changedProps.get("hass") as this["hass"];
+    return oldHass === undefined || oldHass.localize !== this.hass.localize;
+  }
+
  public willUpdate(changedProps: PropertyValues<this>): void {
    super.willUpdate(changedProps);

@@ -260,19 +583,6 @@ export class HaMediaPlayerBrowse extends LitElement {
    }
  }

-  protected shouldUpdate(changedProps: PropertyValues): boolean {
-    if (changedProps.size > 1 || !changedProps.has("hass")) {
-      return true;
-    }
-    const oldHass = changedProps.get("hass") as this["hass"];
-    return oldHass === undefined || oldHass.localize !== this.hass.localize;
-  }
-
-  protected firstUpdated(): void {
-    this._measureCard();
-    this._attachResizeObserver();
-  }
-
  protected updated(changedProps: PropertyValues): void {
    super.updated(changedProps);

@@ -280,368 +590,16 @@ export class HaMediaPlayerBrowse extends LitElement {
      this._animateHeaderHeight();
    } else if (changedProps.has("_currentItem")) {
      this._setHeaderHeight();
+      this._attachIntersectionObserver();
    }
  }

-  protected render(): TemplateResult {
-    if (this._error) {
-      return html`
-        <div class="container">${this._renderError(this._error)}</div>
-      `;
-    }
-
-    if (!this._currentItem) {
-      return html`<ha-circular-progress active></ha-circular-progress>`;
-    }
-
-    const currentItem = this._currentItem;
-
-    const subtitle = this.hass.localize(
-      `ui.components.media-browser.class.${currentItem.media_class}`
-    );
-    const children = currentItem.children || [];
-    const mediaClass = MediaClassBrowserSettings[currentItem.media_class];
-    const childrenMediaClass = currentItem.children_media_class
-      ? MediaClassBrowserSettings[currentItem.children_media_class]
-      : MediaClassBrowserSettings.directory;
-
-    const backgroundImage = currentItem.thumbnail
-      ? this._getSignedThumbnail(currentItem.thumbnail).then(
-          (value) => `url(${value})`
-        )
-      : "none";
-
-    return html`
-              ${
-                currentItem.can_play
-                  ? html`
-                      <div
-                        class="header ${classMap({
-                          "no-img": !currentItem.thumbnail,
-                          "no-dialog": !this.dialog,
-                        })}"
-                        @transitionend=${this._setHeaderHeight}
-                      >
-                        <div class="header-content">
-                          ${currentItem.thumbnail
-                            ? html`
-                                <div
-                                  class="img"
-                                  style="background-image: ${until(
-                                    backgroundImage,
-                                    ""
-                                  )}"
-                                >
-                                  ${this._narrow && currentItem?.can_play
-                                    ? html`
-                                        <ha-fab
-                                          mini
-                                          .item=${currentItem}
-                                          @click=${this._actionClicked}
-                                        >
-                                          <ha-svg-icon
-                                            slot="icon"
-                                            .label=${this.hass.localize(
-                                              `ui.components.media-browser.${this.action}-media`
-                                            )}
-                                            .path=${this.action === "play"
-                                              ? mdiPlay
-                                              : mdiPlus}
-                                          ></ha-svg-icon>
-                                          ${this.hass.localize(
-                                            `ui.components.media-browser.${this.action}`
-                                          )}
-                                        </ha-fab>
-                                      `
-                                    : ""}
-                                </div>
-                              `
-                            : html``}
-                          <div class="header-info">
-                            <div class="breadcrumb">
-                              <h1 class="title">${currentItem.title}</h1>
-                              ${subtitle
-                                ? html` <h2 class="subtitle">${subtitle}</h2> `
-                                : ""}
-                            </div>
-                            ${currentItem.can_play &&
-                            (!currentItem.thumbnail || !this._narrow)
-                              ? html`
-                                  <mwc-button
-                                    raised
-                                    .item=${currentItem}
-                                    @click=${this._actionClicked}
-                                  >
-                                    <ha-svg-icon
-                                      .label=${this.hass.localize(
-                                        `ui.components.media-browser.${this.action}-media`
-                                      )}
-                                      .path=${this.action === "play"
-                                        ? mdiPlay
-                                        : mdiPlus}
-                                    ></ha-svg-icon>
-                                    ${this.hass.localize(
-                                      `ui.components.media-browser.${this.action}`
-                                    )}
-                                  </mwc-button>
-                                `
-                              : ""}
-                          </div>
-                        </div>
-                      </div>
-                    `
-                  : ""
-              }
-          <div
-            class="content"
-            @scroll=${this._scroll}
-            @touchmove=${this._scroll}
-          >
-            ${
-              this._error
-                ? html`
-                    <div class="container">
-                      ${this._renderError(this._error)}
-                    </div>
-                  `
-                : isTTSMediaSource(currentItem.media_content_id)
-                ? html`
-                    <ha-browse-media-tts
-                      .item=${currentItem}
-                      .hass=${this.hass}
-                      .action=${this.action}
-                      @tts-picked=${this._ttsPicked}
-                    ></ha-browse-media-tts>
-                  `
-                : !children.length && !currentItem.not_shown
-                ? html`
-                    <div class="container no-items">
-                      ${currentItem.media_content_id ===
-                      "media-source://media_source/local/."
-                        ? html`
-                            <div class="highlight-add-button">
-                              <span>
-                                <ha-svg-icon
-                                  .path=${mdiArrowUpRight}
-                                ></ha-svg-icon>
-                              </span>
-                              <span>
-                                ${this.hass.localize(
-                                  "ui.components.media-browser.file_management.highlight_button"
-                                )}
-                              </span>
-                            </div>
-                          `
-                        : this.hass.localize(
-                            "ui.components.media-browser.no_items"
-                          )}
-                    </div>
-                  `
-                : childrenMediaClass.layout === "grid"
-                ? html`
-                    <lit-virtualizer
-                      scroller
-                      .layout=${grid({
-                        itemSize: {
-                          width: "175px",
-                          height: "225px",
-                        },
-                        gap: "16px",
-                        flex: { preserve: "aspect-ratio" },
-                        justify: "space-evenly",
-                        direction: "vertical",
-                      })}
-                      .items=${children}
-                      .renderItem=${this._renderGridItem}
-                      class="children ${classMap({
-                        portrait:
-                          childrenMediaClass.thumbnail_ratio === "portrait",
-                        not_shown: !!currentItem.not_shown,
-                      })}"
-                    ></lit-virtualizer>
-                    ${currentItem.not_shown
-                      ? html`
-                          <div class="grid not-shown">
-                            <div class="title">
-                              ${this.hass.localize(
-                                "ui.components.media-browser.not_shown",
-                                { count: currentItem.not_shown }
-                              )}
-                            </div>
-                          </div>
-                        `
-                      : ""}
-                  `
-                : html`
-                    <mwc-list>
-                      <lit-virtualizer
-                        scroller
-                        .items=${children}
-                        .renderItem=${this._renderListItem}
-                      ></lit-virtualizer>
-                      ${currentItem.not_shown
-                        ? html`
-                            <mwc-list-item
-                              noninteractive
-                              class="not-shown"
-                              .graphic=${mediaClass.show_list_images
-                                ? "medium"
-                                : "avatar"}
-                              dir=${computeRTLDirection(this.hass)}
-                            >
-                              <span class="title">
-                                ${this.hass.localize(
-                                  "ui.components.media-browser.not_shown",
-                                  { count: currentItem.not_shown }
-                                )}
-                              </span>
-                            </mwc-list-item>
-                          `
-                        : ""}
-                    </mwc-list>
-                  `
-            }
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  private _renderGridItem = (child: MediaPlayerItem): TemplateResult => {
-    const backgroundImage = child.thumbnail
-      ? this._getSignedThumbnail(child.thumbnail).then(
-          (value) => `url(${value})`
-        )
-      : "none";
-
-    return html`
-      <div class="child" .item=${child} @click=${this._childClicked}>
-        <ha-card outlined>
-          <div class="thumbnail">
-            ${child.thumbnail
-              ? html`
-                  <div
-                    class="${["app", "directory"].includes(child.media_class)
-                      ? "centered-image"
-                      : ""} image"
-                    style="background-image: ${until(backgroundImage, "")}"
-                  ></div>
-                `
-              : html`
-                  <div class="icon-holder image">
-                    <ha-svg-icon
-                      class="folder"
-                      .path=${MediaClassBrowserSettings[
-                        child.media_class === "directory"
-                          ? child.children_media_class || child.media_class
-                          : child.media_class
-                      ].icon}
-                    ></ha-svg-icon>
-                  </div>
-                `}
-            ${child.can_play
-              ? html`
-                  <ha-icon-button
-                    class="play ${classMap({
-                      can_expand: child.can_expand,
-                    })}"
-                    .item=${child}
-                    .label=${this.hass.localize(
-                      `ui.components.media-browser.${this.action}-media`
-                    )}
-                    .path=${this.action === "play" ? mdiPlay : mdiPlus}
-                    @click=${this._actionClicked}
-                  ></ha-icon-button>
-                `
-              : ""}
-          </div>
-          <div class="title">
-            ${child.title}
-            <paper-tooltip fitToVisibleBounds position="top" offset="4"
-              >${child.title}</paper-tooltip
-            >
-          </div>
-        </ha-card>
-      </div>
-    `;
-  };
-
-  private _renderListItem = (child: MediaPlayerItem): TemplateResult => {
-    const currentItem = this._currentItem;
-    const mediaClass = MediaClassBrowserSettings[currentItem!.media_class];
-
-    const backgroundImage =
-      mediaClass.show_list_images && child.thumbnail
-        ? this._getSignedThumbnail(child.thumbnail).then(
-            (value) => `url(${value})`
-          )
-        : "none";
-
-    return html`
-      <mwc-list-item
-        @click=${this._childClicked}
-        .item=${child}
-        .graphic=${mediaClass.show_list_images ? "medium" : "avatar"}
-        dir=${computeRTLDirection(this.hass)}
-      >
-        <div
-          class=${classMap({
-            graphic: true,
-            thumbnail: mediaClass.show_list_images === true,
-          })}
-          style="background-image: ${until(backgroundImage, "")}"
-          slot="graphic"
-        >
-          <ha-icon-button
-            class="play ${classMap({
-              show: !mediaClass.show_list_images || !child.thumbnail,
-            })}"
-            .item=${child}
-            .label=${this.hass.localize(
-              `ui.components.media-browser.${this.action}-media`
-            )}
-            .path=${this.action === "play" ? mdiPlay : mdiPlus}
-            @click=${this._actionClicked}
-          ></ha-icon-button>
-        </div>
-        <span class="title">${child.title}</span>
-      </mwc-list-item>
-      <li divider role="separator"></li>
-    `;
-  };
-
-  private async _getSignedThumbnail(
-    thumbnailUrl: string | undefined
-  ): Promise<string> {
-    if (!thumbnailUrl) {
-      return "";
-    }
-
-    if (thumbnailUrl.startsWith("/")) {
-      // Thumbnails served by local API require authentication
-      return (await getSignedPath(this.hass, thumbnailUrl)).path;
-    }
-
-    if (thumbnailUrl.startsWith("https://brands.home-assistant.io")) {
-      // The backend is not aware of the theme used by the users,
-      // so we rewrite the URL to show a proper icon
-      thumbnailUrl = brandsUrl({
-        domain: extractDomainFromBrandUrl(thumbnailUrl),
-        type: "icon",
-        useFallback: true,
-        darkOptimized: this.hass.themes?.darkMode,
-      });
-    }
-
-    return thumbnailUrl;
-  }
-
-  private _actionClicked = (ev: MouseEvent): void => {
+  private _actionClicked(ev: MouseEvent): void {
    ev.stopPropagation();
    const item = (ev.currentTarget as any).item;

    this._runAction(item);
-  };
+  }

  private _runAction(item: MediaPlayerItem): void {
    fireEvent(this, "media-picked", { item, navigateIds: this.navigateIds });
@@ -657,7 +615,7 @@ export class HaMediaPlayerBrowse extends LitElement {
    });
  }

-  private _childClicked = async (ev: MouseEvent): Promise<void> => {
+  private async _childClicked(ev: MouseEvent): Promise<void> {
    const target = ev.currentTarget as any;
    const item: MediaPlayerItem = target.item;

@@ -673,7 +631,7 @@ export class HaMediaPlayerBrowse extends LitElement {
    fireEvent(this, "media-browsed", {
      ids: [...this.navigateIds, item],
    });
-  };
+  }

  private async _fetchData(
    entityId: string,
@@ -700,6 +658,55 @@ export class HaMediaPlayerBrowse extends LitElement {
    this._resizeObserver.observe(this);
  }

+  /**
+   * Load thumbnails for images on demand as they become visible.
+   */
+  private async _attachIntersectionObserver(): Promise<void> {
+    if (!("IntersectionObserver" in window) || !this._thumbnails) {
+      return;
+    }
+    if (!this._intersectionObserver) {
+      this._intersectionObserver = new IntersectionObserver(
+        async (entries, observer) => {
+          await Promise.all(
+            entries.map(async (entry) => {
+              if (!entry.isIntersecting) {
+                return;
+              }
+              const thumbnailCard = entry.target as HTMLElement;
+              let thumbnailUrl = thumbnailCard.dataset.src;
+              if (!thumbnailUrl) {
+                return;
+              }
+              if (thumbnailUrl.startsWith("/")) {
+                // Thumbnails served by local API require authentication
+                const signedPath = await getSignedPath(this.hass, thumbnailUrl);
+                thumbnailUrl = signedPath.path;
+              } else if (
+                thumbnailUrl.startsWith("https://brands.home-assistant.io")
+              ) {
+                // The backend is not aware of the theme used by the users,
+                // so we rewrite the URL to show a proper icon
+                thumbnailUrl = brandsUrl({
+                  domain: extractDomainFromBrandUrl(thumbnailUrl),
+                  type: "icon",
+                  useFallback: true,
+                  darkOptimized: this.hass.themes?.darkMode,
+                });
+              }
+              thumbnailCard.style.backgroundImage = `url(${thumbnailUrl})`;
+              observer.unobserve(thumbnailCard); // loaded, so no need to observe anymore
+            })
+          );
+        }
+      );
+    }
+    const observer = this._intersectionObserver!;
+    for (const thumbnailCard of this._thumbnails) {
+      observer.observe(thumbnailCard);
+    }
+  }
+
  private _closeDialogAction(): void {
    fireEvent(this, "close-dialog");
  }
@@ -834,7 +841,6 @@ export class HaMediaPlayerBrowse extends LitElement {
        .content {
          overflow-y: auto;
          box-sizing: border-box;
-          height: 100%;
        }

        /* HEADER */
@@ -920,7 +926,6 @@ export class HaMediaPlayerBrowse extends LitElement {
        .not-shown {
          font-style: italic;
          color: var(--secondary-text-color);
-          padding: 8px 16px 8px;
        }

        .grid.not-shown {
@@ -946,11 +951,7 @@ export class HaMediaPlayerBrowse extends LitElement {
          border-bottom-color: var(--divider-color);
        }

-        mwc-list-item {
-          width: 100%;
-        }
-
-        div.children {
+        .children {
          display: grid;
          grid-template-columns: repeat(
            auto-fit,
@@ -987,7 +988,7 @@ export class HaMediaPlayerBrowse extends LitElement {
          padding-bottom: 100%;
        }

-        .portrait ha-card .thumbnail {
+        .portrait.children ha-card .thumbnail {
          padding-bottom: 150%;
        }

@@ -1061,6 +1062,10 @@ export class HaMediaPlayerBrowse extends LitElement {
          color: var(--primary-color);
        }

+        ha-card:hover .lazythumbnail {
+          opacity: 0.5;
+        }
+
        .child .title {
          font-size: 16px;
          padding-top: 16px;
@@ -1122,7 +1127,7 @@ export class HaMediaPlayerBrowse extends LitElement {
          padding: 0 24px;
        }

-        :host([narrow]) div.children {
+        :host([narrow]) .children {
          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        }

@@ -1227,16 +1232,6 @@ export class HaMediaPlayerBrowse extends LitElement {
          --mdc-fab-box-shadow: none;
          --mdc-theme-secondary: rgba(var(--rgb-primary-color), 0.5);
        }
-
-        lit-virtualizer {
-          height: 100%;
-          overflow: overlay !important;
-          contain: size layout !important;
-        }
-
-        lit-virtualizer.not_shown {
-          height: calc(100% - 36px);
-        }
      `,
    ];
  }
--- a/src/data/automation.ts
+++ b/src/data/automation.ts
@@ -8,8 +8,6 @@ import { BlueprintInput } from "./blueprint";
 import { DeviceCondition, DeviceTrigger } from "./device_automation";
 import { Action, MODES } from "./script";

-export const AUTOMATION_DEFAULT_MODE: ManualAutomationConfig["mode"] = "single";
-
 export interface AutomationEntity extends HassEntityBase {
  attributes: HassEntityAttributeBase & {
    id?: string;
@@ -69,7 +67,7 @@ export interface BaseTrigger {

 export interface StateTrigger extends BaseTrigger {
  platform: "state";
-  entity_id: string | string[];
+  entity_id: string;
  attribute?: string;
  from?: string | number;
  to?: string | string[] | number;
@@ -152,12 +150,6 @@ export interface EventTrigger extends BaseTrigger {
  context?: ContextConstraint;
 }

-export interface CalendarTrigger extends BaseTrigger {
-  platform: "calendar";
-  event: "start" | "end";
-  entity_id: string;
-}
-
 export type Trigger =
  | StateTrigger
  | MqttTrigger
@@ -172,8 +164,7 @@ export type Trigger =
  | TimeTrigger
  | TemplateTrigger
  | EventTrigger
-  | DeviceTrigger
-  | CalendarTrigger;
+  | DeviceTrigger;

 interface BaseCondition {
  condition: string;
@@ -233,20 +224,6 @@ export interface TriggerCondition extends BaseCondition {
  id: string;
 }

-type ShorthandBaseCondition = Omit<BaseCondition, "condition">;
-
-export interface ShorthandAndCondition extends ShorthandBaseCondition {
-  and: Condition[];
-}
-
-export interface ShorthandOrCondition extends ShorthandBaseCondition {
-  or: Condition[];
-}
-
-export interface ShorthandNotCondition extends ShorthandBaseCondition {
-  not: Condition[];
-}
-
 export type Condition =
  | StateCondition
  | NumericStateCondition
@@ -258,12 +235,6 @@ export type Condition =
  | LogicalCondition
  | TriggerCondition;

-export type ConditionWithShorthand =
-  | Condition
-  | ShorthandAndCondition
-  | ShorthandOrCondition
-  | ShorthandNotCondition;
-
 export const triggerAutomationActions = (
  hass: HomeAssistant,
  entityId: string
--- a/src/data/error_log.ts
+++ b/src/data/error_log.ts
@@ -1,9 +1,4 @@
 import { HomeAssistant } from "../types";

-export interface LogProvider {
-  key: string;
-  name: string;
-}
-
 export const fetchErrorLog = (hass: HomeAssistant) =>
  hass.callApi<string>("GET", "error_log");
--- a/src/data/hassio/addon.ts
+++ b/src/data/hassio/addon.ts
@@ -21,8 +21,7 @@ export type AddonState = "started" | "stopped" | null;
 export type AddonRepository = "core" | "local" | string;

 interface AddonTranslations {
-  network?: Record<string, string>;
-  configuration?: Record<string, { name?: string; description?: string }>;
+  [key: string]: Record<string, Record<string, Record<string, string>>>;
 }

 export interface HassioAddonInfo {
@@ -92,7 +91,7 @@ export interface HassioAddonDetails extends HassioAddonInfo {
  slug: string;
  startup: AddonStartup;
  stdin: boolean;
-  translations: Record<string, AddonTranslations>;
+  translations: AddonTranslations;
  watchdog: null | boolean;
  webui: null | string;
 }
--- a/src/data/script.ts
+++ b/src/data/script.ts
@@ -194,24 +194,11 @@ export interface ChooseAction {
  default?: Action | Action[];
 }

-export interface IfAction {
-  alias?: string;
-  if: string | Condition[];
-  then: Action | Action[];
-  else?: Action | Action[];
-}
-
 export interface VariablesAction {
  alias?: string;
  variables: Record<string, unknown>;
 }

-export interface StopAction {
-  alias?: string;
-  stop: string;
-  error?: boolean;
-}
-
 interface UnknownAction {
  alias?: string;
  [key: string]: unknown;
@@ -228,10 +215,8 @@ export type Action =
  | WaitForTriggerAction
  | RepeatAction
  | ChooseAction
-  | IfAction
  | VariablesAction
  | PlayMediaAction
-  | StopAction
  | UnknownAction;

 export interface ActionTypes {
@@ -243,12 +228,10 @@ export interface ActionTypes {
  activate_scene: SceneAction;
  repeat: RepeatAction;
  choose: ChooseAction;
-  if: IfAction;
  wait_for_trigger: WaitForTriggerAction;
  variables: VariablesAction;
  service: ServiceAction;
  play_media: PlayMediaAction;
-  stop: StopAction;
  unknown: UnknownAction;
 }

@@ -316,18 +299,12 @@ export const getActionType = (action: Action): ActionType => {
  if ("choose" in action) {
    return "choose";
  }
-  if ("if" in action) {
-    return "if";
-  }
  if ("wait_for_trigger" in action) {
    return "wait_for_trigger";
  }
  if ("variables" in action) {
    return "variables";
  }
-  if ("stop" in action) {
-    return "stop";
-  }
  if ("service" in action) {
    if ("metadata" in action) {
      if (is(action, activateSceneActionStruct)) {
--- a/src/data/selector.ts
+++ b/src/data/selector.ts
@@ -19,7 +19,6 @@ export type Selector =
  | SelectSelector
  | StringSelector
  | TargetSelector
-  | TemplateSelector
  | ThemeSelector
  | TimeSelector;

@@ -214,11 +213,6 @@ export interface TargetSelector {
  };
 }

-export interface TemplateSelector {
-  // eslint-disable-next-line @typescript-eslint/ban-types
-  template: {};
-}
-
 export interface ThemeSelector {
  // eslint-disable-next-line @typescript-eslint/ban-types
  theme: {};
--- a/src/data/update.ts
+++ b/src/data/update.ts
@@ -1,15 +1,10 @@
 import type {
-  HassEntities,
  HassEntityAttributeBase,
  HassEntityBase,
 } from "home-assistant-js-websocket";
 import { BINARY_STATE_ON } from "../common/const";
-import { computeStateDomain } from "../common/entity/compute_state_domain";
 import { supportsFeature } from "../common/entity/supports-feature";
-import { caseInsensitiveStringCompare } from "../common/string/compare";
-import { showAlertDialog } from "../dialogs/generic/show-dialog-box";
 import { HomeAssistant } from "../types";
-import { showToast } from "../util/toast";

 export const UPDATE_SUPPORT_INSTALL = 1;
 export const UPDATE_SUPPORT_SPECIFIC_VERSION = 2;
@@ -36,12 +31,8 @@ export const updateUsesProgress = (entity: UpdateEntity): boolean =>
  supportsFeature(entity, UPDATE_SUPPORT_PROGRESS) &&
  typeof entity.attributes.in_progress === "number";

-export const updateCanInstall = (
-  entity: UpdateEntity,
-  showSkipped = false
-): boolean =>
-  (entity.state === BINARY_STATE_ON ||
-    (showSkipped && Boolean(entity.attributes.skipped_version))) &&
+export const updateCanInstall = (entity: UpdateEntity): boolean =>
+  entity.state === BINARY_STATE_ON &&
  supportsFeature(entity, UPDATE_SUPPORT_INSTALL);

 export const updateIsInstalling = (entity: UpdateEntity): boolean =>
@@ -52,75 +43,3 @@ export const updateReleaseNotes = (hass: HomeAssistant, entityId: string) =>
    type: "update/release_notes",
    entity_id: entityId,
  });
-
-export const filterUpdateEntities = (entities: HassEntities) =>
-  (
-    Object.values(entities).filter(
-      (entity) => computeStateDomain(entity) === "update"
-    ) as UpdateEntity[]
-  ).sort((a, b) => {
-    if (a.attributes.title === "Home Assistant Core") {
-      return -3;
-    }
-    if (b.attributes.title === "Home Assistant Core") {
-      return 3;
-    }
-    if (a.attributes.title === "Home Assistant Operating System") {
-      return -2;
-    }
-    if (b.attributes.title === "Home Assistant Operating System") {
-      return 2;
-    }
-    if (a.attributes.title === "Home Assistant Supervisor") {
-      return -1;
-    }
-    if (b.attributes.title === "Home Assistant Supervisor") {
-      return 1;
-    }
-    return caseInsensitiveStringCompare(
-      a.attributes.title || a.attributes.friendly_name || "",
-      b.attributes.title || b.attributes.friendly_name || ""
-    );
-  });
-
-export const filterUpdateEntitiesWithInstall = (
-  entities: HassEntities,
-  showSkipped = false
-) =>
-  filterUpdateEntities(entities).filter((entity) =>
-    updateCanInstall(entity, showSkipped)
-  );
-
-export const checkForEntityUpdates = async (
-  element: HTMLElement,
-  hass: HomeAssistant
-) => {
-  const entities = filterUpdateEntities(hass.states).map(
-    (entity) => entity.entity_id
-  );
-
-  if (!entities.length) {
-    showAlertDialog(element, {
-      title: hass.localize("ui.panel.config.updates.no_update_entities.title"),
-      text: hass.localize(
-        "ui.panel.config.updates.no_update_entities.description"
-      ),
-      warning: true,
-    });
-    return;
-  }
-
-  await hass.callService("homeassistant", "update_entity", {
-    entity_id: entities,
-  });
-
-  if (filterUpdateEntitiesWithInstall(hass.states).length) {
-    showToast(element, {
-      message: hass.localize("ui.panel.config.updates.updates_refreshed"),
-    });
-  } else {
-    showToast(element, {
-      message: hass.localize("ui.panel.config.updates.no_new_updates"),
-    });
-  }
-};
--- a/src/data/ws-templates.ts
+++ b/src/data/ws-templates.ts
@@ -20,7 +20,6 @@ export const subscribeRenderTemplate = (
    entity_ids?: string | string[];
    variables?: Record<string, unknown>;
    timeout?: number;
-    strict?: boolean;
  }
 ): Promise<UnsubscribeFunc> =>
  conn.subscribeMessage((msg: RenderTemplateResult) => onChange(msg), {
--- a/src/data/zwave_js.ts
+++ b/src/data/zwave_js.ts
@@ -127,7 +127,7 @@ export interface ZWaveJSClient {

 export interface ZWaveJSController {
  home_id: number;
-  sdk_version: string;
+  library_version: string;
  type: number;
  own_node_id: number;
  is_secondary: boolean;
@@ -136,7 +136,7 @@ export interface ZWaveJSController {
  was_real_primary: boolean;
  is_static_update_controller: boolean;
  is_slave: boolean;
-  firmware_version: string;
+  serial_api_version: string;
  manufacturer_id: number;
  product_id: number;
  product_type: number;
--- a/Show More
+++ b/Show More