v7.8.6

This PR adds a "v7-lts" NPM tag for backporting fixes to v7.

.github/CODEOWNERS

@@ -13,73 +13,7 @@
 
 * @ionic-team/framework
 
-# Frameworks
-
-## Angular
-
-/packages/angular/ @sean-perkins @thetaPC
-/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-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/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

.github/PULL_REQUEST_TEMPLATE.md

@@ -25,7 +25,7 @@ Issue number: resolves #
   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.
+  3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information.
 -->
 
 

.github/workflows/actions/build-angular-server/action.yml

@@ -6,20 +6,13 @@ runs:
     - uses: actions/setup-node@v4
       with:
         node-version: 18.x
-    - uses: pnpm/action-setup@v2
-      with:
-        version: 8
-    - uses: ./.github/workflows/actions/download-archive
-      with:
-        name: ionic-core
-        path: ./core
-        filename: CoreBuild.zip
+
     - name: Install Angular Server Dependencies
-      run: pnpm install
+      run: npm ci
       shell: bash
       working-directory: ./packages/angular-server
     - name: Build
-      run: pnpm run build.prod
+      run: npm run build.prod
       shell: bash
       working-directory: ./packages/angular-server
     - uses: ./.github/workflows/actions/upload-archive

.github/workflows/actions/build-angular/action.yml

@@ -6,24 +6,25 @@ runs:
     - uses: actions/setup-node@v4
       with:
         node-version: 18.x
-    - uses: pnpm/action-setup@v2
-      with:
-        version: 8
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
         path: ./core
         filename: CoreBuild.zip
     - name: Install Angular Dependencies
-      run: pnpm install
+      run: npm ci
+      shell: bash
+      working-directory: ./packages/angular
+    - name: Sync
+      run: npm run sync
       shell: bash
       working-directory: ./packages/angular
     - name: Lint
-      run: pnpm run lint
+      run: npm run lint
       shell: bash
       working-directory: ./packages/angular
     - name: Build
-      run: pnpm run build
+      run: npm run build
       shell: bash
       working-directory: ./packages/angular
     - name: Check Diff

.github/workflows/actions/build-core-stencil-prerelease/action.yml

@@ -12,19 +12,17 @@ runs:
     - uses: actions/setup-node@v4
       with:
         node-version: 18.x
-    - uses: pnpm/action-setup@v2
-      with:
-        version: 8
+
     - name: Install Dependencies
-      run: pnpm install
+      run: npm ci
       working-directory: ./core
       shell: bash
     - name: Install Stencil ${{ inputs.stencil-version }}
       working-directory: ./core
-      run: pnpm i @stencil/core@${{ inputs.stencil-version }}
+      run: npm i @stencil/core@${{ inputs.stencil-version }}
       shell: bash
     - name: Build Core
-      run: pnpm npm run build -- --ci --debug --verbose
+      run: npm run build -- --ci --debug --verbose
       working-directory: ./core
       shell: bash
     - uses: ./.github/workflows/actions/upload-archive

.github/workflows/actions/build-core/action.yml

@@ -12,22 +12,19 @@ runs:
     - uses: actions/setup-node@v4
       with:
         node-version: 18.x
-    - uses: pnpm/action-setup@v2
-      with:
-        version: 8
     - name: Install Dependencies
-      run: pnpm install
+      run: npm install
       working-directory: ./core
       shell: bash
     # If an Ionicons version was specified install that.
     # Otherwise just use the version defined in the package.json.
     - name: Install Ionicons Version
       if: inputs.ionicons-version != ''
-      run: pnpm install ionicons@${{ inputs.ionicons-version }}
+      run: npm install ionicons@${{ inputs.ionicons-version }}
       working-directory: ./core
       shell: bash
     - name: Build Core
-      run: pnpm run build --ci
+      run: npm run build -- --ci
       working-directory: ./core
       shell: bash
     - uses: ./.github/workflows/actions/upload-archive

.github/workflows/actions/build-react-router/action.yml

@@ -6,9 +6,6 @@ runs:
     - uses: actions/setup-node@v4
       with:
         node-version: 18.x
-    - uses: pnpm/action-setup@v2
-      with:
-        version: 8
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
@@ -20,15 +17,19 @@ runs:
         path: ./packages/react
         filename: ReactBuild.zip
     - name: Install Dependencies
-      run: pnpm install
+      run: npm ci
+      shell: bash
+      working-directory: ./packages/react-router
+    - name: Sync
+      run: npm run sync
       shell: bash
       working-directory: ./packages/react-router
     - name: Lint
-      run: pnpm run lint
+      run: npm run lint
       shell: bash
       working-directory: ./packages/react-router
     - name: Build
-      run: pnpm run build
+      run: npm run build
       shell: bash
       working-directory: ./packages/react-router
     - uses: ./.github/workflows/actions/upload-archive

.github/workflows/actions/build-react/action.yml

