diff --git a/.github/workflows/actions/build-angular-server/action.yml b/.github/workflows/actions/build-angular-server/action.yml
index 6f848ee1b6..ba08574ec3 100644
--- a/.github/workflows/actions/build-angular-server/action.yml
+++ b/.github/workflows/actions/build-angular-server/action.yml
@@ -3,7 +3,7 @@ description: 'Build Ionic Angular Server'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v1
+    - uses: actions/setup-node@v3
       with:
         node-version: 16.x
 
diff --git a/.github/workflows/actions/build-angular/action.yml b/.github/workflows/actions/build-angular/action.yml
index fb6e786c0e..ea6f9f6ab8 100644
--- a/.github/workflows/actions/build-angular/action.yml
+++ b/.github/workflows/actions/build-angular/action.yml
@@ -3,19 +3,19 @@ description: 'Build Ionic Angular'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v1
+    - uses: actions/setup-node@v3
       with:
         node-version: 16.x
 
     - name: Cache Core Node Modules
-      uses: actions/cache@v2
+      uses: actions/cache@v3
       env:
         cache-name: core-node-modules
       with:
         path: ./core/node_modules
         key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./core/package-lock.json')}}-v2
     - name: Cache Angular Node Modules
-      uses: actions/cache@v2
+      uses: actions/cache@v3
       env:
         cache-name: angular-node-modules
       with:
diff --git a/.github/workflows/actions/build-core/action.yml b/.github/workflows/actions/build-core/action.yml
index 06a8e6e89f..1b23b8e20e 100644
--- a/.github/workflows/actions/build-core/action.yml
+++ b/.github/workflows/actions/build-core/action.yml
@@ -3,16 +3,16 @@ description: 'Build Ionic Core'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
       with:
         # Checkout the latest commit in this branch
         ref: ${{ github.event.pull_request.head.sha }}
-    - uses: actions/setup-node@v1
+    - uses: actions/setup-node@v3
       with:
         node-version: 16.x
 
     - name: Cache Node Modules
-      uses: actions/cache@v2
+      uses: actions/cache@v3
       env:
         cache-name: core-node-modules
       with:
diff --git a/.github/workflows/actions/build-react-router/action.yml b/.github/workflows/actions/build-react-router/action.yml
index 318024f878..d7780cf7c7 100644
--- a/.github/workflows/actions/build-react-router/action.yml
+++ b/.github/workflows/actions/build-react-router/action.yml
@@ -3,12 +3,12 @@ description: 'Build Ionic React Router'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v1
+    - uses: actions/setup-node@v3
       with:
         node-version: 16.x
 
     - name: Cache Core Node Modules
-      uses: actions/cache@v2
+      uses: actions/cache@v3
       env:
         cache-name: core-node-modules
       with:
diff --git a/.github/workflows/actions/build-react/action.yml b/.github/workflows/actions/build-react/action.yml
index e457a3c71d..358ac39cf5 100644
--- a/.github/workflows/actions/build-react/action.yml
+++ b/.github/workflows/actions/build-react/action.yml
@@ -3,12 +3,12 @@ description: 'Build Ionic React'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v1
+    - uses: actions/setup-node@v3
       with:
         node-version: 16.x
 
     - name: Cache Core Node Modules
-      uses: actions/cache@v2
+      uses: actions/cache@v3
       env:
         cache-name: core-node-modules
       with:
diff --git a/.github/workflows/actions/build-vue-router/action.yml b/.github/workflows/actions/build-vue-router/action.yml
index ea77812675..cd1e135a32 100644
--- a/.github/workflows/actions/build-vue-router/action.yml
+++ b/.github/workflows/actions/build-vue-router/action.yml
@@ -3,12 +3,12 @@ description: 'Builds Ionic Vue Router'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v1
+    - uses: actions/setup-node@v3
       with:
         node-version: 16.x
 
     - name: Cache Core Node Modules
-      uses: actions/cache@v2
+      uses: actions/cache@v3
       env:
         cache-name: core-node-modules
       with:
diff --git a/.github/workflows/actions/build-vue/action.yml b/.github/workflows/actions/build-vue/action.yml
index 5da64ef981..b098994ef4 100644
--- a/.github/workflows/actions/build-vue/action.yml
+++ b/.github/workflows/actions/build-vue/action.yml
@@ -3,12 +3,12 @@ description: 'Build Ionic Vue'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v1
+    - uses: actions/setup-node@v3
       with:
         node-version: 16.x
 
     - name: Cache Core Node Modules
-      uses: actions/cache@v2
+      uses: actions/cache@v3
       env:
         cache-name: core-node-modules
       with:
diff --git a/.github/workflows/actions/download-archive/action.yml b/.github/workflows/actions/download-archive/action.yml
index eaa9cb951f..736a484333 100644
--- a/.github/workflows/actions/download-archive/action.yml
+++ b/.github/workflows/actions/download-archive/action.yml
@@ -10,7 +10,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/download-artifact@v2
+    - uses: actions/download-artifact@v3
       with:
         name: ${{ inputs.name }}
         path: ${{ inputs.path }}
diff --git a/.github/workflows/actions/test-angular-e2e/action.yml b/.github/workflows/actions/test-angular-e2e/action.yml
index 3741f170b9..e31fca88c9 100644
--- a/.github/workflows/actions/test-angular-e2e/action.yml
+++ b/.github/workflows/actions/test-angular-e2e/action.yml
@@ -6,12 +6,12 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v1
+    - uses: actions/setup-node@v3
       with:
         node-version: 16
 
     - name: Cache Core Node Modules
-      uses: actions/cache@v2
+      uses: actions/cache@v3
       env:
         cache-name: core-node-modules
       with:
diff --git a/.github/workflows/actions/test-core-clean-build/action.yml b/.github/workflows/actions/test-core-clean-build/action.yml
index 91a43f320d..f7b55d7465 100644
--- a/.github/workflows/actions/test-core-clean-build/action.yml
+++ b/.github/workflows/actions/test-core-clean-build/action.yml
@@ -3,7 +3,7 @@ description: 'Test Core Clean Build'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v1
+    - uses: actions/setup-node@v3
       with:
         node-version: 16.x
 
diff --git a/.github/workflows/actions/test-core-e2e/action.yml b/.github/workflows/actions/test-core-e2e/action.yml
index a7f3d67c12..d4c4a5bd53 100644
--- a/.github/workflows/actions/test-core-e2e/action.yml
+++ b/.github/workflows/actions/test-core-e2e/action.yml
@@ -3,12 +3,12 @@ description: 'Test Core E2E'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v1
+    - uses: actions/setup-node@v3
       with:
         node-version: 16.x
 
     - name: Cache Core Node Modules
-      uses: actions/cache@v2
+      uses: actions/cache@v3
       env:
         cache-name: core-node-modules
       with:
diff --git a/.github/workflows/actions/test-core-lint/action.yml b/.github/workflows/actions/test-core-lint/action.yml
index 2907acc38d..3cf7deea64 100644
--- a/.github/workflows/actions/test-core-lint/action.yml
+++ b/.github/workflows/actions/test-core-lint/action.yml
@@ -3,12 +3,12 @@ description: 'Test Core Lint'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v1
+    - uses: actions/setup-node@v3
       with:
         node-version: 16.x
 
     - name: Cache Core Node Modules
-      uses: actions/cache@v2
+      uses: actions/cache@v3
       env:
         cache-name: core-node-modules
       with:
diff --git a/.github/workflows/actions/test-core-screenshot/action.yml b/.github/workflows/actions/test-core-screenshot/action.yml
index fa75157b75..3ca1e01de6 100644
--- a/.github/workflows/actions/test-core-screenshot/action.yml
+++ b/.github/workflows/actions/test-core-screenshot/action.yml
@@ -10,12 +10,12 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v1
+    - uses: actions/setup-node@v3
       with:
         node-version: 16.x
 
     - name: Cache Core Node Modules
-      uses: actions/cache@v2
+      uses: actions/cache@v3
       env:
         cache-name: core-node-modules
       with:
@@ -72,7 +72,7 @@ runs:
       working-directory: ./core
     - name: Archive Updated Screenshots
       if: inputs.update == 'true' && steps.test-and-update.outputs.hasUpdatedScreenshots == 'true'
-      uses: actions/upload-artifact@v2
+      uses: actions/upload-artifact@v3
       with:
         name: updated-screenshots-${{ inputs.shard }}-${{ inputs.totalShards }}
         path: UpdatedScreenshots-${{ inputs.shard }}-${{ inputs.totalShards }}.zip
diff --git a/.github/workflows/actions/test-core-spec/action.yml b/.github/workflows/actions/test-core-spec/action.yml
index 2b0995fdc9..813a300031 100644
--- a/.github/workflows/actions/test-core-spec/action.yml
+++ b/.github/workflows/actions/test-core-spec/action.yml
@@ -3,12 +3,12 @@ description: 'Test Core Spec'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v1
+    - uses: actions/setup-node@v3
       with:
         node-version: 16.x
 
     - name: Cache Core Node Modules
-      uses: actions/cache@v2
+      uses: actions/cache@v3
       env:
         cache-name: core-node-modules
       with:
diff --git a/.github/workflows/actions/test-react-e2e/action.yml b/.github/workflows/actions/test-react-e2e/action.yml
index 0bbaf8240c..7eb73985c6 100644
--- a/.github/workflows/actions/test-react-e2e/action.yml
+++ b/.github/workflows/actions/test-react-e2e/action.yml
@@ -3,12 +3,12 @@ description: 'Test React E2E'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v1
+    - uses: actions/setup-node@v3
       with:
         node-version: 16.x
 
     - name: Cache Core Node Modules
-      uses: actions/cache@v2
+      uses: actions/cache@v3
       env:
         cache-name: core-node-modules
       with:
diff --git a/.github/workflows/actions/test-react-router-e2e/action.yml b/.github/workflows/actions/test-react-router-e2e/action.yml
index ab44fc7a19..047c8434c5 100644
--- a/.github/workflows/actions/test-react-router-e2e/action.yml
+++ b/.github/workflows/actions/test-react-router-e2e/action.yml
@@ -3,12 +3,12 @@ description: 'Test React Router '
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v1
+    - uses: actions/setup-node@v3
       with:
         node-version: 16.x
 
     - name: Cache Core Node Modules
-      uses: actions/cache@v2
+      uses: actions/cache@v3
       env:
         cache-name: core-node-modules
       with:
diff --git a/.github/workflows/actions/test-vue-e2e/action.yml b/.github/workflows/actions/test-vue-e2e/action.yml
index d71a52864d..8452420f54 100644
--- a/.github/workflows/actions/test-vue-e2e/action.yml
+++ b/.github/workflows/actions/test-vue-e2e/action.yml
@@ -6,12 +6,12 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v1
+    - uses: actions/setup-node@v3
       with:
         node-version: 16.x
 
     - name: Cache Core Node Modules
-      uses: actions/cache@v2
+      uses: actions/cache@v3
       env:
         cache-name: core-node-modules
       with:
diff --git a/.github/workflows/actions/update-reference-screenshots/action.yml b/.github/workflows/actions/update-reference-screenshots/action.yml
index 3bd005fb47..008fca9b61 100644
--- a/.github/workflows/actions/update-reference-screenshots/action.yml
+++ b/.github/workflows/actions/update-reference-screenshots/action.yml
@@ -7,10 +7,10 @@ on:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v1
+    - uses: actions/setup-node@v3
       with:
         node-version: 16.x
-    - uses: actions/download-artifact@v2
+    - uses: actions/download-artifact@v3
       with:
         path: ./artifacts
     - name: Extract Archives
diff --git a/.github/workflows/actions/upload-archive/action.yml b/.github/workflows/actions/upload-archive/action.yml
index 08349ceba3..45b272b261 100644
--- a/.github/workflows/actions/upload-archive/action.yml
+++ b/.github/workflows/actions/upload-archive/action.yml
@@ -13,7 +13,7 @@ runs:
     - name: Create Archive
       run: zip -q -r ${{ inputs.output }} ${{ inputs.paths }}
       shell: bash
-    - uses: actions/upload-artifact@v2
+    - uses: actions/upload-artifact@v3
       with:
         name: ${{ inputs.name }}
         path: ${{ inputs.output }}
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 166231c01a..9d36623e48 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -15,7 +15,7 @@ jobs:
   build-core:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           # Checkout the latest commit in this branch
           ref: ${{ github.event.pull_request.head.sha }}
