@ionic/core 7.5.4-dev.11699632730.1e6d9b70 → 7.5.4-dev.11699895923.130c21aa

package/dist/types/utils/overlays.d.ts

@@ -99,6 +99,7 @@ export declare const isCancel: (role: string | undefined) => boolean;
 export declare const safeCall: (handler: any, arg?: any) => any;
 export declare const BACKDROP = "backdrop";
 export declare const GESTURE = "gesture";
+export declare const OVERLAY_GESTURE_PRIORITY = 39;
 /**
  * Creates a delegate controller.
  *

package/hydrate/index.js

@@ -8728,6 +8728,7 @@ const safeCall = (handler, arg) => {
 };
 const BACKDROP = 'backdrop';
 const GESTURE = 'gesture';
+const OVERLAY_GESTURE_PRIORITY = 39;
 /**
  * Creates a delegate controller.
  *
@@ -22299,7 +22300,7 @@ const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismiss) =>
   const gesture = createGesture({
     el,
     gestureName: 'modalSwipeToClose',
-    gesturePriority: 39,
+    gesturePriority: OVERLAY_GESTURE_PRIORITY,
     direction: 'y',
     threshold: 10,
     canStart,
@@ -33963,6 +33964,93 @@ class Thumbnail {
   }; }
 }
 
+/**
+ * Calculate the CSS top and bottom position of the toast, to be used
+ * as starting points for the animation keyframes.
+ *
+ * The default animations for both MD and iOS
+ * use translateY, which calculates from the
+ * top edge of the screen. This behavior impacts
+ * how we compute the offset when a toast has
+ * position='bottom' since we need to calculate from
+ * the bottom edge of the screen instead.
+ *
+ * @param position The value of the toast's position prop.
+ * @param positionAnchor The element the toast should be anchored to,
+ * if applicable.
+ * @param mode The toast component's mode (md, ios, etc).
+ * @param toast A reference to the toast element itself.
+ */
+function getAnimationPosition(position, positionAnchor, mode, toast) {
+  /**
+   * Start with a predefined offset from the edge the toast will be
+   * positioned relative to, whether on the screen or anchor element.
+   */
+  let offset;
+  if (mode === 'md') {
+    offset = position === 'top' ? 8 : -8;
+  }
+  else {
+    offset = position === 'top' ? 10 : -10;
+  }
+  /**
+   * If positionAnchor is defined, add in the distance from the target
+   * screen edge to the target anchor edge. For position="top", the
+   * bottom anchor edge is targeted. For position="bottom", the top
+   * anchor edge is targeted.
+   */
+  if (positionAnchor && win$1) {
+    warnIfAnchorIsHidden(positionAnchor, toast);
+    const box = positionAnchor.getBoundingClientRect();
+    if (position === 'top') {
+      offset += box.bottom;
+    }
+    else if (position === 'bottom') {
+      /**
+       * Just box.top is the distance from the top edge of the screen
+       * to the top edge of the anchor. We want to calculate from the
+       * bottom edge of the screen instead.
+       */
+      offset -= win$1.innerHeight - box.top;
+    }
+    /**
+     * We don't include safe area here because that should already be
+     * accounted for when checking the position of the anchor.
+     */
+    return {
+      top: `${offset}px`,
+      bottom: `${offset}px`,
+    };
+  }
+  else {
+    return {
+      top: `calc(${offset}px + var(--ion-safe-area-top, 0px))`,
+      bottom: `calc(${offset}px - var(--ion-safe-area-bottom, 0px))`,
+    };
+  }
+}
+/**
+ * If the anchor element is hidden, getBoundingClientRect()
+ * will return all 0s for it, which can cause unexpected
+ * results in the position calculation when animating.
+ */
+function warnIfAnchorIsHidden(positionAnchor, toast) {
+  if (positionAnchor.offsetParent === null) {
+    printIonWarning('The positionAnchor element for ion-toast was found in the DOM, but appears to be hidden. This may lead to unexpected positioning of the toast.', toast);
+  }
+}
+/**
+ * Returns the top offset required to place
+ * the toast in the middle of the screen.
+ * Only needed when position="toast".
+ * @param toastHeight - The height of the ion-toast element
+ * @param wrapperHeight - The height of the .toast-wrapper element
+ * inside the toast's shadow root.
+ */
+const getOffsetForMiddlePosition = (toastHeight, wrapperHeight) => {
+  return Math.floor(toastHeight / 2 - wrapperHeight / 2);
+};
+
 /**
  * iOS Toast Enter Animation
  */
@@ -33978,7 +34066,7 @@ const iosEnterAnimation = (baseEl, opts) => {
       wrapperAnimation.fromTo('transform', 'translateY(-100%)', `translateY(${top})`);
       break;
     case 'middle':
-      const topPosition = Math.floor(baseEl.clientHeight / 2 - wrapperEl.clientHeight / 2);
+      const topPosition = getOffsetForMiddlePosition(baseEl.clientHeight, wrapperEl.clientHeight);
       wrapperEl.style.top = `${topPosition}px`;
       wrapperAnimation.fromTo('opacity', 0.01, 1);
       break;
@@ -34029,7 +34117,7 @@ const mdEnterAnimation = (baseEl, opts) => {
       wrapperAnimation.fromTo('opacity', 0.01, 1);
       break;
     case 'middle':
-      const topPosition = Math.floor(baseEl.clientHeight / 2 - wrapperEl.clientHeight / 2);
+      const topPosition = getOffsetForMiddlePosition(baseEl.clientHeight, wrapperEl.clientHeight);
       wrapperEl.style.top = `${topPosition}px`;
       wrapperAnimation.fromTo('opacity', 0.01, 1);
       break;
@@ -34054,80 +34142,261 @@ const mdLeaveAnimation = (baseEl) => {
 };
 
 /**
- * Calculate the CSS top and bottom position of the toast, to be used
- * as starting points for the animation keyframes.
- *
- * The default animations for both MD and iOS
- * use translateY, which calculates from the
- * top edge of the screen. This behavior impacts
- * how we compute the offset when a toast has
- * position='bottom' since we need to calculate from
- * the bottom edge of the screen instead.
- *
- * @param position The value of the toast's position prop.
- * @param positionAnchor The element the toast should be anchored to,
- * if applicable.
- * @param mode The toast component's mode (md, ios, etc).
- * @param toast A reference to the toast element itself.
+ * Create a gesture that allows the Toast
+ * to be swiped to dismiss.
+ * @param el - The Toast element
+ * @param toastPosition - The last computed position of the Toast. This is computed in the "present" method.
+ * @param onDismiss - A callback to fire when the Toast was swiped to dismiss.
  */
-function getAnimationPosition(position, positionAnchor, mode, toast) {
+const createSwipeToDismissGesture = (el, toastPosition, onDismiss) => {
   /**
-   * Start with a predefined offset from the edge the toast will be
-   * positioned relative to, whether on the screen or anchor element.
+   * Users should swipe on the visible toast wrapper
+   * rather than on ion-toast which covers the entire screen.
+   * When testing the class instance the inner wrapper will not
+   * be defined. As a result, we use a placeholder element in those environments.
    */
-  let offset;
-  if (mode === 'md') {
-    offset = position === 'top' ? 8 : -8;
-  }
-  else {
-    offset = position === 'top' ? 10 : -10;
-  }
+  const wrapperEl = getElementRoot(el).querySelector('.toast-wrapper');
+  const hostElHeight = el.clientHeight;
+  const wrapperElBox = wrapperEl.getBoundingClientRect();
   /**
-   * If positionAnchor is defined, add in the distance from the target
-   * screen edge to the target anchor edge. For position="top", the
-   * bottom anchor edge is targeted. For position="bottom", the top
-   * anchor edge is targeted.
+   * The maximum amount that
+   * the toast can be swiped. This should
+   * account for the wrapper element's height
+   * too so the toast can be swiped offscreen
+   * completely.
    */
-  if (positionAnchor && win$1) {
-    warnIfAnchorIsHidden(positionAnchor, toast);
-    const box = positionAnchor.getBoundingClientRect();
-    if (position === 'top') {
-      offset += box.bottom;
+  let MAX_SWIPE_DISTANCE = 0;
+  /**
+   * The step value at which a toast
+   * is eligible for dismissing via gesture.
+   */
+  const DISMISS_THRESHOLD = 0.5;
+  /**
+   * The middle position Toast starts 50% of the way
+   * through the animation, so we need to use this
+   * as the starting point for our step values.
+   */
+  const STEP_OFFSET = el.position === 'middle' ? 0.5 : 0;
+  /**
+   * When the Toast is at the top users will be
+   * swiping up. As a result, the delta values will be
+   * negative numbers which will result in negative steps
+   * and thresholds. As a result, we need to make those numbers
+   * positive.
+   */
+  const INVERSION_FACTOR = el.position === 'top' ? -1 : 1;
+  /**
+   * The top offset that places the
+   * toast in the middle of the screen.
+   * Only needed when position="middle".
+   */
+  const topPosition = getOffsetForMiddlePosition(hostElHeight, wrapperElBox.height);
+  const SWIPE_UP_DOWN_KEYFRAMES = [
+    { offset: 0, transform: `translateY(-${topPosition + wrapperElBox.height}px)` },
+    { offset: 0.5, transform: `translateY(0px)` },
+    { offset: 1, transform: `translateY(${topPosition + wrapperElBox.height}px)` },
+  ];
+  const swipeAnimation = createAnimation('toast-swipe-to-dismiss-animation')
+    .addElement(wrapperEl)
+    /**
+     * The specific value here does not actually
+     * matter. We just need this to be a positive
+     * value so the animation does not jump
+     * to the end when the user beings to drag.
+     */
+    .duration(100);
+  switch (el.position) {
+    case 'middle':
+      MAX_SWIPE_DISTANCE = hostElHeight + wrapperElBox.height;
+      swipeAnimation.keyframes(SWIPE_UP_DOWN_KEYFRAMES);
+      /**
+       * Toast can be swiped up or down but
+       * should start in the middle of the screen.
+       */
+      swipeAnimation.progressStart(true, 0.5);
+      break;
+    case 'top':
+      /**
+       * The bottom edge of the wrapper
+       * includes the distance between the top
+       * of the screen and the top of the wrapper
+       * as well as the wrapper height so the wrapper
+       * can be dragged fully offscreen.
+       */
+      MAX_SWIPE_DISTANCE = wrapperElBox.bottom;
+      swipeAnimation.keyframes([
+        { offset: 0, transform: `translateY(${toastPosition.top})` },
+        { offset: 1, transform: 'translateY(-100%)' },
+      ]);
+      swipeAnimation.progressStart(true, 0);
+      break;
+    case 'bottom':
+    default:
+      /**
+       * This computes the distance between the
+       * top of the wrapper and the bottom of the
+       * screen including the height of the wrapper
+       * element so it can be dragged fully offscreen.
+       */
+      MAX_SWIPE_DISTANCE = hostElHeight - wrapperElBox.top;
+      swipeAnimation.keyframes([
+        { offset: 0, transform: `translateY(${toastPosition.bottom})` },
+        { offset: 1, transform: 'translateY(100%)' },
+      ]);
+      swipeAnimation.progressStart(true, 0);
+      break;
+  }
+  const computeStep = (delta) => {
+    return (delta * INVERSION_FACTOR) / MAX_SWIPE_DISTANCE;
+  };
+  const onMove = (detail) => {
+    const step = STEP_OFFSET + computeStep(detail.deltaY);
+    swipeAnimation.progressStep(step);
+  };
+  const onEnd = (detail) => {
+    const velocity = detail.velocityY;
+    const threshold = ((detail.deltaY + velocity * 1000) / MAX_SWIPE_DISTANCE) * INVERSION_FACTOR;
+    /**
+     * Disable the gesture for the remainder of the animation.
+     * It will be re-enabled if the toast animates back to
+     * its initial presented position.
+     */
+    gesture.enable(false);
+    let shouldDismiss = true;
+    let playTo = 1;
+    let step = 0;
+    let remainingDistance = 0;
+    if (el.position === 'middle') {
+      /**
+       * A middle positioned Toast appears
+       * in the middle of the screen (at animation offset 0.5).
+       * As a result, the threshold will be calculated relative
+       * to this starting position. In other words at animation offset 0.5
+       * the threshold will be 0. We want the middle Toast to be eligible
+       * for dismiss when the user has swiped either half way up or down the
+       * screen. As a result, we divide DISMISS_THRESHOLD in half. We also
+       * consider when the threshold is a negative in the event the
+       * user drags up (since the deltaY will also be negative).
+       */
+      shouldDismiss = threshold >= DISMISS_THRESHOLD / 2 || threshold <= -DISMISS_THRESHOLD / 2;
+      /**
+       * Since we are replacing the keyframes
+       * below the animation always starts from
+       * the beginning of the new keyframes.
+       * Similarly, we are always playing to
+       * the end of the new keyframes.
+       */
+      playTo = 1;
+      step = 0;
+      /**
+       * The Toast should animate from wherever its
+       * current position is to the desired end state.
+       *
+       * To begin, we get the current position of the
+       * Toast for its starting state.
+       */
+      const wrapperElBox = wrapperEl.getBoundingClientRect();
+      const startOffset = wrapperElBox.top - topPosition;
+      const startPosition = `${startOffset}px`;
+      /**
+       * If the deltaY is negative then the user is swiping
+       * up, so the Toast should animate to the top of the screen.
+       * If the deltaY is positive then the user is swiping
+       * down, so the Toast should animate to the bottom of the screen.
+       * We also account for when the deltaY is 0, but realistically
+       * that should never happen because it means the user did not drag
+       * the toast.
+       */
+      const offsetFactor = detail.deltaY <= 0 ? -1 : 1;
+      const endOffset = (topPosition + wrapperElBox.height) * offsetFactor;
+      /**
+       * If the Toast should dismiss
+       * then we need to figure out which edge of
+       * the screen it should animate towards.
+       * By default, the Toast will come
+       * back to its default state in the
+       * middle of the screen.
+       */
+      const endPosition = shouldDismiss ? `${endOffset}px` : '0px';
+      const KEYFRAMES = [
+        { offset: 0, transform: `translateY(${startPosition})` },
+        { offset: 1, transform: `translateY(${endPosition})` },
+      ];
+      swipeAnimation.keyframes(KEYFRAMES);
+      /**
+       * Compute the remaining amount of pixels the
+       * toast needs to move to be fully dismissed.
+       */
+      remainingDistance = endOffset - startOffset;
     }
-    else if (position === 'bottom') {
+    else {
+      shouldDismiss = threshold >= DISMISS_THRESHOLD;
+      playTo = shouldDismiss ? 1 : 0;
+      step = computeStep(detail.deltaY);
       /**
-       * Just box.top is the distance from the top edge of the screen
-       * to the top edge of the anchor. We want to calculate from the
-       * bottom edge of the screen instead.
+       * Compute the remaining amount of pixels the
+       * toast needs to move to be fully dismissed.
        */
-      offset -= win$1.innerHeight - box.top;
+      const remainingStepAmount = shouldDismiss ? 1 - step : step;
+      remainingDistance = remainingStepAmount * MAX_SWIPE_DISTANCE;
     }
     /**
-     * We don't include safe area here because that should already be
-     * accounted for when checking the position of the anchor.
+     * The animation speed should depend on how quickly
+     * the user flicks the toast across the screen. However,
+     * it should be no slower than 200ms.
+     * We use Math.abs on the remainingDistance because that value
+     * can be negative when swiping up on a middle position toast.
      */
-    return {
-      top: `${offset}px`,
-      bottom: `${offset}px`,
-    };
-  }
-  else {
-    return {
-      top: `calc(${offset}px + var(--ion-safe-area-top, 0px))`,
-      bottom: `calc(${offset}px - var(--ion-safe-area-bottom, 0px))`,
-    };
-  }
-}
-/**
- * If the anchor element is hidden, getBoundingClientRect()
- * will return all 0s for it, which can cause unexpected
- * results in the position calculation when animating.
- */
-function warnIfAnchorIsHidden(positionAnchor, toast) {
-  if (positionAnchor.offsetParent === null) {
-    printIonWarning('The positionAnchor element for ion-toast was found in the DOM, but appears to be hidden. This may lead to unexpected positioning of the toast.', toast);
-  }
-}
+    const duration = Math.min(Math.abs(remainingDistance) / Math.abs(velocity), 200);
+    swipeAnimation
+      .onFinish(() => {
+      if (shouldDismiss) {
+        onDismiss();
+        swipeAnimation.destroy();
+      }
+      else {
+        if (el.position === 'middle') {
+          /**
+           * If the toast snapped back to
+           * the middle of the screen we need
+           * to reset the keyframes
+           * so the toast can be swiped
+           * up or down again.
+           */
+          swipeAnimation.keyframes(SWIPE_UP_DOWN_KEYFRAMES).progressStart(true, 0.5);
+        }
+        else {
+          swipeAnimation.progressStart(true, 0);
+        }
+        /**
+         * If the toast did not dismiss then
+         * the user should be able to swipe again.
+         */
+        gesture.enable(true);
+      }
+      /**
+       * This must be a one time callback
+       * otherwise a new callback will
+       * be added every time onEnd runs.
+       */
+    }, { oneTimeCallback: true })
+      .progressEnd(playTo, step, duration);
+  };
+  const gesture = createGesture({
+    el: wrapperEl,
+    gestureName: 'toast-swipe-to-dismiss',
+    gesturePriority: OVERLAY_GESTURE_PRIORITY,
+    /**
+     * Toast only supports vertical swipes.
+     * This needs to be updated if we later
+     * support horizontal swipes.
+     */
+    direction: 'y',
+    onMove,
+    onEnd,
+  });
+  return gesture;
+};
 
 const toastIosCss = "/*!@:host*/.sc-ion-toast-ios-h{--border-width:0;--border-style:none;--border-color:initial;--box-shadow:none;--min-width:auto;--width:auto;--min-height:auto;--height:auto;--max-height:auto;--white-space:normal;top:0;display:block;position:absolute;width:100%;height:100%;outline:none;color:var(--color);font-family:var(--ion-font-family, inherit);contain:strict;z-index:1001;pointer-events:none}@supports (inset-inline-start: 0){/*!@:host*/.sc-ion-toast-ios-h{inset-inline-start:0}}@supports not (inset-inline-start: 0){/*!@:host*/.sc-ion-toast-ios-h{left:0}/*!@:host-context([dir=rtl])*/[dir=rtl].sc-ion-toast-ios-h,[dir=rtl] .sc-ion-toast-ios-h{left:unset;right:unset;right:0}/*!@@supports selector(:dir(rtl))*/@supports .sc-ion-toast-ios selector(.sc-ion-toast-ios:dir(rtl)){.sc-ion-toast-ios-h:dir(rtl){left:unset;right:unset;right:0}}}/*!@:host(.overlay-hidden)*/.overlay-hidden.sc-ion-toast-ios-h{display:none}/*!@:host(.ion-color)*/.ion-color.sc-ion-toast-ios-h{--button-color:inherit;color:var(--ion-color-contrast)}/*!@:host(.ion-color) .toast-button-cancel*/.ion-color.sc-ion-toast-ios-h .toast-button-cancel.sc-ion-toast-ios{color:inherit}/*!@:host(.ion-color) .toast-wrapper*/.ion-color.sc-ion-toast-ios-h .toast-wrapper.sc-ion-toast-ios{background:var(--ion-color-base)}/*!@.toast-wrapper*/.toast-wrapper.sc-ion-toast-ios{border-radius:var(--border-radius);width:var(--width);min-width:var(--min-width);max-width:var(--max-width);height:var(--height);min-height:var(--min-height);max-height:var(--max-height);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow)}@supports (inset-inline-start: 0){/*!@.toast-wrapper*/.toast-wrapper.sc-ion-toast-ios{inset-inline-start:var(--start);inset-inline-end:var(--end)}}@supports not (inset-inline-start: 0){/*!@.toast-wrapper*/.toast-wrapper.sc-ion-toast-ios{left:var(--start);right:var(--end)}/*!@:host-context([dir=rtl]) .toast-wrapper*/[dir=rtl].sc-ion-toast-ios-h .toast-wrapper.sc-ion-toast-ios,[dir=rtl] .sc-ion-toast-ios-h .toast-wrapper.sc-ion-toast-ios{left:unset;right:unset;left:var(--end);right:var(--start)}/*!@[dir=rtl] .toast-wrapper*/[dir=rtl].sc-ion-toast-ios .toast-wrapper.sc-ion-toast-ios{left:unset;right:unset;left:var(--end);right:var(--start)}/*!@@supports selector(:dir(rtl))*/@supports .sc-ion-toast-ios selector(.sc-ion-toast-ios:dir(rtl)){.toast-wrapper:dir(rtl){left:unset;right:unset;left:var(--end);right:var(--start)}}}/*!@.toast-wrapper.toast-top*/.toast-wrapper.toast-top.sc-ion-toast-ios{-webkit-transform:translate3d(0,  -100%,  0);transform:translate3d(0,  -100%,  0);top:0}/*!@.toast-wrapper.toast-bottom*/.toast-wrapper.toast-bottom.sc-ion-toast-ios{-webkit-transform:translate3d(0,  100%,  0);transform:translate3d(0,  100%,  0);bottom:0}/*!@.toast-container*/.toast-container.sc-ion-toast-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;pointer-events:auto;height:inherit;min-height:inherit;max-height:inherit;contain:content}/*!@.toast-layout-stacked .toast-container*/.toast-layout-stacked.sc-ion-toast-ios .toast-container.sc-ion-toast-ios{-ms-flex-wrap:wrap;flex-wrap:wrap}/*!@.toast-layout-baseline .toast-content*/.toast-layout-baseline.sc-ion-toast-ios .toast-content.sc-ion-toast-ios{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}/*!@.toast-icon*/.toast-icon.sc-ion-toast-ios{-webkit-margin-start:16px;margin-inline-start:16px}/*!@.toast-content*/.toast-content.sc-ion-toast-ios{min-width:0}/*!@.toast-message*/.toast-message.sc-ion-toast-ios{-ms-flex:1;flex:1;white-space:var(--white-space)}/*!@.toast-button-group*/.toast-button-group.sc-ion-toast-ios{display:-ms-flexbox;display:flex}/*!@.toast-layout-stacked .toast-button-group*/.toast-layout-stacked.sc-ion-toast-ios .toast-button-group.sc-ion-toast-ios{-ms-flex-pack:end;justify-content:end;width:100%}/*!@.toast-button*/.toast-button.sc-ion-toast-ios{border:0;outline:none;color:var(--button-color);z-index:0}/*!@.toast-icon,\n.toast-button-icon*/.toast-icon.sc-ion-toast-ios,.toast-button-icon.sc-ion-toast-ios{font-size:1.4em}/*!@.toast-button-inner*/.toast-button-inner.sc-ion-toast-ios{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}@media (any-hover: hover){/*!@.toast-button:hover*/.toast-button.sc-ion-toast-ios:hover{cursor:pointer}}/*!@:host*/.sc-ion-toast-ios-h{--background:var(--ion-color-step-50, #f2f2f2);--border-radius:14px;--button-color:var(--ion-color-primary, #3880ff);--color:var(--ion-color-step-850, #262626);--max-width:700px;--max-height:478px;--start:10px;--end:10px;font-size:clamp(14px, 0.875rem, 43.4px)}/*!@.toast-wrapper*/.toast-wrapper.sc-ion-toast-ios{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto;margin-top:auto;margin-bottom:auto;display:block;position:absolute;z-index:10}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){/*!@:host(.toast-translucent) .toast-wrapper*/.toast-translucent.sc-ion-toast-ios-h .toast-wrapper.sc-ion-toast-ios{background:rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}/*!@:host(.ion-color.toast-translucent) .toast-wrapper*/.ion-color.toast-translucent.sc-ion-toast-ios-h .toast-wrapper.sc-ion-toast-ios{background:rgba(var(--ion-color-base-rgb), 0.8)}}/*!@.toast-wrapper.toast-middle*/.toast-wrapper.toast-middle.sc-ion-toast-ios{opacity:0.01}/*!@.toast-content*/.toast-content.sc-ion-toast-ios{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:15px;padding-bottom:15px}/*!@.toast-header*/.toast-header.sc-ion-toast-ios{margin-bottom:2px;font-weight:500}/*!@.toast-button*/.toast-button.sc-ion-toast-ios{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:10px;padding-bottom:10px;min-height:44px;-webkit-transition:background-color, opacity 100ms linear;transition:background-color, opacity 100ms linear;border:0;background-color:transparent;font-family:var(--ion-font-family);font-size:clamp(17px, 1.0625rem, 21.998px);font-weight:500;overflow:hidden}/*!@.toast-button.ion-activated*/.toast-button.ion-activated.sc-ion-toast-ios{opacity:0.4}@media (any-hover: hover){/*!@.toast-button:hover*/.toast-button.sc-ion-toast-ios:hover{opacity:0.6}}";
 
@@ -34167,6 +34436,41 @@ class Toast {
         this.callButtonHandler(cancelButton);
       }
     };
+    /**
+     * Create a new swipe gesture so Toast
+     * can be swiped to dismiss.
+     */
+    this.createSwipeGesture = (toastPosition) => {
+      const gesture = (this.gesture = createSwipeToDismissGesture(this.el, toastPosition, () => {
+        /**
+         * If the gesture completed then
+         * we should dismiss the toast.
+         */
+        this.dismiss(undefined, GESTURE);
+      }));
+      gesture.enable(true);
+    };
+    /**
+     * Destroy an existing swipe gesture
+     * so Toast can no longer be swiped to dismiss.
+     */
+    this.destroySwipeGesture = () => {
+      const { gesture } = this;
+      if (gesture === undefined) {
+        return;
+      }
+      gesture.destroy();
+      this.gesture = undefined;
+    };
+    /**
+     * Returns `true` if swipeGesture
+     * is configured to a value that enables the swipe behavior.
+     * Returns `false` otherwise.
+     */
+    this.prefersSwipeGesture = () => {
+      const { swipeGesture } = this;
+      return swipeGesture === 'vertical';
+    };
     this.revealContentToScreenReader = false;
     this.overlayIndex = undefined;
     this.delegate = undefined;
@@ -34187,9 +34491,37 @@ class Toast {
     this.animated = true;
     this.icon = undefined;
     this.htmlAttributes = undefined;
+    this.swipeGesture = undefined;
     this.isOpen = false;
     this.trigger = undefined;
   }
+  swipeGestureChanged() {
+    /**
+     * If the Toast is presented, then we need to destroy
+     * any actives gestures before a new gesture is potentially
+     * created below.
+     *
+     * If the Toast is dismissed, then no gesture should be available
+     * since the Toast is not visible. This case should never
+     * happen since the "dismiss" method handles destroying
+     * any active swipe gestures, but we keep this code
+     * around to handle the first case.
+     */
+    this.destroySwipeGesture();
+    /**
+     * A new swipe gesture should only be created
+     * if the Toast is presented. If the Toast is not
+     * yet presented then the "present" method will
+     * handle calling the swipe gesture setup function.
+     */
+    if (this.presented && this.prefersSwipeGesture()) {
+      /**
+       * If the Toast is presented then
+       * lastPresentedPosition is defined.
+       */
+      this.createSwipeGesture(this.lastPresentedPosition);
+    }
+  }
   onIsOpenChange(newValue, oldValue) {
     if (newValue === true && oldValue === false) {
       this.present();
@@ -34251,6 +34583,14 @@ class Toast {
     if (this.duration > 0) {
       this.durationTimeout = setTimeout(() => this.dismiss(undefined, 'timeout'), this.duration);
     }
+    /**
+     * If the Toast has a swipe gesture then we can
+     * create the gesture so users can swipe the
+     * presented Toast.
+     */
+    if (this.prefersSwipeGesture()) {
+      this.createSwipeGesture(animationPosition);
+    }
     unlock();
   }
   /**
@@ -34285,6 +34625,11 @@ class Toast {
       this.revealContentToScreenReader = false;
     }
     this.lastPresentedPosition = undefined;
+    /**
+     * If the Toast has a swipe gesture then we can
+     * safely destroy it now that it is dismissed.
+     */
+    this.destroySwipeGesture();
     unlock();
     return dismissed;
   }
@@ -34429,6 +34774,7 @@ class Toast {
   }
   get el() { return getElement(this); }
   static get watchers() { return {
+    "swipeGesture": ["swipeGestureChanged"],
     "isOpen": ["onIsOpenChange"],
     "trigger": ["triggerChanged"]
   }; }
@@ -34459,6 +34805,7 @@ class Toast {
       "animated": [4],
       "icon": [1],
       "htmlAttributes": [16],
+      "swipeGesture": [1, "swipe-gesture"],
       "isOpen": [4, "is-open"],
       "trigger": [1],
       "revealContentToScreenReader": [32],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.5.4-dev.11699632730.1e6d9b70",
+  "version": "7.5.4-dev.11699895923.130c21aa",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",