@pine-ds/core 4.8.0 → 4.9.0

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

@@ -1,10 +1,12 @@
 'use strict';
 
-var index = require('./index-jl_Q819j.js');
+var index = require('./index-BsWY_xEJ.js');
+var floatingUi_dom = require('./floating-ui.dom-Dw41zbyY.js');
 var closest = require('./closest-D0qyYtJ3.js');
 var reflectedAttributeDefault = require('./reflected-attribute-default-DVYHG6O1.js');
-var attributes = require('./attributes-BJ7KBHql.js');
-var keepHydrated = require('./keep-hydrated-CiXgkEYd.js');
+var attributes = require('./attributes-CW49XqaL.js');
+var keepHydrated = require('./keep-hydrated-AKoh0DG4.js');
+var tabbable = require('./tabbable-CddSt_Hi.js');
 
 /**
  * Escapes a string so it's safe to interpolate into a CSS identifier (an id selector like `#${id}`)
@@ -48,7 +50,7 @@ const cssEscape = (value) => {
     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}`;
+const pdsPopoverCss = () => `:host{--sizing-max-width-default:352px;display:inline-block}:host .pds-popover__trigger-wrapper{display:inline-block}:host .pds-popover__tab-guard{opacity:0;outline:none;pointer-events:none;position:fixed}:host .pds-popover__content-slot-wrapper{display:none}`;
 
 /** Open popovers that close on Escape, in the order they opened: Escape goes to the last one it applies to. */
 const popoversTakingEscape = [];
@@ -56,6 +58,24 @@ const popoversTakingEscape = [];
 const HOVER_OPEN_DELAY_MS = 120;
 /** Leaving the trigger and panel waits this long before closing, which covers the gap between them. */
 const HOVER_CLOSE_DELAY_MS = 200;
