@pine-ds/core 4.4.3 → 4.5.0

package/dist/esm/pds-dropdown-menu.entry.js

@@ -1,5 +1,7 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-bLhIfh0N.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-2HMD-zUO.js';
+import { s as setAttributesIfChanged } from './attributes-CF5K2pxn.js';
 import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift } from './floating-ui.dom-BPqJgIq6.js';
+import './keep-hydrated-Dv7ssOTc.js';
 
 const pdsDropdownMenuCss = () => `:host{display:block}.is-hidden{display:none}.pds-dropdown-menu--panel{background-color:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-xs);left:var(--pine-dimension-none);min-width:170px;padding:var(--pine-dimension-xs);position:fixed;z-index:var(--pine-z-index-overlay)}:host-context([data-theme=dark]) .pds-dropdown-menu--panel{border:var(--pine-border)}::slotted(a),::slotted(button){-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-dimension-xs) !important;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text) !important;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;font:var(--pine-typography-body-medium) !important;gap:var(--pine-dimension-xs);margin:calc(var(--pine-border-width) + 2px) !important;padding:var(--pine-dimension-xs) !important;text-align:start;text-decoration:none !important;width:calc(100% - (var(--pine-border-width) + 2px) * 2)}::slotted(.destructive){color:var(--pine-color-danger) !important}::slotted([aria-disabled=true]),::slotted([disabled]:not([disabled=false])){cursor:not-allowed;opacity:0.5;pointer-events:none}`;
 
@@ -9,6 +11,7 @@ const PdsDropdownMenu = class {
         this.isOpen = false;
         this.menuItems = [];
         this.cleanupAutoUpdate = null;
+        this.triggerObserver = null;
         this.currentFocusIndex = -1;
         /**
          * The placement of the dropdown panel relative to the trigger.
@@ -19,10 +22,17 @@ const PdsDropdownMenu = class {
             // Get all elements assigned to this slot
             const assignedElements = this.slotEl.assignedElements();
             this.triggerEl = assignedElements[0];
-            this.triggerEl.onclick = this.handleClick;
-            // Add accessibility attributes to trigger
-            this.triggerEl.setAttribute('aria-haspopup', 'menu');
-            this.triggerEl.setAttribute('aria-expanded', 'false');
+            if (this.triggerEl) {
+                this.triggerEl.onclick = this.handleClick;
+                this.syncTriggerAria();
+            }
+            this.observeTrigger();
+        };
+        // Writes the trigger's ARIA from the menu's state, so the observer's own callback doesn't loop.
+        this.syncTriggerAria = () => {
+            if (!this.triggerEl)
+                return;
+            setAttributesIfChanged(this.triggerEl, { 'aria-haspopup': 'menu', 'aria-expanded': String(this.isOpen) });
         };
         this.handleSlotChange = (event) => {
             this.slotEl = event.target;
@@ -76,8 +86,7 @@ const PdsDropdownMenu = class {
             this.cleanupAutoUpdate = autoUpdate(this.triggerEl, this.panelEl, updatePosition);
             (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('pds-box').classList.remove('is-hidden');
             this.isOpen = true;
-            // Update ARIA attributes
-            this.triggerEl.setAttribute('aria-expanded', 'true');
+            this.syncTriggerAria();
         };
         // Close the dropdown
         this.closeDropdown = () => {
@@ -89,8 +98,7 @@ const PdsDropdownMenu = class {
                 this.cleanupAutoUpdate();
                 this.cleanupAutoUpdate = null;
             }
-            // Update ARIA attributes
-            this.triggerEl.setAttribute('aria-expanded', 'false');
+            this.syncTriggerAria();
             // Reset focus index
             this.currentFocusIndex = -1;
             // Return focus to trigger
@@ -107,12 +115,35 @@ const PdsDropdownMenu = class {
         var _a;
         this.panelEl = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('pds-box');
     }
+    connectedCallback() {
+        // Moved within the page, the trigger slot doesn't change, so watch the same trigger again, and
+        // fix anything changed while the menu was detached and unobserved.
+        this.observeTrigger();
+        this.syncTriggerAria();
+    }
     disconnectedCallback() {
+        var _a;
         // Clean up auto-update when component is removed from DOM
         if (this.cleanupAutoUpdate) {
             this.cleanupAutoUpdate();
             this.cleanupAutoUpdate = null;
         }
+        (_a = this.triggerObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.triggerObserver = null;
+    }
+    // The trigger is the consumer's element, so anything can rewrite its attributes (a Turbo morph
+    // matches it to server HTML that has no ARIA). Put Pine's values back when that happens.
+    observeTrigger() {
+        var _a;
+        (_a = this.triggerObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.triggerObserver = null;
+        if (!this.triggerEl || typeof MutationObserver === 'undefined')
+            return;
+        this.triggerObserver = new MutationObserver(this.syncTriggerAria);
+        this.triggerObserver.observe(this.triggerEl, {
+            attributes: true,
+            attributeFilter: ['aria-haspopup', 'aria-expanded'],
+        });
     }
     // Outside clicks and scripted closes leave focus where it is; only focus in the menu or on its trigger returns.
     isFocusInMenu() {
@@ -314,7 +345,7 @@ const PdsDropdownMenu = class {
         }
     }
     render() {
-        return (h(Host, { key: 'a49d859ea4b881c025620b3bad3157af8ceceb36', id: this.componentId }, h("slot", { key: '2669398c6b6f0ad4037ba34695b0880afa4c69b9', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: 'e2a6d7892bfe4ead980df8f702e5387e62d6bd05', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", role: "menu", "aria-orientation": "vertical", part: "menu-panel" }, h("slot", { key: '70fa9b2ac96f528ae0ebd28486b5a934fb705413', onSlotchange: this.handleSlotChange }))));
+        return (h(Host, { key: '9d67972cf15c22bc666c32b86dcd8f143160ee0a', id: this.componentId }, h("slot", { key: 'e9cbc0612ce0e8c2bf55e1dc7930eda075fcc173', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: '6fed3f11cf962a97f8ebb3cc69bd76efb425c464', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", role: "menu", "aria-orientation": "vertical", part: "menu-panel" }, h("slot", { key: 'b8757512713b913f3ee56d9518897e7ed3c3b830', onSlotchange: this.handleSlotChange }))));
     }
     get host() { return getElement(this); }
 };

package/dist/esm/pds-filter.entry.js

@@ -1,6 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-bLhIfh0N.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-2HMD-zUO.js';
 import { i as isRtlDirection } from './scroll-DtgUQhjl.js';
 import { t as trash, e as enlarge } from './index-DxI-61GK.js';
+import './keep-hydrated-Dv7ssOTc.js';
 
 const pdsFilterCss = () => `:host{--box-shadow-focus:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);display:inline-block;position:relative}.pds-filter__trigger{-ms-flex-align:center;align-items:center;anchor-name:--filter-trigger;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-100);-webkit-box-shadow:var(--pine-box-shadow-050);box-shadow:var(--pine-box-shadow-050);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-tertiary);cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--pine-font-family-inter);font-size:var(--pine-font-size-100);font-weight:var(--pine-font-weight-400);gap:var(--pine-dimension-050);letter-spacing:var(--pine-letter-spacing-114);line-height:var(--pine-line-height-150);padding:var(--pine-dimension-025) var(--pine-dimension-125);position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.pds-filter__trigger pds-icon{block-size:var(--pine-font-size-100);color:var(--pine-color-text-secondary);-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-font-size-100)}.pds-filter__trigger:hover,.pds-filter__trigger.pds-filter__trigger--open{background-color:var(--pine-color-background-subtle);border-color:var(--pine-color-border-hover);color:var(--pine-color-text-hover)}.pds-filter__trigger:hover pds-icon,.pds-filter__trigger.pds-filter__trigger--open pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger:disabled{cursor:not-allowed;opacity:0.5}.pds-filter__trigger--selected{background-color:var(--pine-color-purple-050);border-color:var(--pine-color-purple-500);color:var(--pine-color-purple-600)}.pds-filter__trigger--selected pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:hover,.pds-filter__trigger--selected.pds-filter__trigger--open{background-color:var(--pine-color-purple-100);border-color:var(--pine-color-purple-500);color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:hover pds-icon,.pds-filter__trigger--selected.pds-filter__trigger--open pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger--more{background-color:var(--pine-color-background-container-hover);border:var(--pine-border-width-thin) dashed var(--pine-color-border);color:var(--pine-color-text-tertiary)}.pds-filter__trigger--more pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger--more:hover,.pds-filter__trigger--more.pds-filter__trigger--open{background-color:var(--pine-color-background-subtle);border-color:var(--pine-color-border-hover);color:var(--pine-color-text-hover)}.pds-filter__trigger--more:hover pds-icon,.pds-filter__trigger--more.pds-filter__trigger--open pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger--more:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger--clear{background:transparent;border:var(--pine-border-width-thin) solid transparent;border-radius:var(--pine-dimension-100);-webkit-box-shadow:none;box-shadow:none;color:var(--pine-color-purple-600)}.pds-filter__trigger--clear pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:hover{background-color:var(--pine-color-purple-100);border-color:var(--pine-color-purple-100);color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:hover pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__button-content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-050);max-inline-size:148px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-filter__button-text{line-height:var(--pine-line-height-150);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-filter__dropdown-icon{block-size:var(--pine-dimension-200);-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-dimension-200)}.pds-filter__popover{background-color:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-100);-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100);display:none;inline-size:228px;inset:unset;padding:var(--pine-dimension-100);z-index:var(--pine-z-index-overlay);}.pds-filter__popover:popover-open,.pds-filter__popover.is-open{display:block}.pds-filter__popover{}@supports (anchor-name: --test){.pds-filter__popover{inset-block-start:calc(anchor(--filter-trigger bottom) + var(--pine-dimension-100));inset-inline-start:anchor(--filter-trigger start);position:fixed;position-anchor:--filter-trigger;}.pds-filter__popover.popover-flip-horizontal{inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto}.pds-filter__popover.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover.popover-flip-horizontal.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto;-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover{}.pds-filter__popover.is-open.popover-flip-horizontal{inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto}.pds-filter__popover.is-open.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover.is-open.popover-flip-horizontal.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto;-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}}`;
 

package/dist/esm/pds-filters.entry.js

@@ -1,4 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-bLhIfh0N.js';
+import { r as registerInstance, h, H as Host } from './index-2HMD-zUO.js';
+import './keep-hydrated-Dv7ssOTc.js';
 
 const pdsFiltersCss = () => `:host{display:block}.pds-filters{-ms-flex-align:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-100)}`;
 

package/dist/esm/pds-icon.entry.js

@@ -1,4 +1,5 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-bLhIfh0N.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-2HMD-zUO.js';
+import './keep-hydrated-Dv7ssOTc.js';
 
 let missingAssetPathWarning = false;
 /**

package/dist/esm/pds-image.entry.js

@@ -1,4 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-bLhIfh0N.js';
+import { r as registerInstance, h, H as Host } from './index-2HMD-zUO.js';
+import './keep-hydrated-Dv7ssOTc.js';
 
 const pdsImageCss = () => `:host{--dimension-aspect-ratio:auto;display:inline-block}img{aspect-ratio:var(--dimension-aspect-ratio);display:block;height:auto;max-width:100%}`;
 

package/dist/esm/pds-input.entry.js

@@ -1,8 +1,9 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-bLhIfh0N.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-2HMD-zUO.js';
 import { i as isSpecTest, a as assignDescription, m as messageId } from './form-BuRbS7Hp.js';
-import { i as inheritAriaAttributes } from './attributes-C0M1gTKv.js';
+import { i as inheritAriaAttributes } from './attributes-CF5K2pxn.js';
 import { c as cancelDebouncedEvent, d as debounceEvent, f as flushDebouncedEvent } from './utils-OYK5-nwe.js';
 import { b as danger } from './index-DxI-61GK.js';
+import './keep-hydrated-Dv7ssOTc.js';
 
 const pdsInputTokensCss = () => `:host{--pine-input-color-background-danger:var(--pine-color-red-050)}`;
 

package/dist/esm/pds-link.entry.js

@@ -1,6 +1,7 @@
-import { r as registerInstance, h } from './index-bLhIfh0N.js';
+import { r as registerInstance, h } from './index-2HMD-zUO.js';
 import { s as setColor } from './utils-OYK5-nwe.js';
 import { l as launch } from './index-DxI-61GK.js';
+import './keep-hydrated-Dv7ssOTc.js';
 
 const pdsLinkCss = () => `:host{display:inline}:host pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-link{-ms-flex-align:center;align-items:center;color:var(--color, var(--pds-context-link-color, var(--pine-color-text)));display:-ms-inline-flexbox;display:inline-flex;font-weight:var(--pine-font-weight-medium)}.pds-link:focus-visible{border-radius:var(--pine-dimension-2xs);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width-thick);position:relative}.pds-link:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:none}:host([color=secondary]) .pds-link{color:var(--pine-color-text-primary)}:host([color=secondary]) .pds-link:hover{color:var(--pine-color-text-inverse-secondary)}:host([color=accent]) .pds-link{color:var(--pine-color-accent)}:host([color=accent]) .pds-link:hover{color:var(--pine-color-accent-hover)}:host([color=danger]) .pds-link{color:var(--pine-color-danger)}:host([color=danger]) .pds-link:hover{color:var(--pine-color-danger-hover)}.pds-link--sm{font-size:var(--pine-font-size-body-xs)}.pds-link--sm pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--md{font-size:var(--pine-font-size-body-sm)}.pds-link--md pds-icon{height:var(--pine-dimension-xs);width:var(--pine-dimension-xs)}.pds-link--lg{font-size:var(--pine-font-size-body-md)}.pds-link--lg pds-icon{height:var(--pine-dimension-sm);width:var(--pine-dimension-sm)}.pds-link--plain{text-decoration:none}.pds-link--plain:hover{color:var(--color, var(--pds-context-link-color-hover, var(--pine-color-text-hover)));text-decoration:underline}:host([active]) .pds-link{color:var(--pds-context-link-color, var(--pine-color-text-strong));text-decoration:underline}:host([active]) .pds-link:hover{color:var(--pds-context-link-color-hover, var(--pine-color-text-strong));text-decoration:underline}`;
 

package/dist/esm/pds-loader.entry.js

@@ -1,10 +1,14 @@
-import { r as registerInstance, h, H as Host } from './index-bLhIfh0N.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-2HMD-zUO.js';
+import { H as HostStylingKeeper } from './attributes-CF5K2pxn.js';
+import { r as restoreReflectedDefault } from './reflected-attribute-default-t3idJwV0.js';
+import './keep-hydrated-Dv7ssOTc.js';
 
 const pdsLoaderCss = () => `:host{--loader-color:var(--pine-color-primary);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-xs)}:host(.pds-loader--hidden),.pds-loader--hidden{border-width:0;clip:rect(0, 0, 0, 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-loader--spinner svg{--number-spinner-timing:2s;--number-spinner-path-timing:1.5s;-webkit-animation:rotate var(--number-spinner-timing) linear infinite;animation:rotate var(--number-spinner-timing) linear infinite;color:var(--loader-color)}.pds-loader__spinner-path{stroke-width:8px}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.pds-loader--typing{--number-typing-timing:1s;--opacity-typing-dot-default:0.4;--opacity-typing-dot-active:1;-ms-flex-align:center;align-items:center;background-color:var(--pine-color-background-muted);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-2xs);margin-block:var(--pine-dimension-none);margin-inline:auto;padding-block:15px;padding-inline:20px;position:relative}.pds-loader--typing span{background-color:var(--pine-color-border-hover);block-size:6px;border-radius:var(--pine-border-radius-full);inline-size:6px;opacity:var(--opacity-typing-dot-default)}.pds-loader--typing span:nth-of-type(1){-webkit-animation:var(--number-typing-timing) typing infinite 0.3333s;animation:var(--number-typing-timing) typing infinite 0.3333s}.pds-loader--typing span:nth-of-type(2){-webkit-animation:var(--number-typing-timing) typing infinite 0.6666s;animation:var(--number-typing-timing) typing infinite 0.6666s}.pds-loader--typing span:nth-of-type(3){-webkit-animation:var(--number-typing-timing) typing infinite 0.9999s;animation:var(--number-typing-timing) typing infinite 0.9999s}@-webkit-keyframes typing{50%{opacity:var(--opacity-typing-dot-active);-webkit-transform:scale(1.25);transform:scale(1.25)}}@keyframes typing{50%{opacity:var(--opacity-typing-dot-active);-webkit-transform:scale(1.25);transform:scale(1.25)}}.pds-loader__label{--typography-label-default:var(--pine-font-weight-medium) var(--pine-font-size-body-md)/var(--pine-line-height-body) var(--pine-font-family-body);font:var(--typography-label-default)}`;
 
 const PdsLoader = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.hostKeeper = new HostStylingKeeper();
         /**
          * If false, the loader will be hidden.
          */
@@ -30,6 +34,15 @@ const PdsLoader = class {
             }
         };
     }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
