@ionic/core 7.5.8-dev.11701806358.1ca1b519 → 7.5.8-dev.11701876182.1e71e7a0

package/dist/collection/components/toast/gestures/swipe-to-dismiss.js

@@ -0,0 +1,267 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { Build } from "@stencil/core";
+import { createAnimation } from "../../../utils/animation/animation";
+import { createGesture } from "../../../utils/gesture/index";
+import { getElementRoot } from "../../../utils/helpers";
+import { OVERLAY_GESTURE_PRIORITY } from "../../../utils/overlays";
+import { getOffsetForMiddlePosition } from "../animations/utils";
+/**
+ * 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.
+ */
+export const createSwipeToDismissGesture = (el, toastPosition, onDismiss) => {
+    /**
+     * 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.
+     */
+    const wrapperEl = Build.isTesting
+        ? document.createElement('div')
+        : getElementRoot(el).querySelector('.toast-wrapper');
+    const hostElHeight = el.clientHeight;
+    const wrapperElBox = wrapperEl.getBoundingClientRect();
+    /**
+     * 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.
+     */
+    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 {
+            shouldDismiss = threshold >= DISMISS_THRESHOLD;
+            playTo = shouldDismiss ? 1 : 0;
+            step = computeStep(detail.deltaY);
+            /**
+             * Compute the remaining amount of pixels the
+             * toast needs to move to be fully dismissed.
+             */
+            const remainingStepAmount = shouldDismiss ? 1 - step : step;
+            remainingDistance = remainingStepAmount * MAX_SWIPE_DISTANCE;
+        }
+        /**
+         * 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.
+         */
+        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;
+};

package/dist/collection/components/toast/test/swipe-gesture/toast.e2e.js

@@ -0,0 +1,84 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { configs, test, dragElementBy } from "../../../../utils/test/playwright/index";
+/**
+ * This behavior does not vary across modes and directions.
+ */
+configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) => {
+    test.describe(title('toast: swipe gesture with top position'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.goto('src/components/toast/test/swipe-gesture', config);
+        });
+        test('should swipe up to dismiss', async ({ page }) => {
+            const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+            const ionToastDidDismiss = await page.spyOnEvent('ionToastDidDismiss');
+            const presentButton = page.locator('#top');
+            await presentButton.click();
+            await ionToastDidPresent.next();
+            const toastWrapper = page.locator('ion-toast#top-toast .toast-wrapper');
+            await dragElementBy(toastWrapper, page, 0, -30);
+            await ionToastDidDismiss.next();
+        });
+        test('should swipe up to dismiss with anchor', async ({ page }) => {
+            const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+            const ionToastDidDismiss = await page.spyOnEvent('ionToastDidDismiss');
+            const presentButton = page.locator('#top-anchor');
+            await presentButton.click();
+            await ionToastDidPresent.next();
+            const toastWrapper = page.locator('ion-toast#top-anchor-toast .toast-wrapper');
+            await dragElementBy(toastWrapper, page, 0, -30);
+            await ionToastDidDismiss.next();
+        });
+    });
+    test.describe(title('toast: swipe gesture with bottom position'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.goto('src/components/toast/test/swipe-gesture', config);
+        });
+        test('should swipe down to dismiss', async ({ page }) => {
+            const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+            const ionToastDidDismiss = await page.spyOnEvent('ionToastDidDismiss');
+            const presentButton = page.locator('#bottom');
+            await presentButton.click();
+            await ionToastDidPresent.next();
+            const toastWrapper = page.locator('ion-toast#bottom-toast .toast-wrapper');
+            await dragElementBy(toastWrapper, page, 0, 30);
+            await ionToastDidDismiss.next();
+        });
+        test('should swipe down to dismiss with anchor', async ({ page }) => {
+            const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+            const ionToastDidDismiss = await page.spyOnEvent('ionToastDidDismiss');
+            const presentButton = page.locator('#bottom-anchor');
+            await presentButton.click();
+            await ionToastDidPresent.next();
+            const toastWrapper = page.locator('ion-toast#bottom-anchor-toast .toast-wrapper');
+            await dragElementBy(toastWrapper, page, 0, 30);
+            await ionToastDidDismiss.next();
+        });
+    });
+    test.describe(title('toast: swipe gesture with middle position'), () => {
+        test.beforeEach(async ({ page }) => {
+            await page.goto('src/components/toast/test/swipe-gesture', config);
+        });
+        test('should swipe down to dismiss', async ({ page }) => {
+            const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+            const ionToastDidDismiss = await page.spyOnEvent('ionToastDidDismiss');
+            const presentButton = page.locator('#middle');
+            await presentButton.click();
+            await ionToastDidPresent.next();
+            const toastWrapper = page.locator('ion-toast#middle-toast .toast-wrapper');
+            await dragElementBy(toastWrapper, page, 0, 100);
+            await ionToastDidDismiss.next();
+        });
+        test('should swipe up to dismiss', async ({ page }) => {
+            const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+            const ionToastDidDismiss = await page.spyOnEvent('ionToastDidDismiss');
+            const presentButton = page.locator('#middle');
+            await presentButton.click();
+            await ionToastDidPresent.next();
+            const toastWrapper = page.locator('ion-toast#middle-toast .toast-wrapper');
+            await dragElementBy(toastWrapper, page, 0, -100);
+            await ionToastDidDismiss.next();
+        });
+    });
+});

