mwc-select -> ha-select (#11806)

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

@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@material/mwc-select";
 import "@material/mwc-list/mwc-list-item";
 import {
   css,
@@ -14,6 +13,7 @@ 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";
+import "../../../../src/components/ha-select";
 import {
   HassioAddonDetails,
   HassioAddonSetOptionParams,
@@ -57,7 +57,7 @@ class HassioAddonAudio extends LitElement {
             ? html`<ha-alert alert-type="error">${this._error}</ha-alert>`
             : ""}
           ${this._inputDevices &&
-          html`<mwc-select
+          html`<ha-select
             .label=${this.supervisor.localize(
               "addon.configuration.audio.input"
             )}
@@ -74,9 +74,9 @@ class HassioAddonAudio extends LitElement {
                 </mwc-list-item>
               `
             )}
-          </mwc-select>`}
+          </ha-select>`}
           ${this._outputDevices &&
-          html`<mwc-select
+          html`<ha-select
             .label=${this.supervisor.localize(
               "addon.configuration.audio.output"
             )}
@@ -93,7 +93,7 @@ class HassioAddonAudio extends LitElement {
                 >
               `
             )}
-          </mwc-select>`}
+          </ha-select>`}
         </div>
         <div class="card-actions">
           <ha-progress-button @click=${this._saveSettings}>
@@ -119,10 +119,10 @@ class HassioAddonAudio extends LitElement {
         .card-actions {
           text-align: right;
         }
-        mwc-select {
+        ha-select {
           width: 100%;
         }
-        mwc-select:last-child {
+        ha-select:last-child {
           margin-top: 8px;
         }
       `,

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

@@ -1,11 +1,11 @@
 import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
 import "../../../../src/components/ha-circular-progress";
 import "../../../../src/components/ha-markdown";
+import "../../../../src/components/ha-select";
 import {
   extractApiErrorMessage,
   ignoreSupervisorError,
@@ -89,7 +89,7 @@ class HassioDatadiskDialog extends LitElement {
                     )}
                     <br /><br />
 
-                    <mwc-select
+                    <ha-select
                       .label=${this.dialogParams.supervisor.localize(
                         "dialog.datadisk_move.select_device"
                       )}
@@ -102,7 +102,7 @@ class HassioDatadiskDialog extends LitElement {
                             >${device}</mwc-list-item
                           >`
                       )}
-                    </mwc-select>
+                    </ha-select>
                   `
                 : this.devices === undefined
                 ? this.dialogParams.supervisor.localize(
@@ -161,7 +161,7 @@ class HassioDatadiskDialog extends LitElement {
       haStyle,
       haStyleDialog,
       css`
-        mwc-select {
+        ha-select {
           width: 100%;
         }
         ha-circular-progress {

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

@@ -4,6 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import "../../../src/components/buttons/ha-progress-button";
 import "../../../src/components/ha-alert";
 import "../../../src/components/ha-card";
+import "../../../src/components/ha-select";
 import { extractApiErrorMessage } from "../../../src/data/hassio/common";
 import { fetchHassioLogs } from "../../../src/data/hassio/supervisor";
 import { Supervisor } from "../../../src/data/supervisor/supervisor";
@@ -70,7 +71,7 @@ class HassioSupervisorLog extends LitElement {
           : ""}
         ${this.hass.userData?.showAdvanced
           ? html`
-              <mwc-select
+              <ha-select
                 .label=${this.supervisor.localize("system.log.log_provider")}
                 @selected=${this._setLogProvider}
                 .value=${this._selectedLogProvider}
@@ -82,7 +83,7 @@ class HassioSupervisorLog extends LitElement {
                     </mwc-list-item>
                   `
                 )}
-              </mwc-select>
+              </ha-select>
             `
           : ""}
 
@@ -145,7 +146,7 @@ class HassioSupervisorLog extends LitElement {
         pre {
           white-space: pre-wrap;
         }
-        mwc-select {
+        ha-select {
           width: 100%;
           margin-bottom: 4px;
         }

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

@@ -1,5 +1,4 @@
 import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select/mwc-select";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -8,6 +7,7 @@ import {
   deviceAutomationsEqual,
 } from "../../data/device_automation";
 import { HomeAssistant } from "../../types";
+import "../ha-select";
 
 const NO_AUTOMATION_KEY = "NO_AUTOMATION";
 const UNKNOWN_AUTOMATION_KEY = "UNKNOWN_AUTOMATION";
@@ -90,7 +90,7 @@ export abstract class HaDeviceAutomationPicker<
     }
     const value = this._value;
     return html`
-      <mwc-select
+      <ha-select
         .label=${this.label}
         .value=${value}
         @selected=${this._automationChanged}
@@ -113,7 +113,7 @@ export abstract class HaDeviceAutomationPicker<
             </mwc-list-item>
           `
         )}
-      </mwc-select>
+      </ha-select>
     `;
   }
 
@@ -167,7 +167,7 @@ export abstract class HaDeviceAutomationPicker<
 
   static get styles(): CSSResultGroup {
     return css`
-      mwc-select {
+      ha-select {
         width: 100%;
         margin-top: 4px;
       }

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

@@ -1,6 +1,6 @@
 import { LitElement, html, TemplateResult, css } from "lit";
 import { customElement, property } from "lit/decorators";
-import "@material/mwc-select/mwc-select";
+import "./ha-select";
 import "@material/mwc-list/mwc-list-item";
 import "./ha-textfield";
 import { fireEvent } from "../common/dom/fire_event";
@@ -193,7 +193,7 @@ export class HaBaseTimeInput extends LitElement {
           : ""}
         ${this.format === 24
           ? ""
-          : html`<mwc-select
+          : html`<ha-select
               .required=${this.required}
               .value=${this.amPm}
               .disabled=${this.disabled}
@@ -205,7 +205,7 @@ export class HaBaseTimeInput extends LitElement {
             >
               <mwc-list-item value="AM">AM</mwc-list-item>
               <mwc-list-item value="PM">PM</mwc-list-item>
-            </mwc-select>`}
+            </ha-select>`}
       </div>
     `;
   }
@@ -280,7 +280,7 @@ export class HaBaseTimeInput extends LitElement {
     ha-textfield:last-child {
       --text-field-border-top-right-radius: var(--mdc-shape-medium);
     }
-    mwc-select {
+    ha-select {
       --mdc-shape-small: 0;
       width: 85px;
     }

src/components/ha-blueprint-picker.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select/mwc-select";
+import "./ha-select";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -24,7 +24,7 @@ class HaBluePrintPicker extends LitElement {
   @property({ type: Boolean }) public disabled = false;
 
   public open() {
-    const select = this.shadowRoot?.querySelector("mwc-select");
+    const select = this.shadowRoot?.querySelector("ha-select");
     if (select) {
       // @ts-expect-error
       select.menuOpen = true;
@@ -49,7 +49,7 @@ class HaBluePrintPicker extends LitElement {
       return html``;
     }
     return html`
-      <mwc-select
+      <ha-select
         .label=${this.label ||
         this.hass.localize("ui.components.blueprint-picker.label")}
         fixedMenuPosition
@@ -71,7 +71,7 @@ class HaBluePrintPicker extends LitElement {
             </mwc-list-item>
           `
         )}
-      </mwc-select>
+      </ha-select>
     `;
   }
 
@@ -101,7 +101,7 @@ class HaBluePrintPicker extends LitElement {
       :host {
         display: inline-block;
       }
-      mwc-select {
+      ha-select {
         width: 100%;
         min-width: 200px;
         display: block;

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

@@ -1,4 +1,3 @@
-import "@material/mwc-select/mwc-select";
 import { mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import {
   css,

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

@@ -1,14 +1,13 @@
-import "@material/mwc-select";
-import type { Select } from "@material/mwc-select";
 import "@material/mwc-list/mwc-list-item";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../ha-radio";
-import { HaFormElement, HaFormSelectData, HaFormSelectSchema } from "./types";
-
 import { stopPropagation } from "../../common/dom/stop_propagation";
+import "../ha-radio";
 import type { HaRadio } from "../ha-radio";
+import "../ha-select";
+import type { HaSelect } from "../ha-select";
+import { HaFormElement, HaFormSelectData, HaFormSelectSchema } from "./types";
 
 @customElement("ha-form-select")
 export class HaFormSelect extends LitElement implements HaFormElement {
@@ -20,7 +19,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
 
   @property({ type: Boolean }) public disabled = false;
 
-  @query("mwc-select", true) private _input?: HTMLElement;
+  @query("ha-select", true) private _input?: HTMLElement;
 
   public focus() {
     if (this._input) {
@@ -50,7 +49,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
     }
 
     return html`
-      <mwc-select
+      <ha-select
         fixedMenuPosition
         naturalMenuWidth
         .label=${this.label}
@@ -67,13 +66,13 @@ export class HaFormSelect extends LitElement implements HaFormElement {
             <mwc-list-item .value=${value}>${label}</mwc-list-item>
           `
         )}
-      </mwc-select>
+      </ha-select>
     `;
   }
 
   private _valueChanged(ev: CustomEvent) {
     ev.stopPropagation();
-    let value: string | undefined = (ev.target as Select | HaRadio).value;
+    let value: string | undefined = (ev.target as HaSelect | HaRadio).value;
 
     if (value === this.data) {
       return;
@@ -90,7 +89,7 @@ export class HaFormSelect extends LitElement implements HaFormElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      mwc-select,
+      ha-select,
       mwc-formfield {
         display: block;
       }

src/components/ha-qr-scanner.ts

@@ -1,6 +1,5 @@
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select/mwc-select";
 import { mdiCamera } from "@mdi/js";
 import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators";

src/components/ha-select.ts

@@ -0,0 +1,47 @@
+import { SelectBase } from "@material/mwc-select/mwc-select-base";
+import { styles } from "@material/mwc-select/mwc-select.css";
+import { html, nothing } from "lit";
+import { customElement, property } from "lit/decorators";
+import { debounce } from "../common/util/debounce";
+import { nextRender } from "../common/util/render-status";
+
+@customElement("ha-select")
+export class HaSelect extends SelectBase {
+  // @ts-ignore
+  @property({ type: Boolean }) public icon?: boolean;
+
+  protected override renderLeadingIcon() {
+    if (!this.icon) {
+      return nothing;
+    }
+
+    return html`<span class="mdc-select__icon"
+      ><slot name="icon"></slot
+    ></span>`;
+  }
+
+  static override styles = [styles];
+
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("translations-updated", this._translationsUpdated);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener(
+      "translations-updated",
+      this._translationsUpdated
+    );
+  }
+
+  private _translationsUpdated = debounce(async () => {
+    await nextRender();
+    this.layoutOptions();
+  }, 500);
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-select": HaSelect;
+  }
+}

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

@@ -1,11 +1,11 @@
+import "@material/mwc-list/mwc-list-item";
 import { css, CSSResultGroup, html, LitElement } from "lit";
 import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import { stopPropagation } from "../../common/dom/stop_propagation";
 import { SelectOption, SelectSelector } from "../../data/selector";
 import { HomeAssistant } from "../../types";
-import "@material/mwc-select/mwc-select";
+import "../ha-select";
-import "@material/mwc-list/mwc-list-item";
 
 @customElement("ha-selector-select")
 export class HaSelectSelector extends LitElement {
@@ -22,7 +22,7 @@ export class HaSelectSelector extends LitElement {
   @property({ type: Boolean }) public disabled = false;
 
   protected render() {
-    return html`<mwc-select
+    return html`<ha-select
       fixedMenuPosition
       naturalMenuWidth
       .label=${this.label}
@@ -38,7 +38,7 @@ export class HaSelectSelector extends LitElement {
 
         return html`<mwc-list-item .value=${value}>${label}</mwc-list-item>`;
       })}
-    </mwc-select>`;
+    </ha-select>`;
   }
 
   private _valueChanged(ev) {
@@ -53,7 +53,7 @@ export class HaSelectSelector extends LitElement {
 
   static get styles(): CSSResultGroup {
     return css`
-      mwc-select {
+      ha-select {
         width: 100%;
       }
     `;

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

@@ -1,9 +1,10 @@
-import "@material/mwc-select";
 import "@material/mwc-list/mwc-list-item";
 import { css, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
+import { LocalStorage } from "../../common/decorators/local-storage";
 import { fireEvent } from "../../common/dom/fire_event";
+import { stopPropagation } from "../../common/dom/stop_propagation";
 import { fetchCloudStatus, updateCloudPref } from "../../data/cloud";
 import {
   CloudTTSInfo,
@@ -15,12 +16,11 @@ import {
   MediaPlayerBrowseAction,
   MediaPlayerItem,
 } from "../../data/media-player";
-import { HomeAssistant } from "../../types";
-import "../ha-textarea";
-import { buttonLinkStyle } from "../../resources/styles";
 import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
-import { LocalStorage } from "../../common/decorators/local-storage";
+import { buttonLinkStyle } from "../../resources/styles";
-import { stopPropagation } from "../../common/dom/stop_propagation";
+import { HomeAssistant } from "../../types";
+import "../ha-select";
+import "../ha-textarea";
 
 export interface TtsMediaPickedEvent {
   item: MediaPlayerItem;
@@ -103,7 +103,7 @@ class BrowseMediaTTS extends LitElement {
 
     return html`
       <div class="cloud-options">
-        <mwc-select
+        <ha-select
           fixedMenuPosition
           naturalMenuWidth
           .label=${this.hass.localize(
@@ -117,9 +117,9 @@ class BrowseMediaTTS extends LitElement {
             ([key, label]) =>
               html`<mwc-list-item .value=${key}>${label}</mwc-list-item>`
           )}
-        </mwc-select>
+        </ha-select>
 
-        <mwc-select
+        <ha-select
           fixedMenuPosition
           naturalMenuWidth
           .label=${this.hass.localize("ui.components.media-browser.tts.gender")}
@@ -131,7 +131,7 @@ class BrowseMediaTTS extends LitElement {
             ([key, label]) =>
               html`<mwc-list-item .value=${key}>${label}</mwc-list-item>`
           )}
-        </mwc-select>
+        </ha-select>
       </div>
     `;
   }
@@ -256,7 +256,7 @@ class BrowseMediaTTS extends LitElement {
         display: flex;
         justify-content: space-between;
       }
-      .cloud-options mwc-select {
+      .cloud-options ha-select {
         width: 48%;
       }
       ha-textarea {

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

@@ -1,3 +1,4 @@
+import "@material/mwc-list/mwc-list-item";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { property } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -5,9 +6,8 @@ import { fireEvent } from "../../common/dom/fire_event";
 import { stringCompare } from "../../common/string/compare";
 import { fetchUsers, User } from "../../data/user";
 import { HomeAssistant } from "../../types";
+import "../ha-select";
 import "./ha-user-badge";
-import "@material/mwc-select/mwc-select";
-import "@material/mwc-list/mwc-list-item";
 
 class HaUserPicker extends LitElement {
   public hass?: HomeAssistant;
@@ -34,7 +34,7 @@ class HaUserPicker extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <mwc-select
+      <ha-select
         .label=${this.label}
         .disabled=${this.disabled}
         .value=${this.value}
@@ -58,7 +58,7 @@ class HaUserPicker extends LitElement {
             </mwc-list-item>
           `
         )}
-      </mwc-select>
+      </ha-select>
     `;
   }
 

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

@@ -1,3 +1,4 @@
+import "@material/mwc-list/mwc-list-item";
 import {
   css,
   CSSResultGroup,
@@ -9,9 +10,11 @@ import {
 import { property } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../common/dom/fire_event";
+import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import "../../../components/ha-climate-control";
+import "../../../components/ha-select";
 import "../../../components/ha-slider";
 import "../../../components/ha-switch";
 import {
@@ -26,9 +29,6 @@ import {
   compareClimateHvacModes,
 } from "../../../data/climate";
 import { HomeAssistant } from "../../../types";
-import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select/mwc-select";
-import { stopPropagation } from "../../../common/dom/stop_propagation";
 
 class MoreInfoClimate extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -168,7 +168,7 @@ class MoreInfoClimate extends LitElement {
 
         <div class="container-hvac_modes">
           <div class="controls">
-            <mwc-select
+            <ha-select
               .label=${hass.localize("ui.card.climate.operation")}
               .value=${stateObj.state}
               fixedMenuPosition
@@ -186,14 +186,14 @@ class MoreInfoClimate extends LitElement {
                     </mwc-list-item>
                   `
                 )}
-            </mwc-select>
+            </ha-select>
           </div>
         </div>
 
         ${supportPresetMode && stateObj.attributes.preset_modes
           ? html`
               <div class="container-preset_modes">
-                <mwc-select
+                <ha-select
                   .label=${hass.localize("ui.card.climate.preset_mode")}
                   .value=${stateObj.attributes.preset_mode}
                   fixedMenuPosition
@@ -210,14 +210,14 @@ class MoreInfoClimate extends LitElement {
                       </mwc-list-item>
                     `
                   )}
-                </mwc-select>
+                </ha-select>
               </div>
             `
           : ""}
         ${supportFanMode && stateObj.attributes.fan_modes
           ? html`
               <div class="container-fan_list">
-                <mwc-select
+                <ha-select
                   .label=${hass.localize("ui.card.climate.fan_mode")}
                   .value=${stateObj.attributes.fan_mode}
                   fixedMenuPosition
@@ -234,14 +234,14 @@ class MoreInfoClimate extends LitElement {
                       </mwc-list-item>
                     `
                   )}
-                </mwc-select>
+                </ha-select>
               </div>
             `
           : ""}
         ${supportSwingMode && stateObj.attributes.swing_modes
           ? html`
               <div class="container-swing_list">
-                <mwc-select
+                <ha-select
                   .label=${hass.localize("ui.card.climate.swing_mode")}
                   .value=${stateObj.attributes.swing_mode}
                   fixedMenuPosition
@@ -254,7 +254,7 @@ class MoreInfoClimate extends LitElement {
                       <mwc-list-item .value=${mode}>${mode}</mwc-list-item>
                     `
                   )}
-                </mwc-select>
+                </ha-select>
               </div>
             `
           : ""}
@@ -427,7 +427,7 @@ class MoreInfoClimate extends LitElement {
         color: var(--primary-text-color);
       }
 
-      mwc-select {
+      ha-select {
         width: 100%;
         margin-top: 8px;
       }

src/dialogs/more-info/controls/more-info-fan.js

@@ -1,3 +1,4 @@
+import "@material/mwc-list/mwc-list-item";
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
@@ -8,12 +9,11 @@ import "../../../components/ha-attributes";
 import "../../../components/ha-icon";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-labeled-slider";
+import "../../../components/ha-select";
 import "../../../components/ha-switch";
 import { SUPPORT_SET_SPEED } from "../../../data/fan";
 import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
-import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select/mwc-select";
 
 /*
  * @appliesMixin EventsMixin
@@ -37,7 +37,7 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
           display: block;
         }
 
-        mwc-select {
+        ha-select {
           width: 100%;
         }
       </style>
@@ -57,7 +57,7 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
         </div>
 
         <div class="container-preset_modes">
-          <mwc-select
+          <ha-select
             label="[[localize('ui.card.fan.preset_mode')]]"
             value="[[stateObj.attributes.preset_mode]]"
             on-selected="presetModeChanged"
@@ -71,7 +71,7 @@ class MoreInfoFan extends LocalizeMixin(EventsMixin(PolymerElement)) {
             >
               <mwc-list-item value="[[item]]">[[item]]</mwc-list-item>
             </template>
-          </mwc-select>
+          </ha-select>
         </div>
 
         <div class="container-oscillating">

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

@@ -170,11 +170,7 @@ class MoreInfoHumidifier extends LitElement {
         color: var(--primary-text-color);
       }
 
-      mwc-select {
+      ha-select {
-        width: 100%;
-      }
-
-      ha-slider {
         width: 100%;
       }
 

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

@@ -1,5 +1,4 @@
 import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select/mwc-select";
 import { mdiPalette } from "@mdi/js";
 import {
   css,
@@ -18,6 +17,7 @@ import "../../../components/ha-button-toggle-group";
 import "../../../components/ha-color-picker";
 import "../../../components/ha-icon-button";
 import "../../../components/ha-labeled-slider";
+import "../../../components/ha-select";
 import {
   getLightCurrentModeRgbColor,
   LightColorModes,
@@ -208,7 +208,7 @@ class MoreInfoLight extends LitElement {
               this.stateObj!.attributes.effect_list?.length
                 ? html`
                     <hr />
-                    <mwc-select
+                    <ha-select
                       .label=${this.hass.localize("ui.card.light.effect")}
                       .value=${this.stateObj.attributes.effect || ""}
                       fixedMenuPosition
@@ -223,7 +223,7 @@ class MoreInfoLight extends LitElement {
                           </mwc-list-item>
                         `
                       )}
-                    </mwc-select>
+                    </ha-select>
                   `
                 : ""}
             `

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

@@ -1,6 +1,5 @@
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select/mwc-select";
 import {
   mdiLoginVariant,
   mdiMusicNote,
@@ -17,6 +16,7 @@ import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { supportsFeature } from "../../../common/entity/supports-feature";
 import { computeRTLDirection } from "../../../common/util/compute_rtl";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-select";
 import "../../../components/ha-slider";
 import "../../../components/ha-svg-icon";
 import { showMediaBrowserDialog } from "../../../components/media-player/show-media-browser-dialog";
@@ -135,12 +135,9 @@ class MoreInfoMediaPlayer extends LitElement {
       stateObj.attributes.source_list?.length
         ? html`
             <div class="source-input">
-              <ha-svg-icon
+              <ha-select
-                class="source-input"
-                .path=${mdiLoginVariant}
-              ></ha-svg-icon>
-              <mwc-select
                 .label=${this.hass.localize("ui.card.media_player.source")}
+                icon
                 .value=${stateObj.attributes.source!}
                 @selected=${this._handleSourceChanged}
                 fixedMenuPosition
@@ -153,7 +150,8 @@ class MoreInfoMediaPlayer extends LitElement {
                       <mwc-list-item .value=${source}>${source}</mwc-list-item>
                     `
                 )}
-              </mwc-select>
+                <ha-svg-icon .path=${mdiLoginVariant} slot="icon"></ha-svg-icon>
+              </ha-select>
             </div>
           `
         : ""}
@@ -161,10 +159,10 @@ class MoreInfoMediaPlayer extends LitElement {
       stateObj.attributes.sound_mode_list?.length
         ? html`
             <div class="sound-input">
-              <ha-svg-icon .path=${mdiMusicNote}></ha-svg-icon>
+              <ha-select
-              <mwc-select
                 .label=${this.hass.localize("ui.card.media_player.sound_mode")}
                 .value=${stateObj.attributes.sound_mode!}
+                icon
                 fixedMenuPosition
                 naturalMenuWidth
                 @selected=${this._handleSoundModeChanged}
@@ -175,7 +173,8 @@ class MoreInfoMediaPlayer extends LitElement {
                     <mwc-list-item .value=${mode}>${mode}</mwc-list-item>
                   `
                 )}
-              </mwc-select>
+                <ha-svg-icon .path=${mdiMusicNote} slot="icon"></ha-svg-icon>
+              </ha-select>
             </div>
           `
         : ""}
@@ -216,14 +215,8 @@ class MoreInfoMediaPlayer extends LitElement {
         justify-content: space-between;
       }
 
-      .source-input ha-svg-icon,
+      .source-input ha-select,
-      .sound-input ha-svg-icon {
+      .sound-input ha-select {
-        padding: 7px;
-        margin-top: 24px;
-      }
-
-      .source-input mwc-select,
-      .sound-input mwc-select {
         margin-left: 10px;
         flex-grow: 1;
       }

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

@@ -1,3 +1,4 @@
+import "@material/mwc-list/mwc-list-item";
 import {
   mdiFan,
   mdiHomeMapMarker,
@@ -15,6 +16,7 @@ import { supportsFeature } from "../../../common/entity/supports-feature";
 import "../../../components/ha-attributes";
 import "../../../components/ha-icon";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-select";
 import { UNAVAILABLE } from "../../../data/entity";
 import {
   VacuumEntity,
@@ -29,8 +31,6 @@ import {
   VACUUM_SUPPORT_STOP,
 } from "../../../data/vacuum";
 import { HomeAssistant } from "../../../types";
-import "@material/mwc-select/mwc-select";
-import "@material/mwc-list/mwc-list-item";
 
 interface VacuumCommand {
   translationKey: string;
@@ -173,7 +173,7 @@ class MoreInfoVacuum extends LitElement {
         ? html`
             <div>
               <div class="flex-horizontal">
-                <mwc-select
+                <ha-select
                   .label=${this.hass!.localize(
                     "ui.dialogs.more_info_control.vacuum.fan_speed"
                   )}
@@ -189,7 +189,7 @@ class MoreInfoVacuum extends LitElement {
                       <mwc-list-item .value=${mode}>${mode}</mwc-list-item>
                     `
                   )}
-                </mwc-select>
+                </ha-select>
                 <div
                   style="justify-content: center; align-self: center; padding-top: 1.3em"
                 >

src/dialogs/more-info/controls/more-info-water_heater.js

@@ -1,3 +1,4 @@
+import "@material/mwc-list/mwc-list-item";
 import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import { timeOut } from "@polymer/polymer/lib/utils/async";
 import { Debouncer } from "@polymer/polymer/lib/utils/debounce";
@@ -6,12 +7,11 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import { featureClassNames } from "../../../common/entity/feature_class_names";
 import { supportsFeature } from "../../../common/entity/supports-feature";
+import "../../../components/ha-select";
 import "../../../components/ha-switch";
 import "../../../components/ha-water_heater-control";
 import { EventsMixin } from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
-import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select/mwc-select";
 
 /*
  * @appliesMixin EventsMixin
@@ -26,7 +26,7 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
           color: var(--primary-text-color);
         }
 
-        mwc-select {
+        ha-select {
           width: 100%;
         }
 
@@ -70,7 +70,7 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
         <template is="dom-if" if="[[supportsOperationMode(stateObj)]]">
           <div class="container-operation_list">
             <div class="controls">
-              <mwc-select
+              <ha-select
                 label="[[localize('ui.card.water_heater.operation')]]"
                 value="[[stateObj.attributes.operation_mode]]"
                 on-selected="handleOperationmodeChanged"
@@ -86,7 +86,7 @@ class MoreInfoWaterHeater extends LocalizeMixin(EventsMixin(PolymerElement)) {
                     [[_localizeOperationMode(localize, item)]]
                   </mwc-list-item>
                 </template>
-              </mwc-select>
+              </ha-select>
             </div>
           </div>
         </template>

src/fake_data/provide_hass.ts

@@ -3,6 +3,7 @@ import {
   applyThemesOnElement,
   invalidateThemeCache,
 } from "../common/dom/apply_themes_on_element";
+import { fireEvent } from "../common/dom/fire_event";
 import { computeLocalize } from "../common/translations/localize";
 import { DEFAULT_PANEL } from "../data/panel";
 import { NumberFormat, TimeFormat } from "../data/translation";
@@ -85,6 +86,7 @@ export const provideHass = (
     hass().updateHass({
       localize: await computeLocalize(elements[0], lang, hass().resources),
     });
+    fireEvent(window, "translations-updated");
   }
 
   function updateStates(newStates: HassEntities) {

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

@@ -1,7 +1,5 @@
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select";
-import type { Select } from "@material/mwc-select";
 import { mdiArrowDown, mdiArrowUp, mdiDotsVertical } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
@@ -15,6 +13,8 @@ import "../../../../components/ha-alert";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
 import "../../../../components/ha-icon-button";
+import "../../../../components/ha-select";
+import type { HaSelect } from "../../../../components/ha-select";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
 import { Action, getActionType } from "../../../../data/script";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
@@ -241,7 +241,7 @@ export default class HaAutomationActionRow extends LitElement {
                 ></ha-yaml-editor>
               `
             : html`
-                <mwc-select
+                <ha-select
                   .label=${this.hass.localize(
                     "ui.panel.config.automation.editor.actions.type_select"
                   )}
@@ -254,7 +254,7 @@ export default class HaAutomationActionRow extends LitElement {
                       <mwc-list-item .value=${opt}>${label}</mwc-list-item>
                     `
                   )}
-                </mwc-select>
+                </ha-select>
 
                 <div @ui-mode-not-available=${this._handleUiModeNotAvailable}>
                   ${dynamicElement(`ha-automation-action-${type}`, {
@@ -315,7 +315,7 @@ export default class HaAutomationActionRow extends LitElement {
   }
 
   private _typeChanged(ev: CustomEvent) {
-    const type = (ev.target as Select).value;
+    const type = (ev.target as HaSelect).value;
 
     if (!type) {
       return;
@@ -375,7 +375,7 @@ export default class HaAutomationActionRow extends LitElement {
         .warning ul {
           margin: 4px 0;
         }
-        mwc-select {
+        ha-select {
           margin-bottom: 24px;
         }
       `,

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

@@ -35,7 +35,7 @@ export class HaRepeatAction extends LitElement implements ActionElement {
     const type = getType(action);
 
     return html`
-      <mwc-select
+      <ha-select
         .label=${this.hass.localize(
           "ui.panel.config.automation.editor.actions.type.repeat.type_select"
         )}
@@ -51,7 +51,7 @@ export class HaRepeatAction extends LitElement implements ActionElement {
             </mwc-list-item>
           `
         )}
-      </mwc-select>
+      </ha-select>
       ${type === "count"
         ? html`
             <ha-textfield
@@ -162,7 +162,7 @@ export class HaRepeatAction extends LitElement implements ActionElement {
     return [
       haStyle,
       css`
-        mwc-select {
+        ha-select {
           margin-top: 8px;
         }
       `,

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

@@ -1,5 +1,3 @@
-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";
@@ -8,6 +6,8 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { stringCompare } from "../../../../common/string/compare";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-card";
+import "../../../../components/ha-select";
+import type { HaSelect } from "../../../../components/ha-select";
 import "../../../../components/ha-yaml-editor";
 import type { Condition } from "../../../../data/automation";
 import { haStyle } from "../../../../resources/styles";
@@ -86,7 +86,7 @@ export default class HaAutomationConditionEditor extends LitElement {
             ></ha-yaml-editor>
           `
         : html`
-            <mwc-select
+            <ha-select
               .label=${this.hass.localize(
                 "ui.panel.config.automation.editor.conditions.type_select"
               )}
@@ -99,7 +99,7 @@ export default class HaAutomationConditionEditor extends LitElement {
                   <mwc-list-item .value=${opt}>${label}</mwc-list-item>
                 `
               )}
-            </mwc-select>
+            </ha-select>
 
             <div>
               ${dynamicElement(
@@ -112,7 +112,7 @@ export default class HaAutomationConditionEditor extends LitElement {
   }
 
   private _typeChanged(ev: CustomEvent) {
-    const type = (ev.target as Select).value;
+    const type = (ev.target as HaSelect).value;
 
     if (!type) {
       return;
@@ -146,7 +146,7 @@ export default class HaAutomationConditionEditor extends LitElement {
   static styles = [
     haStyle,
     css`
-      mwc-select {
+      ha-select {
         margin-bottom: 24px;
       }
     `,

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

@@ -1,10 +1,10 @@
 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";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { ensureArray } from "../../../../../common/ensure-array";
+import "../../../../../components/ha-select";
 import type {
   AutomationConfig,
   Trigger,
@@ -50,7 +50,7 @@ export class HaTriggerCondition extends LitElement {
         "ui.panel.config.automation.editor.conditions.type.trigger.no_triggers"
       );
     }
-    return html`<mwc-select
+    return html`<ha-select
       .label=${this.hass.localize(
         "ui.panel.config.automation.editor.conditions.type.trigger.id"
       )}
@@ -63,7 +63,7 @@ export class HaTriggerCondition extends LitElement {
             <mwc-list-item .value=${trigger.id}> ${trigger.id} </mwc-list-item>
           `
       )}
-    </mwc-select>`;
+    </ha-select>`;
   }
 
   private _automationUpdated(config?: AutomationConfig) {

src/panels/config/automation/manual-automation-editor.ts

@@ -95,7 +95,7 @@ export class HaManualAutomationEditor extends LitElement {
                 >`
               )}
             </p>
-            <mwc-select
+            <ha-select
               .label=${this.hass.localize(
                 "ui.panel.config.automation.editor.modes.label"
               )}
@@ -112,7 +112,7 @@ export class HaManualAutomationEditor extends LitElement {
                   </mwc-list-item>
                 `
               )}
-            </mwc-select>
+            </ha-select>
             ${this.config.mode && MODES_MAX.includes(this.config.mode)
               ? html`
                   <br /><ha-textfield
@@ -358,7 +358,7 @@ export class HaManualAutomationEditor extends LitElement {
         ha-entity-toggle {
           margin-right: 8px;
         }
-        mwc-select,
+        ha-select,
         .max {
           margin-top: 16px;
           width: 200px;

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

@@ -1,24 +1,26 @@
-import type { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
 import "@material/mwc-list/mwc-list-item";
 import { mdiDotsVertical } from "@mdi/js";
-import "@material/mwc-select";
+import type { UnsubscribeFunc } from "home-assistant-js-websocket";
-import type { Select } from "@material/mwc-select";
 import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
-import memoizeOne from "memoize-one";
 import { classMap } from "lit/directives/class-map";
+import memoizeOne from "memoize-one";
 import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stringCompare } from "../../../../common/string/compare";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import { LocalizeFunc } from "../../../../common/translations/localize";
+import { debounce } from "../../../../common/util/debounce";
+import "../../../../components/ha-alert";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
-import "../../../../components/ha-alert";
-import "../../../../components/ha-textfield";
 import "../../../../components/ha-icon-button";
+import "../../../../components/ha-select";
+import type { HaSelect } from "../../../../components/ha-select";
+import "../../../../components/ha-textfield";
 import { subscribeTrigger, Trigger } from "../../../../data/automation";
+import { validateConfig } from "../../../../data/config";
 import { showConfirmationDialog } from "../../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../resources/styles";
 import type { HomeAssistant } from "../../../../types";
@@ -36,8 +38,6 @@ import "./types/ha-automation-trigger-time";
 import "./types/ha-automation-trigger-time_pattern";
 import "./types/ha-automation-trigger-webhook";
 import "./types/ha-automation-trigger-zone";
-import { debounce } from "../../../../common/util/debounce";
-import { validateConfig } from "../../../../data/config";
 
 const OPTIONS = [
   "device",
@@ -194,7 +194,7 @@ export default class HaAutomationTriggerRow extends LitElement {
                 ></ha-yaml-editor>
               `
             : html`
-                <mwc-select
+                <ha-select
                   .label=${this.hass.localize(
                     "ui.panel.config.automation.editor.triggers.type_select"
                   )}
@@ -207,7 +207,7 @@ export default class HaAutomationTriggerRow extends LitElement {
                       <mwc-list-item .value=${opt}>${label}</mwc-list-item>
                     `
                   )}
-                </mwc-select>
+                </ha-select>
 
                 ${showId
                   ? html`
@@ -359,7 +359,7 @@ export default class HaAutomationTriggerRow extends LitElement {
   }
 
   private _typeChanged(ev: CustomEvent) {
-    const type = (ev.target as Select).value;
+    const type = (ev.target as HaSelect).value;
 
     if (!type) {
       return;
@@ -456,7 +456,7 @@ export default class HaAutomationTriggerRow extends LitElement {
         mwc-list-item[disabled] {
           --mdc-theme-text-primary-on-background: var(--disabled-text-color);
         }
-        mwc-select {
+        ha-select {
           margin-bottom: 24px;
         }
         ha-textfield {

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

@@ -1,9 +1,9 @@
 import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select";
 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 "../../../../../components/ha-select";
 import { TagTrigger } from "../../../../../data/automation";
 import { fetchTags, Tag } from "../../../../../data/tag";
 import { HomeAssistant } from "../../../../../types";
@@ -29,7 +29,7 @@ export class HaTagTrigger extends LitElement implements TriggerElement {
   protected render() {
     const { tag_id } = this.trigger;
     return html`
-      <mwc-select
+      <ha-select
         .label=${this.hass.localize(
           "ui.panel.config.automation.editor.triggers.type.tag.label"
         )}
@@ -44,7 +44,7 @@ export class HaTagTrigger extends LitElement implements TriggerElement {
             </mwc-list-item>
           `
         )}
-      </mwc-select>
+      </ha-select>
     `;
   }
 

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

@@ -1,11 +1,11 @@
 import "@material/mwc-button";
-import "@material/mwc-select";
 import "@material/mwc-list/mwc-list-item";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-card";
+import "../../../../components/ha-select";
 import "../../../../components/ha-svg-icon";
 import "../../../../components/ha-switch";
 import { CloudStatusLoggedIn, updateCloudPref } from "../../../../data/cloud";
@@ -54,7 +54,7 @@ export class CloudTTSPref extends LitElement {
           )}
           <br /><br />
 
-          <mwc-select
+          <ha-select
             .label=${this.hass.localize(
               "ui.panel.config.cloud.account.tts.default_language"
             )}
@@ -66,9 +66,9 @@ export class CloudTTSPref extends LitElement {
               ([key, label]) =>
                 html`<mwc-list-item .value=${key}>${label}</mwc-list-item>`
             )}
-          </mwc-select>
+          </ha-select>
 
-          <mwc-select
+          <ha-select
             .label=${this.hass.localize(
               "ui.panel.config.cloud.account.tts.default_gender"
             )}
@@ -80,7 +80,7 @@ export class CloudTTSPref extends LitElement {
               ([key, label]) =>
                 html`<mwc-list-item .value=${key}>${label}</mwc-list-item>`
             )}
-          </mwc-select>
+          </ha-select>
         </div>
         <div class="card-actions">
           <mwc-button @click=${this._openTryDialog}>

src/panels/config/cloud/account/dialog-cloud-tts-try.ts

@@ -1,9 +1,8 @@
 import "@material/mwc-button";
-import "@material/mwc-select";
 import "@material/mwc-list/mwc-list-item";
 import { mdiPlayCircleOutline, mdiRobot } from "@mdi/js";
 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 { LocalStorage } from "../../../../common/decorators/local-storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
@@ -11,8 +10,9 @@ import { computeStateDomain } from "../../../../common/entity/compute_state_doma
 import { computeStateName } from "../../../../common/entity/compute_state_name";
 import { supportsFeature } from "../../../../common/entity/supports-feature";
 import { createCloseHeading } from "../../../../components/ha-dialog";
-import type { HaTextArea } from "../../../../components/ha-textarea";
+import "../../../../components/ha-select";
 import "../../../../components/ha-textarea";
+import type { HaTextArea } from "../../../../components/ha-textarea";
 import { showAutomationEditor } from "../../../../data/automation";
 import { SUPPORT_PLAY_MEDIA } from "../../../../data/media-player";
 import { convertTextToSpeech } from "../../../../data/tts";
@@ -74,7 +74,7 @@ export class DialogTryTts extends LitElement {
           >
           </ha-textarea>
 
-          <mwc-select
+          <ha-select
             .label=${this.hass.localize(
               "ui.panel.config.cloud.account.tts.dialog.target"
             )}
@@ -103,7 +103,7 @@ export class DialogTryTts extends LitElement {
                   </mwc-list-item>
                 `
               )}
-          </mwc-select>
+          </ha-select>
         </div>
         <mwc-button
           slot="primaryAction"
@@ -215,10 +215,10 @@ export class DialogTryTts extends LitElement {
           --mdc-dialog-max-width: 500px;
         }
         ha-textarea,
-        mwc-select {
+        ha-select {
           width: 100%;
         }
-        mwc-select {
+        ha-select {
           margin-top: 8px;
         }
       `,

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

@@ -1,7 +1,5 @@
-import "../../../components/ha-alert";
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select/mwc-select";
 import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
 import {
   css,
@@ -15,12 +13,14 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { domainIcon } from "../../../common/entity/domain_icon";
+import "../../../components/ha-alert";
 import "../../../components/ha-area-picker";
 import "../../../components/ha-expansion-panel";
 import "../../../components/ha-icon-picker";
+import "../../../components/ha-select";
 import "../../../components/ha-switch";
-import "../../../components/ha-textfield";
 import type { HaSwitch } from "../../../components/ha-switch";
+import "../../../components/ha-textfield";
 import {
   DeviceRegistryEntry,
   subscribeDeviceRegistry,
@@ -161,7 +161,7 @@ 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`<mwc-select
+          ? html`<ha-select
               .label=${this.hass.localize(
                 "ui.dialogs.entity_registry.editor.device_class"
               )}
@@ -177,7 +177,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
                   </mwc-list-item>
                 `
               )}
-            </mwc-select>`
+            </ha-select>`
           : ""}
         <ha-textfield
           error-message="Domain needs to stay the same"
@@ -420,7 +420,7 @@ export class EntityRegistrySettings extends SubscribeMixin(LitElement) {
           padding-bottom: max(env(safe-area-inset-bottom), 8px);
           background-color: var(--mdc-theme-surface, #fff);
         }
-        mwc-select {
+        ha-select {
           width: 100%;
         }
         ha-switch {

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

@@ -1,8 +1,8 @@
-import { Select } from "@material/mwc-select";
+import { HaSelect } from "../../../../../components/ha-select";
 import { Cluster, ZHADevice } from "../../../../../data/zha";
 
 export interface ItemSelectedEvent {
-  target?: Select;
+  target?: HaSelect;
 }
 
 export interface ZHADeviceRemovedEvent {

src/panels/config/integrations/integration-panels/zha/zha-cluster-attributes.ts

@@ -1,6 +1,5 @@
 import "@material/mwc-button";
 import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select";
 import { mdiHelpCircle } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import {
@@ -16,6 +15,7 @@ import { stopPropagation } from "../../../../../common/dom/stop_propagation";
 import "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-icon-button";
+import "../../../../../components/ha-select";
 import "../../../../../components/ha-service-description";
 import {
   Attribute,
@@ -92,7 +92,7 @@ export class ZHAClusterAttributes extends LitElement {
 
         <ha-card class="content">
           <div class="attribute-picker">
-            <mwc-select
+            <ha-select
               .label=${this.hass!.localize(
                 "ui.panel.config.zha.cluster_attributes.attributes_of_cluster"
               )}
@@ -110,7 +110,7 @@ export class ZHAClusterAttributes extends LitElement {
                   </mwc-list-item>
                 `
               )}
-            </mwc-select>
+            </ha-select>
           </div>
           ${this.showHelp
             ? html`
@@ -270,7 +270,7 @@ export class ZHAClusterAttributes extends LitElement {
     return [
       haStyle,
       css`
-        mwc-select {
+        ha-select {
           margin-top: 16px;
         }
 

src/panels/config/integrations/integration-panels/zha/zha-cluster-commands.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select";
 import { mdiHelpCircle } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import {
@@ -15,6 +14,7 @@ import { stopPropagation } from "../../../../../common/dom/stop_propagation";
 import "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-icon-button";
+import "../../../../../components/ha-select";
 import "../../../../../components/ha-service-description";
 import {
   Cluster,
@@ -82,7 +82,7 @@ export class ZHAClusterCommands extends LitElement {
 
         <ha-card class="content">
           <div class="command-picker">
-            <mwc-select
+            <ha-select
               .label=${this.hass!.localize(
                 "ui.panel.config.zha.cluster_commands.commands_of_cluster"
               )}
@@ -100,7 +100,7 @@ export class ZHAClusterCommands extends LitElement {
                   </mwc-list-item>
                 `
               )}
-            </mwc-select>
+            </ha-select>
           </div>
           ${this._showHelp
             ? html`
@@ -206,7 +206,7 @@ export class ZHAClusterCommands extends LitElement {
     return [
       haStyle,
       css`
-        mwc-select {
+        ha-select {
           margin-top: 16px;
         }
         .menu {

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

@@ -1,5 +1,4 @@
 import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select";
 import { mdiHelpCircle } from "@mdi/js";
 import {
   css,
@@ -15,6 +14,7 @@ import { stopPropagation } from "../../../../../common/dom/stop_propagation";
 import "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-icon-button";
+import "../../../../../components/ha-select";
 import "../../../../../components/ha-service-description";
 import {
   Cluster,
@@ -78,7 +78,7 @@ export class ZHAClusters extends LitElement {
 
         <ha-card class="content">
           <div class="node-picker">
-            <mwc-select
+            <ha-select
               .label=${this.hass!.localize(
                 "ui.panel.config.zha.common.clusters"
               )}
@@ -96,7 +96,7 @@ export class ZHAClusters extends LitElement {
                   >
                 `
               )}
-            </mwc-select>
+            </ha-select>
           </div>
           ${this.showHelp
             ? html`
@@ -137,7 +137,7 @@ export class ZHAClusters extends LitElement {
     return [
       haStyle,
       css`
-        mwc-select {
+        ha-select {
           margin-top: 16px;
         }
         .menu {

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

@@ -1,7 +1,6 @@
 import "@material/mwc-button/mwc-button";
-import { mdiHelpCircle } from "@mdi/js";
 import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select";
+import { mdiHelpCircle } from "@mdi/js";
 import {
   css,
   CSSResultGroup,
@@ -11,16 +10,17 @@ import {
   TemplateResult,
 } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { stopPropagation } from "../../../../../common/dom/stop_propagation";
 import "../../../../../components/buttons/ha-call-service-button";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-icon-button";
+import "../../../../../components/ha-select";
 import "../../../../../components/ha-service-description";
 import { bindDevices, unbindDevices, ZHADevice } from "../../../../../data/zha";
 import { haStyle } from "../../../../../resources/styles";
 import { HomeAssistant } from "../../../../../types";
 import "../../../ha-config-section";
 import { ItemSelectedEvent } from "./types";
-import { stopPropagation } from "../../../../../common/dom/stop_propagation";
 
 @customElement("zha-device-binding-control")
 export class ZHADeviceBindingControl extends LitElement {
@@ -62,7 +62,7 @@ export class ZHADeviceBindingControl extends LitElement {
 
         <ha-card class="content">
           <div class="command-picker">
-            <mwc-select
+            <ha-select
               label="Bindable Devices"
               class="menu"
               .value=${String(this._bindTargetIndex)}
@@ -80,7 +80,7 @@ export class ZHADeviceBindingControl extends LitElement {
                   </mwc-list-item>
                 `
               )}
-            </mwc-select>
+            </ha-select>
           </div>
           ${this._showHelp
             ? html`

src/panels/config/integrations/integration-panels/zha/zha-group-binding.ts

@@ -93,7 +93,7 @@ export class ZHAGroupBindingControl extends LitElement {
 
         <ha-card class="content">
           <div class="command-picker">
-            <mwc-select
+            <ha-select
               .label=${this.hass!.localize(
                 "ui.panel.config.zha.group_binding.group_picker_label"
               )}
@@ -110,7 +110,7 @@ export class ZHAGroupBindingControl extends LitElement {
                     >${group.name}</mwc-list-item
                   > `
               )}
-            </mwc-select>
+            </ha-select>
           </div>
           ${this._showHelp
             ? html`

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

@@ -1,11 +1,11 @@
 import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select/mwc-select";
 import { mdiDownload } from "@mdi/js";
 import { UnsubscribeFunc } from "home-assistant-js-websocket";
 import { css, CSSResultArray, html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { capitalizeFirstLetter } from "../../../../../common/string/capitalize-first-letter";
 import "../../../../../components/ha-icon-button";
+import "../../../../../components/ha-select";
 import {
   fetchZWaveJSLogConfig,
   setZWaveJSLogLevel,
@@ -77,7 +77,7 @@ class ZWaveJSLogs extends SubscribeMixin(LitElement) {
             <div class="card-content">
               ${this._logConfig
                 ? html`
-                    <mwc-select
+                    <ha-select
                       .label=${this.hass.localize(
                         "ui.panel.config.zwave_js.logs.log_level"
                       )}
@@ -90,7 +90,7 @@ class ZWaveJSLogs extends SubscribeMixin(LitElement) {
                       <mwc-list-item value="verbose">Verbose</mwc-list-item>
                       <mwc-list-item value="debug">Debug</mwc-list-item>
                       <mwc-list-item value="silly">Silly</mwc-list-item>
-                    </mwc-select>
+                    </ha-select>
                   `
                 : ""}
             </div>

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

@@ -1,6 +1,5 @@
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select/mwc-select";
 import {
   mdiCheckCircle,
   mdiCircle,
@@ -22,6 +21,7 @@ import memoizeOne from "memoize-one";
 import { debounce } from "../../../../../common/util/debounce";
 import "../../../../../components/ha-card";
 import "../../../../../components/ha-icon-next";
+import "../../../../../components/ha-select";
 import "../../../../../components/ha-settings-row";
 import "../../../../../components/ha-svg-icon";
 import "../../../../../components/ha-switch";
@@ -286,7 +286,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
       return html`
         ${labelAndDescription}
         <div class="flex">
-          <mwc-select
+          <ha-select
             .disabled=${!item.metadata.writeable}
             .value=${item.value}
             .key=${id}
@@ -299,7 +299,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
                 <mwc-list-item .value=${key}>${entityState}</mwc-list-item>
               `
             )}
-          </mwc-select>
+          </ha-select>
         </div>
       `;
     }
@@ -455,7 +455,7 @@ class ZWaveJSNodeConfig extends SubscribeMixin(LitElement) {
         }
 
         .flex .config-label,
-        .flex mwc-select {
+        .flex ha-select {
           flex: 1;
         }
 

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

@@ -1,8 +1,11 @@
 import "@material/mwc-button/mwc-button";
+import "@material/mwc-list/mwc-list-item";
 import "@polymer/paper-input/paper-input";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import { createCloseHeading } from "../../../../components/ha-dialog";
+import "../../../../components/ha-select";
 import {
   LovelaceResource,
   LovelaceResourcesMutableParams,
@@ -11,9 +14,6 @@ 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,7 +102,7 @@ export class DialogLovelaceResourceDetail extends LitElement {
               dialogInitialFocus
             ></paper-input>
             <br />
-            <mwc-select
+            <ha-select
               .label=${this.hass!.localize(
                 "ui.panel.config.lovelace.resources.detail.type"
               )}
@@ -139,7 +139,7 @@ export class DialogLovelaceResourceDetail extends LitElement {
                     </mwc-list-item>
                   `
                 : ""}
-            </mwc-select>
+            </ha-select>
           </div>
         </div>
         ${this._params.resource

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

@@ -57,7 +57,7 @@ export class HuiActionEditor extends LitElement {
 
     return html`
       <div class="dropdown">
-        <mwc-select
+        <ha-select
           .label=${this.label}
           .configValue=${"action"}
           @selected=${this._actionPicked}
@@ -80,7 +80,7 @@ export class HuiActionEditor extends LitElement {
               </mwc-list-item>
             `
           )}
-        </mwc-select>
+        </ha-select>
         ${this.tooltipText
           ? html`
               <ha-help-tooltip .label=${this.tooltipText}></ha-help-tooltip>
@@ -199,7 +199,7 @@ export class HuiActionEditor extends LitElement {
         right: 40px;
         top: 16px;
       }
-      mwc-select,
+      ha-select,
       ha-textfield {
         width: 100%;
       }

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

@@ -1,11 +1,11 @@
 import "@material/mwc-button";
+import "@material/mwc-list/mwc-list-item";
 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";
+import "../../../components/ha-select";
+import { HomeAssistant } from "../../../types";
 
 @customElement("hui-theme-select-editor")
 export class HuiThemeSelectEditor extends LitElement {
@@ -17,7 +17,7 @@ export class HuiThemeSelectEditor extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <mwc-select
+      <ha-select
         .label=${this.label ||
         `${this.hass!.localize(
           "ui.panel.lovelace.editor.card.generic.theme"
@@ -41,13 +41,13 @@ export class HuiThemeSelectEditor extends LitElement {
             (theme) =>
               html`<mwc-list-item .value=${theme}>${theme}</mwc-list-item>`
           )}
-      </mwc-select>
+      </ha-select>
     `;
   }
 
   static get styles(): CSSResultGroup {
     return css`
-      mwc-select {
+      ha-select {
         width: 100%;
       }
     `;

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

@@ -21,7 +21,7 @@ export const configElementStyle = css`
   }
   hui-theme-select-editor,
   hui-action-editor,
-  mwc-select,
+  ha-select,
   ha-textfield,
   ha-icon-picker {
     margin-top: 8px;

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

@@ -1,5 +1,4 @@
 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";
@@ -17,6 +16,7 @@ import {
 import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event";
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import "../../../../components/entity/ha-entity-picker";
+import "../../../../components/ha-select";
 import "../../../../components/ha-textfield";
 import type {
   LovelaceCardConfig,
@@ -156,7 +156,7 @@ export class HuiConditionalCardEditor
                       ></ha-entity-picker>
                     </div>
                     <div class="state">
-                      <mwc-select
+                      <ha-select
                         .value=${cond.state_not !== undefined
                           ? "true"
                           : "false"}
@@ -177,7 +177,7 @@ export class HuiConditionalCardEditor
                             "ui.panel.lovelace.editor.card.conditional.state_not_equal"
                           )}
                         </mwc-list-item>
-                      </mwc-select>
+                      </ha-select>
                       <ha-textfield
                         .label="${this.hass!.localize(
                           "ui.panel.lovelace.editor.card.generic.state"
@@ -330,7 +330,7 @@ export class HuiConditionalCardEditor
           display: flex;
           align-items: flex-end;
         }
-        .condition .state mwc-select {
+        .condition .state ha-select {
           margin-right: 16px;
         }
         .condition .state ha-textfield {

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

@@ -1,5 +1,4 @@
 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";
@@ -10,6 +9,7 @@ import { computeDomain } from "../../../../common/entity/compute_domain";
 import { domainIcon } from "../../../../common/entity/domain_icon";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-icon-picker";
+import "../../../../components/ha-select";
 import "../../../../components/ha-switch";
 import { HomeAssistant } from "../../../../types";
 import { EntitiesCardEntityConfig } from "../../cards/types";
@@ -102,7 +102,7 @@ export class HuiGenericEntityRowEditor
             @value-changed=${this._valueChanged}
           ></ha-icon-picker>
         </div>
-        <mwc-select
+        <ha-select
           label="Secondary Info"
           .configValue=${"secondary_info"}
           @selected=${this._valueChanged}
@@ -132,7 +132,7 @@ export class HuiGenericEntityRowEditor
             }
             return "";
           })}
-        </mwc-select>
+        </ha-select>
       </div>
     `;
   }

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

@@ -1,5 +1,4 @@
 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";
@@ -8,6 +7,7 @@ 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-select";
 import "../../../../components/ha-switch";
 import { ActionConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
@@ -155,7 +155,7 @@ export class HuiPictureEntityCardEditor
           allow-custom-entity
         ></ha-entity-picker>
         <div class="side-by-side">
-          <mwc-select
+          <ha-select
             .label="${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.camera_view"
             )} (${this.hass.localize(
@@ -172,7 +172,7 @@ export class HuiPictureEntityCardEditor
               (view) =>
                 html`<mwc-list-item .value=${view}>${view}</mwc-list-item> `
             )}
-          </mwc-select>
+          </ha-select>
           <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,5 +1,4 @@
 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";
@@ -7,6 +6,7 @@ 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-select";
 import { ActionConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
 import { PictureGlanceCardConfig } from "../../cards/types";
@@ -146,7 +146,7 @@ export class HuiPictureGlanceCardEditor
           .includeDomains=${includeDomains}
         ></ha-entity-picker>
         <div class="side-by-side">
-          <mwc-select
+          <ha-select
             .label="${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.camera_view"
             )} (${this.hass.localize(
@@ -163,7 +163,7 @@ export class HuiPictureGlanceCardEditor
               (view) =>
                 html`<mwc-list-item .value=${view}>${view}</mwc-list-item> `
             )}
-          </mwc-select>
+          </ha-select>
           <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,5 +1,4 @@
 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";
@@ -20,6 +19,7 @@ import { domainIcon } from "../../../../common/entity/domain_icon";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-icon-picker";
+import "../../../../components/ha-select";
 import "../../../../components/ha-switch";
 import { HomeAssistant } from "../../../../types";
 import { SensorCardConfig } from "../../cards/types";
@@ -142,7 +142,7 @@ export class HuiSensorCardEditor
             .configValue=${"icon"}
             @value-changed=${this._valueChanged}
           ></ha-icon-picker>
-          <mwc-select
+          <ha-select
             .label="${this.hass.localize(
               "ui.panel.lovelace.editor.card.sensor.graph_type"
             )} (${this.hass.localize(
@@ -159,7 +159,7 @@ export class HuiSensorCardEditor
               (graph) =>
                 html`<mwc-list-item .value=${graph}>${graph}</mwc-list-item>`
             )}
-          </mwc-select>
+          </ha-select>
         </div>
         <div class="side-by-side">
           <paper-input

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

@@ -1,5 +1,4 @@
 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";
@@ -21,6 +20,7 @@ import "../../../../components/ha-checkbox";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-radio";
 import type { HaRadio } from "../../../../components/ha-radio";
+import "../../../../components/ha-select";
 import { StatisticType } from "../../../../data/history";
 import { HomeAssistant } from "../../../../types";
 import { StatisticsGraphCardConfig } from "../../cards/types";
@@ -120,7 +120,7 @@ export class HuiStatisticsGraphCardEditor
           @value-changed=${this._valueChanged}
         ></paper-input>
         <div class="side-by-side">
-          <mwc-select
+          <ha-select
             .label="${this.hass.localize(
               "ui.panel.lovelace.editor.card.statistics-graph.period"
             )} (${this.hass.localize(
@@ -141,7 +141,7 @@ export class HuiStatisticsGraphCardEditor
                   )}
                 </mwc-list-item>`
             )}
-          </mwc-select>
+          </ha-select>
           <paper-input
             type="number"
             .label="${this.hass.localize(

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 "@material/mwc-select/mwc-select";
 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-select";
 import {
   fetchConfig,
   fetchDashboards,
@@ -69,7 +69,7 @@ export class HuiDialogSelectView extends LitElement {
         )}
       >
         ${this._params.allowDashboardChange
-          ? html`<mwc-select
+          ? html`<ha-select
               .label=${this.hass.localize(
                 "ui.panel.lovelace.editor.select_view.dashboard_label"
               )}
@@ -100,7 +100,7 @@ export class HuiDialogSelectView extends LitElement {
                   >
                 `;
               })}
-            </mwc-select>`
+            </ha-select>`
           : ""}
         ${this._config
           ? this._config.views.length > 1
@@ -183,7 +183,7 @@ export class HuiDialogSelectView extends LitElement {
     return [
       haStyleDialog,
       css`
-        mwc-select {
+        ha-select {
           width: 100%;
         }
       `,

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

@@ -1,5 +1,4 @@
 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";
@@ -8,6 +7,7 @@ import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import { slugify } from "../../../../common/string/slugify";
 import "../../../../components/ha-formfield";
 import "../../../../components/ha-icon-picker";
+import "../../../../components/ha-select";
 import "../../../../components/ha-switch";
 import { LovelaceViewConfig } from "../../../../data/lovelace";
 import { HomeAssistant } from "../../../../types";
@@ -124,7 +124,7 @@ export class HuiViewEditor extends LitElement {
           .configValue=${"theme"}
           @value-changed=${this._valueChanged}
         ></hui-theme-select-editor>
-        <mwc-select
+        <ha-select
           .label=${this.hass.localize(
             "ui.panel.lovelace.editor.edit_view.type"
           )}
@@ -141,7 +141,7 @@ export class HuiViewEditor extends LitElement {
               )}
             </mwc-list-item>`
           )}
-        </mwc-select>
+        </ha-select>
       </div>
     `;
   }

src/panels/lovelace/entity-rows/hui-input-select-entity-row.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select/mwc-select";
 import {
   css,
   CSSResultGroup,
@@ -11,6 +10,7 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeStateName } from "../../../common/entity/compute_state_name";
+import "../../../components/ha-select";
 import { UNAVAILABLE_STATES } from "../../../data/entity";
 import { forwardHaptic } from "../../../data/haptics";
 import {
@@ -65,7 +65,7 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
         .config=${this._config}
         hideName
       >
-        <mwc-select
+        <ha-select
           .label=${this._config.name || computeStateName(stateObj)}
           .value=${stateObj.state}
           .disabled=${UNAVAILABLE_STATES.includes(stateObj.state)}
@@ -82,7 +82,7 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
                   >`
               )
             : ""}
-        </mwc-select>
+        </ha-select>
       </hui-generic-entity-row>
     `;
   }
@@ -93,7 +93,7 @@ class HuiInputSelectEntityRow extends LitElement implements LovelaceRow {
         display: flex;
         align-items: center;
       }
-      mwc-select {
+      ha-select {
         width: 100%;
       }
     `;

src/panels/lovelace/entity-rows/hui-select-entity-row.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select/mwc-select";
 import {
   css,
   CSSResultGroup,
@@ -11,6 +10,7 @@ import {
 import { customElement, property, state } from "lit/decorators";
 import { stopPropagation } from "../../../common/dom/stop_propagation";
 import { computeStateName } from "../../../common/entity/compute_state_name";
+import "../../../components/ha-select";
 import { UNAVAILABLE } from "../../../data/entity";
 import { forwardHaptic } from "../../../data/haptics";
 import { SelectEntity, setSelectOption } from "../../../data/select";
@@ -62,7 +62,7 @@ class HuiSelectEntityRow extends LitElement implements LovelaceRow {
         .config=${this._config}
         hideName
       >
-        <mwc-select
+        <ha-select
           .label=${this._config.name || computeStateName(stateObj)}
           .value=${stateObj.state}
           .disabled=${stateObj.state === UNAVAILABLE}
@@ -88,7 +88,7 @@ class HuiSelectEntityRow extends LitElement implements LovelaceRow {
                   `
               )
             : ""}
-        </mwc-select>
+        </ha-select>
       </hui-generic-entity-row>
     `;
   }
@@ -99,7 +99,7 @@ class HuiSelectEntityRow extends LitElement implements LovelaceRow {
         display: flex;
         align-items: center;
       }
-      mwc-select {
+      ha-select {
         width: 100%;
       }
     `;

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

@@ -1,11 +1,11 @@
+import "@material/mwc-list/mwc-list-item";
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import "../../components/ha-select";
 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 {
@@ -29,7 +29,7 @@ class HaPickDashboardRow extends LitElement {
         <span slot="description">
           ${this.hass.localize("ui.panel.profile.dashboard.description")}
         </span>
-        <mwc-select
+        <ha-select
           .label=${this.hass.localize(
             "ui.panel.profile.dashboard.dropdown_label"
           )}
@@ -52,7 +52,7 @@ class HaPickDashboardRow extends LitElement {
               </mwc-list-item>
             `;
           })}
-        </mwc-select>
+        </ha-select>
       </ha-settings-row>
     `;
   }

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

@@ -1,10 +1,10 @@
+import "@material/mwc-list/mwc-list-item";
 import { css, html, LitElement, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
+import "../../components/ha-select";
 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 {
@@ -33,7 +33,7 @@ export class HaPickLanguageRow extends LitElement {
             >${this.hass.localize("ui.panel.profile.language.link_promo")}</a
           >
         </span>
-        <mwc-select
+        <ha-select
           .label=${this.hass.localize(
             "ui.panel.profile.language.dropdown_label"
           )}
@@ -48,7 +48,7 @@ export class HaPickLanguageRow extends LitElement {
               ${language.nativeName}
             </mwc-list-item>`
           )}
-        </mwc-select>
+        </ha-select>
       </ha-settings-row>
     `;
   }

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

@@ -1,10 +1,10 @@
 import "@material/mwc-list/mwc-list-item";
-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-select";
 import "../../components/ha-settings-row";
 import { NumberFormat } from "../../data/translation";
 import { HomeAssistant } from "../../types";
@@ -24,7 +24,7 @@ class NumberFormatRow extends LitElement {
         <span slot="description">
           ${this.hass.localize("ui.panel.profile.number_format.description")}
         </span>
-        <mwc-select
+        <ha-select
           .label=${this.hass.localize(
             "ui.panel.profile.number_format.dropdown_label"
           )}
@@ -50,7 +50,7 @@ class NumberFormatRow extends LitElement {
               </mwc-list-item>
             `;
           })}
-        </mwc-select>
+        </ha-select>
       </ha-settings-row>
     `;
   }

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

@@ -1,6 +1,5 @@
 import "@material/mwc-button/mwc-button";
 import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select/mwc-select";
 import {
   css,
   CSSResultGroup,
@@ -14,6 +13,7 @@ import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-formfield";
 import "../../components/ha-radio";
 import type { HaRadio } from "../../components/ha-radio";
+import "../../components/ha-select";
 import "../../components/ha-settings-row";
 import "../../components/ha-textfield";
 import {
@@ -62,7 +62,7 @@ export class HaPickThemeRow extends LitElement {
             ${this.hass.localize("ui.panel.profile.themes.link_promo")}
           </a>
         </span>
-        <mwc-select
+        <ha-select
           .label=${this.hass.localize("ui.panel.profile.themes.dropdown_label")}
           .disabled=${!hasThemes}
           .value=${this.hass.selectedTheme?.theme || "Backend-selected"}
@@ -72,7 +72,7 @@ export class HaPickThemeRow extends LitElement {
             (theme) =>
               html`<mwc-list-item .value=${theme}>${theme}</mwc-list-item>`
           )}
-        </mwc-select>
+        </ha-select>
       </ha-settings-row>
       ${curTheme === "default" || this._supportsModeSelection(curTheme)
         ? html` <div class="inputs">

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

@@ -1,13 +1,13 @@
+import "@material/mwc-list/mwc-list-item";
 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-select";
 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 {
@@ -25,7 +25,7 @@ class TimeFormatRow extends LitElement {
         <span slot="description">
           ${this.hass.localize("ui.panel.profile.time_format.description")}
         </span>
-        <mwc-select
+        <ha-select
           .label=${this.hass.localize(
             "ui.panel.profile.time_format.dropdown_label"
           )}
@@ -46,7 +46,7 @@ class TimeFormatRow extends LitElement {
               <span slot="secondary">${formattedTime}</span>
             </mwc-list-item>`;
           })}
-        </mwc-select>
+        </ha-select>
       </ha-settings-row>
     `;
   }

src/state-summary/state-card-input_select.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select/mwc-select";
+import "../components/ha-select";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { stopPropagation } from "../common/dom/stop_propagation";
@@ -18,7 +18,7 @@ class StateCardInputSelect extends LitElement {
   protected render(): TemplateResult {
     return html`
       <state-badge .stateObj=${this.stateObj}></state-badge>
-      <mwc-select
+      <ha-select
         .label=${computeStateName(this.stateObj)}
         .value=${this.stateObj.state}
         .disabled=${UNAVAILABLE_STATES.includes(this.stateObj.state)}
@@ -31,7 +31,7 @@ class StateCardInputSelect extends LitElement {
           (option) =>
             html`<mwc-list-item .value=${option}>${option}</mwc-list-item>`
         )}
-      </mwc-select>
+      </ha-select>
     `;
   }
 
@@ -54,7 +54,7 @@ class StateCardInputSelect extends LitElement {
         margin-top: 10px;
       }
 
-      mwc-select {
+      ha-select {
         width: 100%;
       }
     `;

src/state-summary/state-card-select.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-list/mwc-list-item";
-import "@material/mwc-select/mwc-select";
+import "../components/ha-select";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { stopPropagation } from "../common/dom/stop_propagation";
@@ -18,7 +18,7 @@ class StateCardSelect extends LitElement {
   protected render(): TemplateResult {
     return html`
       <state-badge .stateObj=${this.stateObj}></state-badge>
-      <mwc-select
+      <ha-select
         .value=${this.stateObj.state}
         .label=${computeStateName(this.stateObj)}
         .disabled=${this.stateObj.state === UNAVAILABLE}
@@ -40,7 +40,7 @@ class StateCardSelect extends LitElement {
               </mwc-list-item>
             `
         )}
-      </mwc-select>
+      </ha-select>
     `;
   }
 
@@ -63,7 +63,7 @@ class StateCardSelect extends LitElement {
         margin-top: 10px;
       }
 
-      mwc-select {
+      ha-select {
         width: 100%;
       }
     `;

src/state/quick-bar-mixin.ts

@@ -58,7 +58,7 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
         return false;
       }
 
-      if (el.parentElement.tagName === "MWC-SELECT") {
+      if (el.parentElement.tagName === "ha-select") {
         return false;
       }
 

src/state/translations-mixin.ts

@@ -19,6 +19,7 @@ import {
   getUserLocale,
 } from "../util/common-translation";
 import { HassBaseEl } from "./hass-base-mixin";
+import { fireEvent } from "../common/dom/fire_event";
 
 declare global {
   // for fire event
@@ -32,6 +33,7 @@ declare global {
     "hass-time-format-select": {
       time_format: TimeFormat;
     };
+    "translations-updated": undefined;
   }
 }
 
@@ -352,6 +354,7 @@ export default <T extends Constructor<HassBaseEl>>(superClass: T) =>
           localize,
         });
       }
+      fireEvent(this, "translations-updated");
     }
 
     private _refetchCachedHassTranslations(