Bumped version to 20220502.0

Update hat-script-graph.ts
Indicate things are disabled in trace graph
2026-05-23 17:47:09 +00:00 · 2022-05-02 15:07:50 -07:00 · 2022-05-02 15:07:15 -07:00 · 2022-05-02 15:07:15 -07:00 · 2022-05-02 15:07:01 -07:00 · 2022-05-02 14:48:28 -07:00
238 changed files with 8853 additions and 4331 deletions
@@ -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 paths = require("./paths.js");
-const bundle = require("./bundle.js");
 const log = require("fancy-log");
 const WebpackBar = require("webpackbar");
+const paths = require("./paths.js");
+const bundle = require("./bundle.js");

 class LogStartCompilePlugin {
  ignoredFirst = false;
@@ -138,6 +138,8 @@ 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: {
@@ -31,7 +31,7 @@ export const mockHassioSupervisor = (hass: MockHomeAssistant) => {
            version_latest: "3.6.2",
            update_available: false,
            repository: "a0d7b954",
-            icon: true,
+            icon: false,
            logo: true,
          },
          {
@@ -62,6 +62,45 @@ const ACTIONS = [
      entity_id: "input_boolean.toggle_4",
    },
  },
+  {
+    parallel: [
+      { scene: "scene.kitchen_morning" },
+      {
+        service: "media_player.play_media",
+        target: { entity_id: "media_player.living_room" },
+        data: { media_content_id: "", media_content_type: "" },
+        metadata: { title: "Happy Song" },
+      },
+    ],
+  },
+  {
+    stop: "No one is home!",
+  },
+  { repeat: { count: 3, sequence: [{ delay: "00:00:01" }] } },
+  {
+    repeat: {
+      for_each: ["bread", "butter", "cheese"],
+      sequence: [{ delay: "00:00:01" }],
+    },
+  },
+  {
+    if: [{ condition: "state" }],
+    then: [{ delay: "00:00:01" }],
+    else: [{ delay: "00:00:05" }],
+  },
+  {
+    choose: [
+      {
+        conditions: [{ condition: "state" }],
+        sequence: [{ delay: "00:00:01" }],
+      },
+      {
+        conditions: [{ condition: "sun" }],
+        sequence: [{ delay: "00:00:05" }],
+      },
+    ],
+    default: [{ delay: "00:00:03" }],
+  },
 ];

@customElement("demo-automation-describe-action")
@@ -20,6 +20,10 @@ import { HaWaitForTriggerAction } from "../../../../src/panels/config/automation
 import { HaWaitAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-wait_template";
 import { Action } from "../../../../src/data/script";
 import { HaConditionAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-condition";
+import { HaParallelAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-parallel";
+import { HaIfAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-if";
+import { HaStopAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-stop";
+import { HaPlayMediaAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-play_media";

 const SCHEMAS: { name: string; actions: Action[] }[] = [
  { name: "Event", actions: [HaEventAction.defaultConfig] },
@@ -28,11 +32,15 @@ const SCHEMAS: { name: string; actions: Action[] }[] = [
  { name: "Condition", actions: [HaConditionAction.defaultConfig] },
  { name: "Delay", actions: [HaDelayAction.defaultConfig] },
  { name: "Scene", actions: [HaSceneAction.defaultConfig] },
+  { name: "Play media", actions: [HaPlayMediaAction.defaultConfig] },
  { name: "Wait", actions: [HaWaitAction.defaultConfig] },
  { name: "WaitForTrigger", actions: [HaWaitForTriggerAction.defaultConfig] },
  { name: "Repeat", actions: [HaRepeatAction.defaultConfig] },
+  { name: "If-Then", actions: [HaIfAction.defaultConfig] },
  { name: "Choose", actions: [HaChooseAction.defaultConfig] },
  { name: "Variables", actions: [{ variables: { hello: "1" } }] },
+  { name: "Parallel", actions: [HaParallelAction.defaultConfig] },
+  { name: "Stop", actions: [HaStopAction.defaultConfig] },
 ];

@customElement("demo-automation-editor-action")
@@ -86,6 +94,6 @@ class DemoHaAutomationEditorAction extends LitElement {

 declare global {
  interface HTMLElementTagNameMap {
-    "demo-ha-automation-editor-action": DemoHaAutomationEditorAction;
+    "demo-automation-editor-action": DemoHaAutomationEditorAction;
  }
 }
@@ -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 { Condition } from "../../../../src/data/automation";
+import type { ConditionWithShorthand } 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: Condition[] }[] = [
+const SCHEMAS: { name: string; conditions: ConditionWithShorthand[] }[] = [
  {
    name: "State",
    conditions: [{ condition: "state", ...HaStateCondition.defaultConfig }],
@@ -69,6 +69,14 @@ const SCHEMAS: { name: string; conditions: Condition[] }[] = [
    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")
@@ -159,13 +159,19 @@ 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",
-    });
+    applyThemesOnElement(
+      this.shadowRoot!.querySelector(".dark"),
+      {
+        default_theme: "default",
+        default_dark_theme: "default",
+        themes: {},
+        darkMode: true,
+        theme: "default",
+      },
+      undefined,
+      undefined,
+      true
+    );
  }

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

  @state() private _required = false;

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

  private data = SCHEMAS.map(() => ({}));
@@ -418,6 +421,13 @@ 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];
@@ -446,6 +456,7 @@ 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>
                  `
@@ -466,7 +477,8 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
      width: 60;
    }
    .options {
-      padding: 16px 48px;
+      max-width: 800px;
+      margin: 16px auto;
    }
    .options ha-formfield {
      margin-right: 16px;
@@ -0,0 +1,3 @@
+---
+title: Tips
+---
@@ -0,0 +1,73 @@
+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;
+  }
+}
@@ -18,7 +18,7 @@ import { LONG_TEXT } from "../../data/text";

 const base_attributes = {
  title: "Awesome",
-  current_version: "1.2.2",
+  installed_version: "1.2.2",
  latest_version: "1.2.3",
  release_url: "https://home-assistant.io",
  supported_features: UPDATE_SUPPORT_INSTALL,
@@ -50,7 +50,7 @@ const ENTITIES = [
  }),
  getEntity("update", "update5", "off", {
    ...base_attributes,
-    current_version: "1.2.3",
+    installed_version: "1.2.3",
    friendly_name: "No update",
  }),
  getEntity("update", "update6", "off", {
@@ -102,8 +102,8 @@ const ENTITIES = [
  }),
  getEntity("update", "update14", "off", {
    ...base_attributes,
-    current_version: null,
-    friendly_name: "Update without current_version",
+    installed_version: null,
+    friendly_name: "Update without installed_version",
  }),
  getEntity("update", "update15", "off", {
    ...base_attributes,
@@ -128,6 +128,17 @@ const ENTITIES = [
    supported_features:
      base_attributes.supported_features + UPDATE_SUPPORT_RELEASE_NOTES,
  }),
+  getEntity("update", "update19", "on", {
+    ...base_attributes,
+    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")
@@ -39,7 +39,14 @@ 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"];
+const SUPPORTED_UI_TYPES = [
+  "string",
+  "select",
+  "boolean",
+  "integer",
+  "float",
+  "schema",
+];

 const ADDON_YAML_SCHEMA = DEFAULT_SCHEMA.extend([
  new Type("!secret", {
@@ -48,6 +55,8 @@ 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;
@@ -75,19 +84,66 @@ 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;

-  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
-    )
+  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 _filteredShchema = memoizeOne(
@@ -140,7 +196,8 @@ class HassioAddonConfig extends LitElement {
                .data=${this._options!}
                @value-changed=${this._configChanged}
                .computeLabel=${this.computeLabel}
-                .schema=${this._schema(
+                .computeHelper=${this.computeHelper}
+                .schema=${this._convertSchema(
                  this._showOptional
                    ? this.addon.schema!
                    : this._filteredShchema(
@@ -197,8 +254,9 @@ class HassioAddonConfig extends LitElement {
  protected firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    this._canShowSchema = !this.addon.schema!.find(
-      // @ts-ignore
-      (entry) => !SUPPORTED_UI_TYPES.includes(entry.type) || entry.multiple
+      (entry) =>
+        // @ts-ignore
+        !SUPPORTED_UI_TYPES.includes(entry.type)
    );
    this._yamlMode = !this._canShowSchema;
  }
@@ -1,4 +1,3 @@
-import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
  css,
  CSSResultGroup,
@@ -8,10 +7,13 @@ 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,
@@ -24,16 +26,6 @@ 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;
@@ -42,9 +34,13 @@ 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?: NetworkItem[];
+  @state() private _config?: Record<string, any>;

  public connectedCallback(): void {
    super.connectedCallback();
@@ -56,6 +52,10 @@ 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,52 +63,49 @@ 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>`
            : ""}

-          <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>
-                `
-              )}
-            </tbody>
-          </table>
+          <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"
+              )}
+            >
+              <ha-switch
+                @change=${this._toggleOptional}
+                .checked=${this._showOptional}
+              >
+              </ha-switch>
+            </ha-formfield>`
+          : ""}
        <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}>
+          <ha-progress-button
+            @click=${this._saveTapped}
+            .disabled=${!this._configHasChanged}
+          >
            ${this.supervisor.localize("common.save")}
          </ha-progress-button>
        </div>
@@ -123,50 +120,60 @@ class HassioAddonNetwork extends LitElement {
    }
  }

-  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 _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 _setNetworkConfig(): void {
-    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));
+    this._config = this.addon.network || {};
  }

-  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 _configChanged(ev: CustomEvent): Promise<void> {
+    this._configHasChanged = true;
+    this._config! = ev.detail.value;
  }

  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);
@@ -177,19 +184,21 @@ class HassioAddonNetwork extends LitElement {
        "error",
        extractApiErrorMessage(err)
      );
+      button.actionError();
    }
