Migrate from ha-md-select to ha-select (#29551)

* Migrate from ha-md-select to ha-select across multiple components * Review * Remove --md-filled-field-content-space
2026-02-14 23:18:21 +00:00 · 2026-02-11 10:30:10 +01:00
parent a1b4923673
commit 1d1e05dbdf
10 changed files with 219 additions and 330 deletions
--- a/src/components/device/ha-device-automation-picker.ts
+++ b/src/components/device/ha-device-automation-picker.ts
@@ -1,5 +1,5 @@
 import { consume } from "@lit/context";
-import { css, html, LitElement, nothing } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -13,8 +13,6 @@ import {
 import type { EntityRegistryEntry } from "../../data/entity/entity_registry";
 import type { HomeAssistant, ValueChangedEvent } from "../../types";
 import "../ha-generic-picker";
-import "../ha-md-select";
-import "../ha-md-select-option";
 import type { PickerValueRenderer } from "../ha-picker-field";

 const NO_AUTOMATION_KEY = "NO_AUTOMATION";
@@ -217,10 +215,4 @@ export abstract class HaDeviceAutomationPicker<
    delete value.metadata;
    fireEvent(this, "value-changed", { value });
  }
-
-  static styles = css`
-    ha-select {
-      display: block;
-    }
-  `;
 }