@@ -25,28 +25,28 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: ./.github/workflows/actions/test-core-clean-build
 
   test-core-lint:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: ./.github/workflows/actions/test-core-lint
 
   test-core-spec:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: ./.github/workflows/actions/test-core-spec
 
   test-core-e2e:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: ./.github/workflows/actions/test-core-e2e
 
   test-core-screenshot:
@@ -67,7 +67,7 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: ./.github/workflows/actions/test-core-screenshot
         with:
           shard: ${{ matrix.shard }}
@@ -95,14 +95,14 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
     - uses: ./.github/workflows/actions/build-vue
 
   build-vue-router:
     needs: [build-vue]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
     - uses: ./.github/workflows/actions/build-vue-router
 
   test-vue-e2e:
@@ -113,7 +113,7 @@ jobs:
     needs: [build-vue, build-vue-router]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
     - uses: ./.github/workflows/actions/test-vue-e2e
       with:
         app: ${{ matrix.apps }}
@@ -131,14 +131,14 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
     - uses: ./.github/workflows/actions/build-angular
 
   build-angular-server:
     needs: [build-angular]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
     - uses: ./.github/workflows/actions/build-angular-server
 
   test-angular-e2e:
@@ -149,7 +149,7 @@ jobs:
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
     - uses: ./.github/workflows/actions/test-angular-e2e
       with:
         app: ${{ matrix.apps }}
@@ -167,26 +167,26 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
     - uses: ./.github/workflows/actions/build-react
 
   build-react-router:
     needs: [build-react]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
     - uses: ./.github/workflows/actions/build-react-router
 
   test-react-router-e2e:
     needs: [build-react, build-react-router]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
     - uses: ./.github/workflows/actions/test-react-router-e2e
 
   test-react-e2e:
     needs: [build-react, build-react-router]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
+    - uses: actions/checkout@v3
     - uses: ./.github/workflows/actions/test-react-e2e
diff --git a/.github/workflows/dev-build.yml b/.github/workflows/dev-build.yml
index 5f4d222d7b..1a9ae81419 100644
--- a/.github/workflows/dev-build.yml
+++ b/.github/workflows/dev-build.yml
@@ -9,8 +9,8 @@ jobs:
     outputs:
       version: ${{ steps.dev-build.outputs.version }}
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
       - name: Install Dependencies
diff --git a/.github/workflows/nightly.yml b/.github/workflows/nightly.yml
index 39096fd906..15f28ca526 100644
--- a/.github/workflows/nightly.yml
+++ b/.github/workflows/nightly.yml
@@ -10,10 +10,10 @@ jobs:
   nightly-build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           fetch-depth: 0
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
       - name: Install Dependencies
diff --git a/.github/workflows/pre-release.yml b/.github/workflows/pre-release.yml
index 9b69df29d4..735697d71b 100644
--- a/.github/workflows/pre-release.yml
+++ b/.github/workflows/pre-release.yml
@@ -25,8 +25,8 @@ jobs:
   build-ionic:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
       - name: Configure Identity
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index c5a2a7d9ce..75b4d4902d 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -24,11 +24,11 @@ jobs:
   build-ionic:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         with:
           token: ${{ secrets.IONITRON_TOKEN }}
           fetch-depth: 0
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
           node-version: 16
       - name: Configure Identity
@@ -55,6 +55,15 @@ jobs:
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         shell: bash
+      # Lerna does not automatically bump versions
+      # of Ionic dependencies that have changed,
+      # so we do that here.
+      - name: Bump Package Lock
+        run: |
+          lerna exec "npm install --package-lock-only --legacy-peer-deps"
+          git add .
+          git commit -m "chore(): update package lock files"
+          git push
       # Purge the JSDeliver CDN cache so
       # component playgrounds always load
       # the latest version of Ionic.
diff --git a/.github/workflows/update-screenshots.yml b/.github/workflows/update-screenshots.yml
index d8c65a6417..7ff2c49901 100644
--- a/.github/workflows/update-screenshots.yml
+++ b/.github/workflows/update-screenshots.yml
@@ -7,7 +7,7 @@ jobs:
   build-core:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: ./.github/workflows/actions/build-core
 
   test-core-screenshot:
@@ -28,7 +28,7 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - uses: ./.github/workflows/actions/test-core-screenshot
         with:
           shard: ${{ matrix.shard }}
