@api-client/ui 0.5.24 → 0.5.26

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

@@ -0,0 +1,242 @@
+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 { nanoid } from 'nanoid';
+let UiOption = (() => {
+    let _classSuper = UiListItem;
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _selected_decorators;
+    let _selected_initializers = [];
+    let _selected_extraInitializers = [];
+    return class UiOption extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _value_decorators = [property({ type: String, reflect: true })];
+            _selected_decorators = [property({ type: Boolean, reflect: true })];
+            __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            __esDecorate(this, null, _selected_decorators, { kind: "accessor", name: "selected", static: false, private: false, access: { has: obj => "selected" in obj, get: obj => obj.selected, set: (obj, value) => { obj.selected = value; } }, metadata: _metadata }, _selected_initializers, _selected_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #value_accessor_storage = __runInitializers(this, _value_initializers, void 0);
+        /**
+         * The value associated with this option. Used to identify the option when selected.
+         * This value is what gets set on the parent select element when this option is chosen.
+         *
+         * @example
+         * ```html
+         * <ui-option value="apple">Apple</ui-option>
+         * <ui-option value="banana">Banana</ui-option>
+         * ```
+         */
+        get value() { return this.#value_accessor_storage; }
+        set value(value) { this.#value_accessor_storage = value; }
+        #selected_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _selected_initializers, false
+        /**
+         * Returns the text representation of this option for display purposes.
+         * This method extracts and combines text content from all child nodes,
+         * including special handling for ui-icon elements.
+         *
+         * @readonly
+         * @returns {string} The rendered text value of the option
+         * @example
+         * ```javascript
+         * const option = document.querySelector('ui-option');
+         * console.log('Option text:', option.renderValue);
+         * ```
+         */
+        ));
+        /**
+         * Whether this option is currently selected. This is typically managed automatically
+         * by the parent select component, but can be set manually for styling purposes.
+         *
+         * @default false
+         * @example
+         * ```html
+         * <ui-option value="apple" selected>Apple</ui-option>
+         * ```
+         */
+        get selected() { return this.#selected_accessor_storage; }
+        set selected(value) { this.#selected_accessor_storage = value; }
+        /**
+         * Returns the text representation of this option for display purposes.
+         * This method extracts and combines text content from all child nodes,
+         * including special handling for ui-icon elements.
+         *
+         * @readonly
+         * @returns {string} The rendered text value of the option
+         * @example
+         * ```javascript
+         * const option = document.querySelector('ui-option');
+         * console.log('Option text:', option.renderValue);
+         * ```
+         */
+        get renderValue() {
+            const slot = this.shadowRoot?.querySelector('slot:not([name])');
+            if (!slot)
+                return this.value || '';
+            const nodes = slot.assignedNodes({ flatten: true });
+            const content = [];
+            for (const node of nodes) {
+                if (node.nodeType === Node.TEXT_NODE) {
+                    content.push(node.textContent || '');
+                }
+                else if (node.nodeType === Node.ELEMENT_NODE) {
+                    const element = node;
+                    if (element.tagName.toLowerCase() === 'ui-icon') {
+                        content.push(element.getAttribute('icon') || '');
+                    }
+                    else {
+                        content.push(element.textContent || '');
+                    }
+                }
+            }
+            return content.join(' ').trim() || this.value || '';
+        }
+        /**
+         * 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();
+            this.setAttribute('role', 'option');
+            if (!this.id) {
+                this.id = `option-${nanoid(6)}`;
+            }
+        }
+        /**
+         * 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);
+            if (changedProperties.has('selected')) {
+                this.updateSelectionState();
+            }
+        }
+        /**
+         * Updates the visual and accessibility state when selection changes.
+         * Adds/removes CSS classes and ARIA attributes based on selection state.
+         *
+         * @protected
+         * @example
+         * ```javascript
+         * // This is called automatically when the selected property changes
+         * option.selected = true; // Will trigger updateSelectionState()
+         * ```
+         */
+        updateSelectionState() {
+            if (this.selected) {
+                this.classList.add('selected');
+                this.setAttribute('aria-selected', 'true');
+            }
+            else {
+                this.classList.remove('selected');
+                this.setAttribute('aria-selected', 'false');
+            }
+        }
+        /**
+         * 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
+         * @protected
+         * @fires select - Custom event with option details in event.detail
+         * @example
+         * ```javascript
+         * // Listen for option selection
+         * option.addEventListener('select', (e) => {
+         *   console.log('Selected option:', e.detail.item);
+         *   console.log('Selected value:', e.detail.value);
+         * });
+         * ```
+         */
+        handleClick(e) {
+            e.preventDefault();
+            if (this.disabled) {
+                e.stopPropagation();
+                return;
+            }
+            // Let the parent handle the selection
+            this.dispatchEvent(new CustomEvent('select', {
+                detail: {
+                    item: this,
+                    value: this.value,
+                },
+                bubbles: true,
+                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,
+                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
+         * when the option is selected.
+         */
+        renderEnd() {
+            return html `
+      <div class="end">
+        ${this.selected ? html `<ui-icon icon="check" class="selection-icon"></ui-icon>` : ''}
+        <slot name="end" @slotchange=${this.handleSlotChange}></slot>
+        <slot name="end-text" class="trailing-supporting-text"></slot>
+      </div>
+    `;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _selected_extraInitializers);
+        }
+    };
+})();
+/**
+ * Material Design 3 Select Option component.
+ *
+ * The `ui-option` component represents a selectable item within a `ui-select` dropdown.
+ * It extends `UiListItem` to provide consistent styling and behavior with other list components.
+ *
+ * @slot - The option content (label, icon, etc.)
+ * @slot start - Content to display at the start of the option (icon, avatar, etc.)
+ * @slot end - Content to display at the end of the option
+ * @slot supporting-text - Supporting text below the main content
+ * @fires select - Dispatched when the option is selected. Contains `{ item: UiOption, value: string }` in detail
+ *
+ * @example
+ * Basic option
+ * ```html
+ * <ui-option value="apple">Apple</ui-option>
+ * ```
+ *
+ * @example
+ * Option with supporting text
+ * ```html
+ * <ui-option value="john" lines="two">
+ *   John Doe
+ *   <span slot="supporting-text">john@example.com</span>
+ * </ui-option>
+ * ```
+ */
+export default UiOption;
+//# sourceMappingURL=Option.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Option.js","sourceRoot":"","sources":["../../../../../src/md/select/internals/Option.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAA;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AACtD,OAAO,UAAU,MAAM,kCAAkC,CAAA;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;;sBA6BO,UAAU;;;;;;;iBAA3B,QAAS,SAAQ,WAAU;;;iCAW7C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAYzC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;YAZA,oKAAS,KAAK,6BAAL,KAAK,qFAAoB;YAYjC,6KAAS,QAAQ,6BAAR,QAAQ,2FAAQ;;;QAZ1B,+EAAkC;QAV7E;;;;;;;;;WASG;QACwC,IAAS,KAAK,2CAAoB;QAAlC,IAAS,KAAK,iDAAoB;QAYjC,iIAAoB,KAAK;QAErE;;;;;;;;;;;;WAYG;WAdkE;QAVrE;;;;;;;;;WASG;QACyC,IAAS,QAAQ,8CAAQ;QAAzB,IAAS,QAAQ,oDAAQ;QAErE;;;;;;;;;;;;WAYG;QACH,IAAI,WAAW;YACb,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAkB,kBAAkB,CAAC,CAAA;YAChF,IAAI,CAAC,IAAI;gBAAE,OAAO,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;YAClC,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;YACnD,MAAM,OAAO,GAAa,EAAE,CAAA;YAC5B,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;gBACzB,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,SAAS,EAAE,CAAC;oBACrC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC,CAAA;gBACtC,CAAC;qBAAM,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,CAAC,YAAY,EAAE,CAAC;oBAC/C,MAAM,OAAO,GAAG,IAAmB,CAAA;oBACnC,IAAI,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,SAAS,EAAE,CAAC;wBAChD,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,CAAA;oBAClD,CAAC;yBAAM,CAAC;wBACN,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,IAAI,EAAE,CAAC,CAAA;oBACzC,CAAC;gBACH,CAAC;YACH,CAAC;YACD,OAAO,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QACrD,CAAC;QAED;;;;;WAKG;QACM,iBAAiB;YACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;YACzB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAA;YACnC,IAAI,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;gBACb,IAAI,CAAC,EAAE,GAAG,UAAU,MAAM,CAAC,CAAC,CAAC,EAAE,CAAA;YACjC,CAAC;QACH,CAAC;QAED;;;;;;WAMG;QACgB,OAAO,CAAC,iBAAuC;YAChE,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAA;YAEhC,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;gBACtC,IAAI,CAAC,oBAAoB,EAAE,CAAA;YAC7B,CAAC;QACH,CAAC;QAED;;;;;;;;;;WAUG;QACO,oBAAoB;YAC5B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAA;gBAC9B,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;YAC5C,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;gBACjC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAA;YAC7C,CAAC;QACH,CAAC;QAED;;;;;;;;;;;;;;;WAeG;QACM,WAAW,CAAC,CAAa;YAChC,CAAC,CAAC,cAAc,EAAE,CAAA;YAClB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,CAAC,CAAC,eAAe,EAAE,CAAA;gBACnB,OAAM;YACR,CAAC;YAED,sCAAsC;YACtC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,MAAM,EAAE;oBACN,IAAI,EAAE,IAAI;oBACV,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB;gBACD,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAA;QACH,CAAC;QAED;;;;;;WAMG;QACgB,MAAM;YACvB,MAAM,cAAc,GAAG,QAAQ,CAAC;gBAC9B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,CAAA;YAEF,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,eAAe,EAAE,IAAI,IAAI,CAAC,YAAY,EAAE;oBACjC,cAAc,KAAK,IAAI,CAAC,WAAW,EAAE,IAAI,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,SAAS,EAAE;KAC7F,CAAA;QACH,CAAC;QAED;;;WAGG;QACgB,SAAS;YAC1B,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,yDAAyD,CAAC,CAAC,CAAC,EAAE;uCACrD,IAAI,CAAC,gBAAgB;;;KAGvD,CAAA;QACH,CAAC;;;;;;;AA1MH;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAgLC","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: true,\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.handleSlotChange}></slot>\n        <slot name=\"end-text\" class=\"trailing-supporting-text\"></slot>\n      </div>\n    `\n  }\n}\n"]}

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

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

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

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

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

@@ -0,0 +1,139 @@
+import { css } from 'lit';
+export default css `
+  :host {
+    display: block;
+    height: 56px;
+    outline: none;
+    cursor: default;
+    position: relative;
+
+    --md-focus-ring-shape-end-end: 0px;
+    --md-focus-ring-shape-end-start: 0px;
+    --md-focus-ring-shape-start-end: 0px;
+    --md-focus-ring-shape-start-start: 0px;
+
+    color: var(--md-sys-color-on-surface);
+  }
+
+  :host([disabled]) {
+    cursor: not-allowed;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  .surface {
+    height: inherit;
+    box-sizing: border-box;
+
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+
+    padding: 8px 16px 8px 16px;
+    gap: 12px;
+  }
+
+  .surface.selected {
+    background-color: var(--md-sys-color-secondary-container);
+    color: var(--md-sys-color-on-secondary-container);
+  }
+
+  .ripple {
+    z-index: 3;
+  }
+
+  .headline {
+    font-family: var(--md-sys-typescale-body-large-font);
+    font-weight: var(--md-sys-typescale-body-large-weight);
+    font-size: var(--md-sys-typescale-body-large-size);
+    letter-spacing: var(--md-sys-typescale-body-large-tracking);
+    line-height: var(--md-sys-typescale-body-large-height);
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    display: flex;
+    align-items: center;
+  }
+
+  .supporting-text {
+    color: var(--md-sys-color-on-surface-variant);
+
+    font-family: var(--md-sys-typescale-body-medium-font);
+    font-weight: var(--md-sys-typescale-body-medium-weight);
+    font-size: var(--md-sys-typescale-body-medium-size);
+    letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+    line-height: var(--md-sys-typescale-body-medium-height);
+
+    overflow: hidden;
+  }
+
+  .supporting-text ::slotted(*),
+  slot[name='end-text']::slotted(*) {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+  }
+
+  slot[name='end-text']::slotted(*) {
+    margin-right: 8px;
+    margin-left: 16px;
+  }
+
+  :host slot[name='end']::slotted(*) {
+    color: var(--md-sys-color-on-surface-variant);
+    fill: var(--md-sys-color-on-surface-variant);
+    margin-left: 16px;
+  }
+
+  :host slot[name='start']::slotted(*) {
+    display: block;
+    margin-right: 16px;
+  }
+
+  :host([image='icon']) slot[name='start']::slotted(*) {
+    width: 24px;
+    height: 24px;
+  }
+
+  :host([image='avatar']) slot[name='start']::slotted(*) {
+    width: 40px;
+    height: 40px;
+  }
+
+  :host([image='image']) slot[name='start']::slotted(*) {
+    width: 56px;
+    height: 56px;
+  }
+
+  :host([image='video']) slot[name='start']::slotted(*) {
+    width: 114px;
+    height: 64px;
+  }
+
+  .body {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .end {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .selection-icon {
+    color: var(--md-sys-color-on-surface);
+  }
+
+  :host(.highlight) .surface {
+    background-color: var(--md-sys-color-tertiary-container);
+    color: var(--md-sys-color-on-tertiary-container);
+  }
+`;
+//# sourceMappingURL=Option.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Option.styles.js","sourceRoot":"","sources":["../../../../../src/md/select/internals/Option.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n  :host {\n    display: block;\n    height: 56px;\n    outline: none;\n    cursor: default;\n    position: relative;\n\n    --md-focus-ring-shape-end-end: 0px;\n    --md-focus-ring-shape-end-start: 0px;\n    --md-focus-ring-shape-start-end: 0px;\n    --md-focus-ring-shape-start-start: 0px;\n\n    color: var(--md-sys-color-on-surface);\n  }\n\n  :host([disabled]) {\n    cursor: not-allowed;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  .surface {\n    height: inherit;\n    box-sizing: border-box;\n\n    display: flex;\n    align-items: center;\n    overflow: hidden;\n\n    padding: 8px 16px 8px 16px;\n    gap: 12px;\n  }\n\n  .surface.selected {\n    background-color: var(--md-sys-color-secondary-container);\n    color: var(--md-sys-color-on-secondary-container);\n  }\n\n  .ripple {\n    z-index: 3;\n  }\n\n  .headline {\n    font-family: var(--md-sys-typescale-body-large-font);\n    font-weight: var(--md-sys-typescale-body-large-weight);\n    font-size: var(--md-sys-typescale-body-large-size);\n    letter-spacing: var(--md-sys-typescale-body-large-tracking);\n    line-height: var(--md-sys-typescale-body-large-height);\n\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    display: flex;\n    align-items: center;\n  }\n\n  .supporting-text {\n    color: var(--md-sys-color-on-surface-variant);\n\n    font-family: var(--md-sys-typescale-body-medium-font);\n    font-weight: var(--md-sys-typescale-body-medium-weight);\n    font-size: var(--md-sys-typescale-body-medium-size);\n    letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n    line-height: var(--md-sys-typescale-body-medium-height);\n\n    overflow: hidden;\n  }\n\n  .supporting-text ::slotted(*),\n  slot[name='end-text']::slotted(*) {\n    margin: 0;\n    padding: 0;\n    overflow: hidden;\n  }\n\n  slot[name='end-text']::slotted(*) {\n    margin-right: 8px;\n    margin-left: 16px;\n  }\n\n  :host slot[name='end']::slotted(*) {\n    color: var(--md-sys-color-on-surface-variant);\n    fill: var(--md-sys-color-on-surface-variant);\n    margin-left: 16px;\n  }\n\n  :host slot[name='start']::slotted(*) {\n    display: block;\n    margin-right: 16px;\n  }\n\n  :host([image='icon']) slot[name='start']::slotted(*) {\n    width: 24px;\n    height: 24px;\n  }\n\n  :host([image='avatar']) slot[name='start']::slotted(*) {\n    width: 40px;\n    height: 40px;\n  }\n\n  :host([image='image']) slot[name='start']::slotted(*) {\n    width: 56px;\n    height: 56px;\n  }\n\n  :host([image='video']) slot[name='start']::slotted(*) {\n    width: 114px;\n    height: 64px;\n  }\n\n  .body {\n    flex: 1;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n  }\n\n  .end {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .selection-icon {\n    color: var(--md-sys-color-on-surface);\n  }\n\n  :host(.highlight) .surface {\n    background-color: var(--md-sys-color-tertiary-container);\n    color: var(--md-sys-color-on-tertiary-container);\n  }\n`\n"]}

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

@@ -0,0 +1,250 @@
+import { LitElement, PropertyValues, TemplateResult } from 'lit';
+import type UiOption from './Option.js';
+import type { UiMenuElement } from '../../menu/ui-menu.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';
+export interface UiSelectChangeEvent {
+    value: string | undefined;
+    item: UiOption | null;
+}
+/**
+ * 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 class UiSelect extends LitElement {
+    #private;
+    static readonly formAssociated = true;
+    /**
+     * 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(): string | undefined;
+    set value(newValue: string | undefined);
+    /**
+     * 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>
+     * ```
+     */
+    accessor name: string | undefined;
+    /**
+     * 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>
+     * ```
+     */
+    accessor label: string | undefined;
+    /**
+     * 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>
+     * ```
+     */
+    accessor required: boolean;
+    /**
+     * 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>
+     * ```
+     */
+    accessor invalid: boolean | undefined;
+    /**
+     * 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>
+     * ```
+     */
+    accessor invalidText: string | undefined;
+    /**
+     * 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>
+     * ```
+     */
+    accessor disabled: boolean;
+    /**
+     * 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;
+     * ```
+     */
+    accessor open: boolean;
+    accessor selectedOption: UiOption | null;
+    accessor ariaActiveDescendant: string | undefined;
+    accessor menu: UiMenuElement;
+    /**
+     * 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(): UiOption | null;
+    /**
+     * 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(): string;
+    /**
+     * Returns the form element that contains this select, if any.
+     * Part of the form-associated custom element API.
+     *
+     * @readonly
+     */
+    get form(): HTMLFormElement | null;
+    /**
+     * Returns the validity state of the select element.
+     * Part of the form-associated custom element API.
+     *
+     * @readonly
+     */
+    get validity(): ValidityState;
+    /**
+     * Returns the validation message for the select element.
+     * Part of the form-associated custom element API.
+     *
+     * @readonly
+     */
+    get validationMessage(): string;
+    /**
+     * Returns whether the select element will be validated when the form is submitted.
+     * Part of the form-associated custom element API.
+     *
+     * @readonly
+     */
+    get willValidate(): boolean;
+    /**
+     * 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(): boolean;
+    constructor();
+    connectedCallback(): void;
+    /**
+     * 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(): void;
+    /**
+     * 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: string | null): void;
+    /**
+     * 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(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected setCurrentOption(): Promise<void>;
+    protected handleKeydown(e: KeyboardEvent): void;
+    protected handleBlur(e: FocusEvent): void;
+    protected handleClick(e: Event): void;
+    protected handleOpenChange(): Promise<void>;
+    handleSelect(e: CustomEvent<{
+        item: UiOption;
+    }>): void;
+    handleHighlightChange(e: CustomEvent<{
+        item: UiOption | null;
+    }>): void;
+    handleMenuClose(): void;
+    render(): TemplateResult;
+    protected renderInput(): TemplateResult;
+    protected renderMenu(): TemplateResult;
+    protected renderFocusRing(): TemplateResult;
+}
+//# sourceMappingURL=Select.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../../src/md/select/internals/Select.ts"],"names":[],"mappings":"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"}