diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts b/core/src/components/modal/test/sheet/modal.e2e.ts
index e8e9df4db36..5983d5e0e0f 100644
--- a/core/src/components/modal/test/sheet/modal.e2e.ts
+++ b/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();
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..3e475ef5c91
Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..cf7bec32fb6
Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..701edd861ae
Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-ios-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ddc018ae7e0
Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..776cdedb98f
Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..0991a125d78
Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts b/core/src/components/toolbar/test/basic/toolbar.e2e.ts
index 7b4006e6526..b9b46793c98 100644
--- a/core/src/components/toolbar/test/basic/toolbar.e2e.ts
+++ b/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(
+ `
Toolbar
`,
- 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(
+ `
+
+
+
+
+ Solid
+
+ Solid
+
+
+ `,
+ config
+ );
+
+ const header = page.locator('ion-header');
+ await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-buttons-inside-content`));
+ });
});
});
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-dark-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..9b741bdb0ee
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-dark-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..23a75b0b928
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-dark-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ee262a07c31
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..9b741bdb0ee
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..23a75b0b928
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ee262a07c31
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-dark-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..8333d4ffef5
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-dark-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..26b1a4465f6
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-dark-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e8a2e4e3eae
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..8333d4ffef5
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..26b1a4465f6
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e8a2e4e3eae
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-ltr-dark-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..15f5fc81a13
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-ltr-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-ltr-dark-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..70f7197ba2b
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-ltr-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-ltr-dark-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..96a9f82c796
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-ltr-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..15f5fc81a13
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..70f7197ba2b
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..96a9f82c796
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-rtl-dark-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..c1fb0e4887f
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-rtl-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-rtl-dark-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e93e4eca96b
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-rtl-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-rtl-dark-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..96f7ac6fd36
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-rtl-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..c1fb0e4887f
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e93e4eca96b
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..96f7ac6fd36
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..71494889134
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..9c106966636
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..cda44e8be65
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..48ab19f0733
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e1098fd8433
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e9d70a0eecf
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..47b20bbe857
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6494689ed27
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..28978fa112c
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..74934869e01
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..0f88266e2b8
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..1e36183bdd0
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..22563f4119a
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..25bab62543b
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..6b207b296b1
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-ltr-dark-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..3c8ef8092cf
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-ltr-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-ltr-dark-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d6354ccd4f4
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-ltr-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-ltr-dark-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..3502ed8b7cc
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-ltr-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5822db61cdd
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d6763d5acb5
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..145f456d762
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-rtl-dark-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2d7c6d439d7
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-rtl-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-rtl-dark-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e8d42cd975c
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-rtl-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-rtl-dark-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..b0f88f275d4
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-ios-rtl-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..0e3560f3def
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..17a31a7cca3
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..2253d860a6d
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-ltr-dark-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2ea57012082
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-ltr-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-ltr-dark-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..89f434bd768
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-ltr-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-ltr-dark-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..2cf08944707
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-ltr-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..79b36c92cad
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..0668b3e0e19
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-rtl-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..705be177742
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-rtl-dark-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ee5256e4dc0
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-rtl-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-rtl-dark-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e8c93f7b131
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-rtl-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-rtl-dark-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..45582f81fdc
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-buttons-inside-content-md-rtl-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-dark-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..4aba9999d78
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-dark-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..dc239bb06bb
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-dark-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..0f66a285c97
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d3ea351dd98
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2868c197b62
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a07a574b179
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-dark-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a286b224a5f
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-dark-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a71ece23e27
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-dark-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..b6b46ade268
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b3669b2e6e3
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b7d0d826a5b
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..6d709d1eadf
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ionic-md-rtl-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ionic-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ionic-md-ltr-dark-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..93dff86442e
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ionic-md-ltr-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ionic-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ionic-md-ltr-dark-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..5b23b962947
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ionic-md-ltr-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ionic-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ionic-md-ltr-dark-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a14aa7ba784
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ionic-md-ltr-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ionic-md-ltr-light-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..93dff86442e
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ionic-md-ltr-light-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..5b23b962947
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ionic-md-ltr-light-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a14aa7ba784
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/toolbar.ionic.scss b/core/src/components/toolbar/toolbar.ionic.scss
index 6e3f1b3a832..a203b10619b 100644
--- a/core/src/components/toolbar/toolbar.ionic.scss
+++ b/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