@pine-ds/core 4.6.0 → 4.7.0

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

@@ -86,6 +86,34 @@ function containsComposed(ancestor, node) {
     }
     return false;
 }
+/**
+ * Every open modal, with the order it opened in, which ranks top-layer modals and the modals
+ * inside them. Kept here rather than queried from the document, which can't see a modal inside
+ * another component's shadow root.
+ */
+const openModals = new Map();
+let openSequence = 0;
+/** Whether an open auto popover's panel sits in `root`, including inside shadow roots under it. */
+function hasOpenPopover(root) {
+    if (root.querySelector('[data-pds-popover-open]'))
+        return true;
+    return Array.from(root.querySelectorAll('*')).some(el => !!el.shadowRoot && hasOpenPopover(el.shadowRoot));
+}
+/**
+ * Whether `a` comes before `b` in the page. `compareDocumentPosition` is arbitrary across a shadow
+ * boundary, so each side climbs to its host until both are in the same tree.
+ */
+function precedesComposed(a, b) {
+    // A document has no host, which ends each climb.
+    for (let x = a; x; x = x.getRootNode().host) {
+        for (let y = b; y; y = y.getRootNode().host) {
+            if (x.getRootNode() === y.getRootNode()) {
+                return !!(x.compareDocumentPosition(y) & Node.DOCUMENT_POSITION_FOLLOWING);
+            }
+        }
+    }
+    return false;
+}
 /** The focused element, followed down through shadow roots to the control that has focus. */
 function deepActiveElement() {
     var _a;
@@ -101,7 +129,8 @@ const PdsModal = class {
         this.pdsModalClose = index.createEvent(this, "pdsModalClose");
         this.focusableElements = [];
         /**
-         * Whether the modal can be dismissed by clicking the backdrop
+         * Whether the modal can be dismissed by clicking the backdrop, pressing Escape, or the browser's
+         * own close request (such as a back gesture)
          * @default true
          */
         this.backdropDismiss = true;
@@ -149,19 +178,33 @@ const PdsModal = class {
          * Stores the list of focusable elements in the modal
          */
         this.focusableElementsArray = [];
+        // The browser's own close request (an Escape nothing prevented, a back gesture) would close the
+        // dialog without updating `open`, so close it through hideModal() instead, or not at all.
+        this.handleCancel = (e) => {
+            e.preventDefault();
+            if (!this.open)
+                return;
+            // The request reaches the top-layer dialog even when a disableTopLayer modal inside it is on
+            // top; that one closes first, as it would on Escape.
+            const top = this.innermostOpenModal();
+            const target = (top && containsComposed(this.el, top) ? top : this.el);
+            if (target.backdropDismiss)
+                target.hideModal();
+        };
         this.handleBackdropClick = (e) => {
             if (!this.backdropDismiss || !this.open)
                 return;
-            if (e.target.classList.contains('pds-modal__backdrop')) {
+            // This modal's own backdrop; a nested modal's backdrop handles its own clicks.
+            if (e.target === this.modalRef) {
                 e.stopPropagation();
                 // Only close if this is the innermost modal
-                if (this.isInnermostModal()) {
+                if (this.innermostOpenModal() === this.el) {
                     this.hideModal();
                 }
             }
         };
         this.handleKeyDown = (e) => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             // If the modal is not open, don't handle any keyboard events
             if (!this.open)
                 return;
@@ -184,24 +227,39 @@ const PdsModal = class {
                 if (!('__pdsActiveElementAtEscape' in eventSnapshot)) {
                     const activeAtDispatch = document.activeElement;
                     eventSnapshot.__pdsActiveElementAtEscape = activeAtDispatch;
+                    // Followed into shadow roots: for a modal inside one, document.activeElement is only the host.
+                    eventSnapshot.__pdsDeepActiveElementAtEscape = deepActiveElement();
                     const topLayerDialog = (_a = activeAtDispatch === null || activeAtDispatch === void 0 ? void 0 : activeAtDispatch.closest('dialog')) !== null && _a !== void 0 ? _a : null;
                     eventSnapshot.__pdsTopLayerDialogAtEscape = topLayerDialog;
                     eventSnapshot.__pdsTopLayerDialogWasModalAtEscape = !!(topLayerDialog && topLayerDialog.matches(':modal'));
+                    // A control that closed on this Escape (a combobox on its own element, a dropdown menu or
+                    // multiselect in document's capture phase) has prevented it before this bubble listener.
+                    // Read before any modal prevents it below.
+                    eventSnapshot.__pdsEscapeHandledInside = e.defaultPrevented;
+                    // Which modal is innermost is read once too: the inner one closing first would make its
+                    // outer modal the innermost by the time that modal's listener runs.
+                    eventSnapshot.__pdsInnermostModalAtEscape = this.innermostOpenModal();
                 }
+                if (eventSnapshot.__pdsEscapeHandledInside)
+                    return;
                 // Leave Escape to a genuinely stacked-above overlay (disableTopLayer's
                 // reason for existing) — not just to anything outside this modal.
                 const active = eventSnapshot.__pdsActiveElementAtEscape;
                 if (this.disableTopLayer &&
                     active &&
                     active !== document.body &&
-                    !this.el.contains(active) &&
-                    this.isStackedAboveOverlay(active, (_b = eventSnapshot.__pdsTopLayerDialogAtEscape) !== null && _b !== void 0 ? _b : null, (_c = eventSnapshot.__pdsTopLayerDialogWasModalAtEscape) !== null && _c !== void 0 ? _c : false)) {
+                    !containsComposed(this.el, (_b = eventSnapshot.__pdsDeepActiveElementAtEscape) !== null && _b !== void 0 ? _b : active) &&
+                    this.isStackedAboveOverlay(active, (_c = eventSnapshot.__pdsTopLayerDialogAtEscape) !== null && _c !== void 0 ? _c : null, (_d = eventSnapshot.__pdsTopLayerDialogWasModalAtEscape) !== null && _d !== void 0 ? _d : false)) {
                     return;
                 }
+                // An open popover inside takes Escape from its own document listener, which runs after this
+                // one, so leave the key for it. Its preventDefault() keeps the native dialog open.
+                if (this.modalRef && hasOpenPopover(this.modalRef))
+                    return;
                 // Always prevent native dialog close behavior
                 e.preventDefault();
                 // Only close if backdropDismiss is enabled and this is the innermost modal
-                if (this.backdropDismiss && this.isInnermostModal()) {
+                if (this.backdropDismiss && eventSnapshot.__pdsInnermostModalAtEscape === this.el) {
                     this.hideModal();
                 }
                 return;
@@ -261,8 +319,6 @@ const PdsModal = class {
     }
     componentDidLoad() {
         this.modalRef = this.el.querySelector('.pds-modal__backdrop');
-        // Add keyboard event listener
-        document.addEventListener('keydown', this.handleKeyDown);
         // @Watch('open') only fires on a later change, not the prop's initial
         // value — a modal mounted with `open` already true (static markup, or a
         // framework passing it on first render) would otherwise never call
@@ -278,9 +334,18 @@ const PdsModal = class {
     componentDidRender() {
         reconnectedContent.unwrapReconnectedContent(this.el.querySelector('.pds-modal'), 'dialog.pds-modal__backdrop', '.pds-modal');
     }
+    // Here rather than in componentDidLoad, which runs once: a modal taken out of the page and put
+    // back (a morph or a framework moving it) gets its keyboard handling, and its place among the
+    // open modals, back too. Adding the same listener twice is a no-op.
+    connectedCallback() {
+        document.addEventListener('keydown', this.handleKeyDown);
+        if (this.open && !openModals.has(this.el))
+            openModals.set(this.el, ++openSequence);
+    }
     disconnectedCallback() {
         // Clean up event listener
         document.removeEventListener('keydown', this.handleKeyDown);
+        openModals.delete(this.el);
     }
     handleOpenChange(newValue) {
         if (newValue) {
@@ -345,6 +410,9 @@ const PdsModal = class {
                     this.modalRef.showModal();
                 }
                 this.open = true;
+                // Showing an open modal again doesn't move it above one opened after it.
+                if (!openModals.has(this.el))
+                    openModals.set(this.el, ++openSequence);
                 // Update focusable elements and set initial focus
                 // Using a longer timeout to ensure all components are fully rendered
                 setTimeout(() => {
@@ -407,6 +475,7 @@ const PdsModal = class {
                 const focusAlreadyMovedElsewhere = activeElement !== null && activeElement !== document.body && !this.modalRef.contains(activeElement);
                 this.modalRef.close();
                 this.open = false;
+                openModals.delete(this.el);
                 // Restore focus to the element that was focused before the modal was opened
                 if (!focusAlreadyMovedElsewhere &&
                     this.previousActiveElement &&
@@ -425,7 +494,9 @@ const PdsModal = class {
      */
     getBackdropZIndex(modal) {
         const backdrop = modal.querySelector('.pds-modal__backdrop');
-        return backdrop ? parseInt(getComputedStyle(backdrop).zIndex, 10) : -1;
+        // `auto` (no z-index token loaded) parses to NaN, which no comparison can rank.
+        const zIndex = backdrop ? parseInt(getComputedStyle(backdrop).zIndex, 10) : -1;
+        return Number.isNaN(zIndex) ? 0 : zIndex;
     }
     /**
      * Whether `active` sits inside a surface actually stacked above this modal.
@@ -452,7 +523,8 @@ const PdsModal = class {
      * lose that evidence depending on listener order.
      */
     isStackedAboveOverlay(active, topLayerDialog, topLayerDialogWasModal) {
-        if (topLayerDialog && topLayerDialog !== this.modalRef && topLayerDialogWasModal) {
+        // A top-layer dialog this modal sits inside is underneath it, not an overlay above.
+        if (topLayerDialog && topLayerDialog !== this.modalRef && topLayerDialogWasModal && !containsComposed(topLayerDialog, this.el)) {
             return true;
         }
         const ownZIndex = this.getBackdropZIndex(this.el);
@@ -468,24 +540,37 @@ const PdsModal = class {
         return false;
     }
     /**
-     * Checks if this modal is the innermost (highest z-index) modal
+     * The open modal that takes Escape or a backdrop click, among those with no other open modal
+     * inside them (a nested modal's backdrop can share its outer modal's z-index). A top-layer dialog
+     * (or a modal inside one) paints above anything outside it, and within the top layer the last
+     * opened is on top. Modals in the same layer (the page, or one top-layer dialog) then rank by
+     * the highest backdrop, then the one later in the page.
      */
-    isInnermostModal() {
-        // Find all open modals
-        const openModals = Array.from(document.querySelectorAll('pds-modal')).filter(modal => modal.open);
-        if (openModals.length === 0)
-            return false;
-        // Get this modal's backdrop element
-        const thisBackdrop = this.el.querySelector('.pds-modal__backdrop');
-        if (!thisBackdrop)
-            return false;
-        // Get computed z-index of all open modal backdrops
-        const modalZIndexes = openModals.map(modal => this.getBackdropZIndex(modal));
-        // Get the highest z-index
-        const maxZIndex = Math.max(...modalZIndexes);
-        // Check if this modal's backdrop has the highest z-index
-        const thisZIndex = this.getBackdropZIndex(this.el);
-        return thisZIndex === maxZIndex;
+    innermostOpenModal() {
+        const open = Array.from(openModals.keys()).filter(modal => modal.isConnected);
+        const innermost = open.filter(modal => !open.some(other => other !== modal && containsComposed(modal, other)));
+        const byDocumentOrder = [...innermost].sort((a, b) => (precedesComposed(a, b) ? -1 : 1));
+        // A modal inside a top-layer dialog paints in that dialog's place in the top layer, even when it
+        // isn't in the top layer itself (disableTopLayer), so that dialog's open order ranks it first.
+        const rank = (modal) => {
+            var _a;
+            const backdrop = modal.querySelector('.pds-modal__backdrop');
+            const topLayerDialog = backdrop ? closest.closest('dialog:modal', backdrop) : null;
+            const topLayerModal = topLayerDialog === null || topLayerDialog === void 0 ? void 0 : topLayerDialog.closest('pds-modal');
+            const layer = topLayerDialog ? ((_a = (topLayerModal && openModals.get(topLayerModal))) !== null && _a !== void 0 ? _a : 0) : 0;
+            return [topLayerDialog ? 1 : 0, layer, this.getBackdropZIndex(modal), byDocumentOrder.indexOf(modal)];
+        };
+        let top = null;
+        let topRank = [-1, -1, -1, -1];
+        for (const modal of innermost) {
+            const modalRank = rank(modal);
+            const above = modalRank.findIndex((value, i) => value !== topRank[i]);
+            if (above >= 0 && modalRank[above] > topRank[above]) {
+                top = modal;
+                topRank = modalRank;
+            }
+        }
+        return top;
     }
     /** Whether a modal dialog other than this one sits between the focused element and this modal. */
     modalDialogAbove(active) {
@@ -525,14 +610,14 @@ const PdsModal = class {
     }
     render() {
         const [sizeClass = 'md', customSize] = this.resolveSize();
-        return (index.h("dialog", { key: '12ea38928ea287f16ffa33e246caa2bfde6fc130', class: {
+        return (index.h("dialog", { key: '0633d4e8a7cb81f2f9280e754564960a00a4d60b', class: {
                 'pds-modal__backdrop': true,
                 'open': this.open
-            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, index.h("div", { key: 'b9d83cabda56c315d9115f7030e3bdbcf923ec08', class: {
+            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, index.h("div", { key: '466f8a3476cf066817554f47ec7d3a0e3ab10b89', class: {
                 'pds-modal': true,
                 [`pds-modal--${sizeClass}`]: true,
                 'pds-modal--scrollable': this.scrollable
-            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, index.h("slot", { key: '3c5edad1482cb124e503197adf411890573b076d' }))));
+            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, index.h("slot", { key: '01ca45c96540416216a1082bad52b137720f0f4d' }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -539,11 +539,12 @@ const PdsMultiselect = class {
     }
     /**
      * Handle global keyboard events for accessibility.
-     * Closes dropdown on Escape key press regardless of focus location.
+     * Closes dropdown on Escape key press regardless of focus location. Taken in document's capture
+     * phase, before a modal around the multiselect hears it on document and closes too.
      */
     handleWindowKeyDown(event) {
         var _a;
-        if (!this.isOpen)
+        if (!this.isOpen || event.defaultPrevented)
             return;
         if (event.key === 'Escape') {
             event.preventDefault();
@@ -1233,10 +1234,10 @@ const PdsMultiselect = class {
     }
     render() {
         const hasSelections = this.selectedItems.length > 0;
-        return (index.h(index.Host, { key: '0ef6791666063e0d951d28f980b3bca89cf24287', "aria-disabled": this.disabled ? 'true' : null }, index.h("div", { key: 'f0ccbabfbd2dcf38f6df52f73f2152eb4bd2828e', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (index.h("label", { key: '88e01c744644ce1f75c8d5b71dfaeeb79d1ef7df', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
+        return (index.h(index.Host, { key: 'fcc35a82c16d5cf35a49ce997f19618104f9cc45', "aria-disabled": this.disabled ? 'true' : null }, index.h("div", { key: '72d1fdf759d9173f54bac80ec50aff651fd2b357', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (index.h("label", { key: 'e28f02c2beb23dc2c0deefadbd0645b20d938d91', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
                 'pds-multiselect__label': true,
                 'visually-hidden': this.hideLabel,
-            } }, this.label)), index.h("div", { key: '0bf4a3b1378ff18e6d6b449507ebbae1bfb279e4', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (index.h("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (index.h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
+            } }, this.label)), index.h("div", { key: '06539bf2c4b8da2889505a9f042d5cd6721b1853', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (index.h("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (index.h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
                 'pds-multiselect__trigger': true,
                 'pds-multiselect__trigger--open': this.isOpen,
                 'pds-multiselect__trigger--disabled': this.disabled,
@@ -1252,7 +1253,7 @@ const PdsMultiselect = class {
             }, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": form.assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, index.h("span", { class: {
                 'pds-multiselect__trigger-text': true,
                 'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
-            } }, this.getTriggerText()), index.h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: index$1.enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), index.h("span", { key: '5202a263b219d06891bda739f98db0162bf33c48', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (index.h("p", { key: '47f7b55863c5b72d41c4ef1893b9364988fc0b56', class: "pds-multiselect__helper", id: form.messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (index.h("p", { key: '3930dc30b2df7179d178873c470aa1da0f6f258c', class: "pds-multiselect__error", id: form.messageId(this.componentId, 'error') }, index.h("pds-icon", { key: 'e31d55db3fd0173c56faa23e34e0be92371983d4', icon: index$1.danger, size: "small" }), this.errorMessage)), index.h("div", { key: 'b3326cc1a5e5886be05327a066e0a7ddd36ccefc', style: { display: 'none' } }, index.h("slot", { key: '91559cb9510abce6084348a17516460fd8545ef7' })))));
+            } }, this.getTriggerText()), index.h("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: index$1.enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), index.h("span", { key: '3364fc00bc744fcd599436a9cb6dc563564d89d9', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (index.h("p", { key: 'bf712c65b9acb66e2998a43686fed408fc1ff48a', class: "pds-multiselect__helper", id: form.messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (index.h("p", { key: 'b485db6c2c3ae312cce2b90db60e850ad6dfdcf5', class: "pds-multiselect__error", id: form.messageId(this.componentId, 'error') }, index.h("pds-icon", { key: '20daf861cf9584f33f5a9574e9581acc487e7dfe', icon: index$1.danger, size: "small" }), this.errorMessage)), index.h("div", { key: '018d333254771695a8c191f1cea40af6e78427a2', style: { display: 'none' } }, index.h("slot", { key: '2ef4a01fbe5d294a9ead5cc1183c28341834539b' })))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

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

@@ -50,6 +50,16 @@ const cssEscape = (value) => {
 
 const pdsPopoverCss = () => `:host{--sizing-max-width-default:352px;display:inline-block}:host .pds-popover__trigger-wrapper{display:inline-block}:host .pds-popover__content-slot-wrapper{display:none}`;
 
+/** Open auto popovers, in the order they opened: Escape goes to the last one it applies to. */
+const openAutoPopovers = [];
+/** The focused element, followed down through shadow roots to the control that has focus. */
+function deepActiveElement() {
+    var _a;
+    let active = document.activeElement;
+    while ((_a = active === null || active === void 0 ? void 0 : active.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement)
+        active = active.shadowRoot.activeElement;
+    return active;
+}
 const PdsPopover = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -81,7 +91,7 @@ const PdsPopover = class {
          */
         this.triggerObserver = null;
         /**
-         * Portal element rendered in document.body
+         * Portal element: in document.body, or in the open dialog the popover is in
          */
         this.portalEl = null;
         /**
@@ -177,6 +187,26 @@ const PdsPopover = class {
                     break;
             }
         };
+        /** The focus style copied into a shadow root the panel opened in, which `document.head` can't reach. */
+        this.shadowFocusStyle = null;
+        /** The dialog the panel was opened in, closed along with it. */
+        this.watchedDialog = null;
+        this.onDialogClose = () => {
+            this.hide();
+        };
+        /**
+         * Inside a dialog, the panel can sit in a form that wraps the dialog, which a body portal never
+         * did. A submit from the panel (a button in it, or Enter in a field in it) is stopped, so the
+         * panel behaves as it does in the body.
+         */
+        this.handleSubmitFromPanel = (event) => {
+            if (!this.portalEl || !closest.containsComposed(event.target, this.portalEl))
+                return;
+            if (closest.containsComposed(this.portalEl, event.submitter) || closest.containsComposed(this.portalEl, deepActiveElement())) {
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
     }
     restorePlacementDefault(newValue) {
         this.placement = reflectedAttributeDefault.restoreReflectedDefault(this.el, 'placement', newValue, 'right');
@@ -239,19 +269,23 @@ const PdsPopover = class {
         (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.handleTriggerClick);
         this.observeTrigger();
         this.linkTriggerToPortal();
-        // Still open after a move: the trigger moved, so the portal follows it.
+        // Still open after a move: the trigger moved, so the portal follows it, into the dialog it
+        // is in now, if any.
         if (this.active) {
+            this.placePortal();
             requestAnimationFrame(() => this.handlePopoverPositioning());
         }
     }
     disconnectedCallback() {
         var _a;
         // Moved in one operation (a DOM morph, or a framework reparenting it), the popover is
-        // already back in the page. Its portal is in <body>, untouched, so it stays open, with focus
-        // where it was.
+        // already back in the page. Its portal is outside the popover, so it stays open, with focus
+        // where it was; connectedCallback moves it to follow the popover.
         if (this.el.isConnected)
             return;
         this.isComponentMounted = false;
+        this.unwatchDialogClose();
+        this.forgetOpen();
         // Open, the content sits in the portal; put it back before the portal goes. Only listeners on
         // the popover itself hear the close event now, but those are the ones mirroring its state.
         if (this.active) {
@@ -272,6 +306,7 @@ const PdsPopover = class {
         // Clean up all event listeners
         this.removeLightDismissListeners();
         this.removeScrollAndResizeListeners();
+        document.removeEventListener('submit', this.handleSubmitFromPanel, true);
         // Clear any pending debounce timers
         this.clearDebounceTimers();
         // Remove portal from DOM
@@ -316,9 +351,6 @@ const PdsPopover = class {
         else {
             this.portalEl.id = `${this.componentId}-portal`;
         }
-        // Add accessibility attributes for screen readers
-        // Note: Native Popover API doesn't add a specific role, keeping semantic HTML
-        this.portalEl.setAttribute('aria-modal', 'false'); // Not a modal, can interact with rest of page
         // Append to body
         document.body.appendChild(this.portalEl);
         // Add global focus styles to match Pine design system
@@ -402,7 +434,27 @@ const PdsPopover = class {
         // Clear tracking array
         this.movedNodes = [];
     }
+    copyFocusStylesInto(root) {
+        var _a, _b, _c;
+        // Outside a shadow root the document's own style applies, so drop a copy left in one.
+        if (!(root instanceof ShadowRoot)) {
+            (_a = this.shadowFocusStyle) === null || _a === void 0 ? void 0 : _a.remove();
+            this.shadowFocusStyle = null;
+            return;
+        }
+        if (((_b = this.shadowFocusStyle) === null || _b === void 0 ? void 0 : _b.parentNode) === root || !this.portalEl)
+            return;
+        const source = document.querySelector(`style[data-pds-popover-focus="${cssEscape(this.portalEl.id)}"]`);
+        if (!source)
+            return;
+        (_c = this.shadowFocusStyle) === null || _c === void 0 ? void 0 : _c.remove();
+        this.shadowFocusStyle = source.cloneNode(true);
+        root.appendChild(this.shadowFocusStyle);
+    }
     removePortal() {
+        var _a;
+        (_a = this.shadowFocusStyle) === null || _a === void 0 ? void 0 : _a.remove();
+        this.shadowFocusStyle = null;
         if (this.portalEl) {
             // Remove the portal element from DOM
             if (this.portalEl.parentNode) {
@@ -427,9 +479,13 @@ const PdsPopover = class {
         // Record open timestamp to prevent immediate close from opening click
         this.openTimestamp = Date.now();
         this.linkTriggerToPortal();
+        this.placePortal();
         // Update portal content with latest slot content
         this.updatePortalContent();
-        // Show portal
+        // Show portal. The attribute tells a modal around it that this popover takes Escape first; only
+        // an auto popover listens for Escape.
+        if (this.popoverType === 'auto')
+            this.portalEl.setAttribute('data-pds-popover-open', '');
         this.portalEl.style.display = 'block';
         this.portalEl.style.opacity = '1';
         this.portalEl.style.visibility = 'visible';
@@ -441,8 +497,10 @@ const PdsPopover = class {
         });
         // Add scroll and resize listeners for repositioning (always)
         this.addScrollAndResizeListeners();
+        document.addEventListener('submit', this.handleSubmitFromPanel, true);
         // Add document listeners for light dismiss and escape key (auto type only)
         if (this.popoverType === 'auto') {
+            openAutoPopovers.push(this);
             this.addLightDismissListeners();
         }
         // Emit open event
@@ -458,12 +516,16 @@ const PdsPopover = class {
         if (!this.active || !this.portalEl)
             return;
         this.active = false;
-        // Restoring the content drops its focus to the body, so check where focus is first.
-        const focusWasInside = this.portalEl.contains(document.activeElement);
+        this.unwatchDialogClose();
+        // Restoring the content drops its focus to the body, so check where focus is first. In a
+        // shadow root, document.activeElement is only its host.
+        const focusWasInside = closest.containsComposed(this.portalEl, deepActiveElement());
         this.linkTriggerToPortal();
         // Restore content back to original slot positions
         this.restorePortalContent();
-        // Hide portal
+        // Hide portal. The dark-mode border set in a shadow root is worked out again on the next open.
+        this.portalEl.style.border = '';
+        this.portalEl.removeAttribute('data-pds-popover-open');
         this.portalEl.style.display = 'none';
         this.portalEl.style.opacity = '0';
         this.portalEl.style.visibility = 'hidden';
@@ -473,8 +535,10 @@ const PdsPopover = class {
             this.returnFocusToTrigger();
         }
         // Remove all listeners
+        this.forgetOpen();
         this.removeLightDismissListeners();
         this.removeScrollAndResizeListeners();
+        document.removeEventListener('submit', this.handleSubmitFromPanel, true);
         // Clear any pending timers
         this.clearDebounceTimers();
         // Emit close event
@@ -494,6 +558,59 @@ const PdsPopover = class {
             this.show();
         }
     }
+    /**
+     * Puts the panel where it shows above everything around the popover. In an open dialog, it goes
+     * inside it: a modal dialog sits in the top layer above the body and makes the rest of the page
+     * inert, and a non-modal one sits above it by z-index. Right after the popover, it's next in the
+     * Tab order. In another component's slot, though, it would have no slot to render in, and in a
+     * form its buttons would submit it, so there it goes at the end of the dialog.
+     */
+    placePortal() {
+        var _a, _b;
+        if (!this.portalEl)
+            return;
+        const dialog = closest.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.closest('form', this.el);
+        const besidePopover = !((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) && !(form && closest.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.closest('[data-theme="dark"]', this.el) ? 'var(--pine-border)' : '';
+    }
+    forgetOpen() {
+        const index = openAutoPopovers.indexOf(this);
+        if (index >= 0)
+            openAutoPopovers.splice(index, 1);
+    }
+    /**
+     * Whether an Escape is this popover's. One from a dialog the popover isn't in belongs to that
+     * dialog when it's above it: a top-layer dialog or a pds-modal. A plain non-modal dialog inside
+     * the popover's modal doesn't close on Escape, so the popover takes it.
+     */
+    takesEscapeFrom(event) {
+        var _a, _b;
+        const origin = ((_b = (_a = event.composedPath) === null || _a === void 0 ? void 0 : _a.call(event)[0]) !== null && _b !== void 0 ? _b : event.target);
+        const dialog = closest.closest('dialog[open]', origin);
+        if (!dialog || closest.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)
      */
@@ -502,6 +619,19 @@ const PdsPopover = class {
         document.addEventListener('click', this.boundClickOutsideHandler, true);
         document.addEventListener('keydown', this.boundEscapeKeyHandler);
     }
+    /** Closes the popover when the dialog it opened in closes, so it isn't left open inside. */
+    watchDialogClose(dialog) {
+        if (this.watchedDialog === dialog)
+            return;
+        this.unwatchDialogClose();
+        this.watchedDialog = dialog;
+        dialog.addEventListener('close', this.onDialogClose);
+    }
+    unwatchDialogClose() {
+        var _a;
+        (_a = this.watchedDialog) === null || _a === void 0 ? void 0 : _a.removeEventListener('close', this.onDialogClose);
+        this.watchedDialog = null;
+    }
     /**
      * Removes light dismiss listeners
      */
@@ -527,7 +657,7 @@ const PdsPopover = class {
      * Handles clicks outside the popover for light dismiss (auto type only)
      */
     handleClickOutside(event) {
-        var _a, _b, _c, _d;
+        var _a, _b;
         // Ignore events that occurred at or before the popover opened
         // This prevents the opening click from immediately closing the popover
         // Convert event.timeStamp (DOMHighResTimeStamp from performance.now()) to epoch time
@@ -538,16 +668,18 @@ const PdsPopover = class {
         if (eventTime <= this.openTimestamp) {
             return;
         }
-        const target = event.target;
+        // In a shadow root, event.target is only its host.
+        const target = ((_b = (_a = event.composedPath) === null || _a === void 0 ? void 0 : _a.call(event)[0]) !== null && _b !== void 0 ? _b : event.target);
         // A datepicker's calendar is portaled to the body: a click in the calendar of a datepicker
-        // inside this popover, in its content or its trigger, isn't outside it.
-        const calendar = (_b = (_a = target).closest) === null || _b === void 0 ? void 0 : _b.call(_a, '.pds-datepicker-calendar-portal');
+        // inside this popover, in its content or its trigger, isn't outside it. The target can be
+        // inside the calendar's shadow root, so look up across it.
+        const calendar = closest.closest('.pds-datepicker-calendar-portal', target);
         const owner = calendar === null || calendar === void 0 ? void 0 : calendar.pdsDatepicker;
         if (owner && (closest.containsComposed(this.portalEl, owner) || closest.containsComposed(this.triggerEl, owner)))
             return;
         // Check if click is outside both the popover portal and the trigger
-        const clickedInsidePopover = (_c = this.portalEl) === null || _c === void 0 ? void 0 : _c.contains(target);
-        const clickedInsideTrigger = (_d = this.triggerEl) === null || _d === void 0 ? void 0 : _d.contains(target);
+        const clickedInsidePopover = closest.containsComposed(this.portalEl, target);
+        const clickedInsideTrigger = closest.containsComposed(this.triggerEl, target);
         if (!clickedInsidePopover && !clickedInsideTrigger) {
             this.hide();
         }
@@ -568,14 +700,19 @@ const PdsPopover = class {
      * Mirrors native Popover API: Escape closes and returns focus to trigger
      */
     handleEscapeKey(event) {
-        if (event.key === 'Escape') {
-            // Prevent default Escape behavior and stop propagation
-            // This mirrors native Popover API which handles Escape exclusively
-            event.preventDefault();
-            event.stopPropagation();
-            // Close popover and return focus to trigger
-            this.hide();
-        }
+        // A control inside that closes on Escape (a datepicker, a combobox) has handled it already.
+        if (event.key !== 'Escape' || event.defaultPrevented)
+            return;
+        // Like the native Popover API, Escape closes only the top popover: the last one opened that
+        // it applies to. Every open popover hears it, so each checks whether it's that one.
+        const top = [...openAutoPopovers].reverse().find(popover => popover.takesEscapeFrom(event));
+        if (top !== this)
+            return;
+        // Take the key, so the dialog or modal around it doesn't close too.
+        event.preventDefault();
+        event.stopPropagation();
+        // Close popover and return focus to trigger
+        this.hide();
     }
     /**
      * Handles scroll events to reposition the popover (debounced for performance)
@@ -680,13 +817,20 @@ const PdsPopover = class {
         }
         this.portalEl.style.top = `${top}px`;
         this.portalEl.style.left = `${left}px`;
+        // `position: fixed` measures from the viewport unless an ancestor becomes its containing block,
+        // as a modal dialog does with its backdrop filter. Shift by however far it landed from the spot.
+        const placed = this.portalEl.getBoundingClientRect();
+        if (Math.abs(placed.top - top) > 0.5 || Math.abs(placed.left - left) > 0.5) {
+            this.portalEl.style.top = `${2 * top - placed.top}px`;
+            this.portalEl.style.left = `${2 * left - placed.left}px`;
+        }
         // Reset the repositioning guard after a short delay
         setTimeout(() => {
             this.isRepositioning = false;
         }, 16); // ~1 frame at 60fps
     }
     render() {
-        return (index.h(index.Host, { key: 'd804db8c73e0dc2acf0d1bbca20edb77993ff7fd', id: this.componentId }, index.h("span", { key: '5408d1856c9b13b327ea13b43cffc23af925a82f', class: "pds-popover__trigger-wrapper" }, index.h("slot", { key: '9d0ff01292c67bdaa88d49114162c3c65ff8a20d', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), index.h("div", { key: 'cdd38016453ea1838d5718fb8e190cd4304ac8cc', class: "pds-popover__content-slot-wrapper" }, index.h("slot", { key: '9faf60d7be7a2ff3c5fe6c3e4de374bafadf848a', onSlotchange: this.handleContentSlotChange }))));
+        return (index.h(index.Host, { key: 'da8a0c715df1199231b1265085f3f9ae0234032d', id: this.componentId }, index.h("span", { key: 'f35023492399420829cec2e88556462f5ac1663e', class: "pds-popover__trigger-wrapper" }, index.h("slot", { key: '38ebe92eebb87665467b3f92ff94dc8095450063', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), index.h("div", { key: '8917930f4520544d14bbd68b4c7936dd60af19e3', class: "pds-popover__content-slot-wrapper" }, index.h("slot", { key: '28d3f9112256edd95721a79a7072a9e35a3712bf', onSlotchange: this.handleContentSlotChange }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {