Merge pull request #12233 from home-assistant/dev

Co-authored-by: Joakim Sørensen <ludeeus@ludeeus.dev> Co-authored-by: Philip Allgaier <mail@spacegaier.de> Co-authored-by: Zack Barett <zackbarett@hey.com>
2025-07-23 01:06:35 +00:00 · 2022-04-05 18:02:02 -05:00 · 2022-04-05 18:02:02 -05:00 · d02cd122a9
commit d02cd122a9
parent 8e962fdecb a1a6a2cd30
55 changed files with 402 additions and 143 deletions
--- a/gallery/src/pages/components/ha-selector.ts
+++ b/gallery/src/pages/components/ha-selector.ts
@ -261,6 +261,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 +420,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 +455,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 +476,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;
--- a/hassio/src/components/supervisor-backup-content.ts
+++ b/hassio/src/components/supervisor-backup-content.ts
@ -180,7 +180,7 @@ export class SupervisorBackupContent extends LitElement {
            >
              <ha-checkbox
                .checked=${this.homeAssistant}
-                @click=${this.toggleHomeAssistant}
+                @change=${this.toggleHomeAssistant}
              >
              </ha-checkbox>
            </ha-formfield>
--- a/setup.cfg
+++ b/setup.cfg
@ -1,6 +1,6 @@
 [metadata]
 name         = home-assistant-frontend
-version      = 20220401.0
+version      = 20220405.0
 author       = The Home Assistant Authors
 author_email = hello@home-assistant.io
 license      = Apache-2.0
--- a/src/components/device/ha-device-picker.ts
+++ b/src/components/device/ha-device-picker.ts
@ -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[];
@ -269,6 +271,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}
--- a/src/components/device/ha-devices-picker.ts
+++ b/src/components/device/ha-devices-picker.ts
@ -11,6 +11,8 @@ class HaDevicesPicker extends LitElement {

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

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

  /**
@ -64,6 +66,7 @@ class HaDevicesPicker extends LitElement {
      <div>
        <ha-device-picker
          .hass=${this.hass}
+          .helper=${this.helper}
          .includeDomains=${this.includeDomains}
          .excludeDomains=${this.excludeDomains}
          .includeDeviceClasses=${this.includeDeviceClasses}
--- a/src/components/entity/ha-entities-picker.ts
+++ b/src/components/entity/ha-entities-picker.ts
@ -16,6 +16,8 @@ class HaEntitiesPickerLight extends LitElement {

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

+  @property() public helper?: string;
+
  /**
   * Show entities from specific domains.
   * @type {string}
@ -110,6 +112,7 @@ class HaEntitiesPickerLight extends LitElement {
          .includeUnitOfMeasurement=${this.includeUnitOfMeasurement}
          .entityFilter=${this._entityFilter}
          .label=${this.pickEntityLabel}
+          .helper=${this.helper}
          .required=${this.required && !currentEntities.length}
          @value-changed=${this._addEntity}
        ></ha-entity-picker>
--- a/src/components/entity/ha-entity-attribute-picker.ts
+++ b/src/components/entity/ha-entity-attribute-picker.ts
@ -28,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"
--- a/src/components/entity/ha-entity-picker.ts
+++ b/src/components/entity/ha-entity-picker.ts
@ -48,6 +48,8 @@ export class HaEntityPicker extends LitElement {

  @property() public value?: string;

+  @property() public helper?: string;
+
  /**
   * Show entities from specific domains.
   * @type {Array}
@ -304,6 +306,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}
--- a/src/components/ha-addon-picker.ts
+++ b/src/components/ha-addon-picker.ts
@ -29,6 +29,8 @@ class HaAddonPicker extends LitElement {

  @property() public value = "";

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

  @property({ type: Boolean }) public disabled = false;
@ -62,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"
--- a/src/components/ha-area-picker.ts
+++ b/src/components/ha-area-picker.ts
@ -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"
--- a/src/components/ha-areas-picker.ts
+++ b/src/components/ha-areas-picker.ts
@ -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}
--- a/src/components/ha-base-time-input.ts
+++ b/src/components/ha-base-time-input.ts
@ -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;
@ -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>`
+        : ""}
    `;
  }

@ -350,13 +353,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;
-    }
  `;
 }

--- a/src/components/ha-combo-box.ts
+++ b/src/components/ha-combo-box.ts
@ -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>
--- a/src/components/ha-date-input.ts
+++ b/src/components/ha-date-input.ts
@ -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)
--- a/src/components/ha-form/ha-form.ts
+++ b/src/components/ha-form/ha-form.ts
@ -77,7 +77,7 @@ export class HaForm extends LitElement implements HaFormElement {

  protected render(): TemplateResult {
    return html`
-      <div class="root">
+      <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;
--- a/src/components/ha-icon-picker.ts
+++ b/src/components/ha-icon-picker.ts
@ -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}
--- a/src/components/ha-input-helper-text.ts
+++ b/src/components/ha-input-helper-text.ts
@ -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;
+  }
+}
--- a/src/components/ha-labeled-slider.js
+++ b/src/components/ha-labeled-slider.js
@ -46,6 +46,9 @@ 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>
    `;
  }

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

      extra: {
        type: Boolean,
--- a/src/components/ha-menu-button.ts
+++ b/src/components/ha-menu-button.ts
@ -3,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>` : ""}
    `;
  }

--- a/src/components/ha-selector/ha-selector-addon.ts
+++ b/src/components/ha-selector/ha-selector-addon.ts
@ -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
--- a/src/components/ha-selector/ha-selector-area.ts
+++ b/src/components/ha-selector/ha-selector-area.ts
@ -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}
--- a/src/components/ha-selector/ha-selector-attribute.ts
+++ b/src/components/ha-selector/ha-selector-attribute.ts
@ -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
--- a/src/components/ha-selector/ha-selector-boolean.ts
+++ b/src/components/ha-selector/ha-selector-boolean.ts
@ -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;
      }
    `;
--- a/src/components/ha-selector/ha-selector-color-rgb.ts
+++ b/src/components/ha-selector/ha-selector-color-rgb.ts
@ -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>
--- a/src/components/ha-selector/ha-selector-color-temp.ts
+++ b/src/components/ha-selector/ha-selector-color-temp.ts
@ -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;
@ -29,6 +31,7 @@ export class HaColorTempSelector extends LitElement {
        .max=${this.selector.color_temp.max_mireds ?? 500}
        .value=${this.value}
        .disabled=${this.disabled}
+        .helper=${this.helper}
        .required=${this.required}
        @change=${this._valueChanged}
      ></ha-labeled-slider>
--- a/src/components/ha-selector/ha-selector-date.ts
+++ b/src/components/ha-selector/ha-selector-date.ts
@ -14,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>
    `;
--- a/src/components/ha-selector/ha-selector-datetime.ts
+++ b/src/components/ha-selector/ha-selector-datetime.ts
@ -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;
--- a/src/components/ha-selector/ha-selector-device.ts
+++ b/src/components/ha-selector/ha-selector-device.ts
@ -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,6 +65,7 @@ export class HaDeviceSelector extends LitElement {
      <ha-devices-picker
        .hass=${this.hass}
        .value=${this.value}
+        .helper=${this.helper}
        .includeDeviceClasses=${this.selector.device.entity?.device_class
          ? [this.selector.device.entity.device_class]
          : undefined}
--- a/src/components/ha-selector/ha-selector-entity.ts
+++ b/src/components/ha-selector/ha-selector-entity.ts
@ -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,6 +50,7 @@ export class HaEntitySelector extends LitElement {
      <ha-entities-picker
        .hass=${this.hass}
        .value=${this.value}
+        .helper=${this.helper}
        .entityFilter=${this._filterEntities}
        .includeEntities=${this.selector.entity.include_entities}
        .excludeEntities=${this.selector.entity.exclude_entities}
--- a/src/components/ha-selector/ha-selector-icon.ts
+++ b/src/components/ha-selector/ha-selector-icon.ts
@ -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}
--- a/src/components/ha-selector/ha-selector-location.ts
+++ b/src/components/ha-selector/ha-selector-location.ts
@ -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}
--- a/src/components/ha-selector/ha-selector-media.ts
+++ b/src/components/ha-selector/ha-selector-media.ts
@ -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
--- a/src/components/ha-selector/ha-selector-number.ts
+++ b/src/components/ha-selector/ha-selector-number.ts
@ -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}${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,7 +103,7 @@ export class HaNumberSelector extends LitElement {

  static get styles(): CSSResultGroup {
    return css`
-      :host {
+      .input {
        display: flex;
        justify-content: space-between;
        align-items: center;
--- a/src/components/ha-selector/ha-selector-select.ts
+++ b/src/components/ha-selector/ha-selector-select.ts
@ -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,6 +109,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 && !value.length}
          .value=${this._filter}
@ -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 ||
--- a/src/components/ha-selector/ha-selector-target.ts
+++ b/src/components/ha-selector/ha-selector-target.ts
@ -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}
--- a/src/components/ha-selector/ha-selector-time.ts
+++ b/src/components/ha-selector/ha-selector-time.ts
@ -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>
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@ -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"
--- a/src/components/ha-target-picker.ts
+++ b/src/components/ha-target-picker.ts
@ -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) {
--- a/src/components/ha-time-input.ts
+++ b/src/components/ha-time-input.ts
@ -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>
    `;
  }
--- a/src/components/map/ha-locations-editor.ts
+++ b/src/components/map/ha-locations-editor.ts
@ -21,6 +21,7 @@ import type { LeafletModuleType } from "../../common/dom/setup-leaflet-map";
 import type { HomeAssistant } from "../../types";
 import "./ha-map";
 import type { HaMap } from "./ha-map";
+import "../ha-input-helper-text";

 declare global {
  // for fire event
@ -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,13 +295,10 @@ export class HaLocationsEditor extends LitElement {

  static get styles(): CSSResultGroup {
    return css`
-      :host {
+      ha-map {
        display: block;
        height: 300px;
      }
-      ha-map {
-        height: 100%;
-      }
    `;
  }
 }
--- a/src/dialogs/config-flow/dialog-data-entry-flow.ts
+++ b/src/dialogs/config-flow/dialog-data-entry-flow.ts
@ -29,6 +29,7 @@ import {
  DeviceRegistryEntry,
  subscribeDeviceRegistry,
 } from "../../data/device_registry";
+import { fetchIntegrationManifest } from "../../data/integration";
 import { haStyleDialog } from "../../resources/styles";
 import type { HomeAssistant } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
@ -43,10 +44,10 @@ import "./step-flow-create-entry";
 import "./step-flow-external";
 import "./step-flow-form";
 import "./step-flow-loading";
+import "./step-flow-menu";
 import "./step-flow-pick-flow";
 import "./step-flow-pick-handler";
 import "./step-flow-progress";
-import "./step-flow-menu";

 let instance = 0;

@ -237,22 +238,32 @@ class DataEntryFlowDialog extends LitElement {
              ""
            : html`
                <div class="dialog-actions">
-                  ${["form", "menu", "external"].includes(
-                    this._step?.type as any
-                  )
+                  ${([
+                    "form",
+                    "menu",
+                    "external",
+                    "progress",
+                    "data_entry_flow_progressed",
+                  ].includes(this._step?.type as any) &&
+                    this._params.manifest?.is_built_in) ||
+                  this._params.manifest?.documentation
                    ? html`
                        <a
-                          href=${documentationUrl(
-                            this.hass,
-                            `/integrations/${this._step!.handler}`
-                          )}
+                          href=${this._params.manifest.is_built_in
+                            ? documentationUrl(
+                                this.hass,
+                                `/integrations/${this._params.manifest.domain}`
+                              )
+                            : this._params?.manifest?.documentation}
                          target="_blank"
                          rel="noreferrer noopener"
-                          ><ha-icon-button
+                        >
+                          <ha-icon-button
                            .label=${this.hass.localize("ui.common.help")}
                            .path=${mdiHelpCircle}
                            ?rtl=${computeRTL(this.hass)}
-                          ></ha-icon-button
+                          >
+                          </ha-icon-button
                        ></a>
                      `
                    : ""}
@ -427,6 +438,17 @@ class DataEntryFlowDialog extends LitElement {
        this._handler = undefined;
      }
      this._processStep(step);
+      if (this._params!.manifest === undefined) {
+        try {
+          this._params!.manifest = await fetchIntegrationManifest(
+            this.hass,
+            this._params?.domain || step.handler
+          );
+        } catch (_) {
+          // No manifest
+          this._params!.manifest = null;
+        }
+      }
    } else {
      this._step = null;
      this._flowsInProgress = flowsInProgress;
--- a/src/dialogs/config-flow/show-dialog-data-entry-flow.ts
+++ b/src/dialogs/config-flow/show-dialog-data-entry-flow.ts
@ -10,6 +10,7 @@ import {
  DataEntryFlowStepMenu,
  DataEntryFlowStepProgress,
 } from "../../data/data_entry_flow";
+import { IntegrationManifest } from "../../data/integration";
 import { HomeAssistant } from "../../types";

 export interface FlowHandlers {
@ -122,6 +123,8 @@ export interface DataEntryFlowDialogParams {
  startFlowHandler?: string;
  searchQuery?: string;
  continueFlowId?: string;
+  manifest?: IntegrationManifest | null;
+  domain?: string;
  dialogClosedCallback?: (params: {
    flowFinished: boolean;
    entryId?: string;
--- a/src/dialogs/config-flow/show-dialog-options-flow.ts
+++ b/src/dialogs/config-flow/show-dialog-options-flow.ts
@ -1,6 +1,6 @@
 import { html } from "lit";
 import { ConfigEntry } from "../../data/config_entries";
-import { domainToName } from "../../data/integration";
+import { domainToName, IntegrationManifest } from "../../data/integration";
 import {
  createOptionsFlow,
  deleteOptionsFlow,
@ -16,12 +16,15 @@ export const loadOptionsFlowDialog = loadDataEntryFlowDialog;

 export const showOptionsFlowDialog = (
  element: HTMLElement,
-  configEntry: ConfigEntry
+  configEntry: ConfigEntry,
+  manifest?: IntegrationManifest | null
 ): void =>
  showFlowDialog(
    element,
    {
      startFlowHandler: configEntry.entry_id,
+      domain: configEntry.domain,
+      manifest,
    },
    {
      loadDevicesAndAreas: false,
--- a/src/dialogs/config-flow/step-flow-form.ts
+++ b/src/dialogs/config-flow/step-flow-form.ts
@ -190,6 +190,10 @@ class StepFlowForm extends LitElement {
          margin-top: 24px;
          display: block;
        }
+        h2 {
+          word-break: break-word;
+          padding-right: 72px;
+        }
      `,
    ];
  }
--- a/src/dialogs/more-info/controls/more-info-fan.js
+++ b/src/dialogs/more-info/controls/more-info-fan.js
@ -35,6 +35,7 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
        .has-direction .container-direction,
        .has-oscillating .container-oscillating {
          display: block;
+          margin-top: 8px;
        }

        ha-select {
--- a/src/dialogs/more-info/controls/more-info-update.ts
+++ b/src/dialogs/more-info/controls/more-info-update.ts
@ -243,6 +243,10 @@ class MoreInfoUpdate extends LitElement {
        width: 100%;
        justify-content: center;
      }
+      mwc-linear-progress {
+        margin-bottom: -10px;
+        margin-top: -10px;
+      }
    `;
  }
 }
--- a/src/panels/config/automation/action/types/ha-automation-action-choose.ts
+++ b/src/panels/config/automation/action/types/ha-automation-action-choose.ts
@ -165,6 +165,9 @@ export class HaChooseAction extends LitElement implements ActionElement {
          right: 0;
          padding: 4px;
        }
+        ha-form::part(root) {
+          overflow: visible;
+        }
      `,
    ];
  }
--- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
@ -442,6 +442,9 @@ export default class HaAutomationTriggerRow extends LitElement {
          z-index: 3;
          --mdc-theme-text-primary-on-background: var(--primary-text-color);
        }
+        .rtl .card-menu {
+          float: left;
+        }
        .triggered {
          cursor: pointer;
          position: absolute;
@ -470,9 +473,6 @@ export default class HaAutomationTriggerRow extends LitElement {
          background-color: var(--accent-color);
          color: var(--text-accent-color, var(--text-primary-color));
        }
-        .rtl .card-menu {
-          float: left;
-        }
        mwc-list-item[disabled] {
          --mdc-theme-text-primary-on-background: var(--disabled-text-color);
        }
--- a/src/panels/config/entities/entity-registry-settings.ts
+++ b/src/panels/config/entities/entity-registry-settings.ts
@ -11,10 +11,13 @@ import {
  TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { domainIcon } from "../../../common/entity/domain_icon";
+import { stringCompare } from "../../../common/string/compare";
+import { LocalizeFunc } from "../../../common/translations/localize";
 import "../../../components/ha-alert";
 import "../../../components/ha-area-picker";
 import "../../../components/ha-expansion-panel";
@ -96,7 +99,7 @@ const OVERRIDE_SENSOR_UNITS = {
  pressure: ["hPa", "Pa", "kPa", "bar", "cbar", "mbar", "mmHg", "inHg", "psi"],
 };

-const SWITCH_AS_DOMAINS = ["light", "lock", "cover", "fan", "siren"];
+const SWITCH_AS_DOMAINS = ["cover", "fan", "light", "lock", "siren"];

@customElement("entity-registry-settings")
 export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
@ -273,22 +276,29 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
                @selected=${this._deviceClassChanged}
                @closed=${stopPropagation}
              >
-                ${this._deviceClassOptions[0].map(
-                  (deviceClass: string) => html`
-                    <mwc-list-item .value=${deviceClass}>
-                      ${this.hass.localize(
-                        `ui.dialogs.entity_registry.editor.device_classes.${domain}.${deviceClass}`
-                      )}
+                ${this._deviceClassesSorted(
+                  domain,
+                  this._deviceClassOptions[0],
+                  this.hass.localize
+                ).map(
+                  (entry) => html`
+                    <mwc-list-item .value=${entry.deviceClass}>
+                      ${entry.label}
                    </mwc-list-item>
                  `
                )}
-                <li divider role="separator"></li>
-                ${this._deviceClassOptions[1].map(
-                  (deviceClass: string) => html`
-                    <mwc-list-item .value=${deviceClass}>
-                      ${this.hass.localize(
-                        `ui.dialogs.entity_registry.editor.device_classes.${domain}.${deviceClass}`
-                      )}
+                ${this._deviceClassOptions[0].length &&
+                this._deviceClassOptions[1].length
+                  ? html`<li divider role="separator"></li>`
+                  : ""}
+                ${this._deviceClassesSorted(
+                  domain,
+                  this._deviceClassOptions[1],
+                  this.hass.localize
+                ).map(
+                  (entry) => html`
+                    <mwc-list-item .value=${entry.deviceClass}>
+                      ${entry.label}
                    </mwc-list-item>
                  `
                )}
@ -296,9 +306,9 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
            `
          : ""}
        ${this._deviceClass &&
-        stateObj.attributes.unit_of_measurement &&
+        stateObj?.attributes.unit_of_measurement &&
        OVERRIDE_SENSOR_UNITS[this._deviceClass]?.includes(
-          stateObj.attributes.unit_of_measurement
+          stateObj?.attributes.unit_of_measurement
        )
          ? html`
              <ha-select
@ -332,10 +342,14 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
              <mwc-list-item value="switch" selected>
                ${domainToName(this.hass.localize, "switch")}</mwc-list-item
              >
-              ${SWITCH_AS_DOMAINS.map(
-                (as_domain) => html`
-                  <mwc-list-item .value=${as_domain}>
-                    ${domainToName(this.hass.localize, as_domain)}
+              <li divider role="separator"></li>
+              ${this._switchAsDomainsSorted(
+                SWITCH_AS_DOMAINS,
+                this.hass.localize
+              ).map(
+                (entry) => html`
+                  <mwc-list-item .value=${entry.domain}>
+                    ${entry.label}
                  </mwc-list-item>
                `
              )}
@ -716,9 +730,31 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
  }

  private async _showOptionsFlow() {
-    showOptionsFlowDialog(this, this._helperConfigEntry!);
+    showOptionsFlowDialog(this, this._helperConfigEntry!, null);
  }

+  private _switchAsDomainsSorted = memoizeOne(
+    (domains: string[], localize: LocalizeFunc) =>
+      domains
+        .map((entry) => ({
+          domain: entry,
+          label: domainToName(localize, entry),
+        }))
+        .sort((a, b) => stringCompare(a.label, b.label))
+  );
+
+  private _deviceClassesSorted = memoizeOne(
+    (domain: string, deviceClasses: string[], localize: LocalizeFunc) =>
+      deviceClasses
+        .map((entry) => ({
+          deviceClass: entry,
+          label: localize(
+            `ui.dialogs.entity_registry.editor.device_classes.${domain}.${entry}`
+          ),
+        }))
+        .sort((a, b) => stringCompare(a.label, b.label))
+  );
+
  static get styles(): CSSResultGroup {
    return [
      haStyle,
--- a/src/panels/config/integrations/ha-config-integrations.ts
+++ b/src/panels/config/integrations/ha-config-integrations.ts
@ -700,6 +700,7 @@ class HaConfigIntegrations extends SubscribeMixin(LitElement) {
        this._handleFlowUpdated();
      },
      startFlowHandler: domain,
+      manifest: this._manifests[domain],
      showAdvanced: this.hass.userData?.showAdvanced,
    });
  }
--- a/src/panels/config/integrations/ha-integration-card.ts
+++ b/src/panels/config/integrations/ha-integration-card.ts
@ -482,7 +482,11 @@ export class HaIntegrationCard extends LitElement {
  );

  private _showOptions(ev) {
-    showOptionsFlowDialog(this, ev.target.closest("ha-card").configEntry);
+    showOptionsFlowDialog(
+      this,
+      ev.target.closest("ha-card").configEntry,
+      this.manifest
+    );
  }

  private _handleRename(ev: CustomEvent<RequestSelectedDetail>): void {
--- a/src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts
+++ b/src/panels/developer-tools/statistics/dialog-statistics-adjust-sum.ts
@ -1,6 +1,7 @@
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-list/mwc-list-item";
 import { mdiChevronRight } from "@mdi/js";
+import formatISO9075 from "date-fns/formatISO9075";
 import {
  css,
  CSSResultGroup,
@ -69,12 +70,11 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {

  public showDialog(params: DialogStatisticsAdjustSumParams): void {
    this._params = params;
+    // moment is in format YYYY-MM-DD HH:mm:ss because of selector
+    // Here we create a date with minutes set to %5
    const now = new Date();
-    this._moment = `${now.getFullYear()}-${
-      now.getMonth() + 1
-    }-${now.getDate()} ${now.getHours()}:${
-      now.getMinutes() - (now.getMinutes() % 5)
-    }:00`;
+    now.setMinutes(now.getMinutes() - (now.getMinutes() % 5), 0);
+    this._moment = formatISO9075(now);
    this._fetchStats();
  }

@ -167,6 +167,9 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
        time. This can mess up your beautiful graphs! Select a time below to
        find the bad moment and adjust the data.
      </div>
+      <div class="text-content">
+        <b>Statistic:</b> ${this._params!.statistic.statistic_id}
+      </div>
      <ha-selector-datetime
        label="Pick a time"
        .hass=${this.hass}
@ -191,7 +194,7 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
  private _renderAdjustStat() {
    return html`
      <div class="text-content">
-        ${this._params!.statistic.name || this._params!.statistic.statistic_id}
+        <b>Statistic:</b> ${this._params!.statistic.statistic_id}
      </div>

      <div class="table-row">
@ -250,7 +253,10 @@ export class DialogStatisticsFixUnsupportedUnitMetadata extends LitElement {
    this._stats5min = undefined;
    this._statsHour = undefined;
    const statId = this._params!.statistic.statistic_id;
-    const moment = new Date(this._moment!);
+
+    // moment is in format YYYY-MM-DD HH:mm:ss because of selector
+    // Here we convert it to an ISO string.
+    const moment = new Date(this._moment!.replace(" ", "T"));

    // Search 3 hours before and 3 hours after chosen time
    const hourStatStart = new Date(moment.getTime());
--- a/src/panels/history/ha-panel-history.ts
+++ b/src/panels/history/ha-panel-history.ts
@ -253,6 +253,10 @@ class HaPanelHistory extends LitElement {
          padding: 8px 16px 0;
        }

+        :host([narrow]) .filters {
+          flex-wrap: wrap;
+        }
+
        ha-date-range-picker {
          margin-right: 16px;
          max-width: 100%;
--- a/src/panels/lovelace/common/entity/turn-on-off-entity.ts
+++ b/src/panels/lovelace/common/entity/turn-on-off-entity.ts
@ -21,6 +21,9 @@ export const turnOnOffEntity = (
    case "input_button":
      service = "press";
      break;
+    case "scene":
+      service = "turn_on";
+      break;
    default:
      service = turnOn ? "turn_on" : "turn_off";
  }
--- a/src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts
@ -15,6 +15,7 @@ import type { LovelaceRowEditor } from "../../types";
 import { entitiesConfigStruct } from "../structs/entities-struct";

 const SecondaryInfoValues: { [key: string]: { domains?: string[] } } = {
+  none: {},
  "entity-id": {},
  "last-changed": {},
  "last-updated": {},