@@ -6,28 +6,29 @@ runs:
     - uses: actions/setup-node@v4
       with:
         node-version: 18.x
-    - uses: pnpm/action-setup@v2
-      with:
-        version: 8
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
         path: ./core
         filename: CoreBuild.zip
     - name: Install React Dependencies
-      run: pnpm install
+      run: npm ci
+      shell: bash
+      working-directory: ./packages/react
+    - name: Sync
+      run: npm run sync
       shell: bash
       working-directory: ./packages/react
     - name: Lint
-      run: pnpm run lint
+      run: npm run lint
       shell: bash
       working-directory: ./packages/react
     - name: Build
-      run: pnpm run build
+      run: npm run build
       shell: bash
       working-directory: ./packages/react
     - name: Test Spec
-      run: pnpm run test.spec
+      run: npm run test.spec
       shell: bash
       working-directory: ./packages/react
     - name: Check Diff

.github/workflows/actions/build-vue-router/action.yml

@@ -6,9 +6,6 @@ runs:
     - uses: actions/setup-node@v4
       with:
         node-version: 18.x
-    - uses: pnpm/action-setup@v2
-      with:
-        version: 8
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
@@ -20,19 +17,23 @@ runs:
         path: ./packages/vue
         filename: VueBuild.zip
     - name: Install Vue Router Dependencies
-      run: pnpm install
+      run: npm ci
+      shell: bash
+      working-directory: ./packages/vue-router
+    - name: Sync
+      run: npm run sync
       shell: bash
       working-directory: ./packages/vue-router
     - name: Lint
-      run: pnpm run lint
+      run: npm run lint
       shell: bash
       working-directory: ./packages/vue-router
     - name: Build
-      run: pnpm run build
+      run: npm run build
       shell: bash
       working-directory: ./packages/vue-router
     - name: Test Spec
-      run: pnpm run test.spec
+      run: npm run test.spec
       shell: bash
       working-directory: ./packages/vue-router
     - uses: ./.github/workflows/actions/upload-archive

.github/workflows/actions/build-vue/action.yml

@@ -6,24 +6,25 @@ runs:
     - uses: actions/setup-node@v4
       with:
         node-version: 18.x
-    - uses: pnpm/action-setup@v2
-      with:
-        version: 8
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
         path: ./core
         filename: CoreBuild.zip
     - name: Install Vue Dependencies
-      run: pnpm install
+      run: npm ci
+      shell: bash
+      working-directory: ./packages/vue
+    - name: Sync
+      run: npm run sync
       shell: bash
       working-directory: ./packages/vue
     - name: Lint
-      run: pnpm run lint
+      run: npm run lint
       shell: bash
       working-directory: ./packages/vue
     - name: Build
-      run: pnpm run build
+      run: npm run build
       shell: bash
       working-directory: ./packages/vue
     - name: Check Diff

.github/workflows/actions/publish-npm/action.yml

@@ -22,9 +22,6 @@ runs:
     - uses: actions/setup-node@v4
       with:
         node-version: 18.x
-    - uses: pnpm/action-setup@v2
-      with:
-        version: 8
     # Provenance requires npm 9.5.0+
     - name: Install latest npm
       run: npm install -g npm@latest
@@ -32,26 +29,27 @@ runs:
     # This ensures the local version of Lerna is installed
     # and that we do not use the global Lerna version
     - name: Install root dependencies
-      run: pnpm install
+      run: npm ci
       shell: bash
-    - name: Install project dependencies
-      run: pnpm install
+    - name: Install Dependencies
+      run: npx lerna bootstrap --include-dependencies --scope ${{ inputs.scope }} --ignore-scripts -- --legacy-peer-deps
       shell: bash
       working-directory: ${{ inputs.working-directory }}
     - name: Update Version
-      run: pnpm exec lerna version ${{ inputs.version }} --yes --exact --no-changelog --no-push --no-git-tag-version --preid=${{ inputs.preid }}
+      run: npx lerna version ${{ inputs.version }} --yes --exact --no-changelog --no-push --no-git-tag-version --preid=${{ inputs.preid }}
       shell: bash
       working-directory: ${{ inputs.working-directory }}
     - name: Run Build
-      run: pnpm run build
+      run: npm run build
       shell: bash
       working-directory: ${{ inputs.working-directory }}
     - name: Prepare NPM Token
-      run: pnpm config set //registry.npmjs.org/:_authToken ${NPM_TOKEN}
+      run: echo //registry.npmjs.org/:_authToken=${NPM_TOKEN} > .npmrc
+      working-directory: ${{ inputs.working-directory }}
       shell: bash
       env:
         NPM_TOKEN: ${{ inputs.token }}
     - name: Publish to NPM
-      run: pnpm publish ${{ inputs.folder }} --tag ${{ inputs.tag }} --provenance --no-git-checks
+      run: npm publish ${{ inputs.folder }} --tag ${{ inputs.tag }} --provenance
       shell: bash
       working-directory: ${{ inputs.working-directory }}

.github/workflows/actions/test-angular-e2e/action.yml

@@ -9,9 +9,6 @@ runs:
     - uses: actions/setup-node@v4
       with:
         node-version: 18
-    - uses: pnpm/action-setup@v2
-      with:
-        version: 8
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
@@ -32,10 +29,14 @@ runs:
       shell: bash
       working-directory: ./packages/angular/test
     - name: Install Dependencies
-      run: pnpm install
+      run: npm install
+      shell: bash
+      working-directory: ./packages/angular/test/build/${{ inputs.app }}
+    - name: Sync Built Changes
+      run: npm run sync
       shell: bash
       working-directory: ./packages/angular/test/build/${{ inputs.app }}
     - name: Run Tests
-      run: pnpm run test
+      run: npm run test
       shell: bash
       working-directory: ./packages/angular/test/build/${{ inputs.app }}

.github/workflows/actions/test-core-lint/action.yml

@@ -6,15 +6,12 @@ runs:
     - uses: actions/setup-node@v4
       with:
         node-version: 18.x
-    - uses: pnpm/action-setup@v2
-      with:
-        version: 8
     - name: Install Dependencies
-      run: pnpm install
+      run: npm ci
       working-directory: ./core
       shell: bash
     - name: Lint
-      run: pnpm run lint
+      run: npm run lint
       shell: bash
       working-directory: ./core
     # Lint changes should be pushed

.github/workflows/actions/test-core-screenshot/action.yml

@@ -16,21 +16,18 @@ runs:
     - uses: actions/setup-node@v4
       with:
         node-version: 18.x
-    - uses: pnpm/action-setup@v2
-      with:
-        version: 8
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
         path: ./core
         filename: CoreBuild.zip
     - name: Install Dependencies
-      run: pnpm install
+      run: npm install
       shell: bash
       working-directory: ./core
     - name: Test
       if: inputs.update != 'true'
-      run: pnpm run test.e2e.docker.ci ${{ inputs.component }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }}
+      run: npm run test.e2e.docker.ci ${{ inputs.component }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }}
       shell: bash
       working-directory: ./core
     - name: Test and Update
@@ -52,7 +49,7 @@ runs:
       # which is why we not using the upload-archive
       # composite step here.
       run: |
