@pine-ds/core 3.22.1 → 3.24.0

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

@@ -233,14 +233,14 @@ export class PdsModal {
         return thisZIndex === maxZIndex;
     }
     render() {
-        return (h("dialog", { key: '22ca55ddcc3aaf6e1158940d1fec23c9622b7810', class: {
+        return (h("dialog", { key: 'cf2710a889d8f0e80a3551088ab38a88dc44ad1e', class: {
                 'pds-modal__backdrop': true,
                 'open': this.open
-            }, "aria-modal": "true", "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: '803acd0d7a80886efd58c9eeb1af94b40c049de8', class: {
+            }, "aria-modal": "true", "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: 'a06d017153e67ad38bc1ced56ba22aeade977aaf', class: {
                 'pds-modal': true,
                 [`pds-modal--${this.size}`]: true,
                 'pds-modal--scrollable': this.scrollable
-            }, part: "modal" }, h("slot", { key: '227deb370e056365f188724bdb2fbabe6062ab77' }))));
+            }, part: "modal" }, h("slot", { key: 'd995c586809a4940c091912244a86cb4605a961c' }))));
     }
     static get is() { return "pds-modal"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-modal/test/mock-pds-modal.js

@@ -77,7 +77,7 @@ export class MockPdsModal {
             'pds-modal__backdrop': true,
             'open': this.open,
         };
-        return (h("div", { key: '932c22f17088b6cd5efa34563533b10192ba01c5', class: backdropClasses }, h("div", { key: '09c13a485986d40fa0240530feffde18b5192ff3', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, h("div", { key: '69c2feba501225873ffcf7aab3a1b40a981cec89', class: "pds-modal__header" }, h("slot", { key: 'c38802b6007b85b45532743ee4a94bcc9d5da08f', name: "header" })), h("div", { key: '6998e3da4906070de62a1016c2e23836c84ad96a', class: "pds-modal-content" }, h("slot", { key: '98ed7a23ca4c84de297aa71a7b15c6fa9a2666bf' })), h("div", { key: '7d0ed4f725857a77d916004967d88d5e9c66a5de', class: "pds-modal__footer" }, h("slot", { key: '437b8ab71722e6bad1caee076020c5bb216a2aad', name: "footer" })))));
+        return (h("div", { key: '6e7f71b339764894e1f17d253fc3c8e0243e4f90', class: backdropClasses }, h("div", { key: '25b2f82c1af743156d152880631d4294dfec68b5', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, h("div", { key: '6bc97e805daee5e5dd547fa0b919a05cf1b6a6a1', class: "pds-modal__header" }, h("slot", { key: 'd9e7c248d983e3c055ed7e0aea5a4d5a15dfea12', name: "header" })), h("div", { key: '5608ee069b59cb34dc812bde22f83c6bce7e6904', class: "pds-modal-content" }, h("slot", { key: '6e3e790330598e1bde733350e5e216d269426e51' })), h("div", { key: '381f3c4e1c9c83b0687e1f1484b64334e388d669', class: "pds-modal__footer" }, h("slot", { key: '6e3a3cb64623de59a409072ab9c1bf65af8c2f6c', name: "footer" })))));
     }
     static get is() { return "mock-pds-modal"; }
     static get originalStyleUrls() {

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

@@ -1 +1 @@
-{"version":3,"file":"multiselect-interface.js","sourceRoot":"","sources":["../../../../src/components/pds-multiselect/multiselect-interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface MultiselectOption {\n  id: string | number;\n  text: string;\n  isCreateOption?: boolean;\n  [key: string]: unknown;\n}\n\nexport interface MultiselectChangeEventDetail {\n  values: string[];\n  items: MultiselectOption[];\n}\n\nexport interface MultiselectSearchEventDetail {\n  query: string;\n}\n\nexport interface MultiselectLoadOptionsEventDetail {\n  query: string;\n  page: number;\n}\n\nexport interface MultiselectCreateEventDetail {\n  query: string;\n  newOption: MultiselectOption;\n}\n\nexport interface AsyncResponse {\n  results: Array<{ id: string | number; text: string; [key: string]: unknown }>;\n  totalCount?: number;\n}\n\nexport interface CreateResponse {\n  id: string | number;\n  text: string;\n  [key: string]: unknown;\n}\n"]}
+{"version":3,"file":"multiselect-interface.js","sourceRoot":"","sources":["../../../../src/components/pds-multiselect/multiselect-interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface MultiselectOption {\n  id: string | number;\n  text: string;\n  /** When `true`, the option is rendered as non-interactive and cannot be selected. */\n  disabled?: boolean;\n  /**\n   * Optional section label for grouped rendering (with `options` prop or parsed slots).\n   * Options that share a `group` value must be contiguous in the array; non-contiguous\n   * rows with the same label produce separate headers (mirrors native `<optgroup>`).\n   */\n  group?: string;\n  isCreateOption?: boolean;\n  [key: string]: unknown;\n}\n\nexport interface MultiselectChangeEventDetail {\n  values: string[];\n  items: MultiselectOption[];\n}\n\nexport interface MultiselectSearchEventDetail {\n  query: string;\n}\n\nexport interface MultiselectLoadOptionsEventDetail {\n  query: string;\n  page: number;\n}\n\nexport interface MultiselectCreateEventDetail {\n  query: string;\n  newOption: MultiselectOption;\n}\n\nexport interface AsyncResponse {\n  results: Array<{ id: string | number; text: string; [key: string]: unknown }>;\n  totalCount?: number;\n}\n\nexport interface CreateResponse {\n  id: string | number;\n  text: string;\n  [key: string]: unknown;\n}\n"]}

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

@@ -90,6 +90,65 @@
   flex-shrink: var(--pine-dimension-none);
 }
 
+.pds-multiselect__pill-list {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--pine-dimension-2xs);
+}
+
+.pds-multiselect__pill-list--inline {
+  flex: 1;
+  min-width: 0;
+}
+
+.pds-multiselect__pill-list--below {
+  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 {
+  align-items: center;
+  box-sizing: border-box;
+  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 {
+  align-items: center;
+  appearance: none;
+  background: none;
+  border-width: 0;
+  cursor: pointer;
+  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-container);
   border-radius: var(--pine-dimension-125);
@@ -160,6 +219,25 @@
   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-xs) var(--pine-dimension-2xs);
+  text-transform: uppercase;
+}
+
+.pds-multiselect__listbox > li:first-child > .pds-multiselect__group-header {
+  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 {
   align-items: center;
   background: transparent;
@@ -173,9 +251,13 @@
   pointer-events: none;
   width: 100%;
 }
-.pds-multiselect__option:hover, .pds-multiselect__option.pds-multiselect__option--highlighted {
+.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);
 }

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: '086b6d2d199b35110e64ba1da3c12f1a81360581', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'c2faf217a97de056a9111a78e7077025e4ab5ee1', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: '0aff86a3a0054aef256bac5c0204dd914a9bd3ae', 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: '3b92119871dc32bb3c9a559be816bdece2fc30a6', 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: '07d6a6bf9ccc2fe8bfcf9502a1cd4b7abf5c5e6f', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: 'a94bb6f31805d31ec3cd5b5f2ca8b1984f4d41d1', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: '15afc6b9313e1fe22bd56b00eee1ebcf9e085c2e', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '452814577b14ca8f891b101903bd1a7a7e5d8bb1', icon: danger, size: "small" }), this.errorMessage)), h("div", { key: 'd8ce787886e666303759cd2654c78b44269a40ff', style: { display: 'none' } }, h("slot", { key: '8295376fb03b23d44c5baeca9bc967514e433e0f' })))));
     }
     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() {