@pine-ds/core 3.3.0 → 3.4.1

package/dist/collection/components/pds-combobox/pds-combobox.js

@@ -0,0 +1,783 @@
+import { h, Host } from "@stencil/core";
+import { computePosition, flip, offset, shift } from "@floating-ui/dom";
+import DOMPurify from "dompurify";
+/**
+ * @slot option - Option elements for the combobox dropdown
+ * @slot trigger-content - Custom content for the button trigger when customTriggerContent is true
+ */
+export class PdsCombobox {
+    constructor() {
+        /**
+         * Enable custom layout content for options. Options with data-layout attribute will render their HTML content.
+         * ⚠️ Security Warning: Only use with trusted content. Basic XSS protection is applied, but avoid user-generated content.
+         * @default false
+         */
+        this.customOptionLayouts = false;
+        /**
+         * Enable custom layout content for the button trigger via the trigger-content slot.
+         * When true, uses slot content for initial state but updates dynamically with selected option layout.
+         * ⚠️ Security Warning: Only use with trusted content. Basic XSS protection is applied, but avoid user-generated content.
+         * @default false
+         */
+        this.customTriggerContent = false;
+        /**
+         * If true, the combobox is disabled.
+         */
+        this.disabled = false;
+        /**
+         * Placement of the dropdown relative to the trigger.
+         * @default 'bottom-start'
+         */
+        this.dropdownPlacement = 'bottom-start';
+        /**
+         * Width of the dropdown. Any valid CSS width value.
+         * @default '236px'
+         */
+        this.dropdownWidth = '236px';
+        /**
+         * Visually hides the label text for instances where only the combobox should be displayed.
+         * Label remains accessible to assistive technology such as screen readers.
+         */
+        this.hideLabel = false;
+        /**
+         * Determines the combobox mode: 'filter' (filter options as you type) or 'select-only' (show all options).
+         * @default 'filter'
+         */
+        this.mode = 'filter';
+        /**
+         * Determines the combobox trigger: 'input' (editable input) or 'button' (button-like, non-editable).
+         * @default 'input'
+         */
+        this.trigger = 'input';
+        /**
+         * Width of the trigger (button or input). Any valid CSS width value.
+         * @default 'fit-content'
+         */
+        this.triggerWidth = 'fit-content';
+        /**
+         * The visual variant for the button trigger. Matches Pine button variants.
+         * @default 'secondary'
+         */
+        this.triggerVariant = 'secondary';
+        /**
+         * The value of the combobox input.
+         */
+        this.value = '';
+        /**
+         * Internal state for filtered options
+         */
+        this.filteredOptions = [];
+        /**
+         * Internal state for the currently highlighted option index
+         */
+        this.highlightedIndex = -1;
+        /**
+         * Internal state for dropdown open/close
+         */
+        this.isOpen = false;
+        /**
+         * Internal state for the currently selected option
+         */
+        this.selectedOption = null;
+        /**
+         * Internal state for the sanitized layout content of the selected option
+         */
+        this.selectedOptionLayoutContent = '';
+        this.optionEls = [];
+        this.handleInput = (e) => {
+            const target = e.target;
+            this.value = target.value;
+            this.isOpen = true;
+            this.filterOptions();
+            setTimeout(() => this.openDropdownPositioning(), 0);
+        };
+        this.handleFocus = () => {
+            this.isOpen = true;
+            this.filterOptions();
+            setTimeout(() => this.openDropdownPositioning(), 0);
+        };
+        this.handleKeyDown = (e) => {
+            if (!this.isOpen && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+                this.isOpen = true;
+                return;
+            }
+            switch (e.key) {
+                case 'ArrowDown':
+                    this.highlightedIndex = Math.min(this.highlightedIndex + 1, this.filteredOptions.length - 1);
+                    break;
+                case 'ArrowUp':
+                    this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
+                    break;
+                case 'Enter':
+                    if (this.isOpen && this.highlightedIndex >= 0 && this.highlightedIndex < this.filteredOptions.length) {
+                        this.handleOptionClick(this.filteredOptions[this.highlightedIndex]);
+                    }
+                    break;
+                case 'Escape':
+                    this.isOpen = false;
+                    break;
+            }
+        };
+        // Event handler for option click
+        this.onOptionClick = (event) => {
+            const idx = Number(event.currentTarget.getAttribute('data-option-index'));
+            const option = this.filteredOptions[idx];
+            this.handleOptionClick(option);
+        };
+        // Event handler for mouse enter on option
+        this.onOptionMouseEnter = (event) => {
+            const idx = Number(event.currentTarget.getAttribute('data-option-index'));
+            this.highlightedIndex = idx;
+        };
+        // Prevent blur on mousedown
+        this.onOptionMouseDown = (event) => {
+            event.preventDefault();
+        };
+        // Handler for button trigger click
+        this.onButtonTriggerClick = () => {
+            this.isOpen = !this.isOpen;
+            if (this.isOpen)
+                setTimeout(() => this.openDropdownPositioning(), 0);
+        };
+        // Handler for button trigger keyboard events
+        this.onButtonTriggerKeyDown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown') {
+                e.preventDefault();
+                this.isOpen = true;
+                this.highlightedIndex = 0;
+                setTimeout(() => this.openDropdownPositioning(), 0);
+            }
+            else if (e.key === 'Escape') {
+                this.isOpen = false;
+            }
+        };
+        // Close dropdown when focus leaves the combobox
+        this.onComboboxFocusOut = (event) => {
+            const relatedTarget = event.relatedTarget;
+            if (!this.el.contains(relatedTarget)) {
+                this.isOpen = false;
+                // If there's a selected option but the input value doesn't match, restore the selected option's value
+                if (this.selectedOption && this.value !== this.getOptionLabel(this.selectedOption)) {
+                    this.value = this.getOptionLabel(this.selectedOption);
+                }
+            }
+        };
+    }
+    componentWillLoad() {
+        this.updateOptions();
+    }
+    handleValueChange() {
+        this.filterOptions();
+    }
+    handleSelectedOptionChange() {
+        // Update the layout content when selected option changes
+        this.selectedOptionLayoutContent = this.selectedOption && this.isOptionLayout(this.selectedOption)
+            ? this.getOptionLayoutContent(this.selectedOption)
+            : '';
+    }
+    updateOptions() {
+        var _a;
+        // Get all <option> elements from the slot
+        const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="option"], slot:not([name])');
+        if (slot) {
+            this.optionEls = slot.assignedElements({ flatten: true })
+                .filter(el => el.tagName === 'OPTION');
+            // Set initial selected option if one exists (only check DOM on initialization)
+            if (!this.selectedOption) {
+                const initialSelected = this.optionEls.find(opt => opt.hasAttribute('selected')) || null;
+                this.setSelectedOption(initialSelected);
+            }
+            this.filterOptions();
+        }
+    }
+    // Helper method to get option label, falling back to text content if no label attribute
+    getOptionLabel(option) {
+        return option.label || option.textContent || '';
+    }
+    // Helper method to get option layout content
+    getOptionLayoutContent(option) {
+        return this.sanitizeHtml(option.innerHTML || '');
+    }
+    // HTML sanitization using DOMPurify library to prevent XSS attacks
+    sanitizeHtml(html) {
+        // Configure DOMPurify to allow Pine Design System components while removing dangerous content
+        const config = {
+            // Allow all custom elements (including pds-* components)
+            CUSTOM_ELEMENT_HANDLING: {
+                tagNameCheck: (tagName) => {
+                    // Allow all pds-* tags and standard safe HTML tags
+                    return tagName.startsWith('pds-') || /^[a-z]+$/i.test(tagName);
+                },
+                attributeNameCheck: (attr) => {
+                    // Allow standard HTML attributes, data-* attributes, and Pine component attributes
+                    return /^[a-zA-Z][a-zA-Z0-9-]*$/.test(attr) || attr.startsWith('data-') || attr.startsWith('aria-');
+                },
+                allowCustomizedBuiltInElements: false,
+            },
+            // Allow standard safe attributes
+            ALLOW_DATA_ATTR: true,
+            ALLOW_ARIA_ATTR: true,
+            // Specifically forbid dangerous tags
+            FORBID_TAGS: ['script', 'iframe', 'object', 'embed', 'form', 'input', 'textarea', 'select', 'button', 'style'],
+            // Forbid all event handler attributes
+            FORBID_ATTR: [
+                'onerror', 'onload', 'onclick', 'onmouseover', 'onmouseout', 'onmousemove',
+                'onfocus', 'onblur', 'onchange', 'onsubmit', 'onkeydown', 'onkeyup', 'onkeypress',
+                'onmousedown', 'onmouseup', 'ondblclick', 'oncontextmenu', 'onscroll'
+            ],
+            // Safe protocol whitelist
+            ALLOWED_URI_REGEXP: /^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp|data):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i,
+        };
+        return DOMPurify.sanitize(html, config);
+    }
+    // Helper method to check if option should render as layout
+    isOptionLayout(option) {
+        return this.customOptionLayouts && option.hasAttribute('data-layout');
+    }
+    // Helper method to check if option is selected (single source of truth)
+    isOptionSelected(option) {
+        return this.selectedOption === option;
+    }
+    // Helper method to set selected option (centralized state management)
+    setSelectedOption(option) {
+        this.selectedOption = option;
+    }
+    filterOptions() {
+        if (this.mode === 'select-only') {
+            this.filteredOptions = this.optionEls;
+        }
+        else {
+            const val = this.value.toLowerCase();
+            this.filteredOptions = this.optionEls.filter(option => {
+                // For layout options, search both text content and data-search-text attribute
+                if (this.isOptionLayout(option)) {
+                    const searchText = option.getAttribute('data-search-text') || option.textContent || '';
+                    return searchText.toLowerCase().includes(val);
+                }
+                return this.getOptionLabel(option).toLowerCase().includes(val);
+            });
+        }
+        this.highlightedIndex = -1;
+    }
+    openDropdownPositioning() {
+        if (this.triggerEl && this.listboxEl) {
+            // Apply width and max-height BEFORE positioning calculations
+            this.listboxEl.style.width = this.dropdownWidth;
+            if (this.maxHeight) {
+                this.listboxEl.style.maxHeight = this.maxHeight;
+                this.listboxEl.style.overflowY = 'auto';
+            }
+            // Force a reflow to ensure dimensions are calculated
+            this.listboxEl.offsetHeight;
+            computePosition(this.triggerEl, this.listboxEl, {
+                placement: this.dropdownPlacement,
+                strategy: 'absolute',
+                middleware: [offset(12), flip(), shift({ padding: 5 })],
+            }).then(({ x, y }) => {
+                Object.assign(this.listboxEl.style, {
+                    left: `${x}px`,
+                    top: `${y}px`,
+                    position: 'absolute',
+                    zIndex: 1000,
+                });
+            });
+        }
+    }
+    /**
+     * Sets focus on the native input element.
+     */
+    async setFocus() {
+        var _a;
+        (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /**
+     * Gets the value of the currently selected option.
+     */
+    async getSelectedValue() {
+        return this.selectedOption ? this.selectedOption.value : null;
+    }
+    // Get the label of the selected option
+    get selectedLabel() {
+        return this.selectedOption ? this.getOptionLabel(this.selectedOption) : '';
+    }
+    // Get the layout content of the selected option for button trigger
+    get selectedLayoutContent() {
+        return this.selectedOptionLayoutContent;
+    }
+    // Check if selected option has layout
+    get selectedHasLayout() {
+        return this.selectedOption ? this.isOptionLayout(this.selectedOption) : false;
+    }
+    handleOptionClick(option) {
+        // Update reactive state - single source of truth
+        this.setSelectedOption(option);
+        this.value = this.getOptionLabel(option);
+        this.isOpen = false;
+        this.pdsComboboxChange.emit({ value: option.value });
+    }
+    renderDropdown() {
+        if (!this.isOpen || this.filteredOptions.length === 0)
+            return null;
+        return (h("ul", { class: "pds-combobox__listbox", role: "listbox", id: "pds-combobox-listbox", ref: el => (this.listboxEl = el) }, this.filteredOptions.map((option, idx) => {
+            const isSelected = this.isOptionSelected(option);
+            const isHighlighted = this.highlightedIndex === idx;
+            const isLayout = this.isOptionLayout(option);
+            return (h("li", { key: option.value, id: `pds-combobox-option-${idx}`, role: "option", "aria-selected": isSelected ? 'true' : 'false', class: {
+                    'pds-combobox__option': true,
+                    'pds-combobox__option--highlighted': isHighlighted,
+                    'pds-combobox__option--layout': isLayout,
+                }, "data-option-index": idx, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter }, isLayout ? (h("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : (this.getOptionLabel(option)), isSelected && h("pds-icon", { icon: "check", size: "regular", class: "pds-combobox__option-check" })));
+        })));
+    }
+    // Helper method to render the caret icon
+    renderCaretIcon() {
+        return h("pds-icon", { icon: "caret-down", "aria-hidden": "true", "aria-label": "dropdown indicator", class: "pds-combobox__button-trigger-chevron" });
+    }
+    // Helper method to render layout content
+    renderLayoutContent() {
+        return (h("div", { class: "pds-combobox__button-trigger-layout-wrapper", innerHTML: this.selectedLayoutContent }));
+    }
+    // Helper method to render default text content
+    renderDefaultContent() {
+        return (h("span", { class: "pds-combobox__button-trigger-label" }, this.selectedLabel || this.placeholder));
+    }
+    // Helper method to check if we should show layout content
+    shouldShowLayoutContent() {
+        return this.selectedHasLayout && !!this.selectedLayoutContent;
+    }
+    renderButtonTriggerContent() {
+        // Case 1: Custom trigger content with layout priority
+        if (this.customTriggerContent) {
+            if (this.shouldShowLayoutContent()) {
+                return [this.renderLayoutContent(), this.renderCaretIcon()];
+            }
+            // Fall back to slot content when no layout is available
+            return h("slot", { name: "trigger-content" });
+        }
+        // Case 2: Standard mode with layout content
+        if (this.shouldShowLayoutContent()) {
+            return [this.renderLayoutContent(), this.renderCaretIcon()];
+        }
+        // Case 3: Standard mode with default text content
+        return [this.renderDefaultContent(), this.renderCaretIcon()];
+    }
+    render() {
+        const triggerClass = `pds-combobox__button-trigger pds-combobox__button-trigger--${this.triggerVariant}`;
+        return (h(Host, { key: 'ecc1f18dcb9869055af047446364afd66d13e5f6' }, h("div", { key: 'caf80cf07647666e6ea21bc7e8fa7e944a98f3b5', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut }, this.label && (h("label", { key: '08d38b21ce3c2d78a6a405b81e4291d2f5e61aed', htmlFor: this.componentId, class: "pds-combobox__label" }, h("span", { key: '58a3986e2656522377fce50dfad73a0960e8a9db', class: this.hideLabel ? 'visually-hidden' : '' }, this.label))), this.trigger === 'input' ? (h("input", { ref: el => {
+                this.inputEl = el;
+                this.triggerEl = el;
+            }, class: "pds-combobox__input", style: { width: this.triggerWidth }, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.value, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" })) : (h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": "pds-combobox-listbox", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, tabIndex: 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), h("div", { key: 'a91eb5b7998c9274de0f7e7e5184def30d23ad06', style: { display: 'none' } }, h("slot", { key: '40dbc40a9286b8caade78bfb70af366193bb08f2', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
+    }
+    static get is() { return "pds-combobox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-combobox.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-combobox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "customOptionLayouts": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Enable custom layout content for options. Options with data-layout attribute will render their HTML content.\n\u26A0\uFE0F Security Warning: Only use with trusted content. Basic XSS protection is applied, but avoid user-generated content."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "custom-option-layouts",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "customTriggerContent": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Enable custom layout content for the button trigger via the trigger-content slot.\nWhen true, uses slot content for initial state but updates dynamically with selected option layout.\n\u26A0\uFE0F Security Warning: Only use with trusted content. Basic XSS protection is applied, but avoid user-generated content."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "custom-trigger-content",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the combobox is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "dropdownPlacement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'",
+                    "resolved": "\"bottom-end\" | \"bottom-start\" | \"top-end\" | \"top-start\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'bottom-start'"
+                        }],
+                    "text": "Placement of the dropdown relative to the trigger."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "dropdown-placement",
+                "reflect": false,
+                "defaultValue": "'bottom-start'"
+            },
+            "dropdownWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'236px'"
+                        }],
+                    "text": "Width of the dropdown. Any valid CSS width value."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "dropdown-width",
+                "reflect": false,
+                "defaultValue": "'236px'"
+            },
+            "hideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hides the label text for instances where only the combobox should be displayed.\nLabel remains accessible to assistive technology such as screen readers."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "hide-label",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to be displayed as the combobox label."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "maxHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum height of the dropdown. Can be any valid CSS height value (e.g., '200px', '10rem').\nWhen content exceeds this height, the dropdown will scroll."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "max-height",
+                "reflect": false
+            },
+            "mode": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'filter' | 'select-only'",
+                    "resolved": "\"filter\" | \"select-only\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'filter'"
+                        }],
+                    "text": "Determines the combobox mode: 'filter' (filter options as you type) or 'select-only' (show all options)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "mode",
+                "reflect": false,
+                "defaultValue": "'filter'"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text for the input field."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "placeholder",
+                "reflect": false
+            },
+            "trigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'input' | 'button'",
+                    "resolved": "\"button\" | \"input\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'input'"
+                        }],
+                    "text": "Determines the combobox trigger: 'input' (editable input) or 'button' (button-like, non-editable)."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "trigger",
+                "reflect": false,
+                "defaultValue": "'input'"
+            },
+            "triggerWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'fit-content'"
+                        }],
+                    "text": "Width of the trigger (button or input). Any valid CSS width value."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "trigger-width",
+                "reflect": false,
+                "defaultValue": "'fit-content'"
+            },
+            "triggerVariant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'secondary' | 'primary' | 'accent' | 'destructive'",
+                    "resolved": "\"accent\" | \"destructive\" | \"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'secondary'"
+                        }],
+                    "text": "The visual variant for the button trigger. Matches Pine button variants."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "trigger-variant",
+                "reflect": false,
+                "defaultValue": "'secondary'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the combobox input."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "filteredOptions": {},
+            "highlightedIndex": {},
+            "isOpen": {},
+            "selectedOption": {},
+            "selectedOptionLayoutContent": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsComboboxChange",
+                "name": "pdsComboboxChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value changes."
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the native input element.",
+                    "tags": []
+                }
+            },
+            "getSelectedValue": {
+                "complexType": {
+                    "signature": "() => Promise<string | null>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Gets the value of the currently selected option.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "selectedOption",
+                "methodName": "handleSelectedOptionChange"
+            }];
+    }
+}
+//# sourceMappingURL=pds-combobox.js.map