-        pnpm run test.e2e.docker.ci ${{ inputs.component }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots
+        npm run test.e2e.docker.ci ${{ inputs.component }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots
         git add src/\*.png --force
         mkdir updated-screenshots
         cd ../ && rsync -R --progress $(git diff --name-only --cached) core/updated-screenshots

.github/workflows/actions/test-core-spec/action.yml

@@ -9,15 +9,12 @@ runs:
     - uses: actions/setup-node@v4
       with:
         node-version: 18.x
-    - uses: pnpm/action-setup@v2
-      with:
-        version: 8
     - name: Install Dependencies
-      run: pnpm install
+      run: npm ci
       working-directory: ./core
       shell: bash
     - name: Install Stencil ${{ inputs.stencil-version }}
-      run: pnpm install @stencil/core@${{ inputs.stencil-version }}
+      run: npm install @stencil/core@${{ inputs.stencil-version }}
       shell: bash
       working-directory: ./core
       if: ${{ inputs.stencil-version != '' }}
@@ -27,6 +24,6 @@ runs:
         path: ./core
         filename: CoreBuild.zip
     - name: Test
-      run: pnpm run test.spec --ci
+      run: npm run test.spec -- --ci
       shell: bash
       working-directory: ./core

.github/workflows/actions/test-react-e2e/action.yml

@@ -9,9 +9,6 @@ runs:
     - uses: actions/setup-node@v4
       with:
         node-version: 18.x
-    - uses: pnpm/action-setup@v2
-      with:
-        version: 8
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
@@ -32,15 +29,19 @@ runs:
       shell: bash
       working-directory: ./packages/react/test
     - name: Install Dependencies
-      run: pnpm install
+      run: npm install
+      shell: bash
+      working-directory: ./packages/react/test/build/${{ inputs.app }}
+    - name: Sync Built Changes
+      run: npm run sync
       shell: bash
       working-directory: ./packages/react/test/build/${{ inputs.app }}
     - name: Build
-      run: pnpm run build
+      run: npm run build
       shell: bash
       working-directory: ./packages/react/test/build/${{ inputs.app }}
     - name: Run Tests
-      run: pnpm run e2e
+      run: npm run e2e
       shell: bash
       working-directory: ./packages/react/test/build/${{ inputs.app }}
 

.github/workflows/actions/test-react-router-e2e/action.yml

@@ -9,9 +9,6 @@ runs:
     - uses: actions/setup-node@v4
       with:
         node-version: 18.x
-    - uses: pnpm/action-setup@v2
-      with:
-        version: 8
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
@@ -32,14 +29,18 @@ runs:
       shell: bash
       working-directory: ./packages/react-router/test
     - name: Install Dependencies
-      run: pnpm install
+      run: npm install
+      shell: bash
+      working-directory: ./packages/react-router/test/build/${{ inputs.app }}
+    - name: Sync Built Changes
+      run: npm run sync
       shell: bash
       working-directory: ./packages/react-router/test/build/${{ inputs.app }}
     - name: Build
-      run: pnpm run build
+      run: npm run build
       shell: bash
       working-directory: ./packages/react-router/test/build/${{ inputs.app }}
     - name: Run Tests
-      run: pnpm run e2e
+      run: npm run e2e
       shell: bash
       working-directory: ./packages/react-router/test/build/${{ inputs.app }}

.github/workflows/actions/test-vue-e2e/action.yml

@@ -9,9 +9,6 @@ runs:
     - uses: actions/setup-node@v4
       with:
         node-version: 18.x
-    - uses: pnpm/action-setup@v2
-      with:
-        version: 8
     - uses: ./.github/workflows/actions/download-archive
       with:
         name: ionic-core
@@ -32,14 +29,18 @@ runs:
       shell: bash
       working-directory: ./packages/vue/test
     - name: Install Dependencies
-      run: pnpm install
+      run: npm install
+      shell: bash
+      working-directory: ./packages/vue/test/build/${{ inputs.app }}
+    - name: Sync
+      run: npm run sync
       shell: bash
       working-directory: ./packages/vue/test/build/${{ inputs.app }}
     - name: Run Spec Tests
-      run: pnpm run test:unit
+      run: npm run test:unit
       shell: bash
       working-directory: ./packages/vue/test/build/${{ inputs.app }}
     - name: Run E2E Tests
-      run: pnpm run test:e2e
+      run: npm run test:e2e
       shell: bash
       working-directory: ./packages/vue/test/build/${{ inputs.app }}

.github/workflows/assign-issues.yml

@@ -11,8 +11,8 @@ jobs:
       issues: write
     steps:
       - name: 'Auto-assign issue'
-        uses: pozil/auto-assign-issue@edee9537367a8fbc625d27f9e10aa8bad47b8723 # v1.13.0
+        uses: pozil/auto-assign-issue@65947009a243e6b3993edeef4e64df3ca85d760c # v1.14.0
         with:
-          assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, mapsandapps, thetaPC
+          assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, thetaPC
           numOfAssignee: 1
           allowSelfAssign: false

.github/workflows/dev-build.yml

@@ -10,14 +10,11 @@ jobs:
       dev-hash: ${{ steps.create-dev-hash.outputs.DEV_HASH }}
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 8
       # A 1 is required before the timestamp
       # as lerna will fail when there is a leading 0
       # See https://github.com/lerna/lerna/issues/2840
       - name: Install Dependencies
-        run: pnpm install
+        run: npm ci
         shell: bash
       - id: create-dev-hash
         name: Create Dev Hash

.github/workflows/nightly.yml

@@ -13,14 +13,11 @@ jobs:
       nightly-hash: ${{ steps.create-nightly-hash.outputs.NIGHTLY_HASH }}
     steps:
       - uses: actions/checkout@v4
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 8
       # A 1 is required before the timestamp
       # as lerna will fail when there is a leading 0
       # See https://github.com/lerna/lerna/issues/2840
       - name: Install Dependencies
-        run: pnpm install
+        run: npm ci
         shell: bash
       - id: create-nightly-hash
         name: Create Nightly Hash

.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:
@@ -161,6 +161,7 @@ jobs:
         version: ${{ inputs.version }}
         preid: ${{ inputs.preid }}
         working-directory: 'packages/angular-server'
+        folder: './dist'
         token: ${{ secrets.NPM_TOKEN }}
 
   release-react-router:

.github/workflows/release.yml

@@ -20,10 +20,7 @@ on:
         type: choice
         description: Which npm tag should this be published to?
         options:
-          - latest
-          - next
-          - v5-lts
-          - v4-lts
+          - v7-lts
       preid:
         type: choice
         description: Which prerelease identifier should be used? This is only needed when version is "prepatch", "preminor", "premajor", or "prerelease".
@@ -54,9 +51,6 @@ jobs:
       with:
         token: ${{ secrets.IONITRON_TOKEN }}
         fetch-depth: 0
-    - uses: pnpm/action-setup@v2
-      with:
-        version: 8
     - name: Configure Identity
       # Commits from github-actions do not
       # trigger other GitHub Actions. As a result,
@@ -104,7 +98,7 @@ jobs:
       # so we do that here.
       - name: Bump Package Lock
         run: |
-          pnpm install --lockfile-only
+          lerna exec "npm install --package-lock-only"
           git add .
           git commit -m "chore(): update package lock files"
           git push

.vercelignore

@@ -0,0 +1 @@
+core/src/components/**/*/*.png

CHANGELOG.md

@@ -3,6 +3,51 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.8.6](https://github.com/ionic-team/ionic-framework/compare/v7.8.5...v7.8.6) (2024-04-24)
+
+
+### Bug Fixes
+
+* **input:** clear button can be navigated using screen reader ([#29366](https://github.com/ionic-team/ionic-framework/issues/29366)) ([#29383](https://github.com/ionic-team/ionic-framework/issues/29383)) ([5ce0c60](https://github.com/ionic-team/ionic-framework/commit/5ce0c609f365aa497814067276b67fc4e58bdb35))
+
+
+
+
+
+## [7.8.5](https://github.com/ionic-team/ionic-framework/compare/v7.8.4...v7.8.5) (2024-04-17)
+
+
+### Bug Fixes
+
+* **modal:** improve sheet modal scrolling and gesture behavior ([#29312](https://github.com/ionic-team/ionic-framework/issues/29312)) ([9738228](https://github.com/ionic-team/ionic-framework/commit/9738228bc05abe3e2012e57b0e6b85f0ec06f66b)), closes [#24583](https://github.com/ionic-team/ionic-framework/issues/24583)
+
+
+
+
+
+## [7.8.4](https://github.com/ionic-team/ionic-framework/compare/v7.8.3...v7.8.4) (2024-04-10)
+
+
+### Performance Improvements
+
+* **styles:** compress distributed global stylesheets ([#29275](https://github.com/ionic-team/ionic-framework/issues/29275)) ([b3cd49b](https://github.com/ionic-team/ionic-framework/commit/b3cd49bf2219aacffc1ac34acbae7c76ef243765))
+
+
+
+
+
+## [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)
 
 

README.md

@@ -20,7 +20,7 @@
   <a href="https://github.com/ionic-team/ionic-framework/blob/main/LICENSE">
     <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Ionic Framework is released under the MIT license." />
   </a>
-  <a href="https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md">
+  <a href="https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md">
     <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
   </a>
   <a href="https://twitter.com/Ionicframework">
@@ -38,7 +38,7 @@
     Documentation
   </a>
   <span> · </span>
-  <a href="https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md">Contribute</a>
+  <a href="https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md">Contribute</a>
   <span> · </span>
   <a href="https://blog.ionicframework.com/">Blog</a>
   <br />
@@ -88,7 +88,7 @@ The Ionic Conference App is a full featured Ionic app. It is the perfect startin
 ### Contributing
 
 Thanks for your interest in contributing! Read up on our guidelines for
-[contributing](https://github.com/ionic-team/ionic/blob/main/.github/CONTRIBUTING.md)
+[contributing](https://github.com/ionic-team/ionic/blob/main/docs/CONTRIBUTING.md)
 and then look through our issues with a [help wanted](https://github.com/ionic-team/ionic/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
 label.
 

core/CHANGELOG.md

@@ -3,6 +3,51 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.8.6](https://github.com/ionic-team/ionic-framework/compare/v7.8.5...v7.8.6) (2024-04-24)
+
+
+### Bug Fixes
+
+* **input:** clear button can be navigated using screen reader ([#29366](https://github.com/ionic-team/ionic-framework/issues/29366)) ([#29383](https://github.com/ionic-team/ionic-framework/issues/29383)) ([5ce0c60](https://github.com/ionic-team/ionic-framework/commit/5ce0c609f365aa497814067276b67fc4e58bdb35))
+
+
+
+
+
+## [7.8.5](https://github.com/ionic-team/ionic-framework/compare/v7.8.4...v7.8.5) (2024-04-17)
+
+
+### Bug Fixes
+
+* **modal:** improve sheet modal scrolling and gesture behavior ([#29312](https://github.com/ionic-team/ionic-framework/issues/29312)) ([9738228](https://github.com/ionic-team/ionic-framework/commit/9738228bc05abe3e2012e57b0e6b85f0ec06f66b)), closes [#24583](https://github.com/ionic-team/ionic-framework/issues/24583)
+
+
+
+
+
+## [7.8.4](https://github.com/ionic-team/ionic-framework/compare/v7.8.3...v7.8.4) (2024-04-10)
+
+
+### Performance Improvements
+
+* **styles:** compress distributed global stylesheets ([#29275](https://github.com/ionic-team/ionic-framework/issues/29275)) ([b3cd49b](https://github.com/ionic-team/ionic-framework/commit/b3cd49bf2219aacffc1ac34acbae7c76ef243765))
+
+
+
+
+
+## [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)
 
 

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.8.2",
+  "version": "7.8.6",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -43,7 +43,6 @@
     "@capacitor/status-bar": "^5.0.7",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
-    "@jest/core": "^27.5.1",
     "@playwright/test": "^1.39.0",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
@@ -51,20 +50,20 @@
     "@stencil/react-output-target": "^0.5.3",
     "@stencil/sass": "^3.0.9",
     "@stencil/vue-output-target": "^0.8.7",
-    "@types/jest": "^27.5.2",
+    "@types/jest": "^29.5.6",
     "@types/node": "^14.6.0",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",
+    "chalk": "^5.3.0",
     "clean-css-cli": "^5.6.1",
     "domino": "^2.1.6",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-custom-rules": "file:custom-rules",
-    "execa": "^5.0.0",
-    "fast-deep-equal": "^3.1.3",
+    "execa": "^8.0.1",
     "fs-extra": "^9.0.1",
-    "jest": "^27.5.1",
-    "jest-cli": "^27.5.1",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
     "prettier": "^2.6.1",
     "rollup": "^2.26.4",
     "sass": "^1.33.0",
@@ -73,35 +72,34 @@
     "stylelint-order": "^4.1.0"
   },
   "scripts": {
-    "build": "pnpm run clean && pnpm run build.css && stencil build --es5 --docs-json dist/docs.json",
-    "build.css": "pnpm run css.sass && pnpm run css.minify",
-    "build.debug": "pnpm run clean && stencil build --debug",
+    "build": "npm run clean && npm run build.css && stencil build --es5 --docs-json dist/docs.json",
+    "build.css": "npm run css.sass && npm run css.minify",
+    "build.debug": "npm run clean && stencil build --debug",
     "build.docs.json": "stencil build --docs-json dist/docs.json",
     "clean": "node scripts/clean.js",
     "css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
-    "css.sass": "sass --embed-sources src/css:./css",
+    "css.sass": "sass --embed-sources --style compressed src/css:./css",
     "eslint": "eslint src",
-    "lint": "pnpm run lint.ts && pnpm run lint.sass && pnpm run prettier --write --cache",
-    "lint.fix": "pnpm run lint.ts.fix && pnpm run lint.sass.fix && pnpm run prettier --write --cache",
+    "lint": "npm run lint.ts && npm run lint.sass && npm run prettier -- --write --cache",
+    "lint.fix": "npm run lint.ts.fix && npm run lint.sass.fix && npm run prettier -- --write --cache",
     "lint.sass": "stylelint \"src/**/*.scss\"",
-    "lint.sass.fix": "pnpm run lint.sass --fix",
-    "lint.ts": "pnpm run eslint",
-    "lint.ts.fix": "pnpm run eslint --fix",
+    "lint.sass.fix": "npm run lint.sass -- --fix",
+    "lint.ts": "npm run eslint",
+    "lint.ts.fix": "npm run eslint -- --fix",
     "prerender.e2e": "node scripts/testing/prerender.js",
     "prettier": "prettier \"./src/**/*.{html,ts,tsx,js,jsx}\"",
-    "start": "pnpm run build.css && stencil build --dev --watch --serve",
-    "test": "pnpm run test.spec && pnpm run test.e2e",
+    "start": "npm run build.css && stencil build --dev --watch --serve",
+    "test": "npm run test.spec && npm run test.e2e",
     "test.spec": "stencil test --spec --max-workers=2",
-    "test.e2e": "pnpm exec playwright test",
-    "test.e2e.update-snapshots": "pnpm run test.e2e --update-snapshots",
+    "test.e2e": "npx playwright test",
+    "test.e2e.update-snapshots": "npm run test.e2e -- --update-snapshots",
     "test.watch": "jest --watch --no-cache",
     "test.treeshake": "node scripts/treeshaking.js dist/index.js",
-    "validate": "pnpm run lint && pnpm run test && pnpm run build && pnpm run test.treeshake",
+    "validate": "npm run lint && npm run test && npm run build && npm run test.treeshake",
     "docker.build": "docker build -t ionic-playwright .",
-    "test.e2e.docker": "pnpm run docker.build && docker run -it --rm -e DISPLAY=$(cat docker-display.txt) -v $(cat docker-display-volume.txt) --ipc=host --mount=type=bind,source=./,target=/ionic ionic-playwright pnpm run test.e2e --",
-    "test.e2e.docker.update-snapshots": "pnpm run test.e2e.docker -- --update-snapshots",
-    "test.e2e.docker.ci": "pnpm run docker.build && docker run -e CI='true' --rm --ipc=host --mount=type=bind,source=./,target=/ionic ionic-playwright pnpm run test.e2e --",
-    "test.report": "pnpm exec playwright show-report"
+    "test.e2e.docker": "npm run docker.build && node ./scripts/docker.mjs",
+    "test.e2e.docker.update-snapshots": "npm run test.e2e.docker -- --update-snapshots",
+    "test.e2e.docker.ci": "npm run docker.build && CI=true node ./scripts/docker.mjs"
   },
   "author": "Ionic Team",
   "license": "MIT",

core/scripts/docker.mjs

@@ -0,0 +1,56 @@
+import { execa } from 'execa';
+import * as fs from 'fs';
+import { resolve } from 'path';
+import chalk from 'chalk';
+
+const removeNewline = (string) => {
+  return string.replace(/(\r\n|\n|\r)/gm, "");
+}
+
+const readConfigFile = (file) => {
+  if (fs.existsSync(file)) {
+    return fs.readFileSync(file, { encoding: 'utf-8' });
+  }
+
+  return '';
+}
+
+// These files are optional, so we don't want to error if they don't exist
+const display = removeNewline(readConfigFile('docker-display.txt'));
+const displayVolume = removeNewline(readConfigFile('docker-display-volume.txt'));
+
+// Using --mount requires an absolute path which is what this gives us.
+const pwd = resolve('./');
+
+/**
+ * -it will let the user gracefully kill the process using Ctrl+C (or equivalent)
+ * -e DISPLAY and -v handle configuration for headed mode
+ * --ipc=host is recommended when using Chromium to avoid out of memory crashes: https://playwright.dev/docs/ci#docker
+ * --init is recommended to avoid zombie processes: https://playwright.dev/docs/ci#docker
+ * --mount allow us to mount the local Ionic project inside of the Docker container so devs do not need to re-build the project in Docker.
+ */
+const args = ['run', '--rm', '--init', `-e DISPLAY=${display}`, `-v ${displayVolume}`, '--ipc=host', `--mount=type=bind,source=${pwd},target=/ionic`, 'ionic-playwright', 'npm run test.e2e --', ...process.argv.slice(2)];
+
+// Set the CI env variable so Playwright uses the CI config
+if (process.env.CI) {
+  args.splice(1, 0, '-e CI=true');
+/**
+ * Otherwise, we should let the session be interactive locally. This will
+ * not work on CI which is why we do not apply it there.
+ */
+} else {
+  args.splice(1, 0, '-it');
+}
+
+/**
+ * While these config files are optional to run the tests, they are required to run
+ * the tests in headed mode. Add a warning if dev tries to run headed tests without
+ * the correct config files.
+ */
+const requestHeaded = process.argv.find(arg => arg.includes('headed'));
+const hasHeadedConfigFiles = display && displayVolume;
+if (requestHeaded && !hasHeadedConfigFiles) {
+  console.warn(chalk.yellow.bold('\n⚠️ You are running tests in headed mode, but one or more of your headed config files was not found.\nPlease ensure that both docker-display.txt and docker-display-volume.txt have been created in the correct location.\n'));
+}
+
+execa('docker', args, { shell: true, stdio: 'inherit' });

core/scripts/readme.md

@@ -1,44 +1,4 @@
 
-## Build
+# Core Scripts
 
-### 1. Clone ionic
-
-    git@github.com:ionic-team/ionic.git
-    cd ionic
-
-### 2. Run `npm install`
-
-  cd core
-  npm install
-
-
-Notice that `@ionic/core` lives in `core`.
-
-### 3. Run `npm start`
-
-Make sure you are inside the `core` directory.
-
-    npm start
-
-With the `dev` command, Ionic components will be built with [Stencil](https://stenciljs.com/), changes to source files are watched, a local http server will startup, and http://localhost:3333/ will open in a browser.
-
-### 4. Preview
-
-Navigate to http://localhost:3333/src/components/. Each component has small e2e apps found in the `test` directory, for example: http://localhost:3333/src/components/button/test/basic
-
-As changes are made in an editor to source files, the e2e app will live-reload.
-
-## How to contribute
-
-1. `npm start` allows you to modify the components and have live reloading, just like another ionic app.
-
-2. When everything looks good, run  `npm run validate` to verify the tests linter and production build passes.
-
-
-# Deploy
-
-1. `npm run prepare.deploy`
-2. Review/update changelog
-3. Commit updates using the package name and version number as the commit message.
-4. `npm run deploy`
-5. :tada:
+This file has been moved to [/docs/core/testing/preview-changes.md](/docs/core/testing/preview-changes.md).

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))};
+}

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))};
+}

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))};
-}

