feat(tab): modular ionic migration and lazy-load specs

core/api.txt

@@ -2547,7 +2547,6 @@ ion-tab,shadow
 ion-tab,prop,component,Function | HTMLElement | null | string | undefined,undefined,false,false
 ion-tab,prop,mode,"ios" | "md",undefined,false,false
 ion-tab,prop,tab,string,undefined,true,false
-ion-tab,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-tab,method,setActive,setActive() => Promise<void>
 
 ion-tab-bar,shadow

core/src/components.d.ts

@@ -3928,10 +3928,6 @@ export namespace Components {
           * A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.
          */
         "tab": string;
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonTabBar {
         /**
@@ -9941,10 +9937,6 @@ declare namespace LocalJSX {
           * A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.
          */
         "tab": string;
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonTabBar {
         /**

core/src/components/tab/tab.tsx

@@ -7,7 +7,6 @@ import type { ComponentRef, FrameworkDelegate } from '../../interface';
 
 /**
  * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
  */
 @Component({
   tag: 'ion-tab',

core/src/components/tab/test/tab.spec.ts

@@ -0,0 +1,45 @@
+import { newSpecPage } from '@stencil/core/testing';
+
+import type { FrameworkDelegate } from '../../../interface';
+import { Tab } from '../tab';
+
+const mockDelegate = (attachViewToDom: FrameworkDelegate['attachViewToDom']): FrameworkDelegate => ({
+  attachViewToDom,
+  removeViewFromDom: jest.fn().mockResolvedValue(undefined),
+});
+
+describe('ion-tab: lazy loading', () => {
+  it('should attach the component only once across multiple setActive calls', async () => {
+    const page = await newSpecPage({
+      components: [Tab],
+      html: '<ion-tab tab="home" component="ion-content"></ion-tab>',
+    });
+
+    const tabEl = page.body.querySelector('ion-tab') as any;
+    const attachViewToDom = jest.fn().mockResolvedValue(document.createElement('div'));
+    tabEl.delegate = mockDelegate(attachViewToDom);
+
+    await tabEl.setActive();
+    await tabEl.setActive();
+
+    expect(attachViewToDom).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not retry attach after a failed first attempt', async () => {
+    const page = await newSpecPage({
+      components: [Tab],
+      html: '<ion-tab tab="home" component="ion-content"></ion-tab>',
+    });
+
+    const tabEl = page.body.querySelector('ion-tab') as any;
+    const attachViewToDom = jest.fn().mockRejectedValue(new Error('attach failed'));
+    tabEl.delegate = mockDelegate(attachViewToDom);
+
+    // First call rejects because the delegate throws. The loaded flag is already
+    // set to true before the attempt, so the failure is permanent.
+    await expect(tabEl.setActive()).rejects.toThrow('attach failed');
+    await tabEl.setActive();
+
+    expect(attachViewToDom).toHaveBeenCalledTimes(1);
+  });
+});

packages/angular/src/directives/proxies.ts

@@ -2336,15 +2336,15 @@ export declare interface IonSplitPane extends Components.IonSplitPane {
 
 
 @ProxyCmp({
-  inputs: ['component', 'mode', 'tab', 'theme'],
+  inputs: ['component', 'mode', 'tab'],
   methods: ['setActive']
 })
 @Component({
   selector: 'ion-tab',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['component', 'mode', 'tab', 'theme'],
+  inputs: ['component', 'mode', 'tab'],
 })
 export class IonTab {
   protected el: HTMLIonTabElement;

packages/angular/standalone/src/directives/proxies.ts

@@ -2077,15 +2077,15 @@ export declare interface IonSplitPane extends Components.IonSplitPane {
 
 @ProxyCmp({
   defineCustomElementFn: defineIonTab,
-  inputs: ['component', 'mode', 'tab', 'theme'],
+  inputs: ['component', 'mode', 'tab'],
   methods: ['setActive']
 })
 @Component({
   selector: 'ion-tab',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['component', 'mode', 'tab', 'theme'],
+  inputs: ['component', 'mode', 'tab'],
   standalone: true
 })
 export class IonTab {