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 5d4d0c751bd..7a51a5df2d6 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
-    - 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
 
diff --git a/.github/workflows/actions/build-core/action.yml b/.github/workflows/actions/build-core/action.yml
index 8056f964b98..2ac2fd00836 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
-    - 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
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 f12fee784e8..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
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/build.yml b/.github/workflows/build.yml
index f9f01b6a8b7..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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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 ccdc9b996d2..38b60de26dd 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
-      - uses: github/codeql-action/init@v4
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: github/codeql-action/init@f205ea1c3313d32999d8d6a48b4f6530d4437b38 # v4.37.4
         with:
           languages: javascript
-      - uses: github/codeql-action/analyze@v4
+      - uses: github/codeql-action/analyze@f205ea1c3313d32999d8d6a48b4f6530d4437b38 # v4.37.4
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 27d88644bc0..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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - 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 95e579bf4b6..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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - 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 75df447f32e..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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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 497c0d24269..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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - 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 6a44d35a531..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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+    - 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 5f463d1a6e1..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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - 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@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.0
+      - 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 3860e2282b9..20db82cc6ad 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,56 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
 
 
diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md
index fbeb0deac7c..3a5976359e7 100644
--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,51 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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
diff --git a/core/Dockerfile b/core/Dockerfile
index 8dba70a7808..3865b2e3c21 100644
--- a/core/Dockerfile
+++ b/core/Dockerfile
@@ -1,5 +1,5 @@
 # Get Playwright
-FROM mcr.microsoft.com/playwright:v1.61.1
+FROM mcr.microsoft.com/playwright:v1.62.1
 
 # Set the working directory
 WORKDIR /ionic
diff --git a/core/package-lock.json b/core/package-lock.json
index ae012c786e2..35cca54d44f 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "8.8.12",
+  "version": "8.8.16",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "8.8.12",
+      "version": "8.8.16",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.43.5",
@@ -21,7 +21,7 @@
         "@capacitor/status-bar": "^8.0.0",
         "@ionic/eslint-config": "^0.3.0",
         "@ionic/prettier-config": "^2.0.0",
-        "@playwright/test": "^1.61.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.61.1",
+        "playwright-core": "^1.62.1",
         "prettier": "^2.6.1",
         "rollup": "^2.26.4",
         "sass": "^1.33.0",
@@ -629,9 +629,9 @@
       "license": "MIT"
     },
     "node_modules/@capacitor/core": {
-      "version": "8.4.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-8.4.0.tgz",
-      "integrity": "sha512-LrS1xPIrqLtJABBIPDGXxxKmI9OyesrzWw8DiHbxhSC9JoiLUleUAJlX1a0LWIVLRbuY4Szgf9huFeRqYH2SAQ==",
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-8.5.0.tgz",
+      "integrity": "sha512-Ca4krtqH1hothjtBIwf2J2TW7IhYq1ujp8QeItTiJohNsqij8ja2DYYH3DU0l8RmxCWaBAFTGA2TgOgOMCSNsQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -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.61.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.61.1.tgz",
-      "integrity": "sha512-8nKv6+0RJSL9FE4jYOEGXnPeM/Hg12qZpmqzZjRh3qM0Y7c3z1mrOTfFLids72RDQYVh9WpLEfR5WdpNX4fkig==",
+      "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.61.1"
+        "playwright": "1.62.1"
       },
       "bin": {
         "playwright": "cli.js"
       },
       "engines": {
-        "node": ">=18"
+        "node": ">=20"
       }
     },
     "node_modules/@rollup/plugin-node-resolve": {
@@ -3068,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,
@@ -3249,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"
@@ -7944,35 +7959,35 @@
       }
     },
     "node_modules/playwright": {
-      "version": "1.61.1",
-      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.1.tgz",
-      "integrity": "sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==",
+      "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.61.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.61.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.61.1.tgz",
-      "integrity": "sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==",
+      "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 95a61874576..f08af380579 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.8.12",
+  "version": "8.8.16",
   "description": "Base components for Ionic",
   "engines": {
     "node": ">= 16"
@@ -46,7 +46,7 @@
     "@capacitor/status-bar": "^8.0.0",
     "@ionic/eslint-config": "^0.3.0",
     "@ionic/prettier-config": "^2.0.0",
-    "@playwright/test": "^1.61.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.61.1",
+    "playwright-core": "^1.62.1",
     "prettier": "^2.6.1",
     "rollup": "^2.26.4",
     "sass": "^1.33.0",
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 443c04611cf..880f379e25c 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";
@@ -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"`.
          */
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-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-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-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-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-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/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-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-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-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-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-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-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-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/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/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 637fa09bb1e..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/basic/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 9dc5aed80d8..00000000000
Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Safari-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/item/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
new file mode 100644
index 00000000000..b465b40ad93
Binary files /dev/null and b/core/src/components/checkbox/test/item/checkbox.e2e.ts-snapshots/checkbox-in-item-focus-ios-ltr-Mobile-Safari-linux.png differ
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/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/datetime.tsx b/core/src/components/datetime/datetime.tsx
index f36cd66718d..8604f05130b 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';
 
@@ -604,6 +605,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)) {
@@ -1555,10 +1568,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 +1589,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 +1966,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 +2013,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 ff7c93c046e..3d8c8f111f3 100644
--- a/core/src/components/datetime/test/basic/datetime.e2e.ts
+++ b/core/src/components/datetime/test/basic/datetime.e2e.ts
@@ -816,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/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-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/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/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/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/modal/gestures/sheet.ts b/core/src/components/modal/gestures/sheet.ts
index 13dadc34e81..cacf61c5b43 100644
--- a/core/src/components/modal/gestures/sheet.ts
+++ b/core/src/components/modal/gestures/sheet.ts
@@ -299,6 +299,13 @@ export const createSheetGesture = (
   };
 
   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
diff --git a/core/src/components/modal/gestures/swipe-to-close.ts b/core/src/components/modal/gestures/swipe-to-close.ts
index 2b66e7eac24..d04220c88e7 100644
--- a/core/src/components/modal/gestures/swipe-to-close.ts
+++ b/core/src/components/modal/gestures/swipe-to-close.ts
@@ -116,6 +116,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/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 0ea66ce8cfe..b3a728b0ccf 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -1175,8 +1175,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();
     }
   };
@@ -1644,10 +1649,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/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/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/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/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/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/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx
index 9d7c6a7ad06..be838aa9c4a 100644
--- a/core/src/components/refresher/refresher.tsx
+++ b/core/src/components/refresher/refresher.tsx
@@ -299,8 +299,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 +380,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',
@@ -526,7 +548,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/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/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/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 c20935c06b8..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/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Safari-linux.png b/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Safari-linux.png
deleted file mode 100644
index 19bd30c2be0..00000000000
Binary files a/core/src/components/toggle/test/basic/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Safari-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/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/item/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
new file mode 100644
index 00000000000..50bca49651c
Binary files /dev/null and b/core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-in-item-focus-ios-ltr-Mobile-Safari-linux.png differ
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/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/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/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/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..841839a998d 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).
 
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/lerna.json b/lerna.json
index 63bb3cc9998..5ae9f51af5e 100644
--- a/lerna.json
+++ b/lerna.json
@@ -3,5 +3,5 @@
     "core",
     "packages/*"
   ],
-  "version": "8.8.12"
+  "version": "8.8.16"
 }
