@praxisui/tabs 8.0.0-beta.11 → 8.0.0-beta.12

package/README.md

@@ -75,6 +75,7 @@ Inputs
 - `componentInstanceId?: string` Opcional para desambiguar múltiplas instâncias com o mesmo `tabsId` na mesma rota.
 - `form?: FormGroup` FormGroup opcional para campos dinâmicos declarados em `content`.
 - `context?: any` Contexto propagado a widgets internos (via `DynamicWidgetLoader`).
+- `selectedIndex?: number` Índice ativo controlado por composição; não reemite `selectedIndexChange`.
 - `enableCustomization?: boolean` Exibe botão de edição quando verdadeiro (abre o editor).
 
 Outputs
@@ -83,6 +84,38 @@ Outputs
 - `focusChange, animationDone, indexFocused, selectFocusedIndex` Eventos nativos do Angular Material.
 - `widgetEvent: WidgetEventEnvelope` Bridge avançada/legado para transporte de eventos dos widgets internos com contexto da aba/link. Para conexões novas de widgets internos, use `composition.links` com `component-port + nestedPath`.
 
+## Uso Controlado por Composição
+
+`selectedIndex` é a porta pública para controlar a aba ativa a partir de estado externo ou de outro componente. Quando esse input é aplicado, o componente atualiza a aba ativa sem reemitir `selectedIndexChange`, evitando ciclos entre `state -> selectedIndex` e `selectedIndexChange -> state`.
+
+Padrão recomendado para páginas dinâmicas:
+
+- grave a seleção do usuário com `selectedIndexChange -> state`;
+- projete o estado de volta com `state -> selectedIndex`;
+- declare `selectedIndex` depois de `config` em `bindingOrder`, para que a configuração seja carregada antes da seleção controlada;
+- não persista `inputs.selectedIndex` estático em recipes quando a seleção vem de `composition.links`.
+
+Quando existe configuração persistida por `tabsId`, o valor controlado por `selectedIndex` vence a restauração local depois do carregamento da config. Essa projeção controlada não grava uma nova preferência no storage; somente interações diretas do usuário persistem seleção. Isso mantém o estado canônico da composição como fonte de verdade da navegação ativa sem transformar navegação transitória em configuração salva. Em modo `nav`, o índice controla `nav.links`; em modo `group`, controla `tabs`.
+
+Exemplo canônico:
+
+```json
+{
+  "links": [
+    {
+      "id": "tabs.selectedIndexChange->state.navigation.activeTabIndex",
+      "from": { "kind": "component-port", "ref": { "widget": "workspaceTabs", "port": "selectedIndexChange" } },
+      "to": { "kind": "state", "ref": { "path": "navigation.activeTabIndex", "layer": "values", "write": true } }
+    },
+    {
+      "id": "state.navigation.activeTabIndex->tabs.selectedIndex",
+      "from": { "kind": "state", "ref": { "path": "navigation.activeTabIndex", "layer": "values" } },
+      "to": { "kind": "component-port", "ref": { "widget": "workspaceTabs", "port": "selectedIndex" } }
+    }
+  ]
+}
+```
+
 Persistência
 - Quando `tabsId` é fornecido, a configuração é salva/recuperada em `AsyncConfigStorage` na chave `tabs:<component_id>`.
 - O `component_id` é derivado via `ComponentKeyService` (inclui rota, tipo de componente, `tabsId` e `componentInstanceId` quando informado).
