diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index 6672ac0cd8..164e670db3 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -231,6 +231,12 @@ Before creating a pull request, please read our requirements that explains the m
 2. See the [Creating a pull request from a fork](https://help.github.com/articles/creating-a-pull-request-from-a-fork/) GitHub help article for more information.
 3. Please fill out the provided Pull Request template to the best of your ability and include any issues that are related.
 
+### Review Process for Feature PRs
+
+The team has an internal design process for new Ionic features, which must be completed before the PR can be reviewed or merged. As a result of the design process, community feature PRs are subject to large changes. In some cases, the team may instead create a separate PR using pieces of the community PR. Either way, you will always receive co-author commit credit when the feature is merged.
+
+To expedite the process, please ensure that all feature PRs have an associated issue created, with a clear use case for why the feature should be added to Ionic.
+
 
 ## Commit Message Guidelines
 
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2afdbc374a..943d053df7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.9](https://github.com/ionic-team/ionic-framework/compare/v6.1.8...v6.1.9) (2022-06-08)
+
+
+### Bug Fixes
+
+* **all:** ripple effect is no longer added when scrolling ([#25352](https://github.com/ionic-team/ionic-framework/issues/25352)) ([0b275af](https://github.com/ionic-team/ionic-framework/commit/0b275af5ac06f470b4d908b889f513956bf5d868)), closes [#22030](https://github.com/ionic-team/ionic-framework/issues/22030)
+* **angular:** add support for Angular 14 ([#25403](https://github.com/ionic-team/ionic-framework/issues/25403)) ([122cdcc](https://github.com/ionic-team/ionic-framework/commit/122cdcc8253e46d9537105b11045fd7d9ccd8917)), closes [#25353](https://github.com/ionic-team/ionic-framework/issues/25353)
+* **datetime:** emit ionChange for non-calendar picker presentation ([#25380](https://github.com/ionic-team/ionic-framework/issues/25380)) ([4e6a60b](https://github.com/ionic-team/ionic-framework/commit/4e6a60b6a42287e5091728aecb61f6097e131b83)), closes [#25375](https://github.com/ionic-team/ionic-framework/issues/25375)
+* **datetime:** ensure that default month shown is always in bounds ([#25351](https://github.com/ionic-team/ionic-framework/issues/25351)) ([866d452](https://github.com/ionic-team/ionic-framework/commit/866d4528ad1b8ffa65258595d553ea934daa4add)), closes [#25320](https://github.com/ionic-team/ionic-framework/issues/25320)
+* **label:** text contents will repaint on change ([#25395](https://github.com/ionic-team/ionic-framework/issues/25395)) ([52ec741](https://github.com/ionic-team/ionic-framework/commit/52ec74193b4e2478cb84a6dfea261cb2113dcbff))
+
+
+
+
+
 ## [6.1.8](https://github.com/ionic-team/ionic-framework/compare/v6.1.7...v6.1.8) (2022-06-01)
 
 
diff --git a/angular/CHANGELOG.md b/angular/CHANGELOG.md
index f691f92c0b..7583c00cae 100644
--- a/angular/CHANGELOG.md
+++ b/angular/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.9](https://github.com/ionic-team/ionic/compare/v6.1.8...v6.1.9) (2022-06-08)
+
+
+### Bug Fixes
+
+* **angular:** add support for Angular 14 ([#25403](https://github.com/ionic-team/ionic/issues/25403)) ([122cdcc](https://github.com/ionic-team/ionic/commit/122cdcc8253e46d9537105b11045fd7d9ccd8917)), closes [#25353](https://github.com/ionic-team/ionic/issues/25353)
+
+
+
+
+
 ## [6.1.8](https://github.com/ionic-team/ionic/compare/v6.1.7...v6.1.8) (2022-06-01)
 
 **Note:** Version bump only for package @ionic/angular
diff --git a/angular/package-lock.json b/angular/package-lock.json
index 50435cc121..6227e50625 100644
--- a/angular/package-lock.json
+++ b/angular/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "6.1.8",
+      "version": "6.1.9",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.1.8",
+        "@ionic/core": "^6.1.9",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.0.0"
       },
@@ -1023,9 +1023,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.8",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.8.tgz",
-      "integrity": "sha512-EMYebwmS4UogpNrTyuCgIETKwE7XA93V7X3YacK2UArm1Xf98w3FsnfAYeMaUqY93bDxih/CSKm3NpUhVWP44A==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.9.tgz",
+      "integrity": "sha512-EaClsiGB/E9wPkujnrMZ71BLVcA8t6DBZu+caJMmqPLF/64S37CiyfrrMbL1UnxDWP2TXsPFH3seWl6Ek/W1bw==",
       "dependencies": {
         "@stencil/core": "^2.16.0",
         "ionicons": "^6.0.2",
@@ -7939,9 +7939,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.1.8",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.8.tgz",
-      "integrity": "sha512-EMYebwmS4UogpNrTyuCgIETKwE7XA93V7X3YacK2UArm1Xf98w3FsnfAYeMaUqY93bDxih/CSKm3NpUhVWP44A==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.9.tgz",
+      "integrity": "sha512-EaClsiGB/E9wPkujnrMZ71BLVcA8t6DBZu+caJMmqPLF/64S37CiyfrrMbL1UnxDWP2TXsPFH3seWl6Ek/W1bw==",
       "requires": {
         "@stencil/core": "^2.16.0",
         "ionicons": "^6.0.2",
diff --git a/angular/package.json b/angular/package.json
index 494ae06499..6d809d1f5e 100644
--- a/angular/package.json
+++ b/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -44,7 +44,7 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@ionic/core": "^6.1.8",
+    "@ionic/core": "^6.1.9",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.0.0"
   },
diff --git a/angular/src/di/r3_injector.ts b/angular/src/di/r3_injector.ts
new file mode 100644
index 0000000000..32f50d5356
--- /dev/null
+++ b/angular/src/di/r3_injector.ts
@@ -0,0 +1,34 @@
+/**
+ * This class is taken directly from Angular's codebase. It can be removed once
+ * we remove support for < Angular 14. The replacement class will come from @angular/core.
+ *
+ * TODO: FW-1641: Remove this class once Angular 13 support is dropped.
+ *
+ */
+import { Injector, ProviderToken, InjectFlags } from '@angular/core';
+/**
+ * An `Injector` that's part of the environment injector hierarchy, which exists outside of the
+ * component tree.
+ *
+ * @developerPreview
+ */
+export abstract class EnvironmentInjector implements Injector {
+  /**
+   * Retrieves an instance from the injector based on the provided token.
+   * @returns The instance from the injector if defined, otherwise the `notFoundValue`.
+   * @throws When the `notFoundValue` is `undefined` or `Injector.THROW_IF_NOT_FOUND`.
+   */
+  abstract get<T>(token: ProviderToken<T>, notFoundValue?: T, flags?: InjectFlags): T;
+  /**
+   * @deprecated from v4.0.0 use ProviderToken<T>
+   * @suppress {duplicate}
+   */
+  abstract get(token: any, notFoundValue?: any): any;
+
+  abstract destroy(): void;
+
+  /**
+   * @internal
+   */
+  abstract onDestroy(callback: () => void): void;
+}
diff --git a/angular/src/directives/navigation/ion-router-outlet.ts b/angular/src/directives/navigation/ion-router-outlet.ts
index 241105af13..83e0eec013 100644
--- a/angular/src/directives/navigation/ion-router-outlet.ts
+++ b/angular/src/directives/navigation/ion-router-outlet.ts
@@ -20,9 +20,11 @@ import { componentOnReady } from '@ionic/core';
 import { Observable, BehaviorSubject } from 'rxjs';
 import { distinctUntilChanged, filter, switchMap } from 'rxjs/operators';
 
+import { EnvironmentInjector } from '../../di/r3_injector';
 import { AnimationBuilder } from '../../ionic-core';
 import { Config } from '../../providers/config';
 import { NavController } from '../../providers/nav-controller';
+import { isComponentFactoryResolver } from '../../util/util';
 
 import { StackController } from './stack-controller';
 import { RouteView, getUrl } from './stack-utils';
@@ -82,11 +84,11 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
   constructor(
     private parentContexts: ChildrenOutletContexts,
     private location: ViewContainerRef,
-    private resolver: ComponentFactoryResolver,
     @Attribute('name') name: string,
     @Optional() @Attribute('tabs') tabs: string,
     private config: Config,
     private navCtrl: NavController,
+    @Optional() private environmentInjector: EnvironmentInjector,
     commonLocation: Location,
     elementRef: ElementRef,
     router: Router,
@@ -206,7 +208,10 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
     }
   }
 
-  activateWith(activatedRoute: ActivatedRoute, resolver: ComponentFactoryResolver | null): void {
+  activateWith(
+    activatedRoute: ActivatedRoute,
+    resolverOrInjector?: ComponentFactoryResolver | EnvironmentInjector | null
+  ): void {
     if (this.isActivated) {
       throw new Error('Cannot activate an already activated outlet');
     }
@@ -229,9 +234,6 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
       const snapshot = (activatedRoute as any)._futureSnapshot;
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       const component = snapshot.routeConfig!.component as any;
-      resolver = resolver || this.resolver;
-
-      const factory = resolver.resolveComponentFactory(component);
       const childContexts = this.parentContexts.getOrCreateContext(this.name).children;
 
       // We create an activated route proxy object that will maintain future updates for this component
@@ -240,8 +242,35 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
       const activatedRouteProxy = this.createActivatedRouteProxy(component$, activatedRoute);
 
       const injector = new OutletInjector(activatedRouteProxy, childContexts, this.location.injector);
-      cmpRef = this.activated = this.location.createComponent(factory, this.location.length, injector);
 
+      if (resolverOrInjector && isComponentFactoryResolver(resolverOrInjector)) {
+        // Backwards compatibility for Angular 13 and lower
+        const factory = resolverOrInjector.resolveComponentFactory(component);
+        cmpRef = this.activated = this.location.createComponent(factory, this.location.length, injector);
+      } else {
+        /**
+         * Angular 14 and higher.
+         *
+         * TODO: FW-1641: Migrate once Angular 13 support is dropped.
+         *
+         * When we drop < Angular 14, we can replace the following code with:
+         * ```ts
+          const environmentInjector = resolverOrInjector ?? this.environmentInjector;
+            cmpRef = this.activated = location.createComponent(component, {
+              index: location.length,
+              injector,
+              environmentInjector,
+            });
+         * ```
+         * where `this.environmentInjector` is a provider of `EnvironmentInjector` from @angular/core.
+         */
+        const environmentInjector = resolverOrInjector ?? this.environmentInjector;
+        cmpRef = this.activated = this.location.createComponent(component, {
+          index: this.location.length,
+          injector,
+          environmentInjector,
+        } as any);
+      }
       // Once the component is created we can push it to our local subject supplied to the proxy
       component$.next(cmpRef.instance);
 
diff --git a/angular/src/providers/angular-delegate.ts b/angular/src/providers/angular-delegate.ts
index 6bba41d65a..274d3b2257 100644
--- a/angular/src/providers/angular-delegate.ts
+++ b/angular/src/providers/angular-delegate.ts
@@ -6,6 +6,7 @@ import {
   Injectable,
   InjectionToken,
   Injector,
+  ComponentRef,
 } from '@angular/core';
 import {
   FrameworkDelegate,
@@ -16,18 +17,20 @@ import {
   LIFECYCLE_WILL_UNLOAD,
 } from '@ionic/core';
 
+import { EnvironmentInjector } from '../di/r3_injector';
 import { NavParams } from '../directives/navigation/nav-params';
+import { isComponentFactoryResolver } from '../util/util';
 
 @Injectable()
 export class AngularDelegate {
   constructor(private zone: NgZone, private appRef: ApplicationRef) {}
 
   create(
-    resolver: ComponentFactoryResolver,
+    resolverOrInjector: ComponentFactoryResolver,
     injector: Injector,
     location?: ViewContainerRef
   ): AngularFrameworkDelegate {
-    return new AngularFrameworkDelegate(resolver, injector, location, this.appRef, this.zone);
+    return new AngularFrameworkDelegate(resolverOrInjector, injector, location, this.appRef, this.zone);
   }
 }
 
@@ -36,7 +39,7 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
   private elEventsMap = new WeakMap<HTMLElement, () => void>();
 
   constructor(
-    private resolver: ComponentFactoryResolver,
+    private resolverOrInjector: ComponentFactoryResolver | EnvironmentInjector,
     private injector: Injector,
     private location: ViewContainerRef | undefined,
     private appRef: ApplicationRef,
@@ -48,7 +51,7 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
       return new Promise((resolve) => {
         const el = attachView(
           this.zone,
-          this.resolver,
+          this.resolverOrInjector,
           this.injector,
           this.location,
           this.appRef,
@@ -85,7 +88,7 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
 
 export const attachView = (
   zone: NgZone,
-  resolver: ComponentFactoryResolver,
+  resolverOrInjector: ComponentFactoryResolver | EnvironmentInjector,
   injector: Injector,
   location: ViewContainerRef | undefined,
   appRef: ApplicationRef,
@@ -96,14 +99,29 @@ export const attachView = (
   params: any,
   cssClasses: string[] | undefined
 ): any => {
-  const factory = resolver.resolveComponentFactory(component);
+  let componentRef: ComponentRef<any>;
   const childInjector = Injector.create({
     providers: getProviders(params),
     parent: injector,
   });
-  const componentRef = location
-    ? location.createComponent(factory, location.length, childInjector)
-    : factory.create(childInjector);
+
+  if (resolverOrInjector && isComponentFactoryResolver(resolverOrInjector)) {
+    // Angular 13 and lower
+    const factory = resolverOrInjector.resolveComponentFactory(component);
+    componentRef = location
+      ? location.createComponent(factory, location.length, childInjector)
+      : factory.create(childInjector);
+  } else if (location) {
+    // Angular 14
+    const environmentInjector = resolverOrInjector;
+    componentRef = location.createComponent(component, {
+      index: location.indexOf,
+      injector: childInjector,
+      environmentInjector,
+    } as any);
+  } else {
+    return null;
+  }
 
   const instance = componentRef.instance;
   const hostElement = componentRef.location.nativeElement;
diff --git a/angular/src/providers/modal-controller.ts b/angular/src/providers/modal-controller.ts
index 7acc4fefa6..6d91fe78b3 100644
--- a/angular/src/providers/modal-controller.ts
+++ b/angular/src/providers/modal-controller.ts
@@ -1,6 +1,7 @@
-import { ComponentFactoryResolver, Injector, Injectable } from '@angular/core';
+import { ComponentFactoryResolver, Injector, Injectable, Optional } from '@angular/core';
 import { ModalOptions, modalController } from '@ionic/core';
 
+import { EnvironmentInjector } from '../di/r3_injector';
 import { OverlayBaseController } from '../util/overlay';
 
 import { AngularDelegate } from './angular-delegate';
@@ -10,7 +11,9 @@ export class ModalController extends OverlayBaseController<ModalOptions, HTMLIon
   constructor(
     private angularDelegate: AngularDelegate,
     private resolver: ComponentFactoryResolver,
-    private injector: Injector
+    private injector: Injector,
+    // TODO: FW-1641: Migrate to Angular's version once Angular 13 is dropped
+    @Optional() private environmentInjector: EnvironmentInjector
   ) {
     super(modalController);
   }
@@ -18,7 +21,7 @@ export class ModalController extends OverlayBaseController<ModalOptions, HTMLIon
   create(opts: ModalOptions): Promise<HTMLIonModalElement> {
     return super.create({
       ...opts,
-      delegate: this.angularDelegate.create(this.resolver, this.injector),
+      delegate: this.angularDelegate.create(this.resolver ?? this.environmentInjector, this.injector),
     });
   }
 }
diff --git a/angular/src/providers/popover-controller.ts b/angular/src/providers/popover-controller.ts
index fc7deefd0f..5a5857c9a3 100644
--- a/angular/src/providers/popover-controller.ts
+++ b/angular/src/providers/popover-controller.ts
@@ -1,6 +1,7 @@
-import { ComponentFactoryResolver, Injector, Injectable } from '@angular/core';
+import { ComponentFactoryResolver, Injector, Injectable, Optional } from '@angular/core';
 import { PopoverOptions, popoverController } from '@ionic/core';
 
+import { EnvironmentInjector } from '../di/r3_injector';
 import { OverlayBaseController } from '../util/overlay';
 
 import { AngularDelegate } from './angular-delegate';
@@ -10,7 +11,9 @@ export class PopoverController extends OverlayBaseController<PopoverOptions, HTM
   constructor(
     private angularDelegate: AngularDelegate,
     private resolver: ComponentFactoryResolver,
-    private injector: Injector
+    private injector: Injector,
+    // TODO: FW-1641: Migrate to Angular's version once Angular 13 is dropped
+    @Optional() private environmentInjector: EnvironmentInjector
   ) {
     super(popoverController);
   }
@@ -18,7 +21,7 @@ export class PopoverController extends OverlayBaseController<PopoverOptions, HTM
   create(opts: PopoverOptions): Promise<HTMLIonPopoverElement> {
     return super.create({
       ...opts,
-      delegate: this.angularDelegate.create(this.resolver, this.injector),
+      delegate: this.angularDelegate.create(this.resolver ?? this.environmentInjector, this.injector),
     });
   }
 }
diff --git a/angular/src/util/util.ts b/angular/src/util/util.ts
index 6f8b29c994..7c49eab59d 100644
--- a/angular/src/util/util.ts
+++ b/angular/src/util/util.ts
@@ -1,3 +1,5 @@
+import { ComponentFactoryResolver } from '@angular/core';
+
 declare const __zone_symbol__requestAnimationFrame: any;
 declare const requestAnimationFrame: any;
 
@@ -10,3 +12,7 @@ export const raf = (h: any): any => {
   }
   return setTimeout(h);
 };
+
+export const isComponentFactoryResolver = (item: any): item is ComponentFactoryResolver => {
+  return !!item.resolveComponentFactory;
+};
diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md
index c37fd76247..cf5e26fe60 100644
--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.9](https://github.com/ionic-team/ionic/compare/v6.1.8...v6.1.9) (2022-06-08)
+
+
+### Bug Fixes
+
+* **all:** ripple effect is no longer added when scrolling ([#25352](https://github.com/ionic-team/ionic/issues/25352)) ([0b275af](https://github.com/ionic-team/ionic/commit/0b275af5ac06f470b4d908b889f513956bf5d868)), closes [#22030](https://github.com/ionic-team/ionic/issues/22030)
+* **datetime:** emit ionChange for non-calendar picker presentation ([#25380](https://github.com/ionic-team/ionic/issues/25380)) ([4e6a60b](https://github.com/ionic-team/ionic/commit/4e6a60b6a42287e5091728aecb61f6097e131b83)), closes [#25375](https://github.com/ionic-team/ionic/issues/25375)
+* **datetime:** ensure that default month shown is always in bounds ([#25351](https://github.com/ionic-team/ionic/issues/25351)) ([866d452](https://github.com/ionic-team/ionic/commit/866d4528ad1b8ffa65258595d553ea934daa4add)), closes [#25320](https://github.com/ionic-team/ionic/issues/25320)
+* **label:** text contents will repaint on change ([#25395](https://github.com/ionic-team/ionic/issues/25395)) ([52ec741](https://github.com/ionic-team/ionic/commit/52ec74193b4e2478cb84a6dfea261cb2113dcbff))
+
+
+
+
+
 ## [6.1.8](https://github.com/ionic-team/ionic/compare/v6.1.7...v6.1.8) (2022-06-01)
 
 
diff --git a/core/package-lock.json b/core/package-lock.json
index da782c93cb..28318390cf 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "6.1.8",
+      "version": "6.1.9",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "^2.16.0",
diff --git a/core/package.json b/core/package.json
index b31c0bad96..2caf964bff 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index e131af76b9..979a1101cb 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -338,11 +338,11 @@ export namespace Components {
          */
         "color"?: Color;
         /**
-          * The number of breadcrumbs to show after the collapsed indicator. If this property exists `maxItems` will be ignored.
+          * The number of breadcrumbs to show after the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed.
          */
         "itemsAfterCollapse": number;
         /**
-          * The number of breadcrumbs to show before the collapsed indicator. If this property exists `maxItems` will be ignored.
+          * The number of breadcrumbs to show before the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed.
          */
         "itemsBeforeCollapse": number;
         /**
@@ -798,7 +798,7 @@ export namespace Components {
          */
         "readonly": boolean;
         /**
-          * Resets the internal state of the datetime but does not update the value. Passing a valid ISO-8601 string will reset the state of the component to the provided date. If no value is provided, the internal state will be reset to today.
+          * Resets the internal state of the datetime but does not update the value. Passing a valid ISO-8601 string will reset the state of the component to the provided date. If no value is provided, the internal state will be reset to the clamped value of the min, max and today.
          */
         "reset": (startDate?: string | undefined) => Promise<void>;
         /**
@@ -4228,11 +4228,11 @@ declare namespace LocalJSX {
          */
         "color"?: Color;
         /**
-          * The number of breadcrumbs to show after the collapsed indicator. If this property exists `maxItems` will be ignored.
+          * The number of breadcrumbs to show after the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed.
          */
         "itemsAfterCollapse"?: number;
         /**
-          * The number of breadcrumbs to show before the collapsed indicator. If this property exists `maxItems` will be ignored.
+          * The number of breadcrumbs to show before the collapsed indicator. If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`, the breadcrumbs will not be collapsed.
          */
         "itemsBeforeCollapse"?: number;
         /**
diff --git a/core/src/components/breadcrumbs/breadcrumbs.tsx b/core/src/components/breadcrumbs/breadcrumbs.tsx
index cbb8379f91..62b149ac60 100644
--- a/core/src/components/breadcrumbs/breadcrumbs.tsx
+++ b/core/src/components/breadcrumbs/breadcrumbs.tsx
@@ -38,13 +38,15 @@ export class Breadcrumbs implements ComponentInterface {
 
   /**
    * The number of breadcrumbs to show before the collapsed indicator.
-   * If this property exists `maxItems` will be ignored.
+   * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,
+   * the breadcrumbs will not be collapsed.
    */
   @Prop() itemsBeforeCollapse = 1;
 
   /**
    * The number of breadcrumbs to show after the collapsed indicator.
-   * If this property exists `maxItems` will be ignored.
+   * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,
+   * the breadcrumbs will not be collapsed.
    */
   @Prop() itemsAfterCollapse = 1;
 
diff --git a/core/src/components/content/content.scss b/core/src/components/content/content.scss
index 7798b1c629..2b167838bc 100644
--- a/core/src/components/content/content.scss
+++ b/core/src/components/content/content.scss
@@ -79,7 +79,14 @@
 
   overflow: hidden;
 
-  touch-action: manipulation;
+  /**
+   * touch-action: manipulation is an alias
+   * for this, but WebKit has an issue
+   * where pointercancel events are not fired
+   * when scrolling: https://bugs.webkit.org/show_bug.cgi?id=240917
+   * Using the long form below avoids the issue.
+   */
+  touch-action: pan-x pan-y pinch-zoom;
 }
 
 .scroll-y,
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index 1cd0eb86ed..d9e9c518dd 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -37,7 +37,7 @@ import {
   getPreviousYear,
   getStartOfWeek,
 } from './utils/manipulation';
-import { convertToArrayOfNumbers, getPartsFromCalendarDay, parseDate } from './utils/parse';
+import { clampDate, convertToArrayOfNumbers, getPartsFromCalendarDay, parseDate } from './utils/parse';
 import {
   getCalendarDayState,
   isDayDisabled,
@@ -442,12 +442,13 @@ export class Datetime implements ComponentInterface {
   @Method()
   async confirm(closeOverlay = false) {
     /**
-     * If highlightActiveParts is false, this means the datetime was inited
-     * without a value, and the user hasn't selected one yet. We shouldn't
-     * update the value in this case, since otherwise it would be mysteriously
-     * set to today.
+     * We only update the value if the presentation is not a calendar picker,
+     * or if `highlightActiveParts` is true; indicating that the user
+     * has selected a date from the calendar picker.
+     *
+     * Otherwise "today" would accidentally be set as the value.
      */
-    if (this.highlightActiveParts) {
+    if (this.highlightActiveParts || !this.isCalendarPicker) {
       /**
        * Prevent convertDataToISO from doing any
        * kind of transformation based on timezone
@@ -471,7 +472,7 @@ export class Datetime implements ComponentInterface {
   /**
    * Resets the internal state of the datetime but does not update the value.
    * Passing a valid ISO-8601 string will reset the state of the component to the provided date.
-   * If no value is provided, the internal state will be reset to today.
+   * If no value is provided, the internal state will be reset to the clamped value of the min, max and today.
    */
   @Method()
   async reset(startDate?: string) {
@@ -522,6 +523,11 @@ export class Datetime implements ComponentInterface {
     this.confirm();
   };
 
+  private get isCalendarPicker() {
+    const { presentation } = this;
+    return presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
+  }
+
   /**
    * Stencil sometimes sets calendarBodyRef to null on rerender, even though
    * the element is present. Query for it manually as a fallback.
@@ -1077,8 +1083,8 @@ export class Datetime implements ComponentInterface {
 
   private processValue = (value?: string | null) => {
     this.highlightActiveParts = !!value;
-    const valueToProcess = value || getToday();
-    const { month, day, year, hour, minute, tzOffset } = parseDate(valueToProcess);
+    const valueToProcess = parseDate(value || getToday());
+    const { month, day, year, hour, minute, tzOffset } = clampDate(valueToProcess, this.minParts, this.maxParts);
 
     this.setWorkingParts({
       month,
@@ -1087,7 +1093,7 @@ export class Datetime implements ComponentInterface {
       hour,
       minute,
       tzOffset,
-      ampm: hour >= 12 ? 'pm' : 'am',
+      ampm: hour! >= 12 ? 'pm' : 'am',
     });
 
     this.activeParts = {
@@ -1097,7 +1103,7 @@ export class Datetime implements ComponentInterface {
       hour,
       minute,
       tzOffset,
-      ampm: hour >= 12 ? 'pm' : 'am',
+      ampm: hour! >= 12 ? 'pm' : 'am',
     };
   };
 
@@ -1670,8 +1676,8 @@ export class Datetime implements ComponentInterface {
     const { hours, minutes, am, pm } = generateTime(
       workingParts,
       use24Hour ? 'h23' : 'h12',
-      this.minParts,
-      this.maxParts,
+      this.value ? this.minParts : undefined,
+      this.value ? this.maxParts : undefined,
       this.parsedHourValues,
       this.parsedMinuteValues
     );
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts
index 9c59c03b01..e884249a74 100644
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts
@@ -28,6 +28,21 @@ test.describe('datetime: selecting a day', () => {
   test('should not highlight a day until one is selected, with default-buttons', async ({ page }) => {
     await testHighlight(page, 'custom-datetime');
   });
+  test('should update the active day', async ({ page }) => {
+    await page.setContent(`
+      <ion-datetime show-default-buttons="true" value="2021-12-25T12:40:00.000Z"></ion-datetime>
+    `);
+
+    const activeDay = page.locator('ion-datetime .calendar-day-active');
+
+    expect(activeDay).toHaveText('25');
+
+    const dayBtn = page.locator('ion-datetime .calendar-day[data-day="13"][data-month="12"]');
+    await dayBtn.click();
+    await page.waitForChanges();
+
+    expect(activeDay).toHaveText('13');
+  });
 });
 
 test.describe('datetime: confirm date', () => {
@@ -45,4 +60,97 @@ test.describe('datetime: confirm date', () => {
     const valueAgain = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value);
     expect(valueAgain).toBeUndefined();
   });
+  test('should set the date value based on the selected date', async ({ page }) => {
+    await page.setContent(`
+      <button id="bind">Bind datetimeMonthDidChange event</button>
+      <ion-datetime value="2021-12-25T12:40:00.000Z"></ion-datetime>
+      <script type="module">
+        import { InitMonthDidChangeEvent } from '/src/components/datetime/test/utils/month-did-change-event.js';
+        document.querySelector('button').addEventListener('click', function() {
+          InitMonthDidChangeEvent();
+        });
+      </script>
+    `);
+
+    const datetimeMonthDidChange = await page.spyOnEvent('datetimeMonthDidChange');
+    const eventButton = page.locator('button#bind');
+    await eventButton.click();
+
+    const buttons = page.locator('ion-datetime .calendar-next-prev ion-button');
+    await buttons.nth(1).click();
+
+    await datetimeMonthDidChange.next();
+
+    const datetime = page.locator('ion-datetime');
+    await datetime.evaluate((el: HTMLIonDatetimeElement) => el.confirm());
+
+    // Value may include timezone information so we need to check
+    // that the value at least includes the correct date/time info.
+    const value = (await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value))!;
+    expect(value.includes('2021-12-25T12:40:00')).toBe(true);
+  });
+});
+
+test.describe('datetime: footer', () => {
+  test('should render default buttons', async ({ page }) => {
+    await page.setContent('<ion-datetime value="2022-05-03" show-default-buttons="true"></ion-datetime>');
+
+    const cancelButton = page.locator('ion-datetime #cancel-button');
+    expect(cancelButton).toHaveText('Cancel');
+
+    const confirmButton = page.locator('ion-datetime #confirm-button');
+    expect(confirmButton).toHaveText('Done');
+
+    const datetime = page.locator('ion-datetime');
+    expect(await datetime.screenshot()).toMatchSnapshot(
+      `datetime-footer-default-buttons-${page.getSnapshotSettings()}.png`
+    );
+  });
+  test('should render clear button', async ({ page }) => {
+    await page.setContent('<ion-datetime value="2022-05-03" show-clear-button="true"></ion-datetime>');
+
+    const clearButton = page.locator('ion-datetime #clear-button');
+    expect(clearButton).toHaveText('Clear');
+
+    const datetime = page.locator('ion-datetime');
+    expect(await datetime.screenshot()).toMatchSnapshot(
+      `datetime-footer-clear-button-${page.getSnapshotSettings()}.png`
+    );
+  });
+  test('should render default and clear buttons', async ({ page }) => {
+    await page.setContent(
+      '<ion-datetime value="2022-05-03" show-default-buttons="true" show-clear-button="true"></ion-datetime>'
+    );
+
+    const cancelButton = page.locator('ion-datetime #cancel-button');
+    expect(cancelButton).toHaveText('Cancel');
+
+    const confirmButton = page.locator('ion-datetime #confirm-button');
+    expect(confirmButton).toHaveText('Done');
+
+    const clearButton = page.locator('ion-datetime #clear-button');
+    expect(clearButton).toHaveText('Clear');
+
+    const datetime = page.locator('ion-datetime');
+    expect(await datetime.screenshot()).toMatchSnapshot(
+      `datetime-footer-default-clear-buttons-${page.getSnapshotSettings()}.png`
+    );
+  });
+  test('should render custom buttons', async ({ page }) => {
+    await page.setContent(`
+      <ion-datetime value="2022-05-03">
+        <ion-buttons slot="buttons">
+          <ion-button id="custom-button" color="primary">Hello!</ion-button>
+        </ion-buttons>
+      </ion-datetime>
+    `);
+
+    const customButton = page.locator('ion-datetime #custom-button');
+    expect(customButton).toBeVisible();
+
+    const datetime = page.locator('ion-datetime');
+    expect(await datetime.screenshot()).toMatchSnapshot(
+      `datetime-footer-custom-buttons-${page.getSnapshotSettings()}.png`
+    );
+  });
 });
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1dc2a99e9a
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..171468bd32
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..35b03bcbdc
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-ios-ltr-Mobile-Safari-linux.png differ
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
new file mode 100644
index 0000000000..1dc2a99e9a
Binary files /dev/null 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
new file mode 100644
index 0000000000..171468bd32
Binary files /dev/null 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
new file mode 100644
index 0000000000..35b03bcbdc
Binary files /dev/null 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-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1dc2a99e9a
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-ltr-Mobile-Chrome-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
new file mode 100644
index 0000000000..171468bd32
Binary files /dev/null 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-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..35b03bcbdc
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1dc2a99e9a
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-rtl-Mobile-Chrome-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
new file mode 100644
index 0000000000..171468bd32
Binary files /dev/null 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-clear-button-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..35b03bcbdc
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-clear-button-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..6843d4af18
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a7e61861be
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..53ba743127
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-ios-ltr-Mobile-Safari-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
new file mode 100644
index 0000000000..6843d4af18
Binary files /dev/null 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
new file mode 100644
index 0000000000..a7e61861be
Binary files /dev/null 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
new file mode 100644
index 0000000000..53ba743127
Binary files /dev/null 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-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..6843d4af18
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-ltr-Mobile-Chrome-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
new file mode 100644
index 0000000000..a7e61861be
Binary files /dev/null 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-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..53ba743127
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..6843d4af18
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Chrome-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
new file mode 100644
index 0000000000..a7e61861be
Binary files /dev/null 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-custom-buttons-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..53ba743127
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-custom-buttons-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c5708a77c8
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..de0f49c2b3
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..afd7900f26
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-ios-ltr-Mobile-Safari-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
new file mode 100644
index 0000000000..c5708a77c8
Binary files /dev/null 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
new file mode 100644
index 0000000000..de0f49c2b3
Binary files /dev/null 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
new file mode 100644
index 0000000000..afd7900f26
Binary files /dev/null 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-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c5708a77c8
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-ltr-Mobile-Chrome-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
new file mode 100644
index 0000000000..de0f49c2b3
Binary files /dev/null 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-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..afd7900f26
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c5708a77c8
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-rtl-Mobile-Chrome-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
new file mode 100644
index 0000000000..de0f49c2b3
Binary files /dev/null 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-buttons-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..afd7900f26
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-buttons-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..64cac5b5c1
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..f2df6ab9b2
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..96ade38dfd
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-ios-ltr-Mobile-Safari-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
new file mode 100644
index 0000000000..64cac5b5c1
Binary files /dev/null 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
new file mode 100644
index 0000000000..f2df6ab9b2
Binary files /dev/null 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
new file mode 100644
index 0000000000..96ade38dfd
Binary files /dev/null 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-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..64cac5b5c1
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-ltr-Mobile-Chrome-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
new file mode 100644
index 0000000000..f2df6ab9b2
Binary files /dev/null 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-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..96ade38dfd
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..64cac5b5c1
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-rtl-Mobile-Chrome-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
new file mode 100644
index 0000000000..f2df6ab9b2
Binary files /dev/null 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/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..96ade38dfd
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-footer-default-clear-buttons-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/e2e.ts b/core/src/components/datetime/test/basic/e2e.ts
deleted file mode 100644
index 81296840fd..0000000000
--- a/core/src/components/datetime/test/basic/e2e.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-describe('Footer', () => {
-  test('should render default buttons', async () => {
-    const page = await newE2EPage({
-      html: '<ion-datetime show-default-buttons="true"></ion-datetime>',
-    });
-
-    const cancelButton = await page.find('ion-datetime >>> #cancel-button');
-    expect(cancelButton).toEqualText('Cancel');
-
-    const confirmButton = await page.find('ion-datetime >>> #confirm-button');
-    expect(confirmButton).toEqualText('Done');
-
-    expect(await page.compareScreenshot()).toMatchScreenshot();
-  });
-
-  test('should render clear button', async () => {
-    const page = await newE2EPage({
-      html: '<ion-datetime show-clear-button="true"></ion-datetime>',
-    });
-
-    const clearButton = await page.find('ion-datetime >>> #clear-button');
-    expect(clearButton).toEqualText('Clear');
-
-    expect(await page.compareScreenshot()).toMatchScreenshot();
-  });
-
-  test('should render clear and default buttons', async () => {
-    const page = await newE2EPage({
-      html: '<ion-datetime show-default-buttons="true" show-clear-button="true"></ion-datetime>',
-    });
-
-    const cancelButton = await page.find('ion-datetime >>> #cancel-button');
-    expect(cancelButton).toEqualText('Cancel');
-
-    const confirmButton = await page.find('ion-datetime >>> #confirm-button');
-    expect(confirmButton).toEqualText('Done');
-
-    const clearButton = await page.find('ion-datetime >>> #clear-button');
-    expect(clearButton).toEqualText('Clear');
-
-    expect(await page.compareScreenshot()).toMatchScreenshot();
-  });
-
-  test('should render custom buttons', async () => {
-    const page = await newE2EPage({
-      html: `
-        <ion-datetime show-default-buttons="true" show-clear-button="true">
-          <ion-buttons slot="buttons">
-            <ion-button id="custom-button">Hello!</ion-button>
-          </ion-buttons>
-        </ion-datetime>
-      `,
-    });
-
-    const customButton = await page.find('ion-datetime #custom-button');
-    expect(customButton).not.toBeNull();
-
-    expect(await page.compareScreenshot()).toMatchScreenshot();
-  });
-
-  test('should render custom buttons', async () => {
-    const page = await newE2EPage({
-      html: `
-        <ion-datetime show-default-buttons="true" show-clear-button="true">
-          <ion-buttons slot="buttons">
-            <ion-button id="custom-button">Hello!</ion-button>
-          </ion-buttons>
-        </ion-datetime>
-      `,
-    });
-
-    const customButton = await page.find('ion-datetime #custom-button');
-    expect(customButton).not.toBeNull();
-
-    expect(await page.compareScreenshot()).toMatchScreenshot();
-  });
-});
-
-describe('datetime: selecting a day', () => {
-  it('should update the active day', async () => {
-    const page = await newE2EPage({
-      html: `
-        <ion-datetime show-default-buttons="true" value="2021-12-25T12:40:00.000Z"></ion-datetime>
-      `,
-    });
-
-    const activeDay = await page.find('ion-datetime >>> .calendar-day-active');
-
-    expect(activeDay.innerText).toEqual('25');
-
-    const dayBtn = await page.find('ion-datetime >>> .calendar-day[data-day="13"][data-month="12"]');
-    dayBtn.click();
-    await page.waitForChanges();
-
-    const newActiveDay = await page.find('ion-datetime >>> .calendar-day-active');
-
-    expect(newActiveDay.innerText).toEqual('13');
-  });
-});
-
-test('datetime:rtl: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/datetime/test/basic?ionic:_testing=true&rtl=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-describe('datetime: confirm date', () => {
-  test('should set the date value based on the selected date', async () => {
-    const page = await newE2EPage({
-      html: `
-        <button>Bind datetimeMonthDidChange event</button>
-        <ion-datetime value="2021-12-25T12:40:00.000Z"></ion-datetime>
-        <script type="module">
-          import { InitMonthDidChangeEvent } from '/src/components/datetime/test/utils/month-did-change-event.js';
-          document.querySelector('button').addEventListener('click', function() {
-            InitMonthDidChangeEvent();
-          });
-        </script>
-      `,
-    });
-
-    const eventButton = await page.find('button');
-    await eventButton.click();
-
-    const buttons = await page.findAll('ion-datetime >>> .calendar-next-prev ion-button');
-
-    await buttons[1].click();
-
-    await page.waitForEvent('datetimeMonthDidChange');
-
-    await page.$eval('ion-datetime', async (el: any) => {
-      await el.confirm();
-    });
-
-    const value = await (await page.find('ion-datetime')).getProperty('value');
-
-    expect(value).toMatch('2021-12-25T12:40:00');
-  });
-});
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts b/core/src/components/datetime/test/color/datetime.e2e.ts
new file mode 100644
index 0000000000..35543ece3e
--- /dev/null
+++ b/core/src/components/datetime/test/color/datetime.e2e.ts
@@ -0,0 +1,43 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('datetime: color', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto('/src/components/datetime/test/color');
+
+    const colorSelect = page.locator('ion-select');
+    const darkModeToggle = page.locator('ion-checkbox');
+    const datetime = page.locator('ion-datetime');
+
+    await darkModeToggle.evaluate((el: HTMLIonCheckboxElement) => (el.checked = true));
+    await page.waitForChanges();
+
+    expect(await datetime.first().screenshot()).toMatchSnapshot(
+      `datetime-color-default-dark-${page.getSnapshotSettings()}.png`
+    );
+    expect(await datetime.last().screenshot()).toMatchSnapshot(
+      `datetime-color-custom-dark-${page.getSnapshotSettings()}.png`
+    );
+
+    await darkModeToggle.evaluate((el: HTMLIonCheckboxElement) => (el.checked = false));
+    await colorSelect.evaluate((el: HTMLIonSelectElement) => (el.value = 'danger'));
+    await page.waitForChanges();
+
+    expect(await datetime.first().screenshot()).toMatchSnapshot(
+      `datetime-color-default-light-color-${page.getSnapshotSettings()}.png`
+    );
+    expect(await datetime.last().screenshot()).toMatchSnapshot(
+      `datetime-color-custom-light-color-${page.getSnapshotSettings()}.png`
+    );
+
+    await darkModeToggle.evaluate((el: HTMLIonCheckboxElement) => (el.checked = true));
+    await page.waitForChanges();
+
+    expect(await datetime.first().screenshot()).toMatchSnapshot(
+      `datetime-color-default-dark-color-${page.getSnapshotSettings()}.png`
+    );
+    expect(await datetime.last().screenshot()).toMatchSnapshot(
+      `datetime-color-custom-dark-color-${page.getSnapshotSettings()}.png`
+    );
+  });
+});
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..973e23122f
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..0aa4e19429
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..7905c9174b
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-ios-ltr-Mobile-Safari-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
new file mode 100644
index 0000000000..d5c3589e29
Binary files /dev/null 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
new file mode 100644
index 0000000000..a53106d1c0
Binary files /dev/null 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
new file mode 100644
index 0000000000..efecb4bc19
Binary files /dev/null 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-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..36d0520cd2
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-ltr-Mobile-Chrome-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
new file mode 100644
index 0000000000..b870e81958
Binary files /dev/null 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-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..3e5443fd2a
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..13b1f2179b
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-rtl-Mobile-Chrome-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
new file mode 100644
index 0000000000..0df4805561
Binary files /dev/null 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-color-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..8120b2a794
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-color-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..00b10680e9
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..7a422d0933
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..7707ddaf29
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-ios-ltr-Mobile-Safari-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
new file mode 100644
index 0000000000..02a5519fd0
Binary files /dev/null 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
new file mode 100644
index 0000000000..9bb040df4a
Binary files /dev/null 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
new file mode 100644
index 0000000000..2a1a0dbbed
Binary files /dev/null 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-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..d5af80b235
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-ltr-Mobile-Chrome-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
new file mode 100644
index 0000000000..d5830aad7d
Binary files /dev/null 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-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..015fca10c7
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..4e1edee279
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-rtl-Mobile-Chrome-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
new file mode 100644
index 0000000000..d41519fad2
Binary files /dev/null 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-dark-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..479e7dbf5d
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-dark-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..15a8423032
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..020e556039
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..104b262823
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-ios-ltr-Mobile-Safari-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
new file mode 100644
index 0000000000..b6db85d00a
Binary files /dev/null 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
new file mode 100644
index 0000000000..31101993a2
Binary files /dev/null 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
new file mode 100644
index 0000000000..5de5178490
Binary files /dev/null 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-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..707425ca93
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-ltr-Mobile-Chrome-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
new file mode 100644
index 0000000000..19774d14aa
Binary files /dev/null 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-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..0e74392bf0
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..885a70d4f3
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-rtl-Mobile-Chrome-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
new file mode 100644
index 0000000000..04e1756ffa
Binary files /dev/null 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-custom-light-color-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..7ed9b07b51
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-custom-light-color-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..4bef5f819d
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..e11beabd26
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..7e9611d8de
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-ios-ltr-Mobile-Safari-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
new file mode 100644
index 0000000000..c32814c0fc
Binary files /dev/null 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
new file mode 100644
index 0000000000..6d25f1c08d
Binary files /dev/null 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
new file mode 100644
index 0000000000..3959256183
Binary files /dev/null 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-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..258b27f571
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-ltr-Mobile-Chrome-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
new file mode 100644
index 0000000000..5469b3fff7
Binary files /dev/null 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-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..a73d6b1278
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..9689dc9c94
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-rtl-Mobile-Chrome-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
new file mode 100644
index 0000000000..fa2a851ac6
Binary files /dev/null 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-color-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..5c73a6560b
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-color-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..3983b9d9cb
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..b66a8381a8
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..fa50f959f4
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-ios-ltr-Mobile-Safari-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
new file mode 100644
index 0000000000..6c31e60e7d
Binary files /dev/null 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
new file mode 100644
index 0000000000..2c515f7bc4
Binary files /dev/null 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
new file mode 100644
index 0000000000..a93744e559
Binary files /dev/null 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-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c6449aef32
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-ltr-Mobile-Chrome-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
new file mode 100644
index 0000000000..1b0402f64e
Binary files /dev/null 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-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..706243bfe7
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..d5a205614e
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-rtl-Mobile-Chrome-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
new file mode 100644
index 0000000000..c6637a7b35
Binary files /dev/null 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-dark-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..7a1fb29918
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-dark-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..cfae370b77
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..300e83db27
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..d9ecb5245b
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-ios-ltr-Mobile-Safari-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
new file mode 100644
index 0000000000..990b069fa9
Binary files /dev/null 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
new file mode 100644
index 0000000000..e786ed10b3
Binary files /dev/null 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
new file mode 100644
index 0000000000..10c5f04ebd
Binary files /dev/null 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-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ffde4f4525
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-ltr-Mobile-Chrome-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
new file mode 100644
index 0000000000..9579e3c45e
Binary files /dev/null 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-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..2619038cc9
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..8633242bcd
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-rtl-Mobile-Chrome-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
new file mode 100644
index 0000000000..78ee691daf
Binary files /dev/null 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/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..049684a485
Binary files /dev/null and b/core/src/components/datetime/test/color/datetime.e2e.ts-snapshots/datetime-color-default-light-color-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/color/e2e.ts b/core/src/components/datetime/test/color/e2e.ts
deleted file mode 100644
index 143e33f4ec..0000000000
--- a/core/src/components/datetime/test/color/e2e.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('color', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/datetime/test/color?ionic:_testing=true',
-  });
-
-  const screenshotCompares = [];
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  const colorSelect = await page.find('ion-select');
-  const darkModeToggle = await page.find('ion-checkbox');
-
-  darkModeToggle.setProperty('checked', true);
-  await page.waitForChanges();
-  screenshotCompares.push(await page.compareScreenshot());
-
-  darkModeToggle.setProperty('checked', false);
-  colorSelect.setProperty('value', 'danger');
-  await page.waitForChanges();
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  darkModeToggle.setProperty('checked', true);
-  await page.waitForChanges();
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
diff --git a/core/src/components/datetime/test/color/index.html b/core/src/components/datetime/test/color/index.html
index 8b18e3067e..bb17ceb585 100644
--- a/core/src/components/datetime/test/color/index.html
+++ b/core/src/components/datetime/test/color/index.html
@@ -214,12 +214,12 @@
         <div class="grid">
           <div class="grid-item">
             <h2>Default</h2>
-            <ion-datetime show-default-title="true" show-default-buttons="true"></ion-datetime>
+            <ion-datetime value="2022-05-03" show-default-title="true" show-default-buttons="true"></ion-datetime>
           </div>
 
           <div class="grid-item">
             <h2>Custom</h2>
-            <ion-datetime show-default-title="true" show-default-buttons="true">
+            <ion-datetime value="2022-05-03" show-default-title="true" show-default-buttons="true">
               <ion-buttons slot="buttons">
                 <ion-button color="danger">Reset</ion-button>
                 <ion-button color="primary">Confirm</ion-button>
diff --git a/core/src/components/datetime/test/disable-dates/datetime.e2e.ts b/core/src/components/datetime/test/disable-dates/datetime.e2e.ts
new file mode 100644
index 0000000000..a280597fc5
--- /dev/null
+++ b/core/src/components/datetime/test/disable-dates/datetime.e2e.ts
@@ -0,0 +1,178 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+import type { E2EPage } from '@utils/test/playwright';
+
+const DISABLED_CALENDAR_DAY_SELECTOR = '.calendar-day[disabled]:not(.calendar-day-padding)';
+
+const queryAllDisabledDays = (page: E2EPage, datetimeSelector = 'ion-datetime') => {
+  return page.locator(`${datetimeSelector} ${DISABLED_CALENDAR_DAY_SELECTOR}`);
+};
+
+const queryAllWorkingMonthDisabledDays = (page: E2EPage, datetimeSelector = 'ion-datetime') => {
+  return page.locator(`${datetimeSelector} .calendar-month:nth-child(2) ${DISABLED_CALENDAR_DAY_SELECTOR}`);
+};
+
+test.describe('datetime: disable dates', () => {
+  /**
+   * We need to access testInfo, but Playwright
+   * requires that we destructure the first parameter.
+   */
+  // eslint-disable-next-line no-empty-pattern
+  test.beforeEach(({}, testInfo) => {
+    test.skip(testInfo.project.metadata.rtl === true, 'These tests do not check layout rendering functionality.');
+  });
+  test.describe('check return values', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.setContent('<ion-datetime value="2021-10-01"></ion-datetime>');
+    });
+
+    test.describe('when isDateEnabled returns true', () => {
+      test('calendar days should be enabled', async ({ page }) => {
+        const datetime = page.locator('ion-datetime');
+        await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.isDateEnabled = () => true));
+        await page.waitForChanges();
+
+        const disabledDays = queryAllDisabledDays(page);
+        expect(await disabledDays.count()).toBe(0);
+      });
+    });
+    test.describe('when isDateEnabled returns false', () => {
+      test('calendar days should be disabled', async ({ page }) => {
+        const datetime = page.locator('ion-datetime');
+        await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.isDateEnabled = () => false));
+        await page.waitForChanges();
+
+        const disabledDays = queryAllDisabledDays(page);
+        expect(await disabledDays.count()).toBe(91);
+      });
+    });
+    test.describe('when isDateEnabled returns undefined', () => {
+      test('calendar days should be disabled', async ({ page }) => {
+        const datetime = page.locator('ion-datetime');
+        await datetime.evaluate((el: HTMLIonDatetimeElement) => {
+          /**
+           * isDateEnabled expects a boolean, but we need
+           * to check what happens when users pass in unexpected
+           * values which is why we do the ts-ignore.
+           */
+          // @ts-ignore
+          el.isDateEnabled = () => {
+            undefined;
+          };
+        });
+
+        await page.waitForChanges();
+
+        const disabledDays = queryAllDisabledDays(page);
+        expect(await disabledDays.count()).toBe(91);
+      });
+    });
+    test.describe('when isDateEnabled returns null', () => {
+      test('calendar days should be disabled', async ({ page }) => {
+        const datetime = page.locator('ion-datetime');
+        await datetime.evaluate((el: HTMLIonDatetimeElement) => {
+          /**
+           * isDateEnabled expects a boolean, but we need
+           * to check what happens when users pass in unexpected
+           * values which is why we do the ts-ignore.
+           */
+          // @ts-ignore
+          el.isDateEnabled = () => null;
+        });
+
+        await page.waitForChanges();
+
+        const disabledDays = queryAllDisabledDays(page);
+        expect(await disabledDays.count()).toBe(91);
+      });
+    });
+    test.describe('when isDateEnabled throws an exception', () => {
+      test.beforeEach(async ({ page }) => {
+        const datetime = page.locator('ion-datetime');
+        await datetime.evaluate((el: HTMLIonDatetimeElement) => {
+          el.isDateEnabled = (dateIsoString: string) => {
+            const date = new Date(dateIsoString);
+
+            if (date.getUTCDate() === 10 && date.getUTCMonth() === 9 && date.getUTCFullYear() === 2021) {
+              // Throws an exception on October 10, 2021
+              // Expected behavior: the day should be enabled
+              throw new Error('Expected exception for e2e test.');
+            }
+            return false;
+          };
+        });
+      });
+      test('calendar days should be enabled', async ({ page }) => {
+        await page.waitForChanges();
+
+        const enabledDays = page.locator(
+          'ion-datetime .calendar-month:nth-child(2) .calendar-day:not([disabled]):not(.calendar-day-padding)'
+        );
+
+        expect(await enabledDays.count()).toBe(1);
+      });
+    });
+  });
+  test.describe('check example usages', () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/datetime/test/disable-dates');
+      await page.waitForSelector('.datetime-ready');
+    });
+
+    test('should disable a specific date', async ({ page }) => {
+      const disabledDay = queryAllDisabledDays(page, '#specificDate');
+
+      expect(disabledDay).toHaveText('10');
+    });
+
+    test('should disable specific days of the week', async ({ page }) => {
+      const disabledDays = queryAllWorkingMonthDisabledDays(page, '#weekends');
+
+      expect(await disabledDays.count()).toEqual(10);
+      expect(disabledDays).toHaveText(['2', '3', '9', '10', '16', '17', '23', '24', '30', '31']);
+    });
+
+    test('should disable a range of dates', async ({ page }) => {
+      const disabledDays = queryAllDisabledDays(page, '#dateRange');
+
+      expect(await disabledDays.count()).toEqual(11);
+      expect(disabledDays).toHaveText(['10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20']);
+    });
+
+    test('should disable a month', async ({ page }) => {
+      const disabledDays = queryAllDisabledDays(page, '#month');
+
+      expect(await disabledDays.count()).toBe(31);
+    });
+  });
+  test.describe('with a min date range', () => {
+    test('should not enable already disabled dates', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime min="2021-10-15" value="2021-10-16"></ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.isDateEnabled = () => true;
+        </script>
+      `);
+
+      const disabledDays = queryAllWorkingMonthDisabledDays(page);
+
+      expect(await disabledDays.count()).toBe(14);
+    });
+  });
+  test.describe('with a max date range', () => {
+    test('should not enable already disabled dates', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime max="2021-10-15" value="2021-10-16"></ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.isDateEnabled = () => true;
+        </script>
+      `);
+
+      const disabledDays = queryAllWorkingMonthDisabledDays(page);
+
+      expect(await disabledDays.count()).toBe(16);
+    });
+  });
+});
diff --git a/core/src/components/datetime/test/disable-dates/e2e.ts b/core/src/components/datetime/test/disable-dates/e2e.ts
deleted file mode 100644
index 4146e8ea20..0000000000
--- a/core/src/components/datetime/test/disable-dates/e2e.ts
+++ /dev/null
@@ -1,201 +0,0 @@
-import type { E2EPage } from '@stencil/core/testing';
-import { newE2EPage } from '@stencil/core/testing';
-
-const DISABLED_CALENDAR_DAY_SELECTOR = '.calendar-day[disabled]:not(.calendar-day-padding)';
-
-function queryDisabledDay(page: E2EPage, datetimeSelector = 'ion-datetime') {
-  return page.find(`${datetimeSelector} >>> ${DISABLED_CALENDAR_DAY_SELECTOR}`);
-}
-
-function queryAllDisabledDays(page: E2EPage, datetimeSelector = 'ion-datetime') {
-  return page.findAll(`${datetimeSelector} >>> ${DISABLED_CALENDAR_DAY_SELECTOR}`);
-}
-
-function queryAllWorkingMonthDisabledDays(page: E2EPage, datetimeSelector = 'ion-datetime') {
-  return page.findAll(`${datetimeSelector} >>> .calendar-month:nth-child(2) ${DISABLED_CALENDAR_DAY_SELECTOR}`);
-}
-
-describe('datetime: disable dates', () => {
-  describe('return values', () => {
-    let page: E2EPage;
-
-    beforeEach(async () => {
-      page = await newE2EPage({
-        html: '<ion-datetime value="2021-10-01"></ion-datetime>',
-      });
-    });
-
-    describe('when isDateEnabled returns true', () => {
-      it('calendar days should be enabled', async () => {
-        await page.$eval('ion-datetime', (el: any) => {
-          el.isDateEnabled = () => true;
-        });
-
-        await page.waitForChanges();
-
-        const disabledDays = await queryAllDisabledDays(page);
-
-        expect(disabledDays.length).toBe(0);
-      });
-    });
-
-    describe('when isDateEnabled returns false', () => {
-      it('calendar days should be disabled', async () => {
-        await page.$eval('ion-datetime', (el: any) => {
-          el.isDateEnabled = () => false;
-        });
-
-        await page.waitForChanges();
-
-        const disabledDays = await queryAllDisabledDays(page);
-
-        expect(disabledDays.length).toBe(91);
-      });
-    });
-
-    describe('when isDateEnabled throws an exception', () => {
-      beforeEach(async () => {
-        await page.$eval('ion-datetime', (el: any) => {
-          el.isDateEnabled = (dateIsoString: string) => {
-            const date = new Date(dateIsoString);
-
-            if (date.getUTCDate() === 10 && date.getUTCMonth() === 9 && date.getUTCFullYear() === 2021) {
-              // Throws an exception on October 10, 2021
-              // Expected behavior: the day should be enabled
-              throw new Error('Expected exception for e2e test.');
-            }
-            return false;
-          };
-        });
-      });
-
-      it('calendar days should be enabled', async () => {
-        await page.waitForChanges();
-
-        const enabledDays = await page.findAll(
-          'ion-datetime >>> .calendar-month:nth-child(2) .calendar-day:not([disabled]):not(.calendar-day-padding)'
-        );
-
-        expect(enabledDays.length).toBe(1);
-      });
-
-      it('should throw an exception to the developer', async () => {
-        const errors = [];
-
-        page.on('console', (ev) => {
-          if (ev.type() === 'error') {
-            errors.push(ev.text());
-          }
-        });
-
-        await page.waitForChanges();
-
-        expect(errors.length).toBe(1);
-        expect(errors[0]).toContain(
-          '[Ionic Error]: Exception thrown from provided `isDateEnabled` function. Please check your function and try again.'
-        );
-      });
-    });
-
-    describe('when isDateEnabled returns undefined', () => {
-      it('calendar days should be disabled', async () => {
-        await page.$eval('ion-datetime', (el: any) => {
-          el.isDateEnabled = () => undefined;
-        });
-
-        await page.waitForChanges();
-
-        const disabledDays = await queryAllDisabledDays(page);
-
-        expect(disabledDays.length).toBe(91);
-      });
-    });
-
-    describe('when isDateEnabled returns null', () => {
-      it('calendar days should be disabled', async () => {
-        await page.$eval('ion-datetime', (el: any) => {
-          el.isDateEnabled = () => null;
-        });
-
-        await page.waitForChanges();
-
-        const disabledDays = await queryAllDisabledDays(page);
-
-        expect(disabledDays.length).toBe(91);
-      });
-    });
-  });
-
-  describe('examples', () => {
-    let page: E2EPage;
-
-    beforeEach(async () => {
-      page = await newE2EPage({
-        url: '/src/components/datetime/test/disable-dates?ionic:_testing=true',
-      });
-    });
-
-    it('should disable a specific date', async () => {
-      const disabledDay = await queryDisabledDay(page, '#specificDate');
-
-      expect(disabledDay.textContent).toBe('10');
-    });
-
-    it('should disable specific days of the week', async () => {
-      const disabledDays = await queryAllWorkingMonthDisabledDays(page, '#weekends');
-      const disabledValues = disabledDays.map((d) => d.textContent);
-
-      expect(disabledValues).toEqual(['2', '3', '9', '10', '16', '17', '23', '24', '30', '31']);
-    });
-
-    it('should disable a range of dates', async () => {
-      const disabledDays = await queryAllDisabledDays(page, '#dateRange');
-      const disabledValues = disabledDays.map((d) => d.textContent);
-
-      expect(disabledValues).toEqual(['10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20']);
-    });
-
-    it('should disable a month', async () => {
-      const disabledDays = await queryAllDisabledDays(page, '#month');
-      const disabledValues = disabledDays.map((d) => d.textContent);
-
-      expect(disabledValues.length).toBe(31);
-    });
-  });
-
-  describe('with a min date range', () => {
-    it('should not enable already disabled dates', async () => {
-      const page = await newE2EPage({
-        html: `
-          <ion-datetime min="2021-10-15" value="2021-10-16"></ion-datetime>
-          <script>
-            const datetime = document.querySelector('ion-datetime');
-            datetime.isDateEnabled = () => true;
-          </script>
-        `,
-      });
-
-      const disabledDays = await queryAllWorkingMonthDisabledDays(page);
-
-      expect(disabledDays.length).toBe(14);
-    });
-  });
-
-  describe('with a max date range', () => {
-    it('should not enable already disabled dates', async () => {
-      const page = await newE2EPage({
-        html: `
-          <ion-datetime max="2021-10-15" value="2021-10-16"></ion-datetime>
-          <script>
-            const datetime = document.querySelector('ion-datetime');
-            datetime.isDateEnabled = () => true;
-          </script>
-        `,
-      });
-
-      const disabledDays = await queryAllWorkingMonthDisabledDays(page);
-
-      expect(disabledDays.length).toBe(16);
-    });
-  });
-});
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts b/core/src/components/datetime/test/display/datetime.e2e.ts
new file mode 100644
index 0000000000..6c2954344a
--- /dev/null
+++ b/core/src/components/datetime/test/display/datetime.e2e.ts
@@ -0,0 +1,124 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('datetime: display', () => {
+  test.describe('datetime: rendering', () => {
+    test.describe('fixed sizes', () => {
+      test('date-time should not have any visual regressions', async ({ page }) => {
+        await page.setContent(`
+          <ion-datetime value="2022-02-22T16:30:00" presentation="date-time"></ion-datetime>
+        `);
+        const datetime = page.locator('ion-datetime');
+        expect(await datetime.screenshot()).toMatchSnapshot(
+          `datetime-display-date-time-${page.getSnapshotSettings()}.png`
+        );
+      });
+      test('time-date should not have any visual regressions', async ({ page }) => {
+        await page.setContent(`
+          <ion-datetime value="2022-02-22T16:30:00" presentation="time-date"></ion-datetime>
+        `);
+        const datetime = page.locator('ion-datetime');
+        expect(await datetime.screenshot()).toMatchSnapshot(
+          `datetime-display-time-date-${page.getSnapshotSettings()}.png`
+        );
+      });
+      test('time should not have any visual regressions', async ({ page }) => {
+        await page.setContent(`
+          <ion-datetime value="2022-02-22T16:30:00" presentation="time"></ion-datetime>
+        `);
+        const datetime = page.locator('ion-datetime');
+        expect(await datetime.screenshot()).toMatchSnapshot(`datetime-display-time-${page.getSnapshotSettings()}.png`);
+      });
+      test('date should not have any visual regressions', async ({ page }) => {
+        await page.setContent(`
+          <ion-datetime value="2022-02-22T16:30:00" presentation="date"></ion-datetime>
+        `);
+        const datetime = page.locator('ion-datetime');
+        expect(await datetime.screenshot()).toMatchSnapshot(`datetime-display-date-${page.getSnapshotSettings()}.png`);
+      });
+    });
+    test.describe('cover sizes', () => {
+      test.beforeEach(async ({ page }) => {
+        /**
+         * We need to take a screenshot of the entire page
+         * here as we want to test that the datetime fills
+         * the entire screen.
+         */
+        await page.setViewportSize({ width: 500, height: 500 });
+      });
+      test('date-time should not have any visual regressions', async ({ page }) => {
+        await page.setContent(`
+          <ion-datetime size="cover" value="2022-02-22T16:30:00" presentation="date-time"></ion-datetime>
+        `);
+        const datetime = page.locator('ion-datetime');
+        expect(await datetime.screenshot()).toMatchSnapshot(
+          `datetime-display-cover-date-time-${page.getSnapshotSettings()}.png`
+        );
+      });
+      test('time-date should not have any visual regressions', async ({ page }) => {
+        await page.setContent(`
+          <ion-datetime size="cover" value="2022-02-22T16:30:00" presentation="time-date"></ion-datetime>
+        `);
+        const datetime = page.locator('ion-datetime');
+        expect(await datetime.screenshot()).toMatchSnapshot(
+          `datetime-display-cover-time-date-${page.getSnapshotSettings()}.png`
+        );
+      });
+      test('time should not have any visual regressions', async ({ page }) => {
+        await page.setContent(`
+          <ion-datetime size="cover" value="2022-02-22T16:30:00" presentation="time"></ion-datetime>
+        `);
+        const datetime = page.locator('ion-datetime');
+        expect(await datetime.screenshot()).toMatchSnapshot(
+          `datetime-display-cover-time-${page.getSnapshotSettings()}.png`
+        );
+      });
+      test('date should not have any visual regressions', async ({ page }) => {
+        await page.setContent(`
+          <ion-datetime size="cover" value="2022-02-22T16:30:00" presentation="date"></ion-datetime>
+        `);
+        const datetime = page.locator('ion-datetime');
+        expect(await datetime.screenshot()).toMatchSnapshot(
+          `datetime-display-cover-date-${page.getSnapshotSettings()}.png`
+        );
+      });
+    });
+  });
+  test.describe('datetime: switch presentations', () => {
+    test('month selection should work after changing presentation', async ({ page }) => {
+      await page.goto('/src/components/datetime/test/display');
+      const ionWorkingPartsDidChange = await page.spyOnEvent('ionWorkingPartsDidChange');
+      await page.waitForSelector('.datetime-ready');
+
+      const select = page.locator('select#presentation');
+
+      await select.selectOption('date-time');
+      await page.waitForChanges();
+
+      await select.selectOption('time-date');
+      await page.waitForChanges();
+
+      const nextMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button + ion-button');
+      await nextMonthButton.click();
+      await page.waitForChanges();
+
+      await ionWorkingPartsDidChange.next();
+
+      const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
+
+      expect(calendarMonthYear).toHaveText('March 2022');
+
+      // ensure it still works if presentation is changed more than once
+      await select.selectOption('date-time');
+      await page.waitForChanges();
+
+      const prevMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button:first-child');
+      await prevMonthButton.click();
+      await page.waitForChanges();
+
+      await ionWorkingPartsDidChange.next();
+
+      expect(calendarMonthYear).toHaveText('February 2022');
+    });
+  });
+});
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..b949dc3760
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..68927b948a
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..329f1a4d20
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-ios-ltr-Mobile-Safari-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
new file mode 100644
index 0000000000..b949dc3760
Binary files /dev/null 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
new file mode 100644
index 0000000000..68927b948a
Binary files /dev/null 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
new file mode 100644
index 0000000000..329f1a4d20
Binary files /dev/null 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-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..b949dc3760
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-ltr-Mobile-Chrome-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
new file mode 100644
index 0000000000..68927b948a
Binary files /dev/null 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-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..329f1a4d20
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..b949dc3760
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-rtl-Mobile-Chrome-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
new file mode 100644
index 0000000000..68927b948a
Binary files /dev/null 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-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..329f1a4d20
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c17cee712e
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..89b0647318
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..64696a0404
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-ios-ltr-Mobile-Safari-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
new file mode 100644
index 0000000000..c17cee712e
Binary files /dev/null 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
new file mode 100644
index 0000000000..89b0647318
Binary files /dev/null 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
new file mode 100644
index 0000000000..64696a0404
Binary files /dev/null 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-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c17cee712e
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-ltr-Mobile-Chrome-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
new file mode 100644
index 0000000000..89b0647318
Binary files /dev/null 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-date-time-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..64696a0404
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c17cee712e
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..89b0647318
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-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-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..64696a0404
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-date-time-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..879017fc1a
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..3d9ce197f6
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-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-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..153b40abc5
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-ios-ltr-Mobile-Safari-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
new file mode 100644
index 0000000000..879017fc1a
Binary files /dev/null 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
new file mode 100644
index 0000000000..3d9ce197f6
Binary files /dev/null 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
new file mode 100644
index 0000000000..153b40abc5
Binary files /dev/null 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-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..879017fc1a
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-ltr-Mobile-Chrome-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
new file mode 100644
index 0000000000..3d9ce197f6
Binary files /dev/null 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-date-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..153b40abc5
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..879017fc1a
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..3d9ce197f6
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..153b40abc5
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-date-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..bb22daa4bd
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..5396d180b9
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..95b3fb42b7
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..bb22daa4bd
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..5396d180b9
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-ios-rtl-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
new file mode 100644
index 0000000000..95b3fb42b7
Binary files /dev/null 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-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..bb22daa4bd
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-ltr-Mobile-Chrome-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
new file mode 100644
index 0000000000..5396d180b9
Binary files /dev/null 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-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..95b3fb42b7
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..bb22daa4bd
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-rtl-Mobile-Chrome-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
new file mode 100644
index 0000000000..5396d180b9
Binary files /dev/null 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-cover-time-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..95b3fb42b7
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-cover-time-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..3061588792
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..9c60ace057
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..8f6ca09782
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-ios-ltr-Mobile-Safari-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
new file mode 100644
index 0000000000..3061588792
Binary files /dev/null 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
new file mode 100644
index 0000000000..9c60ace057
Binary files /dev/null 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
new file mode 100644
index 0000000000..8f6ca09782
Binary files /dev/null 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-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..3061588792
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-ltr-Mobile-Chrome-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
new file mode 100644
index 0000000000..9c60ace057
Binary files /dev/null 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-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..8f6ca09782
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..3061588792
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-rtl-Mobile-Chrome-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
new file mode 100644
index 0000000000..9c60ace057
Binary files /dev/null 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-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..8f6ca09782
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..590cebde37
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..944e456d2a
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..fe1ef4229a
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-ios-ltr-Mobile-Safari-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
new file mode 100644
index 0000000000..590cebde37
Binary files /dev/null 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
new file mode 100644
index 0000000000..944e456d2a
Binary files /dev/null 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
new file mode 100644
index 0000000000..fe1ef4229a
Binary files /dev/null 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-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..590cebde37
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-ltr-Mobile-Chrome-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
new file mode 100644
index 0000000000..944e456d2a
Binary files /dev/null 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-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..fe1ef4229a
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..590cebde37
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-rtl-Mobile-Chrome-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
new file mode 100644
index 0000000000..944e456d2a
Binary files /dev/null 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-date-time-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..fe1ef4229a
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-date-time-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..25d9fef284
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..b6df6391ac
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..7cf621630f
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-ios-ltr-Mobile-Safari-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
new file mode 100644
index 0000000000..25d9fef284
Binary files /dev/null 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
new file mode 100644
index 0000000000..b6df6391ac
Binary files /dev/null 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
new file mode 100644
index 0000000000..7cf621630f
Binary files /dev/null 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-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..25d9fef284
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-ltr-Mobile-Chrome-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
new file mode 100644
index 0000000000..b6df6391ac
Binary files /dev/null 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-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..7cf621630f
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..25d9fef284
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-rtl-Mobile-Chrome-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
new file mode 100644
index 0000000000..b6df6391ac
Binary files /dev/null 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-date-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..7cf621630f
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-date-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e9766d8edc
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..2b812e32f8
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..a2e75534db
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e9766d8edc
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..2b812e32f8
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-ios-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
new file mode 100644
index 0000000000..a2e75534db
Binary files /dev/null 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/display/datetime.e2e.ts-snapshots/datetime-display-time-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e9766d8edc
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..2b812e32f8
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..a2e75534db
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e9766d8edc
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..2b812e32f8
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..a2e75534db
Binary files /dev/null and b/core/src/components/datetime/test/display/datetime.e2e.ts-snapshots/datetime-display-time-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/display/e2e.ts b/core/src/components/datetime/test/display/e2e.ts
deleted file mode 100644
index 181cb29e4a..0000000000
--- a/core/src/components/datetime/test/display/e2e.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('display', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/datetime/test/display?ionic:_testing=true',
-  });
-
-  const screenshotCompares = [];
-
-  await page.select('#presentation', 'date-time');
-  await page.waitForChanges();
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  await page.select('#presentation', 'time-date');
-  await page.waitForChanges();
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  await page.select('#presentation', 'time');
-  await page.waitForChanges();
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  await page.select('#presentation', 'date');
-  await page.waitForChanges();
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  await page.select('#size', 'cover');
-  await page.select('#presentation', 'date-time');
-  await page.waitForChanges();
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  await page.select('#presentation', 'time-date');
-  await page.waitForChanges();
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  await page.select('#presentation', 'time');
-  await page.waitForChanges();
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  await page.select('#presentation', 'date');
-  await page.waitForChanges();
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
-
-test('month selection should work after changing presentation', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/datetime/test/display?ionic:_testing=true',
-  });
-  const ionWorkingPartsDidChange = await page.spyOnEvent('ionWorkingPartsDidChange', 'document');
-  let calendarMonthYear;
-
-  await page.select('#presentation', 'date-time');
-  await page.waitForChanges();
-
-  await page.select('#presentation', 'time-date');
-  await page.waitForChanges();
-
-  const nextMonthButton = await page.find('ion-datetime >>> .calendar-next-prev ion-button + ion-button');
-  await nextMonthButton.click();
-  await page.waitForChanges();
-
-  await ionWorkingPartsDidChange.next();
-
-  calendarMonthYear = await page.find('ion-datetime >>> .calendar-month-year');
-
-  expect(calendarMonthYear.textContent).toContain('March 2022');
-
-  // ensure it still works if presentation is changed more than once
-  await page.select('#presentation', 'date-time');
-  await page.waitForChanges();
-
-  const prevMonthButton = await page.find('ion-datetime >>> .calendar-next-prev ion-button:first-child');
-  await prevMonthButton.click();
-  await page.waitForChanges();
-
-  await ionWorkingPartsDidChange.next();
-
-  calendarMonthYear = await page.find('ion-datetime >>> .calendar-month-year');
-
-  expect(calendarMonthYear.textContent).toContain('February 2022');
-});
diff --git a/core/src/components/datetime/test/display/index.html b/core/src/components/datetime/test/display/index.html
index 97c1381e8f..5d8694d580 100644
--- a/core/src/components/datetime/test/display/index.html
+++ b/core/src/components/datetime/test/display/index.html
@@ -36,13 +36,13 @@
 
     <br /><br />
 
-    <ion-datetime value="2022-02-22"></ion-datetime>
+    <ion-datetime value="2022-02-22T16:30:00"></ion-datetime>
 
     <script>
       const datetime = document.querySelector('ion-datetime');
 
       const mutationObserver = new MutationObserver(() => {
-        document.dispatchEvent(new CustomEvent('ionWorkingPartsDidChange'));
+        window.dispatchEvent(new CustomEvent('ionWorkingPartsDidChange'));
       });
 
       const initCalendarMonthChangeObserver = async () => {
diff --git a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts
new file mode 100644
index 0000000000..8839f56458
--- /dev/null
+++ b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts
@@ -0,0 +1,11 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('datetime: first day of the week', () => {
+  test('should set the first day of the week correctly', async ({ page }) => {
+    await page.goto('/src/components/datetime/test/first-day-of-week');
+
+    const datetime = page.locator('ion-datetime');
+    expect(await datetime.screenshot()).toMatchSnapshot(`datetime-day-of-week-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..39ab01cda6
Binary files /dev/null and b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-ltr-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-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..2d685ca486
Binary files /dev/null and b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-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-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..aac11845e7
Binary files /dev/null and b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-ios-ltr-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
new file mode 100644
index 0000000000..d1d08d3935
Binary files /dev/null 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
new file mode 100644
index 0000000000..d21a2b8393
Binary files /dev/null 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
new file mode 100644
index 0000000000..e7622dd7cf
Binary files /dev/null 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-Chrome-linux.png b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1bc6525362
Binary files /dev/null and b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-md-ltr-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-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
new file mode 100644
index 0000000000..49a94eafc6
Binary files /dev/null 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-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..a6c7ae325e
Binary files /dev/null and b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-md-ltr-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-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..5fc82cea7e
Binary files /dev/null and b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-md-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-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
new file mode 100644
index 0000000000..329e0a5ff5
Binary files /dev/null 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/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..156a09aa78
Binary files /dev/null and b/core/src/components/datetime/test/first-day-of-week/datetime.e2e.ts-snapshots/datetime-day-of-week-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/first-day-of-week/e2e.ts b/core/src/components/datetime/test/first-day-of-week/e2e.ts
deleted file mode 100644
index 82b20d597f..0000000000
--- a/core/src/components/datetime/test/first-day-of-week/e2e.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('first-day-of-week', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/datetime/test/first-day-of-week?ionic:_testing=true',
-  });
-
-  const screenshotCompares = [];
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
diff --git a/core/src/components/datetime/test/first-day-of-week/index.html b/core/src/components/datetime/test/first-day-of-week/index.html
index 895e527c9e..7b79ec5977 100644
--- a/core/src/components/datetime/test/first-day-of-week/index.html
+++ b/core/src/components/datetime/test/first-day-of-week/index.html
@@ -48,7 +48,7 @@
         <div class="grid">
           <div class="grid-item">
             <h2>Default</h2>
-            <ion-datetime first-day-of-week="1"></ion-datetime>
+            <ion-datetime first-day-of-week="1" value="2022-05-03"></ion-datetime>
             <ion-button onclick="increase()">Increase firstDayOfWeek</ion-button>
             <div>
               <span>FirstDayOfWeek: <span id="start-of-week">1</span></span>
diff --git a/core/src/components/datetime/test/hour-cycle/datetime.e2e.ts b/core/src/components/datetime/test/hour-cycle/datetime.e2e.ts
new file mode 100644
index 0000000000..d4496335b0
--- /dev/null
+++ b/core/src/components/datetime/test/hour-cycle/datetime.e2e.ts
@@ -0,0 +1,21 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('datetime: hour cycle', () => {
+  test('should set the h23 hour cycle correctly', async ({ page }) => {
+    await page.setContent(`
+      <ion-datetime hour-cycle="h23" value="2022-01-01T16:30:00"></ion-datetime>
+    `);
+
+    const timeButton = page.locator('ion-datetime .time-body');
+    expect(timeButton).toHaveText('16:30');
+  });
+  test('should set the h12 hour cycle correctly', async ({ page }) => {
+    await page.setContent(`
+      <ion-datetime hour-cycle="h12" value="2022-01-01T16:30:00"></ion-datetime>
+    `);
+
+    const timeButton = page.locator('ion-datetime .time-body');
+    expect(timeButton).toHaveText('4:30 PM');
+  });
+});
diff --git a/core/src/components/datetime/test/hour-cycle/e2e.ts b/core/src/components/datetime/test/hour-cycle/e2e.ts
deleted file mode 100644
index 9c1c3ae6c1..0000000000
--- a/core/src/components/datetime/test/hour-cycle/e2e.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('hour-cycle', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/datetime/test/hour-cycle?ionic:_testing=true',
-  });
-
-  const screenshotCompares = [];
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
diff --git a/core/src/components/datetime/test/minmax/datetime.e2e.ts b/core/src/components/datetime/test/minmax/datetime.e2e.ts
index 2b66f462c1..ad3996f640 100644
--- a/core/src/components/datetime/test/minmax/datetime.e2e.ts
+++ b/core/src/components/datetime/test/minmax/datetime.e2e.ts
@@ -47,4 +47,62 @@ test.describe('datetime: minmax', () => {
     expect(nextButton).toBeDisabled();
     expect(prevButton).toBeEnabled();
   });
+  test('datetime: minmax months disabled', async ({ page }) => {
+    await page.goto('/src/components/datetime/test/minmax');
+    const calendarMonths = page.locator('ion-datetime#inside .calendar-month');
+
+    await page.waitForSelector('.datetime-ready');
+
+    expect(calendarMonths.nth(0)).not.toHaveClass(/calendar-month-disabled/);
+    expect(calendarMonths.nth(1)).not.toHaveClass(/calendar-month-disabled/);
+    expect(calendarMonths.nth(2)).toHaveClass(/calendar-month-disabled/);
+  });
+
+  test('datetime: minmax navigation disabled', async ({ page }) => {
+    await page.goto('/src/components/datetime/test/minmax');
+    await page.waitForSelector('.datetime-ready');
+
+    const navButtons = page.locator('ion-datetime#outside .calendar-next-prev ion-button');
+
+    expect(navButtons.nth(0)).toHaveAttribute('disabled', '');
+    expect(navButtons.nth(1)).toHaveAttribute('disabled', '');
+  });
+  test('datetime: min including day should not disable month', async ({ page }) => {
+    await page.goto('/src/components/datetime/test/minmax');
+    await page.waitForSelector('.datetime-ready');
+
+    const calendarMonths = page.locator('ion-datetime#min-with-day .calendar-month');
+
+    expect(calendarMonths.nth(0)).toHaveClass(/calendar-month-disabled/);
+    expect(calendarMonths.nth(1)).not.toHaveClass(/calendar-month-disabled/);
+    expect(calendarMonths.nth(2)).not.toHaveClass(/calendar-month-disabled/);
+  });
+  test.describe('when the datetime does not have a value', () => {
+    test('all time values should be available for selection', async ({ page }) => {
+      /**
+       * When the datetime does not have an initial value and today falls outside of
+       * the specified min and max values, all times values should be available for selection.
+       */
+      await page.setContent(`
+        <ion-datetime min="2022-04-22T04:10:00" max="2022-05-21T21:30:00"></ion-datetime>
+    `);
+
+      await page.waitForSelector('.datetime-ready');
+
+      const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+
+      await page.click('.time-body');
+      await ionPopoverDidPresent.next();
+
+      const hours = page.locator(
+        'ion-popover ion-picker-column-internal:nth-child(1) .picker-item:not(.picker-item-empty)'
+      );
+      const minutes = page.locator(
+        'ion-popover ion-picker-column-internal:nth-child(2) .picker-item:not(.picker-item-empty)'
+      );
+
+      expect(await hours.count()).toBe(12);
+      expect(await minutes.count()).toBe(60);
+    });
+  });
 });
diff --git a/core/src/components/datetime/test/minmax/e2e.ts b/core/src/components/datetime/test/minmax/e2e.ts
deleted file mode 100644
index 321db8787b..0000000000
--- a/core/src/components/datetime/test/minmax/e2e.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('datetime: minmax', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/datetime/test/minmax?ionic:_testing=true',
-  });
-
-  const screenshotCompares = [];
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  const monthYearItem = await page.find('ion-datetime#inside >>> .calendar-month-year');
-
-  await monthYearItem.click();
-  await page.waitForChanges();
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
-
-test('datetime: minmax months disabled', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/datetime/test/minmax?ionic:_testing=true',
-  });
-
-  const calendarMonths = await page.findAll('ion-datetime#inside >>> .calendar-month');
-
-  await page.waitForChanges();
-
-  expect(calendarMonths[0]).not.toHaveClass('calendar-month-disabled');
-  expect(calendarMonths[1]).not.toHaveClass('calendar-month-disabled');
-  expect(calendarMonths[2]).toHaveClass('calendar-month-disabled');
-});
-
-test('datetime: minmax navigation disabled', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/datetime/test/minmax?ionic:_testing=true',
-  });
-
-  const navButtons = await page.findAll('ion-datetime#outside >>> .calendar-next-prev ion-button');
-
-  expect(navButtons[0]).toHaveAttribute('disabled');
-  expect(navButtons[1]).toHaveAttribute('disabled');
-});
-
-test('datetime: min including day should not disable month', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/datetime/test/minmax?ionic:_testing=true',
-  });
-
-  const calendarMonths = await page.findAll('ion-datetime#min-with-day >>> .calendar-month');
-
-  await page.waitForChanges();
-
-  expect(calendarMonths[0]).toHaveClass('calendar-month-disabled');
-  expect(calendarMonths[1]).not.toHaveClass('calendar-month-disabled');
-  expect(calendarMonths[2]).not.toHaveClass('calendar-month-disabled');
-});
diff --git a/core/src/components/datetime/test/month-year-picker/datetime.e2e.ts b/core/src/components/datetime/test/month-year-picker/datetime.e2e.ts
index 942034b747..4aa7a3d427 100644
--- a/core/src/components/datetime/test/month-year-picker/datetime.e2e.ts
+++ b/core/src/components/datetime/test/month-year-picker/datetime.e2e.ts
@@ -4,6 +4,7 @@ import { test } from '@utils/test/playwright';
 test.describe('datetime: month-year picker', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/src/components/datetime/test/month-year-picker');
+    await page.waitForSelector('.datetime-ready');
   });
 
   test('should hide the footer when picker is open', async ({ page }) => {
diff --git a/core/src/components/datetime/test/parse.spec.ts b/core/src/components/datetime/test/parse.spec.ts
index 2ede204529..f69362c4ab 100644
--- a/core/src/components/datetime/test/parse.spec.ts
+++ b/core/src/components/datetime/test/parse.spec.ts
@@ -1,4 +1,4 @@
-import { getPartsFromCalendarDay } from '../utils/parse';
+import { clampDate, getPartsFromCalendarDay } from '../utils/parse';
 
 describe('getPartsFromCalendarDay()', () => {
   it('should extract DatetimeParts from a calendar day element', () => {
@@ -18,3 +18,46 @@ describe('getPartsFromCalendarDay()', () => {
 });
 
 // TODO: parseDate()
+
+describe('clampDate()', () => {
+  const minParts = {
+    year: 2021,
+    month: 6,
+    day: 5,
+  };
+
+  const maxParts = {
+    year: 2021,
+    month: 8,
+    day: 19,
+  };
+  it('should return the max month when the value is greater than the max', () => {
+    const dateParts = {
+      year: 2022,
+      month: 5,
+      day: 24,
+    };
+    const value = clampDate(dateParts, minParts, maxParts);
+    expect(value).toStrictEqual(maxParts);
+  });
+
+  it('should return the min month when the value is less than the min', () => {
+    const dateParts = {
+      year: 2020,
+      month: 5,
+      day: 24,
+    };
+    const value = clampDate(dateParts, minParts, maxParts);
+    expect(value).toStrictEqual(minParts);
+  });
+
+  it('should return the value when the value is greater than the min and less than the max', () => {
+    const dateParts = {
+      year: 2021,
+      month: 7,
+      day: 10,
+    };
+    const value = clampDate(dateParts, minParts, maxParts);
+    expect(value).toStrictEqual(dateParts);
+  });
+});
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts b/core/src/components/datetime/test/position/datetime.e2e.ts
new file mode 100644
index 0000000000..30c21b4e2f
--- /dev/null
+++ b/core/src/components/datetime/test/position/datetime.e2e.ts
@@ -0,0 +1,24 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('datetime: position', () => {
+  test('should position the time picker relative to the click target', async ({ page }) => {
+    await page.goto('/src/components/datetime/test/position');
+    const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
+
+    const openDateTimeBtn = page.locator('ion-button#open-datetime');
+    await openDateTimeBtn.click();
+
+    await ionPopoverDidPresent.next();
+    await page.waitForSelector('.datetime-ready');
+
+    expect(await page.screenshot()).toMatchSnapshot(`datetime-position-base-${page.getSnapshotSettings()}.png`);
+
+    const timepickerBtn = page.locator('ion-datetime .time-body');
+    await timepickerBtn.click();
+
+    await ionPopoverDidPresent.next();
+
+    expect(await page.screenshot()).toMatchSnapshot(`datetime-position-popover-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ab59eef4a6
Binary files /dev/null and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Chrome-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
new file mode 100644
index 0000000000..015e9fe32f
Binary files /dev/null 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-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4970a75ca6
Binary files /dev/null and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-ios-ltr-Mobile-Safari-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
new file mode 100644
index 0000000000..d0266e8454
Binary files /dev/null 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
new file mode 100644
index 0000000000..ef6677929e
Binary files /dev/null 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
new file mode 100644
index 0000000000..97c3bd027f
Binary files /dev/null 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-base-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..66678bae00
Binary files /dev/null and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6d46659dd4
Binary files /dev/null and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..35aec7bb7e
Binary files /dev/null and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..bcd0690aa3
Binary files /dev/null and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..e97e9dee36
Binary files /dev/null and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..b1ab422ce7
Binary files /dev/null and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-base-md-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-Chrome-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..d954e414a8
Binary files /dev/null and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Chrome-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
new file mode 100644
index 0000000000..5e9b8ac937
Binary files /dev/null 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-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..932fc58bb7
Binary files /dev/null and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-ios-ltr-Mobile-Safari-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
new file mode 100644
index 0000000000..18b1311e52
Binary files /dev/null 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
new file mode 100644
index 0000000000..410f1d1f39
Binary files /dev/null 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
new file mode 100644
index 0000000000..f15d3f3929
Binary files /dev/null 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/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..349912478e
Binary files /dev/null and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..8bec12b156
Binary files /dev/null and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..2d64216953
Binary files /dev/null and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Chrome-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..8b401e5bb9
Binary files /dev/null and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Firefox-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..288e2813c5
Binary files /dev/null and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Safari-linux.png b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..cc50ca4b20
Binary files /dev/null and b/core/src/components/datetime/test/position/datetime.e2e.ts-snapshots/datetime-position-popover-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/position/e2e.ts b/core/src/components/datetime/test/position/e2e.ts
deleted file mode 100644
index efcfc4d5c7..0000000000
--- a/core/src/components/datetime/test/position/e2e.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-describe('datetime: position', () => {
-  it('should position the time picker relative to the click target', async () => {
-    const page = await newE2EPage({
-      url: '/src/components/datetime/test/position?ionic:_testing=true',
-    });
-    const screenshotCompares = [];
-
-    const openDateTimeBtn = await page.find('ion-button');
-    await openDateTimeBtn.click();
-
-    screenshotCompares.push(await page.compareScreenshot());
-
-    const timepickerBtn = await page.find('ion-datetime >>> .time-body');
-    await timepickerBtn.click();
-
-    screenshotCompares.push(await page.compareScreenshot());
-
-    for (const screenshotCompare of screenshotCompares) {
-      expect(screenshotCompare).toMatchScreenshot();
-    }
-  });
-});
diff --git a/core/src/components/datetime/test/position/index.html b/core/src/components/datetime/test/position/index.html
index 81b003e5a3..3da97aa417 100644
--- a/core/src/components/datetime/test/position/index.html
+++ b/core/src/components/datetime/test/position/index.html
@@ -8,6 +8,11 @@
     <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>
+    <style>
+      ion-popover.datetime-popover {
+        --min-width: 300px;
+      }
+    </style>
   </head>
 
   <body>
@@ -18,9 +23,9 @@
         </ion-toolbar>
       </ion-header>
       <ion-content class="ion-padding">
-        <ion-button onclick="presentPopover(defaultPopover, event)">Present Popover</ion-button>
+        <ion-button id="open-datetime" onclick="presentPopover(defaultPopover, event)">Present Popover</ion-button>
         <ion-popover class="datetime-popover" id="default-popover">
-          <ion-datetime></ion-datetime>
+          <ion-datetime value="2022-05-03"></ion-datetime>
         </ion-popover>
       </ion-content>
 
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts b/core/src/components/datetime/test/presentation/datetime.e2e.ts
index 94ad22e9c4..8f254747c2 100644
--- a/core/src/components/datetime/test/presentation/datetime.e2e.ts
+++ b/core/src/components/datetime/test/presentation/datetime.e2e.ts
@@ -27,6 +27,62 @@ test.describe('datetime: presentation', () => {
       );
     }
   });
+
+  test('presentation: time: should emit ionChange', async ({ page }) => {
+    await page.goto(`/src/components/datetime/test/presentation`);
+
+    const ionChangeSpy = await page.spyOnEvent('ionChange');
+    await page.locator('select').selectOption('time');
+    await page.waitForChanges();
+
+    await page.locator('text=AM').click();
+
+    await ionChangeSpy.next();
+
+    expect(ionChangeSpy.length).toBe(1);
+  });
+
+  test('presentation: month-year: should emit ionChange', async ({ page }) => {
+    await page.goto(`/src/components/datetime/test/presentation`);
+
+    const ionChangeSpy = await page.spyOnEvent('ionChange');
+    await page.locator('select').selectOption('month-year');
+    await page.waitForChanges();
+
+    await page.locator('text=April').click();
+
+    await ionChangeSpy.next();
+
+    expect(ionChangeSpy.length).toBe(1);
+  });
+
+  test('presentation: month: should emit ionChange', async ({ page }) => {
+    await page.goto(`/src/components/datetime/test/presentation`);
+
+    const ionChangeSpy = await page.spyOnEvent('ionChange');
+    await page.locator('select').selectOption('month');
+    await page.waitForChanges();
+
+    await page.locator('text=April').click();
+
+    await ionChangeSpy.next();
+
+    expect(ionChangeSpy.length).toBe(1);
+  });
+
+  test('presentation: year: should emit ionChange', async ({ page }) => {
+    await page.goto(`/src/components/datetime/test/presentation`);
+
+    const ionChangeSpy = await page.spyOnEvent('ionChange');
+    await page.locator('select').selectOption('year');
+    await page.waitForChanges();
+
+    await page.locator('text=2021').click();
+
+    await ionChangeSpy.next();
+
+    expect(ionChangeSpy.length).toBe(1);
+  });
 });
 
 test.describe('datetime: presentation: time', () => {
diff --git a/core/src/components/datetime/test/set-value/datetime.e2e.ts b/core/src/components/datetime/test/set-value/datetime.e2e.ts
new file mode 100644
index 0000000000..ae83e80e81
--- /dev/null
+++ b/core/src/components/datetime/test/set-value/datetime.e2e.ts
@@ -0,0 +1,27 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('datetime: set-value', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/src/components/datetime/test/set-value');
+    await page.waitForSelector('.datetime-ready');
+  });
+  test('should update the active date', async ({ page }) => {
+    const datetime = page.locator('ion-datetime');
+    await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-11-25T12:40:00.000Z'));
+
+    await page.waitForChanges();
+
+    const activeDate = page.locator('ion-datetime .calendar-day-active');
+    expect(activeDate).toHaveText('25');
+  });
+  test('should update the active time', async ({ page }) => {
+    const datetime = page.locator('ion-datetime');
+    await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-11-25T12:40:00.000Z'));
+
+    await page.waitForChanges();
+
+    const activeDate = page.locator('ion-datetime .time-body');
+    expect(activeDate).toHaveText('12:40 PM');
+  });
+});
diff --git a/core/src/components/datetime/test/set-value/e2e.ts b/core/src/components/datetime/test/set-value/e2e.ts
deleted file mode 100644
index 9649384cee..0000000000
--- a/core/src/components/datetime/test/set-value/e2e.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import type { E2EPage } from '@stencil/core/testing';
-import { newE2EPage } from '@stencil/core/testing';
-
-describe('datetime: setting the value', () => {
-  let page: E2EPage;
-
-  beforeEach(async () => {
-    page = await newE2EPage({
-      url: '/src/components/datetime/test/set-value?ionic:_testing=true',
-    });
-  });
-
-  it('should update the active date', async () => {
-    await page.$eval('ion-datetime', (elm: any) => {
-      elm.value = '2021-11-25T12:40:00.000Z';
-    });
-
-    await page.waitForChanges();
-
-    const activeDate = await page.find('ion-datetime >>> .calendar-day-active');
-
-    expect(activeDate).toEqualText('25');
-  });
-
-  it('should update the active time', async () => {
-    await page.$eval('ion-datetime', (elm: any) => {
-      elm.value = '2021-11-25T12:40:00.000Z';
-    });
-
-    await page.waitForChanges();
-
-    const activeTime = await page.find('ion-datetime >>> .time-body');
-
-    expect(activeTime).toEqualText('12:40 PM');
-  });
-});
diff --git a/core/src/components/datetime/test/sub-pixel-width/datetime.e2e.ts b/core/src/components/datetime/test/sub-pixel-width/datetime.e2e.ts
new file mode 100644
index 0000000000..fbf4a1b1dd
--- /dev/null
+++ b/core/src/components/datetime/test/sub-pixel-width/datetime.e2e.ts
@@ -0,0 +1,45 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('datetime: sub-pixel width', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/src/components/datetime/test/sub-pixel-width');
+  });
+  test('should update the month when next button is clicked', async ({ page }) => {
+    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+    const datetimeMonthDidChange = await page.spyOnEvent('datetimeMonthDidChange');
+
+    const openModalBtn = page.locator('#open-modal');
+
+    await openModalBtn.click();
+    await ionModalDidPresent.next();
+    await page.waitForSelector('.datetime-ready');
+
+    const buttons = page.locator('ion-datetime .calendar-next-prev ion-button');
+    await buttons.nth(1).click();
+
+    await datetimeMonthDidChange.next();
+
+    const monthYear = page.locator('ion-datetime .calendar-month-year');
+    expect(monthYear).toHaveText('March 2022');
+  });
+
+  test('should update the month when prev button is clicked', async ({ page }) => {
+    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+    const datetimeMonthDidChange = await page.spyOnEvent('datetimeMonthDidChange');
+
+    const openModalBtn = page.locator('#open-modal');
+
+    await openModalBtn.click();
+    await ionModalDidPresent.next();
+    await page.waitForSelector('.datetime-ready');
+
+    const buttons = page.locator('ion-datetime .calendar-next-prev ion-button');
+    await buttons.nth(0).click();
+
+    await datetimeMonthDidChange.next();
+
+    const monthYear = page.locator('ion-datetime .calendar-month-year');
+    expect(monthYear).toHaveText('January 2022');
+  });
+});
diff --git a/core/src/components/datetime/test/sub-pixel-width/e2e.ts b/core/src/components/datetime/test/sub-pixel-width/e2e.ts
deleted file mode 100644
index d42914e25d..0000000000
--- a/core/src/components/datetime/test/sub-pixel-width/e2e.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-describe('datetime: sub-pixel width', () => {
-  test('should update the month when next button is clicked', async () => {
-    const page = await newE2EPage({
-      url: '/src/components/datetime/test/sub-pixel-width?ionic:_testing=true',
-    });
-
-    const openModalBtn = await page.find('#open-modal');
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-    const modal = await page.find('ion-modal');
-
-    await openModalBtn.click();
-
-    await modal.waitForVisible();
-    await ionModalDidPresent.next();
-
-    const buttons = await page.findAll('ion-datetime >>> .calendar-next-prev ion-button');
-
-    await buttons[1].click();
-
-    await page.waitForEvent('datetimeMonthDidChange');
-
-    const monthYear = await page.find('ion-datetime >>> .calendar-month-year');
-
-    expect(monthYear.textContent.trim()).toBe('March 2022');
-  });
-
-  test('should update the month when prev button is clicked', async () => {
-    const page = await newE2EPage({
-      url: '/src/components/datetime/test/sub-pixel-width?ionic:_testing=true',
-    });
-
-    const openModalBtn = await page.find('#open-modal');
-    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-    const modal = await page.find('ion-modal');
-
-    await openModalBtn.click();
-
-    await modal.waitForVisible();
-    await ionModalDidPresent.next();
-
-    const buttons = await page.findAll('ion-datetime >>> .calendar-next-prev ion-button');
-
-    await buttons[0].click();
-
-    await page.waitForEvent('datetimeMonthDidChange');
-
-    const monthYear = await page.find('ion-datetime >>> .calendar-month-year');
-
-    expect(monthYear.textContent.trim()).toBe('January 2022');
-  });
-});
diff --git a/core/src/components/datetime/test/time-label/datetime.e2e.ts b/core/src/components/datetime/test/time-label/datetime.e2e.ts
new file mode 100644
index 0000000000..befa762127
--- /dev/null
+++ b/core/src/components/datetime/test/time-label/datetime.e2e.ts
@@ -0,0 +1,23 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('datetime: time label', () => {
+  test('should render default time label', async ({ page }) => {
+    await page.setContent(`
+      <ion-datetime></ion-datetime>
+    `);
+    await page.waitForSelector('.datetime-ready');
+
+    const timeLabel = page.locator('ion-datetime .time-header');
+    expect(timeLabel).toHaveText('Time');
+  });
+  test('should not render a custom time label', async ({ page }) => {
+    await page.setContent(`
+      <ion-datetime show-default-time-label="false"></ion-datetime>
+    `);
+    await page.waitForSelector('.datetime-ready');
+
+    const timeLabel = page.locator('ion-datetime .time-header');
+    expect(timeLabel).toHaveText('');
+  });
+});
diff --git a/core/src/components/datetime/test/time-label/e2e.ts b/core/src/components/datetime/test/time-label/e2e.ts
deleted file mode 100644
index 2164776345..0000000000
--- a/core/src/components/datetime/test/time-label/e2e.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('time-label', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/datetime/test/time-label?ionic:_testing=true',
-  });
-
-  const screenshotCompares = [];
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
diff --git a/core/src/components/datetime/test/time-label/index.html b/core/src/components/datetime/test/time-label/index.html
deleted file mode 100644
index c5ab52ef1e..0000000000
--- a/core/src/components/datetime/test/time-label/index.html
+++ /dev/null
@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Datetime - Time label</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-    <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>
-    <style>
-      .grid {
-        display: grid;
-        grid-template-columns: repeat(3, minmax(250px, 1fr));
-        grid-gap: 20px;
-      }
-      h2 {
-        font-size: 12px;
-        font-weight: normal;
-
-        color: #6f7378;
-
-        margin-top: 10px;
-        margin-left: 5px;
-      }
-
-      ion-datetime {
-        box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.25), 0px 8px 16px rgba(0, 0, 0, 0.25);
-        border-radius: 8px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-header translucent="true">
-        <ion-toolbar>
-          <ion-title>Datetime - Time Label</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <div class="grid">
-          <div class="grid-item">
-            <h2>Default Time Label</h2>
-            <ion-datetime show-default-time-label="true"></ion-datetime>
-          </div>
-          <div class="grid-item">
-            <h2>No Default Time Label</h2>
-            <ion-datetime show-default-time-label="false"></ion-datetime>
-          </div>
-          <div class="grid-item">
-            <h2>Custom Time Label</h2>
-            <ion-datetime>
-              <div slot="time-label">Custom Time</div>
-            </ion-datetime>
-          </div>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/core/src/components/datetime/test/utils/month-did-change-event.js b/core/src/components/datetime/test/utils/month-did-change-event.js
index c0256c6f11..9bf3b5d283 100644
--- a/core/src/components/datetime/test/utils/month-did-change-event.js
+++ b/core/src/components/datetime/test/utils/month-did-change-event.js
@@ -7,7 +7,7 @@
 export function InitMonthDidChangeEvent(datetimeSelector = 'ion-datetime') {
   const observer = new MutationObserver((mutationRecords) => {
     if (mutationRecords[0].type === 'characterData') {
-      document.dispatchEvent(new CustomEvent('datetimeMonthDidChange'));
+      window.dispatchEvent(new CustomEvent('datetimeMonthDidChange'));
     }
   });
 
diff --git a/core/src/components/datetime/test/values/datetime.e2e.ts b/core/src/components/datetime/test/values/datetime.e2e.ts
new file mode 100644
index 0000000000..4c24edba7a
--- /dev/null
+++ b/core/src/components/datetime/test/values/datetime.e2e.ts
@@ -0,0 +1,52 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('datetime: values', () => {
+  test('should render correct days', async ({ page }) => {
+    await page.setContent(`
+      <ion-datetime locale="en-US" presentation="date" day-values="1,2,3"></ion-datetime>
+    `);
+    await page.waitForSelector('.datetime-ready');
+
+    const items = page.locator('.calendar-day:not([disabled])');
+
+    /**
+     * Datetime calendar grid renders 3 months by default,
+     * so this ensures that dayValues is applying to all
+     * rendered months, not just the initial month.
+     */
+    expect(items).toHaveText(['1', '2', '3', '1', '2', '3', '1', '2', '3']);
+  });
+  test('should render correct months', async ({ page }) => {
+    await page.setContent(`
+      <ion-datetime locale="en-US" presentation="month-year" month-values="5,6,10"></ion-datetime>
+    `);
+
+    const items = page.locator('.month-column .picker-item:not(.picker-item-empty)');
+    expect(items).toHaveText(['May', 'June', 'October']);
+  });
+  test('should render correct years', async ({ page }) => {
+    await page.setContent(`
+      <ion-datetime locale="en-US" presentation="month-year" year-values="2022,2021,2020"></ion-datetime>
+    `);
+
+    const items = page.locator('.year-column .picker-item:not(.picker-item-empty)');
+    expect(items).toHaveText(['2022', '2021', '2020']);
+  });
+  test('should render correct hours', async ({ page }) => {
+    await page.setContent(`
+      <ion-datetime locale="en-US" presentation="time" hour-values="1,2,3"></ion-datetime>
+    `);
+
+    const items = page.locator('ion-picker-column-internal:first-of-type .picker-item:not(.picker-item-empty)');
+    expect(items).toHaveText(['1', '2', '3']);
+  });
+  test('should render correct minutes', async ({ page }) => {
+    await page.setContent(`
+      <ion-datetime locale="en-US" presentation="time" minute-values="1,2,3"></ion-datetime>
+    `);
+
+    const items = page.locator('ion-picker-column-internal:nth-of-type(2) .picker-item:not(.picker-item-empty)');
+    expect(items).toHaveText(['01', '02', '03']);
+  });
+});
diff --git a/core/src/components/datetime/test/values/e2e.ts b/core/src/components/datetime/test/values/e2e.ts
deleted file mode 100644
index 1d6d606512..0000000000
--- a/core/src/components/datetime/test/values/e2e.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('values', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/datetime/test/values?ionic:_testing=true',
-  });
-
-  const screenshotCompares = [];
-
-  screenshotCompares.push(await page.compareScreenshot());
-
-  for (const screenshotCompare of screenshotCompares) {
-    expect(screenshotCompare).toMatchScreenshot();
-  }
-});
diff --git a/core/src/components/datetime/test/values/index.html b/core/src/components/datetime/test/values/index.html
deleted file mode 100644
index c28d87c022..0000000000
--- a/core/src/components/datetime/test/values/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Datetime - Values</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
-    <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>
-    <style>
-      .grid {
-        display: grid;
-        grid-template-columns: repeat(2, minmax(250px, 1fr));
-        grid-gap: 20px;
-      }
-      h2 {
-        font-size: 12px;
-        font-weight: normal;
-
-        color: #6f7378;
-
-        margin-top: 10px;
-        margin-left: 5px;
-      }
-
-      ion-datetime {
-        box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.25), 0px 8px 16px rgba(0, 0, 0, 0.25);
-        border-radius: 8px;
-      }
-    </style>
-  </head>
-  <body>
-    <ion-app>
-      <ion-header translucent="true">
-        <ion-toolbar>
-          <ion-title>Datetime - Values</ion-title>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <div class="grid">
-          <div class="grid-item">
-            <h2>Values</h2>
-            <ion-datetime
-              day-values="1,2,3,4,5"
-              hour-values="1,2,3"
-              minute-values="0,15,30,59"
-              year-values="2010,2015,2020,2021,2025"
-              month-values="5,6,10"
-            ></ion-datetime>
-          </div>
-
-          <div class="grid-item">
-            <h2>Values with Max/Min</h2>
-            <ion-datetime
-              hour-values="1,2,3"
-              minute-values="0,15,30,59"
-              year-values="2010,2015,2020,2025"
-              max="2021-06-05"
-              min="2012-06-05"
-            ></ion-datetime>
-          </div>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/core/src/components/datetime/test/zoom/datetime-zoom-in.e2e.ts b/core/src/components/datetime/test/zoom/datetime-zoom-in.e2e.ts
new file mode 100644
index 0000000000..41c2cdd84d
--- /dev/null
+++ b/core/src/components/datetime/test/zoom/datetime-zoom-in.e2e.ts
@@ -0,0 +1,55 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.use({
+  viewport: {
+    width: 640,
+    height: 480,
+  },
+  deviceScaleFactor: 2,
+});
+
+/**
+ * This test emulates zoom behavior in the browser to make sure
+ * that key functions of the ion-datetime continue to function even
+ * if the page is zoomed in or out.
+ */
+test.describe('datetime: zoom in interactivity', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/src/components/datetime/test/zoom');
+  });
+
+  test('should update the month when next button is clicked', async ({ page }) => {
+    const openModalBtn = page.locator('#open-modal');
+    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+    const datetimeMonthDidChange = await page.spyOnEvent('datetimeMonthDidChange');
+
+    await openModalBtn.click();
+    await ionModalDidPresent.next();
+
+    const buttons = page.locator('ion-datetime .calendar-next-prev ion-button');
+
+    await buttons.nth(1).click();
+    await datetimeMonthDidChange.next();
+
+    const monthYear = page.locator('ion-datetime .calendar-month-year');
+    expect(monthYear).toHaveText('March 2022');
+  });
+
+  test('should update the month when prev button is clicked', async ({ page }) => {
+    const openModalBtn = page.locator('#open-modal');
+    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+    const datetimeMonthDidChange = await page.spyOnEvent('datetimeMonthDidChange');
+
+    await openModalBtn.click();
+    await ionModalDidPresent.next();
+
+    const buttons = page.locator('ion-datetime .calendar-next-prev ion-button');
+
+    await buttons.nth(0).click();
+    await datetimeMonthDidChange.next();
+
+    const monthYear = page.locator('ion-datetime .calendar-month-year');
+    expect(monthYear).toHaveText('January 2022');
+  });
+});
diff --git a/core/src/components/datetime/test/zoom/datetime-zoom-out.e2e.ts b/core/src/components/datetime/test/zoom/datetime-zoom-out.e2e.ts
new file mode 100644
index 0000000000..11537e2821
--- /dev/null
+++ b/core/src/components/datetime/test/zoom/datetime-zoom-out.e2e.ts
@@ -0,0 +1,55 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.use({
+  viewport: {
+    width: 640,
+    height: 480,
+  },
+  deviceScaleFactor: 0.75,
+});
+
+/**
+ * This test emulates zoom behavior in the browser to make sure
+ * that key functions of the ion-datetime continue to function even
+ * if the page is zoomed in or out.
+ */
+test.describe('datetime: zoom out interactivity', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/src/components/datetime/test/zoom');
+  });
+
+  test('should update the month when next button is clicked', async ({ page }) => {
+    const openModalBtn = page.locator('#open-modal');
+    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+    const datetimeMonthDidChange = await page.spyOnEvent('datetimeMonthDidChange');
+
+    await openModalBtn.click();
+    await ionModalDidPresent.next();
+
+    const buttons = page.locator('ion-datetime .calendar-next-prev ion-button');
+
+    await buttons.nth(1).click();
+    await datetimeMonthDidChange.next();
+
+    const monthYear = page.locator('ion-datetime .calendar-month-year');
+    expect(monthYear).toHaveText('March 2022');
+  });
+
+  test('should update the month when prev button is clicked', async ({ page }) => {
+    const openModalBtn = page.locator('#open-modal');
+    const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+    const datetimeMonthDidChange = await page.spyOnEvent('datetimeMonthDidChange');
+
+    await openModalBtn.click();
+    await ionModalDidPresent.next();
+
+    const buttons = page.locator('ion-datetime .calendar-next-prev ion-button');
+
+    await buttons.nth(0).click();
+    await datetimeMonthDidChange.next();
+
+    const monthYear = page.locator('ion-datetime .calendar-month-year');
+    expect(monthYear).toHaveText('January 2022');
+  });
+});
diff --git a/core/src/components/datetime/test/zoom/e2e.ts b/core/src/components/datetime/test/zoom/e2e.ts
deleted file mode 100644
index 8e0a7a67ab..0000000000
--- a/core/src/components/datetime/test/zoom/e2e.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-/**
- * This test emulates zoom behavior in the browser to make sure
- * that key functions of the ion-datetime continue to function even
- * if the page is zoomed in or out.
- */
-describe('datetime: zoom interactivity', () => {
-  let deviceScaleFactor;
-
-  describe('zoom out', () => {
-    beforeEach(() => {
-      deviceScaleFactor = 0.75;
-    });
-
-    test('should update the month when next button is clicked', async () => {
-      const page = await newE2EPage({
-        url: '/src/components/datetime/test/zoom?ionic:_testing=true',
-      });
-
-      page.setViewport({
-        width: 640,
-        height: 480,
-        deviceScaleFactor,
-      });
-
-      const openModalBtn = await page.find('#open-modal');
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-      const modal = await page.find('ion-modal');
-
-      await openModalBtn.click();
-
-      await modal.waitForVisible();
-      await ionModalDidPresent.next();
-
-      const buttons = await page.findAll('ion-datetime >>> .calendar-next-prev ion-button');
-
-      await buttons[1].click();
-
-      await page.waitForEvent('datetimeMonthDidChange');
-
-      const monthYear = await page.find('ion-datetime >>> .calendar-month-year');
-
-      expect(monthYear.textContent.trim()).toBe('March 2022');
-    });
-
-    test('should update the month when prev button is clicked', async () => {
-      const page = await newE2EPage({
-        url: '/src/components/datetime/test/zoom?ionic:_testing=true',
-      });
-
-      const openModalBtn = await page.find('#open-modal');
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-      const modal = await page.find('ion-modal');
-
-      await openModalBtn.click();
-
-      await modal.waitForVisible();
-      await ionModalDidPresent.next();
-
-      const buttons = await page.findAll('ion-datetime >>> .calendar-next-prev ion-button');
-
-      await buttons[0].click();
-
-      await page.waitForEvent('datetimeMonthDidChange');
-
-      const monthYear = await page.find('ion-datetime >>> .calendar-month-year');
-
-      expect(monthYear.textContent.trim()).toBe('January 2022');
-    });
-  });
-
-  describe('zoom in', () => {
-    beforeEach(() => {
-      deviceScaleFactor = 2;
-    });
-
-    test('should update the month when next button is clicked', async () => {
-      const page = await newE2EPage({
-        url: '/src/components/datetime/test/zoom?ionic:_testing=true',
-      });
-
-      page.setViewport({
-        width: 640,
-        height: 480,
-        deviceScaleFactor,
-      });
-
-      const openModalBtn = await page.find('#open-modal');
-      const modal = await page.find('ion-modal');
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-      await openModalBtn.click();
-
-      await modal.waitForVisible();
-      await ionModalDidPresent.next();
-
-      const buttons = await page.findAll('ion-datetime >>> .calendar-next-prev ion-button');
-
-      await buttons[1].click();
-
-      await page.waitForEvent('datetimeMonthDidChange');
-
-      const monthYear = await page.find('ion-datetime >>> .calendar-month-year');
-
-      expect(monthYear.textContent.trim()).toBe('March 2022');
-    });
-
-    test('should update the month when prev button is clicked', async () => {
-      const page = await newE2EPage({
-        url: '/src/components/datetime/test/zoom?ionic:_testing=true',
-      });
-
-      const openModalBtn = await page.find('#open-modal');
-      const modal = await page.find('ion-modal');
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-
-      await openModalBtn.click();
-
-      await modal.waitForVisible();
-      await ionModalDidPresent.next();
-
-      const buttons = await page.findAll('ion-datetime >>> .calendar-next-prev ion-button');
-
-      await buttons[0].click();
-
-      await page.waitForEvent('datetimeMonthDidChange');
-
-      const monthYear = await page.find('ion-datetime >>> .calendar-month-year');
-
-      expect(monthYear.textContent.trim()).toBe('January 2022');
-    });
-  });
-});
diff --git a/core/src/components/datetime/utils/parse.ts b/core/src/components/datetime/utils/parse.ts
index dd0a7ad753..c6e5e47d5f 100644
--- a/core/src/components/datetime/utils/parse.ts
+++ b/core/src/components/datetime/utils/parse.ts
@@ -1,5 +1,7 @@
 import type { DatetimeParts } from '../datetime-interface';
 
+import { isAfter, isBefore } from './comparison';
+
 const ISO_8601_REGEXP =
   // eslint-disable-next-line no-useless-escape
   /^(\d{4}|[+\-]\d{6})(?:-(\d{2})(?:-(\d{2}))?)?(?:T(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{3}))?)?(?:(Z)|([+\-])(\d{2})(?::(\d{2}))?)?)?$/;