\ No newline at end of file
diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md
index c9960a1ec1a..2d7764b4698 100644
--- a/packages/angular-server/CHANGELOG.md
+++ b/packages/angular-server/CHANGELOG.md
@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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
diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json
index fdab4b82214..274c4dd0a7b 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.12",
+  "version": "8.8.16",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular-server",
-      "version": "8.8.12",
+      "version": "8.8.16",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.8.12"
+        "@ionic/core": "^8.8.16"
       },
       "devDependencies": {
         "@angular-eslint/eslint-plugin": "^16.0.0",
@@ -1031,9 +1031,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.8.12",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.12.tgz",
-      "integrity": "sha512-nR3Us+NICa4eACvPXb4yUzza1URxQ23ELjjLmK1KRFHlk4DhhlzNrYAad0aibTRFh4toXqvFMTADFPB+JiTTFg==",
+      "version": "8.8.16",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.16.tgz",
+      "integrity": "sha512-4/kdnSw5NgW8iXfPG8YGti/LxGUyDL6bXEV6+qNR/MZcqF+0xQlEgHz7JrxpfN0kDyxJkLjhWJZSKUk07TRLKQ==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.43.5",
@@ -7309,9 +7309,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.8.12",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.12.tgz",
-      "integrity": "sha512-nR3Us+NICa4eACvPXb4yUzza1URxQ23ELjjLmK1KRFHlk4DhhlzNrYAad0aibTRFh4toXqvFMTADFPB+JiTTFg==",
+      "version": "8.8.16",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.16.tgz",
+      "integrity": "sha512-4/kdnSw5NgW8iXfPG8YGti/LxGUyDL6bXEV6+qNR/MZcqF+0xQlEgHz7JrxpfN0kDyxJkLjhWJZSKUk07TRLKQ==",
       "requires": {
         "@stencil/core": "4.43.5",
         "ionicons": "^8.0.13",
diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json
index 284e65fdcd0..6c2333f52ef 100644
--- a/packages/angular-server/package.json
+++ b/packages/angular-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular-server",
-  "version": "8.8.12",
+  "version": "8.8.16",
   "description": "Angular SSR Module for Ionic",
   "keywords": [
     "ionic",
@@ -62,6 +62,6 @@
   },
   "prettier": "@ionic/prettier-config",
   "dependencies": {
-    "@ionic/core": "^8.8.12"
+    "@ionic/core": "^8.8.16"
   }
 }
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 9b1aa98fde2..bbb9cff0506 100644
--- a/packages/angular/CHANGELOG.md
+++ b/packages/angular/CHANGELOG.md
@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
 
 
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/package-lock.json b/packages/angular/package-lock.json
index 60d52f4a89c..a06537e22d3 100644
--- a/packages/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "8.8.12",
+  "version": "8.8.16",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "8.8.12",
+      "version": "8.8.16",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.8.12",
+        "@ionic/core": "^8.8.16",
         "ionicons": "^8.0.13",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.3.0"
@@ -1398,9 +1398,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.8.12",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.12.tgz",
-      "integrity": "sha512-nR3Us+NICa4eACvPXb4yUzza1URxQ23ELjjLmK1KRFHlk4DhhlzNrYAad0aibTRFh4toXqvFMTADFPB+JiTTFg==",
+      "version": "8.8.16",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.16.tgz",
+      "integrity": "sha512-4/kdnSw5NgW8iXfPG8YGti/LxGUyDL6bXEV6+qNR/MZcqF+0xQlEgHz7JrxpfN0kDyxJkLjhWJZSKUk07TRLKQ==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.43.5",
diff --git a/packages/angular/package.json b/packages/angular/package.json
index 7dd0d50a49e..ec8a72251b9 100644
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "8.8.12",
+  "version": "8.8.16",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -48,7 +48,7 @@
     }
   },
   "dependencies": {
-    "@ionic/core": "^8.8.12",
+    "@ionic/core": "^8.8.16",
     "ionicons": "^8.0.13",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.3.0"
diff --git a/packages/docs/CHANGELOG.md b/packages/docs/CHANGELOG.md
index f3d1e7faae6..ce247fb7b72 100644
--- a/packages/docs/CHANGELOG.md
+++ b/packages/docs/CHANGELOG.md
@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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
diff --git a/packages/docs/package-lock.json b/packages/docs/package-lock.json
index 15a64f12078..32f15422d50 100644
--- a/packages/docs/package-lock.json
+++ b/packages/docs/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/docs",
-  "version": "8.8.12",
+  "version": "8.8.16",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/docs",
-      "version": "8.8.12",
+      "version": "8.8.16",
       "license": "MIT"
     }
   }
