@pine-ds/core 4.7.2 → 4.9.0

package/dist/collection/components/pds-link/stories/pds-link.stories.js

@@ -1,4 +1,5 @@
 import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 export default {
   args: { href: '#some-anchor' },
@@ -12,8 +13,8 @@ export default {
   title: 'components/Link'
 }
 
-const BaseTemplate = (args) => html`<pds-link color=${args.color} ?external=${args.external} font-size=${args.fontSize} href=${args.href} component-id=${args.componentId} variant=${args.variant}></pds-link>`;
-const BaseTemplateWithSlot = (args) => html` <pds-link color=${args.color} ?external=${args.external} font-size=${args.fontSize} href=${args.href} component-id=${args.componentId} variant=${args.variant}>${args.slot}</pds-link>`;
+const BaseTemplate = (args) => html`<pds-link color=${args.color} ?external=${args.external} external-label=${ifDefined(args.externalLabel)} font-size=${args.fontSize} href=${args.href} component-id=${args.componentId} variant=${args.variant}></pds-link>`;
+const BaseTemplateWithSlot = (args) => html` <pds-link color=${args.color} ?external=${args.external} external-label=${ifDefined(args.externalLabel)} font-size=${args.fontSize} href=${args.href} component-id=${args.componentId} variant=${args.variant}>${args.slot}</pds-link>`;
 
 export const Colors = BaseTemplate.bind();
 Colors.args = {

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

@@ -66,7 +66,7 @@ export class PdsLoader {
             'aria-live': 'polite',
         };
         this.hostKeeper.record(hostClass, {}, hostAttributes);
-        return (h(Host, Object.assign({ key: 'c42c1aeec5c8db9a1065f35492734a8cb265f3ce', class: hostClass }, hostAttributes), this.variant === 'spinner' && (h("div", { key: 'dc1b7943709d03e02467cca0817fb6a7ad5ed10a', class: "pds-loader--spinner" }, h("svg", { key: 'db38e607541ac1eb91be87b2cd0240341c8fb51d', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: 'd734ef70b0039758a25881c22bb3e6453ac40012' }, h("linearGradient", { key: '697627f516c5f7b4cd5351dd39de231c0cb9e429', id: "spinner-secondHalf" }, h("stop", { key: '03082c0ec354685eebf7d0132202d54b083d26df', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '181b661b36aeb44943e20dec513f7265a9487004', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '67f6c51aefe99bcbfdb741290337364501fc4fcb', id: "spinner-firstHalf" }, h("stop", { key: 'cb6adf27ecb06b42ba572a702153de960491b0b6', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: 'aeebabfa1ac00391937388feefa120bd0bb4d26c', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: 'f06ca75e4df171b6db426fce9bc34076cfee5bca', class: "pds-loader__spinner-path" }, h("path", { key: 'a278b37de8f77a1000efecb62b89e3f751712a98', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'a035add4d01b60bcebf7625c8730d6a41ddf40ff', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '1189c8299d33a2a6bb6a8345b60f22bf4ad9beee', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '39826fae20e8826d9c73cf57ba938583d610e1ea', class: "pds-loader--typing" }, h("span", { key: '8f2b837c79548a1080710a7cc30c3be3a051e1dd' }), h("span", { key: '8efb1193ef51f110950861767eccc3896e90b81e' }), h("span", { key: '366f2d205adbb043691c253cff17d2d29d56a2cc' }))), h("div", { key: 'aeaa4aa12863b34088e84fd2791c2ce32dc05248', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '7a8ec45aed1cd6f9e60f4db2ec5376439fa41c81', name: "label" }, "Loading..."))));
+        return (h(Host, Object.assign({ key: 'eaf8a64d5c2e37349ed2d2426a6c6bf1df68005f', class: hostClass }, hostAttributes), this.variant === 'spinner' && (h("div", { key: '216143117aabd29ca52c56cd7951a27f9742e466', class: "pds-loader--spinner" }, h("svg", { key: '9c9db37e883fb3a4ba5e0c7c173a5d7a76cdadda', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: '8f65f537290ea2dd96b66343324851d243fec3dd' }, h("linearGradient", { key: '8b1a53bcc9401b98dafa805cae8e417af7646bfd', id: "spinner-secondHalf" }, h("stop", { key: 'f06605f7180e9c07d5eb4c9dbadcdb87cee0dd70', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '0bf492e4d5578bd0d98a2f7570a1dd21ca2ecf3d', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '6c7038c158d786866a408063b07b236bf17cefc1', id: "spinner-firstHalf" }, h("stop", { key: '916502c73bc4b78368bb210aed318537841917b9', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '2d20708106bb3a685fbaf4bdcf099684a36359c0', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: '93165f80e7d5155b3dc8f2fc62e326bec7604c57', class: "pds-loader__spinner-path" }, h("path", { key: '4b1e39a899aadf9d4b4cbf954c783c1103c43c24', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: '0aa1683dc97e2a01cc076a52a4883388c1d09c6f', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '9839fb9e0b473814d3b10eb27f7be87990b6c088', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: 'd83e4625ea2d41a545a98e08edb3033b83e7eb5b', class: "pds-loader--typing" }, h("span", { key: '2e793f3f5b17cb7709c8fc89e2054d7cd77fafd4' }), h("span", { key: 'c266ad3b8edf6c1cc392c544027f7cfd543b711c' }), h("span", { key: '061f9e3030cce603e50e8d86d3aa5036800c1324' }))), h("div", { key: '747c1c6c28136cfb9ba9dac0d4944bc6281af075', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '5eb5a5710deafa10bd269429edff0ac677546cf5', name: "label" }, "Loading..."))));
     }
     static get is() { return "pds-loader"; }
     static get encapsulation() { return "shadow"; }

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: 'b4200778f186c45a1917646ba2e0e4e623959951' }, h("div", { key: '39eaaf228e5441f5c0fd628c47be079fb4e07e0f', 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: 'ac31a9b81941b8b3abbac3a67c25bacaa54e6840' }))));
     }
     static get is() { return "pds-modal-content"; }
     static get originalStyleUrls() {

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

@@ -9,7 +9,7 @@ export class PdsModalFooter {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
     }
     render() {
-        return (h("footer", { key: '030153b84f1ea1cb133c9ccec3ad86583995974f', class: "pds-modal__footer" }, h("slot", { key: '3a479e7047f3e845a65c37d60539648c8ff78602' })));
+        return (h("footer", { key: 'c0d50408471355d80759112e63f58c8a34fb7906', class: "pds-modal__footer" }, h("slot", { key: '6566d446457be8b57e37bf1542a5863b0018d233' })));
     }
     static get is() { return "pds-modal-footer"; }
     static get originalStyleUrls() {

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

@@ -9,7 +9,7 @@ export class PdsModalHeader {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
     }
     render() {
-        return (h("header", { key: 'ee3ac5fb9b00a943aa86c3434ea07291b74d776c', class: "pds-modal__header" }, h("slot", { key: '0b0f7ff257635723099c536648a826be8dcc05e7' })));
+        return (h("header", { key: 'eb295ff36fd23b7965296b6dfcfcf783a32079a0', class: "pds-modal__header" }, h("slot", { key: '9c97566ff79f8d9b233d814395d5a7e893751a06' })));
     }
     static get is() { return "pds-modal-header"; }
     static get originalStyleUrls() {

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

@@ -1,91 +1,11 @@
 import { h } from "@stencil/core";
 import { closest } from "../../utils/closest";
+import { tabbableIn } from "../../utils/tabbable";
 import { unwrapReconnectedContent } from "../../utils/reconnected-content";
 const PRESET_SIZES = ['sm', 'md', 'lg', 'fullscreen'];
 const isCustomLength = (value) => /^[a-z0-9.%+\-*/(), ]+$/i.test(value) &&
     /\d/.test(value) &&
     (typeof CSS === 'undefined' || CSS.supports('max-width', value));
-const TABBABLE = [
-    'a[href]',
-    'area[href]',
-    'button',
-    'input:not([type="hidden"])',
-    'select',
-    'textarea',
-    'iframe',
-    'summary',
-    '[contenteditable]:not([contenteditable="false"])',
-    '[tabindex]',
-].join(',');
-/**
- * Collects the tabbable elements under `root` in focus order, walking into open shadow roots and
- * following slots, so a component's own controls (the input inside pds-combobox or pds-textarea)
- * count without being registered here by tag name. Positive tabindex values are not reordered,
- * and a closed shadow root can't be seen into.
- */
-function collectTabbable(root, found) {
-    for (const child of Array.from(root.children))
-        visitTabbable(child, found);
-}
-// An editing host reports tabIndex -1 but is still a Tab stop; editable content inside it is not.
-const isTabStop = (el) => { var _a; return el.tabIndex >= 0 || (el.isContentEditable && !el.hasAttribute('tabindex') && !((_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.isContentEditable)); };
-function visitTabbable(el, found) {
-    var _a, _b, _c, _d;
-    if (el.hasAttribute('inert'))
-        return;
-    if (el.localName === 'slot') {
-        const slot = el;
-        // Fallback content renders only when nothing at all is assigned, text included.
-        if (((_b = (_a = slot.assignedNodes) === null || _a === void 0 ? void 0 : _a.call(slot, { flatten: true })) !== null && _b !== void 0 ? _b : []).length === 0)
-            return collectTabbable(el, found);
-        for (const slotted of slot.assignedElements({ flatten: true }))
-            visitTabbable(slotted, found);
-        return;
-    }
-    // A delegatesFocus host passes focus to its first control, which the walk below finds.
-    const delegates = ((_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.delegatesFocus) === true;
-    if (el instanceof HTMLElement && !delegates && isTabStop(el) && el.matches(TABBABLE) && !el.matches(':disabled')) {
-        found.push(el);
-    }
-    // A shadow host's light children render only through its slots, which the walk reaches.
-    collectTabbable((_d = el.shadowRoot) !== null && _d !== void 0 ? _d : el, found);
-}
-/** The element as a radio in a named group, or `null`. */
-const groupedRadio = (el) => el instanceof HTMLInputElement && el.type === 'radio' && el.name !== '' ? el : null;
-/**
- * Keeps one radio per named group, as the browser does: the checked one, or the first. The others
- * are reached with the arrow keys, so they can't be the first or last stop of the trap.
- */
-function oneRadioPerGroup(elements) {
-    // Radios group by name and form within one tree, so each shadow root starts its own groups.
-    const groups = [];
-    for (const el of elements) {
-        const radio = groupedRadio(el);
-        if (radio === null)
-            continue;
-        const group = groups.find(([first]) => first.name === radio.name && first.form === radio.form && first.getRootNode() === radio.getRootNode());
-        if (group)
-            group.push(radio);
-        else
-            groups.push([radio]);
-    }
-    const stops = new Set(groups.map((radios) => { var _a; return (_a = radios.find((radio) => radio.checked)) !== null && _a !== void 0 ? _a : radios[0]; }));
-    return elements.filter((el) => groupedRadio(el) === null || stops.has(el));
-}
-/** The controls Tab reaches in `root`, in order: visible ones, and one radio per group. */
-function tabbableIn(root) {
-    const found = [];
-    collectTabbable(root, found);
-    // checkVisibility() also drops an element inside a hidden ancestor, whose own computed
-    // display isn't none; such an element can't take focus.
-    const visible = found.filter(el => {
-        if (typeof el.checkVisibility === 'function')
-            return el.checkVisibility({ checkVisibilityCSS: true });
-        const style = window.getComputedStyle(el);
-        return style.display !== 'none' && style.visibility !== 'hidden';
-    });
-    return oneRadioPerGroup(visible);
-}
 /** Whether `node` is `ancestor` or inside it, crossing shadow roots, which `Node.contains` doesn't. */
 function containsComposed(ancestor, node) {
     for (let current = node; current; current = current instanceof ShadowRoot ? current.host : current.parentNode) {
@@ -101,7 +21,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 +565,14 @@ export class PdsModal {
     }
     render() {
         const [sizeClass = 'md', customSize] = this.resolveSize();
-        return (h("dialog", { key: '0b187f36910a859afe57b891f1ebffd1d2d49ab7', class: {
+        return (h("dialog", { key: 'cd574868a46b69185e2058c60374dbec34677732', 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: '8c50fb4810b4bb07d62348fed44df30b14a52acd', 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: '25a71c95dfeff4648a28edef21bf510b1743ed7c' }))));
     }
     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: '3a526f6883d7e7df35985a145962f656621535c1', class: backdropClasses }, h("div", { key: '3af0487dc8c8831903cd7c22ffbf3e708b067ad7', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, h("div", { key: '94e6205042ee91dac0823901cc97b79e93a515f2', class: "pds-modal__header" }, h("slot", { key: 'ca04b575ccceabd431e3f5c57189f17f9aae6089', name: "header" })), h("div", { key: 'f8327a261e70b622add1dd4ee21b5f8e8d91e603', class: "pds-modal-content" }, h("slot", { key: 'a1a9c30d0f5479b0004ace4544e3d96ae87465be' })), h("div", { key: 'af5fa59922047eeec7cbf0a0e1ee4b472b16079c', class: "pds-modal__footer" }, h("slot", { key: '3c469bf94bb3a26dfd8046a5eda481f9d55edca1', name: "footer" })))));
+        return (h("div", { key: '6e165638f8f4699fa242f3045155c392f9f529b2', class: backdropClasses }, h("div", { key: 'f4b8db3093a6fbe24be8035a826e8289815e4afb', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, h("div", { key: 'fa846f66e539ea0d1b73820abb991fdb02902499', class: "pds-modal__header" }, h("slot", { key: '0faaa6858fecd9d0c48c7f183d4f2101c1bed785', name: "header" })), h("div", { key: 'a896fba9494fcdee9dde7e0d9f7baf708095ee6f', class: "pds-modal-content" }, h("slot", { key: '4091e70b2a744c36c8249aa8664937d227145c14' })), h("div", { key: 'cbf4bdd80cc3575d8c7e2e0e2078e28c4f185920', class: "pds-modal__footer" }, h("slot", { key: '56ed3a26c36fd70d7ec9f033951d1b1d9e044957', name: "footer" })))));
     }
     static get is() { return "mock-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: 'a92086af75e20b9b37b147365bfa517d96021700', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: 'd49e0442e3a348248e5ac3b37afc9f128b34956b', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: '41a081803dfd784e20a7135ecf5f5c4657908dd1', 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: '0e3c8a3aaf7c70b4ff71972c29b8d5599f62ec97', 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: 'd5cddc1d3374d94ecf0cce1bcaf7c7125bf3128d', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: 'e3cb958b6fd2b1e138b769de0f53be1b8564902d', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: 'f6c2a30cc192391973d9b22fbb6732ce387832ac', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'f437effafaa383b81aec7b5bf635598c8b0075b8', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)), h("div", { key: 'f1e747137f2dc7cad3d4e1ff8fc293401e3173e1', style: { display: 'none' } }, h("slot", { key: 'f337137b3ca5983dc6641361101f6d19c972778c' })))));
     }
     static get is() { return "pds-multiselect"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,6 +5,12 @@
 :host .pds-popover__trigger-wrapper {
   display: inline-block;
 }
+:host .pds-popover__tab-guard {
+  opacity: 0;
+  outline: none;
+  pointer-events: none;
+  position: fixed;
+}
 :host .pds-popover__content-slot-wrapper {
   display: none;
 }