diff --git a/.github/workflows/actions/build-core-stencil-prerelease/action.yml b/.github/workflows/actions/build-core-stencil-prerelease/action.yml
index 28e0c54d775..686e2e3de75 100644
--- a/.github/workflows/actions/build-core-stencil-prerelease/action.yml
+++ b/.github/workflows/actions/build-core-stencil-prerelease/action.yml
@@ -12,7 +12,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.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 113a1ebe3b7..2ac2fd00836 100644
--- a/.github/workflows/actions/build-core/action.yml
+++ b/.github/workflows/actions/build-core/action.yml
@@ -8,7 +8,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/checkout@9c091bb21b7c1c1d1991bb908d89e4e9dddfe3e0 # v7.0.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/build.yml b/.github/workflows/build.yml
index a3f55890e85..016b0b1a493 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 74f504e7317..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@7188fc363630916deb702c7fdcf4e481b751f97a # v4.37.1
+      - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+      - uses: github/codeql-action/init@f205ea1c3313d32999d8d6a48b4f6530d4437b38 # v4.37.4
         with:
           languages: javascript
-      - uses: github/codeql-action/analyze@7188fc363630916deb702c7fdcf4e481b751f97a # v4.37.1
+      - uses: github/codeql-action/analyze@f205ea1c3313d32999d8d6a48b4f6530d4437b38 # v4.37.4
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 b6014addef1..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@b8dd2d9be0f68b860e7dae5dae7d772984eacd6d # v6.2.0
+    - 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 a2fb4da8736..0d9267a3f99 100644
--- a/.github/workflows/stencil-nightly.yml
+++ b/.github/workflows/stencil-nightly.yml
@@ -31,7 +31,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-core-version: ${{ inputs.npm_release_tag_core || 'nightly' }}
@@ -42,21 +42,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_core || 'nightly' }}
@@ -79,7 +79,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 }}
@@ -107,14 +107,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:
@@ -125,7 +125,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 }}
@@ -143,14 +143,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:
@@ -161,7 +161,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 }}
@@ -179,7 +179,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
     - name: Install Stencil React Output Target
       working-directory: ./packages/react
       run: npm i @stencil/react-output-target@${{ inputs.npm_release_tag_react_output_target || 'latest' }}
@@ -190,7 +190,7 @@ jobs:
     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:
@@ -201,7 +201,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 }}
@@ -223,7 +223,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 996f23da565..cd48dab52b3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.17](https://github.com/ionic-team/ionic-framework/compare/v8.8.16...v8.8.17) (2026-08-05)
+
+
+### Bug Fixes
+
+* **checkbox,radio,toggle:** add missing keyboard focus indicators ([#31295](https://github.com/ionic-team/ionic-framework/issues/31295)) ([2f9c0b7](https://github.com/ionic-team/ionic-framework/commit/2f9c0b7d8fa6371785cfdf1d99857eece4835e4d))
+* **fab-button:** restore submit, reset, and disabled form functionality ([#31249](https://github.com/ionic-team/ionic-framework/issues/31249)) ([93ee380](https://github.com/ionic-team/ionic-framework/commit/93ee38015125619509b9aa844d6f0025be0a71b7)), closes [#18550](https://github.com/ionic-team/ionic-framework/issues/18550)
+* **react-router:** symmetric pathname+search url comparison ([#31153](https://github.com/ionic-team/ionic-framework/issues/31153)) ([ffef25d](https://github.com/ionic-team/ionic-framework/commit/ffef25d2e2597bee5fdb8833d9e50ff9234d74e0)), closes [#31152](https://github.com/ionic-team/ionic-framework/issues/31152) [#31152](https://github.com/ionic-team/ionic-framework/issues/31152) [#25534](https://github.com/ionic-team/ionic-framework/issues/25534)
+* **refresher:** avoid gesture setup after disconnect ([#31316](https://github.com/ionic-team/ionic-framework/issues/31316)) ([d9b877f](https://github.com/ionic-team/ionic-framework/commit/d9b877f6059992808cccec503dbe2a30f6ccdb48)), closes [#31315](https://github.com/ionic-team/ionic-framework/issues/31315)
+* **tab:** retry lazy load after a failed attach ([#31324](https://github.com/ionic-team/ionic-framework/issues/31324)) ([81b52e2](https://github.com/ionic-team/ionic-framework/commit/81b52e25bd8fa55b905da2791d84b381a2db630b))
+
+
+
+
+
+## [8.8.16](https://github.com/ionic-team/ionic-framework/compare/v8.8.15...v8.8.16) (2026-07-29)
+
+
+### Bug Fixes
+
+* **angular:** guard transition against destroyed router outlet ([#31297](https://github.com/ionic-team/ionic-framework/issues/31297)) ([fdef61c](https://github.com/ionic-team/ionic-framework/commit/fdef61cc74285caff0549ba8bdac70cedaaba865)), closes [#31296](https://github.com/ionic-team/ionic-framework/issues/31296)
+* **modal:** keep focus on dialog for cycle sheet modals ([#31293](https://github.com/ionic-team/ionic-framework/issues/31293)) ([b4b2603](https://github.com/ionic-team/ionic-framework/commit/b4b2603210b313fc2f2ee2c88b9112751e24b338))
+* **select:** prevent floating label and placeholder from overlapping when focused ([#31276](https://github.com/ionic-team/ionic-framework/issues/31276)) ([e987009](https://github.com/ionic-team/ionic-framework/commit/e9870091c2f7460a1dc12c4b407ddfde39e1b156)), closes [#30401](https://github.com/ionic-team/ionic-framework/issues/30401)
+
+
+
+
+
 ## [8.8.15](https://github.com/ionic-team/ionic-framework/compare/v8.8.14...v8.8.15) (2026-07-22)
 
 
diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md
index a7596c353cc..0a1cd3100a5 100644
--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.17](https://github.com/ionic-team/ionic-framework/compare/v8.8.16...v8.8.17) (2026-08-05)
+
+
+### Bug Fixes
+
+* **checkbox,radio,toggle:** add missing keyboard focus indicators ([#31295](https://github.com/ionic-team/ionic-framework/issues/31295)) ([2f9c0b7](https://github.com/ionic-team/ionic-framework/commit/2f9c0b7d8fa6371785cfdf1d99857eece4835e4d))
+* **fab-button:** restore submit, reset, and disabled form functionality ([#31249](https://github.com/ionic-team/ionic-framework/issues/31249)) ([93ee380](https://github.com/ionic-team/ionic-framework/commit/93ee38015125619509b9aa844d6f0025be0a71b7)), closes [#18550](https://github.com/ionic-team/ionic-framework/issues/18550)
+* **refresher:** avoid gesture setup after disconnect ([#31316](https://github.com/ionic-team/ionic-framework/issues/31316)) ([d9b877f](https://github.com/ionic-team/ionic-framework/commit/d9b877f6059992808cccec503dbe2a30f6ccdb48)), closes [#31315](https://github.com/ionic-team/ionic-framework/issues/31315)
+* **tab:** retry lazy load after a failed attach ([#31324](https://github.com/ionic-team/ionic-framework/issues/31324)) ([81b52e2](https://github.com/ionic-team/ionic-framework/commit/81b52e25bd8fa55b905da2791d84b381a2db630b))
+
+
+
+
+
+## [8.8.16](https://github.com/ionic-team/ionic-framework/compare/v8.8.15...v8.8.16) (2026-07-29)
+
+
+### Bug Fixes
+
+* **modal:** keep focus on dialog for cycle sheet modals ([#31293](https://github.com/ionic-team/ionic-framework/issues/31293)) ([b4b2603](https://github.com/ionic-team/ionic-framework/commit/b4b2603210b313fc2f2ee2c88b9112751e24b338))
+* **select:** prevent floating label and placeholder from overlapping when focused ([#31276](https://github.com/ionic-team/ionic-framework/issues/31276)) ([e987009](https://github.com/ionic-team/ionic-framework/commit/e9870091c2f7460a1dc12c4b407ddfde39e1b156)), closes [#30401](https://github.com/ionic-team/ionic-framework/issues/30401)
+
+
+
+
+
 ## [8.8.15](https://github.com/ionic-team/ionic-framework/compare/v8.8.14...v8.8.15) (2026-07-22)
 
 
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/api.txt b/core/api.txt
index 1a0c192aa66..17361852da1 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -601,6 +601,7 @@ ion-fab-button,prop,closeIcon,string,close,false,false
 ion-fab-button,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-fab-button,prop,disabled,boolean,false,false,false
 ion-fab-button,prop,download,string | undefined,undefined,false,false
+ion-fab-button,prop,form,HTMLFormElement | string | undefined,undefined,false,false
 ion-fab-button,prop,href,string | undefined,undefined,false,false
 ion-fab-button,prop,mode,"ios" | "md",undefined,false,false
 ion-fab-button,prop,rel,string | undefined,undefined,false,false
diff --git a/core/package-lock.json b/core/package-lock.json
index 42a9c1d1da0..667765383ed 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "8.8.15",
+  "version": "8.8.17",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "8.8.15",
+      "version": "8.8.17",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "^4.43.5",
@@ -23,7 +23,7 @@
         "@eslint/js": "^9.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": "^1.3.2",
@@ -34,7 +34,7 @@
         "@types/node": "^16.18.126",
         "@typescript-eslint/eslint-plugin": "^8.0.0",
         "@typescript-eslint/parser": "^8.0.0",
-        "chalk": "^5.3.0",
+        "chalk": "^6.0.0",
         "clean-css-cli": "^5.6.1",
         "domino": "^2.1.6",
         "eslint": "^9.0.0",
@@ -45,7 +45,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",
@@ -1637,19 +1637,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": {
@@ -3277,6 +3277,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,
@@ -3496,11 +3509,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"
@@ -9205,35 +9220,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/possible-typed-array-names": {
diff --git a/core/package.json b/core/package.json
index 5a18338f686..9bb170dbea3 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.8.15",
+  "version": "8.8.17",
   "description": "Base components for Ionic",
   "engines": {
     "node": ">= 16"
@@ -80,7 +80,7 @@
     "@eslint/js": "^9.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": "^1.3.2",
@@ -91,7 +91,7 @@
     "@types/node": "^16.18.126",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
-    "chalk": "^5.3.0",
+    "chalk": "^6.0.0",
     "clean-css-cli": "^5.6.1",
     "domino": "^2.1.6",
     "eslint": "^9.0.0",
@@ -102,7 +102,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 e9af366e632..a05658bf241 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1147,6 +1147,10 @@ export namespace Components {
           * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
          */
         "download": string | undefined;
+        /**
+          * The HTML form element or form element id. Used to submit a form when the button is not a child of the form.
+         */
+        "form"?: string | HTMLFormElement;
         /**
           * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
          */
@@ -6275,6 +6279,10 @@ declare namespace LocalJSX {
           * This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
          */
         "download"?: string | undefined;
+        /**
+          * The HTML form element or form element id. Used to submit a form when the button is not a child of the form.
+         */
+        "form"?: string | HTMLFormElement;
         /**
           * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
          */
@@ -9157,6 +9165,7 @@ declare namespace LocalJSX {
         "show": boolean;
         "translucent": boolean;
         "type": 'submit' | 'reset' | 'button';
+        "form": string | HTMLFormElement;
         "size": 'small';
         "closeIcon": string;
     }
diff --git a/core/src/components/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 63cfb58a6d3..fea53fe3d0a 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 1dff67d6512..4d9419a3bd5 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 57f6cbfed1b..e8c4b4d1989 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 7c7fad2aba5..5521188a4d2 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 ffa93bf0a91..ea61ad62798 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 b78b1518281..05671bfa723 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/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/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx
index 2a7a4a6198a..ecb1f57c784 100755
--- a/core/src/components/fab-button/fab-button.tsx
+++ b/core/src/components/fab-button/fab-button.tsx
@@ -1,8 +1,9 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
-import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
+import { Component, Element, Event, Host, Prop, Watch, h } from '@stencil/core';
 import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
-import { inheritAriaAttributes } from '@utils/helpers';
+import { inheritAriaAttributes, hasShadowDom } from '@utils/helpers';
 import type { Attributes } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
 import { createColorClasses, hostContext, openURL } from '@utils/theme';
 import { close } from 'ionicons/icons';
 
@@ -26,6 +27,8 @@ import type { RouterDirection } from '../router/utils/interface';
 })
 export class FabButton implements ComponentInterface, AnchorInterface, ButtonInterface {
   private fab: HTMLIonFabElement | null = null;
+  private formButtonEl: HTMLButtonElement | null = null;
+  private formEl: HTMLFormElement | null = null;
   private inheritedAttributes: Attributes = {};
 
   @Element() el!: HTMLElement;
@@ -46,6 +49,13 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
    * If `true`, the user cannot interact with the fab button.
    */
   @Prop() disabled = false;
+  @Watch('disabled')
+  disabledChanged() {
+    const { disabled } = this;
+    if (this.formButtonEl) {
+      this.formButtonEl.disabled = disabled;
+    }
+  }
 
   /**
    * This attribute instructs browsers to download a URL instead of navigating to
@@ -103,6 +113,11 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
    */
   @Prop() type: 'submit' | 'reset' | 'button' = 'button';
 
+  /**
+   * The HTML form element or form element id. Used to submit a form when the button is not a child of the form.
+   */
+  @Prop() form?: string | HTMLFormElement;
+
   /**
    * The size of the button. Set this to `small` in order to have a mini fab button.
    */
@@ -137,27 +152,96 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
     this.ionBlur.emit();
   };
 
-  private onClick = () => {
-    const { fab } = this;
-    if (!fab) {
-      return;
+  private onClick = (ev: Event) => {
+    const { el, fab } = this;
+    if (this.type !== 'button' && hasShadowDom(el)) {
+      this.submitForm(ev);
+    }
+    if (fab) {
+      fab.toggle();
     }
-
-    fab.toggle();
   };
 
+  /**
+   * The native button rendered inside `ion-fab-button` is in the Shadow DOM and
+   * does not participate in form submission, so a hidden native button is added
+   * to the associated form and clicked instead.
+   */
+  private renderHiddenButton() {
+    const formEl = (this.formEl = this.findForm());
+    if (formEl) {
+      const { formButtonEl } = this;
+
+      // Reuse the existing hidden button, syncing values that changed since it was created.
+      if (formButtonEl !== null && formEl.contains(formButtonEl)) {
+        formButtonEl.disabled = this.disabled;
+        formButtonEl.type = this.type;
+        return;
+      }
+
+      const newFormButtonEl = (this.formButtonEl = document.createElement('button'));
+      newFormButtonEl.type = this.type;
+      newFormButtonEl.style.display = 'none';
+      newFormButtonEl.disabled = this.disabled;
+      formEl.appendChild(newFormButtonEl);
+    }
+  }
+
+  // TODO(FW-7663): share the hidden button and form lookup with ion-button
+  private findForm(): HTMLFormElement | null {
+    const { form } = this;
+    if (form instanceof HTMLFormElement) {
+      return form;
+    }
+    if (typeof form === 'string') {
+      const el: HTMLElement | null = document.getElementById(form);
+      if (el) {
+        if (el instanceof HTMLFormElement) {
+          return el;
+        } else {
+          printIonWarning(
+            `[ion-fab-button] - Form with selector: "#${form}" could not be found. Verify that the id is attached to a <form> element.`,
+            this.el
+          );
+          return null;
+        }
+      } else {
+        printIonWarning(
+          `[ion-fab-button] - Form with selector: "#${form}" could not be found. Verify that the id is correct and the form is rendered in the DOM.`,
+          this.el
+        );
+        return null;
+      }
+    }
+    if (form !== undefined) {
+      printIonWarning(
+        `[ion-fab-button] - The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.`,
+        this.el
+      );
+      return null;
+    }
+    return this.el.closest('form');
+  }
+
+  private submitForm(ev: Event) {
+    if (this.formEl && this.formButtonEl) {
+      ev.preventDefault();
+      this.formButtonEl.click();
+    }
+  }
+
   componentWillLoad() {
     this.inheritedAttributes = inheritAriaAttributes(this.el);
   }
 
   render() {
-    const { el, disabled, color, href, activated, show, translucent, size, inheritedAttributes } = this;
+    const { el, disabled, color, href, activated, show, translucent, size, inheritedAttributes, type } = this;
     const inList = hostContext('ion-fab-list', el);
     const mode = getIonMode(this);
     const TagType = href === undefined ? 'button' : ('a' as any);
     const attrs =
       TagType === 'button'
-        ? { type: this.type }
+        ? { type }
         : {
             download: this.download,
             href,
@@ -165,6 +249,14 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
             target: this.target,
           };
 
+    /**
+     * The hidden button is created during render so that setting `type` or
+     * `form` after the component loads still adds it to the form.
+     */
+    if (type !== 'button') {
+      this.renderHiddenButton();
+    }
+
     return (
       <Host
         onClick={this.onClick}
@@ -189,7 +281,7 @@ export class FabButton implements ComponentInterface, AnchorInterface, ButtonInt
           disabled={disabled}
           onFocus={this.onFocus}
           onBlur={this.onBlur}
-          onClick={(ev: Event) => openURL(href, ev, this.routerDirection, this.routerAnimation)}
+          onClick={(ev: Event) => type === 'button' && openURL(href, ev, this.routerDirection, this.routerAnimation)}
           {...inheritedAttributes}
         >
           <ion-icon
diff --git a/core/src/components/fab-button/test/form/fab-button.e2e.ts b/core/src/components/fab-button/test/form/fab-button.e2e.ts
new file mode 100644
index 00000000000..62559b0cb29
--- /dev/null
+++ b/core/src/components/fab-button/test/form/fab-button.e2e.ts
@@ -0,0 +1,328 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * Form submission does not vary across modes or directions.
+ */
+configs({ directions: ['ltr'], modes: ['ios'] }).forEach(({ title, config }) => {
+  test.describe(title('fab-button: form'), () => {
+    test.describe('fab-button: submit functionality', () => {
+      test('should submit the closest form', async ({ page }, testInfo) => {
+        testInfo.annotations.push({
+          type: 'issue',
+          description: 'https://github.com/ionic-team/ionic-framework/issues/18550',
+        });
+
+        await page.setContent(
+          `
+          <form>
+            <ion-fab-button type="submit">Submit</ion-fab-button>
+          </form>
+        `,
+          config
+        );
+
+        const submitEvent = await page.spyOnEvent('submit');
+
+        await page.click('ion-fab-button');
+
+        expect(submitEvent).toHaveReceivedEvent();
+      });
+
+      test('should submit the form by id', async ({ page }) => {
+        await page.setContent(
+          `
+          <form id="myForm"></form>
+          <ion-fab-button form="myForm" type="submit">Submit</ion-fab-button>
+        `,
+          config
+        );
+
+        const submitEvent = await page.spyOnEvent('submit');
+
+        await page.click('ion-fab-button');
+
+        expect(submitEvent).toHaveReceivedEvent();
+      });
+
+      test('should submit the form by reference', async ({ page }) => {
+        await page.setContent(
+          `
+          <form></form>
+          <ion-fab-button type="submit">Submit</ion-fab-button>
+          <script>
+            const form = document.querySelector('form');
+            const button = document.querySelector('ion-fab-button');
+            button.form = form;
+          </script>
+        `,
+          config
+        );
+
+        const submitEvent = await page.spyOnEvent('submit');
+
+        await page.click('ion-fab-button');
+
+        expect(submitEvent).toHaveReceivedEvent();
+      });
+
+      test('should submit the closest form by pressing the `enter` key on a form input', async ({ page }) => {
+        /**
+         * Two inputs are used because a single-field form with no submit button
+         * submits implicitly on "Enter", which would pass without the hidden button.
+         */
+        await page.setContent(
+          `
+          <form>
+            <input type="text" />
+            <input type="text" />
+            <ion-fab-button type="submit">Submit</ion-fab-button>
+          </form>
+        `,
+          config
+        );
+
+        const submitEvent = await page.spyOnEvent('submit');
+
+        await page.press('input', 'Enter');
+
+        expect(submitEvent).toHaveReceivedEvent();
+      });
+
+      test('should not submit the closest form when button is disabled', async ({ page }) => {
+        await page.setContent(
+          `
+          <form>
+            <input type="text" />
+            <ion-fab-button type="submit" disabled>Submit</ion-fab-button>
+          </form>
+        `,
+          config
+        );
+
+        const submitEvent = await page.spyOnEvent('submit');
+
+        await page.press('input', 'Enter');
+
+        expect(submitEvent).not.toHaveReceivedEvent();
+      });
+
+      test('should submit the form by id when form is set async', async ({ page }) => {
+        await page.setContent(
+          `
+          <form id="myForm"></form>
+          <ion-fab-button type="submit">Submit</ion-fab-button>
+        `,
+          config
+        );
+
+        const fabButton = page.locator('ion-fab-button');
+        await fabButton.evaluate((el: HTMLIonFabButtonElement) => (el.form = 'myForm'));
+        await page.waitForChanges();
+
+        const submitEvent = await page.spyOnEvent('submit');
+
+        await page.click('ion-fab-button');
+
+        expect(submitEvent).toHaveReceivedEvent();
+      });
+
+      test('should not submit the form after disabled is set async', async ({ page }) => {
+        /**
+         * A single input is used so the browser attempts implicit submission on
+         * "Enter", which is only suppressed when the hidden button is disabled.
+         */
+        await page.setContent(
+          `
+          <form>
+            <input type="text" />
+            <ion-fab-button type="submit">Submit</ion-fab-button>
+          </form>
+        `,
+          config
+        );
+
+        const fabButton = page.locator('ion-fab-button');
+        await fabButton.evaluate((el: HTMLIonFabButtonElement) => (el.disabled = true));
+        await page.waitForChanges();
+
+        const submitEvent = await page.spyOnEvent('submit');
+
+        await page.press('input', 'Enter');
+
+        expect(submitEvent).not.toHaveReceivedEvent();
+      });
+
+      test('should not submit the closest form when type is the default', async ({ page }) => {
+        await page.setContent(
+          `
+          <form>
+            <input type="text" />
+            <ion-fab-button>Click</ion-fab-button>
+          </form>
+        `,
+          config
+        );
+
+        const submitEvent = await page.spyOnEvent('submit');
+
+        await page.click('ion-fab-button');
+
+        expect(submitEvent).not.toHaveReceivedEvent();
+      });
+
+      test('should submit the closest form and toggle the fab', async ({ page }) => {
+        await page.setContent(
+          `
+          <form onsubmit="return false">
+            <ion-fab>
+              <ion-fab-button type="submit">Submit</ion-fab-button>
+              <ion-fab-list side="top">
+                <ion-fab-button>Item</ion-fab-button>
+              </ion-fab-list>
+            </ion-fab>
+          </form>
+        `,
+          config
+        );
+
+        const submitEvent = await page.spyOnEvent('submit');
+
+        await page.click('ion-fab > ion-fab-button');
+
+        expect(submitEvent).toHaveReceivedEvent();
+        await expect(page.locator('ion-fab')).toHaveJSProperty('activated', true);
+      });
+
+      test('should submit the form when href is also set', async ({ page }) => {
+        await page.setContent(
+          `
+          <form onsubmit="return false">
+            <ion-fab-button href="#navigated" type="submit">Submit</ion-fab-button>
+          </form>
+        `,
+          config
+        );
+
+        const submitEvent = await page.spyOnEvent('submit');
+
+        await page.click('ion-fab-button');
+
+        expect(submitEvent).toHaveReceivedEvent();
+        expect(await page.evaluate(() => window.location.hash)).not.toBe('#navigated');
+      });
+    });
+
+    test.describe('fab-button: reset functionality', () => {
+      test('should reset the form', async ({ page }) => {
+        await page.setContent(
+          `
+          <form>
+            <input type="text" value="initial" />
+            <ion-fab-button type="reset">Reset</ion-fab-button>
+          </form>
+        `,
+          config
+        );
+
+        const input = page.locator('input');
+        await input.fill('changed');
+        expect(await input.inputValue()).toBe('changed');
+
+        await page.click('ion-fab-button');
+
+        expect(await input.inputValue()).toBe('initial');
+      });
+
+      test('should reset the form after type is changed from submit to reset', async ({ page }) => {
+        await page.setContent(
+          `
+          <form>
+            <input type="text" value="initial" />
+            <input type="text" />
+            <ion-fab-button type="submit">Submit</ion-fab-button>
+          </form>
+        `,
+          config
+        );
+
+        const fabButton = page.locator('ion-fab-button');
+        await fabButton.evaluate((el: HTMLIonFabButtonElement) => (el.type = 'reset'));
+        await page.waitForChanges();
+
+        const submitEvent = await page.spyOnEvent('submit');
+
+        const input = page.locator('input').first();
+        await input.fill('changed');
+
+        await page.click('ion-fab-button');
+
+        expect(await input.inputValue()).toBe('initial');
+        expect(submitEvent).not.toHaveReceivedEvent();
+      });
+    });
+  });
+
+  test.describe(title('fab-button: form warnings'), () => {
+    test('form is a string selector', async ({ page }) => {
+      const logs: string[] = [];
+
+      page.on('console', (msg) => {
+        if (msg.type() === 'warning') {
+          logs.push(msg.text());
+        }
+      });
+
+      await page.setContent(`<ion-fab-button type="submit" form="missingForm">Submit</ion-fab-button>`, config);
+
+      expect(logs.length).toBe(1);
+      expect(logs[0]).toContain(
+        '[Ionic Warning]: [ion-fab-button] - Form with selector: "#missingForm" could not be found. Verify that the id is correct and the form is rendered in the DOM.'
+      );
+    });
+
+    test('form id does not belong to a form element', async ({ page }) => {
+      const logs: string[] = [];
+
+      page.on('console', (msg) => {
+        if (msg.type() === 'warning') {
+          logs.push(msg.text());
+        }
+      });
+
+      await page.setContent(
+        `
+        <div id="notAForm"></div>
+        <ion-fab-button type="submit" form="notAForm">Submit</ion-fab-button>
+      `,
+        config
+      );
+
+      expect(logs.length).toBe(1);
+      expect(logs[0]).toContain(
+        '[Ionic Warning]: [ion-fab-button] - Form with selector: "#notAForm" could not be found. Verify that the id is attached to a <form> element.'
+      );
+    });
+
+    test('form is an element reference', async ({ page }) => {
+      const logs: string[] = [];
+
+      page.on('console', (msg) => {
+        if (msg.type() === 'warning') {
+          logs.push(msg.text());
+        }
+      });
+
+      await page.setContent(`<ion-fab-button type="submit">Submit</ion-fab-button>`, config);
+
+      const fabButton = page.locator('ion-fab-button');
+      await fabButton.evaluate((el: HTMLIonFabButtonElement) => ((el as any).form = document.createElement('div')));
+      await page.waitForChanges();
+
+      expect(logs.length).toBe(1);
+      expect(logs[0]).toContain(
+        '[Ionic Warning]: [ion-fab-button] - The provided "form" element is invalid. Verify that the form is a HTMLFormElement and rendered in the DOM.'
+      );
+    });
+  });
+});
diff --git a/core/src/components/fab-button/test/form/fab-button.spec.ts b/core/src/components/fab-button/test/form/fab-button.spec.ts
new file mode 100644
index 00000000000..4d53161a5fa
--- /dev/null
+++ b/core/src/components/fab-button/test/form/fab-button.spec.ts
@@ -0,0 +1,60 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import { FabButton } from '../../fab-button';
+
+describe('FabButton: Hidden Form Button', () => {
+  it('should not add multiple buttons to the form on re-render', async () => {
+    const page = await newSpecPage({
+      components: [FabButton],
+      html: `
+        <form id="my-form"></form>
+        <ion-fab-button form="my-form" type="submit">Submit</ion-fab-button>
+      `,
+    });
+
+    const getButtons = () => {
+      return page.body.querySelectorAll('form button');
+    };
+
+    const fabButton = page.body.querySelector('ion-fab-button')!;
+
+    await page.waitForChanges();
+
+    expect(getButtons().length).toEqual(1);
+
+    // Re-render the component
+    fabButton.color = 'danger';
+    await page.waitForChanges();
+
+    expect(getButtons().length).toEqual(1);
+  });
+
+  it('should sync the type and disabled state to the hidden button', async () => {
+    const page = await newSpecPage({
+      components: [FabButton],
+      html: `
+        <form id="my-form"></form>
+        <ion-fab-button form="my-form" type="submit">Submit</ion-fab-button>
+      `,
+    });
+
+    const getHiddenButton = () => {
+      return page.body.querySelector<HTMLButtonElement>('form button')!;
+    };
+
+    const fabButton = page.body.querySelector('ion-fab-button')!;
+
+    await page.waitForChanges();
+
+    expect(getHiddenButton().type).toEqual('submit');
+    expect(getHiddenButton().disabled).toEqual(false);
+
+    fabButton.type = 'reset';
+    fabButton.disabled = true;
+    await page.waitForChanges();
+
+    expect(page.body.querySelectorAll('form button').length).toEqual(1);
+    expect(getHiddenButton().type).toEqual('reset');
+    expect(getHiddenButton().disabled).toEqual(true);
+  });
+});
diff --git a/core/src/components/fab-button/test/form/index.html b/core/src/components/fab-button/test/form/index.html
new file mode 100644
index 00000000000..652f986129a
--- /dev/null
+++ b/core/src/components/fab-button/test/form/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>FAB Button - Form Submit</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>FAB Button - Form Submit</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-content class="ion-padding" id="content">
+        <p>The FAB button below is inside the form. Clicking it should submit the form.</p>
+        <form onsubmit="handleSubmit(event)">
+          <ion-list>
+            <ion-item>
+              <ion-input label="Name" name="name" required placeholder="Enter name"></ion-input>
+            </ion-item>
+          </ion-list>
+
+          <ion-fab-button type="submit">
+            <ion-icon name="cloud-upload-outline"></ion-icon>
+          </ion-fab-button>
+        </form>
+
+        <br /><br />
+
+        <p>The FAB button below is outside the form but linked by id. Clicking it should also submit the form.</p>
+        <form id="outside-form" onsubmit="handleSubmit(event)">
+          <ion-list>
+            <ion-item>
+              <ion-input label="Email" name="email" type="email" required placeholder="Enter email"></ion-input>
+            </ion-item>
+          </ion-list>
+        </form>
+
+        <ion-fab-button form="outside-form" type="submit">
+          <ion-icon name="checkmark-outline"></ion-icon>
+        </ion-fab-button>
+
+        <p>
+          The fixed FAB below submits the form above it. A fixed FAB has to be a direct child of
+          <code>ion-content</code> for <code>slot="fixed"</code> to apply, so it cannot be nested in the form and needs
+          <code>form</code> to target it.
+        </p>
+
+        <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+          <ion-fab-button form="outside-form" type="submit">
+            <ion-icon name="send-outline"></ion-icon>
+          </ion-fab-button>
+        </ion-fab>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      function handleSubmit(event) {
+        event.preventDefault();
+        console.log('Form submitted!', event.target);
+        alert('Form submitted! Check console for details.');
+      }
+    </script>
+  </body>
+</html>
diff --git a/core/src/components/input/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/modal.tsx b/core/src/components/modal/modal.tsx
index 84ac8181d15..fbf8a6f3feb 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -1189,13 +1189,10 @@ export class Modal implements ComponentInterface, OverlayInterface {
   private onModalFocus = (ev: FocusEvent) => {
     const { dragHandleEl, el } = this;
     /**
-     * Focus events from inside the shadow DOM are retargeted to the host, so
-     * `ev.target === el` is also true when a shadow child (e.g. the dialog
-     * wrapper that present() focuses for screen readers) receives focus. Use
-     * the shadow root's activeElement to tell the two apart: it is `null` only
-     * when the host itself was focused directly (e.g. tabbing into the modal).
-     * Only then do we redirect to the handle, so the wrapper focus set on
-     * present() is left intact.
+     * 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();
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 9268c66b247..891390ee497 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 50b33bdab7a..8941f0d35d9 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -1351,7 +1351,8 @@ export class Select implements ComponentInterface {
      * TODO(FW-5592): Remove hasStartEndSlots condition
      */
     const labelShouldFloat =
-      labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || isExpanded || hasStartEndSlots));
+      labelPlacement === 'stacked' ||
+      (labelPlacement === 'floating' && (hasValue || hasFocus || isExpanded || hasStartEndSlots));
 
     return (
       <Host
diff --git a/core/src/components/select/test/a11y/select.e2e.ts-snapshots/select-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/a11y/select.e2e.ts-snapshots/select-scale-ios-ltr-Mobile-Chrome-linux.png
index e17dc91dc2f..849cd105d5e 100644
Binary files a/core/src/components/select/test/a11y/select.e2e.ts-snapshots/select-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/a11y/select.e2e.ts-snapshots/select-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts b/core/src/components/select/test/label/select.e2e.ts
index 4999268e4f7..2b7fb3c4b32 100644
--- a/core/src/components/select/test/label/select.e2e.ts
+++ b/core/src/components/select/test/label/select.e2e.ts
@@ -377,3 +377,27 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     });
   });
 });
+
+/**
+ * This behavior does not vary across modes/directions
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('select: floating label focus'), () => {
+    test('label should appear on top of the select when it is focused, has a placeholder, and no value', async ({
+      page,
+    }) => {
+      await page.setContent(
+        `
+           <ion-select label="Label" label-placement="floating" placeholder="Placeholder">
+             <ion-select-option value="apples">Apples</ion-select-option>
+           </ion-select>
+         `,
+        config
+      );
+
+      const select = page.locator('ion-select');
+      await page.locator('ion-select button').focus();
+      await expect(select).toHaveScreenshot(screenshot(`select-label-floating-focus-no-value-placeholder`));
+    });
+  });
+});
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 00000000000..1ddc9fb1414
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 00000000000..dd6ca99b04f
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 00000000000..89bb6f642ba
Binary files /dev/null and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-focus-no-value-placeholder-md-ltr-Mobile-Safari-linux.png differ
diff --git a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-ltr-Mobile-Firefox-linux.png
index bf27720310d..b24ece9af8c 100644
Binary files a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-rtl-Mobile-Firefox-linux.png
index 0b1c9e79903..67554fdede3 100644
Binary files a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-ios-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-ltr-Mobile-Firefox-linux.png
index 1ddfeeee780..84d7da30b07 100644
Binary files a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-rtl-Mobile-Firefox-linux.png
index f3073946b4f..049560bcf81 100644
Binary files a/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/spinner/test/basic/spinner.e2e.ts-snapshots/spinner-basic-diff-md-rtl-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/spinner/test/color/spinner.e2e.ts-snapshots/spinner-color-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/spinner/test/color/spinner.e2e.ts-snapshots/spinner-color-diff-md-ltr-Mobile-Firefox-linux.png
index 0a39da496db..278b02ffcd3 100644
Binary files a/core/src/components/spinner/test/color/spinner.e2e.ts-snapshots/spinner-color-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/spinner/test/color/spinner.e2e.ts-snapshots/spinner-color-diff-md-ltr-Mobile-Firefox-linux.png differ
diff --git a/core/src/components/tab/tab.tsx b/core/src/components/tab/tab.tsx
index a1f6be57a06..e4465bc3ec1 100644
--- a/core/src/components/tab/tab.tsx
+++ b/core/src/components/tab/tab.tsx
@@ -11,7 +11,8 @@ import type { ComponentRef, FrameworkDelegate } from '../../interface';
   shadow: true,
 })
 export class Tab implements ComponentInterface {
-  private loaded = false;
+  private loadPromise?: Promise<HTMLElement | undefined>;
+
   @Element() el!: HTMLIonTabElement;
 
   /** @internal */
@@ -57,20 +58,31 @@ export class Tab implements ComponentInterface {
   @Watch('active')
   changeActive(isActive: boolean) {
     if (isActive) {
-      this.prepareLazyLoaded();
+      this.prepareLazyLoaded().catch((e) => {
+        printIonError('[ion-tab] - Exception in prepareLazyLoaded:', e);
+      });
     }
   }
 
   private prepareLazyLoaded(): Promise<HTMLElement | undefined> {
-    if (!this.loaded && this.component != null) {
-      this.loaded = true;
-      try {
-        return attachComponent(this.delegate, this.el, this.component, ['ion-page']);
-      } catch (e) {
-        printIonError('[ion-tab] - Exception in prepareLazyLoaded:', e);
-      }
+    if (this.component == null) {
+      return Promise.resolve(undefined);
     }
-    return Promise.resolve(undefined);
+
+    /**
+     * The attach is cached so that concurrent activations share a single
+     * attempt and later activations reuse the result. The cache is cleared
+     * only when the attach fails, so a tab whose component failed to load
+     * can be retried the next time it is activated.
+     */
+    if (this.loadPromise === undefined) {
+      this.loadPromise = attachComponent(this.delegate, this.el, this.component, ['ion-page']).catch((e) => {
+        this.loadPromise = undefined;
+        throw e;
+      });
+    }
+
+    return this.loadPromise;
   }
 
   render() {
diff --git a/core/src/components/tab/test/tab.spec.ts b/core/src/components/tab/test/tab.spec.ts
new file mode 100644
index 00000000000..d08791a8a25
--- /dev/null
+++ b/core/src/components/tab/test/tab.spec.ts
@@ -0,0 +1,185 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import type { FrameworkDelegate } from '../../../interface';
+import { Tab } from '../tab';
+
+const mockDelegate = (attachViewToDom: FrameworkDelegate['attachViewToDom']): FrameworkDelegate => ({
+  attachViewToDom,
+  removeViewFromDom: jest.fn().mockResolvedValue(undefined),
+});
+
+const createTab = async (html = '<ion-tab tab="home" component="ion-content"></ion-tab>') => {
+  const page = await newSpecPage({
+    components: [Tab],
+    html,
+  });
+
+  return { page, tabEl: page.body.querySelector<HTMLIonTabElement>('ion-tab')! };
+};
+
+describe('ion-tab: lazy loading', () => {
+  it('should attach the component only once across multiple setActive calls', async () => {
+    const { tabEl } = await createTab();
+    const attachViewToDom = jest.fn().mockResolvedValue(document.createElement('div'));
+    tabEl.delegate = mockDelegate(attachViewToDom);
+
+    await tabEl.setActive();
+    await tabEl.setActive();
+
+    expect(attachViewToDom).toHaveBeenCalledTimes(1);
+  });
+
+  it('should share one attach attempt across concurrent setActive calls', async () => {
+    const { tabEl } = await createTab();
+    const attachViewToDom = jest.fn().mockResolvedValue(document.createElement('div'));
+    tabEl.delegate = mockDelegate(attachViewToDom);
+
+    await Promise.all([tabEl.setActive(), tabEl.setActive()]);
+
+    expect(attachViewToDom).toHaveBeenCalledTimes(1);
+  });
+
+  it('should make a later setActive wait for the in-flight attach', async () => {
+    const { tabEl } = await createTab();
+    let resolveAttach!: (el: HTMLElement) => void;
+    const attachViewToDom = jest.fn(() => new Promise<HTMLElement>((resolve) => (resolveAttach = resolve)));
+    tabEl.delegate = mockDelegate(attachViewToDom);
+
+    const first = tabEl.setActive();
+    const second = tabEl.setActive();
+    let secondSettled = false;
+    second.then(() => (secondSettled = true));
+
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    expect(secondSettled).toBe(false);
+
+    resolveAttach(document.createElement('div'));
+    await Promise.all([first, second]);
+
+    expect(secondSettled).toBe(true);
+    expect(attachViewToDom).toHaveBeenCalledTimes(1);
+  });
+
+  it('should retry the attach after a failed first attempt', async () => {
+    const { tabEl } = await createTab();
+    const attachViewToDom = jest
+      .fn()
+      .mockRejectedValueOnce(new Error('attach failed'))
+      .mockResolvedValue(document.createElement('div'));
+    tabEl.delegate = mockDelegate(attachViewToDom);
+
+    await expect(tabEl.setActive()).rejects.toThrow('attach failed');
+    await expect(tabEl.setActive()).resolves.toBeUndefined();
+
+    expect(attachViewToDom).toHaveBeenCalledTimes(2);
+  });
+
+  it('should not activate the tab when the attach fails', async () => {
+    const { tabEl } = await createTab();
+    tabEl.delegate = mockDelegate(jest.fn().mockRejectedValue(new Error('attach failed')));
+
+    await expect(tabEl.setActive()).rejects.toThrow('attach failed');
+
+    expect(tabEl.active).toBe(false);
+  });
+
+  it('should activate the tab once a retried attach succeeds', async () => {
+    const { page, tabEl } = await createTab();
+    const attachViewToDom = jest
+      .fn()
+      .mockRejectedValueOnce(new Error('attach failed'))
+      .mockResolvedValue(document.createElement('div'));
+    tabEl.delegate = mockDelegate(attachViewToDom);
+
+    await expect(tabEl.setActive()).rejects.toThrow('attach failed');
+    await tabEl.setActive();
+    await page.waitForChanges();
+
+    expect(attachViewToDom).toHaveBeenCalledTimes(2);
+    expect(tabEl.active).toBe(true);
+    expect(tabEl.classList.contains('tab-hidden')).toBe(false);
+  });
+
+  it('should attach the component when the tab starts active', async () => {
+    const { page, tabEl } = await createTab('<ion-tab tab="home" component="ion-content" active="true"></ion-tab>');
+
+    await page.waitForChanges();
+
+    expect(tabEl.querySelector('ion-content.ion-page')).not.toBeNull();
+    expect(tabEl.classList.contains('tab-hidden')).toBe(false);
+  });
+
+  it('should not attach anything when no component is provided', async () => {
+    const { tabEl } = await createTab('<ion-tab tab="home"></ion-tab>');
+    const attachViewToDom = jest.fn().mockResolvedValue(document.createElement('div'));
+    tabEl.delegate = mockDelegate(attachViewToDom);
+
+    await expect(tabEl.setActive()).resolves.toBeUndefined();
+
+    expect(attachViewToDom).not.toHaveBeenCalled();
+    expect(tabEl.active).toBe(true);
+  });
+
+  describe('when the attach fails on the active watcher path', () => {
+    let consoleErrorSpy: jest.SpyInstance;
+
+    beforeEach(() => {
+      consoleErrorSpy = jest.spyOn(console, 'error');
+      // Suppress console.error output from polluting the test output
+      consoleErrorSpy.mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+      consoleErrorSpy.mockRestore();
+    });
+
+    // Jest fails a test on an unhandled rejection, so the watcher swallowing the
+    // rejection is covered without an explicit unhandledRejection listener.
+    it('should log the error', async () => {
+      const { page, tabEl } = await createTab();
+      tabEl.delegate = mockDelegate(jest.fn().mockRejectedValue(new Error('attach failed')));
+
+      // ion-tabs activates a tab by setting `active`, it does not await setActive().
+      tabEl.active = true;
+      await page.waitForChanges();
+      // Give the rejected attach a turn to settle so the watcher can log it.
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(consoleErrorSpy).toHaveBeenCalledWith(
+        '[Ionic Error]: [ion-tab] - Exception in prepareLazyLoaded:',
+        expect.any(Error)
+      );
+    });
+
+    it('should retry on the next activation, as ion-tabs reactivates tabs', async () => {
+      const { page, tabEl } = await createTab();
+      const attachViewToDom = jest
+        .fn()
+        .mockRejectedValueOnce(new Error('attach failed'))
+        .mockImplementation(() => {
+          const el = document.createElement('div');
+          el.classList.add('attached-page');
+          tabEl.appendChild(el);
+          return Promise.resolve(el);
+        });
+      tabEl.delegate = mockDelegate(attachViewToDom);
+
+      tabEl.active = true;
+      await page.waitForChanges();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(tabEl.querySelector('.attached-page')).toBeNull();
+
+      // ion-tabs deactivates the leaving tab, so returning to it is a false -> true change.
+      tabEl.active = false;
+      await page.waitForChanges();
+      tabEl.active = true;
+      await page.waitForChanges();
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(attachViewToDom).toHaveBeenCalledTimes(2);
+      expect(tabEl.querySelector('.attached-page')).not.toBeNull();
+    });
+  });
+});
diff --git a/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-ios-ltr-Mobile-Chrome-linux.png
index cfc2bb57478..54d8c14e5a8 100644
Binary files a/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/textarea/test/a11y/textarea.e2e.ts-snapshots/textarea-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-small-scale-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-small-scale-ios-ltr-Mobile-Chrome-linux.png
index e9daeb3a04e..669df96e6e8 100644
Binary files a/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-small-scale-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/title/test/a11y/title.e2e.ts-snapshots/title-small-scale-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/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/test/overlays/overlays.e2e.ts b/core/src/utils/test/overlays/overlays.e2e.ts
index de73fd2f011..b5cee3b7932 100644
--- a/core/src/utils/test/overlays/overlays.e2e.ts
+++ b/core/src/utils/test/overlays/overlays.e2e.ts
@@ -473,6 +473,32 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       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',
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 febff65078e..285d5416c2f 100644
--- a/core/src/utils/test/playwright/drag-element.ts
+++ b/core/src/utils/test/playwright/drag-element.ts
@@ -39,7 +39,16 @@ export const dragElementBy = async (
   // 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.
-  await page.evaluate(() => window.getSelection()?.removeAllRanges());
+  //
+  // 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 b73f391e3cf..bed8941ea4e 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 c1999229e99..912a19d65ce 100644
--- a/lerna.json
+++ b/lerna.json
@@ -3,5 +3,5 @@
     "core",
     "packages/*"
   ],
-  "version": "8.8.15"
+  "version": "8.8.17"
 }
\ No newline at end of file
diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md
index 4ccbf22bbce..1d575bf7c87 100644
--- a/packages/angular-server/CHANGELOG.md
+++ b/packages/angular-server/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.17](https://github.com/ionic-team/ionic-framework/compare/v8.8.16...v8.8.17) (2026-08-05)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [8.8.16](https://github.com/ionic-team/ionic-framework/compare/v8.8.15...v8.8.16) (2026-07-29)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
 ## [8.8.15](https://github.com/ionic-team/ionic-framework/compare/v8.8.14...v8.8.15) (2026-07-22)
 
 
diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json
index 3b1927ef808..f97034deedf 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.15",
+  "version": "8.8.17",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular-server",
-      "version": "8.8.15",
+      "version": "8.8.17",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.8.15"
+        "@ionic/core": "^8.8.17"
       },
       "devDependencies": {
         "@angular/animations": "^22.0.0",
@@ -1135,9 +1135,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "8.8.15",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.15.tgz",
-      "integrity": "sha512-iEREpxWYEakK3ZVGdFVi6Vm+MIpVhNlfy5qds5IjVnZqUPKaD8ynN/2LPfgQiLO/e8eEo40KJj+QuW97uMW53Q==",
+      "version": "8.8.17",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.17.tgz",
+      "integrity": "sha512-w4Ya+0EpGqajVbp6c6TMt4u/MX1flmdzpz2gfgXUkRgp/YfFIRw8n6pIZEOv4EzdUzrhhvPVUEZR64w9R5Fguw==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.43.5",
@@ -7626,9 +7626,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.8.15",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.15.tgz",
-      "integrity": "sha512-iEREpxWYEakK3ZVGdFVi6Vm+MIpVhNlfy5qds5IjVnZqUPKaD8ynN/2LPfgQiLO/e8eEo40KJj+QuW97uMW53Q==",
+      "version": "8.8.17",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.17.tgz",
+      "integrity": "sha512-w4Ya+0EpGqajVbp6c6TMt4u/MX1flmdzpz2gfgXUkRgp/YfFIRw8n6pIZEOv4EzdUzrhhvPVUEZR64w9R5Fguw==",
       "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 8983a3e52a8..c48bd3c40f4 100644
--- a/packages/angular-server/package.json
+++ b/packages/angular-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular-server",
-  "version": "8.8.15",
+  "version": "8.8.17",
   "description": "Angular SSR Module for Ionic",
   "keywords": [
     "ionic",
@@ -78,6 +78,6 @@
   },
   "prettier": "@ionic/prettier-config",
   "dependencies": {
-    "@ionic/core": "^8.8.15"
+    "@ionic/core": "^8.8.17"
   }
 }
diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md
index 20ab7d5ba4c..15b4bd57110 100644
--- a/packages/angular/CHANGELOG.md
+++ b/packages/angular/CHANGELOG.md
@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.17](https://github.com/ionic-team/ionic-framework/compare/v8.8.16...v8.8.17) (2026-08-05)
+
+
+### Bug Fixes
+
+* **fab-button:** restore submit, reset, and disabled form functionality ([#31249](https://github.com/ionic-team/ionic-framework/issues/31249)) ([93ee380](https://github.com/ionic-team/ionic-framework/commit/93ee38015125619509b9aa844d6f0025be0a71b7)), closes [#18550](https://github.com/ionic-team/ionic-framework/issues/18550)
+
+
+
+
+
+## [8.8.16](https://github.com/ionic-team/ionic-framework/compare/v8.8.15...v8.8.16) (2026-07-29)
+
+
+### Bug Fixes
+
+* **angular:** guard transition against destroyed router outlet ([#31297](https://github.com/ionic-team/ionic-framework/issues/31297)) ([fdef61c](https://github.com/ionic-team/ionic-framework/commit/fdef61cc74285caff0549ba8bdac70cedaaba865)), closes [#31296](https://github.com/ionic-team/ionic-framework/issues/31296)
+
+
+
+
+
 ## [8.8.15](https://github.com/ionic-team/ionic-framework/compare/v8.8.14...v8.8.15) (2026-07-22)
 
 **Note:** Version bump only for package @ionic/angular
diff --git a/packages/angular/common/src/directives/navigation/stack-controller.ts b/packages/angular/common/src/directives/navigation/stack-controller.ts
index 47c9ef05d3c..94a7faf0b23 100644
--- a/packages/angular/common/src/directives/navigation/stack-controller.ts
+++ b/packages/angular/common/src/directives/navigation/stack-controller.ts
@@ -274,7 +274,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/lazy/src/directives/proxies.ts b/packages/angular/lazy/src/directives/proxies.ts
index 66feafc701c..b6be5b42f03 100644
--- a/packages/angular/lazy/src/directives/proxies.ts
+++ b/packages/angular/lazy/src/directives/proxies.ts
@@ -794,14 +794,14 @@ export declare interface IonFab extends Components.IonFab {}
 
 
 @ProxyCmp({
-  inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type']
+  inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'form', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type']
 })
 @Component({
   selector: 'ion-fab-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type'],
+  inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'form', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type'],
   outputs: ['ionFocus', 'ionBlur'],
   standalone: false
 })
diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json
index d92ca7a55ac..5d51773127c 100644
--- a/packages/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "8.8.15",
+  "version": "8.8.17",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "8.8.15",
+      "version": "8.8.17",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.8.15",
+        "@ionic/core": "^8.8.17",
         "ionicons": "^8.0.13",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.3.0"
@@ -2036,9 +2036,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "8.8.15",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.15.tgz",
-      "integrity": "sha512-iEREpxWYEakK3ZVGdFVi6Vm+MIpVhNlfy5qds5IjVnZqUPKaD8ynN/2LPfgQiLO/e8eEo40KJj+QuW97uMW53Q==",
+      "version": "8.8.17",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.17.tgz",
+      "integrity": "sha512-w4Ya+0EpGqajVbp6c6TMt4u/MX1flmdzpz2gfgXUkRgp/YfFIRw8n6pIZEOv4EzdUzrhhvPVUEZR64w9R5Fguw==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.43.5",
diff --git a/packages/angular/package.json b/packages/angular/package.json
index e6e66392e3c..762d13ab461 100644
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "8.8.15",
+  "version": "8.8.17",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -47,7 +47,7 @@
     }
   },
   "dependencies": {
-    "@ionic/core": "^8.8.15",
+    "@ionic/core": "^8.8.17",
     "ionicons": "^8.0.13",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.3.0"
diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts
index 5507445158a..cea5be06a9c 100644
--- a/packages/angular/standalone/src/directives/proxies.ts
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -771,14 +771,14 @@ export declare interface IonFab extends Components.IonFab {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIonFabButton,
-  inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type']
+  inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'form', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type']
 })
 @Component({
   selector: 'ion-fab-button',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type'],
+  inputs: ['activated', 'closeIcon', 'color', 'disabled', 'download', 'form', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'show', 'size', 'target', 'translucent', 'type'],
   outputs: ['ionFocus', 'ionBlur'],
 })
 export class IonFabButton {
diff --git a/packages/docs/CHANGELOG.md b/packages/docs/CHANGELOG.md
index 15c703ffa25..a1883d14b8f 100644
--- a/packages/docs/CHANGELOG.md
+++ b/packages/docs/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.17](https://github.com/ionic-team/ionic-framework/compare/v8.8.16...v8.8.17) (2026-08-05)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [8.8.16](https://github.com/ionic-team/ionic-framework/compare/v8.8.15...v8.8.16) (2026-07-29)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
 ## [8.8.15](https://github.com/ionic-team/ionic-framework/compare/v8.8.14...v8.8.15) (2026-07-22)
 
 **Note:** Version bump only for package @ionic/docs
diff --git a/packages/docs/package-lock.json b/packages/docs/package-lock.json
index 2f96d120cbd..994c44fc16e 100644
--- a/packages/docs/package-lock.json
+++ b/packages/docs/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/docs",
-  "version": "8.8.15",
+  "version": "8.8.17",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/docs",
-      "version": "8.8.15",
+      "version": "8.8.17",
       "license": "MIT"
     }
   }
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 262e89331b3..a2721216842 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/docs",
-  "version": "8.8.15",
+  "version": "8.8.17",
   "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 119692c6d83..6f655df1f4e 100644
--- a/packages/react-router/CHANGELOG.md
+++ b/packages/react-router/CHANGELOG.md
@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.17](https://github.com/ionic-team/ionic-framework/compare/v8.8.16...v8.8.17) (2026-08-05)
+
+
+### Bug Fixes
+
+* **react-router:** symmetric pathname+search url comparison ([#31153](https://github.com/ionic-team/ionic-framework/issues/31153)) ([ffef25d](https://github.com/ionic-team/ionic-framework/commit/ffef25d2e2597bee5fdb8833d9e50ff9234d74e0)), closes [#31152](https://github.com/ionic-team/ionic-framework/issues/31152) [#31152](https://github.com/ionic-team/ionic-framework/issues/31152) [#25534](https://github.com/ionic-team/ionic-framework/issues/25534)
+
+
+
+
+
+## [8.8.16](https://github.com/ionic-team/ionic-framework/compare/v8.8.15...v8.8.16) (2026-07-29)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
 ## [8.8.15](https://github.com/ionic-team/ionic-framework/compare/v8.8.14...v8.8.15) (2026-07-22)
 
 **Note:** Version bump only for package @ionic/react-router
diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json
index 235b2b7f446..930ca25fe2a 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.15",
+  "version": "8.8.17",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react-router",
-      "version": "8.8.15",
+      "version": "8.8.17",
       "license": "MIT",
       "dependencies": {
-        "@ionic/react": "^8.8.15",
+        "@ionic/react": "^8.8.17",
         "tslib": "*"
       },
       "devDependencies": {
@@ -250,9 +250,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "8.8.15",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.15.tgz",
-      "integrity": "sha512-iEREpxWYEakK3ZVGdFVi6Vm+MIpVhNlfy5qds5IjVnZqUPKaD8ynN/2LPfgQiLO/e8eEo40KJj+QuW97uMW53Q==",
+      "version": "8.8.17",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.17.tgz",
+      "integrity": "sha512-w4Ya+0EpGqajVbp6c6TMt4u/MX1flmdzpz2gfgXUkRgp/YfFIRw8n6pIZEOv4EzdUzrhhvPVUEZR64w9R5Fguw==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.43.5",
@@ -290,12 +290,12 @@
       }
     },
     "node_modules/@ionic/react": {
-      "version": "8.8.15",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.8.15.tgz",
-      "integrity": "sha512-8bjys95dICAfJMwA0iuKIYfg5pbz2lY56eQpIG6In+796PvMNVXE9eFLhIZ15jjpRE1O/HZHxO2OFV/pL3NVdA==",
+      "version": "8.8.17",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.8.17.tgz",
+      "integrity": "sha512-k3ufmaxJUQPbifEdoYZFz9vxHy/rlU+K+pXVpo6wgyYMEeF2GHsASjViqLDVh3KVHXZKu6RYk7OpdETFc5Ltlw==",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "8.8.15",
+        "@ionic/core": "8.8.17",
         "ionicons": "^8.0.13",
         "tslib": "*"
       },
@@ -2519,12 +2519,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": {
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
index c0f62d10259..cf362013ee0 100644
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react-router",
-  "version": "8.8.15",
+  "version": "8.8.17",
   "description": "React Router wrapper for @ionic/react",
   "keywords": [
     "ionic",
@@ -36,7 +36,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@ionic/react": "^8.8.15",
+    "@ionic/react": "^8.8.17",
     "tslib": "*"
   },
   "peerDependencies": {
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 6a90080af9f..2ac0a68f58f 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
@@ -346,7 +346,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');
@@ -450,6 +450,65 @@ describe('Routing Tests', () => {
     cy.url().should('include', '/routing/tabs/home');
   });
 
+  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 e0e3c9aeba1..74bf41814ce 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.17](https://github.com/ionic-team/ionic-framework/compare/v8.8.16...v8.8.17) (2026-08-05)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
+## [8.8.16](https://github.com/ionic-team/ionic-framework/compare/v8.8.15...v8.8.16) (2026-07-29)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
 ## [8.8.15](https://github.com/ionic-team/ionic-framework/compare/v8.8.14...v8.8.15) (2026-07-22)
 
 **Note:** Version bump only for package @ionic/react
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index 1f60450c135..6afbd2be0ea 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react",
-  "version": "8.8.15",
+  "version": "8.8.17",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react",
-      "version": "8.8.15",
+      "version": "8.8.17",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.8.15",
+        "@ionic/core": "^8.8.17",
         "@stencil/react-output-target": "^1.5.2",
         "ionicons": "^8.0.13",
         "tslib": "*"
@@ -891,9 +891,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "8.8.15",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.15.tgz",
-      "integrity": "sha512-iEREpxWYEakK3ZVGdFVi6Vm+MIpVhNlfy5qds5IjVnZqUPKaD8ynN/2LPfgQiLO/e8eEo40KJj+QuW97uMW53Q==",
+      "version": "8.8.17",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.17.tgz",
+      "integrity": "sha512-w4Ya+0EpGqajVbp6c6TMt4u/MX1flmdzpz2gfgXUkRgp/YfFIRw8n6pIZEOv4EzdUzrhhvPVUEZR64w9R5Fguw==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.43.5",
diff --git a/packages/react/package.json b/packages/react/package.json
index 584f12e3033..7a6f0eb9852 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react",
-  "version": "8.8.15",
+  "version": "8.8.17",
   "description": "React specific wrapper for @ionic/core",
   "keywords": [
     "ionic",
@@ -40,7 +40,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "^8.8.15",
+    "@ionic/core": "^8.8.17",
     "@stencil/react-output-target": "^1.5.2",
     "ionicons": "^8.0.13",
     "tslib": "*"
diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md
index 3f626505934..6c9e5d49242 100644
--- a/packages/vue-router/CHANGELOG.md
+++ b/packages/vue-router/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.17](https://github.com/ionic-team/ionic-framework/compare/v8.8.16...v8.8.17) (2026-08-05)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
+## [8.8.16](https://github.com/ionic-team/ionic-framework/compare/v8.8.15...v8.8.16) (2026-07-29)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
 ## [8.8.15](https://github.com/ionic-team/ionic-framework/compare/v8.8.14...v8.8.15) (2026-07-22)
 
 **Note:** Version bump only for package @ionic/vue-router
diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json
index 8998d348f4c..b1c3bc04c78 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.15",
+  "version": "8.8.17",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue-router",
-      "version": "8.8.15",
+      "version": "8.8.17",
       "license": "MIT",
       "dependencies": {
-        "@ionic/vue": "^8.8.15"
+        "@ionic/vue": "^8.8.17"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3.3.1",
@@ -342,9 +342,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "8.8.15",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.15.tgz",
-      "integrity": "sha512-iEREpxWYEakK3ZVGdFVi6Vm+MIpVhNlfy5qds5IjVnZqUPKaD8ynN/2LPfgQiLO/e8eEo40KJj+QuW97uMW53Q==",
+      "version": "8.8.17",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.17.tgz",
+      "integrity": "sha512-w4Ya+0EpGqajVbp6c6TMt4u/MX1flmdzpz2gfgXUkRgp/YfFIRw8n6pIZEOv4EzdUzrhhvPVUEZR64w9R5Fguw==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.43.5",
@@ -382,12 +382,12 @@
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "8.8.15",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.8.15.tgz",
-      "integrity": "sha512-WYM51Qlh1PES6Xst+085ueGj4iars2AhBnTboQBLxS9knU6hHQ90/5/pNjOl3WyFkmWV7/kL8iQaR7o+qESLxQ==",
+      "version": "8.8.17",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.8.17.tgz",
+      "integrity": "sha512-aD7rgodl9lw0cziNxEE/dpnms9+lNlvTB6d54vGmuaqZdgqe6zqnWVMigmR6Acf8kUEDdYh+w0/XnP5BKfJsoQ==",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "8.8.15",
+        "@ionic/core": "8.8.17",
         "@stencil/vue-output-target": "0.10.7",
         "ionicons": "^8.0.13"
       }
@@ -2933,12 +2933,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": {
diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json
index f9de9990a17..6dc5612e7d2 100644
--- a/packages/vue-router/package.json
+++ b/packages/vue-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue-router",
-  "version": "8.8.15",
+  "version": "8.8.17",
   "description": "Vue Router integration for @ionic/vue",
   "scripts": {
     "eslint": "eslint src",
@@ -43,7 +43,7 @@
   },
   "homepage": "https://github.com/ionic-team/ionic-framework#readme",
   "dependencies": {
-    "@ionic/vue": "^8.8.15"
+    "@ionic/vue": "^8.8.17"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
index 060691a3ca7..c7c1207ed58 100644
--- a/packages/vue/CHANGELOG.md
+++ b/packages/vue/CHANGELOG.md
@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.8.17](https://github.com/ionic-team/ionic-framework/compare/v8.8.16...v8.8.17) (2026-08-05)
+
+
+### Bug Fixes
+
+* **fab-button:** restore submit, reset, and disabled form functionality ([#31249](https://github.com/ionic-team/ionic-framework/issues/31249)) ([93ee380](https://github.com/ionic-team/ionic-framework/commit/93ee38015125619509b9aa844d6f0025be0a71b7)), closes [#18550](https://github.com/ionic-team/ionic-framework/issues/18550)
+
+
+
+
+
+## [8.8.16](https://github.com/ionic-team/ionic-framework/compare/v8.8.15...v8.8.16) (2026-07-29)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
 ## [8.8.15](https://github.com/ionic-team/ionic-framework/compare/v8.8.14...v8.8.15) (2026-07-22)
 
 **Note:** Version bump only for package @ionic/vue
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
index 4eeca8940a0..c0e2ec3977d 100644
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue",
-  "version": "8.8.15",
+  "version": "8.8.17",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue",
-      "version": "8.8.15",
+      "version": "8.8.17",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.8.15",
+        "@ionic/core": "^8.8.17",
         "@stencil/vue-output-target": "0.13.1",
         "ionicons": "^8.0.13"
       },
@@ -346,9 +346,9 @@
       }
     },
     "node_modules/@ionic/core": {
-      "version": "8.8.15",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.15.tgz",
-      "integrity": "sha512-iEREpxWYEakK3ZVGdFVi6Vm+MIpVhNlfy5qds5IjVnZqUPKaD8ynN/2LPfgQiLO/e8eEo40KJj+QuW97uMW53Q==",
+      "version": "8.8.17",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.17.tgz",
+      "integrity": "sha512-w4Ya+0EpGqajVbp6c6TMt4u/MX1flmdzpz2gfgXUkRgp/YfFIRw8n6pIZEOv4EzdUzrhhvPVUEZR64w9R5Fguw==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.43.5",
diff --git a/packages/vue/package.json b/packages/vue/package.json
index cd9b1bdd3b3..159673a8980 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue",
-  "version": "8.8.15",
+  "version": "8.8.17",
   "description": "Vue specific wrapper for @ionic/core",
   "scripts": {
     "eslint": "eslint src",
@@ -77,7 +77,7 @@
     }
   },
   "dependencies": {
-    "@ionic/core": "^8.8.15",
+    "@ionic/core": "^8.8.17",
     "@stencil/vue-output-target": "0.13.1",
     "ionicons": "^8.0.13"
   },
diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts
index f62b14267a7..f3a1d3bede3 100644
--- a/packages/vue/src/proxies.ts
+++ b/packages/vue/src/proxies.ts
@@ -383,6 +383,7 @@ export const IonFabButton: StencilVueComponent<JSX.IonFabButton> = /*@__PURE__*/
   'show',
   'translucent',
   'type',
+  'form',
   'size',
   'closeIcon',
   'ionFocus',