@pine-ds/core 4.8.0 → 4.9.0

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

@@ -1,15 +1,35 @@
 import { Host, h } from "@stencil/core";
+import { autoUpdate, computePosition, flip, offset, platform, shift } from "@floating-ui/dom";
 import { closest, containsComposed } from "../../utils/closest";
 import { restoreReflectedDefault } from "../../utils/reflected-attribute-default";
 import { setAttributesIfChanged } from "../../utils/attributes";
 import { cssEscape } from "../../utils/css";
 import { limitRestores } from "../../utils/keep-hydrated";
+import { tabbableIn } from "../../utils/tabbable";
 /** Open popovers that close on Escape, in the order they opened: Escape goes to the last one it applies to. */
 const popoversTakingEscape = [];
 /** Hovering the trigger waits this long before opening, so a pointer passing over it doesn't open it. */
 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({}, 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;
@@ -18,6 +38,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';
 /**
  * @slot trigger - The trigger element for the popover
  * @slot (default) - The content to display inside the popover
@@ -54,14 +95,21 @@ export class PdsPopover {
          */
         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
          */
@@ -82,6 +130,18 @@ export class PdsPopover {
          * 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"
@@ -135,6 +195,9 @@ export class PdsPopover {
             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();
         };
         /**
@@ -252,6 +315,59 @@ export class PdsPopover {
                 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 && !containsComposed(this.portalEl, focused) && !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();
@@ -287,8 +403,6 @@ export class PdsPopover {
         // 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;
@@ -387,11 +501,12 @@ export class PdsPopover {
         // 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.
@@ -406,6 +521,7 @@ export class PdsPopover {
             this.restorePortalContent();
             this.active = false;
             this.linkTriggerToPortal();
+            this.emitOpenEvent();
             this.pdsPopoverClose.emit({
                 componentId: this.componentId,
                 popoverType: this.popoverType,
@@ -422,32 +538,20 @@ export class PdsPopover {
         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)';
@@ -474,6 +578,7 @@ export class PdsPopover {
         // 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
@@ -607,15 +712,10 @@ export class PdsPopover {
         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') {
@@ -626,7 +726,20 @@ export class PdsPopover {
             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,
@@ -636,6 +749,7 @@ export class PdsPopover {
      * Closes the popover programmatically
      */
     async hide() {
+        var _a;
         this.clearHoverTimers();
         if (!this.active || !this.portalEl)
             return;
@@ -651,6 +765,7 @@ export class PdsPopover {
         // 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';
@@ -664,8 +779,11 @@ export class PdsPopover {
         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,
@@ -677,10 +795,10 @@ export class PdsPopover {
      */
     async toggle() {
         if (this.active) {
-            this.hide();
+            await this.hide();
         }
         else {
-            this.show();
+            await this.show();
         }
     }
     /**
@@ -764,19 +882,62 @@ export class PdsPopover {
         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 tabbableIn(this.portalEl);
+    }
+    isAfterPopover(node) {
+        if (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('.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 = 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)
@@ -840,122 +1001,38 @@ export class PdsPopover {
         this.hide();
     }
     /**
-     * Handles scroll events to reposition the popover (debounced for performance)
-     */
-    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
+     * 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`.
      */
-    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 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: [offset(8), flip({ fallbackStrategy: 'initialPlacement' }), 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 (h(Host, { key: 'e48b897acdc9e89f2e6b1449e7a358da7da1060c', id: this.componentId }, h("span", { key: 'b83b2c234b07703c2c850a9991c94939ed2fdaf7', class: "pds-popover__trigger-wrapper" }, h("slot", { key: '0a7f7829ee445fd57cf824ebee1409b3c571f983', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '8c1fe2d4d7c4342b4bd5eb4c56e596f17b4e14fa', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: '4ccfce1f335acbc436f7942e497f5d360f849d48', onSlotchange: this.handleContentSlotChange }))));
+        return (h(Host, { key: '85422eb7544a4795ce78b51684b7224a5d856a4e', id: this.componentId }, h("span", { key: '6fe9c827ed4d46ca723d6013f296faf80ba31366', class: "pds-popover__trigger-wrapper" }, h("slot", { key: '970d1974d2be1451e670a36e7d2ccdc5979595bb', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("span", { key: '0c76f76286a30d8e6e948bd0abab3317b3673aa6', class: "pds-popover__tab-guard", ref: (el) => (this.tabGuardEl = el !== null && el !== void 0 ? el : null), onFocus: this.handleTabGuardFocus }), h("div", { key: '692c45e93899e74a3d5970f3a3625f6115ab63b0', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: 'f1566e0eb1eb08626f2a8285447702ce96b09f4d', onSlotchange: this.handleContentSlotChange }))));
     }
     static get is() { return "pds-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -30,7 +30,7 @@ export class PdsProgress {
         const normalizedFillColor = normalizeColorValue(this.fillColor);
         const hostClass = this.animated ? { 'is-animated': this.animated } : '';
         this.hostKeeper.record(hostClass);
-        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, "%")));
+        return (h(Host, { key: '6d2151cdd1f65b33a7478e5ac12df711d8252d1f', class: hostClass }, h("div", { key: '4a902c6c7d51fe8e8a778e1fa24bdbf95d625b1f', class: "pds-progress" }, h("label", { key: 'c50955234a7eee05cdf47531e25b4413f206e416', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: 'c54ad90f7b3fcf3368afca4c5618949f1a370114', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '6b3e3f42f04a516ef7992d1f8bc967be432f55bb', class: "pds-progress__percentage" }, this.percent, "%")));
     }
     static get is() { return "pds-progress"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,7 +10,7 @@ export class PdsProperty {
         this.icon = 'star';
     }
     render() {
-        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' }))));
+        return (h(Host, { key: '198ffd747b7a84a6f58a1b072890fc8bd3ed93aa', id: this.componentId }, h("pds-box", { key: 'be71f3d96efea0a45f357d888f71dbe5ad8b68d6', "align-items": "center", gap: "xs" }, h("pds-icon", { key: '1a52407e00b158d5e6a515ad4b07ed3407d31f75', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), h("slot", { key: '46ac5019b27bdd079c7853abeef8f7c240d19c2c' }))));
     }
     static get is() { return "pds-property"; }
     static get encapsulation() { return "shadow"; }

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

@@ -271,4 +271,61 @@ label:has(input:disabled) {
 }
 :host(.has-image).is-invalid .pds-radio__message--error {
   color: var(--pine-color-text-message-danger);
+}
+
+:host(.pds-radio--pill) label {
+  align-items: center;
+  background: var(--pine-color-background-container);
+  border: var(--pine-border);
+  border-radius: var(--pine-border-radius-full);
+  box-sizing: border-box;
+  color: var(--pine-color-text-active);
+  cursor: pointer;
+  font: var(--pine-typography-body);
+  min-block-size: var(--pine-dimension-xl);
+  padding: 0 var(--pine-dimension-sm);
+  transition: border-color var(--pine-motion-duration-fast) ease;
+}
+:host(.pds-radio--pill) label span {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+:host(.pds-radio--pill) label:hover {
+  border-color: var(--pine-color-text);
+}
+:host(.pds-radio--pill) label:has(input:checked) {
+  border-color: var(--pine-color-text-active);
+  box-shadow: inset 0 0 0 var(--pine-border-width) var(--pine-color-text-active);
+}
+:host(.pds-radio--pill) label:has(input:focus-visible) {
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width-thick);
+}
+:host(.pds-radio--pill) label:has(input:disabled) {
+  background: var(--pine-color-background-container-disabled);
+  border-color: var(--pine-color-border-disabled);
+  color: var(--pine-color-text-label-disabled);
+  cursor: not-allowed;
+}
+:host(.pds-radio--pill) label:has(input:disabled:checked) {
+  border-color: var(--pine-color-text-label-disabled);
+  box-shadow: inset 0 0 0 var(--pine-border-width) var(--pine-color-text-label-disabled);
+}
+@media (forced-colors: active) {
+  :host(.pds-radio--pill) label:has(input:disabled) {
+    border-color: GrayText;
+  }
+  :host(.pds-radio--pill) label:has(input:checked) {
+    border-color: Highlight;
+    border-width: var(--pine-border-width-thick);
+    padding-inline: calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)));
+  }
+  :host(.pds-radio--pill) label:has(input:disabled:checked) {
+    border-color: GrayText;
+    border-width: var(--pine-border-width-thick);
+    padding-inline: calc(var(--pine-dimension-sm) - (var(--pine-border-width-thick) - var(--pine-border-width)));
+  }
+}
+:host(.pds-radio--pill) .pds-radio__message {
+  margin-inline-start: 0;
 }