@ionic/core 8.8.20-dev.11790592795.1cc6dc2f → 8.8.20-dev.11791573097.1f843ab0

package/dist/collection/components/action-sheet/action-sheet.ionic.css

@@ -78,7 +78,7 @@
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-regular, 400);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-600, 1.5rem);
+  line-height: 1.714286;
   -webkit-padding-start: var(--token-space-0, var(--token-scale-0, 0px));
   padding-inline-start: var(--token-space-0, var(--token-scale-0, 0px));
   -webkit-padding-end: var(--token-space-0, var(--token-scale-0, 0px));
@@ -428,7 +428,7 @@ ion-checkbox.select-option-has-rich-content::part(label),
   font-size: var(--token-font-size-450, 1.125rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-700, 1.75rem);
+  line-height: 1.555556;
   color: var(--color);
   text-align: start;
 }
@@ -438,7 +438,7 @@ ion-checkbox.select-option-has-rich-content::part(label),
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-regular, 400);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-600, 1.5rem);
+  line-height: 1.714286;
   color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a));
 }
 
@@ -461,7 +461,7 @@ ion-checkbox.select-option-has-rich-content::part(label),
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-regular, 400);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-600, 1.5rem);
+  line-height: 1.714286;
   position: relative;
   min-height: 52px;
   text-align: start;

package/dist/collection/components/alert/alert.ionic.css

@@ -78,7 +78,7 @@
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-regular, 400);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-600, 1.5rem);
+  line-height: 1.714286;
   -webkit-padding-start: var(--token-space-0, var(--token-scale-0, 0px));
   padding-inline-start: var(--token-space-0, var(--token-scale-0, 0px));
   -webkit-padding-end: var(--token-space-0, var(--token-scale-0, 0px));
@@ -453,7 +453,7 @@ textarea.alert-input {
 
 .alert-wrapper {
   border-radius: var(--token-border-radius-200, var(--token-scale-200, 8px));
-  box-shadow: var(--token-elevation-4, var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-15, 15px) var(--token-shadow-blur-48, 48px) var(--token-shadow-spread-0, 0px) var(--token-shadow-7, rgba(0, 0, 0, 0.1803921569)), var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-3, 3px) var(--token-shadow-blur-12, 12px) var(--token-shadow-spread-0, 0px) var(--token-shadow-5, rgba(0, 0, 0, 0.1215686275)));
+  box-shadow: var(--token-elevation-4, var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-15, 15px) var(--token-shadow-blur-48, 48px) var(--token-shadow-spread-0, 0px) var(--token-shadow-7, rgba(0, 0, 0, 0.18)), var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-3, 3px) var(--token-shadow-blur-12, 12px) var(--token-shadow-spread-0, 0px) var(--token-shadow-5, rgba(0, 0, 0, 0.12)));
   z-index: 10;
 }
 
@@ -492,7 +492,7 @@ textarea.alert-input {
   font-size: var(--token-font-size-450, 1.125rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-700, 1.75rem);
+  line-height: 1.555556;
   color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
 }
 
@@ -501,7 +501,7 @@ textarea.alert-input {
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-regular, 400);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-600, 1.5rem);
+  line-height: 1.714286;
   color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a));
 }
 
@@ -511,7 +511,7 @@ textarea.alert-input {
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-regular, 400);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-600, 1.5rem);
+  line-height: 1.714286;
   -webkit-padding-start: var(--token-space-400, var(--token-scale-400, 16px));
   padding-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
   -webkit-padding-end: var(--token-space-400, var(--token-scale-400, 16px));
@@ -595,7 +595,7 @@ textarea.alert-input {
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-regular, 400);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-600, 1.5rem);
+  line-height: 1.714286;
   padding-top: var(--token-space-200, var(--token-scale-200, 8px));
   padding-bottom: var(--token-space-200, var(--token-scale-200, 8px));
   max-width: calc(100% - var(--token-space-400, var(--token-scale-400, 16px)));
