@api-client/ui 0.5.37 → 0.5.39

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

@@ -2,7 +2,7 @@ import { __esDecorate, __runInitializers } from "tslib";
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import UiListItem from '../../list/internals/ListItem.js';
+import UiListItem, { ListItemLines } from '../../list/internals/ListItem.js';
 import { nanoid } from 'nanoid';
 let UiOption = (() => {
     let _classSuper = UiListItem;
@@ -96,11 +96,14 @@ let UiOption = (() => {
             }
             return content.join(' ').trim() || this.value || '';
         }
+        constructor() {
+            super();
+            __runInitializers(this, _selected_extraInitializers);
+            this.lines = ListItemLines.auto;
+        }
         /**
          * Initializes the option when it's connected to the DOM. Sets up ARIA attributes
          * and generates a unique ID if one isn't provided.
-         *
-         * @protected
          */
         connectedCallback() {
             super.connectedCallback();
@@ -112,9 +115,6 @@ let UiOption = (() => {
         /**
          * Handles property updates and triggers appropriate side effects.
          * Currently monitors the `selected` property to update selection state.
-         *
-         * @param {PropertyValues<this>} changedProperties - Map of changed properties
-         * @protected
          */
         updated(changedProperties) {
             super.updated(changedProperties);
@@ -147,7 +147,7 @@ let UiOption = (() => {
          * Handles click events on the option. Prevents default behavior and dispatches
          * a custom 'select' event that the parent select component can listen to.
          *
-         * @param {MouseEvent} e - The click event
+         * @param e - The click event
          * @protected
          * @fires select - Custom event with option details in event.detail
          * @example
@@ -175,22 +175,11 @@ let UiOption = (() => {
                 composed: true,
             }));
         }
-        /**
-         * Renders the option's template. Creates the main structure with focus ring,
-         * ripple effect, and content areas.
-         *
-         * @returns {TemplateResult} The rendered template
-         * @protected
-         */
-        render() {
-            const surfaceClasses = classMap({
-                surface: true,
+        getSurfaceClasses() {
+            return {
+                ...super.getSurfaceClasses(),
                 selected: this.selected,
-            });
-            return html `
-      ${this.renderFocusRing()} ${this.renderRipple()}
-      <div class="${surfaceClasses}">${this.renderStart()} ${this.renderBody()} ${this.renderEnd()}</div>
-    `;
+            };
         }
         /**
          * Renders the end section of the option, including the selection check icon
@@ -198,17 +187,13 @@ let UiOption = (() => {
          */
         renderEnd() {
             return html `
-      <div class="end">
+      <div class="${classMap(this.getEndClasses())}">
         ${this.selected ? html `<ui-icon icon="check" class="selection-icon"></ui-icon>` : ''}
         <slot name="end" @slotchange=${this.handleEndSlotChange}></slot>
-        <slot name="end-text" class="trailing-supporting-text"></slot>
+        <slot name="end-text" class="trailing-supporting-text" @slotchange=${this.handleEndTextSlotChange}></slot>
       </div>
     `;
         }
-        constructor() {
-            super(...arguments);
-            __runInitializers(this, _selected_extraInitializers);
-        }
     };
 })();
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"Option.js","sourceRoot":"","sources":["../../../../../src/md/select/internals/Option.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, PropertyValues, TemplateResult } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport UiListItem from '../../list/internals/ListItem.js'\nimport { nanoid } from 'nanoid'\n\n/**\n * Material Design 3 Select Option component.\n *\n * The `ui-option` component represents a selectable item within a `ui-select` dropdown.\n * It extends `UiListItem` to provide consistent styling and behavior with other list components.\n *\n * @slot - The option content (label, icon, etc.)\n * @slot start - Content to display at the start of the option (icon, avatar, etc.)\n * @slot end - Content to display at the end of the option\n * @slot supporting-text - Supporting text below the main content\n * @fires select - Dispatched when the option is selected. Contains `{ item: UiOption, value: string }` in detail\n *\n * @example\n * Basic option\n * ```html\n * <ui-option value=\"apple\">Apple</ui-option>\n * ```\n *\n * @example\n * Option with supporting text\n * ```html\n * <ui-option value=\"john\" lines=\"two\">\n *   John Doe\n *   <span slot=\"supporting-text\">john@example.com</span>\n * </ui-option>\n * ```\n */\nexport default class UiOption extends UiListItem {\n  /**\n   * The value associated with this option. Used to identify the option when selected.\n   * This value is what gets set on the parent select element when this option is chosen.\n   *\n   * @example\n   * ```html\n   * <ui-option value=\"apple\">Apple</ui-option>\n   * <ui-option value=\"banana\">Banana</ui-option>\n   * ```\n   */\n  @property({ type: String, reflect: true }) accessor value: string | undefined\n\n  /**\n   * Whether this option is currently selected. This is typically managed automatically\n   * by the parent select component, but can be set manually for styling purposes.\n   *\n   * @default false\n   * @example\n   * ```html\n   * <ui-option value=\"apple\" selected>Apple</ui-option>\n   * ```\n   */\n  @property({ type: Boolean, reflect: true }) accessor selected = false\n\n  /**\n   * Returns the text representation of this option for display purposes.\n   * This method extracts and combines text content from all child nodes,\n   * including special handling for ui-icon elements.\n   *\n   * @readonly\n   * @returns {string} The rendered text value of the option\n   * @example\n   * ```javascript\n   * const option = document.querySelector('ui-option');\n   * console.log('Option text:', option.renderValue);\n   * ```\n   */\n  get renderValue(): string {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])')\n    if (!slot) return this.value || ''\n    const nodes = slot.assignedNodes({ flatten: true })\n    const content: string[] = []\n    for (const node of nodes) {\n      if (node.nodeType === Node.TEXT_NODE) {\n        content.push(node.textContent || '')\n      } else if (node.nodeType === Node.ELEMENT_NODE) {\n        const element = node as HTMLElement\n        if (element.tagName.toLowerCase() === 'ui-icon') {\n          content.push(element.getAttribute('icon') || '')\n        } else {\n          content.push(element.textContent || '')\n        }\n      }\n    }\n    return content.join(' ').trim() || this.value || ''\n  }\n\n  /**\n   * Initializes the option when it's connected to the DOM. Sets up ARIA attributes\n   * and generates a unique ID if one isn't provided.\n   *\n   * @protected\n   */\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.setAttribute('role', 'option')\n    if (!this.id) {\n      this.id = `option-${nanoid(6)}`\n    }\n  }\n\n  /**\n   * Handles property updates and triggers appropriate side effects.\n   * Currently monitors the `selected` property to update selection state.\n   *\n   * @param {PropertyValues<this>} changedProperties - Map of changed properties\n   * @protected\n   */\n  protected override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties)\n\n    if (changedProperties.has('selected')) {\n      this.updateSelectionState()\n    }\n  }\n\n  /**\n   * Updates the visual and accessibility state when selection changes.\n   * Adds/removes CSS classes and ARIA attributes based on selection state.\n   *\n   * @protected\n   * @example\n   * ```javascript\n   * // This is called automatically when the selected property changes\n   * option.selected = true; // Will trigger updateSelectionState()\n   * ```\n   */\n  protected updateSelectionState(): void {\n    if (this.selected) {\n      this.classList.add('selected')\n      this.setAttribute('aria-selected', 'true')\n    } else {\n      this.classList.remove('selected')\n      this.setAttribute('aria-selected', 'false')\n    }\n  }\n\n  /**\n   * Handles click events on the option. Prevents default behavior and dispatches\n   * a custom 'select' event that the parent select component can listen to.\n   *\n   * @param {MouseEvent} e - The click event\n   * @protected\n   * @fires select - Custom event with option details in event.detail\n   * @example\n   * ```javascript\n   * // Listen for option selection\n   * option.addEventListener('select', (e) => {\n   *   console.log('Selected option:', e.detail.item);\n   *   console.log('Selected value:', e.detail.value);\n   * });\n   * ```\n   */\n  override handleClick(e: MouseEvent): void {\n    e.preventDefault()\n    if (this.disabled) {\n      e.stopPropagation()\n      return\n    }\n\n    // Let the parent handle the selection\n    this.dispatchEvent(\n      new CustomEvent('select', {\n        detail: {\n          item: this,\n          value: this.value,\n        },\n        bubbles: false,\n        composed: true,\n      })\n    )\n  }\n\n  /**\n   * Renders the option's template. Creates the main structure with focus ring,\n   * ripple effect, and content areas.\n   *\n   * @returns {TemplateResult} The rendered template\n   * @protected\n   */\n  protected override render(): TemplateResult {\n    const surfaceClasses = classMap({\n      surface: true,\n      selected: this.selected,\n    })\n\n    return html`\n      ${this.renderFocusRing()} ${this.renderRipple()}\n      <div class=\"${surfaceClasses}\">${this.renderStart()} ${this.renderBody()} ${this.renderEnd()}</div>\n    `\n  }\n\n  /**\n   * Renders the end section of the option, including the selection check icon\n   * when the option is selected.\n   */\n  protected override renderEnd(): TemplateResult {\n    return html`\n      <div class=\"end\">\n        ${this.selected ? html`<ui-icon icon=\"check\" class=\"selection-icon\"></ui-icon>` : ''}\n        <slot name=\"end\" @slotchange=${this.handleEndSlotChange}></slot>\n        <slot name=\"end-text\" class=\"trailing-supporting-text\"></slot>\n      </div>\n    `\n  }\n}\n"]}
+{"version":3,"file":"Option.js","sourceRoot":"","sources":["../../../../../src/md/select/internals/Option.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, PropertyValues, TemplateResult } from 'lit'\nimport { property } from 'lit/decorators.js'\nimport { ClassInfo, classMap } from 'lit/directives/class-map.js'\nimport UiListItem, { ListItemLines } from '../../list/internals/ListItem.js'\nimport { nanoid } from 'nanoid'\n\n/**\n * Material Design 3 Select Option component.\n *\n * The `ui-option` component represents a selectable item within a `ui-select` dropdown.\n * It extends `UiListItem` to provide consistent styling and behavior with other list components.\n *\n * @slot - The option content (label, icon, etc.)\n * @slot start - Content to display at the start of the option (icon, avatar, etc.)\n * @slot end - Content to display at the end of the option\n * @slot supporting-text - Supporting text below the main content\n * @fires select - Dispatched when the option is selected. Contains `{ item: UiOption, value: string }` in detail\n *\n * @example\n * Basic option\n * ```html\n * <ui-option value=\"apple\">Apple</ui-option>\n * ```\n *\n * @example\n * Option with supporting text\n * ```html\n * <ui-option value=\"john\" lines=\"two\">\n *   John Doe\n *   <span slot=\"supporting-text\">john@example.com</span>\n * </ui-option>\n * ```\n */\nexport default class UiOption extends UiListItem {\n  /**\n   * The value associated with this option. Used to identify the option when selected.\n   * This value is what gets set on the parent select element when this option is chosen.\n   *\n   * @example\n   * ```html\n   * <ui-option value=\"apple\">Apple</ui-option>\n   * <ui-option value=\"banana\">Banana</ui-option>\n   * ```\n   */\n  @property({ type: String, reflect: true }) accessor value: string | undefined\n\n  /**\n   * Whether this option is currently selected. This is typically managed automatically\n   * by the parent select component, but can be set manually for styling purposes.\n   *\n   * @default false\n   * @example\n   * ```html\n   * <ui-option value=\"apple\" selected>Apple</ui-option>\n   * ```\n   */\n  @property({ type: Boolean, reflect: true }) accessor selected = false\n\n  /**\n   * Returns the text representation of this option for display purposes.\n   * This method extracts and combines text content from all child nodes,\n   * including special handling for ui-icon elements.\n   *\n   * @readonly\n   * @returns {string} The rendered text value of the option\n   * @example\n   * ```javascript\n   * const option = document.querySelector('ui-option');\n   * console.log('Option text:', option.renderValue);\n   * ```\n   */\n  get renderValue(): string {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot:not([name])')\n    if (!slot) return this.value || ''\n    const nodes = slot.assignedNodes({ flatten: true })\n    const content: string[] = []\n    for (const node of nodes) {\n      if (node.nodeType === Node.TEXT_NODE) {\n        content.push(node.textContent || '')\n      } else if (node.nodeType === Node.ELEMENT_NODE) {\n        const element = node as HTMLElement\n        if (element.tagName.toLowerCase() === 'ui-icon') {\n          content.push(element.getAttribute('icon') || '')\n        } else {\n          content.push(element.textContent || '')\n        }\n      }\n    }\n    return content.join(' ').trim() || this.value || ''\n  }\n\n  constructor() {\n    super()\n    this.lines = ListItemLines.auto\n  }\n\n  /**\n   * Initializes the option when it's connected to the DOM. Sets up ARIA attributes\n   * and generates a unique ID if one isn't provided.\n   */\n  override connectedCallback(): void {\n    super.connectedCallback()\n    this.setAttribute('role', 'option')\n    if (!this.id) {\n      this.id = `option-${nanoid(6)}`\n    }\n  }\n\n  /**\n   * Handles property updates and triggers appropriate side effects.\n   * Currently monitors the `selected` property to update selection state.\n   */\n  protected override updated(changedProperties: PropertyValues<this>): void {\n    super.updated(changedProperties)\n\n    if (changedProperties.has('selected')) {\n      this.updateSelectionState()\n    }\n  }\n\n  /**\n   * Updates the visual and accessibility state when selection changes.\n   * Adds/removes CSS classes and ARIA attributes based on selection state.\n   *\n   * @protected\n   * @example\n   * ```javascript\n   * // This is called automatically when the selected property changes\n   * option.selected = true; // Will trigger updateSelectionState()\n   * ```\n   */\n  protected updateSelectionState(): void {\n    if (this.selected) {\n      this.classList.add('selected')\n      this.setAttribute('aria-selected', 'true')\n    } else {\n      this.classList.remove('selected')\n      this.setAttribute('aria-selected', 'false')\n    }\n  }\n\n  /**\n   * Handles click events on the option. Prevents default behavior and dispatches\n   * a custom 'select' event that the parent select component can listen to.\n   *\n   * @param e - The click event\n   * @protected\n   * @fires select - Custom event with option details in event.detail\n   * @example\n   * ```javascript\n   * // Listen for option selection\n   * option.addEventListener('select', (e) => {\n   *   console.log('Selected option:', e.detail.item);\n   *   console.log('Selected value:', e.detail.value);\n   * });\n   * ```\n   */\n  override handleClick(e: MouseEvent): void {\n    e.preventDefault()\n    if (this.disabled) {\n      e.stopPropagation()\n      return\n    }\n\n    // Let the parent handle the selection\n    this.dispatchEvent(\n      new CustomEvent('select', {\n        detail: {\n          item: this,\n          value: this.value,\n        },\n        bubbles: false,\n        composed: true,\n      })\n    )\n  }\n\n  override getSurfaceClasses(): ClassInfo {\n    return {\n      ...super.getSurfaceClasses(),\n      selected: this.selected,\n    }\n  }\n\n  /**\n   * Renders the end section of the option, including the selection check icon\n   * when the option is selected.\n   */\n  protected override renderEnd(): TemplateResult {\n    return html`\n      <div class=\"${classMap(this.getEndClasses())}\">\n        ${this.selected ? html`<ui-icon icon=\"check\" class=\"selection-icon\"></ui-icon>` : ''}\n        <slot name=\"end\" @slotchange=${this.handleEndSlotChange}></slot>\n        <slot name=\"end-text\" class=\"trailing-supporting-text\" @slotchange=${this.handleEndTextSlotChange}></slot>\n      </div>\n    `\n  }\n}\n"]}

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

@@ -241,7 +241,7 @@ export default class UiSelect extends LitElement {
     validate(): void;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected firstUpdated(cp: PropertyValues): void;
-    protected setCurrentOption(): Promise<void>;
+    protected setCurrentOption(): void;
     protected handleKeydown(e: KeyboardEvent): void;
     protected handleBlur(e: FocusEvent): void;
     protected handleClick(e: Event): void;

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":"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"}

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

@@ -430,11 +430,16 @@ let UiSelect = (() => {
         }
         firstUpdated(cp) {
             super.firstUpdated(cp);
-            this.setCurrentOption();
-            this.#internals.setFormValue(this.value ?? null);
+            this.updateComplete.then(() => {
+                this.setCurrentOption();
+                this.#internals.setFormValue(this.value ?? null);
+                // We need to update here as event with `value` and `selectedOption`
+                // already set, the `renderValue` might have incorrect value
+                // due to the DOM update.
+                this.requestUpdate();
+            });
         }
-        async setCurrentOption() {
-            await this.updateComplete;
+        setCurrentOption() {
             const options = this.querySelectorAll('ui-option');
             if (this.value) {
                 this.selectedOption = Array.from(options).find((option) => option.value === this.value) || null;
@@ -534,6 +539,11 @@ let UiSelect = (() => {
                 return;
             e.preventDefault();
             e.stopPropagation();
+            if (this.open && e.target === this) {
+                // If the select is already open and clicked again, close it
+                this.open = false;
+                return;
+            }
             this.open = true;
         }
         async handleOpenChange() {
@@ -565,6 +575,7 @@ let UiSelect = (() => {
             const item = e.detail.item;
             this.selectedOption = item;
             this.#value = item.value;
+            this.#internals.setFormValue(this.value ?? null);
             this.open = false;
             // Dispatch change event
             const changeEvent = new CustomEvent('change', {
@@ -628,7 +639,7 @@ let UiSelect = (() => {
             // 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.setCurrentOption();
                 this.requestUpdate();
             }
         }

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 { 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"]}
+{"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 { 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.updateComplete.then(() => {\n      this.setCurrentOption()\n      this.#internals.setFormValue(this.value ?? null)\n      // We need to update here as event with `value` and `selectedOption`\n      // already set, the `renderValue` might have incorrect value\n      // due to the DOM update.\n      this.requestUpdate()\n    })\n  }\n\n  protected setCurrentOption(): void {\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    if (this.open && e.target === this) {\n      // If the select is already open and clicked again, close it\n      this.open = false\n      return\n    }\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.#internals.setFormValue(this.value ?? null)\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      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/demo/md/select/index.ts

@@ -45,22 +45,32 @@ class ComponentDemoPage extends DemoPage {
           <ui-option value="us">
             <ui-icon slot="start">🇺🇸</ui-icon>
             United States
+            <span slot="overline">North America</span>
+            <span slot="supporting-text">USA</span>
           </ui-option>
           <ui-option value="gb">
             <ui-icon slot="start">🇬🇧</ui-icon>
             United Kingdom
+            <span slot="overline">Europe</span>
+            <span slot="supporting-text">UK</span>
           </ui-option>
           <ui-option value="de">
             <ui-icon slot="start">🇩🇪</ui-icon>
             Germany
+            <span slot="overline">Europe</span>
+            <span slot="supporting-text">DE</span>
           </ui-option>
           <ui-option value="fr">
             <ui-icon slot="start">🇫🇷</ui-icon>
             France
+            <span slot="overline">Europe</span>
+            <span slot="supporting-text">FR</span>
           </ui-option>
           <ui-option value="jp">
             <ui-icon slot="start">🇯🇵</ui-icon>
             Japan
+            <span slot="overline">Asia</span>
+            <span slot="supporting-text">JP</span>
           </ui-option>
         </ui-select>
         <p>Selected: <span id="icon-result">None</span></p>
@@ -70,19 +80,19 @@ class ComponentDemoPage extends DemoPage {
         <h2>Select with Supporting Text</h2>
         <p>Select a user with additional information:</p>
         <ui-select id="supporting-select" @change="${this.handleSupportingSelectChange}">
-          <ui-option value="alice" lines="two">
+          <ui-option value="alice">
             Alice Johnson
             <span slot="supporting-text">alice@example.com</span>
           </ui-option>
-          <ui-option value="bob" lines="two">
+          <ui-option value="bob">
             Bob Smith
             <span slot="supporting-text">bob@example.com</span>
           </ui-option>
-          <ui-option value="carol" lines="two">
+          <ui-option value="carol">
             Carol Davis
             <span slot="supporting-text">carol@example.com</span>
           </ui-option>
-          <ui-option value="dave" lines="two">
+          <ui-option value="dave">
             Dave Wilson
             <span slot="supporting-text">dave@example.com</span>
           </ui-option>

package/package.json

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

package/src/md/list/internals/ListItem.styles.ts

@@ -3,7 +3,6 @@ import { css } from 'lit'
 export default css`
   :host {
     display: block;
-    height: 56px;
     outline: none;
     cursor: default;
     position: relative;
@@ -24,16 +23,6 @@ export default css`
     display: none;
   }
 
-  :host([lines='two']),
-  :host([lines='one'][image='image']) {
-    height: 72px;
-  }
-
-  :host([lines='three']),
-  :host([lines='one'][image='video']) {
-    height: 88px;
-  }
-
   .surface {
     height: inherit;
     box-sizing: border-box;
@@ -44,6 +33,17 @@ export default css`
     padding: 8px 16px 8px 16px;
 
     gap: 16px;
+    height: 56px;
+  }
+
+  :host([image='image']) .surface,
+  .surface.two-lines {
+    height: 72px;
+  }
+
+  :host([image='video']) .surface,
+  .surface.three-lines {
+    height: 88px;
   }
 
   .ripple {