v7.8.3

chore: run build (#29262 )
I forgot to run the core build in f726c35868, so the latest Vue output target wrapper was not generated.
2026-03-13 10:22:08 +08:00 · 2024-04-03 15:38:11 +00:00 · 2024-04-03 13:59:10 +00:00 · 2024-04-03 01:27:00 +00:00 · 2024-04-02 20:25:19 +00:00 · 2024-04-02 15:16:55 +00:00
138 changed files with 622 additions and 216 deletions
--- 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-internal/ @liamdebeasi
-/core/src/components/picker-column-internal/ @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
--- 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
--- 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:
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,29 @@
 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)
+
+
+
+
+
+## [7.8.2](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v7.8.2) (2024-03-27)
+
+
+### Bug Fixes
+
+* **searchbar:** autocapitalize is initialized correctly ([#29197](https://github.com/ionic-team/ionic-framework/issues/29197)) ([8ad66c0](https://github.com/ionic-team/ionic-framework/commit/8ad66c03d777edcab19c97cba696b171acc2d2e8)), closes [#29193](https://github.com/ionic-team/ionic-framework/issues/29193)
+
+
+
+
+
 ## [7.8.1](https://github.com/ionic-team/ionic-framework/compare/v7.8.0...v7.8.1) (2024-03-20)


--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,29 @@
 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)
+
+
+
+
+
+## [7.8.2](https://github.com/ionic-team/ionic-framework/compare/v7.8.1...v7.8.2) (2024-03-27)
+
+
+### Bug Fixes
+
+* **searchbar:** autocapitalize is initialized correctly ([#29197](https://github.com/ionic-team/ionic-framework/issues/29197)) ([8ad66c0](https://github.com/ionic-team/ionic-framework/commit/8ad66c03d777edcab19c97cba696b171acc2d2e8)), closes [#29193](https://github.com/ionic-team/ionic-framework/issues/29193)
+
+
+
+
+
 ## [7.8.1](https://github.com/ionic-team/ionic-framework/compare/v7.8.0...v7.8.1) (2024-03-20)


--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@ionic/core",
-  "version": "7.8.1",
+  "version": "7.8.3",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/core",
-      "version": "7.8.1",
+      "version": "7.8.3",
      "license": "MIT",
      "dependencies": {
        "@stencil/core": "^4.12.2",
@@ -27,7 +27,7 @@
        "@stencil/angular-output-target": "^0.8.4",
        "@stencil/react-output-target": "^0.5.3",
        "@stencil/sass": "^3.0.9",
-        "@stencil/vue-output-target": "^0.0.1-dev.11711372539.10de27e3",
+        "@stencil/vue-output-target": "^0.8.7",
        "@types/jest": "^29.5.6",
        "@types/node": "^14.6.0",
        "@typescript-eslint/eslint-plugin": "^6.7.2",
@@ -633,9 +633,9 @@
      "dev": true
    },
    "node_modules/@capacitor/core": {
-      "version": "5.7.3",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.3.tgz",
-      "integrity": "sha512-xEuQmP+h0tugl2N+qRcdrUavZydvTnnmtvqu/OtCBb/bKZo2PDRFft7MxuQRE2GxXs6kLy3cvwzhDAHB3a+9mw==",
+      "version": "5.7.4",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.4.tgz",
+      "integrity": "sha512-iZBgvx3o4amzKv5ttA+QHB6i7cxK+/mYpCQd1tnSdipg6ZkvfBhg1HkzhEqHk+I7MNur+QwgYDZho9+ycHRwOw==",
      "dev": true,
      "dependencies": {
        "tslib": "^2.1.0"
@@ -1793,9 +1793,9 @@
      }
    },
    "node_modules/@stencil/vue-output-target": {
-      "version": "0.0.1-dev.11711372539.10de27e3",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.0.1-dev.11711372539.10de27e3.tgz",
-      "integrity": "sha512-TOF8daeP3pztr7mvKOZc9y+MULV3ZFpEtJMO/oVxy7EOxrOV8ZgbfsDMGE9g1UY8YZAhOZCfPUgiL4NcMqYY/Q==",
+      "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"
@@ -10416,9 +10416,9 @@
      "dev": true
    },
    "@capacitor/core": {
-      "version": "5.7.3",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.3.tgz",
-      "integrity": "sha512-xEuQmP+h0tugl2N+qRcdrUavZydvTnnmtvqu/OtCBb/bKZo2PDRFft7MxuQRE2GxXs6kLy3cvwzhDAHB3a+9mw==",
+      "version": "5.7.4",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.7.4.tgz",
+      "integrity": "sha512-iZBgvx3o4amzKv5ttA+QHB6i7cxK+/mYpCQd1tnSdipg6ZkvfBhg1HkzhEqHk+I7MNur+QwgYDZho9+ycHRwOw==",
      "dev": true,
      "requires": {
        "tslib": "^2.1.0"
@@ -11248,9 +11248,9 @@
      "requires": {}
    },
    "@stencil/vue-output-target": {
-      "version": "0.0.1-dev.11711372539.10de27e3",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.0.1-dev.11711372539.10de27e3.tgz",
-      "integrity": "sha512-TOF8daeP3pztr7mvKOZc9y+MULV3ZFpEtJMO/oVxy7EOxrOV8ZgbfsDMGE9g1UY8YZAhOZCfPUgiL4NcMqYY/Q==",
+      "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": {}
    },
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/core",
-  "version": "7.8.1",
+  "version": "7.8.3",
  "description": "Base components for Ionic",
  "keywords": [
    "ionic",
@@ -49,7 +49,7 @@
    "@stencil/angular-output-target": "^0.8.4",
    "@stencil/react-output-target": "^0.5.3",
    "@stencil/sass": "^3.0.9",
-    "@stencil/vue-output-target": "^0.0.1-dev.11711372539.10de27e3",
+    "@stencil/vue-output-target": "^0.8.7",
    "@types/jest": "^29.5.6",
    "@types/node": "^14.6.0",
    "@typescript-eslint/eslint-plugin": "^6.7.2",
--- a/core/src/components/button/button.ios.scss
+++ b/core/src/components/button/button.ios.scss
@@ -212,3 +212,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))};
+}
--- a/core/src/components/button/button.md.scss
+++ b/core/src/components/button/button.md.scss
@@ -160,3 +160,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))};
+}
--- a/core/src/components/button/button.scss
+++ b/core/src/components/button/button.scss
@@ -331,11 +331,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))};
-}
--- 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
--- 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(
+        `
+        <style>
+          ion-popover {
+            --height: 150px;
+          }
+        </style>
+        <ion-popover>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+          <p>Text</p>
+        </ion-popover>
+      `,
+        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(
+        `
+        <style>
+          ion-popover {
+            --height: 150px;
+          }
+        </style>
+        <ion-popover>
+          <ion-content>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+            <p>Text</p>
+          </ion-content>
+        </ion-popover>
+      `,
+        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 }) => {
--- 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({ themes: ['light', 'dark'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('toolbar: basic (LTR only)'), () => {
+    test('should not have visual regressions with text only', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Toolbar</ion-title>
+            </ion-toolbar>
+          </ion-header>
+        `,
+        config
+      );

-      // 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({ themes: ['light', 'dark'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('toolbar: basic'), () => {
+    test('should truncate long title with ellipsis', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
+            </ion-toolbar>
+          </ion-header>
+        `,
+        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(
+        `
+          <ion-header>
+            <ion-toolbar>
+              <ion-buttons slot="secondary">
+                <ion-button>
+                  <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+                </ion-button>
+                <ion-button>
+                  <ion-icon slot="icon-only" name="search"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+              <ion-buttons slot="primary">
+                <ion-button color="secondary">
+                  <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+              <ion-title>Toolbar</ion-title>
+            </ion-toolbar>
+            <ion-toolbar>
+              <ion-buttons slot="secondary">
+                <ion-button class="ion-activated">
+                  <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+                </ion-button>
+                <ion-button class="ion-activated">
+                  <ion-icon slot="icon-only" name="search"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+              <ion-buttons slot="primary">
+                <ion-button color="secondary" class="ion-activated">
+                  <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+              <ion-title>Activated Buttons</ion-title>
+            </ion-toolbar>
+          </ion-header>
+        `,
+        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(
+        `
+          <ion-header>
+            <ion-toolbar>
+              <ion-buttons slot="secondary">
+                <ion-button fill="solid">
+                  <ion-icon slot="start" name="person-circle"></ion-icon>
+                  Solid
+                </ion-button>
+              </ion-buttons>
+              <ion-title>Solid</ion-title>
+              <ion-buttons slot="primary">
+                <ion-button fill="solid" color="secondary">
+                  Help
+                  <ion-icon slot="end" name="help-circle"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+            <ion-toolbar>
+              <ion-buttons slot="secondary">
+                <ion-button fill="solid" class="ion-activated">
+                  <ion-icon slot="start" name="person-circle"></ion-icon>
+                  Solid
+                </ion-button>
+              </ion-buttons>
+              <ion-title>Solid Activated</ion-title>
+              <ion-buttons slot="primary">
+                <ion-button fill="solid" color="secondary" class="ion-activated">
+                  Help
+                  <ion-icon slot="end" name="help-circle"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+            <ion-toolbar>
+              <ion-buttons slot="secondary">
+                <ion-button fill="outline">
+                  <ion-icon slot="start" name="star"></ion-icon>
+                  Star
+                </ion-button>
+              </ion-buttons>
+              <ion-title>Outline</ion-title>
+              <ion-buttons slot="primary">
+                <ion-button color="secondary" fill="outline">
+                  Info
+                  <ion-icon slot="end" name="information-circle"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+            <ion-toolbar>
+              <ion-buttons slot="secondary">
+                <ion-button fill="outline" class="ion-activated">
+                  <ion-icon slot="start" name="star"></ion-icon>
+                  Star
+                </ion-button>
+              </ion-buttons>
+              <ion-title>Outline Activated</ion-title>
+              <ion-buttons slot="primary">
+                <ion-button color="secondary" fill="outline" class="ion-activated">
+                  Info
+                  <ion-icon slot="end" name="information-circle"></ion-icon>
+                </ion-button>
+              </ion-buttons>
+            </ion-toolbar>
+          </ion-header>
+        `,
+        config
+      );
+
+      const header = page.locator('ion-header');
+      await expect(header).toHaveScreenshot(screenshot(`toolbar-basic-text-icon-buttons`));
    });
  });
 });
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-ios-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-ios-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-ios-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-ios-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-ios-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-ios-rtl-Mobile-Safari-linux.png
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-md-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-md-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-md-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/toolbar/test/basic/toolbar.e2e.ts-snapshots/toolbar-basic-md-rtl-Mobile-Safari-linux.png
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- 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
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
ionitron	de35fa8b94	v7.8.3	2024-04-03 15:38:11 +00:00
Liam DeBeasi	c766528a17	chore: run build (#29262 ) I forgot to run the core build in `f726c35868`, so the latest Vue output target wrapper was not generated.	2024-04-03 13:59:10 +00:00
Brandy Carney	9b3cf9fbc2	chore(docs): move docs to the packages directory (#29256 ) Move the `docs/` directory into the `packages/` directory. This will enable us to create a top level `docs/` folder for onboarding and contributing guidelines. It will also be necessary when migrating to pnpm. --------- Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>	2024-04-03 01:27:00 +00:00
Amanda Johnston	ee5da7a747	fix(button): activated outline button in toolbar no longer blends into background on MD dark mode (#29216 ) Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> When using an outline-style button in a toolbar on `md` dark mode, the activated style causes the button to become invisible. Steps to repro in `main`: 1. Update the `css-variables` themes test to use the latest dark theme styles (at least for v7) by replacing the contents of [this file](https://github.com/ionic-team/ionic-framework/blob/main/core/src/themes/test/css-variables/css/dark.css) with the [styles from the docs](https://ionicframework.com/docs/theming/dark-mode#ionic-dark-theme). 2. Host the project locally and navigate to the test at `themes/test/css-variables/index.html`. 3. Switch to dark mode within the page. Note that the activated outline button isn't visible: ![image](https://github.com/ionic-team/ionic-framework/assets/90629384/fae1009f-4962-4e6b-b710-42deec083e84) ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Button styles corrected. The colors were correct for `ios` mode, but had to be flipped for `md`, so I pulled the relevant styles into the mode-specific stylesheets. - CSS variables test has also been updated to use the same dark mode CSS as in [the docs](https://ionicframework.com/docs/theming/dark-mode#ionic-dark-theme), as per the repro steps above. Let me know if you would rather this be split into a separate PR. Changes to the toolbar test were split into a separate PR to keep this one clean and ensure the screenshot changes can be reviewed more effectively: https://github.com/ionic-team/ionic-framework/pull/29231 ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 5. Update the BREAKING.md file with the breaking change. 6. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: ionitron <hi@ionicframework.com>	2024-04-02 20:25:19 +00:00
Amanda Johnston	c4bfc783e0	chore: remove Amanda from codeowners (#29252 ) Removes myself as a codeowner in favor of the round robin assignment.	2024-04-02 15:16:55 +00:00
Liam DeBeasi	0137e732ce	chore: remove myself from code owners (#29251 ) I'm removing myself from code owners in several places in favor of the auto-assignment. However, I did keep my name on areas of the code that I felt are still higher risk for potential regressions due to the nature of how the code is built/tested.	2024-04-02 14:24:39 +00:00
Brandy Carney	88ecb29e39	chore: remove self from codeowners (#29250 ) Remove myself as the codeowner of specific directories as this bypasses the random review assignment and automatically assigns me to any PRs changing these files.	2024-04-02 13:59:58 +00:00
renovate[bot]	f726c35868	chore(deps): update dependency @stencil/vue-output-target to v0.8.8 (#29243 ) [![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: \| Package \| Change \| Age \| Adoption \| Passing \| Confidence \| \|---\|---\|---\|---\|---\|---\| \| [@stencil/vue-output-target](https://stenciljs.com/) ([source](https://togithub.com/ionic-team/stencil-ds-output-targets)) \| [`0.8.7` -> `0.8.8`](https://renovatebot.com/diffs/npm/@stencil%2fvue-output-target/0.8.7/0.8.8) \| [![age](https://developer.mend.io/api/mc/badges/age/npm/@stencil%2fvue-output-target/0.8.8?slim=true)](https://docs.renovatebot.com/merge-confidence/) \| [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@stencil%2fvue-output-target/0.8.8?slim=true)](https://docs.renovatebot.com/merge-confidence/) \| [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@stencil%2fvue-output-target/0.8.7/0.8.8?slim=true)](https://docs.renovatebot.com/merge-confidence/) \| [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@stencil%2fvue-output-target/0.8.7/0.8.8?slim=true)](https://docs.renovatebot.com/merge-confidence/) \| --- ### Release Notes <details> <summary>ionic-team/stencil-ds-output-targets (@stencil/vue-output-target)</summary> ### [`v0.8.8`](https://togithub.com/ionic-team/stencil-ds-output-targets/releases/tag/%40stencil/vue-output-target%400.8.8) [Compare Source](`a3588e9051`...@stencil/vue-output-target@0.8.8) #### What's Changed - fix(vue): v-model does not update when other events bubble up by [@liamdebeasi](https://togithub.com/liamdebeasi) in [https://github.com/ionic-team/stencil-ds-output-targets/pull/425](https://togithub.com/ionic-team/stencil-ds-output-targets/pull/425) Full Changelog: https://github.com/ionic-team/stencil-ds-output-targets/compare/[@stencil/angular-output-target](https://togithub.com/stencil/angular-output-target)[@0](https://togithub.com/0).8.4...[@stencil/vue-output-target](https://togithub.com/stencil/vue-output-target)[@0](https://togithub.com/0).8.8 </details> --- ### Configuration 📅 Schedule: Branch creation - "every weekday before 11am" (UTC), Automerge - At any time (no schedule defined). 🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied. ♻ Rebasing: Never, or you tick the rebase/retry checkbox. 🔕 Ignore: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/ionic-team/ionic-framework). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4yNjkuMiIsInVwZGF0ZWRJblZlciI6IjM3LjI2OS4yIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9--> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-04-02 13:49:18 +00:00
Liam DeBeasi	4a9d84ecbd	chore: remove mapsandapps from issue auto assignment (#29248 )	2024-04-01 22:11:07 +00:00
Liam DeBeasi	f08759c2b8	fix(popover): viewport can be scrolled if no content present (#29215 ) Issue number: resolves #29211 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> In https://github.com/ionic-team/ionic-framework/pull/28861 I fixed a bug that caused `.popover-viewport` to have `overflow: hidden`. In reality, this code should have always applied but due to an incorrect selector it never did. As it turns out in https://github.com/ionic-team/ionic-framework/issues/29211, some developers were relying on the broken behavior to build their applications. In particular, developers were using `ion-popover` without an `ion-content`. The linked change made it so that using popovers without `ion-content` were not scrollable. After talking with @mapsandapps we think it makes sense to officially support this behavior. We support using [modals without `ion-content`](https://ionicframework.com/docs/api/modal#custom-dialogs), and we could not think of a reason to not support the same use case for popover. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - If the `.popover-viewport` element has a child content then `.popover-viewport `will not be scrollable. - If the `.popover-viewport` element does not have a child content then `.popover-viewport` will be scrollable. I implemented this behavior using progressive enhancement via `:has`. The [`:has` pseudo-class](https://caniuse.com/?search=%3Ahas) has cross-browser support. Ionic v7 supports some versions of browsers that do not have `:has` support. As a result, we fall back to the existing behavior in this environment. Developers are able to get this behavior on older browsers by explicitly setting `overflow: auto` on `.popover-viewport`. Fortunately, we will be dropping support for several of the older browsers versions in Ionic v8, so the need to do the manual opt-in should be less frequent as time goes on. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev build: `7.8.2-dev.11711383079.118d48a5` Testing: 1. Open https://codepen.io/liamdebeasi/pen/JjVJrZQ?editors=1100 (this has a dev build installed) 2. Click each button to open a popover. 3. Verify that each popover can be scrolled. I could not find a great way to automate this test, but let me know if anyone has ideas!	2024-04-01 20:29:03 +00:00
Amanda Johnston	2053bc77a6	test(toolbar): add dark theme to basic test (#29231 ) Issue number: N/A --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The toolbar `basic` test only checks light theme. Dark theme coverage is required to test against the bug fixed in https://github.com/ionic-team/ionic-framework/pull/29216. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> Dark theme coverage added. This required converting the test to `page.setContent` instead of `page.goto`, so I went ahead and split the captured toolbars into multiple tests, including some cleanup of the test content. Since this included changes across many different tests, even ones not strictly related to the bug, this work has been split into a separate PR. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: ionitron <hi@ionicframework.com>	2024-04-01 18:18:42 +00:00
Liam DeBeasi	c23be1befd	merge release-7.8.2	2024-03-27 09:45:05 -04:00
ionitron	a2923aaeb3	chore(): update package lock files	2024-03-27 13:34:23 +00:00
ionitron	eeab96de55	v7.8.2	2024-03-27 13:33:47 +00:00
renovate[bot]	ca0923812a	chore(deps): update dependency @capacitor/core to v5.7.4 (#29209 ) [![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: \| Package \| Change \| Age \| Adoption \| Passing \| Confidence \| \|---\|---\|---\|---\|---\|---\| \| [@capacitor/core](https://capacitorjs.com) ([source](https://togithub.com/ionic-team/capacitor)) \| [`5.7.3` -> `5.7.4`](https://renovatebot.com/diffs/npm/@capacitor%2fcore/5.7.3/5.7.4) \| [![age](https://developer.mend.io/api/mc/badges/age/npm/@capacitor%2fcore/5.7.4?slim=true)](https://docs.renovatebot.com/merge-confidence/) \| [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/@capacitor%2fcore/5.7.4?slim=true)](https://docs.renovatebot.com/merge-confidence/) \| [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/@capacitor%2fcore/5.7.3/5.7.4?slim=true)](https://docs.renovatebot.com/merge-confidence/) \| [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/@capacitor%2fcore/5.7.3/5.7.4?slim=true)](https://docs.renovatebot.com/merge-confidence/) \| --- ### Release Notes <details> <summary>ionic-team/capacitor (@capacitor/core)</summary> ### [`v5.7.4`](https://togithub.com/ionic-team/capacitor/releases/tag/5.7.4) [Compare Source](https://togithub.com/ionic-team/capacitor/compare/5.7.3...5.7.4) ##### Bug Fixes - http: change proxy url generation ([30a32f4](`30a32f467f`)) </details> --- ### Configuration 📅 Schedule: Branch creation - "every weekday before 11am" (UTC), Automerge - At any time (no schedule defined). 🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied. ♻ Rebasing: Never, or you tick the rebase/retry checkbox. 🔕 Ignore: Close this PR and you won't be reminded about this update again. --- - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/ionic-team/ionic-framework). <!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4yNjkuMiIsInVwZGF0ZWRJblZlciI6IjM3LjI2OS4yIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9--> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-03-25 13:31:09 +00:00