@api-client/ui 0.5.24 → 0.5.26

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

@@ -0,0 +1,606 @@
+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 { setDisabled } from '../../../lib/disabled.js';
+import '../../text-field/ui-outlined-text-field.js';
+import '../../menu/ui-menu.js';
+import '../../icons/ui-icon.js';
+import '@material/web/focus/md-focus-ring.js';
+let UiSelect = (() => {
+    let _classSuper = LitElement;
+    let _instanceExtraInitializers = [];
+    let _set_value_decorators;
+    let _name_decorators;
+    let _name_initializers = [];
+    let _name_extraInitializers = [];
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _required_decorators;
+    let _required_initializers = [];
+    let _required_extraInitializers = [];
+    let _invalid_decorators;
+    let _invalid_initializers = [];
+    let _invalid_extraInitializers = [];
+    let _invalidText_decorators;
+    let _invalidText_initializers = [];
+    let _invalidText_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _open_decorators;
+    let _open_initializers = [];
+    let _open_extraInitializers = [];
+    let _selectedOption_decorators;
+    let _selectedOption_initializers = [];
+    let _selectedOption_extraInitializers = [];
+    let _ariaActiveDescendant_decorators;
+    let _ariaActiveDescendant_initializers = [];
+    let _ariaActiveDescendant_extraInitializers = [];
+    let _menu_decorators;
+    let _menu_initializers = [];
+    let _menu_extraInitializers = [];
+    return class UiSelect extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _set_value_decorators = [property({ type: String })];
+            _name_decorators = [property({ type: String })];
+            _label_decorators = [property({ type: String })];
+            _required_decorators = [property({ type: Boolean })];
+            _invalid_decorators = [property({ type: Boolean })];
+            _invalidText_decorators = [property({ type: String })];
+            _disabled_decorators = [property({ type: Boolean, reflect: true })];
+            _open_decorators = [property({ type: Boolean, reflect: true })];
+            _selectedOption_decorators = [state()];
+            _ariaActiveDescendant_decorators = [state()];
+            _menu_decorators = [query('.menu')];
+            __esDecorate(this, null, _set_value_decorators, { kind: "setter", name: "value", static: false, private: false, access: { has: obj => "value" in obj, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
+            __esDecorate(this, null, _label_decorators, { kind: "accessor", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            __esDecorate(this, null, _required_decorators, { kind: "accessor", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
+            __esDecorate(this, null, _invalid_decorators, { kind: "accessor", name: "invalid", static: false, private: false, access: { has: obj => "invalid" in obj, get: obj => obj.invalid, set: (obj, value) => { obj.invalid = value; } }, metadata: _metadata }, _invalid_initializers, _invalid_extraInitializers);
+            __esDecorate(this, null, _invalidText_decorators, { kind: "accessor", name: "invalidText", static: false, private: false, access: { has: obj => "invalidText" in obj, get: obj => obj.invalidText, set: (obj, value) => { obj.invalidText = value; } }, metadata: _metadata }, _invalidText_initializers, _invalidText_extraInitializers);
+            __esDecorate(this, null, _disabled_decorators, { kind: "accessor", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+            __esDecorate(this, null, _open_decorators, { kind: "accessor", name: "open", static: false, private: false, access: { has: obj => "open" in obj, get: obj => obj.open, set: (obj, value) => { obj.open = value; } }, metadata: _metadata }, _open_initializers, _open_extraInitializers);
+            __esDecorate(this, null, _selectedOption_decorators, { kind: "accessor", name: "selectedOption", static: false, private: false, access: { has: obj => "selectedOption" in obj, get: obj => obj.selectedOption, set: (obj, value) => { obj.selectedOption = value; } }, metadata: _metadata }, _selectedOption_initializers, _selectedOption_extraInitializers);
+            __esDecorate(this, null, _ariaActiveDescendant_decorators, { kind: "accessor", name: "ariaActiveDescendant", static: false, private: false, access: { has: obj => "ariaActiveDescendant" in obj, get: obj => obj.ariaActiveDescendant, set: (obj, value) => { obj.ariaActiveDescendant = value; } }, metadata: _metadata }, _ariaActiveDescendant_initializers, _ariaActiveDescendant_extraInitializers);
+            __esDecorate(this, null, _menu_decorators, { kind: "accessor", name: "menu", static: false, private: false, access: { has: obj => "menu" in obj, get: obj => obj.menu, set: (obj, value) => { obj.menu = value; } }, metadata: _metadata }, _menu_initializers, _menu_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static formAssociated = true;
+        #internals = (__runInitializers(this, _instanceExtraInitializers), this.attachInternals());
+        /**
+         * The value has a private member so that we can set the value without triggering
+         * the side effects.
+         */
+        #value;
+        /**
+         * The currently selected value. Corresponds to the `value` attribute of the selected `ui-option`.
+         * When set programmatically, it will update the selected option if a matching option exists.
+         *
+         * @example
+         * ```html
+         * <ui-select value="apple">
+         *   <ui-option value="apple">Apple</ui-option>
+         *   <ui-option value="banana">Banana</ui-option>
+         * </ui-select>
+         * ```
+         */
+        get value() {
+            return this.#value;
+        }
+        set value(newValue) {
+            const oldValue = this.#value;
+            if (newValue === oldValue)
+                return;
+            this.#value = newValue;
+            this.requestUpdate();
+        }
+        #name_accessor_storage = __runInitializers(this, _name_initializers, void 0);
+        /**
+         * The name attribute for form submission. This value will be used as the key
+         * when the form is submitted.
+         *
+         * @example
+         * ```html
+         * <ui-select name="country" value="us">
+         *   <ui-option value="us">United States</ui-option>
+         * </ui-select>
+         * ```
+         */
+        get name() { return this.#name_accessor_storage; }
+        set name(value) { this.#name_accessor_storage = value; }
+        #label_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _label_initializers, void 0));
+        /**
+         * The label text displayed in the select field. Provides accessible labeling
+         * and is shown as the floating label in the outlined text field.
+         *
+         * @example
+         * ```html
+         * <ui-select label="Select a country">
+         *   <ui-option value="us">United States</ui-option>
+         * </ui-select>
+         * ```
+         */
+        get label() { return this.#label_accessor_storage; }
+        set label(value) { this.#label_accessor_storage = value; }
+        #required_accessor_storage = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _required_initializers, false
+        /**
+         * Whether the select is in an invalid state. This is typically set automatically
+         * during validation, but can be set manually to indicate validation errors.
+         *
+         * @example
+         * ```html
+         * <ui-select invalid invalidText="Please select a valid option">
+         *   <ui-option value="option1">Option 1</ui-option>
+         * </ui-select>
+         * ```
+         */
+        ));
+        /**
+         * Whether the select is required for form validation. When true, the select
+         * must have a value selected for the form to be valid.
+         *
+         * @default false
+         * @example
+         * ```html
+         * <ui-select required label="Required field">
+         *   <ui-option value="option1">Option 1</ui-option>
+         * </ui-select>
+         * ```
+         */
+        get required() { return this.#required_accessor_storage; }
+        set required(value) { this.#required_accessor_storage = value; }
+        #invalid_accessor_storage = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _invalid_initializers, void 0));
+        /**
+         * Whether the select is in an invalid state. This is typically set automatically
+         * during validation, but can be set manually to indicate validation errors.
+         *
+         * @example
+         * ```html
+         * <ui-select invalid invalidText="Please select a valid option">
+         *   <ui-option value="option1">Option 1</ui-option>
+         * </ui-select>
+         * ```
+         */
+        get invalid() { return this.#invalid_accessor_storage; }
+        set invalid(value) { this.#invalid_accessor_storage = value; }
+        #invalidText_accessor_storage = (__runInitializers(this, _invalid_extraInitializers), __runInitializers(this, _invalidText_initializers, void 0));
+        /**
+         * The error message to display when the select is invalid. This text is shown
+         * below the select field when `invalid` is true.
+         *
+         * @example
+         * ```html
+         * <ui-select invalid invalidText="This field is required">
+         *   <ui-option value="option1">Option 1</ui-option>
+         * </ui-select>
+         * ```
+         */
+        get invalidText() { return this.#invalidText_accessor_storage; }
+        set invalidText(value) { this.#invalidText_accessor_storage = value; }
+        #disabled_accessor_storage = (__runInitializers(this, _invalidText_extraInitializers), __runInitializers(this, _disabled_initializers, false
+        /**
+         * Whether the dropdown menu is currently open. This property reflects the
+         * current state of the dropdown and can be set programmatically to open/close it.
+         *
+         * @default false
+         * @example
+         * ```javascript
+         * // Open the dropdown programmatically
+         * selectElement.open = true;
+         *
+         * // Close the dropdown
+         * selectElement.open = false;
+         * ```
+         */
+        ));
+        /**
+         * Whether the select is disabled. When disabled, the select cannot be interacted
+         * with and will not receive focus or respond to user input.
+         *
+         * @default false
+         * @example
+         * ```html
+         * <ui-select disabled label="Disabled select">
+         *   <ui-option value="option1">Option 1</ui-option>
+         * </ui-select>
+         * ```
+         */
+        get disabled() { return this.#disabled_accessor_storage; }
+        set disabled(value) { this.#disabled_accessor_storage = value; }
+        #open_accessor_storage = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _open_initializers, false));
+        /**
+         * Whether the dropdown menu is currently open. This property reflects the
+         * current state of the dropdown and can be set programmatically to open/close it.
+         *
+         * @default false
+         * @example
+         * ```javascript
+         * // Open the dropdown programmatically
+         * selectElement.open = true;
+         *
+         * // Close the dropdown
+         * selectElement.open = false;
+         * ```
+         */
+        get open() { return this.#open_accessor_storage; }
+        set open(value) { this.#open_accessor_storage = value; }
+        #selectedOption_accessor_storage = (__runInitializers(this, _open_extraInitializers), __runInitializers(this, _selectedOption_initializers, null));
+        get selectedOption() { return this.#selectedOption_accessor_storage; }
+        set selectedOption(value) { this.#selectedOption_accessor_storage = value; }
+        #ariaActiveDescendant_accessor_storage = (__runInitializers(this, _selectedOption_extraInitializers), __runInitializers(this, _ariaActiveDescendant_initializers, void 0));
+        get ariaActiveDescendant() { return this.#ariaActiveDescendant_accessor_storage; }
+        set ariaActiveDescendant(value) { this.#ariaActiveDescendant_accessor_storage = value; }
+        #menu_accessor_storage = (__runInitializers(this, _ariaActiveDescendant_extraInitializers), __runInitializers(this, _menu_initializers, void 0));
+        get menu() { return this.#menu_accessor_storage; }
+        set menu(value) { this.#menu_accessor_storage = value; }
+        /**
+         * Returns the currently selected option element. This provides access to the
+         * full `ui-option` element, not just its value.
+         *
+         * @readonly
+         * @example
+         * ```javascript
+         * const select = document.querySelector('ui-select');
+         * const selectedItem = select.selectedItem;
+         * if (selectedItem) {
+         *   console.log('Selected option:', selectedItem.textContent);
+         * }
+         * ```
+         */
+        get selectedItem() {
+            return this.selectedOption;
+        }
+        /**
+         * Returns the text content that should be displayed in the select field.
+         * This is the rendered value of the currently selected option.
+         *
+         * @readonly
+         * @example
+         * ```javascript
+         * const select = document.querySelector('ui-select');
+         * console.log('Display text:', select.renderValue);
+         * ```
+         */
+        get renderValue() {
+            const item = this.selectedOption;
+            return item ? item.renderValue : '';
+        }
+        /**
+         * Returns the form element that contains this select, if any.
+         * Part of the form-associated custom element API.
+         *
+         * @readonly
+         */
+        get form() {
+            return this.#internals.form;
+        }
+        /**
+         * Returns the validity state of the select element.
+         * Part of the form-associated custom element API.
+         *
+         * @readonly
+         */
+        get validity() {
+            return this.#internals.validity;
+        }
+        /**
+         * Returns the validation message for the select element.
+         * Part of the form-associated custom element API.
+         *
+         * @readonly
+         */
+        get validationMessage() {
+            return this.#internals.validationMessage;
+        }
+        /**
+         * Returns whether the select element will be validated when the form is submitted.
+         * Part of the form-associated custom element API.
+         *
+         * @readonly
+         */
+        get willValidate() {
+            return this.#internals.willValidate;
+        }
+        /**
+         * Checks the validity of the select element and returns true if valid.
+         * Part of the form-associated custom element API.
+         *
+         * @returns {boolean} True if the element is valid, false otherwise
+         * @example
+         * ```javascript
+         * const select = document.querySelector('ui-select');
+         * if (!select.checkValidity()) {
+         *   console.log('Select is invalid:', select.validationMessage);
+         * }
+         * ```
+         */
+        checkValidity() {
+            return this.#internals.checkValidity();
+        }
+        constructor() {
+            super();
+            __runInitializers(this, _menu_extraInitializers);
+            this.addEventListener('click', this.handleClick.bind(this));
+            this.addEventListener('blur', this.handleBlur.bind(this));
+            this.addEventListener('keydown', this.handleKeydown.bind(this));
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            this.setAttribute('role', 'combobox');
+            this.setAttribute('aria-haspopup', 'listbox');
+            this.setAttribute('aria-controls', 'menu');
+            if (!this.disabled) {
+                this.setAttribute('tabindex', '0');
+            }
+        }
+        /**
+         * Resets the select to its initial state. Called automatically when the parent
+         * form is reset. Part of the form-associated custom element API.
+         *
+         * @example
+         * ```javascript
+         * const select = document.querySelector('ui-select');
+         * select.formResetCallback(); // Clears the selection
+         * ```
+         */
+        formResetCallback() {
+            this.value = undefined;
+        }
+        /**
+         * Restores the select's state from saved form data. Called automatically when
+         * the browser restores form state. Part of the form-associated custom element API.
+         *
+         * @param {string | null} state - The saved state to restore
+         */
+        formStateRestoreCallback(state) {
+            this.value = state ?? undefined;
+        }
+        /**
+         * Validates the select element and updates its validity state. This is called
+         * automatically during property changes, but can be called manually to trigger validation.
+         *
+         * @example
+         * ```javascript
+         * const select = document.querySelector('ui-select');
+         * select.validate();
+         * if (select.invalid) {
+         *   console.log('Validation failed:', select.invalidText);
+         * }
+         * ```
+         */
+        validate() {
+            let message = '';
+            if (this.required && !this.value) {
+                message = 'Please select an item.';
+                this.#internals.setValidity({ valueMissing: true }, message);
+            }
+            else {
+                this.#internals.setValidity({});
+            }
+            this.invalid = !this.#internals.validity.valid;
+            this.invalidText = message;
+        }
+        willUpdate(changedProperties) {
+            super.willUpdate(changedProperties);
+            if (changedProperties.has('disabled')) {
+                setDisabled(this, this.disabled);
+            }
+            if (changedProperties.has('open')) {
+                this.handleOpenChange();
+            }
+            if (changedProperties.has('value')) {
+                this.setCurrentOption();
+                this.#internals.setFormValue(this.value ?? null);
+                this.validate();
+            }
+            if (changedProperties.has('label')) {
+                if (this.label) {
+                    this.setAttribute('aria-label', this.label);
+                }
+                else {
+                    this.removeAttribute('aria-label');
+                }
+            }
+        }
+        async setCurrentOption() {
+            await this.updateComplete;
+            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;
+            }
+        }
+        handleKeydown(e) {
+            if (this.disabled || e.defaultPrevented)
+                return;
+            if (this.open) {
+                switch (e.key) {
+                    case 'Tab': {
+                        // If menu is open and Tab is pressed, close it and allow normal tab navigation
+                        if (this.open) {
+                            this.open = false;
+                        }
+                        break;
+                    }
+                    case 'Escape': {
+                        if (this.open) {
+                            e.preventDefault();
+                            this.open = false;
+                            this.focus(); // Return focus to the select element
+                        }
+                        break;
+                    }
+                    case 'ArrowDown':
+                        e.preventDefault();
+                        this.menu.highlightNext();
+                        return;
+                    case 'ArrowUp':
+                        e.preventDefault();
+                        this.menu.highlightPrevious();
+                        return;
+                    case 'Home':
+                        e.preventDefault();
+                        this.menu.highlightFirst();
+                        return;
+                    case 'End':
+                        e.preventDefault();
+                        this.menu.highlightLast();
+                        return;
+                    case 'Enter':
+                    case ' ':
+                        if (this.menu.highlightListItem) {
+                            e.preventDefault();
+                            this.menu.notifySelect(this.menu.highlightListItem);
+                        }
+                        return;
+                }
+            }
+            else {
+                switch (e.key) {
+                    case 'Enter':
+                    case ' ': {
+                        if (!this.open) {
+                            e.preventDefault();
+                            this.open = true;
+                        }
+                        break;
+                    }
+                    case 'ArrowDown':
+                    case 'ArrowUp': {
+                        if (!this.open) {
+                            e.preventDefault();
+                            this.open = true;
+                        }
+                        // If menu is open, let the menu handle arrow keys
+                        break;
+                    }
+                }
+            }
+        }
+        handleBlur(e) {
+            if (this.disabled)
+                return;
+            // Check if focus is moving to the menu or one of its children
+            const relatedTarget = e.relatedTarget;
+            if (relatedTarget && this.contains(relatedTarget)) {
+                // Focus is moving to the menu, keep it open
+                return;
+            }
+            // Close the menu when focus leaves the component
+            this.open = false;
+        }
+        handleClick(e) {
+            if (this.disabled || e.defaultPrevented)
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            this.open = true;
+        }
+        async handleOpenChange() {
+            const menu = this.menu;
+            if (!menu) {
+                // The status can be set before the menu is rendered
+                return;
+            }
+            this.setAttribute('aria-expanded', String(this.open));
+            if (this.open) {
+                menu.showPopover();
+                // menu.focus()
+                if (this.selectedOption) {
+                    this.menu.highlightItem(this.selectedOption);
+                }
+                else {
+                    this.menu.highlightFirst();
+                }
+                this.dispatchEvent(new CustomEvent('open', { bubbles: false, composed: true }));
+                this.focus();
+            }
+            else {
+                menu.hidePopover();
+                this.dispatchEvent(new CustomEvent('close', { bubbles: false, composed: true }));
+            }
+        }
+        handleSelect(e) {
+            e.stopPropagation();
+            const item = e.detail.item;
+            this.selectedOption = item;
+            this.#value = item.value;
+            this.open = false;
+            // Dispatch change event
+            const changeEvent = new CustomEvent('change', {
+                detail: { value: this.value, item: item },
+                bubbles: false,
+                composed: true,
+            });
+            this.dispatchEvent(changeEvent);
+            this.focus();
+        }
+        handleHighlightChange(e) {
+            this.ariaActiveDescendant = e.detail.item?.id;
+        }
+        handleMenuClose() {
+            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() {
+            return html `<ui-outlined-text-field
+      .name=${this.name}
+      .label=${this.label}
+      .value=${this.renderValue}
+      .disabled=${this.disabled}
+      .required=${this.required}
+      readonly
+      tabindex="-1"
+      inert
+      aria-hidden="true"
+      .invalid=${this.invalid}
+      .invalidText=${this.invalidText || ''}
+      class="input"
+    >
+      <ui-icon slot="suffix">arrow_drop_down</ui-icon>
+    </ui-outlined-text-field>`;
+        }
+        renderMenu() {
+            return html `<ui-menu
+      id="menu"
+      class="menu"
+      popover="auto"
+      selector="ui-option"
+      @select="${this.handleSelect}"
+      @close="${this.handleMenuClose}"
+      @highlightchange="${this.handleHighlightChange}"
+    >
+      <slot></slot>
+    </ui-menu>`;
+        }
+        renderFocusRing() {
+            return html `<md-focus-ring part="focus-ring" class="focus-ring" .control="${this}"></md-focus-ring>`;
+        }
+    };
+})();
+/**
+ * Material Design 3 Select component that behaves like an outlined text field with dropdown.
+ *
+ * @fires change - Dispatched when the selection changes. The event is non-bubbling and non-cancelable.
+ *                 The `event.detail` object contains the `value` and `item` properties.
+ * @fires open - Dispatched when the dropdown opens
+ * @fires close - Dispatched when the dropdown closes
+ */
+export default UiSelect;
+//# sourceMappingURL=Select.js.map

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

@@ -0,0 +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   * @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   * @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   * @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   * @default false\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   * @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   * @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   * 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   * @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 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      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"]}

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

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=Select.styles.d.ts.map

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

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