@ionic/core 8.7.19-nightly.20260303 → 8.8.0

package/dist/collection/components/list-header/list-header.js

@@ -6,15 +6,17 @@ import { createColorClasses } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ *
+ * @part inner - The inner wrapper element that arranges the list header content.
  */
 export class ListHeader {
     render() {
         const { lines } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '2e529021279761b2b2889885437f619b0e8f71c4', class: createColorClasses(this.color, {
+        return (h(Host, { key: 'f5fcd3e6b9f1ba52381fd0d14c0d50517da50f9f', class: createColorClasses(this.color, {
                 [mode]: true,
                 [`list-header-lines-${lines}`]: lines !== undefined,
-            }) }, h("div", { key: '9a6a11b0db015df79374f6489a40b959bc80b3e4', class: "list-header-inner" }, h("slot", { key: 'ef347fc6afb47850797e2e4d1aeefcd6a318f789' }))));
+            }) }, h("div", { key: '99d09b1d2438ad981d20ff965c8945635c2161a3', class: "list-header-inner", part: "inner" }, h("slot", { key: 'efa7ab08935cfa378734cda0612b49ba5b7b6d36' }))));
     }
     static get is() { return "ion-list-header"; }
     static get encapsulation() { return "shadow"; }
@@ -42,7 +44,8 @@ export class ListHeader {
                         "Color": {
                             "location": "import",
                             "path": "../../interface",
-                            "id": "src/interface.d.ts::Color"
+                            "id": "src/interface.d.ts::Color",
+                            "referenceLocation": "Color"
                         }
                     }
                 },

package/dist/collection/components/loading/loading.js

@@ -231,7 +231,8 @@ export class Loading {
                         "FrameworkDelegate": {
                             "location": "import",
                             "path": "../../interface",
-                            "id": "src/interface.d.ts::FrameworkDelegate"
+                            "id": "src/interface.d.ts::FrameworkDelegate",
+                            "referenceLocation": "FrameworkDelegate"
                         }
                     }
                 },
@@ -300,7 +301,8 @@ export class Loading {
                         "AnimationBuilder": {
                             "location": "import",
                             "path": "../../interface",
-                            "id": "src/interface.d.ts::AnimationBuilder"
+                            "id": "src/interface.d.ts::AnimationBuilder",
+                            "referenceLocation": "AnimationBuilder"
                         }
                     }
                 },
@@ -323,7 +325,8 @@ export class Loading {
                         "AnimationBuilder": {
                             "location": "import",
                             "path": "../../interface",
-                            "id": "src/interface.d.ts::AnimationBuilder"
+                            "id": "src/interface.d.ts::AnimationBuilder",
+                            "referenceLocation": "AnimationBuilder"
                         }
                     }
                 },
@@ -346,7 +349,8 @@ export class Loading {
                         "IonicSafeString": {
                             "location": "import",
                             "path": "../../utils/sanitization",
-                            "id": "src/utils/sanitization/index.ts::IonicSafeString"
+                            "id": "src/utils/sanitization/index.ts::IonicSafeString",
+                            "referenceLocation": "IonicSafeString"
                         }
                     }
                 },
@@ -450,7 +454,8 @@ export class Loading {
                         "SpinnerTypes": {
                             "location": "import",
                             "path": "../spinner/spinner-configs",
-                            "id": "src/components/spinner/spinner-configs.ts::SpinnerTypes"
+                            "id": "src/components/spinner/spinner-configs.ts::SpinnerTypes",
+                            "referenceLocation": "SpinnerTypes"
                         }
                     }
                 },
@@ -611,7 +616,8 @@ export class Loading {
                         "OverlayEventDetail": {
                             "location": "import",
                             "path": "../../utils/overlays-interface",
-                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail",
+                            "referenceLocation": "OverlayEventDetail"
                         }
                     }
                 }
@@ -632,7 +638,8 @@ export class Loading {
                         "OverlayEventDetail": {
                             "location": "import",
                             "path": "../../utils/overlays-interface",
-                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail",
+                            "referenceLocation": "OverlayEventDetail"
                         }
                     }
                 }
@@ -683,7 +690,8 @@ export class Loading {
                         "OverlayEventDetail": {
                             "location": "import",
                             "path": "../../utils/overlays-interface",
-                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail",
+                            "referenceLocation": "OverlayEventDetail"
                         }
                     }
                 }
@@ -704,7 +712,8 @@ export class Loading {
                         "OverlayEventDetail": {
                             "location": "import",
                             "path": "../../utils/overlays-interface",
-                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail",
+                            "referenceLocation": "OverlayEventDetail"
                         }
                     }
                 }
@@ -772,7 +781,8 @@ export class Loading {
                         "OverlayEventDetail": {
                             "location": "import",
                             "path": "../../utils/overlays-interface",
-                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail",
+                            "referenceLocation": "OverlayEventDetail"
                         },
                         "T": {
                             "location": "global",
@@ -798,7 +808,8 @@ export class Loading {
                         "OverlayEventDetail": {
                             "location": "import",
                             "path": "../../utils/overlays-interface",
-                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
+                            "id": "src/utils/overlays-interface.ts::OverlayEventDetail",
+                            "referenceLocation": "OverlayEventDetail"
                         },
                         "T": {
                             "location": "global",

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

@@ -731,7 +731,8 @@ export class Menu {
                         "MenuType": {
                             "location": "import",
                             "path": "./menu-interface",
-                            "id": "src/components/menu/menu-interface.ts::MenuType"
+                            "id": "src/components/menu/menu-interface.ts::MenuType",
+                            "referenceLocation": "MenuType"
                         }
                     }
                 },
@@ -776,7 +777,8 @@ export class Menu {
                         "Side": {
                             "location": "import",
                             "path": "./menu-interface",
-                            "id": "src/components/menu/menu-interface.ts::Side"
+                            "id": "src/components/menu/menu-interface.ts::Side",
+                            "referenceLocation": "Side"
                         }
                     }
                 },
@@ -873,7 +875,8 @@ export class Menu {
                         "MenuCloseEventDetail": {
                             "location": "import",
                             "path": "./menu-interface",
-                            "id": "src/components/menu/menu-interface.ts::MenuCloseEventDetail"
+                            "id": "src/components/menu/menu-interface.ts::MenuCloseEventDetail",
+                            "referenceLocation": "MenuCloseEventDetail"
                         }
                     }
                 }
@@ -909,7 +912,8 @@ export class Menu {
                         "MenuCloseEventDetail": {
                             "location": "import",
                             "path": "./menu-interface",
-                            "id": "src/components/menu/menu-interface.ts::MenuCloseEventDetail"
+                            "id": "src/components/menu/menu-interface.ts::MenuCloseEventDetail",
+                            "referenceLocation": "MenuCloseEventDetail"
                         }
                     }
                 }
@@ -933,7 +937,8 @@ export class Menu {
                         "MenuChangeEventDetail": {
                             "location": "import",
                             "path": "./menu-interface",
-                            "id": "src/components/menu/menu-interface.ts::MenuChangeEventDetail"
+                            "id": "src/components/menu/menu-interface.ts::MenuChangeEventDetail",
+                            "referenceLocation": "MenuChangeEventDetail"
                         }
                     }
                 }

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

@@ -90,7 +90,8 @@ export class MenuButton {
                         "Color": {
                             "location": "import",
                             "path": "../../interface",
-                            "id": "src/interface.d.ts::Color"
+                            "id": "src/interface.d.ts::Color",
+                            "referenceLocation": "Color"
                         }
                     }
                 },

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

@@ -7,7 +7,7 @@ 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) => {
+export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpoint, backdropBreakpoint, animation, breakpoints = [], expandToScroll, getCurrentBreakpoint, onDismiss, onBreakpointChange, onDragStart, onDragMove, onDragEnd) => {
     // Defaults for the sheet swipe animation
     const defaultBackdrop = [
         { offset: 0, opacity: 'var(--backdrop-opacity)' },
@@ -270,6 +270,7 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
             baseEl.focus();
         });
         animation.progressStart(true, 1 - currentBreakpoint);
