fix(toast): add initial opacity based on mode (#30042)

core/src/components/toast/test/basic/toast.e2e.ts

@@ -47,7 +47,8 @@ class ToastFixture {
 /**
  * This behavior does not vary across directions.
  */
-configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md', 'ionic-ios'], directions: ['ltr'] }).forEach(
+  ({ title, screenshot, config }) => {
     test.describe(title('toast: position rendering'), () => {
       let toastFixture: ToastFixture;
       test.beforeEach(async ({ page }) => {
@@ -67,6 +68,13 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ ti
         await toastFixture.screenshot('bottom', screenshot);
       });
     });
+  }
+);
+
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('toast: color rendering'), () => {
     test('should set color correctly', async ({ page }) => {
       const toastFixture = new ToastFixture(page);

core/src/components/toast/toast.ionic.scss

@@ -19,18 +19,42 @@
   z-index: 1001;
 }
 
+// Toast Wrapper
+// --------------------------------------------------
+
 .toast-wrapper {
   @include globals.margin(auto);
 
   display: block;
   position: absolute;
 
-  opacity: 0.01;
-
   // TODO(ROU-10853): replace this value with a layer token.
   z-index: 10;
 }
 
+/*
+ * In `md` mode, the toast fades in when presented.
+ * To achieve the fade-in effect, the initial opacity must be set
+ * to a value less than 1.
+ */
+:host(.md) .toast-wrapper {
+  opacity: 0.01;
+}
+
+/*
+ * In `ios` mode, the toast will move into the screen based
+ * on the `position`. If the `position` is `middle`, the toast
+ * will fade in from the middle of the screen.
+ * To achieve the fade-in effect, the initial opacity must be set
+ * to a value less than 1.
+ */
+:host(.ios) .toast-wrapper.toast-middle {
+  opacity: 0.01;
+}
+
+// Toast Container
+// --------------------------------------------------
+
 .toast-container {
   @include globals.padding(globals.$ion-space-300, globals.$ion-space-400);
 }

core/src/components/toast/toast.tsx

@@ -720,6 +720,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
     const startButtons = allButtons.filter((b) => b.side === 'start');
     const endButtons = allButtons.filter((b) => b.side !== 'start');
     const theme = getIonTheme(this);
+    const mode = getIonMode(this);
     const shape = this.getShape();
     const wrapperClass = {
       'toast-wrapper': true,
@@ -746,6 +747,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
           zIndex: `${60000 + this.overlayIndex}`,
         }}
         class={createColorClasses(this.color, {
+          [mode]: true,
           [theme]: true,
           ...getClassMap(this.cssClass),
           'overlay-hidden': true,