@ionic/core 9.0.1-dev.11787248963.10a00c73 → 9.0.1-dev.11787589191.1e183b55

package/hydrate/index.js

@@ -7961,6 +7961,15 @@ const activeAnimations = new WeakMap();
 const isBackdropAlwaysBlocking = (el) => {
     return el.showBackdrop !== false && !((el.backdropBreakpoint ?? 0) > 0);
 };
+/**
+ * Whether the overlay takes the app root out of the accessibility tree and
+ * blocks body scroll while presented. Toasts never do, modal and popover can
+ * opt out with `focusTrap={false}`, and a backdrop that does not block
+ * (`showBackdrop={false}`, or a `backdropBreakpoint` above 0) is excluded.
+ */
+const locksAppRoot = (el) => {
+    return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && isBackdropAlwaysBlocking(el);
+};
 const createController = (tagName) => {
     return {
         create(options) {
@@ -8329,6 +8338,13 @@ const getPresentedOverlay = (doc, overlayTag, id) => {
     // Otherwise, return the last overlay with the given id
     return (id === undefined ? overlays : overlays.filter((o) => o.id === id)).slice(-1)[0];
 };
+/**
+ * The element an app nests its views under. Overlays hide this rather than the
+ * whole root, so the overlay itself (a sibling) stays reachable.
+ */
+const getViewContainer = () => {
+    return getAppRoot(document).querySelector('ion-router-outlet, #ion-view-container-root');
+};
 /**
  * When an overlay is presented, the main
  * focus is the overlay not the page content.
@@ -8352,8 +8368,7 @@ const getPresentedOverlay = (doc, overlayTag, id) => {
  * for main content.
  */
 const setRootAriaHidden = (hidden = false) => {
-    const root = getAppRoot(document);
-    const viewContainer = root.querySelector('ion-router-outlet, #ion-view-container-root');
+    const viewContainer = getViewContainer();
     if (!viewContainer) {
         return;
     }
@@ -8378,15 +8393,40 @@ const cleanupRootFocusTrapAccessibility = () => {
         return;
     }
     const remainingOverlays = getPresentedOverlays(document);
-    const hasRemainingLocking = remainingOverlays.some((o) => {
-        const el = o;
-        return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && isBackdropAlwaysBlocking(el);
-    });
+    const hasRemainingLocking = remainingOverlays.some((o) => locksAppRoot(o));
     if (!hasRemainingLocking) {
         setRootAriaHidden(false);
         document.body.classList.remove(BACKDROP_NO_SCROLL);
     }
 };
+/**
+ * Shared by `present()` and the restore below, which have to stay in lockstep.
+ */
+const applyRootLock = (el) => {
+    // Hiding the container the overlay now sits in would hide the overlay too.
+    if (!getViewContainer()?.contains(el)) {
+        setRootAriaHidden(true);
+    }
+    document.body.classList.add(BACKDROP_NO_SCROLL);
+};
+/**
+ * Re-applies the root lock that `cleanupRootFocusTrapAccessibility()` released.
+ * Call from `connectedCallback` when the overlay is still presented.
+ *
+ * A synchronous move keeps the overlay connected, so the lock survives. A
+ * detach with a re-insert in a later task releases it, which is the shape a
+ * framework produces when it takes a subtree out and puts it back.
+ */
+const restoreRootFocusTrapAccessibility = (overlayEl) => {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    const el = overlayEl;
+    if (!locksAppRoot(el)) {
+        return;
+    }
+    applyRootLock(el);
+};
 const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts) => {
     if (overlay.presented) {
         return;
@@ -8403,15 +8443,7 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
         restoreElementFocus(overlay.el);
     }
     /**
-     * Due to accessibility guidelines, toasts do not have
-     * focus traps.
-     *
-     * All other overlays should have focus traps to prevent
-     * the keyboard focus from leaving the overlay unless
-     * developers explicitly opt out (for example, sheet
-     * modals that should permit background interaction).
-     *
-     * Note: Some apps move inline overlays to a specific container
+     * Some apps move inline overlays to a specific container
      * during the willPresent lifecycle (e.g., React portals via
      * onWillPresent). Defer applying aria-hidden/inert to the app
      * root until after willPresent so we can detect where the
@@ -8420,18 +8452,11 @@ const present = async (overlay, name, iosEnterAnimation, mdEnterAnimation, opts)
      * to avoid disabling the overlay.
      */
     const overlayEl = overlay.el;
-    const shouldTrapFocus = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false;
-    const shouldLockRoot = shouldTrapFocus && isBackdropAlwaysBlocking(overlayEl);
+    const shouldLockRoot = locksAppRoot(overlayEl);
     overlay.presented = true;
     overlay.willPresent.emit();
     if (shouldLockRoot) {
-        const root = getAppRoot(document);
-        const viewContainer = root.querySelector('ion-router-outlet, #ion-view-container-root');
-        const overlayInsideViewContainer = viewContainer ? viewContainer.contains(overlayEl) : false;
-        if (!overlayInsideViewContainer) {
-            setRootAriaHidden(true);
-        }
-        document.body.classList.add(BACKDROP_NO_SCROLL);
+        applyRootLock(overlayEl);
     }
     overlay.willPresentShorthand?.emit();
     const mode = getIonMode$1(overlay);
@@ -8557,12 +8582,9 @@ const dismiss = async (overlay, data, role, name, iosLeaveAnimation, mdLeaveAnim
      * from the root element when the last focus-trapping overlay
      * is dismissed.
      */
-    const overlaysLockingRoot = presentedOverlays.filter((o) => {
-        const el = o;
-        return el.tagName !== 'ION-TOAST' && el.focusTrap !== false && isBackdropAlwaysBlocking(el);
-    });
+    const overlaysLockingRoot = presentedOverlays.filter((o) => locksAppRoot(o));
     const overlayEl = overlay.el;
-    const locksRoot = overlayEl.tagName !== 'ION-TOAST' && overlayEl.focusTrap !== false && isBackdropAlwaysBlocking(overlayEl);
+    const locksRoot = locksAppRoot(overlayEl);
     /**
      * If this is the last visible overlay that is trapping focus
      * then we want to re-add the root to the accessibility tree.
@@ -10558,6 +10580,13 @@ class ActionSheet {
     connectedCallback() {
         prepareOverlay(this.el);
         this.triggerChanged();
+        // `componentDidLoad` only fires once per instance, so a reconnect has to
+        // rebuild the gesture its disconnect destroyed.
+        this.setupButtonActiveGesture();
+        // Re-apply the root lock if moved without dismiss() being called
+        if (this.presented) {
+            restoreRootFocusTrapAccessibility(this.el);
+        }
     }
     disconnectedCallback() {
         if (this.gesture) {
@@ -10577,24 +10606,32 @@ class ActionSheet {
         // Initialize activeRadioId for radio buttons
         this.buttonsChanged();
     }
-    componentDidLoad() {
-        /**
-         * Only create gesture if:
-         * 1. A gesture does not already exist
-         * 2. App is running in iOS mode
-         * 3. A wrapper ref exists
-         * 4. A group ref exists
-         */
+    /**
+     * Only create gesture if:
+     * 1. A gesture does not already exist
+     * 2. App is running in iOS mode
+     * 3. A wrapper ref exists
+     * 4. A group ref exists
+     * 5. The host is still connected, since a reconnect can schedule this and
+     *    disconnect again before the task runs
+     */
+    setupButtonActiveGesture() {
         const { groupEl, wrapperEl } = this;
-        if (!this.gesture && getIonMode$1(this) === 'ios' && wrapperEl && groupEl) {
-            readTask(() => {
-                const isScrollable = groupEl.scrollHeight > groupEl.clientHeight;
-                if (!isScrollable) {
-                    this.gesture = createButtonActiveGesture(wrapperEl, (refEl) => refEl.classList.contains('action-sheet-button'));
-                    this.gesture.enable(true);
-                }
-            });
+        if (getIonMode$1(this) !== 'ios' || !wrapperEl || !groupEl) {
+            return;
         }
+        readTask(() => {
+            // Two calls before the first flushes would otherwise both create a
+            // gesture, orphaning the first with its listeners still bound.
+            if (this.gesture || !this.el.isConnected || groupEl.scrollHeight > groupEl.clientHeight) {
+                return;
+            }
+            this.gesture = createButtonActiveGesture(wrapperEl, (refEl) => refEl.classList.contains('action-sheet-button'));
+            this.gesture.enable(true);
+        });
+    }
+    componentDidLoad() {
+        this.setupButtonActiveGesture();
         /**
          * If action sheet was rendered with isOpen="true"
          * then we should open action sheet immediately.
@@ -10687,17 +10724,17 @@ class ActionSheet {
         const cancelButton = allButtons.find((b) => b.role === 'cancel');
         const buttons = allButtons.filter((b) => b.role !== 'cancel');
         const headerID = `action-sheet-${overlayIndex}-header`;
-        return (hAsync(Host, { key: '7685831da9a78b73473246a2cea95cefa79a53c3', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1", ...htmlAttributes, style: {
+        return (hAsync(Host, { key: '326d4af08e832e10e1882fbbf67dba3221095865', role: "dialog", "aria-modal": "true", "aria-labelledby": header !== undefined ? headerID : null, tabindex: "-1", ...htmlAttributes, style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: {
                 [mode]: true,
                 ...getClassMap(this.cssClass),
                 'overlay-hidden': true,
                 'action-sheet-translucent': this.translucent,
-            }, onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, hAsync("ion-backdrop", { key: 'c70f00e401cac99b89412d1adb867f35bc855d57', tappable: this.backdropDismiss }), hAsync("div", { key: '3332893ce3098f1435875480b1269b2821d41660', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'eb406b0a9e303d6f94c5c7aa99c6f4c089bfbd41', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: '92ec855379f10e1e0bfce6ff68b45d3cda0c137c', class: "action-sheet-container" }, hAsync("div", { key: 'bc88a396d75396f574961471bf7e6c4edb513353', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (hAsync("div", { key: '33329e0193818888bdcaa443ff5ea301802e0787', id: headerID, class: {
+            }, onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, hAsync("ion-backdrop", { key: '8cb6a0d763a60f61f563a1b7d572ad5e9afd6e40', tappable: this.backdropDismiss }), hAsync("div", { key: 'f8b8da0f52ae674a5e313632ee3d049bed3f813f', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '53cf0d1b01a2cda23c27fc8b96edaccf892e61b3', class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, hAsync("div", { key: '6df261ff946c3b4496535df04cc70e2cfa3cc2da', class: "action-sheet-container" }, hAsync("div", { key: '6f6f2846d19baa738651b990d8613aa0ecac9479', class: "action-sheet-group", ref: (el) => (this.groupEl = el), role: hasRadioButtons ? 'radiogroup' : undefined }, header !== undefined && (hAsync("div", { key: '3f36df8eaaedb5e61a41bbf44134f25f263d1e7e', id: headerID, class: {
                 'action-sheet-title': true,
                 'action-sheet-has-sub-title': this.subHeader !== undefined,
-            } }, header, this.subHeader && hAsync("div", { key: '92ac5a9217a12b7417f7aca9c4fdb7bf6b051364', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (hAsync("div", { key: '020463b830fa48fc3ae647ea64f2aaa4d0969305', class: "action-sheet-group action-sheet-group-cancel" }, hAsync("button", { key: 'cefa9c70a2233f6652a81b1a2eae6e717712144d', ...cancelButton.htmlAttributes, type: "button", class: buttonClass$2(cancelButton), onClick: () => this.buttonClick(cancelButton) }, hAsync("span", { key: '56d7e2f8bfb3644e4476895164d334445fda9b2f', class: "action-sheet-button-inner" }, cancelButton.icon && (hAsync("ion-icon", { key: '6a4a49254ec5cd96f4e0dce9447f90d8cac81913', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && hAsync("ion-ripple-effect", { key: '7d3c6e8d70b0922ea0f75520856285ce1005c891' })))))), hAsync("div", { key: '958fc43e603c6a7f5d1e649d3326fce0f163b5d0', tabindex: "0", "aria-hidden": "true" })));
+            } }, header, this.subHeader && hAsync("div", { key: 'a6b2bf51123eaae4ed873e65c00c426e9c511ac0', class: "action-sheet-sub-title" }, this.subHeader))), this.renderActionSheetButtons(buttons)), cancelButton && (hAsync("div", { key: '4dd96553327003b899bc03a815a06a7cce35db29', class: "action-sheet-group action-sheet-group-cancel" }, hAsync("button", { key: 'a1928040a3d20f2e50230b7d6003467d2916f5b4', ...cancelButton.htmlAttributes, type: "button", class: buttonClass$2(cancelButton), onClick: () => this.buttonClick(cancelButton) }, hAsync("span", { key: '2fa9d0e4072f1fd55f08048966495a627a14ef8f', class: "action-sheet-button-inner" }, cancelButton.icon && (hAsync("ion-icon", { key: 'c2eec9967cb9f0b75d4428bb548674199089203c', icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && hAsync("ion-ripple-effect", { key: '09e71f28d77ae16481b832863f49b3f7d7dd76f9' })))))), hAsync("div", { key: '386fbe5ca2a88e9b52bd3b9d8f3daddbc630e6f6', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -11079,10 +11116,15 @@ class Alert {
         this.triggerChanged();
         /**
          * If the alert was previously connected and is being reattached, the
-         * ResizeObserver was disconnected. componentDidLoad only fires once per
-         * instance, so re-establish the observer here on reconnect.
+         * `ResizeObserver` and the button gesture were torn down. `componentDidLoad`
+         * only fires once per instance, so re-establish both here on reconnect.
          */
         this.setupButtonGroupResizeObserver();
+        this.setupButtonActiveGesture();
+        // Re-apply the root lock if moved without dismiss() being called
+        if (this.presented) {
+            restoreRootFocusTrapAccessibility(this.el);
+        }
     }
     componentWillLoad() {
         if (!this.htmlAttributes?.id) {
@@ -11104,17 +11146,20 @@ class Alert {
         this.buttonGroupResizeObserver?.disconnect();
         this.buttonGroupResizeObserver = undefined;
     }
-    componentDidLoad() {
-        /**
-         * Only create gesture if:
-         * 1. A gesture does not already exist
-         * 2. App is running in iOS mode
-         * 3. A wrapper ref exists
-         */
+    /**
+     * Only create gesture if:
+     * 1. A gesture does not already exist
+     * 2. App is running in iOS mode
+     * 3. A wrapper ref exists
+     */
+    setupButtonActiveGesture() {
         if (!this.gesture && getIonMode$1(this) === 'ios' && this.wrapperEl) {
             this.gesture = createButtonActiveGesture(this.wrapperEl, (refEl) => refEl.classList.contains('alert-button'));
             this.gesture.enable(true);
         }
+    }
+    componentDidLoad() {
+        this.setupButtonActiveGesture();
         this.setupButtonGroupResizeObserver();
         /**
          * If alert was rendered with isOpen="true"
@@ -11435,14 +11480,14 @@ class Alert {
          * If neither are defined, do not set aria-labelledby.
          */
         const ariaLabelledBy = header && subHeader ? `${hdrId} ${subHdrId}` : header ? hdrId : subHeader ? subHdrId : null;
-        return (hAsync(Host, { key: '022f3463b8e6c52064b90ec304c524847c3d5ad3', tabindex: "-1", style: {
+        return (hAsync(Host, { key: '083b5250dc4c76e85240e0225abcb7ca2b66de2f', tabindex: "-1", style: {
                 zIndex: `${20000 + overlayIndex}`,
             }, class: {
                 ...getClassMap(this.cssClass),
                 [mode]: true,
                 'overlay-hidden': true,
                 'alert-translucent': this.translucent,
-            }, onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, hAsync("ion-backdrop", { key: 'c3cd05738bc2834f54707edeb2fae06ec10d6fd2', tappable: this.backdropDismiss }), hAsync("div", { key: 'b44fadd9ba7ddf073854c5035538d11ae8e66bc2', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'fafea048141a6c7957e62aef31faa8041dd610c1', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el), ...htmlAttributes }, hAsync("div", { key: '3ad9d2d4b7cf425eab8293ddc12eff0fe8df1517', class: "alert-head" }, header && (hAsync("h2", { key: '7d9154f5ee595b7e4da6ecf3a20871f104c1256e', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (hAsync("h2", { key: '1f891f38004be6964e9406b84dd580145c42516a', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (hAsync("h3", { key: '2ab4d344ecb7e384e8f6d3d3e59ee5a1bbcc832c', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("div", { key: '78a4ff09aa3aaafcd0dc2a42d036767d83b3cfa2', tabindex: "0", "aria-hidden": "true" })));
+            }, onIonAlertWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }, hAsync("ion-backdrop", { key: '65c92a956d998ae9016396dd2a29c42ab7376d0e', tappable: this.backdropDismiss }), hAsync("div", { key: 'f2288fa0b7ef9d0bf031c168fe78c48422cf91c8', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: 'dbb109435c378f77c6b0231e58756f8a0467732d', class: "alert-wrapper ion-overlay-wrapper", role: role, "aria-modal": "true", "aria-labelledby": ariaLabelledBy, "aria-describedby": message !== undefined ? msgId : null, tabindex: "0", ref: (el) => (this.wrapperEl = el), ...htmlAttributes }, hAsync("div", { key: '075597f94719673cf1f894a8566e1036849afa75', class: "alert-head" }, header && (hAsync("h2", { key: 'f96f4b1db8473c62040beed6e96108c733978d73', id: hdrId, class: "alert-title" }, header)), subHeader && !header && (hAsync("h2", { key: 'dbd824ef19a07bddde4eb928f11de7c7cadf98b8', id: subHdrId, class: "alert-sub-title" }, subHeader)), subHeader && header && (hAsync("h3", { key: '4774fa13700dd23aec7930492acae80de3bdf5d1', id: subHdrId, class: "alert-sub-title" }, subHeader))), this.renderAlertMessage(msgId), this.renderAlertInputs(), this.renderAlertButtons()), hAsync("div", { key: '5c728b7457e231f64294bbec821bdb547c6437dd', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -22330,17 +22375,19 @@ class ItemSliding {
         }
     }
     async updateOptions() {
-        const options = Array.from(this.el.querySelectorAll('ion-item-options'));
-        /**
-         * Frameworks that assign element props after inserting the element haven't set
-         * `side` while `connectedCallback` runs, so reading it any earlier reports every
-         * option as `end`.
-         */
-        await Promise.all(options.map((option) => new Promise((resolve) => componentOnReady(option, resolve))));
+        const options = this.el.querySelectorAll('ion-item-options');
         let sides = 0;
         // Reset left and right options in case they were removed
         this.leftOptions = this.rightOptions = undefined;
-        for (const option of options) {
+        for (let i = 0; i < options.length; i++) {
+            const item = options.item(i);
+            /**
+             * We cannot use the componentOnReady helper
+             * util here since we need to wait for all of these items
+             * to be ready before we set `this.sides` and `this.optsDirty`.
+             */
+            // eslint-disable-next-line custom-rules/no-component-on-ready-method
+            const option = item.componentOnReady !== undefined ? await item.componentOnReady() : item;
             const side = isEndSide(option.side ?? option.getAttribute('side')) ? 'end' : 'start';
             if (side === 'start') {
                 this.leftOptions = option;
@@ -22539,7 +22586,7 @@ class ItemSliding {
     }
     render() {
         const mode = getIonMode$1(this);
-        return (hAsync(Host, { key: '02174ca963753d3a51a4249068f3d436f8acb03d', class: {
+        return (hAsync(Host, { key: '15f6a98f8c888e86c29827cdf55d98ace08699dd', class: {
                 [mode]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,
@@ -22952,6 +22999,10 @@ class Loading {
     connectedCallback() {
         prepareOverlay(this.el);
         this.triggerChanged();
+        // Re-apply the root lock if moved without dismiss() being called
+        if (this.presented) {
+            restoreRootFocusTrapAccessibility(this.el);
+        }
     }
     componentWillLoad() {
         if (this.spinner === undefined) {
@@ -23052,14 +23103,14 @@ class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (hAsync(Host, { key: '2d14122ff3081de73631a7fdd4affdd5c73b8618', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1", ...htmlAttributes, style: {
+        return (hAsync(Host, { key: 'b4430bc66aedeca19d5645667cba73c169c4bd76', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1", ...htmlAttributes, style: {
                 zIndex: `${40000 + this.overlayIndex}`,
             }, onIonBackdropTap: this.onBackdropTap, class: {
                 ...getClassMap(this.cssClass),
                 [mode]: true,
                 'overlay-hidden': true,
                 'loading-translucent': this.translucent,
-            } }, hAsync("ion-backdrop", { key: 'b7d5bb0d670a20c159d7f67327bf3b1489449188', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '085ce92bd2004d323ab47eb472b83826e48dc619', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '4ecd5bfc0bbd3da434d32f0f319f867a44c5e1f1', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: '5a4498e1421e09d01c0ee4312eae5272e95c3127', class: "loading-spinner" }, hAsync("ion-spinner", { key: '1b3bc7d45d775195657ead3535f65e6b79f37e84', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: 'bc7c5467b9f1c6ab957f79934e97acc713bdec37', tabindex: "0", "aria-hidden": "true" })));
+            } }, hAsync("ion-backdrop", { key: 'dec0df942ae778c99ebd4dbf08d6c2a0a992639d', visible: this.showBackdrop, tappable: this.backdropDismiss }), hAsync("div", { key: '71b2d5fc259666225047fc901648ada1efcd5d4b', tabindex: "0", "aria-hidden": "true" }), hAsync("div", { key: '1d83dc3b57ee70c9e8c0f006c6fa576bd96ecded', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (hAsync("div", { key: 'd1cd127e044b8831e396b53122322c1db7e89904', class: "loading-spinner" }, hAsync("ion-spinner", { key: '38c2580cf5659da612872f01801a5fbdc2c023ba', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), hAsync("div", { key: '90e5e32ffe0df2c691f364149f43374e676bfaa3', tabindex: "0", "aria-hidden": "true" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -26618,6 +26669,9 @@ class Modal {
         this.inline = false;
         // Whether or not modal is being dismissed via gesture
         this.gestureAnimationDismissing = false;
+        // True from the first safe-area write in `present()` until the enter
+        // animation settles. A position-based read in that window is not the rest position.
+        this.isPresenting = false;
         this.presented = false;
         /** @internal */
         this.hasController = false;
@@ -26854,6 +26908,17 @@ class Modal {
         const { el } = this;
         prepareOverlay(el);
         this.triggerChanged();
+        // A disconnect tears down state this presentation still needs and cannot
+        // tell a re-insert from a removal, so put it back.
+        if (this.presented || this.isPresenting) {
+            this.restoreSafeAreaOverrides();
+        }
+        // A relocation from `willPresent` reaches these before `present()` has
+        // applied the lock, so they apply it instead. Both are idempotent.
+        if (this.presented) {
+            restoreRootFocusTrapAccessibility(el);
+            this.initParentRemovalObserver();
+        }
     }
     disconnectedCallback() {
         this.triggerController.removeClickListener();
@@ -27031,25 +27096,33 @@ class Modal {
         // Recalculate isSheetModal before safe-area setup because framework
         // bindings (e.g., Angular) may not have been applied when componentWillLoad ran.
         this.isSheetModal = this.breakpoints !== undefined && this.initialBreakpoint !== undefined;
-        // Set initial safe-area overrides before animation
-        this.setInitialSafeAreaOverrides();
+        this.isPresenting = true;
         const hasCardModal = presentingElement !== undefined;
-        /**
-         * We need to change the status bar at the
-         * start of the animation so that it completes
-         * by the time the card animation is done.
-         */
-        if (hasCardModal && getIonMode$1(this) === 'ios') {
-            // Cache the original status bar color before the modal is presented
-            this.statusBarStyle = await StatusBar.getStyle();
-            setCardStatusBarDark();
+        // Wrapped so a throw cannot strand `isPresenting`, which would suppress
+        // the position-based correction for the life of this instance.
+        try {
+            // Set initial safe-area overrides before animation
+            this.setInitialSafeAreaOverrides();
+            /**
+             * We need to change the status bar at the
+             * start of the animation so that it completes
+             * by the time the card animation is done.
+             */
+            if (hasCardModal && getIonMode$1(this) === 'ios') {
+                // Cache the original status bar color before the modal is presented
+                this.statusBarStyle = await StatusBar.getStyle();
+                setCardStatusBarDark();
+            }
+            await present(this, 'modalEnter', iosEnterAnimation$2, mdEnterAnimation$2, {
+                presentingEl: presentingElement,
+                currentBreakpoint: this.initialBreakpoint,
+                backdropBreakpoint: this.backdropBreakpoint,
+                expandToScroll: this.expandToScroll,
+            });
+        }
+        finally {
+            this.isPresenting = false;
         }
-        await present(this, 'modalEnter', iosEnterAnimation$2, mdEnterAnimation$2, {
-            presentingEl: presentingElement,
-            currentBreakpoint: this.initialBreakpoint,
-            backdropBreakpoint: this.backdropBreakpoint,
-            expandToScroll: this.expandToScroll,
-        });
         // Update safe-area based on actual position after animation
         this.updateSafeAreaOverrides();
         // Apply fullscreen safe-area padding if needed
@@ -27551,6 +27624,9 @@ class Modal {
             this.cachedOriginalParent.tagName === 'ION-APP') {
             return;
         }
+        // Both `present()` and a reconnect call this, so drop any existing
+        // observer. Below the guards, so a call that bails cannot leave none.
+        this.cleanupParentRemovalObserver();
         this.parentRemovalObserver = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
                 if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
@@ -27629,6 +27705,9 @@ class Modal {
         // Set the internal offset property with the resolved root safe-area-top value
         if (context.isSheetModal) {
             this.updateSheetOffsetTop();
+            // A restore after a DOM move runs this a second time for the same
+            // modal, so drop the previous subscription rather than stacking one.
+            this.unsubscribeRootSafeAreaTop?.();
             this.unsubscribeRootSafeAreaTop = onRootSafeAreaTopChange((safeAreaTop) => this.updateSheetOffsetTop(safeAreaTop));
         }
     }
@@ -27747,6 +27826,31 @@ class Modal {
         const { contentEl } = this.findContentAndFooter();
         this.clearContentSafeAreaPadding(contentEl);
     }
+    /**
+     * Re-applies what `cleanupSafeAreaOverrides()` removed for a modal moved
+     * while presented. Anything needing no measurement goes on synchronously so
+     * the modal is never painted without safe-area. The position-based
+     * correction waits a frame for the layout pass it reads.
+     */
+    restoreSafeAreaOverrides() {
+        this.setInitialSafeAreaOverrides();
+        this.applyFullscreenSafeArea();
+        raf(() => {
+            // A dismiss or another move can land first, and a read before the enter
+            // animation settles is not the rest position. `present()` redoes it.
+            if (!this.presented || !this.el.isConnected || this.isPresenting) {
+                return;
+            }
+            // A hidden subtree carries `display: none`, so there is no box and the
+            // read would write the safe-area for a modal touching no edge. The
+            // prediction applied above holds until the modal is shown again.
+            const { width, height } = this.el.getBoundingClientRect();
+            if (width === 0 && height === 0) {
+                return;
+            }
+            this.updateSafeAreaOverrides();
+        });
+    }
     render() {
         const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = this;
         const showHandle = handle !== false && isSheetModal;
@@ -27754,7 +27858,7 @@ class Modal {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (hAsync(Host, { key: 'a471c293319cb6ee5ffb7ffafec0b8413e4289de', "no-router": true,
+        return (hAsync(Host, { key: '7c9c736052c5a788cf31040b6b2386dd9ea7454b', "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}`,
@@ -27767,7 +27871,7 @@ class Modal {
                 '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: 'f67934afd4ddad64623856fb641cb6db846df428', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: 'a23f5cb6cf60c8f717c1dd556bce375829c80a43', class: "modal-shadow" }), hAsync("div", { key: '51eb6cd1070e4b7e49840a78dc7437238c867a01',
+            }, onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }, hAsync("ion-backdrop", { key: '01b5b5765fb3a32393c736065c824bf760728823', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && hAsync("div", { key: '40fa7727a0923f7d7461dd027f1511a6a148d84a', class: "modal-shadow" }), hAsync("div", { key: '9af934b607f60795bd5bff7bee6eacfc9b14fa35',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
@@ -27780,9 +27884,9 @@ 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 && (hAsync("button", { key: 'f49a144642b5c227c0c2b00b33f4c7e37a2bf088', 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 && (hAsync("button", { key: 'df84a6806413b13efc5b03c862edde83151579a7', 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: 'e781c0d5881762c6b61aa432721a38b49580ff64', 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: '072d3929ec6f25481946b184d8ac24219011e783', onSlotchange: this.onSlotChange }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -31218,6 +31322,13 @@ class Popover {
         const { configureTriggerInteraction, el } = this;
         prepareOverlay(el);
         configureTriggerInteraction();
+        // Re-apply the root lock if moved without dismiss() being called
+        if (this.presented) {
+            restoreRootFocusTrapAccessibility(el);
+            // The disconnect tore down the header observer, and `present()` is its
+            // only other caller, so a move mid-layout would lose the recalculation.
+            this.recalculateContentOnHeaderReady();
+        }
     }
     disconnectedCallback() {
         const { destroyTriggerInteraction } = this;
@@ -31395,6 +31506,9 @@ class Popover {
         if (!header || contentElements.length === 0) {
             return;
         }
+        // Both `present()` and a reconnect call this, so drop any existing
+        // observer. Below the guards, so a call that bails cannot leave none.
+        this.headerResizeObserver?.disconnect();
         this.headerResizeObserver = new ResizeObserver(async () => {
             if (header.offsetHeight > 0) {
                 this.headerResizeObserver?.disconnect();
@@ -31467,7 +31581,7 @@ class Popover {
         const { onLifecycle, parentPopover, dismissOnSelect, side, arrow, htmlAttributes, focusTrap } = this;
         const desktop = isPlatform('desktop');
         const enableArrow = arrow && !parentPopover;
-        return (hAsync(Host, { key: '52ffc7116969ae1b8b927e67f2acbfe5f5434f70', "aria-modal": "true", "no-router": true, tabindex: "-1", ...htmlAttributes, style: {
+        return (hAsync(Host, { key: '5a41565e6129c73112835aab18b7ae213de040f2', "aria-modal": "true", "no-router": true, tabindex: "-1", ...htmlAttributes, style: {
                 zIndex: `${20000 + this.overlayIndex}`,
             }, class: {
                 ...getClassMap(this.cssClass),
@@ -31478,7 +31592,7 @@ class Popover {
                 [`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: '79a8e851dbd22119e21ffb2f4709c555251045c8', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: 'c46c9f62c3ef3f902e23f27404eaa446a5d8cf88', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: '9fdcbbc4ea6c7bde74f646d48eb77296b2c9dd83', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '138e56bb83462ebb0908edb522b45ecf94b82aeb', class: "popover-content", part: "content" }, hAsync("slot", { key: 'daeefcf002e8d89e91d6e0faf7f63f75b68a2dbe' })))));
+            }, onIonPopoverDidPresent: onLifecycle, onIonPopoverWillPresent: onLifecycle, onIonPopoverWillDismiss: onLifecycle, onIonPopoverDidDismiss: onLifecycle, onIonBackdropTap: this.onBackdropTap }, !parentPopover && hAsync("ion-backdrop", { key: '59e724e4a6ce25eae78ccf1668effd988be7232a', tappable: this.backdropDismiss, visible: this.showBackdrop, part: "backdrop" }), hAsync("div", { key: '88d787ca20ac7cbacc4190bd771645dbe6083ad9', class: "popover-wrapper ion-overlay-wrapper", onClick: dismissOnSelect ? () => this.dismiss() : undefined }, enableArrow && hAsync("div", { key: 'f766e6413cc4545f27a43d5931c033261e3daa2c', class: "popover-arrow", part: "arrow" }), hAsync("div", { key: '675bddff0c071378858bb2d07bec91da68c2652a', class: "popover-content", part: "content" }, hAsync("slot", { key: '1c446b867083016b24b1b3baccd19b9fc08e114a' })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -37273,6 +37387,11 @@ class SegmentButton {
             addEventListener$1(segmentEl, 'ionSelect', this.updateState);
             addEventListener$1(segmentEl, 'ionStyle', this.updateStyle);
         }
+        // Prevent buttons from being disabled when associated with segment content
+        if (this.contentId && this.disabled) {
+            printIonWarning(`[ion-segment-button] - Segment buttons cannot be disabled when associated with an <ion-segment-content>.`);
+            this.disabled = false;
+        }
     }
     disconnectedCallback() {
         const segmentEl = this.segmentEl;
@@ -37289,15 +37408,6 @@ class SegmentButton {
         // Return if there is no contentId defined
         if (!this.contentId)
             return;
-        /**
-         * Checked here rather than in `connectedCallback` so frameworks that assign element
-         * props after inserting the element have set `disabled` by now. A disabled ion-segment
-         * pushes that onto its buttons too, which this guard should not undo.
-         */
-        if (this.disabled && this.segmentEl?.disabled !== true) {
-            printIonWarning(`[ion-segment-button] - Segment buttons cannot be disabled when associated with an <ion-segment-content>.`);
-            this.disabled = false;
-        }
         // Attempt to find the Segment Content by its contentId
         const segmentContent = document.getElementById(this.contentId);
         // If no associated Segment Content exists, log an error and return
@@ -37332,7 +37442,7 @@ class SegmentButton {
         const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this;
         const mode = getIonMode$1(this);
         const hasSegmentColor = () => segmentEl?.color !== undefined;
-        return (hAsync(Host, { key: 'd8acc71d87e26b32f20b2d0f9a6acc9f0dab0dee', class: {
+        return (hAsync(Host, { key: '2b4b7ad8b981d2ee39aba5b9c734de8a5bd045ba', class: {
                 [mode]: true,
                 'in-toolbar': hostContext('ion-toolbar', this.el),
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
@@ -37348,7 +37458,7 @@ class SegmentButton {
                 'ion-activatable': true,
                 'ion-activatable-instant': true,
                 'ion-focusable': true,
-            } }, hAsync("button", { key: 'ce65da07b1a012bce353b3c6c24eecfbd4071d54', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled, ...this.inheritedAttributes }, hAsync("span", { key: '6c4b4dcd20e407e5dc31674bea23633d8a09187a', class: "button-inner" }, hAsync("slot", { key: '817145ae77a3c5ada88ab95723d881f1bde96b2a' })), mode === 'md' && hAsync("ion-ripple-effect", { key: '054d7e5e2a13013914fac6bbde8efdb28d9b459e' })), hAsync("div", { key: 'c48074881a302510ad4752eeb9383222cd3a54cb', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, hAsync("div", { key: '7672a6b10ee18ad026b798fbd8207dc3cd5683f9', part: "indicator-background", class: "segment-button-indicator-background" }))));
+            } }, hAsync("button", { key: '9cc58cfbe70844a0f5e1a307002e0d04e044be99', "aria-selected": checked ? 'true' : 'false', role: "tab", ref: (el) => (this.nativeEl = el), type: type, class: "button-native", part: "native", disabled: disabled, ...this.inheritedAttributes }, hAsync("span", { key: '6443551951ce589efdb2d0e1fd1a14e35b82ed19', class: "button-inner" }, hAsync("slot", { key: 'c3548b469ae6e5477d8372cb28bc70dff3a24d18' })), mode === 'md' && hAsync("ion-ripple-effect", { key: 'fb176415ca1702766c4d7a5964ec0bb467bdcb55' })), hAsync("div", { key: 'aa22b4752f8336d0e232a1e0894e87023b284a08', part: "indicator", class: "segment-button-indicator segment-button-indicator-animated" }, hAsync("div", { key: '61e29ea52048fa0583fce6c20c81614a4d0199cb', part: "indicator-background", class: "segment-button-indicator-background" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {