@pine-ds/core 5.0.0-mercury.0 → 5.0.0

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

@@ -0,0 +1,1101 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-4_RRPJTO.js';
+import { p as platform, a as autoUpdate, c as computePosition, o as offset, f as flip, s as shift } from './floating-ui.dom-Cuc0DYlm.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-CD8knu3a.js';
+import { l as limitRestores } from './keep-hydrated-BgNaWLoS.js';
+import { t as tabbableIn } from './tabbable-C6ZWpp3v.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:400px;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 = [];
+/** 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;
+    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;
+}
+/** `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) {
+        registerInstance(this, hostRef);
+        this.pdsPopoverOpen = createEvent(this, "pdsPopoverOpen");
+        this.pdsPopoverClose = createEvent(this, "pdsPopoverClose");
+        /**
+         * Determines when the popover is active
+         * @defaultValue false
+         */
+        this.active = false;
+        /**
+         * Tracks if the component is still mounted to prevent memory leaks
+         */
+        this.isComponentMounted = true;
+        /**
+         * Set once `componentDidLoad` has built the portal, so a later reconnect knows to rebuild it
+         */
+        this.hasLoaded = false;
+        /**
+         * A popover without a componentId keeps one generated portal id, even when the portal is rebuilt
+         */
+        this.generatedPortalId = null;
+        /**
+         * Reference to the trigger element
+         */
+        this.triggerEl = null;
+        /**
+         * Puts the trigger's ARIA back when something else removes or changes it
+         */
+        this.triggerObserver = null;
+        /**
+         * Portal element: in document.body, or in the open dialog the popover is in
+         */
+        this.portalEl = null;
+        /**
+         * Stops floating-ui's autoUpdate, which repositions the open panel as its trigger or the page moves or resizes
+         */
+        this.stopAutoUpdate = null;
+        /**
+         * Counts positioning runs, so a run that resolves after a newer one started is dropped
+         */
+        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
+         */
+        this.movedNodes = [];
+        /**
+         * Timestamp when popover was opened (for preventing immediate close)
+         */
+        this.openTimestamp = 0;
+        /**
+         * Set while hover holds the popover open, until a click pins it or it closes
+         */
+        this.hoverOpened = false;
+        /**
+         * Set when the pointer left while focus was in the panel, so focus leaving it closes it instead
+         */
+        this.closeWhenFocusLeaves = false;
+        /**
+         * 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"
+         */
+        this.popoverTargetAction = 'show';
+        /**
+         * Determines how the popover opens. With `hover`, it also opens when the pointer rests on the trigger and closes
+         * when the pointer leaves, until a click on the trigger keeps it open. Enter or Space on the trigger opens it either way.
+         * @defaultValue "click"
+         */
+        this.openOn = 'click';
+        /**
+         * Determines the type of popover. Auto popovers can be "light dismissed" by clicking outside of the popover.
+         * Manual popovers require the consumer to handle the visibility of the popover.
+         */
+        this.popoverType = 'auto';
+        /**
+         * Sets the maximum width of the popover, in pixels, including its padding.
+         * @defaultValue 400
+         */
+        this.maxWidth = 400;
+        /**
+         * Sets the padding of the popover content
+         * @defaultValue "md"
+         */
+        this.padding = 'md';
+        /**
+         * Determines the preferred position of the popover
+         * @defaultValue "right"
+         */
+        this.placement = 'right';
+        /**
+         * Handles changes to the trigger slot
+         */
+        this.handleTriggerSlotChange = (event) => {
+            const slot = event.target;
+            const assignedElements = slot.assignedElements();
+            // Clean up previous trigger's event listener if it exists
+            if (this.triggerEl != null) {
+                this.triggerEl.removeEventListener('click', this.handleTriggerClick);
+                this.stopListeningForHover(this.triggerEl);
+            }
+            if (assignedElements.length > 0) {
+                // Use the first assigned element as the trigger
+                this.triggerEl = assignedElements[0];
+                this.linkTriggerToPortal();
+                // Attach click listener to handle popover visibility
+                this.triggerEl.addEventListener('click', this.handleTriggerClick);
+                this.listenForHover(this.triggerEl);
+            }
+            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();
+        };
+        /**
+         * Handles changes to the default slot (popover content)
+         * When the popover is active, re-sync content with portal to handle dynamic updates
+         */
+        this.handleContentSlotChange = () => {
+            if (!this.active)
+                return;
+            this.updatePortalContent();
+        };
+        /**
+         * Handles clicks on the trigger element
+         */
+        this.handleTriggerClick = (event) => {
+            // Only prevent default if the trigger is not an anchor with href
+            // This allows link navigation while still controlling popover visibility
+            const composedPath = event.composedPath();
+            const anchorWithHref = composedPath.find((el) => el instanceof HTMLAnchorElement && el.href);
+            if (!anchorWithHref) {
+                event.preventDefault();
+            }
+            if (this.openOn === 'hover' && this.popoverTargetAction !== 'hide') {
+                const heldByHover = this.hoverOpened;
+                this.pin();
+                // Pinning, not toggling: the hover before a click has already opened it.
+                if (heldByHover)
+                    return;
+            }
+            // Execute the appropriate action based on popoverTargetAction prop
+            switch (this.popoverTargetAction) {
+                case 'show':
+                    this.show();
+                    break;
+                case 'hide':
+                    this.hide();
+                    break;
+                case 'toggle':
+                default:
+                    this.toggle();
+                    break;
+            }
+        };
+        // A tap sends touch pointer events and then a click, so touch takes the click path alone.
+        this.handleHoverEnter = (event) => {
+            if (event.pointerType === 'touch')
+                return;
+            this.clearHoverTimers();
+            if (this.active)
+                return;
+            this.hoverOpenTimer = setTimeout(() => {
+                this.hoverOpenTimer = undefined;
+                if (this.active || this.portalEl == null)
+                    return;
+                this.hoverOpened = true;
+                this.show();
+            }, HOVER_OPEN_DELAY_MS);
+        };
+        this.handleHoverLeave = (event) => {
+            if (event.pointerType === 'touch')
+                return;
+            this.clearHoverTimers();
+            if (!this.hoverOpened)
+                return;
+            this.hoverCloseTimer = setTimeout(this.closeFromHover, HOVER_CLOSE_DELAY_MS);
+            if (event.currentTarget !== this.triggerEl)
+                return;
+            this.panelDistance = this.distanceToPanel(event);
+            document.addEventListener('pointermove', this.handleMoveTowardPanel);
+        };
+        // A slow diagonal from the trigger to a panel shorter than it runs beside the panel for longer
+        // than the close delay, so each move that brings the pointer closer starts the delay again.
+        this.handleMoveTowardPanel = (event) => {
+            const distance = this.distanceToPanel(event);
+            if (distance < this.panelDistance) {
+                clearTimeout(this.hoverCloseTimer);
+                this.hoverCloseTimer = setTimeout(this.closeFromHover, HOVER_CLOSE_DELAY_MS);
+            }
+            this.panelDistance = distance;
+        };
+        this.handleHoverFocusOut = (event) => {
+            if (!this.closeWhenFocusLeaves || containsComposed(this.portalEl, event.relatedTarget))
+                return;
+            this.closeWhenFocusLeaves = false;
+            this.hoverCloseTimer = setTimeout(this.closeFromHover, HOVER_CLOSE_DELAY_MS);
+        };
+        this.closeFromHover = () => {
+            this.clearHoverTimers();
+            if (!this.hoverOpened)
+                return;
+            // Content shown on hover stays while focus is in it (WCAG 1.4.13).
+            if (containsComposed(this.portalEl, deepActiveElement())) {
+                this.closeWhenFocusLeaves = true;
+                return;
+            }
+            this.hide();
+        };
+        /** 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();
+            }
+        };
+        // 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();
+        this.stopListeningForHover(this.triggerEl);
+        this.stopListeningForHover(this.portalEl);
+        // Out of the page, connectedCallback binds them when it comes back.
+        if (!this.isComponentMounted)
+            return;
+        this.listenForHover(this.triggerEl);
+        this.listenForHover(this.portalEl);
+    }
+    applyPadding() {
+        if (this.portalEl != null)
+            this.portalEl.style.padding = this.paddingToken();
+    }
+    paddingToken() {
+        switch (this.padding) {
+            case 'none':
+                return 'var(--pine-dimension-none)';
+            case 'xs':
+                return 'var(--pine-dimension-xs)';
+            case 'sm':
+                return 'var(--pine-dimension-sm)';
+            default:
+                return 'var(--pine-dimension-md)';
+        }
+    }
+    restorePlacementDefault(newValue) {
+        this.placement = restoreReflectedDefault(this.el, 'placement', newValue, 'right');
+    }
+    componentDidLoad() {
+        var _a;
+        // Bind event handlers for cleanup
+        this.boundClickOutsideHandler = this.handleClickOutside.bind(this);
+        this.boundEscapeKeyHandler = this.handleEscapeKey.bind(this);
+        // Create portal element
+        this.createPortal();
+        this.hasLoaded = true;
+        // Initialize trigger element by calling slot change handler
+        // This is a fallback for environments where slot change might not fire reliably
+        const triggerSlot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot[name="trigger"]');
+        if (triggerSlot && this.triggerEl == null) {
+            const CustomEvent = (typeof window !== 'undefined' ? window.Event : global.Event);
+            const slotChangeEvent = new CustomEvent('slotchange');
+            Object.defineProperty(slotChangeEvent, 'target', { value: triggerSlot, enumerable: true });
+            this.handleTriggerSlotChange(slotChangeEvent);
+        }
+        else {
+            // A component trigger delays componentDidLoad, so its slotchange ran before the portal existed.
+            this.linkTriggerToPortal();
+        }
+    }
+    // The trigger is the consumer's element, so anything can rewrite its attributes (a Turbo morph
+    // matches it to server HTML that has no ARIA). Put Pine's values back when that happens.
+    observeTrigger() {
+        var _a;
+        (_a = this.triggerObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.triggerObserver = null;
+        if (this.triggerEl == null || typeof MutationObserver === 'undefined')
+            return;
+        // 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'],
+        });
+    }
+    // Set ARIA attributes to establish relationship between trigger and popover
+    // This mirrors the native Popover API's accessibility behavior
+    linkTriggerToPortal() {
+        if (this.triggerEl == null || this.portalEl == null)
+            return false;
+        // Skips values already in place, so the trigger observer's own callback doesn't loop.
+        return setAttributesIfChanged(this.triggerEl, { 'aria-expanded': String(this.active), 'aria-controls': this.portalEl.id });
+    }
+    listenForHover(el) {
+        if (this.openOn !== 'hover' || el == null)
+            return;
+        el.addEventListener('pointerenter', this.handleHoverEnter);
+        el.addEventListener('pointerleave', this.handleHoverLeave);
+        el.addEventListener('focusout', this.handleHoverFocusOut);
+    }
+    stopListeningForHover(el) {
+        if (el == null)
+            return;
+        el.removeEventListener('pointerenter', this.handleHoverEnter);
+        el.removeEventListener('pointerleave', this.handleHoverLeave);
+        el.removeEventListener('focusout', this.handleHoverFocusOut);
+    }
+    distanceToPanel({ clientX, clientY }) {
+        const panel = this.portalEl.getBoundingClientRect();
+        return Math.hypot(Math.max(panel.left - clientX, 0, clientX - panel.right), Math.max(panel.top - clientY, 0, clientY - panel.bottom));
+    }
+    /**
+     * Keeps a popover that hover opened open, closing from then on as one opened by a click does. A
+     * manual one gives up Escape again, which it took only while hover held it.
+     */
+    pin() {
+        var _a;
+        this.clearHoverTimers();
+        if (!this.hoverOpened)
+            return;
+        this.hoverOpened = false;
+        if (this.popoverType === 'auto')
+            return;
+        this.forgetOpen();
+        (_a = this.portalEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-pds-popover-open');
+        document.removeEventListener('keydown', this.boundEscapeKeyHandler);
+    }
+    clearHoverTimers() {
+        clearTimeout(this.hoverOpenTimer);
+        clearTimeout(this.hoverCloseTimer);
+        this.hoverOpenTimer = undefined;
+        this.hoverCloseTimer = undefined;
+        this.closeWhenFocusLeaves = false;
+        document.removeEventListener('pointermove', this.handleMoveTowardPanel);
+    }
+    // componentDidLoad doesn't run again when a popover comes back, so rebuild whatever
+    // disconnectedCallback tore down. Each step is a no-op when nothing was.
+    connectedCallback() {
+        var _a;
+        if (!this.hasLoaded)
+            return;
+        this.isComponentMounted = true;
+        this.createPortal();
+        (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.handleTriggerClick);
+        this.listenForHover(this.triggerEl);
+        this.observeTrigger();
+        this.linkTriggerToPortal();
+        // 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();
+            // autoUpdate listens to the scroll containers around where the trigger was, so it starts again.
+            this.addScrollAndResizeListeners();
+        }
+    }
+    disconnectedCallback() {
+        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.
+        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) {
+            this.restorePortalContent();
+            this.active = false;
+            this.linkTriggerToPortal();
+            this.emitOpenEvent();
+            this.pdsPopoverClose.emit({
+                componentId: this.componentId,
+                popoverType: this.popoverType,
+            });
+        }
+        // Clean up trigger click event listener
+        if (this.triggerEl != null) {
+            this.triggerEl.removeEventListener('click', this.handleTriggerClick);
+        }
+        this.stopListeningForHover(this.triggerEl);
+        (_a = this.triggerObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.triggerObserver = null;
+        // Clean up all event listeners
+        this.removeLightDismissListeners();
+        this.removeScrollAndResizeListeners();
+        document.removeEventListener('submit', this.handleSubmitFromPanel, true);
+        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();
+    }
+    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)';
+        this.portalEl.style.maxWidth = `${this.maxWidth}px`;
+        this.portalEl.style.display = 'none';
+        this.portalEl.style.opacity = '0';
+        this.portalEl.style.visibility = 'hidden';
+        this.portalEl.style.backgroundColor = 'var(--pine-color-background-overlay)';
+        this.portalEl.style.borderRadius = 'var(--pine-dimension-125)';
+        this.portalEl.style.boxShadow = 'var(--pine-box-shadow-200)';
+        // So the padding below stays inside max-width rather than adding to it.
+        this.portalEl.style.boxSizing = 'border-box';
+        this.portalEl.style.margin = 'var(--pine-dimension-none)';
+        this.portalEl.style.padding = this.paddingToken();
+        // Generate unique ID
+        if (!this.componentId) {
+            (_a = this.generatedPortalId) !== null && _a !== void 0 ? _a : (this.generatedPortalId = `pds-popover-portal-${PdsPopover.instanceCounter++}`);
+            this.portalEl.id = this.generatedPortalId;
+        }
+        else {
+            this.portalEl.id = `${this.componentId}-portal`;
+        }
+        // Append to body
+        document.body.appendChild(this.portalEl);
+        // Add global focus styles to match Pine design system
+        // 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
+     * Uses CSS variables from Pine's design tokens
+     */
+    addPortalFocusStyles() {
+        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="${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 = `
+      #${escapedPortalId}:focus {
+        outline: var(--pine-outline-focus, 2px solid var(--pine-color-focus-ring, #6366f1)) !important;
+        outline-offset: var(--pine-border-width, 1px);
+      }
+      #${escapedPortalId}:focus:not(:focus-visible) {
+        outline: none;
+      }
+      [data-theme="dark"] #${escapedPortalId} {
+        border: var(--pine-border);
+      }
+    `;
+        document.head.appendChild(styleEl);
+    }
+    /**
+     * Moves slot content into portal (preserves event handlers and component instances)
+     */
+    updatePortalContent() {
+        var _a;
+        if (!this.portalEl)
+            return;
+        const contentSlotWrapper = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-popover__content-slot-wrapper');
+        const defaultSlot = contentSlotWrapper === null || contentSlotWrapper === void 0 ? void 0 : contentSlotWrapper.querySelector('slot');
+        if (defaultSlot) {
+            const assignedNodes = defaultSlot.assignedNodes();
+            // Move each node into portal and track with placeholder for restoration
+            assignedNodes.forEach(node => {
+                var _a;
+                // Skip if node is already in the portal or already tracked
+                const isAlreadyInPortal = node.parentNode === this.portalEl;
+                const isAlreadyTracked = this.movedNodes.some(moved => moved.node === node);
+                if (isAlreadyInPortal || isAlreadyTracked) {
+                    return;
+                }
+                // Create a placeholder comment to mark original position
+                const placeholder = document.createComment('pds-popover-placeholder');
+                // Insert placeholder before moving the node
+                (_a = node.parentNode) === null || _a === void 0 ? void 0 : _a.insertBefore(placeholder, node);
+                // Move the actual node to portal (preserves all handlers and state)
+                this.portalEl.appendChild(node);
+                // Track for restoration
+                this.movedNodes.push({ node, placeholder });
+            });
+        }
+    }
+    /**
+     * Restores moved nodes back to their original positions
+     */
+    restorePortalContent() {
+        // Restore each moved node to its original position
+        this.movedNodes.forEach(({ node, placeholder }) => {
+            if (placeholder.parentNode) {
+                placeholder.parentNode.insertBefore(node, placeholder);
+                placeholder.parentNode.removeChild(placeholder);
+            }
+        });
+        // 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) {
+                this.portalEl.parentNode.removeChild(this.portalEl);
+            }
+            // Remove the associated focus style element
+            const portalId = this.portalEl.id;
+            const styleEl = document.querySelector(`style[data-pds-popover-focus="${cssEscape(portalId)}"]`);
+            if (styleEl && styleEl.parentNode) {
+                styleEl.parentNode.removeChild(styleEl);
+            }
+        }
+        this.portalEl = null;
+    }
+    /**
+     * Opens the popover programmatically
+     */
+    async show() {
+        if (this.active || !this.portalEl)
+            return;
+        this.active = true;
+        // 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. The attribute tells a modal around it that this popover takes Escape first; only
+        // an auto popover, or one hover opened, listens for Escape.
+        if (this.popoverType === 'auto' || this.hoverOpened)
+            this.portalEl.setAttribute('data-pds-popover-open', '');
+        this.portalEl.style.display = 'block';
+        this.portalEl.style.opacity = '1';
+        this.portalEl.style.visibility = 'visible';
+        // 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') {
+            popoversTakingEscape.push(this);
+            this.addLightDismissListeners();
+        }
+        else if (this.hoverOpened) {
+            popoversTakingEscape.push(this);
+            document.addEventListener('keydown', this.boundEscapeKeyHandler);
+        }
+        // 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,
+        });
+    }
+    /**
+     * Closes the popover programmatically
+     */
+    async hide() {
+        var _a;
+        this.clearHoverTimers();
+        if (!this.active || !this.portalEl)
+            return;
+        this.active = false;
+        this.hoverOpened = false;
+        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. 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';
+        // Return focus to trigger for keyboard accessibility
+        // This mirrors native Popover API behavior on close
+        if (focusWasInside) {
+            this.returnFocusToTrigger();
+        }
+        // Remove all listeners
+        this.forgetOpen();
+        this.removeLightDismissListeners();
+        this.removeScrollAndResizeListeners();
+        document.removeEventListener('submit', this.handleSubmitFromPanel, true);
+        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,
+            popoverType: this.popoverType,
+        });
+    }
+    /**
+     * Toggles the popover open/closed state programmatically
+     */
+    async toggle() {
+        if (this.active) {
+            await this.hide();
+        }
+        else {
+            await 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 = popoversTakingEscape.indexOf(this);
+        if (index >= 0)
+            popoversTakingEscape.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)
+     */
+    addLightDismissListeners() {
+        // Add listeners immediately - handleClickOutside will check timestamp
+        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
+     */
+    removeLightDismissListeners() {
+        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() {
+        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() {
+        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)
+     */
+    handleClickOutside(event) {
+        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
+        // by calculating: currentEpochTime - (currentPerfTime - eventPerfTime)
+        const eventTime = event.timeStamp
+            ? Date.now() - (performance.now() - event.timeStamp)
+            : Date.now();
+        if (eventTime <= this.openTimestamp) {
+            return;
+        }
+        // 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. 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 = containsComposed(this.portalEl, target);
+        const clickedInsideTrigger = containsComposed(this.triggerEl, target);
+        if (!clickedInsidePopover && !clickedInsideTrigger) {
+            this.hide();
+        }
+    }
+    /**
+     * Returns focus to the trigger element with visible focus indicator
+     * This ensures focus rings/outlines are shown as they would be with keyboard navigation
+     */
+    returnFocusToTrigger() {
+        if (!this.triggerEl)
+            return;
+        // Focus immediately while still in keyboard event context
+        // This ensures the browser treats it as keyboard-initiated and shows focus ring
+        this.triggerEl.focus({ preventScroll: true });
+    }
+    /**
+     * Handles escape key press to close the popover
+     * Mirrors native Popover API: Escape closes and returns focus to trigger
+     */
+    handleEscapeKey(event) {
+        // 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 = [...popoversTakingEscape].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();
+    }
+    /**
+     * 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`.
+     */
+    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;
+        // Safety check: ensure trigger has valid dimensions (is rendered and visible)
+        const triggerRect = this.triggerEl.getBoundingClientRect();
+        if (triggerRect.width === 0 || triggerRect.height === 0)
+            return;
+        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. 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: '1767e44f8f0fba0938cc99fefdeb786cf9131384' }, h("span", { key: 'b5369451958d62562f007d600e7567809f281bfb', class: "pds-popover__trigger-wrapper" }, h("slot", { key: '30a8273c6365eff7fd8265966ae09d66ac84e0a9', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("span", { key: 'a562458380244ca76af047edd00d40d012bc30ce', class: "pds-popover__tab-guard", ref: (el) => (this.tabGuardEl = el !== null && el !== void 0 ? el : null), onFocus: this.handleTabGuardFocus }), h("div", { key: '36db874a9f1bcdf0dc52d9cce368c5fc4f296b62', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: '295f000fcdcaa4ef5249f4e98ed83cbd467351b0', onSlotchange: this.handleContentSlotChange }))));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "openOn": [{
+                "openOnChanged": 0
+            }],
+        "padding": [{
+                "applyPadding": 0
+            }],
+        "placement": [{
+                "restorePlacementDefault": 0
+            }]
+    }; }
+};
+/**
+ * Instance counter for unique IDs
+ */
+PdsPopover.instanceCounter = 0;
+PdsPopover.style = pdsPopoverCss();
+
+export { PdsPopover as pds_popover };