@pine-ds/core 3.9.0 → 3.10.0

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-Bf1dou5H.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-Bh07GI-d.js';
 
 const pdsModalCss = ".pds-modal__backdrop{-ms-flex-align:start;align-items:flex-start;background-color:rgba(0, 0, 0, 0.4);border:0;display:-ms-flexbox;display:flex;height:100%;inset:0;-ms-flex-pack:center;justify-content:center;margin:0;max-height:100%;max-width:100%;opacity:0;padding:0;position:fixed;-webkit-transition:opacity 0.2s ease, visibility 0.2s ease;transition:opacity 0.2s ease, visibility 0.2s ease;visibility:hidden;width:100%;z-index:var(--pine-z-index-modal)}@supports ((-webkit-backdrop-filter: blur(3px)) or (backdrop-filter: blur(3px))){.pds-modal__backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}}pds-modal .pds-modal__backdrop{z-index:var(--pine-z-index-priority)}.pds-modal__backdrop::-webkit-backdrop{background:transparent}.pds-modal__backdrop::-ms-backdrop{background:transparent}.pds-modal__backdrop::backdrop{background:transparent}.pds-modal__backdrop.open{opacity:1;visibility:visible}.pds-modal{background:var(--pine-color-background-container);border-radius:var(--pine-dimension-sm);-webkit-box-shadow:var(--pine-box-shadow-400);box-shadow:var(--pine-box-shadow-400);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;margin:var(--pine-dimension-md);max-height:none;width:100%}.pds-modal.pds-modal--scrollable{max-height:calc(100vh - (5vh + 96px))}@supports (height: 100dvh){.pds-modal.pds-modal--scrollable{max-height:calc(100dvh - (5dvh + 96px))}}@media (min-width: 992px){.pds-modal{-webkit-margin-before:6vh;margin-block-start:6vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:6dvh;margin-block-start:6dvh}}}@media (min-width: 1200px){.pds-modal{-webkit-margin-before:8vh;margin-block-start:8vh}@supports (height: 100dvh){.pds-modal{-webkit-margin-before:8dvh;margin-block-start:8dvh}}}.pds-modal--sm{max-width:520px}.pds-modal--md{max-width:700px}.pds-modal--lg{max-width:900px}.pds-modal--fullscreen{border-radius:0;height:100%;margin:0;max-height:100vh;max-width:100%}@supports (height: 100dvh){.pds-modal--fullscreen{max-height:100dvh}}.pds-modal--fullscreen.pds-modal--scrollable{max-height:100vh}@supports (height: 100dvh){.pds-modal--fullscreen.pds-modal--scrollable{max-height:100dvh}}.pds-modal--fullscreen .pds-modal-content{-ms-flex:1;flex:1}.pds-modal--scrollable pds-modal-content{-webkit-border-after:1px solid transparent;border-block-end:1px solid transparent;-webkit-border-before:1px solid transparent;border-block-start:1px solid transparent;overflow-y:auto}.pds-modal:not(.pds-modal--scrollable) pds-modal-content{overflow-y:visible}";
 
@@ -256,5 +256,3 @@ PdsModal.style = pdsModalCss;
 
 export { PdsModal as pds_modal };
 //# sourceMappingURL=pds-modal.entry.js.map
-
-//# sourceMappingURL=pds-modal.entry.js.map

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Bf1dou5H.js';
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-Bh07GI-d.js';
 