core/src/components/input/input.tsx

@@ -831,6 +831,15 @@ export class Input implements ComponentInterface {
                    */
                   ev.preventDefault();
                 }}
+                onFocusin={(ev) => {
+                  /**
+                   * Prevent the focusin event from bubbling otherwise it will cause the focusin
+                   * event listener in scroll assist to fire. When this fires, focus will be moved
+                   * back to the input even if the clear button was never tapped. This poses issues
+                   * for screen readers as it means users would be unable to swipe past the clear button.
+                   */
+                  ev.stopPropagation();
+                }}
                 onClick={this.clearTextInput}
               >
                 <ion-icon aria-hidden="true" icon={mode === 'ios' ? closeCircle : closeSharp}></ion-icon>

core/src/components/modal/gestures/sheet.ts

@@ -1,5 +1,6 @@
+import { isIonContent, findClosestIonContent } from '@utils/content';
 import { createGesture } from '@utils/gesture';
-import { clamp, raf } from '@utils/helpers';
+import { clamp, raf, getElementRoot } from '@utils/helpers';
 
 import type { Animation } from '../../../interface';
 import type { GestureDetail } from '../../../utils/gesture';
@@ -142,22 +143,35 @@ export const createSheetGesture = (
 
   const canStart = (detail: GestureDetail) => {
     /**
-     * If the sheet is fully expanded and
-     * the user is swiping on the content,
-     * the gesture should not start to
-     * allow for scrolling on the content.
+     * If we are swiping on the content, swiping should only be possible if the content
+     * is scrolled all the way to the top so that we do not interfere with scrolling.
+     *
+     * We cannot assume that the `ion-content` target will remain consistent between swipes.
+     * For example, when using ion-nav within a modal it is possible to swipe, push a view,
+     * and then swipe again. The target content will not be the same between swipes.
      */
-    const content = (detail.event.target! as HTMLElement).closest('ion-content');
+    const contentEl = findClosestIonContent(detail.event.target! as HTMLElement);
     currentBreakpoint = getCurrentBreakpoint();
 
-    if (currentBreakpoint === 1 && content) {
-      return false;
+    if (currentBreakpoint === 1 && contentEl) {
+      /**
+       * The modal should never swipe to close on the content with a refresher.
+       * Note 1: We cannot solve this by making this gesture have a higher priority than
+       * the refresher gesture as the iOS native refresh gesture uses a scroll listener in
+       * addition to a gesture.
+       *
+       * Note 2: Do not use getScrollElement here because we need this to be a synchronous
+       * operation, and getScrollElement is asynchronous.
+       */
+      const scrollEl = isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl;
+      const hasRefresherInContent = !!contentEl.querySelector('ion-refresher');
+      return !hasRefresherInContent && scrollEl!.scrollTop === 0;
     }
 
     return true;
   };
 
-  const onStart = () => {
+  const onStart = (detail: GestureDetail) => {
     /**
      * If canDismiss is anything other than `true`
      * then users should be able to swipe down
@@ -173,11 +187,10 @@ export const createSheetGesture = (
     canDismissBlocksGesture = baseEl.canDismiss !== undefined && baseEl.canDismiss !== true && minBreakpoint === 0;
 
     /**
-     * If swiping on the content
-     * we should disable scrolling otherwise
-     * the sheet will expand and the content will scroll.
+     * If we are pulling down, then it is possible we are pulling on the content.
+     * We do not want scrolling to happen at the same time as the gesture.
      */
-    if (contentEl) {
+    if (detail.deltaY > 0 && contentEl) {
       contentEl.scrollY = false;
     }
 
@@ -193,6 +206,16 @@ export const createSheetGesture = (
   };
 
   const onMove = (detail: GestureDetail) => {
+    /**
+     * If we are pulling down, then it is possible we are pulling on the content.
+     * We do not want scrolling to happen at the same time as the gesture.
+     * This accounts for when the user scrolls down, scrolls all the way up, and then
+     * pulls down again such that the modal should start to move.
+     */
+    if (detail.deltaY > 0 && contentEl) {
+      contentEl.scrollY = false;
+    }
+
     /**
      * Given the change in gesture position on the Y axis,
      * compute where the offset of the animation should be
@@ -314,6 +337,17 @@ export const createSheetGesture = (
       onDismiss();
     }
 
+    /**
+     * If the sheet is going to be fully expanded then we should enable
+     * scrolling immediately. The sheet modal animation takes ~500ms to finish
+     * so if we wait until then there is a visible delay for when scrolling is
+     * re-enabled. Native iOS allows for scrolling on the sheet modal as soon
+     * as the gesture is released, so we align with that.
+     */
+    if (contentEl && snapToBreakpoint === breakpoints[breakpoints.length - 1]) {
+      contentEl.scrollY = true;
+    }
+
     return new Promise<void>((resolve) => {
       animation
         .onFinish(
@@ -334,14 +368,6 @@ export const createSheetGesture = (
                   currentBreakpoint = snapToBreakpoint;
                   onBreakpointChange(currentBreakpoint);
 
-                  /**
-                   * If the sheet is fully expanded, we can safely
-                   * enable scrolling again.
-                   */
-                  if (contentEl && currentBreakpoint === breakpoints[breakpoints.length - 1]) {
-                    contentEl.scrollY = true;
-                  }
-
                   /**
                    * Backdrop should become enabled
                    * after the backdropBreakpoint value

core/src/components/popover/popover.scss

@@ -101,8 +101,6 @@
   display: flex;
 
   flex-direction: column;
-
-  overflow: hidden;
 }
 
 // Nested Popovers

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 }) => {

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`));
     });
   });
 });