@pine-ds/core 4.0.0 → 4.2.0

package/hydrate/index.js

@@ -5530,7 +5530,7 @@ class MockPdsModal {
             'pds-modal__backdrop': true,
             'open': this.open,
         };
-        return (hAsync("div", { key: '6e7f71b339764894e1f17d253fc3c8e0243e4f90', class: backdropClasses }, hAsync("div", { key: '25b2f82c1af743156d152880631d4294dfec68b5', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, hAsync("div", { key: '6bc97e805daee5e5dd547fa0b919a05cf1b6a6a1', class: "pds-modal__header" }, hAsync("slot", { key: 'd9e7c248d983e3c055ed7e0aea5a4d5a15dfea12', name: "header" })), hAsync("div", { key: '5608ee069b59cb34dc812bde22f83c6bce7e6904', class: "pds-modal-content" }, hAsync("slot", { key: '6e3e790330598e1bde733350e5e216d269426e51' })), hAsync("div", { key: '381f3c4e1c9c83b0687e1f1484b64334e388d669', class: "pds-modal__footer" }, hAsync("slot", { key: '6e3a3cb64623de59a409072ab9c1bf65af8c2f6c', name: "footer" })))));
+        return (hAsync("div", { key: '1207382ec39e45f95449791cd9fbf3ad54a17564', class: backdropClasses }, hAsync("div", { key: '865cff8feaf031750e6763d60580f9060dfc0c91', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, hAsync("div", { key: 'b49ba7c717999b53578056ad35c4ec270dbdfd01', class: "pds-modal__header" }, hAsync("slot", { key: '2c06b0f0c4692f1991eb389a73b751d38796c1cf', name: "header" })), hAsync("div", { key: 'ca0e6f324db12de5bd0c21b53bf888ab44c0d34c', class: "pds-modal-content" }, hAsync("slot", { key: 'cef74e83f58195b574f9a290f748cecb2561668e' })), hAsync("div", { key: '65518e197e80fa0cd8ea8cbbd9bb10a064e251ca', class: "pds-modal__footer" }, hAsync("slot", { key: '8cd72b932b7c4d31cf9ecb8f0c37d9a5b5ca7594', name: "footer" })))));
     }
     get el() { return getElement(this); }
     static get style() { return pdsModalCss$1(); }
@@ -5552,7 +5552,7 @@ class MockPdsModal {
     }; }
 }
 
-/* pds-icons v10.2.0, ES Modules */
+/* pds-icons v10.4.3, ES Modules */
 
 const addCircle = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12m11-5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H8a1 1 0 1 1 0-2h3V8a1 1 0 0 1 1-1'/></svg>";
 const caretDown = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414'/></svg>";
