@ionic/core 8.7.12-dev.11764957130.14454872 → 8.7.12-dev.11764961567.138743ff

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

@@ -9,7 +9,7 @@ var frameworkDelegate = require('./framework-delegate-DMJRBuDi.js');
 var helpers = require('./helpers-DrTqNghc.js');
 var lockController = require('./lock-controller-aDB9wrEf.js');
 var capacitor = require('./capacitor-DmA66EwP.js');
-var overlays = require('./overlays-DxIZwUXI.js');
+var overlays = require('./overlays-D3xMmZCY.js');
 var theme = require('./theme-CeDs6Hcv.js');
 var index$4 = require('./index-094mMFB-.js');
 var ionicGlobal = require('./ionic-global-HMVqOFGO.js');
@@ -1474,9 +1474,9 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
     };
 };
 
-const modalIosCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.ion-disable-focus-trap.show-modal){pointer-events:none}:host(.ion-disable-focus-trap.show-modal) ion-backdrop{pointer-events:none}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0,  100%,  0);transform:translate3d(0,  100%,  0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}";
+const modalIosCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.4)}:host(.modal-card),:host(.modal-sheet){--border-radius:10px}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:10px}}.modal-wrapper{-webkit-transform:translate3d(0,  100%,  0);transform:translate3d(0,  100%,  0)}@media screen and (max-width: 767px){@supports (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - max(30px, var(--ion-safe-area-top)) - 10px)}}@supports not (width: max(0px, 1px)){:host(.modal-card){--height:calc(100% - 40px)}}:host(.modal-card) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}:host(.modal-card){--backdrop-opacity:0;--width:100%;-ms-flex-align:end;align-items:flex-end}:host(.modal-card) .modal-shadow{display:none}:host(.modal-card) ion-backdrop{pointer-events:none}}@media screen and (min-width: 768px){:host(.modal-card){--width:calc(100% - 120px);--height:calc(100% - (120px + var(--ion-safe-area-top) + var(--ion-safe-area-bottom)));--max-width:720px;--max-height:1000px;--backdrop-opacity:0;--box-shadow:0px 0px 30px 10px rgba(0, 0, 0, 0.1);-webkit-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}:host(.modal-card) .modal-wrapper{-webkit-box-shadow:none;box-shadow:none}:host(.modal-card) .modal-shadow{-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}}:host(.modal-sheet) .modal-wrapper{border-start-start-radius:var(--border-radius);border-start-end-radius:var(--border-radius);border-end-end-radius:0;border-end-start-radius:0}";
 
