From 078ed0b86a0d8e9f8457481cb739ea214195adce Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Mon, 23 Sep 2024 10:33:55 -0700
Subject: [PATCH 1/8] fix(segment): prevent flickering for scrollable on iOS
 (#29884)

Issue number: resolves #29523

---------

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

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

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

The scrollable segment flickers on iOS physical devices or simulators
when the active button is near the edge of the screen. The jump is due
to the button being scrolled to the center and snaps back to the edge
since the button was scrolled past the container.

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

- Switched to `scrollTo` provides for a smoother transition.
- Gave co author credit to the original reporter since they provided
part of the solution
- No new tests were created since functionality stays the same and
testing on Playwright would be impossible to recreate

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

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


## Other information

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

Dev build: 8.3.2-dev.11726779768.16e1f1d2

How to test:
1. Create a new app through any starter
2. Add a scrollable segment with at least 6 buttons (code snippet
example below)
3. Recommended to change the segment mode to `md` since it's easier to
see the flicker
4. Build the app and open it in an iOS or simulator (if more
instructions on how to do this is needed, reach out to me)
5. Click on the third button
6. Click on the first button
7. Notice the flicker
8. Click over to the third to last button
9. Click on either the last two buttons
10. Notice the flicker
11. Install the dev build
12. Verify the load does not flicker
13. Repeat steps 4 and 5
14. Verify the flicker is no longer there
15. Repeat steps 7 and 8
16. Verify the flicker is no longer there


```js
<ion-segment value="2" scrollable="true" mode="md">
  <ion-segment-button value="1">
    <ion-label>Button 1</ion-label>
  </ion-segment-button>
  <ion-segment-button value="2">
    <ion-label>Button 2</ion-label>
  </ion-segment-button>
  <ion-segment-button value="3">
    <ion-label>Button 3</ion-label>
  </ion-segment-button>
  <ion-segment-button value="4">
    <ion-label>Button 4</ion-label>
  </ion-segment-button>
  <ion-segment-button value="5">
    <ion-label>Button 5</ion-label>
  </ion-segment-button>
  <ion-segment-button value="6">
    <ion-label>Button 6</ion-label>
  </ion-segment-button>
</ion-segment>
```

---------

Co-authored-by: rostislavcz <58735164+rostislavcz@users.noreply.github.com>
---
 core/src/components/segment/segment.tsx | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/core/src/components/segment/segment.tsx b/core/src/components/segment/segment.tsx
index 4c425e18b2..3ddf864589 100644
--- a/core/src/components/segment/segment.tsx
+++ b/core/src/components/segment/segment.tsx
@@ -342,21 +342,35 @@ export class Segment implements ComponentInterface {
         const centeredX = activeButtonLeft - scrollContainerBox.width / 2 + activeButtonBox.width / 2;
 
         /**
-         * We intentionally use scrollBy here instead of scrollIntoView
+         * newScrollPosition is the absolute scroll position that the
+         * container needs to move to in order to center the active button.
+         * It is calculated by adding the current scroll position
+         * (scrollLeft) to the offset needed to center the button
+         * (centeredX).
+         */
+        const newScrollPosition = el.scrollLeft + centeredX;
+
+        /**
+         * We intentionally use scrollTo here instead of scrollIntoView
          * to avoid a WebKit bug where accelerated animations break
          * when using scrollIntoView. Using scrollIntoView will cause the
          * segment container to jump during the transition and then snap into place.
          * This is because scrollIntoView can potentially cause parent element
-         * containers to also scroll. scrollBy does not have this same behavior, so
+         * containers to also scroll. scrollTo does not have this same behavior, so
          * we use this API instead.
          *
+         * scrollTo is used instead of scrollBy because there is a
+         * Webkit bug that causes scrollBy to not work smoothly when
+         * the active button is near the edge of the scroll container.
+         * This leads to the buttons to jump around during the transition.
+         *
          * Note that if there is not enough scrolling space to center the element
          * within the scroll container, the browser will attempt
          * to center by as much as it can.
          */
-        el.scrollBy({
+        el.scrollTo({
           top: 0,
-          left: centeredX,
+          left: newScrollPosition,
           behavior: smoothScroll ? 'smooth' : 'instant',
         });
       }

From 668b2dac57f9b4ad4cda28f18c887cbf31aa95fb Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@users.noreply.github.com>
Date: Tue, 1 Oct 2024 14:27:03 -0400
Subject: [PATCH 2/8] docs(app): add setFocus to the documentation (#29916)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Issue number: resolves #29830

---------

## What is the current behavior?
The `setFocus` method on `ion-app` is marked internal.

## What is the new behavior?
Document the `setFocus` method as a way for developers to
programmatically focus elements.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

The method isn’t new, it was just marked as internal, which prevented it
from being documented. I can mark this as a `feat` though if anyone
thinks it should be.

Related documentation PR:
https://github.com/ionic-team/ionic-docs/pull/3842
---
 core/api.txt                                          | 1 +
 core/src/components.d.ts                              | 3 +++
 core/src/components/app/app.tsx                       | 1 -
 packages/angular/src/directives/proxies.ts            | 1 +
 packages/angular/standalone/src/directives/proxies.ts | 3 ++-
 5 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index 9c620e0c08..bd0490e45f 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -143,6 +143,7 @@ ion-alert,css-prop,--width,ios
 ion-alert,css-prop,--width,md
 
 ion-app,none
+ion-app,method,setFocus,setFocus(elements: HTMLElement[]) => Promise<void>
 
 ion-avatar,shadow
 ion-avatar,css-prop,--border-radius,ios
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 7c725cf2c8..db9530b340 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -304,6 +304,9 @@ export namespace Components {
         "trigger": string | undefined;
     }
     interface IonApp {
+        /**
+          * Used to set focus on an element that uses `ion-focusable`. Do not use this if focusing the element as a result of a keyboard event as the focus utility should handle this for us. This method should be used when we want to programmatically focus an element as a result of another user action. (Ex: We focus the first element inside of a popover when the user presents it, but the popover is not always presented as a result of keyboard action.)
+         */
         "setFocus": (elements: HTMLElement[]) => Promise<void>;
     }
     interface IonAvatar {
diff --git a/core/src/components/app/app.tsx b/core/src/components/app/app.tsx
index d38b0bd37a..fadfed3f04 100644
--- a/core/src/components/app/app.tsx
+++ b/core/src/components/app/app.tsx
@@ -61,7 +61,6 @@ export class App implements ComponentInterface {
   }
 
   /**
-   * @internal
    * Used to set focus on an element that uses `ion-focusable`.
    * Do not use this if focusing the element as a result of a keyboard
    * event as the focus utility should handle this for us. This method
diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts
index f448236a16..0f10c6bb5b 100644
--- a/packages/angular/src/directives/proxies.ts
+++ b/packages/angular/src/directives/proxies.ts
@@ -188,6 +188,7 @@ Shorthand for ionAlertDidDismiss.
 
 
 @ProxyCmp({
+  methods: ['setFocus']
 })
 @Component({
   selector: 'ion-app',
diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts
index c84717dfd1..bc90bec4d0 100644
--- a/packages/angular/standalone/src/directives/proxies.ts
+++ b/packages/angular/standalone/src/directives/proxies.ts
@@ -266,7 +266,8 @@ Shorthand for ionAlertDidDismiss.
 
 
 @ProxyCmp({
-  defineCustomElementFn: defineIonApp
+  defineCustomElementFn: defineIonApp,
+  methods: ['setFocus']
 })
 @Component({
   selector: 'ion-app',

From 4d0e9c4186dca2394fe64fe5a167a20f843f519f Mon Sep 17 00:00:00 2001
From: ionitron <hi@ionicframework.com>
Date: Wed, 2 Oct 2024 17:08:43 +0000
Subject: [PATCH 3/8] v8.3.2

---
 CHANGELOG.md                              | 11 +++++++++++
 core/CHANGELOG.md                         | 11 +++++++++++
 core/package-lock.json                    |  6 +++---
 core/package.json                         |  2 +-
 lerna.json                                |  2 +-
 packages/angular-server/CHANGELOG.md      |  8 ++++++++
 packages/angular-server/package-lock.json |  8 ++++----
 packages/angular-server/package.json      |  4 ++--
 packages/angular/CHANGELOG.md             |  8 ++++++++
 packages/angular/package-lock.json        |  8 ++++----
 packages/angular/package.json             |  4 ++--
 packages/docs/CHANGELOG.md                |  8 ++++++++
 packages/docs/package-lock.json           |  6 +++---
 packages/docs/package.json                |  2 +-
 packages/react-router/CHANGELOG.md        |  8 ++++++++
 packages/react-router/package-lock.json   |  8 ++++----
 packages/react-router/package.json        |  4 ++--
 packages/react/CHANGELOG.md               |  8 ++++++++
 packages/react/package-lock.json          |  8 ++++----
 packages/react/package.json               |  4 ++--
 packages/vue-router/CHANGELOG.md          |  8 ++++++++
 packages/vue-router/package-lock.json     |  8 ++++----
 packages/vue-router/package.json          |  4 ++--
 packages/vue/CHANGELOG.md                 |  8 ++++++++
 packages/vue/package-lock.json            |  8 ++++----
 packages/vue/package.json                 |  4 ++--
 26 files changed, 123 insertions(+), 45 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 49895d7f11..b3ce6deada 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.3.2](https://github.com/ionic-team/ionic-framework/compare/v8.3.1...v8.3.2) (2024-10-02)
+
+
+### Bug Fixes
+
+* **segment:** prevent flickering for scrollable on iOS ([#29884](https://github.com/ionic-team/ionic-framework/issues/29884)) ([078ed0b](https://github.com/ionic-team/ionic-framework/commit/078ed0b86a0d8e9f8457481cb739ea214195adce)), closes [#29523](https://github.com/ionic-team/ionic-framework/issues/29523)
+
+
+
+
+
 ## [8.3.1](https://github.com/ionic-team/ionic-framework/compare/v8.3.0...v8.3.1) (2024-09-17)
 
 
diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md
index 72ef2d42d3..47330049be 100644
--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.3.2](https://github.com/ionic-team/ionic-framework/compare/v8.3.1...v8.3.2) (2024-10-02)
+
+
+### Bug Fixes
+
+* **segment:** prevent flickering for scrollable on iOS ([#29884](https://github.com/ionic-team/ionic-framework/issues/29884)) ([078ed0b](https://github.com/ionic-team/ionic-framework/commit/078ed0b86a0d8e9f8457481cb739ea214195adce)), closes [#29523](https://github.com/ionic-team/ionic-framework/issues/29523)
+
+
+
+
+
 ## [8.3.1](https://github.com/ionic-team/ionic-framework/compare/v8.3.0...v8.3.1) (2024-09-17)
 
 
diff --git a/core/package-lock.json b/core/package-lock.json
index b692a82579..05c270ebda 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "8.3.1",
+  "version": "8.3.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "8.3.1",
+      "version": "8.3.2",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.20.0",
@@ -17767,4 +17767,4 @@
       "dev": true
     }
   }
-}
+}
\ No newline at end of file
diff --git a/core/package.json b/core/package.json
index 5836d28941..090026aa11 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.3.1",
+  "version": "8.3.2",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
diff --git a/lerna.json b/lerna.json
index ba40926c95..3db18479ad 100644
--- a/lerna.json
+++ b/lerna.json
@@ -3,5 +3,5 @@
     "core",
     "packages/*"
   ],
-  "version": "8.3.1"
+  "version": "8.3.2"
 }
\ No newline at end of file
diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md
index bc377c703c..7f088aece1 100644
--- a/packages/angular-server/CHANGELOG.md
+++ b/packages/angular-server/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.3.2](https://github.com/ionic-team/ionic-framework/compare/v8.3.1...v8.3.2) (2024-10-02)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
 ## [8.3.1](https://github.com/ionic-team/ionic-framework/compare/v8.3.0...v8.3.1) (2024-09-17)
 
 **Note:** Version bump only for package @ionic/angular-server
diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json
index 5021c63f68..c8d3c02402 100644
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular-server",
-  "version": "8.3.1",
+  "version": "8.3.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular-server",
-      "version": "8.3.1",
+      "version": "8.3.2",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.3.1"
+        "@ionic/core": "^8.3.2"
       },
       "devDependencies": {
         "@angular-eslint/eslint-plugin": "^16.0.0",
@@ -11110,4 +11110,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json
index 81048e1d7c..c959d277e8 100644
--- a/packages/angular-server/package.json
+++ b/packages/angular-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular-server",
-  "version": "8.3.1",
+  "version": "8.3.2",
   "description": "Angular SSR Module for Ionic",
   "keywords": [
     "ionic",
@@ -62,6 +62,6 @@
   },
   "prettier": "@ionic/prettier-config",
   "dependencies": {
-    "@ionic/core": "^8.3.1"
+    "@ionic/core": "^8.3.2"
   }
 }
diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md
index 60acb6f8ff..ce214960d6 100644
--- a/packages/angular/CHANGELOG.md
+++ b/packages/angular/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.3.2](https://github.com/ionic-team/ionic-framework/compare/v8.3.1...v8.3.2) (2024-10-02)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 ## [8.3.1](https://github.com/ionic-team/ionic-framework/compare/v8.3.0...v8.3.1) (2024-09-17)
 
 **Note:** Version bump only for package @ionic/angular
diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json
index 1119059fe1..d8a7b20b11 100644
--- a/packages/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "8.3.1",
+  "version": "8.3.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "8.3.1",
+      "version": "8.3.2",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.3.1",
+        "@ionic/core": "^8.3.2",
         "ionicons": "^7.0.0",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.3.0"
@@ -15020,4 +15020,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/angular/package.json b/packages/angular/package.json
index f4f0cca8b0..a4c8859862 100644
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "8.3.1",
+  "version": "8.3.2",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -47,7 +47,7 @@
     }
   },
   "dependencies": {
-    "@ionic/core": "^8.3.1",
+    "@ionic/core": "^8.3.2",
     "ionicons": "^7.0.0",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.3.0"
diff --git a/packages/docs/CHANGELOG.md b/packages/docs/CHANGELOG.md
index 5a4a4ef748..a3ec432ee9 100644
--- a/packages/docs/CHANGELOG.md
+++ b/packages/docs/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.3.2](https://github.com/ionic-team/ionic-framework/compare/v8.3.1...v8.3.2) (2024-10-02)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
 ## [8.3.1](https://github.com/ionic-team/ionic-framework/compare/v8.3.0...v8.3.1) (2024-09-17)
 
 **Note:** Version bump only for package @ionic/docs
diff --git a/packages/docs/package-lock.json b/packages/docs/package-lock.json
index 33cd632156..ee1b48e44c 100644
--- a/packages/docs/package-lock.json
+++ b/packages/docs/package-lock.json
@@ -1,13 +1,13 @@
 {
   "name": "@ionic/docs",
-  "version": "8.3.1",
+  "version": "8.3.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/docs",
-      "version": "8.3.1",
+      "version": "8.3.2",
       "license": "MIT"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 3078b88d31..9feab60801 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/docs",
-  "version": "8.3.1",
+  "version": "8.3.2",
   "description": "Pre-packaged API documentation for the Ionic docs.",
   "main": "core.json",
   "types": "core.d.ts",
diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md
index 2dbfce6426..542fcc3f81 100644
--- a/packages/react-router/CHANGELOG.md
+++ b/packages/react-router/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.3.2](https://github.com/ionic-team/ionic-framework/compare/v8.3.1...v8.3.2) (2024-10-02)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
 ## [8.3.1](https://github.com/ionic-team/ionic-framework/compare/v8.3.0...v8.3.1) (2024-09-17)
 
 **Note:** Version bump only for package @ionic/react-router
diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json
index 6557363294..bc65f8b25d 100644
--- a/packages/react-router/package-lock.json
+++ b/packages/react-router/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react-router",
-  "version": "8.3.1",
+  "version": "8.3.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react-router",
-      "version": "8.3.1",
+      "version": "8.3.2",
       "license": "MIT",
       "dependencies": {
-        "@ionic/react": "^8.3.1",
+        "@ionic/react": "^8.3.2",
         "tslib": "*"
       },
       "devDependencies": {
@@ -6666,4 +6666,4 @@
       "dev": true
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
index 436f770395..af72bd66f8 100644
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react-router",
-  "version": "8.3.1",
+  "version": "8.3.2",
   "description": "React Router wrapper for @ionic/react",
   "keywords": [
     "ionic",
@@ -36,7 +36,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@ionic/react": "^8.3.1",
+    "@ionic/react": "^8.3.2",
     "tslib": "*"
   },
   "peerDependencies": {
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 75cf831b7c..0aea2ceb7a 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.3.2](https://github.com/ionic-team/ionic-framework/compare/v8.3.1...v8.3.2) (2024-10-02)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
+
 ## [8.3.1](https://github.com/ionic-team/ionic-framework/compare/v8.3.0...v8.3.1) (2024-09-17)
 
 
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index 36b8551ffc..f87f8b7d79 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react",
-  "version": "8.3.1",
+  "version": "8.3.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react",
-      "version": "8.3.1",
+      "version": "8.3.2",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.3.1",
+        "@ionic/core": "^8.3.2",
         "ionicons": "^7.0.0",
         "tslib": "*"
       },
@@ -20498,4 +20498,4 @@
       "dev": true
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/react/package.json b/packages/react/package.json
index 28be56e310..7a182d2b1f 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react",
-  "version": "8.3.1",
+  "version": "8.3.2",
   "description": "React specific wrapper for @ionic/core",
   "keywords": [
     "ionic",
@@ -39,7 +39,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "^8.3.1",
+    "@ionic/core": "^8.3.2",
     "ionicons": "^7.0.0",
     "tslib": "*"
   },
diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md
index 258c04cbb4..8b955cc018 100644
--- a/packages/vue-router/CHANGELOG.md
+++ b/packages/vue-router/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.3.2](https://github.com/ionic-team/ionic-framework/compare/v8.3.1...v8.3.2) (2024-10-02)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
 ## [8.3.1](https://github.com/ionic-team/ionic-framework/compare/v8.3.0...v8.3.1) (2024-09-17)
 
 **Note:** Version bump only for package @ionic/vue-router
diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json
index 9784d0cf70..429cfcd47b 100644
--- a/packages/vue-router/package-lock.json
+++ b/packages/vue-router/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue-router",
-  "version": "8.3.1",
+  "version": "8.3.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue-router",
-      "version": "8.3.1",
+      "version": "8.3.2",
       "license": "MIT",
       "dependencies": {
-        "@ionic/vue": "^8.3.1"
+        "@ionic/vue": "^8.3.2"
       },
       "devDependencies": {
         "@ionic/eslint-config": "^0.3.0",
@@ -12798,4 +12798,4 @@
       "dev": true
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json
index a015e83d7e..1f62bc7505 100644
--- a/packages/vue-router/package.json
+++ b/packages/vue-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue-router",
-  "version": "8.3.1",
+  "version": "8.3.2",
   "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.3.1"
+    "@ionic/vue": "^8.3.2"
   },
   "devDependencies": {
     "@ionic/eslint-config": "^0.3.0",
diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
index 255993a026..0371b7bb30 100644
--- a/packages/vue/CHANGELOG.md
+++ b/packages/vue/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.3.2](https://github.com/ionic-team/ionic-framework/compare/v8.3.1...v8.3.2) (2024-10-02)
+
+**Note:** Version bump only for package @ionic/vue
+
+
+
+
+
 ## [8.3.1](https://github.com/ionic-team/ionic-framework/compare/v8.3.0...v8.3.1) (2024-09-17)
 
 
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
index 7f87e9f282..e19e1a8808 100644
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue",
-  "version": "8.3.1",
+  "version": "8.3.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue",
-      "version": "8.3.1",
+      "version": "8.3.2",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.3.1",
+        "@ionic/core": "^8.3.2",
         "ionicons": "^7.0.0"
       },
       "devDependencies": {
@@ -6562,4 +6562,4 @@
       "dev": true
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue/package.json b/packages/vue/package.json
index e6b675a486..afc15dc834 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue",
-  "version": "8.3.1",
+  "version": "8.3.2",
   "description": "Vue specific wrapper for @ionic/core",
   "scripts": {
     "eslint": "eslint src",
@@ -66,7 +66,7 @@
     "vue-router": "^4.0.16"
   },
   "dependencies": {
-    "@ionic/core": "^8.3.1",
+    "@ionic/core": "^8.3.2",
     "ionicons": "^7.0.0"
   },
   "vetur": {

From 78fb1b9a06ed0159f5e124003dfe9ee5bceeee62 Mon Sep 17 00:00:00 2001
From: ionitron <hi@ionicframework.com>
Date: Wed, 2 Oct 2024 17:09:21 +0000
Subject: [PATCH 4/8] chore(): update package lock files

---
 core/package-lock.json                    |  2 +-
 packages/angular-server/package-lock.json | 14 +++++------
 packages/angular/package-lock.json        | 14 +++++------
 packages/docs/package-lock.json           |  2 +-
 packages/react-router/package-lock.json   | 30 +++++++++++------------
 packages/react/package-lock.json          | 14 +++++------
 packages/vue-router/package-lock.json     | 30 +++++++++++------------
 packages/vue/package-lock.json            | 14 +++++------
 8 files changed, 60 insertions(+), 60 deletions(-)

diff --git a/core/package-lock.json b/core/package-lock.json
index 05c270ebda..d3a40c7cb7 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -17767,4 +17767,4 @@
       "dev": true
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json
index c8d3c02402..04293644c8 100644
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
@@ -1031,9 +1031,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.1.tgz",
-      "integrity": "sha512-md4JFwKYLgN/YP+uzoTE5H7ah0W5SQQNZ1cJOQtxhv0ytCCHHaXJrfRVzefdy8iy8NdzL9s6EV5ZTKYH98E+ZQ==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.2.tgz",
+      "integrity": "sha512-ptiDXnn4131eKpY862lv7c9xxjly7vi4O+WWCES78E+hXHvTEAundcA5F8eQyb0MFIFvCnOxreTZjRJJnHqPYw==",
       "dependencies": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -7188,9 +7188,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.1.tgz",
-      "integrity": "sha512-md4JFwKYLgN/YP+uzoTE5H7ah0W5SQQNZ1cJOQtxhv0ytCCHHaXJrfRVzefdy8iy8NdzL9s6EV5ZTKYH98E+ZQ==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.2.tgz",
+      "integrity": "sha512-ptiDXnn4131eKpY862lv7c9xxjly7vi4O+WWCES78E+hXHvTEAundcA5F8eQyb0MFIFvCnOxreTZjRJJnHqPYw==",
       "requires": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -11110,4 +11110,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json
index d8a7b20b11..b747e92c83 100644
--- a/packages/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -1398,9 +1398,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.1.tgz",
-      "integrity": "sha512-md4JFwKYLgN/YP+uzoTE5H7ah0W5SQQNZ1cJOQtxhv0ytCCHHaXJrfRVzefdy8iy8NdzL9s6EV5ZTKYH98E+ZQ==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.2.tgz",
+      "integrity": "sha512-ptiDXnn4131eKpY862lv7c9xxjly7vi4O+WWCES78E+hXHvTEAundcA5F8eQyb0MFIFvCnOxreTZjRJJnHqPYw==",
       "dependencies": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -9820,9 +9820,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.1.tgz",
-      "integrity": "sha512-md4JFwKYLgN/YP+uzoTE5H7ah0W5SQQNZ1cJOQtxhv0ytCCHHaXJrfRVzefdy8iy8NdzL9s6EV5ZTKYH98E+ZQ==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.2.tgz",
+      "integrity": "sha512-ptiDXnn4131eKpY862lv7c9xxjly7vi4O+WWCES78E+hXHvTEAundcA5F8eQyb0MFIFvCnOxreTZjRJJnHqPYw==",
       "requires": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -15020,4 +15020,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/docs/package-lock.json b/packages/docs/package-lock.json
index ee1b48e44c..70e5ff5504 100644
--- a/packages/docs/package-lock.json
+++ b/packages/docs/package-lock.json
@@ -10,4 +10,4 @@
       "license": "MIT"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json
index bc65f8b25d..42554c94ad 100644
--- a/packages/react-router/package-lock.json
+++ b/packages/react-router/package-lock.json
@@ -238,9 +238,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.1.tgz",
-      "integrity": "sha512-md4JFwKYLgN/YP+uzoTE5H7ah0W5SQQNZ1cJOQtxhv0ytCCHHaXJrfRVzefdy8iy8NdzL9s6EV5ZTKYH98E+ZQ==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.2.tgz",
+      "integrity": "sha512-ptiDXnn4131eKpY862lv7c9xxjly7vi4O+WWCES78E+hXHvTEAundcA5F8eQyb0MFIFvCnOxreTZjRJJnHqPYw==",
       "dependencies": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -414,11 +414,11 @@
       }
     },
     "node_modules/@ionic/react": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.3.1.tgz",
-      "integrity": "sha512-5P/EFtJsgXFi505TmhIVIASomLWxUFf1KilCiH9/AZlLvEXFIT5x9o6L061+j+An4j0uR1MbDh/DwnrTYiO0NA==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.3.2.tgz",
+      "integrity": "sha512-LOM+CrVgcR5aDH4LzgahGTz9gE5fn8JnRw6nXLkXWeu+qfic/qbLiRnaqLW9GAmMX0vSHeZc72AJTeG9VB5xYQ==",
       "dependencies": {
-        "@ionic/core": "8.3.1",
+        "@ionic/core": "8.3.2",
         "ionicons": "^7.0.0",
         "tslib": "*"
       },
@@ -4057,9 +4057,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.1.tgz",
-      "integrity": "sha512-md4JFwKYLgN/YP+uzoTE5H7ah0W5SQQNZ1cJOQtxhv0ytCCHHaXJrfRVzefdy8iy8NdzL9s6EV5ZTKYH98E+ZQ==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.2.tgz",
+      "integrity": "sha512-ptiDXnn4131eKpY862lv7c9xxjly7vi4O+WWCES78E+hXHvTEAundcA5F8eQyb0MFIFvCnOxreTZjRJJnHqPYw==",
       "requires": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -4163,11 +4163,11 @@
       "requires": {}
     },
     "@ionic/react": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.3.1.tgz",
-      "integrity": "sha512-5P/EFtJsgXFi505TmhIVIASomLWxUFf1KilCiH9/AZlLvEXFIT5x9o6L061+j+An4j0uR1MbDh/DwnrTYiO0NA==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.3.2.tgz",
+      "integrity": "sha512-LOM+CrVgcR5aDH4LzgahGTz9gE5fn8JnRw6nXLkXWeu+qfic/qbLiRnaqLW9GAmMX0vSHeZc72AJTeG9VB5xYQ==",
       "requires": {
-        "@ionic/core": "8.3.1",
+        "@ionic/core": "8.3.2",
         "ionicons": "^7.0.0",
         "tslib": "*"
       }
@@ -6666,4 +6666,4 @@
       "dev": true
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index f87f8b7d79..5d5dd8a998 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -736,9 +736,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.1.tgz",
-      "integrity": "sha512-md4JFwKYLgN/YP+uzoTE5H7ah0W5SQQNZ1cJOQtxhv0ytCCHHaXJrfRVzefdy8iy8NdzL9s6EV5ZTKYH98E+ZQ==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.2.tgz",
+      "integrity": "sha512-ptiDXnn4131eKpY862lv7c9xxjly7vi4O+WWCES78E+hXHvTEAundcA5F8eQyb0MFIFvCnOxreTZjRJJnHqPYw==",
       "dependencies": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -12315,9 +12315,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.1.tgz",
-      "integrity": "sha512-md4JFwKYLgN/YP+uzoTE5H7ah0W5SQQNZ1cJOQtxhv0ytCCHHaXJrfRVzefdy8iy8NdzL9s6EV5ZTKYH98E+ZQ==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.2.tgz",
+      "integrity": "sha512-ptiDXnn4131eKpY862lv7c9xxjly7vi4O+WWCES78E+hXHvTEAundcA5F8eQyb0MFIFvCnOxreTZjRJJnHqPYw==",
       "requires": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -20498,4 +20498,4 @@
       "dev": true
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json
index 429cfcd47b..0f515af932 100644
--- a/packages/vue-router/package-lock.json
+++ b/packages/vue-router/package-lock.json
@@ -661,9 +661,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.1.tgz",
-      "integrity": "sha512-md4JFwKYLgN/YP+uzoTE5H7ah0W5SQQNZ1cJOQtxhv0ytCCHHaXJrfRVzefdy8iy8NdzL9s6EV5ZTKYH98E+ZQ==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.2.tgz",
+      "integrity": "sha512-ptiDXnn4131eKpY862lv7c9xxjly7vi4O+WWCES78E+hXHvTEAundcA5F8eQyb0MFIFvCnOxreTZjRJJnHqPYw==",
       "dependencies": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -852,11 +852,11 @@
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.3.1.tgz",
-      "integrity": "sha512-UWOVuibeHY4xjWl2Sh93FYiXLBZgAVXoh8ObskV93plm36iS611gpHqw47lBeR29uHwZAohfQVT0WLN6GWQ3JQ==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.3.2.tgz",
+      "integrity": "sha512-r9BsWqOlv34d8dPyWgXvh4ZXyKtZBO2dM4aEvJCLcFBC76gtBFARExKKMc3Ji/nLgl8eGoodhfjhwwAaiMSmYg==",
       "dependencies": {
-        "@ionic/core": "8.3.1",
+        "@ionic/core": "8.3.2",
         "ionicons": "^7.0.0"
       }
     },
@@ -7878,9 +7878,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.1.tgz",
-      "integrity": "sha512-md4JFwKYLgN/YP+uzoTE5H7ah0W5SQQNZ1cJOQtxhv0ytCCHHaXJrfRVzefdy8iy8NdzL9s6EV5ZTKYH98E+ZQ==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.2.tgz",
+      "integrity": "sha512-ptiDXnn4131eKpY862lv7c9xxjly7vi4O+WWCES78E+hXHvTEAundcA5F8eQyb0MFIFvCnOxreTZjRJJnHqPYw==",
       "requires": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -7993,11 +7993,11 @@
       "requires": {}
     },
     "@ionic/vue": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.3.1.tgz",
-      "integrity": "sha512-UWOVuibeHY4xjWl2Sh93FYiXLBZgAVXoh8ObskV93plm36iS611gpHqw47lBeR29uHwZAohfQVT0WLN6GWQ3JQ==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.3.2.tgz",
+      "integrity": "sha512-r9BsWqOlv34d8dPyWgXvh4ZXyKtZBO2dM4aEvJCLcFBC76gtBFARExKKMc3Ji/nLgl8eGoodhfjhwwAaiMSmYg==",
       "requires": {
-        "@ionic/core": "8.3.1",
+        "@ionic/core": "8.3.2",
         "ionicons": "^7.0.0"
       }
     },
@@ -12798,4 +12798,4 @@
       "dev": true
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
index e19e1a8808..f9a95739db 100644
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -208,9 +208,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.1.tgz",
-      "integrity": "sha512-md4JFwKYLgN/YP+uzoTE5H7ah0W5SQQNZ1cJOQtxhv0ytCCHHaXJrfRVzefdy8iy8NdzL9s6EV5ZTKYH98E+ZQ==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.2.tgz",
+      "integrity": "sha512-ptiDXnn4131eKpY862lv7c9xxjly7vi4O+WWCES78E+hXHvTEAundcA5F8eQyb0MFIFvCnOxreTZjRJJnHqPYw==",
       "dependencies": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -3970,9 +3970,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.3.1",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.1.tgz",
-      "integrity": "sha512-md4JFwKYLgN/YP+uzoTE5H7ah0W5SQQNZ1cJOQtxhv0ytCCHHaXJrfRVzefdy8iy8NdzL9s6EV5ZTKYH98E+ZQ==",
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.2.tgz",
+      "integrity": "sha512-ptiDXnn4131eKpY862lv7c9xxjly7vi4O+WWCES78E+hXHvTEAundcA5F8eQyb0MFIFvCnOxreTZjRJJnHqPYw==",
       "requires": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -6562,4 +6562,4 @@
       "dev": true
     }
   }
-}
\ No newline at end of file
+}

From cdb4456be210b6d51beb8058b0feb21b283a8241 Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Mon, 14 Oct 2024 08:47:54 -0700
Subject: [PATCH 5/8] test(styles): update button styles for test pages
 (#29931)

Issue number: internal

---------

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

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

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

Test styles causes native buttons to have [certain
styling](https://github.com/ionic-team/ionic-framework/blob/main/core/scripts/testing/styles.css#L52-L64).
This was done to spruce up the buttons used for testing purposes only.
However, this ended up adding styles to native buttons within Ionic
components.

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

- Test styles for native buttons are only applied to buttons that are
not part of a Ionic component

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

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


## Other information

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

How to test:

1. Run the project locally from the `main` branch
2.
[Comment](https://github.com/ionic-team/ionic-framework/blob/5d208e9daacad63294489e0b1bd6ec2b2645babd/core/src/components/searchbar/searchbar.md.scss#L91)
out `border: 0` from `.searchbar-clear-button` from the searchbar `md`
theme file (`ios` also works)
3. Navigate to the basic test page:
`/src/components/searchbar/test/basic`
4. Notice a teal border around the clear buttons
5. Checkout to this PR's branch
6. Make sure steps 2-3 are done
7. Verify that the teal border is not being applied to the clear buttons
8. Verify that only native buttons outside of the Ionic components have
a teal appearance: `/src/components/loading/test/standalone` and
`/src/components/action-sheet/test/is-open`
---
 core/scripts/testing/styles.css               | 30 ++++++++++++++++---
 .../components/popover/test/size/index.html   | 14 +++++----
 2 files changed, 35 insertions(+), 9 deletions(-)

diff --git a/core/scripts/testing/styles.css b/core/scripts/testing/styles.css
index 8d4865777e..d08fee4437 100644
--- a/core/scripts/testing/styles.css
+++ b/core/scripts/testing/styles.css
@@ -49,8 +49,19 @@ html.ios.ios {
   font-family: -apple-system, BlinkMacSystemFont, "iosTestingFont", sans-serif;
 }
 
-ion-content button,
-main button {
+/**
+ * Button styles should only be applied
+ * to native buttons that are not part of the
+ * Ionic framework.
+ * Otherwise, the styles may not appear correctly
+ * when comparing between testing and production.
+ * This issue occurs only with `scoped` components,
+ * which is why `sc-ion-` is used as a filter,
+ * since this class is specifically added to `scoped`
+ * components.
+ */
+ion-content button:not([class*="sc-ion-"]),
+main button:not([class*="sc-ion-"]) {
   display: inline-block;
   width: auto;
   clear: both;
@@ -63,8 +74,19 @@ main button {
   margin: 8px 0;
 }
 
-ion-content button.expand,
-main button.expand {
+/**
+ * Button styles should only be applied
+ * to native buttons that are not part of the
+ * Ionic framework.
+ * Otherwise, the styles may not appear correctly
+ * when comparing between testing and production.
+ * This issue occurs only with `scoped` components,
+ * which is why `sc-ion-` is used as a filter,
+ * since this class is specifically added to `scoped`
+ * components.
+ */
+ion-content button.expand:not([class*="sc-ion-"]),
+main button.expand:not([class*="sc-ion-"]) {
   display: block;
   width: 100%;
 }
diff --git a/core/src/components/popover/test/size/index.html b/core/src/components/popover/test/size/index.html
index 9d473b130c..1ce48a75cb 100644
--- a/core/src/components/popover/test/size/index.html
+++ b/core/src/components/popover/test/size/index.html
@@ -16,7 +16,7 @@
       ion-app > ion-content {
         --background: #dddddd;
       }
-      ion-content button {
+      ion-content button.trigger {
         padding: 12px 16px;
       }
       .grid {
@@ -57,26 +57,30 @@
         <div class="grid">
           <div class="grid-item">
             <h2>Cover</h2>
-            <button id="cover-trigger">Trigger</button>
+            <button id="cover-trigger" class="trigger">Trigger</button>
             <ion-popover show-backdrop="false" class="cover-popover" trigger="cover-trigger" size="cover">
               <ion-content class="ion-padding"> My really really really really long content </ion-content>
             </ion-popover>
           </div>
           <div class="grid-item">
             <h2>With Event</h2>
-            <button id="event-trigger" onclick="openPopover('event-popover', event, 'false')">Trigger</button>
+            <button id="event-trigger" class="trigger" onclick="openPopover('event-popover', event, 'false')">
+              Trigger
+            </button>
           </div>
 
           <div class="grid-item">
             <h2>Auto</h2>
-            <button id="auto-trigger">Trigger</button>
+            <button id="auto-trigger" class="trigger">Trigger</button>
             <ion-popover show-backdrop="false" class="auto-popover" trigger="auto-trigger">
               <ion-content class="ion-padding"> My really really really really long content </ion-content>
             </ion-popover>
           </div>
           <div class="grid-item">
             <h2>No Event</h2>
-            <button id="no-event-trigger" onclick="openPopover('no-event-popover', null, 'true')">Trigger</button>
+            <button id="no-event-trigger" class="trigger" onclick="openPopover('no-event-popover', null, 'true')">
+              Trigger
+            </button>
           </div>
         </div>
       </ion-content>

From b7b383bee080b72de2e6307ff9a9a051314c69ed Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Wed, 16 Oct 2024 11:08:54 -0700
Subject: [PATCH 6/8] fix(tabs, tab-bar): use standalone tab bar in Vue, React
 (#29940)

Issue number: resolves #29885, resolves #29924

---------

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

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

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

React and Vue:

Tab bar could be a standalone element within `IonTabs` and would
navigate without issues with a router outlet before v8.3:

```tsx
<IonTabs>
  <IonRouterOutlet></IonRouterOutlet>

  <IonTabBar></IonTabBar>
</IonTabs>
```

It would work as if it was written as:

```tsx
<IonTabs>
  <IonRouterOutlet></IonRouterOutlet>

  <IonTabBar slot="bottom">
    <!-- Buttons -->
  </IonTabBar>
</IonTabs>
```

After v8.3, any `ion-tab-bar` that was not a direct child of `ion-tabs`
would lose it's expected behavior when used with a router outlet. If a
user clicked on a tab button, then the content would not be redirected
to that expected view.

React only:

Users can no longer add a `ref` to the `IonRouterOutlet`, it always
returns undefined.

```
<IonTabs>
      <IonRouterOutlet ref={ref}>

     <IonTabBar slot="bottom">
    <!-- Buttons -->
  </IonTabBar>
</IonTabs>
```

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

The fixes were already reviewed through PR
https://github.com/ionic-team/ionic-framework/pull/29925 and PR
https://github.com/ionic-team/ionic-framework/pull/29927. I split them
to make it easier to review.

React and Vue:

The React tabs has been updated to pass data to the tab bar through
context instead of passing it through a ref. By using a context, the
data will be available for the tab bar to use regardless of its level.

React only:

Reverted the logic for `routerOutletRef` and added a comment of the
importance of it.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

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


## Other information

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

N/A
---
 .../src/components/navigation/IonTabBar.tsx   |  29 ++++-
 .../src/components/navigation/IonTabs.tsx     | 121 +++++++-----------
 .../components/navigation/IonTabsContext.tsx  |  16 +++
 packages/vue/src/components/IonTabBar.ts      |  53 +++++---
 packages/vue/src/components/IonTabs.ts        |  91 +++++++------
 5 files changed, 175 insertions(+), 135 deletions(-)

diff --git a/packages/react/src/components/navigation/IonTabBar.tsx b/packages/react/src/components/navigation/IonTabBar.tsx
index f1a66440fc..92fde774dd 100644
--- a/packages/react/src/components/navigation/IonTabBar.tsx
+++ b/packages/react/src/components/navigation/IonTabBar.tsx
@@ -8,6 +8,8 @@ import { IonTabBarInner } from '../inner-proxies';
 import { createForwardRef } from '../utils';
 
 import { IonTabButton } from './IonTabButton';
+import { IonTabsContext } from './IonTabsContext';
+import type { IonTabsContextState } from './IonTabsContext';
 
 type IonTabBarProps = LocalJSX.IonTabBar &
   IonicReactProps & {
@@ -21,7 +23,7 @@ interface InternalProps extends IonTabBarProps {
   forwardedRef?: React.ForwardedRef<HTMLIonIconElement>;
   onSetCurrentTab: (tab: string, routeInfo: RouteInfo) => void;
   routeInfo: RouteInfo;
-  routerOutletRef?: React.RefObject<HTMLIonRouterOutletElement> | undefined;
+  tabsContext?: IonTabsContextState;
 }
 
 interface TabUrls {
@@ -183,12 +185,14 @@ class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarSta
   ) {
     const tappedTab = this.state.tabs[e.detail.tab];
     const originalHref = tappedTab.originalHref;
+    const hasRouterOutlet = this.props.tabsContext?.hasRouterOutlet;
+
     /**
      * If the router outlet is not defined, then the tabs is being used
      * as a basic tab navigation without the router. In this case, we
      * don't want to update the href else the URL will change.
      */
-    const currentHref = this.props.routerOutletRef?.current ? e.detail.href : '';
+    const currentHref = hasRouterOutlet ? e.detail.href : '';
     const { activeTab: prevActiveTab } = this.state;
 
     if (onClickFn) {
@@ -212,7 +216,7 @@ class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarSta
       if (this.props.onIonTabsDidChange) {
         this.props.onIonTabsDidChange(new CustomEvent('ionTabDidChange', { detail: { tab: e.detail.tab } }));
       }
-      if (this.props.routerOutletRef?.current) {
+      if (hasRouterOutlet) {
         this.setActiveTabOnContext(e.detail.tab);
         this.context.changeTab(e.detail.tab, currentHref, e.detail.routeOptions);
       }
@@ -262,12 +266,29 @@ class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarSta
 
 const IonTabBarContainer: React.FC<InternalProps> = React.memo<InternalProps>(({ forwardedRef, ...props }) => {
   const context = useContext(NavContext);
+  const tabsContext = useContext(IonTabsContext);
+  const tabBarRef = forwardedRef || tabsContext.tabBarProps.ref;
+  const updatedTabBarProps = {
+    ...tabsContext.tabBarProps,
+    ref: tabBarRef,
+  };
+
   return (
     <IonTabBarUnwrapped
-      ref={forwardedRef}
+      ref={tabBarRef}
       {...(props as any)}
       routeInfo={props.routeInfo || context.routeInfo || { pathname: window.location.pathname }}
       onSetCurrentTab={context.setCurrentTab}
+      /**
+       * Tab bar can be used as a standalone component,
+       * so it cannot be modified directly through
+       * IonTabs. Instead, props will be passed through
+       * the context.
+       */
+      tabsContext={{
+        ...tabsContext,
+        tabBarProps: updatedTabBarProps,
+      }}
     >
       {props.children}
     </IonTabBarUnwrapped>
diff --git a/packages/react/src/components/navigation/IonTabs.tsx b/packages/react/src/components/navigation/IonTabs.tsx
index e80e09ac15..a7a8a250bf 100644
--- a/packages/react/src/components/navigation/IonTabs.tsx
+++ b/packages/react/src/components/navigation/IonTabs.tsx
@@ -8,7 +8,6 @@ import { IonRouterOutlet } from '../IonRouterOutlet';
 import { IonTabsInner } from '../inner-proxies';
 import { IonTab } from '../proxies';
 
-import { IonTabBar } from './IonTabBar';
 import type { IonTabsContextState } from './IonTabsContext';
 import { IonTabsContext } from './IonTabsContext';
 
@@ -43,28 +42,15 @@ interface Props extends LocalJSX.IonTabs {
   children: ChildFunction | React.ReactNode;
 }
 
-const hostStyles: React.CSSProperties = {
-  display: 'flex',
-  position: 'absolute',
-  top: '0',
-  left: '0',
-  right: '0',
-  bottom: '0',
-  flexDirection: 'column',
-  width: '100%',
-  height: '100%',
-  contain: 'layout size style',
-};
-
-const tabsInner: React.CSSProperties = {
-  position: 'relative',
-  flex: 1,
-  contain: 'layout size style',
-};
-
 export const IonTabs = /*@__PURE__*/ (() =>
   class extends React.Component<Props> {
     context!: React.ContextType<typeof NavContext>;
+    /**
+     * `routerOutletRef` allows users to add a `ref` to `IonRouterOutlet`.
+     * Without this, `ref.current` will be `undefined` in the user's app,
+     * breaking their ability to access the `IonRouterOutlet` instance.
+     * Do not remove this ref.
+     */
     routerOutletRef: React.Ref<HTMLIonRouterOutletElement> = React.createRef();
     selectTabHandler?: (tag: string) => boolean;
     tabBarRef = React.createRef<any>();
@@ -72,6 +58,14 @@ export const IonTabs = /*@__PURE__*/ (() =>
     ionTabContextState: IonTabsContextState = {
       activeTab: undefined,
       selectTab: () => false,
+      hasRouterOutlet: false,
+      /**
+       * Tab bar can be used as a standalone component,
+       * so the props can not be passed directly to the
+       * tab bar component. Instead, props will be
+       * passed through the context.
+       */
+      tabBarProps: { ref: this.tabBarRef },
     };
 
     constructor(props: Props) {
@@ -90,9 +84,32 @@ export const IonTabs = /*@__PURE__*/ (() =>
       }
     }
 
+    renderTabsInner(children: React.ReactNode, outlet: React.ReactElement<{}> | undefined) {
+      return (
+        <IonTabsInner {...this.props}>
+          {React.Children.map(children, (child: React.ReactNode) => {
+            if (React.isValidElement(child)) {
+              const isRouterOutlet =
+                child.type === IonRouterOutlet ||
+                (child.type as any).isRouterOutlet ||
+                (child.type === Fragment && child.props.children[0].type === IonRouterOutlet);
+
+              if (isRouterOutlet) {
+                /**
+                 * The modified outlet needs to be returned to include
+                 * the ref.
+                 */
+                return outlet;
+              }
+            }
+            return child;
+          })}
+        </IonTabsInner>
+      );
+    }
+
     render() {
       let outlet: React.ReactElement<{}> | undefined;
-      let tabBar: React.ReactElement | undefined;
       // Check if IonTabs has any IonTab children
       let hasTab = false;
       const { className, onIonTabsDidChange, onIonTabsWillChange, ...props } = this.props;
@@ -102,19 +119,15 @@ export const IonTabs = /*@__PURE__*/ (() =>
           ? (this.props.children as ChildFunction)(this.ionTabContextState)
           : this.props.children;
 
-      const outletProps = {
-        ref: this.routerOutletRef,
-      };
-
       React.Children.forEach(children, (child: any) => {
         // eslint-disable-next-line no-prototype-builtins
         if (child == null || typeof child !== 'object' || !child.hasOwnProperty('type')) {
           return;
         }
         if (child.type === IonRouterOutlet || child.type.isRouterOutlet) {
-          outlet = React.cloneElement(child, outletProps);
+          outlet = React.cloneElement(child);
         } else if (child.type === Fragment && child.props.children[0].type === IonRouterOutlet) {
-          outlet = React.cloneElement(child.props.children[0], outletProps);
+          outlet = React.cloneElement(child.props.children[0]);
         } else if (child.type === IonTab) {
           /**
            * This indicates that IonTabs will be using a basic tab-based navigation
@@ -123,9 +136,10 @@ export const IonTabs = /*@__PURE__*/ (() =>
           hasTab = true;
         }
 
+        this.ionTabContextState.hasRouterOutlet = !!outlet;
+
         let childProps: any = {
-          ref: this.tabBarRef,
-          routerOutletRef: this.routerOutletRef,
+          ...this.ionTabContextState.tabBarProps,
         };
 
         /**
@@ -149,14 +163,7 @@ export const IonTabs = /*@__PURE__*/ (() =>
           };
         }
 
-        if (child.type === IonTabBar || child.type.isTabBar) {
-          tabBar = React.cloneElement(child, childProps);
-        } else if (
-          child.type === Fragment &&
-          (child.props.children[1].type === IonTabBar || child.props.children[1].type.isTabBar)
-        ) {
-          tabBar = React.cloneElement(child.props.children[1], childProps);
-        }
+        this.ionTabContextState.tabBarProps = childProps;
       });
 
       if (!outlet && !hasTab) {
@@ -186,46 +193,10 @@ export const IonTabs = /*@__PURE__*/ (() =>
         <IonTabsContext.Provider value={this.ionTabContextState}>
           {this.context.hasIonicRouter() ? (
             <PageManager className={className ? `${className}` : ''} routeInfo={this.context.routeInfo} {...props}>
-              <IonTabsInner {...this.props}>
-                {React.Children.map(children, (child: React.ReactNode) => {
-                  if (React.isValidElement(child)) {
-                    const isTabBar =
-                      child.type === IonTabBar ||
-                      (child.type as any).isTabBar ||
-                      (child.type === Fragment &&
-                        (child.props.children[1].type === IonTabBar || child.props.children[1].type.isTabBar));
-                    const isRouterOutlet =
-                      child.type === IonRouterOutlet ||
-                      (child.type as any).isRouterOutlet ||
-                      (child.type === Fragment && child.props.children[0].type === IonRouterOutlet);
-
-                    if (isTabBar) {
-                      /**
-                       * The modified tabBar needs to be returned to include
-                       * the context and the overridden methods.
-                       */
-                      return tabBar;
-                    }
-                    if (isRouterOutlet) {
-                      /**
-                       * The modified outlet needs to be returned to include
-                       * the ref.
-                       */
-                      return outlet;
-                    }
-                  }
-                  return child;
-                })}
-              </IonTabsInner>
+              {this.renderTabsInner(children, outlet)}
             </PageManager>
           ) : (
-            <div className={className ? `${className}` : 'ion-tabs'} {...props} style={hostStyles}>
-              {tabBar?.props.slot === 'top' ? tabBar : null}
-              <div style={tabsInner} className="tabs-inner">
-                {outlet}
-              </div>
-              {tabBar?.props.slot === 'bottom' ? tabBar : null}
-            </div>
+            this.renderTabsInner(children, outlet)
           )}
         </IonTabsContext.Provider>
       );
diff --git a/packages/react/src/components/navigation/IonTabsContext.tsx b/packages/react/src/components/navigation/IonTabsContext.tsx
index e7f9ba2b10..12686bd2ad 100644
--- a/packages/react/src/components/navigation/IonTabsContext.tsx
+++ b/packages/react/src/components/navigation/IonTabsContext.tsx
@@ -3,9 +3,25 @@ import React from 'react';
 export interface IonTabsContextState {
   activeTab: string | undefined;
   selectTab: (tab: string) => boolean;
+  hasRouterOutlet: boolean;
+  tabBarProps: TabBarProps;
 }
 
+/**
+ * Tab bar can be used as a standalone component,
+ * so the props can not be passed directly to the
+ * tab bar component. Instead, props will be
+ * passed through the context.
+ */
+type TabBarProps = {
+  ref: React.RefObject<any>;
+  onIonTabsWillChange?: (e: CustomEvent) => void;
+  onIonTabsDidChange?: (e: CustomEvent) => void;
+};
+
 export const IonTabsContext = React.createContext<IonTabsContextState>({
   activeTab: undefined,
   selectTab: () => false,
+  hasRouterOutlet: false,
+  tabBarProps: { ref: React.createRef() },
 });
diff --git a/packages/vue/src/components/IonTabBar.ts b/packages/vue/src/components/IonTabBar.ts
index 24e8134540..714891c188 100644
--- a/packages/vue/src/components/IonTabBar.ts
+++ b/packages/vue/src/components/IonTabBar.ts
@@ -1,5 +1,5 @@
 import { defineCustomElement } from "@ionic/core/components/ion-tab-bar.js";
-import type { VNode } from "vue";
+import type { VNode, Ref } from "vue";
 import { h, defineComponent, getCurrentInstance, inject } from "vue";
 
 // TODO(FW-2969): types
@@ -16,6 +16,12 @@ interface Tab {
   ref: VNode;
 }
 
+interface TabBarData {
+  hasRouterOutlet: boolean;
+  _tabsWillChange: Function;
+  _tabsDidChange: Function;
+}
+
 const isTabButton = (child: any) => child.type?.name === "IonTabButton";
 
 const getTabs = (nodes: VNode[]) => {
@@ -34,20 +40,23 @@ const getTabs = (nodes: VNode[]) => {
 
 export const IonTabBar = defineComponent({
   name: "IonTabBar",
-  props: {
-    /* eslint-disable @typescript-eslint/no-empty-function */
-    _tabsWillChange: { type: Function, default: () => {} },
-    _tabsDidChange: { type: Function, default: () => {} },
-    _hasRouterOutlet: { type: Boolean, default: false },
-    /* eslint-enable @typescript-eslint/no-empty-function */
-  },
   data() {
     return {
       tabState: {
         activeTab: undefined,
         tabs: {},
+        /**
+         * Passing this prop to each tab button
+         * lets it be aware of the presence of
+         * the router outlet.
+         */
+        hasRouterOutlet: false,
       },
       tabVnodes: [],
+      /* eslint-disable @typescript-eslint/no-empty-function */
+      _tabsWillChange: { type: Function, default: () => {} },
+      _tabsDidChange: { type: Function, default: () => {} },
+      /* eslint-enable @typescript-eslint/no-empty-function */
     };
   },
   updated() {
@@ -55,7 +64,7 @@ export const IonTabBar = defineComponent({
   },
   methods: {
     setupTabState(ionRouter: any) {
-      const hasRouterOutlet = this.$props._hasRouterOutlet;
+      const hasRouterOutlet = this.$data.tabState.hasRouterOutlet;
       /**
        * For each tab, we need to keep track of its
        * base href as well as any child page that
@@ -75,13 +84,6 @@ export const IonTabBar = defineComponent({
           ref: child,
         };
 
-        /**
-         * Passing this prop to each tab button
-         * lets it be aware of the presence of
-         * the router outlet.
-         */
-        tabState.hasRouterOutlet = hasRouterOutlet;
-
         /**
          * Passing this prop to each tab button
          * lets it be aware of the state that
@@ -126,7 +128,7 @@ export const IonTabBar = defineComponent({
      * @param ionRouter
      */
     checkActiveTab(ionRouter: any) {
-      const hasRouterOutlet = this.$props._hasRouterOutlet;
+      const hasRouterOutlet = this.$data.tabState.hasRouterOutlet;
       const currentRoute = ionRouter?.getCurrentRouteInfo();
       const childNodes = this.$data.tabVnodes;
       const { tabs, activeTab: prevActiveTab } = this.$data.tabState;
@@ -216,7 +218,7 @@ export const IonTabBar = defineComponent({
       this.tabSwitch(activeTab);
     },
     tabSwitch(activeTab: string, ionRouter?: any) {
-      const hasRouterOutlet = this.$props._hasRouterOutlet;
+      const hasRouterOutlet = this.$data.tabState.hasRouterOutlet;
       const childNodes = this.$data.tabVnodes;
       const { activeTab: prevActiveTab } = this.$data.tabState;
       const tabState = this.$data.tabState;
@@ -227,7 +229,7 @@ export const IonTabBar = defineComponent({
       const tabDidChange = activeTab !== prevActiveTab;
       if (tabBar) {
         if (activeChild) {
-          tabDidChange && this.$props._tabsWillChange(activeTab);
+          tabDidChange && this.$data._tabsWillChange(activeTab);
 
           if (hasRouterOutlet && ionRouter !== null) {
             ionRouter.handleSetCurrentTab(activeTab);
@@ -235,7 +237,7 @@ export const IonTabBar = defineComponent({
 
           tabBar.selectedTab = tabState.activeTab = activeTab;
 
-          tabDidChange && this.$props._tabsDidChange(activeTab);
+          tabDidChange && this.$data._tabsDidChange(activeTab);
         } else {
           /**
            * When going to a tab that does
@@ -250,6 +252,17 @@ export const IonTabBar = defineComponent({
   },
   mounted() {
     const ionRouter: any = inject("navManager", null);
+    /**
+     * Tab bar can be used as a standalone component,
+     * so it cannot be modified directly through
+     * IonTabs. Instead, data will be passed through
+     * the provide/inject.
+     */
+    const tabBarData = inject<Ref<TabBarData>>("tabBarData");
+
+    this.$data.tabState.hasRouterOutlet = tabBarData.value.hasRouterOutlet;
+    this.$data._tabsWillChange = tabBarData.value._tabsWillChange;
+    this.$data._tabsDidChange = tabBarData.value._tabsDidChange;
 
     this.setupTabState(ionRouter);
 
diff --git a/packages/vue/src/components/IonTabs.ts b/packages/vue/src/components/IonTabs.ts
index 4fde919bc8..5adde3a331 100644
--- a/packages/vue/src/components/IonTabs.ts
+++ b/packages/vue/src/components/IonTabs.ts
@@ -1,6 +1,13 @@
 import { defineCustomElement } from "@ionic/core/components/ion-tabs.js";
 import type { VNode } from "vue";
-import { h, defineComponent, Fragment, isVNode } from "vue";
+import {
+  h,
+  defineComponent,
+  Fragment,
+  isVNode,
+  provide,
+  shallowRef,
+} from "vue";
 
 import { IonTab } from "../proxies";
 
@@ -9,6 +16,12 @@ const DID_CHANGE = "ionTabsDidChange";
 
 // TODO(FW-2969): types
 
+interface TabBarData {
+  hasRouterOutlet: boolean;
+  _tabsWillChange: Function;
+  _tabsDidChange: Function;
+}
+
 /**
  * Vue 3.2.38 fixed an issue where Web Component
  * names are respected using kebab case instead of pascal case.
@@ -24,13 +37,6 @@ const isRouterOutlet = (node: VNode) => {
   );
 };
 
-const isTabBar = (node: VNode) => {
-  return (
-    node.type &&
-    ((node.type as any).name === "IonTabBar" || node.type === "ion-tab-bar")
-  );
-};
-
 const isTab = (node: VNode): boolean => {
   // The `ion-tab` component was created with the `v-for` directive.
   if (node.type === Fragment) {
@@ -49,7 +55,43 @@ const isTab = (node: VNode): boolean => {
 export const IonTabs = /*@__PURE__*/ defineComponent({
   name: "IonTabs",
   emits: [WILL_CHANGE, DID_CHANGE],
+  data() {
+    return {
+      hasRouterOutlet: false,
+    };
+  },
   setup(props, { slots, emit }) {
+    const slottedContent: VNode[] | undefined =
+      slots.default && slots.default();
+    let routerOutlet: VNode | undefined = undefined;
+
+    if (slottedContent && slottedContent.length > 0) {
+      /**
+       * Developers must pass an ion-router-outlet
+       * inside of ion-tabs if they want to use
+       * the history stack or URL updates associated
+       * with the router.
+       */
+      routerOutlet = slottedContent.find((child: VNode) =>
+        isRouterOutlet(child)
+      );
+    }
+
+    /**
+     * Tab bar can be used as a standalone component,
+     * so it cannot be modified directly through
+     * IonTabs. Instead, data will be passed through
+     * the provide/inject.
+     */
+    provide(
+      "tabBarData",
+      shallowRef<TabBarData>({
+        hasRouterOutlet: !!routerOutlet,
+        _tabsWillChange: (tab: string) => emit(WILL_CHANGE, { tab }),
+        _tabsDidChange: (tab: string) => emit(DID_CHANGE, { tab }),
+      })
+    );
+
     return {
       props,
       slots,
@@ -68,9 +110,10 @@ export const IonTabs = /*@__PURE__*/ defineComponent({
     defineCustomElement();
   },
   render() {
-    const { slots, emit, props } = this;
-    const slottedContent = slots.default && slots.default();
-    let routerOutlet;
+    const { slots, props } = this;
+    const slottedContent: VNode[] | undefined =
+      slots.default && slots.default();
+    let routerOutlet: VNode | undefined = undefined;
     let hasTab = false;
 
     if (slottedContent && slottedContent.length > 0) {
@@ -78,7 +121,7 @@ export const IonTabs = /*@__PURE__*/ defineComponent({
        * Developers must pass an ion-router-outlet
        * inside of ion-tabs if they want to use
        * the history stack or URL updates associated
-       * wit the router.
+       * with the router.
        */
       routerOutlet = slottedContent.find((child: VNode) =>
         isRouterOutlet(child)
@@ -103,30 +146,6 @@ export const IonTabs = /*@__PURE__*/ defineComponent({
       );
     }
 
-    if (slottedContent && slottedContent.length > 0) {
-      const slottedTabBar = slottedContent.find((child: VNode) =>
-        isTabBar(child)
-      );
-
-      if (slottedTabBar) {
-        if (!slottedTabBar.props) {
-          slottedTabBar.props = {};
-        }
-        /**
-         * ionTabsWillChange and ionTabsDidChange are
-         * fired from `ion-tabs`, so we need to pass these down
-         * as props so they can fire when the active tab changes.
-         * TODO: We may want to move logic from the tab bar into here
-         * so we do not have code split across two components.
-         */
-        slottedTabBar.props._tabsWillChange = (tab: string) =>
-          emit(WILL_CHANGE, { tab });
-        slottedTabBar.props._tabsDidChange = (tab: string) =>
-          emit(DID_CHANGE, { tab });
-        slottedTabBar.props._hasRouterOutlet = !!routerOutlet;
-      }
-    }
-
     if (hasTab) {
       return h(
         "ion-tabs",

From bb1fb2877b3d89672836ae827dc59beec7fd6438 Mon Sep 17 00:00:00 2001
From: ionitron <hi@ionicframework.com>
Date: Wed, 16 Oct 2024 18:55:50 +0000
Subject: [PATCH 7/8] v8.3.3

---
 CHANGELOG.md                              | 11 +++++++++++
 core/CHANGELOG.md                         |  8 ++++++++
 core/package-lock.json                    |  6 +++---
 core/package.json                         |  2 +-
 lerna.json                                |  2 +-
 packages/angular-server/CHANGELOG.md      |  8 ++++++++
 packages/angular-server/package-lock.json |  8 ++++----
 packages/angular-server/package.json      |  4 ++--
 packages/angular/CHANGELOG.md             |  8 ++++++++
 packages/angular/package-lock.json        |  8 ++++----
 packages/angular/package.json             |  4 ++--
 packages/docs/CHANGELOG.md                |  8 ++++++++
 packages/docs/package-lock.json           |  6 +++---
 packages/docs/package.json                |  2 +-
 packages/react-router/CHANGELOG.md        |  8 ++++++++
 packages/react-router/package-lock.json   |  8 ++++----
 packages/react-router/package.json        |  4 ++--
 packages/react/CHANGELOG.md               | 11 +++++++++++
 packages/react/package-lock.json          |  8 ++++----
 packages/react/package.json               |  4 ++--
 packages/vue-router/CHANGELOG.md          |  8 ++++++++
 packages/vue-router/package-lock.json     |  8 ++++----
 packages/vue-router/package.json          |  4 ++--
 packages/vue/CHANGELOG.md                 | 11 +++++++++++
 packages/vue/package-lock.json            |  8 ++++----
 packages/vue/package.json                 |  4 ++--
 26 files changed, 126 insertions(+), 45 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b3ce6deada..875825ea57 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.3.3](https://github.com/ionic-team/ionic-framework/compare/v8.3.2...v8.3.3) (2024-10-16)
+
+
+### Bug Fixes
+
+* **tabs, tab-bar:** use standalone tab bar in Vue, React ([#29940](https://github.com/ionic-team/ionic-framework/issues/29940)) ([b7b383b](https://github.com/ionic-team/ionic-framework/commit/b7b383bee080b72de2e6307ff9a9a051314c69ed)), closes [#29885](https://github.com/ionic-team/ionic-framework/issues/29885) [#29924](https://github.com/ionic-team/ionic-framework/issues/29924)
+
+
+
+
+
 ## [8.3.2](https://github.com/ionic-team/ionic-framework/compare/v8.3.1...v8.3.2) (2024-10-02)
 
 
diff --git a/core/CHANGELOG.md b/core/CHANGELOG.md
index 47330049be..5cf7ee82a7 100644
--- a/core/CHANGELOG.md
+++ b/core/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.3.3](https://github.com/ionic-team/ionic-framework/compare/v8.3.2...v8.3.3) (2024-10-16)
+
+**Note:** Version bump only for package @ionic/core
+
+
+
+
+
 ## [8.3.2](https://github.com/ionic-team/ionic-framework/compare/v8.3.1...v8.3.2) (2024-10-02)
 
 
diff --git a/core/package-lock.json b/core/package-lock.json
index d3a40c7cb7..2c26a91cc7 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ionic/core",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/core",
-      "version": "8.3.2",
+      "version": "8.3.3",
       "license": "MIT",
       "dependencies": {
         "@stencil/core": "4.20.0",
@@ -17767,4 +17767,4 @@
       "dev": true
     }
   }
-}
+}
\ No newline at end of file
diff --git a/core/package.json b/core/package.json
index 090026aa11..a940240139 100644
--- a/core/package.json
+++ b/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",
diff --git a/lerna.json b/lerna.json
index 3db18479ad..aaecbf98e0 100644
--- a/lerna.json
+++ b/lerna.json
@@ -3,5 +3,5 @@
     "core",
     "packages/*"
   ],
-  "version": "8.3.2"
+  "version": "8.3.3"
 }
\ No newline at end of file
diff --git a/packages/angular-server/CHANGELOG.md b/packages/angular-server/CHANGELOG.md
index 7f088aece1..87f068694a 100644
--- a/packages/angular-server/CHANGELOG.md
+++ b/packages/angular-server/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.3.3](https://github.com/ionic-team/ionic-framework/compare/v8.3.2...v8.3.3) (2024-10-16)
+
+**Note:** Version bump only for package @ionic/angular-server
+
+
+
+
+
 ## [8.3.2](https://github.com/ionic-team/ionic-framework/compare/v8.3.1...v8.3.2) (2024-10-02)
 
 **Note:** Version bump only for package @ionic/angular-server
diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json
index 04293644c8..a54cafa4b8 100644
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular-server",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular-server",
-      "version": "8.3.2",
+      "version": "8.3.3",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.3.2"
+        "@ionic/core": "^8.3.3"
       },
       "devDependencies": {
         "@angular-eslint/eslint-plugin": "^16.0.0",
@@ -11110,4 +11110,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/angular-server/package.json b/packages/angular-server/package.json
index c959d277e8..4b84cac006 100644
--- a/packages/angular-server/package.json
+++ b/packages/angular-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular-server",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "Angular SSR Module for Ionic",
   "keywords": [
     "ionic",
@@ -62,6 +62,6 @@
   },
   "prettier": "@ionic/prettier-config",
   "dependencies": {
-    "@ionic/core": "^8.3.2"
+    "@ionic/core": "^8.3.3"
   }
 }
diff --git a/packages/angular/CHANGELOG.md b/packages/angular/CHANGELOG.md
index ce214960d6..517488505d 100644
--- a/packages/angular/CHANGELOG.md
+++ b/packages/angular/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.3.3](https://github.com/ionic-team/ionic-framework/compare/v8.3.2...v8.3.3) (2024-10-16)
+
+**Note:** Version bump only for package @ionic/angular
+
+
+
+
+
 ## [8.3.2](https://github.com/ionic-team/ionic-framework/compare/v8.3.1...v8.3.2) (2024-10-02)
 
 **Note:** Version bump only for package @ionic/angular
diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json
index b747e92c83..da7c7aeaf0 100644
--- a/packages/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/angular",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/angular",
-      "version": "8.3.2",
+      "version": "8.3.3",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.3.2",
+        "@ionic/core": "^8.3.3",
         "ionicons": "^7.0.0",
         "jsonc-parser": "^3.0.0",
         "tslib": "^2.3.0"
@@ -15020,4 +15020,4 @@
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/angular/package.json b/packages/angular/package.json
index a4c8859862..f2c927b098 100644
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/angular",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "Angular specific wrappers for @ionic/core",
   "keywords": [
     "ionic",
@@ -47,7 +47,7 @@
     }
   },
   "dependencies": {
-    "@ionic/core": "^8.3.2",
+    "@ionic/core": "^8.3.3",
     "ionicons": "^7.0.0",
     "jsonc-parser": "^3.0.0",
     "tslib": "^2.3.0"
diff --git a/packages/docs/CHANGELOG.md b/packages/docs/CHANGELOG.md
index a3ec432ee9..bf807426dd 100644
--- a/packages/docs/CHANGELOG.md
+++ b/packages/docs/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.3.3](https://github.com/ionic-team/ionic-framework/compare/v8.3.2...v8.3.3) (2024-10-16)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
 ## [8.3.2](https://github.com/ionic-team/ionic-framework/compare/v8.3.1...v8.3.2) (2024-10-02)
 
 **Note:** Version bump only for package @ionic/docs
diff --git a/packages/docs/package-lock.json b/packages/docs/package-lock.json
index 70e5ff5504..8e4460b10a 100644
--- a/packages/docs/package-lock.json
+++ b/packages/docs/package-lock.json
@@ -1,13 +1,13 @@
 {
   "name": "@ionic/docs",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/docs",
-      "version": "8.3.2",
+      "version": "8.3.3",
       "license": "MIT"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/docs/package.json b/packages/docs/package.json
index 9feab60801..9faa6071e6 100644
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/docs",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "Pre-packaged API documentation for the Ionic docs.",
   "main": "core.json",
   "types": "core.d.ts",
diff --git a/packages/react-router/CHANGELOG.md b/packages/react-router/CHANGELOG.md
index 542fcc3f81..8969ab83e6 100644
--- a/packages/react-router/CHANGELOG.md
+++ b/packages/react-router/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.3.3](https://github.com/ionic-team/ionic-framework/compare/v8.3.2...v8.3.3) (2024-10-16)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
+
 ## [8.3.2](https://github.com/ionic-team/ionic-framework/compare/v8.3.1...v8.3.2) (2024-10-02)
 
 **Note:** Version bump only for package @ionic/react-router
diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json
index 42554c94ad..0dda7bdd39 100644
--- a/packages/react-router/package-lock.json
+++ b/packages/react-router/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react-router",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react-router",
-      "version": "8.3.2",
+      "version": "8.3.3",
       "license": "MIT",
       "dependencies": {
-        "@ionic/react": "^8.3.2",
+        "@ionic/react": "^8.3.3",
         "tslib": "*"
       },
       "devDependencies": {
@@ -6666,4 +6666,4 @@
       "dev": true
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/react-router/package.json b/packages/react-router/package.json
index af72bd66f8..4e14633138 100644
--- a/packages/react-router/package.json
+++ b/packages/react-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react-router",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "React Router wrapper for @ionic/react",
   "keywords": [
     "ionic",
@@ -36,7 +36,7 @@
     "dist/"
   ],
   "dependencies": {
-    "@ionic/react": "^8.3.2",
+    "@ionic/react": "^8.3.3",
     "tslib": "*"
   },
   "peerDependencies": {
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 0aea2ceb7a..dc28f6a1d9 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.3.3](https://github.com/ionic-team/ionic-framework/compare/v8.3.2...v8.3.3) (2024-10-16)
+
+
+### Bug Fixes
+
+* **tabs, tab-bar:** use standalone tab bar in Vue, React ([#29940](https://github.com/ionic-team/ionic-framework/issues/29940)) ([b7b383b](https://github.com/ionic-team/ionic-framework/commit/b7b383bee080b72de2e6307ff9a9a051314c69ed)), closes [#29885](https://github.com/ionic-team/ionic-framework/issues/29885) [#29924](https://github.com/ionic-team/ionic-framework/issues/29924)
+
+
+
+
+
 ## [8.3.2](https://github.com/ionic-team/ionic-framework/compare/v8.3.1...v8.3.2) (2024-10-02)
 
 **Note:** Version bump only for package @ionic/react
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index 5d5dd8a998..df52b88f1c 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/react",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/react",
-      "version": "8.3.2",
+      "version": "8.3.3",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.3.2",
+        "@ionic/core": "^8.3.3",
         "ionicons": "^7.0.0",
         "tslib": "*"
       },
@@ -20498,4 +20498,4 @@
       "dev": true
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/react/package.json b/packages/react/package.json
index 7a182d2b1f..72ce6e4adc 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/react",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "React specific wrapper for @ionic/core",
   "keywords": [
     "ionic",
@@ -39,7 +39,7 @@
     "css/"
   ],
   "dependencies": {
-    "@ionic/core": "^8.3.2",
+    "@ionic/core": "^8.3.3",
     "ionicons": "^7.0.0",
     "tslib": "*"
   },
diff --git a/packages/vue-router/CHANGELOG.md b/packages/vue-router/CHANGELOG.md
index 8b955cc018..fc02c3c19a 100644
--- a/packages/vue-router/CHANGELOG.md
+++ b/packages/vue-router/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.3.3](https://github.com/ionic-team/ionic-framework/compare/v8.3.2...v8.3.3) (2024-10-16)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
+
 ## [8.3.2](https://github.com/ionic-team/ionic-framework/compare/v8.3.1...v8.3.2) (2024-10-02)
 
 **Note:** Version bump only for package @ionic/vue-router
diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json
index 0f515af932..26bf0c15df 100644
--- a/packages/vue-router/package-lock.json
+++ b/packages/vue-router/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue-router",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue-router",
-      "version": "8.3.2",
+      "version": "8.3.3",
       "license": "MIT",
       "dependencies": {
-        "@ionic/vue": "^8.3.2"
+        "@ionic/vue": "^8.3.3"
       },
       "devDependencies": {
         "@ionic/eslint-config": "^0.3.0",
@@ -12798,4 +12798,4 @@
       "dev": true
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue-router/package.json b/packages/vue-router/package.json
index 1f62bc7505..a8fe48ac36 100644
--- a/packages/vue-router/package.json
+++ b/packages/vue-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue-router",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "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.3.2"
+    "@ionic/vue": "^8.3.3"
   },
   "devDependencies": {
     "@ionic/eslint-config": "^0.3.0",
diff --git a/packages/vue/CHANGELOG.md b/packages/vue/CHANGELOG.md
index 0371b7bb30..ae7db1feb0 100644
--- a/packages/vue/CHANGELOG.md
+++ b/packages/vue/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.3.3](https://github.com/ionic-team/ionic-framework/compare/v8.3.2...v8.3.3) (2024-10-16)
+
+
+### Bug Fixes
+
+* **tabs, tab-bar:** use standalone tab bar in Vue, React ([#29940](https://github.com/ionic-team/ionic-framework/issues/29940)) ([b7b383b](https://github.com/ionic-team/ionic-framework/commit/b7b383bee080b72de2e6307ff9a9a051314c69ed)), closes [#29885](https://github.com/ionic-team/ionic-framework/issues/29885) [#29924](https://github.com/ionic-team/ionic-framework/issues/29924)
+
+
+
+
+
 ## [8.3.2](https://github.com/ionic-team/ionic-framework/compare/v8.3.1...v8.3.2) (2024-10-02)
 
 **Note:** Version bump only for package @ionic/vue
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
index f9a95739db..0927c1ec80 100644
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "@ionic/vue",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@ionic/vue",
-      "version": "8.3.2",
+      "version": "8.3.3",
       "license": "MIT",
       "dependencies": {
-        "@ionic/core": "^8.3.2",
+        "@ionic/core": "^8.3.3",
         "ionicons": "^7.0.0"
       },
       "devDependencies": {
@@ -6562,4 +6562,4 @@
       "dev": true
     }
   }
-}
+}
\ No newline at end of file
diff --git a/packages/vue/package.json b/packages/vue/package.json
index afc15dc834..d5a6d14983 100644
--- a/packages/vue/package.json
+++ b/packages/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ionic/vue",
-  "version": "8.3.2",
+  "version": "8.3.3",
   "description": "Vue specific wrapper for @ionic/core",
   "scripts": {
     "eslint": "eslint src",
@@ -66,7 +66,7 @@
     "vue-router": "^4.0.16"
   },
   "dependencies": {
-    "@ionic/core": "^8.3.2",
+    "@ionic/core": "^8.3.3",
     "ionicons": "^7.0.0"
   },
   "vetur": {

From c67e6299d7e1a1367c3cc1b16a9117d631be9677 Mon Sep 17 00:00:00 2001
From: ionitron <hi@ionicframework.com>
Date: Wed, 16 Oct 2024 18:57:07 +0000
Subject: [PATCH 8/8] chore(): update package lock files

---
 core/package-lock.json                    |  2 +-
 packages/angular-server/package-lock.json | 14 +++++------
 packages/angular/package-lock.json        | 14 +++++------
 packages/docs/package-lock.json           |  2 +-
 packages/react-router/package-lock.json   | 30 +++++++++++------------
 packages/react/package-lock.json          | 14 +++++------
 packages/vue-router/package-lock.json     | 30 +++++++++++------------
 packages/vue/package-lock.json            | 14 +++++------
 8 files changed, 60 insertions(+), 60 deletions(-)

diff --git a/core/package-lock.json b/core/package-lock.json
index 2c26a91cc7..e23c713933 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -17767,4 +17767,4 @@
       "dev": true
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/angular-server/package-lock.json b/packages/angular-server/package-lock.json
index a54cafa4b8..cec18a9842 100644
--- a/packages/angular-server/package-lock.json
+++ b/packages/angular-server/package-lock.json
@@ -1031,9 +1031,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.2.tgz",
-      "integrity": "sha512-ptiDXnn4131eKpY862lv7c9xxjly7vi4O+WWCES78E+hXHvTEAundcA5F8eQyb0MFIFvCnOxreTZjRJJnHqPYw==",
+      "version": "8.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.3.tgz",
+      "integrity": "sha512-f2PXV0jFIFPdjP+NbmQ1mXqRQ4KWi0U0jdQd3wDYsJFWQLmWXhW7Yp/4lCDdl0ouMeZRB2phddqFct1c7H6PyA==",
       "dependencies": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -7188,9 +7188,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.2.tgz",
-      "integrity": "sha512-ptiDXnn4131eKpY862lv7c9xxjly7vi4O+WWCES78E+hXHvTEAundcA5F8eQyb0MFIFvCnOxreTZjRJJnHqPYw==",
+      "version": "8.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.3.tgz",
+      "integrity": "sha512-f2PXV0jFIFPdjP+NbmQ1mXqRQ4KWi0U0jdQd3wDYsJFWQLmWXhW7Yp/4lCDdl0ouMeZRB2phddqFct1c7H6PyA==",
       "requires": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -11110,4 +11110,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json
index da7c7aeaf0..7f71a33aa6 100644
--- a/packages/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -1398,9 +1398,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.2.tgz",
-      "integrity": "sha512-ptiDXnn4131eKpY862lv7c9xxjly7vi4O+WWCES78E+hXHvTEAundcA5F8eQyb0MFIFvCnOxreTZjRJJnHqPYw==",
+      "version": "8.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.3.tgz",
+      "integrity": "sha512-f2PXV0jFIFPdjP+NbmQ1mXqRQ4KWi0U0jdQd3wDYsJFWQLmWXhW7Yp/4lCDdl0ouMeZRB2phddqFct1c7H6PyA==",
       "dependencies": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -9820,9 +9820,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.2.tgz",
-      "integrity": "sha512-ptiDXnn4131eKpY862lv7c9xxjly7vi4O+WWCES78E+hXHvTEAundcA5F8eQyb0MFIFvCnOxreTZjRJJnHqPYw==",
+      "version": "8.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.3.tgz",
+      "integrity": "sha512-f2PXV0jFIFPdjP+NbmQ1mXqRQ4KWi0U0jdQd3wDYsJFWQLmWXhW7Yp/4lCDdl0ouMeZRB2phddqFct1c7H6PyA==",
       "requires": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -15020,4 +15020,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/docs/package-lock.json b/packages/docs/package-lock.json
index 8e4460b10a..a1d2d61aae 100644
--- a/packages/docs/package-lock.json
+++ b/packages/docs/package-lock.json
@@ -10,4 +10,4 @@
       "license": "MIT"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/react-router/package-lock.json b/packages/react-router/package-lock.json
index 0dda7bdd39..53ec60cc26 100644
--- a/packages/react-router/package-lock.json
+++ b/packages/react-router/package-lock.json
@@ -238,9 +238,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.2.tgz",
-      "integrity": "sha512-ptiDXnn4131eKpY862lv7c9xxjly7vi4O+WWCES78E+hXHvTEAundcA5F8eQyb0MFIFvCnOxreTZjRJJnHqPYw==",
+      "version": "8.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.3.tgz",
+      "integrity": "sha512-f2PXV0jFIFPdjP+NbmQ1mXqRQ4KWi0U0jdQd3wDYsJFWQLmWXhW7Yp/4lCDdl0ouMeZRB2phddqFct1c7H6PyA==",
       "dependencies": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -414,11 +414,11 @@
       }
     },
     "node_modules/@ionic/react": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.3.2.tgz",
-      "integrity": "sha512-LOM+CrVgcR5aDH4LzgahGTz9gE5fn8JnRw6nXLkXWeu+qfic/qbLiRnaqLW9GAmMX0vSHeZc72AJTeG9VB5xYQ==",
+      "version": "8.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.3.3.tgz",
+      "integrity": "sha512-BQVke+4QF1viPmwYFV/Bfseh4AhLnA0svP8UvKTP45plJ2KDXF/IbFVNn+FWtjByrqYU4PldUgF01+O4yPGiRw==",
       "dependencies": {
-        "@ionic/core": "8.3.2",
+        "@ionic/core": "8.3.3",
         "ionicons": "^7.0.0",
         "tslib": "*"
       },
@@ -4057,9 +4057,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.2.tgz",
-      "integrity": "sha512-ptiDXnn4131eKpY862lv7c9xxjly7vi4O+WWCES78E+hXHvTEAundcA5F8eQyb0MFIFvCnOxreTZjRJJnHqPYw==",
+      "version": "8.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.3.tgz",
+      "integrity": "sha512-f2PXV0jFIFPdjP+NbmQ1mXqRQ4KWi0U0jdQd3wDYsJFWQLmWXhW7Yp/4lCDdl0ouMeZRB2phddqFct1c7H6PyA==",
       "requires": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -4163,11 +4163,11 @@
       "requires": {}
     },
     "@ionic/react": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.3.2.tgz",
-      "integrity": "sha512-LOM+CrVgcR5aDH4LzgahGTz9gE5fn8JnRw6nXLkXWeu+qfic/qbLiRnaqLW9GAmMX0vSHeZc72AJTeG9VB5xYQ==",
+      "version": "8.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.3.3.tgz",
+      "integrity": "sha512-BQVke+4QF1viPmwYFV/Bfseh4AhLnA0svP8UvKTP45plJ2KDXF/IbFVNn+FWtjByrqYU4PldUgF01+O4yPGiRw==",
       "requires": {
-        "@ionic/core": "8.3.2",
+        "@ionic/core": "8.3.3",
         "ionicons": "^7.0.0",
         "tslib": "*"
       }
@@ -6666,4 +6666,4 @@
       "dev": true
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
index df52b88f1c..6e176a5e27 100644
--- a/packages/react/package-lock.json
+++ b/packages/react/package-lock.json
@@ -736,9 +736,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.2.tgz",
-      "integrity": "sha512-ptiDXnn4131eKpY862lv7c9xxjly7vi4O+WWCES78E+hXHvTEAundcA5F8eQyb0MFIFvCnOxreTZjRJJnHqPYw==",
+      "version": "8.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.3.tgz",
+      "integrity": "sha512-f2PXV0jFIFPdjP+NbmQ1mXqRQ4KWi0U0jdQd3wDYsJFWQLmWXhW7Yp/4lCDdl0ouMeZRB2phddqFct1c7H6PyA==",
       "dependencies": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -12315,9 +12315,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.2.tgz",
-      "integrity": "sha512-ptiDXnn4131eKpY862lv7c9xxjly7vi4O+WWCES78E+hXHvTEAundcA5F8eQyb0MFIFvCnOxreTZjRJJnHqPYw==",
+      "version": "8.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.3.tgz",
+      "integrity": "sha512-f2PXV0jFIFPdjP+NbmQ1mXqRQ4KWi0U0jdQd3wDYsJFWQLmWXhW7Yp/4lCDdl0ouMeZRB2phddqFct1c7H6PyA==",
       "requires": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -20498,4 +20498,4 @@
       "dev": true
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/vue-router/package-lock.json b/packages/vue-router/package-lock.json
index 26bf0c15df..2a45b55ebf 100644
--- a/packages/vue-router/package-lock.json
+++ b/packages/vue-router/package-lock.json
@@ -661,9 +661,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.2.tgz",
-      "integrity": "sha512-ptiDXnn4131eKpY862lv7c9xxjly7vi4O+WWCES78E+hXHvTEAundcA5F8eQyb0MFIFvCnOxreTZjRJJnHqPYw==",
+      "version": "8.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.3.tgz",
+      "integrity": "sha512-f2PXV0jFIFPdjP+NbmQ1mXqRQ4KWi0U0jdQd3wDYsJFWQLmWXhW7Yp/4lCDdl0ouMeZRB2phddqFct1c7H6PyA==",
       "dependencies": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -852,11 +852,11 @@
       }
     },
     "node_modules/@ionic/vue": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.3.2.tgz",
-      "integrity": "sha512-r9BsWqOlv34d8dPyWgXvh4ZXyKtZBO2dM4aEvJCLcFBC76gtBFARExKKMc3Ji/nLgl8eGoodhfjhwwAaiMSmYg==",
+      "version": "8.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.3.3.tgz",
+      "integrity": "sha512-6EAPWdmQDvazP4ZsCRjWlG91Kx+1vYxX1gHx02Xvcc7Dn8hRrMW58IAAQ0BqSYsrHNFTKVtwD3cJbmnut8Ghyg==",
       "dependencies": {
-        "@ionic/core": "8.3.2",
+        "@ionic/core": "8.3.3",
         "ionicons": "^7.0.0"
       }
     },
@@ -7878,9 +7878,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.2.tgz",
-      "integrity": "sha512-ptiDXnn4131eKpY862lv7c9xxjly7vi4O+WWCES78E+hXHvTEAundcA5F8eQyb0MFIFvCnOxreTZjRJJnHqPYw==",
+      "version": "8.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.3.tgz",
+      "integrity": "sha512-f2PXV0jFIFPdjP+NbmQ1mXqRQ4KWi0U0jdQd3wDYsJFWQLmWXhW7Yp/4lCDdl0ouMeZRB2phddqFct1c7H6PyA==",
       "requires": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -7993,11 +7993,11 @@
       "requires": {}
     },
     "@ionic/vue": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.3.2.tgz",
-      "integrity": "sha512-r9BsWqOlv34d8dPyWgXvh4ZXyKtZBO2dM4aEvJCLcFBC76gtBFARExKKMc3Ji/nLgl8eGoodhfjhwwAaiMSmYg==",
+      "version": "8.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.3.3.tgz",
+      "integrity": "sha512-6EAPWdmQDvazP4ZsCRjWlG91Kx+1vYxX1gHx02Xvcc7Dn8hRrMW58IAAQ0BqSYsrHNFTKVtwD3cJbmnut8Ghyg==",
       "requires": {
-        "@ionic/core": "8.3.2",
+        "@ionic/core": "8.3.3",
         "ionicons": "^7.0.0"
       }
     },
@@ -12798,4 +12798,4 @@
       "dev": true
     }
   }
-}
\ No newline at end of file
+}
diff --git a/packages/vue/package-lock.json b/packages/vue/package-lock.json
index 0927c1ec80..9a5b0bfcef 100644
--- a/packages/vue/package-lock.json
+++ b/packages/vue/package-lock.json
@@ -208,9 +208,9 @@
       "dev": true
     },
     "node_modules/@ionic/core": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.2.tgz",
-      "integrity": "sha512-ptiDXnn4131eKpY862lv7c9xxjly7vi4O+WWCES78E+hXHvTEAundcA5F8eQyb0MFIFvCnOxreTZjRJJnHqPYw==",
+      "version": "8.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.3.tgz",
+      "integrity": "sha512-f2PXV0jFIFPdjP+NbmQ1mXqRQ4KWi0U0jdQd3wDYsJFWQLmWXhW7Yp/4lCDdl0ouMeZRB2phddqFct1c7H6PyA==",
       "dependencies": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -3970,9 +3970,9 @@
       "dev": true
     },
     "@ionic/core": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.2.tgz",
-      "integrity": "sha512-ptiDXnn4131eKpY862lv7c9xxjly7vi4O+WWCES78E+hXHvTEAundcA5F8eQyb0MFIFvCnOxreTZjRJJnHqPYw==",
+      "version": "8.3.3",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.3.3.tgz",
+      "integrity": "sha512-f2PXV0jFIFPdjP+NbmQ1mXqRQ4KWi0U0jdQd3wDYsJFWQLmWXhW7Yp/4lCDdl0ouMeZRB2phddqFct1c7H6PyA==",
       "requires": {
         "@stencil/core": "4.20.0",
         "ionicons": "^7.2.2",
@@ -6562,4 +6562,4 @@
       "dev": true
     }
   }
-}
\ No newline at end of file
+}