@pine-ds/core 4.7.2 → 4.8.0

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.js

@@ -1,6 +1,6 @@
 import { h, Host } from "@stencil/core";
 /**
- * @part button
+ * @part button - Exposes the item's inner element for styling. Appears on button and informational items, not on links.
  */
 export class PdsDropdownMenuItem {
     constructor() {
@@ -14,9 +14,17 @@ export class PdsDropdownMenuItem {
          * @defaultValue false
          */
         this.disabled = false;
+        /**
+         * It determines whether or not the dropdown-item is informational: text that the arrow keys
+         * reach but that can't be activated. Takes precedence over `href` and `destructive`.
+         * Screen readers announce it as dimmed or unavailable, the same way as a disabled item.
+         * @defaultValue false
+         */
+        this.informational = false;
         /**
          * Determines whether the link should open in a new tab and display an external icon.
          * This is a simpler alternative to using `target="_blank"` for the common case.
+         * Ignored when `informational` is set.
          * @defaultValue false
          */
         this.external = false;
@@ -27,6 +35,12 @@ export class PdsDropdownMenuItem {
         this.handleBlur = () => {
             this.hasFocus = false;
         };
+        // Space would otherwise scroll the page, since nothing in the item takes the key.
+        this.handleInformationalKeyDown = (event) => {
+            if (event.key === ' ') {
+                event.preventDefault();
+            }
+        };
         this.handleKeyDown = (event) => {
             // Handle keyboard events
             if (!this.disabled && (event.key === 'Enter')) {
@@ -48,6 +62,8 @@ export class PdsDropdownMenuItem {
     ;
     handleClick() {
         var _a;
+        if (this.informational)
+            return;
         // Filter only pds-dropdown-menu-item elements and find the index of the current item
         const menuItems = Array.from(this.host.parentNode.children).filter((child) => child.tagName.toLowerCase() === 'pds-dropdown-menu-item');
         const itemIndex = menuItems.indexOf(this.host);
@@ -60,6 +76,12 @@ export class PdsDropdownMenuItem {
         });
     }
     renderElement() {
+        if (this.informational) {
+            return (h("div", { class: {
+                    'pds-dropdown-menu-item__content': true,
+                    'has-focus': this.hasFocus
+                }, role: "menuitem", "aria-disabled": "true", part: "button", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleInformationalKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }, h("slot", null)));
+        }
         if (this.href != null) {
             return (h("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, target: this.target, class: {
                     'pds-dropdown-menu-item__content': true,
@@ -72,7 +94,14 @@ export class PdsDropdownMenuItem {
             }, tabIndex: this.disabled ? -1 : 0, type: "button", part: "button", onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null }, h("slot", null)));
     }
     render() {
-        return (h(Host, { key: '2d499a06768bdc4b9a34774d16c1f1e10804b3d5', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
+        return (h(Host, { key: '47a62550fde33f892d7af4f4e71b67ebf7aa2c3f', id: this.componentId, class: {
+                'is-disabled': this.disabled,
+                'is-informational': this.informational,
+                'destructive': !this.disabled && !this.informational && this.destructive
+            }, onClick: () => !this.disabled && this.handleClick(), role: "none",
+            // ARIA ignores role="none" on focusable elements, so a focusable host would sit between
+            // the menu and the informational menuitem as an unexpected child.
+            tabIndex: this.informational ? null : -1, "aria-disabled": this.disabled && !this.informational ? 'true' : null }, this.renderElement()));
     }
     static get is() { return "pds-dropdown-menu-item"; }
     static get encapsulation() { return "shadow"; }
@@ -165,7 +194,7 @@ export class PdsDropdownMenuItem {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Prompts the user to save the linked URL instead of navigating to it.\nIt can be used without a value to download with the default filename,\nor with a string value to suggest a specific filename for the download.\nOnly applies when href is set."
+                    "text": "Prompts the user to save the linked URL instead of navigating to it.\nIt can be used without a value to download with the default filename,\nor with a string value to suggest a specific filename for the download.\nOnly applies when href is set. Ignored when `informational` is set."
                 },
                 "getter": false,
                 "setter": false,
@@ -184,13 +213,36 @@ export class PdsDropdownMenuItem {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If provided, renders the dropdown-item as an anchor (`<a>`) element instead of a button."
+                    "text": "If provided, renders the dropdown-item as an anchor (`<a>`) element instead of a button.\nIgnored when `informational` is set."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "href"
             },
+            "informational": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "It determines whether or not the dropdown-item is informational: text that the arrow keys\nreach but that can't be activated. Takes precedence over `href` and `destructive`.\nScreen readers announce it as dimmed or unavailable, the same way as a disabled item."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "informational",
+                "defaultValue": "false"
+            },
             "external": {
                 "type": "boolean",
                 "mutable": false,
@@ -206,7 +258,7 @@ export class PdsDropdownMenuItem {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Determines whether the link should open in a new tab and display an external icon.\nThis is a simpler alternative to using `target=\"_blank\"` for the common case."
+                    "text": "Determines whether the link should open in a new tab and display an external icon.\nThis is a simpler alternative to using `target=\"_blank\"` for the common case.\nIgnored when `informational` is set."
                 },
                 "getter": false,
                 "setter": false,
@@ -229,7 +281,7 @@ export class PdsDropdownMenuItem {
                             "name": "defaultValue",
                             "text": "undefined"
                         }],
-                    "text": "Specifies where to open the linked document when href is provided.\nTakes precedence over the `external` prop if both are set.\nOnly applies when href is set."
+                    "text": "Specifies where to open the linked document when href is provided.\nTakes precedence over the `external` prop if both are set.\nOnly applies when href is set. Ignored when `informational` is set."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu.js

@@ -201,11 +201,11 @@ export class PdsDropdownMenu {
             if (tagName === 'pds-dropdown-menu-item') {
                 // For pds-dropdown-menu-item, focus the inner element
                 const menuItem = item;
-                const innerButton = (_a = menuItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
+                const innerControl = (_a = menuItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button, [role="menuitem"]');
                 const innerLink = ((_d = (_c = (_b = menuItem.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('pds-link')) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('a'))
                     || ((_e = menuItem.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('a'));
-                if (innerButton) {
-                    innerButton.focus();
+                if (innerControl) {
+                    innerControl.focus();
                 }
                 else if (innerLink) {
                     innerLink.focus();
@@ -357,7 +357,7 @@ export class PdsDropdownMenu {
         }
     }
     render() {
-        return (h(Host, { key: '18dac4d59ea236fe171f4c16f6571cb1547059c6', id: this.componentId }, h("slot", { key: '95201a75a33ccb70dbd51a5cf9d78c76ebf26f65', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: '7fc588f40f607ad81ad70bf74a525d078d32a80b', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, h("div", { key: '73d13d94edccb68db7b703f930b50f729334efa8', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, h("slot", { key: '7066f3a6f71c8961326f38f0509f1c0cc17098ae', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: '9f07ec488b688c58c6422b575015ccd364075fe8', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, h("slot", { key: 'd0aad3f9ac3b58779669411523adbb8878dec61c', onSlotchange: this.handleSlotChange })))));
+        return (h(Host, { key: '1765909c8c3c140e52dc3f6b50693c97d6bcc003', id: this.componentId }, h("slot", { key: '0b566cd288428a0694a2d61d4a73bd79def4bfad', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: '16cdfc208cfe7f6e074289c30aa0e1188a34876d', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, h("div", { key: 'a28c1736ad02e8ac3d82c0fe1933606a7216989b', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, h("slot", { key: '9c6dfddefb266083f68aa27d6cc01127a69cd1cf', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: '8cfe85c10f92d4a4ec6b5d2d0264d054a74ba29b', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, h("slot", { key: '1a5b4aa406d2706ca8cef49deb05140a5763be1c', onSlotchange: this.handleSlotChange })))));
     }
     static get is() { return "pds-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-dropdown-menu/stories/pds-dropdown-menu.stories.js

@@ -36,3 +36,42 @@ Default.args = {
   componentId: 'base-dropdown',
   placement: 'bottom-start',
 }
+
+const InformationalTemplate = (args) => html`
+<div style="height: 200px">
+  <pds-dropdown-menu
+    component-id=${args.componentId}
+    placement=${args.placement}
+  >
+    <pds-button slot="trigger" variant="secondary">Used on</pds-button>
+    <pds-dropdown-menu-item href="#products">3 products</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item informational>2 forms</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item href="#emails">5 emails</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item informational href="#pages">1 page</pds-dropdown-menu-item>
+  </pds-dropdown-menu>
+</div>`;
+
+export const Informational = InformationalTemplate.bind();
+Informational.args = {
+  componentId: 'informational-dropdown',
+  placement: 'bottom-start',
+}
+
+const InformationalOnlyTemplate = (args) => html`
+<div style="height: 200px">
+  <pds-dropdown-menu
+    component-id=${args.componentId}
+    placement=${args.placement}
+  >
+    <pds-button slot="trigger" variant="secondary">Used on</pds-button>
+    <pds-dropdown-menu-item informational>3 products</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item informational>2 forms</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item informational>5 emails</pds-dropdown-menu-item>
+  </pds-dropdown-menu>
+</div>`;
+
+export const InformationalOnly = InformationalOnlyTemplate.bind();
+InformationalOnly.args = {
+  componentId: 'informational-only-dropdown',
+  placement: 'bottom-start',
+}

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

@@ -15,6 +15,21 @@ export class PdsModalContent {
          * Tracks whether the border prop was explicitly set by the user
          */
         this.userSetBorder = false;
+        this.hasLoaded = false;
+        /**
+         * Handle scroll events
+         */
+        this.handleScroll = () => {
+            this.updateBorders();
+        };
+        /**
+         * Handle resize events
+         */
+        this.handleResize = () => {
+            this.calculateMaxHeight();
+            // Update borders after resize as content scrollability might change
+            setTimeout(() => this.updateBorders(), 50);
+        };
     }
     // Unwraps a nested .pds-modal-content left by a page-cache (Turbo, bfcache) reconnect.
     componentDidRender() {
@@ -28,43 +43,30 @@ export class PdsModalContent {
         this.userSetBorder = hasBorderAttribute || this.border !== 'none';
     }
     componentDidLoad() {
+        this.hasLoaded = true;
         this.calculateMaxHeight();
-        // Set up resize listener
-        window.addEventListener('resize', this.handleResize.bind(this));
-        // Only set up scroll listener for border updates if borders are managed automatically
         if (!this.userSetBorder) {
-            setTimeout(() => {
-                // The scroll happens on the component element itself (this.el), not the inner div
-                this.el.addEventListener('scroll', this.handleScroll.bind(this));
-                // Initial border update after everything is set up
-                setTimeout(() => this.updateBorders(), 100);
-            }, 100);
+            // Initial border update after everything is set up
+            setTimeout(() => this.updateBorders(), 200);
         }
     }
+    // Here rather than in componentDidLoad, which runs once: content taken out of the page and put
+    // back (a DOM morph or a framework moving it) gets its listeners and header/footer observer back.
+    connectedCallback() {
+        window.addEventListener('resize', this.handleResize);
+        // The scroll happens on the component element itself (this.el), not the inner div
+        this.el.addEventListener('scroll', this.handleScroll);
+        if (this.hasLoaded)
+            this.calculateMaxHeight();
+    }
     disconnectedCallback() {
-        window.removeEventListener('resize', this.handleResize.bind(this));
-        // Clean up scroll listener only if it was set up
-        if (!this.userSetBorder) {
-            this.el.removeEventListener('scroll', this.handleScroll.bind(this));
-        }
+        window.removeEventListener('resize', this.handleResize);
+        this.el.removeEventListener('scroll', this.handleScroll);
         if (this.mutationObserver) {
             this.mutationObserver.disconnect();
+            this.mutationObserver = undefined;
         }
     }
-    /**
-     * Handle scroll events
-     */
-    handleScroll() {
-        this.updateBorders();
-    }
-    /**
-     * Handle resize events
-     */
-    handleResize() {
-        this.calculateMaxHeight();
-        // Update borders after resize as content scrollability might change
-        setTimeout(() => this.updateBorders(), 50);
-    }
     /**
      * Updates border visibility based on scroll state (only if not user-defined)
      */
@@ -181,10 +183,10 @@ export class PdsModalContent {
     render() {
         // Only apply max-height style if it's not 'none'
         const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
-        return (h(Host, { key: 'd41d5632eb6a2dafe921546af60f835d3545cc4f' }, h("div", { key: '741ac9f28149039ecf5051142a939ab62ef26a87', class: {
+        return (h(Host, { key: 'c83e230d23444e3d5358d995170e2b8386884fe8' }, h("div", { key: 'b91de2c71e693b5a1ba2b257d741e7b0418c2d76', class: {
                 'pds-modal-content': true,
                 [`pds-modal-content--border-${this.border}`]: true
-            }, style: styleObj, tabindex: "-1" }, h("slot", { key: '090a52e9425d4df61c2d8216cc19f0925babdffe' }))));
+            }, style: styleObj, tabindex: "-1" }, h("slot", { key: '971cbd44ffeac4bb13a651948a119c603bed9e4f' }))));
     }
     static get is() { return "pds-modal-content"; }
     static get originalStyleUrls() {

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

@@ -101,7 +101,7 @@ function containsComposed(ancestor, node) {
  */
 const openModals = new Map();
 let openSequence = 0;
-/** Whether an open auto popover's panel sits in `root`, including inside shadow roots under it. */
+/** Whether the panel of an open popover that takes Escape sits in `root`, including inside shadow roots under it. */
 function hasOpenPopover(root) {
     if (root.querySelector('[data-pds-popover-open]'))
         return true;
@@ -645,14 +645,14 @@ export class PdsModal {
     }
     render() {
         const [sizeClass = 'md', customSize] = this.resolveSize();
-        return (h("dialog", { key: '0b187f36910a859afe57b891f1ebffd1d2d49ab7', class: {
+        return (h("dialog", { key: '0a3ea92246b5ae704bc7dcbadf4f4e0d5a54e9e6', class: {
                 'pds-modal__backdrop': true,
                 'open': this.open
-            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, h("div", { key: 'f5e652d4dae0e7c272b37b63eb9c65f04c69536a', class: {
+            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, h("div", { key: 'a38029c2284ed345bec2ce7638fc3415818cd609', class: {
                 'pds-modal': true,
                 [`pds-modal--${sizeClass}`]: true,
                 'pds-modal--scrollable': this.scrollable
-            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, h("slot", { key: 'a954e1694741f78230599c476b270079797a263e' }))));
+            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, h("slot", { key: '396da81af42685f5c083f853afa207a6844e444e' }))));
     }
     static get is() { return "pds-modal"; }
     static get originalStyleUrls() {

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

@@ -1178,7 +1178,7 @@ export class PdsMultiselect {
                 '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 ? formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "aria-describedby": hasAction ? `${optionId}-action-description` : undefined, "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onClick: this.handleOptionClick, 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, formatMessage(this.createOptionLabel, { text: option.text })))) : (h("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }, this.optionDisplay === 'chip' && (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)));
+            }, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "aria-describedby": hasAction ? `${optionId}-action-description` : undefined, "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onClick: this.handleOptionClick, 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", "aria-hidden": "true" }), h("pds-text", null, formatMessage(this.createOptionLabel, { text: option.text })))) : (h("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }, this.optionDisplay === 'chip' && (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;
@@ -1201,7 +1201,7 @@ export class PdsMultiselect {
         const hasSlottedEmpty = !!this.el.querySelector('[slot="empty"]');
         const hasSlottedLoading = !!this.el.querySelector('[slot="loading"]');
         const hasSlottedFooter = !!this.el.querySelector('[slot="footer"]');
-        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": 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(), 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 && (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, this.noOptionsFoundLabel)))), this.getGroupedRenderItems(filteredOptions).map((item, itemIndex) => {
+        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", "aria-hidden": "true" }), 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(), 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 && (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, this.noOptionsFoundLabel)))), 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)))));
             }
@@ -1260,10 +1260,10 @@ export class PdsMultiselect {
     }
     render() {
         const hasSelections = this.selectedItems.length > 0;
-        return (h(Host, { key: 'a7806379c53598d41af91be63ee5bd300cc87755', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '0213d40953f1735b84c038e0e0afd1bc289d45ad', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: 'fa91c2337cdc9f5dea62173aeaa6b56e118a1316', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
+        return (h(Host, { key: 'd0879469e6ff943374c2f035c0a8d6d57c25dc5f', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '80caa694099218561b85c93d547ec9208def0ec7', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: 'b4eaa2c9e2901c28ecb0b8f55e63e33ad899e945', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
                 'pds-multiselect__label': true,
                 'visually-hidden': this.hideLabel,
-            } }, this.label)), h("div", { key: '54209b3edfb3583ab1bcecd2b1df973955abfcc3', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (h("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
+            } }, this.label)), h("div", { key: '404ed58aa6bfb2248ffad5e56ebabfe65149b9a4', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (h("slot", { name: "trigger" })) : 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,
@@ -1279,7 +1279,7 @@ export class PdsMultiselect {
             }, 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.helperMessage, this.errorMessage), "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.selectedDisplay === 'pill' && this.pillPosition === 'below'),
-            } }, this.getTriggerText()), h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), h("span", { key: 'e3c1bb5c484d851b332e994cd2a528ae95cbfc4d', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: '2009f6487118252ef1ec14170ddd0c6853ad279f', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: 'c740f4845ff0c1ccff4633810c1d9d92fb2e8a78', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'b2406ab3b0957a440593b4b986c98476258349be', icon: danger, size: "small" }), this.errorMessage)), h("div", { key: '6d2db6563864c71ab92ed9a8d4133efca23b1c55', style: { display: 'none' } }, h("slot", { key: '2af0e0a7e2410b9850fd15ef524fb388c32dc320' })))));
+            } }, this.getTriggerText()), h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), h("span", { key: '73f17916a37722fefebd6b5a184a7b3dca6f4a9d', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: '1a987562b21da6f8d2f8c9f94e93e8c99a7abd74', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: 'ce1f7f48d6f8dee320d87cb7088f084e68cb3ab5', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '8347dfdec6ef1b81d4cf9f72cba3d9ec965dcf08', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)), h("div", { key: '74cd840e102ad635d2f4bc23cf3bcfaa61d5cea1', style: { display: 'none' } }, h("slot", { key: 'c2fd9e71363a9661062c8d88be0dd78fc98b964d' })))));
     }
     static get is() { return "pds-multiselect"; }
     static get encapsulation() { return "shadow"; }