@pine-ds/core 4.2.0 → 4.4.0

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-CTLu1TM4.js';
+import { r as registerInstance, h, H as Host } from './index-CB8Yh0Nt.js';
 
 const pdsDividerCss = () => `.pds-divider{background:var(--pine-color-border);border:0;display:-ms-flexbox;display:flex;height:var(--pine-border-width);margin:0;width:100%}.pds-divider--vertical{height:100%;width:1px}.pds-divider--labeled{-ms-flex-align:center;align-items:center;background:none;color:var(--pine-color-text);font:var(--pine-typography-body-sm-medium);gap:var(--pine-dimension-sm);height:auto;width:auto}.pds-divider--labeled::before,.pds-divider--labeled::after{background:var(--pine-color-border);content:"";-ms-flex:1;flex:1;height:var(--pine-border-width)}.pds-divider__label{text-align:center}.pds-divider--offset-xxs{margin:0 calc(var(--pine-dimension-2xs) * -1);padding:0 var(--pine-dimension-2xs)}.pds-divider--offset-xxs.pds-divider--vertical{margin:calc(var(--pine-dimension-2xs) * -1) 0;padding:var(--pine-dimension-2xs) 0}.pds-divider--offset-xxs.pds-divider--labeled{padding:0}.pds-divider--offset-xs{margin:0 calc(var(--pine-dimension-xs) * -1);padding:0 var(--pine-dimension-xs)}.pds-divider--offset-xs.pds-divider--vertical{margin:calc(var(--pine-dimension-xs) * -1) 0;padding:var(--pine-dimension-xs) 0}.pds-divider--offset-xs.pds-divider--labeled{padding:0}.pds-divider--offset-sm{margin:0 calc(var(--pine-dimension-sm) * -1);padding:0 var(--pine-dimension-sm)}.pds-divider--offset-sm.pds-divider--vertical{margin:calc(var(--pine-dimension-sm) * -1) 0;padding:var(--pine-dimension-sm) 0}.pds-divider--offset-sm.pds-divider--labeled{padding:0}.pds-divider--offset-md{margin:0 calc(var(--pine-dimension-md) * -1);padding:0 var(--pine-dimension-md)}.pds-divider--offset-md.pds-divider--vertical{margin:calc(var(--pine-dimension-md) * -1) 0;padding:var(--pine-dimension-md) 0}.pds-divider--offset-md.pds-divider--labeled{padding:0}.pds-divider--offset-lg{margin:0 calc(var(--pine-dimension-lg) * -1);padding:0 var(--pine-dimension-lg)}.pds-divider--offset-lg.pds-divider--vertical{margin:calc(var(--pine-dimension-lg) * -1) 0;padding:var(--pine-dimension-lg) 0}.pds-divider--offset-lg.pds-divider--labeled{padding:0}.pds-divider--offset-xl{margin:0 calc(var(--pine-dimension-xl) * -1);padding:0 var(--pine-dimension-xl)}.pds-divider--offset-xl.pds-divider--vertical{margin:calc(var(--pine-dimension-xl) * -1) 0;padding:var(--pine-dimension-xl) 0}.pds-divider--offset-xl.pds-divider--labeled{padding:0}.pds-divider--offset-xxl{margin:0 calc(var(--pine-dimension-2xl) * -1);padding:0 var(--pine-dimension-2xl)}.pds-divider--offset-xxl.pds-divider--vertical{margin:calc(var(--pine-dimension-2xl) * -1) 0;padding:var(--pine-dimension-2xl) 0}.pds-divider--offset-xxl.pds-divider--labeled{padding:0}@media (max-width: 767px){.pds-divider--vertical{display:none}}`;
 
@@ -30,7 +30,7 @@ const PdsDivider = class {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: 'c6f887ca1f68c8e572bd518c43d88f052f6d9dd1', id: this.componentId }, this.hasLabel ? (h("div", { class: this.classNames(), role: "separator", "aria-label": this.label }, h("span", { class: "pds-divider__label", part: "label", "aria-hidden": "true" }, this.label))) : (h("hr", { class: this.classNames() }))));
+        return (h(Host, { key: '072cc8552bd33c4a00d216f15a5a848cfc97fd92', id: this.componentId }, this.hasLabel ? (h("div", { class: this.classNames(), role: "separator", "aria-label": this.label }, h("span", { class: "pds-divider__label", part: "label", "aria-hidden": "true" }, this.label))) : (h("hr", { class: this.classNames() }))));
     }
 };
 PdsDivider.style = pdsDividerCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as getElement } from './index-CTLu1TM4.js';
+import { r as registerInstance, h, a as getElement } from './index-CB8Yh0Nt.js';
 import { u as unwrapReconnectedContent } from './reconnected-content-RFpTWV6r.js';
 
 const pdsDrawerContentCss = () => `pds-drawer-content{display:block;-ms-flex:1 1 auto;flex:1 1 auto;min-height:0;width:100%}.pds-drawer-content{-webkit-box-sizing:border-box;box-sizing:border-box;display:block;height:100%;padding:var(--pine-dimension-md);width:100%}.pds-modal--scrollable pds-drawer-content{overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-drawer-content{overflow-y:visible}`;
