@pine-ds/core 4.1.0 → 4.2.0

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

@@ -0,0 +1,137 @@
+'use strict';
+
+var index = require('./index-CuQil7H0.js');
+var reconnectedContent = require('./reconnected-content-CpnEQcTp.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}`;
+
+// Known selectors for content Pine components portal to document.body rather
+// than rendering in place — pds-popover, pds-tooltip, pds-combobox's dropdown.
+// A pointerdown landing on one of these is not "outside" the drawer in the
+// sense light dismiss cares about: it belongs to an overlay something inside
+// the drawer opened, even though it is not a DOM descendant of the drawer.
+const PORTALED_OVERLAY_SELECTOR = '.pds-popover, .pds-tooltip, .pds-combobox-dropdown-portal';
+const PdsDrawer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pdsDrawerOpen = index.createEvent(this, "pdsDrawerOpen");
+        this.pdsDrawerClose = index.createEvent(this, "pdsDrawerClose");
+        /**
+         * Whether the drawer is open
+         * @default false
+         */
+        this.open = false;
+        /**
+         * Which edge of the viewport the drawer is docked to. Logical, so this is
+         * free under RTL — `end` is the inline-end edge regardless of direction.
+         * @default 'end'
+         */
+        this.side = 'end';
+        /**
+         * The drawer's width.
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * Whether the drawer content should be scrollable
+         * @default true
+         */
+        this.scrollable = true;
+        /**
+         * Whether the drawer can be dismissed with a pointerdown outside it.
+         * Replaces `pds-modal`'s `backdropDismiss` — there is no backdrop to click.
+         * This also gates Escape, matching how `backdropDismiss` gates Escape on
+         * `pds-modal` today: setting this to `false` means the close button is the
+         * only way out.
+         *
+         * A trigger outside the drawer should only ever set `open` to `true` and
+         * leave closing to the drawer itself. A toggle-style trigger (`open =
+         * !open`) fights light dismiss: clicking it while open closes the drawer
+         * on `pointerdown`, then the trigger's own click handler re-opens it.
+         * @default true
+         */
+        this.lightDismiss = true;
+        /**
+         * Whether to move focus into the drawer when it opens. `auto` is right for
+         * a drawer opened by a direct user action (a click, a deep link the user
+         * just navigated to). Set to `none` for a drawer that can open from a
+         * background event while the user is mid-task elsewhere on the page —
+         * moving focus there would interrupt them, and the page stays live under
+         * a non-modal drawer, so it is a genuine data-entry risk, not just an
+         * annoyance.
+         * @default 'auto'
+         */
+        this.initialFocus = 'auto';
+    }
+    // Unwraps a nested pds-modal left by a page-cache (Turbo, bfcache) reconnect
+    // — the same bug class fixed for pds-modal-header/-content/-footer. Every
+    // render wraps the slotted content in a fresh, marked pds-modal; a reconnect
+    // that restores a prior render's pds-modal in our light DOM ends up with
+    // that stale one nested inside the new one's content.
+    //
+    // The container has to be the inner `.pds-modal` content div, not the
+    // `<pds-modal>` tag itself — that tag's first child is always its own
+    // rendered `dialog.pds-modal__backdrop`, never another `<pds-modal>`, so a
+    // bare-tag check there never matches. The `.pds-drawer__modal` marker on
+    // the staleness selector (rather than the bare `pds-modal` tag) keeps this
+    // from also unwrapping a consumer's own nested pds-modal, like a confirm
+    // dialog placed first in the drawer's content — only a stale copy of our
+    // own wrapper carries that class.
+    componentDidRender() {
+        reconnectedContent.unwrapReconnectedContent(this.el.querySelector('pds-modal.pds-drawer__modal .pds-modal'), 'pds-modal.pds-drawer__modal', '.pds-modal');
+    }
+    // pds-modal closes itself (Escape, light dismiss, a consumer's close
+    // button toggling its own `open`) and only updates its own `open` prop —
+    // mirror that back onto ours so a consumer's binding stays correct, and
+    // re-emit as our own event rather than leaking pds-modal's event name.
+    // Both events bubble, so a nested pds-modal (a confirm dialog inside the
+    // drawer's own content) would otherwise trigger these too — only react to
+    // our own direct inner modal.
+    handleModalClose(e) {
+        if (e.target !== this.modalEl)
+            return;
+        this.open = false;
+        this.pdsDrawerClose.emit();
+    }
+    handleModalOpen(e) {
+        if (e.target !== this.modalEl)
+            return;
+        this.pdsDrawerOpen.emit();
+    }
+    // Light dismiss: a pointerdown anywhere outside the drawer closes it. This
+    // has to be a listener of our own, not pds-modal's backdrop-click handler —
+    // the backdrop is pointer-events:none out here (see pds-drawer.scss) so the
+    // page underneath stays genuinely clickable, which means a click there
+    // never reaches pds-modal's backdrop element at all.
+    handleOutsidePointerDown(e) {
+        if (!this.lightDismiss || !this.open)
+            return;
+        const target = e.target;
+        if (!target)
+            return;
+        if (this.el.contains(target))
+            return;
+        if (target.closest(PORTALED_OVERLAY_SELECTOR))
+            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
+        // list above, so without this it reads as "outside" and a click inside
+        // it (or on its own backdrop) would close the drawer underneath it. That
+        // modal already owns its own dismiss semantics; defer to them instead.
+        if (target.closest('pds-modal'))
+            return;
+        this.open = false;
+    }
+    render() {
+        return (index.h(index.Host, { key: '66e16ca7704243e8bb98002f042fa073ec43c38b', class: {
+                'pds-drawer': true,
+                [`pds-drawer--${this.side}`]: true,
+                [`pds-drawer--${this.size}`]: true,
+            } }, index.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' }, index.h("slot", { key: 'c9ce43ca12a06c550bd130a0fa7572dec22c9c92' }))));
+    }
+    get el() { return index.getElement(this); }
+};
+PdsDrawer.style = pdsDrawerCss();
+
+exports.pds_drawer = PdsDrawer;

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

@@ -76,7 +76,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 }, index.h("slot", null)));
     }
     render() {
-        return (index.h(index.Host, { key: '5d27080b7e129f69255ecb9dd1fab183a8f7c5f6', 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 (index.h(index.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()));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -14,7 +14,7 @@ const PdsDropdownMenuSeparator = class {
         this.disabled = false;
     }
     render() {
-        return (index.h(index.Host, { key: 'd0fbf00978860c7a449b5781db2f10dd7e99d1b1', id: this.componentId }, index.h("hr", { key: 'a566c55fc3f15c0dab81fc90f5cf35d77fc0e35c' })));
+        return (index.h(index.Host, { key: 'f55fc3b23a6ccb94a7ce865189e5d65abdd97d8c', id: this.componentId }, index.h("hr", { key: '784a1480881a27aec69c0a2b0afd06f103912544' })));
     }
 };
 PdsDropdownMenuSeparator.style = pdsDropdownMenuSeparatorCss();

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

@@ -309,7 +309,7 @@ const PdsDropdownMenu = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '30914965241f7e8e5af32e8576c651802026a996', id: this.componentId }, index.h("slot", { key: 'ec995c9437083ca28058b974df91491b0e634a07', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), index.h("pds-box", { key: '590a22e556d4df23eb33cbe2fa2bda296ce59b01', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", role: "menu", "aria-orientation": "vertical", part: "menu-panel" }, index.h("slot", { key: '9b0d67a3cf63b33eb73d3e451b365dc4354a323c', onSlotchange: this.handleSlotChange }))));
+        return (index.h(index.Host, { key: '7907da6a04530d01bbbd0256f0b609fa53e0a774', id: this.componentId }, index.h("slot", { key: '2bf060c4dec082d4175a7cde759221fd4b20d706', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), index.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" }, index.h("slot", { key: '831485d66af711edc9491078827455762795bb64', onSlotchange: this.handleSlotChange }))));
     }
     get host() { return index.getElement(this); }
 };

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-CuQil7H0.js');
 var scroll = require('./scroll-2XcoE_6Q.js');
-var index$1 = require('./index-BMV0nzMk.js');
+var index$1 = require('./index-Bu3NXpbK.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)))}}`;
 
@@ -480,7 +480,7 @@ const PdsFilter = class {
         return null;
     }
     render() {
-        return (index.h(index.Host, { key: '6d40e2462bf70dcd26c0e3c5ab6f12e86c65ac49', id: this.componentId }, index.h("button", { key: '2d45a9b8ae4fd3a4d1ecc04c29ccf83fe5756e50', 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 }, index.h("span", { key: 'b80e2c8c4f92d17c37fa5a0c1fcc3f778f788483', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (index.h("span", { key: '5faa099b94200071325ab8fb1b122437a81dcf61', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (index.h("div", { key: '063bc00fedda0fba5ba4af759404f3ae23b2b6ad', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, index.h("slot", { key: '9790cd0c8cd6a594aab094aeaa469dbcddc98d87' })))));
+        return (index.h(index.Host, { key: 'bd03de5e8461e3aba4d6f014e2d64d9aada0c0e1', id: this.componentId }, index.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 }, index.h("span", { key: 'b3635542048ac52d290917260181d7313eddaff2', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (index.h("span", { key: '0c5ef7f7655ddbee33a695703ce192f082b21bf1', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (index.h("div", { key: 'e75c75d8e9e4596d7f0642e4e1f91deae3f2b9fa', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, index.h("slot", { key: 'bef66af716be823ed3ac36d39a4532785df07f6b' })))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -9,7 +9,7 @@ const PdsFilters = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '0f4dc3d5ecf71992a4c13f85fec62d4b60f3c6d1', id: this.componentId }, index.h("div", { key: 'ee3edc3d752c70d7888028b45dcb1c89f297803c', class: "pds-filters" }, index.h("slot", { key: 'de693eedf74a029a0a279855cd2602420891ef10' }))));
+        return (index.h(index.Host, { key: '492357b36ec8ca8552f76aea6a4e4baf01ee92d5', id: this.componentId }, index.h("div", { key: 'fbf56c5452b4b0627a95008a601ccd6ace59417c', class: "pds-filters" }, index.h("slot", { key: 'c0e1d6b7b86ff39425d26dc75bf950283a371f71' }))));
     }
 };
 PdsFilters.style = pdsFiltersCss();

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

@@ -21,9 +21,9 @@ const PdsImage = class {
         this.loading = 'eager';
     }
     render() {
-        return (index.h(index.Host, { key: 'dbc144927d78e2eb380639eeb8b243133a4b5379', class: {
+        return (index.h(index.Host, { key: '0c0f463a1b616ccc485b8086a0210c5d9d2b065c', class: {
                 'pds-image': true,
-            }, id: this.componentId }, index.h("img", { key: '259c1cd7ffdf4e5dd7c0ef178d28f1f835b57642', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
+            }, id: this.componentId }, index.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 })));
     }
 };
 PdsImage.style = pdsImageCss();

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

@@ -4,7 +4,7 @@ var index = require('./index-CuQil7H0.js');
 var form = require('./form-MhwfKTuo.js');
 var attributes = require('./attributes-oNMnBEnP.js');
 var utils = require('./utils-7jx8T2mW.js');
-var index$1 = require('./index-BMV0nzMk.js');
+var index$1 = require('./index-Bu3NXpbK.js');
 
 const pdsInputTokensCss = () => `:host{--pine-input-color-background-danger:var(--pine-color-red-050)}`;
 
@@ -294,10 +294,10 @@ const PdsInput = class {
             'has-prepend': this.hasPrepend,
             'has-append': this.hasAppend,
         };
-        return (index.h(index.Host, { key: '8f15b61e4a6336246aefca1112c280265996630a', "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 }, index.h("div", { key: '9e45a632a63b813f2f097ef903db9e97f6b88b16', class: "pds-input" }, label && (index.h("div", { key: 'e9e3710cfa43372a71bbf2440110cd43336c16e3', class: {
+        return (index.h(index.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 }, index.h("div", { key: '27a60a963cfa1a96391b55800eba27743a2527f4', class: "pds-input" }, label && (index.h("div", { key: '3f8ce2b254feea4b6fe9ea74318f1e6c27a75927', class: {
                 'pds-input__label-wrapper': true,
                 'visually-hidden': this.hideLabel,
-            } }, index.h("label", { key: '0717152167b9f8776e23bb95d0b3ebdc58a27e8e', htmlFor: componentId, class: "pds-input__label" }, index.h("span", { key: 'cf350936ac9981da1773c7320d5092da2d8aa5c6' }, label, this.required && index.h("span", { key: '115e170ee93a5bc2c4c396aaf235fd0e6ae09a13', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), index.h("div", { key: '00839202f48a22c6a6f00fa706eee81314dc1c04', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), index.h("input", Object.assign({ key: 'cb2234ebf58e2148ea6b4b711ff09338722d4457', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": form.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 && (index.h("p", { key: 'e322e25b5d6d8fe9c7292087127d7d44c0a27046', class: "pds-input__helper-message", id: form.messageId(componentId, 'helper') }, helperMessage)), errorMessage && (index.h("p", { key: 'e3a982cf8312fa2a16360a4667fa5286ce304e68', class: "pds-input__error-message", id: form.messageId(componentId, 'error') }, index.h("pds-icon", { key: 'ffa236865ab93013f54ea0bf2f993a3c3631e919', "aria-hidden": "true", icon: index$1.danger, size: "small" }), errorMessage)))));
+            } }, index.h("label", { key: '1c290cde5a9100b11fe3059725866506d089e834', htmlFor: componentId, class: "pds-input__label" }, index.h("span", { key: '2ebc8dafa48d6d855be5b8e1aa3bdd417d6250f3' }, label, this.required && index.h("span", { key: '73f7d22b13739daff6aa104c140208c5b1a86d10', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), index.h("div", { key: '4ea0b3335abbdf920ca064aa5866a060ef18c2ad', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), index.h("input", Object.assign({ key: '4acf340fdcf40968e9c46b6a240f8a9008998c11', ref: (input) => (this.nativeInput = input), class: "pds-input__field", "aria-describedby": form.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 && (index.h("p", { key: 'f1969fe3a5f3aba65f44fcdaddd5a12d90db7fb1', class: "pds-input__helper-message", id: form.messageId(componentId, 'helper') }, helperMessage)), errorMessage && (index.h("p", { key: 'd4df1ceff95d5db7f2d927e9fcb848444570f9a2', class: "pds-input__error-message", id: form.messageId(componentId, 'error') }, index.h("pds-icon", { key: 'f69182919903aab42b7641d9a0082861f551a214', "aria-hidden": "true", icon: index$1.danger, size: "small" }), errorMessage)))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-CuQil7H0.js');
 var utils = require('./utils-7jx8T2mW.js');
-var index$1 = require('./index-BMV0nzMk.js');
+var index$1 = require('./index-Bu3NXpbK.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}`;
 
@@ -58,8 +58,8 @@ const PdsLink = class {
         const targetValue = this.target || (this.external ? '_blank' : undefined);
         const showExternalIcon = this.external;
         const relValue = targetValue === '_blank' ? 'noopener noreferrer' : undefined;
-        return (index.h("a", { key: '532bc4afd39f637b021556875a1744dd85d4a227', 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 }, index.h("slot", { key: '854b411525e89363fbc13fb3119c4f04e611d0a0' }, this.href), showExternalIcon &&
-            index.h("pds-icon", { key: 'c670f8c1f46bd55b6ebd735a98c0dbff8eb24076', icon: index$1.launch, size: this.fontSize })));
+        return (index.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 }, index.h("slot", { key: 'f48dd74f1921400553845ea3b03720749b1a6737' }, this.href), showExternalIcon &&
+            index.h("pds-icon", { key: '299d4f31ec32b614fd9f4d1c19acae63ee7a9169', icon: index$1.launch, size: this.fontSize })));
     }
 };
 PdsLink.style = pdsLinkCss();

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

@@ -48,7 +48,7 @@ const PdsLoader = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '288e980a91a4a05984ec7d16c198cff227a2e676', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (index.h("div", { key: 'dc8643b932182b540ce93dd87dad10f07174d59f', class: "pds-loader--spinner" }, index.h("svg", { key: '2cec5ddfdf9772c0d20ce11a6bf070d0bc06a53b', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, index.h("defs", { key: 'f2554f75fe1bd3e0e3afc1947220d3c004184e84' }, index.h("linearGradient", { key: 'edef079f8b959604ec9f911739a78801c5f285c0', id: "spinner-secondHalf" }, index.h("stop", { key: '337a53ea77d19e9dfd3a5d43f01f6886c71f190b', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), index.h("stop", { key: 'ca2e6363e2feece31ba1a4b2de0d3ec66c4c45f9', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), index.h("linearGradient", { key: '5458cf7f8e9e35e23dfc5aa4e5f7ef5c7b9d142d', id: "spinner-firstHalf" }, index.h("stop", { key: '7cbb4bc34f8792e648c8bf1bfe6db8e319bf68cf', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), index.h("stop", { key: 'febbf165e3da7d328dfa35cf5930a8069fea604e', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), index.h("g", { key: 'a2becedb247748508013f80c9dbd6eccc6818e6f', class: "pds-loader__spinner-path" }, index.h("path", { key: '2df230f57210ee7c10ff22d99d3fd8a1dd17b217', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), index.h("path", { key: 'b85ae9aebe39f99d1d06a3e03e8ef7027fa8a866', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), index.h("path", { key: '9f0508fdf50f6274e2b0656565585198f6105b68', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (index.h("div", { key: '0520d0113a7b4498692e523c273616d67b90f042', class: "pds-loader--typing" }, index.h("span", { key: 'a1083f20b9cd04d1ba685aafd736fcd154dc597f' }), index.h("span", { key: '9eab7a6bfcca61861cbdd01953b2aa0762770b80' }), index.h("span", { key: 'd4599150cd603fcfe6b2f50044a0ed867fad6070' }))), index.h("div", { key: 'b37bc877a5fd6cd7249b10bca48ac50eb31f4f40', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, index.h("slot", { key: '689ca4190506689ca6c92b61ada5c96a2a1427ab', name: "label" }, "Loading..."))));
+        return (index.h(index.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' && (index.h("div", { key: 'd193dfdaa527debff73705cef65e3d7f7a9a69ae', class: "pds-loader--spinner" }, index.h("svg", { key: 'c881ff2ee1d5d92ac55300bd13e9d066f7a3970f', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, index.h("defs", { key: '998920cdc820cc4e60df39bda5707e0b6bd5d0fe' }, index.h("linearGradient", { key: '02028f6ac070703f8b96b1723c4d2c07670e73bb', id: "spinner-secondHalf" }, index.h("stop", { key: 'b3120c2a597d8f646e791b1ac09a262486fb29cc', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), index.h("stop", { key: '932056b587b5e3191952506d9411c68375af6620', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), index.h("linearGradient", { key: '14540856cb968c220f71537c012a8c415d39af85', id: "spinner-firstHalf" }, index.h("stop", { key: 'c94d634b1dffa0c5301b8cb2c0b6e81fdb34429e', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), index.h("stop", { key: 'b6477c000c01728a60a7fd8e182f24da4b554128', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), index.h("g", { key: '810f7c7bcd8e33bd2bed70932ed174eef48ae711', class: "pds-loader__spinner-path" }, index.h("path", { key: '4e54f348c563cca7e14790a34a58dacbda452824', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), index.h("path", { key: '3968c60f27ec619aabc74a278026abdd94d4510f', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), index.h("path", { key: '171fe08e0aec1f207704a0395388ccc57ea045d4', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (index.h("div", { key: '60cf0b871807eb49ce73d3e63f00f5914c9c9eec', class: "pds-loader--typing" }, index.h("span", { key: 'dfbdcc1fe558803d39caa56bb57763269c061661' }), index.h("span", { key: '0c343f36a8d71bdc07306b3c879016686da94199' }), index.h("span", { key: 'f2a30e560ef0c9ac26c596dbaad33eeb0e4f7ff3' }))), index.h("div", { key: '0fa18b15a3962df872fd28136caf258cd09cafdb', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, index.h("slot", { key: 'e8eabec0c6d24d3ad962ecee9e0ed6e0e0b4adc0', name: "label" }, "Loading..."))));
     }
 };
 PdsLoader.style = pdsLoaderCss();

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

@@ -184,10 +184,10 @@ const PdsModalContent = class {
     render() {
         // Only apply max-height style if it's not 'none'
         const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
-        return (index.h(index.Host, { key: '3e8e95b159205c5c8183eb7f6c60d358290e0896' }, index.h("div", { key: '97988c0bbcbf256fc3369ccedefe854dd196ef82', class: {
+        return (index.h(index.Host, { key: '7bd0f26425c71e4551ae21e38d57d2124dabfc50' }, index.h("div", { key: '120e6947e734e44883af975991781f338acd7dbc', class: {
                 'pds-modal-content': true,
                 [`pds-modal-content--border-${this.border}`]: true
-            }, style: styleObj, tabindex: "-1" }, index.h("slot", { key: 'c76eb4759b7bf4898845b65768908c896fe64f4e' }))));
+            }, style: styleObj, tabindex: "-1" }, index.h("slot", { key: '6f2c8d44a69df8ecc1214e00604023274cee2790' }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -14,7 +14,7 @@ const PdsModalFooter = class {
         reconnectedContent.unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
     }
     render() {
-        return (index.h("footer", { key: '63bb557978ea69aa658026f7be24433b946b2ee6', class: "pds-modal__footer" }, index.h("slot", { key: '158a929229b0efa8720f869756076203f297c744' })));
+        return (index.h("footer", { key: 'f344716ed1fbd77b447e10c9b78565918dc17be0', class: "pds-modal__footer" }, index.h("slot", { key: 'ba85cf6f7f56c8f8a8ff6d24c5fa647722140fda' })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -14,7 +14,7 @@ const PdsModalHeader = class {
         reconnectedContent.unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
     }
     render() {
-        return (index.h("header", { key: 'ae4277052c04a1804e0e73f2873e636ea4cb890c', class: "pds-modal__header" }, index.h("slot", { key: '5c4a7b463835de451c9c3f15e0ac669bf32aee23' })));
+        return (index.h("header", { key: '0490ac7854089dad4666e2a6509ae730f805f97f', class: "pds-modal__header" }, index.h("slot", { key: 'b76e5a970d3f17411b9e9e5debd981298f2290d1' })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -41,6 +41,19 @@ const PdsModal = class {
          * @default false
          */
         this.disableTopLayer = false;
+        /**
+         * Whether to skip moving focus into the modal when it opens — both our own
+         * `setInitialFocus()` and the browser's native "dialog focusing steps",
+         * which move focus into the dialog as soon as `show()`/`showModal()` is
+         * called regardless of application code. Focus return on close is
+         * unaffected either way. For a modal opened by something other than a
+         * direct user click — a redirect, a deep link, a background event —
+         * stealing focus on open can interrupt whatever the user was already
+         * doing. Default `false` preserves today's behavior for every existing
+         * consumer.
+         * @default false
+         */
+        this.disableInitialFocus = false;
         /**
          * Stores the list of focusable elements in the modal
          */
@@ -57,16 +70,41 @@ const PdsModal = class {
             }
         };
         this.handleKeyDown = (e) => {
+            var _a, _b, _c;
             // If the modal is not open, don't handle any keyboard events
             if (!this.open)
                 return;
             // Handle Escape key to close the modal
             if (e.key === 'Escape') {
-                // In non-top-layer mode, focus can move into an overlay stacked above the
-                // modal (the reason disableTopLayer exists). If that overlay owns focus,
-                // leave Escape to it rather than dismissing this modal out from under it.
-                const active = document.activeElement;
-                if (this.disableTopLayer && active && active !== document.body && !this.el.contains(active)) {
+                // Every open pds-modal shares this document-level listener for the
+                // same keydown event. Whichever one runs first can synchronously move
+                // focus (hideModal() restores it), which would make a later instance's
+                // own read of document.activeElement reflect that side effect instead
+                // of where focus actually was when the key was pressed — stacking two
+                // sibling modals closing on one Escape instead of just the top one.
+                // That alone isn't enough, though: isStackedAboveOverlay's `:modal`
+                // check reads LIVE top-layer state, and hideModal()'s close() clears it
+                // synchronously — so whichever sibling's listener runs first (DOM
+                // order, not z-index) can close itself and erase the very evidence a
+                // later listener needs to recognize it was stacked above. Snapshot that
+                // determination too, in the same first-listener-wins block, before any
+                // instance has had a chance to act on this keypress.
+                const eventSnapshot = e;
+                if (!('__pdsActiveElementAtEscape' in eventSnapshot)) {
+                    const activeAtDispatch = document.activeElement;
+                    eventSnapshot.__pdsActiveElementAtEscape = activeAtDispatch;
+                    const topLayerDialog = (_a = activeAtDispatch === null || activeAtDispatch === void 0 ? void 0 : activeAtDispatch.closest('dialog')) !== null && _a !== void 0 ? _a : null;
+                    eventSnapshot.__pdsTopLayerDialogAtEscape = topLayerDialog;
+                    eventSnapshot.__pdsTopLayerDialogWasModalAtEscape = !!(topLayerDialog && topLayerDialog.matches(':modal'));
+                }
+                // Leave Escape to a genuinely stacked-above overlay (disableTopLayer's
+                // reason for existing) — not just to anything outside this modal.
+                const active = eventSnapshot.__pdsActiveElementAtEscape;
+                if (this.disableTopLayer &&
+                    active &&
+                    active !== document.body &&
+                    !this.el.contains(active) &&
+                    this.isStackedAboveOverlay(active, (_b = eventSnapshot.__pdsTopLayerDialogAtEscape) !== null && _b !== void 0 ? _b : null, (_c = eventSnapshot.__pdsTopLayerDialogWasModalAtEscape) !== null && _c !== void 0 ? _c : false)) {
                     return;
                 }
                 // Always prevent native dialog close behavior
@@ -114,6 +152,16 @@ const PdsModal = class {
         this.modalRef = this.el.querySelector('.pds-modal__backdrop');
         // Add keyboard event listener
         document.addEventListener('keydown', this.handleKeyDown);
+        // @Watch('open') only fires on a later change, not the prop's initial
+        // value — a modal mounted with `open` already true (static markup, or a
+        // framework passing it on first render) would otherwise never call
+        // show()/showModal(): the panel still appears, since that's driven by the
+        // `open` CSS class, but the native <dialog> itself was never opened, so
+        // there's no top-layer promotion, no dialog focusing steps, and no
+        // focusable-elements list or previousActiveElement captured.
+        if (this.open) {
+            this.showModal();
+        }
     }
     // Unwraps a nested dialog.pds-modal__backdrop left by a page-cache (Turbo, bfcache) reconnect.
     componentDidRender() {
@@ -219,8 +267,39 @@ const PdsModal = class {
                 // Update focusable elements and set initial focus
                 // Using a longer timeout to ensure all components are fully rendered
                 setTimeout(() => {
+                    var _a, _b;
                     this.updateFocusableElements();
-                    this.setInitialFocus();
+                    if (this.disableInitialFocus) {
+                        // show()/showModal() also move focus into the dialog natively (the
+                        // HTML spec's "dialog focusing steps") — that native step isn't
+                        // necessarily done by the time this task runs either, so counter it
+                        // here, in the same deferred slot setInitialFocus() below uses for
+                        // the same reason, rather than racing it synchronously above.
+                        //
+                        // disableInitialFocus exists for a drawer that can open in the
+                        // background while the user is mid-task elsewhere — by the time
+                        // this runs, they may have already clicked into something of
+                        // their own outside the dialog. Only act if focus is still where
+                        // the native steps (or nothing) left it, so that isn't stolen.
+                        const activeElement = document.activeElement;
+                        const focusAlreadyClaimedElsewhere = activeElement !== null && activeElement !== document.body && !((_a = this.modalRef) === null || _a === void 0 ? void 0 : _a.contains(activeElement));
+                        if (!focusAlreadyClaimedElsewhere) {
+                            if (this.previousActiveElement !== document.body && typeof ((_b = this.previousActiveElement) === null || _b === void 0 ? void 0 : _b.focus) === 'function') {
+                                this.previousActiveElement.focus();
+                            }
+                            else if (activeElement instanceof HTMLElement) {
+                                // Nothing was focused before opening (previousActiveElement is
+                                // body), so there's nothing to restore focus to — body.focus()
+                                // would be a no-op and leave focus wherever the native focusing
+                                // steps put it, inside the dialog. Blur that instead so focus
+                                // ends up nowhere, matching the state before opening.
+                                activeElement.blur();
+                            }
+                        }
+                    }
+                    else {
+                        this.setInitialFocus();
+                    }
                     this.pdsModalOpen.emit();
                 }, 100);
             }
@@ -235,10 +314,22 @@ const PdsModal = class {
     async hideModal() {
         if (this.modalRef) {
             try {
+                // Capture before close(): with the async task queue, a prop change
+                // that triggers hideModal() (e.g. light dismiss setting `open` false
+                // on a pointerdown elsewhere) doesn't run until the next frame — by
+                // then the browser has already moved focus to whatever the user's
+                // click actually landed on. Restoring previousActiveElement in that
+                // case would steal focus back from a real new destination; only
+                // restore it when focus is still inside the modal (or nowhere, i.e.
+                // document.body), meaning nothing else has claimed it since.
+                const activeElement = document.activeElement;
+                const focusAlreadyMovedElsewhere = activeElement !== null && activeElement !== document.body && !this.modalRef.contains(activeElement);
                 this.modalRef.close();
                 this.open = false;
                 // Restore focus to the element that was focused before the modal was opened
-                if (this.previousActiveElement && typeof this.previousActiveElement.focus === 'function') {
+                if (!focusAlreadyMovedElsewhere &&
+                    this.previousActiveElement &&
+                    typeof this.previousActiveElement.focus === 'function') {
                     this.previousActiveElement.focus();
                 }
                 this.pdsModalClose.emit();
@@ -255,6 +346,46 @@ const PdsModal = class {
         const backdrop = modal.querySelector('.pds-modal__backdrop');
         return backdrop ? parseInt(getComputedStyle(backdrop).zIndex, 10) : -1;
     }
+    /**
+     * Whether `active` sits inside a surface actually stacked above this modal.
+     *
+     * Used to decide whether an Escape keypress belongs to that surface instead
+     * of this modal. Focus being merely *outside* this modal is not enough on
+     * its own: in `disableTopLayer` mode the page stays interactive (that's the
+     * point of a non-modal usage like a drawer), so focus will routinely be on
+     * ordinary page content while the modal is open, and that must not be
+     * mistaken for "an overlay owns Escape."
+     *
+     * Two ways a surface can be above: it is itself promoted to the browser's
+     * top layer (a regular `showModal()` dialog, which paints above everything
+     * outside the top layer regardless of z-index — a sibling pds-modal opened
+     * over a `disableTopLayer` drawer typically shares the exact same z-index
+     * token, so a numeric comparison alone would miss it), or it has a higher
+     * z-index than this modal's own backdrop (a `disableTopLayer` overlay, or
+     * anything else deliberately raised above it).
+     *
+     * `topLayerDialog` / `topLayerDialogWasModal` come pre-snapshotted from the
+     * keydown event (see handleKeyDown) rather than being re-derived here: by
+     * the time a later sibling modal's listener runs, an earlier one may have
+     * already closed itself, which clears `:modal` — reading it live here would
+     * lose that evidence depending on listener order.
+     */
+    isStackedAboveOverlay(active, topLayerDialog, topLayerDialogWasModal) {
+        if (topLayerDialog && topLayerDialog !== this.modalRef && topLayerDialogWasModal) {
+            return true;
+        }
+        const ownZIndex = this.getBackdropZIndex(this.el);
+        let node = active;
+        while (node && node !== document.body) {
+            const style = getComputedStyle(node);
+            const zIndex = parseInt(style.zIndex, 10);
+            if (style.position !== 'static' && !isNaN(zIndex) && zIndex > ownZIndex) {
+                return true;
+            }
+            node = node.parentElement;
+        }
+        return false;
+    }
     /**
      * Checks if this modal is the innermost (highest z-index) modal
      */
@@ -276,14 +407,14 @@ const PdsModal = class {
         return thisZIndex === maxZIndex;
     }
     render() {
-        return (index.h("dialog", { key: '65d204a57e193022eb475c113438a40fc77cf545', class: {
+        return (index.h("dialog", { key: 'f35044ec9bca1189069faf083c824d8144800053', class: {
                 'pds-modal__backdrop': true,
                 'open': this.open
-            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, index.h("div", { key: 'a9f07a30f8b4d13ef7ac33068756f0fb03173e27', class: {
+            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, index.h("div", { key: '99a53b36e160ac14dfd6d598aeaa94114855dacc', class: {
                 'pds-modal': true,
                 [`pds-modal--${this.size}`]: true,
                 'pds-modal--scrollable': this.scrollable
-            }, part: "modal" }, index.h("slot", { key: '8505057bef9b4ed60e51422b05fea08cefce4a4b' }))));
+            }, part: "modal" }, index.h("slot", { key: 'cfee7bdf3620d606b1d3130f4ebed4caa83084f1' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {