fix(radio-group): remove wrapper causing Node.removeChild errors

Issue number: resolves #

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Currently, if you focus on something and then refresh with a refresher,
the browser will try to scroll to what's focused after refreshing. This
can be an unexpected and disrupting user experience.



https://github.com/user-attachments/assets/3ef5999d-d104-422a-a6a9-4f478912f48a


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

With these changes, we blur the active element to prevent the browser
from trying to scroll back to something off screen after refreshing.

Also, I did try to create regression tests for this, but playwright
actually doesn't currently seem to make it possible as far as I can tell
- that's actually what I spent most of my time on this issue trying to
do. Looks like the only way to trigger the refresher with playwright
uses mouse click events, which inherently blurs the active element. You
need to use cursor events for this to work, because cursor events do not
cause a blur on the active element.


https://github.com/user-attachments/assets/bd1a3bfc-9b48-4b3f-b8dc-6959eefc9107


## Does this introduce a breaking change?

- [ ] Yes
- [X] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

**Current dev build:**
```
8.7.3-dev.11755285796.12743331
```

.github/workflows/actions/build-core-stencil-prerelease/action.yml

@@ -8,7 +8,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: actions/setup-node@v4
       with:
         node-version: 22.x

.github/workflows/actions/build-core/action.yml

@@ -8,7 +8,7 @@ inputs:
 runs:
   using: 'composite'
   steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: actions/setup-node@v4
       with:
         node-version: 22.x
@@ -31,4 +31,6 @@ runs:
       with:
         name: ionic-core
         output: core/CoreBuild.zip
-        paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts core/api.txt
+        # Include generated proxy files from Stencil output targets so
+        # framework builds can detect when they need to be updated
+        paths: core/dist core/components core/css core/hydrate core/loader core/src/components.d.ts core/api.txt packages/angular/src/directives/proxies.ts packages/angular/src/directives/proxies-list.ts packages/angular/standalone/src/directives/proxies.ts packages/vue/src/proxies.ts packages/react/src/components/proxies.ts packages/react/src/components/inner-proxies.ts packages/react/src/components/routing-proxies.ts

.github/workflows/build.yml

@@ -22,7 +22,7 @@ jobs:
   build-core:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - 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@v4
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/test-core-clean-build
 
   test-core-lint:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/test-core-lint
 
   test-core-spec:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - 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@v4
+      - uses: actions/checkout@v5
       - 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@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-vue
 
   build-vue-router:
     needs: [build-vue]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - 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@v4
+    - uses: actions/checkout@v5
     - 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@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-angular
 
   build-angular-server:
     needs: [build-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - 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@v4
+    - uses: actions/checkout@v5
     - 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@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-react
 
   build-react-router:
     needs: [build-react]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - 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@v4
+    - uses: actions/checkout@v5
     - 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@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/test-react-e2e
       with:
         app: ${{ matrix.apps }}

.github/workflows/codeql-analysis.yml

@@ -14,7 +14,7 @@ jobs:
     permissions:
       security-events: write
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: github/codeql-action/init@v3
         with:
           languages: javascript

.github/workflows/conventional-commit.yml

@@ -12,7 +12,7 @@ jobs:
         if: |
           !contains(github.event.pull_request.title, 'release') &&
           !contains(github.event.pull_request.title, 'chore')
-        uses: amannn/action-semantic-pull-request@v5
+        uses: amannn/action-semantic-pull-request@v6
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:

.github/workflows/dev-build.yml

@@ -9,7 +9,7 @@ jobs:
     outputs:
       dev-hash: ${{ steps.create-dev-hash.outputs.DEV_HASH }}
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       # 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

.github/workflows/nightly.yml

@@ -12,7 +12,7 @@ jobs:
     outputs:
       nightly-hash: ${{ steps.create-nightly-hash.outputs.NIGHTLY_HASH }}
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       # 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

.github/workflows/release-ionic.yml

@@ -22,7 +22,7 @@ jobs:
   release-core:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/publish-npm
       with:
         scope: '@ionic/core'
@@ -48,7 +48,7 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - name: Restore @ionic/docs built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -68,7 +68,7 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -95,7 +95,7 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -121,7 +121,7 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -147,7 +147,7 @@ jobs:
     needs: [release-core]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -168,7 +168,7 @@ jobs:
     needs: [release-react]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:
@@ -194,7 +194,7 @@ jobs:
     needs: [release-vue]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - name: Restore @ionic/core built cache
       uses: ./.github/workflows/actions/download-archive
       with:

.github/workflows/release.yml

@@ -48,7 +48,7 @@ jobs:
     needs: [release-ionic]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
       with:
         token: ${{ secrets.IONITRON_TOKEN }}
         fetch-depth: 0
@@ -76,7 +76,7 @@ jobs:
     needs: [finalize-release]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
         # Pull the latest version of the reference
         # branch instead of the revision that triggered
         # the workflow otherwise we won't get the commit

.github/workflows/stencil-nightly.yml

@@ -26,7 +26,7 @@ jobs:
   build-core-with-stencil-nightly:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/build-core-stencil-prerelease
         with:
           stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
@@ -35,21 +35,21 @@ jobs:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - 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@v4
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/test-core-lint
 
   test-core-spec:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/test-core-spec
         with:
           stencil-version: ${{ inputs.npm_release_tag || 'nightly' }}
@@ -72,7 +72,7 @@ jobs:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - uses: ./.github/workflows/actions/test-core-screenshot
         with:
           shard: ${{ matrix.shard }}
@@ -100,14 +100,14 @@ jobs:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-vue
 
   build-vue-router:
     needs: [build-vue]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-vue-router
 
   test-vue-e2e:
@@ -118,7 +118,7 @@ jobs:
     needs: [build-vue, build-vue-router]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/test-vue-e2e
       with:
         app: ${{ matrix.apps }}
@@ -136,14 +136,14 @@ jobs:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-angular
 
   build-angular-server:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-angular-server
 
   test-angular-e2e:
@@ -154,7 +154,7 @@ jobs:
     needs: [build-angular, build-angular-server]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/test-angular-e2e
       with:
         app: ${{ matrix.apps }}
@@ -172,14 +172,14 @@ jobs:
     needs: [build-core-with-stencil-nightly]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-react
 
   build-react-router:
     needs: [build-react]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/build-react-router
 
   test-react-router-e2e:
@@ -190,7 +190,7 @@ jobs:
     needs: [build-react, build-react-router]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/test-react-router-e2e
       with:
         app: ${{ matrix.apps }}
@@ -212,7 +212,7 @@ jobs:
     needs: [build-react, build-react-router]
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v5
     - uses: ./.github/workflows/actions/test-react-e2e
       with:
         app: ${{ matrix.apps }}

.github/workflows/update-screenshots.yml

@@ -26,7 +26,7 @@ jobs:
   build-core:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - 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@v4
+      - uses: actions/checkout@v5
       - 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@v4
+      - uses: actions/checkout@v5
         # Normally, we could just push with the
         # default GITHUB_TOKEN, but that will
         # not cause the build workflow

core/package-lock.json

@@ -25,10 +25,10 @@
         "@playwright/test": "^1.54.2",
         "@rollup/plugin-node-resolve": "^8.4.0",
         "@rollup/plugin-virtual": "^2.0.3",
-        "@stencil/angular-output-target": "^1.0.0",
+        "@stencil/angular-output-target": "^0.10.0",
         "@stencil/react-output-target": "0.5.3",
         "@stencil/sass": "^3.0.9",
-        "@stencil/vue-output-target": "0.11.8",
+        "@stencil/vue-output-target": "0.10.8",
         "@types/jest": "^29.5.6",
         "@types/node": "^14.6.0",
         "@typescript-eslint/eslint-plugin": "^6.7.2",
@@ -1905,9 +1905,9 @@
       }
     },
     "node_modules/@stencil/angular-output-target": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-1.0.0.tgz",
-      "integrity": "sha512-6/XtjEWlJS+40b3x2geCV43rjQKlHS/a1/62QjYGXBtHhMo92KyGwKns3ntmX6B4fdk/xAKehxD2WKtHIM3oxQ==",
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.10.2.tgz",
+      "integrity": "sha512-jPRa2NMAPtm/iMY+mUaWATbIhgY5zPJfUNQyF8nwC0rMrfXifPoRCf6BbH2S4Gy7SX0X4hlP+jAbVUjQNg/P+Q==",
       "dev": true,
       "peerDependencies": {
         "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0"
@@ -1960,9 +1960,9 @@
       }
     },
     "node_modules/@stencil/vue-output-target": {
-      "version": "0.11.8",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.11.8.tgz",
-      "integrity": "sha512-R/kQoN15irgL7NJxWaUNSmwDLfoDBZjlYaXNnW3LHlF30TYfyez6pRgD7ZglSSTVktMtCXz6ZPhg0uq59VkhOw==",
+      "version": "0.10.8",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.10.8.tgz",
+      "integrity": "sha512-/a20LG29xqy/lxBqo6zc1LbyS20GW9xghypZ7vYdo5fQB8jHClAQDkn+c8aykQlre5TtHiODgvr/rRDUrQKwyg==",
       "dev": true,
       "peerDependencies": {
         "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0",
@@ -3474,9 +3474,9 @@
       ]
     },
     "node_modules/chalk": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.5.0.tgz",
-      "integrity": "sha512-1tm8DTaJhPBG3bIkVeZt1iZM9GfSX2lzOeDVZH9R9ffRHpmHvxZ/QhgQH/aDTkswQVt+YHdXAdS/In/30OjCbg==",
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.0.tgz",
+      "integrity": "sha512-46QrSQFyVSEyYAgQ22hQ+zDa60YHA4fBstHmtSApj1Y5vKtG27fWowW03jCk5KcbXEWPZUIR894aARCA/G1kfQ==",
       "dev": true,
       "engines": {
         "node": "^12.17.0 || ^14.13 || >=16.0.0"
@@ -11977,9 +11977,9 @@
       }
     },
     "@stencil/angular-output-target": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-1.0.0.tgz",
-      "integrity": "sha512-6/XtjEWlJS+40b3x2geCV43rjQKlHS/a1/62QjYGXBtHhMo92KyGwKns3ntmX6B4fdk/xAKehxD2WKtHIM3oxQ==",
+      "version": "0.10.2",
+      "resolved": "https://registry.npmjs.org/@stencil/angular-output-target/-/angular-output-target-0.10.2.tgz",
+      "integrity": "sha512-jPRa2NMAPtm/iMY+mUaWATbIhgY5zPJfUNQyF8nwC0rMrfXifPoRCf6BbH2S4Gy7SX0X4hlP+jAbVUjQNg/P+Q==",
       "dev": true,
       "requires": {}
     },
@@ -12013,9 +12013,9 @@
       "requires": {}
     },
     "@stencil/vue-output-target": {
-      "version": "0.11.8",
-      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.11.8.tgz",
-      "integrity": "sha512-R/kQoN15irgL7NJxWaUNSmwDLfoDBZjlYaXNnW3LHlF30TYfyez6pRgD7ZglSSTVktMtCXz6ZPhg0uq59VkhOw==",
+      "version": "0.10.8",
+      "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.10.8.tgz",
+      "integrity": "sha512-/a20LG29xqy/lxBqo6zc1LbyS20GW9xghypZ7vYdo5fQB8jHClAQDkn+c8aykQlre5TtHiODgvr/rRDUrQKwyg==",
       "dev": true,
       "requires": {}
     },
@@ -13076,9 +13076,9 @@
       "dev": true
     },
     "chalk": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.5.0.tgz",
-      "integrity": "sha512-1tm8DTaJhPBG3bIkVeZt1iZM9GfSX2lzOeDVZH9R9ffRHpmHvxZ/QhgQH/aDTkswQVt+YHdXAdS/In/30OjCbg==",
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.6.0.tgz",
+      "integrity": "sha512-46QrSQFyVSEyYAgQ22hQ+zDa60YHA4fBstHmtSApj1Y5vKtG27fWowW03jCk5KcbXEWPZUIR894aARCA/G1kfQ==",
       "dev": true
     },
     "chalk-template": {
@@ -18338,4 +18338,4 @@
       "dev": true
     }
   }
-}
+}

core/package.json

@@ -47,10 +47,10 @@
     "@playwright/test": "^1.54.2",
     "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-virtual": "^2.0.3",
-    "@stencil/angular-output-target": "^1.0.0",
+    "@stencil/angular-output-target": "^0.10.0",
     "@stencil/react-output-target": "0.5.3",
     "@stencil/sass": "^3.0.9",
-    "@stencil/vue-output-target": "0.11.8",
+    "@stencil/vue-output-target": "0.10.8",
     "@types/jest": "^29.5.6",
     "@types/node": "^14.6.0",
     "@typescript-eslint/eslint-plugin": "^6.7.2",

core/src/components/checkbox/checkbox.tsx

@@ -328,7 +328,7 @@ export class Checkbox implements ComponentInterface {
             {this.renderHintText()}
           </div>
           <div class="native-wrapper">
-            <svg class="checkbox-icon" viewBox="0 0 24 24" part="container">
+            <svg class="checkbox-icon" viewBox="0 0 24 24" part="container" aria-hidden="true">
               {path}
             </svg>
           </div>

core/src/components/radio-group/radio-group.tsx

@@ -293,14 +293,7 @@ export class RadioGroup implements ComponentInterface {
         class={mode}
       >
         {this.renderHintText()}
-        {/*
-          TODO(FW-6279): Wrapping the slot in a div is a workaround due to a
-          Stencil issue. Without the wrapper, the children radio will fire the
-          blur event on focus, instead of waiting for them to be blurred.
-        */}
-        <div class="radio-group-wrapper">
-          <slot></slot>
-        </div>
+        <slot></slot>
       </Host>
     );
   }

core/src/components/radio-group/test/basic/index.html

@@ -24,7 +24,7 @@
 
       <ion-content>
         <ion-list>
-          <ion-radio-group name="items" id="group" value="1">
+          <ion-radio-group name="items" id="group">
             <ion-list-header>
               <ion-label>Radio Group Header</ion-label>
             </ion-list-header>
@@ -45,8 +45,38 @@
               <ion-radio value="4">Item 4</ion-radio>
             </ion-item>
           </ion-radio-group>
+
+          <ion-radio-group id="dynamic">
+            <ion-list-header>
+              <ion-label>Dynamic Radio Group</ion-label>
+            </ion-list-header>
+          </ion-radio-group>
         </ion-list>
       </ion-content>
     </ion-app>
+
+    <script>
+      const dynamicGroup = document.getElementById('dynamic');
+
+      // Keep the existing radio-level listeners for comparison
+      document.addEventListener('ionBlur', (ev) => {
+        console.log('ionBlur', ev);
+      });
+
+      document.addEventListener('ionFocus', (ev) => {
+        console.log('ionFocus', ev);
+      });
+
+      setTimeout(() => {
+        for (let i = 1; i < 11; i++) {
+          const item = document.createElement('ion-item');
+          const radio = document.createElement('ion-radio');
+          radio.value = `item-${i}`;
+          radio.innerText = `Item ${i}`;
+          item.appendChild(radio);
+          dynamicGroup.appendChild(item);
+        }
+      }, 1000);
+    </script>
   </body>
 </html>

core/src/components/refresher/refresher.tsx

@@ -253,6 +253,15 @@ export class Refresher implements ComponentInterface {
             this.didRefresh = true;
             hapticImpact({ style: ImpactStyle.Light });
 
+            /**
+             * Clear focus from any active element to prevent scroll jumps
+             * when the refresh completes
+             */
+            const activeElement = document.activeElement as HTMLElement;
+            if (activeElement?.blur !== undefined) {
+              activeElement.blur();
+            }
+
             /**
              * Translate the content element otherwise when pointer is removed
              * from screen the scroll content will bounce back over the refresher
@@ -733,6 +742,16 @@ export class Refresher implements ComponentInterface {
     // place the content in a hangout position while it thinks
     this.setCss(this.pullMin, this.snapbackDuration, true, '');
 
+    /**
+     * Clear focus from any active element to prevent the browser
+     * from restoring focus and causing scroll jumps after refresh.
+     * This ensures the view stays at the top after refresh completes.
+     */
+    const activeElement = document.activeElement as HTMLElement;
+    if (activeElement?.blur !== undefined) {
+      activeElement.blur();
+    }
+
     // emit "refresh" because it was pulled down far enough
     // and they let go to begin refreshing
     this.ionRefresh.emit({

packages/angular-server/package-lock.json

@@ -1031,9 +1031,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.7.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.1.tgz",
-      "integrity": "sha512-TSJDPWayn23Dw0gjwvbumo6piDrpZvyVccgMUGyKDrqduvBogzIsPrjPBYfTF4z4Sc/W0HMad17nBskC2+ybqw==",
+      "version": "8.7.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.2.tgz",
+      "integrity": "sha512-u1xTJHltvcwiHkwGowQ/uywiUmvszNeR4mXT5JSp1RH6npe8e9doIY9KSzKRrzpWu1T+H0bUwGbhaYg/I/poRA==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.36.2",
@@ -7306,9 +7306,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.7.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.1.tgz",
-      "integrity": "sha512-TSJDPWayn23Dw0gjwvbumo6piDrpZvyVccgMUGyKDrqduvBogzIsPrjPBYfTF4z4Sc/W0HMad17nBskC2+ybqw==",
+      "version": "8.7.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.2.tgz",
+      "integrity": "sha512-u1xTJHltvcwiHkwGowQ/uywiUmvszNeR4mXT5JSp1RH6npe8e9doIY9KSzKRrzpWu1T+H0bUwGbhaYg/I/poRA==",
       "requires": {
         "@stencil/core": "4.36.2",
         "ionicons": "^8.0.13",
@@ -11286,4 +11286,4 @@
       }
     }
   }
-}
+}

packages/angular/package-lock.json

@@ -1398,9 +1398,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.7.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.1.tgz",
-      "integrity": "sha512-TSJDPWayn23Dw0gjwvbumo6piDrpZvyVccgMUGyKDrqduvBogzIsPrjPBYfTF4z4Sc/W0HMad17nBskC2+ybqw==",
+      "version": "8.7.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.2.tgz",
+      "integrity": "sha512-u1xTJHltvcwiHkwGowQ/uywiUmvszNeR4mXT5JSp1RH6npe8e9doIY9KSzKRrzpWu1T+H0bUwGbhaYg/I/poRA==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.36.2",
@@ -9079,4 +9079,4 @@
       }
     }
   }
-}
+}

packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts

@@ -21,6 +21,7 @@ export const routes: Routes = [
       { path: 'button', loadComponent: () => import('../button/button.component').then(c => c.ButtonComponent) },
       { path: 'reorder-group', loadComponent: () => import('../reorder-group/reorder-group.component').then(c => c.ReorderGroupComponent) },
       { path: 'icon', loadComponent: () => import('../icon/icon.component').then(c => c.IconComponent) },
+      { path: 'radio-group', loadComponent: () => import('../radio-group/radio-group.component').then(c => c.RadioGroupComponent) },
       { path: 'split-pane', redirectTo: '/standalone/split-pane/inbox', pathMatch: 'full' },
       {
         path: 'split-pane',

packages/angular/test/base/src/app/standalone/home-page/home-page.component.html

@@ -32,6 +32,10 @@
       <ion-label>
         Reorder Group Test
       </ion-label>
+    <ion-item routerLink="/standalone/radio-group">
+      <ion-label>
+        Radio Group Test
+      </ion-label>
     </ion-item>
   </ion-list>
 

packages/angular/test/base/src/app/standalone/radio-group/radio-group.component.ts

@@ -0,0 +1,64 @@
+import { Component } from "@angular/core";
+import { IonItem, IonLabel, IonList, IonListHeader, IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
+
+@Component({
+  selector: 'app-radio-group',
+  template: `
+    <ion-list>
+      <ion-list-header>
+        <ion-label>Static Radio Group</ion-label>
+      </ion-list-header>
+      <ion-radio-group>
+        <ion-item>
+          <ion-radio (ionBlur)="onBlur($event)" (ionFocus)="onFocus($event)" value="one">Item 1</ion-radio>
+        </ion-item>
+        <ion-item>
+          <ion-radio (ionBlur)="onBlur($event)" (ionFocus)="onFocus($event)" value="two">Item 2</ion-radio>
+        </ion-item>
+        <ion-item>
+          <ion-radio (ionBlur)="onBlur($event)" (ionFocus)="onFocus($event)" value="three">Item 3</ion-radio>
+        </ion-item>
+      </ion-radio-group>
+
+      <ion-list-header>
+        <ion-label>Dynamic Radio Group</ion-label>
+      </ion-list-header>
+      <ion-radio-group>
+        @for (item of items; track item.value) {
+          <ion-item>
+            <ion-radio (ionBlur)="onBlur($event)" (ionFocus)="onFocus($event)" [value]="item.value">{{item.text}}</ion-radio>
+          </ion-item>
+        }
+      </ion-radio-group>
+    </ion-list>`,
+  standalone: true,
+  imports: [IonItem, IonLabel, IonList, IonListHeader, IonRadio, IonRadioGroup]
+})
+export class RadioGroupComponent {
+  items: { text: string; value: string }[] = [];
+
+  ionViewWillEnter() {
+    this.items = [
+      {
+        text: 'Item 1',
+        value: 'item-1'
+      },
+      {
+        text: 'Item 2',
+        value: 'item-2'
+      },
+      {
+        text: 'Item 3',
+        value: 'item-3'
+      }
+    ];
+  }
+
+  onBlur(event: any) {
+    console.log('ionBlur', event);
+  }
+
+  onFocus(event: any) {
+    console.log('ionFocus', event);
+  }
+}

packages/docs/package-lock.json

@@ -10,4 +10,4 @@
       "license": "MIT"
     }
   }
-}
+}

packages/react-router/package-lock.json

@@ -238,9 +238,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.7.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.1.tgz",
-      "integrity": "sha512-TSJDPWayn23Dw0gjwvbumo6piDrpZvyVccgMUGyKDrqduvBogzIsPrjPBYfTF4z4Sc/W0HMad17nBskC2+ybqw==",
+      "version": "8.7.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.2.tgz",
+      "integrity": "sha512-u1xTJHltvcwiHkwGowQ/uywiUmvszNeR4mXT5JSp1RH6npe8e9doIY9KSzKRrzpWu1T+H0bUwGbhaYg/I/poRA==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.36.2",
@@ -415,12 +415,12 @@
       }
     },
     "node_modules/@ionic/react": {
-      "version": "8.7.1",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.7.1.tgz",
-      "integrity": "sha512-J3PcON2QKqaHiY4+IHy24OoQIzVCCYkHpGM6gAEvuvhXSaQ4nv466eNYCaxnjma4fkz9tS2fwTbPc0C6X8bnXg==",
+      "version": "8.7.2",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.7.2.tgz",
+      "integrity": "sha512-HEKZvbrM7O9pjPtrWH48uarm+O84pVbjfc8aSU/PTG4cE+TbYhSW9xMqIAUEpIUxb56bB1B189uDfPI5zBc7Bg==",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "8.7.1",
+        "@ionic/core": "8.7.2",
         "ionicons": "^8.0.13",
         "tslib": "*"
       },
@@ -4175,9 +4175,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.7.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.1.tgz",
-      "integrity": "sha512-TSJDPWayn23Dw0gjwvbumo6piDrpZvyVccgMUGyKDrqduvBogzIsPrjPBYfTF4z4Sc/W0HMad17nBskC2+ybqw==",
+      "version": "8.7.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.2.tgz",
+      "integrity": "sha512-u1xTJHltvcwiHkwGowQ/uywiUmvszNeR4mXT5JSp1RH6npe8e9doIY9KSzKRrzpWu1T+H0bUwGbhaYg/I/poRA==",
       "requires": {
         "@stencil/core": "4.36.2",
         "ionicons": "^8.0.13",
@@ -4281,11 +4281,11 @@
       "requires": {}
     },
     "@ionic/react": {
-      "version": "8.7.1",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.7.1.tgz",
-      "integrity": "sha512-J3PcON2QKqaHiY4+IHy24OoQIzVCCYkHpGM6gAEvuvhXSaQ4nv466eNYCaxnjma4fkz9tS2fwTbPc0C6X8bnXg==",
+      "version": "8.7.2",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.7.2.tgz",
+      "integrity": "sha512-HEKZvbrM7O9pjPtrWH48uarm+O84pVbjfc8aSU/PTG4cE+TbYhSW9xMqIAUEpIUxb56bB1B189uDfPI5zBc7Bg==",
       "requires": {
-        "@ionic/core": "8.7.1",
+        "@ionic/core": "8.7.2",
         "ionicons": "^8.0.13",
         "tslib": "*"
       }
@@ -6844,4 +6844,4 @@
       "dev": true
     }
   }
-}
+}

packages/react/package-lock.json

@@ -736,9 +736,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.7.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.1.tgz",
-      "integrity": "sha512-TSJDPWayn23Dw0gjwvbumo6piDrpZvyVccgMUGyKDrqduvBogzIsPrjPBYfTF4z4Sc/W0HMad17nBskC2+ybqw==",
+      "version": "8.7.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.2.tgz",
+      "integrity": "sha512-u1xTJHltvcwiHkwGowQ/uywiUmvszNeR4mXT5JSp1RH6npe8e9doIY9KSzKRrzpWu1T+H0bUwGbhaYg/I/poRA==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.36.2",
@@ -11913,4 +11913,4 @@
       }
     }
   }
-}
+}

packages/react/test/base/src/App.tsx

@@ -24,6 +24,7 @@ import './theme/variables.css';
 import Icons from './pages/Icons';
 import Inputs from './pages/Inputs';
 import Main from './pages/Main';
+import RadioGroup from './pages/RadioGroup';
 import Tabs from './pages/Tabs';
 import TabsBasic from './pages/TabsBasic';
 import NavComponent from './pages/navigation/NavComponent';
@@ -69,6 +70,7 @@ const App: React.FC = () => (
         <Route path="/icons" component={Icons} />
         <Route path="/inputs" component={Inputs} />
         <Route path="/reorder-group" component={ReorderGroup} />
+        <Route path="/radio-group" component={RadioGroup} />
       </IonRouterOutlet>
     </IonReactRouter>
   </IonApp>

packages/react/test/base/src/pages/Main.tsx

@@ -52,6 +52,9 @@ const Main: React.FC<MainProps> = () => {
           <IonItem routerLink="/reorder-group">
             <IonLabel>Reorder Group</IonLabel>
           </IonItem>
+          <IonItem routerLink="/radio-group">
+            <IonLabel>Radio Group</IonLabel>
+          </IonItem>
         </IonList>
       </IonContent>
     </IonPage>

packages/react/test/base/src/pages/RadioGroup.tsx

@@ -0,0 +1,89 @@
+import { IonBackButton, IonButtons, IonContent, IonHeader, IonItem, IonList, IonPage, IonRadio, IonRadioGroup, IonSearchbar, IonTitle, IonToolbar } from '@ionic/react';
+import React, { useState } from 'react';
+
+interface RadioGroupProps {
+
+}
+
+export interface Item {
+  text: string;
+  value: string;
+}
+
+const items: Item[] = [
+  { text: 'Apple', value: 'apple' },
+  { text: 'Apricot', value: 'apricot' },
+  { text: 'Banana', value: 'banana' },
+  { text: 'Blackberry', value: 'blackberry' },
+  { text: 'Blueberry', value: 'blueberry' },
+  { text: 'Cherry', value: 'cherry' },
+  { text: 'Cranberry', value: 'cranberry' },
+  { text: 'Grape', value: 'grape' },
+  { text: 'Grapefruit', value: 'grapefruit' },
+  { text: 'Guava', value: 'guava' },
+];
+
+const RadioGroup: React.FC<RadioGroupProps> = () => {
+  const [filteredItems, setFilteredItems] = useState<Item[]>([...items]);
+
+  const searchbarInput = (event: any) => {
+    filterList(event.target.value);
+  };
+
+  /**
+   * Update the rendered view with
+   * the provided search query. If no
+   * query is provided, all data
+   * will be rendered.
+   */
+  const filterList = (searchQuery: string | null | undefined) => {
+    /**
+     * If no search query is defined,
+     * return all options.
+     */
+    if (searchQuery === undefined || searchQuery === null) {
+      setFilteredItems([...items]);
+    } else {
+      /**
+       * Otherwise, normalize the search
+       * query and check to see which items
+       * contain the search query as a substring.
+       */
+      const normalizedQuery = searchQuery.toLowerCase();
+      setFilteredItems(
+        items.filter((item) => {
+          return item.text.toLowerCase().includes(normalizedQuery);
+        })
+      );
+    }
+  };
+
+  return (
+    <IonPage>
+      <IonHeader>
+        <IonToolbar>
+          <IonButtons slot="start">
+            <IonBackButton></IonBackButton>
+          </IonButtons>
+          <IonTitle>Radio Group</IonTitle>
+        </IonToolbar>
+        <IonToolbar>
+          <IonSearchbar onIonInput={searchbarInput}></IonSearchbar>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <IonList inset={true}>
+          <IonRadioGroup>
+            {filteredItems.map((item) => (
+              <IonItem key={item.value}>
+                <IonRadio value={item.value}>{item.text}</IonRadio>
+              </IonItem>
+            ))}
+          </IonRadioGroup>
+        </IonList>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default RadioGroup;

packages/vue-router/package-lock.json

@@ -673,9 +673,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.7.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.1.tgz",
-      "integrity": "sha512-TSJDPWayn23Dw0gjwvbumo6piDrpZvyVccgMUGyKDrqduvBogzIsPrjPBYfTF4z4Sc/W0HMad17nBskC2+ybqw==",
+      "version": "8.7.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.2.tgz",
+      "integrity": "sha512-u1xTJHltvcwiHkwGowQ/uywiUmvszNeR4mXT5JSp1RH6npe8e9doIY9KSzKRrzpWu1T+H0bUwGbhaYg/I/poRA==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.36.2",
@@ -865,12 +865,12 @@
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "8.7.1",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.7.1.tgz",
-      "integrity": "sha512-b/wIsactN870z1t+jRWEemtCtO5QwBg5e49ycWiOjHYPYZd7UBU1lRWSrvzbtMNvBEYbTTWBHg/ewGFL7EFxBw==",
+      "version": "8.7.2",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.7.2.tgz",
+      "integrity": "sha512-5sOMt15X4DRHbIyrotv8FyUK8805V7ePJ36Hx0IS8Grv5PXySg+G0cN/bYHR+eg3Oc525ldkBlaM/cYwu1GOzQ==",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "8.7.1",
+        "@ionic/core": "8.7.2",
         "@stencil/vue-output-target": "0.10.7",
         "ionicons": "^8.0.13"
       }
@@ -8041,9 +8041,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.7.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.1.tgz",
-      "integrity": "sha512-TSJDPWayn23Dw0gjwvbumo6piDrpZvyVccgMUGyKDrqduvBogzIsPrjPBYfTF4z4Sc/W0HMad17nBskC2+ybqw==",
+      "version": "8.7.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.2.tgz",
+      "integrity": "sha512-u1xTJHltvcwiHkwGowQ/uywiUmvszNeR4mXT5JSp1RH6npe8e9doIY9KSzKRrzpWu1T+H0bUwGbhaYg/I/poRA==",
       "requires": {
         "@stencil/core": "4.36.2",
         "ionicons": "^8.0.13",
@@ -8156,11 +8156,11 @@
       "requires": {}
     },
     "@ionic/vue": {
-      "version": "8.7.1",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.7.1.tgz",
-      "integrity": "sha512-b/wIsactN870z1t+jRWEemtCtO5QwBg5e49ycWiOjHYPYZd7UBU1lRWSrvzbtMNvBEYbTTWBHg/ewGFL7EFxBw==",
+      "version": "8.7.2",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.7.2.tgz",
+      "integrity": "sha512-5sOMt15X4DRHbIyrotv8FyUK8805V7ePJ36Hx0IS8Grv5PXySg+G0cN/bYHR+eg3Oc525ldkBlaM/cYwu1GOzQ==",
       "requires": {
-        "@ionic/core": "8.7.1",
+        "@ionic/core": "8.7.2",
         "@stencil/vue-output-target": "0.10.7",
         "ionicons": "^8.0.13"
       }
@@ -12991,4 +12991,4 @@
       "dev": true
     }
   }
-}
+}

packages/vue/package-lock.json

@@ -222,9 +222,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.7.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.1.tgz",
-      "integrity": "sha512-TSJDPWayn23Dw0gjwvbumo6piDrpZvyVccgMUGyKDrqduvBogzIsPrjPBYfTF4z4Sc/W0HMad17nBskC2+ybqw==",
+      "version": "8.7.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.2.tgz",
+      "integrity": "sha512-u1xTJHltvcwiHkwGowQ/uywiUmvszNeR4mXT5JSp1RH6npe8e9doIY9KSzKRrzpWu1T+H0bUwGbhaYg/I/poRA==",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.36.2",
@@ -4019,4 +4019,4 @@
       "dev": true
     }
   }
-}
+}

packages/vue/test/base/index.html

@@ -14,18 +14,17 @@
     <meta name="format-detection" content="telephone=no" />
     <meta name="msapplication-tap-highlight" content="no" />
 
-    <link rel="shortcut icon" type="image/png" href="/assets/icon/favicon.png" />
+    <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
     <!-- add to homescreen for ios -->
-    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-title" content="Ionic App" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-
-    <script type="module" src="/src/main.ts"></script>
   </head>
 
   <body>
     <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 
 </html>

packages/vue/test/base/src/components/ModalContent.vue

@@ -2,7 +2,7 @@
   <ion-page>
     <ion-header>
       <ion-toolbar>
-        <ion-buttons>
+        <ion-buttons slot="end">
           <ion-button @click="dismiss" id="dismiss">Dismiss</ion-button>
         </ion-buttons>
         <ion-title>Modal</ion-title>

packages/vue/test/base/src/components/NavChild.vue

@@ -1,7 +1,7 @@
 <template>
   <ion-header>
     <ion-toolbar>
-      <ion-buttons>
+      <ion-buttons slot="start">
         <ion-back-button></ion-back-button>
       </ion-buttons>
       <ion-title>Nav - Child</ion-title>

packages/vue/test/base/src/components/NavRoot.vue

@@ -1,7 +1,7 @@
 <template>
   <ion-header>
     <ion-toolbar>
-      <ion-buttons>
+      <ion-buttons slot="end">
         <ion-button @click="dismiss">Dismiss</ion-button>
       </ion-buttons>
       <ion-title>Nav - Root</ion-title>

packages/vue/test/base/src/main.ts

@@ -20,6 +20,17 @@ import '@ionic/vue/css/text-transformation.css';
 import '@ionic/vue/css/flex-utils.css';
 import '@ionic/vue/css/display.css';
 
+/**
+ * Ionic Dark Mode
+ * -----------------------------------------------------
+ * For more info, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+/* @import '@ionic/vue/css/palettes/dark.always.css'; */
+/* @import '@ionic/vue/css/palettes/dark.class.css'; */
+import '@ionic/vue/css/palettes/dark.system.css';
+
 /* Theme variables */
 import './theme/variables.css';
 

packages/vue/test/base/src/router/index.ts

@@ -70,10 +70,6 @@ const routes: Array<RouteRecordRaw> = [
     path: '/navigation',
     component: () => import('@/views/Navigation.vue')
   },
-  {
-    path: '/components',
-    component: () => import('@/views/Components.vue'),
-  },
   {
     path: '/components/breadcrumbs',
     component: () => import('@/views/Breadcrumbs.vue')
@@ -92,26 +88,26 @@ const routes: Array<RouteRecordRaw> = [
   },
   {
     path: '/nested',
-    component: () => import('@/views/RouterOutlet.vue'),
+    component: () => import('@/views/nested/RouterOutlet.vue'),
     children: [
       {
         path: '',
-        component: () => import('@/views/NestedChild.vue')
+        component: () => import('@/views/nested/NestedChild.vue')
       },
       {
         path: 'two',
-        component: () => import('@/views/NestedChildTwo.vue')
+        component: () => import('@/views/nested/NestedChildTwo.vue')
       },
       {
         path: ':id',
-        component: () => import('@/views/Folder.vue'),
+        component: () => import('@/views/nested/Folder.vue'),
         props: true
       }
     ]
   },
   {
     path: '/tabs/',
-    component: () => import('@/views/Tabs.vue'),
+    component: () => import('@/views/tabs/Tabs.vue'),
     children: [
       {
         path: '',
@@ -119,33 +115,33 @@ const routes: Array<RouteRecordRaw> = [
       },
       {
         path: 'tab1',
-        component: () => import('@/views/Tab1.vue'),
+        component: () => import('@/views/tabs/Tab1.vue'),
       },
       {
         path: 'tab1/:id',
-        component: () => import('@/views/Tab1Parameter.vue'),
+        component: () => import('@/views/tabs/Tab1Parameter.vue'),
         props: true
       },
       {
         path: 'tab2',
-        component: () => import('@/views/Tab2.vue')
+        component: () => import('@/views/tabs/Tab2.vue')
       },
       {
         path: 'tab3',
         beforeEnter: (to, from, next) => {
           next({ path: '/tabs/tab1' });
         },
-        component: () => import('@/views/Tab3.vue')
+        component: () => import('@/views/tabs/Tab3.vue')
       },
       {
         path: 'tab4',
-        component: () => import('@/views/Tab4.vue')
+        component: () => import('@/views/tabs/Tab4.vue')
       }
     ]
   },
   {
     path: '/tabs-secondary/',
-    component: () => import('@/views/TabsSecondary.vue'),
+    component: () => import('@/views/tabs-secondary/TabsSecondary.vue'),
     children: [
       {
         path: '',
@@ -153,15 +149,15 @@ const routes: Array<RouteRecordRaw> = [
       },
       {
         path: 'tab1',
-        component: () => import('@/views/Tab1Secondary.vue')
+        component: () => import('@/views/tabs-secondary/Tab1Secondary.vue')
       },
       {
         path: 'tab2',
-        component: () => import('@/views/Tab2Secondary.vue')
+        component: () => import('@/views/tabs-secondary/Tab2Secondary.vue')
       },
       {
         path: 'tab3',
-        component: () => import('@/views/Tab3Secondary.vue')
+        component: () => import('@/views/tabs-secondary/Tab3Secondary.vue')
       }
     ]
   },

packages/vue/test/base/src/theme/variables.css

@@ -1,232 +1,10 @@
-/* Ionic Variables and Theming. For more info, please see:
+/* For information on how to create your own theme, please see:
 http://ionicframework.com/docs/theming/ */
 
-/** Ionic CSS Variables **/
-:root {
-  /** primary **/
-  --ion-color-primary: #3880ff;
-  --ion-color-primary-rgb: 56, 128, 255;
-  --ion-color-primary-contrast: #ffffff;
-  --ion-color-primary-contrast-rgb: 255, 255, 255;
-  --ion-color-primary-shade: #3171e0;
-  --ion-color-primary-tint: #4c8dff;
-
-  /** secondary **/
-  --ion-color-secondary: #3dc2ff;
-  --ion-color-secondary-rgb: 61, 194, 255;
-  --ion-color-secondary-contrast: #ffffff;
-  --ion-color-secondary-contrast-rgb: 255, 255, 255;
-  --ion-color-secondary-shade: #36abe0;
-  --ion-color-secondary-tint: #50c8ff;
-
-  /** tertiary **/
-  --ion-color-tertiary: #5260ff;
-  --ion-color-tertiary-rgb: 82, 96, 255;
-  --ion-color-tertiary-contrast: #ffffff;
-  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-  --ion-color-tertiary-shade: #4854e0;
-  --ion-color-tertiary-tint: #6370ff;
-
-  /** success **/
-  --ion-color-success: #2dd36f;
-  --ion-color-success-rgb: 45, 211, 111;
-  --ion-color-success-contrast: #ffffff;
-  --ion-color-success-contrast-rgb: 255, 255, 255;
-  --ion-color-success-shade: #28ba62;
-  --ion-color-success-tint: #42d77d;
-
-  /** warning **/
-  --ion-color-warning: #ffc409;
-  --ion-color-warning-rgb: 255, 196, 9;
-  --ion-color-warning-contrast: #000000;
-  --ion-color-warning-contrast-rgb: 0, 0, 0;
-  --ion-color-warning-shade: #e0ac08;
-  --ion-color-warning-tint: #ffca22;
-
-  /** danger **/
-  --ion-color-danger: #eb445a;
-  --ion-color-danger-rgb: 235, 68, 90;
-  --ion-color-danger-contrast: #ffffff;
-  --ion-color-danger-contrast-rgb: 255, 255, 255;
-  --ion-color-danger-shade: #cf3c4f;
-  --ion-color-danger-tint: #ed576b;
-
-  /** dark **/
-  --ion-color-dark: #222428;
-  --ion-color-dark-rgb: 34, 36, 40;
-  --ion-color-dark-contrast: #ffffff;
-  --ion-color-dark-contrast-rgb: 255, 255, 255;
-  --ion-color-dark-shade: #1e2023;
-  --ion-color-dark-tint: #383a3e;
-
-  /** medium **/
-  --ion-color-medium: #92949c;
-  --ion-color-medium-rgb: 146, 148, 156;
-  --ion-color-medium-contrast: #ffffff;
-  --ion-color-medium-contrast-rgb: 255, 255, 255;
-  --ion-color-medium-shade: #808289;
-  --ion-color-medium-tint: #9d9fa6;
-
-  /** light **/
-  --ion-color-light: #f4f5f8;
-  --ion-color-light-rgb: 244, 245, 248;
-  --ion-color-light-contrast: #000000;
-  --ion-color-light-contrast-rgb: 0, 0, 0;
-  --ion-color-light-shade: #d7d8da;
-  --ion-color-light-tint: #f5f6f9;
+.list-md {
+  background: transparent;
 }
 
-@media (prefers-color-scheme: dark) {
-  /*
-   * Dark Colors
-   * -------------------------------------------
-   */
-
-  body {
-    --ion-color-primary: #428cff;
-    --ion-color-primary-rgb: 66,140,255;
-    --ion-color-primary-contrast: #ffffff;
-    --ion-color-primary-contrast-rgb: 255,255,255;
-    --ion-color-primary-shade: #3a7be0;
-    --ion-color-primary-tint: #5598ff;
-
-    --ion-color-secondary: #50c8ff;
-    --ion-color-secondary-rgb: 80,200,255;
-    --ion-color-secondary-contrast: #ffffff;
-    --ion-color-secondary-contrast-rgb: 255,255,255;
-    --ion-color-secondary-shade: #46b0e0;
-    --ion-color-secondary-tint: #62ceff;
-
-    --ion-color-tertiary: #6a64ff;
-    --ion-color-tertiary-rgb: 106,100,255;
-    --ion-color-tertiary-contrast: #ffffff;
-    --ion-color-tertiary-contrast-rgb: 255,255,255;
-    --ion-color-tertiary-shade: #5d58e0;
-    --ion-color-tertiary-tint: #7974ff;
-
-    --ion-color-success: #2fdf75;
-    --ion-color-success-rgb: 47,223,117;
-    --ion-color-success-contrast: #000000;
-    --ion-color-success-contrast-rgb: 0,0,0;
-    --ion-color-success-shade: #29c467;
-    --ion-color-success-tint: #44e283;
-
-    --ion-color-warning: #ffd534;
-    --ion-color-warning-rgb: 255,213,52;
-    --ion-color-warning-contrast: #000000;
-    --ion-color-warning-contrast-rgb: 0,0,0;
-    --ion-color-warning-shade: #e0bb2e;
-    --ion-color-warning-tint: #ffd948;
-
-    --ion-color-danger: #ff4961;
-    --ion-color-danger-rgb: 255,73,97;
-    --ion-color-danger-contrast: #ffffff;
-    --ion-color-danger-contrast-rgb: 255,255,255;
-    --ion-color-danger-shade: #e04055;
-    --ion-color-danger-tint: #ff5b71;
-
-    --ion-color-dark: #f4f5f8;
-    --ion-color-dark-rgb: 244,245,248;
-    --ion-color-dark-contrast: #000000;
-    --ion-color-dark-contrast-rgb: 0,0,0;
-    --ion-color-dark-shade: #d7d8da;
-    --ion-color-dark-tint: #f5f6f9;
-
-    --ion-color-medium: #989aa2;
-    --ion-color-medium-rgb: 152,154,162;
-    --ion-color-medium-contrast: #000000;
-    --ion-color-medium-contrast-rgb: 0,0,0;
-    --ion-color-medium-shade: #86888f;
-    --ion-color-medium-tint: #a2a4ab;
-
-    --ion-color-light: #222428;
-    --ion-color-light-rgb: 34,36,40;
-    --ion-color-light-contrast: #ffffff;
-    --ion-color-light-contrast-rgb: 255,255,255;
-    --ion-color-light-shade: #1e2023;
-    --ion-color-light-tint: #383a3e;
-  }
-
-  /*
-   * iOS Dark Theme
-   * -------------------------------------------
-   */
-
-  .ios body {
-    --ion-background-color: #000000;
-    --ion-background-color-rgb: 0,0,0;
-
-    --ion-text-color: #ffffff;
-    --ion-text-color-rgb: 255,255,255;
-
-    --ion-color-step-50: #0d0d0d;
-    --ion-color-step-100: #1a1a1a;
-    --ion-color-step-150: #262626;
-    --ion-color-step-200: #333333;
-    --ion-color-step-250: #404040;
-    --ion-color-step-300: #4d4d4d;
-    --ion-color-step-350: #595959;
-    --ion-color-step-400: #666666;
-    --ion-color-step-450: #737373;
-    --ion-color-step-500: #808080;
-    --ion-color-step-550: #8c8c8c;
-    --ion-color-step-600: #999999;
-    --ion-color-step-650: #a6a6a6;
-    --ion-color-step-700: #b3b3b3;
-    --ion-color-step-750: #bfbfbf;
-    --ion-color-step-800: #cccccc;
-    --ion-color-step-850: #d9d9d9;
-    --ion-color-step-900: #e6e6e6;
-    --ion-color-step-950: #f2f2f2;
-
-    --ion-toolbar-background: #0d0d0d;
-
-    --ion-item-background: #000000;
-
-    --ion-card-background: #1c1c1d;
-  }
-
-
-  /*
-   * Material Design Dark Theme
-   * -------------------------------------------
-   */
-
-  .md body {
-    --ion-background-color: #121212;
-    --ion-background-color-rgb: 18,18,18;
-
-    --ion-text-color: #ffffff;
-    --ion-text-color-rgb: 255,255,255;
-
-    --ion-border-color: #222222;
-
-    --ion-color-step-50: #1e1e1e;
-    --ion-color-step-100: #2a2a2a;
-    --ion-color-step-150: #363636;
-    --ion-color-step-200: #414141;
-    --ion-color-step-250: #4d4d4d;
-    --ion-color-step-300: #595959;
-    --ion-color-step-350: #656565;
-    --ion-color-step-400: #717171;
-    --ion-color-step-450: #7d7d7d;
-    --ion-color-step-500: #898989;
-    --ion-color-step-550: #949494;
-    --ion-color-step-600: #a0a0a0;
-    --ion-color-step-650: #acacac;
-    --ion-color-step-700: #b8b8b8;
-    --ion-color-step-750: #c4c4c4;
-    --ion-color-step-800: #d0d0d0;
-    --ion-color-step-850: #dbdbdb;
-    --ion-color-step-900: #e7e7e7;
-    --ion-color-step-950: #f3f3f3;
-
-    --ion-item-background: #1e1e1e;
-
-    --ion-toolbar-background: #1f1f1f;
-
-    --ion-tab-bar-background: #1f1f1f;
-
-    --ion-card-background: #1e1e1e;
-  }
+.list-ios ion-item {
+  --ion-item-background: #1c1c1e;
 }

packages/vue/test/base/src/views/Breadcrumbs.vue

@@ -2,6 +2,9 @@
   <ion-page>
     <ion-header>
       <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/"></ion-back-button>
+        </ion-buttons>
         <ion-title>Breadcrumbs</ion-title>
       </ion-toolbar>
     </ion-header>
@@ -29,25 +32,16 @@
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {
-  IonPage,
+  IonBackButton,
+  IonBreadcrumb,
+  IonBreadcrumbs,
+  IonButtons,
+  IonContent,
   IonHeader,
   IonToolbar,
   IonTitle,
-  IonContent,
-  IonBreadcrumbs,
+  IonPage,
 } from "@ionic/vue";
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  components: {
-    IonPage,
-    IonHeader,
-    IonToolbar,
-    IonTitle,
-    IonContent,
-    IonBreadcrumbs,
-  },
-});
 </script>

packages/vue/test/base/src/views/Components.vue

@@ -1,26 +0,0 @@
-<template>
-  <ion-page>
-    <ion-content>
-      <ion-list>
-        <ion-item router-link="/components/breadcrumbs">
-          <ion-label>Breadcrumbs</ion-label>
-        </ion-item>
-        <ion-item router-link="/components/select">
-          <ion-label>Select</ion-label>
-        </ion-item>
-        <ion-item router-link="/components/range">
-          <ion-label>Range</ion-label>
-        </ion-item>
-      </ion-list>
-    </ion-content>
-  </ion-page>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-import { IonPage, IonContent, IonList, IonItem, IonLabel } from "@ionic/vue";
-
-export default defineComponent({
-  components: { IonPage, IonContent, IonList, IonItem, IonLabel },
-});
-</script>

packages/vue/test/base/src/views/DefaultHref.vue

@@ -2,7 +2,7 @@
   <ion-page data-pageid="defaulthref">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
+        <ion-buttons slot="start">
           <ion-back-button default-href="/"></ion-back-button>
         </ion-buttons>
         <ion-title>DefaultHref</ion-title>

packages/vue/test/base/src/views/Home.vue

@@ -17,21 +17,21 @@
       </ion-header>
 
       <ion-list>
+        <ion-list-header>
+          <ion-label>Overlays</ion-label>
+        </ion-list-header>
         <ion-item router-link="/overlays">
           <ion-label>Overlays</ion-label>
         </ion-item>
-        <ion-item router-link="/icons">
-          <ion-label>Icons</ion-label>
-        </ion-item>
-        <ion-item router-link="/inputs">
-          <ion-label>Inputs</ion-label>
-        </ion-item>
+      </ion-list>
+
+      <ion-list>
+        <ion-list-header>
+          <ion-label>Navigation</ion-label>
+        </ion-list-header>
         <ion-item router-link="/navigation" id="navigation">
           <ion-label>Navigation</ion-label>
         </ion-item>
-        <ion-item router-link="/reorder-group">
-          <ion-label>Reorder Group</ion-label>
-        </ion-item>
         <ion-item router-link="/routing" id="routing">
           <ion-label>Routing</ion-label>
         </ion-item>
@@ -59,15 +59,36 @@
         <ion-item router-link="/delayed-redirect" id="delayed-redirect">
           <ion-label>Delayed Redirect</ion-label>
         </ion-item>
-        <ion-item router-link="/components">
+      </ion-list>
+
+      <ion-list>
+        <ion-list-header>
           <ion-label>Components</ion-label>
+        </ion-list-header>
+        <ion-item router-link="/components/breadcrumbs">
+          <ion-label>Breadcrumbs</ion-label>
+        </ion-item>
+        <ion-item router-link="/icons">
+          <ion-label>Icons</ion-label>
+        </ion-item>
+        <ion-item router-link="/inputs">
+          <ion-label>Inputs</ion-label>
+        </ion-item>
+        <ion-item router-link="/components/range">
+          <ion-label>Range</ion-label>
+        </ion-item>
+        <ion-item router-link="/reorder-group">
+          <ion-label>Reorder Group</ion-label>
+        </ion-item>
+        <ion-item router-link="/components/select">
+          <ion-label>Select</ion-label>
         </ion-item>
       </ion-list>
     </ion-content>
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {
   IonButtons,
   IonBackButton,
@@ -76,24 +97,9 @@ import {
   IonItem,
   IonLabel,
   IonList,
+  IonListHeader,
   IonPage,
   IonTitle,
   IonToolbar,
 } from "@ionic/vue";
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  components: {
-    IonButtons,
-    IonBackButton,
-    IonContent,
-    IonHeader,
-    IonItem,
-    IonLabel,
-    IonList,
-    IonPage,
-    IonTitle,
-    IonToolbar,
-  },
-});
 </script>

packages/vue/test/base/src/views/Icons.vue

@@ -2,8 +2,8 @@
   <ion-page data-pageid="icons">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
-          <ion-back-button></ion-back-button>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/"></ion-back-button>
         </ion-buttons>
         <ion-title>Icons</ion-title>
       </ion-toolbar>

packages/vue/test/base/src/views/Inputs.vue

@@ -2,8 +2,8 @@
   <ion-page data-pageid="inputs">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
-          <ion-back-button></ion-back-button>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/"></ion-back-button>
         </ion-buttons>
         <ion-title>Inputs</ion-title>
       </ion-toolbar>

packages/vue/test/base/src/views/Lifecycle.vue

@@ -2,8 +2,8 @@
   <ion-page data-pageid="lifecycle">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
-          <ion-back-button></ion-back-button>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/"></ion-back-button>
         </ion-buttons>
         <ion-title>Lifecycle</ion-title>
       </ion-toolbar>

packages/vue/test/base/src/views/LifecycleSetup.vue

@@ -2,8 +2,8 @@
   <ion-page data-pageid="lifecycle-setup">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
-          <ion-back-button></ion-back-button>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/"></ion-back-button>
         </ion-buttons>
         <ion-title>Lifecycle (Setup)</ion-title>
       </ion-toolbar>

packages/vue/test/base/src/views/Navigation.vue

@@ -2,8 +2,8 @@
   <ion-page data-pageid="navigation">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
-          <ion-back-button></ion-back-button>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/"></ion-back-button>
         </ion-buttons>
         <ion-title>Navigation</ion-title>
       </ion-toolbar>

packages/vue/test/base/src/views/Overlays.vue

@@ -2,68 +2,69 @@
   <ion-page data-pageid="overlays">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
-          <ion-back-button></ion-back-button>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/"></ion-back-button>
         </ion-buttons>
         <ion-title>Overlays</ion-title>
       </ion-toolbar>
     </ion-header>
 
-    <ion-content class="ion-padding" :fullscreen="true">
-      <ion-radio-group v-model="componentType">
-        <ion-list-header>
-          <ion-label>
-            Component
-          </ion-label>
-        </ion-list-header>
+    <ion-content :fullscreen="true">
+      <ion-list>
+        <ion-radio-group v-model="componentType">
+          <ion-list-header>
+            <ion-label>
+              Component
+            </ion-label>
+          </ion-list-header>
 
-        <ion-item>
-          <ion-radio value="alert" id="ion-alert">Alert</ion-radio>
-        </ion-item>
-        <ion-item>
-          <ion-radio value="action-sheet" id="ion-action-sheet">Action Sheet</ion-radio>
-        </ion-item>
-        <ion-item>
-          <ion-radio value="loading" id="ion-loading">Loading</ion-radio>
-        </ion-item>
-        <ion-item>
-          <ion-radio value="modal" id="ion-modal">Modal</ion-radio>
-        </ion-item>
-        <ion-item>
-          <ion-radio value="popover" id="ion-popover">Popover</ion-radio>
-        </ion-item>
-        <ion-item>
-          <ion-radio value="toast" id="ion-toast">Toast</ion-radio>
-        </ion-item>
-      </ion-radio-group>
+          <ion-item>
+            <ion-radio value="alert" id="ion-alert">Alert</ion-radio>
+          </ion-item>
+          <ion-item>
+            <ion-radio value="action-sheet" id="ion-action-sheet">Action Sheet</ion-radio>
+          </ion-item>
+          <ion-item>
+            <ion-radio value="loading" id="ion-loading">Loading</ion-radio>
+          </ion-item>
+          <ion-item>
+            <ion-radio value="modal" id="ion-modal">Modal</ion-radio>
+          </ion-item>
+          <ion-item>
+            <ion-radio value="popover" id="ion-popover">Popover</ion-radio>
+          </ion-item>
+          <ion-item>
+            <ion-radio value="toast" id="ion-toast">Toast</ion-radio>
+          </ion-item>
+        </ion-radio-group>
 
-      <ion-radio-group v-model="presentationType">
-        <ion-list-header>
-          <ion-label>
-            Presentation Type
-          </ion-label>
-        </ion-list-header>
+        <ion-radio-group v-model="presentationType">
+          <ion-list-header>
+            <ion-label>
+              Presentation Type
+            </ion-label>
+          </ion-list-header>
 
-        <ion-item>
-          <ion-radio value="controller" id="controller">Controller</ion-radio>
-        </ion-item>
-        <ion-item>
-          <ion-radio value="component" id="component">Component</ion-radio>
-        </ion-item>
-      </ion-radio-group>
+          <ion-item>
+            <ion-radio value="controller" id="controller">Controller</ion-radio>
+          </ion-item>
+          <ion-item>
+            <ion-radio value="component" id="component">Component</ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      </ion-list>
 
-      <br />
+      <div class="ion-display-flex ion-justify-content-center ion-flex-wrap ion-margin">
+        <ion-button @click="present($event)" id="present-overlay">Present Overlay</ion-button>
+        <ion-button @click="changeLoadingProps()" id="change-loading-props">Quickly Change Loading Props</ion-button>
+      </div>
 
-      <ion-button @click="present($event)" id="present-overlay">Present Overlay</ion-button>
-
-      <ion-button @click="changeLoadingProps()" id="change-loading-props">Quickly Change Loading Props</ion-button>
-
-      <br /><br />
-
-      Modal onWillPresent: <div id="willPresent">{{ willPresent }}</div><br />
-      Modal onDidPresent: <div id="didPresent">{{ didPresent }}</div><br />
-      Modal onWillDismiss: <div id="willDismiss">{{ willDismiss }}</div><br />
-      Modal onDidDismiss: <div id="didDismiss">{{ didDismiss }}</div><br />
+      <div class="ion-padding">
+        Modal onWillPresent: <div id="willPresent">{{ willPresent }}</div><br />
+        Modal onDidPresent: <div id="didPresent">{{ didPresent }}</div><br />
+        Modal onWillDismiss: <div id="willDismiss">{{ willDismiss }}</div><br />
+        Modal onDidDismiss: <div id="didDismiss">{{ didDismiss }}</div><br />
+      </div>
 
       <ion-action-sheet
         :is-open="isActionSheetOpen"
@@ -131,6 +132,7 @@ import {
   IonHeader,
   IonItem,
   IonLabel,
+  IonList,
   IonListHeader,
   IonPage,
   IonRadio,
@@ -166,6 +168,7 @@ export default defineComponent({
     IonHeader,
     IonItem,
     IonLabel,
+    IonList,
     IonListHeader,
     IonPage,
     IonRadio,

packages/vue/test/base/src/views/OverlaysKeepContentsMounted.vue

@@ -2,7 +2,7 @@
   <ion-page data-pageid="overlays-automount">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
+        <ion-buttons slot="start">
           <ion-back-button></ion-back-button>
         </ion-buttons>
         <ion-title>Overlays - Auto Mount</ion-title>

packages/vue/test/base/src/views/Range.vue

@@ -2,6 +2,9 @@
   <ion-page>
     <ion-header>
       <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/"></ion-back-button>
+        </ion-buttons>
         <ion-title>Range</ion-title>
       </ion-toolbar>
     </ion-header>
@@ -23,6 +26,8 @@
 <script lang="ts">
 import {
   IonPage,
+  IonBackButton,
+  IonButtons,
   IonHeader,
   IonToolbar,
   IonTitle,
@@ -36,6 +41,8 @@ import { defineComponent } from "vue";
 export default defineComponent({
   components: {
     IonPage,
+    IonBackButton,
+    IonButtons,
     IonHeader,
     IonToolbar,
     IonTitle,

packages/vue/test/base/src/views/ReorderGroup.vue

@@ -3,7 +3,7 @@
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-buttons slot="start">
-          <ion-back-button></ion-back-button>
+          <ion-back-button default-href="/"></ion-back-button>
         </ion-buttons>
         <ion-title>Reorder Group</ion-title>
       </ion-toolbar>

packages/vue/test/base/src/views/Routing.vue

@@ -2,8 +2,8 @@
   <ion-page data-pageid="routing">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
-          <ion-back-button></ion-back-button>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/"></ion-back-button>
         </ion-buttons>
         <ion-title>Routing</ion-title>
       </ion-toolbar>

packages/vue/test/base/src/views/RoutingChild.vue

@@ -2,8 +2,8 @@
   <ion-page data-pageid="routingchild">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
-          <ion-back-button></ion-back-button>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/routing"></ion-back-button>
         </ion-buttons>
         <ion-title>Routing Child</ion-title>
       </ion-toolbar>

packages/vue/test/base/src/views/RoutingParameter.vue

@@ -2,8 +2,8 @@
   <ion-page :data-pageid="'routingparameter-' + $props.id">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
-          <ion-back-button></ion-back-button>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/routing"></ion-back-button>
         </ion-buttons>
         <ion-title>Routing Parameter</ion-title>
       </ion-toolbar>

packages/vue/test/base/src/views/RoutingParameterView.vue

@@ -2,8 +2,8 @@
   <ion-page data-pageid="routingparameterview">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
-          <ion-back-button></ion-back-button>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/routing"></ion-back-button>
         </ion-buttons>
         <ion-title>Routing Parameter View</ion-title>
       </ion-toolbar>

packages/vue/test/base/src/views/Select.vue

@@ -2,6 +2,9 @@
   <ion-page>
     <ion-header>
       <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/"></ion-back-button>
+        </ion-buttons>
         <ion-title>Select</ion-title>
       </ion-toolbar>
     </ion-header>
@@ -25,6 +28,8 @@
 <script lang="ts">
 import {
   IonPage,
+  IonBackButton,
+  IonButtons,
   IonHeader,
   IonToolbar,
   IonTitle,
@@ -38,6 +43,8 @@ import { defineComponent } from "vue";
 export default defineComponent({
   components: {
     IonPage,
+    IonBackButton,
+    IonButtons,
     IonHeader,
     IonToolbar,
     IonTitle,

packages/vue/test/base/src/views/Template.vue

@@ -2,7 +2,7 @@
   <ion-page>
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
+        <ion-buttons slot="start">
           <ion-back-button></ion-back-button>
         </ion-buttons>
         <ion-title>Template</ion-title>

packages/vue/test/base/src/views/VersionTest.vue

@@ -2,8 +2,8 @@
   <ion-page data-pageid="version-test">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
-          <ion-back-button></ion-back-button>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/"></ion-back-button>
         </ion-buttons>
         <ion-title>VersionTest</ion-title>
       </ion-toolbar>

packages/vue/test/base/src/views/nested/NestedChild.vue

@@ -2,7 +2,7 @@
   <ion-page data-pageid="nestedchild">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
+        <ion-buttons slot="start">
           <ion-back-button></ion-back-button>
         </ion-buttons>
         <ion-title>Nested Child</ion-title>

packages/vue/test/base/src/views/nested/NestedChildTwo.vue

@@ -2,7 +2,7 @@
   <ion-page data-pageid="nestedchildtwo">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
+        <ion-buttons slot="start">
           <ion-back-button></ion-back-button>
         </ion-buttons>
         <ion-title>Nested Child Two</ion-title>

packages/vue/test/base/src/views/nested/RouterOutlet.vue

@@ -3,7 +3,7 @@
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="start">
-          <ion-back-button id="routeroutlet-back-button" text="Back to main outlet"></ion-back-button>
+          <ion-back-button id="routeroutlet-back-button" text="Back to main outlet" default-href="/"></ion-back-button>
           <ion-button id="inbox" router-link="/nested/inbox" router-direction="root">Inbox</ion-button>
           <ion-button id="trash" router-link="/nested/trash" router-direction="root">Trash</ion-button>
           <ion-button id="outbox" router-link="/nested/outbox" router-direction="root">Outbox</ion-button>

packages/vue/test/base/src/views/tabs-secondary/Tab1Secondary.vue

@@ -2,7 +2,7 @@
   <ion-page data-pageid="tab1-secondary">
     <ion-header>
       <ion-toolbar>
-        <ion-buttons>
+        <ion-buttons slot="start">
           <ion-back-button default-href="/"></ion-back-button>
         </ion-buttons>
         <ion-title>Tab 1 - Secondary</ion-title>

packages/vue/test/base/src/views/tabs/Tab1.vue

@@ -2,7 +2,7 @@
   <ion-page data-pageid="tab1">
     <ion-header>
       <ion-toolbar>
-        <ion-buttons>
+        <ion-buttons slot="start">
           <ion-back-button default-href="/"></ion-back-button>
         </ion-buttons>
         <ion-title>Tab 1</ion-title>

packages/vue/test/base/src/views/tabs/Tab1Parameter.vue

@@ -2,7 +2,7 @@
   <ion-page :data-pageid="'tab1' + $props.id">
     <ion-header>
       <ion-toolbar>
-        <ion-buttons>
+        <ion-buttons slot="start">
           <ion-back-button></ion-back-button>
         </ion-buttons>
         <ion-title>Tab 1 Child {{ $props.id }}</ion-title>

packages/vue/test/base/src/views/tabs/Tab2.vue

@@ -2,7 +2,7 @@
   <ion-page data-pageid="tab2">
     <ion-header>
       <ion-toolbar>
-        <ion-buttons>
+        <ion-buttons slot="start">
           <ion-back-button default-href="/"></ion-back-button>
         </ion-buttons>
         <ion-title>Tab 2</ion-title>

packages/vue/test/base/src/views/tabs/Tabs.vue

@@ -37,7 +37,7 @@ export default defineComponent({
     ])
     const router = useRouter();
     const addTab = () => {
-      router.addRoute({ path: '/tabs/tab4', component: () => import('@/views/Tab4.vue') });
+      router.addRoute({ path: '/tabs/tab4', component: () => import('@/views/tabs/Tab4.vue') });
       tabs.value = [
         ...tabs.value,
         {

packages/vue/test/base/tests/e2e/specs/routing.cy.js

@@ -2,7 +2,7 @@ describe('Routing', () => {
   it('should go to sibling page', () => {
     cy.visit('/');
     cy.ionPageVisible('home');
-    cy.get('ion-item#routing').click();
+    cy.get('ion-item#routing').click({ force: true });
 
     cy.ionPageVisible('routing');
     cy.ionPageHidden('home');
@@ -18,7 +18,7 @@ describe('Routing', () => {
   it('should go back home', () => {
     cy.visit('/');
     cy.ionPageVisible('home');
-    cy.get('ion-item#routing').click();
+    cy.get('ion-item#routing').click({ force: true });
 
     cy.ionBackClick('routing');
 
@@ -40,7 +40,7 @@ describe('Routing', () => {
     cy.visit('/');
     cy.ionPageVisible('home');
 
-    cy.get('#routing').click();
+    cy.get('#routing').click({ force: true });
     cy.get('#child').click();
 
     cy.ionBackClick('routingchild');
@@ -539,7 +539,7 @@ describe('Routing - Swipe to Go Back', () => {
     cy.viewport(320, 568);
     cy.visit('?ionic:mode=ios');
     cy.ionPageVisible('home');
-    cy.get('#routing').click();
+    cy.get('#routing').click({ force: true });
     cy.ionPageHidden('home');
     cy.ionPageVisible('routing')
   });

packages/vue/test/base/tests/e2e/specs/tabs.cy.js

@@ -125,14 +125,14 @@ describe('Tabs', () => {
       cy.visit('/')
       cy.ionPageVisible('home');
 
-      cy.get('#tabs').click();
+      cy.get('#tabs').click({ force: true });
       cy.ionPageVisible('tab1');
       cy.ionPageHidden('home');
 
       cy.ionBackClick('tab1');
       cy.ionPageDoesNotExist('tabs');
 
-      cy.get('#tabs').click();
+      cy.get('#tabs').click({ force: true });
       cy.ionPageVisible('tab1');
       cy.ionPageHidden('home');
 
@@ -144,7 +144,7 @@ describe('Tabs', () => {
       cy.visit('/');
       cy.ionPageVisible('home');
 
-      cy.get('#tabs').click();
+      cy.get('#tabs').click({ force: true });
       cy.ionPageVisible('tab1');
 
       cy.get('ion-tab-button#tab-button-tab2').click();
@@ -159,7 +159,7 @@ describe('Tabs', () => {
       cy.visit('/');
       cy.ionPageVisible('home');
 
-      cy.get('#tabs').click();
+      cy.get('#tabs').click({ force: true });
       cy.ionPageVisible('tab1');
 
       cy.get('ion-tab-button#tab-button-tab2').click();
@@ -169,7 +169,7 @@ describe('Tabs', () => {
       cy.ionPageVisible('home')
       cy.ionPageDoesNotExist('tabs');
 
-      cy.get('#tabs').click();
+      cy.get('#tabs').click({ force: true });
       cy.ionPageVisible('tab1');
 
       cy.get('ion-tab-button#tab-button-tab2').click();
@@ -639,7 +639,7 @@ describe('Tabs', () => {
       cy.viewport(320, 568);
       cy.visit('?ionic:mode=ios');
       cy.ionPageVisible('home');
-      cy.get('#tabs').click();
+      cy.get('#tabs').click({ force: true });
       cy.ionPageHidden('home');
       cy.ionPageVisible('tab1')
     });

packages/vue/test/base/vite.config.js

@@ -20,5 +20,8 @@ export default defineConfig({
   // Preview applies to "vite preview" command
   preview: {
     port: 8080
+  },
+  define: {
+    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
   }
 })