diff --git a/core/playwright.config.ts b/core/playwright.config.ts
index b76b9f95da..0926fe2bf6 100644
--- a/core/playwright.config.ts
+++ b/core/playwright.config.ts
@@ -87,7 +87,7 @@ const config: PlaywrightTestConfig = {
        * Increases the maximum allowed pixel difference to account
        * for slight browser rendering inconsistencies.
        */
-      maxDiffPixelRatio: 0.005
+      maxDiffPixelRatio: 0.0025
     }
   },
   /* Fail the build on CI if you accidentally left test.only in the source code. */
diff --git a/core/src/components/accordion/test/accordion.e2e.ts b/core/src/components/accordion/test/accordion.e2e.ts
new file mode 100644
index 0000000000..ab0a48dc28
--- /dev/null
+++ b/core/src/components/accordion/test/accordion.e2e.ts
@@ -0,0 +1,56 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('accordion: states', () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+    skip.mode('ios');
+  });
+  test('should properly set readonly on child accordions', async ({ page }) => {
+    await page.setContent(`
+      <ion-accordion-group animated="false">
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `);
+
+    const accordionGroup = page.locator('ion-accordion-group');
+    const accordion = page.locator('ion-accordion');
+
+    expect(accordion).toHaveJSProperty('readonly', false);
+
+    await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
+      el.readonly = true;
+    });
+
+    await page.waitForChanges();
+
+    expect(accordion).toHaveJSProperty('readonly', true);
+  });
+
+  test('should properly set disabled on child accordions', async ({ page }) => {
+    await page.setContent(`
+      <ion-accordion-group animated="false">
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `);
+
+    const accordionGroup = page.locator('ion-accordion-group');
+    const accordion = page.locator('ion-accordion');
+
+    expect(accordion).toHaveJSProperty('disabled', false);
+
+    await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
+      el.disabled = true;
+    });
+
+    await page.waitForChanges();
+
+    expect(accordion).toHaveJSProperty('disabled', true);
+  });
+});
diff --git a/core/src/components/accordion/test/e2e.ts b/core/src/components/accordion/test/e2e.ts
deleted file mode 100644
index 5642c7ec34..0000000000
--- a/core/src/components/accordion/test/e2e.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('should properly set readonly on child accordions', async () => {
-  const page = await newE2EPage({
-    html: `
-      <ion-accordion-group animated="false">
-        <ion-accordion>
-          <ion-item slot="header">Label</ion-item>
-          <div slot="content">Content</div>
-        </ion-accordion>
-      </ion-accordion-group>
-    `,
-  });
-
-  const accordion = await page.find('ion-accordion');
-  const value = await accordion.getProperty('readonly');
-
-  expect(value).toBe(false);
-
-  await page.$eval('ion-accordion-group', (el: HTMLIonAccordionGroupElement) => {
-    el.readonly = true;
-  });
-
-  await page.waitForChanges();
-
-  const valueAgain = await accordion.getProperty('readonly');
-  expect(valueAgain).toBe(true);
-});
-
-test('should properly set disabled on child accordions', async () => {
-  const page = await newE2EPage({
-    html: `
-      <ion-accordion-group animated="false">
-        <ion-accordion>
-          <ion-item slot="header">Label</ion-item>
-          <div slot="content">Content</div>
-        </ion-accordion>
-      </ion-accordion-group>
-    `,
-  });
-
-  const accordion = await page.find('ion-accordion');
-  const value = await accordion.getProperty('disabled');
-
-  expect(value).toBe(false);
-
-  await page.$eval('ion-accordion-group', (el: HTMLIonAccordionGroupElement) => {
-    el.disabled = true;
-  });
-
-  await page.waitForChanges();
-
-  const valueAgain = await accordion.getProperty('disabled');
-  expect(valueAgain).toBe(true);
-});
diff --git a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-md-ltr-Mobile-Chrome-linux.png
index 7e9514c23b..e3eeaa28bf 100644
Binary files a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-md-rtl-Mobile-Chrome-linux.png
index b7e5ce0647..4da9877c52 100644
Binary files a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts-snapshots/datetime-overlay-modal-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index 39a7b718c1..ec0fab099b 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -1893,6 +1893,7 @@ export class Datetime implements ComponentInterface {
                   aria-hidden="true"
                   icon={this.showMonthAndYear ? expandedIcon : collapsedIcon}
                   lazy={false}
+                  flipRtl={true}
                 ></ion-icon>
               </ion-label>
             </ion-item>
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Chrome-linux.png
index 9d23b74a53..92a8651853 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Firefox-linux.png
index ff886335d0..a426643474 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Safari-linux.png
index 0afe0803a7..6fc4266c48 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-ltr-Mobile-Firefox-linux.png
index 171468bd32..a1e749d594 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-rtl-Mobile-Firefox-linux.png
index 7f4fde81d3..dd1d0aefed 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Chrome-linux.png
index fd37d32797..cf745aa5fc 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Firefox-linux.png
index 7c20c22ba0..74dd7c415d 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Safari-linux.png
index 8913b7f408..5bc6f0bf88 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-ltr-Mobile-Firefox-linux.png
index a7e61861be..3bf96fc5fe 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Firefox-linux.png
index ec50047452..9f85a9ddb4 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Chrome-linux.png
index 0195db8671..9260ae4a54 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Firefox-linux.png
index 85ad3e21f9..941dec1d53 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Safari-linux.png
index 094701b0a2..277ef72d76 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-ltr-Mobile-Firefox-linux.png
index de0f49c2b3..92fc36832e 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-rtl-Mobile-Firefox-linux.png
index 45d7f815f9..db04cc3096 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Chrome-linux.png
index 42fd7313d7..7760a6cfb0 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Firefox-linux.png
index 4dc5880be5..b2527536ee 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Safari-linux.png
index 11552ddfa0..8ac1a3abc1 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-ltr-Mobile-Firefox-linux.png
index f2df6ab9b2..cf28246b9b 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-rtl-Mobile-Firefox-linux.png
index 6b05369957..5b28a8d012 100644
Binary files a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Chrome-linux.png
index 2e7e2f7988..b64c8b187b 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Firefox-linux.png
index 3553d1acd7..8b121a374b 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Safari-linux.png
index e759073b72..872733e651 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-ltr-Mobile-Firefox-linux.png
index b870e81958..ec6358a165 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-rtl-Mobile-Firefox-linux.png
index 0df4805561..18d537e247 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Chrome-linux.png
index 887d5ffd0a..68d9b406ed 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Firefox-linux.png
index e2e323e39a..b7e2808457 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Safari-linux.png
index d8217c94f9..5aecce93a5 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-ltr-Mobile-Firefox-linux.png
index d5830aad7d..baccd78d0c 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-rtl-Mobile-Firefox-linux.png
index d41519fad2..48900cb69c 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Chrome-linux.png
index 9a75ff7586..c979f95f9d 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Firefox-linux.png
index a725c1d428..bb515037c6 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Safari-linux.png
index 965b8e2e87..d67eeae1f8 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-ltr-Mobile-Firefox-linux.png
index 19774d14aa..1a7a101c4c 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-rtl-Mobile-Firefox-linux.png
index 04e1756ffa..d953bc9b5b 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Chrome-linux.png
index 3c3b1c9050..77984595a7 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Firefox-linux.png
index 742ab906dd..33c20ad3ff 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Safari-linux.png
index ab06822c04..391514b466 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-ltr-Mobile-Firefox-linux.png
index 5469b3fff7..caef0a1765 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-rtl-Mobile-Firefox-linux.png
index fa2a851ac6..aa6e25c8e4 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Chrome-linux.png
index 8babc6b13d..054d228118 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Firefox-linux.png
index 327e01b12e..69d1333ae1 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Safari-linux.png
index e59d864ac1..d394e955b2 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-ltr-Mobile-Firefox-linux.png
index 1b0402f64e..32617bb299 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-rtl-Mobile-Firefox-linux.png
index c6637a7b35..7744e01d03 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Chrome-linux.png
index f810563848..db4c136934 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Firefox-linux.png
index 1e8fbea2eb..bcdf4ef8c7 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Safari-linux.png
index 58a75e2ce2..3ddf08dca5 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-ltr-Mobile-Firefox-linux.png
index 9579e3c45e..a595a0a188 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-rtl-Mobile-Firefox-linux.png
index 78ee691daf..36b2d4974f 100644
Binary files a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-rtl-Mobile-Chrome-linux.png
index a2663e6784..75cd558b29 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-rtl-Mobile-Firefox-linux.png
index c8de953df2..d861dc147e 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-rtl-Mobile-Safari-linux.png
index 9aae6ede51..4b537457fd 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-ltr-Mobile-Firefox-linux.png
index 68927b948a..c7cd35e693 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-rtl-Mobile-Firefox-linux.png
index 8419b0fcb2..1a7e99027b 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-rtl-Mobile-Chrome-linux.png
index 138d69263f..6afb0e1e09 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-rtl-Mobile-Firefox-linux.png
index 3928e66df0..abaf924d31 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-rtl-Mobile-Safari-linux.png
index f8939ef36e..62ba9f4d90 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-ltr-Mobile-Firefox-linux.png
index 89b0647318..78d471c5c8 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-rtl-Mobile-Chrome-linux.png
index 7c4fa729ba..d39db30918 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-rtl-Mobile-Firefox-linux.png
index 463a407bad..b273211f38 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-rtl-Mobile-Safari-linux.png
index e3565fa941..d7c9871760 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-ltr-Mobile-Firefox-linux.png
index 3d9ce197f6..b71a9ee9c1 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-rtl-Mobile-Safari-linux.png
index 95b3fb42b7..9a7767b754 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-ltr-Mobile-Firefox-linux.png
index 5396d180b9..039b0256b5 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-rtl-Mobile-Firefox-linux.png
index 5396d180b9..039b0256b5 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-rtl-Mobile-Chrome-linux.png
index 4dda259bb2..36b5475d9b 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-rtl-Mobile-Firefox-linux.png
index 07eca6663c..14c3e6cf73 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-rtl-Mobile-Safari-linux.png
index 70a1094bda..90460847b7 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-ltr-Mobile-Firefox-linux.png
index 9c60ace057..4dad563d56 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-rtl-Mobile-Firefox-linux.png
index 5d3a7c0d6a..f6dc0ab444 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-rtl-Mobile-Chrome-linux.png
index 4aa80da677..f5bd90c103 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-rtl-Mobile-Firefox-linux.png
index 4fe3694466..98af3a225d 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-rtl-Mobile-Safari-linux.png
index 86e6d53660..e72a12b099 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-ltr-Mobile-Firefox-linux.png
index 944e456d2a..b940678c3a 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-rtl-Mobile-Firefox-linux.png
index e8978422c6..dc1ad879e0 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-rtl-Mobile-Chrome-linux.png
index 3ec57b918e..d6ae6b6714 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-rtl-Mobile-Firefox-linux.png
index ea6b1bd91e..4655765b0e 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-rtl-Mobile-Safari-linux.png
index 2a4a52a5c7..9ebac0e5c8 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-ltr-Mobile-Firefox-linux.png
index b6df6391ac..ca8fe8c9cb 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-rtl-Mobile-Firefox-linux.png
index f50255d2db..979b3426d2 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-rtl-Mobile-Safari-linux.png
index a2e75534db..d389eff594 100644
Binary files a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-rtl-Mobile-Chrome-linux.png
index b710f0ee49..fbd17c2dff 100644
Binary files a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-rtl-Mobile-Firefox-linux.png
index ec2451a887..c27c96ae0d 100644
Binary files a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-rtl-Mobile-Safari-linux.png
index e7622dd7cf..be7e50d71b 100644
Binary files a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-md-ltr-Mobile-Firefox-linux.png
index 49a94eafc6..41b7759204 100644
Binary files a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-md-rtl-Mobile-Firefox-linux.png
index 329e0a5ff5..d301c2b74b 100644
Binary files a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts b/core/src/components/datetime/test/locale/datetime.e2e.ts
index aaee56f5ac..7123f3b49c 100644
--- a/core/src/components/datetime/test/locale/datetime.e2e.ts
+++ b/core/src/components/datetime/test/locale/datetime.e2e.ts
@@ -156,9 +156,8 @@ class DatetimeLocaleFixture {
   }
 
   async expectLocalizedDatePicker() {
-    await this.waitForDatetime();
-
     await this.page.setIonViewport();
+    await this.waitForDatetime();
     // Captures a screenshot of the datepicker with localized am/pm labels
     expect(await this.page.screenshot()).toMatchSnapshot(
       `datetime-locale-${this.locale}-diff-${this.page.getSnapshotSettings()}.png`
@@ -166,8 +165,8 @@ class DatetimeLocaleFixture {
   }
 
   async expectLocalizedMonthYearPicker() {
-    await this.waitForDatetime();
     await this.page.setIonViewport();
+    await this.waitForDatetime();
     // Opens the month/year picker
     const monthYearButton = this.page.locator('#am .calendar-month-year ion-item');
     await monthYearButton.click();
@@ -179,8 +178,8 @@ class DatetimeLocaleFixture {
   }
 
   async expectLocalizedTimePicker() {
-    await this.waitForDatetime();
     await this.page.setIonViewport();
+    await this.waitForDatetime();
     // Opens the timepicker
     const timePickerButton = this.page.locator('#am .time-body');
     const timePickerPopoverPresentSpy = await this.page.spyOnEvent('ionPopoverDidPresent');
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Safari-linux.png
index 62113dd2a6..eeefbb53bf 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-rtl-Mobile-Chrome-linux.png
index b8cd5041f8..d190986f57 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-rtl-Mobile-Firefox-linux.png
index 48131c0a68..6dadd4059f 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-rtl-Mobile-Safari-linux.png
index 60a2cf74a8..108fcf9ff6 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Safari-linux.png
index 66ba0a0c0c..c7332a43be 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-rtl-Mobile-Chrome-linux.png
index ad07a0b1db..d89437a823 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-rtl-Mobile-Firefox-linux.png
index 3adcc1eb81..e26980f996 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-rtl-Mobile-Safari-linux.png
index 1ddc4c038b..9d3cb3bbae 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-month-year-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-ltr-Mobile-Safari-linux.png
index 8861978f58..75078e6131 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-rtl-Mobile-Chrome-linux.png
index e4f6259c9b..4b079a2745 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-rtl-Mobile-Firefox-linux.png
index 79fc7228b9..a772757cf7 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-rtl-Mobile-Safari-linux.png
index f3e39aaa99..533ade16e1 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-en-US-time-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Safari-linux.png
index 20f880260a..5544c2928b 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-rtl-Mobile-Chrome-linux.png
index 6057c61037..9c6d8a6f75 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-rtl-Mobile-Firefox-linux.png
index 85db8fe71e..8a8f72089c 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-rtl-Mobile-Safari-linux.png
index 5de61491a4..136f309d92 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-md-ltr-Mobile-Safari-linux.png
index f26fe18436..fb8dec89d6 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-md-rtl-Mobile-Safari-linux.png
index a5def520eb..79c5735dba 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Safari-linux.png
index 29a37b46e4..292eb084f0 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-rtl-Mobile-Chrome-linux.png
index 0c76057a7f..b960269490 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-rtl-Mobile-Firefox-linux.png
index 5cf9977a45..8a41e815d8 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-rtl-Mobile-Safari-linux.png
index 9e2e639f99..a619c67d1c 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-month-year-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-ltr-Mobile-Safari-linux.png
index a0339d03a0..d835261a0d 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-rtl-Mobile-Chrome-linux.png
index 9a13c27b99..d5bf4ff3eb 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-rtl-Mobile-Firefox-linux.png
index 5bdb1a2118..f86b7db846 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-rtl-Mobile-Safari-linux.png
index 61a381ce84..395d3c8baa 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-es-ES-time-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Safari-linux.png
index 2080160b38..fa1a610749 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-rtl-Mobile-Chrome-linux.png
index 2ff2be2ad8..ff18114a25 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-rtl-Mobile-Firefox-linux.png
index aaf25056f2..0953051787 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-rtl-Mobile-Safari-linux.png
index 3505c548fc..8ca8fcf3ef 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-md-rtl-Mobile-Safari-linux.png
index a78a36fedf..bde7d2dc40 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Safari-linux.png
index cd6f9df63e..41788161c0 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-rtl-Mobile-Chrome-linux.png
index 6cfd4529d4..68f6642702 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-rtl-Mobile-Firefox-linux.png
index 70fcc939b3..211505746a 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-rtl-Mobile-Safari-linux.png
index 848dad43ef..b68d617449 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Chrome-linux.png
index 5b1ebfcc3f..bf61ea6c3e 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Firefox-linux.png
index 2d6a7115f4..f4df63b5b6 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Safari-linux.png
index 7cf75f9b86..c29d87dc89 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-rtl-Mobile-Chrome-linux.png
index 9c82723d33..c609cc156b 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-rtl-Mobile-Firefox-linux.png
index 3477033b86..75188a4886 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-rtl-Mobile-Safari-linux.png
index 306f527d17..a3b285f5cb 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-month-year-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-ltr-Mobile-Safari-linux.png
index be43fa6cd0..5827373103 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-rtl-Mobile-Chrome-linux.png
index 213ce196ae..0011e21d2f 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-rtl-Mobile-Firefox-linux.png
index 5ec2a1bc75..24c6bead1f 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-rtl-Mobile-Safari-linux.png
index 5c407edd9b..98409bf4b3 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ja-JP-time-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-ltr-Mobile-Safari-linux.png
index 86221eae42..4970b0e50f 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-rtl-Mobile-Chrome-linux.png
index fe9e1ebfe1..01f54ab04b 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-rtl-Mobile-Firefox-linux.png
index 12f455870e..dd170f9d16 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-rtl-Mobile-Safari-linux.png
index d90a992e77..d2ef7f0678 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-ltr-Mobile-Safari-linux.png
index 97e692e14d..182e3fb5a3 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-rtl-Mobile-Chrome-linux.png
index 2698edc878..16d1f35c05 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-rtl-Mobile-Firefox-linux.png
index c305ca461b..30db068fde 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-rtl-Mobile-Safari-linux.png
index 74b00354ee..1b310e0e52 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-month-year-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-ltr-Mobile-Safari-linux.png
index 0cd46091b6..000a586e3f 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-rtl-Mobile-Chrome-linux.png
index 11ce9503b1..098d020b7b 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-rtl-Mobile-Firefox-linux.png
index 8233bfe713..1ed7b45ef6 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-rtl-Mobile-Safari-linux.png
index e6d5f6a549..6f9e8974f3 100644
Binary files a/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/locale/datetime.e2e.ts-snapshots/datetime-locale-ta-IN-time-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-rtl-Mobile-Chrome-linux.png
index f91b2fd4d6..6ab16f9f49 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-rtl-Mobile-Firefox-linux.png
index e3644fdf34..2a45ba2261 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-rtl-Mobile-Safari-linux.png
index 1a6e3f7725..db7bbf2186 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-md-ltr-Mobile-Firefox-linux.png
index e455c6b928..81b6584dfe 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-md-rtl-Mobile-Firefox-linux.png
index 39b68bb596..77256dc37f 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-multipleDefaultValues-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-rtl-Mobile-Chrome-linux.png
index e221e7746b..10129b1f41 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-rtl-Mobile-Firefox-linux.png
index bd26b2d57c..dc8e46a0ef 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-rtl-Mobile-Safari-linux.png
index bfe6e9d02f..b39dd4b94a 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-md-ltr-Mobile-Firefox-linux.png
index 7624915f6b..f32abd8201 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-md-rtl-Mobile-Firefox-linux.png
index 78bef5f4cc..1e190e405f 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-singleDefaultValue-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-rtl-Mobile-Chrome-linux.png
index 54b61b4983..70c3ea0078 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-rtl-Mobile-Firefox-linux.png
index a293b1ef0d..e012b9f64f 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-rtl-Mobile-Safari-linux.png
index 0e862f558d..08beaf686c 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-ltr-Mobile-Firefox-linux.png
index 7ffbaa386e..5068ac9469 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-rtl-Mobile-Firefox-linux.png
index b63e98ed11..cb0a5536a6 100644
Binary files a/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/multiple/datetime.e2e.ts-snapshots/datetime-multiple-withHeader-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Firefox-linux.png
index 015e9fe32f..d9bc63f7ee 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Chrome-linux.png
index 6358582ff1..aa96a98a0e 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Firefox-linux.png
index ef6677929e..65c93f50f3 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Safari-linux.png
index 97c3bd027f..b4091f2478 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Firefox-linux.png
index 5e9b8ac937..46a7499178 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Chrome-linux.png
index 74e24e46d2..79b30ccd96 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Firefox-linux.png
index 410f1d1f39..887c050d53 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Safari-linux.png
index f15d3f3929..030d5e5f2d 100644
Binary files a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Chrome-linux.png
index 601c8a0582..bcef1ca70d 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Firefox-linux.png
index 57a3a8e7e4..a05f5751f2 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Safari-linux.png
index 8df46a9b4a..dc564f5ce0 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Chrome-linux.png
index a4cc30c17b..8dc82ce361 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Firefox-linux.png
index 86b7a30d79..17772298a4 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Safari-linux.png
index 60edcde7ca..6391d79ee3 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-date-time-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-rtl-Mobile-Chrome-linux.png
index 40e1e2af63..2fc71cd71f 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-rtl-Mobile-Firefox-linux.png
index 81095d55b5..9cd710ee8b 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-rtl-Mobile-Safari-linux.png
index 783ade0f4f..3a1b68ff42 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-ltr-Mobile-Firefox-linux.png
index d27e349622..b24ef2b9e3 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-rtl-Mobile-Firefox-linux.png
index fc8c92810b..0db55c5bb8 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-rtl-Mobile-Chrome-linux.png
index 4835bc2cee..4367987507 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-rtl-Mobile-Safari-linux.png
index 855b39e356..50fb14e908 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-ltr-Mobile-Chrome-linux.png
index d10ae1e62e..e628a3dd36 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-rtl-Mobile-Chrome-linux.png
index 000372f89a..022318d5c3 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-month-year-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Chrome-linux.png
index 2fe0df1b9b..b258cf12a6 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Firefox-linux.png
index feefcafd03..74ccc4f5c6 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Safari-linux.png
index 8e22ee12ec..45c48de14b 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-date-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-rtl-Mobile-Chrome-linux.png
index 7d2786e9f4..d7ed0cfd58 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-rtl-Mobile-Firefox-linux.png
index b6bdf99c32..780a6bb716 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-rtl-Mobile-Safari-linux.png
index 28b3f67d1e..ddededd968 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-ltr-Mobile-Chrome-linux.png
index c49501d2bb..6606364a13 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-ltr-Mobile-Safari-linux.png
index b7a1a5a604..3707717418 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-rtl-Mobile-Chrome-linux.png
index 1ed3bc8e39..56f924618d 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-rtl-Mobile-Safari-linux.png
index 246fb1cdd4..25e069e6d0 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-time-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-rtl-Mobile-Chrome-linux.png
index 04b6ec5ca0..a2dfec3110 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-rtl-Mobile-Firefox-linux.png
index ddedecafac..2346d9aca1 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-rtl-Mobile-Safari-linux.png
index e6d20f93cf..ea8ceaec65 100644
Binary files a/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/datetime/test/presentation/datetime.e2e.ts-snapshots/datetime-presentation-year-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-ltr-Mobile-Firefox-linux.png
index 521c9ac431..a97e04ad4d 100644
Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-full-focused-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-rtl-Mobile-Chrome-linux.png
index f60788deda..b804df58b0 100644
Binary files a/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/input/test/basic/input.e2e.ts-snapshots/input-with-lines-inset-focused-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Firefox-linux.png
index 588e037910..045b067896 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-rtl-Mobile-Firefox-linux.png
index 31c3252c9d..18c37b0250 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-rtl-Mobile-Firefox-linux.png
index bdf80a4623..50b50568b4 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/label/test/basic/e2e.ts b/core/src/components/label/test/basic/e2e.ts
deleted file mode 100644
index 055e96ba6c..0000000000
--- a/core/src/components/label/test/basic/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('label: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/label/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/list/test/inset/index.html b/core/src/components/list/test/inset/index.html
index cd9a582638..f6ba3949a5 100644
--- a/core/src/components/list/test/inset/index.html
+++ b/core/src/components/list/test/inset/index.html
@@ -99,12 +99,12 @@
 
           <ion-item>
             <ion-label>Normal Datetime</ion-label>
-            <ion-datetime></ion-datetime>
+            <ion-datetime value="2022-11-29"></ion-datetime>
           </ion-item>
 
           <ion-item>
             <ion-label position="stacked">Stacked Datetime</ion-label>
-            <ion-datetime></ion-datetime>
+            <ion-datetime value="2022-11-29"></ion-datetime>
           </ion-item>
         </ion-list>
       </ion-content>
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Chrome-linux.png
index 66111f17e2..a917388498 100644
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Firefox-linux.png
index b06bd6420b..b8125533a3 100644
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Chrome-linux.png
index a6251b69de..7a6c1920f7 100644
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Firefox-linux.png
index 8df2820117..9a3c07d423 100644
Binary files a/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/list/test/inset/list.e2e.ts-snapshots/list-inset-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/loading/test/test.utils.ts b/core/src/components/loading/test/test.utils.ts
deleted file mode 100644
index f1ab7d3e63..0000000000
--- a/core/src/components/loading/test/test.utils.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-import { generateE2EUrl } from '@utils/test';
-
-export const testLoading = async (type: string, selector: string, rtl = false) => {
-  try {
-    const pageUrl = generateE2EUrl('loading', type, rtl);
-
-    const page = await newE2EPage({
-      url: pageUrl,
-    });
-
-    const screenshotCompares = [];
-
-    await page.click(selector);
-    await page.waitForSelector(selector);
-
-    let loading = await page.find('ion-loading');
-    expect(loading).not.toBeNull();
-
-    await loading.waitForVisible();
-
-    screenshotCompares.push(await page.compareScreenshot());
-
-    await loading.callMethod('dismiss');
-    await loading.waitForNotVisible();
-
-    screenshotCompares.push(await page.compareScreenshot('dismiss'));
-
-    loading = await page.find('ion-loading');
-    expect(loading).toBeNull();
-
-    for (const screenshotCompare of screenshotCompares) {
-      expect(screenshotCompare).toMatchScreenshot();
-    }
-  } catch (err) {
-    throw err;
-  }
-};
diff --git a/core/src/components/picker-column/test/standalone/picker-column.e2e.ts-snapshots/picker-single-column-diff-0-md-ltr-Mobile-Safari-linux.png b/core/src/components/picker-column/test/standalone/picker-column.e2e.ts-snapshots/picker-single-column-diff-0-md-ltr-Mobile-Safari-linux.png
index 10cdbd2584..f8a7777330 100644
Binary files a/core/src/components/picker-column/test/standalone/picker-column.e2e.ts-snapshots/picker-single-column-diff-0-md-ltr-Mobile-Safari-linux.png and b/core/src/components/picker-column/test/standalone/picker-column.e2e.ts-snapshots/picker-single-column-diff-0-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/picker-column/test/standalone/picker-column.e2e.ts-snapshots/picker-single-column-diff-0-md-rtl-Mobile-Safari-linux.png b/core/src/components/picker-column/test/standalone/picker-column.e2e.ts-snapshots/picker-single-column-diff-0-md-rtl-Mobile-Safari-linux.png
index c5416c92de..02587d6880 100644
Binary files a/core/src/components/picker-column/test/standalone/picker-column.e2e.ts-snapshots/picker-single-column-diff-0-md-rtl-Mobile-Safari-linux.png and b/core/src/components/picker-column/test/standalone/picker-column.e2e.ts-snapshots/picker-single-column-diff-0-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/spec/select.e2e.ts b/core/src/components/select/test/spec/select.e2e.ts
index 81225abb28..099cfa15e4 100644
--- a/core/src/components/select/test/spec/select.e2e.ts
+++ b/core/src/components/select/test/spec/select.e2e.ts
@@ -7,6 +7,8 @@ test.describe('select: spec', () => {
 
     await page.setIonViewport();
 
-    expect(await page.screenshot()).toMatchSnapshot(`select-spec-diff-${page.getSnapshotSettings()}.png`);
+    expect(await page.screenshot({ animations: 'disabled' })).toMatchSnapshot(
+      `select-spec-diff-${page.getSnapshotSettings()}.png`
+    );
   });
 });
diff --git a/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-ltr-Mobile-Chrome-linux.png
index 4b7624ef0a..e65907322e 100644
Binary files a/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-ltr-Mobile-Firefox-linux.png
index 6f345bb309..33417e3d2c 100644
Binary files a/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-ltr-Mobile-Safari-linux.png
index abb55b41c3..cdbc0cc618 100644
Binary files a/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-rtl-Mobile-Chrome-linux.png
index bc0f686459..c0ac550a60 100644
Binary files a/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-rtl-Mobile-Firefox-linux.png
index 67cb62b5b0..b859d67205 100644
Binary files a/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-rtl-Mobile-Safari-linux.png
index d1a4d3fcec..2e604400ef 100644
Binary files a/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/spec/select.e2e.ts-snapshots/select-spec-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/slides/test/basic/e2e.ts b/core/src/components/slides/test/basic/e2e.ts
deleted file mode 100644
index 01279aefc8..0000000000
--- a/core/src/components/slides/test/basic/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('slides: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/slides/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/slides/test/image/e2e.ts b/core/src/components/slides/test/image/e2e.ts
deleted file mode 100644
index 5a12745e69..0000000000
--- a/core/src/components/slides/test/image/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('slides: image', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/slides/test/image?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/slides/test/prevent-default/e2e.ts b/core/src/components/slides/test/prevent-default/e2e.ts
deleted file mode 100644
index e92c108342..0000000000
--- a/core/src/components/slides/test/prevent-default/e2e.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('slides: prevent-default', async () => {
-  // For this specific test, _testing=false to import tap-click in app.tsx
-  const page = await newE2EPage({
-    url: '/src/components/slides/test/prevent-default?ionic:_testing=false',
-  });
-
-  const screenshotCompares = [];
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  const scroller = await page.find('#scrollDownButton');
-  const button = await page.find('#changeBackgroundButton');
-  const contentWithBackground = await page.find('#contentWithBackground');
-
-  await page.waitForTimeout(500);
-
-  await scroller.click();
-  await page.waitForTimeout(500);
-
-  screenshotCompares.push(await page.compareScreenshot('scroll down button'));
-
-  await button.click();
-
-  screenshotCompares.push(await page.compareScreenshot('change background'));
-
-  expect(contentWithBackground).toHaveClasses(['blueBackground']);
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
diff --git a/core/src/components/slides/test/vertical/e2e.ts b/core/src/components/slides/test/vertical/e2e.ts
deleted file mode 100644
index d3c57a304a..0000000000
--- a/core/src/components/slides/test/vertical/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('slides: vertical', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/slides/test/vertical?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/toast/test/test.utils.ts b/core/src/components/toast/test/test.utils.ts
deleted file mode 100644
index 0de7e823f2..0000000000
--- a/core/src/components/toast/test/test.utils.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-import { generateE2EUrl } from '@utils/test';
-
-export const testToast = async (type: string, selector: string, rtl = false) => {
-  try {
-    const pageUrl = generateE2EUrl('toast', type, rtl);
-
-    const page = await newE2EPage({
-      url: pageUrl,
-    });
-
-    const screenshotCompares = [];
-
-    const button = await page.find(selector);
-    await button.waitForVisible();
-    await button.click();
-
-    await page.waitForTimeout(250);
-
-    let toast = await page.find('ion-toast');
-    await toast.waitForVisible();
-
-    expect(toast).not.toBe(null);
-    await toast.waitForVisible();
-
-    screenshotCompares.push(await page.compareScreenshot());
-
-    await toast.callMethod('dismiss');
-    await toast.waitForNotVisible();
-
-    screenshotCompares.push(await page.compareScreenshot('dismiss'));
-
-    toast = await page.find('ion-toast');
-    expect(toast).toBe(null);
-
-    for (const screenshotCompare of screenshotCompares) {
-      expect(screenshotCompare).toMatchScreenshot();
-    }
-  } catch (err) {
-    throw err;
-  }
-};
diff --git a/core/src/components/virtual-scroll/test/basic/e2e.ts b/core/src/components/virtual-scroll/test/basic/e2e.ts
deleted file mode 100644
index 183d21e21d..0000000000
--- a/core/src/components/virtual-scroll/test/basic/e2e.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('virtual-scroll: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/virtual-scroll/test/basic?ionic:_testing=true',
-  });
-  await page.waitForTimeout(300);
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/virtual-scroll/test/cards/e2e.ts b/core/src/components/virtual-scroll/test/cards/e2e.ts
deleted file mode 100644
index f9d4db52cb..0000000000
--- a/core/src/components/virtual-scroll/test/cards/e2e.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('virtual-scroll: cards', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/virtual-scroll/test/cards?ionic:_testing=true',
-  });
-  await page.waitForTimeout(300);
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/themes/test/css-variables/e2e.ts b/core/src/themes/test/css-variables/e2e.ts
deleted file mode 100644
index 4656b72a09..0000000000
--- a/core/src/themes/test/css-variables/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('themes: css-variables', async () => {
-  const page = await newE2EPage({
-    url: '/src/themes/test/css-variables?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/utils/animation/test/animationbuilder/animation.e2e.ts b/core/src/utils/animation/test/animationbuilder/animation.e2e.ts
new file mode 100644
index 0000000000..5e556d8c1d
--- /dev/null
+++ b/core/src/utils/animation/test/animationbuilder/animation.e2e.ts
@@ -0,0 +1,43 @@
+import type { E2EPage } from '@utils/test/playwright';
+import { test } from '@utils/test/playwright';
+
+test.describe('animation: animationbuilder', async () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+  });
+  test('backwards-compatibility animation', async ({ page }) => {
+    await page.goto('/src/utils/animation/test/animationbuilder');
+    await testNavigation(page);
+  });
+
+  test('ios-transition web', async ({ page, skip }) => {
+    skip.mode('md');
+
+    await page.goto('/src/utils/animation/test/animationbuilder');
+    await testNavigation(page);
+  });
+
+  test('ios-transition css', async ({ page, skip }) => {
+    skip.mode('md');
+
+    await page.goto('/src/utils/animation/test/animationbuilder?ionic:_forceCSSAnimations=true');
+    await testNavigation(page);
+  });
+});
+
+const testNavigation = async (page: E2EPage) => {
+  const ionRouteDidChange = await page.spyOnEvent('ionRouteDidChange');
+
+  await page.click('page-root ion-button.next');
+  await ionRouteDidChange.next();
+  page.click('page-one ion-button.next');
+  await ionRouteDidChange.next();
+  page.click('page-two ion-button.next');
+  await ionRouteDidChange.next();
+  page.click('page-three ion-back-button');
+  await ionRouteDidChange.next();
+  page.click('page-two ion-back-button');
+  await ionRouteDidChange.next();
+  page.click('page-one ion-back-button');
+  await ionRouteDidChange.next();
+};
diff --git a/core/src/utils/animation/test/animationbuilder/e2e.ts b/core/src/utils/animation/test/animationbuilder/e2e.ts
deleted file mode 100644
index d9a5769e7b..0000000000
--- a/core/src/utils/animation/test/animationbuilder/e2e.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { E2EPage } from '@stencil/core/testing';
-import { newE2EPage } from '@stencil/core/testing';
-
-test('animation:backwards-compatibility animation', async () => {
-  const page = await newE2EPage({ url: '/src/utils/animation/test/animationbuilder' });
-  await testNavigation(page);
-});
-
-test('animation:ios-transition web', async () => {
-  const page = await newE2EPage({ url: '/src/utils/animation/test/animationbuilder?ionic:mode=ios' });
-  await testNavigation(page);
-});
-
-test('animation:ios-transition css', async () => {
-  const page = await newE2EPage({
-    url: '/src/utils/animation/test/animationbuilder?ionic:mode=ios&ionic:_forceCSSAnimations=true',
-  });
-  await testNavigation(page);
-});
-
-const testNavigation = async (page: E2EPage) => {
-  const screenshotCompares = [];
-  const ionRouteDidChange = await page.spyOnEvent('ionRouteDidChange');
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  await page.click('page-root ion-button.next');
-  await ionRouteDidChange.next();
-  page.click('page-one ion-button.next');
-  await ionRouteDidChange.next();
-  page.click('page-two ion-button.next');
-  await ionRouteDidChange.next();
-  page.click('page-three ion-back-button');
-  await ionRouteDidChange.next();
-  page.click('page-two ion-back-button');
-  await ionRouteDidChange.next();
-  page.click('page-one ion-back-button');
-  await ionRouteDidChange.next();
-
-  screenshotCompares.push(await page.compareScreenshot('end navigation'));
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-};
diff --git a/core/src/utils/animation/test/basic/animation.e2e.ts b/core/src/utils/animation/test/basic/animation.e2e.ts
new file mode 100644
index 0000000000..41ae95b366
--- /dev/null
+++ b/core/src/utils/animation/test/basic/animation.e2e.ts
@@ -0,0 +1,27 @@
+import { test } from '@utils/test/playwright';
+import type { E2EPage } from '@utils/test/playwright';
+
+test.describe('animation: basic', async () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+    skip.mode('ios');
+  });
+
+  test(`should resolve using web animations`, async ({ page }) => {
+    await page.goto('/src/utils/animation/test/basic');
+    await testPage(page);
+  });
+
+  test(`should resolve using css animations`, async ({ page }) => {
+    await page.goto('/src/utils/animation/test/basic?ionic:_forceCSSAnimations=true');
+    await testPage(page);
+  });
+});
+
+const testPage = async (page: E2EPage) => {
+  const ionAnimationFinished = await page.spyOnEvent('ionAnimationFinished');
+
+  await page.click('.play');
+
+  await ionAnimationFinished.next();
+};
diff --git a/core/src/utils/animation/test/basic/e2e.ts b/core/src/utils/animation/test/basic/e2e.ts
deleted file mode 100644
index 8b86a8ef76..0000000000
--- a/core/src/utils/animation/test/basic/e2e.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-import { listenForEvent, waitForFunctionTestContext } from '../../../test/utils';
-
-test(`animation:web: basic`, async () => {
-  const page = await newE2EPage({ url: '/src/utils/animation/test/basic' });
-  const screenshotCompares = [];
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  const ANIMATION_FINISHED = 'onIonAnimationFinished';
-  const animationFinishedCount: any = { count: 0 };
-  await page.exposeFunction(ANIMATION_FINISHED, () => {
-    animationFinishedCount.count += 1;
-  });
-
-  const square = await page.$('.square-a');
-  await listenForEvent(page, 'ionAnimationFinished', square, ANIMATION_FINISHED);
-
-  await page.click('.play');
-  await page.waitForSelector('.play');
-
-  await waitForFunctionTestContext(
-    (payload: any) => {
-      return payload.animationFinishedCount.count === 1;
-    },
-    { animationFinishedCount }
-  );
-
-  screenshotCompares.push(await page.compareScreenshot('end animation'));
-});
-
-test(`animation:css: basic`, async () => {
-  const page = await newE2EPage({ url: '/src/utils/animation/test/basic?ionic:_forceCSSAnimations=true' });
-  const screenshotCompares = [];
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  const ANIMATION_FINISHED = 'onIonAnimationFinished';
-  const animationFinishedCount: any = { count: 0 };
-  await page.exposeFunction(ANIMATION_FINISHED, () => {
-    animationFinishedCount.count += 1;
-  });
-
-  const square = await page.$('.square-a');
-  await listenForEvent(page, 'ionAnimationFinished', square, ANIMATION_FINISHED);
-
-  await page.click('.play');
-  await page.waitForSelector('.play');
-
-  await waitForFunctionTestContext(
-    (payload: any) => {
-      return payload.animationFinishedCount.count === 1;
-    },
-    { animationFinishedCount }
-  );
-
-  screenshotCompares.push(await page.compareScreenshot('end animation'));
-});
diff --git a/core/src/utils/animation/test/basic/index.html b/core/src/utils/animation/test/basic/index.html
index f5c932c770..0d6d193962 100644
--- a/core/src/utils/animation/test/basic/index.html
+++ b/core/src/utils/animation/test/basic/index.html
@@ -37,7 +37,7 @@
         ])
         .onFinish(() => {
           const ev = new CustomEvent('ionAnimationFinished');
-          squareA.dispatchEvent(ev);
+          window.dispatchEvent(ev);
         });
 
       document.querySelector('.play').addEventListener('click', () => {
diff --git a/core/src/utils/animation/test/display/animation.e2e.ts b/core/src/utils/animation/test/display/animation.e2e.ts
new file mode 100644
index 0000000000..d5f2b1bd3b
--- /dev/null
+++ b/core/src/utils/animation/test/display/animation.e2e.ts
@@ -0,0 +1,37 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+import type { E2EPage } from '@utils/test/playwright';
+
+test.describe('animation: display', async () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+    skip.mode('ios');
+  });
+
+  test(`should resolve using web animations`, async ({ page }) => {
+    await page.goto('/src/utils/animation/test/display');
+    await testDisplay(page);
+  });
+
+  test(`should resolve using css animations`, async ({ page }) => {
+    await page.goto('/src/utils/animation/test/display?ionic:_forceCSSAnimations=true');
+    await testDisplay(page);
+  });
+});
+
+const testDisplay = async (page: E2EPage) => {
+  const ionAnimationFinished = await page.spyOnEvent('ionAnimationFinished');
+
+  await page.click('.play');
+
+  await ionAnimationFinished.next();
+  await expect(ionAnimationFinished).toHaveReceivedEventDetail('AnimationBFinished');
+
+  await ionAnimationFinished.next();
+  await expect(ionAnimationFinished).toHaveReceivedEventDetail('AnimationAFinished');
+
+  await ionAnimationFinished.next();
+  await expect(ionAnimationFinished).toHaveReceivedEventDetail('AnimationRootFinished');
+
+  await expect(ionAnimationFinished).toHaveReceivedEventTimes(3);
+};
diff --git a/core/src/utils/animation/test/display/e2e.ts b/core/src/utils/animation/test/display/e2e.ts
deleted file mode 100644
index d09c62b215..0000000000
--- a/core/src/utils/animation/test/display/e2e.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-import { listenForEvent, waitForFunctionTestContext } from '../../../test/utils';
-
-test(`animation:web: display`, async () => {
-  const page = await newE2EPage({ url: '/src/utils/animation/test/display' });
-  await runTest(page);
-});
-
-test(`animation:css: display`, async () => {
-  const page = await newE2EPage({ url: '/src/utils/animation/test/display?ionic:_forceCSSAnimations=true' });
-  await runTest(page);
-});
-
-const runTest = async (page: any) => {
-  const screenshotCompares = [];
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  const ANIMATION_FINISHED = 'onIonAnimationFinished';
-  const animationStatus = [];
-  await page.exposeFunction(ANIMATION_FINISHED, (ev: any) => {
-    animationStatus.push(ev.detail);
-  });
-
-  const squareA = await page.$('.square-a');
-  await listenForEvent(page, 'ionAnimationFinished', squareA, ANIMATION_FINISHED);
-
-  await page.click('.play');
-  await page.waitForSelector('.play');
-
-  await waitForFunctionTestContext(
-    (payload: any) => {
-      return (
-        payload.animationStatus.join(', ') ===
-        ['AnimationBFinished', 'AnimationAFinished', 'AnimationRootFinished'].join(', ')
-      );
-    },
-    { animationStatus }
-  );
-  screenshotCompares.push(await page.compareScreenshot('end animation'));
-};
diff --git a/core/src/utils/animation/test/display/index.html b/core/src/utils/animation/test/display/index.html
index 62fe38bc05..68bd0caac4 100644
--- a/core/src/utils/animation/test/display/index.html
+++ b/core/src/utils/animation/test/display/index.html
@@ -43,7 +43,7 @@
         ])
         .onFinish(() => {
           const ev = new CustomEvent('ionAnimationFinished', { detail: 'AnimationAFinished' });
-          squareA.dispatchEvent(ev);
+          window.dispatchEvent(ev);
         });
 
       animationB
@@ -58,12 +58,12 @@
         ])
         .onFinish(() => {
           const ev = new CustomEvent('ionAnimationFinished', { detail: 'AnimationBFinished' });
-          squareA.dispatchEvent(ev);
+          window.dispatchEvent(ev);
         });
 
       rootAnimation.addAnimation([animationA, animationB]).onFinish(() => {
         const ev = new CustomEvent('ionAnimationFinished', { detail: 'AnimationRootFinished' });
-        squareA.dispatchEvent(ev);
+        window.dispatchEvent(ev);
       });
 
       document.querySelector('.play').addEventListener('click', () => {
diff --git a/core/src/utils/animation/test/hooks/animation.e2e.ts b/core/src/utils/animation/test/hooks/animation.e2e.ts
new file mode 100644
index 0000000000..be714b04c0
--- /dev/null
+++ b/core/src/utils/animation/test/hooks/animation.e2e.ts
@@ -0,0 +1,63 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+import type { E2EPage } from '@utils/test/playwright';
+
+test.describe('animation: hooks', async () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+    skip.mode('ios');
+  });
+
+  test(`should fire hooks using web animations`, async ({ page }) => {
+    await page.goto('/src/utils/animation/test/hooks');
+    await testHooks(page);
+  });
+
+  test(`should fire hooks using css animations`, async ({ page }) => {
+    await page.goto('/src/utils/animation/test/hooks?ionic:_forceCSSAnimations=true');
+    await testHooks(page);
+  });
+});
+
+const testHooks = async (page: E2EPage) => {
+  const square = page.locator('.square-a');
+  const ionAnimationFinished = await page.spyOnEvent('ionAnimationFinished');
+  const beforeRead = await page.spyOnEvent('beforeRead');
+  const beforeWrite = await page.spyOnEvent('beforeWrite');
+  const afterRead = await page.spyOnEvent('afterRead');
+  const afterWrite = await page.spyOnEvent('afterWrite');
+
+  // Test initial classes
+  await expect(square).toHaveClass(/hello-world/);
+  await expect(square).not.toHaveClass(/test-class/);
+
+  // Test initial styles
+  await expect(square).toHaveCSS('padding-bottom', '20px');
+  await expect(square).toHaveCSS('color', 'rgb(0, 0, 0)');
+
+  await page.click('.play');
+
+  // Test beforeRemoveClass and beforeAddClass
+  await expect(square).not.toHaveClass(/hello-world/);
+  await expect(square).toHaveClass(/test-class/);
+
+  // Test beforeStyles and beforeClearStyles
+  await expect(square).toHaveCSS('padding-bottom', '0px');
+  await expect(square).toHaveCSS('color', 'rgb(128, 0, 128)');
+
+  await beforeRead.next();
+  await beforeWrite.next();
+
+  await ionAnimationFinished.next();
+
+  await afterRead.next();
+  await afterWrite.next();
+
+  // Test afterRemoveClass and afterAddClass
+  await expect(square).toHaveClass(/hello-world/);
+  await expect(square).not.toHaveClass(/test-class/);
+
+  // Test afterStyles and afterClearStyles
+  await expect(square).toHaveCSS('padding-bottom', '20px');
+  await expect(square).toHaveCSS('color', 'rgb(0, 0, 0)');
+};
diff --git a/core/src/utils/animation/test/hooks/e2e.ts b/core/src/utils/animation/test/hooks/e2e.ts
deleted file mode 100644
index d060b58f4f..0000000000
--- a/core/src/utils/animation/test/hooks/e2e.ts
+++ /dev/null
@@ -1,146 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-import { listenForEvent, waitForFunctionTestContext } from '../../../test/utils';
-
-test(`animation:web: hooks`, async () => {
-  const page = await newE2EPage({ url: '/src/utils/animation/test/hooks' });
-  const screenshotCompares = [];
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  const square = await page.$('.square-a');
-
-  const styles = await getStyles(page, '.square-a');
-  expect(styles.paddingBottom).toEqual('20px');
-  expect(styles.color).toEqual('rgb(0, 0, 0)');
-
-  const classList = await getClassList(square);
-  expect(classList.includes('hello-world')).toEqual(true);
-  expect(classList.includes('test-class')).toEqual(false);
-
-  await waitForEventToBeCalled('afterWrite', page, square, async () => {
-    await waitForEventToBeCalled('afterRead', page, square, async () => {
-      await waitForEventToBeCalled('ionAnimationFinished', page, square, async () => {
-        await waitForEventToBeCalled('beforeWrite', page, square, async () => {
-          await waitForEventToBeCalled('beforeRead', page, square, async () => {
-            await page.click('.play');
-            await page.waitForSelector('.play');
-
-            // Test beforeRemoveClass and beforeAddClass
-            const webClassListAgain = await getClassList(square);
-            expect(webClassListAgain.includes('hello-world')).toEqual(false);
-            expect(webClassListAgain.includes('test-class')).toEqual(true);
-
-            // Test beforeStyles and beforeClearStyles
-            const webStylesAgain = await getStyles(page, '.square-a');
-            expect(webStylesAgain.paddingBottom).toEqual('0px');
-            expect(webStylesAgain.color).toEqual('rgb(128, 0, 128)');
-          });
-        });
-      });
-    });
-  });
-
-  // Test afterRemoveClass and afterAddClass
-  const classListAgain = await getClassList(square);
-  expect(classListAgain.includes('hello-world')).toEqual(true);
-  expect(classListAgain.includes('test-class')).toEqual(false);
-
-  // Test afterStyles and afterClearStyles
-  const stylesAgain = await getStyles(page, '.square-a');
-  expect(stylesAgain.paddingBottom).toEqual('20px');
-  expect(stylesAgain.color).toEqual('rgb(0, 0, 0)');
-
-  screenshotCompares.push(await page.compareScreenshot('end animation'));
-});
-
-test(`animation:css: hooks`, async () => {
-  const page = await newE2EPage({ url: '/src/utils/animation/test/hooks?ionic:_forceCSSAnimations=true' });
-  const screenshotCompares = [];
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  const square = await page.$('.square-a');
-
-  const styles = await getStyles(page, '.square-a');
-  expect(styles.paddingBottom).toEqual('20px');
-  expect(styles.color).toEqual('rgb(0, 0, 0)');
-
-  const classList = await getClassList(square);
-  expect(classList.includes('hello-world')).toEqual(true);
-  expect(classList.includes('test-class')).toEqual(false);
-
-  await waitForEventToBeCalled('afterWrite', page, square, async () => {
-    await waitForEventToBeCalled('afterRead', page, square, async () => {
-      await waitForEventToBeCalled('ionAnimationFinished', page, square, async () => {
-        await waitForEventToBeCalled('beforeWrite', page, square, async () => {
-          await waitForEventToBeCalled('beforeRead', page, square, async () => {
-            await page.click('.play');
-            await page.waitForSelector('.play');
-
-            // Test beforeRemoveClass and beforeAddClass
-            const cssClassListAgain = await getClassList(square);
-            expect(cssClassListAgain.includes('hello-world')).toEqual(false);
-            expect(cssClassListAgain.includes('test-class')).toEqual(true);
-
-            // Test beforeStyles and beforeClearStyles
-            const cssStylesAgain = await getStyles(page, '.square-a');
-            expect(cssStylesAgain.paddingBottom).toEqual('0px');
-            expect(cssStylesAgain.color).toEqual('rgb(128, 0, 128)');
-          });
-        });
-      });
-    });
-  });
-
-  // Test afterRemoveClass and afterAddClass
-  const classListAgain = await getClassList(square);
-  expect(classListAgain.includes('hello-world')).toEqual(true);
-  expect(classListAgain.includes('test-class')).toEqual(false);
-
-  // Test afterStyles and afterClearStyles
-  const stylesAgain = await getStyles(page, '.square-a');
-  expect(stylesAgain.paddingBottom).toEqual('20px');
-  expect(stylesAgain.color).toEqual('rgb(0, 0, 0)');
-
-  screenshotCompares.push(await page.compareScreenshot('end animation'));
-});
-
-const waitForEventToBeCalled = async (eventName: string, page: any, el: HTMLElement, fn: any, num = 1) => {
-  const EVENT_FIRED = `on${eventName}`;
-  const eventFiredCount: any = { count: 0 };
-  await page.exposeFunction(EVENT_FIRED, () => {
-    eventFiredCount.count += 1;
-  });
-
-  await listenForEvent(page, eventName, el, EVENT_FIRED);
-
-  if (fn) {
-    await fn();
-  }
-
-  await waitForFunctionTestContext(
-    (payload: any) => {
-      return payload.eventFiredCount.count === payload.num;
-    },
-    { eventFiredCount, num }
-  );
-};
-
-const getStyles = async (page: any, selector: string) => {
-  return page.evaluate(
-    (payload: any) => {
-      const el = document.querySelector(payload.selector);
-
-      return JSON.parse(JSON.stringify(getComputedStyle(el)));
-    },
-    { selector }
-  );
-};
-
-const getClassList = async (el: HTMLElement) => {
-  const classListObject = await el.getProperty('classList');
-  const jsonValue = await classListObject.jsonValue();
-
-  return Object.values(jsonValue);
-};
diff --git a/core/src/utils/animation/test/hooks/index.html b/core/src/utils/animation/test/hooks/index.html
index ec3373fc2c..6d2eb4f887 100644
--- a/core/src/utils/animation/test/hooks/index.html
+++ b/core/src/utils/animation/test/hooks/index.html
@@ -34,19 +34,19 @@
         .beforeClearStyles(['padding-bottom'])
         .beforeAddRead(() => {
           const ev = new CustomEvent('beforeRead');
-          squareA.dispatchEvent(ev);
+          window.dispatchEvent(ev);
         })
         .beforeAddWrite(() => {
           const ev = new CustomEvent('beforeWrite');
-          squareA.dispatchEvent(ev);
+          window.dispatchEvent(ev);
         })
         .afterAddRead(() => {
           const ev = new CustomEvent('afterRead');
-          squareA.dispatchEvent(ev);
+          window.dispatchEvent(ev);
         })
         .afterAddWrite(() => {
           const ev = new CustomEvent('afterWrite');
-          squareA.dispatchEvent(ev);
+          window.dispatchEvent(ev);
         })
         .afterAddClass(['hello-world'])
         .afterRemoveClass(['test-class'])
