Add use_uuid

build-scripts/webpack.js

@@ -3,10 +3,10 @@ const webpack = require("webpack");
 const path = require("path");
 const TerserPlugin = require("terser-webpack-plugin");
 const { WebpackManifestPlugin } = require("webpack-manifest-plugin");
-const log = require("fancy-log");
-const WebpackBar = require("webpackbar");
 const paths = require("./paths.js");
 const bundle = require("./bundle.js");
+const log = require("fancy-log");
+const WebpackBar = require("webpackbar");
 
 class LogStartCompilePlugin {
   ignoredFirst = false;
@@ -138,8 +138,6 @@ const createWebpackConfig = ({
         "lit/directives/cache$": "lit/directives/cache.js",
         "lit/directives/repeat$": "lit/directives/repeat.js",
         "lit/polyfill-support$": "lit/polyfill-support.js",
-        "@lit-labs/virtualizer/layouts/grid":
-          "@lit-labs/virtualizer/layouts/grid.js",
       },
     },
     output: {

demo/src/stubs/hassio_supervisor.ts

@@ -31,7 +31,7 @@ export const mockHassioSupervisor = (hass: MockHomeAssistant) => {
             version_latest: "3.6.2",
             update_available: false,
             repository: "a0d7b954",
-            icon: false,
+            icon: true,
             logo: true,
           },
           {

gallery/src/components/demo-black-white-row.ts

@@ -53,19 +53,13 @@ class DemoBlackWhiteRow extends LitElement {
 
   firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
+    applyThemesOnElement(this.shadowRoot!.querySelector(".dark"), {
+      default_theme: "default",
+      default_dark_theme: "default",
+      themes: {},
+      darkMode: true,
+      theme: "default",
+    });
   }
 
   handleSubmit(ev) {

gallery/src/data/text.ts

@@ -1,11 +0,0 @@
-export const LONG_TEXT = `
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc laoreet velit ut elit volutpat, eget ultrices odio lacinia. In imperdiet malesuada est, nec sagittis metus ultricies quis. Sed nisl ex, convallis porttitor ante quis, hendrerit tristique justo. Mauris pharetra venenatis augue, eu maximus sem cursus in. Quisque sed consequat risus. Suspendisse facilisis ligula a odio consectetur condimentum. Curabitur vehicula elit nec augue mollis, et volutpat massa dictum.
-
-Nam pellentesque auctor rutrum. Suspendisse elit est, sodales vel diam nec, porttitor faucibus massa. Ut pretium ac orci eu pharetra. Praesent in nibh at magna viverra rutrum eu vitae tortor. Etiam eget sem ex. Fusce tristique odio nec lacus mattis, vitae tempor nunc malesuada. Maecenas faucibus magna vel libero maximus egestas. Vestibulum luctus semper velit, in lobortis risus tempus non. Curabitur bibendum ornare commodo. Quisque commodo neque sit amet tincidunt lacinia. Proin elementum ante velit, eu congue nulla semper quis. Pellentesque consequat vel nunc at scelerisque. Mauris sit amet venenatis diam, blandit viverra leo. Integer commodo laoreet orci.
-
-Curabitur ipsum tortor, sodales ut augue sed, commodo porttitor libero. Pellentesque molestie vitae mi consectetur tempor. In sed lectus consequat, lobortis neque non, semper ipsum. Etiam eget ex et nibh sagittis pulvinar lacinia ac mauris. Aenean ligula eros, viverra ac nibh at, venenatis semper quam. Sed interdum ligula sit amet massa tincidunt tincidunt. Suspendisse potenti. Aliquam egestas facilisis est, sed faucibus erat scelerisque id. Duis dolor quam, viverra vitae orci euismod, laoreet pellentesque justo. Nunc malesuada non erat at ullamcorper. Mauris eget posuere odio. Vestibulum turpis nunc, pharetra eget ante in, feugiat mollis justo. Proin porttitor, diam nec vulputate pretium, tellus arcu rhoncus turpis, a blandit nisi nulla quis arcu. Nunc ac ullamcorper ligula, nec facilisis leo.
-
-In vitae eros sollicitudin, iaculis ex eget, egestas orci. Etiam sed pretium lorem. Nam nisi enim, consectetur sit amet semper ac, semper pharetra diam. In pulvinar neque sapien, ac ullamcorper est lacinia a. Etiam tincidunt velit sed diam malesuada, eu ornare ex consectetur. Phasellus in imperdiet tellus. Sed bibendum, dui sit amet fringilla aliquet, enim odio sollicitudin lorem, vel semper turpis mauris vel mauris. Aenean congue magna ac massa cursus, in dictum orci commodo. Pellentesque mollis velit in sollicitudin tincidunt. Vestibulum et efficitur nulla.
-
-Quisque posuere, velit sed porttitor dapibus, neque augue fringilla felis, eu luctus nisi nisl nec ipsum. Curabitur pellentesque ac lectus eget ultricies. Vestibulum est dolor, lacinia pharetra vulputate a, facilisis a magna. Nam vitae arcu nibh. Praesent finibus blandit ante, ac gravida ex mollis eget. Donec quam est, pulvinar vitae neque ut, bibendum aliquam erat. Nullam mollis arcu at sem tincidunt, in tristique lectus facilisis. Aenean ut lacus vel nisl finibus iaculis non a turpis. Integer eget ipsum ante. Donec nunc neque, vestibulum ac magna ac, posuere scelerisque dui. Pellentesque massa nibh, rhoncus id dolor quis, placerat posuere turpis. Donec aliquet augue nisi, eu finibus dui auctor et. Vestibulum eu varius lorem. Quisque lectus ante, malesuada pretium risus eget, interdum mattis enim.
-`;

gallery/src/pages/automation/describe-action.ts

@@ -62,45 +62,6 @@ const ACTIONS = [
       entity_id: "input_boolean.toggle_4",
     },
   },
-  {
-    parallel: [
-      { scene: "scene.kitchen_morning" },
-      {
-        service: "media_player.play_media",
-        target: { entity_id: "media_player.living_room" },
-        data: { media_content_id: "", media_content_type: "" },
-        metadata: { title: "Happy Song" },
-      },
-    ],
-  },
-  {
-    stop: "No one is home!",
-  },
-  { repeat: { count: 3, sequence: [{ delay: "00:00:01" }] } },
-  {
-    repeat: {
-      for_each: ["bread", "butter", "cheese"],
-      sequence: [{ delay: "00:00:01" }],
-    },
-  },
-  {
-    if: [{ condition: "state" }],
-    then: [{ delay: "00:00:01" }],
-    else: [{ delay: "00:00:05" }],
-  },
-  {
-    choose: [
-      {
-        conditions: [{ condition: "state" }],
-        sequence: [{ delay: "00:00:01" }],
-      },
-      {
-        conditions: [{ condition: "sun" }],
-        sequence: [{ delay: "00:00:05" }],
-      },
-    ],
-    default: [{ delay: "00:00:03" }],
-  },
 ];
 
 @customElement("demo-automation-describe-action")

gallery/src/pages/automation/editor-action.ts

@@ -20,10 +20,6 @@ import { HaWaitForTriggerAction } from "../../../../src/panels/config/automation
 import { HaWaitAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-wait_template";
 import { Action } from "../../../../src/data/script";
 import { HaConditionAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-condition";
-import { HaParallelAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-parallel";
-import { HaIfAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-if";
-import { HaStopAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-stop";
-import { HaPlayMediaAction } from "../../../../src/panels/config/automation/action/types/ha-automation-action-play_media";
 
 const SCHEMAS: { name: string; actions: Action[] }[] = [
   { name: "Event", actions: [HaEventAction.defaultConfig] },
@@ -32,15 +28,11 @@ const SCHEMAS: { name: string; actions: Action[] }[] = [
   { name: "Condition", actions: [HaConditionAction.defaultConfig] },
   { name: "Delay", actions: [HaDelayAction.defaultConfig] },
   { name: "Scene", actions: [HaSceneAction.defaultConfig] },
-  { name: "Play media", actions: [HaPlayMediaAction.defaultConfig] },
   { name: "Wait", actions: [HaWaitAction.defaultConfig] },
   { name: "WaitForTrigger", actions: [HaWaitForTriggerAction.defaultConfig] },
   { name: "Repeat", actions: [HaRepeatAction.defaultConfig] },
-  { name: "If-Then", actions: [HaIfAction.defaultConfig] },
   { name: "Choose", actions: [HaChooseAction.defaultConfig] },
   { name: "Variables", actions: [{ variables: { hello: "1" } }] },
-  { name: "Parallel", actions: [HaParallelAction.defaultConfig] },
-  { name: "Stop", actions: [HaStopAction.defaultConfig] },
 ];
 
 @customElement("demo-automation-editor-action")
@@ -94,6 +86,6 @@ class DemoHaAutomationEditorAction extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "demo-automation-editor-action": DemoHaAutomationEditorAction;
+    "demo-ha-automation-editor-action": DemoHaAutomationEditorAction;
   }
 }

gallery/src/pages/automation/editor-condition.ts

@@ -8,7 +8,7 @@ import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
 import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
 import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
-import type { ConditionWithShorthand } from "../../../../src/data/automation";
+import type { Condition } from "../../../../src/data/automation";
 import "../../../../src/panels/config/automation/condition/ha-automation-condition";
 import { HaDeviceCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-device";
 import { HaLogicalCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-logical";
@@ -20,7 +20,7 @@ import { HaTimeCondition } from "../../../../src/panels/config/automation/condit
 import { HaTriggerCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-trigger";
 import { HaZoneCondition } from "../../../../src/panels/config/automation/condition/types/ha-automation-condition-zone";
 
-const SCHEMAS: { name: string; conditions: ConditionWithShorthand[] }[] = [
+const SCHEMAS: { name: string; conditions: Condition[] }[] = [
   {
     name: "State",
     conditions: [{ condition: "state", ...HaStateCondition.defaultConfig }],
@@ -69,14 +69,6 @@ const SCHEMAS: { name: string; conditions: ConditionWithShorthand[] }[] = [
     name: "Trigger",
     conditions: [{ condition: "trigger", ...HaTriggerCondition.defaultConfig }],
   },
-  {
-    name: "Shorthand",
-    conditions: [
-      { and: HaLogicalCondition.defaultConfig.conditions },
-      { or: HaLogicalCondition.defaultConfig.conditions },
-      { not: HaLogicalCondition.defaultConfig.conditions },
-    ],
-  },
 ];
 
 @customElement("demo-automation-editor-condition")

gallery/src/pages/components/ha-alert.ts

@@ -159,19 +159,13 @@ export class DemoHaAlert extends LitElement {
 
   firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
+    applyThemesOnElement(this.shadowRoot!.querySelector(".dark"), {
+      default_theme: "default",
+      default_dark_theme: "default",
+      themes: {},
+      darkMode: true,
+      theme: "default",
+    });
   }
 
   static get styles() {

gallery/src/pages/components/ha-faded.ts

@@ -3,7 +3,18 @@ import { customElement } from "lit/decorators";
 import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-faded";
 import "../../../../src/components/ha-markdown";
-import { LONG_TEXT } from "../../data/text";
+
+const LONG_TEXT = `
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc laoreet velit ut elit volutpat, eget ultrices odio lacinia. In imperdiet malesuada est, nec sagittis metus ultricies quis. Sed nisl ex, convallis porttitor ante quis, hendrerit tristique justo. Mauris pharetra venenatis augue, eu maximus sem cursus in. Quisque sed consequat risus. Suspendisse facilisis ligula a odio consectetur condimentum. Curabitur vehicula elit nec augue mollis, et volutpat massa dictum.
+
+Nam pellentesque auctor rutrum. Suspendisse elit est, sodales vel diam nec, porttitor faucibus massa. Ut pretium ac orci eu pharetra. Praesent in nibh at magna viverra rutrum eu vitae tortor. Etiam eget sem ex. Fusce tristique odio nec lacus mattis, vitae tempor nunc malesuada. Maecenas faucibus magna vel libero maximus egestas. Vestibulum luctus semper velit, in lobortis risus tempus non. Curabitur bibendum ornare commodo. Quisque commodo neque sit amet tincidunt lacinia. Proin elementum ante velit, eu congue nulla semper quis. Pellentesque consequat vel nunc at scelerisque. Mauris sit amet venenatis diam, blandit viverra leo. Integer commodo laoreet orci.
+
+Curabitur ipsum tortor, sodales ut augue sed, commodo porttitor libero. Pellentesque molestie vitae mi consectetur tempor. In sed lectus consequat, lobortis neque non, semper ipsum. Etiam eget ex et nibh sagittis pulvinar lacinia ac mauris. Aenean ligula eros, viverra ac nibh at, venenatis semper quam. Sed interdum ligula sit amet massa tincidunt tincidunt. Suspendisse potenti. Aliquam egestas facilisis est, sed faucibus erat scelerisque id. Duis dolor quam, viverra vitae orci euismod, laoreet pellentesque justo. Nunc malesuada non erat at ullamcorper. Mauris eget posuere odio. Vestibulum turpis nunc, pharetra eget ante in, feugiat mollis justo. Proin porttitor, diam nec vulputate pretium, tellus arcu rhoncus turpis, a blandit nisi nulla quis arcu. Nunc ac ullamcorper ligula, nec facilisis leo.
+
+In vitae eros sollicitudin, iaculis ex eget, egestas orci. Etiam sed pretium lorem. Nam nisi enim, consectetur sit amet semper ac, semper pharetra diam. In pulvinar neque sapien, ac ullamcorper est lacinia a. Etiam tincidunt velit sed diam malesuada, eu ornare ex consectetur. Phasellus in imperdiet tellus. Sed bibendum, dui sit amet fringilla aliquet, enim odio sollicitudin lorem, vel semper turpis mauris vel mauris. Aenean congue magna ac massa cursus, in dictum orci commodo. Pellentesque mollis velit in sollicitudin tincidunt. Vestibulum et efficitur nulla.
+
+Quisque posuere, velit sed porttitor dapibus, neque augue fringilla felis, eu luctus nisi nisl nec ipsum. Curabitur pellentesque ac lectus eget ultricies. Vestibulum est dolor, lacinia pharetra vulputate a, facilisis a magna. Nam vitae arcu nibh. Praesent finibus blandit ante, ac gravida ex mollis eget. Donec quam est, pulvinar vitae neque ut, bibendum aliquam erat. Nullam mollis arcu at sem tincidunt, in tristique lectus facilisis. Aenean ut lacus vel nisl finibus iaculis non a turpis. Integer eget ipsum ante. Donec nunc neque, vestibulum ac magna ac, posuere scelerisque dui. Pellentesque massa nibh, rhoncus id dolor quis, placerat posuere turpis. Donec aliquet augue nisi, eu finibus dui auctor et. Vestibulum eu varius lorem. Quisque lectus ante, malesuada pretium risus eget, interdum mattis enim.
+`;
 
 const SMALL_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
 

gallery/src/pages/components/ha-form.ts

@@ -1,18 +1,18 @@
 /* eslint-disable lit/no-template-arrow */
 import "@material/mwc-button";
-import { html, LitElement, TemplateResult } from "lit";
+import { LitElement, TemplateResult, html } from "lit";
 import { customElement, state } from "lit/decorators";
+import { computeInitialHaFormData } from "../../../../src/components/ha-form/compute-initial-ha-form-data";
+import type { HaFormSchema } from "../../../../src/components/ha-form/types";
+import "../../../../src/components/ha-form/ha-form";
+import "../../components/demo-black-white-row";
 import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
 import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
 import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
 import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
-import { computeInitialHaFormData } from "../../../../src/components/ha-form/compute-initial-ha-form-data";
-import "../../../../src/components/ha-form/ha-form";
-import type { HaFormSchema } from "../../../../src/components/ha-form/types";
-import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
 import { HomeAssistant } from "../../../../src/types";
-import "../../components/demo-black-white-row";
+import { getEntity } from "../../../../src/fake_data/entity";
 
 const ENTITIES = [
   getEntity("alarm_control_panel", "alarm", "disarmed", {
@@ -147,9 +147,7 @@ const SCHEMAS: {
       { name: "target", selector: { target: {} } },
       { name: "number", selector: { number: { min: 0, max: 10 } } },
       { name: "boolean", selector: { boolean: {} } },
-      { name: "time", required: true, selector: { time: {} } },
-      { name: "datetime", required: true, selector: { datetime: {} } },
-      { name: "date", required: true, selector: { date: {} } },
+      { name: "time", selector: { time: {} } },
       { name: "action", selector: { action: {} } },
       { name: "text", selector: { text: { multiline: false } } },
       { name: "text_multiline", selector: { text: { multiline: true } } },

gallery/src/pages/components/ha-selector.ts

@@ -1,20 +1,20 @@
 /* eslint-disable lit/no-template-arrow */
 import "@material/mwc-button";
-import { css, html, LitElement, TemplateResult } from "lit";
+import { LitElement, TemplateResult, css, html } from "lit";
 import { customElement, state } from "lit/decorators";
-import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
-import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
-import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
-import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
 import "../../../../src/components/ha-selector/ha-selector";
 import "../../../../src/components/ha-settings-row";
-import { BlueprintInput } from "../../../../src/data/blueprint";
-import { showDialog } from "../../../../src/dialogs/make-dialog-manager";
-import { getEntity } from "../../../../src/fake_data/entity";
 import { provideHass } from "../../../../src/fake_data/provide_hass";
-import { ProvideHassElement } from "../../../../src/mixins/provide-hass-lit-mixin";
 import type { HomeAssistant } from "../../../../src/types";
 import "../../components/demo-black-white-row";
+import { BlueprintInput } from "../../../../src/data/blueprint";
+import { mockEntityRegistry } from "../../../../demo/src/stubs/entity_registry";
+import { mockDeviceRegistry } from "../../../../demo/src/stubs/device_registry";
+import { mockAreaRegistry } from "../../../../demo/src/stubs/area_registry";
+import { mockHassioSupervisor } from "../../../../demo/src/stubs/hassio_supervisor";
+import { getEntity } from "../../../../src/fake_data/entity";
+import { ProvideHassElement } from "../../../../src/mixins/provide-hass-lit-mixin";
+import { showDialog } from "../../../../src/dialogs/make-dialog-manager";
 
 const ENTITIES = [
   getEntity("alarm_control_panel", "alarm", "disarmed", {
@@ -109,7 +109,7 @@ const AREAS = [
 
 const SCHEMAS: {
   name: string;
-  input: Record<string, (BlueprintInput & { required?: boolean }) | null>;
+  input: Record<string, BlueprintInput | null>;
 }[] = [
   {
     name: "One of each",
@@ -166,11 +166,8 @@ const SCHEMAS: {
       object: { name: "Object", selector: { object: {} } },
       select_radio: {
         name: "Select (Radio)",
-        selector: {
-          select: { options: ["Option 1", "Option 2"], mode: "list" },
-        },
+        selector: { select: { options: ["Option 1", "Option 2"] } },
       },
-      template: { name: "Template", selector: { template: {} } },
       select: {
         name: "Select",
         selector: {
@@ -186,22 +183,6 @@ const SCHEMAS: {
           },
         },
       },
-      select_custom: {
-        name: "Select (Custom)",
-        selector: {
-          select: {
-            custom_value: true,
-            options: [
-              "Option 1",
-              "Option 2",
-              "Option 3",
-              "Option 4",
-              "Option 5",
-              "Option 6",
-            ],
-          },
-        },
-      },
       icon: { name: "Icon", selector: { icon: {} } },
       media: { name: "Media", selector: { media: {} } },
       location: { name: "Location", selector: { location: {} } },
@@ -221,35 +202,6 @@ const SCHEMAS: {
     input: {
       entity: { name: "Entity", selector: { entity: { multiple: true } } },
       device: { name: "Device", selector: { device: { multiple: true } } },
-      area: { name: "Area", selector: { area: { multiple: true } } },
-      select: {
-        name: "Select Multiple",
-        selector: {
-          select: {
-            multiple: true,
-            custom_value: true,
-            options: [
-              "Option 1",
-              "Option 2",
-              "Option 3",
-              "Option 4",
-              "Option 5",
-              "Option 6",
-            ],
-          },
-        },
-      },
-      select_checkbox: {
-        name: "Select Multiple (Checkbox)",
-        required: false,
-        selector: {
-          select: {
-            mode: "list",
-            multiple: true,
-            options: ["Option 1", "Option 2", "Option 3", "Option 4"],
-          },
-        },
-      },
     },
   },
 ];
@@ -258,14 +210,6 @@ const SCHEMAS: {
 class DemoHaSelector extends LitElement implements ProvideHassElement {
   @state() public hass!: HomeAssistant;
 
-  @state() private _disabled = false;
-
-  @state() private _required = false;
-
-  @state() private _helper = false;
-
-  @state() private _label = true;
-
   private data = SCHEMAS.map(() => ({}));
 
   constructor() {
@@ -399,36 +343,6 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
 
   protected render(): TemplateResult {
     return html`
-      <div class="options">
-        <ha-formfield label="Labels">
-          <ha-switch
-            .name=${"label"}
-            .checked=${this._label}
-            @change=${this._handleOptionChange}
-          ></ha-switch>
-        </ha-formfield>
-        <ha-formfield label="Required">
-          <ha-switch
-            .name=${"required"}
-            .checked=${this._required}
-            @change=${this._handleOptionChange}
-          ></ha-switch>
-        </ha-formfield>
-        <ha-formfield label="Disabled">
-          <ha-switch
-            .name=${"disabled"}
-            .checked=${this._disabled}
-            @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];
         const valueChanged = (ev) => {
@@ -451,12 +365,8 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
                         .hass=${this.hass}
                         .selector=${value!.selector}
                         .key=${key}
-                        .label=${this._label ? value!.name : undefined}
                         .value=${data[key] ?? value!.default}
-                        .disabled=${this._disabled}
-                        .required=${this._required}
                         @value-changed=${valueChanged}
-                        .helper=${this._helper ? "Helper text" : undefined}
                       ></ha-selector>
                     </ha-settings-row>
                   `
@@ -468,21 +378,10 @@ class DemoHaSelector extends LitElement implements ProvideHassElement {
     `;
   }
 
-  private _handleOptionChange(ev) {
-    this[`_${ev.target.name}`] = ev.target.checked;
-  }
-
   static styles = css`
     ha-selector {
       width: 60;
     }
-    .options {
-      max-width: 800px;
-      margin: 16px auto;
-    }
-    .options ha-formfield {
-      margin-right: 16px;
-    }
   `;
 }
 

gallery/src/pages/components/ha-tip.markdown

@@ -1,3 +0,0 @@
----
-title: Tips
----

gallery/src/pages/components/ha-tip.ts

@@ -1,73 +0,0 @@
-import { html, css, LitElement, TemplateResult } from "lit";
-import { customElement } from "lit/decorators";
-import "../../../../src/components/ha-tip";
-import "../../../../src/components/ha-card";
-import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
-
-const tips: (string | TemplateResult)[] = [
-  "Test tip",
-  "Bigger test tip, with some random text just to fill up as much space as possible without it looking like I'm really trying to to that",
-  html`<i>Tip</i> <b>with</b> <sub>HTML</sub>`,
-];
-
-@customElement("demo-components-ha-tip")
-export class DemoHaTip extends LitElement {
-  protected render(): TemplateResult {
-    return html` ${["light", "dark"].map(
-      (mode) => html`
-        <div class=${mode}>
-          <ha-card header="ha-tip ${mode} demo">
-            <div class="card-content">
-              ${tips.map((tip) => html`<ha-tip>${tip}</ha-tip>`)}
-            </div>
-          </ha-card>
-        </div>
-      `
-    )}`;
-  }
-
-  firstUpdated(changedProps) {
-    super.firstUpdated(changedProps);
-    applyThemesOnElement(
-      this.shadowRoot!.querySelector(".dark"),
-      {
-        default_theme: "default",
-        default_dark_theme: "default",
-        themes: {},
-        darkMode: true,
-        theme: "default",
-      },
-      undefined,
-      undefined,
-      true
-    );
-  }
-
-  static get styles() {
-    return css`
-      :host {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-      }
-      .dark,
-      .light {
-        display: block;
-        background-color: var(--primary-background-color);
-        padding: 0 50px;
-      }
-      ha-tip {
-        margin-bottom: 14px;
-      }
-      ha-card {
-        margin: 24px auto;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "demo-components-ha-tip": DemoHaTip;
-  }
-}

gallery/src/pages/lovelace/markdown-card.ts

@@ -9,7 +9,7 @@ const CONFIGS = [
     heading: "markdown-it demo",
     config: `
 - type: markdown
-  content: >-
+  content: >
     # h1 Heading 8-)
 
     ## h2 Heading
@@ -249,17 +249,6 @@ const CONFIGS = [
     ::: warning
     *here be dragons*
     :::
-
-    ### ha-alert
-
-    You can use our [\`ha-alert\`](https://design.home-assistant.io/#components/ha-alert) component in markdown content rendered in the Home Assistant Frontend.
-
-    <ha-alert alert-type="error">This is an error alert — check it out!</ha-alert>
-    <ha-alert alert-type="warning">This is a warning alert — check it out!</ha-alert>
-    <ha-alert alert-type="info">This is an info alert — check it out!</ha-alert>
-    <ha-alert alert-type="success">This is a success alert — check it out!</ha-alert>
-    <ha-alert title="Test alert">This is an alert with a title</ha-alert>
-
     `,
   },
 ];

gallery/src/pages/more-info/update.ts

@@ -5,7 +5,6 @@ import {
   UPDATE_SUPPORT_BACKUP,
   UPDATE_SUPPORT_PROGRESS,
   UPDATE_SUPPORT_INSTALL,
-  UPDATE_SUPPORT_RELEASE_NOTES,
 } from "../../../../src/data/update";
 import "../../../../src/dialogs/more-info/more-info-content";
 import { getEntity } from "../../../../src/fake_data/entity";
@@ -14,11 +13,10 @@ import {
   provideHass,
 } from "../../../../src/fake_data/provide_hass";
 import "../../components/demo-more-infos";
-import { LONG_TEXT } from "../../data/text";
 
 const base_attributes = {
   title: "Awesome",
-  installed_version: "1.2.2",
+  current_version: "1.2.2",
   latest_version: "1.2.3",
   release_url: "https://home-assistant.io",
   supported_features: UPDATE_SUPPORT_INSTALL,
@@ -50,7 +48,7 @@ const ENTITIES = [
   }),
   getEntity("update", "update5", "off", {
     ...base_attributes,
-    installed_version: "1.2.3",
+    current_version: "1.2.3",
     friendly_name: "No update",
   }),
   getEntity("update", "update6", "off", {
@@ -102,43 +100,14 @@ const ENTITIES = [
   }),
   getEntity("update", "update14", "off", {
     ...base_attributes,
-    installed_version: null,
-    friendly_name: "Update without installed_version",
+    current_version: null,
+    friendly_name: "Update without current_version",
   }),
   getEntity("update", "update15", "off", {
     ...base_attributes,
     latest_version: null,
     friendly_name: "Update without latest_version",
   }),
-  getEntity("update", "update16", "off", {
-    ...base_attributes,
-    friendly_name: "Update with release notes",
-    supported_features:
-      base_attributes.supported_features + UPDATE_SUPPORT_RELEASE_NOTES,
-  }),
-  getEntity("update", "update17", "off", {
-    ...base_attributes,
-    friendly_name: "Update with release notes error",
-    supported_features:
-      base_attributes.supported_features + UPDATE_SUPPORT_RELEASE_NOTES,
-  }),
-  getEntity("update", "update18", "off", {
-    ...base_attributes,
-    friendly_name: "Update with release notes loading",
-    supported_features:
-      base_attributes.supported_features + UPDATE_SUPPORT_RELEASE_NOTES,
-  }),
-  getEntity("update", "update19", "on", {
-    ...base_attributes,
-    friendly_name: "Update with auto update",
-    auto_update: true,
-  }),
-  getEntity("update", "update20", "on", {
-    ...base_attributes,
-    in_progress: true,
-    title: undefined,
-    friendly_name: "Installing without title",
-  }),
 ];
 
 @customElement("demo-more-info-update")
@@ -161,24 +130,6 @@ class DemoMoreInfoUpdate extends LitElement {
     const hass = provideHass(this._demoRoot);
     hass.updateTranslations(null, "en");
     hass.addEntities(ENTITIES);
-    hass.mockWS(
-      "update/release_notes",
-      (msg: { type: string; entity_id: string }) => {
-        if (msg.entity_id === "update.update16") {
-          return LONG_TEXT;
-        }
-        if (msg.entity_id === "update.update17") {
-          return Promise.reject({
-            code: "error",
-            message: "Could not fetch release notes",
-          });
-        }
-        if (msg.entity_id === "update.update18") {
-          return undefined;
-        }
-        return null;
-      }
-    );
   }
 }
 

hassio/src/addon-store/hassio-addon-repository.ts

@@ -68,7 +68,6 @@ class HassioAddonRepositoryEl extends LitElement {
           ${addons.map(
             (addon) => html`
               <ha-card
-                outlined
                 .addon=${addon}
                 class=${addon.available ? "" : "not_available"}
                 @click=${this._addonTapped}

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

@@ -50,7 +50,6 @@ class HassioAddonAudio extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-card
-        outlined
         .header=${this.supervisor.localize("addon.configuration.audio.header")}
       >
         <div class="card-content">

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

@@ -39,14 +39,7 @@ import type { HomeAssistant } from "../../../../src/types";
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
 import { hassioStyle } from "../../resources/hassio-style";
 
-const SUPPORTED_UI_TYPES = [
-  "string",
-  "select",
-  "boolean",
-  "integer",
-  "float",
-  "schema",
-];
+const SUPPORTED_UI_TYPES = ["string", "select", "boolean", "integer", "float"];
 
 const ADDON_YAML_SCHEMA = DEFAULT_SCHEMA.extend([
   new Type("!secret", {
@@ -55,8 +48,6 @@ const ADDON_YAML_SCHEMA = DEFAULT_SCHEMA.extend([
   }),
 ]);
 
-const MASKED_FIELDS = ["password", "secret", "token"];
-
 @customElement("hassio-addon-config")
 class HassioAddonConfig extends LitElement {
   @property({ attribute: false }) public addon!: HassioAddonDetails;
@@ -84,66 +75,19 @@ class HassioAddonConfig extends LitElement {
   public computeLabel = (entry: HaFormSchema): string =>
     this.addon.translations[this.hass.language]?.configuration?.[entry.name]
       ?.name ||
-    this.addon.translations.en?.configuration?.[entry.name]?.name ||
+    this.addon.translations.en?.configuration?.[entry.name].name ||
     entry.name;
 
-  public computeHelper = (entry: HaFormSchema): string =>
-    this.addon.translations[this.hass.language]?.configuration?.[entry.name]
-      ?.description ||
-    this.addon.translations.en?.configuration?.[entry.name]?.description ||
-    "";
-
-  private _convertSchema = memoizeOne(
-    // Convert supervisor schema to selectors
-    (schema: Record<string, any>): HaFormSchema[] =>
-      schema.map((entry) =>
-        entry.type === "select"
-          ? {
-              name: entry.name,
-              required: entry.required,
-              selector: { select: { options: entry.options } },
-            }
-          : entry.type === "string"
-          ? entry.multiple
-            ? {
-                name: entry.name,
-                required: entry.required,
-                selector: {
-                  select: { options: [], multiple: true, custom_value: true },
-                },
-              }
-            : {
-                name: entry.name,
-                required: entry.required,
-                selector: {
-                  text: {
-                    type:
-                      entry.format || MASKED_FIELDS.includes(entry.name)
-                        ? "password"
-                        : "text",
-                  },
-                },
-              }
-          : entry.type === "boolean"
-          ? {
-              name: entry.name,
-              required: entry.required,
-              selector: { boolean: {} },
-            }
-          : entry.type === "schema"
-          ? {
-              name: entry.name,
-              required: entry.required,
-              selector: { object: {} },
-            }
-          : entry.type === "float" || entry.type === "integer"
-          ? {
-              name: entry.name,
-              required: entry.required,
-              selector: { number: { mode: "box" } },
-            }
-          : entry
-      )
+  private _schema = memoizeOne((schema: HaFormSchema[]): HaFormSchema[] =>
+    // @ts-expect-error supervisor does not implement [string, string] for select.options[]
+    schema.map((entry) =>
+      entry.type === "select"
+        ? {
+            ...entry,
+            options: entry.options.map((option) => [option, option]),
+          }
+        : entry
+    )
   );
 
   private _filteredShchema = memoizeOne(
@@ -162,7 +106,7 @@ class HassioAddonConfig extends LitElement {
         );
     return html`
       <h1>${this.addon.name}</h1>
-      <ha-card outlined>
+      <ha-card>
         <div class="header">
           <h2>
             ${this.supervisor.localize("addon.configuration.options.header")}
@@ -196,8 +140,7 @@ class HassioAddonConfig extends LitElement {
                 .data=${this._options!}
                 @value-changed=${this._configChanged}
                 .computeLabel=${this.computeLabel}
-                .computeHelper=${this.computeHelper}
-                .schema=${this._convertSchema(
+                .schema=${this._schema(
                   this._showOptional
                     ? this.addon.schema!
                     : this._filteredShchema(
@@ -254,9 +197,8 @@ class HassioAddonConfig extends LitElement {
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     this._canShowSchema = !this.addon.schema!.find(
-      (entry) =>
-        // @ts-ignore
-        !SUPPORTED_UI_TYPES.includes(entry.type)
+      // @ts-ignore
+      (entry) => !SUPPORTED_UI_TYPES.includes(entry.type) || entry.multiple
     );
     this._yamlMode = !this._canShowSchema;
   }

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

@@ -1,3 +1,4 @@
+import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
   css,
   CSSResultGroup,
@@ -7,13 +8,10 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
-import "../../../../src/components/ha-form/ha-form";
-import type { HaFormSchema } from "../../../../src/components/ha-form/types";
 import {
   HassioAddonDetails,
   HassioAddonSetOptionParams,
@@ -26,6 +24,16 @@ import { HomeAssistant } from "../../../../src/types";
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
 import { hassioStyle } from "../../resources/hassio-style";
 
+interface NetworkItem {
+  description: string;
+  container: string;
+  host: number | null;
+}
+
+interface NetworkItemInput extends PaperInputElement {
+  container: string;
+}
+
 @customElement("hassio-addon-network")
 class HassioAddonNetwork extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -34,13 +42,9 @@ class HassioAddonNetwork extends LitElement {
 
   @property({ attribute: false }) public addon!: HassioAddonDetails;
 
-  @state() private _showOptional = false;
-
-  @state() private _configHasChanged = false;
-
   @state() private _error?: string;
 
-  @state() private _config?: Record<string, any>;
+  @state() private _config?: NetworkItem[];
 
   public connectedCallback(): void {
     super.connectedCallback();
@@ -52,61 +56,59 @@ class HassioAddonNetwork extends LitElement {
       return html``;
     }
 
-    const hasHiddenOptions = Object.keys(this._config).find(
-      (entry) => this._config![entry] === null
-    );
-
     return html`
       <ha-card
-        outlined
         .header=${this.supervisor.localize(
           "addon.configuration.network.header"
         )}
       >
         <div class="card-content">
-          <p>
-            ${this.supervisor.localize(
-              "addon.configuration.network.introduction"
-            )}
-          </p>
           ${this._error
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : ""}
 
-          <ha-form
-            .data=${this._config}
-            @value-changed=${this._configChanged}
-            .computeLabel=${this._computeLabel}
-            .computeHelper=${this._computeHelper}
-            .schema=${this._createSchema(
-              this._config,
-              this._showOptional,
-              this.hass.userData?.showAdvanced || false
-            )}
-          ></ha-form>
-        </div>
-        ${hasHiddenOptions
-          ? html`<ha-formfield
-              class="show-optional"
-              .label=${this.supervisor.localize(
-                "addon.configuration.network.show_disabled"
+          <table>
+            <tbody>
+              <tr>
+                <th>
+                  ${this.supervisor.localize(
+                    "addon.configuration.network.container"
+                  )}
+                </th>
+                <th>
+                  ${this.supervisor.localize(
+                    "addon.configuration.network.host"
+                  )}
+                </th>
+                <th>${this.supervisor.localize("common.description")}</th>
+              </tr>
+              ${this._config!.map(
+                (item) => html`
+                  <tr>
+                    <td>${item.container}</td>
+                    <td>
+                      <paper-input
+                        @value-changed=${this._configChanged}
+                        placeholder=${this.supervisor.localize(
+                          "addon.configuration.network.disabled"
+                        )}
+                        .value=${item.host ? String(item.host) : ""}
+                        .container=${item.container}
+                        no-label-float
+                      ></paper-input>
+                    </td>
+                    <td>${this._computeDescription(item)}</td>
+                  </tr>
+                `
               )}
-            >
-              <ha-switch
-                @change=${this._toggleOptional}
-                .checked=${this._showOptional}
-              >
-              </ha-switch>
-            </ha-formfield>`
-          : ""}
+            </tbody>
+          </table>
+        </div>
         <div class="card-actions">
           <ha-progress-button class="warning" @click=${this._resetTapped}>
             ${this.supervisor.localize("common.reset_defaults")}
           </ha-progress-button>
-          <ha-progress-button
-            @click=${this._saveTapped}
-            .disabled=${!this._configHasChanged}
-          >
+          <ha-progress-button @click=${this._saveTapped}>
             ${this.supervisor.localize("common.save")}
           </ha-progress-button>
         </div>
@@ -121,60 +123,50 @@ class HassioAddonNetwork extends LitElement {
     }
   }
 
-  private _createSchema = memoizeOne(
-    (
-      config: Record<string, number>,
-      showOptional: boolean,
-      advanced: boolean
-    ): HaFormSchema[] =>
-      (showOptional
-        ? Object.keys(config)
-        : Object.keys(config).filter((entry) => config[entry] !== null)
-      ).map((entry) => ({
-        name: entry,
-        selector: {
-          number: {
-            mode: "box",
-            min: 0,
-            max: 65535,
-            unit_of_measurement: advanced ? entry : undefined,
-          },
-        },
-      }))
-  );
-
-  private _computeLabel = (_: HaFormSchema): string => "";
-
-  private _computeHelper = (item: HaFormSchema): string =>
-    this.addon.translations[this.hass.language]?.network?.[item.name] ||
-    this.addon.translations.en?.network?.[item.name] ||
-    this.addon.network_description?.[item.name] ||
-    item.name;
+  private _computeDescription = (item: NetworkItem): string =>
+    this.addon.translations[this.hass.language]?.network?.[item.container]
+      ?.description ||
+    this.addon.translations.en?.network?.[item.container]?.description ||
+    item.description;
 
   private _setNetworkConfig(): void {
-    this._config = this.addon.network || {};
+    const network = this.addon.network || {};
+    const description = this.addon.network_description || {};
+    const items: NetworkItem[] = Object.keys(network).map((key) => ({
+      container: key,
+      host: network[key],
+      description: description[key],
+    }));
+    this._config = items.sort((a, b) => (a.container > b.container ? 1 : -1));
   }
 
-  private async _configChanged(ev: CustomEvent): Promise<void> {
-    this._configHasChanged = true;
-    this._config! = ev.detail.value;
+  private async _configChanged(ev: Event): Promise<void> {
+    const target = ev.target as NetworkItemInput;
+    this._config!.forEach((item) => {
+      if (
+        item.container === target.container &&
+        item.host !== parseInt(String(target.value), 10)
+      ) {
+        item.host = target.value ? parseInt(String(target.value), 10) : null;
+      }
+    });
   }
 
   private async _resetTapped(ev: CustomEvent): Promise<void> {
     const button = ev.currentTarget as any;
+    button.progress = true;
+
     const data: HassioAddonSetOptionParams = {
       network: null,
     };
 
     try {
       await setHassioAddonOption(this.hass, this.addon.slug, data);
-      this._configHasChanged = false;
       const eventdata = {
         success: true,
         response: undefined,
         path: "option",
       };
-      button.actionSuccess();
       fireEvent(this, "hass-api-called", eventdata);
       if (this.addon?.state === "started") {
         await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
@@ -185,21 +177,19 @@ class HassioAddonNetwork extends LitElement {
         "error",
         extractApiErrorMessage(err)
       );
-      button.actionError();
     }
-  }
 
-  private _toggleOptional() {
-    this._showOptional = !this._showOptional;
+    button.progress = false;
   }
 
   private async _saveTapped(ev: CustomEvent): Promise<void> {
     const button = ev.currentTarget as any;
+    button.progress = true;
 
     this._error = undefined;
     const networkconfiguration = {};
-    Object.entries(this._config!).forEach(([key, value]) => {
-      networkconfiguration[key] = value ?? null;
+    this._config!.forEach((item) => {
+      networkconfiguration[item.container] = parseInt(String(item.host), 10);
     });
 
     const data: HassioAddonSetOptionParams = {
@@ -208,13 +198,11 @@ class HassioAddonNetwork extends LitElement {
 
     try {
       await setHassioAddonOption(this.hass, this.addon.slug, data);
-      this._configHasChanged = false;
       const eventdata = {
         success: true,
         response: undefined,
         path: "option",
       };
-      button.actionSuccess();
       fireEvent(this, "hass-api-called", eventdata);
       if (this.addon?.state === "started") {
         await suggestAddonRestart(this, this.hass, this.supervisor, this.addon);
@@ -225,8 +213,8 @@ class HassioAddonNetwork extends LitElement {
         "error",
         extractApiErrorMessage(err)
       );
-      button.actionError();
     }
+    button.progress = false;
   }
 
   static get styles(): CSSResultGroup {
@@ -244,9 +232,6 @@ class HassioAddonNetwork extends LitElement {
           display: flex;
           justify-content: space-between;
         }
-        .show-optional {
-          padding: 16px;
-        }
       `,
     ];
   }

hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts

@@ -38,7 +38,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
     }
     return html`
       <div class="content">
-        <ha-card outlined>
+        <ha-card>
           ${this._error
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : ""}

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

@@ -17,9 +17,7 @@ import {
   HassioAddonDetails,
 } from "../../../src/data/hassio/addon";
 import { extractApiErrorMessage } from "../../../src/data/hassio/common";
-import { setSupervisorOption } from "../../../src/data/hassio/supervisor";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
-import { showConfirmationDialog } from "../../../src/dialogs/generic/show-dialog-box";
 import "../../../src/layouts/hass-error-screen";
 import "../../../src/layouts/hass-loading-screen";
 import "../../../src/layouts/hass-tabs-subpage";
@@ -168,42 +166,6 @@ class HassioAddonDashboard extends LitElement {
   protected async firstUpdated(): Promise<void> {
     if (this.route.path === "") {
       const requestedAddon = extractSearchParam("addon");
-      const requestedAddonRepository = extractSearchParam("repository_url");
-      if (
-        requestedAddonRepository &&
-        !this.supervisor.supervisor.addons_repositories.find(
-          (repo) => repo === requestedAddonRepository
-        )
-      ) {
-        if (
-          !(await showConfirmationDialog(this, {
-            title: this.supervisor.localize("my.add_addon_repository_title"),
-            text: this.supervisor.localize(
-              "my.add_addon_repository_description",
-              { addon: requestedAddon, repository: requestedAddonRepository }
-            ),
-            confirmText: this.supervisor.localize("common.add"),
-            dismissText: this.supervisor.localize("common.cancel"),
-          }))
-        ) {
-          this._error = this.supervisor.localize(
-            "my.error_repository_not_found"
-          );
-          return;
-        }
-
-        try {
-          await setSupervisorOption(this.hass, {
-            addons_repositories: [
-              ...this.supervisor.supervisor.addons_repositories,
-              requestedAddonRepository,
-            ],
-          });
-        } catch (err: any) {
-          this._error = extractApiErrorMessage(err);
-        }
-      }
-
       if (requestedAddon) {
         const addonsInfo = await fetchHassioAddonsInfo(this.hass);
         const validAddon = addonsInfo.addons.some(

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

@@ -166,7 +166,7 @@ class HassioAddonInfo extends LitElement {
           `
         : ""}
 
-      <ha-card outlined>
+      <ha-card>
         <div class="card-content">
           <div class="addon-header">
             ${!this.narrow ? this.addon.name : ""}
@@ -649,7 +649,7 @@ class HassioAddonInfo extends LitElement {
 
       ${this.addon.long_description
         ? html`
-            <ha-card outlined>
+            <ha-card>
               <div class="card-content">
                 <ha-markdown
                   .content=${this.addon.long_description}

hassio/src/addon-view/log/hassio-addon-logs.ts

@@ -2,7 +2,6 @@ import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import "../../../../src/components/ha-alert";
-import "../../../../src/components/ha-ansi-to-html";
 import "../../../../src/components/ha-card";
 import {
   fetchHassioAddonLogs,
@@ -12,6 +11,7 @@ import { extractApiErrorMessage } from "../../../../src/data/hassio/common";
 import { Supervisor } from "../../../../src/data/supervisor/supervisor";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
+import "../../components/hassio-ansi-to-html";
 import { hassioStyle } from "../../resources/hassio-style";
 
 @customElement("hassio-addon-logs")
@@ -34,15 +34,15 @@ class HassioAddonLogs extends LitElement {
   protected render(): TemplateResult {
     return html`
       <h1>${this.addon.name}</h1>
-      <ha-card outlined>
+      <ha-card>
         ${this._error
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
           : ""}
         <div class="card-content">
           ${this._content
-            ? html`<ha-ansi-to-html
+            ? html`<hassio-ansi-to-html
                 .content=${this._content}
-              ></ha-ansi-to-html>`
+              ></hassio-ansi-to-html>`
             : ""}
         </div>
         <div class="card-actions">

hassio/src/backups/hassio-backups.ts

@@ -1,7 +1,7 @@
 import "@material/mwc-button";
 import { ActionDetail } from "@material/mwc-list";
 import "@material/mwc-list/mwc-list-item";
-import { mdiBackupRestore, mdiDelete, mdiDotsVertical, mdiPlus } from "@mdi/js";
+import { mdiDelete, mdiDotsVertical, mdiPlus } from "@mdi/js";
 import {
   css,
   CSSResultGroup,
@@ -166,15 +166,7 @@ export class HassioBackups extends LitElement {
     }
     return html`
       <hass-tabs-subpage-data-table
-        .tabs=${atLeastVersion(this.hass.config.version, 2022, 5)
-          ? [
-              {
-                translationKey: "panel.backups",
-                path: `/hassio/backups`,
-                iconPath: mdiBackupRestore,
-              },
-            ]
-          : supervisorTabs(this.hass)}
+        .tabs=${supervisorTabs(this.hass)}
         .hass=${this.hass}
         .localizeFunc=${this.supervisor.localize}
         .searchLabel=${this.supervisor.localize("search")}
@@ -190,9 +182,7 @@ export class HassioBackups extends LitElement {
         selectable
         hasFab
         .mainPage=${!atLeastVersion(this.hass.config.version, 2021, 12)}
-        back-path=${atLeastVersion(this.hass.config.version, 2022, 5)
-          ? "/config/system"
-          : "/config"}
+        back-path="/config"
         supervisor
       >
         <ha-button-menu

hassio/src/components/hassio-ansi-to-html.ts

@@ -10,8 +10,8 @@ interface State {
   backgroundColor: null | string;
 }
 
-@customElement("ha-ansi-to-html")
-class HaAnsiToHtml extends LitElement {
+@customElement("hassio-ansi-to-html")
+class HassioAnsiToHtml extends LitElement {
   @property() public content!: string;
 
   protected render(): TemplateResult | void {
@@ -241,6 +241,6 @@ class HaAnsiToHtml extends LitElement {
 
 declare global {
   interface HTMLElementTagNameMap {
-    "ha-ansi-to-html": HaAnsiToHtml;
+    "hassio-ansi-to-html": HassioAnsiToHtml;
   }
 }

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

@@ -32,6 +32,13 @@ interface AddonCheckboxItem extends CheckboxItem {
 
 const _computeFolders = (folders): CheckboxItem[] => {
   const list: CheckboxItem[] = [];
+  if (folders.includes("homeassistant")) {
+    list.push({
+      slug: "homeassistant",
+      name: "Home Assistant configuration",
+      checked: false,
+    });
+  }
   if (folders.includes("ssl")) {
     list.push({ slug: "ssl", name: "SSL", checked: false });
   }
@@ -93,7 +100,7 @@ export class SupervisorBackupContent extends LitElement {
       this.folders = _computeFolders(
         this.backup
           ? this.backup.folders
-          : ["ssl", "share", "media", "addons/local"]
+          : ["homeassistant", "ssl", "share", "media", "addons/local"]
       );
       this.addons = _computeAddons(
         this.backup ? this.backup.addons : this.supervisor?.supervisor.addons
@@ -180,7 +187,7 @@ export class SupervisorBackupContent extends LitElement {
             >
               <ha-checkbox
                 .checked=${this.homeAssistant}
-                @change=${this.toggleHomeAssistant}
+                @click=${this.toggleHomeAssistant}
               >
               </ha-checkbox>
             </ha-formfield>

hassio/src/dashboard/hassio-addons.ts

@@ -26,7 +26,7 @@ class HassioAddons extends LitElement {
         <div class="card-group">
           ${!this.supervisor.supervisor.addons?.length
             ? html`
-                <ha-card outlined>
+                <ha-card>
                   <div class="card-content">
                     <button class="link" @click=${this._openStore}>
                       ${this.supervisor.localize("dashboard.no_addons")}
@@ -38,11 +38,7 @@ class HassioAddons extends LitElement {
                 .sort((a, b) => caseInsensitiveStringCompare(a.name, b.name))
                 .map(
                   (addon) => html`
-                    <ha-card
-                      outlined
-                      .addon=${addon}
-                      @click=${this._addonTapped}
-                    >
+                    <ha-card .addon=${addon} @click=${this._addonTapped}>
                       <div class="card-content">
                         <hassio-card-content
                           .hass=${this.hass}

hassio/src/dashboard/hassio-dashboard.ts

@@ -10,7 +10,6 @@ import { HomeAssistant, Route } from "../../../src/types";
 import { supervisorTabs } from "../hassio-tabs";
 import "./hassio-addons";
 import "./hassio-update";
-import "../../../src/layouts/hass-subpage";
 
 @customElement("hassio-dashboard")
 class HassioDashboard extends LitElement {
@@ -23,31 +22,6 @@ class HassioDashboard extends LitElement {
   @property({ attribute: false }) public route!: Route;
 
   protected render(): TemplateResult {
-    if (atLeastVersion(this.hass.config.version, 2022, 5)) {
-      return html`<hass-subpage
-        .hass=${this.hass}
-        .narrow=${this.narrow}
-        .route=${this.route}
-        .header=${this.supervisor.localize("panel.addons")}
-      >
-        <hassio-addons
-          .hass=${this.hass}
-          .supervisor=${this.supervisor}
-        ></hassio-addons>
-        <a href="/hassio/store">
-          <ha-fab
-            .label=${this.supervisor.localize("panel.store")}
-            extended
-            class="non-tabs"
-          >
-            <ha-svg-icon
-              slot="icon"
-              .path=${mdiStorePlus}
-            ></ha-svg-icon> </ha-fab
-        ></a>
-      </hass-subpage>`;
-    }
-
     return html`
       <hass-tabs-subpage
         .hass=${this.hass}
@@ -100,12 +74,6 @@ class HassioDashboard extends LitElement {
         .content {
           margin: 0 auto;
         }
-        ha-fab.non-tabs {
-          position: fixed;
-          right: calc(16px + env(safe-area-inset-right));
-          bottom: calc(16px + env(safe-area-inset-bottom));
-          z-index: 1;
-        }
       `,
     ];
   }

hassio/src/dashboard/hassio-update.ts

@@ -85,7 +85,7 @@ export class HassioUpdate extends LitElement {
       return html``;
     }
     return html`
-      <ha-card outlined>
+      <ha-card>
         <div class="card-content">
           <div class="icon">
             <ha-svg-icon .path=${mdiHomeAssistant}></ha-svg-icon>

hassio/src/hassio-main.ts

@@ -3,8 +3,8 @@ import { customElement, property } from "lit/decorators";
 import { atLeastVersion } from "../../src/common/config/version";
 import { applyThemesOnElement } from "../../src/common/dom/apply_themes_on_element";
 import { fireEvent } from "../../src/common/dom/fire_event";
-import { mainWindow } from "../../src/common/dom/get_main_window";
 import { isNavigationClick } from "../../src/common/dom/is-navigation-click";
+import { mainWindow } from "../../src/common/dom/get_main_window";
 import { navigate } from "../../src/common/navigate";
 import { HassioPanelInfo } from "../../src/data/hassio/supervisor";
 import { Supervisor } from "../../src/data/supervisor/supervisor";
@@ -73,18 +73,6 @@ export class HassioMain extends SupervisorBaseElement {
       });
     });
 
-    // Forward keydown events to the main window for quickbar access
-    document.body.addEventListener("keydown", (ev: KeyboardEvent) => {
-      if (ev.altKey || ev.ctrlKey || ev.shiftKey || ev.metaKey) {
-        // Ignore if modifier keys are pressed
-        return;
-      }
-      // @ts-ignore
-      fireEvent(mainWindow, "hass-quick-bar-trigger", ev, {
-        bubbles: false,
-      });
-    });
-
     makeDialogManager(this, this.shadowRoot!);
   }
 

hassio/src/hassio-my-redirect.ts

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

hassio/src/hassio-tabs.ts

@@ -8,27 +8,24 @@ import { atLeastVersion } from "../../src/common/config/version";
 import type { PageNavigation } from "../../src/layouts/hass-tabs-subpage";
 import { HomeAssistant } from "../../src/types";
 
-export const supervisorTabs = (hass: HomeAssistant): PageNavigation[] =>
-  atLeastVersion(hass.config.version, 2022, 5)
-    ? []
-    : [
-        {
-          translationKey: atLeastVersion(hass.config.version, 2021, 12)
-            ? "panel.addons"
-            : "panel.dashboard",
-          path: `/hassio/dashboard`,
-          iconPath: atLeastVersion(hass.config.version, 2021, 12)
-            ? mdiPuzzle
-            : mdiViewDashboard,
-        },
-        {
-          translationKey: "panel.backups",
-          path: `/hassio/backups`,
-          iconPath: mdiBackupRestore,
-        },
-        {
-          translationKey: "panel.system",
-          path: `/hassio/system`,
-          iconPath: mdiCogs,
-        },
-      ];
+export const supervisorTabs = (hass: HomeAssistant): PageNavigation[] => [
+  {
+    translationKey: atLeastVersion(hass.config.version, 2021, 12)
+      ? "panel.addons"
+      : "panel.dashboard",
+    path: `/hassio/dashboard`,
+    iconPath: atLeastVersion(hass.config.version, 2021, 12)
+      ? mdiPuzzle
+      : mdiViewDashboard,
+  },
+  {
+    translationKey: "panel.backups",
+    path: `/hassio/backups`,
+    iconPath: mdiBackupRestore,
+  },
+  {
+    translationKey: "panel.system",
+    path: `/hassio/system`,
+    iconPath: mdiCogs,
+  },
+];

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

@@ -48,7 +48,7 @@ class HassioCoreInfo extends LitElement {
     ];
 
     return html`
-      <ha-card header="Core" outlined>
+      <ha-card header="Core">
         <div class="card-content">
           <div>
             <ha-settings-row>

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

@@ -66,7 +66,7 @@ class HassioHostInfo extends LitElement {
       },
     ];
     return html`
-      <ha-card header="Host" outlined>
+      <ha-card header="Host">
         <div class="card-content">
           <div>
             ${this.supervisor.host.features.includes("hostname")

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

@@ -23,10 +23,6 @@ import {
   showAlertDialog,
   showConfirmationDialog,
 } from "../../../src/dialogs/generic/show-dialog-box";
-import {
-  UNHEALTHY_REASON_URL,
-  UNSUPPORTED_REASON_URL,
-} from "../../../src/panels/config/system-health/ha-config-system-health";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
 import { bytesToString } from "../../../src/util/bytes-to-string";
@@ -34,6 +30,11 @@ import { documentationUrl } from "../../../src/util/documentation-url";
 import "../components/supervisor-metric";
 import { hassioStyle } from "../resources/hassio-style";
 
+const UNSUPPORTED_REASON_URL = {};
+const UNHEALTHY_REASON_URL = {
+  privileged: "/more-info/unsupported/privileged",
+};
+
 @customElement("hassio-supervisor-info")
 class HassioSupervisorInfo extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -57,7 +58,7 @@ class HassioSupervisorInfo extends LitElement {
       },
     ];
     return html`
-      <ha-card header="Supervisor" outlined>
+      <ha-card header="Supervisor">
         <div class="card-content">
           <div>
             <ha-settings-row>

hassio/src/system/hassio-supervisor-log.ts

@@ -1,4 +1,3 @@
-import "../../../src/components/ha-ansi-to-html";
 import "@material/mwc-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -12,6 +11,7 @@ import { Supervisor } from "../../../src/data/supervisor/supervisor";
 import "../../../src/layouts/hass-loading-screen";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant } from "../../../src/types";
+import "../components/hassio-ansi-to-html";
 import { hassioStyle } from "../resources/hassio-style";
 
 interface LogProvider {
@@ -65,7 +65,7 @@ class HassioSupervisorLog extends LitElement {
 
   protected render(): TemplateResult | void {
     return html`
-      <ha-card outlined>
+      <ha-card>
         ${this._error
           ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
           : ""}
@@ -89,8 +89,8 @@ class HassioSupervisorLog extends LitElement {
 
         <div class="card-content" id="content">
           ${this._content
-            ? html`<ha-ansi-to-html .content=${this._content}>
-              </ha-ansi-to-html>`
+            ? html`<hassio-ansi-to-html .content=${this._content}>
+              </hassio-ansi-to-html>`
             : html`<hass-loading-screen no-toolbar></hass-loading-screen>`}
         </div>
         <div class="card-actions">

hassio/src/update-available/update-available-card.ts

@@ -128,7 +128,6 @@ class UpdateAvailableCard extends LitElement {
 
     return html`
       <ha-card
-        outlined
         .header=${this.supervisor.localize("update_available.update_name", {
           name: this._name,
         })}

package.json

@@ -108,7 +108,7 @@
     "fuse.js": "^6.0.0",
     "google-timezones-json": "^1.0.2",
     "hls.js": "^1.1.5",
-    "home-assistant-js-websocket": "^7.0.3",
+    "home-assistant-js-websocket": "^7.0.1",
     "idb-keyval": "^5.1.3",
     "intl-messageformat": "^9.9.1",
     "js-yaml": "^4.1.0",

script/core

@@ -15,7 +15,7 @@ if [ -z $(which hass) ]; then
   echo "Installing Home Asstant core from dev."
   python3 -m pip install --upgrade \
     colorlog \
-    git+https://github.com/home-assistant/home-assistant.git@dev
+    git+git://github.com/home-assistant/home-assistant.git@dev
 fi
 
 if [ ! -d "${WD}/config" ]; then

setup.cfg

@@ -1,6 +1,6 @@
 [metadata]
 name         = home-assistant-frontend
-version      = 20220504.0
+version      = 20220322.0
 author       = The Home Assistant Authors
 author_email = hello@home-assistant.io
 license      = Apache-2.0

src/common/datetime/duration.ts

@@ -1,16 +0,0 @@
-import secondsToDuration from "./seconds_to_duration";
-
-const DAY_IN_SECONDS = 86400;
-const HOUR_IN_SECONDS = 3600;
-const MINUTE_IN_SECONDS = 60;
-
-export const UNIT_TO_SECOND_CONVERT = {
-  s: 1,
-  min: MINUTE_IN_SECONDS,
-  h: HOUR_IN_SECONDS,
-  d: DAY_IN_SECONDS,
-};
-
-export const formatDuration = (duration: string, units: string): string =>
-  secondsToDuration(parseFloat(duration) * UNIT_TO_SECOND_CONVERT[units]) ||
-  "0";

src/common/dom/is-navigation-click.ts

@@ -12,7 +12,7 @@ export const isNavigationClick = (e: MouseEvent) => {
 
   const anchor = e
     .composedPath()
-    .find((n) => (n as HTMLElement).tagName === "A") as
+    .filter((n) => (n as HTMLElement).tagName === "A")[0] as
     | HTMLAnchorElement
     | undefined;
   if (

src/common/entity/binary_sensor_icon.ts

@@ -29,11 +29,8 @@ import {
   mdiPowerPlug,
   mdiPowerPlugOff,
   mdiRadioboxBlank,
+  mdiSmoke,
   mdiSnowflake,
-  mdiSmokeDetector,
-  mdiSmokeDetectorAlert,
-  mdiSmokeDetectorVariant,
-  mdiSmokeDetectorVariantAlert,
   mdiSquare,
   mdiSquareOutline,
   mdiStop,
@@ -55,8 +52,6 @@ export const binarySensorIcon = (state?: string, stateObj?: HassEntity) => {
       return is_off ? mdiBattery : mdiBatteryOutline;
     case "battery_charging":
       return is_off ? mdiBattery : mdiBatteryCharging;
-    case "carbon_monoxide":
-      return is_off ? mdiSmokeDetector : mdiSmokeDetectorAlert;
     case "cold":
       return is_off ? mdiThermometer : mdiSnowflake;
     case "connectivity":
@@ -73,7 +68,7 @@ export const binarySensorIcon = (state?: string, stateObj?: HassEntity) => {
     case "tamper":
       return is_off ? mdiCheckCircle : mdiAlertCircle;
     case "smoke":
-      return is_off ? mdiSmokeDetectorVariant : mdiSmokeDetectorVariantAlert;
+      return is_off ? mdiCheckCircle : mdiSmoke;
     case "heat":
       return is_off ? mdiThermometer : mdiFire;
     case "light":

src/common/entity/compute_state_display.ts

@@ -13,7 +13,6 @@ import { formatNumber, isNumericState } from "../number/format_number";
 import { LocalizeFunc } from "../translations/localize";
 import { computeStateDomain } from "./compute_state_domain";
 import { supportsFeature } from "./supports-feature";
-import { formatDuration, UNIT_TO_SECOND_CONVERT } from "../datetime/duration";
 
 export const computeStateDisplay = (
   localize: LocalizeFunc,
@@ -29,27 +28,11 @@ export const computeStateDisplay = (
 
   // Entities with a `unit_of_measurement` or `state_class` are numeric values and should use `formatNumber`
   if (isNumericState(stateObj)) {
-    // state is duration
-    if (
-      stateObj.attributes.device_class === "duration" &&
-      stateObj.attributes.unit_of_measurement &&
-      UNIT_TO_SECOND_CONVERT[stateObj.attributes.unit_of_measurement]
-    ) {
-      try {
-        return formatDuration(
-          compareState,
-          stateObj.attributes.unit_of_measurement
-        );
-      } catch (_err) {
-        // fallback to default
-      }
-    }
     if (stateObj.attributes.device_class === "monetary") {
       try {
         return formatNumber(compareState, locale, {
           style: "currency",
           currency: stateObj.attributes.unit_of_measurement,
-          minimumFractionDigits: 2,
         });
       } catch (_err) {
         // fallback to default

src/common/entity/domain_icon.ts

@@ -8,25 +8,26 @@ import {
   mdiCalendar,
   mdiCast,
   mdiCastConnected,
-  mdiCheckCircleOutline,
   mdiClock,
-  mdiCloseCircleOutline,
   mdiGestureTapButton,
   mdiLanConnect,
   mdiLanDisconnect,
+  mdiLightSwitch,
   mdiLock,
   mdiLockAlert,
   mdiLockClock,
   mdiLockOpen,
-  mdiPackage,
-  mdiPackageDown,
   mdiPackageUp,
   mdiPowerPlug,
   mdiPowerPlugOff,
   mdiRestart,
-  mdiToggleSwitchVariant,
-  mdiToggleSwitchVariantOff,
+  mdiToggleSwitch,
+  mdiToggleSwitchOff,
+  mdiCheckCircleOutline,
+  mdiCloseCircleOutline,
   mdiWeatherNight,
+  mdiPackage,
+  mdiPackageDown,
 } from "@mdi/js";
 import { HassEntity } from "home-assistant-js-websocket";
 import { updateIsInstalling, UpdateEntity } from "../../data/update";
@@ -108,11 +109,9 @@ export const domainIcon = (
         case "outlet":
           return compareState === "on" ? mdiPowerPlug : mdiPowerPlugOff;
         case "switch":
-          return compareState === "on"
-            ? mdiToggleSwitchVariant
-            : mdiToggleSwitchVariantOff;
+          return compareState === "on" ? mdiToggleSwitch : mdiToggleSwitchOff;
         default:
-          return mdiToggleSwitchVariant;
+          return mdiLightSwitch;
       }
 
     case "sensor": {

src/common/style/icon_color_css.ts

@@ -7,7 +7,6 @@ export const iconColorCSS = css`
   ha-state-icon[data-domain="calendar"][data-state="on"],
   ha-state-icon[data-domain="camera"][data-state="streaming"],
   ha-state-icon[data-domain="cover"][data-state="open"],
-  ha-state-icon[data-domain="device_tracker"][data-state="home"],
   ha-state-icon[data-domain="fan"][data-state="on"],
   ha-state-icon[data-domain="humidifier"][data-state="on"],
   ha-state-icon[data-domain="light"][data-state="on"],

src/common/util/promise-timeout.ts

@@ -1,4 +1,4 @@
-export const promiseTimeout = (ms: number, promise: Promise<any> | any) => {
+export const promiseTimeout = (ms: number, promise: Promise<any>) => {
   const timeout = new Promise((_resolve, reject) => {
     setTimeout(() => {
       reject(`Timed out in ${ms} ms.`);

src/common/util/subscribe-polling.ts

@@ -1,18 +0,0 @@
-import { HomeAssistant } from "../../types";
-
-export const subscribePollingCollection = (
-  hass: HomeAssistant,
-  updateData: (hass: HomeAssistant) => void,
-  interval: number
-) => {
-  let timeout;
-  const fetchData = async () => {
-    try {
-      await updateData(hass);
-    } finally {
-      timeout = setTimeout(() => fetchData(), interval);
-    }
-  };
-  fetchData();
-  return () => clearTimeout(timeout);
-};

src/common/util/time-cache-entity-promise-func.ts

@@ -1,53 +0,0 @@
-import { HomeAssistant } from "../../types";
-
-interface ResultCache<T> {
-  [entityId: string]: Promise<T> | undefined;
-}
-
-/**
- * Call a function with result caching per entity.
- * @param cacheKey key to store the cache on hass object
- * @param cacheTime time to cache the results
- * @param func function to fetch the data
- * @param hass Home Assistant object
- * @param entityId entity to fetch data for
- * @param args extra arguments to pass to the function to fetch the data
- * @returns
- */
-export const timeCacheEntityPromiseFunc = async <T>(
-  cacheKey: string,
-  cacheTime: number,
-  func: (hass: HomeAssistant, entityId: string, ...args: any[]) => Promise<T>,
-  hass: HomeAssistant,
-  entityId: string,
-  ...args: any[]
-): Promise<T> => {
-  let cache: ResultCache<T> | undefined = (hass as any)[cacheKey];
-
-  if (!cache) {
-    cache = hass[cacheKey] = {};
-  }
-
-  const lastResult = cache[entityId];
-
-  if (lastResult) {
-    return lastResult;
-  }
-
-  const result = func(hass, entityId, ...args);
-  cache[entityId] = result;
-
-  result.then(
-    // When successful, set timer to clear cache
-    () =>
-      setTimeout(() => {
-        cache![entityId] = undefined;
-      }, cacheTime),
-    // On failure, clear cache right away
-    () => {
-      cache![entityId] = undefined;
-    }
-  );
-
-  return result;
-};

src/common/util/time-cache-function-promise.ts

@@ -1,80 +1,43 @@
 import { HomeAssistant } from "../../types";
 
-interface CacheResult<T> {
-  result: T;
-  cacheKey: any;
+interface ResultCache<T> {
+  [entityId: string]: Promise<T> | undefined;
 }
 
-/**
- * Caches a result of a promise for X time. Allows optional extra validation
- * check to invalidate the cache.
- * @param cacheKey the key to store the cache
- * @param cacheTime the time to cache the result
- * @param func the function to fetch the data
- * @param generateCacheKey optional function to generate a cache key based on current hass + cached result. Cache is invalid if generates a different cache key.
- * @param hass Home Assistant object
- * @param args extra arguments to pass to the function to fetch the data
- * @returns
- */
 export const timeCachePromiseFunc = async <T>(
   cacheKey: string,
   cacheTime: number,
-  func: (hass: HomeAssistant, ...args: any[]) => Promise<T>,
-  generateCacheKey:
-    | ((hass: HomeAssistant, lastResult: T) => unknown)
-    | undefined,
+  func: (hass: HomeAssistant, entityId: string, ...args: any[]) => Promise<T>,
   hass: HomeAssistant,
+  entityId: string,
   ...args: any[]
 ): Promise<T> => {
-  const anyHass = hass as any;
-  const lastResult: Promise<CacheResult<T>> | CacheResult<T> | undefined =
-    anyHass[cacheKey];
+  let cache: ResultCache<T> | undefined = (hass as any)[cacheKey];
 
-  const checkCachedResult = (result: CacheResult<T>): T | Promise<T> => {
-    if (
-      !generateCacheKey ||
-      generateCacheKey(hass, result.result) === result.cacheKey
-    ) {
-      return result.result;
-    }
-
-    anyHass[cacheKey] = undefined;
-    return timeCachePromiseFunc(
-      cacheKey,
-      cacheTime,
-      func,
-      generateCacheKey,
-      hass,
-      ...args
-    );
-  };
-
-  // If we have a cached result, return it if it's still valid
-  if (lastResult) {
-    return lastResult instanceof Promise
-      ? lastResult.then(checkCachedResult)
-      : checkCachedResult(lastResult);
+  if (!cache) {
+    cache = hass[cacheKey] = {};
   }
 
-  const resultPromise = func(hass, ...args);
-  anyHass[cacheKey] = resultPromise;
+  const lastResult = cache[entityId];
 
-  resultPromise.then(
+  if (lastResult) {
+    return lastResult;
+  }
+
+  const result = func(hass, entityId, ...args);
+  cache[entityId] = result;
+
+  result.then(
     // When successful, set timer to clear cache
-    (result) => {
-      anyHass[cacheKey] = {
-        result,
-        cacheKey: generateCacheKey?.(hass, result),
-      };
+    () =>
       setTimeout(() => {
-        anyHass[cacheKey] = undefined;
-      }, cacheTime);
-    },
+        cache![entityId] = undefined;
+      }, cacheTime),
     // On failure, clear cache right away
     () => {
-      anyHass[cacheKey] = undefined;
+      cache![entityId] = undefined;
     }
   );
 
-  return resultPromise;
+  return result;
 };

src/components/chart/statistics-chart.ts

@@ -347,8 +347,8 @@ class StatisticsChart extends LitElement {
         statTypes.forEach((type) => {
           let val: number | null;
           if (type === "sum") {
-            if (initVal === null) {
-              initVal = val = stat.state || 0;
+            if (!initVal) {
+              initVal = val = stat.state;
               prevSum = stat.sum;
             } else {
               val = initVal + ((stat.sum || 0) - prevSum!);

src/components/currency-datalist.ts

@@ -1,167 +1,165 @@
-export const currencies = [
-  "AED",
-  "AFN",
-  "ALL",
-  "AMD",
-  "ANG",
-  "AOA",
-  "ARS",
-  "AUD",
-  "AWG",
-  "AZN",
-  "BAM",
-  "BBD",
-  "BDT",
-  "BGN",
-  "BHD",
-  "BIF",
-  "BMD",
-  "BND",
-  "BOB",
-  "BRL",
-  "BSD",
-  "BTN",
-  "BWP",
-  "BYN",
-  "BYR",
-  "BZD",
-  "CAD",
-  "CDF",
-  "CHF",
-  "CLP",
-  "CNY",
-  "COP",
-  "CRC",
-  "CUP",
-  "CVE",
-  "CZK",
-  "DJF",
-  "DKK",
-  "DOP",
-  "DZD",
-  "EGP",
-  "ERN",
-  "ETB",
-  "EUR",
-  "FJD",
-  "FKP",
-  "GBP",
-  "GEL",
-  "GHS",
-  "GIP",
-  "GMD",
-  "GNF",
-  "GTQ",
-  "GYD",
-  "HKD",
-  "HNL",
-  "HRK",
-  "HTG",
-  "HUF",
-  "IDR",
-  "ILS",
-  "INR",
-  "IQD",
-  "IRR",
-  "ISK",
-  "JMD",
-  "JOD",
-  "JPY",
-  "KES",
-  "KGS",
-  "KHR",
-  "KMF",
-  "KPW",
-  "KRW",
-  "KWD",
-  "KYD",
-  "KZT",
-  "LAK",
-  "LBP",
-  "LKR",
-  "LRD",
-  "LSL",
-  "LTL",
-  "LYD",
-  "MAD",
-  "MDL",
-  "MGA",
-  "MKD",
-  "MMK",
-  "MNT",
-  "MOP",
-  "MRO",
-  "MUR",
-  "MVR",
-  "MWK",
-  "MXN",
-  "MYR",
-  "MZN",
-  "NAD",
-  "NGN",
-  "NIO",
-  "NOK",
-  "NPR",
-  "NZD",
-  "OMR",
-  "PAB",
-  "PEN",
-  "PGK",
-  "PHP",
-  "PKR",
-  "PLN",
-  "PYG",
-  "QAR",
-  "RON",
-  "RSD",
-  "RUB",
-  "RWF",
-  "SAR",
-  "SBD",
-  "SCR",
-  "SDG",
-  "SEK",
-  "SGD",
-  "SHP",
-  "SLL",
-  "SOS",
-  "SRD",
-  "SSP",
-  "STD",
-  "SYP",
-  "SZL",
-  "THB",
-  "TJS",
-  "TMT",
-  "TND",
-  "TOP",
-  "TRY",
-  "TTD",
-  "TWD",
-  "TZS",
-  "UAH",
-  "UGX",
-  "USD",
-  "UYU",
-  "UZS",
-  "VEF",
-  "VND",
-  "VUV",
-  "WST",
-  "XAF",
-  "XCD",
-  "XOF",
-  "XPF",
-  "YER",
-  "ZAR",
-  "ZMK",
-  "ZWL",
-];
-
 export const createCurrencyListEl = () => {
   const list = document.createElement("datalist");
   list.id = "currencies";
-  for (const currency of currencies) {
+  for (const currency of [
+    "AED",
+    "AFN",
+    "ALL",
+    "AMD",
+    "ANG",
+    "AOA",
+    "ARS",
+    "AUD",
+    "AWG",
+    "AZN",
+    "BAM",
+    "BBD",
+    "BDT",
+    "BGN",
+    "BHD",
+    "BIF",
+    "BMD",
+    "BND",
+    "BOB",
+    "BRL",
+    "BSD",
+    "BTN",
+    "BWP",
+    "BYN",
+    "BYR",
+    "BZD",
+    "CAD",
+    "CDF",
+    "CHF",
+    "CLP",
+    "CNY",
+    "COP",
+    "CRC",
+    "CUP",
+    "CVE",
+    "CZK",
+    "DJF",
+    "DKK",
+    "DOP",
+    "DZD",
+    "EGP",
+    "ERN",
+    "ETB",
+    "EUR",
+    "FJD",
+    "FKP",
+    "GBP",
+    "GEL",
+    "GHS",
+    "GIP",
+    "GMD",
+    "GNF",
+    "GTQ",
+    "GYD",
+    "HKD",
+    "HNL",
+    "HRK",
+    "HTG",
+    "HUF",
+    "IDR",
+    "ILS",
+    "INR",
+    "IQD",
+    "IRR",
+    "ISK",
+    "JMD",
+    "JOD",
+    "JPY",
+    "KES",
+    "KGS",
+    "KHR",
+    "KMF",
+    "KPW",
+    "KRW",
+    "KWD",
+    "KYD",
+    "KZT",
+    "LAK",
+    "LBP",
+    "LKR",
+    "LRD",
+    "LSL",
+    "LTL",
+    "LYD",
+    "MAD",
+    "MDL",
+    "MGA",
+    "MKD",
+    "MMK",
+    "MNT",
+    "MOP",
+    "MRO",
+    "MUR",
+    "MVR",
+    "MWK",
+    "MXN",
+    "MYR",
+    "MZN",
+    "NAD",
+    "NGN",
+    "NIO",
+    "NOK",
+    "NPR",
+    "NZD",
+    "OMR",
+    "PAB",
+    "PEN",
+    "PGK",
+    "PHP",
+    "PKR",
+    "PLN",
+    "PYG",
+    "QAR",
+    "RON",
+    "RSD",
+    "RUB",
+    "RWF",
+    "SAR",
+    "SBD",
+    "SCR",
+    "SDG",
+    "SEK",
+    "SGD",
+    "SHP",
+    "SLL",
+    "SOS",
+    "SRD",
+    "SSP",
+    "STD",
+    "SYP",
+    "SZL",
+    "THB",
+    "TJS",
+    "TMT",
+    "TND",
+    "TOP",
+    "TRY",
+    "TTD",
+    "TWD",
+    "TZS",
+    "UAH",
+    "UGX",
+    "USD",
+    "UYU",
+    "UZS",
+    "VEF",
+    "VND",
+    "VUV",
+    "WST",
+    "XAF",
+    "XCD",
+    "XOF",
+    "XPF",
+    "YER",
+    "ZAR",
+    "ZMK",
+    "ZWL",
+  ]) {
     const option = document.createElement("option");
     option.value = currency;
     option.innerHTML = currency;

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

@@ -5,7 +5,6 @@ import { fireEvent } from "../../common/dom/fire_event";
 import {
   DeviceAutomation,
   deviceAutomationsEqual,
-  sortDeviceAutomations,
 } from "../../data/device_automation";
 import { HomeAssistant } from "../../types";
 import "../ha-select";
@@ -128,9 +127,7 @@ export abstract class HaDeviceAutomationPicker<
 
   private async _updateDeviceInfo() {
     this._automations = this.deviceId
-      ? (await this._fetchDeviceAutomations(this.hass, this.deviceId)).sort(
-          sortDeviceAutomations
-        )
+      ? await this._fetchDeviceAutomations(this.hass, this.deviceId)
       : // No device, clear the list of automations
         [];
 
@@ -164,9 +161,8 @@ export abstract class HaDeviceAutomationPicker<
     if (this.value && deviceAutomationsEqual(automation, this.value)) {
       return;
     }
-    const value = { ...automation };
-    delete value.metadata;
-    fireEvent(this, "value-changed", { value });
+    fireEvent(this, "change");
+    fireEvent(this, "value-changed", { value: automation });
   }
 
   static get styles(): CSSResultGroup {

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

@@ -52,8 +52,6 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
 
   @property() public value?: string;
 
-  @property() public helper?: string;
-
   @property() public devices?: DeviceRegistryEntry[];
 
   @property() public areas?: AreaRegistryEntry[];
@@ -88,8 +86,6 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean }) public disabled?: boolean;
 
-  @property({ type: Boolean }) public required?: boolean;
-
   @state() private _opened?: boolean;
 
   @query("ha-combo-box", true) public comboBox!: HaComboBox;
@@ -198,10 +194,9 @@ export class HaDevicePicker extends SubscribeMixin(LitElement) {
           this.hass,
           deviceEntityLookup[device.id]
         ),
-        area:
-          device.area_id && areaLookup[device.area_id]
-            ? areaLookup[device.area_id].name
-            : this.hass.localize("ui.components.device-picker.no_area"),
+        area: device.area_id
+          ? areaLookup[device.area_id].name
+          : this.hass.localize("ui.components.device-picker.no_area"),
       }));
       if (!outputDevices.length) {
         return [
@@ -272,10 +267,8 @@ 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}
         item-value-path="id"
         item-label-path="name"
         @opened-changed=${this._openedChanged}

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

@@ -4,7 +4,6 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
 import "./ha-device-picker";
-import type { HaDevicePickerDeviceFilterFunc } from "./ha-device-picker";
 
 @customElement("ha-devices-picker")
 class HaDevicesPicker extends LitElement {
@@ -12,12 +11,6 @@ class HaDevicesPicker extends LitElement {
 
   @property() public value?: string[];
 
-  @property() public helper?: string;
-
-  @property({ type: Boolean }) public disabled?: boolean;
-
-  @property({ type: Boolean }) public required?: boolean;
-
   /**
    * Show entities from specific domains.
    * @type {string}
@@ -42,8 +35,6 @@ class HaDevicesPicker extends LitElement {
 
   @property({ attribute: "pick-device-label" }) public pickDeviceLabel?: string;
 
-  @property() public deviceFilter?: HaDevicePickerDeviceFilterFunc;
-
   protected render(): TemplateResult {
     if (!this.hass) {
       return html``;
@@ -58,13 +49,11 @@ class HaDevicesPicker extends LitElement {
               allow-custom-entity
               .curValue=${entityId}
               .hass=${this.hass}
-              .deviceFilter=${this.deviceFilter}
               .includeDomains=${this.includeDomains}
               .excludeDomains=${this.excludeDomains}
               .includeDeviceClasses=${this.includeDeviceClasses}
               .value=${entityId}
               .label=${this.pickedDeviceLabel}
-              .disabled=${this.disabled}
               @value-changed=${this._deviceChanged}
             ></ha-device-picker>
           </div>
@@ -72,16 +61,11 @@ class HaDevicesPicker extends LitElement {
       )}
       <div>
         <ha-device-picker
-          allow-custom-entity
           .hass=${this.hass}
-          .helper=${this.helper}
-          .deviceFilter=${this.deviceFilter}
           .includeDomains=${this.includeDomains}
           .excludeDomains=${this.excludeDomains}
           .includeDeviceClasses=${this.includeDeviceClasses}
           .label=${this.pickDeviceLabel}
-          .disabled=${this.disabled}
-          .required=${this.required && !currentDevices.length}
           @value-changed=${this._addDevice}
         ></ha-device-picker>
       </div>

src/components/entity/ha-entities-picker.ts

@@ -14,12 +14,6 @@ class HaEntitiesPickerLight extends LitElement {
 
   @property({ type: Array }) public value?: string[];
 
-  @property({ type: Boolean }) public disabled?: boolean;
-
-  @property({ type: Boolean }) public required?: boolean;
-
-  @property() public helper?: string;
-
   /**
    * Show entities from specific domains.
    * @type {string}
@@ -98,7 +92,6 @@ class HaEntitiesPickerLight extends LitElement {
               .entityFilter=${this._entityFilter}
               .value=${entityId}
               .label=${this.pickedEntityLabel}
-              .disabled=${this.disabled}
               @value-changed=${this._entityChanged}
             ></ha-entity-picker>
           </div>
@@ -106,7 +99,6 @@ class HaEntitiesPickerLight extends LitElement {
       )}
       <div>
         <ha-entity-picker
-          allow-custom-entity
           .hass=${this.hass}
           .includeDomains=${this.includeDomains}
           .excludeDomains=${this.excludeDomains}
@@ -116,9 +108,6 @@ class HaEntitiesPickerLight extends LitElement {
           .includeUnitOfMeasurement=${this.includeUnitOfMeasurement}
           .entityFilter=${this._entityFilter}
           .label=${this.pickEntityLabel}
-          .helper=${this.helper}
-          .disabled=${this.disabled}
-          .required=${this.required && !currentEntities.length}
           @value-changed=${this._addEntity}
         ></ha-entity-picker>
       </div>

src/components/entity/ha-entity-attribute-picker.ts

@@ -19,8 +19,6 @@ class HaEntityAttributePicker extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @property({ type: Boolean }) public required = false;
-
   @property({ type: Boolean, attribute: "allow-custom-value" })
   public allowCustomValue;
 
@@ -28,8 +26,6 @@ class HaEntityAttributePicker extends LitElement {
 
   @property() public value?: string;
 
-  @property() public helper?: string;
-
   @property({ type: Boolean }) private _opened = false;
 
   @query("ha-combo-box", true) private _comboBox!: HaComboBox;
@@ -65,8 +61,6 @@ class HaEntityAttributePicker extends LitElement {
           "ui.components.entity.entity-attribute-picker.attribute"
         )}
         .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

@@ -18,6 +18,7 @@ import "./state-badge";
 
 interface HassEntityWithCachedName extends HassEntity {
   friendly_name: string;
+  id: string;
 }
 
 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
@@ -39,8 +40,6 @@ export class HaEntityPicker extends LitElement {
 
   @property({ type: Boolean }) public disabled?: boolean;
 
-  @property({ type: Boolean }) public required?: boolean;
-
   @property({ type: Boolean, attribute: "allow-custom-entity" })
   public allowCustomEntity;
 
@@ -48,8 +47,6 @@ export class HaEntityPicker extends LitElement {
 
   @property() public value?: string;
 
-  @property() public helper?: string;
-
   /**
    * Show entities from specific domains.
    * @type {Array}
@@ -100,6 +97,9 @@ export class HaEntityPicker extends LitElement {
 
   @property() public entityFilter?: HaEntityPickerEntityFilterFunc;
 
+  @property({ attribute: "item-value-path" }) public itemValuePath =
+    "entity_id";
+
   @property({ type: Boolean }) public hideClearIcon = false;
 
   @state() private _opened = false;
@@ -148,6 +148,7 @@ export class HaEntityPicker extends LitElement {
             state: "",
             last_changed: "",
             last_updated: "",
+            id: "",
             context: { id: "", user_id: null, parent_id: null },
             friendly_name: this.hass!.localize(
               "ui.components.entity.entity-picker.no_entities"
@@ -168,10 +169,15 @@ export class HaEntityPicker extends LitElement {
         );
 
         return entityIds
-          .map((key) => ({
-            ...hass!.states[key],
-            friendly_name: computeStateName(hass!.states[key]) || key,
-          }))
+          .map((key) => {
+            const stateObj = hass!.states[key];
+
+            return {
+              ...stateObj,
+              friendly_name: computeStateName(stateObj) || key,
+              id: stateObj.context.id,
+            };
+          })
           .sort((entityA, entityB) =>
             caseInsensitiveStringCompare(
               entityA.friendly_name,
@@ -199,10 +205,15 @@ export class HaEntityPicker extends LitElement {
       }
 
       states = entityIds
-        .map((key) => ({
-          ...hass!.states[key],
-          friendly_name: computeStateName(hass!.states[key]) || key,
-        }))
+        .map((key) => {
+          const stateObj = hass!.states[key];
+
+          return {
+            ...stateObj,
+            friendly_name: computeStateName(stateObj) || key,
+            id: stateObj.context?.id,
+          };
+        })
         .sort((entityA, entityB) =>
           caseInsensitiveStringCompare(
             entityA.friendly_name,
@@ -247,6 +258,7 @@ export class HaEntityPicker extends LitElement {
             state: "",
             last_changed: "",
             last_updated: "",
+            id: "",
             context: { id: "", user_id: null, parent_id: null },
             friendly_name: this.hass!.localize(
               "ui.components.entity.entity-picker.no_match"
@@ -299,18 +311,16 @@ export class HaEntityPicker extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-combo-box
-        item-value-path="entity_id"
         item-label-path="friendly_name"
+        .itemValuePath=${this.itemValuePath}
         .hass=${this.hass}
         .value=${this._value}
         .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}
-        .required=${this.required}
         @opened-changed=${this._openedChanged}
         @value-changed=${this._valueChanged}
         @filter-changed=${this._filterChanged}

src/components/ha-addon-picker.ts

@@ -13,12 +13,9 @@ import { HaComboBox } from "./ha-combo-box";
 
 const rowRenderer: ComboBoxLitRenderer<HassioAddonInfo> = (
   item
-) => html`<mwc-list-item twoline graphic="icon">
+) => html`<mwc-list-item twoline>
   <span>${item.name}</span>
   <span slot="secondary">${item.slug}</span>
-  ${item.icon
-    ? html`<img slot="graphic" .src="/api/hassio/addons/${item.slug}/icon" />`
-    : ""}
 </mwc-list-item>`;
 
 @customElement("ha-addon-picker")
@@ -29,14 +26,10 @@ class HaAddonPicker extends LitElement {
 
   @property() public value = "";
 
-  @property() public helper?: string;
-
   @state() private _addons?: HassioAddonInfo[];
 
   @property({ type: Boolean }) public disabled = false;
 
-  @property({ type: Boolean }) public required = false;
-
   @query("ha-combo-box") private _comboBox!: HaComboBox;
 
   public open() {
@@ -62,9 +55,6 @@ class HaAddonPicker extends LitElement {
           ? this.hass.localize("ui.components.addon-picker.addon")
           : this.label}
         .value=${this._value}
-        .required=${this.required}
-        .disabled=${this.disabled}
-        .helper=${this.helper}
         .renderer=${rowRenderer}
         .items=${this._addons}
         item-value-path="slug"

src/components/ha-analytics.ts

@@ -2,12 +2,12 @@ import "@polymer/paper-tooltip/paper-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
-import type { Analytics, AnalyticsPreferences } from "../data/analytics";
+import { Analytics, AnalyticsPreferences } from "../data/analytics";
 import { haStyle } from "../resources/styles";
-import type { HomeAssistant } from "../types";
+import { HomeAssistant } from "../types";
+import "./ha-checkbox";
+import type { HaCheckbox } from "./ha-checkbox";
 import "./ha-settings-row";
-import "./ha-switch";
-import type { HaSwitch } from "./ha-switch";
 
 const ADDITIONAL_PREFERENCES = [
   {
@@ -40,62 +40,62 @@ export class HaAnalytics extends LitElement {
 
     return html`
       <ha-settings-row>
+        <span slot="prefix">
+          <ha-checkbox
+            @change=${this._handleRowCheckboxClick}
+            .checked=${baseEnabled}
+            .preference=${"base"}
+            .disabled=${loading}
+            name="base"
+          >
+          </ha-checkbox>
+        </span>
         <span slot="heading" data-for="base"> Basic analytics </span>
         <span slot="description" data-for="base">
           This includes information about your system.
         </span>
-        <ha-switch
-          @change=${this._handleRowClick}
-          .checked=${baseEnabled}
-          .preference=${"base"}
-          .disabled=${loading}
-          name="base"
-        >
-        </ha-switch>
       </ha-settings-row>
       ${ADDITIONAL_PREFERENCES.map(
         (preference) =>
-          html`
-            <ha-settings-row>
-              <span slot="heading" data-for=${preference.key}>
-                ${preference.title}
-              </span>
-              <span slot="description" data-for=${preference.key}>
-                ${preference.description}
-              </span>
-              <span>
-                <ha-switch
-                  @change=${this._handleRowClick}
-                  .checked=${this.analytics?.preferences[preference.key]}
-                  .preference=${preference.key}
-                  name=${preference.key}
-                >
-                </ha-switch>
-                ${!baseEnabled
-                  ? html`
-                      <paper-tooltip animation-delay="0" position="right">
-                        You need to enable basic analytics for this option to be
-                        available
-                      </paper-tooltip>
-                    `
-                  : ""}
-              </span>
-            </ha-settings-row>
-          `
+          html`<ha-settings-row>
+            <span slot="prefix">
+              <ha-checkbox
+                @change=${this._handleRowCheckboxClick}
+                .checked=${this.analytics?.preferences[preference.key]}
+                .preference=${preference.key}
+                name=${preference.key}
+              >
+              </ha-checkbox>
+              ${!baseEnabled
+                ? html`<paper-tooltip animation-delay="0" position="right">
+                    You need to enable basic analytics for this option to be
+                    available
+                  </paper-tooltip>`
+                : ""}
+            </span>
+            <span slot="heading" data-for=${preference.key}>
+              ${preference.title}
+            </span>
+            <span slot="description" data-for=${preference.key}>
+              ${preference.description}
+            </span>
+          </ha-settings-row>`
       )}
       <ha-settings-row>
+        <span slot="prefix">
+          <ha-checkbox
+            @change=${this._handleRowCheckboxClick}
+            .checked=${this.analytics?.preferences.diagnostics}
+            .preference=${"diagnostics"}
+            .disabled=${loading}
+            name="diagnostics"
+          >
+          </ha-checkbox>
+        </span>
         <span slot="heading" data-for="diagnostics"> Diagnostics </span>
         <span slot="description" data-for="diagnostics">
           Share crash reports when unexpected errors occur.
         </span>
-        <ha-switch
-          @change=${this._handleRowClick}
-          .checked=${this.analytics?.preferences.diagnostics}
-          .preference=${"diagnostics"}
-          .disabled=${loading}
-          name="diagnostics"
-        >
-        </ha-switch>
       </ha-settings-row>
     `;
   }
@@ -120,23 +120,23 @@ export class HaAnalytics extends LitElement {
     });
   }
 
-  private _handleRowClick(ev: Event) {
-    const target = ev.currentTarget as HaSwitch;
-    const preference = (target as any).preference;
+  private _handleRowCheckboxClick(ev: Event) {
+    const checkbox = ev.currentTarget as HaCheckbox;
+    const preference = (checkbox as any).preference;
     const preferences = this.analytics ? { ...this.analytics.preferences } : {};
 
-    if (preferences[preference] === target.checked) {
+    if (preferences[preference] === checkbox.checked) {
       return;
     }
 
-    preferences[preference] = target.checked;
+    preferences[preference] = checkbox.checked;
 
     if (
       ADDITIONAL_PREFERENCES.some((entry) => entry.key === preference) &&
-      target.checked
+      checkbox.checked
     ) {
       preferences.base = true;
-    } else if (preference === "base" && !target.checked) {
+    } else if (preference === "base" && !checkbox.checked) {
       preferences.usage = false;
       preferences.statistics = false;
     }

src/components/ha-area-picker.ts

@@ -28,8 +28,8 @@ import { SubscribeMixin } from "../mixins/subscribe-mixin";
 import { PolymerChangedEvent } from "../polymer-types";
 import { HomeAssistant } from "../types";
 import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
-import "./ha-combo-box";
 import type { HaComboBox } from "./ha-combo-box";
+import "./ha-combo-box";
 import "./ha-icon-button";
 import "./ha-svg-icon";
 
@@ -49,8 +49,6 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
 
   @property() public value?: string;
 
-  @property() public helper?: string;
-
   @property() public placeholder?: string;
 
   @property({ type: Boolean, attribute: "no-add" })
@@ -86,8 +84,6 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean }) public disabled?: boolean;
 
-  @property({ type: Boolean }) public required?: boolean;
-
   @state() private _areas?: AreaRegistryEntry[];
 
   @state() private _devices?: DeviceRegistryEntry[];
@@ -314,13 +310,11 @@ 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"
         .value=${this.value}
         .disabled=${this.disabled}
-        .required=${this.required}
         .label=${this.label === undefined && this.hass
           ? this.hass.localize("ui.components.area-picker.area")
           : this.label}
@@ -409,7 +403,7 @@ export class HaAreaPicker extends SubscribeMixin(LitElement) {
             name,
           });
           this._areas = [...this._areas!, area];
-          (this.comboBox as any).filteredItems = this._getAreas(
+          (this.comboBox as any).items = this._getAreas(
             this._areas!,
             this._devices!,
             this._entities!,

src/components/ha-areas-picker.ts

@@ -1,166 +0,0 @@
-import { css, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../common/dom/fire_event";
-import type { EntityRegistryEntry } from "../data/entity_registry";
-import { SubscribeMixin } from "../mixins/subscribe-mixin";
-import type { HomeAssistant } from "../types";
-import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
-import "./ha-area-picker";
-
-@customElement("ha-areas-picker")
-export class HaAreasPicker extends SubscribeMixin(LitElement) {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property() public label?: string;
-
-  @property() public value?: string[];
-
-  @property() public helper?: string;
-
-  @property() public placeholder?: string;
-
-  @property({ type: Boolean, attribute: "no-add" })
-  public noAdd?: boolean;
-
-  /**
-   * Show only areas with entities from specific domains.
-   * @type {Array}
-   * @attr include-domains
-   */
-  @property({ type: Array, attribute: "include-domains" })
-  public includeDomains?: string[];
-
-  /**
-   * Show no areas with entities of these domains.
-   * @type {Array}
-   * @attr exclude-domains
-   */
-  @property({ type: Array, attribute: "exclude-domains" })
-  public excludeDomains?: string[];
-
-  /**
-   * Show only areas with entities of these device classes.
-   * @type {Array}
-   * @attr include-device-classes
-   */
-  @property({ type: Array, attribute: "include-device-classes" })
-  public includeDeviceClasses?: string[];
-
-  @property() public deviceFilter?: HaDevicePickerDeviceFilterFunc;
-
-  @property() public entityFilter?: (entity: EntityRegistryEntry) => boolean;
-
-  @property({ attribute: "picked-area-label" })
-  public pickedAreaLabel?: string;
-
-  @property({ attribute: "pick-area-label" })
-  public pickAreaLabel?: string;
-
-  @property({ type: Boolean }) public disabled?: boolean;
-
-  @property({ type: Boolean }) public required?: boolean;
-
-  protected render(): TemplateResult {
-    if (!this.hass) {
-      return html``;
-    }
-
-    const currentAreas = this._currentAreas;
-    return html`
-      ${currentAreas.map(
-        (area) => html`
-          <div>
-            <ha-area-picker
-              .curValue=${area}
-              .noAdd=${this.noAdd}
-              .hass=${this.hass}
-              .value=${area}
-              .label=${this.pickedAreaLabel}
-              .includeDomains=${this.includeDomains}
-              .excludeDomains=${this.excludeDomains}
-              .includeDeviceClasses=${this.includeDeviceClasses}
-              .deviceFilter=${this.deviceFilter}
-              .entityFilter=${this.entityFilter}
-              .disabled=${this.disabled}
-              @value-changed=${this._areaChanged}
-            ></ha-area-picker>
-          </div>
-        `
-      )}
-      <div>
-        <ha-area-picker
-          .noAdd=${this.noAdd}
-          .hass=${this.hass}
-          .label=${this.pickAreaLabel}
-          .helper=${this.helper}
-          .includeDomains=${this.includeDomains}
-          .excludeDomains=${this.excludeDomains}
-          .includeDeviceClasses=${this.includeDeviceClasses}
-          .deviceFilter=${this.deviceFilter}
-          .entityFilter=${this.entityFilter}
-          .disabled=${this.disabled}
-          .placeholder=${this.placeholder}
-          .required=${this.required && !currentAreas.length}
-          @value-changed=${this._addArea}
-        ></ha-area-picker>
-      </div>
-    `;
-  }
-
-  private get _currentAreas(): string[] {
-    return this.value || [];
-  }
-
-  private async _updateAreas(areas) {
-    this.value = areas;
-
-    fireEvent(this, "value-changed", {
-      value: areas,
-    });
-  }
-
-  private _areaChanged(ev: CustomEvent) {
-    ev.stopPropagation();
-    const curValue = (ev.currentTarget as any).curValue;
-    const newValue = ev.detail.value;
-    if (newValue === curValue) {
-      return;
-    }
-    const currentAreas = this._currentAreas;
-    if (!newValue || currentAreas.includes(newValue)) {
-      this._updateAreas(currentAreas.filter((ent) => ent !== curValue));
-      return;
-    }
-    this._updateAreas(
-      currentAreas.map((ent) => (ent === curValue ? newValue : ent))
-    );
-  }
-
-  private _addArea(ev: CustomEvent) {
-    ev.stopPropagation();
-
-    const toAdd = ev.detail.value;
-    if (!toAdd) {
-      return;
-    }
-    (ev.currentTarget as any).value = "";
-    const currentAreas = this._currentAreas;
-    if (currentAreas.includes(toAdd)) {
-      return;
-    }
-
-    this._updateAreas([...currentAreas, toAdd]);
-  }
-
-  static override styles = css`
-    div {
-      margin-top: 8px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-areas-picker": HaAreasPicker;
-  }
-}

src/components/ha-base-time-input.ts

@@ -1,14 +1,12 @@
-import "@material/mwc-list/mwc-list-item";
-import { css, html, LitElement, TemplateResult } from "lit";
+import { LitElement, html, TemplateResult, css } from "lit";
 import { customElement, property } from "lit/decorators";
+import "./ha-select";
+import "@material/mwc-list/mwc-list-item";
+import "./ha-textfield";
 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;
   hours: number;
   minutes: number;
   seconds: number;
@@ -23,11 +21,6 @@ export class HaBaseTimeInput extends LitElement {
    */
   @property() label?: string;
 
-  /**
-   * Helper for the input
-   */
-  @property() helper?: string;
-
   /**
    * auto validate time inputs
    */
@@ -48,11 +41,6 @@ export class HaBaseTimeInput extends LitElement {
    */
   @property({ type: Boolean }) disabled = false;
 
-  /**
-   * day
-   */
-  @property({ type: Number }) days = 0;
-
   /**
    * hour
    */
@@ -73,11 +61,6 @@ export class HaBaseTimeInput extends LitElement {
    */
   @property({ type: Number }) milliseconds = 0;
 
-  /**
-   * Label for the day input
-   */
-  @property() dayLabel = "";
-
   /**
    * Label for the hour input
    */
@@ -108,11 +91,6 @@ export class HaBaseTimeInput extends LitElement {
    */
   @property({ type: Boolean }) enableMillisecond = false;
 
-  /**
-   * show the day field
-   */
-  @property({ type: Boolean }) enableDay = false;
-
   /**
    * limit hours input
    */
@@ -130,33 +108,8 @@ export class HaBaseTimeInput extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      ${this.label
-        ? html`<label>${this.label}${this.required ? " *" : ""}</label>`
-        : ""}
+      ${this.label ? html`<label>${this.label}</label>` : ""}
       <div class="time-input-wrap">
-        ${this.enableDay
-          ? html`
-              <ha-textfield
-                id="day"
-                type="number"
-                inputmode="numeric"
-                .value=${this.days}
-                .label=${this.dayLabel}
-                name="days"
-                @input=${this._valueChanged}
-                @focus=${this._onFocus}
-                no-spinner
-                .required=${this.required}
-                .autoValidate=${this.autoValidate}
-                min="0"
-                .disabled=${this.disabled}
-                suffix=":"
-                class="hasSuffix"
-              >
-              </ha-textfield>
-            `
-          : ""}
-
         <ha-textfield
           id="hour"
           type="number"
@@ -254,9 +207,6 @@ export class HaBaseTimeInput extends LitElement {
               <mwc-list-item value="PM">PM</mwc-list-item>
             </ha-select>`}
       </div>
-      ${this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
-        : ""}
     `;
   }
 
@@ -310,7 +260,6 @@ export class HaBaseTimeInput extends LitElement {
       border-radius: var(--mdc-shape-small, 4px) var(--mdc-shape-small, 4px) 0 0;
       overflow: hidden;
       position: relative;
-      direction: ltr;
     }
     ha-textfield {
       width: 40px;

src/components/ha-button-toggle-group.ts

@@ -117,19 +117,6 @@ export class HaButtonToggleGroup extends LitElement {
         --mdc-shape-small: 4px;
         border-right-width: 1px;
       }
-
-      :host([dir="rtl"]) ha-icon-button:first-child,
-      :host([dir="rtl"]) mwc-button:first-child {
-        border-radius: 0 4px 4px 0;
-        border-right-width: 1px;
-        --mdc-shape-small: 0 4px 4px 0;
-        --mdc-button-outline-width: 1px;
-      }
-      :host([dir="rtl"]) ha-icon-button:last-child,
-      :host([dir="rtl"]) mwc-button:last-child {
-        --mdc-shape-small: 4px 0 0 4px;
-        border-radius: 4px 0 0 4px;
-      }
     `;
   }
 }

src/components/ha-chip-set.ts

@@ -25,7 +25,13 @@ export class HaChipSet extends LitElement {
       ${unsafeCSS(chipStyles)}
 
       slot::slotted(ha-chip) {
-        margin: 4px 4px 4px 0;
+        margin: 4px;
+      }
+      slot::slotted(ha-chip:first-of-type) {
+        margin-left: -4px;
+      }
+      slot::slotted(ha-chip:last-of-type) {
+        margin-right: -4px;
       }
     `;
   }

src/components/ha-chip.ts

@@ -14,8 +14,6 @@ import { customElement, property } from "lit/decorators";
 export class HaChip extends LitElement {
   @property({ type: Boolean }) public hasIcon = false;
 
-  @property({ type: Boolean }) public hasTrailingIcon = false;
-
   @property({ type: Boolean }) public noText = false;
 
   protected render(): TemplateResult {
@@ -32,11 +30,6 @@ export class HaChip extends LitElement {
             <span class="mdc-chip__text"><slot></slot></span>
           </span>
         </span>
-        ${this.hasTrailingIcon
-          ? html`<div class="mdc-chip__icon mdc-chip__icon--trailing">
-              <slot name="trailing-icon"></slot>
-            </div>`
-          : null}
       </div>
     `;
   }
@@ -60,20 +53,14 @@ export class HaChip extends LitElement {
         color: var(--ha-chip-text-color, var(--primary-text-color));
       }
 
-      .mdc-chip__icon--leading,
-      .mdc-chip__icon--trailing {
-        --mdc-icon-size: 18px;
-        line-height: 14px;
+      .mdc-chip__icon--leading {
+        --mdc-icon-size: 20px;
         color: var(--ha-chip-icon-color, var(--ha-chip-text-color));
       }
       .mdc-chip.no-text
         .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
         margin-right: -4px;
       }
-
-      span[role="gridcell"] {
-        line-height: 14px;
-      }
     `;
   }
 }

src/components/ha-clickable-list-item.ts

@@ -1,76 +0,0 @@
-import { ListItemBase } from "@material/mwc-list/mwc-list-item-base";
-import { styles } from "@material/mwc-list/mwc-list-item.css";
-import { css, CSSResult, html } from "lit";
-import { customElement, property, query } from "lit/decorators";
-
-@customElement("ha-clickable-list-item")
-export class HaClickableListItem extends ListItemBase {
-  @property() public href?: string;
-
-  @property({ type: Boolean }) public disableHref = false;
-
-  // property used only in css
-  @property({ type: Boolean, reflect: true }) public rtl = false;
-
-  @property({ type: Boolean, reflect: true }) public openNewTab = false;
-
-  @query("a") private _anchor!: HTMLAnchorElement;
-
-  public render() {
-    const r = super.render();
-    const href = this.href || "";
-
-    return html`${this.disableHref
-      ? html`<a aria-role="option">${r}</a>`
-      : html`<a
-          aria-role="option"
-          target=${this.openNewTab ? "_blank" : ""}
-          href=${href}
-          >${r}</a
-        >`}`;
-  }
-
-  firstUpdated() {
-    super.firstUpdated();
-    this.addEventListener("keydown", (ev) => {
-      if (ev.key === "Enter" || ev.key === " ") {
-        this._anchor.click();
-      }
-    });
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      styles,
-      css`
-        :host {
-          padding-left: 0px;
-          padding-right: 0px;
-        }
-        :host([rtl]) span {
-          margin-left: var(--mdc-list-item-graphic-margin, 20px) !important;
-          margin-right: 0px !important;
-        }
-        :host([graphic="avatar"]:not([twoLine])),
-        :host([graphic="icon"]:not([twoLine])) {
-          height: 48px;
-        }
-        a {
-          width: 100%;
-          height: 100%;
-          display: flex;
-          align-items: center;
-          padding-left: var(--mdc-list-side-padding, 20px);
-          padding-right: var(--mdc-list-side-padding, 20px);
-          overflow: hidden;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-clickable-list-item": HaClickableListItem;
-  }
-}

src/components/ha-combo-box.ts

@@ -64,8 +64,6 @@ export class HaComboBox extends LitElement {
 
   @property() public validationMessage?: string;
 
-  @property() public helper?: string;
-
   @property({ attribute: "error-message" }) public errorMessage?: string;
 
   @property({ type: Boolean }) public invalid?: boolean;
@@ -89,8 +87,6 @@ export class HaComboBox extends LitElement {
 
   @property({ type: Boolean }) public disabled?: boolean;
 
-  @property({ type: Boolean }) public required?: boolean;
-
   @property({ type: Boolean, reflect: true, attribute: "opened" })
   private _opened?: boolean;
 
@@ -112,22 +108,17 @@ export class HaComboBox extends LitElement {
     return this._comboBox.selectedItem;
   }
 
-  public setInputValue(value: string) {
-    this._comboBox.value = value;
-  }
-
   protected render(): TemplateResult {
     return html`
       <vaadin-combo-box-light
         .itemValuePath=${this.itemValuePath}
         .itemIdPath=${this.itemIdPath}
         .itemLabelPath=${this.itemLabelPath}
-        .items=${this.items}
         .value=${this.value || ""}
+        .items=${this.items}
         .filteredItems=${this.filteredItems}
         .allowCustomValue=${this.allowCustomValue}
         .disabled=${this.disabled}
-        .required=${this.required}
         ${comboBoxRenderer(this.renderer || this._defaultRowRenderer)}
         @opened-changed=${this._openedChanged}
         @filter-changed=${this._filterChanged}
@@ -138,7 +129,6 @@ export class HaComboBox extends LitElement {
           .label=${this.label}
           .placeholder=${this.placeholder}
           .disabled=${this.disabled}
-          .required=${this.required}
           .validationMessage=${this.validationMessage}
           .errorMessage=${this.errorMessage}
           class="input"
@@ -149,8 +139,6 @@ export class HaComboBox extends LitElement {
           .suffix=${html`<div style="width: 28px;"></div>`}
           .icon=${this.icon}
           .invalid=${this.invalid}
-          .helper=${this.helper}
-          helperPersistent
         >
           <slot name="icon" slot="leadingIcon"></slot>
         </ha-textfield>
@@ -250,18 +238,6 @@ export class HaComboBox extends LitElement {
         top: -7px;
         right: 36px;
       }
-
-      :host-context([style*="direction: rtl;"]) .toggle-button {
-        left: 12px;
-        right: auto;
-        top: -10px;
-      }
-      :host-context([style*="direction: rtl;"]) .clear-button {
-        --mdc-icon-size: 20px;
-        top: -7px;
-        left: 36px;
-        right: auto;
-      }
     `;
   }
 }

src/components/ha-date-input.ts

@@ -35,24 +35,17 @@ export class HaDateInput extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @property({ type: Boolean }) public required = false;
-
   @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)
         : ""}
-      .required=${this.required}
     >
       <ha-svg-icon slot="trailingIcon" .path=${mdiCalendar}></ha-svg-icon>
     </ha-textfield>`;

src/components/ha-dialog.ts

@@ -98,10 +98,6 @@ export class HaDialog extends DialogBase {
         margin-left: 40px;
         margin-right: 0px;
       }
-      :host-context([style*="direction: rtl;"]) .dialog-actions {
-        left: 0px !important;
-        right: auto !important;
-      }
     `,
   ];
 }

src/components/ha-duration-input.ts

@@ -5,7 +5,6 @@ import "./ha-base-time-input";
 import type { TimeChangedEvent } from "./ha-base-time-input";
 
 export interface HaDurationData {
-  days?: number;
   hours?: number;
   minutes?: number;
   seconds?: number;
@@ -18,14 +17,10 @@ class HaDurationInput extends LitElement {
 
   @property() public label?: string;
 
-  @property() public helper?: string;
-
   @property({ type: Boolean }) public required?: boolean;
 
   @property({ type: Boolean }) public enableMillisecond?: boolean;
 
-  @property({ type: Boolean }) public enableDay?: boolean;
-
   @property({ type: Boolean }) public disabled = false;
 
   @query("paper-time-input", true) private _input?: HTMLElement;
@@ -40,23 +35,19 @@ class HaDurationInput extends LitElement {
     return html`
       <ha-base-time-input
         .label=${this.label}
-        .helper=${this.helper}
         .required=${this.required}
         .autoValidate=${this.required}
         .disabled=${this.disabled}
         errorMessage="Required"
         enableSecond
         .enableMillisecond=${this.enableMillisecond}
-        .enableDay=${this.enableDay}
         format="24"
-        .days=${this._days}
         .hours=${this._hours}
         .minutes=${this._minutes}
         .seconds=${this._seconds}
         .milliseconds=${this._milliseconds}
         @value-changed=${this._durationChanged}
         noHoursLimit
-        dayLabel="dd"
         hourLabel="hh"
         minLabel="mm"
         secLabel="ss"
@@ -65,10 +56,6 @@ class HaDurationInput extends LitElement {
     `;
   }
 
-  private get _days() {
-    return this.data?.days ? Number(this.data.days) : 0;
-  }
-
   private get _hours() {
     return this.data?.hours ? Number(this.data.hours) : 0;
   }
@@ -107,11 +94,6 @@ class HaDurationInput extends LitElement {
       value.minutes %= 60;
     }
 
-    if (this.enableDay && value.hours > 24) {
-      value.days = (value.days ?? 0) + Math.floor(value.hours / 24);
-      value.hours %= 24;
-    }
-
     fireEvent(this, "value-changed", {
       value,
     });

src/components/ha-fab.ts

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

src/components/ha-file-upload.ts

@@ -176,24 +176,10 @@ export class HaFileUpload extends LitElement {
         .mdc-text-field__icon--leading {
           margin-bottom: 12px;
         }
-        :host-context([style*="direction: rtl;"])
-          .mdc-text-field__icon--leading {
-          margin-right: 0px;
-        }
         .mdc-text-field--filled .mdc-floating-label--float-above {
           transform: scale(0.75);
           top: 8px;
         }
-        :host-context([style*="direction: rtl;"]) .mdc-floating-label {
-          left: initial;
-          right: 16px;
-        }
-        :host-context([style*="direction: rtl;"])
-          .mdc-text-field--filled
-          .mdc-floating-label {
-          left: initial;
-          right: 48px;
-        }
         .dragged:before {
           position: var(--layout-fit_-_position);
           top: var(--layout-fit_-_top);

src/components/ha-form/compute-initial-ha-form-data.ts

@@ -34,25 +34,12 @@ export const computeInitialHaFormData = (
       };
     } else if ("selector" in field) {
       const selector: Selector = field.selector;
-
-      if ("device" in selector) {
-        data[field.name] = selector.device.multiple ? [] : "";
-      } else if ("entity" in selector) {
-        data[field.name] = selector.entity.multiple ? [] : "";
-      } else if ("area" in selector) {
-        data[field.name] = selector.area.multiple ? [] : "";
-      } else if ("boolean" in selector) {
+      if ("boolean" in selector) {
         data[field.name] = false;
-      } else if (
-        "text" in selector ||
-        "addon" in selector ||
-        "attribute" in selector ||
-        "icon" in selector ||
-        "theme" in selector
-      ) {
+      } else if ("text" in selector) {
         data[field.name] = "";
       } else if ("number" in selector) {
-        data[field.name] = selector.number.min ?? 0;
+        data[field.name] = "min" in selector.number ? selector.number.min : 0;
       } else if ("select" in selector) {
         if (selector.select.options.length) {
           data[field.name] = selector.select.options[0][0];
@@ -63,23 +50,6 @@ export const computeInitialHaFormData = (
           minutes: 0,
           seconds: 0,
         };
-      } else if ("time" in selector) {
-        data[field.name] = "00:00:00";
-      } else if ("date" in selector || "datetime" in selector) {
-        const now = new Date().toISOString().slice(0, 10);
-        data[field.name] = `${now} 00:00:00`;
-      } else if ("color_rgb" in selector) {
-        data[field.name] = [0, 0, 0];
-      } else if ("color_temp" in selector) {
-        data[field.name] = selector.color_temp.min_mireds ?? 153;
-      } else if (
-        "action" in selector ||
-        "media" in selector ||
-        "target" in selector
-      ) {
-        data[field.name] = {};
-      } else {
-        throw new Error("Selector not supported in initial form data");
       }
     }
   });

src/components/ha-form/ha-form-string.ts

@@ -28,8 +28,6 @@ export class HaFormString extends LitElement implements HaFormElement {
 
   @property() public label!: string;
 
-  @property() public helper?: string;
-
   @property({ type: Boolean }) public disabled = false;
 
   @state() private _unmaskedPassword = false;
@@ -55,8 +53,6 @@ export class HaFormString extends LitElement implements HaFormElement {
           : "password"}
         .label=${this.label}
         .value=${this.data || ""}
-        .helper=${this.helper}
-        helperPersistent
         .disabled=${this.disabled}
         .required=${this.schema.required}
         .autoValidate=${this.schema.required}
@@ -132,11 +128,6 @@ export class HaFormString extends LitElement implements HaFormElement {
         --mdc-icon-button-size: 24px;
         color: var(--secondary-text-color);
       }
-
-      :host-context([style*="direction: rtl;"]) ha-icon-button {
-        right: auto;
-        left: 12px;
-      }
     `;
   }
 }

src/components/ha-form/ha-form.ts

@@ -77,7 +77,7 @@ export class HaForm extends LitElement implements HaFormElement {
 
   protected render(): TemplateResult {
     return html`
-      <div class="root" part="root">
+      <div class="root">
         ${this.error && this.error.base
           ? html`
               <ha-alert alert-type="error">
@@ -173,6 +173,7 @@ export class HaForm extends LitElement implements HaFormElement {
   }
 
   static get styles(): CSSResultGroup {
+    // .root has overflow: auto to avoid margin collapse
     return css`
       .root {
         margin-bottom: -24px;

src/components/ha-icon-picker.ts

@@ -31,8 +31,6 @@ export class HaIconPicker extends LitElement {
 
   @property() public label?: string;
 
-  @property() public helper?: string;
-
   @property() public placeholder?: string;
 
   @property() public fallbackPath?: string;
@@ -41,8 +39,6 @@ export class HaIconPicker extends LitElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @property({ type: Boolean }) public required = false;
-
   @property({ type: Boolean }) public invalid = false;
 
   @state() private _opened = false;
@@ -59,9 +55,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}
         .errorMessage=${this.errorMessage}
         .invalid=${this.invalid}

src/components/ha-input-helper-text.ts

@@ -1,25 +0,0 @@
-import { css, html, LitElement, TemplateResult } from "lit";
-import { customElement } from "lit/decorators";
-
-@customElement("ha-input-helper-text")
-class InputHelperText extends LitElement {
-  protected render(): TemplateResult {
-    return html`<slot></slot>`;
-  }
-
-  static styles = css`
-    :host {
-      display: block;
-      color: var(--mdc-text-field-label-ink-color, rgba(0, 0, 0, 0.6));
-      font-size: 0.75rem;
-      padding-left: 16px;
-      padding-right: 16px;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-input-helper-text": InputHelperText;
-  }
-}

src/components/ha-labeled-slider.js

@@ -33,7 +33,7 @@ class HaLabeledSlider extends PolymerElement {
         }
       </style>
 
-      <div class="title">[[_getTitle()]]</div>
+      <div class="title">[[caption]]</div>
       <div class="extra-container"><slot name="extra"></slot></div>
       <div class="slider-container">
         <ha-icon icon="[[icon]]" hidden$="[[!icon]]"></ha-icon>
@@ -46,26 +46,17 @@ class HaLabeledSlider extends PolymerElement {
           value="{{value}}"
         ></ha-slider>
       </div>
-      <template is="dom-if" if="[[helper]]">
-        <ha-input-helper-text>[[helper]]</ha-input-helper-text>
-      </template>
     `;
   }
 
-  _getTitle() {
-    return `${this.caption}${this.caption && this.required ? " *" : ""}`;
-  }
-
   static get properties() {
     return {
       caption: String,
       disabled: Boolean,
-      required: Boolean,
       min: Number,
       max: Number,
       pin: Boolean,
       step: Number,
-      helper: String,
 
       extra: {
         type: Boolean,

src/components/ha-markdown.ts

@@ -2,11 +2,6 @@ import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import "./ha-markdown-element";
 
-// Import components that are allwoed to be defined.
-import "./ha-alert";
-import "./ha-icon";
-import "./ha-svg-icon";
-
 @customElement("ha-markdown")
 export class HaMarkdown extends LitElement {
   @property() public content?;

src/components/ha-menu-button.ts

@@ -3,6 +3,7 @@ import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../common/dom/fire_event";
+import { computeDomain } from "../common/entity/compute_domain";
 import { subscribeNotifications } from "../data/persistent_notification";
 import { HomeAssistant } from "../types";
 import "./ha-icon-button";
@@ -42,15 +43,18 @@ class HaMenuButton extends LitElement {
 
   protected render(): TemplateResult {
     const hasNotifications =
-      this._hasNotifications &&
-      (this.narrow || this.hass.dockedSidebar === "always_hidden");
+      (this.narrow || this.hass.dockedSidebar === "always_hidden") &&
+      (this._hasNotifications ||
+        Object.keys(this.hass.states).some(
+          (entityId) => computeDomain(entityId) === "configurator"
+        ));
     return html`
       <ha-icon-button
         .label=${this.hass.localize("ui.sidebar.sidebar_toggle")}
         .path=${mdiMenu}
         @click=${this._toggleMenu}
       ></ha-icon-button>
-      ${hasNotifications ? html`<div class="dot"></div>` : ""}
+      ${hasNotifications ? html` <div class="dot"></div> ` : ""}
     `;
   }
 

src/components/ha-metric.ts

@@ -1,79 +0,0 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
-import { classMap } from "lit/directives/class-map";
-import { roundWithOneDecimal } from "../util/calculate";
-import "./ha-bar";
-import "./ha-settings-row";
-
-@customElement("ha-metric")
-class HaMetric extends LitElement {
-  @property({ type: Number }) public value!: number;
-
-  @property({ type: String }) public heading!: string;
-
-  @property({ type: String }) public tooltip?: string;
-
-  protected render(): TemplateResult {
-    const roundedValue = roundWithOneDecimal(this.value);
-    return html`
-      <ha-settings-row>
-        <span slot="heading"> ${this.heading} </span>
-        <div slot="description" .title=${this.tooltip ?? ""}>
-          <span class="value"> ${roundedValue} % </span>
-          <ha-bar
-            class=${classMap({
-              "target-warning": roundedValue > 50,
-              "target-critical": roundedValue > 85,
-            })}
-            .value=${this.value}
-          ></ha-bar>
-        </div>
-      </ha-settings-row>
-    `;
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      ha-settings-row {
-        padding: 0;
-        height: 54px;
-        width: 100%;
-      }
-      ha-settings-row > div[slot="description"] {
-        white-space: normal;
-        color: var(--secondary-text-color);
-        display: flex;
-        justify-content: space-between;
-      }
-      ha-bar {
-        --ha-bar-primary-color: var(
-          --metric-bar-ok-color,
-          var(--success-color)
-        );
-      }
-      .target-warning {
-        --ha-bar-primary-color: var(
-          --metric-bar-warning-color,
-          var(--warning-color)
-        );
-      }
-      .target-critical {
-        --ha-bar-primary-color: var(
-          --metric-bar-critical-color,
-          var(--error-color)
-        );
-      }
-      .value {
-        width: 48px;
-        padding-right: 4px;
-        flex-shrink: 0;
-      }
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-metric": HaMetric;
-  }
-}

src/components/ha-navigation-list.ts

@@ -1,90 +0,0 @@
-import "@material/mwc-list/mwc-list";
-import "@material/mwc-list/mwc-list-item";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
-import type { PageNavigation } from "../layouts/hass-tabs-subpage";
-import type { HomeAssistant } from "../types";
-import "./ha-clickable-list-item";
-import "./ha-icon-next";
-import "./ha-svg-icon";
-
-@customElement("ha-navigation-list")
-class HaNavigationList extends LitElement {
-  @property({ attribute: false }) public hass!: HomeAssistant;
-
-  @property({ type: Boolean }) public narrow!: boolean;
-
-  @property({ attribute: false }) public pages!: PageNavigation[];
-
-  @property({ type: Boolean }) public hasSecondary = false;
-
-  public render(): TemplateResult {
-    return html`
-      <mwc-list>
-        ${this.pages.map(
-          (page) => html`
-            <ha-clickable-list-item
-              graphic="avatar"
-              .twoline=${this.hasSecondary}
-              .hasMeta=${!this.narrow}
-              @click=${this._entryClicked}
-              href=${page.path}
-            >
-              <div
-                slot="graphic"
-                class=${page.iconColor ? "icon-background" : ""}
-                .style="background-color: ${page.iconColor || "undefined"}"
-              >
-                <ha-svg-icon .path=${page.iconPath}></ha-svg-icon>
-              </div>
-              <span>${page.name}</span>
-              ${this.hasSecondary
-                ? html`<span slot="secondary">${page.description}</span>`
-                : ""}
-              ${!this.narrow
-                ? html`<ha-icon-next slot="meta"></ha-icon-next>`
-                : ""}
-            </ha-clickable-list-item>
-          `
-        )}
-      </mwc-list>
-    `;
-  }
-
-  private _entryClicked(ev) {
-    ev.currentTarget.blur();
-  }
-
-  static styles: CSSResultGroup = css`
-    :host {
-      --mdc-list-vertical-padding: 0;
-    }
-    ha-svg-icon,
-    ha-icon-next {
-      color: var(--secondary-text-color);
-      height: 24px;
-      width: 24px;
-      display: block;
-    }
-    ha-svg-icon {
-      padding: 8px;
-    }
-    .icon-background {
-      border-radius: 50%;
-    }
-    .icon-background ha-svg-icon {
-      color: #fff;
-    }
-    ha-clickable-list-item {
-      cursor: pointer;
-      font-size: var(--navigation-list-item-title-font-size);
-      padding: var(--navigation-list-item-padding) 0;
-    }
-  `;
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-navigation-list": HaNavigationList;
-  }
-}

src/components/ha-network.ts

@@ -163,9 +163,6 @@ export class HaNetwork extends LitElement {
 
         ha-settings-row {
           padding: 0;
-          --paper-time-input-justify-content: flex-end;
-          --settings-row-content-display: contents;
-          --settings-row-prefix-display: contents;
         }
 
         span[slot="heading"],

src/components/ha-select.ts

@@ -47,10 +47,6 @@ export class HaSelect extends SelectBase {
       .mdc-select__anchor {
         width: var(--ha-select-min-width, 200px);
       }
-      :host-context([style*="direction: rtl;"]) .mdc-floating-label {
-        right: 16px !important;
-        left: initial !important;
-      }
     `,
   ];
 }

src/components/ha-selector/ha-selector-addon.ts

@@ -14,20 +14,11 @@ 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;
-
   protected render() {
     return html`<ha-addon-picker
       .hass=${this.hass}
       .value=${this.value}
       .label=${this.label}
-      .helper=${this.helper}
-      .disabled=${this.disabled}
-      .required=${this.required}
       allow-custom-entity
     ></ha-addon-picker>`;
   }

src/components/ha-selector/ha-selector-area.ts

@@ -6,7 +6,6 @@ import { EntityRegistryEntry } from "../../data/entity_registry";
 import { AreaSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
 import "../ha-area-picker";
-import "../ha-areas-picker";
 
 @customElement("ha-selector-area")
 export class HaAreaSelector extends LitElement {
@@ -18,14 +17,10 @@ export class HaAreaSelector extends LitElement {
 
   @property() public label?: string;
 
-  @property() public helper?: string;
-
   @state() public _configEntries?: ConfigEntry[];
 
   @property({ type: Boolean }) public disabled = false;
 
-  @property({ type: Boolean }) public required = true;
-
   protected updated(changedProperties) {
     if (changedProperties.has("selector")) {
       const oldSelector = changedProperties.get("selector");
@@ -43,47 +38,21 @@ export class HaAreaSelector extends LitElement {
   }
 
   protected render() {
-    if (!this.selector.area.multiple) {
-      return html`
-        <ha-area-picker
-          .hass=${this.hass}
-          .value=${this.value}
-          .label=${this.label}
-          .helper=${this.helper}
-          no-add
-          .deviceFilter=${this._filterDevices}
-          .entityFilter=${this._filterEntities}
-          .includeDeviceClasses=${this.selector.area.entity?.device_class
-            ? [this.selector.area.entity.device_class]
-            : undefined}
-          .includeDomains=${this.selector.area.entity?.domain
-            ? [this.selector.area.entity.domain]
-            : undefined}
-          .disabled=${this.disabled}
-          .required=${this.required}
-        ></ha-area-picker>
-      `;
-    }
-
-    return html`
-      <ha-areas-picker
-        .hass=${this.hass}
-        .value=${this.value}
-        .helper=${this.helper}
-        .pickAreaLabel=${this.label}
-        no-add
-        .deviceFilter=${this._filterDevices}
-        .entityFilter=${this._filterEntities}
-        .includeDeviceClasses=${this.selector.area.entity?.device_class
-          ? [this.selector.area.entity.device_class]
-          : undefined}
-        .includeDomains=${this.selector.area.entity?.domain
-          ? [this.selector.area.entity.domain]
-          : undefined}
-        .disabled=${this.disabled}
-        .required=${this.required}
-      ></ha-areas-picker>
-    `;
+    return html`<ha-area-picker
+      .hass=${this.hass}
+      .value=${this.value}
+      .label=${this.label}
+      no-add
+      .deviceFilter=${this._filterDevices}
+      .entityFilter=${this._filterEntities}
+      .includeDeviceClasses=${this.selector.area.entity?.device_class
+        ? [this.selector.area.entity.device_class]
+        : undefined}
+      .includeDomains=${this.selector.area.entity?.domain
+        ? [this.selector.area.entity.domain]
+        : undefined}
+      .disabled=${this.disabled}
+    ></ha-area-picker>`;
   }
 
   private _filterEntities = (entity: EntityRegistryEntry): boolean => {

src/components/ha-selector/ha-selector-attribute.ts

@@ -1,10 +1,10 @@
+import "../entity/ha-entity-attribute-picker";
 import { html, LitElement, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
 import { AttributeSelector } from "../../data/selector";
 import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import { HomeAssistant } from "../../types";
-import "../entity/ha-entity-attribute-picker";
+import { fireEvent } from "../../common/dom/fire_event";
 
 @customElement("ha-selector-attribute")
 export class HaSelectorAttribute extends SubscribeMixin(LitElement) {
@@ -16,12 +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;
-
   @property() public context?: {
     filter_entity?: string;
   };
@@ -34,9 +30,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
       ></ha-entity-attribute-picker>
     `;

src/components/ha-selector/ha-selector-boolean.ts

@@ -4,7 +4,6 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { HomeAssistant } from "../../types";
 import "../ha-formfield";
 import "../ha-switch";
-import "../ha-input-helper-text";
 
 @customElement("ha-selector-boolean")
 export class HaBooleanSelector extends LitElement {
@@ -14,23 +13,16 @@ export class HaBooleanSelector extends LitElement {
 
   @property() public label?: string;
 
-  @property() public helper?: string;
-
   @property({ type: Boolean }) public disabled = false;
 
   protected render() {
-    return html`
-      <ha-formfield alignEnd spaceBetween .label=${this.label}>
-        <ha-switch
-          .checked=${this.value}
-          @change=${this._handleChange}
-          .disabled=${this.disabled}
-        ></ha-switch>
-      </ha-formfield>
-      ${this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
-        : ""}
-    `;
+    return html`<ha-formfield alignEnd spaceBetween .label=${this.label}>
+      <ha-switch
+        .checked=${this.value}
+        @change=${this._handleChange}
+        .disabled=${this.disabled}
+      ></ha-switch>
+    </ha-formfield>`;
   }
 
   private _handleChange(ev) {
@@ -43,10 +35,12 @@ export class HaBooleanSelector extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      ha-formfield {
-        display: flex;
+      :host {
         height: 56px;
-        align-items: center;
+        display: flex;
+      }
+      ha-formfield {
+        width: 100%;
         --mdc-typography-body2-font-size: 1em;
       }
     `;

src/components/ha-selector/ha-selector-color-rgb.ts

@@ -1,9 +1,9 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { hex2rgb, rgb2hex } from "../../common/color/convert-color";
-import { fireEvent } from "../../common/dom/fire_event";
-import type { ColorRGBSelector } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
+import type { ColorRGBSelector } from "../../data/selector";
+import { fireEvent } from "../../common/dom/fire_event";
+import { hex2rgb, rgb2hex } from "../../common/color/convert-color";
 import "../ha-textfield";
 
 @customElement("ha-selector-color_rgb")
@@ -16,22 +16,14 @@ 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;
-
   protected render() {
     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

@@ -1,8 +1,8 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
-import type { ColorTempSelector } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
+import type { ColorTempSelector } from "../../data/selector";
+import { fireEvent } from "../../common/dom/fire_event";
 import "../ha-labeled-slider";
 
 @customElement("ha-selector-color_temp")
@@ -15,24 +15,17 @@ 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;
-
   protected render() {
     return html`
       <ha-labeled-slider
         pin
         icon="hass:thermometer"
-        .caption=${this.label || ""}
-        .min=${this.selector.color_temp?.min_mireds ?? 153}
-        .max=${this.selector.color_temp?.max_mireds ?? 500}
+        .caption=${this.label}
+        .min=${this.selector.color_temp.min_mireds ?? 153}
+        .max=${this.selector.color_temp.max_mireds ?? 500}
         .value=${this.value}
-        .disabled=${this.disabled}
-        .helper=${this.helper}
-        .required=${this.required}
         @change=${this._valueChanged}
       ></ha-labeled-slider>
     `;

src/components/ha-selector/ha-selector-date.ts

@@ -1,7 +1,7 @@
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import type { DateSelector } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
+import type { DateSelector } from "../../data/selector";
 import "../ha-date-input";
 
 @customElement("ha-selector-date")
@@ -14,12 +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;
-
   protected render() {
     return html`
       <ha-date-input
@@ -27,8 +23,6 @@ export class HaDateSelector extends LitElement {
         .locale=${this.hass.locale}
         .disabled=${this.disabled}
         .value=${this.value}
-        .required=${this.required}
-        .helper=${this.helper}
       >
       </ha-date-input>
     `;

src/components/ha-selector/ha-selector-datetime.ts

@@ -1,13 +1,12 @@
 import { css, html, LitElement } from "lit";
 import { customElement, property, query } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
-import type { DateTimeSelector } from "../../data/selector";
 import type { HomeAssistant } from "../../types";
-import "../ha-date-input";
+import type { DateTimeSelector } from "../../data/selector";
 import type { HaDateInput } from "../ha-date-input";
-import "../ha-time-input";
-import "../ha-input-helper-text";
 import type { HaTimeInput } from "../ha-time-input";
+import { fireEvent } from "../../common/dom/fire_event";
+import "../ha-date-input";
+import "../ha-time-input";
 
 @customElement("ha-selector-datetime")
 export class HaDateTimeSelector extends LitElement {
@@ -19,12 +18,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;
-
   @query("ha-date-input") private _dateInput!: HaDateInput;
 
   @query("ha-time-input") private _timeInput!: HaTimeInput;
@@ -33,28 +28,21 @@ export class HaDateTimeSelector extends LitElement {
     const values = this.value?.split(" ");
 
     return html`
-      <div class="input">
-        <ha-date-input
-          .label=${this.label}
-          .locale=${this.hass.locale}
-          .disabled=${this.disabled}
-          .required=${this.required}
-          .value=${values?.[0]}
-          @value-changed=${this._valueChanged}
-        >
-        </ha-date-input>
-        <ha-time-input
-          enable-second
-          .value=${values?.[1] || "0:00:00"}
-          .locale=${this.hass.locale}
-          .disabled=${this.disabled}
-          .required=${this.required}
-          @value-changed=${this._valueChanged}
-        ></ha-time-input>
-      </div>
-      ${this.helper
-        ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
-        : ""}
+      <ha-date-input
+        .label=${this.label}
+        .locale=${this.hass.locale}
+        .disabled=${this.disabled}
+        .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}
+        @value-changed=${this._valueChanged}
+      ></ha-time-input>
     `;
   }
 
@@ -66,7 +54,7 @@ export class HaDateTimeSelector extends LitElement {
   }
 
   static styles = css`
-    .input {
+    :host {
       display: flex;
       align-items: center;
       flex-direction: row;

src/components/ha-selector/ha-selector-device.ts

@@ -17,14 +17,10 @@ export class HaDeviceSelector extends LitElement {
 
   @property() public label?: string;
 
-  @property() public helper?: string;
-
   @state() public _configEntries?: ConfigEntry[];
 
   @property({ type: Boolean }) public disabled = false;
 
-  @property({ type: Boolean }) public required = true;
-
   protected updated(changedProperties) {
     if (changedProperties.has("selector")) {
       const oldSelector = changedProperties.get("selector");
@@ -40,32 +36,10 @@ export class HaDeviceSelector extends LitElement {
 
   protected render() {
     if (!this.selector.device.multiple) {
-      return html`
-        <ha-device-picker
-          .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]
-            : undefined}
-          .includeDomains=${this.selector.device.entity?.domain
-            ? [this.selector.device.entity.domain]
-            : undefined}
-          .disabled=${this.disabled}
-          .required=${this.required}
-          allow-custom-entity
-        ></ha-device-picker>
-      `;
-    }
-
-    return html`
-      ${this.label ? html`<label>${this.label}</label>` : ""}
-      <ha-devices-picker
+      return html`<ha-device-picker
         .hass=${this.hass}
         .value=${this.value}
-        .helper=${this.helper}
+        .label=${this.label}
         .deviceFilter=${this._filterDevices}
         .includeDeviceClasses=${this.selector.device.entity?.device_class
           ? [this.selector.device.entity.device_class]
@@ -74,7 +48,21 @@ export class HaDeviceSelector extends LitElement {
           ? [this.selector.device.entity.domain]
           : undefined}
         .disabled=${this.disabled}
-        .required=${this.required}
+        allow-custom-entity
+      ></ha-device-picker> `;
+    }
+
+    return html`
+      ${this.label ? html`<label>${this.label}</label>` : ""}
+      <ha-devices-picker
+        .hass=${this.hass}
+        .value=${this.value}
+        .includeDeviceClasses=${this.selector.device.entity?.device_class
+          ? [this.selector.device.entity.device_class]
+          : undefined}
+        .includeDomains=${this.selector.device.entity?.domain
+          ? [this.selector.device.entity.domain]
+          : undefined}
       ></ha-devices-picker>
     `;
   }

src/components/ha-selector/ha-selector-duration.ts

@@ -14,8 +14,6 @@ export class HaTimeDuration extends LitElement {
 
   @property() public label?: string;
 
-  @property() public helper?: string;
-
   @property({ type: Boolean }) public disabled = false;
 
   @property({ type: Boolean }) public required = true;
@@ -24,11 +22,9 @@ export class HaTimeDuration extends LitElement {
     return html`
       <ha-duration-input
         .label=${this.label}
-        .helper=${this.helper}
         .data=${this.value}
         .disabled=${this.disabled}
         .required=${this.required}
-        .enableDay=${this.selector.duration.enable_day}
       ></ha-duration-input>
     `;
   }

src/components/ha-selector/ha-selector-entity.ts

@@ -1,46 +1,39 @@
-import { HassEntity } from "home-assistant-js-websocket";
-import { html, LitElement, PropertyValues } from "lit";
+import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
+import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeStateDomain } from "../../common/entity/compute_state_domain";
-import {
-  EntitySources,
-  fetchEntitySourcesWithCache,
-} from "../../data/entity_sources";
+import { subscribeEntityRegistry } from "../../data/entity_registry";
 import { EntitySelector } from "../../data/selector";
+import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import { HomeAssistant } from "../../types";
 import "../entity/ha-entities-picker";
 import "../entity/ha-entity-picker";
 
 @customElement("ha-selector-entity")
-export class HaEntitySelector extends LitElement {
+export class HaEntitySelector extends SubscribeMixin(LitElement) {
   @property() public hass!: HomeAssistant;
 
   @property() public selector!: EntitySelector;
 
-  @state() private _entitySources?: EntitySources;
+  @state() private _entityPlaformLookup?: Record<string, string>;
 
   @property() public value?: any;
 
   @property() public label?: string;
 
-  @property() public helper?: string;
-
   @property({ type: Boolean }) public disabled = false;
 
-  @property({ type: Boolean }) public required = true;
-
   protected render() {
     if (!this.selector.entity.multiple) {
       return html`<ha-entity-picker
         .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}
         .disabled=${this.disabled}
-        .required=${this.required}
+        .itemValuePath=${!this.selector.entity.use_uuid ? "entity_id" : "id"}
         allow-custom-entity
       ></ha-entity-picker>`;
     }
@@ -50,57 +43,56 @@ export class HaEntitySelector extends LitElement {
       <ha-entities-picker
         .hass=${this.hass}
         .value=${this.value}
-        .helper=${this.helper}
+        .entityFilter=${this._filterEntities}
         .includeEntities=${this.selector.entity.include_entities}
         .excludeEntities=${this.selector.entity.exclude_entities}
-        .entityFilter=${this._filterEntities}
-        .disabled=${this.disabled}
-        .required=${this.required}
       ></ha-entities-picker>
     `;
   }
 
-  protected updated(changedProps: PropertyValues): void {
-    super.updated(changedProps);
-    if (
-      changedProps.has("selector") &&
-      this.selector.entity.integration &&
-      !this._entitySources
-    ) {
-      fetchEntitySourcesWithCache(this.hass).then((sources) => {
-        this._entitySources = sources;
-      });
-    }
+  public hassSubscribe(): UnsubscribeFunc[] {
+    return [
+      subscribeEntityRegistry(this.hass.connection!, (entities) => {
+        const entityLookup = {};
+        for (const confEnt of entities) {
+          if (!confEnt.platform) {
+            continue;
+          }
+          entityLookup[confEnt.entity_id] = confEnt.platform;
+        }
+        this._entityPlaformLookup = entityLookup;
+      }),
+    ];
   }
 
   private _filterEntities = (entity: HassEntity): boolean => {
-    const {
-      domain: filterDomain,
-      device_class: filterDeviceClass,
-      integration: filterIntegration,
-    } = this.selector.entity;
-
-    if (filterDomain) {
+    if (this.selector.entity?.domain) {
+      const filterDomain = this.selector.entity.domain;
+      const filterDomainIsArray = Array.isArray(filterDomain);
       const entityDomain = computeStateDomain(entity);
       if (
-        Array.isArray(filterDomain)
-          ? !filterDomain.includes(entityDomain)
-          : entityDomain !== filterDomain
+        (filterDomainIsArray && !filterDomain.includes(entityDomain)) ||
+        (!filterDomainIsArray && entityDomain !== filterDomain)
       ) {
         return false;
       }
     }
-    if (
-      filterDeviceClass &&
-      entity.attributes.device_class !== filterDeviceClass
-    ) {
-      return false;
+    if (this.selector.entity?.device_class) {
+      if (
+        !entity.attributes.device_class ||
+        entity.attributes.device_class !== this.selector.entity.device_class
+      ) {
+        return false;
+      }
     }
-    if (
-      filterIntegration &&
-      this._entitySources?.[entity.entity_id]?.domain !== filterIntegration
-    ) {
-      return false;
+    if (this.selector.entity?.integration) {
+      if (
+        !this._entityPlaformLookup ||
+        this._entityPlaformLookup[entity.entity_id] !==
+          this.selector.entity.integration
+      ) {
+        return false;
+      }
     }
     return true;
   };

src/components/ha-selector/ha-selector-icon.ts

@@ -1,9 +1,9 @@
+import "../ha-icon-picker";
 import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
-import { fireEvent } from "../../common/dom/fire_event";
-import { IconSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
-import "../ha-icon-picker";
+import { IconSelector } from "../../data/selector";
+import { fireEvent } from "../../common/dom/fire_event";
 
 @customElement("ha-selector-icon")
 export class HaIconSelector extends LitElement {
@@ -15,20 +15,13 @@ 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;
-
   protected render() {
     return html`
       <ha-icon-picker
         .label=${this.label}
         .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

@@ -1,4 +1,4 @@
-import { css, html, LitElement } from "lit";
+import { html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -6,6 +6,7 @@ import type {
   LocationSelector,
   LocationSelectorValue,
 } from "../../data/selector";
+import "../../panels/lovelace/components/hui-theme-select-editor";
 import type { HomeAssistant } from "../../types";
 import type { MarkerLocation } from "../map/ha-locations-editor";
 import "../map/ha-locations-editor";
@@ -20,8 +21,6 @@ export class HaLocationSelector extends LitElement {
 
   @property() public label?: string;
 
-  @property() public helper?: string;
-
   @property({ type: Boolean, reflect: true }) public disabled = false;
 
   protected render() {
@@ -29,7 +28,6 @@ export class HaLocationSelector extends LitElement {
       <ha-locations-editor
         class="flex"
         .hass=${this.hass}
-        .helper=${this.helper}
         .locations=${this._location(this.selector, this.value)}
         @location-updated=${this._locationChanged}
         @radius-updated=${this._radiusChanged}
@@ -54,10 +52,7 @@ export class HaLocationSelector extends LitElement {
           longitude: value?.longitude || this.hass.config.longitude,
           radius: selector.location.radius ? value?.radius || 1000 : undefined,
           radius_color: zoneRadiusColor,
-          icon:
-            selector.location.icon || selector.location.radius
-              ? "mdi:map-marker-radius"
-              : "mdi:map-marker",
+          icon: selector.location.icon,
           location_editable: true,
           radius_editable: true,
         },
@@ -76,13 +71,6 @@ export class HaLocationSelector extends LitElement {
     const radius = ev.detail.radius;
     fireEvent(this, "value-changed", { value: { ...this.value, radius } });
   }
-
-  static styles = css`
-    :host {
-      display: block;
-      height: 400px;
-    }
-  `;
 }
 
 declare global {

src/components/ha-selector/ha-selector-media.ts

@@ -33,12 +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;
-
   @state() private _thumbnailUrl?: string | null;
 
   willUpdate(changedProps: PropertyValues<this>) {
@@ -88,8 +84,6 @@ export class HaMediaSelector extends LitElement {
         .label=${this.label ||
         this.hass.localize("ui.components.selectors.media.pick_media_player")}
         .disabled=${this.disabled}
-        .helper=${this.helper}
-        .required=${this.required}
         include-domains='["media_player"]'
         allow-custom-entity
         @value-changed=${this._entityChanged}