@@ -106,3 +108,16 @@ export const parseDate = (val: string | undefined | null): any | undefined => {
     tzOffset,
   };
 };
+
+export const clampDate = (
+  dateParts: DatetimeParts,
+  minParts?: DatetimeParts,
+  maxParts?: DatetimeParts
+): DatetimeParts => {
+  if (minParts && isBefore(dateParts, minParts)) {
+    return minParts;
+  } else if (maxParts && isAfter(dateParts, maxParts)) {
+    return maxParts;
+  }
+  return dateParts;
+};
diff --git a/core/src/components/label/label.ios.scss b/core/src/components/label/label.ios.scss
index 4e4c23c05a..4f639b262b 100644
--- a/core/src/components/label/label.ios.scss
+++ b/core/src/components/label/label.ios.scss
@@ -11,7 +11,6 @@
   line-height: $label-ios-text-wrap-line-height;
 }
 
-
 // iOS Stacked & Floating Labels
 // --------------------------------------------------
 
@@ -23,14 +22,14 @@
 
 :host(.label-floating) {
   @include margin(null, null, 0, null);
-  @include transform(translate3d(0, 29px, 0));
+  @include transform(translate(0, 29px));
   @include transform-origin(start, top);
 
   transition: transform 150ms ease-in-out;
 }
 
 :host-context(.item-textarea).label-floating {
-  @include transform(translate3d(0, 28px, 0));
+  @include transform(translate(0, 28px));
 }
 
 :host-context(.item-has-focus).label-stacked,