@@ -12,7 +12,7 @@ const PdsDrawerContent = class {
         unwrapReconnectedContent(this.el.querySelector('.pds-drawer-content'), '.pds-drawer-content');
     }
     render() {
-        return (h("div", { key: '432db626c93ab42365ec1af83562eec7ae1c4674', class: "pds-drawer-content" }, h("slot", { key: '901ab074f31726023add709a4953bddb43842de2' })));
+        return (h("div", { key: 'b4b41258eccaae8e0a9df90a75fb30d65a7ac9c4', class: "pds-drawer-content" }, h("slot", { key: 'ef90ed5b3f84b51a2938e1d8fd021b971c1c0de9' })));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as getElement } from './index-CTLu1TM4.js';
+import { r as registerInstance, h, a as getElement } from './index-CB8Yh0Nt.js';
 import { u as unwrapReconnectedContent } from './reconnected-content-RFpTWV6r.js';
 
 const pdsDrawerFooterCss = () => `pds-drawer-footer{display:block;-ms-flex:0 0 auto;flex:0 0 auto;width:100%}.pds-drawer__footer{-webkit-border-before:1px solid var(--pine-color-border-subtle);border-block-start:1px solid var(--pine-color-border-subtle);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-sm);-ms-flex-pack:end;justify-content:flex-end;padding:var(--pine-dimension-md);width:100%}`;
@@ -12,7 +12,7 @@ const PdsDrawerFooter = class {
         unwrapReconnectedContent(this.el.querySelector('.pds-drawer__footer'), '.pds-drawer__footer');
     }
     render() {
-        return (h("footer", { key: '71cb35f7b1ccba9e4187eb8942771741f13510dc', class: "pds-drawer__footer" }, h("slot", { key: '28927c76ee8194c44f416ee5d4e9ea2e0376bf5a' })));
+        return (h("footer", { key: '383f7cb7a95a71bd03b2e328cd4b41117e17c631', class: "pds-drawer__footer" }, h("slot", { key: 'e9e9b6c7fef502c8004223bc8611e8d798ecb966' })));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as getElement } from './index-CTLu1TM4.js';
+import { r as registerInstance, h, a as getElement } from './index-CB8Yh0Nt.js';
 import { u as unwrapReconnectedContent } from './reconnected-content-RFpTWV6r.js';
 
 const pdsDrawerHeaderCss = () => `pds-drawer-header{display:block;-ms-flex:0 0 auto;flex:0 0 auto;width:100%}.pds-drawer__header{-ms-flex-align:center;align-items:center;-webkit-border-after:1px solid var(--pine-color-border-subtle);border-block-end:1px solid var(--pine-color-border-subtle);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-md);width:100%}`;
