Another round of paper-dropdown -> mwc-select conversion (#11674)

* Another round of paper-dropdown -> mwc-select conversion

* ha-pick-language-row -> Lit

* Update hui-view-editor.ts

* Cleanup imports

* hassio

* Add explicit imports

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

@@ -1,7 +1,6 @@
 import "@material/mwc-button";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@material/mwc-select";
-import "@polymer/paper-item/paper-item";
+import "@material/mwc-list/mwc-list-item";
-import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
   CSSResultGroup,
@@ -11,7 +10,7 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "web-animations-js/web-animations-next-lite.min";
+import { stopPropagation } from "../../../../src/common/dom/stop_propagation";
 import "../../../../src/components/buttons/ha-progress-button";
 import "../../../../src/components/ha-alert";
 import "../../../../src/components/ha-card";
@@ -58,48 +57,44 @@ class HassioAddonAudio extends LitElement {
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : ""}
 
-          <paper-dropdown-menu
+          <mwc-select
             .label=${this.supervisor.localize(
               "addon.configuration.audio.input"
             )}
-            @iron-select=${this._setInputDevice}
+            @selected=${this._setInputDevice}
+            @closed=${stopPropagation}
+            fixedMenuPosition
+            naturalMenuWidth
+            .value=${this._selectedInput!}
           >
-            <paper-listbox
+            ${this._inputDevices &&
-              slot="dropdown-content"
+            this._inputDevices.map(
-              attr-for-selected="device"
+              (item) => html`
-              .selected=${this._selectedInput!}
+                <mwc-list-item .value=${item.device || ""}>
-            >
+                  ${item.name}
-              ${this._inputDevices &&
+                </mwc-list-item>
-              this._inputDevices.map(
+              `
-                (item) => html`
+            )}
-                  <paper-item device=${item.device || ""}>
+          </mwc-select>
-                    ${item.name}
+          <mwc-select
-                  </paper-item>
-                `
-              )}
-            </paper-listbox>
-          </paper-dropdown-menu>
-          <paper-dropdown-menu
             .label=${this.supervisor.localize(
               "addon.configuration.audio.output"
             )}
-            @iron-select=${this._setOutputDevice}
+            @selected=${this._setOutputDevice}
+            @closed=${stopPropagation}
+            fixedMenuPosition
+            naturalMenuWidth
+            .value=${this._selectedOutput!}
           >
-            <paper-listbox
+            ${this._outputDevices &&
-              slot="dropdown-content"
+            this._outputDevices.map(
-              attr-for-selected="device"
+              (item) => html`
-              .selected=${this._selectedOutput!}
+                <mwc-list-item .value=${item.device || ""}
-            >
+                  >${item.name}</mwc-list-item
-              ${this._outputDevices &&
+                >
-              this._outputDevices.map(
+              `
-                (item) => html`
+            )}
-                  <paper-item device=${item.device || ""}
+          </mwc-select>
-                    >${item.name}</paper-item
-                  >
-                `
-              )}
-            </paper-listbox>
-          </paper-dropdown-menu>
         </div>
         <div class="card-actions">
           <ha-progress-button @click=${this._saveSettings}>
@@ -138,12 +133,12 @@ class HassioAddonAudio extends LitElement {
   }
 
   private _setInputDevice(ev): void {
-    const device = ev.detail.item.getAttribute("device");
+    const device = ev.target.value;
     this._selectedInput = device;
   }
 
   private _setOutputDevice(ev): void {
-    const device = ev.detail.item.getAttribute("device");
+    const device = ev.target.value;
     this._selectedOutput = device;
   }
 

hassio/src/dashboard/hassio-update.ts

@@ -148,7 +148,6 @@ export class HassioUpdate extends LitElement {
         }
         ha-settings-row {
           padding: 0;
-          --paper-item-body-two-line-min-height: 32px;
         }
       `,
     ];

hassio/src/dialogs/datadisk/dialog-hassio-datadisk.ts

@@ -1,6 +1,5 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@material/mwc-list/mwc-list-item";
-import "@polymer/paper-item/paper-item";
+import "@material/mwc-select";
-import "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -90,18 +89,19 @@ class HassioDatadiskDialog extends LitElement {
                     )}
                     <br /><br />
 
-                    <paper-dropdown-menu
+                    <mwc-select
                       .label=${this.dialogParams.supervisor.localize(
                         "dialog.datadisk_move.select_device"
                       )}
-                      @value-changed=${this._select_device}
+                      @selected=${this._select_device}
                     >
-                      <paper-listbox slot="dropdown-content">
+                      ${this.devices.map(
-                        ${this.devices.map(
+                        (device) =>
-                          (device) => html`<paper-item>${device}</paper-item>`
+                          html`<mwc-list-item .value=${device}
-                        )}
+                            >${device}</mwc-list-item
-                      </paper-listbox>
+                          >`
-                    </paper-dropdown-menu>
+                      )}
+                    </mwc-select>
                   `
                 : this.devices === undefined
                 ? this.dialogParams.supervisor.localize(
@@ -130,8 +130,8 @@ class HassioDatadiskDialog extends LitElement {
     `;
   }
 
-  private _select_device(event) {
+  private _select_device(ev) {
-    this.selectedDevice = event.detail.value;
+    this.selectedDevice = ev.target.value;
   }
 
   private async _moveDatadisk() {

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

@@ -1,7 +1,4 @@
 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, state } from "lit/decorators";
 import "../../../src/components/buttons/ha-progress-button";
@@ -73,24 +70,19 @@ class HassioSupervisorLog extends LitElement {
           : ""}
         ${this.hass.userData?.showAdvanced
           ? html`
-              <paper-dropdown-menu
+              <mwc-select
                 .label=${this.supervisor.localize("system.log.log_provider")}
-                @iron-select=${this._setLogProvider}
+                @selected=${this._setLogProvider}
+                .value=${this._selectedLogProvider}
               >
-                <paper-listbox
+                ${logProviders.map(
-                  slot="dropdown-content"
+                  (provider) => html`
-                  attr-for-selected="provider"
+                    <mwc-list-item .value=${provider.key}>
-                  .selected=${this._selectedLogProvider}
+                      ${provider.name}
-                >
+                    </mwc-list-item>
-                  ${logProviders.map(
+                  `
-                    (provider) => html`
+                )}
-                      <paper-item provider=${provider.key}>
+              </mwc-select>
-                        ${provider.name}
-                      </paper-item>
-                    `
-                  )}
-                </paper-listbox>
-              </paper-dropdown-menu>
             `
           : ""}
 
@@ -110,7 +102,7 @@ class HassioSupervisorLog extends LitElement {
   }
 
   private async _setLogProvider(ev): Promise<void> {
-    const provider = ev.detail.item.getAttribute("provider");
+    const provider = ev.target.value;
     this._selectedLogProvider = provider;
     this._loadData();
   }
@@ -153,7 +145,7 @@ class HassioSupervisorLog extends LitElement {
         pre {
           white-space: pre-wrap;
         }
-        paper-dropdown-menu {
+        mwc-select {
           padding: 0 2%;
           width: 96%;
         }

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

@@ -1,6 +1,4 @@
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-item/paper-icon-item";
-import "@polymer/paper-item/paper-item-body";
 import { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { ComboBoxLitRenderer } from "lit-vaadin-helpers";

src/components/ha-paper-dropdown-menu.ts

@@ -1,28 +0,0 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
-import { PolymerElement } from "@polymer/polymer";
-import { Constructor } from "../types";
-
-const paperDropdownClass = customElements.get(
-  "paper-dropdown-menu"
-) as Constructor<PolymerElement>;
-
-// patches paper drop down to properly support RTL - https://github.com/PolymerElements/paper-dropdown-menu/issues/183
-export class HaPaperDropdownClass extends paperDropdownClass {
-  public ready() {
-    super.ready();
-    // wait to check for direction since otherwise direction is wrong even though top level is RTL
-    setTimeout(() => {
-      if (window.getComputedStyle(this).direction === "rtl") {
-        this.style.textAlign = "right";
-      }
-    }, 100);
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-paper-dropdown-menu": HaPaperDropdownClass;
-  }
-}
-
-customElements.define("ha-paper-dropdown-menu", HaPaperDropdownClass);

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

@@ -2,7 +2,6 @@ import "@material/mwc-button/mwc-button";
 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-tooltip/paper-tooltip";
 import {
   css,

src/dialogs/more-info/controls/more-info-light.ts

@@ -615,10 +615,6 @@ class MoreInfoLight extends LitElement {
         color: var(--secondary-text-color);
       }
 
-      paper-item {
-        cursor: pointer;
-      }
-
       hr {
         border-color: var(--divider-color);
         border-bottom: none;

src/dialogs/more-info/controls/more-info-remote.ts

@@ -1,4 +1,4 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attributes";
@@ -66,14 +66,6 @@ class MoreInfoRemote extends LitElement {
       activity: newVal,
     });
   }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      paper-item {
-        cursor: pointer;
-      }
-    `;
-  }
 }
 
 declare global {

src/dialogs/more-info/controls/more-info-vacuum.ts

@@ -241,9 +241,6 @@ class MoreInfoVacuum extends LitElement {
       .status-subtitle {
         color: var(--secondary-text-color);
       }
-      paper-item {
-        cursor: pointer;
-      }
       .flex-horizontal {
         display: flex;
         flex-direction: row;

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

@@ -1,7 +1,6 @@
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
-import "@polymer/paper-item/paper-item";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";

src/panels/config/automation/condition/types/ha-automation-condition-trigger.ts

@@ -1,4 +1,5 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu-light";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -48,41 +49,35 @@ export class HaTriggerCondition extends LitElement {
         "ui.panel.config.automation.editor.conditions.type.trigger.no_triggers"
       );
     }
-    return html`<paper-dropdown-menu-light
+    return html`<mwc-select
       .label=${this.hass.localize(
         "ui.panel.config.automation.editor.conditions.type.trigger.id"
       )}
-      no-animations
+      .value=${id}
+      @selected=${this._triggerPicked}
     >
-      <paper-listbox
+      ${ensureArray(this._triggers).map((trigger) =>
-        slot="dropdown-content"
+        trigger.id
-        .selected=${id}
+          ? html`
-        attr-for-selected="data-trigger-id"
+              <mwc-list-item .value=${trigger.id}>
-        @selected-item-changed=${this._triggerPicked}
+                ${trigger.id}
-      >
+              </mwc-list-item>
-        ${ensureArray(this._triggers).map((trigger) =>
+            `
-          trigger.id
+          : ""
-            ? html`
+      )}
-                <paper-item data-trigger-id=${trigger.id}>
+    </mwc-select>`;
-                  ${trigger.id}
-                </paper-item>
-              `
-            : ""
-        )}
-      </paper-listbox>
-    </paper-dropdown-menu-light>`;
   }
 
   private _automationUpdated(config?: AutomationConfig) {
     this._triggers = config?.trigger;
   }
 
-  private _triggerPicked(ev: CustomEvent) {
+  private _triggerPicked(ev) {
     ev.stopPropagation();
-    if (!ev.detail.value) {
+    if (!ev.target.value) {
       return;
     }
-    const newTrigger = ev.detail.value.dataset.triggerId;
+    const newTrigger = ev.target.value;
     if (this.condition.id === newTrigger) {
       return;
     }

src/panels/config/automation/trigger/types/ha-automation-trigger-tag.ts

@@ -1,13 +1,14 @@
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select";
 import "@polymer/paper-input/paper-input";
 import { html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import { caseInsensitiveStringCompare } from "../../../../../common/string/compare";
 import { TagTrigger } from "../../../../../data/automation";
 import { fetchTags, Tag } from "../../../../../data/tag";
 import { HomeAssistant } from "../../../../../types";
 import { TriggerElement } from "../ha-automation-trigger-row";
-import "../../../../../components/ha-paper-dropdown-menu";
-import { caseInsensitiveStringCompare } from "../../../../../common/string/compare";
 
 @customElement("ha-automation-trigger-tag")
 export class HaTagTrigger extends LitElement implements TriggerElement {
@@ -29,27 +30,22 @@ export class HaTagTrigger extends LitElement implements TriggerElement {
   protected render() {
     const { tag_id } = this.trigger;
     return html`
-      <ha-paper-dropdown-menu
+      <mwc-select
         .label=${this.hass.localize(
           "ui.panel.config.automation.editor.triggers.type.tag.label"
         )}
-        ?disabled=${this._tags.length === 0}
+        .disabled=${this._tags.length === 0}
+        .value=${tag_id}
+        @selected=${this._tagChanged}
       >
-        <paper-listbox
+        ${this._tags.map(
-          slot="dropdown-content"
+          (tag) => html`
-          .selected=${tag_id}
+            <mwc-list-item .value=${tag.id}>
-          attr-for-selected="tag_id"
+              ${tag.name || tag.id}
-          @iron-select=${this._tagChanged}
+            </mwc-list-item>
-        >
+          `
-          ${this._tags.map(
+        )}
-            (tag) => html`
+      </mwc-select>
-              <paper-item tag_id=${tag.id} .tag=${tag}>
-                ${tag.name || tag.id}
-              </paper-item>
-            `
-          )}
-        </paper-listbox>
-      </ha-paper-dropdown-menu>
     `;
   }
 
@@ -64,8 +60,14 @@ export class HaTagTrigger extends LitElement implements TriggerElement {
     fireEvent(this, "value-changed", {
       value: {
         ...this.trigger,
-        tag_id: ev.detail.item.tag.id,
+        tag_id: ev.target.value,
       },
     });
   }
 }
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-automation-trigger-tag": HaTagTrigger;
+  }
+}

src/panels/config/cloud/account/cloud-remote-pref.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-item/paper-item-body";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";

src/panels/config/cloud/account/cloud-webhooks.ts

@@ -1,5 +1,3 @@
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
 import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../../common/config/is_component_loaded";

src/panels/config/cloud/register/cloud-register.ts

@@ -266,9 +266,6 @@ export class CloudRegister extends LitElement {
         a {
           color: var(--primary-color);
         }
-        paper-item {
-          cursor: pointer;
-        }
         h1 {
           margin: 0;
         }

src/panels/config/entities/entity-registry-settings.ts

@@ -1,6 +1,7 @@
 import "@material/mwc-button/mwc-button";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
 import "@polymer/paper-input/paper-input";
-import type { PaperItemElement } from "@polymer/paper-item/paper-item";
 import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
@@ -17,7 +18,6 @@ import { domainIcon } from "../../../common/entity/domain_icon";
 import "../../../components/ha-area-picker";
 import "../../../components/ha-expansion-panel";
 import "../../../components/ha-icon-picker";
-import "../../../components/ha-paper-dropdown-menu";
 import "../../../components/ha-switch";
 import type { HaSwitch } from "../../../components/ha-switch";
 import {
@@ -158,28 +158,23 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
         ></ha-icon-picker>
         ${OVERRIDE_DEVICE_CLASSES[domain]?.includes(this._deviceClass) ||
         (domain === "cover" && this.entry.original_device_class === null)
-          ? html`<ha-paper-dropdown-menu
+          ? html`<mwc-select
               .label=${this.hass.localize(
                 "ui.dialogs.entity_registry.editor.device_class"
               )}
+              .value=${this._deviceClass}
+              @selected=${this._deviceClassChanged}
             >
-              <paper-listbox
+              ${OVERRIDE_DEVICE_CLASSES[domain].map(
-                slot="dropdown-content"
+                (deviceClass: string) => html`
-                attr-for-selected="item-value"
+                  <mwc-list-item .value=${deviceClass}>
-                .selected=${this._deviceClass}
+                    ${this.hass.localize(
-                @selected-item-changed=${this._deviceClassChanged}
+                      `ui.dialogs.entity_registry.editor.device_classes.${domain}.${deviceClass}`
-              >
+                    )}
-                ${OVERRIDE_DEVICE_CLASSES[domain].map(
+                  </mwc-list-item>
-                  (deviceClass: string) => html`
+                `
-                    <paper-item .itemValue=${deviceClass}>
+              )}
-                      ${this.hass.localize(
+            </mwc-select>`
-                        `ui.dialogs.entity_registry.editor.device_classes.${domain}.${deviceClass}`
-                      )}
-                    </paper-item>
-                  `
-                )}
-              </paper-listbox>
-            </ha-paper-dropdown-menu>`
           : ""}
         <paper-input
           .value=${this._entityId}
@@ -302,12 +297,9 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
     this._entityId = ev.detail.value;
   }
 
-  private _deviceClassChanged(ev: PolymerChangedEvent<PaperItemElement>): void {
+  private _deviceClassChanged(ev): void {
     this._error = undefined;
-    if (ev.detail.value === null) {
+    this._deviceClass = ev.target.value;
-      return;
-    }
-    this._deviceClass = (ev.detail.value as any).itemValue;
   }
 
   private _areaPicked(ev: CustomEvent) {
@@ -425,7 +417,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
           padding-bottom: max(env(safe-area-inset-bottom), 8px);
           background-color: var(--mdc-theme-surface, #fff);
         }
-        ha-paper-dropdown-menu {
+        mwc-select {
           width: 100%;
         }
         ha-switch {

src/panels/config/ha-form-style.js

@@ -22,10 +22,6 @@ documentContainer.innerHTML = `<dom-module id="ha-form-style">
         @apply --layout-vertical;
         @apply --layout-start;
       }
-
-      paper-dropdown-menu.form-control {
-        margin: -9px 0;
-      }
     </style>
   </template>
 </dom-module>`;

src/panels/config/ha-panel-config.ts

@@ -21,8 +21,6 @@ import {
   mdiTools,
   mdiViewDashboard,
 } from "@mdi/js";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
 import { PolymerElement } from "@polymer/polymer";
 import { PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";

src/panels/config/helpers/dialog-helper-detail.ts

@@ -2,7 +2,7 @@ import "@material/mwc-button/mwc-button";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-tooltip/paper-tooltip";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { dynamicElement } from "../../../common/dom/dynamic-element-directive";

src/panels/config/integrations/integration-panels/zha/zha-config-dashboard.ts

@@ -1,7 +1,5 @@
 import "@material/mwc-button/mwc-button";
 import { mdiFolderMultipleOutline, mdiLan, mdiNetwork, mdiPlus } from "@mdi/js";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
 import {
   css,
   CSSResultGroup,

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-logs.ts

@@ -1,6 +1,6 @@
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
 import { mdiDownload } from "@mdi/js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
-import "@polymer/paper-listbox/paper-listbox";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultArray, html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -77,26 +77,20 @@ class ZWaveJSLogs extends SubscribeMixin(LitElement) {
             <div class="card-content">
               ${this._logConfig
                 ? html`
-                    <paper-dropdown-menu
+                    <mwc-select
-                      dynamic-align
                       .label=${this.hass.localize(
                         "ui.panel.config.zwave_js.logs.log_level"
                       )}
+                      .value=${this._logConfig.level}
+                      @selected=${this._dropdownSelected}
                     >
-                      <paper-listbox
+                      <mwc-list-item value="error">Error</mwc-list-item>
-                        slot="dropdown-content"
+                      <mwc-list-item value="warn">Warn</mwc-list-item>
-                        .selected=${this._logConfig.level}
+                      <mwc-list-item value="info">Info</mwc-list-item>
-                        attr-for-selected="value"
+                      <mwc-list-item value="verbose">Verbose</mwc-list-item>
-                        @iron-select=${this._dropdownSelected}
+                      <mwc-list-item value="debug">Debug</mwc-list-item>
-                      >
+                      <mwc-list-item value="silly">Silly</mwc-list-item>
-                        <paper-item value="error">Error</paper-item>
+                    </mwc-select>
-                        <paper-item value="warn">Warn</paper-item>
-                        <paper-item value="info">Info</paper-item>
-                        <paper-item value="verbose">Verbose</paper-item>
-                        <paper-item value="debug">Debug</paper-item>
-                        <paper-item value="silly">Silly</paper-item>
-                      </paper-listbox>
-                    </paper-dropdown-menu>
                   `
                 : ""}
             </div>
@@ -142,7 +136,7 @@ class ZWaveJSLogs extends SubscribeMixin(LitElement) {
     if (ev.target === undefined || this._logConfig === undefined) {
       return;
     }
-    const selected = ev.target.selected;
+    const selected = ev.target.value;
     if (this._logConfig.level === selected) {
       return;
     }

src/panels/config/integrations/integration-panels/zwave_js/zwave_js-node-config.ts

@@ -1,13 +1,12 @@
 import "@material/mwc-button/mwc-button";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
 import {
   mdiCheckCircle,
   mdiCircle,
   mdiCloseCircle,
   mdiProgressClock,
 } from "@mdi/js";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
@@ -287,26 +286,20 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
       return html`
         ${labelAndDescription}
         <div class="flex">
-          <paper-dropdown-menu
+          <mwc-select
-            dynamic-align
             .disabled=${!item.metadata.writeable}
+            .value=${item.value}
+            .key=${id}
+            .property=${item.property}
+            .propertyKey=${item.property_key}
+            @selected=${this._dropdownSelected}
           >
-            <paper-listbox
+            ${Object.entries(item.metadata.states).map(
-              slot="dropdown-content"
+              ([key, entityState]) => html`
-              .selected=${item.value}
+                <mwc-list-item .value=${key}>${entityState}</mwc-list-item>
-              attr-for-selected="value"
+              `
-              .key=${id}
+            )}
-              .property=${item.property}
+          </mwc-select>
-              .propertyKey=${item.property_key}
-              @iron-select=${this._dropdownSelected}
-            >
-              ${Object.entries(item.metadata.states).map(
-                ([key, entityState]) => html`
-                  <paper-item .value=${key}>${entityState}</paper-item>
-                `
-              )}
-            </paper-listbox>
-          </paper-dropdown-menu>
         </div>
       `;
     }
@@ -351,12 +344,12 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
     if (ev.target === undefined || this._config![ev.target.key] === undefined) {
       return;
     }
-    if (this._config![ev.target.key].value === ev.target.selected) {
+    if (this._config![ev.target.key].value === ev.target.value) {
       return;
     }
     this.setResult(ev.target.key, undefined);
 
-    this._updateConfigParameter(ev.target, Number(ev.target.selected));
+    this._updateConfigParameter(ev.target, Number(ev.target.value));
   }
 
   private debouncedUpdate = debounce((target, value) => {
@@ -462,7 +455,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
         }
 
         .flex .config-label,
-        .flex paper-dropdown-menu {
+        .flex mwc-select {
           flex: 1;
         }
 

src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts

@@ -1,11 +1,8 @@
 import "@material/mwc-button/mwc-button";
 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 { createCloseHeading } from "../../../../components/ha-dialog";
-import "../../../../components/ha-paper-dropdown-menu";
 import {
   LovelaceResource,
   LovelaceResourcesMutableParams,
@@ -14,6 +11,9 @@ import { PolymerChangedEvent } from "../../../../polymer-types";
 import { haStyleDialog } from "../../../../resources/styles";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceResourceDetailsDialogParams } from "./show-dialog-lovelace-resource-detail";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
+import { stopPropagation } from "../../../../common/dom/stop_propagation";
 
 const detectResourceType = (url: string) => {
   const ext = url.split(".").pop() || "";
@@ -102,48 +102,44 @@ export class DialogLovelaceResourceDetail extends LitElement {
               dialogInitialFocus
             ></paper-input>
             <br />
-            <ha-paper-dropdown-menu
+            <mwc-select
               .label=${this.hass!.localize(
                 "ui.panel.config.lovelace.resources.detail.type"
               )}
+              .value=${this._type}
+              @selected=${this._typeChanged}
+              @closed=${stopPropagation}
+              .invalid=${!this._type}
             >
-              <paper-listbox
+              <mwc-list-item value="module">
-                slot="dropdown-content"
+                ${this.hass!.localize(
-                .selected=${this._type}
+                  "ui.panel.config.lovelace.resources.types.module"
-                @iron-select=${this._typeChanged}
+                )}
-                attr-for-selected="type"
+              </mwc-list-item>
-                .invalid=${!this._type}
+              ${this._type === "js"
-              >
+                ? html`
-                <paper-item type="module">
+                    <mwc-list-item value="js">
-                  ${this.hass!.localize(
+                      ${this.hass!.localize(
-                    "ui.panel.config.lovelace.resources.types.module"
+                        "ui.panel.config.lovelace.resources.types.js"
-                  )}
+                      )}
-                </paper-item>
+                    </mwc-list-item>
-                ${this._type === "js"
+                  `
-                  ? html`
+                : ""}
-                      <paper-item type="js">
+              <mwc-list-item value="css">
-                        ${this.hass!.localize(
+                ${this.hass!.localize(
-                          "ui.panel.config.lovelace.resources.types.js"
+                  "ui.panel.config.lovelace.resources.types.css"
-                        )}
+                )}
-                      </paper-item>
+              </mwc-list-item>
-                    `
+              ${this._type === "html"
-                  : ""}
+                ? html`
-                <paper-item type="css">
+                    <mwc-list-item value="html">
-                  ${this.hass!.localize(
+                      ${this.hass!.localize(
-                    "ui.panel.config.lovelace.resources.types.css"
+                        "ui.panel.config.lovelace.resources.types.html"
-                  )}
+                      )}
-                </paper-item>
+                    </mwc-list-item>
-                ${this._type === "html"
+                  `
-                  ? html`
+                : ""}
-                      <paper-item type="html">
+            </mwc-select>
-                        ${this.hass!.localize(
-                          "ui.panel.config.lovelace.resources.types.html"
-                        )}
-                      </paper-item>
-                    `
-                  : ""}
-              </paper-listbox>
-            </ha-paper-dropdown-menu>
           </div>
         </div>
         ${this._params.resource
@@ -185,8 +181,8 @@ export class DialogLovelaceResourceDetail extends LitElement {
     }
   }
 
-  private _typeChanged(ev: CustomEvent) {
+  private _typeChanged(ev) {
-    this._type = ev.detail.item.getAttribute("type");
+    this._type = ev.target.value;
   }
 
   private async _updateResource() {

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

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

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

@@ -1,11 +1,11 @@
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
 import { mdiClose } from "@mdi/js";
-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, state } from "lit/decorators";
 import { array, assert, assign, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-svg-icon";
 import { HomeAssistant } from "../../../../types";
@@ -109,18 +109,20 @@ export class HuiAlarmPanelCardEditor
             </div>
           `
         )}
-        <paper-dropdown-menu
+        <mwc-select
           .label=${this.hass.localize(
             "ui.panel.lovelace.editor.card.alarm-panel.available_states"
           )}
-          @value-changed=${this._stateAdded}
+          @selected=${this._stateAdded}
+          @closed=${stopPropagation}
+          fixedMenuPosition
+          naturalMenuWidth
         >
-          <paper-listbox slot="dropdown-content">
+          ${states.map(
-            ${states.map(
+            (entityState) =>
-              (entityState) => html` <paper-item>${entityState}</paper-item> `
+              html`<mwc-list-item>${entityState}</mwc-list-item> `
-            )}
+          )}
-          </paper-listbox>
+        </mwc-select>
-        </paper-dropdown-menu>
         <hui-theme-select-editor
           .hass=${this.hass}
           .value=${this._theme}

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

@@ -1,3 +1,5 @@
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import {
@@ -11,15 +13,16 @@ import {
   union,
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import "../../../../components/entity/ha-entities-picker";
 import type { HomeAssistant } from "../../../../types";
 import type { CalendarCardConfig } from "../../cards/types";
 import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import type { LovelaceCardEditor } from "../../types";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import type { EditorTarget, EntitiesEditorEvent } from "../types";
 import { configElementStyle } from "./config-elements-style";
-import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
@@ -80,29 +83,25 @@ export class HuiCalendarCardEditor
             .configValue=${"title"}
             @value-changed=${this._valueChanged}
           ></paper-input>
-          <paper-dropdown-menu
+          <mwc-select
             .label=${this.hass.localize(
               "ui.panel.lovelace.editor.card.calendar.inital_view"
             )}
+            .value=${this._initial_view}
+            .configValue=${"initial_view"}
+            @selected=${this._viewChanged}
+            @closed=${stopPropagation}
           >
-            <paper-listbox
+            ${views.map(
-              slot="dropdown-content"
+              (view) => html`
-              attr-for-selected="view"
+                <mwc-list-item .value=${view}
-              .selected=${this._initial_view}
+                  >${this.hass!.localize(
-              .configValue=${"initial_view"}
+                    `ui.panel.lovelace.editor.card.calendar.views.${view}`
-              @iron-select=${this._viewChanged}
+                  )}
-            >
+                </mwc-list-item>
-              ${views.map(
+              `
-                (view) => html`
+            )}
-                  <paper-item .view=${view}
+          </mwc-select>
-                    >${this.hass!.localize(
-                      `ui.panel.lovelace.editor.card.calendar.views.${view}`
-                    )}
-                  </paper-item>
-                `
-              )}
-            </paper-listbox>
-          </paper-dropdown-menu>
         </div>
         <hui-theme-select-editor
           .hass=${this.hass}
@@ -157,18 +156,18 @@ export class HuiCalendarCardEditor
     fireEvent(this, "config-changed", { config: this._config });
   }
 
-  private _viewChanged(ev: CustomEvent): void {
+  private _viewChanged(ev): void {
     if (!this._config || !this.hass) {
       return;
     }
 
-    if (ev.detail.item.view === "") {
+    if (ev.target.value === "") {
       this._config = { ...this._config };
       delete this._config.initial_view;
     } else {
       this._config = {
         ...this._config,
-        initial_view: ev.detail.item.view,
+        initial_view: ev.target.value,
       };
     }
     fireEvent(this, "config-changed", { config: this._config });

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

@@ -1,8 +1,10 @@
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
 import "@material/mwc-tab-bar/mwc-tab-bar";
 import "@material/mwc-tab/mwc-tab";
 import type { MDCTabBarActivatedEvent } from "@material/tab-bar";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state, query } from "lit/decorators";
+import { customElement, property, query, state } from "lit/decorators";
 import {
   any,
   array,
@@ -13,6 +15,7 @@ import {
   string,
 } from "superstruct";
 import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
+import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import "../../../../components/entity/ha-entity-picker";
 import { LovelaceCardConfig, LovelaceConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
@@ -142,33 +145,33 @@ export class HuiConditionalCardEditor
                       <ha-entity-picker
                         .hass=${this.hass}
                         .value=${cond.entity}
-                        .index=${idx}
+                        .idx=${idx}
                         .configValue=${"entity"}
                         @change=${this._changeCondition}
                         allow-custom-entity
                       ></ha-entity-picker>
                     </div>
                     <div class="state">
-                      <paper-dropdown-menu>
+                      <mwc-select
-                        <paper-listbox
+                        .value=${cond.state_not !== undefined
-                          .selected=${cond.state_not !== undefined ? 1 : 0}
+                          ? "true"
-                          slot="dropdown-content"
+                          : "false"}
-                          .index=${idx}
+                        .idx=${idx}
-                          .configValue=${"invert"}
+                        .configValue=${"invert"}
-                          @selected-item-changed=${this._changeCondition}
+                        @selected=${this._changeCondition}
-                        >
+                        @closed=${stopPropagation}
-                          <paper-item
+                      >
-                            >${this.hass!.localize(
+                        <mwc-list-item value="false">
-                              "ui.panel.lovelace.editor.card.conditional.state_equal"
+                          ${this.hass!.localize(
-                            )}</paper-item
+                            "ui.panel.lovelace.editor.card.conditional.state_equal"
-                          >
+                          )}
-                          <paper-item
+                        </mwc-list-item>
-                            >${this.hass!.localize(
+                        <mwc-list-item value="true">
-                              "ui.panel.lovelace.editor.card.conditional.state_not_equal"
+                          ${this.hass!.localize(
-                            )}</paper-item
+                            "ui.panel.lovelace.editor.card.conditional.state_not_equal"
-                          >
+                          )}
-                        </paper-listbox>
+                        </mwc-list-item>
-                      </paper-dropdown-menu>
+                      </mwc-select>
                       <paper-input
                         .label="${this.hass!.localize(
                           "ui.panel.lovelace.editor.card.generic.state"
@@ -178,7 +181,7 @@ export class HuiConditionalCardEditor
                         .value=${cond.state_not !== undefined
                           ? cond.state_not
                           : cond.state}
-                        .index=${idx}
+                        .idx=${idx}
                         .configValue=${"state"}
                         @value-changed=${this._changeCondition}
                       ></paper-input>
@@ -274,9 +277,9 @@ export class HuiConditionalCardEditor
     }
     const conditions = [...this._config.conditions];
     if (target.configValue === "entity" && target.value === "") {
-      conditions.splice(target.index, 1);
+      conditions.splice(target.idx, 1);
     } else {
-      const condition = { ...conditions[target.index] };
+      const condition = { ...conditions[target.idx] };
       if (target.configValue === "entity") {
         condition.entity = target.value;
       } else if (target.configValue === "state") {
@@ -286,7 +289,7 @@ export class HuiConditionalCardEditor
           condition.state = target.value;
         }
       } else if (target.configValue === "invert") {
-        if (target.selected === 1) {
+        if (target.value === "true") {
           if (condition.state) {
             condition.state_not = condition.state;
             delete condition.state;
@@ -296,7 +299,7 @@ export class HuiConditionalCardEditor
           delete condition.state_not;
         }
       }
-      conditions[target.index] = condition;
+      conditions[target.idx] = condition;
     }
     this._config = { ...this._config, conditions };
     fireEvent(this, "config-changed", { config: this._config });
@@ -321,7 +324,7 @@ export class HuiConditionalCardEditor
           display: flex;
           align-items: flex-end;
         }
-        .condition .state paper-dropdown-menu {
+        .condition .state mwc-select {
           margin-right: 16px;
         }
         .condition .state paper-input {

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

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

src/panels/lovelace/editor/config-elements/hui-generic-entity-row-editor.ts

@@ -1,3 +1,5 @@
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
 import "@polymer/paper-input/paper-input";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
@@ -99,37 +101,34 @@ export class HuiGenericEntityRowEditor
             @value-changed=${this._valueChanged}
           ></ha-icon-picker>
         </div>
-        <paper-dropdown-menu .label=${"Secondary Info"}>
+        <mwc-select
-          <paper-listbox
+          label="Secondary Info"
-            slot="dropdown-content"
+          .selected=${this._config.secondary_info || "none"}
-            attr-for-selected="value"
+          .configValue=${"secondary_info"}
-            .selected=${this._config.secondary_info || "none"}
+          @selected=${this._valueChanged}
-            .configValue=${"secondary_info"}
+        >
-            @iron-select=${this._valueChanged}
+          <mwc-list-item value=""
+            >${this.hass!.localize(
+              "ui.panel.lovelace.editor.card.entities.secondary_info_values.none"
+            )}</mwc-list-item
           >
-            <paper-item value=""
+          ${Object.keys(SecondaryInfoValues).map((info) => {
-              >${this.hass!.localize(
+            if (
-                "ui.panel.lovelace.editor.card.entities.secondary_info_values.none"
+              !("domains" in SecondaryInfoValues[info]) ||
-              )}</paper-item
+              ("domains" in SecondaryInfoValues[info] &&
-            >
+                SecondaryInfoValues[info].domains!.includes(domain))
-            ${Object.keys(SecondaryInfoValues).map((info) => {
+            ) {
-              if (
+              return html`
-                !("domains" in SecondaryInfoValues[info]) ||
+                <mwc-list-item .value=${info}>
-                ("domains" in SecondaryInfoValues[info] &&
+                  ${this.hass!.localize(
-                  SecondaryInfoValues[info].domains!.includes(domain))
+                    `ui.panel.lovelace.editor.card.entities.secondary_info_values.${info}`
-              ) {
+                  )}
-                return html`
+                </mwc-list-item>
-                  <paper-item .value=${info}
+              `;
-                    >${this.hass!.localize(
+            }
-                      `ui.panel.lovelace.editor.card.entities.secondary_info_values.${info}`
+            return "";
-                    )}</paper-item
+          })}
-                  >
+        </mwc-select>
-                `;
-              }
-              return "";
-            })}
-          </paper-listbox>
-        </paper-dropdown-menu>
       </div>
     `;
   }

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

@@ -1,11 +1,11 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { assert, boolean, object, optional, string, assign } from "superstruct";
+import { assert, assign, boolean, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import { computeRTLDirection } from "../../../../common/util/compute_rtl";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-switch";
@@ -17,9 +17,9 @@ import "../../components/hui-entity-editor";
 import "../../components/hui-theme-select-editor";
 import { LovelaceCardEditor } from "../../types";
 import { actionConfigStruct } from "../structs/action-struct";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
-import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
@@ -155,22 +155,24 @@ export class HuiPictureEntityCardEditor
           allow-custom-entity
         ></ha-entity-picker>
         <div class="side-by-side">
-          <paper-dropdown-menu
+          <mwc-select
             .label="${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.camera_view"
             )} (${this.hass.localize(
               "ui.panel.lovelace.editor.card.config.optional"
             )})"
             .configValue=${"camera_view"}
-            @value-changed=${this._valueChanged}
+            @selected=${this._valueChanged}
+            @closed=${stopPropagation}
+            fixedMenuPosition
+            naturalMenuWidth
+            .value=${views.indexOf(this._camera_view)}
           >
-            <paper-listbox
+            ${views.map(
-              slot="dropdown-content"
+              (view) =>
-              .selected=${views.indexOf(this._camera_view)}
+                html`<mwc-list-item .value=${view}>${view}</mwc-list-item> `
-            >
+            )}
-              ${views.map((view) => html` <paper-item>${view}</paper-item> `)}
+          </mwc-select>
-            </paper-listbox>
-          </paper-dropdown-menu>
           <paper-input
             .label="${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.aspect_ratio"

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

@@ -1,11 +1,11 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import { array, assert, object, optional, string, assign } from "superstruct";
+import { array, assert, assign, object, optional, string } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import "../../../../components/entity/ha-entity-picker";
 import { ActionConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
@@ -17,10 +17,10 @@ import { EntityConfig } from "../../entity-rows/types";
 import { LovelaceCardEditor } from "../../types";
 import { processEditorEntities } from "../process-editor-entities";
 import { actionConfigStruct } from "../structs/action-struct";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { entitiesConfigStruct } from "../structs/entities-struct";
 import { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
-import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
@@ -146,22 +146,24 @@ export class HuiPictureGlanceCardEditor
           .includeDomains=${includeDomains}
         ></ha-entity-picker>
         <div class="side-by-side">
-          <paper-dropdown-menu
+          <mwc-select
             .label="${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.camera_view"
             )} (${this.hass.localize(
               "ui.panel.lovelace.editor.card.config.optional"
             )})"
             .configValue=${"camera_view"}
-            @value-changed=${this._valueChanged}
+            @selected=${this._valueChanged}
+            @closed=${stopPropagation}
+            fixedMenuPosition
+            naturalMenuWidth
+            .value=${this._camera_view}
           >
-            <paper-listbox
+            ${views.map(
-              slot="dropdown-content"
+              (view) =>
-              .selected=${views.indexOf(this._camera_view)}
+                html`<mwc-list-item .value=${view}>${view}</mwc-list-item> `
-            >
+            )}
-              ${views.map((view) => html` <paper-item>${view}</paper-item> `)}
+          </mwc-select>
-            </paper-listbox>
-          </paper-dropdown-menu>
           <paper-input
             .label="${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.aspect_ratio"

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

@@ -1,7 +1,6 @@
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
 import { CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import {
@@ -15,6 +14,7 @@ import {
   union,
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import { computeDomain } from "../../../../common/entity/compute_domain";
 import { domainIcon } from "../../../../common/entity/domain_icon";
 import "../../../../components/entity/ha-entity-picker";
@@ -142,22 +142,24 @@ export class HuiSensorCardEditor
             .configValue=${"icon"}
             @value-changed=${this._valueChanged}
           ></ha-icon-picker>
-          <paper-dropdown-menu
+          <mwc-select
             .label="${this.hass.localize(
               "ui.panel.lovelace.editor.card.sensor.graph_type"
             )} (${this.hass.localize(
               "ui.panel.lovelace.editor.card.config.optional"
             )})"
             .configValue=${"graph"}
-            @value-changed=${this._valueChanged}
+            @selected=${this._valueChanged}
+            @closed=${stopPropagation}
+            fixedMenuPosition
+            naturalMenuWidth
+            .value=${this._graph}
           >
-            <paper-listbox
+            ${graphs.map(
-              slot="dropdown-content"
+              (graph) =>
-              .selected=${graphs.indexOf(this._graph)}
+                html`<mwc-list-item .value=${graph}>${graph}</mwc-list-item>`
-            >
+            )}
-              ${graphs.map((graph) => html`<paper-item>${graph}</paper-item>`)}
+          </mwc-select>
-            </paper-listbox>
-          </paper-dropdown-menu>
         </div>
         <div class="side-by-side">
           <paper-input

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

@@ -1,33 +1,35 @@
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
 import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import {
   array,
   assert,
+  assign,
   literal,
   number,
   object,
   optional,
   string,
   union,
-  assign,
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { stopPropagation } from "../../../../common/dom/stop_propagation";
+import "../../../../components/entity/ha-statistics-picker";
+import "../../../../components/ha-checkbox";
+import "../../../../components/ha-formfield";
+import "../../../../components/ha-radio";
+import type { HaRadio } from "../../../../components/ha-radio";
+import { StatisticType } from "../../../../data/history";
 import { HomeAssistant } from "../../../../types";
 import { StatisticsGraphCardConfig } from "../../cards/types";
+import { processConfigEntities } from "../../common/process-config-entities";
 import { LovelaceCardEditor } from "../../types";
+import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { entitiesConfigStruct } from "../structs/entities-struct";
 import { EditorTarget } from "../types";
 import { configElementStyle } from "./config-elements-style";
-import "../../../../components/entity/ha-statistics-picker";
-import { processConfigEntities } from "../../common/process-config-entities";
-import "../../../../components/ha-formfield";
-import "../../../../components/ha-checkbox";
-import { StatisticType } from "../../../../data/history";
-import "../../../../components/ha-radio";
-import type { HaRadio } from "../../../../components/ha-radio";
-import { baseLovelaceCardConfig } from "../structs/base-card-struct";
-import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 
 const statTypeStruct = union([
   literal("sum"),
@@ -118,30 +120,28 @@ export class HuiStatisticsGraphCardEditor
           @value-changed=${this._valueChanged}
         ></paper-input>
         <div class="side-by-side">
-          <paper-dropdown-menu
+          <mwc-select
             .label="${this.hass.localize(
               "ui.panel.lovelace.editor.card.statistics-graph.period"
             )} (${this.hass.localize(
               "ui.panel.lovelace.editor.card.config.optional"
             )})"
             .configValue=${"period"}
-            @iron-select=${this._periodSelected}
+            @selected=${this._periodSelected}
+            @closed=${stopPropagation}
+            fixedMenuPosition
+            naturalMenuWidth
+            .value=${this._period}
           >
-            <paper-listbox
+            ${periods.map(
-              slot="dropdown-content"
+              (period) =>
-              attr-for-selected="period"
+                html`<mwc-list-item .value=${period}>
-              .selected=${this._period}
+                  ${this.hass!.localize(
-            >
+                    `ui.panel.lovelace.editor.card.statistics-graph.periods.${period}`
-              ${periods.map(
+                  )}
-                (period) =>
+                </mwc-list-item>`
-                  html`<paper-item .period=${period}>
+            )}
-                    ${this.hass!.localize(
+          </mwc-select>
-                      `ui.panel.lovelace.editor.card.statistics-graph.periods.${period}`
-                    )}
-                  </paper-item>`
-              )}
-            </paper-listbox>
-          </paper-dropdown-menu>
           <paper-input
             type="number"
             .label="${this.hass.localize(
@@ -242,8 +242,8 @@ export class HuiStatisticsGraphCardEditor
     });
   }
 
-  private _periodSelected(ev: CustomEvent) {
+  private _periodSelected(ev) {
-    const newPeriod = ev.detail.item
+    const newPeriod = ev.target.value
       .period as StatisticsGraphCardConfig["period"];
     if (newPeriod === this._period) {
       return;

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

@@ -1,5 +1,4 @@
 import { mdiClose, mdiPencil, mdiPlus } from "@mdi/js";
-import "@polymer/paper-item/paper-item";
 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/select-view/hui-dialog-select-view.ts

@@ -1,13 +1,13 @@
 import "@material/mwc-list/mwc-list";
+import "@material/mwc-list/mwc-list-item";
 import "@material/mwc-list/mwc-radio-list-item";
-import "@polymer/paper-item/paper-item";
+import "@material/mwc-select/mwc-select";
-import "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import { createCloseHeading } from "../../../../components/ha-dialog";
 import "../../../../components/ha-icon";
-import "../../../../components/ha-paper-dropdown-menu";
 import {
   fetchConfig,
   fetchDashboards,
@@ -69,40 +69,37 @@ export class HuiDialogSelectView extends LitElement {
         )}
       >
         ${this._params.allowDashboardChange
-          ? html`<ha-paper-dropdown-menu
+          ? html`<mwc-select
               .label=${this.hass.localize(
                 "ui.panel.lovelace.editor.select_view.dashboard_label"
               )}
-              dynamic-align
               .disabled=${!this._dashboards.length}
+              .value=${this._urlPath || this.hass.defaultPanel}
+              @selected=${this._dashboardChanged}
+              @closed=${stopPropagation}
+              fixedMenuPosition
+              naturalMenuWidth
             >
-              <paper-listbox
+              <mwc-list-item
-                slot="dropdown-content"
+                value="lovelace"
-                .selected=${this._urlPath || this.hass.defaultPanel}
+                .disabled=${(this.hass.panels.lovelace?.config as any)?.mode ===
-                @iron-select=${this._dashboardChanged}
+                "yaml"}
-                attr-for-selected="url-path"
               >
-                <paper-item
+                Default
-                  .urlPath=${"lovelace"}
+              </mwc-list-item>
-                  .disabled=${(this.hass.panels.lovelace?.config as any)
+              ${this._dashboards.map((dashboard) => {
-                    ?.mode === "yaml"}
+                if (!this.hass.user!.is_admin && dashboard.require_admin) {
-                >
+                  return "";
-                  Default
+                }
-                </paper-item>
+                return html`
-                ${this._dashboards.map((dashboard) => {
+                  <mwc-list-item
-                  if (!this.hass.user!.is_admin && dashboard.require_admin) {
+                    .disabled=${dashboard.mode !== "storage"}
-                    return "";
+                    .value=${dashboard.url_path}
-                  }
+                    >${dashboard.title}</mwc-list-item
-                  return html`
+                  >
-                    <paper-item
+                `;
-                      .disabled=${dashboard.mode !== "storage"}
+              })}
-                      .urlPath=${dashboard.url_path}
+            </mwc-select>`
-                      >${dashboard.title}</paper-item
-                    >
-                  `;
-                })}
-              </paper-listbox>
-            </ha-paper-dropdown-menu>`
           : ""}
         ${this._config
           ? this._config.views.length > 1
@@ -111,7 +108,7 @@ export class HuiDialogSelectView extends LitElement {
                   ${this._config.views.map(
                     (view, idx) => html`
                       <mwc-radio-list-item
-                        graphic=${this._config?.views.some(({ icon }) => icon)
+                        .graphic=${this._config?.views.some(({ icon }) => icon)
                           ? "icon"
                           : null}
                         @click=${this._viewChanged}
@@ -142,8 +139,8 @@ export class HuiDialogSelectView extends LitElement {
       this._params!.dashboards || (await fetchDashboards(this.hass));
   }
 
-  private async _dashboardChanged(ev: CustomEvent) {
+  private async _dashboardChanged(ev) {
-    let urlPath: string | null = ev.detail.item.urlPath;
+    let urlPath: string | null = ev.target.value;
     if (urlPath === this._urlPath) {
       return;
     }
@@ -181,7 +178,7 @@ export class HuiDialogSelectView extends LitElement {
     return [
       haStyleDialog,
       css`
-        ha-paper-dropdown-menu {
+        mwc-select {
           width: 100%;
         }
       `,

src/panels/lovelace/editor/view-editor/hui-view-editor.ts

@@ -1,7 +1,10 @@
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
 import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import { slugify } from "../../../../common/string/slugify";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-icon-picker";
@@ -121,26 +124,24 @@ export class HuiViewEditor extends LitElement {
           .configValue=${"theme"}
           @value-changed=${this._valueChanged}
         ></hui-theme-select-editor>
-        <paper-dropdown-menu
+        <mwc-select
           .label=${this.hass.localize(
             "ui.panel.lovelace.editor.edit_view.type"
           )}
+          .value=${this._type}
+          @selected=${this._typeChanged}
+          @closed=${stopPropagation}
+          fixedMenuPosition
+          naturalMenuWidth
         >
-          <paper-listbox
+          ${[DEFAULT_VIEW_LAYOUT, SIDEBAR_VIEW_LAYOUT, PANEL_VIEW_LAYOUT].map(
-            slot="dropdown-content"
+            (type) => html`<mwc-list-item .value=${type}>
-            .selected=${this._type}
+              ${this.hass.localize(
-            attr-for-selected="type"
+                `ui.panel.lovelace.editor.edit_view.types.${type}`
-            @iron-select=${this._typeChanged}
+              )}
-          >
+            </mwc-list-item>`
-            ${[DEFAULT_VIEW_LAYOUT, SIDEBAR_VIEW_LAYOUT, PANEL_VIEW_LAYOUT].map(
+          )}
-              (type) => html`<paper-item .type=${type}>
+        </mwc-select>
-                ${this.hass.localize(
-                  `ui.panel.lovelace.editor.edit_view.types.${type}`
-                )}
-              </paper-item>`
-            )}
-          </paper-listbox>
-        </paper-dropdown-menu>
       </div>
     `;
   }
@@ -166,7 +167,7 @@ export class HuiViewEditor extends LitElement {
   }
 
   private _typeChanged(ev): void {
-    const selected = ev.target.selected;
+    const selected = ev.target.value;
     if (selected === "") {
       return;
     }

src/panels/lovelace/editor/view-editor/hui-view-visibility-editor.ts

@@ -1,5 +1,5 @@
-import "@polymer/paper-item/paper-icon-item";
+import "@material/mwc-list/mwc-list-item";
-import "@polymer/paper-item/paper-item-body";
+import "@material/mwc-select/mwc-select";
 import {
   css,
   CSSResultGroup,
@@ -68,19 +68,20 @@ export class HuiViewVisibilityEditor extends LitElement {
       </p>
       ${this._sortedUsers(this._users).map(
         (user) => html`
-          <paper-icon-item>
+          <mwc-list-item graphic="avatar" hasMeta>
             <ha-user-badge
-              slot="item-icon"
+              slot="graphic"
               .hass=${this.hass}
               .user=${user}
             ></ha-user-badge>
-            <paper-item-body>${user.name}</paper-item-body>
+            <span>${user.name}</span>
             <ha-switch
+              slot="meta"
               .userId=${user.id}
               @change=${this.valChange}
               .checked=${this.checkUser(user.id)}
             ></ha-switch>
-          </paper-icon-item>
+          </mwc-list-item>
         `
       )}
     `;

src/panels/profile/ha-panel-profile.ts

@@ -1,8 +1,6 @@
 import "@material/mwc-button";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-item/paper-item-body";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { property, state } from "lit/decorators";

src/panels/profile/ha-pick-dashboard-row.ts

@@ -1,12 +1,11 @@
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import "../../components/ha-paper-dropdown-menu";
 import "../../components/ha-settings-row";
 import { fetchDashboards, LovelaceDashboard } from "../../data/lovelace";
 import { setDefaultPanel } from "../../data/panel";
 import { HomeAssistant } from "../../types";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
 
 @customElement("ha-pick-dashboard-row")
 class HaPickDashboardRow extends LitElement {
@@ -30,36 +29,30 @@ class HaPickDashboardRow extends LitElement {
         <span slot="description">
           ${this.hass.localize("ui.panel.profile.dashboard.description")}
         </span>
-        <ha-paper-dropdown-menu
+        <mwc-select
           .label=${this.hass.localize(
             "ui.panel.profile.dashboard.dropdown_label"
           )}
-          dynamic-align
           .disabled=${!this._dashboards.length}
+          .value=${this.hass.defaultPanel}
+          @selected=${this._dashboardChanged}
         >
-          <paper-listbox
+          <mwc-list-item value="lovelace">
-            slot="dropdown-content"
+            ${this.hass.localize(
-            .selected=${this.hass.defaultPanel}
+              "ui.panel.profile.dashboard.default_dashboard_label"
-            @iron-select=${this._dashboardChanged}
+            )}
-            attr-for-selected="url-path"
+          </mwc-list-item>
-          >
+          ${this._dashboards.map((dashboard) => {
-            <paper-item url-path="lovelace"
+            if (!this.hass.user!.is_admin && dashboard.require_admin) {
-              >${this.hass.localize(
+              return "";
-                "ui.panel.profile.dashboard.default_dashboard_label"
+            }
-              )}</paper-item
+            return html`
-            >
+              <mwc-list-item .value=${dashboard.url_path}>
-            ${this._dashboards.map((dashboard) => {
+                ${dashboard.title}
-              if (!this.hass.user!.is_admin && dashboard.require_admin) {
+              </mwc-list-item>
-                return "";
+            `;
-              }
+          })}
-              return html`
+        </mwc-select>
-                <paper-item url-path=${dashboard.url_path}
-                  >${dashboard.title}</paper-item
-                >
-              `;
-            })}
-          </paper-listbox>
-        </ha-paper-dropdown-menu>
       </ha-settings-row>
     `;
   }
@@ -68,8 +61,8 @@ class HaPickDashboardRow extends LitElement {
     this._dashboards = await fetchDashboards(this.hass);
   }
 
-  private _dashboardChanged(ev: CustomEvent) {
+  private _dashboardChanged(ev) {
-    const urlPath = ev.detail.item.getAttribute("url-path");
+    const urlPath = ev.target.value;
     if (!urlPath || urlPath === this.hass.defaultPanel) {
       return;
     }

src/panels/profile/ha-pick-language-row.js

@@ -1,111 +0,0 @@
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
-import { html } from "@polymer/polymer/lib/utils/html-tag";
-/* eslint-plugin-disable lit */
-import { PolymerElement } from "@polymer/polymer/polymer-element";
-import "../../components/ha-paper-dropdown-menu";
-import "../../components/ha-settings-row";
-import { EventsMixin } from "../../mixins/events-mixin";
-import LocalizeMixin from "../../mixins/localize-mixin";
-
-/*
- * @appliesMixin LocalizeMixin
- * @appliesMixin EventsMixin
- */
-class HaPickLanguageRow extends LocalizeMixin(EventsMixin(PolymerElement)) {
-  static get template() {
-    return html`
-      <style>
-        a {
-          color: var(--primary-color);
-        }
-        paper-item {
-          direction: ltr;
-        }
-        paper-item[is-rtl] {
-          direction: rtl;
-        }
-      </style>
-      <ha-settings-row narrow="[[narrow]]">
-        <span slot="heading"
-          >[[localize('ui.panel.profile.language.header')]]</span
-        >
-        <span slot="description">
-          <a
-            href="https://developers.home-assistant.io/docs/en/internationalization_translation.html"
-            target="_blank"
-            rel="noreferrer"
-            >[[localize('ui.panel.profile.language.link_promo')]]</a
-          >
-        </span>
-        <ha-paper-dropdown-menu
-          label="[[localize('ui.panel.profile.language.dropdown_label')]]"
-          dynamic-align=""
-        >
-          <paper-listbox
-            slot="dropdown-content"
-            attr-for-selected="language-tag"
-            selected="{{languageSelection}}"
-          >
-            <template is="dom-repeat" items="[[languages]]">
-              <paper-item language-tag$="[[item.key]]" is-rtl$="[[item.isRTL]]">
-                [[item.nativeName]]
-              </paper-item>
-            </template>
-          </paper-listbox>
-        </ha-paper-dropdown-menu>
-      </ha-settings-row>
-    `;
-  }
-
-  static get properties() {
-    return {
-      hass: Object,
-      narrow: Boolean,
-      languageSelection: {
-        type: String,
-        observer: "languageSelectionChanged",
-      },
-      languages: {
-        type: Array,
-        computed: "computeLanguages(hass)",
-      },
-    };
-  }
-
-  static get observers() {
-    return ["setLanguageSelection(language)"];
-  }
-
-  computeLanguages(hass) {
-    if (!hass || !hass.translationMetadata) {
-      return [];
-    }
-    const translations = hass.translationMetadata.translations;
-    return Object.keys(translations).map((key) => ({
-      key,
-      ...translations[key],
-    }));
-  }
-
-  setLanguageSelection(language) {
-    this.languageSelection = language;
-  }
-
-  languageSelectionChanged(newVal) {
-    // Only fire event if language was changed. This prevents select updates when
-    // responding to hass changes.
-    if (newVal !== this.hass.language) {
-      this.fire("hass-language-select", newVal);
-    }
-  }
-
-  ready() {
-    super.ready();
-    if (this.hass && this.hass.locale && this.hass.locale.language) {
-      this.setLanguageSelection(this.hass.locale.language);
-    }
-  }
-}
-
-customElements.define("ha-pick-language-row", HaPickLanguageRow);

src/panels/profile/ha-pick-language-row.ts

@@ -0,0 +1,87 @@
+import { css, html, LitElement, PropertyValues } from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
+import "../../components/ha-settings-row";
+import { HomeAssistant, Translation } from "../../types";
+import "@material/mwc-select/mwc-select";
+import "@material/mwc-list/mwc-list-item";
+
+@customElement("ha-pick-language-row")
+export class HaPickLanguageRow extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property() public narrow!: boolean;
+
+  @state() private _languages: (Translation & { key: string })[] = [];
+
+  protected firstUpdated(changedProps: PropertyValues) {
+    super.firstUpdated(changedProps);
+    this._computeLanguages();
+  }
+
+  protected render() {
+    return html`
+      <ha-settings-row .narrow=${this.narrow}>
+        <span slot="heading"
+          >${this.hass.localize("ui.panel.profile.language.header")}</span
+        >
+        <span slot="description">
+          <a
+            href="https://developers.home-assistant.io/docs/en/internationalization_translation.html"
+            target="_blank"
+            rel="noreferrer"
+            >${this.hass.localize("ui.panel.profile.language.link_promo")}</a
+          >
+        </span>
+        <mwc-select
+          .label=${this.hass.localize(
+            "ui.panel.profile.language.dropdown_label"
+          )}
+          .value=${this.hass.locale.language}
+          @selected=${this._languageSelectionChanged}
+        >
+          ${this._languages.map(
+            (language) => html`<mwc-list-item
+              .value=${language.key}
+              rtl=${language.isRTL}
+            >
+              ${language.nativeName}
+            </mwc-list-item>`
+          )}
+        </mwc-select>
+      </ha-settings-row>
+    `;
+  }
+
+  private _computeLanguages() {
+    if (!this.hass.translationMetadata?.translations) {
+      return;
+    }
+    this._languages = Object.keys(
+      this.hass.translationMetadata.translations
+    ).map((key) => ({
+      key,
+      ...this.hass.translationMetadata.translations[key],
+    }));
+  }
+
+  private _languageSelectionChanged(ev) {
+    // Only fire event if language was changed. This prevents select updates when
+    // responding to hass changes.
+    if (ev.target.value !== this.hass.language) {
+      fireEvent(this, "hass-language-select", ev.target.value);
+    }
+  }
+
+  static styles = css`
+    a {
+      color: var(--primary-color);
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-pick-language-row": HaPickLanguageRow;
+  }
+}

src/panels/profile/ha-pick-number-format-row.ts

@@ -1,11 +1,10 @@
-import "@polymer/paper-item/paper-item";
+import "@material/mwc-list/mwc-list-item";
-import "@polymer/paper-listbox/paper-listbox";
+import "@material/mwc-select/mwc-select";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { formatNumber } from "../../common/number/format_number";
 import "../../components/ha-card";
-import "../../components/ha-paper-dropdown-menu";
 import "../../components/ha-settings-row";
 import { NumberFormat } from "../../data/translation";
 import { HomeAssistant } from "../../types";
@@ -25,47 +24,39 @@ class NumberFormatRow extends LitElement {
         <span slot="description">
           ${this.hass.localize("ui.panel.profile.number_format.description")}
         </span>
-        <ha-paper-dropdown-menu
+        <mwc-select
-          label=${this.hass.localize(
+          .label=${this.hass.localize(
             "ui.panel.profile.number_format.dropdown_label"
           )}
-          dynamic-align
           .disabled=${this.hass.locale === undefined}
+          .value=${this.hass.locale.number_format}
+          @selected=${this._handleFormatSelection}
         >
-          <paper-listbox
+          ${Object.values(NumberFormat).map((format) => {
-            slot="dropdown-content"
+            const formattedNumber = formatNumber(1234567.89, {
-            .selected=${this.hass.locale.number_format}
+              ...this.hass.locale,
-            @iron-select=${this._handleFormatSelection}
+              number_format: format,
-            attr-for-selected="format"
+            });
-          >
+            const value = this.hass.localize(
-            ${Object.values(NumberFormat).map((format) => {
+              `ui.panel.profile.number_format.formats.${format}`
-              const formattedNumber = formatNumber(1234567.89, {
+            );
-                ...this.hass.locale,
+            const twoLine = value.slice(value.length - 2) !== "89"; // Display explicit number formats on one line
-                number_format: format,
+            return html`
-              });
+              <mwc-list-item .value=${format} .twoline=${twoLine}>
-              const value = this.hass.localize(
+                <span>${value}</span>
-                `ui.panel.profile.number_format.formats.${format}`
+                ${twoLine
-              );
+                  ? html`<span slot="secondary">${formattedNumber}</span>`
-              const twoLine = value.slice(value.length - 2) !== "89"; // Display explicit number formats on one line
+                  : ""}
-              return html`
+              </mwc-list-item>
-                <paper-item .format=${format} .label=${value}>
+            `;
-                  <paper-item-body ?two-line=${twoLine}>
+          })}
-                    <div>${value}</div>
+        </mwc-select>
-                    ${twoLine
-                      ? html`<div secondary>${formattedNumber}</div>`
-                      : ""}
-                  </paper-item-body>
-                </paper-item>
-              `;
-            })}
-          </paper-listbox>
-        </ha-paper-dropdown-menu>
       </ha-settings-row>
     `;
   }
 
-  private async _handleFormatSelection(ev: CustomEvent) {
+  private async _handleFormatSelection(ev) {
-    fireEvent(this, "hass-number-format-select", ev.detail.item.format);
+    fireEvent(this, "hass-number-format-select", ev.target.value);
   }
 }
 

src/panels/profile/ha-pick-theme-row.ts

@@ -1,7 +1,5 @@
 import "@material/mwc-button/mwc-button";
 import "@polymer/paper-input/paper-input";
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
 import {
   css,
   CSSResultGroup,
@@ -13,7 +11,6 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-formfield";
-import "../../components/ha-paper-dropdown-menu";
 import "../../components/ha-radio";
 import type { HaRadio } from "../../components/ha-radio";
 import "../../components/ha-settings-row";
@@ -23,6 +20,8 @@ import {
 } from "../../resources/ha-style";
 import { HomeAssistant } from "../../types";
 import { documentationUrl } from "../../util/documentation-url";
+import "@material/mwc-select/mwc-select";
+import "@material/mwc-list/mwc-list-item";
 
 @customElement("ha-pick-theme-row")
 export class HaPickThemeRow extends LitElement {
@@ -63,22 +62,17 @@ export class HaPickThemeRow extends LitElement {
             ${this.hass.localize("ui.panel.profile.themes.link_promo")}
           </a>
         </span>
-        <ha-paper-dropdown-menu
+        <mwc-select
           .label=${this.hass.localize("ui.panel.profile.themes.dropdown_label")}
-          dynamic-align
           .disabled=${!hasThemes}
+          .value=${this.hass.selectedTheme?.theme || "Backend-selected"}
+          @selected=${this._handleThemeSelection}
         >
-          <paper-listbox
+          ${this._themeNames.map(
-            slot="dropdown-content"
+            (theme) =>
-            .selected=${this.hass.selectedTheme?.theme || "Backend-selected"}
+              html`<mwc-list-item .value=${theme}>${theme}</mwc-list-item>`
-            attr-for-selected="theme"
+          )}
-            @iron-select=${this._handleThemeSelection}
+        </mwc-select>
-          >
-            ${this._themeNames.map(
-              (theme) => html`<paper-item .theme=${theme}>${theme}</paper-item>`
-            )}
-          </paper-listbox>
-        </ha-paper-dropdown-menu>
       </ha-settings-row>
       ${curTheme === "default" || this._supportsModeSelection(curTheme)
         ? html` <div class="inputs">
@@ -91,7 +85,7 @@ export class HaPickThemeRow extends LitElement {
                 @change=${this._handleDarkMode}
                 name="dark_mode"
                 value="auto"
-                ?checked=${themeSettings?.dark === undefined}
+                .checked=${themeSettings?.dark === undefined}
               ></ha-radio>
             </ha-formfield>
             <ha-formfield
@@ -103,7 +97,7 @@ export class HaPickThemeRow extends LitElement {
                 @change=${this._handleDarkMode}
                 name="dark_mode"
                 value="light"
-                ?checked=${themeSettings?.dark === false}
+                .checked=${themeSettings?.dark === false}
               >
               </ha-radio>
             </ha-formfield>
@@ -116,7 +110,7 @@ export class HaPickThemeRow extends LitElement {
                 @change=${this._handleDarkMode}
                 name="dark_mode"
                 value="dark"
-                ?checked=${themeSettings?.dark === true}
+                .checked=${themeSettings?.dark === true}
               >
               </ha-radio>
             </ha-formfield>
@@ -195,8 +189,8 @@ export class HaPickThemeRow extends LitElement {
     fireEvent(this, "settheme", { dark });
   }
 
-  private _handleThemeSelection(ev: CustomEvent) {
+  private _handleThemeSelection(ev) {
-    const theme = ev.detail.item.theme;
+    const theme = ev.target.value;
     if (theme === "Backend-selected") {
       if (this.hass.selectedTheme?.theme) {
         fireEvent(this, "settheme", {

src/panels/profile/ha-pick-time-format-row.ts

@@ -1,14 +1,13 @@
-import "@polymer/paper-item/paper-item";
-import "@polymer/paper-listbox/paper-listbox";
 import { html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { formatTime } from "../../common/datetime/format_time";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-card";
-import "../../components/ha-paper-dropdown-menu";
 import "../../components/ha-settings-row";
 import { TimeFormat } from "../../data/translation";
 import { HomeAssistant } from "../../types";
+import "@material/mwc-list/mwc-list-item";
+import "@material/mwc-select/mwc-select";
 
 @customElement("ha-pick-time-format-row")
 class TimeFormatRow extends LitElement {
@@ -26,42 +25,34 @@ class TimeFormatRow extends LitElement {
         <span slot="description">
           ${this.hass.localize("ui.panel.profile.time_format.description")}
         </span>
-        <ha-paper-dropdown-menu
+        <mwc-select
           .label=${this.hass.localize(
             "ui.panel.profile.time_format.dropdown_label"
           )}
-          dynamic-align
           .disabled=${this.hass.locale === undefined}
+          .value=${this.hass.locale.time_format}
+          @selected=${this._handleFormatSelection}
         >
-          <paper-listbox
+          ${Object.values(TimeFormat).map((format) => {
-            slot="dropdown-content"
+            const formattedTime = formatTime(date, {
-            .selected=${this.hass.locale.time_format}
+              ...this.hass.locale,
-            @iron-select=${this._handleFormatSelection}
+              time_format: format,
-            attr-for-selected="format"
+            });
-          >
+            const value = this.hass.localize(
-            ${Object.values(TimeFormat).map((format) => {
+              `ui.panel.profile.time_format.formats.${format}`
-              const formattedTime = formatTime(date, {
+            );
-                ...this.hass.locale,
+            return html`<mwc-list-item .value=${format} twoline>
-                time_format: format,
+              <span>${value}</span>
-              });
+              <span slot="secondary">${formattedTime}</span>
-              const value = this.hass.localize(
+            </mwc-list-item>`;
-                `ui.panel.profile.time_format.formats.${format}`
+          })}
-              );
+        </mwc-select>
-              return html` <paper-item .format=${format} .label=${value}>
-                <paper-item-body two-line>
-                  <div>${value}</div>
-                  <div secondary>${formattedTime}</div>
-                </paper-item-body>
-              </paper-item>`;
-            })}
-          </paper-listbox>
-        </ha-paper-dropdown-menu>
       </ha-settings-row>
     `;
   }
 
-  private async _handleFormatSelection(ev: CustomEvent) {
+  private async _handleFormatSelection(ev) {
-    fireEvent(this, "hass-time-format-select", ev.detail.item.format);
+    fireEvent(this, "hass-time-format-select", ev.target.value);
   }
 }