@ionic/core 7.5.4-dev.11699632730.1e6d9b70 → 7.5.4-dev.11700602203.1e7155a1

package/dist/cjs/ion-toast.cjs.entry.js

@@ -5,18 +5,107 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$2 = require('./index-73186843.js');
+const index$3 = require('./index-73186843.js');
 const config = require('./config-d5882735.js');
 const helpers = require('./helpers-ea4ccbcb.js');
 const lockController = require('./lock-controller-4ae2eb59.js');
 const index$1 = require('./index-cc7dfb7c.js');
-const overlays = require('./overlays-d80a2cf2.js');
+const overlays = require('./overlays-ba1a1e21.js');
 const theme = require('./theme-fbc56b3b.js');
 const ionicGlobal = require('./ionic-global-4538d91c.js');
 const animation = require('./animation-d101aa7a.js');
 const index = require('./index-c8d52405.js');
+const index$2 = require('./index-0ee995e4.js');
 require('./framework-delegate-c0873a6f.js');
 require('./hardware-back-button-b67c8e75.js');
+require('./gesture-controller-b46721be.js');
+
+/**
+ * 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 && index.win) {
+    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 -= index.win.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) {
+    index$1.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
@@ -33,7 +122,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;
@@ -84,7 +173,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;
@@ -109,80 +198,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 = helpers.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 && index.win) {
-    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 = animation.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 -= index.win.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) {
-    index$1.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 = index$2.createGesture({
+    el: wrapperEl,
+    gestureName: 'toast-swipe-to-dismiss',
+    gesturePriority: overlays.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{--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{inset-inline-start:0}}@supports not (inset-inline-start: 0){:host{left:0}:host-context([dir=rtl]){left:unset;right:unset;right:0}@supports selector(:dir(rtl)){:host(:dir(rtl)){left:unset;right:unset;right:0}}}:host(.overlay-hidden){display:none}:host(.ion-color){--button-color:inherit;color:var(--ion-color-contrast)}:host(.ion-color) .toast-button-cancel{color:inherit}:host(.ion-color) .toast-wrapper{background:var(--ion-color-base)}.toast-wrapper{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{inset-inline-start:var(--start);inset-inline-end:var(--end)}}@supports not (inset-inline-start: 0){.toast-wrapper{left:var(--start);right:var(--end)}:host-context([dir=rtl]) .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}[dir=rtl] .toast-wrapper{left:unset;right:unset;left:var(--end);right:var(--start)}@supports selector(:dir(rtl)){.toast-wrapper:dir(rtl){left:unset;right:unset;left:var(--end);right:var(--start)}}}.toast-wrapper.toast-top{-webkit-transform:translate3d(0,  -100%,  0);transform:translate3d(0,  -100%,  0);top:0}.toast-wrapper.toast-bottom{-webkit-transform:translate3d(0,  100%,  0);transform:translate3d(0,  100%,  0);bottom:0}.toast-container{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{-ms-flex-wrap:wrap;flex-wrap:wrap}.toast-layout-baseline .toast-content{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{-webkit-margin-start:16px;margin-inline-start:16px}.toast-content{min-width:0}.toast-message{-ms-flex:1;flex:1;white-space:var(--white-space)}.toast-button-group{display:-ms-flexbox;display:flex}.toast-layout-stacked .toast-button-group{-ms-flex-pack:end;justify-content:end;width:100%}.toast-button{border:0;outline:none;color:var(--button-color);z-index:0}.toast-icon,.toast-button-icon{font-size:1.4em}.toast-button-inner{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}@media (any-hover: hover){.toast-button:hover{cursor:pointer}}:host{--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{-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{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{background:rgba(var(--ion-color-base-rgb), 0.8)}}.toast-wrapper.toast-middle{opacity:0.01}.toast-content{-webkit-padding-start:15px;padding-inline-start:15px;-webkit-padding-end:15px;padding-inline-end:15px;padding-top:15px;padding-bottom:15px}.toast-header{margin-bottom:2px;font-weight:500}.toast-button{-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{opacity:0.4}@media (any-hover: hover){.toast-button:hover{opacity:0.6}}";
 
@@ -190,15 +460,15 @@ const toastMdCss = ":host{--border-width:0;--border-style:none;--border-color:in
 
 const Toast = class {
   constructor(hostRef) {
-    index$2.registerInstance(this, hostRef);
-    this.didPresent = index$2.createEvent(this, "ionToastDidPresent", 7);
-    this.willPresent = index$2.createEvent(this, "ionToastWillPresent", 7);
-    this.willDismiss = index$2.createEvent(this, "ionToastWillDismiss", 7);
-    this.didDismiss = index$2.createEvent(this, "ionToastDidDismiss", 7);
-    this.didPresentShorthand = index$2.createEvent(this, "didPresent", 7);
-    this.willPresentShorthand = index$2.createEvent(this, "willPresent", 7);
-    this.willDismissShorthand = index$2.createEvent(this, "willDismiss", 7);
-    this.didDismissShorthand = index$2.createEvent(this, "didDismiss", 7);
+    index$3.registerInstance(this, hostRef);
+    this.didPresent = index$3.createEvent(this, "ionToastDidPresent", 7);
+    this.willPresent = index$3.createEvent(this, "ionToastWillPresent", 7);
+    this.willDismiss = index$3.createEvent(this, "ionToastWillDismiss", 7);
+    this.didDismiss = index$3.createEvent(this, "ionToastDidDismiss", 7);
+    this.didPresentShorthand = index$3.createEvent(this, "didPresent", 7);
+    this.willPresentShorthand = index$3.createEvent(this, "willPresent", 7);
+    this.willDismissShorthand = index$3.createEvent(this, "willDismiss", 7);
+    this.didDismissShorthand = index$3.createEvent(this, "didDismiss", 7);
     this.delegateController = overlays.createDelegateController(this);
     this.lockController = lockController.createLockController();
     this.triggerController = overlays.createTriggerController();
@@ -211,6 +481,41 @@ const Toast = class {
         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, overlays.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;
@@ -231,9 +536,37 @@ const Toast = class {
     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();
@@ -295,6 +628,14 @@ const Toast = class {
     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();
   }
   /**
@@ -329,6 +670,11 @@ const Toast = class {
       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;
   }
@@ -427,7 +773,7 @@ const Toast = class {
       'toast-button-group': true,
       [`toast-button-group-${side}`]: true,
     };
-    return (index$2.h("div", { class: buttonGroupsClasses }, buttons.map((b) => (index$2.h("button", Object.assign({}, b.htmlAttributes, { type: "button", class: buttonClass(b), tabIndex: 0, onClick: () => this.buttonClick(b), part: buttonPart(b) }), index$2.h("div", { class: "toast-button-inner" }, b.icon && (index$2.h("ion-icon", { "aria-hidden": "true", icon: b.icon, slot: b.text === undefined ? 'icon-only' : undefined, class: "toast-button-icon" })), b.text), mode === 'md' && (index$2.h("ion-ripple-effect", { type: b.icon !== undefined && b.text === undefined ? 'unbounded' : 'bounded' })))))));
+    return (index$3.h("div", { class: buttonGroupsClasses }, buttons.map((b) => (index$3.h("button", Object.assign({}, b.htmlAttributes, { type: "button", class: buttonClass(b), tabIndex: 0, onClick: () => this.buttonClick(b), part: buttonPart(b) }), index$3.h("div", { class: "toast-button-inner" }, b.icon && (index$3.h("ion-icon", { "aria-hidden": "true", icon: b.icon, slot: b.text === undefined ? 'icon-only' : undefined, class: "toast-button-icon" })), b.text), mode === 'md' && (index$3.h("ion-ripple-effect", { type: b.icon !== undefined && b.text === undefined ? 'unbounded' : 'bounded' })))))));
   }
   /**
    * Render the `message` property.
@@ -437,9 +783,9 @@ const Toast = class {
   renderToastMessage(key, ariaHidden = null) {
     const { customHTMLEnabled, message } = this;
     if (customHTMLEnabled) {
-      return (index$2.h("div", { key: key, "aria-hidden": ariaHidden, class: "toast-message", part: "message", innerHTML: config.sanitizeDOMString(message) }));
+      return (index$3.h("div", { key: key, "aria-hidden": ariaHidden, class: "toast-message", part: "message", innerHTML: config.sanitizeDOMString(message) }));
     }
-    return (index$2.h("div", { key: key, "aria-hidden": ariaHidden, class: "toast-message", part: "message" }, message));
+    return (index$3.h("div", { key: key, "aria-hidden": ariaHidden, class: "toast-message", part: "message" }, message));
   }
   /**
    * Render the `header` property.
@@ -447,7 +793,7 @@ const Toast = class {
    * @param ariaHidden - If "true" then content will be hidden from screen readers.
    */
   renderHeader(key, ariaHidden = null) {
-    return (index$2.h("div", { key: key, class: "toast-header", "aria-hidden": ariaHidden, part: "header" }, this.header));
+    return (index$3.h("div", { key: key, class: "toast-header", "aria-hidden": ariaHidden, part: "header" }, this.header));
   }
   render() {
     const { layout, el, revealContentToScreenReader, header, message } = this;
@@ -467,12 +813,13 @@ const Toast = class {
     if (layout === 'stacked' && startButtons.length > 0 && endButtons.length > 0) {
       index$1.printIonWarning('This toast is using start and end buttons with the stacked toast layout. We recommend following the best practice of using either start or end buttons with the stacked toast layout.', el);
     }
-    return (index$2.h(index$2.Host, Object.assign({ tabindex: "-1" }, this.htmlAttributes, { style: {
+    return (index$3.h(index$3.Host, Object.assign({ tabindex: "-1" }, this.htmlAttributes, { style: {
         zIndex: `${60000 + this.overlayIndex}`,
-      }, class: theme.createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), index$2.h("div", { class: wrapperClass }, index$2.h("div", { class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (index$2.h("ion-icon", { class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), index$2.h("div", { class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
+      }, class: theme.createColorClasses(this.color, Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'toast-translucent': this.translucent })), onIonToastWillDismiss: this.dispatchCancelHandler }), index$3.h("div", { class: wrapperClass }, index$3.h("div", { class: "toast-container", part: "container" }, this.renderButtons(startButtons, 'start'), this.icon !== undefined && (index$3.h("ion-icon", { class: "toast-icon", part: "icon", icon: this.icon, lazy: false, "aria-hidden": "true" })), index$3.h("div", { class: "toast-content", role: "status", "aria-atomic": "true", "aria-live": "polite" }, !revealContentToScreenReader && header !== undefined && this.renderHeader('oldHeader', 'true'), !revealContentToScreenReader && message !== undefined && this.renderToastMessage('oldMessage', 'true'), revealContentToScreenReader && header !== undefined && this.renderHeader('header'), revealContentToScreenReader && message !== undefined && this.renderToastMessage('header')), this.renderButtons(endButtons, 'end')))));
   }
-  get el() { return index$2.getElement(this); }
+  get el() { return index$3.getElement(this); }
   static get watchers() { return {
+    "swipeGesture": ["swipeGestureChanged"],
     "isOpen": ["onIsOpenChange"],
     "trigger": ["triggerChanged"]
   }; }