+    restoreSizeDefault(newValue) {
+        this.size = restoreReflectedDefault(this.el, 'size', newValue, 'md');
+    }
     loaderSize() {
         const sizes = {
             xs: '24px',
@@ -46,8 +59,22 @@ const PdsLoader = class {
         }
     }
     render() {
-        return (h(Host, { key: '173f7ae2d2f49807144df2faa8d8a765f92da235', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (h("div", { key: '05bc278d18ef2470d87676b3a53d691a6a9872dd', class: "pds-loader--spinner" }, h("svg", { key: 'fcfc87492dd5cdbc7bf471089a038bd8b057f6ec', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: 'd9f6aecc7e5a8b03e2d18f79125fd6190b27803c' }, h("linearGradient", { key: '7851a1b709bccac7704b3822e1aae292d3a68e2d', id: "spinner-secondHalf" }, h("stop", { key: '3d4a75792365cad4ea417794dca6c440859f8ce3', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '7287acab80b1ea32f884cf69ceb19989603e0882', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '0ec8d95161c24d14773ebee01c189f269079b79d', id: "spinner-firstHalf" }, h("stop", { key: '2a7cea30b2bf2044a14f29f4d64728150669d048', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: '608bd5cc1c7b9014a5f183d9e06efe4a0c119616', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: '36016dc3bd8a2e4f03f4f287881bfe1b7ce15494', class: "pds-loader__spinner-path" }, h("path", { key: '9410bff29a42cd469ed0f52510a36f7d173b2247', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: '66e8283575e53ca52edd12e95c6545406d39c361', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '1c8a7526bc763ac62f0e8c762ab47cb2bca0ec89', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '2c8f9596beb8010778e0cf79f006970769da9795', class: "pds-loader--typing" }, h("span", { key: '587cd8da845d1223a5e8b2d199d049ccc1ed78aa' }), h("span", { key: '972f7844a5f2469adbb04b15ebf41e49eb5c0354' }), h("span", { key: '575511989d50f6d9436b846cadec1a5a4fa57c1e' }))), h("div", { key: '70f1b43a79a1d2605145a5ea6fe86e0a6059889d', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: '9a981b8530200aa91916017180266edaea6da9ac', name: "label" }, "Loading..."))));
+        const hostClass = `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`;
+        // Explicit 'true': a boolean `true` lands as an empty value, which ARIA reads as unset.
+        const hostAttributes = {
+            'aria-hidden': this.isLoading ? null : 'true',
+            'aria-busy': this.isLoading ? 'true' : null,
+            'aria-live': 'polite',
+        };
+        this.hostKeeper.record(hostClass, {}, hostAttributes);
+        return (h(Host, Object.assign({ key: '81f97b8a6adf4d2c0e5516aa2af9054e200629e1', class: hostClass }, hostAttributes), this.variant === 'spinner' && (h("div", { key: '6e25806c83d6ddeb1141acdd083654867c6ff8a2', class: "pds-loader--spinner" }, h("svg", { key: '4798f27facfcf57da8d408319527fc6083489107', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: '0c64abfabc18ccd51ef41017e088f6ec10736d61' }, h("linearGradient", { key: '3aa61edf6250dc827bf925938b69008860f96596', id: "spinner-secondHalf" }, h("stop", { key: '2693d8a866492ef4ca98cbc4beb5f9f1a34a8b52', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: 'ae229fdc73733e4d6ab15a6663e67b574bd49b40', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '8ddbb46a1a387113d74a82cc4e3e0e9c7e12d573', id: "spinner-firstHalf" }, h("stop", { key: 'd166a3c1ae37c3afa898351683b07f5c4d0ee906', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: 'e4c9790bc9a645d752aa56c238fb8708310208b5', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: '8b3897ff925d4207f9060e2fb69afa657b1b8fe3', class: "pds-loader__spinner-path" }, h("path", { key: '603ef195d1fc64d2059d9fbfeb9b14e2bdb1cabe', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: 'a649ac9538248f5a22d48008377e18f4407efad9', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '37f3772b61d1459959cc4d8c0b5c729dbd6953ff', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: 'e510c2e6498a5542ce6e6573fdc03e8770121cd7', class: "pds-loader--typing" }, h("span", { key: 'bbf4f5a328175f06b221d9abc73118505a09455d' }), h("span", { key: '9a7e80b28e1455ef9d0c1bdb330a6425a3037709' }), h("span", { key: 'f8aa1eb4f822a6d0e2a14a982bbe99866a97815b' }))), h("div", { key: '3492189495798a2ea861d0dcb460f1b25d43d565', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: 'c1a19415b513a2a5f76a53d64b0ef5fbb4a5d100', name: "label" }, "Loading..."))));
     }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "size": [{
+                "restoreSizeDefault": 0
+            }]
+    }; }
 };
 PdsLoader.style = pdsLoaderCss();
 

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

@@ -1,5 +1,6 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-bLhIfh0N.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-2HMD-zUO.js';
 import { u as unwrapReconnectedContent } from './reconnected-content-RFpTWV6r.js';
+import './keep-hydrated-Dv7ssOTc.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%}`;
 
@@ -182,10 +183,10 @@ const PdsModalContent = class {
     render() {
         // Only apply max-height style if it's not 'none'
         const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
-        return (h(Host, { key: '3e8352c946c3646a485ca505e11de3ace3906435' }, h("div", { key: 'd1fb3cb8f2c7ce0c3b19787152d93c1a0ac84b72', class: {
+        return (h(Host, { key: 'f66dbdd08d6af3f87b0a6e8f30e1948b2f674e34' }, h("div", { key: 'ac0469cbfe48002d5bc7f401e0dc30926cfd4421', class: {
                 'pds-modal-content': true,
                 [`pds-modal-content--border-${this.border}`]: true
-            }, style: styleObj, tabindex: "-1" }, h("slot", { key: '6d263b4960a3cffe985ee3af6d6e22e97ded4b7e' }))));
+            }, style: styleObj, tabindex: "-1" }, h("slot", { key: '26a8a45ab4dcd0349da68304fa3cacc64603208a' }))));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,5 +1,6 @@
-import { r as registerInstance, h, a as getElement } from './index-bLhIfh0N.js';
+import { r as registerInstance, h, a as getElement } from './index-2HMD-zUO.js';
 import { u as unwrapReconnectedContent } from './reconnected-content-RFpTWV6r.js';
+import './keep-hydrated-Dv7ssOTc.js';
 
 const pdsModalFooterCss = () => `pds-modal-footer{display:block;width:100%}.pds-modal__footer{width:100%}`;
 
@@ -12,7 +13,7 @@ const PdsModalFooter = class {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
     }
     render() {
-        return (h("footer", { key: 'ed10ed9c8ab3a472ec9e4d20683c4c209877a6c2', class: "pds-modal__footer" }, h("slot", { key: '35765b1624e35dfc540620b7fca20dba3a5c2ca7' })));
+        return (h("footer", { key: '1148892c2d6b9a461f6c04a670fceda76c1be53a', class: "pds-modal__footer" }, h("slot", { key: 'ccd754674c82c415f8c056c9dda6327df35dbd03' })));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,5 +1,6 @@
-import { r as registerInstance, h, a as getElement } from './index-bLhIfh0N.js';
+import { r as registerInstance, h, a as getElement } from './index-2HMD-zUO.js';
 import { u as unwrapReconnectedContent } from './reconnected-content-RFpTWV6r.js';
+import './keep-hydrated-Dv7ssOTc.js';
 
 const pdsModalHeaderCss = () => `pds-modal-header{display:block;width:100%}.pds-modal__header{width:100%}`;
 
@@ -12,7 +13,7 @@ const PdsModalHeader = class {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
     }
     render() {
-        return (h("header", { key: '247373607b807a1428d5b3e7726bd88b6c23776b', class: "pds-modal__header" }, h("slot", { key: '75e7cbf018c82809d23ad4095546af2cd5a01823' })));
+        return (h("header", { key: '030153b84f1ea1cb133c9ccec3ad86583995974f', class: "pds-modal__header" }, h("slot", { key: '3a479e7047f3e845a65c37d60539648c8ff78602' })));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,5 +1,7 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-bLhIfh0N.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-2HMD-zUO.js';
+import { a as closest } from './closest-DHPzKMVS.js';
 import { u as unwrapReconnectedContent } from './reconnected-content-RFpTWV6r.js';
+import './keep-hydrated-Dv7ssOTc.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}`;
 
@@ -7,6 +9,89 @@ 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));
+}
+/** 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) {
+        if (current === ancestor)
+            return true;
+    }
+    return false;
+}
+/** The focused element, followed down through shadow roots to the control that has focus. */
+function deepActiveElement() {
+    var _a;
+    let active = document.activeElement;
+    while ((_a = active === null || active === void 0 ? void 0 : active.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement)
+        active = active.shadowRoot.activeElement;
+    return active;
+}
 const PdsModal = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -126,6 +211,17 @@ const PdsModal = class {
                 // disableTopLayer), so do not trap Tab here.
                 if (this.disableTopLayer)
                     return;
+                // A control inside that handles Tab itself (a popup with its own trap) has already moved
+                // focus. This holds only when it listens on its own element, which runs before this
+                // document listener; one listening on document too would race it.
+                if (e.defaultPrevented)
+                    return;
+                // Every open modal hears this keydown. When focus is in a modal dialog opened above this one,
+                // that dialog traps Tab: this modal's list also holds its controls, so it would wrap first. A
+                // non-modal dialog inside (a disableTopLayer modal) doesn't trap, so this one still does.
+                const activeElement = deepActiveElement();
+                if (!activeElement || this.modalDialogAbove(activeElement))
+                    return;
                 // Content can change while the modal is open (rows fetched in, sections shown), so the
                 // first and last elements are read now rather than from the list taken on opening.
                 this.updateFocusableElements();
@@ -135,13 +231,13 @@ const PdsModal = class {
                 // Get the first and last focusable elements
                 const firstFocusableElement = this.focusableElements[0];
                 const lastFocusableElement = this.focusableElements[this.focusableElements.length - 1];
-                // Get the current active element
-                const activeElement = document.activeElement;
-                // Check if we need to wrap focus
-                const isFirstElement = activeElement === firstFocusableElement ||
-                    firstFocusableElement.contains(activeElement);
-                const isLastElement = activeElement === lastFocusableElement ||
-                    lastFocusableElement.contains(activeElement);
+                // activeElement is the control inside any shadow root, as the list holds, not the host
+                // document.activeElement reports. It's matched to its own stop first, so a stop inside a
+                // listed host isn't taken for that host; a focused node that isn't a stop counts as the
+                // innermost stop it sits in.
+                const stop = this.stopIndex(activeElement);
+                const isFirstElement = stop === 0;
+                const isLastElement = stop === this.focusableElements.length - 1;
                 // If shift + tab is pressed and focus is on the first element, move to the last element
                 if (e.shiftKey && isFirstElement) {
                     e.preventDefault();
@@ -198,23 +294,8 @@ const PdsModal = class {
     updateFocusableElements() {
         if (!this.modalRef)
             return;
-        // Get all focusable elements within the modal
-        const selector = [
-            'a[href]',
-            'button:not([disabled])',
-            'input:not([disabled])',
-            'select:not([disabled])',
-            'textarea:not([disabled])',
-            '[tabindex]:not([tabindex="-1"])',
-            'pds-button:not([disabled])',
-            'pds-link:not([disabled])',
-            'pds-input:not([disabled])',
-            'pds-checkbox:not([disabled])',
-            'pds-radio:not([disabled])',
-            'pds-switch:not([disabled])',
-            'pds-select:not([disabled])',
-        ].join(',');
-        this.focusableElements = Array.from(this.modalRef.querySelectorAll(selector));
+        this.focusableElements = [];
+        collectTabbable(this.modalRef, this.focusableElements);
         // checkVisibility() also drops an element inside a hidden ancestor, whose own computed
         // display isn't none; such an element can't take focus, so it can't anchor the trap.
         this.focusableElements = this.focusableElements.filter(el => {
@@ -223,6 +304,7 @@ const PdsModal = class {
             const style = window.getComputedStyle(el);
             return style.display !== 'none' && style.visibility !== 'hidden';
         });
+        this.focusableElements = oneRadioPerGroup(this.focusableElements);
     }
     /**
      * Sets focus to the first focusable element in the modal
@@ -236,30 +318,11 @@ const PdsModal = class {
         this.focusElement(firstElement);
     }
     /**
-     * Helper method to focus an element, with special handling for web components
+     * Focuses an element from the list. It holds the controls themselves, inside any shadow root,
+     * so they take focus directly.
      */
     focusElement(element) {
-        if (!element)
-            return;
-        try {
-            // Try standard focus first
-            element.focus();
-            // Check if focus worked
-            setTimeout(() => {
-                if (document.activeElement !== element) {
-                    // For web components, try to find a focusable element inside
-                    if (element.shadowRoot) {
-                        const focusableInShadow = element.shadowRoot.querySelector('button, [tabindex], input, a[href]');
-                        if (focusableInShadow) {
-                            focusableInShadow.focus();
-                        }
-                    }
-                }
-            }, 0);
-        }
-        catch (error) {
-            console.error('Error focusing element:', error);
-        }
+        element === null || element === void 0 ? void 0 : element.focus();
     }
     /**
      * Opens the modal
@@ -422,6 +485,30 @@ const PdsModal = class {
         const thisZIndex = this.getBackdropZIndex(this.el);
         return thisZIndex === maxZIndex;
     }
+    /** Whether a modal dialog other than this one sits between the focused element and this modal. */
+    modalDialogAbove(active) {
+        var _a;
+        for (let dialog = closest('dialog[open]', active); dialog instanceof HTMLElement;) {
+            if (dialog === this.modalRef)
+                return false;
+            if (dialog.matches(':modal'))
+                return true;
+            // Up from this dialog, across a shadow root; past the document root, closest() gives nothing.
+            dialog = closest('dialog[open]', (_a = dialog.parentElement) !== null && _a !== void 0 ? _a : dialog.getRootNode().host);
+        }
+        return false;
+    }
+    /** The focused element's place in the list: its own stop, or the innermost stop it sits in. */
+    stopIndex(active) {
+        const own = this.focusableElements.indexOf(active);
+        if (own >= 0)
+            return own;
+        for (let i = this.focusableElements.length - 1; i >= 0; i--) {
+            if (containsComposed(this.focusableElements[i], active))
+                return i;
+        }
+        return -1;
+    }
     resolveSize() {
         var _a;
         const size = ((_a = this.size) !== null && _a !== void 0 ? _a : '').trim() || 'md';
@@ -436,14 +523,14 @@ const PdsModal = class {
     }
     render() {
         const [sizeClass = 'md', customSize] = this.resolveSize();
-        return (h("dialog", { key: 'aa352ccc057e4d6183f8c17349bc71857208a928', class: {
+        return (h("dialog", { key: 'b6714c7e77d80bf2370f2170ffce029abe147d81', class: {
                 'pds-modal__backdrop': true,
                 'open': this.open
-            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: '12799824edbeea42a6f7f91e0172c6ecbde93337', class: {
+            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: '8c3319f53dd8c79c9e952785277e9e82e28b651e', 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: 'f517c6466d65f141fba2d41cfe36d1b8d5f29930' }))));
+            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, h("slot", { key: '8c6f9cc1a20b515659344ad041512de52761800d' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,9 +1,10 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-bLhIfh0N.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-2HMD-zUO.js';
 import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift, b as size } from './floating-ui.dom-BPqJgIq6.js';
 import { c as cancelDebouncedEvent, d as debounceEvent, f as flushDebouncedEvent } from './utils-OYK5-nwe.js';
 import { i as isSpecTest, a as assignDescription, m as messageId } from './form-BuRbS7Hp.js';
 import { e as enlarge, b as danger } from './index-DxI-61GK.js';
 import { f as formatMessage, p as pluralize } from './i18n-format-BJgZHCWe.js';
+import './keep-hydrated-Dv7ssOTc.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{pointer-events:none;width:100%}.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}`;