@ionic/core 8.8.20-dev.11787158518.168a2fea → 8.8.20-dev.11788449221.155f9f1e

package/dist/collection/components/menu-toggle/menu-toggle.js

@@ -3,45 +3,41 @@
  */
 import { Host, h } from "@stencil/core";
 import { menuController } from "../../utils/menu-controller/index";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 import { updateVisibility } from "./menu-toggle-util";
 /**
+ * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
+ * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ *
  * @slot - Content is placed inside the toggle to act as the click target.
  */
 export class MenuToggle {
-    visible = false;
-    /**
-     * Optional property that maps to a Menu's `menuId` prop.
-     * Can also be `start` or `end` for the menu side.
-     * This is used to find the correct menu to toggle.
-     *
-     * If this property is not used, `ion-menu-toggle` will toggle the
-     * first menu that is active.
-     */
-    menu;
-    /**
-     * Automatically hides the content when the corresponding menu is not active.
-     *
-     * By default, it's `true`. Change it to `false` in order to
-     * keep `ion-menu-toggle` always visible regardless the state of the menu.
-     */
-    autoHide = true;
+    constructor() {
+        this.visible = false;
+        /**
+         * Automatically hides the content when the corresponding menu is not active.
+         *
+         * By default, it's `true`. Change it to `false` in order to
+         * keep `ion-menu-toggle` always visible regardless the state of the menu.
+         */
+        this.autoHide = true;
+        this.onClick = () => {
+            return menuController.toggle(this.menu);
+        };
+    }
     connectedCallback() {
         this.visibilityChanged();
     }
     async visibilityChanged() {
         this.visible = await updateVisibility(this.menu);
     }
-    onClick = () => {
-        return menuController.toggle(this.menu);
-    };
     render() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const hidden = this.autoHide && !this.visible;
-        return (h(Host, { key: '76d21ea6493b8161860c941e3754fef1e20395cc', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
-                [mode]: true,
+        return (h(Host, { key: '9ef631d9ae370a8740e691d281863203bfdddc38', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+                [theme]: true,
                 'menu-toggle-hidden': hidden,
-            } }, h("slot", { key: '9383610fd3105e1928a38788eb596e313e2b07f8' })));
+            } }, h("slot", { key: 'f8d9dfc562ed625ae47ec771ef6b2ea04bc463f4' })));
     }
     static get is() { return "ion-menu-toggle"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,40 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { createAnimation } from "../../../utils/animation/animation";
+import { getElementRoot } from "../../../utils/helpers";
+import { createSheetEnterAnimation } from "./sheet";
+const createEnterAnimation = () => {
+    const backdropAnimation = createAnimation()
+        .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+        .beforeStyles({
+        'pointer-events': 'none',
+    })
+        .afterClearStyles(['pointer-events']);
+    const wrapperAnimation = createAnimation().keyframes([
+        { offset: 0, opacity: 0.01, transform: 'translateY(40px)' },
+        { offset: 1, opacity: 1, transform: `translateY(0px)` },
+    ]);
+    return { backdropAnimation, wrapperAnimation, contentAnimation: undefined };
+};
+/**
+ * Ionic Modal Enter Animation
+ */
+export const ionicEnterAnimation = (baseEl, opts) => {
+    const { currentBreakpoint, expandToScroll } = opts;
+    const root = getElementRoot(baseEl);
+    const { wrapperAnimation, backdropAnimation, contentAnimation } = currentBreakpoint !== undefined ? createSheetEnterAnimation(opts) : createEnterAnimation();
+    backdropAnimation.addElement(root.querySelector('ion-backdrop'));
+    wrapperAnimation.addElement(root.querySelector('.modal-wrapper'));
+    // 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')));
+    backdropAnimation.duration(300).easing('ease-out');
+    wrapperAnimation.duration(400).easing('cubic-bezier(0.32, 0.68, 0, 1)');
+    contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.duration(400).easing('cubic-bezier(0.32, 0.68, 0, 1)');
+    const baseAnimation = createAnimation().addElement(baseEl).addAnimation([backdropAnimation, wrapperAnimation]);
+    if (contentAnimation) {
+        baseAnimation.addAnimation(contentAnimation);
+    }
+    return baseAnimation;
+};

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

@@ -0,0 +1,28 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { createAnimation } from "../../../utils/animation/animation";
+import { getElementRoot } from "../../../utils/helpers";
+import { createSheetLeaveAnimation } from "./sheet";
+const createLeaveAnimation = () => {
+    const backdropAnimation = createAnimation().fromTo('opacity', 'var(--backdrop-opacity)', 0);
+    const wrapperAnimation = createAnimation().keyframes([
+        { offset: 0, opacity: 0.99, transform: `translateY(0px)` },
+        { offset: 1, opacity: 0, transform: 'translateY(40px)' },
+    ]);
+    return { backdropAnimation, wrapperAnimation };
+};
+/**
+ * Md Modal Leave Animation
+ */
+export const ionicLeaveAnimation = (baseEl, opts) => {
+    const { currentBreakpoint } = 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'));
+    backdropAnimation.duration(250).easing('ease-in');
+    wrapperAnimation.duration(400).easing('cubic-bezier(0.4, 0, 1, 1)');
+    const baseAnimation = createAnimation().addElement(baseEl).addAnimation([backdropAnimation, wrapperAnimation]);
+    return baseAnimation;
+};

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

@@ -26,7 +26,7 @@ export const iosEnterAnimation = (baseEl, opts) => {
     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?.addElement(baseEl.querySelector('.ion-page'));
+    !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)')

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

@@ -28,7 +28,7 @@ export const mdEnterAnimation = (baseEl, opts) => {
     wrapperAnimation.addElement(root.querySelector('.modal-wrapper'));
     // The content animation is only added if scrolling is enabled for
     // all the breakpoints.
-    !expandToScroll && contentAnimation?.addElement(baseEl.querySelector('.ion-page'));
+    !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)')

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

@@ -4,14 +4,20 @@
 import { createAnimation } from "../../../utils/animation/animation";
 import { getBackdropValueForSheet } from "../utils";
 export const createSheetEnterAnimation = (opts) => {
-    const { currentBreakpoint, backdropBreakpoint, expandToScroll } = opts;
+    const { currentBreakpoint, backdropBreakpoint, expandToScroll, staticBackdropOpacity } = opts;
     /**
      * If the backdropBreakpoint is undefined, then the backdrop
      * should always fade in. If the backdropBreakpoint came before the
      * current breakpoint, then the backdrop should be fading in.
      */
     const shouldShowBackdrop = backdropBreakpoint === undefined || backdropBreakpoint < currentBreakpoint;
-    const initialBackdrop = shouldShowBackdrop ? `calc(var(--backdrop-opacity) * ${currentBreakpoint})` : '0';
+    let initialBackdrop = '0';
+    if (staticBackdropOpacity) {
+        initialBackdrop = 'calc(var(--backdrop-opacity)';
+    }
+    else if (shouldShowBackdrop) {
+        initialBackdrop = `calc(var(--backdrop-opacity) * ${currentBreakpoint})`;
+    }
     const backdropAnimation = createAnimation('backdropAnimation').fromTo('opacity', 0, initialBackdrop);
     if (shouldShowBackdrop) {
         backdropAnimation

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

@@ -7,16 +7,17 @@ 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";
-export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange, onDragStart, onDragMove, onDragEnd) => {
+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
     const defaultBackdrop = [
         { offset: 0, opacity: 'var(--backdrop-opacity)' },
-        { offset: 1, opacity: 0.01 },
+        { offset: 1, opacity: usePhysicsBasedGesture ? 'var(--backdrop-opacity)' : 0.01 },
     ];
     const customBackdrop = [
         { offset: 0, opacity: 'var(--backdrop-opacity)' },
-        { offset: 1 - backdropBreakpoint, opacity: 0 },
-        { offset: 1, opacity: 0 },
+        { offset: 1 - backdropBreakpoint, opacity: usePhysicsBasedGesture ? 'var(--backdrop-opacity)' : 0 },
+        { offset: 1, opacity: usePhysicsBasedGesture ? 'var(--backdrop-opacity)' : 0 },
     ];
     const SheetDefaults = {
         WRAPPER_KEYFRAMES: [
@@ -31,7 +32,7 @@ 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 = contentEl?.scrollY ?? true;
+    const initialContentScrollY = (_a = contentEl === null || contentEl === void 0 ? void 0 : contentEl.scrollY) !== null && _a !== void 0 ? _a : true;
     const height = wrapperEl.clientHeight;
     let currentBreakpoint = initialBreakpoint;
     let offset = 0;
@@ -97,9 +98,9 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
                 cachedFooterEl.style.removeProperty('height');
                 cachedFooterEl.style.removeProperty('top');
                 cachedFooterEl.style.removeProperty('left');
-                page?.style.removeProperty('padding-bottom');
+                page === null || page === void 0 ? void 0 : page.style.removeProperty('padding-bottom');
                 // Move to page
-                page?.appendChild(cachedFooterEl);
+                page === null || page === void 0 ? void 0 : page.appendChild(cachedFooterEl);
             });
         }
         else {
@@ -143,7 +144,7 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
                 // 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?.style.setProperty('padding-bottom', `${footerHeights}px`);
+                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
@@ -168,7 +169,7 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
     if (wrapperAnimation && backdropAnimation) {
         wrapperAnimation.keyframes([...SheetDefaults.WRAPPER_KEYFRAMES]);
         backdropAnimation.keyframes([...SheetDefaults.BACKDROP_KEYFRAMES]);
-        contentAnimation?.keyframes([...SheetDefaults.CONTENT_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
@@ -208,12 +209,13 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         return true;
     };
     const onStart = (detail) => {
+        var _a;
         /**
          * Firefox automatically selects the header text during drag
          * due to the focusable wrapper (tabindex="-1"). Remove any
          * selection that may have occurred.
          */
-        window.getSelection()?.removeAllRanges();
+        (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
         /**
          * If canDismiss is anything other than `true`
          * then users should be able to swipe down
@@ -329,7 +331,9 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
             : step;
         offset = clamp(0.0001, processedStep, maxStep);
         animation.progressStep(offset);
-        const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
+        const snapBreakpoint = usePhysicsBasedGesture
+            ? calculateVelocitySnapBreakpoint(detail.deltaY, detail.velocityY, detail.currentY)
+            : calculatePositionSnapBreakpoint(detail.deltaY);
         const eventDetail = {
             currentY: detail.currentY,
             deltaY: detail.deltaY,
@@ -340,23 +344,15 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         onDragMove(eventDetail);
     };
     const onEnd = (detail) => {
-        const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
-        /**
-         * `snapBreakpoint === 0` is not enough on its own. `canDismiss: false`
-         * snaps to 0 but never dismisses, since `handleCanDismiss` returns early
-         * when canDismiss is not a function. A canDismiss function dismisses
-         * through `handleCanDismiss`, which awaits the callback, so the outcome
-         * is not known when this event is emitted.
-         */
-        const shouldPreventDismiss = canDismissBlocksGesture && snapBreakpoint === 0;
-        const isDismissing = shouldPreventDismiss ? typeof baseEl.canDismiss === 'function' : snapBreakpoint === 0;
+        const snapBreakpoint = usePhysicsBasedGesture
+            ? calculateVelocitySnapBreakpoint(detail.deltaY, detail.velocityY, detail.currentY)
+            : calculatePositionSnapBreakpoint(detail.deltaY);
         const eventDetail = {
             currentY: detail.currentY,
             deltaY: detail.deltaY,
             velocityY: detail.velocityY,
             progress: calculateProgress(detail.currentY),
             snapBreakpoint,
-            isDismissing,
         };
         /**
          * If expandToScroll is disabled, we should not allow the moveSheetToBreakpoint
@@ -372,11 +368,7 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
              * swap to moving on drag and if we don't swap back here then the footer will get stuck.
              */
             swapFooterPosition('stationary');
-            /**
-             * The sheet does not move in this case, so the gesture
-             * never dismisses the modal.
-             */
-            onDragEnd({ ...eventDetail, isDismissing: false });
+            onDragEnd(eventDetail);
             return;
         }
         moveSheetToBreakpoint({
@@ -401,6 +393,14 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
          */
         const shouldPreventDismiss = canDismiss && breakpoint === 0;
         const snapToBreakpoint = shouldPreventDismiss ? currentBreakpoint : breakpoint;
+        /**
+         * Detect snap-back behavior: when the snap target is the same as the current breakpoint,
+         * the user released before crossing the threshold to a new breakpoint.
+         * Apply different timing and easing for snap-back vs. snap-to-new.
+         */
+        const isSnapBack = snapToBreakpoint === currentBreakpoint;
+        const duration = usePhysicsBasedGesture ? (isSnapBack ? 300 : 400) : 500;
+        const easing = isSnapBack ? 'cubic-bezier(0.34, 1.4, 0.64, 1)' : 'cubic-bezier(0.32, 0.68, 0, 1)';
         const shouldRemainOpen = snapToBreakpoint !== 0;
         currentBreakpoint = 0;
         /**
@@ -415,11 +415,15 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
             backdropAnimation.keyframes([
                 {
                     offset: 0,
-                    opacity: `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(1 - breakpointOffset, backdropBreakpoint)})`,
+                    opacity: usePhysicsBasedGesture
+                        ? 'var(--backdrop-opacity)'
+                        : `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(1 - breakpointOffset, backdropBreakpoint)})`,
                 },
                 {
                     offset: 1,
-                    opacity: `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(snapToBreakpoint, backdropBreakpoint)})`,
+                    opacity: usePhysicsBasedGesture
+                        ? 'var(--backdrop-opacity)'
+                        : `calc(var(--backdrop-opacity) * ${getBackdropValueForSheet(snapToBreakpoint, backdropBreakpoint)})`,
                 },
             ]);
             if (contentAnimation) {
@@ -437,6 +441,12 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
             }
             animation.progressStep(0);
         }
+        /**
+         * Apply the appropriate easing curve for this snap behavior.
+         */
+        if (usePhysicsBasedGesture) {
+            animation.easing(easing);
+        }
         /**
          * Gesture should remain disabled until the
          * snapping animation completes.
@@ -491,7 +501,7 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
                         raf(() => {
                             wrapperAnimation.keyframes([...SheetDefaults.WRAPPER_KEYFRAMES]);
                             backdropAnimation.keyframes([...SheetDefaults.BACKDROP_KEYFRAMES]);
-                            contentAnimation?.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]);
+                            contentAnimation === null || contentAnimation === void 0 ? void 0 : contentAnimation.keyframes([...SheetDefaults.CONTENT_KEYFRAMES]);
                             animation.progressStart(true, 1 - snapToBreakpoint);
                             currentBreakpoint = snapToBreakpoint;
                             onBreakpointChange(currentBreakpoint);
@@ -526,7 +536,7 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
                  * be added every time onEnd runs.
                  */
             }, { oneTimeCallback: true })
-                .progressEnd(1, 0, animated ? 500 : 0);
+                .progressEnd(1, 0, animated ? duration : 0);
         });
     };
     /**
@@ -537,7 +547,7 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
      * @param deltaY The change in Y position since the gesture started.
      * @returns The snap breakpoint value.
      */
-    const calculateSnapBreakpoint = (deltaY) => {
+    const calculatePositionSnapBreakpoint = (deltaY) => {
         /**
          * Calculates the real-time vertical position of the modal.
          * We combine the wrapper's current bounding box position with the
@@ -557,6 +567,50 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         });
         return snapBreakpoint;
     };
+    /**
+     * Calculates the snap breakpoint using velocity-based logic.
+     * This provides a more intuitive and responsive sheet behavior for the Ionic theme.
+     *
+     * Rules:
+     * 1. Fast downward flick (> 500 px/s) always dismisses, regardless of position
+     * 2. Fast upward flick (> 400 px/s) snaps to the next breakpoint above
+     * 3. If dragged 40% below current snap point without fast upward flick, dismisses
+     * 4. Otherwise, falls back to position-based snap (closest breakpoint)
+     *
+     * @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) => {
+        // Convert velocity from px/ms to px/s for easier threshold comparison
+        const velocityYPerSecond = velocityY * 1000;
+        // Calculate current progress (0 = fully closed, 1 = fully expanded)
+        const currentProgress = calculateProgress(currentY);
+        // Rule 1: Fast downward flick always dismisses
+        if (velocityYPerSecond > 500) {
+            return minBreakpoint;
+        }
+        // Rule 2: Fast upward flick moves to next breakpoint above
+        if (velocityYPerSecond < -400) {
+            // Find next breakpoint above current position
+            const nextBreakpoint = breakpoints.find((bp) => bp > currentProgress);
+            // If no breakpoint above, stay at max breakpoint
+            return nextBreakpoint !== null && nextBreakpoint !== void 0 ? nextBreakpoint : maxBreakpoint;
+        }
+        // Rule 3: 40% dismissal rule (only if not flicking up and 0 breakpoint exists)
+        if (minBreakpoint === 0 && currentBreakpoint > 0) {
+            // 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) {
+                return 0;
+            }
+        }
+        // Rule 4: Fallback to position-based snap (existing logic)
+        return calculatePositionSnapBreakpoint(deltaY);
+    };
     /**
      * Calculates the progress of the swipe gesture.
      *

package/dist/collection/components/modal/gestures/swipe-to-close.js

@@ -67,13 +67,14 @@ export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismi
         return false;
     };
     const onStart = (detail) => {
+        var _a;
         const { deltaY } = detail;
         /**
          * Firefox automatically selects the header text during drag
          * due to the focusable wrapper (tabindex="-1"). Remove any
          * selection that may have occurred.
          */
-        window.getSelection()?.removeAllRanges();
+        (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
         /**
          * Get the initial scrollY value so
          * that we can correctly reset the scrollY
@@ -226,30 +227,17 @@ export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismi
          * check canDismiss. 25% was chosen
          * to avoid accidental swipes.
          */
-        const isAttemptingCanDismiss = isAttemptingDismissWithCanDismiss && clampedStep > maxStep / 4;
-        if (isAttemptingCanDismiss) {
+        if (isAttemptingDismissWithCanDismiss && clampedStep > maxStep / 4) {
             handleCanDismiss(el, animation);
         }
         else if (shouldComplete) {
             onDismiss();
         }
-        /**
-         * `shouldComplete` is not enough on its own, since it is always `false`
-         * when canDismiss blocks the gesture. `canDismiss: false` blocks it and
-         * never dismisses, because `handleCanDismiss` returns early when
-         * canDismiss is not a function. A canDismiss function dismisses through
-         * `handleCanDismiss`, which awaits the callback, so the outcome is not
-         * known when this event is emitted.
-         */
-        const isDismissing = isAttemptingDismissWithCanDismiss
-            ? isAttemptingCanDismiss && typeof el.canDismiss === 'function'
-            : shouldComplete;
         const eventDetail = {
             currentY: detail.currentY,
             deltaY: detail.deltaY,
             velocityY: detail.velocityY,
             progress: calculateProgress(el, detail.deltaY),
-            isDismissing,
         };
         onDragEnd(eventDetail);
     };