diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 915776e762..52d27b7d9d 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -21,65 +21,22 @@
/packages/angular-server @sean-perkins @thetaPC
/packages/angular/test @thetaPC
-## React
-
-/packages/react/ @amandaejohnston
-/packages/react-router @amandaejohnston
-/packages/react/test-app/
-/packages/react-router/test-app/
-
## Vue
-/packages/vue/ @liamdebeasi @thetaPC
+/packages/vue/ @thetaPC
/packages/vue-router/ @liamdebeasi @thetaPC
/packages/vue/test/ @thetaPC
/packages/vue-router/__tests__ @thetaPC
# Components
-/core/src/components/accordion/ @liamdebeasi
-/core/src/components/accordion-group/ @liamdebeasi
-
-/core/src/components/checkbox/ @amandaejohnston
-
-/core/src/components/datetime/ @liamdebeasi @amandaejohnston @sean-perkins
-/core/src/components/datetime-button/ @liamdebeasi
-
-/core/src/components/item/ @brandyscarney
-
-/core/src/components/menu/ @amandaejohnston
-/core/src/components/menu-toggle/ @amandaejohnston
+/core/src/components/datetime/ @sean-perkins
/core/src/components/nav/ @sean-perkins
/core/src/components/nav-link/ @sean-perkins
-/core/src/components/picker/ @liamdebeasi
-/core/src/components/picker-column/ @liamdebeasi
-
-/core/src/components/radio/ @amandaejohnston
-/core/src/components/radio-group/ @amandaejohnston
-
-/core/src/components/refresher/ @liamdebeasi
-/core/src/components/refresher-content/ @liamdebeasi
-
-/core/src/components/searchbar/ @brandyscarney
-
-/core/src/components/segment/ @brandyscarney
-/core/src/components/segment-button/ @brandyscarney
-
-/core/src/components/skeleton-text/ @brandyscarney
-
# Utilities
-/core/src/utils/animation/ @liamdebeasi
/core/src/utils/content/ @sean-perkins
/core/src/utils/gesture/ @liamdebeasi
/core/src/utils/input-shims/ @liamdebeasi
-/core/src/utils/keyboard/ @liamdebeasi
-/core/src/utils/logging/ @amandaejohnston
-/core/src/utils/sanitization/ @liamdebeasi
-/core/src/utils/tap-click/ @liamdebeasi
-/core/src/utils/transition/ @liamdebeasi
-
-/core/src/css/ @brandyscarney
-/core/src/themes/ @brandyscarney
diff --git a/.github/workflows/assign-issues.yml b/.github/workflows/assign-issues.yml
index da273a8c4b..b0fc3ee99e 100644
--- a/.github/workflows/assign-issues.yml
+++ b/.github/workflows/assign-issues.yml
@@ -13,6 +13,6 @@ jobs:
- name: 'Auto-assign issue'
uses: pozil/auto-assign-issue@edee9537367a8fbc625d27f9e10aa8bad47b8723 # v1.13.0
with:
- assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, mapsandapps, thetaPC
+ assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, thetaPC
numOfAssignee: 1
allowSelfAssign: false
diff --git a/.github/workflows/release-ionic.yml b/.github/workflows/release-ionic.yml
index 4532d49955..4be91285a4 100644
--- a/.github/workflows/release-ionic.yml
+++ b/.github/workflows/release-ionic.yml
@@ -41,8 +41,8 @@ jobs:
uses: ./.github/workflows/actions/upload-archive
with:
name: ionic-docs
- output: docs/DocsBuild.zip
- paths: docs/core.json docs/core.d.ts
+ output: packages/docs/DocsBuild.zip
+ paths: packages/docs/core.json packages/docs/core.d.ts
release-docs:
needs: [release-core]
@@ -53,7 +53,7 @@ jobs:
uses: ./.github/workflows/actions/download-archive
with:
name: ionic-docs
- path: ./docs
+ path: ./packages/docs
filename: DocsBuild.zip
- uses: ./.github/workflows/actions/publish-npm
with:
@@ -61,7 +61,7 @@ jobs:
tag: ${{ inputs.tag }}
version: ${{ inputs.version }}
preid: ${{ inputs.preid }}
- working-directory: 'docs'
+ working-directory: 'packages/docs'
token: ${{ secrets.NPM_TOKEN }}
release-angular:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0111f0906e..62a8d92890 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,19 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
+
+
+### Bug Fixes
+
+* **button:** activated outline button in toolbar no longer blends into background on MD dark mode ([#29216](https://github.com/ionic-team/ionic-framework/issues/29216)) ([ee5da7a](https://github.com/ionic-team/ionic-framework/commit/ee5da7a747c0a0b420c5e371a9fe9ec4938d179e))
+* **popover:** viewport can be scrolled if no content present ([#29215](https://github.com/ionic-team/ionic-framework/issues/29215)) ([f08759c](https://github.com/ionic-team/ionic-framework/commit/f08759c2b8256ff66f8d1901bd8e0be4617db262)), closes [#29211](https://github.com/ionic-team/ionic-framework/issues/29211)
+
+
+
+
+
# [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27)
**Note:** Version bump only for package ionic-framework
diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md
index ffc1fae884..f36658520d 100644
--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,19 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
+
+
+### Bug Fixes
+
+* **button:** activated outline button in toolbar no longer blends into background on MD dark mode ([#29216](https://github.com/ionic-team/ionic-framework/issues/29216)) ([ee5da7a](https://github.com/ionic-team/ionic-framework/commit/ee5da7a747c0a0b420c5e371a9fe9ec4938d179e))
+* **popover:** viewport can be scrolled if no content present ([#29215](https://github.com/ionic-team/ionic-framework/issues/29215)) ([f08759c](https://github.com/ionic-team/ionic-framework/commit/f08759c2b8256ff66f8d1901bd8e0be4617db262)), closes [#29211](https://github.com/ionic-team/ionic-framework/issues/29211)
+
+
+
+
+
# [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27)
**Note:** Version bump only for package @ionic/core
diff --git a/core/package-lock.json b/core/package-lock.json
index 9c701fee74..7e295ff06a 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1793,9 +1793,9 @@
}
},
"node_modules/@stencil/vue-output-target": {
- "version": "0.8.7",
- "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.7.tgz",
- "integrity": "sha512-hgOzbKKgLdCFrhLpmaw/qQrPSXl6hZ09K+j3p/iWh3esq6sxnwuW1PJKLniwkT4Z/JlDIk6stGPGQYi+WE5I2Q==",
+ "version": "0.8.8",
+ "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.8.tgz",
+ "integrity": "sha512-xrpz92lmTuLgwY9CLgl2Q14+zBXfBuXiRS6uXFPfeaFo0pe+do8cZitOOQ8i8tcoCa/tAqgD9B9CD+yQehSIGg==",
"dev": true,
"peerDependencies": {
"@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
@@ -11248,9 +11248,9 @@
"requires": {}
},
"@stencil/vue-output-target": {
- "version": "0.8.7",
- "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.7.tgz",
- "integrity": "sha512-hgOzbKKgLdCFrhLpmaw/qQrPSXl6hZ09K+j3p/iWh3esq6sxnwuW1PJKLniwkT4Z/JlDIk6stGPGQYi+WE5I2Q==",
+ "version": "0.8.8",
+ "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.8.8.tgz",
+ "integrity": "sha512-xrpz92lmTuLgwY9CLgl2Q14+zBXfBuXiRS6uXFPfeaFo0pe+do8cZitOOQ8i8tcoCa/tAqgD9B9CD+yQehSIGg==",
"dev": true,
"requires": {}
},
diff --git a/core/src/components/button/button.ios.scss b/core/src/components/button/button.ios.scss
index d157e0cc88..b3d5e21488 100644
--- a/core/src/components/button/button.ios.scss
+++ b/core/src/components/button/button.ios.scss
@@ -247,3 +247,12 @@
:host(.button-solid.ion-color.ion-activated) .button-native::after {
background: #{current-color(shade)};
}
+
+
+// Activated Button in Toolbar
+// --------------------------------------------------
+
+:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
+ background: var(--ion-toolbar-color, var(--color));
+ color: #{var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))};
+}
diff --git a/core/src/components/button/button.md.scss b/core/src/components/button/button.md.scss
index b73065a2a0..556cc78028 100644
--- a/core/src/components/button/button.md.scss
+++ b/core/src/components/button/button.md.scss
@@ -196,3 +196,12 @@
background: #{current-color(base)};
}
}
+
+
+// Activated Button in Toolbar
+// --------------------------------------------------
+
+:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
+ background: var(--ion-toolbar-background, var(--color));
+ color: #{var(--ion-toolbar-color, var(--background), ion-color(primary, contrast))};
+}
diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss
index 99c187beac..acb57319b4 100644
--- a/core/src/components/button/button.scss
+++ b/core/src/components/button/button.scss
@@ -325,11 +325,3 @@ ion-ripple-effect {
background: #{var(--ion-toolbar-color, var(--background))};
color: #{var(--ion-toolbar-background, var(--color))};
}
-
-// Activated Button in Toolbar
-// --------------------------------------------------
-
-:host(.button-outline.ion-activated.in-toolbar:not(.ion-color):not(.in-toolbar-color)) .button-native {
- background: var(--ion-toolbar-color, var(--color));
- color: #{var(--ion-toolbar-background, var(--background), ion-color(primary, contrast))};
-}
diff --git a/core/src/components/popover/popover.scss b/core/src/components/popover/popover.scss
index 4181df6e69..ecd8acf2dc 100644
--- a/core/src/components/popover/popover.scss
+++ b/core/src/components/popover/popover.scss
@@ -101,8 +101,6 @@
display: flex;
flex-direction: column;
-
- overflow: hidden;
}
// Nested Popovers
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts b/core/src/components/popover/test/basic/popover.e2e.ts
index 81b76364f2..f05291ee2a 100644
--- a/core/src/components/popover/test/basic/popover.e2e.ts
+++ b/core/src/components/popover/test/basic/popover.e2e.ts
@@ -48,6 +48,98 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
* Translucent popovers are only available on iOS
*/
configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+ test.describe(title('popover: scrolling'), async () => {
+ test.beforeEach(({ skip }) => {
+ test.info().annotations.push({
+ type: 'issue',
+ description: 'https://github.com/ionic-team/ionic-framework/issues/29211',
+ });
+ // We are testing if Ionic sets overflow is set correctly on elements,
+ // so we do not need to test across browsers
+ skip.browser('webkit', 'Behavior does not vary across browsers');
+ skip.browser('firefox', 'Behavior does not vary across browsers');
+ });
+ test('should scroll to bottom without IonContent', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ Text
+ Text
+ Text
+ Text
+ Text
+ Text
+ Text
+ Text
+ Text
+ Text
+
+ `,
+ config
+ );
+
+ const popover = page.locator('ion-popover');
+ const viewport = popover.locator('.popover-viewport');
+ const p = popover.locator('p');
+ const lastP = await p.last();
+
+ await popover.evaluate((el: HTMLIonPopoverElement) => el.present());
+
+ await expect(lastP).not.toBeInViewport();
+
+ // hover over viewport and scroll to bottom
+ await viewport.hover();
+ await page.mouse.wheel(0, 500);
+
+ await expect(lastP).toBeInViewport();
+ });
+ test('should scroll to bottom with IonContent', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+ Text
+ Text
+ Text
+ Text
+ Text
+ Text
+ Text
+ Text
+ Text
+ Text
+
+
+ `,
+ config
+ );
+
+ const popover = page.locator('ion-popover');
+ const content = popover.locator('ion-content');
+ const p = popover.locator('p');
+ const lastP = await p.last();
+
+ await popover.evaluate((el: HTMLIonPopoverElement) => el.present());
+
+ await expect(lastP).not.toBeInViewport();
+
+ // hover over viewport and scroll to bottom
+ await content.hover();
+ await page.mouse.wheel(0, 500);
+
+ await expect(lastP).toBeInViewport();
+ });
+ });
test.describe(title('popover: translucent variants'), async () => {
let popoverFixture!: PopoverFixture;
test.beforeEach(async ({ page }) => {
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts b/core/src/components/toolbar/test/basic/toolbar.e2e.ts
index d830dc0360..7b4006e652 100644
--- a/core/src/components/toolbar/test/basic/toolbar.e2e.ts
+++ b/core/src/components/toolbar/test/basic/toolbar.e2e.ts
@@ -1,14 +1,160 @@
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
-configs().forEach(({ title, screenshot, config }) => {
- test.describe(title('toolbar: basic'), () => {
- test('should not have visual regressions', async ({ page }) => {
- await page.goto(`/src/components/toolbar/test/basic`, config);
+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(
+ `
+
+
+ Toolbar
+
+
+ `,
+ config
+ );
- // capture both header toolbars at once, but don't include all the white space in the ion-content
const header = page.locator('ion-header');
- await expect(header).toHaveScreenshot(screenshot(`toolbar-basic`));
+ await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-only`));
+ });
+ });
+});
+
+configs({ palettes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
+ test.describe(title('toolbar: basic'), () => {
+ test('should truncate long title with ellipsis', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+ This is the title that never ends. It just goes on and on my friend.
+
+
+ `,
+ config
+ );
+
+ const header = page.locator('ion-header');
+ await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-long-text`));
+ });
+
+ test('should not have visual regressions with icon-only buttons', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Toolbar
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Activated Buttons
+
+
+ `,
+ config
+ );
+
+ const header = page.locator('ion-header');
+ await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-icon-buttons`));
+ });
+
+ test('should not have visual regressions with buttons with icons and text', async ({ page }) => {
+ await page.setContent(
+ `
+
+
+
+
+
+ Solid
+
+
+ Solid
+
+
+ Help
+
+
+
+
+
+
+
+
+ Solid
+
+
+ Solid Activated
+
+
+ Help
+
+
+
+
+
+
+
+
+ Star
+
+
+ Outline
+
+
+ Info
+
+
+
+
+
+
+
+
+ Star
+
+
+ Outline Activated
+
+
+ Info
+
+
+
+
+
+ `,
+ config
+ );
+
+ const header = page.locator('ion-header');
+ await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-icon-buttons`));
});
});
});
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..01be216977
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..bd8506ab73
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4efd44f93c
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-dark-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..53aebb13cf
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-dark-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..5dcd70f8ec
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-dark-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..a6f6aeb4ad
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-ltr-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..9bdf0314f3
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..6b1a8bad52
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..91a7a9df5f
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-dark-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..35a37fafb2
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-dark-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..80875903ea
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-dark-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..1c3c6ed5c1
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-ios-rtl-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..3fcb558541
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..56bc640376
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..8142a3a0c8
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ce914cfa62
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-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-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-dark-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..3e9fca3e3a
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-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-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-ltr-dark-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..57ac1e9be5
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-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-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..f33d6a9074
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..421473b84d
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..ca757637dc
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..7acae28d94
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-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-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-dark-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..f84c082990
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-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-md-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-md-rtl-dark-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..5384ad8da6
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-icon-buttons-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-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..3dd02b1c42
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..8fc324d77d
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..b4d2fa5689
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-dark-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..74247563f6
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-dark-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..1e79779980
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-dark-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..a7f7e0b065
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-ltr-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..097841b0ea
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..1d790da051
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..29037128e7
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-dark-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e51ca1671c
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-dark-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..0d0fa4aef1
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-dark-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4c8ae62524
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-ios-rtl-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..a5bbb70ed3
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..2ffd4bd15c
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..ba689cc457
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-dark-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..32f16f04b1
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-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-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-dark-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..c01d60f5d1
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-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-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-ltr-dark-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..0adecd6740
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-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-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..363c367eba
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..5f3d8e5723
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..3b74fc212d
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-dark-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..514bb26a5d
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-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-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-dark-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..001c97e515
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-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-md-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-md-rtl-dark-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..1b6ed9862e
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-long-text-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-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c7c5360ec0
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a3eb4173f6
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4a2aa1e9f9
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-dark-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..14d31807d8
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-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-ios-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-dark-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..648fb1f17f
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-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-ios-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-ltr-dark-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..ff11df2724
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-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-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..19bea56aec
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..85e3871f18
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..9ad39e8cd9
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-dark-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..c61a531501
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-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-ios-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-dark-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..1a5805b1fe
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-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-ios-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-rtl-dark-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..34af5138ae
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-ios-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-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..8901d6470b
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..7d79ccd74f
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..c29cfcaee5
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..fd49cfcb21
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-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-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..e39cd26263
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-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-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-ltr-dark-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..1a2ccbd06b
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-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-md-rtl-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..b8e0ce1502
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..4f74ba8201
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..b7680904be
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..3b2b7dd16a
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-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-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..aef28839d1
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-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-md-rtl-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..94bcaa8fb4
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-icon-buttons-md-rtl-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1195c918e4
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..9179568089
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..4273fcad22
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-dark-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e936b8101d
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-dark-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..cda87d3773
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-dark-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..2d823b2053
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-ios-ltr-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..15597094fd
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..fdaca073fe
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..e1556aca9a
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-dark-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ce6d840b40
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-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-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-dark-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..4158561868
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-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-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-dark-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..3aefab3b8c
Binary files /dev/null and b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-text-only-md-ltr-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/css/core.scss b/core/src/css/core.scss
index 34b2379282..ae76ad3ad9 100644
--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@@ -393,3 +393,30 @@ ion-input input::-webkit-date-and-time-value {
width: 320px;
min-height: 320px;
}
+
+/**
+ * If a popover has a child ion-content (or class equivalent) then the .popover-viewport element
+ * should not be scrollable to ensure the inner content does scroll. However, if the popover
+ * does not have a child ion-content (or class equivalent) then the .popover-viewport element
+ * should remain scrollable. This code exists globally because popover targets
+ * .popover-viewport using ::slotted which only supports simple selectors.
+ *
+ * Note that we do not need to account for .ion-content-scroll-host here because that
+ * class should always be placed within ion-content even if ion-content is not scrollable.
+ */
+.popover-viewport:has(> ion-content) {
+ overflow: hidden;
+}
+
+/**
+ * :has has cross-browser support, but it is still relatively new. As a result,
+ * we should fallback to the old behavior for environments that do not support :has.
+ * Developers can explicitly enable this behavior by setting overflow: visible
+ * on .popover-viewport if they know they are not going to use an ion-content.
+ * TODO FW-6106 Remove this
+ */
+@supports not selector(:has(> ion-content)) {
+ .popover-viewport {
+ overflow: hidden;
+ }
+}
diff --git a/core/src/themes/test/css-variables/css/dark.css b/core/src/themes/test/css-variables/css/dark.css
new file mode 100644
index 0000000000..6082882391
--- /dev/null
+++ b/core/src/themes/test/css-variables/css/dark.css
@@ -0,0 +1,155 @@
+/*
+ * Dark Colors
+ * -------------------------------------------
+ */
+
+body {
+ --ion-color-primary: #428cff;
+ --ion-color-primary-rgb: 66, 140, 255;
+ --ion-color-primary-contrast: #ffffff;
+ --ion-color-primary-contrast-rgb: 255, 255, 255;
+ --ion-color-primary-shade: #3a7be0;
+ --ion-color-primary-tint: #5598ff;
+
+ --ion-color-secondary: #50c8ff;
+ --ion-color-secondary-rgb: 80, 200, 255;
+ --ion-color-secondary-contrast: #ffffff;
+ --ion-color-secondary-contrast-rgb: 255, 255, 255;
+ --ion-color-secondary-shade: #46b0e0;
+ --ion-color-secondary-tint: #62ceff;
+
+ --ion-color-tertiary: #6a64ff;
+ --ion-color-tertiary-rgb: 106, 100, 255;
+ --ion-color-tertiary-contrast: #ffffff;
+ --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+ --ion-color-tertiary-shade: #5d58e0;
+ --ion-color-tertiary-tint: #7974ff;
+
+ --ion-color-success: #2fdf75;
+ --ion-color-success-rgb: 47, 223, 117;
+ --ion-color-success-contrast: #000000;
+ --ion-color-success-contrast-rgb: 0, 0, 0;
+ --ion-color-success-shade: #29c467;
+ --ion-color-success-tint: #44e283;
+
+ --ion-color-warning: #ffd534;
+ --ion-color-warning-rgb: 255, 213, 52;
+ --ion-color-warning-contrast: #000000;
+ --ion-color-warning-contrast-rgb: 0, 0, 0;
+ --ion-color-warning-shade: #e0bb2e;
+ --ion-color-warning-tint: #ffd948;
+
+ --ion-color-danger: #ff4961;
+ --ion-color-danger-rgb: 255, 73, 97;
+ --ion-color-danger-contrast: #ffffff;
+ --ion-color-danger-contrast-rgb: 255, 255, 255;
+ --ion-color-danger-shade: #e04055;
+ --ion-color-danger-tint: #ff5b71;
+
+ --ion-color-dark: #f4f5f8;
+ --ion-color-dark-rgb: 244, 245, 248;
+ --ion-color-dark-contrast: #000000;
+ --ion-color-dark-contrast-rgb: 0, 0, 0;
+ --ion-color-dark-shade: #d7d8da;
+ --ion-color-dark-tint: #f5f6f9;
+
+ --ion-color-medium: #989aa2;
+ --ion-color-medium-rgb: 152, 154, 162;
+ --ion-color-medium-contrast: #000000;
+ --ion-color-medium-contrast-rgb: 0, 0, 0;
+ --ion-color-medium-shade: #86888f;
+ --ion-color-medium-tint: #a2a4ab;
+
+ --ion-color-light: #222428;
+ --ion-color-light-rgb: 34, 36, 40;
+ --ion-color-light-contrast: #ffffff;
+ --ion-color-light-contrast-rgb: 255, 255, 255;
+ --ion-color-light-shade: #1e2023;
+ --ion-color-light-tint: #383a3e;
+}
+
+/*
+ * iOS Dark Theme
+ * -------------------------------------------
+ */
+
+.ios body {
+ --ion-background-color: #000000;
+ --ion-background-color-rgb: 0, 0, 0;
+
+ --ion-text-color: #ffffff;
+ --ion-text-color-rgb: 255, 255, 255;
+
+ --ion-color-step-50: #0d0d0d;
+ --ion-color-step-100: #1a1a1a;
+ --ion-color-step-150: #262626;
+ --ion-color-step-200: #333333;
+ --ion-color-step-250: #404040;
+ --ion-color-step-300: #4d4d4d;
+ --ion-color-step-350: #595959;
+ --ion-color-step-400: #666666;
+ --ion-color-step-450: #737373;
+ --ion-color-step-500: #808080;
+ --ion-color-step-550: #8c8c8c;
+ --ion-color-step-600: #999999;
+ --ion-color-step-650: #a6a6a6;
+ --ion-color-step-700: #b3b3b3;
+ --ion-color-step-750: #bfbfbf;
+ --ion-color-step-800: #cccccc;
+ --ion-color-step-850: #d9d9d9;
+ --ion-color-step-900: #e6e6e6;
+ --ion-color-step-950: #f2f2f2;
+
+ --ion-item-background: #000000;
+
+ --ion-card-background: #1c1c1d;
+}
+
+.ios ion-modal {
+ --ion-background-color: var(--ion-color-step-100);
+ --ion-toolbar-background: var(--ion-color-step-150);
+ --ion-toolbar-border-color: var(--ion-color-step-250);
+}
+
+/*
+ * Material Design Dark Theme
+ * -------------------------------------------
+ */
+
+.md body {
+ --ion-background-color: #121212;
+ --ion-background-color-rgb: 18, 18, 18;
+
+ --ion-text-color: #ffffff;
+ --ion-text-color-rgb: 255, 255, 255;
+
+ --ion-border-color: #222222;
+
+ --ion-color-step-50: #1e1e1e;
+ --ion-color-step-100: #2a2a2a;
+ --ion-color-step-150: #363636;
+ --ion-color-step-200: #414141;
+ --ion-color-step-250: #4d4d4d;
+ --ion-color-step-300: #595959;
+ --ion-color-step-350: #656565;
+ --ion-color-step-400: #717171;
+ --ion-color-step-450: #7d7d7d;
+ --ion-color-step-500: #898989;
+ --ion-color-step-550: #949494;
+ --ion-color-step-600: #a0a0a0;
+ --ion-color-step-650: #acacac;
+ --ion-color-step-700: #b8b8b8;
+ --ion-color-step-750: #c4c4c4;
+ --ion-color-step-800: #d0d0d0;
+ --ion-color-step-850: #dbdbdb;
+ --ion-color-step-900: #e7e7e7;
+ --ion-color-step-950: #f3f3f3;
+
+ --ion-item-background: #1e1e1e;
+
+ --ion-toolbar-background: #1f1f1f;
+
+ --ion-tab-bar-background: #1f1f1f;
+
+ --ion-card-background: #1e1e1e;
+}
diff --git a/core/stencil.config.ts b/core/stencil.config.ts
index 2485eafb23..cdc5e76fe4 100644
--- a/core/stencil.config.ts
+++ b/core/stencil.config.ts
@@ -231,7 +231,7 @@ export const config: Config = {
},
{
type: 'docs-json',
- file: '../docs/core.json'
+ file: '../packages/docs/core.json'
},
{
type: 'dist-hydrate-script'
diff --git a/lerna.json b/lerna.json
index 602a9c1f03..0ba99590a8 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,7 +1,6 @@
{
"packages": [
"core",
- "docs",
"packages/*"
],
"version": "8.0.0-rc.0"
diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md
index 607b0106f1..2a0793e2ad 100644
--- a/packages/angular-server/CHANGELOG.md
+++ b/packages/angular-server/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
# [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27)
**Note:** Version bump only for package @ionic/angular-server
diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json
index 4e189e9834..3e6beeff5e 100644
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
@@ -9,7 +9,7 @@
"version": "8.0.0-rc.0",
"license": "MIT",
"dependencies": {
- "@ionic/core": "^8.0.0-rc.0"
+ "@ionic/core": "8.0.0-rc.0"
},
"devDependencies": {
"@angular-eslint/eslint-plugin": "^16.0.0",
diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json
index 44a6783703..c50e5e6031 100644
--- a/packages/angular-server/package.json
+++ b/packages/angular-server/package.json
@@ -62,6 +62,6 @@
},
"prettier": "@ionic/prettier-config",
"dependencies": {
- "@ionic/core": "^8.0.0-rc.0"
+ "@ionic/core": "8.0.0-rc.0"
}
}
diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md
index 9ac7bb25f6..8875681996 100644
--- a/packages/angular/CHANGELOG.md
+++ b/packages/angular/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
# [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27)
**Note:** Version bump only for package @ionic/angular
diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json
index bee6abecee..fcc6728288 100644
--- a/packages/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -9,7 +9,7 @@
"version": "8.0.0-rc.0",
"license": "MIT",
"dependencies": {
- "@ionic/core": "^8.0.0-rc.0",
+ "@ionic/core": "8.0.0-rc.0",
"ionicons": "^7.0.0",
"jsonc-parser": "^3.0.0",
"tslib": "^2.3.0"
diff --git a/packages/angular/package.json b/packages/angular/package.json
index f934bb2be8..586c546ee3 100644
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -47,7 +47,7 @@
}
},
"dependencies": {
- "@ionic/core": "^8.0.0-rc.0",
+ "@ionic/core": "8.0.0-rc.0",
"ionicons": "^7.0.0",
"jsonc-parser": "^3.0.0",
"tslib": "^2.3.0"
diff --git a/docs/.gitignore b/packages/docs/.gitignore
similarity index 100%
rename from docs/.gitignore
rename to packages/docs/.gitignore
diff --git a/docs/.npmignore b/packages/docs/.npmignore
similarity index 100%
rename from docs/.npmignore
rename to packages/docs/.npmignore
diff --git a/docs/.npmrc b/packages/docs/.npmrc
similarity index 100%
rename from docs/.npmrc
rename to packages/docs/.npmrc
diff --git a/docs/CHANGELOG.md b/packages/docs/CHANGELOG.md
similarity index 99%
rename from docs/CHANGELOG.md
rename to packages/docs/CHANGELOG.md
index 72490bd61a..d6d419ad7e 100644
--- a/docs/CHANGELOG.md
+++ b/packages/docs/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
# [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27)
**Note:** Version bump only for package @ionic/docs
diff --git a/docs/README.md b/packages/docs/README.md
similarity index 100%
rename from docs/README.md
rename to packages/docs/README.md
diff --git a/docs/package-lock.json b/packages/docs/package-lock.json
similarity index 100%
rename from docs/package-lock.json
rename to packages/docs/package-lock.json
diff --git a/docs/package.json b/packages/docs/package.json
similarity index 100%
rename from docs/package.json
rename to packages/docs/package.json
diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md
index 5057de9e2c..360af50598 100644
--- a/packages/react-router/CHANGELOG.md
+++ b/packages/react-router/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
# [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27)
**Note:** Version bump only for package @ionic/react-router
diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json
index 1c3ba413cc..cca4e115d2 100644
--- a/packages/react-router/package-lock.json
+++ b/packages/react-router/package-lock.json
@@ -9,7 +9,7 @@
"version": "8.0.0-rc.0",
"license": "MIT",
"dependencies": {
- "@ionic/react": "^8.0.0-rc.0",
+ "@ionic/react": "8.0.0-rc.0",
"tslib": "*"
},
"devDependencies": {
@@ -667,9 +667,9 @@
]
},
"node_modules/@stencil/core": {
- "version": "4.13.0",
- "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.13.0.tgz",
- "integrity": "sha512-gg+gtBWekQ08mDja8GVAUHNu+rrFhQaKZDvfhnS3l/5JbYiJddTimuDPPhuc0sR0JZL1iRdJTJSa+JbvmnQ1cQ==",
+ "version": "4.14.0",
+ "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.14.0.tgz",
+ "integrity": "sha512-+s0u/KsNolXZ7tC2hEMgMA3jaNaqOhZvYKwSzjQbc0Wv+cB481Isxzo7ifgEWRYqsJzNSyqhO6cyu/EJrGGTdg==",
"bin": {
"stencil": "bin/stencil"
},
@@ -4304,9 +4304,9 @@
"optional": true
},
"@stencil/core": {
- "version": "4.13.0",
- "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.13.0.tgz",
- "integrity": "sha512-gg+gtBWekQ08mDja8GVAUHNu+rrFhQaKZDvfhnS3l/5JbYiJddTimuDPPhuc0sR0JZL1iRdJTJSa+JbvmnQ1cQ=="
+ "version": "4.14.0",
+ "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.14.0.tgz",
+ "integrity": "sha512-+s0u/KsNolXZ7tC2hEMgMA3jaNaqOhZvYKwSzjQbc0Wv+cB481Isxzo7ifgEWRYqsJzNSyqhO6cyu/EJrGGTdg=="
},
"@types/estree": {
"version": "1.0.4",
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
index b0fcb8c971..11d297aba2 100644
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -36,7 +36,7 @@
"dist/"
],
"dependencies": {
- "@ionic/react": "^8.0.0-rc.0",
+ "@ionic/react": "8.0.0-rc.0",
"tslib": "*"
},
"peerDependencies": {
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 01a13926c8..358f971413 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
# [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27)
**Note:** Version bump only for package @ionic/react
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index 1a7574d5f1..e99562e5a7 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -9,7 +9,7 @@
"version": "8.0.0-rc.0",
"license": "MIT",
"dependencies": {
- "@ionic/core": "^8.0.0-rc.0",
+ "@ionic/core": "8.0.0-rc.0",
"ionicons": "^7.0.0",
"tslib": "*"
},
diff --git a/packages/react/package.json b/packages/react/package.json
index cf30d12876..c06031b716 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -39,7 +39,7 @@
"css/"
],
"dependencies": {
- "@ionic/core": "^8.0.0-rc.0",
+ "@ionic/core": "8.0.0-rc.0",
"ionicons": "^7.0.0",
"tslib": "*"
},
diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md
index a214725616..9d38f5aeca 100644
--- a/packages/vue-router/CHANGELOG.md
+++ b/packages/vue-router/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
# [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27)
**Note:** Version bump only for package @ionic/vue-router
diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json
index 04966d8fb2..4122b614f3 100644
--- a/packages/vue-router/package-lock.json
+++ b/packages/vue-router/package-lock.json
@@ -9,7 +9,7 @@
"version": "8.0.0-rc.0",
"license": "MIT",
"dependencies": {
- "@ionic/vue": "^8.0.0-rc.0"
+ "@ionic/vue": "8.0.0-rc.0"
},
"devDependencies": {
"@ionic/eslint-config": "^0.3.0",
@@ -1508,9 +1508,9 @@
}
},
"node_modules/@stencil/core": {
- "version": "4.13.0",
- "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.13.0.tgz",
- "integrity": "sha512-gg+gtBWekQ08mDja8GVAUHNu+rrFhQaKZDvfhnS3l/5JbYiJddTimuDPPhuc0sR0JZL1iRdJTJSa+JbvmnQ1cQ==",
+ "version": "4.14.0",
+ "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.14.0.tgz",
+ "integrity": "sha512-+s0u/KsNolXZ7tC2hEMgMA3jaNaqOhZvYKwSzjQbc0Wv+cB481Isxzo7ifgEWRYqsJzNSyqhO6cyu/EJrGGTdg==",
"bin": {
"stencil": "bin/stencil"
},
@@ -8461,9 +8461,9 @@
}
},
"@stencil/core": {
- "version": "4.13.0",
- "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.13.0.tgz",
- "integrity": "sha512-gg+gtBWekQ08mDja8GVAUHNu+rrFhQaKZDvfhnS3l/5JbYiJddTimuDPPhuc0sR0JZL1iRdJTJSa+JbvmnQ1cQ=="
+ "version": "4.14.0",
+ "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.14.0.tgz",
+ "integrity": "sha512-+s0u/KsNolXZ7tC2hEMgMA3jaNaqOhZvYKwSzjQbc0Wv+cB481Isxzo7ifgEWRYqsJzNSyqhO6cyu/EJrGGTdg=="
},
"@tootallnate/once": {
"version": "2.0.0",
diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json
index 43e4e887c0..9746bdb707 100644
--- a/packages/vue-router/package.json
+++ b/packages/vue-router/package.json
@@ -44,7 +44,7 @@
},
"homepage": "https://github.com/ionic-team/ionic#readme",
"dependencies": {
- "@ionic/vue": "^8.0.0-rc.0"
+ "@ionic/vue": "8.0.0-rc.0"
},
"devDependencies": {
"@ionic/eslint-config": "^0.3.0",
diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
index c5c1edf8f0..303bbf9c34 100644
--- a/packages/vue/CHANGELOG.md
+++ b/packages/vue/CHANGELOG.md
@@ -3,6 +3,14 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [7.8.3](https://github.com/ionic-team/ionic-framework/compare/v7.8.2...v7.8.3) (2024-04-03)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
# [8.0.0-rc.0](https://github.com/ionic-team/ionic-framework/compare/v8.0.0-beta.4...v8.0.0-rc.0) (2024-03-27)
**Note:** Version bump only for package @ionic/vue
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
index 61347e523c..b53f166398 100644
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -9,7 +9,7 @@
"version": "8.0.0-rc.0",
"license": "MIT",
"dependencies": {
- "@ionic/core": "^8.0.0-rc.0",
+ "@ionic/core": "8.0.0-rc.0",
"ionicons": "^7.0.0"
},
"devDependencies": {
diff --git a/packages/vue/package.json b/packages/vue/package.json
index bff3f6565a..edb475b937 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -66,7 +66,7 @@
"vue-router": "^4.0.16"
},
"dependencies": {
- "@ionic/core": "^8.0.0-rc.0",
+ "@ionic/core": "8.0.0-rc.0",
"ionicons": "^7.0.0"
},
"vetur": {
diff --git a/packages/vue/src/vue-component-lib/utils.ts b/packages/vue/src/vue-component-lib/utils.ts
index 136041073e..492ee5d410 100644
--- a/packages/vue/src/vue-component-lib/utils.ts
+++ b/packages/vue/src/vue-component-lib/utils.ts
@@ -91,8 +91,17 @@ export const defineContainer = (
const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
eventsNames.forEach((eventName: string) => {
el.addEventListener(eventName.toLowerCase(), (e: Event) => {
- modelPropValue = (e?.target as any)[modelProp];
- emit(UPDATE_VALUE_EVENT, modelPropValue);
+ /**
+ * Only update the v-model binding if the event's target is the element we are
+ * listening on. For example, Component A could emit ionChange, but it could also
+ * have a descendant Component B that also emits ionChange. We only want to update
+ * the v-model for Component A when ionChange originates from that element and not
+ * when ionChange bubbles up from Component B.
+ */
+ if (e.target.tagName === el.tagName) {
+ modelPropValue = (e?.target as any)[modelProp];
+ emit(UPDATE_VALUE_EVENT, modelPropValue);
+ }
});
});
},