@ionic/core 8.6.1-dev.11749562115.1e681558 → 8.6.1-dev.11749572912.152b544d

package/components/ion-item-sliding.js

@@ -185,7 +185,6 @@ const ItemSliding = /*@__PURE__*/ proxyCustomElement(class ItemSliding extends H
         }
     }
     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
@@ -199,7 +198,7 @@ const ItemSliding = /*@__PURE__*/ proxyCustomElement(class ItemSliding extends H
              */
             // eslint-disable-next-line custom-rules/no-component-on-ready-method
             const option = item.componentOnReady !== undefined ? await item.componentOnReady() : item;
-            const side = isEndSide((_a = option.side) !== null && _a !== void 0 ? _a : option.getAttribute('side')) ? 'end' : 'start';
+            const side = isEndSide(option.side) ? 'end' : 'start';
             if (side === 'start') {
                 this.leftOptions = option;
                 sides |= 1 /* ItemSide.Start */;
@@ -397,7 +396,7 @@ const ItemSliding = /*@__PURE__*/ proxyCustomElement(class ItemSliding extends H
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'd812322c9fb5da4ee16e99dc38bfb24cb4590d03', class: {
+        return (h(Host, { key: '9880396ad79e06117d572a27f92c4b753d1e26db', class: {
                 [mode]: true,
                 'item-sliding-active-slide': this.state !== 2 /* SlidingState.Disabled */,
                 'item-sliding-active-options-end': (this.state & 8 /* SlidingState.End */) !== 0,

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 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 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;
+                    }
+                }
+            });
+            // 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,16 @@ 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-item-option_3.cjs.entry.js

@@ -282,7 +282,6 @@ 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
@@ -296,7 +295,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 = helpers.isEndSide((_a = option.side) !== null && _a !== void 0 ? _a : option.getAttribute('side')) ? 'end' : 'start';
+            const side = helpers.isEndSide(option.side) ? 'end' : 'start';
             if (side === 'start') {
                 this.leftOptions = option;
                 sides |= 1 /* ItemSide.Start */;
@@ -494,7 +493,7 @@ const ItemSliding = class {
     }
     render() {
         const mode = index.getIonMode(this);
-        return (index.h(index.Host, { key: 'd812322c9fb5da4ee16e99dc38bfb24cb4590d03', class: {
+        return (index.h(index.Host, { key: '9880396ad79e06117d572a27f92c4b753d1e26db', 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/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 cachedFooterEl = null;
+    let cachedFooterEls = null;
     let cachedFooterYPosition = null;
     let currentFooterState = null;
     const canDismissMaxStep = 0.95;
@@ -866,60 +866,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 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;
+                    }
+                }
+            });
+            // 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);
+            });
         }
     };
     /**
@@ -1111,6 +1132,16 @@ 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/collection/components/item-sliding/item-sliding.js

@@ -179,7 +179,6 @@ export class ItemSliding {
         }
     }
     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
@@ -193,7 +192,7 @@ export class ItemSliding {
              */
             // eslint-disable-next-line custom-rules/no-component-on-ready-method
             const option = item.componentOnReady !== undefined ? await item.componentOnReady() : item;
-            const side = isEndSide((_a = option.side) !== null && _a !== void 0 ? _a : option.getAttribute('side')) ? 'end' : 'start';
+            const side = isEndSide(option.side) ? 'end' : 'start';
             if (side === 'start') {
                 this.leftOptions = option;
                 sides |= 1 /* ItemSide.Start */;
@@ -391,7 +390,7 @@ export class ItemSliding {
     }
     render() {
         const mode = getIonMode(this);
-        return (h(Host, { key: 'd812322c9fb5da4ee16e99dc38bfb24cb4590d03', class: {
+        return (h(Host, { key: '9880396ad79e06117d572a27f92c4b753d1e26db', 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/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 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;
+                    }
+                }
+            });
+            // 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,16 @@ 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;
         }
         /**

package/dist/collection/utils/test/playwright/page/utils/set-content.js

@@ -30,20 +30,6 @@ export const setContent = async (page, html, testInfo, options) => {
         palette = options.palette;
     }
     const baseUrl = process.env.PLAYWRIGHT_TEST_BASE_URL;
-    // The Ionic bundle is included locally by default unless the test
-    // config passes in the importIonicFromCDN option. This is useful
-    // when testing with the CDN version of Ionic.
-    let ionicImports = `
-    <link href="${baseUrl}/css/ionic.bundle.css" rel="stylesheet" />
-    <script type="module" src="${baseUrl}/dist/ionic/ionic.esm.js"></script>
-  `;
-    if (options === null || options === void 0 ? void 0 : options.importIonicFromCDN) {
-        ionicImports = `
-      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />
-      <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
-      <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
-    `;
-    }
     const output = `
     <!DOCTYPE html>
     <html dir="${direction}" lang="en">
@@ -51,10 +37,11 @@ export const setContent = async (page, html, testInfo, options) => {
         <title>Ionic Playwright Test</title>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+        <link href="${baseUrl}/css/ionic.bundle.css" rel="stylesheet" />
         <link href="${baseUrl}/scripts/testing/styles.css" rel="stylesheet" />
         ${palette !== 'light' ? `<link href="${baseUrl}/css/palettes/${palette}.always.css" rel="stylesheet" />` : ''}
         <script src="${baseUrl}/scripts/testing/scripts.js"></script>
-        ${ionicImports}
+        <script type="module" src="${baseUrl}/dist/ionic/ionic.esm.js"></script>
         <script>
           window.Ionic = {
             config: {

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-06-10T13:30:20",
+  "timestamp": "2025-06-10T16:30:13",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.33.1",