@ionic/core 8.6.1-dev.11749648223.169ce853 → 8.6.1-dev.11749649767.15f41148

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 cachedFooterEl = null;
+    let cachedFooterEls = null;
     let cachedFooterYPosition = null;
     let currentFooterState = null;
     const canDismissMaxStep = 0.95;
@@ -72,60 +72,81 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
      * @param newPosition Whether the footer is in a moving or stationary position.
      */
     const swapFooterPosition = (newPosition) => {
-        if (!cachedFooterEl) {
-            cachedFooterEl = baseEl.querySelector('ion-footer');
-            if (!cachedFooterEl) {
+        if (!cachedFooterEls) {
+            cachedFooterEls = Array.from(baseEl.querySelectorAll('ion-footer'));
+            if (!cachedFooterEls.length) {
                 return;
             }
         }
         const page = baseEl.querySelector('.ion-page');
         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);
+            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);
+            });
         }
         else {
-            // 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);
+            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);
+            });
         }
     };
     /**
@@ -317,6 +338,14 @@ 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.
+             */
+            swapFooterPosition('stationary');
             return;
         }
         /**

package/dist/collection/components/reorder-group/reorder-group.js

@@ -53,7 +53,7 @@ export class ReorderGroup {
         }
     }
     /**
-     * Completes the reorder operation. Must be called by the `ionReorderEnd` event.
+     * Completes the reorder operation. Must be called by the `ionItemReorder` event.
      *
      * If a list of items is passed, the list will be reordered and returned in the
      * proper order.
@@ -120,7 +120,6 @@ export class ReorderGroup {
         this.state = 1 /* ReorderGroupState.Active */;
         item.classList.add(ITEM_REORDER_SELECTED);
         hapticSelectionStart();