@@ -41,7 +40,7 @@
 :host-context(.item-has-focus).label-floating,
 :host-context(.item-has-placeholder:not(.item-input)).label-floating,
 :host-context(.item-has-value).label-floating {
-  @include transform(translate3d(0, 0, 0), scale(.82));
+  @include transform(scale(0.82));
 }
 
 // iOS Typography
@@ -74,7 +73,12 @@
 }
 
 ::slotted(*) p {
-  @include margin($item-ios-paragraph-margin-top, $item-ios-paragraph-margin-end, $item-ios-paragraph-margin-bottom, $item-ios-paragraph-margin-start);
+  @include margin(
+    $item-ios-paragraph-margin-top,
+    $item-ios-paragraph-margin-end,
+    $item-ios-paragraph-margin-bottom,
+    $item-ios-paragraph-margin-start
+  );
 
   font-size: $item-ios-paragraph-font-size;
 
diff --git a/core/src/components/toggle/test/basic/e2e.ts b/core/src/components/toggle/test/basic/e2e.ts
deleted file mode 100644
index 709496539f..0000000000
--- a/core/src/components/toggle/test/basic/e2e.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('toggle: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/toggle/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-test('toggle:rtl: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/toggle/test/basic?ionic:_testing=true&rtl=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/toggle/test/basic/index.html b/core/src/components/toggle/test/basic/index.html
index 991c385661..e2a7eb260f 100644
--- a/core/src/components/toggle/test/basic/index.html
+++ b/core/src/components/toggle/test/basic/index.html
@@ -27,6 +27,11 @@
 
       <ion-content id="content">
         <ion-list>
+          <ion-item>
+            <ion-label>Orange</ion-label>
+            <ion-toggle id="orange" slot="start" name="orange"></ion-toggle>
+          </ion-item>
+
           <ion-item>
             <ion-label>Apple</ion-label>
             <ion-toggle slot="start" name="apple" checked></ion-toggle>
@@ -44,7 +49,7 @@
 
           <ion-item>
             <ion-label>Grape, checked, disabled</ion-label>
-            <ion-toggle slot="start" id="grapeChecked" name="grape" checked disabled></ion-toggle>
+            <ion-toggle slot="start" id="grapeChecked" value="grape" name="grape" checked disabled></ion-toggle>
           </ion-item>
 
           <ion-item>
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts b/core/src/components/toggle/test/basic/toggle.e2e.ts
new file mode 100644
index 0000000000..6900e39e76
--- /dev/null
+++ b/core/src/components/toggle/test/basic/toggle.e2e.ts
@@ -0,0 +1,95 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('toggle: basic', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(`/src/components/toggle/test/basic`);
+  });
+
+  test('should not have visual regressions', async ({ page }) => {
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`toggle-diff-${page.getSnapshotSettings()}.png`);
+  });
+
+  test('should have proper class and aria role when checked', async ({ page }) => {
+    const toggle = page.locator('#orange');
+
+    expect(toggle).not.toHaveClass(/toggle-checked/);
+    expect(toggle).toHaveAttribute('aria-checked', 'false');
+
+    await toggle.click();
+    await page.waitForChanges();
+
+    expect(toggle).toHaveClass(/toggle-checked/);
+    expect(toggle).toHaveAttribute('aria-checked', 'true');
+
+    await toggle.click();
+    await page.waitForChanges();
+
+    expect(toggle).not.toHaveClass(/toggle-checked/);
+    expect(toggle).toHaveAttribute('aria-checked', 'false');
+  });
+
+  test('should fire change event with detail', async ({ page }) => {
+    const toggle = page.locator('#orange');
+    const ionChange = await page.spyOnEvent('ionChange');
+
+    await toggle.click();
+    await page.waitForChanges();
+
+    expect(ionChange).toHaveReceivedEventDetail({
+      checked: true,
+      value: 'on',
+    });
+
+    await toggle.click();
+    await page.waitForChanges();
+
+    expect(ionChange).toHaveReceivedEventDetail({
+      checked: false,
+      value: 'on',
+    });
+  });
+
+  test('should fire change event if checked prop is changed directly', async ({ page }) => {
+    const toggle = page.locator('#orange');
+    const ionChange = await page.spyOnEvent('ionChange');
+
+    await toggle.evaluate((el: HTMLIonToggleElement) => (el.checked = true));
+    await page.waitForChanges();
+
+    expect(ionChange).toHaveReceivedEvent();
+  });
+
+  test('should pass properties down to hidden input', async ({ page }) => {
+    const toggle = page.locator('#grapeChecked');
+
+    expect(toggle).toBeDisabled();
+    expect(toggle).toHaveJSProperty('value', 'grape');
+    expect(toggle).toHaveJSProperty('name', 'grape');
+
+    const hiddenInput = page.locator('#grapeChecked input[type=hidden]');
+
+    expect(hiddenInput).toBeDisabled();
+    expect(hiddenInput).toHaveJSProperty('value', 'grape');
+    expect(hiddenInput).toHaveJSProperty('name', 'grape');
+
+    await toggle.evaluate((el: HTMLIonToggleElement) => {
+      el.disabled = false;
+      el.checked = false;
+      el.value = 'new-value';
+      el.name = 'new-name';
+    });
+
+    await page.waitForChanges();
+
+    expect(hiddenInput).not.toBeDisabled();
+    expect(hiddenInput).toHaveJSProperty('name', 'new-name');
+
+    // shouldn't have a value because it's unchecked
+    // note: using toHaveJSProperty to check empty string triggers error for some reason
+    const value = await hiddenInput.evaluate((el: HTMLInputElement) => el.value);
+    expect(value).toBe('');
+  });
+});
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..caf063924a
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..ae3796619b
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..f2933f4a34
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..9a27ffa051
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..09b1476551
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..af82c38ccb
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..148d59497b
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..2cedd0c3a7
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..11e15ca2ff
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..73bd17c7de
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d3c1f28317
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4b2dd4f8a4
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/e2e.ts b/core/src/components/toggle/test/e2e.ts
deleted file mode 100644
index 374a628402..0000000000
--- a/core/src/components/toggle/test/e2e.ts
+++ /dev/null
@@ -1,154 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-describe('toggle', () => {
-  it('should create standalone, unchecked by default', async () => {
-    // create a new e2e test page
-    const page = await newE2EPage();
-
-    // set the page content
-    await page.setContent(`
-      <ion-toggle class="some-class"></ion-toggle>
-    `);
-
-    // add an event spy to the page
-    const ionChange = await page.spyOnEvent('ionChange');
-
-    // find the elemnt in the page
-    const toggle = await page.find('ion-toggle');
-
-    // check it has the expected css classes
-    expect(toggle).toHaveClass('some-class');
-    expect(toggle).toHaveClass('hydrated');
-
-    // toggle should not have checked css
-    expect(toggle).not.toHaveClass('toggle-checked');
-
-    // set checked property
-    toggle.setProperty('checked', true);
-
-    // wait for the changes to apply
-    await page.waitForChanges();
-
-    // make sure the property was updated
-    const checkedValue1 = await toggle.getProperty('checked');
-    expect(checkedValue1).toBe(true);
-
-    // toggle should have checked css
-    expect(toggle).toHaveClass('toggle-checked');
-
-    // make sure we received the correct event detail
-    expect(ionChange).toHaveReceivedEventDetail({
-      checked: true,
-      value: 'on',
-    });
-
-    // set unchecked
-    toggle.setProperty('checked', false);
-
-    // wait for the changes to apply
-    await page.waitForChanges();
-
-    // make sure the property was updated
-    const checkedValue2 = await toggle.getProperty('checked');
-    expect(checkedValue2).toBe(false);
-
-    // toggle should not be checked
-    expect(toggle).not.toHaveClass('toggle-checked');
-
-    // we should have received the event two times now
-    expect(ionChange).toHaveReceivedEventTimes(2);
-
-    // make sure we received the correct event detail
-    expect(ionChange).toHaveReceivedEventDetail({
-      checked: false,
-      value: 'on',
-    });
-  });
-
-  it('should create standalone, checked by default', async () => {
-    const page = await newE2EPage({
-      html: `
-      <ion-toggle checked></ion-toggle>
-    `,
-    });
-
-    // find the elemnt in the page
-    const toggle = await page.find('ion-toggle');
-
-    // spy on the ionChange event
-    const ionChange = await page.spyOnEvent('ionChange');
-
-    // check aria
-    expect(toggle).toEqualAttribute('aria-checked', 'true');
-
-    // find the hidden input in the light dom
-    const hiddenInput = await page.find('ion-toggle input[type=hidden]');
-
-    // hidden input property should have value
-    expect(hiddenInput).toEqualAttribute('value', 'on');
-
-    // hidden in put should have aux-input class
-    expect(hiddenInput).toHaveClass('aux-input');
-
-    // set checked true again, no actual change
-    toggle.setProperty('checked', true);
-
-    // wait for the changes to apply
-    await page.waitForChanges();
-
-    // shouldn't have fired the ionChange event cuz it didn't change
-    expect(ionChange).not.toHaveReceivedEvent();
-
-    // uncheck
-    toggle.setProperty('checked', false);
-
-    // wait for the changes to apply
-    await page.waitForChanges();
-
-    // toggle should not be checked
-    const checkedValue2 = await toggle.getProperty('checked');
-    expect(checkedValue2).toBe(false);
-
-    // hidden input property should no value
-    expect(toggle).toEqualAttribute('aria-checked', 'false');
-
-    expect(ionChange).toHaveReceivedEventTimes(1);
-
-    expect(ionChange).toHaveReceivedEventDetail({
-      checked: false,
-      value: 'on',
-    });
-  });
-
-  it('should pass properties down to hidden input', async () => {
-    const page = await newE2EPage({
-      html: `
-      <ion-toggle disabled checked value="coding" name="primary"></ion-toggle>
-    `,
-    });
-
-    const toggle = await page.find('ion-toggle');
-
-    expect(await toggle.getProperty('disabled')).toBe(true);
-    expect(await toggle.getProperty('checked')).toBe(true);
-    expect(await toggle.getProperty('value')).toBe('coding');
-    expect(await toggle.getProperty('name')).toBe('primary');
-
-    const hiddenInput = await page.find('ion-toggle input[type=hidden]');
-
-    expect(await hiddenInput.getProperty('disabled')).toBe(true);
-    expect(await hiddenInput.getProperty('value')).toBe('coding');
-    expect(await hiddenInput.getProperty('name')).toBe('primary');
-
-    toggle.setProperty('disabled', false);
-    toggle.setProperty('checked', false);
-    toggle.setProperty('value', 'design');
-    toggle.setProperty('name', 'secondary');
-
-    await page.waitForChanges();
-
-    expect(await hiddenInput.getProperty('disabled')).toBe(false);
-    expect(await hiddenInput.getProperty('value')).toBe('');
-    expect(await hiddenInput.getProperty('name')).toBe('secondary');
-  });
-});
diff --git a/core/src/components/toggle/test/rtl/e2e.ts b/core/src/components/toggle/test/rtl/e2e.ts
deleted file mode 100644
index 4c250be9eb..0000000000
--- a/core/src/components/toggle/test/rtl/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('toggle: RTL', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/toggle/test/rtl?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/toggle/test/rtl/index.html b/core/src/components/toggle/test/rtl/index.html
deleted file mode 100644
index be3d4cda93..0000000000
--- a/core/src/components/toggle/test/rtl/index.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Toggle - RTL</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>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Toggle - RTL</ion-title>
-          <ion-buttons slot="primary">
-            <ion-toggle aria-label="Toggle"></ion-toggle>
-          </ion-buttons>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content id="content">
-        <ion-list>
-          <ion-item>
-            <ion-label>Toggle</ion-label>
-            <ion-toggle dir="rtl" slot="start" name="item-1" checked></ion-toggle>
-          </ion-item>
-        </ion-list>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/core/src/components/toggle/test/sizes/e2e.ts b/core/src/components/toggle/test/sizes/e2e.ts
deleted file mode 100644
index 24131929bc..0000000000
--- a/core/src/components/toggle/test/sizes/e2e.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('toggle: sizes', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/toggle/test/sizes?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-test('toggle:rtl: sizes', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/toggle/test/sizes?ionic:_testing=true&rtl=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts b/core/src/components/toggle/test/sizes/toggle.e2e.ts
new file mode 100644
index 0000000000..0069639637
--- /dev/null
+++ b/core/src/components/toggle/test/sizes/toggle.e2e.ts
@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('toggle: sizes', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/toggle/test/sizes`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`toggle-sizes-diff-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..fb7da8921b
Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..77bf55d597
Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..224f8c721c
Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1b001d0b93
Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..56cf99d251
Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4015c70615
Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..211126cbb5
Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..4415d19ece
Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..46abc25011
Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..5ceff35afa
Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..175e334bf5
Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4037daed0d
Binary files /dev/null and b/core/src/components/toggle/test/sizes/toggle.e2e.ts-snapshots/toggle-sizes-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/standalone/e2e.ts b/core/src/components/toggle/test/standalone/e2e.ts
deleted file mode 100644
index 8ff9df8747..0000000000
--- a/core/src/components/toggle/test/standalone/e2e.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('toggle: standalone', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/toggle/test/standalone?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/toggle/test/standalone/toggle.e2e.ts b/core/src/components/toggle/test/standalone/toggle.e2e.ts
new file mode 100644
index 0000000000..9af6cd5785
--- /dev/null
+++ b/core/src/components/toggle/test/standalone/toggle.e2e.ts
@@ -0,0 +1,12 @@
+import { expect } from '@playwright/test';
+import { test } from '@utils/test/playwright';
+
+test.describe('toggle: standalone', () => {
+  test('should not have visual regressions', async ({ page }) => {
+    await page.goto(`/src/components/toggle/test/standalone`);
+
+    await page.setIonViewport();
+
+    expect(await page.screenshot()).toMatchSnapshot(`toggle-standalone-diff-${page.getSnapshotSettings()}.png`);
+  });
+});
diff --git a/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..26a3b4d8ae
Binary files /dev/null and b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..1e5a80a658
Binary files /dev/null and b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..af8d93909c
Binary files /dev/null and b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..a158bf9c59
Binary files /dev/null and b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6e8305a717
Binary files /dev/null and b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4f4eb46904
Binary files /dev/null and b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..210e01775b
Binary files /dev/null and b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..b9af1deaa8
Binary files /dev/null and b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..d2aa81013c
Binary files /dev/null and b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..8cd23579b4
Binary files /dev/null and b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..d521302bf2
Binary files /dev/null and b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c46251fd87
Binary files /dev/null and b/core/src/components/toggle/test/standalone/toggle.e2e.ts-snapshots/toggle-standalone-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/utils/tap-click.ts b/core/src/utils/tap-click.ts
index 19a0ce0829..a8e76d6876 100644
--- a/core/src/utils/tap-click.ts
+++ b/core/src/utils/tap-click.ts
@@ -5,7 +5,6 @@ import { now, pointerCoord } from './helpers';
 export const startTapClick = (config: Config) => {
   let lastTouch = -MOUSE_WAIT * 10;
   let lastActivated = 0;
-  let scrollingEl: HTMLElement | undefined;
 
   let activatableEle: HTMLElement | undefined;
   let activeRipple: Promise<() => void> | undefined;
@@ -14,11 +13,6 @@ export const startTapClick = (config: Config) => {
   const useRippleEffect = config.getBoolean('animated', true) && config.getBoolean('rippleEffect', true);
   const clearDefers = new WeakMap<HTMLElement, any>();
 
-  const isScrolling = () => {
-    // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
-    return scrollingEl !== undefined && scrollingEl.parentElement !== null;
-  };
-
   // Touch Events
   const onTouchStart = (ev: TouchEvent) => {
     lastTouch = now(ev);
@@ -58,10 +52,9 @@ export const startTapClick = (config: Config) => {
   };
 
   const pointerDown = (ev: UIEvent) => {
-    if (activatableEle || isScrolling()) {
+    if (activatableEle) {
       return;
     }
-    scrollingEl = undefined;
     setActivatedElement(getActivatableTarget(ev), ev);
   };
 
@@ -146,19 +139,26 @@ export const startTapClick = (config: Config) => {
   };
 
   const doc = document;
-  doc.addEventListener('ionScrollStart', (ev) => {
-    scrollingEl = ev.target as HTMLElement;
-    cancelActive();
-  });
-  doc.addEventListener('ionScrollEnd', () => {
-    scrollingEl = undefined;
-  });
   doc.addEventListener('ionGestureCaptured', cancelActive);
 
   doc.addEventListener('touchstart', onTouchStart, true);
   doc.addEventListener('touchcancel', onTouchEnd, true);
   doc.addEventListener('touchend', onTouchEnd, true);
 
+  /**
+   * Tap click effects such as the ripple effect should
+   * not happen when scrolling. For example, if a user scrolls
+   * the page but also happens to do a touchstart on a button
+   * as part of the scroll, the ripple effect should not
+   * be dispatched. The ripple effect should only happen
+   * if the button is activated and the page is not scrolling.
+   *
+   * pointercancel is dispatched on a gesture when scrolling
+   * starts, so this lets us avoid having to listen for
+   * ion-content's scroll events.
+   */
+  doc.addEventListener('pointercancel', cancelActive, true);
+
   doc.addEventListener('mousedown', onMouseDown, true);
   doc.addEventListener('mouseup', onMouseUp, true);
 
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 722d3a917b..bf14cfa521 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.9](https://github.com/ionic-team/ionic-docs/compare/v6.1.8...v6.1.9) (2022-06-08)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
 ## [6.1.8](https://github.com/ionic-team/ionic-docs/compare/v6.1.7...v6.1.8) (2022-06-01)
 
 **Note:** Version bump only for package @ionic/docs
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 104aa854b7..fc1a34044e 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/docs",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/docs",
-      "version": "6.1.8",
+      "version": "6.1.9",
       "license": "MIT"
     }
   }
diff --git a/docs/package.json b/docs/package.json
index cf59879869..d9dfb2829f 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/docs",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "description": "Pre-packaged API documentation for the Ionic docs.",
   "main": "core.json",
   "types": "core.d.ts",
diff --git a/lerna.json b/lerna.json
index 611cac11e7..90d6cd58d7 100644
--- a/lerna.json
+++ b/lerna.json
@@ -5,5 +5,5 @@
     "angular",
     "packages/*"
   ],
-  "version": "6.1.8"
+  "version": "6.1.9"
 }
diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md
index db3fe9c75b..fcf1174913 100644
--- a/packages/angular-server/CHANGELOG.md
+++ b/packages/angular-server/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.9](https://github.com/ionic-team/ionic/compare/v6.1.8...v6.1.9) (2022-06-08)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
 ## [6.1.8](https://github.com/ionic-team/ionic/compare/v6.1.7...v6.1.8) (2022-06-01)
 
 **Note:** Version bump only for package @ionic/angular-server
diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json
index 64522be343..abfb76c5c1 100644
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/angular-server",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular-server",
-      "version": "6.1.8",
+      "version": "6.1.9",
       "license": "MIT",
       "devDependencies": {
         "@angular-eslint/eslint-plugin": "^12.6.1",
@@ -18,7 +18,7 @@
         "@angular/platform-browser": "^12.0.0",
         "@angular/platform-browser-dynamic": "^12.2.10",
         "@angular/platform-server": "^12.0.0",
-        "@ionic/core": "^6.1.8",
+        "@ionic/core": "^6.1.9",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
         "@typescript-eslint/eslint-plugin": "^5.2.0",
@@ -786,9 +786,9 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.8",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.8.tgz",
-      "integrity": "sha512-EMYebwmS4UogpNrTyuCgIETKwE7XA93V7X3YacK2UArm1Xf98w3FsnfAYeMaUqY93bDxih/CSKm3NpUhVWP44A==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.9.tgz",
+      "integrity": "sha512-EaClsiGB/E9wPkujnrMZ71BLVcA8t6DBZu+caJMmqPLF/64S37CiyfrrMbL1UnxDWP2TXsPFH3seWl6Ek/W1bw==",
       "dev": true,
       "dependencies": {
         "@stencil/core": "^2.16.0",
@@ -7103,9 +7103,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.1.8",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.8.tgz",
-      "integrity": "sha512-EMYebwmS4UogpNrTyuCgIETKwE7XA93V7X3YacK2UArm1Xf98w3FsnfAYeMaUqY93bDxih/CSKm3NpUhVWP44A==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.9.tgz",
+      "integrity": "sha512-EaClsiGB/E9wPkujnrMZ71BLVcA8t6DBZu+caJMmqPLF/64S37CiyfrrMbL1UnxDWP2TXsPFH3seWl6Ek/W1bw==",
       "dev": true,
       "requires": {
         "@stencil/core": "^2.16.0",
diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json
index f2675b019f..73e7335965 100644
--- a/packages/angular-server/package.json
+++ b/packages/angular-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular-server",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "description": "Angular SSR Module for Ionic",
   "keywords": [
     "ionic",
@@ -56,7 +56,7 @@
     "@angular/platform-browser": "^12.0.0",
     "@angular/platform-browser-dynamic": "^12.2.10",
     "@angular/platform-server": "^12.0.0",
-    "@ionic/core": "^6.1.8",
+    "@ionic/core": "^6.1.9",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@typescript-eslint/eslint-plugin": "^5.2.0",
diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md
index ded77cc140..f36cd565f5 100644
--- a/packages/react-router/CHANGELOG.md
+++ b/packages/react-router/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.9](https://github.com/ionic-team/ionic/compare/v6.1.8...v6.1.9) (2022-06-08)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
 ## [6.1.8](https://github.com/ionic-team/ionic/compare/v6.1.7...v6.1.8) (2022-06-01)
 
 **Note:** Version bump only for package @ionic/react-router
diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json
index 3f5cace519..e760276ab5 100644
--- a/packages/react-router/package-lock.json
+++ b/packages/react-router/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react-router",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react-router",
-      "version": "6.1.8",
+      "version": "6.1.9",
       "license": "MIT",
       "dependencies": {
-        "@ionic/react": "^6.1.8",
+        "@ionic/react": "^6.1.9",
         "tslib": "*"
       },
       "devDependencies": {
@@ -148,9 +148,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.8",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.8.tgz",
-      "integrity": "sha512-EMYebwmS4UogpNrTyuCgIETKwE7XA93V7X3YacK2UArm1Xf98w3FsnfAYeMaUqY93bDxih/CSKm3NpUhVWP44A==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.9.tgz",
+      "integrity": "sha512-EaClsiGB/E9wPkujnrMZ71BLVcA8t6DBZu+caJMmqPLF/64S37CiyfrrMbL1UnxDWP2TXsPFH3seWl6Ek/W1bw==",
       "dependencies": {
         "@stencil/core": "^2.16.0",
         "ionicons": "^6.0.2",
@@ -158,11 +158,11 @@
       }
     },
     "node_modules/@ionic/react": {
-      "version": "6.1.8",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.1.8.tgz",
-      "integrity": "sha512-GseGRtoGTz1CEyUJX3DhcWKxXZ4IVjiWrMO/skIR/gb/0GRYVJ9HSobXozLesFEN6hSJTnVIwJTgygWA9PiCfA==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.1.9.tgz",
+      "integrity": "sha512-0EqCL5hBjSW9OIoopWRz+nH56wKufiT/oaK47qurRnl/b2JxDuSBWcpzCMeSI6H5LKkEY+zM3CD9rQpkQiZNLw==",
       "dependencies": {
-        "@ionic/core": "^6.1.8",
+        "@ionic/core": "^6.1.9",
         "ionicons": "^6.0.2",
         "tslib": "*"
       },
@@ -246,9 +246,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
-      "integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
+      "integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -4489,9 +4489,9 @@
       }
     },
     "@ionic/core": {
-      "version": "6.1.8",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.8.tgz",
-      "integrity": "sha512-EMYebwmS4UogpNrTyuCgIETKwE7XA93V7X3YacK2UArm1Xf98w3FsnfAYeMaUqY93bDxih/CSKm3NpUhVWP44A==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.9.tgz",
+      "integrity": "sha512-EaClsiGB/E9wPkujnrMZ71BLVcA8t6DBZu+caJMmqPLF/64S37CiyfrrMbL1UnxDWP2TXsPFH3seWl6Ek/W1bw==",
       "requires": {
         "@stencil/core": "^2.16.0",
         "ionicons": "^6.0.2",
@@ -4499,11 +4499,11 @@
       }
     },
     "@ionic/react": {
-      "version": "6.1.8",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.1.8.tgz",
-      "integrity": "sha512-GseGRtoGTz1CEyUJX3DhcWKxXZ4IVjiWrMO/skIR/gb/0GRYVJ9HSobXozLesFEN6hSJTnVIwJTgygWA9PiCfA==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.1.9.tgz",
+      "integrity": "sha512-0EqCL5hBjSW9OIoopWRz+nH56wKufiT/oaK47qurRnl/b2JxDuSBWcpzCMeSI6H5LKkEY+zM3CD9rQpkQiZNLw==",
       "requires": {
-        "@ionic/core": "^6.1.8",
+        "@ionic/core": "^6.1.9",
         "ionicons": "^6.0.2",
         "tslib": "*"
       }
@@ -4548,9 +4548,9 @@
       "dev": true
     },
     "@stencil/core": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
-      "integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw=="
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
+      "integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw=="
     },
     "@szmarczak/http-timer": {
       "version": "4.0.6",
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
index bb5c15a0d8..502b003ae6 100644
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react-router",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "description": "React Router wrapper for @ionic/react",
   "keywords": [
     "ionic",
@@ -37,7 +37,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@ionic/react": "^6.1.8",
+    "@ionic/react": "^6.1.9",
     "tslib": "*"
   },
   "peerDependencies": {
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 4518746c90..ef0e0333a8 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.9](https://github.com/ionic-team/ionic/compare/v6.1.8...v6.1.9) (2022-06-08)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
 ## [6.1.8](https://github.com/ionic-team/ionic/compare/v6.1.7...v6.1.8) (2022-06-01)
 
 
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index 8d04da743a..40dd0015e3 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react",
-      "version": "6.1.8",
+      "version": "6.1.9",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.1.8",
+        "@ionic/core": "^6.1.9",
         "ionicons": "^6.0.2",
         "tslib": "*"
       },
@@ -607,9 +607,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.8",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.8.tgz",
-      "integrity": "sha512-EMYebwmS4UogpNrTyuCgIETKwE7XA93V7X3YacK2UArm1Xf98w3FsnfAYeMaUqY93bDxih/CSKm3NpUhVWP44A==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.9.tgz",
+      "integrity": "sha512-EaClsiGB/E9wPkujnrMZ71BLVcA8t6DBZu+caJMmqPLF/64S37CiyfrrMbL1UnxDWP2TXsPFH3seWl6Ek/W1bw==",
       "dependencies": {
         "@stencil/core": "^2.16.0",
         "ionicons": "^6.0.2",
@@ -9522,9 +9522,9 @@
       }
     },
     "@ionic/core": {
-      "version": "6.1.8",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.8.tgz",
-      "integrity": "sha512-EMYebwmS4UogpNrTyuCgIETKwE7XA93V7X3YacK2UArm1Xf98w3FsnfAYeMaUqY93bDxih/CSKm3NpUhVWP44A==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.9.tgz",
+      "integrity": "sha512-EaClsiGB/E9wPkujnrMZ71BLVcA8t6DBZu+caJMmqPLF/64S37CiyfrrMbL1UnxDWP2TXsPFH3seWl6Ek/W1bw==",
       "requires": {
         "@stencil/core": "^2.16.0",
         "ionicons": "^6.0.2",
diff --git a/packages/react/package.json b/packages/react/package.json
index 747c1affaf..a45ade9373 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "description": "React specific wrapper for @ionic/core",
   "keywords": [
     "ionic",
@@ -41,7 +41,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "^6.1.8",
+    "@ionic/core": "^6.1.9",
     "ionicons": "^6.0.2",
     "tslib": "*"
   },
diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md
index 645a42864c..e6e48f3ce6 100644
--- a/packages/vue-router/CHANGELOG.md
+++ b/packages/vue-router/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.9](https://github.com/ionic-team/ionic/compare/v6.1.8...v6.1.9) (2022-06-08)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
 ## [6.1.8](https://github.com/ionic-team/ionic/compare/v6.1.7...v6.1.8) (2022-06-01)
 
 **Note:** Version bump only for package @ionic/vue-router
diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json
index c72c8bb483..1dd726668c 100644
--- a/packages/vue-router/package-lock.json
+++ b/packages/vue-router/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue-router",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue-router",
-      "version": "6.1.8",
+      "version": "6.1.9",
       "license": "MIT",
       "dependencies": {
-        "@ionic/vue": "^6.1.8"
+        "@ionic/vue": "^6.1.9"
       },
       "devDependencies": {
         "@types/jest": "^26.0.13",
@@ -563,9 +563,9 @@
       "license": "MIT"
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.8",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.8.tgz",
-      "integrity": "sha512-EMYebwmS4UogpNrTyuCgIETKwE7XA93V7X3YacK2UArm1Xf98w3FsnfAYeMaUqY93bDxih/CSKm3NpUhVWP44A==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.9.tgz",
+      "integrity": "sha512-EaClsiGB/E9wPkujnrMZ71BLVcA8t6DBZu+caJMmqPLF/64S37CiyfrrMbL1UnxDWP2TXsPFH3seWl6Ek/W1bw==",
       "dependencies": {
         "@stencil/core": "^2.16.0",
         "ionicons": "^6.0.2",
@@ -573,11 +573,11 @@
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "6.1.8",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.1.8.tgz",
-      "integrity": "sha512-bziDDBMr6w9XLxkiXeASD/g16g0qvU2cGeaTD9n7+5ucsebVCbHiIblHgT+g1AiYYIoKee01yGAOpe1lC0EahA==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.1.9.tgz",
+      "integrity": "sha512-c8HshEn8w98EnqpCBnjrl/UO4G+/fGbx3XQWujSk5LD4SGetnVUbVhpFqDVv3OKKjxsREHqbJOgf+dCdW9d2Ig==",
       "dependencies": {
-        "@ionic/core": "^6.1.8",
+        "@ionic/core": "^6.1.9",
         "ionicons": "^6.0.2"
       }
     },
@@ -1377,9 +1377,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
-      "integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw==",
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
+      "integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -6618,9 +6618,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.1.8",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.8.tgz",
-      "integrity": "sha512-EMYebwmS4UogpNrTyuCgIETKwE7XA93V7X3YacK2UArm1Xf98w3FsnfAYeMaUqY93bDxih/CSKm3NpUhVWP44A==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.9.tgz",
+      "integrity": "sha512-EaClsiGB/E9wPkujnrMZ71BLVcA8t6DBZu+caJMmqPLF/64S37CiyfrrMbL1UnxDWP2TXsPFH3seWl6Ek/W1bw==",
       "requires": {
         "@stencil/core": "^2.16.0",
         "ionicons": "^6.0.2",
@@ -6628,11 +6628,11 @@
       }
     },
     "@ionic/vue": {
-      "version": "6.1.8",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.1.8.tgz",
-      "integrity": "sha512-bziDDBMr6w9XLxkiXeASD/g16g0qvU2cGeaTD9n7+5ucsebVCbHiIblHgT+g1AiYYIoKee01yGAOpe1lC0EahA==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.1.9.tgz",
+      "integrity": "sha512-c8HshEn8w98EnqpCBnjrl/UO4G+/fGbx3XQWujSk5LD4SGetnVUbVhpFqDVv3OKKjxsREHqbJOgf+dCdW9d2Ig==",
       "requires": {
-        "@ionic/core": "^6.1.8",
+        "@ionic/core": "^6.1.9",
         "ionicons": "^6.0.2"
       }
     },
@@ -7229,9 +7229,9 @@
       }
     },
     "@stencil/core": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.0.tgz",
-      "integrity": "sha512-oKxPYxpH1no0oMFSf8EesuFBcn9hVpoqrpiS2WH0H50RKKL8hhKoxDfn/cNeD12L0Aj7kf6nNtexIllmkYG6lw=="
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.16.1.tgz",
+      "integrity": "sha512-s/UJp9qxExL3DyQPT70kiuWeb3AdjbUZM+5lEIXn30I2DLcLYPOPXfsoWJODieQywq+3vPiLZeIdkoqjf6jcSw=="
     },
     "@tootallnate/once": {
       "version": "1.1.2",
diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json
index b7232e1199..446114a260 100644
--- a/packages/vue-router/package.json
+++ b/packages/vue-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue-router",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "description": "Vue Router integration for @ionic/vue",
   "scripts": {
     "prepublishOnly": "npm run build",
@@ -44,7 +44,7 @@
   },
   "homepage": "https://github.com/ionic-team/ionic#readme",
   "dependencies": {
-    "@ionic/vue": "^6.1.8"
+    "@ionic/vue": "^6.1.9"
   },
   "devDependencies": {
     "@types/jest": "^26.0.13",
diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
index e036bdade7..3ae4fbebdd 100644
--- a/packages/vue/CHANGELOG.md
+++ b/packages/vue/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.1.9](https://github.com/ionic-team/ionic/compare/v6.1.8...v6.1.9) (2022-06-08)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
 ## [6.1.8](https://github.com/ionic-team/ionic/compare/v6.1.7...v6.1.8) (2022-06-01)
 
 
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
index fd6c7cd201..21344f24b2 100644
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue",
-      "version": "6.1.8",
+      "version": "6.1.9",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.1.8",
+        "@ionic/core": "^6.1.9",
         "ionicons": "^6.0.2"
       },
       "devDependencies": {
@@ -53,9 +53,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "6.1.8",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.8.tgz",
-      "integrity": "sha512-EMYebwmS4UogpNrTyuCgIETKwE7XA93V7X3YacK2UArm1Xf98w3FsnfAYeMaUqY93bDxih/CSKm3NpUhVWP44A==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.9.tgz",
+      "integrity": "sha512-EaClsiGB/E9wPkujnrMZ71BLVcA8t6DBZu+caJMmqPLF/64S37CiyfrrMbL1UnxDWP2TXsPFH3seWl6Ek/W1bw==",
       "dependencies": {
         "@stencil/core": "^2.16.0",
         "ionicons": "^6.0.2",
@@ -633,9 +633,9 @@
       }
     },
     "@ionic/core": {
-      "version": "6.1.8",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.8.tgz",
-      "integrity": "sha512-EMYebwmS4UogpNrTyuCgIETKwE7XA93V7X3YacK2UArm1Xf98w3FsnfAYeMaUqY93bDxih/CSKm3NpUhVWP44A==",
+      "version": "6.1.9",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.1.9.tgz",
+      "integrity": "sha512-EaClsiGB/E9wPkujnrMZ71BLVcA8t6DBZu+caJMmqPLF/64S37CiyfrrMbL1UnxDWP2TXsPFH3seWl6Ek/W1bw==",
       "requires": {
         "@stencil/core": "^2.16.0",
         "ionicons": "^6.0.2",
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 0622c2863c..f91f1762b2 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue",
-  "version": "6.1.8",
+  "version": "6.1.9",
   "description": "Vue specific wrapper for @ionic/core",
   "scripts": {
     "prepublishOnly": "npm run build",
@@ -60,7 +60,7 @@
     "vue-router": "^4.0.0-rc.4"
   },
   "dependencies": {
-    "@ionic/core": "^6.1.8",
+    "@ionic/core": "^6.1.9",
     "ionicons": "^6.0.2"
   },
   "vetur": {