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

package/dist/cjs/pds-multiselect.cjs.entry.js

@@ -0,0 +1,1384 @@
+'use strict';
+
+var index = require('./index-D9iJuJCP.js');
+var floatingUi_dom = require('./floating-ui.dom-Dw41zbyY.js');
+var utils = require('./utils-BhRmyxT8.js');
+var form = require('./form-MhwfKTuo.js');
+var index$1 = require('./index-BDnbr0DK.js');
+var i18nFormat = require('./i18n-format-BD0PmYzT.js');
+var truncationTooltip = require('./truncation-tooltip-CM5HgRHh.js');
+require('./keep-hydrated-AKoh0DG4.js');
+require('./portal-target-e8WQ6dLx.js');
+
+const pdsMultiselectCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-multiselect__trigger-label{display:grid;-ms-flex:1;flex:1;grid-template-columns:minmax(0, 1fr);min-width:0}.pds-multiselect__trigger-sizer{grid-area:1/1;overflow:hidden;visibility:hidden;white-space:nowrap}.pds-multiselect__trigger-label>.pds-multiselect__trigger-text{contain:inline-size;grid-area:1/1}.pds-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__pill-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs)}.pds-multiselect__pill-list--inline{-ms-flex:1;flex:1;min-width:0}.pds-multiselect__pill-list--below{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-multiselect__pill-overflow{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);white-space:nowrap}.pds-multiselect__trigger--pill-inline{-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger--pill-inline:focus-within:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--invalid:focus-within{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__pill-toggle{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-width:0;cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-multiselect__pill-toggle:focus{outline:3px solid transparent}.pds-multiselect__trigger--disabled .pds-multiselect__pill-toggle{cursor:not-allowed;pointer-events:none}.pds-multiselect__panel{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:fixed;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-active);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__group-header{color:var(--pine-color-text-muted);display:block;font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-sm) var(--pine-dimension-sm) var(--pine-dimension-2xs);text-transform:uppercase}.pds-multiselect__listbox>li:first-child>.pds-multiselect__group-header{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-multiselect__group-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{min-width:var(--pine-dimension-none);pointer-events:none;width:100%}.pds-multiselect__option pds-chip{pointer-events:auto}.pds-multiselect__option:hover:not(.pds-multiselect__option--disabled),.pds-multiselect__option.pds-multiselect__option--highlighted:not(.pds-multiselect__option--disabled){background:var(--pine-color-background-muted)}.pds-multiselect__option.pds-multiselect__option--disabled{cursor:not-allowed;opacity:0.5}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__option-action{-ms-flex-align:center;align-items:center;block-size:var(--pine-dimension-md);color:var(--pine-color-icon);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-dimension-md);-ms-flex-pack:center;justify-content:center;-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs)}.pds-multiselect__footer{-webkit-border-before:var(--pine-border);border-block-start:var(--pine-border);border-block-start-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}`;
+
+// Names only: pds-icon's `icon` prop also fetches URLs and data: SVGs, unsanitized.
+const PINE_ICON_NAME = /^[a-z0-9-]+$/i;
+const TABBABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+const PdsMultiselect = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pdsMultiselectChange = index.createEvent(this, "pdsMultiselectChange");
+        this.pdsMultiselectSearch = index.createEvent(this, "pdsMultiselectSearch");
+        this.pdsMultiselectLoadOptions = index.createEvent(this, "pdsMultiselectLoadOptions");
+        this.pdsMultiselectCreate = index.createEvent(this, "pdsMultiselectCreate");
+        this.pdsMultiselectDismiss = index.createEvent(this, "pdsMultiselectDismiss");
+        this.pdsMultiselectOptionAction = index.createEvent(this, "pdsMultiselectOptionAction");
+        this.triggerTextTooltip = truncationTooltip.bindTruncationTooltips((textEl) => {
+            var _a;
+            return ({
+                // Not the host, which holds the panel.
+                hostEl: (_a = textEl.closest('[part="trigger"]')) !== null && _a !== void 0 ? _a : textEl,
+                contentEl: textEl,
+                getTooltipText: () => this.getTriggerText(),
+                manageTabIndex: false,
+            });
+        });
+        this.selectedItemTooltips = truncationTooltip.bindTruncationTooltips((item) => ({
+            hostEl: item,
+            contentEl: item,
+            getTooltipText: () => { var _a; return (_a = item.textContent) !== null && _a !== void 0 ? _a : ''; },
+        }));
+        this.hasDisabledSlottedTrigger = false;
+        /**
+         * Placeholder text for the input field. Pass a translated string to localize it; defaults to English.
+         * @defaultValue 'Select...'
+         */
+        this.placeholder = 'Select...';
+        /**
+         * Placeholder text for the search input inside the dropdown panel. Pass a translated string to localize it; defaults to English.
+         * @defaultValue 'Find...'
+         */
+        this.searchPlaceholder = 'Find...';
+        /**
+         * Accessible label for the search input. Pass a translated string to localize it; defaults to English.
+         * @defaultValue 'Search options'
+         */
+        this.searchOptionsLabel = 'Search options';
+        /**
+         * Accessible label for the selected-items region. Pass a translated string to localize it; defaults to English.
+         * @defaultValue 'Selected items'
+         */
+        this.selectedItemsLabel = 'Selected items';
+        /**
+         * Accessible label for the options listbox (falls back to this when `label` is unset). Pass a translated string to localize it; defaults to English.
+         * @defaultValue 'Options'
+         */
+        this.optionsLabel = 'Options';
+        /**
+         * Text shown when no options match the search. Pass a translated string to localize it; defaults to English.
+         * @defaultValue 'No options found'
+         */
+        this.noOptionsFoundLabel = 'No options found';
+        /**
+         * Visible label for the create-new-option row. Pass a translated string to localize it; `{text}` is interpolated.
+         * @defaultValue 'Add "{text}"'
+         */
+        this.createOptionLabel = 'Add "{text}"';
+        /**
+         * Accessible label for the create-new-option row. Pass a translated string to localize it; `{text}` is interpolated.
+         * @defaultValue 'Create new tag: {text}'
+         */
+        this.createOptionAriaLabel = 'Create new tag: {text}';
+        /**
+         * Screen-reader announcement when an item is removed. Pass a translated string to localize it; `{item}` is interpolated.
+         * @defaultValue '{item} removed'
+         */
+        this.itemRemovedLabel = '{item} removed';
+        /**
+         * Accessible label for the remove button on each selected-item pill. Pass a translated string to localize it; defaults to English.
+         * @defaultValue 'Remove'
+         */
+        this.pillRemoveLabel = 'Remove';
+        /**
+         * Singular form of the selected-count trigger text. Pass a translated string to localize it; `{count}` is interpolated.
+         * A single selection shows the item's name instead, so this applies to other counts that a locale's plural rules treat as singular, and to a single selection whose item has no text.
+         * @defaultValue '{count} item'
+         */
+        this.selectedCountLabelOne = '{count} item';
+        /**
+         * Plural (and fallback) form of the selected-count trigger text — used for English and any locale whose selected plural category isn't supplied via `selectedCountLabels`. Pass a translated string to localize it; `{count}` is interpolated.
+         * @defaultValue '{count} items'
+         */
+        this.selectedCountLabelOther = '{count} items';
+        /**
+         * Whether to close the panel after an option is selected.
+         * Defaults to `false` (panel stays open for multi-select).
+         */
+        this.closePanelOnSelect = false;
+        /**
+         * Array of selected option values.
+         */
+        this.value = [];
+        /**
+         * Determines whether or not the multiselect is disabled.
+         */
+        this.disabled = false;
+        /**
+         * 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;
+        /**
+         * Maximum height of the dropdown before scrolling.
+         */
+        this.maxHeight = '300px';
+        /**
+         * Width of the trigger button (and reference for dropdown positioning).
+         */
+        this.triggerWidth = '100%';
+        /**
+         * Minimum width of the dropdown panel.
+         */
+        this.minWidth = '250px';
+        /**
+         * Visually hides the label but keeps it accessible.
+         */
+        this.hideLabel = false;
+        /**
+         * Hides the selected items summary section in the dropdown panel.
+         */
+        this.hideSelectedItems = false;
+        /**
+         * Display mode for selected items outside the dropdown panel.
+         * `'count'` shows the item's name in the trigger when one is selected and
+         * "N items" text otherwise (default). `'pill'` renders selected items as
+         * dismissible pds-chip tags.
+         * @default 'count'
+         */
+        this.selectedDisplay = 'count';
+        /**
+         * Position of pill chips when `selectedDisplay` is `'pill'`.
+         * `'inline'` places chips inside the trigger; `'below'` places chips in a
+         * flex-wrap row directly below the trigger.
+         * @default 'inline'
+         */
+        this.pillPosition = 'inline';
+        /**
+         * Maximum chips shown inline before collapsing to a "+N more" badge.
+         * Only applies when `selectedDisplay='pill'` and `pillPosition='inline'`.
+         * @default 3
+         */
+        this.maxInlinePills = 3;
+        /**
+         * Display mode for options in the dropdown panel.
+         * `'text'` shows each option's text (default). `'chip'` shows each option as a
+         * pds-chip, with a dot when the option has a `dotColor`.
+         * @defaultValue 'text'
+         */
+        this.optionDisplay = 'text';
+        /**
+         * If true, the multiselect is required.
+         */
+        this.required = false;
+        /**
+         * Whether the component is currently loading async options.
+         */
+        this.loading = false;
+        /**
+         * CSRF header name for authenticated requests. Defaults to `X-CSRF-Token`.
+         */
+        this.csrfHeaderName = 'X-CSRF-Token';
+        /**
+         * Shows an action icon on each option that has an `actionIcon`, such as an edit pencil.
+         * The icon shows on the hovered or highlighted option; clicking it, or pressing Right Arrow on the highlighted option, emits `pdsMultiselectOptionAction`.
+         */
+        this.optionActions = false;
+        /**
+         * Tooltip for an option's action icon when the option has no `actionLabel`. Pass a translated string to localize it; `{text}` is interpolated.
+         * @defaultValue 'Edit {text}'
+         */
+        this.optionActionLabel = 'Edit {text}';
+        /**
+         * Screen-reader hint on each option that has an action, naming the key that runs it. Pass a translated string to localize it; `{action}` is interpolated with the option's action label.
+         * @defaultValue 'Press Right Arrow to {action}'
+         */
+        this.optionActionDescription = 'Press Right Arrow to {action}';
+        // Internal state
+        this.isOpen = false;
+        this.searchQuery = '';
+        this.highlightedIndex = -1;
+        this.internalOptions = [];
+        this.selectedItems = [];
+        this.currentPage = 1;
+        this.hasMore = false;
+        this.creating = false;
+        this.removalAnnouncement = '';
+        // Flag to prevent focusout from closing during open transition
+        this.isOpening = false;
+        // Flag to suppress dismiss event when panel closes due to selection (not user dismissal)
+        this.isClosingViaSelection = false;
+        // Flag to track if initial async fetch has been triggered (prevents double fetch)
+        this.initialAsyncFetchTriggered = false;
+        // Flag to track if value changed during loading and needs resolution after fetch completes
+        this.pendingUnresolvedFetch = false;
+        this.handleTriggerClick = (e) => {
+            if (this.disabled)
+                return;
+            // In inline-pill mode, ignore clicks that originated inside a pds-chip.
+            // Chip close-button clicks are handled by handlePillRemove; chip body clicks should not toggle the panel.
+            if (e && !this.slottedTriggerEl && this.selectedDisplay === 'pill' && this.pillPosition === 'inline') {
+                const fromChip = e.composedPath().some(el => { var _a; return ((_a = el.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'pds-chip'; });
+                if (fromChip)
+                    return;
+            }
+            if (this.isOpen) {
+                this.closeDropdown();
+            }
+            else {
+                this.openDropdown();
+            }
+        };
+        this.handleTriggerKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            // Ignore keydown events that bubbled from child elements (e.g. chip close buttons).
+            // Only handle keys when the trigger itself is the event target.
+            if (e.target !== this.activeTriggerEl)
+                return;
+            switch (e.key) {
+                case 'ArrowDown':
+                case 'ArrowUp':
+                case 'Enter':
+                case ' ':
+                    e.preventDefault();
+                    if (!this.isOpen) {
+                        this.openDropdown();
+                    }
+                    break;
+            }
+        };
+        this.handleSearchInputChange = (e) => {
+            const target = e.target;
+            this.searchQuery = target.value;
+            this.highlightedIndex = -1;
+            // Emit search event for consumer-managed async
+            this.pdsMultiselectSearch.emit({ query: this.searchQuery });
+            // Fetch from async URL if configured
+            if (this.asyncUrl) {
+                this.debouncedFetchAsyncOptions(this.searchQuery, 1);
+            }
+        };
+        this.handleSearchInputKeyDown = (e) => {
+            var _a, _b, _c;
+            const filteredOptions = this.getFilteredOptions();
+            switch (e.key) {
+                case 'ArrowDown': {
+                    e.preventDefault();
+                    let nextIndex = this.highlightedIndex + 1;
+                    while (nextIndex < filteredOptions.length && ((_a = filteredOptions[nextIndex]) === null || _a === void 0 ? void 0 : _a.disabled)) {
+                        nextIndex++;
+                    }
+                    if (nextIndex < filteredOptions.length) {
+                        this.highlightedIndex = nextIndex;
+                        this.scrollOptionIntoView();
+                    }
+                    break;
+                }
+                case 'ArrowUp': {
+                    e.preventDefault();
+                    // Clamp to 0 so ArrowUp from uninitialised state (-1) attempts the first option;
+                    // stays at -1 if that option is disabled.
+                    let prevIndex = Math.max(this.highlightedIndex - 1, 0);
+                    while (prevIndex > 0 && ((_b = filteredOptions[prevIndex]) === null || _b === void 0 ? void 0 : _b.disabled)) {
+                        prevIndex--;
+                    }
+                    if (!((_c = filteredOptions[prevIndex]) === null || _c === void 0 ? void 0 : _c.disabled)) {
+                        this.highlightedIndex = prevIndex;
+                        this.scrollOptionIntoView();
+                    }
+                    break;
+                }
+                case 'Enter':
+                    e.preventDefault();
+                    if (this.highlightedIndex >= 0) {
+                        const option = filteredOptions[this.highlightedIndex];
+                        if (option) {
+                            this.selectOption(option);
+                        }
+                    }
+                    break;
+                // Right Arrow still moves the caret through typed text; a plain Right Arrow at the end runs the action.
+                case 'ArrowRight': {
+                    const option = filteredOptions[this.highlightedIndex];
+                    const isPlainKey = !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey && !e.isComposing;
+                    if (isPlainKey && option && this.hasOptionAction(option) && this.isCaretAtEndOfSearch()) {
+                        e.preventDefault();
+                        this.runOptionAction(option);
+                    }
+                    break;
+                }
+                // Escape is handled by the global @Listen('keydown') handler
+                case 'Tab': {
+                    const row = e.shiftKey ? undefined : this.getSelectedItemTabbables()[0];
+                    if (row !== undefined) {
+                        row.focus();
+                        e.preventDefault();
+                    }
+                    else {
+                        this.tabPastOptions(e);
+                    }
+                    break;
+                }
+            }
+        };
+        this.handleSelectedListKeyDown = (e) => {
+            if (e.key === 'Tab' && !e.shiftKey && e.composedPath()[0] === this.getSelectedItemTabbables().pop())
+                this.tabPastOptions(e);
+        };
+        this.handleFooterKeyDown = (e) => {
+            var _a, _b;
+            if (e.key !== 'Tab')
+                return;
+            const tabbables = this.getFooterTabbables();
+            const focused = e.composedPath()[0];
+            if (e.shiftKey && focused === tabbables[0]) {
+                e.preventDefault();
+                (_b = ((_a = this.getSelectedItemTabbables().pop()) !== null && _a !== void 0 ? _a : this.searchInputEl)) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+            else if (!e.shiftKey && focused === tabbables[tabbables.length - 1]) {
+                this.closeDropdown();
+            }
+        };
+        this.handleContainerFocusOut = () => {
+            // Use setTimeout to delay the check - this allows click events and focus transitions to complete
+            // before we decide to close the dropdown
+            setTimeout(() => {
+                var _a;
+                // Don't close if we're in the middle of opening, already closed,
+                // or closing due to a selection (not a user dismissal)
+                if (!this.isOpen || this.isOpening || this.isClosingViaSelection)
+                    return;
+                const activeElement = document.activeElement;
+                // Check if focus is within our component's shadow root
+                const isInShadowRoot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(activeElement);
+                // Also check the host itself and its light DOM, where slotted trigger and footer content live
+                const isInHost = this.el.contains(activeElement);
+                if (!isInShadowRoot && !isInHost) {
+                    this.pdsMultiselectDismiss.emit();
+                    this.closeDropdown();
+                }
+            }, 0);
+        };
+        this.handleOptionMouseDown = (option) => (e) => {
+            e.preventDefault(); // Prevent focus change
+            this.toggleOption(option);
+        };
+        // mousedown already toggled the option. Without this, a click on the chip reaches the
+        // checkbox through its label and toggles it a second time.
+        this.handleOptionClick = (e) => {
+            e.preventDefault();
+        };
+        this.handleOptionMouseEnter = (index, option) => () => {
+            if (option.disabled)
+                return;
+            this.highlightedIndex = index;
+        };
+        this.handleOptionActionMouseDown = (e) => {
+            // Stops the row's mousedown from toggling the option, and keeps focus in the search input.
+            e.preventDefault();
+            e.stopPropagation();
+        };
+        this.handleOptionActionClick = (option) => () => {
+            this.runOptionAction(option);
+        };
+        // Keeps focus in the search input so the panel stays open until the footer's click lands.
+        this.handleFooterMouseDown = (e) => {
+            e.preventDefault();
+        };
+        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.pdsMultiselectLoadOptions.emit({
+                    query: this.searchQuery,
+                    page: this.currentPage + 1,
+                });
+                this.debouncedFetchAsyncOptions(this.searchQuery, this.currentPage + 1);
+            }
+        };
+        this.handlePillRemove = (item) => () => {
+            var _a, _b;
+            if (this.disabled)
+                return;
+            const optionId = String(item.id);
+            this.value = this.value.filter(v => v !== optionId);
+            this.syncSelectedItems();
+            this.emitChange({ removed: [optionId] });
+            // Clear first so screen readers re-announce even when the same item is removed twice
+            this.removalAnnouncement = '';
+            queueMicrotask(() => { this.removalAnnouncement = i18nFormat.formatMessage(this.itemRemovedLabel, { item: item.text }); });
+            this.isClosingViaSelection = true;
+            if (this.isOpen) {
+                (_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                (_b = this.activeTriggerEl) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+            setTimeout(() => { this.isClosingViaSelection = false; }, 0);
+        };
+    }
+    connectedCallback() {
+        // Initialize ElementInternals for form association (only once per element instance)
+        if (this.el.attachInternals && !this.internals) {
+            this.internals = this.el.attachInternals();
+        }
+        this.syncTruncationTooltips();
+    }
+    /**
+     * Form Associated Custom Elements API: Called when the form is disabled
+     */
+    formDisabledCallback(disabled) {
+        // Also fires when this element's own `disabled` attribute is merely present, even as the
+        // literal string "false" (a consumer's or React's attribute serialization can write that) —
+        // the platform treats any value as disabled, independent of fieldset state. A real disabled
+        // fieldset ancestor confirms this is genuinely that, not this element's own attribute.
+        if (disabled && !this.el.closest('fieldset[disabled]'))
+            return;
+        this.disabled = disabled;
+    }
+    componentWillLoad() {
+        this.originalSearchEmitter = this.pdsMultiselectSearch;
+        this.syncSelectedItems();
+        this.syncSlottedTrigger();
+    }
+    componentDidLoad() {
+        this.setupDebounce();
+        this.setupMutationObserver();
+        this.setupSlotChangeListener();
+        this.updateFormValue();
+        // Ensure preselected values sync after DOM is fully ready
+        // This handles cases where slot content loads after initial render (e.g., in docs/MDX)
+        requestAnimationFrame(() => {
+            this.updateOptionsFromSlot();
+            this.syncSelectedItems();
+        });
+        // If we have preselected values and asyncUrl, fetch options to resolve them
+        // This ensures the trigger shows "X items" instead of placeholder on initial render
+        if (this.asyncUrl && this.ensureValueArray().length > 0) {
+            this.initialAsyncFetchTriggered = true;
+            this.fetchOptions('', 1);
+        }
+    }
+    setupSlotChangeListener() {
+        var _a;
+        const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
+        if (slot) {
+            slot.addEventListener('slotchange', () => {
+                this.updateOptionsFromSlot();
+                this.syncSelectedItems();
+            });
+            // Also call it immediately in case content is already slotted
+            this.updateOptionsFromSlot();
+        }
+    }
+    componentDidRender() {
+        this.syncTruncationTooltips();
+    }
+    syncTruncationTooltips() {
+        var _a;
+        const root = this.el.shadowRoot;
+        this.triggerTextTooltip.sync([root === null || root === void 0 ? void 0 : root.querySelector('.pds-multiselect__trigger-text')]);
+        this.selectedItemTooltips.sync((_a = root === null || root === void 0 ? void 0 : root.querySelectorAll('.pds-multiselect__selected-item')) !== null && _a !== void 0 ? _a : []);
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        this.triggerTextTooltip.destroy();
+        this.selectedItemTooltips.destroy();
+        utils.cancelDebouncedEvent(this.pdsMultiselectSearch);
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.cleanupAutoUpdate) === null || _b === void 0 ? void 0 : _b.call(this);
+        this.clearAsyncFetchState();
+    }
+    setupDebounce() {
+        const { pdsMultiselectSearch, debounce, originalSearchEmitter } = this;
+        this.pdsMultiselectSearch = debounce === undefined
+            ? originalSearchEmitter !== null && originalSearchEmitter !== void 0 ? originalSearchEmitter : pdsMultiselectSearch
+            : utils.debounceEvent(pdsMultiselectSearch, debounce);
+        // After the swap, so an emit made while flushing goes to the new emitter, not the old one.
+        utils.flushDebouncedEvent(pdsMultiselectSearch);
+    }
+    valueChanged(newValue) {
+        // Handle JSON string values (from HTML attributes)
+        if (typeof newValue === 'string') {
+            try {
+                const parsed = JSON.parse(newValue);
+                if (Array.isArray(parsed)) {
+                    this.value = parsed;
+                    return; // The assignment will trigger this watcher again with the array
+                }
+            }
+            catch (_a) {
+                // Not valid JSON, treat as single value
+                this.value = newValue ? [newValue] : [];
+                return;
+            }
+        }
+        this.syncSelectedItems();
+        this.updateFormValue();
+        // If using asyncUrl and some values couldn't be resolved, fetch options
+        // This handles programmatic value changes where the options aren't loaded yet
+        if (this.asyncUrl) {
+            const valueArray = this.ensureValueArray();
+            const hasUnresolvedValues = valueArray.length > 0 && this.selectedItems.length < valueArray.length;
+            if (hasUnresolvedValues) {
+                if (this.loading) {
+                    // Mark that we need to re-check after current fetch completes
+                    this.pendingUnresolvedFetch = true;
+                }
+                else {
+                    this.fetchOptions('', 1);
+                }
+            }
+        }
+    }
+    optionsChanged() {
+        if (this.options) {
+            this.internalOptions = [...this.options];
+        }
+    }
+    internalOptionsChanged() {
+        // Re-sync selected items when options become available
+        // This handles the case where value is set before options are loaded (e.g., from slot)
+        this.syncSelectedItems();
+    }
+    isOpenChanged() {
+        var _a;
+        (_a = this.slottedTriggerEl) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', String(this.isOpen));
+    }
+    disabledChanged(disabled) {
+        var _a, _b;
+        this.syncSlottedTrigger();
+        // A disabled control can't stay open, or its options could still be toggled.
+        if (!disabled || !this.isOpen)
+            return;
+        const activeElement = document.activeElement;
+        const focusInside = !!(((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(activeElement)) || this.el.contains(activeElement));
+        this.closeDropdown();
+        // A disabled built-in trigger can't take focus back (falls to <body>, as natively); a slotted
+        // trigger without its own disabled property only gets aria-disabled and stays focusable, so
+        // focus would otherwise stay stranded on the closed panel's former content.
+        if (focusInside)
+            (_b = this.activeTriggerEl) === null || _b === void 0 ? void 0 : _b.focus();
+    }
+    /**
+     * Sets focus on the trigger button.
+     */
+    async setFocus() {
+        var _a;
+        (_a = this.activeTriggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /**
+     * Clears all selected values and resets the component. Works while disabled too, as setting a
+     * native control's value from script does.
+     */
+    async clear() {
+        const hadValues = this.value.length > 0 || this.searchQuery !== '';
+        const removed = this.ensureValueArray();
+        this.value = [];
+        this.searchQuery = '';
+        this.syncSelectedItems();
+        this.updateFormValue();
+        if (hadValues) {
+            this.emitChange({ removed });
+        }
+    }
+    /**
+     * Refetches the first page of options from `asyncUrl` for the current search, such as after an option is renamed
+     * or recolored elsewhere. Selected items in that page pick up the new text and dot color without emitting a change;
+     * other selected items keep the text and dot color they were last loaded with. Does nothing without `asyncUrl`.
+     */
+    async refreshOptions() {
+        await this.fetchOptions(this.searchQuery, 1);
+    }
+    /**
+     * Handle global keyboard events for accessibility.
+     * Closes dropdown on Escape key press regardless of focus location. Taken in document's capture
+     * phase, before a modal around the multiselect hears it on document and closes too.
+     */
+    handleWindowKeyDown(event) {
+        var _a;
+        if (!this.isOpen || event.defaultPrevented)
+            return;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.pdsMultiselectDismiss.emit();
+            this.closeDropdown();
+            (_a = this.activeTriggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }
+    get activeTriggerEl() {
+        var _a;
+        return (_a = this.slottedTriggerEl) !== null && _a !== void 0 ? _a : this.triggerEl;
+    }
+    syncSlottedTrigger() {
+        const trigger = Array.from(this.el.children).find(child => child.getAttribute('slot') === 'trigger');
+        if (trigger !== this.slottedTriggerEl) {
+            const previous = this.slottedTriggerEl;
+            if (previous) {
+                previous.removeEventListener('click', this.handleTriggerClick);
+                previous.removeEventListener('keydown', this.handleTriggerKeyDown);
+                previous.removeAttribute('aria-expanded');
+                previous.removeAttribute('aria-haspopup');
+                previous.removeAttribute('aria-disabled');
+                this.setSlottedTriggerDisabled(previous, false);
+            }
+            trigger === null || trigger === void 0 ? void 0 : trigger.addEventListener('click', this.handleTriggerClick);
+            trigger === null || trigger === void 0 ? void 0 : trigger.addEventListener('keydown', this.handleTriggerKeyDown);
+            this.slottedTriggerEl = trigger;
+        }
+        if (!trigger)
+            return;
+        trigger.setAttribute('aria-haspopup', 'listbox');
+        trigger.setAttribute('aria-expanded', String(this.isOpen));
+        if (this.disabled) {
+            trigger.setAttribute('aria-disabled', 'true');
+        }
+        else {
+            trigger.removeAttribute('aria-disabled');
+        }
+        this.setSlottedTriggerDisabled(trigger, this.disabled);
+    }
+    setSlottedTriggerDisabled(trigger, disabled) {
+        if (!('disabled' in trigger)) {
+            // A custom element gets its `disabled` property once it's defined, which can be after the multiselect loads.
+            if (disabled && trigger.localName.includes('-') && customElements.get(trigger.localName) === undefined) {
+                customElements.whenDefined(trigger.localName).then(() => this.syncSlottedTrigger());
+            }
+            return;
+        }
+        const control = trigger;
+        // Only re-enable a trigger the multiselect disabled, so one the consumer disabled stays disabled.
+        if (disabled && !control.disabled) {
+            control.disabled = true;
+            this.hasDisabledSlottedTrigger = true;
+        }
+        else if (!disabled && this.hasDisabledSlottedTrigger) {
+            control.disabled = false;
+            this.hasDisabledSlottedTrigger = false;
+        }
+    }
+    setupMutationObserver() {
+        this.observer = new MutationObserver(records => {
+            if (records.some(record => record.target === this.el)) {
+                this.syncSlottedTrigger();
+            }
+            // Changes inside the slotted trigger, like re-rendered chips, can't change the options.
+            const trigger = this.slottedTriggerEl;
+            if (!trigger || records.some(record => !trigger.contains(record.target))) {
+                this.updateOptionsFromSlot();
+            }
+        });
+        this.observer.observe(this.el, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    updateOptionsFromSlot() {
+        var _a;
+        const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot:not([name])');
+        if (!slot)
+            return;
+        const options = [];
+        slot.assignedElements({ flatten: true }).forEach(el => {
+            if (el.tagName === 'OPTGROUP') {
+                const optgroup = el;
+                const groupLabel = optgroup.label;
+                const groupDisabled = optgroup.disabled;
+                optgroup.querySelectorAll('option').forEach((opt) => {
+                    const option = this.parseSlottedOption(opt, groupDisabled);
+                    if (groupLabel) {
+                        option.group = groupLabel;
+                    }
+                    options.push(option);
+                });
+            }
+            else if (el.tagName === 'OPTION') {
+                options.push(this.parseSlottedOption(el, false));
+            }
+        });
+        // Only update if we actually found options AND we're not using async/external options
+        // Don't clear internalOptions if slot returns empty (might be mid-DOM-update)
+        if (options.length > 0 && !this.asyncUrl && !this.options) {
+            this.internalOptions = options;
+        }
+    }
+    parseSlottedOption(opt, groupDisabled) {
+        var _a;
+        const option = {
+            id: opt.value,
+            text: ((_a = opt.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || opt.value,
+            disabled: opt.disabled || groupDisabled || undefined,
+        };
+        const dotColor = opt.getAttribute('data-dot-color');
+        if (dotColor) {
+            option.dotColor = dotColor;
+        }
+        const actionIcon = opt.getAttribute('data-action-icon');
+        if (actionIcon) {
+            option.actionIcon = actionIcon;
+        }
+        const actionLabel = opt.getAttribute('data-action-label');
+        if (actionLabel) {
+            option.actionLabel = actionLabel;
+        }
+        return option;
+    }
+    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);
+    }
+    syncSelectedItems() {
+        // Ensure value is an array (may be string from HTML attribute)
+        const valueArray = this.ensureValueArray();
+        const allOptions = this.getAllOptions();
+        // Map values to options, preserving existing selectedItems for values not yet in options
+        const newSelectedItems = [];
+        const existingItemsMap = new Map(this.selectedItems.map(item => [String(item.id), item]));
+        valueArray.forEach(val => {
+            // First try to find in available options
+            const option = allOptions.find(opt => String(opt.id) === String(val));
+            if (option) {
+                newSelectedItems.push(option);
+            }
+            else if (existingItemsMap.has(String(val))) {
+                // If not in options but exists in current selectedItems, preserve it
+                // This handles the case where async data hasn't loaded yet or newly created items
+                newSelectedItems.push(existingItemsMap.get(String(val)));
+            }
+            // Note: We don't create placeholders for values without matching options.
+            // This ensures selectedItems remains empty until options are actually loaded,
+            // which matches the expected behavior for preselected values.
+        });
+        this.selectedItems = newSelectedItems;
+    }
+    ensureValueArray() {
+        // Handle JSON string values passed via HTML attribute
+        if (typeof this.value === 'string') {
+            try {
+                const parsed = JSON.parse(this.value);
+                if (Array.isArray(parsed)) {
+                    this.value = parsed;
+                    return parsed;
+                }
+            }
+            catch (_a) {
+                // Not valid JSON, treat as single value
+                const singleValue = this.value;
+                this.value = singleValue ? [singleValue] : [];
+                return this.value;
+            }
+        }
+        return Array.isArray(this.value) ? this.value : [];
+    }
+    getAllOptions() {
+        return this.options || this.internalOptions;
+    }
+    getFilteredOptions() {
+        const allOptions = this.getAllOptions();
+        const query = this.searchQuery.toLowerCase();
+        const filtered = allOptions.filter(opt => {
+            // Filter by search query only - don't filter out selected items
+            if (query) {
+                return opt.text.toLowerCase().includes(query);
+            }
+            return true;
+        });
+        // Add create option if enabled and no matches found
+        if (this.createUrl && this.searchQuery.trim() && filtered.length === 0) {
+            return [{
+                    id: '__create__',
+                    text: this.searchQuery.trim(),
+                    isCreateOption: true,
+                }];
+        }
+        return filtered;
+    }
+    updateFormValue() {
+        var _a;
+        if (form.isSpecTest())
+            return;
+        if ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) {
+            // Ensure value is an array before iterating
+            const valueArray = this.ensureValueArray();
+            // Submit as multiple values with same name (native select multiple behavior)
+            const formData = new FormData();
+            valueArray.forEach(val => {
+                if (this.name) {
+                    formData.append(this.name, val);
+                }
+            });
+            this.internals.setFormValue(formData);
+            // Update validity state for required validation
+            if (this.required && valueArray.length === 0) {
+                this.internals.setValidity({ valueMissing: true }, 'Please select at least one option.', this.activeTriggerEl);
+            }
+            else {
+                this.internals.setValidity({});
+            }
+        }
+    }
+    getCsrfToken() {
+        // Use provided token if available
+        if (this.csrfToken) {
+            return this.csrfToken;
+        }
+        // Try to read from meta tag
+        const metaTag = document.querySelector('meta[name="csrf-token"]');
+        return (metaTag === null || metaTag === void 0 ? void 0 : metaTag.content) || null;
+    }
+    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 csrfToken = this.getCsrfToken();
+            const headers = {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json',
+            };
+            if (csrfToken) {
+                const headerName = this.csrfHeaderName || 'X-CSRF-Token';
+                headers[headerName] = csrfToken;
+            }
+            const response = await fetch(url.toString(), Object.assign({ method: this.asyncMethod, signal: this.abortController.signal, headers }, (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;
+        }
+        catch (error) {
+            // Clear timeout on error
+            if (this.fetchTimeoutTimer !== undefined) {
+                window.clearTimeout(this.fetchTimeoutTimer);
+                this.fetchTimeoutTimer = undefined;
+            }
+            if (error.name !== 'AbortError') {
+                console.error('PdsMultiselect: Failed to fetch options', error);
+            }
+        }
+        finally {
+            this.loading = false;
+            // Check if value changed during loading and still has unresolved values
+            if (this.pendingUnresolvedFetch) {
+                this.pendingUnresolvedFetch = false;
+                const valueArray = this.ensureValueArray();
+                const hasUnresolvedValues = valueArray.length > 0 && this.selectedItems.length < valueArray.length;
+                if (hasUnresolvedValues) {
+                    this.fetchOptions('', 1);
+                }
+            }
+        }
+    }
+    async createOption(query) {
+        if (!this.createUrl || !query.trim())
+            return;
+        // Reentrancy guard: prevent duplicate POSTs if creation is already in-flight
+        if (this.creating)
+            return;
+        this.creating = true;
+        try {
+            const url = new URL(this.createUrl, window.location.origin);
+            const csrfToken = this.getCsrfToken();
+            const headers = {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json',
+            };
+            if (csrfToken) {
+                const headerName = this.csrfHeaderName || 'X-CSRF-Token';
+                headers[headerName] = csrfToken;
+            }
+            const response = await fetch(url.toString(), {
+                method: 'POST',
+                headers,
+                body: JSON.stringify({ text: query.trim() }),
+            });
+            if (!response.ok)
+                throw new Error('Failed to create option');
+            const data = await response.json();
+            const newOption = Object.assign({ id: data.id, text: data.text }, data);
+            // Add to internal options first
+            this.internalOptions = [...this.internalOptions, newOption];
+            // Select the new option
+            this.value = [...this.value, String(newOption.id)];
+            // Sync selected items to update display with new option
+            this.syncSelectedItems();
+            // Emit create event
+            this.pdsMultiselectCreate.emit({
+                query: query.trim(),
+                newOption,
+            });
+            // Emit change event with synced items
+            this.emitChange({ added: [String(newOption.id)] });
+            // Clear search and keep dropdown open
+            this.searchQuery = '';
+            this.highlightedIndex = -1;
+            // Focus back on search input
+            requestAnimationFrame(() => {
+                var _a;
+                (_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.focus();
+            });
+        }
+        catch (error) {
+            console.error('PdsMultiselect: Failed to create option', error);
+        }
+        finally {
+            this.creating = false;
+        }
+    }
+    tabPastOptions(e) {
+        const firstFooterTabbable = e.shiftKey ? undefined : this.getFooterTabbables()[0];
+        firstFooterTabbable === null || firstFooterTabbable === void 0 ? void 0 : firstFooterTabbable.focus();
+        if (firstFooterTabbable === null || firstFooterTabbable === void 0 ? void 0 : firstFooterTabbable.matches(':focus')) {
+            // Each option's checkbox is a tab stop, so jump past them to the footer.
+            e.preventDefault();
+        }
+        else {
+            this.closeDropdown();
+            // Tab would move on to an option's checkbox, which closing removes, dropping focus to the page.
+            // Land on the trigger instead, as Escape does; Shift+Tab already reaches it.
+            const trigger = e.shiftKey ? undefined : this.activeTriggerEl;
+            trigger === null || trigger === void 0 ? void 0 : trigger.focus();
+            if (trigger === null || trigger === void 0 ? void 0 : trigger.matches(':focus'))
+                e.preventDefault();
+        }
+    }
+    getSelectedItemTabbables() {
+        return Array.from(this.el.shadowRoot.querySelectorAll('.pds-multiselect__selected-item[tabindex="0"]'));
+    }
+    getFooterTabbables() {
+        const candidates = [];
+        Array.from(this.el.children)
+            .filter(child => child.getAttribute('slot') === 'footer')
+            .forEach(content => candidates.push(content, ...Array.from(content.querySelectorAll('*'))));
+        // Browsers without checkVisibility (Safari before 17.4) count every control as visible.
+        return candidates
+            .map(el => { var _a; return (el.matches(TABBABLE_SELECTOR) ? el : (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(TABBABLE_SELECTOR)); })
+            .filter((el) => { var _a, _b; return !!el && ((_b = (_a = el.checkVisibility) === null || _a === void 0 ? void 0 : _a.call(el)) !== null && _b !== void 0 ? _b : true); });
+    }
+    isCaretAtEndOfSearch() {
+        var _a, _b;
+        const input = this.searchInputEl;
+        if (!input)
+            return true;
+        const end = input.value.length;
+        return ((_a = input.selectionStart) !== null && _a !== void 0 ? _a : end) === end && ((_b = input.selectionEnd) !== null && _b !== void 0 ? _b : end) === end;
+    }
+    hasOptionAction(option) {
+        return (this.optionActions &&
+            typeof option.actionIcon === 'string' &&
+            PINE_ICON_NAME.test(option.actionIcon) &&
+            !option.isCreateOption &&
+            !option.disabled);
+    }
+    // Without hover, revealing the icon would take a tap that also toggles the option, so touch shows every icon.
+    get isHoverless() {
+        var _a, _b, _c;
+        (_a = this.hoverlessQuery) !== null && _a !== void 0 ? _a : (this.hoverlessQuery = (_b = window.matchMedia) === null || _b === void 0 ? void 0 : _b.call(window, '(hover: none)'));
+        return !!((_c = this.hoverlessQuery) === null || _c === void 0 ? void 0 : _c.matches);
+    }
+    runOptionAction(option) {
+        var _a;
+        this.isClosingViaSelection = true;
+        this.closeDropdown();
+        (_a = this.activeTriggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+        this.pdsMultiselectOptionAction.emit({ option });
+    }
+    openDropdown() {
+        if (this.disabled)
+            return;
+        this.isOpening = true;
+        this.isOpen = true;
+        this.highlightedIndex = -1;
+        // Trigger initial fetch if async (skip if already fetching from componentDidLoad)
+        if (this.asyncUrl && this.internalOptions.length === 0 && !this.initialAsyncFetchTriggered) {
+            this.debouncedFetchAsyncOptions(this.searchQuery, 1);
+        }
+        // Reset the flag so subsequent opens can fetch if needed
+        this.initialAsyncFetchTriggered = false;
+        requestAnimationFrame(() => {
+            var _a;
+            this.positionDropdown();
+            // Focus the search input after the panel is positioned
+            (_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.focus();
+            // Clear the opening flag after focus has moved
+            setTimeout(() => {
+                this.isOpening = false;
+            }, 50);
+        });
+    }
+    closeDropdown() {
+        this.isOpen = false;
+        this.highlightedIndex = -1;
+        this.searchQuery = '';
+        // Reset the selection-close guard after the focusout handler's setTimeout has resolved
+        if (this.isClosingViaSelection) {
+            setTimeout(() => {
+                this.isClosingViaSelection = false;
+            }, 0);
+        }
+        // Clean up auto-update
+        if (this.cleanupAutoUpdate) {
+            this.cleanupAutoUpdate();
+            this.cleanupAutoUpdate = undefined;
+        }
+    }
+    positionDropdown() {
+        if (!this.containerEl || !this.panelEl)
+            return;
+        // In inline pill mode, triggerEl is the small chevron button — use the full-width
+        // wrapper div as the Floating UI reference so the panel aligns with the whole trigger.
+        const referenceEl = this.slottedTriggerEl || this.pillInlineTriggerEl || this.triggerEl || this.containerEl;
+        const { minWidth, panelWidth } = this;
+        const updatePosition = () => {
+            floatingUi_dom.computePosition(referenceEl, this.panelEl, {
+                placement: 'bottom-start',
+                strategy: 'fixed',
+                middleware: [
+                    floatingUi_dom.offset(12),
+                    floatingUi_dom.flip(),
+                    floatingUi_dom.shift({ padding: 8 }),
+                    floatingUi_dom.size({
+                        apply: ({ rects, elements }) => {
+                            Object.assign(elements.floating.style, {
+                                width: panelWidth !== null && panelWidth !== void 0 ? panelWidth : `${rects.reference.width}px`,
+                                minWidth,
+                            });
+                        },
+                    }),
+                ],
+            }).then(({ x, y }) => {
+                if (this.panelEl) {
+                    this.panelEl.style.left = `${x}px`;
+                    this.panelEl.style.top = `${y}px`;
+                }
+            });
+        };
+        // Initial position
+        updatePosition();
+        // Set up auto-update for window resize and scroll
+        const cleanupAutoUpdate = floatingUi_dom.autoUpdate(referenceEl, this.panelEl, updatePosition);
+        this.cleanupAutoUpdate = () => {
+            cleanupAutoUpdate();
+            this.clearAsyncFetchState();
+        };
+    }
+    scrollOptionIntoView() {
+        requestAnimationFrame(() => {
+            var _a;
+            const highlighted = (_a = this.listboxEl) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-index="${this.highlightedIndex}"]`);
+            highlighted === null || highlighted === void 0 ? void 0 : highlighted.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+        });
+    }
+    emitChange({ added = [], removed = [] }) {
+        this.pdsMultiselectChange.emit({ values: this.value, items: this.selectedItems, added, removed });
+    }
+    toggleOption(option) {
+        var _a, _b;
+        if (option.disabled)
+            return;
+        // Handle create option
+        if (option.isCreateOption) {
+            // Prevent multiple create calls while one is in-flight
+            if (!this.creating) {
+                this.createOption(this.searchQuery);
+            }
+            return;
+        }
+        const optionId = String(option.id);
+        const isSelected = this.value.includes(optionId);
+        if (isSelected) {
+            // Remove from selection
+            this.value = this.value.filter(v => v !== optionId);
+        }
+        else {
+            // Add to selection
+            if (this.maxSelections && this.value.length >= this.maxSelections) {
+                return;
+            }
+            this.value = [...this.value, optionId];
+        }
+        // Sync selected items to ensure no duplicates and accurate state
+        this.syncSelectedItems();
+        // Emit change event with synced items
+        this.emitChange(isSelected ? { removed: [optionId] } : { added: [optionId] });
+        if (this.closePanelOnSelect) {
+            this.isClosingViaSelection = true;
+            this.closeDropdown();
+            (_a = this.activeTriggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            // Keep focus on search input, don't close dropdown
+            (_b = this.searchInputEl) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    }
+    selectOption(option) {
+        // For keyboard navigation - toggle the option
+        this.toggleOption(option);
+    }
+    getGroupedRenderItems(filteredOptions) {
+        const items = [];
+        let currentGroup = null;
+        filteredOptions.forEach((option, index) => {
+            const group = option.group;
+            if (group !== undefined) {
+                if (!currentGroup || currentGroup.group !== group) {
+                    currentGroup = { type: 'group', group, options: [] };
+                    items.push(currentGroup);
+                }
+                currentGroup.options.push({ option, index });
+            }
+            else {
+                currentGroup = null;
+                items.push({ type: 'option', option, index });
+            }
+        });
+        return items;
+    }
+    renderOption(option, index$1, valueArray) {
+        const isSelected = valueArray.includes(String(option.id));
+        const isCreateOption = option.isCreateOption;
+        const isDisabled = option.disabled;
+        const isHighlighted = index$1 === this.highlightedIndex && !isCreateOption;
+        const optionId = `${this.componentId}-option-${index$1}`;
+        const isCreateDisabled = isCreateOption && this.creating;
+        const hasAction = this.hasOptionAction(option);
+        return (index.h("li", { key: String(option.id), id: optionId, class: {
+                'pds-multiselect__option': true,
+                'pds-multiselect__option--highlighted': isHighlighted,
+                'pds-multiselect__option--selected': isSelected,
+                'pds-multiselect__option--create': isCreateOption,
+                'pds-multiselect__option--disabled': isDisabled || isCreateDisabled,
+            }, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? i18nFormat.formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "aria-describedby": hasAction ? `${optionId}-action-description` : undefined, "data-index": index$1, onMouseDown: this.handleOptionMouseDown(option), onClick: this.handleOptionClick, onMouseEnter: this.handleOptionMouseEnter(index$1, option) }, isCreateOption ? (index.h("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, index.h("pds-icon", { name: "add", size: "small", "aria-hidden": "true" }), index.h("pds-text", null, i18nFormat.formatMessage(this.createOptionLabel, { text: option.text })))) : (index.h("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index$1}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }, this.optionDisplay === 'chip' && (index.h("pds-chip", { slot: "label", sentiment: "subtle", dot: !!option.dotColor, "dot-color": option.dotColor, "max-width": "100%" }, option.text)))), hasAction && this.renderOptionAction(option, optionId, isHighlighted)));
+    }
+    renderOptionAction(option, optionId, isHighlighted) {
+        var _a;
+        const label = i18nFormat.formatMessage((_a = option.actionLabel) !== null && _a !== void 0 ? _a : this.optionActionLabel, { text: option.text });
+        return [
+            index.h("span", { class: "pds-multiselect__option-action", title: label, "aria-hidden": "true", onMouseDown: this.handleOptionActionMouseDown, onClick: this.handleOptionActionClick(option) }, (isHighlighted || this.isHoverless) && index.h("pds-icon", { name: option.actionIcon })),
+            index.h("span", { id: `${optionId}-action-description`, hidden: true }, i18nFormat.formatMessage(this.optionActionDescription, { action: label })),
+        ];
+    }
+    renderSelectedItemsList() {
+        if (this.hideSelectedItems || this.selectedItems.length === 0)
+            return null;
+        return (index.h("div", { class: "pds-multiselect__selected-section" }, index.h("ul", { class: "pds-multiselect__selected-list", role: "list", onKeyDown: this.handleSelectedListKeyDown }, this.selectedItems.map(item => (index.h("li", { key: String(item.id), class: "pds-multiselect__selected-item" }, item.text))))));
+    }
+    renderDropdown() {
+        if (!this.isOpen)
+            return null;
+        const filteredOptions = this.getFilteredOptions();
+        const valueArray = this.ensureValueArray();
+        const hasSlottedEmpty = !!this.el.querySelector('[slot="empty"]');
+        const hasSlottedLoading = !!this.el.querySelector('[slot="loading"]');
+        const hasSlottedFooter = !!this.el.querySelector('[slot="footer"]');
+        return (index.h("div", { class: "pds-multiselect__panel", ref: el => (this.panelEl = el), style: { minWidth: this.minWidth } }, index.h("div", { class: "pds-multiselect__search" }, index.h("pds-icon", { name: "search", size: "small", "aria-hidden": "true" }), index.h("input", { ref: el => (this.searchInputEl = el), type: "text", class: "pds-multiselect__search-input", placeholder: this.searchPlaceholder, value: this.searchQuery, "aria-label": this.searchOptionsLabel, "aria-controls": `${this.componentId}-listbox`, "aria-activedescendant": this.highlightedIndex >= 0 ? `${this.componentId}-option-${this.highlightedIndex}` : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": "true", "aria-autocomplete": "list", autocomplete: "off", onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchInputKeyDown })), this.renderSelectedItemsList(), index.h("ul", { class: "pds-multiselect__listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": this.label || this.optionsLabel, id: `${this.componentId}-listbox`, ref: el => (this.listboxEl = el), style: { maxHeight: this.maxHeight }, onScroll: this.handleScroll }, this.loading && (index.h("li", { class: "pds-multiselect__loading", role: "presentation" }, hasSlottedLoading ? (index.h("slot", { name: "loading" })) : (index.h("pds-loader", { size: "small" })))), !this.loading && filteredOptions.length === 0 && (index.h("li", { class: "pds-multiselect__empty", role: "presentation" }, hasSlottedEmpty ? (index.h("slot", { name: "empty" })) : (index.h("span", null, this.noOptionsFoundLabel)))), this.getGroupedRenderItems(filteredOptions).map((item, itemIndex) => {
+            if (item.type === 'group') {
+                return (index.h("li", { key: `group-${itemIndex}`, role: "group", "aria-label": item.group, class: "pds-multiselect__group" }, index.h("span", { class: "pds-multiselect__group-header", "aria-hidden": "true" }, item.group), index.h("ul", { class: "pds-multiselect__group-list", role: "presentation" }, item.options.map(({ option, index }) => this.renderOption(option, index, valueArray)))));
+            }
+            return this.renderOption(item.option, item.index, valueArray);
+        }), this.hasMore && !this.loading && (index.h("li", { class: "pds-multiselect__load-more", role: "presentation" }, index.h("pds-loader", { size: "small" })))), hasSlottedFooter && (index.h("div", { class: "pds-multiselect__footer", onMouseDown: this.handleFooterMouseDown, onKeyDown: this.handleFooterKeyDown }, index.h("slot", { name: "footer" })))));
+    }
+    renderInlinePills() {
+        const hasSelections = this.selectedItems.length > 0;
+        if (!hasSelections) {
+            return (index.h("span", { class: "pds-multiselect__trigger-text pds-multiselect__trigger-text--placeholder" }, this.placeholder || 'Select...'));
+        }
+        const variant = this.disabled ? 'text' : 'tag';
+        const visibleItems = this.selectedItems.slice(0, Math.max(1, this.maxInlinePills));
+        const overflowCount = this.selectedItems.length - visibleItems.length;
+        return (index.h("div", { class: "pds-multiselect__pill-list pds-multiselect__pill-list--inline", "aria-label": this.selectedItemsLabel }, visibleItems.map(item => (index.h("pds-chip", { key: String(item.id), "component-id": `${this.componentId}-pill-${item.id}`, variant: variant, size: "sm", sentiment: "neutral", "dismiss-label": this.pillRemoveLabel, onPdsTagCloseClick: this.handlePillRemove(item) }, item.text))), overflowCount > 0 && (index.h("span", { class: "pds-multiselect__pill-overflow" }, "+", overflowCount))));
+    }
+    renderBelowPills() {
+        if (this.selectedItems.length === 0)
+            return null;
+        const variant = this.disabled ? 'text' : 'tag';
+        return (index.h("div", { class: "pds-multiselect__pill-list pds-multiselect__pill-list--below", "aria-label": this.selectedItemsLabel }, this.selectedItems.map(item => (index.h("pds-chip", { key: String(item.id), "component-id": `${this.componentId}-pill-${item.id}`, variant: variant, size: "md", sentiment: "neutral", "dismiss-label": this.pillRemoveLabel, onPdsTagCloseClick: this.handlePillRemove(item) }, item.text)))));
+    }
+    getTriggerText() {
+        var _a;
+        const count = this.selectedItems.length;
+        if (count === 0 || (this.selectedDisplay === 'pill' && this.pillPosition === 'below')) {
+            // Fall back to a non-empty string: the trigger's accessible name comes from
+            // this text, so an empty/undefined placeholder must never leave it nameless
+            // (WCAG 4.1.2). The prop is localizable; this last-resort default is not.
+            return this.placeholder || 'Select...';
+        }
+        // One selection shows its name; the count only says something once there's more than one.
+        // An option without text still falls back to the count, so the trigger is never nameless.
+        if (count === 1 && ((_a = this.selectedItems[0].text) === null || _a === void 0 ? void 0 : _a.trim())) {
+            return this.selectedItems[0].text;
+        }
+        return i18nFormat.pluralize(this.el, count, this.resolveCountForms());
+    }
+    /**
+     * The text that sets the trigger's width. A single selection's name could be any length, so the
+     * trigger keeps the width the count would give it and the name truncates inside that, rather than
+     * widening a multiselect that has no width of its own.
+     */
+    getTriggerSizerText() {
+        const text = this.getTriggerText();
+        const count = this.selectedItems.length;
+        const showsName = count === 1 && text === this.selectedItems[0].text && !(this.selectedDisplay === 'pill' && this.pillPosition === 'below');
+        return showsName ? i18nFormat.pluralize(this.el, count, this.resolveCountForms()) : text;
+    }
+    /**
+     * The `one`/`other` props are the ergonomic English defaults; `selectedCountLabels`
+     * (object or JSON-string attribute) layers full CLDR forms on top for locales
+     * that need `few`/`many`/`two`/`zero`. Malformed JSON degrades to the defaults.
+     */
+    resolveCountForms() {
+        const base = {
+            one: this.selectedCountLabelOne,
+            other: this.selectedCountLabelOther,
+        };
+        const extra = this.selectedCountLabels;
+        if (!extra)
+            return base;
+        if (typeof extra === 'string') {
+            try {
+                const parsed = JSON.parse(extra);
+                return parsed && typeof parsed === 'object' ? Object.assign(Object.assign({}, base), parsed) : base;
+            }
+            catch (_a) {
+                return base; // not valid JSON → fall back to the English-shape defaults
+            }
+        }
+        return Object.assign(Object.assign({}, base), extra);
+    }
+    render() {
+        const hasSelections = this.selectedItems.length > 0;
+        return (index.h(index.Host, { key: '12298f9692ac8644230195cc1abe0e26bb5715a9', "aria-disabled": this.disabled ? 'true' : null }, index.h("div", { key: '5d98f9edae2f471d9662c65454fbef7b2dec83e1', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (index.h("label", { key: '2f6d4162d0649978bc53c34327b6149dc971fd4c', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
+                'pds-multiselect__label': true,
+                'visually-hidden': this.hideLabel,
+            } }, this.label)), index.h("div", { key: '7a337e876c8fff854e5b9a067ef89b9d5136df4f', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (index.h("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (index.h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
+                'pds-multiselect__trigger': true,
+                'pds-multiselect__trigger--open': this.isOpen,
+                'pds-multiselect__trigger--disabled': this.disabled,
+                'pds-multiselect__trigger--invalid': this.invalid || !!this.errorMessage,
+                'pds-multiselect__trigger--has-value': hasSelections,
+                'pds-multiselect__trigger--pill-inline': true,
+            }, onClick: this.handleTriggerClick }, this.renderInlinePills(), index.h("button", { ref: el => (this.triggerEl = el), type: "button", id: this.componentId, part: "pill-toggle", class: "pds-multiselect__pill-toggle", disabled: this.disabled, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-labelledby": this.label ? `${this.componentId}-label` : undefined, "aria-required": this.required ? 'true' : undefined, "aria-describedby": form.assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onKeyDown: this.handleTriggerKeyDown }, index.h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: index$1.enlarge })))) : (index.h("button", { ref: el => (this.triggerEl = el), type: "button", part: "trigger", class: {
+                'pds-multiselect__trigger': true,
+                'pds-multiselect__trigger--open': this.isOpen,
+                'pds-multiselect__trigger--disabled': this.disabled,
+                'pds-multiselect__trigger--invalid': this.invalid || !!this.errorMessage,
+                'pds-multiselect__trigger--has-value': hasSelections,
+            }, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": form.assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, index.h("span", { class: "pds-multiselect__trigger-label" }, index.h("span", { class: "pds-multiselect__trigger-sizer", "aria-hidden": "true" }, this.getTriggerSizerText()), index.h("span", { class: {
+                'pds-multiselect__trigger-text': true,
+                'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
+            } }, this.getTriggerText())), index.h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: index$1.enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), index.h("span", { key: 'd3cf5bb64a6c296c84af30628698559c0c904117', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (index.h("p", { key: 'a711280151ff360758143906a76fa2d25f4078a9', class: "pds-multiselect__helper", id: form.messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (index.h("p", { key: '17411d6bb55843f45f8d7ee410b627de846eed65', class: "pds-multiselect__error", id: form.messageId(this.componentId, 'error') }, index.h("pds-icon", { key: '446ffc0ed08b7856f0ef8c49bdf06b6011404a12', "aria-hidden": "true", icon: index$1.danger, size: "small" }), this.errorMessage)), index.h("div", { key: 'a83ed6c5d84cbf38f267f7e15bd871d09534c554', style: { display: 'none' } }, index.h("slot", { key: '294ce6a2bd4405854161aed5d8166fcc86e211e3' })))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "debounce": [{
+                "setupDebounce": 0
+            }],
+        "value": [{
+                "valueChanged": 0
+            }],
+        "options": [{
+                "optionsChanged": 0
+            }],
+        "internalOptions": [{
+                "internalOptionsChanged": 0
+            }],
+        "isOpen": [{
+                "isOpenChanged": 0
+            }],
+        "disabled": [{
+                "disabledChanged": 0
+            }]
+    }; }
+};
+PdsMultiselect.style = pdsMultiselectCss();
+
+exports.pds_multiselect = PdsMultiselect;