Migrate select in md-dialog to md-select (#22670)

* Migrate select in md-dialog to md-select

* Fix md-select in es5 md-dialogs

---------

Co-authored-by: Wendelin <w@pe8.at>

src/components/ha-md-dialog.ts

@@ -182,6 +182,10 @@ export class HaMdDialog extends MdDialog {
         display: contents;
       }
 
+      .scroller {
+        overflow: var(--dialog-content-overflow, auto);
+      }
+
       slot[name="content"]::slotted(*) {
         padding: var(--dialog-content-padding, 24px);
       }

src/components/ha-md-select-option.ts

@@ -0,0 +1,26 @@
+import { MdSelectOption } from "@material/web/select/select-option";
+import { css } from "lit";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-md-select-option")
+export class HaMdSelectOption extends MdSelectOption {
+  static override styles = [
+    ...super.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;
+  }
+}

src/components/ha-md-select.ts

@@ -0,0 +1,32 @@
+import { MdFilledSelect } from "@material/web/select/filled-select";
+import { css } from "lit";
+import { customElement } from "lit/decorators";
+
+@customElement("ha-md-select")
+export class HaMdSelect extends MdFilledSelect {
+  static override styles = [
+    ...super.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-secondary-container: var(--input-fill-color);
+        --md-menu-container-color: var(--card-background-color);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-md-select": HaMdSelect;
+  }
+}

src/panels/config/logs/dialog-download-logs.ts

@@ -2,21 +2,20 @@ import { mdiClose } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
-import "../../../components/ha-md-dialog";
+import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-button";
 import "../../../components/ha-dialog-header";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-md-dialog";
 import type { HaMdDialog } from "../../../components/ha-md-dialog";
-import type { HomeAssistant } from "../../../types";
-import { haStyle, haStyleDialog } from "../../../resources/styles";
-import { fireEvent } from "../../../common/dom/fire_event";
-import type { DownloadLogsDialogParams } from "./show-dialog-download-logs";
-import "../../../components/ha-select";
-import "../../../components/ha-list-item";
-import { stopPropagation } from "../../../common/dom/stop_propagation";
-import { getHassioLogDownloadLinesUrl } from "../../../data/hassio/supervisor";
+import "../../../components/ha-md-select";
+import "../../../components/ha-md-select-option";
 import { getSignedPath } from "../../../data/auth";
+import { getHassioLogDownloadLinesUrl } from "../../../data/hassio/supervisor";
+import { haStyle, haStyleDialog } from "../../../resources/styles";
+import type { HomeAssistant } from "../../../types";
 import { fileDownload } from "../../../util/file_download";
+import type { DownloadLogsDialogParams } from "./show-dialog-download-logs";
 
 @customElement("dialog-download-logs")
 class DownloadLogsDialog extends LitElement {
@@ -78,22 +77,19 @@ class DownloadLogsDialog extends LitElement {
               "ui.panel.config.logs.select_number_of_lines"
             )}:
           </div>
-          <ha-select
+          <ha-md-select
             .label=${this.hass.localize("ui.panel.config.logs.lines")}
-            @selected=${this._setNumberOfLogs}
-            fixedMenuPosition
-            naturalMenuWidth
-            @closed=${stopPropagation}
+            @change=${this._setNumberOfLogs}
             .value=${String(this._lineCount)}
           >
             ${numberOfLinesOptions.map(
               (option) => html`
-                <ha-list-item .value=${String(option)}>
+                <ha-md-select-option .value=${String(option)}>
                   ${option}
-                </ha-list-item>
+                </ha-md-select-option>
               `
             )}
-          </ha-select>
+          </ha-md-select>
         </div>
         <div slot="actions">
           <ha-button @click=${this.closeDialog}>
@@ -137,6 +133,7 @@ class DownloadLogsDialog extends LitElement {
       css`
         :host {
           direction: var(--direction);
+          --dialog-content-overflow: visible;
         }
         .content {
           display: flex;