@@ -60,7 +60,7 @@
         ])
         .onFinish(() => {
           const ev = new CustomEvent('ionAnimationFinished');
-          squareA.dispatchEvent(ev);
+          window.dispatchEvent(ev);
         });
 
       document.querySelector('.play').addEventListener('click', () => {
diff --git a/core/src/utils/animation/test/multiple/animation.e2e.ts b/core/src/utils/animation/test/multiple/animation.e2e.ts
new file mode 100644
index 0000000000..957d0ebc07
--- /dev/null
+++ b/core/src/utils/animation/test/multiple/animation.e2e.ts
@@ -0,0 +1,46 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+import type { E2EPage } from '@utils/test/playwright';
+
+test.describe('animation: multiple', async () => {
+  test.beforeEach(({ skip }) => {
+    skip.rtl();
+    skip.mode('ios');
+  });
+
+  test(`should resolve grouped animations using web animations`, async ({ page }) => {
+    await page.goto('/src/utils/animation/test/multiple');
+    await testMultiple(page);
+  });
+
+  test(`should resolve grouped animations using css animations`, async ({ page }) => {
+    await page.goto('/src/utils/animation/test/multiple?ionic:_forceCSSAnimations=true');
+    await testMultiple(page);
+  });
+});
+
+const testMultiple = async (page: E2EPage) => {
+  const ionAnimationFinished = await page.spyOnEvent('ionAnimationFinished');
+
+  await page.click('.play');
+
+  await ionAnimationFinished.next();
+  await expect(ionAnimationFinished).toHaveReceivedEventDetail('AnimationCSubBFinished');
+
+  await ionAnimationFinished.next();
+  await expect(ionAnimationFinished).toHaveReceivedEventDetail('AnimationBFinished');
+
+  await ionAnimationFinished.next();
+  await expect(ionAnimationFinished).toHaveReceivedEventDetail('AnimationCSubAFinished');
+
+  await ionAnimationFinished.next();
+  await expect(ionAnimationFinished).toHaveReceivedEventDetail('AnimationCFinished');
+
+  await ionAnimationFinished.next();
+  await expect(ionAnimationFinished).toHaveReceivedEventDetail('AnimationAFinished');
+
+  await ionAnimationFinished.next();
+  await expect(ionAnimationFinished).toHaveReceivedEventDetail('AnimationRootFinished');
+
+  await expect(ionAnimationFinished).toHaveReceivedEventTimes(6);
+};
diff --git a/core/src/utils/animation/test/multiple/e2e.ts b/core/src/utils/animation/test/multiple/e2e.ts
deleted file mode 100644
index 8cc905111f..0000000000
--- a/core/src/utils/animation/test/multiple/e2e.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-import { listenForEvent, waitForFunctionTestContext } from '../../../test/utils';
-
-test(`animation:web: multiple`, async () => {
-  const page = await newE2EPage({ url: '/src/utils/animation/test/multiple' });
-  const screenshotCompares = [];
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  const ANIMATION_FINISHED = 'onIonAnimationFinished';
-  const animationStatus = [];
-  await page.exposeFunction(ANIMATION_FINISHED, (ev: any) => {
-    animationStatus.push(ev.detail);
-  });
-
-  const squareA = await page.$('.square-a');
-  await listenForEvent(page, 'ionAnimationFinished', squareA, ANIMATION_FINISHED);
-
-  await page.click('.play');
-  await page.waitForSelector('.play');
-
-  await waitForFunctionTestContext(
-    (payload: any) => {
-      return (
-        payload.animationStatus.join(', ') ===
-        [
-          'AnimationCSubBFinished',
-          'AnimationBFinished',
-          'AnimationCSubAFinished',
-          'AnimationCFinished',
-          'AnimationAFinished',
-          'AnimationRootFinished',
-        ].join(', ')
-      );
-    },
-    { animationStatus }
-  );
-  screenshotCompares.push(await page.compareScreenshot('end animation'));
-});
-
-test(`animation:css: multiple`, async () => {
-  const page = await newE2EPage({ url: '/src/utils/animation/test/multiple?ionic:_forceCSSAnimations=true' });
-  const screenshotCompares = [];
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  const ANIMATION_FINISHED = 'onIonAnimationFinished';
-  const animationStatus = [];
-  await page.exposeFunction(ANIMATION_FINISHED, (ev: any) => {
-    animationStatus.push(ev.detail);
-  });
-
-  const squareA = await page.$('.square-a');
-  await listenForEvent(page, 'ionAnimationFinished', squareA, ANIMATION_FINISHED);
-
-  await page.click('.play');
-  await page.waitForSelector('.play');
-
-  await waitForFunctionTestContext(
-    (payload: any) => {
-      return (
-        payload.animationStatus.join(', ') ===
-        [
-          'AnimationCSubBFinished',
-          'AnimationBFinished',
-          'AnimationCSubAFinished',
-          'AnimationCFinished',
-          'AnimationAFinished',
-          'AnimationRootFinished',
-        ].join(', ')
-      );
-    },
-    { animationStatus }
-  );
-  screenshotCompares.push(await page.compareScreenshot('end animation'));
-});
diff --git a/core/src/utils/animation/test/multiple/index.html b/core/src/utils/animation/test/multiple/index.html
index 497a1dd16b..696e8c3f9a 100644
--- a/core/src/utils/animation/test/multiple/index.html
+++ b/core/src/utils/animation/test/multiple/index.html
@@ -56,7 +56,7 @@
         })
         .onFinish(() => {
           const ev = new CustomEvent('ionAnimationFinished', { detail: 'AnimationAFinished' });
-          squareA.dispatchEvent(ev);
+          window.dispatchEvent(ev);
         });
 
       animationB
@@ -78,7 +78,7 @@
         })
         .onFinish(() => {
           const ev = new CustomEvent('ionAnimationFinished', { detail: 'AnimationBFinished' });
-          squareA.dispatchEvent(ev);
+          window.dispatchEvent(ev);
         });
 
       animationC
@@ -100,7 +100,7 @@
         })
         .onFinish(() => {
           const ev = new CustomEvent('ionAnimationFinished', { detail: 'AnimationCFinished' });
-          squareA.dispatchEvent(ev);
+          window.dispatchEvent(ev);
         });
 
       animationCSubA
@@ -110,12 +110,12 @@
         .fromTo('color', 'red', 'blue')
         .onFinish(() => {
           const ev = new CustomEvent('ionAnimationFinished', { detail: 'AnimationCSubAFinished' });
-          squareA.dispatchEvent(ev);
+          window.dispatchEvent(ev);
         });
 
       animationCSubB.addElement(squareCSubText).onFinish(() => {
         const ev = new CustomEvent('ionAnimationFinished', { detail: 'AnimationCSubBFinished' });
-        squareA.dispatchEvent(ev);
+        window.dispatchEvent(ev);
       });
 
       animationC.addAnimation([animationCSubA, animationCSubB]);
@@ -125,7 +125,7 @@
         .fill('none')
         .onFinish(() => {
           const ev = new CustomEvent('ionAnimationFinished', { detail: 'AnimationRootFinished' });
-          squareA.dispatchEvent(ev);
+          window.dispatchEvent(ev);
         });
 
       document.querySelector('.play').addEventListener('click', () => {
diff --git a/core/src/utils/gesture/test/e2e.ts b/core/src/utils/gesture/test/e2e.ts
deleted file mode 100644
index 445c1ace37..0000000000
--- a/core/src/utils/gesture/test/e2e.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-import { dragElementBy } from '@utils/test';
-
-test('swipe to go back should complete', async () => {
-  const page = await newE2EPage({ url: '/src/utils/gesture/test?ionic:mode=ios' });
-
-  const nav = await page.find('ion-nav');
-  const ionNavDidChange = await nav.spyOnEvent('ionNavDidChange');
-
-  await page.click('.next');
-  await ionNavDidChange.next();
-
-  const content = await page.$('.page-two-content');
-
-  const width = await page.evaluate(() => window.innerWidth);
-  await dragElementBy(content, page, width, 0, { x: 25, y: 100 });
-
-  await ionNavDidChange.next();
-});
-
-test('swipe to go back should complete in rtl', async () => {
-  const page = await newE2EPage({ url: '/src/utils/gesture/test?rtl=true&ionic:mode=ios' });
-
-  const nav = await page.find('ion-nav');
-  const ionNavDidChange = await nav.spyOnEvent('ionNavDidChange');
-
-  await page.click('.next');
-  await ionNavDidChange.next();
-
-  const width = await page.evaluate(() => window.innerWidth);
-
-  const content = await page.$('.page-two-content');
-  await dragElementBy(content, page, -width, 0, { x: width - 25, y: 100 });
-
-  await ionNavDidChange.next();
-});
diff --git a/core/src/utils/test/framework-delegate/e2e.ts b/core/src/utils/test/framework-delegate/e2e.ts
deleted file mode 100644
index e7fd72eb8a..0000000000
--- a/core/src/utils/test/framework-delegate/e2e.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('framework-delegate: should present modal already at ion-app root', async () => {
-  const page = await newE2EPage({ url: '/src/utils/test/framework-delegate?ionic:_testing=true' });
-
-  const button = await page.find('#button-inline-root');
-  await button.click();
-
-  const modal = await page.find('#inline-root');
-  expect(modal).not.toBe(null);
-  await modal.waitForVisible();
-});
-
-test('framework-delegate: should present modal in content', async () => {
-  const page = await newE2EPage({ url: '/src/utils/test/framework-delegate?ionic:_testing=true' });
-
-  const button = await page.find('#button-inline-content');
-  await button.click();
-
-  const modal = await page.find('#inline-content');
-  expect(modal).not.toBe(null);
-  await modal.waitForVisible();
-});
-
-test('framework-delegate: should present modal via controller', async () => {
-  const page = await newE2EPage({ url: '/src/utils/test/framework-delegate?ionic:_testing=true' });
-
-  const button = await page.find('#button-controller');
-  await button.click();
-
-  const modal = await page.find('#controller');
-  expect(modal).not.toBe(null);
-  await modal.waitForVisible();
-});
diff --git a/core/src/utils/test/framework-delegate/framework-delegate.e2e.ts b/core/src/utils/test/framework-delegate/framework-delegate.e2e.ts
new file mode 100644
index 0000000000..435f7246d0
--- /dev/null
+++ b/core/src/utils/test/framework-delegate/framework-delegate.e2e.ts
@@ -0,0 +1,40 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('framework-delegate', () => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.rtl();
+    skip.mode('ios');
+
+    await page.goto('/src/utils/test/framework-delegate');
+  });
+  test('should present modal already at ion-app root', async ({ page }) => {
+    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+    await page.click('#button-inline-root');
+
+    const modal = page.locator('#inline-root');
+    await ionModalDidPresent.next();
+    await expect(modal).toBeVisible();
+  });
+
+  test('should present modal in content', async ({ page }) => {
+    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+    await page.click('#button-inline-content');
+
+    const modal = page.locator('#inline-content');
+    await ionModalDidPresent.next();
+    await expect(modal).toBeVisible();
+  });
+
+  test('should present modal via controller', async ({ page }) => {
+    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+    await page.click('#button-controller');
+
+    const modal = page.locator('#controller');
+    await ionModalDidPresent.next();
+    await expect(modal).toBeVisible();
+  });
+});
diff --git a/core/src/utils/test/framework-delegate/index.html b/core/src/utils/test/framework-delegate/index.html
index 4105bd46e9..d893bd1968 100644
--- a/core/src/utils/test/framework-delegate/index.html
+++ b/core/src/utils/test/framework-delegate/index.html
@@ -9,6 +9,7 @@
     />
     <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
     <script type="module">
       import { modalController, createAnimation } from '../../../../../dist/ionic/index.esm.js';