@@ -669,7 +669,7 @@ textarea.alert-input {
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-regular, 400);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-600, 1.5rem);
+  line-height: 1.714286;
   -webkit-padding-start: var(--token-space-800, var(--token-scale-800, 32px));
   padding-inline-start: var(--token-space-800, var(--token-scale-800, 32px));
   -webkit-padding-end: var(--token-space-400, var(--token-scale-400, 16px));

package/dist/collection/components/avatar/avatar.ionic.css

@@ -106,7 +106,7 @@
   font-size: var(--token-font-size-450, 1.125rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-700, 1.75rem);
+  line-height: 1.555556;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -131,7 +131,7 @@
   font-size: var(--token-font-size-300, 0.75rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-500, 1.25rem);
+  line-height: 1.666667;
   width: var(--token-scale-400, 16px);
   height: var(--token-scale-400, 16px);
 }
@@ -144,7 +144,7 @@
   font-size: var(--token-font-size-300, 0.75rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-500, 1.25rem);
+  line-height: 1.666667;
   width: var(--token-scale-600, 24px);
   height: var(--token-scale-600, 24px);
 }
@@ -157,7 +157,7 @@
   font-size: var(--token-font-size-400, 1rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-600, 1.5rem);
+  line-height: 1.5;
   width: var(--token-scale-800, 32px);
   height: var(--token-scale-800, 32px);
 }
@@ -178,7 +178,7 @@
   font-size: var(--token-font-size-500, 1.25rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-700, 1.75rem);
+  line-height: 1.4;
   width: var(--token-scale-1200, 48px);
   height: var(--token-scale-1200, 48px);
 }
@@ -191,7 +191,7 @@
   font-size: var(--token-font-size-550, 1.375rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-700, 1.75rem);
+  line-height: 1.272727;
   width: var(--token-scale-1400, 56px);
   height: var(--token-scale-1400, 56px);
 }

package/dist/collection/components/badge/badge.ionic.css

@@ -132,7 +132,7 @@
   font-size: var(--token-font-size-300, 0.75rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-500, 1.25rem);
+  line-height: 1.666667;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -200,7 +200,7 @@
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-600, 1.5rem);
+  line-height: 1.714286;
   min-width: var(--token-scale-600, 24px);
   height: var(--token-scale-600, 24px);
 }
@@ -260,7 +260,7 @@
   font-size: var(--token-font-size-300, 0.75rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-100, 0.01em);
-  line-height: var(--token-font-line-height-500, 1.25rem);
+  line-height: 1.666667;
   min-width: var(--token-scale-400, 16px);
   height: var(--token-scale-400, 16px);
 }

package/dist/collection/components/button/button.ionic.css

@@ -423,7 +423,7 @@ ion-ripple-effect {
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-100, 0.01em);
-  line-height: var(--token-font-line-height-500, 1.25rem);
+  line-height: 1.428571;
   min-width: var(--token-scale-1600, 64px);
   min-height: var(--token-scale-1000, 40px);
 }
@@ -435,7 +435,7 @@ ion-ripple-effect {
   font-size: var(--token-font-size-400, 1rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-100, 0.01em);
-  line-height: var(--token-font-line-height-600, 1.5rem);
+  line-height: 1.5;
   min-width: var(--token-scale-1800, 72px);
   min-height: var(--token-scale-1200, 48px);
 }
@@ -447,7 +447,7 @@ ion-ripple-effect {
   font-size: var(--token-font-size-500, 1.25rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-100, 0.01em);
-  line-height: var(--token-font-line-height-600, 1.5rem);
+  line-height: 1.2;
   min-width: var(--token-scale-2000, 80px);
   min-height: var(--token-scale-1400, 56px);
 }
@@ -635,6 +635,6 @@ ion-ripple-effect {
   font-size: var(--token-font-size-400, 1rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-100, 0.01em);
-  line-height: var(--token-font-line-height-600, 1.5rem);
+  line-height: 1.5;
   min-height: var(--token-space-1200, var(--token-scale-1200, 48px));
 }

