@pine-ds/core 4.5.0 → 4.7.0

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

@@ -1,11 +1,63 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-2HMD-zUO.js';
-import { c as containsComposed } from './closest-DHPzKMVS.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Cw9J31qd.js';
+import { c as containsComposed, a as closest } from './closest-DHPzKMVS.js';
 import { r as restoreReflectedDefault } from './reflected-attribute-default-t3idJwV0.js';
-import { s as setAttributesIfChanged } from './attributes-CF5K2pxn.js';
-import './keep-hydrated-Dv7ssOTc.js';
+import { s as setAttributesIfChanged } from './attributes-WXw_I_uJ.js';
+import { l as limitRestores } from './keep-hydrated-BLG6RDBt.js';
+
+/**
+ * Escapes a string so it's safe to interpolate into a CSS identifier (an id selector like `#${id}`)
+ * or into CSS text (a stylesheet rule referencing that id). Equivalent to the native `CSS.escape`,
+ * reimplemented because Stencil's unit-test DOM (`newSpecPage`'s mock-doc) doesn't provide it.
+ * @param value - The string to escape, e.g. a consumer-supplied id
+ */
+const cssEscape = (value) => {
+    const string = String(value);
+    const length = string.length;
+    const firstCodeUnit = string.charCodeAt(0);
+    let result = '';
+    for (let index = 0; index < length; index++) {
+        const codeUnit = string.charCodeAt(index);
+        if (codeUnit === 0x0000) {
+            result += '�';
+            continue;
+        }
+        if ((codeUnit >= 0x0001 && codeUnit <= 0x001f) ||
+            codeUnit === 0x007f ||
+            (index === 0 && codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
+            (index === 1 && codeUnit >= 0x0030 && codeUnit <= 0x0039 && firstCodeUnit === 0x002d)) {
+            result += `\\${codeUnit.toString(16)} `;
+            continue;
+        }
+        if (index === 0 && length === 1 && codeUnit === 0x002d) {
+            result += `\\${string.charAt(index)}`;
+            continue;
+        }
+        if (codeUnit >= 0x0080 ||
+            codeUnit === 0x002d ||
+            codeUnit === 0x005f ||
+            (codeUnit >= 0x0030 && codeUnit <= 0x0039) ||
+            (codeUnit >= 0x0041 && codeUnit <= 0x005a) ||
+            (codeUnit >= 0x0061 && codeUnit <= 0x007a)) {
+            result += string.charAt(index);
+            continue;
+        }
+        result += `\\${string.charAt(index)}`;
+    }
+    return result;
+};
 
 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}`;
 
+/** Open auto popovers, in the order they opened: Escape goes to the last one it applies to. */
+const openAutoPopovers = [];
+/** 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 PdsPopover = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
@@ -37,7 +89,7 @@ const PdsPopover = class {
          */
         this.triggerObserver = null;
         /**
-         * Portal element rendered in document.body
+         * Portal element: in document.body, or in the open dialog the popover is in
          */
         this.portalEl = null;
         /**
@@ -133,6 +185,26 @@ const PdsPopover = class {
                     break;
             }
         };
+        /** The focus style copied into a shadow root the panel opened in, which `document.head` can't reach. */
+        this.shadowFocusStyle = null;
+        /** The dialog the panel was opened in, closed along with it. */
+        this.watchedDialog = null;
+        this.onDialogClose = () => {
+            this.hide();
+        };
+        /**
+         * Inside a dialog, the panel can sit in a form that wraps the dialog, which a body portal never
+         * did. A submit from the panel (a button in it, or Enter in a field in it) is stopped, so the
+         * panel behaves as it does in the body.
+         */
+        this.handleSubmitFromPanel = (event) => {
+            if (!this.portalEl || !containsComposed(event.target, this.portalEl))
+                return;
+            if (containsComposed(this.portalEl, event.submitter) || containsComposed(this.portalEl, deepActiveElement())) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
     }
     restorePlacementDefault(newValue) {
         this.placement = restoreReflectedDefault(this.el, 'placement', newValue, 'right');
@@ -169,7 +241,8 @@ const PdsPopover = class {
         this.triggerObserver = null;
         if (this.triggerEl == null || typeof MutationObserver === 'undefined')
             return;
-        this.triggerObserver = new MutationObserver(() => this.linkTriggerToPortal());
+        // Capped against a script that keeps undoing it; opening and closing still write it directly.
+        this.triggerObserver = new MutationObserver(limitRestores(() => this.linkTriggerToPortal(), 'pds-popover: stopped restoring its trigger ARIA, as another script keeps changing it. It may be wrong until the popover opens or closes.', this.triggerEl));
         this.triggerObserver.observe(this.triggerEl, {
             attributes: true,
             attributeFilter: ['aria-expanded', 'aria-controls'],
@@ -179,9 +252,9 @@ const PdsPopover = class {
     // This mirrors the native Popover API's accessibility behavior
     linkTriggerToPortal() {
         if (this.triggerEl == null || this.portalEl == null)
-            return;
+            return false;
         // 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 });
+        return 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.
@@ -194,19 +267,23 @@ const PdsPopover = class {
         (_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.
+        // Still open after a move: the trigger moved, so the portal follows it, into the dialog it
+        // is in now, if any.
         if (this.active) {
+            this.placePortal();
             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.
+        // already back in the page. Its portal is outside the popover, so it stays open, with focus
+        // where it was; connectedCallback moves it to follow the popover.
         if (this.el.isConnected)
             return;
         this.isComponentMounted = false;
+        this.unwatchDialogClose();
+        this.forgetOpen();
         // 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) {
@@ -227,6 +304,7 @@ const PdsPopover = class {
         // Clean up all event listeners
         this.removeLightDismissListeners();
         this.removeScrollAndResizeListeners();
+        document.removeEventListener('submit', this.handleSubmitFromPanel, true);
         // Clear any pending debounce timers
         this.clearDebounceTimers();
         // Remove portal from DOM
@@ -271,9 +349,6 @@ const PdsPopover = class {
         else {
             this.portalEl.id = `${this.componentId}-portal`;
         }
-        // Add accessibility attributes for screen readers
-        // Note: Native Popover API doesn't add a specific role, keeping semantic HTML
-        this.portalEl.setAttribute('aria-modal', 'false'); // Not a modal, can interact with rest of page
         // Append to body
         document.body.appendChild(this.portalEl);
         // Add global focus styles to match Pine design system
@@ -288,22 +363,25 @@ const PdsPopover = class {
         if (!this.portalEl)
             return;
         const portalId = this.portalEl.id;
+        // componentId comes from the consumer, so it can carry characters cssEscape needs to
+        // neutralize before the id is used as a selector or interpolated into stylesheet text.
+        const escapedPortalId = cssEscape(portalId);
         // Check if style element already exists
-        const existingStyle = document.querySelector(`style[data-pds-popover-focus="${portalId}"]`);
+        const existingStyle = document.querySelector(`style[data-pds-popover-focus="${escapedPortalId}"]`);
         if (existingStyle)
             return;
         // Create style element with Pine's focus ring styles and dark mode border
         const styleEl = document.createElement('style');
         styleEl.setAttribute('data-pds-popover-focus', portalId);
         styleEl.textContent = `
-      #${portalId}:focus {
+      #${escapedPortalId}:focus {
         outline: var(--pine-outline-focus, 2px solid var(--pine-color-focus-ring, #6366f1)) !important;
         outline-offset: var(--pine-border-width, 1px);
       }
-      #${portalId}:focus:not(:focus-visible) {
+      #${escapedPortalId}:focus:not(:focus-visible) {
         outline: none;
       }
-      [data-theme="dark"] #${portalId} {
+      [data-theme="dark"] #${escapedPortalId} {
         border: var(--pine-border);
       }
     `;
@@ -354,7 +432,27 @@ const PdsPopover = class {
         // Clear tracking array
         this.movedNodes = [];
     }
+    copyFocusStylesInto(root) {
+        var _a, _b, _c;
+        // Outside a shadow root the document's own style applies, so drop a copy left in one.
+        if (!(root instanceof ShadowRoot)) {
+            (_a = this.shadowFocusStyle) === null || _a === void 0 ? void 0 : _a.remove();
+            this.shadowFocusStyle = null;
+            return;
+        }
+        if (((_b = this.shadowFocusStyle) === null || _b === void 0 ? void 0 : _b.parentNode) === root || !this.portalEl)
+            return;
+        const source = document.querySelector(`style[data-pds-popover-focus="${cssEscape(this.portalEl.id)}"]`);
+        if (!source)
+            return;
+        (_c = this.shadowFocusStyle) === null || _c === void 0 ? void 0 : _c.remove();
+        this.shadowFocusStyle = source.cloneNode(true);
+        root.appendChild(this.shadowFocusStyle);
+    }
     removePortal() {
+        var _a;
+        (_a = this.shadowFocusStyle) === null || _a === void 0 ? void 0 : _a.remove();
+        this.shadowFocusStyle = null;
         if (this.portalEl) {
             // Remove the portal element from DOM
             if (this.portalEl.parentNode) {
@@ -362,7 +460,7 @@ const PdsPopover = class {
             }
             // Remove the associated focus style element
             const portalId = this.portalEl.id;
-            const styleEl = document.querySelector(`style[data-pds-popover-focus="${portalId}"]`);
+            const styleEl = document.querySelector(`style[data-pds-popover-focus="${cssEscape(portalId)}"]`);
             if (styleEl && styleEl.parentNode) {
                 styleEl.parentNode.removeChild(styleEl);
             }
@@ -379,9 +477,13 @@ const PdsPopover = class {
         // Record open timestamp to prevent immediate close from opening click
         this.openTimestamp = Date.now();
         this.linkTriggerToPortal();
+        this.placePortal();
         // Update portal content with latest slot content
         this.updatePortalContent();
-        // Show portal
+        // Show portal. The attribute tells a modal around it that this popover takes Escape first; only
+        // an auto popover listens for Escape.
+        if (this.popoverType === 'auto')
+            this.portalEl.setAttribute('data-pds-popover-open', '');
         this.portalEl.style.display = 'block';
         this.portalEl.style.opacity = '1';
         this.portalEl.style.visibility = 'visible';
@@ -393,8 +495,10 @@ const PdsPopover = class {
         });
         // Add scroll and resize listeners for repositioning (always)
         this.addScrollAndResizeListeners();
+        document.addEventListener('submit', this.handleSubmitFromPanel, true);
         // Add document listeners for light dismiss and escape key (auto type only)
         if (this.popoverType === 'auto') {
+            openAutoPopovers.push(this);
             this.addLightDismissListeners();
         }
         // Emit open event
@@ -410,12 +514,16 @@ const PdsPopover = class {
         if (!this.active || !this.portalEl)
             return;
         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);
+        this.unwatchDialogClose();
+        // Restoring the content drops its focus to the body, so check where focus is first. In a
+        // shadow root, document.activeElement is only its host.
+        const focusWasInside = containsComposed(this.portalEl, deepActiveElement());
         this.linkTriggerToPortal();
         // Restore content back to original slot positions
         this.restorePortalContent();
-        // Hide portal
+        // Hide portal. The dark-mode border set in a shadow root is worked out again on the next open.
+        this.portalEl.style.border = '';
+        this.portalEl.removeAttribute('data-pds-popover-open');
         this.portalEl.style.display = 'none';
         this.portalEl.style.opacity = '0';
         this.portalEl.style.visibility = 'hidden';
@@ -425,8 +533,10 @@ const PdsPopover = class {
             this.returnFocusToTrigger();
         }
         // Remove all listeners
+        this.forgetOpen();
         this.removeLightDismissListeners();
         this.removeScrollAndResizeListeners();
+        document.removeEventListener('submit', this.handleSubmitFromPanel, true);
         // Clear any pending timers
         this.clearDebounceTimers();
         // Emit close event
@@ -446,6 +556,59 @@ const PdsPopover = class {
             this.show();
         }
     }
+    /**
+     * Puts the panel where it shows above everything around the popover. In an open dialog, it goes
+     * inside it: a modal dialog sits in the top layer above the body and makes the rest of the page
+     * inert, and a non-modal one sits above it by z-index. Right after the popover, it's next in the
+     * Tab order. In another component's slot, though, it would have no slot to render in, and in a
+     * form its buttons would submit it, so there it goes at the end of the dialog.
+     */
+    placePortal() {
+        var _a, _b;
+        if (!this.portalEl)
+            return;
+        const dialog = closest('dialog[open]', this.el);
+        if (!dialog) {
+            this.unwatchDialogClose();
+            this.portalEl.style.border = '';
+            if (this.portalEl.parentElement !== document.body)
+                document.body.appendChild(this.portalEl);
+            this.copyFocusStylesInto(document);
+            return;
+        }
+        const form = closest('form', this.el);
+        const besidePopover = !((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) && !(form && containsComposed(dialog, form));
+        if (besidePopover) {
+            if (this.el.nextElementSibling !== this.portalEl)
+                (_b = this.el.parentNode) === null || _b === void 0 ? void 0 : _b.insertBefore(this.portalEl, this.el.nextSibling);
+        }
+        else if (this.portalEl.parentNode !== dialog) {
+            dialog.appendChild(this.portalEl);
+        }
+        this.watchDialogClose(dialog);
+        const root = this.portalEl.getRootNode();
+        this.copyFocusStylesInto(root);
+        // In a shadow root, the copied dark-mode rule can't see a [data-theme="dark"] on the page.
+        this.portalEl.style.border = root instanceof ShadowRoot && closest('[data-theme="dark"]', this.el) ? 'var(--pine-border)' : '';
+    }
+    forgetOpen() {
+        const index = openAutoPopovers.indexOf(this);
+        if (index >= 0)
+            openAutoPopovers.splice(index, 1);
+    }
+    /**
+     * Whether an Escape is this popover's. One from a dialog the popover isn't in belongs to that
+     * dialog when it's above it: a top-layer dialog or a pds-modal. A plain non-modal dialog inside
+     * the popover's modal doesn't close on Escape, so the popover takes it.
+     */
+    takesEscapeFrom(event) {
+        var _a, _b;
+        const origin = ((_b = (_a = event.composedPath) === null || _a === void 0 ? void 0 : _a.call(event)[0]) !== null && _b !== void 0 ? _b : event.target);
+        const dialog = closest('dialog[open]', origin);
+        if (!dialog || containsComposed(dialog, this.portalEl))
+            return true;
+        return !(dialog.classList.contains('pds-modal__backdrop') || dialog.matches(':modal'));
+    }
     /**
      * Adds light dismiss listeners (click outside and escape key)
      */
@@ -454,6 +617,19 @@ const PdsPopover = class {
         document.addEventListener('click', this.boundClickOutsideHandler, true);
         document.addEventListener('keydown', this.boundEscapeKeyHandler);
     }
+    /** Closes the popover when the dialog it opened in closes, so it isn't left open inside. */
+    watchDialogClose(dialog) {
+        if (this.watchedDialog === dialog)
+            return;
+        this.unwatchDialogClose();
+        this.watchedDialog = dialog;
+        dialog.addEventListener('close', this.onDialogClose);
+    }
+    unwatchDialogClose() {
+        var _a;
+        (_a = this.watchedDialog) === null || _a === void 0 ? void 0 : _a.removeEventListener('close', this.onDialogClose);
+        this.watchedDialog = null;
+    }
     /**
      * Removes light dismiss listeners
      */
@@ -479,7 +655,7 @@ const PdsPopover = class {
      * Handles clicks outside the popover for light dismiss (auto type only)
      */
     handleClickOutside(event) {
-        var _a, _b, _c, _d;
+        var _a, _b;
         // Ignore events that occurred at or before the popover opened
         // This prevents the opening click from immediately closing the popover
         // Convert event.timeStamp (DOMHighResTimeStamp from performance.now()) to epoch time
@@ -490,16 +666,18 @@ const PdsPopover = class {
         if (eventTime <= this.openTimestamp) {
             return;
         }
-        const target = event.target;
+        // In a shadow root, event.target is only its host.
+        const target = ((_b = (_a = event.composedPath) === null || _a === void 0 ? void 0 : _a.call(event)[0]) !== null && _b !== void 0 ? _b : event.target);
         // A datepicker's calendar is portaled to the body: a click in the calendar of a datepicker
-        // inside this popover, in its content or its trigger, isn't outside it.
-        const calendar = (_b = (_a = target).closest) === null || _b === void 0 ? void 0 : _b.call(_a, '.pds-datepicker-calendar-portal');
+        // inside this popover, in its content or its trigger, isn't outside it. The target can be
+        // inside the calendar's shadow root, so look up across it.
+        const calendar = closest('.pds-datepicker-calendar-portal', target);
         const owner = calendar === null || calendar === void 0 ? void 0 : calendar.pdsDatepicker;
         if (owner && (containsComposed(this.portalEl, owner) || containsComposed(this.triggerEl, owner)))
             return;
         // Check if click is outside both the popover portal and the trigger
-        const clickedInsidePopover = (_c = this.portalEl) === null || _c === void 0 ? void 0 : _c.contains(target);
-        const clickedInsideTrigger = (_d = this.triggerEl) === null || _d === void 0 ? void 0 : _d.contains(target);
+        const clickedInsidePopover = containsComposed(this.portalEl, target);
+        const clickedInsideTrigger = containsComposed(this.triggerEl, target);
         if (!clickedInsidePopover && !clickedInsideTrigger) {
             this.hide();
         }
@@ -520,14 +698,19 @@ const PdsPopover = class {
      * Mirrors native Popover API: Escape closes and returns focus to trigger
      */
     handleEscapeKey(event) {
-        if (event.key === 'Escape') {
-            // Prevent default Escape behavior and stop propagation
-            // This mirrors native Popover API which handles Escape exclusively
-            event.preventDefault();
-            event.stopPropagation();
-            // Close popover and return focus to trigger
-            this.hide();
-        }
+        // A control inside that closes on Escape (a datepicker, a combobox) has handled it already.
+        if (event.key !== 'Escape' || event.defaultPrevented)
+            return;
+        // Like the native Popover API, Escape closes only the top popover: the last one opened that
+        // it applies to. Every open popover hears it, so each checks whether it's that one.
+        const top = [...openAutoPopovers].reverse().find(popover => popover.takesEscapeFrom(event));
+        if (top !== this)
+            return;
+        // Take the key, so the dialog or modal around it doesn't close too.
+        event.preventDefault();
+        event.stopPropagation();
+        // Close popover and return focus to trigger
+        this.hide();
     }
     /**
      * Handles scroll events to reposition the popover (debounced for performance)
@@ -632,13 +815,20 @@ const PdsPopover = class {
         }
         this.portalEl.style.top = `${top}px`;
         this.portalEl.style.left = `${left}px`;
+        // `position: fixed` measures from the viewport unless an ancestor becomes its containing block,
+        // as a modal dialog does with its backdrop filter. Shift by however far it landed from the spot.
+        const placed = this.portalEl.getBoundingClientRect();
+        if (Math.abs(placed.top - top) > 0.5 || Math.abs(placed.left - left) > 0.5) {
+            this.portalEl.style.top = `${2 * top - placed.top}px`;
+            this.portalEl.style.left = `${2 * left - placed.left}px`;
+        }
         // Reset the repositioning guard after a short delay
         setTimeout(() => {
             this.isRepositioning = false;
         }, 16); // ~1 frame at 60fps
     }
     render() {
-        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 }))));
+        return (h(Host, { key: 'da8a0c715df1199231b1265085f3f9ae0234032d', id: this.componentId }, h("span", { key: 'f35023492399420829cec2e88556462f5ac1663e', class: "pds-popover__trigger-wrapper" }, h("slot", { key: '38ebe92eebb87665467b3f92ff94dc8095450063', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '8917930f4520544d14bbd68b4c7936dd60af19e3', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: '28d3f9112256edd95721a79a7072a9e35a3712bf', onSlotchange: this.handleContentSlotChange }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-2HMD-zUO.js';
-import { H as HostStylingKeeper } from './attributes-CF5K2pxn.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-Cw9J31qd.js';
+import { H as HostStylingKeeper } from './attributes-WXw_I_uJ.js';
 import { n as normalizeColorValue } from './utils-OYK5-nwe.js';
-import './keep-hydrated-Dv7ssOTc.js';
+import './keep-hydrated-BLG6RDBt.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)}`;
 