diff --git a/core/src/utils/test/modes/e2e.ts b/core/src/utils/test/modes/e2e.ts
deleted file mode 100644
index d814245e52..0000000000
--- a/core/src/utils/test/modes/e2e.ts
+++ /dev/null
@@ -1,169 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-import { checkComponentModeClasses, checkModeClasses } from '../utils';
-
-// This test is to loop through all components that should have
-// specific classes added and test them
-test('component: modes', async () => {
-  const page = await newE2EPage({
-    url: '/src/utils/test/modes?ionic:_testing=true',
-  });
-
-  // First test: .button class
-  // ----------------------------------------------------------------
-  // components that need to have the `button` class
-  // for use in styling by other components (`ion-buttons`)
-  // e.g. <ion-back-button class="button">
-  let tags = ['ion-button', 'ion-back-button', 'ion-menu-button'];
-
-  for (const tag of tags) {
-    const el = await page.find(tag);
-    expect(el).toHaveClass('button');
-  }
-
-  // Second test: .item class
-  // ----------------------------------------------------------------
-  // components that need to have the `item` class
-  // for use in styling by other components
-  // e.g. <ion-item-divider class="item">
-  tags = ['ion-item', 'ion-item-divider', 'ion-item-group'];
-
-  for (const tag of tags) {
-    const el = await page.find(tag);
-    expect(el).toHaveClass('item');
-  }
-
-  // Third test: .{component}-{mode} class
-  // ----------------------------------------------------------------
-  // components that need to have their tag name
-  // + mode as a class for internal styling
-  // e.g. <ion-card-content class="card-content-md">
-  tags = [
-    'ion-card-content',
-    'ion-footer',
-    'ion-header',
-    'ion-infinite-scroll-content',
-    'ion-item-group',
-    'ion-item-options',
-    'ion-list',
-    'ion-picker',
-    'ion-refresher',
-    'ion-slides',
-    'ion-split-pane',
-  ];
-
-  const globalMode = await page.evaluate(() => document.documentElement.getAttribute('mode'));
-  for (const tag of tags) {
-    const el = await page.find(tag);
-    await checkComponentModeClasses(el, globalMode!);
-  }
-
-  // Fourth test: .{mode} class
-  // ----------------------------------------------------------------
-  // components that need to have the mode class
-  // added for external / user styling
-  // e.g. <ion-badge class="md">
-  tags = [
-    'ion-action-sheet',
-    'ion-alert',
-    'ion-app',
-    'ion-avatar',
-    'ion-back-button',
-    'ion-backdrop',
-    'ion-badge',
-    'ion-button',
-    'ion-buttons',
-    'ion-card-content',
-    'ion-card-header',
-    'ion-card-subtitle',
-    'ion-card-title',
-    'ion-card',
-    'ion-checkbox',
-    'ion-chip',
-    'ion-col',
-    'ion-content',
-    'ion-datetime',
-    'ion-fab',
-    'ion-fab-button',
-    'ion-fab-list',
-    'ion-footer',
-    'ion-grid',
-    'ion-header',
-    'ion-icon',
-    'ion-img',
-    'ion-infinite-scroll',
-    'ion-infinite-scroll-content',
-    'ion-input',
-    'ion-item',
-    'ion-item-divider',
-    'ion-item-group',
-    'ion-item-option',
-    'ion-item-options',
-    'ion-item-sliding',
-    'ion-label',
-    'ion-list',
-    'ion-list-header',
-    'ion-loading',
-    'ion-modal',
-    'ion-menu',
-    'ion-menu-button',
-    'ion-menu-toggle',
-    'ion-note',
-    'ion-picker',
-    'ion-picker-column',
-    'ion-popover',
-    'ion-progress-bar',
-    'ion-radio',
-    'ion-radio-group',
-    'ion-range',
-    'ion-refresher',
-    'ion-refresher-content',
-    'ion-reorder',
-    'ion-reorder-group',
-    'ion-ripple-effect',
-    'ion-router-link',
-    'ion-row',
-    'ion-searchbar',
-    'ion-segment',
-    'ion-segment-button',
-    'ion-select',
-    'ion-select-option',
-    'ion-select-popover',
-    'ion-skeleton-text',
-    'ion-slide',
-    'ion-slides',
-    'ion-spinner',
-    'ion-split-pane',
-    'ion-tab-bar',
-    'ion-tab-button',
-    'ion-text',
-    'ion-textarea',
-    'ion-thumbnail',
-    'ion-title',
-    'ion-toast',
-    'ion-toggle',
-    'ion-toolbar',
-  ];
-
-  for (const tag of tags) {
-    await page.waitForSelector(tag);
-    const el = await page.find(tag);
-    await checkModeClasses(el, globalMode!);
-  }
-
-  // Fifth test: {mode} attribute on non-ionic ancestor element
-  // ----------------------------------------------------------------
-  // non-ionic ancestor components with a mode attribute
-  // e.g. <p mode="foo">
-  const ancestorTags = ['p[mode]'];
-  const childTag = 'ion-label';
-
-  for (const tag of ancestorTags) {
-    await page.waitForSelector(tag);
-    const ancestor = await page.find(tag);
-    const mode = ancestor.getAttribute('mode');
-    const expectedMode = ['ios', 'md'].includes(mode) ? mode : globalMode!;
-    const el = await ancestor.find(childTag);
-    await checkModeClasses(el, expectedMode);
-  }
-});
diff --git a/core/src/utils/test/modes/index.html b/core/src/utils/test/modes/index.html
deleted file mode 100644
index 6139084cf0..0000000000
--- a/core/src/utils/test/modes/index.html
+++ /dev/null
@@ -1,191 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Components - Modes</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body onLoad="load()">
-    <ion-app>
-      <ion-split-pane content-id="main">
-        <ion-menu content-id="main"> </ion-menu>
-
-        <div class="ion-page" id="main">
-          <ion-header>
-            <ion-toolbar>
-              <ion-title>Components: Modes</ion-title>
-              <ion-buttons slot="start">
-                <ion-back-button></ion-back-button>
-                <ion-button></ion-button>
-              </ion-buttons>
-            </ion-toolbar>
-          </ion-header>
-
-          <ion-content>
-            <ion-action-sheet></ion-action-sheet>
-            <ion-alert></ion-alert>
-            <ion-avatar></ion-avatar>
-            <ion-backdrop></ion-backdrop>
-            <ion-badge></ion-badge>
-            <ion-button></ion-button>
-            <ion-card>
-              <ion-card-header>
-                <ion-card-subtitle></ion-card-subtitle>
-                <ion-card-title></ion-card-title>
-              </ion-card-header>
-              <ion-card-content></ion-card-content>
-            </ion-card>
-
-            <ion-checkbox></ion-checkbox>
-            <ion-chip></ion-chip>
-            <ion-col></ion-col>
-            <ion-datetime></ion-datetime>
-            <ion-fab-button></ion-fab-button>
-            <ion-fab-list></ion-fab-list>
-            <ion-fab></ion-fab>
-            <ion-footer></ion-footer>
-            <ion-grid></ion-grid>
-            <ion-icon name="star"></ion-icon>
-            <ion-img></ion-img>
-            <ion-infinite-scroll></ion-infinite-scroll>
-            <ion-infinite-scroll-content></ion-infinite-scroll-content>
-            <ion-input></ion-input>
-            <ion-item-divider></ion-item-divider>
-            <ion-item-group></ion-item-group>
-            <ion-item-option></ion-item-option>
-            <ion-item-options></ion-item-options>
-            <ion-item-sliding></ion-item-sliding>
-            <ion-item></ion-item>
-            <ion-label></ion-label>
-            <ion-list></ion-list>
-            <ion-list-header></ion-list-header>
-            <ion-loading></ion-loading>
-            <ion-menu-button></ion-menu-button>
-            <ion-menu-toggle></ion-menu-toggle>
-            <ion-modal></ion-modal>
-            <ion-note></ion-note>
-            <ion-picker></ion-picker>
-            <ion-popover></ion-popover>
-            <ion-progress-bar></ion-progress-bar>
-            <ion-radio-group></ion-radio-group>
-            <ion-radio></ion-radio>
-            <ion-range></ion-range>
-            <ion-refresher></ion-refresher>
-            <ion-refresher-content></ion-refresher-content>
-            <ion-reorder-group></ion-reorder-group>
-            <ion-reorder></ion-reorder>
-            <ion-ripple-effect></ion-ripple-effect>
-            <ion-router-link></ion-router-link>
-            <ion-row></ion-row>
-            <ion-searchbar></ion-searchbar>
-            <ion-segment-button></ion-segment-button>
-            <ion-segment></ion-segment>
-            <ion-select-option></ion-select-option>
-            <ion-select-popover></ion-select-popover>
-            <ion-select></ion-select>
-            <ion-skeleton-text></ion-skeleton-text>
-            <ion-slide></ion-slide>
-            <ion-slides></ion-slides>
-            <ion-spinner></ion-spinner>
-            <ion-tab-bar></ion-tab-bar>
-            <ion-tab-button></ion-tab-button>
-            <ion-text></ion-text>
-            <ion-textarea></ion-textarea>
-            <ion-thumbnail></ion-thumbnail>
-            <ion-title></ion-title>
-            <ion-toast></ion-toast>
-            <ion-toggle></ion-toggle>
-            <ion-toolbar></ion-toolbar>
-            <p mode="ios">
-              <ion-label></ion-label>
-            </p>
-            <p mode="md">
-              <ion-label></ion-label>
-            </p>
-            <p mode="foo">
-              <ion-label></ion-label>
-            </p>
-          </ion-content>
-        </div>
-      </ion-split-pane>
-    </ion-app>
-
-    <script>
-      async function load() {
-        const actionSheet = document.querySelector('ion-action-sheet');
-
-        actionSheet.buttons = [
-          {
-            text: 'Delete',
-            role: 'destructive',
-            icon: 'trash',
-            handler: () => {
-              console.log('Delete clicked');
-            },
-          },
-          {
-            text: 'Share',
-            icon: 'share',
-            handler: () => {
-              console.log('Share clicked');
-            },
-          },
-          {
-            text: 'Cancel',
-            icon: 'close',
-            role: 'cancel',
-            handler: () => {
-              console.log('Cancel clicked');
-            },
-          },
-        ];
-
-        await actionSheet.present();
-
-        const picker = document.querySelector('ion-picker');
-        if (picker.componentOnReady) {
-          await picker.componentOnReady();
-        }
-
-        picker.buttons = [{ text: 'Cancel', role: 'cancel' }, { text: 'Done' }];
-
-        picker.columns = [
-          {
-            name: 'month',
-            align: 'left',
-            selectedIndex: 0,
-            options: [
-              {
-                text: 'June',
-                value: 0,
-              },
-              {
-                text: 'July',
-                value: 1,
-              },
-            ],
-            prevSelected: 0,
-            selectedIndex: 0,
-            optionsWidth: '68px',
-            columnWidth: '200px',
-            prefixWidth: '100px',
-            suffixWidth: '100px',
-            prefix: undefined,
-            suffix: undefined,
-          },
-        ];
-
-        await picker.present();
-      }
-    </script>
-  </body>
-</html>
diff --git a/core/src/utils/test/overlays/e2e.ts b/core/src/utils/test/overlays/e2e.ts
deleted file mode 100644
index 20d62d9b17..0000000000
--- a/core/src/utils/test/overlays/e2e.ts
+++ /dev/null
@@ -1,178 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-import { getActiveElementParent } from '../utils';
-
-test('overlays: hardware back button: should dismiss a presented overlay', async () => {
-  const page = await newE2EPage({ url: '/src/utils/test/overlays?ionic:_testing=true' });
-
-  const createAndPresentButton = await page.find('#create-and-present');
-
-  const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-  const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-
-  await createAndPresentButton.click();
-  const modal = await page.find('ion-modal');
-  expect(modal).not.toBe(null);
-
-  await ionModalDidPresent.next();
-
-  const simulateButton = await modal.find('#modal-simulate');
-  expect(simulateButton).not.toBe(null);
-
-  await simulateButton.click();
-
-  await ionModalDidDismiss.next();
-
-  await page.waitForSelector('ion-modal', { hidden: true });
-});
-
-test('overlays: hardware back button: should dismiss the presented overlay, even though another hidden modal was added last', async () => {
-  const page = await newE2EPage({ url: '/src/utils/test/overlays?ionic:_testing=true' });
-
-  const createAndPresentButton = await page.find('#create-and-present');
-
-  const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-  await createAndPresentButton.click();
-  const modal = await page.find('ion-modal');
-  expect(modal).not.toBe(null);
-
-  await ionModalDidPresent.next();
-
-  const createButton = await page.find('#modal-create');
-  await createButton.click();
-
-  const modals = await page.$$('ion-modal');
-  expect(modals.length).toEqual(2);
-
-  expect(await modals[0].evaluate((node) => node.classList.contains('overlay-hidden'))).toEqual(false);
-  expect(await modals[1].evaluate((node) => node.classList.contains('overlay-hidden'))).toEqual(true);
-
-  const simulateButton = await modal.find('#modal-simulate');
-  expect(simulateButton).not.toBe(null);
-
-  await simulateButton.click();
-
-  expect(await modals[0].evaluate((node) => node.classList.contains('overlay-hidden'))).toEqual(true);
-  expect(await modals[1].evaluate((node) => node.classList.contains('overlay-hidden'))).toEqual(true);
-});
-
-test('overlays: Esc: should dismiss a presented overlay', async () => {
-  const page = await newE2EPage({ url: '/src/utils/test/overlays?ionic:_testing=true' });
-
-  const createAndPresentButton = await page.find('#create-and-present');
-
-  const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-  const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-
-  await createAndPresentButton.click();
-  const modal = await page.find('ion-modal');
-  expect(modal).not.toBe(null);
-
-  await ionModalDidPresent.next();
-
-  await page.keyboard.press('Escape');
-
-  await ionModalDidDismiss.next();
-
-  await page.waitForSelector('ion-modal', { hidden: true });
-});
-
-test('overlays: Esc: should dismiss the presented overlay, even though another hidden modal was added last', async () => {
-  const page = await newE2EPage({ url: '/src/utils/test/overlays?ionic:_testing=true' });
-
-  const createAndPresentButton = await page.find('#create-and-present');
-
-  const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-  await createAndPresentButton.click();
-  const modal = await page.find('ion-modal');
-  expect(modal).not.toBe(null);
-
-  await ionModalDidPresent.next();
-
-  const createButton = await page.find('#modal-create');
-  await createButton.click();
-
-  const modals = await page.$$('ion-modal');
-  expect(modals.length).toEqual(2);
-
-  await page.keyboard.press('Escape');
-
-  await page.waitForSelector('ion-modal#ion-overlay-1', { hidden: true });
-});
-
-test('overlays: Nested: should dismiss the top overlay', async () => {
-  const page = await newE2EPage({ url: '/src/utils/test/overlays?ionic:_testing=true' });
-
-  const createNestedButton = await page.find('#create-nested');
-  const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-  await createNestedButton.click();
-
-  await ionModalDidPresent.next();
-
-  const modal = await page.find('ion-modal');
-  expect(modal).not.toBe(null);
-
-  const dismissNestedOverlayButton = await page.find('#dismiss-modal-nested-overlay');
-  const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-
-  await dismissNestedOverlayButton.click();
-
-  await ionModalDidDismiss.next();
-
-  const modals = await page.$$('ion-modal');
-  expect(modals.length).toEqual(0);
-});
-
-test('toast should not cause focus trapping', async () => {
-  const page = await newE2EPage({ url: '/src/utils/test/overlays?ionic:_testing=true' });
-  const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
-
-  await page.click('#create-and-present-toast');
-  await ionToastDidPresent.next();
-
-  await page.click('#root-input');
-
-  const parentEl = await getActiveElementParent(page);
-  expect(parentEl.id).toEqual('root-input');
-});
-
-test('toast should not cause focus trapping even when opened from a focus trapping overlay', async () => {
-  const page = await newE2EPage({ url: '/src/utils/test/overlays?ionic:_testing=true' });
-  const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
-  const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-  await page.click('#create-and-present');
-  await ionModalDidPresent.next();
-
-  await page.click('#modal-toast');
-  await ionToastDidPresent.next();
-
-  await page.click('.modal-input');
-
-  const parentEl = await getActiveElementParent(page);
-  expect(parentEl.className).toContain('modal-input-0');
-});
-
-test('focus trapping should only run on the top-most overlay', async () => {
-  const page = await newE2EPage({ url: '/src/utils/test/overlays?ionic:_testing=true' });
-  const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-  await page.click('#create-and-present');
-  await ionModalDidPresent.next();
-
-  await page.click('.modal-0 .modal-input');
-
-  const parentEl = await getActiveElementParent(page);
-  expect(parentEl.className).toContain('modal-input-0');
-
-  await page.click('#modal-create-and-present');
-  await ionModalDidPresent.next();
-
-  await page.click('.modal-1 .modal-input');
-
-  const parentElAgain = await getActiveElementParent(page);
-  expect(parentElAgain.className).toContain('modal-input-1');
-});
diff --git a/core/src/utils/test/overlays/index.html b/core/src/utils/test/overlays/index.html
index 16b0d87642..00885bd555 100644
--- a/core/src/utils/test/overlays/index.html
+++ b/core/src/utils/test/overlays/index.html
@@ -9,6 +9,7 @@
     />
     <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
     <script type="module">
       import { modalController, toastController, createAnimation } from '../../../../../dist/ionic/index.esm.js';