package/dist/collection/components/card-content/card-content.ionic.css

@@ -74,7 +74,7 @@
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-regular, 400);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-600, 1.5rem);
+  line-height: 1.714286;
   display: flex;
   flex-direction: column;
   gap: var(--token-space-400, var(--token-scale-400, 16px));

package/dist/collection/components/card-subtitle/card-subtitle.ionic.css

@@ -139,5 +139,5 @@
   font-size: var(--token-font-size-400, 1rem);
   font-weight: var(--token-font-weight-regular, 400);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-600, 1.5rem);
+  line-height: 1.5;
 }

package/dist/collection/components/checkbox/checkbox.ionic.css

@@ -386,7 +386,7 @@ input {
   font-size: var(--token-font-size-300, 0.75rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-500, 1.25rem);
+  line-height: 1.666667;
 }
 
 .checkbox-bottom .error-text {

package/dist/collection/components/chip/chip.ionic.css

@@ -124,7 +124,7 @@
   font-size: var(--token-font-size-300, 0.75rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-500, 1.25rem);
+  line-height: 1.666667;
   gap: var(--token-space-100, var(--token-scale-100, 4px));
   line-height: 100%;
   cursor: auto;

package/dist/collection/components/datetime/datetime.ionic.css

@@ -499,7 +499,7 @@
   font-size: var(--token-font-size-450, 1.125rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-700, 1.75rem);
+  line-height: 1.555556;
   color: var(--token-primitives-neutral-800, #6c727a);
 }
 
@@ -508,7 +508,7 @@
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-regular, 400);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-600, 1.5rem);
+  line-height: 1.714286;
   color: var(--token-primitives-neutral-1000, #383e45);
 }
 
@@ -530,7 +530,7 @@
   font-size: var(--token-font-size-400, 1rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-100, 0.01em);
-  line-height: var(--token-font-line-height-600, 1.5rem);
+  line-height: 1.5;
   -webkit-padding-start: var(--token-space-400, var(--token-scale-400, 16px));
   padding-inline-start: var(--token-space-400, var(--token-scale-400, 16px));
   -webkit-padding-end: var(--token-space-400, var(--token-scale-400, 16px));
@@ -574,7 +574,7 @@
   font-size: var(--token-font-size-300, 0.75rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-150, 0.015em);
-  line-height: var(--token-font-line-height-500, 1.25rem);
+  line-height: 1.666667;
   text-transform: uppercase;
   align-content: center;
   height: var(--token-scale-1200, 48px);
@@ -593,7 +593,7 @@
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-100, 0.01em);
-  line-height: var(--token-font-line-height-500, 1.25rem);
+  line-height: 1.428571;
   width: var(--token-scale-1200, 48px);
   min-width: var(--token-scale-1200, 48px);
   height: var(--token-scale-1200, 48px);
@@ -649,7 +649,7 @@
   font-size: var(--token-font-size-400, 1rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-100, 0.01em);
-  line-height: var(--token-font-line-height-600, 1.5rem);
+  line-height: 1.5;
   color: var(--token-primitives-neutral-800, #6c727a);
 }
 
@@ -664,7 +664,7 @@
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-600, 1.5rem);
+  line-height: 1.714286;
   border-radius: var(--token-border-radius-full, 999px);
   display: flex;
   align-items: center;

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