@@ -35,7 +35,7 @@ const PdsProgress = class {
         const normalizedFillColor = normalizeColorValue(this.fillColor);
         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, "%")));
+        return (h(Host, { key: 'a224e1e9bc50433553ab8bf4b0d772f01148ee76', class: hostClass }, h("div", { key: '261742044f3d68c204cbf640cc4447eb6d74df11', class: "pds-progress" }, h("label", { key: 'd686bdc6ab450bf8c14dd56077525a3139593f46', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: 'c716e977a952a628aec600fa680aa9c3b8d0e996', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '44176a580b435f69993be4a60ee2e888b87e10fb', class: "pds-progress__percentage" }, this.percent, "%")));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/pds-property.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, H as Host } from './index-2HMD-zUO.js';
-import './keep-hydrated-Dv7ssOTc.js';
+import { r as registerInstance, h, H as Host } from './index-Cw9J31qd.js';
+import './keep-hydrated-BLG6RDBt.js';
 
 const pdsPropertyCss = () => `:host{color:var(--pine-color-text-message);font:var(--pine-typography-body-medium)}`;
 
@@ -12,7 +12,7 @@ const PdsProperty = class {
         this.icon = 'star';
     }
     render() {
-        return (h(Host, { key: '0f6195faaaf3adb11ad14f09a36c78f94e2bdf65', id: this.componentId }, h("pds-box", { key: '0a9670c0e38065f5fbe035b81703e21155396ff8', "align-items": "center", gap: "xs" }, h("pds-icon", { key: '13b497e8670bc5210a752b8c24b9fd6397b1a8c9', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), h("slot", { key: 'a9b3cf5fd830b7551f68866a62341670f8b61b34' }))));
+        return (h(Host, { key: 'd599b62be4bacf1d89afcc26b14fc93bdc9bb3a4', id: this.componentId }, h("pds-box", { key: 'd7f80f6598615c761d672893c8acab09bd9ea33f', "align-items": "center", gap: "xs" }, h("pds-icon", { key: '15a6a6545c2cd2332bd830451106b7b08adc39ff', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), h("slot", { key: '4e5661563b99ec56189447faabcdd1ae631159b2' }))));
     }
 };
 PdsProperty.style = pdsPropertyCss();

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-2HMD-zUO.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Cw9J31qd.js';
 import { m as messageId } from './form-BuRbS7Hp.js';
-import { b as danger } from './index-DxI-61GK.js';
-import './keep-hydrated-Dv7ssOTc.js';
+import { b as danger } from './index-BJXk71tO.js';
+import './keep-hydrated-BLG6RDBt.js';
 
 const pdsRadioGroupCss = () => `.sc-pds-radio-group-h{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-sm)}.is-invalid.sc-pds-radio-group-h .pds-radio-group__message--error.sc-pds-radio-group{color:var(--pine-color-text-message-danger)}.pds-radio-group__label.sc-pds-radio-group{color:var(--pine-color-text-label);font:var(--pine-typography-heading-6);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing-heading-6)}.pds-radio-group__radios.sc-pds-radio-group{display:-ms-flexbox;display:flex;gap:var(--pds-radio-group-gap, var(--pine-dimension-xs))}.pds-radio-group__radios--row.sc-pds-radio-group{-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}.pds-radio-group__radios--column.sc-pds-radio-group{-ms-flex-direction:column;flex-direction:column}.pds-radio-group__message.sc-pds-radio-group{color:var(--pine-color-text-message);font:var(--pine-typography-body);width:100%}.pds-radio-group__message--error.sc-pds-radio-group{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-radio-group__message--error.sc-pds-radio-group pds-icon.sc-pds-radio-group{-webkit-margin-before:var(--pine-dimension-050);margin-block-start:var(--pine-dimension-050)}`;
 
@@ -163,13 +163,13 @@ const PdsRadioGroup = class {
     render() {
         const gapValue = this.getGapValue();
         const ariaDescribedBy = this.getAriaDescribedBy();
-        return (h(Host, { key: '9dc78eb36bbc1b872f4320203dbbc64e43816ebf', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
+        return (h(Host, { key: 'bf8063c1a99e272bb3f6bc647998a6ef103f8a71', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
                 '--pds-radio-group-gap': gapValue,
-            } }, this.groupLabel && (h("div", { key: '7b6f95608dcf356b141ef5d590ff3070f83b5975', class: "pds-radio-group__label" }, this.groupLabel)), h("div", { key: '6e1a634c9b81ca3f3bbbe9c6590bcd4efc97e6ea', class: {
+            } }, this.groupLabel && (h("div", { key: '8564ed3f8f99cdc1a0e5b189aacc6960923eb5f7', class: "pds-radio-group__label" }, this.groupLabel)), h("div", { key: '2309c9373790182cde030c1dbda88fa3bdcaaf12', 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: '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))));
+            } }, h("slot", { key: 'd88dde3c631e25c01bc7b6d3ef5d517255fabd1a', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: 'a229214ed01663b0fc34f35e27c7148b4eb412ab', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: 'dc092f2e6dbef0cb369cf00a6eccf9a095a0313d', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'd242da328731e55fa52d8e624fdfc750bfa6cce4', icon: danger, size: "small" }), this.errorMessage))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-2HMD-zUO.js';
-import { H as HostStylingKeeper } from './attributes-CF5K2pxn.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Cw9J31qd.js';
+import { H as HostStylingKeeper } from './attributes-WXw_I_uJ.js';
 import { e as exposeTypeProperty, a as assignDescription, m as messageId } from './form-BuRbS7Hp.js';
-import { b as danger } from './index-DxI-61GK.js';
-import './keep-hydrated-Dv7ssOTc.js';
+import { b as danger } from './index-BJXk71tO.js';
+import './keep-hydrated-BLG6RDBt.js';
 
 const labelCss = () => `.sc-pds-radio-h{display:inline-block}[aria-disabled=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-disabled)}[aria-readonly=true].sc-pds-radio-h label.sc-pds-radio{color:var(--pine-color-text-label-readonly)}label.sc-pds-radio{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}`;
 
@@ -102,13 +102,13 @@ const PdsRadio = class {
     }
     render() {
         const renderLabelAndMessages = () => [
-            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)),
+            h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, h("input", { key: 'ccd618855831bcee309e815f2cd2712fd4e8fe1f', "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: '2e372a880c28f48fb804bac2518208082c141fad', 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: '7374924219e59eab46a7ced9e7062c3e674b4451', 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: '889d502575f6a162f450b6b58d76a6f6f1c74e4b', icon: danger, size: "small" }), this.errorMessage))
         ];
         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())));
+        return (h(Host, { key: '374003032b28407581a55f1fb0a304c49acf3c16', class: hostClass }, this.hasImage() && (h("div", { key: '7eeb516267de1afcfa85fc7567999db488c2f4f5', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: 'a312fea06f0c015bffab3bb392ff04d4913fd1c0', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, a as getElement } from './index-2HMD-zUO.js';
-import { H as HostStylingKeeper } from './attributes-CF5K2pxn.js';
-import './keep-hydrated-Dv7ssOTc.js';
+import { r as registerInstance, h, H as Host, a as getElement } from './index-Cw9J31qd.js';
+import { H as HostStylingKeeper } from './attributes-WXw_I_uJ.js';
+import './keep-hydrated-BLG6RDBt.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}`;
 
@@ -69,7 +69,7 @@ const PdsRow = class {
             'min-height': this.minHeight,
         }));
         this.hostKeeper.record(`pds-row ${rowClasses}`, rowInlineStyles);
-        return h(Host, { key: 'ee3a32ae1376919c7c2d1fcf186a1b7c272ee085', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        return h(Host, { key: '78a505fef7132f9545916155d2485a6d2df8f4a5', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
     get el() { return getElement(this); }
 };

package/dist/esm/pds-select.entry.js

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-2HMD-zUO.js';
-import { H as HostStylingKeeper } from './attributes-CF5K2pxn.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Cw9J31qd.js';
+import { H as HostStylingKeeper } from './attributes-WXw_I_uJ.js';
 import { e as exposeTypeProperty, m as messageId, i as isSpecTest, a as assignDescription } from './form-BuRbS7Hp.js';
-import { b as danger, e as enlarge } from './index-DxI-61GK.js';
-import './keep-hydrated-Dv7ssOTc.js';
+import { b as danger, e as enlarge } from './index-BJXk71tO.js';
+import './keep-hydrated-BLG6RDBt.js';
 
 const pdsSelectTokensCss = () => `:host{--pine-select-color-background-danger:var(--pine-color-red-050)}`;
 
@@ -249,7 +249,7 @@ const PdsSelect = class {
             'has-action': hasAction && !this.hideLabel ? 'true' : null,
         };
         this.hostKeeper.record(hostClass, {}, hostAttributes);
-        return (h(Host, Object.assign({ key: 'c99bfc000ad351298e154554a8b22635b1abb718', class: hostClass }, hostAttributes), h("div", { key: '35374b150cbef745c6a6068ba5a2fde0803c0314', class: "pds-select" }, !this.hideLabel && (h("div", { key: 'a3b9bae451c5c384606790a29bf8ab5fc70427c0', class: "pds-select__label-wrapper" }, h("label", { key: '80d7740a05a6d3cce6d51224169eb6c2501c4896', htmlFor: this.componentId }, h("span", { key: 'a51c02d7c84f75bb168889dab50cae807271c63d', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: '11444dad795bd02c008252a60e701125861e4af0', "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) }), h("div", { key: 'ce54fa1df287d96a7503bb19cd2ba6c74a6da638', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '22c55e78999076a37d43fb708dabc7379dd4cee3', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '45628074fbcdb259b8bba42299082423309a6968', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
+        return (h(Host, Object.assign({ key: '343ed671e67dd1d6f9eb284b07e06d59877c64e9', class: hostClass }, hostAttributes), h("div", { key: '650aed0869b02f658feb16ee99f17e1cd22e5a8e', class: "pds-select" }, !this.hideLabel && (h("div", { key: '74739461acbea33c92279ec8ec9042d6af1773c1', class: "pds-select__label-wrapper" }, h("label", { key: '1ad96ffd243000358edfbd79054ee770e1ba97d3', htmlFor: this.componentId }, h("span", { key: 'b832868db4f9cd4fd2f8313054d2e96e106189ab', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: 'e83c1a1a0a5646fc8abf9e50bc374f52b56be773', "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) }), h("div", { key: 'a34880120b88124b5122350856d023368f96abf7', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: 'df6abaf6a630761a32b263813181ff3453757e0d', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: 'f9197284ef9965d693242a652b583f48bc3d7097', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }