Bunch of fixes and cleanup (#11636)

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

@@ -205,16 +205,6 @@ class HassioCoreInfo extends LitElement {
           color: var(--secondary-text-color);
           --mdc-menu-min-width: 200px;
         }
-        @media (min-width: 563px) {
-          paper-listbox {
-            max-height: 150px;
-            overflow: auto;
-          }
-        }
-        paper-item {
-          cursor: pointer;
-          min-height: 35px;
-        }
         mwc-list-item ha-svg-icon {
           color: var(--secondary-text-color);
         }

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

@@ -440,16 +440,6 @@ class HassioHostInfo extends LitElement {
           color: var(--secondary-text-color);
           --mdc-menu-min-width: 200px;
         }
-        @media (min-width: 563px) {
-          paper-listbox {
-            max-height: 150px;
-            overflow: auto;
-          }
-        }
-        paper-item {
-          cursor: pointer;
-          min-height: 35px;
-        }
         mwc-list-item ha-svg-icon {
           color: var(--secondary-text-color);
         }

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

@@ -1,5 +1,5 @@
 import type { HassEntity } from "home-assistant-js-websocket";
-import { html, LitElement, TemplateResult } from "lit";
+import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { isValidEntityId } from "../../common/entity/valid_entity_id";
@@ -145,6 +145,12 @@ class HaEntitiesPickerLight extends LitElement {
 
     this._updateEntities([...currentEntities, toAdd]);
   }
+
+  static override styles = css`
+    ha-entity-picker {
+      margin-top: 8px;
+    }
+  `;
 }
 
 declare global {

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

@@ -111,7 +111,9 @@ class HaStatisticsPicker extends LitElement {
         display: block;
       }
       ha-statistic-picker {
+        display: block;
         width: 100%;
+        margin-top: 8px;
       }
     `;
   }

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

@@ -1,12 +1,14 @@
 import { css } from "lit";
 import { CheckListItemBase } from "@material/mwc-list/mwc-check-list-item-base";
-import { styles } from "@material/mwc-list/mwc-control-list-item.css";
+import { styles as controlStyles } from "@material/mwc-list/mwc-control-list-item.css";
+import { styles } from "@material/mwc-list/mwc-list-item.css";
 import { customElement } from "lit/decorators";
 
 @customElement("ha-check-list-item")
 export class HaCheckListItem extends CheckListItemBase {
   static override styles = [
     styles,
+    controlStyles,
     css`
       :host {
         --mdc-theme-secondary: var(--primary-color);

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

@@ -31,7 +31,7 @@ export class HaSelector extends LitElement {
   @property({ type: Boolean }) public disabled = false;
 
   public focus() {
-    this.shadowRoot!.getElementById("selector")?.focus();
+    this.shadowRoot?.getElementById("selector")?.focus();
   }
 
   private get _type() {

src/components/ha-service-control.ts

@@ -67,7 +67,7 @@ export class HaServiceControl extends LitElement {
 
   @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
 
-  protected updated(changedProperties: PropertyValues<this>) {
+  protected willUpdate(changedProperties: PropertyValues<this>) {
     if (!changedProperties.has("value")) {
       return;
     }
@@ -482,9 +482,6 @@ export class HaServiceControl extends LitElement {
         display: block;
         margin: var(--service-control-padding, 0 16px);
       }
-      ha-service-picker {
-        padding-top: 16px;
-      }
       ha-yaml-editor {
         padding: 16px 0;
       }

src/components/ha-service-picker.ts

@@ -10,7 +10,7 @@ import "./ha-combo-box";
 
 const rowRenderer: ComboBoxLitRenderer<{ service: string; name: string }> = (
   item
-) => html` <mwc-list-item twoline>
+) => html`<mwc-list-item twoline>
   <span>${item.name}</span>
   <span slot="secondary"
     >${item.name === item.service ? "" : item.service}</span

src/components/media-player/ha-media-player-browse.ts

@@ -3,7 +3,6 @@ import "@material/mwc-list/mwc-list";
 import "@material/mwc-list/mwc-list-item";
 import { mdiPlay, mdiPlus } from "@mdi/js";
 import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
   css,

src/panels/config/automation/action/ha-automation-action-row.ts

@@ -342,12 +342,14 @@ export default class HaAutomationActionRow extends LitElement {
       haStyle,
       css`
         .card-menu {
-          float: right;
+          position: absolute;
+          right: 16px;
           z-index: 3;
           --mdc-theme-text-primary-on-background: var(--primary-text-color);
         }
         .rtl .card-menu {
-          float: left;
+          right: initial;
+          left: 16px;
         }
         mwc-list-item[disabled] {
           --mdc-theme-text-primary-on-background: var(--disabled-text-color);
@@ -358,6 +360,9 @@ export default class HaAutomationActionRow extends LitElement {
         .warning ul {
           margin: 4px 0;
         }
+        mwc-select {
+          margin-bottom: 16px;
+        }
       `,
     ];
   }

src/panels/config/automation/action/types/ha-automation-action-choose.ts

@@ -1,6 +1,5 @@
 import { mdiDelete } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";

src/panels/config/automation/action/types/ha-automation-action-device_id.ts

@@ -1,4 +1,4 @@
-import { html, LitElement } from "lit";
+import { css, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../../common/dom/fire_event";
@@ -140,6 +140,13 @@ export class HaDeviceAction extends LitElement {
         `ui.panel.config.automation.editor.actions.type.device_id.extra_fields.${schema.name}`
       ) || schema.name;
   }
+
+  static styles = css`
+    ha-device-action-picker {
+      display: block;
+      margin-top: 8px;
+    }
+  `;
 }
 
 declare global {

src/panels/config/automation/condition/ha-automation-condition-editor.ts

@@ -1,7 +1,7 @@
-import { CSSResultGroup, html, LitElement } from "lit";
-import { customElement, property } from "lit/decorators";
 import "@material/mwc-select";
 import type { Select } from "@material/mwc-select";
+import { css, html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
@@ -143,9 +143,14 @@ export default class HaAutomationConditionEditor extends LitElement {
     fireEvent(this, "value-changed", { value: ev.detail.value, yaml: true });
   }
 
-  static get styles(): CSSResultGroup {
+  static styles = [
-    return haStyle;
+    haStyle,
-  }
+    css`
+      mwc-select {
+        margin-bottom: 16px;
+      }
+    `,
+  ];
 }
 
 declare global {

src/panels/config/automation/trigger/ha-automation-trigger-row.ts

@@ -332,6 +332,9 @@ export default class HaAutomationTriggerRow extends LitElement {
         mwc-list-item[disabled] {
           --mdc-theme-text-primary-on-background: var(--disabled-text-color);
         }
+        mwc-select {
+          margin-bottom: 16px;
+        }
       `,
     ];
   }

src/panels/config/integrations/integration-panels/zha/zha-device-card.ts

@@ -1,5 +1,4 @@
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-listbox/paper-listbox";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import memoizeOne from "memoize-one";

src/panels/config/integrations/integration-panels/zha/zha-device-pairing-status-card.ts

@@ -1,5 +1,4 @@
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";

src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts

@@ -1,7 +1,6 @@
 import { mdiPlus } from "@mdi/js";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-icon-item";
-import "@polymer/paper-listbox/paper-listbox";
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoize from "memoize-one";

src/panels/config/scene/ha-scene-editor.ts

@@ -984,6 +984,12 @@ export class HaSceneEditor extends SubscribeMixin(
         ha-fab.saving {
           opacity: var(--light-disabled-opacity);
         }
+        ha-icon-picker,
+        ha-area-picker,
+        ha-entity-picker {
+          display: block;
+          margin-top: 8px;
+        }
       `,
     ];
   }

src/panels/config/users/dialog-user-detail.ts

@@ -93,6 +93,7 @@ class DialogUserDetail extends LitElement {
               `}
           <div class="form">
             <paper-input
+              dialogInitialFocus
               .value=${this._name}
               .disabled=${user.system_generated}
               @value-changed=${this._nameChanged}

src/panels/developer-tools/service/developer-tools-service.ts

@@ -92,28 +92,31 @@ class HaPanelDevService extends LitElement {
             "ui.panel.developer-tools.tabs.services.description"
           )}
         </p>
-
+        <ha-card>
-        ${this._yamlMode
+          ${this._yamlMode
-          ? html`<ha-service-picker
+            ? html`<div class="card-content">
-                .hass=${this.hass}
+                <ha-service-picker
-                .value=${this._serviceData?.service}
+                  .hass=${this.hass}
-                @value-changed=${this._serviceChanged}
+                  .value=${this._serviceData?.service}
-              ></ha-service-picker>
+                  @value-changed=${this._serviceChanged}
-              <ha-yaml-editor
+                ></ha-service-picker>
-                .hass=${this.hass}
+                <ha-yaml-editor
-                .defaultValue=${this._serviceData}
+                  .hass=${this.hass}
-                @value-changed=${this._yamlChanged}
+                  .defaultValue=${this._serviceData}
-              ></ha-yaml-editor>`
+                  @value-changed=${this._yamlChanged}
-          : html`<ha-card
+                ></ha-yaml-editor>
-              ><div>
+              </div>`
+            : html`
                 <ha-service-control
                   .hass=${this.hass}
                   .value=${this._serviceData}
                   .narrow=${this.narrow}
                   showAdvanced
                   @value-changed=${this._serviceDataChanged}
-                ></ha-service-control></div
+                  class="card-content"
-            ></ha-card>`}
+                ></ha-service-control>
+              `}
+        </ha-card>
       </div>
       <div class="button-row">
         <div class="buttons">

src/panels/lovelace/components/hui-action-editor.ts

@@ -1,13 +1,8 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
-import "@polymer/paper-input/paper-input";
-import "@polymer/paper-input/paper-textarea";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { stopPropagation } from "../../../common/dom/stop_propagation";
 import "../../../components/ha-help-tooltip";
 import "../../../components/ha-service-control";
 import {
@@ -62,32 +57,30 @@ export class HuiActionEditor extends LitElement {
 
     return html`
       <div class="dropdown">
-        <paper-dropdown-menu
+        <mwc-select
           .label=${this.label}
           .configValue=${"action"}
-          @iron-select=${this._actionPicked}
+          @selected=${this._actionPicked}
+          .value=${this.config?.action ?? "default"}
+          @closed=${stopPropagation}
+          fixedMenuPosition
+          naturalMenuWidt
         >
-          <paper-listbox
+          <mwc-list-item value="default">
-            slot="dropdown-content"
+            ${this.hass!.localize(
-            attr-for-selected="value"
+              "ui.panel.lovelace.editor.action-editor.actions.default_action"
-            .selected=${this.config?.action ?? "default"}
-          >
-            <paper-item .value=${"default"}
-              >${this.hass!.localize(
-                "ui.panel.lovelace.editor.action-editor.actions.default_action"
-              )}</paper-item
-            >
-            ${this.actions.map(
-              (action) => html`
-                <paper-item .value=${action}
-                  >${this.hass!.localize(
-                    `ui.panel.lovelace.editor.action-editor.actions.${action}`
-                  )}</paper-item
-                >
-              `
             )}
-          </paper-listbox>
+          </mwc-list-item>
-        </paper-dropdown-menu>
+          ${this.actions.map(
+            (action) => html`
+              <mwc-list-item .value=${action}>
+                ${this.hass!.localize(
+                  `ui.panel.lovelace.editor.action-editor.actions.${action}`
+                )}
+              </mwc-list-item>
+            `
+          )}
+        </mwc-select>
         ${this.tooltipText
           ? html`
               <ha-help-tooltip .label=${this.tooltipText}></ha-help-tooltip>
@@ -96,26 +89,26 @@ export class HuiActionEditor extends LitElement {
       </div>
       ${this.config?.action === "navigate"
         ? html`
-            <paper-input
+            <ha-textfield
               label=${this.hass!.localize(
                 "ui.panel.lovelace.editor.action-editor.navigation_path"
               )}
               .value=${this._navigation_path}
               .configValue=${"navigation_path"}
-              @value-changed=${this._valueChanged}
+              @input=${this._valueChanged}
-            ></paper-input>
+            ></ha-textfield>
           `
         : ""}
       ${this.config?.action === "url"
         ? html`
-            <paper-input
+            <ha-textfield
-              label=${this.hass!.localize(
+              .label=${this.hass!.localize(
                 "ui.panel.lovelace.editor.action-editor.url_path"
               )}
               .value=${this._url_path}
               .configValue=${"url_path"}
-              @value-changed=${this._valueChanged}
+              @input=${this._valueChanged}
-            ></paper-input>
+            ></ha-textfield>
           `
         : ""}
       ${this.config?.action === "call-service"
@@ -132,23 +125,17 @@ export class HuiActionEditor extends LitElement {
     `;
   }
 
-  private _actionPicked(ev: CustomEvent): void {
+  private _actionPicked(ev): void {
     ev.stopPropagation();
     if (!this.hass) {
       return;
     }
-    const item = ev.detail.item;
+    const value = ev.target.value;
-    const value = item.value;
     if (this.config?.action === value) {
       return;
     }
     if (value === "default") {
       fireEvent(this, "value-changed", { value: undefined });
-      if (this.config?.action) {
-        (
-          this.shadowRoot!.querySelector("paper-listbox") as PaperListboxElement
-        ).select(this.config.action);
-      }
       return;
     }
 
@@ -173,13 +160,13 @@ export class HuiActionEditor extends LitElement {
     });
   }
 
-  private _valueChanged(ev: CustomEvent): void {
+  private _valueChanged(ev): void {
     ev.stopPropagation();
     if (!this.hass) {
       return;
     }
     const target = ev.target! as EditorTarget;
-    const value = ev.detail.value;
+    const value = ev.target.value;
     if (this[`_${target.configValue}`] === value) {
       return;
     }
@@ -205,7 +192,19 @@ export class HuiActionEditor extends LitElement {
   static get styles(): CSSResultGroup {
     return css`
       .dropdown {
-        display: flex;
+        position: relative;
+      }
+      ha-help-tooltip {
+        position: absolute;
+        right: 40px;
+        top: 16px;
+      }
+      mwc-select,
+      ha-textfield {
+        width: 100%;
+      }
+      ha-textfield {
+        margin-top: 8px;
       }
       ha-service-control {
         --service-control-padding: 0;

src/panels/lovelace/components/hui-entity-editor.ts

@@ -78,6 +78,7 @@ export class HuiEntityEditor extends LitElement {
         )}
       </div>
       <ha-entity-picker
+        class="add-entity"
         .hass=${this.hass}
         @value-changed=${this._addEntity}
       ></ha-entity-picker>
@@ -170,7 +171,7 @@ export class HuiEntityEditor extends LitElement {
     const index = (ev.target as any).index;
     const newConfigEntities = this.entities!.concat();
 
-    if (value === "") {
+    if (value === "" || value === undefined) {
       newConfigEntities.splice(index, 1);
     } else {
       newConfigEntities[index] = {
@@ -186,6 +187,13 @@ export class HuiEntityEditor extends LitElement {
     return [
       sortableStyles,
       css`
+        ha-entity-picker {
+          margin-top: 8px;
+        }
+        .add-entity {
+          display: block;
+          margin-left: 31px;
+        }
         .entity {
           display: flex;
           align-items: center;

src/panels/lovelace/components/hui-theme-select-editor.ts

@@ -1,11 +1,11 @@
 import "@material/mwc-button";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { HomeAssistant } from "../../../types";
+import "@material/mwc-select/mwc-select";
+import "@material/mwc-list/mwc-list-item";
+import { stopPropagation } from "../../../common/dom/stop_propagation";
 
 @customElement("hui-theme-select-editor")
 export class HuiThemeSelectEditor extends LitElement {
@@ -17,53 +17,47 @@ export class HuiThemeSelectEditor extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <paper-dropdown-menu
+      <mwc-select
         .label=${this.label ||
         `${this.hass!.localize(
           "ui.panel.lovelace.editor.card.generic.theme"
         )} (${this.hass!.localize(
           "ui.panel.lovelace.editor.card.config.optional"
         )})`}
-        dynamic-align
+        .value=${this.value}
+        @selected=${this._changed}
+        @closed=${stopPropagation}
+        fixedMenuPosition
+        naturalMenuWidt
       >
-        <paper-listbox
+        <mwc-list-item value="remove"
-          slot="dropdown-content"
+          >${this.hass!.localize(
-          .selected=${this.value}
+            "ui.panel.lovelace.editor.card.generic.no_theme"
-          attr-for-selected="theme"
+          )}</mwc-list-item
-          @iron-select=${this._changed}
         >
-          <paper-item theme="remove"
+        ${Object.keys(this.hass!.themes.themes)
-            >${this.hass!.localize(
+          .sort()
-              "ui.panel.lovelace.editor.card.generic.no_theme"
+          .map(
-            )}</paper-item
+            (theme) =>
-          >
+              html` <mwc-list-item .value=${theme}>${theme}</mwc-list-item> `
-          ${Object.keys(this.hass!.themes.themes)
+          )}
-            .sort()
+      </mwc-select>
-            .map(
-              (theme) =>
-                html` <paper-item theme=${theme}>${theme}</paper-item> `
-            )}
-        </paper-listbox>
-      </paper-dropdown-menu>
     `;
   }
 
   static get styles(): CSSResultGroup {
     return css`
-      paper-dropdown-menu {
+      mwc-select {
         width: 100%;
       }
-      paper-item {
-        cursor: pointer;
-      }
     `;
   }
 
   private _changed(ev): void {
-    if (!this.hass || ev.target.selected === "") {
+    if (!this.hass || ev.target.value === "") {
       return;
     }
-    this.value = ev.target.selected === "remove" ? "" : ev.target.selected;
+    this.value = ev.target.value === "remove" ? "" : ev.target.selected;
     fireEvent(this, "value-changed", { value: this.value });
   }
 }

src/panels/lovelace/editor/config-elements/config-elements-style.ts

@@ -19,4 +19,11 @@ export const configElementStyle = css`
   .suffix {
     margin: 0 8px;
   }
+  hui-theme-select-editor,
+  hui-action-editor,
+  mwc-select,
+  ha-textfield,
+  ha-icon-picker {
+    margin-top: 8px;
+  }
 `;

src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts

@@ -1,7 +1,6 @@
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import {

src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts

@@ -1,6 +1,5 @@
 import { mdiClose, mdiPencil, mdiPlus } from "@mdi/js";
 import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";

src/panels/lovelace/editor/hui-entities-card-row-editor.ts

@@ -126,6 +126,7 @@ export class HuiEntitiesCardRowEditor extends LitElement {
         )}
       </div>
       <ha-entity-picker
+        class="add-entity"
         .hass=${this.hass}
         @value-changed=${this._addEntity}
       ></ha-entity-picker>
@@ -226,7 +227,7 @@ export class HuiEntitiesCardRowEditor extends LitElement {
     const index = (ev.target as any).index;
     const newConfigEntities = this.entities!.concat();
 
-    if (value === "") {
+    if (value === "" || value === undefined) {
       newConfigEntities.splice(index, 1);
     } else {
       newConfigEntities[index] = {
@@ -253,6 +254,14 @@ export class HuiEntitiesCardRowEditor extends LitElement {
     return [
       sortableStyles,
       css`
+        ha-entity-picker {
+          margin-top: 8px;
+        }
+        .add-entity {
+          display: block;
+          margin-left: 31px;
+          margin-right: 71px;
+        }
         .entity {
           display: flex;
           align-items: center;