@pine-ds/core 3.22.0 → 3.23.0

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

@@ -1,12 +1,14 @@
 import { h, Host } from "@stencil/core";
 import { computePosition, flip, offset, shift, size, autoUpdate } from "@floating-ui/dom";
 import { debounceEvent } from "../../utils/utils";
-import { messageId, assignDescription } from "../../utils/form";
+import { isSpecTest, messageId, assignDescription } from "../../utils/form";
 import { danger, enlarge } from "@pine-ds/icons/icons";
 /**
  * @slot (default) - Static option elements for the multiselect
  * @slot empty - Custom empty state message when no options match
  * @slot loading - Custom loading indicator
+ * @part trigger - The trigger surface that opens the dropdown panel
+ * @part pill-toggle - The chevron button inside the inline pill trigger
  */
 export class PdsMultiselect {
     constructor() {
@@ -64,6 +66,26 @@ export class PdsMultiselect {
          * Hides the selected items summary section in the dropdown panel.
          */
         this.hideSelectedItems = false;
+        /**
+         * Display mode for selected items outside the dropdown panel.
+         * `'count'` shows "N item(s)" text in the trigger (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;
         /**
          * If true, the multiselect is required.
          */
@@ -85,6 +107,7 @@ export class PdsMultiselect {
         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)
@@ -93,9 +116,16 @@ export class PdsMultiselect {
         this.initialAsyncFetchTriggered = false;
         // Flag to track if value changed during loading and needs resolution after fetch completes
         this.pendingUnresolvedFetch = false;
-        this.handleTriggerClick = () => {
+        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.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();
             }
@@ -104,6 +134,10 @@ export class PdsMultiselect {
             }
         };
         this.handleTriggerKeyDown = (e) => {
+            // 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.triggerEl)
+                return;
             switch (e.key) {
                 case 'ArrowDown':
                 case 'ArrowUp':
@@ -128,18 +162,35 @@ export class PdsMultiselect {
             }
         };
         this.handleSearchInputKeyDown = (e) => {
+            var _a, _b, _c;
             const filteredOptions = this.getFilteredOptions();
             switch (e.key) {
-                case 'ArrowDown':
+                case 'ArrowDown': {
                     e.preventDefault();
-                    this.highlightedIndex = Math.min(this.highlightedIndex + 1, filteredOptions.length - 1);
-                    this.scrollOptionIntoView();
+                    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':
+                }
+                case 'ArrowUp': {
                     e.preventDefault();
-                    this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
-                    this.scrollOptionIntoView();
+                    // 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) {
@@ -179,7 +230,9 @@ export class PdsMultiselect {
             e.preventDefault(); // Prevent focus change
             this.toggleOption(option);
         };
-        this.handleOptionMouseEnter = (index) => () => {
+        this.handleOptionMouseEnter = (index, option) => () => {
+            if (option.disabled)
+                return;
             this.highlightedIndex = index;
         };
         this.handleScroll = (e) => {
@@ -196,6 +249,26 @@ export class PdsMultiselect {
                 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.pdsMultiselectChange.emit({ values: this.value, items: this.selectedItems });
+            // Clear first so screen readers re-announce even when the same item is removed twice
+            this.removalAnnouncement = '';
+            queueMicrotask(() => { this.removalAnnouncement = `${item.text} removed`; });
+            this.isClosingViaSelection = true;
+            if (this.isOpen) {
+                (_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            else {
+                (_b = this.triggerEl) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+            setTimeout(() => { this.isClosingViaSelection = false; }, 0);
+        };
     }
     connectedCallback() {
         // Initialize ElementInternals for form association (only once per element instance)
@@ -342,12 +415,35 @@ export class PdsMultiselect {
         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 })
-            .filter((el) => el.tagName === 'OPTION')
-            .map(opt => ({
-            id: opt.value,
-            text: opt.textContent || opt.value,
-        }));
+        const options = [];
+        slot.assignedElements({ flatten: true }).forEach(el => {
+            var _a;
+            if (el.tagName === 'OPTGROUP') {
+                const optgroup = el;
+                const groupLabel = optgroup.label;
+                const groupDisabled = optgroup.disabled;
+                optgroup.querySelectorAll('option').forEach((opt) => {
+                    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,
+                    };
+                    if (groupLabel) {
+                        option.group = groupLabel;
+                    }
+                    options.push(option);
+                });
+            }
+            else if (el.tagName === 'OPTION') {
+                const opt = el;
+                options.push({
+                    id: opt.value,
+                    text: ((_a = opt.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || opt.value,
+                    disabled: opt.disabled || undefined,
+                });
+            }
+        });
         // 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) {
@@ -448,6 +544,8 @@ export class PdsMultiselect {
     }
     updateFormValue() {
         var _a;
+        if (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();
@@ -676,7 +774,9 @@ export class PdsMultiselect {
     positionDropdown() {
         if (!this.containerEl || !this.panelEl)
             return;
-        const referenceEl = this.triggerEl || this.containerEl;
+        // 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.pillInlineTriggerEl || this.triggerEl || this.containerEl;
         const { minWidth, panelWidth } = this;
         const updatePosition = () => {
             computePosition(referenceEl, this.panelEl, {
@@ -720,6 +820,8 @@ export class PdsMultiselect {
     }
     toggleOption(option) {
         var _a, _b;
+        if (option.disabled)
+            return;
         // Handle create option
         if (option.isCreateOption) {
             // Prevent multiple create calls while one is in-flight
@@ -762,6 +864,40 @@ export class PdsMultiselect {
         // 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, valueArray) {
+        const isSelected = valueArray.includes(String(option.id));
+        const isCreateOption = option.isCreateOption;
+        const isDisabled = option.disabled;
+        const isHighlighted = index === this.highlightedIndex && !isCreateOption;
+        const optionId = `${this.componentId}-option-${index}`;
+        const isCreateDisabled = isCreateOption && this.creating;
+        return (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 ? `Create new tag: ${option.text}` : undefined, "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onMouseEnter: this.handleOptionMouseEnter(index, option) }, isCreateOption ? (h("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, h("pds-icon", { name: "add", size: "small" }), h("pds-text", null, "Add \"", option.text, "\""))) : (h("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }))));
+    }
     renderSelectedItemsList() {
         if (this.hideSelectedItems || this.selectedItems.length === 0)
             return null;
@@ -774,43 +910,58 @@ export class PdsMultiselect {
         const valueArray = this.ensureValueArray();
         const hasSlottedEmpty = !!this.el.querySelector('[slot="empty"]');
         const hasSlottedLoading = !!this.el.querySelector('[slot="loading"]');
-        return (h("div", { class: "pds-multiselect__panel", ref: el => (this.panelEl = el), style: { minWidth: this.minWidth } }, h("div", { class: "pds-multiselect__search" }, h("pds-icon", { name: "search", size: "small" }), h("input", { ref: el => (this.searchInputEl = el), type: "text", class: "pds-multiselect__search-input", placeholder: this.searchPlaceholder, value: this.searchQuery, "aria-label": "Search options", "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(), h("ul", { class: "pds-multiselect__listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": this.label || 'Options', id: `${this.componentId}-listbox`, ref: el => (this.listboxEl = el), style: { maxHeight: this.maxHeight }, onScroll: this.handleScroll }, this.loading && (h("li", { class: "pds-multiselect__loading", role: "presentation" }, hasSlottedLoading ? (h("slot", { name: "loading" })) : (h("pds-loader", { size: "small" })))), !this.loading && filteredOptions.length === 0 && (h("li", { class: "pds-multiselect__empty", role: "presentation" }, hasSlottedEmpty ? (h("slot", { name: "empty" })) : (h("span", null, "No options found")))), filteredOptions.map((option, index) => {
-            const isSelected = valueArray.includes(String(option.id));
-            const isCreateOption = option.isCreateOption;
-            const isHighlighted = index === this.highlightedIndex && !isCreateOption;
-            const optionId = `${this.componentId}-option-${index}`;
-            const isCreateDisabled = isCreateOption && this.creating;
-            return (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': isCreateDisabled,
-                }, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? `Create new tag: ${option.text}` : undefined, "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onMouseEnter: this.handleOptionMouseEnter(index) }, isCreateOption ? (h("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, h("pds-icon", { name: "add", size: "small" }), h("pds-text", null, "Add \"", option.text, "\""))) : (h("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, style: { pointerEvents: 'none' } }))));
+        return (h("div", { class: "pds-multiselect__panel", ref: el => (this.panelEl = el), style: { minWidth: this.minWidth } }, h("div", { class: "pds-multiselect__search" }, h("pds-icon", { name: "search", size: "small" }), h("input", { ref: el => (this.searchInputEl = el), type: "text", class: "pds-multiselect__search-input", placeholder: this.searchPlaceholder, value: this.searchQuery, "aria-label": "Search options", "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(), h("ul", { class: "pds-multiselect__listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": this.label || 'Options', id: `${this.componentId}-listbox`, ref: el => (this.listboxEl = el), style: { maxHeight: this.maxHeight }, onScroll: this.handleScroll }, this.loading && (h("li", { class: "pds-multiselect__loading", role: "presentation" }, hasSlottedLoading ? (h("slot", { name: "loading" })) : (h("pds-loader", { size: "small" })))), !this.loading && filteredOptions.length === 0 && (h("li", { class: "pds-multiselect__empty", role: "presentation" }, hasSlottedEmpty ? (h("slot", { name: "empty" })) : (h("span", null, "No options found")))), this.getGroupedRenderItems(filteredOptions).map((item, itemIndex) => {
+            if (item.type === 'group') {
+                return (h("li", { key: `group-${itemIndex}`, role: "group", "aria-label": item.group, class: "pds-multiselect__group" }, h("span", { class: "pds-multiselect__group-header", "aria-hidden": "true" }, item.group), 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 && (h("li", { class: "pds-multiselect__load-more", role: "presentation" }, h("pds-loader", { size: "small" }))))));
     }
+    renderInlinePills() {
+        const hasSelections = this.selectedItems.length > 0;
+        if (!hasSelections) {
+            return (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 (h("div", { class: "pds-multiselect__pill-list pds-multiselect__pill-list--inline", "aria-label": "Selected items" }, visibleItems.map(item => (h("pds-chip", { key: String(item.id), "component-id": `${this.componentId}-pill-${item.id}`, variant: variant, size: "sm", sentiment: "neutral", onPdsTagCloseClick: this.handlePillRemove(item) }, item.text))), overflowCount > 0 && (h("span", { class: "pds-multiselect__pill-overflow" }, "+", overflowCount))));
+    }
+    renderBelowPills() {
+        if (this.selectedItems.length === 0)
+            return null;
+        const variant = this.disabled ? 'text' : 'tag';
+        return (h("div", { class: "pds-multiselect__pill-list pds-multiselect__pill-list--below", "aria-label": "Selected items" }, this.selectedItems.map(item => (h("pds-chip", { key: String(item.id), "component-id": `${this.componentId}-pill-${item.id}`, variant: variant, size: "md", sentiment: "neutral", onPdsTagCloseClick: this.handlePillRemove(item) }, item.text)))));
+    }
     getTriggerText() {
         const count = this.selectedItems.length;
-        if (count === 0) {
+        if (count === 0 || (this.selectedDisplay === 'pill' && this.pillPosition === 'below')) {
             return this.placeholder || 'Select...';
         }
         return `${count} item${count === 1 ? '' : 's'}`;
     }
     render() {
         const hasSelections = this.selectedItems.length > 0;
-        return (h(Host, { key: '824364c4ab70a90abc5542ac66eb8259e727e4e6', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'ff103de53850eef00dad44e97333c58a54c8ae59', class: "pds-multiselect" }, this.label && (h("label", { key: '0524860c38d53aeddf35e9905abe783cb1174d6b', htmlFor: this.componentId, class: {
+        return (h(Host, { key: '50f06d8e7a23c17ff0169048d220aa78e4e60d91', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'f85448744cf889fd999579fe2849fd7902254e3d', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: '54143c890e3fea07626705fab5b87d0da2abf485', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
                 'pds-multiselect__label': true,
                 'visually-hidden': this.hideLabel,
-            } }, this.label)), h("div", { key: 'b6313b12f499656e98c33af524240fd51a332e68', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), onFocusout: this.handleContainerFocusOut, style: { width: this.triggerWidth } }, h("button", { key: '0b7ecdbc2e16d27afe4863d626c38d437bc39044', ref: el => (this.triggerEl = el), type: "button", part: "trigger", class: {
+            } }, this.label)), h("div", { key: 'ad35b02bcf540a5fd197d8012cb060d10682b0a2', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (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(), 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": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onKeyDown: this.handleTriggerKeyDown }, h("pds-icon", { class: "pds-multiselect__icon", icon: enlarge })))) : (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": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, h("span", { key: '0f38b462baa7ff229b05f3cacd1435d0890517cf', class: {
+            }, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, h("span", { class: {
                 'pds-multiselect__trigger-text': true,
-                'pds-multiselect__trigger-text--placeholder': !hasSelections,
-            } }, this.getTriggerText()), h("pds-icon", { key: '63b558f6c42b177cb956afd613002adc3a85347b', class: "pds-multiselect__icon", icon: enlarge })), this.renderDropdown()), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: '32732cfc57edacc77407b16ee4eb466817ca0a0d', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: '1e5cb7e19a3dd7717acfdf9feb1aadc8e12255de', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '31d6871e2960c9dc2946a847c9f961a57f568383', icon: danger, size: "small" }), this.errorMessage)), h("div", { key: '31e91ed1303e67e3b587362310f1acdc47df59db', style: { display: 'none' } }, h("slot", { key: 'ccc33628411dad18051c7f3c3747177ee3f4a922' })))));
+                'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
+            } }, this.getTriggerText()), h("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), h("span", { key: '547ab819abb5193040ddf71d725bf97fc3cb80b6', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: '063fadcda29637c338ed8ab49ef95c57750ff7ba', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: '6aabb3cd4b8334f87a4eecc38ba43ff4980fb8af', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '6fa6e1eeb8625a90e149a46a1d49742979b37881', icon: danger, size: "small" }), this.errorMessage)), h("div", { key: '0a84dfe166c5cc0f93840825e238d3f7baf932e4', style: { display: 'none' } }, h("slot", { key: 'a4e97c2063b358aca5db8dd6ccb8a8d860c26a4a' })))));
     }
     static get is() { return "pds-multiselect"; }
     static get encapsulation() { return "shadow"; }
@@ -1202,6 +1353,75 @@ export class PdsMultiselect {
                 "attribute": "hide-selected-items",
                 "defaultValue": "false"
             },
+            "selectedDisplay": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'count' | 'pill'",
+                    "resolved": "\"count\" | \"pill\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'count'"
+                        }],
+                    "text": "Display mode for selected items outside the dropdown panel.\n`'count'` shows \"N item(s)\" text in the trigger (default). `'pill'` renders\nselected items as dismissible pds-chip tags."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected-display",
+                "defaultValue": "'count'"
+            },
+            "pillPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'inline' | 'below'",
+                    "resolved": "\"below\" | \"inline\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "'inline'"
+                        }],
+                    "text": "Position of pill chips when `selectedDisplay` is `'pill'`.\n`'inline'` places chips inside the trigger; `'below'` places chips in a\nflex-wrap row directly below the trigger."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pill-position",
+                "defaultValue": "'inline'"
+            },
+            "maxInlinePills": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "3"
+                        }],
+                    "text": "Maximum chips shown inline before collapsing to a \"+N more\" badge.\nOnly applies when `selectedDisplay='pill'` and `pillPosition='inline'`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-inline-pills",
+                "defaultValue": "3"
+            },
             "errorMessage": {
                 "type": "string",
                 "mutable": false,
@@ -1317,7 +1537,7 @@ export class PdsMultiselect {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Options provided externally (for consumer-managed async)."
+                    "text": "Options provided externally (for consumer-managed async).\nWhen using `group` on options, keep each group block contiguous in the array.\nThe same `group` label appearing again after other items produces a separate header (same as native `<optgroup>`)."
                 },
                 "getter": false,
                 "setter": false
@@ -1414,7 +1634,8 @@ export class PdsMultiselect {
             "selectedItems": {},
             "currentPage": {},
             "hasMore": {},
-            "creating": {}
+            "creating": {},
+            "removalAnnouncement": {}
         };
     }
     static get events() {