refactor(tabs): export correct interface

core/api.txt

@@ -1362,8 +1362,8 @@ ion-tabs,shadow
 ion-tabs,method,getSelected,getSelected() => Promise<string | undefined>
 ion-tabs,method,getTab,getTab(tab: string | HTMLIonTabElement) => Promise<HTMLIonTabElement | undefined>
 ion-tabs,method,select,select(tab: string | HTMLIonTabElement) => Promise<boolean>
-ion-tabs,event,ionTabsDidChange,{ tab: string; },false
+ion-tabs,event,ionTabsDidChange,TabsEventDetail,false
-ion-tabs,event,ionTabsWillChange,{ tab: string; },false
+ion-tabs,event,ionTabsWillChange,TabsEventDetail,false
 
 ion-text,shadow
 ion-text,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true

core/src/components.d.ts

@@ -38,6 +38,7 @@ import { SegmentButtonLayout } from "./components/segment-button/segment-button-
 import { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
 import { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
 import { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
+import { TabsEventDetail } from "./components/tabs/tabs-interface";
 import { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
 import { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions, ToastSwipeGestureDirection } from "./components/toast/toast-interface";
 import { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
@@ -74,6 +75,7 @@ export { SegmentButtonLayout } from "./components/segment-button/segment-button-
 export { SelectChangeEventDetail, SelectCompareFn, SelectInterface } from "./components/select/select-interface";
 export { SelectPopoverOption } from "./components/select-popover/select-popover-interface";
 export { TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from "./components/tab-bar/tab-bar-interface";
+export { TabsEventDetail } from "./components/tabs/tabs-interface";
 export { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/textarea/textarea-interface";
 export { ToastButton, ToastDismissOptions, ToastLayout, ToastPosition, ToastPresentOptions, ToastSwipeGestureDirection } from "./components/toast/toast-interface";
 export { ToggleChangeEventDetail } from "./components/toggle/toggle-interface";
@@ -4503,8 +4505,8 @@ declare global {
     };
     interface HTMLIonTabsElementEventMap {
         "ionNavWillLoad": void;
-        "ionTabsWillChange": { tab: string };
+        "ionTabsWillChange": TabsEventDetail;
-        "ionTabsDidChange": { tab: string };
+        "ionTabsDidChange": TabsEventDetail;
     }
     interface HTMLIonTabsElement extends Components.IonTabs, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIonTabsElementEventMap>(type: K, listener: (this: HTMLIonTabsElement, ev: IonTabsCustomEvent<HTMLIonTabsElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -7711,11 +7713,11 @@ declare namespace LocalJSX {
         /**
           * Emitted when the navigation has finished transitioning to a new component.
          */
-        "onIonTabsDidChange"?: (event: IonTabsCustomEvent<{ tab: string }>) => void;
+        "onIonTabsDidChange"?: (event: IonTabsCustomEvent<TabsEventDetail>) => void;
         /**
           * Emitted when the navigation is about to transition to a new component.
          */
-        "onIonTabsWillChange"?: (event: IonTabsCustomEvent<{ tab: string }>) => void;
+        "onIonTabsWillChange"?: (event: IonTabsCustomEvent<TabsEventDetail>) => void;
         "useRouter"?: boolean;
     }
     interface IonText {

core/src/components/tabs/tabs-interface.ts

@@ -1,4 +1,8 @@
+export interface TabsEventDetail {
+  tab: string;
+}
+
 export interface TabsCustomEvent extends CustomEvent {
-  detail: { tab: string };
+  detail: TabsEventDetail;
   target: HTMLIonTabsElement;
 }

core/src/components/tabs/tabs.tsx

@@ -4,6 +4,8 @@ import { Component, Element, Event, Host, Method, Prop, State, h } from '@stenci
 import type { NavOutlet, RouteID, RouteWrite } from '../router/utils/interface';
 import type { TabButtonClickEventDetail } from '../tab-bar/tab-bar-interface';
 
+import type { TabsEventDetail } from './tabs-interface';
+
 /**
  * @slot - Content is placed between the named slots if provided without a slot.
  * @slot top - Content is placed at the top of the screen.
@@ -34,12 +36,12 @@ export class Tabs implements NavOutlet {
   /**
    * Emitted when the navigation is about to transition to a new component.
    */
-  @Event({ bubbles: false }) ionTabsWillChange!: EventEmitter<{ tab: string }>;
+  @Event({ bubbles: false }) ionTabsWillChange!: EventEmitter<TabsEventDetail>;
 
   /**
    * Emitted when the navigation has finished transitioning to a new component.
    */
-  @Event({ bubbles: false }) ionTabsDidChange!: EventEmitter<{ tab: string }>;
+  @Event({ bubbles: false }) ionTabsDidChange!: EventEmitter<TabsEventDetail>;
 
   async componentWillLoad() {
     if (!this.useRouter) {