+  }

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

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

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

    const data: HassioAddonSetOptionParams = {
@@ -198,11 +207,13 @@ 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);
@@ -213,8 +224,8 @@ class HassioAddonNetwork extends LitElement {
        "error",
        extractApiErrorMessage(err)
      );
+      button.actionError();
    }
-    button.progress = false;
  }

  static get styles(): CSSResultGroup {
@@ -232,6 +243,9 @@ class HassioAddonNetwork extends LitElement {
          display: flex;
          justify-content: space-between;
        }
+        .show-optional {
+          padding: 16px;
+        }
      `,
    ];
  }
@@ -17,7 +17,9 @@ import {
  HassioAddonDetails,
 } from "../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../src/data/hassio/common";
+import { setSupervisorOption } from "../../../src/data/hassio/supervisor";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
+import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box";
 import "../../../src/layouts/hass-error-screen";
 import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-tabs-subpage";
@@ -166,6 +168,42 @@ class HassioAddonDashboard extends LitElement {
  protected async firstUpdated(): Promise<void> {
    if (this.route.path === "") {
      const requestedAddon = extractSearchParam("addon");
+      const requestedAddonRepository = extractSearchParam("repository_url");
+      if (
+        requestedAddonRepository &&
+        !this.supervisor.supervisor.addons_repositories.find(
+          (repo) => repo === requestedAddonRepository
+        )
+      ) {
+        if (
+          !(await showConfirmationDialog(this, {
+            title: this.supervisor.localize("my.add_addon_repository_title"),
+            text: this.supervisor.localize(
+              "my.add_addon_repository_description",
+              { addon: requestedAddon, repository: requestedAddonRepository }
+            ),
+            confirmText: this.supervisor.localize("common.add"),
+            dismissText: this.supervisor.localize("common.cancel"),
+          }))
+        ) {
+          this._error = this.supervisor.localize(
+            "my.error_repository_not_found"
+          );
+          return;
+        }
+
+        try {
+          await setSupervisorOption(this.hass, {
+            addons_repositories: [
+              ...this.supervisor.supervisor.addons_repositories,
+              requestedAddonRepository,
+            ],
+          });
+        } catch (err: any) {
+          this._error = extractApiErrorMessage(err);
+        }
+      }
+
      if (requestedAddon) {
        const addonsInfo = await fetchHassioAddonsInfo(this.hass);
        const validAddon = addonsInfo.addons.some(
@@ -2,6 +2,7 @@ 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,
@@ -11,7 +12,6 @@ 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`<hassio-ansi-to-html
+            ? html`<ha-ansi-to-html
                .content=${this._content}
-              ></hassio-ansi-to-html>`
+              ></ha-ansi-to-html>`
            : ""}
        </div>
        <div class="card-actions">
@@ -1,7 +1,7 @@
 import "@material/mwc-button";
 import { ActionDetail } from "@material/mwc-list";
 import "@material/mwc-list/mwc-list-item";
-import { mdiDelete, mdiDotsVertical, mdiPlus } from "@mdi/js";
+import { mdiBackupRestore, mdiDelete, mdiDotsVertical, mdiPlus } from "@mdi/js";
 import {
  css,
  CSSResultGroup,
@@ -166,7 +166,15 @@ export class HassioBackups extends LitElement {
    }
    return html`
      <hass-tabs-subpage-data-table
-        .tabs=${supervisorTabs(this.hass)}
+        .tabs=${atLeastVersion(this.hass.config.version, 2022, 5)
+          ? [
+              {
+                translationKey: "panel.backups",
+                path: `/hassio/backups`,
+                iconPath: mdiBackupRestore,
+              },
+            ]
+          : supervisorTabs(this.hass)}
        .hass=${this.hass}
        .localizeFunc=${this.supervisor.localize}
        .searchLabel=${this.supervisor.localize("search")}
@@ -182,7 +190,9 @@ export class HassioBackups extends LitElement {
        selectable
        hasFab
        .mainPage=${!atLeastVersion(this.hass.config.version, 2021, 12)}
-        back-path="/config"
+        back-path=${atLeastVersion(this.hass.config.version, 2022, 5)
+          ? "/config/system"
+          : "/config"}
        supervisor
      >
        <ha-button-menu
@@ -32,13 +32,6 @@ interface AddonCheckboxItem extends CheckboxItem {

 const _computeFolders = (folders): CheckboxItem[] => {
  const list: CheckboxItem[] = [];
-  if (folders.includes("homeassistant")) {
-    list.push({
-      slug: "homeassistant",
-      name: "Home Assistant configuration",
-      checked: false,
-    });
-  }
  if (folders.includes("ssl")) {
    list.push({ slug: "ssl", name: "SSL", checked: false });
  }
@@ -100,7 +93,7 @@ export class SupervisorBackupContent extends LitElement {
      this.folders = _computeFolders(
        this.backup
          ? this.backup.folders
-          : ["homeassistant", "ssl", "share", "media", "addons/local"]
+          : ["ssl", "share", "media", "addons/local"]
      );
      this.addons = _computeAddons(
        this.backup ? this.backup.addons : this.supervisor?.supervisor.addons
@@ -187,7 +180,7 @@ export class SupervisorBackupContent extends LitElement {
            >
              <ha-checkbox
                .checked=${this.homeAssistant}
-                @click=${this.toggleHomeAssistant}
+                @change=${this.toggleHomeAssistant}
              >
              </ha-checkbox>
            </ha-formfield>
@@ -10,6 +10,7 @@ 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 {
@@ -22,6 +23,31 @@ 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}
@@ -74,6 +100,12 @@ 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;
+        }
      `,
    ];
  }
@@ -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 { isNavigationClick } from "../../src/common/dom/is-navigation-click";
 import { mainWindow } from "../../src/common/dom/get_main_window";
+import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
 import { navigate } from "../../src/common/navigate";
 import { HassioPanelInfo } from "../../src/data/hassio/supervisor";
 import { Supervisor } from "../../src/data/supervisor/supervisor";
@@ -73,6 +73,18 @@ export class HassioMain extends SupervisorBaseElement {
      });
    });

+    // Forward keydown events to the main window for quickbar access
+    document.body.addEventListener("keydown", (ev: KeyboardEvent) => {
+      if (ev.altKey || ev.ctrlKey || ev.shiftKey || ev.metaKey) {
+        // Ignore if modifier keys are pressed
+        return;
+      }
+      // @ts-ignore
+      fireEvent(mainWindow, "hass-quick-bar-trigger", ev, {
+        bubbles: false,
+      });
+    });
+
    makeDialogManager(this, this.shadowRoot!);
  }

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

-const REDIRECTS: Redirects = {
+export const REDIRECTS: Redirects = {
  supervisor: {
    redirect: "/hassio/dashboard",
  },
@@ -42,6 +42,9 @@ const REDIRECTS: Redirects = {
    params: {
      addon: "string",
    },
+    optional_params: {
+      repository_url: "url",
+    },
  },
  supervisor_ingress: {
    redirect: "/hassio/ingress",
@@ -124,6 +127,14 @@ class HassioMyRedirect extends LitElement {
      }
      resultParams[key] = params[key];
    });
+    Object.entries(redirect.optional_params || {}).forEach(([key, type]) => {
+      if (params[key]) {
+        if (!this._checkParamType(type, params[key])) {
+          throw Error();
+        }
+        resultParams[key] = params[key];
+      }
+    });
    return `?${createSearchParam(resultParams)}`;
  }

@@ -8,24 +8,27 @@ 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[] => [
-  {
-    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[] =>
+  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,
+        },
+      ];
@@ -23,6 +23,10 @@ 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";
@@ -30,11 +34,6 @@ 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;
@@ -1,3 +1,4 @@
+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";
@@ -11,7 +12,6 @@ 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`<hassio-ansi-to-html .content=${this._content}>
-              </hassio-ansi-to-html>`
+            ? html`<ha-ansi-to-html .content=${this._content}>
+              </ha-ansi-to-html>`
            : html`<hass-loading-screen no-toolbar></hass-loading-screen>`}
        </div>
        <div class="card-actions">
@@ -106,9 +106,10 @@
    "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.1",
+    "home-assistant-js-websocket": "^7.0.3",
    "idb-keyval": "^5.1.3",
    "intl-messageformat": "^9.9.1",
    "js-yaml": "^4.1.0",
@@ -15,7 +15,7 @@ if [ -z $(which hass) ]; then
  echo "Installing Home Asstant core from dev."
  python3 -m pip install --upgrade \
    colorlog \
-    git+git://github.com/home-assistant/home-assistant.git@dev
+    git+https://github.com/home-assistant/home-assistant.git@dev
 fi

 if [ ! -d "${WD}/config" ]; then
@@ -1,6 +1,6 @@
 [metadata]
 name         = home-assistant-frontend
-version      = 20220329.0
+version      = 20220502.0
 author       = The Home Assistant Authors
 author_email = hello@home-assistant.io
 license      = Apache-2.0
@@ -0,0 +1,16 @@
+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";
@@ -12,7 +12,7 @@ export const isNavigationClick = (e: MouseEvent) => {

  const anchor = e
    .composedPath()
-    .filter((n) => (n as HTMLElement).tagName === "A")[0] as
+    .find((n) => (n as HTMLElement).tagName === "A") as
    | HTMLAnchorElement
    | undefined;
  if (
@@ -29,8 +29,11 @@ import {
  mdiPowerPlug,
  mdiPowerPlugOff,
  mdiRadioboxBlank,
-  mdiSmoke,
  mdiSnowflake,
+  mdiSmokeDetector,
+  mdiSmokeDetectorAlert,
+  mdiSmokeDetectorVariant,
+  mdiSmokeDetectorVariantAlert,
  mdiSquare,
  mdiSquareOutline,
  mdiStop,
@@ -52,6 +55,8 @@ 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":
@@ -68,7 +73,7 @@ export const binarySensorIcon = (state?: string, stateObj?: HassEntity) => {
    case "tamper":
      return is_off ? mdiCheckCircle : mdiAlertCircle;
    case "smoke":
-      return is_off ? mdiCheckCircle : mdiSmoke;
+      return is_off ? mdiSmokeDetectorVariant : mdiSmokeDetectorVariantAlert;
    case "heat":
      return is_off ? mdiThermometer : mdiFire;
    case "light":
@@ -13,6 +13,7 @@ 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,
@@ -28,11 +29,27 @@ 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
@@ -8,26 +8,25 @@ import {
  mdiCalendar,
  mdiCast,
  mdiCastConnected,
+  mdiCheckCircleOutline,
  mdiClock,
+  mdiCloseCircleOutline,
  mdiGestureTapButton,
  mdiLanConnect,
  mdiLanDisconnect,
-  mdiLightSwitch,
  mdiLock,
  mdiLockAlert,
  mdiLockClock,
  mdiLockOpen,
+  mdiPackage,
+  mdiPackageDown,
  mdiPackageUp,
  mdiPowerPlug,
  mdiPowerPlugOff,
  mdiRestart,
-  mdiToggleSwitch,
-  mdiToggleSwitchOff,
-  mdiCheckCircleOutline,
-  mdiCloseCircleOutline,
+  mdiToggleSwitchVariant,
+  mdiToggleSwitchVariantOff,
  mdiWeatherNight,
-  mdiPackage,
-  mdiPackageDown,
 } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 import { updateIsInstalling, UpdateEntity } from "../../data/update";
@@ -109,9 +108,11 @@ export const domainIcon = (
        case "outlet":
          return compareState === "on" ? mdiPowerPlug : mdiPowerPlugOff;
        case "switch":
-          return compareState === "on" ? mdiToggleSwitch : mdiToggleSwitchOff;
+          return compareState === "on"
+            ? mdiToggleSwitchVariant
+            : mdiToggleSwitchVariantOff;
        default:
-          return mdiLightSwitch;
+          return mdiToggleSwitchVariant;
      }

    case "sensor": {
@@ -1,244 +0,0 @@
-// 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,
-}
@@ -1,551 +0,0 @@
-/* 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)
-  );
-}
@@ -1,52 +1,4 @@
-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;
-};
+import fuzzysort from "fuzzysort";

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

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

-export const fuzzyFilterSort: FuzzyFilterSort = (filter, items) =>
-  items
+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
    .map((item) => {
-      item.score = fuzzySequentialMatch(filter, item);
+      item.score = scorer(item.strings);
      return item;
    })
-    .filter((item) => item.score !== undefined)
+    .filter((item) => item.score !== undefined && item.score > -100000)
    .sort(({ score: scoreA = 0 }, { score: scoreB = 0 }) =>
      scoreA > scoreB ? -1 : scoreA < scoreB ? 1 : 0
    );
+};
+
+export const defaultFuzzyFilterSort = fuzzySortFilterSort;
@@ -1,4 +1,4 @@
-export const promiseTimeout = (ms: number, promise: Promise<any>) => {
+export const promiseTimeout = (ms: number, promise: Promise<any> | any) => {
  const timeout = new Promise((_resolve, reject) => {
    setTimeout(() => {
      reject(`Timed out in ${ms} ms.`);
@@ -0,0 +1,18 @@
+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);
+};
@@ -347,8 +347,8 @@ class StatisticsChart extends LitElement {
        statTypes.forEach((type) => {
          let val: number | null;
          if (type === "sum") {
-            if (!initVal) {
-              initVal = val = stat.state;
+            if (initVal === null) {
+              initVal = val = stat.state || 0;
              prevSum = stat.sum;
            } else {
              val = initVal + ((stat.sum || 0) - prevSum!);
@@ -1,165 +1,167 @@
+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 [
-    "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",
-  ]) {
+  for (const currency of currencies) {
    const option = document.createElement("option");
    option.value = currency;
    option.innerHTML = currency;
@@ -7,25 +7,26 @@ import type {
  SortableColumnContainer,
  SortingDirection,
 } from "./ha-data-table";
+import { fuzzyMatcher } from "../../common/string/filter/sequence-matching";

 const filterData = (
  data: DataTableRowData[],
  columns: SortableColumnContainer,
  filter: string
 ) => {
-  filter = filter.toUpperCase();
+  const matcher = fuzzyMatcher(filter);
  return data.filter((row) =>
    Object.entries(columns).some((columnEntry) => {
      const [key, column] = columnEntry;
      if (column.filterable) {
        if (
-          String(
-            column.filterKey
-              ? row[column.valueColumn || key][column.filterKey]
-              : row[column.valueColumn || key]
+          matcher(
+            String(
+              column.filterKey
+                ? row[column.valueColumn || key][column.filterKey]
+                : row[column.valueColumn || key]
+            )
          )
-            .toUpperCase()
-            .includes(filter)
        ) {
          return true;
        }
@@ -5,6 +5,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import {
  DeviceAutomation,
  deviceAutomationsEqual,
+  sortDeviceAutomations,
 } from "../../data/device_automation";
 import { HomeAssistant } from "../../types";
 import "../ha-select";
@@ -127,7 +128,9 @@ export abstract class HaDeviceAutomationPicker<

  private async _updateDeviceInfo() {
    this._automations = this.deviceId
-      ? await this._fetchDeviceAutomations(this.hass, this.deviceId)
+      ? (await this._fetchDeviceAutomations(this.hass, this.deviceId)).sort(
+          sortDeviceAutomations
+        )
      : // No device, clear the list of automations
        [];

@@ -161,8 +164,9 @@ export abstract class HaDeviceAutomationPicker<
    if (this.value && deviceAutomationsEqual(automation, this.value)) {
      return;
    }
-    fireEvent(this, "change");
-    fireEvent(this, "value-changed", { value: automation });
+    const value = { ...automation };
+    delete value.metadata;
+    fireEvent(this, "value-changed", { value });
  }

  static get styles(): CSSResultGroup {
@@ -52,6 +52,8 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {

  @property() public value?: string;

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

  @property() public areas?: AreaRegistryEntry[];
@@ -196,9 +198,10 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
          this.hass,
          deviceEntityLookup[device.id]
        ),
-        area: 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]
+            ? areaLookup[device.area_id].name
+            : this.hass.localize("ui.components.device-picker.no_area"),
      }));
      if (!outputDevices.length) {
        return [
@@ -269,6 +272,7 @@ 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}
@@ -4,6 +4,7 @@ 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 {
@@ -11,6 +12,10 @@ class HaDevicesPicker extends LitElement {

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

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

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

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

+  @property() public deviceFilter?: HaDevicePickerDeviceFilterFunc;
+
  protected render(): TemplateResult {
    if (!this.hass) {
      return html``;
@@ -51,11 +58,13 @@ 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>
@@ -63,12 +72,16 @@ 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}
-          .required=${this.required}
+          .disabled=${this.disabled}
+          .required=${this.required && !currentDevices.length}
          @value-changed=${this._addDevice}
        ></ha-device-picker>
      </div>
@@ -14,8 +14,12 @@ 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}
@@ -94,6 +98,7 @@ class HaEntitiesPickerLight extends LitElement {
              .entityFilter=${this._entityFilter}
              .value=${entityId}
              .label=${this.pickedEntityLabel}
+              .disabled=${this.disabled}
              @value-changed=${this._entityChanged}
            ></ha-entity-picker>
          </div>
@@ -101,6 +106,7 @@ class HaEntitiesPickerLight extends LitElement {
      )}
      <div>
        <ha-entity-picker
+          allow-custom-entity
          .hass=${this.hass}
          .includeDomains=${this.includeDomains}
          .excludeDomains=${this.excludeDomains}
@@ -110,7 +116,9 @@ class HaEntitiesPickerLight extends LitElement {
          .includeUnitOfMeasurement=${this.includeUnitOfMeasurement}
          .entityFilter=${this._entityFilter}
          .label=${this.pickEntityLabel}
-          .required=${this.required}
+          .helper=${this.helper}
+          .disabled=${this.disabled}
+          .required=${this.required && !currentEntities.length}
          @value-changed=${this._addEntity}
        ></ha-entity-picker>
      </div>
@@ -28,6 +28,8 @@ 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;
@@ -64,6 +66,7 @@ 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"
@@ -15,6 +15,7 @@ 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;
@@ -48,6 +49,8 @@ export class HaEntityPicker extends LitElement {

  @property() public value?: string;

+  @property() public helper?: string;
+
  /**
   * Show entities from specific domains.
   * @type {Array}
@@ -304,6 +307,7 @@ 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}
@@ -333,11 +337,18 @@ export class HaEntityPicker extends LitElement {
  }

  private _filterChanged(ev: CustomEvent): void {
-    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)
+    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
    );
  }

@@ -13,9 +13,12 @@ import { HaComboBox } from "./ha-combo-box";

 const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (
  item
-) => html`<mwc-list-item twoline>
+) => html`<mwc-list-item twoline graphic="icon">
  <span>${item.name}</span>
  <span slot="secondary">${item.slug}</span>
+  ${item.icon
+    ? html`<img slot="graphic" .src="/api/hassio/addons/${item.slug}/icon" />`
+    : ""}
 </mwc-list-item>`;

@customElement("ha-addon-picker")
@@ -26,6 +29,8 @@ class HaAddonPicker extends LitElement {

  @property() public value = "";

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

  @property({ type: Boolean }) public disabled = false;
@@ -59,6 +64,7 @@ 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"
@@ -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 { Analytics, AnalyticsPreferences } from "../data/analytics";
+import type { Analytics, AnalyticsPreferences } from "../data/analytics";
 import { haStyle } from "../resources/styles";
-import { HomeAssistant } from "../types";
-import "./ha-checkbox";
-import type { HaCheckbox } from "./ha-checkbox";
+import type { HomeAssistant } from "../types";
 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="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>`
+          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>
+          `
      )}
      <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 _handleRowCheckboxClick(ev: Event) {
-    const checkbox = ev.currentTarget as HaCheckbox;
-    const preference = (checkbox as any).preference;
+  private _handleRowClick(ev: Event) {
+    const target = ev.currentTarget as HaSwitch;
+    const preference = (target as any).preference;
    const preferences = this.analytics ? { ...this.analytics.preferences } : {};

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

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

    if (
      ADDITIONAL_PREFERENCES.some((entry) => entry.key === preference) &&
-      checkbox.checked
+      target.checked
    ) {
      preferences.base = true;
-    } else if (preference === "base" && !checkbox.checked) {
+    } else if (preference === "base" && !target.checked) {
      preferences.usage = false;
      preferences.statistics = false;
    }
@@ -10,8 +10,8 @@ interface State {
  backgroundColor: null | string;
 }

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

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

 declare global {
  interface HTMLElementTagNameMap {
-    "hassio-ansi-to-html": HassioAnsiToHtml;
+    "ha-ansi-to-html": HaAnsiToHtml;
  }
 }
@@ -49,6 +49,8 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {

  @property() public value?: string;

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

  @property({ type: Boolean, attribute: "no-add" })
@@ -312,6 +314,7 @@ 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"
@@ -406,7 +409,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
            name,
          });
          this._areas = [...this._areas!, area];
-          (this.comboBox as any).items = this._getAreas(
+          (this.comboBox as any).filteredItems = this._getAreas(
            this._areas!,
            this._devices!,
            this._entities!,
@@ -15,6 +15,8 @@ export class HaAreasPicker extends SubscribeMixin(LitElement) {

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

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

  @property({ type: Boolean, attribute: "no-add" })
@@ -90,6 +92,7 @@ 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}
@@ -97,7 +100,7 @@ export class HaAreasPicker extends SubscribeMixin(LitElement) {
          .entityFilter=${this.entityFilter}
          .disabled=${this.disabled}
          .placeholder=${this.placeholder}
-          .required=${this.required}
+          .required=${this.required && !currentAreas.length}
          @value-changed=${this._addArea}
        ></ha-area-picker>
      </div>
@@ -5,6 +5,7 @@ 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;
@@ -130,7 +131,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
@@ -253,7 +254,9 @@ export class HaBaseTimeInput extends LitElement {
              <mwc-list-item value="PM">PM</mwc-list-item>
            </ha-select>`}
      </div>
-      ${this.helper ? html`<div class="helper">${this.helper}</div>` : ""}
+      ${this.helper
+        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
+        : ""}
    `;
  }

@@ -307,6 +310,7 @@ 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;
@@ -350,13 +354,6 @@ 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;
-    }
  `;
 }

@@ -117,6 +117,19 @@ 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;
+      }
    `;
  }
 }
@@ -0,0 +1,76 @@
+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;
+
+  @property({ type: Boolean, reflect: true }) public openNewTab = 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"
+          target=${this.openNewTab ? "_blank" : ""}
+          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);
+          overflow: hidden;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-clickable-list-item": HaClickableListItem;
+  }
+}
@@ -64,6 +64,8 @@ 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;
@@ -147,6 +149,8 @@ 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>
@@ -246,6 +250,18 @@ 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;
+      }
    `;
  }
 }
@@ -39,11 +39,15 @@ 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)
@@ -98,6 +98,10 @@ export class HaDialog extends DialogBase {
        margin-left: 40px;
        margin-right: 0px;
      }