@@ -578,7 +578,7 @@
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-regular, 400);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-600, 1.5rem);
+  line-height: 1.714286;
 }
 
 .input-outline {
@@ -800,7 +800,7 @@
   font-size: var(--token-font-size-300, 0.75rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-500, 1.25rem);
+  line-height: 1.666667;
   color: var(--token-primitives-neutral-1000, #383e45);
 }
 
@@ -817,7 +817,7 @@
   font-size: var(--token-font-size-300, 0.75rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-500, 1.25rem);
+  line-height: 1.666667;
 }
 
 .input-bottom .error-text {

package/dist/collection/components/input-otp/input-otp.ionic.css

@@ -257,7 +257,7 @@
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-regular, 400);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-600, 1.5rem);
+  line-height: 1.714286;
 }
 
 :host(.has-focus) .native-input:focus {
@@ -269,7 +269,7 @@
   font-size: var(--token-font-size-300, 0.75rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-500, 1.25rem);
+  line-height: 1.666667;
   color: var(--token-text-subtlest, var(--token-primitives-neutral-800, #6c727a));
 }
 

package/dist/collection/components/item/item.ionic.css

@@ -426,7 +426,7 @@ ion-ripple-effect {
   font-size: var(--token-font-size-400, 1rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-600, 1.5rem);
+  line-height: 1.5;
 }
 
 .item-inner {

package/dist/collection/components/item-option/item-option.ionic.css

@@ -162,7 +162,7 @@
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-100, 0.01em);
-  line-height: var(--token-font-line-height-500, 1.25rem);
+  line-height: 1.428571;
 }
 
 .button-native {

package/dist/collection/components/list-header/list-header.ionic.css

@@ -154,7 +154,7 @@
   font-size: var(--token-font-size-350, 0.875rem);
   font-weight: var(--token-font-weight-medium, 500);
   letter-spacing: var(--token-font-letter-spacing-0, 0);
-  line-height: var(--token-font-line-height-600, 1.5rem);
+  line-height: 1.714286;
   min-height: calc(var(--token-scale-1400, 56px) + var(--token-scale-050, 2px));
   /**
    * The focus rings from components like buttons and links

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/collection/components/modal/modal.ionic.css

@@ -198,7 +198,7 @@ ion-backdrop {
 
 :host {
   --background: var(--token-bg-surface-default, var(--token-primitives-base-white, #ffffff));
-  --box-shadow: var(--token-elevation-3, var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-6, 6px) var(--token-shadow-blur-32, 32px) var(--token-shadow-spread-0, 0px) var(--token-shadow-6, rgba(0, 0, 0, 0.1607843137)), var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-2, 2px) var(--token-shadow-blur-7, 7px) var(--token-shadow-spread-0, 0px) var(--token-shadow-2, rgba(0, 0, 0, 0.0509803922)));
+  --box-shadow: var(--token-elevation-3, var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-6, 6px) var(--token-shadow-blur-32, 32px) var(--token-shadow-spread-0, 0px) var(--token-shadow-6, rgba(0, 0, 0, 0.16)), var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-2, 2px) var(--token-shadow-blur-7, 7px) var(--token-shadow-spread-0, 0px) var(--token-shadow-2, rgba(0, 0, 0, 0.05)));
   --backdrop-opacity: 0.7;
   color: var(--token-text-default, var(--token-primitives-neutral-1200, #242528));
 }

package/dist/collection/components/popover/popover.ionic.css

@@ -263,7 +263,7 @@
 :host {
   --width: 250px;
   --max-height: 90%;
-  --box-shadow: var(--token-elevation-4, var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-15, 15px) var(--token-shadow-blur-48, 48px) var(--token-shadow-spread-0, 0px) var(--token-shadow-7, rgba(0, 0, 0, 0.1803921569)), var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-3, 3px) var(--token-shadow-blur-12, 12px) var(--token-shadow-spread-0, 0px) var(--token-shadow-5, rgba(0, 0, 0, 0.1215686275)));
+  --box-shadow: var(--token-elevation-4, var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-15, 15px) var(--token-shadow-blur-48, 48px) var(--token-shadow-spread-0, 0px) var(--token-shadow-7, rgba(0, 0, 0, 0.18)), var(--token-shadow-offset-0, 0px) var(--token-shadow-offset-3, 3px) var(--token-shadow-blur-12, 12px) var(--token-shadow-spread-0, 0px) var(--token-shadow-5, rgba(0, 0, 0, 0.12)));
   --backdrop-opacity: 0.3;
 }