@praxisui/tabs 9.0.65 → 9.0.67

package/README.md

@@ -4,6 +4,19 @@
 
 Use this package for UI composition. The host still owns route-level state, domain persistence, widget data providers and authorization.
 
+### Resizing a tab container
+
+In paginated `group` and `nav` headers, changing the container width reveals the
+active label without moving keyboard focus or emitting a selection event. This
+also applies to widget resizing without a window resize, in LTR and RTL. A label
+wider than the available strip is aligned to its leading edge; it cannot be shown
+in full. Explicitly disabled pagination is respected.
+
+The runtime observes the header size and preserves Material's scrolling animation.
+The group adapter accesses Material's internal tab header because `MatTabGroup`
+has no focus-neutral reveal operation. Keep the group/nav, LTR/RTL resize regression
+tests when upgrading Material; consumers must not replicate this bridge.
+
 ## LLM Recommendation Guide
 
 - Recommend when: users need metadata-driven tab groups or nav tabs with editable tab content, visibility, order, icons, and runtime authoring.

package/ai/component-registry.json

@@ -1,8 +1,8 @@
 {
   "schemaVersion": "1.0.0",
-  "generatedAt": "2026-09-06T00:12:27.419Z",
+  "generatedAt": "2026-09-07T00:54:55.301Z",
   "packageName": "@praxisui/tabs",
-  "packageVersion": "9.0.65",
+  "packageVersion": "9.0.67",
   "sourceRegistry": "praxis-component-registry-ingestion",
   "sourceRegistryVersion": "1.0.0",
   "componentCount": 1,

package/fesm2022/praxisui-tabs.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { inject, Input, Inject, Component, ChangeDetectorRef, effect, EventEmitter, signal, ViewChild, Output, ChangeDetectionStrategy, ENVIRONMENT_INITIALIZER } from '@angular/core';
+import { inject, Input, Inject, Component, ChangeDetectorRef, effect, EventEmitter, signal, ElementRef, afterEveryRender, ViewChild, Output, ChangeDetectionStrategy, ENVIRONMENT_INITIALIZER } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i3 from '@angular/material/tabs';
-import { MatTabsModule, MatTabGroup } from '@angular/material/tabs';
+import { MatTabsModule, MatTabGroup, MatTabNav } from '@angular/material/tabs';
 import * as i4$1 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
 import * as i10 from '@angular/material/tooltip';
@@ -3184,6 +3184,15 @@ class PraxisTabs {
     controlledSelectedIndex;
     destroyed = false;
     groupComponent;
+    navComponent;
+    hostElement = inject(ElementRef);
+    headerResizeObserver;
+    observedHeader;
+    headerResizeFrame;
+    observedHeaderWidth = -1;
+    observeHeaderAfterRender = afterEveryRender({
+        read: () => this.observeHeaderResize(),
+    });
     destroy$ = new Subject();
     widgetDefinitionCache = new WeakMap();
     generatedContentForm = new FormGroup({});
@@ -3214,6 +3223,10 @@ class PraxisTabs {
     }
     ngOnDestroy() {
         this.destroyed = true;
+        this.headerResizeObserver?.disconnect();
+        if (this.headerResizeFrame !== undefined) {
+            this.hostElement.nativeElement.ownerDocument.defaultView?.cancelAnimationFrame(this.headerResizeFrame);
+        }
         this.assistantSessions.removeContextSession(this.buildAiAssistantContextSnapshot().identity);
         this.aiAssistantStateSubscription?.unsubscribe();
         this.destroy$.next();
@@ -3222,6 +3235,65 @@ class PraxisTabs {
     isNavMode() {
         return !!this.config?.nav && !!this.config?.nav?.links?.length;
     }
+    observeHeaderResize() {
+        const header = this.hostElement.nativeElement.querySelector(':scope > .praxis-tabs-root > mat-tab-group > mat-tab-header, :scope > .praxis-tabs-root > nav[mat-tab-nav-bar]') ?? undefined;
+        if (header === this.observedHeader || typeof ResizeObserver === 'undefined')
+            return;
+        this.headerResizeObserver?.disconnect();
+        this.observedHeader = header;
+        this.observedHeaderWidth = -1;
+        if (!header)
+            return;
+        this.headerResizeObserver = new ResizeObserver(() => {
+            const width = header.clientWidth;
+            if (width === this.observedHeaderWidth)
+                return;
+            this.observedHeaderWidth = width;
+            const view = header.ownerDocument.defaultView;
+            if (!view)
+                return;
+            if (this.headerResizeFrame !== undefined)
+                view.cancelAnimationFrame(this.headerResizeFrame);
+            this.headerResizeFrame = view.requestAnimationFrame(() => {
+                this.headerResizeFrame = undefined;
+                if (!this.destroyed && header === this.observedHeader && width > 0) {
+                    this.revealActiveHeaderLabel(header);
+                }
+            });
+        });
+        this.headerResizeObserver.observe(header);
+    }
+    revealActiveHeaderLabel(element) {
+        // Material adapter boundary: MatTabGroup exposes no focus-neutral reveal API.
+        // Keep access to its header here; do not change selectedIndex or focusIndex.
+        const header = this.isNavMode() ? this.navComponent : this.groupComponent?._tabHeader;
+        if (!header || header.disablePagination)
+            return;
+        header.updatePagination();
+        this.cdr.detectChanges(); // Material paginator controls must occupy their final width.
+        const viewport = element.querySelector('.mat-mdc-tab-label-container, .mat-mdc-tab-link-container');
+        const active = element.querySelector('[role="tab"][aria-selected="true"]');
+        if (!viewport || !active)
+            return;
+        const rtl = element.ownerDocument.defaultView?.getComputedStyle(element).direction === 'rtl';
+        const labelContainer = active.offsetParent;
+        if (rtl && !labelContainer)
+            return;
+        // Offset geometry excludes the in-flight transform animation. Reading painted
+        // rectangles here would apply an intermediate animation delta a second time.
+        const end = rtl ? labelContainer.offsetWidth - active.offsetLeft
+            : active.offsetLeft + active.offsetWidth;
+        const start = end - active.offsetWidth;
+        const before = header.scrollDistance;
+        const after = before + viewport.clientWidth;
+        const delta = start < before ? start - before
+            : end > after ? Math.min(end - after, start - before) : 0;
+        if (Math.abs(delta) < 1)
+            return;
+        header.scrollDistance += delta;
+        header.updatePagination();
+        this.cdr.markForCheck();
+    }
     effectiveAnimationDuration() {
         const reduce = this.config?.accessibility?.reduceMotion;
         if (reduce)
@@ -4314,7 +4386,7 @@ class PraxisTabs {
         return JSON.parse(JSON.stringify(config));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PraxisTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisTabs, isStandalone: true, selector: "praxis-tabs", inputs: { config: "config", tabsId: "tabsId", componentInstanceId: "componentInstanceId", configPersistenceStrategy: "configPersistenceStrategy", selectedIndex: "selectedIndex", enableCustomization: "enableCustomization", form: "form", context: "context" }, outputs: { animationDone: "animationDone", focusChange: "focusChange", selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange", indexFocused: "indexFocused", selectFocusedIndex: "selectFocusedIndex", configChange: "configChange", widgetEvent: "widgetEvent" }, providers: [providePraxisI18nConfig(PRAXIS_TABS_I18N_CONFIG)], viewQueries: [{ propertyName: "groupComponent", first: true, predicate: MatTabGroup, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PraxisTabs, isStandalone: true, selector: "praxis-tabs", inputs: { config: "config", tabsId: "tabsId", componentInstanceId: "componentInstanceId", configPersistenceStrategy: "configPersistenceStrategy", selectedIndex: "selectedIndex", enableCustomization: "enableCustomization", form: "form", context: "context" }, outputs: { animationDone: "animationDone", focusChange: "focusChange", selectedIndexChange: "selectedIndexChange", selectedTabChange: "selectedTabChange", indexFocused: "indexFocused", selectFocusedIndex: "selectFocusedIndex", configChange: "configChange", widgetEvent: "widgetEvent" }, providers: [providePraxisI18nConfig(PRAXIS_TABS_I18N_CONFIG)], viewQueries: [{ propertyName: "groupComponent", first: true, predicate: MatTabGroup, descendants: true }, { propertyName: "navComponent", first: true, predicate: MatTabNav, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
     <div
       class="praxis-tabs-root"
       [class.density-compact]="config?.appearance?.density === 'compact'"
@@ -4981,6 +5053,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
             }], groupComponent: [{
                 type: ViewChild,
                 args: [MatTabGroup]
+            }], navComponent: [{
+                type: ViewChild,
+                args: [MatTabNav]
             }] } });
 
 class PraxisTabsWidgetConfigEditor {

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@praxisui/tabs",
-  "version": "9.0.65",
+  "version": "9.0.67",
   "description": "Configurable tabs (group and nav) for Praxis UI with metadata-driven content and runtime editor.",
   "peerDependencies": {
     "@angular/common": "^21.0.0",
     "@angular/core": "^21.0.0",
     "@angular/material": "^21.0.0",
     "@angular/cdk": "^21.0.0",
-    "@praxisui/core": "^9.0.65",
-    "@praxisui/dynamic-fields": "^9.0.65",
-    "@praxisui/settings-panel": "^9.0.65",
+    "@praxisui/core": "^9.0.67",
+    "@praxisui/dynamic-fields": "^9.0.67",
+    "@praxisui/settings-panel": "^9.0.67",
     "@angular/forms": "^21.0.0",
     "@angular/router": "^21.0.0",
-    "@praxisui/ai": "^9.0.65",
+    "@praxisui/ai": "^9.0.67",
     "rxjs": "~7.8.0"
   },
   "dependencies": {

package/types/praxisui-tabs.d.ts

@@ -208,6 +208,13 @@ declare class PraxisTabs implements OnInit, OnChanges, OnDestroy {
     private controlledSelectedIndex?;
     private destroyed;
     private groupComponent?;
+    private navComponent?;
+    private readonly hostElement;
+    private headerResizeObserver?;
+    private observedHeader?;
+    private headerResizeFrame?;
+    private observedHeaderWidth;
+    private readonly observeHeaderAfterRender;
     private readonly destroy$;
     private widgetDefinitionCache;
     private readonly generatedContentForm;
@@ -215,6 +222,8 @@ declare class PraxisTabs implements OnInit, OnChanges, OnDestroy {
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     isNavMode(): boolean;
+    private observeHeaderResize;
+    private revealActiveHeaderLabel;
     effectiveAnimationDuration(): string;
     getNavActive(i: number): boolean;
     protected visibleNavLinkEntries(): Array<{