@pine-ds/core 4.1.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: 'cb0c1ce177b2c5bbc03c6310d1c61c2e56c87371', class: backdropClasses }, hAsync("div", { key: '0f25e178dafa91d9c9721180c933faacb03b9360', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, hAsync("div", { key: '849c0e574e020c828b3ef8a89e39ffdd6f8da68f', class: "pds-modal__header" }, hAsync("slot", { key: '0c8bcac99adafbbfe67641e3782722bbe1ac13be', name: "header" })), hAsync("div", { key: '5da01ac584f1b6d1ec8b535f6be2ac9f06ac2218', class: "pds-modal-content" }, hAsync("slot", { key: '60ab585878ef793930fb18c363c284249123f423' })), hAsync("div", { key: 'ec6f26f3fa36175cf1a6acc34807c2528b8ed886', class: "pds-modal__footer" }, hAsync("slot", { key: 'da9896baba61891eceb7805c6967741fa86906dc', 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.4.2, 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 {
@@ -11970,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}`;
 
 /**
@@ -12279,7 +12606,7 @@ class PdsDropdownMenu {
         }
     }
     render() {
-        return (hAsync(Host, { key: '30914965241f7e8e5af32e8576c651802026a996', id: this.componentId }, hAsync("slot", { key: 'ec995c9437083ca28058b974df91491b0e634a07', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), hAsync("pds-box", { key: '590a22e556d4df23eb33cbe2fa2bda296ce59b01', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", role: "menu", "aria-orientation": "vertical", part: "menu-panel" }, hAsync("slot", { key: '9b0d67a3cf63b33eb73d3e451b365dc4354a323c', 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(); }
@@ -12374,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: '5d27080b7e129f69255ecb9dd1fab183a8f7c5f6', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
+        return (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(); }
@@ -12410,7 +12737,7 @@ class PdsDropdownMenuSeparator {
         this.disabled = false;
     }
     render() {
-        return (hAsync(Host, { key: 'd0fbf00978860c7a449b5781db2f10dd7e99d1b1', id: this.componentId }, hAsync("hr", { key: 'a566c55fc3f15c0dab81fc90f5cf35d77fc0e35c' })));
+        return (hAsync(Host, { key: 'f55fc3b23a6ccb94a7ce865189e5d65abdd97d8c', id: this.componentId }, hAsync("hr", { key: '784a1480881a27aec69c0a2b0afd06f103912544' })));
     }
     static get style() { return pdsDropdownMenuSeparatorCss(); }
     static get cmpMeta() { return {
@@ -12990,7 +13317,7 @@ class PdsFilter {
         return null;
     }
     render() {
-        return (hAsync(Host, { key: '6d40e2462bf70dcd26c0e3c5ab6f12e86c65ac49', id: this.componentId }, hAsync("button", { key: '2d45a9b8ae4fd3a4d1ecc04c29ccf83fe5756e50', class: this.getTriggerClasses(), type: "button", popoverTarget: this.variant !== 'clear' ? `${this.componentId}-popover` : undefined, popoverTargetAction: this.variant !== 'clear' ? 'toggle' : undefined, onKeyDown: this.variant === 'clear' ? this.handleKeyDown : undefined, onClick: (event) => this.handleClick(event), part: "button", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": this.variant !== 'clear' ? 'true' : undefined, "aria-controls": this.variant !== 'clear' ? `${this.componentId}-popover` : undefined }, hAsync("span", { key: 'b80e2c8c4f92d17c37fa5a0c1fcc3f778f788483', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (hAsync("span", { key: '5faa099b94200071325ab8fb1b122437a81dcf61', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (hAsync("div", { key: '063bc00fedda0fba5ba4af759404f3ae23b2b6ad', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, hAsync("slot", { key: '9790cd0c8cd6a594aab094aeaa469dbcddc98d87' })))));
+        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(); }
@@ -13022,7 +13349,7 @@ class PdsFilters {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: '0f4dc3d5ecf71992a4c13f85fec62d4b60f3c6d1', id: this.componentId }, hAsync("div", { key: 'ee3edc3d752c70d7888028b45dcb1c89f297803c', class: "pds-filters" }, hAsync("slot", { key: 'de693eedf74a029a0a279855cd2602420891ef10' }))));
+        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 {
@@ -13495,9 +13822,9 @@ class PdsImage {
         this.loading = 'eager';
     }
     render() {
-        return (hAsync(Host, { key: 'dbc144927d78e2eb380639eeb8b243133a4b5379', class: {
+        return (hAsync(Host, { key: '0c0f463a1b616ccc485b8086a0210c5d9d2b065c', class: {
                 'pds-image': true,
-            }, id: this.componentId }, hAsync("img", { key: '259c1cd7ffdf4e5dd7c0ef178d28f1f835b57642', alt: this.alt, height: this.height, loading: this.loading, sizes: this.sizes, src: this.src, srcset: this.srcset, width: this.width })));
+            }, id: this.componentId }, 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 {
@@ -13814,10 +14141,10 @@ class PdsInput {
             'has-prepend': this.hasPrepend,
             'has-append': this.hasAppend,
         };
-        return (hAsync(Host, { key: '8f15b61e4a6336246aefca1112c280265996630a', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-prefix": this.hasPrefix ? 'true' : null, "has-suffix": this.hasSuffix ? 'true' : null, "has-prepend": this.hasPrepend ? 'true' : null, "has-append": this.hasAppend ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null, "full-width": this.fullWidth ? 'true' : null }, hAsync("div", { key: '9e45a632a63b813f2f097ef903db9e97f6b88b16', class: "pds-input" }, label && (hAsync("div", { key: 'e9e3710cfa43372a71bbf2440110cd43336c16e3', 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: '0717152167b9f8776e23bb95d0b3ebdc58a27e8e', htmlFor: componentId, class: "pds-input__label" }, hAsync("span", { key: 'cf350936ac9981da1773c7320d5092da2d8aa5c6' }, label, this.required && hAsync("span", { key: '115e170ee93a5bc2c4c396aaf235fd0e6ae09a13', class: "pds-input__required-indicator" }, " *"))), !this.hideLabel && this.renderAction())), hAsync("div", { key: '00839202f48a22c6a6f00fa706eee81314dc1c04', class: inputWrapperClasses }, this.renderPrepend(), this.renderPrefix(), hAsync("input", Object.assign({ key: 'cb2234ebf58e2148ea6b4b711ff09338722d4457', 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: 'e322e25b5d6d8fe9c7292087127d7d44c0a27046', class: "pds-input__helper-message", id: messageId(componentId, 'helper') }, helperMessage)), errorMessage && (hAsync("p", { key: 'e3a982cf8312fa2a16360a4667fa5286ce304e68', class: "pds-input__error-message", id: messageId(componentId, 'error') }, hAsync("pds-icon", { key: 'ffa236865ab93013f54ea0bf2f993a3c3631e919', "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); }
@@ -13929,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: '532bc4afd39f637b021556875a1744dd85d4a227', class: this.classNames(), download: this.download, href: this.href, id: this.componentId, part: "link", "aria-current": this.active ? 'page' : undefined, target: targetValue, rel: relValue, style: this.setLinkStyles(), "data-turbo": this.turbo || undefined, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined, "data-turbo-method": this.turboMethod || undefined, "data-turbo-confirm": this.turboConfirm || undefined, "data-turbo-stream": this.turboStream || undefined, "data-turbo-prefetch": this.turboPrefetch || undefined, "data-turbo-preload": this.turboPreload || undefined }, hAsync("slot", { key: '854b411525e89363fbc13fb3119c4f04e611d0a0' }, this.href), showExternalIcon &&
-            hAsync("pds-icon", { key: 'c670f8c1f46bd55b6ebd735a98c0dbff8eb24076', 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 {
@@ -14011,7 +14338,7 @@ class PdsLoader {
         }
     }
     render() {
-        return (hAsync(Host, { key: '288e980a91a4a05984ec7d16c198cff227a2e676', class: `pds-loader ${this.isLoading ? '' : 'pds-loader--hidden'}`, "aria-hidden": !this.isLoading, "aria-busy": this.isLoading, "aria-live": "polite" }, this.variant === 'spinner' && (hAsync("div", { key: 'dc8643b932182b540ce93dd87dad10f07174d59f', class: "pds-loader--spinner" }, hAsync("svg", { key: '2cec5ddfdf9772c0d20ce11a6bf070d0bc06a53b', style: this.getSvgStyle(), viewBox: "0 0 200 200", fill: "none", part: "loader-svg" }, hAsync("defs", { key: 'f2554f75fe1bd3e0e3afc1947220d3c004184e84' }, hAsync("linearGradient", { key: 'edef079f8b959604ec9f911739a78801c5f285c0', id: "spinner-secondHalf" }, hAsync("stop", { key: '337a53ea77d19e9dfd3a5d43f01f6886c71f190b', offset: "0%", "stop-opacity": "0", "stop-color": "currentColor" }), hAsync("stop", { key: 'ca2e6363e2feece31ba1a4b2de0d3ec66c4c45f9', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" })), hAsync("linearGradient", { key: '5458cf7f8e9e35e23dfc5aa4e5f7ef5c7b9d142d', id: "spinner-firstHalf" }, hAsync("stop", { key: '7cbb4bc34f8792e648c8bf1bfe6db8e319bf68cf', offset: "0%", "stop-opacity": "1", "stop-color": "currentColor" }), hAsync("stop", { key: 'febbf165e3da7d328dfa35cf5930a8069fea604e', offset: "100%", "stop-opacity": "0.5", "stop-color": "currentColor" }))), hAsync("g", { key: 'a2becedb247748508013f80c9dbd6eccc6818e6f', class: "pds-loader__spinner-path" }, hAsync("path", { key: '2df230f57210ee7c10ff22d99d3fd8a1dd17b217', stroke: "url(#spinner-secondHalf)", d: "M 4 100 A 96 96 0 0 1 196 100" }), hAsync("path", { key: 'b85ae9aebe39f99d1d06a3e03e8ef7027fa8a866', stroke: "url(#spinner-firstHalf)", d: "M 196 100 A 96 96 0 0 1 4 100" }), hAsync("path", { key: '9f0508fdf50f6274e2b0656565585198f6105b68', stroke: "currentColor", "stroke-linecap": "round", d: "M 4 100 A 96 96 0 0 1 4 98" }))))), this.variant === 'typing' && (hAsync("div", { key: '0520d0113a7b4498692e523c273616d67b90f042', class: "pds-loader--typing" }, hAsync("span", { key: 'a1083f20b9cd04d1ba685aafd736fcd154dc597f' }), hAsync("span", { key: '9eab7a6bfcca61861cbdd01953b2aa0762770b80' }), hAsync("span", { key: 'd4599150cd603fcfe6b2f50044a0ed867fad6070' }))), hAsync("div", { key: 'b37bc877a5fd6cd7249b10bca48ac50eb31f4f40', class: `pds-loader__label ${this.showLabel ? '' : 'pds-loader--hidden'}` }, hAsync("slot", { key: '689ca4190506689ca6c92b61ada5c96a2a1427ab', 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 {
@@ -14029,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 {
@@ -14093,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
          */
@@ -14109,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
@@ -14166,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() {
@@ -14271,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);
             }
@@ -14287,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();
@@ -14307,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
      */
@@ -14328,14 +14760,14 @@ class PdsModal {
         return thisZIndex === maxZIndex;
     }
     render() {
-        return (hAsync("dialog", { key: '65d204a57e193022eb475c113438a40fc77cf545', 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: 'a9f07a30f8b4d13ef7ac33068756f0fb03173e27', 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: '8505057bef9b4ed60e51422b05fea08cefce4a4b' }))));
+            }, part: "modal" }, hAsync("slot", { key: 'cfee7bdf3620d606b1d3130f4ebed4caa83084f1' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -14354,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]
@@ -14545,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: '3e8e95b159205c5c8183eb7f6c60d358290e0896' }, hAsync("div", { key: '97988c0bbcbf256fc3369ccedefe854dd196ef82', 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: 'c76eb4759b7bf4898845b65768908c896fe64f4e' }))));
+            }, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: '6f2c8d44a69df8ecc1214e00604023274cee2790' }))));
     }
     get el() { return getElement(this); }
     static get style() { return pdsModalContentCss(); }
@@ -14576,7 +15009,7 @@ class PdsModalFooter {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
     }
     render() {
-        return (hAsync("footer", { key: '63bb557978ea69aa658026f7be24433b946b2ee6', class: "pds-modal__footer" }, hAsync("slot", { key: '158a929229b0efa8720f869756076203f297c744' })));
+        return (hAsync("footer", { key: 'f344716ed1fbd77b447e10c9b78565918dc17be0', class: "pds-modal__footer" }, hAsync("slot", { key: 'ba85cf6f7f56c8f8a8ff6d24c5fa647722140fda' })));
     }
     get el() { return getElement(this); }
     static get style() { return pdsModalFooterCss(); }
@@ -14601,7 +15034,7 @@ class PdsModalHeader {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
     }
     render() {
-        return (hAsync("header", { key: 'ae4277052c04a1804e0e73f2873e636ea4cb890c', class: "pds-modal__header" }, hAsync("slot", { key: '5c4a7b463835de451c9c3f15e0ac669bf32aee23' })));
+        return (hAsync("header", { key: '0490ac7854089dad4666e2a6509ae730f805f97f', class: "pds-modal__header" }, hAsync("slot", { key: 'b76e5a970d3f17411b9e9e5debd981298f2290d1' })));
     }
     get el() { return getElement(this); }
     static get style() { return pdsModalHeaderCss(); }
@@ -15700,10 +16133,10 @@ class PdsMultiselect {
     }
     render() {
         const hasSelections = this.selectedItems.length > 0;
-        return (hAsync(Host, { key: 'a27955b3d4a7723dc92af6f9f1a4c56da5d392c6', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: '1bbea74e106b5980427610e9cbe27e2b686ded53', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (hAsync("label", { key: 'a1ba54ded3bf660d234ce430056d1b70058d4e47', 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: '74cd041317c59042452dd9b3e9d165cc88be5ecc', 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,
@@ -15719,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: '38056bbcdb0b865e9fe0b249ac3ee2c2adb089d4', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (hAsync("p", { key: '7a576cc360d15e0ec38aeb4c0665a7308e7b1506', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("p", { key: '7dadb8425fa729316867a6d9ddb49d2553d82308', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'fc295c5b5110b009a1d6372411c1faf32df9b620', icon: danger, size: "small" }), this.errorMessage)), hAsync("div", { key: '173c9f6953442fdedfdfa71264bcc3781b827701', style: { display: 'none' } }, hAsync("slot", { key: 'e31cb390048516ee400d2875ad993cd6ae07b146' })))));
+            } }, 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); }
@@ -16363,7 +16796,7 @@ class PdsPopover {
         }, 16); // ~1 frame at 60fps
     }
     render() {
-        return (hAsync(Host, { key: 'f488756aeac4d7d1223b5ccda953aa6ea54788c0', id: this.componentId }, hAsync("span", { key: '9ac844192c4389c1e9dc8548bda70b45c14b9aed', class: "pds-popover__trigger-wrapper" }, hAsync("slot", { key: '5263c5e659fc51f912bdbf92c119dc2bb1f57d4f', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), hAsync("div", { key: '717d438131ff0bff69f11513c538bf3de5c2d1a4', class: "pds-popover__content-slot-wrapper" }, hAsync("slot", { key: '060d737af3edd0d7baf5d556867122ca217d13a2', 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(); }
@@ -16413,7 +16846,7 @@ class PdsProgress {
         this.showPercent = false;
     }
     render() {
-        return (hAsync(Host, { key: '6cb8c8cacf41c0a51907a32cf92d15dea4b4493f', class: this.animated ? { 'is-animated': this.animated } : '' }, hAsync("div", { key: 'e5ad49e7b9328c2234350e3263595112b22b2ff7', class: "pds-progress" }, hAsync("label", { key: '30dab7a71ff8c4947e6d9d199c84a2295c7da7d6', class: "pds-progress__label", htmlFor: this.componentId }, this.label), hAsync("progress", { key: '74dec83ce7f68395cfe9c3adc4512e6ffe98a3b4', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && hAsync("div", { key: 'b44b9c937bc8de75cdd1c90336419b65be4fb1c0', 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 {
@@ -16447,7 +16880,7 @@ class PdsProperty {
         this.icon = 'star';
     }
     render() {
-        return (hAsync(Host, { key: 'f6ebcf8eec4bbbfe3a8717cf8c5611684d5c8929', id: this.componentId }, hAsync("pds-box", { key: '0c4b9d0154b13da6aa3ee8b04482b5591bfee46f', "align-items": "center", gap: "xs" }, hAsync("pds-icon", { key: '960c0fe6447622133f423b5547f13d7407258cbb', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), hAsync("slot", { key: '367e9265e49712d16576ba0461042e8aa2210e69' }))));
+        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 {
@@ -16560,11 +16993,11 @@ class PdsRadio {
     }
     render() {
         const renderLabelAndMessages = () => [
-            hAsync("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, hAsync("input", { key: '0c85ea35e55ccb8d0f8ce869f9c3fefe4a143ef7', "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: '3337ad8a86dc975ab2b45e989ab6f2f4bd4af90d', 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: 'c5a3a39cb6ac1afbe9998e77e98e7d46c85a3687', 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: 'e19f3967280820155c8cd14bafc32959f6a78c99', class: this.classNames() }, this.hasImage() && (hAsync("div", { key: 'e990c72656ba7687c43c12c774b547f469213d44', class: "pds-radio__image-container", part: "image-container" }, hAsync("slot", { key: '360e92eb7490bf79ac63ff0580dae76ab660d437', 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(); }
@@ -16755,13 +17188,13 @@ class PdsRadioGroup {
     render() {
         const gapValue = this.getGapValue();
         const ariaDescribedBy = this.getAriaDescribedBy();
-        return (hAsync(Host, { key: 'c8e0b5e7fce3becca58c99d1d8d56bd25db8f2fb', 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: '04d9d3154d1c34b58fb46429417b5b75da3ee96a', class: "pds-radio-group__label" }, this.groupLabel)), hAsync("div", { key: '58b1e3c7ff2ed9b2eceab6be6c0a4903919915d5', 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: '357104f35d9845b0717fa6aa896dc8bd60035b34', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (hAsync("div", { key: 'd05cc6733b4c087d59a9c8ab5e4664ab278ae020', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("div", { key: '298396cb986b169d6c0d728863cd13d8399cafbf', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'fa820d6a8531600c889d18cdcdb93e3588a26865', 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 {
@@ -16859,7 +17292,7 @@ class PdsRow {
         })), (this.minHeight && {
             'min-height': this.minHeight,
         }));
-        return hAsync(Host, { key: '13417071d1d3411e0bfe0de638c017ee96b1002f', 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 {
@@ -17119,7 +17552,7 @@ class PdsSelect {
     }
     render() {
         const hasAction = this.el.querySelector('[slot="action"]') !== null;
-        return (hAsync(Host, { key: 'a1d08dc93decbf50f95152d59ceac4ad38dd5b01', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: '8aaeeea02f9330c013084dd525499e80ac19c463', class: "pds-select" }, !this.hideLabel && (hAsync("div", { key: 'e8a6b8885eb95b68eb7229fe6bf67da4d1be1875', class: "pds-select__label-wrapper" }, hAsync("label", { key: 'e6c6d190b14b49aa5c07a5b13e486bee4499cf60', htmlFor: this.componentId }, hAsync("span", { key: 'e703a2d392f6f6f8dead73d91eb9f1d55b8a51c1', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), hAsync("select", { key: '61573ecc714d416e4cad4e5307b9bcc4a1b7e190', "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: 'acbd13e28aaca1cac0bcc2b9269083c50104bfc0', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, hAsync("slot", { key: '6f3f4cf1cb3cd71dcefdb149df68aea905b8b5eb', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && hAsync("pds-icon", { key: 'a3b2301d28bd6631cd33286ae3b93c67294e4cc6', "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); }
@@ -19866,7 +20299,7 @@ class PdsSortable {
         this.sortableInstance = Sortable.create(this.el, sortableOptions);
     }
     render() {
-        return (hAsync(Host, { key: '7c5c1c00c00f8e7122c292f83f33b0b5638a4617', class: this.classNames(), id: this.componentId }, hAsync("slot", { key: 'c418a9e41ff37672d886259c3c8a060507b2a16a' })));
+        return (hAsync(Host, { key: '235879c63aa8e55ea819fd3bcdb30ef56dd2c0b3', class: this.classNames(), id: this.componentId }, hAsync("slot", { key: '28cb6ef1a3b1f7de15f1f2728ffa625c879890dc' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -19932,7 +20365,7 @@ class PdsSortableItem {
         }
     }
     render() {
-        return (hAsync(Host, { key: '18cf8345abe65e492b09add621df93c9eac77d30', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (hAsync("div", { key: 'a9545fad581a44740da59ae64209da530c91fc97', class: "pds-sortable-item__handle" }, hAsync("pds-icon", { key: '4d0ecd4ec0ee6c0aa5249c060098d7748a05b910', "aria-hidden": "true", icon: handle }))), hAsync("slot", { key: 'f79fcb490cb435e578c3d6ff2ce4b8dcd4040555' }), this.enableActions && (hAsync("div", { key: 'eac4084b1bc7e6c0e1026ec9fea2b3a9e33ac618', class: "pds-sortable-item__actions" }, hAsync("slot", { key: '8f77cd2e46a7ed2d442f04747c2ef6b726912ad9', 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(); }
@@ -19952,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) {
@@ -20036,9 +20469,9 @@ class PdsSwitch {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
     }
     render() {
-        return (hAsync(Host, { key: '3b15b1f098a56bed7f5ab95a549a0ca1cb3444b3', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, hAsync("label", { key: 'f0a6a95ead6b8b11122c5153402fbe68e1382cb4', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: '7633dce93d0983f31492cca51f238d2e321d3316', "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: '3b0b1a38d4a0cee505bd0f1c7383af259e2da2b0', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
-            hAsync("div", { key: 'e6770c0fed9f7a8a626e91cd8aa84b8623bd4b32', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            hAsync("div", { key: '88cb91dc6cf056b0af35a1821c839166217a9eb4', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '6faf4e7b7e13193c147769d9308fb4d23425aa9c', 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); }
@@ -20448,7 +20881,7 @@ class PdsTableBody {
         registerInstance(this, hostRef);
     }
     render() {
-        return (hAsync(Host, { key: 'bd4c84fdefd61afbd4138488b04419d62021c1ad', role: "rowgroup", part: "body" }, hAsync("slot", { key: 'a16c0cfc807969c005b743293144e4f7470fe851' })));
+        return (hAsync(Host, { key: '38b6b6121a4652e5b98f2ff22721e687ae401437', role: "rowgroup", part: "body" }, hAsync("slot", { key: '7ce84ac64307b9e19a8b4b72efe3e8eab34f99bf' })));
     }
     static get style() { return pdsTableBodyCss(); }
     static get cmpMeta() { return {
@@ -20586,11 +21019,11 @@ class PdsTableCell {
         return classNames.join(' ');
     }
     render() {
-        return (hAsync(Host, { key: '1b20d85c75e5ca772f1c6fb402d06ef0f6b170a7', 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: '3d1dc98bc9e3dead532af0c5c79305eaedee62be' })));
+                : {} }, hAsync("slot", { key: '339b2217df131c58d76258f581a53c0bd46cbd03' })));
     }
     get hostElement() { return getElement(this); }
     static get watchers() { return {
@@ -20667,7 +21100,7 @@ class PdsTableHead {
         }
     }
     render() {
-        return (hAsync(Host, { key: '972440cfae0388fb28018929bcf79330cfc5f4d5', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-head-cell", { key: '13080928a925352bd35318bb5871d2ad3041d616', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (hAsync("pds-checkbox", { key: '57e7872a8620a2a7a295f2bc5354bfbe75541eba', 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: 'e1d459755b5db56bbbbbaf69f40ed994d1604b83' })));
+        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(); }
@@ -20888,11 +21321,11 @@ class PdsTableHeadCell {
         return classNames.join(' ');
     }
     render() {
-        return (hAsync(Host, { key: 'a9862d24c53e7db944724d5bc351935ae7aea5b3', 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: '2a78068e2a35f0c7c608535784dafc1401727ecc' }), this.sortable && this.isActive && (hAsync("pds-icon", { key: '7d4c28385f00450326b8796666dc81230ccb4f54', 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(); }
@@ -21058,7 +21491,7 @@ class PdsTableRow {
         }
     }
     render() {
-        return (hAsync(Host, { key: '570628eae542c3962db9b2a81615cbc9d6b7bb3c', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (hAsync("pds-table-cell", { key: '78fd4b1a2823759c0c113aa9a78ccaa0e859989d', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, hAsync("pds-checkbox", { key: '953debb5b0537543185e0feb7c38947818964a96', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), hAsync("slot", { key: '357ace6cfc64552a6cd26c66801e131f9d5d1bed' })));
+        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(); }
@@ -21098,7 +21531,7 @@ class PdsTabpanel {
         unwrapReconnectedContent(this.el.querySelector('.pds-tabpanel'), '.pds-tabpanel');
     }
     render() {
-        return (hAsync(Host, { key: 'be561d592a9c7d2458987bcc09fe5d8d253bd2ba', slot: "tabpanels", class: this.stretch && this.selected ? "pds-tabpanel--stretch-active" : undefined }, hAsync("div", { key: '98cb5eda73378d95519de8ce24c60f9263e89add', 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: '27b707d8fae77685f0cea7b0dc8c8dbcdb808f65' }))));
+        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(); }
@@ -21282,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: '43be427fec88d758d9caa2200320a0a327ac9e4d', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, tabList, hAsync("slot", { key: 'e4b1db5920dc0264811f08706406fd45c48106f9', 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(); }
@@ -21408,7 +21841,7 @@ class PdsText {
             ? `pds-text--decoration-${this.decoration}`
             : ''}
     `;
-        return (hAsync(Tag, { key: 'deef66327ac6089ba6b32d80d41c0be60b5ee768', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content", tabIndex: this.truncate ? 0 : undefined }, hAsync("slot", { key: 'b58f1d01a19f2da255abaed9c0e3e2d8fea30019' })));
+        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 {
@@ -21749,10 +22182,10 @@ class PdsTextarea {
     }
     render() {
         const value = this.getValue();
-        return (hAsync(Host, { key: '07e82bbbcc38d04c540b8576fadb366797c9bae3', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: 'fd9f64b75ff5ab4e7a1ec40fbb9f5288efee80b3', class: "pds-textarea" }, this.label &&
-            hAsync("div", { key: 'a1004e2af8d34ab2a43d2f97efeffac5e61bc8d6', class: "pds-textarea__label-wrapper" }, hAsync("label", { key: 'cb1bb601f4e2f085bdabd1fe4f4706b1cc9b3d1e', htmlFor: this.componentId }, hAsync("span", { key: '350b9c9b9ea1774a48721cc316df8ebb4aaa4764', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), hAsync("div", { key: '3e471b7a666640e042fb8051a0759c8cab3440db', class: "pds-textarea__field-wrapper" }, hAsync("textarea", Object.assign({ key: 'ccab2538b28689d3c0a78b541b4c9cff70b98396', 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: '2e50b8cbab077ab6c9149d2c5b5fbb4c6de067c4', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            hAsync("p", { key: '58fbf2e03ec60524a9c4830dc5adc9d816d7d100', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: '144b6e6133d9970c4969f27d1e719216a416991f', 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); }
@@ -21926,13 +22359,13 @@ class PdsToast {
         return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon" });
     }
     render() {
-        return (hAsync(Host, { key: 'aa1d20ad8b511950338a16cd9277f33a6438bfe5', hidden: !this.isVisible }, hAsync("div", { key: 'b19ddfcdec17bd3339cf6b283cca475ad8dda75b', 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: '8f4553ac467032c6e398e1665b41d78eedc56e30', class: "pds-toast__message" }, hAsync("slot", { key: '0a04edffd081298f6cd7f6feb3f50e89276d4e09' })), this.dismissible && (hAsync("button", { key: 'b42a2ab16a011b42e278e77fa4c0698eea3950e0', 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: 'e5ea3485a7d943ba3be144506eecb9a25b55b07d', name: "remove" }))))));
+            }, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: 'fde63f279f696d9f02875cc1beee3542c97f0c7e', name: "remove" }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -22306,9 +22739,9 @@ class PdsTooltip {
     }
     render() {
         const hostId = this.componentId || undefined;
-        return (hAsync(Host, { key: 'd9fa5c688ba3baeac14334ec9c03e887ef16115e', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, hAsync("span", { key: '44ee5332139567d3f25070f73c1e73630f00eec4', 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: '4eb9c2f891c8cdb9d7f9d944d99bf423908cbc0f' })), hAsync("div", { key: '985b373be21f07c14cd5c8c3095d5e8d290d3e7f', class: "pds-tooltip__content-slot-wrapper", hidden: true }, hAsync("slot", { key: 'cd8d6c2dca87b7d72fd01f51e5b1d538c2d93531', 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 {
@@ -22352,6 +22785,10 @@ registerComponents([
   PdsContainer,
   PdsCopytext,
   PdsDivider,
+  PdsDrawer,
+  PdsDrawerContent,
+  PdsDrawerFooter,
+  PdsDrawerHeader,
   PdsDropdownMenu,
   PdsDropdownMenuItem,
   PdsDropdownMenuSeparator,