@@ -12,7 +12,7 @@ const PdsDrawerHeader = class {
         unwrapReconnectedContent(this.el.querySelector('.pds-drawer__header'), '.pds-drawer__header');
     }
     render() {
-        return (h("header", { key: '48d0585e0e20c9d3142635f0fc0184c0803413b8', class: "pds-drawer__header" }, h("slot", { key: '14d9d0bde0116c81892140b22a2b6e9a2b1d969f' })));
+        return (h("header", { key: '5524b12af7c07d322ebd6726bd1a28320a838e77', class: "pds-drawer__header" }, h("slot", { key: '8212060c5c48a53d05d320bb625ce2b6dce7c6c3' })));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,7 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CTLu1TM4.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CB8Yh0Nt.js';
+import { c as containsComposed, a as closest } from './closest-DHPzKMVS.js';
 import { u as unwrapReconnectedContent } from './reconnected-content-RFpTWV6r.js';
 
-const pdsDrawerCss = () => `.pds-drawer__modal>.pds-modal__backdrop{-ms-flex-align:stretch;align-items:stretch;background-color:transparent;pointer-events:none}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-drawer__modal>.pds-modal__backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}}.pds-drawer__modal>.pds-modal__backdrop>.pds-modal{border-radius:0;height:100%;margin:0;max-height:100%;max-width:100%;pointer-events:auto;width:var(--pds-drawer-width, 500px)}.pds-drawer{display:contents}.pds-drawer.pds-drawer--end .pds-drawer__modal>.pds-modal__backdrop{-ms-flex-pack:end;justify-content:flex-end}.pds-drawer.pds-drawer--start .pds-drawer__modal>.pds-modal__backdrop{-ms-flex-pack:start;justify-content:flex-start}.pds-drawer.pds-drawer--sm{--pds-drawer-width:360px}.pds-drawer.pds-drawer--md{--pds-drawer-width:500px}`;
+const pdsDrawerCss = () => `.pds-drawer__modal>.pds-modal__backdrop{-ms-flex-align:stretch;align-items:stretch;background-color:transparent;pointer-events:none}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-drawer__modal>.pds-modal__backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}}.pds-drawer__modal>.pds-modal__backdrop[aria-modal]::before{content:none}.pds-drawer__modal>.pds-modal__backdrop>.pds-modal{border-radius:0;height:100%;margin:0;max-height:100%;max-width:100%;pointer-events:auto;width:var(--pds-drawer-width, 500px)}.pds-drawer{display:contents}.pds-drawer.pds-drawer--end .pds-drawer__modal>.pds-modal__backdrop{-ms-flex-pack:end;justify-content:flex-end}.pds-drawer.pds-drawer--start .pds-drawer__modal>.pds-modal__backdrop{-ms-flex-pack:start;justify-content:flex-start}.pds-drawer.pds-drawer--sm{--pds-drawer-width:360px}.pds-drawer.pds-drawer--md{--pds-drawer-width:500px}`;
 
 // Known selectors for content Pine components portal to document.body rather
 // than rendering in place — pds-popover, pds-tooltip, pds-combobox's dropdown.
@@ -111,6 +112,12 @@ const PdsDrawer = class {
             return;
         if (target.closest(PORTALED_OVERLAY_SELECTOR))
             return;
+        // A datepicker's portaled calendar counts as inside only when its datepicker is in the drawer,
+        // or in an overlay portaled from it (a pds-popover in the drawer puts its content on the body).
+        const calendar = target.closest('.pds-datepicker-calendar-portal');
+        const owner = calendar === null || calendar === void 0 ? void 0 : calendar.pdsDatepicker;
+        if (owner && (containsComposed(this.el, owner) || closest(PORTALED_OVERLAY_SELECTOR, owner)))
+            return;
         // A sibling pds-modal — e.g. a confirm dialog opened from inside the
         // drawer but mounted at the document root rather than nested in our own
         // content — is neither a descendant of the drawer nor on the portaled
@@ -122,11 +129,11 @@ const PdsDrawer = class {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '66e16ca7704243e8bb98002f042fa073ec43c38b', class: {
+        return (h(Host, { key: '0ca6f9e5c49323c0b72c6338ecd172262afdd999', class: {
                 'pds-drawer': true,
                 [`pds-drawer--${this.side}`]: true,
                 [`pds-drawer--${this.size}`]: true,
-            } }, h("pds-modal", { key: 'b52b8cb1892d52113920ab27344d9a969e6365b6', class: "pds-drawer__modal", ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: true, backdropDismiss: this.lightDismiss, disableInitialFocus: this.initialFocus === 'none' }, h("slot", { key: 'c9ce43ca12a06c550bd130a0fa7572dec22c9c92' }))));
+            } }, h("pds-modal", { key: '5b87fdc3aaedaa7cc7efe43482314dae8621d8c6', class: "pds-drawer__modal", ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: true, backdropDismiss: this.lightDismiss, disableInitialFocus: this.initialFocus === 'none' }, h("slot", { key: 'dde3adec14308881defd57f75df9393bf9f9f48f' }))));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CTLu1TM4.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CB8Yh0Nt.js';
 
 const pdsDropdownMenuItemCss = () => `:host{cursor:pointer;display:-ms-flexbox;display:flex;width:100%;}:host(.is-disabled){cursor:not-allowed !important;opacity:0.5 !important}:host(.is-disabled) .pds-dropdown-menu-item__content{cursor:not-allowed !important;pointer-events:none !important}.pds-dropdown-menu-item__content{-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);color:var(--pine-color-text);display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);margin:calc(var(--pine-border-width) + 2px);padding:var(--pine-dimension-xs);text-align:start;width:100%;}.pds-dropdown-menu-item__content:hover{background-color:var(--pine-color-background-muted);color:var(--pine-color-text-hover)}.pds-dropdown-menu-item__content{}.pds-dropdown-menu-item__content:focus,.pds-dropdown-menu-item__content:focus-visible,.pds-dropdown-menu-item__content.has-focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}:host(.destructive) .pds-dropdown-menu-item__content{--pds-context-link-color:var(--pine-color-danger);--pds-context-link-color-hover:var(--pine-color-danger-hover);-ms-flex-align:center;align-items:center;color:var(--pine-color-danger)}:host(.destructive) .pds-dropdown-menu-item__content:hover{background-color:var(--pine-color-danger-disabled);color:var(--pine-color-danger-hover)}:host(.destructive) .pds-dropdown-menu-item__content:focus,:host(.destructive) .pds-dropdown-menu-item__content:focus-visible,:host(.destructive) .pds-dropdown-menu-item__content.has-focus{background-color:var(--pine-color-danger-disabled);outline:var(--pine-outline-focus-danger);outline-offset:var(--pine-border-width)}pds-link::part(link):focus,pds-link::part(link):focus-visible{-webkit-box-shadow:none;box-shadow:none;outline:none}pds-link::part(link){-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);margin:calc(var(--pine-dimension-xs) * -1);padding:var(--pine-dimension-xs);text-decoration:none;width:calc(100% + var(--pine-dimension-xs) * 2)}`;
 