+/**
+ * floating-ui reporting viewport coordinates, as `position: fixed` uses without a containing block. Its own
+ * containing-block check misses a backdrop filter in WebKit, so handlePopoverPositioning corrects for one itself.
+ */
+const viewportPlatform = Object.assign(Object.assign({}, floatingUi_dom.platform), { getOffsetParent: () => window });
+/**
+ * Where `top: 0; left: 0` puts a fixed element beside the given one. An empty probe is measured instead of the
+ * element, whose own transforms, such as an entrance animation, would otherwise read as part of the offset.
+ */
+const containingBlockOrigin = (element) => {
+    var _a;
+    const probe = document.createElement('div');
+    probe.style.cssText = 'all: initial; position: fixed; top: 0; left: 0;';
+    (_a = element.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(probe, element);
+    const { top, left } = probe.getBoundingClientRect();
+    probe.remove();
+    return { top, left };
+};
 /** The focused element, followed down through shadow roots to the control that has focus. */
 function deepActiveElement() {
     var _a;
@@ -64,6 +84,27 @@ function deepActiveElement() {
         active = active.shadowRoot.activeElement;
     return active;
 }
+/** `node`, or the shadow host it sits in, lifted until it shares a tree with `other` or reaches the document. */
+function liftToTreeOf(node, other) {
+    let current = node;
+    while (current.getRootNode() !== other.getRootNode() && current.getRootNode() instanceof ShadowRoot) {
+        current = current.getRootNode().host;
+    }
+    return current;
+}
+/**
+ * Where `node` sits relative to `ref`, as `compareDocumentPosition` reports it. Whichever of the two
+ * is inside a shadow root is lifted to its host first, so a control inside a component compares too.
+ */
+function positionAcrossTrees(ref, node) {
+    const lifted = liftToTreeOf(node, ref);
+    return liftToTreeOf(ref, lifted).compareDocumentPosition(lifted);
+}
+const isPosition = (position, flag) => (position & Node.DOCUMENT_POSITION_DISCONNECTED) === 0 && (position & flag) !== 0;
+/** The popover each panel belongs to, so a popover inside another one's panel can find it. */
+const panelOwners = new WeakMap();
+/** Floating layers Pine components put at the end of the page or of a dialog, as a popover does its panel. */
+const FLOATING_LAYERS = '.pds-popover, .pds-datepicker-calendar-portal, .pds-combobox-dropdown-portal';
 const PdsPopover = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -99,14 +140,21 @@ const PdsPopover = class {
          */
         this.portalEl = null;
         /**
-         * Guard to prevent repositioning loops
+         * Stops floating-ui's autoUpdate, which repositions the open panel as its trigger or the page moves or resizes
          */
-        this.isRepositioning = false;
+        this.stopAutoUpdate = null;
         /**
-         * Debounce timers for performance optimization
+         * Counts positioning runs, so a run that resolves after a newer one started is dropped
          */
-        this.scrollDebounceTimer = null;
-        this.resizeDebounceTimer = null;
+        this.positioningRun = 0;
+        /**
+         * The latest positioning run, which pdsPopoverOpen waits for so the panel's side is set when it fires
+         */
+        this.positioning = Promise.resolve();
+        /**
+         * Set while show() waits to emit pdsPopoverOpen, so a hide() in the meantime emits it first
+         */
+        this.openEventPending = false;
         /**
          * Track moved nodes and their placeholders for restoration
          */
@@ -127,6 +175,18 @@ const PdsPopover = class {
          * How far the pointer was from the panel at its last move after leaving the trigger
          */
         this.panelDistance = Infinity;
+        /**
+         * Stands in for the panel in the Tab order, right after the trigger, while the popover is open
+         */
+        this.tabGuardEl = null;
+        /**
+         * Set while focus passes through the guard on its way out of the panel
+         */
+        this.leavingPanel = false;
+        /**
+         * The direction of the Tab key being handled, until its default action has run
+         */
+        this.tabDirection = null;
         /**
          * Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.
          * @defaultValue "show"
@@ -180,6 +240,9 @@ const PdsPopover = class {
             else {
                 this.triggerEl = null;
             }
+            // autoUpdate watches the trigger it started with, so an open popover starts it again on the new one.
+            if (this.active)
+                this.addScrollAndResizeListeners();
             this.observeTrigger();
         };
         /**
@@ -297,6 +360,59 @@ const PdsPopover = class {
                 event.stopPropagation();
             }
         };
+        // At the end of the body or of a dialog, the panel would come last in the Tab order. The guard
+        // after the trigger takes its place there, while the panel has a control for it to lead to.
+        this.syncTabGuard = (event) => {
+            if (event.key !== 'Tab')
+                return;
+            this.releasePanel();
+            this.tabDirection = event.shiftKey ? 'backward' : 'forward';
+            setTimeout(this.endTabKey);
+            // Read on each Tab, as the panel's content can arrive after it opens.
+            const guarding = this.guardedTabbables().length > 0;
+            if (this.tabGuardEl != null)
+                this.tabGuardEl.tabIndex = guarding ? 0 : -1;
+            // Inert for this key press, the panel is reached only through the guard, either way round. A
+            // control in another floating layer, such as a nested popover's panel, may move focus back into it.
+            const focused = deepActiveElement();
+            if (guarding && !closest.containsComposed(this.portalEl, focused) && !closest.closest(FLOATING_LAYERS, focused !== null && focused !== void 0 ? focused : document)) {
+                this.portalEl.inert = true;
+            }
+        };
+        this.endTabKey = () => {
+            this.tabDirection = null;
+            this.releasePanel();
+        };
+        this.handleTabGuardFocus = (event) => {
+            if (this.leavingPanel)
+                return;
+            // An inert panel's controls aren't tabbable, so the guard would find none to send focus to.
+            this.releasePanel();
+            const tabbables = this.guardedTabbables();
+            // A Tab press says which end of the panel focus comes in at; without one, where it came from does.
+            const from = event.relatedTarget;
+            const backward = this.tabDirection != null ? this.tabDirection === 'backward' : from != null && this.isAfterPopover(from);
+            const target = backward ? tabbables[tabbables.length - 1] : tabbables[0];
+            // Focus can reach the guard without a Tab keydown here (from a frame, or assistive tech) after
+            // the panel's controls are gone. The trigger is the nearest visible place for it.
+            if (target == null)
+                this.returnFocusToTrigger();
+            else
+                target.focus();
+        };
+        this.handleTabFromPanel = (event) => {
+            if (event.key !== 'Tab' || event.defaultPrevented || this.tabGuardEl == null)
+                return;
+            const tabbables = this.guardedTabbables();
+            const edge = event.shiftKey ? tabbables[0] : tabbables[tabbables.length - 1];
+            if (edge == null || deepActiveElement() !== edge)
+                return;
+            this.leavePanel(edge, event.shiftKey);
+        };
+        this.releasePanel = () => {
+            if (this.portalEl != null)
+                this.portalEl.inert = false;
+        };
     }
     openOnChanged() {
         this.pin();
@@ -332,8 +448,6 @@ const PdsPopover = class {
         // Bind event handlers for cleanup
         this.boundClickOutsideHandler = this.handleClickOutside.bind(this);
         this.boundEscapeKeyHandler = this.handleEscapeKey.bind(this);
-        this.boundScrollHandler = this.handleScroll.bind(this);
-        this.boundResizeHandler = this.handleResize.bind(this);
         // Create portal element
         this.createPortal();
         this.hasLoaded = true;
@@ -432,11 +546,12 @@ const PdsPopover = class {
         // is in now, if any.
         if (this.active) {
             this.placePortal();
-            requestAnimationFrame(() => this.handlePopoverPositioning());
+            // autoUpdate listens to the scroll containers around where the trigger was, so it starts again.
+            this.addScrollAndResizeListeners();
         }
     }
     disconnectedCallback() {
-        var _a;
+        var _a, _b;
         // Moved in one operation (a DOM morph, or a framework reparenting it), the popover is
         // 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.
@@ -451,6 +566,7 @@ const PdsPopover = class {
             this.restorePortalContent();
             this.active = false;
             this.linkTriggerToPortal();
+            this.emitOpenEvent();
             this.pdsPopoverClose.emit({
                 componentId: this.componentId,
                 popoverType: this.popoverType,
@@ -467,32 +583,20 @@ const PdsPopover = class {
         this.removeLightDismissListeners();
         this.removeScrollAndResizeListeners();
         document.removeEventListener('submit', this.handleSubmitFromPanel, true);
-        // Clear any pending debounce timers
-        this.clearDebounceTimers();
+        document.removeEventListener('keydown', this.syncTabGuard, true);
+        (_b = this.tabGuardEl) === null || _b === void 0 ? void 0 : _b.removeAttribute('tabindex');
         this.clearHoverTimers();
         this.hoverOpened = false;
         // Remove portal from DOM
         this.removePortal();
     }
-    /**
-     * Clears any pending debounce timers
-     */
-    clearDebounceTimers() {
-        if (this.scrollDebounceTimer !== null) {
-            clearTimeout(this.scrollDebounceTimer);
-            this.scrollDebounceTimer = null;
-        }
-        if (this.resizeDebounceTimer !== null) {
-            clearTimeout(this.resizeDebounceTimer);
-            this.resizeDebounceTimer = null;
-        }
-    }
     createPortal() {
         var _a;
         if (this.portalEl !== null)
             return;
         this.portalEl = document.createElement('div');
         this.portalEl.className = 'pds-popover';
+        panelOwners.set(this.portalEl, this);
         // Apply all styles inline since portal is outside shadow DOM
         this.portalEl.style.position = 'fixed';
         this.portalEl.style.zIndex = 'var(--pine-z-index-raised)';
@@ -519,6 +623,7 @@ const PdsPopover = class {
         // This is done after appending to ensure it's part of the document and can access CSS variables
         this.addPortalFocusStyles();
         this.listenForHover(this.portalEl);
+        this.portalEl.addEventListener('keydown', this.handleTabFromPanel);
     }
     /**
      * Adds Pine design system focus styles and dark mode border to the portal element
@@ -652,15 +757,10 @@ const PdsPopover = class {
         this.portalEl.style.display = 'block';
         this.portalEl.style.opacity = '1';
         this.portalEl.style.visibility = 'visible';
-        // Position the popover
-        requestAnimationFrame(() => {
-            if (!this.isComponentMounted)
-                return;
-            this.handlePopoverPositioning();
-        });
-        // Add scroll and resize listeners for repositioning (always)
+        // Position the popover now, and again whenever its trigger or the page moves or resizes
         this.addScrollAndResizeListeners();
         document.addEventListener('submit', this.handleSubmitFromPanel, true);
+        document.addEventListener('keydown', this.syncTabGuard, true);
         // Add document listeners for light dismiss and escape key (auto type only), or for the escape
         // key alone while hover holds a manual popover open
         if (this.popoverType === 'auto') {
@@ -671,7 +771,20 @@ const PdsPopover = class {
             popoversTakingEscape.push(this);
             document.addEventListener('keydown', this.boundEscapeKeyHandler);
         }
-        // Emit open event
+        // Emit open event once the panel is positioned, with the side it took already on it. A reconnect, a
+        // trigger swap or another show() can start a newer run meanwhile, which drops this one, so wait for the latest.
+        this.openEventPending = true;
+        let positioning;
+        do {
+            positioning = this.positioning;
+            await positioning;
+        } while (positioning !== this.positioning);
+        this.emitOpenEvent();
+    }
+    emitOpenEvent() {
+        if (!this.openEventPending)
+            return;
+        this.openEventPending = false;
         this.pdsPopoverOpen.emit({
             componentId: this.componentId,
             popoverType: this.popoverType,
@@ -681,6 +794,7 @@ const PdsPopover = class {
      * Closes the popover programmatically
      */
     async hide() {
+        var _a;
         this.clearHoverTimers();
         if (!this.active || !this.portalEl)
             return;
@@ -696,6 +810,7 @@ const PdsPopover = class {
         // 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.removeAttribute('data-pds-popover-placement');
         this.portalEl.style.display = 'none';
         this.portalEl.style.opacity = '0';
         this.portalEl.style.visibility = 'hidden';
@@ -709,8 +824,11 @@ const PdsPopover = class {
         this.removeLightDismissListeners();
         this.removeScrollAndResizeListeners();
         document.removeEventListener('submit', this.handleSubmitFromPanel, true);
-        // Clear any pending timers
-        this.clearDebounceTimers();
+        document.removeEventListener('keydown', this.syncTabGuard, true);
+        (_a = this.tabGuardEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('tabindex');
+        this.releasePanel();
+        // Closed before its first position resolved, it still announces the open before the close.
+        this.emitOpenEvent();
         // Emit close event
         this.pdsPopoverClose.emit({
             componentId: this.componentId,
@@ -722,10 +840,10 @@ const PdsPopover = class {
      */
     async toggle() {
         if (this.active) {
-            this.hide();
+            await this.hide();
         }
         else {
-            this.show();
+            await this.show();
         }
     }
     /**
@@ -809,19 +927,62 @@ const PdsPopover = class {
         document.removeEventListener('click', this.boundClickOutsideHandler, true);
         document.removeEventListener('keydown', this.boundEscapeKeyHandler);
     }
+    /**
+     * The panel's controls that Tab reaches through the guard. None when the panel sits right after
+     * the popover, in a dialog, where it's already next in the Tab order.
+     */
+    guardedTabbables() {
+        if (this.portalEl == null || this.el.nextElementSibling === this.portalEl)
+            return [];
+        return tabbable.tabbableIn(this.portalEl);
+    }
+    isAfterPopover(node) {
+        if (closest.containsComposed(this.el, node))
+            return false;
+        return isPosition(positionAcrossTrees(this.el, node), Node.DOCUMENT_POSITION_FOLLOWING);
+    }
+    /**
+     * Moves focus to the guard without preventing the Tab, so the browser's Tab carries on from there.
+     * Inert until then, the panel can't be where it lands.
+     */
+    leavePanel(edge, backward) {
+        var _a, _b;
+        this.leavingPanel = true;
+        (_a = this.tabGuardEl) === null || _a === void 0 ? void 0 : _a.focus();
+        this.leavingPanel = false;
+        this.portalEl.inert = true;
+        setTimeout(() => this.finishLeavingPanel(edge));
+        // Last in another popover's panel, the guard hands the Tab on to that popover's own guard.
+        const outer = panelOwners.get(closest.closest('.pds-popover', this.el));
+        const outerTabbables = (_b = outer === null || outer === void 0 ? void 0 : outer.guardedTabbables()) !== null && _b !== void 0 ? _b : [];
+        if (!backward && outerTabbables[outerTabbables.length - 1] === this.tabGuardEl)
+            outer.leavePanel(edge, false);
+    }
+    // With nowhere for the browser's Tab to go, focus would stay on the invisible guard.
+    finishLeavingPanel(edge) {
+        var _a;
+        this.releasePanel();
+        if (this.active && ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) === this.tabGuardEl)
+            edge.focus();
+    }
     /**
      * Adds scroll and resize listeners for repositioning
      */
     addScrollAndResizeListeners() {
-        window.addEventListener('scroll', this.boundScrollHandler, true);
-        window.addEventListener('resize', this.boundResizeHandler);
+        this.removeScrollAndResizeListeners();
+        if (this.triggerEl == null || this.portalEl == null)
+            return;
+        this.stopAutoUpdate = floatingUi_dom.autoUpdate(this.triggerEl, this.portalEl, () => {
+            this.positioning = this.handlePopoverPositioning().catch(error => console.warn('pds-popover: failed to position the panel', error));
+        });
     }
     /**
      * Removes scroll and resize listeners
      */
     removeScrollAndResizeListeners() {
-        window.removeEventListener('scroll', this.boundScrollHandler, true);
-        window.removeEventListener('resize', this.boundResizeHandler);
+        var _a;
+        (_a = this.stopAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.stopAutoUpdate = null;
     }
     /**
      * Handles clicks outside the popover for light dismiss (auto type only)
@@ -885,122 +1046,38 @@ const PdsPopover = class {
         this.hide();
     }
     /**
-     * Handles scroll events to reposition the popover (debounced for performance)
+     * Positions the popover relative to its trigger element, flipping to the opposite side when only that side has
+     * room and shifting to stay 8px inside the viewport. The side it takes goes on the panel's `data-pds-popover-placement`.
      */
-    handleScroll() {
-        if (!this.active)
-            return;
-        if (this.scrollDebounceTimer !== null) {
-            clearTimeout(this.scrollDebounceTimer);
-        }
-        this.scrollDebounceTimer = setTimeout(() => {
-            this.handlePopoverPositioning();
-            this.scrollDebounceTimer = null;
-        }, 10); // 10ms debounce for smooth repositioning
-    }
-    /**
-     * Handles resize events to reposition the popover (debounced for performance)
-     */
-    handleResize() {
-        if (!this.active)
-            return;
-        if (this.resizeDebounceTimer !== null) {
-            clearTimeout(this.resizeDebounceTimer);
-        }
-        this.resizeDebounceTimer = setTimeout(() => {
-            this.handlePopoverPositioning();
-            this.resizeDebounceTimer = null;
-        }, 100); // 100ms debounce for resize
-    }
-    /**
-     * Positions the popover relative to its trigger element
-     */
-    handlePopoverPositioning() {
-        // Prevent repositioning loops
-        if (this.isRepositioning) {
-            return;
-        }
-        this.isRepositioning = true;
-        if (this.triggerEl == null || this.portalEl == null) {
-            this.isRepositioning = false;
+    async handlePopoverPositioning() {
+        // Counted before the guards, so a run still in flight is dropped even when this one can't position.
+        const run = ++this.positioningRun;
+        if (this.triggerEl == null || this.portalEl == null)
             return;
-        }
-        const triggerRect = this.triggerEl.getBoundingClientRect();
-        const popoverRect = this.portalEl.getBoundingClientRect();
         // Safety check: ensure trigger has valid dimensions (is rendered and visible)
-        if (triggerRect.width === 0 || triggerRect.height === 0) {
-            this.isRepositioning = false;
+        const triggerRect = this.triggerEl.getBoundingClientRect();
+        if (triggerRect.width === 0 || triggerRect.height === 0)
             return;
-        }
-        let top = 0;
-        let left = 0;
-        const offset = 8;
-        switch (this.placement) {
-            case 'top':
-                top = triggerRect.top - popoverRect.height - offset;
-                left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;
-                break;
-            case 'top-start':
-                top = triggerRect.top - popoverRect.height - offset;
-                left = triggerRect.left;
-                break;
-            case 'top-end':
-                top = triggerRect.top - popoverRect.height - offset;
-                left = triggerRect.right - popoverRect.width;
-                break;
-            case 'right':
-                top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
-                left = triggerRect.right + offset;
-                break;
-            case 'right-start':
-                top = triggerRect.top;
-                left = triggerRect.right + offset;
-                break;
-            case 'right-end':
-                top = triggerRect.bottom - popoverRect.height;
-                left = triggerRect.right + offset;
-                break;
-            case 'bottom':
-                top = triggerRect.bottom + offset;
-                left = triggerRect.left + (triggerRect.width - popoverRect.width) / 2;
-                break;
-            case 'bottom-start':
-                top = triggerRect.bottom + offset;
-                left = triggerRect.left;
-                break;
-            case 'bottom-end':
-                top = triggerRect.bottom + offset;
-                left = triggerRect.right - popoverRect.width;
-                break;
-            case 'left':
-                top = triggerRect.top + (triggerRect.height - popoverRect.height) / 2;
-                left = triggerRect.left - popoverRect.width - offset;
-                break;
-            case 'left-start':
-                top = triggerRect.top;
-                left = triggerRect.left - popoverRect.width - offset;
-                break;
-            case 'left-end':
-                top = triggerRect.bottom - popoverRect.height;
-                left = triggerRect.left - popoverRect.width - offset;
-                break;
-        }
-        this.portalEl.style.top = `${top}px`;
-        this.portalEl.style.left = `${left}px`;
+        const portal = this.portalEl;
+        const { x: left, y: top, placement } = await floatingUi_dom.computePosition(this.triggerEl, portal, {
+            placement: this.placement,
+            strategy: 'fixed',
+            // With no room on either side, stay on the preferred side: the side that overflows less can still push
+            // a tall panel's start above the viewport.
+            middleware: [floatingUi_dom.offset(8), floatingUi_dom.flip({ fallbackStrategy: 'initialPlacement' }), floatingUi_dom.shift({ padding: 8 })],
+            platform: viewportPlatform,
+        });
+        if (!this.active || run !== this.positioningRun || portal !== this.portalEl)
+            return;
+        portal.setAttribute('data-pds-popover-placement', placement);
         // `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
+        // as a modal dialog does with its backdrop filter. Offset by however far that block's corner is from the viewport's.
+        const origin = containingBlockOrigin(portal);
+        portal.style.top = `${top - origin.top}px`;
+        portal.style.left = `${left - origin.left}px`;
     }
     render() {
-        return (index.h(index.Host, { key: 'e48b897acdc9e89f2e6b1449e7a358da7da1060c', id: this.componentId }, index.h("span", { key: 'b83b2c234b07703c2c850a9991c94939ed2fdaf7', class: "pds-popover__trigger-wrapper" }, index.h("slot", { key: '0a7f7829ee445fd57cf824ebee1409b3c571f983', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), index.h("div", { key: '8c1fe2d4d7c4342b4bd5eb4c56e596f17b4e14fa', class: "pds-popover__content-slot-wrapper" }, index.h("slot", { key: '4ccfce1f335acbc436f7942e497f5d360f849d48', onSlotchange: this.handleContentSlotChange }))));
+        return (index.h(index.Host, { key: '85422eb7544a4795ce78b51684b7224a5d856a4e', id: this.componentId }, index.h("span", { key: '6fe9c827ed4d46ca723d6013f296faf80ba31366', class: "pds-popover__trigger-wrapper" }, index.h("slot", { key: '970d1974d2be1451e670a36e7d2ccdc5979595bb', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), index.h("span", { key: '0c76f76286a30d8e6e948bd0abab3317b3673aa6', class: "pds-popover__tab-guard", ref: (el) => (this.tabGuardEl = el !== null && el !== void 0 ? el : null), onFocus: this.handleTabGuardFocus }), index.h("div", { key: '692c45e93899e74a3d5970f3a3625f6115ab63b0', class: "pds-popover__content-slot-wrapper" }, index.h("slot", { key: 'f1566e0eb1eb08626f2a8285447702ce96b09f4d', onSlotchange: this.handleContentSlotChange }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-jl_Q819j.js');
-var attributes = require('./attributes-BJ7KBHql.js');
+var index = require('./index-BsWY_xEJ.js');
+var attributes = require('./attributes-CW49XqaL.js');
 var utils = require('./utils-BhRmyxT8.js');
-require('./keep-hydrated-CiXgkEYd.js');
+require('./keep-hydrated-AKoh0DG4.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)}`;
 
@@ -37,7 +37,7 @@ const PdsProgress = class {
         const normalizedFillColor = utils.normalizeColorValue(this.fillColor);
         const hostClass = this.animated ? { 'is-animated': this.animated } : '';
         this.hostKeeper.record(hostClass);
-        return (index.h(index.Host, { key: 'a224e1e9bc50433553ab8bf4b0d772f01148ee76', class: hostClass }, index.h("div", { key: '261742044f3d68c204cbf640cc4447eb6d74df11', class: "pds-progress" }, index.h("label", { key: 'd686bdc6ab450bf8c14dd56077525a3139593f46', class: "pds-progress__label", htmlFor: this.componentId }, this.label), index.h("progress", { key: 'c716e977a952a628aec600fa680aa9c3b8d0e996', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && index.h("div", { key: '44176a580b435f69993be4a60ee2e888b87e10fb', class: "pds-progress__percentage" }, this.percent, "%")));
+        return (index.h(index.Host, { key: '6d2151cdd1f65b33a7478e5ac12df711d8252d1f', class: hostClass }, index.h("div", { key: '4a902c6c7d51fe8e8a778e1fa24bdbf95d625b1f', class: "pds-progress" }, index.h("label", { key: 'c50955234a7eee05cdf47531e25b4413f206e416', class: "pds-progress__label", htmlFor: this.componentId }, this.label), index.h("progress", { key: 'c54ad90f7b3fcf3368afca4c5618949f1a370114', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && index.h("div", { key: '6b3e3f42f04a516ef7992d1f8bc967be432f55bb', class: "pds-progress__percentage" }, this.percent, "%")));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-jl_Q819j.js');
-require('./keep-hydrated-CiXgkEYd.js');
+var index = require('./index-BsWY_xEJ.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
 const pdsPropertyCss = () => `:host{color:var(--pine-color-text-message);font:var(--pine-typography-body-medium)}`;
 
@@ -14,7 +14,7 @@ const PdsProperty = class {
         this.icon = 'star';
     }
     render() {
-        return (index.h(index.Host, { key: 'd599b62be4bacf1d89afcc26b14fc93bdc9bb3a4', id: this.componentId }, index.h("pds-box", { key: 'd7f80f6598615c761d672893c8acab09bd9ea33f', "align-items": "center", gap: "xs" }, index.h("pds-icon", { key: '15a6a6545c2cd2332bd830451106b7b08adc39ff', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), index.h("slot", { key: '4e5661563b99ec56189447faabcdd1ae631159b2' }))));
+        return (index.h(index.Host, { key: '198ffd747b7a84a6f58a1b072890fc8bd3ed93aa', id: this.componentId }, index.h("pds-box", { key: 'be71f3d96efea0a45f357d888f71dbe5ad8b68d6', "align-items": "center", gap: "xs" }, index.h("pds-icon", { key: '1a52407e00b158d5e6a515ad4b07ed3407d31f75', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), index.h("slot", { key: '46ac5019b27bdd079c7853abeef8f7c240d19c2c' }))));
     }
 };
 PdsProperty.style = pdsPropertyCss();

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-jl_Q819j.js');
+var index = require('./index-BsWY_xEJ.js');
 var form = require('./form-MhwfKTuo.js');
 var index$1 = require('./index-Do70atou.js');
-require('./keep-hydrated-CiXgkEYd.js');
+require('./keep-hydrated-AKoh0DG4.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)}`;
 
@@ -165,13 +165,13 @@ const PdsRadioGroup = class {
     render() {
         const gapValue = this.getGapValue();
         const ariaDescribedBy = this.getAriaDescribedBy();
-        return (index.h(index.Host, { key: 'bf8063c1a99e272bb3f6bc647998a6ef103f8a71', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
+        return (index.h(index.Host, { key: 'aaf53113f06a0f49706e53735701fba64e79cb4d', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
                 '--pds-radio-group-gap': gapValue,
-            } }, this.groupLabel && (index.h("div", { key: '8564ed3f8f99cdc1a0e5b189aacc6960923eb5f7', class: "pds-radio-group__label" }, this.groupLabel)), index.h("div", { key: '2309c9373790182cde030c1dbda88fa3bdcaaf12', class: {
+            } }, this.groupLabel && (index.h("div", { key: '4be5e43146bf348929e45498107862aaca161644', class: "pds-radio-group__label" }, this.groupLabel)), index.h("div", { key: 'b4a1b870c1a7167b8dcbcf0a11808bbd9a8cec4e', 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: 'd88dde3c631e25c01bc7b6d3ef5d517255fabd1a', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (index.h("div", { key: 'a229214ed01663b0fc34f35e27c7148b4eb412ab', class: "pds-radio-group__message", id: form.messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (index.h("div", { key: 'dc092f2e6dbef0cb369cf00a6eccf9a095a0313d', class: "pds-radio-group__message pds-radio-group__message--error", id: form.messageId(this._groupId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: '83b0129d3d45b74ef1f53acc923387b2de7f079b', "aria-hidden": "true", icon: index$1.danger, size: "small" }), this.errorMessage))));
+            } }, index.h("slot", { key: '2d841cc69c35a4f9da933bbb33c1384ca343e077', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (index.h("div", { key: 'a09bb9e739570c06dc1907cb4e2dceecca36f7d3', class: "pds-radio-group__message", id: form.messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (index.h("div", { key: 'b8fe891cc4b8683d18c19b3b4ddb70212185b954', class: "pds-radio-group__message pds-radio-group__message--error", id: form.messageId(this._groupId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: '9a15d81d8303eeb5a928b96c760f6b15e536e0dc', "aria-hidden": "true", icon: index$1.danger, size: "small" }), this.errorMessage))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {