fix(sheet): fix toolbar not showing contents in ios for ionic theme (#30496)

Issue number: resolves internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
The `ion-toolbar` contents inside the `sheet` were not being displayed
correctly in `iOS`.

## What is the new behavior?
This PR add `z-index` values of the `ion-toolbar`'s `content` and
`background` containers to fix the issue.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information
Before:
<img
src="https://github.com/user-attachments/assets/ac28e3de-9bb3-447d-a6f7-cce40ccd222c"
alt="Sample Image" height="300">

After: 
<img
src="https://github.com/user-attachments/assets/18af1b57-dd70-4783-b0e7-9fffab8402a3"
alt="Sample Image" height="300">

---------

Co-authored-by: ionitron <hi@ionicframework.com>

core/src/components/modal/test/sheet/modal.e2e.ts

@@ -1,29 +1,31 @@
 import { expect } from '@playwright/test';
 import { configs, test, dragElementBy } from '@utils/test/playwright';
 
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('sheet modal: rendering'), () => {
-    test('should not have visual regressions', async ({ page }) => {
-      await page.goto('/src/components/modal/test/sheet', config);
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+configs({ modes: ['ios', 'md', 'ionic-ios', 'ionic-md'], directions: ['ltr'] }).forEach(
+  ({ title, screenshot, config }) => {
+    test.describe(title('sheet modal: rendering'), () => {
+      test('should not have visual regressions', async ({ page }) => {
+        await page.goto('/src/components/modal/test/sheet', config);
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
 
-      await page.click('#sheet-modal');
+        await page.click('#sheet-modal');
 
-      await ionModalDidPresent.next();
+        await ionModalDidPresent.next();
 
-      await expect(page).toHaveScreenshot(screenshot(`modal-sheet-present`), {
-        /**
-         * Animations must be enabled to capture the screenshot.
-         * By default, animations are disabled with toHaveScreenshot,
-         * and when capturing the screenshot will call animation.finish().
-         * This will cause the modal to close and the screenshot capture
-         * to be invalid.
-         */
-        animations: 'allow',
+        await expect(page).toHaveScreenshot(screenshot(`modal-sheet-present`), {
+          /**
+           * Animations must be enabled to capture the screenshot.
+           * By default, animations are disabled with toHaveScreenshot,
+           * and when capturing the screenshot will call animation.finish().
+           * This will cause the modal to close and the screenshot capture
+           * to be invalid.
+           */
+          animations: 'allow',
+        });
       });
     });
-  });
-});
+  }
+);
 
 configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('sheet modal: half screen rendering'), () => {
@@ -62,7 +64,7 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screensh
   });
 });
 
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+configs({ modes: ['ios', 'ionic-ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('sheet modal: backdrop'), () => {
     test.beforeEach(async ({ page }) => {
       await page.goto('/src/components/modal/test/sheet', config);
@@ -175,7 +177,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
         const header = page.locator('.modal-sheet ion-header');
 
-        await dragElementBy(header, page, 0, 125);
+        await dragElementBy(header, page, 0, 110);
 
         await ionBreakpointDidChange.next();
 

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

@@ -1,27 +1,29 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
-configs({ palettes: ['light', 'dark'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('toolbar: basic (LTR only)'), () => {
-    test('should not have visual regressions with text only', async ({ page }) => {
-      await page.setContent(
-        `
+configs({ modes: ['ios', 'md', 'ionic-md'], palettes: ['light', 'dark'], directions: ['ltr'] }).forEach(
+  ({ title, screenshot, config }) => {
+    test.describe(title('toolbar: basic (LTR only)'), () => {
+      test('should not have visual regressions with text only', async ({ page }) => {
+        await page.setContent(
+          `
           <ion-header>
             <ion-toolbar>
               <ion-title>Toolbar</ion-title>
             </ion-toolbar>
           </ion-header>
         `,
-        config
-      );
+          config
+        );
 
-      const header = page.locator('ion-header');
-      await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-only`));
+        const header = page.locator('ion-header');
+        await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-only`));
+      });
     });
-  });
-});
+  }
+);
 
-configs({ palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'], palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('toolbar: basic'), () => {
     test('should truncate long title with ellipsis', async ({ page }) => {
       await page.setContent(
@@ -156,5 +158,25 @@ configs({ palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config })
       const header = page.locator('ion-header');
       await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-icon-buttons`));
     });
+
+    test('should not have visual regressions with text and button inside the content slot', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-header>
+            <ion-toolbar>
+              <ion-button fill="solid">
+                <ion-icon slot="start" name="person-circle"></ion-icon>
+                Solid
+              </ion-button>
+              <span>Solid</span>
+            </ion-toolbar>
+          </ion-header>
+        `,
+        config
+      );
+
+      const header = page.locator('ion-header');
+      await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-buttons-inside-content`));
+    });
   });
 });

core/src/components/toolbar/toolbar.ionic.scss

@@ -17,6 +17,16 @@
 
 .toolbar-container {
   gap: globals.$ion-space-400;
+  // TODO(ROU-10853): replace this value with a layer token
+  z-index: 10;
+}
+
+// Toolbar: Transparent
+// --------------------------------------------------
+
+.toolbar-background {
+  // TODO(ROU-10853): replace this value with a layer token
+  z-index: -1;
 }
 
 // Toolbar: Content