-const modalMdCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.ion-disable-focus-trap.show-modal){pointer-events:none}:host(.ion-disable-focus-trap.show-modal) ion-backdrop{pointer-events:none}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0,  40px,  0);transform:translate3d(0,  40px,  0);opacity:0.01}";
+const modalMdCss = ":host{--width:100%;--min-width:auto;--max-width:auto;--height:100%;--min-height:auto;--max-height:auto;--overflow:hidden;--border-radius:0;--border-width:0;--border-style:none;--border-color:transparent;--background:var(--ion-background-color, #fff);--box-shadow:none;--backdrop-opacity:0;left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;outline:none;color:var(--ion-text-color, #000);contain:strict}.modal-wrapper,ion-backdrop{pointer-events:auto}:host(.overlay-hidden){display:none}.modal-wrapper,.modal-shadow{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);overflow:var(--overflow);z-index:10}.modal-shadow{position:absolute;background:transparent}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--width:600px;--height:500px;--ion-safe-area-top:0px;--ion-safe-area-bottom:0px;--ion-safe-area-right:0px;--ion-safe-area-left:0px}}@media only screen and (min-width: 768px) and (min-height: 768px){:host{--width:600px;--height:600px}}.modal-handle{left:0px;right:0px;top:5px;border-radius:8px;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;position:absolute;width:36px;height:5px;-webkit-transform:translateZ(0);transform:translateZ(0);border:0;background:var(--ion-color-step-350, var(--ion-background-color-step-350, #c0c0be));cursor:pointer;z-index:11}.modal-handle::before{-webkit-padding-start:4px;padding-inline-start:4px;-webkit-padding-end:4px;padding-inline-end:4px;padding-top:4px;padding-bottom:4px;position:absolute;width:36px;height:5px;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);content:\"\"}:host(.modal-sheet){--height:calc(100% - (var(--ion-safe-area-top) + 10px))}:host(.modal-sheet) .modal-wrapper,:host(.modal-sheet) .modal-shadow{position:absolute;bottom:0}:host(.modal-sheet.modal-no-expand-scroll) ion-footer{position:absolute;bottom:0;width:var(--width)}:host{--backdrop-opacity:var(--ion-backdrop-opacity, 0.32)}@media only screen and (min-width: 768px) and (min-height: 600px){:host{--border-radius:2px;--box-shadow:0 28px 48px rgba(0, 0, 0, 0.4)}}.modal-wrapper{-webkit-transform:translate3d(0,  40px,  0);transform:translate3d(0,  40px,  0);opacity:0.01}";
 
 const Modal = class {
     constructor(hostRef) {
@@ -1499,8 +1499,6 @@ const Modal = class {
         this.inline = false;
         // Whether or not modal is being dismissed via gesture
         this.gestureAnimationDismissing = false;
-        // Elements that had pointer-events disabled for background interaction
-        this.pointerEventsDisabledElements = [];
         this.presented = false;
         /** @internal */
         this.hasController = false;
@@ -1922,13 +1920,7 @@ const Modal = class {
             };
             window.addEventListener(keyboard.KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
         }
-        /**
-         * Recalculate isSheetModal here 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) {
+        if (this.isSheetModal) {
             this.initSheetGesture();
         }
         else if (hasCardModal) {
@@ -2011,49 +2003,77 @@ const Modal = class {
         this.moveSheetToBreakpoint = moveSheetToBreakpoint;
         this.gesture.enable(true);
         /**
-         * When the backdrop doesn't block pointer events (showBackdrop=false,
-         * focusTrap=false, or backdropBreakpoint > 0), the modal's original parent
-         * may block pointer events after the modal is moved to ion-app. This only
-         * applies when the modal is in a child route (detected by the modal being
-         * inside a route wrapper like ion-page). Disable pointer-events on the child
-         * route's wrapper elements up to (and including) the first ion-router-outlet.
-         * We stop there because parent elements may contain sibling content that
-         * should remain interactive.
+         * 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 || this.backdropBreakpoint > 0;
-        if (backdropNotBlocking && this.cachedOriginalParent) {
-            // Find the first meaningful parent (skip template and other non-semantic wrappers).
-            // In Ionic React, modals are wrapped in a <template> element.
-            let semanticParent = this.cachedOriginalParent;
-            while (semanticParent && (semanticParent.tagName === 'TEMPLATE' || semanticParent.tagName === 'SLOT')) {
-                semanticParent = semanticParent.parentElement;
-            }
-            // Check if the modal is inside a route wrapper (ion-page or div.ion-page)
-            // If the modal is inside ion-content or other content containers, this fix doesn't apply
-            const parentIsRouteWrapper = semanticParent && (semanticParent.tagName === 'ION-PAGE' || semanticParent.classList.contains('ion-page'));
-            if (parentIsRouteWrapper && semanticParent) {
-                this.pointerEventsDisabledElements = [];
-                let current = semanticParent;
-                while (current && current.tagName !== 'ION-APP') {
-                    const tagName = current.tagName;
-                    // Check for ion-page tag or elements with ion-page class
-                    // (React renders IonPage as div.ion-page, not ion-page tag)
-                    const isIonPage = tagName === 'ION-PAGE' || current.classList.contains('ion-page');
-                    const isRouterOutlet = tagName === 'ION-ROUTER-OUTLET';
-                    const isNav = tagName === 'ION-NAV';
-                    if (isIonPage || isRouterOutlet || isNav) {
-                        current.style.setProperty('pointer-events', 'none');
-                        this.pointerEventsDisabledElements.push(current);
-                    }
-                    // Stop after processing the first ion-router-outlet - parent elements
-                    // may contain sibling content (like buttons) that should remain interactive
-                    if (isRouterOutlet) {
-                        break;
-                    }
-                    current = current.parentElement;
-                }
-            }
+        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;
+        const pageParent = this.getOriginalPageParent();
+        // Skip ion-app (controller modals) and pages with other content (inline modals)
+        if (!pageParent || pageParent.tagName === 'ION-APP') {
+            return;
+        }
+        const hasVisibleContent = Array.from(pageParent.children).some((child) => {
+            var _a;
+            if (child === this.el)
+                return false;
+            if (child instanceof HTMLElement && window.getComputedStyle(child).display === 'none')
+                return false;
+            if (child.tagName === 'TEMPLATE' || child.tagName === 'SLOT')
+                return false;
+            if (child.nodeType === Node.TEXT_NODE && !((_a = child.textContent) === null || _a === void 0 ? void 0 : _a.trim()))
+                return false;
+            return true;
+        });
+        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.getOriginalPageParent();
+        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');
         }
     }
     sheetOnDismiss() {
@@ -2144,13 +2164,7 @@ const Modal = class {
             }
             this.cleanupViewTransitionListener();
             this.cleanupParentRemovalObserver();
-            /**
-             * Clean up pointer-events changes made in initSheetGesture.
-             */
-            for (const element of this.pointerEventsDisabledElements) {
-                element.style.removeProperty('pointer-events');
-            }
-            this.pointerEventsDisabledElements = [];
+            this.cleanupChildRoutePassthrough();
         }
         this.currentBreakpoint = undefined;
         this.animation = undefined;
@@ -2388,20 +2402,20 @@ const Modal = class {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (index$3.h(index$3.Host, Object.assign({ key: 'd93e3750351017ef6f45a8a131a0722c31ef7c34', "no-router": true,
+        return (index$3.h(index$3.Host, Object.assign({ key: '3bdb8abb1c5bccc9d3b20ed419c85144ccf4d209', "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, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), index$3.h("ion-backdrop", { key: 'e76fd5404593e02c790e9cdf0ad7e03c7377fe93', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && index$3.h("div", { key: '1d57865a48d2ec5cf9c29388a05dd8c960aad079', class: "modal-shadow" }), index$3.h("div", Object.assign({ key: '44879f6ac725b09562a3f8a6d4be15634634a10d',
+            }, class: Object.assign({ [mode]: true, ['modal-default']: !isCardModal && !isSheetModal, [`modal-card`]: isCardModal, [`modal-sheet`]: isSheetModal, [`modal-no-expand-scroll`]: isSheetModal && !expandToScroll, 'overlay-hidden': true, [overlays.FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false }, theme.getClassMap(this.cssClass)), onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }), index$3.h("ion-backdrop", { key: '7d15fea01ca56670cfdfcfe1e3b86b6e6353ee65', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && index$3.h("div", { key: '875ed586a3c55dc19ba5ab97c37da8e09dc2afbe', class: "modal-shadow" }), index$3.h("div", Object.assign({ key: '4fc03a83d5b827c2aaaeaea386a966290f43eb99',
             /*
               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 && (index$3.h("button", { key: '1e4ee030c5993ea1e3a1fe7368a50eb349f4b5eb', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (index$3.h("button", { key: 'dbae13fa667f3c974e3c88da7067d6426a92e83a', 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) })), index$3.h("slot", { key: '4bfacca293cd3b63a617235d90545e385c094379', 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) })), index$3.h("slot", { key: '0284e13c0dd87ba76e6b9982f25d1b41a1766bfc', onSlotchange: this.onSlotChange }))));
     }
     get el() { return index$3.getElement(this); }
     static get watchers() { return {

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

@@ -4,7 +4,7 @@
 'use strict';
 
 var index = require('./index-D6Wc6v08.js');
-var overlays = require('./overlays-DxIZwUXI.js');
+var overlays = require('./overlays-D3xMmZCY.js');
 var frameworkDelegate = require('./framework-delegate-DMJRBuDi.js');
 var helpers = require('./helpers-DrTqNghc.js');
 var lockController = require('./lock-controller-aDB9wrEf.js');

package/dist/cjs/ion-select-modal.cjs.entry.js

@@ -5,7 +5,7 @@
 
 var index = require('./index-D6Wc6v08.js');
 var ionicGlobal = require('./ionic-global-HMVqOFGO.js');
-var overlays = require('./overlays-DxIZwUXI.js');
+var overlays = require('./overlays-D3xMmZCY.js');
 var theme = require('./theme-CeDs6Hcv.js');
 require('./index-DkNv4J_i.js');
 require('./helpers-DrTqNghc.js');

package/dist/cjs/ion-select_3.cjs.entry.js

@@ -8,7 +8,7 @@ var notchController = require('./notch-controller-Bzqhjm4f.js');
 var compareWithUtils = require('./compare-with-utils-DSicavqM.js');
 var validity = require('./validity-BpS37YFM.js');
 var helpers = require('./helpers-DrTqNghc.js');
-var overlays = require('./overlays-DxIZwUXI.js');
+var overlays = require('./overlays-D3xMmZCY.js');
 var dir = require('./dir-Cn0z1rJH.js');
 var theme = require('./theme-CeDs6Hcv.js');
 var watchOptions = require('./watch-options-CviOsrTS.js');

package/dist/cjs/ion-toast.cjs.entry.js

@@ -7,7 +7,7 @@ var index$1 = require('./index-D6Wc6v08.js');
 var config = require('./config-C5fsO43a.js');
 var helpers = require('./helpers-DrTqNghc.js');
 var lockController = require('./lock-controller-aDB9wrEf.js');
-var overlays = require('./overlays-DxIZwUXI.js');
+var overlays = require('./overlays-D3xMmZCY.js');
 var theme = require('./theme-CeDs6Hcv.js');
 var ionicGlobal = require('./ionic-global-HMVqOFGO.js');
 var animation = require('./animation-Bt3H9L1C.js');

package/dist/cjs/{overlays-DxIZwUXI.js → overlays-D3xMmZCY.js}

@@ -504,7 +504,7 @@ const setRootAriaHidden = (hidden = false) => {
     }
 };
 const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
-    var _a, _b;
+    var _a, _b, _c;
     if (overlay.presented) {
         return;
     }
@@ -538,9 +538,10 @@ 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;
+    // Only lock out root content when backdrop is always active. Developers relying on
+    // showBackdrop=false or backdropBreakpoint expect background interaction at some point.
+    const backdropAlwaysActive = overlayEl.showBackdrop !== false && !(((_a = overlayEl.backdropBreakpoint) !== null && _a !== void 0 ? _a : 0) > 0);
+    const shouldLockRoot = shouldTrapFocus && backdropAlwaysActive;
     overlay.presented = true;
     overlay.willPresent.emit();
     if (shouldLockRoot) {
@@ -552,7 +553,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
         }
         document.body.classList.add(gestureController.BACKDROP_NO_SCROLL);
     }
-    (_a = overlay.willPresentShorthand) === null || _a === void 0 ? void 0 : _a.emit();
+    (_b = overlay.willPresentShorthand) === null || _b === void 0 ? void 0 : _b.emit();
     const mode = ionicGlobal.getIonMode(overlay);
     // get the user's animation fn if one was provided
     const animationBuilder = overlay.enterAnimation
@@ -561,7 +562,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
     const completed = await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
     if (completed) {
         overlay.didPresent.emit();
-        (_b = overlay.didPresentShorthand) === null || _b === void 0 ? void 0 : _b.emit();
+        (_c = overlay.didPresentShorthand) === null || _c === void 0 ? void 0 : _c.emit();
     }
     /**
      * If the focused element is already
@@ -639,7 +640,7 @@ const restoreElementFocus = async (overlayEl) => {
     }
 };
 const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnimation, opts) => {
-    var _a, _b;
+    var _a, _b, _c;
     if (!overlay.presented) {
         return false;
     }
@@ -655,11 +656,14 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
      * is dismissed.
      */
     const overlaysLockingRoot = presentedOverlays.filter((o) => {
+        var _a;
         const el = o;
-        return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && el.showBackdrop !== false;
+        const backdropAlwaysActive = el.showBackdrop !== false && !(((_a = el.backdropBreakpoint) !== null && _a !== void 0 ? _a : 0) > 0);
+        return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && backdropAlwaysActive;
     });
     const overlayEl = overlay.el;
-    const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && overlayEl.showBackdrop !== false;
+    const backdropAlwaysActive = overlayEl.showBackdrop !== false && !(((_a = overlayEl.backdropBreakpoint) !== null && _a !== void 0 ? _a : 0) > 0);
+    const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && backdropAlwaysActive;
     /**
      * If this is the last visible overlay that is trapping focus
      * then we want to re-add the root to the accessibility tree.
@@ -674,7 +678,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
         // Overlay contents should not be clickable during dismiss
         overlay.el.style.setProperty('pointer-events', 'none');
         overlay.willDismiss.emit({ data, role });
-        (_a = overlay.willDismissShorthand) === null || _a === void 0 ? void 0 : _a.emit({ data, role });
+        (_b = overlay.willDismissShorthand) === null || _b === void 0 ? void 0 : _b.emit({ data, role });
         const mode = ionicGlobal.getIonMode(overlay);
         const animationBuilder = overlay.leaveAnimation
             ? overlay.leaveAnimation
@@ -684,7 +688,7 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
             await overlayAnimation(overlay, animationBuilder, overlay.el, opts);
         }
         overlay.didDismiss.emit({ data, role });
-        (_b = overlay.didDismissShorthand) === null || _b === void 0 ? void 0 : _b.emit({ data, role });
+        (_c = overlay.didDismissShorthand) === null || _c === void 0 ? void 0 : _c.emit({ data, role });
         // Get a reference to all animations currently assigned to this overlay
         // Then tear them down to return the overlay to its initial visual state
         const animations = activeAnimations.get(overlay) || [];

package/dist/collection/components/modal/modal.ios.css

@@ -104,20 +104,6 @@ ion-backdrop {
   pointer-events: auto;
 }
 
-/**
- * When focus trap is disabled on a visible modal, allow clicks to pass through
- * to content behind it. The .modal-wrapper retains pointer-events: auto so
- * modal content remains interactive. We only apply this when show-modal is
- * present to avoid affecting hidden modals that haven't presented.
- */
-:host(.ion-disable-focus-trap.show-modal) {
-  pointer-events: none;
-}
-
-:host(.ion-disable-focus-trap.show-modal) ion-backdrop {
-  pointer-events: none;
-}
-
 :host(.overlay-hidden) {
   display: none;
 }

package/dist/collection/components/modal/modal.js

@@ -42,8 +42,6 @@ export class Modal {
         this.inline = false;
         // Whether or not modal is being dismissed via gesture
         this.gestureAnimationDismissing = false;
-        // Elements that had pointer-events disabled for background interaction
-        this.pointerEventsDisabledElements = [];
         this.presented = false;
         /** @internal */
         this.hasController = false;
@@ -465,13 +463,7 @@ export class Modal {
             };
             window.addEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
         }
-        /**
-         * Recalculate isSheetModal here 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) {
+        if (this.isSheetModal) {
             this.initSheetGesture();
         }
         else if (hasCardModal) {
@@ -554,49 +546,77 @@ export class Modal {
         this.moveSheetToBreakpoint = moveSheetToBreakpoint;
         this.gesture.enable(true);
         /**
-         * When the backdrop doesn't block pointer events (showBackdrop=false,
-         * focusTrap=false, or backdropBreakpoint > 0), the modal's original parent
-         * may block pointer events after the modal is moved to ion-app. This only
-         * applies when the modal is in a child route (detected by the modal being
-         * inside a route wrapper like ion-page). Disable pointer-events on the child
-         * route's wrapper elements up to (and including) the first ion-router-outlet.
-         * We stop there because parent elements may contain sibling content that
-         * should remain interactive.
+         * 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 || this.backdropBreakpoint > 0;
-        if (backdropNotBlocking && this.cachedOriginalParent) {
-            // Find the first meaningful parent (skip template and other non-semantic wrappers).
-            // In Ionic React, modals are wrapped in a <template> element.
-            let semanticParent = this.cachedOriginalParent;
-            while (semanticParent && (semanticParent.tagName === 'TEMPLATE' || semanticParent.tagName === 'SLOT')) {
-                semanticParent = semanticParent.parentElement;
-            }
-            // Check if the modal is inside a route wrapper (ion-page or div.ion-page)
-            // If the modal is inside ion-content or other content containers, this fix doesn't apply
-            const parentIsRouteWrapper = semanticParent && (semanticParent.tagName === 'ION-PAGE' || semanticParent.classList.contains('ion-page'));
-            if (parentIsRouteWrapper && semanticParent) {
-                this.pointerEventsDisabledElements = [];
-                let current = semanticParent;
-                while (current && current.tagName !== 'ION-APP') {
-                    const tagName = current.tagName;
-                    // Check for ion-page tag or elements with ion-page class
-                    // (React renders IonPage as div.ion-page, not ion-page tag)
-                    const isIonPage = tagName === 'ION-PAGE' || current.classList.contains('ion-page');
-                    const isRouterOutlet = tagName === 'ION-ROUTER-OUTLET';
-                    const isNav = tagName === 'ION-NAV';
-                    if (isIonPage || isRouterOutlet || isNav) {
-                        current.style.setProperty('pointer-events', 'none');
-                        this.pointerEventsDisabledElements.push(current);
-                    }
-                    // Stop after processing the first ion-router-outlet - parent elements
-                    // may contain sibling content (like buttons) that should remain interactive
-                    if (isRouterOutlet) {
-                        break;
-                    }
-                    current = current.parentElement;
-                }
-            }
+        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;
+        const pageParent = this.getOriginalPageParent();
+        // Skip ion-app (controller modals) and pages with other content (inline modals)
+        if (!pageParent || pageParent.tagName === 'ION-APP') {
+            return;
+        }
+        const hasVisibleContent = Array.from(pageParent.children).some((child) => {
+            var _a;
+            if (child === this.el)
+                return false;
+            if (child instanceof HTMLElement && window.getComputedStyle(child).display === 'none')
+                return false;
+            if (child.tagName === 'TEMPLATE' || child.tagName === 'SLOT')
+                return false;
+            if (child.nodeType === Node.TEXT_NODE && !((_a = child.textContent) === null || _a === void 0 ? void 0 : _a.trim()))
+                return false;
+            return true;
+        });
+        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.getOriginalPageParent();
+        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');
         }
     }
     sheetOnDismiss() {
@@ -687,13 +707,7 @@ export class Modal {
             }
             this.cleanupViewTransitionListener();
             this.cleanupParentRemovalObserver();
-            /**
-             * Clean up pointer-events changes made in initSheetGesture.
-             */
-            for (const element of this.pointerEventsDisabledElements) {
-                element.style.removeProperty('pointer-events');
-            }
-            this.pointerEventsDisabledElements = [];
+            this.cleanupChildRoutePassthrough();
         }
         this.currentBreakpoint = undefined;
         this.animation = undefined;
@@ -939,20 +953,20 @@ export class Modal {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, Object.assign({ key: 'd93e3750351017ef6f45a8a131a0722c31ef7c34', "no-router": true,
+        return (h(Host, Object.assign({ key: '3bdb8abb1c5bccc9d3b20ed419c85144ccf4d209', "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 }), h("ion-backdrop", { key: 'e76fd5404593e02c790e9cdf0ad7e03c7377fe93', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '1d57865a48d2ec5cf9c29388a05dd8c960aad079', class: "modal-shadow" }), h("div", Object.assign({ key: '44879f6ac725b09562a3f8a6d4be15634634a10d',
+            }, 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 }), h("ion-backdrop", { key: '7d15fea01ca56670cfdfcfe1e3b86b6e6353ee65', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '875ed586a3c55dc19ba5ab97c37da8e09dc2afbe', class: "modal-shadow" }), h("div", Object.assign({ key: '4fc03a83d5b827c2aaaeaea386a966290f43eb99',
             /*
               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 && (h("button", { key: '1e4ee030c5993ea1e3a1fe7368a50eb349f4b5eb', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: 'dbae13fa667f3c974e3c88da7067d6426a92e83a', 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) })), h("slot", { key: '4bfacca293cd3b63a617235d90545e385c094379', 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) })), h("slot", { key: '0284e13c0dd87ba76e6b9982f25d1b41a1766bfc', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/modal.md.css

@@ -104,20 +104,6 @@ ion-backdrop {
   pointer-events: auto;
 }
 
-/**
- * When focus trap is disabled on a visible modal, allow clicks to pass through
- * to content behind it. The .modal-wrapper retains pointer-events: auto so
- * modal content remains interactive. We only apply this when show-modal is
- * present to avoid affecting hidden modals that haven't presented.
- */
-:host(.ion-disable-focus-trap.show-modal) {
-  pointer-events: none;
-}
-
-:host(.ion-disable-focus-trap.show-modal) ion-backdrop {
-  pointer-events: none;
-}
-
 :host(.overlay-hidden) {
   display: none;
 }