@pine-ds/core 4.4.3 → 4.5.0

package/dist/collection/components/pds-modal/pds-modal-footer/pds-modal-footer.js

@@ -1,12 +1,15 @@
 import { h } from "@stencil/core";
 import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
+/**
+ * @lightDom renders-markup
+ */
 export class PdsModalFooter {
     // Unwraps a nested .pds-modal__footer left by a page-cache (Turbo, bfcache) reconnect.
     componentDidRender() {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__footer'), '.pds-modal__footer');
     }
     render() {
-        return (h("footer", { key: 'ed10ed9c8ab3a472ec9e4d20683c4c209877a6c2', class: "pds-modal__footer" }, h("slot", { key: '35765b1624e35dfc540620b7fca20dba3a5c2ca7' })));
+        return (h("footer", { key: '1148892c2d6b9a461f6c04a670fceda76c1be53a', class: "pds-modal__footer" }, h("slot", { key: 'ccd754674c82c415f8c056c9dda6327df35dbd03' })));
     }
     static get is() { return "pds-modal-footer"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-modal/pds-modal-header/pds-modal-header.js

@@ -1,12 +1,15 @@
 import { h } from "@stencil/core";
 import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
+/**
+ * @lightDom renders-markup
+ */
 export class PdsModalHeader {
     // Unwraps a nested .pds-modal__header left by a page-cache (Turbo, bfcache) reconnect.
     componentDidRender() {
         unwrapReconnectedContent(this.el.querySelector('.pds-modal__header'), '.pds-modal__header');
     }
     render() {
-        return (h("header", { key: '247373607b807a1428d5b3e7726bd88b6c23776b', class: "pds-modal__header" }, h("slot", { key: '75e7cbf018c82809d23ad4095546af2cd5a01823' })));
+        return (h("header", { key: '030153b84f1ea1cb133c9ccec3ad86583995974f', class: "pds-modal__header" }, h("slot", { key: '3a479e7047f3e845a65c37d60539648c8ff78602' })));
     }
     static get is() { return "pds-modal-header"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-modal/pds-modal.js

@@ -1,9 +1,96 @@
 import { h } from "@stencil/core";
+import { closest } from "../../utils/closest";
 import { unwrapReconnectedContent } from "../../utils/reconnected-content";
 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;
+}
+/**
+ * @lightDom renders-markup
+ */
 export class PdsModal {
     constructor() {
         this.focusableElements = [];
@@ -120,6 +207,17 @@ export class PdsModal {
                 // 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();
@@ -129,13 +227,13 @@ export class PdsModal {
                 // 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();
@@ -192,23 +290,8 @@ export class PdsModal {
     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 => {
@@ -217,6 +300,7 @@ export class PdsModal {
             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
@@ -230,30 +314,11 @@ export class PdsModal {
         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
@@ -416,6 +481,30 @@ export class PdsModal {
         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('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('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';
@@ -430,14 +519,14 @@ export class PdsModal {
     }
     render() {
         const [sizeClass = 'md', customSize] = this.resolveSize();
-        return (h("dialog", { key: 'aa352ccc057e4d6183f8c17349bc71857208a928', class: {
+        return (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 }, h("div", { key: '12799824edbeea42a6f7f91e0172c6ecbde93337', class: {
+            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, 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" }, h("slot", { key: 'f517c6466d65f141fba2d41cfe36d1b8d5f29930' }))));
+            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, h("slot", { key: '8c6f9cc1a20b515659344ad041512de52761800d' }))));
     }
     static get is() { return "pds-modal"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-popover/pds-popover.js

@@ -1,5 +1,7 @@
 import { Host, h } from "@stencil/core";
 import { containsComposed } from "../../utils/closest";
+import { restoreReflectedDefault } from "../../utils/reflected-attribute-default";
+import { setAttributesIfChanged } from "../../utils/attributes";
 /**
  * @slot trigger - The trigger element for the popover
  * @slot (default) - The content to display inside the popover
@@ -15,10 +17,22 @@ export class PdsPopover {
          * 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
          */
@@ -80,6 +94,7 @@ export class PdsPopover {
             else {
                 this.triggerEl = null;
             }
+            this.observeTrigger();
         };
         /**
          * Handles changes to the default slot (popover content)
@@ -116,6 +131,9 @@ export class PdsPopover {
             }
         };
     }
+    restorePlacementDefault(newValue) {
+        this.placement = restoreReflectedDefault(this.el, 'placement', newValue, 'right');
+    }
     componentDidLoad() {
         var _a;
         // Bind event handlers for cleanup
@@ -125,6 +143,7 @@ export class PdsPopover {
         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"]');
@@ -139,20 +158,69 @@ export class PdsPopover {
             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.
+        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();
@@ -175,6 +243,7 @@ export class PdsPopover {
         }
     }
     createPortal() {
+        var _a;
         if (this.portalEl !== null)
             return;
         this.portalEl = document.createElement('div');
@@ -193,8 +262,8 @@ export class PdsPopover {
         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`;
@@ -306,10 +375,7 @@ export class PdsPopover {
         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
@@ -343,10 +409,7 @@ export class PdsPopover {
         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
@@ -572,7 +635,7 @@ export class PdsPopover {
         }, 16); // ~1 frame at 60fps
     }
     render() {
-        return (h(Host, { key: '7f02e4a9af4d2dc4cafb9187fc2263edaa79af86', id: this.componentId }, h("span", { key: '128828d5fc52478b3e9670418a8e9c2d5ce6e7f6', class: "pds-popover__trigger-wrapper" }, h("slot", { key: 'c479f39a3653d6627a20d05c3a87ea1a5e2bebf2', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: 'e730149edce755c8789ec700c0a95dfa4b4ab835', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: '2f5ab80b4d75c114568d364ce9a74a658e426766', onSlotchange: this.handleContentSlotChange }))));
+        return (h(Host, { key: '66347d4922274d25504e5be134b36f05a3f12fdc', id: this.componentId }, h("span", { key: '8f29d54d58cf0c66f86470c77c676716f1ab056f', class: "pds-popover__trigger-wrapper" }, h("slot", { key: '5c89b687cfc01e67d3c11835e77755de88f03584', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '0ca9aff3021720098d86ec29eb69cbf149ef79a9', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: 'b73c3324d3322c41c68161e9ada51499c0e49cb0', onSlotchange: this.handleContentSlotChange }))));
     }
     static get is() { return "pds-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -675,7 +738,7 @@ export class PdsPopover {
             },
             "placement": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "PlacementType",
                     "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
@@ -813,6 +876,12 @@ export class PdsPopover {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "placement",
+                "methodName": "restorePlacementDefault"
+            }];
+    }
 }
 /**
  * Instance counter for unique IDs

package/dist/collection/components/pds-progress/pds-progress.js

@@ -1,7 +1,9 @@
 import { Host, h } from "@stencil/core";
+import { HostStylingKeeper } from "../../utils/attributes";
 import { normalizeColorValue } from "../../utils/utils";
 export class PdsProgress {
     constructor() {
+        this.hostKeeper = new HostStylingKeeper();
         /**
         * Determines whether or not progress is animated.
         * @defaultValue false
@@ -18,9 +20,17 @@ export class PdsProgress {
         */
         this.showPercent = false;
     }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
     render() {
         const normalizedFillColor = normalizeColorValue(this.fillColor);
-        return (h(Host, { key: '2aaabbb78cef6237b47408a6766936a4ce065e40', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: '192ce4a08155a84577ed46d9dc342a744354213a', class: "pds-progress" }, h("label", { key: '3e9f16f9a4c5d822ef6493d6457dbb657835903a', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: '35b4cd422bb247b8ae8eeaa7c3ea231d312197c9', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: 'a4952bcda7ab062da7ff706b519476f8e7fff898', class: "pds-progress__percentage" }, this.percent, "%")));
+        const hostClass = this.animated ? { 'is-animated': this.animated } : '';
+        this.hostKeeper.record(hostClass);
+        return (h(Host, { key: '5573a5c48eee2f7968835db92afdaebb73c1b85e', class: hostClass }, h("div", { key: 'bb5cf260495be798f4272673884336022c28441e', class: "pds-progress" }, h("label", { key: '017efa649ada73ec724b930e06bbf1ab19a18f61', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: 'e648d910b072b7b2ca1c4a92c0832bf6e2ef5406', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '1f9f1733ff2cd6e2ec81e9a46759ff451cf158f7', class: "pds-progress__percentage" }, this.percent, "%")));
     }
     static get is() { return "pds-progress"; }
     static get encapsulation() { return "shadow"; }
@@ -167,4 +177,5 @@ export class PdsProgress {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }

package/dist/collection/components/pds-radio/pds-radio.js

@@ -1,13 +1,16 @@
 import { Host, h } from "@stencil/core";
+import { HostStylingKeeper } from "../../utils/attributes";
 import { assignDescription, messageId, exposeTypeProperty } from "../../utils/form";
 import { danger } from "@pine-ds/icons/icons";
 /**
  * @slot image - Custom image content to display instead of the default radio input
  * @part image-container - The container for the image
+ * @lightDom renders-markup
  */
 export class PdsRadio {
     constructor() {
         this._type = 'radio';
+        this.hostKeeper = new HostStylingKeeper();
         this._hasImage = false;
         /**
          * Determines whether or not the radio is checked.
@@ -75,9 +78,13 @@ export class PdsRadio {
         this._hasImage = this.hasImageSlot();
     }
     connectedCallback() {
+        this.hostKeeper.connect(this.el);
         // Expose type property on the element instance to match native form element behavior
         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])');
@@ -92,11 +99,13 @@ export class PdsRadio {
     }
     render() {
         const renderLabelAndMessages = () => [
-            h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, h("input", { key: '4a8736c360681b399c4e70ef9e6612d4cb4f9285', "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' : '' }), h("span", { key: '093d96ac788d713eafb2e537c812145869dddad8', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
+            h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, h("input", { key: 'add893cd82f79b9398589bd5c0a72d5ae4a90475', "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' : '' }), h("span", { key: 'b58eed8681d1932397d38ffe82515987e6486e08', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
             this.helperMessage && (h("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage)),
-            this.errorMessage && (h("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '55fc5ab2a5a18734dbd8ed452c4e3794ece7fe15', icon: danger, size: "small" }), this.errorMessage))
+            this.errorMessage && (h("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '7374924219e59eab46a7ced9e7062c3e674b4451', icon: danger, size: "small" }), this.errorMessage))
         ];
-        return (h(Host, { key: '97d0f61aeb93bb29e3d21281e72775cb274de072', class: this.classNames() }, this.hasImage() && (h("div", { key: '0d1fb05dc00617945350e9d1ffeec9e17fc4affa', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: '1cd8494378269651730ea64f25af4e9572ede794', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
+        const hostClass = this.classNames();
+        this.hostKeeper.record(hostClass);
+        return (h(Host, { key: '24269923f168d1d39ebfc1994619736f0dc8087a', class: hostClass }, this.hasImage() && (h("div", { key: '74a72bef89aa012047cbf3a1744fcd33f13bb464', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: '99dbcfdac86cb7c012fd44eab607217e21304bab', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
     }
     static get is() { return "pds-radio"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/pds-radio-group/pds-radio-group.js

@@ -3,6 +3,7 @@ import { messageId } from "../../utils/form";
 import { danger } from "@pine-ds/icons/icons";
 /**
  * @slot (default) - Child pds-radio components
+ * @lightDom renders-markup
  */
 export class PdsRadioGroup {
     constructor() {
@@ -160,13 +161,13 @@ export class PdsRadioGroup {
     render() {
         const gapValue = this.getGapValue();
         const ariaDescribedBy = this.getAriaDescribedBy();
-        return (h(Host, { key: '3f35b3cea2933ed25174387fc45d80f0d6bceced', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
+        return (h(Host, { key: '9dc78eb36bbc1b872f4320203dbbc64e43816ebf', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
                 '--pds-radio-group-gap': gapValue,
-            } }, this.groupLabel && (h("div", { key: '83764282e3049b0802e966c306654bbdda4f0c02', class: "pds-radio-group__label" }, this.groupLabel)), h("div", { key: '39c0e97e5280527d9ab597dcf4f5b0282b19d69a', class: {
+            } }, this.groupLabel && (h("div", { key: '7b6f95608dcf356b141ef5d590ff3070f83b5975', class: "pds-radio-group__label" }, this.groupLabel)), 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',
-            } }, h("slot", { key: 'ef827a254e8b9bac58f297f5bbd6a37f8e132677', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: '4d2f58d979a34e685d00f04483c20a0f9e286af2', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: 'c05a32676fd6fe8aee30e1ea5c476424e10945f3', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '1bc3177459e179af3709f1cacd329980a8a45df7', icon: danger, size: "small" }), this.errorMessage))));
+            } }, h("slot", { key: 'b5b16148f3c77d425a50b7ada8a822e9919ef5c5', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: 'ca6b98f926b8d7a53fda630170ac037c99f5ee85', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: '37b57e2622370364e619ea090712a7b79fe79501', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '6a362d048a67312b1b227f71cc4b8f821ae0817e', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-radio-group"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/pds-row/pds-row.js

@@ -1,6 +1,11 @@
 import { h, Host } from "@stencil/core";
+import { HostStylingKeeper } from "../../utils/attributes";
+/**
+ * @lightDom host-only
+ */
 export class PdsRow {
     constructor() {
+        this.hostKeeper = new HostStylingKeeper();
         /**
          * If `true`, the row will have a border.
          */
@@ -38,6 +43,12 @@ export class PdsRow {
             '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}` : ''}
@@ -55,7 +66,8 @@ export class PdsRow {
         })), (this.minHeight && {
             'min-height': this.minHeight,
         }));
-        return h(Host, { key: '2d71570cba49c0e896ffe29c0a7727d7c2872036', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        this.hostKeeper.record(`pds-row ${rowClasses}`, rowInlineStyles);
+        return h(Host, { key: 'ee3a32ae1376919c7c2d1fcf186a1b7c272ee085', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
     static get is() { return "pds-row"; }
     static get originalStyleUrls() {
@@ -272,4 +284,5 @@ export class PdsRow {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }