diff --git a/core/src/components/modal/test/a11y/modal.e2e-legacy.ts b/core/src/components/modal/test/a11y/modal.e2e-legacy.ts
deleted file mode 100644
index 6a040388a2..0000000000
--- a/core/src/components/modal/test/a11y/modal.e2e-legacy.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import AxeBuilder from '@axe-core/playwright';
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('modal: a11y', () => {
-  test.beforeEach(async ({ skip }) => {
-    skip.rtl();
-    skip.mode('md');
-  });
-
-  test('should not have accessibility violations', async ({ page }) => {
-    await page.goto(`/src/components/modal/test/a11y`);
-
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-    const button = page.locator('#open-modal');
-    const modal = page.locator('ion-modal .modal-wrapper');
-
-    await expect(modal).toHaveAttribute('role', 'dialog');
-
-    await button.click();
-    await ionModalDidPresent.next();
-
-    const results = await new AxeBuilder({ page }).analyze();
-    expect(results.violations).toEqual([]);
-  });
-
-  test('should allow for custom role', async ({ page }) => {
-    /**
-     * Note: This example should not be used in production.
-     * This only serves to check that `role` can be customized.
-     */
-    await page.setContent(`
-      <ion-modal role="alertdialog"></ion-modal>
-    `);
-    const modal = page.locator('ion-modal .modal-wrapper');
-
-    await expect(modal).toHaveAttribute('role', 'alertdialog');
-  });
-});
diff --git a/core/src/components/modal/test/a11y/modal.e2e.ts b/core/src/components/modal/test/a11y/modal.e2e.ts
new file mode 100644
index 0000000000..656c30df77
--- /dev/null
+++ b/core/src/components/modal/test/a11y/modal.e2e.ts
@@ -0,0 +1,39 @@
+import AxeBuilder from '@axe-core/playwright';
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('modal: a11y'), () => {
+    test('should not have accessibility violations', async ({ page }) => {
+      await page.goto(`/src/components/modal/test/a11y`, config);
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const button = page.locator('#open-modal');
+      const modal = page.locator('ion-modal .modal-wrapper');
+
+      await expect(modal).toHaveAttribute('role', 'dialog');
+
+      await button.click();
+      await ionModalDidPresent.next();
+
+      const results = await new AxeBuilder({ page }).analyze();
+      expect(results.violations).toEqual([]);
+    });
+
+    test('should allow for custom role', async ({ page }) => {
+      /**
+       * Note: This example should not be used in production.
+       * This only serves to check that `role` can be customized.
+       */
+      await page.setContent(
+        `
+        <ion-modal role="alertdialog"></ion-modal>
+      `,
+        config
+      );
+      const modal = page.locator('ion-modal .modal-wrapper');
+
+      await expect(modal).toHaveAttribute('role', 'alertdialog');
+    });
+  });
+});
diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts b/core/src/components/modal/test/basic/modal.e2e-legacy.ts
deleted file mode 100644
index c44d38303b..0000000000
--- a/core/src/components/modal/test/basic/modal.e2e-legacy.ts
+++ /dev/null
@@ -1,184 +0,0 @@
-import { expect } from '@playwright/test';
-import { test, Viewports } from '@utils/test/playwright';
-import type { E2EPage } from '@utils/test/playwright';
-
-test.describe('modal: focus trapping', () => {
-  test.beforeEach(async ({ skip }) => {
-    skip.rtl();
-    skip.mode('md');
-    skip.browser('firefox', 'Firefox incorrectly allows keyboard focus to move to ion-content');
-  });
-  test('focus should be trapped inside of modal', async ({ page, browserName }) => {
-    /**
-     * The default WebKit behavior is to
-     * highlight items on webpages with Option-Tab.
-     * See "Press Tab to highlight each item on a webpage"
-     * in Safari Preferences > Advanced.
-     */
-    const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
-    await page.goto('/src/components/modal/test/basic');
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-    await page.click('#basic-modal');
-
-    await ionModalDidPresent.next();
-
-    const dismissButton = page.locator('ion-button.dismiss');
-
-    await page.keyboard.press(tabKey);
-    await expect(dismissButton).toBeFocused();
-
-    await page.keyboard.press(`Shift+${tabKey}`);
-
-    await expect(dismissButton).toBeFocused();
-
-    await page.keyboard.press(tabKey);
-    await expect(dismissButton).toBeFocused();
-  });
-
-  test('focus should be returned to previously focused element when dismissing modal', async ({
-    page,
-    browserName,
-  }) => {
-    await page.goto('/src/components/modal/test/basic');
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-    const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-    const modalButton = page.locator('#basic-modal');
-    const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
-
-    // Focus #basic-modal button
-    await page.keyboard.press(tabKey);
-    await expect(modalButton).toBeFocused();
-
-    await page.keyboard.press('Space');
-    await ionModalDidPresent.next();
-
-    await page.keyboard.press('Escape');
-    await ionModalDidDismiss.next();
-
-    await expect(modalButton).toBeFocused();
-  });
-});
-
-test.describe('modal: rendering', () => {
-  const runVisualTests = async (page: E2EPage, screenshotModifier = '') => {
-    await page.goto('/src/components/modal/test/basic');
-
-    const ionModalWillDismiss = await page.spyOnEvent('ionModalWillDismiss');
-    const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-    const ionModalWillPresent = await page.spyOnEvent('ionModalWillPresent');
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-    await page.click('#basic-modal');
-
-    await ionModalWillPresent.next();
-    await ionModalDidPresent.next();
-
-    const modal = page.locator('ion-modal');
-    await expect(modal).toHaveClass(/show-modal/);
-
-    await page.setIonViewport();
-
-    await expect(page).toHaveScreenshot(`modal-basic-present-${screenshotModifier}${page.getSnapshotSettings()}.png`);
-
-    await modal.evaluate((el: HTMLIonModalElement) => {
-      el.dismiss();
-    });
-
-    await ionModalWillDismiss.next();
-    await ionModalDidDismiss.next();
-
-    await expect(modal).not.toHaveClass(/show-modal/);
-    await expect(modal).toBeHidden();
-  };
-
-  test('should not have visual regressions', async ({ page }) => {
-    await runVisualTests(page);
-  });
-  test('should not have visual regressions with tablet viewport', async ({ page }) => {
-    await page.setViewportSize(Viewports.tablet.portrait);
-    await runVisualTests(page, 'tablet-');
-  });
-});
-
-test.describe('modal: htmlAttributes inheritance', () => {
-  test('should correctly inherit attributes on host', async ({ page, skip }) => {
-    skip.rtl();
-    skip.mode('md');
-    await page.goto('/src/components/modal/test/basic');
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-    await page.click('#basic-modal');
-
-    await ionModalDidPresent.next();
-
-    const modal = page.locator('ion-modal');
-
-    const attribute = await modal.getAttribute('data-testid');
-    expect(attribute).toBe('basic-modal');
-  });
-});
-
-test.describe('modal: backdrop', () => {
-  test.beforeEach(async ({ page, skip }) => {
-    skip.rtl();
-    skip.mode('md');
-    await page.goto('/src/components/modal/test/basic');
-  });
-
-  test('it should dismiss the modal when clicking the backdrop', async ({ page }) => {
-    await page.setViewportSize(Viewports.tablet.portrait);
-
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-    const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-
-    await page.click('#basic-modal');
-    await ionModalDidPresent.next();
-
-    await page.mouse.click(20, 20);
-    await ionModalDidDismiss.next();
-  });
-});
-
-test.describe('modal: incorrect usage', () => {
-  test.beforeEach(async ({ page, skip }) => {
-    skip.rtl();
-    skip.mode('md');
-    await page.goto('/src/components/modal/test/basic');
-  });
-
-  test('it should warn when setting a breakpoint on a non-sheet modal', async ({ page }) => {
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-    const warnings: string[] = [];
-
-    page.on('console', (ev) => {
-      if (ev.type() === 'warning') {
-        warnings.push(ev.text());
-      }
-    });
-
-    await page.click('#basic-modal');
-    await ionModalDidPresent.next();
-
-    const modal = page.locator('ion-modal');
-    await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.5));
-
-    expect(warnings.length).toBe(1);
-    expect(warnings[0]).toBe('[Ionic Warning]: setCurrentBreakpoint is only supported on sheet modals.');
-  });
-
-  test('it should return undefined when getting the breakpoint on a non-sheet modal', async ({ page }) => {
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-    await page.click('#basic-modal');
-    await ionModalDidPresent.next();
-
-    const modal = page.locator('ion-modal');
-    const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => {
-      return el.getCurrentBreakpoint();
-    });
-
-    expect(breakpoint).toBe(undefined);
-  });
-});
diff --git a/core/src/components/modal/test/basic/modal.e2e.ts b/core/src/components/modal/test/basic/modal.e2e.ts
new file mode 100644
index 0000000000..03c8b28cbb
--- /dev/null
+++ b/core/src/components/modal/test/basic/modal.e2e.ts
@@ -0,0 +1,181 @@
+import { expect } from '@playwright/test';
+import { configs, test, Viewports } from '@utils/test/playwright';
+import type { E2EPage } from '@utils/test/playwright';
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('modal: focus trapping'), () => {
+    test.beforeEach(async ({ skip }) => {
+      skip.browser('firefox', 'Firefox incorrectly allows keyboard focus to move to ion-content');
+    });
+    test('focus should be trapped inside of modal', async ({ page, browserName }) => {
+      /**
+       * The default WebKit behavior is to
+       * highlight items on webpages with Option-Tab.
+       * See "Press Tab to highlight each item on a webpage"
+       * in Safari Preferences > Advanced.
+       */
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+      await page.goto('/src/components/modal/test/basic', config);
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#basic-modal');
+
+      await ionModalDidPresent.next();
+
+      const dismissButton = page.locator('ion-button.dismiss');
+
+      await page.keyboard.press(tabKey);
+      await expect(dismissButton).toBeFocused();
+
+      await page.keyboard.press(`Shift+${tabKey}`);
+
+      await expect(dismissButton).toBeFocused();
+
+      await page.keyboard.press(tabKey);
+      await expect(dismissButton).toBeFocused();
+    });
+
+    test('focus should be returned to previously focused element when dismissing modal', async ({
+      page,
+      browserName,
+    }) => {
+      await page.goto('/src/components/modal/test/basic', config);
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+      const modalButton = page.locator('#basic-modal');
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+
+      // Focus #basic-modal button
+      await page.keyboard.press(tabKey);
+      await expect(modalButton).toBeFocused();
+
+      await page.keyboard.press('Space');
+      await ionModalDidPresent.next();
+
+      await page.keyboard.press('Escape');
+      await ionModalDidDismiss.next();
+
+      await expect(modalButton).toBeFocused();
+    });
+  });
+});
+
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('modal: rendering'), () => {
+    const runVisualTests = async (page: E2EPage, screenshotModifier = '') => {
+      await page.goto('/src/components/modal/test/basic', config);
+
+      const ionModalWillDismiss = await page.spyOnEvent('ionModalWillDismiss');
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+      const ionModalWillPresent = await page.spyOnEvent('ionModalWillPresent');
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#basic-modal');
+
+      await ionModalWillPresent.next();
+      await ionModalDidPresent.next();
+
+      const modal = page.locator('ion-modal');
+      await expect(modal).toHaveClass(/show-modal/);
+
+      await page.setIonViewport();
+
+      await expect(page).toHaveScreenshot(screenshot(`modal-basic-present${screenshotModifier}`));
+
+      await modal.evaluate((el: HTMLIonModalElement) => {
+        el.dismiss();
+      });
+
+      await ionModalWillDismiss.next();
+      await ionModalDidDismiss.next();
+
+      await expect(modal).not.toHaveClass(/show-modal/);
+      await expect(modal).toBeHidden();
+    };
+
+    test('should not have visual regressions', async ({ page }) => {
+      await runVisualTests(page);
+    });
+    test('should not have visual regressions with tablet viewport', async ({ page }) => {
+      await page.setViewportSize(Viewports.tablet.portrait);
+      await runVisualTests(page, '-tablet');
+    });
+  });
+});
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('modal: htmlAttributes inheritance'), () => {
+    test('should correctly inherit attributes on host', async ({ page }) => {
+      await page.goto('/src/components/modal/test/basic', config);
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#basic-modal');
+
+      await ionModalDidPresent.next();
+
+      const modal = page.locator('ion-modal');
+
+      const attribute = await modal.getAttribute('data-testid');
+      expect(attribute).toBe('basic-modal');
+    });
+  });
+
+  test.describe(title('modal: backdrop'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/modal/test/basic', config);
+    });
+
+    test('it should dismiss the modal when clicking the backdrop', async ({ page }) => {
+      await page.setViewportSize(Viewports.tablet.portrait);
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+      await page.click('#basic-modal');
+      await ionModalDidPresent.next();
+
+      await page.mouse.click(20, 20);
+      await ionModalDidDismiss.next();
+    });
+  });
+
+  test.describe(title('modal: incorrect usage'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/modal/test/basic', config);
+    });
+
+    test('it should warn when setting a breakpoint on a non-sheet modal', async ({ page }) => {
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      const warnings: string[] = [];
+
+      page.on('console', (ev) => {
+        if (ev.type() === 'warning') {
+          warnings.push(ev.text());
+        }
+      });
+
+      await page.click('#basic-modal');
+      await ionModalDidPresent.next();
+
+      const modal = page.locator('ion-modal');
+      await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.5));
+
+      expect(warnings.length).toBe(1);
+      expect(warnings[0]).toBe('[Ionic Warning]: setCurrentBreakpoint is only supported on sheet modals.');
+    });
+
+    test('it should return undefined when getting the breakpoint on a non-sheet modal', async ({ page }) => {
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#basic-modal');
+      await ionModalDidPresent.next();
+
+      const modal = page.locator('ion-modal');
+      const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => {
+        return el.getCurrentBreakpoint();
+      });
+
+      expect(breakpoint).toBe(undefined);
+    });
+  });
+});
diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-md-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-md-rtl-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/basic/modal.e2e-legacy.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-tablet-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/can-dismiss/modal.e2e-legacy.ts b/core/src/components/modal/test/can-dismiss/modal.e2e-legacy.ts
deleted file mode 100644
index a92779f78f..0000000000
--- a/core/src/components/modal/test/can-dismiss/modal.e2e-legacy.ts
+++ /dev/null
@@ -1,425 +0,0 @@
-import { expect } from '@playwright/test';
-import { test, dragElementBy } from '@utils/test/playwright';
-
-test.describe('modal: canDismiss', () => {
-  test.describe('regular modal', () => {
-    test.beforeEach(async ({ page, skip }) => {
-      skip.rtl();
-      await page.goto('/src/components/modal/test/can-dismiss');
-    });
-    test('should dismiss when canDismiss is true', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      const modal = page.locator('ion-modal');
-      const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
-
-      expect(returnValue).toBe(true);
-    });
-    test('should not dismiss when canDismiss is false', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-      await page.click('#radio-false');
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      const modal = page.locator('ion-modal');
-      const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
-
-      expect(returnValue).toBe(false);
-    });
-    test('should dismiss when canDismiss is Promise<true>', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-      await page.click('#radio-promise-true');
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      const modal = page.locator('ion-modal');
-      const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
-
-      expect(returnValue).toBe(true);
-    });
-    test('should not dismiss when canDismiss is Promise<false>', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-      await page.click('#radio-promise-false');
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      const modal = page.locator('ion-modal');
-      const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
-
-      expect(returnValue).toBe(false);
-    });
-    test('should dismiss when canDismiss is Action Sheet and user clicks confirm', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-      const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
-
-      await page.click('#radio-action-sheet');
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      await page.keyboard.press('Escape');
-
-      await ionActionSheetDidPresent.next();
-      await page.click('.button-confirm');
-
-      await ionModalDidDismiss.next();
-    });
-  });
-  test.describe('card modal', () => {
-    test.beforeEach(async ({ page, skip }) => {
-      skip.rtl();
-      skip.mode('md');
-      await page.goto('/src/components/modal/test/can-dismiss');
-      await page.click('#radio-card');
-    });
-    test('should dismiss when canDismiss is true', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      const modal = page.locator('ion-modal');
-      const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
-
-      expect(returnValue).toBe(true);
-    });
-    test('should not dismiss when canDismiss is false', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-      await page.click('#radio-false');
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      const modal = page.locator('ion-modal');
-      const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
-
-      expect(returnValue).toBe(false);
-    });
-    test('should dismiss when canDismiss is Promise<true>', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-      await page.click('#radio-promise-true');
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      const modal = page.locator('ion-modal');
-      const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
-
-      expect(returnValue).toBe(true);
-    });
-    test('should not dismiss when canDismiss is Promise<false>', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-      await page.click('#radio-promise-false');
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      const modal = page.locator('ion-modal');
-      const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
-
-      expect(returnValue).toBe(false);
-    });
-  });
-  test.describe('card modal - iOS swiping', () => {
-    test.beforeEach(async ({ page, skip }) => {
-      skip.rtl();
-      skip.mode('md');
-      await page.goto('/src/components/modal/test/can-dismiss');
-      await page.click('#radio-card');
-    });
-
-    test('should dismiss on swipe when canDismiss is true', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      const modalHeader = page.locator('ion-modal #modal-header');
-      await dragElementBy(modalHeader, page, 0, 500);
-
-      await ionModalDidDismiss.next();
-    });
-    test('should not dismiss on swipe when canDismiss is false', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-      await page.click('#radio-false');
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      const modalHeader = page.locator('#modal-header');
-      await dragElementBy(modalHeader, page, 0, 500);
-
-      const modal = page.locator('ion-modal');
-      expect(modal).not.toBe(null);
-    });
-    test('should dismiss on swipe when canDismiss is Promise<true>', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-
-      await page.click('#radio-promise-true');
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      const modalHeader = page.locator('#modal-header');
-      await dragElementBy(modalHeader, page, 0, 500);
-
-      await ionModalDidDismiss.next();
-    });
-    test('should not dismiss on swipe when canDismiss is Promise<false>', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-      const ionHandlerDone = await page.spyOnEvent('ionHandlerDone');
-
-      await page.click('#radio-promise-false');
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      const modalHeader = page.locator('#modal-header');
-      await dragElementBy(modalHeader, page, 0, 500);
-
-      await ionHandlerDone.next();
-
-      const modal = page.locator('ion-modal');
-      expect(modal).not.toBe(null);
-    });
-    test('should dismiss when canDismiss is Action Sheet and user clicks confirm', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-      const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
-
-      await page.click('#radio-action-sheet');
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      const modalHeader = page.locator('#modal-header');
-      await dragElementBy(modalHeader, page, 0, 500);
-
-      await ionActionSheetDidPresent.next();
-      await page.click('.button-confirm');
-
-      await ionModalDidDismiss.next();
-    });
-  });
-
-  test.describe('sheet modal', () => {
-    test.beforeEach(async ({ page, skip }) => {
-      skip.rtl();
-      await page.goto('/src/components/modal/test/can-dismiss');
-      await page.click('#radio-sheet');
-    });
-    test('should dismiss when canDismiss is true', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      const modal = page.locator('ion-modal');
-      const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
-
-      expect(returnValue).toBe(true);
-    });
-    test('should not dismiss when canDismiss is false', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-      await page.click('#radio-false');
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      const modal = page.locator('ion-modal');
-      const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
-
-      expect(returnValue).toBe(false);
-    });
-    test('should dismiss when canDismiss is Promise<true>', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-      await page.click('#radio-promise-true');
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      const modal = page.locator('ion-modal');
-      const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
-
-      expect(returnValue).toBe(true);
-    });
-    test('should not dismiss when canDismiss is Promise<false>', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-      await page.click('#radio-promise-false');
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      const modal = page.locator('ion-modal');
-      const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
-
-      expect(returnValue).toBe(false);
-    });
-    test('should dismiss on swipe when canDismiss is true', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      const modalHeader = page.locator('#modal-header');
-      await dragElementBy(modalHeader, page, 0, 500);
-
-      await ionModalDidDismiss.next();
-    });
-    test('should not dismiss on swipe when canDismiss is false', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-      await page.click('#radio-false');
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      const modalHeader = page.locator('#modal-header');
-      await dragElementBy(modalHeader, page, 0, 500);
-
-      const modal = page.locator('ion-modal');
-      expect(modal).not.toBe(null);
-    });
-    test('should dismiss on swipe when canDismiss is Promise<true>', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-
-      await page.click('#radio-promise-true');
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      const modalHeader = page.locator('#modal-header');
-      await dragElementBy(modalHeader, page, 0, 500);
-
-      await ionModalDidDismiss.next();
-    });
-    test('should not dismiss on swipe when canDismiss is Promise<false>', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-      const ionHandlerDone = await page.spyOnEvent('ionHandlerDone');
-
-      await page.click('#radio-promise-false');
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      const modalHeader = page.locator('#modal-header');
-      await dragElementBy(modalHeader, page, 0, 500);
-
-      await ionHandlerDone.next();
-
-      const modal = page.locator('ion-modal');
-      expect(modal).not.toBe(null);
-    });
-    test('should not dismiss on swipe when not attempting to close', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-      await page.click('#radio-promise-true');
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      const modalHeader = page.locator('#modal-header');
-      await dragElementBy(modalHeader, page, 0, -500);
-
-      const modal = page.locator('ion-modal');
-      expect(modal).not.toBe(null);
-    });
-    test('should hit the dismiss threshold when swiping', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-
-      await page.click('#radio-promise-true');
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      const modalHeader = page.locator('#modal-header');
-      await dragElementBy(modalHeader, page, 0, 100);
-
-      await ionModalDidDismiss.next();
-    });
-    test('should dismiss when canDismiss is Action Sheet and user clicks confirm', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-      const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
-
-      await page.click('#radio-action-sheet');
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      const modalHeader = page.locator('#modal-header');
-      await dragElementBy(modalHeader, page, 0, 500);
-
-      await ionActionSheetDidPresent.next();
-      await page.click('.button-confirm');
-
-      await ionModalDidDismiss.next();
-    });
-  });
-
-  test.describe('function params', () => {
-    test.beforeEach(async ({ page, skip }) => {
-      skip.mode('md');
-      skip.rtl();
-      await page.goto('/src/components/modal/test/can-dismiss');
-    });
-    test('should pass data and role when calling dismiss', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-      const ionHandlerDone = await page.spyOnEvent('ionHandlerDone');
-
-      await page.click('#radio-promise-true');
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      const modal = page.locator('ion-modal');
-      await modal.evaluate((el: HTMLIonModalElement) => el.dismiss('my data', 'my role'));
-
-      await ionHandlerDone.next();
-      await expect(ionHandlerDone).toHaveReceivedEventDetail({ data: 'my data', role: 'my role' });
-    });
-    test('should pass data and role when swiping', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-      const ionHandlerDone = await page.spyOnEvent('ionHandlerDone');
-
-      await page.click('#radio-card');
-      await page.click('#radio-promise-true');
-      await page.click('#show-modal');
-
-      await ionModalDidPresent.next();
-
-      const modalHeader = page.locator('#modal-header');
-      await dragElementBy(modalHeader, page, 0, 500);
-
-      await ionHandlerDone.next();
-      await expect(ionHandlerDone).toHaveReceivedEventDetail({ data: undefined, role: 'gesture' });
-    });
-  });
-});
diff --git a/core/src/components/modal/test/can-dismiss/modal.e2e.ts b/core/src/components/modal/test/can-dismiss/modal.e2e.ts
new file mode 100644
index 0000000000..9a7369c27c
--- /dev/null
+++ b/core/src/components/modal/test/can-dismiss/modal.e2e.ts
@@ -0,0 +1,422 @@
+import { expect } from '@playwright/test';
+import { configs, test, dragElementBy } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('modal: canDismiss'), () => {
+    test.describe('regular modal', () => {
+      test.beforeEach(async ({ page }) => {
+        await page.goto('/src/components/modal/test/can-dismiss', config);
+      });
+      test('should dismiss when canDismiss is true', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        const modal = page.locator('ion-modal');
+        const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
+
+        expect(returnValue).toBe(true);
+      });
+      test('should not dismiss when canDismiss is false', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+        await page.click('#radio-false');
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        const modal = page.locator('ion-modal');
+        const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
+
+        expect(returnValue).toBe(false);
+      });
+      test('should dismiss when canDismiss is Promise<true>', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+        await page.click('#radio-promise-true');
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        const modal = page.locator('ion-modal');
+        const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
+
+        expect(returnValue).toBe(true);
+      });
+      test('should not dismiss when canDismiss is Promise<false>', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+        await page.click('#radio-promise-false');
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        const modal = page.locator('ion-modal');
+        const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
+
+        expect(returnValue).toBe(false);
+      });
+      test('should dismiss when canDismiss is Action Sheet and user clicks confirm', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+        const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+        const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+
+        await page.click('#radio-action-sheet');
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        await page.keyboard.press('Escape');
+
+        await ionActionSheetDidPresent.next();
+        await page.click('.button-confirm');
+
+        await ionModalDidDismiss.next();
+      });
+    });
+    test.describe('card modal', () => {
+      test.beforeEach(async ({ page }) => {
+        await page.goto('/src/components/modal/test/can-dismiss', config);
+        await page.click('#radio-card');
+      });
+      test('should dismiss when canDismiss is true', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        const modal = page.locator('ion-modal');
+        const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
+
+        expect(returnValue).toBe(true);
+      });
+      test('should not dismiss when canDismiss is false', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+        await page.click('#radio-false');
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        const modal = page.locator('ion-modal');
+        const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
+
+        expect(returnValue).toBe(false);
+      });
+      test('should dismiss when canDismiss is Promise<true>', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+        await page.click('#radio-promise-true');
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        const modal = page.locator('ion-modal');
+        const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
+
+        expect(returnValue).toBe(true);
+      });
+      test('should not dismiss when canDismiss is Promise<false>', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+        await page.click('#radio-promise-false');
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        const modal = page.locator('ion-modal');
+        const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
+
+        expect(returnValue).toBe(false);
+      });
+    });
+    test.describe('card modal - iOS swiping', () => {
+      test.beforeEach(async ({ page }) => {
+        await page.goto('/src/components/modal/test/can-dismiss', config);
+        await page.click('#radio-card');
+      });
+
+      test('should dismiss on swipe when canDismiss is true', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+        const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        const modalHeader = page.locator('ion-modal #modal-header');
+        await dragElementBy(modalHeader, page, 0, 500);
+
+        await ionModalDidDismiss.next();
+      });
+      test('should not dismiss on swipe when canDismiss is false', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+        await page.click('#radio-false');
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        const modalHeader = page.locator('#modal-header');
+        await dragElementBy(modalHeader, page, 0, 500);
+
+        const modal = page.locator('ion-modal');
+        expect(modal).not.toBe(null);
+      });
+      test('should dismiss on swipe when canDismiss is Promise<true>', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+        const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+        await page.click('#radio-promise-true');
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        const modalHeader = page.locator('#modal-header');
+        await dragElementBy(modalHeader, page, 0, 500);
+
+        await ionModalDidDismiss.next();
+      });
+      test('should not dismiss on swipe when canDismiss is Promise<false>', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+        const ionHandlerDone = await page.spyOnEvent('ionHandlerDone');
+
+        await page.click('#radio-promise-false');
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        const modalHeader = page.locator('#modal-header');
+        await dragElementBy(modalHeader, page, 0, 500);
+
+        await ionHandlerDone.next();
+
+        const modal = page.locator('ion-modal');
+        expect(modal).not.toBe(null);
+      });
+      test('should dismiss when canDismiss is Action Sheet and user clicks confirm', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+        const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+        const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+
+        await page.click('#radio-action-sheet');
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        const modalHeader = page.locator('#modal-header');
+        await dragElementBy(modalHeader, page, 0, 500);
+
+        await ionActionSheetDidPresent.next();
+        await page.click('.button-confirm');
+
+        await ionModalDidDismiss.next();
+      });
+    });
+
+    test.describe('sheet modal', () => {
+      test.beforeEach(async ({ page }) => {
+        await page.goto('/src/components/modal/test/can-dismiss', config);
+        await page.click('#radio-sheet');
+      });
+      test('should dismiss when canDismiss is true', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        const modal = page.locator('ion-modal');
+        const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
+
+        expect(returnValue).toBe(true);
+      });
+      test('should not dismiss when canDismiss is false', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+        await page.click('#radio-false');
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        const modal = page.locator('ion-modal');
+        const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
+
+        expect(returnValue).toBe(false);
+      });
+      test('should dismiss when canDismiss is Promise<true>', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+        await page.click('#radio-promise-true');
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        const modal = page.locator('ion-modal');
+        const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
+
+        expect(returnValue).toBe(true);
+      });
+      test('should not dismiss when canDismiss is Promise<false>', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+        await page.click('#radio-promise-false');
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        const modal = page.locator('ion-modal');
+        const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
+
+        expect(returnValue).toBe(false);
+      });
+      test('should dismiss on swipe when canDismiss is true', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+        const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        const modalHeader = page.locator('#modal-header');
+        await dragElementBy(modalHeader, page, 0, 500);
+
+        await ionModalDidDismiss.next();
+      });
+      test('should not dismiss on swipe when canDismiss is false', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+        await page.click('#radio-false');
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        const modalHeader = page.locator('#modal-header');
+        await dragElementBy(modalHeader, page, 0, 500);
+
+        const modal = page.locator('ion-modal');
+        expect(modal).not.toBe(null);
+      });
+      test('should dismiss on swipe when canDismiss is Promise<true>', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+        const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+        await page.click('#radio-promise-true');
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        const modalHeader = page.locator('#modal-header');
+        await dragElementBy(modalHeader, page, 0, 500);
+
+        await ionModalDidDismiss.next();
+      });
+      test('should not dismiss on swipe when canDismiss is Promise<false>', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+        const ionHandlerDone = await page.spyOnEvent('ionHandlerDone');
+
+        await page.click('#radio-promise-false');
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        const modalHeader = page.locator('#modal-header');
+        await dragElementBy(modalHeader, page, 0, 500);
+
+        await ionHandlerDone.next();
+
+        const modal = page.locator('ion-modal');
+        expect(modal).not.toBe(null);
+      });
+      test('should not dismiss on swipe when not attempting to close', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+        await page.click('#radio-promise-true');
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        const modalHeader = page.locator('#modal-header');
+        await dragElementBy(modalHeader, page, 0, -500);
+
+        const modal = page.locator('ion-modal');
+        expect(modal).not.toBe(null);
+      });
+      test('should hit the dismiss threshold when swiping', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+        const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+        await page.click('#radio-promise-true');
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        const modalHeader = page.locator('#modal-header');
+        await dragElementBy(modalHeader, page, 0, 100);
+
+        await ionModalDidDismiss.next();
+      });
+      test('should dismiss when canDismiss is Action Sheet and user clicks confirm', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+        const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+        const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent');
+
+        await page.click('#radio-action-sheet');
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        const modalHeader = page.locator('#modal-header');
+        await dragElementBy(modalHeader, page, 0, 500);
+
+        await ionActionSheetDidPresent.next();
+        await page.click('.button-confirm');
+
+        await ionModalDidDismiss.next();
+      });
+    });
+
+    test.describe('function params', () => {
+      test.beforeEach(async ({ page }) => {
+        await page.goto('/src/components/modal/test/can-dismiss', config);
+      });
+      test('should pass data and role when calling dismiss', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+        const ionHandlerDone = await page.spyOnEvent('ionHandlerDone');
+
+        await page.click('#radio-promise-true');
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        const modal = page.locator('ion-modal');
+        await modal.evaluate((el: HTMLIonModalElement) => el.dismiss('my data', 'my role'));
+
+        await ionHandlerDone.next();
+        await expect(ionHandlerDone).toHaveReceivedEventDetail({ data: 'my data', role: 'my role' });
+      });
+      test('should pass data and role when swiping', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+        const ionHandlerDone = await page.spyOnEvent('ionHandlerDone');
+
+        await page.click('#radio-card');
+        await page.click('#radio-promise-true');
+        await page.click('#show-modal');
+
+        await ionModalDidPresent.next();
+
+        const modalHeader = page.locator('#modal-header');
+        await dragElementBy(modalHeader, page, 0, 500);
+
+        await ionHandlerDone.next();
+        await expect(ionHandlerDone).toHaveReceivedEventDetail({ data: undefined, role: 'gesture' });
+      });
+    });
+  });
+});
diff --git a/core/src/components/modal/test/card-nav/modal.e2e-legacy.ts b/core/src/components/modal/test/card-nav/modal.e2e-legacy.ts
deleted file mode 100644
index 76f081a143..0000000000
--- a/core/src/components/modal/test/card-nav/modal.e2e-legacy.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { expect } from '@playwright/test';
-import { test, dragElementBy } from '@utils/test/playwright';
-
-import { CardModalPage } from '../fixtures';
-
-test.describe('card modal - nav', () => {
-  let cardModalPage: CardModalPage;
-  test.beforeEach(async ({ page, skip }) => {
-    skip.mode('md');
-    skip.rtl('This test only verifies that the gesture activates inside of a modal.');
-    skip.browser(
-      (browserName: string) => browserName !== 'chromium',
-      'dragElementBy is flaky outside of Chrome browsers.'
-    );
-
-    cardModalPage = new CardModalPage(page);
-    await cardModalPage.navigate('/src/components/modal/test/card-nav?ionic:_testing=false');
-  });
-  test('it should swipe to go back', async ({ page }) => {
-    await cardModalPage.openModalByTrigger('#open-modal');
-
-    const nav = page.locator('ion-nav') as any;
-    const ionNavDidChange = await nav.spyOnEvent('ionNavDidChange');
-
-    await page.click('#go-page-two');
-
-    await ionNavDidChange.next();
-
-    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 ionNavDidChange.next();
-  });
-  test('should swipe to close', async ({ page }) => {
-    await cardModalPage.openModalByTrigger('#open-modal');
-
-    const nav = page.locator('ion-nav') as any;
-    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');
-  });
-});
diff --git a/core/src/components/modal/test/card-nav/modal.e2e.ts b/core/src/components/modal/test/card-nav/modal.e2e.ts
new file mode 100644
index 0000000000..c4aabaee1f
--- /dev/null
+++ b/core/src/components/modal/test/card-nav/modal.e2e.ts
@@ -0,0 +1,53 @@
+import { expect } from '@playwright/test';
+import { configs, test, dragElementBy } from '@utils/test/playwright';
+
+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: CardModalPage;
+    test.beforeEach(async ({ page, skip }) => {
+      skip.browser(
+        (browserName: string) => browserName !== 'chromium',
+        'dragElementBy is flaky outside of Chrome browsers.'
+      );
+
+      cardModalPage = new CardModalPage(page);
+      await cardModalPage.navigate('/src/components/modal/test/card-nav?ionic:_testing=false', config);
+    });
+    test('it should swipe to go back', async ({ page }) => {
+      await cardModalPage.openModalByTrigger('#open-modal');
+
+      const nav = page.locator('ion-nav') as any;
+      const ionNavDidChange = await nav.spyOnEvent('ionNavDidChange');
+
+      await page.click('#go-page-two');
+
+      await ionNavDidChange.next();
+
+      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 ionNavDidChange.next();
+    });
+    test('should swipe to close', async ({ page }) => {
+      await cardModalPage.openModalByTrigger('#open-modal');
+
+      const nav = page.locator('ion-nav') as any;
+      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');
+    });
+  });
+});
diff --git a/core/src/components/modal/test/card-refresher/modal.e2e-legacy.ts b/core/src/components/modal/test/card-refresher/modal.e2e-legacy.ts
deleted file mode 100644
index 1ba5c2f8f9..0000000000
--- a/core/src/components/modal/test/card-refresher/modal.e2e-legacy.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { expect } from '@playwright/test';
-import { dragElementBy, test } from '@utils/test/playwright';
-
-test.describe('card modal - with refresher', () => {
-  test.beforeEach(async ({ page, skip }) => {
-    skip.mode('md');
-    skip.rtl();
-
-    await page.goto('/src/components/modal/test/card-refresher');
-  });
-  test('it should not swipe to close on the content due to the presence of the refresher', async ({ page }) => {
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-    await page.click('#card');
-    await ionModalDidPresent.next();
-
-    const modal = page.locator('ion-modal');
-    const content = (await page.$('ion-modal ion-content'))!;
-
-    await dragElementBy(content, page, 0, 500);
-
-    await content.waitForElementState('stable');
-
-    await expect(modal).toBeVisible();
-  });
-});
diff --git a/core/src/components/modal/test/card-refresher/modal.e2e.ts b/core/src/components/modal/test/card-refresher/modal.e2e.ts
new file mode 100644
index 0000000000..15c91dc783
--- /dev/null
+++ b/core/src/components/modal/test/card-refresher/modal.e2e.ts
@@ -0,0 +1,25 @@
+import { expect } from '@playwright/test';
+import { configs, dragElementBy, test } from '@utils/test/playwright';
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('card modal - with refresher'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/modal/test/card-refresher', config);
+    });
+    test('it should not swipe to close on the content due to the presence of the refresher', async ({ page }) => {
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#card');
+      await ionModalDidPresent.next();
+
+      const modal = page.locator('ion-modal');
+      const content = (await page.$('ion-modal ion-content'))!;
+
+      await dragElementBy(content, page, 0, 500);
+
+      await content.waitForElementState('stable');
+
+      await expect(modal).toBeVisible();
+    });
+  });
+});
diff --git a/core/src/components/modal/test/card-scroll-target/modal.e2e-legacy.ts b/core/src/components/modal/test/card-scroll-target/modal.e2e-legacy.ts
deleted file mode 100644
index c69555ec33..0000000000
--- a/core/src/components/modal/test/card-scroll-target/modal.e2e-legacy.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { expect } from '@playwright/test';
-import { dragElementBy, test } from '@utils/test/playwright';
-
-test.describe('card modal - scroll target', () => {
-  test.beforeEach(async ({ page, skip }) => {
-    skip.mode('md');
-    skip.rtl();
-
-    await page.goto('/src/components/modal/test/card-scroll-target');
-  });
-  test.describe('card modal: swipe to close', () => {
-    test('it should swipe to close when swiped on the content', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-
-      await page.click('#card');
-      await ionModalDidPresent.next();
-
-      const content = page.locator('ion-modal .ion-content-scroll-host');
-      await dragElementBy(content, page, 0, 500);
-
-      await ionModalDidDismiss.next();
-    });
-    test('it should not swipe to close when swiped on the content but the content is scrolled', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-      await page.click('#card');
-      await ionModalDidPresent.next();
-
-      const modal = page.locator('ion-modal');
-      const content = (await page.$('ion-modal .ion-content-scroll-host'))!;
-
-      await content.evaluate((el: HTMLElement) => (el.scrollTop = 500));
-
-      await dragElementBy(content, page, 0, 500);
-
-      await content.waitForElementState('stable');
-
-      await expect(modal).toBeVisible();
-    });
-    test('content should be scrollable after gesture ends', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-      await page.click('#card');
-      await ionModalDidPresent.next();
-
-      const content = page.locator('ion-modal .ion-content-scroll-host');
-      await dragElementBy(content, page, 0, 20);
-
-      await expect(content).not.toHaveCSS('overflow', 'hidden');
-    });
-  });
-});
diff --git a/core/src/components/modal/test/card-scroll-target/modal.e2e.ts b/core/src/components/modal/test/card-scroll-target/modal.e2e.ts
new file mode 100644
index 0000000000..848fc26e38
--- /dev/null
+++ b/core/src/components/modal/test/card-scroll-target/modal.e2e.ts
@@ -0,0 +1,52 @@
+import { expect } from '@playwright/test';
+import { configs, dragElementBy, test } from '@utils/test/playwright';
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('card modal - scroll target'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/modal/test/card-scroll-target', config);
+    });
+    test.describe('card modal: swipe to close', () => {
+      test('it should swipe to close when swiped on the content', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+        const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+        await page.click('#card');
+        await ionModalDidPresent.next();
+
+        const content = page.locator('ion-modal .ion-content-scroll-host');
+        await dragElementBy(content, page, 0, 500);
+
+        await ionModalDidDismiss.next();
+      });
+      test('it should not swipe to close when swiped on the content but the content is scrolled', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+        await page.click('#card');
+        await ionModalDidPresent.next();
+
+        const modal = page.locator('ion-modal');
+        const content = (await page.$('ion-modal .ion-content-scroll-host'))!;
+
+        await content.evaluate((el: HTMLElement) => (el.scrollTop = 500));
+
+        await dragElementBy(content, page, 0, 500);
+
+        await content.waitForElementState('stable');
+
+        await expect(modal).toBeVisible();
+      });
+      test('content should be scrollable after gesture ends', async ({ page }) => {
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+        await page.click('#card');
+        await ionModalDidPresent.next();
+
+        const content = page.locator('ion-modal .ion-content-scroll-host');
+        await dragElementBy(content, page, 0, 20);
+
+        await expect(content).not.toHaveCSS('overflow', 'hidden');
+      });
+    });
+  });
+});
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts b/core/src/components/modal/test/card/modal.e2e.ts
similarity index 80%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts
rename to core/src/components/modal/test/card/modal.e2e.ts
index dfea5b1453..f359bee268 100644
--- a/core/src/components/modal/test/card/modal.e2e-legacy.ts
+++ b/core/src/components/modal/test/card/modal.e2e.ts
@@ -1,49 +1,48 @@
 import { expect } from '@playwright/test';
-import { test, Viewports } from '@utils/test/playwright';
+import { configs, test, Viewports } from '@utils/test/playwright';
 
 import { CardModalPage } from '../fixtures';
 
-test.describe('card modal', () => {
-  test.beforeEach(async ({ skip }) => {
-    skip.mode('md');
-  });
-  test.describe('card modal: rendering', () => {
+configs({ modes: ['ios'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('card modal: rendering'), () => {
     let cardModalPage: CardModalPage;
     test.beforeEach(async ({ page }) => {
       cardModalPage = new CardModalPage(page);
-      await cardModalPage.navigate('/src/components/modal/test/card');
+      await cardModalPage.navigate('/src/components/modal/test/card', config);
     });
     test('should not have visual regressions', async ({ page }) => {
       await cardModalPage.openModalByTrigger('#card');
 
-      await expect(page).toHaveScreenshot(`modal-card-present-${page.getSnapshotSettings()}.png`);
+      await expect(page).toHaveScreenshot(screenshot(`modal-card-present`));
     });
     test('should not have visual regressions with custom modal', async ({ page }) => {
       await cardModalPage.openModalByTrigger('#card-custom');
 
-      await expect(page).toHaveScreenshot(`modal-card-custom-present-${page.getSnapshotSettings()}.png`);
+      await expect(page).toHaveScreenshot(screenshot(`modal-card-custom-present`));
     });
     test('should not have visual regressions with stacked cards', async ({ page }) => {
       await cardModalPage.openModalByTrigger('#card');
       await cardModalPage.openModalByTrigger('.add');
 
-      await expect(page).toHaveScreenshot(`modal-card-stacked-present-${page.getSnapshotSettings()}.png`);
+      await expect(page).toHaveScreenshot(screenshot(`modal-card-stacked-present`));
     });
     test('should not have visual regressions with stacked custom cards', async ({ page }) => {
       await cardModalPage.openModalByTrigger('#card-custom');
       await cardModalPage.openModalByTrigger('.add');
 
-      await expect(page).toHaveScreenshot(`modal-card-custom-stacked-present-${page.getSnapshotSettings()}.png`);
+      await expect(page).toHaveScreenshot(screenshot(`modal-card-custom-stacked-present`));
     });
   });
-  test.describe('card modal: functionality', () => {
+});
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('card modal: functionality'), () => {
     let cardModalPage: CardModalPage;
-    test.beforeEach(async ({ page, skip }) => {
-      skip.rtl();
+    test.beforeEach(async ({ page }) => {
       cardModalPage = new CardModalPage(page);
-      await cardModalPage.navigate('/src/components/modal/test/card');
+      await cardModalPage.navigate('/src/components/modal/test/card', config);
     });
-    test.describe('card modal: swipe to close', () => {
+    test.describe(title('card modal: swipe to close'), () => {
       test('it should swipe to close when swiped on the header', async () => {
         await cardModalPage.openModalByTrigger('#card');
         await cardModalPage.swipeToCloseModal('ion-modal ion-header');
@@ -86,36 +85,34 @@ test.describe('card modal', () => {
         await expect(content).toHaveJSProperty('scrollY', true);
       });
     });
-    test.describe('card modal: rendering - tablet', () => {
+    test.describe(title('card modal: rendering - tablet'), () => {
       test.beforeEach(async ({ page }) => {
         await page.setViewportSize(Viewports.tablet.portrait);
       });
       test('should not have visual regressions', async ({ page }) => {
         await cardModalPage.openModalByTrigger('#card');
 
-        await expect(page).toHaveScreenshot(`modal-card-present-tablet-${page.getSnapshotSettings()}.png`);
+        await expect(page).toHaveScreenshot(screenshot(`modal-card-present-tablet`));
       });
       test('should not have visual regressions with custom modal', async ({ page }) => {
         await cardModalPage.openModalByTrigger('#card-custom');
 
-        await expect(page).toHaveScreenshot(`modal-card-custom-present-tablet-${page.getSnapshotSettings()}.png`);
+        await expect(page).toHaveScreenshot(screenshot(`modal-card-custom-present-tablet`));
       });
       test('should not have visual regressions with stacked cards', async ({ page }) => {
         await cardModalPage.openModalByTrigger('#card');
         await cardModalPage.openModalByTrigger('.add');
 
-        await expect(page).toHaveScreenshot(`modal-card-stacked-present-tablet-${page.getSnapshotSettings()}.png`);
+        await expect(page).toHaveScreenshot(screenshot(`modal-card-stacked-present-tablet`));
       });
       test('should not have visual regressions with stacked custom cards', async ({ page }) => {
         await cardModalPage.openModalByTrigger('#card-custom');
         await cardModalPage.openModalByTrigger('.add');
 
-        await expect(page).toHaveScreenshot(
-          `modal-card-custom-stacked-present-tablet-${page.getSnapshotSettings()}.png`
-        );
+        await expect(page).toHaveScreenshot(screenshot(`modal-card-custom-stacked-present-tablet`));
       });
     });
-    test.describe('card modal: swipe to close - tablet', () => {
+    test.describe(title('card modal: swipe to close - tablet'), () => {
       test.beforeEach(async ({ page }) => {
         await page.setViewportSize(Viewports.tablet.portrait);
       });
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-tablet-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-tablet-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-tablet-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-tablet-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-tablet-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-present-tablet-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-tablet-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-tablet-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-tablet-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-tablet-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-tablet-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-tablet-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-tablet-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-tablet-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-tablet-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-tablet-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-tablet-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-tablet-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-present-tablet-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-tablet-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-tablet-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-tablet-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-tablet-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-tablet-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-tablet-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/card/modal.e2e-legacy.ts-snapshots/modal-card-stacked-present-tablet-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts b/core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts
deleted file mode 100644
index 26a323cf1b..0000000000
--- a/core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('modal: custom dialog', () => {
-  test('should size custom modal correctly', async ({ page, skip }) => {
-    skip.rtl();
-    test.info().annotations.push({
-      type: 'issue',
-      description: 'https://github.com/ionic-team/ionic-framework/issues/24080',
-    });
-
-    await page.goto('/src/components/modal/test/custom-dialog');
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-    await page.click('#custom-modal');
-
-    await ionModalDidPresent.next();
-
-    await expect(page).toHaveScreenshot(`modal-custom-dialog-${page.getSnapshotSettings()}.png`);
-  });
-});
diff --git a/core/src/components/modal/test/custom-dialog/modal.e2e.ts b/core/src/components/modal/test/custom-dialog/modal.e2e.ts
new file mode 100644
index 0000000000..f1414e2f60
--- /dev/null
+++ b/core/src/components/modal/test/custom-dialog/modal.e2e.ts
@@ -0,0 +1,22 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('modal: custom dialog'), () => {
+    test('should size custom modal correctly', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/24080',
+      });
+
+      await page.goto('/src/components/modal/test/custom-dialog', config);
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#custom-modal');
+
+      await ionModalDidPresent.next();
+
+      await expect(page).toHaveScreenshot(screenshot(`modal-custom-dialog`));
+    });
+  });
+});
diff --git a/core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom-dialog/modal.e2e-legacy.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/modal/test/custom-dialog/modal.e2e.ts-snapshots/modal-custom-dialog-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts b/core/src/components/modal/test/custom/modal.e2e-legacy.ts
deleted file mode 100644
index 2ff0164810..0000000000
--- a/core/src/components/modal/test/custom/modal.e2e-legacy.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { expect } from '@playwright/test';
-import { test, Viewports } from '@utils/test/playwright';
-import type { E2EPage } from '@utils/test/playwright';
-
-test.describe('modal: custom rendering', () => {
-  const runVisualTests = async (page: E2EPage, screenshotModifier = '') => {
-    await page.goto('/src/components/modal/test/custom');
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-    await page.click('#custom-modal');
-
-    await ionModalDidPresent.next();
-
-    await page.setIonViewport();
-
-    await expect(page).toHaveScreenshot(`modal-custom-present-${screenshotModifier}${page.getSnapshotSettings()}.png`);
-  };
-  test('should not have visual regressions', async ({ page }) => {
-    await runVisualTests(page);
-  });
-
-  test('should not have visual regressions with tablet viewport', async ({ page }) => {
-    await page.setViewportSize(Viewports.tablet.portrait);
-    await runVisualTests(page, 'tablet-');
-  });
-});
diff --git a/core/src/components/modal/test/custom/modal.e2e.ts b/core/src/components/modal/test/custom/modal.e2e.ts
new file mode 100644
index 0000000000..f1bd7a18ea
--- /dev/null
+++ b/core/src/components/modal/test/custom/modal.e2e.ts
@@ -0,0 +1,28 @@
+import { expect } from '@playwright/test';
+import { configs, test, Viewports } from '@utils/test/playwright';
+import type { E2EPage } from '@utils/test/playwright';
+
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('modal: custom rendering'), () => {
+    const runVisualTests = async (page: E2EPage, screenshotModifier = '') => {
+      await page.goto('/src/components/modal/test/custom', config);
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#custom-modal');
+
+      await ionModalDidPresent.next();
+
+      await page.setIonViewport();
+
+      await expect(page).toHaveScreenshot(screenshot(`modal-custom-present${screenshotModifier}`));
+    };
+    test('should not have visual regressions', async ({ page }) => {
+      await runVisualTests(page);
+    });
+
+    test('should not have visual regressions with tablet viewport', async ({ page }) => {
+      await page.setViewportSize(Viewports.tablet.portrait);
+      await runVisualTests(page, '-tablet');
+    });
+  });
+});
diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-md-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-md-rtl-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-md-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-md-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-md-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-md-rtl-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-md-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-md-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/custom/modal.e2e-legacy.ts-snapshots/modal-custom-present-tablet-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-tablet-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/dark-mode/model.e2e-legacy.ts b/core/src/components/modal/test/dark-mode/model.e2e-legacy.ts
deleted file mode 100644
index 02baf425b5..0000000000
--- a/core/src/components/modal/test/dark-mode/model.e2e-legacy.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('modal: dark mode', () => {
-  test('should render the correct text color when outside ion-content', async ({ page, skip }) => {
-    test.info().annotations.push({
-      type: 'issue',
-      description: 'https://github.com/ionic-team/ionic-framework/issues/26060',
-    });
-
-    skip.rtl();
-
-    await page.goto('/src/components/modal/test/dark-mode');
-
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-    await page.click('#basic-modal');
-
-    await ionModalDidPresent.next();
-
-    await expect(page).toHaveScreenshot(`modal-dark-color-${page.getSnapshotSettings()}.png`);
-  });
-});
diff --git a/core/src/components/modal/test/dark-mode/model.e2e.ts b/core/src/components/modal/test/dark-mode/model.e2e.ts
new file mode 100644
index 0000000000..28042045d5
--- /dev/null
+++ b/core/src/components/modal/test/dark-mode/model.e2e.ts
@@ -0,0 +1,23 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('modal: dark mode'), () => {
+    test('should render the correct text color when outside ion-content', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/26060',
+      });
+
+      await page.goto('/src/components/modal/test/dark-mode', config);
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#basic-modal');
+
+      await ionModalDidPresent.next();
+
+      await expect(page).toHaveScreenshot(screenshot(`modal-dark-color`));
+    });
+  });
+});
diff --git a/core/src/components/modal/test/dark-mode/model.e2e-legacy.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/dark-mode/model.e2e-legacy.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/dark-mode/model.e2e-legacy.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/dark-mode/model.e2e-legacy.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/dark-mode/model.e2e-legacy.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/dark-mode/model.e2e-legacy.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/dark-mode/model.e2e-legacy.ts-snapshots/modal-dark-color-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/dark-mode/model.e2e-legacy.ts-snapshots/modal-dark-color-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/dark-mode/model.e2e-legacy.ts-snapshots/modal-dark-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/dark-mode/model.e2e-legacy.ts-snapshots/modal-dark-color-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/dark-mode/model.e2e-legacy.ts-snapshots/modal-dark-color-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/dark-mode/model.e2e-legacy.ts-snapshots/modal-dark-color-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/modal/test/dark-mode/model.e2e.ts-snapshots/modal-dark-color-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/fixtures.ts b/core/src/components/modal/test/fixtures.ts
index bb65d41681..297ed32fcb 100644
--- a/core/src/components/modal/test/fixtures.ts
+++ b/core/src/components/modal/test/fixtures.ts
@@ -1,5 +1,5 @@
 import { dragElementBy } from '@utils/test/playwright';
-import type { E2EPage, EventSpy } from '@utils/test/playwright';
+import type { E2EPage, EventSpy, E2EPageOptions } from '@utils/test/playwright';
 
 export class CardModalPage {
   private ionModalDidPresent!: EventSpy;
@@ -9,9 +9,9 @@ export class CardModalPage {
   constructor(page: E2EPage) {
     this.page = page;
   }
-  async navigate(url: string) {
+  async navigate(url: string, config: E2EPageOptions) {
     const { page } = this;
-    await page.goto(url);
+    await page.goto(url, config);
     this.ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
     this.ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
   }
diff --git a/core/src/components/modal/test/inline/modal.e2e-legacy.ts b/core/src/components/modal/test/inline/modal.e2e-legacy.ts
deleted file mode 100644
index 14ec7e3cd6..0000000000
--- a/core/src/components/modal/test/inline/modal.e2e-legacy.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('modal: inline', () => {
-  test('it should present and then remain in the dom on dismiss', async ({ page, skip }) => {
-    skip.rtl();
-    skip.mode('md');
-    await page.goto('/src/components/modal/test/inline');
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-    const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-    const modal = page.locator('ion-modal');
-
-    await page.click('#open-inline-modal');
-
-    await ionModalDidPresent.next();
-
-    await expect(modal).toBeVisible();
-
-    await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
-
-    await ionModalDidDismiss.next();
-
-    await expect(modal).toBeHidden();
-  });
-
-  test('presenting should create a single root element with the ion-page class', async ({ page, skip }, testInfo) => {
-    skip.mode('md');
-    skip.rtl();
-
-    testInfo.annotations.push({
-      type: 'issue',
-      description: 'https://github.com/ionic-team/ionic-framework/issues/26117',
-    });
-
-    await page.setContent(`
-    <ion-datetime-button datetime="datetime"></ion-datetime-button>
-
-    <ion-modal>
-      <ion-datetime id="datetime" presentation="date-time"></ion-datetime>
-    </ion-modal>
-    `);
-
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-    const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-    const modal = page.locator('ion-modal');
-
-    await page.click('#date-button');
-    await ionModalDidPresent.next();
-
-    // Verifies that the host element exists with the .ion-page class
-    expect(await modal.evaluate((el: HTMLIonModalElement) => el.firstElementChild!.className)).toContain('ion-page');
-
-    await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
-    await ionModalDidDismiss.next();
-
-    await page.click('#date-button');
-    await ionModalDidPresent.next();
-
-    // Verifies that presenting the overlay again does not create a new host element
-    expect(await modal.evaluate((el: HTMLIonModalElement) => el.firstElementChild!.className)).toContain('ion-page');
-    expect(
-      await modal.evaluate((el: HTMLIonModalElement) => el.firstElementChild!.firstElementChild!.className)
-    ).not.toContain('ion-page');
-  });
-});
diff --git a/core/src/components/modal/test/inline/modal.e2e-legacy.ts-snapshots/modal-inline-dismiss-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/inline/modal.e2e-legacy.ts-snapshots/modal-inline-dismiss-ios-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 44fce49c28..0000000000
Binary files a/core/src/components/modal/test/inline/modal.e2e-legacy.ts-snapshots/modal-inline-dismiss-ios-ltr-Mobile-Safari-linux.png and /dev/null differ
diff --git a/core/src/components/modal/test/inline/modal.e2e.ts b/core/src/components/modal/test/inline/modal.e2e.ts
new file mode 100644
index 0000000000..05276722d9
--- /dev/null
+++ b/core/src/components/modal/test/inline/modal.e2e.ts
@@ -0,0 +1,65 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('modal: inline'), () => {
+    test('it should present and then remain in the dom on dismiss', async ({ page }) => {
+      await page.goto('/src/components/modal/test/inline', config);
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+      const modal = page.locator('ion-modal');
+
+      await page.click('#open-inline-modal');
+
+      await ionModalDidPresent.next();
+
+      await expect(modal).toBeVisible();
+
+      await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
+
+      await ionModalDidDismiss.next();
+
+      await expect(modal).toBeHidden();
+    });
+
+    test('presenting should create a single root element with the ion-page class', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/26117',
+      });
+
+      await page.setContent(
+        `
+      <ion-datetime-button datetime="datetime"></ion-datetime-button>
+
+      <ion-modal>
+        <ion-datetime id="datetime" presentation="date-time"></ion-datetime>
+      </ion-modal>
+      `,
+        config
+      );
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+      const modal = page.locator('ion-modal');
+
+      await page.click('#date-button');
+      await ionModalDidPresent.next();
+
+      // Verifies that the host element exists with the .ion-page class
+      expect(await modal.evaluate((el: HTMLIonModalElement) => el.firstElementChild!.className)).toContain('ion-page');
+
+      await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
+      await ionModalDidDismiss.next();
+
+      await page.click('#date-button');
+      await ionModalDidPresent.next();
+
+      // Verifies that presenting the overlay again does not create a new host element
+      expect(await modal.evaluate((el: HTMLIonModalElement) => el.firstElementChild!.className)).toContain('ion-page');
+      expect(
+        await modal.evaluate((el: HTMLIonModalElement) => el.firstElementChild!.firstElementChild!.className)
+      ).not.toContain('ion-page');
+    });
+  });
+});
diff --git a/core/src/components/modal/test/is-open/modal.e2e-legacy.ts b/core/src/components/modal/test/is-open/modal.e2e-legacy.ts
deleted file mode 100644
index 8ee4531235..0000000000
--- a/core/src/components/modal/test/is-open/modal.e2e-legacy.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('modal: isOpen', () => {
-  test.beforeEach(async ({ page, skip }) => {
-    skip.rtl();
-    skip.mode('md');
-    await page.goto('/src/components/modal/test/is-open');
-  });
-
-  test('should open the modal', async ({ page }) => {
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-    const modal = page.locator('ion-modal');
-
-    await page.click('#default');
-
-    await ionModalDidPresent.next();
-    await expect(modal).toBeVisible();
-  });
-
-  test('should open the modal then close after a timeout', async ({ page }) => {
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-    const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-    const modal = page.locator('ion-modal');
-
-    await page.click('#timeout');
-
-    await ionModalDidPresent.next();
-    await expect(modal).toBeVisible();
-
-    await ionModalDidDismiss.next();
-    await expect(modal).toBeHidden();
-  });
-});
diff --git a/core/src/components/modal/test/is-open/modal.e2e.ts b/core/src/components/modal/test/is-open/modal.e2e.ts
new file mode 100644
index 0000000000..6f7712241e
--- /dev/null
+++ b/core/src/components/modal/test/is-open/modal.e2e.ts
@@ -0,0 +1,34 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('modal: isOpen'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/modal/test/is-open', config);
+    });
+
+    test('should open the modal', async ({ page }) => {
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const modal = page.locator('ion-modal');
+
+      await page.click('#default');
+
+      await ionModalDidPresent.next();
+      await expect(modal).toBeVisible();
+    });
+
+    test('should open the modal then close after a timeout', async ({ page }) => {
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+      const modal = page.locator('ion-modal');
+
+      await page.click('#timeout');
+
+      await ionModalDidPresent.next();
+      await expect(modal).toBeVisible();
+
+      await ionModalDidDismiss.next();
+      await expect(modal).toBeHidden();
+    });
+  });
+});
diff --git a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts b/core/src/components/modal/test/sheet/modal.e2e-legacy.ts
deleted file mode 100644
index 08cf4c46f0..0000000000
--- a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts
+++ /dev/null
@@ -1,279 +0,0 @@
-import { expect } from '@playwright/test';
-import { test, dragElementBy } from '@utils/test/playwright';
-
-test.describe('sheet modal: rendering', () => {
-  test('should not have visual regressions', async ({ page }) => {
-    await page.goto('/src/components/modal/test/sheet');
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-    await page.click('#sheet-modal');
-
-    await ionModalDidPresent.next();
-
-    await expect(page).toHaveScreenshot(`modal-sheet-present-${page.getSnapshotSettings()}.png`);
-  });
-});
-
-test.describe('sheet modal: backdrop', () => {
-  test.beforeEach(async ({ page, skip }) => {
-    skip.rtl();
-    await page.goto('/src/components/modal/test/sheet');
-  });
-  test('should dismiss the sheet modal when clicking the active backdrop', async ({ page }) => {
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-    const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-
-    await page.click('#backdrop-active');
-
-    await ionModalDidPresent.next();
-
-    await page.mouse.click(50, 50);
-
-    await ionModalDidDismiss.next();
-  });
-  test('should present another sheet modal when clicking an inactive backdrop', async ({ page }) => {
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-    const modal = page.locator('.custom-height');
-
-    await page.click('#backdrop-inactive');
-    await ionModalDidPresent.next();
-
-    await page.click('#custom-height-modal');
-    await ionModalDidPresent.next();
-
-    await expect(modal).toBeVisible();
-  });
-  test('input outside sheet modal should be focusable when backdrop is inactive', async ({ page }) => {
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-    await page.click('#backdrop-inactive');
-
-    await ionModalDidPresent.next();
-
-    const input = page.locator('#root-input input').first();
-    await input.click();
-    await expect(input).toBeFocused();
-  });
-});
-
-test.describe('sheet modal: setting the breakpoint', () => {
-  test.describe('sheet modal: invalid values', () => {
-    let warnings: string[] = [];
-    test.beforeEach(async ({ page, skip }) => {
-      skip.rtl();
-      await page.goto('/src/components/modal/test/sheet');
-
-      warnings = [];
-
-      page.on('console', (ev) => {
-        if (ev.type() === 'warning') {
-          warnings.push(ev.text());
-        }
-      });
-
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-      await page.click('#sheet-modal');
-      await ionModalDidPresent.next();
-
-      const modal = page.locator('ion-modal');
-      await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.01));
-    });
-    test('it should not change the breakpoint when setting to an invalid value', async ({ page }) => {
-      const modal = page.locator('ion-modal');
-      const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint());
-      expect(breakpoint).toBe(0.25);
-    });
-    test('it should warn when setting an invalid breakpoint', async () => {
-      expect(warnings.length).toBe(1);
-      expect(warnings[0]).toBe(
-        '[Ionic Warning]: Attempted to set invalid breakpoint value 0.01. Please double check that the breakpoint value is part of your defined breakpoints.'
-      );
-    });
-  });
-  test.describe('sheet modal: valid values', () => {
-    test.beforeEach(async ({ page, skip }) => {
-      skip.rtl();
-      await page.goto('/src/components/modal/test/sheet');
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-      await page.click('#sheet-modal');
-      await ionModalDidPresent.next();
-    });
-    test('should update the current breakpoint', async ({ page }) => {
-      const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
-      const modal = page.locator('.modal-sheet');
-
-      await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.5));
-      await ionBreakpointDidChange.next();
-
-      const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint());
-      expect(breakpoint).toBe(0.5);
-    });
-    test('should emit ionBreakpointDidChange', async ({ page }) => {
-      const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
-      const modal = page.locator('.modal-sheet');
-
-      await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.5));
-      await ionBreakpointDidChange.next();
-      expect(ionBreakpointDidChange.events.length).toBe(1);
-    });
-    test('should emit ionBreakpointDidChange when breakpoint is set to 0', async ({ page }) => {
-      const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
-      const modal = page.locator('.modal-sheet');
-
-      await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0));
-      await ionBreakpointDidChange.next();
-      expect(ionBreakpointDidChange.events.length).toBe(1);
-    });
-    test('should emit ionBreakpointDidChange when the sheet is swiped to breakpoint 0', async ({ page }) => {
-      const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
-      const header = page.locator('.modal-sheet ion-header');
-
-      await dragElementBy(header, page, 0, 500);
-
-      await ionBreakpointDidChange.next();
-
-      expect(ionBreakpointDidChange.events.length).toBe(1);
-    });
-  });
-
-  test('it should reset the breakpoint value on dismiss', async ({ page, skip }) => {
-    skip.rtl();
-    await page.goto('/src/components/modal/test/sheet');
-    test.info().annotations.push({
-      type: 'issue',
-      description: 'https://github.com/ionic-team/ionic-framework/issues/25245',
-    });
-
-    await page.setContent(`
-      <ion-content>
-        <ion-button id="open-modal">Open</ion-button>
-        <ion-modal trigger="open-modal" initial-breakpoint="0.25">
-          <ion-content>
-            <ion-button id="dismiss" onclick="modal.dismiss();">Dismiss</ion-button>
-            <ion-button id="set-breakpoint">Set breakpoint</ion-button>
-          </ion-content>
-        </ion-modal>
-      </ion-content>
-      <script>
-        const modal = document.querySelector('ion-modal');
-        const setBreakpointButton = document.querySelector('#set-breakpoint');
-
-        modal.breakpoints = [0.25, 0.5, 1];
-
-        setBreakpointButton.addEventListener('click', () => {
-          modal.setCurrentBreakpoint(0.5);
-        });
-      </script>
-    `);
-
-    const modal = page.locator('ion-modal');
-    const dismissButton = page.locator('#dismiss');
-    const openButton = page.locator('#open-modal');
-    const setBreakpointButton = page.locator('#set-breakpoint');
-
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-    const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-    const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
-
-    await openButton.click();
-    await ionModalDidPresent.next();
-
-    await setBreakpointButton.click();
-    await ionBreakpointDidChange.next();
-
-    await dismissButton.click();
-    await ionModalDidDismiss.next();
-
-    await openButton.click();
-    await ionModalDidPresent.next();
-
-    const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint());
-
-    expect(breakpoint).toBe(0.25);
-
-    await setBreakpointButton.click();
-    await ionBreakpointDidChange.next();
-
-    const updatedBreakpoint = await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint());
-
-    expect(updatedBreakpoint).toBe(0.5);
-  });
-});
-
-test.describe('sheet modal: clicking the handle', () => {
-  test.beforeEach(async ({ page, skip }) => {
-    skip.rtl();
-    await page.goto('/src/components/modal/test/sheet');
-  });
-
-  test('should advance to the next breakpoint when handleBehavior is cycle', async ({ page }) => {
-    const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-    const modal = page.locator('ion-modal');
-
-    await page.click('#handle-behavior-cycle-modal');
-    await ionModalDidPresent.next();
-
-    const handle = page.locator('ion-modal .modal-handle');
-
-    await handle.click();
-    await ionBreakpointDidChange.next();
-
-    await expect(await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint())).toBe(0.5);
-
-    await handle.click();
-    await ionBreakpointDidChange.next();
-
-    await expect(await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint())).toBe(0.75);
-
-    await handle.click();
-    await ionBreakpointDidChange.next();
-
-    await expect(await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint())).toBe(1);
-
-    await handle.click();
-    await ionBreakpointDidChange.next();
-
-    // Advancing from the last breakpoint should change the breakpoint to the first non-zero breakpoint
-    await expect(await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint())).toBe(0.25);
-  });
-
-  test('should not advance the breakpoint when handleBehavior is none', async ({ page }) => {
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-    const modal = page.locator('ion-modal');
-
-    await page.click('#sheet-modal');
-    await ionModalDidPresent.next();
-
-    const handle = page.locator('ion-modal .modal-handle');
-
-    await handle.click();
-
-    await expect(await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint())).toBe(0.25);
-  });
-
-  test('should not dismiss the modal when backdrop is clicked and breakpoint is moving', async ({ page }) => {
-    const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-    const modal = page.locator('ion-modal');
-
-    await page.click('#handle-behavior-cycle-modal');
-    await ionModalDidPresent.next();
-
-    const handle = page.locator('ion-modal .modal-handle');
-    const backdrop = page.locator('ion-modal ion-backdrop');
-
-    await handle.click();
-    backdrop.click();
-
-    await ionBreakpointDidChange.next();
-
-    await handle.click();
-
-    await ionBreakpointDidChange.next();
-
-    await expect(await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint())).toBe(0.75);
-  });
-});
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts b/core/src/components/modal/test/sheet/modal.e2e.ts
new file mode 100644
index 0000000000..8b6e322ab8
--- /dev/null
+++ b/core/src/components/modal/test/sheet/modal.e2e.ts
@@ -0,0 +1,279 @@
+import { expect } from '@playwright/test';
+import { configs, test, dragElementBy } from '@utils/test/playwright';
+
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('sheet modal: rendering'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto('/src/components/modal/test/sheet', config);
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#sheet-modal');
+
+      await ionModalDidPresent.next();
+
+      await expect(page).toHaveScreenshot(screenshot(`modal-sheet-present`));
+    });
+  });
+});
+
+configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('sheet modal: backdrop'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/modal/test/sheet', config);
+    });
+    test('should dismiss the sheet modal when clicking the active backdrop', async ({ page }) => {
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+      await page.click('#backdrop-active');
+
+      await ionModalDidPresent.next();
+
+      await page.mouse.click(50, 50);
+
+      await ionModalDidDismiss.next();
+    });
+    test('should present another sheet modal when clicking an inactive backdrop', async ({ page }) => {
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const modal = page.locator('.custom-height');
+
+      await page.click('#backdrop-inactive');
+      await ionModalDidPresent.next();
+
+      await page.click('#custom-height-modal');
+      await ionModalDidPresent.next();
+
+      await expect(modal).toBeVisible();
+    });
+    test('input outside sheet modal should be focusable when backdrop is inactive', async ({ page }) => {
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#backdrop-inactive');
+
+      await ionModalDidPresent.next();
+
+      const input = page.locator('#root-input input').first();
+      await input.click();
+      await expect(input).toBeFocused();
+    });
+  });
+  test.describe(title('sheet modal: setting the breakpoint'), () => {
+    test.describe('sheet modal: invalid values', () => {
+      let warnings: string[] = [];
+      test.beforeEach(async ({ page }) => {
+        await page.goto('/src/components/modal/test/sheet', config);
+
+        warnings = [];
+
+        page.on('console', (ev) => {
+          if (ev.type() === 'warning') {
+            warnings.push(ev.text());
+          }
+        });
+
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+        await page.click('#sheet-modal');
+        await ionModalDidPresent.next();
+
+        const modal = page.locator('ion-modal');
+        await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.01));
+      });
+      test('it should not change the breakpoint when setting to an invalid value', async ({ page }) => {
+        const modal = page.locator('ion-modal');
+        const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint());
+        expect(breakpoint).toBe(0.25);
+      });
+      test('it should warn when setting an invalid breakpoint', async () => {
+        expect(warnings.length).toBe(1);
+        expect(warnings[0]).toBe(
+          '[Ionic Warning]: Attempted to set invalid breakpoint value 0.01. Please double check that the breakpoint value is part of your defined breakpoints.'
+        );
+      });
+    });
+    test.describe('sheet modal: valid values', () => {
+      test.beforeEach(async ({ page }) => {
+        await page.goto('/src/components/modal/test/sheet', config);
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+        await page.click('#sheet-modal');
+        await ionModalDidPresent.next();
+      });
+      test('should update the current breakpoint', async ({ page }) => {
+        const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
+        const modal = page.locator('.modal-sheet');
+
+        await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.5));
+        await ionBreakpointDidChange.next();
+
+        const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint());
+        expect(breakpoint).toBe(0.5);
+      });
+      test('should emit ionBreakpointDidChange', async ({ page }) => {
+        const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
+        const modal = page.locator('.modal-sheet');
+
+        await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.5));
+        await ionBreakpointDidChange.next();
+        expect(ionBreakpointDidChange.events.length).toBe(1);
+      });
+      test('should emit ionBreakpointDidChange when breakpoint is set to 0', async ({ page }) => {
+        const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
+        const modal = page.locator('.modal-sheet');
+
+        await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0));
+        await ionBreakpointDidChange.next();
+        expect(ionBreakpointDidChange.events.length).toBe(1);
+      });
+      test('should emit ionBreakpointDidChange when the sheet is swiped to breakpoint 0', async ({ page }) => {
+        const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
+        const header = page.locator('.modal-sheet ion-header');
+
+        await dragElementBy(header, page, 0, 500);
+
+        await ionBreakpointDidChange.next();
+
+        expect(ionBreakpointDidChange.events.length).toBe(1);
+      });
+    });
+
+    test('it should reset the breakpoint value on dismiss', async ({ page }) => {
+      await page.goto('/src/components/modal/test/sheet', config);
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/25245',
+      });
+
+      await page.setContent(
+        `
+        <ion-content>
+          <ion-button id="open-modal">Open</ion-button>
+          <ion-modal trigger="open-modal" initial-breakpoint="0.25">
+            <ion-content>
+              <ion-button id="dismiss" onclick="modal.dismiss();">Dismiss</ion-button>
+              <ion-button id="set-breakpoint">Set breakpoint</ion-button>
+            </ion-content>
+          </ion-modal>
+        </ion-content>
+        <script>
+          const modal = document.querySelector('ion-modal');
+          const setBreakpointButton = document.querySelector('#set-breakpoint');
+
+          modal.breakpoints = [0.25, 0.5, 1];
+
+          setBreakpointButton.addEventListener('click', () => {
+            modal.setCurrentBreakpoint(0.5);
+          });
+        </script>
+      `,
+        config
+      );
+
+      const modal = page.locator('ion-modal');
+      const dismissButton = page.locator('#dismiss');
+      const openButton = page.locator('#open-modal');
+      const setBreakpointButton = page.locator('#set-breakpoint');
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+      const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
+
+      await openButton.click();
+      await ionModalDidPresent.next();
+
+      await setBreakpointButton.click();
+      await ionBreakpointDidChange.next();
+
+      await dismissButton.click();
+      await ionModalDidDismiss.next();
+
+      await openButton.click();
+      await ionModalDidPresent.next();
+
+      const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint());
+
+      expect(breakpoint).toBe(0.25);
+
+      await setBreakpointButton.click();
+      await ionBreakpointDidChange.next();
+
+      const updatedBreakpoint = await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint());
+
+      expect(updatedBreakpoint).toBe(0.5);
+    });
+  });
+  test.describe(title('sheet modal: clicking the handle'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/modal/test/sheet', config);
+    });
+
+    test('should advance to the next breakpoint when handleBehavior is cycle', async ({ page }) => {
+      const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const modal = page.locator('ion-modal');
+
+      await page.click('#handle-behavior-cycle-modal');
+      await ionModalDidPresent.next();
+
+      const handle = page.locator('ion-modal .modal-handle');
+
+      await handle.click();
+      await ionBreakpointDidChange.next();
+
+      await expect(await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint())).toBe(0.5);
+
+      await handle.click();
+      await ionBreakpointDidChange.next();
+
+      await expect(await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint())).toBe(0.75);
+
+      await handle.click();
+      await ionBreakpointDidChange.next();
+
+      await expect(await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint())).toBe(1);
+
+      await handle.click();
+      await ionBreakpointDidChange.next();
+
+      // Advancing from the last breakpoint should change the breakpoint to the first non-zero breakpoint
+      await expect(await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint())).toBe(0.25);
+    });
+
+    test('should not advance the breakpoint when handleBehavior is none', async ({ page }) => {
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const modal = page.locator('ion-modal');
+
+      await page.click('#sheet-modal');
+      await ionModalDidPresent.next();
+
+      const handle = page.locator('ion-modal .modal-handle');
+
+      await handle.click();
+
+      await expect(await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint())).toBe(0.25);
+    });
+
+    test('should not dismiss the modal when backdrop is clicked and breakpoint is moving', async ({ page }) => {
+      const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const modal = page.locator('ion-modal');
+
+      await page.click('#handle-behavior-cycle-modal');
+      await ionModalDidPresent.next();
+
+      const handle = page.locator('ion-modal .modal-handle');
+      const backdrop = page.locator('ion-modal ion-backdrop');
+
+      await handle.click();
+      backdrop.click();
+
+      await ionBreakpointDidChange.next();
+
+      await handle.click();
+
+      await ionBreakpointDidChange.next();
+
+      await expect(await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint())).toBe(0.75);
+    });
+  });
+});
diff --git a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Safari-linux.png
rename to core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Safari-linux.png
rename to core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Chrome-linux.png
similarity index 100%
rename from core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Chrome-linux.png
rename to core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Chrome-linux.png
diff --git a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Firefox-linux.png
rename to core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Firefox-linux.png
diff --git a/core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/modal/test/sheet/modal.e2e-legacy.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Safari-linux.png
rename to core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Safari-linux.png
diff --git a/core/src/components/modal/test/standalone/modal.e2e-legacy.ts b/core/src/components/modal/test/standalone/modal.e2e-legacy.ts
deleted file mode 100644
index 70195ef99d..0000000000
--- a/core/src/components/modal/test/standalone/modal.e2e-legacy.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { test } from '@utils/test/playwright';
-
-test.describe('modal: standalone', () => {
-  test('should open even without an ion-app', async ({ page, skip }) => {
-    skip.rtl();
-    skip.mode('md');
-    await page.goto('/src/components/modal/test/standalone');
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-    const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-
-    await page.click('#basic-modal');
-    await ionModalDidPresent.next();
-
-    const modal = page.locator('ion-modal');
-    await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
-
-    await ionModalDidDismiss.next();
-
-    await page.waitForSelector('ion-modal', { state: 'detached' });
-  });
-});
diff --git a/core/src/components/modal/test/standalone/modal.e2e.ts b/core/src/components/modal/test/standalone/modal.e2e.ts
new file mode 100644
index 0000000000..eaaa7a824f
--- /dev/null
+++ b/core/src/components/modal/test/standalone/modal.e2e.ts
@@ -0,0 +1,21 @@
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('modal: standalone'), () => {
+    test('should open even without an ion-app', async ({ page }) => {
+      await page.goto('/src/components/modal/test/standalone', config);
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+      await page.click('#basic-modal');
+      await ionModalDidPresent.next();
+
+      const modal = page.locator('ion-modal');
+      await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
+
+      await ionModalDidDismiss.next();
+
+      await page.waitForSelector('ion-modal', { state: 'detached' });
+    });
+  });
+});
diff --git a/core/src/components/modal/test/trigger/modal.e2e-legacy.ts b/core/src/components/modal/test/trigger/modal.e2e-legacy.ts
deleted file mode 100644
index adcc76dc41..0000000000
--- a/core/src/components/modal/test/trigger/modal.e2e-legacy.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
-
-test.describe('modal: trigger', () => {
-  test.beforeEach(async ({ page, skip }) => {
-    skip.rtl();
-    skip.mode('ios');
-    await page.goto('/src/components/modal/test/trigger');
-  });
-
-  test('should open modal by left clicking on trigger', async ({ page }) => {
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-    await page.click('#left-click-trigger');
-
-    await ionModalDidPresent.next();
-
-    const modal = page.locator('.left-click-modal');
-    await expect(modal).toBeVisible();
-  });
-
-  test('should still open modal when it has been removed and re-added to DOM', async ({ page }) => {
-    const button = page.locator('#left-click-trigger');
-    const modal = page.locator('ion-modal');
-
-    await modal.evaluate((modal: HTMLIonModalElement) => {
-      modal.remove();
-      document.querySelector('ion-button')?.insertAdjacentElement('afterend', modal);
-    });
-    await page.waitForChanges();
-
-    await button.click();
-    await expect(modal).toBeVisible();
-  });
-});
diff --git a/core/src/components/modal/test/trigger/modal.e2e.ts b/core/src/components/modal/test/trigger/modal.e2e.ts
new file mode 100644
index 0000000000..8513e2fbfb
--- /dev/null
+++ b/core/src/components/modal/test/trigger/modal.e2e.ts
@@ -0,0 +1,35 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('modal: trigger'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/modal/test/trigger', config);
+    });
+
+    test('should open modal by left clicking on trigger', async ({ page }) => {
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#left-click-trigger');
+
+      await ionModalDidPresent.next();
+
+      const modal = page.locator('.left-click-modal');
+      await expect(modal).toBeVisible();
+    });
+
+    test('should still open modal when it has been removed and re-added to DOM', async ({ page }) => {
+      const button = page.locator('#left-click-trigger');
+      const modal = page.locator('ion-modal');
+
+      await modal.evaluate((modal: HTMLIonModalElement) => {
+        modal.remove();
+        document.querySelector('ion-button')?.insertAdjacentElement('afterend', modal);
+      });
+      await page.waitForChanges();
+
+      await button.click();
+      await expect(modal).toBeVisible();
+    });
+  });
+});