@@ -74,7 +74,7 @@ const PdsDropdownMenuItem = class {
             }, tabIndex: this.disabled ? -1 : 0, type: "button", part: "button", onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null }, h("slot", null)));
     }
     render() {
-        return (h(Host, { key: '2fd3c925ba2f1ead6d0a23c44ac87449e8dad521', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
+        return (h(Host, { key: 'cf22f97df3869d59820ba0deff9a21bfee2628b8', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
     }
     get host() { return getElement(this); }
 };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-CTLu1TM4.js';
+import { r as registerInstance, h, H as Host } from './index-CB8Yh0Nt.js';
 
 const pdsDropdownMenuSeparatorCss = () => `:host hr{border:0;border-top:var(--pine-border-width-thin) solid var(--pine-color-border);height:0;margin-block:var(--pine-dimension-xs);margin-inline:calc(var(--pine-dimension-xs) * -1)}`;
 
@@ -12,7 +12,7 @@ const PdsDropdownMenuSeparator = class {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: 'f55fc3b23a6ccb94a7ce865189e5d65abdd97d8c', id: this.componentId }, h("hr", { key: '784a1480881a27aec69c0a2b0afd06f103912544' })));
+        return (h(Host, { key: '63bd5fd3112b1030d1e86b331a659ab3a92dd387', id: this.componentId }, h("hr", { key: '0a8504d34a9b91db03abdddd86ce918c00534410' })));
     }
 };
 PdsDropdownMenuSeparator.style = pdsDropdownMenuSeparatorCss();

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-CTLu1TM4.js';
-import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift } from './floating-ui.dom-DDtwbwIl.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-CB8Yh0Nt.js';
+import { a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift } from './floating-ui.dom-BPqJgIq6.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}`;
 
@@ -94,7 +94,9 @@ const PdsDropdownMenu = class {
             // Reset focus index
             this.currentFocusIndex = -1;
             // Return focus to trigger
-            this.triggerEl.focus();
+            if (this.isFocusInMenu()) {
+                this.triggerEl.focus();
+            }
         };
         // Handle click on the trigger element
         this.handleClick = () => {
@@ -112,6 +114,11 @@ const PdsDropdownMenu = class {
             this.cleanupAutoUpdate = null;
         }
     }
+    // Outside clicks and scripted closes leave focus where it is; only focus in the menu or on its trigger returns.
+    isFocusInMenu() {
+        const focused = this.host.getRootNode().activeElement;
+        return focused != null && this.host.contains(focused);
+    }
     // Check if a menu item is disabled (handles both component and raw elements)
     isItemDisabled(item) {
         const tagName = item.tagName.toLowerCase();
@@ -307,7 +314,7 @@ const PdsDropdownMenu = class {
         }
     }
     render() {
-        return (h(Host, { key: '7907da6a04530d01bbbd0256f0b609fa53e0a774', id: this.componentId }, h("slot", { key: '2bf060c4dec082d4175a7cde759221fd4b20d706', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: '0d81eddee58fda631eb6a39cba0e7ad0d69c02d8', "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: '831485d66af711edc9491078827455762795bb64', onSlotchange: this.handleSlotChange }))));
+        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 }))));
     }
     get host() { return getElement(this); }
 };

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CTLu1TM4.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CB8Yh0Nt.js';
 import { i as isRtlDirection } from './scroll-DtgUQhjl.js';
-import { t as trash, e as enlarge } from './index-DdPaBxPo.js';
+import { t as trash, e as enlarge } from './index-DxI-61GK.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)))}}`;
 
