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>

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;

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>

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

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}

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}

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>

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"

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}

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"

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"

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}

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;
-    }
   `;
 }
 

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>

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)

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;

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}

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;
+  }
+}

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,

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

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

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}

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

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}>
+    return html`
-      <ha-switch
+      <ha-formfield alignEnd spaceBetween .label=${this.label}>
-        .checked=${this.value}
+        <ha-switch
-        @change=${this._handleChange}
+          .checked=${this.value}
-        .disabled=${this.disabled}
+          @change=${this._handleChange}
-      ></ha-switch>
+          .disabled=${this.disabled}
-    </ha-formfield>`;
+        ></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;
       }
     `;

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>

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>

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>
     `;

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

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}

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}

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}

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}

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

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"
+    const isBox = this.selector.number.mode === "box";
-        ? html`${this.label}${this.required ? "*" : ""}<ha-slider
+
+    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;

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 ||

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}

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>

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(
+    this._calculateCounts();
-      (entity) =>
-        computeStateDomain(entity) === "update" &&
-        updateCanInstall(entity as UpdateEntity)
-    ).length;
 
     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"

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) {

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>
     `;
   }

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
+    return html`
-      .hass=${this.hass}
+      <ha-map
-      .layers=${this._getLayers(this._circles, this._locationMarkers)}
+        .hass=${this.hass}
-      .zoom=${this.zoom}
+        .layers=${this._getLayers(this._circles, this._locationMarkers)}
-      .autoFit=${this.autoFit}
+        .zoom=${this.zoom}
-      .darkMode=${this.darkMode}
+        .autoFit=${this.autoFit}
-    ></ha-map>`;
+        .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%;
-      }
     `;
   }
 }

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(
+                          href=${this._params.manifest.is_built_in
-                            this.hass,
+                            ? documentationUrl(
-                            `/integrations/${this._step!.handler}`
+                                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;

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;

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,

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;
+        }
       `,
     ];
   }

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 {

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;
+      }
     `;
   }
 }

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;
+        }
       `,
     ];
   }

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);
         }

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(
+                ${this._deviceClassesSorted(
-                  (deviceClass: string) => html`
+                  domain,
-                    <mwc-list-item .value=${deviceClass}>
+                  this._deviceClassOptions[0],
-                      ${this.hass.localize(
+                  this.hass.localize
-                        `ui.dialogs.entity_registry.editor.device_classes.${domain}.${deviceClass}`
+                ).map(
-                      )}
+                  (entry) => html`
+                    <mwc-list-item .value=${entry.deviceClass}>
+                      ${entry.label}
                     </mwc-list-item>
                   `
                 )}
-                <li divider role="separator"></li>
+                ${this._deviceClassOptions[0].length &&
-                ${this._deviceClassOptions[1].map(
+                this._deviceClassOptions[1].length
-                  (deviceClass: string) => html`
+                  ? html`<li divider role="separator"></li>`
-                    <mwc-list-item .value=${deviceClass}>
+                  : ""}
-                      ${this.hass.localize(
+                ${this._deviceClassesSorted(
-                        `ui.dialogs.entity_registry.editor.device_classes.${domain}.${deviceClass}`
+                  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(
+              <li divider role="separator"></li>
-                (as_domain) => html`
+              ${this._switchAsDomainsSorted(
-                  <mwc-list-item .value=${as_domain}>
+                SWITCH_AS_DOMAINS,
-                    ${domainToName(this.hass.localize, as_domain)}
+                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,

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,
     });
   }

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 {

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.setMinutes(now.getMinutes() - (now.getMinutes() % 5), 0);
-      now.getMonth() + 1
+    this._moment = formatISO9075(now);
-    }-${now.getDate()} ${now.getHours()}:${
-      now.getMinutes() - (now.getMinutes() % 5)
-    }:00`;
     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());

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%;

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";
   }

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": {},