@ionic/core 8.8.5 → 8.8.6-dev.11777490150.1970e4f2

package/dist/collection/components/menu-button/menu-button.ios.css

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -53,6 +59,12 @@
  *   }
  * }
  */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -108,6 +120,28 @@
  *   }
  * }
  */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
 :host {
   /**
    * @prop --border-radius: Border radius of the menu button
@@ -143,18 +177,18 @@
 
 .button-native {
   border-radius: var(--border-radius);
+  color: inherit;
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
+  text-align: inherit;
   text-decoration: inherit;
   text-indent: inherit;
   text-overflow: inherit;
   text-transform: inherit;
-  text-align: inherit;
   white-space: inherit;
-  color: inherit;
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
@@ -216,12 +250,6 @@ ion-icon {
   display: none;
 }
 
-:host(.menu-button-disabled) {
-  cursor: default;
-  opacity: 0.5;
-  pointer-events: none;
-}
-
 :host(.ion-focused) .button-native {
   color: var(--color-focused);
 }
@@ -231,8 +259,8 @@ ion-icon {
 }
 
 .button-native::after {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -249,17 +277,23 @@ ion-icon {
     opacity: var(--background-hover-opacity, 0);
   }
 }
-:host(.ion-color) .button-native {
-  color: var(--ion-color-base);
-}
-
 :host(.in-toolbar:not(.in-toolbar-color)) {
   color: var(--ion-toolbar-color, var(--color));
 }
 
+:host(.menu-button-disabled) {
+  cursor: default;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+:host(.ion-color) .button-native {
+  color: var(--ion-color-base);
+}
+
 :host {
   --background-focused: currentColor;
-  --background-focused-opacity: .1;
+  --background-focused-opacity: 0.1;
   --border-radius: 4px;
   --color: var(--ion-color-primary, #0054e9);
   --padding-start: 5px;

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

@@ -1,16 +1,18 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
+import listRegular from "@phosphor-icons/core/assets/regular/list.svg";
 import { Host, h } from "@stencil/core";
 import { inheritAriaAttributes } from "../../utils/helpers";
 import { menuController } from "../../utils/menu-controller/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { menuOutline, menuSharp } from "ionicons/icons";
 import { config } from "../../global/config";
-import { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 import { updateVisibility } from "../menu-toggle/menu-toggle-util";
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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.
  *
  * @part native - The native HTML button element that wraps all child elements.
  * @part icon - The menu button icon (uses ion-icon).
@@ -44,17 +46,29 @@ export class MenuButton {
     async visibilityChanged() {
         this.visible = await updateVisibility(this.menu);
     }
+    get menuIcon() {
+        // Determine the theme and map to default icons
+        const theme = getIonTheme(this);
+        const defaultIcons = {
+            ios: menuOutline,
+            ionic: listRegular,
+            md: menuSharp,
+        };
+        // Get the default icon based on the theme, falling back to 'md' icon if necessary
+        const defaultIcon = defaultIcons[theme] || defaultIcons.md;
+        // Return the configured menu icon or the default icon
+        return config.get('menuIcon', defaultIcon);
+    }
     render() {
-        const { color, disabled, inheritedAttributes } = this;
-        const mode = getIonMode(this);
-        const menuIcon = config.get('menuIcon', mode === 'ios' ? menuOutline : menuSharp);
+        const { color, disabled, inheritedAttributes, menuIcon } = this;
+        const theme = getIonTheme(this);
         const hidden = this.autoHide && !this.visible;
         const attrs = {
             type: this.type,
         };
         const ariaLabel = inheritedAttributes['aria-label'] || 'menu';
-        return (h(Host, { key: 'dcade732e366f0687d92cb9ce4065b78b0b41d24', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
-                [mode]: true,
+        return (h(Host, { key: 'd150818e749a1cbe72dc05011247023f6d442eb8', onClick: this.onClick, "aria-disabled": disabled ? 'true' : null, "aria-hidden": hidden ? 'true' : null, class: createColorClasses(color, {
+                [theme]: true,
                 button: true, // ion-buttons target .button
                 'menu-button-hidden': hidden,
                 'menu-button-disabled': disabled,
@@ -62,20 +76,22 @@ export class MenuButton {
                 'in-toolbar-color': hostContext('ion-toolbar[color]', this.el),
                 'ion-activatable': true,
                 'ion-focusable': true,
-            }) }, h("button", Object.assign({ key: '7c4a449e239679376f38471d95fd602f9caec5f6' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: '8bb5bf453280a66109198c970b678ad800c7a8cf', class: "button-inner" }, h("slot", { key: '7f78b1e7a0695f2bd600d13ca81f50dd8b965726' }, h("ion-icon", { key: '9f67f5bb06b1f03a6e5df9ecbe23ebf69fb40756', part: "icon", icon: menuIcon, mode: mode, lazy: false, "aria-hidden": "true" }))), mode === 'md' && h("ion-ripple-effect", { key: '10be7145c614144e94c3cc0b92dc5ee4e1587fe6', type: "unbounded" }))));
+            }) }, h("button", Object.assign({ key: '88bef93aa6c1a0d5795c4a9ba3edffd99413a758' }, attrs, { disabled: disabled, class: "button-native", part: "native", "aria-label": ariaLabel }), h("span", { key: '12b2f8bc542239a35adee62d76acccff571a84d7', class: "button-inner" }, h("slot", { key: '5bba549d8e92745aa34372c105cfe80e0ecbc9f5' }, h("ion-icon", { key: '864ff8bf1722b7fe1f17f2a40dfc5b91cb3403f9', part: "icon", icon: menuIcon, lazy: false, "aria-hidden": "true" }))), theme === 'md' && h("ion-ripple-effect", { key: '59e24ecb22970e43b51739324b11457c6e4bc117', type: "unbounded" }))));
     }
     static get is() { return "ion-menu-button"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["menu-button.ios.scss"],
-            "md": ["menu-button.md.scss"]
+            "md": ["menu-button.md.scss"],
+            "ionic": ["menu-button.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["menu-button.ios.css"],
-            "md": ["menu-button.md.css"]
+            "md": ["menu-button.md.css"],
+            "ionic": ["menu-button.ionic.css"]
         };
     }
     static get properties() {

package/dist/collection/components/menu-button/menu-button.md.css

@@ -1,3 +1,9 @@
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -53,6 +59,12 @@
  *   }
  * }
  */
+/**
+ * Convert a pixels given value into rem
+ * 
+ * @param pixels - Value in pixels to be converted (i.e. px)
+ * @param context (optional) - Baseline value
+ */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -108,6 +120,28 @@
  *   }
  * }
  */