@@ -478,7 +478,7 @@ const PdsFilter = class {
         return null;
     }
     render() {
-        return (h(Host, { key: 'bd03de5e8461e3aba4d6f014e2d64d9aada0c0e1', id: this.componentId }, h("button", { key: 'f35cb4aec14b1ed3b61d33c412cbfc89ba19cba3', class: this.getTriggerClasses(), type: "button", popoverTarget: this.variant !== 'clear' ? `${this.componentId}-popover` : undefined, popoverTargetAction: this.variant !== 'clear' ? 'toggle' : undefined, onKeyDown: this.variant === 'clear' ? this.handleKeyDown : undefined, onClick: (event) => this.handleClick(event), part: "button", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": this.variant !== 'clear' ? 'true' : undefined, "aria-controls": this.variant !== 'clear' ? `${this.componentId}-popover` : undefined }, h("span", { key: 'b3635542048ac52d290917260181d7313eddaff2', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (h("span", { key: '0c5ef7f7655ddbee33a695703ce192f082b21bf1', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (h("div", { key: 'e75c75d8e9e4596d7f0642e4e1f91deae3f2b9fa', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, h("slot", { key: 'bef66af716be823ed3ac36d39a4532785df07f6b' })))));
+        return (h(Host, { key: '4abb55453c9ab4cd49b21a23047aa5ee4ab70056', id: this.componentId }, h("button", { key: 'e6b6bd81ca3f9d23f490219cf8e81f0bdf511798', class: this.getTriggerClasses(), type: "button", popoverTarget: this.variant !== 'clear' ? `${this.componentId}-popover` : undefined, popoverTargetAction: this.variant !== 'clear' ? 'toggle' : undefined, onKeyDown: this.variant === 'clear' ? this.handleKeyDown : undefined, onClick: (event) => this.handleClick(event), part: "button", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": this.variant !== 'clear' ? 'true' : undefined, "aria-controls": this.variant !== 'clear' ? `${this.componentId}-popover` : undefined }, h("span", { key: '4cea081451f50508cef36e90d4c88cbd94933287', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (h("span", { key: '479f84087e7969fa555475b240f5e70ce5bcf136', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (h("div", { key: '85aec3d5d7b33a0cfb3602412238830929902eb1', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, h("slot", { key: 'ede4c3866bfdce974e0d21c6e6a3ae22aee47d2c' })))));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-CTLu1TM4.js';
+import { r as registerInstance, h, H as Host } from './index-CB8Yh0Nt.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)}`;
 
@@ -7,7 +7,7 @@ const PdsFilters = class {
         registerInstance(this, hostRef);
     }
     render() {
-        return (h(Host, { key: '492357b36ec8ca8552f76aea6a4e4baf01ee92d5', id: this.componentId }, h("div", { key: 'fbf56c5452b4b0627a95008a601ccd6ace59417c', class: "pds-filters" }, h("slot", { key: 'c0e1d6b7b86ff39425d26dc75bf950283a371f71' }))));
+        return (h(Host, { key: '5587c41a5ca93cc48399d7c1af0762d4a3516b4d', id: this.componentId }, h("div", { key: '43ee499b9c3f49b52cf18beee8ac5cf97b8ad49a', class: "pds-filters" }, h("slot", { key: '79a452042d7aa7e0492d80fd773f71fb820c2211' }))));
     }
 };
 PdsFilters.style = pdsFiltersCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-CTLu1TM4.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-CB8Yh0Nt.js';
 
 let missingAssetPathWarning = false;
 /**
@@ -22,7 +22,7 @@ const getAssetPath = (path) => {
     if (assetBasePath.startsWith('https://cdn.jsdelivr.net/npm/') && !missingAssetPathWarning) {
         missingAssetPathWarning = true;
         console.warn(`
-      Fetching Pine assets from jsDelivr CDN.\n\n It's recommended that you bundle Pine Assets with your application and set the path accordingly.\n\nFor more information, read the documentation: \nhttps://pine-design-system.netlify.app/?path=/docs/resources-assets--docs
+      Fetching Pine assets from jsDelivr CDN.\n\n It's recommended that you bundle Pine Assets with your application and set the path accordingly.\n\nFor more information, read the documentation: \nhttps://pine-design-system.netlify.app/?path=/docs/guides-assets--docs
     `);
     }
     let assetPath = path;

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-CTLu1TM4.js';
+import { r as registerInstance, h, H as Host } from './index-CB8Yh0Nt.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%}`;
 
@@ -19,9 +19,9 @@ const PdsImage = class {
         this.loading = 'eager';
     }
     render() {
-        return (h(Host, { key: '0c0f463a1b616ccc485b8086a0210c5d9d2b065c', class: {
+        return (h(Host, { key: 'fff1a796e59b8e666069e56390e174d7d2861f03', class: {
                 'pds-image': true,
-            }, id: this.componentId }, h("img", { key: '2ac4ef66ebbb39d488ce68f06b590a5fad180811', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
+            }, id: this.componentId }, h("img", { key: 'dbeda9da5adca51c58ec5a807cde673d6b479d0f', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
     }
 };
 PdsImage.style = pdsImageCss();

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

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CTLu1TM4.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-CB8Yh0Nt.js';
 import { i as isSpecTest, a as assignDescription, m as messageId } from './form-BuRbS7Hp.js';
 import { i as inheritAriaAttributes } from './attributes-C0M1gTKv.js';
-import { d as debounceEvent } from './utils-tJa4KYNO.js';
-import { b as danger } from './index-DdPaBxPo.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';
 
 const pdsInputTokensCss = () => `:host{--pine-input-color-background-danger:var(--pine-color-red-050)}`;
 
@@ -187,6 +187,7 @@ const PdsInput = class {
     }
     disconnectedCallback() {
         var _a;
+        cancelDebouncedEvent(this.pdsInput);
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.resizeObserver = undefined;
     }
@@ -205,6 +206,8 @@ const PdsInput = class {
          * debounce used to be set to a number. Otherwise, the event would stay debounced.
          */
         this.pdsInput = debounce === undefined ? originalPdsInput !== null && originalPdsInput !== void 0 ? originalPdsInput : pdsInput : debounceEvent(pdsInput, debounce);
+        // After the swap, so an emit made while flushing goes to the new emitter, not the old one.
+        flushDebouncedEvent(pdsInput);
     }
     valueChanged() {
         const nativeInput = this.nativeInput;
@@ -292,10 +295,10 @@ const PdsInput = class {
             'has-prepend': this.hasPrepend,
             'has-append': this.hasAppend,
         };
-        return (h(Host, { key: 'b67b80853cbf1f1e84c3ce6d2ff7e63f480c5b8d', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-prefix": this.hasPrefix ? 'true' : null, "has-suffix": this.hasSuffix ? 'true' : null, "has-prepend": this.hasPrepend ? 'true' : null, "has-append": this.hasAppend ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null, "full-width": this.fullWidth ? 'true' : null }, h("div", { key: '27a60a963cfa1a96391b55800eba27743a2527f4', class: "pds-input" }, label && (h("div", { key: '3f8ce2b254feea4b6fe9ea74318f1e6c27a75927', class: {
+        return (h(Host, { key: '8c0829cc3502e5fa1fe52584d84b9345fcb0f3fd', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-prefix": this.hasPrefix ? 'true' : null, "has-suffix": this.hasSuffix ? 'true' : null, "has-prepend": this.hasPrepend ? 'true' : null, "has-append": this.hasAppend ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null, "full-width": this.fullWidth ? 'true' : null }, h("div", { key: 'cf754e6fc72d2cf900e541a469a8e0ba62851538', class: "pds-input" }, label && (h("div", { key: 'f55793898eb2840322ec9a79daed186420ef0d90', class: {
                 'pds-input__label-wrapper': true,
                 'visually-hidden': this.hideLabel,
-            } }, h("label", { key: '1c290cde5a9100b11fe3059725866506d089e834', htmlFor: componentId, class: "pds-input__label" }, h("span", { key: '2ebc8dafa48d6d855be5b8e1aa3bdd417d6250f3' }, label, this.required && h("span", { key: '73f7d22b13739daff6aa104c140208c5b1a86d10', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), h("div", { key: '4ea0b3335abbdf920ca064aa5866a060ef18c2ad', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), h("input", Object.assign({ key: '4acf340fdcf40968e9c46b6a240f8a9008998c11', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage, errorMessage), "aria-invalid": invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: disabled, id: componentId, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onKeyDown: this.onKeyDownEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.renderSuffix(), this.renderAppend()), helperMessage && (h("p", { key: 'f1969fe3a5f3aba65f44fcdaddd5a12d90db7fb1', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (h("p", { key: 'd4df1ceff95d5db7f2d927e9fcb848444570f9a2', class: "pds-input__error-message", id: messageId(componentId, 'error') }, h("pds-icon", { key: 'f69182919903aab42b7641d9a0082861f551a214', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
+            } }, h("label", { key: '2a7deac2a9443b1a648133a799b69414b96314e3', htmlFor: componentId, class: "pds-input__label" }, h("span", { key: '75dc7787e0132c4f62272307867a8066f9cf6ce2' }, label, this.required && h("span", { key: 'c7c413addd2b3f275031596598b030c02f647969', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), h("div", { key: 'eaf09d07c4fbc84ef835d2c7b4f00e252394f5ed', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), h("input", Object.assign({ key: 'dca2390b44e430f0ab1d29daa4ce630ac3b12881', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": assignDescription(componentId, invalid, helperMessage, errorMessage), "aria-invalid": invalid ? "true" : undefined, autocomplete: this.autocomplete, disabled: disabled, id: componentId, max: this.max, maxlength: this.maxlength, min: this.min, minlength: this.minlength, name: this.name, pattern: this.pattern, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, step: this.step, type: this.type, value: value, onInput: this.onInputEvent, onChange: this.onChangeEvent, onBlur: this.onBlurEvent, onFocus: this.onFocusEvent, onKeyDown: this.onKeyDownEvent, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd }, this.inheritedAttributes)), this.renderSuffix(), this.renderAppend()), helperMessage && (h("p", { key: '0bd7859f44185ed0c1478833518cb5829ffea4ad', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (h("p", { key: 'c40016f5bb03e292e01430c2940aff0ebb98abb5', class: "pds-input__error-message", id: messageId(componentId, 'error') }, h("pds-icon", { key: '54985d775ddf951b50cae4796b7847e98de7434f', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h } from './index-CTLu1TM4.js';
-import { s as setColor } from './utils-tJa4KYNO.js';
-import { l as launch } from './index-DdPaBxPo.js';
+import { r as registerInstance, h } from './index-CB8Yh0Nt.js';
+import { s as setColor } from './utils-OYK5-nwe.js';
+import { l as launch } from './index-DxI-61GK.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}`;
 
@@ -56,8 +56,8 @@ const PdsLink = class {
         const targetValue = this.target || (this.external ? '_blank' : undefined);
         const showExternalIcon = this.external;
         const relValue = targetValue === '_blank' ? 'noopener noreferrer' : undefined;
-        return (h("a", { key: '9e2d6cc4f2697bd11db4fd7ddd6f9e42ef28cf8c', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, h("slot", { key: 'f48dd74f1921400553845ea3b03720749b1a6737' }, this.href), showExternalIcon &&
-            h("pds-icon", { key: '299d4f31ec32b614fd9f4d1c19acae63ee7a9169', icon: launch, size: this.fontSize })));
+        return (h("a", { key: '4757dc775fb132ea1fed93fed8e3cd18c77d45af', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, h("slot", { key: '88e5a1ef3b0fc384f7449979029fa45c627aab99' }, this.href), showExternalIcon &&
+            h("pds-icon", { key: '6f1b9cf0dab342ea09c1f52c605228ef4d04f829', icon: launch, size: this.fontSize })));
     }
 };
 PdsLink.style = pdsLinkCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-CTLu1TM4.js';
+import { r as registerInstance, h, H as Host } from './index-CB8Yh0Nt.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)}`;
 
@@ -46,7 +46,7 @@ const PdsLoader = class {
         }
     }
     render() {
-        return (h(Host, { key: 'ce5b09477f57aad1a09ce3a38b81b64f673944b2', 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: 'd193dfdaa527debff73705cef65e3d7f7a9a69ae', class: "pds-loader--spinner" }, h("svg", { key: 'c881ff2ee1d5d92ac55300bd13e9d066f7a3970f', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, h("defs", { key: '998920cdc820cc4e60df39bda5707e0b6bd5d0fe' }, h("linearGradient", { key: '02028f6ac070703f8b96b1723c4d2c07670e73bb', id: "spinner-secondHalf" }, h("stop", { key: 'b3120c2a597d8f646e791b1ac09a262486fb29cc', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), h("stop", { key: '932056b587b5e3191952506d9411c68375af6620', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), h("linearGradient", { key: '14540856cb968c220f71537c012a8c415d39af85', id: "spinner-firstHalf" }, h("stop", { key: 'c94d634b1dffa0c5301b8cb2c0b6e81fdb34429e', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), h("stop", { key: 'b6477c000c01728a60a7fd8e182f24da4b554128', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), h("g", { key: '810f7c7bcd8e33bd2bed70932ed174eef48ae711', class: "pds-loader__spinner-path" }, h("path", { key: '4e54f348c563cca7e14790a34a58dacbda452824', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), h("path", { key: '3968c60f27ec619aabc74a278026abdd94d4510f', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), h("path", { key: '171fe08e0aec1f207704a0395388ccc57ea045d4', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (h("div", { key: '60cf0b871807eb49ce73d3e63f00f5914c9c9eec', class: "pds-loader--typing" }, h("span", { key: 'dfbdcc1fe558803d39caa56bb57763269c061661' }), h("span", { key: '0c343f36a8d71bdc07306b3c879016686da94199' }), h("span", { key: 'f2a30e560ef0c9ac26c596dbaad33eeb0e4f7ff3' }))), h("div", { key: '0fa18b15a3962df872fd28136caf258cd09cafdb', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, h("slot", { key: 'e8eabec0c6d24d3ad962ecee9e0ed6e0e0b4adc0', name: "label" }, "Loading..."))));
+        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..."))));
     }
 };
 PdsLoader.style = pdsLoaderCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-CTLu1TM4.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-CB8Yh0Nt.js';
 import { u as unwrapReconnectedContent } from './reconnected-content-RFpTWV6r.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 +182,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: '7bd0f26425c71e4551ae21e38d57d2124dabfc50' }, h("div", { key: '120e6947e734e44883af975991781f338acd7dbc', class: {
+        return (h(Host, { key: '3e8352c946c3646a485ca505e11de3ace3906435' }, h("div", { key: 'd1fb3cb8f2c7ce0c3b19787152d93c1a0ac84b72', class: {
                 'pds-modal-content': true,
                 [`pds-modal-content--border-${this.border}`]: true
-            }, style: styleObj, tabindex: "-1" }, h("slot", { key: '6f2c8d44a69df8ecc1214e00604023274cee2790' }))));
+            }, style: styleObj, tabindex: "-1" }, h("slot", { key: '6d263b4960a3cffe985ee3af6d6e22e97ded4b7e' }))));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as getElement } from './index-CTLu1TM4.js';
+import { r as registerInstance, h, a as getElement } from './index-CB8Yh0Nt.js';
 import { u as unwrapReconnectedContent } from './reconnected-content-RFpTWV6r.js';
 
 const pdsModalFooterCss = () => `pds-modal-footer{display:block;width:100%}.pds-modal__footer{width:100%}`;
@@ -12,7 +12,7 @@ const PdsModalFooter = class {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
     }
     render() {
-        return (h("footer", { key: 'f344716ed1fbd77b447e10c9b78565918dc17be0', class: "pds-modal__footer" }, h("slot", { key: 'ba85cf6f7f56c8f8a8ff6d24c5fa647722140fda' })));
+        return (h("footer", { key: 'ed10ed9c8ab3a472ec9e4d20683c4c209877a6c2', class: "pds-modal__footer" }, h("slot", { key: '35765b1624e35dfc540620b7fca20dba3a5c2ca7' })));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, a as getElement } from './index-CTLu1TM4.js';
+import { r as registerInstance, h, a as getElement } from './index-CB8Yh0Nt.js';
 import { u as unwrapReconnectedContent } from './reconnected-content-RFpTWV6r.js';
 
 const pdsModalHeaderCss = () => `pds-modal-header{display:block;width:100%}.pds-modal__header{width:100%}`;
@@ -12,7 +12,7 @@ const PdsModalHeader = class {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
     }
     render() {
-        return (h("header", { key: '0490ac7854089dad4666e2a6509ae730f805f97f', class: "pds-modal__header" }, h("slot", { key: 'b76e5a970d3f17411b9e9e5debd981298f2290d1' })));
+        return (h("header", { key: '247373607b807a1428d5b3e7726bd88b6c23776b', class: "pds-modal__header" }, h("slot", { key: '75e7cbf018c82809d23ad4095546af2cd5a01823' })));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,8 +1,12 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CTLu1TM4.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-CB8Yh0Nt.js';
 import { u as unwrapReconnectedContent } from './reconnected-content-RFpTWV6r.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.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--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}`;
+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}`;
 
+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 PdsModal = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -20,7 +24,9 @@ const PdsModal = class {
          */
         this.open = false;
         /**
-         * The size of the modal
+         * The size of the modal. Can be a predefined value ('sm', 'md', 'lg', 'fullscreen') or a custom
+         * max-width as a CSS length (e.g., '1250px', '80vw'). A custom width stays fluid below that size.
+         * A value that is neither falls back to 'md'.
          * @default 'md'
          */
         this.size = 'md';
@@ -120,6 +126,9 @@ const PdsModal = class {
                 // disableTopLayer), so do not trap Tab here.
                 if (this.disableTopLayer)
                     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();
                 // If there are no focusable elements, do nothing
                 if (this.focusableElements.length === 0)
                     return;
@@ -146,6 +155,12 @@ const PdsModal = class {
             }
         };
     }
+    componentWillLoad() {
+        this.warnOnInvalidSize();
+    }
+    sizeChanged() {
+        this.warnOnInvalidSize();
+    }
     componentDidLoad() {
         this.modalRef = this.el.querySelector('.pds-modal__backdrop');
         // Add keyboard event listener
@@ -200,8 +215,11 @@ const PdsModal = class {
             'pds-select:not([disabled])',
         ].join(',');
         this.focusableElements = Array.from(this.modalRef.querySelectorAll(selector));
-        // Filter out elements with display: none or visibility: hidden
+        // 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 => {
+            if (typeof el.checkVisibility === 'function')
+                return el.checkVisibility({ checkVisibilityCSS: true });
             const style = window.getComputedStyle(el);
             return style.display !== 'none' && style.visibility !== 'hidden';
         });
@@ -404,18 +422,34 @@ const PdsModal = class {
         const thisZIndex = this.getBackdropZIndex(this.el);
         return thisZIndex === maxZIndex;
     }
+    resolveSize() {
+        var _a;
+        const size = ((_a = this.size) !== null && _a !== void 0 ? _a : '').trim() || 'md';
+        if (PRESET_SIZES.includes(size))
+            return [size];
+        return isCustomLength(size) ? ['custom', size] : [undefined];
+    }
+    warnOnInvalidSize() {
+        if (this.resolveSize()[0] !== undefined)
+            return;
+        console.warn(`pds-modal: invalid size "${String(this.size).slice(0, 50)}", using md`);
+    }
     render() {
-        return (h("dialog", { key: 'f35044ec9bca1189069faf083c824d8144800053', class: {
+        const [sizeClass = 'md', customSize] = this.resolveSize();
+        return (h("dialog", { key: 'aa352ccc057e4d6183f8c17349bc71857208a928', 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: '99a53b36e160ac14dfd6d598aeaa94114855dacc', class: {
+            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: '12799824edbeea42a6f7f91e0172c6ecbde93337', class: {
                 'pds-modal': true,
-                [`pds-modal--${this.size}`]: true,
+                [`pds-modal--${sizeClass}`]: true,
                 'pds-modal--scrollable': this.scrollable
-            }, part: "modal" }, h("slot", { key: 'cfee7bdf3620d606b1d3130f4ebed4caa83084f1' }))));
+            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, h("slot", { key: 'f517c6466d65f141fba2d41cfe36d1b8d5f29930' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "size": [{
+                "sizeChanged": 0
+            }],
         "open": [{
                 "handleOpenChange": 0
             }]