+      :host-context([style*="direction: rtl;"]) .dialog-actions {
+        left: 0px !important;
+        right: auto !important;
+      }
    `,
  ];
 }
@@ -1,5 +1,6 @@
 import { Fab } from "@material/mwc-fab";
 import { customElement } from "lit/decorators";
+import { css } from "lit";

@customElement("ha-fab")
 export class HaFab extends Fab {
@@ -7,6 +8,17 @@ 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 {
@@ -176,10 +176,24 @@ 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);
@@ -132,6 +132,11 @@ export class HaFormString extends LitElement implements HaFormElement {
        --mdc-icon-button-size: 24px;
        color: var(--secondary-text-color);
      }
+
+      :host-context([style*="direction: rtl;"]) ha-icon-button {
+        right: auto;
+        left: 12px;
+      }
    `;
  }
 }
@@ -77,7 +77,7 @@ export class HaForm extends LitElement implements HaFormElement {

  protected render(): TemplateResult {
    return html`
-      <div class="root">
+      <div class="root" part="root">
        ${this.error && this.error.base
          ? html`
              <ha-alert alert-type="error">
@@ -173,7 +173,6 @@ 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;
@@ -31,6 +31,8 @@ export class HaIconPicker extends LitElement {

  @property() public label?: string;

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

  @property() public fallbackPath?: string;
@@ -57,6 +59,7 @@ 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}
@@ -0,0 +1,25 @@
+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;
+  }
+}
@@ -46,11 +46,14 @@ 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.required ? "*" : ""}`;
+    return `${this.caption}${this.caption && this.required ? " *" : ""}`;
  }

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

      extra: {
        type: Boolean,
@@ -3,7 +3,6 @@ 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";
@@ -43,18 +42,15 @@ class HaMenuButton extends LitElement {

  protected render(): TemplateResult {
    const hasNotifications =
-      (this.narrow || this.hass.dockedSidebar === "always_hidden") &&
-      (this._hasNotifications ||
-        Object.keys(this.hass.states).some(
-          (entityId) => computeDomain(entityId) === "configurator"
-        ));
+      this._hasNotifications &&
+      (this.narrow || this.hass.dockedSidebar === "always_hidden");
    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>` : ""}
    `;
  }

@@ -0,0 +1,79 @@
+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;
+  }
+}
@@ -0,0 +1,90 @@
+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;
+    }
+    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;
+  }
+}
@@ -163,6 +163,9 @@ 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"],
@@ -47,6 +47,10 @@ 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;
+      }
    `,
  ];
 }
