@api-client/ui 0.5.29 → 0.5.31

package/build/src/md/select/internals/Select.d.ts

@@ -253,9 +253,10 @@ export default class UiSelect extends LitElement {
         item: UiOption | null;
     }>): void;
     handleMenuClose(): void;
-    render(): TemplateResult;
     protected renderInput(): TemplateResult;
     protected renderMenu(): TemplateResult;
+    protected handleSlotChange(): Promise<void>;
     protected renderFocusRing(): TemplateResult;
+    render(): TemplateResult;
 }
 //# sourceMappingURL=Select.d.ts.map

package/build/src/md/select/internals/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/md/select/internals/Select.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/md/select/internals/Select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,UAAU,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAA;AAKtE,OAAO,KAAK,QAAQ,MAAM,aAAa,CAAA;AACvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAG1D,OAAO,4CAA4C,CAAA;AACnD,OAAO,uBAAuB,CAAA;AAC9B,OAAO,wBAAwB,CAAA;AAC/B,OAAO,sCAAsC,CAAA;AAE7C,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;IACzB,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAA;CACtB;AAED;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,UAAU;;IAC9C,MAAM,CAAC,QAAQ,CAAC,cAAc,QAAO;IASrC;;;;;;;;;;;;OAYG;IACH,IAAI,KAAK,IAAI,MAAM,GAAG,SAAS,CAE9B;IAED,IACI,KAAK,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,EAKrC;IAED;;;;;;;;;;;OAWG;IACyB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,CAAA;IAE7D;;;;;;;;;;;OAWG;IACyB,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,CAAA;IAE9D;;;;;;;;;;;OAWG;IAC0B,QAAQ,CAAC,QAAQ,UAAQ;IAEtD;;;;;;;;;;;OAWG;IAC0B,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,CAAA;IAElE;;;;;;;;;;;OAWG;IACyB,QAAQ,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAA;IAEpE;;OAEG;IACyB,QAAQ,CAAC,cAAc,EAAE,MAAM,GAAG,SAAS,CAAA;IAEvE;;;;;;;;;;;;OAYG;IACyC,QAAQ,CAAC,QAAQ,UAAQ;IAErE;;;;;;;;;;;;;OAaG;IACyC,QAAQ,CAAC,IAAI,UAAQ;IAExD,QAAQ,CAAC,cAAc,EAAE,QAAQ,GAAG,IAAI,CAAO;IAC/C,QAAQ,CAAC,oBAAoB,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1C,QAAQ,CAAC,IAAI,EAAG,aAAa,CAAA;IAE7C;;;;;;;;;;;;;OAaG;IACH,IAAI,YAAY,IAAI,QAAQ,GAAG,IAAI,CAElC;IAED;;;;;;;;;;OAUG;IACH,IAAI,WAAW,IAAI,MAAM,CAGxB;IAED;;;;;OAKG;IACH,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED;;;;;OAKG;IACH,IAAI,QAAQ,IAAI,aAAa,CAE5B;IAED;;;;;OAKG;IACH,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAED;;;;;OAKG;IACH,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED;;;;;;;;;;;;OAYG;IACH,aAAa,IAAI,OAAO;;IAWf,iBAAiB,IAAI,IAAI;IAalC;;;;;;;;;OASG;IACH,iBAAiB,IAAI,IAAI;IAIzB;;;;;OAKG;IACH,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAIpD;;;;;;;;;;;;OAYG;IACH,QAAQ,IAAI,IAAI;cAYG,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAsBzD,YAAY,CAAC,EAAE,EAAE,cAAc,GAAG,IAAI;cAMzC,gBAAgB,IAAI,OAAO,CAAC,IAAI,CAAC;IAgBjD,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,aAAa,GAAG,IAAI;IAkE/C,SAAS,CAAC,UAAU,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAezC,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;cAOrB,gBAAgB,IAAI,OAAO,CAAC,IAAI,CAAC;IAuBjD,YAAY,CAAC,CAAC,EAAE,WAAW,CAAC;QAAE,IAAI,EAAE,QAAQ,CAAA;KAAE,CAAC,GAAG,IAAI;IAiBtD,qBAAqB,CAAC,CAAC,EAAE,WAAW,CAAC;QAAE,IAAI,EAAE,QAAQ,GAAG,IAAI,CAAA;KAAE,CAAC,GAAG,IAAI;IAItE,eAAe,IAAI,IAAI;IAKvB,SAAS,CAAC,WAAW,IAAI,cAAc;IAyBvC,SAAS,CAAC,UAAU,IAAI,cAAc;cAmBtB,gBAAgB,IAAI,OAAO,CAAC,IAAI,CAAC;IASjD,SAAS,CAAC,eAAe,IAAI,cAAc;IAIlC,MAAM,IAAI,cAAc;CAWlC"}

package/build/src/md/select/internals/Select.js

@@ -2,7 +2,9 @@ import { __esDecorate, __runInitializers } from "tslib";
 import { html, LitElement } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { setDisabled } from '../../../lib/disabled.js';
+import { nanoid } from 'nanoid';
 import '../../text-field/ui-outlined-text-field.js';
 import '../../menu/ui-menu.js';
 import '../../icons/ui-icon.js';
@@ -353,6 +355,9 @@ let UiSelect = (() => {
             if (!this.disabled) {
                 this.setAttribute('tabindex', '0');
             }
+            if (!this.id) {
+                this.id = `select-${nanoid(6)}`;
+            }
         }
         /**
          * Resets the select to its initial state. Called automatically when the parent
@@ -430,12 +435,19 @@ let UiSelect = (() => {
         }
         async setCurrentOption() {
             await this.updateComplete;
+            const options = this.querySelectorAll('ui-option');
             if (this.value) {
-                const options = this.querySelectorAll('ui-option');
                 this.selectedOption = Array.from(options).find((option) => option.value === this.value) || null;
             }
             else {
-                this.selectedOption = null;
+                const selected = Array.from(options).find((option) => option.selected);
+                if (selected) {
+                    this.selectedOption = selected;
+                    this.#value = selected.value;
+                }
+                else {
+                    this.selectedOption = null;
+                }
             }
         }
         handleKeydown(e) {
@@ -570,18 +582,10 @@ let UiSelect = (() => {
             this.open = false;
             this.focus();
         }
-        render() {
-            const classes = classMap({
-                'ui-select': true,
-                'open': this.open,
-                'disabled': this.disabled,
-            });
-            return html `${this.renderFocusRing()}
-      <div class="${classes}" aria-activedescendant=${this.ariaActiveDescendant || ''}>
-        ${this.renderInput()} ${this.renderMenu()}
-      </div> `;
-        }
         renderInput() {
+            const styles = {
+                'anchor-name': `--${this.id}`,
+            };
             return html `<ui-outlined-text-field
       .name=${this.name}
       .label=${this.label}
@@ -590,32 +594,58 @@ let UiSelect = (() => {
       .required=${this.required}
       readonly
       tabindex="-1"
-      inert
+      .inert=${true}
       aria-hidden="true"
       .invalid=${this.invalid}
       .invalidText=${this.invalidText || ''}
       .supportingText=${this.supportingText || ''}
       class="input"
+      style=${styleMap(styles)}
+      part="input"
     >
-      <ui-icon slot="suffix">arrow_drop_down</ui-icon>
+      <ui-icon part="icon" slot="suffix">arrow_drop_down</ui-icon>
     </ui-outlined-text-field>`;
         }
         renderMenu() {
+            const styles = {
+                'position-anchor': `--${this.id}`,
+            };
             return html `<ui-menu
       id="menu"
       class="menu"
+      part="menu"
+      style=${styleMap(styles)}
       popover="auto"
       selector="ui-option"
       @select="${this.handleSelect}"
       @close="${this.handleMenuClose}"
       @highlightchange="${this.handleHighlightChange}"
     >
-      <slot></slot>
+      <slot @slotchange="${this.handleSlotChange}"></slot>
     </ui-menu>`;
         }
+        async handleSlotChange() {
+            // When options change, re-evaluate the current selection
+            // only if we don't have an explicit value set
+            if (!this.value) {
+                await this.setCurrentOption();
+                this.requestUpdate();
+            }
+        }
         renderFocusRing() {
             return html `<md-focus-ring part="focus-ring" class="focus-ring" .control="${this}"></md-focus-ring>`;
         }
+        render() {
+            const classes = classMap({
+                'ui-select': true,
+                'open': this.open,
+                'disabled': this.disabled,
+            });
+            return html `${this.renderFocusRing()}
+      <div class="${classes}" aria-activedescendant=${this.ariaActiveDescendant || ''}>
+        ${this.renderInput()} ${this.renderMenu()}
+      </div> `;
+        }
     };
 })();
 /**

package/build/src/md/select/internals/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../../src/md/select/internals/Select.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { setDisabled } from '../../../lib/disabled.js'\nimport type UiOption from './Option.js'\nimport type { UiMenuElement } from '../../menu/ui-menu.js'\n\nimport '../../text-field/ui-outlined-text-field.js'\nimport '../../menu/ui-menu.js'\nimport '../../icons/ui-icon.js'\nimport '@material/web/focus/md-focus-ring.js'\n\nexport interface UiSelectChangeEvent {\n  value: string | undefined\n  item: UiOption | null\n}\n\n/**\n * Material Design 3 Select component that behaves like an outlined text field with dropdown.\n *\n * @fires change - Dispatched when the selection changes. The event is non-bubbling and non-cancelable.\n *                 The `event.detail` object contains the `value` and `item` properties.\n * @fires open - Dispatched when the dropdown opens\n * @fires close - Dispatched when the dropdown closes\n */\nexport default class UiSelect extends LitElement {\n  static readonly formAssociated = true\n  #internals = this.attachInternals()\n\n  /**\n   * The value has a private member so that we can set the value without triggering\n   * the side effects.\n   */\n  #value: string | undefined\n\n  /**\n   * The currently selected value. Corresponds to the `value` attribute of the selected `ui-option`.\n   * When set programmatically, it will update the selected option if a matching option exists.\n   *\n   * @attribute\n   * @example\n   * ```html\n   * <ui-select value=\"apple\">\n   *   <ui-option value=\"apple\">Apple</ui-option>\n   *   <ui-option value=\"banana\">Banana</ui-option>\n   * </ui-select>\n   * ```\n   */\n  get value(): string | undefined {\n    return this.#value\n  }\n\n  @property({ type: String })\n  set value(newValue: string | undefined) {\n    const oldValue = this.#value\n    if (newValue === oldValue) return\n    this.#value = newValue\n    this.requestUpdate()\n  }\n\n  /**\n   * The name attribute for form submission. This value will be used as the key\n   * when the form is submitted.\n   *\n   * @attribute\n   * @example\n   * ```html\n   * <ui-select name=\"country\" value=\"us\">\n   *   <ui-option value=\"us\">United States</ui-option>\n   * </ui-select>\n   * ```\n   */\n  @property({ type: String }) accessor name: string | undefined\n\n  /**\n   * The label text displayed in the select field. Provides accessible labeling\n   * and is shown as the floating label in the outlined text field.\n   *\n   * @attribute\n   * @example\n   * ```html\n   * <ui-select label=\"Select a country\">\n   *   <ui-option value=\"us\">United States</ui-option>\n   * </ui-select>\n   * ```\n   */\n  @property({ type: String }) accessor label: string | undefined\n\n  /**\n   * Whether the select is required for form validation. When true, the select\n   * must have a value selected for the form to be valid.\n   *\n   * @attribute\n   * @example\n   * ```html\n   * <ui-select required label=\"Required field\">\n   *   <ui-option value=\"option1\">Option 1</ui-option>\n   * </ui-select>\n   * ```\n   */\n  @property({ type: Boolean }) accessor required = false\n\n  /**\n   * Whether the select is in an invalid state. This is typically set automatically\n   * during validation, but can be set manually to indicate validation errors.\n   *\n   * @attribute\n   * @example\n   * ```html\n   * <ui-select invalid invalidText=\"Please select a valid option\">\n   *   <ui-option value=\"option1\">Option 1</ui-option>\n   * </ui-select>\n   * ```\n   */\n  @property({ type: Boolean }) accessor invalid: boolean | undefined\n\n  /**\n   * The error message to display when the select is invalid. This text is shown\n   * below the select field when `invalid` is true.\n   *\n   * @attribute\n   * @example\n   * ```html\n   * <ui-select invalid invalidText=\"This field is required\">\n   *   <ui-option value=\"option1\">Option 1</ui-option>\n   * </ui-select>\n   * ```\n   */\n  @property({ type: String }) accessor invalidText: string | undefined\n\n  /**\n   * @attribute\n   */\n  @property({ type: String }) accessor supportingText: string | undefined\n\n  /**\n   * Whether the select is disabled. When disabled, the select cannot be interacted\n   * with and will not receive focus or respond to user input.\n   *\n   * @default false\n   * @attribute\n   * @example\n   * ```html\n   * <ui-select disabled label=\"Disabled select\">\n   *   <ui-option value=\"option1\">Option 1</ui-option>\n   * </ui-select>\n   * ```\n   */\n  @property({ type: Boolean, reflect: true }) accessor disabled = false\n\n  /**\n   * Whether the dropdown menu is currently open. This property reflects the\n   * current state of the dropdown and can be set programmatically to open/close it.\n   *\n   * @default false\n   * @example\n   * ```javascript\n   * // Open the dropdown programmatically\n   * selectElement.open = true;\n   *\n   * // Close the dropdown\n   * selectElement.open = false;\n   * ```\n   */\n  @property({ type: Boolean, reflect: true }) accessor open = false\n\n  @state() accessor selectedOption: UiOption | null = null\n  @state() accessor ariaActiveDescendant: string | undefined\n  @query('.menu') accessor menu!: UiMenuElement\n\n  /**\n   * Returns the currently selected option element. This provides access to the\n   * full `ui-option` element, not just its value.\n   *\n   * @readonly\n   * @example\n   * ```javascript\n   * const select = document.querySelector('ui-select');\n   * const selectedItem = select.selectedItem;\n   * if (selectedItem) {\n   *   console.log('Selected option:', selectedItem.textContent);\n   * }\n   * ```\n   */\n  get selectedItem(): UiOption | null {\n    return this.selectedOption\n  }\n\n  /**\n   * Returns the text content that should be displayed in the select field.\n   * This is the rendered value of the currently selected option.\n   *\n   * @readonly\n   * @example\n   * ```javascript\n   * const select = document.querySelector('ui-select');\n   * console.log('Display text:', select.renderValue);\n   * ```\n   */\n  get renderValue(): string {\n    const item = this.selectedOption\n    return item ? item.renderValue : ''\n  }\n\n  /**\n   * Returns the form element that contains this select, if any.\n   * Part of the form-associated custom element API.\n   *\n   * @readonly\n   */\n  get form(): HTMLFormElement | null {\n    return this.#internals.form\n  }\n\n  /**\n   * Returns the validity state of the select element.\n   * Part of the form-associated custom element API.\n   *\n   * @readonly\n   */\n  get validity(): ValidityState {\n    return this.#internals.validity\n  }\n\n  /**\n   * Returns the validation message for the select element.\n   * Part of the form-associated custom element API.\n   *\n   * @readonly\n   */\n  get validationMessage(): string {\n    return this.#internals.validationMessage\n  }\n\n  /**\n   * Returns whether the select element will be validated when the form is submitted.\n   * Part of the form-associated custom element API.\n   *\n   * @readonly\n   */\n  get willValidate(): boolean {\n    return this.#internals.willValidate\n  }\n\n  /**\n   * Checks the validity of the select element and returns true if valid.\n   * Part of the form-associated custom element API.\n   *\n   * @returns {boolean} True if the element is valid, false otherwise\n   * @example\n   * ```javascript\n   * const select = document.querySelector('ui-select');\n   * if (!select.checkValidity()) {\n   *   console.log('Select is invalid:', select.validationMessage);\n   * }\n   * ```\n   */\n  checkValidity(): boolean {\n    return this.#internals.checkValidity()\n  }\n\n  constructor() {\n    super()\n    this.addEventListener('click', this.handleClick.bind(this))\n    this.addEventListener('blur', this.handleBlur.bind(this))\n    this.addEventListener('keydown', this.handleKeydown.bind(this))\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.setAttribute('role', 'combobox')\n    this.setAttribute('aria-haspopup', 'listbox')\n    this.setAttribute('aria-controls', 'menu')\n    if (!this.disabled) {\n      this.setAttribute('tabindex', '0')\n    }\n  }\n\n  /**\n   * Resets the select to its initial state. Called automatically when the parent\n   * form is reset. Part of the form-associated custom element API.\n   *\n   * @example\n   * ```javascript\n   * const select = document.querySelector('ui-select');\n   * select.formResetCallback(); // Clears the selection\n   * ```\n   */\n  formResetCallback(): void {\n    this.value = undefined\n  }\n\n  /**\n   * Restores the select's state from saved form data. Called automatically when\n   * the browser restores form state. Part of the form-associated custom element API.\n   *\n   * @param {string | null} state - The saved state to restore\n   */\n  formStateRestoreCallback(state: string | null): void {\n    this.value = state ?? undefined\n  }\n\n  /**\n   * Validates the select element and updates its validity state. This is called\n   * automatically during property changes, but can be called manually to trigger validation.\n   *\n   * @example\n   * ```javascript\n   * const select = document.querySelector('ui-select');\n   * select.validate();\n   * if (select.invalid) {\n   *   console.log('Validation failed:', select.invalidText);\n   * }\n   * ```\n   */\n  validate(): void {\n    let message = ''\n    if (this.required && !this.value) {\n      message = 'Please select an item.'\n      this.#internals.setValidity({ valueMissing: true }, message)\n    } else {\n      this.#internals.setValidity({})\n    }\n    this.invalid = !this.#internals.validity.valid\n    this.invalidText = message\n  }\n\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\n    super.willUpdate(changedProperties)\n    if (changedProperties.has('disabled')) {\n      setDisabled(this, this.disabled)\n    }\n    if (changedProperties.has('open')) {\n      this.handleOpenChange()\n    }\n    if (changedProperties.has('value')) {\n      this.setCurrentOption()\n      this.#internals.setFormValue(this.value ?? null)\n      this.validate()\n    }\n    if (changedProperties.has('label')) {\n      if (this.label) {\n        this.setAttribute('aria-label', this.label)\n      } else {\n        this.removeAttribute('aria-label')\n      }\n    }\n  }\n\n  protected override firstUpdated(cp: PropertyValues): void {\n    super.firstUpdated(cp)\n    this.setCurrentOption()\n    this.#internals.setFormValue(this.value ?? null)\n  }\n\n  protected async setCurrentOption(): Promise<void> {\n    await this.updateComplete\n    if (this.value) {\n      const options = this.querySelectorAll<UiOption>('ui-option')\n      this.selectedOption = Array.from(options).find((option) => option.value === this.value) || null\n    } else {\n      this.selectedOption = null\n    }\n  }\n\n  protected handleKeydown(e: KeyboardEvent): void {\n    if (this.disabled || e.defaultPrevented) return\n    if (this.open) {\n      switch (e.key) {\n        case 'Tab': {\n          // If menu is open and Tab is pressed, close it and allow normal tab navigation\n          if (this.open) {\n            this.open = false\n          }\n          break\n        }\n        case 'Escape': {\n          if (this.open) {\n            e.preventDefault()\n            this.open = false\n            this.focus() // Return focus to the select element\n          }\n          break\n        }\n        case 'ArrowDown':\n          e.preventDefault()\n          this.menu.highlightNext()\n          return\n        case 'ArrowUp':\n          e.preventDefault()\n          this.menu.highlightPrevious()\n          return\n        case 'Home':\n          e.preventDefault()\n          this.menu.highlightFirst()\n          return\n        case 'End':\n          e.preventDefault()\n          this.menu.highlightLast()\n          return\n        case 'Enter':\n        case ' ':\n          if (this.menu.highlightListItem) {\n            e.preventDefault()\n            this.menu.notifySelect(this.menu.highlightListItem as UiOption)\n          }\n          return\n      }\n    } else {\n      switch (e.key) {\n        case 'Enter':\n        case ' ': {\n          if (!this.open) {\n            e.preventDefault()\n            this.open = true\n          }\n          break\n        }\n        case 'ArrowDown':\n        case 'ArrowUp': {\n          if (!this.open) {\n            e.preventDefault()\n            this.open = true\n          }\n          // If menu is open, let the menu handle arrow keys\n          break\n        }\n      }\n    }\n  }\n\n  protected handleBlur(e: FocusEvent): void {\n    if (this.disabled) return\n\n    // Check if focus is moving to the menu or one of its children\n    const relatedTarget = e.relatedTarget as HTMLElement\n\n    if (relatedTarget && this.contains(relatedTarget)) {\n      // Focus is moving to the menu, keep it open\n      return\n    }\n\n    // Close the menu when focus leaves the component\n    this.open = false\n  }\n\n  protected handleClick(e: Event): void {\n    if (this.disabled || e.defaultPrevented) return\n    e.preventDefault()\n    e.stopPropagation()\n    this.open = true\n  }\n\n  protected async handleOpenChange(): Promise<void> {\n    const menu = this.menu\n    if (!menu) {\n      // The status can be set before the menu is rendered\n      return\n    }\n    this.setAttribute('aria-expanded', String(this.open))\n    if (this.open) {\n      menu.showPopover()\n      // menu.focus()\n      if (this.selectedOption) {\n        this.menu.highlightItem(this.selectedOption)\n      } else {\n        this.menu.highlightFirst()\n      }\n      this.dispatchEvent(new CustomEvent('open', { bubbles: false, composed: true }))\n      this.focus()\n    } else {\n      menu.hidePopover()\n      this.dispatchEvent(new CustomEvent('close', { bubbles: false, composed: true }))\n    }\n  }\n\n  handleSelect(e: CustomEvent<{ item: UiOption }>): void {\n    e.stopPropagation()\n    const item = e.detail.item\n    this.selectedOption = item\n    this.#value = item.value\n    this.open = false\n\n    // Dispatch change event\n    const changeEvent = new CustomEvent<UiSelectChangeEvent>('change', {\n      detail: { value: this.value, item: item },\n      bubbles: false,\n      composed: true,\n    })\n    this.dispatchEvent(changeEvent)\n    this.focus()\n  }\n\n  handleHighlightChange(e: CustomEvent<{ item: UiOption | null }>): void {\n    this.ariaActiveDescendant = e.detail.item?.id\n  }\n\n  handleMenuClose(): void {\n    this.open = false\n    this.focus()\n  }\n\n  override render(): TemplateResult {\n    const classes = classMap({\n      'ui-select': true,\n      'open': this.open,\n      'disabled': this.disabled,\n    })\n    return html`${this.renderFocusRing()}\n      <div class=\"${classes}\" aria-activedescendant=${this.ariaActiveDescendant || ''}>\n        ${this.renderInput()} ${this.renderMenu()}\n      </div> `\n  }\n\n  protected renderInput(): TemplateResult {\n    return html`<ui-outlined-text-field\n      .name=${this.name}\n      .label=${this.label}\n      .value=${this.renderValue}\n      .disabled=${this.disabled}\n      .required=${this.required}\n      readonly\n      tabindex=\"-1\"\n      inert\n      aria-hidden=\"true\"\n      .invalid=${this.invalid}\n      .invalidText=${this.invalidText || ''}\n      .supportingText=${this.supportingText || ''}\n      class=\"input\"\n    >\n      <ui-icon slot=\"suffix\">arrow_drop_down</ui-icon>\n    </ui-outlined-text-field>`\n  }\n\n  protected renderMenu(): TemplateResult {\n    return html`<ui-menu\n      id=\"menu\"\n      class=\"menu\"\n      popover=\"auto\"\n      selector=\"ui-option\"\n      @select=\"${this.handleSelect}\"\n      @close=\"${this.handleMenuClose}\"\n      @highlightchange=\"${this.handleHighlightChange}\"\n    >\n      <slot></slot>\n    </ui-menu>`\n  }\n\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring part=\"focus-ring\" class=\"focus-ring\" .control=\"${this as HTMLElement}\"></md-focus-ring>`\n  }\n}\n"]}
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../../../src/md/select/internals/Select.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAkC,MAAM,KAAK,CAAA;AACtE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AAGtD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAE/B,OAAO,4CAA4C,CAAA;AACnD,OAAO,uBAAuB,CAAA;AAC9B,OAAO,wBAAwB,CAAA;AAC/B,OAAO,sCAAsC,CAAA;;sBAeP,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAA3B,QAAS,SAAQ,WAAU;;;qCA2B7C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gCAoB1B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iCAc1B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAc1B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mCAc3B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uCAc3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAK1B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAe1B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gCAgB1C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAE1C,KAAK,EAAE;gDACP,KAAK,EAAE;gCACP,KAAK,CAAC,OAAO,CAAC;YAnHf,iLAAI,KAAK,wEAKR;YAc2B,iKAAS,IAAI,6BAAJ,IAAI,mFAAoB;YAcjC,oKAAS,KAAK,6BAAL,KAAK,qFAAoB;YAcjC,6KAAS,QAAQ,6BAAR,QAAQ,2FAAQ;YAczB,0KAAS,OAAO,6BAAP,OAAO,yFAAqB;YActC,sLAAS,WAAW,6BAAX,WAAW,iGAAoB;YAKxC,+LAAS,cAAc,6BAAd,cAAc,uGAAoB;YAe3B,6KAAS,QAAQ,6BAAR,QAAQ,2FAAQ;YAgBzB,iKAAS,IAAI,6BAAJ,IAAI,mFAAQ;YAExD,+LAAS,cAAc,6BAAd,cAAc,uGAAwB;YAC/C,iNAAS,oBAAoB,6BAApB,oBAAoB,mHAAoB;YAC1C,iKAAS,IAAI,6BAAJ,IAAI,mFAAgB;;;QA9I7C,MAAM,CAAU,cAAc,GAAG,IAAI,CAAA;QACrC,UAAU,IAFS,mDAAQ,EAEd,IAAI,CAAC,eAAe,EAAE,EAAA;QAEnC;;;WAGG;QACH,MAAM,CAAoB;QAE1B;;;;;;;;;;;;WAYG;QACH,IAAI,KAAK;YACP,OAAO,IAAI,CAAC,MAAM,CAAA;QACpB,CAAC;QAGD,IAAI,KAAK,CAAC,QAA4B;YACpC,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAA;YAC5B,IAAI,QAAQ,KAAK,QAAQ;gBAAE,OAAM;YACjC,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAA;YACtB,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC;QAc2B,6EAAiC;QAZ7D;;;;;;;;;;;WAWG;QACyB,IAAS,IAAI,0CAAoB;QAAjC,IAAS,IAAI,gDAAoB;QAcjC,mIAAkC;QAZ9D;;;;;;;;;;;WAWG;QACyB,IAAS,KAAK,2CAAoB;QAAlC,IAAS,KAAK,iDAAoB;QAcjC,iIAAoB,KAAK;QAEtD;;;;;;;;;;;WAWG;WAbmD;QAZtD;;;;;;;;;;;WAWG;QAC0B,IAAS,QAAQ,8CAAQ;QAAzB,IAAS,QAAQ,oDAAQ;QAczB,2IAAqC;QAZlE;;;;;;;;;;;WAWG;QAC0B,IAAS,OAAO,6CAAqB;QAArC,IAAS,OAAO,mDAAqB;QActC,kJAAwC;QAZpE;;;;;;;;;;;WAWG;QACyB,IAAS,WAAW,iDAAoB;QAAxC,IAAS,WAAW,uDAAoB;QAKxC,4JAA2C;QAHvE;;WAEG;QACyB,IAAS,cAAc,oDAAoB;QAA3C,IAAS,cAAc,0DAAoB;QAe3B,0IAAoB,KAAK;QAErE;;;;;;;;;;;;;WAaG;WAfkE;QAbrE;;;;;;;;;;;;WAYG;QACyC,IAAS,QAAQ,8CAAQ;QAAzB,IAAS,QAAQ,oDAAQ;QAgBzB,4HAAgB,KAAK,GAAA;QAdjE;;;;;;;;;;;;;WAaG;QACyC,IAAS,IAAI,0CAAQ;QAArB,IAAS,IAAI,gDAAQ;QAExD,4IAA2C,IAAI,GAAA;QAA/C,IAAS,cAAc,oDAAwB;QAA/C,IAAS,cAAc,0DAAwB;QAC/C,2KAAiD;QAAjD,IAAS,oBAAoB,0DAAoB;QAAjD,IAAS,oBAAoB,gEAAoB;QAC1C,iJAA6B;QAA7B,IAAS,IAAI,0CAAgB;QAA7B,IAAS,IAAI,gDAAgB;QAE7C;;;;;;;;;;;;;WAaG;QACH,IAAI,YAAY;YACd,OAAO,IAAI,CAAC,cAAc,CAAA;QAC5B,CAAC;QAED;;;;;;;;;;WAUG;QACH,IAAI,WAAW;YACb,MAAM,IAAI,GAAG,IAAI,CAAC,cAAc,CAAA;YAChC,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAA;QACrC,CAAC;QAED;;;;;WAKG;QACH,IAAI,IAAI;YACN,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAA;QAC7B,CAAC;QAED;;;;;WAKG;QACH,IAAI,QAAQ;YACV,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAA;QACjC,CAAC;QAED;;;;;WAKG;QACH,IAAI,iBAAiB;YACnB,OAAO,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAA;QAC1C,CAAC;QAED;;;;;WAKG;QACH,IAAI,YAAY;YACd,OAAO,IAAI,CAAC,UAAU,CAAC,YAAY,CAAA;QACrC,CAAC;QAED;;;;;;;;;;;;WAYG;QACH,aAAa;YACX,OAAO,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE,CAAA;QACxC,CAAC;QAED;YACE,KAAK,EAAE,CAAA;;YACP,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YAC3D,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YACzD,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;SAChE;QAEQ,iBAAiB;YACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;YACzB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;YACrC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,SAAS,CAAC,CAAA;YAC7C,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;YAC1C,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;YACpC,CAAC;YACD,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;gBACb,IAAI,CAAC,EAAE,GAAG,UAAU,MAAM,CAAC,CAAC,CAAC,EAAE,CAAA;YACjC,CAAC;QACH,CAAC;QAED;;;;;;;;;WASG;QACH,iBAAiB;YACf,IAAI,CAAC,KAAK,GAAG,SAAS,CAAA;QACxB,CAAC;QAED;;;;;WAKG;QACH,wBAAwB,CAAC,KAAoB;YAC3C,IAAI,CAAC,KAAK,GAAG,KAAK,IAAI,SAAS,CAAA;QACjC,CAAC;QAED;;;;;;;;;;;;WAYG;QACH,QAAQ;YACN,IAAI,OAAO,GAAG,EAAE,CAAA;YAChB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;gBACjC,OAAO,GAAG,wBAAwB,CAAA;gBAClC,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,EAAE,OAAO,CAAC,CAAA;YAC9D,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAA;YACjC,CAAC;YACD,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAA;YAC9C,IAAI,CAAC,WAAW,GAAG,OAAO,CAAA;QAC5B,CAAC;QAEkB,UAAU,CAAC,iBAAuC;YACnE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAA;YACnC,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;gBACtC,WAAW,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAA;YAClC,CAAC;YACD,IAAI,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;gBAClC,IAAI,CAAC,gBAAgB,EAAE,CAAA;YACzB,CAAC;YACD,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;gBACnC,IAAI,CAAC,gBAAgB,EAAE,CAAA;gBACvB,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAA;gBAChD,IAAI,CAAC,QAAQ,EAAE,CAAA;YACjB,CAAC;YACD,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;gBACnC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;oBACf,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;gBAC7C,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,CAAA;gBACpC,CAAC;YACH,CAAC;QACH,CAAC;QAEkB,YAAY,CAAC,EAAkB;YAChD,KAAK,CAAC,YAAY,CAAC,EAAE,CAAC,CAAA;YACtB,IAAI,CAAC,gBAAgB,EAAE,CAAA;YACvB,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,CAAA;QAClD,CAAC;QAES,KAAK,CAAC,gBAAgB;YAC9B,MAAM,IAAI,CAAC,cAAc,CAAA;YACzB,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAW,WAAW,CAAC,CAAA;YAC5D,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAA;YACjG,CAAC;iBAAM,CAAC;gBACN,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;gBACtE,IAAI,QAAQ,EAAE,CAAC;oBACb,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAA;oBAC9B,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,KAAK,CAAA;gBAC9B,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,cAAc,GAAG,IAAI,CAAA;gBAC5B,CAAC;YACH,CAAC;QACH,CAAC;QAES,aAAa,CAAC,CAAgB;YACtC,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,gBAAgB;gBAAE,OAAM;YAC/C,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;oBACd,KAAK,KAAK,CAAC,CAAC,CAAC;wBACX,+EAA+E;wBAC/E,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;4BACd,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;wBACnB,CAAC;wBACD,MAAK;oBACP,CAAC;oBACD,KAAK,QAAQ,CAAC,CAAC,CAAC;wBACd,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;4BACd,CAAC,CAAC,cAAc,EAAE,CAAA;4BAClB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;4BACjB,IAAI,CAAC,KAAK,EAAE,CAAA,CAAC,qCAAqC;wBACpD,CAAC;wBACD,MAAK;oBACP,CAAC;oBACD,KAAK,WAAW;wBACd,CAAC,CAAC,cAAc,EAAE,CAAA;wBAClB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAA;wBACzB,OAAM;oBACR,KAAK,SAAS;wBACZ,CAAC,CAAC,cAAc,EAAE,CAAA;wBAClB,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAA;wBAC7B,OAAM;oBACR,KAAK,MAAM;wBACT,CAAC,CAAC,cAAc,EAAE,CAAA;wBAClB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAA;wBAC1B,OAAM;oBACR,KAAK,KAAK;wBACR,CAAC,CAAC,cAAc,EAAE,CAAA;wBAClB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,CAAA;wBACzB,OAAM;oBACR,KAAK,OAAO,CAAC;oBACb,KAAK,GAAG;wBACN,IAAI,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;4BAChC,CAAC,CAAC,cAAc,EAAE,CAAA;4BAClB,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,iBAA6B,CAAC,CAAA;wBACjE,CAAC;wBACD,OAAM;gBACV,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,QAAQ,CAAC,CAAC,GAAG,EAAE,CAAC;oBACd,KAAK,OAAO,CAAC;oBACb,KAAK,GAAG,CAAC,CAAC,CAAC;wBACT,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;4BACf,CAAC,CAAC,cAAc,EAAE,CAAA;4BAClB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;wBAClB,CAAC;wBACD,MAAK;oBACP,CAAC;oBACD,KAAK,WAAW,CAAC;oBACjB,KAAK,SAAS,CAAC,CAAC,CAAC;wBACf,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;4BACf,CAAC,CAAC,cAAc,EAAE,CAAA;4BAClB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;wBAClB,CAAC;wBACD,kDAAkD;wBAClD,MAAK;oBACP,CAAC;gBACH,CAAC;YACH,CAAC;QACH,CAAC;QAES,UAAU,CAAC,CAAa;YAChC,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAM;YAEzB,8DAA8D;YAC9D,MAAM,aAAa,GAAG,CAAC,CAAC,aAA4B,CAAA;YAEpD,IAAI,aAAa,IAAI,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;gBAClD,4CAA4C;gBAC5C,OAAM;YACR,CAAC;YAED,iDAAiD;YACjD,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;QACnB,CAAC;QAES,WAAW,CAAC,CAAQ;YAC5B,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC,gBAAgB;gBAAE,OAAM;YAC/C,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;QAClB,CAAC;QAES,KAAK,CAAC,gBAAgB;YAC9B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,CAAA;YACtB,IAAI,CAAC,IAAI,EAAE,CAAC;gBACV,oDAAoD;gBACpD,OAAM;YACR,CAAC;YACD,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;YACrD,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBACd,IAAI,CAAC,WAAW,EAAE,CAAA;gBAClB,eAAe;gBACf,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;oBACxB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;gBAC9C,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAA;gBAC5B,CAAC;gBACD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;gBAC/E,IAAI,CAAC,KAAK,EAAE,CAAA;YACd,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,WAAW,EAAE,CAAA;gBAClB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;YAClF,CAAC;QACH,CAAC;QAED,YAAY,CAAC,CAAkC;YAC7C,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,MAAM,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAA;YAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAA;YAC1B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAA;YACxB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;YAEjB,wBAAwB;YACxB,MAAM,WAAW,GAAG,IAAI,WAAW,CAAsB,QAAQ,EAAE;gBACjE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE;gBACzC,OAAO,EAAE,KAAK;gBACd,QAAQ,EAAE,IAAI;aACf,CAAC,CAAA;YACF,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,CAAA;YAC/B,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC;QAED,qBAAqB,CAAC,CAAyC;YAC7D,IAAI,CAAC,oBAAoB,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAA;QAC/C,CAAC;QAED,eAAe;YACb,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;YACjB,IAAI,CAAC,KAAK,EAAE,CAAA;QACd,CAAC;QAES,WAAW;YACnB,MAAM,MAAM,GAAG;gBACb,aAAa,EAAE,KAAK,IAAI,CAAC,EAAE,EAAE;aAC9B,CAAA;YACD,OAAO,IAAI,CAAA;cACD,IAAI,CAAC,IAAI;eACR,IAAI,CAAC,KAAK;eACV,IAAI,CAAC,WAAW;kBACb,IAAI,CAAC,QAAQ;kBACb,IAAI,CAAC,QAAQ;;;eAGhB,IAAI;;iBAEF,IAAI,CAAC,OAAO;qBACR,IAAI,CAAC,WAAW,IAAI,EAAE;wBACnB,IAAI,CAAC,cAAc,IAAI,EAAE;;cAEnC,QAAQ,CAAC,MAAM,CAAC;;;;8BAIA,CAAA;QAC5B,CAAC;QAES,UAAU;YAClB,MAAM,MAAM,GAAG;gBACb,iBAAiB,EAAE,KAAK,IAAI,CAAC,EAAE,EAAE;aAClC,CAAA;YACD,OAAO,IAAI,CAAA;;;;cAID,QAAQ,CAAC,MAAM,CAAC;;;iBAGb,IAAI,CAAC,YAAY;gBAClB,IAAI,CAAC,eAAe;0BACV,IAAI,CAAC,qBAAqB;;2BAEzB,IAAI,CAAC,gBAAgB;eACjC,CAAA;QACb,CAAC;QAES,KAAK,CAAC,gBAAgB;YAC9B,yDAAyD;YACzD,8CAA8C;YAC9C,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;gBAChB,MAAM,IAAI,CAAC,gBAAgB,EAAE,CAAA;gBAC7B,IAAI,CAAC,aAAa,EAAE,CAAA;YACtB,CAAC;QACH,CAAC;QAES,eAAe;YACvB,OAAO,IAAI,CAAA,iEAAiE,IAAmB,oBAAoB,CAAA;QACrH,CAAC;QAEQ,MAAM;YACb,MAAM,OAAO,GAAG,QAAQ,CAAC;gBACvB,WAAW,EAAE,IAAI;gBACjB,MAAM,EAAE,IAAI,CAAC,IAAI;gBACjB,UAAU,EAAE,IAAI,CAAC,QAAQ;aAC1B,CAAC,CAAA;YACF,OAAO,IAAI,CAAA,GAAG,IAAI,CAAC,eAAe,EAAE;oBACpB,OAAO,2BAA2B,IAAI,CAAC,oBAAoB,IAAI,EAAE;UAC3E,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE;cACnC,CAAA;QACZ,CAAC;;;AAjjBH;;;;;;;GAOG;AACH","sourcesContent":["import { html, LitElement, PropertyValues, TemplateResult } from 'lit'\nimport { property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { styleMap } from 'lit/directives/style-map.js'\nimport { setDisabled } from '../../../lib/disabled.js'\nimport type UiOption from './Option.js'\nimport type { UiMenuElement } from '../../menu/ui-menu.js'\nimport { nanoid } from 'nanoid'\n\nimport '../../text-field/ui-outlined-text-field.js'\nimport '../../menu/ui-menu.js'\nimport '../../icons/ui-icon.js'\nimport '@material/web/focus/md-focus-ring.js'\n\nexport interface UiSelectChangeEvent {\n  value: string | undefined\n  item: UiOption | null\n}\n\n/**\n * Material Design 3 Select component that behaves like an outlined text field with dropdown.\n *\n * @fires change - Dispatched when the selection changes. The event is non-bubbling and non-cancelable.\n *                 The `event.detail` object contains the `value` and `item` properties.\n * @fires open - Dispatched when the dropdown opens\n * @fires close - Dispatched when the dropdown closes\n */\nexport default class UiSelect extends LitElement {\n  static readonly formAssociated = true\n  #internals = this.attachInternals()\n\n  /**\n   * The value has a private member so that we can set the value without triggering\n   * the side effects.\n   */\n  #value: string | undefined\n\n  /**\n   * The currently selected value. Corresponds to the `value` attribute of the selected `ui-option`.\n   * When set programmatically, it will update the selected option if a matching option exists.\n   *\n   * @attribute\n   * @example\n   * ```html\n   * <ui-select value=\"apple\">\n   *   <ui-option value=\"apple\">Apple</ui-option>\n   *   <ui-option value=\"banana\">Banana</ui-option>\n   * </ui-select>\n   * ```\n   */\n  get value(): string | undefined {\n    return this.#value\n  }\n\n  @property({ type: String })\n  set value(newValue: string | undefined) {\n    const oldValue = this.#value\n    if (newValue === oldValue) return\n    this.#value = newValue\n    this.requestUpdate()\n  }\n\n  /**\n   * The name attribute for form submission. This value will be used as the key\n   * when the form is submitted.\n   *\n   * @attribute\n   * @example\n   * ```html\n   * <ui-select name=\"country\" value=\"us\">\n   *   <ui-option value=\"us\">United States</ui-option>\n   * </ui-select>\n   * ```\n   */\n  @property({ type: String }) accessor name: string | undefined\n\n  /**\n   * The label text displayed in the select field. Provides accessible labeling\n   * and is shown as the floating label in the outlined text field.\n   *\n   * @attribute\n   * @example\n   * ```html\n   * <ui-select label=\"Select a country\">\n   *   <ui-option value=\"us\">United States</ui-option>\n   * </ui-select>\n   * ```\n   */\n  @property({ type: String }) accessor label: string | undefined\n\n  /**\n   * Whether the select is required for form validation. When true, the select\n   * must have a value selected for the form to be valid.\n   *\n   * @attribute\n   * @example\n   * ```html\n   * <ui-select required label=\"Required field\">\n   *   <ui-option value=\"option1\">Option 1</ui-option>\n   * </ui-select>\n   * ```\n   */\n  @property({ type: Boolean }) accessor required = false\n\n  /**\n   * Whether the select is in an invalid state. This is typically set automatically\n   * during validation, but can be set manually to indicate validation errors.\n   *\n   * @attribute\n   * @example\n   * ```html\n   * <ui-select invalid invalidText=\"Please select a valid option\">\n   *   <ui-option value=\"option1\">Option 1</ui-option>\n   * </ui-select>\n   * ```\n   */\n  @property({ type: Boolean }) accessor invalid: boolean | undefined\n\n  /**\n   * The error message to display when the select is invalid. This text is shown\n   * below the select field when `invalid` is true.\n   *\n   * @attribute\n   * @example\n   * ```html\n   * <ui-select invalid invalidText=\"This field is required\">\n   *   <ui-option value=\"option1\">Option 1</ui-option>\n   * </ui-select>\n   * ```\n   */\n  @property({ type: String }) accessor invalidText: string | undefined\n\n  /**\n   * @attribute\n   */\n  @property({ type: String }) accessor supportingText: string | undefined\n\n  /**\n   * Whether the select is disabled. When disabled, the select cannot be interacted\n   * with and will not receive focus or respond to user input.\n   *\n   * @default false\n   * @attribute\n   * @example\n   * ```html\n   * <ui-select disabled label=\"Disabled select\">\n   *   <ui-option value=\"option1\">Option 1</ui-option>\n   * </ui-select>\n   * ```\n   */\n  @property({ type: Boolean, reflect: true }) accessor disabled = false\n\n  /**\n   * Whether the dropdown menu is currently open. This property reflects the\n   * current state of the dropdown and can be set programmatically to open/close it.\n   *\n   * @default false\n   * @example\n   * ```javascript\n   * // Open the dropdown programmatically\n   * selectElement.open = true;\n   *\n   * // Close the dropdown\n   * selectElement.open = false;\n   * ```\n   */\n  @property({ type: Boolean, reflect: true }) accessor open = false\n\n  @state() accessor selectedOption: UiOption | null = null\n  @state() accessor ariaActiveDescendant: string | undefined\n  @query('.menu') accessor menu!: UiMenuElement\n\n  /**\n   * Returns the currently selected option element. This provides access to the\n   * full `ui-option` element, not just its value.\n   *\n   * @readonly\n   * @example\n   * ```javascript\n   * const select = document.querySelector('ui-select');\n   * const selectedItem = select.selectedItem;\n   * if (selectedItem) {\n   *   console.log('Selected option:', selectedItem.textContent);\n   * }\n   * ```\n   */\n  get selectedItem(): UiOption | null {\n    return this.selectedOption\n  }\n\n  /**\n   * Returns the text content that should be displayed in the select field.\n   * This is the rendered value of the currently selected option.\n   *\n   * @readonly\n   * @example\n   * ```javascript\n   * const select = document.querySelector('ui-select');\n   * console.log('Display text:', select.renderValue);\n   * ```\n   */\n  get renderValue(): string {\n    const item = this.selectedOption\n    return item ? item.renderValue : ''\n  }\n\n  /**\n   * Returns the form element that contains this select, if any.\n   * Part of the form-associated custom element API.\n   *\n   * @readonly\n   */\n  get form(): HTMLFormElement | null {\n    return this.#internals.form\n  }\n\n  /**\n   * Returns the validity state of the select element.\n   * Part of the form-associated custom element API.\n   *\n   * @readonly\n   */\n  get validity(): ValidityState {\n    return this.#internals.validity\n  }\n\n  /**\n   * Returns the validation message for the select element.\n   * Part of the form-associated custom element API.\n   *\n   * @readonly\n   */\n  get validationMessage(): string {\n    return this.#internals.validationMessage\n  }\n\n  /**\n   * Returns whether the select element will be validated when the form is submitted.\n   * Part of the form-associated custom element API.\n   *\n   * @readonly\n   */\n  get willValidate(): boolean {\n    return this.#internals.willValidate\n  }\n\n  /**\n   * Checks the validity of the select element and returns true if valid.\n   * Part of the form-associated custom element API.\n   *\n   * @returns {boolean} True if the element is valid, false otherwise\n   * @example\n   * ```javascript\n   * const select = document.querySelector('ui-select');\n   * if (!select.checkValidity()) {\n   *   console.log('Select is invalid:', select.validationMessage);\n   * }\n   * ```\n   */\n  checkValidity(): boolean {\n    return this.#internals.checkValidity()\n  }\n\n  constructor() {\n    super()\n    this.addEventListener('click', this.handleClick.bind(this))\n    this.addEventListener('blur', this.handleBlur.bind(this))\n    this.addEventListener('keydown', this.handleKeydown.bind(this))\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.setAttribute('role', 'combobox')\n    this.setAttribute('aria-haspopup', 'listbox')\n    this.setAttribute('aria-controls', 'menu')\n    if (!this.disabled) {\n      this.setAttribute('tabindex', '0')\n    }\n    if (!this.id) {\n      this.id = `select-${nanoid(6)}`\n    }\n  }\n\n  /**\n   * Resets the select to its initial state. Called automatically when the parent\n   * form is reset. Part of the form-associated custom element API.\n   *\n   * @example\n   * ```javascript\n   * const select = document.querySelector('ui-select');\n   * select.formResetCallback(); // Clears the selection\n   * ```\n   */\n  formResetCallback(): void {\n    this.value = undefined\n  }\n\n  /**\n   * Restores the select's state from saved form data. Called automatically when\n   * the browser restores form state. Part of the form-associated custom element API.\n   *\n   * @param {string | null} state - The saved state to restore\n   */\n  formStateRestoreCallback(state: string | null): void {\n    this.value = state ?? undefined\n  }\n\n  /**\n   * Validates the select element and updates its validity state. This is called\n   * automatically during property changes, but can be called manually to trigger validation.\n   *\n   * @example\n   * ```javascript\n   * const select = document.querySelector('ui-select');\n   * select.validate();\n   * if (select.invalid) {\n   *   console.log('Validation failed:', select.invalidText);\n   * }\n   * ```\n   */\n  validate(): void {\n    let message = ''\n    if (this.required && !this.value) {\n      message = 'Please select an item.'\n      this.#internals.setValidity({ valueMissing: true }, message)\n    } else {\n      this.#internals.setValidity({})\n    }\n    this.invalid = !this.#internals.validity.valid\n    this.invalidText = message\n  }\n\n  protected override willUpdate(changedProperties: PropertyValues<this>): void {\n    super.willUpdate(changedProperties)\n    if (changedProperties.has('disabled')) {\n      setDisabled(this, this.disabled)\n    }\n    if (changedProperties.has('open')) {\n      this.handleOpenChange()\n    }\n    if (changedProperties.has('value')) {\n      this.setCurrentOption()\n      this.#internals.setFormValue(this.value ?? null)\n      this.validate()\n    }\n    if (changedProperties.has('label')) {\n      if (this.label) {\n        this.setAttribute('aria-label', this.label)\n      } else {\n        this.removeAttribute('aria-label')\n      }\n    }\n  }\n\n  protected override firstUpdated(cp: PropertyValues): void {\n    super.firstUpdated(cp)\n    this.setCurrentOption()\n    this.#internals.setFormValue(this.value ?? null)\n  }\n\n  protected async setCurrentOption(): Promise<void> {\n    await this.updateComplete\n    const options = this.querySelectorAll<UiOption>('ui-option')\n    if (this.value) {\n      this.selectedOption = Array.from(options).find((option) => option.value === this.value) || null\n    } else {\n      const selected = Array.from(options).find((option) => option.selected)\n      if (selected) {\n        this.selectedOption = selected\n        this.#value = selected.value\n      } else {\n        this.selectedOption = null\n      }\n    }\n  }\n\n  protected handleKeydown(e: KeyboardEvent): void {\n    if (this.disabled || e.defaultPrevented) return\n    if (this.open) {\n      switch (e.key) {\n        case 'Tab': {\n          // If menu is open and Tab is pressed, close it and allow normal tab navigation\n          if (this.open) {\n            this.open = false\n          }\n          break\n        }\n        case 'Escape': {\n          if (this.open) {\n            e.preventDefault()\n            this.open = false\n            this.focus() // Return focus to the select element\n          }\n          break\n        }\n        case 'ArrowDown':\n          e.preventDefault()\n          this.menu.highlightNext()\n          return\n        case 'ArrowUp':\n          e.preventDefault()\n          this.menu.highlightPrevious()\n          return\n        case 'Home':\n          e.preventDefault()\n          this.menu.highlightFirst()\n          return\n        case 'End':\n          e.preventDefault()\n          this.menu.highlightLast()\n          return\n        case 'Enter':\n        case ' ':\n          if (this.menu.highlightListItem) {\n            e.preventDefault()\n            this.menu.notifySelect(this.menu.highlightListItem as UiOption)\n          }\n          return\n      }\n    } else {\n      switch (e.key) {\n        case 'Enter':\n        case ' ': {\n          if (!this.open) {\n            e.preventDefault()\n            this.open = true\n          }\n          break\n        }\n        case 'ArrowDown':\n        case 'ArrowUp': {\n          if (!this.open) {\n            e.preventDefault()\n            this.open = true\n          }\n          // If menu is open, let the menu handle arrow keys\n          break\n        }\n      }\n    }\n  }\n\n  protected handleBlur(e: FocusEvent): void {\n    if (this.disabled) return\n\n    // Check if focus is moving to the menu or one of its children\n    const relatedTarget = e.relatedTarget as HTMLElement\n\n    if (relatedTarget && this.contains(relatedTarget)) {\n      // Focus is moving to the menu, keep it open\n      return\n    }\n\n    // Close the menu when focus leaves the component\n    this.open = false\n  }\n\n  protected handleClick(e: Event): void {\n    if (this.disabled || e.defaultPrevented) return\n    e.preventDefault()\n    e.stopPropagation()\n    this.open = true\n  }\n\n  protected async handleOpenChange(): Promise<void> {\n    const menu = this.menu\n    if (!menu) {\n      // The status can be set before the menu is rendered\n      return\n    }\n    this.setAttribute('aria-expanded', String(this.open))\n    if (this.open) {\n      menu.showPopover()\n      // menu.focus()\n      if (this.selectedOption) {\n        this.menu.highlightItem(this.selectedOption)\n      } else {\n        this.menu.highlightFirst()\n      }\n      this.dispatchEvent(new CustomEvent('open', { bubbles: false, composed: true }))\n      this.focus()\n    } else {\n      menu.hidePopover()\n      this.dispatchEvent(new CustomEvent('close', { bubbles: false, composed: true }))\n    }\n  }\n\n  handleSelect(e: CustomEvent<{ item: UiOption }>): void {\n    e.stopPropagation()\n    const item = e.detail.item\n    this.selectedOption = item\n    this.#value = item.value\n    this.open = false\n\n    // Dispatch change event\n    const changeEvent = new CustomEvent<UiSelectChangeEvent>('change', {\n      detail: { value: this.value, item: item },\n      bubbles: false,\n      composed: true,\n    })\n    this.dispatchEvent(changeEvent)\n    this.focus()\n  }\n\n  handleHighlightChange(e: CustomEvent<{ item: UiOption | null }>): void {\n    this.ariaActiveDescendant = e.detail.item?.id\n  }\n\n  handleMenuClose(): void {\n    this.open = false\n    this.focus()\n  }\n\n  protected renderInput(): TemplateResult {\n    const styles = {\n      'anchor-name': `--${this.id}`,\n    }\n    return html`<ui-outlined-text-field\n      .name=${this.name}\n      .label=${this.label}\n      .value=${this.renderValue}\n      .disabled=${this.disabled}\n      .required=${this.required}\n      readonly\n      tabindex=\"-1\"\n      .inert=${true}\n      aria-hidden=\"true\"\n      .invalid=${this.invalid}\n      .invalidText=${this.invalidText || ''}\n      .supportingText=${this.supportingText || ''}\n      class=\"input\"\n      style=${styleMap(styles)}\n      part=\"input\"\n    >\n      <ui-icon part=\"icon\" slot=\"suffix\">arrow_drop_down</ui-icon>\n    </ui-outlined-text-field>`\n  }\n\n  protected renderMenu(): TemplateResult {\n    const styles = {\n      'position-anchor': `--${this.id}`,\n    }\n    return html`<ui-menu\n      id=\"menu\"\n      class=\"menu\"\n      part=\"menu\"\n      style=${styleMap(styles)}\n      popover=\"auto\"\n      selector=\"ui-option\"\n      @select=\"${this.handleSelect}\"\n      @close=\"${this.handleMenuClose}\"\n      @highlightchange=\"${this.handleHighlightChange}\"\n    >\n      <slot @slotchange=\"${this.handleSlotChange}\"></slot>\n    </ui-menu>`\n  }\n\n  protected async handleSlotChange(): Promise<void> {\n    // When options change, re-evaluate the current selection\n    // only if we don't have an explicit value set\n    if (!this.value) {\n      await this.setCurrentOption()\n      this.requestUpdate()\n    }\n  }\n\n  protected renderFocusRing(): TemplateResult {\n    return html`<md-focus-ring part=\"focus-ring\" class=\"focus-ring\" .control=\"${this as HTMLElement}\"></md-focus-ring>`\n  }\n\n  override render(): TemplateResult {\n    const classes = classMap({\n      'ui-select': true,\n      'open': this.open,\n      'disabled': this.disabled,\n    })\n    return html`${this.renderFocusRing()}\n      <div class=\"${classes}\" aria-activedescendant=${this.ariaActiveDescendant || ''}>\n        ${this.renderInput()} ${this.renderMenu()}\n      </div> `\n  }\n}\n"]}

package/build/src/md/select/internals/Select.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/select/internals/Select.styles.ts"],"names":[],"mappings":";AAEA,wBAmBC"}
+{"version":3,"file":"Select.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/select/internals/Select.styles.ts"],"names":[],"mappings":";AAEA,wBAcC"}

package/build/src/md/select/internals/Select.styles.js

@@ -11,12 +11,7 @@ export default css `
   }
 
   .input {
-    anchor-name: --input;
     cursor: default;
   }
-
-  .menu {
-    position-anchor: --input;
-  }
 `;
 //# sourceMappingURL=Select.styles.js.map

package/build/src/md/select/internals/Select.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.styles.js","sourceRoot":"","sources":["../../../../../src/md/select/internals/Select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;CAmBjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: inline-block;\n    position: relative;\n    outline: none;\n    --md-focus-ring-shape-end-end: var(--md-sys-shape-corner-extra-small);\n    --md-focus-ring-shape-end-start: var(--md-sys-shape-corner-extra-small);\n    --md-focus-ring-shape-start-end: var(--md-sys-shape-corner-extra-small);\n    --md-focus-ring-shape-start-start: var(--md-sys-shape-corner-extra-small);\n  }\n\n  .input {\n    anchor-name: --input;\n    cursor: default;\n  }\n\n  .menu {\n    position-anchor: --input;\n  }\n`\n"]}
+{"version":3,"file":"Select.styles.js","sourceRoot":"","sources":["../../../../../src/md/select/internals/Select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;CAcjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: inline-block;\n    position: relative;\n    outline: none;\n    --md-focus-ring-shape-end-end: var(--md-sys-shape-corner-extra-small);\n    --md-focus-ring-shape-end-start: var(--md-sys-shape-corner-extra-small);\n    --md-focus-ring-shape-start-end: var(--md-sys-shape-corner-extra-small);\n    --md-focus-ring-shape-start-start: var(--md-sys-shape-corner-extra-small);\n  }\n\n  .input {\n    cursor: default;\n  }\n`\n"]}

package/demo/elements/currency/index.ts

@@ -6,6 +6,7 @@ import type { Currency, CurrencyPickerError } from '../../../src/elements/curren
 import '../../../src/elements/currency/currency-picker.js'
 import '../../../src/md/button/ui-button.js'
 import '../../../src/md/checkbox/ui-checkbox.js'
+import '../../../src/md/dialog/ui-dialog.js'
 
 class CurrencyPickerDemoPage extends DemoPage {
   override accessor componentName = 'Currency Picker'
@@ -18,6 +19,8 @@ class CurrencyPickerDemoPage extends DemoPage {
 
   @reactive() accessor lastChangeEvent = 'No changes yet'
   @reactive() accessor lastErrorEvent = 'No errors yet'
+  @reactive() accessor dialogOpen = false
+  @reactive() accessor dialogFormSelected: string[] = []
 
   private readonly allowedCurrencies = ['USD', 'EUR', 'GBP', 'JPY', 'CAD']
 
@@ -45,6 +48,32 @@ class CurrencyPickerDemoPage extends DemoPage {
     this.lastErrorEvent = `Error: ${JSON.stringify(event.detail, null, 2)}`
   }
 
+  handleDialogFormChange(event: CustomEvent<{ currencies: Currency[]; codes: string[] }>): void {
+    this.dialogFormSelected = event.detail.codes
+    this.lastChangeEvent = `Dialog Form: ${JSON.stringify(event.detail, null, 2)}`
+  }
+
+  handleOpenDialog(): void {
+    this.dialogOpen = true
+  }
+
+  handleCloseDialog(): void {
+    this.dialogOpen = false
+  }
+
+  handleDialogFormSubmit(event: Event): void {
+    event.preventDefault()
+    const formData = new FormData(event.target as HTMLFormElement)
+    console.log('Dialog form submitted:', Object.fromEntries(formData.entries()))
+
+    if (this.dialogFormSelected.length === 0) {
+      alert('Please select a currency before submitting.')
+    } else {
+      alert(`Dialog form submitted with currency: ${this.dialogFormSelected.join(', ')}`)
+      this.dialogOpen = false
+    }
+  }
+
   handleClearSingle(): void {
     const picker = document.querySelector('#single-picker') as HTMLElement & { clearSelection(): void }
     picker?.clearSelection()
@@ -252,6 +281,57 @@ class CurrencyPickerDemoPage extends DemoPage {
           <div class="output-content">${this.lastErrorEvent}</div>
         </div>
       </section>
+
+      <section class="demo-section">
+        <h3>Dialog Form Integration</h3>
+        <p>Test currency picker rendering inside a dialog that's inside a form.</p>
+
+        <ui-button @click="${this.handleOpenDialog}">Open Currency Selection Dialog</ui-button>
+
+        <ui-dialog ?open="${this.dialogOpen}" modal @close="${this.handleCloseDialog}">
+          <span slot="title">Select Currency</span>
+
+          <form @submit="${this.handleDialogFormSubmit}">
+            <div class="demo-controls">
+              <currency-picker
+                id="dialog-picker"
+                label="Choose Currency"
+                name="dialogCurrency"
+                required
+                multi
+                .selected="${this.dialogFormSelected}"
+                supportingText="Select currencies for your account"
+                @change="${this.handleDialogFormChange}"
+                @error="${this.handleError}"
+              ></currency-picker>
+            </div>
+
+            <div slot="button">
+              <ui-button type="button" color="text" value="dismiss">Cancel</ui-button>
+              <ui-button type="submit" color="text" value="confirm">Save Selection</ui-button>
+            </div>
+          </form>
+        </ui-dialog>
+
+        <div class="output-section">
+          <h4>Dialog Form Selection</h4>
+          <div class="output-content">${this.dialogFormSelected.join(', ') || 'None'}</div>
+        </div>
+      </section>
+
+      <section class="demo-section">
+        <h3>Complex Dialog Scenario</h3>
+        <p>Additional test with multiple layers to identify potential z-index or stacking context issues.</p>
+
+        <div
+          style="position: relative; z-index: 1; background: var(--md-sys-color-surface-variant); padding: 16px; border-radius: 8px;"
+        >
+          <h4>Container with relative positioning</h4>
+          <p>This container has position: relative and z-index: 1 to test stacking context issues.</p>
+
+          <ui-button @click="${this.handleOpenDialog}">Open Dialog from Positioned Container</ui-button>
+        </div>
+      </section>
     `
   }
 

package/demo/md/select/index.ts

@@ -29,7 +29,7 @@ class ComponentDemoPage extends DemoPage {
         <h2>Basic Select</h2>
         <p>Select a fruit from the list:</p>
         <ui-select id="basic-select" @change="${this.handleBasicSelectChange}" label="Select a fruit">
-          <ui-option value="apple">Apple</ui-option>
+          <ui-option value="apple" selected>Apple</ui-option>
           <ui-option value="banana">Banana</ui-option>
           <ui-option value="cherry">Cherry</ui-option>
           <ui-option value="date">Date</ui-option>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@api-client/ui",
-  "version": "0.5.29",
+  "version": "0.5.31",
   "description": "Internal UI component library for the API Client ecosystem.",
   "license": "UNLICENSED",
   "main": "build/src/index.js",