-        this.ionReorderStart.emit();
     }
     onMove(ev) {
         const selectedItem = this.selectedItemEl;
@@ -135,7 +134,6 @@ export class ReorderGroup {
         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);
@@ -145,10 +143,6 @@ export class ReorderGroup {
         }
         // Update selected item position
         selectedItem.style.transform = `translateY(${deltaY}px)`;
-        this.ionReorderMove.emit({
-            from: fromIndex,
-            to: toIndex,
-        });
     }
     onEnd() {
         const selectedItemEl = this.selectedItemEl;
@@ -160,23 +154,14 @@ export class ReorderGroup {
         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();
     }
@@ -256,7 +241,7 @@ export class ReorderGroup {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '8f47e24dfc7b8ef53ad3f5816fa13a8fa07de2a6', class: {
+        return (h(Host, { key: 'f30613b361c5c3095b7928a92fb4b1e8d6eff600', class: {
                 [mode]: true,
                 'reorder-enabled': !this.disabled,
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
@@ -310,11 +295,8 @@ export class ReorderGroup {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "Use `ionReorderEnd` instead. The new event is emitted\nat the end of every reorder gesture, even if the positions do not\nchange. If you were accessing `event.detail.from` or `event.detail.to`,\nyou should now add `undefined` checks as they can be `undefined` in\n`ionReorderEnd`."
-                        }],
-                    "text": "TODO(FW-6590): Remove this in a major release."
+                    "tags": [],
+                    "text": "Event that needs to be listened to in order to complete the reorder action.\nOnce the event has been emitted, the `complete()` method then needs\nto be called in order to finalize the reorder action."
                 },
                 "complexType": {
                     "original": "ItemReorderEventDetail",
@@ -327,63 +309,6 @@ export class ReorderGroup {
                         }
                     }
                 }
-            }, {
-                "method": "ionReorderStart",
-                "name": "ionReorderStart",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Event that is emitted when the reorder gesture starts."
-                },
-                "complexType": {
-                    "original": "void",
-                    "resolved": "void",
-                    "references": {}
-                }
-            }, {
-                "method": "ionReorderMove",
-                "name": "ionReorderMove",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Event that is emitted as the reorder gesture moves."
-                },
-                "complexType": {
-                    "original": "ReorderMoveEventDetail",
-                    "resolved": "ReorderMoveEventDetail",
-                    "references": {
-                        "ReorderMoveEventDetail": {
-                            "location": "import",
-                            "path": "./reorder-group-interface",
-                            "id": "src/components/reorder-group/reorder-group-interface.ts::ReorderMoveEventDetail"
-                        }
-                    }
-                }
-            }, {
-                "method": "ionReorderEnd",
-                "name": "ionReorderEnd",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Event that is emitted when the reorder gesture ends.\nThe from and to properties are only available if the reorder gesture\nmoved the item. If the item did not move, the from and to properties\nwill be undefined.\nOnce the event has been emitted, the `complete()` method then needs\nto be called in order to finalize the reorder action."
-                },
-                "complexType": {
-                    "original": "ReorderEndEventDetail",
-                    "resolved": "ReorderEndEventDetail",
-                    "references": {
-                        "ReorderEndEventDetail": {
-                            "location": "import",
-                            "path": "./reorder-group-interface",
-                            "id": "src/components/reorder-group/reorder-group-interface.ts::ReorderEndEventDetail"
-                        }
-                    }
-                }
             }];
     }
     static get methods() {
@@ -405,7 +330,7 @@ export class ReorderGroup {
                     "return": "Promise<any>"
                 },
                 "docs": {
-                    "text": "Completes the reorder operation. Must be called by the `ionReorderEnd` event.\n\nIf a list of items is passed, the list will be reordered and returned in the\nproper order.\n\nIf no parameters are passed or if `true` is passed in, the reorder will complete\nand the item will remain in the position it was dragged to. If `false` is passed,\nthe reorder will complete and the item will bounce back to its original position.",
+                    "text": "Completes the reorder operation. Must be called by the `ionItemReorder` event.\n\nIf a list of items is passed, the list will be reordered and returned in the\nproper order.\n\nIf no parameters are passed or if `true` is passed in, the reorder will complete\nand the item will remain in the position it was dragged to. If `false` is passed,\nthe reorder will complete and the item will bounce back to its original position.",
                     "tags": [{
                             "name": "param",
                             "text": "listOrReorder A list of items to be sorted and returned in the new order or a\nboolean of whether or not the reorder should reposition the item."

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-06-11T13:25:15",
+  "timestamp": "2025-06-11T13:51:12",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.33.1",
@@ -27019,7 +27019,7 @@
               "docs": "A list of items to be sorted and returned in the new order or a\nboolean of whether or not the reorder should reposition the item."
             }
           ],
-          "docs": "Completes the reorder operation. Must be called by the `ionReorderEnd` event.\n\nIf a list of items is passed, the list will be reordered and returned in the\nproper order.\n\nIf no parameters are passed or if `true` is passed in, the reorder will complete\nand the item will remain in the position it was dragged to. If `false` is passed,\nthe reorder will complete and the item will bounce back to its original position.",
+          "docs": "Completes the reorder operation. Must be called by the `ionItemReorder` event.\n\nIf a list of items is passed, the list will be reordered and returned in the\nproper order.\n\nIf no parameters are passed or if `true` is passed in, the reorder will complete\nand the item will remain in the position it was dragged to. If `false` is passed,\nthe reorder will complete and the item will bounce back to its original position.",
           "docsTags": [
             {
               "name": "param",
@@ -27046,67 +27046,7 @@
           },
           "cancelable": true,
           "composed": true,
-          "docs": "TODO(FW-6590): Remove this in a major release.",
-          "docsTags": [
-            {
-              "name": "deprecated",
-              "text": "Use `ionReorderEnd` instead. The new event is emitted\nat the end of every reorder gesture, even if the positions do not\nchange. If you were accessing `event.detail.from` or `event.detail.to`,\nyou should now add `undefined` checks as they can be `undefined` in\n`ionReorderEnd`."
-            }
-          ],
-          "deprecation": "Use `ionReorderEnd` instead. The new event is emitted\nat the end of every reorder gesture, even if the positions do not\nchange. If you were accessing `event.detail.from` or `event.detail.to`,\nyou should now add `undefined` checks as they can be `undefined` in\n`ionReorderEnd`."
-        },
-        {
-          "event": "ionReorderEnd",
-          "detail": "ReorderEndEventDetail",
-          "bubbles": true,
-          "complexType": {
-            "original": "ReorderEndEventDetail",
-            "resolved": "ReorderEndEventDetail",
-            "references": {
-              "ReorderEndEventDetail": {
-                "location": "import",
-                "path": "./reorder-group-interface",
-                "id": "src/components/reorder-group/reorder-group-interface.ts::ReorderEndEventDetail"
-              }
-            }
-          },
-          "cancelable": true,
-          "composed": true,
-          "docs": "Event that is emitted when the reorder gesture ends.\nThe from and to properties are only available if the reorder gesture\nmoved the item. If the item did not move, the from and to properties\nwill be undefined.\nOnce the event has been emitted, the `complete()` method then needs\nto be called in order to finalize the reorder action.",
-          "docsTags": []
-        },
-        {
-          "event": "ionReorderMove",
-          "detail": "ReorderMoveEventDetail",
-          "bubbles": true,
-          "complexType": {
-            "original": "ReorderMoveEventDetail",
-            "resolved": "ReorderMoveEventDetail",
-            "references": {
-              "ReorderMoveEventDetail": {
-                "location": "import",
-                "path": "./reorder-group-interface",
-                "id": "src/components/reorder-group/reorder-group-interface.ts::ReorderMoveEventDetail"
-              }
-            }
-          },
-          "cancelable": true,
-          "composed": true,
-          "docs": "Event that is emitted as the reorder gesture moves.",
-          "docsTags": []
-        },
-        {
-          "event": "ionReorderStart",
-          "detail": "void",
-          "bubbles": true,
-          "complexType": {
-            "original": "void",
-            "resolved": "void",
-            "references": {}
-          },
-          "cancelable": true,
-          "composed": true,
-          "docs": "Event that is emitted when the reorder gesture starts.",
+          "docs": "Event that needs to be listened to in order to complete the reorder action.\nOnce the event has been emitted, the `complete()` method then needs\nto be called in order to finalize the reorder action.",
           "docsTags": []
         }
       ],
@@ -37526,16 +37466,6 @@
       "docstring": "",
       "path": "src/components/reorder-group/reorder-group-interface.ts"
     },
