@ionic/core 8.6.1-dev.11749575087.1b86eb67 → 8.6.1-dev.11749648223.169ce853

package/components/ion-reorder-group.js

@@ -14,6 +14,9 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
         super();
         this.__registerHost();
         this.ionItemReorder = createEvent(this, "ionItemReorder", 7);
+        this.ionReorderStart = createEvent(this, "ionReorderStart", 7);
+        this.ionReorderMove = createEvent(this, "ionReorderMove", 7);
+        this.ionReorderEnd = createEvent(this, "ionReorderEnd", 7);
         this.lastToIndex = -1;
         this.cachedHeights = [];
         this.scrollElTop = 0;
@@ -59,7 +62,7 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
         }
     }
     /**
-     * Completes the reorder operation. Must be called by the `ionItemReorder` event.
+     * Completes the reorder operation. Must be called by the `ionReorderEnd` event.
      *
      * If a list of items is passed, the list will be reordered and returned in the
      * proper order.
@@ -126,6 +129,7 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
         this.state = 1 /* ReorderGroupState.Active */;
         item.classList.add(ITEM_REORDER_SELECTED);
         hapticSelectionStart();
+        this.ionReorderStart.emit();
     }
     onMove(ev) {
         const selectedItem = this.selectedItemEl;
@@ -140,6 +144,7 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
         const currentY = Math.max(top, Math.min(ev.currentY, bottom));
         const deltaY = scroll + currentY - ev.startY;
         const normalizedY = currentY - top;
+        const fromIndex = this.lastToIndex;
         const toIndex = this.itemIndexForTop(normalizedY);
         if (toIndex !== this.lastToIndex) {
             const fromIndex = indexForItem(selectedItem);
@@ -149,6 +154,10 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
         }
         // Update selected item position
         selectedItem.style.transform = `translateY(${deltaY}px)`;
+        this.ionReorderMove.emit({
+            from: fromIndex,
+            to: toIndex,
+        });
     }
     onEnd() {
         const selectedItemEl = this.selectedItemEl;
@@ -160,14 +169,23 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
         const toIndex = this.lastToIndex;
         const fromIndex = indexForItem(selectedItemEl);
         if (toIndex === fromIndex) {
+            this.ionReorderEnd.emit({
+                complete: this.completeReorder.bind(this),
+            });
             this.completeReorder();
         }
         else {
+            // TODO(FW-6590): Remove this once the deprecated event is removed
             this.ionItemReorder.emit({
                 from: fromIndex,
                 to: toIndex,
                 complete: this.completeReorder.bind(this),
             });
+            this.ionReorderEnd.emit({
+                from: fromIndex,
+                to: toIndex,
+                complete: this.completeReorder.bind(this),
+            });
         }
         hapticSelectionEnd();
     }
