@ionic/core 7.5.8 → 7.6.0

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

@@ -356,9 +356,7 @@
 }
 
 .native-wrapper {
-  display: flex;
   position: relative;
-  flex-grow: 1;
   width: 100%;
   height: 100%;
 }
@@ -429,6 +427,12 @@
   word-break: break-word;
 }
 
+.textarea-wrapper-inner {
+  display: flex;
+  width: 100%;
+  min-height: inherit;
+}
+
 :host(.ion-touched.ion-invalid) {
   --highlight-color: var(--highlight-color-invalid);
 }
@@ -704,6 +708,13 @@
   margin-bottom: 0px;
 }
 
+:host(.textarea-label-placement-stacked) ::slotted([slot=start]),
+:host(.textarea-label-placement-stacked) ::slotted([slot=end]),
+:host(.textarea-label-placement-floating) ::slotted([slot=start]),
+:host(.textarea-label-placement-floating) ::slotted([slot=end]) {
+  margin-top: 8px;
+}
+
 /**
  * This makes the label sit over the textarea
  * when the textarea is blurred and has no value.
@@ -729,9 +740,7 @@
 /**
  * This makes the label sit above the textarea.
  */
-:host(.textarea-label-placement-stacked) .label-text-wrapper,
-:host(.has-focus.textarea-label-placement-floating) .label-text-wrapper,
-:host(.has-value.textarea-label-placement-floating) .label-text-wrapper {
+:host(.label-floating) .label-text-wrapper {
   transform: translateY(50%) scale(0.75);
   /**
    * Label text should not extend
@@ -740,6 +749,29 @@
   max-width: calc(100% / 0.75);
 }
 
+.start-slot-wrapper, .end-slot-wrapper {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+  display: flex;
+  flex-shrink: 0;
+  align-self: start;
+}
+
+::slotted([slot=start]),
+::slotted([slot=end]) {
+  margin-top: 0;
+}
+
+::slotted([slot=start]) {
+  margin-inline-end: 16px;
+}
+
+::slotted([slot=end]) {
+  margin-inline-start: 16px;
+}
+
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -1037,9 +1069,7 @@
   }
 }
 
-:host(.textarea-fill-solid.textarea-label-placement-stacked) .label-text-wrapper,
-:host(.has-focus.textarea-fill-solid.textarea-label-placement-floating) .label-text-wrapper,
-:host(.has-value.textarea-fill-solid.textarea-label-placement-floating) .label-text-wrapper {
+:host(.label-floating.textarea-fill-solid) .label-text-wrapper {
   /**
    * Label text should not extend
    * beyond the bounds of the textarea.
@@ -1193,9 +1223,7 @@
 /**
  * This makes the label sit above the textarea.
  */
-:host(.has-focus.textarea-fill-outline.textarea-label-placement-floating) .label-text-wrapper,
-:host(.has-value.textarea-fill-outline.textarea-label-placement-floating) .label-text-wrapper,
-:host(.textarea-fill-outline.textarea-label-placement-stacked) .label-text-wrapper {
+:host(.label-floating.textarea-fill-outline) .label-text-wrapper {
   transform: translateY(-32%) scale(0.75);
   margin-left: 0;
   margin-right: 0;
@@ -1227,6 +1255,13 @@
   margin-bottom: 0px;
 }
 
+:host(.textarea-fill-outline.textarea-label-placement-stacked) ::slotted([slot=start]),
+:host(.textarea-fill-outline.textarea-label-placement-stacked) ::slotted([slot=end]),
+:host(.textarea-fill-outline.textarea-label-placement-floating) ::slotted([slot=start]),
+:host(.textarea-fill-outline.textarea-label-placement-floating) ::slotted([slot=end]) {
+  margin-top: 12px;
+}
+
 :host(.textarea-fill-outline) .textarea-outline-container {
   left: 0;
   right: 0;
@@ -1362,9 +1397,7 @@
  * the floating/stacked label. We simulate this "cut out"
  * by removing the top border from the notch fragment.
  */
-:host(.has-focus.textarea-fill-outline.textarea-label-placement-floating) .textarea-outline-notch,
-:host(.has-value.textarea-fill-outline.textarea-label-placement-floating) .textarea-outline-notch,
-:host(.textarea-fill-outline.textarea-label-placement-stacked) .textarea-outline-notch {
+:host(.label-floating.textarea-fill-outline) .textarea-outline-notch {
   border-top: none;
 }
 

package/dist/collection/components/toast/animations/ios.enter.js

@@ -3,6 +3,7 @@
  */
 import { createAnimation } from "../../../utils/animation/animation";
 import { getElementRoot } from "../../../utils/helpers";
+import { getOffsetForMiddlePosition } from "./utils";
 /**
  * iOS Toast Enter Animation
  */
@@ -18,7 +19,7 @@ export 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;

package/dist/collection/components/toast/animations/md.enter.js

@@ -3,6 +3,7 @@
  */
 import { createAnimation } from "../../../utils/animation/animation";
 import { getElementRoot } from "../../../utils/helpers";
+import { getOffsetForMiddlePosition } from "./utils";
 /**
  * MD Toast Enter Animation
  */
@@ -15,16 +16,16 @@ export const mdEnterAnimation = (baseEl, opts) => {
     wrapperAnimation.addElement(wrapperEl);
     switch (position) {
         case 'top':
-            wrapperEl.style.top = top;
+            wrapperEl.style.setProperty('transform', `translateY(${top})`);
             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;
         default:
-            wrapperEl.style.bottom = bottom;
+            wrapperEl.style.setProperty('transform', `translateY(${bottom})`);
             wrapperAnimation.fromTo('opacity', 0.01, 1);
             break;
     }

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

@@ -7,10 +7,12 @@ import { printIonWarning } from "../../../utils/logging/index";
  * Calculate the CSS top and bottom position of the toast, to be used
  * as starting points for the animation keyframes.
  *
- * Note that MD animates bottom-positioned toasts using style.bottom,
- * which calculates from the bottom edge of the screen, while iOS uses
- * translateY, which calculates from the top edge of the screen. This
- * is why the bottom calculates differ slightly between modes.
+ * 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,
@@ -25,7 +27,7 @@ export function getAnimationPosition(position, positionAnchor, mode, toast) {
      */
     let offset;
     if (mode === 'md') {
-        offset = 8;
+        offset = position === 'top' ? 8 : -8;
     }
     else {
         offset = position === 'top' ? 10 : -10;
@@ -48,12 +50,7 @@ export function getAnimationPosition(position, positionAnchor, mode, toast) {
              * to the top edge of the anchor. We want to calculate from the
              * bottom edge of the screen instead.
              */
-            if (mode === 'md') {
-                offset += win.innerHeight - box.top;
-            }
-            else {
-                offset -= win.innerHeight - box.top;
-            }
+            offset -= win.innerHeight - box.top;
         }
         /**
          * We don't include safe area here because that should already be
@@ -67,9 +64,7 @@ export function getAnimationPosition(position, positionAnchor, mode, toast) {
     else {
         return {
             top: `calc(${offset}px + var(--ion-safe-area-top, 0px))`,
-            bottom: mode === 'md'
-                ? `calc(${offset}px + var(--ion-safe-area-bottom, 0px))`
-                : `calc(${offset}px - var(--ion-safe-area-bottom, 0px))`,
+            bottom: `calc(${offset}px - var(--ion-safe-area-bottom, 0px))`,
         };
     }
 }
@@ -83,3 +78,14 @@ function warnIfAnchorIsHidden(positionAnchor, toast) {
         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.
+ */
+export const getOffsetForMiddlePosition = (toastHeight, wrapperHeight) => {
+    return Math.floor(toastHeight / 2 - wrapperHeight / 2);
+};

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);
+    });
+});