@ionic/core 8.8.18-nightly.20260811 → 8.8.18

package/dist/collection/components/content/content.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Build, Host, forceUpdate, h, readTask } from "@stencil/core";
+import { Build, Host, forceUpdate, h, readTask, } from "@stencil/core";
 import { componentOnReady, hasLazyBuild, inheritAriaAttributes } from "../../utils/helpers";
 import { isPlatform } from "../../utils/platform";
 import { isRTL } from "../../utils/rtl/index";
@@ -75,6 +75,9 @@ export class Content {
          */
         this.scrollEvents = false;
     }
+    fullscreenChanged() {
+        this.setupFullscreenResizeObserver();
+    }
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
@@ -114,6 +117,12 @@ export class Content {
                 closestTabs.addEventListener('ionTabBarLoaded', this.tabsLoadCallback);
             }
         }
+        // Re-observe on reattach, since componentDidLoad only fires once.
+        this.setupFullscreenResizeObserver();
+    }
+    componentDidLoad() {
+        // The custom elements build assigns fullscreen after connectedCallback.
+        this.setupFullscreenResizeObserver();
     }
     disconnectedCallback() {
         this.onScrollEnd();
@@ -135,6 +144,42 @@ export class Content {
             clearTimeout(this.resizeTimeout);
             this.resizeTimeout = null;
         }
+        this.destroyFullscreenResizeObserver();
+    }
+    /**
+     * Header and footer sizes can change after load without a window resize
+     * firing, so the `resize` listener alone misses those changes.
+     *
+     * Popover content is excluded because `contain: none` lets its offsets drive
+     * the host's own height, which would feed back into the observer.
+     */
+    setupFullscreenResizeObserver() {
+        if (!Build.isBrowser || typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        if (!this.fullscreen || hostContext('ion-popover', this.el)) {
+            this.destroyFullscreenResizeObserver();
+            return;
+        }
+        if (this.fullscreenResizeObserver !== undefined) {
+            return;
+        }
+        this.fullscreenResizeObserver = new ResizeObserver(() => {
+            // A hidden page reports a 0x0 box, which would zero the offsets. Same
+            // reasoning as the guard in onResize, minus its debounce so the
+            // correction lands in the next frame instead of 100ms later.
+            if (this.el.offsetParent === null) {
+                return;
+            }
+            this.resize();
+        });
+        this.fullscreenResizeObserver.observe(this.el);
+    }
+    destroyFullscreenResizeObserver() {
+        if (this.fullscreenResizeObserver !== undefined) {
+            this.fullscreenResizeObserver.disconnect();
+            this.fullscreenResizeObserver = undefined;
+        }
     }
     /**
      * Rotating certain devices can update
@@ -373,7 +418,7 @@ export class Content {
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
         this.resize();
-        return (h(Host, Object.assign({ key: '8c1bc4a4df8698d3884741eb38512dc059210c50', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+        return (h(Host, Object.assign({ key: '9551c759df407b10d809171641fc6e8f14d92219', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
                 [mode]: true,
                 'content-fullscreen': this.fullscreen,
                 'content-sizing': hostContext('ion-popover', this.el),
@@ -382,12 +427,12 @@ export class Content {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, inheritedAttributes), h("div", { key: '5e7412549b51ef7543d9378ecab9aac6bc461588', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '33f6fbf7e1e027c7cbd2dda95b487f18dc648cef', class: {
+            } }, inheritedAttributes), h("div", { key: 'c6de8fd226f0d10a534eb107fe032ac155fbe68e', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '082fc2936061360060b48221ecb1c864a3711fa0', 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" }, h("slot", { key: '00c8fe7b9e73533c702273c9457d274195d54e98' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '0d2286206facb22696a9ca7e74a3f6b7d2397aab' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
     }
     static get is() { return "ion-content"; }
     static get encapsulation() { return "shadow"; }
@@ -813,6 +858,12 @@ export class Content {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "fullscreen",
+                "methodName": "fullscreenChanged"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "resize",

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

@@ -21,7 +21,7 @@ import { mdEnterAnimation } from "./animations/md.enter";
 import { mdLeaveAnimation } from "./animations/md.leave";
 import { createSheetGesture } from "./gestures/sheet";
 import { createSwipeToCloseGesture, SwipeToCloseDefaults } from "./gestures/swipe-to-close";
-import { getInitialSafeAreaConfig, getPositionBasedSafeAreaConfig, applySafeAreaOverrides, clearSafeAreaOverrides, getRootSafeAreaTop, hasCustomModalDimensions, } from "./safe-area-utils";
+import { getInitialSafeAreaConfig, getPositionBasedSafeAreaConfig, applySafeAreaOverrides, clearSafeAreaOverrides, getRootSafeAreaTop, onRootSafeAreaTopChange, hasCustomModalDimensions, } from "./safe-area-utils";
 import { setCardStatusBarDark, setCardStatusBarDefault } from "./utils";
 // TODO(FW-2832): types
 /**
@@ -1055,16 +1055,18 @@ export class Modal {
         // Set the internal offset property with the resolved root safe-area-top value
         if (context.isSheetModal) {
             this.updateSheetOffsetTop();
+            this.unsubscribeRootSafeAreaTop = onRootSafeAreaTopChange((safeAreaTop) => this.updateSheetOffsetTop(safeAreaTop));
         }
     }
     /**
-     * Resolves the current root --ion-safe-area-top value and sets the
-     * internal --ion-modal-offset-top property on the host element.
-     * Called on present and on resize (e.g., device rotation changes safe-area).
+     * Sets the internal --ion-modal-offset-top property on the host element,
+     * resolving the current root --ion-safe-area-top when no value is given.
+     * Called on present, on resize (e.g., device rotation changes safe-area),
+     * and whenever the root safe-area value itself changes.
      */
-    updateSheetOffsetTop() {
-        const safeAreaTop = getRootSafeAreaTop();
-        this.el.style.setProperty('--ion-modal-offset-top', `${safeAreaTop}px`);
+    updateSheetOffsetTop(safeAreaTop) {
+        const value = safeAreaTop !== null && safeAreaTop !== void 0 ? safeAreaTop : getRootSafeAreaTop();
+        this.el.style.setProperty('--ion-modal-offset-top', `${value}px`);
     }
     /**
      * Updates safe-area overrides during dynamic state changes.
@@ -1163,7 +1165,10 @@ export class Modal {
      * Clears all safe-area overrides and padding.
      */
     cleanupSafeAreaOverrides() {
+        var _a;
         clearSafeAreaOverrides(this.el);
+        (_a = this.unsubscribeRootSafeAreaTop) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.unsubscribeRootSafeAreaTop = undefined;
         // Remove internal sheet offset property
         this.el.style.removeProperty('--ion-modal-offset-top');
         const { contentEl } = this.findContentAndFooter();
@@ -1176,11 +1181,11 @@ export class Modal {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, Object.assign({ key: '09f09a10d858e976bc2a989f30db925348a7784c', "no-router": true,
+        return (h(Host, Object.assign({ key: 'c4b2713ebc788ac8672e18fdd5069e4253c4da34', "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: 'b197319bdddf0b979ccacdb63dbceccfd9bf2560', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'c848ff6a10e9092cdb10a6f21c9a299a72b17ca9', class: "modal-shadow" }), h("div", Object.assign({ key: 'e7c8e67807d49098aba63dce69a1bbf9647bbab6',
+            }, 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: '2cc0afff8a815954492138afb0fca042243afddd', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '9844700b9436f9bfa1a69ba436e9ca46d70cf316', class: "modal-shadow" }), h("div", Object.assign({ key: 'ab1cd56ca956c773c9242fb42ff320bac7627b4b',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
@@ -1193,9 +1198,9 @@ export class Modal {
               without the tabindex focus() would be a no-op and screen readers
               may not properly announce the dialog and its content when it opens.
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '0851cc75ee7367e13d1993a9c4d8b1b4de1d3bf0', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: 'c7706794e04a962178640e9a9a11c56288c45e08', 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: 'b4d9bc13dc0867e858db8e1c7277bd09b7fce44c', 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: 'c44fd9810cdd3286f096af98e5a4072f8f44c193', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/safe-area-utils.js

@@ -69,6 +69,41 @@ export const getRootSafeAreaTop = () => {
     }
     return value;
 };
+/**
+ * Calls back when the resolved root `--ion-safe-area-top` changes, which no
+ * event and no window resize covers. The probe's height tracks the variable, so
+ * a change to it becomes a size change the observer can see.
+ */
+export const onRootSafeAreaTopChange = (callback) => {
+    const doc = win === null || win === void 0 ? void 0 : win.document;
+    if (!(doc === null || doc === void 0 ? void 0 : doc.body) || typeof ResizeObserver === 'undefined') {
+        return () => undefined;
+    }
+    const probe = doc.createElement('div');
+    probe.style.cssText =
+        'position:fixed;visibility:hidden;pointer-events:none;top:0;left:0;width:0;' +
+            'height:var(--ion-safe-area-top,0px);';
+    doc.body.appendChild(probe);
+    /**
+     * Seeded with the value the caller has already applied, so a change that
+     * lands before the observer's first delivery still gets reported. Comparing
+     * against an unset value instead would consume that first delivery and treat
+     * the new inset as the baseline.
+     */
+    let lastHeight = getRootSafeAreaTop();
+    const observer = new ResizeObserver((entries) => {
+        const { height } = entries[0].contentRect;
+        if (height !== lastHeight) {
+            lastHeight = height;
+            callback(height);
+        }
+    });
+    observer.observe(probe);
+    return () => {
+        observer.disconnect();
+        probe.remove();
+    };
+};
 /**
  * True when the modal host declares BOTH a non-fullscreen `--width` AND a
  * non-fullscreen `--height` (i.e. a centered-dialog-like modal that doesn't

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-08-11T06:21:34",
+  "timestamp": "2026-08-12T21:11:00",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",

package/dist/esm/ion-app_8.entry.js

@@ -6,7 +6,7 @@ import { shouldUseCloseWatcher } from './hardware-back-button-B93Gru0Y.js';
 import { a as isPlatform, b as getIonMode } from './ionic-global-Cp_eT4sZ.js';
 import { i as inheritAriaAttributes, h as hasLazyBuild, c as componentOnReady, e as clamp, s as shallowEqualStringMap } from './helpers-HEqiOzXb.js';
 import { i as isRTL } from './dir-C53feagD.js';
-import { c as createColorClasses, h as hostContext } from './theme-DiVJyqlX.js';
+import { h as hostContext, c as createColorClasses } from './theme-DiVJyqlX.js';
 import { b as findIonContent, p as printIonContentErrorMsg, g as getScrollElement } from './index-Dw-wN0Ja.js';
 import { c as createKeyboardController } from './keyboard-controller-BaaVITYt.js';
 import { g as getTimeGivenProgression } from './cubic-bezier-hHmYLOfE.js';
@@ -224,6 +224,9 @@ const Content = class {
          */
         this.scrollEvents = false;
     }
+    fullscreenChanged() {
+        this.setupFullscreenResizeObserver();
+    }
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
@@ -263,6 +266,12 @@ const Content = class {
                 closestTabs.addEventListener('ionTabBarLoaded', this.tabsLoadCallback);
             }
         }
+        // Re-observe on reattach, since componentDidLoad only fires once.
+        this.setupFullscreenResizeObserver();
+    }
+    componentDidLoad() {
+        // The custom elements build assigns fullscreen after connectedCallback.
+        this.setupFullscreenResizeObserver();
     }
     disconnectedCallback() {
         this.onScrollEnd();
@@ -284,6 +293,42 @@ const Content = class {
             clearTimeout(this.resizeTimeout);
             this.resizeTimeout = null;
         }
+        this.destroyFullscreenResizeObserver();
+    }
+    /**
+     * Header and footer sizes can change after load without a window resize
+     * firing, so the `resize` listener alone misses those changes.
+     *
+     * Popover content is excluded because `contain: none` lets its offsets drive
+     * the host's own height, which would feed back into the observer.
+     */
+    setupFullscreenResizeObserver() {
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        if (!this.fullscreen || hostContext('ion-popover', this.el)) {
+            this.destroyFullscreenResizeObserver();
+            return;
+        }
+        if (this.fullscreenResizeObserver !== undefined) {
+            return;
+        }
+        this.fullscreenResizeObserver = new ResizeObserver(() => {
+            // A hidden page reports a 0x0 box, which would zero the offsets. Same
+            // reasoning as the guard in onResize, minus its debounce so the
+            // correction lands in the next frame instead of 100ms later.
+            if (this.el.offsetParent === null) {
+                return;
+            }
+            this.resize();
+        });
+        this.fullscreenResizeObserver.observe(this.el);
+    }
+    destroyFullscreenResizeObserver() {
+        if (this.fullscreenResizeObserver !== undefined) {
+            this.fullscreenResizeObserver.disconnect();
+            this.fullscreenResizeObserver = undefined;
+        }
     }
     /**
      * Rotating certain devices can update
@@ -522,7 +567,7 @@ const Content = class {
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
         this.resize();
-        return (h(Host, Object.assign({ key: '8c1bc4a4df8698d3884741eb38512dc059210c50', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+        return (h(Host, Object.assign({ key: '9551c759df407b10d809171641fc6e8f14d92219', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
                 [mode]: true,
                 'content-fullscreen': this.fullscreen,
                 'content-sizing': hostContext('ion-popover', this.el),
@@ -531,14 +576,19 @@ const Content = class {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            } }, inheritedAttributes), h("div", { key: '5e7412549b51ef7543d9378ecab9aac6bc461588', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '33f6fbf7e1e027c7cbd2dda95b487f18dc648cef', class: {
+            } }, inheritedAttributes), h("div", { key: 'c6de8fd226f0d10a534eb107fe032ac155fbe68e', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '082fc2936061360060b48221ecb1c864a3711fa0', 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" }, h("slot", { key: '00c8fe7b9e73533c702273c9457d274195d54e98' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
+            }, ref: (scrollEl) => (this.scrollEl = scrollEl), onScroll: this.scrollEvents ? (ev) => this.onScroll(ev) : undefined, part: "scroll" }, h("slot", { key: '0d2286206facb22696a9ca7e74a3f6b7d2397aab' })), transitionShadow ? (h("div", { class: "transition-effect" }, h("div", { class: "transition-cover" }), h("div", { class: "transition-shadow" }))) : null, fixedSlotPlacement === 'after' ? h("slot", { name: "fixed" }) : null));
     }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "fullscreen": [{
+                "fullscreenChanged": 0
+            }]
+    }; }
 };
 const getParentElement = (el) => {
     var _a;

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

@@ -1695,6 +1695,41 @@ const getRootSafeAreaTop = () => {
     }
     return value;
 };
+/**
+ * Calls back when the resolved root `--ion-safe-area-top` changes, which no
+ * event and no window resize covers. The probe's height tracks the variable, so
+ * a change to it becomes a size change the observer can see.
+ */
+const onRootSafeAreaTopChange = (callback) => {
+    const doc = win === null || win === void 0 ? void 0 : win.document;
+    if (!(doc === null || doc === void 0 ? void 0 : doc.body) || typeof ResizeObserver === 'undefined') {
+        return () => undefined;
+    }
+    const probe = doc.createElement('div');
+    probe.style.cssText =
+        'position:fixed;visibility:hidden;pointer-events:none;top:0;left:0;width:0;' +
+            'height:var(--ion-safe-area-top,0px);';
+    doc.body.appendChild(probe);
+    /**
+     * Seeded with the value the caller has already applied, so a change that
+     * lands before the observer's first delivery still gets reported. Comparing
+     * against an unset value instead would consume that first delivery and treat
+     * the new inset as the baseline.
+     */
+    let lastHeight = getRootSafeAreaTop();
+    const observer = new ResizeObserver((entries) => {
+        const { height } = entries[0].contentRect;
+        if (height !== lastHeight) {
+            lastHeight = height;
+            callback(height);
+        }
+    });
+    observer.observe(probe);
+    return () => {
+        observer.disconnect();
+        probe.remove();
+    };
+};
 /**
  * True when the modal host declares BOTH a non-fullscreen `--width` AND a
  * non-fullscreen `--height` (i.e. a centered-dialog-like modal that doesn't
@@ -2847,16 +2882,18 @@ const Modal = class {
         // Set the internal offset property with the resolved root safe-area-top value
         if (context.isSheetModal) {
             this.updateSheetOffsetTop();
+            this.unsubscribeRootSafeAreaTop = onRootSafeAreaTopChange((safeAreaTop) => this.updateSheetOffsetTop(safeAreaTop));
         }
     }
     /**
-     * Resolves the current root --ion-safe-area-top value and sets the
-     * internal --ion-modal-offset-top property on the host element.
-     * Called on present and on resize (e.g., device rotation changes safe-area).
+     * Sets the internal --ion-modal-offset-top property on the host element,
+     * resolving the current root --ion-safe-area-top when no value is given.
+     * Called on present, on resize (e.g., device rotation changes safe-area),
+     * and whenever the root safe-area value itself changes.
      */
-    updateSheetOffsetTop() {
-        const safeAreaTop = getRootSafeAreaTop();
-        this.el.style.setProperty('--ion-modal-offset-top', `${safeAreaTop}px`);
+    updateSheetOffsetTop(safeAreaTop) {
+        const value = safeAreaTop !== null && safeAreaTop !== void 0 ? safeAreaTop : getRootSafeAreaTop();
+        this.el.style.setProperty('--ion-modal-offset-top', `${value}px`);
     }
     /**
      * Updates safe-area overrides during dynamic state changes.
@@ -2955,7 +2992,10 @@ const Modal = class {
      * Clears all safe-area overrides and padding.
      */
     cleanupSafeAreaOverrides() {
+        var _a;
         clearSafeAreaOverrides(this.el);
+        (_a = this.unsubscribeRootSafeAreaTop) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.unsubscribeRootSafeAreaTop = undefined;
         // Remove internal sheet offset property
         this.el.style.removeProperty('--ion-modal-offset-top');
         const { contentEl } = this.findContentAndFooter();
@@ -2968,11 +3008,11 @@ const Modal = class {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, Object.assign({ key: '09f09a10d858e976bc2a989f30db925348a7784c', "no-router": true,
+        return (h(Host, Object.assign({ key: 'c4b2713ebc788ac8672e18fdd5069e4253c4da34', "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: 'b197319bdddf0b979ccacdb63dbceccfd9bf2560', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'c848ff6a10e9092cdb10a6f21c9a299a72b17ca9', class: "modal-shadow" }), h("div", Object.assign({ key: 'e7c8e67807d49098aba63dce69a1bbf9647bbab6',
+            }, 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: '2cc0afff8a815954492138afb0fca042243afddd', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '9844700b9436f9bfa1a69ba436e9ca46d70cf316', class: "modal-shadow" }), h("div", Object.assign({ key: 'ab1cd56ca956c773c9242fb42ff320bac7627b4b',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
@@ -2985,9 +3025,9 @@ const Modal = class {
               without the tabindex focus() would be a no-op and screen readers
               may not properly announce the dialog and its content when it opens.
             */
-            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: '0851cc75ee7367e13d1993a9c4d8b1b4de1d3bf0', class: "modal-handle",
+            role: "dialog" }, inheritedAttributes, { "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }), showHandle && (h("button", { key: 'c7706794e04a962178640e9a9a11c56288c45e08', 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: 'b4d9bc13dc0867e858db8e1c7277bd09b7fce44c', 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: 'c44fd9810cdd3286f096af98e5a4072f8f44c193', onSlotchange: this.onSlotChange }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {