@ionic/core 8.5.9-nightly.20250603 → 8.5.9

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

@@ -35,6 +35,9 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
     let offset = 0;
     let canDismissBlocksGesture = false;
     let cachedScrollEl = null;
+    let cachedFooterEl = null;
+    let cachedFooterYPosition = null;
+    let currentFooterState = null;
     const canDismissMaxStep = 0.95;
     const maxBreakpoint = breakpoints[breakpoints.length - 1];
     const minBreakpoint = breakpoints[0];
@@ -64,29 +67,66 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         baseEl.classList.add(FOCUS_TRAP_DISABLE_CLASS);
     };
     /**
-     * Toggles the visible modal footer when `expandToScroll` is disabled.
-     * @param footer The footer to show.
+     * Toggles the footer to an absolute position while moving to prevent
+     * it from shaking while the sheet is being dragged.
+     * @param newPosition Whether the footer is in a moving or stationary position.
      */
-    const swapFooterVisibility = (footer) => {
-        const originalFooter = baseEl.querySelector('ion-footer');
-        if (!originalFooter) {
-            return;
+    const swapFooterPosition = (newPosition) => {
+        if (!cachedFooterEl) {
+            cachedFooterEl = baseEl.querySelector('ion-footer');
+            if (!cachedFooterEl) {
+                return;
+            }
         }
-        const clonedFooter = wrapperEl.nextElementSibling;
-        const footerToHide = footer === 'original' ? clonedFooter : originalFooter;
-        const footerToShow = footer === 'original' ? originalFooter : clonedFooter;
-        footerToShow.style.removeProperty('display');
-        footerToShow.removeAttribute('aria-hidden');
         const page = baseEl.querySelector('.ion-page');
-        if (footer === 'original') {
-            page.style.removeProperty('padding-bottom');
+        currentFooterState = newPosition;
+        if (newPosition === 'stationary') {
+            // Reset positioning styles to allow normal document flow
+            cachedFooterEl.classList.remove('modal-footer-moving');
+            cachedFooterEl.style.removeProperty('position');
+            cachedFooterEl.style.removeProperty('width');
+            cachedFooterEl.style.removeProperty('height');
+            cachedFooterEl.style.removeProperty('top');
+            cachedFooterEl.style.removeProperty('left');
+            page === null || page === void 0 ? void 0 : page.style.removeProperty('padding-bottom');
+            // Move to page
+            page === null || page === void 0 ? void 0 : page.appendChild(cachedFooterEl);
         }
         else {
-            const pagePadding = footerToShow.clientHeight;
-            page.style.setProperty('padding-bottom', `${pagePadding}px`);
+            // Get both the footer and document body positions
+            const cachedFooterElRect = cachedFooterEl.getBoundingClientRect();
+            const bodyRect = document.body.getBoundingClientRect();
+            // Add padding to the parent element to prevent content from being hidden
+            // when the footer is positioned absolutely. This has to be done before we
+            // make the footer absolutely positioned or we may accidentally cause the
+            // sheet to scroll.
+            const footerHeight = cachedFooterEl.clientHeight;
+            page === null || page === void 0 ? void 0 : page.style.setProperty('padding-bottom', `${footerHeight}px`);
+            // Apply positioning styles to keep footer at bottom
+            cachedFooterEl.classList.add('modal-footer-moving');
+            // Calculate absolute position relative to body
+            // We need to subtract the body's offsetTop to get true position within document.body
+            const absoluteTop = cachedFooterElRect.top - bodyRect.top;
+            const absoluteLeft = cachedFooterElRect.left - bodyRect.left;
+            // Capture the footer's current dimensions and hard code them during the drag
+            cachedFooterEl.style.setProperty('position', 'absolute');
+            cachedFooterEl.style.setProperty('width', `${cachedFooterEl.clientWidth}px`);
+            cachedFooterEl.style.setProperty('height', `${cachedFooterEl.clientHeight}px`);
+            cachedFooterEl.style.setProperty('top', `${absoluteTop}px`);
+            cachedFooterEl.style.setProperty('left', `${absoluteLeft}px`);
+            // Also cache the footer Y position, which we use to determine if the
+            // sheet has been moved below the footer. When that happens, we need to swap
+            // the position back so it will collapse correctly.
+            cachedFooterYPosition = absoluteTop;
+            // If there's a toolbar, we need to combine the toolbar height with the footer position
+            // because the toolbar moves with the drag handle, so when it starts overlapping the footer,
+            // we need to account for that.
+            const toolbar = baseEl.querySelector('ion-toolbar');
+            if (toolbar) {
+                cachedFooterYPosition -= toolbar.clientHeight;
+            }
+            document.body.appendChild(cachedFooterEl);
         }
-        footerToHide.style.setProperty('display', 'none');
-        footerToHide.setAttribute('aria-hidden', 'true');
     };
     /**
      * After the entering animation completes,
@@ -180,12 +220,11 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         }
         /**
          * If expandToScroll is disabled, we need to swap
-         * the footer visibility to the original, so if the modal
-         * is dismissed, the footer dismisses with the modal
-         * and doesn't stay on the screen after the modal is gone.
+         * the footer position to moving so that it doesn't shake
+         * while the sheet is being dragged.
          */
         if (!expandToScroll) {
-            swapFooterVisibility('original');
+            swapFooterPosition('moving');
         }
         /**
          * If we are pulling down, then it is possible we are pulling on the content.
@@ -204,6 +243,21 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         animation.progressStart(true, 1 - currentBreakpoint);
     };
     const onMove = (detail) => {
+        /**
+         * If `expandToScroll` is disabled, we need to see if we're currently below
+         * the footer element and the footer is in a stationary position. If so,
+         * we need to make the stationary the original position so that the footer
+         * collapses with the sheet.
+         */
+        if (!expandToScroll && cachedFooterYPosition !== null && currentFooterState !== null) {
+            // Check if we need to swap the footer position
+            if (detail.currentY >= cachedFooterYPosition && currentFooterState === 'moving') {
+                swapFooterPosition('stationary');
+            }
+            else if (detail.currentY < cachedFooterYPosition && currentFooterState === 'stationary') {
+                swapFooterPosition('moving');
+            }
+        }
         /**
          * If `expandToScroll` is disabled, and an upwards swipe gesture is done within
          * the scrollable content, we should not allow the swipe gesture to continue.
@@ -337,14 +391,6 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
          * snapping animation completes.
          */
         gesture.enable(false);
-        /**
-         * If expandToScroll is disabled, we need to swap
-         * the footer visibility to the cloned one so the footer
-         * doesn't flicker when the sheet's height is animated.
-         */
-        if (!expandToScroll && shouldRemainOpen) {
-            swapFooterVisibility('cloned');
-        }
         if (shouldPreventDismiss) {
             handleCanDismiss(baseEl, animation);
         }
@@ -361,10 +407,28 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         if (contentEl && (snapToBreakpoint === breakpoints[breakpoints.length - 1] || !expandToScroll)) {
             contentEl.scrollY = true;
         }
+        /**
+         * If expandToScroll is disabled and we're animating
+         * to close the sheet, we need to swap
+         * the footer position to stationary so that it
+         * will collapse correctly. We cannot just always swap
+         * here or it'll be jittery while animating movement.
+         */
+        if (!expandToScroll && snapToBreakpoint === 0) {
+            swapFooterPosition('stationary');
+        }
         return new Promise((resolve) => {
             animation
                 .onFinish(() => {
                 if (shouldRemainOpen) {
+                    /**
+                     * If expandToScroll is disabled, we need to swap
+                     * the footer position to stationary so that it
+                     * will act as it would by default.
+                     */
+                    if (!expandToScroll) {
+                        swapFooterPosition('stationary');
+                    }
                     /**
                      * Once the snapping animation completes,
                      * we need to reset the animation to go

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

@@ -331,14 +331,4 @@ ion-backdrop {
   border-start-end-radius: var(--border-radius);
   border-end-end-radius: 0;
   border-end-start-radius: 0;
-}
-
-/**
- * Sheet modals require an additional padding as mentioned in the
- * `core.scss` file. However, there's a workaround that requires
- * a cloned footer to be added to the modal. This is only necessary
- * because the core styles are not being applied to the cloned footer.
- */
-:host(.modal-sheet.modal-no-expand-scroll) ion-footer ion-toolbar:first-of-type {
-  padding-top: 6px;
 }

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-06-03T06:10:18",
+  "timestamp": "2025-06-04T13:41:42",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.20.0",

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

@@ -584,47 +584,7 @@ const iosEnterAnimation = (baseEl, opts) => {
         .addElement(baseEl)
         .easing('cubic-bezier(0.32,0.72,0,1)')
         .duration(500)
-        .addAnimation([wrapperAnimation])
-        .beforeAddWrite(() => {
-        if (expandToScroll) {
-            // Scroll can only be done when the modal is fully expanded.
-            return;
-        }
-        /**
-         * There are some browsers that causes flickering when
-         * dragging the content when scroll is enabled at every
-         * breakpoint. This is due to the wrapper element being
-         * transformed off the screen and having a snap animation.
-         *
-         * A workaround is to clone the footer element and append
-         * it outside of the wrapper element. This way, the footer
-         * is still visible and the drag can be done without
-         * flickering. The original footer is hidden until the modal
-         * is dismissed. This maintains the animation of the footer
-         * when the modal is dismissed.
-         *
-         * The workaround needs to be done before the animation starts
-         * so there are no flickering issues.
-         */
-        const ionFooter = baseEl.querySelector('ion-footer');
-        /**
-         * This check is needed to prevent more than one footer
-         * from being appended to the shadow root.
-         * Otherwise, iOS and MD enter animations would append
-         * the footer twice.
-         */
-        const ionFooterAlreadyAppended = baseEl.shadowRoot.querySelector('ion-footer');
-        if (ionFooter && !ionFooterAlreadyAppended) {
-            const footerHeight = ionFooter.clientHeight;
-            const clonedFooter = ionFooter.cloneNode(true);
-            baseEl.shadowRoot.appendChild(clonedFooter);
-            ionFooter.style.setProperty('display', 'none');
-            ionFooter.setAttribute('aria-hidden', 'true');
-            // Padding is added to prevent some content from being hidden.
-            const page = baseEl.querySelector('.ion-page');
-            page.style.setProperty('padding-bottom', `${footerHeight}px`);
-        }
-    });
+        .addAnimation([wrapperAnimation]);
     if (contentAnimation) {
         baseAnimation.addAnimation(contentAnimation);
     }
@@ -705,7 +665,7 @@ const createLeaveAnimation$1 = () => {
  * iOS Modal Leave Animation
  */
 const iosLeaveAnimation = (baseEl, opts, duration = 500) => {
-    const { presentingEl, currentBreakpoint, expandToScroll } = opts;
+    const { presentingEl, currentBreakpoint } = opts;
     const root = getElementRoot(baseEl);
     const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetLeaveAnimation(opts) : createLeaveAnimation$1();
     backdropAnimation.addElement(root.querySelector('ion-backdrop'));
@@ -714,29 +674,7 @@ const iosLeaveAnimation = (baseEl, opts, duration = 500) => {
         .addElement(baseEl)
         .easing('cubic-bezier(0.32,0.72,0,1)')
         .duration(duration)
-        .addAnimation(wrapperAnimation)
-        .beforeAddWrite(() => {
-        if (expandToScroll) {
-            // Scroll can only be done when the modal is fully expanded.
-            return;
-        }
-        /**
-         * If expandToScroll is disabled, we need to swap
-         * the visibility to the original, so the footer
-         * dismisses with the modal and doesn't stay
-         * until the modal is removed from the DOM.
-         */
-        const ionFooter = baseEl.querySelector('ion-footer');
-        if (ionFooter) {
-            const clonedFooter = baseEl.shadowRoot.querySelector('ion-footer');
-            ionFooter.style.removeProperty('display');
-            ionFooter.removeAttribute('aria-hidden');
-            clonedFooter.style.setProperty('display', 'none');
-            clonedFooter.setAttribute('aria-hidden', 'true');
-            const page = baseEl.querySelector('.ion-page');
-            page.style.removeProperty('padding-bottom');
-        }
-    });
+        .addAnimation(wrapperAnimation);
     if (presentingEl) {
         const isMobile = window.innerWidth < 768;
         const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;
@@ -827,52 +765,12 @@ const mdEnterAnimation = (baseEl, opts) => {
     wrapperAnimation.addElement(root.querySelector('.modal-wrapper'));
     // The content animation is only added if scrolling is enabled for
     // all the breakpoints.
-    expandToScroll && (contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.addElement(baseEl.querySelector('.ion-page')));
+    !expandToScroll && (contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.addElement(baseEl.querySelector('.ion-page')));
     const baseAnimation = createAnimation()
         .addElement(baseEl)
         .easing('cubic-bezier(0.36,0.66,0.04,1)')
         .duration(280)
-        .addAnimation([backdropAnimation, wrapperAnimation])
-        .beforeAddWrite(() => {
-        if (expandToScroll) {
-            // Scroll can only be done when the modal is fully expanded.
-            return;
-        }
-        /**
-         * There are some browsers that causes flickering when
-         * dragging the content when scroll is enabled at every
-         * breakpoint. This is due to the wrapper element being
-         * transformed off the screen and having a snap animation.
-         *
-         * A workaround is to clone the footer element and append
-         * it outside of the wrapper element. This way, the footer
-         * is still visible and the drag can be done without
-         * flickering. The original footer is hidden until the modal
-         * is dismissed. This maintains the animation of the footer
-         * when the modal is dismissed.
-         *
-         * The workaround needs to be done before the animation starts
-         * so there are no flickering issues.
-         */
-        const ionFooter = baseEl.querySelector('ion-footer');
-        /**
-         * This check is needed to prevent more than one footer
-         * from being appended to the shadow root.
-         * Otherwise, iOS and MD enter animations would append
-         * the footer twice.
-         */
-        const ionFooterAlreadyAppended = baseEl.shadowRoot.querySelector('ion-footer');
-        if (ionFooter && !ionFooterAlreadyAppended) {
-            const footerHeight = ionFooter.clientHeight;
-            const clonedFooter = ionFooter.cloneNode(true);
-            baseEl.shadowRoot.appendChild(clonedFooter);
-            ionFooter.style.setProperty('display', 'none');
-            ionFooter.setAttribute('aria-hidden', 'true');
-            // Padding is added to prevent some content from being hidden.
-            const page = baseEl.querySelector('.ion-page');
-            page.style.setProperty('padding-bottom', `${footerHeight}px`);
-        }
-    });
+        .addAnimation([backdropAnimation, wrapperAnimation]);
     if (contentAnimation) {
         baseAnimation.addAnimation(contentAnimation);
     }
@@ -891,7 +789,7 @@ const createLeaveAnimation = () => {
  * Md Modal Leave Animation
  */
 const mdLeaveAnimation = (baseEl, opts) => {
-    const { currentBreakpoint, expandToScroll } = opts;
+    const { currentBreakpoint } = opts;
     const root = getElementRoot(baseEl);
     const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetLeaveAnimation(opts) : createLeaveAnimation();
     backdropAnimation.addElement(root.querySelector('ion-backdrop'));
@@ -899,29 +797,7 @@ const mdLeaveAnimation = (baseEl, opts) => {
     const baseAnimation = createAnimation()
         .easing('cubic-bezier(0.47,0,0.745,0.715)')
         .duration(200)
-        .addAnimation([backdropAnimation, wrapperAnimation])
-        .beforeAddWrite(() => {
-        if (expandToScroll) {
-            // Scroll can only be done when the modal is fully expanded.
-            return;
-        }
-        /**
-         * If expandToScroll is disabled, we need to swap
-         * the visibility to the original, so the footer
-         * dismisses with the modal and doesn't stay
-         * until the modal is removed from the DOM.
-         */
-        const ionFooter = baseEl.querySelector('ion-footer');
-        if (ionFooter) {
-            const clonedFooter = baseEl.shadowRoot.querySelector('ion-footer');
-            ionFooter.style.removeProperty('display');
-            ionFooter.removeAttribute('aria-hidden');
-            clonedFooter.style.setProperty('display', 'none');
-            clonedFooter.setAttribute('aria-hidden', 'true');
-            const page = baseEl.querySelector('.ion-page');
-            page.style.removeProperty('padding-bottom');
-        }
-    });
+        .addAnimation([backdropAnimation, wrapperAnimation]);
     return baseAnimation;
 };
 
@@ -953,6 +829,9 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
     let offset = 0;
     let canDismissBlocksGesture = false;
     let cachedScrollEl = null;
+    let cachedFooterEl = null;
+    let cachedFooterYPosition = null;
+    let currentFooterState = null;
     const canDismissMaxStep = 0.95;
     const maxBreakpoint = breakpoints[breakpoints.length - 1];
     const minBreakpoint = breakpoints[0];
@@ -982,29 +861,66 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
         baseEl.classList.add(FOCUS_TRAP_DISABLE_CLASS);
     };
     /**
-     * Toggles the visible modal footer when `expandToScroll` is disabled.
-     * @param footer The footer to show.
+     * Toggles the footer to an absolute position while moving to prevent
+     * it from shaking while the sheet is being dragged.
+     * @param newPosition Whether the footer is in a moving or stationary position.
      */
-    const swapFooterVisibility = (footer) => {
-        const originalFooter = baseEl.querySelector('ion-footer');
-        if (!originalFooter) {
-            return;
+    const swapFooterPosition = (newPosition) => {
+        if (!cachedFooterEl) {
+            cachedFooterEl = baseEl.querySelector('ion-footer');
+            if (!cachedFooterEl) {
+                return;
+            }
         }
-        const clonedFooter = wrapperEl.nextElementSibling;
-        const footerToHide = footer === 'original' ? clonedFooter : originalFooter;
-        const footerToShow = footer === 'original' ? originalFooter : clonedFooter;
-        footerToShow.style.removeProperty('display');
-        footerToShow.removeAttribute('aria-hidden');
         const page = baseEl.querySelector('.ion-page');
-        if (footer === 'original') {
-            page.style.removeProperty('padding-bottom');
+        currentFooterState = newPosition;
+        if (newPosition === 'stationary') {
+            // Reset positioning styles to allow normal document flow
+            cachedFooterEl.classList.remove('modal-footer-moving');
+            cachedFooterEl.style.removeProperty('position');
+            cachedFooterEl.style.removeProperty('width');
+            cachedFooterEl.style.removeProperty('height');
+            cachedFooterEl.style.removeProperty('top');
+            cachedFooterEl.style.removeProperty('left');
+            page === null || page === void 0 ? void 0 : page.style.removeProperty('padding-bottom');
+            // Move to page
+            page === null || page === void 0 ? void 0 : page.appendChild(cachedFooterEl);
         }
         else {
-            const pagePadding = footerToShow.clientHeight;
-            page.style.setProperty('padding-bottom', `${pagePadding}px`);
+            // Get both the footer and document body positions
+            const cachedFooterElRect = cachedFooterEl.getBoundingClientRect();
+            const bodyRect = document.body.getBoundingClientRect();
+            // Add padding to the parent element to prevent content from being hidden
+            // when the footer is positioned absolutely. This has to be done before we
+            // make the footer absolutely positioned or we may accidentally cause the
+            // sheet to scroll.
+            const footerHeight = cachedFooterEl.clientHeight;
+            page === null || page === void 0 ? void 0 : page.style.setProperty('padding-bottom', `${footerHeight}px`);
+            // Apply positioning styles to keep footer at bottom
+            cachedFooterEl.classList.add('modal-footer-moving');
+            // Calculate absolute position relative to body
+            // We need to subtract the body's offsetTop to get true position within document.body
+            const absoluteTop = cachedFooterElRect.top - bodyRect.top;
+            const absoluteLeft = cachedFooterElRect.left - bodyRect.left;
+            // Capture the footer's current dimensions and hard code them during the drag
+            cachedFooterEl.style.setProperty('position', 'absolute');
+            cachedFooterEl.style.setProperty('width', `${cachedFooterEl.clientWidth}px`);
+            cachedFooterEl.style.setProperty('height', `${cachedFooterEl.clientHeight}px`);
+            cachedFooterEl.style.setProperty('top', `${absoluteTop}px`);
+            cachedFooterEl.style.setProperty('left', `${absoluteLeft}px`);
+            // Also cache the footer Y position, which we use to determine if the
+            // sheet has been moved below the footer. When that happens, we need to swap
+            // the position back so it will collapse correctly.
+            cachedFooterYPosition = absoluteTop;
+            // If there's a toolbar, we need to combine the toolbar height with the footer position
+            // because the toolbar moves with the drag handle, so when it starts overlapping the footer,
+            // we need to account for that.
+            const toolbar = baseEl.querySelector('ion-toolbar');
+            if (toolbar) {
+                cachedFooterYPosition -= toolbar.clientHeight;
+            }
+            document.body.appendChild(cachedFooterEl);
         }
-        footerToHide.style.setProperty('display', 'none');
-        footerToHide.setAttribute('aria-hidden', 'true');
     };
     /**
      * After the entering animation completes,
@@ -1098,12 +1014,11 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
         }
         /**
          * If expandToScroll is disabled, we need to swap
-         * the footer visibility to the original, so if the modal
-         * is dismissed, the footer dismisses with the modal
-         * and doesn't stay on the screen after the modal is gone.
+         * the footer position to moving so that it doesn't shake
+         * while the sheet is being dragged.
          */
         if (!expandToScroll) {
-            swapFooterVisibility('original');
+            swapFooterPosition('moving');
         }
         /**
          * If we are pulling down, then it is possible we are pulling on the content.
@@ -1122,6 +1037,21 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
         animation.progressStart(true, 1 - currentBreakpoint);
     };
     const onMove = (detail) => {
+        /**
+         * If `expandToScroll` is disabled, we need to see if we're currently below
+         * the footer element and the footer is in a stationary position. If so,
+         * we need to make the stationary the original position so that the footer
+         * collapses with the sheet.
+         */
+        if (!expandToScroll && cachedFooterYPosition !== null && currentFooterState !== null) {
+            // Check if we need to swap the footer position
+            if (detail.currentY >= cachedFooterYPosition && currentFooterState === 'moving') {
+                swapFooterPosition('stationary');
+            }
+            else if (detail.currentY < cachedFooterYPosition && currentFooterState === 'stationary') {
+                swapFooterPosition('moving');
+            }
+        }
         /**
          * If `expandToScroll` is disabled, and an upwards swipe gesture is done within
          * the scrollable content, we should not allow the swipe gesture to continue.
@@ -1255,14 +1185,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
          * snapping animation completes.
          */
         gesture.enable(false);
-        /**
-         * If expandToScroll is disabled, we need to swap
-         * the footer visibility to the cloned one so the footer
-         * doesn't flicker when the sheet's height is animated.
-         */
-        if (!expandToScroll && shouldRemainOpen) {
-            swapFooterVisibility('cloned');
-        }
         if (shouldPreventDismiss) {
             handleCanDismiss(baseEl, animation);
         }
@@ -1279,10 +1201,28 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
         if (contentEl && (snapToBreakpoint === breakpoints[breakpoints.length - 1] || !expandToScroll)) {
             contentEl.scrollY = true;
         }
+        /**
+         * If expandToScroll is disabled and we're animating
+         * to close the sheet, we need to swap
+         * the footer position to stationary so that it
+         * will collapse correctly. We cannot just always swap
+         * here or it'll be jittery while animating movement.
+         */
+        if (!expandToScroll && snapToBreakpoint === 0) {
+            swapFooterPosition('stationary');
+        }
         return new Promise((resolve) => {
             animation
                 .onFinish(() => {
                 if (shouldRemainOpen) {
+                    /**
+                     * If expandToScroll is disabled, we need to swap
+                     * the footer position to stationary so that it
+                     * will act as it would by default.
+                     */
+                    if (!expandToScroll) {
+                        swapFooterPosition('stationary');
+                    }
                     /**
                      * Once the snapping animation completes,
                      * we need to reset the animation to go
@@ -1347,7 +1287,7 @@ 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(.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}:host(.modal-sheet.modal-no-expand-scroll) ion-footer ion-toolbar:first-of-type{padding-top:6px}";
+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 IonModalIosStyle0 = modalIosCss;
 
 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}";