test(chip): reduce file space

test(chip): add to the states
fix(toast): keep icon on the same line as long message in stacked layout (#30923 )
2026-03-13 10:22:08 +08:00 · 2026-01-22 08:12:25 -08:00 · 2026-01-21 16:55:44 -08:00 · 2026-01-19 21:48:13 +00:00 · 2026-01-15 14:56:28 +00:00 · 2026-01-15 14:54:52 +00:00
101 changed files with 1825 additions and 386 deletions
--- a/.github/actions/publish-npm/action.yml
+++ b/.github/actions/publish-npm/action.yml
@@ -22,7 +22,7 @@ runs:
  using: 'composite'
  steps:
    - name: 🟢 Configure Node for Publish
-      uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+      uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
      with:
        node-version: ${{ inputs.node-version }}
        registry-url: 'https://registry.npmjs.org'
--- a/.github/ionic-issue-bot.yml
+++ b/.github/ionic-issue-bot.yml
@@ -40,7 +40,7 @@ comment:


        If the requested feature is something you would find useful for your applications, please react to the original post with 👍 (`+1`). If you would like to provide an additional use case for the feature, please post a comment.
-        
+

        The team will review this feedback and make a final decision. Any decision will be posted on this thread, but please note that we may ultimately decide not to pursue this feature.

@@ -83,6 +83,7 @@ stale:
  exemptLabels:
    - "good first issue"
    - "triage"
+    - "bug: external"
    - "type: bug"
    - "type: feature request"
    - "needs: investigation"
--- a/.github/workflows/actions/build-angular-server/action.yml
+++ b/.github/workflows/actions/build-angular-server/action.yml
@@ -3,7 +3,7 @@ description: 'Build Ionic Angular Server'
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
      with:
        node-version: 24.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/build-core-stencil-prerelease/action.yml
+++ b/.github/workflows/actions/build-core-stencil-prerelease/action.yml
@@ -9,7 +9,7 @@ runs:
  using: 'composite'
  steps:
    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
      with:
        node-version: 24.x

--- a/.github/workflows/actions/build-core/action.yml
+++ b/.github/workflows/actions/build-core/action.yml
@@ -9,7 +9,7 @@ runs:
  using: 'composite'
  steps:
    - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
      with:
        node-version: 24.x
    - name: 🕸️ Install Dependencies
--- a/.github/workflows/actions/build-react-router/action.yml
+++ b/.github/workflows/actions/build-react-router/action.yml
@@ -3,7 +3,7 @@ description: 'Build Ionic React Router'
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
      with:
        node-version: 24.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/build-react/action.yml
+++ b/.github/workflows/actions/build-react/action.yml
@@ -3,7 +3,7 @@ description: 'Build Ionic React'
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
      with:
        node-version: 24.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/build-vue-router/action.yml
+++ b/.github/workflows/actions/build-vue-router/action.yml
@@ -3,7 +3,7 @@ description: 'Builds Ionic Vue Router'
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
      with:
        node-version: 24.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/build-vue/action.yml
+++ b/.github/workflows/actions/build-vue/action.yml
@@ -3,7 +3,7 @@ description: 'Build Ionic Vue'
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
      with:
        node-version: 24.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/test-angular-e2e/action.yml
+++ b/.github/workflows/actions/test-angular-e2e/action.yml
@@ -6,7 +6,7 @@ inputs:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
      with:
        node-version: 24.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/test-core-clean-build/action.yml
+++ b/.github/workflows/actions/test-core-clean-build/action.yml
@@ -3,7 +3,7 @@ description: 'Test Core Clean Build'
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
      with:
        node-version: 24.x

--- a/.github/workflows/actions/test-core-lint/action.yml
+++ b/.github/workflows/actions/test-core-lint/action.yml
@@ -3,7 +3,7 @@ description: 'Test Core Lint'
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
      with:
        node-version: 24.x
    - name: 🕸️ Install Dependencies
--- a/.github/workflows/actions/test-core-screenshot/action.yml
+++ b/.github/workflows/actions/test-core-screenshot/action.yml
@@ -13,7 +13,7 @@ inputs:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
      with:
        node-version: 24.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/test-core-spec/action.yml
+++ b/.github/workflows/actions/test-core-spec/action.yml
@@ -6,7 +6,7 @@ inputs:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
      with:
        node-version: 24.x
    - name: 🕸️ Install Dependencies
--- a/.github/workflows/actions/test-react-e2e/action.yml
+++ b/.github/workflows/actions/test-react-e2e/action.yml
@@ -6,7 +6,7 @@ inputs:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
      with:
        node-version: 24.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/test-react-router-e2e/action.yml
+++ b/.github/workflows/actions/test-react-router-e2e/action.yml
@@ -6,7 +6,7 @@ inputs:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
      with:
        node-version: 24.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/test-vue-e2e/action.yml
+++ b/.github/workflows/actions/test-vue-e2e/action.yml
@@ -6,7 +6,7 @@ inputs:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
      with:
        node-version: 24.x
    - uses: ./.github/workflows/actions/download-archive
--- a/.github/workflows/actions/update-reference-screenshots/action.yml
+++ b/.github/workflows/actions/update-reference-screenshots/action.yml
@@ -7,7 +7,7 @@ on:
 runs:
  using: 'composite'
  steps:
-    - uses: actions/setup-node@395ad3262231945c25e8478fd5baf05154b1d79f # v6.1.0
+    - uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
      with:
        node-version: 24.x
    - uses: actions/download-artifact@v7
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,55 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [8.7.17](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.17) (2026-01-14)
+
+
+### Bug Fixes
+
+* **input:** prevent Android TalkBack from focusing label separately ([#30895](https://github.com/ionic-team/ionic-framework/issues/30895)) ([ab733b7](https://github.com/ionic-team/ionic-framework/commit/ab733b71dd355d9486757f219fe09acaefeeefcc))
+* **input:** prevent placeholder from overlapping start slot during scroll assist ([#30896](https://github.com/ionic-team/ionic-framework/issues/30896)) ([3b3318d](https://github.com/ionic-team/ionic-framework/commit/3b3318da513b199128f3822bd8226797cd118b0f))
+* **tab-bar:** prevent keyboard controller memory leak on rapid mount/unmount ([#30906](https://github.com/ionic-team/ionic-framework/issues/30906)) ([f99d000](https://github.com/ionic-team/ionic-framework/commit/f99d0007a8ffc9c7d3d2636e912c37c12112b21d))
+
+
+
+
+
+## [8.7.16](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.16) (2025-12-31)
+
+
+### Bug Fixes
+
+* **modal:** prevent card modal animation on viewport resize when modal is closed ([#30894](https://github.com/ionic-team/ionic-framework/issues/30894)) ([e5634d4](https://github.com/ionic-team/ionic-framework/commit/e5634d45ee5fd32715f6e6b75e0448f74ee1f8f2)), closes [#30679](https://github.com/ionic-team/ionic-framework/issues/30679)
+
+
+
+
+
+## [8.7.15](https://github.com/ionic-team/ionic-framework/compare/v8.7.14...v8.7.15) (2025-12-23)
+
+
+### Bug Fixes
+
+* **core:** use Capacitor safe-area CSS variables on older WebViews ([#30865](https://github.com/ionic-team/ionic-framework/issues/30865)) ([8573bf8](https://github.com/ionic-team/ionic-framework/commit/8573bf8083f75eda13c954a56731a6aac8ca5724))
+* **header:** show iOS condense header when app is in MD mode ([#30690](https://github.com/ionic-team/ionic-framework/issues/30690)) ([f83b000](https://github.com/ionic-team/ionic-framework/commit/f83b0005309400d674e43c497bdffbcb9d2c4d94)), closes [#29929](https://github.com/ionic-team/ionic-framework/issues/29929)
+* **input-password-toggle:** improve screen reader announcements ([#30885](https://github.com/ionic-team/ionic-framework/issues/30885)) ([12ede4b](https://github.com/ionic-team/ionic-framework/commit/12ede4b79c8d5cffc2b014c7c8a0d2ef1d3bf90d))
+* **modal:** dismiss top-most overlay when multiple IDs match ([#30883](https://github.com/ionic-team/ionic-framework/issues/30883)) ([3b60a1d](https://github.com/ionic-team/ionic-framework/commit/3b60a1d68a1df1606ffee0bde7db7a206bac404a)), closes [#30030](https://github.com/ionic-team/ionic-framework/issues/30030)
+
+
+
+
+
+## [8.7.14](https://github.com/ionic-team/ionic-framework/compare/v8.7.13...v8.7.14) (2025-12-17)
+
+
+### Bug Fixes
+
+* **tabs:** select correct tab when routes have similar prefixes ([#30863](https://github.com/ionic-team/ionic-framework/issues/30863)) ([03fb422](https://github.com/ionic-team/ionic-framework/commit/03fb422bfa775e3e9dd695ea1857fa88d4245ecd)), closes [#30448](https://github.com/ionic-team/ionic-framework/issues/30448)
+
+
+
+
+
 ## [8.7.13](https://github.com/ionic-team/ionic-framework/compare/v8.7.12...v8.7.13) (2025-12-13)

 **Note:** Version bump only for package ionic-framework
--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,52 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [8.7.17](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.17) (2026-01-14)
+
+
+### Bug Fixes
+
+* **input:** prevent Android TalkBack from focusing label separately ([#30895](https://github.com/ionic-team/ionic-framework/issues/30895)) ([ab733b7](https://github.com/ionic-team/ionic-framework/commit/ab733b71dd355d9486757f219fe09acaefeeefcc))
+* **input:** prevent placeholder from overlapping start slot during scroll assist ([#30896](https://github.com/ionic-team/ionic-framework/issues/30896)) ([3b3318d](https://github.com/ionic-team/ionic-framework/commit/3b3318da513b199128f3822bd8226797cd118b0f))
+* **tab-bar:** prevent keyboard controller memory leak on rapid mount/unmount ([#30906](https://github.com/ionic-team/ionic-framework/issues/30906)) ([f99d000](https://github.com/ionic-team/ionic-framework/commit/f99d0007a8ffc9c7d3d2636e912c37c12112b21d))
+
+
+
+
+
+## [8.7.16](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.16) (2025-12-31)
+
+
+### Bug Fixes
+
+* **modal:** prevent card modal animation on viewport resize when modal is closed ([#30894](https://github.com/ionic-team/ionic-framework/issues/30894)) ([e5634d4](https://github.com/ionic-team/ionic-framework/commit/e5634d45ee5fd32715f6e6b75e0448f74ee1f8f2)), closes [#30679](https://github.com/ionic-team/ionic-framework/issues/30679)
+
+
+
+
+
+## [8.7.15](https://github.com/ionic-team/ionic-framework/compare/v8.7.14...v8.7.15) (2025-12-23)
+
+
+### Bug Fixes
+
+* **core:** use Capacitor safe-area CSS variables on older WebViews ([#30865](https://github.com/ionic-team/ionic-framework/issues/30865)) ([8573bf8](https://github.com/ionic-team/ionic-framework/commit/8573bf8083f75eda13c954a56731a6aac8ca5724))
+* **header:** show iOS condense header when app is in MD mode ([#30690](https://github.com/ionic-team/ionic-framework/issues/30690)) ([f83b000](https://github.com/ionic-team/ionic-framework/commit/f83b0005309400d674e43c497bdffbcb9d2c4d94)), closes [#29929](https://github.com/ionic-team/ionic-framework/issues/29929)
+* **input-password-toggle:** improve screen reader announcements ([#30885](https://github.com/ionic-team/ionic-framework/issues/30885)) ([12ede4b](https://github.com/ionic-team/ionic-framework/commit/12ede4b79c8d5cffc2b014c7c8a0d2ef1d3bf90d))
+* **modal:** dismiss top-most overlay when multiple IDs match ([#30883](https://github.com/ionic-team/ionic-framework/issues/30883)) ([3b60a1d](https://github.com/ionic-team/ionic-framework/commit/3b60a1d68a1df1606ffee0bde7db7a206bac404a)), closes [#30030](https://github.com/ionic-team/ionic-framework/issues/30030)
+
+
+
+
+
+## [8.7.14](https://github.com/ionic-team/ionic-framework/compare/v8.7.13...v8.7.14) (2025-12-17)
+
+**Note:** Version bump only for package @ionic/core
+
+
+
+
+
 ## [8.7.13](https://github.com/ionic-team/ionic-framework/compare/v8.7.12...v8.7.13) (2025-12-13)

 **Note:** Version bump only for package @ionic/core
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@ionic/core",
-  "version": "8.7.13",
+  "version": "8.7.17",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/core",
-      "version": "8.7.13",
+      "version": "8.7.17",
      "license": "MIT",
      "dependencies": {
        "@stencil/core": "4.38.0",
@@ -94,6 +94,7 @@
      "version": "7.16.12",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@babel/code-frame": "^7.16.7",
        "@babel/generator": "^7.16.8",
@@ -628,11 +629,12 @@
      "license": "MIT"
    },
    "node_modules/@capacitor/core": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-8.0.0.tgz",
-      "integrity": "sha512-250HTVd/W/KdMygoqaedisvNbHbpbQTN2Hy/8ZYGm1nAqE0Fx7sGss4l0nDg33STxEdDhtVRoL2fIaaiukKseA==",
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/@capacitor/core/-/core-8.0.1.tgz",
+      "integrity": "sha512-5UqSWxGMp/B8KhYu7rAijqNtYslhcLh+TrbfU48PfdMDsPfaU/VY48sMNzC22xL8BmoFoql/3SKyP+pavTOvOA==",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "tslib": "^2.1.0"
      }
@@ -870,6 +872,7 @@
      "version": "4.33.0",
      "dev": true,
      "license": "BSD-2-Clause",
+      "peer": true,
      "dependencies": {
        "@typescript-eslint/scope-manager": "4.33.0",
        "@typescript-eslint/types": "4.33.0",
@@ -1807,6 +1810,7 @@
    "node_modules/@stencil/core": {
      "version": "4.38.0",
      "license": "MIT",
+      "peer": true,
      "bin": {
        "stencil": "bin/stencil"
      },
@@ -2231,6 +2235,7 @@
      "version": "6.7.2",
      "dev": true,
      "license": "BSD-2-Clause",
+      "peer": true,
      "dependencies": {
        "@typescript-eslint/scope-manager": "6.7.2",
        "@typescript-eslint/types": "6.7.2",
@@ -2456,7 +2461,6 @@
      "integrity": "sha512-vay5/oQJdsNHmliWoZfHPoVZZRmnSWhug0BYT34njkYTPqClh3DNWLkZNJBVSjsNMrg0CCrBfoKkjZQPM/QVUw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@babel/parser": "^7.28.5",
        "@vue/shared": "3.5.25",
@@ -2471,7 +2475,6 @@
      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
      "dev": true,
      "license": "BSD-2-Clause",
-      "peer": true,
      "engines": {
        "node": ">=0.12"
      },
@@ -2484,8 +2487,7 @@
      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/@vue/compiler-dom": {
      "version": "3.5.25",
@@ -2493,7 +2495,6 @@
      "integrity": "sha512-4We0OAcMZsKgYoGlMjzYvaoErltdFI2/25wqanuTu+S4gismOTRTBPi4IASOjxWdzIwrYSjnqONfKvuqkXzE2Q==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@vue/compiler-core": "3.5.25",
        "@vue/shared": "3.5.25"
@@ -2505,7 +2506,6 @@
      "integrity": "sha512-PUgKp2rn8fFsI++lF2sO7gwO2d9Yj57Utr5yEsDf3GNaQcowCLKL7sf+LvVFvtJDXUp/03+dC6f2+LCv5aK1ag==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@babel/parser": "^7.28.5",
        "@vue/compiler-core": "3.5.25",
@@ -2523,8 +2523,7 @@
      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/@vue/compiler-sfc/node_modules/postcss": {
      "version": "8.5.6",
@@ -2546,7 +2545,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "nanoid": "^3.3.11",
        "picocolors": "^1.1.1",
@@ -2562,7 +2560,6 @@
      "integrity": "sha512-ritPSKLBcParnsKYi+GNtbdbrIE1mtuFEJ4U1sWeuOMlIziK5GtOL85t5RhsNy4uWIXPgk+OUdpnXiTdzn8o3A==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@vue/compiler-dom": "3.5.25",
        "@vue/shared": "3.5.25"
@@ -2574,7 +2571,6 @@
      "integrity": "sha512-5xfAypCQepv4Jog1U4zn8cZIcbKKFka3AgWHEFQeK65OW+Ys4XybP6z2kKgws4YB43KGpqp5D/K3go2UPPunLA==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@vue/shared": "3.5.25"
      }
@@ -2585,7 +2581,6 @@
      "integrity": "sha512-Z751v203YWwYzy460bzsYQISDfPjHTl+6Zzwo/a3CsAf+0ccEjQ8c+0CdX1WsumRTHeywvyUFtW6KvNukT/smA==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@vue/reactivity": "3.5.25",
        "@vue/shared": "3.5.25"
@@ -2597,7 +2592,6 @@
      "integrity": "sha512-a4WrkYFbb19i9pjkz38zJBg8wa/rboNERq3+hRRb0dHiJh13c+6kAbgqCPfMaJ2gg4weWD3APZswASOfmKwamA==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@vue/reactivity": "3.5.25",
        "@vue/runtime-core": "3.5.25",
@@ -2611,7 +2605,6 @@
      "integrity": "sha512-UJaXR54vMG61i8XNIzTSf2Q7MOqZHpp8+x3XLGtE3+fL+nQd+k7O5+X3D/uWrnQXOdMw5VPih+Uremcw+u1woQ==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@vue/compiler-ssr": "3.5.25",
        "@vue/shared": "3.5.25"
@@ -2625,8 +2618,7 @@
      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.25.tgz",
      "integrity": "sha512-AbOPdQQnAnzs58H2FrrDxYj/TJfmeS2jdfEEhgiKINy+bnOANmVizIEgq1r+C5zsbs6l1CCQxtcj71rwNQ4jWg==",
      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/@zeit/schemas": {
      "version": "2.21.0",
@@ -2649,6 +2641,7 @@
      "version": "7.4.0",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -3809,8 +3802,7 @@
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
      "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    },
    "node_modules/debug": {
      "version": "2.6.9",
@@ -4104,6 +4096,7 @@
      "version": "7.32.0",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@babel/code-frame": "7.12.11",
        "@eslint/eslintrc": "^0.4.3",
@@ -7299,7 +7292,6 @@
      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@jridgewell/sourcemap-codec": "^1.5.5"
      }
@@ -7621,7 +7613,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "bin": {
        "nanoid": "bin/nanoid.cjs"
      },
@@ -7976,6 +7967,7 @@
      "integrity": "sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==",
      "dev": true,
      "license": "Apache-2.0",
+      "peer": true,
      "bin": {
        "playwright-core": "cli.js"
      },
@@ -7987,6 +7979,7 @@
      "version": "7.0.35",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "chalk": "^2.4.2",
        "source-map": "^0.6.1",
@@ -8092,6 +8085,7 @@
      "version": "0.36.2",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "peerDependencies": {
        "postcss": ">=5.0.0"
      }
@@ -8140,6 +8134,7 @@
      "version": "2.6.1",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "bin": {
        "prettier": "bin-prettier.js"
      },
@@ -8497,6 +8492,7 @@
      "version": "2.35.1",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "bin": {
        "rollup": "dist/bin/rollup"
      },
@@ -8718,7 +8714,6 @@
      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
      "dev": true,
      "license": "BSD-3-Clause",
-      "peer": true,
      "engines": {
        "node": ">=0.10.0"
      }
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/core",
-  "version": "8.7.13",
+  "version": "8.7.17",
  "description": "Base components for Ionic",
  "engines": {
    "node": ">= 16"
--- a/core/src/components/app/test/safe-area/app.e2e.ts
+++ b/core/src/components/app/test/safe-area/app.e2e.ts
@@ -18,20 +18,66 @@ configs({ directions: ['ltr'] }).forEach(({ config, title, screenshot }) => {

      await expect(page).toHaveScreenshot(screenshot(`app-${screenshotModifier}-diff`));
    };
+
    test.beforeEach(async ({ page }) => {
      await page.goto(`/src/components/app/test/safe-area`, config);
    });
-    test('should not have visual regressions with action sheet', async ({ page }) => {
-      await testOverlay(page, '#show-action-sheet', 'ionActionSheetDidPresent', 'action-sheet');
+
+    test.describe(title('Ionic safe area variables'), () => {
+      test.beforeEach(async ({ page }) => {
+        const htmlTag = page.locator('html');
+        const hasSafeAreaClass = await htmlTag.evaluate((el) => el.classList.contains('safe-area'));
+
+        expect(hasSafeAreaClass).toBe(true);
+      });
+
+      test('should not have visual regressions with action sheet', async ({ page }) => {
+        await testOverlay(page, '#show-action-sheet', 'ionActionSheetDidPresent', 'action-sheet');
+      });
+      test('should not have visual regressions with menu', async ({ page }) => {
+        await testOverlay(page, '#show-menu', 'ionDidOpen', 'menu');
+      });
+      test('should not have visual regressions with picker', async ({ page }) => {
+        await testOverlay(page, '#show-picker', 'ionPickerDidPresent', 'picker');
+      });
+      test('should not have visual regressions with toast', async ({ page }) => {
+        await testOverlay(page, '#show-toast', 'ionToastDidPresent', 'toast');
+      });
    });
-    test('should not have visual regressions with menu', async ({ page }) => {
-      await testOverlay(page, '#show-menu', 'ionDidOpen', 'menu');
-    });
-    test('should not have visual regressions with picker', async ({ page }) => {
-      await testOverlay(page, '#show-picker', 'ionPickerDidPresent', 'picker');
-    });
-    test('should not have visual regressions with toast', async ({ page }) => {
-      await testOverlay(page, '#show-toast', 'ionToastDidPresent', 'toast');
+
+    test.describe(title('Capacitor safe area variables'), () => {
+      test('should use safe-area-inset vars when safe-area class is not defined', async ({ page }) => {
+        await page.evaluate(() => {
+          const html = document.documentElement;
+
+          // Remove the safe area class
+          html.classList.remove('safe-area');
+
+          // Set the safe area inset variables
+          html.style.setProperty('--safe-area-inset-top', '10px');
+          html.style.setProperty('--safe-area-inset-bottom', '20px');
+          html.style.setProperty('--safe-area-inset-left', '30px');
+          html.style.setProperty('--safe-area-inset-right', '40px');
+        });
+
+        const top = await page.evaluate(() =>
+          getComputedStyle(document.documentElement).getPropertyValue('--ion-safe-area-top').trim()
+        );
+        const bottom = await page.evaluate(() =>
+          getComputedStyle(document.documentElement).getPropertyValue('--ion-safe-area-bottom').trim()
+        );
+        const left = await page.evaluate(() =>
+          getComputedStyle(document.documentElement).getPropertyValue('--ion-safe-area-left').trim()
+        );
+        const right = await page.evaluate(() =>
+          getComputedStyle(document.documentElement).getPropertyValue('--ion-safe-area-right').trim()
+        );
+
+        expect(top).toBe('10px');
+        expect(bottom).toBe('20px');
+        expect(left).toBe('30px');
+        expect(right).toBe('40px');
+      });
    });
  });
 });
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -170,6 +170,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
   */
  @Watch('aria-checked')
  @Watch('aria-label')
+  @Watch('aria-pressed')
  onAriaChanged(newValue: string, _oldValue: string, propName: string) {
    this.inheritedAttributes = {
      ...this.inheritedAttributes,
--- a/core/src/components/chip/test/states/chip.e2e.ts
+++ b/core/src/components/chip/test/states/chip.e2e.ts
@@ -1,23 +1,27 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';

+/**
+ * This behavior does not vary across modes/directions
+ */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  /**
-   * This behavior does not vary across modes/directions.
-   */
  test.describe(title('chip: states'), () => {
    test('should render disabled state', async ({ page }) => {
-      await page.setContent(
-        `<ion-chip disabled="true">
-          <ion-label>Disabled</ion-label>
-        </ion-chip>`,
-        config
-      );
+      await page.goto(`/src/components/chip/test/states`, config);

-      const chip = page.locator('ion-chip');
+      const container = page.locator('#disabled');

-      await expect(chip).toHaveScreenshot(screenshot(`chip-disabled`));
+      await expect(container).toHaveScreenshot(screenshot(`chip-disabled`));
    });
+
+    test('should render activated state', async ({ page }) => {
+      await page.goto(`/src/components/chip/test/states`, config);
+
+      const container = page.locator('#activated');
+
+      await expect(container).toHaveScreenshot(screenshot(`chip-activated`));
+    });
+
    test('should custom chip', async ({ page }) => {
      await page.setContent(
        `
--- a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-activated-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-activated-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-activated-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-activated-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-activated-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-activated-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-disabled-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/chip/test/states/index.html
+++ b/core/src/components/chip/test/states/index.html
@@ -19,211 +19,285 @@
      <ion-content>
        <h3>Default</h3>

-        <p>
-          <ion-chip>
-            <ion-label>Default</ion-label>
-          </ion-chip>
-          <ion-chip style="border-radius: 4px">
-            <ion-label>Border Radius</ion-label>
-          </ion-chip>
-          <ion-chip>
-            <ion-icon name="checkmark-circle"></ion-icon>
-            <ion-label>With Icon</ion-label>
-          </ion-chip>
-          <ion-chip>
-            <ion-avatar>
-              <img
-                src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
-              />
-            </ion-avatar>
-            <ion-label>With Avatar</ion-label>
-          </ion-chip>
-          <ion-chip>
-            <ion-avatar>
-              <img
-                src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
-              />
-            </ion-avatar>
-            <ion-label>With Icon and Avatar</ion-label>
-            <ion-icon name="close-circle"></ion-icon>
-          </ion-chip>
-        </p>
-        <p>
-          <ion-chip class="ion-focused">
-            <ion-label>Default</ion-label>
-          </ion-chip>
-          <ion-chip style="border-radius: 4px" class="ion-focused">
-            <ion-label>Border Radius</ion-label>
-          </ion-chip>
-          <ion-chip class="ion-focused">
-            <ion-icon name="checkmark-circle"></ion-icon>
-            <ion-label>With Icon</ion-label>
-          </ion-chip>
-          <ion-chip class="ion-focused">
-            <ion-avatar>
-              <img
-                src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
-              />
-            </ion-avatar>
-            <ion-label>With Avatar</ion-label>
-          </ion-chip>
-          <ion-chip class="ion-focused">
-            <ion-avatar>
-              <img
-                src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
-              />
-            </ion-avatar>
-            <ion-label>With Icon and Avatar</ion-label>
-            <ion-icon name="close-circle"></ion-icon>
-          </ion-chip>
-        </p>
+        <div id="default">
+          <p>
+            <ion-chip>
+              <ion-label>Default</ion-label>
+            </ion-chip>
+            <ion-chip color="primary">
+              <ion-label>Primary</ion-label>
+            </ion-chip>
+            <ion-chip color="secondary">
+              <ion-label>Secondary</ion-label>
+            </ion-chip>
+            <ion-chip color="tertiary">
+              <ion-label>Tertiary</ion-label>
+            </ion-chip>
+            <ion-chip color="success">
+              <ion-label>Success</ion-label>
+            </ion-chip>
+            <ion-chip color="warning">
+              <ion-label>Warning</ion-label>
+            </ion-chip>
+            <ion-chip color="danger">
+              <ion-label>Danger</ion-label>
+            </ion-chip>
+            <ion-chip color="light">
+              <ion-label>Light</ion-label>
+            </ion-chip>
+            <ion-chip color="medium">
+              <ion-label>Medium</ion-label>
+            </ion-chip>
+            <ion-chip color="dark">
+              <ion-label>Dark</ion-label>
+            </ion-chip>
+          </p>

-        <h3>Colors</h3>
-        <p>
-          <ion-chip color="primary">
-            <ion-label>Primary</ion-label>
-          </ion-chip>
-          <ion-chip color="secondary">
-            <ion-label>Secondary</ion-label>
-          </ion-chip>
-          <ion-chip color="tertiary">
-            <ion-icon name="checkmark-circle"></ion-icon>
-            <ion-label>Tertiary with Icon</ion-label>
-          </ion-chip>
-          <ion-chip color="success">
-            <ion-avatar>
-              <img
-                src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
-              />
-            </ion-avatar>
-            <ion-label>Success with Avatar</ion-label>
-          </ion-chip>
-          <ion-chip color="warning">
-            <ion-label>Warning with Icon</ion-label>
-            <ion-icon name="calendar"></ion-icon>
-          </ion-chip>
-          <ion-chip color="danger">
-            <ion-label>Danger</ion-label>
-          </ion-chip>
-          <ion-chip color="light">
-            <ion-label>Light</ion-label>
-          </ion-chip>
-          <ion-chip color="medium">
-            <ion-label>Medium</ion-label>
-          </ion-chip>
-          <ion-chip color="dark">
-            <ion-label>Dark</ion-label>
-          </ion-chip>
-        </p>
-        <p>
-          <ion-chip color="primary" class="ion-focused">
-            <ion-label>Primary</ion-label>
-          </ion-chip>
-          <ion-chip color="secondary" class="ion-focused">
-            <ion-label>Secondary</ion-label>
-          </ion-chip>
-          <ion-chip color="tertiary" class="ion-focused">
-            <ion-icon name="checkmark-circle"></ion-icon>
-            <ion-label>Tertiary with Icon</ion-label>
-          </ion-chip>
-          <ion-chip color="success" class="ion-focused">
-            <ion-avatar>
-              <img
-                src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
-              />
-            </ion-avatar>
-            <ion-label>Success with Avatar</ion-label>
-          </ion-chip>
-          <ion-chip color="warning" class="ion-focused">
-            <ion-label>Warning with Icon</ion-label>
-            <ion-icon name="calendar"></ion-icon>
-          </ion-chip>
-          <ion-chip color="danger" class="ion-focused">
-            <ion-label>Danger</ion-label>
-          </ion-chip>
-          <ion-chip color="light" class="ion-focused">
-            <ion-label>Light</ion-label>
-          </ion-chip>
-          <ion-chip color="medium" class="ion-focused">
-            <ion-label>Medium</ion-label>
-          </ion-chip>
-          <ion-chip color="dark" class="ion-focused">
-            <ion-label>Dark</ion-label>
-          </ion-chip>
-        </p>
-
-        <h3>Outline</h3>
-
-        <p>
-          <ion-chip outline>
-            <ion-label>Outline</ion-label>
-          </ion-chip>
-          <ion-chip outline color="danger">
-            <ion-label>Danger Outline</ion-label>
-          </ion-chip>
-          <ion-chip outline color="secondary">
-            <ion-icon name="checkmark-circle"></ion-icon>
-            <ion-label>Secondary Outline with Icon</ion-label>
-          </ion-chip>
-          <ion-chip outline color="primary">
-            <ion-label>Primary Outline with Avatar</ion-label>
-            <ion-avatar>
-              <img
-                src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
-              />
-            </ion-avatar>
-          </ion-chip>
-          <ion-chip outline>
-            <ion-icon name="git-pull-request"></ion-icon>
-            <ion-label>Outline with Icon and Avatar</ion-label>
-            <ion-icon name="close-circle"></ion-icon>
-          </ion-chip>
-        </p>
-        <p>
-          <ion-chip outline class="ion-focused">
-            <ion-label>Outline</ion-label>
-          </ion-chip>
-          <ion-chip outline color="danger" class="ion-focused">
-            <ion-label>Danger Outline</ion-label>
-          </ion-chip>
-          <ion-chip outline color="secondary" class="ion-focused">
-            <ion-icon name="checkmark-circle"></ion-icon>
-            <ion-label>Secondary Outline with Icon</ion-label>
-          </ion-chip>
-          <ion-chip outline color="primary" class="ion-focused">
-            <ion-label>Primary Outline with Avatar</ion-label>
-            <ion-avatar>
-              <img
-                src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
-              />
-            </ion-avatar>
-          </ion-chip>
-          <ion-chip outline class="ion-focused">
-            <ion-icon name="git-pull-request"></ion-icon>
-            <ion-label>Outline with Icon and Avatar</ion-label>
-            <ion-icon name="close-circle"></ion-icon>
-          </ion-chip>
-        </p>
+          <p>
+            <ion-chip outline>
+              <ion-label>Default</ion-label>
+            </ion-chip>
+            <ion-chip outline color="primary">
+              <ion-label>Primary</ion-label>
+            </ion-chip>
+            <ion-chip outline color="secondary">
+              <ion-label>Secondary</ion-label>
+            </ion-chip>
+            <ion-chip outline color="tertiary">
+              <ion-label>Tertiary</ion-label>
+            </ion-chip>
+            <ion-chip outline color="success">
+              <ion-label>Success</ion-label>
+            </ion-chip>
+            <ion-chip outline color="warning">
+              <ion-label>Warning</ion-label>
+            </ion-chip>
+            <ion-chip outline color="danger">
+              <ion-label>Danger</ion-label>
+            </ion-chip>
+            <ion-chip outline color="light">
+              <ion-label>Light</ion-label>
+            </ion-chip>
+            <ion-chip outline color="medium">
+              <ion-label>Medium</ion-label>
+            </ion-chip>
+            <ion-chip outline color="dark">
+              <ion-label>Dark</ion-label>
+            </ion-chip>
+          </p>
+        </div>

        <h3>Disabled</h3>
+        <div id="disabled">
+          <p>
+            <ion-chip disabled>
+              <ion-label>Default</ion-label>
+            </ion-chip>
+            <ion-chip color="primary" disabled>
+              <ion-label>Primary</ion-label>
+            </ion-chip>
+            <ion-chip color="secondary" disabled>
+              <ion-label>Secondary</ion-label>
+            </ion-chip>
+            <ion-chip color="tertiary" disabled>
+              <ion-label>Tertiary</ion-label>
+            </ion-chip>
+            <ion-chip color="success" disabled>
+              <ion-label>Success</ion-label>
+            </ion-chip>
+            <ion-chip color="warning" disabled>
+              <ion-label>Warning</ion-label>
+            </ion-chip>
+            <ion-chip color="danger" disabled>
+              <ion-label>Danger</ion-label>
+            </ion-chip>
+            <ion-chip color="light" disabled>
+              <ion-label>Light</ion-label>
+            </ion-chip>
+            <ion-chip color="medium" disabled>
+              <ion-label>Medium</ion-label>
+            </ion-chip>
+            <ion-chip color="dark" disabled>
+              <ion-label>Dark</ion-label>
+            </ion-chip>
+          </p>

+          <p>
+            <ion-chip outline disabled>
+              <ion-label>Default</ion-label>
+            </ion-chip>
+            <ion-chip outline color="primary" disabled>
+              <ion-label>Primary</ion-label>
+            </ion-chip>
+            <ion-chip outline color="secondary" disabled>
+              <ion-label>Secondary</ion-label>
+            </ion-chip>
+            <ion-chip outline color="tertiary" disabled>
+              <ion-label>Tertiary</ion-label>
+            </ion-chip>
+            <ion-chip outline color="success" disabled>
+              <ion-label>Success</ion-label>
+            </ion-chip>
+            <ion-chip outline color="warning" disabled>
+              <ion-label>Warning</ion-label>
+            </ion-chip>
+            <ion-chip outline color="danger" disabled>
+              <ion-label>Danger</ion-label>
+            </ion-chip>
+            <ion-chip outline color="light" disabled>
+              <ion-label>Light</ion-label>
+            </ion-chip>
+            <ion-chip outline color="medium" disabled>
+              <ion-label>Medium</ion-label>
+            </ion-chip>
+            <ion-chip outline color="dark" disabled>
+              <ion-label>Dark</ion-label>
+            </ion-chip>
+          </p>
+        </div>
+
+        <h3>Activated</h3>
+        <div id="activated">
+          <p>
+            <ion-chip class="ion-activated">
+              <ion-label>Default</ion-label>
+            </ion-chip>
+            <ion-chip color="primary" class="ion-activated">
+              <ion-label>Primary</ion-label>
+            </ion-chip>
+            <ion-chip color="secondary" class="ion-activated">
+              <ion-label>Secondary</ion-label>
+            </ion-chip>
+            <ion-chip color="tertiary" class="ion-activated">
+              <ion-label>Tertiary</ion-label>
+            </ion-chip>
+            <ion-chip color="success" class="ion-activated">
+              <ion-label>Success</ion-label>
+            </ion-chip>
+            <ion-chip color="warning" class="ion-activated">
+              <ion-label>Warning</ion-label>
+            </ion-chip>
+            <ion-chip color="danger" class="ion-activated">
+              <ion-label>Danger</ion-label>
+            </ion-chip>
+            <ion-chip color="light" class="ion-activated">
+              <ion-label>Light</ion-label>
+            </ion-chip>
+            <ion-chip color="medium" class="ion-activated">
+              <ion-label>Medium</ion-label>
+            </ion-chip>
+            <ion-chip color="dark" class="ion-activated">
+              <ion-label>Dark</ion-label>
+            </ion-chip>
+          </p>
+
+          <p>
+            <ion-chip outline class="ion-activated">
+              <ion-label>Default</ion-label>
+            </ion-chip>
+            <ion-chip outline color="primary" class="ion-activated">
+              <ion-label>Primary</ion-label>
+            </ion-chip>
+            <ion-chip outline color="secondary" class="ion-activated">
+              <ion-label>Secondary</ion-label>
+            </ion-chip>
+            <ion-chip outline color="tertiary" class="ion-activated">
+              <ion-label>Tertiary</ion-label>
+            </ion-chip>
+            <ion-chip outline color="success" class="ion-activated">
+              <ion-label>Success</ion-label>
+            </ion-chip>
+            <ion-chip outline color="warning" class="ion-activated">
+              <ion-label>Warning</ion-label>
+            </ion-chip>
+            <ion-chip outline color="danger" class="ion-activated">
+              <ion-label>Danger</ion-label>
+            </ion-chip>
+            <ion-chip outline color="light" class="ion-activated">
+              <ion-label>Light</ion-label>
+            </ion-chip>
+            <ion-chip outline color="medium" class="ion-activated">
+              <ion-label>Medium</ion-label>
+            </ion-chip>
+            <ion-chip outline color="dark" class="ion-activated">
+              <ion-label>Dark</ion-label>
+            </ion-chip>
+          </p>
+        </div>
+
+        <h3>Focused</h3>
        <p>
-          <ion-chip disabled>
-            <ion-label>Disabled</ion-label>
-          </ion-chip>
-          <ion-chip outline color="danger" class="ion-focused" disabled>
-            <ion-label>Disabled Outline</ion-label>
-          </ion-chip>
-          <ion-chip color="secondary" class="ion-focused" disabled>
-            <ion-icon name="checkmark-circle"></ion-icon>
-            <ion-label>Disabled Secondary with Icon</ion-label>
-          </ion-chip>
-          <ion-chip outline class="ion-focused" disabled>
-            <ion-icon name="git-pull-request"></ion-icon>
-            <ion-label>Disabled Outline with Icon and Avatar</ion-label>
-            <ion-icon name="close-circle"></ion-icon>
-          </ion-chip>
+          `ion-chip` is not focusable by default, meaning it doesn't use `ion-focusable`. But it does have focus styles
+          that target the `:focus` pseudo-class. In order to see the focus styles, you need to add tabindex="0" and tab
+          into the chip.
        </p>
+        <div id="focused">
+          <p>
+            <ion-chip tabindex="0">
+              <ion-label>Default</ion-label>
+            </ion-chip>
+            <ion-chip color="primary" tabindex="0">
+              <ion-label>Primary</ion-label>
+            </ion-chip>
+            <ion-chip color="secondary" tabindex="0">
+              <ion-label>Secondary</ion-label>
+            </ion-chip>
+            <ion-chip color="tertiary" tabindex="0">
+              <ion-label>Tertiary</ion-label>
+            </ion-chip>
+            <ion-chip color="success" tabindex="0">
+              <ion-label>Success</ion-label>
+            </ion-chip>
+            <ion-chip color="warning" tabindex="0">
+              <ion-label>Warning</ion-label>
+            </ion-chip>
+            <ion-chip color="danger" tabindex="0">
+              <ion-label>Danger</ion-label>
+            </ion-chip>
+            <ion-chip color="light" tabindex="0">
+              <ion-label>Light</ion-label>
+            </ion-chip>
+            <ion-chip color="medium" tabindex="0">
+              <ion-label>Medium</ion-label>
+            </ion-chip>
+            <ion-chip color="dark" tabindex="0">
+              <ion-label>Dark</ion-label>
+            </ion-chip>
+          </p>
+
+          <p>
+            <ion-chip outline tabindex="0">
+              <ion-label>Default</ion-label>
+            </ion-chip>
+            <ion-chip outline color="primary" tabindex="0">
+              <ion-label>Primary</ion-label>
+            </ion-chip>
+            <ion-chip outline color="secondary" tabindex="0">
+              <ion-label>Secondary</ion-label>
+            </ion-chip>
+            <ion-chip outline color="tertiary" tabindex="0">
+              <ion-label>Tertiary</ion-label>
+            </ion-chip>
+            <ion-chip outline color="success" tabindex="0">
+              <ion-label>Success</ion-label>
+            </ion-chip>
+            <ion-chip outline color="warning" tabindex="0">
+              <ion-label>Warning</ion-label>
+            </ion-chip>
+            <ion-chip outline color="danger" tabindex="0">
+              <ion-label>Danger</ion-label>
+            </ion-chip>
+            <ion-chip outline color="light" tabindex="0">
+              <ion-label>Light</ion-label>
+            </ion-chip>
+            <ion-chip outline color="medium" tabindex="0">
+              <ion-label>Medium</ion-label>
+            </ion-chip>
+            <ion-chip outline color="dark" tabindex="0">
+              <ion-label>Dark</ion-label>
+            </ion-chip>
+          </p>
+        </div>

        <h3>Custom</h3>

@@ -232,9 +306,6 @@
          <ion-chip class="wide" text="wide">
            <ion-icon name="add"></ion-icon>
          </ion-chip>
-          <ion-chip class="wide ion-focused" text="wide">
-            <ion-icon name="add"></ion-icon>
-          </ion-chip>
        </p>

        <!-- Custom Colors -->
@@ -245,25 +316,19 @@
          <ion-chip color="secondary" class="custom">
            <ion-icon name="add"></ion-icon>
          </ion-chip>
-          <ion-chip class="custom ion-focused">
-            <ion-icon name="add"></ion-icon>
-          </ion-chip>
-          <ion-chip color="secondary" class="custom ion-focused">
-            <ion-icon name="add"></ion-icon>
-          </ion-chip>
        </p>
      </ion-content>
    </ion-app>

    <script>
-      var buttons = document.querySelectorAll('ion-chip');
+      var chips = document.querySelectorAll('ion-chip');

-      for (var i = 0; i < buttons.length; i++) {
-        buttons[i].addEventListener('click', (event) => onClick(event));
+      for (var i = 0; i < chips.length; i++) {
+        chips[i].addEventListener('click', (event) => onClick(event));
      }

      function onClick(ev) {
-        console.log('clicked the button', ev.target.innerText);
+        console.log('clicked the chip', ev.target.innerText);
      }
    </script>

--- a/core/src/components/footer/footer.tsx
+++ b/core/src/components/footer/footer.tsx
@@ -22,6 +22,7 @@ export class Footer implements ComponentInterface {
  private scrollEl?: HTMLElement;
  private contentScrollCallback?: () => void;
  private keyboardCtrl: KeyboardController | null = null;
+  private keyboardCtrlPromise: Promise<KeyboardController> | null = null;

  @State() private keyboardVisible = false;

@@ -52,7 +53,7 @@ export class Footer implements ComponentInterface {
  }

  async connectedCallback() {
-    this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
+    const promise = createKeyboardController(async (keyboardOpen, waitForResize) => {
      /**
       * If the keyboard is hiding, then we need to wait
       * for the webview to resize. Otherwise, the footer
@@ -64,11 +65,32 @@ export class Footer implements ComponentInterface {

      this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
    });
+    this.keyboardCtrlPromise = promise;
+
+    const keyboardCtrl = await promise;
+
+    /**
+     * Only assign if this is still the current promise.
+     * Otherwise, a new connectedCallback has started or
+     * disconnectedCallback was called, so destroy this instance.
+     */
+    if (this.keyboardCtrlPromise === promise) {
+      this.keyboardCtrl = keyboardCtrl;
+      this.keyboardCtrlPromise = null;
+    } else {
+      keyboardCtrl.destroy();
+    }
  }

  disconnectedCallback() {
+    if (this.keyboardCtrlPromise) {
+      this.keyboardCtrlPromise.then((ctrl) => ctrl.destroy());
+      this.keyboardCtrlPromise = null;
+    }
+
    if (this.keyboardCtrl) {
      this.keyboardCtrl.destroy();
+      this.keyboardCtrl = null;
    }
  }

--- a/core/src/components/header/header.md.scss
+++ b/core/src/components/header/header.md.scss
@@ -8,7 +8,7 @@
  box-shadow: $header-md-box-shadow;
 }

-.header-collapse-condense {
+.header-md.header-collapse-condense {
  display: none;
 }

--- a/core/src/components/header/test/condense-modal/header.e2e.ts
+++ b/core/src/components/header/test/condense-modal/header.e2e.ts
@@ -0,0 +1,71 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+/**
+ * This test verifies that collapsible headers with mode="ios" work correctly
+ * when both iOS and MD stylesheets are loaded. The bug occurred because
+ * `.header-collapse-condense { display: none }` in the MD stylesheet was not
+ * scoped to `.header-md`, causing it to hide iOS condense headers when both
+ * stylesheets were present.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('header: condense with iOS mode override'), () => {
+    test('should show iOS condense header when both MD and iOS styles are loaded', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/29929',
+      });
+
+      // Include both an MD header and an iOS modal to force both stylesheets to load
+      await page.setContent(
+        `
+        <!-- MD header to force MD stylesheet to load -->
+        <ion-header mode="md" id="mdHeader">
+          <ion-toolbar>
+            <ion-title>MD Header</ion-title>
+          </ion-toolbar>
+        </ion-header>
+
+        <!-- Modal with iOS condense header -->
+        <ion-modal>
+          <ion-header mode="ios" id="smallTitleHeader">
+            <ion-toolbar>
+              <ion-title>Header</ion-title>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content fullscreen="true">
+            <ion-header collapse="condense" mode="ios" id="largeTitleHeader">
+              <ion-toolbar>
+                <ion-title size="large">Large Header</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <p>Content</p>
+          </ion-content>
+        </ion-modal>
+        `,
+        config
+      );
+
+      const modal = page.locator('ion-modal');
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await modal.evaluate((el: HTMLIonModalElement) => el.present());
+      await ionModalDidPresent.next();
+
+      const largeTitleHeader = modal.locator('#largeTitleHeader');
+
+      // The large title header should be visible, not hidden by MD styles
+      await expect(largeTitleHeader).toBeVisible();
+
+      // Verify it has the iOS mode class
+      await expect(largeTitleHeader).toHaveClass(/header-ios/);
+
+      // Verify it does NOT have display: none applied
+      // This would fail if the MD stylesheet's unscoped .header-collapse-condense rule applies
+      const display = await largeTitleHeader.evaluate((el) => {
+        return window.getComputedStyle(el).display;
+      });
+      expect(display).not.toBe('none');
+    });
+  });
+});
--- a/core/src/components/input-password-toggle/input-password-toggle.tsx
+++ b/core/src/components/input-password-toggle/input-password-toggle.tsx
@@ -126,9 +126,8 @@ export class InputPasswordToggle implements ComponentInterface {
          color={color}
          fill="clear"
          shape="round"
-          aria-checked={isPasswordVisible ? 'true' : 'false'}
          aria-label={isPasswordVisible ? 'Hide password' : 'Show password'}
-          role="switch"
+          aria-pressed={isPasswordVisible ? 'true' : 'false'}
          type="button"
          onPointerDown={(ev) => {
            /**
--- a/core/src/components/input-password-toggle/test/a11y/input-password-toggle.e2e.ts
+++ b/core/src/components/input-password-toggle/test/a11y/input-password-toggle.e2e.ts
@@ -22,7 +22,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
  });

  test.describe(title('input password toggle: aria attributes'), () => {
-    test('should inherit aria attributes to inner button on load', async ({ page }) => {
+    test('should have correct aria attributes on load', async ({ page }) => {
      await page.setContent(
        `
        <ion-input label="input" type="password">
@@ -35,9 +35,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
      const nativeButton = page.locator('ion-input-password-toggle button');

      await expect(nativeButton).toHaveAttribute('aria-label', 'Show password');
-      await expect(nativeButton).toHaveAttribute('aria-checked', 'false');
+      await expect(nativeButton).toHaveAttribute('aria-pressed', 'false');
    });
-    test('should inherit aria attributes to inner button after toggle', async ({ page }) => {
+    test('should update aria attributes after toggle', async ({ page }) => {
      await page.setContent(
        `
        <ion-input label="input" type="password">
@@ -51,7 +51,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
      await nativeButton.click();

      await expect(nativeButton).toHaveAttribute('aria-label', 'Hide password');
-      await expect(nativeButton).toHaveAttribute('aria-checked', 'true');
+      await expect(nativeButton).toHaveAttribute('aria-pressed', 'true');
    });
  });
 });
--- a/core/src/components/input/input.scss
+++ b/core/src/components/input/input.scss
@@ -165,9 +165,13 @@
 // otherwise the .input-cover will not be rendered at all
 // The input cover is not clickable when the input is disabled
 .cloned-input {
-  @include position(0, null, 0, 0);
-
  position: absolute;
+  top: 0;
+  bottom: 0;
+
+  // Reset height since absolute positioning with top/bottom handles sizing
+  height: auto;
+  max-height: none;

  pointer-events: none;
 }
--- a/core/src/components/input/input.tsx
+++ b/core/src/components/input/input.tsx
@@ -48,6 +48,7 @@ export class Input implements ComponentInterface {
  private inputId = `ion-input-${inputIds++}`;
  private helperTextId = `${this.inputId}-helper-text`;
  private errorTextId = `${this.inputId}-error-text`;
+  private labelTextId = `${this.inputId}-label`;
  private inheritedAttributes: Attributes = {};
  private isComposing = false;
  private slotMutationController?: SlotMutationController;
@@ -406,7 +407,12 @@ export class Input implements ComponentInterface {
  connectedCallback() {
    const { el } = this;

-    this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
+    this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => {
+      this.setSlottedLabelId();
+      forceUpdate(this);
+    });
+
+    this.setSlottedLabelId();
    this.notchController = createNotchController(
      el,
      () => this.notchSpacerEl,
@@ -721,7 +727,7 @@ export class Input implements ComponentInterface {
  }

  private renderLabel() {
-    const { label } = this;
+    const { label, labelTextId } = this;

    return (
      <div
@@ -729,8 +735,17 @@ export class Input implements ComponentInterface {
          'label-text-wrapper': true,
          'label-text-wrapper-hidden': !this.hasLabel,
        }}
+        // Prevents Android TalkBack from focusing the label separately.
+        // The input remains labelled via aria-labelledby.
+        aria-hidden={this.hasLabel ? 'true' : null}
      >
-        {label === undefined ? <slot name="label"></slot> : <div class="label-text">{label}</div>}
+        {label === undefined ? (
+          <slot name="label"></slot>
+        ) : (
+          <div class="label-text" id={labelTextId}>
+            {label}
+          </div>
+        )}
      </div>
    );
  }
@@ -743,6 +758,33 @@ export class Input implements ComponentInterface {
    return this.el.querySelector('[slot="label"]');
  }

+  /**
+   * Ensures the slotted label element has an ID for aria-labelledby.
+   * If no ID exists, we assign one using our generated labelTextId.
+   */
+  private setSlottedLabelId() {
+    const slottedLabel = this.labelSlot;
+    if (slottedLabel && !slottedLabel.id) {
+      slottedLabel.id = this.labelTextId;
+    }
+  }
+
+  /**
+   * Returns the ID to use for aria-labelledby on the native input,
+   * or undefined if aria-label is explicitly set (to avoid conflicts).
+   */
+  private getLabelledById(): string | undefined {
+    if (this.inheritedAttributes['aria-label']) {
+      return undefined;
+    }
+
+    if (this.label !== undefined) {
+      return this.labelTextId;
+    }
+
+    return this.labelSlot?.id || undefined;
+  }
+
  /**
   * Returns `true` if label content is provided
   * either by a prop or a content. If you want
@@ -898,6 +940,7 @@ export class Input implements ComponentInterface {
              onCompositionend={this.onCompositionEnd}
              aria-describedby={this.getHintTextID()}
              aria-invalid={this.isInvalid ? 'true' : undefined}
+              aria-labelledby={this.getLabelledById()}
              {...this.inheritedAttributes}
            />
            {this.clearInput && !readonly && !disabled && (
--- a/core/src/components/input/test/a11y/input.e2e.ts
+++ b/core/src/components/input/test/a11y/input.e2e.ts
@@ -57,6 +57,104 @@ configs({ directions: ['ltr'], palettes: ['light', 'dark'] }).forEach(({ title,
  });
 });

+configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, config }) => {
+  test.describe(title('input: label a11y for Android TalkBack'), () => {
+    /**
+     * Android TalkBack treats visible text elements as separate focusable items.
+     * These tests verify that the label is hidden from a11y tree (aria-hidden)
+     * while remaining associated with the input via aria-labelledby.
+     */
+    test('label text wrapper should be hidden from accessibility tree when using label prop', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-input label="Email" value="test@example.com"></ion-input>
+        `,
+        config
+      );
+
+      const labelTextWrapper = page.locator('ion-input .label-text-wrapper');
+      await expect(labelTextWrapper).toHaveAttribute('aria-hidden', 'true');
+    });
+
+    test('label text wrapper should be hidden from accessibility tree when using label slot', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-input value="test@example.com">
+          <div slot="label">Email</div>
+        </ion-input>
+        `,
+        config
+      );
+
+      const labelTextWrapper = page.locator('ion-input .label-text-wrapper');
+      await expect(labelTextWrapper).toHaveAttribute('aria-hidden', 'true');
+    });
+
+    test('native input should have aria-labelledby pointing to label text when using label prop', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-input label="Email" value="test@example.com"></ion-input>
+        `,
+        config
+      );
+
+      const nativeInput = page.locator('ion-input input');
+      const labelText = page.locator('ion-input .label-text');
+
+      const labelTextId = await labelText.getAttribute('id');
+      expect(labelTextId).not.toBeNull();
+      await expect(nativeInput).toHaveAttribute('aria-labelledby', labelTextId!);
+    });
+
+    test('native input should have aria-labelledby pointing to slotted label when using label slot', async ({
+      page,
+    }) => {
+      await page.setContent(
+        `
+        <ion-input value="test@example.com">
+          <div slot="label">Email</div>
+        </ion-input>
+        `,
+        config
+      );
+
+      const nativeInput = page.locator('ion-input input');
+      const slottedLabel = page.locator('ion-input [slot="label"]');
+
+      const slottedLabelId = await slottedLabel.getAttribute('id');
+      expect(slottedLabelId).not.toBeNull();
+      await expect(nativeInput).toHaveAttribute('aria-labelledby', slottedLabelId!);
+    });
+
+    test('should not add aria-labelledby when aria-label is provided on host', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-input aria-label="Custom Label" value="test@example.com"></ion-input>
+        `,
+        config
+      );
+
+      const nativeInput = page.locator('ion-input input');
+
+      await expect(nativeInput).toHaveAttribute('aria-label', 'Custom Label');
+      await expect(nativeInput).not.toHaveAttribute('aria-labelledby');
+    });
+
+    test('should not add aria-hidden to label wrapper when no label is present', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-input aria-label="Hidden Label" value="test@example.com"></ion-input>
+        `,
+        config
+      );
+
+      const labelTextWrapper = page.locator('ion-input .label-text-wrapper');
+
+      await expect(labelTextWrapper).not.toHaveAttribute('aria-hidden', 'true');
+    });
+  });
+});
+
 configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
  test.describe(title('input: font scaling'), () => {
    test('should scale text on larger font sizes', async ({ page }) => {
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -1116,6 +1116,11 @@ export class Modal implements ComponentInterface, OverlayInterface {
  }

  private handleViewTransition() {
+    // Only run view transitions when the modal is presented
+    if (!this.presented) {
+      return;
+    }
+
    const isPortrait = window.innerWidth < 768;

    // Only transition if view state actually changed
--- a/core/src/components/modal/test/card-viewport-resize/modal.e2e.ts
+++ b/core/src/components/modal/test/card-viewport-resize/modal.e2e.ts
@@ -0,0 +1,176 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('card modal: viewport resize'), () => {
+    test.beforeEach(async ({ page }) => {
+      // Start in portrait mode (mobile)
+      await page.setViewportSize({ width: 375, height: 667 });
+
+      await page.setContent(
+        `
+        <ion-app>
+          <div class="ion-page" id="main-page">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>Card Viewport Resize Test</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content class="ion-padding">
+              <p>This page tests that viewport resize does not trigger card modal animation when modal is closed.</p>
+              <ion-button id="open-modal">Open Card Modal</ion-button>
+              <ion-modal id="card-modal">
+                <ion-header>
+                  <ion-toolbar>
+                    <ion-title>Card Modal</ion-title>
+                    <ion-buttons slot="end">
+                      <ion-button id="close-modal">Close</ion-button>
+                    </ion-buttons>
+                  </ion-toolbar>
+                </ion-header>
+                <ion-content class="ion-padding">
+                  <p>Modal content</p>
+                </ion-content>
+              </ion-modal>
+            </ion-content>
+          </div>
+        </ion-app>
+
+        <script>
+          const modal = document.querySelector('#card-modal');
+          const mainPage = document.querySelector('#main-page');
+          modal.presentingElement = mainPage;
+
+          document.querySelector('#open-modal').addEventListener('click', () => {
+            modal.present();
+          });
+
+          document.querySelector('#close-modal').addEventListener('click', () => {
+            modal.dismiss();
+          });
+        </script>
+        `,
+        config
+      );
+    });
+
+    test('should not animate presenting element when viewport resizes and modal is closed', async ({
+      page,
+    }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30679',
+      });
+
+      const mainPage = page.locator('#main-page');
+
+      // Verify the presenting element has no transform initially
+      const initialTransform = await mainPage.evaluate((el) => {
+        return window.getComputedStyle(el).transform;
+      });
+      expect(initialTransform).toBe('none');
+
+      // Resize from portrait to landscape (crossing the 768px threshold)
+      await page.setViewportSize({ width: 900, height: 375 });
+
+      // Wait for the debounced resize handler (50ms) plus some buffer
+      await page.waitForTimeout(150);
+
+      // The presenting element should still have no transform
+      // If the bug exists, it would have scale(0.93) or similar applied
+      const afterResizeTransform = await mainPage.evaluate((el) => {
+        return window.getComputedStyle(el).transform;
+      });
+      expect(afterResizeTransform).toBe('none');
+    });
+
+    test('should not animate presenting element when resizing multiple times with modal closed', async ({ page }) => {
+      const mainPage = page.locator('#main-page');
+
+      // Multiple resize cycles should not trigger the animation
+      for (let i = 0; i < 3; i++) {
+        // Portrait to landscape
+        await page.setViewportSize({ width: 900, height: 375 });
+        await page.waitForTimeout(150);
+
+        let transform = await mainPage.evaluate((el) => {
+          return window.getComputedStyle(el).transform;
+        });
+        expect(transform).toBe('none');
+
+        // Landscape to portrait
+        await page.setViewportSize({ width: 375, height: 667 });
+        await page.waitForTimeout(150);
+
+        transform = await mainPage.evaluate((el) => {
+          return window.getComputedStyle(el).transform;
+        });
+        expect(transform).toBe('none');
+      }
+    });
+
+    test('should still animate presenting element correctly when modal is open and viewport resizes', async ({
+      page,
+    }) => {
+      const mainPage = page.locator('#main-page');
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      // Open the modal
+      await page.click('#open-modal');
+      await ionModalDidPresent.next();
+
+      // When modal is open in portrait, presenting element should be transformed
+      let transform = await mainPage.evaluate((el) => {
+        return window.getComputedStyle(el).transform;
+      });
+      // The presenting element should have a scale transform when modal is open
+      expect(transform).not.toBe('none');
+
+      // Resize to landscape while modal is open
+      await page.setViewportSize({ width: 900, height: 375 });
+      await page.waitForTimeout(150);
+
+      // The modal transitions correctly - in landscape mode the presenting element
+      // should have different (or no) transform than portrait
+      transform = await mainPage.evaluate((el) => {
+        return window.getComputedStyle(el).transform;
+      });
+
+      // Note: The exact transform depends on the landscape handling
+      // The main point is that when modal IS open, the transition should work
+      // This test just ensures we don't break existing functionality
+    });
+
+    test('presenting element should return to normal after modal is dismissed', async ({ page }) => {
+      const mainPage = page.locator('#main-page');
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+      // Open the modal
+      await page.click('#open-modal');
+      await ionModalDidPresent.next();
+
+      // Close the modal
+      await page.click('#close-modal');
+      await ionModalDidDismiss.next();
+
+      // Wait for animations to complete
+      await page.waitForTimeout(500);
+
+      // The presenting element should be back to normal
+      const transform = await mainPage.evaluate((el) => {
+        return window.getComputedStyle(el).transform;
+      });
+      expect(transform).toBe('none');
+
+      // Now resize the viewport - should not trigger animation
+      await page.setViewportSize({ width: 900, height: 375 });
+      await page.waitForTimeout(150);
+
+      const afterResizeTransform = await mainPage.evaluate((el) => {
+        return window.getComputedStyle(el).transform;
+      });
+      expect(afterResizeTransform).toBe('none');
+    });
+  });
+});
--- a/core/src/components/modal/test/dismiss-behavior/index.html
+++ b/core/src/components/modal/test/dismiss-behavior/index.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Modal - Dismiss Behavior</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>
+      <div class="ion-page">
+        <ion-header>
+          <ion-toolbar>
+            <ion-title>Modal - Dismiss Behavior</ion-title>
+          </ion-toolbar>
+        </ion-header>
+
+        <ion-content class="ion-padding">
+          <button id="present-first-modal" onclick="presentFirstModal()">Present Modal</button>
+        </ion-content>
+      </div>
+    </ion-app>
+
+    <script type="module">
+      import { modalController } from '../../../../../dist/ionic/index.esm.js';
+
+      window.modalController = modalController;
+
+      const sharedId = 'shared-modal-id';
+      const maxModals = 5;
+      let modalCount = 0;
+
+      function createModalComponent(modalNumber) {
+        const element = document.createElement('div');
+        const canPresentNext = modalNumber < maxModals;
+        const presentNextButton = canPresentNext
+          ? `<ion-button id="present-next-modal" onclick="presentNextModal(${modalNumber + 1})">Present Modal ${
+              modalNumber + 1
+            }</ion-button>`
+          : '';
+        element.innerHTML = `
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Modal ${modalNumber}</ion-title>
+            </ion-toolbar>
+          </ion-header>
+          <ion-content class="ion-padding">
+            <p>This is modal number ${modalNumber}</p>
+            ${presentNextButton}
+            <ion-button class="dismiss-by-id">Dismiss By ID</ion-button>
+            <ion-button class="dismiss-default">Dismiss Default</ion-button>
+          </ion-content>
+        `;
+        return element;
+      }
+
+      window.presentFirstModal = async () => {
+        modalCount = 0;
+        await presentNextModal(1);
+      };
+
+      window.presentNextModal = async (modalNumber) => {
+        if (modalNumber > maxModals) {
+          return;
+        }
+        modalCount = Math.max(modalCount, modalNumber);
+        const element = createModalComponent(modalNumber);
+        const modal = await modalController.create({
+          component: element,
+          htmlAttributes: {
+            id: sharedId,
+            'data-testid': `modal-${modalNumber}`,
+          },
+        });
+        await modal.present();
+
+        const dismissByIdButton = element.querySelector('ion-button.dismiss-by-id');
+        dismissByIdButton.addEventListener('click', () => {
+          modalController.dismiss(undefined, undefined, sharedId);
+        });
+
+        const dismissDefaultButton = element.querySelector('ion-button.dismiss-default');
+        dismissDefaultButton.addEventListener('click', () => {
+          modalController.dismiss();
+        });
+      };
+    </script>
+  </body>
+</html>
--- a/core/src/components/modal/test/dismiss-behavior/modal.e2e.ts
+++ b/core/src/components/modal/test/dismiss-behavior/modal.e2e.ts
@@ -0,0 +1,58 @@
+import { expect } from '@playwright/test';
+import { configs, test } from '@utils/test/playwright';
+
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('modal: dismiss behavior'), () => {
+    test.describe(title('modal: default dismiss'), () => {
+      test('should dismiss the last presented modal when the default dismiss button is clicked', async ({ page }) => {
+        await page.goto('/src/components/modal/test/dismiss-behavior', config);
+
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+        const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+        await page.click('#present-first-modal');
+        await ionModalDidPresent.next();
+        const firstModal = page.locator('ion-modal[data-testid="modal-1"]');
+        await expect(firstModal).toBeVisible();
+
+        await page.click('#present-next-modal');
+        await ionModalDidPresent.next();
+        const secondModal = page.locator('ion-modal[data-testid="modal-2"]');
+        await expect(secondModal).toBeVisible();
+
+        await page.click('ion-modal[data-testid="modal-2"] ion-button.dismiss-default');
+        await ionModalDidDismiss.next();
+        await secondModal.waitFor({ state: 'detached' });
+
+        await expect(firstModal).toBeVisible();
+        await expect(secondModal).toBeHidden();
+      });
+    });
+
+    test.describe(title('modal: dismiss by id'), () => {
+      test('should dismiss the last presented modal when the dismiss by id button is clicked', async ({ page }) => {
+        await page.goto('/src/components/modal/test/dismiss-behavior', config);
+
+        const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+        const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+        await page.click('#present-first-modal');
+        await ionModalDidPresent.next();
+        const firstModal = page.locator('ion-modal[data-testid="modal-1"]');
+        await expect(firstModal).toBeVisible();
+
+        await page.click('#present-next-modal');
+        await ionModalDidPresent.next();
+        const secondModal = page.locator('ion-modal[data-testid="modal-2"]');
+        await expect(secondModal).toBeVisible();
+
+        await page.click('ion-modal[data-testid="modal-2"] ion-button.dismiss-by-id');
+        await ionModalDidDismiss.next();
+        await secondModal.waitFor({ state: 'detached' });
+
+        await expect(firstModal).toBeVisible();
+        await expect(secondModal).toBeHidden();
+      });
+    });
+  });
+});
--- a/core/src/components/modal/test/modal-id.spec.tsx
+++ b/core/src/components/modal/test/modal-id.spec.tsx
@@ -1,7 +1,7 @@
+import { h } from '@stencil/core';
 import { newSpecPage } from '@stencil/core/testing';

 import { Modal } from '../modal';
-import { h } from '@stencil/core';

 describe('modal: id', () => {
  it('modal should be assigned an incrementing id', async () => {
@@ -52,4 +52,21 @@ describe('modal: id', () => {
    const alert = page.body.querySelector('ion-modal')!;
    expect(alert.id).toBe(id);
  });
+
+  it('should allow multiple modals with the same id', async () => {
+    const sharedId = 'shared-modal-id';
+
+    const page = await newSpecPage({
+      components: [Modal],
+      template: () => [
+        <ion-modal id={sharedId} overlayIndex={1} is-open={true}></ion-modal>,
+        <ion-modal id={sharedId} overlayIndex={2} is-open={true}></ion-modal>,
+      ],
+    });
+
+    const modals = page.body.querySelectorAll('ion-modal');
+    expect(modals.length).toBe(2);
+    expect(modals[0].id).toBe(sharedId);
+    expect(modals[1].id).toBe(sharedId);
+  });
 });
--- a/core/src/components/tab-bar/tab-bar.tsx
+++ b/core/src/components/tab-bar/tab-bar.tsx
@@ -22,6 +22,7 @@ import type { TabBarChangedEventDetail } from './tab-bar-interface';
 })
 export class TabBar implements ComponentInterface {
  private keyboardCtrl: KeyboardController | null = null;
+  private keyboardCtrlPromise: Promise<KeyboardController> | null = null;
  private didLoad = false;

  @Element() el!: HTMLElement;
@@ -88,7 +89,7 @@ export class TabBar implements ComponentInterface {
  }

  async connectedCallback() {
-    this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
+    const promise = createKeyboardController(async (keyboardOpen, waitForResize) => {
      /**
       * If the keyboard is hiding, then we need to wait
       * for the webview to resize. Otherwise, the tab bar
@@ -100,11 +101,32 @@ export class TabBar implements ComponentInterface {

      this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
    });
+    this.keyboardCtrlPromise = promise;
+
+    const keyboardCtrl = await promise;
+
+    /**
+     * Only assign if this is still the current promise.
+     * Otherwise, a new connectedCallback has started or
+     * disconnectedCallback was called, so destroy this instance.
+     */
+    if (this.keyboardCtrlPromise === promise) {
+      this.keyboardCtrl = keyboardCtrl;
+      this.keyboardCtrlPromise = null;
+    } else {
+      keyboardCtrl.destroy();
+    }
  }

  disconnectedCallback() {
+    if (this.keyboardCtrlPromise) {
+      this.keyboardCtrlPromise.then((ctrl) => ctrl.destroy());
+      this.keyboardCtrlPromise = null;
+    }
+
    if (this.keyboardCtrl) {
      this.keyboardCtrl.destroy();
+      this.keyboardCtrl = null;
    }
  }

--- a/core/src/components/textarea/textarea.scss
+++ b/core/src/components/textarea/textarea.scss
@@ -205,9 +205,13 @@
 // otherwise the .input-cover will not be rendered at all
 // The input cover is not clickable when the input is disabled
 .cloned-input {
-  @include position(0, null, 0, 0);
-
  position: absolute;
+  top: 0;
+  bottom: 0;
+
+  // Reset height since absolute positioning with top/bottom handles sizing
+  height: auto;
+  max-height: none;

  pointer-events: none;
 }
--- a/core/src/components/toast/test/layout/index.html
+++ b/core/src/components/toast/test/layout/index.html
@@ -29,6 +29,9 @@
      <ion-content class="ion-padding">
        <button id="baseline" onclick="openToast(baselineConfig)">Open Baseline Layout Toast</button>
        <button id="stacked" onclick="openToast(stackedConfig)">Open Stacked Layout Toast</button>
+        <button id="stacked-long-message" onclick="openToast(stackedLongMessageConfig)">
+          Open Stacked Layout Toast with Long Message
+        </button>
      </ion-content>

      <script>
@@ -52,6 +55,13 @@
          message: 'This is a stacked layout toast.',
          layout: 'stacked',
        };
+
+        const stackedLongMessageConfig = {
+          ...baselineConfig,
+          message:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in elit varius, maximus sem in, bibendum justo.',
+          layout: 'stacked',
+        };
      </script>
    </ion-app>
  </body>
--- a/core/src/components/toast/test/layout/toast.e2e.ts
+++ b/core/src/components/toast/test/layout/toast.e2e.ts
@@ -3,7 +3,7 @@ import { configs, test } from '@utils/test/playwright';

 configs().forEach(({ title, screenshot, config }) => {
  test.describe(title('toast: stacked layout'), () => {
-    test('should render stacked buttons', async ({ page }) => {
+    test('should render stacked toast', async ({ page }) => {
      await page.goto('/src/components/toast/test/layout', config);
      const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');

@@ -13,5 +13,21 @@ configs().forEach(({ title, screenshot, config }) => {
      const toastWrapper = page.locator('ion-toast .toast-wrapper');
      await expect(toastWrapper).toHaveScreenshot(screenshot(`toast-stacked`));
    });
+
+    test('should render stacked toast with long message', async ({ page }, testInfo) => {
+      testInfo.annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/30908',
+      });
+
+      await page.goto('/src/components/toast/test/layout', config);
+      const ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
+
+      await page.click('#stacked-long-message');
+      await ionToastDidPresent.next();
+
+      const toastWrapper = page.locator('ion-toast .toast-wrapper');
+      await expect(toastWrapper).toHaveScreenshot(screenshot(`toast-stacked-long-message`));
+    });
  });
 });
--- a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-ltr-Mobile-Safari-linux.png
--- a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-ios-rtl-Mobile-Safari-linux.png
--- a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-ltr-Mobile-Chrome-linux.png
+++ b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-ltr-Mobile-Chrome-linux.png
--- a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-ltr-Mobile-Firefox-linux.png
+++ b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-ltr-Mobile-Firefox-linux.png
--- a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-ltr-Mobile-Safari-linux.png
+++ b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-ltr-Mobile-Safari-linux.png
--- a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-rtl-Mobile-Chrome-linux.png
+++ b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-rtl-Mobile-Chrome-linux.png
--- a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-rtl-Mobile-Firefox-linux.png
+++ b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-rtl-Mobile-Firefox-linux.png
--- a/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-rtl-Mobile-Safari-linux.png
+++ b/core/src/components/toast/test/layout/toast.e2e.ts-snapshots/toast-stacked-long-message-md-rtl-Mobile-Safari-linux.png
--- a/core/src/components/toast/toast.scss
+++ b/core/src/components/toast/toast.scss
@@ -132,7 +132,6 @@
 .toast-layout-baseline .toast-content {
  display: flex;

-  flex: 1;
  flex-direction: column;
  justify-content: center;
 }
@@ -142,6 +141,8 @@
 }

 .toast-content {
+  flex: 1;
+
  min-width: 0;
 }

--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@@ -252,10 +252,12 @@ html.plt-ios.plt-hybrid, html.plt-ios.plt-pwa {

@supports (padding-top: env(safe-area-inset-top)) {
  html {
-    --ion-safe-area-top: env(safe-area-inset-top);
-    --ion-safe-area-bottom: env(safe-area-inset-bottom);
-    --ion-safe-area-left: env(safe-area-inset-left);
-    --ion-safe-area-right: env(safe-area-inset-right);
+    // `--safe-area-inset-*` are set by Capacitor
+    // @see https://capacitorjs.com/docs/apis/system-bars#android-note
+    --ion-safe-area-top: var(--safe-area-inset-top, env(safe-area-inset-top));
+    --ion-safe-area-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom));
+    --ion-safe-area-left: var(--safe-area-inset-left, env(safe-area-inset-left));
+    --ion-safe-area-right: var(--safe-area-inset-right, env(safe-area-inset-right));
  }
 }

--- a/core/src/utils/input-shims/hacks/common.ts
+++ b/core/src/utils/input-shims/hacks/common.ts
@@ -68,11 +68,26 @@ const addClone = (
  if (disabledClonedInput) {
    clonedEl.disabled = true;
  }
+
+  /**
+   * Position the clone at the same horizontal offset as the native input
+   * to prevent the placeholder from overlapping start slot content (e.g., icons).
+   */
+  const doc = componentEl.ownerDocument!;
+  const isRTL = doc.dir === 'rtl';
+
+  if (isRTL) {
+    const parentWidth = (parentEl as HTMLElement).offsetWidth;
+    const startOffset = parentWidth - inputEl.offsetLeft - inputEl.offsetWidth;
+    clonedEl.style.insetInlineStart = `${startOffset}px`;
+  } else {
+    clonedEl.style.insetInlineStart = `${inputEl.offsetLeft}px`;
+  }
+
  parentEl.appendChild(clonedEl);
  cloneMap.set(componentEl, clonedEl);

-  const doc = componentEl.ownerDocument!;
-  const tx = doc.dir === 'rtl' ? 9999 : -9999;
+  const tx = isRTL ? 9999 : -9999;
  componentEl.style.pointerEvents = 'none';
  inputEl.style.transform = `translate3d(${tx}px,${inputRelativeY}px,0) scale(0)`;
 };
--- a/core/src/utils/input-shims/hacks/scroll-assist.ts
+++ b/core/src/utils/input-shims/hacks/scroll-assist.ts
@@ -291,8 +291,14 @@ const jsSetFocus = async (
      // give the native text input focus
      relocateInput(componentEl, inputEl, false, scrollData.inputSafeY);

-      // ensure this is the focused input
-      setManualFocus(inputEl);
+      /**
+       * If focus has moved to another element while scroll assist was running,
+       * don't steal focus back. This prevents focus jumping when users
+       * quickly switch between inputs or tap other elements.
+       */
+      if (document.activeElement === inputEl) {
+        setManualFocus(inputEl);
+      }

      /**
       * When the input is about to be blurred
--- a/core/src/utils/overlays.ts
+++ b/core/src/utils/overlays.ts
@@ -473,7 +473,9 @@ export const getPresentedOverlay = (
  id?: string
 ): HTMLIonOverlayElement | undefined => {
  const overlays = getPresentedOverlays(doc, overlayTag);
-  return id === undefined ? overlays[overlays.length - 1] : overlays.find((o) => o.id === id);
+  // If no id is provided, return the last presented overlay
+  // Otherwise, return the last overlay with the given id
+  return (id === undefined ? overlays : overlays.filter((o: HTMLIonOverlayElement) => o.id === id)).slice(-1)[0];
 };

 /**
--- a/lerna.json
+++ b/lerna.json
@@ -3,5 +3,5 @@
    "core",
    "packages/*"
  ],
-  "version": "8.7.13"
+  "version": "8.7.17"
 }
--- a/packages/angular-server/CHANGELOG.md
+++ b/packages/angular-server/CHANGELOG.md
@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [8.7.17](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.17) (2026-01-14)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [8.7.16](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.16) (2025-12-31)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [8.7.15](https://github.com/ionic-team/ionic-framework/compare/v8.7.14...v8.7.15) (2025-12-23)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
+## [8.7.14](https://github.com/ionic-team/ionic-framework/compare/v8.7.13...v8.7.14) (2025-12-17)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
 ## [8.7.13](https://github.com/ionic-team/ionic-framework/compare/v8.7.12...v8.7.13) (2025-12-13)

 **Note:** Version bump only for package @ionic/angular-server
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
@@ -1,15 +1,15 @@
 {
  "name": "@ionic/angular-server",
-  "version": "8.7.13",
+  "version": "8.7.17",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/angular-server",
-      "version": "8.7.13",
+      "version": "8.7.17",
      "license": "MIT",
      "dependencies": {
-        "@ionic/core": "^8.7.13"
+        "@ionic/core": "^8.7.17"
      },
      "devDependencies": {
        "@angular-eslint/eslint-plugin": "^16.0.0",
@@ -1031,9 +1031,9 @@
      "dev": true
    },
    "node_modules/@ionic/core": {
-      "version": "8.7.13",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.13.tgz",
-      "integrity": "sha512-72sbep6UOiGn+KYKtVSPZhKuq0o68X6mWi5sCyXYE/V1nzUknew9RGohcxbtt5iMVgjuny/m4liIUwVgvvQ5mw==",
+      "version": "8.7.17",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.17.tgz",
+      "integrity": "sha512-gp7PIEJX27NX/FkjiUlpjQUtJiFFE5W1lofRC5CfORQ8p4PrLh9wJO9EJH0YryCr2qZS0k47sYgRQP5FwiXlpg==",
      "license": "MIT",
      "dependencies": {
        "@stencil/core": "4.38.0",
@@ -7309,9 +7309,9 @@
      "dev": true
    },
    "@ionic/core": {
-      "version": "8.7.13",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.13.tgz",
-      "integrity": "sha512-72sbep6UOiGn+KYKtVSPZhKuq0o68X6mWi5sCyXYE/V1nzUknew9RGohcxbtt5iMVgjuny/m4liIUwVgvvQ5mw==",
+      "version": "8.7.17",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.17.tgz",
+      "integrity": "sha512-gp7PIEJX27NX/FkjiUlpjQUtJiFFE5W1lofRC5CfORQ8p4PrLh9wJO9EJH0YryCr2qZS0k47sYgRQP5FwiXlpg==",
      "requires": {
        "@stencil/core": "4.38.0",
        "ionicons": "^8.0.13",
--- a/packages/angular-server/package.json
+++ b/packages/angular-server/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/angular-server",
-  "version": "8.7.13",
+  "version": "8.7.17",
  "description": "Angular SSR Module for Ionic",
  "keywords": [
    "ionic",
@@ -62,6 +62,6 @@
  },
  "prettier": "@ionic/prettier-config",
  "dependencies": {
-    "@ionic/core": "^8.7.13"
+    "@ionic/core": "^8.7.17"
  }
 }
--- a/packages/angular/CHANGELOG.md
+++ b/packages/angular/CHANGELOG.md
@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [8.7.17](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.17) (2026-01-14)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [8.7.16](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.16) (2025-12-31)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [8.7.15](https://github.com/ionic-team/ionic-framework/compare/v8.7.14...v8.7.15) (2025-12-23)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
+## [8.7.14](https://github.com/ionic-team/ionic-framework/compare/v8.7.13...v8.7.14) (2025-12-17)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 ## [8.7.13](https://github.com/ionic-team/ionic-framework/compare/v8.7.12...v8.7.13) (2025-12-13)

 **Note:** Version bump only for package @ionic/angular
--- a/packages/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -1,15 +1,15 @@
 {
  "name": "@ionic/angular",
-  "version": "8.7.13",
+  "version": "8.7.17",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/angular",
-      "version": "8.7.13",
+      "version": "8.7.17",
      "license": "MIT",
      "dependencies": {
-        "@ionic/core": "^8.7.13",
+        "@ionic/core": "^8.7.17",
        "ionicons": "^8.0.13",
        "jsonc-parser": "^3.0.0",
        "tslib": "^2.3.0"
@@ -1398,9 +1398,9 @@
      "dev": true
    },
    "node_modules/@ionic/core": {
-      "version": "8.7.13",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.13.tgz",
-      "integrity": "sha512-72sbep6UOiGn+KYKtVSPZhKuq0o68X6mWi5sCyXYE/V1nzUknew9RGohcxbtt5iMVgjuny/m4liIUwVgvvQ5mw==",
+      "version": "8.7.17",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.17.tgz",
+      "integrity": "sha512-gp7PIEJX27NX/FkjiUlpjQUtJiFFE5W1lofRC5CfORQ8p4PrLh9wJO9EJH0YryCr2qZS0k47sYgRQP5FwiXlpg==",
      "license": "MIT",
      "dependencies": {
        "@stencil/core": "4.38.0",
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/angular",
-  "version": "8.7.13",
+  "version": "8.7.17",
  "description": "Angular specific wrappers for @ionic/core",
  "keywords": [
    "ionic",
@@ -48,7 +48,7 @@
    }
  },
  "dependencies": {
-    "@ionic/core": "^8.7.13",
+    "@ionic/core": "^8.7.17",
    "ionicons": "^8.0.13",
    "jsonc-parser": "^3.0.0",
    "tslib": "^2.3.0"
--- a/packages/docs/CHANGELOG.md
+++ b/packages/docs/CHANGELOG.md
@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [8.7.17](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.17) (2026-01-14)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [8.7.16](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.16) (2025-12-31)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [8.7.15](https://github.com/ionic-team/ionic-framework/compare/v8.7.14...v8.7.15) (2025-12-23)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
+## [8.7.14](https://github.com/ionic-team/ionic-framework/compare/v8.7.13...v8.7.14) (2025-12-17)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
 ## [8.7.13](https://github.com/ionic-team/ionic-framework/compare/v8.7.12...v8.7.13) (2025-12-13)

 **Note:** Version bump only for package @ionic/docs
--- a/packages/docs/package-lock.json
+++ b/packages/docs/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@ionic/docs",
-  "version": "8.7.13",
+  "version": "8.7.17",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/docs",
-      "version": "8.7.13",
+      "version": "8.7.17",
      "license": "MIT"
    }
  }
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/docs",
-  "version": "8.7.13",
+  "version": "8.7.17",
  "description": "Pre-packaged API documentation for the Ionic docs.",
  "main": "core.json",
  "types": "core.d.ts",
--- a/packages/react-router/CHANGELOG.md
+++ b/packages/react-router/CHANGELOG.md
@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [8.7.17](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.17) (2026-01-14)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+## [8.7.16](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.16) (2025-12-31)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+## [8.7.15](https://github.com/ionic-team/ionic-framework/compare/v8.7.14...v8.7.15) (2025-12-23)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
+## [8.7.14](https://github.com/ionic-team/ionic-framework/compare/v8.7.13...v8.7.14) (2025-12-17)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
 ## [8.7.13](https://github.com/ionic-team/ionic-framework/compare/v8.7.12...v8.7.13) (2025-12-13)

 **Note:** Version bump only for package @ionic/react-router
--- a/packages/react-router/package-lock.json
+++ b/packages/react-router/package-lock.json
@@ -1,15 +1,15 @@
 {
  "name": "@ionic/react-router",
-  "version": "8.7.13",
+  "version": "8.7.17",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/react-router",
-      "version": "8.7.13",
+      "version": "8.7.17",
      "license": "MIT",
      "dependencies": {
-        "@ionic/react": "^8.7.13",
+        "@ionic/react": "^8.7.17",
        "tslib": "*"
      },
      "devDependencies": {
@@ -238,9 +238,9 @@
      "dev": true
    },
    "node_modules/@ionic/core": {
-      "version": "8.7.13",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.13.tgz",
-      "integrity": "sha512-72sbep6UOiGn+KYKtVSPZhKuq0o68X6mWi5sCyXYE/V1nzUknew9RGohcxbtt5iMVgjuny/m4liIUwVgvvQ5mw==",
+      "version": "8.7.17",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.17.tgz",
+      "integrity": "sha512-gp7PIEJX27NX/FkjiUlpjQUtJiFFE5W1lofRC5CfORQ8p4PrLh9wJO9EJH0YryCr2qZS0k47sYgRQP5FwiXlpg==",
      "license": "MIT",
      "dependencies": {
        "@stencil/core": "4.38.0",
@@ -418,12 +418,12 @@
      }
    },
    "node_modules/@ionic/react": {
-      "version": "8.7.13",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.7.13.tgz",
-      "integrity": "sha512-PCuIpaurVYxYZ/CoUN3gP56Fwdx+bx78Qy7V5Ac61nGGW7XpVlV4vM9328Kv7OPs5fkmIvKI6LoY78BnjF0PkA==",
+      "version": "8.7.17",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.7.17.tgz",
+      "integrity": "sha512-t/ApHBEigSTvovM/hKtNAMrddoOQ5l2GlyjOzASUq7sJLvDS4ewDMk5pRahjGqmFSYSN8TIBlF9QAHswp6XTRg==",
      "license": "MIT",
      "dependencies": {
-        "@ionic/core": "8.7.13",
+        "@ionic/core": "8.7.17",
        "ionicons": "^8.0.13",
        "tslib": "*"
      },
@@ -4178,9 +4178,9 @@
      "dev": true
    },
    "@ionic/core": {
-      "version": "8.7.13",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.13.tgz",
-      "integrity": "sha512-72sbep6UOiGn+KYKtVSPZhKuq0o68X6mWi5sCyXYE/V1nzUknew9RGohcxbtt5iMVgjuny/m4liIUwVgvvQ5mw==",
+      "version": "8.7.17",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.17.tgz",
+      "integrity": "sha512-gp7PIEJX27NX/FkjiUlpjQUtJiFFE5W1lofRC5CfORQ8p4PrLh9wJO9EJH0YryCr2qZS0k47sYgRQP5FwiXlpg==",
      "requires": {
        "@stencil/core": "4.38.0",
        "ionicons": "^8.0.13",
@@ -4284,11 +4284,11 @@
      "requires": {}
    },
    "@ionic/react": {
-      "version": "8.7.13",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.7.13.tgz",
-      "integrity": "sha512-PCuIpaurVYxYZ/CoUN3gP56Fwdx+bx78Qy7V5Ac61nGGW7XpVlV4vM9328Kv7OPs5fkmIvKI6LoY78BnjF0PkA==",
+      "version": "8.7.17",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.7.17.tgz",
+      "integrity": "sha512-t/ApHBEigSTvovM/hKtNAMrddoOQ5l2GlyjOzASUq7sJLvDS4ewDMk5pRahjGqmFSYSN8TIBlF9QAHswp6XTRg==",
      "requires": {
-        "@ionic/core": "8.7.13",
+        "@ionic/core": "8.7.17",
        "ionicons": "^8.0.13",
        "tslib": "*"
      }
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/react-router",
-  "version": "8.7.13",
+  "version": "8.7.17",
  "description": "React Router wrapper for @ionic/react",
  "keywords": [
    "ionic",
@@ -36,7 +36,7 @@
    "dist/"
  ],
  "dependencies": {
-    "@ionic/react": "^8.7.13",
+    "@ionic/react": "^8.7.17",
    "tslib": "*"
  },
  "peerDependencies": {
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [8.7.17](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.17) (2026-01-14)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
+## [8.7.16](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.16) (2025-12-31)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
+## [8.7.15](https://github.com/ionic-team/ionic-framework/compare/v8.7.14...v8.7.15) (2025-12-23)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
+## [8.7.14](https://github.com/ionic-team/ionic-framework/compare/v8.7.13...v8.7.14) (2025-12-17)
+
+
+### Bug Fixes
+
+* **tabs:** select correct tab when routes have similar prefixes ([#30863](https://github.com/ionic-team/ionic-framework/issues/30863)) ([03fb422](https://github.com/ionic-team/ionic-framework/commit/03fb422bfa775e3e9dd695ea1857fa88d4245ecd)), closes [#30448](https://github.com/ionic-team/ionic-framework/issues/30448)
+
+
+
+
+
 ## [8.7.13](https://github.com/ionic-team/ionic-framework/compare/v8.7.12...v8.7.13) (2025-12-13)

 **Note:** Version bump only for package @ionic/react
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -1,15 +1,15 @@
 {
  "name": "@ionic/react",
-  "version": "8.7.13",
+  "version": "8.7.17",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/react",
-      "version": "8.7.13",
+      "version": "8.7.17",
      "license": "MIT",
      "dependencies": {
-        "@ionic/core": "^8.7.13",
+        "@ionic/core": "^8.7.17",
        "ionicons": "^8.0.13",
        "tslib": "*"
      },
@@ -736,9 +736,9 @@
      "dev": true
    },
    "node_modules/@ionic/core": {
-      "version": "8.7.13",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.13.tgz",
-      "integrity": "sha512-72sbep6UOiGn+KYKtVSPZhKuq0o68X6mWi5sCyXYE/V1nzUknew9RGohcxbtt5iMVgjuny/m4liIUwVgvvQ5mw==",
+      "version": "8.7.17",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.17.tgz",
+      "integrity": "sha512-gp7PIEJX27NX/FkjiUlpjQUtJiFFE5W1lofRC5CfORQ8p4PrLh9wJO9EJH0YryCr2qZS0k47sYgRQP5FwiXlpg==",
      "license": "MIT",
      "dependencies": {
        "@stencil/core": "4.38.0",
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/react",
-  "version": "8.7.13",
+  "version": "8.7.17",
  "description": "React specific wrapper for @ionic/core",
  "keywords": [
    "ionic",
@@ -40,7 +40,7 @@
    "css/"
  ],
  "dependencies": {
-    "@ionic/core": "^8.7.13",
+    "@ionic/core": "^8.7.17",
    "ionicons": "^8.0.13",
    "tslib": "*"
  },
--- a/packages/react/src/components/navigation/IonTabBar.tsx
+++ b/packages/react/src/components/navigation/IonTabBar.tsx
@@ -40,6 +40,20 @@ interface IonTabBarState {

 // TODO(FW-2959): types

+/**
+ * Checks if pathname matches the tab's href using path segment matching.
+ * Avoids false matches like /home2 matching /home by requiring exact match
+ * or a path segment boundary (/).
+ */
+const matchesTab = (pathname: string, href: string | undefined): boolean => {
+  if (href === undefined) {
+    return false;
+  }
+
+  const normalizedHref = href.endsWith('/') && href !== '/' ? href.slice(0, -1) : href;
+  return pathname === normalizedHref || pathname.startsWith(normalizedHref + '/');
+};
+
 class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarState> {
  context!: React.ContextType<typeof NavContext>;

@@ -79,7 +93,7 @@ class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarSta
    const tabKeys = Object.keys(tabs);
    const activeTab = tabKeys.find((key) => {
      const href = tabs[key].originalHref;
-      return this.props.routeInfo!.pathname.startsWith(href);
+      return matchesTab(this.props.routeInfo!.pathname, href);
    });

    if (activeTab) {
@@ -121,7 +135,7 @@ class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarSta
    const tabKeys = Object.keys(state.tabs);
    const activeTab = tabKeys.find((key) => {
      const href = state.tabs[key].originalHref;
-      return props.routeInfo!.pathname.startsWith(href);
+      return matchesTab(props.routeInfo!.pathname, href);
    });

    // Check to see if the tab button href has changed, and if so, update it in the tabs state
--- a/packages/react/test/base/src/App.tsx
+++ b/packages/react/test/base/src/App.tsx
@@ -28,6 +28,7 @@ import Tabs from './pages/Tabs';
 import TabsBasic from './pages/TabsBasic';
 import NavComponent from './pages/navigation/NavComponent';
 import TabsDirectNavigation from './pages/TabsDirectNavigation';
+import TabsSimilarPrefixes from './pages/TabsSimilarPrefixes';
 import IonModalConditional from './pages/overlay-components/IonModalConditional';
 import IonModalConditionalSibling from './pages/overlay-components/IonModalConditionalSibling';
 import IonModalDatetimeButton from './pages/overlay-components/IonModalDatetimeButton';
@@ -67,6 +68,7 @@ const App: React.FC = () => (
        <Route path="/tabs" component={Tabs} />
        <Route path="/tabs-basic" component={TabsBasic} />
        <Route path="/tabs-direct-navigation" component={TabsDirectNavigation} />
+        <Route path="/tabs-similar-prefixes" component={TabsSimilarPrefixes} />
        <Route path="/icons" component={Icons} />
        <Route path="/inputs" component={Inputs} />
        <Route path="/reorder-group" component={ReorderGroup} />
--- a/packages/react/test/base/src/pages/Main.tsx
+++ b/packages/react/test/base/src/pages/Main.tsx
@@ -46,6 +46,9 @@ const Main: React.FC<MainProps> = () => {
          <IonItem routerLink="/tabs-direct-navigation">
            <IonLabel>Tabs with Direct Navigation</IonLabel>
          </IonItem>
+          <IonItem routerLink="/tabs-similar-prefixes">
+            <IonLabel>Tabs with Similar Route Prefixes</IonLabel>
+          </IonItem>
          <IonItem routerLink="/icons">
            <IonLabel>Icons</IonLabel>
          </IonItem>
--- a/packages/react/test/base/src/pages/TabsSimilarPrefixes.tsx
+++ b/packages/react/test/base/src/pages/TabsSimilarPrefixes.tsx
@@ -0,0 +1,87 @@
+import {
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonLabel,
+  IonPage,
+  IonRouterOutlet,
+  IonTabBar,
+  IonTabButton,
+  IonTabs,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react';
+import { homeOutline, radioOutline, libraryOutline } from 'ionicons/icons';
+import React from 'react';
+import { Route, Redirect } from 'react-router-dom';
+
+const HomePage: React.FC = () => (
+  <IonPage data-testid="home-page">
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>Home</IonTitle>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent>
+      <div data-testid="home-content">Home Content</div>
+    </IonContent>
+  </IonPage>
+);
+
+const Home2Page: React.FC = () => (
+  <IonPage data-testid="home2-page">
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>Home 2</IonTitle>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent>
+      <div data-testid="home2-content">Home 2 Content</div>
+    </IonContent>
+  </IonPage>
+);
+
+const Home3Page: React.FC = () => (
+  <IonPage data-testid="home3-page">
+    <IonHeader>
+      <IonToolbar>
+        <IonTitle>Home 3</IonTitle>
+      </IonToolbar>
+    </IonHeader>
+    <IonContent>
+      <div data-testid="home3-content">Home 3 Content</div>
+    </IonContent>
+  </IonPage>
+);
+
+const TabsSimilarPrefixes: React.FC = () => {
+  return (
+    <IonTabs data-testid="tabs-similar-prefixes">
+      <IonRouterOutlet>
+        <Redirect exact path="/tabs-similar-prefixes" to="/tabs-similar-prefixes/home" />
+        <Route path="/tabs-similar-prefixes/home" render={() => <HomePage />} exact={true} />
+        <Route path="/tabs-similar-prefixes/home2" render={() => <Home2Page />} exact={true} />
+        <Route path="/tabs-similar-prefixes/home3" render={() => <Home3Page />} exact={true} />
+      </IonRouterOutlet>
+
+      <IonTabBar slot="bottom" data-testid="tab-bar">
+        <IonTabButton tab="home" href="/tabs-similar-prefixes/home" data-testid="home-tab">
+          <IonIcon icon={homeOutline}></IonIcon>
+          <IonLabel>Home</IonLabel>
+        </IonTabButton>
+
+        <IonTabButton tab="home2" href="/tabs-similar-prefixes/home2" data-testid="home2-tab">
+          <IonIcon icon={radioOutline}></IonIcon>
+          <IonLabel>Home 2</IonLabel>
+        </IonTabButton>
+
+        <IonTabButton tab="home3" href="/tabs-similar-prefixes/home3" data-testid="home3-tab">
+          <IonIcon icon={libraryOutline}></IonIcon>
+          <IonLabel>Home 3</IonLabel>
+        </IonTabButton>
+      </IonTabBar>
+    </IonTabs>
+  );
+};
+
+export default TabsSimilarPrefixes;
--- a/packages/react/test/base/tests/e2e/specs/tabs/tabs.cy.ts
+++ b/packages/react/test/base/tests/e2e/specs/tabs/tabs.cy.ts
@@ -1,4 +1,45 @@
 describe('IonTabs', () => {
+  /**
+   * Verifies that tabs with similar route prefixes (e.g., /home, /home2, /home3)
+   * correctly select the matching tab instead of the first prefix match.
+   * 
+   * @see https://github.com/ionic-team/ionic-framework/issues/30448
+   */
+  describe('Similar Route Prefixes', () => {
+    it('should select the correct tab when routes have similar prefixes', () => {
+      cy.visit('/tabs-similar-prefixes/home2');
+
+      cy.get('[data-testid="home2-content"]').should('be.visible');
+      cy.get('[data-testid="home2-tab"]').should('have.class', 'tab-selected');
+      cy.get('[data-testid="home-tab"]').should('not.have.class', 'tab-selected');
+    });
+
+    it('should select the correct tab when navigating via tab buttons', () => {
+      cy.visit('/tabs-similar-prefixes/home');
+
+      cy.get('[data-testid="home-tab"]').should('have.class', 'tab-selected');
+      cy.get('[data-testid="home2-tab"]').should('not.have.class', 'tab-selected');
+
+      cy.get('[data-testid="home2-tab"]').click();
+      cy.get('[data-testid="home2-tab"]').should('have.class', 'tab-selected');
+      cy.get('[data-testid="home-tab"]').should('not.have.class', 'tab-selected');
+
+      cy.get('[data-testid="home3-tab"]').click();
+      cy.get('[data-testid="home3-tab"]').should('have.class', 'tab-selected');
+      cy.get('[data-testid="home-tab"]').should('not.have.class', 'tab-selected');
+      cy.get('[data-testid="home2-tab"]').should('not.have.class', 'tab-selected');
+    });
+
+    it('should select the correct tab when directly navigating to home3', () => {
+      cy.visit('/tabs-similar-prefixes/home3');
+
+      cy.get('[data-testid="home3-content"]').should('be.visible');
+      cy.get('[data-testid="home3-tab"]').should('have.class', 'tab-selected');
+      cy.get('[data-testid="home-tab"]').should('not.have.class', 'tab-selected');
+      cy.get('[data-testid="home2-tab"]').should('not.have.class', 'tab-selected');
+    });
+  });
+
  describe('With IonRouterOutlet', () => {
    beforeEach(() => {
      cy.visit('/tabs/tab1');
--- a/packages/vue-router/CHANGELOG.md
+++ b/packages/vue-router/CHANGELOG.md
@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [8.7.17](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.17) (2026-01-14)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
+## [8.7.16](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.16) (2025-12-31)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
+## [8.7.15](https://github.com/ionic-team/ionic-framework/compare/v8.7.14...v8.7.15) (2025-12-23)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
+## [8.7.14](https://github.com/ionic-team/ionic-framework/compare/v8.7.13...v8.7.14) (2025-12-17)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
 ## [8.7.13](https://github.com/ionic-team/ionic-framework/compare/v8.7.12...v8.7.13) (2025-12-13)

 **Note:** Version bump only for package @ionic/vue-router
--- a/packages/vue-router/package-lock.json
+++ b/packages/vue-router/package-lock.json
@@ -1,15 +1,15 @@
 {
  "name": "@ionic/vue-router",
-  "version": "8.7.13",
+  "version": "8.7.17",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/vue-router",
-      "version": "8.7.13",
+      "version": "8.7.17",
      "license": "MIT",
      "dependencies": {
-        "@ionic/vue": "^8.7.13"
+        "@ionic/vue": "^8.7.17"
      },
      "devDependencies": {
        "@ionic/eslint-config": "^0.3.0",
@@ -673,9 +673,9 @@
      "dev": true
    },
    "node_modules/@ionic/core": {
-      "version": "8.7.13",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.13.tgz",
-      "integrity": "sha512-72sbep6UOiGn+KYKtVSPZhKuq0o68X6mWi5sCyXYE/V1nzUknew9RGohcxbtt5iMVgjuny/m4liIUwVgvvQ5mw==",
+      "version": "8.7.17",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.17.tgz",
+      "integrity": "sha512-gp7PIEJX27NX/FkjiUlpjQUtJiFFE5W1lofRC5CfORQ8p4PrLh9wJO9EJH0YryCr2qZS0k47sYgRQP5FwiXlpg==",
      "license": "MIT",
      "dependencies": {
        "@stencil/core": "4.38.0",
@@ -868,12 +868,12 @@
      }
    },
    "node_modules/@ionic/vue": {
-      "version": "8.7.13",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.7.13.tgz",
-      "integrity": "sha512-hflvGaNPABYP0Qt68YgrauVaXyjKeHODOkYzJhk36kcr+VexwTWm1FGJG1/nKKgdh6fwDIsubJvlhoZaRhtVtg==",
+      "version": "8.7.17",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.7.17.tgz",
+      "integrity": "sha512-S/UQc/ytauWxcAtM6cLz1mbpqwv8xuSdTzF8aslPi8zGELdXJSg48QBP6ehhFj+uv8qsblrRd4TjCQYyskyMCQ==",
      "license": "MIT",
      "dependencies": {
-        "@ionic/core": "8.7.13",
+        "@ionic/core": "8.7.17",
        "@stencil/vue-output-target": "0.10.7",
        "ionicons": "^8.0.13"
      }
@@ -8044,9 +8044,9 @@
      "dev": true
    },
    "@ionic/core": {
-      "version": "8.7.13",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.13.tgz",
-      "integrity": "sha512-72sbep6UOiGn+KYKtVSPZhKuq0o68X6mWi5sCyXYE/V1nzUknew9RGohcxbtt5iMVgjuny/m4liIUwVgvvQ5mw==",
+      "version": "8.7.17",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.17.tgz",
+      "integrity": "sha512-gp7PIEJX27NX/FkjiUlpjQUtJiFFE5W1lofRC5CfORQ8p4PrLh9wJO9EJH0YryCr2qZS0k47sYgRQP5FwiXlpg==",
      "requires": {
        "@stencil/core": "4.38.0",
        "ionicons": "^8.0.13",
@@ -8159,11 +8159,11 @@
      "requires": {}
    },
    "@ionic/vue": {
-      "version": "8.7.13",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.7.13.tgz",
-      "integrity": "sha512-hflvGaNPABYP0Qt68YgrauVaXyjKeHODOkYzJhk36kcr+VexwTWm1FGJG1/nKKgdh6fwDIsubJvlhoZaRhtVtg==",
+      "version": "8.7.17",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.7.17.tgz",
+      "integrity": "sha512-S/UQc/ytauWxcAtM6cLz1mbpqwv8xuSdTzF8aslPi8zGELdXJSg48QBP6ehhFj+uv8qsblrRd4TjCQYyskyMCQ==",
      "requires": {
-        "@ionic/core": "8.7.13",
+        "@ionic/core": "8.7.17",
        "@stencil/vue-output-target": "0.10.7",
        "ionicons": "^8.0.13"
      }
--- a/packages/vue-router/package.json
+++ b/packages/vue-router/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/vue-router",
-  "version": "8.7.13",
+  "version": "8.7.17",
  "description": "Vue Router integration for @ionic/vue",
  "scripts": {
    "test.spec": "jest",
@@ -44,7 +44,7 @@
  },
  "homepage": "https://github.com/ionic-team/ionic-framework#readme",
  "dependencies": {
-    "@ionic/vue": "^8.7.13"
+    "@ionic/vue": "^8.7.17"
  },
  "devDependencies": {
    "@ionic/eslint-config": "^0.3.0",
--- a/packages/vue/CHANGELOG.md
+++ b/packages/vue/CHANGELOG.md
@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+## [8.7.17](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.17) (2026-01-14)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
+## [8.7.16](https://github.com/ionic-team/ionic-framework/compare/v8.7.15...v8.7.16) (2025-12-31)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
+## [8.7.15](https://github.com/ionic-team/ionic-framework/compare/v8.7.14...v8.7.15) (2025-12-23)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
+## [8.7.14](https://github.com/ionic-team/ionic-framework/compare/v8.7.13...v8.7.14) (2025-12-17)
+
+
+### Bug Fixes
+
+* **tabs:** select correct tab when routes have similar prefixes ([#30863](https://github.com/ionic-team/ionic-framework/issues/30863)) ([03fb422](https://github.com/ionic-team/ionic-framework/commit/03fb422bfa775e3e9dd695ea1857fa88d4245ecd)), closes [#30448](https://github.com/ionic-team/ionic-framework/issues/30448)
+
+
+
+
+
 ## [8.7.13](https://github.com/ionic-team/ionic-framework/compare/v8.7.12...v8.7.13) (2025-12-13)

 **Note:** Version bump only for package @ionic/vue
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -1,15 +1,15 @@
 {
  "name": "@ionic/vue",
-  "version": "8.7.13",
+  "version": "8.7.17",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@ionic/vue",
-      "version": "8.7.13",
+      "version": "8.7.17",
      "license": "MIT",
      "dependencies": {
-        "@ionic/core": "^8.7.13",
+        "@ionic/core": "^8.7.17",
        "@stencil/vue-output-target": "0.10.7",
        "ionicons": "^8.0.13"
      },
@@ -222,9 +222,9 @@
      "dev": true
    },
    "node_modules/@ionic/core": {
-      "version": "8.7.13",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.13.tgz",
-      "integrity": "sha512-72sbep6UOiGn+KYKtVSPZhKuq0o68X6mWi5sCyXYE/V1nzUknew9RGohcxbtt5iMVgjuny/m4liIUwVgvvQ5mw==",
+      "version": "8.7.17",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.7.17.tgz",
+      "integrity": "sha512-gp7PIEJX27NX/FkjiUlpjQUtJiFFE5W1lofRC5CfORQ8p4PrLh9wJO9EJH0YryCr2qZS0k47sYgRQP5FwiXlpg==",
      "license": "MIT",
      "dependencies": {
        "@stencil/core": "4.38.0",
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@ionic/vue",
-  "version": "8.7.13",
+  "version": "8.7.17",
  "description": "Vue specific wrapper for @ionic/core",
  "scripts": {
    "eslint": "eslint src",
@@ -68,7 +68,7 @@
    "vue-router": "^4.0.16"
  },
  "dependencies": {
-    "@ionic/core": "^8.7.13",
+    "@ionic/core": "^8.7.17",
    "@stencil/vue-output-target": "0.10.7",
    "ionicons": "^8.0.13"
  },
--- a/packages/vue/src/components/IonTabBar.ts
+++ b/packages/vue/src/components/IonTabBar.ts
@@ -24,6 +24,23 @@ interface TabBarData {

 const isTabButton = (child: any) => child.type?.name === "IonTabButton";

+/**
+ * Checks if pathname matches the tab's href using path segment matching.
+ * Avoids false matches like /home2 matching /home by requiring exact match
+ * or a path segment boundary (/).
+ */
+const matchesTab = (pathname: string, href: string | undefined): boolean => {
+  if (href === undefined) {
+    return false;
+  }
+
+  const normalizedHref =
+    href.endsWith("/") && href !== "/" ? href.slice(0, -1) : href;
+  return (
+    pathname === normalizedHref || pathname.startsWith(normalizedHref + "/")
+  );
+};
+
 const getTabs = (nodes: VNode[]) => {
  let tabs: VNode[] = [];
  nodes.forEach((node: VNode) => {
@@ -135,7 +152,9 @@ export const IonTabBar = defineComponent({
      const tabKeys = Object.keys(tabs);
      let activeTab = tabKeys.find((key) => {
        const href = tabs[key].originalHref;
-        return currentRoute?.pathname.startsWith(href);
+        return (
+          currentRoute?.pathname && matchesTab(currentRoute.pathname, href)
+        );
      });

      /**
--- a/packages/vue/test/base/src/router/index.ts
+++ b/packages/vue/test/base/src/router/index.ts
@@ -165,6 +165,28 @@ const routes: Array<RouteRecordRaw> = [
    path: '/tabs-basic',
    component: () => import('@/views/TabsBasic.vue')
  },
+  {
+    path: '/tabs-similar-prefixes/',
+    component: () => import('@/views/tabs-similar-prefixes/TabsSimilarPrefixes.vue'),
+    children: [
+      {
+        path: '',
+        redirect: '/tabs-similar-prefixes/home'
+      },
+      {
+        path: 'home',
+        component: () => import('@/views/tabs-similar-prefixes/Home.vue'),
+      },
+      {
+        path: 'home2',
+        component: () => import('@/views/tabs-similar-prefixes/Home2.vue'),
+      },
+      {
+        path: 'home3',
+        component: () => import('@/views/tabs-similar-prefixes/Home3.vue'),
+      }
+    ]
+  },
 ]

 const router = createRouter({
--- a/packages/vue/test/base/src/views/Home.vue
+++ b/packages/vue/test/base/src/views/Home.vue
@@ -50,6 +50,9 @@
        <ion-item router-link="/tabs-basic" id="tab-basic">
          <ion-label>Tabs with Basic Navigation</ion-label>
        </ion-item>
+        <ion-item router-link="/tabs-similar-prefixes" id="tabs-similar-prefixes">
+          <ion-label>Tabs with Similar Route Prefixes</ion-label>
+        </ion-item>
        <ion-item router-link="/lifecycle" id="lifecycle">
          <ion-label>Lifecycle</ion-label>
        </ion-item>
--- a/packages/vue/test/base/src/views/tabs-similar-prefixes/Home.vue
+++ b/packages/vue/test/base/src/views/tabs-similar-prefixes/Home.vue
@@ -0,0 +1,16 @@
+<template>
+  <ion-page data-pageid="home">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Home</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <div data-testid="home-content">Home Content</div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+</script>
--- a/packages/vue/test/base/src/views/tabs-similar-prefixes/Home2.vue
+++ b/packages/vue/test/base/src/views/tabs-similar-prefixes/Home2.vue
@@ -0,0 +1,16 @@
+<template>
+  <ion-page data-pageid="home2">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Home 2</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <div data-testid="home2-content">Home 2 Content</div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+</script>
--- a/packages/vue/test/base/src/views/tabs-similar-prefixes/Home3.vue
+++ b/packages/vue/test/base/src/views/tabs-similar-prefixes/Home3.vue
@@ -0,0 +1,16 @@
+<template>
+  <ion-page data-pageid="home3">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Home 3</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <div data-testid="home3-content">Home 3 Content</div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+</script>
--- a/packages/vue/test/base/src/views/tabs-similar-prefixes/TabsSimilarPrefixes.vue
+++ b/packages/vue/test/base/src/views/tabs-similar-prefixes/TabsSimilarPrefixes.vue
@@ -0,0 +1,54 @@
+<template>
+  <ion-page data-pageid="tabs-similar-prefixes">
+    <ion-content>
+      <ion-tabs id="tabs-similar-prefixes">
+        <ion-router-outlet></ion-router-outlet>
+        <ion-tab-bar slot="bottom" data-testid="tab-bar">
+          <ion-tab-button
+            tab="home"
+            href="/tabs-similar-prefixes/home"
+            data-testid="home-tab"
+            id="tab-button-home"
+          >
+            <ion-icon :icon="homeOutline" />
+            <ion-label>Home</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button
+            tab="home2"
+            href="/tabs-similar-prefixes/home2"
+            data-testid="home2-tab"
+            id="tab-button-home2"
+          >
+            <ion-icon :icon="radioOutline" />
+            <ion-label>Home 2</ion-label>
+          </ion-tab-button>
+
+          <ion-tab-button
+            tab="home3"
+            href="/tabs-similar-prefixes/home3"
+            data-testid="home3-tab"
+            id="tab-button-home3"
+          >
+            <ion-icon :icon="libraryOutline" />
+            <ion-label>Home 3</ion-label>
+          </ion-tab-button>
+        </ion-tab-bar>
+      </ion-tabs>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import {
+  IonContent,
+  IonIcon,
+  IonLabel,
+  IonPage,
+  IonRouterOutlet,
+  IonTabBar,
+  IonTabButton,
+  IonTabs,
+} from '@ionic/vue';
+import { homeOutline, radioOutline, libraryOutline } from 'ionicons/icons';
+</script>
--- a/Show More
+++ b/Show More