diff --git a/packages/docs/package.json b/packages/docs/package.json
index da1803635d3..8c3bb1a72f0 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/docs",
-  "version": "8.8.12",
+  "version": "8.8.16",
   "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 214dd4d3095..08654072904 100644
--- a/packages/react-router/CHANGELOG.md
+++ b/packages/react-router/CHANGELOG.md
@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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
diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json
index 29e3893bf51..9a8b409f76b 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.12",
+  "version": "8.8.16",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react-router",
-      "version": "8.8.12",
+      "version": "8.8.16",
       "license": "MIT",
       "dependencies": {
-        "@ionic/react": "^8.8.12",
+        "@ionic/react": "^8.8.16",
         "tslib": "*"
       },
       "devDependencies": {
@@ -238,9 +238,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.8.12",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.12.tgz",
-      "integrity": "sha512-nR3Us+NICa4eACvPXb4yUzza1URxQ23ELjjLmK1KRFHlk4DhhlzNrYAad0aibTRFh4toXqvFMTADFPB+JiTTFg==",
+      "version": "8.8.16",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.16.tgz",
+      "integrity": "sha512-4/kdnSw5NgW8iXfPG8YGti/LxGUyDL6bXEV6+qNR/MZcqF+0xQlEgHz7JrxpfN0kDyxJkLjhWJZSKUk07TRLKQ==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.43.5",
@@ -418,12 +418,12 @@
       }
     },
     "node_modules/@ionic/react": {
-      "version": "8.8.12",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.8.12.tgz",
-      "integrity": "sha512-rTweY7/zf4htD5CgG1ENzBBUyOF4t1dvUA4odAwmLE72qAIy2XfRkGlOgTVAPSXygJZGHt2LXCFTWk1v66APdw==",
+      "version": "8.8.16",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.8.16.tgz",
+      "integrity": "sha512-YSn7qYKuKNt7S1Q/6s+siET3KnZTxnu9RsVgzi0uOAKvcMAJsp/qD35TK8xcPLNCAEiE3LUSgzAFjV0FK6tnTg==",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "8.8.12",
+        "@ionic/core": "8.8.16",
         "ionicons": "^8.0.13",
         "tslib": "*"
       },
@@ -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,9 +4178,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.8.12",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.12.tgz",
-      "integrity": "sha512-nR3Us+NICa4eACvPXb4yUzza1URxQ23ELjjLmK1KRFHlk4DhhlzNrYAad0aibTRFh4toXqvFMTADFPB+JiTTFg==",
+      "version": "8.8.16",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.16.tgz",
+      "integrity": "sha512-4/kdnSw5NgW8iXfPG8YGti/LxGUyDL6bXEV6+qNR/MZcqF+0xQlEgHz7JrxpfN0kDyxJkLjhWJZSKUk07TRLKQ==",
       "requires": {
         "@stencil/core": "4.43.5",
         "ionicons": "^8.0.13",
@@ -4284,11 +4284,11 @@
       "requires": {}
     },
     "@ionic/react": {
-      "version": "8.8.12",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.8.12.tgz",
-      "integrity": "sha512-rTweY7/zf4htD5CgG1ENzBBUyOF4t1dvUA4odAwmLE72qAIy2XfRkGlOgTVAPSXygJZGHt2LXCFTWk1v66APdw==",
+      "version": "8.8.16",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.8.16.tgz",
+      "integrity": "sha512-YSn7qYKuKNt7S1Q/6s+siET3KnZTxnu9RsVgzi0uOAKvcMAJsp/qD35TK8xcPLNCAEiE3LUSgzAFjV0FK6tnTg==",
       "requires": {
-        "@ionic/core": "8.8.12",
+        "@ionic/core": "8.8.16",
         "ionicons": "^8.0.13",
         "tslib": "*"
       }
@@ -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 a2dbd77fabc..998a426850a 100644
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react-router",
-  "version": "8.8.12",
+  "version": "8.8.16",
   "description": "React Router wrapper for @ionic/react",
   "keywords": [
     "ionic",
@@ -36,7 +36,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@ionic/react": "^8.8.12",
+    "@ionic/react": "^8.8.16",
     "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 3e21ed6903b..5a51da792af 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index 89b29526972..c0055a7ea62 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react",
-  "version": "8.8.12",
+  "version": "8.8.16",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react",
-      "version": "8.8.12",
+      "version": "8.8.16",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.8.12",
+        "@ionic/core": "^8.8.16",
         "ionicons": "^8.0.13",
         "tslib": "*"
       },
@@ -736,9 +736,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.8.12",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.12.tgz",
-      "integrity": "sha512-nR3Us+NICa4eACvPXb4yUzza1URxQ23ELjjLmK1KRFHlk4DhhlzNrYAad0aibTRFh4toXqvFMTADFPB+JiTTFg==",
+      "version": "8.8.16",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.16.tgz",
+      "integrity": "sha512-4/kdnSw5NgW8iXfPG8YGti/LxGUyDL6bXEV6+qNR/MZcqF+0xQlEgHz7JrxpfN0kDyxJkLjhWJZSKUk07TRLKQ==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.43.5",
diff --git a/packages/react/package.json b/packages/react/package.json
index 1cddfb41d59..164c8f0eb57 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react",
-  "version": "8.8.12",
+  "version": "8.8.16",
   "description": "React specific wrapper for @ionic/core",
   "keywords": [
     "ionic",
@@ -40,7 +40,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "^8.8.12",
+    "@ionic/core": "^8.8.16",
     "ionicons": "^8.0.13",
     "tslib": "*"
   },
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/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 6c2948a3136..f177e804e2d 100644
--- a/packages/vue-router/CHANGELOG.md
+++ b/packages/vue-router/CHANGELOG.md
@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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
diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json
index 5cbe3ccc28c..45943d3b32c 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.12",
+  "version": "8.8.16",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue-router",
-      "version": "8.8.12",
+      "version": "8.8.16",
       "license": "MIT",
       "dependencies": {
-        "@ionic/vue": "^8.8.12"
+        "@ionic/vue": "^8.8.16"
       },
       "devDependencies": {
         "@ionic/eslint-config": "^0.3.0",
@@ -673,9 +673,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.8.12",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.12.tgz",
-      "integrity": "sha512-nR3Us+NICa4eACvPXb4yUzza1URxQ23ELjjLmK1KRFHlk4DhhlzNrYAad0aibTRFh4toXqvFMTADFPB+JiTTFg==",
+      "version": "8.8.16",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.16.tgz",
+      "integrity": "sha512-4/kdnSw5NgW8iXfPG8YGti/LxGUyDL6bXEV6+qNR/MZcqF+0xQlEgHz7JrxpfN0kDyxJkLjhWJZSKUk07TRLKQ==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.43.5",
@@ -868,12 +868,12 @@
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "8.8.12",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.8.12.tgz",
-      "integrity": "sha512-qvjDS/t9fE5CqeNP2Agba7glr9oMueIk/qTlTPjxWcAsLnqVM/dEikO3we+pGB9yx340mJ99wsEXVOLM+rEY9Q==",
+      "version": "8.8.16",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.8.16.tgz",
+      "integrity": "sha512-y2y2GNl0M1vjWuprH2jxmia3MzUI+5l7nw/n5VjKdslIVBQe4DV/uPSeEuHzbTmCM7DD+TbJm67B9Rx67nD23A==",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "8.8.12",
+        "@ionic/core": "8.8.16",
         "@stencil/vue-output-target": "0.10.7",
         "ionicons": "^8.0.13"
       }
@@ -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,9 +8044,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.8.12",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.12.tgz",
-      "integrity": "sha512-nR3Us+NICa4eACvPXb4yUzza1URxQ23ELjjLmK1KRFHlk4DhhlzNrYAad0aibTRFh4toXqvFMTADFPB+JiTTFg==",
+      "version": "8.8.16",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.16.tgz",
+      "integrity": "sha512-4/kdnSw5NgW8iXfPG8YGti/LxGUyDL6bXEV6+qNR/MZcqF+0xQlEgHz7JrxpfN0kDyxJkLjhWJZSKUk07TRLKQ==",
       "requires": {
         "@stencil/core": "4.43.5",
         "ionicons": "^8.0.13",
@@ -8159,11 +8159,11 @@
       "requires": {}
     },
     "@ionic/vue": {
-      "version": "8.8.12",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.8.12.tgz",
-      "integrity": "sha512-qvjDS/t9fE5CqeNP2Agba7glr9oMueIk/qTlTPjxWcAsLnqVM/dEikO3we+pGB9yx340mJ99wsEXVOLM+rEY9Q==",
+      "version": "8.8.16",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.8.16.tgz",
+      "integrity": "sha512-y2y2GNl0M1vjWuprH2jxmia3MzUI+5l7nw/n5VjKdslIVBQe4DV/uPSeEuHzbTmCM7DD+TbJm67B9Rx67nD23A==",
       "requires": {
-        "@ionic/core": "8.8.12",
+        "@ionic/core": "8.8.16",
         "@stencil/vue-output-target": "0.10.7",
         "ionicons": "^8.0.13"
       }
@@ -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 a304874fcf3..9d2cf897628 100644
--- a/packages/vue-router/package.json
+++ b/packages/vue-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue-router",
-  "version": "8.8.12",
+  "version": "8.8.16",
   "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.12"
+    "@ionic/vue": "^8.8.16"
   },
   "devDependencies": {
     "@ionic/eslint-config": "^0.3.0",
diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
index ccc226aa58b..82da10410bf 100644
--- a/packages/vue/CHANGELOG.md
+++ b/packages/vue/CHANGELOG.md
@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
index 0738c329626..0b1c8319e75 100644
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue",
-  "version": "8.8.12",
+  "version": "8.8.16",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue",
-      "version": "8.8.12",
+      "version": "8.8.16",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.8.12",
+        "@ionic/core": "^8.8.16",
         "@stencil/vue-output-target": "0.10.7",
         "ionicons": "^8.0.13"
       },
@@ -222,9 +222,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.8.12",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.12.tgz",
-      "integrity": "sha512-nR3Us+NICa4eACvPXb4yUzza1URxQ23ELjjLmK1KRFHlk4DhhlzNrYAad0aibTRFh4toXqvFMTADFPB+JiTTFg==",
+      "version": "8.8.16",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.16.tgz",
+      "integrity": "sha512-4/kdnSw5NgW8iXfPG8YGti/LxGUyDL6bXEV6+qNR/MZcqF+0xQlEgHz7JrxpfN0kDyxJkLjhWJZSKUk07TRLKQ==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.43.5",
diff --git a/packages/vue/package.json b/packages/vue/package.json
index 1b7ee0d0597..49552e1d44e 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue",
-  "version": "8.8.12",
+  "version": "8.8.16",
   "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.12",
+    "@ionic/core": "^8.8.16",
     "@stencil/vue-output-target": "0.10.7",
     "ionicons": "^8.0.13"
   },