@@ -110,8 +143,8 @@ export interface TabsMetadata {
   behavior?: { lazyLoad?: boolean; closeable?: boolean; reorderable?: boolean };
   accessibility?: { highContrast?: boolean; reduceMotion?: boolean };
   group?: { alignTabs?: 'start' | 'center' | 'end'; headerPosition?: 'above'|'below'; selectedIndex?: number; dynamicHeight?: boolean; disableRipple?: boolean; disablePagination?: boolean; fitInkBarToContent?: boolean; stretchTabs?: boolean; color?: 'primary'|'accent'|'warn'; backgroundColor?: 'primary'|'accent'|'warn'|undefined; animationDuration?: string; ariaLabel?: string; ariaLabelledby?: string; };
-  tabs?: Array<{ id?: string; textLabel?: string; disabled?: boolean; labelClass?: string|string[]; bodyClass?: string|string[]; content?: any[]; widgets?: WidgetDefinition[] }>;
-  nav?: { links: Array<{ id?: string; label: string; disabled?: boolean; content?: any[]; widgets?: WidgetDefinition[] }>; selectedIndex?: number; disableRipple?: boolean; disablePagination?: boolean; fitInkBarToContent?: boolean; stretchTabs?: boolean; color?: 'primary'|'accent'|'warn'; backgroundColor?: 'primary'|'accent'|'warn'|undefined; animationDuration?: string; ariaLabel?: string; ariaLabelledby?: string };
+  tabs?: Array<{ id?: string; textLabel?: string; icon?: string; disabled?: boolean; visible?: boolean; labelClass?: string|string[]; bodyClass?: string|string[]; content?: any[]; widgets?: WidgetDefinition[] }>;
+  nav?: { links: Array<{ id?: string; label: string; icon?: string; disabled?: boolean; visible?: boolean; content?: any[]; widgets?: WidgetDefinition[] }>; selectedIndex?: number; disableRipple?: boolean; disablePagination?: boolean; fitInkBarToContent?: boolean; stretchTabs?: boolean; color?: 'primary'|'accent'|'warn'; backgroundColor?: 'primary'|'accent'|'warn'|undefined; animationDuration?: string; ariaLabel?: string; ariaLabelledby?: string };
 }
 ```
 
@@ -153,6 +186,7 @@ Quick Setup
 - **Editable targets:** `tab`, `tabLabel`, `tabIcon`, `tabContent`, `activeTab`, `visibility`, `disabledState` e `layout`.
 - **Operation families:** `tab.add`, `tab.remove`, `tab.label.set`, `tab.icon.set`, `tab.order.set`, `tab.disabled.set`, `tab.visible.set`, `tab.active.set`, `layout.variant.set` e `tab.content.set`.
 - **Validation:** ids de abas/links devem ser estáveis e únicos, remoção destrutiva exige confirmação, `group` e `nav` não devem virar modos primários concorrentes, e o round-trip precisa preservar ordem, ids e selected index.
+- **Runtime/editor parity:** `tabs[].icon`, `tabs[].visible`, `nav.links[].icon` e `nav.links[].visible` são campos canônicos editáveis; itens com `visible: false` não são renderizados na navegação.
 - **Registry projection:** o manifesto é exportado no `public-api` e projetado em `components['praxis-tabs'].authoringManifest` pelo AI Registry.
 
 ## Eventos e Conexões

package/fesm2022/praxisui-tabs.mjs

@@ -784,6 +784,7 @@ class PraxisTabsConfigEditor {
         this.editedConfig.tabs.push({
             id: `tab${(this.editedConfig.tabs.length + 1)}`,
             textLabel: this.t('defaults.newTabLabel', 'New Tab'),
+            visible: true,
         });
         this.onAppearanceChange();
     }
@@ -859,6 +860,7 @@ class PraxisTabsConfigEditor {
         this.nav.links.push({
             id: `link${this.nav.links.length + 1}`,
             label: this.t('defaults.newLinkLabel', 'New Link'),
+            visible: true,
         });
         this.onAppearanceChange();
     }
@@ -1293,6 +1295,9 @@ class PraxisTabsConfigEditor {
                 <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.label', 'Rotulo') }}</mat-label>
                   <input matInput [(ngModel)]="tab.textLabel" (ngModelChange)="onAppearanceChange()" />
                 </mat-form-field>
+                <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.icon', 'Icone') }}</mat-label>
+                  <input matInput [(ngModel)]="tab.icon" (ngModelChange)="onAppearanceChange()" />
+                </mat-form-field>
                 <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.labelClass', 'Classe do rotulo') }}</mat-label>
                   <input matInput [(ngModel)]="tab.labelClass" (ngModelChange)="onAppearanceChange()" />
                 </mat-form-field>
@@ -1306,7 +1311,10 @@ class PraxisTabsConfigEditor {
                   <input matInput [(ngModel)]="tab.ariaLabelledby" (ngModelChange)="onAppearanceChange()" />
                 </mat-form-field>
               </div>
-              <mat-slide-toggle [(ngModel)]="tab.disabled" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disabled', 'Desativada') }}</mat-slide-toggle>
+              <div class="editor-row">
+                <mat-slide-toggle [(ngModel)]="tab.disabled" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disabled', 'Desativada') }}</mat-slide-toggle>
+                <mat-slide-toggle [ngModel]="tab.visible !== false" (ngModelChange)="tab.visible = $event; onAppearanceChange()">{{ t('editor.toggles.visible', 'Visivel') }}</mat-slide-toggle>
+              </div>
 
               <!-- Widgets (componentes dinâmicos) -->
               <div class="editor-divider editor-grid">
@@ -1384,9 +1392,13 @@ class PraxisTabsConfigEditor {
                 <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.label', 'Rotulo') }}</mat-label>
                   <input matInput [(ngModel)]="l.label" (ngModelChange)="onAppearanceChange()" />
                 </mat-form-field>
+                <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.icon', 'Icone') }}</mat-label>
+                  <input matInput [(ngModel)]="l.icon" (ngModelChange)="onAppearanceChange()" />
+                </mat-form-field>
               </div>
               <div class="editor-row">
                 <mat-slide-toggle [(ngModel)]="l.disabled" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.linkDisabled', 'Desativado') }}</mat-slide-toggle>
+                <mat-slide-toggle [ngModel]="l.visible !== false" (ngModelChange)="l.visible = $event; onAppearanceChange()">{{ t('editor.toggles.visible', 'Visivel') }}</mat-slide-toggle>
                 <mat-slide-toggle [(ngModel)]="l.disableRipple" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disableRipple', 'Sem ripple') }}</mat-slide-toggle>
                 <mat-slide-toggle [(ngModel)]="l.fitInkBarToContent" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.fitInkBarToContent', 'Indicador ajustado ao conteudo') }}</mat-slide-toggle>
               </div>
@@ -1797,6 +1809,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.label', 'Rotulo') }}</mat-label>
                   <input matInput [(ngModel)]="tab.textLabel" (ngModelChange)="onAppearanceChange()" />
                 </mat-form-field>
+                <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.icon', 'Icone') }}</mat-label>
+                  <input matInput [(ngModel)]="tab.icon" (ngModelChange)="onAppearanceChange()" />
+                </mat-form-field>
                 <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.labelClass', 'Classe do rotulo') }}</mat-label>
                   <input matInput [(ngModel)]="tab.labelClass" (ngModelChange)="onAppearanceChange()" />
                 </mat-form-field>
@@ -1810,7 +1825,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                   <input matInput [(ngModel)]="tab.ariaLabelledby" (ngModelChange)="onAppearanceChange()" />
                 </mat-form-field>
               </div>
-              <mat-slide-toggle [(ngModel)]="tab.disabled" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disabled', 'Desativada') }}</mat-slide-toggle>
+              <div class="editor-row">
+                <mat-slide-toggle [(ngModel)]="tab.disabled" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disabled', 'Desativada') }}</mat-slide-toggle>
+                <mat-slide-toggle [ngModel]="tab.visible !== false" (ngModelChange)="tab.visible = $event; onAppearanceChange()">{{ t('editor.toggles.visible', 'Visivel') }}</mat-slide-toggle>
+              </div>
 
               <!-- Widgets (componentes dinâmicos) -->
               <div class="editor-divider editor-grid">
@@ -1888,9 +1906,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.label', 'Rotulo') }}</mat-label>
                   <input matInput [(ngModel)]="l.label" (ngModelChange)="onAppearanceChange()" />
                 </mat-form-field>
+                <mat-form-field appearance="outline"><mat-label>{{ t('editor.fields.icon', 'Icone') }}</mat-label>
+                  <input matInput [(ngModel)]="l.icon" (ngModelChange)="onAppearanceChange()" />
+                </mat-form-field>
               </div>
               <div class="editor-row">
                 <mat-slide-toggle [(ngModel)]="l.disabled" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.linkDisabled', 'Desativado') }}</mat-slide-toggle>
+                <mat-slide-toggle [ngModel]="l.visible !== false" (ngModelChange)="l.visible = $event; onAppearanceChange()">{{ t('editor.toggles.visible', 'Visivel') }}</mat-slide-toggle>
                 <mat-slide-toggle [(ngModel)]="l.disableRipple" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.disableRipple', 'Sem ripple') }}</mat-slide-toggle>
                 <mat-slide-toggle [(ngModel)]="l.fitInkBarToContent" (ngModelChange)="onAppearanceChange()">{{ t('editor.toggles.fitInkBarToContent', 'Indicador ajustado ao conteudo') }}</mat-slide-toggle>
               </div>
@@ -2372,6 +2394,12 @@ class PraxisTabs {
     config = null;
     tabsId;
     componentInstanceId;
+    set selectedIndex(index) {
+        if (index == null)
+            return;
+        this.controlledSelectedIndex = index;
+        this.applySelectedIndex(index, false, false);
+    }
     enableCustomization = false;
     form = null;
     context = null;
@@ -2388,6 +2416,7 @@ class PraxisTabs {
     selectedIndexSignal = signal(0, ...(ngDevMode ? [{ debugName: "selectedIndexSignal" }] : []));
     groupLoaded = new Set();
     navLoaded = new Set();
+    controlledSelectedIndex;
     destroy$ = new Subject();
     widgetDefinitionCache = new WeakMap();
     ngOnInit() {
@@ -2400,6 +2429,7 @@ class PraxisTabs {
                     this.config = stored;
                 }
                 this.syncSelectionFromConfig();
+                this.reapplyControlledSelectedIndex();
             });
         }
     }
@@ -2409,6 +2439,7 @@ class PraxisTabs {
             this.syncSelectionFromConfig();
             // Persist when tabsId provided
             this.persistConfig(this.config);
+            this.reapplyControlledSelectedIndex();
         }
     }
     ngOnDestroy() {
@@ -2427,23 +2458,39 @@ class PraxisTabs {
     getNavActive(i) {
         return this.currentNavIndex() === i;
     }
+    visibleNavLinkEntries() {
+        return (this.config?.nav?.links ?? [])
+            .map((link, index) => ({ link, index }))
+            .filter((entry) => entry.link.visible !== false);
+    }
+    visibleTabEntries() {
+        return (this.config?.tabs ?? [])
+            .map((tab, index) => ({ tab, index }))
+            .filter((entry) => entry.tab.visible !== false);
+    }
+    selectedVisibleNavIndex() {
+        const entries = this.visibleNavLinkEntries();
+        const index = entries.findIndex((entry) => entry.index === this.currentNavIndex());
+        return index >= 0 ? index : 0;
+    }
+    selectedVisibleTabIndex() {
+        const entries = this.visibleTabEntries();
+        const index = entries.findIndex((entry) => entry.index === this.selectedIndexSignal());
+        return index >= 0 ? index : 0;
+    }
+    onVisibleTabIndexChange(index) {
+        const entry = this.visibleTabEntries()[index];
+        if (!entry)
+            return;
+        this.onSelectedIndexChange(entry.index);
+    }
     onNavClick(i) {
         if (!this.config?.nav?.links?.length)
             return;
         const linksCount = this.config.nav.links.length;
         if (i < 0 || i >= linksCount)
             return;
-        this.currentNavIndex.set(i);
-        this.config = produce(this.config, (draft) => {
-            if (!draft.nav)
-                return;
-            draft.nav.selectedIndex = i;
-        });
-        this.persistConfig(this.config);
-        // Lazy: mark as loaded
-        this.navLoaded.add(i);
-        // Emit as index change for consumers to track
-        this.selectedIndexChange.emit(i);
+        this.applySelectedIndex(i, true);
     }
     onNavDrop(event) {
         if (!this.config?.nav?.links)
@@ -2491,10 +2538,39 @@ class PraxisTabs {
         });
         this.persistConfig(this.config);
     }
+    onVisibleNavDrop(event) {
+        const entries = this.visibleNavLinkEntries();
+        const previous = entries[event.previousIndex];
+        const current = entries[event.currentIndex];
+        if (!previous || !current)
+            return;
+        this.onNavDrop({
+            ...event,
+            previousIndex: previous.index,
+            currentIndex: current.index,
+        });
+    }
     onSelectedIndexChange(index) {
+        this.applySelectedIndex(index, true);
+    }
+    applySelectedIndex(index, emit, persist = true) {
+        if (this.isNavMode() && this.config) {
+            const selected = this.clampIndex(index, this.config?.nav?.links?.length ?? 0);
+            this.currentNavIndex.set(selected);
+            this.config = produce(this.config, (draft) => {
+                draft.nav.selectedIndex = selected;
+            });
+            if (persist) {
+                this.persistConfig(this.config);
+            }
+            this.navLoaded.add(selected);
+            if (emit) {
+                this.selectedIndexChange.emit(selected);
+            }
+            return;
+        }
         const selected = this.clampIndex(index, this.config?.tabs?.length ?? 0);
         this.selectedIndexSignal.set(selected);
-        // Update config immutably
         if (this.config) {
             this.config = produce(this.config, (draft) => {
                 if (!draft.group) {
@@ -2504,11 +2580,20 @@ class PraxisTabs {
                     draft.group.selectedIndex = selected;
                 }
             });
-            this.persistConfig(this.config);
+            if (persist) {
+                this.persistConfig(this.config);
+            }
         }
-        // Lazy: mark as loaded
         this.groupLoaded.add(selected);
-        this.selectedIndexChange.emit(selected);
+        if (emit) {
+            this.selectedIndexChange.emit(selected);
+        }
+    }
+    reapplyControlledSelectedIndex() {
+        if (this.controlledSelectedIndex == null) {
+            return;
+        }
+        this.applySelectedIndex(this.controlledSelectedIndex, false, false);
     }
     closeTab(index) {
         if (!this.config?.tabs)
@@ -2764,10 +2849,16 @@ class PraxisTabs {
         return !this.isLazy() || this.navLoaded.has(index) || this.currentNavIndex() === index;
     }
     isEmptyGlobal() {
-        const hasTabs = !!(this.config?.tabs && this.config.tabs.length > 0);
-        const hasLinks = !!(this.config?.nav?.links && this.config.nav.links.length > 0);
+        const hasTabs = this.visibleTabEntries().length > 0;
+        const hasLinks = this.visibleNavLinkEntries().length > 0;
         return !(hasTabs || hasLinks);
     }
+    trackVisibleNavLink(index, entry) {
+        return entry.link.id || `${entry.link.label || 'nav-link'}:${entry.index ?? index}`;
+    }
+    trackVisibleTab(index, entry) {
+        return entry.tab.id || entry.tab.textLabel || `tab:${entry.index ?? index}`;
+    }
     trackNavLink(index, link) {
         return link.id || `${link.label || 'nav-link'}:${index}`;
     }
@@ -2952,7 +3043,7 @@ class PraxisTabs {
         return JSON.parse(JSON.stringify(widget));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: PraxisTabs, isStandalone: true, selector: "praxis-tabs", inputs: { config: "config", tabsId: "tabsId", componentInstanceId: "componentInstanceId", enableCustomization: "enableCustomization", form: "form", context: "context" }, outputs: { animationDone: "animationDone", focusChange: "focusChange", selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange", indexFocused: "indexFocused", selectFocusedIndex: "selectFocusedIndex", widgetEvent: "widgetEvent" }, providers: [providePraxisI18nConfig(PRAXIS_TABS_I18N_CONFIG)], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: PraxisTabs, isStandalone: true, selector: "praxis-tabs", inputs: { config: "config", tabsId: "tabsId", componentInstanceId: "componentInstanceId", selectedIndex: "selectedIndex", enableCustomization: "enableCustomization", form: "form", context: "context" }, outputs: { animationDone: "animationDone", focusChange: "focusChange", selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange", indexFocused: "indexFocused", selectFocusedIndex: "selectFocusedIndex", widgetEvent: "widgetEvent" }, providers: [providePraxisI18nConfig(PRAXIS_TABS_I18N_CONFIG)], usesOnChanges: true, ngImport: i0, template: `
     <div
       class="praxis-tabs-root"
       [class.density-compact]="config?.appearance?.density === 'compact'"
