voyager-ionic-core 7.2.3 → 7.5.0

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

@@ -1,25 +1,26 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Host, h, writeTask } from '@stencil/core';
+import { Host, h, writeTask } from "@stencil/core";
 import { findIonContent, printIonContentErrorMsg } from "../../utils/content/index";
 import { CoreDelegate, attachComponent, detachComponent } from "../../utils/framework-delegate";
 import { raf, inheritAttributes, hasLazyBuild } from "../../utils/helpers";
+import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
 import { Style as StatusBarStyle, StatusBar } from "../../utils/native/status-bar";
 import { GESTURE, BACKDROP, activeAnimations, dismiss, eventMethod, prepareOverlay, present, createTriggerController, setOverlayId, } from "../../utils/overlays";
 import { getClassMap } from "../../utils/theme";
 import { deepReady, waitForMount } from "../../utils/transition/index";
-import { config } from '../../global/config';
-import { getIonMode } from '../../global/ionic-global';
-import { KEYBOARD_DID_OPEN } from '../../utils/keyboard/keyboard';
-import { iosEnterAnimation } from './animations/ios.enter';
-import { iosLeaveAnimation } from './animations/ios.leave';
-import { mdEnterAnimation } from './animations/md.enter';
-import { mdLeaveAnimation } from './animations/md.leave';
-import { createSheetGesture } from './gestures/sheet';
-import { createSwipeToCloseGesture } from './gestures/swipe-to-close';
-import { setCardStatusBarDark, setCardStatusBarDefault } from './utils';
+import { config } from "../../global/config";
+import { getIonMode } from "../../global/ionic-global";
+import { KEYBOARD_DID_OPEN } from "../../utils/keyboard/keyboard";
+import { iosEnterAnimation } from "./animations/ios.enter";
+import { iosLeaveAnimation } from "./animations/ios.leave";
+import { mdEnterAnimation } from "./animations/md.enter";
+import { mdLeaveAnimation } from "./animations/md.leave";
+import { createSheetGesture } from "./gestures/sheet";
+import { createSwipeToCloseGesture } from "./gestures/swipe-to-close";
+import { setCardStatusBarDark, setCardStatusBarDefault } from "./utils";
 // TODO(FW-2832): types
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
@@ -32,6 +33,7 @@ import { setCardStatusBarDark, setCardStatusBarDefault } from './utils';
  */
 export class Modal {
   constructor() {
+    this.lockController = createLockController();
     this.triggerController = createTriggerController();
     this.coreDelegate = CoreDelegate();
     this.isSheetModal = false;
@@ -196,29 +198,25 @@ export class Modal {
    * Present the modal overlay after it has been created.
    */
   async present() {
+    const unlock = await this.lockController.lock();
     if (this.presented) {
+      unlock();
       return;
     }
     const { presentingElement, el } = this;
-    /**
-     * When using an inline modal
-     * and dismissing a modal it is possible to
-     * quickly present the modal while it is
-     * dismissing. We need to await any current
-     * transition to allow the dismiss to finish
-     * before presenting again.
-     */
-    if (this.currentTransition !== undefined) {
-      await this.currentTransition;
-    }
     /**
      * If the modal is presented multiple times (inline modals), we
      * need to reset the current breakpoint to the initial breakpoint.
      */
     this.currentBreakpoint = this.initialBreakpoint;
     const { inline, delegate } = this.getDelegate(true);
-    this.usersElement = await attachComponent(delegate, el, this.component, ['ion-page'], this.componentProps, inline);
+    /**
+     * Emit ionMount so JS Frameworks have an opportunity
+     * to add the child component to the DOM. The child
+     * component will be assigned to this.usersElement below.
+     */
     this.ionMount.emit();
+    this.usersElement = await attachComponent(delegate, el, this.component, ['ion-page'], this.componentProps, inline);
     /**
      * When using the lazy loaded build of Stencil, we need to wait
      * for every Stencil component instance to be ready before presenting
@@ -242,7 +240,18 @@ export class Modal {
       await waitForMount();
     }
     writeTask(() => this.el.classList.add('show-modal'));
-    this.currentTransition = present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
+    const hasCardModal = presentingElement !== undefined;
+    /**
+     * We need to change the status bar at the
+     * start of the animation so that it completes
+     * by the time the card animation is done.
+     */
+    if (hasCardModal && getIonMode(this) === 'ios') {
+      // Cache the original status bar color before the modal is presented
+      this.statusBarStyle = await StatusBar.getStyle();
+      setCardStatusBarDark();
+    }
+    await present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
       presentingEl: presentingElement,
       currentBreakpoint: this.initialBreakpoint,
       backdropBreakpoint: this.backdropBreakpoint,
@@ -278,25 +287,13 @@ export class Modal {
       };
       window.addEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
     }
-    const hasCardModal = presentingElement !== undefined;
-    /**
-     * We need to change the status bar at the
-     * start of the animation so that it completes
-     * by the time the card animation is done.
-     */
-    if (hasCardModal && getIonMode(this) === 'ios') {
-      // Cache the original status bar color before the modal is presented
-      this.statusBarStyle = await StatusBar.getStyle();
-      setCardStatusBarDark();
-    }
-    await this.currentTransition;
     if (this.isSheetModal) {
       this.initSheetGesture();
     }
     else if (hasCardModal) {
       this.initSwipeToClose();
     }
-    this.currentTransition = undefined;
+    unlock();
   }
   initSwipeToClose() {
     var _a;
@@ -327,6 +324,15 @@ export class Modal {
        * removed from the DOM.
        */
       this.gestureAnimationDismissing = true;
+      /**
+       * Reset the status bar style as the dismiss animation
+       * starts otherwise the status bar will be the wrong
+       * color for the duration of the dismiss animation.
+       * The dismiss method does this as well, but
+       * in this case it's only called once the animation
+       * has finished.
+       */
+      setCardStatusBarDefault(this.statusBarStyle);
       this.animation.onFinish(async () => {
         await this.dismiss(undefined, GESTURE);
         this.gestureAnimationDismissing = false;
@@ -386,12 +392,19 @@ export class Modal {
     if (this.gestureAnimationDismissing && role !== GESTURE) {
       return false;
     }
+    /**
+     * Because the canDismiss check below is async,
+     * we need to claim a lock before the check happens,
+     * in case the dismiss transition does run.
+     */
+    const unlock = await this.lockController.lock();
     /**
      * If a canDismiss handler is responsible
      * for calling the dismiss method, we should
      * not run the canDismiss check again.
      */
     if (role !== 'handler' && !(await this.checkCanDismiss(data, role))) {
+      unlock();
       return false;
     }
     const { presentingElement } = this;
@@ -409,24 +422,12 @@ export class Modal {
       window.removeEventListener(KEYBOARD_DID_OPEN, this.keyboardOpenCallback);
       this.keyboardOpenCallback = undefined;
     }
-    /**
-     * When using an inline modal
-     * and presenting a modal it is possible to
-     * quickly dismiss the modal while it is
-     * presenting. We need to await any current
-     * transition to allow the present to finish
-     * before dismissing again.
-     */
-    if (this.currentTransition !== undefined) {
-      await this.currentTransition;
-    }
     const enteringAnimation = activeAnimations.get(this) || [];
-    this.currentTransition = dismiss(this, data, role, 'modalLeave', iosLeaveAnimation, mdLeaveAnimation, {
+    const dismissed = await dismiss(this, data, role, 'modalLeave', iosLeaveAnimation, mdLeaveAnimation, {
       presentingEl: presentingElement,
       currentBreakpoint: (_a = this.currentBreakpoint) !== null && _a !== void 0 ? _a : this.initialBreakpoint,
       backdropBreakpoint: this.backdropBreakpoint,
     });
-    const dismissed = await this.currentTransition;
     if (dismissed) {
       const { delegate } = this.getDelegate();
       await detachComponent(delegate, this.usersElement);
@@ -440,8 +441,8 @@ export class Modal {
       enteringAnimation.forEach((ani) => ani.destroy());
     }
     this.currentBreakpoint = undefined;
-    this.currentTransition = undefined;
     this.animation = undefined;
+    unlock();
     return dismissed;
   }
   /**
@@ -597,7 +598,8 @@ export class Modal {
           "references": {
             "FrameworkDelegate": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../interface",
+              "id": "src/interface.d.ts::FrameworkDelegate"
             }
           }
         },
@@ -638,7 +640,8 @@ export class Modal {
           "references": {
             "AnimationBuilder": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../interface",
+              "id": "src/interface.d.ts::AnimationBuilder"
             }
           }
         },
@@ -658,7 +661,8 @@ export class Modal {
           "references": {
             "AnimationBuilder": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../interface",
+              "id": "src/interface.d.ts::AnimationBuilder"
             }
           }
         },
@@ -745,7 +749,8 @@ export class Modal {
           "references": {
             "ModalHandleBehavior": {
               "location": "import",
-              "path": "./modal-interface"
+              "path": "./modal-interface",
+              "id": "src/components/modal/modal-interface.ts::ModalHandleBehavior"
             }
           }
         },
@@ -768,7 +773,8 @@ export class Modal {
           "references": {
             "ComponentRef": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../interface",
+              "id": "src/interface.d.ts::ComponentRef"
             }
           }
         },
@@ -793,7 +799,8 @@ export class Modal {
           "references": {
             "ComponentProps": {
               "location": "import",
-              "path": "../../interface"
+              "path": "../../interface",
+              "id": "src/interface.d.ts::ComponentProps"
             }
           }
         },
@@ -889,7 +896,8 @@ export class Modal {
           "resolved": "HTMLElement | undefined",
           "references": {
             "HTMLElement": {
-              "location": "global"
+              "location": "global",
+              "id": "global::HTMLElement"
             }
           }
         },
@@ -976,7 +984,8 @@ export class Modal {
           "resolved": "((data?: any, role?: string | undefined) => Promise<boolean>) | boolean",
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           }
         },
@@ -1044,7 +1053,8 @@ export class Modal {
           "references": {
             "OverlayEventDetail": {
               "location": "import",
-              "path": "../../utils/overlays-interface"
+              "path": "../../utils/overlays-interface",
+              "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
             }
           }
         }
@@ -1064,7 +1074,8 @@ export class Modal {
           "references": {
             "OverlayEventDetail": {
               "location": "import",
-              "path": "../../utils/overlays-interface"
+              "path": "../../utils/overlays-interface",
+              "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
             }
           }
         }
@@ -1084,7 +1095,8 @@ export class Modal {
           "references": {
             "ModalBreakpointChangeEventDetail": {
               "location": "import",
-              "path": "./modal-interface"
+              "path": "./modal-interface",
+              "id": "src/components/modal/modal-interface.ts::ModalBreakpointChangeEventDetail"
             }
           }
         }
@@ -1134,7 +1146,8 @@ export class Modal {
           "references": {
             "OverlayEventDetail": {
               "location": "import",
-              "path": "../../utils/overlays-interface"
+              "path": "../../utils/overlays-interface",
+              "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
             }
           }
         }
@@ -1154,7 +1167,8 @@ export class Modal {
           "references": {
             "OverlayEventDetail": {
               "location": "import",
-              "path": "../../utils/overlays-interface"
+              "path": "../../utils/overlays-interface",
+              "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
             }
           }
         }
@@ -1186,10 +1200,12 @@ export class Modal {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "ModalPresentOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::ModalPresentOptions"
             }
           },
           "return": "Promise<void>"
@@ -1217,10 +1233,12 @@ export class Modal {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "ModalDismissOptions": {
-              "location": "global"
+              "location": "global",
+              "id": "global::ModalDismissOptions"
             }
           },
           "return": "Promise<boolean>"
@@ -1242,14 +1260,17 @@ export class Modal {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "OverlayEventDetail": {
               "location": "import",
-              "path": "../../utils/overlays-interface"
+              "path": "../../utils/overlays-interface",
+              "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
             },
             "T": {
-              "location": "global"
+              "location": "global",
+              "id": "global::T"
             }
           },
           "return": "Promise<OverlayEventDetail<T>>"
@@ -1265,14 +1286,17 @@ export class Modal {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             },
             "OverlayEventDetail": {
               "location": "import",
-              "path": "../../utils/overlays-interface"
+              "path": "../../utils/overlays-interface",
+              "id": "src/utils/overlays-interface.ts::OverlayEventDetail"
             },
             "T": {
-              "location": "global"
+              "location": "global",
+              "id": "global::T"
             }
           },
           "return": "Promise<OverlayEventDetail<T>>"
@@ -1291,7 +1315,8 @@ export class Modal {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -1307,7 +1332,8 @@ export class Modal {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<number | undefined>"

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

@@ -1,3 +1,36 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 :host {
   /**
    * @prop --background: Background of the modal content
@@ -146,6 +179,39 @@ ion-backdrop {
   bottom: 0;
 }
 
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 :host {
   --backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
 }

package/dist/collection/components/modal/test/a11y/modal.e2e.js

@@ -1,8 +1,8 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import AxeBuilder from '@axe-core/playwright';
-import { expect } from '@playwright/test';
+import AxeBuilder from "@axe-core/playwright";
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('modal: a11y'), () => {

package/dist/collection/components/modal/test/basic/modal.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test, Viewports } from "../../../../utils/test/playwright/index";
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('modal: focus trapping'), () => {

package/dist/collection/components/modal/test/can-dismiss/modal-card.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test, dragElementBy } from "../../../../utils/test/playwright/index";
 /**
  * Card modals are an iOS-only feature

package/dist/collection/components/modal/test/can-dismiss/modal-sheet.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test, dragElementBy } from "../../../../utils/test/playwright/index";
 /**
  * This behavior does not vary across modes/directions
@@ -55,7 +55,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         await page.click('#sheet-can-dismiss-promise-true');
         await ionModalDidPresent.next();
         const modalHeader = page.locator('#modal-header');
-        await dragElementBy(modalHeader, page, 0, -500);
+        await dragElementBy(modalHeader, page, 0, 30);
         const modal = page.locator('ion-modal');
         expect(modal).not.toBe(null);
       });

package/dist/collection/components/modal/test/can-dismiss/modal.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test, dragElementBy } from "../../../../utils/test/playwright/index";
 /**
  * This behavior does not vary across modes/directions

package/dist/collection/components/modal/test/card/modal-card.e2e.js

@@ -1,9 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test } from "../../../../utils/test/playwright/index";
-import { CardModalPage } from '../fixtures';
+import { CardModalPage } from "../fixtures";
 /**
  * This behavior does not vary across directions.
  */

package/dist/collection/components/modal/test/card/modal-tablet.e2e.js

@@ -1,9 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test, Viewports } from "../../../../utils/test/playwright/index";
-import { CardModalPage } from '../fixtures';
+import { CardModalPage } from "../fixtures";
 /**
  * This behavior does not vary across directions.
  */
@@ -56,19 +56,19 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       });
       test('it should not swipe to close when swiped on the content but the content is scrolled', async ({ page }) => {
         const modal = await cardModalPage.openModalByTrigger('#card');
-        const content = (await page.$('ion-modal ion-content'));
+        const content = page.locator('ion-modal ion-content');
         await content.evaluate((el) => el.scrollToBottom(0));
         await cardModalPage.swipeToCloseModal('ion-modal ion-content', false);
-        await content.waitForElementState('stable');
+        await content.waitFor();
         await expect(modal).toBeVisible();
       });
       test('it should not swipe to close when swiped on the content but the content is scrolled even when content is replaced', async ({ page, }) => {
         const modal = await cardModalPage.openModalByTrigger('#card');
         await page.click('ion-button.replace');
-        const content = (await page.$('ion-modal ion-content'));
+        const content = page.locator('ion-modal ion-content');
         await content.evaluate((el) => el.scrollToBottom(0));
         await cardModalPage.swipeToCloseModal('ion-modal ion-content', false);
-        await content.waitForElementState('stable');
+        await content.waitFor();
         await expect(modal).toBeVisible();
       });
       test('content should be scrollable after gesture ends', async ({ page }) => {

package/dist/collection/components/modal/test/card-nav/modal.e2e.js

@@ -1,17 +1,16 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, test, dragElementBy } from "../../../../utils/test/playwright/index";
-import { CardModalPage } from '../fixtures';
+import { CardModalPage } from "../fixtures";
 /**
  * This test only verifies that the gesture activates inside of a modal.
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('card modal - nav'), () => {
     let cardModalPage;
-    test.beforeEach(async ({ page, skip }) => {
-      skip.browser((browserName) => browserName !== 'chromium', 'dragElementBy is flaky outside of Chrome browsers.');
+    test.beforeEach(async ({ page }) => {
       cardModalPage = new CardModalPage(page);
       await cardModalPage.navigate('/src/components/modal/test/card-nav?ionic:_testing=false', config);
     });
@@ -24,7 +23,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       const pageOne = page.locator('page-one');
       await expect(pageOne).toHaveClass(/ion-page-hidden/);
       const content = page.locator('.page-two-content');
-      await dragElementBy(content, page, 1000, 0, 10);
+      await dragElementBy(content, page, 370, 0, 10);
       await ionNavDidChange.next();
     });
     test('should swipe to close', async ({ page }) => {
@@ -33,7 +32,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       const ionNavDidChange = await nav.spyOnEvent('ionNavDidChange');
       await page.click('#go-page-two');
       await ionNavDidChange.next();
-      await cardModalPage.swipeToCloseModal('ion-modal ion-content.page-two-content');
+      await cardModalPage.swipeToCloseModal('ion-modal ion-content.page-two-content', true, 270);
     });
   });
 });

package/dist/collection/components/modal/test/card-refresher/modal.e2e.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { expect } from '@playwright/test';
+import { expect } from "@playwright/test";
 import { configs, dragElementBy, test } from "../../../../utils/test/playwright/index";
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('card modal - with refresher'), () => {
@@ -14,7 +14,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await ionModalDidPresent.next();
       const modal = page.locator('ion-modal');
       const content = (await page.$('ion-modal ion-content'));
-      await dragElementBy(content, page, 0, 500);
+      await dragElementBy(content, page, 0, 300);
       await content.waitForElementState('stable');
       await expect(modal).toBeVisible();
     });