@ionic/core 8.7.12-nightly.20251209 → 8.7.12

package/hydrate/index.js

@@ -5851,6 +5851,14 @@ const CoreDelegate = () => {
 let lastOverlayIndex = 0;
 let lastId = 0;
 const activeAnimations = new WeakMap();
+/**
+ * Determines if the overlay's backdrop is always blocking (no background interaction).
+ * Returns false if showBackdrop=false or backdropBreakpoint > 0.
+ */
+const isBackdropAlwaysBlocking = (el) => {
+    var _a;
+    return el.showBackdrop !== false && !(((_a = el.backdropBreakpoint) !== null && _a !== void 0 ? _a : 0) > 0);
+};
 const createController = (tagName) => {
     return {
         create(options) {
@@ -6288,9 +6296,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
      */
     const overlayEl = overlay.el;
     const shouldTrapFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
-    // Only lock out root content when backdrop is active. Developers relying on showBackdrop=false
-    // expect background interaction to remain enabled.
-    const shouldLockRoot = shouldTrapFocus && overlayEl.showBackdrop !== false;
+    const shouldLockRoot = shouldTrapFocus && isBackdropAlwaysBlocking(overlayEl);
     overlay.presented = true;
     overlay.willPresent.emit();
     if (shouldLockRoot) {
@@ -6406,10 +6412,10 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
      */
     const overlaysLockingRoot = presentedOverlays.filter((o) => {
         const el = o;
-        return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && el.showBackdrop !== false;
+        return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && isBackdropAlwaysBlocking(el);
     });
     const overlayEl = overlay.el;
-    const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && overlayEl.showBackdrop !== false;
+    const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && isBackdropAlwaysBlocking(overlayEl);
     /**
      * If this is the last visible overlay that is trapping focus
      * then we want to re-add the root to the accessibility tree.
@@ -10663,6 +10669,15 @@ class Content {
     }
     resize() {
     }
+    /**
+     * Recalculate content dimensions. Called by overlays (e.g., popover) when
+     * sibling elements like headers or footers have finished rendering and their
+     * heights are available, ensuring accurate offset-top calculations.
+     * @internal
+     */
+    async recalculateDimensions() {
+        readTask(() => this.readDimensions());
+    }
     readDimensions() {
         const page = getPageElement(this.el);
         const top = Math.max(this.el.offsetTop, 0);
@@ -10831,7 +10846,7 @@ class Content {
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
         this.resize();
-        return (hAsync(Host, Object.assign({ key: 'f2a24aa66dbf5c76f9d4b06f708eb73cadc239df', role: isMainContent ? 'main' : undefined, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, Object.assign({ key: 'cd8781f848d8dc926fe66f43d43c49564425a507', role: isMainContent ? 'main' : undefined, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
@@ -10839,12 +10854,12 @@ class Content {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, inheritedAttributes), hAsync("div", { key: '6480ca7648b278abb36477b3838bccbcd4995e2a', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? hAsync("slot", { name: "fixed" }) : null, hAsync("div", { key: '29a23b663f5f0215bb000820c01e1814c0d55985', class: {
+            } }, inheritedAttributes), hAsync("div", { key: '95b112d7cae30f22ef778ceffb88edb4d941c170', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? hAsync("slot", { name: "fixed" }) : null, hAsync("div", { key: '2fdfcbc39fb66f11b6191911f2941c660f4c12e5', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, hAsync("slot", { key: '0fe1bd05609a4b88ae2ce9addf5d5dc5dc1806f0' })), transitionShadow ? (hAsync("div", { class: "transition-effect" }, hAsync("div", { class: "transition-cover" }), hAsync("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? hAsync("slot", { name: "fixed" }) : null));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, hAsync("slot", { key: '6bc77e0054ec8e21635a7f2abfe0ca46e0962e03' })), transitionShadow ? (hAsync("div", { class: "transition-effect" }, hAsync("div", { class: "transition-cover" }), hAsync("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? hAsync("slot", { name: "fixed" }) : null));
     }
     get el() { return getElement(this); }
     static get style() { return contentCss; }
@@ -10859,6 +10874,7 @@ class Content {
             "scrollX": [4, "scroll-x"],
             "scrollY": [4, "scroll-y"],
             "scrollEvents": [4, "scroll-events"],
+            "recalculateDimensions": [64],
             "getScrollElement": [64],
             "getBackgroundElement": [64],
             "scrollToTop": [64],
@@ -23195,7 +23211,13 @@ class Modal {
             };
             window.addEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
         }
-        if (this.isSheetModal) {
+        /**
+         * Recalculate isSheetModal because framework bindings (e.g., Angular)
+         * may not have been applied when componentWillLoad ran.
+         */
+        const isSheetModal = this.breakpoints !== undefined && this.initialBreakpoint !== undefined;
+        this.isSheetModal = isSheetModal;
+        if (isSheetModal) {
             this.initSheetGesture();
         }
         else if (hasCardModal) {
@@ -23277,6 +23299,79 @@ class Modal {
         this.gesture = gesture;
         this.moveSheetToBreakpoint = moveSheetToBreakpoint;
         this.gesture.enable(true);
+        /**
+         * When backdrop interaction is allowed, nested router outlets from child routes
+         * may block pointer events to parent content. Apply passthrough styles only when
+         * the modal was the sole content of a child route page.
+         * See https://github.com/ionic-team/ionic-framework/issues/30700
+         */
+        const backdropNotBlocking = this.showBackdrop === false || this.focusTrap === false || backdropBreakpoint > 0;
+        if (backdropNotBlocking) {
+            this.setupChildRoutePassthrough();
+        }
+    }
+    /**
+     * For sheet modals that allow background interaction, sets up pointer-events
+     * passthrough on child route page wrappers and nested router outlets.
+     */
+    setupChildRoutePassthrough() {
+        var _a;
+        // Cache the page parent for cleanup
+        this.cachedPageParent = this.getOriginalPageParent();
+        const pageParent = this.cachedPageParent;
+        // Skip ion-app (controller modals) and pages with visible sibling content next to the modal
+        if (!pageParent || pageParent.tagName === 'ION-APP') {
+            return;
+        }
+        const hasVisibleContent = Array.from(pageParent.children).some((child) => {
+            var _a;
+            return child !== this.el &&
+                !(child instanceof HTMLElement && window.getComputedStyle(child).display === 'none') &&
+                child.tagName !== 'TEMPLATE' &&
+                child.tagName !== 'SLOT' &&
+                !(child.nodeType === Node.TEXT_NODE && !((_a = child.textContent) === null || _a === void 0 ? void 0 : _a.trim()));
+        });
+        if (hasVisibleContent) {
+            return;
+        }
+        // Child route case: page only contained the modal
+        pageParent.classList.add('ion-page-overlay-passthrough');
+        // Also make nested router outlets passthrough
+        const routerOutlet = pageParent.parentElement;
+        if ((routerOutlet === null || routerOutlet === void 0 ? void 0 : routerOutlet.tagName) === 'ION-ROUTER-OUTLET' && ((_a = routerOutlet.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) !== 'ION-APP') {
+            routerOutlet.style.setProperty('pointer-events', 'none');
+            routerOutlet.setAttribute('data-overlay-passthrough', 'true');
+        }
+    }
+    /**
+     * Finds the ion-page ancestor of the modal's original parent location.
+     */
+    getOriginalPageParent() {
+        if (!this.cachedOriginalParent) {
+            return null;
+        }
+        let pageParent = this.cachedOriginalParent;
+        while (pageParent && !pageParent.classList.contains('ion-page')) {
+            pageParent = pageParent.parentElement;
+        }
+        return pageParent;
+    }
+    /**
+     * Removes passthrough styles added by setupChildRoutePassthrough.
+     */
+    cleanupChildRoutePassthrough() {
+        const pageParent = this.cachedPageParent;
+        if (!pageParent) {
+            return;
+        }
+        pageParent.classList.remove('ion-page-overlay-passthrough');
+        const routerOutlet = pageParent.parentElement;
+        if (routerOutlet === null || routerOutlet === void 0 ? void 0 : routerOutlet.hasAttribute('data-overlay-passthrough')) {
+            routerOutlet.style.removeProperty('pointer-events');
+            routerOutlet.removeAttribute('data-overlay-passthrough');
+        }
+        // Clear the cached reference
+        this.cachedPageParent = undefined;
     }
     sheetOnDismiss() {
         /**
@@ -23366,6 +23461,7 @@ class Modal {
             }
             this.cleanupViewTransitionListener();
             this.cleanupParentRemovalObserver();
+            this.cleanupChildRoutePassthrough();
         }
         this.currentBreakpoint = undefined;
         this.animation = undefined;
@@ -23562,6 +23658,17 @@ class Modal {
             this.cachedOriginalParent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
             return;
         }
+        /**
+         * Don't observe for controller-based modals or when the parent is the
+         * app root (document.body or ion-app). These parents won't be removed,
+         * and observing document.body with subtree: true causes performance
+         * issues with frameworks like Angular during change detection.
+         */
+        if (this.hasController ||
+            this.cachedOriginalParent === document.body ||
+            this.cachedOriginalParent.tagName === 'ION-APP') {
+            return;
+        }
         this.parentRemovalObserver = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
                 if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
@@ -23603,20 +23710,20 @@ class Modal {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (hAsync(Host, Object.assign({ key: '9e9a7bd591eb17a225a00b4fa2e379e94601d17f', "no-router": true,
+        return (hAsync(Host, Object.assign({ key: '9a75095a13de0cfc96f1fa69fd92777d25da8daa', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
             tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), hAsync("ion-backdrop", { key: 'e5eae2c14f830f75e308fcd7f4c10c86fac5b962', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: 'e268f9cd310c3cf4e051b5b92524ce4fb70d005e', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '9c380f36c18144c153077b15744d1c3346bce63e',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), hAsync("ion-backdrop", { key: 'd02612d8063ef20f59f173ff47795f71cdaaf63e', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: '708761b70a93e34c08faae079569f444c7416a4c', class: "modal-shadow" }), hAsync("div", Object.assign({ key: 'a72226ff1a98229f9bfd9207b98fc57e02baa430',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '2d5ee6d5959d97309c306e8ce72eb0f2c19be144', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '0547f32323882660221385d84d492929caa77c6b', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), hAsync("slot", { key: '5590434c35ea04c42fc006498bc189038e15a298', onSlotchange: this.onSlotChange }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), hAsync("slot", { key: 'fccbd64518b6fa22f9e874deb6b4ba55d8d89c3b', onSlotchange: this.onSlotChange }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -23656,6 +23763,7 @@ class Modal {
             "keepContentsMounted": [4, "keep-contents-mounted"],
             "focusTrap": [4, "focus-trap"],
             "canDismiss": [4, "can-dismiss"],
+            "isSheetModal": [32],
             "presented": [32],
             "present": [64],
             "dismiss": [64],
@@ -27723,6 +27831,10 @@ class Popover {
         if (destroyTriggerInteraction) {
             destroyTriggerInteraction();
         }
+        if (this.headerResizeObserver) {
+            this.headerResizeObserver.disconnect();
+            this.headerResizeObserver = undefined;
+        }
     }
     componentWillLoad() {
         var _a, _b;
@@ -27825,6 +27937,7 @@ class Popover {
          */
         this.ionMount.emit();
         this.usersElement = await attachComponent(delegate, el, this.component, ['popover-viewport'], this.componentProps, inline);
+        this.recalculateContentOnHeaderReady();
         if (!this.keyboardEvents) {
             this.configureKeyboardInteraction();
         }
@@ -27870,6 +27983,35 @@ class Popover {
         }
         unlock();
     }
+    /**
+     * Watch the header for height changes and trigger content dimension
+     * recalculation when the header has a height > 0. This sets the offset-top
+     * of the content to the height of the header correctly.
+     */
+    recalculateContentOnHeaderReady() {
+        var _a;
+        const popoverContent = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.popover-content');
+        if (!popoverContent) {
+            return;
+        }
+        const contentContainer = this.usersElement || popoverContent;
+        const header = contentContainer.querySelector('ion-header');
+        const contentElements = contentContainer.querySelectorAll('ion-content');
+        if (!header || contentElements.length === 0) {
+            return;
+        }
+        this.headerResizeObserver = new ResizeObserver(async () => {
+            var _a;
+            if (header.offsetHeight > 0) {
+                (_a = this.headerResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+                this.headerResizeObserver = undefined;
+                for (const contentEl of contentElements) {
+                    await contentEl.recalculateDimensions();
+                }
+            }
+        });
+        this.headerResizeObserver.observe(header);
+    }
     /**
      * Dismiss the popover overlay after it has been presented.
      * This is a no-op if the overlay has not been presented yet. If you want
@@ -27931,9 +28073,9 @@ class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (hAsync(Host, Object.assign({ key: '16866c02534968c982cf4730d2936d03a5107c8b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '42863f748c93f709d433931d969230137b37d42d', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { key: '0df258601a4d30df3c27aa8234a7d5e056c3ecbb', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: 'f94e80ed996b957b5cd09b826472b4f60e8fcc78', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '185ce22f6386e8444a9cc7b8818dbfc16c463c99', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '206202b299404e110de5397b229678cca18568d3', class: "popover-content", part: "content" }, hAsync("slot", { key: 'ee543a0b92d6e35a837c0a0e4617c7b0fc4ad0b0' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { key: '22b6d82178b52158b76ab3fd9a7dd738fd6e4bbf', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: 'b76335c64e992a964ed3fb91d17a992c3474b4cd', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '018c846c32e7ff7fa010528e6b37a17e5f03c84c', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '350c468c80052da3a07768bceab98fe159c35a43', class: "popover-content", part: "content" }, hAsync("slot", { key: '686443c17ac9873d33905c1cdb67e6d6da675282' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/hydrate/index.mjs

@@ -5849,6 +5849,14 @@ const CoreDelegate = () => {
 let lastOverlayIndex = 0;
 let lastId = 0;
 const activeAnimations = new WeakMap();
+/**
+ * Determines if the overlay's backdrop is always blocking (no background interaction).
+ * Returns false if showBackdrop=false or backdropBreakpoint > 0.
+ */
+const isBackdropAlwaysBlocking = (el) => {
+    var _a;
+    return el.showBackdrop !== false && !(((_a = el.backdropBreakpoint) !== null && _a !== void 0 ? _a : 0) > 0);
+};
 const createController = (tagName) => {
     return {
         create(options) {
@@ -6286,9 +6294,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
      */
     const overlayEl = overlay.el;
     const shouldTrapFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
-    // Only lock out root content when backdrop is active. Developers relying on showBackdrop=false
-    // expect background interaction to remain enabled.
-    const shouldLockRoot = shouldTrapFocus && overlayEl.showBackdrop !== false;
+    const shouldLockRoot = shouldTrapFocus && isBackdropAlwaysBlocking(overlayEl);
     overlay.presented = true;
     overlay.willPresent.emit();
     if (shouldLockRoot) {
@@ -6404,10 +6410,10 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
      */
     const overlaysLockingRoot = presentedOverlays.filter((o) => {
         const el = o;
-        return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && el.showBackdrop !== false;
+        return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && isBackdropAlwaysBlocking(el);
     });
     const overlayEl = overlay.el;
-    const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && overlayEl.showBackdrop !== false;
+    const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && isBackdropAlwaysBlocking(overlayEl);
     /**
      * If this is the last visible overlay that is trapping focus
      * then we want to re-add the root to the accessibility tree.
@@ -10661,6 +10667,15 @@ class Content {
     }
     resize() {
     }
+    /**
+     * Recalculate content dimensions. Called by overlays (e.g., popover) when
+     * sibling elements like headers or footers have finished rendering and their
+     * heights are available, ensuring accurate offset-top calculations.
+     * @internal
+     */
+    async recalculateDimensions() {
+        readTask(() => this.readDimensions());
+    }
     readDimensions() {
         const page = getPageElement(this.el);
         const top = Math.max(this.el.offsetTop, 0);
@@ -10829,7 +10844,7 @@ class Content {
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
         this.resize();
-        return (hAsync(Host, Object.assign({ key: 'f2a24aa66dbf5c76f9d4b06f708eb73cadc239df', role: isMainContent ? 'main' : undefined, class: createColorClasses$1(this.color, {
+        return (hAsync(Host, Object.assign({ key: 'cd8781f848d8dc926fe66f43d43c49564425a507', role: isMainContent ? 'main' : undefined, class: createColorClasses$1(this.color, {
                 [mode]: true,
                 'content-sizing': hostContext('ion-popover', this.el),
                 overscroll: forceOverscroll,
@@ -10837,12 +10852,12 @@ class Content {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, inheritedAttributes), hAsync("div", { key: '6480ca7648b278abb36477b3838bccbcd4995e2a', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? hAsync("slot", { name: "fixed" }) : null, hAsync("div", { key: '29a23b663f5f0215bb000820c01e1814c0d55985', class: {
+            } }, inheritedAttributes), hAsync("div", { key: '95b112d7cae30f22ef778ceffb88edb4d941c170', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? hAsync("slot", { name: "fixed" }) : null, hAsync("div", { key: '2fdfcbc39fb66f11b6191911f2941c660f4c12e5', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
                 overscroll: (scrollX || scrollY) && forceOverscroll,
-            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, hAsync("slot", { key: '0fe1bd05609a4b88ae2ce9addf5d5dc5dc1806f0' })), transitionShadow ? (hAsync("div", { class: "transition-effect" }, hAsync("div", { class: "transition-cover" }), hAsync("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? hAsync("slot", { name: "fixed" }) : null));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, hAsync("slot", { key: '6bc77e0054ec8e21635a7f2abfe0ca46e0962e03' })), transitionShadow ? (hAsync("div", { class: "transition-effect" }, hAsync("div", { class: "transition-cover" }), hAsync("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? hAsync("slot", { name: "fixed" }) : null));
     }
     get el() { return getElement(this); }
     static get style() { return contentCss; }
@@ -10857,6 +10872,7 @@ class Content {
             "scrollX": [4, "scroll-x"],
             "scrollY": [4, "scroll-y"],
             "scrollEvents": [4, "scroll-events"],
+            "recalculateDimensions": [64],
             "getScrollElement": [64],
             "getBackgroundElement": [64],
             "scrollToTop": [64],
@@ -23193,7 +23209,13 @@ class Modal {
             };
             window.addEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
         }
-        if (this.isSheetModal) {
+        /**
+         * Recalculate isSheetModal because framework bindings (e.g., Angular)
+         * may not have been applied when componentWillLoad ran.
+         */
+        const isSheetModal = this.breakpoints !== undefined && this.initialBreakpoint !== undefined;
+        this.isSheetModal = isSheetModal;
+        if (isSheetModal) {
             this.initSheetGesture();
         }
         else if (hasCardModal) {
@@ -23275,6 +23297,79 @@ class Modal {
         this.gesture = gesture;
         this.moveSheetToBreakpoint = moveSheetToBreakpoint;
         this.gesture.enable(true);
+        /**
+         * When backdrop interaction is allowed, nested router outlets from child routes
+         * may block pointer events to parent content. Apply passthrough styles only when
+         * the modal was the sole content of a child route page.
+         * See https://github.com/ionic-team/ionic-framework/issues/30700
+         */
+        const backdropNotBlocking = this.showBackdrop === false || this.focusTrap === false || backdropBreakpoint > 0;
+        if (backdropNotBlocking) {
+            this.setupChildRoutePassthrough();
+        }
+    }
+    /**
+     * For sheet modals that allow background interaction, sets up pointer-events
+     * passthrough on child route page wrappers and nested router outlets.
+     */
+    setupChildRoutePassthrough() {
+        var _a;
+        // Cache the page parent for cleanup
+        this.cachedPageParent = this.getOriginalPageParent();
+        const pageParent = this.cachedPageParent;
+        // Skip ion-app (controller modals) and pages with visible sibling content next to the modal
+        if (!pageParent || pageParent.tagName === 'ION-APP') {
+            return;
+        }
+        const hasVisibleContent = Array.from(pageParent.children).some((child) => {
+            var _a;
+            return child !== this.el &&
+                !(child instanceof HTMLElement && window.getComputedStyle(child).display === 'none') &&
+                child.tagName !== 'TEMPLATE' &&
+                child.tagName !== 'SLOT' &&
+                !(child.nodeType === Node.TEXT_NODE && !((_a = child.textContent) === null || _a === void 0 ? void 0 : _a.trim()));
+        });
+        if (hasVisibleContent) {
+            return;
+        }
+        // Child route case: page only contained the modal
+        pageParent.classList.add('ion-page-overlay-passthrough');
+        // Also make nested router outlets passthrough
+        const routerOutlet = pageParent.parentElement;
+        if ((routerOutlet === null || routerOutlet === void 0 ? void 0 : routerOutlet.tagName) === 'ION-ROUTER-OUTLET' && ((_a = routerOutlet.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) !== 'ION-APP') {
+            routerOutlet.style.setProperty('pointer-events', 'none');
+            routerOutlet.setAttribute('data-overlay-passthrough', 'true');
+        }
+    }
+    /**
+     * Finds the ion-page ancestor of the modal's original parent location.
+     */
+    getOriginalPageParent() {
+        if (!this.cachedOriginalParent) {
+            return null;
+        }
+        let pageParent = this.cachedOriginalParent;
+        while (pageParent && !pageParent.classList.contains('ion-page')) {
+            pageParent = pageParent.parentElement;
+        }
+        return pageParent;
+    }
+    /**
+     * Removes passthrough styles added by setupChildRoutePassthrough.
+     */
+    cleanupChildRoutePassthrough() {
+        const pageParent = this.cachedPageParent;
+        if (!pageParent) {
+            return;
+        }
+        pageParent.classList.remove('ion-page-overlay-passthrough');
+        const routerOutlet = pageParent.parentElement;
+        if (routerOutlet === null || routerOutlet === void 0 ? void 0 : routerOutlet.hasAttribute('data-overlay-passthrough')) {
+            routerOutlet.style.removeProperty('pointer-events');
+            routerOutlet.removeAttribute('data-overlay-passthrough');
+        }
+        // Clear the cached reference
+        this.cachedPageParent = undefined;
     }
     sheetOnDismiss() {
         /**
@@ -23364,6 +23459,7 @@ class Modal {
             }
             this.cleanupViewTransitionListener();
             this.cleanupParentRemovalObserver();
+            this.cleanupChildRoutePassthrough();
         }
         this.currentBreakpoint = undefined;
         this.animation = undefined;
@@ -23560,6 +23656,17 @@ class Modal {
             this.cachedOriginalParent.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
             return;
         }
+        /**
+         * Don't observe for controller-based modals or when the parent is the
+         * app root (document.body or ion-app). These parents won't be removed,
+         * and observing document.body with subtree: true causes performance
+         * issues with frameworks like Angular during change detection.
+         */
+        if (this.hasController ||
+            this.cachedOriginalParent === document.body ||
+            this.cachedOriginalParent.tagName === 'ION-APP') {
+            return;
+        }
         this.parentRemovalObserver = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
                 if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
@@ -23601,20 +23708,20 @@ class Modal {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (hAsync(Host, Object.assign({ key: '9e9a7bd591eb17a225a00b4fa2e379e94601d17f', "no-router": true,
+        return (hAsync(Host, Object.assign({ key: '9a75095a13de0cfc96f1fa69fd92777d25da8daa', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
             tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1 }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), hAsync("ion-backdrop", { key: 'e5eae2c14f830f75e308fcd7f4c10c86fac5b962', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: 'e268f9cd310c3cf4e051b5b92524ce4fb70d005e', class: "modal-shadow" }), hAsync("div", Object.assign({ key: '9c380f36c18144c153077b15744d1c3346bce63e',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), hAsync("ion-backdrop", { key: 'd02612d8063ef20f59f173ff47795f71cdaaf63e', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: '708761b70a93e34c08faae079569f444c7416a4c', class: "modal-shadow" }), hAsync("div", Object.assign({ key: 'a72226ff1a98229f9bfd9207b98fc57e02baa430',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
               shadow DOM otherwise ion-button will not be highlighted
               when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '2d5ee6d5959d97309c306e8ce72eb0f2c19be144', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (hAsync("button", { key: '0547f32323882660221385d84d492929caa77c6b', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), hAsync("slot", { key: '5590434c35ea04c42fc006498bc189038e15a298', onSlotchange: this.onSlotChange }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), hAsync("slot", { key: 'fccbd64518b6fa22f9e874deb6b4ba55d8d89c3b', onSlotchange: this.onSlotChange }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -23654,6 +23761,7 @@ class Modal {
             "keepContentsMounted": [4, "keep-contents-mounted"],
             "focusTrap": [4, "focus-trap"],
             "canDismiss": [4, "can-dismiss"],
+            "isSheetModal": [32],
             "presented": [32],
             "present": [64],
             "dismiss": [64],
@@ -27721,6 +27829,10 @@ class Popover {
         if (destroyTriggerInteraction) {
             destroyTriggerInteraction();
         }
+        if (this.headerResizeObserver) {
+            this.headerResizeObserver.disconnect();
+            this.headerResizeObserver = undefined;
+        }
     }
     componentWillLoad() {
         var _a, _b;
@@ -27823,6 +27935,7 @@ class Popover {
          */
         this.ionMount.emit();
         this.usersElement = await attachComponent(delegate, el, this.component, ['popover-viewport'], this.componentProps, inline);
+        this.recalculateContentOnHeaderReady();
         if (!this.keyboardEvents) {
             this.configureKeyboardInteraction();
         }
@@ -27868,6 +27981,35 @@ class Popover {
         }
         unlock();
     }
+    /**
+     * Watch the header for height changes and trigger content dimension
+     * recalculation when the header has a height > 0. This sets the offset-top
+     * of the content to the height of the header correctly.
+     */
+    recalculateContentOnHeaderReady() {
+        var _a;
+        const popoverContent = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.popover-content');
+        if (!popoverContent) {
+            return;
+        }
+        const contentContainer = this.usersElement || popoverContent;
+        const header = contentContainer.querySelector('ion-header');
+        const contentElements = contentContainer.querySelectorAll('ion-content');
+        if (!header || contentElements.length === 0) {
+            return;
+        }
+        this.headerResizeObserver = new ResizeObserver(async () => {
+            var _a;
+            if (header.offsetHeight > 0) {
+                (_a = this.headerResizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+                this.headerResizeObserver = undefined;
+                for (const contentEl of contentElements) {
+                    await contentEl.recalculateDimensions();
+                }
+            }
+        });
+        this.headerResizeObserver.observe(header);
+    }
     /**
      * Dismiss the popover overlay after it has been presented.
      * This is a no-op if the overlay has not been presented yet. If you want
@@ -27929,9 +28071,9 @@ class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (hAsync(Host, Object.assign({ key: '16866c02534968c982cf4730d2936d03a5107c8b', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
+        return (hAsync(Host, Object.assign({ key: '42863f748c93f709d433931d969230137b37d42d', "aria-modal": "true", "no-router": true, tabindex: "-1" }, htmlAttributes, { style: {
                 zIndex: `${20000 + this.overlayIndex}`,
-            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { key: '0df258601a4d30df3c27aa8234a7d5e056c3ecbb', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: 'f94e80ed996b957b5cd09b826472b4f60e8fcc78', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '185ce22f6386e8444a9cc7b8818dbfc16c463c99', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '206202b299404e110de5397b229678cca18568d3', class: "popover-content", part: "content" }, hAsync("slot", { key: 'ee543a0b92d6e35a837c0a0e4617c7b0fc4ad0b0' })))));
+            }, class: Object.assign(Object.assign({}, getClassMap(this.cssClass)), { [mode]: true, 'popover-translucent': this.translucent, 'overlay-hidden': true, 'popover-desktop': desktop, [`popover-side-${side}`]: true, [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false, 'popover-nested': !!parentPopover }), onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }), !parentPopover && hAsync("ion-backdrop", { key: '22b6d82178b52158b76ab3fd9a7dd738fd6e4bbf', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: 'b76335c64e992a964ed3fb91d17a992c3474b4cd', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '018c846c32e7ff7fa010528e6b37a17e5f03c84c', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '350c468c80052da3a07768bceab98fe159c35a43', class: "popover-content", part: "content" }, hAsync("slot", { key: '686443c17ac9873d33905c1cdb67e6d6da675282' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.7.12-nightly.20251209",
+  "version": "8.7.12",
   "description": "Base components for Ionic",
   "engines": {
     "node": "24.x"