diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index 8a83cb0dc00..c565dcac8c2 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,4 +1,4 @@
-Issue number: #
+Issue number: resolves #
 
 ---------
 
@@ -21,7 +21,12 @@ Issue number: #
 - [ ] Yes
 - [ ] No
 
-<!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. -->
+<!--
+  If this introduces a breaking change:
+  1. Describe the impact and migration path for existing applications below.
+  2. Update the BREAKING.md file with the breaking change.
+  3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information.
+-->
 
 
 ## Other information
diff --git a/.github/workflows/actions/test-core-screenshot/action.yml b/.github/workflows/actions/test-core-screenshot/action.yml
index 52596467d39..d9cf4bf6f50 100644
--- a/.github/workflows/actions/test-core-screenshot/action.yml
+++ b/.github/workflows/actions/test-core-screenshot/action.yml
@@ -7,6 +7,8 @@ inputs:
     description: 'Playwright total number of test shards (ex: 4)'
   update:
     description: 'Whether or not to update the reference snapshots'
+  component:
+    description: 'The component to update the reference snapshots'
 
 runs:
   using: 'composite'
@@ -23,9 +25,29 @@ runs:
       run: npm install && npx playwright install && npx playwright install-deps
       shell: bash
       working-directory: ./core
+    - id: clean-component-name
+      name: Clean Component Name
+      # Remove `ion-` prefix from the `component` variable if it exists.
+      run: |
+        echo "component=$(echo ${{ inputs.component }} | sed 's/ion-//g')" >> $GITHUB_OUTPUT
+      shell: bash
+    - id: set-test-file
+      name: Set Test File
+      # Screenshots can be updated for all components or specified component(s).
+      # If the `component` variable is set, then the test has the option to
+      # - run all the file paths that are in a component folder.
+      # -- For example: if the `component` value is "item", then the test will run all the file paths that are in the "src/components/item" folder.
+      # -- For example: if the `component` value is "item chip", then the test will run all the file paths that are in the "src/components/item" and "src/components/chip" folders.
+      run: |
+        if [ -n "${{ steps.clean-component-name.outputs.component }}" ]; then
+          echo "testFile=\$(echo '${{ steps.clean-component-name.outputs.component }}' | awk '{for(i=1;i<=NF;i++) \$i=\"src/components/\"\$i}1')" >> $GITHUB_OUTPUT
+        else
+          echo "testFile=$(echo '')" >> $GITHUB_OUTPUT
+        fi
+      shell: bash
     - name: Test
       if: inputs.update != 'true'
-      run: npm run test.e2e -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }}
+      run: npm run test.e2e ${{ steps.set-test-file.outputs.testFile }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }}
       shell: bash
       working-directory: ./core
     - name: Test and Update
@@ -47,7 +69,7 @@ runs:
       # which is why we not using the upload-archive
       # composite step here.
       run: |
-        npm run test.e2e -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots
+        npm run test.e2e ${{ steps.set-test-file.outputs.testFile }} -- --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots
         git add src/\*.png --force
         mkdir updated-screenshots
         cd ../ && rsync -R --progress $(git diff --name-only --cached) core/updated-screenshots
diff --git a/.github/workflows/assign-issues.yml b/.github/workflows/assign-issues.yml
new file mode 100644
index 00000000000..da273a8c4ba
--- /dev/null
+++ b/.github/workflows/assign-issues.yml
@@ -0,0 +1,18 @@
+name: Assign issues to triage
+
+on:
+  issues:
+    types: [opened]
+
+jobs:
+  auto-assign:
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+    steps:
+      - name: 'Auto-assign issue'
+        uses: pozil/auto-assign-issue@edee9537367a8fbc625d27f9e10aa8bad47b8723 # v1.13.0
+        with:
+          assignees: liamdebeasi, sean-perkins, brandyscarney, amandaejohnston, mapsandapps, thetaPC
+          numOfAssignee: 1
+          allowSelfAssign: false
diff --git a/.github/workflows/nightly.yml b/.github/workflows/nightly.yml
index e9f0db784f0..c728f48f16a 100644
--- a/.github/workflows/nightly.yml
+++ b/.github/workflows/nightly.yml
@@ -37,45 +37,3 @@ jobs:
       version: ${{ needs.create-nightly-hash.outputs.nightly-hash }}
     secrets:
       NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-  finalize-release:
-    needs: [create-nightly-hash, release-ionic]
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/checkout@v3
-      with:
-        token: ${{ secrets.IONITRON_TOKEN }}
-        fetch-depth: 0
-    - name: Configure Identity
-      # Commits from github-actions do not
-      # trigger other GitHub Actions. As a result,
-      # we publish releases from Ionitron instead
-      # so actions run when merging the release branch
-      # back into main.
-      run: |
-        git config user.name ionitron
-        git config user.email hi@ionicframework.com
-      shell: bash
-    - name: Checkout Nightly Branch
-      # There are branch protection rules for our version
-      # branches (i.e. "6.2.x"), so we cannot name the branch
-      # the nightly hash as it would fall under the protection
-      # rule. As a result, we prefix "tmp-" to the branch.
-      run: |
-        git checkout -b tmp-${{ needs.create-nightly-hash.outputs.nightly-hash }}
-        git push origin tmp-${{ needs.create-nightly-hash.outputs.nightly-hash }}
-      shell: bash
-    - name: Create GitHub Release
-      run: lerna version ${{ needs.create-nightly-hash.outputs.nightly-hash }} --yes --force-publish='*' --conventional-commits --conventional-prerelease --create-release github
-      env:
-        GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      shell: bash
-    # We need to push the commit changes in order for the tags
-    # to get updated, but we don't need to keep the changelog
-    # changes around.
-    - name: Delete Nightly Branch
-      run: |
-        git checkout main
-        git branch -D tmp-${{ needs.create-nightly-hash.outputs.nightly-hash }}
-        git push origin --delete tmp-${{ needs.create-nightly-hash.outputs.nightly-hash }}
-      shell: bash
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 2210bbbf76a..e8e9711f777 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -69,16 +69,45 @@ 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"
-        git add .
-        git commit -m "chore(): update package lock files"
-        git push
-      shell: bash
+
+  update-package-lock:
+    # This needs to run after finalize-release
+    # because we also push to the repo in that
+    # job. If these jobs ran in parallel then it is
+    # possible for them to push at the same time.
+    needs: [finalize-release]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        # Pull the latest version of the reference
+        # branch instead of the revision that triggered
+        # the workflow otherwise we won't get the commit
+        # created in the previous job and this next job
+        # will fail.
+        with:
+          ref: ${{ github.ref }}
+      - name: Configure Identity
+        # Commits from github-actions do not
+        # trigger other GitHub Actions. As a result,
+        # we push from Ionitron instead so actions
+        # run when merging the release branch
+        # back into main.
+        run: |
+          git config user.name ionitron
+          git config user.email hi@ionicframework.com
+        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"
+          git add .
+          git commit -m "chore(): update package lock files"
+          git push
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        shell: bash
 
   purge-cdn-cache:
     needs: [release-ionic]
diff --git a/.github/workflows/update-screenshots.yml b/.github/workflows/update-screenshots.yml
index 7ff2c499013..b78a13c42a6 100644
--- a/.github/workflows/update-screenshots.yml
+++ b/.github/workflows/update-screenshots.yml
@@ -2,6 +2,11 @@ name: 'Update Reference Screenshots'
 
 on:
   workflow_dispatch:
+    inputs:
+      component:
+        description: 'What component(s) should be updated? (leave blank to update all or use a space-separated list for multiple components)'
+        required: false
+        default: ''
 
 jobs:
   build-core:
@@ -34,6 +39,7 @@ jobs:
           shard: ${{ matrix.shard }}
           totalShards: ${{ matrix.totalShards }}
           update: true
+          component: ${{ inputs.component }}
 
   update-reference-screenshots:
     runs-on: ubuntu-latest
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0d0dad6487d..bab77c44f56 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,90 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)
+
+
+### Bug Fixes
+
+* **alert:** remove border-right on ios stacked buttons ([#28821](https://github.com/ionic-team/ionic-framework/issues/28821)) ([ad65824](https://github.com/ionic-team/ionic-framework/commit/ad65824722da0eed90ef9e595b743754bfd360b8))
+* **datetime:** do not animate to new value when multiple values in different months are set ([#28847](https://github.com/ionic-team/ionic-framework/issues/28847)) ([9262f7d](https://github.com/ionic-team/ionic-framework/commit/9262f7da15969706039e9d5f11ef5c7bd73ced0d)), closes [#28602](https://github.com/ionic-team/ionic-framework/issues/28602)
+* **datetime:** enter closes keyboard when typing time ([#28848](https://github.com/ionic-team/ionic-framework/issues/28848)) ([c47a16d](https://github.com/ionic-team/ionic-framework/commit/c47a16d6c3c57f56b053727dd10ead0bfe547e50)), closes [#28325](https://github.com/ionic-team/ionic-framework/issues/28325)
+* **menu:** improve reliability of main content not being scrollable when menu opens ([#28829](https://github.com/ionic-team/ionic-framework/issues/28829)) ([9603a4d](https://github.com/ionic-team/ionic-framework/commit/9603a4de363d2b42622ff3585cd6e4787d9581d1)), closes [#28399](https://github.com/ionic-team/ionic-framework/issues/28399)
+* **popover:** content inside of popover scrolls correctly ([#28861](https://github.com/ionic-team/ionic-framework/issues/28861)) ([10c38d0](https://github.com/ionic-team/ionic-framework/commit/10c38d0354e61e20bec9a313de84b22c3b85c323)), closes [#28455](https://github.com/ionic-team/ionic-framework/issues/28455)
+* **segment:** setting value via binding updates button state ([#28837](https://github.com/ionic-team/ionic-framework/issues/28837)) ([0847c2a](https://github.com/ionic-team/ionic-framework/commit/0847c2ac2c52b5fa6d30e381685d6cbf7a41231a)), closes [#28816](https://github.com/ionic-team/ionic-framework/issues/28816)
+* **select:** click handlers on slotted content fire ([#28839](https://github.com/ionic-team/ionic-framework/issues/28839)) ([aed7a03](https://github.com/ionic-team/ionic-framework/commit/aed7a03532b88628a4358c8cbae1a1cbb861462b)), closes [#28818](https://github.com/ionic-team/ionic-framework/issues/28818)
+* **vue:** tabs and parameterized routes work with latest vue ([#28846](https://github.com/ionic-team/ionic-framework/issues/28846)) ([5bc4399](https://github.com/ionic-team/ionic-framework/commit/5bc439961fda2c595666e67688fdd1b8ff4dd0bf)), closes [#28774](https://github.com/ionic-team/ionic-framework/issues/28774)
+
+
+
+
+
+## [7.6.5](https://github.com/ionic-team/ionic-framework/compare/v7.6.4...v7.6.5) (2024-01-17)
+
+
+### Bug Fixes
+
+* **angular:** add old IonBackButtonDelegate import ([#28831](https://github.com/ionic-team/ionic-framework/issues/28831)) ([fb77353](https://github.com/ionic-team/ionic-framework/commit/fb7735397ed53323dd93a172407117228610b929)), closes [#28827](https://github.com/ionic-team/ionic-framework/issues/28827)
+* **list:** remove uneeded border radius from items in inset list ([#28830](https://github.com/ionic-team/ionic-framework/issues/28830)) ([dbaaa5b](https://github.com/ionic-team/ionic-framework/commit/dbaaa5bd9f43b8ba589b3f9c4b4204d2f203ef18))
+
+
+
+
+
+## [7.6.4](https://github.com/ionic-team/ionic-framework/compare/v7.6.3...v7.6.4) (2024-01-10)
+
+
+### Bug Fixes
+
+* **input:** slotted buttons are clickable ([#28772](https://github.com/ionic-team/ionic-framework/issues/28772)) ([4ccc150](https://github.com/ionic-team/ionic-framework/commit/4ccc150edff4e3f33f453343aedb081d920b2f90)), closes [#28762](https://github.com/ionic-team/ionic-framework/issues/28762)
+
+
+
+
+
+## [7.6.3](https://github.com/ionic-team/ionic-framework/compare/v7.6.2...v7.6.3) (2024-01-03)
+
+
+### Bug Fixes
+
+* **datetime:** selected today button renders correctly on ios ([#28740](https://github.com/ionic-team/ionic-framework/issues/28740)) ([2f99aea](https://github.com/ionic-team/ionic-framework/commit/2f99aeae6f71d5ffd1880f2c549227ecf71becf3))
+* **nav, router-outlet:** ios page transition does not cover menu on larger screens ([#28745](https://github.com/ionic-team/ionic-framework/issues/28745)) ([878eec6](https://github.com/ionic-team/ionic-framework/commit/878eec6ea21d76586466d01e13e5e842e69eaceb)), closes [#28737](https://github.com/ionic-team/ionic-framework/issues/28737)
+* **radio-group:** radio disabled prop can be undefined ([#28712](https://github.com/ionic-team/ionic-framework/issues/28712)) ([75ffeee](https://github.com/ionic-team/ionic-framework/commit/75ffeee933ae353d2601670178896116c81923e0)), closes [#28677](https://github.com/ionic-team/ionic-framework/issues/28677)
+* **refresher:** native ios refresher works on iPadOS ([#28620](https://github.com/ionic-team/ionic-framework/issues/28620)) ([e522601](https://github.com/ionic-team/ionic-framework/commit/e5226016a0f0b066a7bd7fc9997f905d3b87fbc4)), closes [#28617](https://github.com/ionic-team/ionic-framework/issues/28617)
+
+
+
+
+
+## [7.6.2](https://github.com/ionic-team/ionic-framework/compare/v7.6.1...v7.6.2) (2023-12-19)
+
+
+### Bug Fixes
+
+* **input, textarea, select:** reduce padding on slotted buttons ([#28676](https://github.com/ionic-team/ionic-framework/issues/28676)) ([516b844](https://github.com/ionic-team/ionic-framework/commit/516b84475e5d78060f35fa2c4821efc712536353))
+* **item:** label does not expand indefinitely ([#28700](https://github.com/ionic-team/ionic-framework/issues/28700)) ([bc51dd0](https://github.com/ionic-team/ionic-framework/commit/bc51dd05cf036656980de584d2367db46054f774))
+* **refresher:** mode property can be used in typescript ([#28717](https://github.com/ionic-team/ionic-framework/issues/28717)) ([7ce1031](https://github.com/ionic-team/ionic-framework/commit/7ce1031c177487649c2a698664ec98f10d9002b9)), closes [#28716](https://github.com/ionic-team/ionic-framework/issues/28716)
+
+
+
+
+
+## [7.6.1](https://github.com/ionic-team/ionic-framework/compare/v7.6.0...v7.6.1) (2023-12-13)
+
+
+### Bug Fixes
+
+* **datetime:** prefer wheel sets working value on confirmation ([#28520](https://github.com/ionic-team/ionic-framework/issues/28520)) ([e886e3f](https://github.com/ionic-team/ionic-framework/commit/e886e3ff2fcb8a3586a62881c5fc848f3074235d)), closes [#25839](https://github.com/ionic-team/ionic-framework/issues/25839)
+* **input, textarea:** clearOnInput ignores key modifiers ([#28639](https://github.com/ionic-team/ionic-framework/issues/28639)) ([8f7d87c](https://github.com/ionic-team/ionic-framework/commit/8f7d87c6803b1600a3ca21785df0e9bac49f74a3)), closes [#28633](https://github.com/ionic-team/ionic-framework/issues/28633)
+* **menu:** allow styling of the box shadow and transform when visible inside of a split pane ([#28691](https://github.com/ionic-team/ionic-framework/issues/28691)) ([8ee23d2](https://github.com/ionic-team/ionic-framework/commit/8ee23d20d5cc7419ce15f047b92d2f826d3eb681)), closes [#21530](https://github.com/ionic-team/ionic-framework/issues/21530)
+* **react:** avoid type collision with @types/react@18.2.43 and greater ([#28687](https://github.com/ionic-team/ionic-framework/issues/28687)) ([92f1b86](https://github.com/ionic-team/ionic-framework/commit/92f1b8627a240c93891205f75adcb5ce3d46596d))
+* **react:** replacing route uses new route direction and animation ([#28671](https://github.com/ionic-team/ionic-framework/issues/28671)) ([a17b963](https://github.com/ionic-team/ionic-framework/commit/a17b9631829c36c2daf1d5227f5afa69f99f8743)), closes [#24260](https://github.com/ionic-team/ionic-framework/issues/24260)
+* **react:** use custom animation when going back after a replace ([#28674](https://github.com/ionic-team/ionic-framework/issues/28674)) ([fc88613](https://github.com/ionic-team/ionic-framework/commit/fc88613fefa019a3b695a2c6e10c85cd3ce79ae8)), closes [#28673](https://github.com/ionic-team/ionic-framework/issues/28673)
+
+
+
+
+
 # [7.6.0](https://github.com/ionic-team/ionic-framework/compare/v7.5.8...v7.6.0) (2023-12-06)
 
 
diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md
index 59c04e5ac62..de77edeea80 100644
--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,85 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)
+
+
+### Bug Fixes
+
+* **alert:** remove border-right on ios stacked buttons ([#28821](https://github.com/ionic-team/ionic-framework/issues/28821)) ([ad65824](https://github.com/ionic-team/ionic-framework/commit/ad65824722da0eed90ef9e595b743754bfd360b8))
+* **datetime:** do not animate to new value when multiple values in different months are set ([#28847](https://github.com/ionic-team/ionic-framework/issues/28847)) ([9262f7d](https://github.com/ionic-team/ionic-framework/commit/9262f7da15969706039e9d5f11ef5c7bd73ced0d)), closes [#28602](https://github.com/ionic-team/ionic-framework/issues/28602)
+* **datetime:** enter closes keyboard when typing time ([#28848](https://github.com/ionic-team/ionic-framework/issues/28848)) ([c47a16d](https://github.com/ionic-team/ionic-framework/commit/c47a16d6c3c57f56b053727dd10ead0bfe547e50)), closes [#28325](https://github.com/ionic-team/ionic-framework/issues/28325)
+* **menu:** improve reliability of main content not being scrollable when menu opens ([#28829](https://github.com/ionic-team/ionic-framework/issues/28829)) ([9603a4d](https://github.com/ionic-team/ionic-framework/commit/9603a4de363d2b42622ff3585cd6e4787d9581d1)), closes [#28399](https://github.com/ionic-team/ionic-framework/issues/28399)
+* **popover:** content inside of popover scrolls correctly ([#28861](https://github.com/ionic-team/ionic-framework/issues/28861)) ([10c38d0](https://github.com/ionic-team/ionic-framework/commit/10c38d0354e61e20bec9a313de84b22c3b85c323)), closes [#28455](https://github.com/ionic-team/ionic-framework/issues/28455)
+* **segment:** setting value via binding updates button state ([#28837](https://github.com/ionic-team/ionic-framework/issues/28837)) ([0847c2a](https://github.com/ionic-team/ionic-framework/commit/0847c2ac2c52b5fa6d30e381685d6cbf7a41231a)), closes [#28816](https://github.com/ionic-team/ionic-framework/issues/28816)
+* **select:** click handlers on slotted content fire ([#28839](https://github.com/ionic-team/ionic-framework/issues/28839)) ([aed7a03](https://github.com/ionic-team/ionic-framework/commit/aed7a03532b88628a4358c8cbae1a1cbb861462b)), closes [#28818](https://github.com/ionic-team/ionic-framework/issues/28818)
+
+
+
+
+
+## [7.6.5](https://github.com/ionic-team/ionic-framework/compare/v7.6.3...v7.6.5) (2024-01-17)
+
+
+### Bug Fixes
+
+* **list:** remove uneeded border radius from items in inset list ([#28830](https://github.com/ionic-team/ionic-framework/issues/28830)) ([dbaaa5b](https://github.com/ionic-team/ionic-framework/commit/dbaaa5bd9f43b8ba589b3f9c4b4204d2f203ef18))
+
+
+
+
+
+## [7.6.4](https://github.com/ionic-team/ionic-framework/compare/v7.6.3...v7.6.4) (2024-01-10)
+
+
+### Bug Fixes
+
+* **input:** slotted buttons are clickable ([#28772](https://github.com/ionic-team/ionic-framework/issues/28772)) ([4ccc150](https://github.com/ionic-team/ionic-framework/commit/4ccc150edff4e3f33f453343aedb081d920b2f90)), closes [#28762](https://github.com/ionic-team/ionic-framework/issues/28762)
+
+
+
+
+
+## [7.6.3](https://github.com/ionic-team/ionic-framework/compare/v7.6.2...v7.6.3) (2024-01-03)
+
+
+### Bug Fixes
+
+* **datetime:** selected today button renders correctly on ios ([#28740](https://github.com/ionic-team/ionic-framework/issues/28740)) ([2f99aea](https://github.com/ionic-team/ionic-framework/commit/2f99aeae6f71d5ffd1880f2c549227ecf71becf3))
+* **nav, router-outlet:** ios page transition does not cover menu on larger screens ([#28745](https://github.com/ionic-team/ionic-framework/issues/28745)) ([878eec6](https://github.com/ionic-team/ionic-framework/commit/878eec6ea21d76586466d01e13e5e842e69eaceb)), closes [#28737](https://github.com/ionic-team/ionic-framework/issues/28737)
+* **radio-group:** radio disabled prop can be undefined ([#28712](https://github.com/ionic-team/ionic-framework/issues/28712)) ([75ffeee](https://github.com/ionic-team/ionic-framework/commit/75ffeee933ae353d2601670178896116c81923e0)), closes [#28677](https://github.com/ionic-team/ionic-framework/issues/28677)
+* **refresher:** native ios refresher works on iPadOS ([#28620](https://github.com/ionic-team/ionic-framework/issues/28620)) ([e522601](https://github.com/ionic-team/ionic-framework/commit/e5226016a0f0b066a7bd7fc9997f905d3b87fbc4)), closes [#28617](https://github.com/ionic-team/ionic-framework/issues/28617)
+
+
+
+
+
+## [7.6.2](https://github.com/ionic-team/ionic-framework/compare/v7.6.1...v7.6.2) (2023-12-19)
+
+
+### Bug Fixes
+
+* **input, textarea, select:** reduce padding on slotted buttons ([#28676](https://github.com/ionic-team/ionic-framework/issues/28676)) ([516b844](https://github.com/ionic-team/ionic-framework/commit/516b84475e5d78060f35fa2c4821efc712536353))
+* **item:** label does not expand indefinitely ([#28700](https://github.com/ionic-team/ionic-framework/issues/28700)) ([bc51dd0](https://github.com/ionic-team/ionic-framework/commit/bc51dd05cf036656980de584d2367db46054f774))
+* **refresher:** mode property can be used in typescript ([#28717](https://github.com/ionic-team/ionic-framework/issues/28717)) ([7ce1031](https://github.com/ionic-team/ionic-framework/commit/7ce1031c177487649c2a698664ec98f10d9002b9)), closes [#28716](https://github.com/ionic-team/ionic-framework/issues/28716)
+
+
+
+
+
+## [7.6.1](https://github.com/ionic-team/ionic-framework/compare/v7.6.0...v7.6.1) (2023-12-13)
+
+
+### Bug Fixes
+
+* **datetime:** prefer wheel sets working value on confirmation ([#28520](https://github.com/ionic-team/ionic-framework/issues/28520)) ([e886e3f](https://github.com/ionic-team/ionic-framework/commit/e886e3ff2fcb8a3586a62881c5fc848f3074235d)), closes [#25839](https://github.com/ionic-team/ionic-framework/issues/25839)
+* **input, textarea:** clearOnInput ignores key modifiers ([#28639](https://github.com/ionic-team/ionic-framework/issues/28639)) ([8f7d87c](https://github.com/ionic-team/ionic-framework/commit/8f7d87c6803b1600a3ca21785df0e9bac49f74a3)), closes [#28633](https://github.com/ionic-team/ionic-framework/issues/28633)
+* **menu:** allow styling of the box shadow and transform when visible inside of a split pane ([#28691](https://github.com/ionic-team/ionic-framework/issues/28691)) ([8ee23d2](https://github.com/ionic-team/ionic-framework/commit/8ee23d20d5cc7419ce15f047b92d2f826d3eb681)), closes [#21530](https://github.com/ionic-team/ionic-framework/issues/21530)
+
+
+
+
+
 # [7.6.0](https://github.com/ionic-team/ionic-framework/compare/v7.5.8...v7.6.0) (2023-12-06)
 
 
diff --git a/core/api.txt b/core/api.txt
index 320c0fc1878..fa3825d2903 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1087,6 +1087,7 @@ ion-range,part,tick-active
 ion-refresher,none
 ion-refresher,prop,closeDuration,string,'280ms',false,false
 ion-refresher,prop,disabled,boolean,false,false,false
+ion-refresher,prop,mode,"ios" | "md",undefined,false,false
 ion-refresher,prop,pullFactor,number,1,false,false
 ion-refresher,prop,pullMax,number,this.pullMin + 60,false,false
 ion-refresher,prop,pullMin,number,60,false,false
diff --git a/core/package-lock.json b/core/package-lock.json
index 773df050fba..f0468fa92c1 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,23 +1,23 @@
 {
   "name": "@ionic/core",
-  "version": "7.6.0",
+  "version": "7.6.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "7.6.0",
+      "version": "7.6.6",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^4.8.1",
-        "ionicons": "^7.2.1",
+        "@stencil/core": "^4.12.0",
+        "ionicons": "^7.2.2",
         "tslib": "^2.1.0"
       },
       "devDependencies": {
-        "@axe-core/playwright": "^4.8.2",
-        "@capacitor/core": "^5.5.1",
+        "@axe-core/playwright": "^4.8.4",
+        "@capacitor/core": "^5.6.0",
         "@capacitor/haptics": "^5.0.6",
-        "@capacitor/keyboard": "^5.0.6",
+        "@capacitor/keyboard": "^5.0.8",
         "@capacitor/status-bar": "^5.0.6",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
@@ -26,7 +26,7 @@
         "@rollup/plugin-virtual": "^2.0.3",
         "@stencil/angular-output-target": "^0.8.3",
         "@stencil/react-output-target": "^0.5.3",
-        "@stencil/sass": "^3.0.7",
+        "@stencil/sass": "^3.0.9",
         "@stencil/vue-output-target": "^0.8.7",
         "@types/jest": "^29.5.6",
         "@types/node": "^14.6.0",
@@ -56,12 +56,12 @@
       "dev": true
     },
     "node_modules/@axe-core/playwright": {
-      "version": "4.8.2",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.2.tgz",
-      "integrity": "sha512-9KOhX2tNuvqn9DzpBNyqoqNKRZBrexeSiN9irQ0sEdq8zH13JnatepCJxobuXn4UopNy6iIpP4342beMiH+MSQ==",
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.4.tgz",
+      "integrity": "sha512-xpwd+T0BODt19hnXW0eX9xf+H/Ns1rdWwZNmuCV9UoTqjZ9mGm1F80pvh/A1r317ooltq8nwqcoVO9jbHWKSdA==",
       "dev": true,
       "dependencies": {
-        "axe-core": "~4.8.2"
+        "axe-core": "~4.8.3"
       },
       "peerDependencies": {
         "playwright-core": ">= 1.0.0"
@@ -634,9 +634,9 @@
       "dev": true
     },
     "node_modules/@capacitor/core": {
-      "version": "5.5.1",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.5.1.tgz",
-      "integrity": "sha512-VG6Iv8Q7ZAbvjodxpvjcSe0jfxUwZXnvjbi93ehuJ6eYP8U926qLSXyrT/DToZq+F6v/HyGyVgn3mrE/9jW2Tg==",
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.6.0.tgz",
+      "integrity": "sha512-xJhCOUGPHw0QYDA3YH+CmL6qiV9DH4Ij3yPxSenymjrtLuXI197u9ddCZwGEwgVIkh9kGZBBKzsNkn89SZ2gdQ==",
       "dev": true,
       "dependencies": {
         "tslib": "^2.1.0"
@@ -652,9 +652,9 @@
       }
     },
     "node_modules/@capacitor/keyboard": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.6.tgz",
-      "integrity": "sha512-9GewAa/y2Hwkdw/Be8MTdiAjrFZ7TPDKpR44M0Y/0QMnK+mBbgzcoZ/UkuumWv6e2F1IAI+VY5eYVQHDeZcRoA==",
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.8.tgz",
+      "integrity": "sha512-XYyBzGlzjgLPqyPVdu5McGLYV6+G2efVR4I3l5cF1B27M6U/oFqv9CQU74WNG08nee28bfccboNpv6eWCLYn1A==",
       "dev": true,
       "peerDependencies": {
         "@capacitor/core": "^5.0.0"
@@ -1825,9 +1825,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.1.tgz",
-      "integrity": "sha512-KG1H10j24rlyxIqOI4CG8/h9T7ObTv7giW2H3u1qXV4KKrLykDOpMcLzpqNXqL2Fki3s1QvHyl/oaRvi5waWVw==",
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.0.tgz",
+      "integrity": "sha512-qAQcfNmp2sdxAh1DlyUhHfDmIUS7mhI+5LAhPphg74zK9sKgFL5vpLzgjs0wohpjlmI4msgJFYiRB8lxVPqjPg==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -1846,9 +1846,9 @@
       }
     },
     "node_modules/@stencil/sass": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.7.tgz",
-      "integrity": "sha512-HcBjrh2CJ6aJnkOrBNSVyf1+x3FnUneYFk44rcx/jDK6Lx7R4w0dXMEsIR5MXqtROYWonZt7WtR8wsM1vcD+6w==",
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.9.tgz",
+      "integrity": "sha512-GtPMjf5r4/BVBCO3LvcoMSIfOa6T+0wq+SrTGEilC4NCZpuZdAlZffWxXi80caZ1jDclwdzJ2qGwEgCAfvGoNA==",
       "dev": true,
       "engines": {
         "node": ">=12.0.0",
@@ -2799,9 +2799,9 @@
       }
     },
     "node_modules/axe-core": {
-      "version": "4.8.2",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.2.tgz",
-      "integrity": "sha512-/dlp0fxyM3R8YW7MFzaHWXrf4zzbr0vaYb23VBFCl83R7nWNPg/yaQw2Dc8jzCMmDVLhSdzH8MjrsuIUuvX+6g==",
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.3.tgz",
+      "integrity": "sha512-d5ZQHPSPkF9Tw+yfyDcRoUOc4g/8UloJJe5J8m4L5+c7AtDdjDLRxew/knnI4CxvtdxEUVgWz4x3OIQUIFiMfw==",
       "dev": true,
       "engines": {
         "node": ">=4"
@@ -5785,9 +5785,9 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.1.tgz",
-      "integrity": "sha512-2pvCM7DGVEtbbj48PJzQrCADCQrqjU1nUYX9l9PyEWz3ZfdnLdAouqwPxLdl8tbaF9cE7OZRSlyQD7oLOLnGoQ==",
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz",
+      "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
       "dependencies": {
         "@stencil/core": "^4.0.3"
       }
@@ -10899,12 +10899,12 @@
   },
   "dependencies": {
     "@axe-core/playwright": {
-      "version": "4.8.2",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.2.tgz",
-      "integrity": "sha512-9KOhX2tNuvqn9DzpBNyqoqNKRZBrexeSiN9irQ0sEdq8zH13JnatepCJxobuXn4UopNy6iIpP4342beMiH+MSQ==",
+      "version": "4.8.4",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.8.4.tgz",
+      "integrity": "sha512-xpwd+T0BODt19hnXW0eX9xf+H/Ns1rdWwZNmuCV9UoTqjZ9mGm1F80pvh/A1r317ooltq8nwqcoVO9jbHWKSdA==",
       "dev": true,
       "requires": {
-        "axe-core": "~4.8.2"
+        "axe-core": "~4.8.3"
       }
     },
     "@babel/code-frame": {
@@ -11324,9 +11324,9 @@
       "dev": true
     },
     "@capacitor/core": {
-      "version": "5.5.1",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.5.1.tgz",
-      "integrity": "sha512-VG6Iv8Q7ZAbvjodxpvjcSe0jfxUwZXnvjbi93ehuJ6eYP8U926qLSXyrT/DToZq+F6v/HyGyVgn3mrE/9jW2Tg==",
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.6.0.tgz",
+      "integrity": "sha512-xJhCOUGPHw0QYDA3YH+CmL6qiV9DH4Ij3yPxSenymjrtLuXI197u9ddCZwGEwgVIkh9kGZBBKzsNkn89SZ2gdQ==",
       "dev": true,
       "requires": {
         "tslib": "^2.1.0"
@@ -11340,9 +11340,9 @@
       "requires": {}
     },
     "@capacitor/keyboard": {
-      "version": "5.0.6",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.6.tgz",
-      "integrity": "sha512-9GewAa/y2Hwkdw/Be8MTdiAjrFZ7TPDKpR44M0Y/0QMnK+mBbgzcoZ/UkuumWv6e2F1IAI+VY5eYVQHDeZcRoA==",
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-5.0.8.tgz",
+      "integrity": "sha512-XYyBzGlzjgLPqyPVdu5McGLYV6+G2efVR4I3l5cF1B27M6U/oFqv9CQU74WNG08nee28bfccboNpv6eWCLYn1A==",
       "dev": true,
       "requires": {}
     },
@@ -12184,9 +12184,9 @@
       "requires": {}
     },
     "@stencil/core": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.1.tgz",
-      "integrity": "sha512-KG1H10j24rlyxIqOI4CG8/h9T7ObTv7giW2H3u1qXV4KKrLykDOpMcLzpqNXqL2Fki3s1QvHyl/oaRvi5waWVw=="
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.12.0.tgz",
+      "integrity": "sha512-qAQcfNmp2sdxAh1DlyUhHfDmIUS7mhI+5LAhPphg74zK9sKgFL5vpLzgjs0wohpjlmI4msgJFYiRB8lxVPqjPg=="
     },
     "@stencil/react-output-target": {
       "version": "0.5.3",
@@ -12196,9 +12196,9 @@
       "requires": {}
     },
     "@stencil/sass": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.7.tgz",
-      "integrity": "sha512-HcBjrh2CJ6aJnkOrBNSVyf1+x3FnUneYFk44rcx/jDK6Lx7R4w0dXMEsIR5MXqtROYWonZt7WtR8wsM1vcD+6w==",
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/@stencil/sass/-/sass-3.0.9.tgz",
+      "integrity": "sha512-GtPMjf5r4/BVBCO3LvcoMSIfOa6T+0wq+SrTGEilC4NCZpuZdAlZffWxXi80caZ1jDclwdzJ2qGwEgCAfvGoNA==",
       "dev": true,
       "requires": {}
     },
@@ -12863,9 +12863,9 @@
       }
     },
     "axe-core": {
-      "version": "4.8.2",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.2.tgz",
-      "integrity": "sha512-/dlp0fxyM3R8YW7MFzaHWXrf4zzbr0vaYb23VBFCl83R7nWNPg/yaQw2Dc8jzCMmDVLhSdzH8MjrsuIUuvX+6g==",
+      "version": "4.8.3",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.8.3.tgz",
+      "integrity": "sha512-d5ZQHPSPkF9Tw+yfyDcRoUOc4g/8UloJJe5J8m4L5+c7AtDdjDLRxew/knnI4CxvtdxEUVgWz4x3OIQUIFiMfw==",
       "dev": true
     },
     "b4a": {
@@ -15056,9 +15056,9 @@
       }
     },
     "ionicons": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.1.tgz",
-      "integrity": "sha512-2pvCM7DGVEtbbj48PJzQrCADCQrqjU1nUYX9l9PyEWz3ZfdnLdAouqwPxLdl8tbaF9cE7OZRSlyQD7oLOLnGoQ==",
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz",
+      "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
       "requires": {
         "@stencil/core": "^4.0.3"
       }
diff --git a/core/package.json b/core/package.json
index b6f7f57047e..db80f18e2d6 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "7.6.0",
+  "version": "7.6.6",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
@@ -31,15 +31,15 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "^4.8.1",
-    "ionicons": "^7.2.1",
+    "@stencil/core": "^4.12.0",
+    "ionicons": "^7.2.2",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.8.2",
-    "@capacitor/core": "^5.5.1",
+    "@axe-core/playwright": "^4.8.4",
+    "@capacitor/core": "^5.6.0",
     "@capacitor/haptics": "^5.0.6",
-    "@capacitor/keyboard": "^5.0.6",
+    "@capacitor/keyboard": "^5.0.8",
     "@capacitor/status-bar": "^5.0.6",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
@@ -48,7 +48,7 @@
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.8.3",
     "@stencil/react-output-target": "^0.5.3",
-    "@stencil/sass": "^3.0.7",
+    "@stencil/sass": "^3.0.9",
     "@stencil/vue-output-target": "^0.8.7",
     "@types/jest": "^29.5.6",
     "@types/node": "^14.6.0",
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index dcfee8f33e6..bcea90eeb27 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -943,7 +943,7 @@ export namespace Components {
          */
         "size": 'cover' | 'fixed';
         /**
-          * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".
+          * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "titleSelectedDatesFormatter"?: TitleSelectedDatesFormatter;
         /**
@@ -1182,7 +1182,7 @@ export namespace Components {
          */
         "counter": boolean;
         /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**
@@ -1701,7 +1701,7 @@ export namespace Components {
          */
         "breakpoints"?: number[];
         /**
-          * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.
+          * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "canDismiss": boolean | ((data?: any, role?: string) => Promise<boolean>);
         /**
@@ -2336,7 +2336,7 @@ export namespace Components {
          */
         "pin": boolean;
         /**
-          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.
+          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "pinFormatter": PinFormatter;
         /**
@@ -2377,6 +2377,10 @@ export namespace Components {
           * A number representing how far down the user has pulled. The number `0` represents the user hasn't pulled down at all. The number `1`, and anything greater than `1`, represents that the user has pulled far enough down that when they let go then the refresh will happen. If they let go and the number is less than `1`, then the refresh will not happen, and the content will return to it's original position.
          */
         "getProgress": () => Promise<number>;
+        /**
+          * The mode determines which platform styles to use.
+         */
+        "mode"?: "ios" | "md";
         /**
           * How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead.  For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.  Does not apply when the refresher content uses a spinner, enabling the native refresher.
          */
@@ -2974,7 +2978,7 @@ export namespace Components {
          */
         "counter": boolean;
         /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**
@@ -5646,7 +5650,7 @@ declare namespace LocalJSX {
          */
         "size"?: 'cover' | 'fixed';
         /**
-          * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".
+          * A callback used to format the header text that shows how many dates are selected. Only used if there are 0 or more than 1 selected (i.e. unused for exactly 1). By default, the header text is set to "numberOfDates days".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "titleSelectedDatesFormatter"?: TitleSelectedDatesFormatter;
         /**
@@ -5897,7 +5901,7 @@ declare namespace LocalJSX {
          */
         "counter"?: boolean;
         /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**
@@ -6428,7 +6432,7 @@ declare namespace LocalJSX {
          */
         "breakpoints"?: number[];
         /**
-          * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.
+          * Determines whether or not a modal can dismiss when calling the `dismiss` method.  If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "canDismiss"?: boolean | ((data?: any, role?: string) => Promise<boolean>);
         /**
@@ -7060,7 +7064,7 @@ declare namespace LocalJSX {
          */
         "pin"?: boolean;
         /**
-          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.
+          * A callback used to format the pin text. By default the pin text is set to `Math.round(value)`.  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "pinFormatter"?: PinFormatter;
         /**
@@ -7089,6 +7093,10 @@ declare namespace LocalJSX {
           * If `true`, the refresher will be hidden.
          */
         "disabled"?: boolean;
+        /**
+          * The mode determines which platform styles to use.
+         */
+        "mode"?: "ios" | "md";
         /**
           * Emitted while the user is pulling down the content and exposing the refresher.
          */
@@ -7750,7 +7758,7 @@ declare namespace LocalJSX {
          */
         "counter"?: boolean;
         /**
-          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".  See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this if you need to access `this` from within the callback.
          */
         "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**
diff --git a/core/src/components/accordion/accordion.tsx b/core/src/components/accordion/accordion.tsx
index eab83209cd5..92d28848d20 100644
--- a/core/src/components/accordion/accordion.tsx
+++ b/core/src/components/accordion/accordion.tsx
@@ -382,7 +382,10 @@ export class Accordion implements ComponentInterface {
   };
 
   private toggleExpanded() {
-    const { accordionGroupEl, value, state } = this;
+    const { accordionGroupEl, disabled, readonly, value, state } = this;
+
+    if (disabled || readonly) return;
+
     if (accordionGroupEl) {
       /**
        * Because the accordion group may or may
diff --git a/core/src/components/accordion/test/a11y/index.html b/core/src/components/accordion/test/a11y/index.html
index 0c660ef8ddd..e8bd7a67e01 100644
--- a/core/src/components/accordion/test/a11y/index.html
+++ b/core/src/components/accordion/test/a11y/index.html
@@ -23,28 +23,22 @@ <h1>Accordion Group - a11y</h1>
 
             <ion-list slot="content">
               <ion-item>
-                <ion-label>Name</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Name" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Email</ion-label>
-                <ion-input type="email"></ion-input>
+                <ion-input label="Email" type="email"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Phone</ion-label>
-                <ion-input type="tel"></ion-input>
+                <ion-input label="Phone" type="tel"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Extension</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Extension" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Country</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Country" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>City/Province</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="City/Province" type="text"></ion-input>
               </ion-item>
             </ion-list>
           </ion-accordion>
@@ -56,24 +50,19 @@ <h1>Accordion Group - a11y</h1>
 
             <ion-list slot="content">
               <ion-item>
-                <ion-label>Address 1</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Address 1" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Address 2</ion-label>
-                <ion-input type="email"></ion-input>
+                <ion-input label="Address 2" type="email"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>City</ion-label>
-                <ion-input type="tel"></ion-input>
+                <ion-input label="City" type="tel"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>State</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="State" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Zip Code</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Zip Code" type="text"></ion-input>
               </ion-item>
             </ion-list>
           </ion-accordion>
@@ -85,24 +74,19 @@ <h1>Accordion Group - a11y</h1>
 
             <ion-list slot="content">
               <ion-item>
-                <ion-label>Address 1</ion-label>
-                <ion-input id="address1" type="text"></ion-input>
+                <ion-input label="Address 1" id="address1" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Address 2</ion-label>
-                <ion-input type="email"></ion-input>
+                <ion-input label="Address 2" type="email"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>City</ion-label>
-                <ion-input type="tel"></ion-input>
+                <ion-input label="City" type="tel"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>State</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input lable="State" type="text"></ion-input>
               </ion-item>
               <ion-item>
-                <ion-label>Zip Code</ion-label>
-                <ion-input type="text"></ion-input>
+                <ion-input label="Zip Code" type="text"></ion-input>
               </ion-item>
             </ion-list>
           </ion-accordion>
diff --git a/core/src/components/accordion/test/accordion.e2e.ts b/core/src/components/accordion/test/accordion.e2e.ts
deleted file mode 100644
index f09aa4b1a2f..00000000000
--- a/core/src/components/accordion/test/accordion.e2e.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
-  test.describe(title('accordion: states'), () => {
-    test.beforeEach(async ({ page }) => {
-      await page.setContent(
-        `
-      <ion-accordion-group animated="false">
-        <ion-accordion>
-          <ion-item slot="header">Label</ion-item>
-          <div slot="content">Content</div>
-        </ion-accordion>
-      </ion-accordion-group>
-    `,
-        config
-      );
-    });
-    test('should properly set readonly on child accordions', async ({ page }) => {
-      const accordionGroup = page.locator('ion-accordion-group');
-      const accordion = page.locator('ion-accordion');
-
-      await expect(accordion).toHaveJSProperty('readonly', false);
-
-      await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
-        el.readonly = true;
-      });
-
-      await page.waitForChanges();
-
-      await expect(accordion).toHaveJSProperty('readonly', true);
-    });
-
-    test('should properly set disabled on child accordions', async ({ page }) => {
-      const accordionGroup = page.locator('ion-accordion-group');
-      const accordion = page.locator('ion-accordion');
-
-      await expect(accordion).toHaveJSProperty('disabled', false);
-
-      await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
-        el.disabled = true;
-      });
-
-      await page.waitForChanges();
-
-      await expect(accordion).toHaveJSProperty('disabled', true);
-    });
-  });
-});
diff --git a/core/src/components/accordion/test/disabled/accordion.e2e.ts b/core/src/components/accordion/test/disabled/accordion.e2e.ts
new file mode 100644
index 00000000000..3857a1d7b26
--- /dev/null
+++ b/core/src/components/accordion/test/disabled/accordion.e2e.ts
@@ -0,0 +1,137 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+// NOTE: these tests cannot be re-written as spec tests because the `getAccordions` method in accordion-group.tsx uses a `:scope` selector
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
+  test.describe(title('accordion: disabled'), () => {
+    test('should properly set disabled on child accordions', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false">
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordionGroup = page.locator('ion-accordion-group');
+      const accordion = page.locator('ion-accordion');
+
+      await expect(accordion).toHaveJSProperty('disabled', false);
+
+      await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
+        el.disabled = true;
+      });
+
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveJSProperty('disabled', true);
+    });
+
+    test('should not open accordion on click when group is disabled', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false" disabled>
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordion = page.locator('ion-accordion');
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+
+      accordion.click();
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+    });
+
+    test('should not open accordion on click when accordion is disabled', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false">
+        <ion-accordion disabled>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordion = page.locator('ion-accordion');
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+
+      accordion.click();
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+    });
+
+    test('should not open accordion via keyboard navigation when group is disabled', async ({ page, browserName }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false" disabled>
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordion = page.locator('ion-accordion');
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+
+      await page.keyboard.press(tabKey);
+      await page.waitForChanges();
+
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+    });
+
+    test('should not open accordion via keyboard navigation when accordion is disabled', async ({
+      page,
+      browserName,
+    }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false">
+        <ion-accordion disabled>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordion = page.locator('ion-accordion');
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+
+      await page.keyboard.press(tabKey);
+      await page.waitForChanges();
+
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+    });
+  });
+});
diff --git a/core/src/components/accordion/test/disabled/index.html b/core/src/components/accordion/test/disabled/index.html
new file mode 100644
index 00000000000..38452b7adec
--- /dev/null
+++ b/core/src/components/accordion/test/disabled/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Accordion - Disabled</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <ion-app>
+      <ion-header translucent="true">
+        <ion-toolbar>
+          <ion-title>Accordion - Disabled</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content fullscreen="true" color="light">
+        <ion-header collapse="condense">
+          <ion-toolbar color="light">
+            <ion-title size="large">Accordion - Disabled</ion-title>
+          </ion-toolbar>
+        </ion-header>
+
+        <div class="grid ion-padding">
+          <div class="grid-item">
+            <ion-accordion-group>
+              <ion-accordion value="first">
+                <ion-item slot="header" color="light">
+                  <ion-label>First Accordion</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">First Content</div>
+              </ion-accordion>
+              <ion-accordion value="second" disabled="true">
+                <ion-item slot="header" color="light">
+                  <ion-label>Second Accordion (Disabled)</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">Second Content</div>
+              </ion-accordion>
+              <ion-accordion value="third">
+                <ion-item slot="header" color="light">
+                  <ion-label>Third Accordion</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">Third Content</div>
+              </ion-accordion>
+            </ion-accordion-group>
+          </div>
+          <div class="grid-item">
+            <ion-accordion-group disabled="true">
+              <ion-accordion value="first">
+                <ion-item slot="header" color="light">
+                  <ion-label>First Accordion in Disabled Group</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">First Content</div>
+              </ion-accordion>
+              <ion-accordion value="second">
+                <ion-item slot="header" color="light">
+                  <ion-label>Second Accordion in Disabled Group</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">Second Content</div>
+              </ion-accordion>
+              <ion-accordion value="third">
+                <ion-item slot="header" color="light">
+                  <ion-label>Third Accordion in Disabled Group</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">Third Content</div>
+              </ion-accordion>
+            </ion-accordion-group>
+          </div>
+          <div class="grid-item">
+            <ion-accordion value="second" disabled="true">
+              <ion-item slot="header" color="light">
+                <ion-label>Accordion Without Group (Disabled)</ion-label>
+              </ion-item>
+              <div class="ion-padding" slot="content">Second Content</div>
+            </ion-accordion>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/accordion/test/readonly/accordion.e2e.ts b/core/src/components/accordion/test/readonly/accordion.e2e.ts
new file mode 100644
index 00000000000..00795030468
--- /dev/null
+++ b/core/src/components/accordion/test/readonly/accordion.e2e.ts
@@ -0,0 +1,137 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+// NOTE: these tests cannot be re-written as spec tests because the `getAccordions` method in accordion-group.tsx uses a `:scope` selector
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ config, title }) => {
+  test.describe(title('accordion: readonly'), () => {
+    test('should properly set readonly on child accordions', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false">
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordionGroup = page.locator('ion-accordion-group');
+      const accordion = page.locator('ion-accordion');
+
+      await expect(accordion).toHaveJSProperty('readonly', false);
+
+      await accordionGroup.evaluate((el: HTMLIonAccordionGroupElement) => {
+        el.readonly = true;
+      });
+
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveJSProperty('readonly', true);
+    });
+
+    test('should not open accordion on click when group is readonly', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false" readonly>
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordion = page.locator('ion-accordion');
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+
+      accordion.click();
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+    });
+
+    test('should not open accordion on click when accordion is readonly', async ({ page }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false">
+        <ion-accordion readonly>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordion = page.locator('ion-accordion');
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+
+      accordion.click();
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+    });
+
+    test('should not open accordion via keyboard navigation when group is readonly', async ({ page, browserName }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false" readonly>
+        <ion-accordion>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordion = page.locator('ion-accordion');
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+
+      await page.keyboard.press(tabKey);
+      await page.waitForChanges();
+
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+    });
+
+    test('should not open accordion via keyboard navigation when accordion is readonly', async ({
+      page,
+      browserName,
+    }) => {
+      await page.setContent(
+        `
+      <ion-accordion-group animated="false">
+        <ion-accordion readonly>
+          <ion-item slot="header">Label</ion-item>
+          <div slot="content">Content</div>
+        </ion-accordion>
+      </ion-accordion-group>
+    `,
+        config
+      );
+
+      const accordion = page.locator('ion-accordion');
+      const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+
+      await page.keyboard.press(tabKey);
+      await page.waitForChanges();
+
+      await page.keyboard.press('Enter');
+      await page.waitForChanges();
+
+      await expect(accordion).toHaveClass(/accordion-collapsed/);
+    });
+  });
+});
diff --git a/core/src/components/accordion/test/readonly/index.html b/core/src/components/accordion/test/readonly/index.html
new file mode 100644
index 00000000000..7b1a9ac84c6
--- /dev/null
+++ b/core/src/components/accordion/test/readonly/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Accordion - Readonly</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      .grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        grid-row-gap: 20px;
+        grid-column-gap: 20px;
+      }
+    </style>
+  </head>
+  <body>
+    <ion-app>
+      <ion-header translucent="true">
+        <ion-toolbar>
+          <ion-title>Accordion - Readonly</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content fullscreen="true" color="light">
+        <ion-header collapse="condense">
+          <ion-toolbar color="light">
+            <ion-title size="large">Accordion - Readonly</ion-title>
+          </ion-toolbar>
+        </ion-header>
+
+        <div class="grid ion-padding">
+          <div class="grid-item">
+            <ion-accordion-group>
+              <ion-accordion value="first">
+                <ion-item slot="header" color="light">
+                  <ion-label>First Accordion</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">First Content</div>
+              </ion-accordion>
+              <ion-accordion value="second" readonly="true">
+                <ion-item slot="header" color="light">
+                  <ion-label>Second Accordion (Readonly)</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">Second Content</div>
+              </ion-accordion>
+              <ion-accordion value="third">
+                <ion-item slot="header" color="light">
+                  <ion-label>Third Accordion</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">Third Content</div>
+              </ion-accordion>
+            </ion-accordion-group>
+          </div>
+          <div class="grid-item">
+            <ion-accordion-group readonly="true">
+              <ion-accordion value="first">
+                <ion-item slot="header" color="light">
+                  <ion-label>First Accordion in Readonly Group</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">First Content</div>
+              </ion-accordion>
+              <ion-accordion value="second">
+                <ion-item slot="header" color="light">
+                  <ion-label>Second Accordion in Readonly Group</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">Second Content</div>
+              </ion-accordion>
+              <ion-accordion value="third">
+                <ion-item slot="header" color="light">
+                  <ion-label>Third Accordion in Readonly Group</ion-label>
+                </ion-item>
+                <div class="ion-padding" slot="content">Third Content</div>
+              </ion-accordion>
+            </ion-accordion-group>
+          </div>
+          <div class="grid-item">
+            <ion-accordion value="second" readonly="true">
+              <ion-item slot="header" color="light">
+                <ion-label>Accordion Without Group (Readonly)</ion-label>
+              </ion-item>
+              <div class="ion-padding" slot="content">Second Content</div>
+            </ion-accordion>
+          </div>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>
diff --git a/core/src/components/action-sheet/action-sheet-interface.ts b/core/src/components/action-sheet/action-sheet-interface.ts
index 465c50e050e..1021895d0e4 100644
--- a/core/src/components/action-sheet/action-sheet-interface.ts
+++ b/core/src/components/action-sheet/action-sheet-interface.ts
@@ -1,4 +1,4 @@
-import type { AnimationBuilder, Mode } from '../../interface';
+import type { AnimationBuilder, LiteralUnion, Mode } from '../../interface';
 
 export interface ActionSheetOptions {
   header?: string;
@@ -19,7 +19,7 @@ export interface ActionSheetOptions {
 
 export interface ActionSheetButton<T = any> {
   text?: string;
-  role?: 'cancel' | 'destructive' | 'selected' | string;
+  role?: LiteralUnion<'cancel' | 'destructive' | 'selected', string>;
   icon?: string;
   cssClass?: string | string[];
   id?: string;
diff --git a/core/src/components/action-sheet/test/a11y/index.html b/core/src/components/action-sheet/test/a11y/index.html
index 25adfdfeda8..ea78a68b4da 100644
--- a/core/src/components/action-sheet/test/a11y/index.html
+++ b/core/src/components/action-sheet/test/a11y/index.html
@@ -19,12 +19,12 @@
     <main class="ion-padding">
       <h1>Action Sheet - A11y</h1>
 
-      <ion-button id="bothHeaders" expand="block" onclick="presentBothHeaders()">Both Headers</ion-button>
-      <ion-button id="subHeaderOnly" expand="block" onclick="presentSubHeaderOnly()">Subheader Only</ion-button>
-      <ion-button id="noHeaders" expand="block" onclick="presentNoHeaders()">No Headers</ion-button>
-      <ion-button id="customAria" expand="block" onclick="presentCustomAria()">Custom Aria</ion-button>
-      <ion-button id="ariaLabelButton" expand="block" onclick="presentAriaLabelButton()">Aria Label Button</ion-button>
-      <ion-button id="ariaLabelCancelButton" expand="block" onclick="presentAriaLabelCancelButton()"
+      <ion-button id="bothHeaders" onclick="presentBothHeaders()">Both Headers</ion-button>
+      <ion-button id="subHeaderOnly" onclick="presentSubHeaderOnly()">Subheader Only</ion-button>
+      <ion-button id="noHeaders" onclick="presentNoHeaders()">No Headers</ion-button>
+      <ion-button id="customAria" onclick="presentCustomAria()">Custom Aria</ion-button>
+      <ion-button id="ariaLabelButton" onclick="presentAriaLabelButton()">Aria Label Button</ion-button>
+      <ion-button id="ariaLabelCancelButton" onclick="presentAriaLabelCancelButton()"
         >Aria Label Cancel Button</ion-button
       >
     </main>
diff --git a/core/src/components/alert/alert-interface.ts b/core/src/components/alert/alert-interface.ts
index 3f9d6cda8d4..326d74484d6 100644
--- a/core/src/components/alert/alert-interface.ts
+++ b/core/src/components/alert/alert-interface.ts
@@ -1,4 +1,4 @@
-import type { AnimationBuilder, Mode, TextFieldTypes } from '../../interface';
+import type { AnimationBuilder, LiteralUnion, Mode, TextFieldTypes } from '../../interface';
 import type { IonicSafeString } from '../../utils/sanitization';
 
 export interface AlertOptions {
@@ -45,7 +45,7 @@ type AlertButtonOverlayHandler = boolean | void | { [key: string]: any };
 
 export interface AlertButton {
   text: string;
-  role?: 'cancel' | 'destructive' | string;
+  role?: LiteralUnion<'cancel' | 'destructive', string>;
   cssClass?: string | string[];
   id?: string;
   htmlAttributes?: { [key: string]: any };
diff --git a/core/src/components/alert/alert.ios.scss b/core/src/components/alert/alert.ios.scss
index 3a04490c7e4..f3bdcb04da0 100644
--- a/core/src/components/alert/alert.ios.scss
+++ b/core/src/components/alert/alert.ios.scss
@@ -265,6 +265,22 @@
   flex-wrap: $alert-ios-button-group-flex-wrap;
 }
 
+/**
+  * The right border should only be applied to the first button
+  * when the group has 2 or less buttons (horizontal).
+  * Otherwise, the right border should not be applied
+  * when the group has 3 or more buttons (vertical).
+  */
+.alert-button-group-vertical .alert-button {
+  border-right: none;
+
+  &:last-child {
+    @include rtl() {
+      border-right: none;
+    }
+  }
+}
+
 .alert-button {
   /**
    * This padding ensures that alerts
diff --git a/core/src/components/alert/test/a11y/index.html b/core/src/components/alert/test/a11y/index.html
index 180e901782b..5e15bcc0c45 100644
--- a/core/src/components/alert/test/a11y/index.html
+++ b/core/src/components/alert/test/a11y/index.html
@@ -9,6 +9,19 @@
     <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>
+    <style>
+      main > button {
+        display: block;
+        clear: both;
+        width: 100%;
+        padding: 12px 8px;
+        font-size: 1em;
+        background: #f8f8f8;
+        border: 1px solid #eee;
+        border-radius: 4px;
+        margin-bottom: 8px;
+      }
+    </style>
   </head>
   <script type="module">
     import { alertController } from '../../../../dist/ionic/index.esm.js';
@@ -19,13 +32,13 @@
     <main class="ion-padding">
       <h1>Alert - A11y</h1>
 
-      <ion-button id="bothHeaders" expand="block" onclick="presentBothHeaders()">Both Headers</ion-button>
-      <ion-button id="subHeaderOnly" expand="block" onclick="presentSubHeaderOnly()">Subheader Only</ion-button>
-      <ion-button id="noHeaders" expand="block" onclick="presentNoHeaders()">No Headers</ion-button>
-      <ion-button id="noMessage" expand="block" onclick="presentNoMessage()">No Message</ion-button>
-      <ion-button id="customAria" expand="block" onclick="presentCustomAria()">Custom Aria</ion-button>
-      <ion-button id="ariaLabelButton" expand="block" onclick="presentAriaLabelButton()">Aria Label Button</ion-button>
-      <ion-button id="checkbox" expand="block" onclick="presentAlertCheckbox()">Checkbox</ion-button>
+      <button id="bothHeaders" onclick="presentBothHeaders()">Both Headers</button>
+      <button id="subHeaderOnly" onclick="presentSubHeaderOnly()">Subheader Only</button>
+      <button id="noHeaders" onclick="presentNoHeaders()">No Headers</button>
+      <button id="noMessage" onclick="presentNoMessage()">No Message</button>
+      <button id="customAria" onclick="presentCustomAria()">Custom Aria</button>
+      <button id="ariaLabelButton" onclick="presentAriaLabelButton()">Aria Label Button</button>
+      <button id="checkbox" onclick="presentAlertCheckbox()">Checkbox</button>
     </main>
 
     <script>
diff --git a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Chrome-linux.png
index 7cf2577e4b7..2285ea18b4c 100644
Binary files a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Firefox-linux.png
index 39ed2f0edf2..e86894999d7 100644
Binary files a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Safari-linux.png
index 18f94a5b09b..c714e3945de 100644
Binary files a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-checkboxes-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Chrome-linux.png
index efffe33a8b4..f0ec572752a 100644
Binary files a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Firefox-linux.png
index 13112f99151..82b2ec4bdbf 100644
Binary files a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Safari-linux.png
index 5e9bad0df0d..01d00fc583d 100644
Binary files a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-radios-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Chrome-linux.png
index c3f47857cbc..afc1a4fe91c 100644
Binary files a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Firefox-linux.png
index 42439073d1a..5bc5f84d8d3 100644
Binary files a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Safari-linux.png
index ca719857cf8..12d59ac5e0b 100644
Binary files a/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert-tablet.e2e.ts-snapshots/alert-tablet-text-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts b/core/src/components/alert/test/basic/alert.e2e.ts
index db6feb1f8b5..eed39b22996 100644
--- a/core/src/components/alert/test/basic/alert.e2e.ts
+++ b/core/src/components/alert/test/basic/alert.e2e.ts
@@ -73,11 +73,6 @@ configs().forEach(({ config, screenshot, title }) => {
       await alertFixture.screenshot('longMessage');
     });
 
-    test('more than two buttons', async () => {
-      await alertFixture.open('#multipleButtons');
-      await alertFixture.screenshot('multipleButtons');
-    });
-
     test('no message', async () => {
       await alertFixture.open('#noMessage');
       await alertFixture.screenshot('noMessage');
@@ -105,6 +100,41 @@ configs().forEach(({ config, screenshot, title }) => {
   });
 });
 
+configs({ themes: ['light', 'dark'] }).forEach(({ config, screenshot, title }) => {
+  test.describe(title('should not have visual regressions'), () => {
+    test('more than two buttons', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-alert
+          header="Alert"
+          sub-header="Subtitle"
+          message="This is an alert message."
+          is-open="true"
+        ></ion-alert>
+
+        <script>
+          const alert = document.querySelector('ion-alert');
+          alert.buttons = [
+            'Open Modal',
+            {
+              text: 'Delete',
+              id: 'delete-button',
+              role: 'destructive',
+            },
+            'Cancel'
+          ];
+        </script>
+      `,
+        config
+      );
+
+      const alert = page.locator('ion-alert');
+
+      await expect(alert).toHaveScreenshot(screenshot(`alert-multipleButtons`));
+    });
+  });
+});
+
 class AlertFixture {
   readonly page: E2EPage;
   readonly screenshotFn?: (file: string) => string;
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-ltr-Mobile-Chrome-linux.png
index 6ab575619d4..e8642e4137f 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-ltr-Mobile-Firefox-linux.png
index 1996a550127..5b79e232640 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-ltr-Mobile-Safari-linux.png
index 4131d17be44..e0f12b509fb 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-rtl-Mobile-Chrome-linux.png
index a41e743d463..b2641c15f82 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-rtl-Mobile-Firefox-linux.png
index a859a1904a1..bc76c8e16ee 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-rtl-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-rtl-Mobile-Safari-linux.png
index 4e86b40692f..a7de5e0e9f0 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-ltr-Mobile-Chrome-linux.png
index 0bdd673e376..1db6442d81b 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-ltr-Mobile-Firefox-linux.png
index bf20b2a5770..fdf35177323 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-ltr-Mobile-Safari-linux.png
index 15b332cf1f6..966835ec89b 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-rtl-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-rtl-Mobile-Chrome-linux.png
index 7a6740c7672..a9f713f12fa 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-rtl-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-rtl-Mobile-Firefox-linux.png
index 9bb50128ff2..e249b02916a 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-rtl-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-rtl-Mobile-Safari-linux.png
index 31ae8248a67..bb6caa019fb 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-rtl-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-basic-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-ltr-Mobile-Chrome-linux.png
index d1cafee4b19..864ac7ba272 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-ltr-Mobile-Firefox-linux.png
index 9cd6002ddb6..cc7563ee7dc 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-ltr-Mobile-Safari-linux.png
index f97cd9c4938..516d758e791 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-rtl-Mobile-Chrome-linux.png
index 4e9f6953b2d..2d5259260f9 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-rtl-Mobile-Firefox-linux.png
index 52f0484ac21..94b51229429 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-rtl-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-rtl-Mobile-Safari-linux.png
index 2e5155140d5..352f4a6f74f 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-ltr-Mobile-Chrome-linux.png
index f4bfd3c7eab..9f689153f27 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-ltr-Mobile-Firefox-linux.png
index 0232c6154be..324aceb6126 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-ltr-Mobile-Safari-linux.png
index 2616a7c4bfa..1f3f24b173e 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-rtl-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-rtl-Mobile-Chrome-linux.png
index b5b8c5bf817..f16d39a270e 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-rtl-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-rtl-Mobile-Firefox-linux.png
index 0b61f67a2a7..df79d7f53c2 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-rtl-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-rtl-Mobile-Safari-linux.png
index 2192a72c5f8..961437be91a 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-rtl-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-checkbox-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-ltr-Mobile-Chrome-linux.png
index 9fd4e168f29..c5655236af2 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-ltr-Mobile-Firefox-linux.png
index 095932554e0..5a31b7dd233 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-ltr-Mobile-Safari-linux.png
index 388c52794fd..b4f20e47d4b 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-rtl-Mobile-Chrome-linux.png
index 6cf7cb059ee..fd99cf47de4 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-rtl-Mobile-Firefox-linux.png
index 73a4c33e593..2ae1a13cb2a 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-rtl-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-rtl-Mobile-Safari-linux.png
index 083d7156ffa..448c8b6c42c 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-ltr-Mobile-Chrome-linux.png
index e7208c91ce0..1077647313d 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-ltr-Mobile-Firefox-linux.png
index bd8b24ba63b..92e3de3e16f 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-ltr-Mobile-Safari-linux.png
index 289a9b47e4f..a6584f0d1c8 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-rtl-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-rtl-Mobile-Chrome-linux.png
index acf8c10d1c3..4e4584d174b 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-rtl-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-rtl-Mobile-Firefox-linux.png
index b2e424d35fb..317abeea242 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-rtl-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-rtl-Mobile-Safari-linux.png
index 0355891a10a..a379fae33fb 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-rtl-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-confirm-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-ltr-Mobile-Chrome-linux.png
index 27c4945f0d1..bb3f4519280 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-ltr-Mobile-Firefox-linux.png
index d8483f52ef6..26680e6b6cb 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-ltr-Mobile-Safari-linux.png
index df370546514..9c84bc5d3cc 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-rtl-Mobile-Chrome-linux.png
index 560468aa0c2..64165549a60 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-rtl-Mobile-Firefox-linux.png
index 7c484c7ed69..449b9d9119b 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-rtl-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-rtl-Mobile-Safari-linux.png
index 0ebdd7211fa..4692e69141e 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-ltr-Mobile-Chrome-linux.png
index 29480750b24..dd1a8da13b8 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-ltr-Mobile-Firefox-linux.png
index b3ca95181cf..78ce414aa26 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-ltr-Mobile-Safari-linux.png
index 7c66a4fd6f6..280701d7e23 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-rtl-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-rtl-Mobile-Chrome-linux.png
index a5ba4596560..6863f0d284b 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-rtl-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-rtl-Mobile-Firefox-linux.png
index 361f06560b5..5820c018d88 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-rtl-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-rtl-Mobile-Safari-linux.png
index 61557dae7c5..1f6dc68dc7f 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-rtl-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-longMessage-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-Mobile-Chrome-linux.png
index a0e3503ca77..45684af5f4c 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-Mobile-Firefox-linux.png
index af2221eff36..6219a8925ae 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-Mobile-Safari-linux.png
index f5653b497c0..7a9e38dbab2 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-dark-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..8dbc29cb243
Binary files /dev/null and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-dark-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..78bee5e0aa1
Binary files /dev/null and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-dark-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-dark-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f803828d4fd
Binary files /dev/null and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-Mobile-Chrome-linux.png
index 9dd4f09f601..5caa71be29c 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-Mobile-Firefox-linux.png
index ac5a802c195..99d5fe1de20 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-Mobile-Safari-linux.png
index ce6dd7d0027..847074ad0a2 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-dark-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..8ada521bffd
Binary files /dev/null and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-dark-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..99e2672bc0a
Binary files /dev/null and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-dark-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-dark-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..33ed2dc0651
Binary files /dev/null and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-Mobile-Chrome-linux.png
index a5c6aef38b4..e11a4b263dd 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-Mobile-Firefox-linux.png
index 1efba781e32..24ecd1c6ac6 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-Mobile-Safari-linux.png
index cefa829eb2a..668c06c03f2 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-dark-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a613e4d78c6
Binary files /dev/null and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-dark-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-dark-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f7f1fdf7603
Binary files /dev/null and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-dark-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-dark-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c12b34ffd66
Binary files /dev/null and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-Mobile-Chrome-linux.png
index 70ad9593ff1..d15382e4393 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-Mobile-Firefox-linux.png
index ade8dc3aead..19b4f8300e8 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-Mobile-Safari-linux.png
index 2265166ae16..725a18a689d 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-dark-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1474decbaf3
Binary files /dev/null and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-dark-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-dark-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..8046b7d9e60
Binary files /dev/null and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-dark-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-dark-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-dark-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..85ae4ac9e44
Binary files /dev/null and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-dark-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-ios-ltr-Mobile-Chrome-linux.png
index 378a22c90e6..4e8022b2ad0 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-ios-ltr-Mobile-Firefox-linux.png
index 7b5a549d716..f00b8083616 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-ios-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-ios-ltr-Mobile-Safari-linux.png
index 709626df99a..4c5d5bb2090 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-ios-rtl-Mobile-Chrome-linux.png
index f7009bbbc38..2dc9913b8a8 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-ios-rtl-Mobile-Firefox-linux.png
index 630ab97e544..9c65eff2609 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-ios-rtl-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-ios-rtl-Mobile-Safari-linux.png
index 67dd59d6571..2f370f86890 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-md-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-md-ltr-Mobile-Chrome-linux.png
index ab2d0fb3d4d..9b281492d93 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-md-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-md-ltr-Mobile-Firefox-linux.png
index d87c6009dc2..9372afa23bf 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-md-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-md-ltr-Mobile-Safari-linux.png
index 85c05b6e878..3c8bf7cfb57 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-md-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-md-rtl-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-md-rtl-Mobile-Chrome-linux.png
index 7fcb10fd88c..4ef0bf232c7 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-md-rtl-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-md-rtl-Mobile-Firefox-linux.png
index 6fdc65d64fa..9b21490013d 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-md-rtl-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-md-rtl-Mobile-Safari-linux.png
index 6e837b1540c..0cc97d39f0a 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-md-rtl-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-noMessage-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-ios-ltr-Mobile-Chrome-linux.png
index 15033e833d6..bae1df67ee4 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-ios-ltr-Mobile-Firefox-linux.png
index 2ff9d707647..b7101fb84de 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-ios-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-ios-ltr-Mobile-Safari-linux.png
index 2e881665491..5989797632d 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-ios-rtl-Mobile-Chrome-linux.png
index e177726f882..0a8aa28cbcb 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-ios-rtl-Mobile-Firefox-linux.png
index 7342e9b3f6a..66b054c9ebf 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-ios-rtl-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-ios-rtl-Mobile-Safari-linux.png
index 013d104a198..99b504644e6 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-ltr-Mobile-Chrome-linux.png
index 9fd64258ab1..6cc048b70d1 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-ltr-Mobile-Firefox-linux.png
index b3624a9dcd5..b8b3d740833 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-ltr-Mobile-Safari-linux.png
index 4f423135a0e..7345a885d21 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-rtl-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-rtl-Mobile-Chrome-linux.png
index 07378b8e075..43229ec81dd 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-rtl-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-rtl-Mobile-Firefox-linux.png
index fc29447a41b..d2e490adc66 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-rtl-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-rtl-Mobile-Safari-linux.png
index 64c39fbfe81..3e47c0de578 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-rtl-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-prompt-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-ltr-Mobile-Chrome-linux.png
index da69c5ce86c..d65f05b8cec 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-ltr-Mobile-Firefox-linux.png
index 97e5cefbd52..b672fb632a0 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-ltr-Mobile-Safari-linux.png
index a060974f07b..51573c6e5e5 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-rtl-Mobile-Chrome-linux.png
index cc370eb2087..4c866bd70c6 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-rtl-Mobile-Firefox-linux.png
index 1c975b1cda3..2b7452f5cec 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-rtl-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-rtl-Mobile-Safari-linux.png
index 77c28bce8e4..04dab9dd5d0 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-ltr-Mobile-Chrome-linux.png
index 4d349059a2e..654f9e32c2b 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-ltr-Mobile-Firefox-linux.png
index a17ba7fdd2e..b8f18e58068 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-ltr-Mobile-Safari-linux.png
index 1560cae2778..ff51b9b6553 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-rtl-Mobile-Chrome-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-rtl-Mobile-Chrome-linux.png
index d0693de5a91..aa3dd13d974 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-rtl-Mobile-Firefox-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-rtl-Mobile-Firefox-linux.png
index 3607ad7aea2..6f49a91e43f 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-rtl-Mobile-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-rtl-Mobile-Safari-linux.png
index e9af281d2d0..15018c2096a 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-rtl-Mobile-Safari-linux.png and b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-radio-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/basic/index.html b/core/src/components/alert/test/basic/index.html
index 01f2500760c..74a6f6c68d2 100644
--- a/core/src/components/alert/test/basic/index.html
+++ b/core/src/components/alert/test/basic/index.html
@@ -28,23 +28,31 @@
       </ion-header>
 
       <ion-content class="ion-padding">
-        <ion-button id="basic" expand="block" onclick="presentAlert()">Alert</ion-button>
-        <ion-button id="longMessage" expand="block" onclick="presentAlertLongMessage()">Alert Long Message</ion-button>
-        <ion-button id="multipleButtons" expand="block" onclick="presentAlertMultipleButtons()"
-          >Multiple Buttons (>2)
-        </ion-button>
-        <ion-button id="noMessage" expand="block" onclick="presentAlertNoMessage()">Alert No Message</ion-button>
-        <ion-button id="asyncHandler" expand="block" onclick="presentAlertAsyncHandler()"
-          >Alert Async Handler</ion-button
-        >
-        <ion-button id="confirm" expand="block" onclick="presentAlertConfirm()">Confirm</ion-button>
-        <ion-button id="prompt" expand="block" onclick="presentAlertPrompt()">Prompt</ion-button>
-        <ion-button id="radio" expand="block" onclick="presentAlertRadio()">Radio</ion-button>
-        <ion-button id="checkbox" expand="block" onclick="presentAlertCheckbox()">Checkbox</ion-button>
-        <ion-button expand="block" onclick="presentWithCssClass()">CssClass</ion-button>
+        <button class="custom-accordion-button" id="basic" onclick="presentAlert()">Alert</button>
+        <button id="longMessage" onclick="presentAlertLongMessage()">Alert Long Message</button>
+        <button id="multipleButtons" onclick="presentAlertMultipleButtons()">Multiple Buttons (>2)</button>
+        <button id="noMessage" onclick="presentAlertNoMessage()">Alert No Message</button>
+        <button id="asyncHandler" onclick="presentAlertAsyncHandler()">Alert Async Handler</button>
+        <button id="confirm" onclick="presentAlertConfirm()">Confirm</button>
+        <button id="prompt" onclick="presentAlertPrompt()">Prompt</button>
+        <button id="radio" onclick="presentAlertRadio()">Radio</button>
+        <button id="checkbox" onclick="presentAlertCheckbox()">Checkbox</button>
+        <button onclick="presentWithCssClass()">CssClass</button>
       </ion-content>
 
       <style>
+        ion-content > button {
+          display: block;
+          clear: both;
+          width: 100%;
+          padding: 12px 8px;
+          font-size: 1em;
+          background: #f8f8f8;
+          border: 1px solid #eee;
+          border-radius: 4px;
+          margin-bottom: 8px;
+        }
+
         .my-custom-class {
           --background: lightblue;
           --min-width: 0;
diff --git a/core/src/components/alert/test/is-open/index.html b/core/src/components/alert/test/is-open/index.html
index ae628cf2901..7c2140783fa 100644
--- a/core/src/components/alert/test/is-open/index.html
+++ b/core/src/components/alert/test/is-open/index.html
@@ -11,6 +11,19 @@
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      ion-content > button {
+        display: block;
+        clear: both;
+        width: 100%;
+        padding: 12px 8px;
+        font-size: 1em;
+        background: #f8f8f8;
+        border: 1px solid #eee;
+        border-radius: 4px;
+        margin-bottom: 8px;
+      }
+    </style>
   </head>
 
   <body>
@@ -22,8 +35,8 @@
       </ion-header>
 
       <ion-content class="ion-padding">
-        <ion-button id="default" onclick="openAlert()">Open Alert</ion-button>
-        <ion-button id="timeout" onclick="openAlert(500)">Open Alert, Close After 500ms</ion-button>
+        <button id="default" onclick="openAlert()">Open Alert</button>
+        <button id="timeout" onclick="openAlert(500)">Open Alert, Close After 500ms</button>
 
         <ion-alert header="Alert" message="Hello World!"></ion-alert>
       </ion-content>
diff --git a/core/src/components/alert/test/translucent/index.html b/core/src/components/alert/test/translucent/index.html
index d1c0f58c10f..2dbeada6149 100644
--- a/core/src/components/alert/test/translucent/index.html
+++ b/core/src/components/alert/test/translucent/index.html
@@ -27,12 +27,10 @@
       </ion-header>
 
       <ion-content class="ion-padding">
-        <ion-button expand="block" onclick="presentAlert()">Alert</ion-button>
-        <ion-button expand="block" color="secondary" onclick="presentAlertLongMessage()">Alert Long Message</ion-button>
-        <ion-button expand="block" color="danger" onclick="presentAlertMultipleButtons()"
-          >Multiple Buttons (>2)</ion-button
-        >
-        <ion-button expand="block" color="light" onclick="presentAlertNoMessage()">Alert No Message</ion-button>
+        <button class="blue" onclick="presentAlert()">Alert</button>
+        <button class="light-blue" onclick="presentAlertLongMessage()">Alert Long Message</button>
+        <button class="red" onclick="presentAlertMultipleButtons()">Multiple Buttons (>2)</button>
+        <button class="light" onclick="presentAlertNoMessage()">Alert No Message</button>
 
         <ion-grid>
           <ion-row>
@@ -48,10 +46,10 @@
           </ion-row>
         </ion-grid>
 
-        <ion-button expand="block" color="dark" onclick="presentAlertConfirm()">Confirm</ion-button>
-        <ion-button expand="block" color="primary" onclick="presentAlertPrompt()">Prompt</ion-button>
-        <ion-button expand="block" color="secondary" onclick="presentAlertRadio()">Radio</ion-button>
-        <ion-button expand="block" color="danger" onclick="presentAlertCheckbox()">Checkbox</ion-button>
+        <button class="black" onclick="presentAlertConfirm()">Confirm</button>
+        <button class="blue" onclick="presentAlertPrompt()">Prompt</button>
+        <button class="light-blue" onclick="presentAlertRadio()">Radio</button>
+        <button class="red" onclick="presentAlertCheckbox()">Checkbox</button>
       </ion-content>
     </ion-app>
 
@@ -305,6 +303,19 @@
     </script>
 
     <style>
+      ion-content > button {
+        display: block;
+        clear: both;
+        width: 100%;
+        padding: 12px 8px;
+        font-size: 1em;
+        background: #f8f8f8;
+        border: 1px solid #eee;
+        border-radius: 4px;
+        margin-bottom: 8px;
+        color: #fff;
+      }
+
       f {
         display: block;
         width: 100%;
@@ -323,6 +334,10 @@
         background-color: #3478f6;
       }
 
+      .light-blue {
+        background-color: #6bbef6;
+      }
+
       .yellow {
         background-color: #ffff80;
       }
@@ -346,6 +361,14 @@
       .orange {
         background-color: #f69234;
       }
+
+      .black {
+        background-color: #000;
+      }
+
+      .light {
+        color: #000;
+      }
     </style>
   </body>
 </html>
diff --git a/core/src/components/alert/test/trigger/index.html b/core/src/components/alert/test/trigger/index.html
index 233b05fc936..f3a11ef91c1 100644
--- a/core/src/components/alert/test/trigger/index.html
+++ b/core/src/components/alert/test/trigger/index.html
@@ -11,6 +11,19 @@
     <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+    <style>
+      ion-content > button {
+        display: block;
+        clear: both;
+        width: 100%;
+        padding: 12px 8px;
+        font-size: 1em;
+        background: #f8f8f8;
+        border: 1px solid #eee;
+        border-radius: 4px;
+        margin-bottom: 8px;
+      }
+    </style>
   </head>
 
   <body>
@@ -22,8 +35,8 @@
       </ion-header>
 
       <ion-content class="ion-padding">
-        <ion-button id="default">Open Alert</ion-button>
-        <ion-button id="timeout">Open Alert, Close After 500ms</ion-button>
+        <button id="default">Open Alert</button>
+        <button id="timeout">Open Alert, Close After 500ms</button>
 
         <ion-alert id="default-alert" trigger="default" header="Alert" message="Hello World!"></ion-alert>
         <ion-alert id="timeout-alert" trigger="timeout" header="Alert" message="Hello World!"></ion-alert>
diff --git a/core/src/components/button/test/basic/button.e2e.ts b/core/src/components/button/test/basic/button.e2e.ts
index 2480c2fb2f0..51635161b09 100644
--- a/core/src/components/button/test/basic/button.e2e.ts
+++ b/core/src/components/button/test/basic/button.e2e.ts
@@ -57,7 +57,7 @@ configs({ modes: ['md'] }).forEach(({ config, screenshot, title }) => {
         await page.mouse.down();
       }
 
-      await page.waitForSelector('#default.ion-activated');
+      await page.locator('#default.ion-activated').waitFor();
 
       await expect(button).toHaveScreenshot(screenshot(`button-ripple-effect`));
     });
diff --git a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-ios-ltr-Mobile-Firefox-linux.png
index d374cb54e10..4df0af8873d 100644
Binary files a/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/button/test/wrap/button.e2e.ts-snapshots/button-wrap-item-button-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime-button/test/basic/datetime-button.e2e.ts b/core/src/components/datetime-button/test/basic/datetime-button.e2e.ts
index b52ff42462c..938ce976e54 100644
--- a/core/src/components/datetime-button/test/basic/datetime-button.e2e.ts
+++ b/core/src/components/datetime-button/test/basic/datetime-button.e2e.ts
@@ -15,7 +15,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
     });
     test('should switch to a date-only view when the date button is clicked', async ({ page }) => {
       const datetime = page.locator('ion-datetime');
@@ -45,7 +45,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       await expect(page.locator('#date-button')).toContainText('Jan 1, 2022');
       await expect(page.locator('#time-button')).toContainText('6:30 AM');
@@ -58,7 +58,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       await expect(page.locator('#date-button')).toContainText('January 2022');
       await expect(page.locator('#time-button')).toBeHidden();
@@ -71,7 +71,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       await expect(page.locator('#date-button')).toContainText('2022');
       await expect(page.locator('#time-button')).toBeHidden();
@@ -84,7 +84,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       await expect(page.locator('#date-button')).toContainText('January');
       await expect(page.locator('#time-button')).toBeHidden();
@@ -97,7 +97,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       await expect(page.locator('#time-button')).toContainText('6:30 AM');
       await expect(page.locator('#date-button')).toBeHidden();
@@ -110,7 +110,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const datetime = page.locator('ion-datetime');
       const dateTarget = page.locator('#date-button');
@@ -135,7 +135,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       await expect(page.locator('#date-button')).toContainText('January 2022');
       await expect(page.locator('#time-button')).toBeHidden();
@@ -153,7 +153,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       await expect(page.locator('#date-button')).toContainText('2022');
       await expect(page.locator('#time-button')).toBeHidden();
@@ -169,7 +169,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       /**
        * The entire text reads 1 ene 2022, but some browsers will add
@@ -187,7 +187,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       await expect(page.locator('#time-button')).toContainText('16:30');
     });
@@ -199,7 +199,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const timeTarget = page.locator('#time-button');
       await expect(timeTarget).toContainText('6:30');
@@ -223,7 +223,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       await expect(page.locator('#date-button')).toContainText('Jan 1, 2022 6:30 AM');
       await expect(page.locator('#time-button')).not.toBeVisible();
@@ -238,7 +238,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       await expect(page.locator('#date-button')).toContainText('Jan 1, 2022 6:30 AM');
       await expect(page.locator('#time-button')).not.toBeVisible();
diff --git a/core/src/components/datetime-button/test/buttons/index.html b/core/src/components/datetime-button/test/buttons/index.html
index 2b6f1f7bcc3..ca484632b95 100644
--- a/core/src/components/datetime-button/test/buttons/index.html
+++ b/core/src/components/datetime-button/test/buttons/index.html
@@ -18,7 +18,7 @@
       </ion-header>
       <ion-content>
         <ion-item>
-          <ion-input value="March 15, 2022 at 12:43 AM"></ion-input>
+          <ion-input aria-label="input" value="March 15, 2022 at 12:43 AM"></ion-input>
           <ion-datetime-button slot="end" id="default-button" datetime="default-datetime">
             <ion-icon color="primary" id="custom-date-button" slot="date-target" name="calendar"></ion-icon>
             <ion-icon color="primary" id="custom-time-button" slot="time-target" name="time"></ion-icon>
diff --git a/core/src/components/datetime-button/test/disabled/datetime-button.e2e.ts b/core/src/components/datetime-button/test/disabled/datetime-button.e2e.ts
index 23ef52821f2..f8f45fd49c4 100644
--- a/core/src/components/datetime-button/test/disabled/datetime-button.e2e.ts
+++ b/core/src/components/datetime-button/test/disabled/datetime-button.e2e.ts
@@ -11,7 +11,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       await expect(page.locator('#date-button')).toBeDisabled();
       await expect(page.locator('#time-button')).toBeDisabled();
@@ -24,7 +24,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const datetimeButton = page.locator('ion-datetime-button');
       await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-disabled`));
diff --git a/core/src/components/datetime-button/test/multiple/datetime-button.e2e.ts b/core/src/components/datetime-button/test/multiple/datetime-button.e2e.ts
index 901ddc74be3..598124b1b00 100644
--- a/core/src/components/datetime-button/test/multiple/datetime-button.e2e.ts
+++ b/core/src/components/datetime-button/test/multiple/datetime-button.e2e.ts
@@ -20,7 +20,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       await expect(page.locator('#date-button')).toContainText('3 days');
     });
@@ -32,7 +32,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       await expect(page.locator('#date-button')).toHaveText('0 days');
     });
@@ -49,7 +49,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       await expect(page.locator('#date-button')).toHaveText('Jun 1, 2022');
     });
@@ -69,7 +69,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       await expect(page.locator('#date-button')).toHaveText('Selected: 3');
     });
@@ -86,7 +86,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const datetime = page.locator('ion-datetime');
       const ionValueChange = await page.spyOnEvent('ionValueChange');
@@ -111,7 +111,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       await expect(page.locator('#date-button')).toHaveText('Jun 1, 2022');
       await expect(page.locator('#time-button')).toHaveText('4:30 PM');
diff --git a/core/src/components/datetime/datetime.ios.scss b/core/src/components/datetime/datetime.ios.scss
index 145053d2f70..5f9aa2d040f 100644
--- a/core/src/components/datetime/datetime.ios.scss
+++ b/core/src/components/datetime/datetime.ios.scss
@@ -249,9 +249,11 @@
 
 /**
  * Day that is selected and is today
- * should have white color.
+ * should have base background color
+ * with contrast text.
  */
 :host .calendar-day.calendar-day-today.calendar-day-active {
+  background: current-color(base);
   color: current-color(contrast);
 }
 
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index bffcc8942cb..57f275e25f0 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -341,6 +341,9 @@ export class Datetime implements ComponentInterface {
    * dates are selected. Only used if there are 0 or more than 1
    * selected (i.e. unused for exactly 1). By default, the header
    * text is set to "numberOfDates days".
+   *
+   * See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
+   * if you need to access `this` from within the callback.
    */
   @Prop() titleSelectedDatesFormatter?: TitleSelectedDatesFormatter;
 
@@ -1281,21 +1284,42 @@ export class Datetime implements ComponentInterface {
       (month !== undefined && month !== workingParts.month) || (year !== undefined && year !== workingParts.year);
     const bodyIsVisible = el.classList.contains('datetime-ready');
     const { isGridStyle, showMonthAndYear } = this;
-    if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
-      this.animateToDate(targetValue);
-    } else {
-      /**
-       * We only need to do this if we didn't just animate to a new month,
-       * since that calls prevMonth/nextMonth which calls setWorkingParts for us.
-       */
-      this.setWorkingParts({
-        month,
-        day,
-        year,
-        hour,
-        minute,
-        ampm,
-      });
+
+    let areAllSelectedDatesInSameMonth = true;
+    if (Array.isArray(valueToProcess)) {
+      const firstMonth = valueToProcess[0].month;
+      for (const date of valueToProcess) {
+        if (date.month !== firstMonth) {
+          areAllSelectedDatesInSameMonth = false;
+          break;
+        }
+      }
+    }
+
+    /**
+     * If there is more than one date selected
+     * and the dates aren't all in the same month,
+     * then we should neither animate to the date
+     * nor update the working parts because we do
+     * not know which date the user wants to view.
+     */
+    if (areAllSelectedDatesInSameMonth) {
+      if (isGridStyle && didChangeMonth && bodyIsVisible && !showMonthAndYear) {
+        this.animateToDate(targetValue);
+      } else {
+        /**
+         * We only need to do this if we didn't just animate to a new month,
+         * since that calls prevMonth/nextMonth which calls setWorkingParts for us.
+         */
+        this.setWorkingParts({
+          month,
+          day,
+          year,
+          hour,
+          minute,
+          ampm,
+        });
+      }
     }
   };
 
diff --git a/core/src/components/datetime/test/a11y/datetime.e2e.ts b/core/src/components/datetime/test/a11y/datetime.e2e.ts
index 5f4e5ff9e3f..05b10b5e8a3 100644
--- a/core/src/components/datetime/test/a11y/datetime.e2e.ts
+++ b/core/src/components/datetime/test/a11y/datetime.e2e.ts
@@ -24,7 +24,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
 
       const container = page.locator('#container');
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       await expect(container).toHaveScreenshot(screenshot(`datetime-scale`));
     });
@@ -87,7 +87,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         config
       );
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const clearButton = page.locator('#clear-button button');
       const selectedDay = page.locator('.calendar-day-active');
@@ -114,7 +114,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         config
       );
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
       const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
       const calendarBody = page.locator('.calendar-body');
       await expect(calendarMonthYear).toHaveText('February 2022');
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts
index c0ef49adf64..48b0b0ceec0 100644
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts
@@ -110,7 +110,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         config
       );
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
       const datetime = page.locator('ion-datetime');
       const ionChange = await page.spyOnEvent('ionChange');
 
@@ -255,7 +255,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         config
       );
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const calendarBody = page.locator('ion-datetime .calendar-body');
       const calendarHeader = page.locator('ion-datetime .calendar-month-year');
@@ -275,7 +275,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         config
       );
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const calendarBody = page.locator('ion-datetime .calendar-body');
       const calendarHeader = page.locator('ion-datetime .calendar-month-year');
@@ -297,7 +297,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         config
       );
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const calendarBody = page.locator('ion-datetime .calendar-body');
       const calendarHeader = page.locator('ion-datetime .calendar-month-year');
@@ -331,7 +331,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         config
       );
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const monthYearButton = page.locator('ion-datetime .calendar-month-year');
       const monthYearInterface = page.locator('ion-datetime .datetime-year');
@@ -349,7 +349,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await datetime.evaluate((el: HTMLIonDatetimeElement) => el.style.removeProperty('display'));
       await expect(datetime).toBeVisible();
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       // month/year interface should be reset
       await expect(monthYearInterface).toBeHidden();
@@ -399,7 +399,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         config
       );
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const selectedDay = page.locator('ion-datetime .calendar-day-active');
 
@@ -428,7 +428,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         config
       );
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const ionChange = await page.spyOnEvent('ionChange');
       const calendarButtons = page.locator('.calendar-day:not([disabled])');
@@ -447,7 +447,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         config
       );
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const ionChange = await page.spyOnEvent('ionChange');
       const datetime = page.locator('ion-datetime');
@@ -458,6 +458,44 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
   });
 });
 
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('datetime: today button rendering'), () => {
+    test('should render today button correctly when selected', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'FW-5808',
+      });
+      await page.setContent(
+        `
+        <ion-datetime presentation="date" value="2022-01-02"></ion-datetime>
+
+        <script>
+          const mockToday = '2022-01-02T16:22';
+          Date = class extends Date {
+            constructor(...args) {
+              if (args.length === 0) {
+                super(mockToday)
+              } else {
+                super(...args);
+              }
+            }
+          }
+        </script>
+      `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+
+      await page.locator('.datetime-ready').waitFor();
+
+      await expect(datetime.locator('.calendar-day-today')).toHaveScreenshot(
+        screenshot(`datetime-today-calendar-button`)
+      );
+    });
+  });
+});
+
 /**
  * The calendar day highlight does not render
  * on iOS and has the same behavior across directions.
@@ -479,7 +517,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
 
       const datetime = page.locator('ion-datetime');
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       await expect(datetime).toHaveScreenshot(screenshot(`date-highlight-start-of-month`));
 
@@ -505,7 +543,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         config
       );
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const datetime = page.locator('ion-datetime');
 
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..bcca67fe4f5
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..840fd08af40
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-ios-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ac81896e592
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-md-ltr-Mobile-Chrome-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e561bd4d5a8
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-md-ltr-Mobile-Firefox-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a4af82c2832
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-md-ltr-Mobile-Safari-linux.png b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..8e536c6cf0c
Binary files /dev/null and b/core/src/components/datetime/test/basic/datetime.e2e.ts-snapshots/datetime-today-calendar-button-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/datetime/test/basic/index.html b/core/src/components/datetime/test/basic/index.html
index 153c85688a7..2023b4a1190 100644
--- a/core/src/components/datetime/test/basic/index.html
+++ b/core/src/components/datetime/test/basic/index.html
@@ -214,8 +214,7 @@
           <ion-popover class="options-popover" trigger="popover-trigger">
             <ion-list lines="none">
               <ion-item>
-                <ion-label>Dark Mode</ion-label>
-                <ion-checkbox slot="end"></ion-checkbox>
+                <ion-checkbox>Dark Mode</ion-checkbox>
               </ion-item>
               <ion-item detail="true" href="?ionic:mode=ios">
                 <ion-label>iOS Mode</ion-label>
@@ -225,23 +224,19 @@
               </ion-item>
 
               <ion-item>
-                <ion-label>Show Default Title</ion-label>
-                <ion-toggle id="titleToggle"></ion-toggle>
+                <ion-toggle id="titleToggle">Show Default Title</ion-toggle>
               </ion-item>
 
               <ion-item>
-                <ion-label>Show Default Buttons</ion-label>
-                <ion-toggle id="buttonsToggle"></ion-toggle>
+                <ion-toggle id="buttonsToggle">Show Default Buttons</ion-toggle>
               </ion-item>
 
               <ion-item>
-                <ion-label>Locale</ion-label>
-                <ion-input placeholder="default" id="locale"></ion-input>
+                <ion-input label="Locale" placeholder="default" id="locale"></ion-input>
               </ion-item>
 
               <ion-item>
-                <ion-label>Color</ion-label>
-                <ion-select id="color" value="primary">
+                <ion-select label="Color" id="color" value="primary">
                   <ion-select-option value="primary">Primary</ion-select-option>
                   <ion-select-option value="secondary">Secondary</ion-select-option>
                   <ion-select-option value="tertiary">Tertiary</ion-select-option>
diff --git a/core/src/components/datetime/test/datetime.e2e.ts b/core/src/components/datetime/test/datetime.e2e.ts
index f6ac137d710..a7653597b19 100644
--- a/core/src/components/datetime/test/datetime.e2e.ts
+++ b/core/src/components/datetime/test/datetime.e2e.ts
@@ -11,7 +11,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         config
       );
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
     });
 
     test('should switch the calendar header when moving to a month with a different number of days', async ({
diff --git a/core/src/components/datetime/test/disable-dates/datetime.e2e.ts b/core/src/components/datetime/test/disable-dates/datetime.e2e.ts
index 6ae7c54ea9a..3fc4b882186 100644
--- a/core/src/components/datetime/test/disable-dates/datetime.e2e.ts
+++ b/core/src/components/datetime/test/disable-dates/datetime.e2e.ts
@@ -113,7 +113,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
     test.describe('check example usages', () => {
       test.beforeEach(async ({ page }) => {
         await page.goto('/src/components/datetime/test/disable-dates', config);
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').first().waitFor();
       });
 
       test('should disable a specific date', async ({ page }) => {
diff --git a/core/src/components/datetime/test/disabled/datetime.e2e.ts b/core/src/components/datetime/test/disabled/datetime.e2e.ts
index d794a2d2ef6..91b48b736cf 100644
--- a/core/src/components/datetime/test/disabled/datetime.e2e.ts
+++ b/core/src/components/datetime/test/disabled/datetime.e2e.ts
@@ -27,7 +27,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
         config
       );
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`);
 
@@ -42,7 +42,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
         config
       );
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
       const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
       await expect(calendarMonthYear.locator('button')).toBeDisabled();
     });
@@ -71,7 +71,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
         config
       );
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const clearButton = page.locator('#clear-button button');
 
@@ -86,7 +86,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
         config
       );
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
       const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
       const calendarBody = page.locator('.calendar-body');
       await expect(calendarMonthYear).toHaveText('February 2022');
diff --git a/core/src/components/datetime/test/display/datetime.e2e.ts b/core/src/components/datetime/test/display/datetime.e2e.ts
index 0fcb9db898f..501bdfeeab0 100644
--- a/core/src/components/datetime/test/display/datetime.e2e.ts
+++ b/core/src/components/datetime/test/display/datetime.e2e.ts
@@ -15,7 +15,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         `,
           config
         );
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
         const datetime = page.locator('ion-datetime');
         await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-date-time`));
       });
@@ -26,7 +26,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         `,
           config
         );
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
         const datetime = page.locator('ion-datetime');
         await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-time-date`));
       });
@@ -37,7 +37,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         `,
           config
         );
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
         const datetime = page.locator('ion-datetime');
         await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-time`));
       });
@@ -48,7 +48,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         `,
           config
         );
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
         const datetime = page.locator('ion-datetime');
         await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-date`));
       });
@@ -69,7 +69,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         `,
           config
         );
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
         const datetime = page.locator('ion-datetime');
         await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-date-time`));
       });
@@ -80,7 +80,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         `,
           config
         );
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
         const datetime = page.locator('ion-datetime');
         await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-time-date`));
       });
@@ -91,7 +91,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         `,
           config
         );
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
         const datetime = page.locator('ion-datetime');
         await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-time`));
       });
@@ -102,7 +102,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         `,
           config
         );
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
         const datetime = page.locator('ion-datetime');
         await expect(datetime).toHaveScreenshot(screenshot(`datetime-display-cover-date`));
       });
@@ -119,7 +119,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     test('month selection should work after changing presentation', async ({ page }) => {
       await page.goto('/src/components/datetime/test/display', config);
       const ionWorkingPartsDidChange = await page.spyOnEvent('ionWorkingPartsDidChange');
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const select = page.locator('select#presentation');
 
diff --git a/core/src/components/datetime/test/locale/datetime.e2e.ts b/core/src/components/datetime/test/locale/datetime.e2e.ts
index fba13a4137c..37d992d730b 100644
--- a/core/src/components/datetime/test/locale/datetime.e2e.ts
+++ b/core/src/components/datetime/test/locale/datetime.e2e.ts
@@ -95,7 +95,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         config
       );
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const datetimeButtons = page.locator('ion-datetime .calendar-day:not([disabled])');
 
@@ -111,7 +111,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const datetimeYear = page.locator('ion-datetime .year-column .picker-item[data-value="2022"]');
 
@@ -147,7 +147,7 @@ class DatetimeLocaleFixture {
 
     this.datetime = this.page.locator('ion-datetime');
 
-    await this.page.waitForSelector('.datetime-ready');
+    await this.page.locator('.datetime-ready').waitFor();
   }
 
   async expectLocalizedDatePicker(screenshot: ScreenshotFn) {
diff --git a/core/src/components/datetime/test/minmax/datetime.e2e.ts b/core/src/components/datetime/test/minmax/datetime.e2e.ts
index ae25f71f492..4f6aa033a5b 100644
--- a/core/src/components/datetime/test/minmax/datetime.e2e.ts
+++ b/core/src/components/datetime/test/minmax/datetime.e2e.ts
@@ -36,7 +36,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
         config
       );
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const prevButton = page.locator('ion-datetime .calendar-next-prev ion-button:nth-child(1)');
       const nextButton = page.locator('ion-datetime .calendar-next-prev ion-button:nth-child(2)');
@@ -61,7 +61,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
       await page.goto('/src/components/datetime/test/minmax', config);
       const calendarMonths = page.locator('ion-datetime#inside .calendar-month');
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').first().waitFor();
 
       await expect(calendarMonths.nth(0)).not.toHaveClass(/calendar-month-disabled/);
       await expect(calendarMonths.nth(1)).not.toHaveClass(/calendar-month-disabled/);
@@ -70,7 +70,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
 
     test('datetime: minmax navigation disabled', async ({ page }) => {
       await page.goto('/src/components/datetime/test/minmax', config);
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').first().waitFor();
 
       const navButtons = page.locator('ion-datetime#outside .calendar-next-prev ion-button');
 
@@ -80,7 +80,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
 
     test('datetime: min including day should not disable month', async ({ page }) => {
       await page.goto('/src/components/datetime/test/minmax', config);
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').first().waitFor();
 
       const calendarMonths = page.locator('ion-datetime#min-with-day .calendar-month');
 
@@ -102,7 +102,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const ionPopoverDidPresent = await page.spyOnEvent('ionPopoverDidPresent');
 
@@ -124,7 +124,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
     test.describe('setting value outside bounds should show in-bounds month', () => {
       const testDisplayedMonth = async (page: E2EPage, content: string, expectedString = /June 2021/) => {
         await page.setContent(content, config);
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
         await expect(calendarMonthYear).toHaveText(expectedString);
@@ -174,7 +174,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const datetimeMonthDidChange = await page.spyOnEvent('datetimeMonthDidChange');
       const eventButton = page.locator('button#bind');
@@ -260,7 +260,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const datetime = page.locator('ion-datetime');
         const ionChange = await page.spyOnEvent('ionChange');
@@ -283,7 +283,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const datetime = page.locator('ion-datetime');
         const ionChange = await page.spyOnEvent('ionChange');
@@ -311,7 +311,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
         const monthColumnItems = page.locator('ion-datetime .month-column .picker-item:not(.picker-item-empty)');
         const ionChange = await page.spyOnEvent('ionChange');
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         await monthColumnItems.nth(0).click(); // switch to January
         await ionChange.next();
@@ -346,7 +346,7 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
         `,
           config
         );
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         // Select Jan 10, 2022
         const maxDate = page.locator('ion-datetime .calendar-day[data-day="10"][data-month="1"][data-year="2022"]');
diff --git a/core/src/components/datetime/test/month-year-picker/datetime.e2e.ts b/core/src/components/datetime/test/month-year-picker/datetime.e2e.ts
index 9b421777239..beda3e664b5 100644
--- a/core/src/components/datetime/test/month-year-picker/datetime.e2e.ts
+++ b/core/src/components/datetime/test/month-year-picker/datetime.e2e.ts
@@ -8,7 +8,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
   test.describe(title('datetime: month-year picker'), () => {
     test.beforeEach(async ({ page }) => {
       await page.goto('/src/components/datetime/test/month-year-picker', config);
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').first().waitFor();
     });
 
     test('should hide the footer when picker is open', async ({ page }) => {
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts b/core/src/components/datetime/test/multiple/datetime.e2e.ts
index 7a353a4ed33..0e2c0efb381 100644
--- a/core/src/components/datetime/test/multiple/datetime.e2e.ts
+++ b/core/src/components/datetime/test/multiple/datetime.e2e.ts
@@ -5,7 +5,7 @@ import { configs, test } from '@utils/test/playwright';
 
 const SINGLE_DATE = '2022-06-01';
 const MULTIPLE_DATES = ['2022-06-01', '2022-06-02', '2022-06-03'];
-const MULTIPLE_DATES_SEPARATE_MONTHS = ['2022-04-01', '2022-05-01', '2022-06-01'];
+const MULTIPLE_DATES_SEPARATE_MONTHS = ['2022-03-01', '2022-04-01', '2022-05-01'];
 
 interface DatetimeMultipleConfig {
   multiple?: boolean;
@@ -62,7 +62,7 @@ class DatetimeMultipleFixture {
     );
 
     this.datetime = this.page.locator('ion-datetime');
-    await this.page.waitForSelector('.datetime-ready');
+    await this.page.locator('.datetime-ready').waitFor();
 
     return this.datetime;
   }
@@ -158,10 +158,32 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       });
     });
 
-    test('multiple default values across months should display at least one value', async () => {
+    test('should scroll to new month when value is updated with multiple dates in the same month', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/28602',
+      });
       const datetime = await datetimeFixture.goto(config, MULTIPLE_DATES_SEPARATE_MONTHS);
+      await datetime.evaluate((el: HTMLIonDatetimeElement, dates: string[]) => {
+        el.value = dates;
+      }, MULTIPLE_DATES);
+
+      await page.waitForChanges();
+
+      const monthYear = datetime.locator('.calendar-month-year');
+      await expect(monthYear).toHaveText(/June 2022/);
+    });
+
+    test('should not scroll to new month when value is updated with dates in different months', async ({ page }) => {
+      const datetime = await datetimeFixture.goto(config, MULTIPLE_DATES);
+      await datetime.evaluate((el: HTMLIonDatetimeElement, dates: string[]) => {
+        el.value = dates;
+      }, MULTIPLE_DATES_SEPARATE_MONTHS);
+
+      await page.waitForChanges();
+
       const monthYear = datetime.locator('.calendar-month-year');
-      await expect(monthYear).toHaveText(/April 2022/);
+      await expect(monthYear).toHaveText(/June 2022/);
     });
 
     test('with buttons, should only update value when confirm is called', async ({ page }) => {
@@ -282,7 +304,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       `,
         config
       );
-      await page.waitForSelector(`.datetime-ready`);
+      await page.locator(`.datetime-ready`).waitFor();
       const datetime = page.locator('ion-datetime');
       const header = datetime.locator('.datetime-selected-date');
 
diff --git a/core/src/components/datetime/test/position/datetime.e2e.ts b/core/src/components/datetime/test/position/datetime.e2e.ts
index f2f705c3075..c817e3c6d0b 100644
--- a/core/src/components/datetime/test/position/datetime.e2e.ts
+++ b/core/src/components/datetime/test/position/datetime.e2e.ts
@@ -11,7 +11,7 @@ configs().forEach(({ title, screenshot, config }) => {
       await openDateTimeBtn.click();
 
       await ionPopoverDidPresent.next();
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       await expect(page).toHaveScreenshot(screenshot(`datetime-position-base`));
 
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 f00c313889b..f90337e870c 100644
--- a/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts
+++ b/core/src/components/datetime/test/prefer-wheel/datetime.e2e.ts
@@ -23,7 +23,7 @@ configs().forEach(({ title, screenshot, config }) => {
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       await expect(page).toHaveScreenshot(screenshot(`datetime-wheel-date-diff`));
     });
@@ -34,7 +34,7 @@ configs().forEach(({ title, screenshot, config }) => {
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       await expect(page).toHaveScreenshot(screenshot(`datetime-wheel-date-time-diff`));
     });
@@ -45,7 +45,7 @@ configs().forEach(({ title, screenshot, config }) => {
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       await expect(page).toHaveScreenshot(screenshot(`datetime-wheel-time-date-diff`));
     });
@@ -56,7 +56,7 @@ configs().forEach(({ title, screenshot, config }) => {
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const datetime = page.locator('ion-datetime');
 
@@ -80,7 +80,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const dayValues = page.locator('ion-datetime .day-column .picker-item[data-value]');
         expect(await dayValues.count()).toEqual(27);
@@ -93,7 +93,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const dayValues = page.locator('ion-datetime .day-column .picker-item[data-value]');
         expect(await dayValues.count()).toEqual(1);
@@ -116,7 +116,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const disabledMonths = page.locator('.month-column .picker-item[disabled]');
         const disabledYears = page.locator('.year-column .picker-item[disabled]');
@@ -141,7 +141,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
         const yearValues = page.locator('.year-column .picker-item:not(.picker-item-empty)');
@@ -175,7 +175,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const ionChange = await page.spyOnEvent('ionChange');
         const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
@@ -209,7 +209,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const ionChange = await page.spyOnEvent('ionChange');
         const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
@@ -230,7 +230,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const ionChange = await page.spyOnEvent('ionChange');
         const yearValues = page.locator('.year-column .picker-item:not(.picker-item-empty)');
@@ -253,7 +253,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
         const datetime = page.locator('ion-datetime');
 
         await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-05-25T12:40:00.000Z'));
@@ -285,7 +285,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             config
           );
 
-          await page.waitForSelector('.datetime-ready');
+          await page.locator('.datetime-ready').waitFor();
 
           const monthValues = page.locator('.month-column .picker-item:not(.picker-item-empty)');
           const dayValues = page.locator('.day-column .picker-item:not(.picker-item-empty)');
@@ -306,7 +306,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             config
           );
 
-          await page.waitForSelector('.datetime-ready');
+          await page.locator('.datetime-ready').waitFor();
 
           const columns = page.locator('ion-picker-column-internal');
 
@@ -327,7 +327,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             config
           );
 
-          await page.waitForSelector('.datetime-ready');
+          await page.locator('.datetime-ready').waitFor();
 
           const columns = page.locator('ion-picker-column-internal');
 
@@ -346,7 +346,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
         expect(await dayValues.count()).toEqual(57);
@@ -359,7 +359,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
         expect(await dayValues.count()).toEqual(41);
@@ -382,7 +382,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const disabledDates = page.locator('.date-column .picker-item[disabled]');
 
@@ -403,7 +403,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
 
@@ -424,7 +424,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
 
@@ -444,7 +444,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const dateColumn = page.locator('.date-column');
         const dateValues = dateColumn.locator('.picker-item:not(.picker-item-empty)');
@@ -474,7 +474,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
 
@@ -494,7 +494,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
 
@@ -511,7 +511,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const ionChange = await page.spyOnEvent('ionChange');
         const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
@@ -531,7 +531,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
         expect(await dayValues.count()).toEqual(57);
@@ -544,7 +544,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const dayValues = page.locator('ion-datetime .date-column .picker-item[data-value]');
         expect(await dayValues.count()).toEqual(41);
@@ -567,7 +567,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const disabledDates = page.locator('.date-column .picker-item[disabled]');
 
@@ -588,7 +588,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
 
@@ -609,7 +609,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const dateValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
 
@@ -629,7 +629,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const dateColumn = page.locator('.date-column');
         const dateValues = dateColumn.locator('.picker-item:not(.picker-item-empty)');
@@ -659,7 +659,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
 
@@ -679,7 +679,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
           config
         );
 
-        await page.waitForSelector('.datetime-ready');
+        await page.locator('.datetime-ready').waitFor();
 
         const dayValues = page.locator('.date-column .picker-item:not(.picker-item-empty)');
 
diff --git a/core/src/components/datetime/test/presentation/datetime.e2e.ts b/core/src/components/datetime/test/presentation/datetime.e2e.ts
index 7bff588cab4..af0055a8142 100644
--- a/core/src/components/datetime/test/presentation/datetime.e2e.ts
+++ b/core/src/components/datetime/test/presentation/datetime.e2e.ts
@@ -117,7 +117,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         config
       );
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const datetime = page.locator('ion-datetime');
       const monthYearButton = page.locator('ion-datetime .calendar-month-year');
@@ -189,7 +189,7 @@ class DatetimePresentationFixture {
     `,
       config
     );
-    await this.page.waitForSelector('.datetime-ready');
+    await this.page.locator('.datetime-ready').waitFor();
     this.datetime = this.page.locator('ion-datetime');
   }
 
@@ -214,7 +214,7 @@ class TimePickerFixture {
     `,
       config
     );
-    await this.page.waitForSelector('.datetime-ready');
+    await this.page.locator('.datetime-ready').waitFor();
     this.timePicker = this.page.locator('ion-datetime');
   }
 
diff --git a/core/src/components/datetime/test/readonly/datetime.e2e.ts b/core/src/components/datetime/test/readonly/datetime.e2e.ts
index f157bd36e32..f16b6faf216 100644
--- a/core/src/components/datetime/test/readonly/datetime.e2e.ts
+++ b/core/src/components/datetime/test/readonly/datetime.e2e.ts
@@ -27,7 +27,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
         config
       );
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const febFirstButton = page.locator(`.calendar-day[data-day='1'][data-month='2']`);
 
@@ -43,7 +43,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
       );
 
       const ionChange = await page.spyOnEvent('ionChange');
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
       const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
       await expect(calendarMonthYear).toHaveText('February 2022');
 
@@ -66,7 +66,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
 
       const tabKey = browserName === 'webkit' ? 'Alt+Tab' : 'Tab';
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
       const calendarMonthYear = page.locator('ion-datetime .calendar-month-year');
       const monthYearButton = page.locator('.calendar-month-year ion-item');
       await expect(calendarMonthYear).toHaveText('February 2022');
@@ -157,7 +157,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config, scree
         config
       );
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const clearButton = page.locator('#clear-button button');
 
diff --git a/core/src/components/datetime/test/set-value/datetime.e2e.ts b/core/src/components/datetime/test/set-value/datetime.e2e.ts
index 798b87144a1..37daadf2b83 100644
--- a/core/src/components/datetime/test/set-value/datetime.e2e.ts
+++ b/core/src/components/datetime/test/set-value/datetime.e2e.ts
@@ -5,7 +5,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
   test.describe(title('datetime: set-value'), () => {
     test('should update the active date when value is initially set', async ({ page }) => {
       await page.goto('/src/components/datetime/test/set-value', config);
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const datetime = page.locator('ion-datetime');
       await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-11-25T12:40:00.000Z'));
@@ -18,7 +18,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
     test('should update the active time when value is initially set', async ({ page }) => {
       await page.goto('/src/components/datetime/test/set-value', config);
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const datetime = page.locator('ion-datetime');
       await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-11-25T12:40:00.000Z'));
@@ -37,7 +37,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         config
       );
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const datetime = page.locator('ion-datetime');
       const activeDayButton = page.locator('.calendar-day-active');
@@ -53,7 +53,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
     test('should scroll to new month when value is initially set and then updated', async ({ page }) => {
       await page.goto('/src/components/datetime/test/set-value', config);
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const datetime = page.locator('ion-datetime');
       await datetime.evaluate((el: HTMLIonDatetimeElement) => (el.value = '2021-05-25T12:40:00.000Z'));
diff --git a/core/src/components/datetime/test/time-label/datetime.e2e.ts b/core/src/components/datetime/test/time-label/datetime.e2e.ts
index cf3fb9f7806..88acbbe8570 100644
--- a/core/src/components/datetime/test/time-label/datetime.e2e.ts
+++ b/core/src/components/datetime/test/time-label/datetime.e2e.ts
@@ -10,7 +10,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const timeLabel = page.locator('ion-datetime .time-header');
       await expect(timeLabel).toHaveText('Time');
@@ -22,7 +22,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const timeLabel = page.locator('ion-datetime .time-header');
       await expect(timeLabel).toHaveText('');
diff --git a/core/src/components/datetime/test/values/datetime.e2e.ts b/core/src/components/datetime/test/values/datetime.e2e.ts
index e785e484e00..ce17cc16019 100644
--- a/core/src/components/datetime/test/values/datetime.e2e.ts
+++ b/core/src/components/datetime/test/values/datetime.e2e.ts
@@ -10,7 +10,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       `,
         config
       );
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const items = page.locator('.calendar-day:not([disabled])');
 
@@ -91,7 +91,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         config
       );
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const minuteItems = page.locator(
         'ion-picker-column-internal:nth-of-type(2) .picker-item:not(.picker-item-empty)'
@@ -137,7 +137,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         config
       );
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const monthItems = page.locator('.month-column .picker-item:not(.picker-item-empty)');
       await expect(monthItems).toHaveText(['January']);
@@ -169,7 +169,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         config
       );
 
-      await page.waitForSelector('.datetime-ready');
+      await page.locator('.datetime-ready').waitFor();
 
       const todayButton = page.locator('.calendar-day[data-day="10"][data-month="10"][data-year="2022"]');
 
diff --git a/core/src/components/header/test/condense/header.e2e.ts b/core/src/components/header/test/condense/header.e2e.ts
index c2ac59efd0f..791c1b720af 100644
--- a/core/src/components/header/test/condense/header.e2e.ts
+++ b/core/src/components/header/test/condense/header.e2e.ts
@@ -16,7 +16,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
       await content.evaluate(async (el: HTMLIonContentElement) => {
         await el.scrollToBottom();
       });
-      await page.waitForSelector('#largeTitleHeader.header-collapse-condense-inactive');
+      await page.locator('#largeTitleHeader.header-collapse-condense-inactive').waitFor();
 
       await expect(smallTitleHeader).toHaveScreenshot(screenshot(`header-condense-large-title-collapsed-diff`));
 
@@ -30,7 +30,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
       await content.evaluate(async (el: HTMLIonContentElement) => {
         await el.scrollToTop();
       });
-      await page.waitForSelector('#smallTitleHeader.header-collapse-condense-inactive');
+      await page.locator('#smallTitleHeader.header-collapse-condense-inactive').waitFor();
 
       await expect(smallTitleHeader).toHaveAttribute('aria-hidden', 'true');
     });
diff --git a/core/src/components/input/input.ios.scss b/core/src/components/input/input.ios.scss
index 90ae0c842fd..35dc4aee518 100644
--- a/core/src/components/input/input.ios.scss
+++ b/core/src/components/input/input.ios.scss
@@ -37,3 +37,25 @@
 :host(.input-disabled) {
   opacity: #{$input-ios-disabled-opacity};
 }
+
+// Start/End Slots
+// ----------------------------------------------------------------
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot="start"].button-has-icon-only),
+::slotted(ion-button[slot="end"].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-top: 0;
+  --padding-bottom: 0;
+
+  aspect-ratio: 1;
+}
diff --git a/core/src/components/input/input.md.scss b/core/src/components/input/input.md.scss
index 4c5d9906745..97c65cd59dc 100644
--- a/core/src/components/input/input.md.scss
+++ b/core/src/components/input/input.md.scss
@@ -117,3 +117,27 @@
 :host(.input-shape-round) {
   --border-radius: 16px;
 }
+
+// Start/End Slots
+// ----------------------------------------------------------------
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot="start"].button-has-icon-only),
+::slotted(ion-button[slot="end"].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 8px;
+  --padding-end: 8px;
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+
+  aspect-ratio: 1;
+
+  min-height: 40px;
+}
diff --git a/core/src/components/input/input.scss b/core/src/components/input/input.scss
index 7ebfb52680f..e2504b032a5 100644
--- a/core/src/components/input/input.scss
+++ b/core/src/components/input/input.scss
@@ -259,15 +259,16 @@
 
 // Input Has focus
 // --------------------------------------------------
-// When the input has focus, then the input cover should be hidden
 
-:host(.has-focus) {
+// TODO FW-2764 Remove this
+:host(.has-focus.legacy-input) {
   pointer-events: none;
 }
 
-:host(.has-focus) input,
-:host(.has-focus) a,
-:host(.has-focus) button {
+// TODO FW-2764 Remove this
+:host(.has-focus.legacy-input) input,
+:host(.has-focus.legacy-input) a,
+:host(.has-focus.legacy-input) button {
   pointer-events: auto;
 }
 
@@ -659,8 +660,10 @@
 
 ::slotted([slot="start"]) {
   margin-inline-end: $form-control-label-margin;
+  margin-inline-start: 0;
 }
 
 ::slotted([slot="end"]) {
   margin-inline-start: $form-control-label-margin;
+  margin-inline-end: 0;
 }
diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx
index e8cc0492741..3607b103221 100644
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -121,6 +121,9 @@ export class Input implements ComponentInterface {
   /**
    * A callback used to format the counter text.
    * By default the counter text is set to "itemLength / maxLength".
+   *
+   * See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
+   * if you need to access `this` from within the callback.
    */
   @Prop() counterFormatter?: (inputLength: number, maxLength: number) => string;
 
@@ -549,15 +552,37 @@ export class Input implements ComponentInterface {
     if (!this.shouldClearOnEdit()) {
       return;
     }
+
+    /**
+     * The following keys do not modify the
+     * contents of the input. As a result, pressing
+     * them should not edit the input.
+     *
+     * We can't check to see if the value of the input
+     * was changed because we call checkClearOnEdit
+     * in a keydown listener, and the key has not yet
+     * been added to the input.
+     */
+    const IGNORED_KEYS = ['Enter', 'Tab', 'Shift', 'Meta', 'Alt', 'Control'];
+    const pressedIgnoredKey = IGNORED_KEYS.includes(ev.key);
+
     /**
      * Clear the input if the control has not been previously cleared during focus.
      * Do not clear if the user hitting enter to submit a form.
      */
-    if (!this.didInputClearOnEdit && this.hasValue() && ev.key !== 'Enter' && ev.key !== 'Tab') {
+    if (!this.didInputClearOnEdit && this.hasValue() && !pressedIgnoredKey) {
       this.value = '';
       this.emitInputChange(ev);
     }
-    this.didInputClearOnEdit = true;
+
+    /**
+     * Pressing an IGNORED_KEYS first and
+     * then an allowed key will cause the input to not
+     * be cleared.
+     */
+    if (!pressedIgnoredKey) {
+      this.didInputClearOnEdit = true;
+    }
   }
 
   private onCompositionStart = () => {
diff --git a/core/src/components/input/test/clear-on-edit/input.e2e.ts b/core/src/components/input/test/clear-on-edit/input.e2e.ts
index e6686902782..ecfbecb3c1e 100644
--- a/core/src/components/input/test/clear-on-edit/input.e2e.ts
+++ b/core/src/components/input/test/clear-on-edit/input.e2e.ts
@@ -1,6 +1,8 @@
 import { expect } from '@playwright/test';
 import { test, configs } from '@utils/test/playwright';
 
+const IGNORED_KEYS = ['Enter', 'Tab', 'Shift', 'Meta', 'Alt', 'Control'];
+
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('input: clearOnEdit'), () => {
     test('should clear when typed into', async ({ page }) => {
@@ -16,28 +18,57 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await expect(input).toHaveJSProperty('value', 'h');
     });
 
-    test('should not clear when enter is pressed', async ({ page }) => {
-      await page.setContent(`<ion-input value="abc" clear-on-edit="true" aria-label="input"></ion-input>`, config);
+    test('should not clear the input if it does not have an initial value when typing', async ({ page }) => {
+      await page.setContent(`<ion-input label="input" value="" clear-on-edit="true"></ion-input>`, config);
 
       const input = page.locator('ion-input');
-      await input.locator('input').focus();
 
-      await page.keyboard.press('Enter');
-      await page.waitForChanges();
+      await input.click();
+      await input.type('hello world');
 
-      await expect(input).toHaveJSProperty('value', 'abc');
+      await expect(input).toHaveJSProperty('value', 'hello world');
+    });
+
+    IGNORED_KEYS.forEach((ignoredKey: string) => {
+      test(`should not clear when ${ignoredKey} is pressed`, async ({ page, skip }) => {
+        skip.browser(
+          (browserName: string) => browserName === 'firefox' && ignoredKey === 'Meta',
+          'Firefox incorrectly adds "OS" to the input when pressing the Meta key on Linux'
+        );
+        await page.setContent(`<ion-input value="abc" clear-on-edit="true" aria-label="input"></ion-input>`, config);
+
+        const input = page.locator('ion-input');
+        await input.locator('input').focus();
+
+        await page.keyboard.press(ignoredKey);
+        await page.waitForChanges();
+
+        await expect(input).toHaveJSProperty('value', 'abc');
+      });
     });
 
-    test('should not clear when tab is pressed', async ({ page }) => {
+    test('should clear after when pressing valid key after pressing ignored key', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/28633',
+      });
+
       await page.setContent(`<ion-input value="abc" clear-on-edit="true" aria-label="input"></ion-input>`, config);
 
       const input = page.locator('ion-input');
       await input.locator('input').focus();
 
-      await page.keyboard.press('Tab');
+      // ignored
+      await page.keyboard.press('Shift');
       await page.waitForChanges();
 
       await expect(input).toHaveJSProperty('value', 'abc');
+
+      // allowed
+      await page.keyboard.press('a');
+      await page.waitForChanges();
+
+      await expect(input).toHaveJSProperty('value', 'a');
     });
   });
 });
diff --git a/core/src/components/input/test/slot/input.e2e.ts b/core/src/components/input/test/slot/input.e2e.ts
index ac0d80ef35a..2ad41334f25 100644
--- a/core/src/components/input/test/slot/input.e2e.ts
+++ b/core/src/components/input/test/slot/input.e2e.ts
@@ -8,7 +8,9 @@ configs().forEach(({ title, screenshot, config }) => {
         `
           <ion-input label-placement="start" fill="solid" value="100" label="Weight" clear-input="true">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-input>
         `,
         config
@@ -23,7 +25,9 @@ configs().forEach(({ title, screenshot, config }) => {
         `
           <ion-input label-placement="floating" fill="solid" value="100" label="Weight" clear-input="true">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-input>
         `,
         config
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-ltr-Mobile-Chrome-linux.png
index f778245157a..92715e15105 100644
Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-ltr-Mobile-Firefox-linux.png
index bf7dc6b7a13..9e1e886db29 100644
Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-ltr-Mobile-Safari-linux.png
index 8ace1899ce2..221efa3a6ff 100644
Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-rtl-Mobile-Chrome-linux.png
index 5bd211a328d..86147ea5125 100644
Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-rtl-Mobile-Firefox-linux.png
index bd73d2b1486..1ce2e72b566 100644
Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-rtl-Mobile-Safari-linux.png
index 1d85f1b3261..434e7e8f7d3 100644
Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-ltr-Mobile-Chrome-linux.png
index 8970e326607..e720d883b01 100644
Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-ltr-Mobile-Firefox-linux.png
index 12813a2c50f..f63fb775d51 100644
Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-ltr-Mobile-Safari-linux.png
index 7641e731c55..09e283054f7 100644
Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-rtl-Mobile-Chrome-linux.png
index 646d11df408..54e5ebbca8a 100644
Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-rtl-Mobile-Firefox-linux.png
index e66f7a3f557..7aee63eacf6 100644
Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-rtl-Mobile-Safari-linux.png
index 019f5aeb681..5a4de68e951 100644
Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-floating-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-ltr-Mobile-Chrome-linux.png
index 16355a9012b..061b66c3e41 100644
Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-ltr-Mobile-Firefox-linux.png
index 8c4fb42dbf6..f0890040a2d 100644
Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-ltr-Mobile-Safari-linux.png
index 8441a54b036..87a794b7d60 100644
Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-rtl-Mobile-Chrome-linux.png
index 3b9d27fe85e..3f77d0463c2 100644
Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-rtl-Mobile-Firefox-linux.png
index 467ff73f4f2..013abc38e53 100644
Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-rtl-Mobile-Safari-linux.png
index f21e37d3509..b700c0e5516 100644
Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-ltr-Mobile-Chrome-linux.png
index e9f64c0d768..411ed54a4b7 100644
Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-ltr-Mobile-Firefox-linux.png
index f7eeabfab87..9bf9fbb6a02 100644
Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-ltr-Mobile-Safari-linux.png
index 22ac0aa749c..2491ca85100 100644
Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-ltr-Mobile-Safari-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-rtl-Mobile-Chrome-linux.png
index 83f5a80f824..298a824015b 100644
Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-rtl-Mobile-Firefox-linux.png
index bb75d1f9f84..a1376b5f54f 100644
Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-rtl-Mobile-Safari-linux.png
index 60f1e692e62..4eb6676202b 100644
Binary files a/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-rtl-Mobile-Safari-linux.png and b/core/src/components/input/test/slot/input.e2e.ts-snapshots/input-slots-label-start-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss
index 2f36fe53405..aa52b7b953e 100644
--- a/core/src/components/item/item.scss
+++ b/core/src/components/item/item.scss
@@ -51,15 +51,6 @@
    * @prop --highlight-color-valid: The color of the highlight on the item when valid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
    * @prop --highlight-color-invalid: The color of the highlight on the item when invalid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on `ion-input` or `ion-textarea` when using the modern form syntax.
    */
-
-  /**
-   * We change the minimum width as the
-   * font size changes. Using a fixed minimum
-   * width means that fewer and fewer characters
-   * can be displayed in the same space as the
-   * text grows.
-   */
-  --inner-min-width: 4rem;
   --border-radius: 0px;
   --border-width: 0px;
   --border-style: solid;
@@ -230,11 +221,6 @@
   display: flex;
   position: relative;
 
-  // Flex wrap is required here in order to wrap
-  // the start slot + .item-inner content that
-  // doesn't fit on the same line
-  flex-wrap: wrap;
-
   align-items: inherit;
   justify-content: inherit;
 
@@ -258,11 +244,6 @@
   box-sizing: border-box;
 }
 
-// TODO(FW-5289): remove
-:host(.item-legacy) .item-native {
-  flex-wrap: unset;
-}
-
 .item-native::-moz-focus-inner {
   border: 0;
 }
@@ -307,34 +288,13 @@ button, a {
   // This is required to work with an inset highlight
   position: relative;
 
-  // This flex property is required in order to make
-  // the elements wrap when there is a slotted start
-  // element and a label
-  flex: 1 0 0;
+  flex: 1;
 
   flex-direction: inherit;
 
-  // Flex wrap is required here in order to wrap
-  // .input-wrapper content + the end slot that
-  // doesn't fit on the same line
-  flex-wrap: wrap;
-
   align-items: inherit;
   align-self: stretch;
 
-  /**
-   * The min-width defines when the
-   * content in the default slot should
-   * stop wrapping/truncating within its own
-   * container. At this point the entire
-   * container will wrap to the next line.
-   */
-  min-width: var(--inner-min-width);
-
-  // Max width must be set to 100%, otherwise the
-  // elements will overflow this container instead
-  // of wrapping
-  max-width: 100%;
   min-height: inherit;
 
   border-width: var(--inner-border-width);
@@ -346,15 +306,6 @@ button, a {
   box-sizing: border-box;
 }
 
-// TODO(FW-5289): remove
-:host(.item-legacy) .item-inner {
-  flex: 1;
-
-  flex-wrap: unset;
-
-  max-width: unset;
-}
-
 // Item Bottom
 // --------------------------------------------------
 
@@ -426,6 +377,13 @@ button, a {
   // shrink and wrap its text instead of moving to its
   // own row if there are slotted elements next to it
   width: min-content;
+
+  /**
+   * We allow labels in the default
+   * slot to grow. However, we do not
+   * want them to grow indefinitely.
+   */
+  max-width: 100%;
 }
 
 // Item Input
@@ -441,38 +399,19 @@ button, a {
   // This flex property is required in order to keep
   // the label from shrinking when there are wide
   // elements next to it
-  flex: 1 0 auto;
+  flex: 1;
 
   flex-direction: inherit;
 
-  // Flex wrap is required here in order to wrap
-  // content in the default slot (such as a label
-  // and a button) that doesn't fit on the same line
-  flex-wrap: wrap;
-
   align-items: inherit;
   align-self: stretch;
 
-  // Max width must be set to 100%, otherwise the
-  // elements will overflow this container instead
-  // of wrapping
-  max-width: 100%;
-
   text-overflow: ellipsis;
 
   overflow: inherit;
   box-sizing: border-box;
 }
 
-// TODO(FW-5289): remove
-:host(.item-legacy) .input-wrapper {
-  flex: 1;
-
-  flex-wrap: unset;
-
-  max-width: unset;
-}
-
 :host(.item-label-stacked),
 :host(.item-label-floating) {
   align-items: start;
diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index ad056c5cdfc..c6c18d4e981 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -150,6 +150,12 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
 
   @State() counterString: string | null | undefined;
 
+  @Watch('button')
+  buttonChanged() {
+    // Update the focusable option when the button option is changed
+    this.focusable = this.isFocusable();
+  }
+
   @Watch('counterFormatter')
   counterFormatterChanged() {
     this.updateCounterOutput(this.getFirstInput());
diff --git a/core/src/components/item/test/a11y/index.html b/core/src/components/item/test/a11y/index.html
index 9aad84631c2..18fb4d703d9 100644
--- a/core/src/components/item/test/a11y/index.html
+++ b/core/src/components/item/test/a11y/index.html
@@ -16,23 +16,19 @@
       <h1>Item</h1>
 
       <ion-item>
-        <ion-label>Item with Input</ion-label>
-        <ion-input placeholder="Placeholder"></ion-input>
+        <ion-input label="Item with Input" placeholder="Placeholder"></ion-input>
       </ion-item>
 
       <ion-item disabled>
-        <ion-label>Item disabled with Input</ion-label>
-        <ion-input placeholder="Placeholder"></ion-input>
+        <ion-input label="Item disabled with Input" placeholder="Placeholder"></ion-input>
       </ion-item>
 
       <ion-item>
-        <ion-label>Item with Input disabled</ion-label>
-        <ion-input placeholder="Placeholder" disabled></ion-input>
+        <ion-input label="Item with Input disabled" placeholder="Placeholder" disabled></ion-input>
       </ion-item>
 
       <ion-item>
-        <ion-label position="floating">Item with Select</ion-label>
-        <ion-select>
+        <ion-select label="Item with Select" label-placement="floating">
           <ion-select-option value="">No Game Console</ion-select-option>
           <ion-select-option value="nes">NES</ion-select-option>
           <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
@@ -44,8 +40,7 @@ <h1>Item</h1>
       </ion-item>
 
       <ion-item disabled>
-        <ion-label position="floating">Item disabled with Select</ion-label>
-        <ion-select>
+        <ion-select label="Item disabled with Select" label-placement="floating">
           <ion-select-option value="">No Game Console</ion-select-option>
           <ion-select-option value="nes">NES</ion-select-option>
           <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
@@ -57,8 +52,7 @@ <h1>Item</h1>
       </ion-item>
 
       <ion-item>
-        <ion-label position="floating">Item with Select disabled</ion-label>
-        <ion-select disabled>
+        <ion-select label="Item with Select disabled" label-placement="floating" disabled>
           <ion-select-option value="">No Game Console</ion-select-option>
           <ion-select-option value="nes">NES</ion-select-option>
           <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
@@ -70,33 +64,27 @@ <h1>Item</h1>
       </ion-item>
 
       <ion-item>
-        <ion-label>Item with Toggle</ion-label>
-        <ion-toggle slot="end"></ion-toggle>
+        <ion-toggle>Item with Toggle</ion-toggle>
       </ion-item>
 
       <ion-item disabled>
-        <ion-label>Item disabled with Toggle</ion-label>
-        <ion-toggle slot="end"></ion-toggle>
+        <ion-toggle>Item disabled with Toggle</ion-toggle>
       </ion-item>
 
       <ion-item>
-        <ion-label>Item with Toggle disabled</ion-label>
-        <ion-toggle slot="end" disabled></ion-toggle>
+        <ion-toggle disabled>Item with Toggle disabled</ion-toggle>
       </ion-item>
 
       <ion-item>
-        <ion-label>Item with Radio</ion-label>
-        <ion-radio slot="start" value="biff"></ion-radio>
+        <ion-radio value="biff">Item with Radio</ion-radio>
       </ion-item>
 
       <ion-item disabled>
-        <ion-label>Item disabled with Radio</ion-label>
-        <ion-radio slot="start" value="biff"></ion-radio>
+        <ion-radio value="biff">Item disabled with Radio</ion-radio>
       </ion-item>
 
       <ion-item>
-        <ion-label>Item with Radio disabled</ion-label>
-        <ion-radio slot="start" value="biff" disabled></ion-radio>
+        <ion-radio value="biff" disabled>Item with Radio disabled</ion-radio>
       </ion-item>
     </main>
   </body>
diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Chrome-linux.png
index 5dcb0bd7265..236a060b294 100644
Binary files a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Firefox-linux.png
index 7ca90b8b85e..0eaca5aaeb4 100644
Binary files a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Safari-linux.png
index 6cedd64817b..bd8d901f736 100644
Binary files a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Chrome-linux.png
index 9e54eac08ad..c98e7f9dfcf 100644
Binary files a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Firefox-linux.png
index a3e9d3e2aa7..89acf693034 100644
Binary files a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Safari-linux.png
index 99cb77ae039..ff14e8e3491 100644
Binary files a/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/a11y/item.e2e.ts-snapshots/item-buttons-scale-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/basic/index.html b/core/src/components/item/test/basic/index.html
index 7cf41908848..f9d6c77bb72 100644
--- a/core/src/components/item/test/basic/index.html
+++ b/core/src/components/item/test/basic/index.html
@@ -98,8 +98,9 @@ <h4>H4 Title Text</h4>
         </ion-item>
 
         <ion-item class="overflow-visible">
-          <ion-label position="fixed">PIN:</ion-label>
           <ion-input
+            label="PIN:"
+            label-placement="fixed"
             type="number"
             pattern="[0-9]*"
             inputmode="numeric"
diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-ltr-Mobile-Chrome-linux.png
index 2bb77a958d1..e18f521d980 100644
Binary files a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-ltr-Mobile-Firefox-linux.png
index 776ba9931ad..8b98359d136 100644
Binary files a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-ltr-Mobile-Safari-linux.png
index 4d3dcfbc929..26278598cdc 100644
Binary files a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Chrome-linux.png
index add60e8bc4a..1bf9af4e2bd 100644
Binary files a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Firefox-linux.png
index 54659326fda..6ebbba86022 100644
Binary files a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Safari-linux.png
index 15d421905fd..67ab13d3978 100644
Binary files a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-ltr-Mobile-Chrome-linux.png
index f56e0edd010..caa7c6c7a61 100644
Binary files a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-ltr-Mobile-Firefox-linux.png
index b735a627055..6f11eb13609 100644
Binary files a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-ltr-Mobile-Safari-linux.png
index 6b7d301bdce..6af90ebc4c2 100644
Binary files a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-rtl-Mobile-Chrome-linux.png
index 13667c902ee..fe8bae51725 100644
Binary files a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-rtl-Mobile-Firefox-linux.png
index 562db67a1e3..e36096b2ca0 100644
Binary files a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-rtl-Mobile-Safari-linux.png
index fb9b335b402..e74e7de7470 100644
Binary files a/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/basic/item.e2e.ts-snapshots/item-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/bottom/index.html b/core/src/components/item/test/bottom/index.html
index d9266eb847f..f89740008b4 100644
--- a/core/src/components/item/test/bottom/index.html
+++ b/core/src/components/item/test/bottom/index.html
@@ -31,32 +31,27 @@
       <ion-content class="ion-padding-vertical">
         <ion-list class="basic">
           <ion-item>
-            <ion-label>No Helper/Error</ion-label>
-            <ion-input name="input" id="text"></ion-input>
+            <ion-input label="No Helper/Error" name="input" id="text"></ion-input>
           </ion-item>
 
           <ion-item>
-            <ion-label>Helper and Error</ion-label>
-            <ion-input></ion-input>
+            <ion-input label="Helper and Error"></ion-input>
             <ion-note slot="helper">Helper Text</ion-note>
             <ion-note slot="error">Error Text</ion-note>
           </ion-item>
 
           <ion-item>
-            <ion-label>Helper Only</ion-label>
-            <ion-input></ion-input>
+            <ion-input label="Helper Only"></ion-input>
             <ion-note slot="helper">Helper Text</ion-note>
           </ion-item>
 
           <ion-item>
-            <ion-label>Error Only</ion-label>
-            <ion-input></ion-input>
+            <ion-input label="Error Only"></ion-input>
             <ion-note slot="error">Error Text</ion-note>
           </ion-item>
 
           <ion-item class="custom">
-            <ion-label>Both w/ Custom CSS</ion-label>
-            <ion-input></ion-input>
+            <ion-input label="Both w/ Custom CSS"></ion-input>
             <ion-note slot="helper">Helper Text</ion-note>
             <ion-note slot="error">Error Text</ion-note>
           </ion-item>
@@ -66,16 +61,14 @@
           <ion-row>
             <ion-col>
               <ion-item fill="solid">
-                <ion-label>Helper and Error (Fill Solid)</ion-label>
-                <ion-input></ion-input>
+                <ion-input label="Helper and Error (Fill Solid)"></ion-input>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
             </ion-col>
             <ion-col>
               <ion-item fill="outline">
-                <ion-label>Helper and Error (Fill Outline)</ion-label>
-                <ion-input></ion-input>
+                <ion-input label="Helper and Error (Fill Outline)"></ion-input>
                 <ion-note slot="helper">Helper Text</ion-note>
                 <ion-note slot="error">Error Text</ion-note>
               </ion-item>
@@ -84,8 +77,7 @@
           <ion-row>
             <ion-col>
               <ion-item>
-                <ion-label>Toggle Error</ion-label>
-                <ion-toggle slot="start" id="error-toggle" color="danger"></ion-toggle>
+                <ion-toggle id="error-toggle" color="danger">Toggle Error</ion-toggle>
               </ion-item>
             </ion-col>
           </ion-row>
diff --git a/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-ltr-Mobile-Firefox-linux.png
index 6d1b1acb875..b7f3579a707 100644
Binary files a/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-rtl-Mobile-Firefox-linux.png
index a290ec89332..19453840539 100644
Binary files a/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/counter/item.e2e.ts-snapshots/item-counter-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Chrome-linux.png
index d5057c87b3c..3d20782dc97 100644
Binary files a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Firefox-linux.png
index 32cd77abd23..39274d225ba 100644
Binary files a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Safari-linux.png
index 3f0b0328599..148333df747 100644
Binary files a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Chrome-linux.png
index 43487eba48e..0ff00ef8e00 100644
Binary files a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Firefox-linux.png
index 6f4e7e9b987..7c67ea071d0 100644
Binary files a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Safari-linux.png
index d8d0caf5c5e..4f35e512fc5 100644
Binary files a/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/highlight/item.e2e.ts-snapshots/item-highlight-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/inputs/index.html b/core/src/components/item/test/inputs/index.html
index 5ebe75aea7b..ac621ee8b51 100644
--- a/core/src/components/item/test/inputs/index.html
+++ b/core/src/components/item/test/inputs/index.html
@@ -39,18 +39,6 @@
               <ion-item id="btnUndefinedValue" button="true" onclick="setUndefinedValue()">
                 <ion-label>Set "undefined" values</ion-label>
               </ion-item>
-              <ion-item id="btnLabelsDefault" button="true" onclick="setLabelDefault()">
-                <ion-label>Labels: Default</ion-label>
-              </ion-item>
-              <ion-item id="btnLabelsFloating" button="true" onclick="setLabelFloating()">
-                <ion-label>Labels: Floating</ion-label>
-              </ion-item>
-              <ion-item id="btnLabelsStacked" button="true" onclick="setLabelStacked()">
-                <ion-label>Labels: Stacked</ion-label>
-              </ion-item>
-              <ion-item id="btnLabelsFixed" button="true" onclick="setLabelFixed()">
-                <ion-label>Labels: Fixed</ion-label>
-              </ion-item>
             </ion-list>
           </ion-popover>
         </ion-toolbar>
@@ -60,28 +48,23 @@
         <form onsubmit="return onSubmit(event)">
           <ion-list>
             <ion-item>
-              <ion-label>Input</ion-label>
-              <ion-input name="input" id="input" placeholder="Input"></ion-input>
+              <ion-input label="Input" name="input" id="input" placeholder="Input"></ion-input>
             </ion-item>
 
             <ion-item>
-              <ion-label>Textarea</ion-label>
-              <ion-textarea name="textarea" id="textarea" placeholder="Textarea"></ion-textarea>
+              <ion-textarea label="Textarea" name="textarea" id="textarea" placeholder="Textarea"></ion-textarea>
             </ion-item>
 
             <ion-item>
-              <ion-label>Toggle</ion-label>
-              <ion-toggle name="toggle" id="toggle" slot="end"></ion-toggle>
+              <ion-toggle name="toggle" id="toggle">Toggle</ion-toggle>
             </ion-item>
 
             <ion-item>
-              <ion-label>Checkbox</ion-label>
-              <ion-checkbox name="checkbox" id="checkbox" slot="end"></ion-checkbox>
+              <ion-checkbox name="checkbox" id="checkbox">Checkbox</ion-checkbox>
             </ion-item>
 
             <ion-item>
-              <ion-label>Select</ion-label>
-              <ion-select name="select" id="select" placeholder="Select">
+              <ion-select label="Select" name="select" id="select" placeholder="Select">
                 <ion-select-option value="1">1</ion-select-option>
                 <ion-select-option value="2">2</ion-select-option>
                 <ion-select-option value="3">3</ion-select-option>
@@ -93,8 +76,7 @@
             </ion-item>
 
             <ion-item>
-              <ion-label>Range</ion-label>
-              <ion-range name="range" id="range" value="10"></ion-range>
+              <ion-range label="Range" name="range" id="range" value="10"></ion-range>
             </ion-item>
           </ion-list>
 
@@ -147,28 +129,6 @@
         toggle.checked = checkbox.checked = false;
       }
 
-      function setLabelDefault() {
-        setLabelPosition(undefined);
-      }
-
-      function setLabelFixed() {
-        setLabelPosition('fixed');
-      }
-
-      function setLabelFloating() {
-        setLabelPosition('floating');
-      }
-
-      function setLabelStacked() {
-        setLabelPosition('stacked');
-      }
-
-      function setLabelPosition(position) {
-        Array.from(document.querySelectorAll('form ion-list ion-label')).forEach(
-          (label) => (label.position = position)
-        );
-      }
-
       function getFormControls() {
         return formControlIds.reduce((acc, id) => {
           acc[id] = document.querySelector(`#${id}`);
diff --git a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Chrome-linux.png
index 16fde476d93..5e648162f20 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Firefox-linux.png
index f379936b303..0e5120ef3ac 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Safari-linux.png
index e536ff2645e..b2eb1638087 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-md-ltr-Mobile-Chrome-linux.png
index c9d778fa327..6f30797958c 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-md-ltr-Mobile-Firefox-linux.png
index 44175208bd9..83873459170 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-md-ltr-Mobile-Safari-linux.png
index 574268ee6bc..a19e84eca21 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-disabled-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-ltr-Mobile-Chrome-linux.png
index 2c7ff81cf5d..81ca424c026 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-ltr-Mobile-Firefox-linux.png
index 880e3366967..c207a965ea6 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-ltr-Mobile-Safari-linux.png
index f0761cbf214..395057523db 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-rtl-Mobile-Chrome-linux.png
index 580f45a23bf..2556440e693 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-rtl-Mobile-Firefox-linux.png
index 473ed40edd9..255d73002b2 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-rtl-Mobile-Safari-linux.png
index 2f1a7f6454d..4c8b6eee54f 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-ltr-Mobile-Chrome-linux.png
index a7d5fd00258..1dd3849bdf4 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-ltr-Mobile-Firefox-linux.png
index 96d4a99df38..cfa42148a7b 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-ltr-Mobile-Safari-linux.png
index 71421992417..4984cd298ea 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-rtl-Mobile-Chrome-linux.png
index 5035d0f130b..164c214e50d 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-rtl-Mobile-Firefox-linux.png
index a48d9a81976..dccd74ec01d 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-rtl-Mobile-Safari-linux.png
index 0859a1f2506..d50fce39762 100644
Binary files a/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/inputs/item.e2e.ts-snapshots/item-inputs-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/item.spec.tsx b/core/src/components/item/test/item.spec.tsx
new file mode 100644
index 00000000000..750930ef828
--- /dev/null
+++ b/core/src/components/item/test/item.spec.tsx
@@ -0,0 +1,22 @@
+import { h } from '@stencil/core';
+import { newSpecPage } from '@stencil/core/testing';
+
+import { Item } from '../item';
+
+describe('item', () => {
+  it('should change focusable option after switching button option status', async () => {
+    const page = await newSpecPage({
+      components: [Item],
+      template: () => <ion-item button={false}></ion-item>,
+    });
+
+    const item = page.body.querySelector('ion-item')!;
+    // Change button attribute to true
+    item.setAttribute('button', 'true');
+
+    await page.waitForChanges();
+
+    // Check if it has the expected class that gives the highlight style to .item-highlight element
+    expect(item).toHaveClass('ion-focusable');
+  });
+});
diff --git a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Chrome-linux.png
index f9ddb05ee67..988ee7fe52c 100644
Binary files a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Firefox-linux.png
index a9c60045cff..13a99e61f97 100644
Binary files a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Safari-linux.png
index d2328b380e9..4aac1c769e3 100644
Binary files a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Chrome-linux.png
index 27520c19562..04adf12a468 100644
Binary files a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Firefox-linux.png
index 471b7945fde..2051a27ef81 100644
Binary files a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Safari-linux.png
index 84422caf0ec..0ac689d7819 100644
Binary files a/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/legacy/fill/item.e2e.ts-snapshots/item-fill-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Chrome-linux.png
index 934f70a4feb..9afb2ddc75b 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Firefox-linux.png
index f3b4bf8f2f0..e4dd9f7f2de 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Safari-linux.png
index a818a230643..560b5c3c423 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Chrome-linux.png
index 4e320ee56b6..e63f4f98e46 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Firefox-linux.png
index 23d155a681a..410cbe9f1c5 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Safari-linux.png
index 28d35df5eaf..c29b9e50873 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Chrome-linux.png
index ffb4b29d4ca..3c34d8be786 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Firefox-linux.png
index 34f656388a8..6b9aa6884eb 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Safari-linux.png
index 9fe5e0465d0..63e7e5d1344 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Chrome-linux.png
index 01393f7725c..8a7f9c7e57e 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Firefox-linux.png
index 3c2f7449c23..8bb202e4bf3 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Safari-linux.png
index 37b1645f758..20468828f59 100644
Binary files a/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/slotted-inputs/item.e2e.ts-snapshots/item-slotted-inputs-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/label/test/a11y/label.e2e.ts b/core/src/components/label/test/a11y/label.e2e.ts
index ce84ec06451..00485eb4d3f 100644
--- a/core/src/components/label/test/a11y/label.e2e.ts
+++ b/core/src/components/label/test/a11y/label.e2e.ts
@@ -82,3 +82,34 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('label: text wrapping in item'), () => {
+    test('long text should not cause label to expand infinitely', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          div {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+          }
+        </style>
+        <ion-item>
+          <ion-label>
+            <!-- This text should be truncated with ellipses -->
+            <div>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </div>
+          </ion-label>
+        </ion-item>
+      `,
+        config
+      );
+
+      const item = page.locator('ion-item');
+
+      await expect(item).toHaveScreenshot(screenshot(`label-item-wrap`));
+    });
+  });
+});
diff --git a/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-item-wrap-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-item-wrap-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d8e598922b9
Binary files /dev/null and b/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-item-wrap-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-item-wrap-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-item-wrap-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f4a4fa89066
Binary files /dev/null and b/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-item-wrap-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-item-wrap-ios-ltr-Mobile-Safari-linux.png b/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-item-wrap-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..87856ea01de
Binary files /dev/null and b/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-item-wrap-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/label/test/basic/index.html b/core/src/components/label/test/basic/index.html
index 96fba62ee2a..ed1a9cca2f7 100644
--- a/core/src/components/label/test/basic/index.html
+++ b/core/src/components/label/test/basic/index.html
@@ -41,58 +41,45 @@
         <ion-list>
           <ion-item>
             <ion-label>Default</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item>
             <ion-label color="tertiary">Tertiary</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item>
             <ion-label class="custom">Custom</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item>
             <ion-label class="ion-text-wrap">Wrap label this label just goes on and on and on</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item>
             <ion-label position="fixed">Fixed</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item>
             <ion-label position="floating">Floating</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item class="floating-color">
             <ion-label position="floating" color="success">Floating: Success</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item>
             <ion-label position="stacked">Stacked</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item class="stacked-color">
             <ion-label position="stacked" color="danger">Stacked: Danger</ion-label>
-            <ion-input></ion-input>
           </ion-item>
         </ion-list>
 
         <ion-list>
           <ion-item color="tertiary">
             <ion-label position="floating">(Item: Tertiary) Floating</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item color="primary">
             <ion-label position="stacked">(Item: Primary) Stacked</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item class="floating-color" color="tertiary">
             <ion-label position="floating" color="success">(Item: Tertiary) Floating: Success</ion-label>
-            <ion-input></ion-input>
           </ion-item>
           <ion-item class="stacked-color" color="primary">
             <ion-label position="stacked" color="danger">(Item: Primary) Stacked: Danger</ion-label>
-            <ion-input></ion-input>
           </ion-item>
         </ion-list>
       </ion-content>
diff --git a/core/src/components/label/test/basic/label.e2e.ts b/core/src/components/label/test/basic/label.e2e.ts
index ca94e838c27..1deda110544 100644
--- a/core/src/components/label/test/basic/label.e2e.ts
+++ b/core/src/components/label/test/basic/label.e2e.ts
@@ -34,7 +34,7 @@ configs().forEach(({ title, screenshot, config }) => {
         `
         <ion-item>
           <ion-label position="stacked">My Label</ion-label>
-          <ion-input></ion-input>
+          <ion-input aria-label="My Label"></ion-input>
         </ion-item>
       `,
         config
@@ -49,7 +49,7 @@ configs().forEach(({ title, screenshot, config }) => {
         `
         <ion-item>
           <ion-label position="floating">My Label</ion-label>
-          <ion-input></ion-input>
+          <ion-input aria-label="My Label"></ion-input>
         </ion-item>
       `,
         config
diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-ltr-Mobile-Chrome-linux.png
index edb9248e279..6a9650d0462 100644
Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-ltr-Mobile-Firefox-linux.png
index 5acaeaa2076..045042d578b 100644
Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-ltr-Mobile-Safari-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-ltr-Mobile-Safari-linux.png
index cadad3801b1..6b7c624c4fc 100644
Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-rtl-Mobile-Chrome-linux.png
index cb646a9425f..a0685d23f35 100644
Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-rtl-Mobile-Firefox-linux.png
index 6b487599b38..93fbaba3681 100644
Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-rtl-Mobile-Safari-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-rtl-Mobile-Safari-linux.png
index 0d2a55d37ba..9ec079e6026 100644
Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-ltr-Mobile-Chrome-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-ltr-Mobile-Chrome-linux.png
index 43f5ec6a9dc..3ef7959c875 100644
Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-ltr-Mobile-Firefox-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-ltr-Mobile-Firefox-linux.png
index d9f5cd86f54..d7c0b7364cf 100644
Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-ltr-Mobile-Safari-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-ltr-Mobile-Safari-linux.png
index 13a83f03ab2..a98ea9c069d 100644
Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-ltr-Mobile-Safari-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-rtl-Mobile-Chrome-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-rtl-Mobile-Chrome-linux.png
index cc31a396838..cbdd36e0661 100644
Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-rtl-Mobile-Firefox-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-rtl-Mobile-Firefox-linux.png
index dd1a12c946c..efffe566ad6 100644
Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-rtl-Mobile-Safari-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-rtl-Mobile-Safari-linux.png
index 04e05033867..bdc5dcbc8eb 100644
Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-rtl-Mobile-Safari-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-floating-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-ltr-Mobile-Chrome-linux.png
index c85e47860a3..749245a24aa 100644
Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-ltr-Mobile-Firefox-linux.png
index f5bec426b1c..1c407de0a68 100644
Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-ltr-Mobile-Safari-linux.png
index db396488df9..27f590db1cc 100644
Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-rtl-Mobile-Chrome-linux.png
index cd189d2e9e8..3fc6a3b9351 100644
Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-rtl-Mobile-Firefox-linux.png
index dbe831dca44..220043b818e 100644
Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-rtl-Mobile-Safari-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-rtl-Mobile-Safari-linux.png
index d279b6a4a22..9deda169e20 100644
Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-ltr-Mobile-Chrome-linux.png
index 367a766a130..fd1496a11fa 100644
Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-ltr-Mobile-Firefox-linux.png
index ec3a667863b..8d847d79d82 100644
Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-ltr-Mobile-Safari-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-ltr-Mobile-Safari-linux.png
index 81c44f7edcc..f473cdbe523 100644
Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-ltr-Mobile-Safari-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-rtl-Mobile-Chrome-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-rtl-Mobile-Chrome-linux.png
index 9213ffad0b6..885612a082e 100644
Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-rtl-Mobile-Firefox-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-rtl-Mobile-Firefox-linux.png
index 659828a08be..24c74da1c27 100644
Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-rtl-Mobile-Safari-linux.png b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-rtl-Mobile-Safari-linux.png
index 2ecff7a6358..51aaf2c28e3 100644
Binary files a/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-rtl-Mobile-Safari-linux.png and b/core/src/components/label/test/basic/label.e2e.ts-snapshots/label-stacked-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/list/list.md.scss b/core/src/components/list/list.md.scss
index 8b408f781d6..62a28273cc8 100644
--- a/core/src/components/list/list.md.scss
+++ b/core/src/components/list/list.md.scss
@@ -23,25 +23,9 @@
   @include border-radius($list-inset-md-border-radius);
 }
 
-/**
- * These selectors ensure the first item in the list
- * has the correct radius.
- * We need to consider the following scenarios:
- 1. The first item in a list as long as it is not the only item.
- 2. The item in the first item-sliding in a list.
- * Note that we do not select "ion-item-sliding ion-item:first-of-type"
- * because that will cause the borders to disappear on
- * items in an item-sliding when the item is the first
- * element in the item-sliding container.
- */
-.list-md.list-inset ion-item:not(:only-of-type):first-of-type,
-.list-md.list-inset ion-item-sliding:first-of-type ion-item {
-  --border-radius: #{$list-inset-md-border-radius $list-inset-md-border-radius 0 0};
-}
-
 /**
  * These selectors ensure the last item in the list
- * has the correct radius and border.
+ * has the correct border.
  * We need to consider the following scenarios:
  1. The last item in a list as long as it is not the only item.
  2. The item in the last item-sliding in a list.
@@ -52,21 +36,17 @@
  */
 .list-md.list-inset ion-item:not(:only-of-type):last-of-type,
 .list-md.list-inset ion-item-sliding:last-of-type ion-item {
-  --border-radius: #{0 0 $list-inset-md-border-radius $list-inset-md-border-radius};
   --border-width: 0;
   --inner-border-width: 0;
 }
 
 /**
- * The only item in a list should have a border radius
- * on all corners.
  * We target :only-child instead of :only-of-type
  * otherwise borders will disappear on items inside of
  * ion-item-sliding because the item will be the only
  * one of its type inside of the ion-item-sliding group.
  */
 .list-md.list-inset ion-item:only-child {
-  --border-radius: #{$list-inset-md-border-radius};
   --border-width: 0;
   --inner-border-width: 0;
 }
diff --git a/core/src/components/menu/menu.scss b/core/src/components/menu/menu.scss
index 83536250d0a..54cc316d6ab 100644
--- a/core/src/components/menu/menu.scss
+++ b/core/src/components/menu/menu.scss
@@ -190,13 +190,12 @@ ion-backdrop {
 
   width: auto;
 
-  /* stylelint-disable declaration-no-important */
-  transform: none !important;
+  transform: none;
 
-  box-shadow: none !important;
+  box-shadow: none;
 }
 
 :host(.menu-pane-visible) ion-backdrop {
+  /* stylelint-disable-next-line declaration-no-important */
   display: hidden !important;
-  /* stylelint-enable declaration-no-important */
 }
diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx
index a3574e1a2b2..437c5363453 100644
--- a/core/src/components/menu/menu.tsx
+++ b/core/src/components/menu/menu.tsx
@@ -191,7 +191,7 @@ export class Menu implements ComponentInterface, MenuI {
   async connectedCallback() {
     // TODO: connectedCallback is fired in CE build
     // before WC is defined. This needs to be fixed in Stencil.
-    if (typeof (customElements as any) !== 'undefined' && (customElements as any) != null) {
+    if (typeof customElements !== 'undefined' && customElements != null) {
       await customElements.whenDefined('ion-menu');
     }
 
diff --git a/core/src/components/menu/test/custom/menu.e2e.ts b/core/src/components/menu/test/custom/menu.e2e.ts
new file mode 100644
index 00000000000..9ed734353ca
--- /dev/null
+++ b/core/src/components/menu/test/custom/menu.e2e.ts
@@ -0,0 +1,65 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
+  test.describe(title('menu: custom'), () => {
+    test('should allow styling the menu box shadow when inside a split pane', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/21530',
+      });
+
+      await page.setContent(
+        `
+        <style>
+          ion-split-pane {
+            --side-width: 200px;
+            --side-min-width: 200px;
+          }
+
+          ion-menu {
+            box-shadow: 10px 5px 5px red;
+            z-index: 1;
+          }
+        </style>
+
+        <ion-app>
+          <ion-split-pane when="xs" id="splitPane" content-id="split-content">
+            <ion-menu side="start" content-id="split-content">
+              <ion-header>
+                <ion-toolbar color="secondary">
+                  <ion-title>Menu</ion-title>
+                </ion-toolbar>
+              </ion-header>
+
+              <ion-content class="ion-padding">Menu Content</ion-content>
+            </ion-menu>
+
+            <div class="ion-page" id="split-content">
+              <ion-header>
+                <ion-toolbar>
+                  <ion-buttons slot="start">
+                    <ion-menu-button></ion-menu-button>
+                  </ion-buttons>
+
+                  <ion-title>Content</ion-title>
+                </ion-toolbar>
+              </ion-header>
+
+              <ion-content class="ion-padding">Main Content</ion-content>
+            </div>
+          </ion-split-pane>
+        </ion-app>
+      `,
+        config
+      );
+
+      const app = page.locator('ion-app');
+
+      await expect(app).toHaveScreenshot(screenshot(`menu-custom-split-pane`));
+    });
+  });
+});
diff --git a/core/src/components/menu/test/custom/menu.e2e.ts-snapshots/menu-custom-split-pane-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/menu/test/custom/menu.e2e.ts-snapshots/menu-custom-split-pane-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..4cddf8de6b5
Binary files /dev/null and b/core/src/components/menu/test/custom/menu.e2e.ts-snapshots/menu-custom-split-pane-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/menu/test/custom/menu.e2e.ts-snapshots/menu-custom-split-pane-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/menu/test/custom/menu.e2e.ts-snapshots/menu-custom-split-pane-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..3cf4b00487b
Binary files /dev/null and b/core/src/components/menu/test/custom/menu.e2e.ts-snapshots/menu-custom-split-pane-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/menu/test/custom/menu.e2e.ts-snapshots/menu-custom-split-pane-ios-ltr-Mobile-Safari-linux.png b/core/src/components/menu/test/custom/menu.e2e.ts-snapshots/menu-custom-split-pane-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..1a166b29955
Binary files /dev/null and b/core/src/components/menu/test/custom/menu.e2e.ts-snapshots/menu-custom-split-pane-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/menu/test/custom/menu.e2e.ts-snapshots/menu-custom-split-pane-md-ltr-Mobile-Chrome-linux.png b/core/src/components/menu/test/custom/menu.e2e.ts-snapshots/menu-custom-split-pane-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..dec3119afed
Binary files /dev/null and b/core/src/components/menu/test/custom/menu.e2e.ts-snapshots/menu-custom-split-pane-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/menu/test/custom/menu.e2e.ts-snapshots/menu-custom-split-pane-md-ltr-Mobile-Firefox-linux.png b/core/src/components/menu/test/custom/menu.e2e.ts-snapshots/menu-custom-split-pane-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..98ec5e8c89f
Binary files /dev/null and b/core/src/components/menu/test/custom/menu.e2e.ts-snapshots/menu-custom-split-pane-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/menu/test/custom/menu.e2e.ts-snapshots/menu-custom-split-pane-md-ltr-Mobile-Safari-linux.png b/core/src/components/menu/test/custom/menu.e2e.ts-snapshots/menu-custom-split-pane-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..25d2fd8e0b0
Binary files /dev/null and b/core/src/components/menu/test/custom/menu.e2e.ts-snapshots/menu-custom-split-pane-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index ef6114b18ba..bae8648d765 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -264,6 +264,9 @@ export class Modal implements ComponentInterface, OverlayInterface {
    *
    * If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss.
    * If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss.
+   *
+   * See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
+   * if you need to access `this` from within the callback.
    */
   @Prop() canDismiss: boolean | ((data?: any, role?: string) => Promise<boolean>) = true;
 
diff --git a/core/src/components/modal/test/sheet/index.html b/core/src/components/modal/test/sheet/index.html
index 8fed5eac09a..2a7eeb022ef 100644
--- a/core/src/components/modal/test/sheet/index.html
+++ b/core/src/components/modal/test/sheet/index.html
@@ -85,10 +85,7 @@
         </ion-header>
 
         <ion-content class="ion-padding">
-          <ion-item>
-            <ion-label>Input outside modal</ion-label>
-            <ion-input id="root-input" legacy="true"></ion-input>
-          </ion-item>
+          <input id="root-input" />
 
           <ion-button id="sheet-modal" onclick="presentModal()">Present Sheet Modal</ion-button>
           <ion-button
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts b/core/src/components/modal/test/sheet/modal.e2e.ts
index 2caf86fad02..6e84cb7c622 100644
--- a/core/src/components/modal/test/sheet/modal.e2e.ts
+++ b/core/src/components/modal/test/sheet/modal.e2e.ts
@@ -52,7 +52,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       await ionModalDidPresent.next();
 
-      const input = page.locator('#root-input input').first();
+      const input = page.locator('#root-input').first();
       await input.click();
       await expect(input).toBeFocused();
     });
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Chrome-linux.png
index d87c4c3893f..699dd3af83c 100644
Binary files a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Firefox-linux.png
index 22afed2dab4..02ddc5ffef9 100644
Binary files a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Safari-linux.png
index 7d77a2c9d0b..8549847278e 100644
Binary files a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Chrome-linux.png
index cafd8ae3f2d..a8ef5a35df7 100644
Binary files a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Firefox-linux.png
index 5b7ab097e3b..c26490f27bd 100644
Binary files a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Safari-linux.png
index ab1a390d428..4ac26115828 100644
Binary files a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Safari-linux.png and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/modal/test/spec/index.html b/core/src/components/modal/test/spec/index.html
index d97fdd1de41..3060c5e0125 100644
--- a/core/src/components/modal/test/spec/index.html
+++ b/core/src/components/modal/test/spec/index.html
@@ -60,8 +60,7 @@
 
         <ion-content>
           <ion-item>
-            <ion-label>Use Custom Animation</ion-label>
-            <ion-toggle></ion-toggle>
+            <ion-toggle>Use Custom Animation</ion-toggle>
           </ion-item>
 
           <ion-list id="list"></ion-list>
diff --git a/core/src/components/modal/test/standalone/modal.e2e.ts b/core/src/components/modal/test/standalone/modal.e2e.ts
index eaaa7a824f0..d422f4451e5 100644
--- a/core/src/components/modal/test/standalone/modal.e2e.ts
+++ b/core/src/components/modal/test/standalone/modal.e2e.ts
@@ -15,7 +15,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       await ionModalDidDismiss.next();
 
-      await page.waitForSelector('ion-modal', { state: 'detached' });
+      await page.locator('ion-modal').waitFor({ state: 'detached' });
     });
   });
 });
diff --git a/core/src/components/note/test/a11y/note.e2e.ts b/core/src/components/note/test/a11y/note.e2e.ts
index bf7839a7632..f3bbb76faab 100644
--- a/core/src/components/note/test/a11y/note.e2e.ts
+++ b/core/src/components/note/test/a11y/note.e2e.ts
@@ -72,33 +72,33 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
 
         <ion-list>
           <ion-item>
-            <ion-note slot="start">Really really long note</ion-note>
+            <ion-note slot="start">123</ion-note>
             <ion-label>Label</ion-label>
           </ion-item>
 
           <ion-item>
             <ion-label>Label</ion-label>
-            <ion-note slot="end">Really really long note</ion-note>
+            <ion-note slot="end">123</ion-note>
           </ion-item>
 
           <ion-item>
-            <ion-note slot="start">Note</ion-note>
+            <ion-note slot="start">123</ion-note>
             <ion-label>Really really long label</ion-label>
           </ion-item>
 
           <ion-item>
             <ion-label>Really really long label</ion-label>
-            <ion-note slot="end">Note</ion-note>
+            <ion-note slot="end">123</ion-note>
           </ion-item>
 
           <ion-item>
-            <ion-note slot="start">Really really long note</ion-note>
+            <ion-note slot="start">123</ion-note>
             <ion-label>Really really long label</ion-label>
           </ion-item>
 
           <ion-item>
             <ion-label>Really really long label</ion-label>
-            <ion-note slot="end">Really really long note</ion-note>
+            <ion-note slot="end">123</ion-note>
           </ion-item>
         </ion-list>
       `,
diff --git a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Chrome-linux.png
index a5858136096..34ac4080910 100644
Binary files a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Firefox-linux.png
index 4273df06f3c..154ee519c78 100644
Binary files a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Safari-linux.png
index 7e665c4e970..5ffb775f75f 100644
Binary files a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Chrome-linux.png
index d2f8031710d..9c2ea22a522 100644
Binary files a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Firefox-linux.png b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Firefox-linux.png
index 3625d21a1e7..69f53a28ada 100644
Binary files a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Safari-linux.png
index 768ac8a47a6..9581c8d5505 100644
Binary files a/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Safari-linux.png and b/core/src/components/note/test/a11y/note.e2e.ts-snapshots/note-wrapping-label-scale-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/picker-internal/picker-internal.tsx b/core/src/components/picker-internal/picker-internal.tsx
index af696d21b53..be575405673 100644
--- a/core/src/components/picker-internal/picker-internal.tsx
+++ b/core/src/components/picker-internal/picker-internal.tsx
@@ -265,6 +265,7 @@ export class PickerInternal implements ComponentInterface {
 
       inputEl.focus();
     } else {
+      // TODO FW-5900 Use keydown instead
       el.addEventListener('keypress', this.onKeyPress);
       this.destroyKeypressListener = () => {
         el.removeEventListener('keypress', this.onKeyPress);
@@ -550,6 +551,21 @@ export class PickerInternal implements ComponentInterface {
           tabindex={-1}
           inputmode="numeric"
           type="number"
+          onKeyDown={(ev: KeyboardEvent) => {
+            /**
+             * The "Enter" key represents
+             * the user submitting their time
+             * selection, so we should blur the
+             * input (and therefore close the keyboard)
+             *
+             * Updating the picker's state to no longer
+             * be in input mode is handled in the onBlur
+             * callback below.
+             */
+            if (ev.key === 'Enter') {
+              this.inputEl?.blur();
+            }
+          }}
           ref={(el) => (this.inputEl = el)}
           onInput={() => this.onInputChange()}
           onBlur={() => this.exitInputMode()}
diff --git a/core/src/components/picker-internal/test/keyboard-entry/picker-internal.e2e.ts b/core/src/components/picker-internal/test/keyboard-entry/picker-internal.e2e.ts
index e9b0239fa68..d69fac2ad9c 100644
--- a/core/src/components/picker-internal/test/keyboard-entry/picker-internal.e2e.ts
+++ b/core/src/components/picker-internal/test/keyboard-entry/picker-internal.e2e.ts
@@ -133,5 +133,44 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await expect(ionChange).toHaveReceivedEventDetail({ text: '00', value: 12 });
       await expect(column).toHaveJSProperty('value', 12);
     });
+    test('pressing Enter should dismiss the keyboard', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/28325',
+      });
+      await page.setContent(
+        `
+        <ion-picker-internal>
+          <ion-picker-column-internal></ion-picker-column-internal>
+        </ion-picker-internal>
+
+        <script>
+          const column = document.querySelector('ion-picker-column-internal');
+          column.items = [
+            { text: '00', value: 12 },
+            { text: '01', value: 1 },
+            { text: '02', value: 2 },
+            { text: '03', value: 3 },
+            { text: '04', value: 4 },
+            { text: '05', value: 5 }
+          ];
+          column.value = 5;
+          column.numericInput = true;
+        </script>
+      `,
+        config
+      );
+
+      const column = page.locator('ion-picker-column-internal');
+      await column.click();
+
+      const input = page.locator('ion-picker-internal input');
+      await expect(input).toBeFocused();
+
+      // pressing Enter should blur the input and therefore close the keyboard
+      await page.keyboard.press('Enter');
+
+      await expect(input).not.toBeFocused();
+    });
   });
 });
diff --git a/core/src/components/popover/popover.scss b/core/src/components/popover/popover.scss
index 1568503adfa..4181df6e698 100644
--- a/core/src/components/popover/popover.scss
+++ b/core/src/components/popover/popover.scss
@@ -93,7 +93,7 @@
   z-index: $z-index-overlay-wrapper;
 }
 
-.popover-viewport {
+::slotted(.popover-viewport) {
   --ion-safe-area-top: 0px;
   --ion-safe-area-right: 0px;
   --ion-safe-area-bottom: 0px;
diff --git a/core/src/components/popover/test/basic/index.html b/core/src/components/popover/test/basic/index.html
index 9ef6ba840c6..058aa69e08f 100644
--- a/core/src/components/popover/test/basic/index.html
+++ b/core/src/components/popover/test/basic/index.html
@@ -212,7 +212,7 @@ <h1>Translucent Popover</h1>
           connectedCallback() {
             this.innerHTML = `
           <ion-content>
-            <ion-textarea rows="4" style="max-height: 44px; overflow-y: auto;" value="the cursor in this <ion-textarea>\nmust be able to be moved\nwith the arrow keys and\nhome and end keys"></ion-textarea>
+            <ion-textarea aria-label="textarea" rows="4" style="max-height: 44px; overflow-y: auto;" value="the cursor in this <ion-textarea>\nmust be able to be moved\nwith the arrow keys and\nhome and end keys"></ion-textarea>
             <textarea rows="4" style="display:block;width: 100%;border: 0;padding: 8px; max-height: 44px; overflow-y: auto">the cursor in this <textarea>\nmust be able to be moved\nwith the arrow keys and\nhome and end keys</textarea>
           </ion-content>
         `;
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-md-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-md-ltr-Mobile-Safari-linux.png
index 9e59e969659..d44cb67380d 100644
Binary files a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-md-ltr-Mobile-Safari-linux.png and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-header-popover-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-ltr-Mobile-Chrome-linux.png
index 363b4a2ca67..fa6d75156a1 100644
Binary files a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-ltr-Mobile-Firefox-linux.png
index dc664e06f2a..37464ec432d 100644
Binary files a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-ltr-Mobile-Safari-linux.png
index 39522779826..4985d8e90ce 100644
Binary files a/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/popover/test/basic/popover.e2e.ts-snapshots/popover-basic-translucent-header-popover-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/progress-bar/test/buffer/index.html b/core/src/components/progress-bar/test/buffer/index.html
index 9bd10190557..fd1cdfc1956 100644
--- a/core/src/components/progress-bar/test/buffer/index.html
+++ b/core/src/components/progress-bar/test/buffer/index.html
@@ -60,7 +60,7 @@
           <ion-progress-bar class="progressBarBuffer" value="0.20" buffer="0.4" reversed="true"></ion-progress-bar>
 
           <ion-item>
-            <ion-range legacy="true" pin="true" value="0" id="progressValueBuffer">
+            <ion-range aria-label="Buffer" pin="true" value="0" id="progressValueBuffer">
               <ion-label slot="start">0</ion-label>
               <ion-label slot="end">100</ion-label>
             </ion-range>
diff --git a/core/src/components/progress-bar/test/determinate/index.html b/core/src/components/progress-bar/test/determinate/index.html
index 2ffda64dc34..7b1d9c6b40a 100644
--- a/core/src/components/progress-bar/test/determinate/index.html
+++ b/core/src/components/progress-bar/test/determinate/index.html
@@ -69,7 +69,7 @@
           <ion-progress-bar id="progressBar"></ion-progress-bar>
 
           <ion-item>
-            <ion-range legacy="true" pin="true" value="0" id="progressValue">
+            <ion-range aria-label="Buffer" pin="true" value="0" id="progressValue">
               <ion-label slot="start">0</ion-label>
               <ion-label slot="end">100</ion-label>
             </ion-range>
diff --git a/core/src/components/radio-group/radio-group.tsx b/core/src/components/radio-group/radio-group.tsx
index 3e8a11c39b8..dce1c626169 100644
--- a/core/src/components/radio-group/radio-group.tsx
+++ b/core/src/components/radio-group/radio-group.tsx
@@ -130,7 +130,15 @@ export class RadioGroup implements ComponentInterface {
      * using the `name` attribute.
      */
     const selectedRadio = ev.target && (ev.target as HTMLElement).closest('ion-radio');
-    if (selectedRadio && selectedRadio.disabled === false) {
+    /**
+     * Our current disabled prop definition causes Stencil to mark it
+     * as optional. While this is not desired, fixing this behavior
+     * in Stencil is a significant breaking change, so this effort is
+     * being de-risked in STENCIL-917. Until then, we compromise
+     * here by checking for falsy `disabled` values instead of strictly
+     * checking `disabled === false`.
+     */
+    if (selectedRadio && !selectedRadio.disabled) {
       const currentValue = this.value;
       const newValue = selectedRadio.value;
       if (newValue !== currentValue) {
diff --git a/core/src/components/radio-group/test/radio-group-events.e2e.ts b/core/src/components/radio-group/test/radio-group-events.e2e.ts
index 12fb3243694..09deb2e7dbd 100644
--- a/core/src/components/radio-group/test/radio-group-events.e2e.ts
+++ b/core/src/components/radio-group/test/radio-group-events.e2e.ts
@@ -7,9 +7,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await page.setContent(
         `
       <ion-radio-group value="1">
-        <ion-radio value="1"></ion-radio>
-        <ion-radio value="2"></ion-radio>
-        <ion-radio value="3"></ion-radio>
+        <ion-radio value="1" aria-label="1"></ion-radio>
+        <ion-radio value="2" aria-label="2"></ion-radio>
+        <ion-radio value="3" aria-label="3"></ion-radio>
       </ion-radio-group>
     `,
         config
@@ -29,9 +29,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await page.setContent(
         `
       <ion-radio-group>
-        <ion-radio value="1"></ion-radio>
-        <ion-radio value="2"></ion-radio>
-        <ion-radio value="3"></ion-radio>
+        <ion-radio value="1" aria-label="1"></ion-radio>
+        <ion-radio value="2" aria-label="2"></ion-radio>
+        <ion-radio value="3" aria-label="3"></ion-radio>
       </ion-radio-group>
     `,
         config
@@ -51,9 +51,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await page.setContent(
         `
       <ion-radio-group value="1">
-        <ion-radio value="1"></ion-radio>
-        <ion-radio value="2"></ion-radio>
-        <ion-radio value="3"></ion-radio>
+        <ion-radio value="1" aria-label="1"></ion-radio>
+        <ion-radio value="2" aria-label="2"></ion-radio>
+        <ion-radio value="3" aria-label="3"></ion-radio>
       </ion-radio-group>
     `,
         config
@@ -72,9 +72,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await page.setContent(
         `
         <ion-radio-group value="1">
-          <ion-radio value="1"></ion-radio>
-          <ion-radio value="2"></ion-radio>
-          <ion-radio value="3"></ion-radio>
+          <ion-radio value="1" aria-label="1"></ion-radio>
+          <ion-radio value="2" aria-label="2"></ion-radio>
+          <ion-radio value="3" aria-label="3"></ion-radio>
         </ion-radio-group>
       `,
         config
@@ -94,9 +94,9 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         await page.setContent(
           `
         <ion-radio-group allow-empty-selection="true" value="1">
-          <ion-radio value="1"></ion-radio>
-          <ion-radio value="2"></ion-radio>
-          <ion-radio value="3"></ion-radio>
+          <ion-radio value="1" aria-label="1"></ion-radio>
+          <ion-radio value="2" aria-label="2"></ion-radio>
+          <ion-radio value="3" aria-label="3"></ion-radio>
         </ion-radio-group>
       `,
           config
diff --git a/core/src/components/radio/test/a11y/radio.e2e.ts b/core/src/components/radio/test/a11y/radio.e2e.ts
index eaa52c548c3..e5a375bc966 100644
--- a/core/src/components/radio/test/a11y/radio.e2e.ts
+++ b/core/src/components/radio/test/a11y/radio.e2e.ts
@@ -15,9 +15,8 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     });
   });
 
-  // TODO(FW-5715): re-enable test
-  test.skip(title('radio: keyboard navigation'), () => {
-    test.beforeEach(async ({ page }) => {
+  test.describe(title('radio: keyboard navigation'), () => {
+    test.beforeEach(async ({ page, browserName }) => {
       await page.setContent(
         `
       <ion-app>
@@ -59,6 +58,21 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     `,
         config
       );
+
+      if (browserName === 'webkit') {
+        const radio = page.locator('#first-group ion-radio').first();
+        /**
+         * Sometimes Safari does not focus the first radio.
+         * This is a workaround to ensure the first radio is focused.
+         *
+         * Wait for the first radio to be rendered before tabbing.
+         * This is necessary because the first radio may not be rendered
+         * when the page first loads.
+         *
+         * This would cause the first radio to be skipped when tabbing.
+         */
+        await radio.waitFor();
+      }
     });
 
     test('tabbing should switch between radio groups', async ({ page, pageUtils }) => {
diff --git a/core/src/components/radio/test/legacy/a11y/radio.e2e.ts b/core/src/components/radio/test/legacy/a11y/radio.e2e.ts
index af6ccbfeb2b..98ccc80a46c 100644
--- a/core/src/components/radio/test/legacy/a11y/radio.e2e.ts
+++ b/core/src/components/radio/test/legacy/a11y/radio.e2e.ts
@@ -6,9 +6,23 @@ import { configs, test } from '@utils/test/playwright';
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('radio: a11y'), () => {
-    test.beforeEach(async ({ page, skip }) => {
-      skip.browser('webkit', 'Tabbing is flaky in Safari');
+    test.beforeEach(async ({ page, browserName }) => {
       await page.goto(`/src/components/radio/test/legacy/a11y`, config);
+
+      if (browserName === 'webkit') {
+        const radio = page.locator('#first-group ion-radio').first();
+        /**
+         * Sometimes Safari does not focus the first radio.
+         * This is a workaround to ensure the first radio is focused.
+         *
+         * Wait for the first radio to be rendered before tabbing.
+         * This is necessary because the first radio may not be rendered
+         * when the page first loads.
+         *
+         * This would cause the first radio to be skipped when tabbing.
+         */
+        await radio.waitFor();
+      }
     });
     test('tabbing should switch between radio groups', async ({ page, pageUtils }) => {
       const firstGroupRadios = page.locator('#first-group ion-radio');
diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index 5b017cf464a..1df4ed9c3f5 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -141,6 +141,9 @@ export class Range implements ComponentInterface {
   /**
    * A callback used to format the pin text.
    * By default the pin text is set to `Math.round(value)`.
+   *
+   * See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
+   * if you need to access `this` from within the callback.
    */
   @Prop() pinFormatter: PinFormatter = (value: number): number => Math.round(value);
 
diff --git a/core/src/components/range/test/label/range.e2e.ts b/core/src/components/range/test/label/range.e2e.ts
index 409f4a32584..c8925d35a81 100644
--- a/core/src/components/range/test/label/range.e2e.ts
+++ b/core/src/components/range/test/label/range.e2e.ts
@@ -7,7 +7,7 @@ configs().forEach(({ title, screenshot, config }) => {
       test('should render a range with no visible label', async ({ page }) => {
         await page.setContent(
           `
-          <ion-range legacy="true"></ion-range>
+          <ion-range style="padding-inline-start: 20px;" aria-label="Range"></ion-range>
         `,
           config
         );
@@ -80,7 +80,7 @@ configs().forEach(({ title, screenshot, config }) => {
       test('should render a range with no visible label', async ({ page }) => {
         await page.setContent(
           `
-          <ion-range legacy="true">
+          <ion-range aria-label="Range">
             <ion-icon name="volume-off" slot="start"></ion-icon>
             <ion-icon name="volume-high" slot="end"></ion-icon>
           </ion-range>
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-ltr-Mobile-Chrome-linux.png
index a8bd6b11c28..d8a13f78bd5 100644
Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-ltr-Mobile-Firefox-linux.png
index 20b52f6e9ac..5d35bc38507 100644
Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-ltr-Mobile-Safari-linux.png
index bddfe5df4d4..684e7423632 100644
Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-rtl-Mobile-Chrome-linux.png
index 06db2a4e7f9..af420833d1d 100644
Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-rtl-Mobile-Firefox-linux.png
index dc8c9481d0c..f6f965e45f1 100644
Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-rtl-Mobile-Safari-linux.png
index dea69f8e08e..7bdc04cbb54 100644
Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-md-ltr-Mobile-Chrome-linux.png
index 85d942ab497..4b6e8680328 100644
Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-md-ltr-Mobile-Firefox-linux.png
index 7b7895e58a3..ee190b81449 100644
Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-md-ltr-Mobile-Safari-linux.png
index a90b592471a..cbf9560c2f3 100644
Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-md-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-md-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-md-rtl-Mobile-Chrome-linux.png
index f0bd79fc400..76e06285b38 100644
Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-md-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-md-rtl-Mobile-Firefox-linux.png
index cc3be5f0470..96af4347df1 100644
Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-md-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-md-rtl-Mobile-Safari-linux.png
index 5c72694bf06..ff22d0e6fa6 100644
Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-md-rtl-Mobile-Safari-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-items-no-label-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-ltr-Mobile-Chrome-linux.png
index a5cb69a9bd1..08b3147a598 100644
Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-ltr-Mobile-Firefox-linux.png
index 57d20c5029b..441056c219c 100644
Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-ltr-Mobile-Safari-linux.png
index c19eb0ce6a8..7a9bb8cdcc3 100644
Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-rtl-Mobile-Chrome-linux.png
index 16c3d3cd67e..396aeafc860 100644
Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-rtl-Mobile-Firefox-linux.png
index e2362a244b5..29bcaab3921 100644
Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-rtl-Mobile-Safari-linux.png
index a79e1039543..2dc0e0b2909 100644
Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-md-ltr-Mobile-Chrome-linux.png
index 424bba0f1b9..19109e87c7e 100644
Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-md-ltr-Mobile-Firefox-linux.png
index 146f76f1480..d1478b33a2d 100644
Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-md-ltr-Mobile-Safari-linux.png
index 1e489e8489c..e522577c7e0 100644
Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-md-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-md-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-md-rtl-Mobile-Chrome-linux.png
index 911c53b5502..41640c2beaf 100644
Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-md-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-md-rtl-Mobile-Firefox-linux.png
index 57b7484ee4a..8a26e9af16d 100644
Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-md-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-md-rtl-Mobile-Safari-linux.png
index 9371b3a85cf..c03f792fea0 100644
Binary files a/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-md-rtl-Mobile-Safari-linux.png and b/core/src/components/range/test/label/range.e2e.ts-snapshots/range-no-items-no-label-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/test/range-events.e2e.ts b/core/src/components/range/test/range-events.e2e.ts
index 3eeba5437b0..bc019628e12 100644
--- a/core/src/components/range/test/range-events.e2e.ts
+++ b/core/src/components/range/test/range-events.e2e.ts
@@ -20,7 +20,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         await page.setContent(
           `
           <div style="padding: 0 20px">
-            <ion-range value="20"></ion-range>
+            <ion-range aria-label="Range" value="20"></ion-range>
           </div>
         `,
           config
@@ -52,7 +52,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       });
 
       test('should emit start/end events, keyboard', async ({ page }) => {
-        await page.setContent(`<ion-range value="20"></ion-range>`, config);
+        await page.setContent(`<ion-range aria-label="Range" value="20"></ion-range>`, config);
 
         const rangeStart = await page.spyOnEvent('ionKnobMoveStart');
         const rangeEnd = await page.spyOnEvent('ionKnobMoveEnd');
diff --git a/core/src/components/refresher-content/refresher-content.tsx b/core/src/components/refresher-content/refresher-content.tsx
index 35b6554a77d..df94479c9d1 100644
--- a/core/src/components/refresher-content/refresher-content.tsx
+++ b/core/src/components/refresher-content/refresher-content.tsx
@@ -1,13 +1,13 @@
 import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h } from '@stencil/core';
 import { ENABLE_HTML_CONTENT_DEFAULT } from '@utils/config';
-import { isPlatform } from '@utils/platform';
 import { sanitizeDOMString } from '@utils/sanitization';
 import { arrowDown, caretBackSharp } from 'ionicons/icons';
 
 import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { IonicSafeString } from '../../utils/sanitization';
+import { supportsRubberBandScrolling } from '../refresher/refresher.utils';
 import type { SpinnerTypes } from '../spinner/spinner-configs';
 import { SPINNERS } from '../spinner/spinner-configs';
 
@@ -63,11 +63,17 @@ export class RefresherContent implements ComponentInterface {
 
   componentWillLoad() {
     if (this.pullingIcon === undefined) {
+      /**
+       * The native iOS refresher uses a spinner instead of
+       * an icon, so we need to see if this device supports
+       * the native iOS refresher.
+       */
+      const hasRubberBandScrolling = supportsRubberBandScrolling();
       const mode = getIonMode(this);
-      const overflowRefresher = (this.el.style as any).webkitOverflowScrolling !== undefined ? 'lines' : arrowDown;
+      const overflowRefresher = hasRubberBandScrolling ? 'lines' : arrowDown;
       this.pullingIcon = config.get(
         'refreshingIcon',
-        mode === 'ios' && isPlatform('mobile') ? config.get('spinner', overflowRefresher) : 'circular'
+        mode === 'ios' && hasRubberBandScrolling ? config.get('spinner', overflowRefresher) : 'circular'
       );
     }
     if (this.refreshingSpinner === undefined) {
diff --git a/core/src/components/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx
index f762ffe7ac2..8f234f3eb8e 100644
--- a/core/src/components/refresher/refresher.tsx
+++ b/core/src/components/refresher/refresher.tsx
@@ -25,6 +25,9 @@ import {
   translateElement,
 } from './refresher.utils';
 
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ */
 @Component({
   tag: 'ion-refresher',
   styleUrls: {
diff --git a/core/src/components/refresher/refresher.utils.ts b/core/src/components/refresher/refresher.utils.ts
index 8ae86de2581..4becab356d0 100644
--- a/core/src/components/refresher/refresher.utils.ts
+++ b/core/src/components/refresher/refresher.utils.ts
@@ -1,7 +1,6 @@
 import { writeTask } from '@stencil/core';
 import { createAnimation } from '@utils/animation/animation';
 import { clamp, componentOnReady, transitionEndAsync } from '@utils/helpers';
-import { isPlatform } from '@utils/platform';
 
 // MD Native Refresher
 // -----------------------------
@@ -195,6 +194,25 @@ export const translateElement = (el?: HTMLElement, value?: string, duration = 20
 // Utils
 // -----------------------------
 
+/**
+ * In order to use the native iOS refresher the device must support rubber band scrolling.
+ * As part of this, we need to exclude Desktop Safari because it has a slightly different rubber band effect that is not compatible with the native refresher in Ionic.
+ *
+ * We also need to be careful not to include devices that spoof their user agent.
+ * For example, when using iOS emulation in Chrome the user agent will be spoofed such that
+ * navigator.maxTouchPointer > 0. To work around this,
+ * we check to see if the apple-pay-logo is supported as a named image which is only
+ * true on Apple devices.
+ *
+ * We previously checked referencEl.style.webkitOverflowScrolling to explicitly check
+ * for rubber band support. However, this property was removed on iPadOS and it's possible
+ * that this will be removed on iOS in the future too.
+ *
+ */
+export const supportsRubberBandScrolling = () => {
+  return navigator.maxTouchPoints > 0 && CSS.supports('background: -webkit-named-image(apple-pay-logo-black)');
+};
+
 export const shouldUseNativeRefresher = async (referenceEl: HTMLIonRefresherElement, mode: string) => {
   const refresherContent = referenceEl.querySelector('ion-refresher-content');
   if (!refresherContent) {
@@ -209,15 +227,6 @@ export const shouldUseNativeRefresher = async (referenceEl: HTMLIonRefresherElem
   return (
     pullingSpinner !== null &&
     refreshingSpinner !== null &&
-    /**
-     * We use webkitOverflowScrolling for feature detection with rubber band scrolling
-     * on iOS. When doing referenceEl.style, webkitOverflowScrolling is undefined on non-iOS platforms.
-     * However, it will be the empty string on iOS.
-     * Note that we do not use getPropertyValue (and thus need to cast as any) because calling
-     * getPropertyValue('-webkit-overflow-scrolling') will return the empty string if it is not
-     * set on the element, even if the platform does not support that.
-     */
-    ((mode === 'ios' && isPlatform('mobile') && (referenceEl.style as any).webkitOverflowScrolling !== undefined) ||
-      mode === 'md')
+    ((mode === 'ios' && supportsRubberBandScrolling()) || mode === 'md')
   );
 };
diff --git a/core/src/components/refresher/test/test.utils.ts b/core/src/components/refresher/test/test.utils.ts
index 7454a889950..9bc15a7f0d2 100644
--- a/core/src/components/refresher/test/test.utils.ts
+++ b/core/src/components/refresher/test/test.utils.ts
@@ -14,7 +14,7 @@ import { dragElementByYAxis } from '@utils/test/playwright';
 const pullToRefresh = async (page: E2EPage, selector = 'body') => {
   const target = page.locator(selector);
 
-  await page.waitForSelector('ion-refresher.hydrated', { state: 'attached' });
+  await page.locator('ion-refresher.hydrated').waitFor({ state: 'attached' });
 
   const ev = await page.spyOnEvent('ionRefreshComplete');
 
diff --git a/core/src/components/reorder-group/test/basic/index.html b/core/src/components/reorder-group/test/basic/index.html
index bf44ef490ad..55e034c82ab 100644
--- a/core/src/components/reorder-group/test/basic/index.html
+++ b/core/src/components/reorder-group/test/basic/index.html
@@ -99,15 +99,13 @@
 
             <ion-reorder>
               <ion-item>
-                <ion-label> Item 11 (the whole item can be dragged) </ion-label>
-                <ion-toggle></ion-toggle>
+                <ion-toggle>Item 11 (the whole item can be dragged)</ion-toggle>
               </ion-item>
             </ion-reorder>
 
             <ion-reorder>
               <ion-item>
-                <ion-label> Item 12 (the whole item can be dragged) </ion-label>
-                <ion-checkbox></ion-checkbox>
+                <ion-checkbox>Item 12 (the whole item can be dragged)</ion-checkbox>
               </ion-item>
             </ion-reorder>
           </ion-reorder-group>
diff --git a/core/src/components/ripple-effect/test/basic/ripple-effect.e2e.ts b/core/src/components/ripple-effect/test/basic/ripple-effect.e2e.ts
index 5d128bdca1e..763db925d84 100644
--- a/core/src/components/ripple-effect/test/basic/ripple-effect.e2e.ts
+++ b/core/src/components/ripple-effect/test/basic/ripple-effect.e2e.ts
@@ -29,7 +29,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
         }
 
         // Waits for the ripple effect to be added
-        await page.waitForSelector('.ion-activated');
+        await page.locator('.ion-activated').waitFor();
 
         await expect(el).toHaveClass(/ion-activated/);
       });
@@ -56,7 +56,7 @@ const verifyRippleEffect = async (page: E2EPage, config: E2EPageOptions, selecto
     await page.mouse.down();
   }
 
-  await page.waitForSelector('.ion-activated');
+  await page.locator('.ion-activated').waitFor();
 
   await expect(el).toHaveClass(/ion-activated/);
 };
diff --git a/core/src/components/router/test/guards/index.html b/core/src/components/router/test/guards/index.html
index 0ea2d5ea900..9e9d0a29335 100644
--- a/core/src/components/router/test/guards/index.html
+++ b/core/src/components/router/test/guards/index.html
@@ -113,18 +113,15 @@
         </ion-list-header>
 
         <ion-item>
-          <ion-label>Allow Navigation</ion-label>
-          <ion-radio value="allow"></ion-radio>
+          <ion-radio value="allow">Allow Navigation</ion-radio>
         </ion-item>
 
         <ion-item>
-          <ion-label>Block Navigation</ion-label>
-          <ion-radio value="block"></ion-radio>
+          <ion-radio value="block">Block Navigation</ion-radio>
         </ion-item>
 
         <ion-item>
-          <ion-label>Redirect</ion-label>
-          <ion-radio value="redirect"></ion-radio>
+          <ion-radio value="redirect">Redirect</ion-radio>
         </ion-item>
       </ion-radio-group>
 
@@ -136,18 +133,15 @@
         </ion-list-header>
 
         <ion-item>
-          <ion-label>Allow Navigation</ion-label>
-          <ion-radio value="allow"></ion-radio>
+          <ion-radio value="allow">Allow Navigation</ion-radio>
         </ion-item>
 
         <ion-item>
-          <ion-label>Block Navigation</ion-label>
-          <ion-radio value="block"></ion-radio>
+          <ion-radio value="block">Block Navigation</ion-radio>
         </ion-item>
 
         <ion-item>
-          <ion-label>Redirect</ion-label>
-          <ion-radio value="redirect"></ion-radio>
+          <ion-radio value="redirect">Redirect</ion-radio>
         </ion-item>
       </ion-radio-group>
     </div>
diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
index c015d7e617b..b3113c9de7a 100644
--- a/core/src/components/segment/segment.tsx
+++ b/core/src/components/segment/segment.tsx
@@ -140,6 +140,14 @@ export class Segment implements ComponentInterface {
   async componentDidLoad() {
     this.setCheckedClasses();
 
+    /**
+     * If the value changes before watchers
+     * are setup, then the ionSelect watch callback
+     * will not fire. As a result, we manually
+     * fire this event when Select is loaded.
+     */
+    this.ionSelect.emit({ value: this.value });
+
     /**
      * We need to wait for the buttons to all be rendered
      * before we can scroll.
diff --git a/core/src/components/select-popover/test/basic/select-popover.e2e.ts-snapshots/select-popover-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select-popover/test/basic/select-popover.e2e.ts-snapshots/select-popover-diff-ios-ltr-Mobile-Firefox-linux.png
index 4dec8e799a4..4641d8231b7 100644
Binary files a/core/src/components/select-popover/test/basic/select-popover.e2e.ts-snapshots/select-popover-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/select-popover/test/basic/select-popover.e2e.ts-snapshots/select-popover-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select-popover/test/basic/select-popover.e2e.ts-snapshots/select-popover-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select-popover/test/basic/select-popover.e2e.ts-snapshots/select-popover-diff-md-ltr-Mobile-Chrome-linux.png
index be32b57e3ed..bc03433e804 100644
Binary files a/core/src/components/select-popover/test/basic/select-popover.e2e.ts-snapshots/select-popover-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select-popover/test/basic/select-popover.e2e.ts-snapshots/select-popover-diff-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select-popover/test/basic/select-popover.e2e.ts-snapshots/select-popover-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select-popover/test/basic/select-popover.e2e.ts-snapshots/select-popover-diff-md-ltr-Mobile-Firefox-linux.png
index b69e95f4d0f..46117a21927 100644
Binary files a/core/src/components/select-popover/test/basic/select-popover.e2e.ts-snapshots/select-popover-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select-popover/test/basic/select-popover.e2e.ts-snapshots/select-popover-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select-popover/test/basic/select-popover.e2e.ts-snapshots/select-popover-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/select-popover/test/basic/select-popover.e2e.ts-snapshots/select-popover-diff-md-ltr-Mobile-Safari-linux.png
index a1a2a2e34e8..080118c5902 100644
Binary files a/core/src/components/select-popover/test/basic/select-popover.e2e.ts-snapshots/select-popover-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select-popover/test/basic/select-popover.e2e.ts-snapshots/select-popover-diff-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select-popover/test/basic/select-popover.e2e.ts-snapshots/select-popover-multiple-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select-popover/test/basic/select-popover.e2e.ts-snapshots/select-popover-multiple-diff-ios-ltr-Mobile-Firefox-linux.png
index 8bf02b52487..f1898900a8c 100644
Binary files a/core/src/components/select-popover/test/basic/select-popover.e2e.ts-snapshots/select-popover-multiple-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/select-popover/test/basic/select-popover.e2e.ts-snapshots/select-popover-multiple-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select-popover/test/basic/select-popover.e2e.ts-snapshots/select-popover-multiple-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select-popover/test/basic/select-popover.e2e.ts-snapshots/select-popover-multiple-diff-md-ltr-Mobile-Firefox-linux.png
index 93e0db8dd4e..be863624a12 100644
Binary files a/core/src/components/select-popover/test/basic/select-popover.e2e.ts-snapshots/select-popover-multiple-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select-popover/test/basic/select-popover.e2e.ts-snapshots/select-popover-multiple-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/select.ios.scss b/core/src/components/select/select.ios.scss
index 0f8232a59d7..76c79ce72e0 100644
--- a/core/src/components/select/select.ios.scss
+++ b/core/src/components/select/select.ios.scss
@@ -38,3 +38,25 @@
 :host(.select-disabled) {
   opacity: $select-ios-disabled-opacity;
 }
+
+// Start/End Slots
+// ----------------------------------------------------------------
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot="start"].button-has-icon-only),
+::slotted(ion-button[slot="end"].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-top: 0;
+  --padding-bottom: 0;
+
+  aspect-ratio: 1;
+}
diff --git a/core/src/components/select/select.md.scss b/core/src/components/select/select.md.scss
index 47fccd28588..005c54e7f7c 100644
--- a/core/src/components/select/select.md.scss
+++ b/core/src/components/select/select.md.scss
@@ -155,3 +155,27 @@
 :host(.select-disabled) {
   opacity: $select-md-disabled-opacity;
 }
+
+// Start/End Slots
+// ----------------------------------------------------------------
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot="start"].button-has-icon-only),
+::slotted(ion-button[slot="end"].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 8px;
+  --padding-end: 8px;
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+
+  aspect-ratio: 1;
+
+  min-height: 40px;
+}
diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss
index f0aa860cedd..965f0a43206 100644
--- a/core/src/components/select/select.scss
+++ b/core/src/components/select/select.scss
@@ -592,8 +592,10 @@ button {
 
 ::slotted([slot="start"]) {
   margin-inline-end: $form-control-label-margin;
+  margin-inline-start: 0;
 }
 
 ::slotted([slot="end"]) {
   margin-inline-start: $form-control-label-margin;
+  margin-inline-end: 0;
 }
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index b4ed9aed43c..9fe26349bb1 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -776,8 +776,27 @@ export class Select implements ComponentInterface {
        * We ensure the target isn't this element in case the select is slotted
        * in, for example, an item. This would prevent the select from ever
        * being opened since the element itself has slot="start"/"end".
+       *
+       * Clicking a slotted element also causes a click
+       * on the <label> element (since it wraps the slots).
+       * Clicking <label> dispatches another click event on
+       * the native form control that then bubbles up to this
+       * listener. This additional event targets the host
+       * element, so the select overlay is opened.
+       *
+       * When the slotted elements are clicked (and therefore
+       * the ancestor <label> element) we want to prevent the label
+       * from dispatching another click event.
+       *
+       * Do not call stopPropagation() because this will cause
+       * click handlers on the slotted elements to never fire in React.
+       * When developers do onClick in React a native "click" listener
+       * is added on the root element, not the slotted element. When that
+       * native click listener fires, React then dispatches the synthetic
+       * click event on the slotted element. However, if stopPropagation
+       * is called then the native click event will never bubble up
+       * to the root element.
        */
-      ev.stopPropagation();
       ev.preventDefault();
     }
   };
diff --git a/core/src/components/select/test/disabled/select.e2e.ts b/core/src/components/select/test/disabled/select.e2e.ts
index 831d471d70f..9bc9389a3ad 100644
--- a/core/src/components/select/test/disabled/select.e2e.ts
+++ b/core/src/components/select/test/disabled/select.e2e.ts
@@ -14,7 +14,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       await page.setContent(
         `
-        <ion-select interface="popover">
+        <ion-select aria-label="Select" interface="popover">
           <ion-select-option value="a" disabled="true">A</ion-select-option>
           <ion-select-option value="b">B</ion-select-option>
         </ion-select>
diff --git a/core/src/components/select/test/select.spec.tsx b/core/src/components/select/test/select.spec.tsx
index 4e7bedb6269..1cfd4e8bb87 100644
--- a/core/src/components/select/test/select.spec.tsx
+++ b/core/src/components/select/test/select.spec.tsx
@@ -69,3 +69,31 @@ describe('ion-select', () => {
     expect(slotEl).toBe(null);
   });
 });
+
+describe('select: slot interactivity', () => {
+  test('should not prevent click handlers from firing', async () => {
+    // https://github.com/ionic-team/ionic-framework/issues/28818
+    const divSpy = jest.fn();
+    const buttonSpy = jest.fn();
+
+    const page = await newSpecPage({
+      components: [Select],
+      template: () => (
+        <div onClick={divSpy}>
+          <ion-select label="Label Prop Text">
+            <button slot="end" onClick={buttonSpy}>
+              Button
+            </button>
+          </ion-select>
+        </div>
+      ),
+    });
+
+    const button = page.body.querySelector('button')!;
+
+    await button.click();
+
+    expect(buttonSpy).toHaveBeenCalled();
+    expect(divSpy).toHaveBeenCalled();
+  });
+});
diff --git a/core/src/components/select/test/slot/select.e2e.ts b/core/src/components/select/test/slot/select.e2e.ts
index 613db6586dd..1135c61e333 100644
--- a/core/src/components/select/test/slot/select.e2e.ts
+++ b/core/src/components/select/test/slot/select.e2e.ts
@@ -8,7 +8,9 @@ configs().forEach(({ title, screenshot, config }) => {
         `
           <ion-select label-placement="start" fill="solid" placeholder="Select weight" label="Weight">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-select>
         `,
         config
@@ -23,7 +25,9 @@ configs().forEach(({ title, screenshot, config }) => {
         `
           <ion-select label-placement="floating" fill="solid" placeholder="Select weight" label="Weight">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-select>
         `,
         config
diff --git a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-ltr-Mobile-Chrome-linux.png
index c37f1dc0a2e..d9210774de7 100644
Binary files a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-ltr-Mobile-Firefox-linux.png
index 76ac34b319c..c362d689d96 100644
Binary files a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-ltr-Mobile-Safari-linux.png
index 437697cc2ae..01d6d287b95 100644
Binary files a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-rtl-Mobile-Chrome-linux.png
index afa566933c9..8ec2f782ec1 100644
Binary files a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-rtl-Mobile-Firefox-linux.png
index 845dc40f598..2bd0c455b02 100644
Binary files a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-rtl-Mobile-Safari-linux.png
index ff7fa0dfd95..26dd750ade5 100644
Binary files a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-ltr-Mobile-Chrome-linux.png
index c81529ec692..8e765c91a12 100644
Binary files a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-ltr-Mobile-Firefox-linux.png
index 9e4b6281921..283a8151e53 100644
Binary files a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-ltr-Mobile-Safari-linux.png
index 5a8595b77a9..fb86a73bc10 100644
Binary files a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-rtl-Mobile-Chrome-linux.png
index df467de427b..c348695f980 100644
Binary files a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-rtl-Mobile-Firefox-linux.png
index f0b122c3ea1..174d7e38a57 100644
Binary files a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-rtl-Mobile-Safari-linux.png
index 879da6fd871..92c7ab02844 100644
Binary files a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-floating-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-ltr-Mobile-Chrome-linux.png
index 0451d5194b7..3c4f13cbafc 100644
Binary files a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-ltr-Mobile-Firefox-linux.png
index 3ec8c09a7c1..9bcee169407 100644
Binary files a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-ltr-Mobile-Safari-linux.png
index 7836273f9c4..3b091f32e3d 100644
Binary files a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-rtl-Mobile-Chrome-linux.png
index 9d03a02dd8b..ff341ea7c9b 100644
Binary files a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-rtl-Mobile-Firefox-linux.png
index 875f4ff81d3..c31d7dc49f7 100644
Binary files a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-rtl-Mobile-Safari-linux.png
index dbbe461b479..79c3aa9fa68 100644
Binary files a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-ltr-Mobile-Chrome-linux.png
index 2ab98c6836e..9e8899cdb7b 100644
Binary files a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-ltr-Mobile-Firefox-linux.png
index a9f73d92422..144a694f35e 100644
Binary files a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-ltr-Mobile-Safari-linux.png
index d1b5262f8d3..588dd01c1a2 100644
Binary files a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-rtl-Mobile-Chrome-linux.png
index 19d2af060f4..03e5bc58d43 100644
Binary files a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-rtl-Mobile-Firefox-linux.png
index 7bb895e5a8d..2bc4a69306c 100644
Binary files a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-rtl-Mobile-Safari-linux.png
index 10e00b7f5df..f2e37f2d170 100644
Binary files a/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/slot/select.e2e.ts-snapshots/select-slots-label-start-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/spinner/spinner-interface.ts b/core/src/components/spinner/spinner-interface.ts
index 0037163378d..f2ab24691e2 100644
--- a/core/src/components/spinner/spinner-interface.ts
+++ b/core/src/components/spinner/spinner-interface.ts
@@ -16,7 +16,7 @@ export interface SpinnerData {
   y2?: number;
   cx?: number;
   cy?: number;
-  style: any; // TODO(FW-2832): type
+  style: { [key: string]: string | undefined };
   viewBox?: string;
   transform?: string;
 }
diff --git a/core/src/components/spinner/spinner.tsx b/core/src/components/spinner/spinner.tsx
index d937f4fb0a5..61439f6021f 100644
--- a/core/src/components/spinner/spinner.tsx
+++ b/core/src/components/spinner/spinner.tsx
@@ -54,7 +54,7 @@ export class Spinner implements ComponentInterface {
     const spinnerName = self.getName();
     const spinner = SPINNERS[spinnerName] ?? SPINNERS['lines'];
     const duration = typeof self.duration === 'number' && self.duration > 10 ? self.duration : spinner.dur;
-    const svgs: any[] = []; // TODO(FW-2832): type
+    const svgs: SVGElement[] = [];
 
     if (spinner.circles !== undefined) {
       for (let i = 0; i < spinner.circles; i++) {
diff --git a/core/src/components/split-pane/split-pane.scss b/core/src/components/split-pane/split-pane.scss
index 6cdf35b3372..d4866c712d3 100644
--- a/core/src/components/split-pane/split-pane.scss
+++ b/core/src/components/split-pane/split-pane.scss
@@ -43,13 +43,22 @@
 
   position: relative;
 
-  /* stylelint-disable-next-line declaration-no-important */
-  box-shadow: none !important;
+  box-shadow: none;
   z-index: 0;
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-main) {
   flex: 1;
+
+  /**
+   * Content can overflow outside of a router outlet
+   * or a nav container to allow for the translucent
+   * tab bar effect to work. However, this can cause
+   * iOS page transitions to flow outside of the container
+   * and overlap the menu on larger viewports. As a result,
+   * we disable the overflow when that is the case.
+   */
+  overflow: hidden;
 }
 
 :host(.split-pane-visible) ::slotted(.split-pane-side:not(ion-menu)),
diff --git a/core/src/components/split-pane/split-pane.tsx b/core/src/components/split-pane/split-pane.tsx
index f40fa756440..c78d115ab40 100644
--- a/core/src/components/split-pane/split-pane.tsx
+++ b/core/src/components/split-pane/split-pane.tsx
@@ -25,7 +25,7 @@ const QUERY: { [key: string]: string } = {
   shadow: true,
 })
 export class SplitPane implements ComponentInterface {
-  private rmL: any;
+  private rmL?: () => void;
 
   @Element() el!: HTMLElement;
   @State() visible = false;
@@ -65,7 +65,7 @@ export class SplitPane implements ComponentInterface {
   async connectedCallback() {
     // TODO: connectedCallback is fired in CE build
     // before WC is defined. This needs to be fixed in Stencil.
-    if (typeof (customElements as any) !== 'undefined' && (customElements as any) != null) {
+    if (typeof customElements !== 'undefined' && customElements != null) {
       await customElements.whenDefined('ion-split-pane');
     }
     this.styleChildren();
@@ -119,8 +119,8 @@ export class SplitPane implements ComponentInterface {
 
     const mediaList = window.matchMedia(mediaQuery);
     // TODO FW-5869
-    (mediaList as any).addListener(callback as any);
-    this.rmL = () => (mediaList as any).removeListener(callback as any);
+    mediaList.addListener(callback as any);
+    this.rmL = () => mediaList.removeListener(callback as any);
     this.visible = mediaList.matches;
   }
 
diff --git a/core/src/components/textarea/test/clear-on-edit/textarea.e2e.ts b/core/src/components/textarea/test/clear-on-edit/textarea.e2e.ts
index f085f46ee8b..898b63a2d6f 100644
--- a/core/src/components/textarea/test/clear-on-edit/textarea.e2e.ts
+++ b/core/src/components/textarea/test/clear-on-edit/textarea.e2e.ts
@@ -1,6 +1,8 @@
 import { expect } from '@playwright/test';
 import { test, configs } from '@utils/test/playwright';
 
+const IGNORED_KEYS = ['Tab', 'Shift', 'Meta', 'Alt', 'Control'];
+
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('textarea: clearOnEdit'), () => {
     test('should clear when typed into', async ({ page }) => {
@@ -33,5 +35,64 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       await expect(textarea).toHaveJSProperty('value', 'abc');
     });
+
+    test('should not clear the textarea if it does not have an initial value when typing', async ({ page }) => {
+      await page.setContent(`<ion-textarea label="textarea" value="" clear-on-edit="true"></ion-textarea>`, config);
+
+      const textarea = page.locator('ion-textarea');
+
+      await textarea.click();
+      await textarea.type('hello world');
+
+      await expect(textarea).toHaveJSProperty('value', 'hello world');
+    });
+
+    IGNORED_KEYS.forEach((ignoredKey: string) => {
+      test(`should not clear when ${ignoredKey} is pressed`, async ({ page, skip }) => {
+        skip.browser(
+          (browserName: string) => browserName === 'firefox' && ignoredKey === 'Meta',
+          'Firefox incorrectly adds "OS" to the textarea when pressing the Meta key on Linux'
+        );
+        await page.setContent(
+          `<ion-textarea value="abc" clear-on-edit="true" aria-label="textarea"></ion-textarea>`,
+          config
+        );
+
+        const textarea = page.locator('ion-textarea');
+        await textarea.locator('textarea').focus();
+
+        await page.keyboard.press(ignoredKey);
+        await page.waitForChanges();
+
+        await expect(textarea).toHaveJSProperty('value', 'abc');
+      });
+    });
+
+    test('should clear after when pressing valid key after pressing ignored key', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/28633',
+      });
+
+      await page.setContent(
+        `<ion-textarea value="abc" clear-on-edit="true" aria-label="textarea"></ion-textarea>`,
+        config
+      );
+
+      const textarea = page.locator('ion-textarea');
+      await textarea.locator('textarea').focus();
+
+      // ignored
+      await page.keyboard.press('Shift');
+      await page.waitForChanges();
+
+      await expect(textarea).toHaveJSProperty('value', 'abc');
+
+      // allowed
+      await page.keyboard.press('a');
+      await page.waitForChanges();
+
+      await expect(textarea).toHaveJSProperty('value', 'a');
+    });
   });
 });
diff --git a/core/src/components/textarea/test/slot/textarea.e2e.ts b/core/src/components/textarea/test/slot/textarea.e2e.ts
index 969fd2ebe74..6adee37438f 100644
--- a/core/src/components/textarea/test/slot/textarea.e2e.ts
+++ b/core/src/components/textarea/test/slot/textarea.e2e.ts
@@ -8,7 +8,9 @@ configs().forEach(({ title, screenshot, config }) => {
         `
           <ion-textarea label-placement="start" fill="solid" value="100" label="Weight">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-textarea>
         `,
         config
@@ -23,7 +25,9 @@ configs().forEach(({ title, screenshot, config }) => {
         `
           <ion-textarea label-placement="floating" fill="solid" value="100" label="Weight">
             <ion-icon slot="start" name="barbell" aria-hidden="true"></ion-icon>
-            <ion-label slot="end">lbs</ion-label>
+            <ion-button slot="end" aria-label="Show/hide password">
+              <ion-icon slot="icon-only" name="lock-closed" aria-hidden="true"></ion-icon>
+            </ion-button>
           </ion-textarea>
         `,
         config
diff --git a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-ltr-Mobile-Chrome-linux.png
index ae849d45084..626556b776b 100644
Binary files a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-ltr-Mobile-Firefox-linux.png
index 35e8c090281..8d06cc7ad86 100644
Binary files a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-ltr-Mobile-Safari-linux.png
index 35015881b2e..9e647e54820 100644
Binary files a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-rtl-Mobile-Chrome-linux.png
index 56bbdfdcb84..a075b02493f 100644
Binary files a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-rtl-Mobile-Firefox-linux.png
index 239c72bc490..370229a519c 100644
Binary files a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-rtl-Mobile-Safari-linux.png
index bd998de174f..791be12bee7 100644
Binary files a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-ltr-Mobile-Chrome-linux.png
index a6a159f2647..0b8c187c5f2 100644
Binary files a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-ltr-Mobile-Firefox-linux.png
index b70ef279ba8..cb769dd853b 100644
Binary files a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-ltr-Mobile-Safari-linux.png
index fda46edcdb0..566349147ab 100644
Binary files a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-rtl-Mobile-Chrome-linux.png
index 3e7f6f366ea..df37456e84f 100644
Binary files a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-rtl-Mobile-Firefox-linux.png
index 83c083cd1b7..32ba2fca8ca 100644
Binary files a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-rtl-Mobile-Safari-linux.png
index c444ae1cccd..7caae468848 100644
Binary files a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-rtl-Mobile-Safari-linux.png and b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-floating-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-ltr-Mobile-Chrome-linux.png
index 19cdc900d80..be16c766169 100644
Binary files a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-ltr-Mobile-Firefox-linux.png
index d95431b9347..1d2793daa96 100644
Binary files a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-ltr-Mobile-Safari-linux.png
index 03000325fa2..fe7cf3bed77 100644
Binary files a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-rtl-Mobile-Chrome-linux.png
index 4206f367160..b190c3ef2d1 100644
Binary files a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-rtl-Mobile-Firefox-linux.png
index ab353f885de..84cf6c4a166 100644
Binary files a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-rtl-Mobile-Safari-linux.png
index 93b10e6f137..0f6c71c669c 100644
Binary files a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-ltr-Mobile-Chrome-linux.png
index bd989b6cb20..16f1009a013 100644
Binary files a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-ltr-Mobile-Firefox-linux.png
index 21169890403..fd08b3d8489 100644
Binary files a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-ltr-Mobile-Safari-linux.png
index 5f5a4d71dbb..b16d5acd0e4 100644
Binary files a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-ltr-Mobile-Safari-linux.png and b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-rtl-Mobile-Chrome-linux.png
index 8785595653e..61ab13df404 100644
Binary files a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-rtl-Mobile-Firefox-linux.png
index 348cbef0151..ec8ac511bac 100644
Binary files a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-rtl-Mobile-Safari-linux.png
index c3e54c9d6af..7d24af4780a 100644
Binary files a/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-rtl-Mobile-Safari-linux.png and b/core/src/components/textarea/test/slot/textarea.e2e.ts-snapshots/textarea-slots-label-start-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/textarea/test/textarea-events.e2e.ts b/core/src/components/textarea/test/textarea-events.e2e.ts
index d463061023a..6b30f7a386f 100644
--- a/core/src/components/textarea/test/textarea-events.e2e.ts
+++ b/core/src/components/textarea/test/textarea-events.e2e.ts
@@ -8,7 +8,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
   test.describe(title('textarea: events: ionChange'), () => {
     test.describe('when the textarea is blurred', () => {
       test('should emit if the value has changed', async ({ page }) => {
-        await page.setContent(`<ion-textarea></ion-textarea>`, config);
+        await page.setContent(`<ion-textarea aria-label="textarea"></ion-textarea>`, config);
 
         const nativeTextarea = page.locator('ion-textarea textarea');
         const ionChangeSpy = await page.spyOnEvent('ionChange');
@@ -24,7 +24,10 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       });
 
       test('should emit if the textarea is cleared with an initial value', async ({ page }) => {
-        await page.setContent(`<ion-textarea clear-on-edit="true" value="123"></ion-textarea>`, config);
+        await page.setContent(
+          `<ion-textarea aria-label="textarea" clear-on-edit="true" value="123"></ion-textarea>`,
+          config
+        );
 
         const textarea = page.locator('ion-textarea');
         const nativeTextarea = textarea.locator('textarea');
@@ -41,7 +44,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       });
 
       test('should not emit if the value is set programmatically', async ({ page }) => {
-        await page.setContent(`<ion-textarea></ion-textarea>`, config);
+        await page.setContent(`<ion-textarea aria-label="textarea"></ion-textarea>`, config);
 
         const textarea = page.locator('ion-textarea');
         const ionChangeSpy = await page.spyOnEvent('ionChange');
@@ -67,7 +70,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
   });
   test.describe(title('textarea: events: ionInput'), () => {
     test('should emit when the user types', async ({ page }) => {
-      await page.setContent(`<ion-textarea value="some value"></ion-textarea>`, config);
+      await page.setContent(`<ion-textarea aria-label="textarea" value="some value"></ion-textarea>`, config);
 
       const ionInputSpy = await page.spyOnEvent('ionInput');
 
diff --git a/core/src/components/textarea/textarea.ios.scss b/core/src/components/textarea/textarea.ios.scss
index b90a7d441e9..3c8ec47ffcf 100644
--- a/core/src/components/textarea/textarea.ios.scss
+++ b/core/src/components/textarea/textarea.ios.scss
@@ -40,3 +40,25 @@
 :host(.textarea-disabled) {
   opacity: #{$textarea-ios-disabled-opacity};
 }
+
+// Start/End Slots
+// ----------------------------------------------------------------
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot="start"].button-has-icon-only),
+::slotted(ion-button[slot="end"].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 0;
+  --padding-end: 0;
+  --padding-top: 0;
+  --padding-bottom: 0;
+
+  aspect-ratio: 1;
+}
diff --git a/core/src/components/textarea/textarea.md.scss b/core/src/components/textarea/textarea.md.scss
index c014bca63e0..16dfa2e147a 100644
--- a/core/src/components/textarea/textarea.md.scss
+++ b/core/src/components/textarea/textarea.md.scss
@@ -109,3 +109,27 @@
 :host(.textarea-shape-round) {
   --border-radius: 16px;
 }
+
+// Start/End Slots
+// ----------------------------------------------------------------
+
+/**
+ * Slotted buttons have a lot of default padding that can
+ * cause them to look misaligned from other pieces such
+ * as the control's label, especially when using a clear
+ * fill. We also make them circular to ensure that non-
+ * clear buttons and the focus/hover state on clear ones
+ * don't look too crowded.
+ */
+::slotted(ion-button[slot="start"].button-has-icon-only),
+::slotted(ion-button[slot="end"].button-has-icon-only) {
+  --border-radius: 50%;
+  --padding-start: 8px;
+  --padding-end: 8px;
+  --padding-top: 8px;
+  --padding-bottom: 8px;
+
+  aspect-ratio: 1;
+
+  min-height: 40px;
+}
diff --git a/core/src/components/textarea/textarea.scss b/core/src/components/textarea/textarea.scss
index d75895d5936..31b080036c7 100644
--- a/core/src/components/textarea/textarea.scss
+++ b/core/src/components/textarea/textarea.scss
@@ -753,8 +753,10 @@
 
 ::slotted([slot="start"]) {
   margin-inline-end: $form-control-label-margin;
+  margin-inline-start: 0;
 }
 
 ::slotted([slot="end"]) {
   margin-inline-start: $form-control-label-margin;
+  margin-inline-end: 0;
 }
diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx
index f971c8ee651..6684d09906b 100644
--- a/core/src/components/textarea/textarea.tsx
+++ b/core/src/components/textarea/textarea.tsx
@@ -222,6 +222,9 @@ export class Textarea implements ComponentInterface {
   /**
    * A callback used to format the counter text.
    * By default the counter text is set to "itemLength / maxLength".
+   *
+   * See https://ionicframework.com/docs/troubleshooting/runtime#accessing-this
+   * if you need to access `this` from within the callback.
    */
   @Prop() counterFormatter?: (inputLength: number, maxLength: number) => string;
 
@@ -459,15 +462,41 @@ export class Textarea implements ComponentInterface {
     if (!this.clearOnEdit) {
       return;
     }
+
+    /**
+     * The following keys do not modify the
+     * contents of the input. As a result, pressing
+     * them should not edit the textarea.
+     *
+     * We can't check to see if the value of the textarea
+     * was changed because we call checkClearOnEdit
+     * in a keydown listener, and the key has not yet
+     * been added to the textarea.
+     *
+     * Unlike ion-input, the "Enter" key does modify the
+     * textarea by adding a new line, so "Enter" is not
+     * included in the IGNORED_KEYS array.
+     */
+    const IGNORED_KEYS = ['Tab', 'Shift', 'Meta', 'Alt', 'Control'];
+    const pressedIgnoredKey = IGNORED_KEYS.includes(ev.key);
+
     /**
      * Clear the textarea if the control has not been previously cleared
      * during focus.
      */
-    if (!this.didTextareaClearOnEdit && this.hasValue() && ev.key !== 'Tab') {
+    if (!this.didTextareaClearOnEdit && this.hasValue() && !pressedIgnoredKey) {
       this.value = '';
       this.emitInputChange(ev);
     }
-    this.didTextareaClearOnEdit = true;
+
+    /**
+     * Pressing an IGNORED_KEYS first and
+     * then an allowed key will cause the input to not
+     * be cleared.
+     */
+    if (!pressedIgnoredKey) {
+      this.didTextareaClearOnEdit = true;
+    }
   }
 
   private focusChange() {
diff --git a/core/src/components/toast/toast-interface.ts b/core/src/components/toast/toast-interface.ts
index d5ddff69e45..af320f59ba5 100644
--- a/core/src/components/toast/toast-interface.ts
+++ b/core/src/components/toast/toast-interface.ts
@@ -1,4 +1,4 @@
-import type { AnimationBuilder, Color, Mode } from '../../interface';
+import type { AnimationBuilder, Color, LiteralUnion, Mode } from '../../interface';
 import type { IonicSafeString } from '../../utils/sanitization';
 
 export interface ToastOptions {
@@ -33,8 +33,7 @@ export interface ToastButton {
   text?: string;
   icon?: string;
   side?: 'start' | 'end';
-  role?: 'cancel' | string;
-
+  role?: LiteralUnion<'cancel', string>;
   /**
    * @deprecated Use the toast button's CSS Shadow Parts instead.
    */
diff --git a/core/src/components/toggle/test/enable-on-off-labels/index.html b/core/src/components/toggle/test/enable-on-off-labels/index.html
index 4e18d63498d..28483e3203c 100644
--- a/core/src/components/toggle/test/enable-on-off-labels/index.html
+++ b/core/src/components/toggle/test/enable-on-off-labels/index.html
@@ -177,8 +177,7 @@
           <ion-popover class="options-popover" trigger="popover-trigger">
             <ion-list lines="none">
               <ion-item id="dark-mode">
-                <ion-label>Dark Mode</ion-label>
-                <ion-checkbox slot="end"></ion-checkbox>
+                <ion-checkbox>Dark Mode</ion-checkbox>
               </ion-item>
             </ion-list>
           </ion-popover>
diff --git a/core/src/css/core.scss b/core/src/css/core.scss
index 6e32a24937d..492b807447b 100644
--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@@ -220,16 +220,6 @@ html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {
   }
 }
 
-// TODO: remove once Safari 11.2 is no longer supported
-@supports (padding-top: constant(safe-area-inset-top)) {
-  html {
-    --ion-safe-area-top: constant(safe-area-inset-top);
-    --ion-safe-area-bottom: constant(safe-area-inset-bottom);
-    --ion-safe-area-left: constant(safe-area-inset-left);
-    --ion-safe-area-right: constant(safe-area-inset-right);
-  }
-}
-
 @supports (padding-top: env(safe-area-inset-top)) {
   html {
     --ion-safe-area-top: env(safe-area-inset-top);
@@ -260,9 +250,36 @@ ion-card-header.ion-color .ion-inherit-color {
   cursor: pointer;
   touch-action: manipulation;
 
-  // the containing element itself should be clickable but
-  // everything inside of it should not clickable when menu is open
+  /**
+   * The containing element itself should be clickable but
+   * everything inside of it should not clickable when menu is open
+   *
+   * Setting pointer-events after scrolling has already started
+   * will not cancel scrolling which is why we also set
+   * overflow-y below.
+   */
   pointer-events: none;
+
+  /**
+   * This accounts for scenarios where the main content itself
+   * is scrollable.
+   */
+  overflow-y: hidden;
+}
+
+/**
+ * Setting overflow cancels any in-progress scrolling
+ * when the menu opens. This prevents users from accidentally
+ * scrolling the main content while also dragging the menu open.
+ * The code below accounts for both ion-content and then custom
+ * scroll containers within ion-content (such as virtual scroll)
+ */
+.menu-content-open ion-content {
+  --overflow: hidden;
+}
+
+.menu-content-open .ion-content-scroll-host {
+  overflow: hidden;
 }
 
 .ios .menu-content-reveal {
diff --git a/core/src/interface.d.ts b/core/src/interface.d.ts
index 3ac6705855b..83ae6e2b6b3 100644
--- a/core/src/interface.d.ts
+++ b/core/src/interface.d.ts
@@ -131,7 +131,7 @@ export type PredefinedColors =
   | 'medium'
   | 'dark';
 
-type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
+export type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
 
 export type Color = LiteralUnion<PredefinedColors, string>;
 export type Mode = 'ios' | 'md';
diff --git a/core/src/themes/test/css-variables/index.html b/core/src/themes/test/css-variables/index.html
index 97ce01d8ef8..5b037535b4a 100644
--- a/core/src/themes/test/css-variables/index.html
+++ b/core/src/themes/test/css-variables/index.html
@@ -250,19 +250,16 @@
 
                 <ion-card>
                   <ion-card-content>
-                    <ion-item fill="solid">
+                    <ion-input fill="solid" label="Standard" label-placement="floating" value="Has Initial Value">
                       <ion-icon slot="start" name="calendar-clear-outline"></ion-icon>
-                      <ion-label position="floating">Standard</ion-label>
-                      <ion-input value="Has Initial Value"></ion-input>
                       <ion-note slot="error">Error Text</ion-note>
-                    </ion-item>
+                    </ion-input>
+
+                    <br />
 
-                    <ion-item fill="outline">
-                      <ion-label position="floating">Standard</ion-label>
+                    <ion-input fill="outline" helper-text="Helper text" label="Standard" label-placement="floating">
                       <ion-icon slot="end" name="trash"></ion-icon>
-                      <ion-input></ion-input>
-                      <ion-note slot="error">Helper Text</ion-note>
-                    </ion-item>
+                    </ion-input>
                   </ion-card-content>
                 </ion-card>
               </section>
@@ -354,18 +351,15 @@ <h2>Street Fighter II</h2>
                       <ion-label>Fruits</ion-label>
                     </ion-item-divider>
                     <ion-item>
-                      <ion-label>Apple</ion-label>
-                      <ion-radio slot="start" value="apple"></ion-radio>
+                      <ion-radio value="apple">Apple</ion-radio>
                     </ion-item>
 
                     <ion-item>
-                      <ion-label>Grape, checked, disabled</ion-label>
-                      <ion-radio slot="start" id="grapeChecked" value="grape" disabled></ion-radio>
+                      <ion-radio id="grapeChecked" value="grape" disabled>Grape, checked, disabled</ion-radio>
                     </ion-item>
 
                     <ion-item>
-                      <ion-label>Cherry</ion-label>
-                      <ion-radio slot="start" color="danger" value="cherry"></ion-radio>
+                      <ion-radio color="danger" value="cherry">Cherry</ion-radio>
                     </ion-item>
                   </ion-radio-group>
                 </ion-list>
@@ -376,37 +370,34 @@ <h2>Street Fighter II</h2>
                       <ion-label>Veggies</ion-label>
                     </ion-item-divider>
                     <ion-item>
-                      <ion-label>Celery</ion-label>
-                      <ion-radio color="tertiary" slot="start" value="celery"></ion-radio>
+                      <ion-radio color="tertiary" value="celery">Celery</ion-radio>
                     </ion-item>
 
                     <ion-item>
-                      <ion-label>Lettuce, checked, disabled</ion-label>
-                      <ion-radio color="tertiary" slot="start" value="lettuce" disabled></ion-radio>
+                      <ion-radio color="tertiary" value="lettuce" disabled>Lettuce, checked, disabled</ion-radio>
                     </ion-item>
 
                     <ion-item>
-                      <ion-label>Onion</ion-label>
-                      <ion-radio color="tertiary" slot="start" value="onion"></ion-radio>
+                      <ion-radio color="tertiary" value="onion">Onion</ion-radio>
                     </ion-item>
                   </ion-radio-group>
                 </ion-list>
 
                 <ion-list>
                   <ion-item>
-                    <ion-range value="20"></ion-range>
+                    <ion-range aria-label="Range" value="20"></ion-range>
                   </ion-item>
 
                   <ion-item>
-                    <ion-range color="success" value="20"></ion-range>
+                    <ion-range aria-label="Range" color="success" value="20"></ion-range>
                   </ion-item>
 
                   <ion-item>
-                    <ion-range color="warning" value="20"></ion-range>
+                    <ion-range aria-label="Range" color="warning" value="20"></ion-range>
                   </ion-item>
 
                   <ion-item>
-                    <ion-range color="danger" value="20"></ion-range>
+                    <ion-range aria-label="Range" color="danger" value="20"></ion-range>
                   </ion-item>
                 </ion-list>
               </section>
@@ -414,65 +405,51 @@ <h2>Street Fighter II</h2>
               <section>
                 <ion-list>
                   <ion-item>
-                    <ion-label>Default</ion-label>
-                    <ion-checkbox slot="end" checked></ion-checkbox>
+                    <ion-checkbox checked>Default</ion-checkbox>
                   </ion-item>
                   <ion-item>
-                    <ion-label>Primary</ion-label>
-                    <ion-checkbox slot="end" color="primary" checked></ion-checkbox>
+                    <ion-checkbox color="primary" checked>Primary</ion-checkbox>
                   </ion-item>
                   <ion-item>
-                    <ion-label>Secondary</ion-label>
-                    <ion-checkbox slot="end" color="secondary" checked></ion-checkbox>
+                    <ion-checkbox color="secondary" checked>Secondary</ion-checkbox>
                   </ion-item>
                   <ion-item>
-                    <ion-label>Warning</ion-label>
-                    <ion-checkbox slot="end" color="warning" checked></ion-checkbox>
+                    <ion-checkbox color="warning" checked>Warning</ion-checkbox>
                   </ion-item>
                   <ion-item>
-                    <ion-label>Danger</ion-label>
-                    <ion-checkbox slot="end" color="danger" checked></ion-checkbox>
+                    <ion-checkbox color="danger" checked>Danger</ion-checkbox>
                   </ion-item>
                   <ion-item>
-                    <ion-label>Light</ion-label>
-                    <ion-checkbox slot="end" color="light" checked></ion-checkbox>
+                    <ion-checkbox color="light" checked>Light</ion-checkbox>
                   </ion-item>
                   <ion-item>
-                    <ion-label>Dark</ion-label>
-                    <ion-checkbox slot="end" color="dark" checked></ion-checkbox>
+                    <ion-checkbox color="dark" checked>Dark</ion-checkbox>
                   </ion-item>
                   <ion-item>
-                    <ion-label>Unchecked by Default</ion-label>
-                    <ion-checkbox slot="end"></ion-checkbox>
+                    <ion-checkbox>Unchecked by Default</ion-checkbox>
                   </ion-item>
                   <ion-item>
-                    <ion-label>Disabled</ion-label>
-                    <ion-checkbox slot="end" disabled></ion-checkbox>
+                    <ion-checkbox disabled>Disabled</ion-checkbox>
                   </ion-item>
 
                   <ion-item>
-                    <ion-toggle slot="start"></ion-toggle>
-                    <ion-label>Blueberry</ion-label>
+                    <ion-toggle>Blueberry</ion-toggle>
                   </ion-item>
 
                   <ion-item>
-                    <ion-toggle color="success" slot="start" checked></ion-toggle>
-                    <ion-label>Lettuce</ion-label>
+                    <ion-toggle color="success" checked>Lettuce</ion-toggle>
                   </ion-item>
 
                   <ion-item>
-                    <ion-toggle color="danger" slot="start" checked></ion-toggle>
-                    <ion-label>Apple</ion-label>
+                    <ion-toggle color="danger" checked>Apple</ion-toggle>
                   </ion-item>
 
                   <ion-item>
-                    <ion-toggle color="tertiary" slot="start" checked></ion-toggle>
-                    <ion-label>Radish</ion-label>
+                    <ion-toggle color="tertiary" checked>Radish</ion-toggle>
                   </ion-item>
 
                   <ion-item>
-                    <ion-toggle color="dark" slot="start" checked></ion-toggle>
-                    <ion-label>Blackberry</ion-label>
+                    <ion-toggle color="dark" checked>Blackberry</ion-toggle>
                   </ion-item>
                 </ion-list>
               </section>
@@ -485,8 +462,7 @@ <h2>Street Fighter II</h2>
             <ion-toolbar>
               <ion-title>Colors</ion-title>
               <div slot="end" class="right-container">
-                <ion-label>Select a Theme:</ion-label>
-                <ion-select interface="popover" class="theme-picker">
+                <ion-select label="Select a Theme:" interface="popover" class="theme-picker">
                   <ion-select-option value="default" selected>Default</ion-select-option>
                   <ion-select-option value="oceanic">Oceanic</ion-select-option>
                   <ion-select-option value="vibrant">Vibrant</ion-select-option>
@@ -914,8 +890,7 @@ <h2>Street Fighter II</h2>
             <ion-toolbar>
               <ion-title>Overlays</ion-title>
               <div slot="end" class="right-container">
-                <ion-label>Select a Theme:</ion-label>
-                <ion-select interface="popover" class="theme-picker">
+                <ion-select label="Select a Theme:" interface="popover" class="theme-picker">
                   <ion-select-option value="default" selected>Default</ion-select-option>
                   <ion-select-option value="oceanic">Oceanic</ion-select-option>
                   <ion-select-option value="vibrant">Vibrant</ion-select-option>
@@ -951,8 +926,7 @@ <h2>Street Fighter II</h2>
                   <ion-datetime></ion-datetime>
                 </ion-item>
                 <ion-item>
-                  <ion-label>Select</ion-label>
-                  <ion-select>
+                  <ion-select label="Select">
                     <ion-select-option>1</ion-select-option>
                     <ion-select-option>2</ion-select-option>
                     <ion-select-option>3</ion-select-option>
diff --git a/core/src/utils/helpers.ts b/core/src/utils/helpers.ts
index 92d43fc7a6d..3dff5a5e657 100644
--- a/core/src/utils/helpers.ts
+++ b/core/src/utils/helpers.ts
@@ -4,8 +4,8 @@ import type { Side } from '../components/menu/menu-interface';
 
 // TODO(FW-2832): types
 
-declare const __zone_symbol__requestAnimationFrame: any;
-declare const requestAnimationFrame: any;
+declare const __zone_symbol__requestAnimationFrame: typeof window.requestAnimationFrame;
+declare const requestAnimationFrame: typeof window.requestAnimationFrame;
 
 export const transitionEndAsync = (el: HTMLElement | null, expectedDuration = 0) => {
   return new Promise((resolve) => {
@@ -23,7 +23,7 @@ export const transitionEndAsync = (el: HTMLElement | null, expectedDuration = 0)
 const transitionEnd = (el: HTMLElement | null, expectedDuration = 0, callback: (ev?: TransitionEvent) => void) => {
   let unRegTrans: (() => void) | undefined;
   let animationTimeout: number | undefined;
-  const opts: any = { passive: true };
+  const opts: AddEventListenerOptions = { passive: true };
   const ANIMATION_FALLBACK_TIMEOUT = 500;
 
   const unregister = () => {
@@ -240,7 +240,7 @@ export const getElementRoot = (el: HTMLElement, fallback: HTMLElement = el) => {
  * Patched version of requestAnimationFrame that avoids ngzone
  * Use only when you know ngzone should not run
  */
-export const raf = (h: any) => {
+export const raf = (h: FrameRequestCallback) => {
   if (typeof __zone_symbol__requestAnimationFrame === 'function') {
     return __zone_symbol__requestAnimationFrame(h);
   }
diff --git a/core/src/utils/input-shims/hacks/test/index.html b/core/src/utils/input-shims/hacks/test/index.html
index 18640942367..f4b138965a0 100644
--- a/core/src/utils/input-shims/hacks/test/index.html
+++ b/core/src/utils/input-shims/hacks/test/index.html
@@ -48,37 +48,31 @@
 
       <ion-content class="ion-padding">
         <ion-item>
-          <ion-label>Input Above Keyboard</ion-label>
-          <ion-input id="input-above-keyboard"></ion-input>
+          <ion-input label="Input Above Keyboard" id="input-above-keyboard"></ion-input>
         </ion-item>
 
         <ion-item>
-          <ion-label>Textarea Above Keyboard</ion-label>
-          <ion-textarea id="textarea-above-keyboard"></ion-textarea>
+          <ion-textarea label="Textarea Above Keyboard" id="textarea-above-keyboard"></ion-textarea>
         </ion-item>
 
         <div class="spacer" style="height: 400px"></div>
 
         <ion-item id="item-below-keyboard">
-          <ion-label>Input Below Keyboard</ion-label>
-          <ion-input id="input-below-keyboard"></ion-input>
+          <ion-input label="Input Below Keyboard" id="input-below-keyboard"></ion-input>
         </ion-item>
 
         <ion-item>
-          <ion-label>Textarea Below Keyboard</ion-label>
-          <ion-textarea id="textarea-below-keyboard"></ion-textarea>
+          <ion-textarea label="Textarea Below Keyboard" id="textarea-below-keyboard"></ion-textarea>
         </ion-item>
 
         <div class="spacer" style="height: 400px"></div>
 
         <ion-item>
-          <ion-label>Input Outside Viewport</ion-label>
-          <ion-input id="input-outside-viewport"></ion-input>
+          <ion-input label="Input Outside Viewport" id="input-outside-viewport"></ion-input>
         </ion-item>
 
         <ion-item>
-          <ion-label>Textarea Outside Viewport</ion-label>
-          <ion-textarea id="textarea-outside-viewport"></ion-textarea>
+          <ion-textarea label="Textarea Outside Viewport" id="textarea-outside-viewport"></ion-textarea>
         </ion-item>
       </ion-content>
 
diff --git a/core/src/utils/keyboard/test/index.html b/core/src/utils/keyboard/test/index.html
index 76656c9cd4a..cd61868ed8d 100644
--- a/core/src/utils/keyboard/test/index.html
+++ b/core/src/utils/keyboard/test/index.html
@@ -43,8 +43,8 @@
 
       <ion-footer>
         <ion-toolbar>
-          <ion-input type="text" placeholder="Enter some text..."></ion-input>
-          <ion-input type="text" placeholder="Enter some text..."></ion-input>
+          <ion-input aria-label="input" type="text" placeholder="Enter some text..."></ion-input>
+          <ion-input aria-label="input" type="text" placeholder="Enter some text..."></ion-input>
         </ion-toolbar>
       </ion-footer>
     </ion-app>
diff --git a/core/src/utils/test/overlays/index.html b/core/src/utils/test/overlays/index.html
index 00885bd5552..51fa62440e7 100644
--- a/core/src/utils/test/overlays/index.html
+++ b/core/src/utils/test/overlays/index.html
@@ -34,8 +34,7 @@
 
         <ion-content class="ion-padding">
           <ion-item>
-            <ion-label>Text Input</ion-label>
-            <ion-input id="root-input"></ion-input>
+            <ion-input label="Text Input" id="root-input"></ion-input>
           </ion-item>
 
           <ion-button id="create" onclick="createModal()">Create a Modal</ion-button>
@@ -66,8 +65,7 @@
             Modal Content
 
             <ion-item>
-              <ion-label>Text Input</ion-label>
-              <ion-input class="modal-input modal-input-${id}"></ion-input>
+              <ion-input label="Text Input" class="modal-input modal-input-${id}"></ion-input>
             </ion-item>
 
             <ion-button id="modal-create">Create a Modal</ion-button>
diff --git a/core/src/utils/test/playwright/docs/best-practices.md b/core/src/utils/test/playwright/docs/best-practices.md
index 79d79653de1..d17cd250dd2 100644
--- a/core/src/utils/test/playwright/docs/best-practices.md
+++ b/core/src/utils/test/playwright/docs/best-practices.md
@@ -18,6 +18,7 @@ This guide details best practices that should be followed when writing E2E tests
 - [Test for positive and negative cases](#practice-positive-negative)
 - [Start your test with the configuration or layout in place if possible](#practice-test-config)
 - [Place your test closest to the fix or feature](#practice-test-close)
+- [Account for different locales when writing tests](#practice-locales)
 
 <h2 id="practice-test">Use the customized `test` function</h2>
 
@@ -259,3 +260,7 @@ This allows tests to remain fast on CI as we can focus on the test itself instea
 <h2 id="practice-test-close">Place your test closest to the fix or feature</h2>
 
 Tests should be placed closest to where the fix or feature was implemented. This means that if a fix was written for `ion-button`, then the test should be placed in `src/components/button/tests`.
+
+<h2 id="practice-locales">Account for different locales when writing tests</h2>
+
+Tests ran on CI may not run on the same locale as your local machine. It's always a good idea to apply locale considerations to components that support it, when writing tests (i.e. `ion-datetime` should specify `locale="en-US"`).
diff --git a/core/src/utils/transition/ios.transition.ts b/core/src/utils/transition/ios.transition.ts
index 107e305334f..6d7da125fac 100644
--- a/core/src/utils/transition/ios.transition.ts
+++ b/core/src/utils/transition/ios.transition.ts
@@ -7,8 +7,8 @@ const DURATION = 540;
 
 // TODO(FW-2832): types
 
-const getClonedElement = (tagName: string): any => {
-  return document.querySelector(`${tagName}.ion-cloned-element`) as any;
+const getClonedElement = <T extends HTMLIonBackButtonElement | HTMLIonTitleElement>(tagName: string) => {
+  return document.querySelector<T>(`${tagName}.ion-cloned-element`);
 };
 
 export const shadow = <T extends Element>(el: T): ShadowRoot | T => {
@@ -59,8 +59,8 @@ const createLargeTitleTransition = (
   rootAnimation: Animation,
   rtl: boolean,
   backDirection: boolean,
-  enteringEl: any,
-  leavingEl: any
+  enteringEl: HTMLElement,
+  leavingEl: HTMLElement | undefined
 ) => {
   const enteringBackButton = getBackButton(enteringEl, backDirection);
   const leavingLargeTitle = getLargeTitle(leavingEl);
@@ -268,10 +268,10 @@ const animateBackButton = (
   const enteringBackButtonIconAnimation = createAnimation();
   const enteringBackButtonAnimation = createAnimation();
 
-  const clonedBackButtonEl = getClonedElement('ion-back-button');
+  const clonedBackButtonEl = getClonedElement<HTMLIonBackButtonElement>('ion-back-button')!;
 
-  const clonedBackButtonTextEl = shadow(clonedBackButtonEl).querySelector('.button-text');
-  const clonedBackButtonIconEl = shadow(clonedBackButtonEl).querySelector('ion-icon');
+  const clonedBackButtonTextEl = shadow(clonedBackButtonEl).querySelector('.button-text')!;
+  const clonedBackButtonIconEl = shadow(clonedBackButtonEl).querySelector('ion-icon')!;
 
   clonedBackButtonEl.text = backButtonEl.text;
   clonedBackButtonEl.mode = backButtonEl.mode;
@@ -424,7 +424,7 @@ const animateLargeTitle = (
 
   const KEYFRAMES = backDirection ? BACKWARDS_KEYFRAMES : FORWARDS_KEYFRAMES;
 
-  const clonedTitleEl = getClonedElement('ion-title');
+  const clonedTitleEl = getClonedElement<HTMLIonTitleElement>('ion-title')!;
   const clonedLargeTitleAnimation = createAnimation();
 
   clonedTitleEl.innerText = largeTitleEl.innerText;
@@ -468,7 +468,7 @@ export const iosTransitionAnimation = (navEl: HTMLElement, opts: TransitionOptio
     const CENTER = '0%';
     const OFF_OPACITY = 0.8;
 
-    const isRTL = (navEl.ownerDocument as any).dir === 'rtl';
+    const isRTL = navEl.ownerDocument.dir === 'rtl';
     const OFF_RIGHT = isRTL ? '-99.5%' : '99.5%';
     const OFF_LEFT = isRTL ? '33%' : '-33%';
 
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
index 6562218564e..78c0ed27d92 100644
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -3,6 +3,54 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [7.6.5](https://github.com/ionic-team/ionic-framework/compare/v7.6.4...v7.6.5) (2024-01-17)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [7.6.4](https://github.com/ionic-team/ionic-framework/compare/v7.6.3...v7.6.4) (2024-01-10)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [7.6.3](https://github.com/ionic-team/ionic-framework/compare/v7.6.2...v7.6.3) (2024-01-03)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [7.6.2](https://github.com/ionic-team/ionic-framework/compare/v7.6.1...v7.6.2) (2023-12-19)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [7.6.1](https://github.com/ionic-team/ionic-framework/compare/v7.6.0...v7.6.1) (2023-12-13)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
 # [7.6.0](https://github.com/ionic-team/ionic-framework/compare/v7.5.8...v7.6.0) (2023-12-06)
 
 **Note:** Version bump only for package @ionic/docs
diff --git a/docs/package-lock.json b/docs/package-lock.json
index 5fa2176ebb1..f34e364d371 100644
--- a/docs/package-lock.json
+++ b/docs/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/docs",
-  "version": "7.6.0",
+  "version": "7.6.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/docs",
-      "version": "7.6.0",
+      "version": "7.6.6",
       "license": "MIT"
     }
   }
diff --git a/docs/package.json b/docs/package.json
index cf794f991ce..09a3e97859e 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/docs",
-  "version": "7.6.0",
+  "version": "7.6.6",
   "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 45c326585ae..e48dc5be311 100644
--- a/lerna.json
+++ b/lerna.json
@@ -4,5 +4,5 @@
     "docs",
     "packages/*"
   ],
-  "version": "7.6.0"
+  "version": "7.6.6"
 }
diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md
index 417d94c0372..d9a9ce11290 100644
--- a/packages/angular-server/CHANGELOG.md
+++ b/packages/angular-server/CHANGELOG.md
@@ -3,6 +3,54 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [7.6.5](https://github.com/ionic-team/ionic-framework/compare/v7.6.4...v7.6.5) (2024-01-17)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [7.6.4](https://github.com/ionic-team/ionic-framework/compare/v7.6.3...v7.6.4) (2024-01-10)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [7.6.3](https://github.com/ionic-team/ionic-framework/compare/v7.6.2...v7.6.3) (2024-01-03)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [7.6.2](https://github.com/ionic-team/ionic-framework/compare/v7.6.1...v7.6.2) (2023-12-19)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [7.6.1](https://github.com/ionic-team/ionic-framework/compare/v7.6.0...v7.6.1) (2023-12-13)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
 # [7.6.0](https://github.com/ionic-team/ionic-framework/compare/v7.5.8...v7.6.0) (2023-12-06)
 
 **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 7ca1ee63ed7..db3802f538d 100644
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular-server",
-  "version": "7.6.0",
+  "version": "7.6.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular-server",
-      "version": "7.6.0",
+      "version": "7.6.6",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.6.0"
+        "@ionic/core": "^7.6.6"
       },
       "devDependencies": {
         "@angular-eslint/eslint-plugin": "^14.0.0",
@@ -1060,12 +1060,12 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.0.tgz",
-      "integrity": "sha512-pDX8G915puz8OcLhxfb9MwuvpYZsUOCngJdd+61ibJ6UF+NA2mGatsMqHKzcgelTXtwcHDpi9ZLUD/HNmupqaQ==",
+      "version": "7.6.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
+      "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
       "dependencies": {
-        "@stencil/core": "^4.8.1",
-        "ionicons": "^7.2.1",
+        "@stencil/core": "^4.10.0",
+        "ionicons": "^7.2.2",
         "tslib": "^2.1.0"
       }
     },
@@ -1462,9 +1462,9 @@
       "license": "MIT"
     },
     "node_modules/@stencil/core": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.1.tgz",
-      "integrity": "sha512-KG1H10j24rlyxIqOI4CG8/h9T7ObTv7giW2H3u1qXV4KKrLykDOpMcLzpqNXqL2Fki3s1QvHyl/oaRvi5waWVw==",
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
+      "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -3923,9 +3923,9 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.1.tgz",
-      "integrity": "sha512-2pvCM7DGVEtbbj48PJzQrCADCQrqjU1nUYX9l9PyEWz3ZfdnLdAouqwPxLdl8tbaF9cE7OZRSlyQD7oLOLnGoQ==",
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz",
+      "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
       "dependencies": {
         "@stencil/core": "^4.0.3"
       }
@@ -7330,12 +7330,12 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.0.tgz",
-      "integrity": "sha512-pDX8G915puz8OcLhxfb9MwuvpYZsUOCngJdd+61ibJ6UF+NA2mGatsMqHKzcgelTXtwcHDpi9ZLUD/HNmupqaQ==",
+      "version": "7.6.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
+      "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
       "requires": {
-        "@stencil/core": "^4.8.1",
-        "ionicons": "^7.2.1",
+        "@stencil/core": "^4.10.0",
+        "ionicons": "^7.2.2",
         "tslib": "^2.1.0"
       }
     },
@@ -7581,9 +7581,9 @@
       }
     },
     "@stencil/core": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.1.tgz",
-      "integrity": "sha512-KG1H10j24rlyxIqOI4CG8/h9T7ObTv7giW2H3u1qXV4KKrLykDOpMcLzpqNXqL2Fki3s1QvHyl/oaRvi5waWVw=="
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
+      "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w=="
     },
     "@types/estree": {
       "version": "0.0.39",
@@ -9133,9 +9133,9 @@
       }
     },
     "ionicons": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.1.tgz",
-      "integrity": "sha512-2pvCM7DGVEtbbj48PJzQrCADCQrqjU1nUYX9l9PyEWz3ZfdnLdAouqwPxLdl8tbaF9cE7OZRSlyQD7oLOLnGoQ==",
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz",
+      "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
       "requires": {
         "@stencil/core": "^4.0.3"
       }
diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json
index f4d57aa6e95..0fc0f5cb4c6 100644
--- a/packages/angular-server/package.json
+++ b/packages/angular-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular-server",
-  "version": "7.6.0",
+  "version": "7.6.6",
   "description": "Angular SSR Module for Ionic",
   "keywords": [
     "ionic",
@@ -62,6 +62,6 @@
   },
   "prettier": "@ionic/prettier-config",
   "dependencies": {
-    "@ionic/core": "^7.6.0"
+    "@ionic/core": "^7.6.6"
   }
 }
diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md
index 505dd6e0dc6..d4b946feadb 100644
--- a/packages/angular/CHANGELOG.md
+++ b/packages/angular/CHANGELOG.md
@@ -3,6 +3,60 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [7.6.5](https://github.com/ionic-team/ionic-framework/compare/v7.6.4...v7.6.5) (2024-01-17)
+
+
+### Bug Fixes
+
+* **angular:** add old IonBackButtonDelegate import ([#28831](https://github.com/ionic-team/ionic-framework/issues/28831)) ([fb77353](https://github.com/ionic-team/ionic-framework/commit/fb7735397ed53323dd93a172407117228610b929)), closes [#28827](https://github.com/ionic-team/ionic-framework/issues/28827)
+
+
+
+
+
+## [7.6.4](https://github.com/ionic-team/ionic-framework/compare/v7.6.3...v7.6.4) (2024-01-10)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [7.6.3](https://github.com/ionic-team/ionic-framework/compare/v7.6.2...v7.6.3) (2024-01-03)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [7.6.2](https://github.com/ionic-team/ionic-framework/compare/v7.6.1...v7.6.2) (2023-12-19)
+
+
+### Bug Fixes
+
+* **refresher:** mode property can be used in typescript ([#28717](https://github.com/ionic-team/ionic-framework/issues/28717)) ([7ce1031](https://github.com/ionic-team/ionic-framework/commit/7ce1031c177487649c2a698664ec98f10d9002b9)), closes [#28716](https://github.com/ionic-team/ionic-framework/issues/28716)
+
+
+
+
+
+## [7.6.1](https://github.com/ionic-team/ionic-framework/compare/v7.6.0...v7.6.1) (2023-12-13)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 # [7.6.0](https://github.com/ionic-team/ionic-framework/compare/v7.5.8...v7.6.0) (2023-12-06)
 
 
diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json
index 4545613e07f..8e1c04ec1ef 100644
--- a/packages/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "7.6.0",
+  "version": "7.6.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "7.6.0",
+      "version": "7.6.6",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.6.0",
+        "@ionic/core": "^7.6.6",
         "ionicons": "^7.0.0",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.3.0"
@@ -1407,12 +1407,12 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.0.tgz",
-      "integrity": "sha512-pDX8G915puz8OcLhxfb9MwuvpYZsUOCngJdd+61ibJ6UF+NA2mGatsMqHKzcgelTXtwcHDpi9ZLUD/HNmupqaQ==",
+      "version": "7.6.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
+      "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
       "dependencies": {
-        "@stencil/core": "^4.8.1",
-        "ionicons": "^7.2.1",
+        "@stencil/core": "^4.10.0",
+        "ionicons": "^7.2.2",
         "tslib": "^2.1.0"
       }
     },
@@ -1845,9 +1845,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.1.tgz",
-      "integrity": "sha512-KG1H10j24rlyxIqOI4CG8/h9T7ObTv7giW2H3u1qXV4KKrLykDOpMcLzpqNXqL2Fki3s1QvHyl/oaRvi5waWVw==",
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
+      "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -5234,9 +5234,9 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.1.tgz",
-      "integrity": "sha512-2pvCM7DGVEtbbj48PJzQrCADCQrqjU1nUYX9l9PyEWz3ZfdnLdAouqwPxLdl8tbaF9cE7OZRSlyQD7oLOLnGoQ==",
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz",
+      "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
       "dependencies": {
         "@stencil/core": "^4.0.3"
       }
@@ -9697,12 +9697,12 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.0.tgz",
-      "integrity": "sha512-pDX8G915puz8OcLhxfb9MwuvpYZsUOCngJdd+61ibJ6UF+NA2mGatsMqHKzcgelTXtwcHDpi9ZLUD/HNmupqaQ==",
+      "version": "7.6.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
+      "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
       "requires": {
-        "@stencil/core": "^4.8.1",
-        "ionicons": "^7.2.1",
+        "@stencil/core": "^4.10.0",
+        "ionicons": "^7.2.2",
         "tslib": "^2.1.0"
       }
     },
@@ -9994,9 +9994,9 @@
       }
     },
     "@stencil/core": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.1.tgz",
-      "integrity": "sha512-KG1H10j24rlyxIqOI4CG8/h9T7ObTv7giW2H3u1qXV4KKrLykDOpMcLzpqNXqL2Fki3s1QvHyl/oaRvi5waWVw=="
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
+      "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w=="
     },
     "@tootallnate/once": {
       "version": "2.0.0",
@@ -12183,9 +12183,9 @@
       }
     },
     "ionicons": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.1.tgz",
-      "integrity": "sha512-2pvCM7DGVEtbbj48PJzQrCADCQrqjU1nUYX9l9PyEWz3ZfdnLdAouqwPxLdl8tbaF9cE7OZRSlyQD7oLOLnGoQ==",
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz",
+      "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
       "requires": {
         "@stencil/core": "^4.0.3"
       }
diff --git a/packages/angular/package.json b/packages/angular/package.json
index 1bc151a8e9b..099931e0fa0 100644
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "7.6.0",
+  "version": "7.6.6",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -26,7 +26,6 @@
   "scripts": {
     "build": "npm run clean && npm run build.ng && npm run build.core && npm run clean-generated",
     "build.core": "node scripts/build-core.js",
-    "build.link": "npm run build && node scripts/link-copy.js",
     "build.ng": "ng-packagr -p ng-package.json -c tsconfig.json",
     "build.watch": "npm run build.ng -- --watch",
     "clean": "node scripts/clean.js",
@@ -48,7 +47,7 @@
     }
   },
   "dependencies": {
-    "@ionic/core": "^7.6.0",
+    "@ionic/core": "^7.6.6",
     "ionicons": "^7.0.0",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.3.0"
diff --git a/packages/angular/scripts/README.md b/packages/angular/scripts/README.md
deleted file mode 100644
index 95acfc6eb6e..00000000000
--- a/packages/angular/scripts/README.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Local @ionic/angular test/testapp development
-
-1. `npm install` at the root of `angular`
-2. `npm run build.dev` to build local `@ionic/angular` and `@ionic/core`
-3. `cd test/testapp` to the test app
-4. `npm install` in the test app directory
-5. `npm run serve` copies packages and serve the app (see package.json for more options)
-6. [http://localhost:4200/](http://localhost:4200/)
-
-
-# npm link local development
-
-`npm link` doesn't work as expected due to the `devDependency` on `@angular/core`. This is the work around...
-
-    npm run build.link ../ionic-conference-app
-
-When the command above is ran from the `angular` directory, it will build `@ionic/angular` and copy the `dist` directory to the correct location of another local project. In the example above, the end result is that it copies the `dist` directory to `../ionic-conference-app/node_modules/@ionic/angular/dist`. The path given should be relative to the root of this mono repo.
-
-## package.json note
-
-The `package.json` file in this directory references __Ionic 3__ and is in here to get GitHub to properly show the Used By counts on the repo. __Do not remove it!__
diff --git a/packages/angular/scripts/link-copy.js b/packages/angular/scripts/link-copy.js
deleted file mode 100644
index 5465e00a1af..00000000000
--- a/packages/angular/scripts/link-copy.js
+++ /dev/null
@@ -1,40 +0,0 @@
-const fs = require('fs-extra');
-const path = require('path');
-
-
-let prjDir = process.argv[2];
-if (!prjDir) {
-  throw new Error('local path required as last argument to "npm run build.link" command');
-}
-prjDir = path.join(__dirname, '../../../', prjDir);
-
-copyPackage(prjDir, 'angular');
-copyPackage(prjDir, 'core');
-
-
-function copyPackage(prjDir, pkgName) {
-  const prjDest = path.join(prjDir, 'node_modules', '@ionic', pkgName);
-
-  const pkgSrcDir = path.join(__dirname, '..', '..', pkgName);
-  const pkgSrcDist = path.join(pkgSrcDir, 'dist');
-  const pkgJsonPath = path.join(pkgSrcDir, 'package.json');
-  const pkgJson = require(pkgJsonPath);
-
-  // make sure this local project exists
-  fs.emptyDirSync(prjDest);
-
-  pkgJson.files.push('package.json');
-
-  pkgJson.files.forEach(f => {
-    const src = path.join(pkgSrcDir, f);
-    const dest = path.join(prjDest, f);
-
-    console.log('copying:', src, 'to', dest);
-    fs.copySync(src, dest);
-  });
-
-  const prjReadme = path.join(prjDest, 'README.md');
-  console.log('readme:', prjReadme);
-
-  fs.writeFileSync(prjReadme, '@ionic/' + pkgName + ' copied from ' + pkgSrcDir + ', ' + new Date());
-}
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index d192372759d..be168ed8703 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -1626,7 +1626,7 @@ mouse drag, touch gesture, or keyboard interaction.
 
 
 @ProxyCmp({
-  inputs: ['closeDuration', 'disabled', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration'],
+  inputs: ['closeDuration', 'disabled', 'mode', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration'],
   methods: ['complete', 'cancel', 'getProgress']
 })
 @Component({
@@ -1634,7 +1634,7 @@ mouse drag, touch gesture, or keyboard interaction.
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['closeDuration', 'disabled', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration'],
+  inputs: ['closeDuration', 'disabled', 'mode', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration'],
 })
 export class IonRefresher {
   protected el: HTMLElement;
diff --git a/packages/angular/src/index.ts b/packages/angular/src/index.ts
index 53075b7aab5..41bdacf14e9 100644
--- a/packages/angular/src/index.ts
+++ b/packages/angular/src/index.ts
@@ -6,6 +6,8 @@ export { SelectValueAccessorDirective as SelectValueAccessor } from './directive
 export { TextValueAccessorDirective as TextValueAccessor } from './directives/control-value-accessors/text-value-accessor';
 export { IonTabs } from './directives/navigation/ion-tabs';
 export { IonBackButton } from './directives/navigation/ion-back-button';
+// TODO FW-5889
+export { IonBackButton as IonBackButtonDelegate } from './directives/navigation/ion-back-button';
 export { IonNav } from './directives/navigation/ion-nav';
 export { IonRouterOutlet } from './directives/navigation/ion-router-outlet';
 export {
diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts
index 650d21c94ed..fa6f3d45828 100644
--- a/packages/angular/standalone/src/directives/proxies.ts
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -1496,7 +1496,7 @@ export declare interface IonProgressBar extends Components.IonProgressBar {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIonRefresher,
-  inputs: ['closeDuration', 'disabled', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration'],
+  inputs: ['closeDuration', 'disabled', 'mode', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration'],
   methods: ['complete', 'cancel', 'getProgress']
 })
 @Component({
@@ -1504,7 +1504,7 @@ export declare interface IonProgressBar extends Components.IonProgressBar {}
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['closeDuration', 'disabled', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration'],
+  inputs: ['closeDuration', 'disabled', 'mode', 'pullFactor', 'pullMax', 'pullMin', 'snapbackDuration'],
   standalone: true
 })
 export class IonRefresher {
diff --git a/packages/angular/test/base/src/app/lazy/form/form.component.html b/packages/angular/test/base/src/app/lazy/form/form.component.html
index f5891cb19ff..27b12e39b5c 100644
--- a/packages/angular/test/base/src/app/lazy/form/form.component.html
+++ b/packages/angular/test/base/src/app/lazy/form/form.component.html
@@ -49,14 +49,12 @@
       </ion-item>
 
       <ion-item>
-        <ion-label>Min</ion-label>
-        <ion-input formControlName="inputMin" type="number"></ion-input>
+        <ion-input label="Min" formControlName="inputMin" type="number"></ion-input>
         <pre>errors: {{ profileForm.controls['inputMin'].errors | json }}</pre>
       </ion-item>
 
       <ion-item>
-        <ion-label>Max</ion-label>
-        <ion-input formControlName="inputMax" type="number"></ion-input>
+        <ion-input label="Max" formControlName="inputMax" type="number"></ion-input>
         <pre>errors: {{ profileForm.controls['inputMax'].errors | json }}</pre>
       </ion-item>
     </ion-list>
diff --git a/packages/angular/test/base/src/app/lazy/modal-example/modal-example.component.html b/packages/angular/test/base/src/app/lazy/modal-example/modal-example.component.html
index 4f2bd52a24e..1420dd5b804 100644
--- a/packages/angular/test/base/src/app/lazy/modal-example/modal-example.component.html
+++ b/packages/angular/test/base/src/app/lazy/modal-example/modal-example.component.html
@@ -25,8 +25,8 @@ <h3>{{valueFromParams}}</h3>
 
   <form [formGroup]="form">
     <ion-item id="inputWithFloatingLabel">
-      <ion-label color="primary" position="floating">Floating Label</ion-label>
-      <ion-select multiple="false" formControlName="select">
+      <ion-select label-placement="floating" multiple="false" formControlName="select">
+        <ion-label slot="label" color="Primary">Floating Label</ion-label>
         <ion-select-option [value]="0">Option 0</ion-select-option>
         <ion-select-option [value]="1">Option 1</ion-select-option>
       </ion-select>
diff --git a/packages/angular/test/base/src/app/lazy/textarea/textarea.component.html b/packages/angular/test/base/src/app/lazy/textarea/textarea.component.html
index 732e018dcb0..0316b3d54b0 100644
--- a/packages/angular/test/base/src/app/lazy/textarea/textarea.component.html
+++ b/packages/angular/test/base/src/app/lazy/textarea/textarea.component.html
@@ -2,8 +2,7 @@
   <form [formGroup]="form">
     <ion-list>
       <ion-item>
-        <ion-label>Textarea</ion-label>
-        <ion-textarea formControlName="textarea"></ion-textarea>
+        <ion-textarea label="Textarea" formControlName="textarea"></ion-textarea>
       </ion-item>
     </ion-list>
   </form>
diff --git a/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.html b/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.html
index 2921e06b917..c121dab37a7 100644
--- a/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.html
+++ b/packages/angular/test/base/src/app/standalone/value-accessors/checkbox/checkbox.component.html
@@ -6,6 +6,6 @@ <h1>IonCheckbox Value Accessors</h1>
   </p>
 
   <app-value-accessor-test [formGroup]="form">
-    <ion-checkbox formControlName="checkbox"></ion-checkbox>
+    <ion-checkbox formControlName="checkbox">Checkbox</ion-checkbox>
   </app-value-accessor-test>
 </div>
diff --git a/packages/angular/test/base/src/app/standalone/value-accessors/range/range.component.html b/packages/angular/test/base/src/app/standalone/value-accessors/range/range.component.html
index 9a496fbcd3c..97edf36a1e7 100644
--- a/packages/angular/test/base/src/app/standalone/value-accessors/range/range.component.html
+++ b/packages/angular/test/base/src/app/standalone/value-accessors/range/range.component.html
@@ -4,6 +4,6 @@ <h1>IonRange Value Accessors</h1>
     This test checks the form integrations with ion-range to make sure values are correctly assigned to the form group.
   </p>
   <app-value-accessor-test [formGroup]="form">
-    <ion-range formControlName="range"></ion-range>
+    <ion-range label="Range" formControlName="range"></ion-range>
   </app-value-accessor-test>
 </div>
diff --git a/packages/angular/test/base/src/app/standalone/value-accessors/toggle/toggle.component.html b/packages/angular/test/base/src/app/standalone/value-accessors/toggle/toggle.component.html
index 08888059f99..53e60bcf1e1 100644
--- a/packages/angular/test/base/src/app/standalone/value-accessors/toggle/toggle.component.html
+++ b/packages/angular/test/base/src/app/standalone/value-accessors/toggle/toggle.component.html
@@ -5,6 +5,6 @@ <h1>IonToggle Value Accessors</h1>
   </p>
 
   <app-value-accessor-test [formGroup]="form">
-    <ion-toggle formControlName="toggle"></ion-toggle>
+    <ion-toggle formControlName="toggle">Toggle</ion-toggle>
   </app-value-accessor-test>
 </div>
diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md
index 5c4b4f8f3f0..ca0274ab931 100644
--- a/packages/react-router/CHANGELOG.md
+++ b/packages/react-router/CHANGELOG.md
@@ -3,6 +3,58 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+## [7.6.5](https://github.com/ionic-team/ionic-framework/compare/v7.6.4...v7.6.5) (2024-01-17)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+## [7.6.4](https://github.com/ionic-team/ionic-framework/compare/v7.6.3...v7.6.4) (2024-01-10)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+## [7.6.3](https://github.com/ionic-team/ionic-framework/compare/v7.6.2...v7.6.3) (2024-01-03)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+## [7.6.2](https://github.com/ionic-team/ionic-framework/compare/v7.6.1...v7.6.2) (2023-12-19)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+## [7.6.1](https://github.com/ionic-team/ionic-framework/compare/v7.6.0...v7.6.1) (2023-12-13)
+
+
+### Bug Fixes
+
+* **react:** replacing route uses new route direction and animation ([#28671](https://github.com/ionic-team/ionic-framework/issues/28671)) ([a17b963](https://github.com/ionic-team/ionic-framework/commit/a17b9631829c36c2daf1d5227f5afa69f99f8743)), closes [#24260](https://github.com/ionic-team/ionic-framework/issues/24260)
+* **react:** use custom animation when going back after a replace ([#28674](https://github.com/ionic-team/ionic-framework/issues/28674)) ([fc88613](https://github.com/ionic-team/ionic-framework/commit/fc88613fefa019a3b695a2c6e10c85cd3ce79ae8)), closes [#28673](https://github.com/ionic-team/ionic-framework/issues/28673)
+
+
+
+
+
 # [7.6.0](https://github.com/ionic-team/ionic-framework/compare/v7.5.8...v7.6.0) (2023-12-06)
 
 **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 d57eb46e309..42dcdc99def 100644
--- a/packages/react-router/package-lock.json
+++ b/packages/react-router/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react-router",
-  "version": "7.6.0",
+  "version": "7.6.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react-router",
-      "version": "7.6.0",
+      "version": "7.6.6",
       "license": "MIT",
       "dependencies": {
-        "@ionic/react": "^7.6.0",
+        "@ionic/react": "^7.6.6",
         "tslib": "*"
       },
       "devDependencies": {
@@ -238,12 +238,12 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.0.tgz",
-      "integrity": "sha512-pDX8G915puz8OcLhxfb9MwuvpYZsUOCngJdd+61ibJ6UF+NA2mGatsMqHKzcgelTXtwcHDpi9ZLUD/HNmupqaQ==",
+      "version": "7.6.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
+      "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
       "dependencies": {
-        "@stencil/core": "^4.8.1",
-        "ionicons": "^7.2.1",
+        "@stencil/core": "^4.10.0",
+        "ionicons": "^7.2.2",
         "tslib": "^2.1.0"
       }
     },
@@ -414,11 +414,11 @@
       }
     },
     "node_modules/@ionic/react": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.6.0.tgz",
-      "integrity": "sha512-2hjTQlxwONH7rcIu1iJ219a6teegTa28DSIxUVZ032f7bltR54dVSRl7W0y4yTPTIjgGUBU3qQu+bgqYbPu9VA==",
+      "version": "7.6.6",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.6.6.tgz",
+      "integrity": "sha512-3J18wUMMGBS2jkTwBRWYpkXvhFYpBcLqKF9nq/9aJL55GtFbu3uAnvM8Km3LkQUYqk4ddpGQr5bvzTvhYcxMMQ==",
       "dependencies": {
-        "@ionic/core": "7.6.0",
+        "@ionic/core": "7.6.6",
         "ionicons": "^7.0.0",
         "tslib": "*"
       },
@@ -667,9 +667,9 @@
       ]
     },
     "node_modules/@stencil/core": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.1.tgz",
-      "integrity": "sha512-KG1H10j24rlyxIqOI4CG8/h9T7ObTv7giW2H3u1qXV4KKrLykDOpMcLzpqNXqL2Fki3s1QvHyl/oaRvi5waWVw==",
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.11.0.tgz",
+      "integrity": "sha512-zsKhgIkTGo+s7IthitxR/MKiMS3Ck1yIypOdXr0aE6ofboKqe9NdffTcxZ0vel0wD2bZYOb6WfPMzuhRKk6+FA==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -2418,9 +2418,9 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.1.tgz",
-      "integrity": "sha512-2pvCM7DGVEtbbj48PJzQrCADCQrqjU1nUYX9l9PyEWz3ZfdnLdAouqwPxLdl8tbaF9cE7OZRSlyQD7oLOLnGoQ==",
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz",
+      "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
       "dependencies": {
         "@stencil/core": "^4.0.3"
       }
@@ -4050,12 +4050,12 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.0.tgz",
-      "integrity": "sha512-pDX8G915puz8OcLhxfb9MwuvpYZsUOCngJdd+61ibJ6UF+NA2mGatsMqHKzcgelTXtwcHDpi9ZLUD/HNmupqaQ==",
+      "version": "7.6.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
+      "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
       "requires": {
-        "@stencil/core": "^4.8.1",
-        "ionicons": "^7.2.1",
+        "@stencil/core": "^4.10.0",
+        "ionicons": "^7.2.2",
         "tslib": "^2.1.0"
       }
     },
@@ -4156,11 +4156,11 @@
       "requires": {}
     },
     "@ionic/react": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.6.0.tgz",
-      "integrity": "sha512-2hjTQlxwONH7rcIu1iJ219a6teegTa28DSIxUVZ032f7bltR54dVSRl7W0y4yTPTIjgGUBU3qQu+bgqYbPu9VA==",
+      "version": "7.6.6",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.6.6.tgz",
+      "integrity": "sha512-3J18wUMMGBS2jkTwBRWYpkXvhFYpBcLqKF9nq/9aJL55GtFbu3uAnvM8Km3LkQUYqk4ddpGQr5bvzTvhYcxMMQ==",
       "requires": {
-        "@ionic/core": "7.6.0",
+        "@ionic/core": "7.6.6",
         "ionicons": "^7.0.0",
         "tslib": "*"
       }
@@ -4297,9 +4297,9 @@
       "optional": true
     },
     "@stencil/core": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.1.tgz",
-      "integrity": "sha512-KG1H10j24rlyxIqOI4CG8/h9T7ObTv7giW2H3u1qXV4KKrLykDOpMcLzpqNXqL2Fki3s1QvHyl/oaRvi5waWVw=="
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.11.0.tgz",
+      "integrity": "sha512-zsKhgIkTGo+s7IthitxR/MKiMS3Ck1yIypOdXr0aE6ofboKqe9NdffTcxZ0vel0wD2bZYOb6WfPMzuhRKk6+FA=="
     },
     "@types/estree": {
       "version": "1.0.4",
@@ -5570,9 +5570,9 @@
       }
     },
     "ionicons": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.1.tgz",
-      "integrity": "sha512-2pvCM7DGVEtbbj48PJzQrCADCQrqjU1nUYX9l9PyEWz3ZfdnLdAouqwPxLdl8tbaF9cE7OZRSlyQD7oLOLnGoQ==",
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz",
+      "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
       "requires": {
         "@stencil/core": "^4.0.3"
       }
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
index 6daf6e53ad4..7c55257817a 100644
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react-router",
-  "version": "7.6.0",
+  "version": "7.6.6",
   "description": "React Router wrapper for @ionic/react",
   "keywords": [
     "ionic",
@@ -36,7 +36,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@ionic/react": "^7.6.0",
+    "@ionic/react": "^7.6.6",
     "tslib": "*"
   },
   "peerDependencies": {
diff --git a/packages/react-router/rollup.config.mjs b/packages/react-router/rollup.config.mjs
index d9ccf1f4af3..6647b5197a3 100644
--- a/packages/react-router/rollup.config.mjs
+++ b/packages/react-router/rollup.config.mjs
@@ -1,4 +1,5 @@
 import typescript from '@rollup/plugin-typescript';
+const external = ['react', 'react-dom', 'react-router', 'react-router-dom', 'history', 'tslib'];
 
 export default {
   input: 'src/index.ts',
@@ -9,8 +10,8 @@ export default {
       sourcemap: true,
     }
   ],
-  external: (id) => !/^(\.|\/)/.test(id),
   plugins: [
     typescript(),
   ],
+  external: id => external.includes(id) || id.startsWith('@ionic/core') || id.startsWith('ionicons') || id.startsWith('@ionic/react'),
 };
diff --git a/packages/react-router/src/ReactRouter/IonRouter.tsx b/packages/react-router/src/ReactRouter/IonRouter.tsx
index 16b81d64e25..fcadd6561a6 100644
--- a/packages/react-router/src/ReactRouter/IonRouter.tsx
+++ b/packages/react-router/src/ReactRouter/IonRouter.tsx
@@ -187,8 +187,15 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
           routeInfo.lastPathname = currentRouteInfo?.pathname || routeInfo.lastPathname;
           routeInfo.prevRouteLastPathname = currentRouteInfo?.lastPathname;
           routeInfo.pushedByRoute = pushedByRoute;
-          routeInfo.routeDirection = currentRouteInfo?.routeDirection || routeInfo.routeDirection;
-          routeInfo.routeAnimation = currentRouteInfo?.routeAnimation || routeInfo.routeAnimation;
+
+          /**
+           * When replacing routes we should still prefer
+           * any custom direction/animation that the developer
+           * has specified when navigating first instead of relying
+           * on previously used directions/animations.
+           */
+          routeInfo.routeDirection = routeInfo.routeDirection || currentRouteInfo?.routeDirection;
+          routeInfo.routeAnimation = routeInfo.routeAnimation || currentRouteInfo?.routeAnimation;
         }
 
         this.locationHistory.add(routeInfo);
@@ -244,11 +251,17 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
     if (routeInfo && routeInfo.pushedByRoute) {
       const prevInfo = this.locationHistory.findLastLocation(routeInfo);
       if (prevInfo) {
+        /**
+         * This needs to be passed to handleNavigate
+         * otherwise incomingRouteParams.routeAnimation
+         * will be overridden.
+         */
+        const incomingAnimation = routeAnimation || routeInfo.routeAnimation;
         this.incomingRouteParams = {
           ...prevInfo,
           routeAction: 'pop',
           routeDirection: 'back',
-          routeAnimation: routeAnimation || routeInfo.routeAnimation,
+          routeAnimation: incomingAnimation,
         };
         if (
           routeInfo.lastPathname === routeInfo.pushedByRoute ||
@@ -270,7 +283,7 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
           const goBack = history.goBack || history.back;
           goBack();
         } else {
-          this.handleNavigate(prevInfo.pathname + (prevInfo.search || ''), 'pop', 'back', routeAnimation);
+          this.handleNavigate(prevInfo.pathname + (prevInfo.search || ''), 'pop', 'back', incomingAnimation);
         }
       } else {
         this.handleNavigate(defaultHref as string, 'pop', 'back', routeAnimation);
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 32e7c2683e7..2f7dbe9c7bb 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,57 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
+## [7.6.5](https://github.com/ionic-team/ionic-framework/compare/v7.6.4...v7.6.5) (2024-01-17)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
+## [7.6.4](https://github.com/ionic-team/ionic-framework/compare/v7.6.3...v7.6.4) (2024-01-10)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
+## [7.6.3](https://github.com/ionic-team/ionic-framework/compare/v7.6.2...v7.6.3) (2024-01-03)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
+## [7.6.2](https://github.com/ionic-team/ionic-framework/compare/v7.6.1...v7.6.2) (2023-12-19)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
+## [7.6.1](https://github.com/ionic-team/ionic-framework/compare/v7.6.0...v7.6.1) (2023-12-13)
+
+
+### Bug Fixes
+
+* **react:** avoid type collision with @types/react@18.2.43 and greater ([#28687](https://github.com/ionic-team/ionic-framework/issues/28687)) ([92f1b86](https://github.com/ionic-team/ionic-framework/commit/92f1b8627a240c93891205f75adcb5ce3d46596d))
+
+
+
+
+
 # [7.6.0](https://github.com/ionic-team/ionic-framework/compare/v7.5.8...v7.6.0) (2023-12-06)
 
 **Note:** Version bump only for package @ionic/react
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index 0418ae5ba8d..c1660aba65a 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react",
-  "version": "7.6.0",
+  "version": "7.6.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react",
-      "version": "7.6.0",
+      "version": "7.6.6",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.6.0",
+        "@ionic/core": "^7.6.6",
         "ionicons": "^7.0.0",
         "tslib": "*"
       },
@@ -811,12 +811,12 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.0.tgz",
-      "integrity": "sha512-pDX8G915puz8OcLhxfb9MwuvpYZsUOCngJdd+61ibJ6UF+NA2mGatsMqHKzcgelTXtwcHDpi9ZLUD/HNmupqaQ==",
+      "version": "7.6.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
+      "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
       "dependencies": {
-        "@stencil/core": "^4.8.1",
-        "ionicons": "^7.2.1",
+        "@stencil/core": "^4.10.0",
+        "ionicons": "^7.2.2",
         "tslib": "^2.1.0"
       }
     },
@@ -1674,9 +1674,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.1.tgz",
-      "integrity": "sha512-KG1H10j24rlyxIqOI4CG8/h9T7ObTv7giW2H3u1qXV4KKrLykDOpMcLzpqNXqL2Fki3s1QvHyl/oaRvi5waWVw==",
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
+      "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -6078,9 +6078,9 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.1.tgz",
-      "integrity": "sha512-2pvCM7DGVEtbbj48PJzQrCADCQrqjU1nUYX9l9PyEWz3ZfdnLdAouqwPxLdl8tbaF9cE7OZRSlyQD7oLOLnGoQ==",
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz",
+      "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
       "dependencies": {
         "@stencil/core": "^4.0.3"
       }
@@ -12857,12 +12857,12 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.0.tgz",
-      "integrity": "sha512-pDX8G915puz8OcLhxfb9MwuvpYZsUOCngJdd+61ibJ6UF+NA2mGatsMqHKzcgelTXtwcHDpi9ZLUD/HNmupqaQ==",
+      "version": "7.6.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
+      "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
       "requires": {
-        "@stencil/core": "^4.8.1",
-        "ionicons": "^7.2.1",
+        "@stencil/core": "^4.10.0",
+        "ionicons": "^7.2.2",
         "tslib": "^2.1.0"
       }
     },
@@ -13453,9 +13453,9 @@
       }
     },
     "@stencil/core": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.1.tgz",
-      "integrity": "sha512-KG1H10j24rlyxIqOI4CG8/h9T7ObTv7giW2H3u1qXV4KKrLykDOpMcLzpqNXqL2Fki3s1QvHyl/oaRvi5waWVw=="
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
+      "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w=="
     },
     "@szmarczak/http-timer": {
       "version": "4.0.6",
@@ -16785,9 +16785,9 @@
       }
     },
     "ionicons": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.1.tgz",
-      "integrity": "sha512-2pvCM7DGVEtbbj48PJzQrCADCQrqjU1nUYX9l9PyEWz3ZfdnLdAouqwPxLdl8tbaF9cE7OZRSlyQD7oLOLnGoQ==",
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz",
+      "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
       "requires": {
         "@stencil/core": "^4.0.3"
       }
diff --git a/packages/react/package.json b/packages/react/package.json
index 77b8d3f26ce..87276138cbd 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react",
-  "version": "7.6.0",
+  "version": "7.6.6",
   "description": "React specific wrapper for @ionic/core",
   "keywords": [
     "ionic",
@@ -39,7 +39,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "^7.6.0",
+    "@ionic/core": "^7.6.6",
     "ionicons": "^7.0.0",
     "tslib": "*"
   },
diff --git a/packages/react/rollup.config.mjs b/packages/react/rollup.config.mjs
index 71f731bdf23..4a5ae0f4196 100644
--- a/packages/react/rollup.config.mjs
+++ b/packages/react/rollup.config.mjs
@@ -1,4 +1,5 @@
 import typescript from '@rollup/plugin-typescript';
+const external = ['react', 'react-dom', 'react-router', 'react-router-dom', 'history', 'tslib'];
 
 export default {
   input: 'src/index.ts',
@@ -11,8 +12,8 @@ export default {
       sourcemap: true,
     }
   ],
-  external: (id) => !/^(\.|\/)/.test(id),
   plugins: [
     typescript(),
   ],
+  external: id => external.includes(id) || id.startsWith('@ionic/core') || id.startsWith('ionicons'),
 };
diff --git a/packages/react/src/components/utils/index.tsx b/packages/react/src/components/utils/index.tsx
index 808f761269b..f399802cd14 100644
--- a/packages/react/src/components/utils/index.tsx
+++ b/packages/react/src/components/utils/index.tsx
@@ -5,7 +5,15 @@ import React from 'react';
 import type { IonicReactProps } from '../IonicReactProps';
 
 export type IonicReactExternalProps<PropType, ElementType> = PropType &
-  Omit<React.HTMLAttributes<ElementType>, 'style'> &
+  /**
+   * TODO: FW-5753
+   *
+   * The `placeholder` property was removed from `HTMLAttributes` in @types/react@18.2.43
+   * https://github.com/DefinitelyTyped/DefinitelyTyped/commit/b954269038de46b4b2f1756a9f2f020cbc66a326
+   *
+   * This is a temporary workaround until @ionic/react is updated to >=18.2.43.
+   */
+  Omit<React.HTMLAttributes<ElementType>, 'style' | 'placeholder'> &
   IonicReactProps;
 
 export const createForwardRef = <PropType, ElementType>(
diff --git a/packages/react/test/base/tests/e2e/specs/overlay-components/IonPicker.cy.ts b/packages/react/test/base/tests/e2e/specs/overlay-components/IonPicker.cy.ts
index 8b8621cd4b3..d15ade0e3ef 100644
--- a/packages/react/test/base/tests/e2e/specs/overlay-components/IonPicker.cy.ts
+++ b/packages/react/test/base/tests/e2e/specs/overlay-components/IonPicker.cy.ts
@@ -1,9 +1,4 @@
-/**
- * TODO: Skipping for now to avoid the CE build issue
- * where child components do not get registered.
- * Re-enable after this is resolved in Stencil 2.9.
- */
-describe.skip('IonPicker', () => {
+describe('IonPicker', () => {
   beforeEach(() => {
     cy.visit('/overlay-components/picker');
   });
diff --git a/packages/react/test/base/tests/e2e/specs/overlay-hooks/useIonPicker.cy.ts b/packages/react/test/base/tests/e2e/specs/overlay-hooks/useIonPicker.cy.ts
index 5dc59e9f557..27feedfd3c0 100644
--- a/packages/react/test/base/tests/e2e/specs/overlay-hooks/useIonPicker.cy.ts
+++ b/packages/react/test/base/tests/e2e/specs/overlay-hooks/useIonPicker.cy.ts
@@ -1,10 +1,4 @@
-/**
- * TODO: Skipping for now to avoid the CE build issue
- * where child components do not get registered.
- * Re-enable after this is resolved in Stencil 2.9.
- */
-
-describe.skip('useIonPicker', () => {
+describe('useIonPicker', () => {
   beforeEach(() => {
     cy.visit('/overlay-hooks/picker');
   });
diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md
index 8ee3b4ea9c2..07e43400fbf 100644
--- a/packages/vue-router/CHANGELOG.md
+++ b/packages/vue-router/CHANGELOG.md
@@ -3,6 +3,54 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
+## [7.6.5](https://github.com/ionic-team/ionic-framework/compare/v7.6.4...v7.6.5) (2024-01-17)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
+## [7.6.4](https://github.com/ionic-team/ionic-framework/compare/v7.6.3...v7.6.4) (2024-01-10)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
+## [7.6.3](https://github.com/ionic-team/ionic-framework/compare/v7.6.2...v7.6.3) (2024-01-03)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
+## [7.6.2](https://github.com/ionic-team/ionic-framework/compare/v7.6.1...v7.6.2) (2023-12-19)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
+## [7.6.1](https://github.com/ionic-team/ionic-framework/compare/v7.6.0...v7.6.1) (2023-12-13)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
 # [7.6.0](https://github.com/ionic-team/ionic-framework/compare/v7.5.8...v7.6.0) (2023-12-06)
 
 **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 bcd4e7b84cb..1f4e7fbaf29 100644
--- a/packages/vue-router/package-lock.json
+++ b/packages/vue-router/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue-router",
-  "version": "7.6.0",
+  "version": "7.6.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue-router",
-      "version": "7.6.0",
+      "version": "7.6.6",
       "license": "MIT",
       "dependencies": {
-        "@ionic/vue": "^7.6.0"
+        "@ionic/vue": "^7.6.6"
       },
       "devDependencies": {
         "@ionic/eslint-config": "^0.3.0",
@@ -661,12 +661,12 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.0.tgz",
-      "integrity": "sha512-pDX8G915puz8OcLhxfb9MwuvpYZsUOCngJdd+61ibJ6UF+NA2mGatsMqHKzcgelTXtwcHDpi9ZLUD/HNmupqaQ==",
+      "version": "7.6.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
+      "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
       "dependencies": {
-        "@stencil/core": "^4.8.1",
-        "ionicons": "^7.2.1",
+        "@stencil/core": "^4.10.0",
+        "ionicons": "^7.2.2",
         "tslib": "^2.1.0"
       }
     },
@@ -852,11 +852,11 @@
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.6.0.tgz",
-      "integrity": "sha512-2CWLcVNS8kLQ6BK4UmRdc7a0HSsS6MqyTQh7+0qT88z+Ih05dCcZ3CiJ27F3F2a7jsOi48ggXt97zOpBbZENlg==",
+      "version": "7.6.6",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.6.6.tgz",
+      "integrity": "sha512-Ct992mndUmyTKq2vBFX/3gFcyNW/QKScYydAvG0Jtl9fPHrMZ7fYj+Hk1OEuLQDbsBMH3gUXjUV0OV5pYABsEA==",
       "dependencies": {
-        "@ionic/core": "7.6.0",
+        "@ionic/core": "7.6.6",
         "ionicons": "^7.0.0"
       }
     },
@@ -1508,9 +1508,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.1.tgz",
-      "integrity": "sha512-KG1H10j24rlyxIqOI4CG8/h9T7ObTv7giW2H3u1qXV4KKrLykDOpMcLzpqNXqL2Fki3s1QvHyl/oaRvi5waWVw==",
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.11.0.tgz",
+      "integrity": "sha512-zsKhgIkTGo+s7IthitxR/MKiMS3Ck1yIypOdXr0aE6ofboKqe9NdffTcxZ0vel0wD2bZYOb6WfPMzuhRKk6+FA==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -4279,9 +4279,9 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.1.tgz",
-      "integrity": "sha512-2pvCM7DGVEtbbj48PJzQrCADCQrqjU1nUYX9l9PyEWz3ZfdnLdAouqwPxLdl8tbaF9cE7OZRSlyQD7oLOLnGoQ==",
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz",
+      "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
       "dependencies": {
         "@stencil/core": "^4.0.3"
       }
@@ -7878,12 +7878,12 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.0.tgz",
-      "integrity": "sha512-pDX8G915puz8OcLhxfb9MwuvpYZsUOCngJdd+61ibJ6UF+NA2mGatsMqHKzcgelTXtwcHDpi9ZLUD/HNmupqaQ==",
+      "version": "7.6.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
+      "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
       "requires": {
-        "@stencil/core": "^4.8.1",
-        "ionicons": "^7.2.1",
+        "@stencil/core": "^4.10.0",
+        "ionicons": "^7.2.2",
         "tslib": "^2.1.0"
       }
     },
@@ -7993,11 +7993,11 @@
       "requires": {}
     },
     "@ionic/vue": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.6.0.tgz",
-      "integrity": "sha512-2CWLcVNS8kLQ6BK4UmRdc7a0HSsS6MqyTQh7+0qT88z+Ih05dCcZ3CiJ27F3F2a7jsOi48ggXt97zOpBbZENlg==",
+      "version": "7.6.6",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.6.6.tgz",
+      "integrity": "sha512-Ct992mndUmyTKq2vBFX/3gFcyNW/QKScYydAvG0Jtl9fPHrMZ7fYj+Hk1OEuLQDbsBMH3gUXjUV0OV5pYABsEA==",
       "requires": {
-        "@ionic/core": "7.6.0",
+        "@ionic/core": "7.6.6",
         "ionicons": "^7.0.0"
       }
     },
@@ -8461,9 +8461,9 @@
       }
     },
     "@stencil/core": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.1.tgz",
-      "integrity": "sha512-KG1H10j24rlyxIqOI4CG8/h9T7ObTv7giW2H3u1qXV4KKrLykDOpMcLzpqNXqL2Fki3s1QvHyl/oaRvi5waWVw=="
+      "version": "4.11.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.11.0.tgz",
+      "integrity": "sha512-zsKhgIkTGo+s7IthitxR/MKiMS3Ck1yIypOdXr0aE6ofboKqe9NdffTcxZ0vel0wD2bZYOb6WfPMzuhRKk6+FA=="
     },
     "@tootallnate/once": {
       "version": "2.0.0",
@@ -10515,9 +10515,9 @@
       }
     },
     "ionicons": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.1.tgz",
-      "integrity": "sha512-2pvCM7DGVEtbbj48PJzQrCADCQrqjU1nUYX9l9PyEWz3ZfdnLdAouqwPxLdl8tbaF9cE7OZRSlyQD7oLOLnGoQ==",
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz",
+      "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
       "requires": {
         "@stencil/core": "^4.0.3"
       }
diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json
index 96140107e55..1b6409fa65e 100644
--- a/packages/vue-router/package.json
+++ b/packages/vue-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue-router",
-  "version": "7.6.0",
+  "version": "7.6.6",
   "description": "Vue Router integration for @ionic/vue",
   "scripts": {
     "test.spec": "jest",
@@ -44,7 +44,7 @@
   },
   "homepage": "https://github.com/ionic-team/ionic#readme",
   "dependencies": {
-    "@ionic/vue": "^7.6.0"
+    "@ionic/vue": "^7.6.6"
   },
   "devDependencies": {
     "@ionic/eslint-config": "^0.3.0",
diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
index ac1f8d14f7a..85949b91f11 100644
--- a/packages/vue/CHANGELOG.md
+++ b/packages/vue/CHANGELOG.md
@@ -3,6 +3,57 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.6.6](https://github.com/ionic-team/ionic-framework/compare/v7.6.5...v7.6.6) (2024-01-24)
+
+
+### Bug Fixes
+
+* **vue:** tabs and parameterized routes work with latest vue ([#28846](https://github.com/ionic-team/ionic-framework/issues/28846)) ([5bc4399](https://github.com/ionic-team/ionic-framework/commit/5bc439961fda2c595666e67688fdd1b8ff4dd0bf)), closes [#28774](https://github.com/ionic-team/ionic-framework/issues/28774)
+
+
+
+
+
+## [7.6.5](https://github.com/ionic-team/ionic-framework/compare/v7.6.4...v7.6.5) (2024-01-17)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
+## [7.6.4](https://github.com/ionic-team/ionic-framework/compare/v7.6.3...v7.6.4) (2024-01-10)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
+## [7.6.3](https://github.com/ionic-team/ionic-framework/compare/v7.6.2...v7.6.3) (2024-01-03)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
+## [7.6.2](https://github.com/ionic-team/ionic-framework/compare/v7.6.1...v7.6.2) (2023-12-19)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
+## [7.6.1](https://github.com/ionic-team/ionic-framework/compare/v7.6.0...v7.6.1) (2023-12-13)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
 # [7.6.0](https://github.com/ionic-team/ionic-framework/compare/v7.5.8...v7.6.0) (2023-12-06)
 
 
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
index e1980775816..ddb6e6476bb 100644
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue",
-  "version": "7.6.0",
+  "version": "7.6.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue",
-      "version": "7.6.0",
+      "version": "7.6.6",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^7.6.0",
+        "@ionic/core": "^7.6.6",
         "ionicons": "^7.0.0"
       },
       "devDependencies": {
@@ -208,12 +208,12 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.0.tgz",
-      "integrity": "sha512-pDX8G915puz8OcLhxfb9MwuvpYZsUOCngJdd+61ibJ6UF+NA2mGatsMqHKzcgelTXtwcHDpi9ZLUD/HNmupqaQ==",
+      "version": "7.6.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
+      "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
       "dependencies": {
-        "@stencil/core": "^4.8.1",
-        "ionicons": "^7.2.1",
+        "@stencil/core": "^4.10.0",
+        "ionicons": "^7.2.2",
         "tslib": "^2.1.0"
       }
     },
@@ -628,9 +628,9 @@
       ]
     },
     "node_modules/@stencil/core": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.1.tgz",
-      "integrity": "sha512-KG1H10j24rlyxIqOI4CG8/h9T7ObTv7giW2H3u1qXV4KKrLykDOpMcLzpqNXqL2Fki3s1QvHyl/oaRvi5waWVw==",
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
+      "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w==",
       "bin": {
         "stencil": "bin/stencil"
       },
@@ -2431,9 +2431,9 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.1.tgz",
-      "integrity": "sha512-2pvCM7DGVEtbbj48PJzQrCADCQrqjU1nUYX9l9PyEWz3ZfdnLdAouqwPxLdl8tbaF9cE7OZRSlyQD7oLOLnGoQ==",
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz",
+      "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
       "dependencies": {
         "@stencil/core": "^4.0.3"
       }
@@ -3959,12 +3959,12 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "7.6.0",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.0.tgz",
-      "integrity": "sha512-pDX8G915puz8OcLhxfb9MwuvpYZsUOCngJdd+61ibJ6UF+NA2mGatsMqHKzcgelTXtwcHDpi9ZLUD/HNmupqaQ==",
+      "version": "7.6.6",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.6.6.tgz",
+      "integrity": "sha512-WstnLHiR8ipW2ASdO/eqSwgMHCuVvJE3qsUNPHWkup9f08/bcbKYZpOfaWNLw/ftNqEpFbjiRuocoYYyLP0/gw==",
       "requires": {
-        "@stencil/core": "^4.8.1",
-        "ionicons": "^7.2.1",
+        "@stencil/core": "^4.10.0",
+        "ionicons": "^7.2.2",
         "tslib": "^2.1.0"
       },
       "dependencies": {
@@ -4203,9 +4203,9 @@
       "optional": true
     },
     "@stencil/core": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.8.1.tgz",
-      "integrity": "sha512-KG1H10j24rlyxIqOI4CG8/h9T7ObTv7giW2H3u1qXV4KKrLykDOpMcLzpqNXqL2Fki3s1QvHyl/oaRvi5waWVw=="
+      "version": "4.10.0",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.10.0.tgz",
+      "integrity": "sha512-7lDTPY1IxXN2/C+wQPHt3e/dYgY4YgelA8MxOsU3ZftXtpzWad/QNWhSAtKisJMrSjQh41jMDOgD0yLBwV6E7w=="
     },
     "@types/estree": {
       "version": "1.0.4",
@@ -5545,9 +5545,9 @@
       }
     },
     "ionicons": {
-      "version": "7.2.1",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.1.tgz",
-      "integrity": "sha512-2pvCM7DGVEtbbj48PJzQrCADCQrqjU1nUYX9l9PyEWz3ZfdnLdAouqwPxLdl8tbaF9cE7OZRSlyQD7oLOLnGoQ==",
+      "version": "7.2.2",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-7.2.2.tgz",
+      "integrity": "sha512-I3iYIfc9Q9FRifWyFSwTAvbEABWlWY32i0sAVDDPGYnaIZVugkLCZFbEcrphW6ixVPg8tt1oLwalo/JJwbEqnA==",
       "requires": {
         "@stencil/core": "^4.0.3"
       }
diff --git a/packages/vue/package.json b/packages/vue/package.json
index bb829145e4a..37da88be765 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue",
-  "version": "7.6.0",
+  "version": "7.6.6",
   "description": "Vue specific wrapper for @ionic/core",
   "scripts": {
     "eslint": "eslint src",
@@ -66,7 +66,7 @@
     "vue-router": "^4.0.16"
   },
   "dependencies": {
-    "@ionic/core": "^7.6.0",
+    "@ionic/core": "^7.6.6",
     "ionicons": "^7.0.0"
   },
   "vetur": {
diff --git a/packages/vue/src/components/IonRouterOutlet.ts b/packages/vue/src/components/IonRouterOutlet.ts
index 4b4c634e946..1c32de13c01 100644
--- a/packages/vue/src/components/IonRouterOutlet.ts
+++ b/packages/vue/src/components/IonRouterOutlet.ts
@@ -115,7 +115,15 @@ export const IonRouterOutlet = /*@__PURE__*/ defineComponent({
 
         previousMatchedRouteRef = currentMatchedRouteRef;
         previousMatchedPath = currentRoute.path;
-      }
+      },
+      /**
+       * Future versions of Vue may default watching nested
+       * reactive objects to "deep: false".
+       * We explicitly set this watcher to "deep: true" to
+       * account for that.
+       * https://github.com/vuejs/core/issues/9965#issuecomment-1875067499
+       */
+      { deep: true }
     );
 
     const canStart = () => {
diff --git a/packages/vue/src/components/IonTabs.ts b/packages/vue/src/components/IonTabs.ts
index a2333695a30..432c2479b59 100644
--- a/packages/vue/src/components/IonTabs.ts
+++ b/packages/vue/src/components/IonTabs.ts
@@ -6,6 +6,28 @@ const DID_CHANGE = "ionTabsDidChange";
 
 // TODO(FW-2969): types
 
+/**
+ * Vue 3.2.38 fixed an issue where Web Component
+ * names are respected using kebab case instead of pascal case.
+ * As a result, we need to account for both here since we support
+ * versions of Vue < 3.2.38.
+ */
+// TODO FW-5904
+const isRouterOutlet = (node: VNode) => {
+  return (
+    node.type &&
+    ((node.type as any).name === "IonRouterOutlet" ||
+      node.type === "ion-router-outlet")
+  );
+};
+
+const isTabBar = (node: VNode) => {
+  return (
+    node.type &&
+    ((node.type as any).name === "IonTabBar" || node.type === "ion-tab-bar")
+  );
+};
+
 export const IonTabs = /*@__PURE__*/ defineComponent({
   name: "IonTabs",
   emits: [WILL_CHANGE, DID_CHANGE],
@@ -19,9 +41,8 @@ export const IonTabs = /*@__PURE__*/ defineComponent({
      * inside of ion-tabs.
      */
     if (slottedContent && slottedContent.length > 0) {
-      routerOutlet = slottedContent.find(
-        (child: VNode) =>
-          child.type && (child.type as any).name === "IonRouterOutlet"
+      routerOutlet = slottedContent.find((child: VNode) =>
+        isRouterOutlet(child)
       );
     }
 
@@ -57,13 +78,11 @@ export const IonTabs = /*@__PURE__*/ defineComponent({
        * since that needs to be inside of `.tabs-inner`.
        */
       const filteredContent = slottedContent.filter(
-        (child: VNode) =>
-          !child.type ||
-          (child.type && (child.type as any).name !== "IonRouterOutlet")
+        (child: VNode) => !child.type || !isRouterOutlet(child)
       );
 
-      const slottedTabBar = filteredContent.find(
-        (child: VNode) => child.type && (child.type as any).name === "IonTabBar"
+      const slottedTabBar = filteredContent.find((child: VNode) =>
+        isTabBar(child)
       );
       const hasTopSlotTabBar =
         slottedTabBar && slottedTabBar.props?.slot === "top";
diff --git a/packages/vue/test/apps/vue3/package.json b/packages/vue/test/apps/vue3/package.json
index 669d1600d8b..09e9b8fcdf6 100644
--- a/packages/vue/test/apps/vue3/package.json
+++ b/packages/vue/test/apps/vue3/package.json
@@ -19,8 +19,8 @@
     "@ionic/vue": "^6.0.12",
     "@ionic/vue-router": "^6.0.12",
     "ionicons": "^6.0.4",
-    "vue": "^3.2.31",
-    "vue-router": "^4.0.14"
+    "vue": "^3.4.14",
+    "vue-router": "^4.2.5"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^5.4.0",
@@ -35,7 +35,7 @@
     "jsdom": "^20.0.0",
     "typescript": "~4.5.5",
     "vite": "^3.1.4",
-    "vitest": "^0.23.4",
+    "vitest": "^1.2.1",
     "wait-on": "^5.3.0"
   },
   "engines": {
diff --git a/packages/vue/test/base/src/components/ModalContent.vue b/packages/vue/test/base/src/components/ModalContent.vue
index 48586c826bc..6b425e7cd78 100644
--- a/packages/vue/test/base/src/components/ModalContent.vue
+++ b/packages/vue/test/base/src/components/ModalContent.vue
@@ -10,7 +10,7 @@
     </ion-header>
     <ion-content class="ion-padding">
       <ion-label id="title">{{ title }}</ion-label>
-      <ion-input></ion-input>
+      <ion-input :aria-label="title"></ion-input>
     </ion-content>
   </ion-page>
 </template>
diff --git a/packages/vue/test/base/src/views/Inputs.vue b/packages/vue/test/base/src/views/Inputs.vue
index 70ec41094e9..2cf45a98d09 100644
--- a/packages/vue/test/base/src/views/Inputs.vue
+++ b/packages/vue/test/base/src/views/Inputs.vue
@@ -30,28 +30,23 @@
       </ion-header>
 
       <ion-item>
-        <ion-label>Checkbox</ion-label>
-        <ion-checkbox slot="start" v-model="checkbox"></ion-checkbox>
+        <ion-checkbox v-model="checkbox">Checkbox</ion-checkbox>
       </ion-item>
 
       <ion-item>
-        <ion-label>Toggle</ion-label>
-        <ion-toggle slot="end" v-model="toggle"></ion-toggle>
+        <ion-toggle v-model="toggle">Toggle</ion-toggle>
       </ion-item>
 
       <ion-item>
-        <ion-label>Input</ion-label>
-        <ion-input slot="end" v-model="input"></ion-input>
+        <ion-input v-model="input" label="Input"></ion-input>
       </ion-item>
 
       <ion-item>
-        <ion-label>Range</ion-label>
-        <ion-range :dual-knobs="true" :min="0" :max="100" slot="end" v-model="range"></ion-range>
+        <ion-range label="Range" :dual-knobs="true" :min="0" :max="100" slot="end" v-model="range"></ion-range>
       </ion-item>
 
       <ion-item>
-        <ion-label>Textarea</ion-label>
-        <ion-textarea slot="end" v-model="textarea"></ion-textarea>
+        <ion-textarea label="Textarea" v-model="textarea"></ion-textarea>
       </ion-item>
 
       <ion-item>
@@ -61,22 +56,18 @@
 
       <ion-radio-group v-model="radio">
         <ion-item>
-          <ion-label>Red</ion-label>
-          <ion-radio value="red"></ion-radio>
+          <ion-radio value="red">Red</ion-radio>
         </ion-item>
         <ion-item>
-          <ion-label>Green</ion-label>
-          <ion-radio value="green"></ion-radio>
+          <ion-radio value="green">Green</ion-radio>
         </ion-item>
         <ion-item>
-          <ion-label>Blue</ion-label>
-          <ion-radio value="blue"></ion-radio>
+          <ion-radio value="blue">Blue</ion-radio>
         </ion-item>
       </ion-radio-group>
 
       <ion-item>
-        <ion-label>Select</ion-label>
-        <ion-select v-model="select">
+        <ion-select v-model="select" label="Select">
           <ion-select-option value="apples">Apples</ion-select-option>
           <ion-select-option value="bananas">Bananas</ion-select-option>
         </ion-select>
diff --git a/packages/vue/test/base/src/views/Overlays.vue b/packages/vue/test/base/src/views/Overlays.vue
index ccf794d362b..799a44672b5 100644
--- a/packages/vue/test/base/src/views/Overlays.vue
+++ b/packages/vue/test/base/src/views/Overlays.vue
@@ -18,28 +18,22 @@
         </ion-list-header>
 
         <ion-item>
-          <ion-label>Alert</ion-label>
-          <ion-radio value="alert" id="ion-alert"></ion-radio>
+          <ion-radio value="alert" id="ion-alert">Alert</ion-radio>
         </ion-item>
         <ion-item>
-          <ion-label>Action Sheet</ion-label>
-          <ion-radio value="action-sheet" id="ion-action-sheet"></ion-radio>
+          <ion-radio value="action-sheet" id="ion-action-sheet">Action Sheet</ion-radio>
         </ion-item>
         <ion-item>
-          <ion-label>Loading</ion-label>
-          <ion-radio value="loading" id="ion-loading"></ion-radio>
+          <ion-radio value="loading" id="ion-loading">Loading</ion-radio>
         </ion-item>
         <ion-item>
-          <ion-label>Modal</ion-label>
-          <ion-radio value="modal" id="ion-modal"></ion-radio>
+          <ion-radio value="modal" id="ion-modal">Modal</ion-radio>
         </ion-item>
         <ion-item>
-          <ion-label>Popover</ion-label>
-          <ion-radio value="popover" id="ion-popover"></ion-radio>
+          <ion-radio value="popover" id="ion-popover">Popover</ion-radio>
         </ion-item>
         <ion-item>
-          <ion-label>Toast</ion-label>
-          <ion-radio value="toast" id="ion-toast"></ion-radio>
+          <ion-radio value="toast" id="ion-toast">Toast</ion-radio>
         </ion-item>
       </ion-radio-group>
 
@@ -51,12 +45,10 @@
         </ion-list-header>
 
         <ion-item>
-          <ion-label>Controller</ion-label>
-          <ion-radio value="controller" id="controller"></ion-radio>
+          <ion-radio value="controller" id="controller">Controller</ion-radio>
         </ion-item>
         <ion-item>
-          <ion-label>Component</ion-label>
-          <ion-radio value="component" id="component"></ion-radio>
+          <ion-radio value="component" id="component">Component</ion-radio>
         </ion-item>
       </ion-radio-group>
 
diff --git a/packages/vue/test/base/src/views/Select.vue b/packages/vue/test/base/src/views/Select.vue
index 0f48fcc612b..bb4d9b31f39 100644
--- a/packages/vue/test/base/src/views/Select.vue
+++ b/packages/vue/test/base/src/views/Select.vue
@@ -7,8 +7,8 @@
     </ion-header>
     <ion-content>
       <ion-item>
-        <ion-label>Select Popover</ion-label>
         <ion-select
+          label="Select Popover"
           id="select-popover"
           interface="popover"
           placeholder="Select fruit"
@@ -30,7 +30,6 @@ import {
   IonTitle,
   IonContent,
   IonItem,
-  IonLabel,
   IonSelect,
   IonSelectOption,
 } from "@ionic/vue";
@@ -44,7 +43,6 @@ export default defineComponent({
     IonTitle,
     IonContent,
     IonItem,
-    IonLabel,
     IonSelect,
     IonSelectOption,
   },
diff --git a/packages/vue/test/base/tests/unit/hooks.spec.ts b/packages/vue/test/base/tests/unit/hooks.spec.ts
index b0ef23bed7a..d6657faa6bc 100644
--- a/packages/vue/test/base/tests/unit/hooks.spec.ts
+++ b/packages/vue/test/base/tests/unit/hooks.spec.ts
@@ -1,14 +1,9 @@
 import { mount } from '@vue/test-utils';
 import { describe, expect, it } from 'vitest';
 import { createRouter, createWebHistory } from '@ionic/vue-router';
-import { IonicVue, IonApp, IonRouterOutlet, IonPage, useIonRouter, createAnimation } from '@ionic/vue';
+import { IonicVue, IonRouterOutlet, IonPage, useIonRouter } from '@ionic/vue';
 import { mockAnimation, waitForRouter } from './utils';
 
-const App = {
-  components: { IonApp, IonRouterOutlet },
-  template: '<ion-app><ion-router-outlet /></ion-app>',
-}
-
 const BasePage = {
   template: '<ion-page></ion-page>',
   components: { IonPage },
@@ -40,7 +35,7 @@ describe('useIonRouter', () => {
 
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }
@@ -85,7 +80,7 @@ describe('useIonRouter', () => {
 
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }
@@ -137,7 +132,7 @@ describe('useIonRouter', () => {
 
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }
@@ -181,7 +176,7 @@ describe('useIonRouter', () => {
 
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }
@@ -229,7 +224,7 @@ describe('useIonRouter', () => {
 
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }
diff --git a/packages/vue/test/base/tests/unit/lifecycle.spec.ts b/packages/vue/test/base/tests/unit/lifecycle.spec.ts
index f82106ccbe8..3c1996d5e74 100644
--- a/packages/vue/test/base/tests/unit/lifecycle.spec.ts
+++ b/packages/vue/test/base/tests/unit/lifecycle.spec.ts
@@ -1,15 +1,10 @@
 import { mount } from '@vue/test-utils';
 import { describe, expect, it, vi } from 'vitest';
 import { createRouter, createWebHistory } from '@ionic/vue-router';
-import { IonicVue, IonApp, IonRouterOutlet, IonTabs, IonPage } from '@ionic/vue';
+import { IonicVue, IonRouterOutlet, IonTabs, IonPage } from '@ionic/vue';
 import { defineComponent } from 'vue';
 import { waitForRouter } from './utils';
 
-const App = {
-  components: { IonApp, IonRouterOutlet },
-  template: '<ion-app><ion-router-outlet /></ion-app>',
-}
-
 const BasePage = {
   template: '<ion-page :data-pageid="name"></ion-page>',
   components: { IonPage },
@@ -54,7 +49,7 @@ describe('Lifecycle Events', () => {
     // Initial render
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }
@@ -108,7 +103,7 @@ describe('Lifecycle Events', () => {
       template: `
         <ion-page>
           <ion-tabs>
-            <ion-router-outlet></ion-router-outlet>
+            <IonRouterOutlet />
           </ion-tabs>
         </ion-page>
       `,
@@ -148,7 +143,7 @@ describe('Lifecycle Events', () => {
     // Initial render
     router.push('/tab1');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }
diff --git a/packages/vue/test/base/tests/unit/page.spec.ts b/packages/vue/test/base/tests/unit/page.spec.ts
index cd8917c30bd..4fb0e985f25 100644
--- a/packages/vue/test/base/tests/unit/page.spec.ts
+++ b/packages/vue/test/base/tests/unit/page.spec.ts
@@ -1,12 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { describe, expect, it } from 'vitest';
 import { createRouter, createWebHistory } from '@ionic/vue-router';
-import { IonicVue, IonApp, IonRouterOutlet, IonPage } from '@ionic/vue';
-
-const App = {
-  components: { IonApp, IonRouterOutlet },
-  template: '<ion-app><ion-router-outlet /></ion-app>',
-}
+import { IonicVue, IonRouterOutlet, IonPage } from '@ionic/vue';
 
 describe('IonPage', () => {
   it('should add ion-page class', async () => {
@@ -25,7 +20,7 @@ describe('IonPage', () => {
 
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }
@@ -50,7 +45,7 @@ describe('IonPage', () => {
 
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }
diff --git a/packages/vue/test/base/tests/unit/router-outlet.spec.ts b/packages/vue/test/base/tests/unit/router-outlet.spec.ts
index 89ee04bc559..f25490c2a21 100644
--- a/packages/vue/test/base/tests/unit/router-outlet.spec.ts
+++ b/packages/vue/test/base/tests/unit/router-outlet.spec.ts
@@ -3,22 +3,14 @@ import { afterEach, describe, expect, it, vi } from 'vitest';
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import {
   IonicVue,
-  IonApp,
   IonRouterOutlet,
   IonPage,
   useIonRouter,
-  createAnimation
 } from '@ionic/vue';
-import { onBeforeRouteLeave } from 'vue-router';
 import { mockAnimation, waitForRouter } from './utils';
 
 enableAutoUnmount(afterEach);
 
-const App = {
-  components: { IonApp, IonRouterOutlet },
-  template: '<ion-app><ion-router-outlet /></ion-app>',
-}
-
 const BasePage = {
   template: '<ion-page :data-pageid="name"></ion-page>',
   components: { IonPage },
@@ -60,7 +52,7 @@ describe('Routing', () => {
 
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }
@@ -122,7 +114,7 @@ describe('Routing', () => {
 
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }
diff --git a/packages/vue/test/base/tests/unit/routing.spec.ts b/packages/vue/test/base/tests/unit/routing.spec.ts
index a4a8f55521a..3d1f50a428f 100644
--- a/packages/vue/test/base/tests/unit/routing.spec.ts
+++ b/packages/vue/test/base/tests/unit/routing.spec.ts
@@ -17,11 +17,6 @@ import { waitForRouter } from './utils';
 
 enableAutoUnmount(afterEach);
 
-const App = {
-  components: { IonApp, IonRouterOutlet },
-  template: '<ion-app><ion-router-outlet /></ion-app>',
-}
-
 const BasePage = {
   template: '<ion-page :data-pageid="name"></ion-page>',
   components: { IonPage },
@@ -46,7 +41,7 @@ describe('Routing', () => {
 
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }
@@ -74,7 +69,7 @@ describe('Routing', () => {
 
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }
@@ -107,7 +102,7 @@ describe('Routing', () => {
 
     router.push('/myPath/123');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }
@@ -147,7 +142,7 @@ describe('Routing', () => {
 
     router.push('/myPath');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }
@@ -182,7 +177,7 @@ describe('Routing', () => {
 
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }
@@ -203,7 +198,7 @@ describe('Routing', () => {
       template: `
         <ion-page>
           <ion-tabs>
-            <ion-router-outlet></ion-router-outlet>
+            <IonRouterOutlet />
             <ion-tab-bar slot="top">
               <ion-tab-button tab="tab1" href="/tabs/tab1">
                 <ion-label>Tab 1</ion-label>
@@ -247,9 +242,9 @@ describe('Routing', () => {
       ]
     });
 
-    router.push('/');
+    router.push('/tabs/tab1');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }
@@ -302,7 +297,7 @@ describe('Routing', () => {
 
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }
@@ -355,7 +350,7 @@ describe('Routing', () => {
 
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }
@@ -402,7 +397,7 @@ describe('Routing', () => {
 
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }
@@ -450,7 +445,7 @@ describe('Routing', () => {
 
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }
@@ -618,7 +613,7 @@ describe('Routing', () => {
 
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }
@@ -672,7 +667,7 @@ describe('Routing', () => {
 
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }
diff --git a/packages/vue/test/base/tests/unit/tab-bar.spec.ts b/packages/vue/test/base/tests/unit/tab-bar.spec.ts
index d1c1037a924..00ded7020b4 100644
--- a/packages/vue/test/base/tests/unit/tab-bar.spec.ts
+++ b/packages/vue/test/base/tests/unit/tab-bar.spec.ts
@@ -1,12 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { describe, expect, it } from 'vitest';
 import { createRouter, createWebHistory } from '@ionic/vue-router';
-import { IonicVue, IonApp, IonRouterOutlet, IonPage, IonTabs, IonTabBar } from '@ionic/vue';
-
-const App = {
-  components: { IonApp, IonRouterOutlet },
-  template: '<ion-app><ion-router-outlet /></ion-app>',
-}
+import { IonicVue, IonRouterOutlet, IonPage, IonTabs, IonTabBar } from '@ionic/vue';
 
 describe('ion-tab-bar', () => {
   it('should render in the top slot', async () => {
@@ -31,7 +26,7 @@ describe('ion-tab-bar', () => {
 
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(Tabs, {
       global: {
         plugins: [router, IonicVue]
       }
@@ -67,7 +62,7 @@ describe('ion-tab-bar', () => {
 
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(Tabs, {
       global: {
         plugins: [router, IonicVue]
       }
@@ -102,7 +97,7 @@ describe('ion-tab-bar', () => {
 
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(Tabs, {
       global: {
         plugins: [router, IonicVue]
       }
@@ -141,16 +136,15 @@ describe('ion-tab-bar', () => {
 
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(Tabs, {
       global: {
         plugins: [router, IonicVue]
       }
     });
 
-    const innerHTML = wrapper.find('ion-tabs').html();
-
-    const tabs = wrapper.findComponent(IonTabBar);
-    const children = tabs.vm.$el.childNodes;
+    const tabs = wrapper.findComponent(IonTabs);
+    const tabbar = tabs.vm.$el.children[1];
+    const children = tabbar.childNodes;
 
     // 8 is a comment node: https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType
     expect(children[0].nodeType).toEqual(8);
diff --git a/packages/vue/test/base/tests/unit/tabs.spec.ts b/packages/vue/test/base/tests/unit/tabs.spec.ts
index 528386b8963..73a82bd8748 100644
--- a/packages/vue/test/base/tests/unit/tabs.spec.ts
+++ b/packages/vue/test/base/tests/unit/tabs.spec.ts
@@ -1,14 +1,9 @@
 import { mount } from '@vue/test-utils';
 import { describe, expect, it } from 'vitest';
 import { createRouter, createWebHistory } from '@ionic/vue-router';
-import { IonicVue, IonApp, IonRouterOutlet, IonPage, IonTabs, IonTabBar, IonTabButton, IonLabel } from '@ionic/vue';
+import { IonicVue, IonRouterOutlet, IonPage, IonTabs, IonTabBar, IonTabButton, IonLabel } from '@ionic/vue';
 import { waitForRouter } from './utils';
 
-const App = {
-  components: { IonApp, IonRouterOutlet },
-  template: '<ion-app><ion-router-outlet /></ion-app>',
-}
-
 const Tabs = {
   components: { IonPage, IonTabs, IonTabBar, IonTabButton, IonLabel, IonRouterOutlet },
   template: `
@@ -64,7 +59,7 @@ describe('ion-tabs', () => {
 
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }
@@ -112,7 +107,7 @@ describe('ion-tabs', () => {
 
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }
@@ -166,7 +161,7 @@ describe('ion-tabs', () => {
 
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }
@@ -222,7 +217,7 @@ describe('ion-tabs', () => {
 
     router.push('/');
     await router.isReady();
-    const wrapper = mount(App, {
+    const wrapper = mount(IonRouterOutlet, {
       global: {
         plugins: [router, IonicVue]
       }