@pine-ds/core 4.4.2 → 4.4.4

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var index = require('./index-D8Gl0bIB.js');
+var closest = require('./closest-D0qyYtJ3.js');
 var reconnectedContent = require('./reconnected-content-CpnEQcTp.js');
 
 const pdsModalCss = () => `.pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);transition:opacity var(--pine-motion-duration-base) var(--pine-motion-easing-in), visibility var(--pine-motion-duration-base) var(--pine-motion-easing-in);visibility:hidden;width:100%;z-index:var(--pine-z-index-modal)}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:var(--pine-z-index-priority)}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop[aria-modal=false]{overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop[aria-modal=false]{-webkit-backdrop-filter:none;backdrop-filter:none}.pds-modal__backdrop[aria-modal=false]::before{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);content:"";inset:0;position:fixed;z-index:-1}}.pds-modal__backdrop.open{opacity:1;-webkit-transition-timing-function:var(--pine-motion-easing-out);transition-timing-function:var(--pine-motion-easing-out);visibility:visible}.pds-modal{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:none;width:100%}.pds-modal.pds-modal--scrollable{max-height:calc(100vh - (5vh + 96px))}@supports (height: 100dvh){.pds-modal.pds-modal--scrollable{max-height:calc(100dvh - (5dvh + 96px))}}@media (min-width: 992px){.pds-modal{-webkit-margin-before:6vh;margin-block-start:6vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:6dvh;margin-block-start:6dvh}}}@media (min-width: 1200px){.pds-modal{-webkit-margin-before:8vh;margin-block-start:8vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:8dvh;margin-block-start:8dvh}}}.pds-modal--sm{max-width:520px}.pds-modal--md{max-width:700px}.pds-modal--lg{max-width:900px}.pds-modal--custom{max-width:var(--pds-modal-max-width, 700px)}.pds-modal--fullscreen{border-radius:0;height:100%;margin:0;max-height:100vh;max-width:100%}@supports (height: 100dvh){.pds-modal--fullscreen{max-height:100dvh}}.pds-modal--fullscreen.pds-modal--scrollable{max-height:100vh}@supports (height: 100dvh){.pds-modal--fullscreen.pds-modal--scrollable{max-height:100dvh}}.pds-modal--fullscreen .pds-modal-content{-ms-flex:1;flex:1}.pds-modal--scrollable pds-modal-content{-webkit-border-after:1px solid transparent;border-block-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-modal-content{overflow-y:visible}`;
@@ -9,6 +10,89 @@ const PRESET_SIZES = ['sm', 'md', 'lg', 'fullscreen'];
 const isCustomLength = (value) => /^[a-z0-9.%+\-*/(), ]+$/i.test(value) &&
     /\d/.test(value) &&
     (typeof CSS === 'undefined' || CSS.supports('max-width', value));
+const TABBABLE = [
+    'a[href]',
+    'area[href]',
+    'button',
+    'input:not([type="hidden"])',
+    'select',
+    'textarea',
+    'iframe',
+    'summary',
+    '[contenteditable]:not([contenteditable="false"])',
+    '[tabindex]',
+].join(',');
+/**
+ * Collects the tabbable elements under `root` in focus order, walking into open shadow roots and
+ * following slots, so a component's own controls (the input inside pds-combobox or pds-textarea)
+ * count without being registered here by tag name. Positive tabindex values are not reordered,
+ * and a closed shadow root can't be seen into.
+ */
+function collectTabbable(root, found) {
+    for (const child of Array.from(root.children))
+        visitTabbable(child, found);
+}
+// An editing host reports tabIndex -1 but is still a Tab stop; editable content inside it is not.
+const isTabStop = (el) => { var _a; return el.tabIndex >= 0 || (el.isContentEditable && !el.hasAttribute('tabindex') && !((_a = el.parentElement) === null || _a === void 0 ? void 0 : _a.isContentEditable)); };
+function visitTabbable(el, found) {
+    var _a, _b, _c, _d;
+    if (el.hasAttribute('inert'))
+        return;
+    if (el.localName === 'slot') {
+        const slot = el;
+        // Fallback content renders only when nothing at all is assigned, text included.
+        if (((_b = (_a = slot.assignedNodes) === null || _a === void 0 ? void 0 : _a.call(slot, { flatten: true })) !== null && _b !== void 0 ? _b : []).length === 0)
+            return collectTabbable(el, found);
+        for (const slotted of slot.assignedElements({ flatten: true }))
+            visitTabbable(slotted, found);
+        return;
+    }
+    // A delegatesFocus host passes focus to its first control, which the walk below finds.
+    const delegates = ((_c = el.shadowRoot) === null || _c === void 0 ? void 0 : _c.delegatesFocus) === true;
+    if (el instanceof HTMLElement && !delegates && isTabStop(el) && el.matches(TABBABLE) && !el.matches(':disabled')) {
+        found.push(el);
+    }
+    // A shadow host's light children render only through its slots, which the walk reaches.
+    collectTabbable((_d = el.shadowRoot) !== null && _d !== void 0 ? _d : el, found);
+}
+/** The element as a radio in a named group, or `null`. */
+const groupedRadio = (el) => el instanceof HTMLInputElement && el.type === 'radio' && el.name !== '' ? el : null;
+/**
+ * Keeps one radio per named group, as the browser does: the checked one, or the first. The others
+ * are reached with the arrow keys, so they can't be the first or last stop of the trap.
+ */
+function oneRadioPerGroup(elements) {
+    // Radios group by name and form within one tree, so each shadow root starts its own groups.
+    const groups = [];
+    for (const el of elements) {
+        const radio = groupedRadio(el);
+        if (radio === null)
+            continue;
+        const group = groups.find(([first]) => first.name === radio.name && first.form === radio.form && first.getRootNode() === radio.getRootNode());
+        if (group)
+            group.push(radio);
+        else
+            groups.push([radio]);
+    }
+    const stops = new Set(groups.map((radios) => { var _a; return (_a = radios.find((radio) => radio.checked)) !== null && _a !== void 0 ? _a : radios[0]; }));
+    return elements.filter((el) => groupedRadio(el) === null || stops.has(el));
+}
+/** Whether `node` is `ancestor` or inside it, crossing shadow roots, which `Node.contains` doesn't. */
+function containsComposed(ancestor, node) {
+    for (let current = node; current; current = current instanceof ShadowRoot ? current.host : current.parentNode) {
+        if (current === ancestor)
+            return true;
+    }
+    return false;
+}
+/** The focused element, followed down through shadow roots to the control that has focus. */
+function deepActiveElement() {
+    var _a;
+    let active = document.activeElement;
+    while ((_a = active === null || active === void 0 ? void 0 : active.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement)
+        active = active.shadowRoot.activeElement;
+    return active;
+}
 const PdsModal = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -128,6 +212,17 @@ const PdsModal = class {
                 // disableTopLayer), so do not trap Tab here.
                 if (this.disableTopLayer)
                     return;
+                // A control inside that handles Tab itself (a popup with its own trap) has already moved
+                // focus. This holds only when it listens on its own element, which runs before this
+                // document listener; one listening on document too would race it.
+                if (e.defaultPrevented)
+                    return;
+                // Every open modal hears this keydown. When focus is in a modal dialog opened above this one,
+                // that dialog traps Tab: this modal's list also holds its controls, so it would wrap first. A
+                // non-modal dialog inside (a disableTopLayer modal) doesn't trap, so this one still does.
+                const activeElement = deepActiveElement();
+                if (!activeElement || this.modalDialogAbove(activeElement))
+                    return;
                 // Content can change while the modal is open (rows fetched in, sections shown), so the
                 // first and last elements are read now rather than from the list taken on opening.
                 this.updateFocusableElements();
@@ -137,13 +232,13 @@ const PdsModal = class {
                 // Get the first and last focusable elements
                 const firstFocusableElement = this.focusableElements[0];
                 const lastFocusableElement = this.focusableElements[this.focusableElements.length - 1];
-                // Get the current active element
-                const activeElement = document.activeElement;
-                // Check if we need to wrap focus
-                const isFirstElement = activeElement === firstFocusableElement ||
-                    firstFocusableElement.contains(activeElement);
-                const isLastElement = activeElement === lastFocusableElement ||
-                    lastFocusableElement.contains(activeElement);
+                // activeElement is the control inside any shadow root, as the list holds, not the host
+                // document.activeElement reports. It's matched to its own stop first, so a stop inside a
+                // listed host isn't taken for that host; a focused node that isn't a stop counts as the
+                // innermost stop it sits in.
+                const stop = this.stopIndex(activeElement);
+                const isFirstElement = stop === 0;
+                const isLastElement = stop === this.focusableElements.length - 1;
                 // If shift + tab is pressed and focus is on the first element, move to the last element
                 if (e.shiftKey && isFirstElement) {
                     e.preventDefault();
@@ -200,23 +295,8 @@ const PdsModal = class {
     updateFocusableElements() {
         if (!this.modalRef)
             return;
-        // Get all focusable elements within the modal
-        const selector = [
-            'a[href]',
-            'button:not([disabled])',
-            'input:not([disabled])',
-            'select:not([disabled])',
-            'textarea:not([disabled])',
-            '[tabindex]:not([tabindex="-1"])',
-            'pds-button:not([disabled])',
-            'pds-link:not([disabled])',
-            'pds-input:not([disabled])',
-            'pds-checkbox:not([disabled])',
-            'pds-radio:not([disabled])',
-            'pds-switch:not([disabled])',
-            'pds-select:not([disabled])',
-        ].join(',');
-        this.focusableElements = Array.from(this.modalRef.querySelectorAll(selector));
+        this.focusableElements = [];
+        collectTabbable(this.modalRef, this.focusableElements);
         // checkVisibility() also drops an element inside a hidden ancestor, whose own computed
         // display isn't none; such an element can't take focus, so it can't anchor the trap.
         this.focusableElements = this.focusableElements.filter(el => {
@@ -225,6 +305,7 @@ const PdsModal = class {
             const style = window.getComputedStyle(el);
             return style.display !== 'none' && style.visibility !== 'hidden';
         });
+        this.focusableElements = oneRadioPerGroup(this.focusableElements);
     }
     /**
      * Sets focus to the first focusable element in the modal
@@ -238,30 +319,11 @@ const PdsModal = class {
         this.focusElement(firstElement);
     }
     /**
-     * Helper method to focus an element, with special handling for web components
+     * Focuses an element from the list. It holds the controls themselves, inside any shadow root,
+     * so they take focus directly.
      */
     focusElement(element) {
-        if (!element)
-            return;
-        try {
-            // Try standard focus first
-            element.focus();
-            // Check if focus worked
-            setTimeout(() => {
-                if (document.activeElement !== element) {
-                    // For web components, try to find a focusable element inside
-                    if (element.shadowRoot) {
-                        const focusableInShadow = element.shadowRoot.querySelector('button, [tabindex], input, a[href]');
-                        if (focusableInShadow) {
-                            focusableInShadow.focus();
-                        }
-                    }
-                }
-            }, 0);
-        }
-        catch (error) {
-            console.error('Error focusing element:', error);
-        }
+        element === null || element === void 0 ? void 0 : element.focus();
     }
     /**
      * Opens the modal
@@ -424,6 +486,30 @@ const PdsModal = class {
         const thisZIndex = this.getBackdropZIndex(this.el);
         return thisZIndex === maxZIndex;
     }
+    /** Whether a modal dialog other than this one sits between the focused element and this modal. */
+    modalDialogAbove(active) {
+        var _a;
+        for (let dialog = closest.closest('dialog[open]', active); dialog instanceof HTMLElement;) {
+            if (dialog === this.modalRef)
+                return false;
+            if (dialog.matches(':modal'))
+                return true;
+            // Up from this dialog, across a shadow root; past the document root, closest() gives nothing.
+            dialog = closest.closest('dialog[open]', (_a = dialog.parentElement) !== null && _a !== void 0 ? _a : dialog.getRootNode().host);
+        }
+        return false;
+    }
+    /** The focused element's place in the list: its own stop, or the innermost stop it sits in. */
+    stopIndex(active) {
+        const own = this.focusableElements.indexOf(active);
+        if (own >= 0)
+            return own;
+        for (let i = this.focusableElements.length - 1; i >= 0; i--) {
+            if (containsComposed(this.focusableElements[i], active))
+                return i;
+        }
+        return -1;
+    }
     resolveSize() {
         var _a;
         const size = ((_a = this.size) !== null && _a !== void 0 ? _a : '').trim() || 'md';
@@ -438,14 +524,14 @@ const PdsModal = class {
     }
     render() {
         const [sizeClass = 'md', customSize] = this.resolveSize();
-        return (index.h("dialog", { key: 'aa352ccc057e4d6183f8c17349bc71857208a928', class: {
+        return (index.h("dialog", { key: 'b6714c7e77d80bf2370f2170ffce029abe147d81', class: {
                 'pds-modal__backdrop': true,
                 'open': this.open
-            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, index.h("div", { key: '12799824edbeea42a6f7f91e0172c6ecbde93337', class: {
+            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, index.h("div", { key: '8c3319f53dd8c79c9e952785277e9e82e28b651e', class: {
                 'pds-modal': true,
                 [`pds-modal--${sizeClass}`]: true,
                 'pds-modal--scrollable': this.scrollable
-            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, index.h("slot", { key: 'f517c6466d65f141fba2d41cfe36d1b8d5f29930' }))));
+            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, index.h("slot", { key: '8c6f9cc1a20b515659344ad041512de52761800d' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -2,6 +2,8 @@
 
 var index = require('./index-D8Gl0bIB.js');
 var closest = require('./closest-D0qyYtJ3.js');
+var reflectedAttributeDefault = require('./reflected-attribute-default-DVYHG6O1.js');
+var attributes = require('./attributes-DrQqSEv4.js');
 
 const pdsPopoverCss = () => `:host{--sizing-max-width-default:352px;display:inline-block}:host .pds-popover__trigger-wrapper{display:inline-block}:host .pds-popover__content-slot-wrapper{display:none}`;
 
@@ -19,10 +21,22 @@ const PdsPopover = class {
          * Tracks if the component is still mounted to prevent memory leaks
          */
         this.isComponentMounted = true;
+        /**
+         * Set once `componentDidLoad` has built the portal, so a later reconnect knows to rebuild it
+         */
+        this.hasLoaded = false;
+        /**
+         * A popover without a componentId keeps one generated portal id, even when the portal is rebuilt
+         */
+        this.generatedPortalId = null;
         /**
          * Reference to the trigger element
          */
         this.triggerEl = null;
+        /**
+         * Puts the trigger's ARIA back when something else removes or changes it
+         */
+        this.triggerObserver = null;
         /**
          * Portal element rendered in document.body
          */
@@ -84,6 +98,7 @@ const PdsPopover = class {
             else {
                 this.triggerEl = null;
             }
+            this.observeTrigger();
         };
         /**
          * Handles changes to the default slot (popover content)
@@ -120,6 +135,9 @@ const PdsPopover = class {
             }
         };
     }
+    restorePlacementDefault(newValue) {
+        this.placement = reflectedAttributeDefault.restoreReflectedDefault(this.el, 'placement', newValue, 'right');
+    }
     componentDidLoad() {
         var _a;
         // Bind event handlers for cleanup
@@ -129,6 +147,7 @@ const PdsPopover = class {
         this.boundResizeHandler = this.handleResize.bind(this);
         // Create portal element
         this.createPortal();
+        this.hasLoaded = true;
         // Initialize trigger element by calling slot change handler
         // This is a fallback for environments where slot change might not fire reliably
         const triggerSlot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="trigger"]');
@@ -143,20 +162,69 @@ const PdsPopover = class {
             this.linkTriggerToPortal();
         }
     }
+    // The trigger is the consumer's element, so anything can rewrite its attributes (a Turbo morph
+    // matches it to server HTML that has no ARIA). Put Pine's values back when that happens.
+    observeTrigger() {
+        var _a;
+        (_a = this.triggerObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.triggerObserver = null;
+        if (this.triggerEl == null || typeof MutationObserver === 'undefined')
+            return;
+        this.triggerObserver = new MutationObserver(() => this.linkTriggerToPortal());
+        this.triggerObserver.observe(this.triggerEl, {
+            attributes: true,
+            attributeFilter: ['aria-expanded', 'aria-controls'],
+        });
+    }
     // Set ARIA attributes to establish relationship between trigger and popover
     // This mirrors the native Popover API's accessibility behavior
     linkTriggerToPortal() {
         if (this.triggerEl == null || this.portalEl == null)
             return;
-        this.triggerEl.setAttribute('aria-expanded', String(this.active));
-        this.triggerEl.setAttribute('aria-controls', this.portalEl.id);
+        // Skips values already in place, so the trigger observer's own callback doesn't loop.
+        attributes.setAttributesIfChanged(this.triggerEl, { 'aria-expanded': String(this.active), 'aria-controls': this.portalEl.id });
+    }
+    // componentDidLoad doesn't run again when a popover comes back, so rebuild whatever
+    // disconnectedCallback tore down. Each step is a no-op when nothing was.
+    connectedCallback() {
+        var _a;
+        if (!this.hasLoaded)
+            return;
+        this.isComponentMounted = true;
+        this.createPortal();
+        (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.handleTriggerClick);
+        this.observeTrigger();
+        this.linkTriggerToPortal();
+        // Still open after a move: the trigger moved, so the portal follows it.
+        if (this.active) {
+            requestAnimationFrame(() => this.handlePopoverPositioning());
+        }
     }
     disconnectedCallback() {
+        var _a;
+        // Moved in one operation (a DOM morph, or a framework reparenting it), the popover is
+        // already back in the page. Its portal is in <body>, untouched, so it stays open, with focus
+        // where it was.
+        if (this.el.isConnected)
+            return;
         this.isComponentMounted = false;
+        // Open, the content sits in the portal; put it back before the portal goes. Only listeners on
+        // the popover itself hear the close event now, but those are the ones mirroring its state.
+        if (this.active) {
+            this.restorePortalContent();
+            this.active = false;
+            this.linkTriggerToPortal();
+            this.pdsPopoverClose.emit({
+                componentId: this.componentId,
+                popoverType: this.popoverType,
+            });
+        }
         // Clean up trigger click event listener
         if (this.triggerEl != null) {
             this.triggerEl.removeEventListener('click', this.handleTriggerClick);
         }
+        (_a = this.triggerObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.triggerObserver = null;
         // Clean up all event listeners
         this.removeLightDismissListeners();
         this.removeScrollAndResizeListeners();
@@ -179,6 +247,7 @@ const PdsPopover = class {
         }
     }
     createPortal() {
+        var _a;
         if (this.portalEl !== null)
             return;
         this.portalEl = document.createElement('div');
@@ -197,8 +266,8 @@ const PdsPopover = class {
         this.portalEl.style.padding = 'var(--pine-dimension-md)';
         // Generate unique ID
         if (!this.componentId) {
-            const suffix = PdsPopover.instanceCounter++;
-            this.portalEl.id = `pds-popover-portal-${suffix}`;
+            (_a = this.generatedPortalId) !== null && _a !== void 0 ? _a : (this.generatedPortalId = `pds-popover-portal-${PdsPopover.instanceCounter++}`);
+            this.portalEl.id = this.generatedPortalId;
         }
         else {
             this.portalEl.id = `${this.componentId}-portal`;
@@ -310,10 +379,7 @@ const PdsPopover = class {
         this.active = true;
         // Record open timestamp to prevent immediate close from opening click
         this.openTimestamp = Date.now();
-        // Update ARIA expanded state on trigger
-        if (this.triggerEl) {
-            this.triggerEl.setAttribute('aria-expanded', 'true');
-        }
+        this.linkTriggerToPortal();
         // Update portal content with latest slot content
         this.updatePortalContent();
         // Show portal
@@ -347,10 +413,7 @@ const PdsPopover = class {
         this.active = false;
         // Restoring the content drops its focus to the body, so check where focus is first.
         const focusWasInside = this.portalEl.contains(document.activeElement);
-        // Update ARIA expanded state on trigger
-        if (this.triggerEl) {
-            this.triggerEl.setAttribute('aria-expanded', 'false');
-        }
+        this.linkTriggerToPortal();
         // Restore content back to original slot positions
         this.restorePortalContent();
         // Hide portal
@@ -576,9 +639,14 @@ const PdsPopover = class {
         }, 16); // ~1 frame at 60fps
     }
     render() {
-        return (index.h(index.Host, { key: '7f02e4a9af4d2dc4cafb9187fc2263edaa79af86', id: this.componentId }, index.h("span", { key: '128828d5fc52478b3e9670418a8e9c2d5ce6e7f6', class: "pds-popover__trigger-wrapper" }, index.h("slot", { key: 'c479f39a3653d6627a20d05c3a87ea1a5e2bebf2', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), index.h("div", { key: 'e730149edce755c8789ec700c0a95dfa4b4ab835', class: "pds-popover__content-slot-wrapper" }, index.h("slot", { key: '2f5ab80b4d75c114568d364ce9a74a658e426766', onSlotchange: this.handleContentSlotChange }))));
+        return (index.h(index.Host, { key: '66347d4922274d25504e5be134b36f05a3f12fdc', id: this.componentId }, index.h("span", { key: '8f29d54d58cf0c66f86470c77c676716f1ab056f', class: "pds-popover__trigger-wrapper" }, index.h("slot", { key: '5c89b687cfc01e67d3c11835e77755de88f03584', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), index.h("div", { key: '0ca9aff3021720098d86ec29eb69cbf149ef79a9', class: "pds-popover__content-slot-wrapper" }, index.h("slot", { key: 'b73c3324d3322c41c68161e9ada51499c0e49cb0', onSlotchange: this.handleContentSlotChange }))));
     }
     get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "placement": [{
+                "restorePlacementDefault": 0
+            }]
+    }; }
 };
 /**
  * Instance counter for unique IDs

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var index = require('./index-D8Gl0bIB.js');
+var attributes = require('./attributes-DrQqSEv4.js');
 var utils = require('./utils-BhRmyxT8.js');
 
 const pdsProgressCss = () => `:host{--color-progress-fill:var(--pine-color-primary);--sizing-progress-bar-width:100%;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;width:var(--sizing-progress-bar-width)}@-webkit-keyframes progressBar{0%{width:0}100%{width:var(--sizing-progress-bar-width)}}@keyframes progressBar{0%{width:0}100%{width:var(--sizing-progress-bar-width)}}.pds-progress{-ms-flex-align:center;align-items:center;background-color:var(--pine-color-background-muted);border-radius:var(--pine-dimension-2xs);display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:var(--pine-dimension-xs);position:relative;width:100%}:host(.is-animated) progress,:host(.is-animated) progress::-webkit-progress-bar{-webkit-animation:progressBar 3s ease;animation:progressBar 3s ease;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}progress,progress::-webkit-progress-bar{background-color:transparent;border:0;height:var(--pine-dimension-xs);width:100%}progress::-webkit-progress-value{background:var(--color-progress-fill, var(--pine-color-primary));border-radius:var(--pine-dimension-2xs)}progress::-moz-progress-bar{background:var(--color-progress-fill, var(--pine-color-primary));border-radius:var(--pine-dimension-2xs)}.pds-progress__label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.pds-progress__percentage{font-weight:var(--pine-font-weight-medium);-webkit-margin-start:calc(var(--pine-dimension-md) / 2);margin-inline-start:calc(var(--pine-dimension-md) / 2)}`;
@@ -8,6 +9,7 @@ const pdsProgressCss = () => `:host{--color-progress-fill:var(--pine-color-prima
 const PdsProgress = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.hostKeeper = new attributes.HostStylingKeeper();
         /**
         * Determines whether or not progress is animated.
         * @defaultValue false
@@ -24,10 +26,19 @@ const PdsProgress = class {
         */
         this.showPercent = false;
     }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
     render() {
         const normalizedFillColor = utils.normalizeColorValue(this.fillColor);
-        return (index.h(index.Host, { key: '2aaabbb78cef6237b47408a6766936a4ce065e40', class: this.animated ? { 'is-animated': this.animated } : '' }, index.h("div", { key: '192ce4a08155a84577ed46d9dc342a744354213a', class: "pds-progress" }, index.h("label", { key: '3e9f16f9a4c5d822ef6493d6457dbb657835903a', class: "pds-progress__label", htmlFor: this.componentId }, this.label), index.h("progress", { key: '35b4cd422bb247b8ae8eeaa7c3ea231d312197c9', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && index.h("div", { key: 'a4952bcda7ab062da7ff706b519476f8e7fff898', class: "pds-progress__percentage" }, this.percent, "%")));
+        const hostClass = this.animated ? { 'is-animated': this.animated } : '';
+        this.hostKeeper.record(hostClass);
+        return (index.h(index.Host, { key: '5573a5c48eee2f7968835db92afdaebb73c1b85e', class: hostClass }, index.h("div", { key: 'bb5cf260495be798f4272673884336022c28441e', class: "pds-progress" }, index.h("label", { key: '017efa649ada73ec724b930e06bbf1ab19a18f61', class: "pds-progress__label", htmlFor: this.componentId }, this.label), index.h("progress", { key: 'e648d910b072b7b2ca1c4a92c0832bf6e2ef5406', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && index.h("div", { key: '1f9f1733ff2cd6e2ec81e9a46759ff451cf158f7', class: "pds-progress__percentage" }, this.percent, "%")));
     }
+    get el() { return index.getElement(this); }
 };
 PdsProgress.style = pdsProgressCss();
 

package/dist/cjs/pds-radio-group.cjs.entry.js

@@ -164,13 +164,13 @@ const PdsRadioGroup = class {
     render() {
         const gapValue = this.getGapValue();
         const ariaDescribedBy = this.getAriaDescribedBy();
-        return (index.h(index.Host, { key: '3f35b3cea2933ed25174387fc45d80f0d6bceced', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
+        return (index.h(index.Host, { key: '9dc78eb36bbc1b872f4320203dbbc64e43816ebf', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
                 '--pds-radio-group-gap': gapValue,
-            } }, this.groupLabel && (index.h("div", { key: '83764282e3049b0802e966c306654bbdda4f0c02', class: "pds-radio-group__label" }, this.groupLabel)), index.h("div", { key: '39c0e97e5280527d9ab597dcf4f5b0282b19d69a', class: {
+            } }, this.groupLabel && (index.h("div", { key: '7b6f95608dcf356b141ef5d590ff3070f83b5975', class: "pds-radio-group__label" }, this.groupLabel)), index.h("div", { key: '6e1a634c9b81ca3f3bbbe9c6590bcd4efc97e6ea', class: {
                 'pds-radio-group__radios': true,
                 'pds-radio-group__radios--row': this.direction === 'row',
                 'pds-radio-group__radios--column': this.direction === 'column',
-            } }, index.h("slot", { key: 'ef827a254e8b9bac58f297f5bbd6a37f8e132677', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (index.h("div", { key: '4d2f58d979a34e685d00f04483c20a0f9e286af2', class: "pds-radio-group__message", id: form.messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (index.h("div", { key: 'c05a32676fd6fe8aee30e1ea5c476424e10945f3', class: "pds-radio-group__message pds-radio-group__message--error", id: form.messageId(this._groupId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: '1bc3177459e179af3709f1cacd329980a8a45df7', icon: index$1.danger, size: "small" }), this.errorMessage))));
+            } }, index.h("slot", { key: 'b5b16148f3c77d425a50b7ada8a822e9919ef5c5', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (index.h("div", { key: 'ca6b98f926b8d7a53fda630170ac037c99f5ee85', class: "pds-radio-group__message", id: form.messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (index.h("div", { key: '37b57e2622370364e619ea090712a7b79fe79501', class: "pds-radio-group__message pds-radio-group__message--error", id: form.messageId(this._groupId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: '6a362d048a67312b1b227f71cc4b8f821ae0817e', icon: index$1.danger, size: "small" }), this.errorMessage))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,6 +1,7 @@
 'use strict';
 
 var index = require('./index-D8Gl0bIB.js');
+var attributes = require('./attributes-DrQqSEv4.js');
 var form = require('./form-MhwfKTuo.js');
 var index$1 = require('./index-D-QQKB0y.js');
 
@@ -13,6 +14,7 @@ const PdsRadio = class {
         index.registerInstance(this, hostRef);
         this.pdsRadioChange = index.createEvent(this, "pdsRadioChange");
         this._type = 'radio';
+        this.hostKeeper = new attributes.HostStylingKeeper();
         this._hasImage = false;
         /**
          * Determines whether or not the radio is checked.
@@ -80,9 +82,13 @@ const PdsRadio = class {
         this._hasImage = this.hasImageSlot();
     }
     connectedCallback() {
+        this.hostKeeper.connect(this.el);
         // Expose type property on the element instance to match native form element behavior
         form.exposeTypeProperty(this.el, () => this._type);
     }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
     // Discards stale hidden label/message/wrapper copies left by a page-cache (Turbo, bfcache) reconnect, rescuing real [slot="image"] content stranded inside a stale image-container first.
     componentDidRender() {
         const freshImageContainer = this.el.querySelector('.pds-radio__image-container:not([hidden])');
@@ -97,11 +103,13 @@ const PdsRadio = class {
     }
     render() {
         const renderLabelAndMessages = () => [
-            index.h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, index.h("input", { key: '4a8736c360681b399c4e70ef9e6612d4cb4f9285', "aria-describedby": form.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' : '' }), index.h("span", { key: '093d96ac788d713eafb2e537c812145869dddad8', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
+            index.h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, index.h("input", { key: 'add893cd82f79b9398589bd5c0a72d5ae4a90475', "aria-describedby": form.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' : '' }), index.h("span", { key: 'b58eed8681d1932397d38ffe82515987e6486e08', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
             this.helperMessage && (index.h("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: form.messageId(this.componentId, 'helper') }, this.helperMessage)),
-            this.errorMessage && (index.h("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: form.messageId(this.componentId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: '55fc5ab2a5a18734dbd8ed452c4e3794ece7fe15', icon: index$1.danger, size: "small" }), this.errorMessage))
+            this.errorMessage && (index.h("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: form.messageId(this.componentId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: '7374924219e59eab46a7ced9e7062c3e674b4451', icon: index$1.danger, size: "small" }), this.errorMessage))
         ];
-        return (index.h(index.Host, { key: '97d0f61aeb93bb29e3d21281e72775cb274de072', class: this.classNames() }, this.hasImage() && (index.h("div", { key: '0d1fb05dc00617945350e9d1ffeec9e17fc4affa', class: "pds-radio__image-container", part: "image-container" }, index.h("slot", { key: '1cd8494378269651730ea64f25af4e9572ede794', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (index.h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
+        const hostClass = this.classNames();
+        this.hostKeeper.record(hostClass);
+        return (index.h(index.Host, { key: '24269923f168d1d39ebfc1994619736f0dc8087a', class: hostClass }, this.hasImage() && (index.h("div", { key: '74a72bef89aa012047cbf3a1744fcd33f13bb464', class: "pds-radio__image-container", part: "image-container" }, index.h("slot", { key: '99dbcfdac86cb7c012fd44eab607217e21304bab', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (index.h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -1,12 +1,14 @@
 'use strict';
 
 var index = require('./index-D8Gl0bIB.js');
+var attributes = require('./attributes-DrQqSEv4.js');
 
 const pdsRowCss = () => `:host{--row-gap-y:var(--pine-dimension-125);--row-gap-x:var(--pine-dimension-125);display:block;-webkit-margin-after:calc(var(--row-gap-y) * -1);margin-block-end:calc(var(--row-gap-y) * -1);-webkit-margin-before:calc(var(--row-gap-y) * -1);margin-block-start:calc(var(--row-gap-y) * -1);-webkit-margin-end:calc(var(--row-gap-x) * -0.5);margin-inline-end:calc(var(--row-gap-x) * -0.5);-webkit-margin-start:calc(var(--row-gap-x) * -0.5);margin-inline-start:calc(var(--row-gap-x) * -0.5)}.pds-row{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-margin-after:calc(var(--row-gap-y) * -1);margin-block-end:calc(var(--row-gap-y) * -1);-webkit-margin-before:calc(var(--row-gap-y) * -1);margin-block-start:calc(var(--row-gap-y) * -1);-webkit-margin-end:calc(var(--row-gap-x) * -1);margin-inline-end:calc(var(--row-gap-x) * -1);-webkit-margin-start:calc(var(--row-gap-x) * -1);margin-inline-start:calc(var(--row-gap-x) * -1)}@layer layout{.pds-row>*{-webkit-padding-after:calc(var(--row-gap-y));padding-block-end:calc(var(--row-gap-y));-webkit-padding-before:calc(var(--row-gap-y));padding-block-start:calc(var(--row-gap-y));-webkit-padding-end:calc(var(--row-gap-x));padding-inline-end:calc(var(--row-gap-x));-webkit-padding-start:calc(var(--row-gap-x));padding-inline-start:calc(var(--row-gap-x))}}.pds-row--no-wrap{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.pds-row--border{border:var(--pine-border)}.pds-justify-content-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.pds-align-items-start{-ms-flex-align:start;align-items:start}.pds-align-items-center{-ms-flex-align:center;align-items:center}.pds-align-items-end{-ms-flex-align:end;align-items:end}.pds-align-items-stretch{-ms-flex-align:stretch;align-items:stretch}.pds-align-items-baseline{-ms-flex-align:baseline;align-items:baseline}`;
 
 const PdsRow = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.hostKeeper = new attributes.HostStylingKeeper();
         /**
          * If `true`, the row will have a border.
          */
@@ -44,6 +46,12 @@ const PdsRow = class {
             '800': 'var(--pine-dimension-800)'
         };
     }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
     render() {
         const rowClasses = `
     ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}
@@ -61,8 +69,10 @@ const PdsRow = class {
         })), (this.minHeight && {
             'min-height': this.minHeight,
         }));
-        return index.h(index.Host, { key: '2d71570cba49c0e896ffe29c0a7727d7c2872036', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        this.hostKeeper.record(`pds-row ${rowClasses}`, rowInlineStyles);
+        return index.h(index.Host, { key: 'ee3a32ae1376919c7c2d1fcf186a1b7c272ee085', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
+    get el() { return index.getElement(this); }
 };
 PdsRow.style = pdsRowCss();