@@ -2995,13 +3086,13 @@ class PraxisTabs {
           cdkDropList
           cdkDropListOrientation="horizontal"
           [cdkDropListDisabled]="!config?.behavior?.reorderable"
-          (cdkDropListDropped)="onNavDrop($event)"
+          (cdkDropListDropped)="onVisibleNavDrop($event)"
           [disablePagination]="config?.nav?.disablePagination"
           [fitInkBarToContent]="config?.nav?.fitInkBarToContent"
           [mat-stretch-tabs]="config?.nav?.stretchTabs"
           [color]="config?.nav?.color"
           [backgroundColor]="config?.nav?.backgroundColor"
-          [selectedIndex]="currentNavIndex()"
+          [selectedIndex]="selectedVisibleNavIndex()"
           [attr.aria-label]="config?.nav?.ariaLabel || config?.group?.ariaLabel || null"
           [attr.aria-labelledby]="config?.nav?.ariaLabelledby || config?.group?.ariaLabelledby || null"
           [animationDuration]="effectiveAnimationDuration()"
@@ -3010,21 +3101,22 @@ class PraxisTabs {
         >
           <a
             mat-tab-link
-            *ngFor="let link of config?.nav?.links; let i = index; trackBy: trackNavLink"
+            *ngFor="let entry of visibleNavLinkEntries(); let i = index; trackBy: trackVisibleNavLink"
             cdkDrag
             [cdkDragDisabled]="!config?.behavior?.reorderable"
             cdkDragLockAxis="x"
-            [active]="getNavActive(i)"
-            [disabled]="link.disabled"
-            [disableRipple]="config?.nav?.disableRipple || link.disableRipple"
-            [fitInkBarToContent]="link.fitInkBarToContent || false"
-            [id]="link.id || ''"
-            (click)="onNavClick(i)"
+            [active]="getNavActive(entry.index)"
+            [disabled]="entry.link.disabled"
+            [disableRipple]="config?.nav?.disableRipple || entry.link.disableRipple"
+            [fitInkBarToContent]="entry.link.fitInkBarToContent || false"
+            [id]="entry.link.id || ''"
+            (click)="onNavClick(entry.index)"
           >
             <span *ngIf="config?.behavior?.reorderable" class="drag-handle" cdkDragHandle>
               <mat-icon fontIcon="drag_indicator"></mat-icon>
             </span>
-            {{ link.label }}
+            <mat-icon *ngIf="entry.link.icon" class="tab-label-icon" [praxisIcon]="entry.link.icon"></mat-icon>
+            {{ entry.link.label }}
           </a>
         </nav>
 
@@ -3074,7 +3166,7 @@ class PraxisTabs {
           [fitInkBarToContent]="config?.group?.fitInkBarToContent"
           [headerPosition]="config?.group?.headerPosition ?? 'above'"
           [preserveContent]="config?.group?.preserveContent"
-          [selectedIndex]="selectedIndexSignal()"
+          [selectedIndex]="selectedVisibleTabIndex()"
           [mat-stretch-tabs]="config?.group?.stretchTabs"
           [mat-align-tabs]="config?.group?.alignTabs || 'start'"
           [color]="config?.group?.color"
@@ -3084,26 +3176,27 @@ class PraxisTabs {
           [attr.aria-labelledby]="config?.group?.ariaLabelledby || null"
           (animationDone)="animationDone.emit()"
           (focusChange)="focusChange.emit($event)"
-          (selectedIndexChange)="onSelectedIndexChange($event)"
+          (selectedIndexChange)="onVisibleTabIndexChange($event)"
           (selectedTabChange)="selectedTabChange.emit($event)"
           class="praxis-tabs-group"
         >
           <mat-tab
-            *ngFor="let tab of config?.tabs; let i = index; trackBy: trackTab"
-            [disabled]="tab.disabled"
-            [labelClass]="tab.labelClass ?? ''"
-            [bodyClass]="tab.bodyClass ?? ''"
-            [id]="tab.id || ''"
-            [attr.aria-label]="tab.ariaLabel || null"
-            [attr.aria-labelledby]="tab.ariaLabelledby || null"
+            *ngFor="let entry of visibleTabEntries(); let i = index; trackBy: trackVisibleTab"
+            [disabled]="entry.tab.disabled"
+            [labelClass]="entry.tab.labelClass ?? ''"
+            [bodyClass]="entry.tab.bodyClass ?? ''"
+            [id]="entry.tab.id || ''"
+            [attr.aria-label]="entry.tab.ariaLabel || null"
+            [attr.aria-labelledby]="entry.tab.ariaLabelledby || null"
           >
             <ng-template mat-tab-label>
-              <span>{{ tab.textLabel }}</span>
+              <mat-icon *ngIf="entry.tab.icon" class="tab-label-icon" [praxisIcon]="entry.tab.icon"></mat-icon>
+              <span>{{ entry.tab.textLabel }}</span>
               <button
                 *ngIf="config?.behavior?.closeable"
                 mat-icon-button
                 type="button"
-                (click)="closeTab(i); $event.stopPropagation()"
+                (click)="closeTab(entry.index); $event.stopPropagation()"
                 (keydown.enter)="$event.stopPropagation()"
                 (keydown.space)="$event.stopPropagation()"
                 [attr.aria-label]="t('chrome.closeTab', 'Fechar aba')"
@@ -3114,10 +3207,10 @@ class PraxisTabs {
                 <button
                   mat-icon-button
                   type="button"
-                  (click)="moveTab(i, -1); $event.stopPropagation()"
+                  (click)="moveTab(entry.index, -1); $event.stopPropagation()"
                   (keydown.enter)="$event.stopPropagation()"
                   (keydown.space)="$event.stopPropagation()"
-                  [disabled]="i===0"
+                  [disabled]="entry.index===0"
                   [attr.aria-label]="t('chrome.moveTabLeft', 'Mover aba para esquerda')"
                 >
                   <mat-icon fontIcon="arrow_back"></mat-icon>
@@ -3125,10 +3218,10 @@ class PraxisTabs {
                 <button
                   mat-icon-button
                   type="button"
-                  (click)="moveTab(i, 1); $event.stopPropagation()"
+                  (click)="moveTab(entry.index, 1); $event.stopPropagation()"
                   (keydown.enter)="$event.stopPropagation()"
                   (keydown.space)="$event.stopPropagation()"
-                  [disabled]="i===(config?.tabs?.length||1)-1"
+                  [disabled]="entry.index===(config?.tabs?.length||1)-1"
                   [attr.aria-label]="t('chrome.moveTabRight', 'Mover aba para direita')"
                 >
                   <mat-icon fontIcon="arrow_forward"></mat-icon>
@@ -3137,20 +3230,20 @@ class PraxisTabs {
             </ng-template>
 
             <ng-template matTabContent>
-              <ng-container *ngIf="(tab.content?.length || tab.widgets?.length) && groupContentReady(i); else emptyTab">
-                <ng-container *ngIf="tab.content && form">
+              <ng-container *ngIf="(entry.tab.content?.length || entry.tab.widgets?.length) && groupContentReady(entry.index); else emptyTab">
+                <ng-container *ngIf="entry.tab.content && form">
                   <ng-container
                     dynamicFieldLoader
-                    [fields]="tab.content || []"
+                    [fields]="entry.tab.content || []"
                     [formGroup]="form!"
                   ></ng-container>
                 </ng-container>
-                <ng-container *ngIf="tab.widgets?.length">
-                  <ng-container *ngFor="let w of tab.widgets; let wi = index; trackBy: trackWidgetDefinition">
+                <ng-container *ngIf="entry.tab.widgets?.length">
+                  <ng-container *ngFor="let w of entry.tab.widgets; let wi = index; trackBy: trackWidgetDefinition">
                     <ng-container
                       [dynamicWidgetLoader]="resolveWidgetDefinition(w)"
                       [context]="context || {}"
-                      (widgetEvent)="emitWidgetEvent(tabEventPath(tab.id, i), $event)"
+                      (widgetEvent)="emitWidgetEvent(tabEventPath(entry.tab.id, entry.index), $event)"
                     ></ng-container>
                   </ng-container>
                 </ng-container>
@@ -3191,7 +3284,7 @@ class PraxisTabs {
         <mat-icon [praxisIcon]="'restart_alt'"></mat-icon>
       </button>
     </div>
-  `, isInline: true, styles: [".praxis-tabs-root{position:relative;display:block}.praxis-tabs-group.align-start .mat-mdc-tab-header{justify-content:flex-start}.praxis-tabs-group.align-center .mat-mdc-tab-header{justify-content:center}.praxis-tabs-group.align-end .mat-mdc-tab-header{justify-content:flex-end}.density-compact .mat-mdc-tab-body-content{padding:8px}.density-comfortable .mat-mdc-tab-body-content{padding:16px}.density-spacious .mat-mdc-tab-body-content{padding:24px}.tabs-ai-assistant{position:absolute;right:12px;bottom:72px;z-index:3}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.edit-fab-secondary{right:56px}.tab-empty{padding:16px;color:var(--md-sys-color-on-surface-variant);font-style:italic}.high-contrast{filter:contrast(1.2)}.reduce-motion{--mat-animation-duration: 0ms}.drag-handle{display:inline-flex;align-items:center;vertical-align:middle;margin-right:4px;cursor:grab}:host-context(.pdx-gridster-item) .praxis-tabs-root{display:flex;flex-direction:column;height:100%;min-height:0}:host-context(.pdx-gridster-item) .praxis-tabs-group,:host-context(.pdx-gridster-item) .mat-mdc-tab-group{flex:1 1 auto;min-height:0}:host-context(.pdx-gridster-item) .mat-mdc-tab-body-wrapper,:host-context(.pdx-gridster-item) .mat-mdc-tab-body-content{height:100%;min-height:0}:host-context(.pdx-gridster-item) .mat-mdc-tab-body-content{overflow:auto}:host-context(.pdx-gridster-item) .praxis-tabnav-content{flex:1 1 auto;min-height:0;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i3$1.MatTabContent, selector: "[matTabContent]" }, { kind: "directive", type: i3$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i3$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i3$1.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i3$1.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i3$1.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i10.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i10.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: EmptyStateCardComponent, selector: "praxis-empty-state-card", inputs: ["icon", "title", "description", "primaryAction", "secondaryActions", "inline", "tone"] }, { kind: "directive", type: DynamicFieldLoaderDirective, selector: "[dynamicFieldLoader]", inputs: ["fields", "formGroup", "enableExternalControlBinding", "itemTemplate", "debugTrace", "debugTraceLabel", "readonlyMode", "disabledMode", "presentationMode", "visible", "canvasMode"], outputs: ["componentsCreated", "fieldCreated", "fieldDestroyed", "renderError", "canvasMouseEnter", "canvasMouseLeave", "canvasClick"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "ownerWidgetKey", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent", "widgetDiagnostic"], exportAs: ["dynamicWidgetLoader"] }, { kind: "component", type: PraxisAiAssistantComponent, selector: "praxis-ai-assistant", inputs: ["adapter", "riskPolicy", "allowManualPatchEdit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, styles: [".praxis-tabs-root{position:relative;display:block}.praxis-tabs-group.align-start .mat-mdc-tab-header{justify-content:flex-start}.praxis-tabs-group.align-center .mat-mdc-tab-header{justify-content:center}.praxis-tabs-group.align-end .mat-mdc-tab-header{justify-content:flex-end}.density-compact .mat-mdc-tab-body-content{padding:8px}.density-comfortable .mat-mdc-tab-body-content{padding:16px}.density-spacious .mat-mdc-tab-body-content{padding:24px}.tabs-ai-assistant{position:absolute;right:12px;bottom:72px;z-index:3}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.edit-fab-secondary{right:56px}.tab-empty{padding:16px;color:var(--md-sys-color-on-surface-variant);font-style:italic}.high-contrast{filter:contrast(1.2)}.reduce-motion{--mat-animation-duration: 0ms}.drag-handle{display:inline-flex;align-items:center;vertical-align:middle;margin-right:4px;cursor:grab}.tab-label-icon{font-size:18px;width:18px;height:18px;margin-right:6px;vertical-align:middle}:host-context(.pdx-gridster-item) .praxis-tabs-root{display:flex;flex-direction:column;height:100%;min-height:0}:host-context(.pdx-gridster-item) .praxis-tabs-group,:host-context(.pdx-gridster-item) .mat-mdc-tab-group{flex:1 1 auto;min-height:0}:host-context(.pdx-gridster-item) .mat-mdc-tab-body-wrapper,:host-context(.pdx-gridster-item) .mat-mdc-tab-body-content{height:100%;min-height:0}:host-context(.pdx-gridster-item) .mat-mdc-tab-body-content{overflow:auto}:host-context(.pdx-gridster-item) .praxis-tabnav-content{flex:1 1 auto;min-height:0;overflow:auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i3$1.MatTabContent, selector: "[matTabContent]" }, { kind: "directive", type: i3$1.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i3$1.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i3$1.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "component", type: i3$1.MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: i3$1.MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: i3$1.MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: PraxisIconDirective, selector: "mat-icon[praxisIcon]", inputs: ["praxisIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i6$1.MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i6$1.MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i10.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i10.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i10.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: EmptyStateCardComponent, selector: "praxis-empty-state-card", inputs: ["icon", "title", "description", "primaryAction", "secondaryActions", "inline", "tone"] }, { kind: "directive", type: DynamicFieldLoaderDirective, selector: "[dynamicFieldLoader]", inputs: ["fields", "formGroup", "enableExternalControlBinding", "itemTemplate", "debugTrace", "debugTraceLabel", "readonlyMode", "disabledMode", "presentationMode", "visible", "canvasMode"], outputs: ["componentsCreated", "fieldCreated", "fieldDestroyed", "renderError", "canvasMouseEnter", "canvasMouseLeave", "canvasClick"] }, { kind: "directive", type: DynamicWidgetLoaderDirective, selector: "[dynamicWidgetLoader]", inputs: ["dynamicWidgetLoader", "ownerWidgetKey", "context", "strictValidation", "autoWireOutputs"], outputs: ["widgetEvent", "widgetDiagnostic"], exportAs: ["dynamicWidgetLoader"] }, { kind: "component", type: PraxisAiAssistantComponent, selector: "praxis-ai-assistant", inputs: ["adapter", "riskPolicy", "allowManualPatchEdit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: PraxisTabs, decorators: [{
             type: Component,
@@ -3251,13 +3344,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           cdkDropList
           cdkDropListOrientation="horizontal"
           [cdkDropListDisabled]="!config?.behavior?.reorderable"
-          (cdkDropListDropped)="onNavDrop($event)"
+          (cdkDropListDropped)="onVisibleNavDrop($event)"
           [disablePagination]="config?.nav?.disablePagination"
           [fitInkBarToContent]="config?.nav?.fitInkBarToContent"
           [mat-stretch-tabs]="config?.nav?.stretchTabs"
           [color]="config?.nav?.color"
           [backgroundColor]="config?.nav?.backgroundColor"
-          [selectedIndex]="currentNavIndex()"
+          [selectedIndex]="selectedVisibleNavIndex()"
           [attr.aria-label]="config?.nav?.ariaLabel || config?.group?.ariaLabel || null"
           [attr.aria-labelledby]="config?.nav?.ariaLabelledby || config?.group?.ariaLabelledby || null"
           [animationDuration]="effectiveAnimationDuration()"
@@ -3266,21 +3359,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         >
           <a
             mat-tab-link
-            *ngFor="let link of config?.nav?.links; let i = index; trackBy: trackNavLink"
+            *ngFor="let entry of visibleNavLinkEntries(); let i = index; trackBy: trackVisibleNavLink"
             cdkDrag
             [cdkDragDisabled]="!config?.behavior?.reorderable"
             cdkDragLockAxis="x"
-            [active]="getNavActive(i)"
-            [disabled]="link.disabled"
-            [disableRipple]="config?.nav?.disableRipple || link.disableRipple"
-            [fitInkBarToContent]="link.fitInkBarToContent || false"
-            [id]="link.id || ''"
-            (click)="onNavClick(i)"
+            [active]="getNavActive(entry.index)"
+            [disabled]="entry.link.disabled"
+            [disableRipple]="config?.nav?.disableRipple || entry.link.disableRipple"
+            [fitInkBarToContent]="entry.link.fitInkBarToContent || false"
+            [id]="entry.link.id || ''"
+            (click)="onNavClick(entry.index)"
           >
             <span *ngIf="config?.behavior?.reorderable" class="drag-handle" cdkDragHandle>
               <mat-icon fontIcon="drag_indicator"></mat-icon>
             </span>
-            {{ link.label }}
+            <mat-icon *ngIf="entry.link.icon" class="tab-label-icon" [praxisIcon]="entry.link.icon"></mat-icon>
+            {{ entry.link.label }}
           </a>
         </nav>
 
@@ -3330,7 +3424,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           [fitInkBarToContent]="config?.group?.fitInkBarToContent"
           [headerPosition]="config?.group?.headerPosition ?? 'above'"
           [preserveContent]="config?.group?.preserveContent"
-          [selectedIndex]="selectedIndexSignal()"
+          [selectedIndex]="selectedVisibleTabIndex()"
           [mat-stretch-tabs]="config?.group?.stretchTabs"
           [mat-align-tabs]="config?.group?.alignTabs || 'start'"
           [color]="config?.group?.color"
@@ -3340,26 +3434,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
           [attr.aria-labelledby]="config?.group?.ariaLabelledby || null"
           (animationDone)="animationDone.emit()"
           (focusChange)="focusChange.emit($event)"
-          (selectedIndexChange)="onSelectedIndexChange($event)"
+          (selectedIndexChange)="onVisibleTabIndexChange($event)"
           (selectedTabChange)="selectedTabChange.emit($event)"
           class="praxis-tabs-group"
         >
           <mat-tab
-            *ngFor="let tab of config?.tabs; let i = index; trackBy: trackTab"
-            [disabled]="tab.disabled"
-            [labelClass]="tab.labelClass ?? ''"
-            [bodyClass]="tab.bodyClass ?? ''"
-            [id]="tab.id || ''"
-            [attr.aria-label]="tab.ariaLabel || null"
-            [attr.aria-labelledby]="tab.ariaLabelledby || null"
+            *ngFor="let entry of visibleTabEntries(); let i = index; trackBy: trackVisibleTab"
+            [disabled]="entry.tab.disabled"
+            [labelClass]="entry.tab.labelClass ?? ''"
+            [bodyClass]="entry.tab.bodyClass ?? ''"
+            [id]="entry.tab.id || ''"
+            [attr.aria-label]="entry.tab.ariaLabel || null"
+            [attr.aria-labelledby]="entry.tab.ariaLabelledby || null"
           >
             <ng-template mat-tab-label>
-              <span>{{ tab.textLabel }}</span>
+              <mat-icon *ngIf="entry.tab.icon" class="tab-label-icon" [praxisIcon]="entry.tab.icon"></mat-icon>
+              <span>{{ entry.tab.textLabel }}</span>
               <button
                 *ngIf="config?.behavior?.closeable"
                 mat-icon-button
                 type="button"
-                (click)="closeTab(i); $event.stopPropagation()"
+                (click)="closeTab(entry.index); $event.stopPropagation()"
                 (keydown.enter)="$event.stopPropagation()"
                 (keydown.space)="$event.stopPropagation()"
                 [attr.aria-label]="t('chrome.closeTab', 'Fechar aba')"
@@ -3370,10 +3465,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 <button
                   mat-icon-button
                   type="button"
-                  (click)="moveTab(i, -1); $event.stopPropagation()"
+                  (click)="moveTab(entry.index, -1); $event.stopPropagation()"
                   (keydown.enter)="$event.stopPropagation()"
                   (keydown.space)="$event.stopPropagation()"
-                  [disabled]="i===0"
+                  [disabled]="entry.index===0"
                   [attr.aria-label]="t('chrome.moveTabLeft', 'Mover aba para esquerda')"
                 >
                   <mat-icon fontIcon="arrow_back"></mat-icon>
@@ -3381,10 +3476,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 <button
                   mat-icon-button
                   type="button"
-                  (click)="moveTab(i, 1); $event.stopPropagation()"
+                  (click)="moveTab(entry.index, 1); $event.stopPropagation()"
                   (keydown.enter)="$event.stopPropagation()"
                   (keydown.space)="$event.stopPropagation()"
-                  [disabled]="i===(config?.tabs?.length||1)-1"
+                  [disabled]="entry.index===(config?.tabs?.length||1)-1"
                   [attr.aria-label]="t('chrome.moveTabRight', 'Mover aba para direita')"
                 >
                   <mat-icon fontIcon="arrow_forward"></mat-icon>
@@ -3393,20 +3488,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             </ng-template>
 
             <ng-template matTabContent>
-              <ng-container *ngIf="(tab.content?.length || tab.widgets?.length) && groupContentReady(i); else emptyTab">
-                <ng-container *ngIf="tab.content && form">
+              <ng-container *ngIf="(entry.tab.content?.length || entry.tab.widgets?.length) && groupContentReady(entry.index); else emptyTab">
+                <ng-container *ngIf="entry.tab.content && form">
                   <ng-container
                     dynamicFieldLoader
-                    [fields]="tab.content || []"
+                    [fields]="entry.tab.content || []"
                     [formGroup]="form!"
                   ></ng-container>
                 </ng-container>
-                <ng-container *ngIf="tab.widgets?.length">
-                  <ng-container *ngFor="let w of tab.widgets; let wi = index; trackBy: trackWidgetDefinition">
+                <ng-container *ngIf="entry.tab.widgets?.length">
+                  <ng-container *ngFor="let w of entry.tab.widgets; let wi = index; trackBy: trackWidgetDefinition">
                     <ng-container
                       [dynamicWidgetLoader]="resolveWidgetDefinition(w)"
                       [context]="context || {}"
-                      (widgetEvent)="emitWidgetEvent(tabEventPath(tab.id, i), $event)"
+                      (widgetEvent)="emitWidgetEvent(tabEventPath(entry.tab.id, entry.index), $event)"
                     ></ng-container>
                   </ng-container>
                 </ng-container>
@@ -3447,7 +3542,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
         <mat-icon [praxisIcon]="'restart_alt'"></mat-icon>
       </button>
     </div>
-  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".praxis-tabs-root{position:relative;display:block}.praxis-tabs-group.align-start .mat-mdc-tab-header{justify-content:flex-start}.praxis-tabs-group.align-center .mat-mdc-tab-header{justify-content:center}.praxis-tabs-group.align-end .mat-mdc-tab-header{justify-content:flex-end}.density-compact .mat-mdc-tab-body-content{padding:8px}.density-comfortable .mat-mdc-tab-body-content{padding:16px}.density-spacious .mat-mdc-tab-body-content{padding:24px}.tabs-ai-assistant{position:absolute;right:12px;bottom:72px;z-index:3}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.edit-fab-secondary{right:56px}.tab-empty{padding:16px;color:var(--md-sys-color-on-surface-variant);font-style:italic}.high-contrast{filter:contrast(1.2)}.reduce-motion{--mat-animation-duration: 0ms}.drag-handle{display:inline-flex;align-items:center;vertical-align:middle;margin-right:4px;cursor:grab}:host-context(.pdx-gridster-item) .praxis-tabs-root{display:flex;flex-direction:column;height:100%;min-height:0}:host-context(.pdx-gridster-item) .praxis-tabs-group,:host-context(.pdx-gridster-item) .mat-mdc-tab-group{flex:1 1 auto;min-height:0}:host-context(.pdx-gridster-item) .mat-mdc-tab-body-wrapper,:host-context(.pdx-gridster-item) .mat-mdc-tab-body-content{height:100%;min-height:0}:host-context(.pdx-gridster-item) .mat-mdc-tab-body-content{overflow:auto}:host-context(.pdx-gridster-item) .praxis-tabnav-content{flex:1 1 auto;min-height:0;overflow:auto}\n"] }]
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".praxis-tabs-root{position:relative;display:block}.praxis-tabs-group.align-start .mat-mdc-tab-header{justify-content:flex-start}.praxis-tabs-group.align-center .mat-mdc-tab-header{justify-content:center}.praxis-tabs-group.align-end .mat-mdc-tab-header{justify-content:flex-end}.density-compact .mat-mdc-tab-body-content{padding:8px}.density-comfortable .mat-mdc-tab-body-content{padding:16px}.density-spacious .mat-mdc-tab-body-content{padding:24px}.tabs-ai-assistant{position:absolute;right:12px;bottom:72px;z-index:3}.edit-fab{position:absolute;right:12px;bottom:12px;z-index:2}.edit-fab-secondary{right:56px}.tab-empty{padding:16px;color:var(--md-sys-color-on-surface-variant);font-style:italic}.high-contrast{filter:contrast(1.2)}.reduce-motion{--mat-animation-duration: 0ms}.drag-handle{display:inline-flex;align-items:center;vertical-align:middle;margin-right:4px;cursor:grab}.tab-label-icon{font-size:18px;width:18px;height:18px;margin-right:6px;vertical-align:middle}:host-context(.pdx-gridster-item) .praxis-tabs-root{display:flex;flex-direction:column;height:100%;min-height:0}:host-context(.pdx-gridster-item) .praxis-tabs-group,:host-context(.pdx-gridster-item) .mat-mdc-tab-group{flex:1 1 auto;min-height:0}:host-context(.pdx-gridster-item) .mat-mdc-tab-body-wrapper,:host-context(.pdx-gridster-item) .mat-mdc-tab-body-content{height:100%;min-height:0}:host-context(.pdx-gridster-item) .mat-mdc-tab-body-content{overflow:auto}:host-context(.pdx-gridster-item) .praxis-tabnav-content{flex:1 1 auto;min-height:0;overflow:auto}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], tabsId: [{
@@ -3455,6 +3550,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 args: [{ required: true }]
             }], componentInstanceId: [{
                 type: Input
+            }], selectedIndex: [{
+                type: Input
             }], enableCustomization: [{
                 type: Input
             }], form: [{
@@ -3504,6 +3601,19 @@ const PRAXIS_TABS_PORTS = [
         description: 'Fragmento canonico de configuracao das tabs/nav e dos widgets internos.',
         exposure: { public: true, group: 'config' },
     },
+    {
+        id: 'selectedIndex',
+        label: 'Indice selecionado',
+        direction: 'input',
+        semanticKind: 'value',
+        schema: {
+            id: 'number',
+            kind: 'ts-type',
+            ref: 'number',
+        },
+        description: 'Indice ativo de abas/nav para controle externo por composicao.',
+        exposure: { public: true, group: 'state' },
+    },
     {
         id: 'selectedIndexChange',
         label: 'Troca de indice selecionado',
@@ -3554,6 +3664,12 @@ const PRAXIS_TABS_COMPONENT_METADATA = {
             label: 'ID da instância',
             description: 'Identificador opcional para múltiplas instâncias na mesma rota',
         },
+        {
+            name: 'selectedIndex',
+            type: 'number',
+            label: 'Indice selecionado',
+            description: 'Indice ativo de abas/nav controlavel externamente pela composicao',
+        },
         {
             name: 'enableCustomization',
             type: 'boolean',
@@ -3718,11 +3834,11 @@ const PRAXIS_TABS_AUTHORING_MANIFEST = {
     editableTargets: [
         { kind: 'tab', resolver: 'tab-by-id-or-label', description: 'A group-mode tab in config.tabs[].' },
         { kind: 'tabLabel', resolver: 'tab-by-id-or-label', description: 'The text label of a group-mode tab.' },
-        { kind: 'tabIcon', resolver: 'tab-by-id-or-label', description: 'Icon metadata for a tab label when supported by the authoring document.' },
-        { kind: 'tabContent', resolver: 'tab-content-by-id', description: 'Dynamic fields or widgets hosted by a tab or nav link.' },
+        { kind: 'tabIcon', resolver: 'tab-by-id-or-label', description: 'Icon metadata rendered in a group tab label.' },
+        { kind: 'tabContent', resolver: 'tab-or-link-by-id', description: 'Dynamic fields or widgets hosted by a tab or nav link.' },
         { kind: 'activeTab', resolver: 'tab-index-or-id', description: 'Selected tab or nav link index.' },
-        { kind: 'visibility', resolver: 'tab-by-id-or-label', description: 'Authoring visibility flag used by tools before runtime projection.' },
-        { kind: 'disabledState', resolver: 'tab-by-id-or-label', description: 'Disabled state of a tab or nav link.' },
+        { kind: 'visibility', resolver: 'tab-or-link-by-id', description: 'Runtime visibility flag for a group tab or nav link.' },
+        { kind: 'disabledState', resolver: 'tab-or-link-by-id', description: 'Disabled state of a tab or nav link.' },
         { kind: 'layout', resolver: 'tabs-layout-config', description: 'Group/nav mode, header position, density, stretch and behavior settings.' },
     ],
     operations: [
@@ -3735,8 +3851,10 @@ const PRAXIS_TABS_AUTHORING_MANIFEST = {
             inputSchema: tabItemSchema,
             effects: [{ kind: 'append-unique', path: 'tabs[]', key: 'id' }],
             validators: ['tab-id-unique', 'tabs-mode-compatible', 'tab-content-valid'],
-            affectedPaths: ['tabs[]', 'group.selectedIndex'],
-            submissionImpact: false,
+            destructive: false,
+            requiresConfirmation: false,
+            affectedPaths: ['tabs[]'],
+            submissionImpact: 'config-only',
             preconditions: ['config-initialized'],
         },
         {
@@ -3751,12 +3869,28 @@ const PRAXIS_TABS_AUTHORING_MANIFEST = {
                     replacementActiveTabId: { type: 'string' },
                 },
             },
-            effects: [{ kind: 'remove-by-key', path: 'tabs[]', key: 'id' }],
+            effects: [
+                {
+                    kind: 'compile-domain-patch',
+                    handler: 'tabs.remove-tab-and-reselect',
+                    handlerContract: {
+                        reads: ['tabs[]', 'group.selectedIndex'],
+                        writes: ['tabs[]', 'group.selectedIndex'],
+                        identityKeys: ['tabs[].id'],
+                        inputSchema: {
+                            type: 'object',
+                            properties: { replacementActiveTabId: { type: 'string' } },
+                        },
+                        failureModes: ['target-tab-missing', 'replacement-tab-missing', 'confirmation-missing'],
+                        description: 'Removes the target tab by stable id and reselects a safe replacement when the active/default tab is removed.',
+                    },
+                },
+            ],
             destructive: true,
             requiresConfirmation: true,
             validators: ['tab-exists', 'active-tab-removal-safe', 'tab-content-removal-confirmed'],
             affectedPaths: ['tabs[]', 'group.selectedIndex'],
-            submissionImpact: false,
+            submissionImpact: 'config-only',
             preconditions: ['config-initialized', 'target-tab-exists', 'confirmation-collected'],
         },
         {
@@ -3767,9 +3901,11 @@ const PRAXIS_TABS_AUTHORING_MANIFEST = {
             target: { kind: 'tabLabel', resolver: 'tab-by-id-or-label', ambiguityPolicy: 'fail', required: true },
             inputSchema: { type: 'object', required: ['textLabel'], properties: { textLabel: { type: 'string' } } },
             effects: [{ kind: 'merge-by-key', path: 'tabs[]', key: 'id' }],
+            destructive: false,
+            requiresConfirmation: false,
             validators: ['tab-exists', 'tab-label-valid'],
             affectedPaths: ['tabs[].textLabel'],
-            submissionImpact: false,
+            submissionImpact: 'config-only',
             preconditions: ['config-initialized', 'target-tab-exists'],
         },
         {
@@ -3780,9 +3916,11 @@ const PRAXIS_TABS_AUTHORING_MANIFEST = {
             target: { kind: 'tabIcon', resolver: 'tab-by-id-or-label', ambiguityPolicy: 'fail', required: true },
             inputSchema: { type: 'object', required: ['icon'], properties: { icon: { type: 'string' } } },
             effects: [{ kind: 'merge-by-key', path: 'tabs[]', key: 'id' }],
+            destructive: false,
+            requiresConfirmation: false,
             validators: ['tab-exists', 'tab-icon-valid'],
             affectedPaths: ['tabs[].icon'],
-            submissionImpact: false,
+            submissionImpact: 'visual-only',
             preconditions: ['config-initialized', 'target-tab-exists'],
         },
         {
@@ -3792,10 +3930,25 @@ const PRAXIS_TABS_AUTHORING_MANIFEST = {
             targetKind: 'tab',
             target: { kind: 'tab', resolver: 'tab-by-id-or-label', ambiguityPolicy: 'fail', required: true },
             inputSchema: { type: 'object', required: ['beforeTabId'], properties: { beforeTabId: { type: 'string' } } },
-            effects: [{ kind: 'reorder-by-key', path: 'tabs[]', key: 'id' }],
+            effects: [
+                {
+                    kind: 'compile-domain-patch',
+                    handler: 'tabs.reorder-tab-and-preserve-selection',
+                    handlerContract: {
+                        reads: ['tabs[]', 'group.selectedIndex'],
+                        writes: ['tabs[]', 'group.selectedIndex'],
+                        identityKeys: ['tabs[].id'],
+                        inputSchema: { type: 'object', required: ['beforeTabId'], properties: { beforeTabId: { type: 'string' } } },
+                        failureModes: ['target-tab-missing', 'before-tab-missing', 'unstable-tab-id'],
+                        description: 'Reorders tabs by stable id and remaps group.selectedIndex when the selected tab crosses positions.',
+                    },
+                },
+            ],
+            destructive: false,
+            requiresConfirmation: false,
             validators: ['tab-exists', 'tab-order-deterministic'],
             affectedPaths: ['tabs[]', 'group.selectedIndex'],
-            submissionImpact: false,
+            submissionImpact: 'config-only',
             preconditions: ['config-initialized', 'target-tab-exists'],
         },
         {
@@ -3805,10 +3958,25 @@ const PRAXIS_TABS_AUTHORING_MANIFEST = {
             targetKind: 'disabledState',
             target: { kind: 'disabledState', resolver: 'tab-or-link-by-id', ambiguityPolicy: 'fail', required: true },
             inputSchema: { type: 'object', required: ['disabled'], properties: { disabled: { type: 'boolean' } } },
-            effects: [{ kind: 'merge-by-key', path: 'tabs[]', key: 'id' }],
+            effects: [
+                {
+                    kind: 'compile-domain-patch',
+                    handler: 'tabs.set-tab-or-link-disabled',
+                    handlerContract: {
+                        reads: ['tabs[]', 'nav.links[]', 'group.selectedIndex', 'nav.selectedIndex'],
+                        writes: ['tabs[].disabled', 'nav.links[].disabled'],
+                        identityKeys: ['tabs[].id', 'nav.links[].id'],
+                        inputSchema: { type: 'object', required: ['disabled'], properties: { disabled: { type: 'boolean' } } },
+                        failureModes: ['target-tab-or-link-missing', 'ambiguous-target', 'active-item-disabled-without-reselection'],
+                        description: 'Sets disabled on the resolved group tab or nav link without guessing between modes.',
+                    },
+                },
+            ],
+            destructive: false,
+            requiresConfirmation: false,
             validators: ['tab-or-link-exists', 'active-tab-disabled-safe'],
             affectedPaths: ['tabs[].disabled', 'nav.links[].disabled'],
-            submissionImpact: false,
+            submissionImpact: 'config-only',
             preconditions: ['config-initialized', 'target-tab-or-link-exists'],
         },
         {
@@ -3818,10 +3986,25 @@ const PRAXIS_TABS_AUTHORING_MANIFEST = {
             targetKind: 'visibility',
             target: { kind: 'visibility', resolver: 'tab-or-link-by-id', ambiguityPolicy: 'fail', required: true },
             inputSchema: { type: 'object', required: ['visible'], properties: { visible: { type: 'boolean' } } },
-            effects: [{ kind: 'merge-by-key', path: 'tabs[]', key: 'id' }],
+            effects: [
+                {
+                    kind: 'compile-domain-patch',
+                    handler: 'tabs.set-tab-or-link-visible',
+                    handlerContract: {
+                        reads: ['tabs[]', 'nav.links[]', 'group.selectedIndex', 'nav.selectedIndex'],
+                        writes: ['tabs[].visible', 'nav.links[].visible'],
+                        identityKeys: ['tabs[].id', 'nav.links[].id'],
+                        inputSchema: { type: 'object', required: ['visible'], properties: { visible: { type: 'boolean' } } },
+                        failureModes: ['target-tab-or-link-missing', 'ambiguous-target', 'active-item-hidden-without-reselection'],
+                        description: 'Sets visible on the resolved group tab or nav link and preserves deterministic visible-index mapping.',
+                    },
+                },
+            ],
+            destructive: false,
+            requiresConfirmation: false,
             validators: ['tab-or-link-exists', 'active-tab-visibility-safe'],
             affectedPaths: ['tabs[].visible', 'nav.links[].visible'],
-            submissionImpact: false,
+            submissionImpact: 'config-only',
             preconditions: ['config-initialized', 'target-tab-or-link-exists'],
         },
         {
@@ -3831,10 +4014,25 @@ const PRAXIS_TABS_AUTHORING_MANIFEST = {
             targetKind: 'activeTab',
             target: { kind: 'activeTab', resolver: 'tab-index-or-id', ambiguityPolicy: 'fail', required: true },
             inputSchema: { type: 'object', required: ['selectedIndex'], properties: { selectedIndex: { type: 'number' }, tabId: { type: 'string' } } },
-            effects: [{ kind: 'set-value', path: 'group.selectedIndex' }],
+            effects: [
+                {
+                    kind: 'compile-domain-patch',
+                    handler: 'tabs.set-active-item',
+                    handlerContract: {
+                        reads: ['tabs[]', 'nav.links[]', 'group.selectedIndex', 'nav.selectedIndex'],
+                        writes: ['group.selectedIndex', 'nav.selectedIndex'],
+                        identityKeys: ['tabs[].id', 'nav.links[].id'],
+                        inputSchema: { type: 'object', required: ['selectedIndex'], properties: { selectedIndex: { type: 'number' }, tabId: { type: 'string' } } },
+                        failureModes: ['target-tab-or-link-missing', 'selected-index-out-of-range', 'hidden-or-disabled-target'],
+                        description: 'Sets the active index for the current primary mode using either selectedIndex or a resolved tab/link id.',
+                    },
+                },
+            ],
+            destructive: false,
+            requiresConfirmation: false,
             validators: ['active-tab-exists', 'selected-index-in-range'],
             affectedPaths: ['group.selectedIndex', 'nav.selectedIndex'],
-            submissionImpact: false,
+            submissionImpact: 'config-only',
             preconditions: ['config-initialized', 'target-tab-or-link-exists'],
         },
         {
@@ -3856,9 +4054,11 @@ const PRAXIS_TABS_AUTHORING_MANIFEST = {
                 },
             },
             effects: [{ kind: 'merge-object', path: 'appearance' }, { kind: 'merge-object', path: 'group' }, { kind: 'merge-object', path: 'nav' }, { kind: 'merge-object', path: 'behavior' }],
+            destructive: false,
+            requiresConfirmation: false,
             validators: ['tabs-mode-compatible', 'layout-values-valid', 'editor-runtime-round-trip'],
             affectedPaths: ['appearance.density', 'group.headerPosition', 'group.alignTabs', 'group.stretchTabs', 'nav.stretchTabs', 'behavior.lazyLoad'],
-            submissionImpact: false,
+            submissionImpact: 'config-only',
             preconditions: ['config-initialized'],
         },
         {
@@ -3868,10 +4068,25 @@ const PRAXIS_TABS_AUTHORING_MANIFEST = {
             targetKind: 'tabContent',
             target: { kind: 'tabContent', resolver: 'tab-or-link-by-id', ambiguityPolicy: 'fail', required: true },
             inputSchema: tabPatchSchema,
-            effects: [{ kind: 'merge-by-key', path: 'tabs[]', key: 'id' }],
+            effects: [
+                {
+                    kind: 'compile-domain-patch',
+                    handler: 'tabs.set-tab-or-link-content',
+                    handlerContract: {
+                        reads: ['tabs[]', 'nav.links[]'],
+                        writes: ['tabs[].content', 'tabs[].widgets', 'nav.links[].content', 'nav.links[].widgets'],
+                        identityKeys: ['tabs[].id', 'nav.links[].id'],
+                        inputSchema: tabPatchSchema,
+                        failureModes: ['target-tab-or-link-missing', 'invalid-dynamic-field-content', 'invalid-widget-definition'],
+                        description: 'Updates content/widgets only on the resolved group tab or nav link while preserving nested widget identity.',
+                    },
+                },
+            ],
+            destructive: false,
+            requiresConfirmation: false,
             validators: ['tab-or-link-exists', 'tab-content-valid', 'widget-event-delegated'],
             affectedPaths: ['tabs[].content', 'tabs[].widgets', 'nav.links[].content', 'nav.links[].widgets'],
-            submissionImpact: false,
+            submissionImpact: 'config-only',
             preconditions: ['config-initialized', 'target-tab-or-link-exists'],
         },
     ],

package/index.d.ts

@@ -81,9 +81,11 @@ interface TabMetadata {
     ariaLabel?: string;
     ariaLabelledby?: string;
     textLabel?: string;
+    icon?: string;
     labelClass?: string | string[];
     bodyClass?: string | string[];
     disabled?: boolean;
+    visible?: boolean;
     content?: any[];
     widgets?: WidgetDefinition[];
     isActive?: boolean;
@@ -106,8 +108,10 @@ interface TabNavMetadata {
 interface TabLinkMetadata {
     id?: string;
     label: string;
+    icon?: string;
     active?: boolean;
     disabled?: boolean;
+    visible?: boolean;
     disableRipple?: boolean;
     fitInkBarToContent?: boolean;
     content?: any[];
@@ -140,6 +144,7 @@ declare class PraxisTabs implements OnInit, OnChanges, OnDestroy {
     config: TabsMetadata | null;
     tabsId: string;
     componentInstanceId?: string;
+    set selectedIndex(index: number | null | undefined);
     enableCustomization: boolean;
     form: FormGroup | null;
     context: Record<string, any> | null;
@@ -155,6 +160,7 @@ declare class PraxisTabs implements OnInit, OnChanges, OnDestroy {
     protected selectedIndexSignal: i0.WritableSignal<number>;
     private groupLoaded;
     private navLoaded;
+    private controlledSelectedIndex?;
     private readonly destroy$;
     private readonly widgetDefinitionCache;
     ngOnInit(): void;
@@ -163,9 +169,23 @@ declare class PraxisTabs implements OnInit, OnChanges, OnDestroy {
     isNavMode(): boolean;
     effectiveAnimationDuration(): string;
     getNavActive(i: number): boolean;
+    protected visibleNavLinkEntries(): Array<{
+        link: TabLinkMetadata;
+        index: number;
+    }>;
+    protected visibleTabEntries(): Array<{
+        tab: TabMetadata;
+        index: number;
+    }>;
+    protected selectedVisibleNavIndex(): number;
+    protected selectedVisibleTabIndex(): number;
+    protected onVisibleTabIndexChange(index: number): void;
     onNavClick(i: number): void;
     onNavDrop(event: CdkDragDrop<any>): void;
+    protected onVisibleNavDrop(event: CdkDragDrop<any>): void;
     onSelectedIndexChange(index: number): void;
+    private applySelectedIndex;
+    private reapplyControlledSelectedIndex;
     closeTab(index: number): void;
     moveTab(index: number, delta: number): void;
     openEditor(): void;
@@ -187,6 +207,14 @@ declare class PraxisTabs implements OnInit, OnChanges, OnDestroy {
     protected groupContentReady(index: number): boolean;
     protected navContentReady(index: number): boolean;
     protected isEmptyGlobal(): boolean;
+    protected trackVisibleNavLink(index: number, entry: {
+        link: TabLinkMetadata;
+        index: number;
+    }): string;
+    protected trackVisibleTab(index: number, entry: {
+        tab: TabMetadata;
+        index: number;
+    }): string;
     protected trackNavLink(index: number, link: TabLinkMetadata): string;
     protected trackTab(index: number, tab: TabMetadata): string;
     protected trackWidgetDefinition(index: number, widget: WidgetDefinition): string;
@@ -200,7 +228,7 @@ declare class PraxisTabs implements OnInit, OnChanges, OnDestroy {
     protected styleCss(): string | null;
     private cloneWidgetDefinition;
     static ɵfac: i0.ɵɵFactoryDeclaration<PraxisTabs, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<PraxisTabs, "praxis-tabs", never, { "config": { "alias": "config"; "required": false; }; "tabsId": { "alias": "tabsId"; "required": true; }; "componentInstanceId": { "alias": "componentInstanceId"; "required": false; }; "enableCustomization": { "alias": "enableCustomization"; "required": false; }; "form": { "alias": "form"; "required": false; }; "context": { "alias": "context"; "required": false; }; }, { "animationDone": "animationDone"; "focusChange": "focusChange"; "selectedIndexChange": "selectedIndexChange"; "selectedTabChange": "selectedTabChange"; "indexFocused": "indexFocused"; "selectFocusedIndex": "selectFocusedIndex"; "widgetEvent": "widgetEvent"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PraxisTabs, "praxis-tabs", never, { "config": { "alias": "config"; "required": false; }; "tabsId": { "alias": "tabsId"; "required": true; }; "componentInstanceId": { "alias": "componentInstanceId"; "required": false; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; }; "enableCustomization": { "alias": "enableCustomization"; "required": false; }; "form": { "alias": "form"; "required": false; }; "context": { "alias": "context"; "required": false; }; }, { "animationDone": "animationDone"; "focusChange": "focusChange"; "selectedIndexChange": "selectedIndexChange"; "selectedTabChange": "selectedTabChange"; "indexFocused": "indexFocused"; "selectFocusedIndex": "selectFocusedIndex"; "widgetEvent": "widgetEvent"; }, never, never, true, never>;
 }
 
 declare const PRAXIS_TABS_I18N_NAMESPACE = "praxisTabs";

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@praxisui/tabs",
-  "version": "8.0.0-beta.11",
+  "version": "8.0.0-beta.12",
   "description": "Configurable tabs (group and nav) for Praxis UI with metadata-driven content and runtime editor.",
   "peerDependencies": {
     "@angular/common": "^20.0.0",
     "@angular/core": "^20.0.0",
     "@angular/material": "^20.0.0",
     "@angular/cdk": "^20.0.0",
-    "@praxisui/core": "^8.0.0-beta.11",
-    "@praxisui/dynamic-fields": "^8.0.0-beta.11",
-    "@praxisui/settings-panel": "^8.0.0-beta.11"
+    "@praxisui/core": "^8.0.0-beta.12",
+    "@praxisui/dynamic-fields": "^8.0.0-beta.12",
+    "@praxisui/settings-panel": "^8.0.0-beta.12"
   },
   "dependencies": {
     "tslib": "^2.3.0",