diff --git a/.github/actions/publish-npm/action.yml b/.github/actions/publish-npm/action.yml
index d3e06d5fb01..6913b493ef1 100644
--- a/.github/actions/publish-npm/action.yml
+++ b/.github/actions/publish-npm/action.yml
@@ -22,7 +22,7 @@ runs:
   using: 'composite'
   steps:
     - name: 🟢 Configure Node for Publish
-      uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+      uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
       with:
         node-version: ${{ inputs.node-version }}
         registry-url: 'https://registry.npmjs.org'
diff --git a/.github/workflows/actions/build-angular-server/action.yml b/.github/workflows/actions/build-angular-server/action.yml
index b5d37c5a9ac..e21a39669bf 100644
--- a/.github/workflows/actions/build-angular-server/action.yml
+++ b/.github/workflows/actions/build-angular-server/action.yml
@@ -3,7 +3,7 @@ description: 'Build Ionic Angular Server'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+    - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
       with:
         node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
diff --git a/.github/workflows/actions/build-angular/action.yml b/.github/workflows/actions/build-angular/action.yml
index 5224f9741e0..12e1db1f5dc 100644
--- a/.github/workflows/actions/build-angular/action.yml
+++ b/.github/workflows/actions/build-angular/action.yml
@@ -3,7 +3,7 @@ description: 'Build Ionic Angular'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@v6
+    - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
       with:
         node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
diff --git a/.github/workflows/actions/build-core-stencil-prerelease/action.yml b/.github/workflows/actions/build-core-stencil-prerelease/action.yml
index e23d9119831..8cc7016349f 100644
--- a/.github/workflows/actions/build-core-stencil-prerelease/action.yml
+++ b/.github/workflows/actions/build-core-stencil-prerelease/action.yml
@@ -8,8 +8,8 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-    - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+    - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
       with:
         node-version: 24.x
 
@@ -25,6 +25,10 @@ runs:
       run: npm run build -- --ci --debug --verbose
       working-directory: ./core
       shell: bash
+    - name: 🔍 Verify Lazy Imports
+      run: npm run test.lazy-imports
+      working-directory: ./core
+      shell: bash
     - uses: ./.github/workflows/actions/upload-archive
       with:
         name: ionic-core
diff --git a/.github/workflows/actions/build-core/action.yml b/.github/workflows/actions/build-core/action.yml
index 7524c8a97b3..523b303139a 100644
--- a/.github/workflows/actions/build-core/action.yml
+++ b/.github/workflows/actions/build-core/action.yml
@@ -8,8 +8,8 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-    - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+    - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
       with:
         node-version: 24.x
     - name: 🕸️ Install Dependencies
@@ -27,6 +27,10 @@ runs:
       run: npm run build -- --ci
       working-directory: ./core
       shell: bash
+    - name: 🔍 Verify Lazy Imports
+      run: npm run test.lazy-imports
+      working-directory: ./core
+      shell: bash
     - uses: ./.github/workflows/actions/upload-archive
       with:
         name: ionic-core
diff --git a/.github/workflows/actions/build-react-router/action.yml b/.github/workflows/actions/build-react-router/action.yml
index c8083494b0a..b104ebd429d 100644
--- a/.github/workflows/actions/build-react-router/action.yml
+++ b/.github/workflows/actions/build-react-router/action.yml
@@ -3,7 +3,7 @@ description: 'Build Ionic React Router'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+    - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
       with:
         node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
diff --git a/.github/workflows/actions/build-react/action.yml b/.github/workflows/actions/build-react/action.yml
index 5899335ad3e..5335ea47af2 100644
--- a/.github/workflows/actions/build-react/action.yml
+++ b/.github/workflows/actions/build-react/action.yml
@@ -3,7 +3,7 @@ description: 'Build Ionic React'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+    - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
       with:
         node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
diff --git a/.github/workflows/actions/build-vue-router/action.yml b/.github/workflows/actions/build-vue-router/action.yml
index 9b07ce64973..bf47bb0dec3 100644
--- a/.github/workflows/actions/build-vue-router/action.yml
+++ b/.github/workflows/actions/build-vue-router/action.yml
@@ -3,7 +3,7 @@ description: 'Builds Ionic Vue Router'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+    - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
       with:
         node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
diff --git a/.github/workflows/actions/build-vue/action.yml b/.github/workflows/actions/build-vue/action.yml
index 5c7497ec359..4a7375786d2 100644
--- a/.github/workflows/actions/build-vue/action.yml
+++ b/.github/workflows/actions/build-vue/action.yml
@@ -3,7 +3,7 @@ description: 'Build Ionic Vue'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+    - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
       with:
         node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
diff --git a/.github/workflows/actions/download-archive/action.yml b/.github/workflows/actions/download-archive/action.yml
index 2acddf9713f..97f07f8627a 100644
--- a/.github/workflows/actions/download-archive/action.yml
+++ b/.github/workflows/actions/download-archive/action.yml
@@ -10,7 +10,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/download-artifact@v8
+    - uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
       with:
         name: ${{ inputs.name }}
         path: ${{ inputs.path }}
diff --git a/.github/workflows/actions/test-angular-e2e/action.yml b/.github/workflows/actions/test-angular-e2e/action.yml
index a4835a0210a..8a15bfb5037 100644
--- a/.github/workflows/actions/test-angular-e2e/action.yml
+++ b/.github/workflows/actions/test-angular-e2e/action.yml
@@ -6,7 +6,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+    - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
       with:
         node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
@@ -33,7 +33,7 @@ runs:
       shell: bash
       working-directory: ./packages/angular/test/build/${{ inputs.app }}
     - name: 📦 Install Playwright Browsers
-      run: npx playwright install
+      run: npx playwright install chromium
       shell: bash
       working-directory: ./packages/angular/test/build/${{ inputs.app }}
     - name: 🔄 Sync Built Changes
diff --git a/.github/workflows/actions/test-core-clean-build/action.yml b/.github/workflows/actions/test-core-clean-build/action.yml
index 96abc90121c..25c9a202652 100644
--- a/.github/workflows/actions/test-core-clean-build/action.yml
+++ b/.github/workflows/actions/test-core-clean-build/action.yml
@@ -3,7 +3,7 @@ description: 'Test Core Clean Build'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+    - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
       with:
         node-version: 24.x
 
diff --git a/.github/workflows/actions/test-core-lint/action.yml b/.github/workflows/actions/test-core-lint/action.yml
index f9f0011719a..66a3036ef04 100644
--- a/.github/workflows/actions/test-core-lint/action.yml
+++ b/.github/workflows/actions/test-core-lint/action.yml
@@ -3,7 +3,7 @@ description: 'Test Core Lint'
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+    - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
       with:
         node-version: 24.x
     - name: 🕸️ Install Dependencies
diff --git a/.github/workflows/actions/test-core-screenshot/action.yml b/.github/workflows/actions/test-core-screenshot/action.yml
index 1f8699e66d4..379ce934edc 100644
--- a/.github/workflows/actions/test-core-screenshot/action.yml
+++ b/.github/workflows/actions/test-core-screenshot/action.yml
@@ -13,7 +13,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+    - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
       with:
         node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
@@ -66,7 +66,7 @@ runs:
       working-directory: ./core
     - name: 📦 Archive Updated Screenshots
       if: inputs.update == 'true' && steps.test-and-update.outputs.hasUpdatedScreenshots == 'true'
-      uses: actions/upload-artifact@v7
+      uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
       with:
         name: updated-screenshots-${{ inputs.shard }}-${{ inputs.totalShards }}
         path: UpdatedScreenshots-${{ inputs.shard }}-${{ inputs.totalShards }}.zip
diff --git a/.github/workflows/actions/test-core-spec/action.yml b/.github/workflows/actions/test-core-spec/action.yml
index 2aab4b1be94..f33ab0aa3e3 100644
--- a/.github/workflows/actions/test-core-spec/action.yml
+++ b/.github/workflows/actions/test-core-spec/action.yml
@@ -6,7 +6,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+    - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
       with:
         node-version: 24.x
     - name: 🕸️ Install Dependencies
diff --git a/.github/workflows/actions/test-react-e2e/action.yml b/.github/workflows/actions/test-react-e2e/action.yml
index a1bcbf7a4db..af6100bdb07 100644
--- a/.github/workflows/actions/test-react-e2e/action.yml
+++ b/.github/workflows/actions/test-react-e2e/action.yml
@@ -6,7 +6,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+    - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
       with:
         node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
diff --git a/.github/workflows/actions/test-react-router-e2e/action.yml b/.github/workflows/actions/test-react-router-e2e/action.yml
index 034cfdce747..663ae0be575 100644
--- a/.github/workflows/actions/test-react-router-e2e/action.yml
+++ b/.github/workflows/actions/test-react-router-e2e/action.yml
@@ -6,7 +6,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+    - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
       with:
         node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
diff --git a/.github/workflows/actions/test-vue-e2e/action.yml b/.github/workflows/actions/test-vue-e2e/action.yml
index 191cd193c8a..5f7de702d08 100644
--- a/.github/workflows/actions/test-vue-e2e/action.yml
+++ b/.github/workflows/actions/test-vue-e2e/action.yml
@@ -6,7 +6,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+    - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
       with:
         node-version: 24.x
     - uses: ./.github/workflows/actions/download-archive
diff --git a/.github/workflows/actions/update-reference-screenshots/action.yml b/.github/workflows/actions/update-reference-screenshots/action.yml
index 6ee56689b10..844f4e6d2ac 100644
--- a/.github/workflows/actions/update-reference-screenshots/action.yml
+++ b/.github/workflows/actions/update-reference-screenshots/action.yml
@@ -7,10 +7,10 @@ on:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6.4.0
+    - uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0
       with:
         node-version: 24.x
-    - uses: actions/download-artifact@v8
+    - uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8.0.1
       with:
         path: ./artifacts
     - name: 🔎 Extract Archives
diff --git a/.github/workflows/actions/upload-archive/action.yml b/.github/workflows/actions/upload-archive/action.yml
index c09397345f9..3cfff8853fc 100644
--- a/.github/workflows/actions/upload-archive/action.yml
+++ b/.github/workflows/actions/upload-archive/action.yml
@@ -13,7 +13,7 @@ runs:
     - name: 🗄️ Create Archive
       run: zip -q -r ${{ inputs.output }} ${{ inputs.paths }}
       shell: bash
-    - uses: actions/upload-artifact@v7
+    - uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
       with:
         name: ${{ inputs.name }}
         path: ${{ inputs.output }}
diff --git a/.github/workflows/assign-issues.yml b/.github/workflows/assign-issues.yml
index d79a8c17c2c..fc254b78976 100644
--- a/.github/workflows/assign-issues.yml
+++ b/.github/workflows/assign-issues.yml
@@ -11,7 +11,7 @@ jobs:
       issues: write
     steps:
       - name: 'Auto-assign issue'
-        uses: pozil/auto-assign-issue@70adb98ca8b3941524e9ecde48e89067c4f96736 # v3.0.0
+        uses: pozil/auto-assign-issue@af6beea6bdf1e8eb373f061c5bc168681fc6d011 # v4.0.1
         with:
           assignees: brandyscarney, thetaPC, ShaneK
           numOfAssignee: 1
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 7772b2c432f..540d873c5db 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -22,7 +22,7 @@ jobs:
   build-core:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
       - uses: ./.github/workflows/actions/build-core
         with:
           ionicons-version: ${{ inputs.ionicons_npm_release_tag }}
@@ -31,21 +31,21 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
       - uses: ./.github/workflows/actions/test-core-clean-build
 
   test-core-lint:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
       - uses: ./.github/workflows/actions/test-core-lint
 
   test-core-spec:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
       - uses: ./.github/workflows/actions/test-core-spec
 
   test-core-screenshot:
@@ -62,7 +62,7 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
       - uses: ./.github/workflows/actions/test-core-screenshot
         with:
           shard: ${{ matrix.shard }}
@@ -90,14 +90,14 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - uses: ./.github/workflows/actions/build-vue
 
   build-vue-router:
     needs: [build-vue]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - uses: ./.github/workflows/actions/build-vue-router
 
   test-vue-e2e:
@@ -108,7 +108,7 @@ jobs:
     needs: [build-vue, build-vue-router]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - uses: ./.github/workflows/actions/test-vue-e2e
       with:
         app: ${{ matrix.apps }}
@@ -126,14 +126,14 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - uses: ./.github/workflows/actions/build-angular
 
   build-angular-server:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - uses: ./.github/workflows/actions/build-angular-server
 
   test-angular-e2e:
@@ -144,7 +144,7 @@ jobs:
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - uses: ./.github/workflows/actions/test-angular-e2e
       with:
         app: ${{ matrix.apps }}
@@ -162,14 +162,14 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - uses: ./.github/workflows/actions/build-react
 
   build-react-router:
     needs: [build-react]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - uses: ./.github/workflows/actions/build-react-router
 
   test-react-router-e2e:
@@ -180,7 +180,7 @@ jobs:
     needs: [build-react, build-react-router]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - uses: ./.github/workflows/actions/test-react-router-e2e
       with:
         app: ${{ matrix.apps }}
@@ -202,7 +202,7 @@ jobs:
     needs: [build-react, build-react-router]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - uses: ./.github/workflows/actions/test-react-e2e
       with:
         app: ${{ matrix.apps }}
diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
index 5e6715d02b1..f17a5f9a264 100644
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@@ -14,8 +14,8 @@ jobs:
     permissions:
       security-events: write
     steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
-      - uses: github/codeql-action/init@v4
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: github/codeql-action/init@ff2f1c621b7f889edc0d3c761ac2e6a3f8cdb0dd # v4.37.7
         with:
           languages: javascript
-      - uses: github/codeql-action/analyze@v4
+      - uses: github/codeql-action/analyze@ff2f1c621b7f889edc0d3c761ac2e6a3f8cdb0dd # v4.37.7
diff --git a/.github/workflows/conventional-commit.yml b/.github/workflows/conventional-commit.yml
index 8c0bbdebb37..65c026de5eb 100644
--- a/.github/workflows/conventional-commit.yml
+++ b/.github/workflows/conventional-commit.yml
@@ -12,7 +12,7 @@ jobs:
         if: |
           !contains(github.event.pull_request.title, 'release') &&
           !contains(github.event.pull_request.title, 'chore')
-        uses: amannn/action-semantic-pull-request@v6
+        uses: amannn/action-semantic-pull-request@48f256284bd46cdaab1048c3721360e808335d50 # v6.1.1
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
diff --git a/.github/workflows/dev-build.yml b/.github/workflows/dev-build.yml
index 51806128a8e..29b499e1855 100644
--- a/.github/workflows/dev-build.yml
+++ b/.github/workflows/dev-build.yml
@@ -13,7 +13,7 @@ jobs:
     outputs:
       dev-hash: ${{ steps.create-dev-hash.outputs.DEV_HASH }}
     steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
       # A 1 is required before the timestamp
       # as lerna will fail when there is a leading 0
       # See https://github.com/lerna/lerna/issues/2840
diff --git a/.github/workflows/label.yml b/.github/workflows/label.yml
index 7f5d8de9787..49606e47e90 100644
--- a/.github/workflows/label.yml
+++ b/.github/workflows/label.yml
@@ -13,7 +13,7 @@ jobs:
   triage:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/labeler@v6
+    - uses: actions/labeler@bf12e9b00b37c5c0ca2b87b79b2daf7891dbda13 # v7.0.0
       with:
         repo-token: "${{ secrets.GITHUB_TOKEN }}"
         sync-labels: true
diff --git a/.github/workflows/nightly.yml b/.github/workflows/nightly.yml
index 2f64d9f9bd5..3f81651868f 100644
--- a/.github/workflows/nightly.yml
+++ b/.github/workflows/nightly.yml
@@ -13,7 +13,7 @@ jobs:
     outputs:
       nightly-hash: ${{ steps.create-nightly-hash.outputs.NIGHTLY_HASH }}
     steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
       # A 1 is required before the timestamp
       # as lerna will fail when there is a leading 0
       # See https://github.com/lerna/lerna/issues/2840
diff --git a/.github/workflows/release-ionic.yml b/.github/workflows/release-ionic.yml
index 70f1fb1956b..9671a057c28 100644
--- a/.github/workflows/release-ionic.yml
+++ b/.github/workflows/release-ionic.yml
@@ -23,7 +23,7 @@ jobs:
   release-core:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - uses: ./.github/actions/publish-npm
       with:
         scope: '@ionic/core'
@@ -48,7 +48,7 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - name: Restore @ionic/docs built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -67,7 +67,7 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -93,7 +93,7 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -118,7 +118,7 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -143,7 +143,7 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -163,7 +163,7 @@ jobs:
     needs: [release-react]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -188,7 +188,7 @@ jobs:
     needs: [release-vue]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index df4429a806b..b4228d33841 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -58,7 +58,7 @@ jobs:
       contents: write
       id-token: write
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
       with:
         token: ${{ secrets.IONITRON_TOKEN }}
         fetch-depth: 0
@@ -89,7 +89,7 @@ jobs:
       contents: write
       id-token: write
     steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         # Pull the latest version of the reference
         # branch instead of the revision that triggered
         # the workflow otherwise we won't get the commit
diff --git a/.github/workflows/stencil-nightly.yml b/.github/workflows/stencil-nightly.yml
index 3e8d714ccc1..a9be239edfa 100644
--- a/.github/workflows/stencil-nightly.yml
+++ b/.github/workflows/stencil-nightly.yml
@@ -26,7 +26,7 @@ jobs:
   build-core-with-stencil-nightly:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
       - uses: ./.github/workflows/actions/build-core-stencil-prerelease
         with:
           stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
@@ -35,21 +35,21 @@ jobs:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
       - uses: ./.github/workflows/actions/test-core-clean-build
 
   test-core-lint:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
       - uses: ./.github/workflows/actions/test-core-lint
 
   test-core-spec:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
       - uses: ./.github/workflows/actions/test-core-spec
         with:
           stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
@@ -72,7 +72,7 @@ jobs:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
       - uses: ./.github/workflows/actions/test-core-screenshot
         with:
           shard: ${{ matrix.shard }}
@@ -100,14 +100,14 @@ jobs:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - uses: ./.github/workflows/actions/build-vue
 
   build-vue-router:
     needs: [build-vue]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - uses: ./.github/workflows/actions/build-vue-router
 
   test-vue-e2e:
@@ -118,7 +118,7 @@ jobs:
     needs: [build-vue, build-vue-router]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - uses: ./.github/workflows/actions/test-vue-e2e
       with:
         app: ${{ matrix.apps }}
@@ -136,14 +136,14 @@ jobs:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - uses: ./.github/workflows/actions/build-angular
 
   build-angular-server:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - uses: ./.github/workflows/actions/build-angular-server
 
   test-angular-e2e:
@@ -154,7 +154,7 @@ jobs:
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - uses: ./.github/workflows/actions/test-angular-e2e
       with:
         app: ${{ matrix.apps }}
@@ -172,14 +172,14 @@ jobs:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - uses: ./.github/workflows/actions/build-react
 
   build-react-router:
     needs: [build-react]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - uses: ./.github/workflows/actions/build-react-router
 
   test-react-router-e2e:
@@ -190,7 +190,7 @@ jobs:
     needs: [build-react, build-react-router]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - uses: ./.github/workflows/actions/test-react-router-e2e
       with:
         app: ${{ matrix.apps }}
@@ -212,7 +212,7 @@ jobs:
     needs: [build-react, build-react-router]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+    - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
     - uses: ./.github/workflows/actions/test-react-e2e
       with:
         app: ${{ matrix.apps }}
diff --git a/.github/workflows/update-screenshots.yml b/.github/workflows/update-screenshots.yml
index 6efecbd8f95..acfe30ef553 100644
--- a/.github/workflows/update-screenshots.yml
+++ b/.github/workflows/update-screenshots.yml
@@ -26,7 +26,7 @@ jobs:
   build-core:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
       - uses: ./.github/workflows/actions/build-core
 
   test-core-screenshot:
@@ -47,7 +47,7 @@ jobs:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
       - uses: ./.github/workflows/actions/test-core-screenshot
         with:
           shard: ${{ matrix.shard }}
@@ -59,7 +59,7 @@ jobs:
     runs-on: ubuntu-latest
     needs: [test-core-screenshot]
     steps:
-      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         # Normally, we could just push with the
         # default GITHUB_TOKEN, but that will
         # not cause the build workflow
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8ef8dae114d..fcd32072979 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,144 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.18](https://github.com/ionic-team/ionic-framework/compare/v8.8.17...v8.8.18) (2026-08-12)
+
+
+### Bug Fixes
+
+* **core:** resolve lazy component chunks under Vite 8 ([#31341](https://github.com/ionic-team/ionic-framework/issues/31341)) ([a73e183](https://github.com/ionic-team/ionic-framework/commit/a73e1831d389e6dc968f646c0322b3984c1d3224)), closes [#31333](https://github.com/ionic-team/ionic-framework/issues/31333)
+* **core:** update offsets when safe-area insets arrive late ([#31343](https://github.com/ionic-team/ionic-framework/issues/31343)) ([bc4fce2](https://github.com/ionic-team/ionic-framework/commit/bc4fce218d6c3aaac69f11d416b9fc8c8dacdfa4)), closes [#31337](https://github.com/ionic-team/ionic-framework/issues/31337)
+* **datetime:** tear down ready state when an overlay dismisses ([#31335](https://github.com/ionic-team/ionic-framework/issues/31335)) ([d59e341](https://github.com/ionic-team/ionic-framework/commit/d59e3415df06cb26a7dea688f6720ba228b775d5)), closes [#31155](https://github.com/ionic-team/ionic-framework/issues/31155) [#31143](https://github.com/ionic-team/ionic-framework/issues/31143)
+* **modal:** allow pull-to-refresh with a custom scroll host ([#31339](https://github.com/ionic-team/ionic-framework/issues/31339)) ([d6202a8](https://github.com/ionic-team/ionic-framework/commit/d6202a8933ad77735fceca05cb4b0fe6b33bfb55)), closes [#31332](https://github.com/ionic-team/ionic-framework/issues/31332)
+
+
+
+
+
+## [8.8.17](https://github.com/ionic-team/ionic-framework/compare/v8.8.16...v8.8.17) (2026-08-05)
+
+
+### Bug Fixes
+
+* **checkbox,radio,toggle:** add missing keyboard focus indicators ([#31295](https://github.com/ionic-team/ionic-framework/issues/31295)) ([2f9c0b7](https://github.com/ionic-team/ionic-framework/commit/2f9c0b7d8fa6371785cfdf1d99857eece4835e4d))
+* **fab-button:** restore submit, reset, and disabled form functionality ([#31249](https://github.com/ionic-team/ionic-framework/issues/31249)) ([93ee380](https://github.com/ionic-team/ionic-framework/commit/93ee38015125619509b9aa844d6f0025be0a71b7)), closes [#18550](https://github.com/ionic-team/ionic-framework/issues/18550)
+* **react-router:** symmetric pathname+search url comparison ([#31153](https://github.com/ionic-team/ionic-framework/issues/31153)) ([ffef25d](https://github.com/ionic-team/ionic-framework/commit/ffef25d2e2597bee5fdb8833d9e50ff9234d74e0)), closes [#31152](https://github.com/ionic-team/ionic-framework/issues/31152) [#31152](https://github.com/ionic-team/ionic-framework/issues/31152) [#25534](https://github.com/ionic-team/ionic-framework/issues/25534)
+* **refresher:** avoid gesture setup after disconnect ([#31316](https://github.com/ionic-team/ionic-framework/issues/31316)) ([d9b877f](https://github.com/ionic-team/ionic-framework/commit/d9b877f6059992808cccec503dbe2a30f6ccdb48)), closes [#31315](https://github.com/ionic-team/ionic-framework/issues/31315)
+* **tab:** retry lazy load after a failed attach ([#31324](https://github.com/ionic-team/ionic-framework/issues/31324)) ([81b52e2](https://github.com/ionic-team/ionic-framework/commit/81b52e25bd8fa55b905da2791d84b381a2db630b))
+
+
+
+
+
+## [8.8.16](https://github.com/ionic-team/ionic-framework/compare/v8.8.15...v8.8.16) (2026-07-29)
+
+
+### Bug Fixes
+
+* **angular:** guard transition against destroyed router outlet ([#31297](https://github.com/ionic-team/ionic-framework/issues/31297)) ([fdef61c](https://github.com/ionic-team/ionic-framework/commit/fdef61cc74285caff0549ba8bdac70cedaaba865)), closes [#31296](https://github.com/ionic-team/ionic-framework/issues/31296)
+* **modal:** keep focus on dialog for cycle sheet modals ([#31293](https://github.com/ionic-team/ionic-framework/issues/31293)) ([b4b2603](https://github.com/ionic-team/ionic-framework/commit/b4b2603210b313fc2f2ee2c88b9112751e24b338))
+* **select:** prevent floating label and placeholder from overlapping when focused ([#31276](https://github.com/ionic-team/ionic-framework/issues/31276)) ([e987009](https://github.com/ionic-team/ionic-framework/commit/e9870091c2f7460a1dc12c4b407ddfde39e1b156)), closes [#30401](https://github.com/ionic-team/ionic-framework/issues/30401)
+
+
+
+
+
+## [8.8.15](https://github.com/ionic-team/ionic-framework/compare/v8.8.14...v8.8.15) (2026-07-22)
+
+
+### Bug Fixes
+
+* **angular-server:** fallback to scoped+annotations when SSR DOM lacks attachShadow ([#30967](https://github.com/ionic-team/ionic-framework/issues/30967)) ([ae6911f](https://github.com/ionic-team/ionic-framework/commit/ae6911f6c8d46467ae54114295688bbba5ccbf5e)), closes [#29751](https://github.com/ionic-team/ionic-framework/issues/29751)
+* **modal:** focus the dialog wrapper on present so screen readers can enter the modal ([#31260](https://github.com/ionic-team/ionic-framework/issues/31260)) ([6251eb8](https://github.com/ionic-team/ionic-framework/commit/6251eb85db0e5b43b9e09604248dc8451e1664c0))
+
+
+
+
+
+## [8.8.14](https://github.com/ionic-team/ionic-framework/compare/v8.8.13...v8.8.14) (2026-07-15)
+
+
+### Bug Fixes
+
+* **tab-bar:** fire tab change events on tab click ([#31262](https://github.com/ionic-team/ionic-framework/issues/31262)) ([44461dd](https://github.com/ionic-team/ionic-framework/commit/44461ddda5ef44030f477931dd94cce4674801a6)), closes [#30145](https://github.com/ionic-team/ionic-framework/issues/30145)
+
+
+
+
+
+## [8.8.13](https://github.com/ionic-team/ionic-framework/compare/v8.8.12...v8.8.13) (2026-07-01)
+
+
+### Bug Fixes
+
+* **button:** sync disabled state and type in renderHiddenButton ([#31225](https://github.com/ionic-team/ionic-framework/issues/31225)) ([0c76135](https://github.com/ionic-team/ionic-framework/commit/0c76135f8c373dfad66a65717092ffd4d52461c5)), closes [#30968](https://github.com/ionic-team/ionic-framework/issues/30968)
+* **datetime-button:** respect datetime constraints in initial text ([#31218](https://github.com/ionic-team/ionic-framework/issues/31218)) ([044f358](https://github.com/ionic-team/ionic-framework/commit/044f3589f184b51f093419556a38d1a0ff2413d6)), closes [#30183](https://github.com/ionic-team/ionic-framework/issues/30183)
+* **datetime:** don't setActiveParts from month/year wheels when multiple=true ([#31248](https://github.com/ionic-team/ionic-framework/issues/31248)) ([bf46a3d](https://github.com/ionic-team/ionic-framework/commit/bf46a3d7405e77c28659dbfc0a094023a9e8bd87)), closes [#29673](https://github.com/ionic-team/ionic-framework/issues/29673)
+* **datetime:** respect config animated setting when paging month calendar ([#31227](https://github.com/ionic-team/ionic-framework/issues/31227)) ([a35f8a9](https://github.com/ionic-team/ionic-framework/commit/a35f8a98e31f5895e36c845484207f3ed4c74689)), closes [#30484](https://github.com/ionic-team/ionic-framework/issues/30484)
+
+
+
+
+
+## [8.8.12](https://github.com/ionic-team/ionic-framework/compare/v8.8.11...v8.8.12) (2026-06-24)
+
+
+### Bug Fixes
+
+* **angular:** honor modifier-click on routerLink ([#31230](https://github.com/ionic-team/ionic-framework/issues/31230)) ([2ac9851](https://github.com/ionic-team/ionic-framework/commit/2ac98512c78f6d47e3a6a17ff0159047ba14a5cd)), closes [#26394](https://github.com/ionic-team/ionic-framework/issues/26394)
+* **angular:** run change detection on attached overlay views ([#31235](https://github.com/ionic-team/ionic-framework/issues/31235)) ([8e76fd0](https://github.com/ionic-team/ionic-framework/commit/8e76fd0cceeb878ad4b071515acb593892512111)), closes [#31220](https://github.com/ionic-team/ionic-framework/issues/31220)
+
+
+
+
+
+## [8.8.11](https://github.com/ionic-team/ionic-framework/compare/v8.8.10...v8.8.11) (2026-06-17)
+
+
+### Bug Fixes
+
+* **react:** remove relocated inline overlays orphaned on unmount ([#31223](https://github.com/ionic-team/ionic-framework/issues/31223)) ([d28d25b](https://github.com/ionic-team/ionic-framework/commit/d28d25b798d32db6148155bb34fdbd13243286d9))
+* **searchbar:** fix search icon sometimes being offset incorrectly ([#31212](https://github.com/ionic-team/ionic-framework/issues/31212)) ([3394c30](https://github.com/ionic-team/ionic-framework/commit/3394c305b5141326cc045132507dff62dd0e4dd6)), closes [#30434](https://github.com/ionic-team/ionic-framework/issues/30434)
+
+
+
+
+
+## [8.8.10](https://github.com/ionic-team/ionic-framework/compare/v8.8.9...v8.8.10) (2026-06-10)
+
+
+### Bug Fixes
+
+* **modal:** prevent sheet gesture crash with late-bound breakpoints ([#31202](https://github.com/ionic-team/ionic-framework/issues/31202)) ([c61265a](https://github.com/ionic-team/ionic-framework/commit/c61265adb5891b24d4d413245244ee8dcf61757e))
+
+
+
+
+
+## [8.8.9](https://github.com/ionic-team/ionic-framework/compare/v8.8.8...v8.8.9) (2026-06-03)
+
+
+### Bug Fixes
+
+* **router:** support anchor fragments in href ([#31172](https://github.com/ionic-team/ionic-framework/issues/31172)) ([a982516](https://github.com/ionic-team/ionic-framework/commit/a982516afad1e848534db702694ef47f5e49c78d)), closes [#19566](https://github.com/ionic-team/ionic-framework/issues/19566) [#19365](https://github.com/ionic-team/ionic-framework/issues/19365)
+
+
+
+
+
+## [8.8.8](https://github.com/ionic-team/ionic-framework/compare/v8.8.7...v8.8.8) (2026-05-20)
+
+
+### Bug Fixes
+
+* **react:** bind events properly for overlays rendered within a nav ([#31159](https://github.com/ionic-team/ionic-framework/issues/31159)) ([fa4593d](https://github.com/ionic-team/ionic-framework/commit/fa4593d8a4d61a583dbf6fa551cd846fe258624f)), closes [#27843](https://github.com/ionic-team/ionic-framework/issues/27843)
+* **tabs:** preserve query params and fragment from tab button href ([#31154](https://github.com/ionic-team/ionic-framework/issues/31154)) ([0182bba](https://github.com/ionic-team/ionic-framework/commit/0182bba06d6171dd2faf80556fd2131abf03fa93)), closes [#25470](https://github.com/ionic-team/ionic-framework/issues/25470)
+* **vue-router:** prevent out-of-bounds index when popping across tabs ([#31148](https://github.com/ionic-team/ionic-framework/issues/31148)) ([c88c0de](https://github.com/ionic-team/ionic-framework/commit/c88c0de3ade92469fa1f37e1b8220911adf113e0)), closes [#29413](https://github.com/ionic-team/ionic-framework/issues/29413)
+
+
+
+
+
 ## [8.8.7](https://github.com/ionic-team/ionic-framework/compare/v8.8.6...v8.8.7) (2026-05-13)
 
 
diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md
index 3b3bfa8d395..84ed9ee1068 100644
--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,128 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.18](https://github.com/ionic-team/ionic-framework/compare/v8.8.17...v8.8.18) (2026-08-12)
+
+
+### Bug Fixes
+
+* **core:** resolve lazy component chunks under Vite 8 ([#31341](https://github.com/ionic-team/ionic-framework/issues/31341)) ([a73e183](https://github.com/ionic-team/ionic-framework/commit/a73e1831d389e6dc968f646c0322b3984c1d3224)), closes [#31333](https://github.com/ionic-team/ionic-framework/issues/31333)
+* **core:** update offsets when safe-area insets arrive late ([#31343](https://github.com/ionic-team/ionic-framework/issues/31343)) ([bc4fce2](https://github.com/ionic-team/ionic-framework/commit/bc4fce218d6c3aaac69f11d416b9fc8c8dacdfa4)), closes [#31337](https://github.com/ionic-team/ionic-framework/issues/31337)
+* **datetime:** tear down ready state when an overlay dismisses ([#31335](https://github.com/ionic-team/ionic-framework/issues/31335)) ([d59e341](https://github.com/ionic-team/ionic-framework/commit/d59e3415df06cb26a7dea688f6720ba228b775d5)), closes [#31155](https://github.com/ionic-team/ionic-framework/issues/31155) [#31143](https://github.com/ionic-team/ionic-framework/issues/31143)
+* **modal:** allow pull-to-refresh with a custom scroll host ([#31339](https://github.com/ionic-team/ionic-framework/issues/31339)) ([d6202a8](https://github.com/ionic-team/ionic-framework/commit/d6202a8933ad77735fceca05cb4b0fe6b33bfb55)), closes [#31332](https://github.com/ionic-team/ionic-framework/issues/31332)
+
+
+
+
+
+## [8.8.17](https://github.com/ionic-team/ionic-framework/compare/v8.8.16...v8.8.17) (2026-08-05)
+
+
+### Bug Fixes
+
+* **checkbox,radio,toggle:** add missing keyboard focus indicators ([#31295](https://github.com/ionic-team/ionic-framework/issues/31295)) ([2f9c0b7](https://github.com/ionic-team/ionic-framework/commit/2f9c0b7d8fa6371785cfdf1d99857eece4835e4d))
+* **fab-button:** restore submit, reset, and disabled form functionality ([#31249](https://github.com/ionic-team/ionic-framework/issues/31249)) ([93ee380](https://github.com/ionic-team/ionic-framework/commit/93ee38015125619509b9aa844d6f0025be0a71b7)), closes [#18550](https://github.com/ionic-team/ionic-framework/issues/18550)
+* **refresher:** avoid gesture setup after disconnect ([#31316](https://github.com/ionic-team/ionic-framework/issues/31316)) ([d9b877f](https://github.com/ionic-team/ionic-framework/commit/d9b877f6059992808cccec503dbe2a30f6ccdb48)), closes [#31315](https://github.com/ionic-team/ionic-framework/issues/31315)
+* **tab:** retry lazy load after a failed attach ([#31324](https://github.com/ionic-team/ionic-framework/issues/31324)) ([81b52e2](https://github.com/ionic-team/ionic-framework/commit/81b52e25bd8fa55b905da2791d84b381a2db630b))
+
+
+
+
+
+## [8.8.16](https://github.com/ionic-team/ionic-framework/compare/v8.8.15...v8.8.16) (2026-07-29)
+
+
+### Bug Fixes
+
+* **modal:** keep focus on dialog for cycle sheet modals ([#31293](https://github.com/ionic-team/ionic-framework/issues/31293)) ([b4b2603](https://github.com/ionic-team/ionic-framework/commit/b4b2603210b313fc2f2ee2c88b9112751e24b338))
+* **select:** prevent floating label and placeholder from overlapping when focused ([#31276](https://github.com/ionic-team/ionic-framework/issues/31276)) ([e987009](https://github.com/ionic-team/ionic-framework/commit/e9870091c2f7460a1dc12c4b407ddfde39e1b156)), closes [#30401](https://github.com/ionic-team/ionic-framework/issues/30401)
+
+
+
+
+
+## [8.8.15](https://github.com/ionic-team/ionic-framework/compare/v8.8.14...v8.8.15) (2026-07-22)
+
+
+### Bug Fixes
+
+* **modal:** focus the dialog wrapper on present so screen readers can enter the modal ([#31260](https://github.com/ionic-team/ionic-framework/issues/31260)) ([6251eb8](https://github.com/ionic-team/ionic-framework/commit/6251eb85db0e5b43b9e09604248dc8451e1664c0))
+
+
+
+
+
+## [8.8.14](https://github.com/ionic-team/ionic-framework/compare/v8.8.13...v8.8.14) (2026-07-15)
+
+**Note:** Version bump only for package @ionic/core
+
+
+
+
+
+## [8.8.13](https://github.com/ionic-team/ionic-framework/compare/v8.8.12...v8.8.13) (2026-07-01)
+
+
+### Bug Fixes
+
+* **button:** sync disabled state and type in renderHiddenButton ([#31225](https://github.com/ionic-team/ionic-framework/issues/31225)) ([0c76135](https://github.com/ionic-team/ionic-framework/commit/0c76135f8c373dfad66a65717092ffd4d52461c5)), closes [#30968](https://github.com/ionic-team/ionic-framework/issues/30968)
+* **datetime-button:** respect datetime constraints in initial text ([#31218](https://github.com/ionic-team/ionic-framework/issues/31218)) ([044f358](https://github.com/ionic-team/ionic-framework/commit/044f3589f184b51f093419556a38d1a0ff2413d6)), closes [#30183](https://github.com/ionic-team/ionic-framework/issues/30183)
+* **datetime:** don't setActiveParts from month/year wheels when multiple=true ([#31248](https://github.com/ionic-team/ionic-framework/issues/31248)) ([bf46a3d](https://github.com/ionic-team/ionic-framework/commit/bf46a3d7405e77c28659dbfc0a094023a9e8bd87)), closes [#29673](https://github.com/ionic-team/ionic-framework/issues/29673)
+* **datetime:** respect config animated setting when paging month calendar ([#31227](https://github.com/ionic-team/ionic-framework/issues/31227)) ([a35f8a9](https://github.com/ionic-team/ionic-framework/commit/a35f8a98e31f5895e36c845484207f3ed4c74689)), closes [#30484](https://github.com/ionic-team/ionic-framework/issues/30484)
+
+
+
+
+
+## [8.8.12](https://github.com/ionic-team/ionic-framework/compare/v8.8.11...v8.8.12) (2026-06-24)
+
+**Note:** Version bump only for package @ionic/core
+
+
+
+
+
+## [8.8.11](https://github.com/ionic-team/ionic-framework/compare/v8.8.10...v8.8.11) (2026-06-17)
+
+
+### Bug Fixes
+
+* **searchbar:** fix search icon sometimes being offset incorrectly ([#31212](https://github.com/ionic-team/ionic-framework/issues/31212)) ([3394c30](https://github.com/ionic-team/ionic-framework/commit/3394c305b5141326cc045132507dff62dd0e4dd6)), closes [#30434](https://github.com/ionic-team/ionic-framework/issues/30434)
+
+
+
+
+
+## [8.8.10](https://github.com/ionic-team/ionic-framework/compare/v8.8.9...v8.8.10) (2026-06-10)
+
+
+### Bug Fixes
+
+* **modal:** prevent sheet gesture crash with late-bound breakpoints ([#31202](https://github.com/ionic-team/ionic-framework/issues/31202)) ([c61265a](https://github.com/ionic-team/ionic-framework/commit/c61265adb5891b24d4d413245244ee8dcf61757e))
+
+
+
+
+
+## [8.8.9](https://github.com/ionic-team/ionic-framework/compare/v8.8.8...v8.8.9) (2026-06-03)
+
+
+### Bug Fixes
+
+* **router:** support anchor fragments in href ([#31172](https://github.com/ionic-team/ionic-framework/issues/31172)) ([a982516](https://github.com/ionic-team/ionic-framework/commit/a982516afad1e848534db702694ef47f5e49c78d)), closes [#19566](https://github.com/ionic-team/ionic-framework/issues/19566) [#19365](https://github.com/ionic-team/ionic-framework/issues/19365)
+
+
+
+
+
+## [8.8.8](https://github.com/ionic-team/ionic-framework/compare/v8.8.7...v8.8.8) (2026-05-20)
+
+**Note:** Version bump only for package @ionic/core
+
+
+
+
+
 ## [8.8.7](https://github.com/ionic-team/ionic-framework/compare/v8.8.6...v8.8.7) (2026-05-13)
 
 
diff --git a/core/Dockerfile b/core/Dockerfile
index b5a20843d1b..3865b2e3c21 100644
--- a/core/Dockerfile
+++ b/core/Dockerfile
@@ -1,5 +1,5 @@
 # Get Playwright
-FROM mcr.microsoft.com/playwright:v1.59.1
+FROM mcr.microsoft.com/playwright:v1.62.1
 
 # Set the working directory
 WORKDIR /ionic
diff --git a/core/api.txt b/core/api.txt
index d9e586ffd33..3087e65b8be 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -601,6 +601,7 @@ ion-fab-button,prop,closeIcon,string,close,false,false
 ion-fab-button,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-fab-button,prop,disabled,boolean,false,false,false
 ion-fab-button,prop,download,string | undefined,undefined,false,false
+ion-fab-button,prop,form,HTMLFormElement | string | undefined,undefined,false,false
 ion-fab-button,prop,href,string | undefined,undefined,false,false
 ion-fab-button,prop,mode,"ios" | "md",undefined,false,false
 ion-fab-button,prop,rel,string | undefined,undefined,false,false
@@ -1833,7 +1834,7 @@ ion-spinner,css-prop,--color
 ion-split-pane,shadow
 ion-split-pane,prop,contentId,string | undefined,undefined,false,true
 ion-split-pane,prop,disabled,boolean,false,false,false
-ion-split-pane,prop,when,boolean | string,QUERY['lg'],false,false
+ion-split-pane,prop,when,boolean | string,'(min-width: 992px)',false,false
 ion-split-pane,event,ionSplitPaneVisible,{ visible: boolean; },true
 ion-split-pane,css-prop,--border,ios
 ion-split-pane,css-prop,--border,md
diff --git a/core/package-lock.json b/core/package-lock.json
index df01b3af51b..3e47702a493 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,27 +1,27 @@
 {
   "name": "@ionic/core",
-  "version": "8.8.7",
+  "version": "8.8.18",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "8.8.7",
+      "version": "8.8.18",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "4.43.0",
+        "@stencil/core": "4.43.5",
         "ionicons": "^8.0.13",
         "tslib": "^2.1.0"
       },
       "devDependencies": {
-        "@axe-core/playwright": "^4.11.3",
+        "@axe-core/playwright": "^4.12.1",
         "@capacitor/core": "^8.0.0",
         "@capacitor/haptics": "^8.0.0",
         "@capacitor/keyboard": "^8.0.0",
         "@capacitor/status-bar": "^8.0.0",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
-        "@playwright/test": "^1.59.1",
+        "@playwright/test": "^1.62.1",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
         "@stencil/angular-output-target": "^0.10.0",
@@ -32,7 +32,7 @@
         "@types/node": "^16.18.126",
         "@typescript-eslint/eslint-plugin": "^6.7.2",
         "@typescript-eslint/parser": "^6.7.2",
-        "chalk": "^5.3.0",
+        "chalk": "^6.0.0",
         "clean-css-cli": "^5.6.1",
         "domino": "^2.1.6",
         "eslint": "^7.32.0",
@@ -42,7 +42,7 @@
         "fs-extra": "^9.0.1",
         "jest": "^29.7.0",
         "jest-cli": "^29.7.0",
-        "playwright-core": "^1.59.1",
+        "playwright-core": "^1.62.1",
         "prettier": "^2.6.1",
         "rollup": "^2.26.4",
         "sass": "^1.33.0",
@@ -60,13 +60,13 @@
       "dev": true
     },
     "node_modules/@axe-core/playwright": {
-      "version": "4.11.3",
-      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.11.3.tgz",
-      "integrity": "sha512-h/kfksv4F0cVIDlKpT4700OehdRgpvuVskuQ2nb7/JmtWUXpe9ftHAPtwyXGvVSsa6SJ64A9ER7Zrzc/sIvC4w==",
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/@axe-core/playwright/-/playwright-4.12.1.tgz",
+      "integrity": "sha512-rMd7xriptqKpP+w5265i4Hdkv2X5kbu6uiBi/B2I7uf3hieRBM3qDCfaKPtxfiYb2mKXfF+yLODJwIx+Jv1GDw==",
       "dev": true,
       "license": "MPL-2.0",
       "dependencies": {
-        "axe-core": "~4.11.4"
+        "axe-core": "~4.12.1"
       },
       "peerDependencies": {
         "playwright-core": ">= 1.0.0"
@@ -629,9 +629,9 @@
       "license": "MIT"
     },
     "node_modules/@capacitor/core": {
-      "version": "8.3.4",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-8.3.4.tgz",
-      "integrity": "sha512-CqRQCkb6HXxcx/N7s+hHTN6ef2CmamFiRMITwm4qB840ph56mS42bzUgn6tKCP+RZjdDweiRHj9ytDDeN6jFag==",
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-8.5.0.tgz",
+      "integrity": "sha512-Ca4krtqH1hothjtBIwf2J2TW7IhYq1ujp8QeItTiJohNsqij8ja2DYYH3DU0l8RmxCWaBAFTGA2TgOgOMCSNsQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -649,9 +649,9 @@
       }
     },
     "node_modules/@capacitor/keyboard": {
-      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-8.0.3.tgz",
-      "integrity": "sha512-27Bv5/2w1Ss2njguBgTS98O0Bb8DRJhAARyzXYib0JlT/n6BrJw/EZ0CokM4C8GFUjFDjJnEKF1Ie01buTMEXQ==",
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-8.0.5.tgz",
+      "integrity": "sha512-oFXygC4eKYA5l2MdpTR06L2M/4x6e2SLD5yS1T9+UBDKTkzyvhWKEhbYLUaTIBPpLKqlfGudJw1X73S1H9eUzQ==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
@@ -659,9 +659,9 @@
       }
     },
     "node_modules/@capacitor/status-bar": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-8.0.2.tgz",
-      "integrity": "sha512-WXs8YB8B9eEaPZz+bcdY6t2nForF1FLoj/JU0Dl9RRgQnddnS98FEEyDooQhaY7wivr000j4+SC1FyeJkrFO7A==",
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/@capacitor/status-bar/-/status-bar-8.0.3.tgz",
+      "integrity": "sha512-csSpfNeN49Hx9JaQBSJEIiEbOLtXg3kcc2IpScq2fu5L520h3AWEvsxoH8Srk1jxfRKepaJ4S4sqSC3foI4AgA==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
@@ -1598,19 +1598,19 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.59.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.59.1.tgz",
-      "integrity": "sha512-PG6q63nQg5c9rIi4/Z5lR5IVF7yU5MqmKaPOe0HSc0O2cX1fPi96sUQu5j7eo4gKCkB2AnNGoWt7y4/Xx3Kcqg==",
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.62.1.tgz",
+      "integrity": "sha512-DTcUc8qii+cpHvtOwggMtBRMjKZHXYWdw8syRYu2vtzuq4Wxphqq4NfCs5Zt44L6mA8rfDfj+PHnxFc/FeK6mQ==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright": "1.59.1"
+        "playwright": "1.62.1"
       },
       "bin": {
         "playwright": "cli.js"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">=20"
       }
     },
     "node_modules/@rollup/plugin-node-resolve": {
@@ -1658,7 +1658,9 @@
       }
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.34.9",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.44.0.tgz",
+      "integrity": "sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA==",
       "cpu": [
         "arm64"
       ],
@@ -1669,9 +1671,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz",
-      "integrity": "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.44.0.tgz",
+      "integrity": "sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ==",
       "cpu": [
         "x64"
       ],
@@ -1682,9 +1684,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz",
-      "integrity": "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.44.0.tgz",
+      "integrity": "sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ==",
       "cpu": [
         "arm64"
       ],
@@ -1695,9 +1697,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz",
-      "integrity": "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.44.0.tgz",
+      "integrity": "sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q==",
       "cpu": [
         "arm64"
       ],
@@ -1708,9 +1710,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz",
-      "integrity": "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.44.0.tgz",
+      "integrity": "sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw==",
       "cpu": [
         "x64"
       ],
@@ -1721,9 +1723,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz",
-      "integrity": "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.44.0.tgz",
+      "integrity": "sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA==",
       "cpu": [
         "x64"
       ],
@@ -1734,9 +1736,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz",
-      "integrity": "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.44.0.tgz",
+      "integrity": "sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w==",
       "cpu": [
         "arm64"
       ],
@@ -1747,9 +1749,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz",
-      "integrity": "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.44.0.tgz",
+      "integrity": "sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ==",
       "cpu": [
         "x64"
       ],
@@ -1789,9 +1791,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.43.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz",
-      "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==",
+      "version": "4.43.5",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.5.tgz",
+      "integrity": "sha512-cgWD+GeuvJpTe1WQn40p02+BJ2j0j1YJ17GdkF2qKIQ23s2e3Zivq5yISXS3dcuV6oUJFN93jprdk+nk/sq99Q==",
       "license": "MIT",
       "bin": {
         "stencil": "bin/stencil"
@@ -1801,14 +1803,14 @@
         "npm": ">=7.10.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-darwin-arm64": "4.34.9",
-        "@rollup/rollup-darwin-x64": "4.34.9",
-        "@rollup/rollup-linux-arm64-gnu": "4.34.9",
-        "@rollup/rollup-linux-arm64-musl": "4.34.9",
-        "@rollup/rollup-linux-x64-gnu": "4.34.9",
-        "@rollup/rollup-linux-x64-musl": "4.34.9",
-        "@rollup/rollup-win32-arm64-msvc": "4.34.9",
-        "@rollup/rollup-win32-x64-msvc": "4.34.9"
+        "@rollup/rollup-darwin-arm64": "4.44.0",
+        "@rollup/rollup-darwin-x64": "4.44.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.44.0",
+        "@rollup/rollup-linux-arm64-musl": "4.44.0",
+        "@rollup/rollup-linux-x64-gnu": "4.44.0",
+        "@rollup/rollup-linux-x64-musl": "4.44.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.44.0",
+        "@rollup/rollup-win32-x64-msvc": "4.44.0"
       }
     },
     "node_modules/@stencil/react-output-target": {
@@ -2838,9 +2840,9 @@
       }
     },
     "node_modules/axe-core": {
-      "version": "4.11.4",
-      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.11.4.tgz",
-      "integrity": "sha512-KunSNx+TVpkAw/6ULfhnx+HWRecjqZGTOyquAoWHYLRSdK1tB5Ihce1ZW+UY3fj33bYAFWPu7W/GRSmmrCGuxA==",
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.12.1.tgz",
+      "integrity": "sha512-s7iGf5GaVMxEG0ENN9x+xTr7GFZCb1ZP/1uATUpCEK2X78nDB3RwbtFCo9pGAf9ru+VwoQ464DkaLEeRM08wJA==",
       "dev": true,
       "license": "MPL-2.0",
       "engines": {
@@ -3066,6 +3068,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/boxen/node_modules/chalk": {
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.2.tgz",
+      "integrity": "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
     "node_modules/boxen/node_modules/string-width": {
       "version": "5.1.2",
       "dev": true,
@@ -3247,11 +3262,13 @@
       "license": "CC-BY-4.0"
     },
     "node_modules/chalk": {
-      "version": "5.6.2",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-6.0.0.tgz",
+      "integrity": "sha512-2uNTXIuTTxk7ciZgAU1BQcgnchcG0xXnrs6jzkQfj9SsRa9M2s5zE8WT96hS6KmG4MzWHSrvH43DF1m4XRkrFg==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+        "node": ">=22"
       },
       "funding": {
         "url": "https://github.com/chalk/chalk?sponsor=1"
@@ -7942,35 +7959,35 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.59.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.59.1.tgz",
-      "integrity": "sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==",
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.62.1.tgz",
+      "integrity": "sha512-0M+L3LAD8/nm554LOla9Ayx0j0tmFZ0FBcoQ7F1VuVHpM/XpiC8RcDzBQB8W5+hA8L22THxELzeF+2WcUzvcLg==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright-core": "1.59.1"
+        "playwright-core": "1.62.1"
       },
       "bin": {
         "playwright": "cli.js"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">=20"
       },
       "optionalDependencies": {
         "fsevents": "2.3.2"
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.59.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.59.1.tgz",
-      "integrity": "sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==",
+      "version": "1.62.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.62.1.tgz",
+      "integrity": "sha512-wPYSwEBJY9GHraISXqyqtx0na0LpO3XEX7jNDhntbex7tzUS7kLnZsOlFruFJB4Hi/rhDMjXGqHewDZ68nYZVw==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "playwright-core": "cli.js"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">=20"
       }
     },
     "node_modules/postcss": {
diff --git a/core/package.json b/core/package.json
index 56246c0dc82..c3f01339760 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.8.7",
+  "version": "8.8.18",
   "description": "Base components for Ionic",
   "engines": {
     "node": ">= 16"
@@ -34,19 +34,19 @@
     "loader/"
   ],
   "dependencies": {
-    "@stencil/core": "4.43.0",
+    "@stencil/core": "4.43.5",
     "ionicons": "^8.0.13",
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@axe-core/playwright": "^4.11.3",
+    "@axe-core/playwright": "^4.12.1",
     "@capacitor/core": "^8.0.0",
     "@capacitor/haptics": "^8.0.0",
     "@capacitor/keyboard": "^8.0.0",
     "@capacitor/status-bar": "^8.0.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
-    "@playwright/test": "^1.59.1",
+    "@playwright/test": "^1.62.1",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
     "@stencil/angular-output-target": "^0.10.0",
@@ -57,7 +57,7 @@
     "@types/node": "^16.18.126",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",
-    "chalk": "^5.3.0",
+    "chalk": "^6.0.0",
     "clean-css-cli": "^5.6.1",
     "domino": "^2.1.6",
     "eslint": "^7.32.0",
@@ -67,7 +67,7 @@
     "fs-extra": "^9.0.1",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
-    "playwright-core": "^1.59.1",
+    "playwright-core": "^1.62.1",
     "prettier": "^2.6.1",
     "rollup": "^2.26.4",
     "sass": "^1.33.0",
@@ -99,7 +99,8 @@
     "test.e2e.update-snapshots": "npm run test.e2e -- --update-snapshots='changed'",
     "test.watch": "jest --watch --no-cache",
     "test.treeshake": "node scripts/treeshaking.js dist/index.js",
-    "validate": "npm run lint && npm run test && npm run build && npm run test.treeshake",
+    "test.lazy-imports": "node scripts/verify/lazy-imports.js",
+    "validate": "npm run lint && npm run test && npm run build && npm run test.lazy-imports && npm run test.treeshake",
     "docker.build": "docker build -t ionic-playwright .",
     "test.e2e.docker": "npm run docker.build && node ./scripts/docker.mjs",
     "test.e2e.docker.update-snapshots": "npm run test.e2e.docker -- --update-snapshots='changed'",
diff --git a/core/scripts/verify/lazy-imports.js b/core/scripts/verify/lazy-imports.js
new file mode 100644
index 00000000000..d0008130474
--- /dev/null
+++ b/core/scripts/verify/lazy-imports.js
@@ -0,0 +1,56 @@
+/**
+ * Fails if the built lazy loader is missing a literal import path for any component bundle.
+ * Not in `scripts/testing/` because `vercel-build.sh` publishes that directory.
+ * https://github.com/ionic-team/ionic-framework/issues/31333
+ */
+const fs = require('fs');
+const path = require('path');
+
+const PACKAGE_ROOT = path.resolve(__dirname, '..', '..');
+const OUTPUT_DIRS = ['dist/esm', 'dist/cjs'];
+
+function main() {
+  const failures = OUTPUT_DIRS.map(verify).filter((message) => message !== null);
+
+  if (failures.length > 0) {
+    failures.forEach((message) => console.error(message));
+    process.exit(1);
+  }
+
+  console.error(`Success! Every lazy bundle is imported by path in ${OUTPUT_DIRS.join(' and ')}`);
+}
+
+function verify(dir) {
+  const resolved = path.join(PACKAGE_ROOT, dir);
+
+  if (!fs.existsSync(resolved)) {
+    return `${dir} does not exist. Run npm run build first.`;
+  }
+
+  const files = fs.readdirSync(resolved).filter((file) => file.endsWith('.js'));
+  const entries = files.filter((file) => file.endsWith('.entry.js'));
+
+  if (entries.length === 0) {
+    return `${dir} does not contain any .entry.js files.`;
+  }
+
+  // A non-loader chunk that happens to name an entry file would be a false pass.
+  const loader = files
+    .filter((file) => !file.endsWith('.entry.js'))
+    .map((file) => fs.readFileSync(path.join(resolved, file), 'utf-8'))
+    .find((source) => /switch\s*\(bundleId\)/.test(source));
+
+  if (loader === undefined) {
+    return `${dir} has no lazy loader with a bundle id switch. Check that extras.enableImportInjection is still set in core/stencil.config.ts.`;
+  }
+
+  const missing = entries.filter((entry) => !loader.includes(`'./${entry}'`) && !loader.includes(`"./${entry}"`));
+
+  if (missing.length > 0) {
+    return `${dir} is missing an import for ${missing.length} of ${entries.length} lazy bundles: ${missing.join(', ')}`;
+  }
+
+  return null;
+}
+
+main();
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 37223c4f77a..102f7472b98 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -15,7 +15,7 @@ import { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
 import { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 import { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 import { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
-import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
+import { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimeParts, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 import { SpinnerTypes } from "./components/spinner/spinner-configs";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 import { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from "./components/input-otp/input-otp-interface";
@@ -53,7 +53,7 @@ export { RouteID, RouterDirection, RouterEventDetail, RouteWrite } from "./compo
 export { BreadcrumbCollapsedClickEventDetail } from "./components/breadcrumb/breadcrumb-interface";
 export { CheckboxChangeEventDetail } from "./components/checkbox/checkbox-interface";
 export { ScrollBaseDetail, ScrollDetail } from "./components/content/content-interface";
-export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
+export { DatetimeChangeEventDetail, DatetimeHighlight, DatetimeHighlightCallback, DatetimeHourCycle, DatetimeParts, DatetimePresentation, FormatOptions, TitleSelectedDatesFormatter } from "./components/datetime/datetime-interface";
 export { SpinnerTypes } from "./components/spinner/spinner-configs";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/input/input-interface";
 export { InputOtpChangeEventDetail, InputOtpCompleteEventDetail, InputOtpInputEventDetail } from "./components/input-otp/input-otp-interface";
@@ -929,7 +929,7 @@ export namespace Components {
          */
         "clearText": string;
         /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, refer to [theming](/docs/theming/basics).
           * @default 'primary'
          */
         "color"?: Color;
@@ -961,6 +961,10 @@ export namespace Components {
           * Formatting options for dates and times. Should include a 'date' and/or 'time' object, each of which is of type [Intl.DateTimeFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options).
          */
         "formatOptions"?: FormatOptions;
+        /**
+          * Returns the default parts the datetime falls back to when no value is set: today's date and time snapped to the closest value allowed by the component's constraints (`min`, `max`, and the `*Values` props).
+         */
+        "getDefaultPart": () => Promise<DatetimeParts>;
         /**
           * Used to apply custom text and background colors to specific dates.  Can be either an array of objects containing ISO strings and colors, or a callback that receives an ISO string and returns the colors.  Only applies to the `date`, `date-time`, and `time-date` presentations, with `preferWheel="false"`.
          */
@@ -1147,6 +1151,10 @@ export namespace Components {
           * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
          */
         "download": string | undefined;
+        /**
+          * The HTML form element or form element id. Used to submit a form when the button is not a child of the form.
+         */
+        "form"?: string | HTMLFormElement;
         /**
           * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
          */
@@ -2654,7 +2662,7 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Show two knobs.
+          * If `true`, the range shows two knobs and `value` is an object with `lower` and `upper` properties. If `false`, the range shows one knob and `value` is a number.
           * @default false
          */
         "dualKnobs": boolean;
@@ -3313,7 +3321,7 @@ export namespace Components {
         "isVisible": () => Promise<boolean>;
         /**
           * When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression.
-          * @default QUERY['lg']
+          * @default '(min-width: 992px)'
          */
         "when": string | boolean;
     }
@@ -6190,7 +6198,7 @@ declare namespace LocalJSX {
          */
         "clearText"?: string;
         /**
-          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics).
+          * The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, refer to [theming](/docs/theming/basics).
           * @default 'primary'
          */
         "color"?: Color;
@@ -6418,6 +6426,10 @@ declare namespace LocalJSX {
           * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
          */
         "download"?: string | undefined;
+        /**
+          * The HTML form element or form element id. Used to submit a form when the button is not a child of the form.
+         */
+        "form"?: string | HTMLFormElement;
         /**
           * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
          */
@@ -7927,7 +7939,7 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Show two knobs.
+          * If `true`, the range shows two knobs and `value` is an object with `lower` and `upper` properties. If `false`, the range shows one knob and `value` is a number.
           * @default false
          */
         "dualKnobs"?: boolean;
@@ -8683,7 +8695,7 @@ declare namespace LocalJSX {
         "onIonSplitPaneVisible"?: (event: IonSplitPaneCustomEvent<{ visible: boolean }>) => void;
         /**
           * When the split-pane should be shown. Can be a CSS media query expression, or a shortcut expression. Can also be a boolean expression.
-          * @default QUERY['lg']
+          * @default '(min-width: 992px)'
          */
         "when"?: string | boolean;
     }
@@ -9393,6 +9405,7 @@ declare namespace LocalJSX {
         "show": boolean;
         "translucent": boolean;
         "type": 'submit' | 'reset' | 'button';
+        "form": string | HTMLFormElement;
         "size": 'small';
         "closeIcon": string;
     }
diff --git a/core/src/components/action-sheet/test/a11y/index.html b/core/src/components/action-sheet/test/a11y/index.html
index 181ada7fba7..7a6190d3073 100644
--- a/core/src/components/action-sheet/test/a11y/index.html
+++ b/core/src/components/action-sheet/test/a11y/index.html
@@ -11,7 +11,7 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   </head>
   <script type="module">
-    import { actionSheetController } from '../../../../dist/ionic/index.esm.js';
+    import { actionSheetController } from '../../../../../dist/ionic/index.esm.js';
     window.actionSheetController = actionSheetController;
   </script>
 
diff --git a/core/src/components/action-sheet/test/basic/index.html b/core/src/components/action-sheet/test/basic/index.html
index b95d43b42c7..640801b2ddf 100644
--- a/core/src/components/action-sheet/test/basic/index.html
+++ b/core/src/components/action-sheet/test/basic/index.html
@@ -14,7 +14,7 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   </head>
   <script type="module">
-    import { actionSheetController } from '../../../../dist/ionic/index.esm.js';
+    import { actionSheetController } from '../../../../../dist/ionic/index.esm.js';
     window.actionSheetController = actionSheetController;
   </script>
 
diff --git a/core/src/components/action-sheet/test/standalone/index.html b/core/src/components/action-sheet/test/standalone/index.html
index b40c03c53c2..4ee6b77bf7e 100644
--- a/core/src/components/action-sheet/test/standalone/index.html
+++ b/core/src/components/action-sheet/test/standalone/index.html
@@ -14,7 +14,7 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   </head>
   <script type="module">
-    import { actionSheetController } from '../../../../dist/ionic/index.esm.js';
+    import { actionSheetController } from '../../../../../dist/ionic/index.esm.js';
     window.actionSheetController = actionSheetController;
   </script>
   <body>
diff --git a/core/src/components/action-sheet/test/translucent/index.html b/core/src/components/action-sheet/test/translucent/index.html
index cfae303e7e6..c2fcc48dcd6 100644
--- a/core/src/components/action-sheet/test/translucent/index.html
+++ b/core/src/components/action-sheet/test/translucent/index.html
@@ -58,7 +58,7 @@
     </style>
   </head>
   <script type="module">
-    import { actionSheetController } from '../../../../dist/ionic/index.esm.js';
+    import { actionSheetController } from '../../../../../dist/ionic/index.esm.js';
     window.actionSheetController = actionSheetController;
   </script>
   <body>
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-scale-ios-ltr-Mobile-Chrome-linux.png
index f67d7697e94..9f777bfbe8e 100644
Binary files a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-scale-ios-ltr-Mobile-Safari-linux.png
index 14b67bab55b..3132f10c7c1 100644
Binary files a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-scale-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-scale-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-scale-md-ltr-Mobile-Chrome-linux.png
index 82f5a675ff2..5a36d4b7306 100644
Binary files a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-scale-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-scale-md-ltr-Mobile-Safari-linux.png
index b08f7f705b0..ac7fcd60656 100644
Binary files a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-scale-md-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-scale-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Chrome-linux.png
index 0e4c7296e26..702aac68103 100644
Binary files a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Safari-linux.png
index f9700b524ca..0cdb0d34ddf 100644
Binary files a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-checkbox-text-wrap-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-scale-ios-ltr-Mobile-Chrome-linux.png
index 5345dedf71f..2af165c1e6a 100644
Binary files a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-scale-ios-ltr-Mobile-Safari-linux.png
index 872d9b5bc3b..6533588b233 100644
Binary files a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-scale-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-scale-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-scale-md-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-scale-md-ltr-Mobile-Chrome-linux.png
index fbab7b3c127..def97fcd144 100644
Binary files a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-scale-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-scale-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-scale-md-ltr-Mobile-Safari-linux.png
index bf093626e16..2b87b888ccc 100644
Binary files a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-scale-md-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-scale-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Chrome-linux.png
index 39e52cb8c99..cc17202dcde 100644
Binary files a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Safari-linux.png
index 99524420f87..8eb4942b639 100644
Binary files a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-radio-text-wrap-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-scale-ios-ltr-Mobile-Safari-linux.png
index 7da490d5876..3ac086d15e4 100644
Binary files a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-scale-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-scale-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-scale-md-ltr-Mobile-Safari-linux.png
index 43bbc8a1033..bdf6ff7664d 100644
Binary files a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-scale-md-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-scale-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-ios-ltr-Mobile-Firefox-linux.png
index f1b9c9c95a9..b83fae1e42b 100644
Binary files a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-ios-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-ios-ltr-Mobile-Safari-linux.png
index 4e73498dcbc..985d9cc5858 100644
Binary files a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-md-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-md-ltr-Mobile-Safari-linux.png
index 5fe7a165ca1..43b7f9973c2 100644
Binary files a/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-md-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/a11y/alert.e2e.ts-snapshots/alert-text-fields-scale-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/a11y/index.html b/core/src/components/alert/test/a11y/index.html
index cb137ba7314..e9dda8ccd32 100644
--- a/core/src/components/alert/test/a11y/index.html
+++ b/core/src/components/alert/test/a11y/index.html
@@ -11,7 +11,7 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   </head>
   <script type="module">
-    import { alertController } from '../../../../dist/ionic/index.esm.js';
+    import { alertController } from '../../../../../dist/ionic/index.esm.js';
     window.alertController = alertController;
   </script>
 
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 5909d31177b..422dc78df14 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-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-Mobile-Safari-linux.png
index e3cc49273c4..3db4cc6f6ae 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
index 3a25efb2319..ace7921fe82 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-dark-Mobile-Chrome-linux.png 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-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-dark-Mobile-Safari-linux.png
index d6f27beb40c..ecc5caaf58b 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-ltr-dark-Mobile-Safari-linux.png 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 28906d81ae7..c1f3aa6076c 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-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-Mobile-Safari-linux.png
index bbc71f6ed27..c51380a9daf 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
index c1a9f818693..0ca5b035758 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-dark-Mobile-Chrome-linux.png 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-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-dark-Mobile-Safari-linux.png
index d6ee4953275..f3b526c748a 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-ios-rtl-dark-Mobile-Safari-linux.png 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 4afb9ec90d7..64dc50f3a51 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-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-Mobile-Safari-linux.png
index 4d515af5061..99b52f26e9d 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
index b50cef0cb16..ed8ccf71c5d 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-dark-Mobile-Chrome-linux.png 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-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-dark-Mobile-Safari-linux.png
index 8f2138c058b..abc154963b2 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-ltr-dark-Mobile-Safari-linux.png 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 aaf682977d2..88035ef5b4e 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-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-Mobile-Safari-linux.png
index 1932799c790..7f7a9fb2f66 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
index be51a5bd790..a6dde39d863 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-dark-Mobile-Chrome-linux.png 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-Safari-linux.png b/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-dark-Mobile-Safari-linux.png
index f06f6122133..97bc8c5c013 100644
Binary files a/core/src/components/alert/test/basic/alert.e2e.ts-snapshots/alert-multipleButtons-md-rtl-dark-Mobile-Safari-linux.png 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-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 550db70f5bf..b8c706fb344 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-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 181b4f1fdfd..59c03881daf 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/index.html b/core/src/components/alert/test/basic/index.html
index 171666ee3d8..e9ec5413a04 100644
--- a/core/src/components/alert/test/basic/index.html
+++ b/core/src/components/alert/test/basic/index.html
@@ -14,7 +14,7 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   </head>
   <script type="module">
-    import { alertController, loadingController } from '../../../../dist/ionic/index.esm.js';
+    import { alertController, loadingController } from '../../../../../dist/ionic/index.esm.js';
     window.alertController = alertController;
     window.loadingController = loadingController;
   </script>
diff --git a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-ltr-Mobile-Safari-linux.png
index b05a3d16860..7bb9fb009eb 100644
Binary files a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-rtl-Mobile-Safari-linux.png b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-rtl-Mobile-Safari-linux.png
index 02820dd91a8..7a7ea03eebe 100644
Binary files a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-ltr-Mobile-Safari-linux.png b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-ltr-Mobile-Safari-linux.png
index effe36becf6..a81b5cbc533 100644
Binary files a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-ltr-Mobile-Safari-linux.png and b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-rtl-Mobile-Safari-linux.png b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-rtl-Mobile-Safari-linux.png
index 8811a5009a2..37593c15e62 100644
Binary files a/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-rtl-Mobile-Safari-linux.png and b/core/src/components/alert/test/standalone/alert.e2e.ts-snapshots/alert-standalone-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/alert/test/standalone/index.html b/core/src/components/alert/test/standalone/index.html
index c0413f6fc09..b69f126c7ec 100644
--- a/core/src/components/alert/test/standalone/index.html
+++ b/core/src/components/alert/test/standalone/index.html
@@ -23,7 +23,7 @@
     </style>
   </head>
   <script type="module">
-    import { alertController } from '../../../../dist/ionic/index.esm.js';
+    import { alertController } from '../../../../../dist/ionic/index.esm.js';
     window.alertController = alertController;
   </script>
 
diff --git a/core/src/components/alert/test/translucent/index.html b/core/src/components/alert/test/translucent/index.html
index 401bd35d652..c78b7106829 100644
--- a/core/src/components/alert/test/translucent/index.html
+++ b/core/src/components/alert/test/translucent/index.html
@@ -70,7 +70,7 @@
     </style>
   </head>
   <script type="module">
-    import { alertController } from '../../../../dist/ionic/index.esm.js';
+    import { alertController } from '../../../../../dist/ionic/index.esm.js';
     window.alertController = alertController;
   </script>
 
diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
index 0e4741f4acd..a1e7f72bf01 100644
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -195,9 +195,13 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
 
       /**
        * If the form already has a rendered form button
-       * then do not append a new one again.
+       * then do not append a new one again. Sync the
+       * disabled state and type if it changes after button
+       * creation (e.g., runtime property updates).
        */
       if (formButtonEl !== null && formEl.contains(formButtonEl)) {
+        formButtonEl.disabled = this.disabled;
+        formButtonEl.type = this.type;
         return;
       }
 
diff --git a/core/src/components/button/test/form-reference/button.e2e.ts b/core/src/components/button/test/form-reference/button.e2e.ts
index 5710f52da67..c85cd20760d 100644
--- a/core/src/components/button/test/form-reference/button.e2e.ts
+++ b/core/src/components/button/test/form-reference/button.e2e.ts
@@ -153,6 +153,41 @@ configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) =>
 
       expect(submitEvent).toHaveReceivedEvent();
     });
+
+    test('should keep hidden button type in sync with visible button', async ({ page }) => {
+      // Set the form to have a submit button
+      await page.setContent(
+        `
+        <form id="myForm"></form>
+        <ion-button form="myForm" type="submit">
+          Submit
+        </ion-button>
+      `,
+        config
+      );
+
+      // Get visible button
+      const button = page.locator('ion-button');
+
+      // Get type of the hidden button
+      const getHiddenType = () =>
+        page.evaluate(() => {
+          const hidden = document.querySelector('form button[style*="display: none"]') as HTMLButtonElement;
+
+          return hidden?.type;
+        });
+
+      // Type of hidden button should be submit to start
+      expect(await getHiddenType()).toBe('submit');
+
+      // Set type of visible button to reset
+      await button.evaluate((el: HTMLIonButtonElement) => {
+        el.type = 'reset';
+      });
+
+      // Expect hidden button type to be reset
+      await expect.poll(async () => await getHiddenType()).toBe('reset');
+    });
   });
 
   test.describe(title('should throw a warning if the form cannot be found'), () => {
diff --git a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Chrome-linux.png
index 03e84a57c35..75ac590fdb3 100644
Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Chrome-linux.png
index d986ef49e68..90014c08489 100644
Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Safari-linux.png
index 6aea0270e88..949ff795373 100644
Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Safari-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Safari-linux.png
index f393e6f367e..fc19f212bbc 100644
Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Safari-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Safari-linux.png b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Safari-linux.png
index 8a8bbcfd99c..785048f644c 100644
Binary files a/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Safari-linux.png and b/core/src/components/button/test/icon/button.e2e.ts-snapshots/button-icon-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-md-ltr-Mobile-Chrome-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-md-ltr-Mobile-Chrome-linux.png
index 747e33643b1..37eca67a82e 100644
Binary files a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-md-ltr-Mobile-Safari-linux.png b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-md-ltr-Mobile-Safari-linux.png
index 18c1ee8d031..4b7d0f2aff5 100644
Binary files a/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-md-ltr-Mobile-Safari-linux.png and b/core/src/components/card/test/basic/card.e2e.ts-snapshots/card-no-content-or-header-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/checkbox.scss b/core/src/components/checkbox/checkbox.scss
index 438add273d0..b99260dd8ed 100644
--- a/core/src/components/checkbox/checkbox.scss
+++ b/core/src/components/checkbox/checkbox.scss
@@ -1,4 +1,3 @@
-@import "../../themes/ionic.globals";
 @import "./checkbox.vars.scss";
 
 // Checkbox
@@ -119,9 +118,16 @@ input {
   display: none;
 }
 
+// Hide the native focus ring since we draw our own focus indicator.
+:host(:focus) {
+  outline: none;
+}
+
 .native-wrapper {
   display: flex;
 
+  position: relative;
+
   align-items: center;
 }
 
@@ -152,6 +158,28 @@ input {
   opacity: 0;
 }
 
+// Checkbox: Keyboard Focus
+// ---------------------------------------------
+
+:host(.ion-focused) .native-wrapper::after {
+  @include border-radius(50%);
+
+  display: block;
+  position: absolute;
+
+  width: $checkbox-focus-ring-size;
+  height: $checkbox-focus-ring-size;
+
+  background: $checkbox-background-color-focused;
+
+  content: "";
+  opacity: 0.2;
+
+  // Centered with insets because `transform` is physical and breaks in RTL.
+  inset-block-start: calc(50% - #{$checkbox-focus-ring-size} / 2);
+  inset-inline-start: calc(50% - #{$checkbox-focus-ring-size} / 2);
+}
+
 // Checkbox Bottom Content
 // ----------------------------------------------------------------
 
diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx
index 99cb13c474a..a13bb3580be 100644
--- a/core/src/components/checkbox/checkbox.tsx
+++ b/core/src/components/checkbox/checkbox.tsx
@@ -1,6 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Build, Component, Element, Event, Host, Method, Prop, State, h } from '@stencil/core';
-import { checkInvalidState } from '@utils/forms';
+import { Build, Component, Element, Event, Host, Method, Prop, State, forceUpdate, h } from '@stencil/core';
+import { checkInvalidState, createItemMultipleInputsObserver } from '@utils/forms';
 import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes, renderHiddenInput } from '@utils/helpers';
 import { createColorClasses, hostContext } from '@utils/theme';
@@ -37,6 +37,7 @@ export class Checkbox implements ComponentInterface {
   private errorTextId = `${this.inputId}-error-text`;
   private inheritedAttributes: Attributes = {};
   private validationObserver?: MutationObserver;
+  private itemFocusObserver?: MutationObserver;
 
   @Element() el!: HTMLIonCheckboxElement;
 
@@ -199,6 +200,8 @@ export class Checkbox implements ComponentInterface {
     // Always set initial state
     this.isInvalid = checkInvalidState(el);
     this.hasLabelContent = this.el.textContent !== '';
+
+    this.itemFocusObserver = createItemMultipleInputsObserver(el, () => forceUpdate(this));
   }
 
   componentWillLoad() {
@@ -210,11 +213,14 @@ export class Checkbox implements ComponentInterface {
   }
 
   disconnectedCallback() {
-    // Clean up validation observer to prevent memory leaks.
     if (this.validationObserver) {
       this.validationObserver.disconnect();
       this.validationObserver = undefined;
     }
+    if (this.itemFocusObserver) {
+      this.itemFocusObserver.disconnect();
+      this.itemFocusObserver = undefined;
+    }
   }
 
   /** @internal */
@@ -338,6 +344,8 @@ export class Checkbox implements ComponentInterface {
     } = this;
     const mode = getIonMode(this);
     const path = getSVGPath(mode, indeterminate);
+    const inItem = hostContext('ion-item', el);
+    const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
 
     renderHiddenInput(true, el, name, checked ? value : '', disabled);
 
@@ -360,11 +368,14 @@ export class Checkbox implements ComponentInterface {
         onClick={this.onClick}
         class={createColorClasses(color, {
           [mode]: true,
-          'in-item': hostContext('ion-item', el),
+          'in-item': inItem,
           'checkbox-checked': checked,
           'checkbox-disabled': disabled,
           'checkbox-indeterminate': indeterminate,
           interactive: true,
+          // A single-input item has the input cover and draws the indicator itself.
+          // A multi-input item has no cover, so each control draws its own.
+          'ion-focusable': !inItem || inMultipleInputsItem,
           [`checkbox-justify-${justify}`]: justify !== undefined,
           [`checkbox-alignment-${alignment}`]: alignment !== undefined,
           [`checkbox-label-placement-${labelPlacement}`]: true,
diff --git a/core/src/components/checkbox/checkbox.vars.scss b/core/src/components/checkbox/checkbox.vars.scss
index 8c73dff6f8f..551eb479b38 100644
--- a/core/src/components/checkbox/checkbox.vars.scss
+++ b/core/src/components/checkbox/checkbox.vars.scss
@@ -1,5 +1,12 @@
+@import "../../themes/ionic.globals";
+
 /// @prop - Top margin of checkbox's label when in an item
 $checkbox-item-label-margin-top: 10px;
 
 /// @prop - Bottom margin of checkbox's label when in an item
-$checkbox-item-label-margin-bottom: 10px;
\ No newline at end of file
+$checkbox-item-label-margin-bottom: 10px;
+
+/// @prop - Background color of focus indicator for checkbox when focused
+$checkbox-background-color-focused: ion-color(primary, tint);
+
+$checkbox-focus-ring-size: 36px;
diff --git a/core/src/components/checkbox/test/a11y/checkbox.e2e.ts b/core/src/components/checkbox/test/a11y/checkbox.e2e.ts
index 6d0b6645ae5..989a7f97a96 100644
--- a/core/src/components/checkbox/test/a11y/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/a11y/checkbox.e2e.ts
@@ -25,6 +25,64 @@ configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title,
   });
 });
 
+/**
+ * These assert `ion-focusable`, not the rendered ring, because `ion-focused`
+ * relies on keyboard-mode detection that is flaky on WebKit. Gating is mode-independent.
+ */
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => {
+  test.describe(title('checkbox: focus indicator'), () => {
+    test('standalone checkbox should be focusable', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-checkbox aria-label="Checkbox">Checkbox</ion-checkbox>
+        </ion-app>
+      `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox');
+      await expect(checkbox).toHaveClass(/ion-focusable/);
+    });
+
+    test('checkbox in a single-input item should not show its own focus indicator', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-checkbox>Checkbox</ion-checkbox>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox');
+      const item = page.locator('ion-item');
+      await expect(checkbox).not.toHaveClass(/ion-focusable/);
+      await expect(item).toHaveClass(/ion-focusable/);
+    });
+
+    test('checkbox in a multi-input item should be focusable', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-checkbox>Checkbox 1</ion-checkbox>
+            <ion-checkbox>Checkbox 2</ion-checkbox>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const checkboxes = page.locator('ion-checkbox');
+      await expect(checkboxes.nth(0)).toHaveClass(/ion-focusable/);
+      await expect(checkboxes.nth(1)).toHaveClass(/ion-focusable/);
+    });
+  });
+});
+
 configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
   test.describe(title('checkbox: a11y'), () => {
     test.describe(title('checkbox: font scaling'), () => {
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts b/core/src/components/checkbox/test/basic/checkbox.e2e.ts
index 733f229e4b6..61c5cf58ff6 100644
--- a/core/src/components/checkbox/test/basic/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/basic/checkbox.e2e.ts
@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
+import { applyKeyboardFocus, configs, test } from '@utils/test/playwright';
 
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('checkbox: basic visual tests'), () => {
@@ -47,7 +47,7 @@ configs().forEach(({ title, screenshot, config }) => {
 /**
  * This behavior does not vary across modes/directions
  */
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('checkbox: ionChange'), () => {
     test('should fire ionChange when interacting with checkbox', async ({ page }) => {
       await page.setContent(
@@ -138,48 +138,6 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
   });
 
   test.describe(title('checkbox: ionFocus'), () => {
-    test('should not have visual regressions', async ({ page, pageUtils }) => {
-      await page.setContent(
-        `
-        <style>
-          #container {
-            display: inline-block;
-            padding: 10px;
-          }
-        </style>
-
-        <div id="container">
-          <ion-checkbox>Unchecked</ion-checkbox>
-        </div>
-      `,
-        config
-      );
-
-      await pageUtils.pressKeys('Tab');
-
-      const container = page.locator('#container');
-
-      await expect(container).toHaveScreenshot(screenshot(`checkbox-focus`));
-    });
-
-    test('should not have visual regressions when interacting with checkbox in item', async ({ page, pageUtils }) => {
-      await page.setContent(
-        `
-        <ion-item class="ion-focused">
-          <ion-checkbox>Unchecked</ion-checkbox>
-        </ion-item>
-      `,
-        config
-      );
-
-      // Test focus with keyboard navigation
-      await pageUtils.pressKeys('Tab');
-
-      const item = page.locator('ion-item');
-
-      await expect(item).toHaveScreenshot(screenshot(`checkbox-in-item-focus`));
-    });
-
     test('should fire ionFocus when checkbox is focused', async ({ page, pageUtils }) => {
       await page.setContent(
         `
@@ -328,3 +286,66 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
     });
   });
 });
+
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('checkbox: focus visual'), () => {
+    test('should render focus indicator when unchecked', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          #container {
+            width: fit-content;
+            padding: 10px;
+          }
+        </style>
+
+        <ion-app>
+          <div id="container">
+            <ion-checkbox>Unchecked</ion-checkbox>
+          </div>
+        </ion-app>
+      `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox');
+
+      await applyKeyboardFocus(page, checkbox);
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`checkbox-focus`));
+    });
+
+    test('should render focus indicator when checked', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          #container {
+            width: fit-content;
+            padding: 10px;
+          }
+        </style>
+
+        <ion-app>
+          <div id="container">
+            <ion-checkbox checked>Checked</ion-checkbox>
+          </div>
+        </ion-app>
+      `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox');
+
+      await applyKeyboardFocus(page, checkbox);
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`checkbox-focus-checked`));
+    });
+  });
+});
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..9e8caf8ee43
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a24d128c04b
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..5f268bb2df0
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..769ebd955ad
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b794065ad98
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e96f191e15d
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-checked-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-ios-ltr-Mobile-Chrome-linux.png
index 45885364c12..86c807e630c 100644
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-ios-ltr-Mobile-Firefox-linux.png
index 305f4d89e1b..e328672a417 100644
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-ios-ltr-Mobile-Safari-linux.png
index aaccc05ff73..fdfb755ea67 100644
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..112e7ada86f
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..b3cc4169e01
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..5c86d926c0e
Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index 2c0dcdc0baa..00000000000
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts b/core/src/components/checkbox/test/item/checkbox.e2e.ts
index 341839739b1..d2963d81204 100644
--- a/core/src/components/checkbox/test/item/checkbox.e2e.ts
+++ b/core/src/components/checkbox/test/item/checkbox.e2e.ts
@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
+import { applyKeyboardFocus, configs, test } from '@utils/test/playwright';
 
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('checkbox: item with list'), () => {
@@ -126,6 +126,113 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       await expect(list).toHaveScreenshot(screenshot(`checkbox-stacked-label-in-item`));
     });
   });
+
+  test.describe(title('checkbox: multiple inputs in item'), () => {
+    test('should not have visual regressions with multiple checkboxes in an item', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-list>
+            <ion-item>
+              <ion-checkbox justify="start">Checkbox 1</ion-checkbox>
+              <ion-checkbox justify="start">Checkbox 2</ion-checkbox>
+            </ion-item>
+          </ion-list>
+        `,
+        config
+      );
+      const list = page.locator('ion-list');
+      await expect(list).toHaveScreenshot(screenshot(`checkbox-multiple-in-item`));
+    });
+  });
+});
+
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('checkbox: focus in item'), () => {
+    test('should render focus indicator in an item', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-checkbox>Unchecked</ion-checkbox>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox');
+      const item = page.locator('ion-item');
+
+      await applyKeyboardFocus(page, checkbox, item);
+
+      await expect(item).toHaveScreenshot(screenshot(`checkbox-in-item-focus`));
+    });
+
+    test('should render focus indicator for a checked checkbox in an item', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-checkbox checked>Checked</ion-checkbox>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox');
+      const item = page.locator('ion-item');
+
+      await applyKeyboardFocus(page, checkbox, item);
+
+      await expect(item).toHaveScreenshot(screenshot(`checkbox-checked-in-item-focus`));
+    });
+
+    test('should render focus indicator for a checkbox in a clickable item', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item button>
+            <ion-checkbox>Unchecked</ion-checkbox>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox');
+      const item = page.locator('ion-item');
+
+      await applyKeyboardFocus(page, checkbox);
+
+      await expect(item).toHaveScreenshot(screenshot(`checkbox-in-clickable-item-focus`));
+    });
+
+    test('should render focus indicator for a checkbox in a multi-input item', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-checkbox justify="start">Checkbox 1</ion-checkbox>
+            <ion-checkbox justify="start">Checkbox 2</ion-checkbox>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const checkbox = page.locator('ion-checkbox').first();
+
+      await applyKeyboardFocus(page, checkbox);
+
+      const item = page.locator('ion-item');
+
+      await expect(item).toHaveScreenshot(screenshot(`checkbox-multiple-in-item-focus`));
+    });
+  });
 });
 
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1be06a94b4a
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..84b9edb9c57
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e84bc18b245
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b47ebef469d
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c5e3a593471
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..8413dbc03de
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-checked-in-item-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5195cd52528
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a8475f7d878
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e6fa988e194
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..252ec2fcbad
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..de728a0078b
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..7585764f621
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-clickable-item-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b7c449e6f9e
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..40d72cf339f
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..3101f22b855
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..247aba9eb13
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..3d9e7f4f7a8
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d7fc1740783
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..987bc5d9b19
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e919e470843
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..d5a636afb4a
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..393c0e0bcd6
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..de660abf936
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f5f925dabe6
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..40be000b83a
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-md-ltr-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..82895bd4516
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-md-ltr-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..723a11e9d84
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-md-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c5297bc2d64
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-multiple-in-item-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/checkbox/test/item/index.html b/core/src/components/checkbox/test/item/index.html
index 2548cbfaad0..60582e73abc 100644
--- a/core/src/components/checkbox/test/item/index.html
+++ b/core/src/components/checkbox/test/item/index.html
@@ -15,7 +15,7 @@
     <style>
       .grid {
         display: grid;
-        grid-template-columns: repeat(3, minmax(250px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         grid-row-gap: 20px;
         grid-column-gap: 20px;
       }
@@ -245,6 +245,19 @@ <h1>Multiline Label</h1>
             </ion-item>
           </div>
         </div>
+
+        <h1>Multiple Inputs</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Two Checkboxes (multi-input item). Focus is on the input, not the item.</h2>
+            <ion-list>
+              <ion-item>
+                <ion-checkbox justify="start">Checkbox 1</ion-checkbox>
+                <ion-checkbox justify="start">Checkbox 2</ion-checkbox>
+              </ion-item>
+            </ion-list>
+          </div>
+        </div>
       </ion-content>
 
       <script>
diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx
index b981a323dcf..225bf99cf6b 100644
--- a/core/src/components/content/content.tsx
+++ b/core/src/components/content/content.tsx
@@ -1,5 +1,18 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Build, Component, Element, Event, Host, Listen, Method, Prop, forceUpdate, h, readTask } from '@stencil/core';
+import {
+  Build,
+  Component,
+  Element,
+  Event,
+  Host,
+  Listen,
+  Method,
+  Prop,
+  Watch,
+  forceUpdate,
+  h,
+  readTask,
+} from '@stencil/core';
 import { componentOnReady, hasLazyBuild, inheritAriaAttributes } from '@utils/helpers';
 import type { Attributes } from '@utils/helpers';
 import { isPlatform } from '@utils/platform';
@@ -25,6 +38,8 @@ import type { ScrollBaseDetail, ScrollDetail } from './content-interface';
 })
 export class Content implements ComponentInterface {
   private watchDog: ReturnType<typeof setInterval> | null = null;
+  private mutationObserver: MutationObserver | null = null;
+  private resizeObserver: ResizeObserver | null = null;
   private isScrolling = false;
   private lastScroll = 0;
   private queued = false;
@@ -34,6 +49,8 @@ export class Content implements ComponentInterface {
   private backgroundContentEl?: HTMLElement;
   private isMainContent = true;
   private resizeTimeout: ReturnType<typeof setTimeout> | null = null;
+  private fullscreenResizeObserver?: ResizeObserver;
+  private observerResizeRaf: ReturnType<typeof requestAnimationFrame> | null = null;
   private inheritedAttributes: Attributes = {};
 
   private tabsElement: HTMLElement | null = null;
@@ -77,6 +94,11 @@ export class Content implements ComponentInterface {
    */
   @Prop() fullscreen = false;
 
+  @Watch('fullscreen')
+  fullscreenChanged() {
+    this.setupFullscreenResizeObserver();
+  }
+
   /**
    * Controls where the fixed content is placed relative to the main content
    * in the DOM. This can be used to control the order in which fixed elements
@@ -168,10 +190,21 @@ export class Content implements ComponentInterface {
         closestTabs.addEventListener('ionTabBarLoaded', this.tabsLoadCallback);
       }
     }
+
+    // Re-observe on reattach, since componentDidLoad only fires once.
+    this.setupFullscreenResizeObserver();
+    
+    this.connectObservers();
+  }
+
+  componentDidLoad() {
+    // The custom elements build assigns fullscreen after connectedCallback.
+    this.setupFullscreenResizeObserver();
   }
 
   disconnectedCallback() {
     this.onScrollEnd();
+    this.disconnectObservers();
 
     if (hasLazyBuild(this.el)) {
       /**
@@ -193,6 +226,49 @@ export class Content implements ComponentInterface {
       clearTimeout(this.resizeTimeout);
       this.resizeTimeout = null;
     }
+
+    this.destroyFullscreenResizeObserver();
+  }
+
+  /**
+   * Header and footer sizes can change after load without a window resize
+   * firing, so the `resize` listener alone misses those changes.
+   *
+   * Popover content is excluded because `contain: none` lets its offsets drive
+   * the host's own height, which would feed back into the observer.
+   */
+  private setupFullscreenResizeObserver() {
+    if (!Build.isBrowser || typeof ResizeObserver === 'undefined') {
+      return;
+    }
+
+    if (!this.fullscreen || hostContext('ion-popover', this.el)) {
+      this.destroyFullscreenResizeObserver();
+      return;
+    }
+
+    if (this.fullscreenResizeObserver !== undefined) {
+      return;
+    }
+
+    this.fullscreenResizeObserver = new ResizeObserver(() => {
+      // A hidden page reports a 0x0 box, which would zero the offsets. Same
+      // reasoning as the guard in onResize, minus its debounce so the
+      // correction lands in the next frame instead of 100ms later.
+      if (this.el.offsetParent === null) {
+        return;
+      }
+
+      this.resize();
+    });
+    this.fullscreenResizeObserver.observe(this.el);
+  }
+
+  private destroyFullscreenResizeObserver() {
+    if (this.fullscreenResizeObserver !== undefined) {
+      this.fullscreenResizeObserver.disconnect();
+      this.fullscreenResizeObserver = undefined;
+    }
   }
 
   /**
@@ -425,6 +501,102 @@ export class Content implements ComponentInterface {
     return promise;
   }
 
+  /**
+   * We need to observe the parent element to detect when
+   * <ion-header> or <ion-footer> elements are added/removed
+   * or resized. This ensures the content offset is recalculated
+   * dynamically.
+   */
+  private connectObservers() {
+    if (!Build.isBrowser) {
+      return;
+    }
+
+    const parent = this.el.parentElement;
+    if (!parent) {
+      return;
+    }
+
+    if ('ResizeObserver' in window) {
+      this.resizeObserver = new ResizeObserver(() => {
+        if (this.observerResizeRaf !== null) {
+          cancelAnimationFrame(this.observerResizeRaf);
+        }
+
+        this.observerResizeRaf = requestAnimationFrame(() => {
+          this.observerResizeRaf = null;
+
+          if (this.el.offsetParent === null) {
+            return;
+          }
+
+          this.resize();
+        });
+      });
+    }
+
+    if ('MutationObserver' in window) {
+      this.mutationObserver = new MutationObserver((mutations) => {
+        let shouldUpdate = false;
+
+        for (const mutation of mutations) {
+          if (mutation.type === 'childList') {
+            mutation.addedNodes.forEach((node: Node) => {
+              if (node instanceof HTMLElement && (node.tagName === 'ION-HEADER' || node.tagName === 'ION-FOOTER')) {
+                shouldUpdate = true;
+              }
+            });
+
+            mutation.removedNodes.forEach((node: Node) => {
+              if (node instanceof HTMLElement && (node.tagName === 'ION-HEADER' || node.tagName === 'ION-FOOTER')) {
+                shouldUpdate = true;
+              }
+            });
+          }
+        }
+
+        if (shouldUpdate) {
+          this.refreshResizeObserver();
+          if (this.el.offsetParent !== null) {
+            this.resize();
+          }
+        }
+      });
+
+      this.mutationObserver.observe(parent, { childList: true });
+    }
+
+    this.refreshResizeObserver();
+  }
+
+  private disconnectObservers() {
+    if (this.observerResizeRaf !== null) {
+      cancelAnimationFrame(this.observerResizeRaf);
+      this.observerResizeRaf = null;
+    }
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+      this.mutationObserver = null;
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+  }
+
+  private refreshResizeObserver() {
+    if (!this.resizeObserver || !this.el.parentElement) {
+      return;
+    }
+
+    this.resizeObserver.disconnect();
+
+    const targets = this.el.parentElement.querySelectorAll(':scope > ion-header, :scope > ion-footer');
+
+    const observer = this.resizeObserver;
+    targets.forEach((target) => observer.observe(target));
+  }
+
   private onScrollStart() {
     this.isScrolling = true;
     this.ionScrollStart.emit({
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts b/core/src/components/content/test/auto-offset/content.e2e.ts
new file mode 100644
index 00000000000..77042188f9d
--- /dev/null
+++ b/core/src/components/content/test/auto-offset/content.e2e.ts
@@ -0,0 +1,42 @@
+import { expect } from '@playwright/test';
+import { test, configs } from '@utils/test/playwright';
+
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('content: auto offset'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/content/test/auto-offset`, config);
+      await page.setIonViewport();
+      await expect(page).toHaveScreenshot(screenshot(`content-auto-offset-initial`));
+    });
+
+    test('should update offsets when header height changes', async ({ page }) => {
+      await page.goto(`/src/components/content/test/auto-offset`, config);
+      await page.setIonViewport();
+
+      const content = page.locator('ion-content');
+      const before = await content.evaluate((el: HTMLElement) => getComputedStyle(el).getPropertyValue('--offset-top'));
+
+      await page.click('#expand-header-btn');
+
+      await expect(content).not.toHaveCSS('--offset-top', before);
+
+      await expect(page).toHaveScreenshot(screenshot(`content-auto-offset-header-updated`));
+    });
+
+    test('should update offsets when footer height changes', async ({ page }) => {
+      await page.goto(`/src/components/content/test/auto-offset`, config);
+      await page.setIonViewport();
+
+      const content = page.locator('ion-content');
+      const before = await content.evaluate((el: HTMLElement) =>
+        getComputedStyle(el).getPropertyValue('--offset-bottom')
+      );
+
+      await page.click('#expand-footer-btn');
+
+      await expect(content).not.toHaveCSS('--offset-bottom', before);
+
+      await expect(page).toHaveScreenshot(screenshot(`content-auto-offset-footer-updated`));
+    });
+  });
+});
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..3f9957f19a1
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a5c61844404
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-ltr-Mobile-Safari-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f5f0e3dced5
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..cd585838bbf
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1710b3d807b
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-rtl-Mobile-Safari-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..fd247259e64
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-ltr-Mobile-Chrome-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..077694b18e4
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-ltr-Mobile-Firefox-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..2cca58120ea
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-ltr-Mobile-Safari-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..8aa3e6527da
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-rtl-Mobile-Chrome-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a2f14e43ff0
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-rtl-Mobile-Firefox-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..7516a695cb3
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-rtl-Mobile-Safari-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e3919ef623c
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-footer-updated-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..93a4640de4d
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..7066e66a236
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-ltr-Mobile-Safari-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..70e140d57e2
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..ac06ebbfc9b
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..3d70ed20036
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-rtl-Mobile-Safari-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..7c378aaf66d
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-ltr-Mobile-Chrome-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a0fbbbdd7a5
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-ltr-Mobile-Firefox-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6fa81ec1ab1
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-ltr-Mobile-Safari-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..26eb3dde92a
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-rtl-Mobile-Chrome-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d68c13f23d1
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-rtl-Mobile-Firefox-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e2408a70867
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-rtl-Mobile-Safari-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..279ec5f192a
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-header-updated-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d67eb0caf0b
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..8ec5ef9aee4
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-ltr-Mobile-Safari-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..c5cfb8e0250
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..105c1bd500e
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6c0ee16a171
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-rtl-Mobile-Safari-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4ea938615be
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-ltr-Mobile-Chrome-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..b8a563cbb08
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-ltr-Mobile-Firefox-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a2bb4fed4d7
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-ltr-Mobile-Safari-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..fbbc8ae97d2
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-rtl-Mobile-Chrome-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-rtl-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..22a08546912
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-rtl-Mobile-Firefox-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-rtl-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..9e902cf5ee3
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-rtl-Mobile-Safari-linux.png b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-rtl-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a364df8434d
Binary files /dev/null and b/core/src/components/content/test/auto-offset/content.e2e.ts-snapshots/content-auto-offset-initial-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/content/test/auto-offset/index.html b/core/src/components/content/test/auto-offset/index.html
new file mode 100644
index 00000000000..6c5727f5d75
--- /dev/null
+++ b/core/src/components/content/test/auto-offset/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Content - Auto Offset</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app mode="ios">
+      <ion-header translucent>
+        <ion-toolbar>
+          <ion-title>Auto Offset Test</ion-title>
+        </ion-toolbar>
+        <ion-toolbar id="extra-header-content" style="display: none">
+          <ion-searchbar label="dynamic"></ion-searchbar>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content fullscreen style="--background: blue">
+        <button id="expand-header-btn">Expand Header</button>
+        <br /><br />
+        <button id="expand-footer-btn">Expand Footer</button>
+      </ion-content>
+
+      <ion-footer translucent>
+        <ion-toolbar id="extra-footer-content" style="display: none">
+          <div class="ion-padding">Expanded Footer Area</div>
+        </ion-toolbar>
+        <ion-toolbar>
+          <ion-title>Footer</ion-title>
+        </ion-toolbar>
+      </ion-footer>
+    </ion-app>
+    <script>
+      const headerBtn = document.getElementById('expand-header-btn');
+      const footerBtn = document.getElementById('expand-footer-btn');
+      const extraHeaderToolBar = document.getElementById('extra-header-content');
+      const extraFooterToolbar = document.getElementById('extra-footer-content');
+
+      headerBtn.addEventListener('click', () => {
+        extraHeaderToolBar.style.display = 'flex';
+      });
+
+      footerBtn.addEventListener('click', () => {
+        extraFooterToolbar.style.display = 'flex';
+      });
+    </script>
+  </body>
+</html>
diff --git a/core/src/components/content/test/safe-area/content.e2e.ts b/core/src/components/content/test/safe-area/content.e2e.ts
new file mode 100644
index 00000000000..f28a872fb1f
--- /dev/null
+++ b/core/src/components/content/test/safe-area/content.e2e.ts
@@ -0,0 +1,194 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * ion-content does not have mode-specific styling
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('content: safe-area'), () => {
+    test('should keep the scroll region flush with the viewport when the safe area top changes after load', async ({
+      page,
+    }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/31337',
+      });
+
+      await page.setContent(
+        `
+        <style>:root { --ion-safe-area-top: 0px; }</style>
+        <ion-app>
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Header</ion-title>
+            </ion-toolbar>
+          </ion-header>
+
+          <ion-content fullscreen>
+            <p>Content</p>
+          </ion-content>
+        </ion-app>
+      `,
+        config
+      );
+
+      const scrollRegion = page.locator('ion-content .inner-scroll');
+      const expectFlushWithTop = () =>
+        expect(async () => {
+          expect(Math.abs((await scrollRegion.boundingBox())!.y)).toBeLessThanOrEqual(1);
+        }).toPass({ timeout: 5000 });
+
+      await expectFlushWithTop();
+
+      await page.evaluate(() => document.documentElement.style.setProperty('--ion-safe-area-top', '24px'));
+
+      await expectFlushWithTop();
+    });
+
+    test('should keep the scroll region flush with the viewport when the safe area bottom changes after load', async ({
+      page,
+    }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/31337',
+      });
+
+      await page.setContent(
+        `
+        <style>:root { --ion-safe-area-bottom: 0px; }</style>
+        <ion-app>
+          <ion-content fullscreen>
+            <p>Content</p>
+          </ion-content>
+
+          <ion-footer>
+            <ion-toolbar>
+              <ion-title>Footer</ion-title>
+            </ion-toolbar>
+          </ion-footer>
+        </ion-app>
+      `,
+        config
+      );
+
+      const scrollRegion = page.locator('ion-content .inner-scroll');
+      const viewportHeight = page.viewportSize()!.height;
+      const expectFlushWithBottom = () =>
+        expect(async () => {
+          const box = (await scrollRegion.boundingBox())!;
+          expect(Math.abs(box.y + box.height - viewportHeight)).toBeLessThanOrEqual(1);
+        }).toPass({ timeout: 5000 });
+
+      await expectFlushWithBottom();
+
+      await page.evaluate(() => document.documentElement.style.setProperty('--ion-safe-area-bottom', '24px'));
+
+      await expectFlushWithBottom();
+    });
+
+    test('should recompute the offsets when fullscreen is enabled after load', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Header</ion-title>
+            </ion-toolbar>
+          </ion-header>
+
+          <ion-content>
+            <p>Content</p>
+          </ion-content>
+        </ion-app>
+      `,
+        config
+      );
+
+      const content = page.locator('ion-content');
+      const scrollRegion = page.locator('ion-content .inner-scroll');
+      const expectFlushWithTop = () =>
+        expect(async () => {
+          expect(Math.abs((await scrollRegion.boundingBox())!.y)).toBeLessThanOrEqual(1);
+        }).toPass({ timeout: 5000 });
+
+      await content.evaluate((el: HTMLIonContentElement) => (el.fullscreen = true));
+      await expectFlushWithTop();
+
+      // Only the observer created by the fullscreen watcher can catch this.
+      await page.evaluate(() => document.documentElement.style.setProperty('--ion-safe-area-top', '24px'));
+
+      await expectFlushWithTop();
+    });
+
+    test('should leave the offsets at zero when fullscreen is disabled after load', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Header</ion-title>
+            </ion-toolbar>
+          </ion-header>
+
+          <ion-content fullscreen>
+            <p>Content</p>
+          </ion-content>
+        </ion-app>
+      `,
+        config
+      );
+
+      const content = page.locator('ion-content');
+      const offsetTop = () => content.evaluate((el) => el.style.getPropertyValue('--offset-top'));
+
+      await content.evaluate((el: HTMLIonContentElement) => (el.fullscreen = false));
+
+      await expect(async () => {
+        expect(await offsetTop()).toBe('0px');
+      }).toPass({ timeout: 5000 });
+
+      await page.evaluate(() => document.documentElement.style.setProperty('--ion-safe-area-top', '24px'));
+      await page.waitForTimeout(300);
+
+      expect(await offsetTop()).toBe('0px');
+    });
+
+    test('should keep the offsets while the page is hidden', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <div class="ion-page" id="page">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>Header</ion-title>
+              </ion-toolbar>
+            </ion-header>
+
+            <ion-content fullscreen>
+              <p>Content</p>
+            </ion-content>
+          </div>
+        </ion-app>
+      `,
+        config
+      );
+
+      const content = page.locator('ion-content');
+      const scrollRegion = page.locator('ion-content .inner-scroll');
+      const offsetTop = () => content.evaluate((el) => el.style.getPropertyValue('--offset-top'));
+
+      await expect(async () => {
+        expect(Math.abs((await scrollRegion.boundingBox())!.y)).toBeLessThanOrEqual(1);
+      }).toPass({ timeout: 5000 });
+
+      const beforeHiding = await offsetTop();
+      expect(beforeHiding).toBe(`${Math.round((await page.locator('ion-header').boundingBox())!.height)}px`);
+
+      await page.evaluate(() => document.getElementById('page')!.classList.add('ion-page-hidden'));
+      // Long enough that a missed visibility guard would have committed by now.
+      await page.waitForTimeout(300);
+
+      expect(await offsetTop()).toBe(beforeHiding);
+    });
+  });
+});
diff --git a/core/src/components/datetime-button/datetime-button.tsx b/core/src/components/datetime-button/datetime-button.tsx
index af0a77f88e0..4b0b40fe857 100644
--- a/core/src/components/datetime-button/datetime-button.tsx
+++ b/core/src/components/datetime-button/datetime-button.tsx
@@ -7,7 +7,6 @@ import { createColorClasses } from '@utils/theme';
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
 import type { DatetimePresentation } from '../datetime/datetime-interface';
-import { getToday } from '../datetime/utils/data';
 import { getLocalizedDateTime, getLocalizedTime } from '../datetime/utils/format';
 import { getHourCycle } from '../datetime/utils/helpers';
 import { parseDate } from '../datetime/utils/parse';
@@ -189,7 +188,7 @@ export class DatetimeButton implements ComponentInterface {
    * ion-datetime and then format it according
    * to the locale specified on ion-datetime.
    */
-  private setDateTimeText = () => {
+  private setDateTimeText = async () => {
     const { datetimeEl, datetimePresentation } = this;
 
     if (!datetimeEl) {
@@ -201,10 +200,12 @@ export class DatetimeButton implements ComponentInterface {
     const parsedValues = this.getParsedDateValues(value);
 
     /**
-     * Both ion-datetime and ion-datetime-button default
-     * to today's date and time if no value is set.
+     * Both ion-datetime and ion-datetime-button default to today's date and
+     * time if no value is set. We read the datetime's computed default so the
+     * button respects the same constraints (min, max, minuteValues, etc.) that
+     * the datetime applies to its own fallback, instead of using a raw "now".
      */
-    const parsedDatetimes = parseDate(parsedValues.length > 0 ? parsedValues : [getToday()]);
+    const parsedDatetimes = parsedValues.length > 0 ? parseDate(parsedValues) : [await datetimeEl.getDefaultPart()];
 
     if (!parsedDatetimes) {
       return;
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 35088bce4a7..ca18c8a5e97 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
@@ -344,4 +344,146 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
       await expect(page.locator('ion-datetime-button')).toContainText('Thu, November 02 01:22 AM');
     });
   });
+
+  test.describe(title('datetime-button: datetime constraints'), () => {
+    const fixedTime = new Date('2026-06-18T17:54:54.518Z');
+
+    const dateFormat = new Intl.DateTimeFormat('en-US', {
+      weekday: 'short',
+      month: 'long',
+      day: '2-digit',
+    });
+    const timeFormat = new Intl.DateTimeFormat('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+
+    test.beforeEach(async ({ page }) => {
+      await page.clock.setFixedTime(fixedTime);
+    });
+
+    test('should default to exact current time with no constraints', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30183',
+      });
+
+      await page.setContent(
+        `
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" presentation="date-time" locale="en-US"></ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.formatOptions = {
+            date: {
+              weekday: "short",
+              month: "long",
+              day: "2-digit"
+            },
+            time: {
+              hour: "2-digit",
+              minute: "2-digit"
+            }
+          }
+        </script>
+      `,
+        config
+      );
+      await page.locator('.datetime-ready').waitFor();
+
+      await expect(page.locator('#date-button')).toContainText(dateFormat.format(fixedTime));
+      await expect(page.locator('#time-button')).toContainText(timeFormat.format(fixedTime));
+    });
+
+    test('should obey minuteValues constraint', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30183',
+      });
+
+      await page.setContent(
+        `
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" presentation="time" locale="en-US" minute-values="0"></ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.formatOptions = {
+            time: {
+              hour: "2-digit",
+              minute: "2-digit"
+            }
+          }
+        </script>
+      `,
+        config
+      );
+      await page.locator('.datetime-ready').waitFor();
+
+      const expectedTime = new Date(fixedTime);
+      expectedTime.setMinutes(0);
+
+      await expect(page.locator('#time-button')).toContainText(timeFormat.format(expectedTime));
+    });
+
+    test('should obey hourValues constraint', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30183',
+      });
+
+      await page.setContent(
+        `
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" presentation="time" locale="en-US" hour-values="0"></ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.formatOptions = {
+            time: {
+              hour: "2-digit",
+              minute: "2-digit"
+            }
+          }
+        </script>
+      `,
+        config
+      );
+      await page.locator('.datetime-ready').waitFor();
+
+      const expectedTime = new Date(fixedTime);
+      expectedTime.setHours(0);
+
+      await expect(page.locator('#time-button')).toContainText(timeFormat.format(expectedTime));
+    });
+
+    test('should obey monthValues constraint', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30183',
+      });
+
+      await page.setContent(
+        `
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" presentation="date" locale="en-US" month-values="1"></ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.formatOptions = {
+            date: {
+              weekday: "short",
+              month: "long",
+              day: "2-digit"
+            }
+          }
+        </script>
+      `,
+        config
+      );
+      await page.locator('.datetime-ready').waitFor();
+
+      const expectedTime = new Date(fixedTime);
+      expectedTime.setMonth(0);
+
+      await expect(page.locator('#date-button')).toContainText(dateFormat.format(expectedTime));
+    });
+  });
 });
diff --git a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts
index a626dd90855..16050dbbf1b 100644
--- a/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts
+++ b/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts
@@ -1,6 +1,6 @@
 import type { Locator } from '@playwright/test';
 import { expect } from '@playwright/test';
-import type { EventSpy } from '@utils/test/playwright';
+import type { E2EPage, EventSpy } from '@utils/test/playwright';
 import { configs, test } from '@utils/test/playwright';
 
 /**
@@ -207,3 +207,108 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
     });
   });
 });
+
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('datetime-button: reopening modal'), () => {
+    let datetime: Locator;
+    let modal: Locator;
+    let monthYear: Locator;
+    let ionModalDidPresent: EventSpy;
+    let ionModalDidDismiss: EventSpy;
+
+    test.beforeEach(async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+
+        <ion-modal>
+          <ion-datetime id="datetime" locale="en-US" value="2022-03-15T16:30:00"></ion-datetime>
+        </ion-modal>
+      `,
+        config
+      );
+
+      datetime = page.locator('ion-datetime');
+      modal = page.locator('ion-modal');
+      monthYear = datetime.locator('.calendar-month-year');
+      ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+    });
+
+    const openModal = async (page: E2EPage) => {
+      await page.click('#date-button');
+      await ionModalDidPresent.next();
+      await page.locator('ion-datetime.datetime-ready').waitFor();
+      await page.waitForChanges();
+    };
+
+    const dismissModal = async () => {
+      await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
+      await ionModalDidDismiss.next();
+    };
+
+    test('should keep the selected day in view when reopened', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/31155',
+      });
+
+      const selectedDay = datetime.locator('.calendar-day-active');
+
+      await openModal(page);
+      await expect(selectedDay).toBeInViewport();
+
+      await dismissModal();
+      await openModal(page);
+
+      await expect(selectedDay).toBeInViewport();
+    });
+
+    test('should navigate to the previous month when reopened', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/31155',
+      });
+
+      await openModal(page);
+      await dismissModal();
+      await openModal(page);
+
+      await expect(monthYear).toHaveText('March 2022');
+
+      await datetime.locator('.calendar-next-prev ion-button').first().click();
+
+      await expect(monthYear).toHaveText('February 2022');
+    });
+
+    test('should select a day from the month shown in the header when reopened', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/31155',
+      });
+
+      await openModal(page);
+      await dismissModal();
+      await openModal(page);
+
+      await expect(monthYear).toHaveText('March 2022');
+
+      const ionChange = await page.spyOnEvent('ionChange');
+
+      /**
+       * Click the middle of the calendar instead of a day by name so Playwright
+       * doesn't scroll the target into view and hide a wrong scroll position.
+       */
+      const calendarBody = (await datetime.locator('.calendar-body').boundingBox())!;
+      await page.mouse.click(calendarBody.x + calendarBody.width / 2, calendarBody.y + calendarBody.height / 2);
+      await ionChange.next();
+
+      const value = await datetime.evaluate((el: HTMLIonDatetimeElement) => el.value as string);
+      expect(value).toMatch(/^2022-03-/);
+      await expect(monthYear).toHaveText('March 2022');
+    });
+  });
+});
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
index f36cd66718d..fa3ac113890 100644
--- a/core/src/components/datetime/datetime.tsx
+++ b/core/src/components/datetime/datetime.tsx
@@ -8,6 +8,7 @@ import { isRTL } from '@utils/rtl';
 import { createColorClasses } from '@utils/theme';
 import { caretDownSharp, caretUpSharp, chevronBack, chevronDown, chevronForward } from 'ionicons/icons';
 
+import { config } from '../../global/config';
 import { getIonMode } from '../../global/ionic-global';
 import type { Color, Mode, StyleEventDetail } from '../../interface';
 
@@ -139,6 +140,10 @@ export class Datetime implements ComponentInterface {
    * Set true only by `visibleCallback`. Lets `hiddenCallback` ignore the
    * synthetic "not intersecting" entry IntersectionObserver fires on
    * `observe()` when the host mounts offscreen.
+   *
+   * Don't reset this in `disconnectedCallback`. Overlays disconnect and
+   * reconnect the host without re-creating the observers, so a reset there
+   * makes `hiddenCallback` miss the dismissal.
    */
   private hasBeenIntersecting = false;
 
@@ -178,7 +183,7 @@ export class Datetime implements ComponentInterface {
   /**
    * The color to use from your application's color palette.
    * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-   * For more information on colors, see [theming](/docs/theming/basics).
+   * For more information on colors, refer to [theming](/docs/theming/basics).
    */
   @Prop() color?: Color = 'primary';
 
@@ -604,6 +609,18 @@ export class Datetime implements ComponentInterface {
     }
   }
 
+  /**
+   * Returns the default parts the datetime falls back to when no value is set:
+   * today's date and time snapped to the closest value allowed by the
+   * component's constraints (`min`, `max`, and the `*Values` props).
+   *
+   * @internal
+   */
+  @Method()
+  async getDefaultPart(): Promise<DatetimeParts> {
+    return this.defaultParts;
+  }
+
   private warnIfIncorrectValueUsage = () => {
     const { multiple, value } = this;
     if (!multiple && Array.isArray(value)) {
@@ -1103,7 +1120,6 @@ export class Datetime implements ComponentInterface {
       this.clearFocusVisible = undefined;
     }
     this.loadTimeoutCleanup();
-    this.hasBeenIntersecting = false;
   }
 
   /**
@@ -1555,10 +1571,11 @@ export class Datetime implements ComponentInterface {
 
     const left = (nextMonth as HTMLElement).offsetWidth * 2;
 
+    const scrollMode = config.getBoolean('animated', true) ? 'smooth' : 'instant';
     calendarBodyRef.scrollTo({
       top: 0,
       left: left * (isRTL(this.el) ? -1 : 1),
-      behavior: 'smooth',
+      behavior: scrollMode,
     });
   };
 
@@ -1575,10 +1592,11 @@ export class Datetime implements ComponentInterface {
 
     const left = (prevMonth as HTMLElement).offsetWidth * 2;
 
+    const scrollMode = config.getBoolean('animated', true) ? 'smooth' : 'instant';
     calendarBodyRef.scrollTo({
       top: 0,
       left: left * (isRTL(this.el) ? 1 : -1),
-      behavior: 'smooth',
+      behavior: scrollMode,
     });
   };
 
@@ -1951,10 +1969,13 @@ export class Datetime implements ComponentInterface {
             month: ev.detail.value,
           });
 
-          this.setActiveParts({
-            ...activePart,
-            month: ev.detail.value,
-          });
+          // Month wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
+          if (!this.multiple) {
+            this.setActiveParts({
+              ...activePart,
+              month: ev.detail.value,
+            });
+          }
 
           ev.stopPropagation();
         }}
@@ -1995,10 +2016,13 @@ export class Datetime implements ComponentInterface {
             year: ev.detail.value,
           });
 
-          this.setActiveParts({
-            ...activePart,
-            year: ev.detail.value,
-          });
+          // Year wheel is navigation-only in multi-select mode as a fix for https://github.com/ionic-team/ionic-framework/issues/29673
+          if (!this.multiple) {
+            this.setActiveParts({
+              ...activePart,
+              year: ev.detail.value,
+            });
+          }
 
           ev.stopPropagation();
         }}
diff --git a/core/src/components/datetime/test/basic/datetime.e2e.ts b/core/src/components/datetime/test/basic/datetime.e2e.ts
index bbc6033374f..3d8c8f111f3 100644
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts
@@ -319,9 +319,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
       await expect(calendarHeader).toHaveText(/June 2022/);
     });
-    test('should not re-render if swipe is in progress', async ({ page, skip }) => {
-      skip.browser('webkit', 'Wheel is not available in WebKit');
-
+    test('should not re-render while a swipe is in progress', async ({ page }) => {
       await page.setContent(
         `
         <ion-datetime value="2022-05-03"></ion-datetime>
@@ -336,15 +334,19 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
 
       await expect(calendarHeader).toHaveText(/May 2022/);
 
-      const box = await calendarBody.boundingBox();
+      // Scroll the calendar a little, but not far enough to land on the next
+      // month. This mimics a swipe that the user started but did not finish.
+      await calendarBody.evaluate((el: HTMLElement) => {
+        const monthWidth = el.querySelector('.calendar-month')!.clientWidth;
+        el.scrollLeft = monthWidth + 30;
+      });
 
-      if (box) {
-        await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
-        await page.mouse.wheel(-50, 0);
-        await page.waitForChanges();
+      // Give the component time to react to the scroll
+      await page.waitForChanges();
 
-        await expect(calendarHeader).toHaveText(/May 2022/);
-      }
+      // Because the calendar never settled on a new month, the header should
+      // still show the original month.
+      await expect(calendarHeader).toHaveText(/May 2022/);
     });
   });
 });
@@ -814,3 +816,83 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
     });
   });
 });
+
+/**
+ * This behavior does not differ across
+ * modes/directions.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('datetime: animated'), () => {
+    test('next month button should instantly replace month view when animations are disabled', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30484',
+      });
+
+      await page.addInitScript(() => {
+        (window as any).__scrollToCalls = [];
+        const original = Element.prototype.scrollTo;
+        Element.prototype.scrollTo = function (this: Element, ...args: any[]) {
+          if (this.classList?.contains('calendar-body')) {
+            (window as any).__scrollToCalls.push(args[0]);
+          }
+          return (original as any).apply(this, args);
+        };
+      });
+
+      await page.setContent(
+        `
+              <script>window.Ionic = {config: {animated: false}};</script>
+              <ion-datetime value="2026-06-19T16:08:25.697Z"></ion-datetime>
+              `,
+        config
+      );
+      await page.locator('.datetime-ready').waitFor();
+
+      const nextMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button').nth(1);
+      await nextMonthButton.click();
+      await page.waitForChanges();
+
+      const scrollCalls = await page.evaluate(() => (window as any).__scrollToCalls);
+
+      expect(scrollCalls.length).toBeGreaterThan(0);
+      expect(scrollCalls[0].behavior).toBe('instant');
+    });
+
+    test('previous month button should instantly replace month view when animations are disabled', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30484',
+      });
+
+      await page.addInitScript(() => {
+        (window as any).__scrollToCalls = [];
+        const original = Element.prototype.scrollTo;
+        Element.prototype.scrollTo = function (this: Element, ...args: any[]) {
+          if (this.classList?.contains('calendar-body')) {
+            (window as any).__scrollToCalls.push(args[0]);
+          }
+          return (original as any).apply(this, args);
+        };
+      });
+
+      await page.setContent(
+        `
+              <script>window.Ionic = {config: {animated: false}};</script>
+              <ion-datetime value="2026-06-19T16:08:25.697Z"></ion-datetime>
+              `,
+        config
+      );
+      await page.locator('.datetime-ready').waitFor();
+
+      const prevMonthButton = page.locator('ion-datetime .calendar-next-prev ion-button').nth(0);
+      await prevMonthButton.click();
+      await page.waitForChanges();
+
+      const scrollCalls = await page.evaluate(() => (window as any).__scrollToCalls);
+
+      expect(scrollCalls.length).toBeGreaterThan(0);
+      expect(scrollCalls[0].behavior).toBe('instant');
+    });
+  });
+});
diff --git a/core/src/components/datetime/test/multiple/datetime.e2e.ts b/core/src/components/datetime/test/multiple/datetime.e2e.ts
index 55a386f6f27..22fada77bda 100644
--- a/core/src/components/datetime/test/multiple/datetime.e2e.ts
+++ b/core/src/components/datetime/test/multiple/datetime.e2e.ts
@@ -337,3 +337,124 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
     });
   });
 });
+
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(
+    title('datetime: interaction between month/year wheels and selected date(s) with different values of multiple'),
+    () => {
+      test('using month wheel should change selection when multiple=false', async ({ page }, testInfo) => {
+        testInfo.annotations.push({
+          type: 'issue',
+          description: 'https://github.com/ionic-team/ionic-framework/issues/29673',
+        });
+
+        await page.setContent(`<ion-datetime value="2026-06-26T10:36:00" locale="en-US"></ion-datetime>`, config);
+        const datetime = page.locator('ion-datetime');
+
+        await page.waitForSelector('.datetime-ready');
+
+        const dropdownButton = page.locator('.calendar-month-year-toggle');
+        await dropdownButton.click();
+        await page.waitForChanges();
+
+        const monthOption = page.locator('.month-column ion-picker-column-option').nth(0);
+        await monthOption.click();
+        await page.waitForChanges();
+
+        await expect(datetime).toHaveJSProperty('value', '2026-01-26T10:36:00');
+      });
+
+      test('using month wheel should not change selection when multiple=true', async ({ page }, testInfo) => {
+        testInfo.annotations.push({
+          type: 'issue',
+          description: 'https://github.com/ionic-team/ionic-framework/issues/29673',
+        });
+
+        await page.setContent(
+          `
+        <ion-datetime multiple locale="en-US"></ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.value = [ "2026-06-26T10:36:00", "2026-06-28T10:36:00", "2026-01-01T10:36:00" ];
+        </script>
+      `,
+          config
+        );
+        const datetime = page.locator('ion-datetime');
+
+        await page.waitForSelector('.datetime-ready');
+
+        const dropdownButton = page.locator('.calendar-month-year-toggle');
+        await dropdownButton.click();
+        await page.waitForChanges();
+
+        const monthOption = page.locator('.month-column ion-picker-column-option').nth(0);
+        await monthOption.click();
+        await page.waitForChanges();
+
+        await expect(datetime).toHaveJSProperty('value', [
+          '2026-06-26T10:36:00',
+          '2026-06-28T10:36:00',
+          '2026-01-01T10:36:00',
+        ]);
+      });
+
+      test('using year wheel should change selection when multiple=false', async ({ page }, testInfo) => {
+        testInfo.annotations.push({
+          type: 'issue',
+          description: 'https://github.com/ionic-team/ionic-framework/issues/29673',
+        });
+
+        await page.setContent(`<ion-datetime value="2026-06-26T10:36:00" locale="en-US"></ion-datetime>`, config);
+        const datetime = page.locator('ion-datetime');
+
+        await page.waitForSelector('.datetime-ready');
+
+        const dropdownButton = page.locator('.calendar-month-year-toggle');
+        await dropdownButton.click();
+        await page.waitForChanges();
+
+        const yearOption = page.locator('.year-column ion-picker-column-option').nth(0);
+        await yearOption.click();
+        await page.waitForChanges();
+
+        await expect(datetime).toHaveJSProperty('value', '1926-06-26T10:36:00');
+      });
+
+      test('using year wheel should not change selection when multiple=true', async ({ page }, testInfo) => {
+        testInfo.annotations.push({
+          type: 'issue',
+          description: 'https://github.com/ionic-team/ionic-framework/issues/29673',
+        });
+
+        await page.setContent(
+          `
+        <ion-datetime multiple locale="en-US"></ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.value = [ "2026-06-26T10:36:00", "2026-06-28T10:36:00", "2026-01-01T10:36:00" ];
+        </script>
+      `,
+          config
+        );
+        const datetime = page.locator('ion-datetime');
+
+        await page.waitForSelector('.datetime-ready');
+
+        const dropdownButton = page.locator('.calendar-month-year-toggle');
+        await dropdownButton.click();
+        await page.waitForChanges();
+
+        const yearOption = page.locator('.year-column ion-picker-column-option').nth(0);
+        await yearOption.click();
+        await page.waitForChanges();
+
+        await expect(datetime).toHaveJSProperty('value', [
+          '2026-06-26T10:36:00',
+          '2026-06-28T10:36:00',
+          '2026-01-01T10:36:00',
+        ]);
+      });
+    }
+  );
+});
diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx
index 2a7a4a6198a..ecb1f57c784 100755
--- a/core/src/components/fab-button/fab-button.tsx
+++ b/core/src/components/fab-button/fab-button.tsx
@@ -1,8 +1,9 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
+import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
 import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
-import { inheritAriaAttributes } from '@utils/helpers';
+import { inheritAriaAttributes, hasShadowDom } from '@utils/helpers';
 import type { Attributes } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
 import { createColorClasses, hostContext, openURL } from '@utils/theme';
 import { close } from 'ionicons/icons';
 
@@ -26,6 +27,8 @@ import type { RouterDirection } from '../router/utils/interface';
 })
 export class FabButton implements ComponentInterface, AnchorInterface, ButtonInterface {
   private fab: HTMLIonFabElement | null = null;
+  private formButtonEl: HTMLButtonElement | null = null;
+  private formEl: HTMLFormElement | null = null;
   private inheritedAttributes: Attributes = {};
 
   @Element() el!: HTMLElement;
@@ -46,6 +49,13 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
    * If `true`, the user cannot interact with the fab button.
    */
   @Prop() disabled = false;
+  @Watch('disabled')
+  disabledChanged() {
+    const { disabled } = this;
+    if (this.formButtonEl) {
+      this.formButtonEl.disabled = disabled;
+    }
+  }
 
   /**
    * This attribute instructs browsers to download a URL instead of navigating to
@@ -103,6 +113,11 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
    */
   @Prop() type: 'submit' | 'reset' | 'button' = 'button';
 
+  /**
+   * The HTML form element or form element id. Used to submit a form when the button is not a child of the form.
+   */
+  @Prop() form?: string | HTMLFormElement;
+
   /**
    * The size of the button. Set this to `small` in order to have a mini fab button.
    */
@@ -137,27 +152,96 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
     this.ionBlur.emit();
   };
 
-  private onClick = () => {
-    const { fab } = this;
-    if (!fab) {
-      return;
+  private onClick = (ev: Event) => {
+    const { el, fab } = this;
+    if (this.type !== 'button' && hasShadowDom(el)) {
+      this.submitForm(ev);
+    }
+    if (fab) {
+      fab.toggle();
     }
-
-    fab.toggle();
   };
 
+  /**
+   * The native button rendered inside `ion-fab-button` is in the Shadow DOM and
+   * does not participate in form submission, so a hidden native button is added
+   * to the associated form and clicked instead.
+   */
+  private renderHiddenButton() {
+    const formEl = (this.formEl = this.findForm());
+    if (formEl) {
+      const { formButtonEl } = this;
+
+      // Reuse the existing hidden button, syncing values that changed since it was created.
+      if (formButtonEl !== null && formEl.contains(formButtonEl)) {
+        formButtonEl.disabled = this.disabled;
+        formButtonEl.type = this.type;
+        return;
+      }
+
+      const newFormButtonEl = (this.formButtonEl = document.createElement('button'));
+      newFormButtonEl.type = this.type;
+      newFormButtonEl.style.display = 'none';
+      newFormButtonEl.disabled = this.disabled;
+      formEl.appendChild(newFormButtonEl);
+    }
+  }
+
+  // TODO(FW-7663): share the hidden button and form lookup with ion-button
+  private findForm(): HTMLFormElement | null {
+    const { form } = this;
+    if (form instanceof HTMLFormElement) {
+      return form;
+    }
+    if (typeof form === 'string') {
+      const el: HTMLElement | null = document.getElementById(form);
+      if (el) {
+        if (el instanceof HTMLFormElement) {
+          return el;
+        } else {
+          printIonWarning(
+            `[ion-fab-button] - Form with selector: "#${form}" could not be found. Verify that the id is attached to a <form> element.`,
+            this.el
+          );
+          return null;
+        }
+      } else {
+        printIonWarning(
+          `[ion-fab-button] - Form with selector: "#${form}" could not be found. Verify that the id is correct and the form is rendered in the DOM.`,
+          this.el
+        );
+        return null;
+      }
+    }
+    if (form !== undefined) {
+      printIonWarning(
+        `[ion-fab-button] - The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.`,
+        this.el
+      );
+      return null;
+    }
+    return this.el.closest('form');
+  }
+
+  private submitForm(ev: Event) {
+    if (this.formEl && this.formButtonEl) {
+      ev.preventDefault();
+      this.formButtonEl.click();
+    }
+  }
+
   componentWillLoad() {
     this.inheritedAttributes = inheritAriaAttributes(this.el);
   }
 
   render() {
-    const { el, disabled, color, href, activated, show, translucent, size, inheritedAttributes } = this;
+    const { el, disabled, color, href, activated, show, translucent, size, inheritedAttributes, type } = this;
     const inList = hostContext('ion-fab-list', el);
     const mode = getIonMode(this);
     const TagType = href === undefined ? 'button' : ('a' as any);
     const attrs =
       TagType === 'button'
-        ? { type: this.type }
+        ? { type }
         : {
             download: this.download,
             href,
@@ -165,6 +249,14 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
             target: this.target,
           };
 
+    /**
+     * The hidden button is created during render so that setting `type` or
+     * `form` after the component loads still adds it to the form.
+     */
+    if (type !== 'button') {
+      this.renderHiddenButton();
+    }
+
     return (
       <Host
         onClick={this.onClick}
@@ -189,7 +281,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
           disabled={disabled}
           onFocus={this.onFocus}
           onBlur={this.onBlur}
-          onClick={(ev: Event) => openURL(href, ev, this.routerDirection, this.routerAnimation)}
+          onClick={(ev: Event) => type === 'button' && openURL(href, ev, this.routerDirection, this.routerAnimation)}
           {...inheritedAttributes}
         >
           <ion-icon
diff --git a/core/src/components/fab-button/test/form/fab-button.e2e.ts b/core/src/components/fab-button/test/form/fab-button.e2e.ts
new file mode 100644
index 00000000000..62559b0cb29
--- /dev/null
+++ b/core/src/components/fab-button/test/form/fab-button.e2e.ts
@@ -0,0 +1,328 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * Form submission does not vary across modes or directions.
+ */
+configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) => {
+  test.describe(title('fab-button: form'), () => {
+    test.describe('fab-button: submit functionality', () => {
+      test('should submit the closest form', async ({ page }, testInfo) => {
+        testInfo.annotations.push({
+          type: 'issue',
+          description: 'https://github.com/ionic-team/ionic-framework/issues/18550',
+        });
+
+        await page.setContent(
+          `
+          <form>
+            <ion-fab-button type="submit">Submit</ion-fab-button>
+          </form>
+        `,
+          config
+        );
+
+        const submitEvent = await page.spyOnEvent('submit');
+
+        await page.click('ion-fab-button');
+
+        expect(submitEvent).toHaveReceivedEvent();
+      });
+
+      test('should submit the form by id', async ({ page }) => {
+        await page.setContent(
+          `
+          <form id="myForm"></form>
+          <ion-fab-button form="myForm" type="submit">Submit</ion-fab-button>
+        `,
+          config
+        );
+
+        const submitEvent = await page.spyOnEvent('submit');
+
+        await page.click('ion-fab-button');
+
+        expect(submitEvent).toHaveReceivedEvent();
+      });
+
+      test('should submit the form by reference', async ({ page }) => {
+        await page.setContent(
+          `
+          <form></form>
+          <ion-fab-button type="submit">Submit</ion-fab-button>
+          <script>
+            const form = document.querySelector('form');
+            const button = document.querySelector('ion-fab-button');
+            button.form = form;
+          </script>
+        `,
+          config
+        );
+
+        const submitEvent = await page.spyOnEvent('submit');
+
+        await page.click('ion-fab-button');
+
+        expect(submitEvent).toHaveReceivedEvent();
+      });
+
+      test('should submit the closest form by pressing the `enter` key on a form input', async ({ page }) => {
+        /**
+         * Two inputs are used because a single-field form with no submit button
+         * submits implicitly on "Enter", which would pass without the hidden button.
+         */
+        await page.setContent(
+          `
+          <form>
+            <input type="text" />
+            <input type="text" />
+            <ion-fab-button type="submit">Submit</ion-fab-button>
+          </form>
+        `,
+          config
+        );
+
+        const submitEvent = await page.spyOnEvent('submit');
+
+        await page.press('input', 'Enter');
+
+        expect(submitEvent).toHaveReceivedEvent();
+      });
+
+      test('should not submit the closest form when button is disabled', async ({ page }) => {
+        await page.setContent(
+          `
+          <form>
+            <input type="text" />
+            <ion-fab-button type="submit" disabled>Submit</ion-fab-button>
+          </form>
+        `,
+          config
+        );
+
+        const submitEvent = await page.spyOnEvent('submit');
+
+        await page.press('input', 'Enter');
+
+        expect(submitEvent).not.toHaveReceivedEvent();
+      });
+
+      test('should submit the form by id when form is set async', async ({ page }) => {
+        await page.setContent(
+          `
+          <form id="myForm"></form>
+          <ion-fab-button type="submit">Submit</ion-fab-button>
+        `,
+          config
+        );
+
+        const fabButton = page.locator('ion-fab-button');
+        await fabButton.evaluate((el: HTMLIonFabButtonElement) => (el.form = 'myForm'));
+        await page.waitForChanges();
+
+        const submitEvent = await page.spyOnEvent('submit');
+
+        await page.click('ion-fab-button');
+
+        expect(submitEvent).toHaveReceivedEvent();
+      });
+
+      test('should not submit the form after disabled is set async', async ({ page }) => {
+        /**
+         * A single input is used so the browser attempts implicit submission on
+         * "Enter", which is only suppressed when the hidden button is disabled.
+         */
+        await page.setContent(
+          `
+          <form>
+            <input type="text" />
+            <ion-fab-button type="submit">Submit</ion-fab-button>
+          </form>
+        `,
+          config
+        );
+
+        const fabButton = page.locator('ion-fab-button');
+        await fabButton.evaluate((el: HTMLIonFabButtonElement) => (el.disabled = true));
+        await page.waitForChanges();
+
+        const submitEvent = await page.spyOnEvent('submit');
+
+        await page.press('input', 'Enter');
+
+        expect(submitEvent).not.toHaveReceivedEvent();
+      });
+
+      test('should not submit the closest form when type is the default', async ({ page }) => {
+        await page.setContent(
+          `
+          <form>
+            <input type="text" />
+            <ion-fab-button>Click</ion-fab-button>
+          </form>
+        `,
+          config
+        );
+
+        const submitEvent = await page.spyOnEvent('submit');
+
+        await page.click('ion-fab-button');
+
+        expect(submitEvent).not.toHaveReceivedEvent();
+      });
+
+      test('should submit the closest form and toggle the fab', async ({ page }) => {
+        await page.setContent(
+          `
+          <form onsubmit="return false">
+            <ion-fab>
+              <ion-fab-button type="submit">Submit</ion-fab-button>
+              <ion-fab-list side="top">
+                <ion-fab-button>Item</ion-fab-button>
+              </ion-fab-list>
+            </ion-fab>
+          </form>
+        `,
+          config
+        );
+
+        const submitEvent = await page.spyOnEvent('submit');
+
+        await page.click('ion-fab > ion-fab-button');
+
+        expect(submitEvent).toHaveReceivedEvent();
+        await expect(page.locator('ion-fab')).toHaveJSProperty('activated', true);
+      });
+
+      test('should submit the form when href is also set', async ({ page }) => {
+        await page.setContent(
+          `
+          <form onsubmit="return false">
+            <ion-fab-button href="#navigated" type="submit">Submit</ion-fab-button>
+          </form>
+        `,
+          config
+        );
+
+        const submitEvent = await page.spyOnEvent('submit');
+
+        await page.click('ion-fab-button');
+
+        expect(submitEvent).toHaveReceivedEvent();
+        expect(await page.evaluate(() => window.location.hash)).not.toBe('#navigated');
+      });
+    });
+
+    test.describe('fab-button: reset functionality', () => {
+      test('should reset the form', async ({ page }) => {
+        await page.setContent(
+          `
+          <form>
+            <input type="text" value="initial" />
+            <ion-fab-button type="reset">Reset</ion-fab-button>
+          </form>
+        `,
+          config
+        );
+
+        const input = page.locator('input');
+        await input.fill('changed');
+        expect(await input.inputValue()).toBe('changed');
+
+        await page.click('ion-fab-button');
+
+        expect(await input.inputValue()).toBe('initial');
+      });
+
+      test('should reset the form after type is changed from submit to reset', async ({ page }) => {
+        await page.setContent(
+          `
+          <form>
+            <input type="text" value="initial" />
+            <input type="text" />
+            <ion-fab-button type="submit">Submit</ion-fab-button>
+          </form>
+        `,
+          config
+        );
+
+        const fabButton = page.locator('ion-fab-button');
+        await fabButton.evaluate((el: HTMLIonFabButtonElement) => (el.type = 'reset'));
+        await page.waitForChanges();
+
+        const submitEvent = await page.spyOnEvent('submit');
+
+        const input = page.locator('input').first();
+        await input.fill('changed');
+
+        await page.click('ion-fab-button');
+
+        expect(await input.inputValue()).toBe('initial');
+        expect(submitEvent).not.toHaveReceivedEvent();
+      });
+    });
+  });
+
+  test.describe(title('fab-button: form warnings'), () => {
+    test('form is a string selector', async ({ page }) => {
+      const logs: string[] = [];
+
+      page.on('console', (msg) => {
+        if (msg.type() === 'warning') {
+          logs.push(msg.text());
+        }
+      });
+
+      await page.setContent(`<ion-fab-button type="submit" form="missingForm">Submit</ion-fab-button>`, config);
+
+      expect(logs.length).toBe(1);
+      expect(logs[0]).toContain(
+        '[Ionic Warning]: [ion-fab-button] - Form with selector: "#missingForm" could not be found. Verify that the id is correct and the form is rendered in the DOM.'
+      );
+    });
+
+    test('form id does not belong to a form element', async ({ page }) => {
+      const logs: string[] = [];
+
+      page.on('console', (msg) => {
+        if (msg.type() === 'warning') {
+          logs.push(msg.text());
+        }
+      });
+
+      await page.setContent(
+        `
+        <div id="notAForm"></div>
+        <ion-fab-button type="submit" form="notAForm">Submit</ion-fab-button>
+      `,
+        config
+      );
+
+      expect(logs.length).toBe(1);
+      expect(logs[0]).toContain(
+        '[Ionic Warning]: [ion-fab-button] - Form with selector: "#notAForm" could not be found. Verify that the id is attached to a <form> element.'
+      );
+    });
+
+    test('form is an element reference', async ({ page }) => {
+      const logs: string[] = [];
+
+      page.on('console', (msg) => {
+        if (msg.type() === 'warning') {
+          logs.push(msg.text());
+        }
+      });
+
+      await page.setContent(`<ion-fab-button type="submit">Submit</ion-fab-button>`, config);
+
+      const fabButton = page.locator('ion-fab-button');
+      await fabButton.evaluate((el: HTMLIonFabButtonElement) => ((el as any).form = document.createElement('div')));
+      await page.waitForChanges();
+
+      expect(logs.length).toBe(1);
+      expect(logs[0]).toContain(
+        '[Ionic Warning]: [ion-fab-button] - The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.'
+      );
+    });
+  });
+});
diff --git a/core/src/components/fab-button/test/form/fab-button.spec.ts b/core/src/components/fab-button/test/form/fab-button.spec.ts
new file mode 100644
index 00000000000..4d53161a5fa
--- /dev/null
+++ b/core/src/components/fab-button/test/form/fab-button.spec.ts
@@ -0,0 +1,60 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { FabButton } from '../../fab-button';
+
+describe('FabButton: Hidden Form Button', () => {
+  it('should not add multiple buttons to the form on re-render', async () => {
+    const page = await newSpecPage({
+      components: [FabButton],
+      html: `
+        <form id="my-form"></form>
+        <ion-fab-button form="my-form" type="submit">Submit</ion-fab-button>
+      `,
+    });
+
+    const getButtons = () => {
+      return page.body.querySelectorAll('form button');
+    };
+
+    const fabButton = page.body.querySelector('ion-fab-button')!;
+
+    await page.waitForChanges();
+
+    expect(getButtons().length).toEqual(1);
+
+    // Re-render the component
+    fabButton.color = 'danger';
+    await page.waitForChanges();
+
+    expect(getButtons().length).toEqual(1);
+  });
+
+  it('should sync the type and disabled state to the hidden button', async () => {
+    const page = await newSpecPage({
+      components: [FabButton],
+      html: `
+        <form id="my-form"></form>
+        <ion-fab-button form="my-form" type="submit">Submit</ion-fab-button>
+      `,
+    });
+
+    const getHiddenButton = () => {
+      return page.body.querySelector<HTMLButtonElement>('form button')!;
+    };
+
+    const fabButton = page.body.querySelector('ion-fab-button')!;
+
+    await page.waitForChanges();
+
+    expect(getHiddenButton().type).toEqual('submit');
+    expect(getHiddenButton().disabled).toEqual(false);
+
+    fabButton.type = 'reset';
+    fabButton.disabled = true;
+    await page.waitForChanges();
+
+    expect(page.body.querySelectorAll('form button').length).toEqual(1);
+    expect(getHiddenButton().type).toEqual('reset');
+    expect(getHiddenButton().disabled).toEqual(true);
+  });
+});
diff --git a/core/src/components/fab-button/test/form/index.html b/core/src/components/fab-button/test/form/index.html
new file mode 100644
index 00000000000..652f986129a
--- /dev/null
+++ b/core/src/components/fab-button/test/form/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>FAB Button - Form Submit</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>FAB Button - Form Submit</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding" id="content">
+        <p>The FAB button below is inside the form. Clicking it should submit the form.</p>
+        <form onsubmit="handleSubmit(event)">
+          <ion-list>
+            <ion-item>
+              <ion-input label="Name" name="name" required placeholder="Enter name"></ion-input>
+            </ion-item>
+          </ion-list>
+
+          <ion-fab-button type="submit">
+            <ion-icon name="cloud-upload-outline"></ion-icon>
+          </ion-fab-button>
+        </form>
+
+        <br /><br />
+
+        <p>The FAB button below is outside the form but linked by id. Clicking it should also submit the form.</p>
+        <form id="outside-form" onsubmit="handleSubmit(event)">
+          <ion-list>
+            <ion-item>
+              <ion-input label="Email" name="email" type="email" required placeholder="Enter email"></ion-input>
+            </ion-item>
+          </ion-list>
+        </form>
+
+        <ion-fab-button form="outside-form" type="submit">
+          <ion-icon name="checkmark-outline"></ion-icon>
+        </ion-fab-button>
+
+        <p>
+          The fixed FAB below submits the form above it. A fixed FAB has to be a direct child of
+          <code>ion-content</code> for <code>slot="fixed"</code> to apply, so it cannot be nested in the form and needs
+          <code>form</code> to target it.
+        </p>
+
+        <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+          <ion-fab-button form="outside-form" type="submit">
+            <ion-icon name="send-outline"></ion-icon>
+          </ion-fab-button>
+        </ion-fab>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      function handleSubmit(event) {
+        event.preventDefault();
+        console.log('Form submitted!', event.target);
+        alert('Form submitted! Check console for details.');
+      }
+    </script>
+  </body>
+</html>
diff --git a/core/src/components/input-otp/input-otp.tsx b/core/src/components/input-otp/input-otp.tsx
index c6b4f394599..7c46ca59d42 100644
--- a/core/src/components/input-otp/input-otp.tsx
+++ b/core/src/components/input-otp/input-otp.tsx
@@ -1,11 +1,10 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Fragment, Host, Prop, State, h, Watch } from '@stencil/core';
+import { Component, Element, Event, Fragment, Host, Method, Prop, State, h, Watch } from '@stencil/core';
 import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes } from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
 import { isRTL } from '@utils/rtl';
 import { createColorClasses } from '@utils/theme';
-import { Method } from 'ionicons/dist/types/stencil-public-runtime';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { Color } from '../../interface';
diff --git a/core/src/components/input/test/a11y/input.e2e.ts-snapshots/input-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/input/test/a11y/input.e2e.ts-snapshots/input-scale-ios-ltr-Mobile-Chrome-linux.png
index cd456e8fae3..2519546bcd4 100644
Binary files a/core/src/components/input/test/a11y/input.e2e.ts-snapshots/input-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/input/test/a11y/input.e2e.ts-snapshots/input-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-ios-ltr-Mobile-Chrome-linux.png
index 97a7d364640..97c5195ac65 100644
Binary files a/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item-sliding/test/a11y/item-sliding.e2e.ts-snapshots/item-sliding-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss
index b17649265db..e51b931c610 100644
--- a/core/src/components/item/item.scss
+++ b/core/src/components/item/item.scss
@@ -369,7 +369,10 @@ a {
 
   text-overflow: ellipsis;
 
+  // Makes the wrapper a scroll container, which zeroes its automatic minimum
+  // size and lets long labels ellipsize
   overflow: inherit;
+
   box-sizing: border-box;
 }
 
@@ -384,6 +387,17 @@ a {
   flex-direction: column;
 }
 
+// Item Focus Indicator Room
+// --------------------------------------------------
+// Widens the clip boundary so a focus indicator on a control in the default
+// slot isn't cut off. Scoped because the wider painted box overlaps end slot
+// content on items with nothing overhanging
+
+:host(.item-focus-indicator-room) .input-wrapper {
+  @include margin-horizontal(-$item-input-focus-indicator-room);
+  @include padding-horizontal($item-input-focus-indicator-room);
+}
+
 // Item w/ Multiple Inputs
 // --------------------------------------------------
 // Multiple inputs in an item should have the input
@@ -415,4 +429,3 @@ a {
 ion-ripple-effect {
   color: var(--ripple-color);
 }
-
diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx
index 9e268e972f8..45eea6867d3 100644
--- a/core/src/components/item/item.tsx
+++ b/core/src/components/item/item.tsx
@@ -1,5 +1,5 @@
 import type { ComponentInterface } from '@stencil/core';
-import { Component, Element, Host, Listen, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
+import { Build, Component, Element, Host, Listen, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
 import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
 import type { Attributes } from '@utils/helpers';
 import { inheritAttributes, raf } from '@utils/helpers';
@@ -10,6 +10,8 @@ import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color, CssClassMap, StyleEventDetail } from '../../interface';
 import type { RouterDirection } from '../router/utils/interface';
 
+const INDICATOR_CONTROL_SELECTOR = 'ion-checkbox, ion-radio, ion-toggle';
+
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
@@ -34,12 +36,15 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
   private labelColorStyles = {};
   private itemStyles = new Map<string, CssClassMap>();
   private inheritedAriaAttributes: Attributes = {};
+  private indicatorControlObserver?: MutationObserver;
+  private didLoad = false;
 
   @Element() el!: HTMLIonItemElement;
 
   @State() multipleInputs = false;
   @State() focusable = true;
   @State() isInteractive = false;
+  @State() hasSlottedIndicatorControl = false;
 
   /**
    * The color to use from your application's color palette.
@@ -166,6 +171,15 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
 
   connectedCallback() {
     this.hasStartEl();
+
+    /**
+     * `componentDidLoad` doesn't run again when the item is moved, so re-arm the
+     * observer and re-read the light DOM, which may have changed while detached.
+     */
+    if (this.didLoad) {
+      this.watchForIndicatorControls();
+      this.updateInteractivityOnSlotChange();
+    }
   }
 
   componentWillLoad() {
@@ -176,8 +190,19 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
     raf(() => {
       this.setMultipleInputs();
       this.setIsInteractive();
+      this.setHasSlottedIndicatorControl();
       this.focusable = this.isFocusable();
     });
+
+    this.watchForIndicatorControls();
+    this.didLoad = true;
+  }
+
+  disconnectedCallback() {
+    if (this.indicatorControlObserver) {
+      this.indicatorControlObserver.disconnect();
+      this.indicatorControlObserver = undefined;
+    }
   }
 
   private totalNestedInputs() {
@@ -222,10 +247,61 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
     this.isInteractive = covers.length > 0 || inputs.length > 0 || clickables.length > 0;
   }
 
+  /**
+   * `slotchange` only fires for nodes assigned directly to a slot, so a control
+   * inside a slotted wrapper (`<div><ion-toggle>`) never reaches
+   * `updateInteractivityOnSlotChange`. The light DOM is observed instead.
+   *
+   * The callback runs the whole handler because a control below a wrapper can also
+   * make the item multi-input, which is what decides whether the controls draw
+   * their own indicator at all.
+   *
+   * `:host(:has())` would avoid the observer, but the `:has()` fallback in
+   * `core.scss` is still open as FW-6106 and it's unreliable for slotted content
+   * in Android WebView. Worth revisiting when FW-6106 closes.
+   */
+  private watchForIndicatorControls() {
+    if (!Build.isBrowser || typeof MutationObserver === 'undefined') {
+      return;
+    }
+
+    // `Node.moveBefore` relocates the item without either callback firing, so
+    // never leave a previous observer behind
+    this.indicatorControlObserver?.disconnect();
+
+    this.indicatorControlObserver = new MutationObserver((records) => {
+      // The subtree observer also fires for text and hidden input churn, so only
+      // re-read the DOM when a control was added or removed
+      if (records.some(touchesIndicatorControl)) {
+        this.updateInteractivityOnSlotChange();
+      }
+    });
+    this.indicatorControlObserver.observe(this.el, { childList: true, subtree: true });
+  }
+
+  // These controls paint a focus indicator that overhangs their own bounds, and
+  // only the default slot is clipped, so only a control there needs extra room.
+  private setHasSlottedIndicatorControl() {
+    const controls = this.el.querySelectorAll<HTMLElement>(INDICATOR_CONTROL_SELECTOR);
+
+    this.hasSlottedIndicatorControl = Array.from(controls).some((control) => {
+      // The control isn't always a direct child, so walk up to the element the item
+      // slots, which is the one carrying the slot name.
+      let slotted: HTMLElement | null = control;
+
+      while (slotted !== null && slotted.parentElement !== this.el) {
+        slotted = slotted.parentElement;
+      }
+
+      return slotted !== null && !slotted.getAttribute('slot');
+    });
+  }
+
   // slot change listener updates state to reflect how/if item should be interactive
   private updateInteractivityOnSlotChange = () => {
     this.setIsInteractive();
     this.setMultipleInputs();
+    this.setHasSlottedIndicatorControl();
   };
 
   // If the item contains an input including a checkbox, datetime, select, or radio
@@ -361,6 +437,13 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
     const firstInteractiveNeedsPointerCursor =
       firstInteractive !== undefined && !['ION-INPUT', 'ION-TEXTAREA'].includes(firstInteractive.tagName);
 
+    /**
+     * A control in a single-input item defers its indicator to the item, so there's
+     * nothing to clip and nothing to make room for. It draws its own indicator in a
+     * multi-input item, and in a clickable item, which is a second tab stop.
+     */
+    const slottedIndicatorNeedsRoom = this.hasSlottedIndicatorControl && (multipleInputs || this.isClickable());
+
     return (
       <Host
         aria-disabled={ariaDisabled}
@@ -376,6 +459,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
             'item-disabled': disabled,
             'in-list': inList,
             'item-multiple-inputs': this.multipleInputs,
+            'item-focus-indicator-room': slottedIndicatorNeedsRoom,
             'ion-activatable': canActivate,
             'ion-focusable': this.focusable,
             'item-rtl': document.dir === 'rtl',
@@ -414,3 +498,16 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
     );
   }
 }
+
+const isIndicatorControl = (node: Node): boolean => {
+  if (node.nodeType !== Node.ELEMENT_NODE) {
+    return false;
+  }
+
+  const el = node as Element;
+
+  return el.matches(INDICATOR_CONTROL_SELECTOR) || el.querySelector(INDICATOR_CONTROL_SELECTOR) !== null;
+};
+
+const touchesIndicatorControl = (record: MutationRecord): boolean =>
+  Array.from(record.addedNodes).some(isIndicatorControl) || Array.from(record.removedNodes).some(isIndicatorControl);
diff --git a/core/src/components/item/item.vars.scss b/core/src/components/item/item.vars.scss
index d0ebad2ee19..2c48c677f05 100644
--- a/core/src/components/item/item.vars.scss
+++ b/core/src/components/item/item.vars.scss
@@ -2,3 +2,7 @@
 
 // Item
 // --------------------------------------------------
+
+// Room for the focus indicator to paint outside a slotted control. Widest
+// overhang is the iOS radio: a 36px indicator around a 15px icon.
+$item-input-focus-indicator-room: 12px;
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Chrome-linux.png
index c201fda4a0d..4f62e8d5248 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Safari-linux.png
index 6c4731aa58a..675045fb8bd 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Chrome-linux.png
index 258a51ef0d9..88808118bba 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png
index 31188e11458..845742be7ff 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png
index 76aea912c2e..1e5ef5b04c6 100644
Binary files a/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/buttons/item.e2e.ts-snapshots/item-buttons-diff-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Chrome-linux.png
index 8537c8fe151..cb7a98d9657 100644
Binary files a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Safari-linux.png
index 891efa258fb..10618efdeb4 100644
Binary files a/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/colors/item.e2e.ts-snapshots/item-colors-diff-ios-ltr-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
index ed82925d3a4..f07b2a58461 100644
--- a/core/src/components/item/test/item.spec.tsx
+++ b/core/src/components/item/test/item.spec.tsx
@@ -19,4 +19,59 @@ describe('item', () => {
     // Check if it has the expected class that gives the focused styles to the item element
     expect(item).toHaveClass('ion-focusable');
   });
+
+  describe('focus indicator room', () => {
+    const newItemPage = async (html: string) => {
+      const page = await newSpecPage({ components: [Item], html });
+
+      // The slotted-control check runs in a raf after load, so let the frame
+      // callback fire before asserting on the rendered class.
+      await new Promise((resolve) => setTimeout(resolve, 0));
+      await page.waitForChanges();
+
+      return page.body.querySelector('ion-item')!;
+    };
+
+    it('should reserve room for a control in the default slot of a multi-input item', async () => {
+      const item = await newItemPage(
+        `<ion-item><ion-checkbox>One</ion-checkbox><ion-checkbox>Two</ion-checkbox></ion-item>`
+      );
+
+      expect(item).toHaveClass('item-focus-indicator-room');
+    });
+
+    it('should reserve room for a control in the default slot of a clickable item', async () => {
+      const item = await newItemPage(`<ion-item button><ion-toggle>Label</ion-toggle></ion-item>`);
+
+      expect(item).toHaveClass('item-focus-indicator-room');
+    });
+
+    it('should reserve room for a control nested below the slotted element', async () => {
+      const item = await newItemPage(`<ion-item button><div><ion-radio>Label</ion-radio></div></ion-item>`);
+
+      expect(item).toHaveClass('item-focus-indicator-room');
+    });
+
+    // A lone control has the item's input cover and lets the item draw the indicator,
+    // so there's nothing overhanging the wrapper to make room for.
+    it('should not reserve room for a control that defers its indicator to the item', async () => {
+      const item = await newItemPage(`<ion-item><ion-checkbox>Label</ion-checkbox></ion-item>`);
+
+      expect(item).not.toHaveClass('item-focus-indicator-room');
+    });
+
+    it('should not reserve room for controls outside the default slot', async () => {
+      const item = await newItemPage(
+        `<ion-item><ion-toggle slot="start">Start</ion-toggle>Text<ion-toggle slot="end">End</ion-toggle></ion-item>`
+      );
+
+      expect(item).not.toHaveClass('item-focus-indicator-room');
+    });
+
+    it('should not reserve room when no control is slotted', async () => {
+      const item = await newItemPage(`<ion-item><ion-label>Label</ion-label></ion-item>`);
+
+      expect(item).not.toHaveClass('item-focus-indicator-room');
+    });
+  });
 });
diff --git a/core/src/components/item/test/reorder/item.e2e.ts-snapshots/item-reorder-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/reorder/item.e2e.ts-snapshots/item-reorder-diff-ios-ltr-Mobile-Firefox-linux.png
index 1e95a095fee..c47f99b2ff4 100644
Binary files a/core/src/components/item/test/reorder/item.e2e.ts-snapshots/item-reorder-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/reorder/item.e2e.ts-snapshots/item-reorder-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/reorder/item.e2e.ts-snapshots/item-reorder-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/reorder/item.e2e.ts-snapshots/item-reorder-diff-ios-rtl-Mobile-Firefox-linux.png
index 54c0ef144b7..f622b627e21 100644
Binary files a/core/src/components/item/test/reorder/item.e2e.ts-snapshots/item-reorder-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/reorder/item.e2e.ts-snapshots/item-reorder-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/item/test/slotted-inputs/item.e2e.ts b/core/src/components/item/test/slotted-inputs/item.e2e.ts
index 7fcbf4b8b1e..b84dfc50abb 100644
--- a/core/src/components/item/test/slotted-inputs/item.e2e.ts
+++ b/core/src/components/item/test/slotted-inputs/item.e2e.ts
@@ -172,3 +172,64 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     });
   });
 });
+
+/**
+ * This behavior does not vary across modes/directions.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('item: focus indicator room'), () => {
+    test('should reserve room for a control added inside a slotted wrapper', async ({ page }) => {
+      // A control can appear inside an already slotted wrapper after the item renders,
+      // and the item still has to make room for its focus indicator.
+      await page.setContent(
+        `
+        <ion-item button>
+          <div id="wrapper"></div>
+        </ion-item>
+      `,
+        config
+      );
+
+      const item = page.locator('ion-item');
+
+      await expect(item).not.toHaveClass(/item-focus-indicator-room/);
+
+      await page.evaluate(() => {
+        document.querySelector('#wrapper')!.appendChild(document.createElement('ion-toggle'));
+      });
+
+      await expect(item).toHaveClass(/item-focus-indicator-room/);
+
+      await page.evaluate(() => {
+        document.querySelector('ion-toggle')!.remove();
+      });
+
+      await expect(item).not.toHaveClass(/item-focus-indicator-room/);
+    });
+
+    test('should mark the item multi-input when a control is added inside a slotted wrapper', async ({ page }) => {
+      // Whether a control draws its own indicator depends on this class, so it has to
+      // track the same mutations the room does.
+      await page.setContent(
+        `
+        <ion-item>
+          <ion-checkbox>One</ion-checkbox>
+          <div id="wrapper"></div>
+        </ion-item>
+      `,
+        config
+      );
+
+      const item = page.locator('ion-item');
+
+      await expect(item).not.toHaveClass(/item-multiple-inputs/);
+
+      await page.evaluate(() => {
+        document.querySelector('#wrapper')!.appendChild(document.createElement('ion-checkbox'));
+      });
+
+      await expect(item).toHaveClass(/item-multiple-inputs/);
+      await expect(item).toHaveClass(/item-focus-indicator-room/);
+    });
+  });
+});
diff --git a/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-scale-ios-ltr-Mobile-Chrome-linux.png
index a86392a5c6f..e825fe5a140 100644
Binary files a/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/label/test/a11y/label.e2e.ts-snapshots/label-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/label/test/headings/label.e2e.ts-snapshots/item-headings-inherit-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/label/test/headings/label.e2e.ts-snapshots/item-headings-inherit-ios-ltr-Mobile-Chrome-linux.png
index 8c5b00c98d0..6791c79f89e 100644
Binary files a/core/src/components/label/test/headings/label.e2e.ts-snapshots/item-headings-inherit-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/label/test/headings/label.e2e.ts-snapshots/item-headings-inherit-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/loading/test/standalone/index.html b/core/src/components/loading/test/standalone/index.html
index c0826d3f30f..cf3853af58f 100644
--- a/core/src/components/loading/test/standalone/index.html
+++ b/core/src/components/loading/test/standalone/index.html
@@ -14,7 +14,7 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   </head>
   <script type="module">
-    import { loadingController } from '../../../../dist/ionic/index.esm.js';
+    import { loadingController } from '../../../../../dist/ionic/index.esm.js';
     window.loadingController = loadingController;
   </script>
   <body>
diff --git a/core/src/components/menu-button/test/async/index.html b/core/src/components/menu-button/test/async/index.html
index 105b9a3b87a..682673195ba 100644
--- a/core/src/components/menu-button/test/async/index.html
+++ b/core/src/components/menu-button/test/async/index.html
@@ -13,7 +13,7 @@
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
     <script type="module">
-      import { menuController } from '../../../../dist/ionic/index.esm.js';
+      import { menuController } from '../../../../../dist/ionic/index.esm.js';
       window.menuController = menuController;
     </script>
   </head>
diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx
index 4769f609914..4bf4564c40f 100644
--- a/core/src/components/menu/menu.tsx
+++ b/core/src/components/menu/menu.tsx
@@ -150,7 +150,7 @@ export class Menu implements ComponentInterface, MenuI {
 
   @Watch('side')
   protected sideChanged() {
-    this.isEndSide = isEnd(this.side);
+    this.isEndSide = isEnd(this.side, this.el);
     /**
      * Menu direction animation is calculated based on the document direction.
      * If the document direction changes, we need to create a new animation.
@@ -499,7 +499,7 @@ export class Menu implements ComponentInterface, MenuI {
      * Menu direction animation is calculated based on the document direction.
      * If the document direction changes, we need to create a new animation.
      */
-    const isEndSide = isEnd(this.side);
+    const isEndSide = isEnd(this.side, this.el);
     if (width === this.width && this.animation !== undefined && isEndSide === this.isEndSide) {
       return;
     }
diff --git a/core/src/components/menu/test/a11y/index.html b/core/src/components/menu/test/a11y/index.html
index cf67b2133c2..8b0aa68c702 100644
--- a/core/src/components/menu/test/a11y/index.html
+++ b/core/src/components/menu/test/a11y/index.html
@@ -11,7 +11,7 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   </head>
   <script type="module">
-    import { menuController } from '../../../../dist/ionic/index.esm.js';
+    import { menuController } from '../../../../../dist/ionic/index.esm.js';
     window.menuController = menuController;
   </script>
 
diff --git a/core/src/components/menu/test/basic/index.html b/core/src/components/menu/test/basic/index.html
index 4e79a4fbb21..5c11d02859d 100644
--- a/core/src/components/menu/test/basic/index.html
+++ b/core/src/components/menu/test/basic/index.html
@@ -30,7 +30,7 @@
     </style>
   </head>
   <script type="module">
-    import { menuController } from '../../../../dist/ionic/index.esm.js';
+    import { menuController } from '../../../../../dist/ionic/index.esm.js';
     window.menuController = menuController;
   </script>
 
diff --git a/core/src/components/menu/test/multiple/index.html b/core/src/components/menu/test/multiple/index.html
index 9a45a237fa9..d4bcf2dec4e 100644
--- a/core/src/components/menu/test/multiple/index.html
+++ b/core/src/components/menu/test/multiple/index.html
@@ -13,7 +13,7 @@
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
     <script type="module">
-      import { menuController } from '../../../../dist/ionic/index.esm.js';
+      import { menuController } from '../../../../../dist/ionic/index.esm.js';
       window.menuController = menuController;
     </script>
   </head>
diff --git a/core/src/components/menu/test/safe-area/index.html b/core/src/components/menu/test/safe-area/index.html
index 477d5890aa9..64c1a89b6dc 100644
--- a/core/src/components/menu/test/safe-area/index.html
+++ b/core/src/components/menu/test/safe-area/index.html
@@ -13,7 +13,7 @@
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
     <script type="module">
-      import { menuController } from '../../../../dist/ionic/index.esm.js';
+      import { menuController } from '../../../../../dist/ionic/index.esm.js';
       window.menuController = menuController;
     </script>
     <style>
diff --git a/core/src/components/modal/gestures/sheet.ts b/core/src/components/modal/gestures/sheet.ts
index 13dadc34e81..163be3beadd 100644
--- a/core/src/components/modal/gestures/sheet.ts
+++ b/core/src/components/modal/gestures/sheet.ts
@@ -7,7 +7,7 @@ import type { Animation, ModalDragEventDetail } from '../../../interface';
 import type { GestureDetail } from '../../../utils/gesture';
 import { getBackdropValueForSheet } from '../utils';
 
-import { calculateSpringStep, handleCanDismiss } from './utils';
+import { calculateSpringStep, canSwipeOnContent, handleCanDismiss } from './utils';
 
 export interface MoveSheetToBreakpointOptions {
   /**
@@ -82,6 +82,8 @@ export const createSheetGesture = (
   };
 
   const contentEl = baseEl.querySelector('ion-content');
+  // Cache the initial value so the gesture restores it instead of forcing scrolling on.
+  const initialContentScrollY = contentEl?.scrollY ?? true;
   const height = wrapperEl.clientHeight;
   let currentBreakpoint = initialBreakpoint;
   let offset = 0;
@@ -261,9 +263,6 @@ export const createSheetGesture = (
 
   const canStart = (detail: GestureDetail) => {
     /**
-     * If we are swiping on the content, swiping should only be possible if the content
-     * is scrolled all the way to the top so that we do not interfere with scrolling.
-     *
      * We cannot assume that the `ion-content` target will remain consistent between swipes.
      * For example, when using ion-nav within a modal it is possible to swipe, push a view,
      * and then swipe again. The target content will not be the same between swipes.
@@ -272,33 +271,24 @@ export const createSheetGesture = (
     currentBreakpoint = getCurrentBreakpoint();
 
     /**
-     * If `expandToScroll` is disabled, we should not allow the swipe gesture
-     * to start if the content is not scrolled to the top.
+     * Upwards swipes on the content cannot move the sheet anyway, so this only
+     * blocks swiping the sheet down from the content.
      */
-    if (!expandToScroll && contentEl) {
-      const scrollEl = isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl;
-      return scrollEl!.scrollTop === 0;
-    }
-
-    if (currentBreakpoint === 1 && contentEl) {
-      /**
-       * The modal should never swipe to close on the content with a refresher.
-       * Note 1: We cannot solve this by making this gesture have a higher priority than
-       * the refresher gesture as the iOS native refresh gesture uses a scroll listener in
-       * addition to a gesture.
-       *
-       * Note 2: Do not use getScrollElement here because we need this to be a synchronous
-       * operation, and getScrollElement is asynchronous.
-       */
-      const scrollEl = isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl;
-      const hasRefresherInContent = !!contentEl.querySelector('ion-refresher');
-      return !hasRefresherInContent && scrollEl!.scrollTop === 0;
+    if (contentEl && (!expandToScroll || currentBreakpoint === 1)) {
+      return canSwipeOnContent(contentEl);
     }
 
     return true;
   };
 
   const onStart = (detail: GestureDetail) => {
+    /**
+     * Firefox automatically selects the header text during drag
+     * due to the focusable wrapper (tabindex="-1"). Remove any
+     * selection that may have occurred.
+     */
+    window.getSelection()?.removeAllRanges();
+
     /**
      * If canDismiss is anything other than `true`
      * then users should be able to swipe down
@@ -555,14 +545,14 @@ export const createSheetGesture = (
     }
 
     /**
-     * Enables scrolling immediately if the sheet is about to fully expand
-     * or if it allows scrolling at any breakpoint. Without this, there would
+     * Restores the content's scroll setting immediately if the sheet is about to
+     * fully expand or if it allows scrolling at any breakpoint. Without this, there would
      * be a ~500ms delay while the modal animation completes, causing a
      * noticeable lag. Native iOS allows scrolling as soon as the gesture is
      * released, so we align with that behavior.
      */
     if (contentEl && (snapToBreakpoint === breakpoints[breakpoints.length - 1] || !expandToScroll)) {
-      contentEl.scrollY = true;
+      contentEl.scrollY = initialContentScrollY;
     }
 
     /**
@@ -761,8 +751,20 @@ export const createSheetGesture = (
     onEnd,
   });
 
+  /**
+   * Puts the content back the way the app declared it. A sheet can dismiss
+   * without going through moveSheetToBreakpoint, and an inline modal reuses
+   * the same element on the next present.
+   */
+  const resetContentScroll = () => {
+    if (contentEl) {
+      contentEl.scrollY = initialContentScrollY;
+    }
+  };
+
   return {
     gesture,
     moveSheetToBreakpoint,
+    resetContentScroll,
   };
 };
diff --git a/core/src/components/modal/gestures/swipe-to-close.ts b/core/src/components/modal/gestures/swipe-to-close.ts
index 2b66e7eac24..f5b753d8b01 100644
--- a/core/src/components/modal/gestures/swipe-to-close.ts
+++ b/core/src/components/modal/gestures/swipe-to-close.ts
@@ -1,7 +1,7 @@
 import { getTimeGivenProgression } from '@utils/animation/cubic-bezier';
 import { isIonContent, findClosestIonContent, disableContentScrollY, resetContentScrollY } from '@utils/content';
 import { createGesture } from '@utils/gesture';
-import { clamp, getElementRoot } from '@utils/helpers';
+import { clamp } from '@utils/helpers';
 import { OVERLAY_GESTURE_PRIORITY } from '@utils/overlays';
 
 import type { Animation, ModalDragEventDetail } from '../../../interface';
@@ -9,7 +9,7 @@ import type { GestureDetail } from '../../../utils/gesture';
 import type { Style as StatusBarStyle } from '../../../utils/native/status-bar';
 import { setCardStatusBarDark, setCardStatusBarDefault } from '../utils';
 
-import { calculateSpringStep, handleCanDismiss } from './utils';
+import { calculateSpringStep, canSwipeOnContent, handleCanDismiss } from './utils';
 
 // Defaults for the card swipe animation
 export const SwipeToCloseDefaults = {
@@ -35,7 +35,6 @@ export const createSwipeToCloseGesture = (
   let isOpen = false;
   let canDismissBlocksGesture = false;
   let contentEl: HTMLElement | null = null;
-  let scrollEl: HTMLElement | null = null;
   const canDismissMaxStep = 0.2;
   let initialScrollY = true;
   let lastStep = 0;
@@ -60,12 +59,6 @@ export const createSwipeToCloseGesture = (
     }
 
     /**
-     * If we are swiping on the content,
-     * swiping should only be possible if
-     * the content is scrolled all the way
-     * to the top so that we do not interfere
-     * with scrolling.
-     *
      * We cannot assume that the `ion-content`
      * target will remain consistent between
      * swipes. For example, when using
@@ -76,29 +69,7 @@ export const createSwipeToCloseGesture = (
      */
     contentEl = findClosestIonContent(target);
     if (contentEl) {
-      /**
-       * The card should never swipe to close
-       * on the content with a refresher.
-       * Note: We cannot solve this by making the
-       * swipeToClose gesture have a higher priority
-       * than the refresher gesture as the iOS native
-       * refresh gesture uses a scroll listener in
-       * addition to a gesture.
-       *
-       * Note: Do not use getScrollElement here
-       * because we need this to be a synchronous
-       * operation, and getScrollElement is
-       * asynchronous.
-       */
-      if (isIonContent(contentEl)) {
-        const root = getElementRoot(contentEl);
-        scrollEl = root.querySelector('.inner-scroll');
-      } else {
-        scrollEl = contentEl;
-      }
-
-      const hasRefresherInContent = !!contentEl.querySelector('ion-refresher');
-      return !hasRefresherInContent && scrollEl!.scrollTop === 0;
+      return canSwipeOnContent(contentEl);
     }
 
     /**
@@ -116,6 +87,13 @@ export const createSwipeToCloseGesture = (
   const onStart = (detail: GestureDetail) => {
     const { deltaY } = detail;
 
+    /**
+     * Firefox automatically selects the header text during drag
+     * due to the focusable wrapper (tabindex="-1"). Remove any
+     * selection that may have occurred.
+     */
+    window.getSelection()?.removeAllRanges();
+
     /**
      * Get the initial scrollY value so
      * that we can correctly reset the scrollY
diff --git a/core/src/components/modal/gestures/utils.ts b/core/src/components/modal/gestures/utils.ts
index 694227d630d..270341719a8 100644
--- a/core/src/components/modal/gestures/utils.ts
+++ b/core/src/components/modal/gestures/utils.ts
@@ -1,7 +1,26 @@
+import { findRefresherInContent, isIonContent } from '@utils/content';
+import { getElementRoot } from '@utils/helpers';
 import { GESTURE } from '@utils/overlays';
 
 import type { Animation } from '../../../interface';
 
+/**
+ * Swiping is only possible when the content is scrolled to the top, so that we
+ * do not interfere with scrolling, and never on content with a refresher.
+ *
+ * Note: We cannot solve the refresher case with gesture priority as the iOS
+ * native refresh gesture uses a scroll listener in addition to a gesture.
+ *
+ * Note: Do not use `getScrollElement` here because we need this to be a
+ * synchronous operation, and `getScrollElement` is asynchronous.
+ */
+export const canSwipeOnContent = (contentEl: HTMLElement) => {
+  const scrollEl = isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl;
+  const hasRefresherInContent = !!findRefresherInContent(contentEl);
+
+  return !hasRefresherInContent && scrollEl!.scrollTop === 0;
+};
+
 export const handleCanDismiss = async (el: HTMLIonModalElement, animation: Animation) => {
   /**
    * If canDismiss is not a function
diff --git a/core/src/components/modal/modal.scss b/core/src/components/modal/modal.scss
index 160468f5792..0df4a448cd3 100644
--- a/core/src/components/modal/modal.scss
+++ b/core/src/components/modal/modal.scss
@@ -84,6 +84,14 @@ ion-backdrop {
   z-index: 10;
 }
 
+/**
+ * The wrapper receives programmatic focus for screen readers but should not
+ * show a visible focus ring, which is meant only for keyboard navigation.
+ */
+.modal-wrapper {
+  outline: none;
+}
+
 .modal-shadow {
   position: absolute;
 
diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index 2909945ad37..0b6c1be162f 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -50,6 +50,7 @@ import {
   applySafeAreaOverrides,
   clearSafeAreaOverrides,
   getRootSafeAreaTop,
+  onRootSafeAreaTopChange,
   hasCustomModalDimensions,
   type ModalSafeAreaContext,
 } from './safe-area-utils';
@@ -93,6 +94,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
   private sortedBreakpoints?: number[];
   private keyboardOpenCallback?: () => void;
   private moveSheetToBreakpoint?: (options: MoveSheetToBreakpointOptions) => Promise<void>;
+  private resetSheetContentScroll?: () => void;
   private inheritedAttributes: Attributes = {};
   private statusBarStyle?: StatusBarStyle;
 
@@ -109,6 +111,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
   private currentViewIsPortrait?: boolean;
   private viewTransitionAnimation?: Animation;
   private resizeTimeout?: any;
+  private unsubscribeRootSafeAreaTop?: () => void;
 
   // Mutation observer to watch for parent removal
   private parentRemovalObserver?: MutationObserver;
@@ -438,6 +441,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
    */
   @Event() ionDragEnd!: EventEmitter<ModalDragEventDetail>;
 
+  @Watch('breakpoints')
   breakpointsChanged(breakpoints: number[] | undefined) {
     if (breakpoints !== undefined) {
       this.sortedBreakpoints = breakpoints.sort((a, b) => a - b);
@@ -778,7 +782,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
     ani.progressStart(true, 1);
 
-    const { gesture, moveSheetToBreakpoint } = createSheetGesture(
+    const { gesture, moveSheetToBreakpoint, resetContentScroll } = createSheetGesture(
       this.el,
       this.backdropEl!,
       wrapperEl,
@@ -802,6 +806,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
 
     this.gesture = gesture;
     this.moveSheetToBreakpoint = moveSheetToBreakpoint;
+    this.resetSheetContentScroll = resetContentScroll;
 
     this.gesture.enable(true);
 
@@ -1028,6 +1033,13 @@ export class Modal implements ComponentInterface, OverlayInterface {
       if (this.gesture) {
         this.gesture.destroy();
       }
+      /**
+       * The sheet gesture turns content scrolling off while the sheet sits below
+       * the top breakpoint. Inline modals reuse the same content on the next
+       * present, so hand it back before the gesture goes away.
+       */
+      this.resetSheetContentScroll?.();
+      this.resetSheetContentScroll = undefined;
       this.cleanupViewTransitionListener();
       this.cleanupParentRemovalObserver();
       this.cleanupSafeAreaOverrides();
@@ -1174,8 +1186,13 @@ export class Modal implements ComponentInterface, OverlayInterface {
    */
   private onModalFocus = (ev: FocusEvent) => {
     const { dragHandleEl, el } = this;
-    // Only handle focus if the modal itself was focused (not a child element)
-    if (ev.target === el && dragHandleEl && dragHandleEl.tabIndex !== -1) {
+    /**
+     * Shadow DOM focus is retargeted to the host, so `ev.target === el` is also
+     * true when a shadow child (the dialog wrapper present() focuses) is focused.
+     * shadowRoot's activeElement is null only when the host was focused directly,
+     * so redirect to the handle only then and leave present()'s wrapper focus intact.
+     */
+    if (ev.target === el && el.shadowRoot?.activeElement == null && dragHandleEl && dragHandleEl.tabIndex !== -1) {
       dragHandleEl.focus();
     }
   };
@@ -1465,17 +1482,21 @@ export class Modal implements ComponentInterface, OverlayInterface {
     // Set the internal offset property with the resolved root safe-area-top value
     if (context.isSheetModal) {
       this.updateSheetOffsetTop();
+      this.unsubscribeRootSafeAreaTop = onRootSafeAreaTopChange((safeAreaTop) =>
+        this.updateSheetOffsetTop(safeAreaTop)
+      );
     }
   }
 
   /**
-   * Resolves the current root --ion-safe-area-top value and sets the
-   * internal --ion-modal-offset-top property on the host element.
-   * Called on present and on resize (e.g., device rotation changes safe-area).
+   * Sets the internal --ion-modal-offset-top property on the host element,
+   * resolving the current root --ion-safe-area-top when no value is given.
+   * Called on present, on resize (e.g., device rotation changes safe-area),
+   * and whenever the root safe-area value itself changes.
    */
-  private updateSheetOffsetTop(): void {
-    const safeAreaTop = getRootSafeAreaTop();
-    this.el.style.setProperty('--ion-modal-offset-top', `${safeAreaTop}px`);
+  private updateSheetOffsetTop(safeAreaTop?: number): void {
+    const value = safeAreaTop ?? getRootSafeAreaTop();
+    this.el.style.setProperty('--ion-modal-offset-top', `${value}px`);
   }
 
   /**
@@ -1578,6 +1599,9 @@ export class Modal implements ComponentInterface, OverlayInterface {
   private cleanupSafeAreaOverrides(): void {
     clearSafeAreaOverrides(this.el);
 
+    this.unsubscribeRootSafeAreaTop?.();
+    this.unsubscribeRootSafeAreaTop = undefined;
+
     // Remove internal sheet offset property
     this.el.style.removeProperty('--ion-modal-offset-top');
 
@@ -1643,10 +1667,17 @@ export class Modal implements ComponentInterface, OverlayInterface {
             same element. They must also be set inside the
             shadow DOM otherwise ion-button will not be highlighted
             when using VoiceOver: https://bugs.webkit.org/show_bug.cgi?id=247134
+
+            tabIndex={-1} is required so present() can move focus to this
+            element (which carries the dialog role) instead of the role-less
+            host. role="dialog" alone does not make an element focusable, so
+            without the tabindex focus() would be a no-op and screen readers
+            may not properly announce the dialog and its content when it opens.
           */
           role="dialog"
           {...inheritedAttributes}
           aria-modal="true"
+          tabIndex={-1}
           class="modal-wrapper ion-overlay-wrapper"
           part="content"
           ref={(el) => (this.wrapperEl = el)}
diff --git a/core/src/components/modal/safe-area-utils.ts b/core/src/components/modal/safe-area-utils.ts
index 59ae3a4fdb5..b06b2315b63 100644
--- a/core/src/components/modal/safe-area-utils.ts
+++ b/core/src/components/modal/safe-area-utils.ts
@@ -104,6 +104,45 @@ export const getRootSafeAreaTop = (): number => {
   return value;
 };
 
+/**
+ * Calls back when the resolved root `--ion-safe-area-top` changes, which no
+ * event and no window resize covers. The probe's height tracks the variable, so
+ * a change to it becomes a size change the observer can see.
+ */
+export const onRootSafeAreaTopChange = (callback: (safeAreaTop: number) => void): (() => void) => {
+  const doc = win?.document;
+  if (!doc?.body || typeof ResizeObserver === 'undefined') {
+    return () => undefined;
+  }
+
+  const probe = doc.createElement('div');
+  probe.style.cssText =
+    'position:fixed;visibility:hidden;pointer-events:none;top:0;left:0;width:0;' +
+    'height:var(--ion-safe-area-top,0px);';
+  doc.body.appendChild(probe);
+
+  /**
+   * Seeded with the value the caller has already applied, so a change that
+   * lands before the observer's first delivery still gets reported. Comparing
+   * against an unset value instead would consume that first delivery and treat
+   * the new inset as the baseline.
+   */
+  let lastHeight = getRootSafeAreaTop();
+  const observer = new ResizeObserver((entries) => {
+    const { height } = entries[0].contentRect;
+    if (height !== lastHeight) {
+      lastHeight = height;
+      callback(height);
+    }
+  });
+  observer.observe(probe);
+
+  return () => {
+    observer.disconnect();
+    probe.remove();
+  };
+};
+
 /**
  * True when the modal host declares BOTH a non-fullscreen `--width` AND a
  * non-fullscreen `--height` (i.e. a centered-dialog-like modal that doesn't
diff --git a/core/src/components/modal/test/a11y/modal.e2e.ts b/core/src/components/modal/test/a11y/modal.e2e.ts
index 5aef2cda0d8..0cacc470903 100644
--- a/core/src/components/modal/test/a11y/modal.e2e.ts
+++ b/core/src/components/modal/test/a11y/modal.e2e.ts
@@ -19,5 +19,22 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       const results = await new AxeBuilder({ page }).analyze();
       expect(results.violations).toEqual([]);
     });
+
+    // The focused wrapper must not show a focus ring when opened via keyboard.
+    test('should not render a focus ring on the wrapper when presented via keyboard', async ({ page }) => {
+      await page.goto(`/src/components/modal/test/a11y`, config);
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const button = page.locator('#open-modal');
+      const wrapper = page.locator('ion-modal .modal-wrapper');
+
+      // Open with the keyboard so :focus-visible applies to the wrapper.
+      await button.focus();
+      await page.keyboard.press('Enter');
+      await ionModalDidPresent.next();
+
+      await expect(wrapper).toBeFocused();
+      await expect(wrapper).toHaveCSS('outline-style', 'none');
+    });
   });
 });
diff --git a/core/src/components/modal/test/can-dismiss/index.html b/core/src/components/modal/test/can-dismiss/index.html
index d0c56ae08cd..7d8ecc6e60b 100644
--- a/core/src/components/modal/test/can-dismiss/index.html
+++ b/core/src/components/modal/test/can-dismiss/index.html
@@ -20,7 +20,7 @@
     </style>
   </head>
   <script type="module">
-    import { modalController, actionSheetController } from '../../../../dist/ionic/index.esm.js';
+    import { modalController, actionSheetController } from '../../../../../dist/ionic/index.esm.js';
     window.modalController = modalController;
     window.actionSheetController = actionSheetController;
   </script>
diff --git a/core/src/components/modal/test/card/index.html b/core/src/components/modal/test/card/index.html
index c47f5bda425..d064d0030ae 100644
--- a/core/src/components/modal/test/card/index.html
+++ b/core/src/components/modal/test/card/index.html
@@ -26,7 +26,7 @@
     </style>
   </head>
   <script type="module">
-    import { modalController } from '../../../../dist/ionic/index.esm.js';
+    import { modalController } from '../../../../../dist/ionic/index.esm.js';
     window.modalController = modalController;
   </script>
 
diff --git a/core/src/components/modal/test/card/modal-card.e2e.ts b/core/src/components/modal/test/card/modal-card.e2e.ts
index 8df6161ec70..b07de14cfb4 100644
--- a/core/src/components/modal/test/card/modal-card.e2e.ts
+++ b/core/src/components/modal/test/card/modal-card.e2e.ts
@@ -35,12 +35,22 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
       await cardModalPage.openModalByTrigger('#card');
       await cardModalPage.openModalByTrigger('.add');
 
+      // Firefox only: Move the mouse away from the ".add" button
+      // so the button's hover state is not captured in the
+      // screenshot
+      await page.mouse.move(0, 0);
+
       await expect(page).toHaveScreenshot(screenshot(`modal-card-stacked-present`));
     });
     test('should not have visual regressions with stacked custom cards', async ({ page }) => {
       await cardModalPage.openModalByTrigger('#card-custom');
       await cardModalPage.openModalByTrigger('.add');
 
+      // Firefox only: Move the mouse away from the ".add" button
+      // so the button's hover state is not captured in the
+      // screenshot
+      await page.mouse.move(0, 0);
+
       await expect(page).toHaveScreenshot(screenshot(`modal-card-custom-stacked-present`));
     });
   });
@@ -125,7 +135,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
       expect(ionDragEnd.length).toBe(0);
 
       /**
-       * Drage the modal further to verify it does:
+       * Drag the modal further to verify it does:
        * - not emit the event again for `ionDragStart`
        * - emit more `ionDragMove` events
        * - emit the `ionDragEnd` event when the gesture ends
diff --git a/core/src/components/modal/test/card/modal-card.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal-card.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Firefox-linux.png
index b0d38e0b11c..780ff62f55a 100644
Binary files a/core/src/components/modal/test/card/modal-card.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/modal/test/card/modal-card.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/card/modal-card.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal-card.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Firefox-linux.png
index 4bd4dd52c17..ef65d773244 100644
Binary files a/core/src/components/modal/test/card/modal-card.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/modal/test/card/modal-card.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/card/modal-tablet.e2e.ts b/core/src/components/modal/test/card/modal-tablet.e2e.ts
index 96291f50271..d8177407168 100644
--- a/core/src/components/modal/test/card/modal-tablet.e2e.ts
+++ b/core/src/components/modal/test/card/modal-tablet.e2e.ts
@@ -28,12 +28,22 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
       await cardModalPage.openModalByTrigger('#card');
       await cardModalPage.openModalByTrigger('.add');
 
+      // Firefox only: Move the mouse away from the ".add" button
+      // so the button's hover state is not captured in the
+      // screenshot
+      await page.mouse.move(0, 0);
+
       await expect(page).toHaveScreenshot(screenshot(`modal-card-stacked-present-tablet`));
     });
     test('should not have visual regressions with stacked custom cards', async ({ page }) => {
       await cardModalPage.openModalByTrigger('#card-custom');
       await cardModalPage.openModalByTrigger('.add');
 
+      // Firefox only: Move the mouse away from the ".add" button
+      // so the button's hover state is not captured in the
+      // screenshot
+      await page.mouse.move(0, 0);
+
       await expect(page).toHaveScreenshot(screenshot(`modal-card-custom-stacked-present-tablet`));
     });
   });
diff --git a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png
index f279d8b3c1f..794c3ad6253 100644
Binary files a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-custom-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png
index 0f5d0d99b32..a77d4998842 100644
Binary files a/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/modal/test/card/modal-tablet.e2e.ts-snapshots/modal-card-stacked-present-tablet-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/modal/test/host-elements/index.html b/core/src/components/modal/test/host-elements/index.html
index d5d90f9c6ad..1ac0cb59860 100644
--- a/core/src/components/modal/test/host-elements/index.html
+++ b/core/src/components/modal/test/host-elements/index.html
@@ -14,7 +14,7 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   </head>
   <script type="module">
-    import { modalController } from '../../../../dist/ionic/index.esm.js';
+    import { modalController } from '../../../../../dist/ionic/index.esm.js';
     window.modalController = modalController;
   </script>
   <body>
diff --git a/core/src/components/modal/test/refresher-scroll-target/index.html b/core/src/components/modal/test/refresher-scroll-target/index.html
new file mode 100644
index 00000000000..12206de68df
--- /dev/null
+++ b/core/src/components/modal/test/refresher-scroll-target/index.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Modal - Refresher with Custom Scroll Target</title>
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+    <meta
+      name="viewport"
+      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <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>
+      #content {
+        position: relative;
+
+        display: block;
+        flex: 1;
+
+        height: 100%;
+        overflow-y: auto;
+
+        contain: size style;
+      }
+    </style>
+  </head>
+
+  <script type="module">
+    import { modalController } from '../../../../../dist/ionic/index.esm.js';
+    window.modalController = modalController;
+  </script>
+
+  <body>
+    <ion-app>
+      <div class="ion-page">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Refresher with Custom Scroll Target</ion-title>
+          </ion-toolbar>
+        </ion-header>
+
+        <ion-content class="ion-padding">
+          <button class="expand" id="card" onclick="presentCardModal()">Card Modal</button>
+          <button class="expand" id="sheet" onclick="presentSheetModal()">Sheet Modal</button>
+          <button class="expand" id="sheet-no-expand" onclick="presentSheetModal({ expandToScroll: false })">
+            Sheet Modal (expandToScroll false)
+          </button>
+          <button class="expand" id="sheet-breakpoints" onclick="presentSheetModal(MULTIPLE_BREAKPOINTS)">
+            Sheet Modal (breakpoints)
+          </button>
+          <button
+            class="expand"
+            id="sheet-breakpoints-no-expand"
+            onclick="presentSheetModal({ ...MULTIPLE_BREAKPOINTS, expandToScroll: false })"
+          >
+            Sheet Modal (breakpoints, expandToScroll false)
+          </button>
+        </ion-content>
+      </div>
+    </ion-app>
+
+    <script>
+      const MULTIPLE_BREAKPOINTS = { breakpoints: [0, 0.25, 0.5, 1], initialBreakpoint: 0.5 };
+
+      // The refresher is a child of ion-content while the scroll host is a
+      // sibling of it, matching how virtual scroll viewports are set up.
+      function createModalContent() {
+        const element = document.createElement('div');
+        element.innerHTML = `
+      <ion-header id="modal-header">
+        <ion-toolbar>
+          <ion-title>Modal</ion-title>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content scroll-y="false">
+        <ion-refresher id="refresher" slot="fixed">
+          <ion-refresher-content pulling-text="Pull to refresh" refreshing-text="Refreshing..."></ion-refresher-content>
+        </ion-refresher>
+        <div id="content" class="ion-padding ion-content-scroll-host">
+          <ion-list id="list"></ion-list>
+        </div>
+      </ion-content>
+      `;
+
+        const list = element.querySelector('#list');
+        for (let i = 0; i < 30; i++) {
+          const item = document.createElement('ion-item');
+          item.textContent = `Item ${i}`;
+          list.appendChild(item);
+        }
+
+        let refreshCount = 0;
+        const refresher = element.querySelector('#refresher');
+        refresher.addEventListener('ionRefresh', () => {
+          // Hold the refreshing state so the spinner is visible when testing by
+          // hand, then prepend an item so the refresh leaves something behind.
+          setTimeout(() => {
+            refreshCount++;
+
+            const item = document.createElement('ion-item');
+            item.setAttribute('color', 'success');
+            item.textContent = `Refreshed ${refreshCount}`;
+            list.prepend(item);
+
+            refresher.complete();
+          }, 1500);
+        });
+
+        return element;
+      }
+
+      async function presentCardModal() {
+        const modal = await modalController.create({
+          // ion-app also carries the ion-page class, so the page is the second match.
+          presentingElement: document.querySelectorAll('.ion-page')[1],
+          component: createModalContent(),
+        });
+        await modal.present();
+      }
+
+      async function presentSheetModal(opts = {}) {
+        const modal = await modalController.create({
+          component: createModalContent(),
+          breakpoints: [0, 1],
+          initialBreakpoint: 1,
+          ...opts,
+        });
+        await modal.present();
+      }
+    </script>
+  </body>
+</html>
diff --git a/core/src/components/modal/test/refresher-scroll-target/modal.e2e.ts b/core/src/components/modal/test/refresher-scroll-target/modal.e2e.ts
new file mode 100644
index 00000000000..c2950ec5e03
--- /dev/null
+++ b/core/src/components/modal/test/refresher-scroll-target/modal.e2e.ts
@@ -0,0 +1,189 @@
+import { expect } from '@playwright/test';
+import type { E2EPage } from '@utils/test/playwright';
+import { configs, dragElementByYAxis, test } from '@utils/test/playwright';
+
+const dragDownOnScrollHost = async (page: E2EPage, dragByY = 250) => {
+  // The refresher creates its gesture asynchronously, so wait for it to hydrate.
+  await page.locator('ion-modal ion-refresher.hydrated').waitFor({ state: 'attached' });
+
+  const scrollHost = page.locator('ion-modal .ion-content-scroll-host');
+  const box = (await scrollHost.boundingBox())!;
+
+  // Start near the top of the host so the drag stays within smaller viewports.
+  await dragElementByYAxis(scrollHost, page, dragByY, box.y + 5);
+};
+
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('sheet modal: refresher with custom scroll target'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/modal/test/refresher-scroll-target', config);
+    });
+
+    test('should refresh instead of dismissing when pulling down on the custom scroll target', async ({
+      page,
+    }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/31332',
+      });
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+      const ionRefresh = await page.spyOnEvent('ionRefresh');
+
+      await page.click('#sheet');
+      await ionModalDidPresent.next();
+
+      await dragDownOnScrollHost(page);
+
+      await ionRefresh.next();
+      expect(ionModalDidDismiss).toHaveReceivedEventTimes(0);
+    });
+
+    test('should refresh instead of dismissing when expandToScroll is disabled', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/31332',
+      });
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+      const ionRefresh = await page.spyOnEvent('ionRefresh');
+
+      await page.click('#sheet-no-expand');
+      await ionModalDidPresent.next();
+
+      await dragDownOnScrollHost(page);
+
+      await ionRefresh.next();
+      expect(ionModalDidDismiss).toHaveReceivedEventTimes(0);
+    });
+
+    test('should move the sheet rather than refresh when dragging the content at a partial breakpoint', async ({
+      page,
+    }) => {
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
+      const ionRefresh = await page.spyOnEvent('ionRefresh');
+
+      await page.click('#sheet-breakpoints');
+      await ionModalDidPresent.next();
+
+      await dragDownOnScrollHost(page);
+
+      await ionBreakpointDidChange.next();
+      expect(ionRefresh).toHaveReceivedEventTimes(0);
+    });
+
+    test('should refresh rather than move the sheet at a partial breakpoint when expandToScroll is disabled', async ({
+      page,
+    }) => {
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
+      const ionRefresh = await page.spyOnEvent('ionRefresh');
+
+      await page.click('#sheet-breakpoints-no-expand');
+      await ionModalDidPresent.next();
+
+      await dragDownOnScrollHost(page);
+
+      await ionRefresh.next();
+      expect(ionBreakpointDidChange).toHaveReceivedEventTimes(0);
+    });
+
+    test('should keep the content opted out of scrolling after the sheet snaps back', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/31332',
+      });
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
+      const ionRefresh = await page.spyOnEvent('ionRefresh');
+
+      await page.click('#sheet-breakpoints');
+      await ionModalDidPresent.next();
+
+      const content = page.locator('ion-modal ion-content');
+      await expect(content).toHaveJSProperty('scrollY', false);
+
+      /**
+       * Expanding to the top breakpoint is what used to force scrolling back on.
+       * Waiting on the breakpoint change also proves the drag moved the sheet, so
+       * this cannot pass by leaving the content untouched.
+       */
+      const wrapper = (await page.locator('ion-modal .modal-wrapper').boundingBox())!;
+      await dragElementByYAxis(page.locator('ion-modal .modal-handle'), page, -Math.round(wrapper.height * 0.3));
+      await ionBreakpointDidChange.next();
+
+      await expect(content).toHaveJSProperty('scrollY', false);
+
+      await dragDownOnScrollHost(page);
+
+      await ionRefresh.next();
+    });
+
+    test('should keep the content opted out of scrolling when expandToScroll is disabled', async ({ page }) => {
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#sheet-breakpoints-no-expand');
+      await ionModalDidPresent.next();
+
+      const content = page.locator('ion-modal ion-content');
+      await expect(content).toHaveJSProperty('scrollY', false);
+
+      // With expandToScroll disabled the sheet restores scrolling at every breakpoint.
+      await dragElementByYAxis(page.locator('ion-modal .modal-handle'), page, 60);
+
+      await expect(content).toHaveJSProperty('scrollY', false);
+    });
+
+    test('should still dismiss when dragging the handle', async ({ page }) => {
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+      await page.click('#sheet-no-expand');
+      await ionModalDidPresent.next();
+
+      await dragElementByYAxis(page.locator('ion-modal .modal-handle'), page, 500);
+
+      await ionModalDidDismiss.next();
+    });
+  });
+});
+
+/**
+ * Card modals are only available in iOS mode.
+ * This behavior does not vary across directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('card modal: refresher with custom scroll target'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto('/src/components/modal/test/refresher-scroll-target', config);
+    });
+
+    test('should refresh instead of dismissing when pulling down on the custom scroll target', async ({
+      page,
+    }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/31332',
+      });
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+      const ionRefresh = await page.spyOnEvent('ionRefresh');
+
+      await page.click('#card');
+      await ionModalDidPresent.next();
+
+      await dragDownOnScrollHost(page);
+
+      await ionRefresh.next();
+      expect(ionModalDidDismiss).toHaveReceivedEventTimes(0);
+    });
+  });
+});
diff --git a/core/src/components/modal/test/safe-area/modal.e2e.ts b/core/src/components/modal/test/safe-area/modal.e2e.ts
index 8f13349fe95..e247b174956 100644
--- a/core/src/components/modal/test/safe-area/modal.e2e.ts
+++ b/core/src/components/modal/test/safe-area/modal.e2e.ts
@@ -257,6 +257,62 @@ configs({ modes: ['ios', 'md'], directions: ['ltr'] }).forEach(({ title, config
       expect(offsetTop).toBe(`${TEST_SAFE_AREA_TOP}px`);
     });
 
+    test('sheet modal should update --ion-modal-offset-top when the safe area top changes after present', async ({
+      page,
+    }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/31337',
+      });
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#sheet-modal');
+      await ionModalDidPresent.next();
+
+      const modal = page.locator('ion-modal');
+      const offsetTop = () =>
+        modal.evaluate((el: HTMLIonModalElement) => el.style.getPropertyValue('--ion-modal-offset-top'));
+
+      expect(await offsetTop()).toBe(`${TEST_SAFE_AREA_TOP}px`);
+
+      await page.evaluate(() => document.documentElement.style.setProperty('--ion-safe-area-top', '24px'));
+
+      await expect(async () => {
+        expect(await offsetTop()).toBe('24px');
+      }).toPass({ timeout: 5000 });
+    });
+
+    /**
+     * Covers a sheet presented before the inset is known, which is the Android
+     * edge-to-edge startup order rather than the 47px the test page declares.
+     */
+    test('sheet modal should pick up the safe area top when it starts at zero', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/31337',
+      });
+
+      await page.evaluate(() => document.documentElement.style.setProperty('--ion-safe-area-top', '0px'));
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#sheet-modal');
+      await ionModalDidPresent.next();
+
+      const modal = page.locator('ion-modal');
+      const offsetTop = () =>
+        modal.evaluate((el: HTMLIonModalElement) => el.style.getPropertyValue('--ion-modal-offset-top'));
+
+      expect(await offsetTop()).toBe('0px');
+
+      await page.evaluate(() => document.documentElement.style.setProperty('--ion-safe-area-top', '24px'));
+
+      await expect(async () => {
+        expect(await offsetTop()).toBe('24px');
+      }).toPass({ timeout: 5000 });
+    });
+
     test('fullscreen modal safe-area should update on resize from phone to tablet', async ({ page }, testInfo) => {
       testInfo.annotations.push({
         type: 'issue',
diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts b/core/src/components/modal/test/sheet/modal.e2e.ts
index 7a1e013bfed..74e6e13431e 100644
--- a/core/src/components/modal/test/sheet/modal.e2e.ts
+++ b/core/src/components/modal/test/sheet/modal.e2e.ts
@@ -127,6 +127,20 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         expect(breakpoint).toBe(0.5);
       });
 
+      test('should give scrolling back to the content when expanded to the top breakpoint', async ({ page }) => {
+        const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
+        const modal = page.locator('.modal-sheet');
+        const content = modal.locator('ion-content');
+
+        // The sheet starts partially open, so the content doesn't scroll yet.
+        await expect(content).toHaveJSProperty('scrollY', false);
+
+        await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(1));
+        await ionBreakpointDidChange.next();
+
+        await expect(content).toHaveJSProperty('scrollY', true);
+      });
+
       test('should emit ionBreakpointDidChange', async ({ page }) => {
         const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
         const modal = page.locator('.modal-sheet');
@@ -157,6 +171,61 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       });
     });
 
+    test('it should restore content scrolling on dismiss so a reused modal still scrolls', async ({ page }) => {
+      await page.goto('/src/components/modal/test/sheet', config);
+
+      await page.setContent(
+        `
+        <ion-content>
+          <ion-button id="open-modal">Open</ion-button>
+          <ion-modal trigger="open-modal" initial-breakpoint="0.25">
+            <ion-content>
+              <ion-button id="dismiss" onclick="modal.dismiss();">Dismiss</ion-button>
+            </ion-content>
+          </ion-modal>
+        </ion-content>
+        <script>
+          const modal = document.querySelector('ion-modal');
+          modal.breakpoints = [0, 0.25, 0.5, 1];
+        </script>
+      `,
+        config
+      );
+
+      const modal = page.locator('ion-modal');
+      const content = modal.locator('ion-content');
+      const openButton = page.locator('#open-modal');
+      const dismissButton = page.locator('#dismiss');
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+      const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange');
+
+      await openButton.click();
+      await ionModalDidPresent.next();
+
+      // Below the top breakpoint, so the sheet has turned content scrolling off.
+      await expect(content).toHaveJSProperty('scrollY', false);
+
+      await dismissButton.click();
+      await ionModalDidDismiss.next();
+
+      /**
+       * An inline modal reuses this content on the next present. Leaving it
+       * switched off means the re-presented sheet reads that as the app's own
+       * setting and never scrolls again.
+       */
+      await expect(content).toHaveJSProperty('scrollY', true);
+
+      await openButton.click();
+      await ionModalDidPresent.next();
+
+      await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(1));
+      await ionBreakpointDidChange.next();
+
+      await expect(content).toHaveJSProperty('scrollY', true);
+    });
+
     test('it should reset the breakpoint value on dismiss', async ({ page }) => {
       await page.goto('/src/components/modal/test/sheet', config);
       test.info().annotations.push({
@@ -399,4 +468,51 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       expect(Object.keys(dragEndEvent.detail).length).toBe(5);
     });
   });
+
+  test.describe(title('sheet modal: late breakpoints binding'), () => {
+    test('should not crash when swiped after breakpoints are set after the modal loads', async ({ page }) => {
+      const pageErrors: string[] = [];
+      page.on('pageerror', (err) => pageErrors.push(err.message));
+
+      await page.setContent(
+        `
+        <ion-modal initial-breakpoint="1">
+          <ion-content>Modal Content</ion-content>
+        </ion-modal>
+      `,
+        config
+      );
+
+      const modal = page.locator('ion-modal');
+
+      /**
+       * Simulates a JS framework (e.g. Angular with zoneless change detection)
+       * applying the `breakpoints` binding after the web component has finished
+       * loading. `setContent` resolves after `componentDidLoad`, so this lands
+       * too late for the manual `breakpointsChanged()` call in `componentDidLoad`
+       * to pick it up
+       */
+      await modal.evaluate((el: HTMLIonModalElement) => {
+        el.breakpoints = [0, 1];
+      });
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+      await modal.evaluate((el: HTMLIonModalElement) => el.present());
+      await ionModalDidPresent.next();
+
+      // Swiping the sheet down should snap it to breakpoint 0 and dismiss it
+      // without throwing an error
+      const handle = page.locator('ion-modal .modal-handle');
+      await expect(handle).toBeVisible();
+      await dragElementBy(handle, page, 0, 600);
+
+      // Flush any pending errors from the gesture's end handler
+      await page.evaluate(() => new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve))));
+      expect(pageErrors).toEqual([]);
+
+      await ionModalDidDismiss.next();
+    });
+  });
 });
diff --git a/core/src/components/modal/test/spec/index.html b/core/src/components/modal/test/spec/index.html
index 361fdf4de1c..851eb8a9133 100644
--- a/core/src/components/modal/test/spec/index.html
+++ b/core/src/components/modal/test/spec/index.html
@@ -40,7 +40,7 @@
     </style>
   </head>
   <script type="module">
-    import { modalController, createAnimation } from '../../../../dist/ionic/index.esm.js';
+    import { modalController, createAnimation } from '../../../../../dist/ionic/index.esm.js';
     window.modalController = modalController;
     window.createAnimation = createAnimation;
   </script>
diff --git a/core/src/components/modal/test/standalone/index.html b/core/src/components/modal/test/standalone/index.html
index a14ce783469..c16baba38ab 100644
--- a/core/src/components/modal/test/standalone/index.html
+++ b/core/src/components/modal/test/standalone/index.html
@@ -14,7 +14,7 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   </head>
   <script type="module">
-    import { modalController } from '../../../../dist/ionic/index.esm.js';
+    import { modalController } from '../../../../../dist/ionic/index.esm.js';
     window.modalController = modalController;
   </script>
   <body>
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 9861dbc8e52..97644d6a078 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/picker-column-option/picker-column-option.md.scss b/core/src/components/picker-column-option/picker-column-option.md.scss
index b2cb665b7a7..c80f5ed9333 100644
--- a/core/src/components/picker-column-option/picker-column-option.md.scss
+++ b/core/src/components/picker-column-option/picker-column-option.md.scss
@@ -1,5 +1,17 @@
 @import "./picker-column-option";
 
-:host(.option-active) {
+/**
+ * The active option is colored when either:
+ * - picker-column applies the `option-active` class (standalone ion-picker,
+ *   where the column lives in the light DOM), or
+ * - datetime sets `part="... active"` on the option. This is the reliable
+ *   value-based source of truth and keeps the option colored when the column
+ *   lives inside datetime's shadow DOM, where the class can be missed
+ *   (WebKit's elementsFromPoint is unreliable in a shadow root). 
+ *   TODO(FW-6594): Determine if this workaround can be removed when iOS 16 is
+ *   no longer supported.
+ */
+:host(.option-active),
+:host([part~="active"]) {
   color: current-color(base);
 }
diff --git a/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-long-prefix-suffix-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-long-prefix-suffix-ios-ltr-Mobile-Chrome-linux.png
index 67dc703029e..89164ff8350 100644
Binary files a/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-long-prefix-suffix-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/picker-column/test/slots/picker-column.e2e.ts-snapshots/picker-long-prefix-suffix-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/picker-legacy-column/test/standalone/index.html b/core/src/components/picker-legacy-column/test/standalone/index.html
index f269eb055a5..add3401292a 100644
--- a/core/src/components/picker-legacy-column/test/standalone/index.html
+++ b/core/src/components/picker-legacy-column/test/standalone/index.html
@@ -14,7 +14,7 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   </head>
   <script type="module">
-    import { pickerController } from '../../../../dist/ionic/index.esm.js';
+    import { pickerController } from '../../../../../dist/ionic/index.esm.js';
     window.pickerController = pickerController;
   </script>
 
diff --git a/core/src/components/picker-legacy/test/basic/index.html b/core/src/components/picker-legacy/test/basic/index.html
index 23cd22a2d03..5f02db1cc61 100644
--- a/core/src/components/picker-legacy/test/basic/index.html
+++ b/core/src/components/picker-legacy/test/basic/index.html
@@ -29,7 +29,7 @@
     </style>
   </head>
   <script type="module">
-    import { pickerController } from '../../../../dist/ionic/index.esm.js';
+    import { pickerController } from '../../../../../dist/ionic/index.esm.js';
     window.pickerController = pickerController;
   </script>
 
diff --git a/core/src/components/popover/test/adjustment/index.html b/core/src/components/popover/test/adjustment/index.html
index 78d8dc105a6..c51d44a4748 100644
--- a/core/src/components/popover/test/adjustment/index.html
+++ b/core/src/components/popover/test/adjustment/index.html
@@ -13,7 +13,7 @@
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
     <script type="module">
-      import { popoverController } from '../../../../dist/ionic/index.esm.js';
+      import { popoverController } from '../../../../../dist/ionic/index.esm.js';
       window.popoverController = popoverController;
     </script>
   </head>
diff --git a/core/src/components/popover/test/basic/index.html b/core/src/components/popover/test/basic/index.html
index 8d10eceb5c9..94202a01d5c 100644
--- a/core/src/components/popover/test/basic/index.html
+++ b/core/src/components/popover/test/basic/index.html
@@ -14,7 +14,7 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   </head>
   <script type="module">
-    import { popoverController } from '../../../../dist/ionic/index.esm.js';
+    import { popoverController } from '../../../../../dist/ionic/index.esm.js';
     window.popoverController = popoverController;
   </script>
 
diff --git a/core/src/components/popover/test/size/index.html b/core/src/components/popover/test/size/index.html
index 1ce48a75cb6..cdeed3b7c7a 100644
--- a/core/src/components/popover/test/size/index.html
+++ b/core/src/components/popover/test/size/index.html
@@ -41,7 +41,7 @@
     </style>
   </head>
   <script type="module">
-    import { popoverController } from '../../../../dist/ionic/index.esm.js';
+    import { popoverController } from '../../../../../dist/ionic/index.esm.js';
     window.popoverController = popoverController;
   </script>
 
diff --git a/core/src/components/popover/test/standalone/index.html b/core/src/components/popover/test/standalone/index.html
index c149da2ea94..c804ff54b94 100644
--- a/core/src/components/popover/test/standalone/index.html
+++ b/core/src/components/popover/test/standalone/index.html
@@ -14,7 +14,7 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   </head>
   <script type="module">
-    import { popoverController } from '../../../../dist/ionic/index.esm.js';
+    import { popoverController } from '../../../../../dist/ionic/index.esm.js';
     window.popoverController = popoverController;
   </script>
   <body>
diff --git a/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-ltr-Mobile-Safari-linux.png
index b0894575b0e..5c2f116d569 100644
Binary files a/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-rtl-Mobile-Safari-linux.png
index 37aec7be624..0f2b81dae8b 100644
Binary files a/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-ios-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-md-ltr-Mobile-Safari-linux.png b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-md-ltr-Mobile-Safari-linux.png
index ba0cccc7e78..24ae03189b6 100644
Binary files a/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-md-ltr-Mobile-Safari-linux.png and b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-md-rtl-Mobile-Safari-linux.png b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-md-rtl-Mobile-Safari-linux.png
index ff9947ec11e..412da91df23 100644
Binary files a/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-md-rtl-Mobile-Safari-linux.png and b/core/src/components/popover/test/standalone/popover.e2e.ts-snapshots/popover-standalone-basic-popover-md-rtl-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/radio.ios.scss b/core/src/components/radio/radio.ios.scss
index 775239a9ea1..f208cb083fb 100644
--- a/core/src/components/radio/radio.ios.scss
+++ b/core/src/components/radio/radio.ios.scss
@@ -44,25 +44,6 @@
   opacity: $radio-ios-disabled-opacity;
 }
 
-// iOS Radio: Keyboard Focus
-// -----------------------------------------
-
-:host(.ion-focused) .radio-icon::after {
-  @include border-radius(var(--inner-border-radius));
-  @include position(-8px, null, null, -9px);
-
-  display: block;
-  position: absolute;
-
-  width: 36px;
-  height: 36px;
-
-  background: $radio-ios-background-color-focused;
-
-  content: "";
-  opacity: 0.2;
-}
-
 // Radio Native Wrapper
 // ----------------------------------------------------------------
 
diff --git a/core/src/components/radio/radio.ios.vars.scss b/core/src/components/radio/radio.ios.vars.scss
index 2c971126436..46f068f15a5 100644
--- a/core/src/components/radio/radio.ios.vars.scss
+++ b/core/src/components/radio/radio.ios.vars.scss
@@ -4,9 +4,6 @@
 // iOS Radio
 // --------------------------------------------------
 
-/// @prop - Background color of focus indicator for radio when focused
-$radio-ios-background-color-focused:  ion-color(primary, tint);
-
 /// @prop - Width of the radio icon
 $radio-ios-icon-width:                dynamic-font(15px);
 
diff --git a/core/src/components/radio/radio.md.scss b/core/src/components/radio/radio.md.scss
index ba6296bcbc5..a057177ae77 100644
--- a/core/src/components/radio/radio.md.scss
+++ b/core/src/components/radio/radio.md.scss
@@ -76,24 +76,6 @@
   opacity: $radio-md-icon-disabled-opacity;
 }
 
-// Material Design Radio: Keyboard Focus
-// -----------------------------------------
-
-:host(.ion-focused) .radio-icon::after {
-  @include border-radius(var(--inner-border-radius));
-
-  display: block;
-  position: absolute;
-
-  width: 36px;
-  height: 36px;
-
-  background: $radio-md-background-color-focused;
-
-  content: "";
-  opacity: 0.2;
-}
-
 // Radio Native Wrapper
 // ----------------------------------------------------------------
 
diff --git a/core/src/components/radio/radio.md.vars.scss b/core/src/components/radio/radio.md.vars.scss
index 99dca7c1c56..4ff1b9fd094 100644
--- a/core/src/components/radio/radio.md.vars.scss
+++ b/core/src/components/radio/radio.md.vars.scss
@@ -7,9 +7,6 @@
 /// @prop - Color of the checked radio
 $radio-md-color-on:                  current-color(base);
 
-/// @prop - Background color of focus indicator for radio when focused
-$radio-md-background-color-focused:  ion-color(primary, tint);
-
 /// @prop - Color of the unchecked radio
 $radio-md-color-off:                 rgb($text-color-rgb, 0.60);
 
diff --git a/core/src/components/radio/radio.scss b/core/src/components/radio/radio.scss
index 8f875811e88..953397061e5 100644
--- a/core/src/components/radio/radio.scss
+++ b/core/src/components/radio/radio.scss
@@ -1,4 +1,3 @@
-@import "../../themes/ionic.globals";
 @import "./radio.vars.scss";
 
 // Radio
@@ -53,6 +52,7 @@ input {
   @include visually-hidden();
 }
 
+// Hide the native focus ring since we draw our own focus indicator.
 :host(:focus) {
   outline: none;
 }
@@ -80,6 +80,24 @@ input {
   width: auto;
 }
 
+// Radio: Keyboard Focus
+// ---------------------------------------------
+
+:host(.ion-focused) .radio-icon::after {
+  @include border-radius(var(--inner-border-radius));
+
+  display: block;
+  position: absolute;
+
+  width: 36px;
+  height: 36px;
+
+  background: $radio-background-color-focused;
+
+  content: "";
+  opacity: 0.2;
+}
+
 // Radio Wrapper
 // --------------------------------------------------
 .radio-wrapper {
diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx
index bb343c8c858..e05dc8c6c24 100644
--- a/core/src/components/radio/radio.tsx
+++ b/core/src/components/radio/radio.tsx
@@ -1,6 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
-import { isOptionSelected } from '@utils/forms';
+import { Component, Element, Event, Host, Method, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
+import { createItemMultipleInputsObserver, isOptionSelected } from '@utils/forms';
 import { addEventListener, removeEventListener } from '@utils/helpers';
 import { createColorClasses, hostContext } from '@utils/theme';
 
@@ -27,6 +27,7 @@ import type { Color } from '../../interface';
 export class Radio implements ComponentInterface {
   private inputId = `ion-rb-${radioButtonIds++}`;
   private radioGroup: HTMLIonRadioGroupElement | null = null;
+  private itemFocusObserver?: MutationObserver;
 
   @Element() el!: HTMLIonRadioElement;
 
@@ -150,6 +151,8 @@ export class Radio implements ComponentInterface {
       this.updateState();
       addEventListener(radioGroup, 'ionValueChange', this.updateState);
     }
+
+    this.itemFocusObserver = createItemMultipleInputsObserver(this.el, () => forceUpdate(this));
   }
 
   disconnectedCallback() {
@@ -158,6 +161,10 @@ export class Radio implements ComponentInterface {
       removeEventListener(radioGroup, 'ionValueChange', this.updateState);
       this.radioGroup = null;
     }
+    if (this.itemFocusObserver) {
+      this.itemFocusObserver.disconnect();
+      this.itemFocusObserver = undefined;
+    }
   }
 
   private updateState = () => {
@@ -216,6 +223,7 @@ export class Radio implements ComponentInterface {
     const { checked, disabled, color, el, justify, labelPlacement, hasLabel, buttonTabindex, alignment } = this;
     const mode = getIonMode(this);
     const inItem = hostContext('ion-item', el);
+    const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
 
     return (
       <Host
@@ -230,9 +238,11 @@ export class Radio implements ComponentInterface {
           [`radio-justify-${justify}`]: justify !== undefined,
           [`radio-alignment-${alignment}`]: alignment !== undefined,
           [`radio-label-placement-${labelPlacement}`]: true,
-          // Focus and active styling should not apply when the radio is in an item
+          // A single-input item has the input cover and draws the indicator itself.
+          // A multi-input item has no cover, so each control draws its own. Active
+          // styling stays suppressed either way.
           'ion-activatable': !inItem,
-          'ion-focusable': !inItem,
+          'ion-focusable': !inItem || inMultipleInputsItem,
         })}
         role="radio"
         aria-checked={checked ? 'true' : 'false'}
diff --git a/core/src/components/radio/radio.vars.scss b/core/src/components/radio/radio.vars.scss
index b578bb69969..c1cd1926bc5 100644
--- a/core/src/components/radio/radio.vars.scss
+++ b/core/src/components/radio/radio.vars.scss
@@ -1,5 +1,10 @@
+@import "../../themes/ionic.globals";
+
 /// @prop - Top margin of radio's label when in an item
 $radio-item-label-margin-top: 10px;
 
 /// @prop - Bottom margin of radio's label when in an item
-$radio-item-label-margin-bottom: 10px;
\ No newline at end of file
+$radio-item-label-margin-bottom: 10px;
+
+/// @prop - Background color of focus indicator for radio when focused
+$radio-background-color-focused: ion-color(primary, tint);
diff --git a/core/src/components/radio/test/a11y/radio.e2e.ts b/core/src/components/radio/test/a11y/radio.e2e.ts
index df92c82c4ca..a4abb0d7cb5 100644
--- a/core/src/components/radio/test/a11y/radio.e2e.ts
+++ b/core/src/components/radio/test/a11y/radio.e2e.ts
@@ -55,7 +55,7 @@ configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title,
       expect(results.violations).toEqual([]);
     });
     test.describe(title('radio: keyboard navigation'), () => {
-      test.beforeEach(async ({ page, browserName }) => {
+      test.beforeEach(async ({ page }) => {
         await page.setContent(
           `
         <ion-app>
@@ -98,20 +98,13 @@ configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title,
           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();
-        }
+        /**
+         * The group assigns `tabindex` in its `componentDidLoad` and each radio
+         * re-renders to pick it up. Tabbing before that lands on something else,
+         * and focus never comes back to the first radio.
+         */
+        await expect(page.locator('#first-group ion-radio').first()).toHaveAttribute('tabindex', '0');
+        await expect(page.locator('#second-group ion-radio').first()).toHaveAttribute('tabindex', '0');
       });
 
       test('tabbing should switch between radio groups', async ({ page, pageUtils }) => {
@@ -150,6 +143,72 @@ configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title,
   });
 });
 
+/**
+ * These assert `ion-focusable`, not the rendered ring, because `ion-focused`
+ * relies on keyboard-mode detection that is flaky on WebKit. Gating is mode-independent.
+ */
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => {
+  test.describe(title('radio: focus indicator'), () => {
+    test('standalone radio should be focusable', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-radio-group value="a">
+            <ion-radio value="a" aria-label="Radio">Radio</ion-radio>
+          </ion-radio-group>
+        </ion-app>
+      `,
+        config
+      );
+
+      const radio = page.locator('ion-radio');
+      await expect(radio).toHaveClass(/ion-focusable/);
+    });
+
+    test('radio in a single-input item should not show its own focus indicator', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-radio-group value="a">
+            <ion-item>
+              <ion-radio value="a">Radio</ion-radio>
+            </ion-item>
+          </ion-radio-group>
+        </ion-app>
+      `,
+        config
+      );
+
+      const radio = page.locator('ion-radio');
+      const item = page.locator('ion-item');
+      await expect(radio).not.toHaveClass(/ion-focusable/);
+      await expect(item).toHaveClass(/ion-focusable/);
+    });
+
+    test('radio in a multi-input item should be focusable', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-radio-group value="a">
+              <ion-radio value="a">Radio 1</ion-radio>
+            </ion-radio-group>
+            <ion-radio-group value="b">
+              <ion-radio value="b">Radio 2</ion-radio>
+            </ion-radio-group>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const radios = page.locator('ion-radio');
+      await expect(radios.nth(0)).toHaveClass(/ion-focusable/);
+      await expect(radios.nth(1)).toHaveClass(/ion-focusable/);
+    });
+  });
+});
+
 /**
  * This behavior does not vary across directions
  */
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts b/core/src/components/radio/test/basic/radio.e2e.ts
new file mode 100644
index 00000000000..eae4c6947db
--- /dev/null
+++ b/core/src/components/radio/test/basic/radio.e2e.ts
@@ -0,0 +1,69 @@
+import { expect } from '@playwright/test';
+import { applyKeyboardFocus, configs, test } from '@utils/test/playwright';
+
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('radio: focus visual'), () => {
+    test('should render focus indicator when unchecked', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          #container {
+            width: fit-content;
+            padding: 10px;
+          }
+        </style>
+
+        <ion-app>
+          <div id="container">
+            <ion-radio-group>
+              <ion-radio value="a">Unchecked</ion-radio>
+            </ion-radio-group>
+          </div>
+        </ion-app>
+      `,
+        config
+      );
+
+      const radio = page.locator('ion-radio');
+
+      await applyKeyboardFocus(page, radio);
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`radio-focus`));
+    });
+
+    test('should render focus indicator when checked', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          #container {
+            width: fit-content;
+            padding: 10px;
+          }
+        </style>
+
+        <ion-app>
+          <div id="container">
+            <ion-radio-group value="a">
+              <ion-radio value="a">Checked</ion-radio>
+            </ion-radio-group>
+          </div>
+        </ion-app>
+      `,
+        config
+      );
+
+      const radio = page.locator('ion-radio');
+
+      await applyKeyboardFocus(page, radio);
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`radio-focus-checked`));
+    });
+  });
+});
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5ff92f5d5e3
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ab13bbaa13c
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..f8c844b5351
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..af756eb1be7
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c0e80459e81
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..e1f652a322a
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-checked-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..749bbf84999
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..6a7c560e590
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..595e0f81d24
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..828d7ce2f16
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ff068041cb7
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..a89aa121456
Binary files /dev/null and b/core/src/components/radio/test/basic/radio.e2e.ts-snapshots/radio-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/index.html b/core/src/components/radio/test/item/index.html
index 36e46779fd2..e33e518d156 100644
--- a/core/src/components/radio/test/item/index.html
+++ b/core/src/components/radio/test/item/index.html
@@ -15,7 +15,7 @@
     <style>
       .grid {
         display: grid;
-        grid-template-columns: repeat(3, minmax(250px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         grid-row-gap: 20px;
         grid-column-gap: 20px;
       }
@@ -205,6 +205,23 @@ <h1>Multiline Label</h1>
             </ion-radio-group>
           </div>
         </div>
+
+        <h1>Multiple Inputs</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Two Radios (multi-input item). Focus is on the input, not the item.</h2>
+            <ion-list>
+              <ion-item>
+                <ion-radio-group allow-empty-selection value="1"
+                  ><ion-radio value="1" justify="start">Radio 1</ion-radio></ion-radio-group
+                >
+                <ion-radio-group allow-empty-selection value="2"
+                  ><ion-radio value="2" justify="start">Radio 2</ion-radio></ion-radio-group
+                >
+              </ion-item>
+            </ion-list>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
   </body>
diff --git a/core/src/components/radio/test/item/radio.e2e.ts b/core/src/components/radio/test/item/radio.e2e.ts
index 8c9fd4be951..c72e0beb4f9 100644
--- a/core/src/components/radio/test/item/radio.e2e.ts
+++ b/core/src/components/radio/test/item/radio.e2e.ts
@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
+import { applyKeyboardFocus, configs, test } from '@utils/test/playwright';
 
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('radio: item'), () => {
@@ -80,6 +80,121 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
   });
 });
 
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('radio: multiple inputs in item'), () => {
+    test('should not have visual regressions with multiple radios in an item', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-list>
+            <ion-item>
+              <ion-radio-group value="1"><ion-radio value="1" justify="start">Radio 1</ion-radio></ion-radio-group>
+              <ion-radio-group value="2"><ion-radio value="2" justify="start">Radio 2</ion-radio></ion-radio-group>
+            </ion-item>
+          </ion-list>
+        `,
+        config
+      );
+      const list = page.locator('ion-list');
+      await expect(list).toHaveScreenshot(screenshot(`radio-multiple-in-item`));
+    });
+  });
+});
+
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('radio: focus in item'), () => {
+    test('should render focus indicator in an item', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-radio-group>
+              <ion-radio value="a">Unchecked</ion-radio>
+            </ion-radio-group>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const radio = page.locator('ion-radio');
+      const item = page.locator('ion-item');
+
+      await applyKeyboardFocus(page, radio, item);
+
+      await expect(item).toHaveScreenshot(screenshot(`radio-in-item-focus`));
+    });
+
+    test('should render focus indicator for a checked radio in an item', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-radio-group value="a">
+              <ion-radio value="a">Checked</ion-radio>
+            </ion-radio-group>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const radio = page.locator('ion-radio');
+      const item = page.locator('ion-item');
+
+      await applyKeyboardFocus(page, radio, item);
+
+      await expect(item).toHaveScreenshot(screenshot(`radio-checked-in-item-focus`));
+    });
+
+    test('should render focus indicator for a radio in a clickable item', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item button>
+            <ion-radio-group>
+              <ion-radio value="a">Unchecked</ion-radio>
+            </ion-radio-group>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const radio = page.locator('ion-radio');
+      const item = page.locator('ion-item');
+
+      await applyKeyboardFocus(page, radio);
+
+      await expect(item).toHaveScreenshot(screenshot(`radio-in-clickable-item-focus`));
+    });
+
+    test('should render focus indicator for a radio in a multi-input item', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-radio-group value="a"><ion-radio value="a" justify="start">Radio 1</ion-radio></ion-radio-group>
+            <ion-radio-group value="b"><ion-radio value="b" justify="start">Radio 2</ion-radio></ion-radio-group>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const radio = page.locator('ion-radio').first();
+
+      await applyKeyboardFocus(page, radio);
+
+      const item = page.locator('ion-item');
+
+      await expect(item).toHaveScreenshot(screenshot(`radio-multiple-in-item-focus`));
+    });
+  });
+});
+
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('radio: item functionality'), () => {
     test('clicking padded space within item should click the radio', async ({ page }) => {
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5c7211b0b8d
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..80c70ee387c
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4e2a3638556
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d120afb4dfb
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..492778e530b
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..9dadfb13cc8
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-checked-in-item-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..beed89b0aaa
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..75aad08e4ea
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..95ddb377abb
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..9544d238c3f
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1073146d79a
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..dbb23543c4e
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-clickable-item-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..41b68fe7c60
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f0ce1209c7a
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..061d593a79c
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..484a4e9a797
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..88b7eb635e1
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..4f462c72853
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-in-item-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1b38932e60d
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f0138baedf6
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..8d3807cbe55
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..eb34b39c866
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..81cc7eccb03
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..6e06fdd42fc
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..c28b89c7f85
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..04e2a44d04d
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-ios-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ee5e077c527
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-md-ltr-Mobile-Chrome-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..bf455187b83
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-md-ltr-Mobile-Firefox-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..98f7c4baa72
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-md-ltr-Mobile-Safari-linux.png b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..7dc2b44cc98
Binary files /dev/null and b/core/src/components/radio/test/item/radio.e2e.ts-snapshots/radio-multiple-in-item-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx
index 26e5ef785dd..c3875c8e30e 100644
--- a/core/src/components/range/range.tsx
+++ b/core/src/components/range/range.tsx
@@ -134,10 +134,19 @@ export class Range implements ComponentInterface {
   @Prop() label?: string;
 
   /**
-   * Show two knobs.
+   * If `true`, the range shows two knobs and `value` is an object with `lower`
+   * and `upper` properties. If `false`, the range shows one knob and `value` is
+   * a number.
    */
   @Prop() dualKnobs = false;
 
+  @Watch('dualKnobs')
+  protected dualKnobsChanged() {
+    if (!this.noUpdate) {
+      this.updateRatio();
+    }
+  }
+
   /**
    * Minimum integer value of the range.
    */
diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-scale-ios-ltr-Mobile-Chrome-linux.png
index a74f97f1606..abfba2c5d81 100644
Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/range/test/dual-knobs/index.html b/core/src/components/range/test/dual-knobs/index.html
new file mode 100644
index 00000000000..a477dae62d8
--- /dev/null
+++ b/core/src/components/range/test/dual-knobs/index.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Range - Dual Knobs</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <style>
+      :root {
+        --color-purple: #8b5cf6;
+        --color-blue: var(--ion-color-primary, #0054e9);
+      }
+
+      ion-range::part(bar-active) {
+        background: linear-gradient(to right, var(--color-purple) 0%, var(--color-blue) 100%);
+      }
+
+      ion-range::part(knob-lower) {
+        background: var(--color-purple);
+      }
+
+      ion-range::part(knob-upper) {
+        background: var(--color-blue);
+      }
+    </style>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Range - Dual Knobs</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding">
+        <p>
+          Every range below is assigned <code>{ lower: 20, upper: 80 }</code>. The lower knob is purple while the upper
+          is blue.
+        </p>
+
+        <h2>dualKnobs set on the component</h2>
+        <ion-range id="markup" dual-knobs="true">
+          <span slot="label">20 - 80</span>
+        </ion-range>
+
+        <h2>dualKnobs assigned before value</h2>
+        <ion-range id="dual-knobs-first">
+          <span slot="label">20 - 80</span>
+        </ion-range>
+
+        <h2>dualKnobs assigned after value</h2>
+        <ion-range id="value-first">
+          <span slot="label">20 - 80</span>
+        </ion-range>
+
+        <h2>dualKnobs toggled</h2>
+        <ion-range id="toggled">
+          <span slot="label" id="toggled-label"></span>
+        </ion-range>
+        <ion-button id="toggle-dual-knobs" onclick="toggleDualKnobs()">Toggle Dual Knobs</ion-button>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const dualValue = { lower: 20, upper: 80 };
+
+      document.querySelector('#markup').value = dualValue;
+
+      (async () => {
+        await customElements.whenDefined('ion-range');
+
+        const dualKnobsFirst = document.querySelector('#dual-knobs-first');
+        await dualKnobsFirst.componentOnReady();
+        dualKnobsFirst.dualKnobs = true;
+        dualKnobsFirst.value = dualValue;
+
+        /**
+         * Frameworks apply bindings in template order, so a template that lists
+         * `value` before `dualKnobs` assigns them in this order. `dualKnobs` is
+         * still false when the value lands, so the object collapses to its
+         * `upper` value and only one ratio is ever computed.
+         */
+        const valueFirst = document.querySelector('#value-first');
+        await valueFirst.componentOnReady();
+        valueFirst.value = dualValue;
+        valueFirst.dualKnobs = true;
+
+        const toggled = document.querySelector('#toggled');
+        await toggled.componentOnReady();
+        toggled.value = dualValue;
+        updateToggledLabel();
+      })();
+
+      /**
+       * A single knob range ignores the `lower` half of an object value, so the
+       * label only reads as a range once `dualKnobs` is on.
+       */
+      const updateToggledLabel = () => {
+        const { dualKnobs, value } = document.querySelector('#toggled');
+        document.querySelector('#toggled-label').textContent = dualKnobs
+          ? `${value.lower} - ${value.upper}`
+          : `${value.upper}`;
+      };
+
+      // Toggling dualKnobs at runtime should reposition the knobs.
+      const toggleDualKnobs = () => {
+        const toggled = document.querySelector('#toggled');
+        toggled.dualKnobs = !toggled.dualKnobs;
+        updateToggledLabel();
+      };
+    </script>
+  </body>
+</html>
diff --git a/core/src/components/range/test/dual-knobs/range.e2e.ts b/core/src/components/range/test/dual-knobs/range.e2e.ts
new file mode 100644
index 00000000000..f3e8e610568
--- /dev/null
+++ b/core/src/components/range/test/dual-knobs/range.e2e.ts
@@ -0,0 +1,82 @@
+import type { Locator } from '@playwright/test';
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+const DUAL_VALUE = { lower: 20, upper: 80 };
+
+/**
+ * Returns the value each knob is positioned at. Sorted low to high because knob
+ * A is not guaranteed to be the knob holding the lower value.
+ */
+const knobValues = async (range: Locator) => {
+  const values: string[] = await range
+    .locator('.range-knob-handle')
+    .evaluateAll((els: HTMLElement[]) => els.map((el) => el.getAttribute('aria-valuenow')!));
+
+  return values.sort((a, b) => parseFloat(a) - parseFloat(b));
+};
+
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => {
+  test.describe(title('range: dual knobs'), () => {
+    test('should position knobs when dualKnobs is assigned before value', async ({ page }) => {
+      await page.setContent(`<ion-range aria-label="range"></ion-range>`, config);
+
+      const range = page.locator('ion-range');
+      await range.evaluate((el: HTMLIonRangeElement, value) => {
+        el.dualKnobs = true;
+        el.value = value;
+      }, DUAL_VALUE);
+      await page.waitForChanges();
+
+      expect(await knobValues(range)).toEqual(['20', '80']);
+
+      // A single knob range ignores the lower half of an object value.
+      await range.evaluate((el: HTMLIonRangeElement) => (el.dualKnobs = false));
+      await page.waitForChanges();
+
+      expect(await knobValues(range)).toEqual(['80']);
+    });
+
+    test('should position knobs when dualKnobs is assigned after value', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/31026',
+      });
+
+      await page.setContent(`<ion-range aria-label="range"></ion-range>`, config);
+
+      const range = page.locator('ion-range');
+      await range.evaluate((el: HTMLIonRangeElement, value) => {
+        el.value = value;
+        el.dualKnobs = true;
+      }, DUAL_VALUE);
+      await page.waitForChanges();
+
+      expect(await knobValues(range)).toEqual(['20', '80']);
+    });
+
+    test('should reposition knobs when dualKnobs is toggled at runtime', async ({ page }) => {
+      await page.setContent(`<ion-range aria-label="range"></ion-range>`, config);
+
+      const range = page.locator('ion-range');
+      await range.evaluate((el: HTMLIonRangeElement, value) => (el.value = value), DUAL_VALUE);
+      await page.waitForChanges();
+
+      // A single knob range ignores the lower half of an object value.
+      expect(await knobValues(range)).toEqual(['80']);
+
+      await range.evaluate((el: HTMLIonRangeElement) => (el.dualKnobs = true));
+      await page.waitForChanges();
+
+      expect(await knobValues(range)).toEqual(['20', '80']);
+
+      await range.evaluate((el: HTMLIonRangeElement) => (el.dualKnobs = false));
+      await page.waitForChanges();
+
+      expect(await knobValues(range)).toEqual(['80']);
+    });
+  });
+});
diff --git a/core/src/components/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx
index 9d7c6a7ad06..ecd27fd0965 100644
--- a/core/src/components/refresher/refresher.tsx
+++ b/core/src/components/refresher/refresher.tsx
@@ -2,6 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h, readTask, writeTask } from '@stencil/core';
 import { getTimeGivenProgression } from '@utils/animation/cubic-bezier';
 import {
+  findRefresherScrollHost,
   getScrollElement,
   ION_CONTENT_CLASS_SELECTOR,
   ION_CONTENT_ELEMENT_SELECTOR,
@@ -299,8 +300,19 @@ export class Refresher implements ComponentInterface {
 
     this.scrollEl!.addEventListener('scroll', this.scrollListenerCallback);
 
-    this.gesture = (await import('../../utils/gesture')).createGesture({
-      el: this.scrollEl!,
+    const { createGesture } = await import('../../utils/gesture');
+
+    /**
+     * Awaiting the dynamic import yields to the event loop, so the component can
+     * disconnect before it resolves. disconnectedCallback clears scrollEl, so a
+     * missing scrollEl here means there is nothing left to attach a gesture to.
+     */
+    if (!this.scrollEl) {
+      return;
+    }
+
+    this.gesture = createGesture({
+      el: this.scrollEl,
       gestureName: 'refresher',
       gesturePriority: 31,
       direction: 'y',
@@ -369,8 +381,19 @@ export class Refresher implements ComponentInterface {
       });
     }
 
-    this.gesture = (await import('../../utils/gesture')).createGesture({
-      el: this.scrollEl!,
+    const { createGesture } = await import('../../utils/gesture');
+
+    /**
+     * Awaiting the dynamic import yields to the event loop, so the component can
+     * disconnect before it resolves. disconnectedCallback clears scrollEl, so a
+     * missing scrollEl here means there is nothing left to attach a gesture to.
+     */
+    if (!this.scrollEl) {
+      return;
+    }
+
+    this.gesture = createGesture({
+      el: this.scrollEl,
       gestureName: 'refresher',
       gesturePriority: 31,
       direction: 'y',
@@ -504,7 +527,7 @@ export class Refresher implements ComponentInterface {
      * or the background content element.
      */
     componentOnReady(contentEl, async () => {
-      const customScrollTarget = contentEl.querySelector(ION_CONTENT_CLASS_SELECTOR);
+      const customScrollTarget = findRefresherScrollHost(contentEl);
       /**
        * Query the custom scroll target (if available), first. In refresher implementations,
        * the ion-refresher element will always be a direct child of ion-content (slot="fixed"). By
@@ -526,7 +549,18 @@ export class Refresher implements ComponentInterface {
       if (await shouldUseNativeRefresher(this.el, getIonMode(this))) {
         this.setupNativeRefresher(contentEl);
       } else {
-        this.gesture = (await import('../../utils/gesture')).createGesture({
+        const { createGesture } = await import('../../utils/gesture');
+
+        /**
+         * Awaiting the dynamic import yields to the event loop, so the component can
+         * disconnect before it resolves. A disconnected contentEl means there is
+         * nothing left to attach a gesture to.
+         */
+        if (!contentEl.isConnected) {
+          return;
+        }
+
+        this.gesture = createGesture({
           el: contentEl,
           gestureName: 'refresher',
           gesturePriority: 31,
diff --git a/core/src/components/router/router.tsx b/core/src/components/router/router.tsx
index a5c0c67bf0e..36287043127 100644
--- a/core/src/components/router/router.tsx
+++ b/core/src/components/router/router.tsx
@@ -9,7 +9,7 @@ import type { NavigationHookResult } from '../route/route-interface';
 
 import { ROUTER_INTENT_BACK, ROUTER_INTENT_FORWARD, ROUTER_INTENT_NONE } from './utils/constants';
 import { printRedirects, printRoutes } from './utils/debug';
-import { readNavState, waitUntilNavNode, writeNavState } from './utils/dom';
+import { readNavState, scrollToFragment, waitUntilNavNode, writeNavState } from './utils/dom';
 import type { RouteChain, RouterDirection, RouterEventDetail } from './utils/interface';
 import { findChainForIDs, findChainForSegments, findRouteRedirect } from './utils/matching';
 import { readRedirects, readRoutes } from './utils/parser';
@@ -24,6 +24,7 @@ export class Router implements ComponentInterface {
   private state = 0;
   private lastState = 0;
   private waitPromise?: Promise<void>;
+  private fragmentScrollToken = 0;
 
   @Element() el!: HTMLElement;
 
@@ -67,11 +68,18 @@ export class Router implements ComponentInterface {
       if (typeof canProceed === 'object') {
         const { redirect } = canProceed;
         const path = parsePath(redirect);
-        this.setSegments(path.segments, ROUTER_INTENT_NONE, path.queryString);
-        await this.writeNavStateRoot(path.segments, ROUTER_INTENT_NONE);
+        this.setSegments(path.segments, ROUTER_INTENT_NONE, path.queryString, path.fragment);
+        const result = await this.writeNavStateRoot(path.segments, ROUTER_INTENT_NONE);
+        if (result) {
+          this.maybeScrollToFragment();
+        }
       }
-    } else {
-      await this.onRoutesChanged();
+      return;
+    }
+
+    const result = await this.onRoutesChanged();
+    if (result) {
+      this.maybeScrollToFragment();
     }
   }
 
@@ -93,7 +101,12 @@ export class Router implements ComponentInterface {
         return false;
       }
     }
-    return this.writeNavStateRoot(segments, direction);
+    const result = await this.writeNavStateRoot(segments, direction);
+    if (result) {
+      this.maybeScrollToFragment();
+    }
+
+    return result;
   }
 
   @Listen('ionBackButton', { target: 'document' })
@@ -132,7 +145,7 @@ export class Router implements ComponentInterface {
       const currentPath = this.previousPath ?? '/';
       // Convert currentPath to an URL by pre-pending a protocol and a host to resolve the relative path.
       const url = new URL(path, `https://host/${currentPath}`);
-      path = url.pathname + url.search;
+      path = url.pathname + url.search + url.hash;
     }
 
     let parsedPath = parsePath(path);
@@ -146,8 +159,13 @@ export class Router implements ComponentInterface {
       }
     }
 
-    this.setSegments(parsedPath.segments, direction, parsedPath.queryString);
-    return this.writeNavStateRoot(parsedPath.segments, direction, animation);
+    this.setSegments(parsedPath.segments, direction, parsedPath.queryString, parsedPath.fragment);
+    const result = await this.writeNavStateRoot(parsedPath.segments, direction, animation);
+    if (result) {
+      this.maybeScrollToFragment();
+    }
+
+    return result;
   }
 
   /** Go back to previous page in the window.history. */
@@ -188,7 +206,12 @@ export class Router implements ComponentInterface {
       return false;
     }
 
-    this.setSegments(segments, direction);
+    // navChanged is an outlet-driven URL sync. Only keep the fragment when
+    // the path is unchanged; on a real navigation it refers to an anchor on
+    // the page being left and would be stale.
+    const newPath = generatePath(segments);
+    const fragment = newPath === this.previousPath ? this.getFragment() : undefined;
+    this.setSegments(segments, direction, undefined, fragment);
 
     await this.safeWriteNavState(outlet, chain, ROUTER_INTENT_NONE, segments, null, ids.length);
     return true;
@@ -245,8 +268,8 @@ export class Router implements ComponentInterface {
     let redirectFrom: string[] | null = null;
 
     if (redirect) {
-      const { segments: toSegments, queryString } = redirect.to!;
-      this.setSegments(toSegments, direction, queryString);
+      const { segments: toSegments, queryString, fragment } = redirect.to!;
+      this.setSegments(toSegments, direction, queryString, fragment);
       redirectFrom = redirect.from;
       segments = toSegments;
     }
@@ -361,15 +384,38 @@ export class Router implements ComponentInterface {
     return changed;
   }
 
-  private setSegments(segments: string[], direction: RouterDirection, queryString?: string) {
+  private setSegments(segments: string[], direction: RouterDirection, queryString?: string, fragment?: string) {
     this.state++;
-    writeSegments(window.history, this.root, this.useHash, segments, direction, this.state, queryString);
+    // Every URL write invalidates any in-flight fragment scroll: a newer nav
+    // (with or without a fragment, successful or not) should always supersede.
+    this.fragmentScrollToken++;
+    writeSegments(window.history, this.root, this.useHash, segments, direction, this.state, queryString, fragment);
   }
 
   private getSegments(): string[] | null {
     return readSegments(window.location, this.root, this.useHash);
   }
 
+  private getFragment(): string | undefined {
+    // In hash mode the URL fragment trails a second `#` (e.g. `#/path#anchor`);
+    // parse the routing portion to extract it.
+    const raw = this.useHash ? parsePath(window.location.hash.slice(1)).fragment : window.location.hash.slice(1);
+    return raw ? raw : undefined;
+  }
+
+  /**
+   * Fires a best-effort scroll to the current URL fragment. The scroll bails
+   * if a newer `setSegments` advances `fragmentScrollToken` mid-flight.
+   */
+  private maybeScrollToFragment() {
+    const fragment = this.getFragment();
+    if (!fragment) return;
+    const token = this.fragmentScrollToken;
+    // Fire-and-forget; the returned promise resolves only after the scroll
+    // animation completes, which the caller does not need to await.
+    scrollToFragment(fragment, () => token === this.fragmentScrollToken).catch(() => {});
+  }
+
   private routeChangeEvent(toSegments: string[], redirectFromSegments: string[] | null): RouterEventDetail | null {
     const from = this.previousPath;
     const to = generatePath(toSegments);
diff --git a/core/src/components/router/test/basic/index.html b/core/src/components/router/test/basic/index.html
index 406adb95f49..12d459caa50 100644
--- a/core/src/components/router/test/basic/index.html
+++ b/core/src/components/router/test/basic/index.html
@@ -26,7 +26,10 @@
           <p><a href='#/two/second-page'>Go to page 2</a></p>
           <p><a href='#/two/three/hola'>Go to page 3 (hola)</a></p>
           <p><a href='#/two/three/something'>Go to page 3 (something)</a></p>
-
+          <p><ion-router-link id="link-with-fragment" href="/two/second-page#anchor">Page 2 with fragment</ion-router-link></p>
+          <p><ion-router-link id="link-with-query-and-fragment" href="/two/three/hola?flag=true#anchor">Page 3 with query and fragment</ion-router-link></p>
+          <div style="height: 2000px;">page-one spacer</div>
+          <h2 id="anchor">page-one anchor (must lose to the active page's anchor)</h2>
         </ion-content>`;
         }
       }
@@ -42,6 +45,9 @@
         <ion-content>
           <p><a href='#/two/three/hola'>Go to page 3 (hola)</a></p>
           <p><a href='#/two/three/hello'>Go to page 3 (hello)</a></p>
+          <div style="height: 2000px;">spacer</div>
+          <h2 id="anchor">Anchor target</h2>
+          <div style="height: 500px;">trailing spacer</div>
         </ion-content>`;
         }
       }
@@ -60,6 +66,7 @@
           <p><a href='#/two/second-page'>Go to page 2</a></p>
           <p><a href='#/two/'>Go to page 1</a></p>
           <ion-button id="btn-rel" href="./relative?param=1">Page 3 (relative)</ion-button>
+          <ion-button id="btn-rel-with-fragment" href="./relative#anchor">Page 3 (relative with fragment)</ion-button>
           <ion-button id="btn-abs" href="/two/three/absolute">Page 3 (absolute)</ion-button>
         </ion-content>`;
         }
diff --git a/core/src/components/router/test/basic/router.e2e.ts b/core/src/components/router/test/basic/router.e2e.ts
index 33f4e37d33b..ed9faab3532 100644
--- a/core/src/components/router/test/basic/router.e2e.ts
+++ b/core/src/components/router/test/basic/router.e2e.ts
@@ -1,6 +1,21 @@
 import { expect } from '@playwright/test';
+import type { E2EPage } from '@utils/test/playwright';
 import { configs, test } from '@utils/test/playwright';
 
+/**
+ * Waits until `page-two`'s `ion-content` has scrolled past the fixture's 2000px
+ * spacer. The anchor target sits below the spacer, so a successful fragment
+ * scroll must move `scrollTop` well past it; a regression that scrolled by
+ * only a handful of pixels would fail this threshold.
+ */
+const waitForAnchorScrolled = (page: E2EPage) =>
+  page.waitForFunction(async () => {
+    const content = document.querySelector('page-two ion-content') as HTMLIonContentElement | null;
+    if (!content) return false;
+    const scrollEl = await content.getScrollElement();
+    return scrollEl.scrollTop > 1500;
+  });
+
 /**
  * This behavior does not vary across modes/directions.
  */
@@ -27,6 +42,188 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
 
       expect(page.url()).toContain('#/two/three/absolute');
     });
+
+    test('should route when ion-router-link href contains a fragment', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/19365',
+      });
+      const errors: string[] = [];
+      page.on('pageerror', (e) => errors.push(e.message));
+      page.on('console', (msg) => {
+        if (msg.type() === 'error') errors.push(msg.text());
+      });
+
+      await page.goto(`/src/components/router/test/basic#/two`, config);
+      await page.click('#link-with-fragment');
+
+      await expect(page.locator('page-two')).toBeVisible();
+      expect(page.url()).toContain('#/two/second-page#anchor');
+      expect(errors.filter((m) => m.includes('not part of the routing set'))).toEqual([]);
+    });
+
+    test('should route when ion-router-link href contains both query and fragment', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/19365',
+      });
+      await page.goto(`/src/components/router/test/basic#/two`, config);
+      await page.click('#link-with-query-and-fragment');
+
+      await expect(page.locator('page-three')).toBeVisible();
+      expect(page.url()).toContain('#/two/three/hola?flag=true#anchor');
+    });
+
+    test('should preserve the fragment when push() resolves a relative path', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/19365',
+      });
+      await page.goto(`/src/components/router/test/basic#/two/three/hola`, config);
+      await page.click('#btn-rel-with-fragment');
+
+      expect(page.url()).toContain('#/two/three/relative#anchor');
+    });
+
+    test('should scroll to the fragment target after navigating', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/19365',
+      });
+      await page.goto(`/src/components/router/test/basic#/two`, config);
+      await page.click('#link-with-fragment');
+
+      await expect(page.locator('page-two #anchor')).toBeVisible();
+      await waitForAnchorScrolled(page);
+    });
+
+    test('should scroll to the fragment target on initial deep-link load', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/19365',
+      });
+      // Land on the fixture without a fragment first so the test helper can
+      // attach its query params (it appends them after the hash, which would
+      // otherwise pollute the fragment). Once loaded we replaceState to a URL
+      // that includes the fragment, then reload to simulate a true cold open.
+      await page.goto(`/src/components/router/test/basic#/two`, config);
+      await page.evaluate(() => {
+        const { origin, pathname, search } = window.location;
+        window.history.replaceState({}, '', `${origin}${pathname}${search}#/two/second-page#anchor`);
+      });
+      await page.reload();
+
+      await expect(page.locator('page-two #anchor')).toBeVisible();
+      await waitForAnchorScrolled(page);
+    });
+
+    test('should scroll on deep-link load even when an inactive tab has hydrated', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/19365',
+      });
+      // Inactive `ion-tab` elements carry `.ion-page` but use `.tab-hidden`
+      // instead of `.ion-page-hidden`. The fixture's inline `tab-four` is one
+      // such sibling. Waiting for it to hydrate before reload makes the
+      // active-page lookup deterministic across runs.
+      await page.goto(`/src/components/router/test/basic#/two`, config);
+      await page.waitForFunction(() => !!document.querySelector('ion-tab[tab="tab-four"].hydrated'));
+      await page.evaluate(() => {
+        const { origin, pathname, search } = window.location;
+        window.history.replaceState({}, '', `${origin}${pathname}${search}#/two/second-page#anchor`);
+      });
+      await page.reload();
+      await page.waitForFunction(() => !!document.querySelector('ion-tab[tab="tab-four"].hydrated'));
+
+      await expect(page.locator('page-two #anchor')).toBeVisible();
+      await waitForAnchorScrolled(page);
+    });
+
+    test('should scope the fragment lookup to the active page', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/19365',
+      });
+      // page-one and page-two both expose `id="anchor"`. page-one is kept in
+      // the DOM as `.ion-page-hidden` after the push; a document-wide
+      // `getElementById` would return its anchor first. The router must scope
+      // the lookup to the active page so page-two's anchor wins.
+      await page.goto(`/src/components/router/test/basic#/two`, config);
+      await page.click('#link-with-fragment');
+
+      await expect(page.locator('page-two #anchor')).toBeVisible();
+      await waitForAnchorScrolled(page);
+
+      // page-one is still in the DOM but should not have been scrolled.
+      const pageOneScrollTop = await page.evaluate(async () => {
+        const content = document.querySelector('page-one ion-content') as HTMLIonContentElement | null;
+        if (!content) return 0;
+        const scrollEl = await content.getScrollElement();
+        return scrollEl.scrollTop;
+      });
+      expect(pageOneScrollTop).toBeLessThan(100);
+    });
+
+    test('should drop a stale fragment when navChanged fires for a different path', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/19365',
+      });
+      // Land on a URL with a fragment, then trigger a tab switch. The tab
+      // outlet emits `navChanged` for the new path; the fragment referred to
+      // an anchor on the previous page and must not survive the rewrite.
+      await page.goto(`/src/components/router/test/basic#/two/second-page#anchor`, config);
+      await expect(page.locator('page-two')).toBeVisible();
+
+      await page.click('#tab-button-tab-one');
+
+      await expect(page.locator('tab-one')).toBeVisible();
+      await page.waitForFunction(() => !window.location.hash.includes('#anchor'));
+      expect(page.url()).not.toContain('#anchor');
+    });
+
+    test('should cancel an in-flight fragment scroll when a newer navigation supersedes it', async ({
+      page,
+    }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/19365',
+      });
+      // Two rapid pushes: the first targets a fragment (begins polling +
+      // smooth scroll), the second arrives before the first lands and clears
+      // the fragment. The cancellation token must abort the first scroll so
+      // we end up at the top of the page, not parked at #anchor.
+      await page.goto(`/src/components/router/test/basic#/two`, config);
+      await expect(page.locator('page-one')).toBeVisible();
+
+      await page.evaluate(async () => {
+        const router = document.querySelector('ion-router') as HTMLIonRouterElement;
+        router.push('/two/second-page#anchor');
+        await router.push('/two/second-page');
+      });
+
+      await expect(page.locator('page-two')).toBeVisible();
+      // Wait for page-two's scrollTop to stabilise across two consecutive
+      // frames. A scroll triggered by the un-cancelled first push would
+      // still be animating when the assertion runs.
+      await page.waitForFunction(async () => {
+        const content = document.querySelector('page-two ion-content') as HTMLIonContentElement | null;
+        if (!content) return false;
+        const scrollEl = await content.getScrollElement();
+        const first = scrollEl.scrollTop;
+        await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
+        return scrollEl.scrollTop === first;
+      });
+
+      const pageTwoScrollTop = await page.evaluate(async () => {
+        const content = document.querySelector('page-two ion-content') as HTMLIonContentElement | null;
+        if (!content) return -1;
+        const scrollEl = await content.getScrollElement();
+        return scrollEl.scrollTop;
+      });
+      expect(pageTwoScrollTop).toBeLessThan(100);
+      expect(page.url()).not.toContain('#anchor');
+    });
   });
 
   test.describe(title('router: tabs'), () => {
diff --git a/core/src/components/router/test/dom.spec.tsx b/core/src/components/router/test/dom.spec.tsx
new file mode 100644
index 00000000000..c8b47b485e7
--- /dev/null
+++ b/core/src/components/router/test/dom.spec.tsx
@@ -0,0 +1,99 @@
+import { scrollToFragment } from '../utils/dom';
+
+describe('scrollToFragment', () => {
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <div class="ion-page">
+        <h2 id="target">target</h2>
+      </div>
+    `;
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('should return false for null/undefined/empty fragment', async () => {
+    expect(await scrollToFragment(undefined)).toBe(false);
+    expect(await scrollToFragment('')).toBe(false);
+  });
+
+  it('should find and scroll to an existing target', async () => {
+    // No ion-content here, so the function falls back to scrollIntoView. We
+    // assert the truthy return (target found, scroll attempted) rather than
+    // jsdom-specific scroll state.
+    expect(await scrollToFragment('target')).toBe(true);
+  });
+
+  it('should not match similarly named fragments', async () => {
+    // The lookup uses an exact `#id` selector, so partial/substring matches
+    // must not resolve. Regression guard for any future refactor that swaps
+    // the selector for fuzzy matching.
+    expect(await scrollToFragment('target2')).toBe(false);
+    expect(await scrollToFragment('targe')).toBe(false);
+  });
+
+  it('should return false when shouldContinue is false from the start', async () => {
+    // The target exists in the DOM, so the only reason this can return false
+    // is the cancellation predicate firing inside findFragmentTarget.
+    expect(await scrollToFragment('target', () => false)).toBe(false);
+  });
+
+  it('should respect shouldContinue mid-poll when the target is missing', async () => {
+    // Target is not in the DOM; findFragmentTarget enters its poll loop.
+    // shouldContinue flips false on the third call, which must abort the loop.
+    let calls = 0;
+    const result = await scrollToFragment('missing', () => ++calls <= 2);
+    expect(result).toBe(false);
+    expect(calls).toBeGreaterThan(2);
+  });
+
+  it('should not call shouldContinue after returning early on null fragment', async () => {
+    let calls = 0;
+    await scrollToFragment(undefined, () => {
+      calls++;
+      return true;
+    });
+    expect(calls).toBe(0);
+  });
+
+  it('should reject a target whose ancestor is .ion-page-hidden', async () => {
+    // Back-stack pages stay in the DOM with `.ion-page-hidden`. A target
+    // matched only on a hidden page must not win.
+    document.body.innerHTML = `
+      <div class="ion-page ion-page-hidden">
+        <h2 id="stale">stale</h2>
+      </div>
+    `;
+    expect(await scrollToFragment('stale')).toBe(false);
+  });
+
+  it('should reject a target whose ancestor is .tab-hidden', async () => {
+    // Inactive `ion-tab` elements carry `.ion-page` but use `.tab-hidden`
+    // (not `.ion-page-hidden`). A target inside an inactive tab must not win;
+    // a naive "last `.ion-page:not(.ion-page-hidden)`" pick would otherwise
+    // land on it.
+    document.body.innerHTML = `
+      <div class="ion-page tab-hidden">
+        <h2 id="in-inactive-tab">stale</h2>
+      </div>
+    `;
+    expect(await scrollToFragment('in-inactive-tab')).toBe(false);
+  });
+
+  it('should accept a target inside a sibling non-hidden ion-page', async () => {
+    // During transitions multiple `.ion-page` elements may briefly coexist
+    // without `.ion-page-hidden`. A target inside any non-hidden page must
+    // still resolve.
+    document.body.innerHTML = `
+      <div class="ion-page ion-page-hidden">
+        <h2 id="lookup">in hidden page</h2>
+      </div>
+      <div class="ion-page">
+        <h2 id="other">other</h2>
+      </div>
+    `;
+    // Lookup of 'other' must succeed even though a hidden sibling page exists.
+    expect(await scrollToFragment('other')).toBe(true);
+  });
+});
diff --git a/core/src/components/router/test/path.spec.tsx b/core/src/components/router/test/path.spec.tsx
index 48e366aebca..e8e398d9389 100644
--- a/core/src/components/router/test/path.spec.tsx
+++ b/core/src/components/router/test/path.spec.tsx
@@ -48,6 +48,47 @@ describe('parsePath', () => {
     expect(parsePath('path/to/file.js?').queryString).toEqual('');
     expect(parsePath('path/to/file.js?a=b').queryString).toEqual('a=b');
   });
+
+  it('should strip the fragment from segments and return it', () => {
+    const result = parsePath('/catalog#pens');
+    expect(result.segments).toEqual(['catalog']);
+    expect(result.fragment).toEqual('pens');
+  });
+
+  it('should parse fragment alongside query string (query first)', () => {
+    const result = parsePath('/catalog?x=1#pens');
+    expect(result.segments).toEqual(['catalog']);
+    expect(result.queryString).toEqual('x=1');
+    expect(result.fragment).toEqual('pens');
+  });
+
+  it('should treat "?" inside fragment as part of the fragment', () => {
+    // Per RFC 3986 the fragment starts at the first "#" and runs to the end.
+    const result = parsePath('/catalog#pens?x=1');
+    expect(result.segments).toEqual(['catalog']);
+    expect(result.queryString).toBeUndefined();
+    expect(result.fragment).toEqual('pens?x=1');
+  });
+
+  it('should parse fragment-only path', () => {
+    const result = parsePath('#pens');
+    expect(result.segments).toEqual(['']);
+    expect(result.fragment).toEqual('pens');
+  });
+
+  it('should leave fragment undefined when there is no "#"', () => {
+    expect(parsePath('/catalog').fragment).toBeUndefined();
+    expect(parsePath('/catalog?x=1').fragment).toBeUndefined();
+    expect(parsePath(null).fragment).toBeUndefined();
+    expect(parsePath(undefined).fragment).toBeUndefined();
+  });
+
+  it('should preserve percent-encoded characters in the fragment', () => {
+    // parsePath keeps the fragment in its URL-encoded form; decoding for id
+    // matching is the consumer's responsibility (see `scrollToFragment`).
+    expect(parsePath('/catalog#sec%20one').fragment).toEqual('sec%20one');
+    expect(parsePath('/catalog#%E4%B8%AD%E6%96%87').fragment).toEqual('%E4%B8%AD%E6%96%87');
+  });
 });
 
 describe('generatePath', () => {
@@ -243,6 +284,31 @@ describe('writeSegments', () => {
     writeSegments(history, '/path/to/', true, ['second', 'page'], ROUTER_INTENT_FORWARD, 123, 'flag=true');
     expect(history.pushState).toHaveBeenCalledWith(123, '', '#/path/to/second/page?flag=true');
   });
+
+  it('should append the fragment after the query string (no hash)', () => {
+    const history = mockHistory();
+    writeSegments(history, '/', false, ['catalog'], ROUTER_INTENT_FORWARD, 1, 'x=1', 'pens');
+    expect(history.pushState).toHaveBeenCalledWith(1, '', '/catalog?x=1#pens');
+  });
+
+  it('should append the fragment when there is no query string (no hash)', () => {
+    const history = mockHistory();
+    writeSegments(history, '/', false, ['catalog'], ROUTER_INTENT_FORWARD, 1, undefined, 'pens');
+    expect(history.pushState).toHaveBeenCalledWith(1, '', '/catalog#pens');
+  });
+
+  it('should append the fragment in hash routing mode', () => {
+    // In hash routing the routing "#" wraps the path; the URL fragment is a second "#" appended at the end.
+    const history = mockHistory();
+    writeSegments(history, '/', true, ['catalog'], ROUTER_INTENT_FORWARD, 1, undefined, 'pens');
+    expect(history.pushState).toHaveBeenCalledWith(1, '', '#/catalog#pens');
+  });
+
+  it('should omit the fragment when none is provided', () => {
+    const history = mockHistory();
+    writeSegments(history, '/', false, ['catalog'], ROUTER_INTENT_FORWARD, 1);
+    expect(history.pushState).toHaveBeenCalledWith(1, '', '/catalog');
+  });
 });
 
 function mockHistory(): History {
diff --git a/core/src/components/router/utils/dom.ts b/core/src/components/router/utils/dom.ts
index c10b34d0840..d2b23e095dc 100644
--- a/core/src/components/router/utils/dom.ts
+++ b/core/src/components/router/utils/dom.ts
@@ -1,4 +1,5 @@
-import { componentOnReady } from '@utils/helpers';
+import { findClosestIonContent, getScrollElement, isIonContent } from '@utils/content';
+import { componentOnReady, raf } from '@utils/helpers';
 import { printIonError } from '@utils/logging';
 
 import type { AnimationBuilder } from '../../../interface';
@@ -81,6 +82,126 @@ export const readNavState = async (root: HTMLElement | undefined) => {
   return { ids, outlet };
 };
 
+/** Max animation frames `scrollToFragment` polls while waiting for the target to mount. */
+const FRAGMENT_POLL_FRAMES = 30;
+
+/** Duration (ms) of the smooth-scroll animation that lands on the fragment target. */
+const FRAGMENT_SCROLL_DURATION = 300;
+
+const nextFrame = () => new Promise<void>((resolve) => raf(() => resolve()));
+
+/**
+ * Returns true when `el` lives inside an active `.ion-page`. `ion-page-hidden`
+ * marks nav back-stack entries; `tab-hidden` marks inactive `ion-tab` elements.
+ * Either class on the page's ancestor chain disqualifies it. When no `.ion-page`
+ * exists in the document at all (non-router pages), the candidate is accepted
+ * so plain anchors still work.
+ */
+const isInActivePage = (el: HTMLElement): boolean => {
+  const page = el.closest<HTMLElement>('.ion-page');
+  if (page === null) {
+    return document.querySelector('.ion-page') === null;
+  }
+  return page.closest('.ion-page-hidden, .tab-hidden') === null;
+};
+
+/**
+ * Polls across animation frames for an element matching `fragment` that lives
+ * in the active page. Scoping by "last `.ion-page:not(.ion-page-hidden)`" is
+ * unreliable: inactive `ion-tab` siblings carry `.ion-page` (gated by
+ * `.tab-hidden`, not `.ion-page-hidden`) and can be ordered after the leaf.
+ * Instead, locate candidates globally and walk them from last to first,
+ * accepting the deepest one whose `.ion-page` ancestor is not hidden. The
+ * last-to-first order preserves leaf-most preference for nested outlets.
+ */
+const findFragmentTarget = async (fragment: string, shouldContinue: () => boolean): Promise<HTMLElement | null> => {
+  // CSS.escape is unavailable on very old WebViews; the fallback path uses
+  // `getElementById` and drops the legacy `<a name>` branch.
+  const canEscape = typeof CSS !== 'undefined' && typeof CSS.escape === 'function';
+  const escaped = canEscape ? CSS.escape(fragment) : null;
+
+  for (let i = 0; i < FRAGMENT_POLL_FRAMES; i++) {
+    if (!shouldContinue()) return null;
+
+    let candidates: HTMLElement[] = [];
+    if (escaped !== null) {
+      try {
+        candidates = [...document.querySelectorAll<HTMLElement>(`#${escaped}, a[name="${escaped}"]`)];
+      } catch {
+        candidates = [...document.querySelectorAll<HTMLElement>(`#${escaped}`)];
+      }
+    } else {
+      const byId = document.getElementById(fragment);
+      if (byId !== null) candidates = [byId];
+    }
+
+    for (let j = candidates.length - 1; j >= 0; j--) {
+      if (isInActivePage(candidates[j])) {
+        return candidates[j];
+      }
+    }
+    await nextFrame();
+  }
+
+  return null;
+};
+
+/**
+ * Scrolls to the element whose id matches `fragment`, falling back to a legacy
+ * `<a name="...">` target. When the target lives inside an `ion-content`, the
+ * scroll uses its smooth-animated scroll API; otherwise it falls back to
+ * `Element.scrollIntoView`.
+ *
+ * `shouldContinue` lets callers cancel in-flight scrolls when a newer
+ * navigation supersedes this one. It is checked between async steps.
+ */
+export const scrollToFragment = async (
+  fragment: string | undefined,
+  shouldContinue: () => boolean = () => true
+): Promise<boolean> => {
+  if (fragment == null || fragment === '') {
+    return false;
+  }
+
+  // URL fragments are percent-encoded but element ids are not; decode for
+  // matching per the HTML spec's indicated-element resolution.
+  let decoded: string;
+  try {
+    decoded = decodeURIComponent(fragment);
+  } catch {
+    decoded = fragment;
+  }
+
+  const target = await findFragmentTarget(decoded, shouldContinue);
+  if (!target || !shouldContinue()) {
+    return false;
+  }
+
+  // Best-effort scroll: swallow exceptions if the page tears down mid-animation.
+  try {
+    const contentHost = findClosestIonContent(target);
+    if (contentHost && isIonContent(contentHost)) {
+      const content = contentHost as HTMLIonContentElement;
+      const scrollEl = await getScrollElement(content);
+      // Yield one frame so the newly mounted target's layout is stable
+      // before we measure its rect.
+      await nextFrame();
+      if (!shouldContinue()) return false;
+      const targetRect = target.getBoundingClientRect();
+      const scrollRect = scrollEl.getBoundingClientRect();
+      const top = targetRect.top - scrollRect.top + scrollEl.scrollTop;
+      // Preserve scrollLeft so RTL and horizontally-scrolling pages aren't reset.
+      await content.scrollToPoint(scrollEl.scrollLeft, top, FRAGMENT_SCROLL_DURATION);
+    } else {
+      target.scrollIntoView({ behavior: 'smooth' });
+    }
+    return true;
+  } catch (e) {
+    printIonError('[ion-router] - Exception in scrollToFragment:', e);
+    return false;
+  }
+};
+
 export const waitUntilNavNode = (): Promise<void> => {
   if (searchNavNode(document.body)) {
     return Promise.resolve();
diff --git a/core/src/components/router/utils/interface.ts b/core/src/components/router/utils/interface.ts
index caeb6e57c08..c0457da9680 100644
--- a/core/src/components/router/utils/interface.ts
+++ b/core/src/components/router/utils/interface.ts
@@ -57,6 +57,8 @@ export interface ParsedRoute {
   segments: string[];
   /** Unparsed query string. */
   queryString?: string;
+  /** URL fragment (the part after `#`), without the leading `#`. */
+  fragment?: string;
 }
 
 export type RouterDirection = 'forward' | 'back' | 'root';
diff --git a/core/src/components/router/utils/path.ts b/core/src/components/router/utils/path.ts
index 4305d84e986..dad058c56b0 100644
--- a/core/src/components/router/utils/path.ts
+++ b/core/src/components/router/utils/path.ts
@@ -8,7 +8,7 @@ export const generatePath = (segments: string[]): string => {
   return '/' + path;
 };
 
-const generateUrl = (segments: string[], useHash: boolean, queryString?: string) => {
+const generateUrl = (segments: string[], useHash: boolean, queryString?: string, fragment?: string) => {
   let url = generatePath(segments);
   if (useHash) {
     url = '#' + url;
@@ -16,6 +16,9 @@ const generateUrl = (segments: string[], useHash: boolean, queryString?: string)
   if (queryString !== undefined) {
     url += '?' + queryString;
   }
+  if (fragment !== undefined) {
+    url += '#' + fragment;
+  }
   return url;
 };
 
@@ -26,9 +29,10 @@ export const writeSegments = (
   segments: string[],
   direction: RouterDirection,
   state: number,
-  queryString?: string
+  queryString?: string,
+  fragment?: string
 ) => {
-  const url = generateUrl([...parsePath(root).segments, ...segments], useHash, queryString);
+  const url = generateUrl([...parsePath(root).segments, ...segments], useHash, queryString, fragment);
   if (direction === ROUTER_INTENT_FORWARD) {
     history.pushState(state, '', url);
   } else {
@@ -97,13 +101,23 @@ export const readSegments = (loc: Location, root: string, useHash: boolean): str
 /**
  * Parses the path to:
  * - segments an array of '/' separated parts,
- * - queryString (undefined when no query string).
+ * - queryString (undefined when no query string),
+ * - fragment (undefined when no `#`).
  */
 export const parsePath = (path: string | undefined | null): ParsedRoute => {
   let segments = [''];
   let queryString;
+  let fragment;
 
   if (path != null) {
+    // The fragment ("#") starts a section that runs to the end of the URL.
+    // Anything inside it (including "?") is part of the fragment per RFC 3986.
+    const fragStart = path.indexOf('#');
+    if (fragStart > -1) {
+      fragment = path.substring(fragStart + 1);
+      path = path.substring(0, fragStart);
+    }
+
     const qsStart = path.indexOf('?');
     if (qsStart > -1) {
       queryString = path.substring(qsStart + 1);
@@ -120,5 +134,5 @@ export const parsePath = (path: string | undefined | null): ParsedRoute => {
     }
   }
 
-  return { segments, queryString };
+  return { segments, queryString, fragment };
 };
diff --git a/core/src/components/searchbar/searchbar.tsx b/core/src/components/searchbar/searchbar.tsx
index 2830d75b73c..d031db55884 100644
--- a/core/src/components/searchbar/searchbar.tsx
+++ b/core/src/components/searchbar/searchbar.tsx
@@ -32,6 +32,7 @@ export class Searchbar implements ComponentInterface {
   private inheritedAttributes: Attributes = {};
   private loadTimeout: ReturnType<typeof setTimeout> | undefined;
   private clearTimeout: ReturnType<typeof setTimeout> | undefined;
+  private searchIconResizeObserver?: ResizeObserver;
 
   /**
    * The value of the input when the textarea is focused.
@@ -302,6 +303,7 @@ export class Searchbar implements ComponentInterface {
     if (this.clearTimeout) {
       clearTimeout(this.clearTimeout);
     }
+    this.searchIconResizeObserver?.disconnect();
   }
 
   private emitStyle() {
@@ -539,7 +541,26 @@ export class Searchbar implements ComponentInterface {
          * such as Dynamic Type on iOS as well as 8px
          * of padding.
          */
-        const iconLeft = 'calc(50% - ' + (textWidth / 2 + iconEl.clientWidth + 8) + 'px)';
+        const iconWidth = iconEl.clientWidth;
+
+        /**
+         * Fix for https://github.com/ionic-team/ionic-framework/issues/30434:
+         * iconEl.clientWidth can very briefly be 0 when this is called from componentDidLoad.
+         * If it is zero, set up a ResizeObserver and call this function when it observes a width greater than 0.
+         */
+        if (iconWidth === 0) {
+          this.searchIconResizeObserver?.disconnect();
+          this.searchIconResizeObserver = new ResizeObserver((entries) => {
+            if (entries[0].contentRect.width > 0) {
+              this.searchIconResizeObserver?.disconnect();
+              this.positionPlaceholder();
+            }
+          });
+          this.searchIconResizeObserver?.observe(iconEl);
+          return;
+        }
+
+        const iconLeft = 'calc(50% - ' + (textWidth / 2 + iconWidth + 8) + 'px)';
 
         // Set the input padding start and icon margin start
         if (rtl) {
diff --git a/core/src/components/segment-view/test/disabled/segment-view.e2e.ts-snapshots/segment-view-disabled-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment-view/test/disabled/segment-view.e2e.ts-snapshots/segment-view-disabled-ios-ltr-Mobile-Chrome-linux.png
index aee8b589f9c..e9993f88a63 100644
Binary files a/core/src/components/segment-view/test/disabled/segment-view.e2e.ts-snapshots/segment-view-disabled-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment-view/test/disabled/segment-view.e2e.ts-snapshots/segment-view-disabled-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-ios-ltr-Mobile-Chrome-linux.png
index 6311fd47f81..1bf3edf214a 100644
Binary files a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-ios-rtl-Mobile-Chrome-linux.png
index 463a3799af4..c6a84ca61a9 100644
Binary files a/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/segment/test/icon/segment.e2e.ts-snapshots/segment-icons-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index e39856c2482..8701a7e19a0 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -1228,7 +1228,8 @@ export class Select implements ComponentInterface {
      * TODO(FW-5592): Remove hasStartEndSlots condition
      */
     const labelShouldFloat =
-      labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
+      labelPlacement === 'stacked' ||
+      (labelPlacement === 'floating' && (hasValue || hasFocus || isExpanded || hasStartEndSlots));
 
     return (
       <Host
diff --git a/core/src/components/select/test/a11y/select.e2e.ts-snapshots/select-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/a11y/select.e2e.ts-snapshots/select-scale-ios-ltr-Mobile-Chrome-linux.png
index e17dc91dc2f..849cd105d5e 100644
Binary files a/core/src/components/select/test/a11y/select.e2e.ts-snapshots/select-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/a11y/select.e2e.ts-snapshots/select-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts b/core/src/components/select/test/label/select.e2e.ts
index 4999268e4f7..2b7fb3c4b32 100644
--- a/core/src/components/select/test/label/select.e2e.ts
+++ b/core/src/components/select/test/label/select.e2e.ts
@@ -377,3 +377,27 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     });
   });
 });
+
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('select: floating label focus'), () => {
+    test('label should appear on top of the select when it is focused, has a placeholder, and no value', async ({
+      page,
+    }) => {
+      await page.setContent(
+        `
+           <ion-select label="Label" label-placement="floating" placeholder="Placeholder">
+             <ion-select-option value="apples">Apples</ion-select-option>
+           </ion-select>
+         `,
+        config
+      );
+
+      const select = page.locator('ion-select');
+      await page.locator('ion-select button').focus();
+      await expect(select).toHaveScreenshot(screenshot(`select-label-floating-focus-no-value-placeholder`));
+    });
+  });
+});
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1ddc9fb1414
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..dd6ca99b04f
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..89bb6f642ba
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-ltr-Mobile-Firefox-linux.png
index bf27720310d..b24ece9af8c 100644
Binary files a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-rtl-Mobile-Firefox-linux.png
index 0b1c9e79903..67554fdede3 100644
Binary files a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-ltr-Mobile-Firefox-linux.png
index 1ddfeeee780..84d7da30b07 100644
Binary files a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-rtl-Mobile-Firefox-linux.png
index f3073946b4f..049560bcf81 100644
Binary files a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/spinner/test/color/spinner.e2e.ts-snapshots/spinner-color-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/spinner/test/color/spinner.e2e.ts-snapshots/spinner-color-diff-md-ltr-Mobile-Firefox-linux.png
index 0a39da496db..278b02ffcd3 100644
Binary files a/core/src/components/spinner/test/color/spinner.e2e.ts-snapshots/spinner-color-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/spinner/test/color/spinner.e2e.ts-snapshots/spinner-color-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab/tab.tsx b/core/src/components/tab/tab.tsx
index a1f6be57a06..e4465bc3ec1 100644
--- a/core/src/components/tab/tab.tsx
+++ b/core/src/components/tab/tab.tsx
@@ -11,7 +11,8 @@ import type { ComponentRef, FrameworkDelegate } from '../../interface';
   shadow: true,
 })
 export class Tab implements ComponentInterface {
-  private loaded = false;
+  private loadPromise?: Promise<HTMLElement | undefined>;
+
   @Element() el!: HTMLIonTabElement;
 
   /** @internal */
@@ -57,20 +58,31 @@ export class Tab implements ComponentInterface {
   @Watch('active')
   changeActive(isActive: boolean) {
     if (isActive) {
-      this.prepareLazyLoaded();
+      this.prepareLazyLoaded().catch((e) => {
+        printIonError('[ion-tab] - Exception in prepareLazyLoaded:', e);
+      });
     }
   }
 
   private prepareLazyLoaded(): Promise<HTMLElement | undefined> {
-    if (!this.loaded && this.component != null) {
-      this.loaded = true;
-      try {
-        return attachComponent(this.delegate, this.el, this.component, ['ion-page']);
-      } catch (e) {
-        printIonError('[ion-tab] - Exception in prepareLazyLoaded:', e);
-      }
+    if (this.component == null) {
+      return Promise.resolve(undefined);
     }
-    return Promise.resolve(undefined);
+
+    /**
+     * The attach is cached so that concurrent activations share a single
+     * attempt and later activations reuse the result. The cache is cleared
+     * only when the attach fails, so a tab whose component failed to load
+     * can be retried the next time it is activated.
+     */
+    if (this.loadPromise === undefined) {
+      this.loadPromise = attachComponent(this.delegate, this.el, this.component, ['ion-page']).catch((e) => {
+        this.loadPromise = undefined;
+        throw e;
+      });
+    }
+
+    return this.loadPromise;
   }
 
   render() {
diff --git a/core/src/components/tab/test/tab.spec.ts b/core/src/components/tab/test/tab.spec.ts
new file mode 100644
index 00000000000..d08791a8a25
--- /dev/null
+++ b/core/src/components/tab/test/tab.spec.ts
@@ -0,0 +1,185 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import type { FrameworkDelegate } from '../../../interface';
+import { Tab } from '../tab';
+
+const mockDelegate = (attachViewToDom: FrameworkDelegate['attachViewToDom']): FrameworkDelegate => ({
+  attachViewToDom,
+  removeViewFromDom: jest.fn().mockResolvedValue(undefined),
+});
+
+const createTab = async (html = '<ion-tab tab="home" component="ion-content"></ion-tab>') => {
+  const page = await newSpecPage({
+    components: [Tab],
+    html,
+  });
+
+  return { page, tabEl: page.body.querySelector<HTMLIonTabElement>('ion-tab')! };
+};
+
+describe('ion-tab: lazy loading', () => {
+  it('should attach the component only once across multiple setActive calls', async () => {
+    const { tabEl } = await createTab();
+    const attachViewToDom = jest.fn().mockResolvedValue(document.createElement('div'));
+    tabEl.delegate = mockDelegate(attachViewToDom);
+
+    await tabEl.setActive();
+    await tabEl.setActive();
+
+    expect(attachViewToDom).toHaveBeenCalledTimes(1);
+  });
+
+  it('should share one attach attempt across concurrent setActive calls', async () => {
+    const { tabEl } = await createTab();
+    const attachViewToDom = jest.fn().mockResolvedValue(document.createElement('div'));
+    tabEl.delegate = mockDelegate(attachViewToDom);
+
+    await Promise.all([tabEl.setActive(), tabEl.setActive()]);
+
+    expect(attachViewToDom).toHaveBeenCalledTimes(1);
+  });
+
+  it('should make a later setActive wait for the in-flight attach', async () => {
+    const { tabEl } = await createTab();
+    let resolveAttach!: (el: HTMLElement) => void;
+    const attachViewToDom = jest.fn(() => new Promise<HTMLElement>((resolve) => (resolveAttach = resolve)));
+    tabEl.delegate = mockDelegate(attachViewToDom);
+
+    const first = tabEl.setActive();
+    const second = tabEl.setActive();
+    let secondSettled = false;
+    second.then(() => (secondSettled = true));
+
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(secondSettled).toBe(false);
+
+    resolveAttach(document.createElement('div'));
+    await Promise.all([first, second]);
+
+    expect(secondSettled).toBe(true);
+    expect(attachViewToDom).toHaveBeenCalledTimes(1);
+  });
+
+  it('should retry the attach after a failed first attempt', async () => {
+    const { tabEl } = await createTab();
+    const attachViewToDom = jest
+      .fn()
+      .mockRejectedValueOnce(new Error('attach failed'))
+      .mockResolvedValue(document.createElement('div'));
+    tabEl.delegate = mockDelegate(attachViewToDom);
+
+    await expect(tabEl.setActive()).rejects.toThrow('attach failed');
+    await expect(tabEl.setActive()).resolves.toBeUndefined();
+
+    expect(attachViewToDom).toHaveBeenCalledTimes(2);
+  });
+
+  it('should not activate the tab when the attach fails', async () => {
+    const { tabEl } = await createTab();
+    tabEl.delegate = mockDelegate(jest.fn().mockRejectedValue(new Error('attach failed')));
+
+    await expect(tabEl.setActive()).rejects.toThrow('attach failed');
+
+    expect(tabEl.active).toBe(false);
+  });
+
+  it('should activate the tab once a retried attach succeeds', async () => {
+    const { page, tabEl } = await createTab();
+    const attachViewToDom = jest
+      .fn()
+      .mockRejectedValueOnce(new Error('attach failed'))
+      .mockResolvedValue(document.createElement('div'));
+    tabEl.delegate = mockDelegate(attachViewToDom);
+
+    await expect(tabEl.setActive()).rejects.toThrow('attach failed');
+    await tabEl.setActive();
+    await page.waitForChanges();
+
+    expect(attachViewToDom).toHaveBeenCalledTimes(2);
+    expect(tabEl.active).toBe(true);
+    expect(tabEl.classList.contains('tab-hidden')).toBe(false);
+  });
+
+  it('should attach the component when the tab starts active', async () => {
+    const { page, tabEl } = await createTab('<ion-tab tab="home" component="ion-content" active="true"></ion-tab>');
+
+    await page.waitForChanges();
+
+    expect(tabEl.querySelector('ion-content.ion-page')).not.toBeNull();
+    expect(tabEl.classList.contains('tab-hidden')).toBe(false);
+  });
+
+  it('should not attach anything when no component is provided', async () => {
+    const { tabEl } = await createTab('<ion-tab tab="home"></ion-tab>');
+    const attachViewToDom = jest.fn().mockResolvedValue(document.createElement('div'));
+    tabEl.delegate = mockDelegate(attachViewToDom);
+
+    await expect(tabEl.setActive()).resolves.toBeUndefined();
+
+    expect(attachViewToDom).not.toHaveBeenCalled();
+    expect(tabEl.active).toBe(true);
+  });
+
+  describe('when the attach fails on the active watcher path', () => {
+    let consoleErrorSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      consoleErrorSpy = jest.spyOn(console, 'error');
+      // Suppress console.error output from polluting the test output
+      consoleErrorSpy.mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+      consoleErrorSpy.mockRestore();
+    });
+
+    // Jest fails a test on an unhandled rejection, so the watcher swallowing the
+    // rejection is covered without an explicit unhandledRejection listener.
+    it('should log the error', async () => {
+      const { page, tabEl } = await createTab();
+      tabEl.delegate = mockDelegate(jest.fn().mockRejectedValue(new Error('attach failed')));
+
+      // ion-tabs activates a tab by setting `active`, it does not await setActive().
+      tabEl.active = true;
+      await page.waitForChanges();
+      // Give the rejected attach a turn to settle so the watcher can log it.
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(consoleErrorSpy).toHaveBeenCalledWith(
+        '[Ionic Error]: [ion-tab] - Exception in prepareLazyLoaded:',
+        expect.any(Error)
+      );
+    });
+
+    it('should retry on the next activation, as ion-tabs reactivates tabs', async () => {
+      const { page, tabEl } = await createTab();
+      const attachViewToDom = jest
+        .fn()
+        .mockRejectedValueOnce(new Error('attach failed'))
+        .mockImplementation(() => {
+          const el = document.createElement('div');
+          el.classList.add('attached-page');
+          tabEl.appendChild(el);
+          return Promise.resolve(el);
+        });
+      tabEl.delegate = mockDelegate(attachViewToDom);
+
+      tabEl.active = true;
+      await page.waitForChanges();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(tabEl.querySelector('.attached-page')).toBeNull();
+
+      // ion-tabs deactivates the leaving tab, so returning to it is a false -> true change.
+      tabEl.active = false;
+      await page.waitForChanges();
+      tabEl.active = true;
+      await page.waitForChanges();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(attachViewToDom).toHaveBeenCalledTimes(2);
+      expect(tabEl.querySelector('.attached-page')).not.toBeNull();
+    });
+  });
+});
diff --git a/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-ios-ltr-Mobile-Chrome-linux.png
index cfc2bb57478..54d8c14e5a8 100644
Binary files a/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-small-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-small-scale-ios-ltr-Mobile-Chrome-linux.png
index e9daeb3a04e..669df96e6e8 100644
Binary files a/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-small-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-small-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toast/test/a11y/index.html b/core/src/components/toast/test/a11y/index.html
index 58157330fb1..9651f056386 100644
--- a/core/src/components/toast/test/a11y/index.html
+++ b/core/src/components/toast/test/a11y/index.html
@@ -10,7 +10,7 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   </head>
   <script type="module">
-    import { toastController } from '../../../../dist/ionic/index.esm.js';
+    import { toastController } from '../../../../../dist/ionic/index.esm.js';
     window.toastController = toastController;
   </script>
 
diff --git a/core/src/components/toast/test/a11y/toast.e2e.ts b/core/src/components/toast/test/a11y/toast.e2e.ts
index bf1fbfd72c7..35ff0b3e61c 100644
--- a/core/src/components/toast/test/a11y/toast.e2e.ts
+++ b/core/src/components/toast/test/a11y/toast.e2e.ts
@@ -34,7 +34,7 @@ configs({ directions: ['ltr'], palettes: ['dark', 'light'] }).forEach(({ title,
       await page.setContent(
         `
           <script type="module">
-            import { toastController } from '../../../../dist/ionic/index.esm.js';
+            import { toastController } from '../../../../../dist/ionic/index.esm.js';
             window.toastController = toastController;
           </script>
 
diff --git a/core/src/components/toast/test/basic/index.html b/core/src/components/toast/test/basic/index.html
index 06e8aae5ae2..957e15c5d92 100644
--- a/core/src/components/toast/test/basic/index.html
+++ b/core/src/components/toast/test/basic/index.html
@@ -14,7 +14,7 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   </head>
   <script type="module">
-    import { toastController } from '../../../../dist/ionic/index.esm.js';
+    import { toastController } from '../../../../../dist/ionic/index.esm.js';
     window.toastController = toastController;
   </script>
   <body>
diff --git a/core/src/components/toast/test/buttons/index.html b/core/src/components/toast/test/buttons/index.html
index 42aa9a5554a..964480689c6 100644
--- a/core/src/components/toast/test/buttons/index.html
+++ b/core/src/components/toast/test/buttons/index.html
@@ -14,7 +14,7 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   </head>
   <script type="module">
-    import { toastController } from '../../../../dist/ionic/index.esm.js';
+    import { toastController } from '../../../../../dist/ionic/index.esm.js';
     window.toastController = toastController;
   </script>
   <body>
diff --git a/core/src/components/toast/test/layout/index.html b/core/src/components/toast/test/layout/index.html
index 227539c7369..5f435d6e1d3 100644
--- a/core/src/components/toast/test/layout/index.html
+++ b/core/src/components/toast/test/layout/index.html
@@ -14,7 +14,7 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
   </head>
   <script type="module">
-    import { toastController } from '../../../../dist/ionic/index.esm.js';
+    import { toastController } from '../../../../../dist/ionic/index.esm.js';
     window.toastController = toastController;
   </script>
 
diff --git a/core/src/components/toast/test/standalone/index.html b/core/src/components/toast/test/standalone/index.html
index 82b4e108522..11f2565d674 100644
--- a/core/src/components/toast/test/standalone/index.html
+++ b/core/src/components/toast/test/standalone/index.html
@@ -21,7 +21,7 @@
     </style>
   </head>
   <script type="module">
-    import { toastController } from '../../../../dist/ionic/index.esm.js';
+    import { toastController } from '../../../../../dist/ionic/index.esm.js';
     window.toastController = toastController;
   </script>
   <body>
diff --git a/core/src/components/toggle/test/a11y/toggle.e2e.ts b/core/src/components/toggle/test/a11y/toggle.e2e.ts
index 26f5e1f496f..192e68db138 100644
--- a/core/src/components/toggle/test/a11y/toggle.e2e.ts
+++ b/core/src/components/toggle/test/a11y/toggle.e2e.ts
@@ -21,3 +21,87 @@ configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title,
     });
   });
 });
+
+/**
+ * These assert `ion-focusable`, not the rendered ring, because `ion-focused`
+ * relies on keyboard-mode detection that is flaky on WebKit. Gating is mode-independent.
+ */
+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => {
+  test.describe(title('toggle: focus indicator'), () => {
+    test('standalone toggle should be focusable', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-toggle aria-label="Toggle">Toggle</ion-toggle>
+        </ion-app>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      await expect(toggle).toHaveClass(/ion-focusable/);
+      await expect(toggle).not.toHaveClass(/toggle-defers-indicator/);
+    });
+
+    test('toggle in a single-input item should defer the indicator to the item', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-toggle>Toggle</ion-toggle>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+
+      // The toggle's `ion-focusable` is what makes the item focusable, so both carry it.
+      await expect(toggle).toHaveClass(/ion-focusable/);
+      await expect(toggle).toHaveClass(/toggle-defers-indicator/);
+      await expect(page.locator('ion-item')).toHaveClass(/ion-focusable/);
+    });
+
+    test('toggle in a clickable item should keep its own indicator', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item button>
+            <ion-toggle>Toggle</ion-toggle>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+
+      // Two tab stops sharing one indicator would be indistinguishable.
+      await expect(page.locator('ion-item')).toHaveClass(/ion-activatable/);
+      await expect(toggle).not.toHaveClass(/toggle-defers-indicator/);
+    });
+
+    test('toggle in a multi-input item should be focusable', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-toggle>Toggle 1</ion-toggle>
+            <ion-toggle>Toggle 2</ion-toggle>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const toggles = page.locator('ion-toggle');
+      await expect(toggles.nth(0)).toHaveClass(/ion-focusable/);
+      await expect(toggles.nth(1)).toHaveClass(/ion-focusable/);
+
+      // No single indicator to defer to, so each toggle draws its own.
+      await expect(toggles.nth(0)).not.toHaveClass(/toggle-defers-indicator/);
+      await expect(toggles.nth(1)).not.toHaveClass(/toggle-defers-indicator/);
+    });
+  });
+});
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts b/core/src/components/toggle/test/basic/toggle.e2e.ts
index 9502df83b55..2dc8a89d2e4 100644
--- a/core/src/components/toggle/test/basic/toggle.e2e.ts
+++ b/core/src/components/toggle/test/basic/toggle.e2e.ts
@@ -1,10 +1,10 @@
 import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
+import { applyKeyboardFocus, configs, test } from '@utils/test/playwright';
 
 /**
  * This behavior does not vary across modes/directions
  */
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('toggle: ionChange'), () => {
     test('should fire ionChange when interacting with toggle', async ({ page }) => {
       await page.setContent(
@@ -95,48 +95,6 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
   });
 
   test.describe(title('toggle: ionFocus'), () => {
-    test('should not have visual regressions', async ({ page, pageUtils }) => {
-      await page.setContent(
-        `
-        <style>
-          #container {
-            display: inline-block;
-            padding: 10px;
-          }
-        </style>
-
-        <div id="container">
-          <ion-toggle>Unchecked</ion-toggle>
-        </div>
-      `,
-        config
-      );
-
-      await pageUtils.pressKeys('Tab');
-
-      const container = page.locator('#container');
-
-      await expect(container).toHaveScreenshot(screenshot(`toggle-focus`));
-    });
-
-    test('should not have visual regressions when interacting with toggle in item', async ({ page, pageUtils }) => {
-      await page.setContent(
-        `
-        <ion-item class="ion-focused">
-          <ion-toggle>Unchecked</ion-toggle>
-        </ion-item>
-      `,
-        config
-      );
-
-      // Test focus with keyboard navigation
-      await pageUtils.pressKeys('Tab');
-
-      const item = page.locator('ion-item');
-
-      await expect(item).toHaveScreenshot(screenshot(`toggle-in-item-focus`));
-    });
-
     test('should fire ionFocus when toggle is focused', async ({ page, pageUtils }) => {
       await page.setContent(
         `
@@ -285,3 +243,66 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
     });
   });
 });
+
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('toggle: focus visual'), () => {
+    test('should render focus indicator when unchecked', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          #container {
+            width: fit-content;
+            padding: 10px;
+          }
+        </style>
+
+        <ion-app>
+          <div id="container">
+            <ion-toggle>Unchecked</ion-toggle>
+          </div>
+        </ion-app>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+
+      await applyKeyboardFocus(page, toggle);
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`toggle-focus`));
+    });
+
+    test('should render focus indicator when checked', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          #container {
+            width: fit-content;
+            padding: 10px;
+          }
+        </style>
+
+        <ion-app>
+          <div id="container">
+            <ion-toggle checked>Checked</ion-toggle>
+          </div>
+        </ion-app>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+
+      await applyKeyboardFocus(page, toggle);
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`toggle-focus-checked`));
+    });
+  });
+});
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..f5090dcb232
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..c2afe2f5941
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..08176dd7004
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..2b0432e046b
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..800164b9640
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..20b9c1f27e1
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-checked-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Chrome-linux.png
index 0d7cbc11195..9bd6ccd2884 100644
Binary files a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Firefox-linux.png
index bb21be2862e..e26f1c49803 100644
Binary files a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Safari-linux.png
index a48f114c2e3..243ab8eaaae 100644
Binary files a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a82ee6c5875
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..8bc4ddfa407
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..bc2c99f8353
Binary files /dev/null and b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Chrome-linux.png
deleted file mode 100644
index ee7a99593cd..00000000000
Binary files a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts b/core/src/components/toggle/test/color/toggle.e2e.ts
index cdebe75ec79..cb63cc33373 100644
--- a/core/src/components/toggle/test/color/toggle.e2e.ts
+++ b/core/src/components/toggle/test/color/toggle.e2e.ts
@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
+import { applyKeyboardFocus, configs, test } from '@utils/test/playwright';
 
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('toggle: color'), () => {
@@ -26,5 +26,61 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       const toggle = page.locator('ion-toggle');
       await expect(toggle).toHaveScreenshot(screenshot(`toggle-color-unchecked`));
     });
+
+    test('should apply color to the focus indicator when checked', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          #container {
+            width: fit-content;
+            padding: 10px;
+          }
+        </style>
+
+        <ion-app>
+          <div id="container">
+            <ion-toggle color="danger" checked="true">Label</ion-toggle>
+          </div>
+        </ion-app>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+
+      await applyKeyboardFocus(page, toggle);
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`toggle-color-focus-checked`));
+    });
+
+    test('should not apply color to the focus indicator when unchecked', async ({ page }) => {
+      await page.setContent(
+        `
+        <style>
+          #container {
+            width: fit-content;
+            padding: 10px;
+          }
+        </style>
+
+        <ion-app>
+          <div id="container">
+            <ion-toggle color="danger">Label</ion-toggle>
+          </div>
+        </ion-app>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+
+      await applyKeyboardFocus(page, toggle);
+
+      const container = page.locator('#container');
+
+      await expect(container).toHaveScreenshot(screenshot(`toggle-color-focus-unchecked`));
+    });
   });
 });
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..5649ce582d9
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..1c859ee105d
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..d2d2651e795
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..de6ed72d4be
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..f8ef411ff1a
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..168808ae7e1
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-checked-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d3472848e87
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..8c4b7cf5cb5
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..5d5b3edbf9e
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..476ba9d5097
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..5ff96d60a1c
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..fe6f1b21513
Binary files /dev/null and b/core/src/components/toggle/test/color/toggle.e2e.ts-snapshots/toggle-color-focus-unchecked-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ios-ltr-Mobile-Chrome-linux.png
index 41868dc7a7c..e0329b36125 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ios-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ios-ltr-dark-Mobile-Chrome-linux.png
index 40cf9acb46b..1b9ce49c285 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ios-ltr-dark-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ios-ltr-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ios-rtl-Mobile-Chrome-linux.png
index 6451895309f..2fda73f438f 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ios-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ios-rtl-dark-Mobile-Chrome-linux.png
index 5d091d0cf3f..cff9195471b 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ios-rtl-dark-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-color-ios-rtl-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ios-ltr-Mobile-Chrome-linux.png
index 325ce8a11ba..45d2af6358e 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ios-ltr-dark-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ios-ltr-dark-Mobile-Chrome-linux.png
index fb5eaa52dca..1a0137ea7e1 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ios-ltr-dark-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ios-ltr-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ios-rtl-Mobile-Chrome-linux.png
index 200fb61bbc3..9248bcf5636 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ios-rtl-dark-Mobile-Chrome-linux.png b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ios-rtl-dark-Mobile-Chrome-linux.png
index 1cf8830d5fb..f4949337d98 100644
Binary files a/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ios-rtl-dark-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/enable-on-off-labels/toggle.e2e.ts-snapshots/toggle-on-off-labels-ios-rtl-dark-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/index.html b/core/src/components/toggle/test/item/index.html
index b872bcf3ea3..a1a29e43047 100644
--- a/core/src/components/toggle/test/item/index.html
+++ b/core/src/components/toggle/test/item/index.html
@@ -15,7 +15,7 @@
     <style>
       .grid {
         display: grid;
-        grid-template-columns: repeat(3, minmax(250px, 1fr));
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
         grid-row-gap: 20px;
         grid-column-gap: 20px;
       }
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts b/core/src/components/toggle/test/item/toggle.e2e.ts
index 866a382494f..cc549b9a6bc 100644
--- a/core/src/components/toggle/test/item/toggle.e2e.ts
+++ b/core/src/components/toggle/test/item/toggle.e2e.ts
@@ -1,5 +1,5 @@
 import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
+import { applyKeyboardFocus, configs, test } from '@utils/test/playwright';
 
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('toggle: item'), () => {
@@ -110,6 +110,104 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
   });
 });
 
+/**
+ * The focus indicator differs between iOS and MD, so these run in both modes.
+ * This behavior does not vary across directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('toggle: focus in item'), () => {
+    test('should render focus indicator in an item', async ({ page }) => {
+      // The item gets `ion-focused` too, which is what suppresses the toggle's indicator.
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-toggle>Unchecked</ion-toggle>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+
+      await applyKeyboardFocus(page, toggle);
+
+      const item = page.locator('ion-item');
+
+      await expect(item).toHaveScreenshot(screenshot(`toggle-in-item-focus`));
+    });
+
+    test('should render focus indicator for a checked toggle with a color in an item', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-toggle color="danger" checked>Checked</ion-toggle>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+
+      await applyKeyboardFocus(page, toggle);
+
+      const item = page.locator('ion-item');
+
+      await expect(item).toHaveScreenshot(screenshot(`toggle-color-checked-in-item-focus`));
+    });
+
+    test('should render focus indicator for a toggle in a clickable item', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item button>
+            <ion-toggle>Unchecked</ion-toggle>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+
+      await applyKeyboardFocus(page, toggle);
+
+      const item = page.locator('ion-item');
+
+      await expect(item).toHaveScreenshot(screenshot(`toggle-in-clickable-item-focus`));
+    });
+
+    test('should render focus indicator for a toggle in a multi-input item', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-app>
+          <ion-item>
+            <ion-toggle justify="start">Toggle 1</ion-toggle>
+            <ion-toggle justify="start">Toggle 2</ion-toggle>
+          </ion-item>
+        </ion-app>
+      `,
+        config
+      );
+
+      const item = page.locator('ion-item');
+
+      // The item adds this after its controls render, and the toggles re-render off
+      // it, so waiting avoids capturing the pre-settle state.
+      await expect(item).toHaveClass(/item-multiple-inputs/);
+
+      const toggle = page.locator('ion-toggle').first();
+
+      await applyKeyboardFocus(page, toggle);
+
+      await expect(item).toHaveScreenshot(screenshot(`toggle-multiple-in-item-focus`));
+    });
+  });
+});
+
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('toggle: item functionality'), () => {
     test('clicking padded space within item should click the toggle', async ({ page }) => {
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..fc51ac7b706
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..e5c55ebc3ca
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..83caa41401a
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..092815e8974
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..ff8aaa150dd
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..7f87fd20447
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-color-checked-in-item-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..a58e495436d
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..aa5dea1dc3a
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..55db88df20c
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..d431fca3f0d
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..80da04f99fc
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..6fb39e31043
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-clickable-item-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..e356b738007
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Firefox-linux.png
similarity index 100%
rename from core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Firefox-linux.png
rename to core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Firefox-linux.png
diff --git a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Safari-linux.png
similarity index 100%
rename from core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Safari-linux.png
rename to core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Safari-linux.png
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..8e16c7a4b8f
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..0743e8f1314
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..84610944bd1
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-ios-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1c87bd4b7c6
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-ios-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..a5bc9c3d36b
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-ios-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..dba23d4109a
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-ios-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1342c03b461
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..78a2b693fcc
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..ae4b62ff354
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-multiple-in-item-focus-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/toggle/toggle.ios.scss b/core/src/components/toggle/toggle.ios.scss
index cfe12f1d5b0..a615c4ec651 100644
--- a/core/src/components/toggle/toggle.ios.scss
+++ b/core/src/components/toggle/toggle.ios.scss
@@ -171,3 +171,20 @@
 :host(.toggle-disabled) {
   opacity: $toggle-ios-disabled-opacity;
 }
+
+// iOS Toggle: Keyboard Focus
+// ----------------------------------------------------------
+// `toggle-defers-indicator` is excluded rather than overridden, because an
+// override would have to out-specify every rule below, including `.ion-color`.
+//
+// The indicator is the same color checked or unchecked, unlike `md`, which follows
+// the Material state layer in using a neutral color when unchecked. `color` still
+// only applies when checked, matching the track.
+
+:host(.ion-focused:not(.toggle-defers-indicator)) .toggle-icon {
+  box-shadow: 0 0 0 4px $toggle-focus-ring-color;
+}
+
+:host(.ion-color.ion-focused.toggle-checked:not(.toggle-defers-indicator)) .toggle-icon {
+  box-shadow: 0 0 0 4px current-color(base, $toggle-focus-ring-color-alpha);
+}
diff --git a/core/src/components/toggle/toggle.md.scss b/core/src/components/toggle/toggle.md.scss
index d0a3bfda360..cd0b5582059 100644
--- a/core/src/components/toggle/toggle.md.scss
+++ b/core/src/components/toggle/toggle.md.scss
@@ -15,7 +15,8 @@
   --handle-width: #{$toggle-md-handle-width};
   --handle-height: #{$toggle-md-handle-height};
   --handle-max-height: #{$toggle-md-handle-max-height};
-  --handle-spacing: 0;
+  // A length, not a bare 0, so it composes in `calc()`.
+  --handle-spacing: 0px;
   --handle-transition: #{$toggle-md-transition};
 }
 
@@ -67,6 +68,69 @@
   height: 100%;
 }
 
+// Material Design Toggle: Keyboard Focus
+// ----------------------------------------------------------
+// The indicator is drawn on the wrapper because the handle uses
+// `contain: strict`, which would clip it. The wrapper travels with the handle.
+//
+// `toggle-defers-indicator` is excluded rather than overridden so the indicator
+// is never created, leaving the rules that position and color it nothing to act on.
+
+:host(.ion-focused:not(.toggle-defers-indicator)) .toggle-icon-wrapper::after {
+  @include border-radius(50%);
+
+  display: block;
+  position: absolute;
+
+  width: $toggle-md-focus-ring-size;
+  height: $toggle-md-focus-ring-size;
+
+  transform: translateY(-50%);
+
+  background: $toggle-focus-ring-color-off;
+
+  content: "";
+
+  // Drawn behind the handle so the translucent indicator does not tint it. The
+  // wrapper is its own stacking context, so it stays above the track.
+  z-index: -1;
+
+  inset-block-start: 50%;
+}
+
+// Positioned the same way as `.toggle-inner`, offset by half the size difference
+// so it centers on the handle. Anchored physically to mirror the handle, which
+// uses `left` in LTR and `right` in RTL.
+
+:host(.toggle-ltr.ion-focused) .toggle-icon-wrapper::after {
+  // stylelint-disable-next-line property-disallowed-list
+  left: calc(var(--handle-spacing) + (var(--handle-width) - #{$toggle-md-focus-ring-size}) / 2);
+}
+
+:host(.toggle-rtl.ion-focused) .toggle-icon-wrapper::after {
+  // stylelint-disable-next-line property-disallowed-list
+  right: calc(var(--handle-spacing) + (var(--handle-width) - #{$toggle-md-focus-ring-size}) / 2);
+}
+
+// Matches the checked shift `.toggle-inner` applies, so the indicator stays on
+// the handle. The Y component repeats the centering from the base rule.
+
+:host(.toggle-ltr.ion-focused.toggle-checked) .toggle-icon-wrapper::after {
+  transform: translate(calc(var(--handle-spacing) * -2), -50%);
+}
+
+:host(.toggle-rtl.ion-focused.toggle-checked) .toggle-icon-wrapper::after {
+  transform: translate(calc(var(--handle-spacing) * 2), -50%);
+}
+
+:host(.ion-focused.toggle-checked) .toggle-icon-wrapper::after {
+  background: $toggle-focus-ring-color;
+}
+
+:host(.ion-color.ion-focused.toggle-checked) .toggle-icon-wrapper::after {
+  background: current-color(base, $toggle-focus-ring-color-alpha);
+}
+
 // Material Design Toggle: Disabled
 // ----------------------------------------------------------
 // The toggle and label should use the
diff --git a/core/src/components/toggle/toggle.md.vars.scss b/core/src/components/toggle/toggle.md.vars.scss
index 63f9ef72c9a..b782131b8be 100644
--- a/core/src/components/toggle/toggle.md.vars.scss
+++ b/core/src/components/toggle/toggle.md.vars.scss
@@ -48,3 +48,5 @@ $toggle-md-on-off-label-color: #000;
 
 /// @prop - The text color of the on/off labels when the toggle is checked
 $toggle-md-on-off-label-checked-color: #fff;
+
+$toggle-md-focus-ring-size:                       36px;
diff --git a/core/src/components/toggle/toggle.scss b/core/src/components/toggle/toggle.scss
index b64107e66b0..1c239104656 100644
--- a/core/src/components/toggle/toggle.scss
+++ b/core/src/components/toggle/toggle.scss
@@ -1,4 +1,3 @@
-@import "../../themes/ionic.globals";
 @import "./toggle.vars.scss";
 
 // Toggle
@@ -59,10 +58,6 @@
   width: auto;
 }
 
-:host(.ion-focused) input {
-  border: 2px solid #5e9ed6;
-}
-
 :host(.toggle-disabled) {
   pointer-events: none;
 }
@@ -75,6 +70,11 @@ input {
   display: none;
 }
 
+// Hide the native focus ring since we draw our own focus indicator.
+:host(:focus) {
+  outline: none;
+}
+
 // Toggle Wrapper
 // --------------------------------------------------
 
diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx
index b46635c8a78..041a200bead 100644
--- a/core/src/components/toggle/toggle.tsx
+++ b/core/src/components/toggle/toggle.tsx
@@ -1,6 +1,6 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Build, Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
-import { checkInvalidState } from '@utils/forms';
+import { Build, Component, Element, Event, Host, Prop, State, Watch, forceUpdate, h } from '@stencil/core';
+import { checkInvalidState, createItemMultipleInputsObserver } from '@utils/forms';
 import { renderHiddenInput, inheritAriaAttributes } from '@utils/helpers';
 import type { Attributes } from '@utils/helpers';
 import { hapticSelection } from '@utils/native/haptic';
@@ -46,6 +46,7 @@ export class Toggle implements ComponentInterface {
   private toggleTrack?: HTMLElement;
   private didLoad = false;
   private validationObserver?: MutationObserver;
+  private itemFocusObserver?: MutationObserver;
 
   @Element() el!: HTMLIonToggleElement;
 
@@ -227,6 +228,11 @@ export class Toggle implements ComponentInterface {
 
     // Always set initial state
     this.isInvalid = checkInvalidState(el);
+
+    this.itemFocusObserver = createItemMultipleInputsObserver(el, () => forceUpdate(this), [
+      'item-multiple-inputs',
+      'ion-activatable',
+    ]);
   }
 
   componentDidLoad() {
@@ -258,6 +264,11 @@ export class Toggle implements ComponentInterface {
       this.gesture = undefined;
     }
 
+    if (this.itemFocusObserver) {
+      this.itemFocusObserver.disconnect();
+      this.itemFocusObserver = undefined;
+    }
+
     // Clean up validation observer to prevent memory leaks.
     if (this.validationObserver) {
       this.validationObserver.disconnect();
@@ -456,6 +467,12 @@ export class Toggle implements ComponentInterface {
     const mode = getIonMode(this);
     const value = this.getValue();
     const rtl = isRTL(el) ? 'rtl' : 'ltr';
+    const inItem = hostContext('ion-item', el);
+    const inMultipleInputsItem = hostContext('ion-item.item-multiple-inputs', el);
+    // A clickable item is a second tab stop painting the same row indicator, which
+    // `item-multiple-inputs` misses because it counts cover elements, not toggles.
+    // The attributes are matched too because the class needs the item to render.
+    const inClickableItem = hostContext('ion-item.ion-activatable, ion-item[button], ion-item[href]', el);
     renderHiddenInput(true, el, name, checked ? value : '', disabled);
 
     return (
@@ -475,7 +492,11 @@ export class Toggle implements ComponentInterface {
         onBlur={this.onBlur}
         class={createColorClasses(color, {
           [mode]: true,
-          'in-item': hostContext('ion-item', el),
+          'in-item': inItem,
+          // `ion-focusable` has to stay on because it is what makes the item focusable.
+          // When the item draws the row indicator, CSS suppresses ours instead.
+          'ion-focusable': true,
+          'toggle-defers-indicator': inItem && !inMultipleInputsItem && !inClickableItem,
           'toggle-activated': activated,
           'toggle-checked': checked,
           'toggle-disabled': disabled,
diff --git a/core/src/components/toggle/toggle.vars.scss b/core/src/components/toggle/toggle.vars.scss
index 4f0d34a764f..173de9c3684 100644
--- a/core/src/components/toggle/toggle.vars.scss
+++ b/core/src/components/toggle/toggle.vars.scss
@@ -1,5 +1,16 @@
+@import "../../themes/ionic.globals";
+
 /// @prop - Top margin of toggle's label when in an item
 $toggle-item-label-margin-top: 10px;
 
 /// @prop - Bottom margin of toggle's label when in an item
-$toggle-item-label-margin-bottom: 10px;
\ No newline at end of file
+$toggle-item-label-margin-bottom: 10px;
+
+/// @prop - Color of the focus indicator for the unchecked toggle
+$toggle-focus-ring-color-off: rgba(var(--ion-text-color-rgb, 0, 0, 0), .12);
+
+/// @prop - Alpha of the focus indicator for the checked toggle
+$toggle-focus-ring-color-alpha: .2;
+
+/// @prop - Color of the focus indicator for the checked toggle
+$toggle-focus-ring-color: ion-color(primary, base, $toggle-focus-ring-color-alpha);
diff --git a/core/src/css/test/a11y/typography.e2e.ts-snapshots/typography-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/css/test/a11y/typography.e2e.ts-snapshots/typography-scale-ios-ltr-Mobile-Chrome-linux.png
index 0c880ee1b6b..9cf9a0a84b8 100644
Binary files a/core/src/css/test/a11y/typography.e2e.ts-snapshots/typography-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/css/test/a11y/typography.e2e.ts-snapshots/typography-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/utils/content/content.utils.spec.ts b/core/src/utils/content/content.utils.spec.ts
index a9be0a6139f..95b674b7f02 100644
--- a/core/src/utils/content/content.utils.spec.ts
+++ b/core/src/utils/content/content.utils.spec.ts
@@ -4,6 +4,7 @@ import {
   printIonContentErrorMsg,
   findClosestIonContent,
   findIonContent,
+  findRefresherInContent,
   getScrollElement,
 } from './index';
 
@@ -48,6 +49,68 @@ describe('Content Utils', () => {
     });
   });
 
+  describe('findRefresherInContent', () => {
+    const createContent = ({ hasRefresher = true, scrollHostCount = 0 } = {}) => {
+      const content = document.createElement('ion-content');
+
+      if (hasRefresher) {
+        const refresher = document.createElement('ion-refresher');
+        refresher.setAttribute('slot', 'fixed');
+        content.appendChild(refresher);
+      }
+
+      for (let i = 0; i < scrollHostCount; i++) {
+        const scrollHost = document.createElement('div');
+        scrollHost.classList.add('ion-content-scroll-host');
+        content.appendChild(scrollHost);
+      }
+
+      return content;
+    };
+
+    it('should find the refresher within ion-content', () => {
+      const content = createContent();
+
+      expect(findRefresherInContent(content)).toBe(content.querySelector('ion-refresher'));
+    });
+
+    it('should return null when ion-content has no refresher', () => {
+      const content = createContent({ hasRefresher: false });
+
+      expect(findRefresherInContent(content)).toBe(null);
+    });
+
+    it('should find the refresher from a custom scroll host that is a sibling of it', () => {
+      const content = createContent({ scrollHostCount: 1 });
+      const scrollHost = content.querySelector('.ion-content-scroll-host')!;
+
+      expect(findRefresherInContent(scrollHost)).toBe(content.querySelector('ion-refresher'));
+    });
+
+    it('should find the refresher from an element nested within the custom scroll host', () => {
+      const content = createContent({ scrollHostCount: 1 });
+      const nested = document.createElement('div');
+      content.querySelector('.ion-content-scroll-host')!.appendChild(nested);
+
+      expect(findRefresherInContent(nested)).toBe(content.querySelector('ion-refresher'));
+    });
+
+    it('should return null for a custom scroll host the refresher does not scroll with', () => {
+      const content = createContent({ scrollHostCount: 2 });
+      const secondScrollHost = content.querySelectorAll('.ion-content-scroll-host')[1];
+
+      expect(findRefresherInContent(secondScrollHost)).toBe(null);
+    });
+
+    it('should return null for a custom scroll host that is not within an ion-content', () => {
+      const scrollHost = document.createElement('div');
+      scrollHost.classList.add('ion-content-scroll-host');
+      scrollHost.appendChild(document.createElement('ion-refresher'));
+
+      expect(findRefresherInContent(scrollHost)).toBe(null);
+    });
+  });
+
   describe('scrollToTop', () => {
     describe('scroll duration is 0', () => {
       it('should call scrollToTop when the tag name is ion-content', () => {
diff --git a/core/src/utils/content/index.ts b/core/src/utils/content/index.ts
index 44a6f7bff13..3c4f0967592 100644
--- a/core/src/utils/content/index.ts
+++ b/core/src/utils/content/index.ts
@@ -58,6 +58,41 @@ export const findClosestIonContent = (el: Element) => {
   return el.closest<HTMLElement>(ION_CONTENT_SELECTOR);
 };
 
+/**
+ * Queries the custom scroll host an `ion-refresher` scrolls with in the given
+ * `ion-content`. A refresher only pairs with the first host.
+ */
+export const findRefresherScrollHost = (ionContent: Element) => {
+  return ionContent.querySelector<HTMLElement>(ION_CONTENT_CLASS_SELECTOR);
+};
+
+/**
+ * Queries the `ion-refresher` that scrolls with the given content element,
+ * which may be an `ion-content` or a custom scroll host. A refresher is a
+ * `slot="fixed"` child of `ion-content`, so it is a sibling of a scroll host
+ * rather than a descendant of it.
+ */
+export const findRefresherInContent = (contentEl: Element) => {
+  // An `ion-content` owns any refresher inside it, scroll host or not.
+  if (isIonContent(contentEl)) {
+    return contentEl.querySelector('ion-refresher');
+  }
+
+  // A refresher needs an `ion-content` ancestor to initialize.
+  const ionContent = contentEl.closest(ION_CONTENT_ELEMENT_SELECTOR);
+  if (ionContent === null) {
+    return null;
+  }
+
+  // Any scroll host other than the refresher's own has no refresher.
+  const refresherScrollHost = findRefresherScrollHost(ionContent);
+  if (refresherScrollHost === null || !refresherScrollHost.contains(contentEl)) {
+    return null;
+  }
+
+  return ionContent.querySelector('ion-refresher');
+};
+
 /**
  * Scrolls to the top of the element. If an `ion-content` is found, it will scroll
  * using the public API `scrollToTop` with a duration.
diff --git a/core/src/utils/forms/index.ts b/core/src/utils/forms/index.ts
index 682811ed643..d54258b956b 100644
--- a/core/src/utils/forms/index.ts
+++ b/core/src/utils/forms/index.ts
@@ -1,3 +1,4 @@
 export * from './notch-controller';
 export * from './compare-with-utils';
+export * from './item-multiple-inputs';
 export * from './validity';
diff --git a/core/src/utils/forms/item-multiple-inputs.ts b/core/src/utils/forms/item-multiple-inputs.ts
new file mode 100644
index 00000000000..0678456ebf5
--- /dev/null
+++ b/core/src/utils/forms/item-multiple-inputs.ts
@@ -0,0 +1,42 @@
+import { Build } from '@stencil/core';
+
+/**
+ * `item-multiple-inputs` is toggled on the item after its form controls render,
+ * so a control whose focus styling depends on it needs to re-render when it flips.
+ *
+ * @internal
+ * @param el The form control whose closest `ion-item` should be observed.
+ * @param onChange Called whenever one of `classNames` is added or removed.
+ * @param classNames The item classes the caller's rendering depends on. A caller
+ * reading more than one must list them all, or changes to the rest are ignored.
+ * @returns The observer to disconnect in `disconnectedCallback`, or `undefined`
+ * if it could not be created.
+ */
+export const createItemMultipleInputsObserver = (
+  el: HTMLElement,
+  onChange: () => void,
+  classNames: string[] = ['item-multiple-inputs']
+): MutationObserver | undefined => {
+  const item = el.closest('ion-item');
+
+  if (!item || !Build.isBrowser || typeof MutationObserver === 'undefined') {
+    return undefined;
+  }
+
+  const readClasses = () => classNames.map((name) => item.classList.contains(name)).join(',');
+
+  let previousClasses = readClasses();
+
+  const observer = new MutationObserver(() => {
+    const currentClasses = readClasses();
+
+    if (currentClasses !== previousClasses) {
+      previousClasses = currentClasses;
+      onChange();
+    }
+  });
+
+  observer.observe(item, { attributes: true, attributeFilter: ['class'] });
+
+  return observer;
+};
diff --git a/core/src/utils/gesture/listener.ts b/core/src/utils/gesture/listener.ts
index 357076dadf7..90cba24e6ae 100644
--- a/core/src/utils/gesture/listener.ts
+++ b/core/src/utils/gesture/listener.ts
@@ -7,14 +7,10 @@ export const addEventListener = (
     capture?: boolean;
   }
 ): (() => void) => {
-  // use event listener options when supported
-  // otherwise it's just a boolean for the "capture" arg
-  const listenerOpts = supportsPassive(el)
-    ? {
-        capture: !!opts.capture,
-        passive: !!opts.passive,
-      }
-    : !!opts.capture;
+  const listenerOpts = {
+    capture: !!opts.capture,
+    passive: !!opts.passive,
+  };
 
   let add: string;
   let remove: string;
@@ -31,27 +27,3 @@ export const addEventListener = (
     el[remove](eventName, callback, listenerOpts);
   };
 };
-
-const supportsPassive = (node: Node) => {
-  if (_sPassive === undefined) {
-    try {
-      const opts = Object.defineProperty({}, 'passive', {
-        get: () => {
-          _sPassive = true;
-        },
-      });
-      node.addEventListener(
-        'optsTest',
-        () => {
-          return;
-        },
-        opts
-      );
-    } catch (e) {
-      _sPassive = false;
-    }
-  }
-  return !!_sPassive;
-};
-
-let _sPassive: boolean | undefined;
diff --git a/core/src/utils/helpers.spec.ts b/core/src/utils/helpers.spec.ts
index 44dd9d8c3ce..aaa4b7dbdb7 100644
--- a/core/src/utils/helpers.spec.ts
+++ b/core/src/utils/helpers.spec.ts
@@ -1,4 +1,36 @@
-import { inheritAriaAttributes } from './helpers';
+import { inheritAriaAttributes, isEndSide } from './helpers';
+
+describe('isEndSide', () => {
+  afterEach(() => {
+    document.dir = '';
+    document.body.innerHTML = '';
+  });
+
+  it('should use document direction when no host element is provided', () => {
+    document.dir = 'ltr';
+    expect(isEndSide('start')).toBe(false);
+    expect(isEndSide('end')).toBe(true);
+
+    document.dir = 'rtl';
+    expect(isEndSide('start')).toBe(true);
+    expect(isEndSide('end')).toBe(false);
+  });
+
+  // https://github.com/ionic-team/ionic-framework/issues/30226
+  it('should use the nearest ancestor dir attribute', () => {
+    document.dir = 'ltr';
+
+    const app = document.createElement('ion-app');
+    app.setAttribute('dir', 'rtl');
+
+    const menu = document.createElement('ion-menu');
+    app.appendChild(menu);
+    document.body.appendChild(app);
+
+    expect(isEndSide('start', menu)).toBe(true);
+    expect(isEndSide('end', menu)).toBe(false);
+  });
+});
 
 describe('inheritAriaAttributes', () => {
   it('should inherit aria attributes', () => {
diff --git a/core/src/utils/helpers.ts b/core/src/utils/helpers.ts
index e32956c35eb..9c6052b466f 100644
--- a/core/src/utils/helpers.ts
+++ b/core/src/utils/helpers.ts
@@ -1,5 +1,6 @@
 import type { EventEmitter } from '@stencil/core';
 import { printIonError } from '@utils/logging';
+import { isRTL } from '@utils/rtl';
 
 import type { Side } from '../components/menu/menu-interface';
 
@@ -316,18 +317,22 @@ export const pointerCoord = (ev: any): { x: number; y: number } => {
 
 /**
  * @hidden
- * Given a side, return if it should be on the end
- * based on the value of dir
- * @param side the side
- * @param isRTL whether the application dir is rtl
+ * Given a side, returns whether it resolves to the end side for the current
+ * direction. In RTL `start` is the end side, and in LTR `end` is.
+ *
+ * @param side The current side before being redefined based on the direction.
+ * @param hostEl The component's host element. The direction is resolved from
+ * it or its nearest ancestor that declares one. When omitted, the direction
+ * is resolved from the document.
  */
-export const isEndSide = (side: Side): boolean => {
-  const isRTL = document.dir === 'rtl';
+export const isEndSide = (side: Side, hostEl?: HTMLElement): boolean => {
+  const rtl = isRTL(hostEl);
+
   switch (side) {
     case 'start':
-      return isRTL;
+      return rtl;
     case 'end':
-      return !isRTL;
+      return !rtl;
     default:
       throw new Error(`"${side}" is not a valid value for [side]. Use "start" or "end" instead.`);
   }
diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
index 59b341a7d52..ddcce8f4c1c 100644
--- a/core/src/utils/overlays.ts
+++ b/core/src/utils/overlays.ts
@@ -593,7 +593,29 @@ export const present = async <OverlayPresentOptions>(
    * to the overlay container.
    */
   if (overlay.keyboardClose && (document.activeElement === null || !overlay.el.contains(document.activeElement))) {
-    overlay.el.focus();
+    /**
+     * Some overlays (e.g. modal) put the dialog role and accessible label
+     * on the `.ion-overlay-wrapper` instead of the host. Screen readers
+     * need focus on the element with `role="dialog"` to properly announce
+     * and navigate the dialog.
+     *
+     * We only target wrappers with `tabindex`, since `role="dialog"` alone
+     * does not make an element focusable. If no focusable dialog wrapper
+     * exists (e.g. picker-legacy), we fall back to the host.
+     */
+    const overlayWrapper = getElementRoot(overlay.el).querySelector<HTMLElement>('[role="dialog"][tabindex]');
+    const focusTarget = overlayWrapper ?? overlay.el;
+    /**
+     * `preventScroll` keeps this a pure focus move so the viewport does not
+     * jump when the wrapper is partially off-screen (e.g. a sheet modal).
+     * Guard the options call so an older engine that mishandles it can never
+     * reject present(); we fall back to a plain focus() in that case.
+     */
+    try {
+      focusTarget.focus({ preventScroll: true });
+    } catch {
+      focusTarget.focus();
+    }
   }
 
   /**
diff --git a/core/src/utils/rtl/dir.spec.ts b/core/src/utils/rtl/dir.spec.ts
index 57061abc5cb..cc3245e0f55 100644
--- a/core/src/utils/rtl/dir.spec.ts
+++ b/core/src/utils/rtl/dir.spec.ts
@@ -1,25 +1,93 @@
 import { isRTL } from './dir';
 
 describe('rtl: dir', () => {
-  describe('with host element', () => {
-    it('should return true', () => {
-      expect(isRTL({ dir: 'rtl' })).toBe(true);
+  /**
+   * Renders the given markup and returns the element with `id="target"`.
+   */
+  const render = (html: string): Element => {
+    document.body.innerHTML = html;
+
+    const target = document.body.querySelector('#target');
+    if (target === null) {
+      throw new Error('Test markup must contain an element with id="target".');
+    }
+
+    return target;
+  };
+
+  beforeEach(() => {
+    /**
+     * Reset to the state of a document that never set a direction, rather than
+     * to `ltr`, so that tests relying on the default are not masked.
+     */
+    document.dir = '';
+    document.body.innerHTML = '';
+  });
+
+  describe('with a host element', () => {
+    it('should use the dir on the element itself', () => {
+      expect(isRTL(render('<div id="target" dir="rtl"></div>'))).toBe(true);
+      expect(isRTL(render('<div id="target" dir="ltr"></div>'))).toBe(false);
+    });
+
+    it('should use the nearest ancestor that declares a dir', () => {
+      expect(isRTL(render('<div dir="rtl"><div><div id="target"></div></div></div>'))).toBe(true);
+      expect(isRTL(render('<div dir="ltr"><div><div id="target"></div></div></div>'))).toBe(false);
+    });
+
+    it('should let an inner dir override an outer one', () => {
+      expect(isRTL(render('<div dir="rtl"><div dir="ltr" id="target"></div></div>'))).toBe(false);
+      expect(isRTL(render('<div dir="ltr"><div dir="rtl" id="target"></div></div>'))).toBe(true);
+    });
+
+    it('should ignore casing', () => {
+      expect(isRTL(render('<div id="target" dir="RTL"></div>'))).toBe(true);
+      expect(isRTL(render('<div dir="RTL"><div id="target" dir="LTR"></div></div>'))).toBe(false);
     });
 
-    it('should return false', () => {
-      expect(isRTL({ dir: 'ltr' })).toBe(false);
-      expect(isRTL({ dir: '' })).toBe(false);
+    it('should skip values that do not declare a direction', () => {
+      /**
+       * `dir=""`, `dir="auto"` and unknown values are not used as a direction,
+       * so the nearest ancestor that does declare one still wins.
+       */
+      expect(isRTL(render('<div dir="rtl"><div id="target" dir=""></div></div>'))).toBe(true);
+      expect(isRTL(render('<div dir="rtl"><div id="target" dir="auto"></div></div>'))).toBe(true);
+      expect(isRTL(render('<div dir="rtl"><div id="target" dir="sideways"></div></div>'))).toBe(true);
     });
   });
 
-  describe('without host element', () => {
-    it('should return true', () => {
-      global.document.dir = 'rtl';
-      expect(isRTL()).toBe(true);
+  describe('falling back to the document', () => {
+    it('should use the document dir when no ancestor declares one', () => {
+      document.dir = 'rtl';
+      expect(isRTL(render('<div><div id="target"></div></div>'))).toBe(true);
+
+      document.dir = 'ltr';
+      expect(isRTL(render('<div><div id="target"></div></div>'))).toBe(false);
+    });
+
+    it('should use the document dir for a detached element', () => {
+      document.dir = 'rtl';
+      expect(isRTL(document.createElement('div'))).toBe(true);
     });
 
-    it('should return false', () => {
-      global.document.dir = 'ltr';
+    it('should default to ltr when no dir is set anywhere', () => {
+      // Ensure the default is actually being tested rather than a
+      // value left behind by another test.
+      expect(document.dir).toBe('');
+
+      expect(isRTL()).toBe(false);
+      expect(isRTL(null)).toBe(false);
+      expect(isRTL(document.createElement('div'))).toBe(false);
+      expect(isRTL(render('<div><div id="target"></div></div>'))).toBe(false);
+    });
+  });
+
+  describe('without a host element', () => {
+    it('should use the document dir', () => {
+      document.dir = 'rtl';
+      expect(isRTL()).toBe(true);
+
+      document.dir = 'ltr';
       expect(isRTL()).toBe(false);
     });
   });
diff --git a/core/src/utils/rtl/dir.ts b/core/src/utils/rtl/dir.ts
index 7e1cb9cb1b9..1d7de2dd261 100644
--- a/core/src/utils/rtl/dir.ts
+++ b/core/src/utils/rtl/dir.ts
@@ -1,13 +1,24 @@
 /**
- * Returns `true` if the document or host element
- * has a `dir` set to `rtl`. The host value will always
- * take priority over the root document value.
+ * Returns `true` if the direction resolves to `rtl` for the given element.
+ *
+ * The direction comes from the nearest ancestor that declares one, starting
+ * with `hostEl` itself, and falls back to the root document value. Setting
+ * `dir="auto"` or setting `dir` to an empty string are skipped rather than
+ * treated as `ltr`. When nothing declares a direction, including the document,
+ * the direction is `ltr`.
+ *
+ * @param hostEl the element to resolve the direction for.
  */
-export const isRTL = (hostEl?: Pick<HTMLElement, 'dir'>) => {
-  if (hostEl) {
-    if (hostEl.dir !== '') {
-      return hostEl.dir.toLowerCase() === 'rtl';
+export const isRTL = (hostEl?: Element | null): boolean => {
+  for (let el = hostEl; el; el = el.parentElement) {
+    const dir = el.getAttribute('dir')?.toLowerCase();
+
+    if (dir === 'rtl') {
+      return true;
+    }
+    if (dir === 'ltr') {
+      return false;
     }
   }
-  return document?.dir.toLowerCase() === 'rtl';
+  return document?.dir?.toLowerCase() === 'rtl';
 };
diff --git a/core/src/utils/test/overlays/overlays.e2e.ts b/core/src/utils/test/overlays/overlays.e2e.ts
index ebe7d25a273..b5cee3b7932 100644
--- a/core/src/utils/test/overlays/overlays.e2e.ts
+++ b/core/src/utils/test/overlays/overlays.e2e.ts
@@ -421,5 +421,113 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       // verify focus is in correct location
       await expect(input).toBeFocused();
     });
+
+    // Focus the role="dialog" wrapper on present so screen readers can enter.
+    test('should focus the modal wrapper on present', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'FW-7611',
+      });
+      await page.setContent(
+        `
+        <ion-modal>
+          <ion-content>Modal Content</ion-content>
+        </ion-modal>
+      `,
+        config
+      );
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const modal = page.locator('ion-modal');
+      const wrapper = page.locator('ion-modal .modal-wrapper');
+
+      await modal.evaluate((el: HTMLIonModalElement) => el.present());
+      await ionModalDidPresent.next();
+
+      await expect(wrapper).toHaveAttribute('role', 'dialog');
+      await expect(wrapper).toBeFocused();
+    });
+
+    test('should focus the sheet modal wrapper on present', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'FW-7611',
+      });
+      await page.setContent(
+        `
+        <ion-modal initial-breakpoint="0.5" breakpoints="[0, 0.5, 1]">
+          <ion-content>Sheet Modal Content</ion-content>
+        </ion-modal>
+      `,
+        config
+      );
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const modal = page.locator('ion-modal');
+      const wrapper = page.locator('ion-modal .modal-wrapper');
+
+      await modal.evaluate((el: HTMLIonModalElement) => el.present());
+      await ionModalDidPresent.next();
+
+      await expect(wrapper).toHaveAttribute('role', 'dialog');
+      await expect(wrapper).toBeFocused();
+    });
+
+    test('should focus the sheet modal wrapper on present when handleBehavior is cycle', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'FW-7611',
+      });
+      // present()'s wrapper focus must survive the cycle-handle focus redirect.
+      await page.setContent(
+        `
+        <ion-modal initial-breakpoint="0.5" breakpoints="[0, 0.5, 1]" handle-behavior="cycle">
+          <ion-content>Sheet Modal Content</ion-content>
+        </ion-modal>
+      `,
+        config
+      );
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const modal = page.locator('ion-modal');
+      const wrapper = page.locator('ion-modal .modal-wrapper');
+
+      await modal.evaluate((el: HTMLIonModalElement) => el.present());
+      await ionModalDidPresent.next();
+
+      await expect(wrapper).toHaveAttribute('role', 'dialog');
+      await expect(wrapper).toBeFocused();
+    });
+
+    test('should focus the card modal wrapper on present', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'FW-7611',
+      });
+      await page.setContent(
+        `
+        <div class="ion-page">
+          <ion-content>Root Content</ion-content>
+        </div>
+        <ion-modal>
+          <ion-content>Card Modal Content</ion-content>
+        </ion-modal>
+      `,
+        config
+      );
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const modal = page.locator('ion-modal');
+      const wrapper = page.locator('ion-modal .modal-wrapper');
+
+      await modal.evaluate((el: HTMLIonModalElement) => {
+        el.presentingElement = document.querySelector<HTMLElement>('.ion-page')!;
+        return el.present();
+      });
+      await ionModalDidPresent.next();
+
+      await expect(wrapper).toHaveAttribute('role', 'dialog');
+      await expect(wrapper).toBeFocused();
+    });
   });
 });
diff --git a/core/src/utils/test/playwright/apply-keyboard-focus.ts b/core/src/utils/test/playwright/apply-keyboard-focus.ts
new file mode 100644
index 00000000000..c6103f27546
--- /dev/null
+++ b/core/src/utils/test/playwright/apply-keyboard-focus.ts
@@ -0,0 +1,26 @@
+import type { Locator } from '@playwright/test';
+import { expect } from '@playwright/test';
+
+import type { E2EPage } from './playwright-declarations';
+
+/**
+ * Puts an element into the keyboard focus state that draws the focus indicator.
+ * Requires an `ion-app` so `startFocusVisible` is running. Its listeners attach
+ * asynchronously, so focus is retried until `ion-focused` sticks.
+ *
+ * `Shift` re-enables keyboard mode without moving focus, in case a pointer event
+ * earlier in the test turned it off. Focus moves programmatically because Firefox
+ * cannot move it back into the page once blurred, so an early Tab is unretryable.
+ *
+ * Pass `indicatorLocator` when something other than the focused element gets
+ * `ion-focused`. A checkbox or radio alone in an item has no `ion-focusable` class of
+ * its own because the item draws the indicator for it, so wait on the item.
+ */
+export const applyKeyboardFocus = async (page: E2EPage, locator: Locator, indicatorLocator: Locator = locator) => {
+  await expect(async () => {
+    await page.evaluate(() => (document.activeElement as HTMLElement | null)?.blur());
+    await page.keyboard.press('Shift');
+    await locator.focus();
+    await expect(indicatorLocator).toHaveClass(/ion-focused/, { timeout: 250 });
+  }).toPass({ timeout: 5000 });
+};
diff --git a/core/src/utils/test/playwright/drag-element.ts b/core/src/utils/test/playwright/drag-element.ts
index ec0a8d9ce83..285d5416c2f 100644
--- a/core/src/utils/test/playwright/drag-element.ts
+++ b/core/src/utils/test/playwright/drag-element.ts
@@ -35,6 +35,21 @@ export const dragElementBy = async (
 
   await page.mouse.down();
 
+  // Firefox treats focusable elements (tabindex="-1") as draggable text and
+  // initiates text selection on mouse.down(). In Playwright, this selection
+  // locks in before the gesture detector fires, blocking pointer events.
+  // Clearing it here allows the drag gesture to proceed normally.
+  //
+  // This is scoped to Firefox because the extra page.evaluate() is an awaited
+  // round-trip that adds variable latency between mouse.down() and the first
+  // mouse.move(). Chromium and WebKit don't need the selection clear, and on
+  // WebKit that latency perturbs the timing-derived gesture velocity, causing
+  // the item to settle a few pixels off and flaking screenshot comparisons
+  // (e.g. item-sliding safe-area tests).
+  if (page.context().browser()?.browserType().name() === 'firefox') {
+    await page.evaluate(() => window.getSelection()?.removeAllRanges());
+  }
+
   // Drag the element.
   await moveElement(page, startX, startY, dragByX, dragByY);
 
diff --git a/core/src/utils/test/playwright/index.ts b/core/src/utils/test/playwright/index.ts
index ce51b371266..777d35d4816 100644
--- a/core/src/utils/test/playwright/index.ts
+++ b/core/src/utils/test/playwright/index.ts
@@ -3,6 +3,7 @@ export * from './playwright-declarations';
 export * from './page/event-spy';
 export * from './page/utils';
 export * from './drag-element';
+export * from './apply-keyboard-focus';
 export * from './matchers';
 export * from './viewports';
 export * from './generator';
diff --git a/core/stencil.config.ts b/core/stencil.config.ts
index 8a090b65bff..948c5bff4a9 100644
--- a/core/stencil.config.ts
+++ b/core/stencil.config.ts
@@ -274,5 +274,11 @@ export const config: Config = {
      * the default behavior (slated for a future Stencil major version).
      */
     experimentalScopedSlotChanges: true,
+    /**
+     * Vite 8 / Rolldown honors the `@vite-ignore` comment on the lazy loader's dynamic import
+     * and never emits the `.entry.js` chunks, so requests for them 404. This flag prepends a
+     * switch of literal import paths those bundlers can resolve.
+     */
+    enableImportInjection: true,
   }
 };
diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md
index 0a6687d7b3d..a0f13e52210 100644
--- a/docs/CONTRIBUTING.md
+++ b/docs/CONTRIBUTING.md
@@ -293,7 +293,7 @@ npm install file:/~/ionic-vue-router-7.0.1.tgz
 3. If a new test is needed, the easiest way is to copy the `basic/` directory from the component's `test/` directory, rename it, and edit the content in both the `index.html` and `e2e.ts` file (see [Screenshot Tests](#screenshot-tests) for more information on this file).
 4. The `preview/` directory is used in the documentation as a demo. Only update this test if there is a bug in the test or if the API has a change that hasn't been updated in the test.
 
-See [Ionic's E2E testing guide](../core/src/utils/test/playwright/docs/README.md) for information regarding the tools you can use to test Ionic.
+Refer to [Ionic's E2E testing guide](/core/src/utils/test/playwright/docs/README.md) for information regarding the tools you can use to test Ionic.
 
 ##### Screenshot Tests
 
diff --git a/docs/angular/testing.md b/docs/angular/testing.md
index 4e18351378e..39d1121222e 100644
--- a/docs/angular/testing.md
+++ b/docs/angular/testing.md
@@ -6,13 +6,17 @@ Ionic Framework supports multiple versions of Angular. As a result, we need to v
 
 The Angular test app supports syncing your locally built changes for validation. This allows you to test local changes like `core` without having to publish a new version of the package.
 
+> [!TIP]
+> In the root directory, run `npm unlink *` to remove any previous links you have built.
+
 1. Build the `core` directory.
 2. Navigate to `packages/angular` and run `npm run sync`.
 3. Build `packages/angular` using `npm run build`.
-4. [Build the Angular test app](#test-app-build-structure).
-5. Navigate to the built test app directory (e.g. `packages/angular/test/build/ng14`).
-6. Install dependencies using `npm install`.
-7. Sync your local changes using `npm run sync`.
+4. Navigate to `packages/angular-server` and run `npm install && npm run build`.
+5. [Build the Angular test app](#test-app-build-structure).
+6. Navigate to the built test app directory (e.g. `packages/angular/test/build/ng14`).
+7. Install dependencies using `npm install`.
+8. Sync your local changes using `npm run sync`.
 
 From here you can either build the application or start a local dev server. When re-syncing changes, you will need to [wipe or disable the application cache](#application-cache).
 
@@ -86,6 +90,10 @@ Tests for lazy loaded Ionic UI components should only be added under the `/lazy`
 
 Tests for standalone Ionic UI components should only be added under the `/standalone` route. This allows for an isolated environment where the lazy loaded `IonicModule` is not initialized. The standalone components use Stencil's custom element bundle instead of the lazy loaded bundle. If `IonicModule` is initialized then the Stencil components will fall back to using the lazy loaded implementation instead of the custom elements bundle implementation.
 
+### Waiting for Ionic Components
+
+Use the `componentOnReady` helper exported from `@ionic/core` rather than calling `el.componentOnReady()` directly. That method only exists on lazy loaded elements, so a direct call throws under the `/standalone` route. The helper covers both: under `/lazy` it awaits the element's own `componentOnReady()` promise, and under `/standalone` it waits one animation frame, giving the component's inner contents a chance to render.
+
 ## Adding New Test Apps
 
 As we add support for new versions of Angular, we will also need to update this directory to test against new applications. The following steps can serve as a guide for adding new apps:
diff --git a/docs/core/testing/usage-instructions.md b/docs/core/testing/usage-instructions.md
index cccac3b8a55..9b3c5d6c23d 100644
--- a/docs/core/testing/usage-instructions.md
+++ b/docs/core/testing/usage-instructions.md
@@ -31,14 +31,24 @@ Rancher Desktop provides the Docker engine functionality needed to run our conta
 
 ### Installing Rancher Desktop
 
-Rancher Desktop can be installed by [following the steps on the Rancher Desktop website](https://rancherdesktop.io/).
+Install Rancher Desktop by following the instructions on the [Rancher Desktop website](https://rancherdesktop.io/).
 
-After launching Rancher Desktop, choose the following settings to ensure Docker is properly configured:
-  - Uncheck "Enable Kubernetes"
-  - Choose Container Engine: `dockerd` (this enables the Docker Engine)
+After launching Rancher Desktop, open **Preferences** and configure the following settings:
+
+- **Container Engine → General**
+  - Enable Kubernetes: Unchecked
+  - Container Engine: `dockerd`
+
+- **Application**
   - Configure PATH: Automatic
 
-Once installed and configured, you can use all Docker commands through Rancher Desktop just as you would with Docker Desktop. All commands in this guide that reference Docker (such as `npm run test.e2e.docker`) will work through Rancher Desktop's Docker engine.
+- **Virtual Machine**
+  - Emulation: `VZ`
+  - Volumes: `virtiofs`
+
+The **Virtual Machine** settings above are required for Docker to execute binaries correctly within mounted volumes during E2E tests.
+
+Once Rancher Desktop is configured, you can use Docker commands just as you would with Docker Desktop.
 
 ### Docker and Windows Development
 
diff --git a/docs/react/testing.md b/docs/react/testing.md
index 1c9da9c6829..0def2f136d3 100644
--- a/docs/react/testing.md
+++ b/docs/react/testing.md
@@ -43,6 +43,12 @@ If you want to add a version-specific change, add the change inside of the appro
 
 If you need to add E2E tests that are only run on a specific version of the JS Framework, replicate the `VersionTest` component on each partial application. This ensures that tests for framework version X do not get run for framework version Y.
 
+### Testing Ionic Components
+
+`@ionic/react` imports every component through `defineCustomElement` from `@ionic/core/components`, so every test runs against the custom elements build.
+
+These test apps are Cypress only, and Cypress retries assertions until they pass, so there is nothing to wait on manually today. If we add unit tests that assert against rendered DOM, use the `componentOnReady` helper exported from `@ionic/core` rather than calling `el.componentOnReady()` directly. That method does not exist on custom elements, so the direct call throws. The helper waits one animation frame instead, giving the component's inner contents a chance to render.
+
 ## Adding New Test Apps
 
 As we add support for new versions of React, we will also need to update this directory to test against new applications. The following steps can serve as a guide for adding new apps:
diff --git a/docs/vue/testing.md b/docs/vue/testing.md
index 268628f2ea5..f65f3459591 100644
--- a/docs/vue/testing.md
+++ b/docs/vue/testing.md
@@ -46,6 +46,14 @@ If you want to add a version-specific change, add the change inside of the appro
 
 If you need to add E2E tests that are only run on a specific version of the JS Framework, replicate the `VersionTest` component on each partial application. This ensures that tests for framework version X do not get run for framework version Y.
 
+### Testing Ionic Components
+
+`@ionic/vue` imports every component through `defineCustomElement` from `@ionic/core/components`, so every test runs against the custom elements build.
+
+These test apps are Cypress only, and Cypress retries assertions until they pass, so there is nothing to wait on manually today. If we add unit tests that assert against rendered DOM, use the `componentOnReady` helper exported from `@ionic/core` rather than calling `el.componentOnReady()` directly. That method does not exist on custom elements, so the direct call throws. The helper waits one animation frame instead, giving the component's inner contents a chance to render.
+
+When testing Ionic components, use the exported `componentOnReady` helper from `@ionic/core` instead of calling `el.componentOnReady()` directly. The helper works with both lazy-loaded and custom-element builds, making it more likely the component has finished rendering before making assertions against its rendered DOM or running accessibility tests.
+
 ## Adding New Test Apps
 
 As we add support for new versions of Vue, we will also need to update this directory to test against new applications. The following steps can serve as a guide for adding new apps:
diff --git a/lerna.json b/lerna.json
index 8527f66f2c1..bb1850e0fa4 100644
--- a/lerna.json
+++ b/lerna.json
@@ -3,5 +3,5 @@
     "core",
     "packages/*"
   ],
-  "version": "8.8.7"
+  "version": "8.8.18"
 }
\ No newline at end of file
diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md
index 90ba0e04927..e21d866a157 100644
--- a/packages/angular-server/CHANGELOG.md
+++ b/packages/angular-server/CHANGELOG.md
@@ -3,6 +3,97 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.18](https://github.com/ionic-team/ionic-framework/compare/v8.8.17...v8.8.18) (2026-08-12)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [8.8.17](https://github.com/ionic-team/ionic-framework/compare/v8.8.16...v8.8.17) (2026-08-05)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [8.8.16](https://github.com/ionic-team/ionic-framework/compare/v8.8.15...v8.8.16) (2026-07-29)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [8.8.15](https://github.com/ionic-team/ionic-framework/compare/v8.8.14...v8.8.15) (2026-07-22)
+
+
+### Bug Fixes
+
+* **angular-server:** fallback to scoped+annotations when SSR DOM lacks attachShadow ([#30967](https://github.com/ionic-team/ionic-framework/issues/30967)) ([ae6911f](https://github.com/ionic-team/ionic-framework/commit/ae6911f6c8d46467ae54114295688bbba5ccbf5e)), closes [#29751](https://github.com/ionic-team/ionic-framework/issues/29751)
+
+
+
+
+
+## [8.8.14](https://github.com/ionic-team/ionic-framework/compare/v8.8.13...v8.8.14) (2026-07-15)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [8.8.13](https://github.com/ionic-team/ionic-framework/compare/v8.8.12...v8.8.13) (2026-07-01)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [8.8.12](https://github.com/ionic-team/ionic-framework/compare/v8.8.11...v8.8.12) (2026-06-24)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [8.8.11](https://github.com/ionic-team/ionic-framework/compare/v8.8.10...v8.8.11) (2026-06-17)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [8.8.10](https://github.com/ionic-team/ionic-framework/compare/v8.8.9...v8.8.10) (2026-06-10)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [8.8.9](https://github.com/ionic-team/ionic-framework/compare/v8.8.8...v8.8.9) (2026-06-03)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [8.8.8](https://github.com/ionic-team/ionic-framework/compare/v8.8.7...v8.8.8) (2026-05-20)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
 ## [8.8.7](https://github.com/ionic-team/ionic-framework/compare/v8.8.6...v8.8.7) (2026-05-13)
 
 **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 0c205e49cec..06eeb9f9f6f 100644
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular-server",
-  "version": "8.8.7",
+  "version": "8.8.18",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular-server",
-      "version": "8.8.7",
+      "version": "8.8.18",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.8.7"
+        "@ionic/core": "^8.8.18"
       },
       "devDependencies": {
         "@angular-eslint/eslint-plugin": "^16.0.0",
@@ -1031,12 +1031,12 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.8.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.7.tgz",
-      "integrity": "sha512-eHfu6yea7tcog4vUzfT//LavH/poh8zI3cgO/CDXvOehdCi9QONPeeXE+PaCBFkMnD5Q+08SFF/7a/IfD0X0mQ==",
+      "version": "8.8.18",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.18.tgz",
+      "integrity": "sha512-QRFqi6gMSTk89FMjtoDx3p6e2dD7mYxqYzS0+Hl+yjxnoWoNFluWKM9rnGEEkdvpY7bF1pt6CI5IwMt+vjYQWg==",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "4.43.0",
+        "@stencil/core": "4.43.5",
         "ionicons": "^8.0.13",
         "tslib": "^2.1.0"
       },
@@ -1285,9 +1285,9 @@
       }
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.9.tgz",
-      "integrity": "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.44.0.tgz",
+      "integrity": "sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA==",
       "cpu": [
         "arm64"
       ],
@@ -1298,9 +1298,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz",
-      "integrity": "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.44.0.tgz",
+      "integrity": "sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ==",
       "cpu": [
         "x64"
       ],
@@ -1311,9 +1311,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz",
-      "integrity": "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.44.0.tgz",
+      "integrity": "sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ==",
       "cpu": [
         "arm64"
       ],
@@ -1324,9 +1324,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz",
-      "integrity": "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.44.0.tgz",
+      "integrity": "sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q==",
       "cpu": [
         "arm64"
       ],
@@ -1337,9 +1337,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz",
-      "integrity": "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.44.0.tgz",
+      "integrity": "sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw==",
       "cpu": [
         "x64"
       ],
@@ -1350,9 +1350,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz",
-      "integrity": "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.44.0.tgz",
+      "integrity": "sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA==",
       "cpu": [
         "x64"
       ],
@@ -1363,9 +1363,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz",
-      "integrity": "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.44.0.tgz",
+      "integrity": "sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w==",
       "cpu": [
         "arm64"
       ],
@@ -1376,9 +1376,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz",
-      "integrity": "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.44.0.tgz",
+      "integrity": "sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ==",
       "cpu": [
         "x64"
       ],
@@ -1389,9 +1389,9 @@
       ]
     },
     "node_modules/@stencil/core": {
-      "version": "4.43.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz",
-      "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==",
+      "version": "4.43.5",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.5.tgz",
+      "integrity": "sha512-cgWD+GeuvJpTe1WQn40p02+BJ2j0j1YJ17GdkF2qKIQ23s2e3Zivq5yISXS3dcuV6oUJFN93jprdk+nk/sq99Q==",
       "license": "MIT",
       "bin": {
         "stencil": "bin/stencil"
@@ -1401,14 +1401,14 @@
         "npm": ">=7.10.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-darwin-arm64": "4.34.9",
-        "@rollup/rollup-darwin-x64": "4.34.9",
-        "@rollup/rollup-linux-arm64-gnu": "4.34.9",
-        "@rollup/rollup-linux-arm64-musl": "4.34.9",
-        "@rollup/rollup-linux-x64-gnu": "4.34.9",
-        "@rollup/rollup-linux-x64-musl": "4.34.9",
-        "@rollup/rollup-win32-arm64-msvc": "4.34.9",
-        "@rollup/rollup-win32-x64-msvc": "4.34.9"
+        "@rollup/rollup-darwin-arm64": "4.44.0",
+        "@rollup/rollup-darwin-x64": "4.44.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.44.0",
+        "@rollup/rollup-linux-arm64-musl": "4.44.0",
+        "@rollup/rollup-linux-x64-gnu": "4.44.0",
+        "@rollup/rollup-linux-x64-musl": "4.44.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.44.0",
+        "@rollup/rollup-win32-x64-msvc": "4.44.0"
       }
     },
     "node_modules/@types/estree": {
@@ -7309,11 +7309,11 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.8.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.7.tgz",
-      "integrity": "sha512-eHfu6yea7tcog4vUzfT//LavH/poh8zI3cgO/CDXvOehdCi9QONPeeXE+PaCBFkMnD5Q+08SFF/7a/IfD0X0mQ==",
+      "version": "8.8.18",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.18.tgz",
+      "integrity": "sha512-QRFqi6gMSTk89FMjtoDx3p6e2dD7mYxqYzS0+Hl+yjxnoWoNFluWKM9rnGEEkdvpY7bF1pt6CI5IwMt+vjYQWg==",
       "requires": {
-        "@stencil/core": "4.43.0",
+        "@stencil/core": "4.43.5",
         "ionicons": "^8.0.13",
         "tslib": "^2.1.0"
       }
@@ -7484,66 +7484,66 @@
       }
     },
     "@rollup/rollup-darwin-arm64": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.9.tgz",
-      "integrity": "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.44.0.tgz",
+      "integrity": "sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA==",
       "optional": true
     },
     "@rollup/rollup-darwin-x64": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz",
-      "integrity": "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.44.0.tgz",
+      "integrity": "sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ==",
       "optional": true
     },
     "@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz",
-      "integrity": "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.44.0.tgz",
+      "integrity": "sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ==",
       "optional": true
     },
     "@rollup/rollup-linux-arm64-musl": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz",
-      "integrity": "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.44.0.tgz",
+      "integrity": "sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q==",
       "optional": true
     },
     "@rollup/rollup-linux-x64-gnu": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz",
-      "integrity": "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.44.0.tgz",
+      "integrity": "sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw==",
       "optional": true
     },
     "@rollup/rollup-linux-x64-musl": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz",
-      "integrity": "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.44.0.tgz",
+      "integrity": "sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA==",
       "optional": true
     },
     "@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz",
-      "integrity": "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.44.0.tgz",
+      "integrity": "sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w==",
       "optional": true
     },
     "@rollup/rollup-win32-x64-msvc": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz",
-      "integrity": "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.44.0.tgz",
+      "integrity": "sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ==",
       "optional": true
     },
     "@stencil/core": {
-      "version": "4.43.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz",
-      "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==",
-      "requires": {
-        "@rollup/rollup-darwin-arm64": "4.34.9",
-        "@rollup/rollup-darwin-x64": "4.34.9",
-        "@rollup/rollup-linux-arm64-gnu": "4.34.9",
-        "@rollup/rollup-linux-arm64-musl": "4.34.9",
-        "@rollup/rollup-linux-x64-gnu": "4.34.9",
-        "@rollup/rollup-linux-x64-musl": "4.34.9",
-        "@rollup/rollup-win32-arm64-msvc": "4.34.9",
-        "@rollup/rollup-win32-x64-msvc": "4.34.9"
+      "version": "4.43.5",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.5.tgz",
+      "integrity": "sha512-cgWD+GeuvJpTe1WQn40p02+BJ2j0j1YJ17GdkF2qKIQ23s2e3Zivq5yISXS3dcuV6oUJFN93jprdk+nk/sq99Q==",
+      "requires": {
+        "@rollup/rollup-darwin-arm64": "4.44.0",
+        "@rollup/rollup-darwin-x64": "4.44.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.44.0",
+        "@rollup/rollup-linux-arm64-musl": "4.44.0",
+        "@rollup/rollup-linux-x64-gnu": "4.44.0",
+        "@rollup/rollup-linux-x64-musl": "4.44.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.44.0",
+        "@rollup/rollup-win32-x64-msvc": "4.44.0"
       }
     },
     "@types/estree": {
diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json
index d1365fecd85..8d92a971fc2 100644
--- a/packages/angular-server/package.json
+++ b/packages/angular-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular-server",
-  "version": "8.8.7",
+  "version": "8.8.18",
   "description": "Angular SSR Module for Ionic",
   "keywords": [
     "ionic",
@@ -62,6 +62,6 @@
   },
   "prettier": "@ionic/prettier-config",
   "dependencies": {
-    "@ionic/core": "^8.8.7"
+    "@ionic/core": "^8.8.18"
   }
 }
diff --git a/packages/angular-server/src/ionic-server-module.ts b/packages/angular-server/src/ionic-server-module.ts
index 72b53de322e..f2d65755a6a 100644
--- a/packages/angular-server/src/ionic-server-module.ts
+++ b/packages/angular-server/src/ionic-server-module.ts
@@ -20,8 +20,17 @@ export class IonicServerModule {}
 export function hydrateIonicComponents(doc: any, appId: any) {
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   return () => {
+    const supportsNativeAttachShadow =
+      typeof doc?.createElement?.('div')?.attachShadow === 'function';
+
     return hydrateDocument(doc, {
-      clientHydrateAnnotations: false,
+      // Fallback for SSR DOMs (e.g. Domino) that do not implement attachShadow.
+      ...(supportsNativeAttachShadow
+        ? { clientHydrateAnnotations: false }
+        : {
+            serializeShadowRoot: 'scoped',
+            clientHydrateAnnotations: true,
+          }),
       excludeComponents: [
         // overlays
         'ion-action-sheet',
diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md
index 256799b62ad..eba40d13271 100644
--- a/packages/angular/CHANGELOG.md
+++ b/packages/angular/CHANGELOG.md
@@ -3,6 +3,107 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.18](https://github.com/ionic-team/ionic-framework/compare/v8.8.17...v8.8.18) (2026-08-12)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [8.8.17](https://github.com/ionic-team/ionic-framework/compare/v8.8.16...v8.8.17) (2026-08-05)
+
+
+### Bug Fixes
+
+* **fab-button:** restore submit, reset, and disabled form functionality ([#31249](https://github.com/ionic-team/ionic-framework/issues/31249)) ([93ee380](https://github.com/ionic-team/ionic-framework/commit/93ee38015125619509b9aa844d6f0025be0a71b7)), closes [#18550](https://github.com/ionic-team/ionic-framework/issues/18550)
+
+
+
+
+
+## [8.8.16](https://github.com/ionic-team/ionic-framework/compare/v8.8.15...v8.8.16) (2026-07-29)
+
+
+### Bug Fixes
+
+* **angular:** guard transition against destroyed router outlet ([#31297](https://github.com/ionic-team/ionic-framework/issues/31297)) ([fdef61c](https://github.com/ionic-team/ionic-framework/commit/fdef61cc74285caff0549ba8bdac70cedaaba865)), closes [#31296](https://github.com/ionic-team/ionic-framework/issues/31296)
+
+
+
+
+
+## [8.8.15](https://github.com/ionic-team/ionic-framework/compare/v8.8.14...v8.8.15) (2026-07-22)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [8.8.14](https://github.com/ionic-team/ionic-framework/compare/v8.8.13...v8.8.14) (2026-07-15)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [8.8.13](https://github.com/ionic-team/ionic-framework/compare/v8.8.12...v8.8.13) (2026-07-01)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [8.8.12](https://github.com/ionic-team/ionic-framework/compare/v8.8.11...v8.8.12) (2026-06-24)
+
+
+### Bug Fixes
+
+* **angular:** honor modifier-click on routerLink ([#31230](https://github.com/ionic-team/ionic-framework/issues/31230)) ([2ac9851](https://github.com/ionic-team/ionic-framework/commit/2ac98512c78f6d47e3a6a17ff0159047ba14a5cd)), closes [#26394](https://github.com/ionic-team/ionic-framework/issues/26394)
+* **angular:** run change detection on attached overlay views ([#31235](https://github.com/ionic-team/ionic-framework/issues/31235)) ([8e76fd0](https://github.com/ionic-team/ionic-framework/commit/8e76fd0cceeb878ad4b071515acb593892512111)), closes [#31220](https://github.com/ionic-team/ionic-framework/issues/31220)
+
+
+
+
+
+## [8.8.11](https://github.com/ionic-team/ionic-framework/compare/v8.8.10...v8.8.11) (2026-06-17)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [8.8.10](https://github.com/ionic-team/ionic-framework/compare/v8.8.9...v8.8.10) (2026-06-10)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [8.8.9](https://github.com/ionic-team/ionic-framework/compare/v8.8.8...v8.8.9) (2026-06-03)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [8.8.8](https://github.com/ionic-team/ionic-framework/compare/v8.8.7...v8.8.8) (2026-05-20)
+
+
+### Bug Fixes
+
+* **tabs:** preserve query params and fragment from tab button href ([#31154](https://github.com/ionic-team/ionic-framework/issues/31154)) ([0182bba](https://github.com/ionic-team/ionic-framework/commit/0182bba06d6171dd2faf80556fd2131abf03fa93)), closes [#25470](https://github.com/ionic-team/ionic-framework/issues/25470)
+
+
+
+
+
 ## [8.8.7](https://github.com/ionic-team/ionic-framework/compare/v8.8.6...v8.8.7) (2026-05-13)
 
 **Note:** Version bump only for package @ionic/angular
diff --git a/packages/angular/common/src/directives/navigation/router-link-delegate.ts b/packages/angular/common/src/directives/navigation/router-link-delegate.ts
index 4391d6ea0d1..3da7d105c9b 100644
--- a/packages/angular/common/src/directives/navigation/router-link-delegate.ts
+++ b/packages/angular/common/src/directives/navigation/router-link-delegate.ts
@@ -1,5 +1,5 @@
 import { LocationStrategy } from '@angular/common';
-import { ElementRef, OnChanges, OnInit, Directive, HostListener, Input, Optional } from '@angular/core';
+import { ElementRef, OnChanges, OnDestroy, OnInit, Directive, HostListener, Input, Optional } from '@angular/core';
 import { Router, RouterLink } from '@angular/router';
 import type { AnimationBuilder, RouterDirection } from '@ionic/core/components';
 
@@ -14,7 +14,7 @@ import { NavController } from '../../providers/nav-controller';
 @Directive({
   selector: ':not(a):not(area)[routerLink]',
 })
-export class RouterLinkDelegateDirective implements OnInit, OnChanges {
+export class RouterLinkDelegateDirective implements OnInit, OnChanges, OnDestroy {
   @Input()
   routerDirection: RouterDirection = 'forward';
 
@@ -32,12 +32,51 @@ export class RouterLinkDelegateDirective implements OnInit, OnChanges {
   ngOnInit(): void {
     this.updateTargetUrlAndHref();
     this.updateTabindex();
+
+    /**
+     * Ionic components like `ion-item` render a native anchor in their shadow DOM,
+     * so a modifier click (ctrl/meta/shift/alt) or a non-`_self` target should let
+     * the browser handle the navigation natively (new tab, new window, download)
+     * instead of navigating in-app.
+     *
+     * We listen in the capture phase so this runs before Angular's `RouterLink`
+     * handler and our own bubble-phase `onClick`. On a native-navigation intent it
+     * stops propagation to cancel the in-app navigation, but leaves `preventDefault`
+     * alone so the native anchor can still act.
+     */
+    this.elementRef.nativeElement.addEventListener('click', this.onCaptureClick, { capture: true });
   }
 
   ngOnChanges(): void {
     this.updateTargetUrlAndHref();
   }
 
+  ngOnDestroy(): void {
+    this.elementRef.nativeElement.removeEventListener('click', this.onCaptureClick, { capture: true });
+  }
+
+  private onCaptureClick = (ev: Event): void => {
+    if (this.opensNatively(ev)) {
+      ev.stopImmediatePropagation();
+    }
+  };
+
+  /**
+   * True when the browser should handle the click natively instead of routing
+   * in-app: a modifier was held (ctrl/meta/shift/alt), or the host targets
+   * something other than `_self`. This mirrors the modifier set Angular's own
+   * `RouterLink` guards on, so an Ionic `routerLink` behaves like a plain anchor
+   * for new-tab, new-window, and download intents.
+   */
+  private opensNatively(ev: Event): boolean {
+    if (ev instanceof MouseEvent && (ev.ctrlKey || ev.metaKey || ev.shiftKey || ev.altKey)) {
+      return true;
+    }
+
+    const target = this.elementRef.nativeElement.target;
+    return target != null && target !== '' && target !== '_self';
+  }
+
   /**
    * The `tabindex` is set to `0` by default on the host element when
    * the `routerLink` directive is used. This causes issues with Ionic
diff --git a/packages/angular/common/src/directives/navigation/stack-controller.ts b/packages/angular/common/src/directives/navigation/stack-controller.ts
index 0593219d3f4..e5f89896fd4 100644
--- a/packages/angular/common/src/directives/navigation/stack-controller.ts
+++ b/packages/angular/common/src/directives/navigation/stack-controller.ts
@@ -275,7 +275,10 @@ export class StackController {
       enteringEl.classList.add('ion-page');
       enteringEl.classList.add('ion-page-invisible');
 
-      if ((containerEl as any).commit) {
+      // containerEl is set to undefined when the stack controller is destroyed,
+      // so a transition that resolves after its outlet was destroyed must not
+      // dereference it (see destroy()).
+      if ((containerEl as any)?.commit) {
         return containerEl.commit(enteringEl, leavingEl, {
           duration: direction === undefined ? 0 : undefined,
           direction,
diff --git a/packages/angular/common/src/directives/navigation/tabs.ts b/packages/angular/common/src/directives/navigation/tabs.ts
index 73e8c0cc777..3d994c38ffc 100644
--- a/packages/angular/common/src/directives/navigation/tabs.ts
+++ b/packages/angular/common/src/directives/navigation/tabs.ts
@@ -10,11 +10,54 @@ import {
   AfterViewInit,
   QueryList,
 } from '@angular/core';
+import type { Params } from '@angular/router';
 
 import { NavController } from '../../providers/nav-controller';
 
 import { StackDidChangeEvent, StackWillChangeEvent } from './stack-utils';
 
+/**
+ * Extracts `queryParams` and `fragment` from a tab button's href for use
+ * as Angular `NavigationExtras`. Returns `undefined` when neither is present.
+ */
+const parseHrefExtras = (href: string | undefined): { queryParams?: Params; fragment?: string } | undefined => {
+  if (!href) {
+    return undefined;
+  }
+
+  const hashIndex = href.indexOf('#');
+  // Treat a bare `#` (no fragment text) as no fragment.
+  const fragment = hashIndex >= 0 && hashIndex < href.length - 1 ? href.slice(hashIndex + 1) : undefined;
+  const beforeHash = hashIndex >= 0 ? href.slice(0, hashIndex) : href;
+
+  const queryIndex = beforeHash.indexOf('?');
+  const search = queryIndex >= 0 ? beforeHash.slice(queryIndex + 1) : '';
+
+  let queryParams: Params | undefined;
+  if (search) {
+    const params = new URLSearchParams(search);
+    queryParams = {};
+    for (const key of new Set(params.keys())) {
+      const all = params.getAll(key);
+      queryParams[key] = all.length > 1 ? all : all[0];
+    }
+  }
+
+  if (!queryParams && fragment === undefined) {
+    return undefined;
+  }
+
+  /**
+   * Build the result with only the populated keys so that a spread of the
+   * returned object does not overwrite saved `queryParams`/`fragment` with
+   * `undefined` (which `Object.assign`/spread would copy as a real key).
+   */
+  const extras: { queryParams?: Params; fragment?: string } = {};
+  if (queryParams) extras.queryParams = queryParams;
+  if (fragment !== undefined) extras.fragment = fragment;
+  return extras;
+};
+
 @Directive({
   selector: 'ion-tabs',
 })
@@ -103,23 +146,26 @@ export abstract class IonTabs implements AfterViewInit, AfterContentInit, AfterC
    *
    *   a. Get the saved root view from the router outlet. If the saved root view
    *      matches the tabRootUrl, set the route view to this view including the
-   *      navigation extras.
-   *   b. If the saved root view from the router outlet does
-   *      not match, navigate to the tabRootUrl. No navigation extras are
-   *      included.
+   *      navigation extras. Any `queryParams` or `fragment` declared on the tab
+   *      button's `href` are also forwarded.
+   *   b. If the saved root view from the router outlet does not match, navigate
+   *      to the tabRootUrl, forwarding any `queryParams`/`fragment` declared on
+   *      the tab button's `href`.
    *
    * 2. If the current tab tab is not currently selected, get the last route
    *    view from the router outlet.
    *
    *   a. If the last route view exists, navigate to that view including any
-   *      navigation extras
-   *   b. If the last route view doesn't exist, then navigate
-   *      to the default tabRootUrl
+   *      navigation extras.
+   *   b. If the last route view doesn't exist, then navigate to the default
+   *      tabRootUrl, forwarding any `queryParams`/`fragment` declared on the
+   *      tab button's `href`.
    */
   @HostListener('ionTabButtonClick', ['$event'])
   select(tabOrEvent: string | CustomEvent): Promise<boolean> | undefined {
     const isTabString = typeof tabOrEvent === 'string';
     const tab = isTabString ? tabOrEvent : (tabOrEvent as CustomEvent).detail.tab;
+    const href: string | undefined = isTabString ? undefined : (tabOrEvent as CustomEvent).detail.href;
 
     /**
      * If the tabs are not using the router, then
@@ -136,6 +182,12 @@ export abstract class IonTabs implements AfterViewInit, AfterContentInit, AfterC
     const alreadySelected = this.outlet.getActiveStackId() === tab;
     const tabRootUrl = `${this.outlet.tabsPrefix}/${tab}`;
 
+    /**
+     * The href pathname is ignored here; tab routing is driven by `tabsPrefix/tab`.
+     * Only the query and fragment are forwarded as navigation extras.
+     */
+    const hrefExtras = parseHrefExtras(href);
+
     /**
      * If this is a nested tab, prevent the event
      * from bubbling otherwise the outer tabs
@@ -159,6 +211,7 @@ export abstract class IonTabs implements AfterViewInit, AfterContentInit, AfterC
       const navigationExtras = rootView && tabRootUrl === rootView.url && rootView.savedExtras;
       return this.navCtrl.navigateRoot(tabRootUrl, {
         ...navigationExtras,
+        ...hrefExtras,
         animated: true,
         animationDirection: 'back',
       });
@@ -166,10 +219,11 @@ export abstract class IonTabs implements AfterViewInit, AfterContentInit, AfterC
       const lastRoute = this.outlet.getLastRouteView(tab);
       /**
        * If there is a lastRoute, goto that, otherwise goto the fallback url of the
-       * selected tab
+       * selected tab. When falling back to the tab root, honor query params and
+       * fragment declared on the tab button's href.
        */
       const url = lastRoute?.url || tabRootUrl;
-      const navigationExtras = lastRoute?.savedExtras;
+      const navigationExtras = lastRoute?.savedExtras ?? (url === tabRootUrl ? hrefExtras : undefined);
 
       return this.navCtrl.navigateRoot(url, {
         ...navigationExtras,
diff --git a/packages/angular/common/src/providers/angular-delegate.ts b/packages/angular/common/src/providers/angular-delegate.ts
index bde802ab115..bba50323591 100644
--- a/packages/angular/common/src/providers/angular-delegate.ts
+++ b/packages/angular/common/src/providers/angular-delegate.ts
@@ -233,6 +233,14 @@ export const attachView = (
 
   applicationRef.attachView(componentRef.hostView);
 
+  /**
+   * Run change detection so template bindings (e.g. `<ion-nav [root]="rootPage">`)
+   * apply during this synchronous pass, before the web component runs its load
+   * lifecycle. `createComponent` only runs the creation pass, so without this the
+   * binding lands after the element has loaded, too late for `ion-nav` to read it.
+   */
+  componentRef.changeDetectorRef.detectChanges();
+
   elRefMap.set(hostElement, componentRef);
   elEventsMap.set(hostElement, unbindEvents);
   return hostElement;
diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json
index bf0e687e6c3..8614d76bdaf 100644
--- a/packages/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "8.8.7",
+  "version": "8.8.18",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "8.8.7",
+      "version": "8.8.18",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.8.7",
+        "@ionic/core": "^8.8.18",
         "ionicons": "^8.0.13",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.3.0"
@@ -1398,12 +1398,12 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.8.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.7.tgz",
-      "integrity": "sha512-eHfu6yea7tcog4vUzfT//LavH/poh8zI3cgO/CDXvOehdCi9QONPeeXE+PaCBFkMnD5Q+08SFF/7a/IfD0X0mQ==",
+      "version": "8.8.18",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.18.tgz",
+      "integrity": "sha512-QRFqi6gMSTk89FMjtoDx3p6e2dD7mYxqYzS0+Hl+yjxnoWoNFluWKM9rnGEEkdvpY7bF1pt6CI5IwMt+vjYQWg==",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "4.43.0",
+        "@stencil/core": "4.43.5",
         "ionicons": "^8.0.13",
         "tslib": "^2.1.0"
       },
@@ -1989,9 +1989,9 @@
       }
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.9.tgz",
-      "integrity": "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.44.0.tgz",
+      "integrity": "sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA==",
       "cpu": [
         "arm64"
       ],
@@ -2002,9 +2002,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz",
-      "integrity": "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.44.0.tgz",
+      "integrity": "sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ==",
       "cpu": [
         "x64"
       ],
@@ -2015,9 +2015,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz",
-      "integrity": "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.44.0.tgz",
+      "integrity": "sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ==",
       "cpu": [
         "arm64"
       ],
@@ -2028,9 +2028,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz",
-      "integrity": "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.44.0.tgz",
+      "integrity": "sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q==",
       "cpu": [
         "arm64"
       ],
@@ -2041,9 +2041,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz",
-      "integrity": "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.44.0.tgz",
+      "integrity": "sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw==",
       "cpu": [
         "x64"
       ],
@@ -2054,9 +2054,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz",
-      "integrity": "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.44.0.tgz",
+      "integrity": "sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA==",
       "cpu": [
         "x64"
       ],
@@ -2067,9 +2067,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz",
-      "integrity": "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.44.0.tgz",
+      "integrity": "sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w==",
       "cpu": [
         "arm64"
       ],
@@ -2080,9 +2080,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz",
-      "integrity": "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.44.0.tgz",
+      "integrity": "sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ==",
       "cpu": [
         "x64"
       ],
@@ -2311,9 +2311,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.43.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz",
-      "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==",
+      "version": "4.43.5",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.5.tgz",
+      "integrity": "sha512-cgWD+GeuvJpTe1WQn40p02+BJ2j0j1YJ17GdkF2qKIQ23s2e3Zivq5yISXS3dcuV6oUJFN93jprdk+nk/sq99Q==",
       "license": "MIT",
       "bin": {
         "stencil": "bin/stencil"
@@ -2323,14 +2323,14 @@
         "npm": ">=7.10.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-darwin-arm64": "4.34.9",
-        "@rollup/rollup-darwin-x64": "4.34.9",
-        "@rollup/rollup-linux-arm64-gnu": "4.34.9",
-        "@rollup/rollup-linux-arm64-musl": "4.34.9",
-        "@rollup/rollup-linux-x64-gnu": "4.34.9",
-        "@rollup/rollup-linux-x64-musl": "4.34.9",
-        "@rollup/rollup-win32-arm64-msvc": "4.34.9",
-        "@rollup/rollup-win32-x64-msvc": "4.34.9"
+        "@rollup/rollup-darwin-arm64": "4.44.0",
+        "@rollup/rollup-darwin-x64": "4.44.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.44.0",
+        "@rollup/rollup-linux-arm64-musl": "4.44.0",
+        "@rollup/rollup-linux-x64-gnu": "4.44.0",
+        "@rollup/rollup-linux-x64-musl": "4.44.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.44.0",
+        "@rollup/rollup-win32-x64-msvc": "4.44.0"
       }
     },
     "node_modules/@tootallnate/once": {
diff --git a/packages/angular/package.json b/packages/angular/package.json
index 7193fcfc3b0..a250c9d9c96 100644
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "8.8.7",
+  "version": "8.8.18",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -48,7 +48,7 @@
     }
   },
   "dependencies": {
-    "@ionic/core": "^8.8.7",
+    "@ionic/core": "^8.8.18",
     "ionicons": "^8.0.13",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.3.0"
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index 1c78b120d9d..60385464dd9 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -724,14 +724,14 @@ export declare interface IonFab extends Components.IonFab {}
 
 
 @ProxyCmp({
-  inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type']
+  inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'form', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type']
 })
 @Component({
   selector: 'ion-fab-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type'],
+  inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'form', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type'],
 })
 export class IonFabButton {
   protected el: HTMLIonFabButtonElement;
diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts
index eae6fdb8840..01f20cc6c29 100644
--- a/packages/angular/standalone/src/directives/proxies.ts
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -757,14 +757,14 @@ export declare interface IonFab extends Components.IonFab {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIonFabButton,
-  inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type']
+  inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'form', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type']
 })
 @Component({
   selector: 'ion-fab-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type'],
+  inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'form', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type'],
   standalone: true
 })
 export class IonFabButton {
diff --git a/packages/angular/test/apps/ng16/package-lock.json b/packages/angular/test/apps/ng16/package-lock.json
index 81de0eed7bc..e23645c8644 100644
--- a/packages/angular/test/apps/ng16/package-lock.json
+++ b/packages/angular/test/apps/ng16/package-lock.json
@@ -39,7 +39,7 @@
         "@angular/compiler-cli": "^16.0.0",
         "@angular/language-service": "^16.0.0",
         "@nguniversal/builders": "^16.0.0",
-        "@playwright/test": "^1.54.2",
+        "@playwright/test": "^1.60.0",
         "@types/express": "^4.17.7",
         "@types/node": "^12.12.54",
         "@typescript-eslint/eslint-plugin": "^5.62.0",
@@ -4008,13 +4008,13 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.54.2.tgz",
-      "integrity": "sha512-A+znathYxPf+72riFd1r1ovOLqsIIB0jKIoPjyK2kqEIe30/6jF6BC7QNluHuwUmsD2tv1XZVugN8GqfTMOxsA==",
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.60.0.tgz",
+      "integrity": "sha512-O71yZIbAh/PxDMNGns37GHBIfrVkEVyn+AXyIa5dOTfb4/xNvRWV+Vv/NMbNCtODB/pO7vLlF2OTmMVLhmr7Ag==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright": "1.54.2"
+        "playwright": "1.60.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -12564,13 +12564,13 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.54.2.tgz",
-      "integrity": "sha512-Hu/BMoA1NAdRUuulyvQC0pEqZ4vQbGfn8f7wPXcnqQmM+zct9UliKxsIkLNmz/ku7LElUNqmaiv1TG/aL5ACsw==",
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.60.0.tgz",
+      "integrity": "sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright-core": "1.54.2"
+        "playwright-core": "1.60.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -12583,9 +12583,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.54.2.tgz",
-      "integrity": "sha512-n5r4HFbMmWsB4twG7tJLDN9gmBUeSPcsBZiWSE4DnYz9mJMAFqr2ID7+eGC9kpEnxExJ1epttwR59LEWCk8mtA==",
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.60.0.tgz",
+      "integrity": "sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -18487,12 +18487,12 @@
       "optional": true
     },
     "@playwright/test": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.54.2.tgz",
-      "integrity": "sha512-A+znathYxPf+72riFd1r1ovOLqsIIB0jKIoPjyK2kqEIe30/6jF6BC7QNluHuwUmsD2tv1XZVugN8GqfTMOxsA==",
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.60.0.tgz",
+      "integrity": "sha512-O71yZIbAh/PxDMNGns37GHBIfrVkEVyn+AXyIa5dOTfb4/xNvRWV+Vv/NMbNCtODB/pO7vLlF2OTmMVLhmr7Ag==",
       "dev": true,
       "requires": {
-        "playwright": "1.54.2"
+        "playwright": "1.60.0"
       }
     },
     "@rollup/rollup-darwin-arm64": {
@@ -24825,19 +24825,19 @@
       }
     },
     "playwright": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.54.2.tgz",
-      "integrity": "sha512-Hu/BMoA1NAdRUuulyvQC0pEqZ4vQbGfn8f7wPXcnqQmM+zct9UliKxsIkLNmz/ku7LElUNqmaiv1TG/aL5ACsw==",
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.60.0.tgz",
+      "integrity": "sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==",
       "dev": true,
       "requires": {
         "fsevents": "2.3.2",
-        "playwright-core": "1.54.2"
+        "playwright-core": "1.60.0"
       }
     },
     "playwright-core": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.54.2.tgz",
-      "integrity": "sha512-n5r4HFbMmWsB4twG7tJLDN9gmBUeSPcsBZiWSE4DnYz9mJMAFqr2ID7+eGC9kpEnxExJ1epttwR59LEWCk8mtA==",
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.60.0.tgz",
+      "integrity": "sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==",
       "dev": true
     },
     "portscanner": {
diff --git a/packages/angular/test/apps/ng16/package.json b/packages/angular/test/apps/ng16/package.json
index 0db2ad89e49..8c291cee0c4 100644
--- a/packages/angular/test/apps/ng16/package.json
+++ b/packages/angular/test/apps/ng16/package.json
@@ -47,7 +47,7 @@
     "@angular/compiler-cli": "^16.0.0",
     "@angular/language-service": "^16.0.0",
     "@nguniversal/builders": "^16.0.0",
-    "@playwright/test": "^1.54.2",
+    "@playwright/test": "^1.60.0",
     "@types/express": "^4.17.7",
     "@types/node": "^12.12.54",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
diff --git a/packages/angular/test/apps/ng17/package-lock.json b/packages/angular/test/apps/ng17/package-lock.json
index 0df860d50aa..30dec003cfc 100644
--- a/packages/angular/test/apps/ng17/package-lock.json
+++ b/packages/angular/test/apps/ng17/package-lock.json
@@ -38,7 +38,7 @@
         "@angular/cli": "^17.0.0",
         "@angular/compiler-cli": "^17.0.2",
         "@angular/language-service": "^17.0.2",
-        "@playwright/test": "^1.54.2",
+        "@playwright/test": "^1.60.0",
         "@types/express": "^4.17.7",
         "@types/node": "^18.19.0",
         "@types/ws": "8.5.3",
@@ -585,7 +585,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.5.0.tgz",
       "integrity": "sha512-ulr8rNLA6rkyFAlVWw2q5YJ91v098AFQ2R0PRFwPzREXOUJQPtFUG0t+/ZikhaOCDqFoDhN6/v8Sq0o4araFAw==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.18.10",
         "postcss": "^8.4.27",
@@ -839,7 +838,6 @@
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-17.0.2.tgz",
       "integrity": "sha512-32RHWhTgFLMonI3kRdstACay/nvetfxXjdwcTtABjcvBoND7nD9GMhkISQdgS+hcR/IhgXxaPidq8f2UAY5DBw==",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -855,7 +853,6 @@
       "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-17.0.0.tgz",
       "integrity": "sha512-VzKYmN+1wSE2wLBEFu/NHSrRQbeaKkEDO9aZxd7nAnxC5T1Zcva7dfqZIXMHXH2HESYAZCvOS8ikBE/7DCtWWw==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@angular-devkit/architect": "0.1700.0",
         "@angular-devkit/core": "17.0.0",
@@ -889,7 +886,6 @@
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/@angular/common/-/common-17.0.2.tgz",
       "integrity": "sha512-hCW0njHgrcwTWNoKZDwf02DnhYLVWNXM2FMw66MKpfxTp7McSyaXjGBU9/hchW3dZJ0xTwyxoyoqJFoHYvg0yg==",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -905,7 +901,6 @@
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-17.0.2.tgz",
       "integrity": "sha512-ewUFbKhMEhAmw2dGfk0ImhTlyrO2y4pJSKIZdFrkR1d0HiJX8bCHUdTiiR/2jeP7w2eamjXj15Rptb+iZZes2Q==",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -926,7 +921,6 @@
       "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-17.0.2.tgz",
       "integrity": "sha512-IUYL3Yz5RbR0Z0/x7it4GK3sMb2qVihxu0tlgfUW53P1Vi6nU/Zda0bCJTu6Z64qEtS8zwCwF1Ekomuq6UaiKg==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@babel/core": "7.23.2",
         "@jridgewell/sourcemap-codec": "^1.4.14",
@@ -954,7 +948,6 @@
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/@angular/core/-/core-17.0.2.tgz",
       "integrity": "sha512-MjDxWeyn3Txi0qo/V/I+B/gndh0uptQ0XWgBRwOx6Wcr5zRGeZIFlXBxPpyXnGTlJkeyErsTN7FfFCZ4C3kCPA==",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -970,7 +963,6 @@
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-17.0.2.tgz",
       "integrity": "sha512-w1QKifaVG4daxUktcBNZqBtOH1vn8t0YiwDR3woEdUYt0XYKMipfDzQfyIK+6fIVPOJUd42pRns1nbWJQHOInA==",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -997,7 +989,6 @@
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-17.0.2.tgz",
       "integrity": "sha512-eTnPILEA/eAMkVUR/+g6fWhhMTmnmOzcZSGX/bBgQcvOhayZrDDxA6/Qf+jIB4RwC0wd3KA9zT5BCMmNojoUsg==",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -1036,7 +1027,6 @@
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/@angular/platform-server/-/platform-server-17.0.2.tgz",
       "integrity": "sha512-+1uCnAw7Ql2r4BDnfaRvQrXI1H5qUB/1f8CwCjaVoIn7kLJs/ps4I0WbOVtujJ2VPnxIggfVtenXRRMlungZlg==",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0",
         "xhr2": "^0.2.0"
@@ -1056,7 +1046,6 @@
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/@angular/router/-/router-17.0.2.tgz",
       "integrity": "sha512-A1Ulv4qBAtJyK5g1yBlK1qZHe+KaaL5vMPAaPWUxICH8lHEodDkJlbYAUI2e4VL2BN7zBmdOep6tlBKPmHY3mw==",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -1116,7 +1105,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.23.2.tgz",
       "integrity": "sha512-n7s51eWdaWZ3vGT2tD4T7J6eJs3QoBXydv7vkUM06Bf1cbVD2Kc2UrkzhiQwobfV7NwOnQXYL7UBJ5VPU+RGoQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.22.13",
@@ -4078,13 +4066,13 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.54.2.tgz",
-      "integrity": "sha512-A+znathYxPf+72riFd1r1ovOLqsIIB0jKIoPjyK2kqEIe30/6jF6BC7QNluHuwUmsD2tv1XZVugN8GqfTMOxsA==",
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.60.0.tgz",
+      "integrity": "sha512-O71yZIbAh/PxDMNGns37GHBIfrVkEVyn+AXyIa5dOTfb4/xNvRWV+Vv/NMbNCtODB/pO7vLlF2OTmMVLhmr7Ag==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright": "1.54.2"
+        "playwright": "1.60.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -4623,7 +4611,6 @@
       "version": "6.10.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-6.10.0.tgz",
       "integrity": "sha512-+sZwIj+s+io9ozSxIWbNB5873OSdfeBEH/FR0re14WLI6BaKuSOnnwCJ2foUiu8uXf4dRp1UqHP0vrZ1zXGrog==",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "6.10.0",
         "@typescript-eslint/types": "6.10.0",
@@ -5031,7 +5018,6 @@
       "version": "7.4.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
       "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -5103,7 +5089,6 @@
       "version": "8.12.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
       "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -5831,7 +5816,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001541",
         "electron-to-chromium": "^1.4.535",
@@ -7615,7 +7599,6 @@
       "version": "7.32.0",
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.32.0.tgz",
       "integrity": "sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "7.12.11",
         "@eslint/eslintrc": "^0.4.3",
@@ -9849,7 +9832,6 @@
       "resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz",
       "integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "copy-anything": "^2.0.1",
         "parse-node-version": "^1.0.1",
@@ -11147,7 +11129,6 @@
       "integrity": "sha512-VShJISKCYt3iVJoMUPZiv67+0tiItxWMnfVmTmPZPio2Fu+wGc9U4ijjPxcmp2RJmLRaxkB9cn5rlrAvkIrNMA==",
       "dev": true,
       "hasInstallScript": true,
-      "peer": true,
       "dependencies": {
         "@nrwl/tao": "17.0.3",
         "@yarnpkg/lockfile": "^1.1.0",
@@ -12037,13 +12018,13 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.54.2.tgz",
-      "integrity": "sha512-Hu/BMoA1NAdRUuulyvQC0pEqZ4vQbGfn8f7wPXcnqQmM+zct9UliKxsIkLNmz/ku7LElUNqmaiv1TG/aL5ACsw==",
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.60.0.tgz",
+      "integrity": "sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright-core": "1.54.2"
+        "playwright-core": "1.60.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -12056,9 +12037,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.54.2.tgz",
-      "integrity": "sha512-n5r4HFbMmWsB4twG7tJLDN9gmBUeSPcsBZiWSE4DnYz9mJMAFqr2ID7+eGC9kpEnxExJ1epttwR59LEWCk8mtA==",
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.60.0.tgz",
+      "integrity": "sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -12124,7 +12105,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
@@ -12870,7 +12850,6 @@
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
       "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.1.0"
       }
@@ -12904,7 +12883,6 @@
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
       "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",
         "immutable": "^4.0.0",
@@ -13929,7 +13907,6 @@
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.24.0.tgz",
       "integrity": "sha512-ZpGR4Hy3+wBEzVEnHvstMvqpD/nABNelQn/z2r0fjVWGQsN3bpOLzQlqDxmb4CDZnXq5lpjnQ+mHQLAOpfM5iw==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
         "acorn": "^8.8.2",
@@ -13982,7 +13959,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -14293,7 +14269,6 @@
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
       "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -14603,7 +14578,6 @@
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.89.0.tgz",
       "integrity": "sha512-qyfIC10pOr70V+jkmud8tMfajraGCZMBWJtrmuBymQKCrLTRejBI8STDp1MCyZu/QTdZSeacCQYpYNQVOzX5kw==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^1.0.0",
@@ -14651,7 +14625,6 @@
       "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz",
       "integrity": "sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@discoveryjs/json-ext": "^0.5.0",
         "@webpack-cli/configtest": "^1.2.0",
@@ -14736,7 +14709,6 @@
       "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.1.tgz",
       "integrity": "sha512-5hbAst3h3C3L8w6W4P96L5vaV0PxSmJhxZvWKYIdgxOQm8pNZ5dEOmmSLBVpP85ReeyRt6AS1QJNyo/oFFPeVA==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@types/bonjour": "^3.5.9",
         "@types/connect-history-api-fallback": "^1.3.5",
@@ -14911,7 +14883,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz",
       "integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==",
       "dev": true,
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -14933,7 +14904,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -15273,7 +15243,6 @@
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.14.2.tgz",
       "integrity": "sha512-X4U7J1isDhoOmHmFWiLhloWc2lzMkdnumtfQ1LXzf/IOZp5NQYuMUTaviVzG/q1ugMBIXzin2AqeVJUoSEkNyQ==",
-      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       }
diff --git a/packages/angular/test/apps/ng17/package.json b/packages/angular/test/apps/ng17/package.json
index bea003e821e..89a3a8146a8 100644
--- a/packages/angular/test/apps/ng17/package.json
+++ b/packages/angular/test/apps/ng17/package.json
@@ -46,7 +46,7 @@
     "@angular/cli": "^17.0.0",
     "@angular/compiler-cli": "^17.0.2",
     "@angular/language-service": "^17.0.2",
-    "@playwright/test": "^1.54.2",
+    "@playwright/test": "^1.60.0",
     "@types/express": "^4.17.7",
     "@types/node": "^18.19.0",
     "@types/ws": "8.5.3",
diff --git a/packages/angular/test/apps/ng18/package-lock.json b/packages/angular/test/apps/ng18/package-lock.json
index 9df2127063f..68b0981579b 100644
--- a/packages/angular/test/apps/ng18/package-lock.json
+++ b/packages/angular/test/apps/ng18/package-lock.json
@@ -38,7 +38,7 @@
         "@angular/cli": "^18.0.0",
         "@angular/compiler-cli": "^18.0.0",
         "@angular/language-service": "^18.0.0",
-        "@playwright/test": "^1.54.2",
+        "@playwright/test": "^1.60.0",
         "@types/express": "^4.17.7",
         "@types/ws": "8.5.3",
         "@typescript-eslint/eslint-plugin": "^6.0.0",
@@ -4273,13 +4273,13 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.54.2.tgz",
-      "integrity": "sha512-A+znathYxPf+72riFd1r1ovOLqsIIB0jKIoPjyK2kqEIe30/6jF6BC7QNluHuwUmsD2tv1XZVugN8GqfTMOxsA==",
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.60.0.tgz",
+      "integrity": "sha512-O71yZIbAh/PxDMNGns37GHBIfrVkEVyn+AXyIa5dOTfb4/xNvRWV+Vv/NMbNCtODB/pO7vLlF2OTmMVLhmr7Ag==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright": "1.54.2"
+        "playwright": "1.60.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -11916,13 +11916,13 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.54.2.tgz",
-      "integrity": "sha512-Hu/BMoA1NAdRUuulyvQC0pEqZ4vQbGfn8f7wPXcnqQmM+zct9UliKxsIkLNmz/ku7LElUNqmaiv1TG/aL5ACsw==",
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.60.0.tgz",
+      "integrity": "sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright-core": "1.54.2"
+        "playwright-core": "1.60.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -11935,9 +11935,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.54.2.tgz",
-      "integrity": "sha512-n5r4HFbMmWsB4twG7tJLDN9gmBUeSPcsBZiWSE4DnYz9mJMAFqr2ID7+eGC9kpEnxExJ1epttwR59LEWCk8mtA==",
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.60.0.tgz",
+      "integrity": "sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
diff --git a/packages/angular/test/apps/ng18/package.json b/packages/angular/test/apps/ng18/package.json
index 26807574812..fb2c74395f2 100644
--- a/packages/angular/test/apps/ng18/package.json
+++ b/packages/angular/test/apps/ng18/package.json
@@ -46,7 +46,7 @@
     "@angular/cli": "^18.0.0",
     "@angular/compiler-cli": "^18.0.0",
     "@angular/language-service": "^18.0.0",
-    "@playwright/test": "^1.54.2",
+    "@playwright/test": "^1.60.0",
     "@types/express": "^4.17.7",
     "@types/ws": "8.5.3",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
diff --git a/packages/angular/test/apps/ng19/package-lock.json b/packages/angular/test/apps/ng19/package-lock.json
index 0a7124b4b46..4bb20316d04 100644
--- a/packages/angular/test/apps/ng19/package-lock.json
+++ b/packages/angular/test/apps/ng19/package-lock.json
@@ -39,7 +39,7 @@
         "@angular/cli": "^19.0.1",
         "@angular/compiler-cli": "^19.0.0",
         "@angular/language-service": "^19.0.0",
-        "@playwright/test": "^1.54.2",
+        "@playwright/test": "^1.60.0",
         "@types/express": "^4.17.21",
         "@types/node": "^22.9.3",
         "@types/ws": "8.5.3",
@@ -116,40 +116,6 @@
         }
       }
     },
-    "node_modules/@angular-devkit/architect/node_modules/chokidar": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
-      "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "readdirp": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@angular-devkit/architect/node_modules/readdirp": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
-      "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
     "node_modules/@angular-devkit/build-angular": {
       "version": "19.0.2",
       "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-19.0.2.tgz",
@@ -465,24 +431,6 @@
         "@xtuc/long": "4.2.2"
       }
     },
-    "node_modules/@angular-devkit/build-angular/node_modules/chokidar": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
-      "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "readdirp": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
     "node_modules/@angular-devkit/build-angular/node_modules/enhanced-resolve": {
       "version": "5.17.1",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.17.1.tgz",
@@ -555,22 +503,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@angular-devkit/build-angular/node_modules/readdirp": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
-      "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
     "node_modules/@angular-devkit/build-angular/node_modules/schema-utils": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz",
@@ -759,40 +691,6 @@
         }
       }
     },
-    "node_modules/@angular-devkit/schematics/node_modules/chokidar": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
-      "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "readdirp": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@angular-devkit/schematics/node_modules/readdirp": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
-      "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
     "node_modules/@angular-eslint/builder": {
       "version": "19.0.0",
       "resolved": "https://registry.npmjs.org/@angular-eslint/builder/-/builder-19.0.0.tgz",
@@ -836,40 +734,6 @@
         }
       }
     },
-    "node_modules/@angular-eslint/builder/node_modules/chokidar": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
-      "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "readdirp": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@angular-eslint/builder/node_modules/readdirp": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
-      "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
     "node_modules/@angular-eslint/bundled-angular-compiler": {
       "version": "19.0.0",
       "resolved": "https://registry.npmjs.org/@angular-eslint/bundled-angular-compiler/-/bundled-angular-compiler-19.0.0.tgz",
@@ -956,40 +820,6 @@
         }
       }
     },
-    "node_modules/@angular-eslint/schematics/node_modules/chokidar": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
-      "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "readdirp": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@angular-eslint/schematics/node_modules/readdirp": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
-      "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
     "node_modules/@angular-eslint/template-parser": {
       "version": "19.0.0",
       "resolved": "https://registry.npmjs.org/@angular-eslint/template-parser/-/template-parser-19.0.0.tgz",
@@ -1174,40 +1004,6 @@
         }
       }
     },
-    "node_modules/@angular/cli/node_modules/chokidar": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
-      "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "readdirp": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@angular/cli/node_modules/readdirp": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
-      "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
     "node_modules/@angular/common": {
       "version": "19.0.0",
       "resolved": "https://registry.npmjs.org/@angular/common/-/common-19.0.0.tgz",
@@ -5533,13 +5329,13 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.54.2.tgz",
-      "integrity": "sha512-A+znathYxPf+72riFd1r1ovOLqsIIB0jKIoPjyK2kqEIe30/6jF6BC7QNluHuwUmsD2tv1XZVugN8GqfTMOxsA==",
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.60.0.tgz",
+      "integrity": "sha512-O71yZIbAh/PxDMNGns37GHBIfrVkEVyn+AXyIa5dOTfb4/xNvRWV+Vv/NMbNCtODB/pO7vLlF2OTmMVLhmr7Ag==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright": "1.54.2"
+        "playwright": "1.60.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -5845,40 +5641,6 @@
         }
       }
     },
-    "node_modules/@schematics/angular/node_modules/chokidar": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
-      "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "readdirp": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
-    "node_modules/@schematics/angular/node_modules/readdirp": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
-      "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">= 14.16.0"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://paulmillr.com/funding/"
-      }
-    },
     "node_modules/@sideway/address": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz",
@@ -13542,13 +13304,13 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.54.2.tgz",
-      "integrity": "sha512-Hu/BMoA1NAdRUuulyvQC0pEqZ4vQbGfn8f7wPXcnqQmM+zct9UliKxsIkLNmz/ku7LElUNqmaiv1TG/aL5ACsw==",
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.60.0.tgz",
+      "integrity": "sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright-core": "1.54.2"
+        "playwright-core": "1.60.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -13561,9 +13323,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.54.2.tgz",
-      "integrity": "sha512-n5r4HFbMmWsB4twG7tJLDN9gmBUeSPcsBZiWSE4DnYz9mJMAFqr2ID7+eGC9kpEnxExJ1epttwR59LEWCk8mtA==",
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.60.0.tgz",
+      "integrity": "sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
diff --git a/packages/angular/test/apps/ng19/package.json b/packages/angular/test/apps/ng19/package.json
index 3d8a669e3e1..3499ed68479 100644
--- a/packages/angular/test/apps/ng19/package.json
+++ b/packages/angular/test/apps/ng19/package.json
@@ -47,7 +47,7 @@
     "@angular/cli": "^19.0.1",
     "@angular/compiler-cli": "^19.0.0",
     "@angular/language-service": "^19.0.0",
-    "@playwright/test": "^1.54.2",
+    "@playwright/test": "^1.60.0",
     "@types/express": "^4.17.21",
     "@types/node": "^22.9.3",
     "@types/ws": "8.5.3",
diff --git a/packages/angular/test/apps/ng20/package-lock.json b/packages/angular/test/apps/ng20/package-lock.json
index 736a354c978..c41cb3be97e 100644
--- a/packages/angular/test/apps/ng20/package-lock.json
+++ b/packages/angular/test/apps/ng20/package-lock.json
@@ -39,7 +39,7 @@
         "@angular/cli": "^20.0.0",
         "@angular/compiler-cli": "^20.0.0",
         "@angular/language-service": "^20.0.0",
-        "@playwright/test": "^1.54.2",
+        "@playwright/test": "^1.60.0",
         "@types/express": "^4.17.21",
         "@types/node": "^22.9.3",
         "@types/ws": "8.5.3",
@@ -5087,13 +5087,13 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.54.2.tgz",
-      "integrity": "sha512-A+znathYxPf+72riFd1r1ovOLqsIIB0jKIoPjyK2kqEIe30/6jF6BC7QNluHuwUmsD2tv1XZVugN8GqfTMOxsA==",
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.60.0.tgz",
+      "integrity": "sha512-O71yZIbAh/PxDMNGns37GHBIfrVkEVyn+AXyIa5dOTfb4/xNvRWV+Vv/NMbNCtODB/pO7vLlF2OTmMVLhmr7Ag==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright": "1.54.2"
+        "playwright": "1.60.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -12438,13 +12438,13 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.54.2.tgz",
-      "integrity": "sha512-Hu/BMoA1NAdRUuulyvQC0pEqZ4vQbGfn8f7wPXcnqQmM+zct9UliKxsIkLNmz/ku7LElUNqmaiv1TG/aL5ACsw==",
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.60.0.tgz",
+      "integrity": "sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==",
       "dev": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "playwright-core": "1.54.2"
+        "playwright-core": "1.60.0"
       },
       "bin": {
         "playwright": "cli.js"
@@ -12457,9 +12457,9 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.54.2",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.54.2.tgz",
-      "integrity": "sha512-n5r4HFbMmWsB4twG7tJLDN9gmBUeSPcsBZiWSE4DnYz9mJMAFqr2ID7+eGC9kpEnxExJ1epttwR59LEWCk8mtA==",
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.60.0.tgz",
+      "integrity": "sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
diff --git a/packages/angular/test/apps/ng20/package.json b/packages/angular/test/apps/ng20/package.json
index a56c470642d..0971bb58a02 100644
--- a/packages/angular/test/apps/ng20/package.json
+++ b/packages/angular/test/apps/ng20/package.json
@@ -47,7 +47,7 @@
     "@angular/cli": "^20.0.0",
     "@angular/compiler-cli": "^20.0.0",
     "@angular/language-service": "^20.0.0",
-    "@playwright/test": "^1.54.2",
+    "@playwright/test": "^1.60.0",
     "@types/express": "^4.17.21",
     "@types/node": "^22.9.3",
     "@types/ws": "8.5.3",
diff --git a/packages/angular/test/base/e2e/src/standalone/nav-modal-root.spec.ts b/packages/angular/test/base/e2e/src/standalone/nav-modal-root.spec.ts
new file mode 100644
index 00000000000..36fa53d2ba3
--- /dev/null
+++ b/packages/angular/test/base/e2e/src/standalone/nav-modal-root.spec.ts
@@ -0,0 +1,15 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Nav: root binding inside a modal (standalone)', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/standalone/nav-modal-root');
+  });
+
+  test('should render the nav root when bound from componentProps', async ({ page }) => {
+    await page.locator('#open-nav-modal').click();
+
+    await expect(page.locator('ion-modal')).toBeVisible();
+    await expect(page.locator('ion-modal ion-nav')).toBeVisible();
+    await expect(page.locator('#nav-modal-root-content')).toBeVisible();
+  });
+});
diff --git a/packages/angular/test/base/e2e/src/standalone/router-link-modifier-click.spec.ts b/packages/angular/test/base/e2e/src/standalone/router-link-modifier-click.spec.ts
new file mode 100644
index 00000000000..a4926fd46b7
--- /dev/null
+++ b/packages/angular/test/base/e2e/src/standalone/router-link-modifier-click.spec.ts
@@ -0,0 +1,75 @@
+import { test, expect, type Page } from '@playwright/test';
+
+/**
+ * Issue #26394: a modifier click (ctrl/meta/shift/alt) or a non-`_self` target on
+ * a `routerLink` over a non-anchor Ionic component (ion-item, ion-button) must let
+ * the browser handle the navigation natively (new tab, window, download) instead
+ * of navigating the current page in-app.
+ *
+ * Playwright headless can't dispatch a real modifier-click or observe the
+ * browser's native new-tab default, so we dispatch a synthetic click on the
+ * host (not the shadow anchor, which would fire its own default navigation) and
+ * assert the JS handler chain leaves the page unchanged with `preventDefault`
+ * uncalled.
+ */
+test.describe('RouterLink: modifier click', () => {
+  const dispatchClick = (page: Page, selector: string, modifiers: Record<string, boolean>) =>
+    page.evaluate(
+      ({ selector, mods }: { selector: string; mods: Record<string, boolean> }) => {
+        const item = document.querySelector(selector) as HTMLElement;
+        const ev = new MouseEvent('click', { bubbles: true, composed: true, cancelable: true, button: 0, ...mods });
+        item.dispatchEvent(ev);
+        return { defaultPrevented: ev.defaultPrevented };
+      },
+      { selector, mods: modifiers }
+    );
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/standalone/router-link');
+  });
+
+  test('normal click navigates the current page in-app', async ({ page }) => {
+    const { defaultPrevented } = await dispatchClick(page, '#modifier-item', {});
+
+    await expect(page).toHaveURL(/.*\/standalone\/popover/);
+    // The delegate prevents the default to stop a hard page reload.
+    expect(defaultPrevented).toBe(true);
+  });
+
+  for (const modifier of ['ctrlKey', 'metaKey', 'shiftKey', 'altKey']) {
+    test(`${modifier}+click does not navigate the current page and allows native handling`, async ({
+      page,
+    }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/26394',
+      });
+
+      const { defaultPrevented } = await dispatchClick(page, '#modifier-item', { [modifier]: true });
+
+      // Give any in-app navigation a chance to run before asserting it did not.
+      await page.waitForTimeout(300);
+      await expect(page).toHaveURL(/.*\/standalone\/router-link/);
+      // Default is left intact so the browser can handle the link natively
+      // (new tab, new window, or download, depending on the browser and OS).
+      expect(defaultPrevented).toBe(false);
+    });
+  }
+
+  test('click on a non-_self target does not navigate the current page and allows a native new tab', async ({
+    page,
+  }, testInfo) => {
+    testInfo.annotations.push({
+      type: 'issue',
+      description: 'https://github.com/ionic-team/ionic-framework/issues/26394',
+    });
+
+    const { defaultPrevented } = await dispatchClick(page, '#target-item', {});
+
+    // Give any in-app navigation a chance to run before asserting it did not.
+    await page.waitForTimeout(300);
+    await expect(page).toHaveURL(/.*\/standalone\/router-link/);
+    // Default is left intact so the browser can open the link in a new tab.
+    expect(defaultPrevented).toBe(false);
+  });
+});
diff --git a/packages/angular/test/base/e2e/src/standalone/tabs-search-params.spec.ts b/packages/angular/test/base/e2e/src/standalone/tabs-search-params.spec.ts
new file mode 100644
index 00000000000..9e9cc5a48d2
--- /dev/null
+++ b/packages/angular/test/base/e2e/src/standalone/tabs-search-params.spec.ts
@@ -0,0 +1,88 @@
+import { test, expect } from '@playwright/test';
+
+/**
+ * Verifies that query params on an `<ion-tab-button>` href are preserved when
+ * the tab is activated (first visit, switching tabs, switching back, and
+ * re-clicking the already-active tab).
+ *
+ * @see https://github.com/ionic-team/ionic-framework/issues/25470
+ */
+test.describe('Tabs: query params on tab button href', () => {
+  test('should preserve query params on first visit to a tab', async ({ page }) => {
+    await page.goto('/standalone/tabs-search-params/tab1?foo=bar');
+
+    await expect(page.locator('app-tabs-search-params-tab1')).toBeVisible();
+    expect(new URL(page.url()).pathname).toBe('/standalone/tabs-search-params/tab1');
+    expect(new URL(page.url()).search).toBe('?foo=bar');
+    await expect(page.locator('[data-testid="tab1-foo"]')).toHaveText('bar');
+    await expect(page.locator('ion-tab-button[data-testid="tab1"]')).toHaveClass(/tab-selected/);
+  });
+
+  test('should preserve href query params when switching to a tab for the first time', async ({ page }) => {
+    await page.goto('/standalone/tabs-search-params/tab1?foo=bar');
+    await expect(page.locator('app-tabs-search-params-tab1')).toBeVisible();
+
+    await page.locator('ion-tab-button[data-testid="tab2"]').click();
+    await expect(page.locator('app-tabs-search-params-tab2')).toBeVisible();
+
+    expect(new URL(page.url()).pathname).toBe('/standalone/tabs-search-params/tab2');
+    expect(new URL(page.url()).search).toBe('?baz=qux');
+    await expect(page.locator('[data-testid="tab2-baz"]')).toHaveText('qux');
+    await expect(page.locator('ion-tab-button[data-testid="tab2"]')).toHaveClass(/tab-selected/);
+  });
+
+  test('should preserve query params when switching back to a previously visited tab', async ({ page }) => {
+    await page.goto('/standalone/tabs-search-params/tab1?foo=bar');
+    await expect(page.locator('app-tabs-search-params-tab1')).toBeVisible();
+
+    await page.locator('ion-tab-button[data-testid="tab2"]').click();
+    await expect(page.locator('app-tabs-search-params-tab2')).toBeVisible();
+
+    await page.locator('ion-tab-button[data-testid="tab1"]').click();
+    await expect(page.locator('app-tabs-search-params-tab1')).toBeVisible();
+
+    expect(new URL(page.url()).pathname).toBe('/standalone/tabs-search-params/tab1');
+    expect(new URL(page.url()).search).toBe('?foo=bar');
+    await expect(page.locator('[data-testid="tab1-foo"]')).toHaveText('bar');
+  });
+
+  test('should preserve query params when re-clicking the already-active tab', async ({ page }) => {
+    await page.goto('/standalone/tabs-search-params/tab1?foo=bar');
+    await expect(page.locator('app-tabs-search-params-tab1')).toBeVisible();
+
+    await page.locator('ion-tab-button[data-testid="tab1"]').click();
+
+    expect(new URL(page.url()).pathname).toBe('/standalone/tabs-search-params/tab1');
+    expect(new URL(page.url()).search).toBe('?foo=bar');
+    await expect(page.locator('[data-testid="tab1-foo"]')).toHaveText('bar');
+  });
+
+  test('should preserve multiple query params and fragment from tab button href', async ({ page }) => {
+    await page.goto('/standalone/tabs-search-params/tab1?foo=bar');
+    await expect(page.locator('app-tabs-search-params-tab1')).toBeVisible();
+
+    await page.locator('ion-tab-button[data-testid="tab3"]').click();
+    await expect(page.locator('app-tabs-search-params-tab3')).toBeVisible();
+
+    const url = new URL(page.url());
+    expect(url.pathname).toBe('/standalone/tabs-search-params/tab3');
+    expect(url.search).toBe('?x=1&y=2');
+    expect(url.hash).toBe('#section');
+    await expect(page.locator('[data-testid="tab3-x"]')).toHaveText('1');
+    await expect(page.locator('[data-testid="tab3-y"]')).toHaveText('2');
+    await expect(page.locator('[data-testid="tab3-fragment"]')).toHaveText('section');
+  });
+
+  test('should preserve URL-encoded query params from tab button href', async ({ page }) => {
+    await page.goto('/standalone/tabs-search-params/tab1?foo=bar');
+    await expect(page.locator('app-tabs-search-params-tab1')).toBeVisible();
+
+    await page.locator('ion-tab-button[data-testid="tab4"]').click();
+    await expect(page.locator('app-tabs-search-params-tab4')).toBeVisible();
+
+    const url = new URL(page.url());
+    expect(url.pathname).toBe('/standalone/tabs-search-params/tab4');
+    expect(url.searchParams.get('q')).toBe('hello world');
+    await expect(page.locator('[data-testid="tab4-q"]')).toHaveText('hello world');
+  });
+});
diff --git a/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts b/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts
index dd0ccbb4ac5..d09b36f40aa 100644
--- a/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts
+++ b/packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts
@@ -30,6 +30,7 @@ export const routes: Routes = [
       { path: 'back-button', loadComponent: () => import('../back-button/back-button.component').then(c => c.BackButtonComponent) },
       { path: 'router-link', loadComponent: () => import('../router-link/router-link.component').then(c => c.RouterLinkComponent) },
       { path: 'nav', loadComponent: () => import('../nav/nav.component').then(c => c.NavComponent) },
+      { path: 'nav-modal-root', loadComponent: () => import('../nav-modal-root/nav-modal-root.component').then(c => c.NavModalRootComponent) },
       { path: 'providers', loadComponent: () => import('../providers/providers.component').then(c => c.ProvidersComponent) },
       { path: 'overlay-controllers', loadComponent: () => import('../overlay-controllers/overlay-controllers.component').then(c => c.OverlayControllersComponent) },
       { path: 'button', loadComponent: () => import('../button/button.component').then(c => c.ButtonComponent) },
@@ -55,6 +56,17 @@ export const routes: Routes = [
         ]
       },
       { path: 'tabs-basic', loadComponent: () => import('../tabs-basic/tabs-basic.component').then(c => c.TabsBasicComponent) },
+      { path: 'tabs-search-params', redirectTo: '/standalone/tabs-search-params/tab1?foo=bar', pathMatch: 'full' },
+      {
+        path: 'tabs-search-params',
+        loadComponent: () => import('../tabs-search-params/tabs-search-params.component').then(c => c.TabsSearchParamsComponent),
+        children: [
+          { path: 'tab1', loadComponent: () => import('../tabs-search-params/tab1.component').then(c => c.TabsSearchParamsTab1Component) },
+          { path: 'tab2', loadComponent: () => import('../tabs-search-params/tab2.component').then(c => c.TabsSearchParamsTab2Component) },
+          { path: 'tab3', loadComponent: () => import('../tabs-search-params/tab3.component').then(c => c.TabsSearchParamsTab3Component) },
+          { path: 'tab4', loadComponent: () => import('../tabs-search-params/tab4.component').then(c => c.TabsSearchParamsTab4Component) }
+        ]
+      },
       {
         path: 'validation',
         children: [
diff --git a/packages/angular/test/base/src/app/standalone/home-page/home-page.component.html b/packages/angular/test/base/src/app/standalone/home-page/home-page.component.html
index 00c3bf97452..76d4bc564f7 100644
--- a/packages/angular/test/base/src/app/standalone/home-page/home-page.component.html
+++ b/packages/angular/test/base/src/app/standalone/home-page/home-page.component.html
@@ -54,6 +54,11 @@
         Nav Test
       </ion-label>
     </ion-item>
+    <ion-item routerLink="/standalone/nav-modal-root">
+      <ion-label>
+        Nav Modal Root Test
+      </ion-label>
+    </ion-item>
     <ion-item routerLink="/standalone/router-link">
       <ion-label>
         Router Link Test
@@ -79,6 +84,11 @@
         Tabs Basic Test
       </ion-label>
     </ion-item>
+    <ion-item routerLink="/standalone/tabs-search-params">
+      <ion-label>
+        Tabs Search Params Test
+      </ion-label>
+    </ion-item>
   </ion-list>
 
   <ion-list>
diff --git a/packages/angular/test/base/src/app/standalone/nav-modal-root/nav-modal-root-page.component.ts b/packages/angular/test/base/src/app/standalone/nav-modal-root/nav-modal-root-page.component.ts
new file mode 100644
index 00000000000..468580a9a06
--- /dev/null
+++ b/packages/angular/test/base/src/app/standalone/nav-modal-root/nav-modal-root-page.component.ts
@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-nav-modal-root-page',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Nav Modal Root Page</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <div id="nav-modal-root-content">Root page rendered inside nav</div>
+    </ion-content>
+  `,
+  standalone: true,
+  imports: [IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class NavModalRootPageComponent {}
diff --git a/packages/angular/test/base/src/app/standalone/nav-modal-root/nav-modal-root.component.ts b/packages/angular/test/base/src/app/standalone/nav-modal-root/nav-modal-root.component.ts
new file mode 100644
index 00000000000..fb2747e4384
--- /dev/null
+++ b/packages/angular/test/base/src/app/standalone/nav-modal-root/nav-modal-root.component.ts
@@ -0,0 +1,35 @@
+import { Component, inject } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonTitle, IonToolbar, ModalController } from '@ionic/angular/standalone';
+
+import { NavModalRootPageComponent } from './nav-modal-root-page.component';
+import { NavWrapperComponent } from './nav-wrapper.component';
+
+@Component({
+  selector: 'app-nav-modal-root',
+  template: `
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Nav Modal Root</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <ion-button id="open-nav-modal" (click)="openModal()">Open Modal</ion-button>
+    </ion-content>
+  `,
+  standalone: true,
+  imports: [IonButton, IonContent, IonHeader, IonTitle, IonToolbar],
+})
+export class NavModalRootComponent {
+  private modalController = inject(ModalController);
+
+  async openModal() {
+    const modal = await this.modalController.create({
+      component: NavWrapperComponent,
+      componentProps: {
+        rootPage: NavModalRootPageComponent,
+      },
+    });
+
+    await modal.present();
+  }
+}
diff --git a/packages/angular/test/base/src/app/standalone/nav-modal-root/nav-wrapper.component.ts b/packages/angular/test/base/src/app/standalone/nav-modal-root/nav-wrapper.component.ts
new file mode 100644
index 00000000000..5e0e6a7919f
--- /dev/null
+++ b/packages/angular/test/base/src/app/standalone/nav-modal-root/nav-wrapper.component.ts
@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core';
+import { IonNav } from '@ionic/angular/standalone';
+
+/**
+ * Presented as a modal via `ModalController` with the nav root passed through
+ * `componentProps`. Reproduces #31220, where the `[root]` binding used to land
+ * after `ion-nav` had already loaded, leaving the nav empty.
+ */
+@Component({
+  selector: 'app-nav-wrapper',
+  template: `<ion-nav [root]="rootPage"></ion-nav>`,
+  standalone: true,
+  imports: [IonNav],
+})
+export class NavWrapperComponent {
+  @Input() rootPage: any;
+}
diff --git a/packages/angular/test/base/src/app/standalone/router-link/router-link.component.html b/packages/angular/test/base/src/app/standalone/router-link/router-link.component.html
index 8887626d1cb..4de92de77c2 100644
--- a/packages/angular/test/base/src/app/standalone/router-link/router-link.component.html
+++ b/packages/angular/test/base/src/app/standalone/router-link/router-link.component.html
@@ -10,3 +10,9 @@
 <ion-button routerLink="/standalone/popover" routerDirection="root">
   I'm an ion-button
 </ion-button>
+<ion-item id="modifier-item" routerLink="/standalone/popover" routerDirection="root">
+  I'm an ion-item
+</ion-item>
+<ion-item id="target-item" routerLink="/standalone/popover" routerDirection="root" target="_blank">
+  I'm an ion-item with a target
+</ion-item>
diff --git a/packages/angular/test/base/src/app/standalone/router-link/router-link.component.ts b/packages/angular/test/base/src/app/standalone/router-link/router-link.component.ts
index 31653f3bb0d..73f470da7ca 100644
--- a/packages/angular/test/base/src/app/standalone/router-link/router-link.component.ts
+++ b/packages/angular/test/base/src/app/standalone/router-link/router-link.component.ts
@@ -1,11 +1,11 @@
 import { Component } from '@angular/core';
 import { RouterLink } from '@angular/router';
-import { IonRouterLink, IonRouterLinkWithHref } from '@ionic/angular/standalone';
+import { IonItem, IonRouterLink, IonRouterLinkWithHref } from '@ionic/angular/standalone';
 
 @Component({
   selector: 'app-router-link',
   templateUrl: './router-link.component.html',
   standalone: true,
-  imports: [RouterLink, IonRouterLink, IonRouterLinkWithHref],
+  imports: [RouterLink, IonItem, IonRouterLink, IonRouterLinkWithHref],
 })
 export class RouterLinkComponent {}
diff --git a/packages/angular/test/base/src/app/standalone/tabs-search-params/tab1.component.ts b/packages/angular/test/base/src/app/standalone/tabs-search-params/tab1.component.ts
new file mode 100644
index 00000000000..ec472e4e74f
--- /dev/null
+++ b/packages/angular/test/base/src/app/standalone/tabs-search-params/tab1.component.ts
@@ -0,0 +1,24 @@
+import { AsyncPipe } from '@angular/common';
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-tabs-search-params-tab1',
+  template: `
+    <p>Tab 1</p>
+    <p data-testid="tab1-query">{{ queryString$ | async }}</p>
+    <p data-testid="tab1-foo">{{ foo$ | async }}</p>
+  `,
+  standalone: true,
+  imports: [AsyncPipe],
+})
+export class TabsSearchParamsTab1Component {
+  queryString$ = this.route.queryParamMap.pipe(
+    map((m) => m.keys.map((k) => `${k}=${m.get(k)}`).join('&'))
+  );
+
+  foo$ = this.route.queryParamMap.pipe(map((m) => m.get('foo') ?? ''));
+
+  constructor(private route: ActivatedRoute) {}
+}
diff --git a/packages/angular/test/base/src/app/standalone/tabs-search-params/tab2.component.ts b/packages/angular/test/base/src/app/standalone/tabs-search-params/tab2.component.ts
new file mode 100644
index 00000000000..09bf2453da6
--- /dev/null
+++ b/packages/angular/test/base/src/app/standalone/tabs-search-params/tab2.component.ts
@@ -0,0 +1,24 @@
+import { AsyncPipe } from '@angular/common';
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-tabs-search-params-tab2',
+  template: `
+    <p>Tab 2</p>
+    <p data-testid="tab2-query">{{ queryString$ | async }}</p>
+    <p data-testid="tab2-baz">{{ baz$ | async }}</p>
+  `,
+  standalone: true,
+  imports: [AsyncPipe],
+})
+export class TabsSearchParamsTab2Component {
+  queryString$ = this.route.queryParamMap.pipe(
+    map((m) => m.keys.map((k) => `${k}=${m.get(k)}`).join('&'))
+  );
+
+  baz$ = this.route.queryParamMap.pipe(map((m) => m.get('baz') ?? ''));
+
+  constructor(private route: ActivatedRoute) {}
+}
diff --git a/packages/angular/test/base/src/app/standalone/tabs-search-params/tab3.component.ts b/packages/angular/test/base/src/app/standalone/tabs-search-params/tab3.component.ts
new file mode 100644
index 00000000000..c67995316d3
--- /dev/null
+++ b/packages/angular/test/base/src/app/standalone/tabs-search-params/tab3.component.ts
@@ -0,0 +1,23 @@
+import { AsyncPipe } from '@angular/common';
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-tabs-search-params-tab3',
+  template: `
+    <p>Tab 3</p>
+    <p data-testid="tab3-x">{{ x$ | async }}</p>
+    <p data-testid="tab3-y">{{ y$ | async }}</p>
+    <p data-testid="tab3-fragment">{{ fragment$ | async }}</p>
+  `,
+  standalone: true,
+  imports: [AsyncPipe],
+})
+export class TabsSearchParamsTab3Component {
+  x$ = this.route.queryParamMap.pipe(map((m) => m.get('x') ?? ''));
+  y$ = this.route.queryParamMap.pipe(map((m) => m.get('y') ?? ''));
+  fragment$ = this.route.fragment.pipe(map((f) => f ?? ''));
+
+  constructor(private route: ActivatedRoute) {}
+}
diff --git a/packages/angular/test/base/src/app/standalone/tabs-search-params/tab4.component.ts b/packages/angular/test/base/src/app/standalone/tabs-search-params/tab4.component.ts
new file mode 100644
index 00000000000..19897f882a7
--- /dev/null
+++ b/packages/angular/test/base/src/app/standalone/tabs-search-params/tab4.component.ts
@@ -0,0 +1,19 @@
+import { AsyncPipe } from '@angular/common';
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-tabs-search-params-tab4',
+  template: `
+    <p>Tab 4</p>
+    <p data-testid="tab4-q">{{ q$ | async }}</p>
+  `,
+  standalone: true,
+  imports: [AsyncPipe],
+})
+export class TabsSearchParamsTab4Component {
+  q$ = this.route.queryParamMap.pipe(map((m) => m.get('q') ?? ''));
+
+  constructor(private route: ActivatedRoute) {}
+}
diff --git a/packages/angular/test/base/src/app/standalone/tabs-search-params/tabs-search-params.component.ts b/packages/angular/test/base/src/app/standalone/tabs-search-params/tabs-search-params.component.ts
new file mode 100644
index 00000000000..d81f042b7c7
--- /dev/null
+++ b/packages/angular/test/base/src/app/standalone/tabs-search-params/tabs-search-params.component.ts
@@ -0,0 +1,51 @@
+import { Component } from '@angular/core';
+import { IonIcon, IonLabel, IonTabBar, IonTabButton, IonTabs } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { square, triangle } from 'ionicons/icons';
+
+addIcons({ square, triangle });
+
+@Component({
+  selector: 'app-tabs-search-params',
+  template: `
+    <ion-tabs>
+      <ion-tab-bar slot="bottom">
+        <ion-tab-button
+          tab="tab1"
+          href="/standalone/tabs-search-params/tab1?foo=bar"
+          data-testid="tab1"
+        >
+          <ion-icon name="triangle"></ion-icon>
+          <ion-label>Tab 1</ion-label>
+        </ion-tab-button>
+        <ion-tab-button
+          tab="tab2"
+          href="/standalone/tabs-search-params/tab2?baz=qux"
+          data-testid="tab2"
+        >
+          <ion-icon name="square"></ion-icon>
+          <ion-label>Tab 2</ion-label>
+        </ion-tab-button>
+        <ion-tab-button
+          tab="tab3"
+          href="/standalone/tabs-search-params/tab3?x=1&y=2#section"
+          data-testid="tab3"
+        >
+          <ion-icon name="triangle"></ion-icon>
+          <ion-label>Tab 3</ion-label>
+        </ion-tab-button>
+        <ion-tab-button
+          tab="tab4"
+          href="/standalone/tabs-search-params/tab4?q=hello%20world"
+          data-testid="tab4"
+        >
+          <ion-icon name="square"></ion-icon>
+          <ion-label>Tab 4</ion-label>
+        </ion-tab-button>
+      </ion-tab-bar>
+    </ion-tabs>
+  `,
+  standalone: true,
+  imports: [IonIcon, IonLabel, IonTabBar, IonTabButton, IonTabs],
+})
+export class TabsSearchParamsComponent {}
diff --git a/packages/docs/CHANGELOG.md b/packages/docs/CHANGELOG.md
index 3b6b4827d54..36c4332ec5e 100644
--- a/packages/docs/CHANGELOG.md
+++ b/packages/docs/CHANGELOG.md
@@ -3,6 +3,94 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.18](https://github.com/ionic-team/ionic-framework/compare/v8.8.17...v8.8.18) (2026-08-12)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [8.8.17](https://github.com/ionic-team/ionic-framework/compare/v8.8.16...v8.8.17) (2026-08-05)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [8.8.16](https://github.com/ionic-team/ionic-framework/compare/v8.8.15...v8.8.16) (2026-07-29)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [8.8.15](https://github.com/ionic-team/ionic-framework/compare/v8.8.14...v8.8.15) (2026-07-22)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [8.8.14](https://github.com/ionic-team/ionic-framework/compare/v8.8.13...v8.8.14) (2026-07-15)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [8.8.13](https://github.com/ionic-team/ionic-framework/compare/v8.8.12...v8.8.13) (2026-07-01)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [8.8.12](https://github.com/ionic-team/ionic-framework/compare/v8.8.11...v8.8.12) (2026-06-24)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [8.8.11](https://github.com/ionic-team/ionic-framework/compare/v8.8.10...v8.8.11) (2026-06-17)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [8.8.10](https://github.com/ionic-team/ionic-framework/compare/v8.8.9...v8.8.10) (2026-06-10)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [8.8.9](https://github.com/ionic-team/ionic-framework/compare/v8.8.8...v8.8.9) (2026-06-03)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [8.8.8](https://github.com/ionic-team/ionic-framework/compare/v8.8.7...v8.8.8) (2026-05-20)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
 ## [8.8.7](https://github.com/ionic-team/ionic-framework/compare/v8.8.6...v8.8.7) (2026-05-13)
 
 **Note:** Version bump only for package @ionic/docs
diff --git a/packages/docs/package-lock.json b/packages/docs/package-lock.json
index b0c83521314..195bd3a51b8 100644
--- a/packages/docs/package-lock.json
+++ b/packages/docs/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/docs",
-  "version": "8.8.7",
+  "version": "8.8.18",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/docs",
-      "version": "8.8.7",
+      "version": "8.8.18",
       "license": "MIT"
     }
   }
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 8eeb0549de5..bfa8999c5af 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/docs",
-  "version": "8.8.7",
+  "version": "8.8.18",
   "description": "Pre-packaged API documentation for the Ionic docs.",
   "main": "core.json",
   "types": "core.d.ts",
diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md
index 78751895e0d..01f78e17712 100644
--- a/packages/react-router/CHANGELOG.md
+++ b/packages/react-router/CHANGELOG.md
@@ -3,6 +3,97 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.18](https://github.com/ionic-team/ionic-framework/compare/v8.8.17...v8.8.18) (2026-08-12)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+## [8.8.17](https://github.com/ionic-team/ionic-framework/compare/v8.8.16...v8.8.17) (2026-08-05)
+
+
+### Bug Fixes
+
+* **react-router:** symmetric pathname+search url comparison ([#31153](https://github.com/ionic-team/ionic-framework/issues/31153)) ([ffef25d](https://github.com/ionic-team/ionic-framework/commit/ffef25d2e2597bee5fdb8833d9e50ff9234d74e0)), closes [#31152](https://github.com/ionic-team/ionic-framework/issues/31152) [#31152](https://github.com/ionic-team/ionic-framework/issues/31152) [#25534](https://github.com/ionic-team/ionic-framework/issues/25534)
+
+
+
+
+
+## [8.8.16](https://github.com/ionic-team/ionic-framework/compare/v8.8.15...v8.8.16) (2026-07-29)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+## [8.8.15](https://github.com/ionic-team/ionic-framework/compare/v8.8.14...v8.8.15) (2026-07-22)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+## [8.8.14](https://github.com/ionic-team/ionic-framework/compare/v8.8.13...v8.8.14) (2026-07-15)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+## [8.8.13](https://github.com/ionic-team/ionic-framework/compare/v8.8.12...v8.8.13) (2026-07-01)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+## [8.8.12](https://github.com/ionic-team/ionic-framework/compare/v8.8.11...v8.8.12) (2026-06-24)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+## [8.8.11](https://github.com/ionic-team/ionic-framework/compare/v8.8.10...v8.8.11) (2026-06-17)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+## [8.8.10](https://github.com/ionic-team/ionic-framework/compare/v8.8.9...v8.8.10) (2026-06-10)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+## [8.8.9](https://github.com/ionic-team/ionic-framework/compare/v8.8.8...v8.8.9) (2026-06-03)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+## [8.8.8](https://github.com/ionic-team/ionic-framework/compare/v8.8.7...v8.8.8) (2026-05-20)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
 ## [8.8.7](https://github.com/ionic-team/ionic-framework/compare/v8.8.6...v8.8.7) (2026-05-13)
 
 **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 8b222dff987..71842eeb710 100644
--- a/packages/react-router/package-lock.json
+++ b/packages/react-router/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react-router",
-  "version": "8.8.7",
+  "version": "8.8.18",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react-router",
-      "version": "8.8.7",
+      "version": "8.8.18",
       "license": "MIT",
       "dependencies": {
-        "@ionic/react": "^8.8.7",
+        "@ionic/react": "^8.8.18",
         "tslib": "*"
       },
       "devDependencies": {
@@ -238,12 +238,12 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.8.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.7.tgz",
-      "integrity": "sha512-eHfu6yea7tcog4vUzfT//LavH/poh8zI3cgO/CDXvOehdCi9QONPeeXE+PaCBFkMnD5Q+08SFF/7a/IfD0X0mQ==",
+      "version": "8.8.18",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.18.tgz",
+      "integrity": "sha512-QRFqi6gMSTk89FMjtoDx3p6e2dD7mYxqYzS0+Hl+yjxnoWoNFluWKM9rnGEEkdvpY7bF1pt6CI5IwMt+vjYQWg==",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "4.43.0",
+        "@stencil/core": "4.43.5",
         "ionicons": "^8.0.13",
         "tslib": "^2.1.0"
       },
@@ -418,12 +418,12 @@
       }
     },
     "node_modules/@ionic/react": {
-      "version": "8.8.7",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.8.7.tgz",
-      "integrity": "sha512-CWB3I7lzdNbY+CB/skL+qlOf0YjcNiMK9m2lqusQdmlqIf4AlBAO0+mbmEF7DZhMGFHXfcX5WCC+tcwIUANReg==",
+      "version": "8.8.18",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.8.18.tgz",
+      "integrity": "sha512-Hp7PuvuzqREzyWTDFYykgDLDE4RqE932+YX/gr0O3N/EfrPBAeuDeVZqPh2NLGQvliDcU1mwItGxWy/H0PK+Qg==",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "8.8.7",
+        "@ionic/core": "8.8.18",
         "ionicons": "^8.0.13",
         "tslib": "*"
       },
@@ -672,9 +672,9 @@
       ]
     },
     "node_modules/@stencil/core": {
-      "version": "4.43.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz",
-      "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==",
+      "version": "4.43.5",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.5.tgz",
+      "integrity": "sha512-cgWD+GeuvJpTe1WQn40p02+BJ2j0j1YJ17GdkF2qKIQ23s2e3Zivq5yISXS3dcuV6oUJFN93jprdk+nk/sq99Q==",
       "license": "MIT",
       "bin": {
         "stencil": "bin/stencil"
@@ -684,20 +684,20 @@
         "npm": ">=7.10.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-darwin-arm64": "4.34.9",
-        "@rollup/rollup-darwin-x64": "4.34.9",
-        "@rollup/rollup-linux-arm64-gnu": "4.34.9",
-        "@rollup/rollup-linux-arm64-musl": "4.34.9",
-        "@rollup/rollup-linux-x64-gnu": "4.34.9",
-        "@rollup/rollup-linux-x64-musl": "4.34.9",
-        "@rollup/rollup-win32-arm64-msvc": "4.34.9",
-        "@rollup/rollup-win32-x64-msvc": "4.34.9"
+        "@rollup/rollup-darwin-arm64": "4.44.0",
+        "@rollup/rollup-darwin-x64": "4.44.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.44.0",
+        "@rollup/rollup-linux-arm64-musl": "4.44.0",
+        "@rollup/rollup-linux-x64-gnu": "4.44.0",
+        "@rollup/rollup-linux-x64-musl": "4.44.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.44.0",
+        "@rollup/rollup-win32-x64-msvc": "4.44.0"
       }
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.9.tgz",
-      "integrity": "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.44.0.tgz",
+      "integrity": "sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA==",
       "cpu": [
         "arm64"
       ],
@@ -708,9 +708,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz",
-      "integrity": "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.44.0.tgz",
+      "integrity": "sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ==",
       "cpu": [
         "x64"
       ],
@@ -721,9 +721,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz",
-      "integrity": "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.44.0.tgz",
+      "integrity": "sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ==",
       "cpu": [
         "arm64"
       ],
@@ -734,9 +734,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz",
-      "integrity": "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.44.0.tgz",
+      "integrity": "sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q==",
       "cpu": [
         "arm64"
       ],
@@ -747,9 +747,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz",
-      "integrity": "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.44.0.tgz",
+      "integrity": "sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw==",
       "cpu": [
         "x64"
       ],
@@ -760,9 +760,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz",
-      "integrity": "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.44.0.tgz",
+      "integrity": "sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA==",
       "cpu": [
         "x64"
       ],
@@ -773,9 +773,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz",
-      "integrity": "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.44.0.tgz",
+      "integrity": "sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w==",
       "cpu": [
         "arm64"
       ],
@@ -786,9 +786,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz",
-      "integrity": "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.44.0.tgz",
+      "integrity": "sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ==",
       "cpu": [
         "x64"
       ],
@@ -2545,12 +2545,12 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "8.0.13",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.0.13.tgz",
-      "integrity": "sha512-2QQVyG2P4wszne79jemMjWYLp0DBbDhr4/yFroPCxvPP1wtMxgdIV3l5n+XZ5E9mgoXU79w7yTWpm2XzJsISxQ==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.1.0.tgz",
+      "integrity": "sha512-XSM2gYWTXxSYTwjmKWAoy4yR7AbAFDjpc5ZIivAiGXskM0fe5CdMPfs6InQRUcrYtVb2WZ/0HQ1/jeh3JW78SA==",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^4.35.3"
+        "@stencil/core": "^4.43.5"
       }
     },
     "node_modules/is-array-buffer": {
@@ -4178,11 +4178,11 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.8.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.7.tgz",
-      "integrity": "sha512-eHfu6yea7tcog4vUzfT//LavH/poh8zI3cgO/CDXvOehdCi9QONPeeXE+PaCBFkMnD5Q+08SFF/7a/IfD0X0mQ==",
+      "version": "8.8.18",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.18.tgz",
+      "integrity": "sha512-QRFqi6gMSTk89FMjtoDx3p6e2dD7mYxqYzS0+Hl+yjxnoWoNFluWKM9rnGEEkdvpY7bF1pt6CI5IwMt+vjYQWg==",
       "requires": {
-        "@stencil/core": "4.43.0",
+        "@stencil/core": "4.43.5",
         "ionicons": "^8.0.13",
         "tslib": "^2.1.0"
       }
@@ -4284,11 +4284,11 @@
       "requires": {}
     },
     "@ionic/react": {
-      "version": "8.8.7",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.8.7.tgz",
-      "integrity": "sha512-CWB3I7lzdNbY+CB/skL+qlOf0YjcNiMK9m2lqusQdmlqIf4AlBAO0+mbmEF7DZhMGFHXfcX5WCC+tcwIUANReg==",
+      "version": "8.8.18",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.8.18.tgz",
+      "integrity": "sha512-Hp7PuvuzqREzyWTDFYykgDLDE4RqE932+YX/gr0O3N/EfrPBAeuDeVZqPh2NLGQvliDcU1mwItGxWy/H0PK+Qg==",
       "requires": {
-        "@ionic/core": "8.8.7",
+        "@ionic/core": "8.8.18",
         "ionicons": "^8.0.13",
         "tslib": "*"
       }
@@ -4425,66 +4425,66 @@
       "optional": true
     },
     "@stencil/core": {
-      "version": "4.43.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz",
-      "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==",
+      "version": "4.43.5",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.5.tgz",
+      "integrity": "sha512-cgWD+GeuvJpTe1WQn40p02+BJ2j0j1YJ17GdkF2qKIQ23s2e3Zivq5yISXS3dcuV6oUJFN93jprdk+nk/sq99Q==",
       "requires": {
-        "@rollup/rollup-darwin-arm64": "4.34.9",
-        "@rollup/rollup-darwin-x64": "4.34.9",
-        "@rollup/rollup-linux-arm64-gnu": "4.34.9",
-        "@rollup/rollup-linux-arm64-musl": "4.34.9",
-        "@rollup/rollup-linux-x64-gnu": "4.34.9",
-        "@rollup/rollup-linux-x64-musl": "4.34.9",
-        "@rollup/rollup-win32-arm64-msvc": "4.34.9",
-        "@rollup/rollup-win32-x64-msvc": "4.34.9"
+        "@rollup/rollup-darwin-arm64": "4.44.0",
+        "@rollup/rollup-darwin-x64": "4.44.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.44.0",
+        "@rollup/rollup-linux-arm64-musl": "4.44.0",
+        "@rollup/rollup-linux-x64-gnu": "4.44.0",
+        "@rollup/rollup-linux-x64-musl": "4.44.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.44.0",
+        "@rollup/rollup-win32-x64-msvc": "4.44.0"
       },
       "dependencies": {
         "@rollup/rollup-darwin-arm64": {
-          "version": "4.34.9",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.9.tgz",
-          "integrity": "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==",
+          "version": "4.44.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.44.0.tgz",
+          "integrity": "sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA==",
           "optional": true
         },
         "@rollup/rollup-darwin-x64": {
-          "version": "4.34.9",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz",
-          "integrity": "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==",
+          "version": "4.44.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.44.0.tgz",
+          "integrity": "sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ==",
           "optional": true
         },
         "@rollup/rollup-linux-arm64-gnu": {
-          "version": "4.34.9",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz",
-          "integrity": "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==",
+          "version": "4.44.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.44.0.tgz",
+          "integrity": "sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ==",
           "optional": true
         },
         "@rollup/rollup-linux-arm64-musl": {
-          "version": "4.34.9",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz",
-          "integrity": "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==",
+          "version": "4.44.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.44.0.tgz",
+          "integrity": "sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q==",
           "optional": true
         },
         "@rollup/rollup-linux-x64-gnu": {
-          "version": "4.34.9",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz",
-          "integrity": "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==",
+          "version": "4.44.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.44.0.tgz",
+          "integrity": "sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw==",
           "optional": true
         },
         "@rollup/rollup-linux-x64-musl": {
-          "version": "4.34.9",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz",
-          "integrity": "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==",
+          "version": "4.44.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.44.0.tgz",
+          "integrity": "sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA==",
           "optional": true
         },
         "@rollup/rollup-win32-arm64-msvc": {
-          "version": "4.34.9",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz",
-          "integrity": "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==",
+          "version": "4.44.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.44.0.tgz",
+          "integrity": "sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w==",
           "optional": true
         },
         "@rollup/rollup-win32-x64-msvc": {
-          "version": "4.34.9",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz",
-          "integrity": "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==",
+          "version": "4.44.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.44.0.tgz",
+          "integrity": "sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ==",
           "optional": true
         }
       }
@@ -5765,11 +5765,11 @@
       }
     },
     "ionicons": {
-      "version": "8.0.13",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.0.13.tgz",
-      "integrity": "sha512-2QQVyG2P4wszne79jemMjWYLp0DBbDhr4/yFroPCxvPP1wtMxgdIV3l5n+XZ5E9mgoXU79w7yTWpm2XzJsISxQ==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.1.0.tgz",
+      "integrity": "sha512-XSM2gYWTXxSYTwjmKWAoy4yR7AbAFDjpc5ZIivAiGXskM0fe5CdMPfs6InQRUcrYtVb2WZ/0HQ1/jeh3JW78SA==",
       "requires": {
-        "@stencil/core": "^4.35.3"
+        "@stencil/core": "^4.43.5"
       }
     },
     "is-array-buffer": {
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
index 0b7f6a85327..b0e045dd890 100644
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react-router",
-  "version": "8.8.7",
+  "version": "8.8.18",
   "description": "React Router wrapper for @ionic/react",
   "keywords": [
     "ionic",
@@ -36,7 +36,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@ionic/react": "^8.8.7",
+    "@ionic/react": "^8.8.18",
     "tslib": "*"
   },
   "peerDependencies": {
diff --git a/packages/react-router/src/ReactRouter/IonRouter.tsx b/packages/react-router/src/ReactRouter/IonRouter.tsx
index fcadd6561a6..761b19295d7 100644
--- a/packages/react-router/src/ReactRouter/IonRouter.tsx
+++ b/packages/react-router/src/ReactRouter/IonRouter.tsx
@@ -84,10 +84,15 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
         this.incomingRouteParams.routeOptions = routeOptions;
         this.props.history.push(routeInfo.pathname + (routeInfo.search || ''));
       } else {
+        /**
+         * The recorded search has to match the URL we push, otherwise
+         * handleHistoryChange sees a URL change where there is none.
+         */
+        const normalizedSearch = search ? '?' + search : '';
         this.incomingRouteParams.pathname = pathname;
-        this.incomingRouteParams.search = search ? '?' + search : undefined;
+        this.incomingRouteParams.search = normalizedSearch;
         this.incomingRouteParams.routeOptions = routeOptions;
-        this.props.history.push(pathname + (search ? '?' + search : ''));
+        this.props.history.push(pathname + normalizedSearch);
       }
     } else {
       this.handleNavigate(pathname, 'push', 'none', undefined, routeOptions, tab);
@@ -107,7 +112,8 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
     }
 
     const leavingUrl = leavingLocationInfo.pathname + leavingLocationInfo.search;
-    if (leavingUrl !== location.pathname) {
+    const currentUrl = location.pathname + (location.search || '');
+    if (leavingUrl !== currentUrl) {
       if (!this.incomingRouteParams) {
         if (action === 'REPLACE') {
           this.incomingRouteParams = {
diff --git a/packages/react-router/test/base/tests/e2e/specs/routing.cy.js b/packages/react-router/test/base/tests/e2e/specs/routing.cy.js
index fd28ee573c0..bf71c305c3b 100644
--- a/packages/react-router/test/base/tests/e2e/specs/routing.cy.js
+++ b/packages/react-router/test/base/tests/e2e/specs/routing.cy.js
@@ -250,7 +250,7 @@ describe('Routing Tests', () => {
   it('/routing/ > Details 1 > Details 2 > Details 3 > Back > Settings Tab > Home Tab > Should be at details 2 page', () => {
     // fixes an issue where route history was being lost after starting to go back, switching tabs
     // and switching back to the same tab again
-    // for bug https://github.com/ionic-team/ionic-framework/issues/21834
+    // For bug https://github.com/ionic-team/ionic-framework/issues/21834
     cy.visit(`http://localhost:${port}/routing`);
     cy.ionPageVisible('home-page');
     cy.ionNav('ion-item', 'Details 1');
@@ -344,6 +344,65 @@ describe('Routing Tests', () => {
     cy.get('div.ion-page[data-pageid=home-details-page-1] [data-testid="details-input"]').should('have.value', '1');
   });
 
+  it('Details 1 with Query Params > pop a same-URL history entry, should stay on details 1', () => {
+    // Regression: popstate over a same-URL entry on a search-bearing route used to trigger a false POP transition.
+    // For bug https://github.com/ionic-team/ionic-framework/issues/31152
+    cy.visit(`http://localhost:${port}/routing`);
+    cy.ionNav('ion-item', 'Details 1 with Query Params');
+    cy.ionPageVisible('home-details-page-1');
+    cy.location('search').should('eq', '?hello=there');
+
+    cy.window().then((win) => {
+      win.history.pushState({ marker: true }, '', win.location.href);
+    });
+
+    cy.go('back');
+
+    // Wait for a late teleport, otherwise the assertions pass against the pre-transition state.
+    cy.wait(1000);
+
+    cy.ionPageVisible('home-details-page-1');
+    cy.ionPageHidden('home-page');
+    cy.location('pathname').should('eq', '/routing/tabs/home/details/1');
+    cy.location('search').should('eq', '?hello=there');
+  });
+
+  it('Details 1 > Settings Details 1 > Back > Settings Tab > pop a same-URL history entry, should stay on settings', () => {
+    // Regression: switching to a tab recorded a route with no search, so a popstate over a
+    // same-URL entry used to teleport to the home tab.
+    // For bug https://github.com/ionic-team/ionic-framework/issues/31152
+    cy.visit(`http://localhost:${port}/routing`);
+    cy.ionNav('ion-item', 'Details 1');
+    cy.ionPageVisible('home-details-page-1');
+
+    cy.ionNav('ion-button', 'Go to Settings Details 1');
+    cy.ionPageVisible('settings-details-page-1');
+
+    cy.go('back');
+    cy.ionPageVisible('home-details-page-1');
+
+    cy.ionTabClick('Settings');
+    cy.ionPageVisible('settings-page');
+    cy.location('pathname').should('eq', '/routing/tabs/settings');
+
+    // Let the tab switch finish so the pop doesn't race the transition.
+    cy.wait(1000);
+
+    cy.window().then((win) => {
+      win.history.pushState({ marker: true }, '', win.location.href);
+    });
+
+    cy.go('back');
+
+    // Wait for a late teleport, otherwise the assertions pass against the pre-transition state.
+    cy.wait(1000);
+
+    cy.ionPageVisible('settings-page');
+    cy.ionPageHidden('home-details-page-1');
+    cy.location('pathname').should('eq', '/routing/tabs/settings');
+    cy.location('search').should('eq', '');
+  });
+
   /*
     Tests to add:
     Test that lifecycle events fire
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index aa99d2e48ec..7daf28a6f78 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,103 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.18](https://github.com/ionic-team/ionic-framework/compare/v8.8.17...v8.8.18) (2026-08-12)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
+## [8.8.17](https://github.com/ionic-team/ionic-framework/compare/v8.8.16...v8.8.17) (2026-08-05)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
+## [8.8.16](https://github.com/ionic-team/ionic-framework/compare/v8.8.15...v8.8.16) (2026-07-29)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
+## [8.8.15](https://github.com/ionic-team/ionic-framework/compare/v8.8.14...v8.8.15) (2026-07-22)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
+## [8.8.14](https://github.com/ionic-team/ionic-framework/compare/v8.8.13...v8.8.14) (2026-07-15)
+
+
+### Bug Fixes
+
+* **tab-bar:** fire tab change events on tab click ([#31262](https://github.com/ionic-team/ionic-framework/issues/31262)) ([44461dd](https://github.com/ionic-team/ionic-framework/commit/44461ddda5ef44030f477931dd94cce4674801a6)), closes [#30145](https://github.com/ionic-team/ionic-framework/issues/30145)
+
+
+
+
+
+## [8.8.13](https://github.com/ionic-team/ionic-framework/compare/v8.8.12...v8.8.13) (2026-07-01)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
+## [8.8.12](https://github.com/ionic-team/ionic-framework/compare/v8.8.11...v8.8.12) (2026-06-24)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
+## [8.8.11](https://github.com/ionic-team/ionic-framework/compare/v8.8.10...v8.8.11) (2026-06-17)
+
+
+### Bug Fixes
+
+* **react:** remove relocated inline overlays orphaned on unmount ([#31223](https://github.com/ionic-team/ionic-framework/issues/31223)) ([d28d25b](https://github.com/ionic-team/ionic-framework/commit/d28d25b798d32db6148155bb34fdbd13243286d9))
+
+
+
+
+
+## [8.8.10](https://github.com/ionic-team/ionic-framework/compare/v8.8.9...v8.8.10) (2026-06-10)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
+## [8.8.9](https://github.com/ionic-team/ionic-framework/compare/v8.8.8...v8.8.9) (2026-06-03)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
+## [8.8.8](https://github.com/ionic-team/ionic-framework/compare/v8.8.7...v8.8.8) (2026-05-20)
+
+
+### Bug Fixes
+
+* **react:** bind events properly for overlays rendered within a nav ([#31159](https://github.com/ionic-team/ionic-framework/issues/31159)) ([fa4593d](https://github.com/ionic-team/ionic-framework/commit/fa4593d8a4d61a583dbf6fa551cd846fe258624f)), closes [#27843](https://github.com/ionic-team/ionic-framework/issues/27843)
+
+
+
+
+
 ## [8.8.7](https://github.com/ionic-team/ionic-framework/compare/v8.8.6...v8.8.7) (2026-05-13)
 
 **Note:** Version bump only for package @ionic/react
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index 5d62d0d2234..00b186644ea 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react",
-  "version": "8.8.7",
+  "version": "8.8.18",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react",
-      "version": "8.8.7",
+      "version": "8.8.18",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.8.7",
+        "@ionic/core": "^8.8.18",
         "ionicons": "^8.0.13",
         "tslib": "*"
       },
@@ -736,12 +736,12 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.8.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.7.tgz",
-      "integrity": "sha512-eHfu6yea7tcog4vUzfT//LavH/poh8zI3cgO/CDXvOehdCi9QONPeeXE+PaCBFkMnD5Q+08SFF/7a/IfD0X0mQ==",
+      "version": "8.8.18",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.18.tgz",
+      "integrity": "sha512-QRFqi6gMSTk89FMjtoDx3p6e2dD7mYxqYzS0+Hl+yjxnoWoNFluWKM9rnGEEkdvpY7bF1pt6CI5IwMt+vjYQWg==",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "4.43.0",
+        "@stencil/core": "4.43.5",
         "ionicons": "^8.0.13",
         "tslib": "^2.1.0"
       },
@@ -1729,9 +1729,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.43.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz",
-      "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==",
+      "version": "4.43.5",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.5.tgz",
+      "integrity": "sha512-cgWD+GeuvJpTe1WQn40p02+BJ2j0j1YJ17GdkF2qKIQ23s2e3Zivq5yISXS3dcuV6oUJFN93jprdk+nk/sq99Q==",
       "license": "MIT",
       "bin": {
         "stencil": "bin/stencil"
@@ -1741,20 +1741,20 @@
         "npm": ">=7.10.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-darwin-arm64": "4.34.9",
-        "@rollup/rollup-darwin-x64": "4.34.9",
-        "@rollup/rollup-linux-arm64-gnu": "4.34.9",
-        "@rollup/rollup-linux-arm64-musl": "4.34.9",
-        "@rollup/rollup-linux-x64-gnu": "4.34.9",
-        "@rollup/rollup-linux-x64-musl": "4.34.9",
-        "@rollup/rollup-win32-arm64-msvc": "4.34.9",
-        "@rollup/rollup-win32-x64-msvc": "4.34.9"
+        "@rollup/rollup-darwin-arm64": "4.44.0",
+        "@rollup/rollup-darwin-x64": "4.44.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.44.0",
+        "@rollup/rollup-linux-arm64-musl": "4.44.0",
+        "@rollup/rollup-linux-x64-gnu": "4.44.0",
+        "@rollup/rollup-linux-x64-musl": "4.44.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.44.0",
+        "@rollup/rollup-win32-x64-msvc": "4.44.0"
       }
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.9.tgz",
-      "integrity": "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.44.0.tgz",
+      "integrity": "sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA==",
       "cpu": [
         "arm64"
       ],
@@ -1765,9 +1765,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz",
-      "integrity": "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.44.0.tgz",
+      "integrity": "sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ==",
       "cpu": [
         "x64"
       ],
@@ -1778,9 +1778,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz",
-      "integrity": "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.44.0.tgz",
+      "integrity": "sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ==",
       "cpu": [
         "arm64"
       ],
@@ -1791,9 +1791,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz",
-      "integrity": "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.44.0.tgz",
+      "integrity": "sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q==",
       "cpu": [
         "arm64"
       ],
@@ -1804,9 +1804,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz",
-      "integrity": "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.44.0.tgz",
+      "integrity": "sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw==",
       "cpu": [
         "x64"
       ],
@@ -1817,9 +1817,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz",
-      "integrity": "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.44.0.tgz",
+      "integrity": "sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA==",
       "cpu": [
         "x64"
       ],
@@ -1830,9 +1830,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz",
-      "integrity": "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.44.0.tgz",
+      "integrity": "sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w==",
       "cpu": [
         "arm64"
       ],
@@ -1843,9 +1843,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz",
-      "integrity": "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.44.0.tgz",
+      "integrity": "sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ==",
       "cpu": [
         "x64"
       ],
diff --git a/packages/react/package.json b/packages/react/package.json
index 14a310f8a99..e37684fc0fc 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react",
-  "version": "8.8.7",
+  "version": "8.8.18",
   "description": "React specific wrapper for @ionic/core",
   "keywords": [
     "ionic",
@@ -40,7 +40,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "^8.8.7",
+    "@ionic/core": "^8.8.18",
     "ionicons": "^8.0.13",
     "tslib": "*"
   },
diff --git a/packages/react/src/components/__tests__/createInlineOverlayComponent.spec.tsx b/packages/react/src/components/__tests__/createInlineOverlayComponent.spec.tsx
new file mode 100644
index 00000000000..e2cb8176af8
--- /dev/null
+++ b/packages/react/src/components/__tests__/createInlineOverlayComponent.spec.tsx
@@ -0,0 +1,155 @@
+/**
+ * Mock the `@ionic/core/components` ESM boundary so Jest can load the wrapper.
+ * Jest can't import Ionic's ESM-only custom elements, so we stub the few
+ * values `createInlineOverlayComponent` reaches: `componentOnReady` (used to
+ * redirect `cachedOriginalParent` after mount) and `getPlatforms`/`isPlatform`
+ * (pulled in transitively via `./utils`).
+ */
+jest.mock('@ionic/core/components', () => ({
+  // Delegates to a mutable hook so individual tests can run side effects
+  // (e.g. teleporting the host) at the moment the overlay comes online.
+  componentOnReady: (el: HTMLElement, cb: () => void) => mockComponentOnReady(el, cb),
+  getPlatforms: () => [],
+  isPlatform: () => false,
+}));
+
+import { act, render } from '@testing-library/react';
+import React from 'react';
+
+import { createInlineOverlayComponent } from '../createInlineOverlayComponent';
+
+// Default: resolve immediately, no side effects. Reset in `afterEach`.
+// `mock` prefix lets the `jest.mock` factory reference it despite hoisting.
+const defaultComponentOnReady = (_el: HTMLElement, cb: () => void) => cb();
+let mockComponentOnReady = defaultComponentOnReady;
+
+// Mirror how `IonModal` is generated: a delegate-host overlay.
+const IonModal = createInlineOverlayComponent<any, any>('ion-modal', undefined, true) as any;
+// An overlay rendered inside another overlay observes the nested context.
+const IonPopover = createInlineOverlayComponent<any, any>('ion-popover', undefined, true) as any;
+
+/**
+ * Simulate what CoreDelegate does when an overlay presents: it teleports the
+ * host element out of its portal parent into another in-document container
+ * (the running app uses ion-app; here we use any sibling).
+ */
+const teleport = (el: HTMLElement) => {
+  const dest = document.createElement('div');
+  dest.id = 'teleport-destination';
+  document.body.appendChild(dest);
+  dest.appendChild(el);
+};
+
+afterEach(() => {
+  document.body.innerHTML = '';
+  mockComponentOnReady = defaultComponentOnReady;
+});
+
+describe('createInlineOverlayComponent: unmount cleanup', () => {
+  it('removes a relocated overlay on unmount even when it never opened', () => {
+    const { unmount } = render(<IonModal />);
+
+    const modal = document.body.querySelector('ion-modal') as HTMLElement;
+    expect(modal).toBeTruthy();
+
+    // Overlay is teleported while still closed (isOpen === false).
+    teleport(modal);
+
+    unmount();
+
+    expect(document.querySelector('ion-modal')).toBeNull();
+  });
+
+  it('removes a normally-portaled overlay on unmount (no relocation)', () => {
+    const { unmount } = render(<IonModal />);
+
+    expect(document.body.querySelector('ion-modal')).toBeTruthy();
+
+    unmount();
+
+    expect(document.querySelector('ion-modal')).toBeNull();
+  });
+
+  it('removes an open, relocated overlay on unmount', () => {
+    const { unmount } = render(<IonModal />);
+    const modal = document.body.querySelector('ion-modal') as HTMLElement;
+
+    // Drive the overlay to its open state the way core does, then teleport it.
+    act(() => {
+      modal.dispatchEvent(new CustomEvent('willPresent'));
+    });
+    teleport(modal);
+
+    unmount();
+
+    expect(document.querySelector('ion-modal')).toBeNull();
+  });
+
+  it('does not orphan a relocated overlay across a StrictMode mount/unmount cycle', () => {
+    /**
+     * React 18 StrictMode mounts, unmounts, then remounts each component in
+     * dev to surface unsafe state reuse. CoreDelegate teleports the host out
+     * of its portal parent as the overlay comes online (simulated here from
+     * componentOnReady, which fires in componentDidMount). At the first
+     * StrictMode unmount the host is relocated but still closed - exactly the
+     * case that previously left an orphan behind, producing a duplicate
+     * `<ion-modal>` in the DOM.
+     */
+    mockComponentOnReady = (el, cb) => {
+      teleport(el);
+      cb();
+    };
+
+    render(
+      <React.StrictMode>
+        <IonModal />
+      </React.StrictMode>
+    );
+
+    // Only the surviving remount's host should remain. The discarded first
+    // mount must not leave an orphan.
+    expect(document.querySelectorAll('ion-modal')).toHaveLength(1);
+  });
+
+  it('removes a relocated nested overlay on unmount even when it never opened', () => {
+    // keepContentsMounted renders the children (and the nested popover) while
+    // the outer modal is closed, so the popover observes the nested context.
+    const { unmount } = render(
+      <IonModal keepContentsMounted={true}>
+        <IonPopover />
+      </IonModal>
+    );
+
+    const popover = document.body.querySelector('ion-popover') as HTMLElement;
+    expect(popover).toBeTruthy();
+
+    // Nested overlay is teleported while still closed.
+    teleport(popover);
+
+    unmount();
+
+    expect(document.querySelector('ion-popover')).toBeNull();
+  });
+
+  it('removes an open, relocated nested overlay on unmount', () => {
+    const { unmount } = render(
+      <IonModal keepContentsMounted={true}>
+        <IonPopover />
+      </IonModal>
+    );
+
+    const popover = document.body.querySelector('ion-popover') as HTMLElement;
+
+    // Drive the nested popover open the way core does, then teleport it out of
+    // its `<template>`. This exercises the `node.remove()` branch followed by
+    // the `isOpen` teardown block on an already-detached node.
+    act(() => {
+      popover.dispatchEvent(new CustomEvent('willPresent'));
+    });
+    teleport(popover);
+
+    expect(() => unmount()).not.toThrow();
+
+    expect(document.querySelector('ion-popover')).toBeNull();
+  });
+});
diff --git a/packages/react/src/components/createInlineOverlayComponent.tsx b/packages/react/src/components/createInlineOverlayComponent.tsx
index 65f1711cbb7..0fc5fe204ab 100644
--- a/packages/react/src/components/createInlineOverlayComponent.tsx
+++ b/packages/react/src/components/createInlineOverlayComponent.tsx
@@ -1,5 +1,7 @@
 import type { HTMLIonOverlayElement, OverlayEventDetail } from '@ionic/core/components';
+import { componentOnReady } from '@ionic/core/components';
 import React, { createElement } from 'react';
+import { createPortal } from 'react-dom';
 
 import {
   attachProps,
@@ -17,6 +19,15 @@ type InlineOverlayState = {
   isOpen: boolean;
 };
 
+/**
+ * Set to `true` when rendering inside another inline overlay. Nested
+ * overlays render at their JSX position (no portal) so that core's
+ * `el.closest('ion-popover')`-style nesting detection keeps working,
+ * and the outer overlay's portal already gives the subtree the correct
+ * React event-delegation root.
+ */
+const NestedOverlayContext = React.createContext(false);
+
 interface IonicReactInternalProps<ElementType> extends React.HTMLAttributes<ElementType> {
   forwardedRef?: React.ForwardedRef<ElementType>;
   ref?: React.Ref<any>;
@@ -36,12 +47,18 @@ export const createInlineOverlayComponent = <PropType, ElementType>(
     defineCustomElement();
   }
   const displayName = dashToPascalCase(tagName);
-  const ReactComponent = class extends React.Component<IonicReactInternalProps<PropType>, InlineOverlayState> {
+
+  type InternalProps = IonicReactInternalProps<PropType> & { isNested?: boolean };
+
+  const ReactComponent = class extends React.Component<InternalProps, InlineOverlayState> {
     ref: React.RefObject<HTMLIonOverlayElement>;
     wrapperRef: React.RefObject<HTMLElement>;
+    markerRef: React.RefObject<HTMLTemplateElement>;
     stableMergedRefs: React.RefCallback<HTMLElement>;
+    portalTarget: HTMLElement | null;
+    isUnmounted = false;
 
-    constructor(props: IonicReactInternalProps<PropType>) {
+    constructor(props: InternalProps) {
       super(props);
       // Create a local ref to to attach props to the wrapped element.
       this.ref = React.createRef();
@@ -51,17 +68,51 @@ export const createInlineOverlayComponent = <PropType, ElementType>(
       this.state = { isOpen: false };
       // Create a local ref to the inner child element.
       this.wrapperRef = React.createRef();
+      // Marker stays at the JSX location so we can recover the immediate
+      // JSX parent after the overlay has been portaled to ion-app.
+      this.markerRef = React.createRef();
+      /**
+       * Resolve the portal target to the same container CoreDelegate
+       * teleports overlays into. Portaling here keeps the overlay inside
+       * React's tree so React's synthetic events still dispatch to its
+       * children, even after CoreDelegate moves the DOM node out of the
+       * declared JSX parent.
+       */
+      this.portalTarget = typeof document !== 'undefined' ? document.querySelector('ion-app') || document.body : null;
     }
 
     componentDidMount() {
+      // Reset for React 18 StrictMode: the dev-mode unmount/remount cycle
+      // re-uses this instance and leaves the flag set from the prior
+      // componentWillUnmount.
+      this.isUnmounted = false;
+
       this.componentDidUpdate(this.props);
 
       this.ref.current?.addEventListener('ionMount', this.handleIonMount);
       this.ref.current?.addEventListener('willPresent', this.handleWillPresent);
       this.ref.current?.addEventListener('didDismiss', this.handleDidDismiss);
+
+      /**
+       * The overlay is portaled to `portalTarget`, so Stencil caches that
+       * container as `cachedOriginalParent`. Modal features (sheet
+       * child-route passthrough, parent-removal auto-dismiss) walk up
+       * from `cachedOriginalParent` to find the enclosing `.ion-page`,
+       * so we redirect it at the marker's JSX parent.
+       */
+      const overlay = this.ref.current;
+      if (overlay) {
+        componentOnReady(overlay as HTMLElement, () => {
+          if (this.isUnmounted) return;
+          const markerParent = this.markerRef.current?.parentElement ?? null;
+          if (markerParent && markerParent !== this.portalTarget) {
+            (overlay as any).cachedOriginalParent = markerParent;
+          }
+        });
+      }
     }
 
-    componentDidUpdate(prevProps: IonicReactInternalProps<PropType>) {
+    componentDidUpdate(prevProps: InternalProps) {
       const node = this.ref.current! as HTMLElement;
       /**
        * onDidDismiss and onWillPresent have manual implementations that
@@ -69,12 +120,48 @@ export const createInlineOverlayComponent = <PropType, ElementType>(
        * so they don't get attached twice and called twice.
        */
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { onDidDismiss, onWillPresent, ...cProps } = this.props;
+      const { onDidDismiss, onWillPresent, isNested, ...cProps } = this.props;
       attachProps(node, cProps, prevProps);
     }
 
     componentWillUnmount() {
+      this.isUnmounted = true;
       const node = this.ref.current;
+      if (!node) {
+        return;
+      }
+      /**
+       * CoreDelegate (or user code in onWillPresent) can move the overlay out
+       * of where React rendered it. React's unmount only removes the node from
+       * its original React location, so we recover a relocated host here,
+       * regardless of open state.
+       *
+       * We can't gate this on `isOpen`: the overlay can be moved before it
+       * finishes presenting (e.g. the React 18 StrictMode mount/unmount cycle,
+       * where the present events that flip `isOpen` haven't fired yet), which
+       * would orphan the relocated host in the DOM. It also has to run
+       * synchronously here, since React's portal `removeChild` runs after
+       * `componentWillUnmount` returns and needs the host where it expects it.
+       */
+      if (node.isConnected) {
+        if (this.props.isNested) {
+          /**
+           * Nested overlays render inline inside a `<template>`. If the host
+           * has been moved out of that template, React's unmount won't reach
+           * it, so remove it directly. A host still in its template is left
+           * for React to remove.
+           */
+          if (!(node.parentElement instanceof HTMLTemplateElement)) {
+            node.remove();
+          }
+        } else if (this.portalTarget && node.parentNode !== this.portalTarget) {
+          /**
+           * Portaled overlays: move the host back into `portalTarget` so
+           * React's portal `removeChild` can find it.
+           */
+          this.portalTarget.appendChild(node);
+        }
+      }
       /**
        * If the overlay is being unmounted, but is still
        * open, this means the unmount was triggered outside
@@ -88,23 +175,20 @@ export const createInlineOverlayComponent = <PropType, ElementType>(
        * Unmounting the overlay at this stage should skip
        * the dismiss lifecycle, including skipping the transition.
        *
+       * Detach the local event listener that performs the state updates,
+       * before dismissing the overlay, to prevent the callback handlers
+       * executing after the component has been unmounted. This is to
+       * avoid memory leaks.
        */
-      if (node && this.state.isOpen) {
-        /**
-         * Detach the local event listener that performs the state updates,
-         * before dismissing the overlay, to prevent the callback handlers
-         * executing after the component has been unmounted. This is to
-         * avoid memory leaks.
-         */
+      if (this.state.isOpen) {
         node.removeEventListener('didDismiss', this.handleDidDismiss);
-        node.remove();
         detachProps(node, this.props);
       }
     }
 
     render() {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
+      const { children, forwardedRef, style, className, ref, isNested, ...cProps } = this.props;
 
       const propsToPass = Object.keys(cProps).reduce((acc, name) => {
         if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
@@ -136,17 +220,16 @@ export const createInlineOverlayComponent = <PropType, ElementType>(
         return DELEGATE_HOST;
       };
 
-      return createElement(
-        'template',
-        {},
+      const overlayElement = createElement(
+        tagName,
+        newProps,
+        // Children, not the overlay host, observe `isNested = true`.
         createElement(
-          tagName,
-          newProps,
+          NestedOverlayContext.Provider,
+          { value: true },
           /**
-           * We only want the inner component
-           * to be mounted if the overlay is open,
-           * so conditionally render the component
-           * based on the isOpen state.
+           * We only want the inner component to be mounted if the overlay
+           * is open, so conditionally render based on `isOpen` state.
            */
           this.state.isOpen || this.props.keepContentsMounted
             ? createElement(
@@ -160,6 +243,21 @@ export const createInlineOverlayComponent = <PropType, ElementType>(
             : null
         )
       );
+
+      // Top-level overlays portal into `portalTarget` with a marker
+      // `<template>` at the JSX location to recover the immediate JSX
+      // parent after CoreDelegate teleports. Nested overlays and SSR
+      // fall back to a `<template>` wrapper.
+      if (!isNested && this.portalTarget) {
+        return createElement(
+          React.Fragment,
+          null,
+          createElement('template', { ref: this.markerRef }),
+          createPortal(overlayElement, this.portalTarget)
+        );
+      }
+
+      return createElement('template', {}, overlayElement);
     }
 
     static get displayName() {
@@ -206,7 +304,17 @@ export const createInlineOverlayComponent = <PropType, ElementType>(
       this.props.onDidDismiss && this.props.onDidDismiss(evt);
     };
   };
-  return createForwardRef<PropType, ElementType>(ReactComponent, displayName);
+
+  // Forward the nesting context as a prop to avoid contextType on the class.
+  // The render function is passed via `children` (not as a varargs child) so it
+  // matches `Context.Consumer`'s render-prop signature `(value) => ReactNode`.
+  const ReactComponentWithNesting: React.FC<IonicReactInternalProps<PropType>> = (props) =>
+    createElement(NestedOverlayContext.Consumer, {
+      children: (isNested: boolean) => createElement(ReactComponent, { ...(props as InternalProps), isNested }),
+    });
+  ReactComponentWithNesting.displayName = displayName;
+
+  return createForwardRef<PropType, ElementType>(ReactComponentWithNesting, displayName);
 };
 
 const DELEGATE_HOST = 'ion-delegate-host';
diff --git a/packages/react/src/components/navigation/IonTabBar.tsx b/packages/react/src/components/navigation/IonTabBar.tsx
index 124b00f6990..ab1db62f197 100644
--- a/packages/react/src/components/navigation/IonTabBar.tsx
+++ b/packages/react/src/components/navigation/IonTabBar.tsx
@@ -224,12 +224,20 @@ class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarSta
         this.context.resetTab(e.detail.tab, originalHref, tappedTab.originalRouteOptions);
       }
     } else {
-      if (this.props.onIonTabsWillChange) {
-        this.props.onIonTabsWillChange(new CustomEvent('ionTabWillChange', { detail: { tab: e.detail.tab } }));
+      let onWillChange = this.props.onIonTabsWillChange;
+      let onDidChange = this.props.onIonTabsDidChange;
+      if (this.props.tabsContext) {
+        onWillChange = this.props.tabsContext?.tabBarProps.onIonTabsWillChange ?? this.props.onIonTabsWillChange;
+        onDidChange = this.props.tabsContext?.tabBarProps.onIonTabsDidChange ?? this.props.onIonTabsDidChange;
       }
-      if (this.props.onIonTabsDidChange) {
-        this.props.onIonTabsDidChange(new CustomEvent('ionTabDidChange', { detail: { tab: e.detail.tab } }));
+
+      if (onWillChange) {
+        onWillChange(new CustomEvent('ionTabWillChange', { detail: { tab: e.detail.tab } }));
+      }
+      if (onDidChange) {
+        onDidChange(new CustomEvent('ionTabDidChange', { detail: { tab: e.detail.tab } }));
       }
+
       if (hasRouterOutlet) {
         this.setActiveTabOnContext(e.detail.tab);
         this.context.changeTab(e.detail.tab, currentHref, e.detail.routeOptions);
diff --git a/packages/react/src/components/utils/index.tsx b/packages/react/src/components/utils/index.tsx
index f399802cd14..8e1c02bbf8f 100644
--- a/packages/react/src/components/utils/index.tsx
+++ b/packages/react/src/components/utils/index.tsx
@@ -25,7 +25,16 @@ export const createForwardRef = <PropType, ElementType>(
   };
   forwardRef.displayName = displayName;
 
-  return React.forwardRef(forwardRef);
+  // Cast the render function to the type React.forwardRef already infers for it.
+  // React 18's `forwardRef` wraps the props in `PropsWithoutRef`, and since
+  // `PropType` is unconstrained TypeScript can't prove the round-trip is safe.
+  // The cast keeps the inferred component type intact without widening to `any`.
+  return React.forwardRef(
+    forwardRef as React.ForwardRefRenderFunction<
+      ElementType,
+      React.PropsWithoutRef<IonicReactExternalProps<PropType, ElementType>>
+    >
+  );
 };
 
 export const isPlatform = (platform: Platforms) => {
diff --git a/packages/react/test/base/src/App.tsx b/packages/react/test/base/src/App.tsx
index 5878f0214f6..cac0e114d4d 100644
--- a/packages/react/test/base/src/App.tsx
+++ b/packages/react/test/base/src/App.tsx
@@ -27,6 +27,7 @@ import Main from './pages/Main';
 import Tabs from './pages/Tabs';
 import TabsBasic from './pages/TabsBasic';
 import NavComponent from './pages/navigation/NavComponent';
+import NavModalComponent from './pages/navigation/NavModalComponent';
 import TabsDirectNavigation from './pages/TabsDirectNavigation';
 import TabsSimilarPrefixes from './pages/TabsSimilarPrefixes';
 import IonModalConditional from './pages/overlay-components/IonModalConditional';
@@ -66,6 +67,7 @@ const App: React.FC = () => (
         />
         <Route path="/keep-contents-mounted" component={KeepContentsMounted} />
         <Route path="/navigation" component={NavComponent} />
+        <Route path="/navigation-modal" component={NavModalComponent} />
         <Route path="/tabs" component={Tabs} />
         <Route path="/tabs-basic" component={TabsBasic} />
         <Route path="/tabs-direct-navigation" component={TabsDirectNavigation} />
diff --git a/packages/react/test/base/src/pages/navigation/NavModalComponent.tsx b/packages/react/test/base/src/pages/navigation/NavModalComponent.tsx
new file mode 100644
index 00000000000..ef070603b69
--- /dev/null
+++ b/packages/react/test/base/src/pages/navigation/NavModalComponent.tsx
@@ -0,0 +1,61 @@
+import {
+  IonButton,
+  IonContent,
+  IonHeader,
+  IonModal,
+  IonNav,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import React, { useState } from 'react';
+
+const ModalPage: React.FC = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [clickCount, setClickCount] = useState(0);
+  const [inputValue, setInputValue] = useState('');
+
+  return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Nav Modal Page</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <IonButton id="open-modal" onClick={() => setIsOpen(true)}>
+          Open Modal
+        </IonButton>
+        <div id="page-click-count">{clickCount}</div>
+        <div id="page-input-value">{inputValue}</div>
+
+        <IonModal isOpen={isOpen} onDidDismiss={() => setIsOpen(false)}>
+          <IonContent>
+            <IonButton id="increment-button" onClick={() => setClickCount((c) => c + 1)}>
+              Increment
+            </IonButton>
+            <input
+              id="text-input"
+              type="text"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+            />
+            <IonButton id="close-modal" onClick={() => setIsOpen(false)}>
+              Close
+            </IonButton>
+          </IonContent>
+        </IonModal>
+      </IonContent>
+    </>
+  );
+};
+
+const NavModalComponent: React.FC = () => {
+  return (
+    <IonPage>
+      <IonNav root={() => <ModalPage />} />
+    </IonPage>
+  );
+};
+
+export default NavModalComponent;
diff --git a/packages/react/test/base/tests/e2e/specs/navigation/IonNavModal.cy.ts b/packages/react/test/base/tests/e2e/specs/navigation/IonNavModal.cy.ts
new file mode 100644
index 00000000000..8db53d26fb0
--- /dev/null
+++ b/packages/react/test/base/tests/e2e/specs/navigation/IonNavModal.cy.ts
@@ -0,0 +1,35 @@
+describe('IonNav with IonModal', () => {
+  beforeEach(() => {
+    cy.visit('/navigation-modal');
+  });
+
+  // @see https://github.com/ionic-team/ionic-framework/issues/27843
+  it('should fire click handlers inside a modal that lives in IonNav', () => {
+    cy.get('#open-modal').click();
+    cy.get('ion-modal').should('be.visible');
+
+    cy.get('#increment-button').click();
+    cy.get('#increment-button').click();
+
+    cy.get('#page-click-count').should('have.text', '2');
+  });
+
+  // @see https://github.com/ionic-team/ionic-framework/issues/27843
+  it('should fire input change handlers inside a modal that lives in IonNav', () => {
+    cy.get('#open-modal').click();
+    cy.get('ion-modal').should('be.visible');
+
+    cy.get('#text-input').type('hello');
+
+    cy.get('#page-input-value').should('have.text', 'hello');
+  });
+
+  // @see https://github.com/ionic-team/ionic-framework/issues/27843
+  it('should dismiss the modal via a click handler inside it', () => {
+    cy.get('#open-modal').click();
+    cy.get('ion-modal').should('be.visible');
+
+    cy.get('#close-modal').click();
+    cy.get('ion-modal').should('not.be.visible');
+  });
+});
diff --git a/packages/react/test/base/tests/e2e/specs/tabs/tabs.cy.ts b/packages/react/test/base/tests/e2e/specs/tabs/tabs.cy.ts
index 34b4ee4f1e6..2d8b4302cd0 100644
--- a/packages/react/test/base/tests/e2e/specs/tabs/tabs.cy.ts
+++ b/packages/react/test/base/tests/e2e/specs/tabs/tabs.cy.ts
@@ -2,7 +2,7 @@ describe('IonTabs', () => {
   /**
    * Verifies that tabs with similar route prefixes (e.g., /home, /home2, /home3)
    * correctly select the matching tab instead of the first prefix match.
-   * 
+   *
    * @see https://github.com/ionic-team/ionic-framework/issues/30448
    */
   describe('Similar Route Prefixes', () => {
@@ -58,7 +58,11 @@ describe('IonTabs', () => {
 
   describe('Without IonRouterOutlet', () => {
     beforeEach(() => {
-      cy.visit('/tabs-basic');
+      cy.visit('/tabs-basic', {
+        onBeforeLoad(win) {
+          cy.spy(win.console, 'log').as('consoleLog');
+        },
+      });
     });
 
     it.skip('should show correct tab when clicking the tab button', () => {
@@ -83,5 +87,12 @@ describe('IonTabs', () => {
 
       cy.url().should('include', '/tabs-basic');
     });
+
+    it('should fire tab change events on tab click', () => {
+      cy.get('ion-tab-button[tab="tab2"]').click();
+
+      cy.get('@consoleLog').should('be.calledWith', 'onIonTabsWillChange', 'tab2');
+      cy.get('@consoleLog').should('be.calledWith', 'onIonTabsDidChange:', 'tab2');
+    });
   });
 });
diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md
index 8f122de21d4..fe3d03966f9 100644
--- a/packages/vue-router/CHANGELOG.md
+++ b/packages/vue-router/CHANGELOG.md
@@ -3,6 +3,98 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.18](https://github.com/ionic-team/ionic-framework/compare/v8.8.17...v8.8.18) (2026-08-12)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
+## [8.8.17](https://github.com/ionic-team/ionic-framework/compare/v8.8.16...v8.8.17) (2026-08-05)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
+## [8.8.16](https://github.com/ionic-team/ionic-framework/compare/v8.8.15...v8.8.16) (2026-07-29)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
+## [8.8.15](https://github.com/ionic-team/ionic-framework/compare/v8.8.14...v8.8.15) (2026-07-22)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
+## [8.8.14](https://github.com/ionic-team/ionic-framework/compare/v8.8.13...v8.8.14) (2026-07-15)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
+## [8.8.13](https://github.com/ionic-team/ionic-framework/compare/v8.8.12...v8.8.13) (2026-07-01)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
+## [8.8.12](https://github.com/ionic-team/ionic-framework/compare/v8.8.11...v8.8.12) (2026-06-24)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
+## [8.8.11](https://github.com/ionic-team/ionic-framework/compare/v8.8.10...v8.8.11) (2026-06-17)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
+## [8.8.10](https://github.com/ionic-team/ionic-framework/compare/v8.8.9...v8.8.10) (2026-06-10)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
+## [8.8.9](https://github.com/ionic-team/ionic-framework/compare/v8.8.8...v8.8.9) (2026-06-03)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
+## [8.8.8](https://github.com/ionic-team/ionic-framework/compare/v8.8.7...v8.8.8) (2026-05-20)
+
+
+### Bug Fixes
+
+* **tabs:** preserve query params and fragment from tab button href ([#31154](https://github.com/ionic-team/ionic-framework/issues/31154)) ([0182bba](https://github.com/ionic-team/ionic-framework/commit/0182bba06d6171dd2faf80556fd2131abf03fa93)), closes [#25470](https://github.com/ionic-team/ionic-framework/issues/25470)
+* **vue-router:** prevent out-of-bounds index when popping across tabs ([#31148](https://github.com/ionic-team/ionic-framework/issues/31148)) ([c88c0de](https://github.com/ionic-team/ionic-framework/commit/c88c0de3ade92469fa1f37e1b8220911adf113e0)), closes [#29413](https://github.com/ionic-team/ionic-framework/issues/29413)
+
+
+
+
+
 ## [8.8.7](https://github.com/ionic-team/ionic-framework/compare/v8.8.6...v8.8.7) (2026-05-13)
 
 **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 80e6831e482..b893052b3ec 100644
--- a/packages/vue-router/package-lock.json
+++ b/packages/vue-router/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue-router",
-  "version": "8.8.7",
+  "version": "8.8.18",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue-router",
-      "version": "8.8.7",
+      "version": "8.8.18",
       "license": "MIT",
       "dependencies": {
-        "@ionic/vue": "^8.8.7"
+        "@ionic/vue": "^8.8.18"
       },
       "devDependencies": {
         "@ionic/eslint-config": "^0.3.0",
@@ -673,12 +673,12 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.8.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.7.tgz",
-      "integrity": "sha512-eHfu6yea7tcog4vUzfT//LavH/poh8zI3cgO/CDXvOehdCi9QONPeeXE+PaCBFkMnD5Q+08SFF/7a/IfD0X0mQ==",
+      "version": "8.8.18",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.18.tgz",
+      "integrity": "sha512-QRFqi6gMSTk89FMjtoDx3p6e2dD7mYxqYzS0+Hl+yjxnoWoNFluWKM9rnGEEkdvpY7bF1pt6CI5IwMt+vjYQWg==",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "4.43.0",
+        "@stencil/core": "4.43.5",
         "ionicons": "^8.0.13",
         "tslib": "^2.1.0"
       },
@@ -868,12 +868,12 @@
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "8.8.7",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.8.7.tgz",
-      "integrity": "sha512-TMb38QzZhs/1Tfmy2yT/5uwPm69qS7JivFNH0Orz9dZ16F7mamO3v9tQMkwTz+mlA7QJ6/Iz26ylqFaLRCdKjA==",
+      "version": "8.8.18",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.8.18.tgz",
+      "integrity": "sha512-4Cqp9L+nubSK5PnG8eKENfdnjFL/ze0Et7W87rQYTQzAVxiNqK9vmdVzWK8BErP1uSV+lbXsiQ8SrzQl6mlNiQ==",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "8.8.7",
+        "@ionic/core": "8.8.18",
         "@stencil/vue-output-target": "0.10.7",
         "ionicons": "^8.0.13"
       }
@@ -1526,9 +1526,9 @@
       }
     },
     "node_modules/@stencil/core": {
-      "version": "4.43.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz",
-      "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==",
+      "version": "4.43.5",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.5.tgz",
+      "integrity": "sha512-cgWD+GeuvJpTe1WQn40p02+BJ2j0j1YJ17GdkF2qKIQ23s2e3Zivq5yISXS3dcuV6oUJFN93jprdk+nk/sq99Q==",
       "license": "MIT",
       "bin": {
         "stencil": "bin/stencil"
@@ -1538,20 +1538,20 @@
         "npm": ">=7.10.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-darwin-arm64": "4.34.9",
-        "@rollup/rollup-darwin-x64": "4.34.9",
-        "@rollup/rollup-linux-arm64-gnu": "4.34.9",
-        "@rollup/rollup-linux-arm64-musl": "4.34.9",
-        "@rollup/rollup-linux-x64-gnu": "4.34.9",
-        "@rollup/rollup-linux-x64-musl": "4.34.9",
-        "@rollup/rollup-win32-arm64-msvc": "4.34.9",
-        "@rollup/rollup-win32-x64-msvc": "4.34.9"
+        "@rollup/rollup-darwin-arm64": "4.44.0",
+        "@rollup/rollup-darwin-x64": "4.44.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.44.0",
+        "@rollup/rollup-linux-arm64-musl": "4.44.0",
+        "@rollup/rollup-linux-x64-gnu": "4.44.0",
+        "@rollup/rollup-linux-x64-musl": "4.44.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.44.0",
+        "@rollup/rollup-win32-x64-msvc": "4.44.0"
       }
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.9.tgz",
-      "integrity": "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.44.0.tgz",
+      "integrity": "sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA==",
       "cpu": [
         "arm64"
       ],
@@ -1562,9 +1562,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz",
-      "integrity": "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.44.0.tgz",
+      "integrity": "sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ==",
       "cpu": [
         "x64"
       ],
@@ -1575,9 +1575,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz",
-      "integrity": "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.44.0.tgz",
+      "integrity": "sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ==",
       "cpu": [
         "arm64"
       ],
@@ -1588,9 +1588,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz",
-      "integrity": "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.44.0.tgz",
+      "integrity": "sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q==",
       "cpu": [
         "arm64"
       ],
@@ -1601,9 +1601,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz",
-      "integrity": "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.44.0.tgz",
+      "integrity": "sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw==",
       "cpu": [
         "x64"
       ],
@@ -1614,9 +1614,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz",
-      "integrity": "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.44.0.tgz",
+      "integrity": "sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA==",
       "cpu": [
         "x64"
       ],
@@ -1627,9 +1627,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz",
-      "integrity": "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.44.0.tgz",
+      "integrity": "sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w==",
       "cpu": [
         "arm64"
       ],
@@ -1640,9 +1640,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz",
-      "integrity": "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.44.0.tgz",
+      "integrity": "sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ==",
       "cpu": [
         "x64"
       ],
@@ -4434,12 +4434,12 @@
       }
     },
     "node_modules/ionicons": {
-      "version": "8.0.13",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.0.13.tgz",
-      "integrity": "sha512-2QQVyG2P4wszne79jemMjWYLp0DBbDhr4/yFroPCxvPP1wtMxgdIV3l5n+XZ5E9mgoXU79w7yTWpm2XzJsISxQ==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.1.0.tgz",
+      "integrity": "sha512-XSM2gYWTXxSYTwjmKWAoy4yR7AbAFDjpc5ZIivAiGXskM0fe5CdMPfs6InQRUcrYtVb2WZ/0HQ1/jeh3JW78SA==",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "^4.35.3"
+        "@stencil/core": "^4.43.5"
       }
     },
     "node_modules/is-array-buffer": {
@@ -8044,11 +8044,11 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.8.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.7.tgz",
-      "integrity": "sha512-eHfu6yea7tcog4vUzfT//LavH/poh8zI3cgO/CDXvOehdCi9QONPeeXE+PaCBFkMnD5Q+08SFF/7a/IfD0X0mQ==",
+      "version": "8.8.18",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.18.tgz",
+      "integrity": "sha512-QRFqi6gMSTk89FMjtoDx3p6e2dD7mYxqYzS0+Hl+yjxnoWoNFluWKM9rnGEEkdvpY7bF1pt6CI5IwMt+vjYQWg==",
       "requires": {
-        "@stencil/core": "4.43.0",
+        "@stencil/core": "4.43.5",
         "ionicons": "^8.0.13",
         "tslib": "^2.1.0"
       }
@@ -8159,11 +8159,11 @@
       "requires": {}
     },
     "@ionic/vue": {
-      "version": "8.8.7",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.8.7.tgz",
-      "integrity": "sha512-TMb38QzZhs/1Tfmy2yT/5uwPm69qS7JivFNH0Orz9dZ16F7mamO3v9tQMkwTz+mlA7QJ6/Iz26ylqFaLRCdKjA==",
+      "version": "8.8.18",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.8.18.tgz",
+      "integrity": "sha512-4Cqp9L+nubSK5PnG8eKENfdnjFL/ze0Et7W87rQYTQzAVxiNqK9vmdVzWK8BErP1uSV+lbXsiQ8SrzQl6mlNiQ==",
       "requires": {
-        "@ionic/core": "8.8.7",
+        "@ionic/core": "8.8.18",
         "@stencil/vue-output-target": "0.10.7",
         "ionicons": "^8.0.13"
       }
@@ -8627,66 +8627,66 @@
       }
     },
     "@stencil/core": {
-      "version": "4.43.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz",
-      "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==",
+      "version": "4.43.5",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.5.tgz",
+      "integrity": "sha512-cgWD+GeuvJpTe1WQn40p02+BJ2j0j1YJ17GdkF2qKIQ23s2e3Zivq5yISXS3dcuV6oUJFN93jprdk+nk/sq99Q==",
       "requires": {
-        "@rollup/rollup-darwin-arm64": "4.34.9",
-        "@rollup/rollup-darwin-x64": "4.34.9",
-        "@rollup/rollup-linux-arm64-gnu": "4.34.9",
-        "@rollup/rollup-linux-arm64-musl": "4.34.9",
-        "@rollup/rollup-linux-x64-gnu": "4.34.9",
-        "@rollup/rollup-linux-x64-musl": "4.34.9",
-        "@rollup/rollup-win32-arm64-msvc": "4.34.9",
-        "@rollup/rollup-win32-x64-msvc": "4.34.9"
+        "@rollup/rollup-darwin-arm64": "4.44.0",
+        "@rollup/rollup-darwin-x64": "4.44.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.44.0",
+        "@rollup/rollup-linux-arm64-musl": "4.44.0",
+        "@rollup/rollup-linux-x64-gnu": "4.44.0",
+        "@rollup/rollup-linux-x64-musl": "4.44.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.44.0",
+        "@rollup/rollup-win32-x64-msvc": "4.44.0"
       },
       "dependencies": {
         "@rollup/rollup-darwin-arm64": {
-          "version": "4.34.9",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.9.tgz",
-          "integrity": "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==",
+          "version": "4.44.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.44.0.tgz",
+          "integrity": "sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA==",
           "optional": true
         },
         "@rollup/rollup-darwin-x64": {
-          "version": "4.34.9",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz",
-          "integrity": "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==",
+          "version": "4.44.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.44.0.tgz",
+          "integrity": "sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ==",
           "optional": true
         },
         "@rollup/rollup-linux-arm64-gnu": {
-          "version": "4.34.9",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz",
-          "integrity": "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==",
+          "version": "4.44.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.44.0.tgz",
+          "integrity": "sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ==",
           "optional": true
         },
         "@rollup/rollup-linux-arm64-musl": {
-          "version": "4.34.9",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz",
-          "integrity": "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==",
+          "version": "4.44.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.44.0.tgz",
+          "integrity": "sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q==",
           "optional": true
         },
         "@rollup/rollup-linux-x64-gnu": {
-          "version": "4.34.9",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz",
-          "integrity": "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==",
+          "version": "4.44.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.44.0.tgz",
+          "integrity": "sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw==",
           "optional": true
         },
         "@rollup/rollup-linux-x64-musl": {
-          "version": "4.34.9",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz",
-          "integrity": "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==",
+          "version": "4.44.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.44.0.tgz",
+          "integrity": "sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA==",
           "optional": true
         },
         "@rollup/rollup-win32-arm64-msvc": {
-          "version": "4.34.9",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz",
-          "integrity": "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==",
+          "version": "4.44.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.44.0.tgz",
+          "integrity": "sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w==",
           "optional": true
         },
         "@rollup/rollup-win32-x64-msvc": {
-          "version": "4.34.9",
-          "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz",
-          "integrity": "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==",
+          "version": "4.44.0",
+          "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.44.0.tgz",
+          "integrity": "sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ==",
           "optional": true
         }
       }
@@ -10729,11 +10729,11 @@
       }
     },
     "ionicons": {
-      "version": "8.0.13",
-      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.0.13.tgz",
-      "integrity": "sha512-2QQVyG2P4wszne79jemMjWYLp0DBbDhr4/yFroPCxvPP1wtMxgdIV3l5n+XZ5E9mgoXU79w7yTWpm2XzJsISxQ==",
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.1.0.tgz",
+      "integrity": "sha512-XSM2gYWTXxSYTwjmKWAoy4yR7AbAFDjpc5ZIivAiGXskM0fe5CdMPfs6InQRUcrYtVb2WZ/0HQ1/jeh3JW78SA==",
       "requires": {
-        "@stencil/core": "^4.35.3"
+        "@stencil/core": "^4.43.5"
       }
     },
     "is-array-buffer": {
diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json
index bea74c814ac..f5cdc21173e 100644
--- a/packages/vue-router/package.json
+++ b/packages/vue-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue-router",
-  "version": "8.8.7",
+  "version": "8.8.18",
   "description": "Vue Router integration for @ionic/vue",
   "scripts": {
     "test.spec": "jest",
@@ -44,7 +44,7 @@
   },
   "homepage": "https://github.com/ionic-team/ionic-framework#readme",
   "dependencies": {
-    "@ionic/vue": "^8.8.7"
+    "@ionic/vue": "^8.8.18"
   },
   "devDependencies": {
     "@ionic/eslint-config": "^0.3.0",
diff --git a/packages/vue-router/src/router.ts b/packages/vue-router/src/router.ts
index 35ce3d55a94..dd864e1458b 100644
--- a/packages/vue-router/src/router.ts
+++ b/packages/vue-router/src/router.ts
@@ -534,7 +534,18 @@ export const createIonRouter = (
     if (!path) return;
 
     const routeInfo = locationHistory.getCurrentRouteInfoForTab(tab);
-    const [pathname] = path.split("?");
+    /**
+     * Strip the fragment before parsing the query so that a `#frag` on the
+     * href cannot leak into the last query value or corrupt the pathname.
+     */
+    const hashIndex = path.indexOf("#");
+    const beforeHash = hashIndex >= 0 ? path.slice(0, hashIndex) : path;
+    const hrefHash =
+      hashIndex >= 0 && hashIndex < path.length - 1
+        ? path.slice(hashIndex)
+        : "";
+    const [pathname, search] = beforeHash.split("?");
+    const hrefSearch = search ? `?${search}` : "";
 
     if (routeInfo) {
       incomingRouteParams = {
@@ -550,17 +561,29 @@ export const createIonRouter = (
        * for the route info to be incorrect
        * as the tab you want is not the
        * tab you are on.
+       *
+       * If the incoming href carries its own query string, prefer that over
+       * the previously-saved search so query params on the tab button href
+       * are honored when re-selecting the tab.
        */
+      const effectiveSearch = hrefSearch || routeInfo.search;
+      const push = {
+        query: parseQuery(effectiveSearch),
+        ...(hrefHash ? { hash: hrefHash } : {}),
+      };
       if (routeInfo.pathname === pathname) {
-        router.push({
-          path: routeInfo.pathname,
-          query: parseQuery(routeInfo.search),
-        });
+        router.push({ path: routeInfo.pathname, ...push });
       } else {
-        router.push({ path: pathname, query: parseQuery(routeInfo.search) });
+        router.push({ path: pathname, ...push });
       }
     } else {
-      handleNavigate(pathname, "push", "none", undefined, tab);
+      handleNavigate(
+        pathname + hrefSearch + hrefHash,
+        "push",
+        "none",
+        undefined,
+        tab
+      );
     }
   };
 
diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
index a753df6b199..3a17d3483f4 100644
--- a/packages/vue/CHANGELOG.md
+++ b/packages/vue/CHANGELOG.md
@@ -3,6 +3,100 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.18](https://github.com/ionic-team/ionic-framework/compare/v8.8.17...v8.8.18) (2026-08-12)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
+## [8.8.17](https://github.com/ionic-team/ionic-framework/compare/v8.8.16...v8.8.17) (2026-08-05)
+
+
+### Bug Fixes
+
+* **fab-button:** restore submit, reset, and disabled form functionality ([#31249](https://github.com/ionic-team/ionic-framework/issues/31249)) ([93ee380](https://github.com/ionic-team/ionic-framework/commit/93ee38015125619509b9aa844d6f0025be0a71b7)), closes [#18550](https://github.com/ionic-team/ionic-framework/issues/18550)
+
+
+
+
+
+## [8.8.16](https://github.com/ionic-team/ionic-framework/compare/v8.8.15...v8.8.16) (2026-07-29)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
+## [8.8.15](https://github.com/ionic-team/ionic-framework/compare/v8.8.14...v8.8.15) (2026-07-22)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
+## [8.8.14](https://github.com/ionic-team/ionic-framework/compare/v8.8.13...v8.8.14) (2026-07-15)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
+## [8.8.13](https://github.com/ionic-team/ionic-framework/compare/v8.8.12...v8.8.13) (2026-07-01)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
+## [8.8.12](https://github.com/ionic-team/ionic-framework/compare/v8.8.11...v8.8.12) (2026-06-24)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
+## [8.8.11](https://github.com/ionic-team/ionic-framework/compare/v8.8.10...v8.8.11) (2026-06-17)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
+## [8.8.10](https://github.com/ionic-team/ionic-framework/compare/v8.8.9...v8.8.10) (2026-06-10)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
+## [8.8.9](https://github.com/ionic-team/ionic-framework/compare/v8.8.8...v8.8.9) (2026-06-03)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
+## [8.8.8](https://github.com/ionic-team/ionic-framework/compare/v8.8.7...v8.8.8) (2026-05-20)
+
+
+### Bug Fixes
+
+* **tabs:** preserve query params and fragment from tab button href ([#31154](https://github.com/ionic-team/ionic-framework/issues/31154)) ([0182bba](https://github.com/ionic-team/ionic-framework/commit/0182bba06d6171dd2faf80556fd2131abf03fa93)), closes [#25470](https://github.com/ionic-team/ionic-framework/issues/25470)
+
+
+
+
+
 ## [8.8.7](https://github.com/ionic-team/ionic-framework/compare/v8.8.6...v8.8.7) (2026-05-13)
 
 **Note:** Version bump only for package @ionic/vue
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
index 936cae22048..15adcb4e558 100644
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue",
-  "version": "8.8.7",
+  "version": "8.8.18",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue",
-      "version": "8.8.7",
+      "version": "8.8.18",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.8.7",
+        "@ionic/core": "^8.8.18",
         "@stencil/vue-output-target": "0.10.7",
         "ionicons": "^8.0.13"
       },
@@ -222,12 +222,12 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.8.7",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.7.tgz",
-      "integrity": "sha512-eHfu6yea7tcog4vUzfT//LavH/poh8zI3cgO/CDXvOehdCi9QONPeeXE+PaCBFkMnD5Q+08SFF/7a/IfD0X0mQ==",
+      "version": "8.8.18",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.18.tgz",
+      "integrity": "sha512-QRFqi6gMSTk89FMjtoDx3p6e2dD7mYxqYzS0+Hl+yjxnoWoNFluWKM9rnGEEkdvpY7bF1pt6CI5IwMt+vjYQWg==",
       "license": "MIT",
       "dependencies": {
-        "@stencil/core": "4.43.0",
+        "@stencil/core": "4.43.5",
         "ionicons": "^8.0.13",
         "tslib": "^2.1.0"
       },
@@ -677,9 +677,9 @@
       ]
     },
     "node_modules/@stencil/core": {
-      "version": "4.43.0",
-      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz",
-      "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==",
+      "version": "4.43.5",
+      "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.5.tgz",
+      "integrity": "sha512-cgWD+GeuvJpTe1WQn40p02+BJ2j0j1YJ17GdkF2qKIQ23s2e3Zivq5yISXS3dcuV6oUJFN93jprdk+nk/sq99Q==",
       "license": "MIT",
       "bin": {
         "stencil": "bin/stencil"
@@ -689,20 +689,20 @@
         "npm": ">=7.10.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-darwin-arm64": "4.34.9",
-        "@rollup/rollup-darwin-x64": "4.34.9",
-        "@rollup/rollup-linux-arm64-gnu": "4.34.9",
-        "@rollup/rollup-linux-arm64-musl": "4.34.9",
-        "@rollup/rollup-linux-x64-gnu": "4.34.9",
-        "@rollup/rollup-linux-x64-musl": "4.34.9",
-        "@rollup/rollup-win32-arm64-msvc": "4.34.9",
-        "@rollup/rollup-win32-x64-msvc": "4.34.9"
+        "@rollup/rollup-darwin-arm64": "4.44.0",
+        "@rollup/rollup-darwin-x64": "4.44.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.44.0",
+        "@rollup/rollup-linux-arm64-musl": "4.44.0",
+        "@rollup/rollup-linux-x64-gnu": "4.44.0",
+        "@rollup/rollup-linux-x64-musl": "4.44.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.44.0",
+        "@rollup/rollup-win32-x64-msvc": "4.44.0"
       }
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.9.tgz",
-      "integrity": "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.44.0.tgz",
+      "integrity": "sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA==",
       "cpu": [
         "arm64"
       ],
@@ -713,9 +713,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz",
-      "integrity": "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.44.0.tgz",
+      "integrity": "sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ==",
       "cpu": [
         "x64"
       ],
@@ -726,9 +726,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz",
-      "integrity": "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.44.0.tgz",
+      "integrity": "sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ==",
       "cpu": [
         "arm64"
       ],
@@ -739,9 +739,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz",
-      "integrity": "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.44.0.tgz",
+      "integrity": "sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q==",
       "cpu": [
         "arm64"
       ],
@@ -752,9 +752,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz",
-      "integrity": "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.44.0.tgz",
+      "integrity": "sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw==",
       "cpu": [
         "x64"
       ],
@@ -765,9 +765,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz",
-      "integrity": "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.44.0.tgz",
+      "integrity": "sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA==",
       "cpu": [
         "x64"
       ],
@@ -778,9 +778,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz",
-      "integrity": "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.44.0.tgz",
+      "integrity": "sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w==",
       "cpu": [
         "arm64"
       ],
@@ -791,9 +791,9 @@
       ]
     },
     "node_modules/@stencil/core/node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.34.9",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz",
-      "integrity": "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==",
+      "version": "4.44.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.44.0.tgz",
+      "integrity": "sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ==",
       "cpu": [
         "x64"
       ],
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 4dc63fcd76d..fb746f7272f 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue",
-  "version": "8.8.7",
+  "version": "8.8.18",
   "description": "Vue specific wrapper for @ionic/core",
   "scripts": {
     "eslint": "eslint src",
@@ -68,7 +68,7 @@
     "vue-router": "^4.0.16"
   },
   "dependencies": {
-    "@ionic/core": "^8.8.7",
+    "@ionic/core": "^8.8.18",
     "@stencil/vue-output-target": "0.10.7",
     "ionicons": "^8.0.13"
   },
diff --git a/packages/vue/src/components/IonTabBar.ts b/packages/vue/src/components/IonTabBar.ts
index 30002f4d858..f72c1a30b8f 100644
--- a/packages/vue/src/components/IonTabBar.ts
+++ b/packages/vue/src/components/IonTabBar.ts
@@ -34,8 +34,16 @@ const matchesTab = (pathname: string, href: string | undefined): boolean => {
     return false;
   }
 
+  /**
+   * Compare pathnames only; an href like "/tabs/home?foo=bar#section" must
+   * still match a pathname of "/tabs/home". Strip the fragment first so a
+   * "#frag" containing "?" cannot leak into the pathname.
+   */
+  const hrefPathname = href.split("#")[0].split("?")[0];
   const normalizedHref =
-    href.endsWith("/") && href !== "/" ? href.slice(0, -1) : href;
+    hrefPathname.endsWith("/") && hrefPathname !== "/"
+      ? hrefPathname.slice(0, -1)
+      : hrefPathname;
   return (
     pathname === normalizedHref || pathname.startsWith(normalizedHref + "/")
   );
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index 735a7906974..d6b0b2a5149 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -382,6 +382,7 @@ export const IonFabButton: StencilVueComponent<JSX.IonFabButton> = /*@__PURE__*/
   'show',
   'translucent',
   'type',
+  'form',
   'size',
   'closeIcon',
   'ionFocus',
diff --git a/packages/vue/test/base/src/router/index.ts b/packages/vue/test/base/src/router/index.ts
index e518550fd01..0430b9e5568 100644
--- a/packages/vue/test/base/src/router/index.ts
+++ b/packages/vue/test/base/src/router/index.ts
@@ -165,6 +165,32 @@ const routes: Array<RouteRecordRaw> = [
     path: '/tabs-basic',
     component: () => import('@/views/TabsBasic.vue')
   },
+  {
+    path: '/tabs-search-params/',
+    component: () => import('@/views/tabs-search-params/TabsSearchParams.vue'),
+    children: [
+      {
+        path: '',
+        redirect: '/tabs-search-params/tab1?foo=bar'
+      },
+      {
+        path: 'tab1',
+        component: () => import('@/views/tabs-search-params/Tab1.vue')
+      },
+      {
+        path: 'tab2',
+        component: () => import('@/views/tabs-search-params/Tab2.vue')
+      },
+      {
+        path: 'tab3',
+        component: () => import('@/views/tabs-search-params/Tab3.vue')
+      },
+      {
+        path: 'tab4',
+        component: () => import('@/views/tabs-search-params/Tab4.vue')
+      }
+    ]
+  },
   {
     path: '/tabs-similar-prefixes/',
     component: () => import('@/views/tabs-similar-prefixes/TabsSimilarPrefixes.vue'),
diff --git a/packages/vue/test/base/src/views/Home.vue b/packages/vue/test/base/src/views/Home.vue
index d37ab45bbea..68535e05231 100644
--- a/packages/vue/test/base/src/views/Home.vue
+++ b/packages/vue/test/base/src/views/Home.vue
@@ -53,6 +53,9 @@
         <ion-item router-link="/tabs-similar-prefixes" id="tabs-similar-prefixes">
           <ion-label>Tabs with Similar Route Prefixes</ion-label>
         </ion-item>
+        <ion-item router-link="/tabs-search-params" id="tabs-search-params">
+          <ion-label>Tabs with Search Params on Href</ion-label>
+        </ion-item>
         <ion-item router-link="/lifecycle" id="lifecycle">
           <ion-label>Lifecycle</ion-label>
         </ion-item>
diff --git a/packages/vue/test/base/src/views/tabs-search-params/Tab1.vue b/packages/vue/test/base/src/views/tabs-search-params/Tab1.vue
new file mode 100644
index 00000000000..c64da9d74ea
--- /dev/null
+++ b/packages/vue/test/base/src/views/tabs-search-params/Tab1.vue
@@ -0,0 +1,31 @@
+<template>
+  <ion-page data-pageid="tabs-search-params-tab1">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Tab 1</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <div data-testid="tab1-query">{{ queryString }}</div>
+      <div data-testid="tab1-foo">{{ foo }}</div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { computed, defineComponent } from 'vue';
+import { useRoute } from 'vue-router';
+
+export default defineComponent({
+  components: { IonContent, IonHeader, IonPage, IonTitle, IonToolbar },
+  setup() {
+    const route = useRoute();
+    const queryString = computed(() =>
+      new URLSearchParams(route.query as Record<string, string>).toString()
+    );
+    const foo = computed(() => (route.query.foo as string) ?? '');
+    return { queryString, foo };
+  },
+});
+</script>
diff --git a/packages/vue/test/base/src/views/tabs-search-params/Tab2.vue b/packages/vue/test/base/src/views/tabs-search-params/Tab2.vue
new file mode 100644
index 00000000000..8e03fbd2def
--- /dev/null
+++ b/packages/vue/test/base/src/views/tabs-search-params/Tab2.vue
@@ -0,0 +1,31 @@
+<template>
+  <ion-page data-pageid="tabs-search-params-tab2">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Tab 2</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <div data-testid="tab2-query">{{ queryString }}</div>
+      <div data-testid="tab2-baz">{{ baz }}</div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { computed, defineComponent } from 'vue';
+import { useRoute } from 'vue-router';
+
+export default defineComponent({
+  components: { IonContent, IonHeader, IonPage, IonTitle, IonToolbar },
+  setup() {
+    const route = useRoute();
+    const queryString = computed(() =>
+      new URLSearchParams(route.query as Record<string, string>).toString()
+    );
+    const baz = computed(() => (route.query.baz as string) ?? '');
+    return { queryString, baz };
+  },
+});
+</script>
diff --git a/packages/vue/test/base/src/views/tabs-search-params/Tab3.vue b/packages/vue/test/base/src/views/tabs-search-params/Tab3.vue
new file mode 100644
index 00000000000..6a1e24c4fd5
--- /dev/null
+++ b/packages/vue/test/base/src/views/tabs-search-params/Tab3.vue
@@ -0,0 +1,31 @@
+<template>
+  <ion-page data-pageid="tabs-search-params-tab3">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Tab 3</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <div data-testid="tab3-x">{{ x }}</div>
+      <div data-testid="tab3-y">{{ y }}</div>
+      <div data-testid="tab3-hash">{{ hash }}</div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { computed, defineComponent } from 'vue';
+import { useRoute } from 'vue-router';
+
+export default defineComponent({
+  components: { IonContent, IonHeader, IonPage, IonTitle, IonToolbar },
+  setup() {
+    const route = useRoute();
+    const x = computed(() => (route.query.x as string) ?? '');
+    const y = computed(() => (route.query.y as string) ?? '');
+    const hash = computed(() => route.hash ?? '');
+    return { x, y, hash };
+  },
+});
+</script>
diff --git a/packages/vue/test/base/src/views/tabs-search-params/Tab4.vue b/packages/vue/test/base/src/views/tabs-search-params/Tab4.vue
new file mode 100644
index 00000000000..03270d3163f
--- /dev/null
+++ b/packages/vue/test/base/src/views/tabs-search-params/Tab4.vue
@@ -0,0 +1,27 @@
+<template>
+  <ion-page data-pageid="tabs-search-params-tab4">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Tab 4</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <div data-testid="tab4-q">{{ q }}</div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import { computed, defineComponent } from 'vue';
+import { useRoute } from 'vue-router';
+
+export default defineComponent({
+  components: { IonContent, IonHeader, IonPage, IonTitle, IonToolbar },
+  setup() {
+    const route = useRoute();
+    const q = computed(() => (route.query.q as string) ?? '');
+    return { q };
+  },
+});
+</script>
diff --git a/packages/vue/test/base/src/views/tabs-search-params/TabsSearchParams.vue b/packages/vue/test/base/src/views/tabs-search-params/TabsSearchParams.vue
new file mode 100644
index 00000000000..d550e70a420
--- /dev/null
+++ b/packages/vue/test/base/src/views/tabs-search-params/TabsSearchParams.vue
@@ -0,0 +1,74 @@
+<template>
+  <ion-page data-pageid="tabs-search-params">
+    <ion-content>
+      <ion-tabs id="tabs-search-params">
+        <ion-router-outlet></ion-router-outlet>
+        <ion-tab-bar slot="bottom">
+          <ion-tab-button
+            tab="tab1"
+            href="/tabs-search-params/tab1?foo=bar"
+            data-testid="tab1"
+          >
+            <ion-icon :icon="triangle" />
+            <ion-label>Tab 1</ion-label>
+          </ion-tab-button>
+          <ion-tab-button
+            tab="tab2"
+            href="/tabs-search-params/tab2?baz=qux"
+            data-testid="tab2"
+          >
+            <ion-icon :icon="square" />
+            <ion-label>Tab 2</ion-label>
+          </ion-tab-button>
+          <ion-tab-button
+            tab="tab3"
+            href="/tabs-search-params/tab3?x=1&y=2#section"
+            data-testid="tab3"
+          >
+            <ion-icon :icon="triangle" />
+            <ion-label>Tab 3</ion-label>
+          </ion-tab-button>
+          <ion-tab-button
+            tab="tab4"
+            href="/tabs-search-params/tab4?q=hello%20world"
+            data-testid="tab4"
+          >
+            <ion-icon :icon="square" />
+            <ion-label>Tab 4</ion-label>
+          </ion-tab-button>
+        </ion-tab-bar>
+      </ion-tabs>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import {
+  IonContent,
+  IonIcon,
+  IonLabel,
+  IonPage,
+  IonRouterOutlet,
+  IonTabBar,
+  IonTabButton,
+  IonTabs,
+} from '@ionic/vue';
+import { square, triangle } from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {
+    IonContent,
+    IonIcon,
+    IonLabel,
+    IonPage,
+    IonRouterOutlet,
+    IonTabBar,
+    IonTabButton,
+    IonTabs,
+  },
+  setup() {
+    return { square, triangle };
+  },
+});
+</script>
diff --git a/packages/vue/test/base/tests/e2e/specs/tabs-search-params.cy.js b/packages/vue/test/base/tests/e2e/specs/tabs-search-params.cy.js
new file mode 100644
index 00000000000..03373b45268
--- /dev/null
+++ b/packages/vue/test/base/tests/e2e/specs/tabs-search-params.cy.js
@@ -0,0 +1,83 @@
+/**
+ * Verifies that query params set on an IonTabButton href are preserved when
+ * the tab is activated (first visit, switching tabs, switching back, and
+ * re-clicking the already-active tab).
+ *
+ * @see https://github.com/ionic-team/ionic-framework/issues/25470
+ */
+describe('Tabs: query params on tab button href', () => {
+  it('should preserve query params on first visit to a tab', () => {
+    cy.visit('/tabs-search-params/tab1?foo=bar');
+
+    cy.ionPageVisible('tabs-search-params-tab1');
+    cy.location('pathname').should('eq', '/tabs-search-params/tab1');
+    cy.location('search').should('eq', '?foo=bar');
+    cy.get('[data-testid="tab1-foo"]').should('have.text', 'bar');
+    cy.get('ion-tab-button[data-testid="tab1"]').should('have.class', 'tab-selected');
+  });
+
+  it('should preserve href query params when switching to a tab for the first time', () => {
+    cy.visit('/tabs-search-params/tab1?foo=bar');
+    cy.ionPageVisible('tabs-search-params-tab1');
+
+    cy.get('ion-tab-button[data-testid="tab2"]').click();
+    cy.ionPageVisible('tabs-search-params-tab2');
+
+    cy.location('pathname').should('eq', '/tabs-search-params/tab2');
+    cy.location('search').should('eq', '?baz=qux');
+    cy.get('[data-testid="tab2-baz"]').should('have.text', 'qux');
+    cy.get('ion-tab-button[data-testid="tab2"]').should('have.class', 'tab-selected');
+  });
+
+  it('should preserve query params when switching back to a previously visited tab', () => {
+    cy.visit('/tabs-search-params/tab1?foo=bar');
+    cy.ionPageVisible('tabs-search-params-tab1');
+
+    cy.get('ion-tab-button[data-testid="tab2"]').click();
+    cy.ionPageVisible('tabs-search-params-tab2');
+
+    cy.get('ion-tab-button[data-testid="tab1"]').click();
+    cy.ionPageVisible('tabs-search-params-tab1');
+
+    cy.location('pathname').should('eq', '/tabs-search-params/tab1');
+    cy.location('search').should('eq', '?foo=bar');
+    cy.get('[data-testid="tab1-foo"]').should('have.text', 'bar');
+  });
+
+  it('should preserve query params when re-clicking the already-active tab', () => {
+    cy.visit('/tabs-search-params/tab1?foo=bar');
+    cy.ionPageVisible('tabs-search-params-tab1');
+
+    cy.get('ion-tab-button[data-testid="tab1"]').click();
+
+    cy.location('pathname').should('eq', '/tabs-search-params/tab1');
+    cy.location('search').should('eq', '?foo=bar');
+    cy.get('[data-testid="tab1-foo"]').should('have.text', 'bar');
+  });
+
+  it('should preserve multiple query params and fragment from tab button href', () => {
+    cy.visit('/tabs-search-params/tab1?foo=bar');
+    cy.ionPageVisible('tabs-search-params-tab1');
+
+    cy.get('ion-tab-button[data-testid="tab3"]').click();
+    cy.ionPageVisible('tabs-search-params-tab3');
+
+    cy.location('pathname').should('eq', '/tabs-search-params/tab3');
+    cy.location('search').should('eq', '?x=1&y=2');
+    cy.location('hash').should('eq', '#section');
+    cy.get('[data-testid="tab3-x"]').should('have.text', '1');
+    cy.get('[data-testid="tab3-y"]').should('have.text', '2');
+  });
+
+  it('should preserve URL-encoded query params from tab button href', () => {
+    cy.visit('/tabs-search-params/tab1?foo=bar');
+    cy.ionPageVisible('tabs-search-params-tab1');
+
+    cy.get('ion-tab-button[data-testid="tab4"]').click();
+    cy.ionPageVisible('tabs-search-params-tab4');
+
+    cy.location('pathname').should('eq', '/tabs-search-params/tab4');
+    cy.location('search').should('eq', '?q=hello%20world');
+    cy.get('[data-testid="tab4-q"]').should('have.text', 'hello world');
+  });
+});
diff --git a/renovate.json5 b/renovate.json5
index 8435d337f6c..d50c442adff 100644
--- a/renovate.json5
+++ b/renovate.json5
@@ -38,21 +38,44 @@
     },
     {
       matchDatasources: ["npm"],
-      matchPackagePatterns: ["@playwright/test", "@axe-core/playwright"],
+      matchPackageNames: ["@playwright/test", "@axe-core/playwright", "playwright-core"],
       groupName: "playwright",
       matchFileNames: [
-        "core/package.json"
+        "core/package.json",
+        "core/Dockerfile"
       ],
-      "rangeStrategy": "bump"
+      "rangeStrategy": "bump",
+      /**
+       * The mcr.microsoft.com/playwright Docker image is usually published
+       * about a day after the npm release. Waiting a few days before opening
+       * the PR gives the image time to appear, so the Dockerfile bump has a
+       * valid tag to point at. Both files are driven by the npm datasource
+       * (refer to customManagers below), so they always bump together.
+       *
+       * If the Docker build still fails because the tag does not exist yet,
+       * the image has not been published for this release. To fix it, confirm
+       * the image is available, then re-run the failed CI job. No code change
+       * is needed because the tag is already correct; the registry just needs
+       * time to catch up.
+       */
+      minimumReleaseAge: "3 days"
     },
     {
+      /**
+       * The built-in Docker manager tracks the mcr.microsoft.com/playwright tag
+       * against the container registry, which lags the npm release by about a day.
+       * That lag decouples the Dockerfile from the npm bump: the update either
+       * arrives as its own PR or has to be folded into the grouped PR with a
+       * manual rebase. Disable it and drive the tag from the npm datasource
+       * instead (refer to customManagers below) so the Dockerfile and
+       * core/package.json bump together.
+       */
       matchDatasources: ["docker"],
       matchPackageNames: ["mcr.microsoft.com/playwright"],
-      groupName: "playwright",
       matchFileNames: [
         "core/Dockerfile"
       ],
-      versioning: "semver"
+      enabled: false
     },
     {
       matchPackagePatterns: ["ionicons"],
@@ -107,6 +130,22 @@
       groupName: "node-version-updates"
     }
   ],
+  customManagers: [
+    {
+      /**
+       * Bump the Playwright Docker image tag in core/Dockerfile from the npm
+       * @playwright/test release instead of the container registry. The image
+       * tag mirrors the npm version (for example v1.62.0), so this keeps the
+       * Dockerfile and core/package.json in lockstep within a single PR.
+       */
+      customType: "regex",
+      managerFilePatterns: ["core/Dockerfile"],
+      matchStrings: ["mcr\\.microsoft\\.com/playwright:v(?<currentValue>\\S+)"],
+      depNameTemplate: "@playwright/test",
+      datasourceTemplate: "npm",
+      versioningTemplate: "npm"
+    }
+  ],
   dependencyDashboard: false,
   rebaseWhen: "never",
   schedule: ["every weekday before 11am"],