@ionic/core 8.8.20-dev.11791394441.17aeb6fc → 8.8.20-dev.11791573097.1f843ab0

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

@@ -1036,6 +1036,21 @@ const mdLeaveAnimation = (baseEl, opts) => {
     return baseAnimation;
 };
 
+/** Gesture velocity arrives in pixels per millisecond; the thresholds below are per second. */
+const MILLISECONDS_PER_SECOND = 1000;
+/**
+ * Flick speeds for the ionic theme's physics-based gesture, in pixels per
+ * second. Both are magnitudes. Y grows downwards, so the upward threshold is
+ * negated where it is compared.
+ */
+const FLICK_DOWN_VELOCITY = 500;
+/**
+ * How far below its starting breakpoint a slow drag has to end to dismiss the
+ * sheet. 0.4 means the user dragged 40% of the way down from where they started.
+ */
+const DISMISS_PROGRESS_RATIO = 0.4;
+/** How far ahead, in milliseconds, a drag's velocity is projected when snapping. */
+const FLICK_PROJECTION_MS = 350;
 const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange, usePhysicsBasedGesture, onDragStart, onDragMove, onDragEnd) => {
     var _a;
     // Defaults for the sheet swipe animation
@@ -1062,6 +1077,11 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
     const contentEl = baseEl.querySelector('ion-content');
     // Cache the initial value so the gesture restores it instead of forcing scrolling on.
     const initialContentScrollY = (_a = contentEl === null || contentEl === void 0 ? void 0 : contentEl.scrollY) !== null && _a !== void 0 ? _a : true;
+    /**
+     * The height of the sheet the user actually sees. This comes from the wrapper
+     * rather than the host element, which is stretched to the full viewport no
+     * matter how tall the sheet itself is.
+     */
     const height = wrapperEl.clientHeight;
     let currentBreakpoint = initialBreakpoint;
     let offset = 0;
@@ -1360,27 +1380,23 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
             : step;
         offset = helpers.clamp(0.0001, processedStep, maxStep);
         animation.progressStep(offset);
-        const snapBreakpoint = usePhysicsBasedGesture
-            ? calculateVelocitySnapBreakpoint(detail.deltaY, detail.velocityY, detail.currentY)
-            : calculatePositionSnapBreakpoint(detail.deltaY);
+        const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY, detail.velocityY);
         const eventDetail = {
             currentY: detail.currentY,
             deltaY: detail.deltaY,
             velocityY: detail.velocityY,
-            progress: calculateProgress(detail.currentY),
+            progress: calculateEventProgress(detail.deltaY),
             snapBreakpoint: snapBreakpoint,
         };
         onDragMove(eventDetail);
     };
     const onEnd = (detail) => {
-        const snapBreakpoint = usePhysicsBasedGesture
-            ? calculateVelocitySnapBreakpoint(detail.deltaY, detail.velocityY, detail.currentY)
-            : calculatePositionSnapBreakpoint(detail.deltaY);
+        const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY, detail.velocityY);
         const eventDetail = {
             currentY: detail.currentY,
             deltaY: detail.deltaY,
             velocityY: detail.velocityY,
-            progress: calculateProgress(detail.currentY),
+            progress: calculateEventProgress(detail.deltaY),
             snapBreakpoint,
         };
         /**
@@ -1568,6 +1584,20 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
                 .progressEnd(1, 0, animated ? duration : 0);
         });
     };
+    /**
+     * Decides which breakpoint the sheet should settle on for the current drag.
+     *
+     * @param deltaY The change in Y position since the gesture started
+     * @param velocityY The velocity in pixels per millisecond
+     * @returns The snap breakpoint value
+     */
+    const calculateSnapBreakpoint = (deltaY, velocityY) => {
+        if (usePhysicsBasedGesture) {
+            return calculateVelocitySnapBreakpoint(deltaY, velocityY);
+        }
+        // Project the drag forward so a quick flick counts.
+        return calculatePositionSnapBreakpoint(deltaY + velocityY * FLICK_PROJECTION_MS);
+    };
     /**
      * Calculates the breakpoint based on the current deltaY.
      * This determines where the sheet should snap to when the user releases the
@@ -1577,16 +1607,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
      * @returns The snap breakpoint value.
      */
     const calculatePositionSnapBreakpoint = (deltaY) => {
-        /**
-         * Calculates the real-time vertical position of the modal.
-         * We combine the wrapper's current bounding box position with the
-         * gesture's deltaY to account for the physical movement during the drag.
-         */
-        const currentY = wrapperEl.getBoundingClientRect().top + deltaY;
-        /**
-         * Convert that pixel position back into a 0 to 1 progress value.
-         */
-        const currentProgress = calculateProgress(currentY);
+        const currentProgress = calculateProgress(deltaY);
         /**
          * Find and return the defined breakpoint that is closest to the
          * current progress.
@@ -1608,16 +1629,15 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
      *
      * @param deltaY The change in Y position since gesture started
      * @param velocityY The velocity in pixels per millisecond
-     * @param currentY The current Y position of the gesture
      * @returns The snap breakpoint value
      */
-    const calculateVelocitySnapBreakpoint = (deltaY, velocityY, currentY) => {
+    const calculateVelocitySnapBreakpoint = (deltaY, velocityY) => {
         // Convert velocity from px/ms to px/s for easier threshold comparison
-        const velocityYPerSecond = velocityY * 1000;
+        const velocityYPerSecond = velocityY * MILLISECONDS_PER_SECOND;
         // Calculate current progress (0 = fully closed, 1 = fully expanded)
-        const currentProgress = calculateProgress(currentY);
+        const currentProgress = calculateProgress(deltaY);
         // Rule 1: Fast downward flick always dismisses
-        if (velocityYPerSecond > 500) {
+        if (velocityYPerSecond > FLICK_DOWN_VELOCITY) {
             return minBreakpoint;
         }
         // Rule 2: Fast upward flick moves to next breakpoint above
@@ -1632,8 +1652,7 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
             // Calculate how far we've moved below the current snap point
             const distanceBelowSnap = currentBreakpoint - currentProgress;
             const percentageBelowSnap = distanceBelowSnap / currentBreakpoint;
-            // If dragged more than 40% below and not flicking up, dismiss
-            if (percentageBelowSnap > 0.4 && velocityYPerSecond <= 400) {
+            if (percentageBelowSnap > DISMISS_PROGRESS_RATIO) {
                 return 0;
             }
         }
@@ -1641,74 +1660,26 @@ const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, ba
         return calculatePositionSnapBreakpoint(deltaY);
     };
     /**
-     * Calculates the progress of the swipe gesture.
-     *
-     * The progress is a value between 0 and 1 that represents how far
-     * the swipe has progressed towards closing the modal.
+     * Calculates how open the sheet is part way through a gesture, on the same
+     * 0 to 1 scale as the breakpoints: 1 is fully open and 0 is fully closed.
      *
-     * A value closer to 1 means the modal is closer to being opened,
-     * while a value closer to 0 means the modal is closer to being closed.
-     *
-     * @param currentY The current Y position of the gesture
+     * @param deltaY The change in Y position since the gesture started
      * @returns The progress of the sheet gesture
      */
-    const calculateProgress = (currentY) => {
-        const minBreakpoint = breakpoints[0];
-        const maxBreakpoint = breakpoints[breakpoints.length - 1];
-        /**
-         * The lowest point the sheet can be dragged to aka the point at which
-         * the sheet is fully closed.
-         */
-        const maxY = convertBreakpointToY(minBreakpoint);
-        /**
-         * The highest point the sheet can be dragged to aka the point at which
-         * the sheet is fully open.
-         */
-        const minY = convertBreakpointToY(maxBreakpoint);
-        // The total distance between the fully open and fully closed positions.
-        const totalDistance = maxY - minY;
-        // The distance from the current position to the fully closed position.
-        const distanceFromBottom = maxY - currentY;
-        /**
-         * The progress represents how far the sheet is from the bottom relative
-         * to the total distance. When the user starts swiping up, the progress
-         * should be close to 1, and when the user has swiped all the way down,
-         * the progress should be close to 0.
-         */
-        const progress = distanceFromBottom / totalDistance;
+    const calculateProgress = (deltaY) => {
+        // Mirrors the animation step in onMove, so the snap matches where the sheet is drawn.
+        const progress = currentBreakpoint - deltaY / height;
         // Round to the nearest thousandth to avoid returning very small decimal
         const roundedProgress = Math.round(progress * 1000) / 1000;
-        return Math.max(0, Math.min(1, roundedProgress));
+        return helpers.clamp(0, roundedProgress, 1);
     };
     /**
-     * Converts a breakpoint value (0 to 1) into a pixel Y coordinate
-     * on the screen.
-     *
-     * @param breakpoint The breakpoint value (e.g., 0.5 for half-open)
-     * @returns The pixel Y coordinate on the screen
+     * Scales the progress from the lowest to the highest breakpoint, so the
+     * drag events report 0 at the lowest breakpoint and 1 at the highest.
      */
-    const convertBreakpointToY = (breakpoint) => {
-        const rect = baseEl.getBoundingClientRect();
-        const modalHeight = rect.height;
-        // The bottom of the screen.
-        const viewportBottom = window.innerHeight;
-        /**
-         * The active height is how much of the modal is actually showing
-         * on the screen for this specific breakpoint.
-         */
-        const activeHeight = modalHeight * breakpoint;
-        /**
-         * To find the Y coordinate, start at the bottom of the screen
-         * and move up by the active height of the modal.
-         *
-         * A breakpoint of 1.0 means the active height is the full modal height
-         * (fully open). A breakpoint of 0.0 means the active height is 0
-         * (fully closed).
-         *
-         * Since screen Y coordinates get smaller as you go up, we subtract the
-         * active height from the viewport bottom.
-         */
-        return viewportBottom - activeHeight;
+    const calculateEventProgress = (deltaY) => {
+        const progress = (calculateProgress(deltaY) - minBreakpoint) / (maxBreakpoint - minBreakpoint);
+        return helpers.clamp(0, progress, 1);
     };
     const gesture = index$1.createGesture({
         el: wrapperEl,

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

@@ -7,6 +7,22 @@ import { clamp, getElementRoot, raf } from "../../../utils/helpers";
 import { FOCUS_TRAP_DISABLE_CLASS } from "../../../utils/overlays";
 import { getBackdropValueForSheet } from "../utils";
 import { calculateSpringStep, canSwipeOnContent, handleCanDismiss } from "./utils";
+/** Gesture velocity arrives in pixels per millisecond; the thresholds below are per second. */
+const MILLISECONDS_PER_SECOND = 1000;
+/**
+ * Flick speeds for the ionic theme's physics-based gesture, in pixels per
+ * second. Both are magnitudes. Y grows downwards, so the upward threshold is
+ * negated where it is compared.
+ */
+const FLICK_DOWN_VELOCITY = 500;
+const FLICK_UP_VELOCITY = 400;
+/**
+ * How far below its starting breakpoint a slow drag has to end to dismiss the
+ * sheet. 0.4 means the user dragged 40% of the way down from where they started.
+ */
+const DISMISS_PROGRESS_RATIO = 0.4;
+/** How far ahead, in milliseconds, a drag's velocity is projected when snapping. */
+const FLICK_PROJECTION_MS = 350;
 export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange, usePhysicsBasedGesture, onDragStart, onDragMove, onDragEnd) => {
     var _a;
     // Defaults for the sheet swipe animation
@@ -33,6 +49,11 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
     const contentEl = baseEl.querySelector('ion-content');
     // Cache the initial value so the gesture restores it instead of forcing scrolling on.
     const initialContentScrollY = (_a = contentEl === null || contentEl === void 0 ? void 0 : contentEl.scrollY) !== null && _a !== void 0 ? _a : true;
+    /**
+     * The height of the sheet the user actually sees. This comes from the wrapper
+     * rather than the host element, which is stretched to the full viewport no
+     * matter how tall the sheet itself is.
+     */
     const height = wrapperEl.clientHeight;
     let currentBreakpoint = initialBreakpoint;
     let offset = 0;
@@ -331,27 +352,23 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
             : step;
         offset = clamp(0.0001, processedStep, maxStep);
         animation.progressStep(offset);
-        const snapBreakpoint = usePhysicsBasedGesture
-            ? calculateVelocitySnapBreakpoint(detail.deltaY, detail.velocityY, detail.currentY)
-            : calculatePositionSnapBreakpoint(detail.deltaY);
+        const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY, detail.velocityY);
         const eventDetail = {
             currentY: detail.currentY,
             deltaY: detail.deltaY,
             velocityY: detail.velocityY,
-            progress: calculateProgress(detail.currentY),
+            progress: calculateEventProgress(detail.deltaY),
             snapBreakpoint: snapBreakpoint,
         };
         onDragMove(eventDetail);
     };
     const onEnd = (detail) => {
-        const snapBreakpoint = usePhysicsBasedGesture
-            ? calculateVelocitySnapBreakpoint(detail.deltaY, detail.velocityY, detail.currentY)
-            : calculatePositionSnapBreakpoint(detail.deltaY);
+        const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY, detail.velocityY);
         const eventDetail = {
             currentY: detail.currentY,
             deltaY: detail.deltaY,
             velocityY: detail.velocityY,
-            progress: calculateProgress(detail.currentY),
+            progress: calculateEventProgress(detail.deltaY),
             snapBreakpoint,
         };
         /**
@@ -539,6 +556,20 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
                 .progressEnd(1, 0, animated ? duration : 0);
         });
     };
+    /**
+     * Decides which breakpoint the sheet should settle on for the current drag.
+     *
+     * @param deltaY The change in Y position since the gesture started
+     * @param velocityY The velocity in pixels per millisecond
+     * @returns The snap breakpoint value
+     */
+    const calculateSnapBreakpoint = (deltaY, velocityY) => {
+        if (usePhysicsBasedGesture) {
+            return calculateVelocitySnapBreakpoint(deltaY, velocityY);
+        }
+        // Project the drag forward so a quick flick counts.
+        return calculatePositionSnapBreakpoint(deltaY + velocityY * FLICK_PROJECTION_MS);
+    };
     /**
      * Calculates the breakpoint based on the current deltaY.
      * This determines where the sheet should snap to when the user releases the
@@ -548,16 +579,7 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
      * @returns The snap breakpoint value.
      */
     const calculatePositionSnapBreakpoint = (deltaY) => {
-        /**
-         * Calculates the real-time vertical position of the modal.
-         * We combine the wrapper's current bounding box position with the
-         * gesture's deltaY to account for the physical movement during the drag.
-         */
-        const currentY = wrapperEl.getBoundingClientRect().top + deltaY;
-        /**
-         * Convert that pixel position back into a 0 to 1 progress value.
-         */
-        const currentProgress = calculateProgress(currentY);
+        const currentProgress = calculateProgress(deltaY);
         /**
          * Find and return the defined breakpoint that is closest to the
          * current progress.
@@ -579,20 +601,19 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
      *
      * @param deltaY The change in Y position since gesture started
      * @param velocityY The velocity in pixels per millisecond
-     * @param currentY The current Y position of the gesture
      * @returns The snap breakpoint value
      */
-    const calculateVelocitySnapBreakpoint = (deltaY, velocityY, currentY) => {
+    const calculateVelocitySnapBreakpoint = (deltaY, velocityY) => {
         // Convert velocity from px/ms to px/s for easier threshold comparison
-        const velocityYPerSecond = velocityY * 1000;
+        const velocityYPerSecond = velocityY * MILLISECONDS_PER_SECOND;
         // Calculate current progress (0 = fully closed, 1 = fully expanded)
-        const currentProgress = calculateProgress(currentY);
+        const currentProgress = calculateProgress(deltaY);
         // Rule 1: Fast downward flick always dismisses
-        if (velocityYPerSecond > 500) {
+        if (velocityYPerSecond > FLICK_DOWN_VELOCITY) {
             return minBreakpoint;
         }
         // Rule 2: Fast upward flick moves to next breakpoint above
-        if (velocityYPerSecond < -400) {
+        if (velocityYPerSecond < -FLICK_UP_VELOCITY) {
             // Find next breakpoint above current position
             const nextBreakpoint = breakpoints.find((bp) => bp > currentProgress);
             // If no breakpoint above, stay at max breakpoint
@@ -603,8 +624,7 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
             // Calculate how far we've moved below the current snap point
             const distanceBelowSnap = currentBreakpoint - currentProgress;
             const percentageBelowSnap = distanceBelowSnap / currentBreakpoint;
-            // If dragged more than 40% below and not flicking up, dismiss
-            if (percentageBelowSnap > 0.4 && velocityYPerSecond <= 400) {
+            if (percentageBelowSnap > DISMISS_PROGRESS_RATIO) {
                 return 0;
             }
         }
@@ -612,74 +632,26 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         return calculatePositionSnapBreakpoint(deltaY);
     };
     /**
-     * Calculates the progress of the swipe gesture.
+     * Calculates how open the sheet is part way through a gesture, on the same
+     * 0 to 1 scale as the breakpoints: 1 is fully open and 0 is fully closed.
      *
-     * The progress is a value between 0 and 1 that represents how far
-     * the swipe has progressed towards closing the modal.
-     *
-     * A value closer to 1 means the modal is closer to being opened,
-     * while a value closer to 0 means the modal is closer to being closed.
-     *
-     * @param currentY The current Y position of the gesture
+     * @param deltaY The change in Y position since the gesture started
      * @returns The progress of the sheet gesture
      */
-    const calculateProgress = (currentY) => {
-        const minBreakpoint = breakpoints[0];
-        const maxBreakpoint = breakpoints[breakpoints.length - 1];
-        /**
-         * The lowest point the sheet can be dragged to aka the point at which
-         * the sheet is fully closed.
-         */
-        const maxY = convertBreakpointToY(minBreakpoint);
-        /**
-         * The highest point the sheet can be dragged to aka the point at which
-         * the sheet is fully open.
-         */
-        const minY = convertBreakpointToY(maxBreakpoint);
-        // The total distance between the fully open and fully closed positions.
-        const totalDistance = maxY - minY;
-        // The distance from the current position to the fully closed position.
-        const distanceFromBottom = maxY - currentY;
-        /**
-         * The progress represents how far the sheet is from the bottom relative
-         * to the total distance. When the user starts swiping up, the progress
-         * should be close to 1, and when the user has swiped all the way down,
-         * the progress should be close to 0.
-         */
-        const progress = distanceFromBottom / totalDistance;
+    const calculateProgress = (deltaY) => {
+        // Mirrors the animation step in onMove, so the snap matches where the sheet is drawn.
+        const progress = currentBreakpoint - deltaY / height;
         // Round to the nearest thousandth to avoid returning very small decimal
         const roundedProgress = Math.round(progress * 1000) / 1000;
-        return Math.max(0, Math.min(1, roundedProgress));
+        return clamp(0, roundedProgress, 1);
     };
     /**
-     * Converts a breakpoint value (0 to 1) into a pixel Y coordinate
-     * on the screen.
-     *
-     * @param breakpoint The breakpoint value (e.g., 0.5 for half-open)
-     * @returns The pixel Y coordinate on the screen
+     * Scales the progress from the lowest to the highest breakpoint, so the
+     * drag events report 0 at the lowest breakpoint and 1 at the highest.
      */
-    const convertBreakpointToY = (breakpoint) => {
-        const rect = baseEl.getBoundingClientRect();
-        const modalHeight = rect.height;
-        // The bottom of the screen.
-        const viewportBottom = window.innerHeight;
-        /**
-         * The active height is how much of the modal is actually showing
-         * on the screen for this specific breakpoint.
-         */
-        const activeHeight = modalHeight * breakpoint;
-        /**
-         * To find the Y coordinate, start at the bottom of the screen
-         * and move up by the active height of the modal.
-         *
-         * A breakpoint of 1.0 means the active height is the full modal height
-         * (fully open). A breakpoint of 0.0 means the active height is 0
-         * (fully closed).
-         *
-         * Since screen Y coordinates get smaller as you go up, we subtract the
-         * active height from the viewport bottom.
-         */
-        return viewportBottom - activeHeight;
+    const calculateEventProgress = (deltaY) => {
+        const progress = (calculateProgress(deltaY) - minBreakpoint) / (maxBreakpoint - minBreakpoint);
+        return clamp(0, progress, 1);
     };
     const gesture = createGesture({
         el: wrapperEl,

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-10-07T17:37:29",
+  "timestamp": "2026-10-09T19:15:20",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",