@@ -8422,10 +8422,12 @@ function isOverflowing(el) {
  * will display a tooltip showing the full text content. The tooltip is
  * rendered as a portal on document.body and positioned with Floating UI.
  *
+ * Also owns the element's `tabindex` while it is clipped — see syncTabIndex.
+ *
  * @returns A cleanup function that removes all listeners, observers, and DOM elements.
  */
 function setupTruncationTooltip(options) {
-    const { hostEl, contentEl, getTooltipText, placement = 'top' } = options;
+    const { hostEl, contentEl, getTooltipText, placement = 'top', manageTabIndex = true } = options;
     injectStyles();
     let portalEl = null;
     let isHovering = false;
@@ -8434,6 +8436,34 @@ function setupTruncationTooltip(options) {
     let hideTimeout = null;
     let resizeObserver = null;
     let resizeDebounce = null;
+    let ownsTabIndex = false;
+    let disposed = false;
+    /**
+     * The tab stop exists only to give the tooltip a focusable anchor, so it
+     * belongs on the element while the text is actually clipped and not a moment
+     * longer. Deriving it from the caller's prop instead leaves a dead stop on
+     * every element that opted into truncation but happens to fit — in a row of
+     * chips that doubles the tab stops, half of them landing on a span with no
+     * role, no name of its own, and nothing to reveal.
+     *
+     * Ownership is tracked rather than inferred from the value: if the consumer
+     * already put a tabindex on the element (a roving -1, say), that is theirs
+     * and we never touch it.
+     */
+    function syncTabIndex() {
+        if (!manageTabIndex)
+            return;
+        if (isOverflowing(contentEl)) {
+            if (!ownsTabIndex && contentEl.hasAttribute('tabindex'))
+                return;
+            ownsTabIndex = true;
+            contentEl.setAttribute('tabindex', '0');
+        }
+        else if (ownsTabIndex) {
+            ownsTabIndex = false;
+            contentEl.removeAttribute('tabindex');
+        }
+    }
     // Use ResizeObserver to re-evaluate overflow when the element resizes
     // Debounced to prevent performance issues during rapid window resizing
     if (typeof ResizeObserver !== 'undefined') {
@@ -8443,6 +8473,7 @@ function setupTruncationTooltip(options) {
             }
             resizeDebounce = setTimeout(() => {
                 resizeDebounce = null;
+                syncTabIndex();
                 // If tooltip is showing but text no longer overflows, hide it
                 if (portalEl && portalEl.isConnected && !isOverflowing(contentEl)) {
                     hideTooltip();
@@ -8451,6 +8482,18 @@ function setupTruncationTooltip(options) {
         });
         resizeObserver.observe(contentEl);
     }
+    // Measure now so the common case is right on the first paint, rather than
+    // waiting out the observer's debounce.
+    syncTabIndex();
+    // A web font swapping in changes scrollWidth without changing the clipped
+    // box's size, so ResizeObserver never fires for it — the element would keep
+    // whatever the fallback font measured. Re-measure once the fonts settle.
+    if (typeof document !== 'undefined' && document.fonts !== undefined) {
+        document.fonts.ready.then(() => {
+            if (!disposed)
+                syncTabIndex();
+        });
+    }
     function createPortal() {
         if (portalEl)
             return;
@@ -8582,6 +8625,7 @@ function setupTruncationTooltip(options) {
     hostEl.addEventListener('focusout', handleFocusOut);
     // Return cleanup function
     return () => {
+        disposed = true;
         cancelHideTimeout();
         if (resizeDebounce) {
             clearTimeout(resizeDebounce);
@@ -8590,6 +8634,12 @@ function setupTruncationTooltip(options) {
         if (resizeObserver) {
             resizeObserver.disconnect();
         }
+        // Hand the element back as we found it — truncation may simply have been
+        // turned off, in which case the element outlives this teardown.
+        if (ownsTabIndex) {
+            ownsTabIndex = false;
+            contentEl.removeAttribute('tabindex');
+        }
         hostEl.removeEventListener('mouseenter', handleMouseEnter);
         hostEl.removeEventListener('mouseleave', handleMouseLeave);
         hostEl.removeEventListener('focusin', handleFocusIn);
@@ -8663,6 +8713,11 @@ class PdsChip {
                 hostEl: this.el,
                 contentEl: this.labelTextEl,
                 getTooltipText: () => this.el.textContent || '',
+                // The dropdown variant's label span already sits inside
+                // `<button class="pds-chip__button">`, which is already focusable and
+                // bubbles focusin to the host — a tabindex on the span too would nest
+                // a second tab stop inside the button.
+                manageTabIndex: this.effectiveVariant !== 'dropdown',
             });
             this.tooltipBoundEl = this.labelTextEl;
         }
@@ -8713,11 +8768,15 @@ class PdsChip {
         // node — and a plain `<pds-chip>Some text</pds-chip>` slots text with no
         // wrapping element. Wrapping the slot itself in an internal span gives
         // maxWidth something to ellipsize regardless of what's slotted.
-        // A focus-triggered tooltip needs a focusable anchor. The dropdown's own
-        // button already takes focus (focusin bubbles to the host), so only the
-        // text/tag label span needs a tabindex — and only when it can truncate.
-        const labelTabindex = this.maxWidth ? '0' : undefined;
-        const chipContent = isDropdown ? (hAsync("button", { class: "pds-chip__button", type: "button", part: "button" }, this.icon && hAsync("pds-icon", { icon: this.icon, size: this.iconSize, "aria-hidden": "true" }), showDot && hAsync("i", { class: "pds-chip__dot", "aria-hidden": "true" }), hAsync("span", { class: "pds-chip__label-text", ref: (el) => (this.labelTextEl = el) }, hAsync("slot", null)), hAsync("pds-icon", { icon: downSmall, size: this.iconSize, "aria-hidden": "true" }))) : (hAsync("span", { class: "pds-chip__label" }, this.icon && hAsync("pds-icon", { icon: this.icon, size: this.iconSize, "aria-hidden": "true" }), showDot && hAsync("i", { class: "pds-chip__dot", "aria-hidden": "true" }), hAsync("span", { class: "pds-chip__label-text", tabindex: labelTabindex, ref: (el) => (this.labelTextEl = el) }, hAsync("slot", null))));
+        // A focus-triggered tooltip needs a focusable anchor, but the label span
+        // only earns a tab stop while its text is actually clipped — a chip whose
+        // label fits has nothing to reveal. setupTruncationTooltip owns that
+        // tabindex off the measurement for every variant except dropdown: its
+        // label span already sits inside `<button class="pds-chip__button">`,
+        // which is already focusable and bubbles focusin to the host, so
+        // initTruncationTooltip passes `manageTabIndex: false` there to avoid
+        // nesting a second tab stop inside the button.
+        const chipContent = isDropdown ? (hAsync("button", { class: "pds-chip__button", type: "button", part: "button" }, this.icon && hAsync("pds-icon", { icon: this.icon, size: this.iconSize, "aria-hidden": "true" }), showDot && hAsync("i", { class: "pds-chip__dot", "aria-hidden": "true" }), hAsync("span", { class: "pds-chip__label-text", ref: (el) => (this.labelTextEl = el) }, hAsync("slot", null)), hAsync("pds-icon", { icon: downSmall, size: this.iconSize, "aria-hidden": "true" }))) : (hAsync("span", { class: "pds-chip__label" }, this.icon && hAsync("pds-icon", { icon: this.icon, size: this.iconSize, "aria-hidden": "true" }), showDot && hAsync("i", { class: "pds-chip__dot", "aria-hidden": "true" }), hAsync("span", { class: "pds-chip__label-text", ref: (el) => (this.labelTextEl = el) }, hAsync("slot", null))));
         return chipContent;
     }
     get hostStyles() {
@@ -8773,7 +8832,7 @@ class PdsChip {
         return (hAsync(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), hAsync("pds-icon", { icon: remove, size: this.iconSize })));
     }
     render() {
-        return (hAsync(Host, { key: 'fd689f64fe35685c7e8e0f5e73a01c8564ad3c66', class: this.classNames(), id: this.componentId, style: this.hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
+        return (hAsync(Host, { key: '3b796c1340ac4e37569bf7904dbed05ba6938e4b', class: this.classNames(), id: this.componentId, style: this.hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
     }
     get el() { return getElement(this); }
     static get style() { return pdsChipTokensCss() + pdsChipCss(); }
@@ -11868,6 +11927,10 @@ class PdsCopytext {
                 hostEl: this.el,
                 contentEl: this.valueSpanEl,
                 getTooltipText: () => this.value || '',
+                // valueSpanEl already sits inside the `<pds-button>` below, which is
+                // already focusable and bubbles focusin to the host — a tabindex on
+                // the span too would nest a second tab stop inside the button.
+                manageTabIndex: false,
             });
         }
     }
@@ -11891,7 +11954,7 @@ class PdsCopytext {
         return classNames.join(' ');
     }
     render() {
-        return (hAsync(Host, { key: '43a3870fa4c24416e2e6e99dd7c423a5c32ac91e', class: this.classNames(), id: this.componentId }, hAsync("pds-button", { key: 'f0735d3f245dd7150e88b3dd1a191c3ee86b6293', type: "button", variant: "unstyled", onClick: this.handleClick }, hAsync("span", { key: 'ddf7cf205f9bb11dd4b4111435bb7efc15b0af61', ref: (el) => this.valueSpanEl = el }, this.value), hAsync("pds-icon", { key: '7ba6d0452e1726ff951ec46433f838669961c277', "aria-hidden": "true", icon: copy, size: "16px" }))));
+        return (hAsync(Host, { key: '6e3ff4eb0dc42e57156a162196a06a675cac6f91', class: this.classNames(), id: this.componentId }, hAsync("pds-button", { key: '749a8dde35eb3c70941229d11dc6477aaf717ed1', type: "button", variant: "unstyled", onClick: this.handleClick }, hAsync("span", { key: '7f457a164f3ae76a37814d37d7b5e3fce86bd803', ref: (el) => this.valueSpanEl = el }, this.value), hAsync("pds-icon", { key: '0ff6dad44148c23ee9d693e82880598b91b0630e', "aria-hidden": "true", icon: copy, size: "16px" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -11919,8 +11982,11 @@ class PdsCopytext {
     }; }
 }
 
-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--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-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-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-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-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-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-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}@media (max-width: 767px){.pds-divider--vertical{display:none}}`;
+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}}`;
 
+/**
+ * @part label - Exposes the label text for styling, such as a custom color. Appears only when `label` is set and `vertical` is `false`.
+ */
 class PdsDivider {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -11930,11 +11996,18 @@ class PdsDivider {
          */
         this.vertical = false;
     }
+    get hasLabel() {
+        var _a;
+        return Boolean((_a = this.label) === null || _a === void 0 ? void 0 : _a.trim()) && !this.vertical;
+    }
     classNames() {
         const classNames = ['pds-divider'];
         if (this.vertical) {
             classNames.push('pds-divider--vertical');
         }
+        if (this.hasLabel) {
+            classNames.push('pds-divider--labeled');
+        }
         if (this.offset) {
             const offsetClassName = 'pds-divider--offset-' + this.offset;
             classNames.push(offsetClassName);
@@ -11942,7 +12015,7 @@ class PdsDivider {
         return classNames.join(' ');
     }
     render() {
-        return (hAsync(Host, { key: 'c3a01882db1119b8397353aaed193813cba0bfb8', id: this.componentId }, hAsync("hr", { key: 'fe20a28dbd2f10cec125df4dbb4ba7a2837628f1', class: this.classNames() })));
+        return (hAsync(Host, { key: 'c6f887ca1f68c8e572bd518c43d88f052f6d9dd1', id: this.componentId }, this.hasLabel ? (hAsync("div", { class: this.classNames(), role: "separator", "aria-label": this.label }, hAsync("span", { class: "pds-divider__label", part: "label", "aria-hidden": "true" }, this.label))) : (hAsync("hr", { class: this.classNames() }))));
     }
     static get style() { return pdsDividerCss(); }
     static get cmpMeta() { return {
@@ -11950,6 +12023,7 @@ class PdsDivider {
         "$tagName$": "pds-divider",
         "$members$": {
             "componentId": [1, "component-id"],
+            "label": [1],
             "offset": [1],
             "vertical": [4]
         },
@@ -11959,6 +12033,270 @@ class PdsDivider {
     }; }
 }
 
+/**
+ * Unwraps a stale copy of a light-DOM (`shadow: false`) component's own wrapper,
+ * left behind when a page-cache (Turbo, browser bfcache) reconnect nests a
+ * component's previous render inside its freshly rendered one. Call from
+ * `componentDidRender` with the element that directly contains the rendered
+ * `<slot>` and the selector that identifies "another one of me." Unwraps in
+ * place (move-then-remove) so nested content is never lost.
+ *
+ * `contentSelector` is only needed when the wrapper itself further nests a
+ * separate content element (e.g. pds-tab's `<a class="pds-tab">` wrapping a
+ * `.pds-tab__content` div) — omit it when the wrapper's own children are the
+ * slotted content (e.g. pds-tabpanel's `.pds-tabpanel` div).
+ */
+function unwrapReconnectedContent(container, selector, contentSelector) {
+    var _a;
+    if (container === null)
+        return;
+    let stale = container.firstElementChild;
+    while (stale === null || stale === void 0 ? void 0 : stale.matches(selector)) {
+        const source = contentSelector !== undefined ? ((_a = stale.querySelector(contentSelector)) !== null && _a !== void 0 ? _a : stale) : stale;
+        Array.from(source.childNodes).forEach((node) => container.insertBefore(node, stale));
+        stale.remove();
+        stale = container.firstElementChild;
+    }
+}
+
+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';
+/**
+ * A non-modal side panel composed from `pds-modal`.
+ *
+ * Unlike `pds-modal`, the page stays interactive while a drawer is open: no
+ * dimming, no blur, no scroll lock, no click blocking. `pds-drawer` renders a
+ * `pds-modal` internally with `disableTopLayer` always on and its backdrop
+ * suppressed, and adds the edge, width and dismiss behavior a side panel
+ * needs on top. It does not reimplement focus, Escape or dialog semantics —
+ * those come from `pds-modal` unchanged.
+ */
+class PdsDrawer {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.pdsDrawerOpen = createEvent(this, "pdsDrawerOpen");
+        this.pdsDrawerClose = 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() {
+        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 (hAsync(Host, { key: '66e16ca7704243e8bb98002f042fa073ec43c38b', class: {
+                'pds-drawer': true,
+                [`pds-drawer--${this.side}`]: true,
+                [`pds-drawer--${this.size}`]: true,
+            } }, hAsync("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' }, hAsync("slot", { key: 'c9ce43ca12a06c550bd130a0fa7572dec22c9c92' }))));
+    }
+    get el() { return getElement(this); }
+    static get style() { return pdsDrawerCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 260,
+        "$tagName$": "pds-drawer",
+        "$members$": {
+            "componentId": [1, "component-id"],
+            "open": [1028],
+            "side": [1],
+            "size": [1],
+            "scrollable": [4],
+            "lightDismiss": [4, "light-dismiss"],
+            "initialFocus": [1, "initial-focus"]
+        },
+        "$listeners$": [[0, "pdsModalClose", "handleModalClose"], [0, "pdsModalOpen", "handleModalOpen"], [5, "pointerdown", "handleOutsidePointerDown"]],
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+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}`;
+
+/**
+ * Fills the drawer panel's height by default — unlike `pds-modal-content`,
+ * which caps itself against the viewport for a centered, possibly-shorter
+ * modal, a drawer panel is already edge-to-edge, so its content can simply
+ * flex to fill whatever space the header and footer leave.
+ */
+class PdsDrawerContent {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    // Unwraps a nested .pds-drawer-content left by a page-cache (Turbo, bfcache) reconnect.
+    componentDidRender() {
+        unwrapReconnectedContent(this.el.querySelector('.pds-drawer-content'), '.pds-drawer-content');
+    }
+    render() {
+        return (hAsync("div", { key: '432db626c93ab42365ec1af83562eec7ae1c4674', class: "pds-drawer-content" }, hAsync("slot", { key: '901ab074f31726023add709a4953bddb43842de2' })));
+    }
+    get el() { return getElement(this); }
+    static get style() { return pdsDrawerContentCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 260,
+        "$tagName$": "pds-drawer-content",
+        "$members$": undefined,
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+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%}`;
+
+class PdsDrawerFooter {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    // Unwraps a nested .pds-drawer__footer left by a page-cache (Turbo, bfcache) reconnect.
+    componentDidRender() {
+        unwrapReconnectedContent(this.el.querySelector('.pds-drawer__footer'), '.pds-drawer__footer');
+    }
+    render() {
+        return (hAsync("footer", { key: '71cb35f7b1ccba9e4187eb8942771741f13510dc', class: "pds-drawer__footer" }, hAsync("slot", { key: '28927c76ee8194c44f416ee5d4e9ea2e0376bf5a' })));
+    }
+    get el() { return getElement(this); }
+    static get style() { return pdsDrawerFooterCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 260,
+        "$tagName$": "pds-drawer-footer",
+        "$members$": undefined,
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+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%}`;
+
+class PdsDrawerHeader {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    // Unwraps a nested .pds-drawer__header left by a page-cache (Turbo, bfcache) reconnect.
+    componentDidRender() {
+        unwrapReconnectedContent(this.el.querySelector('.pds-drawer__header'), '.pds-drawer__header');
+    }
+    render() {
+        return (hAsync("header", { key: '48d0585e0e20c9d3142635f0fc0184c0803413b8', class: "pds-drawer__header" }, hAsync("slot", { key: '14d9d0bde0116c81892140b22a2b6e9a2b1d969f' })));
+    }
+    get el() { return getElement(this); }
+    static get style() { return pdsDrawerHeaderCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 260,
+        "$tagName$": "pds-drawer-header",
+        "$members$": undefined,
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 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}`;
 
 /**
@@ -12268,7 +12606,7 @@ class PdsDropdownMenu {
         }
     }
     render() {
-        return (hAsync(Host, { key: '467662b4b14612153ba10a4d3a6f578edec52d89', id: this.componentId }, hAsync("slot", { key: 'ba1b44fe9276b96fd123694742a34bd7c8717a3d', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), hAsync("pds-box", { key: '8287d0cc6fea80eeb73ca355eb247883d6257c19', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", role: "menu", "aria-orientation": "vertical", part: "menu-panel" }, hAsync("slot", { key: '5d5aa3cc226fabaadb4572bfa38f9189dbcb55c7', onSlotchange: this.handleSlotChange }))));
+        return (hAsync(Host, { key: '7907da6a04530d01bbbd0256f0b609fa53e0a774', id: this.componentId }, hAsync("slot", { key: '2bf060c4dec082d4175a7cde759221fd4b20d706', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), hAsync("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" }, hAsync("slot", { key: '831485d66af711edc9491078827455762795bb64', onSlotchange: this.handleSlotChange }))));
     }
     get host() { return getElement(this); }
     static get style() { return pdsDropdownMenuCss(); }
@@ -12363,7 +12701,7 @@ class PdsDropdownMenuItem {
             }, 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 }, hAsync("slot", null)));
     }
     render() {
-        return (hAsync(Host, { key: 'd2a6c182b330dae3738650002a4643c0f1fd3d1a', 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 (hAsync(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 getElement(this); }
     static get style() { return pdsDropdownMenuItemCss(); }
@@ -12399,7 +12737,7 @@ class PdsDropdownMenuSeparator {
         this.disabled = false;
     }
     render() {
-        return (hAsync(Host, { key: '1058ea61d2ad7c311ee162b909df2531f3589e4c', id: this.componentId }, hAsync("hr", { key: 'a8c2f69ef5fba5ea4ea74553fe72544e31eafb1b' })));
+        return (hAsync(Host, { key: 'f55fc3b23a6ccb94a7ce865189e5d65abdd97d8c', id: this.componentId }, hAsync("hr", { key: '784a1480881a27aec69c0a2b0afd06f103912544' })));
     }
     static get style() { return pdsDropdownMenuSeparatorCss(); }
     static get cmpMeta() { return {
@@ -12979,7 +13317,7 @@ class PdsFilter {
         return null;
     }
     render() {
-        return (hAsync(Host, { key: '620b1e6b9ab4a16af9cf601381e3b3bc625677a9', id: this.componentId }, hAsync("button", { key: '6c27edb5a9584e223f0716ae2c95cf07488a041b', 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 }, hAsync("span", { key: 'ef9970dc8d453d170703e90ba8690b652e11fa5c', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (hAsync("span", { key: '8e71b9d19327117dbce1cf50d169699ab771d362', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (hAsync("div", { key: 'e1eb24326d93b0247db0e11700286af74b6b19c1', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, hAsync("slot", { key: '374f65b6dab21601c1bbd86cf661971a5c6d1d43' })))));
+        return (hAsync(Host, { key: 'bd03de5e8461e3aba4d6f014e2d64d9aada0c0e1', id: this.componentId }, hAsync("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 }, hAsync("span", { key: 'b3635542048ac52d290917260181d7313eddaff2', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (hAsync("span", { key: '0c5ef7f7655ddbee33a695703ce192f082b21bf1', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (hAsync("div", { key: 'e75c75d8e9e4596d7f0642e4e1f91deae3f2b9fa', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, hAsync("slot", { key: 'bef66af716be823ed3ac36d39a4532785df07f6b' })))));
     }
     get el() { return getElement(this); }
     static get style() { return pdsFilterCss(); }
@@ -13011,7 +13349,7 @@ class PdsFilters {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '7007a635d3866781dfd67bd2d3b2dab46d36cffc', id: this.componentId }, hAsync("div", { key: 'e6eb4c76bfb39050aaa01ad297df995de7df484b', class: "pds-filters" }, hAsync("slot", { key: '543c83c7422b3e1e9a2446618fe8119d76478df4' }))));
+        return (hAsync(Host, { key: '492357b36ec8ca8552f76aea6a4e4baf01ee92d5', id: this.componentId }, hAsync("div", { key: 'fbf56c5452b4b0627a95008a601ccd6ace59417c', class: "pds-filters" }, hAsync("slot", { key: 'c0e1d6b7b86ff39425d26dc75bf950283a371f71' }))));
     }
     static get style() { return pdsFiltersCss(); }
     static get cmpMeta() { return {
@@ -13484,9 +13822,9 @@ class PdsImage {
         this.loading = 'eager';
     }
     render() {
-        return (hAsync(Host, { key: 'fa205f03d5c378d27a66cbfd520ae2bc7ab9e9df', class: {
+        return (hAsync(Host, { key: '0c0f463a1b616ccc485b8086a0210c5d9d2b065c', class: {
                 'pds-image': true,
-            }, id: this.componentId }, hAsync("img", { key: '8d03dddf6e924ef8aebea2bf34a32e326bee329a', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
+            }, id: this.componentId }, hAsync("img", { key: '2ac4ef66ebbb39d488ce68f06b590a5fad180811', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
     }
     static get style() { return pdsImageCss(); }
     static get cmpMeta() { return {
@@ -13803,10 +14141,10 @@ class PdsInput {
             'has-prepend': this.hasPrepend,
             'has-append': this.hasAppend,
         };
-        return (hAsync(Host, { key: 'ecf4cc212e5c3ebc18082b790803e6b2ccb8ca77', "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 }, hAsync("div", { key: 'acdf92a30068fc04a17816ec6d85295b47e512ee', class: "pds-input" }, label && (hAsync("div", { key: '4569f0b3761db89e85a090eff6af1c47cb562115', class: {
+        return (hAsync(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 }, hAsync("div", { key: '27a60a963cfa1a96391b55800eba27743a2527f4', class: "pds-input" }, label && (hAsync("div", { key: '3f8ce2b254feea4b6fe9ea74318f1e6c27a75927', class: {
                 'pds-input__label-wrapper': true,
                 'visually-hidden': this.hideLabel,
-            } }, hAsync("label", { key: '90b0a863d78115fa158429db11548fc2a9ee5ae6', htmlFor: componentId, class: "pds-input__label" }, hAsync("span", { key: '3d440aaafc4daeffe45152cd23d27472d7ebf85a' }, label, this.required && hAsync("span", { key: 'c7bf6ef6191e961a106b8885cab604aa89730eba', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), hAsync("div", { key: '81f0b8a347bc9a06c753b9f31f5e30ac78e45adb', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), hAsync("input", Object.assign({ key: '41ed8dab6f7c71c6c382627ca4dc48bb95c1161d', 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 && (hAsync("p", { key: '4791ddeb01b758a94a2fddfec6093b9b39eefafa', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (hAsync("p", { key: 'd0a22ae4b0e400e1d5df55e35c0aaaa5c5ea3ab7', class: "pds-input__error-message", id: messageId(componentId, 'error') }, hAsync("pds-icon", { key: '69975cdcc15e5ab6df9e2c354977e2c6dae18f6e', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
+            } }, hAsync("label", { key: '1c290cde5a9100b11fe3059725866506d089e834', htmlFor: componentId, class: "pds-input__label" }, hAsync("span", { key: '2ebc8dafa48d6d855be5b8e1aa3bdd417d6250f3' }, label, this.required && hAsync("span", { key: '73f7d22b13739daff6aa104c140208c5b1a86d10', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), hAsync("div", { key: '4ea0b3335abbdf920ca064aa5866a060ef18c2ad', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), hAsync("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 && (hAsync("p", { key: 'f1969fe3a5f3aba65f44fcdaddd5a12d90db7fb1', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (hAsync("p", { key: 'd4df1ceff95d5db7f2d927e9fcb848444570f9a2', class: "pds-input__error-message", id: messageId(componentId, 'error') }, hAsync("pds-icon", { key: 'f69182919903aab42b7641d9a0082861f551a214', "aria-hidden": "true", icon: danger, size: "small" }), errorMessage)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -13918,8 +14256,8 @@ class PdsLink {
         const targetValue = this.target || (this.external ? '_blank' : undefined);
         const showExternalIcon = this.external;
         const relValue = targetValue === '_blank' ? 'noopener noreferrer' : undefined;
-        return (hAsync("a", { key: '5d0c5a0a5b8b80a8cdff802a3d78dad85a9ccdc4', 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 }, hAsync("slot", { key: '06b7be14d867eae1b7acba8570f1e94bdf840fbb' }, this.href), showExternalIcon &&
-            hAsync("pds-icon", { key: '678414f7d20fd20b6931cc401163180c3ad0094c', icon: launch, size: this.fontSize })));
+        return (hAsync("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 }, hAsync("slot", { key: 'f48dd74f1921400553845ea3b03720749b1a6737' }, this.href), showExternalIcon &&
+            hAsync("pds-icon", { key: '299d4f31ec32b614fd9f4d1c19acae63ee7a9169', icon: launch, size: this.fontSize })));
     }
     static get style() { return pdsLinkCss(); }
     static get cmpMeta() { return {
@@ -14000,7 +14338,7 @@ class PdsLoader {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'fc312fc9ebf973506190e693cd251f25e37f3d0a', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (hAsync("div", { key: 'c9eab32510368d1fd6db7669b3db640c229911f2', class: "pds-loader--spinner" }, hAsync("svg", { key: '359d9f171378064c6121e583efe09eace3377e44', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, hAsync("defs", { key: '263409d92ab95fa34df4e879934e04e6a587f23b' }, hAsync("linearGradient", { key: 'e9b32747efcb60bbebd8734fdd2c2d5a400974c1', id: "spinner-secondHalf" }, hAsync("stop", { key: 'db61c891cf635b72e36a152b944b6c9ce3569be3', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), hAsync("stop", { key: 'fb964af08941ad174ecaf0c329d79e25fff45a9c', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), hAsync("linearGradient", { key: '89d815d1f076ffe82d189d51fce14fb48ecb0926', id: "spinner-firstHalf" }, hAsync("stop", { key: '43b753f80ab136d38635a6ab921899fc8fd3a6b2', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), hAsync("stop", { key: '7ce201ac86ae5cd291f8fba22f1e6517d53af025', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), hAsync("g", { key: 'ea7e594df07f7d634fa2142785f0791b21a71d41', class: "pds-loader__spinner-path" }, hAsync("path", { key: '8ac8cead5078716ca9169150be8c0c64ecedc854', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), hAsync("path", { key: 'c4ed3d7f386ac59dcb540b369f52925b216ea950', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), hAsync("path", { key: 'ecc2e2b7240c23e35af8b9aa049ac45dff43ac9f', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (hAsync("div", { key: '8cb7180432a6cca86c7fcc2af3f1e05afb751a9d', class: "pds-loader--typing" }, hAsync("span", { key: 'c09247cbcf86fef899f206bee1458a1388cbdd39' }), hAsync("span", { key: '07bdfe8ab1971fa20544022412e2141721111506' }), hAsync("span", { key: '9444f7ed6a13475694e1eda50b891ff63fb91297' }))), hAsync("div", { key: '3b717ff6b9f38f9710ca0556ebbc66bd86b7e1b6', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, hAsync("slot", { key: 'ab65224fab189a30d0cf18caf086c621cbd78eaa', name: "label" }, "Loading..."))));
+        return (hAsync(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' && (hAsync("div", { key: 'd193dfdaa527debff73705cef65e3d7f7a9a69ae', class: "pds-loader--spinner" }, hAsync("svg", { key: 'c881ff2ee1d5d92ac55300bd13e9d066f7a3970f', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, hAsync("defs", { key: '998920cdc820cc4e60df39bda5707e0b6bd5d0fe' }, hAsync("linearGradient", { key: '02028f6ac070703f8b96b1723c4d2c07670e73bb', id: "spinner-secondHalf" }, hAsync("stop", { key: 'b3120c2a597d8f646e791b1ac09a262486fb29cc', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), hAsync("stop", { key: '932056b587b5e3191952506d9411c68375af6620', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), hAsync("linearGradient", { key: '14540856cb968c220f71537c012a8c415d39af85', id: "spinner-firstHalf" }, hAsync("stop", { key: 'c94d634b1dffa0c5301b8cb2c0b6e81fdb34429e', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), hAsync("stop", { key: 'b6477c000c01728a60a7fd8e182f24da4b554128', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), hAsync("g", { key: '810f7c7bcd8e33bd2bed70932ed174eef48ae711', class: "pds-loader__spinner-path" }, hAsync("path", { key: '4e54f348c563cca7e14790a34a58dacbda452824', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), hAsync("path", { key: '3968c60f27ec619aabc74a278026abdd94d4510f', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), hAsync("path", { key: '171fe08e0aec1f207704a0395388ccc57ea045d4', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (hAsync("div", { key: '60cf0b871807eb49ce73d3e63f00f5914c9c9eec', class: "pds-loader--typing" }, hAsync("span", { key: 'dfbdcc1fe558803d39caa56bb57763269c061661' }), hAsync("span", { key: '0c343f36a8d71bdc07306b3c879016686da94199' }), hAsync("span", { key: 'f2a30e560ef0c9ac26c596dbaad33eeb0e4f7ff3' }))), hAsync("div", { key: '0fa18b15a3962df872fd28136caf258cd09cafdb', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, hAsync("slot", { key: 'e8eabec0c6d24d3ad962ecee9e0ed6e0e0b4adc0', name: "label" }, "Loading..."))));
     }
     static get style() { return pdsLoaderCss(); }
     static get cmpMeta() { return {
@@ -14018,32 +14356,6 @@ class PdsLoader {
     }; }
 }
 
-/**
- * Unwraps a stale copy of a light-DOM (`shadow: false`) component's own wrapper,
- * left behind when a page-cache (Turbo, browser bfcache) reconnect nests a
- * component's previous render inside its freshly rendered one. Call from
- * `componentDidRender` with the element that directly contains the rendered
- * `<slot>` and the selector that identifies "another one of me." Unwraps in
- * place (move-then-remove) so nested content is never lost.
- *
- * `contentSelector` is only needed when the wrapper itself further nests a
- * separate content element (e.g. pds-tab's `<a class="pds-tab">` wrapping a
- * `.pds-tab__content` div) — omit it when the wrapper's own children are the
- * slotted content (e.g. pds-tabpanel's `.pds-tabpanel` div).
- */
-function unwrapReconnectedContent(container, selector, contentSelector) {
-    var _a;
-    if (container === null)
-        return;
-    let stale = container.firstElementChild;
-    while (stale === null || stale === void 0 ? void 0 : stale.matches(selector)) {
-        const source = contentSelector !== undefined ? ((_a = stale.querySelector(contentSelector)) !== null && _a !== void 0 ? _a : stale) : stale;
-        Array.from(source.childNodes).forEach((node) => container.insertBefore(node, stale));
-        stale.remove();
-        stale = container.firstElementChild;
-    }
-}
-
 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}`;
 
 class PdsModal {
@@ -14082,6 +14394,19 @@ class PdsModal {
          * @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
          */
@@ -14098,16 +14423,41 @@ class PdsModal {
             }
         };
         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
@@ -14155,6 +14505,16 @@ class PdsModal {
         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() {
@@ -14260,8 +14620,39 @@ class PdsModal {
                 // 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);
             }
@@ -14276,10 +14667,22 @@ class PdsModal {
     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();
@@ -14296,6 +14699,46 @@ class PdsModal {
         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
      */
@@ -14317,14 +14760,14 @@ class PdsModal {
         return thisZIndex === maxZIndex;
     }
     render() {
-        return (hAsync("dialog", { key: '134e913f0bf5d7bf77e67f00707a399fae986fcb', class: {
+        return (hAsync("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 }, hAsync("div", { key: '6cb819a92c00b5c8676b4d1a84301896373305f3', class: {
+            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, hAsync("div", { key: '99a53b36e160ac14dfd6d598aeaa94114855dacc', class: {
                 'pds-modal': true,
                 [`pds-modal--${this.size}`]: true,
                 'pds-modal--scrollable': this.scrollable
-            }, part: "modal" }, hAsync("slot", { key: 'aff0f88a7b9e1b4b681a6a14636153ce3a6907d5' }))));
+            }, part: "modal" }, hAsync("slot", { key: 'cfee7bdf3620d606b1d3130f4ebed4caa83084f1' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -14343,6 +14786,7 @@ class PdsModal {
             "size": [1],
             "scrollable": [4],
             "disableTopLayer": [4, "disable-top-layer"],
+            "disableInitialFocus": [4, "disable-initial-focus"],
             "focusableElementsArray": [32],
             "showModal": [64],
             "hideModal": [64]
@@ -14534,10 +14978,10 @@ class PdsModalContent {
     render() {
         // Only apply max-height style if it's not 'none'
         const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
-        return (hAsync(Host, { key: 'f3e75b90be56bb27ba5f4fde473fac474846f346' }, hAsync("div", { key: '5035d5fa319fe2aaa8adffb825f0d2babfd11a26', class: {
+        return (hAsync(Host, { key: '7bd0f26425c71e4551ae21e38d57d2124dabfc50' }, hAsync("div", { key: '120e6947e734e44883af975991781f338acd7dbc', class: {
                 'pds-modal-content': true,
                 [`pds-modal-content--border-${this.border}`]: true
-            }, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: '73299f6f7045ea50a5bf134da04f1e30cd9f233c' }))));
+            }, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: '6f2c8d44a69df8ecc1214e00604023274cee2790' }))));
     }
     get el() { return getElement(this); }
     static get style() { return pdsModalContentCss(); }
@@ -14565,7 +15009,7 @@ class PdsModalFooter {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
     }
     render() {
-        return (hAsync("footer", { key: '1220d6319585df0128924ebac52569af7645f525', class: "pds-modal__footer" }, hAsync("slot", { key: '1bbbf4897f41c802fc5773154cee3930290c906a' })));
+        return (hAsync("footer", { key: 'f344716ed1fbd77b447e10c9b78565918dc17be0', class: "pds-modal__footer" }, hAsync("slot", { key: 'ba85cf6f7f56c8f8a8ff6d24c5fa647722140fda' })));
     }
     get el() { return getElement(this); }
     static get style() { return pdsModalFooterCss(); }
@@ -14590,7 +15034,7 @@ class PdsModalHeader {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
     }
     render() {
-        return (hAsync("header", { key: '0fd8a216ae8dc149b59cd29c8706d5a45a21de15', class: "pds-modal__header" }, hAsync("slot", { key: '4bf075dfd4870621e6e0b710fcdb42aac53810b3' })));
+        return (hAsync("header", { key: '0490ac7854089dad4666e2a6509ae730f805f97f', class: "pds-modal__header" }, hAsync("slot", { key: 'b76e5a970d3f17411b9e9e5debd981298f2290d1' })));
     }
     get el() { return getElement(this); }
     static get style() { return pdsModalHeaderCss(); }
@@ -15689,10 +16133,10 @@ class PdsMultiselect {
     }
     render() {
         const hasSelections = this.selectedItems.length > 0;
-        return (hAsync(Host, { key: '4a54a778522d0a1d2f45c32928e7a663f19c0189', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: '3593eb4fa1a0ae575b1c0ed03f0763dcea04c9e6', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (hAsync("label", { key: 'f91a680ae3c3021bac6bd99368d3ef6ad6438898', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
+        return (hAsync(Host, { key: '5d4de9ca729d5bfb63a8a73f8f40328b9ab48f57', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: '2b5e1e01caaa4a6540a67e2638a20072e9f706cb', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (hAsync("label", { key: 'f23b840feb4e243d90b3a9913dab1b238e7c497d', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
                 'pds-multiselect__label': true,
                 'visually-hidden': this.hideLabel,
-            } }, this.label)), hAsync("div", { key: 'de2899f19057b8cd19cf3467251d03c1b43b73f5', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (hAsync("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
+            } }, this.label)), hAsync("div", { key: '2e1f89d6f06332e957858c0eea34fca1a9629921', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (hAsync("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
                 'pds-multiselect__trigger': true,
                 'pds-multiselect__trigger--open': this.isOpen,
                 'pds-multiselect__trigger--disabled': this.disabled,
@@ -15708,7 +16152,7 @@ class PdsMultiselect {
             }, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, hAsync("span", { class: {
                 'pds-multiselect__trigger-text': true,
                 'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
-            } }, this.getTriggerText()), hAsync("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: '199804f5352818d32542864e3a61f7a9364cc2e3', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (hAsync("p", { key: 'e6855ff0aaf18f59dced2df5d636cadb4d47427b', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("p", { key: '29eae23d8db31b9b9c292d5cd1dc5f641613ed32', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'aad6fd945998957cd28ab6eb97c4d80f0a732ea5', icon: danger, size: "small" }), this.errorMessage)), hAsync("div", { key: '7d0d56a1e097cfc0c7396c1957d16014cb071b1e', style: { display: 'none' } }, hAsync("slot", { key: '6e7fc9dbdab3977248439aa5ea14f13e0f45bbc6' })))));
+            } }, this.getTriggerText()), hAsync("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: '3d2e201157ce16abbcd12fa9254ced7f2b562a8f', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (hAsync("p", { key: '3bbf405df2e72ae730529f28273b003b3332e980', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("p", { key: 'ef4a27162b00b14c3c9dfcb695f311961f2f56e5', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: '99fb12375e2d660018276091bf8014b9bc9a672e', icon: danger, size: "small" }), this.errorMessage)), hAsync("div", { key: '8fc6369015e8d04d1dec582007733eb5db6776f5', style: { display: 'none' } }, hAsync("slot", { key: 'a808ecb0f4b2c00fca478cda5c0054c6aba29a8d' })))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -16352,7 +16796,7 @@ class PdsPopover {
         }, 16); // ~1 frame at 60fps
     }
     render() {
-        return (hAsync(Host, { key: '2e19ac35068ac25b013bd146da0b3b343eb89d75', id: this.componentId }, hAsync("span", { key: 'e982ade010dc6539593759704e5afae29ce5eba8', class: "pds-popover__trigger-wrapper" }, hAsync("slot", { key: 'f1e1ef5e3b0b52a96cb566175ea420e1d1545ccc', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), hAsync("div", { key: 'caa5762029db6430f174c8936611fe332889620d', class: "pds-popover__content-slot-wrapper" }, hAsync("slot", { key: 'cdad839643d1a5a2024cd55cdd33750f8665a366', onSlotchange: this.handleContentSlotChange }))));
+        return (hAsync(Host, { key: '760428c178ed92dfc35293181b7cef8fac3b4e26', id: this.componentId }, hAsync("span", { key: 'd12a6a33dcf0fe6f3b61972ae8e5ac604263b2ac', class: "pds-popover__trigger-wrapper" }, hAsync("slot", { key: 'd975e355a3acb9bc6d95202ec177f631bddb43bf', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), hAsync("div", { key: 'f99ae2d97c75ed8ec63fbd0a859f8b7b9f78f0d2', class: "pds-popover__content-slot-wrapper" }, hAsync("slot", { key: 'd1620c57d993496045fc3c47b55cdd0c1d07b36c', onSlotchange: this.handleContentSlotChange }))));
     }
     get el() { return getElement(this); }
     static get style() { return pdsPopoverCss(); }
@@ -16402,7 +16846,7 @@ class PdsProgress {
         this.showPercent = false;
     }
     render() {
-        return (hAsync(Host, { key: '23b8b17a11e6537d1f73cd435c66e779267c6909', class: this.animated ? { 'is-animated': this.animated } : '' }, hAsync("div", { key: '6bf201015c284f26b2bb794237aef8d4e4d532ee', class: "pds-progress" }, hAsync("label", { key: '7e144a90c1fde70e58095bda2e23b250529a8114', class: "pds-progress__label", htmlFor: this.componentId }, this.label), hAsync("progress", { key: 'ebf00485c3c7523e184fcc022e2bcc325a13458f', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && hAsync("div", { key: '6f37bd88ccb9228b0d0ca4d934a2d3cff0026533', class: "pds-progress__percentage" }, this.percent, "%")));
+        return (hAsync(Host, { key: '0ae02615ceeb094270d4d385d27dc1e539984e88', class: this.animated ? { 'is-animated': this.animated } : '' }, hAsync("div", { key: '8da2f2a5b260cb19cda3021cc9289bde18fff9fc', class: "pds-progress" }, hAsync("label", { key: 'a84106244fafed602c1f14b63d83b16f123732f4', class: "pds-progress__label", htmlFor: this.componentId }, this.label), hAsync("progress", { key: '82fb1a46fb2e7c89d5b4ed4e8e3efa590c896d0d', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && hAsync("div", { key: '36d041d1c5e656ac0864999200f48e15e53aa3f3', class: "pds-progress__percentage" }, this.percent, "%")));
     }
     static get style() { return pdsProgressCss(); }
     static get cmpMeta() { return {
@@ -16436,7 +16880,7 @@ class PdsProperty {
         this.icon = 'star';
     }
     render() {
-        return (hAsync(Host, { key: '947e0adfc46ab267b4a5f3e3da5dedcd8ab64d3e', id: this.componentId }, hAsync("pds-box", { key: 'bc6fbd4eaa162a7d9ff6348d74bf15f71e776db6', "align-items": "center", gap: "xs" }, hAsync("pds-icon", { key: '5d703e9afd94761aae842c82c7b5e9223b63b894', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), hAsync("slot", { key: 'e5e02fb21c783f7e4027591e99cd966981babc04' }))));
+        return (hAsync(Host, { key: '1ce4509363c6c40c76d7d6c17335721b348abf04', id: this.componentId }, hAsync("pds-box", { key: '8c6f5dd171e0383640aa550ccbe1b20e74de5b07', "align-items": "center", gap: "xs" }, hAsync("pds-icon", { key: '31c19e7ff0c466f2fe54ad2d2366929311f01364', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), hAsync("slot", { key: 'b5ddb877ef6f3239992a892c7990bbd4fcfa77ae' }))));
     }
     static get style() { return pdsPropertyCss(); }
     static get cmpMeta() { return {
@@ -16549,11 +16993,11 @@ class PdsRadio {
     }
     render() {
         const renderLabelAndMessages = () => [
-            hAsync("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, hAsync("input", { key: 'd7534f457e24558e0e206e2de82eac5f59b47d8a', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() ? 'visually-hidden' : '' }), hAsync("span", { key: 'bfb6a44684fcbb271c38da03b620e97067af6634', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
+            hAsync("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, hAsync("input", { key: 'faa2d815e03f6b05108af0e7934101b2d5f71c59', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() ? 'visually-hidden' : '' }), hAsync("span", { key: '22df3067667a7815e03dca45e4ef49d0e1caadcc', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
             this.helperMessage && (hAsync("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage)),
-            this.errorMessage && (hAsync("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'd0c120ce21687b550b22546330d647f9876ee4d6', icon: danger, size: "small" }), this.errorMessage))
+            this.errorMessage && (hAsync("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '6dac17ccd12d558d3b25ffb77c55d160a619d6ab', icon: danger, size: "small" }), this.errorMessage))
         ];
-        return (hAsync(Host, { key: '55e4f32776bc8a5835801cd7d48b29045d4ce17f', class: this.classNames() }, this.hasImage() && (hAsync("div", { key: '3d9bf1d624c00ea90971638b2de7b548aec73330', class: "pds-radio__image-container", part: "image-container" }, hAsync("slot", { key: 'a256ede1340cf052570330342b1ed9e5f299c821', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (hAsync("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
+        return (hAsync(Host, { key: 'b464057b9e8d5de710183803c7d5e825316b3c3b', class: this.classNames() }, this.hasImage() && (hAsync("div", { key: '692b2681221596cdf4bf6a21574edb2373d5127b', class: "pds-radio__image-container", part: "image-container" }, hAsync("slot", { key: 'd68951b5b671863d582ad1a98543a51832966b36', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (hAsync("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
     }
     get el() { return getElement(this); }
     static get style() { return labelCss$3() + pdsRadioCss(); }
@@ -16744,13 +17188,13 @@ class PdsRadioGroup {
     render() {
         const gapValue = this.getGapValue();
         const ariaDescribedBy = this.getAriaDescribedBy();
-        return (hAsync(Host, { key: '0f6b6ddc2af79fc470c050ed6b5588640fe0d7b6', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
+        return (hAsync(Host, { key: '048d4676df7c31a9ab08e4d4fc2b93866c1241fd', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
                 '--pds-radio-group-gap': gapValue,
-            } }, this.groupLabel && (hAsync("div", { key: '77dbdc4801c3ff50fa3ea6a84d3d6aa51702ad02', class: "pds-radio-group__label" }, this.groupLabel)), hAsync("div", { key: 'c8d7f6aebc39f72a57f353ac2f8677139ac77e71', class: {
+            } }, this.groupLabel && (hAsync("div", { key: '414363733d6053517bb63888fb9813af6554d4df', class: "pds-radio-group__label" }, this.groupLabel)), hAsync("div", { key: 'd368dc474bf76f5cf7d633e59f929060fbf60b83', class: {
                 'pds-radio-group__radios': true,
                 'pds-radio-group__radios--row': this.direction === 'row',
                 'pds-radio-group__radios--column': this.direction === 'column',
-            } }, hAsync("slot", { key: '605e640fada693696e0b71205d18904b0af887b0', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (hAsync("div", { key: '13cc1c7a6b70ce6826f91a68380bc46188b218e1', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("div", { key: '693dd2f784eb5de04f1b885948e7064936cffa7d', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '1569aeeeffde77d4920627020d04983e860ea52e', icon: danger, size: "small" }), this.errorMessage))));
+            } }, hAsync("slot", { key: '210e1ba8d276c2832017ea7bf3d03348aa46106a', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (hAsync("div", { key: '06015935856640afdcddfcd8833a3a0659c58698', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("div", { key: '44256d9a050feda9651f90093a298a12d9e97250', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '2b3aa1ffaa0f6a3ad0ce83d2becfcfdcc2f56fbc', icon: danger, size: "small" }), this.errorMessage))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -16848,7 +17292,7 @@ class PdsRow {
         })), (this.minHeight && {
             'min-height': this.minHeight,
         }));
-        return hAsync(Host, { key: '7d99184153a86e5d7d2c90fce98e05e9c4a36b81', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        return hAsync(Host, { key: '556bb00908d60df442b1fae17e28e54353f85f20', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
     static get style() { return pdsRowCss(); }
     static get cmpMeta() { return {
@@ -17108,7 +17552,7 @@ class PdsSelect {
     }
     render() {
         const hasAction = this.el.querySelector('[slot="action"]') !== null;
-        return (hAsync(Host, { key: 'c74f5e86a09bd3fe6e8048ca103ec9aa66a98fc6', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: '76de23d6b0d9e32fab48e09a8f6ee3211e196115', class: "pds-select" }, !this.hideLabel && (hAsync("div", { key: '1db87074447cbc819e6b06dd89135d018656a471', class: "pds-select__label-wrapper" }, hAsync("label", { key: 'bc28c3b3361a19ee14a1b79edda736340009d87d', htmlFor: this.componentId }, hAsync("span", { key: 'f0828e0e83c7c0d7cf50e08df4b861dad4df9eb9', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), hAsync("select", { key: 'd7d254887c976a95ad1f1da2ea540d6d3f986630', "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onBlur: this.onBlur, onChange: this.onSelectUpdate, onFocus: this.onFocus, onKeyDown: this.onKeyDown, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), hAsync("div", { key: '793a84d41bd5e18d64757238704a053b1135a83c', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, hAsync("slot", { key: '27ed9ff31bbf83fcbd2ed8dd2b23b97422b18d25', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && hAsync("pds-icon", { key: '43d415eab0fc8a3c02e19848a5622ea43f04256e', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
+        return (hAsync(Host, { key: '6b240f3f91bcbdc52f019b0b6c57afda91abcbc9', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: '5bcacb3b861b69d4b2a16b917bad3d7c356eab13', class: "pds-select" }, !this.hideLabel && (hAsync("div", { key: '4707b7b50a9e3144316f6c3e8b78767aee56553e', class: "pds-select__label-wrapper" }, hAsync("label", { key: '89992c65158f26fef606b4f613baf139e9fe17c8', htmlFor: this.componentId }, hAsync("span", { key: '8f05323646aca793a80310515b1cc6e0e8597736', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), hAsync("select", { key: '8381fe48cce4c6ec32ae2c0dd16bc3e188fbfda0', "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onBlur: this.onBlur, onChange: this.onSelectUpdate, onFocus: this.onFocus, onKeyDown: this.onKeyDown, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), hAsync("div", { key: 'c05f059e3c4e21d304ac1da08613d2b2d84aa342', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, hAsync("slot", { key: 'b52f06405693803c0d2309e97f2611598cac7b70', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && hAsync("pds-icon", { key: 'e1e7af5249a928402a3c5dfe418f695b4e1fa7d4', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -19855,7 +20299,7 @@ class PdsSortable {
         this.sortableInstance = Sortable.create(this.el, sortableOptions);
     }
     render() {
-        return (hAsync(Host, { key: '562bfb1ecea0b3a3f246b2e277b71f70d14b854c', class: this.classNames(), id: this.componentId }, hAsync("slot", { key: 'a1ff894a9cd6049e532d2fa744429cec6d97e280' })));
+        return (hAsync(Host, { key: '235879c63aa8e55ea819fd3bcdb30ef56dd2c0b3', class: this.classNames(), id: this.componentId }, hAsync("slot", { key: '28cb6ef1a3b1f7de15f1f2728ffa625c879890dc' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -19921,7 +20365,7 @@ class PdsSortableItem {
         }
     }
     render() {
-        return (hAsync(Host, { key: '5533907ee217d31754ac19bf712bdb903e3b1614', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (hAsync("div", { key: '37642112619986b21c16c243e8d140ae82c869da', class: "pds-sortable-item__handle" }, hAsync("pds-icon", { key: '71ec5188d7443c39ab00ba8b24ffbfbdfb3bd5b4', "aria-hidden": "true", icon: handle }))), hAsync("slot", { key: '4c5f80514336f40086a3b92d8c3d5ebb04115f4a' }), this.enableActions && (hAsync("div", { key: 'ca821be132fb88e0faa207817bb27db488475d96', class: "pds-sortable-item__actions" }, hAsync("slot", { key: '50fc7b02c86246cd60710996399c53b9f1f669c4', name: "sortable-item-actions" })))));
+        return (hAsync(Host, { key: '07dcd36e87b8fcfae7ff5f33a7bd8d44322fcbb3', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (hAsync("div", { key: 'cb2de083316c50beb63d700288c9091d01a99240', class: "pds-sortable-item__handle" }, hAsync("pds-icon", { key: '90906fe69419f1a240aa976e7024872577d00bd3', "aria-hidden": "true", icon: handle }))), hAsync("slot", { key: 'a6969eb7d575919db12f98e3fc5d82708128be8e' }), this.enableActions && (hAsync("div", { key: '5688ea0ead3c2adba9e21a7fa327adc6fdbc71b1', class: "pds-sortable-item__actions" }, hAsync("slot", { key: 'f62b4ecf0c92edae854e9b3ca5e9da6a5051f77d', name: "sortable-item-actions" })))));
     }
     get el() { return getElement(this); }
     static get style() { return pdsSortableItemCss(); }
@@ -19941,7 +20385,7 @@ class PdsSortableItem {
 
 const labelCss$1 = () => `:host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}`;
 
-const pdsSwitchCss = () => `:host{--sizing-input-toggle-size:calc(var(--pine-dimension-250) - (var(--pine-dimension-025) * 2));--pine-dimension-025:2px;--spacing-message-inline:calc(var(--pine-dimension-450) + var(--pine-dimension-150));--number-transition-timing:0.15s ease-out;-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}:host(.pds-switch--error){color:var(--pine-color-text-message-danger)}:host(.pds-switch--error) input,:host(.pds-switch--error) input:checked,:host(.pds-switch--error) input:hover:not(:disabled):not(:checked){background-color:var(--pine-color-danger)}:host(.pds-switch--error) input:focus-visible:not(:disabled):not(:checked){outline-color:var(--pine-color-focus-ring-danger)}:host(.pds-switch--error) label{color:var(--color-text-error)}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-neutral);border:0;border-radius:var(--pine-dimension-sm);cursor:pointer;display:inline-block;-ms-flex-negative:0;flex-shrink:0;height:var(--pine-dimension-250);margin:0;padding:0;position:relative;-webkit-transition:var(--number-transition-timing);transition:var(--number-transition-timing);-webkit-transition-property:background, border, color;transition-property:background, border, color;width:var(--pine-dimension-450)}input::after{background:var(--pine-color-secondary);border-radius:var(--pine-border-radius-full);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);content:"";display:block;height:var(--sizing-input-toggle-size);inset-block-start:50%;inset-inline-start:var(--pine-dimension-025);position:absolute;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:inset-inline-start var(--number-transition-timing);transition:inset-inline-start var(--number-transition-timing);width:var(--sizing-input-toggle-size)}label{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-150)}.pds-switch--error label{color:inherit}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-switch__message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs);-webkit-margin-start:var(--spacing-message-inline);margin-inline-start:var(--spacing-message-inline);width:100%}.pds-switch__message+.pds-switch__message{-webkit-margin-before:var(--spacing-message-inline);margin-block-start:var(--spacing-message-inline)}.pds-switch__message--error{color:inherit;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-switch__message--error pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}input:disabled{background-color:var(--pine-color-neutral-disabled);cursor:not-allowed}input:disabled~label{cursor:initial}input:disabled:hover::after{background-color:var(--pine-color-secondary)}input:disabled .pds-switch__message{color:initial}input:hover:not(:disabled){background-color:var(--pine-color-neutral-hover)}input:focus-visible:not(:disabled){outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}input:checked::after{inset-inline-start:calc(100% - var(--sizing-input-toggle-size) - var(--pine-dimension-025))}input:checked:not(:disabled){background-color:currentColor;color:var(--pine-color-accent)}input:checked:not(:disabled):hover{border-color:currentColor;color:var(--pine-color-accent-hover)}`;
+const pdsSwitchCss = () => `:host{--sizing-input-toggle-size:calc(var(--pine-dimension-250) - (var(--pine-dimension-025) * 2));--pine-dimension-025:2px;--spacing-message-inline:calc(var(--pine-dimension-450) + var(--pine-dimension-150));--number-transition-timing:var(--pine-motion-duration-fast) ease-out;-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}:host(.pds-switch--error){color:var(--pine-color-text-message-danger)}:host(.pds-switch--error) input,:host(.pds-switch--error) input:checked,:host(.pds-switch--error) input:hover:not(:disabled):not(:checked){background-color:var(--pine-color-danger)}:host(.pds-switch--error) input:focus-visible:not(:disabled):not(:checked){outline-color:var(--pine-color-focus-ring-danger)}:host(.pds-switch--error) label{color:var(--color-text-error)}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-neutral);border:0;border-radius:var(--pine-dimension-sm);cursor:pointer;display:inline-block;-ms-flex-negative:0;flex-shrink:0;height:var(--pine-dimension-250);margin:0;padding:0;position:relative;-webkit-transition:var(--number-transition-timing);transition:var(--number-transition-timing);-webkit-transition-property:background, border, color;transition-property:background, border, color;width:var(--pine-dimension-450)}input::after{background:var(--pine-color-secondary);border-radius:var(--pine-border-radius-full);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);content:"";display:block;height:var(--sizing-input-toggle-size);inset-block-start:50%;inset-inline-start:var(--pine-dimension-025);position:absolute;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:inset-inline-start var(--number-transition-timing);transition:inset-inline-start var(--number-transition-timing);width:var(--sizing-input-toggle-size)}label{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-150)}.pds-switch--error label{color:inherit}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-switch__message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs);-webkit-margin-start:var(--spacing-message-inline);margin-inline-start:var(--spacing-message-inline);width:100%}.pds-switch__message+.pds-switch__message{-webkit-margin-before:var(--spacing-message-inline);margin-block-start:var(--spacing-message-inline)}.pds-switch__message--error{color:inherit;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-switch__message--error pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}input:disabled{background-color:var(--pine-color-neutral-disabled);cursor:not-allowed}input:disabled~label{cursor:initial}input:disabled:hover::after{background-color:var(--pine-color-secondary)}input:disabled .pds-switch__message{color:initial}input:hover:not(:disabled){background-color:var(--pine-color-neutral-hover)}input:focus-visible:not(:disabled){outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}input:checked::after{inset-inline-start:calc(100% - var(--sizing-input-toggle-size) - var(--pine-dimension-025))}input:checked:not(:disabled){background-color:currentColor;color:var(--pine-color-accent)}input:checked:not(:disabled):hover{border-color:currentColor;color:var(--pine-color-accent-hover)}`;
 
 class PdsSwitch {
     constructor(hostRef) {
@@ -20025,9 +20469,9 @@ class PdsSwitch {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
     }
     render() {
-        return (hAsync(Host, { key: '96ee8c40c04e95b461ba2942b740503897a56b27', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, hAsync("label", { key: '441d6854f2c0b02ecf3d874198b3e0636d68c83b', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: 'ed0c344ab46d83faf902571fcd282a605f5cfbec', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), hAsync("span", { key: 'a2e89156f56d6c921be9b866823bb4b36710b40f', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
-            hAsync("div", { key: '1465778f0a69d4c87108a80603d123bf0500911d', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            hAsync("div", { key: '2a652c3019f45a060283f98ea97ac83e17d7de33', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '438895d9ad8799b540ab239ac90bedcb0231d2f0', icon: danger, size: "small" }), this.errorMessage)));
+        return (hAsync(Host, { key: '0f7a97cc04485d5ead92f1d9e1deff176bef7859', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, hAsync("label", { key: 'bb8d0849e8ac5fd63d83f30d892bb195c7ed984c', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: 'd4f1c469ed61e5511fb4fef2b587b7320b7b8d10', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), hAsync("span", { key: 'a902c71c77d143e5930f18ab3f37d3442d9190e3', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            hAsync("div", { key: '3802a9cc1068caa4955634be3c728f283dedab16', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            hAsync("div", { key: 'be0d4094af7f9c59be32faf42aed585ec92fd730', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'f0f342b703fc5db7a4b03891ed5101e0ebcde47e', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -20437,7 +20881,7 @@ class PdsTableBody {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '457fc5406a1fe67055038398e03bfad97a393747', role: "rowgroup", part: "body" }, hAsync("slot", { key: '5950bced36f7ba590f34173149cf8663ba76103b' })));
+        return (hAsync(Host, { key: '38b6b6121a4652e5b98f2ff22721e687ae401437', role: "rowgroup", part: "body" }, hAsync("slot", { key: '7ce84ac64307b9e19a8b4b72efe3e8eab34f99bf' })));
     }
     static get style() { return pdsTableBodyCss(); }
     static get cmpMeta() { return {
@@ -20575,11 +21019,11 @@ class PdsTableCell {
         return classNames.join(' ');
     }
     render() {
-        return (hAsync(Host, { key: 'b108b0fce3ff0d5c503922a6c936ffd6ca52523f', class: this.classNames(), role: "gridcell", part: "cell", tabIndex: this.truncate ? 0 : undefined, style: this.tableRef &&
+        return (hAsync(Host, { key: '1c37f341c8171d322d60647b25bfa92fdd9ea339', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, hAsync("slot", { key: 'ebc1709ef52029bc6afec2fa89a90d47620892cb' })));
+                : {} }, hAsync("slot", { key: '339b2217df131c58d76258f581a53c0bd46cbd03' })));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -20656,7 +21100,7 @@ class PdsTableHead {
         }
     }
     render() {
-        return (hAsync(Host, { key: 'd5d5906bdb23794b911ecd5904a4cc58aa5380d6', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-head-cell", { key: '85df57fb4371e4fba855e16ce62c8329b49e08cf', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (hAsync("pds-checkbox", { key: '92bd5565463e29d249d1ac71d9dc0d000f3eea79', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" })))), hAsync("slot", { key: '494dc0395da229a264c38540479f36967601cc26' })));
+        return (hAsync(Host, { key: '5815389e77b61a323dd4430625b0917a7428bf02', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-head-cell", { key: '161fdced5a7c7cd13a62fb7c1ed96e82ad2dbfd0', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (hAsync("pds-checkbox", { key: 'd6e90d844d314ef347ffb4db8b360ba36887c311', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" })))), hAsync("slot", { key: '1dd5dd37d4fca230000a6eb4b96fee87e4e67802' })));
     }
     get hostElement() { return getElement(this); }
     static get style() { return pdsTableHeadCss(); }
@@ -20877,11 +21321,11 @@ class PdsTableHeadCell {
         return classNames.join(' ');
     }
     render() {
-        return (hAsync(Host, { key: 'e0a30c326b81e0cc3fa8c0392b61f2a6625aad71', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
+        return (hAsync(Host, { key: 'c30192a432bbd8868326fc7ed4199b98a33991ff', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, hAsync("slot", { key: '3d0012983b2b552e4e61a3d84717afb9de8e572f' }), this.sortable && this.isActive && (hAsync("pds-icon", { key: '326607f90b12ecc26a731dc696d0a3b8ebb0960c', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
+                : {} }, hAsync("slot", { key: 'e725a7e576f6bc56d385c8cb0822ce255544fbcb' }), this.sortable && this.isActive && (hAsync("pds-icon", { key: '52068d114bfadcd6d4e02c86e703349bc7833716', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return pdsTableHeadCellCss(); }
@@ -21047,7 +21491,7 @@ class PdsTableRow {
         }
     }
     render() {
-        return (hAsync(Host, { key: '6bbd8bb7cd1f90de0e418748bf8d3b9240ab0cb8', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-cell", { key: '9a92396654e7cdf819536335ebe95169d4d4c26d', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, hAsync("pds-checkbox", { key: 'bf61a00da4d3c19280aae90d8eaff9515a716c52', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), hAsync("slot", { key: 'f77887e878913bea5e0ca0a281a639285a65f1c1' })));
+        return (hAsync(Host, { key: '4188f670137051d35cf73a5ca86566f65c3eca09', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-cell", { key: '122ff6ec96ea4857b863f9283bd46946dc403bff', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, hAsync("pds-checkbox", { key: '9997b31c86190fe8f25ba4d1b42b8753facbba70', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), hAsync("slot", { key: 'f9bc0700386b11a35f78d639118351675ab7150d' })));
     }
     get hostElement() { return getElement(this); }
     static get style() { return pdsTableRowCss(); }
@@ -21087,7 +21531,7 @@ class PdsTabpanel {
         unwrapReconnectedContent(this.el.querySelector('.pds-tabpanel'), '.pds-tabpanel');
     }
     render() {
-        return (hAsync(Host, { key: '342748daeeba7a5e0d2daef6eb0d1c787cdb47ea', slot: "tabpanels", class: this.stretch && this.selected ? "pds-tabpanel--stretch-active" : undefined }, hAsync("div", { key: '72826548113720f89b9adcf017c1ca02a9f7a02a', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, hAsync("slot", { key: 'f12d5bacd3ce3509c84720cdbd4441c82b1f8ced' }))));
+        return (hAsync(Host, { key: 'e1dd3a854d6ceffff0688afb7ed02f3d56ae9333', slot: "tabpanels", class: this.stretch && this.selected ? "pds-tabpanel--stretch-active" : undefined }, hAsync("div", { key: '381a763bc540659c8944ff48ccc1a41ad94dc087', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, hAsync("slot", { key: 'bdb11c6e68f701cf91fda68db5122bb9dfe7d894' }))));
     }
     get el() { return getElement(this); }
     static get style() { return pdsTabpanelCss(); }
@@ -21271,7 +21715,7 @@ class PdsTabs {
         // Navigation mode: a <nav> landmark of links (aria-current marks the current
         // page). Panel mode: the ARIA tablist of role=tab buttons over tabpanels.
         const tabList = this.isNav ? (hAsync("nav", { class: "pds-tabs__tablist", "aria-label": this.tablistLabel || undefined, part: "tab-list" }, hAsync("slot", { name: "tabs" }))) : (hAsync("div", { class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel, part: "tab-list" }, hAsync("slot", { name: "tabs" })));
-        return (hAsync(Host, { key: '97bb6d788bd7bdf393b46eaecea612d9b0c9dee4', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, tabList, hAsync("slot", { key: '252855bfa496bc3e04fbe6dc0bcb7597c7360407', name: "tabpanels" })));
+        return (hAsync(Host, { key: 'f9d0e94dcacd7b94691368f08eb77b45475c0a35', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, tabList, hAsync("slot", { key: '93c605b2bd4b8ad3dcd8f494a82fd30833e8b300', name: "tabpanels" })));
     }
     get el() { return getElement(this); }
     static get style() { return pdsTabsCss(); }
@@ -21397,7 +21841,7 @@ class PdsText {
             ? `pds-text--decoration-${this.decoration}`
             : ''}
     `;
-        return (hAsync(Tag, { key: '9ae3d5a57202ca1308c69b76645168fc8e18953b', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content", tabIndex: this.truncate ? 0 : undefined }, hAsync("slot", { key: 'e6c95b8240690a9c83927e206096bbd7615dd4d2' })));
+        return (hAsync(Tag, { key: 'cf597479ded618a0674d68fd726b828d88c0e642', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, hAsync("slot", { key: 'f9c163be5662522b012bca6b0a23cfe00860e474' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -21738,10 +22182,10 @@ class PdsTextarea {
     }
     render() {
         const value = this.getValue();
-        return (hAsync(Host, { key: 'd13869d989752c76c80a46ebb0291df2c0546cc2', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: '19454f642896485dc22bc5dac8b6ed3b4ae5627a', class: "pds-textarea" }, this.label &&
-            hAsync("div", { key: 'def9e117ba3667a542e8cec32c2eabfa701c3305', class: "pds-textarea__label-wrapper" }, hAsync("label", { key: '893a1db325ece460c627e72b765289098823e49e', htmlFor: this.componentId }, hAsync("span", { key: 'd047f17441aa81800057d7403af15f6e38c53f6c', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), hAsync("div", { key: '7d0f2fab56fee9b9d9e0facabc7e607cb6bee23b', class: "pds-textarea__field-wrapper" }, hAsync("textarea", Object.assign({ key: '261e6031c61832acde2d595248ccdc8bd5c84768', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
-            hAsync("p", { key: 'de40f9d13bda3d9a224349b7f4ca38194e7adbb5', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            hAsync("p", { key: '1306917ce521c3ad0d303d255f9e7aefd0e65de7', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: '1c9e22b9b4bf84f671797bbfb9080bdbdb7619a7', icon: danger, size: "small" }), this.errorMessage))));
+        return (hAsync(Host, { key: '838d12ba686fb041996c44522d3fd30e1b56c610', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: 'bd3eef138a5c8f2cd4e48c007561bb1b12f4e575', class: "pds-textarea" }, this.label &&
+            hAsync("div", { key: 'f83f23b17cd157d48bb5c0c5067ca5f611d73529', class: "pds-textarea__label-wrapper" }, hAsync("label", { key: '896b7b495ad6f7deb8d4738e623f0676f0a98c1f', htmlFor: this.componentId }, hAsync("span", { key: '02b06db969467f6c4e83e0f713bee0be76f8dfff', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), hAsync("div", { key: '15c5964576e73db36cee4a9ca868c28571250a27', class: "pds-textarea__field-wrapper" }, hAsync("textarea", Object.assign({ key: '4493797e03322993a8cbe5530a18a9ef984b9796', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
+            hAsync("p", { key: '9c8794ec733a3ece5eaeac74ef6a1ebb223558c3', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            hAsync("p", { key: 'c4b9be66c3f3c39ddf495708f0f03cfda03e7fc6', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'c117b8d62c055382f5d43caa7f2cb880796c495b', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -21915,13 +22359,13 @@ class PdsToast {
         return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon" });
     }
     render() {
-        return (hAsync(Host, { key: '87c9b15656a2765eb9e722c85dba5c5edbe07c42', hidden: !this.isVisible }, hAsync("div", { key: 'bd8b26ef0c33b96603313bce74505953d8fe7410', class: {
+        return (hAsync(Host, { key: 'a1ec97158a6665aa25b58b1954b4b5c622590615', hidden: !this.isVisible }, hAsync("div", { key: 'd9b01164364c76512852a260cede50000b73a563', class: {
                 'pds-toast': true,
                 [`pds-toast--${this.type}`]: this.type !== 'default',
                 'pds-toast--animating-out': this.isAnimatingOut
-            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '5f7fd6b70fe130d8b0915da07640bec01b3b2bcb', class: "pds-toast__message" }, hAsync("slot", { key: '4aa0cf737b420ae51297126b423b44d2a8610226' })), this.dismissible && (hAsync("button", { key: 'a8b8e5e9ba956b2d9cca284d114afa37b80570cf', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
+            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '1f581c7c29ea3fc795dfca061d3575c5a9895b3c', class: "pds-toast__message" }, hAsync("slot", { key: '645b31eae3be23de63ab2562234caf0be2510645' })), this.dismissible && (hAsync("button", { key: '44a62b304468c0fca0b8d490ad9c8b5932176ac9', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
                 this.dismiss();
-            }, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: 'dac8f2099b2ab8a68d208aac288d48019df6d7e7', name: "remove" }))))));
+            }, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: 'fde63f279f696d9f02875cc1beee3542c97f0c7e', name: "remove" }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -22295,9 +22739,9 @@ class PdsTooltip {
     }
     render() {
         const hostId = this.componentId || undefined;
-        return (hAsync(Host, { key: '10913091177f60b7de464e302067998e1a847304', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, hAsync("span", { key: 'f61689273c965a8374e44907003f1ec83b8f28d4', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
+        return (hAsync(Host, { key: 'a4f25d10de27757ab2551af0e5b8a53336bf8cb4', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, hAsync("span", { key: '5e9f9afbecbb335ad68b02edf999d2ec62f31a8e', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
             /* focusin/out bubble; ensure keyboard users see tooltips */
-            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: '7dbbcff01c291b1ec431c80fce898c1ac3b30a86' })), hAsync("div", { key: 'f87df4b6ead21e9f96271c5717ed93b2d9992f65', class: "pds-tooltip__content-slot-wrapper", hidden: true }, hAsync("slot", { key: 'def9f799ef340e59fbf34a0fb3c0271f0fcfd2ca', name: "content" }))));
+            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, hAsync("slot", { key: 'e142f4f09406b7bd3d1ce9005f624b91cf7ec176' })), hAsync("div", { key: 'ebe0faae0af623477486dbba56c24bc3e0a6bc66', class: "pds-tooltip__content-slot-wrapper", hidden: true }, hAsync("slot", { key: '833d31509ba48f10cd0b5eb2f5e8dc509854c25e', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -22341,6 +22785,10 @@ registerComponents([
   PdsContainer,
   PdsCopytext,
   PdsDivider,
+  PdsDrawer,
+  PdsDrawerContent,
+  PdsDrawerFooter,
+  PdsDrawerHeader,
   PdsDropdownMenu,
   PdsDropdownMenuItem,
   PdsDropdownMenuSeparator,