@pine-ds/core 3.14.2 → 3.15.0

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

@@ -1,9 +1,12 @@
 import { h, Host } from "@stencil/core";
 import { 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() {
@@ -78,6 +81,22 @@ export class PdsCombobox {
          * 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
          */
@@ -106,6 +125,18 @@ export class PdsCombobox {
          * 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.isUpdatingFromSelection = false;
@@ -114,6 +145,12 @@ export class PdsCombobox {
             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 = () => {
@@ -121,6 +158,10 @@ export class PdsCombobox {
             if (!this.isOpen) {
                 this.isOpen = true;
                 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(), 0);
             }
@@ -260,6 +301,10 @@ export class PdsCombobox {
             this.isOpen = !this.isOpen;
             if (this.isOpen) {
                 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
@@ -327,6 +372,20 @@ export class PdsCombobox {
                 }
             }
         };
+        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)
@@ -335,10 +394,12 @@ export class PdsCombobox {
         }
     }
     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);
@@ -360,6 +421,23 @@ export class PdsCombobox {
             }
         }
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.clearAsyncFetchState();
+    }
+    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
@@ -425,8 +503,141 @@ export class PdsCombobox {
             }
         }
     }
+    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);
+        });
+        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) {
@@ -883,12 +1094,14 @@ export class PdsCombobox {
         this.pdsComboboxChange.emit({ value: option.value });
     }
     renderDropdown() {
-        if (!this.isOpen || this.filteredItems.length === 0) {
+        if (!this.isOpen) {
             return null;
         }
+        const hasSlottedEmpty = !!this.el.querySelector('[slot="empty"]');
+        const hasSlottedLoading = !!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: "pds-combobox-listbox", "aria-label": this.label || 'Options', "aria-multiselectable": "false", ref: el => (this.listboxEl = el) }, this.filteredItems.map((item, itemIdx) => {
+        return (h("ul", { class: "pds-combobox__listbox", role: "listbox", id: "pds-combobox-listbox", "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));
@@ -912,7 +1125,7 @@ export class PdsCombobox {
                     }, "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() {
@@ -1030,10 +1243,10 @@ export class PdsCombobox {
     }
     render() {
         const triggerClass = `pds-combobox__button-trigger pds-combobox__button-trigger--${this.triggerVariant}`;
-        return (h(Host, { key: 'e4de3982f971380d983bcb587de64f8767d4fc2b' }, h("div", { key: 'c0637dfa13b6482514cef29c18cda354002f6e3b', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut }, this.label && (h("label", { key: 'cdbb49f63298e0003fff9a9456d3a8bfc1ce9978', htmlFor: this.componentId, class: "pds-combobox__label" }, h("span", { key: '9c20cf24390599408a0f16b6cbf944c8c337979e', class: this.hideLabel ? 'visually-hidden' : '' }, this.label))), this.trigger === 'input' ? (h("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, h("input", { ref: el => {
+        return (h(Host, { key: '969d61af2b58a33d582259df5fe62a4d509a9f7b' }, h("div", { key: '2af78eb8fd340e6f7a05f86ed3ed17dbe2c066e3', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut }, this.label && (h("label", { key: '9c85e41decaeb8403fad2217a90c5f2aaf659651', htmlFor: this.componentId, class: "pds-combobox__label" }, h("span", { key: '578de8ce9fa07ce8f14b8b689c9fa8ee91495b83', class: this.hideLabel ? 'visually-hidden' : '' }, 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", type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.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": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, 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": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, 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())), h("div", { key: 'e78fc8514f56f3383e8bfec095ee7b6c9712e19b', style: { display: 'none' } }, h("slot", { key: '6684dc11fa0dfefcf295080732897f87f2e1c7ff', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
+            }, class: "pds-combobox__input", type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.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": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, 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": "pds-combobox-listbox", "aria-activedescendant": this.isOpen && this.highlightedIndex >= 0 ? `pds-combobox-option-${this.highlightedIndex}` : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, 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())), h("div", { key: '9805336062fc35dfa0465f0b85916c02b96ad10e', style: { display: 'none' } }, h("slot", { key: 'cef42fb8fe2f73e2d44ed8258f805407a87628a2', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
     }
     static get is() { return "pds-combobox"; }
     static get encapsulation() { return "shadow"; }
@@ -1482,6 +1695,151 @@ export class PdsCombobox {
                 "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"
+                        }
+                    }
+                },
+                "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"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Function to format async results. Receives raw API response item."
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }
@@ -1493,7 +1851,10 @@ export class PdsCombobox {
             "isOpen": {},
             "selectedOption": {},
             "selectedOptionLayoutContent": {},
-            "selectedOptionChipProps": {}
+            "selectedOptionChipProps": {},
+            "internalOptions": {},
+            "currentPage": {},
+            "hasMore": {}
         };
     }
     static get events() {
@@ -1512,6 +1873,48 @@ export class PdsCombobox {
                     "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"
+                        }
+                    }
+                }
+            }, {
+                "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"
+                        }
+                    }
+                }
             }];
     }
     static get methods() {
@@ -1555,6 +1958,12 @@ export class PdsCombobox {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "debounce",
+                "methodName": "setupDebounce"
+            }, {
+                "propName": "options",
+                "methodName": "optionsChanged"
+            }, {
                 "propName": "value",
                 "methodName": "handleValueChange"
             }, {