--- a/src/components/ha-md-select-option.ts
+++ b/src/components/ha-md-select-option.ts
@@ -1,27 +0,0 @@
-import { SelectOptionEl } from "@material/web/select/internal/selectoption/select-option";
-import { styles } from "@material/web/menu/internal/menuitem/menu-item-styles";
-import { css } from "lit";
-import { customElement } from "lit/decorators";
-
-@customElement("ha-md-select-option")
-export class HaMdSelectOption extends SelectOptionEl {
-  static override styles = [
-    styles,
-    css`
-      :host {
-        --ha-icon-display: block;
-        --md-sys-color-primary: var(--primary-text-color);
-        --md-sys-color-secondary: var(--secondary-text-color);
-        --md-sys-color-surface: var(--card-background-color);
-        --md-sys-color-on-surface: var(--primary-text-color);
-        --md-sys-color-on-surface-variant: var(--secondary-text-color);
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-md-select-option": HaMdSelectOption;
-  }
-}
--- a/src/components/ha-md-select.ts
+++ b/src/components/ha-md-select.ts
@@ -1,36 +0,0 @@
-import { FilledSelect } from "@material/web/select/internal/filled-select";
-import { styles as sharedStyles } from "@material/web/select/internal/shared-styles";
-import { styles } from "@material/web/select/internal/filled-select-styles";
-import { css } from "lit";
-import { customElement } from "lit/decorators";
-
-@customElement("ha-md-select")
-export class HaMdSelect extends FilledSelect {
-  static override styles = [
-    sharedStyles,
-    styles,
-    css`
-      :host {
-        --ha-icon-display: block;
-        --md-sys-color-primary: var(--primary-text-color);
-        --md-sys-color-secondary: var(--secondary-text-color);
-        --md-sys-color-surface: var(--card-background-color);
-        --md-sys-color-on-surface-variant: var(--secondary-text-color);
-
-        --md-sys-color-surface-container-highest: var(--input-fill-color);
-        --md-sys-color-on-surface: var(--input-ink-color);
-
-        --md-sys-color-surface-container: var(--input-fill-color);
-        --md-sys-color-on-secondary-container: var(--primary-text-color);
-        --md-sys-color-secondary-container: var(--input-fill-color);
-        --md-menu-container-color: var(--card-background-color);
-      }
-    `,
-  ];
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "ha-md-select": HaMdSelect;
-  }
-}
--- a/src/panels/config/backup/components/config/ha-backup-config-addon.ts
+++ b/src/panels/config/backup/components/config/ha-backup-config-addon.ts
@@ -3,13 +3,11 @@ import { customElement, property } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import "../../../../../components/ha-md-list";
 import "../../../../../components/ha-md-list-item";
-import "../../../../../components/ha-md-select";
-import type { HaMdSelect } from "../../../../../components/ha-md-select";
-import "../../../../../components/ha-md-select-option";
 import "../../../../../components/ha-md-textfield";
 import type { HaMdTextfield } from "../../../../../components/ha-md-textfield";
+import "../../../../../components/ha-select";
 import type { SupervisorUpdateConfig } from "../../../../../data/supervisor/update";
-import type { HomeAssistant } from "../../../../../types";
+import type { HomeAssistant, ValueChangedEvent } from "../../../../../types";

 const MIN_RETENTION_VALUE = 1;

@@ -34,27 +32,26 @@ class HaBackupConfigAddon extends LitElement {
              `ui.panel.config.backup.schedule.update_preference.supporting_text`
            )}
          </span>
-          <ha-md-select
+          <ha-select
            slot="end"
-            @change=${this._updatePreferenceChanged}
+            @selected=${this._updatePreferenceChanged}
            .value=${this.supervisorUpdateConfig?.add_on_backup_before_update?.toString() ||
            "false"}
-          >
-            <ha-md-select-option value="false">
-              <div slot="headline">
-                ${this.hass.localize(
+            .options=${[
+              {
+                value: "false",
+                label: this.hass.localize(
                  "ui.panel.config.backup.schedule.update_preference.skip_backups"
-                )}
-              </div>
-            </ha-md-select-option>
-            <ha-md-select-option value="true">
-              <div slot="headline">
-                ${this.hass.localize(
+                ),
+              },
+              {
+                value: "true",
+                label: this.hass.localize(
                  "ui.panel.config.backup.schedule.update_preference.backup_before_update"
-                )}
-              </div>
-            </ha-md-select-option>
-          </ha-md-select>
+                ),
+              },
+            ]}
+          ></ha-select>
        </ha-md-list-item>
        <ha-md-list-item>
          <span slot="headline">
@@ -83,10 +80,10 @@ class HaBackupConfigAddon extends LitElement {
    `;
  }

-  private _updatePreferenceChanged(ev) {
+  private _updatePreferenceChanged(ev: ValueChangedEvent<string | undefined>) {
    ev.stopPropagation();
-    const target = ev.currentTarget as HaMdSelect;
-    const add_on_backup_before_update = target.value === "true";
+    const target = ev.detail.value;
+    const add_on_backup_before_update = target === "true";
    fireEvent(this, "update-config-changed", {
      value: {
        add_on_backup_before_update,
@@ -115,17 +112,16 @@ class HaBackupConfigAddon extends LitElement {
    ha-md-list-item {
      --md-item-overflow: visible;
    }
-    ha-md-select {
+    ha-select {
      min-width: 210px;
    }
    ha-md-textfield {
      width: 210px;
    }
    @media all and (max-width: 450px) {
-      ha-md-select {
+      ha-select {
        min-width: 160px;
        width: 160px;
-        --md-filled-field-content-space: 0;
      }
      ha-md-textfield {
        width: 160px;
--- a/src/panels/config/backup/components/config/ha-backup-config-data.ts
+++ b/src/panels/config/backup/components/config/ha-backup-config-data.ts
@@ -17,9 +17,7 @@ import "../../../../../components/ha-button";
 import "../../../../../components/ha-expansion-panel";
 import "../../../../../components/ha-md-list";
 import "../../../../../components/ha-md-list-item";
-import "../../../../../components/ha-md-select";
-import type { HaMdSelect } from "../../../../../components/ha-md-select";
-import "../../../../../components/ha-md-select-option";
+import "../../../../../components/ha-select";
 import "../../../../../components/ha-spinner";
 import "../../../../../components/ha-switch";
 import type { HaSwitch } from "../../../../../components/ha-switch";
@@ -27,11 +25,11 @@ import "../../../../../components/ha-tooltip";
 import { fetchHassioAddonsInfo } from "../../../../../data/hassio/addon";
 import type { HostDisksUsage } from "../../../../../data/hassio/host";
 import { fetchHostDisksUsage } from "../../../../../data/hassio/host";
-import type { HomeAssistant } from "../../../../../types";
+import { getRecorderInfo } from "../../../../../data/recorder";
+import type { HomeAssistant, ValueChangedEvent } from "../../../../../types";
 import { bytesToString } from "../../../../../util/bytes-to-string";
 import "../ha-backup-addons-picker";
 import type { BackupAddonItem } from "../ha-backup-addons-picker";
-import { getRecorderInfo } from "../../../../../data/recorder";

 export interface FormData {
  homeassistant: boolean;
@@ -369,34 +367,31 @@ class HaBackupConfigData extends LitElement {
                          "ui.panel.config.backup.data.apps_description"
                        )}
                      </span>
-                      <ha-md-select
+                      <ha-select
                        slot="end"
-                        id="addons_mode"
-                        @change=${this._selectChanged}
+                        @selected=${this._selectChanged}
                        .value=${data.addons_mode}
-                      >
-                        <ha-md-select-option value="all">
-                          <div slot="headline">
-                            ${this.hass.localize(
+                        .options=${[
+                          {
+                            value: "all",
+                            label: this.hass.localize(
                              "ui.panel.config.backup.data.apps_all"
-                            )}
-                          </div>
-                        </ha-md-select-option>
-                        <ha-md-select-option value="none">
-                          <div slot="headline">
-                            ${this.hass.localize(
+                            ),
+                          },
+                          {
+                            value: "none",
+                            label: this.hass.localize(
                              "ui.panel.config.backup.data.apps_none"
-                            )}
-                          </div>
-                        </ha-md-select-option>
-                        <ha-md-select-option value="custom">
-                          <div slot="headline">
-                            ${this.hass.localize(
+                            ),
+                          },
+                          {
+                            value: "custom",
+                            label: this.hass.localize(
                              "ui.panel.config.backup.data.apps_custom"
-                            )}
-                          </div>
-                        </ha-md-select-option>
-                      </ha-md-select>
+                            ),
+                          },
+                        ]}
+                      ></ha-select>
                    </ha-md-list-item>
                  `
                : nothing}
@@ -432,16 +427,21 @@ class HaBackupConfigData extends LitElement {
    });
  }

-  private _selectChanged(ev: Event) {
-    const target = ev.currentTarget as HaMdSelect;
+  private _selectChanged(
+    ev: ValueChangedEvent<"all" | "none" | "custom" | undefined>
+  ) {
+    const value = ev.detail.value;
+
+    if (!value) {
+      return;
+    }
    const data = this._getData(this.value, this._showAddons);
+
    this._setData({
      ...data,
-      [target.id]: target.value,
+      addons_mode: value,
    });
-    if (target.id === "addons_mode") {
-      this._showAddons = target.value === "custom";
-    }
+    this._showAddons = value === "custom";
  }

  private _addonsChanged(ev: CustomEvent) {
@@ -559,14 +559,13 @@ class HaBackupConfigData extends LitElement {
    ha-md-list-item {
      --md-item-overflow: visible;
    }
-    ha-md-select {
+    ha-select {
      min-width: 210px;
    }
    @media all and (max-width: 450px) {
-      ha-md-select {
+      ha-select {
        min-width: 140px;
        width: 140px;
-        --md-filled-field-content-space: 0;
      }
    }
  `;
--- a/src/panels/config/backup/components/config/ha-backup-config-retention.ts
+++ b/src/panels/config/backup/components/config/ha-backup-config-retention.ts
@@ -4,13 +4,12 @@ import { fireEvent } from "../../../../../common/dom/fire_event";
 import { clamp } from "../../../../../common/number/clamp";
 import "../../../../../components/ha-expansion-panel";
 import "../../../../../components/ha-md-list-item";
-import "../../../../../components/ha-md-select";
-import type { HaMdSelect } from "../../../../../components/ha-md-select";
-import "../../../../../components/ha-md-select-option";
 import "../../../../../components/ha-md-textfield";
 import type { HaMdTextfield } from "../../../../../components/ha-md-textfield";
+import "../../../../../components/ha-select";
+import type { HaSelect } from "../../../../../components/ha-select";
 import type { BackupConfig, Retention } from "../../../../../data/backup";
-import type { HomeAssistant } from "../../../../../types";
+import type { HomeAssistant, ValueChangedEvent } from "../../../../../types";

 export type BackupConfigSchedule = Pick<BackupConfig, "schedule" | "retention">;

@@ -57,7 +56,7 @@ class HaBackupConfigRetention extends LitElement {

  @query("#value") private _customValueField?: HaMdTextfield;

-  @query("#type") private _customTypeField?: HaMdSelect;
+  @query("#type") private _customTypeField?: HaSelect;

  private _configLoaded = false;

@@ -115,23 +114,17 @@ class HaBackupConfigRetention extends LitElement {
            `ui.panel.config.backup.schedule.retention_description`
          )}
        </span>
-        <ha-md-select
+        <ha-select
          slot="end"
-          @change=${this._retentionPresetChanged}
+          @selected=${this._retentionPresetChanged}
          .value=${this._preset}
-        >
-          ${this.presetOptions.map(
-            (option) => html`
-              <ha-md-select-option .value=${option}>
-                <div slot="headline">
-                  ${this.hass.localize(
-                    `ui.panel.config.backup.schedule.retention_presets.${option}`
-                  )}
-                </div>
-              </ha-md-select-option>
-            `
-          )}
-        </ha-md-select>
+          .options=${this.presetOptions.map((option) => ({
+            value: option,
+            label: this.hass.localize(
+              `ui.panel.config.backup.schedule.retention_presets.${option}`
+            ),
+          }))}
+        ></ha-select>
      </ha-md-list-item>

      ${this._preset === RetentionPreset.CUSTOM
@@ -159,35 +152,39 @@ class HaBackupConfigRetention extends LitElement {
                step="1"
              >
              </ha-md-textfield>
-              <ha-md-select
+              <ha-select
                slot="end"
-                @change=${this._retentionTypeChanged}
+                @selected=${this._retentionTypeChanged}
                .value=${this._type}
                id="type"
-              >
-                <ha-md-select-option value="days">
-                  <div slot="headline">
-                    ${this.hass.localize(
+                .options=${[
+                  {
+                    value: "days",
+                    label: this.hass.localize(
                      "ui.panel.config.backup.schedule.retention_units.days"
-                    )}
-                  </div>
-                </ha-md-select-option>
-                <ha-md-select-option value="copies">
-                  ${this.hass.localize(
-                    "ui.panel.config.backup.schedule.retention_units.copies"
-                  )}
-                </ha-md-select-option>
-              </ha-md-select>
-            </ha-md-list-item></ha-expansion-panel
-          > `
+                    ),
+                  },
+                  {
+                    value: "copies",
+                    label: this.hass.localize(
+                      "ui.panel.config.backup.schedule.retention_units.copies"
+                    ),
+                  },
+                ]}
+              ></ha-select> </ha-md-list-item
+          ></ha-expansion-panel> `
        : nothing}
    `;
  }

-  private _retentionPresetChanged(ev) {
-    ev.stopPropagation();
-    const target = ev.currentTarget as HaMdSelect;
-    let value = target.value as RetentionPreset;
+  private _retentionPresetChanged(
+    ev: ValueChangedEvent<RetentionPreset | undefined>
+  ) {
+    let value = ev.detail.value;
+
+    if (!value) {
+      return;
+    }

    if (
      value === RetentionPreset.CUSTOM &&
@@ -211,7 +208,7 @@ class HaBackupConfigRetention extends LitElement {

  private _retentionValueChanged(ev) {
    ev.stopPropagation();
-    const target = ev.currentTarget as HaMdSelect;
+    const target = ev.currentTarget as HaMdTextfield;
    const value = parseInt(target.value);
    const clamped = clamp(value, MIN_VALUE, MAX_VALUE);
    target.value = clamped.toString();
@@ -226,10 +223,15 @@ class HaBackupConfigRetention extends LitElement {
    });
  }

-  private _retentionTypeChanged(ev) {
-    ev.stopPropagation();
-    const target = ev.currentTarget as HaMdSelect;
-    const type = target.value as "copies" | "days";
+  private _retentionTypeChanged(
+    ev: ValueChangedEvent<"copies" | "days" | undefined>
+  ) {
+    const type = ev.detail.value;
+    if (!type) {
+      return;
+    }
+
+    this._type = type;

    const value = this._customValueField?.value;

@@ -247,17 +249,19 @@ class HaBackupConfigRetention extends LitElement {
      --md-list-item-leading-space: 0;
      --md-list-item-trailing-space: 0;
    }
+    ha-select {
+      min-width: 210px;
+    }
    @media all and (max-width: 450px) {
-      ha-md-select {
+      ha-select {
        min-width: 160px;
        width: 160px;
-        --md-filled-field-content-space: 0;
      }
    }
    ha-md-textfield#value {
      min-width: 70px;
    }
-    ha-md-select#type {
+    ha-select#type {
      min-width: 100px;
    }
    @media all and (max-width: 450px) {
@@ -265,7 +269,7 @@ class HaBackupConfigRetention extends LitElement {
        min-width: 60px;
        margin: 0 -8px;
      }
-      ha-md-select#type {
+      ha-select#type {
        min-width: 120px;
        width: 120px;
      }
--- a/src/panels/config/backup/components/config/ha-backup-config-schedule.ts
+++ b/src/panels/config/backup/components/config/ha-backup-config-schedule.ts
@@ -9,10 +9,8 @@ import "../../../../../components/ha-expansion-panel";
 import "../../../../../components/ha-formfield";
 import "../../../../../components/ha-md-list";
 import "../../../../../components/ha-md-list-item";
-import "../../../../../components/ha-md-select";
-import type { HaMdSelect } from "../../../../../components/ha-md-select";
-import "../../../../../components/ha-md-select-option";
 import "../../../../../components/ha-md-textfield";
+import "../../../../../components/ha-select";
 import "../../../../../components/ha-time-input";
 import "../../../../../components/ha-tip";
 import type {
@@ -133,23 +131,17 @@ class HaBackupConfigSchedule extends LitElement {
            )}
          </span>

-          <ha-md-select
+          <ha-select
            slot="end"
-            @change=${this._scheduleChanged}
+            @selected=${this._scheduleChanged}
            .value=${data.recurrence}
-          >
-            ${SCHEDULE_OPTIONS.map(
-              (option) => html`
-                <ha-md-select-option .value=${option}>
-                  <div slot="headline">
-                    ${this.hass.localize(
-                      `ui.panel.config.backup.schedule.schedule_options.${option}`
-                    )}
-                  </div>
-                </ha-md-select-option>
-              `
-            )}
-          </ha-md-select>
+            .options=${SCHEDULE_OPTIONS.map((option) => ({
+              value: option,
+              label: this.hass.localize(
+                `ui.panel.config.backup.schedule.schedule_options.${option}`
+              ),
+            }))}
+          ></ha-select>
        </ha-md-list-item>
        ${data.recurrence === BackupScheduleRecurrence.CUSTOM_DAYS
          ? html`<ha-expansion-panel
@@ -215,23 +207,17 @@ class HaBackupConfigSchedule extends LitElement {
                  )}
                </span>

-                <ha-md-select
+                <ha-select
                  slot="end"
-                  @change=${this._scheduleTimeChanged}
+                  @selected=${this._scheduleTimeChanged}
                  .value=${data.time_option}
-                >
-                  ${SCHEDULE_TIME_OPTIONS.map(
-                    (option) => html`
-                      <ha-md-select-option .value=${option}>
-                        <div slot="headline">
-                          ${this.hass.localize(
-                            `ui.panel.config.backup.schedule.time_options.${option}`
-                          )}
-                        </div>
-                      </ha-md-select-option>
-                    `
-                  )}
-                </ha-md-select>
+                  .options=${SCHEDULE_TIME_OPTIONS.map((option) => ({
+                    value: option,
+                    label: this.hass.localize(
+                      `ui.panel.config.backup.schedule.time_options.${option}`
+                    ),
+                  }))}
+                ></ha-select>
              </ha-md-list-item>
              ${data.time_option === BackupScheduleTime.CUSTOM
                ? html`<ha-expansion-panel
@@ -284,27 +270,26 @@ class HaBackupConfigSchedule extends LitElement {
                    `ui.panel.config.backup.schedule.update_preference.supporting_text`
                  )}
                </span>
-                <ha-md-select
+                <ha-select
                  slot="end"
-                  @change=${this._updatePreferenceChanged}
+                  @selected=${this._updatePreferenceChanged}
                  .value=${this.supervisorUpdateConfig?.core_backup_before_update?.toString() ||
                  "false"}
-                >
-                  <ha-md-select-option value="false">
-                    <div slot="headline">
-                      ${this.hass.localize(
-                        "ui.panel.config.backup.schedule.update_preference.skip_backups"
-                      )}
-                    </div>
-                  </ha-md-select-option>
-                  <ha-md-select-option value="true">
-                    <div slot="headline">
-                      ${this.hass.localize(
-                        "ui.panel.config.backup.schedule.update_preference.backup_before_update"
-                      )}
-                    </div>
-                  </ha-md-select-option>
-                </ha-md-select>
+                  .options=${[
+                    {
+                      value: "false",
+                      label: this.hass.localize(
+                        `ui.panel.config.backup.schedule.update_preference.skip_backups`
+                      ),
+                    },
+                    {
+                      value: "true",
+                      label: this.hass.localize(
+                        `ui.panel.config.backup.schedule.update_preference.backup_before_update`
+                      ),
+                    },
+                  ]}
+                ></ha-select>
              </ha-md-list-item>
            `
          : nothing}
@@ -331,14 +316,13 @@ class HaBackupConfigSchedule extends LitElement {
    `;
  }

-  private _scheduleChanged(ev) {
-    ev.stopPropagation();
-    const target = ev.currentTarget as HaMdSelect;
+  private _scheduleChanged(ev: ValueChangedEvent<BackupScheduleRecurrence>) {
+    const value = ev.detail.value;
    const data = this._getData(this.value);
    let days = [...data.days];

    if (
-      target.value === BackupScheduleRecurrence.CUSTOM_DAYS &&
+      value === BackupScheduleRecurrence.CUSTOM_DAYS &&
      data.days.length === 0
    ) {
      days = [...BACKUP_DAYS];
@@ -346,19 +330,19 @@ class HaBackupConfigSchedule extends LitElement {

    this._setData({
      ...data,
-      recurrence: target.value as BackupScheduleRecurrence,
+      recurrence: value,
      days,
    });
  }

-  private _scheduleTimeChanged(ev) {
-    ev.stopPropagation();
-    const target = ev.currentTarget as HaMdSelect;
+  private _scheduleTimeChanged(ev: ValueChangedEvent<BackupScheduleTime>) {
+    const value = ev.detail.value;
+
    const data = this._getData(this.value);
    this._setData({
      ...data,
-      time_option: target.value as BackupScheduleTime,
-      time: target.value === BackupScheduleTime.CUSTOM ? "04:45:00" : undefined,
+      time_option: value,
+      time: value === BackupScheduleTime.CUSTOM ? "04:45:00" : undefined,
    });
  }

@@ -394,10 +378,8 @@ class HaBackupConfigSchedule extends LitElement {
    });
  }

-  private _updatePreferenceChanged(ev) {
-    ev.stopPropagation();
-    const target = ev.currentTarget as HaMdSelect;
-    const core_backup_before_update = target.value === "true";
+  private _updatePreferenceChanged(ev: ValueChangedEvent<"true" | "false">) {
+    const core_backup_before_update = ev.detail.value === "true";
    fireEvent(this, "update-config-changed", {
      value: {
        core_backup_before_update,
@@ -428,7 +410,7 @@ class HaBackupConfigSchedule extends LitElement {
    ha-md-list-item {
      --md-item-overflow: visible;
    }
-    ha-md-select {
+    ha-select {
      min-width: 210px;
    }
    ha-time-input {
@@ -436,10 +418,9 @@ class HaBackupConfigSchedule extends LitElement {
      --time-input-flex: 1;
    }
    @media all and (max-width: 450px) {
-      ha-md-select {
+      ha-select {
        min-width: 160px;
        width: 160px;
-        --md-filled-field-content-space: 0;
      }
      ha-time-input {
        min-width: 145px;
--- a/src/panels/config/backup/dialogs/dialog-generate-backup.ts
+++ b/src/panels/config/backup/dialogs/dialog-generate-backup.ts
@@ -6,17 +6,16 @@ import { isComponentLoaded } from "../../../../common/config/is_component_loaded
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-button";
+import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-dialog-header";
 import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-icon-button";
-import "../../../../components/ha-dialog-footer";
 import "../../../../components/ha-icon-button-prev";
-import "../../../../components/ha-wa-dialog";
 import "../../../../components/ha-md-list";
 import "../../../../components/ha-md-list-item";
-import "../../../../components/ha-md-select";
-import "../../../../components/ha-md-select-option";
+import "../../../../components/ha-select";
 import "../../../../components/ha-textfield";
+import "../../../../components/ha-wa-dialog";
 import type {
  BackupAgent,
  BackupConfig,
@@ -30,7 +29,7 @@ import {
 } from "../../../../data/backup";
 import type { HassDialog } from "../../../../dialogs/make-dialog-manager";
 import { haStyle, haStyleDialog } from "../../../../resources/styles";
-import type { HomeAssistant } from "../../../../types";
+import type { HomeAssistant, ValueChangedEvent } from "../../../../types";
 import "../components/config/ha-backup-config-data";
 import type { BackupConfigData } from "../components/config/ha-backup-config-data";
 import "../components/ha-backup-agents-picker";
@@ -312,31 +311,27 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
              "ui.panel.config.backup.dialogs.generate.sync.locations_description"
            )}
          </span>
-          <ha-md-select
+          <ha-select
            slot="end"
-            id="agents_mode"
-            @change=${this._selectChanged}
+            @selected=${this._selectChanged}
            .value=${this._formData.agents_mode}
-          >
-            <ha-md-select-option
-              value="all"
-              .disabled=${disabledAgentIds.length}
-            >
-              <div slot="headline">
-                ${this.hass.localize(
+            .options=${[
+              {
+                value: "all",
+                label: this.hass.localize(
                  "ui.panel.config.backup.dialogs.generate.sync.locations_options.all",
                  { count: this._allAgentIds.length }
-                )}
-              </div>
-            </ha-md-select-option>
-            <ha-md-select-option value="custom">
-              <div slot="headline">
-                ${this.hass.localize(
+                ),
+                disabled: !!disabledAgentIds.length,
+              },
+              {
+                value: "custom",
+                label: this.hass.localize(
                  "ui.panel.config.backup.dialogs.generate.sync.locations_options.custom"
-                )}
-              </div>
-            </ha-md-select-option>
-          </ha-md-select>
+                ),
+              },
+            ]}
+          ></ha-select>
        </ha-md-list-item>
      </ha-md-list>
      ${disabledAgentIds.length
@@ -375,11 +370,11 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
    `;
  }

-  private _selectChanged(ev) {
-    const select = ev.currentTarget;
+  private _selectChanged(ev: ValueChangedEvent<"custom" | "all">) {
+    const value = ev.detail.value;
    this._formData = {
      ...this._formData!,
-      [select.id]: select.value,
+      agents_mode: value,
    };
  }

@@ -459,25 +454,20 @@ class DialogGenerateBackup extends LitElement implements HassDialog {
          --md-list-item-leading-space: 0;
          --md-list-item-trailing-space: 0;
        }
-        ha-md-list-item ha-md-select {
+        ha-md-list-item ha-select {
          min-width: 210px;
        }
        @media all and (max-width: 450px) {
-          ha-md-list-item ha-md-select {
+          ha-md-list-item ha-select {
            min-width: 160px;
            width: 160px;
          }
        }
-        ha-md-list-item ha-md-select > span {
+        ha-md-list-item ha-select > span {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
-        ha-md-list-item ha-md-select-option {
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          overflow: hidden;
-        }
        ha-textfield {
          width: 100%;
        }
--- a/src/panels/config/logs/dialog-download-logs.ts
+++ b/src/panels/config/logs/dialog-download-logs.ts
@@ -4,13 +4,12 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-button";
 import "../../../components/ha-dialog-footer";
-import "../../../components/ha-md-select";
-import "../../../components/ha-md-select-option";
+import "../../../components/ha-select";
 import "../../../components/ha-wa-dialog";
 import { getSignedPath } from "../../../data/auth";
 import { getHassioLogDownloadLinesUrl } from "../../../data/hassio/supervisor";
 import { haStyle, haStyleDialog } from "../../../resources/styles";
-import type { HomeAssistant } from "../../../types";
+import type { HomeAssistant, ValueChangedEvent } from "../../../types";
 import { fileDownload } from "../../../util/file_download";
 import type { DownloadLogsDialogParams } from "./show-dialog-download-logs";

@@ -81,19 +80,12 @@ class DownloadLogsDialog extends LitElement {
              "ui.panel.config.logs.select_number_of_lines"
            )}:
          </div>
-          <ha-md-select
+          <ha-select
            .label=${this.hass.localize("ui.panel.config.logs.lines")}
-            @change=${this._setNumberOfLogs}
+            @selected=${this._setNumberOfLogs}
            .value=${String(this._lineCount)}
-          >
-            ${numberOfLinesOptions.map(
-              (option) => html`
-                <ha-md-select-option .value=${String(option)}>
-                  ${option}
-                </ha-md-select-option>
-              `
-            )}
-          </ha-md-select>
+            .options=${numberOfLinesOptions.map((option) => String(option))}
+          ></ha-select>
        </div>
        <ha-dialog-footer slot="footer">
          <ha-button
@@ -130,8 +122,8 @@ class DownloadLogsDialog extends LitElement {
    this.closeDialog();
  }

-  private _setNumberOfLogs(ev) {
-    this._lineCount = Number(ev.target.value);
+  private _setNumberOfLogs(ev: ValueChangedEvent<string>) {
+    this._lineCount = Number(ev.detail.value);
  }

  static get styles(): CSSResultGroup {
@@ -148,6 +140,9 @@ class DownloadLogsDialog extends LitElement {
          align-items: center;
          gap: var(--ha-space-2);
        }
+        ha-select {
+          width: 100%;
+        }
      `,
    ];
  }
--- a/src/panels/lovelace/editor/select-dashboard/hui-dialog-select-dashboard.ts
+++ b/src/panels/lovelace/editor/select-dashboard/hui-dialog-select-dashboard.ts
@@ -4,18 +4,17 @@ import { customElement, state } from "lit/decorators";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-button";
 import "../../../../components/ha-dialog-footer";
-import "../../../../components/ha-wa-dialog";
-import "../../../../components/ha-md-select";
-import "../../../../components/ha-md-select-option";
+import "../../../../components/ha-select";
 import "../../../../components/ha-spinner";
+import "../../../../components/ha-wa-dialog";
 import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
 import type { LovelaceDashboard } from "../../../../data/lovelace/dashboard";
 import { fetchDashboards } from "../../../../data/lovelace/dashboard";
 import { getDefaultPanelUrlPath } from "../../../../data/panel";
-import { haStyleDialog } from "../../../../resources/styles";
-import type { HomeAssistant } from "../../../../types";
-import type { SelectDashboardDialogParams } from "./show-select-dashboard-dialog";
 import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
+import { haStyleDialog } from "../../../../resources/styles";
+import type { HomeAssistant, ValueChangedEvent } from "../../../../types";
+import type { SelectDashboardDialogParams } from "./show-select-dashboard-dialog";

@customElement("hui-dialog-select-dashboard")
 export class HuiDialogSelectDashboard extends LitElement {
@@ -77,26 +76,22 @@ export class HuiDialogSelectDashboard extends LitElement {
      >
        ${this._dashboards && !this._saving
          ? html`
-              <ha-md-select
+              <ha-select
                .label=${this.hass.localize(
                  "ui.panel.lovelace.editor.select_view.dashboard_label"
                )}
-                @change=${this._dashboardChanged}
+                @selected=${this._dashboardChanged}
                .value=${this._toUrlPath || ""}
-              >
-                ${this._dashboards.map(
-                  (dashboard) => html`
-                    <ha-md-select-option
-                      .disabled=${dashboard.mode !== "storage" ||
-                      dashboard.url_path === this._fromUrlPath ||
-                      (dashboard.url_path === "lovelace" &&
-                        this._fromUrlPath === null)}
-                      .value=${dashboard.url_path}
-                      >${dashboard.title}</ha-md-select-option
-                    >
-                  `
-                )}
-              </ha-md-select>
+                .options=${this._dashboards.map((dashboard) => ({
+                  value: dashboard.url_path,
+                  label: dashboard.title,
+                  disabled:
+                    dashboard.mode !== "storage" ||
+                    dashboard.url_path === this._fromUrlPath ||
+                    (dashboard.url_path === "lovelace" &&
+                      this._fromUrlPath === null),
+                }))}
+              ></ha-select>
            `
          : html`<div class="loading">
              <ha-spinner size="medium"></ha-spinner>
@@ -167,8 +162,8 @@ export class HuiDialogSelectDashboard extends LitElement {
    }
  }

-  private async _dashboardChanged(ev) {
-    const urlPath: string = ev.target.value;
+  private async _dashboardChanged(ev: ValueChangedEvent<string>) {
+    const urlPath = ev.detail.value;
    if (urlPath === this._toUrlPath) {
      return;
    }
@@ -188,7 +183,7 @@ export class HuiDialogSelectDashboard extends LitElement {
    return [
      haStyleDialog,
      css`
-        ha-md-select {
+        ha-select {
          width: 100%;
        }
        .loading {