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 1/4] 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 8d4865777ec..d08fee4437c 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 9d473b130cd..1ce48a75cb6 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 2/4] 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 f1a66440fcd..92fde774ddd 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 e80e09ac159..a7a8a250bf2 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 e7f9ba2b109..12686bd2ad6 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 24e81345404..714891c188e 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 4fde919bc82..5adde3a3318 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 3/4] 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 b3ce6deada2..875825ea573 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 47330049bef..5cf7ee82a7b 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 d3a40c7cb7b..2c26a91cc7f 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 090026aa118..a9402401390 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 3db18479ad2..aaecbf98e08 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 7f088aece15..87f068694a2 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 04293644c8a..a54cafa4b8e 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 c959d277e89..4b84cac006d 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 ce214960d6b..517488505d2 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 b747e92c83f..da7c7aeaf03 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 a4c88598623..f2c927b0982 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 a3ec432ee9d..bf807426dda 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 70e5ff5504d..8e4460b10a4 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 9feab608017..9faa6071e63 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 542fcc3f810..8969ab83e62 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 42554c94adc..0dda7bdd391 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 af72bd66f8c..4e146331381 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 0aea2ceb7a3..dc28f6a1d9a 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 5d5dd8a9987..df52b88f1cd 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 7a182d2b1f9..72ce6e4adc5 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 8b955cc0180..fc02c3c19ad 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 0f515af932c..26bf0c15df8 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 1f62bc75050..a8fe48ac36b 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 0371b7bb30d..ae7db1feb0b 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 f9a95739dbc..0927c1ec80e 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 afc15dc8345..d5a6d149837 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 4/4] 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 2c26a91cc7f..e23c7139338 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 a54cafa4b8e..cec18a98429 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 da7c7aeaf03..7f71a33aa65 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 8e4460b10a4..a1d2d61aae2 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 0dda7bdd391..53ec60cc26c 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 df52b88f1cd..6e176a5e275 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 26bf0c15df8..2a45b55ebf7 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 0927c1ec80e..9a5b0bfcefb 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
+}