+/**
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
+ */
+/**
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
+ */
 :host {
   /**
    * @prop --border-radius: Border radius of the menu button
@@ -143,18 +177,18 @@
 
 .button-native {
   border-radius: var(--border-radius);
+  color: inherit;
   font-family: inherit;
   font-size: inherit;
   font-style: inherit;
   font-weight: inherit;
   letter-spacing: inherit;
+  text-align: inherit;
   text-decoration: inherit;
   text-indent: inherit;
   text-overflow: inherit;
   text-transform: inherit;
-  text-align: inherit;
   white-space: inherit;
-  color: inherit;
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
@@ -216,12 +250,6 @@ ion-icon {
   display: none;
 }
 
-:host(.menu-button-disabled) {
-  cursor: default;
-  opacity: 0.5;
-  pointer-events: none;
-}
-
 :host(.ion-focused) .button-native {
   color: var(--color-focused);
 }
@@ -231,8 +259,8 @@ ion-icon {
 }
 
 .button-native::after {
-  left: 0;
   right: 0;
+  left: 0;
   top: 0;
   bottom: 0;
   position: absolute;
@@ -249,19 +277,25 @@ ion-icon {
     opacity: var(--background-hover-opacity, 0);
   }
 }
-:host(.ion-color) .button-native {
-  color: var(--ion-color-base);
-}
-
 :host(.in-toolbar:not(.in-toolbar-color)) {
   color: var(--ion-toolbar-color, var(--color));
 }
 
+:host(.menu-button-disabled) {
+  cursor: default;
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+:host(.ion-color) .button-native {
+  color: var(--ion-color-base);
+}
+
 :host {
   --background-focused: currentColor;
-  --background-focused-opacity: .12;
+  --background-focused-opacity: 0.12;
   --background-hover: currentColor;
-  --background-hover-opacity: .04;
+  --background-hover-opacity: 0.04;
   --border-radius: 50%;
   --color: initial;
   --padding-start: 8px;

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

@@ -3,9 +3,12 @@
  */
 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 {
@@ -29,12 +32,12 @@ export class MenuToggle {
         this.visible = await updateVisibility(this.menu);
     }
     render() {
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         const hidden = this.autoHide && !this.visible;
-        return (h(Host, { key: '55135952f3a42cb5d21916dfb7b169d894b381e3', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
-                [mode]: true,
+        return (h(Host, { key: '973372d778e7902eac28b2a6a5e74165b51d60d6', onClick: this.onClick, "aria-hidden": hidden ? 'true' : null, class: {
+                [theme]: true,
                 'menu-toggle-hidden': hidden,
-            } }, h("slot", { key: 'e8ecb59a6ec075b07e2a1b8fcdf7df3dd9975a03' })));
+            } }, h("slot", { key: '760b8ffe93ae490b62f7ad6fc94ecbc8521ead64' })));
     }
     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/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,16 @@ import { clamp, getElementRoot, raf } 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 = [], 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) => {
     // 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: [
@@ -339,7 +339,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,
@@ -350,7 +352,9 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
         onDragMove(eventDetail);
     };
     const onEnd = (detail) => {
-        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,
@@ -397,6 +401,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;
         /**
@@ -411,11 +423,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) {
@@ -433,6 +449,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.
@@ -522,7 +544,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);
         });
     };
     /**
@@ -533,7 +555,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
@@ -553,6 +575,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.
      *