package/dist/collection/components/toast/test/toast-config.spec.js

@@ -0,0 +1,25 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { newSpecPage } from "@stencil/core/testing";
+import { Toast } from "../toast";
+import { config } from "../../../global/config";
+describe('toast: duration config', () => {
+    it('should have duration set to 0', async () => {
+        const page = await newSpecPage({
+            components: [Toast],
+            html: `<ion-toast></ion-toast>`,
+        });
+        const toast = page.body.querySelector('ion-toast');
+        expect(toast.duration).toBe(0);
+    });
+    it('should have duration set to 5000', async () => {
+        config.reset({ toastDuration: 5000 });
+        const page = await newSpecPage({
+            components: [Toast],
+            html: `<ion-toast></ion-toast>`,
+        });
+        const toast = page.body.querySelector('ion-toast');
+        expect(toast.duration).toBe(5000);
+    });
+});

package/dist/collection/components/toast/test/toast.spec.js

@@ -4,6 +4,7 @@
 import { h } from "@stencil/core";
 import { newSpecPage } from "@stencil/core/testing";
 import { config } from "../../../global/config";
+import { createAnimation } from "../../../utils/animation/animation";
 import { Toast } from "../toast";
 describe('toast: custom html', () => {
     it('should not allow for custom html by default', async () => {
@@ -118,3 +119,82 @@ describe('toast: button cancel', () => {
         expect(buttonCancel.getAttribute('part')).toBe('button cancel');
     });
 });
+describe('toast: swipe gesture', () => {
+    describe('prefersSwipeGesture()', () => {
+        let toast;
+        beforeEach(() => {
+            toast = new Toast();
+        });
+        it('should return true if set to a valid swipe value', () => {
+            toast.swipeGesture = 'vertical';
+            expect(toast.prefersSwipeGesture()).toBe(true);
+        });
+        it('should return false if set to undefined', () => {
+            toast.swipeGesture = undefined;
+            expect(toast.prefersSwipeGesture()).toBe(false);
+        });
+        it('should return false if set to null', () => {
+            toast.swipeGesture = null;
+            expect(toast.prefersSwipeGesture()).toBe(false);
+        });
+        it('should return false if set to invalid string', () => {
+            toast.swipeGesture = 'limit'; // `'limit'` doesn't exist
+            expect(toast.prefersSwipeGesture()).toBe(false);
+        });
+    });
+    describe('swipeGesture property', () => {
+        let toast;
+        beforeEach(() => {
+            toast = new Toast();
+            // Stub the enter animation so we aren't querying elements in the DOM that may not exist
+            toast.enterAnimation = () => createAnimation();
+        });
+        it('should not create a swipe gesture on present if swipeGesture is undefined', async () => {
+            expect(toast.gesture).toBe(undefined);
+            await toast.present();
+            expect(toast.gesture).toBe(undefined);
+        });
+        it('should create a swipe gesture on present', async () => {
+            toast.swipeGesture = 'vertical';
+            expect(toast.gesture).toBe(undefined);
+            await toast.present();
+            expect(toast.gesture).not.toBe(undefined);
+        });
+        it('should destroy a swipe gesture on dismiss', async () => {
+            toast.swipeGesture = 'vertical';
+            await toast.present();
+            expect(toast.gesture).not.toBe(undefined);
+            await toast.dismiss();
+            expect(toast.gesture).toBe(undefined);
+        });
+        it('should create a swipe gesture if swipeGesture is set after present', async () => {
+            await toast.present();
+            expect(toast.gesture).toBe(undefined);
+            /**
+             * Manually invoke the watch
+             * callback synchronously.
+             */
+            toast.swipeGesture = 'vertical';
+            toast.swipeGestureChanged();
+            expect(toast.gesture).not.toBe(undefined);
+        });
+        it('should destroy a swipe gesture if swipeGesture is cleared after present', async () => {
+            toast.swipeGesture = 'vertical';
+            await toast.present();
+            expect(toast.gesture).not.toBe(undefined);
+            /**
+             * Manually invoke the watch
+             * callback synchronously.
+             */
+            toast.swipeGesture = undefined;
+            toast.swipeGestureChanged();
+            expect(toast.gesture).toBe(undefined);
+        });
+        it('should not create a swipe gesture if the toast is not presented', async () => {
+            expect(toast.gesture).toBe(undefined);
+            toast.swipeGesture = 'vertical';
+            toast.swipeGestureChanged();
+            expect(toast.gesture).toBe(undefined);
+        });
+    });
+});

package/dist/collection/components/toast/toast.ios.css

@@ -189,6 +189,16 @@
   }
 }
 