-const pdsPopoverCss = ":host{--sizing-max-width-default:352px;display:inline-block}:host [popover]{background-color:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow-200);box-shadow:var(--pine-box-shadow-200);margin:var(--pine-dimension-none);max-width:var(--sizing-max-width-default);padding:var(--pine-dimension-md);position:fixed}:host [popover]:popover-open:not(.pds-popover--positioned){visibility:hidden}:host button{-ms-flex-align:center;align-items:center;background-color:var(--pine-color-secondary);border:var(--pine-border);border-radius:var(--pine-border-radius-full);color:var(--pine-color-text-secondary);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);font-family:var(--pine-font-family-heading);letter-spacing:var(--pine-letter-spacing);min-height:40px;padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}:host button:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}:host button:hover{background-color:var(--pine-color-secondary-hover)}";
+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 PdsPopover = class {
     constructor(hostRef) {
@@ -16,6 +16,31 @@ const PdsPopover = class {
          * Tracks if the component is still mounted to prevent memory leaks
          */
         this.isComponentMounted = true;
+        /**
+         * Reference to the trigger element
+         */
+        this.triggerEl = null;
+        /**
+         * Portal element rendered in document.body
+         */
+        this.portalEl = null;
+        /**
+         * Guard to prevent repositioning loops
+         */
+        this.isRepositioning = false;
+        /**
+         * Debounce timers for performance optimization
+         */
+        this.scrollDebounceTimer = null;
+        this.resizeDebounceTimer = null;
+        /**
+         * Track moved nodes and their placeholders for restoration
+         */
+        this.movedNodes = [];
+        /**
+         * Timestamp when popover was opened (for preventing immediate close)
+         */
+        this.openTimestamp = 0;
         /**
          * Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.
          * @defaultValue "show"
@@ -36,124 +61,437 @@ const PdsPopover = class {
          * @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);
+            }
+            if (assignedElements.length > 0) {
+                // Use the first assigned element as the trigger
+                this.triggerEl = assignedElements[0];
+                // Set ARIA attributes to establish relationship between trigger and popover
+                // This mirrors the native Popover API's accessibility behavior
+                if (this.portalEl) {
+                    this.triggerEl.setAttribute('aria-expanded', String(this.active));
+                    this.triggerEl.setAttribute('aria-controls', this.portalEl.id);
+                }
+                // Attach click listener to handle popover visibility
+                this.triggerEl.addEventListener('click', this.handleTriggerClick);
+            }
+            else {
+                this.triggerEl = null;
+            }
+        };
+        /**
+         * 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();
+            }
+            // 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;
+            }
+        };
     }
     componentDidLoad() {
         var _a;
-        // Attach toggle event listener to the popover element
-        const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
-        if (popoverEl != null) {
-            this.boundToggleHandler = this.handleToggle.bind(this);
-            popoverEl.addEventListener('toggle', this.boundToggleHandler);
+        // 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();
+        // 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);
         }
     }
     disconnectedCallback() {
-        var _a;
         this.isComponentMounted = false;
-        // Clean up event listener
-        const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
-        if (popoverEl != null && this.boundToggleHandler != null) {
-            popoverEl.removeEventListener('toggle', this.boundToggleHandler);
+        // Clean up trigger click event listener
+        if (this.triggerEl != null) {
+            this.triggerEl.removeEventListener('click', this.handleTriggerClick);
         }
+        // Clean up all event listeners
+        this.removeLightDismissListeners();
+        this.removeScrollAndResizeListeners();
+        // Clear any pending debounce timers
+        this.clearDebounceTimers();
+        // Remove portal from DOM
+        this.removePortal();
     }
     /**
-     * Opens the popover programmatically
+     * Clears any pending debounce timers
      */
-    async show() {
+    clearDebounceTimers() {
+        if (this.scrollDebounceTimer !== null) {
+            clearTimeout(this.scrollDebounceTimer);
+            this.scrollDebounceTimer = null;
+        }
+        if (this.resizeDebounceTimer !== null) {
+            clearTimeout(this.resizeDebounceTimer);
+            this.resizeDebounceTimer = null;
+        }
+    }
+    createPortal() {
+        if (this.portalEl !== null)
+            return;
+        this.portalEl = document.createElement('div');
+        this.portalEl.className = 'pds-popover';
+        // 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-container)';
+        this.portalEl.style.borderRadius = 'var(--pine-dimension-125)';
+        this.portalEl.style.boxShadow = 'var(--pine-box-shadow-200)';
+        this.portalEl.style.margin = 'var(--pine-dimension-none)';
+        this.portalEl.style.padding = 'var(--pine-dimension-md)';
+        // Generate unique ID
+        if (!this.componentId) {
+            const suffix = PdsPopover.instanceCounter++;
+            this.portalEl.id = `pds-popover-portal-${suffix}`;
+        }
+        else {
+            this.portalEl.id = `${this.componentId}-portal`;
+        }
+        // Add accessibility attributes for screen readers
+        // Note: Native Popover API doesn't add a specific role, keeping semantic HTML
+        this.portalEl.setAttribute('aria-modal', 'false'); // Not a modal, can interact with rest of page
+        // Append to body
+        document.body.appendChild(this.portalEl);
+        // Add global focus styles to match Pine design system
+        // This is done after appending to ensure it's part of the document and can access CSS variables
+        this.addPortalFocusStyles();
+    }
+    /**
+     * Adds Pine design system focus styles to the portal element
+     * Uses CSS variables from Pine's design tokens
+     */
+    addPortalFocusStyles() {
+        if (!this.portalEl)
+            return;
+        const portalId = this.portalEl.id;
+        // Check if style element already exists
+        const existingStyle = document.querySelector(`style[data-pds-popover-focus="${portalId}"]`);
+        if (existingStyle)
+            return;
+        // Create style element with Pine's focus ring styles
+        const styleEl = document.createElement('style');
+        styleEl.setAttribute('data-pds-popover-focus', portalId);
+        styleEl.textContent = `
+      #${portalId}:focus {
+        outline: var(--pine-outline-focus, 2px solid var(--pine-color-focus-ring, #6366f1)) !important;
+        outline-offset: var(--pine-border-width, 1px);
+      }
+      #${portalId}:focus:not(:focus-visible) {
+        outline: none;
+      }
+    `;
+        document.head.appendChild(styleEl);
+    }
+    /**
+     * Moves slot content into portal (preserves event handlers and component instances)
+     */
+    updatePortalContent() {
         var _a;
-        const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
-        if (popoverEl != null && typeof popoverEl.showPopover === 'function') {
-            try {
-                popoverEl.showPopover();
+        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);
             }
-            catch (e) {
-                // Popover might already be open
-                console.warn('Failed to show popover:', e);
+        });
+        // Clear tracking array
+        this.movedNodes = [];
+    }
+    removePortal() {
+        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="${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();
+        // Update ARIA expanded state on trigger
+        if (this.triggerEl) {
+            this.triggerEl.setAttribute('aria-expanded', 'true');
+        }
+        // Update portal content with latest slot content
+        this.updatePortalContent();
+        // Show portal
+        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)
+        this.addScrollAndResizeListeners();
+        // Add document listeners for light dismiss and escape key (auto type only)
+        if (this.popoverType === 'auto') {
+            this.addLightDismissListeners();
+        }
+        // Emit open event
+        this.pdsPopoverOpen.emit({
+            componentId: this.componentId,
+            popoverType: this.popoverType,
+        });
     }
     /**
      * Closes the popover programmatically
      */
     async hide() {
-        var _a;
-        const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
-        if (popoverEl != null && typeof popoverEl.hidePopover === 'function') {
-            try {
-                popoverEl.hidePopover();
-            }
-            catch (e) {
-                // Popover might already be closed
-                console.warn('Failed to hide popover:', e);
-            }
+        if (!this.active || !this.portalEl)
+            return;
+        this.active = false;
+        // Update ARIA expanded state on trigger
+        if (this.triggerEl) {
+            this.triggerEl.setAttribute('aria-expanded', 'false');
         }
+        // Restore content back to original slot positions
+        this.restorePortalContent();
+        // Hide portal
+        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
+        this.returnFocusToTrigger();
+        // Remove all listeners
+        this.removeLightDismissListeners();
+        this.removeScrollAndResizeListeners();
+        // Clear any pending timers
+        this.clearDebounceTimers();
+        // Emit close event
+        this.pdsPopoverClose.emit({
+            componentId: this.componentId,
+            popoverType: this.popoverType,
+        });
     }
     /**
      * Toggles the popover open/closed state programmatically
      */
     async toggle() {
-        var _a;
-        const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
-        if (popoverEl != null && typeof popoverEl.togglePopover === 'function') {
-            try {
-                popoverEl.togglePopover();
-            }
-            catch (e) {
-                console.warn('Failed to toggle popover:', e);
-            }
+        if (this.active) {
+            this.hide();
+        }
+        else {
+            this.show();
         }
     }
-    handleToggle(event) {
-        var _a;
-        const toggleEvent = event;
-        // Prepare event detail
-        const eventDetail = {
-            componentId: this.componentId,
-            popoverType: this.popoverType,
-            text: this.text,
-        };
-        // Update internal state based on native popover state
-        if (toggleEvent.newState === 'open') {
-            this.active = true;
-            const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
-            // Remove positioned class to hide popover via CSS
-            if (popoverEl != null) {
-                popoverEl.classList.remove('pds-popover--positioned');
-            }
-            // Position after the browser has rendered the popover, then show it
-            requestAnimationFrame(() => {
-                // Prevent memory leak if component unmounts during animation frame
-                if (!this.isComponentMounted)
-                    return;
-                this.handlePopoverPositioning();
-                if (popoverEl != null) {
-                    popoverEl.classList.add('pds-popover--positioned');
-                }
-            });
-            this.pdsPopoverOpen.emit(eventDetail);
+    /**
+     * 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);
+    }
+    /**
+     * Removes light dismiss listeners
+     */
+    removeLightDismissListeners() {
+        document.removeEventListener('click', this.boundClickOutsideHandler, true);
+        document.removeEventListener('keydown', this.boundEscapeKeyHandler);
+    }
+    /**
+     * Adds scroll and resize listeners for repositioning
+     */
+    addScrollAndResizeListeners() {
+        window.addEventListener('scroll', this.boundScrollHandler, true);
+        window.addEventListener('resize', this.boundResizeHandler);
+    }
+    /**
+     * Removes scroll and resize listeners
+     */
+    removeScrollAndResizeListeners() {
+        window.removeEventListener('scroll', this.boundScrollHandler, true);
+        window.removeEventListener('resize', this.boundResizeHandler);
+    }
+    /**
+     * 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;
+        }
+        const target = event.target;
+        // Check if click is outside both the popover portal and the trigger
+        const clickedInsidePopover = (_a = this.portalEl) === null || _a === void 0 ? void 0 : _a.contains(target);
+        const clickedInsideTrigger = (_b = this.triggerEl) === null || _b === void 0 ? void 0 : _b.contains(target);
+        if (!clickedInsidePopover && !clickedInsideTrigger) {
+            this.hide();
         }
-        else if (toggleEvent.newState === 'closed') {
-            this.active = false;
-            this.pdsPopoverClose.emit(eventDetail);
+    }
+    /**
+     * 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) {
+        if (event.key === 'Escape') {
+            // Prevent default Escape behavior and stop propagation
+            // This mirrors native Popover API which handles Escape exclusively
+            event.preventDefault();
+            event.stopPropagation();
+            // Close popover and return focus to trigger
+            this.hide();
         }
     }
+    /**
+     * Handles scroll events to reposition the popover (debounced for performance)
+     */
     handleScroll() {
-        var _a;
-        // Only reposition if the popover is actually open
-        const popoverEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('div[popover]');
-        if (popoverEl != null && this.active === true) {
+        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() {
-        const triggerEl = this.el.shadowRoot.querySelector('.pds-popover__trigger');
-        const popoverEl = this.el.shadowRoot.querySelector('div[popover]');
-        if (triggerEl == null || popoverEl == null)
+        // Prevent repositioning loops
+        if (this.isRepositioning) {
+            return;
+        }
+        this.isRepositioning = true;
+        if (this.triggerEl == null || this.portalEl == null) {
+            this.isRepositioning = false;
             return;
-        // Cast to HTMLElement after null check for proper typing
-        const triggerElement = triggerEl;
-        const popoverElement = popoverEl;
-        const triggerRect = triggerElement.getBoundingClientRect();
-        const popoverRect = popoverElement.getBoundingClientRect();
+        }
+        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;
+            return;
+        }
         let top = 0;
         let left = 0;
         const offset = 8;
@@ -207,17 +545,23 @@ const PdsPopover = class {
                 left = triggerRect.left - popoverRect.width - offset;
                 break;
         }
-        popoverElement.style.top = `${top}px`;
-        popoverElement.style.left = `${left}px`;
+        this.portalEl.style.top = `${top}px`;
+        this.portalEl.style.left = `${left}px`;
+        // Reset the repositioning guard after a short delay
+        setTimeout(() => {
+            this.isRepositioning = false;
+        }, 16); // ~1 frame at 60fps
     }
     render() {
-        return (h(Host, { key: 'c3da1b2ab23b4678aeb2f7fdfe59383c1c5e6766' }, h("button", { key: 'd426d0c3145820c161858123cb71cdf92a6da3f6', class: "pds-popover__trigger", popoverTarget: this.componentId, popoverTargetAction: this.popoverTargetAction }, this.text), h("div", { key: 'aad97aedfc716085d1e7609649cc7aaeb7de7358', class: `pds-popover ${this.active ? 'pds-popover--active' : ''}`, id: this.componentId, popover: this.popoverType, style: { maxWidth: `${this.maxWidth}px` } }, h("slot", { key: '1b5dde4a0643ee6dbdf4116cc74fff8b188e498b' }))));
+        return (h(Host, { key: 'f77eaf0e122faeb6cd3e6bd55313498afb0039b4', id: this.componentId }, h("span", { key: '6a44717df3ed98a600756a01528cb1139478d0d3', class: "pds-popover__trigger-wrapper" }, h("slot", { key: '7c535ad2329988da7166f4fa669266fe31ff3dfa', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: 'bd387d0e42d90f7339645c47f53b73bc0e345b7d', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: '98bd73611af2ecf0facdc77949a68db2106a4f12', onSlotchange: this.handleContentSlotChange }))));
     }
     get el() { return getElement(this); }
 };
+/**
+ * Instance counter for unique IDs
+ */
+PdsPopover.instanceCounter = 0;
 PdsPopover.style = pdsPopoverCss;
 
 export { PdsPopover as pds_popover };
 //# sourceMappingURL=pds-popover.entry.js.map
-
-//# sourceMappingURL=pds-popover.entry.js.map