@@ -39,7 +39,7 @@ jobs:
     runs-on: ubuntu-latest
     needs: [test-core-screenshot]
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         # Normally, we could just push with the
         # default GITHUB_TOKEN, but that will
         # not cause the build workflow
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 76387c44a8..6a91431cd3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.3.1](https://github.com/ionic-team/ionic-framework/compare/v6.3.0...v6.3.1) (2022-10-12)
+
+
+### Bug Fixes
+
+* **datetime:** setting date async updates calendar grid ([#26070](https://github.com/ionic-team/ionic-framework/issues/26070)) ([0aee328](https://github.com/ionic-team/ionic-framework/commit/0aee328b4b84d5668752e5ae0792334d0173c2bb)), closes [#25776](https://github.com/ionic-team/ionic-framework/issues/25776)
+* **datetime:** setting max/min does not increase number of nodes rendered ([#26065](https://github.com/ionic-team/ionic-framework/issues/26065)) ([a5d178f](https://github.com/ionic-team/ionic-framework/commit/a5d178f4c03a0ad2501095afe1f75914b0462ae1)), closes [#26059](https://github.com/ionic-team/ionic-framework/issues/26059)
+* **item, card:** aria-label is reflected to the inner button ([#26028](https://github.com/ionic-team/ionic-framework/issues/26028)) ([3c89ebe](https://github.com/ionic-team/ionic-framework/commit/3c89ebe7216b2a19580a4f1ed23d5d1d4c37919d)), closes [#25885](https://github.com/ionic-team/ionic-framework/issues/25885)
+* **toolbar:** MD height only applies to MD segment ([#26042](https://github.com/ionic-team/ionic-framework/issues/26042)) ([ab89679](https://github.com/ionic-team/ionic-framework/commit/ab8967936c6bef5fc0a884cb8bf8f2deb7784c13)), closes [#18617](https://github.com/ionic-team/ionic-framework/issues/18617)
+
+
+
+
+
 # [6.3.0](https://github.com/ionic-team/ionic-framework/compare/v6.2.9...v6.3.0) (2022-10-05)
 
 
diff --git a/angular/CHANGELOG.md b/angular/CHANGELOG.md
index 697c10ab7e..807ace0c0a 100644
--- a/angular/CHANGELOG.md
+++ b/angular/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.3.1](https://github.com/ionic-team/ionic/compare/v6.3.0...v6.3.1) (2022-10-12)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 # [6.3.0 Manganese](https://github.com/ionic-team/ionic/compare/v6.2.9...v6.3.0) (2022-10-05)
 
 
diff --git a/angular/package-lock.json b/angular/package-lock.json
index cb89c58b16..1f8a11585d 100644
--- a/angular/package-lock.json
+++ b/angular/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "6.3.0",
+  "version": "6.3.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "6.3.0",
+      "version": "6.3.1",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.3.0",
+        "@ionic/core": "^6.3.1",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.0.0"
       },
@@ -1023,9 +1023,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.0.tgz",
-      "integrity": "sha512-6MR0hOdIM6sQyZyXez3/jWAnHScrZKaQxzGT2XiXXIpBrKztNdeAhqDLXoxbDU1PLyDnXXPWBzT6xZ698gG67g==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-OpmGQQ/sGtoXW4PQRvRjYa9mTlAmAWwFMu8g/1rcdAPaTQQAlRnfZ62wYYqmChLSFlVbn6mCleeljzR9FaYrAg==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.3",
@@ -7951,9 +7951,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.0.tgz",
-      "integrity": "sha512-6MR0hOdIM6sQyZyXez3/jWAnHScrZKaQxzGT2XiXXIpBrKztNdeAhqDLXoxbDU1PLyDnXXPWBzT6xZ698gG67g==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-OpmGQQ/sGtoXW4PQRvRjYa9mTlAmAWwFMu8g/1rcdAPaTQQAlRnfZ62wYYqmChLSFlVbn6mCleeljzR9FaYrAg==",
       "requires": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.3",
diff --git a/angular/package.json b/angular/package.json
index 59b10a5d3d..36d02d4a5e 100644
--- a/angular/package.json
+++ b/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "6.3.0",
+  "version": "6.3.1",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -46,7 +46,7 @@
     "validate": "npm i && npm run lint && npm run test && npm run build"
   },
   "dependencies": {
-    "@ionic/core": "^6.3.0",
+    "@ionic/core": "^6.3.1",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.0.0"
   },
diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md
index ce6056b335..3ddbba9518 100644
--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.3.1](https://github.com/ionic-team/ionic/compare/v6.3.0...v6.3.1) (2022-10-12)
+
+
+### Bug Fixes
+
+* **datetime:** setting date async updates calendar grid ([#26070](https://github.com/ionic-team/ionic/issues/26070)) ([0aee328](https://github.com/ionic-team/ionic/commit/0aee328b4b84d5668752e5ae0792334d0173c2bb)), closes [#25776](https://github.com/ionic-team/ionic/issues/25776)
+* **datetime:** setting max/min does not increase number of nodes rendered ([#26065](https://github.com/ionic-team/ionic/issues/26065)) ([a5d178f](https://github.com/ionic-team/ionic/commit/a5d178f4c03a0ad2501095afe1f75914b0462ae1)), closes [#26059](https://github.com/ionic-team/ionic/issues/26059)
+* **item, card:** aria-label is reflected to the inner button ([#26028](https://github.com/ionic-team/ionic/issues/26028)) ([3c89ebe](https://github.com/ionic-team/ionic/commit/3c89ebe7216b2a19580a4f1ed23d5d1d4c37919d)), closes [#25885](https://github.com/ionic-team/ionic/issues/25885)
+* **toolbar:** MD height only applies to MD segment ([#26042](https://github.com/ionic-team/ionic/issues/26042)) ([ab89679](https://github.com/ionic-team/ionic/commit/ab8967936c6bef5fc0a884cb8bf8f2deb7784c13)), closes [#18617](https://github.com/ionic-team/ionic/issues/18617)
+
+
+
+
+
 # [6.3.0](https://github.com/ionic-team/ionic/compare/v6.2.9...v6.3.0) (2022-10-05)
 
 
diff --git a/core/package-lock.json b/core/package-lock.json
index 051a54ad3b..b88d9b21db 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "6.3.0",
+  "version": "6.3.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "6.3.0",
+      "version": "6.3.1",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "^2.18.0",
diff --git a/core/package.json b/core/package.json
index 0794cf819c..43b63719e8 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "6.3.0",
+  "version": "6.3.1",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -86,7 +86,7 @@
     "css.sass": "sass --embed-sources src/css:./css",
     "eslint": "eslint src",
     "lint": "npm run lint.ts && npm run lint.sass && npm run prettier -- --write",
-    "lint.fix": "npm run lint.ts.fix && npm run lint.sass.fix",
+    "lint.fix": "npm run lint.ts.fix && npm run lint.sass.fix && npm run prettier -- --write",
     "lint.sass": "stylelint \"src/**/*.scss\"",
     "lint.sass.fix": "npm run lint.sass -- --fix",
     "lint.ts": "npm run eslint",
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts b/core/src/components/alert/test/a11y/alert.e2e.ts
index 692a669073..218e67d2bb 100644
--- a/core/src/components/alert/test/a11y/alert.e2e.ts
+++ b/core/src/components/alert/test/a11y/alert.e2e.ts
@@ -35,9 +35,12 @@ test.describe('alert: a11y', () => {
   });
 
   test('should not have accessibility violations when header and message are defined', async ({ page }) => {
+    const didPresent = await page.spyOnEvent('ionAlertDidPresent');
     const button = page.locator('#bothHeaders');
     await button.click();
 
+    await didPresent.next();
+
     const results = await new AxeBuilder({ page }).analyze();
     expect(results.violations).toEqual([]);
   });
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index 57b5dd16e0..205620199b 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -592,7 +592,7 @@ export class Datetime implements ComponentInterface {
    * "activePartsClone" and then falling back to
    * today's DatetimeParts if no active date is selected.
    */
-  private getDefaultPart = () => {
+  private getDefaultPart = (): DatetimeParts => {
     const { activePartsClone, todayParts } = this;
 
     const firstPart = Array.isArray(activePartsClone) ? activePartsClone[0] : activePartsClone;
@@ -1422,7 +1422,9 @@ export class Datetime implements ComponentInterface {
   }
 
   private renderCombinedDatePickerColumn() {
-    const { activeParts, workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
+    const { workingParts, locale, minParts, maxParts, todayParts, isDateEnabled } = this;
+
+    const activePart = this.getDefaultPart();
 
     /**
      * By default, generate a range of 3 months:
@@ -1518,12 +1520,10 @@ export class Datetime implements ComponentInterface {
             ...findPart,
           });
 
-          if (!Array.isArray(activeParts)) {
-            this.setActiveParts({
-              ...activeParts,
-              ...findPart,
-            });
-          }
+          this.setActiveParts({
+            ...activePart,
+            ...findPart,
+          });
 
           // We can re-attach the scroll listener after
           // the working parts have been updated.
@@ -1612,7 +1612,9 @@ export class Datetime implements ComponentInterface {
       return [];
     }
 
-    const { activeParts, workingParts } = this;
+    const { workingParts } = this;
+
+    const activePart = this.getDefaultPart();
 
     return (
       <ion-picker-column-internal
@@ -1634,12 +1636,10 @@ export class Datetime implements ComponentInterface {
             day: ev.detail.value,
           });
 
-          if (!Array.isArray(activeParts)) {
-            this.setActiveParts({
-              ...activeParts,
-              day: ev.detail.value,
-            });
-          }
+          this.setActiveParts({
+            ...activePart,
+            day: ev.detail.value,
+          });
 
           // We can re-attach the scroll listener after
           // the working parts have been updated.
@@ -1656,7 +1656,9 @@ export class Datetime implements ComponentInterface {
       return [];
     }
 
-    const { activeParts, workingParts } = this;
+    const { workingParts } = this;
+
+    const activePart = this.getDefaultPart();
 
     return (
       <ion-picker-column-internal
@@ -1678,12 +1680,10 @@ export class Datetime implements ComponentInterface {
             month: ev.detail.value,
           });
 
-          if (!Array.isArray(activeParts)) {
-            this.setActiveParts({
-              ...activeParts,
-              month: ev.detail.value,
-            });
-          }
+          this.setActiveParts({
+            ...activePart,
+            month: ev.detail.value,
+          });
 
           // We can re-attach the scroll listener after
           // the working parts have been updated.
@@ -1699,7 +1699,9 @@ export class Datetime implements ComponentInterface {
       return [];
     }
 
-    const { activeParts, workingParts } = this;
+    const { workingParts } = this;
+
+    const activePart = this.getDefaultPart();
 
     return (
       <ion-picker-column-internal
@@ -1721,12 +1723,10 @@ export class Datetime implements ComponentInterface {
             year: ev.detail.value,
           });
 
-          if (!Array.isArray(activeParts)) {
-            this.setActiveParts({
-              ...activeParts,
-              year: ev.detail.value,
-            });
-          }
+          this.setActiveParts({
+            ...activePart,
+            year: ev.detail.value,
+          });
 
           // We can re-attach the scroll listener after
           // the working parts have been updated.
@@ -1779,12 +1779,10 @@ export class Datetime implements ComponentInterface {
             hour: ev.detail.value,
           });
 
-          if (!Array.isArray(activePart)) {
-            this.setActiveParts({
-              ...activePart,
-              hour: ev.detail.value,
-            });
-          }
+          this.setActiveParts({
+            ...activePart,
+            hour: ev.detail.value,
+          });
 
           ev.stopPropagation();
         }}
@@ -1809,12 +1807,10 @@ export class Datetime implements ComponentInterface {
             minute: ev.detail.value,
           });
 
-          if (!Array.isArray(activePart)) {
-            this.setActiveParts({
-              ...activePart,
-              minute: ev.detail.value,
-            });
-          }
+          this.setActiveParts({
+            ...activePart,
+            minute: ev.detail.value,
+          });
 
           ev.stopPropagation();
         }}
@@ -1845,13 +1841,11 @@ export class Datetime implements ComponentInterface {
             hour,
           });
 
-          if (!Array.isArray(activePart)) {
-            this.setActiveParts({
-              ...activePart,
-              ampm: ev.detail.value,
-              hour,
-            });
-          }
+          this.setActiveParts({
+            ...activePart,
+            ampm: ev.detail.value,
+            hour,
+          });
 
           ev.stopPropagation();
         }}
@@ -1943,6 +1937,8 @@ export class Datetime implements ComponentInterface {
     // can free-scroll the calendar.
     const isWorkingMonth = this.workingParts.month === month && this.workingParts.year === year;
 
+    const activePart = this.getDefaultPart();
+
     return (
       <div
         // Non-visible months should be hidden from screen readers
@@ -2027,7 +2023,7 @@ export class Datetime implements ComponentInterface {
                     );
                   } else {
                     this.setActiveParts({
-                      ...this.activeParts,
+                      ...activePart,
                       month,
                       day,
                       year,
@@ -2141,11 +2137,11 @@ export class Datetime implements ComponentInterface {
       return;
     }
 
-    const { activeParts, titleSelectedDatesFormatter } = this;
+    const { activeParts, multiple, titleSelectedDatesFormatter } = this;
     const isArray = Array.isArray(activeParts);
 
     let headerText: string;
-    if (isArray && activeParts.length !== 1) {
+    if (multiple && isArray && activeParts.length !== 1) {
       headerText = `${activeParts.length} days`; // default/fallback for multiple selection
       if (titleSelectedDatesFormatter !== undefined) {
         try {
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts
index bf019fd324..3d01593a56 100644
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts
@@ -72,6 +72,39 @@ test.describe('datetime: selecting a day', () => {
 
     await expect(activeDay).toHaveText('13');
   });
+  test('should set both date and time when no value is initially set', async ({ page }) => {
+    await page.setContent(`
+      <ion-datetime locale="en-US" presentation="date-time"></ion-datetime>
+
+      <script>
+        const mockToday = '2022-10-10T16:22';
+        Date = class extends Date {
+          constructor(...args) {
+            if (args.length === 0) {
+              super(mockToday)
+            } else {
+              super(...args);
+            }
+          }
+        }
+      </script>
+    `);
+
+    await page.waitForSelector('.datetime-ready');
+    const datetime = page.locator('ion-datetime');
+    const ionChange = await page.spyOnEvent('ionChange');
+
+    // Oct 1, 2022
+    await page.click('.calendar-day[data-month="10"][data-year="2022"][data-day="1"]');
+
+    await ionChange.next();
+
+    const value = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value);
+    await expect(typeof value).toBe('string');
+
+    // Check to make sure value includes current time
+    await expect(value!.includes('2022-10-01T16:22')).toBe(true);
+  });
 });
 
 test.describe('datetime: confirm date', () => {
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts b/core/src/components/datetime/test/multiple/datetime.e2e.ts
index 701ec09aee..cef0a48b6b 100644
--- a/core/src/components/datetime/test/multiple/datetime.e2e.ts
+++ b/core/src/components/datetime/test/multiple/datetime.e2e.ts
@@ -184,4 +184,28 @@ test.describe('datetime: multiple date selection (functionality)', () => {
     await juneButtons.nth(0).click();
     await expect(header).toHaveText('Selected: 0');
   });
+
+  test('header text should render default date when multiple="false"', async ({ page }) => {
+    await page.setContent(`
+      <ion-datetime locale="en-US" show-default-title="true"></ion-datetime>
+
+      <script>
+        const mockToday = '2022-10-10T16:22';
+        Date = class extends Date {
+          constructor(...args) {
+            if (args.length === 0) {
+              super(mockToday)
+            } else {
+              super(...args);
+            }
+          }
+        }
+      </script>
+    `);
+    await page.waitForSelector(`.datetime-ready`);
+    const datetime = page.locator('ion-datetime');
+    const header = datetime.locator('.datetime-selected-date');
+
+    await expect(header).toHaveText('Mon, Oct 10');
+  });
 });
diff --git a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts
index a3c8aacf74..e39f139dc3 100644
--- a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts
+++ b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts
@@ -112,6 +112,64 @@ test.describe('datetime: prefer wheel', () => {
       expect(await yearValues.count()).toBe(3);
       expect(await dayValues.count()).toBe(5);
     });
+    test('selecting month should update value when no value is set', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime
+          presentation="date"
+          prefer-wheel="true"
+        ></ion-datetime>
+      `);
+
+      await page.waitForSelector('.datetime-ready');
+
+      const ionChange = await page.spyOnEvent('ionChange');
+      const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
+
+      // Change month value
+      await monthValues.nth(0).click();
+
+      await ionChange.next();
+    });
+    test('selecting day should update value when no value is set', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime
+          presentation="date"
+          prefer-wheel="true"
+        ></ion-datetime>
+      `);
+
+      await page.waitForSelector('.datetime-ready');
+
+      const ionChange = await page.spyOnEvent('ionChange');
+      const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
+
+      // Change day value
+      await dayValues.nth(0).click();
+
+      await ionChange.next();
+    });
+    test('selecting year should update value when no value is set', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime
+          presentation="date"
+          prefer-wheel="true"
+        ></ion-datetime>
+      `);
+
+      await page.waitForSelector('.datetime-ready');
+
+      const ionChange = await page.spyOnEvent('ionChange');
+      const yearValues = page.locator('.year-column .picker-item:not(.picker-item-empty)');
+
+      /**
+       * Change year value
+       * The 0th index is the current
+       * year, so select something other than that.
+       */
+      await yearValues.nth(10).click();
+
+      await ionChange.next();
+    });
     test.describe('datetime: date wheel localization', () => {
       test('should correctly localize the date data', async ({ page }) => {
         await page.setContent(`
@@ -314,6 +372,24 @@ test.describe('datetime: prefer wheel', () => {
 
       expect(await dayValues.count()).toBe(15);
     });
+    test('selecting date should update value when no value is set', async ({ page }) => {
+      await page.setContent(`
+        <ion-datetime
+          presentation="date-time"
+          prefer-wheel="true"
+        ></ion-datetime>
+      `);
+
+      await page.waitForSelector('.datetime-ready');
+
+      const ionChange = await page.spyOnEvent('ionChange');
+      const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
+
+      // Change day/month value
+      await dayValues.nth(0).click();
+
+      await ionChange.next();
+    });
   });
   test.describe('datetime: time-date wheel', () => {
     test.beforeEach(({ skip }) => {
diff --git a/core/src/components/item-sliding/test/basic/e2e.ts b/core/src/components/item-sliding/test/basic/e2e.ts
deleted file mode 100644
index 225d0a543f..0000000000
--- a/core/src/components/item-sliding/test/basic/e2e.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-test('item-sliding: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/item-sliding/test/basic?ionic:_testing=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
-
-test('item-sliding:rtl: basic', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/item-sliding/test/basic?ionic:_testing=true&rtl=true',
-  });
-
-  const compare = await page.compareScreenshot();
-  expect(compare).toMatchScreenshot();
-});
diff --git a/core/src/components/item-sliding/test/basic/index.html b/core/src/components/item-sliding/test/basic/index.html
index a9bed0e0bd..87f649f922 100644
--- a/core/src/components/item-sliding/test/basic/index.html
+++ b/core/src/components/item-sliding/test/basic/index.html
@@ -19,33 +19,17 @@
       <ion-header>
         <ion-toolbar>
           <ion-title>Item Sliding - Basic</ion-title>
-          <ion-buttons slot="secondary">
-            <ion-button onclick="changeDynamicText()">Dynamic</ion-button>
-          </ion-buttons>
-          <ion-buttons slot="primary">
-            <ion-button onclick="reload()">Reload</ion-button>
-          </ion-buttons>
         </ion-toolbar>
       </ion-header>
 
       <ion-content>
-        <ion-refresher id="refresher">
-          <ion-refresher-content
-            pulling-text="Pull to refresh..."
-            refreshing-spinner="bubbles"
-            refreshing-text="Refreshing..."
-          >
-          </ion-refresher-content>
-        </ion-refresher>
-
         <div class="ion-padding">
-          <ion-button expand="block" onclick="toggleSliding()">Toggle sliding</ion-button>
-          <ion-button expand="block" onclick="toggleDynamicOptions()">Toggle Dynamic Options</ion-button>
           <ion-button expand="block" onclick="closeOpened()">Close Opened Items</ion-button>
-          <ion-button expand="block" onclick="openItem('start')">Open Item Start</ion-button>
-          <ion-button expand="block" onclick="openItem('end')">Open Item End</ion-button>
-          <ion-button expand="block" onclick="openItemOneSide()">Open Item with only one side</ion-button>
-          <ion-button expand="block" onclick="setDynaicItem()">Swap dynamic item</ion-button>
+          <ion-button expand="block" id="openItemStart" onclick="openItem('start')">Open Item Start</ion-button>
+          <ion-button expand="block" id="openItemEnd" onclick="openItem('end')">Open Item End</ion-button>
+          <ion-button expand="block" id="openItemOneSide" onclick="openItemOneSide()"
+            >Open Item with only one side</ion-button
+          >
         </div>
 
         <ion-list id="list">
@@ -59,66 +43,6 @@
               </ion-item>
             </ion-item-sliding>
 
-            <ion-item-sliding id="item6">
-              <ion-item>
-                <ion-label> One Line, dynamic option and text </ion-label>
-              </ion-item>
-              <ion-item-options class="show-options">
-                <ion-item-option color="primary">
-                  <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-                  <span class="more-text"></span>
-                </ion-item-option>
-                <ion-item-option color="secondary" onclick="archive('item6')">
-                  <ion-icon slot="start" name="archive"></ion-icon>
-                  <span class="archive-text"></span>
-                </ion-item-option>
-              </ion-item-options>
-            </ion-item-sliding>
-
-            <ion-item-sliding id="two-options">
-              <ion-item>
-                <ion-label> Two options, one dynamic option and text </ion-label>
-              </ion-item>
-              <ion-item-options side="start">
-                <ion-item-option color="primary">
-                  <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-                </ion-item-option>
-              </ion-item-options>
-              <ion-item-options side="end" class="show-options">
-                <ion-item-option color="primary">
-                  <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-                  <span class="more-text"></span>
-                </ion-item-option>
-                <ion-item-option color="secondary" onclick="archive('two-options')">
-                  <ion-icon slot="start" name="archive"></ion-icon>
-                  <span class="archive-text"></span>
-                </ion-item-option>
-              </ion-item-options>
-            </ion-item-sliding>
-
-            <ion-item-sliding id="item100">
-              <ion-item href="#">
-                <ion-label>
-                  <h2>HubStruck Notifications</h2>
-                  <p>A new message from a repo in your network</p>
-                  <p>Oceanic Next has joined your network</p>
-                </ion-label>
-                <ion-note slot="end"> 10:45 AM </ion-note>
-              </ion-item>
-
-              <ion-item-options side="start">
-                <ion-item-option onclick="noclose('item100')"> No close </ion-item-option>
-              </ion-item-options>
-              <ion-item-options side="end">
-                <ion-item-option color="danger" onclick="unread('item100')">
-                  <ion-icon slot="icon-only" name="trash"></ion-icon>
-                </ion-item-option>
-                <ion-item-option onclick="unread('item100')">
-                  <ion-icon slot="icon-only" name="star"></ion-icon>
-                </ion-item-option>
-              </ion-item-options>
-            </ion-item-sliding>
-
             <ion-item-sliding id="item100">
               <ion-item href="#">
                 <ion-label>
@@ -141,15 +65,15 @@
             </ion-item-sliding>
 
             <ion-item-sliding id="item0">
-              <ion-item onclick="clickedItem('item0')">
+              <ion-item>
                 <ion-label class="ion-text-wrap">
                   <h2>RIGHT side - no icons</h2>
                   <p>Hey do you want to go to the game tonight?</p>
                 </ion-label>
               </ion-item>
               <ion-item-options class="sliding-enabled">
-                <ion-item-option color="primary" onclick="archive('item0')">Archive</ion-item-option>
-                <ion-item-option color="danger" onclick="del('item0')">Delete</ion-item-option>
+                <ion-item-option color="primary">Archive</ion-item-option>
+                <ion-item-option color="danger">Delete</ion-item-option>
               </ion-item-options>
             </ion-item-sliding>
 
@@ -161,8 +85,8 @@
                 </ion-label>
               </ion-item>
               <ion-item-options side="start" class="sliding-enabled">
-                <ion-item-option color="primary" onclick="archive('item1')">Archive</ion-item-option>
-                <ion-item-option color="danger" onclick="del('item1')">Delete</ion-item-option>
+                <ion-item-option color="primary">Archive</ion-item-option>
+                <ion-item-option color="danger">Delete</ion-item-option>
               </ion-item-options>
             </ion-item-sliding>
 
@@ -174,138 +98,24 @@
                 </ion-label>
               </ion-item>
               <ion-item-options side="start" class="sliding-enabled">
-                <ion-item-option color="secondary" expandable onclick="unread('item2')">
+                <ion-item-option color="secondary" expandable>
                   <ion-icon slot="start" name="checkmark"></ion-icon>
                   Unread
                 </ion-item-option>
               </ion-item-options>
 
               <ion-item-options side="end" class="sliding-enabled">
-                <ion-item-option color="primary" onclick="archive('item2')">
-                  <ion-icon slot="start" name="mail"></ion-icon>
-                  Archive
-                </ion-item-option>
-                <ion-item-option color="danger" onclick="del('item2')" expandable>
-                  <ion-icon slot="start" name="trash"></ion-icon>
-                  Delete
-                </ion-item-option>
-              </ion-item-options>
-            </ion-item-sliding>
-
-            <ion-item-sliding id="item3">
-              <ion-item detail>
-                <ion-label class="ion-text-wrap">
-                  <h2>RIGHT/LEFT side - icons (slot="start")</h2>
-                  <p>I think I figured out how to get more Mountain Dew</p>
-                </ion-label>
-              </ion-item>
-              <ion-item-options side="start" icon-start class="sliding-enabled">
-                <ion-item-option color="secondary" expandable onclick="unread('item3')">
-                  <ion-icon slot="start" name="checkmark"></ion-icon>
-                  Unread
-                </ion-item-option>
-              </ion-item-options>
-
-              <ion-item-options icon-start>
-                <ion-item-option color="primary" onclick="archive('item3')">
-                  <ion-icon slot="start" name="mail"></ion-icon>
-                  Archive
-                </ion-item-option>
-                <ion-item-option color="danger" onclick="del('item3')" expandable class="sliding-enabled">
-                  <ion-icon slot="start" name="trash"></ion-icon>
-                  Delete
-                </ion-item-option>
-              </ion-item-options>
-            </ion-item-sliding>
-
-            <ion-item-sliding id="item4">
-              <ion-item>
-                <ion-icon name="mail" slot="start"></ion-icon>
-                <ion-label> One Line w/ Icon, div only text </ion-label>
-              </ion-item>
-              <ion-item-options icon-start>
-                <ion-item-option color="primary" onclick="archive('item4')" expandable class="sliding-enabled">
-                  <ion-icon slot="start" name="archive"></ion-icon>
-                  Archive
-                </ion-item-option>
-              </ion-item-options>
-            </ion-item-sliding>
-
-            <ion-item-sliding id="item5" class="sliding-enabled">
-              <ion-item>
-                <ion-avatar slot="start">
-                  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
-                </ion-avatar>
-                <ion-label> One Line w/ Avatar, div only text </ion-label>
-              </ion-item>
-              <ion-item-options>
-                <ion-item-option color="primary" expandable>
-                  <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-                  More
-                </ion-item-option>
-                <ion-item-option color="secondary" onclick="archive('item5')">
-                  <ion-icon slot="start" name="archive"></ion-icon>
-                  Archive
-                </ion-item-option>
-                <ion-item-option color="light" onclick="del('item5')">
-                  <ion-icon slot="start" name="trash"></ion-icon>
-                  Delete
-                </ion-item-option>
-              </ion-item-options>
-            </ion-item-sliding>
-
-            <ion-item-sliding id="item7">
-              <ion-item>
-                <ion-label> One Line, dynamic icon-start option </ion-label>
-              </ion-item>
-              <ion-item-options icon-start>
                 <ion-item-option color="primary">
-                  <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-                  <span class="more-text"></span>
+                  <ion-icon slot="start" name="mail"></ion-icon>
+                  Archive
                 </ion-item-option>
-                <ion-item-option color="secondary" onclick="archive('item7')">
-                  <ion-icon slot="start" name="archive"></ion-icon>
-                  <span class="archive-text"></span>
+                <ion-item-option color="danger" expandable>
+                  <ion-icon slot="start" name="trash"></ion-icon>
+                  Delete
                 </ion-item-option>
               </ion-item-options>
             </ion-item-sliding>
 
-            <ion-item-sliding id="item8">
-              <ion-item>
-                <ion-thumbnail slot="start">
-                  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
-                </ion-thumbnail>
-                <ion-label>
-                  <h2>DOWNLOAD</h2>
-                  <p>Paragraph text.</p>
-                </ion-label>
-              </ion-item>
-              <ion-item-options>
-                <ion-item-option color="primary" onclick="archive('item8')">
-                  <ion-icon name="archive"></ion-icon>Archive
-                </ion-item-option>
-                <ion-item-option color="secondary" expandable onclick="download('item8')">
-                  <ion-icon slot="start" name="download" class="download-hide"></ion-icon>
-                  <div class="download-hide">Download</div>
-
-                  <ion-icon slot="start" class="download-spinner" name="refresh"></ion-icon>
-                  <div class="download-spinner">Loading...</div>
-                </ion-item-option>
-              </ion-item-options>
-            </ion-item-sliding>
-
-            <ion-item-sliding id="item9">
-              <ion-item>
-                <ion-thumbnail slot="start">
-                  <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
-                </ion-thumbnail>
-                <ion-label>
-                  <h2>ion-item-sliding without options (no sliding)</h2>
-                  <p>Paragraph text.</p>
-                </ion-label>
-              </ion-item>
-            </ion-item-sliding>
-
             <ion-item-sliding id="item10">
               <ion-item detail>
                 <ion-label class="ion-text-wrap">
@@ -351,81 +161,10 @@
                 </ion-item-option>
               </ion-item-options>
             </ion-item-sliding>
-
-            <ion-item-sliding id="dynamic-item">
-              <ion-item>
-                <ion-label>Dynamic First Item</ion-label>
-              </ion-item>
-              <ion-item-options side="end">
-                <ion-item-option color="tertiary" expandable> First Item Options </ion-item-option>
-              </ion-item-options>
-            </ion-item-sliding>
-
-            <ion-item>
-              <ion-label class="ion-text-wrap">
-                <h2>Normal ion-item (no sliding)</h2>
-                <p>Paragraph text.</p>
-              </ion-label>
-            </ion-item>
-
-            <ion-item onclick="clickedItem('item9')">
-              <ion-label class="ion-text-wrap">
-                <h2>Normal button (no sliding)</h2>
-                <p>Hey do you want to go to the game tonight?</p>
-              </ion-label>
-            </ion-item>
           </div>
         </ion-list>
 
         <script>
-          const setDynaicItem = () => {
-            const sliding = document.querySelector('#dynamic-item');
-            sliding.innerHTML = `
-            <ion-item>
-              <ion-label>Dynamic Second Item</ion-label>
-            </ion-item>
-            <ion-item-options side="end">
-              <ion-item-option color="tertiary" expandable>
-                Second Item Options
-              </ion-item-option>
-            </ion-item-options>
-          `;
-          };
-
-          var dynamicSlidingEnabled = document.getElementsByClassName('sliding-enabled');
-
-          // Toggle the dynamic options
-          var dynamicShowOptions = document.getElementsByClassName('show-options');
-          toggleDynamicOptions();
-
-          function toggleDynamicOptions() {
-            // TODO the element needs to be removed / added to the DOM
-          }
-
-          // Change the text for the more and archive buttons
-          var dynamicText = true;
-          var moreTextSpans = document.getElementsByClassName('more-text');
-          var archiveTextSpans = document.getElementsByClassName('archive-text');
-          changeDynamicText();
-
-          function changeDynamicText() {
-            dynamicText = !dynamicText;
-
-            for (var i = 0; i < moreTextSpans.length; i++) {
-              var moreText = dynamicText ? 'Changed More' : 'Dynamic More';
-              moreTextSpans[i].innerHTML = moreText;
-            }
-
-            for (var i = 0; i < archiveTextSpans.length; i++) {
-              var archiveText = dynamicText ? 'Changed Archive' : 'Dynamic Archive';
-              archiveTextSpans[i].innerHTML = archiveText;
-            }
-          }
-
-          function toggleSliding() {
-            // this.slidingEnabled = !this.slidingEnabled;
-          }
-
           function closeOpened() {
             var list = document.getElementById('list');
             list.closeSlidingItems();
@@ -441,89 +180,14 @@
             item.open();
           }
 
-          function noclose(item) {
-            var itemEle = document.getElementById(item);
-            console.log('no close', itemEle);
-          }
-
-          function unread(item) {
-            closeSlidingItem('UNREAD', item);
-          }
-
-          function archive(item) {
-            closeSlidingItem('ARCHIVE', item);
-          }
-
-          function del(item) {
-            closeSlidingItem('DELETE', item);
-          }
-
-          function download(item) {
-            var itemEle = document.getElementById(item);
-            console.log(itemEle);
-            itemEle.classList.add('downloading');
-            setTimeout(() => {
-              alert('Item was downloaded!');
-
-              itemEle.classList.remove('downloading');
-              itemEle.close();
-            }, 1500);
-          }
-
           function closeSlidingItem(option, item) {
             var itemEle = document.getElementById(item);
 
-            // TODO open alert instead
             if (itemEle) {
               itemEle.close();
             }
-            console.log(option, itemEle);
           }
-
-          function clickedItem(item) {
-            var itemEle = document.getElementById(item);
-            console.log('Clicked, ion-item', itemEle);
-          }
-
-          function reload() {
-            window.location.reload();
-          }
-          document.addEventListener('ionSwipe', (ev) => console.log('SWIPE!!', ev.detail));
-          document.addEventListener('ionDrag', (ev) => {
-            // console.log('DRAG!!', ev.detail);
-
-            let slidingRatio = ev.target.getSlidingRatio();
-            console.log('sliding', slidingRatio);
-
-            if (slidingRatio > 0) {
-              // positive
-              console.log('right side');
-            } else {
-              // negative
-              console.log('left side');
-            }
-            if (Math.abs(slidingRatio) > 1) {
-              console.log('overscroll');
-            }
-          });
         </script>
-        <style>
-          .download-spinner {
-            display: none;
-          }
-
-          svg circle {
-            stroke: white;
-          }
-
-          .downloading .download-spinner {
-            display: block;
-          }
-
-          .downloading .download-hide {
-            display: none;
-          }
-        </style>
       </ion-content>
     </ion-app>
   </body>
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts
index 3f8baae470..a3068258e2 100644
--- a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts
+++ b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts
@@ -1,14 +1,51 @@
 import { expect } from '@playwright/test';
-import { test } from '@utils/test/playwright';
+import { dragElementBy, test } from '@utils/test/playwright';
+
+import { testSlidingItem } from '../test.utils';
 
 test.describe('item-sliding: basic', () => {
+  test.beforeEach(async ({ skip }) => {
+    skip.mode('ios', "item-sliding doesn't have mode-specific styling");
+  });
+
+  test('should not have visual regressions', async ({ page, browserName }, testInfo) => {
+    // TODO(FW-2608)
+    test.fixme(
+      testInfo.project.metadata.rtl === true && (browserName === 'firefox' || browserName === 'webkit'),
+      'https://github.com/ionic-team/ionic-framework/issues/26103'
+    );
+
+    await page.goto(`/src/components/item-sliding/test/basic`);
+    const item = page.locator('#item2');
+
+    await testSlidingItem(page, item, 'start', true);
+    await testSlidingItem(page, item, 'end');
+  });
+
+  test('should open when swiped', async ({ page, skip }) => {
+    skip.rtl();
+    skip.browser(
+      (browserName: string) => browserName !== 'chromium',
+      'dragElementBy is flaky outside of Chrome browsers.'
+    );
+
+    await page.goto(`/src/components/item-sliding/test/basic`);
+    const item = page.locator('#item2');
+
+    await dragElementBy(item, page, -150);
+    await page.waitForChanges();
+
+    // item-sliding doesn't have an easy way to tell whether it's fully open so just screenshot it
+    expect(await item.screenshot()).toMatchSnapshot(`item-sliding-gesture-${page.getSnapshotSettings()}.png`);
+  });
+
   test('should not scroll when the item-sliding is swiped', async ({ page, skip }) => {
     skip.browser('webkit', 'mouse.wheel is not available in WebKit');
     skip.rtl();
 
     await page.goto(`/src/components/item-sliding/test/basic`);
 
-    const itemSlidingEl = page.locator('#two-options');
+    const itemSlidingEl = page.locator('#item2');
     const scrollEl = page.locator('ion-content .inner-scroll');
 
     expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0);
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1b65f9a2a4
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..4162a5627e
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..b87ceb126c
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ce9bf3d800
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..df23ec0993
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..a8caafbec8
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..cef7088eb2
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..93583899f1
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-end-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-gesture-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-gesture-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..4e547fce98
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-gesture-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..dd43c966a4
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..afb6e15909
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..e0d81a76dd
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..574aa4b292
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..494b9a5b8e
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..67bd340257
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..516f195f0e
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..abbc9a3438
Binary files /dev/null and b/core/src/components/item-sliding/test/basic/item-sliding.e2e.ts-snapshots/item-sliding-start-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/index.html b/core/src/components/item-sliding/test/icons/index.html
new file mode 100644
index 0000000000..853fccf379
--- /dev/null
+++ b/core/src/components/item-sliding/test/icons/index.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Item Sliding - Icons</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Item Sliding - Icons</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content>
+        <ion-list>
+          <ion-item-sliding id="iconsOnly">
+            <ion-item>
+              <ion-label>Icons Only</ion-label>
+            </ion-item>
+            <ion-item-options>
+              <ion-item-option color="danger">
+                <ion-icon slot="icon-only" name="trash"></ion-icon>
+              </ion-item-option>
+              <ion-item-option>
+                <ion-icon slot="icon-only" name="star"></ion-icon>
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
+          <ion-item-sliding id="iconsStart">
+            <ion-item>
+              <ion-label>Icons in Start Slot</ion-label>
+            </ion-item>
+            <ion-item-options>
+              <ion-item-option color="primary">
+                <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+                More
+              </ion-item-option>
+              <ion-item-option color="secondary">
+                <ion-icon slot="start" name="archive"></ion-icon>
+                Archive
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
+          <ion-item-sliding id="iconsEnd">
+            <ion-item>
+              <ion-label>Icons in End Slot</ion-label>
+            </ion-item>
+            <ion-item-options>
+              <ion-item-option color="primary">
+                <ion-icon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+                More
+              </ion-item-option>
+              <ion-item-option color="secondary">
+                <ion-icon slot="end" name="archive"></ion-icon>
+                Archive
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
+          <ion-item-sliding id="iconsTop">
+            <ion-item>
+              <ion-label>Icons in Top Slot</ion-label>
+            </ion-item>
+            <ion-item-options>
+              <ion-item-option color="primary">
+                <ion-icon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+                More
+              </ion-item-option>
+              <ion-item-option color="secondary">
+                <ion-icon slot="top" name="archive"></ion-icon>
+                Archive
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+
+          <ion-item-sliding id="iconsBottom">
+            <ion-item>
+              <ion-label>Icons in Bottom Slot</ion-label>
+            </ion-item>
+            <ion-item-options>
+              <ion-item-option color="primary">
+                <ion-icon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+                More
+              </ion-item-option>
+              <ion-item-option color="secondary">
+                <ion-icon slot="bottom" name="archive"></ion-icon>
+                Archive
+              </ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+        </ion-list>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts
new file mode 100644
index 0000000000..403bdf2918
--- /dev/null
+++ b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts
@@ -0,0 +1,21 @@
+import { test } from '@utils/test/playwright';
+
+import { testSlidingItem } from '../test.utils';
+
+test.describe('item-sliding: icons', () => {
+  test('should not have visual regressions', async ({ page, browserName, skip }, testInfo) => {
+    // TODO(FW-2608)
+    test.fixme(
+      testInfo.project.metadata.rtl === true && (browserName === 'firefox' || browserName === 'webkit'),
+      'https://github.com/ionic-team/ionic-framework/issues/26103'
+    );
+
+    skip.mode('ios', "item-sliding doesn't have mode-specific styling");
+    await page.goto(`/src/components/item-sliding/test/icons`);
+
+    const itemIDs = ['iconsOnly', 'iconsStart', 'iconsEnd', 'iconsTop', 'iconsBottom'];
+    for (const itemID of itemIDs) {
+      await testSlidingItem(page, page.locator(`#${itemID}`), itemID);
+    }
+  });
+});
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsBottom-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsBottom-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..af9ef726c1
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsBottom-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsBottom-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsBottom-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..c61e5fd68a
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsBottom-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsBottom-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsBottom-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..29f4ccda99
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsBottom-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsBottom-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsBottom-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..1b4cdbae24
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsBottom-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsEnd-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsEnd-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..e923fa7d36
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsEnd-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsEnd-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsEnd-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..0a51f3f20b
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsEnd-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsEnd-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsEnd-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..8c70848f77
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsEnd-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsEnd-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsEnd-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..ca023833d3
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsEnd-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsOnly-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsOnly-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..000654205c
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsOnly-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsOnly-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsOnly-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..991ab7a0c8
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsOnly-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsOnly-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsOnly-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..8e22b58c2e
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsOnly-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsOnly-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsOnly-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..79b8cb4791
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsOnly-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsStart-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsStart-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..589c84d070
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsStart-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsStart-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsStart-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..226ae24ef0
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsStart-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsStart-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsStart-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..cea7726dc1
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsStart-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsStart-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsStart-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..a8b27b8e0a
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsStart-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsTop-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsTop-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..2fcd0f47c6
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsTop-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsTop-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsTop-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000..11285a2798
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsTop-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsTop-md-ltr-Mobile-Safari-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsTop-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000..3f0837f289
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsTop-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsTop-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsTop-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000..38b13fa837
Binary files /dev/null and b/core/src/components/item-sliding/test/icons/item-sliding.e2e.ts-snapshots/item-sliding-iconsTop-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/interactive/e2e.ts b/core/src/components/item-sliding/test/interactive/e2e.ts
deleted file mode 100644
index 4f669370d1..0000000000
--- a/core/src/components/item-sliding/test/interactive/e2e.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-import { openItemSliding } from '../test.utils';
-
-test('item-sliding: interactive', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/item-sliding/test/interactive?ionic:_testing=true',
-  });
-
-  const compares = [];
-  compares.push(await page.compareScreenshot());
-
-  const items = await page.$$('ion-item-sliding');
-  expect(items.length).toEqual(3);
-
-  await slideAndDelete(items[0], page);
-
-  const itemsAfterFirstSlide = await page.$$('ion-item-sliding');
-  expect(itemsAfterFirstSlide.length).toEqual(2);
-
-  await slideAndDelete(items[1], page);
-
-  const itemsAfterSecondSlide = await page.$$('ion-item-sliding');
-  expect(itemsAfterSecondSlide.length).toEqual(1);
-
-  for (const compare of compares) {
-    expect(compare).toMatchScreenshot();
-  }
-});
-
-const slideAndDelete = async (item: any, page: any) => {
-  try {
-    // Get the element's ID
-    const id = await (await item.getProperty('id')).jsonValue();
-    await openItemSliding(`#${id}`, page);
-    await deleteItemSliding(item, page, id);
-  } catch (err) {
-    throw err;
-  }
-};
-
-const deleteItemSliding = async (item: any, page: any, id: string) => {
-  // Click the "delete" option
-  const options = await item.$$('ion-item-option');
-  await options[0].click();
-
-  // Wait for element to be removed from DOM
-  await page.waitForSelector(id, { hidden: true });
-
-  await page.waitForTimeout(1000);
-};
diff --git a/core/src/components/item-sliding/test/interactive/index.html b/core/src/components/item-sliding/test/interactive/index.html
deleted file mode 100644
index e453f4f8bf..0000000000
--- a/core/src/components/item-sliding/test/interactive/index.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Item Sliding - Standalone</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/core.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body>
-    <ion-list></ion-list>
-
-    <script>
-      let lists = document.getElementsByTagName('ion-list');
-      for (var i = 0; i < lists.length; i++) {
-        for (var j = 0; j < 3; j++) {
-          addSlidingItem(lists[i]);
-        }
-      }
-
-      function addSlidingItem(list) {
-        const slidingItem = document.createElement('ion-item-sliding');
-        slidingItem.innerHTML = `
-          <ion-item>
-            <ion-label>
-              <h2>Item Options Both Sides</h2>
-            </ion-label>
-          </ion-item>
-
-          <ion-item-options side="end">
-            <ion-item-option color="danger" expandable onclick="remove(this)">
-              <ion-icon name="trash"></ion-icon>
-              Delete
-            </ion-item-option>
-          </ion-item-options>
-        `;
-
-        slidingItem.id = `item-${list.childElementCount}`;
-
-        list.appendChild(slidingItem);
-      }
-
-      function remove(optionElement) {
-        const slidingElement = optionElement.parentNode.parentNode;
-        lists[0].removeChild(slidingElement);
-      }
-    </script>
-  </body>
-</html>
diff --git a/core/src/components/item-sliding/test/standalone/e2e.ts b/core/src/components/item-sliding/test/standalone/e2e.ts
deleted file mode 100644
index bc577ad521..0000000000
--- a/core/src/components/item-sliding/test/standalone/e2e.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { newE2EPage } from '@stencil/core/testing';
-
-import { closeItemSliding, openItemSliding } from '../test.utils';
-
-test('item-sliding: standalone', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/item-sliding/test/standalone?ionic:_testing=true',
-  });
-
-  const compares = [];
-  compares.push(await page.compareScreenshot());
-
-  // Pass sliding item with start icons in option
-  await openItemSliding('#startItem', page);
-  compares.push(await page.compareScreenshot(`start icons open`));
-  await closeItemSliding(page);
-
-  // Pass sliding item with top icons in option
-  await openItemSliding('#topItem', page);
-  compares.push(await page.compareScreenshot(`top icons open`));
-  await closeItemSliding(page);
-
-  // Pass sliding item with anchor option
-  await openItemSliding('#anchorItem', page);
-  compares.push(await page.compareScreenshot(`anchor option`));
-  await closeItemSliding(page);
-
-  for (const compare of compares) {
-    expect(compare).toMatchScreenshot();
-  }
-});
-
-test('item-sliding:rtl: standalone', async () => {
-  const page = await newE2EPage({
-    url: '/src/components/item-sliding/test/standalone?ionic:_testing=true&rtl=true',
-  });
-
-  const compares = [];
-  compares.push(await page.compareScreenshot());
-
-  // Pass sliding item with start icons in option
-  await openItemSliding('#startItem', page, true);
-  compares.push(await page.compareScreenshot(`start icons open`));
-  await closeItemSliding(page);
-
-  // Pass sliding item with top icons in option
-  await openItemSliding('#topItem', page, true);
-  compares.push(await page.compareScreenshot(`top icons open`));
-  await closeItemSliding(page);
-
-  // Pass sliding item with anchor option
-  await openItemSliding('#anchorItem', page, true);
-  compares.push(await page.compareScreenshot(`anchor option`));
-  await closeItemSliding(page);
-
-  for (const compare of compares) {
-    expect(compare).toMatchScreenshot();
-  }
-});
diff --git a/core/src/components/item-sliding/test/standalone/index.html b/core/src/components/item-sliding/test/standalone/index.html
deleted file mode 100644
index 29645780fc..0000000000
--- a/core/src/components/item-sliding/test/standalone/index.html
+++ /dev/null
@@ -1,165 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Item Sliding - Standalone</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-    />
-    <link href="../../../../../css/core.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body>
-    <!-- Sliding item with text options on both sides -->
-    <ion-item-sliding>
-      <ion-item-options side="start">
-        <ion-item-option onClick="favorite(item)">Favorite</ion-item-option>
-        <ion-item-option color="danger" onClick="share(item)">Share</ion-item-option>
-      </ion-item-options>
-
-      <ion-item>
-        <ion-label>Item Options</ion-label>
-      </ion-item>
-
-      <ion-item-options side="end">
-        <ion-item-option onClick="unread(item)">Unread</ion-item-option>
-      </ion-item-options>
-    </ion-item-sliding>
-
-    <!-- Sliding item with expandable options on both sides -->
-    <ion-item-sliding>
-      <ion-item-options side="start">
-        <ion-item-option color="danger" expandable> Delete </ion-item-option>
-      </ion-item-options>
-
-      <ion-item>
-        <ion-label>Expandable Options</ion-label>
-      </ion-item>
-
-      <ion-item-options side="end">
-        <ion-item-option color="tertiary" expandable> Archive </ion-item-option>
-      </ion-item-options>
-    </ion-item-sliding>
-
-    <!-- Multi-line sliding item with icon options on both sides -->
-    <ion-item-sliding id="item100">
-      <ion-item href="#">
-        <ion-label>
-          <h2>HubStruck Notifications</h2>
-          <p>A new message in your network</p>
-          <p>Oceanic Next has joined your network</p>
-        </ion-label>
-        <ion-note slot="end"> 10:45 AM </ion-note>
-      </ion-item>
-
-      <ion-item-options side="start">
-        <ion-item-option>
-          <ion-icon slot="icon-only" name="heart"></ion-icon>
-        </ion-item-option>
-      </ion-item-options>
-
-      <ion-item-options side="end">
-        <ion-item-option color="danger">
-          <ion-icon slot="icon-only" name="trash"></ion-icon>
-        </ion-item-option>
-        <ion-item-option>
-          <ion-icon slot="icon-only" name="star"></ion-icon>
-        </ion-item-option>
-      </ion-item-options>
-    </ion-item-sliding>
-
-    <!-- Sliding item with icon start options on end side -->
-    <ion-item-sliding id="startItem">
-      <ion-item>
-        <ion-label> Sliding Item, Icons Start </ion-label>
-      </ion-item>
-      <ion-item-options>
-        <ion-item-option color="primary">
-          <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-          More
-        </ion-item-option>
-        <ion-item-option color="secondary">
-          <ion-icon slot="start" name="archive"></ion-icon>
-          Archive
-        </ion-item-option>
-      </ion-item-options>
-    </ion-item-sliding>
-
-    <!-- Sliding item with icon end options on end side -->
-    <ion-item-sliding>
-      <ion-item>
-        <ion-label> Sliding Item, Icons End </ion-label>
-      </ion-item>
-      <ion-item-options>
-        <ion-item-option color="primary">
-          <ion-icon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-          More
-        </ion-item-option>
-        <ion-item-option color="secondary">
-          <ion-icon slot="end" name="archive"></ion-icon>
-          Archive
-        </ion-item-option>
-      </ion-item-options>
-    </ion-item-sliding>
-
-    <!-- Sliding item with icon top options on end side -->
-    <ion-item-sliding id="topItem">
-      <ion-item>
-        <ion-label> Sliding Item, Icons Top </ion-label>
-      </ion-item>
-      <ion-item-options>
-        <ion-item-option color="primary">
-          <ion-icon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-          More
-        </ion-item-option>
-        <ion-item-option color="secondary">
-          <ion-icon slot="top" name="archive"></ion-icon>
-          Archive
-        </ion-item-option>
-      </ion-item-options>
-    </ion-item-sliding>
-
-    <!-- Sliding item with icon bottom options on end side -->
-    <ion-item-sliding>
-      <ion-item>
-        <ion-label> Sliding Item, Icons Bottom </ion-label>
-      </ion-item>
-      <ion-item-options>
-        <ion-item-option color="primary">
-          <ion-icon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
-          More
-        </ion-item-option>
-        <ion-item-option color="secondary">
-          <ion-icon slot="bottom" name="archive"></ion-icon>
-          Archive
-        </ion-item-option>
-      </ion-item-options>
-    </ion-item-sliding>
-
-    <!-- Sliding item with one anchor option -->
-    <ion-item-sliding id="anchorItem">
-      <ion-item>
-        <ion-label> Sliding Item, Anchor Icon Option </ion-label>
-      </ion-item>
-      <ion-item-options>
-        <ion-item-option href="#" color="primary">
-          <ion-icon slot="icon-only" name="star"></ion-icon>
-        </ion-item-option>
-        <ion-item-option color="secondary">
-          <ion-icon slot="icon-only" name="archive"></ion-icon>
-        </ion-item-option>
-      </ion-item-options>
-    </ion-item-sliding>
-  </body>
-
-  <style>
-    body {
-      margin: 0;
-    }
-  </style>
-</html>
diff --git a/core/src/components/item-sliding/test/test.utils.ts b/core/src/components/item-sliding/test/test.utils.ts
index 1f236c5812..9fa3ee27a0 100644
--- a/core/src/components/item-sliding/test/test.utils.ts
+++ b/core/src/components/item-sliding/test/test.utils.ts
@@ -1,58 +1,33 @@
-// Opens a sliding item by simulating a drag event
-export const openItemSliding = async (id: string, page: any, rtl = false) => {
-  try {
-    const slidingItem = await page.$(id);
+import { expect } from '@playwright/test';
+import type { Locator } from '@playwright/test';
+import type { E2EPage } from '@utils/test/playwright';
 
-    // Simulate a drag
-    const boundingBox = await slidingItem.boundingBox();
-    const centerX = parseFloat(boundingBox.x + boundingBox.width / 2);
-    const centerY = parseFloat(boundingBox.y + boundingBox.height / 2);
-
-    // In LTR start the drag at the center, move halfway in between the
-    // center and 0, then end at 0
-    //
-    //  0                                boundingBox.width
-    //  |---------|---------|---------|---------|
-    // endX     halfX    centerX
-
-    let halfX = centerX / 2;
-    let endX = 0;
-
-    // In RTL start at the center, move halfway in between the center and
-    // the total width, then end at the total width
-    //
-    //  0                                boundingBox.width
-    //  |---------|---------|---------|---------|
-    //                   centerX    halfX      endX
-
-    if (rtl) {
-      halfX = centerX + centerX / 2;
-      endX = boundingBox.width;
-    }
-
-    // Start in the center of the item
-    await page.mouse.move(centerX, centerY);
-    await page.mouse.down();
-
-    // Move halfway first
-    await page.mouse.move(halfX, centerY);
-
-    // Move all of the way to the end
-    await page.mouse.move(endX, centerY);
-    await page.mouse.up();
-
-    // Add a timeout to make sure the item is open
-    await page.waitForTimeout(2000);
-  } catch (err) {
-    throw err;
+export const testSlidingItem = async (
+  page: E2EPage,
+  item: Locator,
+  screenshotNameSuffix: string,
+  openStart = false
+) => {
+  // passing a param into the eval callback is tricky due to execution context
+  // so just do the check outside the callback instead to make things easy
+  if (openStart) {
+    await item.evaluate(async (el: HTMLIonItemSlidingElement) => {
+      await el.open('start');
+    });
+  } else {
+    await item.evaluate(async (el: HTMLIonItemSlidingElement) => {
+      await el.open('end');
+    });
   }
-};
 
-// Close a sliding item after taking a screenshot
-// to allow other sliding items to open
-export const closeItemSliding = async (page: any) => {
-  await page.mouse.move(0, 0);
-  await page.mouse.down();
-  await page.mouse.up();
-  await page.waitForTimeout(1000);
+  // opening animation takes longer than waitForChanges accounts for
+  await page.waitForTimeout(500);
+
+  expect(await item.screenshot()).toMatchSnapshot(
+    `item-sliding-${screenshotNameSuffix}-${page.getSnapshotSettings()}.png`
+  );
+
+  await item.evaluate(async (el: HTMLIonItemSlidingElement) => {
+    await el.close();
+  });
 };
diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index c7bd433aa2..784d2a7ef2 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -665,7 +665,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
     this.currentTransition = dismiss(this, data, role, 'modalLeave', iosLeaveAnimation, mdLeaveAnimation, {
       presentingEl: presentingElement,
-      currentBreakpoint: this.currentBreakpoint !== undefined || this.initialBreakpoint,
+      currentBreakpoint: this.currentBreakpoint ?? this.initialBreakpoint,
       backdropBreakpoint: this.backdropBreakpoint,
     });
 
diff --git a/core/src/components/range/test/basic/range.e2e.ts b/core/src/components/range/test/basic/range.e2e.ts
index 1792cec0c1..3862f2f16f 100644
--- a/core/src/components/range/test/basic/range.e2e.ts
+++ b/core/src/components/range/test/basic/range.e2e.ts
@@ -10,7 +10,10 @@ test.describe('range: basic', () => {
     expect(await page.screenshot()).toMatchSnapshot(`range-diff-${page.getSnapshotSettings()}.png`);
   });
 
-  test('should emit start/end events', async ({ page }, testInfo) => {
+  /**
+   * The mouse events are flaky on CI
+   */
+  test.fixme('should emit start/end events', async ({ page }, testInfo) => {
     await page.setContent(`<ion-range value="20"></ion-range>`);
 
     const rangeStart = await page.spyOnEvent('ionKnobMoveStart');
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 5b629a8264..857d6a1f51 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.3.1](https://github.com/ionic-team/ionic-docs/compare/v6.3.0...v6.3.1) (2022-10-12)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
 # [6.3.0](https://github.com/ionic-team/ionic-docs/compare/v6.2.9...v6.3.0) (2022-10-05)
 
 **Note:** Version bump only for package @ionic/docs
diff --git a/docs/package-lock.json b/docs/package-lock.json
index c3b5515370..449885a1fa 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/docs",
-  "version": "6.3.0",
+  "version": "6.3.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/docs",
-      "version": "6.3.0",
+      "version": "6.3.1",
       "license": "MIT"
     }
   }
diff --git a/docs/package.json b/docs/package.json
index 89ebbe3b72..609f6871ed 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/docs",
-  "version": "6.3.0",
+  "version": "6.3.1",
   "description": "Pre-packaged API documentation for the Ionic docs.",
   "main": "core.json",
   "types": "core.d.ts",
diff --git a/lerna.json b/lerna.json
index 15befd726c..4f05ea097b 100644
--- a/lerna.json
+++ b/lerna.json
@@ -5,5 +5,5 @@
     "angular",
     "packages/*"
   ],
-  "version": "6.3.0"
+  "version": "6.3.1"
 }
diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md
index ce47d3838f..afa7daeb62 100644
--- a/packages/angular-server/CHANGELOG.md
+++ b/packages/angular-server/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.3.1](https://github.com/ionic-team/ionic/compare/v6.3.0...v6.3.1) (2022-10-12)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
 # [6.3.0](https://github.com/ionic-team/ionic/compare/v6.2.9...v6.3.0) (2022-10-05)
 
 **Note:** Version bump only for package @ionic/angular-server
diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json
index 02ca4e18ea..9bff20fea0 100644
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/angular-server",
-  "version": "6.3.0",
+  "version": "6.3.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular-server",
-      "version": "6.3.0",
+      "version": "6.3.1",
       "license": "MIT",
       "devDependencies": {
         "@angular-eslint/eslint-plugin": "^12.6.1",
@@ -18,7 +18,7 @@
         "@angular/platform-browser": "^12.0.0",
         "@angular/platform-browser-dynamic": "^12.2.10",
         "@angular/platform-server": "^12.0.0",
-        "@ionic/core": "^6.3.0",
+        "@ionic/core": "^6.3.1",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
         "@typescript-eslint/eslint-plugin": "^5.2.0",
@@ -786,9 +786,9 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/@ionic/core": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.0.tgz",
-      "integrity": "sha512-6MR0hOdIM6sQyZyXez3/jWAnHScrZKaQxzGT2XiXXIpBrKztNdeAhqDLXoxbDU1PLyDnXXPWBzT6xZ698gG67g==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-OpmGQQ/sGtoXW4PQRvRjYa9mTlAmAWwFMu8g/1rcdAPaTQQAlRnfZ62wYYqmChLSFlVbn6mCleeljzR9FaYrAg==",
       "dev": true,
       "dependencies": {
         "@stencil/core": "^2.18.0",
@@ -7116,9 +7116,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.0.tgz",
-      "integrity": "sha512-6MR0hOdIM6sQyZyXez3/jWAnHScrZKaQxzGT2XiXXIpBrKztNdeAhqDLXoxbDU1PLyDnXXPWBzT6xZ698gG67g==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-OpmGQQ/sGtoXW4PQRvRjYa9mTlAmAWwFMu8g/1rcdAPaTQQAlRnfZ62wYYqmChLSFlVbn6mCleeljzR9FaYrAg==",
       "dev": true,
       "requires": {
         "@stencil/core": "^2.18.0",
diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json
index d55767c805..b42f04242f 100644
--- a/packages/angular-server/package.json
+++ b/packages/angular-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular-server",
-  "version": "6.3.0",
+  "version": "6.3.1",
   "description": "Angular SSR Module for Ionic",
   "keywords": [
     "ionic",
@@ -56,7 +56,7 @@
     "@angular/platform-browser": "^12.0.0",
     "@angular/platform-browser-dynamic": "^12.2.10",
     "@angular/platform-server": "^12.0.0",
-    "@ionic/core": "^6.3.0",
+    "@ionic/core": "^6.3.1",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
     "@typescript-eslint/eslint-plugin": "^5.2.0",
diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md
index fed5ea226d..b9fc5d39b3 100644
--- a/packages/react-router/CHANGELOG.md
+++ b/packages/react-router/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.3.1](https://github.com/ionic-team/ionic/compare/v6.3.0...v6.3.1) (2022-10-12)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
 # [6.3.0](https://github.com/ionic-team/ionic/compare/v6.2.9...v6.3.0) (2022-10-05)
 
 **Note:** Version bump only for package @ionic/react-router
diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json
index e8339cda2e..989438686e 100644
--- a/packages/react-router/package-lock.json
+++ b/packages/react-router/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react-router",
-  "version": "6.3.0",
+  "version": "6.3.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react-router",
-      "version": "6.3.0",
+      "version": "6.3.1",
       "license": "MIT",
       "dependencies": {
-        "@ionic/react": "^6.3.0",
+        "@ionic/react": "^6.3.1",
         "tslib": "*"
       },
       "devDependencies": {
@@ -147,9 +147,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.0.tgz",
-      "integrity": "sha512-6MR0hOdIM6sQyZyXez3/jWAnHScrZKaQxzGT2XiXXIpBrKztNdeAhqDLXoxbDU1PLyDnXXPWBzT6xZ698gG67g==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-OpmGQQ/sGtoXW4PQRvRjYa9mTlAmAWwFMu8g/1rcdAPaTQQAlRnfZ62wYYqmChLSFlVbn6mCleeljzR9FaYrAg==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.3",
@@ -157,11 +157,11 @@
       }
     },
     "node_modules/@ionic/react": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.3.0.tgz",
-      "integrity": "sha512-h84M4HnhopKA7+vfnmB6zoOGJbun74LP1XtXluGi15Bi/buXCeBtHdgLunzLW50G/JMI6QvksyyQa/bhgRI+Eg==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.3.1.tgz",
+      "integrity": "sha512-8Omxifn+b6wXjfm/+OH+AzKpFsR7xn0u8dxaAKeT66txh4fA7DBMgzEPBOe5+VvWarWI6B7cElX/7Xq8qJNwbw==",
       "dependencies": {
-        "@ionic/core": "^6.3.0",
+        "@ionic/core": "^6.3.1",
         "ionicons": "^6.0.2",
         "tslib": "*"
       },
@@ -1157,9 +1157,9 @@
       }
     },
     "@ionic/core": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.0.tgz",
-      "integrity": "sha512-6MR0hOdIM6sQyZyXez3/jWAnHScrZKaQxzGT2XiXXIpBrKztNdeAhqDLXoxbDU1PLyDnXXPWBzT6xZ698gG67g==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-OpmGQQ/sGtoXW4PQRvRjYa9mTlAmAWwFMu8g/1rcdAPaTQQAlRnfZ62wYYqmChLSFlVbn6mCleeljzR9FaYrAg==",
       "requires": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.3",
@@ -1167,11 +1167,11 @@
       }
     },
     "@ionic/react": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.3.0.tgz",
-      "integrity": "sha512-h84M4HnhopKA7+vfnmB6zoOGJbun74LP1XtXluGi15Bi/buXCeBtHdgLunzLW50G/JMI6QvksyyQa/bhgRI+Eg==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-6.3.1.tgz",
+      "integrity": "sha512-8Omxifn+b6wXjfm/+OH+AzKpFsR7xn0u8dxaAKeT66txh4fA7DBMgzEPBOe5+VvWarWI6B7cElX/7Xq8qJNwbw==",
       "requires": {
-        "@ionic/core": "^6.3.0",
+        "@ionic/core": "^6.3.1",
         "ionicons": "^6.0.2",
         "tslib": "*"
       }
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
index 5d301ada14..d1d15c7597 100644
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react-router",
-  "version": "6.3.0",
+  "version": "6.3.1",
   "description": "React Router wrapper for @ionic/react",
   "keywords": [
     "ionic",
@@ -36,7 +36,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@ionic/react": "^6.3.0",
+    "@ionic/react": "^6.3.1",
     "tslib": "*"
   },
   "peerDependencies": {
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 26aa3d1cbe..aef2f54ba8 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.3.1](https://github.com/ionic-team/ionic/compare/v6.3.0...v6.3.1) (2022-10-12)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
 # [6.3.0](https://github.com/ionic-team/ionic/compare/v6.2.9...v6.3.0) (2022-10-05)
 
 **Note:** Version bump only for package @ionic/react
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index 50e5efc329..55958a634e 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react",
-  "version": "6.3.0",
+  "version": "6.3.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react",
-      "version": "6.3.0",
+      "version": "6.3.1",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.3.0",
+        "@ionic/core": "^6.3.1",
         "ionicons": "^6.0.2",
         "tslib": "*"
       },
@@ -607,9 +607,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.0.tgz",
-      "integrity": "sha512-6MR0hOdIM6sQyZyXez3/jWAnHScrZKaQxzGT2XiXXIpBrKztNdeAhqDLXoxbDU1PLyDnXXPWBzT6xZ698gG67g==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-OpmGQQ/sGtoXW4PQRvRjYa9mTlAmAWwFMu8g/1rcdAPaTQQAlRnfZ62wYYqmChLSFlVbn6mCleeljzR9FaYrAg==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.3",
@@ -9534,9 +9534,9 @@
       }
     },
     "@ionic/core": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.0.tgz",
-      "integrity": "sha512-6MR0hOdIM6sQyZyXez3/jWAnHScrZKaQxzGT2XiXXIpBrKztNdeAhqDLXoxbDU1PLyDnXXPWBzT6xZ698gG67g==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-OpmGQQ/sGtoXW4PQRvRjYa9mTlAmAWwFMu8g/1rcdAPaTQQAlRnfZ62wYYqmChLSFlVbn6mCleeljzR9FaYrAg==",
       "requires": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.3",
diff --git a/packages/react/package.json b/packages/react/package.json
index cd81092f1b..7e7031b318 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react",
-  "version": "6.3.0",
+  "version": "6.3.1",
   "description": "React specific wrapper for @ionic/core",
   "keywords": [
     "ionic",
@@ -40,7 +40,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "^6.3.0",
+    "@ionic/core": "^6.3.1",
     "ionicons": "^6.0.2",
     "tslib": "*"
   },
diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md
index b7516c072d..70bc3aec46 100644
--- a/packages/vue-router/CHANGELOG.md
+++ b/packages/vue-router/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.3.1](https://github.com/ionic-team/ionic/compare/v6.3.0...v6.3.1) (2022-10-12)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
 # [6.3.0](https://github.com/ionic-team/ionic/compare/v6.2.9...v6.3.0) (2022-10-05)
 
 **Note:** Version bump only for package @ionic/vue-router
diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json
index ef206e0c50..a00addca22 100644
--- a/packages/vue-router/package-lock.json
+++ b/packages/vue-router/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue-router",
-  "version": "6.3.0",
+  "version": "6.3.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue-router",
-      "version": "6.3.0",
+      "version": "6.3.1",
       "license": "MIT",
       "dependencies": {
-        "@ionic/vue": "^6.3.0"
+        "@ionic/vue": "^6.3.1"
       },
       "devDependencies": {
         "@types/jest": "^28.1.1",
@@ -578,9 +578,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.0.tgz",
-      "integrity": "sha512-6MR0hOdIM6sQyZyXez3/jWAnHScrZKaQxzGT2XiXXIpBrKztNdeAhqDLXoxbDU1PLyDnXXPWBzT6xZ698gG67g==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-OpmGQQ/sGtoXW4PQRvRjYa9mTlAmAWwFMu8g/1rcdAPaTQQAlRnfZ62wYYqmChLSFlVbn6mCleeljzR9FaYrAg==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.3",
@@ -588,11 +588,11 @@
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.3.0.tgz",
-      "integrity": "sha512-9D7bK8xZ/qa6gWShgvBRCFSmwkZBN7RkJF1ItmNQXl1msszRjqi7W/++AsTjjGmqpWbupNkwwxZWP7IzN7vcjA==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.3.1.tgz",
+      "integrity": "sha512-QFPF9Pshg4Ns3UDrbA+vGA1QyadIvW0r1Gct6Rv9S/eAfHMOXfAiaIqUgTy0BrFjcR+VCgiCZzg1atEvU0XvyA==",
       "dependencies": {
-        "@ionic/core": "^6.3.0",
+        "@ionic/core": "^6.3.1",
         "ionicons": "^6.0.2"
       }
     },
@@ -5233,9 +5233,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.0.tgz",
-      "integrity": "sha512-6MR0hOdIM6sQyZyXez3/jWAnHScrZKaQxzGT2XiXXIpBrKztNdeAhqDLXoxbDU1PLyDnXXPWBzT6xZ698gG67g==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-OpmGQQ/sGtoXW4PQRvRjYa9mTlAmAWwFMu8g/1rcdAPaTQQAlRnfZ62wYYqmChLSFlVbn6mCleeljzR9FaYrAg==",
       "requires": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.3",
@@ -5243,11 +5243,11 @@
       }
     },
     "@ionic/vue": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.3.0.tgz",
-      "integrity": "sha512-9D7bK8xZ/qa6gWShgvBRCFSmwkZBN7RkJF1ItmNQXl1msszRjqi7W/++AsTjjGmqpWbupNkwwxZWP7IzN7vcjA==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-6.3.1.tgz",
+      "integrity": "sha512-QFPF9Pshg4Ns3UDrbA+vGA1QyadIvW0r1Gct6Rv9S/eAfHMOXfAiaIqUgTy0BrFjcR+VCgiCZzg1atEvU0XvyA==",
       "requires": {
-        "@ionic/core": "^6.3.0",
+        "@ionic/core": "^6.3.1",
         "ionicons": "^6.0.2"
       }
     },
diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json
index 7dcabaaee7..4b79b701a6 100644
--- a/packages/vue-router/package.json
+++ b/packages/vue-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue-router",
-  "version": "6.3.0",
+  "version": "6.3.1",
   "description": "Vue Router integration for @ionic/vue",
   "scripts": {
     "prepublishOnly": "npm run build",
@@ -43,7 +43,7 @@
   },
   "homepage": "https://github.com/ionic-team/ionic#readme",
   "dependencies": {
-    "@ionic/vue": "^6.3.0"
+    "@ionic/vue": "^6.3.1"
   },
   "devDependencies": {
     "@types/jest": "^28.1.1",
diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
index 69bcc63a46..970c628a58 100644
--- a/packages/vue/CHANGELOG.md
+++ b/packages/vue/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.3.1](https://github.com/ionic-team/ionic/compare/v6.3.0...v6.3.1) (2022-10-12)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
 # [6.3.0](https://github.com/ionic-team/ionic/compare/v6.2.9...v6.3.0) (2022-10-05)
 
 
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
index fd383c0482..d24d676411 100644
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue",
-  "version": "6.3.0",
+  "version": "6.3.1",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue",
-      "version": "6.3.0",
+      "version": "6.3.1",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^6.3.0",
+        "@ionic/core": "^6.3.1",
         "ionicons": "^6.0.2"
       },
       "devDependencies": {
@@ -59,9 +59,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.0.tgz",
-      "integrity": "sha512-6MR0hOdIM6sQyZyXez3/jWAnHScrZKaQxzGT2XiXXIpBrKztNdeAhqDLXoxbDU1PLyDnXXPWBzT6xZ698gG67g==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-OpmGQQ/sGtoXW4PQRvRjYa9mTlAmAWwFMu8g/1rcdAPaTQQAlRnfZ62wYYqmChLSFlVbn6mCleeljzR9FaYrAg==",
       "dependencies": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.3",
@@ -768,9 +768,9 @@
       }
     },
     "@ionic/core": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.0.tgz",
-      "integrity": "sha512-6MR0hOdIM6sQyZyXez3/jWAnHScrZKaQxzGT2XiXXIpBrKztNdeAhqDLXoxbDU1PLyDnXXPWBzT6xZ698gG67g==",
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-OpmGQQ/sGtoXW4PQRvRjYa9mTlAmAWwFMu8g/1rcdAPaTQQAlRnfZ62wYYqmChLSFlVbn6mCleeljzR9FaYrAg==",
       "requires": {
         "@stencil/core": "^2.18.0",
         "ionicons": "^6.0.3",
diff --git a/packages/vue/package.json b/packages/vue/package.json
index fbf71c31e6..8672f77d3b 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue",
-  "version": "6.3.0",
+  "version": "6.3.1",
   "description": "Vue specific wrapper for @ionic/core",
   "scripts": {
     "prepublishOnly": "npm run build",
@@ -60,7 +60,7 @@
     "vue-router": "^4.0.16"
   },
   "dependencies": {
-    "@ionic/core": "^6.3.0",
+    "@ionic/core": "^6.3.1",
     "ionicons": "^6.0.2"
   },
   "vetur": {
diff --git a/packages/vue/src/components/IonApp.ts b/packages/vue/src/components/IonApp.ts
index 9dc4771760..3355a662c3 100644
--- a/packages/vue/src/components/IonApp.ts
+++ b/packages/vue/src/components/IonApp.ts
@@ -1,10 +1,9 @@
 import { h, defineComponent, shallowRef, VNode } from 'vue';
-import { defineCustomElement } from '../utils';
-import { IonApp as IonAppCmp } from '@ionic/core/components/ion-app.js';
+import { defineCustomElement } from '@ionic/core/components/ion-app.js';
 
 const userComponents = shallowRef([]);
 export const IonApp = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
-  defineCustomElement('ion-app', IonAppCmp);
+  defineCustomElement();
   return () => {
     return h(
       'ion-app',
diff --git a/packages/vue/src/components/IonBackButton.ts b/packages/vue/src/components/IonBackButton.ts
index 2f86022ff3..7d4468a2b4 100644
--- a/packages/vue/src/components/IonBackButton.ts
+++ b/packages/vue/src/components/IonBackButton.ts
@@ -1,11 +1,8 @@
 import { h, inject, defineComponent } from 'vue';
-import { defineCustomElement } from '../utils';
-import { IonBackButton as IonBackButtonCmp } from '@ionic/core/components/ion-back-button.js';
-import { IonIcon as IonIconCmp } from 'ionicons/components/ion-icon.js';
+import { defineCustomElement } from '@ionic/core/components/ion-back-button.js';
 
 export const IonBackButton = /*@__PURE__*/ defineComponent((_, { attrs, slots }) => {
-  defineCustomElement('ion-back-button', IonBackButtonCmp);
-  defineCustomElement('ion-icon', IonIconCmp);
+  defineCustomElement();
 
   const ionRouter: any = inject('navManager');
 
diff --git a/packages/vue/src/components/IonIcon.ts b/packages/vue/src/components/IonIcon.ts
index 4bcc75c992..02944de8c6 100644
--- a/packages/vue/src/components/IonIcon.ts
+++ b/packages/vue/src/components/IonIcon.ts
@@ -1,7 +1,6 @@
 import { h, defineComponent } from 'vue';
 import { isPlatform } from '@ionic/core/components';
-import { defineCustomElement } from '../utils';
-import { IonIcon as IonIconCmp } from 'ionicons/components/ion-icon.js';
+import { defineCustomElement } from 'ionicons/components/ion-icon.js';
 
 export const IonIcon = /*@__PURE__*/ defineComponent({
   name: 'IonIcon',
@@ -18,7 +17,7 @@ export const IonIcon = /*@__PURE__*/ defineComponent({
     src: String
   },
   setup(props, { slots }) {
-    defineCustomElement('ion-icon', IonIconCmp);
+    defineCustomElement();
     return () => {
       const { icon, ios, md } = props;
 
diff --git a/packages/vue/src/components/IonNav.ts b/packages/vue/src/components/IonNav.ts
index af7889ea37..982a5ff027 100644
--- a/packages/vue/src/components/IonNav.ts
+++ b/packages/vue/src/components/IonNav.ts
@@ -1,10 +1,9 @@
 import { defineComponent, h, shallowRef, VNode } from 'vue';
 import { VueDelegate } from '../framework-delegate';
-import { defineCustomElement } from '../utils';
-import { IonNav as IonNavCmp } from '@ionic/core/components/ion-nav.js';
+import { defineCustomElement } from '@ionic/core/components/ion-nav.js';
 
 export const IonNav = /*@__PURE__*/ defineComponent(() => {
-  defineCustomElement('ion-nav', IonNavCmp);
+  defineCustomElement();
   const views = shallowRef([]);
 
   /**
diff --git a/packages/vue/src/components/IonRouterOutlet.ts b/packages/vue/src/components/IonRouterOutlet.ts
index 6ab254557a..339f24942e 100644
--- a/packages/vue/src/components/IonRouterOutlet.ts
+++ b/packages/vue/src/components/IonRouterOutlet.ts
@@ -12,9 +12,9 @@ import {
   Ref
 } from 'vue';
 import { AnimationBuilder, LIFECYCLE_DID_ENTER, LIFECYCLE_DID_LEAVE, LIFECYCLE_WILL_ENTER, LIFECYCLE_WILL_LEAVE } from '@ionic/core/components';
-import { IonRouterOutlet as IonRouterOutletCmp } from '@ionic/core/components/ion-router-outlet.js';
+import { defineCustomElement } from '@ionic/core/components/ion-router-outlet.js';
 import { matchedRouteKey, routeLocationKey, useRoute } from 'vue-router';
-import { fireLifecycle, generateId, getConfig, defineCustomElement } from '../utils';
+import { fireLifecycle, generateId, getConfig } from '../utils';
 
 const isViewVisible = (enteringEl: HTMLElement) => {
   return !enteringEl.classList.contains('ion-page-hidden') && !enteringEl.classList.contains('ion-page-invisible');
@@ -24,7 +24,7 @@ let viewDepthKey: InjectionKey<0> = Symbol(0);
 export const IonRouterOutlet = /*@__PURE__*/ defineComponent({
   name: 'IonRouterOutlet',
   setup() {
-    defineCustomElement('ion-router-outlet', IonRouterOutletCmp);
+    defineCustomElement();
 
     const injectedRoute = inject(routeLocationKey)!;
     const route = useRoute();
diff --git a/packages/vue/src/components/IonTabBar.ts b/packages/vue/src/components/IonTabBar.ts
index 02473295c6..e61bd8629a 100644
--- a/packages/vue/src/components/IonTabBar.ts
+++ b/packages/vue/src/components/IonTabBar.ts
@@ -1,6 +1,5 @@
 import { h, defineComponent, getCurrentInstance, inject, VNode } from 'vue';
-import { defineCustomElement } from '../utils';
-import { IonTabBar as IonTabBarCmp } from '@ionic/core/components/ion-tab-bar.js';
+import { defineCustomElement } from '@ionic/core/components/ion-tab-bar.js';
 
 interface TabState {
   activeTab?: string;
@@ -172,7 +171,7 @@ export const IonTabBar = defineComponent({
     ionRouter.registerHistoryChangeListener(() => this.checkActiveTab(ionRouter));
   },
   setup(_, { slots }) {
-    defineCustomElement('ion-tab-bar', IonTabBarCmp);
+    defineCustomElement();
 
     return () => {
       return h(
diff --git a/packages/vue/src/components/IonTabButton.ts b/packages/vue/src/components/IonTabButton.ts
index b80a135475..dc522e9e5c 100644
--- a/packages/vue/src/components/IonTabButton.ts
+++ b/packages/vue/src/components/IonTabButton.ts
@@ -1,6 +1,5 @@
 import { h, defineComponent, inject } from 'vue';
-import { defineCustomElement } from '../utils';
-import { IonTabButton as IonTabButtonCmp } from '@ionic/core/components/ion-tab-button.js';
+import { defineCustomElement } from '@ionic/core/components/ion-tab-button.js';
 
 export const IonTabButton = /*@__PURE__*/ defineComponent({
   name: 'IonTabButton',
@@ -16,7 +15,7 @@ export const IonTabButton = /*@__PURE__*/ defineComponent({
     target: String
   },
   setup(props, { slots }) {
-    defineCustomElement('ion-tab-button', IonTabButtonCmp);
+    defineCustomElement();
 
     const ionRouter: any = inject('navManager');
     const onClick = (ev: Event) => {
diff --git a/packages/vue/src/utils.ts b/packages/vue/src/utils.ts
index bf38e9a449..db46362024 100644
--- a/packages/vue/src/utils.ts
+++ b/packages/vue/src/utils.ts
@@ -57,11 +57,3 @@ export const getConfig = (): CoreConfig | null => {
   }
   return null;
 };
-
-export const defineCustomElement = (tagName: string, customElement: any) => {
-  if (typeof customElements === 'undefined') return;
-
-  if (!customElements.get(tagName)) {
-    customElements.define(tagName, customElement);
-  }
-}