@@ -247,7 +265,7 @@ const ReorderGroup = /*@__PURE__*/ proxyCustomElement(class ReorderGroup extends
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'f30613b361c5c3095b7928a92fb4b1e8d6eff600', class: {
+        return (h(Host, { key: '8f47e24dfc7b8ef53ad3f5816fa13a8fa07de2a6', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,

package/components/modal.js

@@ -827,7 +827,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
     let offset = 0;
     let canDismissBlocksGesture = false;
     let cachedScrollEl = null;
-    let cachedFooterEls = null;
+    let cachedFooterEl = null;
     let cachedFooterYPosition = null;
     let currentFooterState = null;
     const canDismissMaxStep = 0.95;
@@ -864,81 +864,60 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
      * @param newPosition Whether the footer is in a moving or stationary position.
      */
     const swapFooterPosition = (newPosition) => {
-        if (!cachedFooterEls) {
-            cachedFooterEls = Array.from(baseEl.querySelectorAll('ion-footer'));
-            if (!cachedFooterEls.length) {
+        if (!cachedFooterEl) {
+            cachedFooterEl = baseEl.querySelector('ion-footer');
+            if (!cachedFooterEl) {
                 return;
             }
         }
         const page = baseEl.querySelector('.ion-page');
         currentFooterState = newPosition;
         if (newPosition === 'stationary') {
-            cachedFooterEls.forEach((cachedFooterEl) => {
-                // 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);
-            });
+            // 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 {
-            let footerHeights = 0;
-            cachedFooterEls.forEach((cachedFooterEl, index) => {
-                // Get both the footer and document body positions
-                const cachedFooterElRect = cachedFooterEl.getBoundingClientRect();
-                const bodyRect = document.body.getBoundingClientRect();
-                // Calculate the total height of all footers
-                // so we can add padding to the page element
-                footerHeights += cachedFooterEl.clientHeight;
-                // 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 store them in CSS variables for
-                // later use when applying absolute positioning.
-                cachedFooterEl.style.setProperty('--pinned-width', `${cachedFooterEl.clientWidth}px`);
-                cachedFooterEl.style.setProperty('--pinned-height', `${cachedFooterEl.clientHeight}px`);
-                cachedFooterEl.style.setProperty('--pinned-top', `${absoluteTop}px`);
-                cachedFooterEl.style.setProperty('--pinned-left', `${absoluteLeft}px`);
-                // Only cache the first footer's Y position
-                // This is used to determine if the sheet has been moved below the footer
-                // and needs to be swapped back to stationary so it collapses correctly.
-                if (index === 0) {
-                    cachedFooterYPosition = absoluteTop;
-                    // If there's a header, we need to combine the header height with the footer position
-                    // because the header moves with the drag handle, so when it starts overlapping the footer,
-                    // we need to account for that.
-                    const header = baseEl.querySelector('ion-header');
-                    if (header) {
-                        cachedFooterYPosition -= header.clientHeight;
-                    }
-                }
-            });
-            // Apply the pinning of styles after we've calculated everything
-            // so that we don't cause layouts to shift while calculating the footer positions.
-            // Otherwise, with multiple footers we'll end up capturing the wrong positions.
-            cachedFooterEls.forEach((cachedFooterEl) => {
-                // 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.
-                page === null || page === void 0 ? void 0 : page.style.setProperty('padding-bottom', `${footerHeights}px`);
-                // Apply positioning styles to keep footer at bottom
-                cachedFooterEl.classList.add('modal-footer-moving');
-                // Apply our preserved styles to pin the footer
-                cachedFooterEl.style.setProperty('position', 'absolute');
-                cachedFooterEl.style.setProperty('width', 'var(--pinned-width)');
-                cachedFooterEl.style.setProperty('height', 'var(--pinned-height)');
-                cachedFooterEl.style.setProperty('top', 'var(--pinned-top)');
-                cachedFooterEl.style.setProperty('left', 'var(--pinned-left)');
-                // Move the element to the body when everything else is done
-                document.body.appendChild(cachedFooterEl);
-            });
+            // 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);
         }
     };
     /**
@@ -1130,16 +1109,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
          * is not scrolled to the top.
          */
         if (!expandToScroll && detail.deltaY <= 0 && cachedScrollEl && cachedScrollEl.scrollTop > 0) {
-            /**
-             * If expand to scroll is disabled, we need to make sure we swap the footer position
-             * back to stationary so that it will collapse correctly if the modal is dismissed without
-             * dragging (e.g. through a dismiss button).
-             * This can cause issues if the user has a modal with content that can be dragged, as we'll
-             * swap to moving on drag and if we don't swap back here then the footer will get stuck.
-             */
-            if (!expandToScroll) {
-                swapFooterPosition('stationary');
-            }
             return;
         }
         /**

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

@@ -829,7 +829,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
     let offset = 0;
     let canDismissBlocksGesture = false;
     let cachedScrollEl = null;
-    let cachedFooterEls = null;
+    let cachedFooterEl = null;
     let cachedFooterYPosition = null;
     let currentFooterState = null;
     const canDismissMaxStep = 0.95;
@@ -866,81 +866,60 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
      * @param newPosition Whether the footer is in a moving or stationary position.
      */
     const swapFooterPosition = (newPosition) => {
-        if (!cachedFooterEls) {
-            cachedFooterEls = Array.from(baseEl.querySelectorAll('ion-footer'));
-            if (!cachedFooterEls.length) {
+        if (!cachedFooterEl) {
+            cachedFooterEl = baseEl.querySelector('ion-footer');
+            if (!cachedFooterEl) {
                 return;
             }
         }
         const page = baseEl.querySelector('.ion-page');
         currentFooterState = newPosition;
         if (newPosition === 'stationary') {
-            cachedFooterEls.forEach((cachedFooterEl) => {
-                // 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);
-            });
+            // 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 {
-            let footerHeights = 0;
-            cachedFooterEls.forEach((cachedFooterEl, index) => {
-                // Get both the footer and document body positions
-                const cachedFooterElRect = cachedFooterEl.getBoundingClientRect();
-                const bodyRect = document.body.getBoundingClientRect();
-                // Calculate the total height of all footers
-                // so we can add padding to the page element
-                footerHeights += cachedFooterEl.clientHeight;
-                // 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 store them in CSS variables for
-                // later use when applying absolute positioning.
-                cachedFooterEl.style.setProperty('--pinned-width', `${cachedFooterEl.clientWidth}px`);
-                cachedFooterEl.style.setProperty('--pinned-height', `${cachedFooterEl.clientHeight}px`);
-                cachedFooterEl.style.setProperty('--pinned-top', `${absoluteTop}px`);
-                cachedFooterEl.style.setProperty('--pinned-left', `${absoluteLeft}px`);
-                // Only cache the first footer's Y position
-                // This is used to determine if the sheet has been moved below the footer
-                // and needs to be swapped back to stationary so it collapses correctly.
-                if (index === 0) {
-                    cachedFooterYPosition = absoluteTop;
-                    // If there's a header, we need to combine the header height with the footer position
-                    // because the header moves with the drag handle, so when it starts overlapping the footer,
-                    // we need to account for that.
-                    const header = baseEl.querySelector('ion-header');
-                    if (header) {
-                        cachedFooterYPosition -= header.clientHeight;
-                    }
-                }
-            });
-            // Apply the pinning of styles after we've calculated everything
-            // so that we don't cause layouts to shift while calculating the footer positions.
-            // Otherwise, with multiple footers we'll end up capturing the wrong positions.
-            cachedFooterEls.forEach((cachedFooterEl) => {
-                // 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.
-                page === null || page === void 0 ? void 0 : page.style.setProperty('padding-bottom', `${footerHeights}px`);
-                // Apply positioning styles to keep footer at bottom
-                cachedFooterEl.classList.add('modal-footer-moving');
-                // Apply our preserved styles to pin the footer
-                cachedFooterEl.style.setProperty('position', 'absolute');
-                cachedFooterEl.style.setProperty('width', 'var(--pinned-width)');
-                cachedFooterEl.style.setProperty('height', 'var(--pinned-height)');
-                cachedFooterEl.style.setProperty('top', 'var(--pinned-top)');
-                cachedFooterEl.style.setProperty('left', 'var(--pinned-left)');
-                // Move the element to the body when everything else is done
-                document.body.appendChild(cachedFooterEl);
-            });
+            // 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);
         }
     };
     /**
@@ -1132,16 +1111,6 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
          * is not scrolled to the top.
          */
         if (!expandToScroll && detail.deltaY <= 0 && cachedScrollEl && cachedScrollEl.scrollTop > 0) {
-            /**
-             * If expand to scroll is disabled, we need to make sure we swap the footer position
-             * back to stationary so that it will collapse correctly if the modal is dismissed without
-             * dragging (e.g. through a dismiss button).
-             * This can cause issues if the user has a modal with content that can be dragged, as we'll
-             * swap to moving on drag and if we don't swap back here then the footer will get stuck.
-             */
-            if (!expandToScroll) {
-                swapFooterPosition('stationary');
-            }
             return;
         }
         /**

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

@@ -46,6 +46,9 @@ const ReorderGroup = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.ionItemReorder = index.createEvent(this, "ionItemReorder", 7);
+        this.ionReorderStart = index.createEvent(this, "ionReorderStart", 7);
+        this.ionReorderMove = index.createEvent(this, "ionReorderMove", 7);
+        this.ionReorderEnd = index.createEvent(this, "ionReorderEnd", 7);
         this.lastToIndex = -1;
         this.cachedHeights = [];
         this.scrollElTop = 0;
@@ -91,7 +94,7 @@ const ReorderGroup = class {
         }
     }
     /**
-     * Completes the reorder operation. Must be called by the `ionItemReorder` event.
+     * Completes the reorder operation. Must be called by the `ionReorderEnd` event.
      *
      * If a list of items is passed, the list will be reordered and returned in the
      * proper order.
@@ -158,6 +161,7 @@ const ReorderGroup = class {
         this.state = 1 /* ReorderGroupState.Active */;
         item.classList.add(ITEM_REORDER_SELECTED);
         haptic.hapticSelectionStart();
+        this.ionReorderStart.emit();
     }
     onMove(ev) {
         const selectedItem = this.selectedItemEl;
@@ -172,6 +176,7 @@ const ReorderGroup = class {
         const currentY = Math.max(top, Math.min(ev.currentY, bottom));
         const deltaY = scroll + currentY - ev.startY;
         const normalizedY = currentY - top;
+        const fromIndex = this.lastToIndex;
         const toIndex = this.itemIndexForTop(normalizedY);
         if (toIndex !== this.lastToIndex) {
             const fromIndex = indexForItem(selectedItem);
@@ -181,6 +186,10 @@ const ReorderGroup = class {
         }
         // Update selected item position
         selectedItem.style.transform = `translateY(${deltaY}px)`;
+        this.ionReorderMove.emit({
+            from: fromIndex,
+            to: toIndex,
+        });
     }
     onEnd() {
         const selectedItemEl = this.selectedItemEl;
@@ -192,14 +201,23 @@ const ReorderGroup = class {
         const toIndex = this.lastToIndex;
         const fromIndex = indexForItem(selectedItemEl);
         if (toIndex === fromIndex) {
+            this.ionReorderEnd.emit({
+                complete: this.completeReorder.bind(this),
+            });
             this.completeReorder();
         }
         else {
+            // TODO(FW-6590): Remove this once the deprecated event is removed
             this.ionItemReorder.emit({
                 from: fromIndex,
                 to: toIndex,
                 complete: this.completeReorder.bind(this),
             });
+            this.ionReorderEnd.emit({
+                from: fromIndex,
+                to: toIndex,
+                complete: this.completeReorder.bind(this),
+            });
         }
         haptic.hapticSelectionEnd();
     }
@@ -279,7 +297,7 @@ const ReorderGroup = class {
     }
     render() {
         const mode = index.getIonMode(this);
-        return (index.h(index.Host, { key: 'f30613b361c5c3095b7928a92fb4b1e8d6eff600', class: {
+        return (index.h(index.Host, { key: '8f47e24dfc7b8ef53ad3f5816fa13a8fa07de2a6', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,

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

@@ -35,7 +35,7 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
     let offset = 0;
     let canDismissBlocksGesture = false;
     let cachedScrollEl = null;
-    let cachedFooterEls = null;
+    let cachedFooterEl = null;
     let cachedFooterYPosition = null;
     let currentFooterState = null;
     const canDismissMaxStep = 0.95;
@@ -72,81 +72,60 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
      * @param newPosition Whether the footer is in a moving or stationary position.
      */
     const swapFooterPosition = (newPosition) => {
-        if (!cachedFooterEls) {
-            cachedFooterEls = Array.from(baseEl.querySelectorAll('ion-footer'));
-            if (!cachedFooterEls.length) {
+        if (!cachedFooterEl) {
+            cachedFooterEl = baseEl.querySelector('ion-footer');
+            if (!cachedFooterEl) {
                 return;
             }
         }
         const page = baseEl.querySelector('.ion-page');
         currentFooterState = newPosition;
         if (newPosition === 'stationary') {
-            cachedFooterEls.forEach((cachedFooterEl) => {
-                // 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);
-            });
+            // 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 {
-            let footerHeights = 0;
-            cachedFooterEls.forEach((cachedFooterEl, index) => {
-                // Get both the footer and document body positions
-                const cachedFooterElRect = cachedFooterEl.getBoundingClientRect();
-                const bodyRect = document.body.getBoundingClientRect();
-                // Calculate the total height of all footers
-                // so we can add padding to the page element
-                footerHeights += cachedFooterEl.clientHeight;
-                // 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 store them in CSS variables for
-                // later use when applying absolute positioning.
-                cachedFooterEl.style.setProperty('--pinned-width', `${cachedFooterEl.clientWidth}px`);
-                cachedFooterEl.style.setProperty('--pinned-height', `${cachedFooterEl.clientHeight}px`);
-                cachedFooterEl.style.setProperty('--pinned-top', `${absoluteTop}px`);
-                cachedFooterEl.style.setProperty('--pinned-left', `${absoluteLeft}px`);
-                // Only cache the first footer's Y position
-                // This is used to determine if the sheet has been moved below the footer
-                // and needs to be swapped back to stationary so it collapses correctly.
-                if (index === 0) {
-                    cachedFooterYPosition = absoluteTop;
-                    // If there's a header, we need to combine the header height with the footer position
-                    // because the header moves with the drag handle, so when it starts overlapping the footer,
-                    // we need to account for that.
-                    const header = baseEl.querySelector('ion-header');
-                    if (header) {
-                        cachedFooterYPosition -= header.clientHeight;
-                    }
-                }
-            });
-            // Apply the pinning of styles after we've calculated everything
-            // so that we don't cause layouts to shift while calculating the footer positions.
-            // Otherwise, with multiple footers we'll end up capturing the wrong positions.
-            cachedFooterEls.forEach((cachedFooterEl) => {
-                // 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.
-                page === null || page === void 0 ? void 0 : page.style.setProperty('padding-bottom', `${footerHeights}px`);
-                // Apply positioning styles to keep footer at bottom
-                cachedFooterEl.classList.add('modal-footer-moving');
-                // Apply our preserved styles to pin the footer
-                cachedFooterEl.style.setProperty('position', 'absolute');
-                cachedFooterEl.style.setProperty('width', 'var(--pinned-width)');
-                cachedFooterEl.style.setProperty('height', 'var(--pinned-height)');
-                cachedFooterEl.style.setProperty('top', 'var(--pinned-top)');
-                cachedFooterEl.style.setProperty('left', 'var(--pinned-left)');
-                // Move the element to the body when everything else is done
-                document.body.appendChild(cachedFooterEl);
-            });
+            // 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);
         }
     };
     /**
@@ -338,16 +317,6 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
          * is not scrolled to the top.
          */
         if (!expandToScroll && detail.deltaY <= 0 && cachedScrollEl && cachedScrollEl.scrollTop > 0) {
-            /**
-             * If expand to scroll is disabled, we need to make sure we swap the footer position
-             * back to stationary so that it will collapse correctly if the modal is dismissed without
-             * dragging (e.g. through a dismiss button).
-             * This can cause issues if the user has a modal with content that can be dragged, as we'll
-             * swap to moving on drag and if we don't swap back here then the footer will get stuck.
-             */
-            if (!expandToScroll) {
-                swapFooterPosition('stationary');
-            }
             return;
         }
         /**