@@ -14,6 +14,8 @@ 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;
@@ -23,6 +25,7 @@ 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
@@ -18,6 +18,8 @@ export class HaAreaSelector extends LitElement {

  @property() public label?: string;

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

  @property({ type: Boolean }) public disabled = false;
@@ -47,6 +49,7 @@ 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}
@@ -66,6 +69,7 @@ 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}
@@ -16,6 +16,8 @@ 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;
@@ -32,6 +34,7 @@ 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
@@ -4,6 +4,7 @@ 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 {
@@ -13,16 +14,23 @@ 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>`;
+    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>`
+        : ""}
+    `;
  }

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

  static get styles(): CSSResultGroup {
    return css`
-      :host {
-        height: 56px;
-        display: flex;
-      }
      ha-formfield {
-        width: 100%;
+        display: flex;
+        height: 56px;
+        align-items: center;
        --mdc-typography-body2-font-size: 1em;
      }
    `;
@@ -16,6 +16,8 @@ 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;
@@ -24,9 +26,11 @@ 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>
@@ -15,6 +15,8 @@ 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;
@@ -24,11 +26,12 @@ export class HaColorTempSelector extends LitElement {
      <ha-labeled-slider
        pin
        icon="hass:thermometer"
-        .caption=${this.label}
-        .min=${this.selector.color_temp.min_mireds ?? 153}
-        .max=${this.selector.color_temp.max_mireds ?? 500}
+        .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>
@@ -14,6 +14,8 @@ 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;
@@ -26,6 +28,7 @@ export class HaDateSelector extends LitElement {
        .disabled=${this.disabled}
        .value=${this.value}
        .required=${this.required}
+        .helper=${this.helper}
      >
      </ha-date-input>
    `;
@@ -6,6 +6,7 @@ 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")
@@ -18,6 +19,8 @@ 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;
@@ -30,23 +33,28 @@ export class HaDateTimeSelector extends LitElement {
    const values = this.value?.split(" ");

    return html`
-      <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 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>`
+        : ""}
    `;
  }

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

  static styles = css`
-    :host {
+    .input {
      display: flex;
      align-items: center;
      flex-direction: row;
@@ -17,6 +17,8 @@ export class HaDeviceSelector extends LitElement {

  @property() public label?: string;

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

  @property({ type: Boolean }) public disabled = false;
@@ -43,6 +45,7 @@ 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]
@@ -62,12 +65,15 @@ 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>
    `;
@@ -23,6 +23,8 @@ 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;
@@ -33,6 +35,7 @@ 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}
@@ -47,9 +50,11 @@ export class HaEntitySelector extends LitElement {
      <ha-entities-picker
        .hass=${this.hass}
        .value=${this.value}
-        .entityFilter=${this._filterEntities}
+        .helper=${this.helper}
        .includeEntities=${this.selector.entity.include_entities}
        .excludeEntities=${this.selector.entity.exclude_entities}
+        .entityFilter=${this._filterEntities}
+        .disabled=${this.disabled}
        .required=${this.required}
      ></ha-entities-picker>
    `;
@@ -15,6 +15,8 @@ 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;
@@ -26,6 +28,7 @@ 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}
@@ -1,4 +1,4 @@
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -20,6 +20,8 @@ export class HaLocationSelector extends LitElement {

  @property() public label?: string;

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

  protected render() {
@@ -27,6 +29,7 @@ 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}
@@ -73,6 +76,13 @@ 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 {
@@ -33,6 +33,8 @@ 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;
@@ -86,6 +88,7 @@ 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
@@ -6,6 +6,7 @@ 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 {
@@ -26,8 +27,13 @@ export class HaNumberSelector extends LitElement {
  @property({ type: Boolean }) public disabled = false;

  protected render() {
-    return html`${this.selector.number.mode !== "box"
-        ? html`${this.label}${this.required ? "*" : ""}<ha-slider
+    const isBox = this.selector.number.mode === "box";
+
+    return html`
+      ${this.label ? html`${this.label}${this.required ? " *" : ""}` : ""}
+      <div class="input">
+        ${!isBox
+          ? html`<ha-slider
              .min=${this.selector.number.min}
              .max=${this.selector.number.max}
              .value=${this._value}
@@ -39,28 +45,33 @@ 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() {
@@ -92,10 +103,11 @@ export class HaNumberSelector extends LitElement {

  static get styles(): CSSResultGroup {
    return css`
-      :host {
+      .input {
        display: flex;
        justify-content: space-between;
        align-items: center;
+        direction: ltr;
      }
      ha-slider {
        flex: 1;
@@ -3,6 +3,7 @@ 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 {
@@ -12,6 +13,8 @@ export class HaObjectSelector extends LitElement {

  @property() public label?: string;

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

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

  protected render() {
    return html`<ha-yaml-editor
-      .hass=${this.hass}
-      .readonly=${this.disabled}
-      .required=${this.required}
-      .placeholder=${this.placeholder}
-      .defaultValue=${this.value}
-      @value-changed=${this._handleChange}
-    ></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>`
+        : ""} `;
  }

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

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

@@ -107,8 +109,9 @@ export class HaSelectSelector extends LitElement {
          item-label-path="label"
          .hass=${this.hass}
          .label=${this.label}
+          .helper=${this.helper}
          .disabled=${this.disabled}
-          .required=${this.required}
+          .required=${this.required && !value.length}
          .value=${this._filter}
          .items=${options.filter((item) => !this.value?.includes(item.value))}
          @filter-changed=${this._filterChanged}
@@ -131,6 +134,7 @@ 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}
@@ -161,6 +165,12 @@ 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 ||
@@ -26,6 +26,8 @@ export class HaTargetSelector extends SubscribeMixin(LitElement) {

  @property() public label?: string;

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

  @state() private _configEntries?: ConfigEntry[];
@@ -64,6 +66,7 @@ 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}
@@ -0,0 +1,56 @@
+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;
+  }
+}
@@ -14,6 +14,8 @@ 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;
@@ -25,6 +27,7 @@ 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>
@@ -18,6 +18,7 @@ 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";
@@ -472,6 +472,7 @@ 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)
@@ -47,7 +47,7 @@ export class HaSettingsRow extends LitElement {
        display: contents;
      }
      :host(:not([narrow])) .content {
-        display: flex;
+        display: var(--settings-row-content-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: contents;
+        display: var(--settings-row-prefix-display);
      }
      :host([narrow]) .prefix-wrap {
        display: flex;
@@ -36,10 +36,9 @@ 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,
@@ -294,11 +293,7 @@ class HaSidebar extends LitElement {
      toggleAttribute(this, "rtl", computeRTL(this.hass));
    }

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

    if (!SUPPORT_SCROLL_IF_NEEDED) {
      return;
@@ -312,6 +307,21 @@ 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"
@@ -519,14 +529,9 @@ class HaSidebar extends LitElement {
  }

  private _renderNotifications() {
-    let notificationCount = this._notifications
+    const 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"
@@ -1034,6 +1039,8 @@ 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%;
@@ -1044,9 +1051,6 @@ 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;
@@ -43,6 +43,7 @@ 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) {
@@ -52,6 +53,8 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {

  @property() public label?: string;

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

  private async _showPicker(ev) {
@@ -609,6 +616,10 @@ 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;
+      }
    `;
  }
 }
@@ -91,6 +91,19 @@ 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;
+      }
    `,
  ];
 }
@@ -14,6 +14,8 @@ 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;
@@ -46,6 +48,7 @@ export class HaTimeInput extends LitElement {
        @value-changed=${this._timeChanged}
        .enableSecond=${this.enableSecond}
        .required=${this.required}
+        .helper=${this.helper}
      ></ha-base-time-input>
    `;
  }
@@ -0,0 +1,38 @@
+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;
+  }
+}
@@ -61,7 +61,9 @@ 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}
@@ -19,6 +19,7 @@ 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";

@@ -50,6 +51,8 @@ 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;
@@ -102,13 +105,18 @@ 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>`;
+    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>`
+        : ""}
+    `;
  }

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

  static get styles(): CSSResultGroup {
    return css`
-      :host {
-        display: block;
-        height: 300px;
-      }
      ha-map {
+        display: block;
        height: 100%;
      }
    `;
@@ -302,6 +302,10 @@ class DialogMediaManage extends LitElement {
          --mdc-theme-primary: var(--mdc-theme-on-primary);
        }

+        mwc-list {
+          direction: ltr;
+        }
+
        .danger {
          --mdc-theme-primary: var(--error-color);
        }
@@ -310,6 +314,11 @@ class DialogMediaManage extends LitElement {
          vertical-align: middle;
        }

+        :host-context([style*="direction: rtl;"]) ha-svg-icon[slot="icon"] {
+          margin-left: 8px !important;
+          margin-right: 0px !important;
+        }
+
        .refresh {
          display: flex;
          height: 200px;
@@ -151,6 +151,8 @@ class DialogMediaPlayerBrowse extends LitElement {

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

        @media (min-width: 800px) {
@@ -163,6 +165,7 @@ class DialogMediaPlayerBrowse extends LitElement {
          ha-media-player-browse {
            position: initial;
            --media-browser-max-height: 100vh - 137px;
+            height: 100vh - 137px;
            width: 700px;
          }
        }
@@ -59,6 +59,11 @@ class MediaManageButton extends LitElement {
    ha-circular-progress[slot="icon"] {
      vertical-align: middle;
    }
+
+    :host-context([style*="direction: rtl;"]) ha-svg-icon[slot="icon"] {
+      margin-left: 8px;
+      margin-right: 0px;
+    }
  `;
 }

--- a/Show More
+++ b/Show More