+        onDragStart();
     };
     const onMove = (detail) => {
         /**
@@ -338,8 +339,25 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
             : step;
         offset = clamp(0.0001, processedStep, maxStep);
         animation.progressStep(offset);
+        const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
+        const eventDetail = {
+            currentY: detail.currentY,
+            deltaY: detail.deltaY,
+            velocityY: detail.velocityY,
+            progress: calculateProgress(detail.currentY),
+            snapBreakpoint: snapBreakpoint,
+        };
+        onDragMove(eventDetail);
     };
     const onEnd = (detail) => {
+        const snapBreakpoint = calculateSnapBreakpoint(detail.deltaY);
+        const eventDetail = {
+            currentY: detail.currentY,
+            deltaY: detail.deltaY,
+            velocityY: detail.velocityY,
+            progress: calculateProgress(detail.currentY),
+            snapBreakpoint,
+        };
         /**
          * If expandToScroll is disabled, we should not allow the moveSheetToBreakpoint
          * function to be called if the user is trying to swipe content upwards and the content
@@ -354,20 +372,11 @@ 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');
+            onDragEnd(eventDetail);
             return;
         }
-        /**
-         * When the gesture releases, we need to determine
-         * the closest breakpoint to snap to.
-         */
-        const velocity = detail.velocityY;
-        const threshold = (detail.deltaY + velocity * 350) / height;
-        const diff = currentBreakpoint - threshold;
-        const closest = breakpoints.reduce((a, b) => {
-            return Math.abs(b - diff) < Math.abs(a - diff) ? b : a;
-        });
         moveSheetToBreakpoint({
-            breakpoint: closest,
+            breakpoint: snapBreakpoint,
             breakpointOffset: offset,
             canDismiss: canDismissBlocksGesture,
             /**
@@ -376,6 +385,7 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
              */
             animated: true,
         });
+        onDragEnd(eventDetail);
     };
     const moveSheetToBreakpoint = (options) => {
         const { breakpoint, canDismiss, breakpointOffset, animated } = options;
@@ -515,6 +525,104 @@ export const createSheetGesture = (baseEl, backdropEl, wrapperEl, initialBreakpo
                 .progressEnd(1, 0, animated ? 500 : 0);
         });
     };
+    /**
+     * Calculates the breakpoint based on the current deltaY.
+     * This determines where the sheet should snap to when the user releases the
+     * gesture.
+     *
+     * @param deltaY The change in Y position since the gesture started.
+     * @returns The snap breakpoint value.
+     */
+    const calculateSnapBreakpoint = (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);
+        /**
+         * Find and return the defined breakpoint that is closest to the
+         * current progress.
+         */
+        const snapBreakpoint = breakpoints.reduce((a, b) => {
+            return Math.abs(b - currentProgress) < Math.abs(a - currentProgress) ? b : a;
+        });
+        return snapBreakpoint;
+    };
+    /**
+     * 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.
+     *
+     * 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
+     * @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;
+        // 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));
+    };
+    /**
+     * 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
+     */
+    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 gesture = createGesture({
         el: wrapperEl,
         gestureName: 'modalSheet',

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

@@ -12,7 +12,7 @@ import { calculateSpringStep, handleCanDismiss } from "./utils";
 export const SwipeToCloseDefaults = {
     MIN_PRESENTING_SCALE: 0.915,
 };
-export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss) => {
+export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss, onDragStart, onDragMove, onDragEnd) => {
     /**
      * The step value at which a card modal
      * is eligible for dismissing via gesture.
@@ -122,6 +122,7 @@ export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismi
             disableContentScrollY(contentEl);
         }
         animation.progressStart(true, isOpen ? 1 : 0);
+        onDragStart();
     };
     const onMove = (detail) => {
         const { deltaY } = detail;
@@ -189,6 +190,13 @@ export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismi
             setCardStatusBarDark();
         }
         lastStep = clampedStep;
+        const eventDetail = {
+            currentY: detail.currentY,
+            deltaY: detail.deltaY,
+            velocityY: detail.velocityY,
+            progress: calculateProgress(el, detail.deltaY),
+        };
+        onDragMove(eventDetail);
     };
     const onEnd = (detail) => {
         const velocity = detail.velocityY;
@@ -247,6 +255,13 @@ export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismi
         else if (shouldComplete) {
             onDismiss();
         }
+        const eventDetail = {
+            currentY: detail.currentY,
+            deltaY: detail.deltaY,
+            velocityY: detail.velocityY,
+            progress: calculateProgress(el, detail.deltaY),
+        };
+        onDragEnd(eventDetail);
     };
     const gesture = createGesture({
         el,
@@ -264,3 +279,41 @@ export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismi
 const computeDuration = (remaining, velocity) => {
     return clamp(400, remaining / Math.abs(velocity * 1.1), 500);
 };
+/**
+ * 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.
+ *
+ * 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 el The modal
+ * @param deltaY The change in Y position (positive when dragging down, negative when dragging up)
+ * @returns The progress of the swipe gesture
+ */
+const calculateProgress = (el, deltaY) => {
+    const windowHeight = window.innerHeight;
+    // Position when fully open
+    const modalTop = el.getBoundingClientRect().top;
+    /**
+     * The distance between the top of the modal and the bottom of the screen
+     * is the total distance the modal needs to travel to be fully closed.
+     */
+    const totalDistance = windowHeight - modalTop;
+    /**
+     * The pull percentage is how far the user has swiped compared to the total
+     * distance needed to close the modal.
+     */
+    const pullPercentage = deltaY / totalDistance;
+    /**
+     * The progress is the inverse of the pull percentage because
+     * 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 = 1 - pullPercentage;
+    // 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));
+};