@ionic/core 8.4.4-dev.11741294920.1c3e822a → 8.4.4-dev.11741298262.12200f27

package/dist/collection/components/checkbox/checkbox.js

@@ -58,6 +58,7 @@ export class Checkbox {
         this.labelPlacement = 'start';
         this.justify = undefined;
         this.alignment = undefined;
+        this.required = false;
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
@@ -69,11 +70,11 @@ export class Checkbox {
         }
     }
     render() {
-        const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, } = this;
+        const { color, checked, disabled, el, getSVGPath, indeterminate, inheritedAttributes, inputId, justify, labelPlacement, name, value, alignment, required, } = this;
         const mode = getIonMode(this);
         const path = getSVGPath(mode, indeterminate);
         renderHiddenInput(true, el, name, checked ? value : '', disabled);
-        return (h(Host, { key: '6dc787e1100521d08c4900104e1a3e2f594e919f', "aria-checked": indeterminate ? 'mixed' : `${checked}`, class: createColorClasses(color, {
+        return (h(Host, { key: '07a5884062dd256b570e856270c74a5a09d2f2a5', "aria-checked": indeterminate ? 'mixed' : `${checked}`, class: createColorClasses(color, {
                 [mode]: true,
                 'in-item': hostContext('ion-item', el),
                 'checkbox-checked': checked,
@@ -83,10 +84,10 @@ export class Checkbox {
                 [`checkbox-justify-${justify}`]: justify !== undefined,
                 [`checkbox-alignment-${alignment}`]: alignment !== undefined,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }), onClick: this.onClick }, h("label", { key: '68222fb736a5ec3f2e488649b0e2ce0417dcb224', class: "checkbox-wrapper" }, h("input", Object.assign({ key: 'f12962d7e9b19c744cfdbdeccc67ae7f5d080281', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl) }, inheritedAttributes)), h("div", { key: 'c72df2699414b1e5a41a1bc267bc634f0c93dcff', class: {
+            }), onClick: this.onClick }, h("label", { key: '3439d546e8b60187421db698eab63a0bdd31c973', class: "checkbox-wrapper" }, h("input", Object.assign({ key: '9f45cf7dbdedcf01ec132c11e16979adb1aa102f', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, onFocus: () => this.onFocus(), onBlur: () => this.onBlur(), ref: (focusEl) => (this.focusEl = focusEl), required: required }, inheritedAttributes)), h("div", { key: '4e882f98939cc4b7c7ab7459c751d3f4bb2023fe', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': el.textContent === '',
-            }, part: "label" }, h("slot", { key: 'a2a80285178a7e0e3b536fc9ca26b8b444aa4307' })), h("div", { key: 'c2b05e0d1fe8df5dcd72858220b5ff51ecaee4cc', class: "native-wrapper" }, h("svg", { key: 'ee24913fded72258ebd9713654a6dba92a18fcf7', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
+            }, part: "label" }, h("slot", { key: '0abda81297a086d02c4a56af75005547971dfcfe' })), h("div", { key: '36489ea3f48a7d0ec46b77c243f9f253ef5c2b3b', class: "native-wrapper" }, h("svg", { key: '4c53b52f5e93752672a34eb6f180b75fa9af9046', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container" }, path)))));
     }
     getSVGPath(mode, indeterminate) {
         let path = indeterminate ? (h("path", { d: "M6 12L18 12", part: "mark" })) : (h("path", { d: "M5.9,12.5l3.8,3.8l8.8-8.8", part: "mark" }));
@@ -275,6 +276,24 @@ export class Checkbox {
                 },
                 "attribute": "alignment",
                 "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, screen readers will announce it as a required field. This property\nworks only for accessibility purposes, it will not prevent the form from\nsubmitting if the value is invalid."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -311,6 +311,7 @@
   justify-content: space-between;
   border-top: var(--border-width) var(--border-style) var(--border-color);
   font-size: 0.75rem;
+  white-space: normal;
 }
 
 /**
@@ -340,7 +341,7 @@
 
 .input-bottom .helper-text {
   display: block;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
 :host(.ion-touched.ion-invalid) .input-bottom .error-text {
@@ -359,7 +360,7 @@
    */
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
   white-space: nowrap;
   padding-inline-start: 16px;
 }

package/dist/collection/components/input/input.md.css

@@ -311,6 +311,7 @@
   justify-content: space-between;
   border-top: var(--border-width) var(--border-style) var(--border-color);
   font-size: 0.75rem;
+  white-space: normal;
 }
 
 /**
@@ -340,7 +341,7 @@
 
 .input-bottom .helper-text {
   display: block;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
 :host(.ion-touched.ion-invalid) .input-bottom .error-text {
@@ -359,7 +360,7 @@
    */
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
   white-space: nowrap;
   padding-inline-start: 16px;
 }
@@ -799,6 +800,10 @@
   --border-color: var(--highlight-color);
 }
 
+/**
+ * The bottom content should never have
+ * a border with the solid style.
+ */
 :host(.input-fill-solid) .input-bottom {
   border-top: none;
 }

package/dist/collection/components/modal/animations/ios.enter.js

@@ -13,22 +13,68 @@ const createEnterAnimation = () => {
     })
         .afterClearStyles(['pointer-events']);
     const wrapperAnimation = createAnimation().fromTo('transform', 'translateY(100vh)', 'translateY(0vh)');
-    return { backdropAnimation, wrapperAnimation };
+    return { backdropAnimation, wrapperAnimation, contentAnimation: undefined };
 };
 /**
  * iOS Modal Enter Animation for the Card presentation style
  */
 export const iosEnterAnimation = (baseEl, opts) => {
-    const { presentingEl, currentBreakpoint } = opts;
+    const { presentingEl, currentBreakpoint, expandToScroll } = opts;
     const root = getElementRoot(baseEl);
-    const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation();
+    const { wrapperAnimation, backdropAnimation, contentAnimation } = currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation();
     backdropAnimation.addElement(root.querySelector('ion-backdrop'));
     wrapperAnimation.addElement(root.querySelectorAll('.modal-wrapper, .modal-shadow')).beforeStyles({ opacity: 1 });
+    // The content animation is only added if scrolling is enabled for
+    // all the breakpoints.
+    !expandToScroll && (contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.addElement(baseEl.querySelector('.ion-page')));
     const baseAnimation = createAnimation('entering-base')
         .addElement(baseEl)
         .easing('cubic-bezier(0.32,0.72,0,1)')
         .duration(500)
-        .addAnimation(wrapperAnimation);
+        .addAnimation([wrapperAnimation])
+        .beforeAddWrite(() => {
+        if (expandToScroll) {
+            // Scroll can only be done when the modal is fully expanded.
+            return;
+        }
+        /**
+         * There are some browsers that causes flickering when
+         * dragging the content when scroll is enabled at every
+         * breakpoint. This is due to the wrapper element being
+         * transformed off the screen and having a snap animation.
+         *
+         * A workaround is to clone the footer element and append
+         * it outside of the wrapper element. This way, the footer
+         * is still visible and the drag can be done without
+         * flickering. The original footer is hidden until the modal
+         * is dismissed. This maintains the animation of the footer
+         * when the modal is dismissed.
+         *
+         * The workaround needs to be done before the animation starts
+         * so there are no flickering issues.
+         */
+        const ionFooter = baseEl.querySelector('ion-footer');
+        /**
+         * This check is needed to prevent more than one footer
+         * from being appended to the shadow root.
+         * Otherwise, iOS and MD enter animations would append
+         * the footer twice.
+         */
+        const ionFooterAlreadyAppended = baseEl.shadowRoot.querySelector('ion-footer');
+        if (ionFooter && !ionFooterAlreadyAppended) {
+            const footerHeight = ionFooter.clientHeight;
+            const clonedFooter = ionFooter.cloneNode(true);
+            baseEl.shadowRoot.appendChild(clonedFooter);
+            ionFooter.style.setProperty('display', 'none');
+            ionFooter.setAttribute('aria-hidden', 'true');
+            // Padding is added to prevent some content from being hidden.
+            const page = baseEl.querySelector('.ion-page');
+            page.style.setProperty('padding-bottom', `${footerHeight}px`);
+        }
+    });
+    if (contentAnimation) {
+        baseAnimation.addAnimation(contentAnimation);
+    }
     if (presentingEl) {
         const isMobile = window.innerWidth < 768;
         const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;

package/dist/collection/components/modal/animations/ios.leave.js

@@ -14,7 +14,7 @@ const createLeaveAnimation = () => {
  * iOS Modal Leave Animation
  */
 export const iosLeaveAnimation = (baseEl, opts, duration = 500) => {
-    const { presentingEl, currentBreakpoint } = opts;
+    const { presentingEl, currentBreakpoint, expandToScroll } = opts;
     const root = getElementRoot(baseEl);
     const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetLeaveAnimation(opts) : createLeaveAnimation();
     backdropAnimation.addElement(root.querySelector('ion-backdrop'));
@@ -23,7 +23,29 @@ export const iosLeaveAnimation = (baseEl, opts, duration = 500) => {
         .addElement(baseEl)
         .easing('cubic-bezier(0.32,0.72,0,1)')
         .duration(duration)
-        .addAnimation(wrapperAnimation);
+        .addAnimation(wrapperAnimation)
+        .beforeAddWrite(() => {
+        if (expandToScroll) {
+            // Scroll can only be done when the modal is fully expanded.
+            return;
+        }
+        /**
+         * If expandToScroll is disabled, we need to swap
+         * the visibility to the original, so the footer
+         * dismisses with the modal and doesn't stay
+         * until the modal is removed from the DOM.
+         */
+        const ionFooter = baseEl.querySelector('ion-footer');
+        if (ionFooter) {
+            const clonedFooter = baseEl.shadowRoot.querySelector('ion-footer');
+            ionFooter.style.removeProperty('display');
+            ionFooter.removeAttribute('aria-hidden');
+            clonedFooter.style.setProperty('display', 'none');
+            clonedFooter.setAttribute('aria-hidden', 'true');
+            const page = baseEl.querySelector('.ion-page');
+            page.style.removeProperty('padding-bottom');
+        }
+    });
     if (presentingEl) {
         const isMobile = window.innerWidth < 768;
         const hasCardModal = presentingEl.tagName === 'ION-MODAL' && presentingEl.presentingElement !== undefined;

package/dist/collection/components/modal/animations/md.enter.js

@@ -15,20 +15,67 @@ const createEnterAnimation = () => {
         { offset: 0, opacity: 0.01, transform: 'translateY(40px)' },
         { offset: 1, opacity: 1, transform: `translateY(0px)` },
     ]);
-    return { backdropAnimation, wrapperAnimation };
+    return { backdropAnimation, wrapperAnimation, contentAnimation: undefined };
 };
 /**
  * Md Modal Enter Animation
  */
 export const mdEnterAnimation = (baseEl, opts) => {
-    const { currentBreakpoint } = opts;
+    const { currentBreakpoint, expandToScroll } = opts;
     const root = getElementRoot(baseEl);
-    const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation();
+    const { wrapperAnimation, backdropAnimation, contentAnimation } = currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation();
     backdropAnimation.addElement(root.querySelector('ion-backdrop'));
     wrapperAnimation.addElement(root.querySelector('.modal-wrapper'));
-    return createAnimation()
+    // The content animation is only added if scrolling is enabled for
+    // all the breakpoints.
+    expandToScroll && (contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.addElement(baseEl.querySelector('.ion-page')));
+    const baseAnimation = createAnimation()
         .addElement(baseEl)
         .easing('cubic-bezier(0.36,0.66,0.04,1)')
         .duration(280)
-        .addAnimation([backdropAnimation, wrapperAnimation]);
+        .addAnimation([backdropAnimation, wrapperAnimation])
+        .beforeAddWrite(() => {
+        if (expandToScroll) {
+            // Scroll can only be done when the modal is fully expanded.
+            return;
+        }
+        /**
+         * There are some browsers that causes flickering when
+         * dragging the content when scroll is enabled at every
+         * breakpoint. This is due to the wrapper element being
+         * transformed off the screen and having a snap animation.
+         *
+         * A workaround is to clone the footer element and append
+         * it outside of the wrapper element. This way, the footer
+         * is still visible and the drag can be done without
+         * flickering. The original footer is hidden until the modal
+         * is dismissed. This maintains the animation of the footer
+         * when the modal is dismissed.
+         *
+         * The workaround needs to be done before the animation starts
+         * so there are no flickering issues.
+         */
+        const ionFooter = baseEl.querySelector('ion-footer');
+        /**
+         * This check is needed to prevent more than one footer
+         * from being appended to the shadow root.
+         * Otherwise, iOS and MD enter animations would append
+         * the footer twice.
+         */
+        const ionFooterAlreadyAppended = baseEl.shadowRoot.querySelector('ion-footer');
+        if (ionFooter && !ionFooterAlreadyAppended) {
+            const footerHeight = ionFooter.clientHeight;
+            const clonedFooter = ionFooter.cloneNode(true);
+            baseEl.shadowRoot.appendChild(clonedFooter);
+            ionFooter.style.setProperty('display', 'none');
+            ionFooter.setAttribute('aria-hidden', 'true');
+            // Padding is added to prevent some content from being hidden.
+            const page = baseEl.querySelector('.ion-page');
+            page.style.setProperty('padding-bottom', `${footerHeight}px`);
+        }
+    });
+    if (contentAnimation) {
+        baseAnimation.addAnimation(contentAnimation);
+    }
+    return baseAnimation;
 };

package/dist/collection/components/modal/animations/md.leave.js

@@ -16,13 +16,36 @@ const createLeaveAnimation = () => {
  * Md Modal Leave Animation
  */
 export const mdLeaveAnimation = (baseEl, opts) => {
-    const { currentBreakpoint } = opts;
+    const { currentBreakpoint, expandToScroll } = opts;
     const root = getElementRoot(baseEl);
     const { wrapperAnimation, backdropAnimation } = currentBreakpoint !== undefined ? createSheetLeaveAnimation(opts) : createLeaveAnimation();
     backdropAnimation.addElement(root.querySelector('ion-backdrop'));
     wrapperAnimation.addElement(root.querySelector('.modal-wrapper'));
-    return createAnimation()
+    const baseAnimation = createAnimation()
         .easing('cubic-bezier(0.47,0,0.745,0.715)')
         .duration(200)
-        .addAnimation([backdropAnimation, wrapperAnimation]);
+        .addAnimation([backdropAnimation, wrapperAnimation])
+        .beforeAddWrite(() => {
+        if (expandToScroll) {
+            // Scroll can only be done when the modal is fully expanded.
+            return;
+        }
+        /**
+         * If expandToScroll is disabled, we need to swap
+         * the visibility to the original, so the footer
+         * dismisses with the modal and doesn't stay
+         * until the modal is removed from the DOM.
+         */
+        const ionFooter = baseEl.querySelector('ion-footer');
+        if (ionFooter) {
+            const clonedFooter = baseEl.shadowRoot.querySelector('ion-footer');
+            ionFooter.style.removeProperty('display');
+            ionFooter.removeAttribute('aria-hidden');
+            clonedFooter.style.setProperty('display', 'none');
+            clonedFooter.setAttribute('aria-hidden', 'true');
+            const page = baseEl.querySelector('.ion-page');
+            page.style.removeProperty('padding-bottom');
+        }
+    });
+    return baseAnimation;
 };

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

@@ -4,7 +4,7 @@
 import { createAnimation } from "../../../utils/animation/animation";
 import { getBackdropValueForSheet } from "../utils";
 export const createSheetEnterAnimation = (opts) => {
-    const { currentBreakpoint, backdropBreakpoint } = opts;
+    const { currentBreakpoint, backdropBreakpoint, expandToScroll } = opts;
     /**
      * If the backdropBreakpoint is undefined, then the backdrop
      * should always fade in. If the backdropBreakpoint came before the
@@ -24,7 +24,16 @@ export const createSheetEnterAnimation = (opts) => {
         { offset: 0, opacity: 1, transform: 'translateY(100%)' },
         { offset: 1, opacity: 1, transform: `translateY(${100 - currentBreakpoint * 100}%)` },
     ]);
-    return { wrapperAnimation, backdropAnimation };
+    /**
+     * This allows the content to be scrollable at any breakpoint.
+     */
+    const contentAnimation = !expandToScroll
+        ? createAnimation('contentAnimation').keyframes([
+            { offset: 0, opacity: 1, maxHeight: `${(1 - currentBreakpoint) * 100}%` },
+            { offset: 1, opacity: 1, maxHeight: `${currentBreakpoint * 100}%` },
+        ])
+        : undefined;
+    return { wrapperAnimation, backdropAnimation, contentAnimation };
 };
 export const createSheetLeaveAnimation = (opts) => {
     const { currentBreakpoint, backdropBreakpoint } = opts;

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

@@ -7,7 +7,7 @@ import { clamp, raf, getElementRoot } from "../../../utils/helpers";
 import { FOCUS_TRAP_DISABLE_CLASS } from "../../../utils/overlays";
 import { getBackdropValueForSheet } from "../utils";
 import { calculateSpringStep, handleCanDismiss } from "./utils";
-export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], getCurrentBreakpoint, onDismiss, onBreakpointChange) => {
+export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange) => {
     // Defaults for the sheet swipe animation
     const defaultBackdrop = [
         { offset: 0, opacity: 'var(--backdrop-opacity)' },
@@ -24,6 +24,10 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
             { offset: 1, transform: 'translateY(100%)' },
         ],
         BACKDROP_KEYFRAMES: backdropBreakpoint !== 0 ? customBackdrop : defaultBackdrop,
+        CONTENT_KEYFRAMES: [
+            { offset: 0, maxHeight: '100%' },
+            { offset: 1, maxHeight: '0%' },
+        ],
     };
     const contentEl = baseEl.querySelector('ion-content');
     const height = wrapperEl.clientHeight;
@@ -31,10 +35,11 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
     let offset = 0;
     let canDismissBlocksGesture = false;
     const canDismissMaxStep = 0.95;
-    const wrapperAnimation = animation.childAnimations.find((ani) => ani.id === 'wrapperAnimation');
-    const backdropAnimation = animation.childAnimations.find((ani) => ani.id === 'backdropAnimation');
     const maxBreakpoint = breakpoints[breakpoints.length - 1];
     const minBreakpoint = breakpoints[0];
+    const wrapperAnimation = animation.childAnimations.find((ani) => ani.id === 'wrapperAnimation');
+    const backdropAnimation = animation.childAnimations.find((ani) => ani.id === 'backdropAnimation');
+    const contentAnimation = animation.childAnimations.find((ani) => ani.id === 'contentAnimation');
     const enableBackdrop = () => {
         baseEl.style.setProperty('pointer-events', 'auto');
         backdropEl.style.setProperty('pointer-events', 'auto');
@@ -57,6 +62,31 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
          */
         baseEl.classList.add(FOCUS_TRAP_DISABLE_CLASS);
     };
+    /**
+     * Toggles the visible modal footer when `expandToScroll` is disabled.
+     * @param footer The footer to show.
+     */
+    const swapFooterVisibility = (footer) => {
+        const originalFooter = baseEl.querySelector('ion-footer');
+        if (!originalFooter) {
+            return;
+        }
+        const clonedFooter = wrapperEl.nextElementSibling;
+        const footerToHide = footer === 'original' ? clonedFooter : originalFooter;
+        const footerToShow = footer === 'original' ? originalFooter : clonedFooter;
+        footerToShow.style.removeProperty('display');
+        footerToShow.removeAttribute('aria-hidden');
+        const page = baseEl.querySelector('.ion-page');
+        if (footer === 'original') {
+            page.style.removeProperty('padding-bottom');
+        }
+        else {
+            const pagePadding = footerToShow.clientHeight;
+            page.style.setProperty('padding-bottom', `${pagePadding}px`);
+        }
+        footerToHide.style.setProperty('display', 'none');
+        footerToHide.setAttribute('aria-hidden', 'true');
+    };
     /**
      * After the entering animation completes,
      * we need to set the animation to go from
@@ -68,6 +98,7 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
     if (wrapperAnimation && backdropAnimation) {
         wrapperAnimation.keyframes([...SheetDefaults.WRAPPER_KEYFRAMES]);
         backdropAnimation.keyframes([...SheetDefaults.BACKDROP_KEYFRAMES]);
+        contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]);
         animation.progressStart(true, 1 - currentBreakpoint);
         /**
          * If backdrop is not enabled, then content
@@ -84,7 +115,7 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
             disableBackdrop();
         }
     }
-    if (contentEl && currentBreakpoint !== maxBreakpoint) {
+    if (contentEl && currentBreakpoint !== maxBreakpoint && expandToScroll) {
         contentEl.scrollY = false;
     }
     const canStart = (detail) => {
@@ -98,6 +129,13 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
          */
         const contentEl = findClosestIonContent(detail.event.target);
         currentBreakpoint = getCurrentBreakpoint();
+        /**
+         * If we have expandToScroll disabled, we should not allow the swipe gesture to start
+         * if the content is being swiped.
+         */
+        if (!expandToScroll && contentEl) {
+            return false;
+        }
         if (currentBreakpoint === 1 && contentEl) {
             /**
              * The modal should never swipe to close on the content with a refresher.
@@ -128,6 +166,15 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
          * Remove undefined check
          */
         canDismissBlocksGesture = baseEl.canDismiss !== undefined && baseEl.canDismiss !== true && minBreakpoint === 0;
+        /**
+         * If expandToScroll is disabled, we need to swap
+         * the footer visibility to the original, so if the modal
+         * is dismissed, the footer dismisses with the modal
+         * and doesn't stay on the screen after the modal is gone.
+         */
+        if (!expandToScroll) {
+            swapFooterVisibility('original');
+        }
         /**
          * If we are pulling down, then it is possible we are pulling on the content.
          * We do not want scrolling to happen at the same time as the gesture.
@@ -243,6 +290,19 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
                     opacity: `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(snapToBreakpoint, backdropBreakpoint)})`,
                 },
             ]);
+            if (contentAnimation) {
+                /**
+                 * The modal content should scroll at any breakpoint when expandToScroll
+                 * is disabled. In order to do this, the content needs to be completely
+                 * viewable so scrolling can access everything. Otherwise, the default
+                 * behavior would show the content off the screen and only allow
+                 * scrolling when the sheet is fully expanded.
+                 */
+                contentAnimation.keyframes([
+                    { offset: 0, maxHeight: `${(1 - breakpointOffset) * 100}%` },
+                    { offset: 1, maxHeight: `${snapToBreakpoint * 100}%` },
+                ]);
+            }
             animation.progressStep(0);
         }
         /**
@@ -250,6 +310,14 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
          * snapping animation completes.
          */
         gesture.enable(false);
+        /**
+         * If expandToScroll is disabled, we need to swap
+         * the footer visibility to the cloned one so the footer
+         * doesn't flicker when the sheet's height is animated.
+         */
+        if (!expandToScroll && shouldRemainOpen) {
+            swapFooterVisibility('cloned');
+        }
         if (shouldPreventDismiss) {
             handleCanDismiss(baseEl, animation);
         }
@@ -257,13 +325,13 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
             onDismiss();
         }
         /**
-         * If the sheet is going to be fully expanded then we should enable
-         * scrolling immediately. The sheet modal animation takes ~500ms to finish
-         * so if we wait until then there is a visible delay for when scrolling is
-         * re-enabled. Native iOS allows for scrolling on the sheet modal as soon
-         * as the gesture is released, so we align with that.
+         * Enables scrolling immediately if the sheet is about to fully expand
+         * or if it allows scrolling at any breakpoint. Without this, there would
+         * be a ~500ms delay while the modal animation completes, causing a
+         * noticeable lag. Native iOS allows scrolling as soon as the gesture is
+         * released, so we align with that behavior.
          */
-        if (contentEl && snapToBreakpoint === breakpoints[breakpoints.length - 1]) {
+        if (contentEl && (snapToBreakpoint === breakpoints[breakpoints.length - 1] || !expandToScroll)) {
             contentEl.scrollY = true;
         }
         return new Promise((resolve) => {
@@ -281,6 +349,7 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
                         raf(() => {
                             wrapperAnimation.keyframes([...SheetDefaults.WRAPPER_KEYFRAMES]);
                             backdropAnimation.keyframes([...SheetDefaults.BACKDROP_KEYFRAMES]);
+                            contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]);
                             animation.progressStart(true, 1 - snapToBreakpoint);
                             currentBreakpoint = snapToBreakpoint;
                             onBreakpointChange(currentBreakpoint);

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

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