@pine-ds/core 3.25.0 → 3.26.0

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

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { isSpecTest } from "../../utils/form";
-import { computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
 import { debounceEvent } from "../../utils/utils";
 import DOMPurify from "dompurify";
 /**
@@ -38,6 +38,18 @@ export class PdsCombobox {
          * @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;
@@ -46,6 +58,8 @@ export class PdsCombobox {
         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';
@@ -147,9 +161,18 @@ export class PdsCombobox {
         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();
@@ -165,19 +188,26 @@ export class PdsCombobox {
             // 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(), 0);
+                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();
@@ -270,6 +300,7 @@ export class PdsCombobox {
                     e.preventDefault();
                     this.isOpen = false;
                     this.highlightedIndex = -1;
+                    this.clearExpandFilterList();
                     this.isArrowKeyNavigationMode = false; // Reset arrow-key navigation mode
                     this.restoreFocusToTrigger();
                     break;
@@ -277,6 +308,7 @@ export class PdsCombobox {
                     // 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;
             }
@@ -308,6 +340,7 @@ export class PdsCombobox {
         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) {
@@ -321,6 +354,7 @@ export class PdsCombobox {
             }
             else {
                 // Reset navigation mode when closing
+                this.clearExpandFilterList();
                 this.isArrowKeyNavigationMode = false;
             }
         };
@@ -330,6 +364,7 @@ export class PdsCombobox {
                 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();
@@ -344,6 +379,7 @@ export class PdsCombobox {
                 if (this.isOpen) {
                     this.isOpen = false;
                     this.highlightedIndex = -1;
+                    this.clearExpandFilterList();
                     this.updateAriaActiveDescendant(); // Clear aria-activedescendant
                     this.restoreFocusToTrigger();
                 }
@@ -362,15 +398,16 @@ export class PdsCombobox {
         };
         // Close dropdown when focus leaves the combobox
         this.onComboboxFocusOut = (event) => {
-            var _a;
+            var _a, _b;
             const relatedTarget = event.relatedTarget;
-            // Check if the related target is within our shadow DOM (listbox options)
-            const isRelatedTargetInListbox = relatedTarget && ((_a = this.listboxEl) === null || _a === void 0 ? void 0 : _a.contains(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
@@ -424,8 +461,57 @@ export class PdsCombobox {
     }
     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;
@@ -768,7 +854,7 @@ export class PdsCombobox {
         if (this.allItems.length === 0 && this.optionEls.length > 0) {
             this.allItems = [...this.optionEls];
         }
-        if (this.mode === 'select-only') {
+        if (this.mode === 'select-only' || this.expandFilterListWhileOpen) {
             this.filteredItems = [...this.allItems];
         }
         else {
@@ -809,28 +895,153 @@ export class PdsCombobox {
         }
         this.highlightedIndex = -1;
     }
-    openDropdownPositioning() {
-        if (this.triggerEl && this.listboxEl) {
-            // Apply width and max-height BEFORE positioning calculations
-            this.listboxEl.style.width = this.dropdownWidth;
-            if (this.maxHeight) {
-                this.listboxEl.style.maxHeight = this.maxHeight;
-                this.listboxEl.style.overflowY = 'auto';
+    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;
             }
-            // Force a reflow to ensure dimensions are calculated
-            this.listboxEl.offsetHeight;
-            computePosition(this.triggerEl, this.listboxEl, {
-                placement: this.dropdownPlacement,
-                strategy: 'absolute',
-                middleware: [offset(12), flip(), shift({ padding: 5 })],
-            }).then(({ x, y }) => {
-                Object.assign(this.listboxEl.style, {
-                    left: `${x}px`,
-                    top: `${y}px`,
-                    position: 'absolute',
-                    zIndex: 'var(--pine-z-index-raised)',
-                });
+            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;
         }
     }
     /**
@@ -887,30 +1098,32 @@ export class PdsCombobox {
      * Focus management helper - actually focuses the first option when opened via arrow keys
      */
     focusFirstOptionForArrowKeys() {
-        if (this.isOpen) {
-            // Set arrow-key navigation mode
+        if (!this.isOpen) {
+            return;
+        }
+        // Body-mounted listboxes stay outside modal focus traps; keep focus on the trigger.
+        if (this.usesBodyPortal) {
             this.isArrowKeyNavigationMode = true;
-            const selectableOptions = this.filteredItems.filter(item => item.tagName === 'OPTION');
-            if (selectableOptions.length > 0) {
-                this.setInitialHighlightedIndex();
-                // For arrow key navigation, actually focus the highlighted option
-                if (this.listboxEl) {
-                    const optionElements = this.listboxEl.querySelectorAll('[role="option"]');
-                    const highlightedOption = optionElements[this.highlightedIndex];
-                    if (highlightedOption) {
-                        // Remove tabindex from all options first
-                        optionElements.forEach(option => {
-                            option.setAttribute('tabindex', '-1');
-                        });
-                        // Set tabindex and focus on highlighted option
-                        highlightedOption.setAttribute('tabindex', '0');
-                        highlightedOption.focus();
-                        highlightedOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
-                    }
+            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' });
                 }
-                // Update aria-activedescendant on trigger
-                this.updateAriaActiveDescendant();
             }
+            this.updateAriaActiveDescendant();
         }
     }
     /**
@@ -925,8 +1138,8 @@ export class PdsCombobox {
         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);
-            if (hasOptionFocus || this.isArrowKeyNavigationMode) {
-                // We're in arrow-key navigation mode, so actually move focus between options
+            const shouldFocusOption = !this.usesBodyPortal && (hasOptionFocus || this.isArrowKeyNavigationMode);
+            if (shouldFocusOption) {
                 optionElements.forEach(option => {
                     option.setAttribute('tabindex', '-1');
                 });
@@ -944,7 +1157,7 @@ export class PdsCombobox {
      */
     updateAriaActiveDescendant() {
         if (this.triggerEl && this.highlightedIndex >= 0) {
-            this.triggerEl.setAttribute('aria-activedescendant', `pds-combobox-option-${this.highlightedIndex}`);
+            this.triggerEl.setAttribute('aria-activedescendant', this.optionDomId(this.highlightedIndex));
         }
         else if (this.triggerEl) {
             this.triggerEl.removeAttribute('aria-activedescendant');
@@ -1086,17 +1299,18 @@ export class PdsCombobox {
         // 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.el.querySelector('[slot="empty"]');
-        const hasSlottedLoading = !!this.el.querySelector('[slot="loading"]');
+        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: "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) => {
+        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));
@@ -1112,7 +1326,7 @@ export class PdsCombobox {
                 const isLayout = this.isOptionLayout(option);
                 const isChip = this.isOptionChip(option);
                 const currentOptionIndex = optionIndex++;
-                return (h("li", { key: option.value, id: `pds-combobox-option-${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: isHighlighted ? '0' : '-1', class: {
+                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,
@@ -1244,10 +1458,10 @@ export class PdsCombobox {
         ]
             .filter(Boolean)
             .join(' ');
-        return (h(Host, { key: '6a8f372c89a896d2d7e67661e84053c4c95b93c9' }, h("div", { key: '7b4747885bfa9aaa6e698bf13b6cdf9d4e77b3b1', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.label && !this.hideLabel && (h("label", { key: '46acd60080458de682516becc6144b38675a3f2d', 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 => {
+        return (h(Host, { key: '3bb3331a7400bd505b900c1179e27239ca5286f0' }, h("div", { key: '645c6dee13177adb126f26288d0c3030e2d3d25f', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.label && !this.hideLabel && (h("label", { key: '6b84ecb6b542a30a3b78345f3aff2ca167b118ad', 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", 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: '4e4bd7cb7139416f3f59b1c9736a1fad85c09c24', style: { display: 'none' } }, h("slot", { key: '79e4c181d161a56acba68e1f7ca932369e938e10', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
+            }, class: "pds-combobox__input", type: "text", role: "combobox", "aria-autocomplete": "list", "aria-controls": this.listboxId, "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-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-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())), h("div", { key: '8562c78172749eb3d77e0dfc3c87d7a8eabeb12f', style: { display: 'none' } }, h("slot", { key: '3004f1014cd050fdeeb06274bb5c36bb6c8bbbed', onSlotchange: () => this.updateOptions() })), this.renderDropdown())));
     }
     static get is() { return "pds-combobox"; }
     static get encapsulation() { return "shadow"; }
@@ -1414,6 +1628,29 @@ export class PdsCombobox {
                 "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'"
+            },
             "hideLabel": {
                 "type": "boolean",
                 "mutable": false,
@@ -1487,7 +1724,7 @@ export class PdsCombobox {
                             "name": "default",
                             "text": "'filter'"
                         }],
-                    "text": "Determines the combobox mode: 'filter' (filter options as you type) or 'select-only' (show all options)."
+                    "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,
@@ -1982,6 +2219,9 @@ export class PdsCombobox {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "isOpen",
+                "methodName": "isOpenChanged"
+            }, {
                 "propName": "debounce",
                 "methodName": "setupDebounce"
             }, {