diff --git a/core/src/utils/test/overlays/overlays.e2e.ts b/core/src/utils/test/overlays/overlays.e2e.ts
index 8a4773709c..5c18b933ba 100644
--- a/core/src/utils/test/overlays/overlays.e2e.ts
+++ b/core/src/utils/test/overlays/overlays.e2e.ts
@@ -1,6 +1,109 @@
 import { expect } from '@playwright/test';
 import { test } from '@utils/test/playwright';
 
+test.describe('overlays: dismiss', () => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.rtl();
+
+    await page.goto('/src/utils/test/overlays');
+  });
+  test('hardware back button: should dismiss a presented overlay', async ({ page }) => {
+    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+    const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+    await page.click('#create-and-present');
+
+    await ionModalDidPresent.next();
+
+    await page.click('#modal-simulate');
+
+    await ionModalDidDismiss.next();
+  });
+
+  test('hardware back button: should dismiss the presented overlay, even though another hidden modal was added last', async ({
+    page,
+  }) => {
+    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+    const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+    await page.click('#create-and-present');
+
+    await ionModalDidPresent.next();
+
+    await page.click('#modal-create');
+
+    const modals = page.locator('ion-modal');
+    await expect(await modals.count()).toEqual(2);
+
+    await expect(await modals.nth(0)).not.toHaveClass(/overlay-hidden/);
+    await expect(await modals.nth(1)).toHaveClass(/overlay-hidden/);
+
+    await page.click('#modal-simulate');
+
+    await ionModalDidDismiss.next();
+
+    await expect(await modals.count()).toEqual(1);
+    await expect(await modals.nth(0)).toHaveClass(/overlay-hidden/);
+  });
+
+  test('Esc: should dismiss a presented overlay', async ({ page }) => {
+    const createAndPresentButton = page.locator('#create-and-present');
+
+    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+    const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+    await createAndPresentButton.click();
+
+    await ionModalDidPresent.next();
+
+    await page.keyboard.press('Escape');
+
+    await ionModalDidDismiss.next();
+  });
+
+  test('Esc: should dismiss the presented overlay, even though another hidden modal was added last', async ({
+    page,
+  }) => {
+    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+    const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+    await page.click('#create-and-present');
+
+    await ionModalDidPresent.next();
+
+    await page.click('#modal-create');
+
+    const modals = page.locator('ion-modal');
+    await expect(await modals.count()).toEqual(2);
+
+    await expect(await modals.nth(0)).not.toHaveClass(/overlay-hidden/);
+    await expect(await modals.nth(1)).toHaveClass(/overlay-hidden/);
+
+    await page.keyboard.press('Escape');
+
+    await ionModalDidDismiss.next();
+
+    await expect(await modals.count()).toEqual(1);
+    await expect(await modals.nth(0)).toHaveClass(/overlay-hidden/);
+  });
+
+  test('overlays: Nested: should dismiss the top overlay', async ({ page }) => {
+    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+    const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+    await page.click('#create-nested');
+
+    await ionModalDidPresent.next();
+
+    await page.click('#dismiss-modal-nested-overlay');
+
+    await ionModalDidDismiss.next();
+
+    const modals = page.locator('ion-modal');
+    expect(await modals.count()).toEqual(0);
+  });
+});
+
 test.describe('overlays: focus', () => {
   test.beforeEach(({ skip }) => {
     skip.rtl();
@@ -116,4 +219,57 @@ test.describe('overlays: focus', () => {
     await page.keyboard.press(tabKey);
     await expect(disabledFalseButton).toBeFocused();
   });
+
+  test('toast should not cause focus trapping', async ({ page }) => {
+    await page.goto('/src/utils/test/overlays');
+    const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+
+    await page.click('#create-and-present-toast');
+    await ionToastDidPresent.next();
+
+    const input = page.locator('#root-input input');
+    await input.click();
+
+    await expect(input).toBeFocused();
+  });
+
+  test('toast should not cause focus trapping even when opened from a focus trapping overlay', async ({ page }) => {
+    await page.goto('/src/utils/test/overlays');
+
+    const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+    await page.click('#create-and-present');
+    await ionModalDidPresent.next();
+
+    await page.click('#modal-toast');
+    await ionToastDidPresent.next();
+
+    const modalInput = page.locator('.modal-input input');
+    await modalInput.click();
+
+    await expect(modalInput).toBeFocused();
+  });
+
+  test('focus trapping should only run on the top-most overlay', async ({ page }) => {
+    await page.goto('/src/utils/test/overlays');
+
+    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+    await page.click('#create-and-present');
+    await ionModalDidPresent.next();
+
+    const modalInputZero = page.locator('.modal-0 .modal-input input');
+    await modalInputZero.click();
+
+    await expect(modalInputZero).toBeFocused();
+
+    await page.click('#modal-create-and-present');
+    await ionModalDidPresent.next();
+
+    const modalInputOne = page.locator('.modal-1 .modal-input input');
+    await modalInputOne.click();
+
+    await expect(modalInputOne).toBeFocused();
+  });
 });
diff --git a/core/src/utils/test/utils.ts b/core/src/utils/test/utils.ts
deleted file mode 100644
index f9096fecb9..0000000000
--- a/core/src/utils/test/utils.ts
+++ /dev/null
@@ -1,248 +0,0 @@
-import type { E2EElement, E2EPage } from '@stencil/core/testing';
-import type { ElementHandle, SerializableOrJSHandle } from 'puppeteer';
-
-/**
- * page.evaluate can only return a serializable value,
- * so it is not possible to return the full element.
- * Instead, we return an object with some common
- * properties that you may want to access in a test.
- */
-
-const getSerialElement = async (page: E2EPage, element: SerializableOrJSHandle) => {
-  return page.evaluate((el) => {
-    const { className, tagName, id } = el;
-    return {
-      className,
-      tagName,
-      id,
-    };
-  }, element);
-};
-
-export const getActiveElementParent = async (page: E2EPage) => {
-  const activeElement = await page.evaluateHandle(() => document.activeElement!.parentElement);
-  return getSerialElement(page, activeElement);
-};
-
-export const getActiveElement = async (page: E2EPage) => {
-  const activeElement = await page.evaluateHandle(() => document.activeElement);
-  return getSerialElement(page, activeElement);
-};
-
-export const generateE2EUrl = (component: string, type: string, rtl = false): string => {
-  let url = `/src/components/${component}/test/${type}?ionic:_testing=true`;
-  if (rtl) {
-    url = `${url}&rtl=true`;
-  }
-
-  return url;
-};
-
-/**
- * Gets the value of a property on an element
- */
-export const getElementProperty = async (element: any, property: string): Promise<string> => {
-  const getProperty = await element.getProperty(property);
-  if (!getProperty) {
-    return '';
-  }
-
-  return getProperty.jsonValue();
-};
-
-/**
- * Listens for an event and fires a callback
- * @param page - The Puppeteer `page` object
- * @param eventType: string - The event name to listen for. ex: `ionPickerColChange`
- * @param element: HTMLElement - An HTML element
- * @param callbackName: string - The name of the callback function to
- * call when the event is fired.
- *
- * Note: The callback function must be added using
- * page.exposeFunction prior to calling this function.
- */
-export const listenForEvent = async (
-  page: any,
-  eventType: string,
-  element: any,
-  callbackName: string
-): Promise<any> => {
-  try {
-    return await page.evaluate(
-      (scopeEventType: string, scopeElement: any, scopeCallbackName: string) => {
-        scopeElement.addEventListener(scopeEventType, (e: any) => {
-          (window as any)[scopeCallbackName]({ detail: e.detail });
-        });
-      },
-      eventType,
-      element,
-      callbackName
-    );
-  } catch (err) {
-    throw err;
-  }
-};
-
-/**
- * Drags an element by (x, y) pixels
- * @param element: HTMLElement - The HTML Element to drag
- * @param page - The Puppeteer 'page' object
- * @param x: number - Amount to drag `element` by on the x-axis
- * @param y: number - Amount to drag `element` by on the y-axis
- * @param startCoordinates (optional) - Coordinates of where to start the drag
- * gesture. If not provided, the drag gesture will start in the middle of the
- * element.
- */
-export const dragElementBy = async (
-  element: ElementHandle<Element>,
-  page: any,
-  x = 0,
-  y = 0,
-  startCoordinates?: { x: number; y: number }
-): Promise<void> => {
-  try {
-    const boundingBox = (await element.boundingBox())!;
-
-    const startX = startCoordinates?.x === undefined ? boundingBox.x + boundingBox.width / 2 : startCoordinates.x;
-    const startY = startCoordinates?.y === undefined ? boundingBox.y + boundingBox.height / 2 : startCoordinates.y;
-
-    const midX = startX + x / 2;
-    const midY = startY + y / 2;
-
-    const endX = startX + x;
-    const endY = startY + y;
-
-    await page.mouse.move(startX, startY);
-    await page.mouse.down();
-    await page.mouse.move(midX, midY);
-    await page.mouse.move(endX, endY);
-    await page.mouse.up();
-  } catch (err) {
-    throw err;
-  }
-};
-
-/**
- * Wait for a function to return true
- * This method runs in the context of the
- * test whereas page.waitForFunction runs in
- * the context of the browser
- * @param fn - The function to run
- * @param params: any - Any parameters that the fn needs
- * @param interval: number - Interval to run setInterval on
- */
-export const waitForFunctionTestContext = async (fn: any, params: any, interval = 16): Promise<any> => {
-  return new Promise<void>((resolve) => {
-    const intervalId = setInterval(() => {
-      if (fn(params)) {
-        clearInterval(intervalId);
-        return resolve();
-      }
-    }, interval);
-  });
-};
-
-/**
- * Pierce through shadow roots
- * https://github.com/GoogleChrome/puppeteer/issues/858#issuecomment-359763824
- */
-export const queryDeep = async (page: E2EPage, ...selectors: string[]): Promise<ElementHandle> => {
-  const shadowSelectorFn = (el: Element, selector: string): Element | null =>
-    el?.shadowRoot && el.shadowRoot.querySelector(selector);
-
-  // eslint-disable-next-line no-async-promise-executor
-  return new Promise(async (resolve) => {
-    const [firstSelector, ...restSelectors] = selectors;
-    let parentElement = await page.$(firstSelector);
-
-    for (const selector of restSelectors) {
-      parentElement = (await page.evaluateHandle(shadowSelectorFn, parentElement, selector)) as any;
-    }
-
-    if (parentElement) {
-      resolve(parentElement);
-    }
-  });
-};
-/**
- * Given an element and optional selector, use the selector if
- * it exists or get the node name of that element if not. Combine
- * with the current mode to verify the correct classes exist.
- *
- * @param el: E2EElement - The element to verify classes on
- * @param selector: string - A selector to use instead of the element tag name
- * @param globalMode: string - the global mode as a fallback
- *
- * Examples:
- * await checkComponentModeClasses(await page.find('ion-card-content'), globalMode)
- * => expect(el).toHaveClass(`card-content-{mode}`);
- *
- * await checkComponentModeClasses(await page.find('ion-card-content'), globalMode, 'some-class')
- * => expect(el).toHaveClass(`some-class-{mode}`);
- */
-export const checkComponentModeClasses = async (el: E2EElement, globalMode: string, selector?: string) => {
-  // If passed a selector to use, use that, else grab the nodeName
-  // of the element and remove the ion prefix to get the class selector
-  const component = selector !== undefined ? selector : el.nodeName.toLowerCase().replace('ion-', '');
-
-  const mode = (await el.getProperty('mode')) || globalMode;
-
-  expect(el).toHaveClass(`${component}-${mode}`);
-};
-
-/**
- * Given an element, get the mode and verify it exists as a class
- *
- * @param el: E2EElement - the element to verify the mode class on
- * @param globalMode: string - the global mode as a fallback
- */
-export const checkModeClasses = async (el: E2EElement, globalMode: string) => {
-  const mode = (await el.getProperty('mode')) || globalMode;
-  expect(el).toHaveClass(`${mode}`);
-};
-
-/**
- * Scrolls to a specific x/y coordinate within a scroll container. Supports custom
- * method for `ion-content` implementations.
- *
- * @param page The Puppeteer page object
- * @param selector The element to scroll within.
- * @param x The x coordinate to scroll to.
- * @param y The y coordinate to scroll to.
- */
-export const scrollTo = async (page: E2EPage, selector: string, x: number, y: number) => {
-  await page.evaluate(async (selector) => {
-    const el = document.querySelector<HTMLElement>(selector);
-    if (el) {
-      if (el.tagName === 'ION-CONTENT') {
-        await (el as any).scrollToPoint(x, y);
-      } else {
-        el.scroll(x, y);
-      }
-    } else {
-      console.error(`Unable to find element with selector: ${selector}`);
-    }
-  }, selector);
-};
-
-/**
- * Scrolls to the bottom of a scroll container. Supports custom method for
- * `ion-content` implementations.
- *
- * @param page The Puppeteer page object
- * @param selector The element to scroll within.
- */
-export const scrollToBottom = async (page: E2EPage, selector: string) => {
-  await page.evaluate(async (elSelector) => {
-    const el = document.querySelector<HTMLElement>(elSelector);
-    if (el) {
-      if (el.tagName === 'ION-CONTENT') {
-        await (el as any).scrollToBottom();
-      } else {
-        el.scrollTop = el.scrollHeight;
-      }
-    } else {
-      console.error(`Unable to find element with selector: ${elSelector}`);
-    }
-  }, selector);
-};