-    "src/components/reorder-group/reorder-group-interface.ts::ReorderMoveEventDetail": {
-      "declaration": "export interface ReorderMoveEventDetail {\n  from: number;\n  to: number;\n}",
-      "docstring": "",
-      "path": "src/components/reorder-group/reorder-group-interface.ts"
-    },
-    "src/components/reorder-group/reorder-group-interface.ts::ReorderEndEventDetail": {
-      "declaration": "export interface ReorderEndEventDetail {\n  from?: number;\n  to?: number;\n  complete: (data?: boolean | any[]) => any;\n}",
-      "docstring": "",
-      "path": "src/components/reorder-group/reorder-group-interface.ts"
-    },
     "src/components/route/route-interface.ts::NavigationHookCallback": {
       "declaration": "() => NavigationHookResult | Promise<NavigationHookResult>",
       "docstring": "",

package/dist/esm/ion-item-option_3.entry.js

@@ -280,6 +280,7 @@ const ItemSliding = class {
         }
     }
     async updateOptions() {
+        var _a;
         const options = this.el.querySelectorAll('ion-item-options');
         let sides = 0;
         // Reset left and right options in case they were removed
@@ -293,7 +294,7 @@ const ItemSliding = class {
              */
             // 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) ? 'end' : 'start';
+            const side = isEndSide((_a = option.side) !== null && _a !== void 0 ? _a : option.getAttribute('side')) ? 'end' : 'start';
             if (side === 'start') {
                 this.leftOptions = option;
                 sides |= 1 /* ItemSide.Start */;
@@ -491,7 +492,7 @@ const ItemSliding = class {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: '9880396ad79e06117d572a27f92c4b753d1e26db', class: {
+        return (h(Host, { key: 'd812322c9fb5da4ee16e99dc38bfb24cb4590d03', class: {
                 [mode]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,

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

@@ -827,7 +827,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
     let offset = 0;
     let canDismissBlocksGesture = false;
     let cachedScrollEl = null;
-    let cachedFooterEl = null;
+    let cachedFooterEls = null;
     let cachedFooterYPosition = null;
     let currentFooterState = null;
     const canDismissMaxStep = 0.95;
@@ -864,60 +864,81 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
      * @param newPosition Whether the footer is in a moving or stationary position.
      */
     const swapFooterPosition = (newPosition) => {
-        if (!cachedFooterEl) {
-            cachedFooterEl = baseEl.querySelector('ion-footer');
-            if (!cachedFooterEl) {
+        if (!cachedFooterEls) {
+            cachedFooterEls = Array.from(baseEl.querySelectorAll('ion-footer'));
+            if (!cachedFooterEls.length) {
                 return;
             }
         }
         const page = baseEl.querySelector('.ion-page');
         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);
+            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);
+            });
         }
         else {
-            // 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);
+            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);
+            });
         }
     };
     /**
@@ -1109,6 +1130,14 @@ 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.
+             */
+            swapFooterPosition('stationary');
             return;
         }
         /**