+.toast-wrapper.toast-top {
+  transform: translate3d(0,  -100%,  0);
+  top: 0;
+}
+
+.toast-wrapper.toast-bottom {
+  transform: translate3d(0,  100%,  0);
+  bottom: 0;
+}
+
 .toast-container {
   display: flex;
   align-items: center;
@@ -343,20 +353,10 @@
     background: rgba(var(--ion-color-base-rgb), 0.8);
   }
 }
-.toast-wrapper.toast-top {
-  transform: translate3d(0,  -100%,  0);
-  top: 0;
-}
-
 .toast-wrapper.toast-middle {
   opacity: 0.01;
 }
 
-.toast-wrapper.toast-bottom {
-  transform: translate3d(0,  100%,  0);
-  bottom: 0;
-}
-
 .toast-content {
   -webkit-padding-start: 15px;
   padding-inline-start: 15px;

package/dist/collection/components/toast/toast.js

@@ -6,7 +6,7 @@ import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { raf } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
-import { createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
+import { GESTURE, createDelegateController, createTriggerController, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall, setOverlayId, } from "../../utils/overlays";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { createColorClasses, getClassMap } from "../../utils/theme";
 import { config } from "../../global/config";
@@ -16,6 +16,7 @@ import { iosLeaveAnimation } from "./animations/ios.leave";
 import { mdEnterAnimation } from "./animations/md.enter";
 import { mdLeaveAnimation } from "./animations/md.leave";
 import { getAnimationPosition } from "./animations/utils";
+import { createSwipeToDismissGesture } from "./gestures/swipe-to-dismiss";
 // TODO(FW-2832): types
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -41,6 +42,41 @@ export 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;
@@ -61,9 +97,37 @@ export 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();
@@ -135,6 +199,14 @@ export 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();
     }
     /**
@@ -169,6 +241,11 @@ export 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;
     }
@@ -709,6 +786,29 @@ export class Toast {
                     "text": "Additional attributes to pass to the toast."
                 }
             },
+            "swipeGesture": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ToastSwipeGestureDirection",
+                    "resolved": "\"vertical\" | undefined",
+                    "references": {
+                        "ToastSwipeGestureDirection": {
+                            "location": "import",
+                            "path": "./toast-interface",
+                            "id": "src/components/toast/toast-interface.ts::ToastSwipeGestureDirection"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If set to 'vertical', the Toast can be dismissed with\na swipe gesture. The swipe direction is determined by\nthe value of the `position` property:\n`top`: The Toast can be swiped up to dismiss.\n`bottom`: The Toast can be swiped down to dismiss.\n`middle`: The Toast can be swiped up or down to dismiss."
+                },
+                "attribute": "swipe-gesture",
+                "reflect": false
+            },
             "isOpen": {
                 "type": "boolean",
                 "mutable": false,
@@ -1019,6 +1119,9 @@ export class Toast {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "swipeGesture",
+                "methodName": "swipeGestureChanged"
+            }, {
                 "propName": "isOpen",
                 "methodName": "onIsOpenChange"
             }, {

package/dist/collection/components/toast/toast.md.css

@@ -189,6 +189,16 @@
   }
 }
 
+.toast-wrapper.toast-top {
+  transform: translate3d(0,  -100%,  0);
+  top: 0;
+}
+
+.toast-wrapper.toast-bottom {
+  transform: translate3d(0,  100%,  0);
+  bottom: 0;
+}
+
 .toast-container {
   display: flex;
   align-items: center;