@pine-ds/core 4.0.0-mercury.0 → 4.0.0

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

@@ -0,0 +1,2347 @@
+import { h, Host } from "@stencil/core";
+import { assignDescription, isSpecTest, messageId } from "../../utils/form";
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { debounceEvent } from "../../utils/utils";
+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
+ * @slot empty - Custom empty state message when no options match
+ * @slot loading - Custom loading indicator
+ */
+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';
+        /**
+         * Where to mount the dropdown listbox (`host` or `body`, sometimes called “append to body”).
+         * Use `body` inside scrollable containers (for example modals) so the list is not clipped by
+         * `overflow: hidden` ancestors. The portal is appended to the nearest `<dialog>` when present
+         * (including `pds-modal` / `showModal()`), using a composed ascent so shadow DOM and slot
+         * boundaries do not hide the dialog from discovery; otherwise it is appended to `document.body`.
+         * Keyboard focus remains on the trigger via
+         * `aria-activedescendant` so modal focus traps continue to work. Custom `empty` and `loading`
+         * slots are not supported when `body` is used; the default empty and loading content is shown instead.
+         * @default 'host'
+         */
+        this.dropdownMount = 'host';
+        /**
+         * Visually hides the label text for instances where only the combobox should be displayed.
+         * The visible `<label>` is omitted (same pattern as `pds-select`) so label spacing does not reserve layout;
+         * the trigger uses `aria-label` so the name stays available to assistive technology.
+         */
+        this.hideLabel = false;
+        /**
+         * Determines the combobox mode: 'filter' (filter options as you type) or 'select-only' (show all options).
+         * In filter mode, reopening the menu while the input still shows the label of the selected option temporarily lists
+         * all options until you type (so you can switch to a different choice without clearing the field first).
+         * @default 'filter'
+         */
+        this.mode = 'filter';
+        /**
+         * Determines the combobox trigger: 'input' (editable input), 'button' (button-like, non-editable), or 'chip' (chip-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 shape of the button trigger. Use 'input' to render the trigger with input-like styling
+         * (subtle border radius, input height) for use in form or filter rows alongside PdsSelect and PdsMultiselect.
+         * @default 'pill'
+         */
+        this.triggerShape = 'pill';
+        /**
+         * The sentiment for the chip trigger. Matches Pine chip sentiments.
+         * @default 'neutral'
+         */
+        this.chipSentiment = 'neutral';
+        /**
+         * Whether the chip trigger should be displayed in a larger size.
+         * @default false
+         */
+        this.chipLarge = false;
+        /**
+         * Whether a dot should be displayed on the chip trigger.
+         * @default false
+         */
+        this.chipDot = false;
+        /**
+         * The value of the combobox input.
+         */
+        this.value = '';
+        /**
+         * HTTP method for async requests.
+         */
+        this.asyncMethod = 'GET';
+        /**
+         * Debounce delay in milliseconds for search/fetch.
+         */
+        this.debounce = 300;
+        /**
+         * Timeout in milliseconds for async fetch requests.
+         */
+        this.fetchTimeout = 30000;
+        /**
+         * Whether the component is currently loading async options.
+         */
+        this.loading = false;
+        /**
+         * Internal state for the display text shown in the input/trigger
+         */
+        this.displayText = '';
+        /**
+         * Internal state for filtered options and group labels
+         */
+        this.filteredItems = [];
+        /**
+         * 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 = '';
+        /**
+         * Internal state to track chip properties for automatic rendering
+         */
+        this.selectedOptionChipProps = null;
+        /**
+         * Internal state for async options.
+         */
+        this.internalOptions = [];
+        /**
+         * Internal state for current page (pagination).
+         */
+        this.currentPage = 1;
+        /**
+         * Internal state for hasMore (pagination).
+         */
+        this.hasMore = false;
+        this.optionEls = [];
+        this.allItems = [];
+        this.portalEl = null;
+        this.bodyPortalAutoUpdateActive = false;
+        this.isUpdatingFromSelection = false;
+        /**
+         * In filter mode, after choosing an option the input still shows the label and would
+         * otherwise filter the list to matching substrings only. While this flag is true,
+         * the list shows every option until the user types (then normal filtering applies).
+         */
+        this.expandFilterListWhileOpen = false;
+        this.handleInput = (e) => {
+            const target = e.target;
+            this.clearExpandFilterList();
+            this.displayText = target.value;
+            this.isOpen = true;
+            this.filterOptions();
+            // Emit search event for consumer-managed async
+            this.pdsComboboxSearch.emit({ query: this.displayText });
+            // Fetch from async URL if configured
+            if (this.asyncUrl) {
+                this.debouncedFetchAsyncOptions(this.displayText, 1);
+            }
+            setTimeout(() => this.openDropdownPositioning(), 0);
+        };
+        this.handleInputClick = () => {
+            // Open dropdown when input is clicked (but not when tabbed into)
+            if (!this.isOpen) {
+                this.isOpen = true;
+                this.prepareExpandFilterListOnOpen();
+                this.filterOptions();
+                // Trigger initial fetch if async and no options loaded yet
+                if (this.asyncUrl && this.internalOptions.length === 0) {
+                    this.debouncedFetchAsyncOptions(this.displayText, 1);
+                }
+                this.setInitialHighlightedIndex();
+                setTimeout(() => {
+                    this.openDropdownPositioning();
+                    if (this.trigger === 'input' && this.expandFilterListWhileOpen && this.inputEl) {
+                        this.inputEl.select();
+                    }
+                }, 0);
+            }
+        };
+        this.handleKeyDown = (e) => {
+            if (!this.isOpen && (e.key === 'ArrowDown' || e.key === 'ArrowUp' || (e.altKey && e.key === 'ArrowDown'))) {
+                e.preventDefault();
+                this.isOpen = true;
+                this.prepareExpandFilterListOnOpen();
+                this.filterOptions();
+                // Set highlighted index immediately for testing
+                this.setInitialHighlightedIndex();
+                setTimeout(() => {
+                    this.openDropdownPositioning();
+                    // For input trigger, keep focus on input and use aria-activedescendant
+                    // For button trigger, move focus to first option for keyboard navigation
+                    if (this.trigger === 'input') {
+                        this.focusFirstOption();
+                    }
+                    else {
+                        this.focusFirstOptionForArrowKeys();
+                    }
+                }, 0);
+                return;
+            }
+            if (!this.isOpen) {
+                return;
+            }
+            // Get only the option elements (skip group labels) for navigation
+            const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
+            switch (e.key) {
+                case 'ArrowDown':
+                    e.preventDefault();
+                    // If no option is highlighted and we have options, start at 0
+                    if (this.highlightedIndex < 0 && selectableOptions.length > 0) {
+                        this.highlightedIndex = 0;
+                    }
+                    else {
+                        this.highlightedIndex = Math.min(this.highlightedIndex + 1, selectableOptions.length - 1);
+                    }
+                    this.updateOptionFocus();
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    // If no option is highlighted and we have options, start at last option
+                    if (this.highlightedIndex < 0 && selectableOptions.length > 0) {
+                        this.highlightedIndex = selectableOptions.length - 1;
+                    }
+                    else {
+                        this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
+                    }
+                    this.updateOptionFocus();
+                    break;
+                case 'Home':
+                    e.preventDefault();
+                    if (selectableOptions.length > 0) {
+                        this.highlightedIndex = 0;
+                        this.updateOptionFocus();
+                    }
+                    break;
+                case 'End':
+                    e.preventDefault();
+                    if (selectableOptions.length > 0) {
+                        this.highlightedIndex = selectableOptions.length - 1;
+                        this.updateOptionFocus();
+                    }
+                    break;
+                case 'PageDown':
+                    e.preventDefault();
+                    if (selectableOptions.length > 0) {
+                        const nextIndex = Math.min(this.highlightedIndex + 10, selectableOptions.length - 1);
+                        this.highlightedIndex = nextIndex;
+                        this.updateOptionFocus();
+                    }
+                    break;
+                case 'PageUp':
+                    e.preventDefault();
+                    if (selectableOptions.length > 0) {
+                        const prevIndex = Math.max(this.highlightedIndex - 10, 0);
+                        this.highlightedIndex = prevIndex;
+                        this.updateOptionFocus();
+                    }
+                    break;
+                case 'Enter':
+                    e.preventDefault();
+                    if (this.highlightedIndex >= 0 && this.highlightedIndex < selectableOptions.length) {
+                        this.handleOptionClick(selectableOptions[this.highlightedIndex]);
+                        this.restoreFocusToTrigger();
+                    }
+                    break;
+                case ' ':
+                    e.preventDefault();
+                    if (this.highlightedIndex >= 0 && this.highlightedIndex < selectableOptions.length) {
+                        this.handleOptionClick(selectableOptions[this.highlightedIndex]);
+                        this.restoreFocusToTrigger();
+                    }
+                    break;
+                case 'Escape':
+                    e.preventDefault();
+                    this.isOpen = false;
+                    this.highlightedIndex = -1;
+                    this.clearExpandFilterList();
+                    this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
+                    this.restoreFocusToTrigger();
+                    break;
+                case 'Tab':
+                    // Allow normal tab behavior to close dropdown and move focus
+                    this.isOpen = false;
+                    this.highlightedIndex = -1;
+                    this.clearExpandFilterList();
+                    this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
+                    break;
+            }
+        };
+        // Track if we're in arrow-key navigation mode (focus should move between options)
+        this.isArrowKeyNavigationMode = false;
+        // Event handler for option click
+        this.onOptionClick = (event) => {
+            const idx = Number(event.currentTarget.getAttribute('data-option-index'));
+            const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
+            const option = selectableOptions[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();
+        };
+        // Event handler for option keyboard events
+        this.onOptionKeyDown = (event) => {
+            // Delegate to main keyboard handler
+            this.handleKeyDown(event);
+        };
+        // Handler for button trigger click
+        this.onButtonTriggerClick = () => {
+            this.isOpen = !this.isOpen;
+            if (this.isOpen) {
+                this.prepareExpandFilterListOnOpen();
+                this.filterOptions();
+                // Trigger initial fetch if async and no options loaded yet
+                if (this.asyncUrl && this.internalOptions.length === 0) {
+                    this.debouncedFetchAsyncOptions(this.displayText, 1);
+                }
+                // Set highlighted index and prepare for keyboard navigation
+                this.setInitialHighlightedIndex();
+                // For button trigger, prepare for arrow-key navigation mode
+                this.isArrowKeyNavigationMode = true;
+                setTimeout(() => this.openDropdownPositioning(), 0);
+            }
+            else {
+                // Reset navigation mode when closing
+                this.clearExpandFilterList();
+                this.isArrowKeyNavigationMode = false;
+            }
+        };
+        // Handler for button trigger keyboard events
+        this.onButtonTriggerKeyDown = (e) => {
+            if ((e.key === 'Enter' || e.key === ' ' || e.key === 'ArrowDown' || e.key === 'ArrowUp') && !this.isOpen) {
+                e.preventDefault();
+                e.stopPropagation(); // Prevent the event from bubbling and triggering click
+                this.isOpen = true;
+                this.prepareExpandFilterListOnOpen();
+                this.filterOptions();
+                // Set highlighted index immediately
+                this.setInitialHighlightedIndex();
+                setTimeout(() => {
+                    this.openDropdownPositioning();
+                    // For all button trigger keyboard opening, focus the first option so subsequent navigation works
+                    this.focusFirstOptionForArrowKeys();
+                }, 0);
+            }
+            else if (e.key === 'Escape') {
+                e.preventDefault();
+                if (this.isOpen) {
+                    this.isOpen = false;
+                    this.highlightedIndex = -1;
+                    this.clearExpandFilterList();
+                    this.updateAriaActiveDescendant(); // Clear aria-activedescendant
+                    this.restoreFocusToTrigger();
+                }
+            }
+            else if (this.isOpen) {
+                // Delegate other keys to main keyboard handler when dropdown is open
+                this.handleKeyDown(e);
+            }
+        };
+        // Handler for button trigger keyup events - prevents space key from triggering synthetic click
+        this.onButtonTriggerKeyUp = (e) => {
+            if (e.key === ' ') {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+        // Close dropdown when focus leaves the combobox
+        this.onComboboxFocusOut = (event) => {
+            var _a, _b;
+            const relatedTarget = event.relatedTarget;
+            const isRelatedTargetInListbox = relatedTarget &&
+                (((_a = this.listboxEl) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget)) || ((_b = this.portalEl) === null || _b === void 0 ? void 0 : _b.contains(relatedTarget)));
+            const isRelatedTargetInCombobox = this.el.contains(relatedTarget);
+            // Don't close if focus is moving to an option in the listbox or staying within the combobox
+            if (!isRelatedTargetInCombobox && !isRelatedTargetInListbox) {
+                this.isOpen = false;
+                this.highlightedIndex = -1;
+                this.clearExpandFilterList();
+                this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
+                this.updateAriaActiveDescendant(); // Clear aria-activedescendant
+                // If there's a selected option but the display text doesn't match, restore the selected option's display text
+                if (this.selectedOption && this.displayText !== this.getOptionLabel(this.selectedOption)) {
+                    this.displayText = this.getOptionLabel(this.selectedOption);
+                    // The @Watch('selectedOption') will handle value and form internals if needed
+                }
+            }
+        };
+        this.handleScroll = (e) => {
+            if (!this.asyncUrl || !this.hasMore || this.loading)
+                return;
+            const target = e.target;
+            const scrollBottom = target.scrollHeight - target.scrollTop - target.clientHeight;
+            // Load more when near bottom (within 50px)
+            if (scrollBottom < 50) {
+                this.pdsComboboxLoadOptions.emit({
+                    query: this.displayText,
+                    page: this.currentPage + 1,
+                });
+                this.debouncedFetchAsyncOptions(this.displayText, this.currentPage + 1);
+            }
+        };
+    }
+    connectedCallback() {
+        // Initialize ElementInternals for form association (only once per element instance)
+        if (this.el.attachInternals && !this.internals) {
+            this.internals = this.el.attachInternals();
+        }
+    }
+    componentWillLoad() {
+        this.originalSearchEmitter = this.pdsComboboxSearch;
+        this.updateOptions();
+    }
+    componentDidLoad() {
+        var _a, _b, _c;
+        this.setupDebounce();
+        // Check for value-based preselection if no option is selected yet
+        if (!this.selectedOption && this.value && this.optionEls.length > 0) {
+            const matchingOption = this.optionEls.find(opt => opt.value === this.value);
+            if (matchingOption) {
+                this.setSelectedOption(matchingOption);
+                // Update the display text to show the option's text content
+                this.displayText = this.getOptionLabel(matchingOption);
+                // Keep this.value as the actual option value
+                // this.value remains unchanged (already matches matchingOption.value)
+            }
+        }
+        // Initialize form value with current value
+        this.updateFormValue((_c = (_b = (_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : this.value) !== null && _c !== void 0 ? _c : '');
+    }
+    disconnectedCallback() {
+        var _a;
+        if (this.deferredPortalTeardownId !== undefined) {
+            clearTimeout(this.deferredPortalTeardownId);
+            this.deferredPortalTeardownId = undefined;
+        }
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.clearAsyncFetchState();
+        this.removeBodyPortal();
+    }
+    componentDidRender() {
+        if (this.usesBodyPortal && this.isOpen) {
+            this.syncBodyPortal();
+        }
+    }
+    isOpenChanged(isOpen) {
+        if (isOpen && this.deferredPortalTeardownId !== undefined) {
+            clearTimeout(this.deferredPortalTeardownId);
+            this.deferredPortalTeardownId = undefined;
+        }
+        if (isOpen && this.usesBodyPortal) {
+            // Rapid reopen can cancel deferred teardown while the portal still holds the previous
+            // listbox node; clear portal state before the next render attaches the new listbox, and
+            // reset Floating UI autoUpdate bookkeeping.
+            this.removeBodyPortal();
+        }
+        if (!isOpen && this.usesBodyPortal) {
+            if (this.deferredPortalTeardownId !== undefined) {
+                clearTimeout(this.deferredPortalTeardownId);
+            }
+            this.deferredPortalTeardownId = setTimeout(() => {
+                this.deferredPortalTeardownId = undefined;
+                if (!this.el.isConnected) {
+                    return;
+                }
+                if (!this.isOpen) {
+                    this.removeBodyPortal();
+                }
+            }, 0);
+            return;
+        }
+        if (!isOpen) {
+            this.removeBodyPortal();
+        }
+    }
+    get usesBodyPortal() {
+        return this.dropdownMount === 'body';
+    }
+    get listboxId() {
+        return `${this.componentId}-listbox`;
+    }
+    optionDomId(optionIndex) {
+        return `${this.componentId}-option-${optionIndex}`;
+    }
+    setupDebounce() {
+        const { pdsComboboxSearch, debounce, originalSearchEmitter } = this;
+        this.pdsComboboxSearch = debounce === undefined
+            ? originalSearchEmitter !== null && originalSearchEmitter !== void 0 ? originalSearchEmitter : pdsComboboxSearch
+            : debounceEvent(pdsComboboxSearch, debounce);
+    }
+    optionsChanged() {
+        if (this.options) {
+            this.internalOptions = [...this.options];
+            this.updateOptionsFromAsync();
+        }
+    }
+    handleValueChange() {
+        this.filterOptions();
+        // Sync with form internals for form association
+        this.updateFormValue(this.value);
+        // Find and select option that matches the value (for external value changes)
+        // Only do this if we're not already updating from a selection
+        if (!this.isUpdatingFromSelection && this.value && this.optionEls.length > 0) {
+            const currentSelectedValue = this.selectedOption ? this.selectedOption.value : null;
+            // If the value doesn't match the currently selected option's value, we need to update
+            if (this.value !== currentSelectedValue) {
+                const matchingOption = this.optionEls.find(opt => opt.value === this.value);
+                if (matchingOption) {
+                    this.isUpdatingFromSelection = true;
+                    this.setSelectedOption(matchingOption);
+                    // Update the display text to show the option's text content
+                    this.displayText = this.getOptionLabel(matchingOption);
+                    // Keep this.value as the actual option value (already correct)
+                    this.isUpdatingFromSelection = false;
+                }
+            }
+        }
+    }
+    handleSelectedOptionChange() {
+        // Update the layout content when selected option changes
+        this.selectedOptionLayoutContent = this.selectedOption && this.isOptionLayout(this.selectedOption)
+            ? this.getOptionLayoutContent(this.selectedOption)
+            : '';
+        // Update chip properties for automatic rendering when selected option changes
+        this.selectedOptionChipProps = this.selectedOption && this.isOptionChip(this.selectedOption)
+            ? this.getOptionChipProps(this.selectedOption)
+            : null;
+        // Update display text when selected option changes
+        if (this.selectedOption) {
+            this.displayText = this.getOptionLabel(this.selectedOption);
+            this.value = this.selectedOption.value;
+            // Update form internals with the actual option value
+            this.updateFormValue(this.selectedOption.value);
+        }
+        else {
+            this.displayText = '';
+            this.value = '';
+            this.updateFormValue('');
+        }
+    }
+    updateFormValue(value) {
+        if (isSpecTest())
+            return;
+        if (this.internals && this.internals.setFormValue) {
+            this.internals.setFormValue(value);
+        }
+    }
+    clearAsyncFetchState() {
+        var _a;
+        if (this.fetchDebounceTimer !== undefined) {
+            window.clearTimeout(this.fetchDebounceTimer);
+            this.fetchDebounceTimer = undefined;
+        }
+        if (this.fetchTimeoutTimer !== undefined) {
+            window.clearTimeout(this.fetchTimeoutTimer);
+            this.fetchTimeoutTimer = undefined;
+        }
+        (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+        this.abortController = undefined;
+    }
+    debouncedFetchAsyncOptions(query, page = 1) {
+        var _a;
+        if (!this.asyncUrl)
+            return;
+        if (this.fetchDebounceTimer !== undefined) {
+            window.clearTimeout(this.fetchDebounceTimer);
+        }
+        const delay = Math.max(0, (_a = this.debounce) !== null && _a !== void 0 ? _a : 0);
+        this.fetchDebounceTimer = window.setTimeout(() => {
+            this.fetchDebounceTimer = undefined;
+            this.fetchOptions(query, page);
+        }, delay);
+    }
+    async fetchOptions(query, page = 1) {
+        var _a;
+        if (!this.asyncUrl)
+            return;
+        // Abort any pending request and clear existing timeout
+        (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+        if (this.fetchTimeoutTimer !== undefined) {
+            window.clearTimeout(this.fetchTimeoutTimer);
+            this.fetchTimeoutTimer = undefined;
+        }
+        this.abortController = new AbortController();
+        this.loading = true;
+        // Set up timeout for fetch request
+        this.fetchTimeoutTimer = window.setTimeout(() => {
+            var _a;
+            (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+            this.fetchTimeoutTimer = undefined;
+        }, this.fetchTimeout);
+        try {
+            // Guard against malformed asyncUrl
+            let url;
+            try {
+                url = new URL(this.asyncUrl, window.location.origin);
+            }
+            catch (urlError) {
+                throw new TypeError(`Invalid asyncUrl: ${this.asyncUrl}`);
+            }
+            if (this.asyncMethod === 'GET') {
+                url.searchParams.set('search', query);
+                url.searchParams.set('page', String(page));
+            }
+            const response = await fetch(url.toString(), Object.assign({ method: this.asyncMethod, signal: this.abortController.signal, headers: {
+                    'Content-Type': 'application/json',
+                    'Accept': 'application/json',
+                } }, (this.asyncMethod === 'POST' && {
+                body: JSON.stringify({ search: query, page }),
+            })));
+            // Clear timeout on successful response
+            if (this.fetchTimeoutTimer !== undefined) {
+                window.clearTimeout(this.fetchTimeoutTimer);
+                this.fetchTimeoutTimer = undefined;
+            }
+            if (!response.ok)
+                throw new Error('Failed to fetch options');
+            const data = await response.json();
+            const formattedResults = data.results.map(item => {
+                // If formatResult is provided, use it
+                if (this.formatResult) {
+                    return this.formatResult(item);
+                }
+                // Defensive check: ensure item is an object before spreading
+                if (typeof item === 'object' && item !== null) {
+                    return Object.assign({ id: item.id, text: item.text }, item);
+                }
+                // Handle primitives by converting to safe shape
+                return {
+                    id: String(item),
+                    text: String(item),
+                };
+            });
+            if (page === 1) {
+                this.internalOptions = formattedResults;
+            }
+            else {
+                this.internalOptions = [...this.internalOptions, ...formattedResults];
+            }
+            this.hasMore = data.totalCount ? this.internalOptions.length < data.totalCount : false;
+            this.currentPage = page;
+            // Update DOM options from async data
+            this.updateOptionsFromAsync();
+        }
+        catch (error) {
+            // Clear timeout on error
+            if (this.fetchTimeoutTimer !== undefined) {
+                window.clearTimeout(this.fetchTimeoutTimer);
+                this.fetchTimeoutTimer = undefined;
+            }
+            if (error.name !== 'AbortError') {
+                console.error('PdsCombobox: Failed to fetch options', error);
+            }
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    updateOptionsFromAsync() {
+        if (!this.asyncUrl && !this.options)
+            return;
+        // Clear existing slot-based options when using async
+        this.optionEls = [];
+        this.allItems = [];
+        // Create option elements from async data
+        const asyncOptions = this.options || this.internalOptions;
+        asyncOptions.forEach(opt => {
+            const optionEl = document.createElement('option');
+            optionEl.value = String(opt.id);
+            optionEl.textContent = opt.text;
+            this.optionEls.push(optionEl);
+            this.allItems.push(optionEl);
+        });
+        // Re-apply preselection if a value is set but no option has been selected yet.
+        // This handles the case where `value` is set before async options have loaded.
+        if (this.value && !this.selectedOption) {
+            const matchingOption = this.optionEls.find(opt => opt.value === this.value);
+            if (matchingOption) {
+                this.setSelectedOption(matchingOption);
+            }
+        }
+        this.filterOptions();
+    }
+    updateOptions() {
+        var _a;
+        // Skip slot-based options if using async
+        if (this.asyncUrl || this.options) {
+            this.updateOptionsFromAsync();
+            return;
+        }
+        // Get all 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) {
+            const allElements = slot.assignedElements({ flatten: true });
+            // Separate options from group labels and flatten optgroups
+            this.allItems = [];
+            this.optionEls = [];
+            allElements.forEach(el => {
+                if (el.tagName === 'OPTION') {
+                    this.optionEls.push(el);
+                    this.allItems.push(el);
+                }
+                else if (el.tagName === 'OPTGROUP') {
+                    const optgroup = el;
+                    this.allItems.push(optgroup);
+                    // Add optgroup children (options)
+                    Array.from(optgroup.children).forEach(child => {
+                        if (child.tagName === 'OPTION') {
+                            this.optionEls.push(child);
+                            this.allItems.push(child);
+                        }
+                    });
+                }
+                else if (el.tagName === 'PDS-TEXT') {
+                    this.allItems.push(el);
+                }
+            });
+            // Set initial selected option based on value property
+            let initialSelected = null;
+            // Check if value property matches any option
+            if (this.value) {
+                initialSelected = this.optionEls.find(opt => opt.value === this.value) || null;
+                if (initialSelected) {
+                    // Update the display text to show the option's text content
+                    this.displayText = this.getOptionLabel(initialSelected);
+                    // Keep this.value as the actual option value (already correct)
+                }
+            }
+            // For chip triggers, ensure we always have a selected option
+            if (!initialSelected && this.trigger === 'chip' && this.optionEls.length > 0) {
+                initialSelected = this.optionEls[0]; // Select first option as default
+                this.value = initialSelected.value;
+                this.displayText = this.getOptionLabel(initialSelected);
+                console.warn('PDS Combobox: Chip triggers should always have a selected option. Automatically selected the first option.');
+            }
+            // Update selection if we found a different selected option or if we don't have one
+            if (initialSelected && initialSelected !== this.selectedOption) {
+                this.setSelectedOption(initialSelected);
+            }
+            else if (!this.selectedOption && initialSelected) {
+                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 has chip attributes (new automatic approach)
+    isOptionChip(option) {
+        return option.hasAttribute('chip-sentiment') ||
+            option.hasAttribute('chip-large') ||
+            option.hasAttribute('chip-icon') ||
+            option.hasAttribute('chip-dot');
+    }
+    // Helper method to get chip properties from option attributes
+    getOptionChipProps(option) {
+        return {
+            sentiment: option.getAttribute('chip-sentiment') || 'neutral',
+            large: option.hasAttribute('chip-large'),
+            icon: option.getAttribute('chip-icon') || undefined,
+            dot: option.hasAttribute('chip-dot')
+        };
+    }
+    // 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;
+        // Immediately update chip properties for automatic rendering to ensure reactivity
+        if (option && this.isOptionChip(option)) {
+            this.selectedOptionChipProps = this.getOptionChipProps(option);
+        }
+        else {
+            this.selectedOptionChipProps = null;
+        }
+    }
+    filterOptions() {
+        // Ensure allItems includes optionEls if not already populated (for edge cases)
+        if (this.allItems.length === 0 && this.optionEls.length > 0) {
+            this.allItems = [...this.optionEls];
+        }
+        if (this.mode === 'select-only' || this.expandFilterListWhileOpen) {
+            this.filteredItems = [...this.allItems];
+        }
+        else {
+            const val = this.displayText.toLowerCase();
+            const 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);
+            });
+            // Rebuild filtered items maintaining group structure - simplified approach
+            this.filteredItems = [];
+            let currentGroupLabel = null;
+            this.allItems.forEach(item => {
+                if (item.tagName === 'OPTGROUP' || item.tagName === 'PDS-TEXT') {
+                    currentGroupLabel = item;
+                }
+                else if (item.tagName === 'OPTION' && filteredOptions.includes(item)) {
+                    const optionEl = item;
+                    const parent = optionEl.parentElement;
+                    let labelToUse = null;
+                    if (parent && parent.tagName === 'OPTGROUP') {
+                        // Only use the actual parent optgroup as label
+                        labelToUse = parent;
+                    }
+                    else if (currentGroupLabel && currentGroupLabel.tagName === 'PDS-TEXT') {
+                        // Allow pds-text to label subsequent top-level options until another label appears
+                        labelToUse = currentGroupLabel;
+                    }
+                    if (labelToUse && !this.filteredItems.includes(labelToUse)) {
+                        this.filteredItems.push(labelToUse);
+                    }
+                    this.filteredItems.push(optionEl);
+                }
+            });
+        }
+        this.highlightedIndex = -1;
+    }
+    clearExpandFilterList() {
+        this.expandFilterListWhileOpen = false;
+    }
+    /**
+     * When reopening the dropdown in filter mode with the input still showing the
+     * committed selection label, show the full option list until the user edits the query.
+     */
+    prepareExpandFilterListOnOpen() {
+        if (this.mode === 'filter' &&
+            this.selectedOption &&
+            this.displayText === this.getOptionLabel(this.selectedOption)) {
+            this.expandFilterListWhileOpen = true;
+        }
+        else {
+            this.expandFilterListWhileOpen = false;
+        }
+    }
+    positionDropdown() {
+        if (!this.triggerEl || !this.listboxEl) {
+            return;
+        }
+        const strategy = this.usesBodyPortal ? 'fixed' : 'absolute';
+        const zIndex = this.usesBodyPortal
+            ? 'var(--pine-z-index-priority)'
+            : 'var(--pine-z-index-raised)';
+        this.listboxEl.style.width = this.dropdownWidth;
+        if (this.maxHeight) {
+            this.listboxEl.style.maxHeight = this.maxHeight;
+            this.listboxEl.style.overflowY = 'auto';
+        }
+        this.listboxEl.offsetHeight;
+        return computePosition(this.triggerEl, this.listboxEl, {
+            placement: this.dropdownPlacement,
+            strategy,
+            middleware: [offset(12), flip(), shift({ padding: 5 })],
+        }).then(({ x, y }) => {
+            if (!this.listboxEl) {
+                return;
+            }
+            Object.assign(this.listboxEl.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+                position: strategy,
+                zIndex,
+            });
+        });
+    }
+    openDropdownPositioning() {
+        if (!this.triggerEl || !this.listboxEl) {
+            return;
+        }
+        void this.positionDropdown();
+    }
+    startBodyPortalAutoUpdate() {
+        if (this.bodyPortalAutoUpdateActive || !this.triggerEl || !this.listboxEl) {
+            return;
+        }
+        this.cleanupPositionAutoUpdate = autoUpdate(this.triggerEl, this.listboxEl, () => {
+            void this.positionDropdown();
+        });
+        this.bodyPortalAutoUpdateActive = true;
+    }
+    stopBodyPortalAutoUpdate() {
+        var _a;
+        (_a = this.cleanupPositionAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.cleanupPositionAutoUpdate = undefined;
+        this.bodyPortalAutoUpdateActive = false;
+    }
+    getPortalMountRoot() {
+        var _a;
+        return (_a = this.findNearestDialogForPortal(this.el)) !== null && _a !== void 0 ? _a : document.body;
+    }
+    /**
+     * Resolves the native `<dialog>` to host the portaled listbox so it stays in the same top layer
+     * as `showModal()`. `Element.closest('dialog')` stops at shadow boundaries and can miss a
+     * dialog that only wraps slotted content; this walks assigned slots and shadow hosts, and
+     * falls back to `pds-modal`'s dialog when the combobox lives inside that subtree.
+     */
+    findNearestDialogForPortal(from) {
+        const seen = new Set();
+        let current = from;
+        while (current && !seen.has(current)) {
+            seen.add(current);
+            if (current.nodeType === Node.ELEMENT_NODE && current.localName === 'dialog') {
+                return current;
+            }
+            if (current.nodeType === Node.ELEMENT_NODE) {
+                const assigned = current.assignedSlot;
+                if (assigned) {
+                    current = assigned;
+                    continue;
+                }
+            }
+            const parent = current.parentNode;
+            if (parent) {
+                current = parent instanceof ShadowRoot ? parent.host : parent;
+                continue;
+            }
+            break;
+        }
+        const pineModal = from.closest('pds-modal');
+        if (pineModal) {
+            const pineDialog = pineModal.querySelector('dialog');
+            if (pineDialog) {
+                return pineDialog;
+            }
+        }
+        return null;
+    }
+    ensureBodyPortal() {
+        if (this.portalEl !== null) {
+            const target = this.getPortalMountRoot();
+            if (this.portalEl.parentElement !== target) {
+                target.appendChild(this.portalEl);
+            }
+            return this.portalEl;
+        }
+        this.portalEl = document.createElement('div');
+        this.portalEl.className = 'pds-combobox-dropdown-portal';
+        this.getPortalMountRoot().appendChild(this.portalEl);
+        return this.portalEl;
+    }
+    syncBodyPortal() {
+        if (!this.listboxEl) {
+            return;
+        }
+        const portal = this.ensureBodyPortal();
+        for (const stale of Array.from(portal.children)) {
+            if (stale !== this.listboxEl) {
+                stale.remove();
+            }
+        }
+        if (this.listboxEl.parentElement !== portal) {
+            portal.appendChild(this.listboxEl);
+            void this.positionDropdown();
+            this.startBodyPortalAutoUpdate();
+        }
+    }
+    removeBodyPortal() {
+        var _a;
+        this.stopBodyPortalAutoUpdate();
+        if ((_a = this.portalEl) === null || _a === void 0 ? void 0 : _a.parentNode) {
+            this.portalEl.parentNode.removeChild(this.portalEl);
+        }
+        this.portalEl = null;
+        if (this.listboxEl && !this.listboxEl.isConnected) {
+            this.listboxEl = undefined;
+        }
+    }
+    /**
+     * Sets focus on the native input element.
+     */
+    async setFocus() {
+        var _a;
+        if (this.inputEl) {
+            this.inputEl.focus();
+        }
+        else {
+            (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    /**
+     * Sets the initial highlighted index when dropdown opens.
+     * If there's a selected option, highlight it. Otherwise, highlight the first option.
+     */
+    setInitialHighlightedIndex() {
+        const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
+        if (selectableOptions.length === 0) {
+            this.highlightedIndex = -1;
+            return;
+        }
+        // If there's a selected option, find its index in the filtered options
+        if (this.selectedOption) {
+            const selectedIndex = selectableOptions.findIndex(option => option === this.selectedOption);
+            if (selectedIndex >= 0) {
+                this.highlightedIndex = selectedIndex;
+                return;
+            }
+        }
+        // No selected option or selected option not in filtered results, highlight first option
+        this.highlightedIndex = 0;
+    }
+    /**
+     * Focus management helper - moves focus to the first option when dropdown opens
+     */
+    focusFirstOption() {
+        if (this.isOpen) {
+            const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
+            if (selectableOptions.length > 0) {
+                this.setInitialHighlightedIndex();
+                // DON'T focus the option elements - keep focus on trigger and use aria-activedescendant
+                // This prevents the focusout event that was closing the dropdown
+                // But still call updateOptionFocus for scrolling
+                if (this.listboxEl) {
+                    this.updateOptionFocus();
+                }
+            }
+        }
+    }
+    /**
+     * Focus management helper - actually focuses the first option when opened via arrow keys
+     */
+    focusFirstOptionForArrowKeys() {
+        if (!this.isOpen) {
+            return;
+        }
+        // Body-mounted listboxes stay outside modal focus traps; keep focus on the trigger.
+        if (this.usesBodyPortal) {
+            this.isArrowKeyNavigationMode = true;
+            this.focusFirstOption();
+            return;
+        }
+        this.isArrowKeyNavigationMode = true;
+        const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
+        if (selectableOptions.length > 0) {
+            this.setInitialHighlightedIndex();
+            if (this.listboxEl) {
+                const optionElements = this.listboxEl.querySelectorAll('[role="option"]');
+                const highlightedOption = optionElements[this.highlightedIndex];
+                if (highlightedOption) {
+                    optionElements.forEach(option => {
+                        option.setAttribute('tabindex', '-1');
+                    });
+                    highlightedOption.setAttribute('tabindex', '0');
+                    highlightedOption.focus();
+                    highlightedOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+                }
+            }
+            this.updateAriaActiveDescendant();
+        }
+    }
+    /**
+     * Focus management helper - updates visual state and scrolling for the currently highlighted option
+     * Note: We don't actually focus the option to prevent focusout events that close the dropdown
+     */
+    updateOptionFocus() {
+        if (!this.listboxEl || this.highlightedIndex < 0)
+            return;
+        const optionElements = this.listboxEl.querySelectorAll('[role="option"]');
+        const currentOption = optionElements[this.highlightedIndex];
+        if (currentOption) {
+            // Check if any option currently has focus OR if we're in arrow-key navigation mode
+            const hasOptionFocus = Array.from(optionElements).some(el => el === document.activeElement);
+            const shouldFocusOption = !this.usesBodyPortal && (hasOptionFocus || this.isArrowKeyNavigationMode);
+            if (shouldFocusOption) {
+                optionElements.forEach(option => {
+                    option.setAttribute('tabindex', '-1');
+                });
+                currentOption.setAttribute('tabindex', '0');
+                currentOption.focus();
+            }
+            // Always scroll the option into view
+            currentOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+        }
+        // Always update aria-activedescendant on the trigger element
+        this.updateAriaActiveDescendant();
+    }
+    /**
+     * Updates aria-activedescendant on the trigger element
+     */
+    updateAriaActiveDescendant() {
+        if (this.triggerEl && this.highlightedIndex >= 0) {
+            this.triggerEl.setAttribute('aria-activedescendant', this.optionDomId(this.highlightedIndex));
+        }
+        else if (this.triggerEl) {
+            this.triggerEl.removeAttribute('aria-activedescendant');
+        }
+    }
+    /**
+     * Focus management helper - restores focus to the trigger element
+     */
+    restoreFocusToTrigger() {
+        setTimeout(() => {
+            if (this.inputEl) {
+                this.inputEl.focus();
+            }
+            else if (this.triggerEl) {
+                this.triggerEl.focus();
+            }
+        }, 0);
+    }
+    /**
+     * Gets the value of the currently selected option.
+     */
+    async getSelectedValue() {
+        return this.selectedOption ? this.selectedOption.value : null;
+    }
+    /**
+     * Clears the selected value and resets the component.
+     */
+    async clear() {
+        const hadValue = this.value !== '' || this.displayText !== '';
+        this.displayText = '';
+        this.setSelectedOption(null);
+        this.value = '';
+        this.filterOptions();
+        this.updateFormValue('');
+        if (hadValue) {
+            this.pdsComboboxChange.emit({ value: '' });
+        }
+    }
+    // Get the label of the selected option
+    get selectedLabel() {
+        return this.displayText || '';
+    }
+    // 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;
+    }
+    // Extract chip sentiment from selected option's attributes, layout content, or slotted trigger content
+    get selectedChipSentiment() {
+        // First priority: Check selected option's chip attributes (new automatic approach)
+        if (this.selectedOption && this.isOptionChip(this.selectedOption)) {
+            const sentiment = this.selectedOption.getAttribute('chip-sentiment');
+            if (sentiment)
+                return sentiment;
+        }
+        // Second priority: Check selected option's layout content (existing custom layout approach)
+        if (this.selectedOption && this.isOptionLayout(this.selectedOption)) {
+            const chipElement = this.selectedOption.querySelector('pds-chip');
+            const sentiment = chipElement === null || chipElement === void 0 ? void 0 : chipElement.getAttribute('sentiment');
+            if (sentiment)
+                return sentiment;
+        }
+        // Third priority: Check if we have custom trigger content with a chip (initial state)
+        if (this.customTriggerContent) {
+            const slottedChip = this.el.querySelector('pds-chip[slot="trigger-content"]');
+            if (slottedChip) {
+                const sentiment = slottedChip.getAttribute('sentiment');
+                if (sentiment)
+                    return sentiment;
+            }
+        }
+        // Fallback: Use component props
+        return this.chipSentiment;
+    }
+    // Extract chip large from selected option's attributes, layout content, or slotted trigger content
+    get selectedChipLarge() {
+        // First priority: Check selected option's chip attributes (new automatic approach)
+        if (this.selectedOption && this.isOptionChip(this.selectedOption)) {
+            if (this.selectedOption.hasAttribute('chip-large'))
+                return true;
+        }
+        // Second priority: Check selected option's layout content (existing custom layout approach)
+        if (this.selectedOption && this.isOptionLayout(this.selectedOption)) {
+            const chipElement = this.selectedOption.querySelector('pds-chip');
+            if ((chipElement === null || chipElement === void 0 ? void 0 : chipElement.getAttribute('size')) === 'lg')
+                return true;
+        }
+        // Third priority: Check if we have custom trigger content with a chip (initial state)
+        if (this.customTriggerContent) {
+            const slottedChip = this.el.querySelector('pds-chip[slot="trigger-content"]');
+            if (slottedChip && slottedChip.getAttribute('size') === 'lg') {
+                return true;
+            }
+        }
+        // Fallback: Use component props
+        return this.chipLarge;
+    }
+    // Extract chip icon from selected option's attributes, layout content, or slotted trigger content
+    get selectedChipIcon() {
+        // First priority: Check selected option's chip attributes (new automatic approach)
+        if (this.selectedOption && this.isOptionChip(this.selectedOption)) {
+            const icon = this.selectedOption.getAttribute('chip-icon');
+            if (icon)
+                return icon;
+        }
+        // Second priority: Check selected option's layout content (existing custom layout approach)
+        if (this.selectedOption && this.isOptionLayout(this.selectedOption)) {
+            const chipElement = this.selectedOption.querySelector('pds-chip');
+            const icon = chipElement === null || chipElement === void 0 ? void 0 : chipElement.getAttribute('icon');
+            if (icon)
+                return icon;
+        }
+        // Third priority: Check if we have custom trigger content with a chip (initial state)
+        if (this.customTriggerContent) {
+            const slottedChip = this.el.querySelector('pds-chip[slot="trigger-content"]');
+            if (slottedChip) {
+                const icon = slottedChip.getAttribute('icon');
+                if (icon)
+                    return icon;
+            }
+        }
+        // Fallback: Use component props
+        return this.chipIcon;
+    }
+    // Extract chip dot from selected option's attributes, layout content, or slotted trigger content
+    get selectedChipDot() {
+        // First priority: Check selected option's chip attributes (new automatic approach)
+        if (this.selectedOption && this.isOptionChip(this.selectedOption)) {
+            if (this.selectedOption.hasAttribute('chip-dot'))
+                return true;
+        }
+        // Second priority: Check selected option's layout content (existing custom layout approach)
+        if (this.selectedOption && this.isOptionLayout(this.selectedOption)) {
+            const chipElement = this.selectedOption.querySelector('pds-chip');
+            if (chipElement === null || chipElement === void 0 ? void 0 : chipElement.hasAttribute('dot'))
+                return true;
+        }
+        // Third priority: Check if we have custom trigger content with a chip (initial state)
+        if (this.customTriggerContent) {
+            const slottedChip = this.el.querySelector('pds-chip[slot="trigger-content"]');
+            if (slottedChip && slottedChip.hasAttribute('dot')) {
+                return true;
+            }
+        }
+        // Fallback: Use component props
+        return this.chipDot;
+    }
+    handleOptionClick(option) {
+        // Update reactive state - single source of truth
+        // The @Watch('selectedOption') will handle displayText, value, and form internals
+        this.setSelectedOption(option);
+        this.isOpen = false;
+        this.clearExpandFilterList();
+        this.pdsComboboxChange.emit({ value: option.value });
+    }
+    renderDropdown() {
+        if (!this.isOpen) {
+            return null;
+        }
+        const hasSlottedEmpty = !this.usesBodyPortal && !!this.el.querySelector('[slot="empty"]');
+        const hasSlottedLoading = !this.usesBodyPortal && !!this.el.querySelector('[slot="loading"]');
+        let optionIndex = 0;
+        const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
+        return (h("ul", { class: "pds-combobox__listbox", role: "listbox", id: this.listboxId, "aria-label": this.label || 'Options', "aria-multiselectable": "false", ref: el => (this.listboxEl = el), onScroll: this.handleScroll }, this.loading && (h("li", { class: "pds-combobox__loading", role: "presentation" }, hasSlottedLoading ? (h("slot", { name: "loading" })) : (h("pds-loader", { size: "small" })))), !this.loading && this.filteredItems.length === 0 && (h("li", { class: "pds-combobox__empty", role: "presentation" }, hasSlottedEmpty ? (h("slot", { name: "empty" })) : (h("span", null, "No options found")))), this.filteredItems.map((item, itemIdx) => {
+            if (item.tagName === 'OPTGROUP') {
+                const optgroup = item;
+                return (h("li", { key: `optgroup-${itemIdx}`, class: "pds-combobox__group-label", role: "presentation", "aria-label": optgroup.label }, optgroup.label));
+            }
+            else if (item.tagName === 'PDS-TEXT') {
+                const pdsText = item;
+                return (h("li", { key: `pds-text-${itemIdx}`, class: "pds-combobox__group-label", role: "presentation" }, pdsText.textContent));
+            }
+            else if (item.tagName === 'OPTION') {
+                const option = item;
+                const isSelected = this.isOptionSelected(option);
+                const isHighlighted = this.highlightedIndex === optionIndex;
+                const isLayout = this.isOptionLayout(option);
+                const isChip = this.isOptionChip(option);
+                const currentOptionIndex = optionIndex++;
+                return (h("li", { key: option.value, id: this.optionDomId(currentOptionIndex), role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-setsize": selectableOptions.length, "aria-posinset": currentOptionIndex + 1, "aria-label": isLayout || isChip ? option.getAttribute('aria-label') || this.getOptionLabel(option) : undefined, tabindex: this.usesBodyPortal ? '-1' : isHighlighted ? '0' : '-1', class: {
+                        'pds-combobox__option': true,
+                        'pds-combobox__option--highlighted': isHighlighted,
+                        'pds-combobox__option--layout': isLayout,
+                        'pds-combobox__option--chip': isChip,
+                    }, "data-option-index": currentOptionIndex, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter, onKeyDown: this.onOptionKeyDown }, isLayout ? (h("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : isChip ? (this.renderOptionChip(option)) : (this.getOptionLabel(option)), isSelected && h("pds-icon", { icon: "check", size: "regular", class: "pds-combobox__option-check" })));
+            }
+            return null;
+        }), this.hasMore && !this.loading && (h("li", { class: "pds-combobox__load-more", role: "presentation" }, h("pds-loader", { size: "small" })))));
+    }
+    // Helper method to render the caret icon
+    renderCaretIcon() {
+        return h("pds-icon", { icon: "caret-down", "aria-hidden": "true", 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;
+    }
+    // Helper method to build chip trigger CSS classes
+    getChipTriggerClass() {
+        const classes = ['pds-combobox__chip-trigger'];
+        // Add sentiment class
+        classes.push(`pds-combobox__chip-trigger--${this.selectedChipSentiment}`);
+        // Always use dropdown variant for chip triggers
+        classes.push('pds-combobox__chip-trigger--dropdown');
+        // Add large class if needed
+        if (this.selectedChipLarge) {
+            classes.push('pds-combobox__chip-trigger--large');
+        }
+        // Add dot class if needed
+        if (this.selectedChipDot) {
+            classes.push('pds-combobox__chip-trigger--dot');
+        }
+        return classes.join(' ');
+    }
+    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()];
+    }
+    renderChipTriggerContent() {
+        // Case 1: Custom trigger content with layout priority
+        if (this.customTriggerContent) {
+            if (this.shouldShowLayoutContent()) {
+                // When using custom layouts, the chip handles its own dropdown arrow
+                return this.renderChipTriggerLayoutContent();
+            }
+            // Fall back to slot content when no layout is available - chip handles its own dropdown arrow
+            return h("slot", { name: "trigger-content" });
+        }
+        // Case 2: Standard mode with layout content
+        if (this.shouldShowLayoutContent()) {
+            // When using custom layouts, the chip handles its own dropdown arrow
+            return this.renderChipTriggerLayoutContent();
+        }
+        // Case 3: Automatic chip mode - selected option has chip attributes
+        if (this.selectedOption && this.selectedOptionChipProps) {
+            // Render as chip automatically - chip handles its own dropdown arrow
+            return this.renderSelectedOptionAsChip();
+        }
+        // Case 4: Standard mode with default text content
+        return [
+            this.renderChipTriggerDefaultContent(),
+            this.renderCaretIcon()
+        ];
+    }
+    // Helper method to render selected option as chip for trigger (automatic approach)
+    renderSelectedOptionAsChip() {
+        if (!this.selectedOption || !this.selectedOptionChipProps)
+            return null;
+        return (h("pds-chip", { sentiment: this.selectedOptionChipProps.sentiment, variant: "dropdown" // Always use dropdown variant for triggers
+            ,
+            size: this.selectedOptionChipProps.large ? 'lg' : undefined, icon: this.selectedOptionChipProps.icon, dot: this.selectedOptionChipProps.dot, class: "pds-combobox__chip-trigger-auto" }, this.getOptionLabel(this.selectedOption)));
+    }
+    // Helper method to render chip trigger layout content
+    renderChipTriggerLayoutContent() {
+        return (h("div", { class: "pds-combobox__chip-trigger-layout-wrapper", innerHTML: this.getModifiedLayoutContentForTrigger() }));
+    }
+    // Helper method to modify layout content for trigger use (ensure dropdown variant)
+    getModifiedLayoutContentForTrigger() {
+        let content = this.selectedLayoutContent;
+        // If the content contains a pds-chip, ensure it has variant="dropdown"
+        if (content.includes('<pds-chip')) {
+            // Use a temporary div to parse and modify the HTML
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = content;
+            const chipElement = tempDiv.querySelector('pds-chip');
+            if (chipElement) {
+                chipElement.setAttribute('variant', 'dropdown');
+                content = tempDiv.innerHTML;
+            }
+        }
+        return content;
+    }
+    // Helper method to render chip trigger default content
+    renderChipTriggerDefaultContent() {
+        return (h("span", { class: "pds-combobox__chip-trigger-label" }, this.selectedChipIcon && h("pds-icon", { icon: this.selectedChipIcon, class: "pds-combobox__chip-trigger-icon" }), this.selectedLabel || this.placeholder));
+    }
+    // Helper method to render option as chip (new automatic approach)
+    renderOptionChip(option) {
+        const chipProps = this.getOptionChipProps(option);
+        return (h("pds-chip", { sentiment: chipProps.sentiment, variant: "text" // Dropdown options use text variant, not dropdown
+            ,
+            size: chipProps.large ? 'lg' : undefined, icon: chipProps.icon, dot: chipProps.dot, class: "pds-combobox__option-chip" }, this.getOptionLabel(option)));
+    }
+    // Mirrors pds-multiselect and pds-select: an error message on its own puts the
+    // field in an invalid state, so assistive tech agrees with the visual treatment.
+    isInvalid() {
+        return Boolean(this.invalid) || Boolean(this.errorMessage);
+    }
+    renderMessages() {
+        const hasErrorMessage = Boolean(this.errorMessage);
+        const showHelperMessage = Boolean(this.helperMessage) && !hasErrorMessage;
+        return [
+            showHelperMessage && (h("p", { class: "pds-combobox__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)),
+            hasErrorMessage && (h("p", { class: "pds-combobox__error", id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { icon: "danger", size: "small", "aria-hidden": "true" }), this.errorMessage)),
+        ];
+    }
+    render() {
+        const triggerClass = [
+            'pds-combobox__button-trigger',
+            `pds-combobox__button-trigger--${this.triggerVariant}`,
+            this.triggerShape === 'input' && 'pds-combobox__button-trigger--input-shape',
+        ]
+            .filter(Boolean)
+            .join(' ');
+        return (h(Host, { key: 'a39df3c86a29028344943bd3a2828d5e99106d77', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '32cdb8ce31f9d7c9eac8f995cd233fe6f4d9dfc3', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.label && !this.hideLabel && (h("label", { key: '64ed7fe37082e2f895daae0090ae3dfac472e3c3', htmlFor: this.componentId, class: "pds-combobox__label" }, this.label)), this.trigger === 'input' ? (h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, h("input", { ref: el => {
+                this.inputEl = el;
+                this.triggerEl = el;
+            }, class: {
+                'pds-combobox__input': true,
+                'pds-combobox__input--invalid': this.isInvalid(),
+            }, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? this.optionDomId(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.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), h("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (h("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? this.optionDomId(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, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (h("div", { class: triggerClass, style: { width: this.triggerWidth }, role: "combobox", "aria-haspopup": "listbox", "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? this.optionDomId(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, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), h("div", { key: '48041c41a39987f2f4093bd048d6c495ea69514b', style: { display: 'none' } }, h("slot", { key: '5f4d95fefbd3dbdb33ecb25af593c9429df0e10b', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
+    }
+    static get is() { return "pds-combobox"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    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,
+                "reflect": false,
+                "attribute": "component-id"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the form control. Submitted with the form as part of a name/value pair."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "name"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "custom-option-layouts",
+                "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,
+                "reflect": false,
+                "attribute": "custom-trigger-content",
+                "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,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Error message to display."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "dropdown-placement",
+                "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,
+                "reflect": false,
+                "attribute": "dropdown-width",
+                "defaultValue": "'236px'"
+            },
+            "dropdownMount": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'host' | 'body'",
+                    "resolved": "\"body\" | \"host\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'host'"
+                        }],
+                    "text": "Where to mount the dropdown listbox (`host` or `body`, sometimes called \u201Cappend to body\u201D).\nUse `body` inside scrollable containers (for example modals) so the list is not clipped by\n`overflow: hidden` ancestors. The portal is appended to the nearest `<dialog>` when present\n(including `pds-modal` / `showModal()`), using a composed ascent so shadow DOM and slot\nboundaries do not hide the dialog from discovery; otherwise it is appended to `document.body`.\nKeyboard focus remains on the trigger via\n`aria-activedescendant` so modal focus traps continue to work. Custom `empty` and `loading`\nslots are not supported when `body` is used; the default empty and loading content is shown instead."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dropdown-mount",
+                "defaultValue": "'host'"
+            },
+            "helperMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper message to display below the combobox."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-message"
+            },
+            "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.\nThe visible `<label>` is omitted (same pattern as `pds-select`) so label spacing does not reserve layout;\nthe trigger uses `aria-label` so the name stays available to assistive technology."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-label",
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, the combobox is in an invalid state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "max-height"
+            },
+            "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).\nIn filter mode, reopening the menu while the input still shows the label of the selected option temporarily lists\nall options until you type (so you can switch to a different choice without clearing the field first)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mode",
+                "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,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "trigger": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'input' | 'button' | 'chip'",
+                    "resolved": "\"button\" | \"chip\" | \"input\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'input'"
+                        }],
+                    "text": "Determines the combobox trigger: 'input' (editable input), 'button' (button-like, non-editable), or 'chip' (chip-like, non-editable)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger",
+                "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,
+                "reflect": false,
+                "attribute": "trigger-width",
+                "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,
+                "reflect": false,
+                "attribute": "trigger-variant",
+                "defaultValue": "'secondary'"
+            },
+            "triggerShape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'pill' | 'input'",
+                    "resolved": "\"input\" | \"pill\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'pill'"
+                        }],
+                    "text": "The shape of the button trigger. Use 'input' to render the trigger with input-like styling\n(subtle border radius, input height) for use in form or filter rows alongside PdsSelect and PdsMultiselect."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger-shape",
+                "defaultValue": "'pill'"
+            },
+            "chipSentiment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ChipSentimentType",
+                    "resolved": "\"accent\" | \"brand\" | \"danger\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
+                    "references": {
+                        "ChipSentimentType": {
+                            "location": "import",
+                            "path": "@utils/types",
+                            "id": "src/utils/types.ts::ChipSentimentType",
+                            "referenceLocation": "ChipSentimentType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'neutral'"
+                        }],
+                    "text": "The sentiment for the chip trigger. Matches Pine chip sentiments."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "chip-sentiment",
+                "defaultValue": "'neutral'"
+            },
+            "chipLarge": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether the chip trigger should be displayed in a larger size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "chip-large",
+                "defaultValue": "false"
+            },
+            "chipIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the icon to display in the chip trigger."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "chip-icon"
+            },
+            "chipDot": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether a dot should be displayed on the chip trigger."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "chip-dot",
+                "defaultValue": "false"
+            },
+            "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,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "asyncUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "URL endpoint for async data fetching."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "async-url"
+            },
+            "asyncMethod": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'GET' | 'POST'",
+                    "resolved": "\"GET\" | \"POST\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "HTTP method for async requests."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "async-method",
+                "defaultValue": "'GET'"
+            },
+            "debounce": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Debounce delay in milliseconds for search/fetch."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "debounce",
+                "defaultValue": "300"
+            },
+            "fetchTimeout": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Timeout in milliseconds for async fetch requests."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "fetch-timeout",
+                "defaultValue": "30000"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the component is currently loading async options."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComboboxOption[]",
+                    "resolved": "ComboboxOption[]",
+                    "references": {
+                        "ComboboxOption": {
+                            "location": "import",
+                            "path": "./combobox-interface",
+                            "id": "src/components/pds-combobox/combobox-interface.ts::ComboboxOption",
+                            "referenceLocation": "ComboboxOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Options provided externally (for consumer-managed async)."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "formatResult": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(item: unknown) => ComboboxOption",
+                    "resolved": "(item: unknown) => ComboboxOption",
+                    "references": {
+                        "ComboboxOption": {
+                            "location": "import",
+                            "path": "./combobox-interface",
+                            "id": "src/components/pds-combobox/combobox-interface.ts::ComboboxOption",
+                            "referenceLocation": "ComboboxOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Function to format async results. Receives raw API response item."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "displayText": {},
+            "filteredItems": {},
+            "highlightedIndex": {},
+            "isOpen": {},
+            "selectedOption": {},
+            "selectedOptionLayoutContent": {},
+            "selectedOptionChipProps": {},
+            "internalOptions": {},
+            "currentPage": {},
+            "hasMore": {}
+        };
+    }
+    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": {}
+                }
+            }, {
+                "method": "pdsComboboxSearch",
+                "name": "pdsComboboxSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on search input (for consumer-managed async)."
+                },
+                "complexType": {
+                    "original": "ComboboxSearchEventDetail",
+                    "resolved": "ComboboxSearchEventDetail",
+                    "references": {
+                        "ComboboxSearchEventDetail": {
+                            "location": "import",
+                            "path": "./combobox-interface",
+                            "id": "src/components/pds-combobox/combobox-interface.ts::ComboboxSearchEventDetail",
+                            "referenceLocation": "ComboboxSearchEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "pdsComboboxLoadOptions",
+                "name": "pdsComboboxLoadOptions",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted to request more options (pagination)."
+                },
+                "complexType": {
+                    "original": "ComboboxLoadOptionsEventDetail",
+                    "resolved": "ComboboxLoadOptionsEventDetail",
+                    "references": {
+                        "ComboboxLoadOptionsEventDetail": {
+                            "location": "import",
+                            "path": "./combobox-interface",
+                            "id": "src/components/pds-combobox/combobox-interface.ts::ComboboxLoadOptionsEventDetail",
+                            "referenceLocation": "ComboboxLoadOptionsEventDetail"
+                        }
+                    }
+                }
+            }];
+    }
+    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": []
+                }
+            },
+            "clear": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Clears the selected value and resets the component.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "isOpen",
+                "methodName": "isOpenChanged"
+            }, {
+                "propName": "debounce",
+                "methodName": "setupDebounce"
+            }, {
+                "propName": "options",
+                "methodName": "optionsChanged"
+            }, {
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }, {
+                "propName": "selectedOption",
+                "methodName": "handleSelectedOptionChange"
+            }];
+    }
+}