diff --git a/core/api.txt b/core/api.txt
index adb79e3ab9b..b183a34d9cd 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1047,50 +1047,76 @@ ion-input-otp,event,ionChange,InputOtpChangeEventDetail,true
 ion-input-otp,event,ionComplete,InputOtpCompleteEventDetail,true
 ion-input-otp,event,ionFocus,FocusEvent,true
 ion-input-otp,event,ionInput,InputOtpInputEventDetail,true
+ion-input-otp,css-prop,--background,ionic
 ion-input-otp,css-prop,--background,ios
 ion-input-otp,css-prop,--background,md
+ion-input-otp,css-prop,--border-color,ionic
 ion-input-otp,css-prop,--border-color,ios
 ion-input-otp,css-prop,--border-color,md
+ion-input-otp,css-prop,--border-radius,ionic
 ion-input-otp,css-prop,--border-radius,ios
 ion-input-otp,css-prop,--border-radius,md
+ion-input-otp,css-prop,--border-style,ionic
+ion-input-otp,css-prop,--border-style,ios
+ion-input-otp,css-prop,--border-style,md
+ion-input-otp,css-prop,--border-width,ionic
 ion-input-otp,css-prop,--border-width,ios
 ion-input-otp,css-prop,--border-width,md
+ion-input-otp,css-prop,--color,ionic
 ion-input-otp,css-prop,--color,ios
 ion-input-otp,css-prop,--color,md
+ion-input-otp,css-prop,--height,ionic
 ion-input-otp,css-prop,--height,ios
 ion-input-otp,css-prop,--height,md
+ion-input-otp,css-prop,--highlight-color-focused,ionic
 ion-input-otp,css-prop,--highlight-color-focused,ios
 ion-input-otp,css-prop,--highlight-color-focused,md
+ion-input-otp,css-prop,--highlight-color-invalid,ionic
 ion-input-otp,css-prop,--highlight-color-invalid,ios
 ion-input-otp,css-prop,--highlight-color-invalid,md
+ion-input-otp,css-prop,--highlight-color-valid,ionic
 ion-input-otp,css-prop,--highlight-color-valid,ios
 ion-input-otp,css-prop,--highlight-color-valid,md
+ion-input-otp,css-prop,--margin-bottom,ionic
 ion-input-otp,css-prop,--margin-bottom,ios
 ion-input-otp,css-prop,--margin-bottom,md
+ion-input-otp,css-prop,--margin-end,ionic
 ion-input-otp,css-prop,--margin-end,ios
 ion-input-otp,css-prop,--margin-end,md
+ion-input-otp,css-prop,--margin-start,ionic
 ion-input-otp,css-prop,--margin-start,ios
 ion-input-otp,css-prop,--margin-start,md
+ion-input-otp,css-prop,--margin-top,ionic
 ion-input-otp,css-prop,--margin-top,ios
 ion-input-otp,css-prop,--margin-top,md
+ion-input-otp,css-prop,--min-width,ionic
 ion-input-otp,css-prop,--min-width,ios
 ion-input-otp,css-prop,--min-width,md
+ion-input-otp,css-prop,--padding-bottom,ionic
 ion-input-otp,css-prop,--padding-bottom,ios
 ion-input-otp,css-prop,--padding-bottom,md
+ion-input-otp,css-prop,--padding-end,ionic
 ion-input-otp,css-prop,--padding-end,ios
 ion-input-otp,css-prop,--padding-end,md
+ion-input-otp,css-prop,--padding-start,ionic
 ion-input-otp,css-prop,--padding-start,ios
 ion-input-otp,css-prop,--padding-start,md
+ion-input-otp,css-prop,--padding-top,ionic
 ion-input-otp,css-prop,--padding-top,ios
 ion-input-otp,css-prop,--padding-top,md
+ion-input-otp,css-prop,--separator-border-radius,ionic
 ion-input-otp,css-prop,--separator-border-radius,ios
 ion-input-otp,css-prop,--separator-border-radius,md
+ion-input-otp,css-prop,--separator-color,ionic
 ion-input-otp,css-prop,--separator-color,ios
 ion-input-otp,css-prop,--separator-color,md
+ion-input-otp,css-prop,--separator-height,ionic
 ion-input-otp,css-prop,--separator-height,ios
 ion-input-otp,css-prop,--separator-height,md
+ion-input-otp,css-prop,--separator-width,ionic
 ion-input-otp,css-prop,--separator-width,ios
 ion-input-otp,css-prop,--separator-width,md
+ion-input-otp,css-prop,--width,ionic
 ion-input-otp,css-prop,--width,ios
 ion-input-otp,css-prop,--width,md
 
diff --git a/core/src/components/input-otp/input-otp.scss b/core/src/components/input-otp/input-otp.common.scss
similarity index 61%
rename from core/src/components/input-otp/input-otp.scss
rename to core/src/components/input-otp/input-otp.common.scss
index 3b89b8781f4..b905146155d 100644
--- a/core/src/components/input-otp/input-otp.scss
+++ b/core/src/components/input-otp/input-otp.common.scss
@@ -1,6 +1,6 @@
-@import "../../themes/native/native.globals";
+@import "../../themes/mixins";
 
-// Input OTP
+// Input OTP Common
 // --------------------------------------------------
 
 :host {
@@ -10,6 +10,7 @@
    * @prop --border-radius: Border radius of the input boxes
    *
    * @prop --border-width: Border width of the input boxes
+   * @prop --border-style: Border style of the input boxes
    * @prop --border-color: Border color of the input boxes
    *
    * @prop --color: Text color of the input
@@ -41,19 +42,7 @@
   --margin-end: 0;
   --margin-bottom: 0;
   --margin-start: 0;
-  --padding-top: 16px;
-  --padding-end: 0;
-  --padding-bottom: 16px;
-  --padding-start: 0;
-  --color: initial;
-  --min-width: 40px;
-  --separator-width: 8px;
   --separator-height: var(--separator-width);
-  --separator-border-radius: 999px;
-  --separator-color: #{$background-color-step-150};
-  --highlight-color-focused: #{ion-color(primary, base)};
-  --highlight-color-valid: #{ion-color(success, base)};
-  --highlight-color-invalid: #{ion-color(danger, base)};
 
   /**
    * This is a private API that is used to switch
@@ -65,8 +54,6 @@
 
   display: block;
   position: relative;
-
-  font-size: dynamic-font(14px);
 }
 
 .input-otp-group {
@@ -101,7 +88,7 @@
   height: var(--height);
 
   border-width: var(--border-width);
-  border-style: solid;
+  border-style: var(--border-style);
   border-color: var(--border-color);
 
   background: var(--background);
@@ -121,12 +108,6 @@
 // ----------------------------------------------------------------
 
 .input-otp-description {
-  color: $text-color-step-300;
-
-  font-size: dynamic-font(12px);
-
-  line-height: dynamic-font(20px);
-
   text-align: center;
 }
 
@@ -148,48 +129,6 @@
   background: var(--separator-color);
 }
 
-// Sizes
-// --------------------------------------------------
-
-:host(.input-otp-size-small) {
-  --width: 40px;
-  --height: 40px;
-}
-
-:host(.input-otp-size-small) .input-otp-group {
-  gap: 8px;
-}
-
-:host(.input-otp-size-medium) {
-  --width: 48px;
-  --height: 48px;
-}
-
-:host(.input-otp-size-large) {
-  --width: 56px;
-  --height: 56px;
-}
-
-:host(.input-otp-size-medium) .input-otp-group,
-:host(.input-otp-size-large) .input-otp-group {
-  gap: 12px;
-}
-
-// Shapes
-// --------------------------------------------------
-
-:host(.input-otp-shape-round) {
-  --border-radius: 16px;
-}
-
-:host(.input-otp-shape-soft) {
-  --border-radius: 8px;
-}
-
-:host(.input-otp-shape-rectangular) {
-  --border-radius: 0;
-}
-
 // Fills
 // --------------------------------------------------
 
@@ -197,23 +136,9 @@
   --background: none;
 }
 
-:host(.input-otp-fill-solid) {
-  --border-color: #{$background-color-step-50};
-  --background: #{$background-color-step-50};
-}
-
 // States
 // --------------------------------------------------
 
-:host(.input-otp-disabled) {
-  --color: #{$text-color-step-650};
-}
-
-:host(.input-otp-fill-outline.input-otp-disabled) {
-  --background: #{$background-color-step-50};
-  --border-color: #{$background-color-step-100};
-}
-
 :host(.input-otp-disabled),
 :host(.input-otp-disabled) .native-input:disabled {
   cursor: not-allowed;
@@ -225,16 +150,6 @@
   outline: none;
 }
 
-:host(.input-otp-fill-outline.input-otp-readonly) {
-  --background: #{$background-color-step-50};
-}
-
-:host(.input-otp-fill-solid.input-otp-disabled),
-:host(.input-otp-fill-solid.input-otp-readonly) {
-  --border-color: #{$background-color-step-100};
-  --background: #{$background-color-step-100};
-}
-
 // Input Highlight
 // ----------------------------------------------------------------
 
@@ -270,38 +185,3 @@
 :host(.ion-touched.ion-invalid) {
   --border-color: var(--highlight-color);
 }
-
-// Colors
-// ----------------------------------------------------------------
-
-:host(.ion-color) {
-  --highlight-color-focused: #{current-color(base)};
-}
-
-// Outline border should match the current color
-// and the solid border should match when focused
-:host(.input-otp-fill-outline.ion-color) .native-input,
-:host(.input-otp-fill-solid.ion-color) .native-input:focus {
-  border-color: current-color(base, 0.6);
-}
-
-// Invalid
-:host(.input-otp-fill-outline.ion-color.ion-invalid) .native-input,
-:host(.input-otp-fill-solid.ion-color.ion-invalid) .native-input,
-:host(.input-otp-fill-outline.ion-color.has-focus.ion-invalid) .native-input,
-:host(.input-otp-fill-solid.ion-color.has-focus.ion-invalid) .native-input {
-  border-color: ion-color(danger, base);
-}
-
-// Valid
-:host(.input-otp-fill-outline.ion-color.ion-valid) .native-input,
-:host(.input-otp-fill-solid.ion-color.ion-valid) .native-input,
-:host(.input-otp-fill-outline.ion-color.has-focus.ion-valid) .native-input,
-:host(.input-otp-fill-solid.ion-color.has-focus.ion-valid) .native-input {
-  border-color: ion-color(success, base);
-}
-
-// Outline & Disabled
-:host(.input-otp-fill-outline.input-otp-disabled.ion-color) .native-input {
-  border-color: current-color(base, 0.3);
-}
diff --git a/core/src/components/input-otp/input-otp.ionic.scss b/core/src/components/input-otp/input-otp.ionic.scss
new file mode 100644
index 00000000000..ac67b4c455e
--- /dev/null
+++ b/core/src/components/input-otp/input-otp.ionic.scss
@@ -0,0 +1,149 @@
+@use "../../themes/ionic/ionic.globals.scss" as globals;
+@use "./input-otp.common";
+
+// Ionic Input OTP
+// --------------------------------------------------
+
+:host {
+  --padding-top: #{globals.$ion-space-400};
+  --padding-end: #{globals.$ion-space-0};
+  --padding-bottom: #{globals.$ion-space-400};
+  --padding-start: #{globals.$ion-space-0};
+  --color: #{globals.$ion-text-default};
+  --min-width: #{globals.$ion-scale-1000};
+  --border-width: #{globals.$ion-border-size-025};
+  --border-style: #{globals.$ion-border-style-solid};
+  --border-color: #{globals.$ion-border-input-default};
+  --separator-width: #{globals.$ion-scale-200};
+  --separator-border-radius: #{globals.$ion-border-radius-full};
+  --separator-color: #{globals.$ion-bg-neutral-subtle-press};
+  --highlight-color-focused: #{globals.$ion-border-focus-default};
+  --highlight-color-valid: #{globals.$ion-border-success};
+  --highlight-color-invalid: #{globals.$ion-border-danger-default};
+
+  @include globals.typography(globals.$ion-body-md-regular);
+}
+
+:host(.has-focus) .native-input:focus {
+  --border-width: #{globals.$ion-border-size-050};
+}
+
+// Input Description
+// ----------------------------------------------------------------
+
+.input-otp-description {
+  @include globals.typography(globals.$ion-body-sm-medium);
+
+  color: globals.$ion-text-subtlest;
+}
+
+// Sizes
+// --------------------------------------------------
+
+:host(.input-otp-size-small) {
+  --width: #{globals.$ion-scale-1000};
+  --height: #{globals.$ion-scale-1000};
+}
+
+:host(.input-otp-size-small) .input-otp-group {
+  gap: globals.$ion-space-200;
+}
+
+:host(.input-otp-size-medium) {
+  --width: #{globals.$ion-scale-1200};
+  --height: #{globals.$ion-scale-1200};
+}
+
+:host(.input-otp-size-large) {
+  --width: #{globals.$ion-scale-1400};
+  --height: #{globals.$ion-scale-1400};
+}
+
+:host(.input-otp-size-medium) .input-otp-group,
+:host(.input-otp-size-large) .input-otp-group {
+  gap: globals.$ion-space-300;
+}
+
+// Shapes
+// --------------------------------------------------
+
+:host(.input-otp-shape-round) {
+  --border-radius: #{globals.$ion-border-radius-400};
+}
+
+:host(.input-otp-shape-soft) {
+  --border-radius: #{globals.$ion-border-radius-200};
+}
+
+:host(.input-otp-shape-rectangular) {
+  --border-radius: #{globals.$ion-border-radius-0};
+}
+
+// Fills
+// --------------------------------------------------
+
+:host(.input-otp-fill-solid) {
+  --border-color: #{globals.$ion-bg-input-bold-default};
+  --background: #{globals.$ion-bg-input-bold-default};
+}
+
+// States
+// --------------------------------------------------
+
+:host(.input-otp-disabled) {
+  --color: #{globals.$ion-text-disabled};
+}
+
+:host(.input-otp-fill-outline.input-otp-disabled) {
+  --background: #{globals.$ion-bg-input-disabled};
+  --border-color: #{globals.$ion-border-disabled};
+}
+
+:host(.input-otp-fill-outline.input-otp-readonly) {
+  --background: #{globals.$ion-bg-input-read-only};
+}
+
+:host(.input-otp-fill-solid.input-otp-disabled) {
+  --border-color: #{globals.$ion-bg-input-bold-disabled};
+  --background: #{globals.$ion-bg-input-bold-disabled};
+}
+
+:host(.input-otp-fill-solid.input-otp-readonly) {
+  --border-color: #{globals.$ion-bg-input-bold-read-only};
+  --background: #{globals.$ion-bg-input-bold-read-only};
+}
+
+// Colors
+// ----------------------------------------------------------------
+
+:host(.ion-color) {
+  --highlight-color-focused: #{globals.current-color(base)};
+}
+
+// Outline border should match the current color
+// and the solid border should match when focused
+:host(.input-otp-fill-outline.ion-color) .native-input,
+:host(.input-otp-fill-solid.ion-color) .native-input:focus {
+  border-color: globals.current-color(base, 0.6);
+}
+
+// Invalid
+:host(.input-otp-fill-outline.ion-color.ion-invalid) .native-input,
+:host(.input-otp-fill-solid.ion-color.ion-invalid) .native-input,
+:host(.input-otp-fill-outline.ion-color.has-focus.ion-invalid) .native-input,
+:host(.input-otp-fill-solid.ion-color.has-focus.ion-invalid) .native-input {
+  border-color: globals.ion-color(danger, base);
+}
+
+// Valid
+:host(.input-otp-fill-outline.ion-color.ion-valid) .native-input,
+:host(.input-otp-fill-solid.ion-color.ion-valid) .native-input,
+:host(.input-otp-fill-outline.ion-color.has-focus.ion-valid) .native-input,
+:host(.input-otp-fill-solid.ion-color.has-focus.ion-valid) .native-input {
+  border-color: globals.ion-color(success, base);
+}
+
+// Outline & Disabled
+:host(.input-otp-fill-outline.input-otp-disabled.ion-color) .native-input {
+  border-color: globals.current-color(base, 0.3);
+}
diff --git a/core/src/components/input-otp/input-otp.ios.scss b/core/src/components/input-otp/input-otp.ios.scss
index b2b823853c4..bfb3afed649 100644
--- a/core/src/components/input-otp/input-otp.ios.scss
+++ b/core/src/components/input-otp/input-otp.ios.scss
@@ -1,4 +1,4 @@
-@import "./input-otp";
+@import "./input-otp.native";
 @import "../../themes/native/native.globals.ios";
 
 // iOS Input OTP
diff --git a/core/src/components/input-otp/input-otp.md.scss b/core/src/components/input-otp/input-otp.md.scss
index 89ada109574..eb21b802d3e 100644
--- a/core/src/components/input-otp/input-otp.md.scss
+++ b/core/src/components/input-otp/input-otp.md.scss
@@ -1,4 +1,4 @@
-@import "./input-otp";
+@import "./input-otp.native";
 @import "../../themes/native/native.globals.md";
 
 // Material Design Input OTP
diff --git a/core/src/components/input-otp/input-otp.native.scss b/core/src/components/input-otp/input-otp.native.scss
new file mode 100644
index 00000000000..daf2b3ff877
--- /dev/null
+++ b/core/src/components/input-otp/input-otp.native.scss
@@ -0,0 +1,145 @@
+@import "../../themes/native/native.globals";
+@import "./input-otp.common";
+
+// Input OTP Native
+// --------------------------------------------------
+
+:host {
+  --padding-top: 16px;
+  --padding-end: 0;
+  --padding-bottom: 16px;
+  --padding-start: 0;
+  --color: initial;
+  --min-width: 40px;
+  --border-style: solid;
+  --separator-width: 8px;
+  --separator-border-radius: 999px;
+  --separator-color: #{$background-color-step-150};
+  --highlight-color-focused: #{ion-color(primary, base)};
+  --highlight-color-valid: #{ion-color(success, base)};
+  --highlight-color-invalid: #{ion-color(danger, base)};
+
+  font-size: dynamic-font(14px);
+}
+
+// Input Description
+// ----------------------------------------------------------------
+
+.input-otp-description {
+  color: $text-color-step-300;
+
+  font-size: dynamic-font(12px);
+
+  line-height: dynamic-font(20px);
+}
+
+// Sizes
+// --------------------------------------------------
+
+:host(.input-otp-size-small) {
+  --width: 40px;
+  --height: 40px;
+}
+
+:host(.input-otp-size-small) .input-otp-group {
+  gap: 8px;
+}
+
+:host(.input-otp-size-medium) {
+  --width: 48px;
+  --height: 48px;
+}
+
+:host(.input-otp-size-large) {
+  --width: 56px;
+  --height: 56px;
+}
+
+:host(.input-otp-size-medium) .input-otp-group,
+:host(.input-otp-size-large) .input-otp-group {
+  gap: 12px;
+}
+
+// Shapes
+// --------------------------------------------------
+
+:host(.input-otp-shape-round) {
+  --border-radius: 16px;
+}
+
+:host(.input-otp-shape-soft) {
+  --border-radius: 8px;
+}
+
+:host(.input-otp-shape-rectangular) {
+  --border-radius: 0;
+}
+
+// Fills
+// --------------------------------------------------
+
+:host(.input-otp-fill-outline) {
+  --background: none;
+}
+
+:host(.input-otp-fill-solid) {
+  --border-color: #{$background-color-step-50};
+  --background: #{$background-color-step-50};
+}
+
+// States
+// --------------------------------------------------
+
+:host(.input-otp-disabled) {
+  --color: #{$text-color-step-650};
+}
+
+:host(.input-otp-fill-outline.input-otp-disabled) {
+  --background: #{$background-color-step-50};
+  --border-color: #{$background-color-step-100};
+}
+
+:host(.input-otp-fill-outline.input-otp-readonly) {
+  --background: #{$background-color-step-50};
+}
+
+:host(.input-otp-fill-solid.input-otp-disabled),
+:host(.input-otp-fill-solid.input-otp-readonly) {
+  --border-color: #{$background-color-step-100};
+  --background: #{$background-color-step-100};
+}
+
+// Colors
+// ----------------------------------------------------------------
+
+:host(.ion-color) {
+  --highlight-color-focused: #{current-color(base)};
+}
+
+// Outline border should match the current color
+// and the solid border should match when focused
+:host(.input-otp-fill-outline.ion-color) .native-input,
+:host(.input-otp-fill-solid.ion-color) .native-input:focus {
+  border-color: current-color(base, 0.6);
+}
+
+// Invalid
+:host(.input-otp-fill-outline.ion-color.ion-invalid) .native-input,
+:host(.input-otp-fill-solid.ion-color.ion-invalid) .native-input,
+:host(.input-otp-fill-outline.ion-color.has-focus.ion-invalid) .native-input,
+:host(.input-otp-fill-solid.ion-color.has-focus.ion-invalid) .native-input {
+  border-color: ion-color(danger, base);
+}
+
+// Valid
+:host(.input-otp-fill-outline.ion-color.ion-valid) .native-input,
+:host(.input-otp-fill-solid.ion-color.ion-valid) .native-input,
+:host(.input-otp-fill-outline.ion-color.has-focus.ion-valid) .native-input,
+:host(.input-otp-fill-solid.ion-color.has-focus.ion-valid) .native-input {
+  border-color: ion-color(success, base);
+}
+
+// Outline & Disabled
+:host(.input-otp-fill-outline.input-otp-disabled.ion-color) .native-input {
+  border-color: current-color(base, 0.3);
+}
diff --git a/core/src/components/input-otp/input-otp.tsx b/core/src/components/input-otp/input-otp.tsx
index 3e6cc3855b2..7c3de512860 100644
--- a/core/src/components/input-otp/input-otp.tsx
+++ b/core/src/components/input-otp/input-otp.tsx
@@ -21,6 +21,7 @@ import type {
   styleUrls: {
     ios: 'input-otp.ios.scss',
     md: 'input-otp.md.scss',
+    ionic: 'input-otp.ionic.scss',
   },
   scoped: true,
 })
diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts b/core/src/components/input-otp/test/color/input-otp.e2e.ts
index 6fb970e838a..5f2d950b398 100644
--- a/core/src/components/input-otp/test/color/input-otp.e2e.ts
+++ b/core/src/components/input-otp/test/color/input-otp.e2e.ts
@@ -3,7 +3,7 @@ import { configs, test } from '@utils/test/playwright';
 
 const VALID_FILLS = ['outline', 'solid'];
 
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('input-otp: color'), () => {
     // Test all colors with all fills
     VALID_FILLS.forEach((fill) => {
diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..109c39a404c
Binary files /dev/null and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c0a3639f021
Binary files /dev/null and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..550e16d9622
Binary files /dev/null and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2e44560fab8
Binary files /dev/null and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..32f40090e2c
Binary files /dev/null and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e36a00b0d37
Binary files /dev/null and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-readonly-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-readonly-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..484d875d186
Binary files /dev/null and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-readonly-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-readonly-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-readonly-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f7bbe8d2b6f
Binary files /dev/null and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-readonly-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-readonly-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-readonly-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ded3f2016f6
Binary files /dev/null and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-outline-readonly-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f5871c64632
Binary files /dev/null and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6c112a278bc
Binary files /dev/null and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f72f8678466
Binary files /dev/null and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..50e79fdf688
Binary files /dev/null and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..edfe217f224
Binary files /dev/null and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c90247bac4d
Binary files /dev/null and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-readonly-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-readonly-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5b699cf5739
Binary files /dev/null and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-readonly-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-readonly-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-readonly-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2116255030e
Binary files /dev/null and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-readonly-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-readonly-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-readonly-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9a85f69c0b0
Binary files /dev/null and b/core/src/components/input-otp/test/color/input-otp.e2e.ts-snapshots/input-otp-color-solid-readonly-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/fill/input-otp.e2e.ts b/core/src/components/input-otp/test/fill/input-otp.e2e.ts
index b20e93a4591..aa0fe2fab35 100644
--- a/core/src/components/input-otp/test/fill/input-otp.e2e.ts
+++ b/core/src/components/input-otp/test/fill/input-otp.e2e.ts
@@ -3,7 +3,7 @@ import { configs, test } from '@utils/test/playwright';
 
 const VALID_FILLS = ['outline', 'solid'];
 
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('input-otp: fill'), () => {
     VALID_FILLS.forEach((fill) => {
       test(`${fill} fill should not have visual regressions`, async ({ page }) => {
diff --git a/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..102d6e2d435
Binary files /dev/null and b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..94ffc68216f
Binary files /dev/null and b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..0e890e1b605
Binary files /dev/null and b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f307b36447b
Binary files /dev/null and b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a2d52be8fe7
Binary files /dev/null and b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..445a2da64a1
Binary files /dev/null and b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-readonly-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-readonly-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..7498826c7a1
Binary files /dev/null and b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-readonly-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-readonly-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-readonly-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..0418f27cbdd
Binary files /dev/null and b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-readonly-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-readonly-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-readonly-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..da2237246ac
Binary files /dev/null and b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-outline-readonly-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..3982b4862ae
Binary files /dev/null and b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f8dfc81ea58
Binary files /dev/null and b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4d898070167
Binary files /dev/null and b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..74f3a2acd6d
Binary files /dev/null and b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..95b56ca7cb4
Binary files /dev/null and b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..19d26073e9a
Binary files /dev/null and b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-readonly-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-readonly-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..c25cae69e90
Binary files /dev/null and b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-readonly-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-readonly-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-readonly-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a3520690a43
Binary files /dev/null and b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-readonly-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-readonly-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-readonly-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..612f4b6ba14
Binary files /dev/null and b/core/src/components/input-otp/test/fill/input-otp.e2e.ts-snapshots/input-otp-solid-readonly-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts b/core/src/components/input-otp/test/separators/input-otp.e2e.ts
index 37c9bb8bb4a..7bfb56fbad8 100644
--- a/core/src/components/input-otp/test/separators/input-otp.e2e.ts
+++ b/core/src/components/input-otp/test/separators/input-otp.e2e.ts
@@ -30,7 +30,7 @@ const collectWarnings = async (page: E2EPage): Promise<string[]> => {
   return warnings;
 };
 
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('input-otp: separators'), () => {
     // Test separators with all sizes
     VALID_SIZES.forEach((size) => {
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-large-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..c166d6deef1
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-large-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..81f2d19a9cf
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-large-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..58d2ed02dd9
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..13fb93b40de
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..046e06319f4
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-medium-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-medium-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f595d669ce1
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-medium-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-small-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2e98f6de89e
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-small-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..5ec47294348
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-small-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a9ee37a93bb
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-all-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-large-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..942599766e8
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-large-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1e5a26fdd47
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-large-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..0f87dcebd9d
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d758858cc3d
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6985dec0f05
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-medium-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-medium-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..94c0c2bf680
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-medium-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-small-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..87cd77764ba
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-small-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1601717a630
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-small-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..2b260fbbf4f
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-one-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-large-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d3f09d4a5ca
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-large-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ca21b9a9a98
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-large-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..fb3c8efce37
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..311ff554059
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..26fc378309f
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-medium-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-medium-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..583c0b7b065
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-medium-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-small-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ad7424fd469
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-small-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..3bb81300356
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-small-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..13e9edd873c
Binary files /dev/null and b/core/src/components/input-otp/test/separators/input-otp.e2e.ts-snapshots/input-otp-separators-two-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts b/core/src/components/input-otp/test/shape/input-otp.e2e.ts
index 766f641a6b1..02e50b60b90 100644
--- a/core/src/components/input-otp/test/shape/input-otp.e2e.ts
+++ b/core/src/components/input-otp/test/shape/input-otp.e2e.ts
@@ -4,7 +4,7 @@ import { configs, test } from '@utils/test/playwright';
 const VALID_SHAPES = ['rectangular', 'round', 'soft'];
 const VALID_SIZES = ['small', 'medium', 'large'];
 
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('input-otp: shape'), () => {
     // Test all shapes with all sizes
     VALID_SHAPES.forEach((shape) => {
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-large-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..52f778ebaa2
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-large-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..bcc24c260a1
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-large-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f0f1491dac8
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..bbb86302185
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..607aeeaf2a9
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-medium-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-medium-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..5b7ad629f05
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-medium-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-small-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a652c83250d
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-small-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a0ff04a23c7
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-small-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..2d533b8bf10
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-rectangular-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-large-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..13d4deb71f8
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-large-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..aa56c5e8d0f
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-large-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..226fb847634
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f307b36447b
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a2d52be8fe7
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-medium-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-medium-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..445a2da64a1
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-medium-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-small-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..62cfa9bbdad
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-small-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b81445f86af
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-small-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..967ea32af27
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-round-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-large-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d696424997d
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-large-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..dec9eccc10d
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-large-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..1238722c11d
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..35b41100eaf
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..88edce86c2d
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-medium-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-medium-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..fee9755ac9c
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-medium-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-small-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..c8c57845562
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-small-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..cbdcf455f41
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-small-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..22c09a60341
Binary files /dev/null and b/core/src/components/input-otp/test/shape/input-otp.e2e.ts-snapshots/input-otp-soft-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/size/input-otp.e2e.ts b/core/src/components/input-otp/test/size/input-otp.e2e.ts
index 989fc30fb93..9fc3686bca8 100644
--- a/core/src/components/input-otp/test/size/input-otp.e2e.ts
+++ b/core/src/components/input-otp/test/size/input-otp.e2e.ts
@@ -3,7 +3,7 @@ import { configs, test } from '@utils/test/playwright';
 
 const VALID_SIZES = ['small', 'medium', 'large'];
 
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('input-otp: size'), () => {
     VALID_SIZES.forEach((size) => {
       test(`${size} size should not have visual regressions`, async ({ page }) => {
diff --git a/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-large-collapsed-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-large-collapsed-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f740aa6d1e8
Binary files /dev/null and b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-large-collapsed-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-large-collapsed-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-large-collapsed-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..401eeb0c1fc
Binary files /dev/null and b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-large-collapsed-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-large-collapsed-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-large-collapsed-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..b7f79d24c30
Binary files /dev/null and b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-large-collapsed-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-large-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..13d4deb71f8
Binary files /dev/null and b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-large-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..aa56c5e8d0f
Binary files /dev/null and b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-large-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..226fb847634
Binary files /dev/null and b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-medium-collapsed-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-medium-collapsed-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..94f68502804
Binary files /dev/null and b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-medium-collapsed-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-medium-collapsed-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-medium-collapsed-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..4fdc67acabc
Binary files /dev/null and b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-medium-collapsed-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-medium-collapsed-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-medium-collapsed-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..5f0e407b25a
Binary files /dev/null and b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-medium-collapsed-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f307b36447b
Binary files /dev/null and b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-medium-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a2d52be8fe7
Binary files /dev/null and b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-medium-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-medium-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-medium-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..445a2da64a1
Binary files /dev/null and b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-medium-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-small-collapsed-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-small-collapsed-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..be09d8a654f
Binary files /dev/null and b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-small-collapsed-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-small-collapsed-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-small-collapsed-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..07255471f3f
Binary files /dev/null and b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-small-collapsed-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-small-collapsed-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-small-collapsed-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..164a0c2f48d
Binary files /dev/null and b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-small-collapsed-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-small-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..62cfa9bbdad
Binary files /dev/null and b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-small-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b81445f86af
Binary files /dev/null and b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-small-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..967ea32af27
Binary files /dev/null and b/core/src/components/input-otp/test/size/input-otp.e2e.ts-snapshots/input-otp-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