@pine-ds/core 4.7.2 → 4.9.0

package/dist/cjs/pds-modal-content.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-jl_Q819j.js');
+var index = require('./index-BsWY_xEJ.js');
 var reconnectedContent = require('./reconnected-content-CpnEQcTp.js');
-require('./keep-hydrated-CiXgkEYd.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
 const pdsModalContentCss = () => `pds-modal-content{display:block;-ms-flex:1 1 auto;flex:1 1 auto;width:100%}pds-modal-content:has(.pds-modal-content.pds-modal-content--border-none){border:0}pds-modal-content:has(.pds-modal-content.pds-modal-content--border-both){-webkit-border-after:1px solid var(--pine-color-border-subtle);border-block-end:1px solid var(--pine-color-border-subtle);-webkit-border-before:1px solid var(--pine-color-border-subtle);border-block-start:1px solid var(--pine-color-border-subtle)}pds-modal-content:has(.pds-modal-content.pds-modal-content--border-top){-webkit-border-before:1px solid var(--pine-color-border-subtle);border-block-start:1px solid var(--pine-color-border-subtle)}pds-modal-content:has(.pds-modal-content.pds-modal-content--border-bottom){-webkit-border-after:1px solid var(--pine-color-border-subtle);border-block-end:1px solid var(--pine-color-border-subtle)}.pds-modal-content{display:block;-ms-flex:1 1 auto;flex:1 1 auto;min-height:0;width:100%}`;
 
@@ -19,6 +19,21 @@ const PdsModalContent = class {
          * 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() {
@@ -32,43 +47,30 @@ const PdsModalContent = class {
         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)
      */
@@ -185,10 +187,10 @@ const PdsModalContent = class {
     render() {
         // Only apply max-height style if it's not 'none'
         const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
-        return (index.h(index.Host, { key: 'd41d5632eb6a2dafe921546af60f835d3545cc4f' }, index.h("div", { key: '741ac9f28149039ecf5051142a939ab62ef26a87', class: {
+        return (index.h(index.Host, { key: 'b4200778f186c45a1917646ba2e0e4e623959951' }, index.h("div", { key: '39eaaf228e5441f5c0fd628c47be079fb4e07e0f', class: {
                 'pds-modal-content': true,
                 [`pds-modal-content--border-${this.border}`]: true
-            }, style: styleObj, tabindex: "-1" }, index.h("slot", { key: '090a52e9425d4df61c2d8216cc19f0925babdffe' }))));
+            }, style: styleObj, tabindex: "-1" }, index.h("slot", { key: 'ac31a9b81941b8b3abbac3a67c25bacaa54e6840' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/pds-modal-footer.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-jl_Q819j.js');
+var index = require('./index-BsWY_xEJ.js');
 var reconnectedContent = require('./reconnected-content-CpnEQcTp.js');
-require('./keep-hydrated-CiXgkEYd.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
 const pdsModalFooterCss = () => `pds-modal-footer{display:block;width:100%}.pds-modal__footer{width:100%}`;
 
@@ -15,7 +15,7 @@ const PdsModalFooter = class {
         reconnectedContent.unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
     }
     render() {
-        return (index.h("footer", { key: '030153b84f1ea1cb133c9ccec3ad86583995974f', class: "pds-modal__footer" }, index.h("slot", { key: '3a479e7047f3e845a65c37d60539648c8ff78602' })));
+        return (index.h("footer", { key: 'c0d50408471355d80759112e63f58c8a34fb7906', class: "pds-modal__footer" }, index.h("slot", { key: '6566d446457be8b57e37bf1542a5863b0018d233' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/pds-modal-header.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-jl_Q819j.js');
+var index = require('./index-BsWY_xEJ.js');
 var reconnectedContent = require('./reconnected-content-CpnEQcTp.js');
-require('./keep-hydrated-CiXgkEYd.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
 const pdsModalHeaderCss = () => `pds-modal-header{display:block;width:100%}.pds-modal__header{width:100%}`;
 
@@ -15,7 +15,7 @@ const PdsModalHeader = class {
         reconnectedContent.unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
     }
     render() {
-        return (index.h("header", { key: 'ee3ac5fb9b00a943aa86c3434ea07291b74d776c', class: "pds-modal__header" }, index.h("slot", { key: '0b0f7ff257635723099c536648a826be8dcc05e7' })));
+        return (index.h("header", { key: 'eb295ff36fd23b7965296b6dfcfcf783a32079a0', class: "pds-modal__header" }, index.h("slot", { key: '9c97566ff79f8d9b233d814395d5a7e893751a06' })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -1,9 +1,10 @@
 'use strict';
 
-var index = require('./index-jl_Q819j.js');
+var index = require('./index-BsWY_xEJ.js');
 var closest = require('./closest-D0qyYtJ3.js');
+var tabbable = require('./tabbable-CddSt_Hi.js');
 var reconnectedContent = require('./reconnected-content-CpnEQcTp.js');
-require('./keep-hydrated-CiXgkEYd.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
 const pdsModalCss = () => `.pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);visibility:hidden;width:100%;z-index:var(--pine-z-index-modal)}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:var(--pine-z-index-priority)}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop[aria-modal=false]{overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop[aria-modal=false]{-webkit-backdrop-filter:none;backdrop-filter:none}.pds-modal__backdrop[aria-modal=false]::before{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);content:"";inset:0;position:fixed;z-index:-1}}.pds-modal__backdrop.open{opacity:1;-webkit-transition-timing-function:var(--pine-motion-easing-out);transition-timing-function:var(--pine-motion-easing-out);visibility:visible}.pds-modal{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:none;width:100%}.pds-modal.pds-modal--scrollable{max-height:calc(100vh - (5vh + 96px))}@supports (height: 100dvh){.pds-modal.pds-modal--scrollable{max-height:calc(100dvh - (5dvh + 96px))}}@media (min-width: 992px){.pds-modal{-webkit-margin-before:6vh;margin-block-start:6vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:6dvh;margin-block-start:6dvh}}}@media (min-width: 1200px){.pds-modal{-webkit-margin-before:8vh;margin-block-start:8vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:8dvh;margin-block-start:8dvh}}}.pds-modal--sm{max-width:520px}.pds-modal--md{max-width:700px}.pds-modal--lg{max-width:900px}.pds-modal--custom{max-width:var(--pds-modal-max-width, 700px)}.pds-modal--fullscreen{border-radius:0;height:100%;margin:0;max-height:100vh;max-width:100%}@supports (height: 100dvh){.pds-modal--fullscreen{max-height:100dvh}}.pds-modal--fullscreen.pds-modal--scrollable{max-height:100vh}@supports (height: 100dvh){.pds-modal--fullscreen.pds-modal--scrollable{max-height:100dvh}}.pds-modal--fullscreen .pds-modal-content{-ms-flex:1;flex:1}.pds-modal--scrollable pds-modal-content{-webkit-border-after:1px solid transparent;border-block-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-modal-content{overflow-y:visible}`;
 
@@ -11,87 +12,6 @@ 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) {
@@ -107,7 +27,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;
@@ -375,7 +295,7 @@ const PdsModal = class {
     updateFocusableElements() {
         if (!this.modalRef)
             return;
-        this.focusableElements = tabbableIn(this.modalRef);
+        this.focusableElements = tabbable.tabbableIn(this.modalRef);
     }
     /**
      * Sets focus to the first focusable element in the modal
@@ -528,7 +448,7 @@ const PdsModal = class {
             return;
         if (!closest.closest('dialog:modal', dialog) && !containsComposed(top, this.el))
             return;
-        (_a = tabbableIn(dialog).find(el => !containsComposed(this.el, el))) === null || _a === void 0 ? void 0 : _a.focus();
+        (_a = tabbable.tabbableIn(dialog).find(el => !containsComposed(this.el, el))) === null || _a === void 0 ? void 0 : _a.focus();
     }
     /**
      * Gets the z-index of a modal's backdrop element
@@ -651,14 +571,14 @@ const PdsModal = class {
     }
     render() {
         const [sizeClass = 'md', customSize] = this.resolveSize();
-        return (index.h("dialog", { key: '0b187f36910a859afe57b891f1ebffd1d2d49ab7', class: {
+        return (index.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 }, index.h("div", { key: 'f5e652d4dae0e7c272b37b63eb9c65f04c69536a', class: {
+            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, index.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" }, index.h("slot", { key: 'a954e1694741f78230599c476b270079797a263e' }))));
+            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, index.h("slot", { key: '25a71c95dfeff4648a28edef21bf510b1743ed7c' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-jl_Q819j.js');
-var floatingUi_dom = require('./floating-ui.dom-Dc8Anyel.js');
+var index = require('./index-BsWY_xEJ.js');
+var floatingUi_dom = require('./floating-ui.dom-Dw41zbyY.js');
 var utils = require('./utils-BhRmyxT8.js');
 var form = require('./form-MhwfKTuo.js');
-var index$1 = require('./index-5Azb8EQG.js');
+var index$1 = require('./index-Do70atou.js');
 var i18nFormat = require('./i18n-format-BD0PmYzT.js');
-require('./keep-hydrated-CiXgkEYd.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
 const pdsMultiselectCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__pill-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs)}.pds-multiselect__pill-list--inline{-ms-flex:1;flex:1;min-width:0}.pds-multiselect__pill-list--below{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-multiselect__pill-overflow{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);white-space:nowrap}.pds-multiselect__trigger--pill-inline{-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger--pill-inline:focus-within:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--invalid:focus-within{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__pill-toggle{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-width:0;cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-multiselect__pill-toggle:focus{outline:3px solid transparent}.pds-multiselect__trigger--disabled .pds-multiselect__pill-toggle{cursor:not-allowed;pointer-events:none}.pds-multiselect__panel{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:fixed;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__group-header{color:var(--pine-color-text-muted);display:block;font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-sm) var(--pine-dimension-xs) var(--pine-dimension-2xs);text-transform:uppercase}.pds-multiselect__listbox>li:first-child>.pds-multiselect__group-header{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-multiselect__group-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{min-width:var(--pine-dimension-none);pointer-events:none;width:100%}.pds-multiselect__option pds-chip{pointer-events:auto}.pds-multiselect__option:hover:not(.pds-multiselect__option--disabled),.pds-multiselect__option.pds-multiselect__option--highlighted:not(.pds-multiselect__option--disabled){background:var(--pine-color-background-muted)}.pds-multiselect__option.pds-multiselect__option--disabled{cursor:not-allowed;opacity:0.5}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__option-action{-ms-flex-align:center;align-items:center;block-size:var(--pine-dimension-md);color:var(--pine-color-icon);cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-dimension-md);-ms-flex-pack:center;justify-content:center;-webkit-margin-start:var(--pine-dimension-xs);margin-inline-start:var(--pine-dimension-xs)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs)}.pds-multiselect__footer{-webkit-border-before:var(--pine-border);border-block-start:var(--pine-border);border-block-start-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}`;
 
@@ -1182,7 +1182,7 @@ const PdsMultiselect = class {
                 'pds-multiselect__option--selected': isSelected,
                 'pds-multiselect__option--create': isCreateOption,
                 'pds-multiselect__option--disabled': isDisabled || isCreateDisabled,
-            }, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? i18nFormat.formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "aria-describedby": hasAction ? `${optionId}-action-description` : undefined, "data-index": index$1, onMouseDown: this.handleOptionMouseDown(option), onClick: this.handleOptionClick, onMouseEnter: this.handleOptionMouseEnter(index$1, option) }, isCreateOption ? (index.h("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, index.h("pds-icon", { name: "add", size: "small" }), index.h("pds-text", null, i18nFormat.formatMessage(this.createOptionLabel, { text: option.text })))) : (index.h("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index$1}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }, this.optionDisplay === 'chip' && (index.h("pds-chip", { slot: "label", sentiment: "subtle", dot: !!option.dotColor, "dot-color": option.dotColor, "max-width": "100%" }, option.text)))), hasAction && this.renderOptionAction(option, optionId, isHighlighted)));
+            }, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? i18nFormat.formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "aria-describedby": hasAction ? `${optionId}-action-description` : undefined, "data-index": index$1, onMouseDown: this.handleOptionMouseDown(option), onClick: this.handleOptionClick, onMouseEnter: this.handleOptionMouseEnter(index$1, option) }, isCreateOption ? (index.h("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, index.h("pds-icon", { name: "add", size: "small", "aria-hidden": "true" }), index.h("pds-text", null, i18nFormat.formatMessage(this.createOptionLabel, { text: option.text })))) : (index.h("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index$1}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }, this.optionDisplay === 'chip' && (index.h("pds-chip", { slot: "label", sentiment: "subtle", dot: !!option.dotColor, "dot-color": option.dotColor, "max-width": "100%" }, option.text)))), hasAction && this.renderOptionAction(option, optionId, isHighlighted)));
     }
     renderOptionAction(option, optionId, isHighlighted) {
         var _a;
@@ -1205,7 +1205,7 @@ const PdsMultiselect = class {
         const hasSlottedEmpty = !!this.el.querySelector('[slot="empty"]');
         const hasSlottedLoading = !!this.el.querySelector('[slot="loading"]');
         const hasSlottedFooter = !!this.el.querySelector('[slot="footer"]');
-        return (index.h("div", { class: "pds-multiselect__panel", ref: el => (this.panelEl = el), style: { minWidth: this.minWidth } }, index.h("div", { class: "pds-multiselect__search" }, index.h("pds-icon", { name: "search", size: "small" }), index.h("input", { ref: el => (this.searchInputEl = el), type: "text", class: "pds-multiselect__search-input", placeholder: this.searchPlaceholder, value: this.searchQuery, "aria-label": this.searchOptionsLabel, "aria-controls": `${this.componentId}-listbox`, "aria-activedescendant": this.highlightedIndex >= 0 ? `${this.componentId}-option-${this.highlightedIndex}` : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": "true", "aria-autocomplete": "list", autocomplete: "off", onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchInputKeyDown })), this.renderSelectedItemsList(), index.h("ul", { class: "pds-multiselect__listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": this.label || this.optionsLabel, id: `${this.componentId}-listbox`, ref: el => (this.listboxEl = el), style: { maxHeight: this.maxHeight }, onScroll: this.handleScroll }, this.loading && (index.h("li", { class: "pds-multiselect__loading", role: "presentation" }, hasSlottedLoading ? (index.h("slot", { name: "loading" })) : (index.h("pds-loader", { size: "small" })))), !this.loading && filteredOptions.length === 0 && (index.h("li", { class: "pds-multiselect__empty", role: "presentation" }, hasSlottedEmpty ? (index.h("slot", { name: "empty" })) : (index.h("span", null, this.noOptionsFoundLabel)))), this.getGroupedRenderItems(filteredOptions).map((item, itemIndex) => {
+        return (index.h("div", { class: "pds-multiselect__panel", ref: el => (this.panelEl = el), style: { minWidth: this.minWidth } }, index.h("div", { class: "pds-multiselect__search" }, index.h("pds-icon", { name: "search", size: "small", "aria-hidden": "true" }), index.h("input", { ref: el => (this.searchInputEl = el), type: "text", class: "pds-multiselect__search-input", placeholder: this.searchPlaceholder, value: this.searchQuery, "aria-label": this.searchOptionsLabel, "aria-controls": `${this.componentId}-listbox`, "aria-activedescendant": this.highlightedIndex >= 0 ? `${this.componentId}-option-${this.highlightedIndex}` : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": "true", "aria-autocomplete": "list", autocomplete: "off", onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchInputKeyDown })), this.renderSelectedItemsList(), index.h("ul", { class: "pds-multiselect__listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": this.label || this.optionsLabel, id: `${this.componentId}-listbox`, ref: el => (this.listboxEl = el), style: { maxHeight: this.maxHeight }, onScroll: this.handleScroll }, this.loading && (index.h("li", { class: "pds-multiselect__loading", role: "presentation" }, hasSlottedLoading ? (index.h("slot", { name: "loading" })) : (index.h("pds-loader", { size: "small" })))), !this.loading && filteredOptions.length === 0 && (index.h("li", { class: "pds-multiselect__empty", role: "presentation" }, hasSlottedEmpty ? (index.h("slot", { name: "empty" })) : (index.h("span", null, this.noOptionsFoundLabel)))), this.getGroupedRenderItems(filteredOptions).map((item, itemIndex) => {
             if (item.type === 'group') {
                 return (index.h("li", { key: `group-${itemIndex}`, role: "group", "aria-label": item.group, class: "pds-multiselect__group" }, index.h("span", { class: "pds-multiselect__group-header", "aria-hidden": "true" }, item.group), index.h("ul", { class: "pds-multiselect__group-list", role: "presentation" }, item.options.map(({ option, index }) => this.renderOption(option, index, valueArray)))));
             }
@@ -1264,10 +1264,10 @@ const PdsMultiselect = class {
     }
     render() {
         const hasSelections = this.selectedItems.length > 0;
-        return (index.h(index.Host, { key: 'a7806379c53598d41af91be63ee5bd300cc87755', "aria-disabled": this.disabled ? 'true' : null }, index.h("div", { key: '0213d40953f1735b84c038e0e0afd1bc289d45ad', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (index.h("label", { key: 'fa91c2337cdc9f5dea62173aeaa6b56e118a1316', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
+        return (index.h(index.Host, { key: 'a92086af75e20b9b37b147365bfa517d96021700', "aria-disabled": this.disabled ? 'true' : null }, index.h("div", { key: 'd49e0442e3a348248e5ac3b37afc9f128b34956b', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (index.h("label", { key: '41a081803dfd784e20a7135ecf5f5c4657908dd1', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
                 'pds-multiselect__label': true,
                 'visually-hidden': this.hideLabel,
-            } }, this.label)), index.h("div", { key: '54209b3edfb3583ab1bcecd2b1df973955abfcc3', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (index.h("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (index.h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
+            } }, this.label)), index.h("div", { key: '0e3c8a3aaf7c70b4ff71972c29b8d5599f62ec97', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (index.h("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (index.h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
                 'pds-multiselect__trigger': true,
                 'pds-multiselect__trigger--open': this.isOpen,
                 'pds-multiselect__trigger--disabled': this.disabled,
@@ -1283,7 +1283,7 @@ const PdsMultiselect = class {
             }, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": form.assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, index.h("span", { class: {
                 'pds-multiselect__trigger-text': true,
                 'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
-            } }, this.getTriggerText()), index.h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: index$1.enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), index.h("span", { key: 'e3c1bb5c484d851b332e994cd2a528ae95cbfc4d', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (index.h("p", { key: '2009f6487118252ef1ec14170ddd0c6853ad279f', class: "pds-multiselect__helper", id: form.messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (index.h("p", { key: 'c740f4845ff0c1ccff4633810c1d9d92fb2e8a78', class: "pds-multiselect__error", id: form.messageId(this.componentId, 'error') }, index.h("pds-icon", { key: 'b2406ab3b0957a440593b4b986c98476258349be', icon: index$1.danger, size: "small" }), this.errorMessage)), index.h("div", { key: '6d2db6563864c71ab92ed9a8d4133efca23b1c55', style: { display: 'none' } }, index.h("slot", { key: '2af0e0a7e2410b9850fd15ef524fb388c32dc320' })))));
+            } }, this.getTriggerText()), index.h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: index$1.enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), index.h("span", { key: 'd5cddc1d3374d94ecf0cce1bcaf7c7125bf3128d', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (index.h("p", { key: 'e3cb958b6fd2b1e138b769de0f53be1b8564902d', class: "pds-multiselect__helper", id: form.messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (index.h("p", { key: 'f6c2a30cc192391973d9b22fbb6732ce387832ac', class: "pds-multiselect__error", id: form.messageId(this.componentId, 'error') }, index.h("pds-icon", { key: 'f437effafaa383b81aec7b5bf635598c8b0075b8', "aria-hidden": "true", icon: index$1.danger, size: "small" }), this.errorMessage)), index.h("div", { key: 'f1e747137f2dc7cad3d4e1ff8fc293401e3173e1', style: { display: 'none' } }, index.h("slot", { key: 'f337137b3ca5983dc6641361101f6d19c972778c' })))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }